/* Mukta  */
@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap");
/* Frank+Ruhl+Libre */
@import url("https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&display=swap");
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Mukta", sans-serif;
  background: linear-gradient(180deg, #d7ebf7 0%, #d7fbf9 100%), white;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  scroll-behavior: smooth;
}
.frank {
  font-family: "Frank Ruhl Libre", serif;
}
.navs {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1),
    0px 8px 8px 0px rgba(0, 0, 0, 0.09), 0px 19px 11px 0px rgba(0, 0, 0, 0.05),
    0px 34px 13px 0px rgba(0, 0, 0, 0.01), 0px 53px 15px 0px rgba(0, 0, 0, 0);

  backdrop-filter: blur(5px);
}
.hi1 {
  box-shadow: 0px 9.871px 21.538px 0px rgba(21, 85, 116, 0.29),
    0px 38.588px 38.588px 0px rgba(21, 85, 116, 0.26),
    0px 87.945px 52.946px 0px rgba(21, 85, 116, 0.15),
    0px 156.147px 62.818px 0px rgba(21, 85, 116, 0.04),
    0px 244.092px 68.202px 0px rgba(21, 85, 116, 0.01);
}
.hi2 {
  box-shadow: 0px 8.642px 18.856px 0px rgba(21, 85, 116, 0.29),
    0px 33.783px 33.783px 0px rgba(21, 85, 116, 0.26),
    0px 76.994px 46.353px 0px rgba(21, 85, 116, 0.15),
    0px 136.704px 54.996px 0px rgba(21, 85, 116, 0.04),
    0px 213.697px 59.71px 0px rgba(21, 85, 116, 0.01);
  /* border: 0.79px solid #f4f4f5; */
}
.grade {
  box-shadow: 2px 8px 19px 0px rgba(13, 38, 115, 0.1),
    8px 33px 34px 0px rgba(13, 38, 115, 0.09),
    17px 74px 46px 0px rgba(13, 38, 115, 0.05),
    31px 132px 54px 0px rgba(13, 38, 115, 0.01),
    48px 206px 59px 0px rgba(13, 38, 115, 0);
}
/*  */
.radio-group {
  display: flex;
  gap: 30px;
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  font-weight: normal;
}

.radio-label input {
  display: none;
}

.custom-radio {
  width: 24px;
  height: 24px;
  border: 2px solid #333;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  transition: all 0.2s ease;
}

.radio-label input:checked + .custom-radio {
  border-color: #4a3aff;
}

.radio-label input:checked + .custom-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #4a3aff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-label input:checked + .custom-radio + span {
  font-weight: bold;
}
.fs1 {
  filter: drop-shadow(2px 8px 19px rgba(13, 38, 115, 0.1))
    drop-shadow(8px 33px 34px rgba(13, 38, 115, 0.09))
    drop-shadow(17px 74px 46px rgba(13, 38, 115, 0.05))
    drop-shadow(31px 132px 54px rgba(13, 38, 115, 0.01))
    drop-shadow(48px 206px 59px rgba(13, 38, 115, 0));
}
.join {
  box-shadow: 2px 8px 19px 0px rgba(13, 38, 115, 0.1),
    8px 33px 34px 0px rgba(13, 38, 115, 0.09),
    17px 74px 46px 0px rgba(13, 38, 115, 0.05),
    31px 132px 54px 0px rgba(13, 38, 115, 0.01),
    48px 206px 59px 0px rgba(13, 38, 115, 0);
}
.clip {
  clip-path: polygon(0 12%, 100% 0, 100% 87%, 0% 100%);
}
@media (max-width: 768px) {
  .clip {
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0% 100%);
  }
  .w10 {
    width: 100%;
  }
}
.left {
  left: 0px !important;
}
nav {
  position: relative;
}
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Loading dots animation */
.loading-dots::after {
  content: "";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60% {
    content: "...";
  }
  80%, 100% {
    content: "";
  }
}