/* --------------------------- Responsive screen 768 to 949 ------------------------ */

/* ----------- Nav ------------------ */
nav{
	height: 300vw;
	width: 300vw;
	transform: translate(-50%, -97%);
	left: 50%;
	padding: 10px;
}
#nav-overlay {
	height: 300vw;
	width: 300vw;
	margin: 5px;

}
li{
	font-size: 16px;
}
nav:hover {
	transform: translate(-50%, -95.5%);
	padding: 40px;
  }

#navbar-bottom {
    bottom: -3%;
	padding: 15px 140px;
}
#navbar-options-wraper {
	/* background-color: rgba(255, 255, 255, 0.533); */
	padding: 5px 50px;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
	transition-duration: 0.4s;
  }


/* ----------------------- Main Screen ---------------------- */
  #left {
	left: 2%;
	top: 5%;
  }

  #right {
	right: 2%;
	bottom: 0%;
  }

  /* ------------------ Projects Page -------------- */

  #projects{
	padding: 100px 0px;
}
#cards-container{
	padding: 5px;
  }
.project-card{
	padding: 60px 20px;
	flex-direction: column;

}
/* .project-images>img{
	width: 100%;
	max-height: 100%;
} */


/* ------------------ Team PAge ----------------- */

#team::-webkit-scrollbar{
	display: initial;
	background-color: rgba(255, 0, 0, 0);
	height: 5px;
	width: 0;
	
}
#team::-webkit-scrollbar-thumb{
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
}
#team{
	gap: 20px;
	justify-content: start;

}

.pillerTop{
	width: 300px;
}
.piller{
	width: 300px;
}



/* ------------------------------------- bottom bar -------------------------------- */


	  #bottom-logo img {
		background-color: transparent;
		opacity: 0.3;
	  }
	  #contact-left,
	  #contact-right {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	  }
	  
	  .contact-links {
		padding: 10px;
		text-shadow: 0 6px 5px #000000;
		display: flex;
		gap: 10px;
		align-items: center;
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	  }
	  .contact-links i {
		/* background-color: rgba(0, 0, 0, 0.47); */
		font-size: larger;
		padding: 8px 16px;
		border-radius: 10px;
		border-left: 2px solid black;
		border-right: 2px solid white;
	  }
	  #social-media {
		display: flex;
		border-radius: 10px;
		margin-top: 10px;
		gap: 5px;
		width: max-content;
	  
	  }
	  #social-media .contact-links i {
		background-color: rgb(105, 105, 105);
		text-shadow: 0 0px 5px #000000;
		transition: cubic-bezier(0.55, 0.055, 0.675, 0.19), 0.5s;
	  }
	  
	  #social-media .contact-links i:hover {
		background-color: rgb(105, 105, 105);
		color: white;
		box-shadow: 0 5px 10px #000000;
		text-shadow: 0 6px 5px #000000;
	  
	  }
	  #contact-right {
		  display: flex;
		  justify-content: space-between;
		  align-items: end;
		  flex-direction: column;
		  gap: 10px;
		}
	  
		#contact-right .contact-links{
		  padding: 2px 20px;
		  border-right: 1px solid white;
		  transition-duration: .2s;
		}
		
		#contact-right .contact-links:hover{
		  border-right: 12px solid white;
		}
		.contact-links a{
		  color: white;
		  text-decoration: none;
		}