/* --------------------------- Responsive screen 300 to 767 ------------------------ */

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

}
li{
	font-size: 14px;
	padding: 8px 12px;
}
nav:hover {
	transform: translate(-50%, -90%);
	padding: 50px;
  }

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


/* ----------------------- Main Screen ---------------------- */
  #left {
	left: 0%;
	top: 5%;
	padding: 80px 5px;
	width: 100%;
	font-size: x-small;
  }

  #right {
	left: 0%;
	bottom: 0%;
	/* background-color: red; */
	padding: 80px 5px;
	width: 100%;
  }
  
  #left-top {
	font-size: 20px;
	display: flex;
  }
  #left-mid {
	display: flex;
	font-size: 10px;
  }


  #right-top {
	font-size: 20px;
	display: flex;
  }
  #right-mid {
	display: flex;
	font-size: 10px;
	color: lightblue;
  }


  /* --------------------- Common pages ---------------- */


  .container{
	padding: 0px;
}
.page-headings{
	font-size: 12px;
}

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

  #projects{
	padding: 100px 0px;
	gap: 5px;
	/* background-color: red; */
}
#project-overlay{
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	width: 140vw;
	height: 140vw;
}

#cards-container{
	padding: 5px;
  }
.project-card{
	padding: 20px 10px;
	flex-direction: column;
	border-left: 2px solid rgb(255, 255, 255);
	border-right: 2px solid rgb(255, 255, 255);
}



#prev-btn, #next-btn{
	padding: 0px;
	/* font-size: 16px;	 */
	border: 0px;
	position: absolute;
	bottom: 5%;
	z-index: 1;

}
#prev-btn{
	border-right: 0px solid white;
	/* border-left: 5px solid white; */
	left: 5%;
	/* transform: translate(-500%,0%); */
}

#next-btn{
	border-left: 0px solid white;
	/* position: absolute;
	bottom: 10%; */
	right: 5%;
	/* transform: translate(500%,0%); */

}


#prev-btn:hover{
	border: 0px;
}


#next-btn:hover{
	border: 0px;

}


/* ------------------ 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 -------------------------------- */

#page-4 {
	/* background-color: rgba(255, 255, 255, 0.456); */
	padding: 0;
	margin: 0;
  }
  #page-4-container {
	/* background-color: rgba(255, 255, 255, 0.2); */
	padding:0px;
	margin: 0;
	margin-top: 10px;
  }
  #contact {
	background-color: rgb(0, 0, 0);
	padding: 30px 10px;
	height: max-content;
	width: 100%;
	border-radius: 50px;
	border-radius: 20px;
	transition-duration: 0.4s;
	background: linear-gradient(transparent, rgba(255, 255, 255, 0.2));
	display: inline;
	justify-content: center;
	position: relative;
	margin-top: 20px;
	
  }
#bottom-logo img {
	background-color: transparent;
	opacity: 0.1;
  }
  #contact-left,
  #contact-right {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  }
  
  .contact-links {
	padding: 10px 0;
	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: 20px;
	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;
	  margin-top: 50px;
	}
  
	#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;
	}
	
  
	footer{
	  background-color: black;
	  padding: 30px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	  font-size: smaller;
	  text-align: center;
	}