:root {
  --bg: rgb(0, 0, 0);
}
@font-face {
	font-family: orbitron;
	src: url(../fonts/Orbitron-VariableFont_wght.ttf)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100vh;
  width: 100vw;
  font-family: orbitron;
  font-size: 16px;
  color: white;
  scroll-behavior: smooth;
}

#bg {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
  z-index: -1;
}
#overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.85);
}
#bg > video {
  height: 120%;
  width: 120%;
  object-fit: cover;
  position: absolute;
  z-index: -2;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transform: translate(-10%, -10%);
}

/* nav{
	background-color: rgb(107, 107, 250);
}
.logo-text{
	display: flex;
	flex-direction: column;
}
nav>ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
}
ul{
	list-style: none;

}
li>img{
	height: 50px;
	width: 50px;
	object-fit: cover;
}
.tech{
	font-size: 10px;
} */

/* 
#bg{
	position: absolute;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

#layer-1{
	clip-path: polygon(60% 0, 70% 0, 50% 100%, 40% 100%);
	background-color: rgb(243, 243, 243);
	height: 100vh;
	width: 100vw;
	position: relative;
	top: 0;
	left: -100%;
	opacity: .1;
	animation-name: reflection;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	overflow: hidden;
	border-right: 10px solid white;
}

@keyframes reflection {
	0%{
		left: -100%;
	}
	40%{
		left: 100%;
	}
	100%{
		left: 100%;

	}

}


#layer-2{
	background-image: radial-gradient(blue, black);
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	overflow: hidden;
	z-index: -1;
	
}




#main{
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
#circle-1{
	height: 500px;
	width: 500px;
	border-radius: 50%;
	border: 5px solid rgb(105, 105, 105);
	display: flex;
	justify-content: center;
	align-items: center;
}
#circle-1-child-1{
	height: 450px;
	width: 450px;
	border-radius: 50%;
	border: 10px solid rgb(105, 105, 105);
	border-top: 10px solid white;
	border-bottom: 10px solid white;
} */

#main {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#img-1 {
  height: 50%;
  animation-name: loop;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0.3;
  /* border: 2px dashed white;
	border-radius: 50%; */
}
#img-2 {
  height: 65%;
  animation-name: loop;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
  position: absolute;
  opacity: 0.1;
}
#img-5 {
  height: 50%;
  animation-name: loop;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* animation-direction: reverse; */
  position: absolute;
  opacity: 0.1;
  border: 2px dashed white;
  border-radius: 50%;
}
#img-3 {
  height: 33%;
  animation-name: loop;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
  position: absolute;

  opacity: 0.1;
}
#img-4 {
  height: 24%;
  animation-name: loop2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* animation-timing-function: linear; */
  /* animation-direction: reverse; */
  /* background-color: rgb(0, 0, 0); */
  border-radius: 50%;
  position: absolute;
  opacity: 0.6;
}
@keyframes loop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loop2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#logo {
  height: 90px;
  width: 90px;
  /* background-color: rgba(255, 255, 255, 0.512); */
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  /* transform: rotate(-45deg); */
  /* border: 2px dashed white; */
}
#logo > img {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  object-fit: contain;
  border-radius: 50%;
  transform: rotate(-45deg);
  /* border: 5px dashed white; */
  box-shadow: 0px 0px 10px white;
  -webkit-filter: drop-shadow(0px 0px 5px #ffffff);
  filter: drop-shadow(0px 0px 5px #ffffff);
  transition-duration: 0.5s;
}

#logo img:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* -------------------- navbar copy ---------------- */
/* nav {
  height: 11vh;
  width: 100vw;
  position: fixed;
  z-index: 5;
  border-bottom: 1px solid white;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;

  display: flex;
  justify-content: center;
  padding: 5px;
  align-items: center;
  transition-duration: .4s;
  background-color: rgba(173, 216, 230, 0.3); */
/* box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.371); */
/* box-shadow: 0px 2px 10px lightblue; */
/* background-color: rgba(0, 0, 0, 0.2); */
/* background-color: rgb(92, 124, 255); */

/* } */

/* ------------------------------------- Nav bar -------------------------------- */

nav {
  height: 200vw;
  width: 200vw;
  transform: translate(-25%, -97%);
  /* bottom: -110%; */
  /* top: -185%; */
  position: fixed;
  z-index: 5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.307);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  padding: 20px;
  align-items: end;
  transition-duration: 0.4s;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  backdrop-filter: blur(10px);
  /* background-color: rgba(173, 216, 230, 0.3); */
  /* background-color: rgb(92, 124, 255); */
  /* box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.371); */
  /* box-shadow: 0px 2px 10px lightblue; */
}

#nav-overlay {
  /* background-color: red; */
  position: absolute;
  height: 200vw;
  width: 200vw;
  /* transform: translate(-25%,-50%); */
  bottom: 0;
  /* border-radius: 50%; */
  margin: 10px;
  animation-name: rotatenav;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 200s;
  /* background-color: lightblue; */
  /* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 10' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e"); */
  /* border-radius: 100px; */
  border-radius: 50%;
}

nav:hover {
  /* box-shadow: 0px 2px 10px lightblue; */
  /* height: 20vh; */
  /* top: -172%; */
  transform: translate(-25%, -94%);
  padding: 80px;
  background-color: rgba(255, 255, 255, 0.2);
}
/* nav:hover{
	box-shadow: 0px 2px 10px lightblue;
	height: 20vh;

} */
nav:hover #nav-overlay {
  rotate: 360deg;
  /* border: 5px dashed white; */
  /* filter: blur(8px);
  -webkit-filter: blur(8px); */
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 7' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}
@keyframes rotatenav {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
#navbar-options-wraper {
  /* background-color: rgba(255, 255, 255, 0.533); */
  padding: 5px 60px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  transition-duration: 0.4s;
}

nav:hover #navbar-options-wraper {
  background-color: rgba(255, 255, 255, 0.2);
}
#navbar-bottom {
  position: absolute;
  bottom: -2%;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px 120px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
  transition-duration: 0.4s;
}
nav:hover #navbar-bottom {
  bottom: 0;
}
#navbar-options {
  display: flex;
  list-style: none;
  gap: 20px;
  padding: 5px;
  /* white-space: nowrap; */
  perspective: 200px;
  /* transform: translate(-50%,-50%); */
}
li {
  transform: rotateX(-40deg);
  padding: 10px 20px;
  /* height: 50px; */
  cursor: pointer;
  transition-duration: 0.4s;
  background-color: rgba(0, 0, 0, 0.2);
  /* box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.371); */
}
li > a {
  color: white;
  text-decoration: none;
  /* background-color: red; */
}
li:hover {
  /* opacity: .5; */
  /* background-color: rgba(255, 255, 255, 0.86); */
  box-shadow: 0px 2px 10px lightblue;
}
nav:hover li {
  background-color: rgba(0, 0, 0, 0.6);
}

#left {
  position: absolute;
  left: 5%;
  top: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-shadow: 0px 5px 10px lightblue;
  /* box-shadow: 0 0px 10px white; */
  padding: 10px;
  padding: 80px 14px;
  /* background-color: rgba(173, 216, 230, 0.1);
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-radius: 10px;
  width: 480px;
  height: 200px;
  animation-name: textscreen;
  animation-duration: .5s; */
}
@keyframes textscreen {
  0% {
    width: 0;
  }
  100% {
    width: 480px;
  }
}

#left-top {
  font-size: 25px;
  display: flex;
}
#left-mid {
  display: flex;
  font-size: 14px;
}
.mid-tag {
  /* background-color: lightblue; */
  color: lightblue;
}
/* #tag{
	background-color: red;
}
*/
.shuffler {
  /* border-right: 1px solid white; */
  animation-name: pointer;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  padding-right: 2px;
}

@keyframes pointer {
  0% {
    border-right: 1px solid lightblue;
  }
  50% {
    border-right: 1px solid lightblue;
  }
  100% {
    border-right: 1px solid transparent;
  }
}
#right {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-shadow: 0px 5px 10px lightblue;
  /* box-shadow: 0 0px 10px white; */
  padding: 10px;
  padding: 80px 14px;
  /* background-color: rgba(173, 216, 230, 0.1);
	border-left: 2px solid white;
	border-right: 2px solid white;
	border-radius: 10px;
	width: 480px;
	height: 200px;
	animation-name: textscreen;
	animation-duration: .5s; */
}
#right {
  right: 8%;
  bottom: 4%;
}

#right-top {
  font-size: 25px;
  display: flex;
}
#right-mid {
  display: flex;
  font-size: 14px;
  color: lightblue;
}
#right-mid-tag {
  color: lightblue;
}
#right-top > span {
  display: flex;
  justify-content: center;

  align-items: center;
}
#right-top > span > img {
  height: 50px;
  width: 50px;

  border-radius: 50%;
  margin-right: 10px;
  rotate: -45deg;
  /* box-shadow: 0px 0px 20px white; */
  /* background-color: rgba(255, 255, 255, 0.392); */
  border-radius: 50%;

  /* -webkit-filter: drop-shadow(0px 0px 5px #ffffff); */
  filter: drop-shadow(0px 5px 5px #ffffff);

  object-fit: contain;
  animation-name: bulbON;
  animation-duration: 1s;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}

@keyframes bulbON {
  0% {
    box-shadow: 0px 0px 20px transparent;
    background-color: transparent;
  }
  100% {
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* ----------------------------------------- Page 1 ------------------------------------- */

#services {
  /* background-color: blue; */
  padding: 50px 20px;
  width: 100%;
  display: flex;
  /* justify-content: center; */
  align-items: start;
  gap: 10px;
  overflow: auto;
  scroll-behavior: auto;
  position: relative;
}
#services::-webkit-scrollbar {
  background-color: transparent;
  height: 4px;
}
#services::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
#services::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}
/* #services::-webkit-scrollbar-track{
	background-color: black;
} */

.page-1-card {
  /* background-color: red; */
  min-width: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 15px;
  gap: 10px;
}
.page-1-card h2 {
  text-shadow: 0px 0px 30px lightblue;
  margin-top: 20px;
}
/* .page-1-card:nth-child(1){
	height: 250px;
	width: 250px;
	padding: 10px;
	position: relative;
}
.page-1-card:nth-child(3){
	height: 250px;
	width: 250px;
	padding: 10px;
	position: relative;
} */
.circles {
  /* transform: scale(.5); */
  transition-duration: 1s;
  /* background-color: blue; */
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 1px solid white;
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    rgba(255, 255, 255, 0.25),
    transparent,
    transparent
  );
}
.serviceCircleImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  animation-name: roundloop;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 7' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  padding: 10px;
}

@keyframes roundloop {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.serviceLogos {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  position: absolute;
  /* animation-name: roundloop; */
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* opacity: .5; */
  /* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 7' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e"); */
  padding: 10px;
  transform: scale(0.4);
  /* background-color: red; */
  animation-fill-mode: backwards;
  border-radius: 50%;
}

/* ----------------------------------------- Page 2 ------------------------------------- */

.page {
  transition-duration: 1s;
  /* background: linear-gradient(transparent, black); */
}
.container {
  /* background-color: rgba(25, 0, 255, 0.271); */
  max-height: 100vh;
  width: 100vw;
  padding: 30px;
  display: flex;
  /* justify-content: center; */
  align-items: flex-start;
  flex-direction: column;
  /* gap: 50px; */
  /* text-shadow: 0px 5px 10px lightblue; */
  /* background-color: red; */
  /* border: 2px solid white; */
}
.page-headings {
  border-left: 7px solid rgb(255, 255, 255);
  border-right: 7px solid rgb(255, 255, 255);
  border-radius: 5px;
  /* border-bottom: 7px solid rgb(255, 255, 255); */
  padding: 5px 20px;
  /* color: black; */
  text-wrap-mode: nowrap;

  /* border-bottom: 1px solid rgba(255, 255, 255, 0.307); */
  /* border-bottom-right-radius: 50%;
	  border-bottom-left-radius: 50%; */
  /* border-radius: 50%; */
  font-size: 16px;
  display: flex;
  justify-content: center;
  padding: 20px;
  align-items: end;
  /* box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.371); */
  /* box-shadow: 0px 2px 10px lightblue; */
  transition-duration: 0.4s;
  /* background-color: rgba(255, 255, 255, 0.020); */
  /* background-color: rgba(255, 255, 255, 0.1); */
  /* background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent); */
  background: radial-gradient(transparent, rgba(255, 255, 255, 0.2));
  /* background: linear-gradient(to left, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.2)); */

  /* background-color: rgba(173, 216, 230, 0.3); */
  /* background-color: rgb(92, 124, 255); */
  overflow: hidden;
  backdrop-filter: blur(10px);
  text-shadow: 0px 0px 30px lightblue;

  width: 0;
  opacity: 0;
}
/* #services{

	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}

.card{
	background-color: blueviolet;
	padding: 100px 200px;
} */

/* -------------------------------------- Team ----------------------------- */
#page-3 {
  height: auto;
}
#page-3-container {
  /* padding: 0 30px; */
  max-height: 100%;
}
#team::-webkit-scrollbar {
  display: none;
}
#team {
  display: flex;
  /* gap: 20px; */
  width: 100%;
  justify-content: space-around;
  /* overflow: hidden; */
  overflow-y: scroll;
  /* background-color: rgba(255, 0, 0); */
  padding: 50px 0px;
}

.card {
  /* background-color: blueviolet; */
  /* padding: 100px 200px; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  transition-duration: 0.5s;
  /* margin-top: 20px; */
}

.team-image-container {
  /* height: 180px;
	width: 150px; */
  height: 300px;
  width: 240px;
  position: relative;
  /* overflow: hidden; */
  /* background-color: red; */
  /* background-color: transparent; */
  z-index: 100;
  margin-top: 10px;
}
.team-image-container img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* box-shadow: 0px 10px 10px rgba(255, 255, 255, 0.574); */
  /* -webkit-filter: drop-shadow(5px 5px 5px #ffffff); */
  /* filter: drop-shadow(0px 0px 10px #ffffff6a); */
  filter: drop-shadow(0px 0px 2px lightblue);
}

.pillerTop {
  height: 40px;
  width: 22vw;
  /* background-color: rgba(255, 255, 255, 0.4); */
  background: radial-gradient(rgba(255, 255, 255, 0.4), transparent);

  border-radius: 50%;
  transform: translate(0, 50%);
  transition-duration: 0.4s;
  box-shadow: 0px -50px 40px rgba(255, 255, 255, 0);

  backdrop-filter: blur(10px);
}
.piller {
  height: 500px;
  width: 22vw;
  background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
  /* background: linear-gradient( to left ,rgba(255, 255, 255, 0.1), transparent); */
  /* background-color: rgb(255, 0, 0); */
  transition-duration: 0.4s;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* justify-content: center; */
  padding: 40px 10px;
}

.piller span {
  font-size: 16px;
  text-align: center;
  /* background-color: red; */
  color: white;
  font-weight: 100;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.icons {
  font-size: large;
  color: lightgreen;
  font-weight: 500;
  padding: 10px 0;
}
.badge {
  font-size: small;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  padding: 5px 10px;
  color: black;
}
/* .card:hover{

} */
.card:hover .piller {
  background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
  box-shadow: 0px -60px 40px rgba(255, 255, 255, 0.05);
}
.card:hover .pillerTop {
  background: radial-gradient(rgba(255, 255, 255), transparent);
  /* background-color: rgba(255, 255, 255, 0.9); */
  box-shadow: 0px -50px 40px rgba(255, 255, 255, 0.2);
}
.card:hover .piller span {
  /* background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    box-shadow: 0px -60px 40px rgba(255, 255, 255, 0.05); */
  /* color: black; */
  text-shadow: 0px 0px 5px lightblue;
}
.card:hover .icons {
  transition-duration: 0.5s;

  /* background: radial-gradient(rgba(255, 255, 255, 0.1), transparent); */
  color: white;
  font-weight: 800;
  text-shadow: 0px 0px 10px lightblue;
  font-size: x-large;
  /* transform: translate(0,0%); */
  animation-name: iconbounce;
  animation-timing-function: ease-out;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.card:hover .team-image-container img {
  transition-duration: 0.5s;
  filter: drop-shadow(0px 0px 10px lightblue);
}

@keyframes iconbounce {
  0% {
    transform: translate(0, 0%);
  }
  50% {
    transform: translate(0, 20%);
  }
  100% {
    transform: translate(0, 0%);
  }
}

#page-2-container {
  gap: 20px;
}

#projects {
  /* background-color: rgba(255, 255, 255, 0.271); */
  position: relative;
  width: 100%;
  padding: 100px 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* border-radius: 50% ; */
  /* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 7' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e"); */
  overflow: hidden;
  /* border: 2px solid white; */
  /* backdrop-filter: blur(10px); */
  /* background: linear-gradient(to bottom, transparent, rgba(0, 21, 255, 0.1), transparent); */
  /* background: radial-gradient(  rgba(255, 255, 255, 0.5) , transparent 60% ,transparent 80%); */
}
#project-overlay {
  top: 50%;
  left: 50%;
  position: absolute;
  width: 90vw;
  height: 90vw;
  transform: translate(-50%, -50%) rotate(0deg);
  display: flex;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 7' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  animation-name: rotatecircle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 100s;
  /* rotate: 360deg; */
  border: 2px dashed white;
  /* background-color: rgba(38, 0, 255, 0.05); */
  /* background: radial-gradient(clo); */
  /* background-color: red; */

  /* outline: ; */
  opacity: 0.1;
  backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: -1;
  box-shadow: 0px 0px 20px#ffffff;
}
#project-overlay > img {
  transform: scale(0.5);
  opacity: 1;
  /* background-color: red; */
  box-shadow: 0px 0px 20px#ffffff;
  border-radius: 50%;
  /* backdrop-filter: blur(10px); */
  filter: blur(8px);
  /* background: radial-gradient(white, transparent); */
}

@keyframes rotatecircle {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#prev-btn,
#next-btn {
  background-color: transparent;
  padding: 10px;
  color: white;
  font-size: 30px;
  outline: none;
  border: none;
  font-weight: 100;
  cursor: pointer;
  transition-duration: 0.1s;
  border: 5px solid transparent;
  opacity: 0.5;
}
#prev-btn {
  border-right: 0px solid white;
  /* border-left: 5px solid white; */
}
#prev-btn:hover {
  border-right: 4px solid white;
  opacity: 1;
  text-shadow: 0px 0px 10px white;
}

#next-btn {
  border-left: 0px solid white;
}

#next-btn:hover {
  border-left: 4px solid white;
  opacity: 1;
  text-shadow: 0px 0px 10px white;
}

#cards-container {
  display: flex;
  overflow: scroll;
  transition-duration: 0.4s;
  /* background-color: red; */
  gap: 20px;
}

#cards-container::-webkit-scrollbar {
  display: none;
}
.project-card {
  background-color: rgba(255, 255, 255, 0.05);
  position: relative;
  transition-duration: 0.4s;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 80px 20px;
  border-left: 7px solid rgb(255, 255, 255);
  border-right: 7px solid rgb(255, 255, 255);
  border-radius: 5px;
  backdrop-filter: blur(10px);
  /* box-shadow: 0px 0px 20px#ffffff74; */
  text-shadow: 0px 0px 30px lightblue;

  font-size: 16px;
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}
.project-card-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: lightgreen;
  /* background: linear-gradient(to right, lightgreen, transparent); */
  top: 0;
  right: 0;
  transition-duration: 0.4s;
  transition-timing-function: linear;
  transition-delay: 0.4s;
  box-shadow: -10px 0px 50px white;
}

.project-images {
  max-height: 300px;
  border-radius: 10px;
  background-color: red;
  /* overflow: hidden; */
  /* position: relative; */
  object-fit: cover;
  box-shadow: 0px 0px 5px lightblue;
}
#project-description{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#project-description h2{
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
  border-left: 2px solid white;
  /* background-color: #ffffff10; */
  padding: 10px;
}
#project-description span{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
/* ---------------------------- orignal --------------------- */

/* .project-images{
	max-height: 300px;
	border-radius: 10px;
	background-color: red;
	overflow: hidden;
	position: relative;
}
.project-images>img{
	width: 100%;
	max-height: 100%;
	object-fit: cover;
	transition-duration: .5s;
} */

/* ------------------------------------------------------ */

/* .project-images>img:hover{
	opacity: 1;

} */

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

/* bottom {
	height: 200vw;
	width: 200vw;
	transform: translate(-25%, -90%);
	position: fixed;
	z-index: 5;
	border-top: 1px solid rgba(255, 255, 255, 0.307);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	padding: 20px;
	align-items: start;
	transition-duration: 0.4s;
	background-color: rgba(255, 255, 255, 0.1);
	overflow: hidden;
	backdrop-filter: blur(10px);
  }
  
  #bottom-overlay {
	position: absolute;
	height: 200vw;
	width: 200vw;
	top: 0;
	margin: 10px;
	animation-name: rotatebottom;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 200s;
	border-radius: 50%;
	
	
  }
  
  bottom:hover {
	transform: translate(-25%, -94%);
	padding: 80px;
	  background-color: rgba(255, 255, 255, 0.2);
	  
  
  }
  bottom:hover #bottom-overlay {
	rotate: 360deg;
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='white' stroke-width='25' stroke-dasharray='1%2c 7' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  }
  @keyframes rotatebottom {
	0% {
	  rotate: 0deg;
	}
	100% {
	  rotate: 360deg;
	}
  }
  #bottombar-options-wraper {
	padding: 5px 60px;
	clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
	transition-duration: 0.4s;
  
  }
  
  bottom:hover #bottombar-options-wraper {
	background-color: rgba(255, 255, 255, 0.2);
  }
  #bottombar-bottom {
	  position: absolute;
	  top: -2%;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 20px 120px;
	clip-path: polygon(0% 0, 100% 0, 90% 100%, 10% 100%);
	transition-duration: 0.4s;
  }
  bottom:hover #bottombar-bottom {
	  top: 0;
	}
  #bottombar-options {
	display: flex;
	list-style: none;
	gap: 20px;
	padding: 5px;
	perspective: 200px;
  }
  li {
	transform: rotateX(-40deg);
	padding: 10px 20px;
	cursor: pointer;
	transition-duration: 0.4s;
	background-color: rgba(0, 0, 0, 0.2);
  }
  li>a{
	  color: white;
	  text-decoration: none;
  }
  li:hover {
	box-shadow: 0px 2px 10px lightblue;
  }
  bottom:hover li {
	  background-color: rgba(0, 0, 0, 0.6);
  
	} */

#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:30px;
  margin: 0;
}
#contact {
  background-color: rgb(0, 0, 0);
  padding: 50px;
  height: 50vh;
  width: 100%;
  border-radius: 50px;
  border-radius: 20px;
  transition-duration: 0.4s;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.2));
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 20px;
}
#bottom-logo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
#bottom-logo img {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  object-fit: contain;
  transform: rotate(-45deg);
  box-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
  opacity: 0.4;
}
#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;
  }
  

  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;
  }

body::-webkit-scrollbar {
  display: none;
}