a {
  text-decoration: none;
}

li {
  list-style: none;
}
h1 {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.6em;
  color: #1a1a1a;
  text-transform: uppercase;
}
/* NAVBAR STYLING STARTS */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  width: 100%;
  background-color: white;
  color: black;
  box-shadow: 4px -3px 21px 0px rgba(0, 0, 0, 0.25);
  /* position: relative; */
  /* height: 100px; */
  z-index: 10;
}
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}
.navigation > a {
  width: 150px;
  height: 64px;
}
.navigation > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.navigation-links {
  display: flex;
  align-items: center;
}
.btn-donate {
  background: #f9c943;
  padding: 12px 18px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px;
  cursor: pointer;
}
.btn-donate:hover {
  background: #edb108;
}
.ham-toggle {
  position: relative;
  width: 30px;
  height: 30px;
}
.ham-toggle > input[type="checkbox"] {
  position: absolute;
  width: 30px;
  height: 30px;
}
.ham-toggle > label {
  position: absolute;
  width: 100%;
  height: 100%;
}
.fixed-menu {
  position: fixed;
  top: 0;
  transition: position 1s;
  /* height: 100px; */
}
.nav-links li a {
  color: #2c2c2c;
}

/* LOGO */
.logo {
  font-size: 32px;
  /* width: 33%; */
  padding: 10px 20px;
}
.logo img {
  width: 38%;
  object-fit: contain;
  height: 100%;
}
/* NAVBAR MENU */
.menu {
  display: flex;
  font-size: 16px;
  gap: 5px;
  width: 100%;
}

.menu li:hover {
  background-color: #eaecec;
  border-radius: 5px;
  transition: 0.3s ease;
}
.menu li a:hover {
  color: gray;
}
.nav-links {
  /* width: 70%; */
  display: flex;
  justify-content: end;
  align-items: center;
}
.menu li {
  padding: 8px;
}
.donation-btn-form {
  display: none;
}
.nav-link-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* DROPDOWN MENU */
.free_app {
  background-color: #33bfff;
  color: white;
}
.free_app_head {
  color: white !important;
}
.free_app:hover .free_app_head {
  color: #000 !important;
}
.services {
  position: relative;
}
.services > span {
  font-size: 16px;
}

.dropdown {
  background-color: #fff;
  padding: 1em 0;
  position: absolute; /*WITH RESPECT TO PARENT*/
  display: none;
  border-radius: 0px 0px 8px 8px;
  top: 100%;
  color: gray;
  left: 0;
  z-index: 10;
}

.dropdown li + li {
  margin-top: 10px;
}

.dropdown li {
  padding: 0.5em 1em;
  width: 12em;
  text-align: start;
  color: gray;
  font-size: 2.4vh;
}

.dropdown li:hover {
  background-color: #eaecec;
  color: black;
}
.services:hover {
  cursor: pointer;
}
/* .services:hover .dropdown {
  display: block;
} */
.active_btn {
  display: block;
}

/* RESPONSIVE NAVBAR MENU STARTS */

/* CHECKBOX HACK */

input[type="checkbox"] {
  display: none;
}

/* HAMBURGER MENU */
.hamburger {
  display: none;
  font-size: 24px;
  user-select: none;
}

/* NAVBAR STYLING STARTS */

/* css start for header slider  */

.swiper-container {
  width: 100%;
  height: 60vh;
  /* // display:inline-block;
    // vertical-align:top; */
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
  position: relative;
}
.main-slider {
  width: 100%;
}
.nav-slider {
  width: 84%;
  height: 20vh;
  position: relative;
  left: 8%;
  top: -50px;
}
.nav-swiper-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-slider .swiper-slide {
  cursor: pointer;
  /* opacity:.4; */
  transition: opacity 0.3s ease;
  width: 21%;
  height: 97%;
  background-color: white;
  /* border: 2px solid white; */
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  box-shadow: 13px -3px 21px 0px #00000040;
  padding: 0% 0.5%;
}
.nav-slider .swiper-slide .swiper-slide-active {
  opacity: 1;
}
.swiper-container .nav-slider .swiper-slide .content {
  width: 100%;
}
.nav-slider .swiper-slide .content .title {
  font-size: 1.4em;
}
.nav-slider .swiper-slide .content .title > span {
  font-weight: bold;
}

.content_icon {
  height: 100%;
}
.content_icon img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
/* .nav-slider .nav-swiper-wrapper:hover .swiper-button-next, .swiper-button-prev{
      transform:translateX(0);
      opacity:1;
      visibility:visible;
  } */

.swiper-container .loading {
  opacity: 0;
  visibility: hidden;
}
.main-swiper-wrapper {
  height: 100%;
  width: 100%;
}
.main-swiper-wrapper .swiper-slide {
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}
.swiper-slide .slide-bgimg {
  position: absolute;
  /* top:0; */
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.main-swiper-wrapper .swiper-slide .entity-img {
  /* display:none; */
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.nav-swiper-wrapper .swiper-slide .content {
  /* position:absolute;
    top:40%;
    left:0;
    padding-left:5%; */
  width: 100%;
  color: #2c2c2c;
  padding-left: 5%;
}
.main-swiper-wrapper .swiper-slide .content {
  position: absolute;
  top: 30%;
  left: 0;
  padding-left: 2%;
  width: 45%;
  color: #33bfff;
  font-size: 1.5vh;
}
.main-swiper-wrapper .swiper-slide .content span {
  color: #fff;
  font-weight: bolder;
}
/* .main-swiper-wrapper .swiper-slide .content a {
  border: 3px solid #33bfff;
  padding: 1% 4%;
  color: white;
  font-size: 0.6em;
  font-weight: 600;
} */
.main-swiper-wrapper .swiper-slide .content .header_product_link {
  border: 3px solid #33bfff;
  padding: 1% 4%;
  color: white;
  font-size: 1.6em;
  font-weight: 600;
}
.header_app_link {
  /* padding: 1% 4%; */
  color: #33bfff;
  font-size: 0.5em;
  font-weight: 600;
}
.swiper-slide .content .title {
  font-size: 2.6em;
  /* font-weight:bold; */
  margin-bottom: 7%;
}
.swiper-slide .content .caption {
  display: block;
  font-size: 0.8em;
  line-height: 1.4;
  /* transform: translateX(50px); */
  /* opacity: 0; */
  transition: opacity 0.3s ease, transform 0.7s ease;
}
.swiper-slide .content .caption .show {
  transform: translateX(0);
  opacity: 1;
}

.main-swiper-wrapper .swiper-slide .dynamic_header_block {
  position: absolute;
  top: 10%;
  right: 0;
  padding-right: 0%;
  width: 45%;
  color: #33bfff;
  font-size: 1.5vh;
  height: 41vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1em;
}
.dynamic_header_block_content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35%;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.28);
  border-radius: 7px;
}
.dynamic_header_block_content_icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dynamic_header_block_content_icon > img {
  width: 25%;
  height: auto;
}
.dynamic_header_block_content_text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.dynamic_header_block_content_text > p {
  font-size: 1.5em;
  width: 100%;
  text-align: center;
}
/* CSS FOR MOBILE HEADER STRAT 8888888888888888888888888888 */
.mobile_header_container {
  display: none;
}
.main-swiper-wrapper-mobile .swiper-slide-mobile {
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}
.swiper-slide-mobile .slide-bgimg {
  /* position: absolute; */
  /* top:0; */
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.main-swiper-wrapper-mobile .swiper-slide-mobile .entity-img {
  /* display:none; */
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.main-swiper-wrapper-mobile .swiper-slide-mobile .content {
  position: relative;
  top: -65%;
  left: 0;
  padding-left: 2%;
  width: 90%;
  color: #33bfff;
  font-size: 1.5vh;
}
.main-swiper-wrapper-mobile .swiper-slide-mobile .content span {
  color: #fff;
  font-weight: bolder;
}
.main-swiper-wrapper-mobile .swiper-slide-mobile .content .header_product_link {
  border: 3px solid #33bfff;
  padding: 1% 4%;
  color: white;
  font-size: 1.6em;
  font-weight: 600;
}
.swiper-slide-mobile .content .title {
  font-size: 2.6em;
  /* font-weight:bold; */
  margin-bottom: 7%;
}
.swiper-slide-mobile .content .caption {
  display: block;
  font-size: 0.8em;
  line-height: 1.4;
  /* transform: translateX(50px); */
  /* opacity: 0; */
  transition: opacity 0.3s ease, transform 0.7s ease;
}
.swiper-slide-mobile .content .caption .show {
  transform: translateX(0);
  opacity: 1;
}
/* CSS FOR MOBILE HEADER end 8888888888888888888888888888 */
[class^="swiper-button-"] {
  width: 4%;
  opacity: 1;
  /* visibility:hidden; */
  transition: all 0.3s ease;
  position: absolute;
  top: 100%;
  left: 4%;
  height: 15%;
  background-color: #33bfff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
[class^="swiper-button-"] i {
  color: white;
  font-size: 2.5em;
}
.swiper-button-prev {
  /* transform:translateX(50px); */
}
.swiper-button-next {
  /* transform:translateX(-50px); */
  transform: translateX(351%);
  left: 78%;
}
.content_icon i {
  font-size: 10vh;
}
.active {
  background-color: #33bfff !important;
}
.slick-prev,
.slick-next {
  display: none !important;
}
.slick-list {
  height: 100%;
  box-shadow: 4px -3px 21px 0px #00000040;
}
.slick-track {
  height: 100%;
}

.nav-swiper-wrapper > .slick-dots {
  bottom: 0;
}
/* css for inner page banner start */
.banner {
  height: 35vh;
  position: relative;
  /* background: red; */
  /* background: url("http://dev.epaath.olenepal.org/activity/grade2/math/bar_graph_new/images/background_ocean.png");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat; */
}
.banner_container,
.banner_content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: white;
  font-size: 1.2em;
}

.banner_container > img {
  height: 100%;
  position: absolute;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}
.banner_content > h1 {
  position: relative;
  margin-bottom: 0%;
  color: white;
  text-align: center;
}
.blog_banner_content > h2 {
  position: relative;
  margin-bottom: 0%;
  color: #33bfff;
  font-size: 2em;
}

.banner_content > h1::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5%;
  height: 5px;
  width: 70%;
  background: #00a651;
  border-radius: 20px;
  transform: translate(-50%);
}
.blog_banner_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: white;
  font-size: 1.2em;
  background: linear-gradient(
    90deg,
    rgba(31, 30, 30, 0.8715861344537815) 1%,
    rgba(82, 82, 82, 0.10688025210084029) 73%
  );
}
.blog_banner_content {
  justify-content: flex-start;
  /* margin-left: 7%; */
  align-items: end;
  height: 70%;
}
.blog_banner_content h2 {
  width: 50%;
  font-size: 1.2em;
  margin-left: 3%;
}
.banner_tag_field {
  color: white;
  display: flex;
  width: 100%;
  /* margin-left: 7%; */
  z-index: 1;
  font-size: 0.8em;
}
.banner_tag_field > p {
  margin-left: 3%;
}
/* css for inner page banner emd */

/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
  .nav-links {
    width: 0;
  }
  .logo {
    width: 40%;
  }
  .logo img {
    width: 100%;
  }
  .menu {
    display: none;
    position: absolute;
    background-color: white;
    top: 8%;
    right: 0;
    left: 0;
    text-align: center;
    padding: 16px 0;
    z-index: 1;
  }

  /* .menu li:hover {
    display: inline-block;
    background-color: #eaecec;
    transition: 0.3s ease;
  } */

  .menu li + li {
    margin-top: 12px;
  }

  .navigation-links:has(#checkbox_toggle:checked) .menu {
    display: block;
  }

  .hamburger {
    display: block;
  }

  .dropdown {
    left: 10%;
    top: 0%;
    width: 90%;
    margin-top: 1%;
    position: relative;
    /* top: 30px; */
    /* transform: translateX(35%); */
  }
  .nav-links li a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dropdown li:hover {
    background-color: #eaecec;
  }
  .nav-slider .swiper-slide .content .title {
    font-size: 1em;
  }
  .nav-slider .swiper-slide .content > span {
    font-size: 0.8em;
  }
  [class^="swiper-button-"] i {
    font-size: 1em;
  }

  /* css for header responsiveness */
  .main-swiper-wrapper .swiper-slide .content {
    width: 95%;
  }

  .nav-swiper-wrapper > .slick-list {
    display: none;
  }
  .blog_banner_content h2 {
    width: 100%;
    font-size: 1em;
  }
  .mobile_header_container {
    display: block;
    width: 100%;
    height: 60vh;
    float: left;
    transition: opacity 0.6s ease, transform 0.3s ease;
    position: relative;
  }
  .main-swiper-wrapper-mobile {
    height: 100%;
    width: 100%;
  }
  .desktop_header_container,
  .nav-swiper-wrapper .slick-dots {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .donation-btn-form {
    display: block;
  }
  .navigation > a {
    width: 200px;
  }
  .donation-btn-form-sm{
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .menu {
    font-size: 20px;
  }
  .menu li {
    padding: 10px 15px;
  }
}