/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Full Page Background */
body {
  background: linear-gradient(-45deg, #0d1b2a, #1b263b, #415a77, #778da9);
  background-size: 400% 400%;
  animation: animateBackground 5s infinite ease-in-out;
  color: white;
  overflow-x: hidden;
  position: relative;
}

/* Background Animation */
@keyframes animateBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animated Floating Blobs */
.blob {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(173, 216, 230, 0.2);
  filter: blur(80px);
  border-radius: 50%;
  animation: floatBlob 2s infinite alternate ease-in-out;
}

@keyframes floatBlob {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-30px) translateX(20px); }
  100% { transform: translateY(0) translateX(0); }
}

.blob:nth-child(1) { top: 10%; left: 10%; width: 200px; height: 200px; animation-duration: 12s; }
.blob:nth-child(2) { top: 50%; right: 15%; animation-duration: 10s; }
.blob:nth-child(3) { bottom: 10%; left: 50%; animation-duration: 14s; }

/* Header */
header {
  background-color: #bed1df;
  padding: 20px;
  display: flex;
 justify-content: space-around;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
  border-radius: 0 0 30px 30px;
}

.logo-container {
  display: flex;
  justify-content:space-between;
  gap:400px;

  
}
@media (max-width: 768px) {
  .logo-container {
      display: flex;
      justify-content:space-between;  
      gap:2px;      
  }
}

.logo {
  height: 100px;
  width: auto;
}
.logo1 {
  height: 200px;
  width: auto;
  margin-top: 20px;
  box-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 15px #00bfff, 
  0 0 20px #00bfff, 0 0 25px #00bfff, 0 0 30px #00bfff, 0 0 35px #00bfff;

}
/* Sections - Glassmorphism Effect */
.about, .team, .gallery {
  max-width: 900px;
  margin: 80px auto;
  padding: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.15);
  text-align: center;
}

/* About Section */
.about h1 {
  font-size: 32px;
  color: black;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00bfff, 
  0 0 20px #00bfff, 0 0 25px #00bfff, 0 0 30px #00bfff, 0 0 35px #00bfff;
}

.about p {
  font-size: 18px;
  line-height: 1.6;
  margin-top: 10px;
}

/* Team Section */
.team h2 {
  font-size: 28px;
  color: #f4f4f4;
  margin-bottom: 20px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}


.member {
  background: rgba(255, 255, 255, 0.15);
  padding: 15px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.member:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.3);
}

.teampic{
height:400px;
width:auto;
text-align:center;
margin-top:20px;
}

/* Footer */
footer {
  background-color: #0f1a2b;
  color: #ffffff;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  margin-top: 30px;
  border-radius: 30px 30px 0 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .logo {
      height: 60px;
  }
  .teampic{
  height:200px;
  align-items: center;
}
  
  .about, .team {
      padding: 30px 15px;
  }

  .about h1 {
      font-size: 26px;
  }

  .about p {
      font-size: 16px;
  }

  .team h2 {
      font-size: 24px;
  }

  .member {
      font-size: 16px;
      padding: 12px;
  }
}


/*notice*/
.light-button button.bt {
  position: relative;
  height: 250px;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  outline: none;
  
  background: none;
  margin-top: 20px;
  border: none;
  cursor: pointer;
}

.clickbtn{
  color:#00a8ff;
  font-size:1.1rem;
  margin-top:10px;
}
.notice{
  font-size:1rem;
}

.light-button button.bt .button-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100%;
  background-color: #0a0a0a;
  border-radius: 5px;
  color: #0f0f0f;
  font-weight: 700;
  transition: 300ms;
  outline: #0f0f0f 2px solid;
  outline-offset: 20;
}

.light-button button.bt .button-holder svg {
  height: 50px;
  fill: #0f0f0f;
  transition: 300ms;
}

.light-button button.bt .light-holder {
  position: absolute;
  height: 200px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.light-button button.bt .light-holder .dot {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: #0a0a0a;
  border-radius: 10px;
  z-index: 2;
}

.light-button button.bt .light-holder .light {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
}

.light-button button.bt:hover .button-holder svg {
  fill: rgba(88, 101, 242, 1);
}

.light-button button.bt:hover .button-holder {
  color: rgb(255, 0, 0);
  outline: rgba(88, 101, 242, 1) 2px solid;
  outline-offset: 2px;
}

.light-button button.bt:hover .light-holder .light {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgb(255, 0, 0) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}



.design{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:150px;
}

/*pacman*/
/* From Uiverse.io by BlackisPlay */ 
#ghost {
  position: relative;
  margin-top: 10px;
  scale: 0.8;
}

#red {
  animation: upNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
  0%,
  49% {
    transform: translateY(0px);
  }
  50%,
  100% {
    transform: translateY(-10px);
  }
}

#top0,
#top1,
#top2,
#top3,
#top4,
#st0,
#st1,
#st2,
#st3,
#st4,
#st5 {
  background-color:black;
}

#top0 {
  grid-area: top0;
}

#top1 {
  grid-area: top1;
}

#top2 {
  grid-area: top2;
}

#top3 {
  grid-area: top3;
}

#top4 {
  grid-area: top4;
}

#st0 {
  grid-area: st0;
}

#st1 {
  grid-area: st1;
}

#st2 {
  grid-area: st2;
}

#st3 {
  grid-area: st3;
}

#st4 {
  grid-area: st4;
}

#st5 {
  grid-area: st5;
}

#an1 {
  grid-area: an1;
  animation: flicker0 infinite 0.5s;
}

#an18 {
  grid-area: an18;
  animation: flicker0 infinite 0.5s;
}

#an2 {
  grid-area: an2;
  animation: flicker1 infinite 0.5s;
}

#an17 {
  grid-area: an17;
  animation: flicker1 infinite 0.5s;
}

#an3 {
  grid-area: an3;
  animation: flicker1 infinite 0.5s;
}

#an16 {
  grid-area: an16;
  animation: flicker1 infinite 0.5s;
}

#an4 {
  grid-area: an4;
  animation: flicker1 infinite 0.5s;
}

#an15 {
  grid-area: an15;
  animation: flicker1 infinite 0.5s;
}

#an6 {
  grid-area: an6;
  animation: flicker0 infinite 0.5s;
}

#an12 {
  grid-area: an12;
  animation: flicker0 infinite 0.5s;
}

#an7 {
  grid-area: an7;
  animation: flicker0 infinite 0.5s;
}

#an13 {
  grid-area: an13;
  animation: flicker0 infinite 0.5s;
}

#an9 {
  grid-area: an9;
  animation: flicker1 infinite 0.5s;
}

#an10 {
  grid-area: an10;
  animation: flicker1 infinite 0.5s;
}

#an8 {
  grid-area: an8;
  animation: flicker0 infinite 0.5s;
}

#an11 {
  grid-area: an11;
  animation: flicker0 infinite 0.5s;
}

@keyframes flicker0 {
  0%,
  49% {
    background-color: black;
  }
  50%,
  100% {
    background-color: transparent;
  }
}

@keyframes flicker1 {
  0%,
  49% {
    background-color: transparent;
  }
  50%,
  100% {
    background-color: red;
  }
}

#eye {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}

#eye::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#eye1 {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  right: 30px;
}

#eye1::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye1::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#pupil {
  width: 20px;
  height: 20px;
  background-color: #00a8ff;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

#pupil1 {
  width: 20px;
  height: 20px;
  background-color: #00a8ff;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
  0%,
  49% {
    transform: translateX(0px);
  }
  50%,
  99% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

#shadow {
  background-color: black;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
  0%,
  49% {
    opacity: 0.5;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}




.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10em;
  perspective: 800px;
}

.loader-cube {
  position: relative;
  width: 5em;
  height: 5em;
  transform-style: preserve-3d;
  animation: rotateCube 2s infinite linear;
}

.loader-side {
  position: absolute;
  width: 5em;
  height: 5em;
  background: #333; /* Custom property for theming */
  border: 0.1em solid #fff; /* Relative sizing for border */
}

.front {
  transform: translateZ(2.5em);
}
.back {
  transform: rotateY(180deg) translateZ(2.5em);
}
.right {
  transform: rotateY(90deg) translateZ(2.5em);
}
.left {
  transform: rotateY(-90deg) translateZ(2.5em);
}
.top {
  transform: rotateX(90deg) translateZ(2.5em);
}
.bottom {
  transform: rotateX(-90deg) translateZ(2.5em);
}

/* Keyframes for continuous rotation */
@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Interactive states using pseudo-classes */
.loader-side:hover {
  background: #555; /* Darker shade on hover */
}

.loader-side:focus {
  border: 0.1em solid #999; /* Different border color on focus */
}

.loader-side:active {
  opacity: 0.8; /* Slight transparency on active */
}




.main > .inp {
  display: none;
}
.main {
  font-weight: 800;
  color: white;
  background-color: black;
  padding: 3px 15px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 9rem;
  position: relative;
  cursor: pointer;
  justify-content: space-between;
}

.arrow {
  height: 34%;
  aspect-ratio: 1;
  margin-block: auto;
  position: relative;
  display: flex;
  justify-content: center;
  transition: all 0.3s;
}

.arrow::after,
.arrow::before {
  content: "";
  position: absolute;
  background-color: white;
  height: 100%;
  width: 2.5px;
  border-radius: 500px;
  transform-origin: bottom;
}

.arrow::after {
  transform: rotate(35deg) translateX(-0.5px);
}
.arrow::before {
  transform: rotate(-35deg) translateX(0.5px);
}

.main > .inp:checked + .arrow {
  transform: rotateX(180deg);
}

.menu-container {
  background-color: white;
  color:#00a8ff;
  border-radius: 10px;
  position: absolute;
  width: 100%;
  left: 0;
  top: 130%;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0% round 10px);
  transition: all 0.4s;
}

.a{
  padding:10px;
  margin-bottom: 15px;
}

.menu-list {
  --delay: 0.4s;
  --trdelay: 0.15s;
  padding: 8px 10px;
  border-radius: inherit;
  transition: background-color 0.2s 0s;
  position: relative;
  transform: translateY(30px);
  opacity: 0;
}

.menu-list::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
  width: 95%;
}

.menu-list:hover {
  background-color: rgb(223, 223, 223);
}

.inp:checked ~ .menu-container {
  clip-path: inset(10% 50% 90% 50% round 10px);
}

.inp:not(:checked) ~ .menu-container .menu-list {
  transform: translateY(0);
  opacity: 1;
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(1) {
  transition:
    transform 0.4s var(--delay),
    opacity 0.4s var(--delay);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(2) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 1)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 1));
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(3) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 2)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 2));
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(4) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 3)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 3));
}

.bar-inp {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

.bar {
  display: flex;
  height: 50%;
  width: 20px;
  flex-direction: column;
  gap: 3px;
}

.bar-list {
  --transform: -25%;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 50px;
  background-color: white;
  transition: all 0.4s;
  position: relative;
}

.inp:not(:checked) ~ .bar > .top {
  transform-origin: top right;
  transform: translateY(var(--transform)) rotate(-45deg);
}

.inp:not(:checked) ~ .bar > .middle {
  transform: translateX(-50%);
  opacity: 0;
}

.inp:not(:checked) ~ .bar > .bottom {
  transform-origin: bottom right;
  transform: translateY(calc(var(--transform) * -1)) rotate(45deg);
}


.menu-list {
  color: rgb(0, 0, 0);
  text-decoration: none;
  padding: 10px;
  display: block;
  transition: background 0.3s ease-in-out;
}

.menu-list:hover {
  background: #444;
}


.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.member {
background: rgba(255, 255, 255, 0.15);
padding: 15px;
border-radius: 20px;
font-size: 18px;
font-weight: 500;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.1);
color: #ffffff;
cursor: pointer; /* Makes it clear it's clickable */
position: relative;
}

.member:hover {
transform: translateY(-5px);
box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.3);
}

/* Hidden details */
.details {
display: none;
margin-top: 10px;
font-size: 14px;
color: #000000;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

/* Active (when clicked) */
.member.active .details {
display: block;
opacity: 1;
}