/**
* Template Name: Medicio - v4.10.0
* Template URL: https://bootstrapmade.com/medicio-free-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

.home-btn {
  position: fixed;
  top: 2rem;
  left: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  background: rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  text-decoration: none;

  transition: all 0.25s ease;
  z-index: 9999;
}

.home-btn:hover {
  background: rgba(0, 0, 0, 0.95);
  transform: scale(1.08);
}

.home-icon {
  width: 25px;
  height: 25px;
  fill: white;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .home-btn {
    top: 1rem;
    left: 1rem;
    width: 38px;
    height: 38px;
  }
  .home-icon {
    width: 20px;
    height: 20px;
  }
}


body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
    margin: 0%;
    width : 100vw;
    overflow-x: hidden;
    
  }
  
  a {
    color: #3f68c0;
    text-decoration: none;
  }
  
  a:hover {
    color: #809eda;
    text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6{
    font-family: "Roboto", sans-serif;
    /*margin-left: 20%;
    margin-right: 20%;*/
  }

  .sticky{
    font-family: "Lucida Console", "Courier New", monospace; 
    color: #000000;
    padding-left: 5%;
    padding-right: 5%;
    font-size:14px;
  }
  .sticky:hover {
    transform: scale(1.05);
}

  .semibold {
    font-weight: 600; /* Adjust as needed */
  }

  .semibold-yellow{
    font-weight: 600;
    color:#BF9100;
  }

  .text-with-margins {
    margin-left: 20%;
    margin-right: 20%;
  }
  .text-with-margins h4{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 2.5vh;
    padding-top: 6px;
    padding-bottom: 2px;
    font-weight: medium;
    color: #8a8a8a;
  }

  .vertical-center {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  @media (max-width: 768px) {
    .text-with-margins {
      margin-left: 10%; /* Adjust for smaller screens if needed */
      margin-right: 10%; /* Adjust for smaller screens if needed */
    }
  }
  
  .outer-margin {
    margin-left: 20%;
    margin-right: 20%; /* Add 10% top/bottom and 20% left/right margin around the container */
  }

  @media (max-width: 768px) {
    .outer-margin {
      margin-left: 8%;
    margin-right: 8%; /* Adjust margin for smaller screens if needed */
    }
  }
  /*--------------------------------------------------------------
  # Preloader
  --------------------------------------------------------------*/
  /* Loader matches redirect.html: navy ground, #7dbfe6 ring.

     FAILSAFE — this is the important part. #preloader carries its own CSS
     animation that hides it at 4s with no JavaScript involved. If main.js
     fails, is blocked, or 404s, the page still becomes visible. The old
     behaviour (JS is the only thing that ever hides it) is gone.

     JS hides it earlier via .is-hidden; that uses !important so it wins
     against the running failsafe animation. */

  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #0d1b2e;
    animation: preloader-failsafe 4s linear forwards;
  }

  /* Spinning ring — mirrors the #fish-loader ring in redirect.html */
  #preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: rgba(125, 191, 230, 0.8);
    border-right-color: rgba(125, 191, 230, 0.3);
    -webkit-animation: animate-preloader 1.4s linear infinite;
    animation: animate-preloader 1.4s linear infinite;
  }

  /* JS-driven hide (400ms min display, 2.5s hard cap — see main.js) */
  #preloader.is-hidden {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  /* Second visit in the same tab — never rendered at all.
     Set by the inline <head> script from sessionStorage, so there is no flash. */
  html.preloader-seen #preloader {
    display: none !important;
  }

  @keyframes preloader-failsafe {
    0%, 96% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; }
  }

  @-webkit-keyframes animate-preloader {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes animate-preloader {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Reduced motion: no spinner, brief static state, then hide sooner. */
  @media (prefers-reduced-motion: reduce) {
    #preloader {
      animation: preloader-failsafe 1.2s linear forwards;
    }
    #preloader:before {
      -webkit-animation: none;
      animation: none;
      border-top-color: rgba(125, 191, 230, 0.8);
      border-right-color: rgba(125, 191, 230, 0.8);
      border-bottom-color: rgba(125, 191, 230, 0.8);
      border-left-color: rgba(125, 191, 230, 0.8);
    }
    #preloader.is-hidden { transition: none; }
  }

  /*--------------------------------------------------------------
  # AOS — fail-visible gate
  --------------------------------------------------------------*/
  /* AOS's own stylesheet sets [data-aos] { opacity: 0 } unconditionally, so if
     its JS never initialises the content stays invisible forever. There are 58
     data-aos attributes across these five pages.

     The inline <head> script adds .js to <html>. If that script did not run,
     this rule wins and every animated element renders fully visible. Content
     visibility therefore never depends on JavaScript. */
  html:not(.js) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }

  /* Same guarantee for users who ask for reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    [data-aos] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
  }

  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    background: #000000;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  .back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
  }
  .back-to-top:hover {
    background: #89baf3;
    color: #fff;
  }
  .back-to-top.active {
    visibility: visible;
    opacity: 1;
  }
  
  /*--------------------------------------------------------------
  # Disable aos animation delay on mobile devices
  --------------------------------------------------------------*/
  @media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
  }
  
  /*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
  #header {
    transition: all 0.5s;
    z-index: 997;
    transition: all 0.5s;
    height: 60px;
    background: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  }
  #header .logo h1 {
    font-size: 26px;
    margin: 0;
    padding: 6px 0;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
  }
  #header .logo h1 a, #header .logo h1 a:hover {
    color: #3b3a3a;
    text-decoration: none;
  }
  #header .logo img {
    padding: 10px 0;
    margin: 5px 0;
    max-height: 80px;
  }
  
  .scrolled-offset {
    margin-top: 60px;
  }
  
  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /**
  * Desktop Navigation 
  */
  .navbar {
    padding: 0;
  }
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }
  .navbar li {
    position: relative;
  }
  .navbar a, .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    font-size: 18px;
    color: #2c4964;
    white-space: nowrap;
    transition: 0.3s;
  }
  .navbar a i, .navbar a:focus i {
    font-size: 20px;
    line-height: 0;
    margin-left: 5px;
  }
  .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
    color: #7dbfe6;
  }
  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: 100%;
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
  }
  .navbar .dropdown ul li {
    min-width: 200px;
  }
  .navbar .dropdown ul a {
    padding: 10px 20px;
    text-transform: none;
  }
  .navbar .dropdown ul a i {
    font-size: 12px;
  }
  .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
    color: #7dbfe6;
  }
  .navbar .dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
  }
  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }
  .navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }
  @media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
      left: -90%;
    }
    .navbar .dropdown .dropdown:hover > ul {
      left: -100%;
    }
  }
  
  /**
  * Mobile Navigation 
  */
  .mobile-nav-toggle {
    color: #2c4964;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
  }
  .mobile-nav-toggle.bi-x {
    color: #fff;
  }
  
  @media (max-width: 991px) {
    .mobile-nav-toggle {
      display: block;
    }
  
    .navbar ul {
      display: none;
    }
  }
  .navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(13, 21, 29, 0.6);
    transition: 0.3s;
    z-index: 998;
    text-align: center;
  }
  .navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 72%;
    left: 15px;
    padding: 10px 0;
    border-radius: 10px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
    text-align: center;
  }
  .navbar-mobile a, .navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #2c4964;
  }
  .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
    color: #7dbfe6;
  }
  .navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
    margin: 15px;
  }
  .navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  }
  .navbar-mobile .dropdown ul li {
    min-width: 200px;
  }
  .navbar-mobile .dropdown ul a {
    padding: 10px 20px;
  }
  .navbar-mobile .dropdown ul a i {
    font-size: 12px;
  }
  .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
    color: #7dbfe6;
  }
  .navbar-mobile .dropdown > .dropdown-active {
    display: block;
  }



  /*--------------------------------------------------------------
  # Hero Image
  --------------------------------------------------------------*/
  .img-fluid {
    border-radius: 15px; /* Optional: For rounded corners */
    margin-bottom: 15px; /* Optional: To add space between rows */
  }

  .hero-grid {
    width: 80%;
    margin-top: 5%;
  }
  
  .hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw; /* Adjust as needed */
  }


  .hero-image {
    width: 100%; /* Adjust as needed */
    height:auto;
    border-radius: 15px; /* Adjust as needed for curved edges */
    margin: 5% 20%; /* 10% top/bottom, 20% left/right margins */
    display: block;
  }

  .hero-tiny{
    color:#555555;
  }

  /*.hero-tiny:hover {
    transform: scale(1.05); /* Example of zooming by 5% 
    transition: transform 0.3s ease-in-out; /* Optional: Add smooth transition 
  } */

  @media (max-width: 768px) {
    .hero-image {
      width: 80%; /* Adjust for smaller screens if needed */
      margin: 10% 10%; /* Adjust for smaller screens if needed */
    }
  }


  /* sls logo */

  .sun-animation {
    position: absolute;
    /*padding-left: 20%;
    top: 10%; /* Adjust the vertical position of the sun animation */
    /*left: 100%; /* Adjust the horizontal position of the sun animation */
    transform: translate(-10%, -50%);
    animation: x-motion 3s ease-in-out 0s infinite alternate;
    z-index: 2; /* Ensure the sun animation is above the hero image */
  }
  
  .sun-image {
    width: 40%; /* Adjust the width of the sun image */
    height: auto;
    animation: y-motion 4s ease-in-out 0s infinite alternate;
  }
  
  @keyframes x-motion {
    0% {
      left: 20%;
    }
    100% {
      left: calc(80% - 20px); /* Adjust the final position of the sun animation */
    }
  }
  
  @keyframes y-motion {
    0%, 100% {
      transform: translateY(0%);
    }
    50% {
      transform: translateY(-100px); /* Adjust the vertical movement of the sun image */
    }
  }
  



  
  /*--------------------------------------------------------------
  # Sections General
  --------------------------------------------------------------*/

  section {
    padding: 60px 30px;
  }

  .padding{
    padding: 40px 30px;
  }
  
  .section-bg {
    background: linear-gradient(180deg, #e0e4f8 0%, #fff 100%);
    padding:0;
    margin : 0;
  }

  .section-bg1 {
    background: linear-gradient(180deg, #f8ebe0 0%, #fff 100%);
  }


  .section-title {
    padding-bottom: 30px;
  }

  .section-title-over h3{
    font-size: 18px;
    font-weight: 500;
    position: relative;
    color: #3b3b3b;

  }
  .section-title h2 {
    font-size: 45px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: regular;
    margin-bottom: 15px;
    padding-bottom: 25px;
    position: relative;
    color: #7dbfe6;
  }
  /*.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: #475a91;
    bottom: 0;
    left: 0;
  }*/
  .section-title p {
    margin-bottom: 0;
  }

  .frame-bg{
    padding:0;
    margin : 0;
  }


  /* -----------------------------------------------------------
  # spike section
  -------------------------------------------------------------*/
  

  .spike{
    --mask: conic-gradient(from -70deg at bottom, #0000, #000 1deg 139deg, #0000 140deg) 50%/164.85px 100%;
  
    -webkit-mask: var(--mask);
            mask: var(--mask);
  }
  .spike-top {
    --mask: conic-gradient(from 110deg at top,#0000,#000 1deg 139deg,#0000 140deg) 50%/164.85px 100%;
    -webkit-mask: var(--mask);
            mask: var(--mask);
  }


  .circle-container-g {
    display: flex;
    flex-direction: column; /* Stack circles vertically */
    align-items: center; /* Center items horizontally */
  
  }
  
  .circle-g {
    text-align: center;
  margin-bottom: 20px; 
  }
  
  .circle-number-g {
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: #007bff; /* Adjust color as needed */
    color: white;
    font-size: 1.5em;
    border-radius: 50%;
  }
  
  .circle-text-g {
    margin-top: 10px;
  font-size: 0.9em;
  }


  /* -----------------------------------------------------------
  # wave section
  -------------------------------------------------------------*/
  .wave-norm {
    position: relative;
    width: 80%;
    padding: 20px;
    background: #F6F7F1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --mask:
      radial-gradient(2.97vw at 50% 4.2vw, #000 99%, #0000 101%) calc(50% - 4vw) 0/8vw 51% repeat-x,
      radial-gradient(2.97vw at 50% -2.2vw, #0000 99%, #000 101%) 50% 2vw/8vw calc(51% - 2vw) repeat-x,
      radial-gradient(2.97vw at 50% calc(100% - 4.2vw), #000 99%, #0000 101%) calc(50% - 4vw) 100%/8vw 51% repeat-x,
      radial-gradient(2.97vw at 50% calc(100% + 2.2vw), #0000 99%, #000 101%) 50% calc(100% - 2vw)/8vw calc(51% - 2vw) repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
  }

  .wave-whbg {
    position: relative;
    width: 80%;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --mask:
      radial-gradient(2.97vw at 50% 4.2vw, #000 99%, #0000 101%) calc(50% - 4vw) 0/8vw 51% repeat-x,
      radial-gradient(2.97vw at 50% -2.2vw, #0000 99%, #000 101%) 50% 2vw/8vw calc(51% - 2vw) repeat-x,
      radial-gradient(2.97vw at 50% calc(100% - 4.2vw), #000 99%, #0000 101%) calc(50% - 4vw) 100%/8vw 51% repeat-x,
      radial-gradient(2.97vw at 50% calc(100% + 2.2vw), #0000 99%, #000 101%) 50% calc(100% - 2vw)/8vw calc(51% - 2vw) repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
  }

  .wave {
    overflow: hidden;
    position: relative;
    height: 60px;
  }
  .wave:after {
    content: "";
    position: absolute;
    will-change: transform;
    left: 0;
    top: 0;
    bottom: 0;
    right: -300vw;
    /* Ruling G — the fill is the colour of the section BELOW the divider.
       Set --wave-fill on the .wave element per section; the fallback keeps
       existing markup working if it is not set. */
    background: var(--wave-fill, #ADC9FF);
    --mask: radial-gradient(75.15px at 50% 101.5px, #000 99%, #0000 101%)
        calc(50% - 70px) 0/140px 100%,
      radial-gradient(75.15px at 50% -66.5px, #0000 99%, #000 101%) 50% 35px/140px
        100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    animation: wave 30s linear infinite alternate;
    z-index: 0;
  }
  @keyframes wave {
    100% {
      transform: translate3d(-300vw, 0, 0px);
    }
  }

/* -----------------------------------------------------------
  # CONCEPT PANELS - BEACH SAFE
  -------------------------------------------------------------*/


  .panel-sls {
    height: 500px; /* Adjust the height as needed */
    overflow: hidden; /* Ensures images don't overflow */
  }
  .panel-sls img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .image-text-grid .row {
    margin-bottom: 20px;
  }
  /* Added class to center text vertically */
  .d-flex-center {
    display: flex;
    align-items: center;
  }
  
  .image-text-grid img {
    width: 100%;
    height: auto;
    transition: transform 0.3s; /* Transition for smooth scaling effect */
    position: relative; /* Required for pseudo-element positioning */
  }

  .image-text-grid img:hover {
    transform: scale(1.05);
  }

/* -----------------------------------------------------------
  # Flipcards - TSG
  -------------------------------------------------------------*/
  /* Add styles for the new flip cards line */
.flip-cards-text {
  margin-top: 10px; /* Add some space above the new line */
  font-size: 18px; /* Adjust the font size as needed */
  display: flex; /* Use flexbox to align text and arrow */
  align-items: center; /* Center align items vertically */
}

.flip-cards-text .arrow {
  margin-left: 10px; /* Add some space between the text and the arrow */
  font-size: 25px; /* Adjust the arrow size as needed */
  color: #606060; /* Adjust the arrow color as needed */
}


  .flip-card {
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    width: 100%;
    margin: 0 auto;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 250px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
  }

  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: auto;
    backface-visibility: hidden;
  }

  .flip-card-front {
    z-index: 2;
    transform: rotateY(0deg);
  }

  .flip-card-back {
    transform: rotateY(180deg);
  }

  .flipped {
    transform: rotateY(180deg);
  }

  /*Hover animation*/

  .flip-card:hover .flip-card-front {
    transform: scale(1.05); /* Example of zooming by 5% */
  }



  /*click to full screen*/

  .modal-dialog-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80vw; /* Ensures the modal content does not exceed 60% of the viewport width */
  }
  .modal-content {
    background: transparent;
    border: none;
  }
  .modal-body {
    padding: 0;
  }
  .modal-body img {
    width: 100%;
    height: auto;
  }

/* -----------------------------------------------------------
  # Design Principles cirlces
  -------------------------------------------------------------*/

  .circle-container {
    display: flex;
    gap: 20px;
    position: relative;
    
  }
  
  .circle {
    position: relative;
    width: 200px;
    height: auto;
    border-radius: 50%;
  }
  
  .circle img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .circle:hover {
    transform: scale(1.1); /* Example of hover effect */
  }


  .panel {
    height: 400px; /* Adjust the height as needed */
    overflow: hidden; /* Ensures images don't overflow */
  }
  .panel img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }




  /* -----------------------------------------------------------
  # Slideshow
  -------------------------------------------------------------*/

  /* Hover overlay effect — Ruling H.
     Was .container:hover, which meant hovering anywhere in the section
     revealed the caption on the active slide. Now scoped to the slide. */

  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #000000;
    border-radius:5%;
  }
  
  .carousel-item:hover .overlay {
    opacity:0.75;
  }

  .carousel-item:hover .text {
    opacity: 1;
  }
  
  .carousel-item .text {
    color: rgba(255, 255, 255, 1); /* Set text color with full opacity */
    font-size: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0; /* Initially hide the text */
    transition: opacity 0.5s ease; /* Add transition for opacity */
  }

  @media (max-width: 768px) {
    .carousel-item .text {
      font-size: 100%;
    }
  }


/*Figma code */

.figma-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}
.figma-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

  /*--------------------------------------------------------------
  # Breadcrumbs
  --------------------------------------------------------------*/
  .breadcrumbs {
    padding: 20px 0;
    background-color: #ecf8f9;
    min-height: 40px;
    margin-top: 120px;
  }
  
  @media (max-width: 992px) {
    .breadcrumbs {
      margin-top: 70px;
    }
  }
  
  .breadcrumbs h2 {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
  }
  
  @media (max-width: 992px) {
    .breadcrumbs h2 {
      margin: 0 0 10px 0;
    }
  }
  
  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }
  
  .breadcrumbs ol li+li {
    padding-left: 10px;
  }
  
  .breadcrumbs ol li+li::before {
    display: inline-block;
    padding-right: 10px;
    color: #6c757d;
    content: "/";
  }
  
  @media (max-width: 768px) {
    .breadcrumbs .d-flex {
      display: block !important;
    }
  
    .breadcrumbs ol {
      display: block;
    }
  
    .breadcrumbs ol li {
      display: inline-block;
    }
  }
  
  /*--------------------------------------------------------------
  # Featured Services
  --------------------------------------------------------------*/
  .featured-services .icon-box {
    padding: 30px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
  }
  
  .featured-services .icon-box::before {
    content: "";
    position: absolute;
    background: #d9f1f2;
    right: 0;
    left: 0;
    bottom: 0;
    top: 100%;
    transition: all 0.3s;
    z-index: -1;
  }
  
  .featured-services .icon-box:hover::before {
    background: #6893cb;
    top: 0;
    border-radius: 0px;
  }
  
  .featured-services .icon {
    margin-bottom: 15px;
  }
  
  .featured-services .icon i {
    font-size: 48px;
    line-height: 1;
    color: #6893cb;
    transition: all 0.3s ease-in-out;
  }
  
  .featured-services .title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
  }
  
  .featured-services .title a {
    color: #111;
  }
  
  .featured-services .description {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
  }
  
  .featured-services .icon-box:hover .title a,
  .featured-services .icon-box:hover .description {
    color: #fff;
  }
  
  .featured-services .icon-box:hover .icon i {
    color: #fff;
  }
  
  /*--------------------------------------------------------------
  # Cta
  --------------------------------------------------------------*/
  .cta {
    background: #6893cb;
    color: #fff;
    background-size: cover;
    padding: 60px 0;
  }
  
  .cta h3 {
    font-size: 28px;
    font-weight: 700;
  }
  
  .cta .cta-btn {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 35px;
    border-radius: 25px;
    transition: 0.5s;
    margin-top: 10px;
    border: 2px solid #fff;
    color: #fff;
  }
  
  .cta .cta-btn:hover {
    background: #fff;
    color: #6893cb;
  }
  
  /*--------------------------------------------------------------
  # About Us
  --------------------------------------------------------------*/
  .about .content h3 {
    font-weight: 600;
    font-size: 26px;
  }
  
  .about .content ul {
    list-style: none;
    padding: 0;
  }
  
  .about .content ul li {
    padding-bottom: 10px;
  }
  
  .about .content ul i {
    font-size: 20px;
    padding-right: 4px;
    color: #6893cb;
  }
  
  .about .content p:last-child {
    margin-bottom: 0;
  }
  
  .blue-box {
    background-color: rgba(157, 202, 254, 0.2); /* Blue color with 20% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px; /* Optional: Add some bottom margin for spacing */
  }

  .orange-box {
    background-color: rgba(254, 212, 157, 0.5); /* Blue color with 20% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px; /* Optional: Add some bottom margin for spacing */
  }

  .white-box {
    background-color: rgba(255, 255, 255, 0.192); /* Blue color with 20% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px; /* Optional: Add some bottom margin for spacing */
  }
  
  
  
  /*--------------------------------------------------------------
  # Counts
  --------------------------------------------------------------*/
  .counts {
    padding-bottom: 30px;
  }
  
  .counts .count-box {
    box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
  }
  
  .counts .count-box i {
    display: block;
    font-size: 30px;
    color: #6893cb;
    float: left;
  }
  
  .counts .count-box span {
    font-size: 42px;
    line-height: 24px;
    display: block;
    font-weight: 700;
    color: #555555;
    margin-left: 50px;
  }
  
  .counts .count-box p {
    padding: 30px 0 0 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
  }
  
  .counts .count-box a {
    font-weight: 600;
    display: block;
    margin-top: 20px;
    color: #7b7b7b;
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    transition: ease-in-out 0.3s;
  }
  
  .counts .count-box a:hover {
    color: #6893cb;
  }
  
  /*--------------------------------------------------------------
  # Features
  --------------------------------------------------------------*/
  .features .icon-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 10px 60px;
  }
  
  .features .icon-box i {
    font-size: 48px;
    float: left;
    color: #6893cb;
  }
  
  .features .icon-box p {
    font-size: 15px;
    color: #848484;
    margin-left: 60px;
  }
  
  .features .image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
  }
  
  
  /*--------------------------------------------------------------
  # Services
  --------------------------------------------------------------*/
  .services .icon-box {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .services .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 50%;
    transition: 0.5s;
    color: #6893cb;
    overflow: hidden;
    box-shadow: 0px 0 25px rgba(0, 0, 0, 0.15);
  }
  
  .services .icon i {
    font-size: 36px;
    line-height: 0;
  }
  
  .services .icon-box:hover .icon {
    box-shadow: 0px 0 25px rgba(63, 187, 192, 0.3);
  }
  
  .services .title {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 18px;
    position: relative;
    padding-bottom: 15px;
  }
  
  .services .title a {
    color: #444444;
    transition: 0.3s;
  }
  
  .services .title a:hover {
    color: #6893cb;
  }
  
  .services .title::after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 2px;
    background: #6893cb;
    bottom: 0;
    left: calc(50% - 25px);
  }
  
  .services .description {
    line-height: 24px;
    font-size: 14px;
  }
  
  /*--------------------------------------------------------------
  # Departments
  --------------------------------------------------------------*/
  .departments .nav-tabs {
    border: 0;
  }
  
  .departments .nav-link {
    border: 0;
    padding: 20px;
    color: #555555;
    border-radius: 0;
    border-left: 5px solid #fff;
    cursor: pointer;
  }
  
  .departments .nav-link h4 {
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s;
  }
  
  .departments .nav-link p {
    font-size: 14px;
    margin-bottom: 0;
  }
  
  .departments .nav-link:hover h4 {
    color: #6893cb;
  }
  
  .departments .nav-link.active {
    background: #f7fcfc;
    border-color: #6893cb;
  }
  
  .departments .nav-link.active h4 {
    color: #6893cb;
  }
  
  .departments .tab-pane.active {
    -webkit-animation: slide-down 0.5s ease-out;
    animation: slide-down 0.5s ease-out;
  }
  
  .departments .tab-pane img {
    float: left;
    max-width: 300px;
    padding: 0 15px 15px 0;
  }
  
  @media (max-width: 768px) {
    .departments .tab-pane img {
      float: none;
      padding: 0 0 15px 0;
      max-width: 100%;
    }
  }
  
  .departments .tab-pane h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #6893cb;
  }
  
  .departments .tab-pane p {
    color: #777777;
  }
  
  .departments .tab-pane p:last-child {
    margin-bottom: 0;
  }
  
  @-webkit-keyframes slide-down {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @keyframes slide-down {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  /*--------------------------------------------------------------
  # Testimonials
  --------------------------------------------------------------*/
  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }
  
  .testimonials .testimonial-item {
    box-sizing: content-box;
    min-height: 320px;
  }
  
  .testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50%;
    margin: -40px 0 0 40px;
    position: relative;
    z-index: 2;
    border: 6px solid #fff;
  }
  
  .testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 45px;
    color: #111;
  }
  
  .testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #999;
    margin: 0 0 0 45px;
  }
  
  .testimonials .testimonial-item .quote-icon-left,
  .testimonials .testimonial-item .quote-icon-right {
    color: #b2e4e6;
    font-size: 26px;
  }
  
  .testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
  }
  
  .testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
  }
  
  .testimonials .testimonial-item p {
    font-style: italic;
    margin: 0 15px 0 15px;
    padding: 20px 20px 60px 20px;
    background: #f0fafa;
    position: relative;
    border-radius: 6px;
    position: relative;
    z-index: 1;
  }
  
  .testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }
  
  .testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #6893cb;
  }
  
  .testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #6893cb;
  }
  
  /*--------------------------------------------------------------
  # Doctors
  --------------------------------------------------------------*/
  .doctors .member {
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 2px 15px rgba(63, 187, 192, 0.1);
  }
  
  .doctors .member .member-img {
    position: relative;
    overflow: hidden;
  }
  
  .doctors .member .social {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 40px;
    opacity: 0;
    transition: ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .doctors .member .social a {
    transition: color 0.3s;
    color: #555555;
    margin: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .doctors .member .social a i {
    line-height: 0;
  }
  
  .doctors .member .social a:hover {
    color: #6893cb;
  }
  
  .doctors .member .social i {
    font-size: 18px;
    margin: 0 2px;
  }
  
  .doctors .member .member-info {
    padding: 25px 15px;
  }
  
  .doctors .member .member-info h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 18px;
    color: #555555;
  }
  
  .doctors .member .member-info span {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #aaaaaa;
  }
  
  .doctors .member .member-info p {
    font-style: italic;
    font-size: 14px;
    line-height: 26px;
    color: #777777;
  }
  
  .doctors .member:hover .social {
    opacity: 1;
  }
  
  /*--------------------------------------------------------------
  # Gallery
  --------------------------------------------------------------*/
  .gallery {
    overflow: hidden;
  }
  
  .gallery .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }
  
  .gallery .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #6893cb;
  }
  
  .gallery .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #6893cb;
  }
  
  .gallery .swiper-slide-active {
    text-align: center;
  }
  
  @media (min-width: 992px) {
    .gallery .swiper-wrapper {
      padding: 40px 0;
    }
  
    .gallery .swiper-slide-active {
      border: 6px solid #6893cb;
      padding: 4px;
      background: #fff;
      z-index: 1;
      transform: scale(1.2);
      margin-top: 10px;
    }
  }
  
  /*--------------------------------------------------------------
  # Pricing
  --------------------------------------------------------------*/
  .pricing .box {
    padding: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  
  .pricing h3 {
    font-weight: 400;
    margin: -20px -20px 20px -20px;
    padding: 20px 15px;
    font-size: 16px;
    font-weight: 600;
    color: #777777;
    background: #f8f8f8;
  }
  
  .pricing h4 {
    font-size: 36px;
    color: #6893cb;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    margin-bottom: 20px;
  }
  
  .pricing h4 sup {
    font-size: 20px;
    top: -15px;
    left: -3px;
  }
  
  .pricing h4 span {
    color: #bababa;
    font-size: 16px;
    font-weight: 300;
  }
  
  .pricing ul {
    padding: 0;
    list-style: none;
    color: #444444;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
  }
  
  .pricing ul li {
    padding-bottom: 16px;
  }
  
  .pricing ul i {
    color: #6893cb;
    font-size: 18px;
    padding-right: 4px;
  }
  
  .pricing ul .na {
    color: #ccc;
    text-decoration: line-through;
  }
  
  .pricing .btn-wrap {
    margin: 20px -20px -20px -20px;
    padding: 20px 15px;
    background: #f8f8f8;
    text-align: center;
  }
  
  .pricing .btn-buy {
    background: #6893cb;
    display: inline-block;
    padding: 8px 35px 10px 35px;
    border-radius: 4px;
    color: #fff;
    transition: none;
    font-size: 14px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    transition: 0.3s;
  }
  
  .pricing .btn-buy:hover {
    background: #6893cb;
  }
  
  .pricing .featured h3 {
    color: #fff;
    background: #6893cb;
  }
  
  .pricing .advanced {
    width: 200px;
    position: absolute;
    top: 18px;
    right: -68px;
    transform: rotate(45deg);
    z-index: 1;
    font-size: 14px;
    padding: 1px 0 3px 0;
    background: #6893cb;
    color: #fff;
  }
  
  /*--------------------------------------------------------------
  # Frequently Asked Questioins
  --------------------------------------------------------------*/
  .faq {
    padding: 60px 0;
  }
  
  .faq .faq-list {
    padding: 0;
    list-style: none;
  }
  
  .faq .faq-list li {
    border-bottom: 1px solid #d9f1f2;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  
  .faq .faq-list .question {
    display: block;
    position: relative;
    font-family: #628bc0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    padding-left: 25px;
    cursor: pointer;
    color: #628bc0;
    transition: 0.3s;
  }
  
  .faq .faq-list i {
    font-size: 16px;
    position: absolute;
    left: 0;
    top: -2px;
  }
  
  .faq .faq-list p {
    margin-bottom: 0;
    padding: 10px 0 0 25px;
  }
  
  .faq .faq-list .icon-show {
    display: none;
  }
  
  .faq .faq-list .collapsed {
    color: black;
  }
  
  .faq .faq-list .collapsed:hover {
    color: #a5aaac;
  }
  
  .faq .faq-list .collapsed .icon-show {
    display: inline-block;
    transition: 0.6s;
  }
  
  .faq .faq-list .collapsed .icon-close {
    display: none;
    transition: 0.6s;
  }
  
  /*--------------------------------------------------------------
  # Video
  --------------------------------------------------------------*/
  .embed-responsive {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove border */
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
}

@media (max-width: 768px) {
    .embed-responsive {
        padding-bottom: 75%; /* 4:3 aspect ratio for smaller screens */
    }
}


/*-------------------------------------------------------------
# LightBox
--------------------------------------------------------------*/


.card {
  transition: transform 0.2s;
   cursor: pointer;
  }

.card:hover {
    transform: scale(1.05);
}


.card-img-top {
  transition: transform 0.2s;
 }
 
.card:hover .card-img-top {
  transform: scale(1.2);
 }

 .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
    }

    .lightbox img {
        max-width: 80%;
        max-height: 80%;
        border: 8px solid white;
        box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.7);
        animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }


  
  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
  #footer {
    background: #eeeeee;
    padding: 0 0 30px 0;
    color: #555555;
    font-size: 14px;
  }
  
  #footer .footer-top {
    background: #f6f6f6;
    padding: 60px 0 30px 0;
  }
  
  #footer .footer-top .footer-info {
    margin-bottom: 30px;
  }
  
  #footer .footer-top .footer-info h3 {
    font-size: 24px;
    margin: 0 0 20px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    font-weight: 700;
  }
  
  #footer .footer-top .footer-info p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    font-family: "Roboto", sans-serif;
  }
  
  #footer .footer-top .social-links a {
    font-size: 18px;
    display: inline-block;
    background: #3fbbc0;
    color: #fff;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 4px;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
  }
  
  #footer .footer-top .social-links a:hover {
    background: #65c9cd;
    text-decoration: none;
  }
  
  #footer .footer-top h4 {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px;
  }
  
  #footer .footer-top .footer-links {
    margin-bottom: 30px;
  }
  
  #footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: #3fbbc0;
    font-size: 18px;
    line-height: 1;
  }
  
  #footer .footer-top .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  
  #footer .footer-top .footer-links ul li:first-child {
    padding-top: 0;
  }
  
  #footer .footer-top .footer-links ul a {
    color: #555555;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
  }
  
  #footer .footer-top .footer-links ul a:hover {
    color: #3fbbc0;
  }
  
  #footer .footer-top .footer-newsletter form {
    margin-top: 30px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
  }
  
  #footer .footer-top .footer-newsletter form input[type=email] {
    border: 0;
    padding: 4px;
    width: calc(100% - 110px);
  }
  
  #footer .footer-top .footer-newsletter form input[type=submit] {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    background: #3fbbc0;
    color: #fff;
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
  }
  
  #footer .footer-top .footer-newsletter form input[type=submit]:hover {
    background: #65c9cd;
  }
  
  #footer .copyright {
    text-align: center;
    padding-top: 30px;
  }
  
  #footer .credits {
    padding-top: 10px;
    text-align: center;
    font-size: 13px;
  }