.hero-banner {
   height: 100vh;
   max-height: 900px;
   position: relative;
}

.hero-banner .swiper-container {
   background: white;
   height: 100%;
}


/* ==============================================
         css for the background- background
============================================== */
.bg-blur-container {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   overflow: hidden;
   /* background: green; */
}

.bc {
   position: absolute;
   width: 490px;
   height: 490px;
   border-radius: 50%;
   filter: blur(250px);
}

.c-1 {
   background: var(--primary-color);
   top: 50px;
   right: 0;
}

.c-2 {
   background: var(--secondary-color);
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 0);
}

.c-3 {
   background: var(--tertiary-color);
   top: 50%;
   left: 0px;
   transform: translate(0, -50%);
}

.swiper-container {
   height: 100%;
}

.hero-banner .swiper-slide {
   opacity: 0 !important;
   transition: opacity 0.1s ease-in-out;
}

.hero-banner .swiper-slide.active {
   opacity: 1 !important;
}

.navigation-wrapper {
   position: absolute;
   bottom: 10%;
   left: 50%;
   transform: translate(-50%, 0%);
   display: flex;
   width: 100px;
   justify-content: space-between;
   z-index: 13;
}

.swiper-pagination-bullet-active {
   background: var(--primary-color);
}

.navigation-wrapper .swiper-button {
   border-radius: 50%;
   border: 2px solid var(--primary-color);
   padding: 6px 8px;
   cursor: pointer;
}

.hero-banner .container {
   position: relative;
}

.hero-banner .image-wrapper {
   border-radius: 46%;
   width: 90%;
   height: 480px;
   overflow: hidden;
}

.single-banner {
   height: auto;
   position: relative;
   z-index: 12;
   padding-left: 50px;
}

.single-banner .banner-title {
   margin-left: -100px;
}

.bottom-image {
   position: absolute;
   right: -50px;
   bottom: 0px;
   width: 220px;
}

.bottom-image img {
   width: 100%;
   border-top-right-radius: 40%;
   border-top-left-radius: 40%;
}

@media only screen and (max-width:762px) {
   .hero-banner {
      padding-top: 68px;
      min-height: 920px;
   }

   .hero-banner .swiper-slide .container {
      align-items: flex-start !important;
   }

   .hero-banner .image-wrapper {
      width: min(245px, 100%);
      margin: auto;
      height: 300px;
   }

   .hero-banner .single-banner {
      padding-left: 0px;
   }

   .hero-banner .image-wrapper::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(at center, #fff5, #0003)
   }

   .hero-banner .banner-title {
      margin-left: 0px;
   }

   .bc {
      position: absolute;
      width: 450px;
      height: 500px;
      border-radius: 50%;
      filter: blur(300px);
   }

   .c-1 {
      background: var(--primary-color);
      top: 50px;
      right: -20%;
   }

   .c-2 {
      display: none;
   }

   .c-3 {
      background: var(--tertiary-color);
      top: 80%;
      left: 0px;
      transform: translate(0, -50%);
   }

   .navigation-wrapper {
      position: absolute;
      bottom: 2%;
      left: 50%;
      transform: translate(-50%, 0%);
      display: flex;
      width: 200px;
      justify-content: space-between;
      z-index: 13;
   }

   .video-button-wrapper {
      margin: auto;
      justify-content: center;
   }

}

/* ==============================================
         css for the About section
============================================== */
.about-section {
   background-image: url("/images/about-background.svg");
}


.about-image {
   height: 250px;

   border-radius: 45%;
   overflow: hidden;
}

/* ==============================================
         css for the service section
============================================== */
.service-card {
   border: 1px solid var(--primary-color);
   padding: 12px;
   border-radius: 40px;
   height: 100%;
   box-shadow: 0px 0px 4px rgba(216, 100, 131, 0.3);
}

.service-card .image-wrapper {
   height: 200px;
   border-radius: 30px;
   overflow: hidden;
}

.service-card button {
   display: block;
   margin: auto;
}

/* ==============================================
         css for the Facility section section
============================================== */
.facility-section img {
   width: 85%;
}

.facility-section.sec-padding {
   padding: 80px 0px 120px !important;
   background-color: yellow;
}

@media only screen and (max-width:762px) {
   .about-image {
      border-radius: 20px;
   }
}