@charset "utf-8";
/* CSS Document */

#cssmenu ul ul,#cssmenu ul ul ul{position:absolute;left:-9999px;z-index:1000}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{margin:0 0 -2px;padding:0;border:0;list-style:none;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:150}#cssmenu:after,#cssmenu>ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}#cssmenu #menu-button,#cssmenu ul ul li.has-sub>a:before{display:none}#cssmenu>ul>li{float:left}#cssmenu.align-center>ul{font-size:0;text-align:center}#cssmenu.align-center>ul>li{display:inline-block;float:none}#cssmenu ul ul li.has-sub>a:after,#cssmenu ul ul li.has-sub>a:before{position:absolute;display:block;content:'\f105';font-family:FontAwesome}#cssmenu.align-center ul ul{text-align:left}#cssmenu.align-right>ul>li{float:right}#cssmenu>ul>li>a{text-decoration:none;transition:.5s}#cssmenu>ul>li:hover>a{transition:.5s}#cssmenu ul ul{margin-top:0}#cssmenu.align-right ul ul{text-align:right}#cssmenu ul ul li{transition:.25s;margin-bottom:11px;padding:0;width:200px;text-transform:capitalize!important;position:relative;height:30px}#cssmenu li:hover>ul{left:auto}#cssmenu.align-right li:hover>ul{left:auto;right:0}#cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%}#cssmenu ul ul li.last-item>a,#cssmenu ul ul li:last-child>a{border-bottom:0}#cssmenu ul ul li.has-sub>a:after{top:16px;right:7px;width:8px;height:2px}#cssmenu>ul>li.has-sub>a{padding-right:10px}#cssmenu>ul>li a{border:none}#cssmenu>ul ul li a{border:none;padding-bottom:10px!important}#cssmenu>ul>li a:hover{color:#08693f}#cssmenu>ul ul{margin-top:14px}#cssmenu>ul ul li a:hover{background:0 0;transition:.5s}#cssmenu ul{padding:0}#cssmenu ul ul{top:50px;opacity:0;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s}#cssmenu ul ul ul{margin-left:100%;top:0;opacity:1;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s;background:#492b2d;margin-top:0}#cssmenu>ul>li:hover>ul{left:auto;top:20px;opacity:1}#cssmenu ul ul li a{border-bottom:1px solid rgba(143,143,143,.5);border-bottom:none;padding:11px;text-transform:capitalize;font-size:12px;color:#fff;-webkit-transition:.35s;margin:0!important;-moz-transition:.35s;-ms-transition:.35s;-o-transition:.35s;transition:.35s}#cssmenu ul ul li.has-sub::after{right:10px;top:12px;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;-webkit-transition:-webkit-transform .2s,right .2s}@media all and (max-width:900px){#cssmenu #menu-button,#cssmenu .submenu-button{position:absolute;right:0;display:block;cursor:pointer}#cssmenu,#cssmenu .submenu-button.submenu-opened{background:0 0}#cssmenu ul li a{color:#fff!important}#cssmenu .submenu-button.submenu-opened:before,#cssmenu ul,#cssmenu ul ul>li.has-sub>a:after,#cssmenu ul ul>li.has-sub>a:before,#cssmenu>ul>li.has-sub>a:after,#cssmenu>ul>li.has-sub>a:before{display:none}#cssmenu ul ul li{width:100%!important;margin-bottom:0}#cssmenu ul{width:100%;margin-top:0;padding:0 10px}#cssmenu.align-center>ul{text-align:left}#cssmenu ul li{width:100%}#cssmenu li:hover>ul>li,#cssmenu ul ul li{height:auto}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}#cssmenu>ul>li{float:none;padding-bottom:17px!important;padding-top:8px}#cssmenu ul ul ul li a{padding-left:35px}#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}#cssmenu #menu-button:after,#cssmenu #menu-button:before{right:8px;width:30px;content:'';position:absolute}#cssmenu #menu-button{padding:17px;color:#ddd;font-size:12px;text-transform:uppercase;font-weight:700;width:46px;border-radius:4px}#cssmenu #menu-button:after{top:16px;display:block;height:8px;border-top:2px solid #ddd;border-bottom:2px solid #ddd}#cssmenu #menu-button:before{top:10px;display:block;height:2px;background:#ddd}#cssmenu ul ul .submenu-button{height:34px;width:34px}#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;content:''}#cssmenu ul ul .submenu-button:after{top:15px;right:13px}#cssmenu .submenu-button.submenu-opened:after{content:'\f068';font-family:FontAwesome;color:#fff}#cssmenu .submenu-button:before{position:absolute;top:19px;right:19px;display:block;height:8px;content:'\f067';font-family:FontAwesome;color:#fff}#cssmenu ul ul .submenu-button:before{top:12px;right:16px}#cssmenu .submenu-button::after,#cssmenu .submenu-button::before{top:11px}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{z-index:auto}#cssmenu{position:fixed;z-index:160;right:15px;width:91.5%;border-radius:2px}ul.socialMedia{float:left}#cssmenu>ul>li>a{padding-bottom:15px}#cssmenu ul ul{padding:0;opacity:1}#cssmenu ul ul li a{background:0 0;font-size:12px;padding-bottom:5px;padding-left:20px!important}#cssmenu .submenu-button{z-index:99;top:0;height:38px;border:none}#cssmenu>ul ul{top:0;margin-top:0}}@media (min-width:768px) and (max-width:1024px){.sliderC{margin-top:0}#cssmenu #menu-button{right:14px}.addressBox{height:120px}@media (min-width:603px) and (max-width:966px){#cssmenu>ul>li a{padding:10px 13px!important}.addressBox h6{font-size:13px}}}@media (max-width:760px){#cssmenu .submenu-button{width:50px}#cssmenu ul ul{background:#404040!important;top:0!important}#cssmenu ul ul li{width:100%!important}.spcificHeight{height:400px!important;overflow-y:scroll!important}#cssmenu>ul>li{padding:0;padding-bottom:0!important}#cssmenu>ul>li a{padding:10px!important}#cssmenu #menu-button{background:#dadada;border:1px solid #fff}#cssmenu #menu-button::before{background:#7b8284}#cssmenu #menu-button::after{border-bottom:2px solid #7b8284;border-top:2px solid #7b8284}}







body{margin:0px 0px; padding:0px 0px;   font-family: "Inter", sans-serif;
}

body {
    font-family: "Jost", sans-serif;
}
header{ top:0; left:0; right:0; margin:0px auto;   z-index:50; background:#fff;}
.logo{overflow:hidden; margin:16px 0px;}
.logo img{ max-width:100%;}
 
#cssmenu{   padding:0px 0px 0px; float:right; 
  }

#cssmenu > ul > li{font-size:15px;   margin-left:30px; font-weight:bold;
}
#cssmenu > ul > li:first-child{ margin-left:0px;}

#cssmenu > ul > li:first-child{ padding-left:0px;}
#cssmenu > ul > li a{       padding: 10px 0px 15px 0px; color:#000; position:relative;  font-size:14px; font-weight:bold }




#cssmenu > ul ul li a{ background:none;}
#cssmenu > ul > li.has-sub > a{ }

#cssmenu > ul > li a:hover{ color:#066ab3;}
#cssmenu > ul > li a.active{ color:#05308c!important;}

#cssmenu > ul ul li { font-size:12px; text-transform:capitalize;}



#cssmenu > ul > li a.active{  }



#cssmenu{  }


#cssmenu > ul > li > a{
    padding:10px 0 15px;
    position:relative;

    font-size:16px;
    font-weight:700;
  

    color:#05308c;

    transition:0.35s ease;
}

/* hover */

#cssmenu > ul > li:hover > a{
    color:#7a96a8;
}

/* active menu */

#cssmenu > ul > li.active > a{
    color:#05308c;
}

/* modern underline effect */

#cssmenu > ul > li > a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:2px;

    border-radius:10px;

    background:
    linear-gradient(
    90deg,
    #7a96a8,
    #5f7888);

    transition:0.35s ease;
}

/* hover underline */

#cssmenu > ul > li:hover > a::after{
    width:100%;
}

/* active underline */

#cssmenu > ul > li.active > a::after{
    width:100%;
}


#cssmenu > ul ul li a{ border-bottom:1px solid #05312c;}

/* =========================================
   SUB MENU
========================================= */

#cssmenu > ul ul{
    background:#0d2b45;

    min-width:260px;

    border-radius:5px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.20);

    border-top:3px solid #7b96a9;
}

/* menu items */

#cssmenu > ul ul li{
    border-bottom:
    1px solid rgba(255,255,255,.08);
}

#cssmenu > ul ul li:last-child{
    border-bottom:none;
}

/* links */

#cssmenu > ul ul a{
    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    padding:14px 25px;

    transition:.35s ease;

    position:relative;
}

/* left indicator */

#cssmenu > ul ul a:before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:3px;
    height:100%;

    background:#7b96a9;

    opacity:0;

    transition:.3s;
}

/* hover */

#cssmenu > ul ul li:hover > a{
    background:
    linear-gradient(
    90deg,
    rgba(123,150,169,.15),
    transparent);

    color:#ffffff;

    padding-left:32px;
}

#cssmenu > ul ul li:hover > a:before{
    opacity:1;
}


/* =========================================
   MODERN TOP BAR
========================================= */

.modern-top-bar{
  position:relative;
  z-index:99;

  background:
 #204f7a;

  overflow:hidden;
}


/* wrapper */

.topbar-wrapper{

  display:flex;
  align-items:center;
  justify-content:space-between;

  position:relative;
  z-index:2; padding:5px 0px;
}

/* left contact */

.topbar-contact{
  display:flex;
  align-items:center;
  gap:28px;
}

.topbar-contact a{
  display:flex;
  align-items:center;
  gap:10px;

  color:rgba(255,255,255,0.88);

  text-decoration:none;

  font-size:14px;
  font-weight:500;

  transition:0.35s ease;
}

.topbar-contact a i{
 



  display:flex;
  align-items:center;
  justify-content:center;

  background:
  rgba(255,255,255,0.08);

  color:#cbd5e1;

  font-size:13px;

  transition:0.35s ease;
}

.topbar-contact a:hover{
  color:#ffffff;
}

.topbar-contact a:hover i{
  background:#7a96a8;
  color:#fff;

  transform:translateY(-2px);
}

/* right section */

.topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
}

/* social icons */

.topbar-social{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-social a{
  width:38px;
  height:38px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  background:
  rgba(255,255,255,0.06);

  border:
  1px solid rgba(255,255,255,0.08);

  color:#ffffff;

  font-size:14px;

  transition:0.35s ease;
}

.topbar-social a:hover{
  transform:translateY(-3px);

  background:#7a96a8;
}

/* button */

.topbar-btn{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:12px 22px;

  border-radius:60px;

  overflow:hidden;

  text-decoration:none;

  background:
  linear-gradient(
  135deg,
  #7a96a8,
  #5f7888);

  color:#fff;

  font-size:14px;
  font-weight:600;

  transition:0.4s ease;

  box-shadow:
  0 10px 30px rgba(122,150,168,0.25);
}

.topbar-btn::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.18),
  transparent);

  opacity:0;

  transition:0.4s ease;
}

.topbar-btn i{
  font-size:13px;
  transition:0.35s ease;
}

.topbar-btn:hover{
  transform:translateY(-2px);
  color:#fff;
}

.topbar-btn:hover::before{
  opacity:1;
}

.topbar-btn:hover i{
  transform:translateX(4px);
}

/* responsive */

@media(max-width:991px){

  .topbar-wrapper{
    flex-direction:column;
    gap:15px;

    padding:15px 0;
  }

}

@media(max-width:768px){

  .topbar-contact{
    flex-direction:column;
    gap:12px;
  }

  .topbar-right{
    flex-direction:column;
  }

}


/* HEADER */
.main-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

/* LOGO */
.logo img {
  max-height: 60px;
}


/* MENU */
.menu li {
  margin-left: 25px;
}

.menu li a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s;
}

.menu li a:hover,
.menu li a.active {
  color: #c59d5f;
}

/* MOBILE MENU */
.menu-toggle {
  font-size: 22px;
  cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .menu {
    display: none;
    background: #fff;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }

  .menu li {
    margin: 10px 0;
  }
}




.top-menu-1 ul {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-menu-1 ul li {
    display: flex;
    align-items: center;
}

.top-menu-1 ul li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0 15px;
}

.top-menu-1 ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: 0.3s ease;
}

.top-menu-1 ul li a:hover {
    color: #fff;
    opacity: 0.75;
}





/*slider*/
.slider-image{ overflow:hidden;}
.slider-image img{ width:100%;}


/* =========================================
   SLIDER C
========================================= */

.slider-C {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-C__inner {
    position: relative;
    width: 100%;
}


/* =========================================
   SLIDER IMAGE
========================================= */

.slider-C .slider-image {
    width: 100%;
    line-height: 0;
}

.slider-C .slider-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================
   LEFT TEXT CONTENT
========================================= */

.slider-C__content {
    position: absolute;
    z-index: 5;

    width: 50%;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    text-align: center;

    padding: 20px 40px;
}


/* =========================================
   YOUR HEALTH
========================================= */

.slider-C__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-bottom: 14px;
}

.slider-C__eyebrow span {
    display: block;

    width: 58px;
    height: 2px;

    background: #194f7d;
}

.slider-C__eyebrow strong {
    color: #194f7d;

    font-size: 36px;
    font-weight: 300;

    letter-spacing: 7px;
    line-height: 1;
}


/* =========================================
   OUR PRIORITY
========================================= */

.slider-C__title {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 12px;

    line-height: 1;
}

.slider-C__title span {
    color: #194f7d;

    font-size: clamp(48px, 4vw, 72px);

    font-weight: 800;

    letter-spacing: -2px;
}

.slider-C__title .highlight {
    color: #b6ce45;
}


/* =========================================
   QUALITY MEDICINE
========================================= */

.slider-C__tagline {
    display: inline-flex;
    align-items: center;

    background: #194f7d;

    padding: 8px 14px 8px 30px;

    transform: skew(-15deg);

    margin-bottom: 17px;
}

.slider-C__tagline span {
    color: #ffffff;

    font-size: clamp(13px, 1.1vw, 19px);

    font-weight: 400;

    letter-spacing: 1px;

    transform: skew(15deg);

    white-space: nowrap;
}

.slider-C__tagline i {
    display: block;

    width: 15px;
    height: 35px;

    margin-left: 10px;

    background: #b6ce45;

    transform: skew(-15deg);
}


/* =========================================
   YOUR WELLNESS
========================================= */

.slider-C__wellness {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider-C__wellness .wellness-title {
    color: #194f7d;

    font-size: 28px;
    font-weight: 500;

    letter-spacing: 1px;

    line-height: 1.2;
}


@font-face {
    font-family: 'Brittany Signature';
    src: url('../fonts/BrittanySignature.eot');
    src: url('../fonts/BrittanySignature.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BrittanySignature.woff2') format('woff2'),
         url('../fonts/BrittanySignature.woff') format('woff'),
         url('../fonts/BrittanySignature.ttf')  format('truetype'),
         url('../fonts/BrittanySignature.svg#Brittany Signature') format('svg');
}


.signature-text {
     font-family: 'Brittany Signature';
    font-size: 50px; 
}




.slider-C__wellness .wellness-script {
  color: #b6ce45;
  font-family: 'Brittany Signature';
  font-size: 62px;
  line-height: 0.9;
  margin-top: 6px;
  transform: rotate(-5deg);
  display: table;
  margin-top: 36px;
}


/* =========================================
   1200px
========================================= */

@media (max-width: 1200px) {

    .slider-C__content {
        width: 52%;
        padding: 20px;
    }

    .slider-C__eyebrow strong {
        font-size: 29px;
    }

    .slider-C__eyebrow span {
        width: 42px;
    }

    .slider-C__title span {
        font-size: 52px;
    }

    .slider-C__wellness .wellness-title {
        font-size: 24px;
    }

    .slider-C__wellness .wellness-script {
        font-size: 52px;
    }
}


/* =========================================
   992px
========================================= */

@media (max-width: 991px) {

    .slider-C__content {
        width: 52%;
    }

    .slider-C__eyebrow {
        gap: 10px;
    }

    .slider-C__eyebrow strong {
        font-size: 22px;
        letter-spacing: 4px;
    }

    .slider-C__eyebrow span {
        width: 30px;
    }

    .slider-C__title {
        gap: 6px;
    }

    .slider-C__title span {
        font-size: 40px;
    }

    .slider-C__tagline {
        padding: 6px 10px 6px 20px;
    }

    .slider-C__tagline span {
        font-size: 11px;
    }

    .slider-C__tagline i {
        width: 10px;
        height: 26px;
    }

    .slider-C__wellness .wellness-title {
        font-size: 19px;
    }

    .slider-C__wellness .wellness-script {
        font-size: 42px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .slider-C__content {
        position: relative;

        width: 100%;

        top: auto;
        left: auto;

        transform: none;

        padding: 45px 15px;

        background: #f4faff;
    }

    .slider-C__title {
        flex-wrap: wrap;
    }

    .slider-C__title span {
        font-size: 42px;
    }

    .slider-C__eyebrow strong {
        font-size: 22px;
    }

    .slider-C__tagline span {
        font-size: 12px;
    }

    .slider-C__wellness .wellness-title {
        font-size: 21px;
    }

    .slider-C__wellness .wellness-script {
        font-size: 45px;
    }

    .slider-C .slider-image {
        width: 100%;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .slider-C__eyebrow {
        gap: 7px;
    }

    .slider-C__eyebrow strong {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .slider-C__eyebrow span {
        width: 22px;
    }

    .slider-C__title {
        flex-direction: column;
        gap: 2px;
    }

    .slider-C__title span {
        font-size: 40px;
    }

    .slider-C__tagline span {
        font-size: 10px;
    }
}


.health-badge {
    width: 190px;
    height: 190px;

    border-radius: 50%;

    background: #19476c;

    border: 8px solid #ffffff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-sizing: border-box; position:absolute; left:55%; top:30%;
}


/* =========================================
   ICON
========================================= */

.health-badge__icon {
    position: relative;

  
}


/* Capsule */




/* Green leaf */

.health-badge__icon span {
    position: absolute;

    width: 25px;
    height: 13px;

    right: 0;
    bottom: 2px;

    background: #b6ce45;

    border-radius: 100% 0 100% 0;

    transform: rotate(-15deg);
}


/* =========================================
   TEXT
========================================= */

.health-badge__text {
    display: flex;
    flex-direction: column;

    align-items: center;

    line-height: 1.2;
}

.health-badge__text span {
    color: #ffffff;

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 3px;
}

.health-badge__text strong {
    color: #b6ce45;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.15;
}



/*about-us*/


/* =========================================
   ABOUT US
========================================= */

.about-us {
    position: relative;
    padding: 70px 0 80px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================
   SECTION HEADING
========================================= */

.about-us__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin-bottom: 42px;

    text-align: center;
}

.about-us__heading span,
.about-us__heading strong {
    font-size: 20px;
    line-height: 1;

    letter-spacing: 0.5px;
}

.about-us__heading span {
    color: #12375d;
    font-weight: 700;
}

.about-us__heading strong {
    color: #62a82f;
    font-weight: 600;
}

.about-us__heading::after {
    content: "";

    position: absolute;

    margin-top: 38px;

    width: 90px;
    height: 2px;

    background: linear-gradient(
        to right,
        #12375d 50%,
        #62a82f 50%
    );
}


/* =========================================
   IMAGE
========================================= */

.about-us__image {
    width: 100%;
    height: 545px;

    overflow: hidden;

    border-radius: 24px;
}

.about-us__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.about-us__image:hover img {
    transform: scale(1.03);
}


/* =========================================
   CONTENT
========================================= */

.about-us__content {
    padding-left: 45px;
}

.about-us__content h2 {
    margin: 0 0 25px;

    color: #102f55;

    font-size: 43px;
    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -1px;
}

.about-us__content h2 span {
    color: #4e8f2b;
}

.about-us__content > p {
    max-width: 650px;

    margin: 0;

    color: #444c56;

    font-size: 16px;
    line-height: 1.75;

    font-weight: 400;
}


/* =========================================
   FEATURES
========================================= */

.about-us__features {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 45px;

    border-top: 1px solid #dfe4e8;
}

.about-us__feature {
    position: relative;

    text-align: center;

    padding: 28px 15px 5px;

    min-width: 0;
}

.about-us__feature:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 28px;

    width: 1px;
    height: 125px;

    background: #dfe4e8;
}


/* =========================================
   FEATURE ICON
========================================= */

.about-us__icon {
    width: 84px;
    height: 84px;

    margin: 0 auto 17px;

    border-radius: 50%;

    background: #f1f5f8;

    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us__icon i {
    color: #12375d;

    font-size: 32px;
}

.about-us__feature:nth-child(1) .about-us__icon i {
    color: #12375d;
}

.about-us__feature:nth-child(2) .about-us__icon i {
    color: #12375d;
}

.about-us__feature:nth-child(3) .about-us__icon i {
    color: #12375d;
}

.about-us__feature:nth-child(4) .about-us__icon i {
    color: #12375d;
}


/* =========================================
   FEATURE CONTENT
========================================= */

.about-us__feature h3 {
    margin: 0 0 8px;

    color: #102f55;

    font-size: 15px;
    line-height: 1.3;

    font-weight: 700;
}

.about-us__feature p {
    margin: 0;

    color: #555b63;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (max-width: 1399px) {

    .about-us__image {
        height: 500px;
    }

    .about-us__content {
        padding-left: 35px;
    }

    .about-us__content h2 {
        font-size: 39px;
    }

    .about-us__feature {
        padding-left: 10px;
        padding-right: 10px;
    }

}


/* =========================================
   TABLET / LAPTOP
========================================= */

@media (max-width: 1199px) {

    .about-us {
        padding: 60px 0 70px;
    }

    .about-us__image {
        height: 450px;
    }

    .about-us__content {
        padding-left: 25px;
    }

    .about-us__content h2 {
        font-size: 34px;
    }

    .about-us__content > p {
        font-size: 14px;
        line-height: 1.65;
    }

    .about-us__features {
        margin-top: 30px;
    }

    .about-us__icon {
        width: 70px;
        height: 70px;
    }

    .about-us__icon i {
        font-size: 27px;
    }

    .about-us__feature p {
        font-size: 12px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .about-us {
        padding: 55px 0 65px;
    }

    .about-us__heading {
        margin-bottom: 35px;
    }

    .about-us__image {
        height: 450px;
        margin-bottom: 40px;
    }

    .about-us__content {
        padding-left: 0;
    }

    .about-us__content h2 {
        font-size: 36px;
    }

    .about-us__content > p {
        max-width: 100%;
    }

    .about-us__features {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-us__feature {
        padding: 25px 20px;
    }

    .about-us__feature:nth-child(2)::after {
        display: none;
    }

    .about-us__feature:nth-child(1)::after,
    .about-us__feature:nth-child(3)::after {
        height: 110px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .about-us {
        padding: 45px 0 55px;
    }

    .about-us__heading {
        margin-bottom: 30px;
    }

    .about-us__heading span,
    .about-us__heading strong {
        font-size: 17px;
    }

    .about-us__heading::after {
        margin-top: 32px;
        width: 70px;
    }

    .about-us__image {
        height: 350px;

        border-radius: 18px;

        margin-bottom: 35px;
    }

    .about-us__content h2 {
        font-size: 30px;
        line-height: 1.25;
        letter-spacing: -0.5px;
    }

    .about-us__content > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .about-us__features {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 30px;
    }

    .about-us__feature {
        padding: 25px 12px;
    }

    .about-us__feature:nth-child(1)::after {
        display: block;
        height: 105px;
    }

    .about-us__feature:nth-child(2)::after,
    .about-us__feature:nth-child(4)::after {
        display: none;
    }

    .about-us__feature:nth-child(3)::after {
        display: block;
        height: 105px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .about-us__image {
        height: 280px;
    }

    .about-us__content h2 {
        font-size: 27px;
    }

    .about-us__features {
        grid-template-columns: 1fr;
    }

    .about-us__feature {
        padding: 25px 15px;
        border-bottom: 1px solid #e1e5e8;
    }

    .about-us__feature::after {
        display: none !important;
    }

    .about-us__feature:last-child {
        border-bottom: 0;
    }
}

/* =========================================
   ABOUT US - SIMPLE CSS ANIMATION
========================================= */

.about-us__heading {
    animation: aboutFadeDown 0.8s ease forwards;
}

.about-us__image {
    animation: aboutSlideLeft 1s ease forwards;
}

.about-us__content h2 {
    animation: aboutSlideRight 0.8s ease 0.2s forwards;
    opacity: 0;
}

.about-us__content > p {
    animation: aboutFadeUp 0.8s ease 0.4s forwards;
    opacity: 0;
}


/* =========================================
   FEATURES
========================================= */

.about-us__feature {
    opacity: 0;
    animation: aboutFadeUp 0.7s ease forwards;
}

.about-us__feature:nth-child(1) {
    animation-delay: 0.6s;
}

.about-us__feature:nth-child(2) {
    animation-delay: 0.75s;
}

.about-us__feature:nth-child(3) {
    animation-delay: 0.9s;
}

.about-us__feature:nth-child(4) {
    animation-delay: 1.05s;
}


/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes aboutFadeDown {

    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes aboutSlideLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes aboutSlideRight {

    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes aboutFadeUp {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   IMAGE HOVER
========================================= */

.about-us__image {
    overflow: hidden;
}

.about-us__image img {
    transition: transform 0.7s ease;
}

.about-us__image:hover img {
    transform: scale(1.04);
}


/* =========================================
   ICON HOVER
========================================= */

.about-us__icon {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.about-us__icon img {
    transition: transform 0.4s ease;
}

.about-us__feature:hover .about-us__icon {
    transform: translateY(-6px);

    box-shadow: 0 10px 25px rgba(18, 55, 93, 0.12);
}

.about-us__feature:hover .about-us__icon img {
    transform: scale(1.08);
}


/* =========================================
   TITLE HOVER
========================================= */

.about-us__feature h3 {
    transition: color 0.3s ease;
}

.about-us__feature:hover h3 {
    color: #4e8f2b;
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-us__heading,
    .about-us__image,
    .about-us__content h2,
    .about-us__content > p,
    .about-us__feature {
        animation: none;
        opacity: 1;
        transform: none;
    }

}



/*why-choos*/

/* =========================================
   WHY CHOOSE
========================================= */

.why-choose {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(37, 108, 180, 0.35),
            transparent 45%
        ),
        linear-gradient(
            120deg,
            #123f70 0%,
            #164a7d 55%,
            #123c6b 100%
        );

    color: #ffffff;
}


/* =========================================
   LEFT CONTENT
========================================= */

.why-choose__content {
    position: relative;

    padding-right: 45px;
}

.why-choose__eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #c3d83c;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;
}

.why-choose__eyebrow::after {
    content: "";

    display: block;

    width: 82px;
    height: 2px;

    margin-top: 14px;

    background: #c3d83c;
}


/* =========================================
   HEADING
========================================= */

.why-choose__content h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 60px;

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1px;
}

.why-choose__content h2 span {
    color: #c3d83c;
}


/* Small line */

.why-choose__line {
    width: 58px;
    height: 2px;

    margin-bottom: 28px;

    background: #c3d83c;
}


/* =========================================
   DESCRIPTION
========================================= */

.why-choose__content > p {
    max-width: 430px;

    margin: 0 0 32px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   BUTTON
========================================= */

.why-choose__button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    width: 220px;

    padding: 14px 18px 14px 35px;

    border: 2px solid #c3d83c;

    border-radius: 8px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.why-choose__button i {
    color: #c3d83c;

    font-size: 20px;

    transition: transform 0.35s ease;
}

.why-choose__button:hover {
    background: #c3d83c;

    color: #123f70;

    transform: translateY(-3px);
}

.why-choose__button:hover i {
    color: #123f70;

    transform: translateX(6px);
}


/* =========================================
   DECORATIVE DOTS
========================================= */

.why-choose__dots {
    position: absolute;

    left: 0;
    bottom: -180px;

    width: 100px;
    height: 100px;

    background-image: radial-gradient(
        #4c8bc7 1.5px,
        transparent 1.5px
    );

    background-size: 15px 15px;

    opacity: 0.5;
}


/* =========================================
   FEATURES GRID
========================================= */

.why-choose__features {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px 22px;

    padding-left: 20px;
}


/* =========================================
   CARD
========================================= */

.why-choose__card {
    position: relative;

    min-height: 295px;

    padding: 38px 36px 30px;

    border: 1px solid rgba(142, 188, 225, 0.45);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.025);

    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, 0.015);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}

.why-choose__card:hover {
    transform: translateY(-7px);

    border-color: rgba(195, 216, 60, 0.7);

    background: rgba(255, 255, 255, 0.06);
}


/* =========================================
   CARD ICON
========================================= */

.why-choose__card-icon {
    position: relative;

    width: 100px;
    height: 100px;

    margin-bottom: 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            #1670d8 0%,
            #1264c4 55%,
            #0e4f9d 100%
        );

    border: 1px solid rgba(110, 188, 255, 0.35);

    box-shadow:
        0 0 0 8px rgba(20, 106, 195, 0.12),
        0 0 0 16px rgba(20, 106, 195, 0.06);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.why-choose__card:hover .why-choose__card-icon {
    transform: scale(1.05);

    box-shadow:
        0 0 0 8px rgba(20, 106, 195, 0.18),
        0 0 0 16px rgba(195, 216, 60, 0.08);
}

.why-choose__card-icon img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


/* =========================================
   CARD DOT PATTERN
========================================= */

.why-choose__card-icon::after {
    content: "";

    position: absolute;

    left: 110px;
    top: 5px;

    width: 65px;
    height: 65px;

    background-image: radial-gradient(
        #3c8ed4 1.5px,
        transparent 1.5px
    );

    background-size: 12px 12px;

    opacity: 0.7;

    pointer-events: none;
}


/* =========================================
   CARD TITLE
========================================= */

.why-choose__card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.25;
}


/* =========================================
   CARD LINE
========================================= */

.why-choose__card-line {
    width: 45px;
    height: 2px;

    margin-bottom: 15px;

    background: #c3d83c;

    transition: width 0.35s ease;
}

.why-choose__card:hover .why-choose__card-line {
    width: 70px;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.why-choose__card p {
    max-width: 350px;

    margin: 0;

    color: rgba(255, 255, 255, 0.8);

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .why-choose {
        padding: 70px 0;
    }

    .why-choose__content h2 {
        font-size: 50px;
    }

    .why-choose__content {
        padding-right: 20px;
    }

    .why-choose__features {
        padding-left: 10px;
    }

    .why-choose__card {
        padding: 30px 25px;
    }

    .why-choose__card h3 {
        font-size: 19px;
    }

}


@media (max-width: 991px) {

    .why-choose {
        padding: 60px 0;
    }

    .why-choose__content {
        padding-right: 0;

        margin-bottom: 50px;
    }

    .why-choose__content > p {
        max-width: 600px;
    }

    .why-choose__features {
        padding-left: 0;
    }

}


@media (max-width: 767px) {

    .why-choose {
        padding: 50px 0;
    }

    .why-choose__content {
        text-align: center;
    }

    .why-choose__eyebrow::after,
    .why-choose__line {
        margin-left: auto;
        margin-right: auto;
    }

    .why-choose__content h2 {
        font-size: 42px;
    }

    .why-choose__content > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .why-choose__dots {
        display: none;
    }

    .why-choose__features {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .why-choose__card {
        min-height: auto;

        padding: 30px 25px;
    }

    .why-choose__card-icon::after {
        display: none;
    }

}


@media (max-width: 480px) {

    .why-choose__content h2 {
        font-size: 36px;
    }

    .why-choose__eyebrow {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .why-choose__card h3 {
        font-size: 19px;
    }

    .why-choose__card p {
        font-size: 14px;
    }

}




/* =========================================
   OUR SPL
========================================= */
.our-spl__doctor {
    position: absolute;

    left: 40%;
    top: 51%;

    width: 280px;
 

    padding: 14px;

    background: #fff;

    transform: translateY(-50%);

    z-index: 5;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

    animation: doctorFloat 4s ease-in-out infinite;
}

.our-spl__doctor img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}



.our-spl {
    position: relative;
    min-height: 580px;

    background-image:url(../images/section.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    font-family: "Jost", sans-serif;
}


/* Optional subtle overlay */

.our-spl__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.03);

    pointer-events: none;
}


/* Content */

.our-spl__content {
    position: relative;
    z-index: 2;

    min-height: 580px;

    display: flex;
    align-items: center;

    padding: 60px 8% 60px 18%;
}


/* List */

.our-spl__list {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* List item */

.our-spl__list li {
    position: relative;

    padding-left: 28px;
    margin-bottom: 14px;

    color: #111;

    font-size: 21px;
    font-weight: 400;
    line-height: 1.35;

    opacity: 0;
    transform: translateX(30px);

    animation: splFadeIn 0.7s ease forwards;
}


/* Square bullet */

.our-spl__list li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 9px;

    width: 10px;
    height: 10px;

    background: #fff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);

    transition: all 0.3s ease;
}


/* Hover */

.our-spl__list li:hover::before {
    transform: scale(1.3);
    background: #1c3048;
}

.our-spl__list li:hover {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}


/* Animation delays */

.our-spl__list li:nth-child(1) {
    animation-delay: 0.1s;
}

.our-spl__list li:nth-child(2) {
    animation-delay: 0.2s;
}

.our-spl__list li:nth-child(3) {
    animation-delay: 0.3s;
}

.our-spl__list li:nth-child(4) {
    animation-delay: 0.4s;
}

.our-spl__list li:nth-child(5) {
    animation-delay: 0.5s;
}

.our-spl__list li:nth-child(6) {
    animation-delay: 0.6s;
}

.our-spl__list li:nth-child(7) {
    animation-delay: 0.7s;
}

.our-spl__list li:nth-child(8) {
    animation-delay: 0.8s;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes splFadeIn {

    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .our-spl {
        min-height: 600px;

        background-position: center;
    }

    .our-spl__content {
        min-height: 600px;

        padding: 50px 8%;
    }

    .our-spl__list li {
        font-size: 18px;
    }

}


@media (max-width: 575px) {

    .our-spl {
        min-height: 550px;

        background-position: 42% center;
    }

    .our-spl__content {
        min-height: 550px;

        padding: 40px 25px;
    }

    .our-spl__list li {
        font-size: 16px;
        margin-bottom: 12px;
    }

}



.our-products {
    position: relative;
    padding: 85px 0 100px;
    background: #fff;
    overflow: hidden;
    font-family: "Jost", sans-serif;
}


/* =========================================
   HEADING
========================================= */

.our-products__heading {
    max-width: 850px;
    margin: 0 auto 65px;
}

.our-products__label {
    position: relative;
    display: inline-block;

    color: #b5ca45;
    font-size: 24px;
    font-weight: 400;

    padding: 0 60px 10px;
}

.our-products__label::before,
.our-products__label::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 75px;
    height: 1px;

    background: #b5ca45;
}

.our-products__label::before {
    right: 100%;
}

.our-products__label::after {
    left: 100%;
}


/* Heading */

.our-products__heading h2 {
    margin: 22px 0 15px;

    color: #24557f;

    font-size: 47px;
    font-weight: 700;
    line-height: 1.15;
}

.our-products__heading h2 span {
    color: #b4ca45;
}

.our-products__heading p {
    max-width: 700px;
    margin: 0 auto;

    color: #666;

    font-size: 19px;
    line-height: 1.55;
}


/* =========================================
   PRODUCT CARD
========================================= */

.product-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    border-radius: 25px;

    background: #f3f7df;

    box-shadow: 0 8px 25px rgba(32, 72, 108, 0.06);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(32, 72, 108, 0.14);
}


/* =========================================
   PRODUCT IMAGE
========================================= */

.product-card__image {
    position: relative;

    height: 225px;

    overflow: hidden;
}

.product-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}

.product-card:hover .product-card__image img {
    transform: scale(1.07);
}


/* =========================================
   CONTENT
========================================= */

.product-card__content {
    position: relative;

    text-align: center;

    padding: 38px 30px 30px;
}


/* =========================================
   ICON
========================================= */

.product-card__icon {
    position: absolute;

    top: -34px;
    left: 50%;

    width: 68px;
    height: 68px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #24557f;

    color: #fff;

    font-size: 25px;

    border: 5px solid #f3f7df;

    transition:
        transform 0.4s ease,
        background 0.4s ease; padding:8px;
}

.product-card:hover .product-card__icon {
    transform: translateX(-50%) rotate(8deg) scale(1.08);

    background: #b4ca45;
}

.product-card__icon  img{ width:100%;}


/* =========================================
   TITLE
========================================= */

.product-card__content h3 {
    margin: 25px 0 9px;

    color: #24557f;

    font-size: 24px;
    font-weight: 400;
}


/* =========================================
   GREEN LINE
========================================= */

.product-card__line {
    display: block;

    width: 75px;
    height: 5px;

    margin: 0 auto 15px;

    background: #b4ca45;

    transition: width 0.4s ease;
}

.product-card:hover .product-card__line {
    width: 100px;
}


/* =========================================
   DESCRIPTION
========================================= */

.product-card__content p {
    max-width: 220px;

    margin: 0 auto 20px;

    color: #24557f;

    font-size: 16px;
    line-height: 1.6;
}


/* =========================================
   BUTTON
========================================= */

.product-card__btn {
    width: 42px;
    height: 42px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #b4ca45;

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.product-card__btn:hover {
    background: #24557f;

    transform: rotate(90deg);
}


/* =========================================
   CARD REVEAL ANIMATION
========================================= */

.product-card {
    opacity: 0;
    transform: translateY(35px);

    animation: productReveal 0.8s ease forwards;
}

.col-lg-3:nth-child(1) .product-card {
    animation-delay: 0.1s;
}

.col-lg-3:nth-child(2) .product-card {
    animation-delay: 0.2s;
}

.col-lg-3:nth-child(3) .product-card {
    animation-delay: 0.3s;
}

.col-lg-3:nth-child(4) .product-card {
    animation-delay: 0.4s;
}

@keyframes productReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .our-products__heading h2 {
        font-size: 40px;
    }

    .product-card__content {
        padding-left: 20px;
        padding-right: 20px;
    }

}


@media (max-width: 991px) {

    .our-products {
        padding: 70px 0 80px;
    }

    .our-products__heading {
        margin-bottom: 50px;
    }

    .our-products__heading h2 {
        font-size: 36px;
    }

}


@media (max-width: 575px) {

    .our-products {
        padding: 55px 0 65px;
    }

    .our-products__label {
        font-size: 19px;
        padding: 0 35px 10px;
    }

    .our-products__label::before,
    .our-products__label::after {
        width: 35px;
    }

    .our-products__heading h2 {
        font-size: 30px;
    }

    .our-products__heading p {
        font-size: 16px;
    }

    .product-card__image {
        height: 230px;
    }

}


/* =========================================
   PRODUCT ICON - ANIMATED TRANSPARENT BORDER
========================================= */

.product-card__icon {
    position: absolute;
    top: -34px;
    left: 50%;

    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateX(-50%);

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);

    background: #24557f;

    z-index: 5;

    box-shadow:
        0 6px 18px rgba(36, 85, 127, 0.18);

    transition: all 0.4s ease;
}


/* Animated transparent outer ring */

.product-card__icon::before {
    content: "";

    position: absolute;
    inset: -8px;

    border-radius: 50%;

    border: 2px solid rgba(180, 202, 69, 0.35);

    border-top-color: rgba(180, 202, 69, 0.9);
    border-right-color: rgba(255, 255, 255, 0.5);

    animation: iconRotate 3s linear infinite;

    pointer-events: none;
}


/* Soft transparent pulse */

.product-card__icon::after {
    content: "";

    position: absolute;
    inset: -13px;

    border-radius: 50%;

    border: 1px solid rgba(180, 202, 69, 0.25);

    animation: iconPulse 2.5s ease-in-out infinite;

    pointer-events: none;
}


/* Icon PNG */

.product-card__icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    position: relative;
    z-index: 2;

    transition: transform 0.4s ease;
}


/* =========================================
   ROTATING BORDER
========================================= */

@keyframes iconRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   PULSE ANIMATION
========================================= */

@keyframes iconPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.65;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.25;
    }
}


/* =========================================
   CARD HOVER
========================================= */

.product-card:hover .product-card__icon {
    transform: translateX(-50%) scale(1.08);
}

.product-card:hover .product-card__icon img {
    transform: scale(1.12);
}


/* Faster animation on hover */

.product-card:hover .product-card__icon::before {
    animation-duration: 1.5s;
}


/* =========================================
   IMAGE HOVER
========================================= */

.product-card__image {
    overflow: hidden;
}

.product-card__image img {
    transition: transform 0.7s ease;
}

.product-card:hover .product-card__image img {
    transform: scale(1.06);
}








/* =========================================
   YOUR VISION
========================================= */

.your-visio {
    position: relative;

    padding: 85px 0;

    background: #b8ca52;

    overflow: hidden;

    font-family: "Jost", sans-serif;
}


/* =========================================
   LEFT IMAGE
========================================= */

.your-visio__image {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.your-visio__image img {
    width: 100%;
    max-width: 600px;

    height: auto;

    display: block;

    object-fit: contain;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;

    animation: visionImageFloat 4s ease-in-out infinite;
}

.your-visio__image:hover img {
    transform: scale(1.04);
}


/* =========================================
   RIGHT CONTENT
========================================= */

.your-visio__content {
    padding: 20px 20px 20px 55px;

    color: #111;
}


/* =========================================
   TOP LABEL
========================================= */

.your-visio__top {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-bottom: 25px;
}

.your-visio__top-icon {
    width: 82px;
    height: 82px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);

    position: relative;

    animation: visionIconPulse 3s ease-in-out infinite;
}

.your-visio__top-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.5);

    animation: visionIconRing 3s linear infinite;
}

.your-visio__top-icon img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}


/* Top text */

.your-visio__top > div:last-child {
    position: relative;

    padding-bottom: 14px;
}

.your-visio__top span {
    display: block;

    color: #111;

    font-size: 23px;
    font-weight: 400;

    text-transform: uppercase;
}

.your-visio__top i {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 85px;
    height: 4px;

    display: block;

    background: #fff;
}


/* =========================================
   MAIN HEADING
========================================= */

.your-visio__content h2 {
    margin: 0;

    color: #000;

    font-size: 62px;
    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -1px;
}

.your-visio__content h2 strong {
    display: block;

    margin-top: 8px;

    color: #fff;

    font-size: 39px;
    font-weight: 700;

    line-height: 1.15;
}


/* =========================================
   DIVIDER
========================================= */

.your-visio__divider {
    position: relative;

    width: 140px;
    height: 20px;

    margin: 38px 0 28px;
}

.your-visio__divider::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 135px;
    height: 2px;

    background: rgba(255, 255, 255, 0.9);
}

.your-visio__divider span {
    position: absolute;

    right: 0;
    top: 50%;

    width: 8px;
    height: 8px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #fff;
}


/* =========================================
   DESCRIPTION
========================================= */

.your-visio__content p {
    max-width: 600px;

    margin: 0 0 30px;

    color: #111;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================
   BUTTON
========================================= */

.your-visio__btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 200px;

    padding: 13px 28px;

    border-radius: 30px;

    background: #fff;

    color: #b3c74b;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.your-visio__btn:hover {
    background: #24557f;

    color: #fff;

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes visionImageFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


@keyframes visionIconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

}


@keyframes visionIconRing {

    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1.05);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .your-visio__content {
        padding-left: 30px;
    }

    .your-visio__content h2 {
        font-size: 52px;
    }

    .your-visio__content h2 strong {
        font-size: 34px;
    }

    .your-visio__top span {
        font-size: 20px;
    }

}


@media (max-width: 991px) {

    .your-visio {
        padding: 70px 0;
    }

    .your-visio__image {
        margin-bottom: 35px;
    }

    .your-visio__content {
        padding: 20px 10px;
    }

    .your-visio__content h2 {
        font-size: 48px;
    }

    .your-visio__content h2 strong {
        font-size: 32px;
    }

}


@media (max-width: 575px) {

    .your-visio {
        padding: 55px 0;
    }

    .your-visio__image {
        padding: 5px;
    }

    .your-visio__top {
        gap: 18px;
    }

    .your-visio__top-icon {
        width: 65px;
        height: 65px;
    }

    .your-visio__top-icon img {
        width: 34px;
        height: 34px;
    }

    .your-visio__top span {
        font-size: 16px;
    }

    .your-visio__content h2 {
        font-size: 40px;
    }

    .your-visio__content h2 strong {
        font-size: 27px;
    }

    .your-visio__content p {
        font-size: 15px;
    }

}


.your-visio__image {
    position: relative;
    width: 100%;
    min-height: 450px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    overflow: visible;
}

.your-visio__image::before {
    content: "";

    position: absolute;

    width: 85%;
    height: 85%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.55) 25%,
        rgba(255, 255, 255, 0.25) 45%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 100%
    );

    border-radius: 50%;

    z-index: 0;

    pointer-events: none;
}

.your-visio__image img {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 600px;
    height: auto;

    display: block;

    object-fit: contain;

    animation: visionImageFloat 4s ease-in-out infinite;
}





/* =========================================
   VALUES SECTION
========================================= */

.valuse-section {
    position: relative;

    padding: 90px 0;

    background: #fff;

    overflow: hidden;

    font-family: "Jost", sans-serif;
}


/* =========================================
   LEFT CONTENT
========================================= */

.valuse-section__content {
    max-width: 540px;

    padding-right: 35px;
}


/* Small label */

.valuse-section__label {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 45px;

    color: #b5c94a;

    font-size: 16px;
    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 0.3px;
}

.valuse-section__label span {
    display: block;

    width: 43px;
    height: 6px;

    background: #b5c94a;
}


/* =========================================
   HEADING
========================================= */

.valuse-section__content h2 {
    margin: 0 0 38px;

    color: #24557f;

    font-size: 39px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.2px;
}

.valuse-section__content h2 strong {
    color: #b5c94a;

    font-weight: 700;
}


/* =========================================
   DESCRIPTION
========================================= */

.valuse-section__content p {
    max-width: 500px;

    margin: 0;

    color: #111;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.9;
}


/* =========================================
   RIGHT IMAGE AREA
========================================= */

.valuse-section__images {
    position: relative;

    width: 100%;

    min-height: 610px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    padding-left: 20px;
}


/* =========================================
   IMAGE
========================================= */

.valuse-section__image {
    position: relative;

    overflow: hidden;

    border-radius: 18px;

    box-shadow: 0 12px 30px rgba(36, 85, 127, 0.08);
}

.valuse-section__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}


/* Main image */

.valuse-section__image--main {
    width: 65%;
    height: 610px;
}


/* Laboratory image */

.valuse-section__image--lab {
    width: 34%;
    height: 610px;
}


/* Image hover */

.valuse-section__image:hover img {
    transform: scale(1.05);
}


/* =========================================
   IMAGE SHINE
========================================= */

.valuse-section__image::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.8s ease;

    pointer-events: none;
}

.valuse-section__image:hover::after {
    left: 140%;
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.valuse-section__content {
    opacity: 0;

    transform: translateX(-35px);

    animation: valueContentReveal 0.9s ease forwards;
}


.valuse-section__image--main {
    opacity: 0;

    transform: translateX(35px);

    animation: valueImageReveal 0.9s ease 0.2s forwards;
}


.valuse-section__image--lab {
    opacity: 0;

    transform: translateX(35px);

    animation: valueImageReveal 0.9s ease 0.4s forwards;
}


@keyframes valueContentReveal {

    from {
        opacity: 0;
        transform: translateX(-35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes valueImageReveal {

    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .valuse-section__content h2 {
        font-size: 34px;
    }

    .valuse-section__images {
        min-height: 520px;
    }

    .valuse-section__image--main,
    .valuse-section__image--lab {
        height: 520px;
    }

}


@media (max-width: 991px) {

    .valuse-section {
        padding: 70px 0;
    }

    .valuse-section__content {
        max-width: 700px;

        padding-right: 0;

        margin-bottom: 55px;
    }

    .valuse-section__images {
        min-height: 500px;

        padding-left: 0;
    }

    .valuse-section__image--main,
    .valuse-section__image--lab {
        height: 500px;
    }

}


@media (max-width: 575px) {

    .valuse-section {
        padding: 55px 0;
    }

    .valuse-section__label {
        gap: 12px;

        margin-bottom: 28px;

        font-size: 13px;
    }

    .valuse-section__label span {
        width: 30px;
        height: 4px;
    }

    .valuse-section__content h2 {
        font-size: 29px;

        margin-bottom: 25px;
    }

    .valuse-section__content p {
        font-size: 15px;

        line-height: 1.7;
    }

    .valuse-section__images {
        min-height: 400px;

        gap: 10px;
    }

    .valuse-section__image--main {
        width: 65%;
        height: 400px;
    }

    .valuse-section__image--lab {
        width: 35%;
        height: 400px;
    }

}



/* =========================================
   SECTION INSIGHTS
========================================= */

.section-insights {
    position: relative;

    margin: 85px 0 65px;

    background: #24557f;

    font-family: "Jost", sans-serif;

    overflow: visible;
}


/* =========================================
   CONTAINER
========================================= */

.section-insights .container {
    position: relative;
}


/* =========================================
   LEFT IMAGE
========================================= */

.section-insights__image {
    position: relative;

    width: 100%;

    height: 640px;

    margin-top: -50px;
    margin-bottom: -50px;

    overflow: hidden;

    z-index: 2;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.section-insights__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


/* Image hover */

.section-insights__image:hover img {
    transform: scale(1.04);
}


/* =========================================
   RIGHT CONTENT
========================================= */

.section-insights__content {
    position: relative;

    z-index: 3;

    margin-left: 45px;

    padding: 52px 50px 50px;

    background: #b8ca52;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.12);
}


/* Left decorative lines */

.section-insights__content::before {
    content: "";

    position: absolute;

    left: -18px;
    top: 0;

    width: 8px;
    height: 100%;

    background: #b8ca52;
}

.section-insights__content::after {
    content: "";

    position: absolute;

    left: -8px;
    top: 0;

    width: 2px;
    height: 100%;

    background: #24557f;
}


/* =========================================
   SMALL TITLE
========================================= */

.section-insights__small-title {
    display: block;

    margin-bottom: 32px;

    color: #fff;

    font-size: 19px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.2px;
}


/* =========================================
   HEADING
========================================= */

.section-insights__content h2 {
    margin: 0 0 28px;

    color: #fff;

    font-size: 39px;
    font-weight: 500;

    line-height: 1.45;
}


/* =========================================
   DESCRIPTION
========================================= */

.section-insights__content p {
    margin: 0;

    color: #111;

    font-size: 19px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================
   IMAGE REVEAL
========================================= */

.section-insights__image {
    opacity: 0;

    transform: translateX(-45px);

    animation: insightsImageReveal 0.9s ease forwards;
}


/* =========================================
   CONTENT REVEAL
========================================= */

.section-insights__content {
    opacity: 0;

    transform: translateX(45px);

    animation: insightsContentReveal 0.9s ease 0.25s forwards;
}


@keyframes insightsImageReveal {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes insightsContentReveal {

    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   SUBTLE CONTENT FLOAT
========================================= */

.section-insights__content:hover {
    transform: translateY(-5px);

    transition: transform 0.4s ease;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .section-insights__image {
        height: 570px;
    }

    .section-insights__content {
        margin-left: 25px;

        padding: 45px 40px;
    }

    .section-insights__content h2 {
        font-size: 33px;
    }

    .section-insights__content p {
        font-size: 17px;
    }

}


@media (max-width: 991px) {

    .section-insights {
        margin: 60px 0;
    }

    .section-insights__image {
        height: 500px;

        margin-top: -30px;
        margin-bottom: 0;
    }

    .section-insights__content {
        margin: 0;

        padding: 45px 35px;
    }

    .section-insights__content::before,
    .section-insights__content::after {
        display: none;
    }

}


@media (max-width: 575px) {

    .section-insights {
        margin: 45px 0;
    }

    .section-insights__image {
        height: 390px;

        margin-top: -20px;
    }

    .section-insights__content {
        padding: 35px 25px;
    }

    .section-insights__small-title {
        margin-bottom: 20px;

        font-size: 15px;
    }

    .section-insights__content h2 {
        font-size: 28px;

        line-height: 1.3;
    }

    .section-insights__content p {
        font-size: 15px;

        line-height: 1.6;
    }

}

/*counter*/

.our-counter {
    position: relative;

    padding: 75px 0 80px;

    background: #fff;

    overflow: hidden;

    font-family: "Jost", sans-serif;
}


/* =========================================
   COUNTER ITEM
========================================= */

.our-counter__item {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 0 20px;
}


/* Vertical separator */

.col-lg-3:not(:last-child) .our-counter__item::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

    background: #dfe4e9;
}


/* =========================================
   ICON
========================================= */

.our-counter__icon {
    position: relative;

    width: 140px;
    height: 140px;

    margin-bottom: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    animation: counterIconFloat 4s ease-in-out infinite;
}

.our-counter__icon--green {
    background: #f1f6dc;
}

.our-counter__icon--blue {
    background: #e9f0fc;
}

.our-counter__icon img {
    width: 75px;
    height: 75px;

    object-fit: contain;

    transition: transform 0.4s ease;
}


/* Icon hover */

.our-counter__item:hover .our-counter__icon img {
    transform: scale(1.12) rotate(4deg);
}


/* Soft ring */

.our-counter__icon::before {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    border: 1px solid rgba(36, 85, 127, 0.08);

    transition: transform 0.5s ease;
}

.our-counter__item:hover .our-counter__icon::before {
    transform: scale(1.08);
}


/* =========================================
   NUMBER
========================================= */

.our-counter__number {
    color: #164a83;

    font-size: 76px;
    font-weight: 500;

    line-height: 1;

    margin-bottom: 27px;

    letter-spacing: -2px;
}

.our-counter__number span {
    display: inline-block;
}


/* =========================================
   DESCRIPTION
========================================= */

.our-counter__item p {
    margin: 0;

    color: #1c3554;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.65;
}


/* =========================================
   BOTTOM LINE
========================================= */

.our-counter__line {
    display: block;

    width: 68px;
    height: 4px;

    margin-top: 32px;

    background: #79ad16;

    transition:
        width 0.4s ease,
        transform 0.4s ease;
}


/* Blue lines for even items */

.col-lg-3:nth-child(even) .our-counter__line {
    background: #2876d2;
}

.our-counter__item:hover .our-counter__line {
    width: 95px;

    transform: scaleY(1.2);
}


/* =========================================
   ANIMATIONS
========================================= */

.our-counter__item {
    opacity: 0;

    transform: translateY(30px);

    animation: counterReveal 0.8s ease forwards;
}

.col-lg-3:nth-child(1) .our-counter__item {
    animation-delay: 0.1s;
}

.col-lg-3:nth-child(2) .our-counter__item {
    animation-delay: 0.2s;
}

.col-lg-3:nth-child(3) .our-counter__item {
    animation-delay: 0.3s;
}

.col-lg-3:nth-child(4) .our-counter__item {
    animation-delay: 0.4s;
}


@keyframes counterReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes counterIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .our-counter {
        padding: 65px 0;
    }

    .our-counter__item {
        min-height: 350px;
    }

    .our-counter__icon {
        width: 120px;
        height: 120px;
    }

    .our-counter__icon img {
        width: 65px;
        height: 65px;
    }

    .our-counter__number {
        font-size: 60px;
    }

    .our-counter__item p {
        font-size: 17px;
    }

}


@media (max-width: 575px) {

    .our-counter {
        padding: 50px 0;
    }

    .our-counter__item {
        min-height: 320px;

        padding: 0 10px;
    }

    /* Remove vertical separator on mobile */

    .col-lg-3:not(:last-child) .our-counter__item::after {
        display: none;
    }

    .our-counter__icon {
        width: 95px;
        height: 95px;

        margin-bottom: 22px;
    }

    .our-counter__icon img {
        width: 52px;
        height: 52px;
    }

    .our-counter__number {
        font-size: 48px;

        margin-bottom: 18px;
    }

    .our-counter__item p {
        font-size: 15px;

        line-height: 1.45;
    }

    .our-counter__line {
        width: 50px;

        margin-top: 22px;
    }

}



/* =========================================
   VIDEO SECTION
========================================= */

.video-section {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    background-image: url("../images/video-section.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    font-family: "Jost", sans-serif;
}


/* =========================================
   DARK OVERLAY
========================================= */

.video-section__overlay {
    position: absolute;

    inset: 0;

    background: rgba(2, 18, 29, 0.72);

    z-index: 1;
}


/* =========================================
   CONTENT
========================================= */

.video-section .container {
    position: relative;

    z-index: 2;
}

.video-section__content {
    max-width: 850px;
}


/* =========================================
   HEADING
========================================= */

.video-section__content h2 {
    margin: 0 0 35px;

    line-height: 1;

    font-weight: 400;
}

.video-section__content h2 span {
    display: block;

    color: #fff;

    font-size: 58px;
    font-weight: 300;

    letter-spacing: 1px;
}

.video-section__content h2 strong {
    display: block;

    margin-top: 15px;

    color: #b8ca52;

    font-size: 70px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   DESCRIPTION
========================================= */

.video-section__content p {
    max-width: 650px;

    margin: 0;

    color: #fff;

    font-size: 22px;
    font-weight: 400;

    line-height: 1.8;
}


/* =========================================
   VIDEO BUTTON AREA
========================================= */

.video-section__button-wrap {
    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================
   VIDEO BUTTON
========================================= */

.video-section__button {
    position: relative;

    width: 180px;
    height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 3px solid #fff;

    border-radius: 50%;

    background: #b8ca52;

    color: #fff;

    cursor: pointer;

    box-shadow:
        0 0 0 4px rgba(184, 202, 82, 0.35),
        0 15px 35px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


/* Outer animated ring */

.video-section__button::before {
    content: "";

    position: absolute;

    inset: -12px;

    border: 2px solid rgba(184, 202, 82, 0.65);

    border-radius: 50%;

    animation: videoRing 2.5s ease-in-out infinite;
}


/* Second pulse */

.video-section__button::after {
    content: "";

    position: absolute;

    inset: -25px;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    animation: videoPulse 2.5s ease-in-out infinite;
}


/* Button text */

.video-section__button span {
    position: relative;

    z-index: 2;

    font-size: 29px;
    font-weight: 400;

    line-height: 1;
}

.video-section__button small {
    position: relative;

    z-index: 2;

    margin-top: 4px;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: 2px;
}


/* Hover */

.video-section__button:hover {
    transform: scale(1.08);

    background: #24557f;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes videoRing {

    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes videoPulse {

    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.12);
        opacity: 0;
    }

}


/* =========================================
   CONTENT ANIMATION
========================================= */

.video-section__content {
    animation: videoContentReveal 1s ease forwards;
}

.video-section__button-wrap {
    animation: videoButtonReveal 1s ease 0.3s both;
}


@keyframes videoContentReveal {

    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes videoButtonReveal {

    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   MODAL
========================================= */

.video-modal .modal-content {
    overflow: hidden;

    border: 0;

    border-radius: 12px;

    background: #000;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.video-modal .modal-header {
    min-height: 45px;

    padding: 8px 12px;

    border: 0;

    background: #000;
}

.video-modal .btn-close {
    filter: invert(1);

    opacity: 1;
}

.video-modal .modal-body {
    padding: 0;

    background: #000;
}

.video-modal iframe {
    border: 0;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .video-section {
        min-height: 580px;
    }

    .video-section__content h2 span {
        font-size: 48px;
    }

    .video-section__content h2 strong {
        font-size: 58px;
    }

    .video-section__button {
        width: 155px;
        height: 155px;
    }

}


@media (max-width: 991px) {

    .video-section {
        min-height: 650px;

        padding: 80px 0;
    }

    .video-section__content {
        text-align: center;

        margin: 0 auto 60px;
    }

    .video-section__content p {
        margin: auto;

        font-size: 18px;
    }

    .video-section__button-wrap {
        justify-content: center;
    }

}


@media (max-width: 575px) {

    .video-section {
        min-height: 600px;

        padding: 65px 0;
    }

    .video-section__content h2 span {
        font-size: 34px;
    }

    .video-section__content h2 strong {
        font-size: 42px;

        margin-top: 10px;
    }

    .video-section__content p {
        font-size: 16px;

        line-height: 1.6;
    }

    .video-section__button {
        width: 135px;
        height: 135px;
    }

    .video-section__button span {
        font-size: 23px;
    }

    .video-section__button small {
        font-size: 11px;
    }

}


/* =========================================
   TESTIMONIAL
========================================= */

.testimonial {
    position: relative;

    width: 100%;

    padding: 80px 0;

    overflow: hidden;

    background: #f4f8fc;
}


/* =========================================
   DECORATIVE QUOTE
========================================= */

.testimonial::after {
    content: "“";

    position: absolute;

    right: 18%;
    top: 45px;

    color: rgba(207, 225, 239, 0.45);

    font-family: Georgia, serif;

    font-size: 210px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================
   IMAGE
========================================= */

.testimonial__image {
    position: relative;

    width: 100%;

    display: flex;
    justify-content: center;

    padding: 0 10px;
}


/* Image frame */

.testimonial__image-frame {
    position: relative;

    width: 325px;
    height: 480px;

    padding: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 35px rgba(20, 55, 90, 0.06);
}


/* Doctor image */

.testimonial__image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* Decorative diagonal pattern */

.testimonial__image-frame::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -35px;
    bottom: -20px;

    z-index: -1;

    background-image: repeating-linear-gradient(
        -45deg,
        rgba(57, 158, 145, 0.25),
        rgba(57, 158, 145, 0.25) 1px,
        transparent 1px,
        transparent 6px
    );
}


/* =========================================
   CONTENT
========================================= */

.testimonial__content {
    position: relative;

    z-index: 2;

    padding-left: 25px;
}


/* =========================================
   EYEBROW
========================================= */

.testimonial__eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: #3c9d8f;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;
}

.testimonial__eyebrow::after {
    content: "";

    display: block;

    width: 65px;
    height: 2px;

    margin: 13px auto 0;

    background: #3c9d8f;
}


/* =========================================
   TITLE
========================================= */

.testimonial__content h2 {
    margin: 0;

    color: #103967;

    font-size: 32px;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================
   HEADING LINE
========================================= */

.testimonial__heading-line {
    display: flex;

    align-items: center;

    margin-top: 17px;
    margin-bottom: 22px;
}

.testimonial__heading-line span {
    display: block;

    width: 45px;
    height: 3px;

    background: #3c9d8f;
}

.testimonial__heading-line i {
    display: block;

    width: 5px;
    height: 5px;

    margin-left: 7px;

    border-radius: 50%;

    background: #3c9d8f;
}


/* =========================================
   QUOTE MARK
========================================= */

.testimonial__quote-mark {
    color: #3c9d8f;

    font-family: Georgia, serif;

    font-size: 90px;

    font-weight: 700;

    line-height: 0.6;

    height: 45px;

    margin-left: -3px;
}


/* =========================================
   TESTIMONIAL TEXT
========================================= */

.testimonial__text {
    max-width: 820px;

    margin: 5px 0 35px;

    color: #414b58;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.8;
}


/* =========================================
   AUTHOR
========================================= */

.testimonial__author {
    display: flex;

    align-items: center;

    padding-top: 28px;

    border-top: 1px solid #d8e0e7;

    max-width: 820px;
}


/* Author Icon */

.testimonial__author-icon {
    width: 80px;
    height: 80px;

    flex-shrink: 0;

    margin-right: 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #e5f3f1;
}

.testimonial__author-icon i {
    color: #3c9d8f;

    font-size: 35px;
}


/* =========================================
   AUTHOR INFORMATION
========================================= */

.testimonial__author-info h3 {
    margin: 0 0 5px;

    color: #103967;

    font-size: 21px;

    font-weight: 700;
}

.testimonial__author-info > span {
    display: block;

    color: #4c5663;

    font-size: 16px;
}


/* =========================================
   LOCATION
========================================= */

.testimonial__location {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 10px;
}

.testimonial__location i {
    color: #3c9d8f;

    font-size: 17px;
}

.testimonial__location span {
    color: #4d5661;

    font-size: 15px;
}


/* =========================================
   HOVER EFFECT
========================================= */

.testimonial__image-frame {
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.testimonial__image-frame:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(20, 55, 90, 0.12);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .testimonial {
        padding: 70px 0;
    }

    .testimonial__image-frame {
        width: 290px;
        height: 440px;
    }

    .testimonial__content {
        padding-left: 10px;
    }

    .testimonial__content h2 {
        font-size: 28px;
    }

    .testimonial__text {
        font-size: 17px;
    }

}


@media (max-width: 991px) {

    .testimonial {
        padding: 60px 0;
    }

    .testimonial__image {
        margin-bottom: 50px;
    }

    .testimonial__content {
        padding-left: 0;

        text-align: center;
    }

    .testimonial__eyebrow {
        margin-bottom: 15px;
    }

    .testimonial__heading-line {
        justify-content: center;
    }

    .testimonial__quote-mark {
        text-align: left;
    }

    .testimonial__text {
        margin-left: auto;
        margin-right: auto;
    }

    .testimonial__author {
        justify-content: center;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

}


@media (max-width: 767px) {

    .testimonial {
        padding: 50px 0;
    }

    .testimonial::after {
        right: 5%;
        top: 30px;

        font-size: 130px;
    }

    .testimonial__image-frame {
        width: 270px;
        height: 390px;

        padding: 15px;
    }

    .testimonial__content h2 {
        font-size: 25px;
    }

    .testimonial__text {
        font-size: 16px;

        line-height: 1.7;
    }

    .testimonial__quote-mark {
        font-size: 70px;
    }

}


@media (max-width: 480px) {

    .testimonial__image-frame {
        width: 240px;
        height: 350px;
    }

    .testimonial__eyebrow {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .testimonial__content h2 {
        font-size: 23px;
    }

    .testimonial__author-icon {
        width: 65px;
        height: 65px;

        margin-right: 15px;
    }

    .testimonial__author-icon i {
        font-size: 28px;
    }

    .testimonial__author-info h3 {
        font-size: 18px;
    }

    .testimonial__author-info > span {
        font-size: 14px;
    }

    .testimonial__location span {
        font-size: 13px;
    }

}


/* =========================================
   TESTIMONIAL CAROUSEL
========================================= */

.testimonial__content {
    position: relative;
    padding-left: 25px;
}


/* Make all slides consistent */

.testimonial__slide {
    position: relative;
    padding-bottom: 45px;
}


/* Remove Bootstrap default control appearance */

.testimonial__prev,
.testimonial__next {
    position: absolute;

    top: auto;
    bottom: 0;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    opacity: 1;

    background: #3c9d8f;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


/* Previous */

.testimonial__prev {
    left: auto;
    right: 55px;
}


/* Next */

.testimonial__next {
    right: 5px;
}


/* Hover */

.testimonial__prev:hover,
.testimonial__next:hover {
    background: #103967;

    transform: translateY(-2px);
}


/* Bootstrap arrows */

.testimonial__prev .carousel-control-prev-icon,
.testimonial__next .carousel-control-next-icon {
    width: 16px;
    height: 16px;

    background-size: 100% 100%;
}


/* =========================================
   INDICATORS
========================================= */

.testimonial__indicators {
    position: absolute;

    left: 0;
    right: auto;

    bottom: 5px;

    width: auto;

    margin: 0;

    justify-content: flex-start;

    gap: 6px;
}

.testimonial__indicators [data-bs-target] {
    width: 25px;
    height: 3px;

    margin: 0;

    border: 0;

    border-radius: 5px;

    background-color: #c8d7df;

    opacity: 1;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.testimonial__indicators .active {
    width: 40px;

    background: #3c9d8f;
}


/* =========================================
   AUTHOR IMAGE
========================================= */

.testimonial__author-icon {
    overflow: hidden; padding:15px;
}

.testimonial__author-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   CAROUSEL ANIMATION
========================================= */

.testimonial .carousel-item {
    transition:
        transform 0.7s ease-in-out,
        opacity 0.5s ease;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .testimonial__content {
        padding-left: 0;
    }

    .testimonial__prev {
        right: 55px;
    }

    .testimonial__next {
        right: 5px;
    }

    .testimonial__indicators {
        left: 50%;
        transform: translateX(-50%);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .testimonial__slide {
        padding-bottom: 55px;
    }

    .testimonial__prev,
    .testimonial__next {
        width: 34px;
        height: 34px;
    }

    .testimonial__prev {
        right: 48px;
    }

    .testimonial__next {
        right: 5px;
    }

    .testimonial__indicators {
        bottom: 10px;
    }

}

.testimonial h2 {
    margin: 0;

    color: #103967;

    font-size: 32px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.5px;

    text-align: center;
}




/* =========================================
   MEJOR PRODUCT
========================================= */

.mejor-product {
    position: relative;

    padding: 75px 0 80px;

    overflow: hidden;

    background: #020f24;
}


/* =========================================
   HEADING
========================================= */

.mejor-product__heading {
    text-align: center;

    margin-bottom: 55px;
}

.mejor-product__heading > span {
    display: block;

    margin-bottom: 22px;

    color: #c3d83c;

    font-size: 26px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1px;
}

.mejor-product__heading h2 {
    margin: 0 auto 20px;

    color: #ffffff;

    font-size: 50px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -1px;
}

.mejor-product__heading p {
    margin: 0 auto;

    color: rgba(255, 255, 255, 0.9);

    font-size: 20px;

    line-height: 1.65;

    font-weight: 400;
}


/* =========================================
   PRODUCT GRID
========================================= */

.mejor-product__grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px 22px;

    max-width: 1410px;

    margin: 0 auto;

    padding: 15px 30px;
}


/* =========================================
   PRODUCT ITEM
========================================= */

.mejor-product__item {
    position: relative;

    min-height: 120px;

    padding: 18px;

    display: flex;

    align-items: center;

    border: 1px solid rgba(55, 112, 161, 0.65);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 47, 78, 0.65),
            rgba(7, 26, 49, 0.75)
        );

    box-shadow:
        inset 0 0 25px rgba(25, 88, 145, 0.08);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.mejor-product__item:hover {
    transform: translateY(-5px);

    border-color: rgba(72, 224, 211, 0.8);

    background:
        linear-gradient(
            135deg,
            rgba(18, 61, 94, 0.8),
            rgba(7, 30, 55, 0.9)
        );
}


/* =========================================
   ICON
========================================= */

.mejor-product__icon {
    width: 82px;
    height: 82px;

    flex: 0 0 82px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(65, 213, 205, 0.5);

    background: rgba(5, 25, 47, 0.5);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.mejor-product__icon img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.mejor-product__item:hover .mejor-product__icon {
    transform: scale(1.05);

    border-color: #40d9cf;
}

.mejor-product__item:hover .mejor-product__icon img {
    transform: scale(1.08);
}


/* =========================================
   DIVIDER
========================================= */

.mejor-product__divider {
    width: 1px;
    height: 70px;

    margin: 0 20px;

    background: rgba(121, 163, 194, 0.4);

    flex-shrink: 0;
}


/* =========================================
   PRODUCT DETAILS
========================================= */

.mejor-product__details {
    min-width: 0;
}

.mejor-product__details .product-number {
    display: block;

    margin-bottom: 8px;

    color: #40d9cf;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}

.mejor-product__details h3 {
    margin: 0;

    color: #ffffff;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.25;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1399px) {

    .mejor-product__heading h2 {
        font-size: 44px;
    }

    .mejor-product__grid {
        padding-left: 15px;
        padding-right: 15px;

        gap: 15px;
    }

    .mejor-product__item {
        padding: 15px;
    }

    .mejor-product__icon {
        width: 72px;
        height: 72px;

        flex-basis: 72px;
    }

    .mejor-product__icon img {
        width: 43px;
        height: 43px;
    }

    .mejor-product__divider {
        margin-left: 14px;
        margin-right: 14px;
    }

    .mejor-product__details h3 {
        font-size: 17px;
    }
}


@media (max-width: 1199px) {

    .mejor-product {
        padding: 65px 0 70px;
    }

    .mejor-product__heading {
        margin-bottom: 45px;
    }

    .mejor-product__heading > span {
        font-size: 22px;
    }

    .mejor-product__heading h2 {
        font-size: 38px;
    }

    .mejor-product__heading p {
        font-size: 17px;
    }

    .mejor-product__grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 767px) {

    .mejor-product {
        padding: 55px 0 60px;
    }

    .mejor-product__heading {
        margin-bottom: 35px;
    }

    .mejor-product__heading > span {
        font-size: 18px;

        margin-bottom: 15px;
    }

    .mejor-product__heading h2 {
        font-size: 30px;

        line-height: 1.25;
    }

    .mejor-product__heading p {
        font-size: 15px;

        line-height: 1.6;
    }

    .mejor-product__heading p br {
        display: none;
    }

    .mejor-product__grid {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 0;
    }

    .mejor-product__item {
        min-height: 110px;
    }

}


@media (max-width: 480px) {

    .mejor-product__heading h2 {
        font-size: 26px;
    }

    .mejor-product__heading > span {
        font-size: 16px;
    }

    .mejor-product__item {
        padding: 14px;
    }

    .mejor-product__icon {
        width: 65px;
        height: 65px;

        flex-basis: 65px;
    }

    .mejor-product__icon img {
        width: 38px;
        height: 38px;
    }

    .mejor-product__divider {
        height: 58px;

        margin: 0 12px;
    }

    .mejor-product__details .product-number {
        font-size: 20px;
    }

    .mejor-product__details h3 {
        font-size: 16px;
    }

}

.mejor-product {
    font-family: "Jost", sans-serif;
}


/* =========================================
   MEJOR PRODUCT - PREMIUM ANIMATION
========================================= */

.mejor-product {
    overflow: hidden;
}


/* =========================================
   SECTION HEADING
========================================= */

.mejor-product__heading {
    opacity: 0;
    transform: translateY(35px);
    animation: mejor-heading 0.9s
        cubic-bezier(.22, 1, .36, 1)
        0.1s forwards;
}

.mejor-product__heading > span {
    display: inline-block;

    opacity: 0;
    transform: translateY(20px);

    animation: mejor-heading-small 0.7s ease
        0.25s forwards;
}

.mejor-product__heading h2 {
    opacity: 0;
    transform: translateY(25px);

    animation: mejor-heading-small 0.8s ease
        0.35s forwards;
}

.mejor-product__heading p {
    opacity: 0;
    transform: translateY(20px);

    animation: mejor-heading-small 0.8s ease
        0.5s forwards;
}


/* =========================================
   PRODUCT GRID
========================================= */

.mejor-product__grid {
    perspective: 1000px;
}


/* =========================================
   PRODUCT CARD
========================================= */

.mejor-product__item {
    position: relative;

    opacity: 0;

    transform:
        translateY(50px)
        scale(.94);

    animation:
        mejor-card-in 0.8s
        cubic-bezier(.22, 1, .36, 1)
        forwards;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* =========================================
   STAGGERED CARDS
========================================= */

.mejor-product__item:nth-child(1) {
    animation-delay: .55s;
}

.mejor-product__item:nth-child(2) {
    animation-delay: .65s;
}

.mejor-product__item:nth-child(3) {
    animation-delay: .75s;
}

.mejor-product__item:nth-child(4) {
    animation-delay: .85s;
}

.mejor-product__item:nth-child(5) {
    animation-delay: .95s;
}

.mejor-product__item:nth-child(6) {
    animation-delay: 1.05s;
}

.mejor-product__item:nth-child(7) {
    animation-delay: 1.15s;
}

.mejor-product__item:nth-child(8) {
    animation-delay: 1.25s;
}

.mejor-product__item:nth-child(9) {
    animation-delay: 1.35s;
}

.mejor-product__item:nth-child(10) {
    animation-delay: 1.45s;
}

.mejor-product__item:nth-child(11) {
    animation-delay: 1.55s;
}

.mejor-product__item:nth-child(12) {
    animation-delay: 1.65s;
}


/* =========================================
   CARD HOVER
========================================= */

.mejor-product__item:hover {
    transform: translateY(-8px) scale(1.015);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, .18);
}


/* =========================================
   ICON ANIMATION
========================================= */

.mejor-product__icon {
    position: relative;
    z-index: 2;
}

.mejor-product__icon img {
    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        filter .5s ease;
}


/* Hover icon */

.mejor-product__item:hover
.mejor-product__icon img {
    transform: scale(1.15) rotate(-4deg);

    filter:
        drop-shadow(0 0 8px rgba(65, 205, 190, .55));
}


/* =========================================
   ICON PULSE RING
========================================= */

.mejor-product__icon::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 75%;
    height: 75%;

    border: 1px solid rgba(65, 205, 190, .0);

    border-radius: 50%;

    transform: translate(-50%, -50%) scale(.7);

    transition:
        transform .6s ease,
        border-color .6s ease,
        opacity .6s ease;

    pointer-events: none;
}

.mejor-product__item:hover
.mejor-product__icon::before {

    border-color: rgba(65, 205, 190, .45);

    transform:
        translate(-50%, -50%)
        scale(1.25);

    opacity: 1;
}


/* =========================================
   NUMBER
========================================= */

.mejor-product .product-number {
    display: inline-block;

    transition:
        transform .4s ease,
        color .4s ease;
}

.mejor-product__item:hover
.product-number {

    transform: translateX(6px);

    color: #b8d93b;
}


/* =========================================
   TITLE
========================================= */

.mejor-product__details h3 {
    transition:
        transform .4s ease,
        color .4s ease;
}

.mejor-product__item:hover
.mejor-product__details h3 {

    transform: translateX(5px);

    color: #ffffff;
}


/* =========================================
   DIVIDER
========================================= */

.mejor-product__divider {
    position: relative;
    overflow: hidden;
}

.mejor-product__divider::after {
    content: "";

    position: absolute;

    left: -100%;
    top: 0;

    width: 100%;
    height: 100%;

    background: #b8d93b;

    transition: left .5s ease;
}

.mejor-product__item:hover
.mejor-product__divider::after {
    left: 0;
}


/* =========================================
   SHINE EFFECT
========================================= */

.mejor-product__item:hover::after {
    left: 150%;
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes mejor-heading {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes mejor-heading-small {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes mejor-card-in {

    0% {
        opacity: 0;

        transform:
            translateY(50px)
            scale(.94);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .mejor-product__item:nth-child(n) {
        animation-delay: .15s;
    }

    .mejor-product__item:hover {
        transform: translateY(-5px) scale(1.01);
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .mejor-product__heading,
    .mejor-product__heading > span,
    .mejor-product__heading h2,
    .mejor-product__heading p,
    .mejor-product__item {
        animation: none !important;

        opacity: 1;

        transform: none;
    }

    .mejor-product__item,
    .mejor-product__icon img,
    .mejor-product .product-number,
    .mejor-product__details h3 {
        transition: none;
    }

}









/* =========================================
   FOOTER TOP
========================================= */

.footer-top {
    position: relative;

    padding: 70px 0 105px;

    background: #f8f9fb;

    overflow: hidden;
}


/* =========================================
   GRID
========================================= */

.footer-top__grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    max-width: 1280px;

    margin: 0 auto;
}


/* =========================================
   CARD
========================================= */

.footer-top__item {
    position: relative;

    min-height: 545px;

    padding: 65px 35px 55px;

    background: #ffffff;

    border: 1px solid;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    overflow: hidden;

    opacity: 0;

    transform: translateY(35px);

    animation:
        footerTopCardIn .8s
        cubic-bezier(.22, 1, .36, 1)
        forwards;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease;
}


/* =========================================
   CARD COLORS
========================================= */

.footer-top__item--green {
    border-color: rgba(170, 204, 0, .45);
}

.footer-top__item--blue {
    border-color: rgba(13, 70, 119, .35);
}

.footer-top__item--teal {
    border-color: rgba(15, 132, 119, .4);
}


/* =========================================
   STAGGER
========================================= */

.footer-top__item:nth-child(1) {
    animation-delay: .15s;
}

.footer-top__item:nth-child(2) {
    animation-delay: .3s;
}

.footer-top__item:nth-child(3) {
    animation-delay: .45s;
}


/* =========================================
   TOP CORNER
========================================= */

.footer-top__corner {
    position: absolute;

    top: -1px;
    left: -1px;

    width: 92px;
    height: 8px;

    border-radius: 0 0 12px 0;
}


/* Green */

.footer-top__item--green .footer-top__corner {
    background: #a9c900;
}


/* Blue */

.footer-top__item--blue .footer-top__corner {
    background: #0b4779;
}


/* Teal */

.footer-top__item--teal .footer-top__corner {
    background: #087e72;
}


/* Small cut / rounded ending */

.footer-top__corner::after {
    content: "";

    position: absolute;

    right: -18px;
    top: 0;

    width: 25px;
    height: 8px;

    border-radius: 0 0 12px 0;

    background: inherit;
}


/* =========================================
   ICON
========================================= */

.footer-top__icon {
    width: 158px;
    height: 158px;

    margin-bottom: 40px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease;
}


/* Icon colors */

.footer-top__item--green .footer-top__icon {
    background: #a8c900;
}

.footer-top__item--blue .footer-top__icon {
    background: #0b4779;
}

.footer-top__item--teal .footer-top__icon {
    background: #087e72;
}


.footer-top__icon img {
    width: 105px;
    height: 105px;

    object-fit: contain;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================
   TITLE
========================================= */

.footer-top__item h3 {
    margin: 0;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 600;

    transition:
        transform .35s ease,
        color .35s ease;
}


/* Colors */

.footer-top__item--green h3 {
    color: #a2c400;
}

.footer-top__item--blue h3 {
    color: #0b4779;
}

.footer-top__item--teal h3 {
    color: #087e72;
}


/* =========================================
   SMALL LINE
========================================= */

.footer-top__line {
    width: 68px;
    height: 3px;


    margin: 25px 0 25px;

    transition:
        width .4s ease;
}


/* Colors */

.footer-top__item--green .footer-top__line {
    background: #a8c900;
}

.footer-top__item--blue .footer-top__line {
    background: #0b4779;
}

.footer-top__item--teal .footer-top__line {
    background: #087e72;
}


/* =========================================
   DESCRIPTION
========================================= */

.footer-top__item p {
    margin: 0;

    color: #273442;

    font-size: 20px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================
   BOTTOM BORDER
========================================= */

.footer-top__item::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 15px;
}


/* Green */

.footer-top__item--green::after {
    background: #a8c900;
}


/* Blue */

.footer-top__item--blue::after {
    background: #0b4779;
}


/* Teal */

.footer-top__item--teal::after {
    background: #087e72;
}


/* =========================================
   HOVER
========================================= */

.footer-top__item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 45px rgba(20, 45, 70, .10);
}


/* Icon hover */

.footer-top__item:hover .footer-top__icon {
    transform: translateY(-7px) scale(1.04);
}

.footer-top__item:hover .footer-top__icon img {
    transform: scale(1.08);
}


/* Heading hover */

.footer-top__item:hover h3 {
    transform: translateY(-2px);
}


/* Line animation */

.footer-top__item:hover .footer-top__line {
    width: 90px;
}


/* =========================================
   SUBTLE SHINE
========================================= */

.footer-top__item::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .5),
        transparent
    );

    transform: skewX(-20deg);

    pointer-events: none;

    transition: left .8s ease;
}

.footer-top__item:hover::before {
    left: 150%;
}


/* =========================================
   CARD ANIMATION
========================================= */

@keyframes footerTopCardIn {

    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .footer-top {
        padding: 60px 0 90px;
    }

    .footer-top__item {
        min-height: 500px;

        padding: 55px 25px 50px;
    }

    .footer-top__icon {
        width: 135px;
        height: 135px;

        margin-bottom: 32px;
    }

    .footer-top__icon img {
        width: 90px;
        height: 90px;
    }

    .footer-top__item h3 {
        font-size: 30px;
    }

    .footer-top__item p {
        font-size: 17px;
    }

}


@media (max-width: 991px) {

    .footer-top__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top__item {
        min-height: 470px;
    }

}


@media (max-width: 767px) {

    .footer-top {
        padding: 50px 0 70px;
    }

    .footer-top__grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .footer-top__item {
        min-height: 450px;

        padding: 55px 25px 50px;
    }

    .footer-top__item h3 {
        font-size: 29px;
    }

    .footer-top__item p {
        font-size: 16px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .footer-top__item {
        animation: none;

        opacity: 1;

        transform: none;
    }

    .footer-top__item,
    .footer-top__icon,
    .footer-top__icon img,
    .footer-top__line {
        transition: none;
    }

}


.footer-top {
    font-family: "Jost", sans-serif;
}

.footer-top__item h3 {
    font-family: "Jost", sans-serif;
    font-weight: 600;
}

.footer-top__item p {
    font-family: "Jost", sans-serif;
    font-weight: 400;
}



/* =========================================
   FOOTER
========================================= */

.footer {
    position: relative;

    background: #fafcff;

    font-family: "Jost", sans-serif;

    color: #202020;

    padding: 55px 0 0;

    overflow: hidden; border-top:3px solid rgb(238, 238, 238);
}


/* =========================================
   MAIN FOOTER
========================================= */

.footer__main {
    display: grid;

    grid-template-columns:
        1.55fr
        1fr
        1fr
        1.25fr;

    column-gap: 55px;

    min-height: 305px;
}


/* =========================================
   BRAND
========================================= */

.footer__brand {
    padding-left: 8px;
}

.footer__logo {
    display: inline-block;

    margin-bottom: 25px;
}

.footer__logo img {
    display: block;

    width: 205px;
    height: auto;
}

.footer__brand address {
    margin: 0;

    color: #171717;

    font-size: 16px;

    font-style: normal;

    line-height: 1.95;

    font-weight: 400;
}


/* =========================================
   FOOTER COLUMNS
========================================= */

.footer__column {
    padding-top: 8px;
}

.footer__column h3 {
    margin: 0;

    color: #171717;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 500;

    text-transform: uppercase;
}


/* =========================================
   TITLE LINE
========================================= */

.footer__title-line {
    width: 72px;

    height: 2px;

    margin-top: 16px;
    margin-bottom: 21px;

    background: #eeeeee;
}


/* =========================================
   QUICK LINKS
========================================= */

.footer__column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer__column ul li {
    margin-bottom: 8px;
}

.footer__column ul li a {
    display: inline-block;

    color: #171717;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 400;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

.footer__column ul li a:hover {
    color: #a5c800;

    transform: translateX(4px);
}


/* =========================================
   SOCIAL
========================================= */

.footer__social {
    display: flex;

    align-items: center;

    gap: 8px;
}

.footer__social a {
    width: 34px;
    height: 34px;

    border: 1px solid #b2ce22;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #a6c51c;

    font-size: 16px;

    text-decoration: none;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease,
        border-color .3s ease;
}

.footer__social a:hover {
    color: #ffffff;

    background: #a6c51c;

    border-color: #a6c51c;

    transform: translateY(-4px);
}


/* =========================================
   NEWSLETTER
========================================= */

.footer__newsletter p {
    margin: 0 0 20px;

    color: #555555;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================
   SUBSCRIBE
========================================= */

.footer__subscribe {
    display: flex;

    width: 100%;

    max-width: 293px;

    height: 56px;

    margin: 0;

    padding: 0;
}

.footer__subscribe input {
    width: calc(100% - 56px);

    min-width: 0;

    border: 0;

    outline: none;

    background: #eeeeee;

    padding: 0 15px;

    color: #333333;

    font-family: "Jost", sans-serif;

    font-size: 15px;
}

.footer__subscribe button {
    width: 56px;

    flex: 0 0 56px;

    border: 0;

    background: #000000;

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}

.footer__subscribe button:hover {
    background: #a6c51c;
}


/* =========================================
   BOTTOM
========================================= */

.footer__bottom {
    border-top: 1px solid #dddddd;

    padding: 14px 0 17px;
}

.footer__bottom p {
    margin: 0;

    color: #171717;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;
}

.footer__bottom a {
    color: #171717;

    text-decoration: none;

    transition: color .3s ease;
}

.footer__bottom a:hover {
    color: #a6c51c;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .footer__main {
        column-gap: 30px;
    }

    .footer__logo img {
        width: 190px;
    }

}


@media (max-width: 991px) {

    .footer {
        padding-top: 50px;
    }

    .footer__main {
        grid-template-columns: 1fr 1fr;

        row-gap: 45px;

        min-height: auto;
    }

    .footer__brand {
        grid-column: span 2;
    }

    .footer__bottom {
        margin-top: 45px;
    }

}


@media (max-width: 767px) {

    .footer__main {
        grid-template-columns: 1fr;

        row-gap: 35px;
    }

    .footer__brand {
        grid-column: auto;
    }

    .footer__logo img {
        width: 185px;
    }

    .footer__newsletter {
        margin-bottom: 10px;
    }

    .footer__bottom p {
        font-size: 14px;
    }

}









/* =========================================
   HEALTH BADGE - ADVANCED GLOW
========================================= */

.health-badge {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            #285c82 0%,
            #19476c 45%,
            #123b5d 100%
        );

    border: 8px solid #ffffff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    box-sizing: border-box;

    left: 55%;
    top: 30%;

    z-index: 20;

    /* Main glow */
    box-shadow:
        0 0 10px rgba(182, 206, 69, .18),
        0 0 30px rgba(182, 206, 69, .12),
        inset 0 0 25px rgba(255, 255, 255, .08);

    animation:
        badgeBreathing 2.8s ease-in-out infinite;
}


/* =========================================
   ROTATING OUTER RING
========================================= */

.health-badge::before {

    content: "";

    position: absolute;

    inset: -13px;

    border-radius: 50%;

    border: 2px dashed rgba(182, 206, 69, .65);

    animation:
        badgeRotate 10s linear infinite;

    pointer-events: none;
}


/* =========================================
   EXPANDING GLOW RING
========================================= */

.health-badge::after {

    content: "";

    position: absolute;

    inset: -22px;

    border-radius: 50%;

    border: 1px solid rgba(182, 206, 69, .35);

    box-shadow:
        0 0 15px rgba(182, 206, 69, .15);

    animation:
        badgePulseRing 2.5s ease-out infinite;

    pointer-events: none;
}


/* =========================================
   INNER LIGHT
========================================= */

.health-badge__icon {

    position: relative;

    z-index: 3;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182, 206, 69, .30),
            rgba(182, 206, 69, 0) 70%
        );

    animation:
        iconAura 2.5s ease-in-out infinite;
}


/* =========================================
   CAPSULE
========================================= */

.health-badge__icon img {

    width: 52px;
    height: 52px;

    object-fit: contain;

    display: block;

    border-radius: 0;

    background: transparent;

    filter:
        drop-shadow(0 0 5px rgba(182, 206, 69, .25));

    animation:
        capsuleMotion 3s ease-in-out infinite;

    transition:
        filter .4s ease;
}


/* =========================================
   TEXT
========================================= */

.health-badge__text {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    line-height: 1.2;

    animation:
        badgeTextBrightness 3s ease-in-out infinite;
}


.health-badge__text span {

    color: #ffffff;

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 3px;

    text-shadow:
        0 0 5px rgba(255,255,255,.15);
}


.health-badge__text strong {

    color: #b6ce45;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.15;

    text-shadow:
        0 0 5px rgba(182,206,69,.25);

    transition:
        text-shadow .4s ease,
        transform .4s ease;
}


/* =========================================
   HOVER
========================================= */

.health-badge:hover {

    animation:
        badgeHoverGlow 1.5s ease-in-out infinite;
}


.health-badge:hover .health-badge__icon img {

    filter:
        drop-shadow(0 0 12px rgba(182, 206, 69, .9));

    transform:
        scale(1.15)
        rotate(8deg);
}


.health-badge:hover .health-badge__text strong {

    text-shadow:
        0 0 8px rgba(182,206,69,.7),
        0 0 18px rgba(182,206,69,.35);

    transform: scale(1.04);
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes badgeBreathing {

    0%,
    100% {

        box-shadow:
            0 0 8px rgba(182,206,69,.15),
            0 0 25px rgba(182,206,69,.08),
            inset 0 0 20px rgba(255,255,255,.05);

    }

    50% {

        box-shadow:
            0 0 18px rgba(182,206,69,.35),
            0 0 45px rgba(182,206,69,.20),
            0 0 70px rgba(182,206,69,.08),
            inset 0 0 30px rgba(255,255,255,.09);

    }

}


@keyframes badgeRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes badgePulseRing {

    0% {

        opacity: .7;

        transform: scale(.92);

    }

    70% {

        opacity: 0;

        transform: scale(1.25);

    }

    100% {

        opacity: 0;

        transform: scale(1.25);

    }

}


@keyframes iconAura {

    0%,
    100% {

        transform: scale(.95);

        box-shadow:
            0 0 0 rgba(182,206,69,0);

    }

    50% {

        transform: scale(1.08);

        box-shadow:
            0 0 18px rgba(182,206,69,.22);

    }

}


@keyframes capsuleMotion {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    25% {

        transform:
            translateY(-4px)
            rotate(-3deg);

    }

    50% {

        transform:
            translateY(-7px)
            rotate(0deg);

    }

    75% {

        transform:
            translateY(-3px)
            rotate(3deg);

    }

}


@keyframes badgeTextBrightness {

    0%,
    100% {

        filter: brightness(1);

    }

    50% {

        filter: brightness(1.15);

    }

}


@keyframes badgeHoverGlow {

    0%,
    100% {

        box-shadow:
            0 0 15px rgba(182,206,69,.30),
            0 0 35px rgba(182,206,69,.15),
            inset 0 0 25px rgba(255,255,255,.07);

    }

    50% {

        box-shadow:
            0 0 25px rgba(182,206,69,.65),
            0 0 60px rgba(182,206,69,.35),
            0 0 90px rgba(182,206,69,.12),
            inset 0 0 35px rgba(255,255,255,.12);

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .health-badge {

        width: 145px;
        height: 145px;

        border-width: 6px;

    }

    .health-badge::before {
        inset: -10px;
    }

    .health-badge::after {
        inset: -17px;
    }

    .health-badge__icon {

        width: 48px;
        height: 48px;

    }

    .health-badge__icon img {

        width: 40px;
        height: 40px;

    }
	

    .health-badge__text span {
        font-size: 13px;
    }

    .health-badge__text strong {
        font-size: 15px;
    }

}



/*innerpages*/


/* =========================================
   INNER PAGE BANNER
========================================= */

.inner-banner {
    position: relative;

    min-height: 430px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #19476c;

    font-family: "Jost", sans-serif;
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.inner-banner__bg {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

.inner-banner__bg img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    animation: innerBannerZoom 8s ease-out forwards;
}


/* =========================================
   OVERLAY
========================================= */

.inner-banner__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16, 55, 82, 0.94) 0%,
            rgba(25, 71, 108, 0.82) 45%,
            rgba(25, 71, 108, 0.40) 100%
        );
}


/* =========================================
   CONTENT
========================================= */

.inner-banner__content {
    position: relative;

    z-index: 2;

    max-width: 700px;

    padding: 70px 0;
}


/* =========================================
   EYEBROW
========================================= */

.inner-banner__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    opacity: 0;

    transform: translateY(25px);

    animation:
        innerBannerFadeUp 0.8s
        ease forwards;

    animation-delay: 0.2s;
}

.inner-banner__eyebrow span {
    width: 35px;
    height: 2px;

    background: #b6ce45;
}

.inner-banner__eyebrow strong {
    color: #b6ce45;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 3px;
}


/* =========================================
   TITLE
========================================= */

.inner-banner__content h1 {
    margin: 0;

    color: #ffffff;

    font-size: 64px;

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -1px;

    opacity: 0;

    transform: translateX(-45px);

    animation:
        innerBannerTitle 0.9s
        cubic-bezier(.22, 1, .36, 1)
        forwards;

    animation-delay: 0.4s;
}

.inner-banner__content h1 span {
    color: #b6ce45;
}


/* =========================================
   DECORATIVE LINE
========================================= */

.inner-banner__line {
    position: relative;

    width: 80px;
    height: 3px;

    margin: 22px 0;

    background: #b6ce45;

    overflow: hidden;

    opacity: 0;

    animation:
        innerBannerLine 0.7s
        ease forwards;

    animation-delay: 0.8s;
}

.inner-banner__line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: #ffffff;

    animation:
        innerBannerLineShine 2s
        ease-in-out infinite;

    animation-delay: 1.5s;
}


/* =========================================
   BREADCRUMB
========================================= */

.inner-banner__breadcrumb {
    display: flex;

    align-items: center;

    gap: 10px;

    opacity: 0;

    transform: translateY(20px);

    animation:
        innerBannerFadeUp 0.8s
        ease forwards;

    animation-delay: 1s;
}

.inner-banner__breadcrumb a {
    color: rgba(255,255,255,.75);

    font-size: 15px;

    text-decoration: none;

    transition: color .3s ease;
}

.inner-banner__breadcrumb a:hover {
    color: #b6ce45;
}

.inner-banner__breadcrumb i {
    color: #b6ce45;

    font-size: 10px;
}

.inner-banner__breadcrumb span {
    color: #ffffff;

    font-size: 15px;

    font-weight: 500;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes innerBannerZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }

}


@keyframes innerBannerFadeUp {

    from {
        opacity: 0;

        transform: translateY(25px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes innerBannerTitle {

    from {
        opacity: 0;

        transform: translateX(-45px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}


@keyframes innerBannerLine {

    from {
        opacity: 0;

        width: 0;
    }

    to {
        opacity: 1;

        width: 80px;
    }

}


@keyframes innerBannerLineShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .inner-banner {
        min-height: 380px;
    }

    .inner-banner__content h1 {
        font-size: 52px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .inner-banner {
        min-height: 330px;
    }

    .inner-banner__content {
        padding: 55px 0;
    }

    .inner-banner__content h1 {
        font-size: 42px;
    }

    .inner-banner__eyebrow strong {
        font-size: 12px;

        letter-spacing: 2px;
    }

    .inner-banner__eyebrow span {
        width: 25px;
    }

    .inner-banner__breadcrumb a,
    .inner-banner__breadcrumb span {
        font-size: 14px;
    }

}



/* =========================================
   VISION / MISSION / VALUES
========================================= */

.vmv-section {
    position: relative;

    padding: 100px 0;

    background: #f7f9fb;

    overflow: hidden;

    font-family: "Jost", sans-serif;
}


/* Decorative background */

.vmv-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: 80px;

    border: 1px solid rgba(182, 206, 69, .18);

    border-radius: 50%;

    pointer-events: none;
}

.vmv-section::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -150px;
    bottom: 80px;

    border: 1px solid rgba(25, 71, 108, .10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   SECTION HEADING
========================================= */

.vmv-heading {
    position: relative;

    max-width: 780px;

    margin: 0 auto 60px;

    text-align: center;

    z-index: 2;
}

.vmv-heading__eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #19476c;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 3px;
}

.vmv-heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 600;
}

.vmv-heading h2 span {
    color: #b6ce45;
}

.vmv-heading__line {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 20px auto;
}

.vmv-heading__line span {
    width: 48px;
    height: 3px;

    background: #b6ce45;
}

.vmv-heading__line i {
    width: 6px;
    height: 6px;

    display: block;

    background: #19476c;

    border-radius: 50%;
}

.vmv-heading p {
    margin: 0;

    color: #56607d;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   VISION / MISSION BOX
========================================= */

.vmv-main {
    position: relative;

    z-index: 2;

    margin-bottom: 70px;
}

.vmv-box {
    position: relative;

    height: 100%;

    min-height: 280px;

    padding: 40px;

    display: flex;

    align-items: flex-start;

    gap: 25px;

    background: #ffffff;

    border: 1px solid rgba(25, 71, 108, .10);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 12px 35px rgba(25, 71, 108, .06);

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease;
}


/* Top accent */

.vmv-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #b6ce45;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .5s ease;
}

.vmv-box:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(25, 71, 108, .12);
}

.vmv-box:hover::before {
    transform: scaleX(1);
}


/* =========================================
   BOX ICON
========================================= */

.vmv-box__icon {
    position: relative;

    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border-radius: 50%;

    font-size: 27px;

    transition:
        transform .5s ease,
        background .4s ease;
}

.vmv-box:hover .vmv-box__icon {
    background: #b6ce45;

    transform:
        rotate(-8deg)
        scale(1.08);
}


/* Outer ring */

.vmv-box__icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid rgba(182, 206, 69, .35);

    border-radius: 50%;

    transition: transform .5s ease;
}

.vmv-box:hover .vmv-box__icon::before {
    transform: rotate(45deg);
}


/* =========================================
   BOX CONTENT
========================================= */

.vmv-box__content {
    position: relative;

    flex: 1;
}

.vmv-box__number {
    position: absolute;

    top: -10px;
    right: 0;

    color: rgba(25, 71, 108, .07);

    font-size: 55px;

    line-height: 1;

    font-weight: 600;
}

.vmv-box h3 {
    position: relative;

    margin: 0 0 12px;

    color: #19476c;

    font-size: 28px;

    font-weight: 500;
}

.vmv-box h3 strong {
    color: #789a20;

    font-weight: 600;
}

.vmv-box__line {
    width: 45px;
    height: 3px;

    margin-bottom: 18px;

    background: #b6ce45;

    transition: width .5s ease;
}

.vmv-box:hover .vmv-box__line {
    width: 75px;
}

.vmv-box p {
    margin: 0;

    color: #56607d;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   VALUES HEADING
========================================= */

.vmv-values {
    position: relative;

    z-index: 2;
}

.vmv-values__heading {
    margin-bottom: 30px;

    text-align: center;
}

.vmv-values__heading span {
    display: block;

    margin-bottom: 8px;

    color: #19476c;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;
}

.vmv-values__heading h3 {
    margin: 0;

    color: #19476c;

    font-size: 34px;

    font-weight: 500;
}

.vmv-values__heading h3 strong {
    color: #b6ce45;

    font-weight: 600;
}


/* =========================================
   VALUE CARDS
========================================= */

.vmv-value {
    position: relative;

    height: 100%;

    min-height: 245px;

    padding: 30px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px solid rgba(25, 71, 108, .09);

    border-radius: 8px;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease;
}

.vmv-value::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #b6ce45;

    transform: translateX(-50%);

    transition: width .4s ease;
}

.vmv-value:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 40px rgba(25, 71, 108, .10);
}

.vmv-value:hover::after {
    width: 70%;
}


/* =========================================
   VALUE ICON
========================================= */

.vmv-value__icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    background: rgba(182, 206, 69, .12);

    border: 1px solid rgba(182, 206, 69, .25);

    border-radius: 50%;

    font-size: 24px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.vmv-value:hover .vmv-value__icon {
    color: #ffffff;

    background: #19476c;

    transform: rotateY(180deg);
}


/* =========================================
   VALUE NUMBER
========================================= */

.vmv-value__number {
    position: absolute;

    right: 15px;
    top: 12px;

    color: rgba(25, 71, 108, .08);

    font-size: 25px;

    font-weight: 600;
}


/* =========================================
   VALUE CONTENT
========================================= */

.vmv-value h4 {
    margin: 0 0 10px;

    color: #19476c;

    font-size: 20px;

    font-weight: 600;
}

.vmv-value p {
    margin: 0;

    color: #56607d;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .vmv-section {
        padding: 80px 0;
    }

    .vmv-heading h2 {
        font-size: 36px;
    }

    .vmv-box {
        padding: 32px;
    }

}


@media (max-width: 767px) {

    .vmv-section {
        padding: 60px 0;
    }

    .vmv-heading {
        margin-bottom: 40px;
    }

    .vmv-heading h2 {
        font-size: 30px;
    }

    .vmv-heading p {
        font-size: 15px;
    }

    .vmv-box {
        min-height: auto;

        padding: 28px 22px;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    .vmv-box__content {
        width: 100%;
    }

    .vmv-box__line {
        margin-left: auto;
        margin-right: auto;
    }

    .vmv-box:hover .vmv-box__line {
        width: 65px;
    }

    .vmv-box h3 {
        font-size: 25px;
    }

    .vmv-values__heading h3 {
        font-size: 29px;
    }

}



/*contact*/

/* =========================================
   CONTACT INFORMATION
========================================= */

.contact-info {
    position: relative;

    padding: 100px 0;

    background: #f7f9fb;

    font-family: "Jost", sans-serif;

    overflow: hidden;
}


/* =========================================
   BACKGROUND DECORATION
========================================= */

.contact-info::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -200px;
    right: -160px;

    border: 1px solid rgba(182, 206, 69, .20);

    border-radius: 50%;

    pointer-events: none;
}

.contact-info::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -170px;
    left: -130px;

    border: 1px solid rgba(25, 71, 108, .10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   HEADING
========================================= */

.contact-info__heading {
    position: relative;

    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;

    z-index: 2;
}

.contact-info__heading > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #19476c;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;
}

.contact-info__heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 500;
}

.contact-info__heading h2 strong {
    color: #789a20;

    font-weight: 600;
}


/* Heading line */

.contact-info__line {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 18px auto;
}

.contact-info__line span {
    width: 50px;
    height: 3px;

    background: #b6ce45;
}

.contact-info__line i {
    width: 6px;
    height: 6px;

    display: block;

    background: #19476c;

    border-radius: 50%;
}

.contact-info__heading p {
    margin: 0;

    color: #56607d;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   CONTACT CARD
========================================= */

.contact-card {
    position: relative;

    height: 100%;

    min-height: 280px;

    padding: 40px 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid rgba(25, 71, 108, .08);

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(25, 71, 108, .05);

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease;
}


/* Top gold line */

.contact-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 4px;

    background: #b6ce45;

    transform: translateX(-50%);

    transition: width .5s ease;
}

.contact-card:hover::before {
    width: 100%;
}


/* Decorative number */

.contact-card__number {
    position: absolute;

    right: 15px;
    top: 8px;

    color: rgba(25, 71, 108, .05);

    font-size: 65px;

    font-weight: 600;

    line-height: 1;
}


/* =========================================
   ICON
========================================= */

.contact-card__icon {
    position: relative;

    width: 72px;
    height: 72px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border-radius: 50%;

    font-size: 25px;

    transition:
        transform .5s ease,
        background .4s ease;
}


/* Outer circle */

.contact-card__icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid rgba(182, 206, 69, .30);

    border-radius: 50%;

    transition: transform .5s ease;
}

.contact-card:hover .contact-card__icon {
    background: #b6ce45;

    transform: translateY(-5px) rotate(-6deg);
}

.contact-card:hover .contact-card__icon::before {
    transform: rotate(45deg);
}


/* =========================================
   CONTENT
========================================= */

.contact-card__content {
    position: relative;

    z-index: 2;
}

.contact-card__content > span {
    display: block;

    margin-bottom: 5px;

    color: #b6ce45;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;
}

.contact-card__content h3 {
    margin: 0 0 12px;

    color: #19476c;

    font-size: 24px;

    font-weight: 600;
}

.contact-card__content p {
    margin: 0;

    color: #56607d;

    font-size: 15px;

    line-height: 1.8;
}


/* Links */

.contact-card__content a {
    display: inline-block;

    margin-bottom: 12px;

    color: #21548d;

    font-size: 17px;

    font-weight: 500;

    text-decoration: none;

    transition: color .3s ease;
}

.contact-card__content a:hover {
    color: #789a20;
}

.contact-card__content small {
    display: block;

    color: #56607d;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================
   CARD HOVER
========================================= */

.contact-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 22px 50px rgba(25, 71, 108, .11);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .contact-info {
        padding: 80px 0;
    }

    .contact-info__heading h2 {
        font-size: 36px;
    }

}


@media (max-width: 767px) {

    .contact-info {
        padding: 60px 0;
    }

    .contact-info__heading {
        margin-bottom: 40px;
    }

    .contact-info__heading h2 {
        font-size: 30px;
    }

    .contact-info__heading p {
        font-size: 15px;
    }

    .contact-card {
        min-height: 260px;

        padding: 35px 25px;
    }

}


/* =========================================
   CONTACT FORM SECTION
========================================= */

.contact-form-section {
    position: relative;

    padding: 100px 0;

    background: #ffffff;

    font-family: "Jost", sans-serif;

    overflow: hidden;
}


/* =========================================
   MAIN WRAPPER
========================================= */

.contact-form-wrap {
    position: relative;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(25, 71, 108, .12);
}


/* =========================================
   LEFT INTRO PANEL
========================================= */

.contact-form__intro {
    position: relative;

    height: 100%;

    min-height: 600px;

    padding: 60px 45px;

    background:
        linear-gradient(
            145deg,
            #19476c 0%,
            #123b5d 100%
        );

    overflow: hidden;
}


/* Decorative circle */

.contact-form__intro::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    bottom: -140px;

    border: 1px solid rgba(182, 206, 69, .25);

    border-radius: 50%;
}

.contact-form__intro::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -120px;
    bottom: -90px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 50%;
}


/* =========================================
   INTRO CONTENT
========================================= */

.contact-form__eyebrow {
    position: relative;

    z-index: 2;

    display: inline-block;

    margin-bottom: 15px;

    color: #b6ce45;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;
}

.contact-form__intro h2 {
    position: relative;

    z-index: 2;

    max-width: 400px;

    margin: 0;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 500;
}

.contact-form__intro h2 strong {
    color: #b6ce45;

    font-weight: 600;
}


/* =========================================
   INTRO LINE
========================================= */

.contact-form__line {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 22px 0;
}

.contact-form__line span {
    width: 55px;
    height: 3px;

    background: #b6ce45;
}

.contact-form__line i {
    width: 6px;
    height: 6px;

    display: block;

    background: #ffffff;

    border-radius: 50%;
}


/* =========================================
   INTRO TEXT
========================================= */

.contact-form__intro > p {
    position: relative;

    z-index: 2;

    max-width: 440px;

    margin: 0 0 40px;

    color: rgba(255,255,255,.78);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   QUICK CONTACT
========================================= */

.contact-form__quick {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.contact-form__quick-item {
    display: flex;

    align-items: center;

    gap: 15px;
}

.contact-form__quick-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #b6ce45;

    border: 1px solid rgba(182,206,69,.35);

    border-radius: 50%;

    font-size: 16px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.contact-form__quick-item:hover .contact-form__quick-icon {
    color: #19476c;

    background: #b6ce45;

    transform: scale(1.08);
}

.contact-form__quick-item span {
    display: block;

    margin-bottom: 2px;

    color: rgba(255,255,255,.55);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;
}

.contact-form__quick-item a {
    color: #ffffff;

    font-size: 16px;

    text-decoration: none;

    transition: color .3s ease;
}

.contact-form__quick-item a:hover {
    color: #b6ce45;
}


/* =========================================
   FORM BOX
========================================= */

.contact-form__box {
    height: 100%;

    min-height: 600px;

    padding: 60px 50px;

    background: #ffffff;
}


/* =========================================
   FORM HEADING
========================================= */

.contact-form__box-heading {
    margin-bottom: 35px;
}

.contact-form__box-heading > span {
    display: block;

    margin-bottom: 7px;

    color: #789a20;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;
}

.contact-form__box-heading h3 {
    margin: 0;

    color: #19476c;

    font-size: 30px;

    line-height: 1.25;

    font-weight: 500;
}

.contact-form__box-heading h3 strong {
    color: #789a20;

    font-weight: 600;
}


/* =========================================
   FORM FIELD
========================================= */

.contact-field {
    position: relative;
}

.contact-field input,
.contact-field textarea {
    width: 100%;

    padding: 18px 48px 10px 16px;

    color: #19476c;

    background: #f7f9fb;

    border: 1px solid #e1e6eb;

    border-radius: 5px;

    outline: none;

    font-family: "Jost", sans-serif;

    font-size: 15px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.contact-field input {
    height: 60px;
}

.contact-field textarea {
    min-height: 145px;

    resize: vertical;

    padding-top: 22px;
}


/* =========================================
   LABEL
========================================= */

.contact-field label {
    position: absolute;

    left: 16px;
    top: 19px;

    color: #56607d;

    font-size: 14px;

    pointer-events: none;

    transition:
        top .25s ease,
        font-size .25s ease,
        color .25s ease,
        background .25s ease;
}


/* Floating label */

.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label {
    top: -8px;

    padding: 0 6px;

    color: #789a20;

    background: #ffffff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .3px;
}


/* =========================================
   FIELD ICON
========================================= */

.contact-field > i {
    position: absolute;

    right: 17px;
    top: 21px;

    color: #9ba7b5;

    font-size: 15px;

    pointer-events: none;

    transition: color .3s ease;
}

.contact-field--textarea > i {
    top: 23px;
}

.contact-field input:focus ~ i,
.contact-field textarea:focus ~ i {
    color: #789a20;
}


/* =========================================
   FIELD FOCUS
========================================= */

.contact-field input:focus,
.contact-field textarea:focus {
    background: #ffffff;

    border-color: #b6ce45;

    box-shadow:
        0 0 0 3px rgba(182,206,69,.10);
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-form__submit {
    position: relative;

    min-width: 180px;

    padding: 15px 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    color: #ffffff;

    background: #19476c;

    border: 0;

    border-radius: 4px;

    font-family: "Jost", sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .5px;

    overflow: hidden;

    cursor: pointer;

    transition:
        background .35s ease,
        transform .35s ease;
}

.contact-form__submit::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    transition: left .6s ease;
}

.contact-form__submit:hover::before {
    left: 130%;
}

.contact-form__submit:hover {
    background: #789a20;

    transform: translateY(-3px);
}

.contact-form__submit i {
    transition: transform .3s ease;
}

.contact-form__submit:hover i {
    transform: translateX(5px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .contact-form-section {
        padding: 80px 0;
    }

    .contact-form__intro,
    .contact-form__box {
        min-height: auto;
    }

    .contact-form__intro {
        padding: 50px 40px;
    }

    .contact-form__box {
        padding: 50px 40px;
    }

}


@media (max-width: 767px) {

    .contact-form-section {
        padding: 60px 0;
    }

    .contact-form__intro {
        padding: 45px 25px;
    }

    .contact-form__box {
        padding: 40px 25px;
    }

    .contact-form__intro h2 {
        font-size: 32px;
    }

    .contact-form__box-heading h3 {
        font-size: 26px;
    }

    .contact-form__quick {
        gap: 16px;
    }

}


/* =========================================
   GOOGLE MAP
========================================= */

.contact-map {
    position: relative;

    padding: 90px 0 0;

    background: #f7f9fb;

    font-family: "Jost", sans-serif;

    overflow: hidden;
}


/* =========================================
   HEADING
========================================= */

.contact-map__heading {
    position: relative;

    z-index: 5;

    margin: 0 auto 45px;

    text-align: center;
}

.contact-map__heading > span {
    display: block;

    margin-bottom: 8px;

    color: #789a20;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;
}

.contact-map__heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 500;
}

.contact-map__heading h2 strong {
    color: #789a20;

    font-weight: 600;
}


/* =========================================
   HEADING LINE
========================================= */

.contact-map__line {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 18px;
}

.contact-map__line span {
    width: 50px;
    height: 3px;

    background: #b6ce45;
}

.contact-map__line i {
    width: 6px;
    height: 6px;

    display: block;

    background: #19476c;

    border-radius: 50%;
}


/* =========================================
   MAP WRAPPER
========================================= */

.contact-map__wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* =========================================
   MAP
========================================= */

.contact-map__frame {
    width: 100%;

    height: 500px;

    position: relative;
}

.contact-map__frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        saturate(.75)
        contrast(.95);

    transition: filter .5s ease;
}

.contact-map__wrapper:hover
.contact-map__frame iframe {
    filter:
        saturate(1)
        contrast(1);
}


/* =========================================
   LOCATION CARD
========================================= */

.contact-map__card {
    position: absolute;

    left: 8%;

    top: 50%;

    width: 360px;

    padding: 35px;

    display: flex;

    gap: 20px;

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(25,71,108,.08);

    border-radius: 10px;

    box-shadow:
        0 20px 60px rgba(25,71,108,.18);

    transform: translateY(-50%);

    backdrop-filter: blur(8px);

    animation: mapCardFloat 4s ease-in-out infinite;
}


/* =========================================
   CARD ICON
========================================= */

.contact-map__card-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border-radius: 50%;

    font-size: 20px;

    box-shadow:
        0 0 0 7px rgba(182,206,69,.15);

    transition:
        background .35s ease,
        transform .35s ease;
}

.contact-map__card:hover
.contact-map__card-icon {
    background: #789a20;

    transform: translateY(-4px);
}


/* =========================================
   CARD CONTENT
========================================= */

.contact-map__card-content {
    flex: 1;
}

.contact-map__card-content > span {
    display: block;

    margin-bottom: 5px;

    color: #789a20;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;
}

.contact-map__card-content h3 {
    margin: 0 0 10px;

    color: #19476c;

    font-size: 25px;

    font-weight: 600;
}

.contact-map__card-content p {
    margin: 0 0 20px;

    color: #56607d;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   DIRECTIONS BUTTON
========================================= */

.contact-map__card-content a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #19476c;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .3s ease,
        gap .3s ease;
}

.contact-map__card-content a:hover {
    color: #789a20;

    gap: 15px;
}

.contact-map__card-content a i {
    font-size: 12px;
}


/* =========================================
   FLOATING ANIMATION
========================================= */

@keyframes mapCardFloat {

    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 7px));
    }

    100% {
        transform: translateY(-50%);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .contact-map {
        padding-top: 75px;
    }

    .contact-map__heading h2 {
        font-size: 35px;
    }

    .contact-map__frame {
        height: 450px;
    }

    .contact-map__card {
        left: 5%;

        width: 340px;
    }

}


@media (max-width: 767px) {

    .contact-map {
        padding-top: 60px;
    }

    .contact-map__heading {
        margin-bottom: 35px;
    }

    .contact-map__heading h2 {
        font-size: 30px;
    }

    .contact-map__frame {
        height: 400px;
    }

    .contact-map__card {
        position: relative;

        left: auto;
        top: auto;

        width: calc(100% - 30px);

        margin: -80px auto 30px;

        transform: none;

        animation: none;

        z-index: 3;
    }

    .contact-map__wrapper {
        overflow: visible;
    }

}

/* =========================================
   SOCIAL MEDIA
========================================= */

.contact-form__social-links {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 7px;
}

.contact-form__social-links a {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(182,206,69,.30);

    border-radius: 50%;

    font-size: 13px;

    text-decoration: none;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.contact-form__social-links a:hover {
    color: #19476c !important;

    background: #b6ce45;

    border-color: #b6ce45;

    transform: translateY(-4px);
}











/* =========================================
   GMP PAGE
========================================= */

.gmp-page {
    position: relative;

    padding: 100px 0;

    background: #ffffff;

    font-family: "Jost", sans-serif;

    color: #56607d;

    overflow: hidden;
}


/* =========================================
   COMMON HEADING
========================================= */

.gmp-eyebrow,
.gmp-section__heading > span,
.gmp-aim__content > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #789a20;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;
}

.gmp-title-line {
    display: flex;

    align-items: center;

    gap: 7px;

    margin: 20px 0;
}

.gmp-title-line span {
    width: 50px;
    height: 3px;

    background: #b6ce45;
}

.gmp-title-line i {
    width: 6px;
    height: 6px;

    display: block;

    background: #19476c;

    border-radius: 50%;
}


/* =========================================
   INTRO
========================================= */

.gmp-intro {
    padding-bottom: 90px;

    margin-bottom: 90px;

    border-bottom: 1px solid #e9edf1;
}

.gmp-intro__image {
    position: relative;

    overflow: visible;
}

.gmp-intro__image img {
    width: 100%;

    display: block;

    border-radius: 8px;

    box-shadow:
        0 20px 50px rgba(25,71,108,.12);

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        box-shadow .6s ease;
}

.gmp-intro__image:hover img {
    transform: translateY(-8px);

    box-shadow:
        0 30px 60px rgba(25,71,108,.18);
}


/* Image badge */

.gmp-intro__image-badge {
    position: absolute;

    right: -25px;
    bottom: -25px;

    width: 105px;
    height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border: 6px solid #ffffff;

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(25,71,108,.18);

    animation: gmpBadgeFloat 4s ease-in-out infinite;
}

.gmp-intro__image-badge strong {
    font-size: 23px;

    line-height: 1;
}

.gmp-intro__image-badge span {
    color: #b6ce45;

    font-size: 20px;

    font-weight: 600;
}


@keyframes gmpBadgeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* Intro content */

.gmp-intro__content h2 {
    max-width: 650px;

    margin: 0;

    color: #19476c;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 500;
}

.gmp-intro__content h2 strong {
    color: #789a20;

    font-weight: 600;
}

.gmp-intro__content p {
    max-width: 680px;

    margin: 0 0 18px;

    font-size: 15px;

    line-height: 1.85;
}

.gmp-quote {
    padding-top: 15px;

    color: #19476c;

    font-size: 16px !important;

    font-weight: 500;

    font-style: italic;
}


/* =========================================
   SECTION HEADING
========================================= */

.gmp-section__heading {
    max-width: 800px;

    margin-bottom: 45px;
}

.gmp-section__heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 36px;

    line-height: 1.25;

    font-weight: 500;
}

.gmp-section__heading h2 strong {
    color: #789a20;

    font-weight: 600;
}


/* =========================================
   MANUFACTURING TEXT
========================================= */

.gmp-section {
    margin-bottom: 90px;
}

.gmp-text {
    padding-left: 30px;

    border-left: 3px solid #b6ce45;
}

.gmp-text p {
    margin-bottom: 20px;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================
   CONTENT CARDS
========================================= */

.gmp-content-card {
    position: relative;

    display: flex;

    gap: 30px;

    margin-bottom: 25px;

    padding: 40px;

    background: #f7f9fb;

    border: 1px solid #e8edf1;

    border-radius: 10px;

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.gmp-content-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(25,71,108,.09);
}

.gmp-content-card__number {
    position: absolute;

    right: 25px;
    top: 5px;

    color: rgba(25,71,108,.04);

    font-size: 100px;

    font-weight: 600;

    line-height: 1;
}

.gmp-content-card__icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border-radius: 50%;

    font-size: 23px;

    box-shadow:
        0 0 0 7px rgba(182,206,69,.14);

    transition:
        transform .4s ease,
        background .4s ease;
}

.gmp-content-card:hover .gmp-content-card__icon {
    background: #789a20;

    transform: rotate(-8deg) scale(1.05);
}

.gmp-content-card__content {
    position: relative;

    z-index: 2;
}

.gmp-content-card__content > span {
    color: #789a20;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;
}

.gmp-content-card__content h3 {
    margin: 5px 0 15px;

    color: #19476c;

    font-size: 28px;

    font-weight: 600;
}

.gmp-content-card__content p {
    margin-bottom: 15px;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   QUALITY GRID
========================================= */

.gmp-quality-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin: 45px 0 90px;
}

.gmp-quality-item {
    padding: 30px;

    background: #ffffff;

    border: 1px solid #e5eaee;

    border-radius: 8px;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.gmp-quality-item:hover {
    transform: translateY(-7px);

    border-color: #b6ce45;

    box-shadow:
        0 15px 35px rgba(25,71,108,.08);
}

.gmp-quality-item__icon {
    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border-radius: 50%;
}

.gmp-quality-item h4 {
    margin: 0 0 10px;

    color: #19476c;

    font-size: 20px;
}

.gmp-quality-item p {
    margin: 0;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   OUR AIM
========================================= */

.gmp-aim {
    position: relative;

    margin-bottom: 90px;

    padding: 70px 80px;

    background:
        linear-gradient(
            135deg,
            #19476c,
            #123b5d
        );

    border-radius: 12px;

    overflow: hidden;
}

.gmp-aim::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    top: -150px;

    border: 1px solid rgba(182,206,69,.25);

    border-radius: 50%;
}

.gmp-aim__content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}

.gmp-aim__content > span {
    color: #b6ce45;
}

.gmp-aim__content h2 {
    margin: 0;

    color: #ffffff;

    font-size: 38px;

    font-weight: 500;
}

.gmp-aim__content h2 strong {
    color: #b6ce45;
}

.gmp-aim .gmp-title-line {
    margin-bottom: 25px;
}

.gmp-aim__content p {
    color: rgba(255,255,255,.78);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================
   CERTIFICATIONS
========================================= */

.gmp-certifications {
    padding-bottom: 30px;
}

.gmp-certification-list {
    margin: 0;

    padding: 0;

    list-style: none;
}

.gmp-certification-list li {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 12px;

    padding: 12px 15px;

    color: #56607d;

    background: #f7f9fb;

    border: 1px solid transparent;

    border-radius: 5px;

    font-size: 14px;

    line-height: 1.5;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.gmp-certification-list li:hover {
    color: #19476c;

    background: #ffffff;

    border-color: #dfe7ec;

    transform: translateX(5px);
}

.gmp-certification-list li i {
    flex: 0 0 auto;

    margin-top: 3px;

    color: #789a20;

    font-size: 12px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .gmp-page {
        padding: 80px 0;
    }

    .gmp-intro {
        padding-bottom: 70px;

        margin-bottom: 70px;
    }

    .gmp-intro__content h2 {
        font-size: 35px;
    }

    .gmp-quality-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gmp-aim {
        padding: 55px 45px;
    }

}


@media (max-width: 767px) {

    .gmp-page {
        padding: 60px 0;
    }

    .gmp-intro {
        padding-bottom: 60px;

        margin-bottom: 60px;
    }

    .gmp-intro__content h2 {
        font-size: 30px;
    }

    .gmp-intro__image-badge {
        right: 15px;
        bottom: -20px;

        width: 90px;
        height: 90px;
    }

    .gmp-section__heading h2 {
        font-size: 29px;
    }

    .gmp-text {
        padding-left: 20px;
    }

    .gmp-content-card {
        flex-direction: column;

        padding: 30px 25px;

        gap: 20px;
    }

    .gmp-content-card__content h3 {
        font-size: 24px;
    }

    .gmp-quality-grid {
        grid-template-columns: 1fr;

        margin-bottom: 60px;
    }

    .gmp-aim {
        margin-bottom: 60px;

        padding: 45px 25px;
    }

    .gmp-aim__content h2 {
        font-size: 30px;
    }

}





/* =========================================
   BLOG LISTING
========================================= */

.blog-listing {
    position: relative;

    padding: 100px 0;

    background: #ffffff;

    font-family: "Jost", sans-serif;

    overflow: hidden;
}


/* =========================================
   HEADING
========================================= */

.blog-listing__heading {
    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}

.blog-listing__eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: #789a20;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;
}

.blog-listing__heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 500;
}

.blog-listing__heading h2 strong {
    color: #789a20;

    font-weight: 600;
}

.blog-listing__line {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 20px 0;
}

.blog-listing__line span {
    width: 50px;
    height: 3px;

    background: #b6ce45;
}

.blog-listing__line i {
    width: 6px;
    height: 6px;

    background: #19476c;

    border-radius: 50%;
}

.blog-listing__heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #56607d;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   FEATURED BLOG
========================================= */

.blog-featured {
    margin-bottom: 70px;

    background: #f5f8fa;

    border: 1px solid #e5ebef;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 15px 45px rgba(25,71,108,.06);

    animation: blogFadeUp .8s ease both;
}

.blog-featured__image {
    position: relative;

    height: 100%;

    min-height: 400px;

    overflow: hidden;
}

.blog-featured__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1);
}

.blog-featured:hover .blog-featured__image img {
    transform: scale(1.06);
}

.blog-featured__category,
.blog-card__category {
    position: absolute;

    left: 20px;
    top: 20px;

    padding: 7px 13px;

    color: #ffffff;

    background: #19476c;

    border-radius: 3px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;
}

.blog-featured__content {
    height: 100%;

    padding: 55px 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.blog-meta {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 18px;

    color: #789a20;

    font-size: 12px;

    font-weight: 500;
}

.blog-meta span {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}

.blog-meta i {
    font-size: 12px;
}

.blog-featured__content h3 {
    margin: 0 0 18px;

    color: #19476c;

    font-size: 32px;

    line-height: 1.25;

    font-weight: 600;
}

.blog-featured__content p {
    max-width: 600px;

    margin: 0 0 28px;

    color: #56607d;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   READ MORE
========================================= */

.blog-read-more {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color: #19476c;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-decoration: none;

    transition:
        color .3s ease,
        gap .3s ease;
}

.blog-read-more i {
    color: #789a20;

    transition: transform .3s ease;
}

.blog-read-more:hover {
    color: #789a20;

    gap: 16px;
}

.blog-read-more:hover i {
    transform: translateX(3px);
}


/* =========================================
   BLOG GRID
========================================= */

.blog-listing__grid {
    position: relative;
}


/* =========================================
   BLOG CARD
========================================= */

.blog-card {
    height: 100%;

    background: #ffffff;

    border: 1px solid #e5ebef;

    border-radius: 9px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(25,71,108,.04);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.blog-card:hover {
    transform: translateY(-9px);

    border-color: rgba(120,154,32,.35);

    box-shadow:
        0 20px 45px rgba(25,71,108,.11);
}


/* Image */

.blog-card__image {
    position: relative;

    height: 230px;

    overflow: hidden;

    background: #eef3f5;
}

.blog-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.08);
}


/* Category */

.blog-card__category {
    top: auto;
    bottom: 15px;
    left: 15px;

    background: #789a20;
}


/* Card content */

.blog-card__content {
    padding: 28px 28px 30px;
}

.blog-card__content .blog-meta {
    margin-bottom: 12px;
}

.blog-card__content h3 {
    min-height: 58px;

    margin: 0 0 13px;

    color: #19476c;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 600;

    transition: color .3s ease;
}

.blog-card:hover .blog-card__content h3 {
    color: #789a20;
}

.blog-card__content p {
    margin: 0 0 20px;

    color: #56607d;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   PAGINATION
========================================= */

.blog-pagination {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 60px;
}

.blog-pagination a {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    border: 1px solid #dfe6ea;

    border-radius: 50%;

    font-size: 13px;

    text-decoration: none;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.blog-pagination a:hover,
.blog-pagination a.active {
    color: #ffffff;

    background: #19476c;

    border-color: #19476c;

    transform: translateY(-3px);
}

.blog-pagination a.next {
    color: #789a20;

    border-color: #b6ce45;
}

.blog-pagination a.next:hover {
    color: #ffffff;

    background: #789a20;

    border-color: #789a20;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes blogFadeUp {

    from {
        opacity: 0;

        transform: translateY(30px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .blog-listing {
        padding: 80px 0;
    }

    .blog-listing__heading h2 {
        font-size: 36px;
    }

    .blog-featured__content {
        padding: 40px;
    }

    .blog-featured__content h3 {
        font-size: 28px;
    }

}


@media (max-width: 767px) {

    .blog-listing {
        padding: 60px 0;
    }

    .blog-listing__heading {
        margin-bottom: 40px;
    }

    .blog-listing__heading h2 {
        font-size: 30px;
    }

    .blog-featured {
        margin-bottom: 50px;
    }

    .blog-featured__image {
        min-height: 280px;
    }

    .blog-featured__content {
        padding: 30px 25px;
    }

    .blog-featured__content h3 {
        font-size: 25px;
    }

    .blog-card__image {
        height: 220px;
    }

}


/* =========================================================
   RENEX PHARMA - BLOG LISTING
   Jost Font
   Theme: #19476c / #789a20 / #b6ce45
========================================================= */

.blog-listing {
    position: relative;
    padding: 110px 0 100px;
    background: #fff;
    font-family: "Jost", sans-serif;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.blog-listing::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -250px;
    top: 180px;
    border: 1px solid rgba(120, 154, 32, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.blog-listing::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -170px;
    bottom: 100px;
    border: 1px solid rgba(25, 71, 108, 0.08);
    border-radius: 50%;
    pointer-events: none;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.blog-listing__heading {
    position: relative;
    z-index: 2;

    max-width: 780px;
    margin: 0 auto 65px;

    text-align: center;
}

.blog-listing__eyebrow {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 13px;

    color: #789a20;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
}

.blog-listing__eyebrow::before,
.blog-listing__eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #b6ce45;
}

.blog-listing__heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 44px;
    line-height: 1.18;
    font-weight: 500;
}

.blog-listing__heading h2 strong {
    color: #789a20;
    font-weight: 600;
}

.blog-listing__line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    margin: 22px 0 18px;
}

.blog-listing__line span {
    width: 48px;
    height: 3px;

    background: #b6ce45;

    border-radius: 10px;
}

.blog-listing__line i {
    width: 6px;
    height: 6px;

    display: block;

    background: #19476c;

    border-radius: 50%;
}

.blog-listing__heading p {
    max-width: 650px;
    margin: auto;

    color: #56607d;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.blog-featured {
    position: relative;
    z-index: 2;

    margin-bottom: 75px;

    background: #f7f9fb;

    border: 1px solid #e5ebef;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 15px 50px rgba(25, 71, 108, 0.07);

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease;
}

.blog-featured:hover {
    transform: translateY(-6px);

    box-shadow:
        0 25px 65px rgba(25, 71, 108, 0.12);
}


/* Featured image */

.blog-featured__image {
    position: relative;

    height: 100%;
    min-height: 430px;

    overflow: hidden;
}

.blog-featured__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(25, 71, 108, .12),
            transparent 55%
        );

    pointer-events: none;
}

.blog-featured__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.blog-featured:hover .blog-featured__image img {
    transform: scale(1.07);
}


/* Featured category */

.blog-featured__category {
    position: absolute;
    z-index: 3;

    left: 25px;
    top: 25px;

    padding: 9px 15px;

    color: #fff;

    background: #19476c;

    border-radius: 4px;


    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;

    box-shadow: 0 8px 20px rgba(25, 71, 108, .2);

    transition:
        background .3s ease,
        transform .3s ease;
}

.blog-featured:hover .blog-featured__category {
    background: #789a20;
    transform: translateY(-3px);
}


/* Featured content */

.blog-featured__content {
    position: relative;

    height: 100%;

    padding: 55px 55px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured__content::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15%;

    width: 3px;
    height: 70%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #b6ce45,
            transparent
        );
}


/* Meta */

.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 18px;

    color: #789a20;

    font-size: 12px;
    font-weight: 500;
}

.blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.blog-meta i {
    font-size: 12px;
}


/* Featured title */

.blog-featured__content h3 {
    max-width: 620px;

    margin: 0 0 18px;

    color: #19476c;

    font-size: 34px;
    line-height: 1.25;
    font-weight: 600;

    transition: color .3s ease;
}

.blog-featured:hover .blog-featured__content h3 {
    color: #789a20;
}


/* Featured paragraph */

.blog-featured__content p {
    max-width: 600px;

    margin: 0 0 30px;

    color: #56607d;

    font-size: 15px;
    line-height: 1.85;
}


/* =========================================================
   READ MORE BUTTON
========================================================= */

.blog-read-more {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

    padding-bottom: 6px;

    color: #19476c;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;

    text-decoration: none;

    transition:
        color .3s ease,
        gap .35s ease;
}

.blog-read-more::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #b6ce45;

    transition: width .4s ease;
}

.blog-read-more i {
    color: #789a20;

    transition:
        transform .35s ease;
}

.blog-read-more:hover {
    color: #789a20;
    gap: 17px;
}

.blog-read-more:hover::after {
    width: 100%;
}

.blog-read-more:hover i {
    transform: translateX(4px);
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-listing__grid {
    position: relative;
    z-index: 2;
}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
    position: relative;

    height: 100%;

    display: flex;
    flex-direction: column;

    background: #fff;

    border: 1px solid #e5ebef;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 7px 25px rgba(25, 71, 108, .04);

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        box-shadow .55s ease,
        border-color .4s ease;
}

.blog-card::before {
    content: "";

    position: absolute;
    z-index: 5;

    left: 0;
    top: 0;

    width: 0;
    height: 3px;

    background: #b6ce45;

    transition: width .5s ease;
}

.blog-card:hover::before {
    width: 100%;
}

.blog-card:hover {
    transform: translateY(-10px);

    border-color: rgba(120, 154, 32, .25);

    box-shadow:
        0 22px 50px rgba(25, 71, 108, .11);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.blog-card__image {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: #eef3f6;
}

.blog-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(25, 71, 108, .12)
        );

    opacity: 0;

    transition: opacity .5s ease;
}

.blog-card:hover .blog-card__image::after {
    opacity: 1;
}

.blog-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        filter .5s ease;
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.09);

    filter: saturate(1.05);
}


/* =========================================================
   CARD CATEGORY
========================================================= */

.blog-card__category {
    position: absolute;
    z-index: 3;

    left: 18px;
    bottom: 18px;

    padding: 8px 13px;

    color: #fff;

    background: #789a20;

    border-radius: 4px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .12);

    transition:
        transform .35s ease,
        background .35s ease;
}

.blog-card:hover .blog-card__category {
    transform: translateY(-4px);

    background: #19476c;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.blog-card__content {
    position: relative;

    flex: 1;

    padding: 27px 28px 30px;

    display: flex;
    flex-direction: column;
}

.blog-card__content .blog-meta {
    margin-bottom: 12px;
}

.blog-card__content h3 {
    min-height: 57px;

    margin: 0 0 13px;

    color: #19476c;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;

    transition: color .3s ease;
}

.blog-card:hover .blog-card__content h3 {
    color: #789a20;
}

.blog-card__content p {
    margin: 0 0 23px;

    color: #56607d;

    font-size: 14px;
    line-height: 1.75;
}

.blog-card__content .blog-read-more {
    margin-top: auto;
}


/* =========================================================
   CARD NUMBER - SUBTLE DECORATION
========================================================= */

.blog-card:nth-child(1)::after,
.blog-card:nth-child(2)::after,
.blog-card:nth-child(3)::after,
.blog-card:nth-child(4)::after,
.blog-card:nth-child(5)::after,
.blog-card:nth-child(6)::after {
    position: absolute;

    right: 15px;
    bottom: 8px;

    color: rgba(25, 71, 108, .035);

    font-size: 70px;
    font-weight: 600;

    line-height: 1;

    pointer-events: none;
}



/* =========================================================
   PAGINATION
========================================================= */

.blog-pagination {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 65px;
}

.blog-pagination a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #19476c;

    background: #fff;

    border: 1px solid #dfe7ec;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 500;

    text-decoration: none;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.blog-pagination a:hover,
.blog-pagination a.active {
    color: #fff;

    background: #19476c;

    border-color: #19476c;

    transform: translateY(-4px);
}

.blog-pagination a.next {
    color: #789a20;

    border-color: #b6ce45;
}

.blog-pagination a.next:hover {
    color: #fff;

    background: #789a20;

    border-color: #789a20;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.blog-card {
    animation: blogCardReveal .8s cubic-bezier(.22, 1, .36, 1) both;
}

.blog-card:nth-child(1) {
    animation-delay: .05s;
}

.blog-card:nth-child(2) {
    animation-delay: .12s;
}

.blog-card:nth-child(3) {
    animation-delay: .19s;
}

.blog-card:nth-child(4) {
    animation-delay: .26s;
}

.blog-card:nth-child(5) {
    animation-delay: .33s;
}

.blog-card:nth-child(6) {
    animation-delay: .40s;
}

@keyframes blogCardReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   FEATURED REVEAL
========================================================= */

.blog-featured {
    animation: featuredReveal 1s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes featuredReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .blog-listing {
        padding: 85px 0;
    }

    .blog-listing__heading h2 {
        font-size: 37px;
    }

    .blog-featured__image {
        min-height: 350px;
    }

    .blog-featured__content {
        padding: 45px;
    }

    .blog-featured__content h3 {
        font-size: 29px;
    }

}


@media (max-width: 767px) {

    .blog-listing {
        padding: 65px 0;
    }

    .blog-listing__heading {
        margin-bottom: 45px;
    }

    .blog-listing__heading h2 {
        font-size: 30px;
    }

    .blog-listing__heading p {
        font-size: 14px;
    }

    .blog-featured {
        border-radius: 10px;
    }

    .blog-featured__image {
        min-height: 270px;
    }

    .blog-featured__content {
        padding: 32px 25px;
    }

    .blog-featured__content::before {
        display: none;
    }

    .blog-featured__content h3 {
        font-size: 25px;
    }

    .blog-card__image {
        height: 220px;
    }

    .blog-card__content {
        padding: 25px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blog-card,
    .blog-featured {
        animation: none;
    }

    .blog-card,
    .blog-card img,
    .blog-featured,
    .blog-featured img,
    .blog-read-more,
    .blog-pagination a {
        transition: none;
    }

}





/* =========================================================
   RENEX PHARMA
   BLOG DETAIL PAGE
   Font: Jost
========================================================= */

.blog-detail {
    position: relative;

    padding: 100px 0;

    background: #ffffff;

    font-family: "Jost", sans-serif;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.blog-detail::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -260px;
    top: 160px;

    border: 1px solid rgba(120, 154, 32, 0.08);

    border-radius: 50%;

    pointer-events: none;
}

.blog-detail::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -180px;
    bottom: 100px;

    border: 1px solid rgba(25, 71, 108, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   ARTICLE
========================================================= */

.blog-detail__article {
    position: relative;
    z-index: 2;

    animation: blogDetailFade .8s ease both;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.blog-detail__image {
    position: relative;

    width: 100%;

    height: 470px;

    overflow: hidden;

    border-radius: 14px;

    background: #edf2f5;

    box-shadow:
        0 18px 50px rgba(25, 71, 108, 0.08);
}

.blog-detail__image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(25, 71, 108, .08),
            transparent 60%
        );

    pointer-events: none;
}

.blog-detail__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.blog-detail__image:hover img {
    transform: scale(1.04);
}


/* =========================================================
   META
========================================================= */

.blog-detail__meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 28px;

    margin-bottom: 17px;

    color: #789a20;

    font-size: 12px;

    font-weight: 500;
}

.blog-detail__meta span {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}

.blog-detail__meta i {
    font-size: 12px;
}


/* =========================================================
   TITLE
========================================================= */

.blog-detail__title {
    max-width: 850px;

    margin: 0 0 25px;

    color: #19476c;

    font-size: 44px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -0.4px;
}


/* =========================================================
   INTRO
========================================================= */

.blog-detail__intro {
    position: relative;

    margin-bottom: 35px;

    padding: 22px 25px 22px 28px;

    color: #56607d;

    background: #f6f9f8;

    border-left: 4px solid #b6ce45;

    border-radius: 0 8px 8px 0;

    font-size: 17px;

    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.blog-detail__content {
    color: #56607d;

    font-size: 15px;

    line-height: 1.9;
}

.blog-detail__content p {
    margin: 0 0 22px;
}

.blog-detail__content h2 {
    position: relative;

    margin: 42px 0 17px;

    padding-left: 17px;

    color: #19476c;

    font-size: 27px;

    line-height: 1.3;

    font-weight: 600;
}

.blog-detail__content h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 4px;
    height: 26px;

    background: #789a20;

    border-radius: 5px;
}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.blog-detail__highlight {
    display: flex;

    align-items: center;

    gap: 20px;

    margin: 35px 0;

    padding: 25px 28px;

    background:
        linear-gradient(
            135deg,
            #f5f9f8,
            #f9fbfc
        );

    border: 1px solid #e2ebeb;

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(25, 71, 108, 0.04);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.blog-detail__highlight:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(25, 71, 108, 0.08);
}

.blog-detail__highlight-icon {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #19476c;

    border-radius: 50%;

    font-size: 21px;

    box-shadow:
        0 0 0 7px rgba(182, 206, 69, .14);
}

.blog-detail__highlight strong {
    display: block;

    margin-bottom: 4px;

    color: #19476c;

    font-size: 17px;

    font-weight: 600;
}

.blog-detail__highlight p {
    margin: 0;

    color: #56607d;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   CONTENT IMAGE
========================================================= */

.blog-detail__content-image {
    margin: 38px 0;

    overflow: hidden;

    border-radius: 10px;

    background: #f2f5f6;
}

.blog-detail__content-image img {
    width: 100%;

    display: block;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.blog-detail__content-image:hover img {
    transform: scale(1.025);
}

.blog-detail__content-image figcaption {
    padding: 12px 16px;

    color: #56607d;

    background: #f6f8f9;

    font-size: 12px;

    font-style: italic;

    text-align: center;
}


/* =========================================================
   ARTICLE FOOTER
========================================================= */

.blog-detail__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 45px;

    padding-top: 25px;

    border-top: 1px solid #e4e9ec;
}


/* =========================================================
   TAGS
========================================================= */

.blog-detail__tags {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}

.blog-detail__tags > span {
    margin-right: 5px;

    color: #19476c;

    font-size: 13px;

    font-weight: 600;
}

.blog-detail__tags a {
    padding: 6px 11px;

    color: #56607d;

    background: #f3f6f7;

    border: 1px solid #e5eaed;

    border-radius: 4px;

    font-size: 11px;

    text-decoration: none;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.blog-detail__tags a:hover {
    color: #ffffff;

    background: #789a20;

    border-color: #789a20;
}


/* =========================================================
   SHARE
========================================================= */

.blog-detail__share {
    display: flex;

    align-items: center;

    gap: 8px;
}

.blog-detail__share > span {
    margin-right: 5px;

    color: #19476c;

    font-size: 13px;

    font-weight: 600;
}

.blog-detail__share a {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    background: #f5f8f9;

    border: 1px solid #dfe7ea;

    border-radius: 50%;

    font-size: 12px;


    text-decoration: none;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.blog-detail__share a:hover {
    color: #ffffff;

    background: #19476c;

    border-color: #19476c;

    transform: translateY(-4px);
}


/* =========================================================
   ARTICLE NAVIGATION
========================================================= */

.blog-detail__navigation {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 45px;
}

.blog-detail__nav {
    position: relative;

    display: block;

    min-height: 110px;

    padding: 22px 25px;

    background: #f7f9fa;

    border: 1px solid #e4e9ec;

    border-radius: 8px;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease;
}

.blog-detail__nav::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #b6ce45;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform .4s ease;
}

.blog-detail__nav:hover {
    transform: translateY(-5px);

    background: #ffffff;

    border-color: rgba(120, 154, 32, .3);
}

.blog-detail__nav:hover::before {
    transform: scaleY(1);
}

.blog-detail__nav.next {
    text-align: right;
}

.blog-detail__nav span {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #789a20;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.blog-detail__nav.next span {
    justify-content: flex-end;
}

.blog-detail__nav strong {
    display: block;

    color: #19476c;

    font-size: 15px;

    line-height: 1.45;

    font-weight: 600;
}


/* =========================================================
   SIDEBAR
========================================================= */

.blog-detail__sidebar {
    position: relative;

    z-index: 2;
}


/* =========================================================
   SIDEBAR BOX
========================================================= */

.blog-sidebar__box {
    margin-bottom: 25px;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e3e9ec;

    border-radius: 10px;

    box-shadow:
        0 8px 30px rgba(25, 71, 108, 0.04);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.blog-sidebar__box:hover {
    box-shadow:
        0 15px 40px rgba(25, 71, 108, 0.08);
}

.blog-sidebar__box h3 {
    position: relative;

    margin: 0 0 22px;

    padding-bottom: 13px;

    color: #19476c;

    font-size: 21px;

    font-weight: 600;
}

.blog-sidebar__box h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 38px;
    height: 3px;

    background: #b6ce45;

    border-radius: 5px;
}


/* =========================================================
   SEARCH
========================================================= */

.blog-search {
    display: flex;

    height: 48px;

    overflow: hidden;

    border: 1px solid #dfe6e9;

    border-radius: 5px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.blog-search:focus-within {
    border-color: #789a20;

    box-shadow:
        0 0 0 3px rgba(120, 154, 32, .08);
}

.blog-search input {
    flex: 1;

    min-width: 0;

    padding: 0 15px;

    color: #56607d;

    background: transparent;

    border: 0;
    outline: 0;

    font-family: "Jost", sans-serif;

    font-size: 13px;
}

.blog-search input::placeholder {
    color: #9aa4ad;
}

.blog-search button {
    width: 52px;

    color: #ffffff;

    background: #19476c;

    border: 0;

    cursor: pointer;

    transition: background .3s ease;
}

.blog-search button:hover {
    background: #789a20;
}


/* =========================================================
   CATEGORIES
========================================================= */

.blog-sidebar__categories {
    margin: 0;
    padding: 0;

    list-style: none;
}

.blog-sidebar__categories li {
    border-bottom: 1px solid #edf0f2;
}

.blog-sidebar__categories li:last-child {
    border-bottom: 0;
}

.blog-sidebar__categories a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 0;

    color: #56607d;

    font-size: 14px;

    text-decoration: none;

    transition:
        color .3s ease,
        padding-left .3s ease;
}

.blog-sidebar__categories a span {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    background: #f2f6f7;

    border-radius: 50%;

    font-size: 10px;

    transition:
        color .3s ease,
        background .3s ease;
}

.blog-sidebar__categories a:hover {
    padding-left: 7px;

    color: #789a20;
}

.blog-sidebar__categories a:hover span {
    color: #ffffff;

    background: #789a20;
}


/* =========================================================
   RECENT POSTS
========================================================= */

.recent-post {
    display: flex;

    gap: 14px;

    padding: 15px 0;

    border-bottom: 1px solid #edf0f2;
}

.recent-post:first-of-type {
    padding-top: 0;
}

.recent-post:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.recent-post__image {
    width: 80px;
    height: 70px;

    flex: 0 0 80px;

    overflow: hidden;

    border-radius: 5px;

    background: #edf2f4;
}

.recent-post__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.recent-post:hover .recent-post__image img {
    transform: scale(1.08);
}

.recent-post__content {
    display: flex;

    flex-direction: column;

    justify-content: center;
}

.recent-post__content span {
    margin-bottom: 5px;

    color: #789a20;

    font-size: 10px;
}

.recent-post__content a {
    color: #19476c;

    font-size: 13px;

    line-height: 1.45;

    font-weight: 600;

    text-decoration: none;

    transition: color .3s ease;
}

.recent-post__content a:hover {
    color: #789a20;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.blog-sidebar__newsletter {
    position: relative;

    padding: 35px 30px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #19476c,
            #123c5d
        );

    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(25, 71, 108, .15);
}

.blog-sidebar__newsletter::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -80px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 50%;
}

.blog-sidebar__newsletter::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -45px;
    top: -45px;

    border: 1px solid rgba(182,206,69,.2);

    border-radius: 50%;
}

.newsletter-icon {
    position: relative;
    z-index: 2;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    color: #19476c;

    background: #b6ce45;

    border-radius: 50%;

    font-size: 18px;
}

.blog-sidebar__newsletter h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 24px;

    font-weight: 600;
}

.blog-sidebar__newsletter p {
    position: relative;
    z-index: 2;

    margin: 0 0 20px;

    color: rgba(255,255,255,.75);

    font-size: 13px;

    line-height: 1.7;
}

.blog-sidebar__newsletter form {
    position: relative;
    z-index: 2;
}

.blog-sidebar__newsletter input {
    width: 100%;

    height: 45px;

    margin-bottom: 10px;

    padding: 0 14px;

    color: #ffffff;

    background: rgba(255,255,255,.1);

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 4px;

    outline: 0;

    font-family: "Jost", sans-serif;

    font-size: 12px;
}

.blog-sidebar__newsletter input::placeholder {
    color: rgba(255,255,255,.6);
}

.blog-sidebar__newsletter button {
    width: 100%;

    height: 45px;

    color: #19476c;

    background: #b6ce45;

    border: 0;

    border-radius: 4px;

    font-family: "Jost", sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.blog-sidebar__newsletter button i {
    margin-left: 7px;

    transition: transform .3s ease;
}

.blog-sidebar__newsletter button:hover {
    color: #ffffff;

    background: #789a20;

    transform: translateY(-2px);
}

.blog-sidebar__newsletter button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   PAGE ANIMATION
========================================================= */

@keyframes blogDetailFade {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .blog-detail {
        padding: 80px 0;
    }

    .blog-detail__title {
        font-size: 37px;
    }

    .blog-detail__image {
        height: 400px;
    }

    .blog-detail__sidebar {
        margin-top: 20px;
    }

}


@media (max-width: 767px) {

    .blog-detail {
        padding: 60px 0;
    }

    .blog-detail__image {
        height: 270px;

        border-radius: 9px;
    }

    .blog-detail__meta {
        gap: 12px 18px;

        font-size: 11px;
    }

    .blog-detail__title {
        font-size: 29px;

        line-height: 1.25;
    }

    .blog-detail__intro {
        padding: 18px 20px;

        font-size: 15px;
    }

    .blog-detail__content {
        font-size: 14px;

        line-height: 1.8;
    }

    .blog-detail__content h2 {
        font-size: 23px;

        margin-top: 35px;
    }

    .blog-detail__highlight {
        align-items: flex-start;

        padding: 20px;
    }

    .blog-detail__footer {
        align-items: flex-start;

        flex-direction: column;
    }

    .blog-detail__navigation {
        grid-template-columns: 1fr;
    }

    .blog-detail__nav.next {
        text-align: left;
    }

    .blog-detail__nav.next span {
        justify-content: flex-start;
    }

    .blog-sidebar__box {
        padding: 24px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blog-detail__article {
        animation: none;
    }

    .blog-detail__image img,
    .blog-detail__content-image img,
    .blog-card,
    .recent-post__image img {
        transition: none;
    }

}


/* =========================================================
   PHARMA MANUFACTURER
========================================================= */

.pharma-manufacturer {
    position: relative;

    padding-bottom: 100px;

    background: #fff;

    font-family: "Jost", sans-serif;

    color: #56607d;

    overflow: hidden;
}


/* =========================================================
   BANNER
========================================================= */

.pharma-manufacturer__banner {
    position: relative;

    padding: 55px 0;

    background:
        linear-gradient(
            100deg,
            #f2f8f7,
            #f8fafb
        );

    overflow: hidden;
}

.pharma-manufacturer__banner::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -130px;
    top: -170px;

    border: 1px solid rgba(120,154,32,.16);

    border-radius: 50%;
}

.pharma-manufacturer__banner::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: 20px;
    top: -100px;

    border: 1px solid rgba(25,71,108,.08);

    border-radius: 50%;
}

.pharma-manufacturer__banner-content {
    position: relative;
    z-index: 2;

    text-align: center;
}

.pharma-manufacturer__eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #789a20;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    animation: pharmaFadeDown .8s ease both;
}

.pharma-manufacturer__banner h1 {
    margin: 0;

    color: #19476c;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 500;

    animation: pharmaFadeUp .9s ease both;
}

.pharma-manufacturer__banner h1 span {
    color: #789a20;
}

.pharma-manufacturer__banner-line {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 18px;
}

.pharma-manufacturer__banner-line span {
    width: 45px;
    height: 3px;

    background: #b6ce45;

    border-radius: 10px;
}

.pharma-manufacturer__banner-line i {
    width: 6px;
    height: 6px;

    background: #19476c;

    border-radius: 50%;
}


/* =========================================================
   INTRO
========================================================= */

.pharma-manufacturer__intro {
    position: relative;

    padding: 100px 0 85px;
}


/* IMAGE */

.pharma-manufacturer__intro-image {
    position: relative;

    padding-right: 25px;
    padding-bottom: 25px;
}

.pharma-manufacturer__intro-image img {
    position: relative;
    z-index: 2;

    width: 100%;

    height: 480px;

    display: block;

    object-fit: cover;

    border-radius: 10px;

    box-shadow:
        0 20px 50px rgba(25,71,108,.12);

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);
}

.pharma-manufacturer__intro-image:hover img {
    transform: translate(-5px,-5px);
}

.pharma-manufacturer__image-shape {
    position: absolute;

    left: -15px;
    bottom: 0;

    width: 92%;
    height: 95%;

    border: 2px solid #b6ce45;

    border-radius: 10px;
}

.pharma-manufacturer__image-label {
    position: absolute;
    z-index: 4;

    right: 0;
    bottom: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    color: #fff;

    background: #19476c;

    border-radius: 7px;

    box-shadow:
        0 10px 30px rgba(25,71,108,.2);
}

.pharma-manufacturer__image-label i {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    background: #b6ce45;

    border-radius: 50%;
}

.pharma-manufacturer__image-label strong,
.pharma-manufacturer__image-label span {
    display: block;
}

.pharma-manufacturer__image-label strong {
    font-size: 15px;
}

.pharma-manufacturer__image-label span {
    color: rgba(255,255,255,.7);

    font-size: 11px;
}


/* INTRO CONTENT */

.pharma-manufacturer__intro-content {
    padding-left: 20px;
}

.pharma-manufacturer__small-title {
    position: relative;

    display: inline-block;

    margin-bottom: 13px;

    color: #789a20;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;
}

.pharma-manufacturer__small-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 35px;
    height: 2px;

    background: #b6ce45;
}

.pharma-manufacturer__intro-content h2 {
    margin: 10px 0 20px;

    color: #19476c;

    font-size: 38px;

    line-height: 1.2;

    font-weight: 600;
}

.pharma-manufacturer__intro-content h2 span {
    color: #789a20;
}

.pharma-manufacturer__intro-content p {
    margin-bottom: 17px;

    font-size: 14px;

    line-height: 1.85;
}

.pharma-manufacturer__intro-content .pharma-manufacturer__lead {
    color: #19476c;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================================
   CONTENT
========================================================= */

.pharma-manufacturer__content {
    max-width: 1100px;

    margin: auto;
}

.pharma-manufacturer__section {
    position: relative;

    margin-bottom: 65px;

    padding: 0 0 50px;

    border-bottom: 1px solid #e8edef;
}

.pharma-manufacturer__section:last-child {
    border-bottom: 0;
}


/* SECTION HEADING */

.pharma-manufacturer__section-heading {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 25px;
}

.pharma-manufacturer__section-heading > span {
    flex: 0 0 auto;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    background: #f1f6f5;

    border: 1px solid #dce8e6;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 600;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.pharma-manufacturer__section:hover
.pharma-manufacturer__section-heading > span {
    color: #fff;

    background: #789a20;

    transform: rotate(8deg);
}

.pharma-manufacturer__section-heading small {
    display: block;

    margin-bottom: 5px;

    color: #789a20;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;
}

.pharma-manufacturer__section-heading h2 {
    margin: 0;

    color: #19476c;

    font-size: 28px;

    line-height: 1.25;

    font-weight: 600;
}

.pharma-manufacturer__section-heading h2 strong {
    color: #789a20;

    font-weight: 600;
}

.pharma-manufacturer__section > p {
    margin-bottom: 18px;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   LIST
========================================================= */

.pharma-manufacturer__list-grid {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 12px;

    margin-top: 25px;
}

.pharma-manufacturer__list-item {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    color: #56607d;

    background: #f7f9fa;

    border: 1px solid #e6ecee;

    border-radius: 6px;

    font-size: 13px;

    transition:
        transform .35s ease,
        color .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.pharma-manufacturer__list-item i {
    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    background: #789a20;

    border-radius: 50%;

    font-size: 10px;
}

.pharma-manufacturer__list-item:hover {
    color: #19476c;

    background: #fff;

    border-color: #b6ce45;

    transform: translateX(6px);
}


/* =========================================================
   PROCESS
========================================================= */

.pharma-manufacturer__sub-heading {
    margin: 30px 0 18px;

    color: #19476c;

    font-size: 18px;

    font-weight: 600;
}

.pharma-manufacturer__process {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 12px;

    margin-top: 25px;
}

.pharma-manufacturer__process > div {
    position: relative;

    min-height: 100px;

    padding: 18px;

    color: #19476c;

    background: #f6f9f9;

    border: 1px solid #e3eaeb;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 500;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.pharma-manufacturer__process > div:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 30px rgba(25,71,108,.08);
}

.pharma-manufacturer__process span {
    display: block;

    margin-bottom: 12px;

    color: #789a20;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   FEATURE STRIP
========================================================= */

.pharma-manufacturer__features {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    margin-top: 10px;

    background: #19476c;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 18px 40px rgba(25,71,108,.12);
}

.pharma-manufacturer__feature {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 25px 20px;

    border-right: 1px solid rgba(255,255,255,.12);

    transition:
        background .35s ease,
        transform .35s ease;
}

.pharma-manufacturer__feature:last-child {
    border-right: 0;
}

.pharma-manufacturer__feature:hover {
    background: rgba(120,154,32,.18);

    transform: translateY(-3px);
}

.pharma-manufacturer__feature > i {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #19476c;

    background: #b6ce45;

    border-radius: 50%;

    font-size: 16px;
}

.pharma-manufacturer__feature strong,
.pharma-manufacturer__feature span {
    display: block;
}

.pharma-manufacturer__feature strong {
    color: #fff;

    margin-bottom: 3px;

    font-size: 13px;
}

.pharma-manufacturer__feature span {
    color: rgba(255,255,255,.62);

    font-size: 10px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pharmaFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes pharmaFadeDown {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .pharma-manufacturer__banner h1 {
        font-size: 38px;
    }

    .pharma-manufacturer__intro {
        padding: 75px 0;
    }

    .pharma-manufacturer__intro-content {
        padding-left: 0;
    }

    .pharma-manufacturer__intro-image img {
        height: 400px;
    }

    .pharma-manufacturer__process {
        grid-template-columns: repeat(2,1fr);
    }

    .pharma-manufacturer__features {
        grid-template-columns: repeat(2,1fr);
    }

    .pharma-manufacturer__feature:nth-child(2) {
        border-right: 0;
    }

    .pharma-manufacturer__feature:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

}


@media (max-width: 767px) {

    .pharma-manufacturer {
        padding-bottom: 60px;
    }

    .pharma-manufacturer__banner {
        padding: 40px 0;
    }

    .pharma-manufacturer__banner h1 {
        font-size: 30px;
    }

    .pharma-manufacturer__intro {
        padding: 55px 0;
    }

    .pharma-manufacturer__intro-image {
        padding-right: 12px;
        padding-bottom: 15px;
    }

    .pharma-manufacturer__intro-image img {
        height: 300px;
    }

    .pharma-manufacturer__image-label {
        padding: 11px 14px;
    }

    .pharma-manufacturer__intro-content h2 {
        font-size: 30px;
    }

    .pharma-manufacturer__section {
        margin-bottom: 45px;
        padding-bottom: 35px;
    }

    .pharma-manufacturer__section-heading h2 {
        font-size: 23px;
    }

    .pharma-manufacturer__list-grid {
        grid-template-columns: 1fr;
    }

    .pharma-manufacturer__process {
        grid-template-columns: 1fr;
    }

    .pharma-manufacturer__features {
        grid-template-columns: 1fr;
    }

    .pharma-manufacturer__feature,
    .pharma-manufacturer__feature:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .pharma-manufacturer__feature:last-child {
        border-bottom: 0;
    }

}

.pharma-manufacturer__simple-list {
    margin: 25px 0 0;
    padding: 0;

    list-style: none;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 40px;
}

.pharma-manufacturer__simple-list li {
    position: relative;

    padding: 10px 0 10px 32px;

    color: #56607d;

    font-size: 14px;
    line-height: 1.5;

    border-bottom: 1px solid #edf0f1;

    transition: all 0.3s ease;
}


/* CHECK ICON FROM CSS */

.pharma-manufacturer__simple-list li::before {
    content: "\f00c";

    position: absolute;

    left: 0;
    top: 50%;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: #789a20;

    border-radius: 50%;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 9px;

    transform: translateY(-50%);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


/* HOVER */

.pharma-manufacturer__simple-list li:hover {
    color: #19476c;

    padding-left: 36px;
}

.pharma-manufacturer__simple-list li:hover::before {
    background: #19476c;

    transform: translateY(-50%) scale(1.1);
}


/* MOBILE */

@media (max-width: 767px) {

    .pharma-manufacturer__simple-list {
        grid-template-columns: 1fr;

        gap: 0;
    }

}

/* =========================================
   DYNAMIC EDITOR CONTENT
========================================= */

.pharma-manufacturer__editor {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0 80px;
}

.pharma-manufacturer__editor h2 {
    position: relative;

    margin: 45px 0 18px;

    padding-left: 18px;

    color: #19476c;

    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
}

.pharma-manufacturer__editor h2:first-child {
    margin-top: 0;
}

.pharma-manufacturer__editor h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 4px;
    height: 80%;

    background: #789a20;

    border-radius: 5px;
}

.pharma-manufacturer__editor h2 span {
    color: #789a20;
}

.pharma-manufacturer__editor h3 {
    margin: 30px 0 15px;

    color: #19476c;

    font-size: 21px;
    font-weight: 600;
}

.pharma-manufacturer__editor p {
    margin: 0 0 18px;

    color: #56607d;

    font-size: 14px;
    line-height: 1.9;
}

.pharma-manufacturer__editor strong {
    color: #19476c;
    font-weight: 600;
}


/* =========================================
   LIST
========================================= */

.pharma-manufacturer__editor ul,
.pharma-manufacturer__editor ol {
    margin: 15px 0 25px;
    padding-left: 22px;

    color: #56607d;

    font-size: 14px;
    line-height: 1.9;
}

.pharma-manufacturer__editor ul {
    list-style: none;
    padding-left: 0;
}

.pharma-manufacturer__editor ul li {
    position: relative;

    margin-bottom: 8px;

    padding-left: 25px;
}

.pharma-manufacturer__editor ul li::before {
    content: "\f00c";

    position: absolute;

    left: 0;
    top: 7px;

    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: #789a20;

    border-radius: 50%;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 7px;
}

.pharma-manufacturer__editor ol li {
    padding-left: 5px;
}


/* =========================================
   LINKS
========================================= */

.pharma-manufacturer__editor a {
    color: #19476c;

    text-decoration: none;

    transition: color .3s ease;
}

.pharma-manufacturer__editor a:hover {
    color: #789a20;
}


/* =========================================
   BLOCKQUOTE
========================================= */

.pharma-manufacturer__editor blockquote {
    margin: 30px 0;

    padding: 20px 25px;

    color: #19476c;

    background: #f5f8f8;

    border-left: 4px solid #789a20;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================
   IMAGES ADDED FROM EDITOR
========================================= */

.pharma-manufacturer__editor img {
    max-width: 100%;
    height: auto;

    margin: 20px 0;

    border-radius: 6px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .pharma-manufacturer__editor {
        padding: 20px 0 50px;
    }

    .pharma-manufacturer__editor h2 {
        margin-top: 35px;

        font-size: 23px;
    }

    .pharma-manufacturer__editor h3 {
        font-size: 19px;
    }

    .pharma-manufacturer__editor p,
    .pharma-manufacturer__editor ul,
    .pharma-manufacturer__editor ol {
        font-size: 14px;
        line-height: 1.8;
    }

}

.pharma-manufacturer__image{ overflow:hidden;}
.pharma-manufacturer__image img{ width:100%;}



/*product*/


.category-list{ margin-top:40px;}

.category-list .col-lg-4{ margin-bottom:30px!important;}



/* =========================================================
   OUR PRODUCTS - FULL CSS
========================================================= */

.products-page {
    position: relative;

    width: 100%;

    background: #ffffff;

    font-family: "Jost", sans-serif;

    overflow: hidden;
}


/* =========================================================
   PAGE HERO
========================================================= */

.products-page__hero {
    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;

    background-image: url("../images/products-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


.products-page__hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 55, 82, 0.95) 0%,
            rgba(18, 55, 82, 0.82) 45%,
            rgba(18, 55, 82, 0.45) 100%
        );

    z-index: 1;
}


.products-page__hero .container {
    position: relative;

    z-index: 2;
}


.products-page__hero-content {
    max-width: 760px;

    padding: 70px 0;
}


/* Small heading */

.products-page__hero-content > span {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    color: #b8ca52;

    font-size: 15px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.products-page__hero-content > span::before {
    content: "";

    width: 38px;
    height: 4px;

    background: #b8ca52;
}


/* Hero heading */

.products-page__hero-content h1 {
    margin: 0;

    color: #ffffff;

    font-size: 58px;
    font-weight: 400;

    line-height: 1.12;

    letter-spacing: -0.5px;
}


.products-page__hero-content h1 strong {
    display: block;

    color: #b8ca52;

    font-weight: 700;
}


.products-page__hero-content p {
    max-width: 620px;

    margin: 22px 0 28px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 18px;
    font-weight: 400;

    line-height: 1.75;
}


/* Breadcrumb */

.products-page__hero .breadcrumb {
    margin: 0;

    padding: 0;

    background: transparent;
}


.products-page__hero .breadcrumb-item {
    font-size: 14px;
}


.products-page__hero .breadcrumb-item a {
    color: #ffffff;

    text-decoration: none;

    transition: color 0.3s ease;
}


.products-page__hero .breadcrumb-item a:hover {
    color: #b8ca52;
}


.products-page__hero .breadcrumb-item.active {
    color: #b8ca52;
}


.products-page__hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}


/* =========================================================
   HERO ANIMATION
========================================================= */

.products-page__hero-content {
    opacity: 0;

    transform: translateY(35px);

    animation:
        productsHeroReveal 0.9s ease forwards;
}


@keyframes productsHeroReveal {

    from {
        opacity: 0;

        transform: translateY(35px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   PRODUCT LISTING SECTION
========================================================= */

.products-listing {
    position: relative;

    padding: 90px 0 110px;

    background: #ffffff;
}



/* =========================================================
   SIDEBAR
========================================================= */

.products-filter {
    position: sticky;

    top: 30px;

    z-index: 2;
}


/* Sidebar heading */

.products-filter__heading {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 22px;

    color: #24557f;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.3px;
}


.products-filter__heading span {
    width: 38px;
    height: 4px;

    flex-shrink: 0;

    background: #b8ca52;
}


/* Sidebar list */

.products-filter ul {
    margin: 0;

    padding: 0;

    list-style: none;

    border: 1px solid #e4e9ec;

    background: #ffffff;
}


.products-filter li {
    border-bottom: 1px solid #e4e9ec;
}


.products-filter li:last-child {
    border-bottom: 0;
}


.products-filter li a {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 19px;

    color: #24557f;

    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    overflow: hidden;

    transition:
        color 0.35s ease,
        padding 0.35s ease,
        background 0.35s ease;
}


.products-filter li a::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #b8ca52;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform 0.35s ease;
}


.products-filter li a i {
    font-size: 11px;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


.products-filter li:hover a,
.products-filter li.active a {
    padding-left: 27px;

    background: #f3f7df;

    color: #24557f;
}


.products-filter li:hover a::before,
.products-filter li.active a::before {
    transform: scaleY(1);
}


.products-filter li:hover a i,
.products-filter li.active a i {
    color: #9caf35;

    transform: translateX(4px);
}


/* Active */

.products-filter li.active a {
    font-weight: 600;
}


/* =========================================================
   SIDEBAR CONTACT BOX
========================================================= */

.products-filter__contact {
    position: relative;

    margin-top: 30px;

    padding: 30px 25px;

    background: #24557f;

    overflow: hidden;
}


.products-filter__contact::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -85px;
    top: -85px;

    border-radius: 50%;

    border: 30px solid rgba(184, 202, 82, 0.10);
}


.products-filter__contact::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -50px;
    bottom: -55px;

    border-radius: 50%;

    background: rgba(184, 202, 82, 0.15);
}


.products-filter__contact-icon {
    position: relative;

    z-index: 2;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #b8ca52;

    color: #ffffff;

    font-size: 19px;
}


.products-filter__contact h4 {
    position: relative;

    z-index: 2;

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 600;
}


.products-filter__contact p {
    position: relative;

    z-index: 2;

    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;

    line-height: 1.7;
}


.products-filter__contact a {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #b8ca52;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: gap 0.3s ease;
}


.products-filter__contact a:hover {
    gap: 14px;
}


/* =========================================================
   LISTING TOP
========================================================= */

.products-listing__top {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 35px;

    padding-bottom: 20px;

    border-bottom: 1px solid #e4e9ec;
}


.products-listing__count {
    display: block;

    margin-bottom: 7px;

    color: #9caf35;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


.products-listing__top h2 {
    margin: 0;

    color: #24557f;

    font-size: 36px;
    font-weight: 700;

    line-height: 1.2;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.listing-card {
    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e4e9ec;

    border-radius: 12px;

    overflow: visible;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


.listing-card:hover {
    transform: translateY(-8px);

    border-color: rgba(184, 202, 82, 0.55);

    box-shadow:
        0 18px 45px rgba(36, 85, 127, 0.13);
}


/* =========================================================
   PRODUCT IMAGE AREA
========================================================= */

.listing-card__image {
    position: relative;

    height: 250px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    border-radius: 12px 12px 0 0;

   

    overflow: hidden;
}


/* Decorative circle */



.listing-card:hover .listing-card__image::before {
    transform: scale(1.25);
}



/* =========================================================
   MAIN PRODUCT IMAGE
========================================================= */

.listing-card__image > img {
    position: relative;

    z-index: 2;

    width: auto;

    height: 175px;

    max-width: 82%;

    object-fit: contain;

    display: block;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}





/* =========================================================
   PRODUCT NUMBER
========================================================= */

.listing-card__number {
    position: absolute;

    z-index: 5;

    top: 15px;
    left: 15px;

    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #24557f;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    box-shadow:
        0 5px 12px rgba(36, 85, 127, 0.18);

    transition:
        transform 0.45s ease,
        background 0.45s ease;
}


.listing-card:hover .listing-card__number {
    background: #b8ca52;

    transform: rotate(360deg);
}


/* =========================================================
   FLOATING PRODUCT ICON
========================================================= */

/* =========================================================
   CENTER PRODUCT ICON
========================================================= */

.listing-card__icon {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: -31px;

    width: 63px;
    height: 63px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 5px solid rgba(184, 202, 82, 0.20);

    box-shadow:
        0 8px 20px rgba(36, 85, 127, 0.15);

    /* Keep perfectly centered */
    transform: translateX(-50%);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;

    isolation: isolate;
}


/* =========================================================
   ROTATING TRANSPARENT BORDER
========================================================= */

.listing-card__icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    border-right-color: rgba(184, 202, 82, 0.15);

    animation:
        productIconRotate 3s linear infinite;

    pointer-events: none;
}


/* =========================================================
   SOFT OUTER PULSE
========================================================= */

.listing-card__icon::after {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.20);

    animation:
        productIconPulse 2.5s ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   PRODUCT ICON IMAGE
========================================================= */

.listing-card__icon img {
    position: relative;

    z-index: 5;

    width: 32px;
    height: 32px;

    display: block;

    object-fit: contain;

    transition:
        transform 0.4s ease;
}


/* =========================================================
   HOVER
========================================================= */

.listing-card:hover .listing-card__icon {
    transform:
        translateX(-50%)
        scale(1.10);

    border-color:
        rgba(184, 202, 82, 0.60);

    box-shadow:
        0 12px 28px rgba(36, 85, 127, 0.22);
}


.listing-card:hover .listing-card__icon img {
    transform: scale(1.12);
}


/* =========================================================
   ROTATION
========================================================= */

@keyframes productIconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   PULSE
========================================================= */

@keyframes productIconPulse {

    0% {
        transform: scale(0.90);

        opacity: 0;
    }

    50% {
        transform: scale(1);

        opacity: 0.65;
    }

    100% {
        transform: scale(1.15);

        opacity: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .listing-card__icon {
        width: 57px;
        height: 57px;

        bottom: -28px;
    }

    .listing-card__icon img {
        width: 29px;
        height: 29px;
    }

}


/* Icon itself */

.listing-card__icon img {
    position: relative;

    z-index: 3;

    width: 32px;
    height: 32px;

    display: block;

    object-fit: contain;

    transition:
        transform 0.4s ease;
}


.listing-card:hover .listing-card__icon {
    transform: scale(1.10);

    border-color:
        rgba(184, 202, 82, 0.55);

    box-shadow:
        0 11px 25px rgba(36, 85, 127, 0.20);
}


.listing-card:hover .listing-card__icon img {
    transform: scale(1.12);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.listing-card__content {
    position: relative;

    z-index: 2;

    flex: 1;

    padding: 39px 24px 26px;

    border-top: 3px solid #b8ca52;

    border-radius: 0 0 12px 12px;

    background: #ffffff;
}


/* Category */

.listing-card__category {
    display: block;

    margin-bottom: 7px;

    color: #9caf35;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* Product name */

.listing-card__content h3 {
    min-height: 55px;

    margin: 0 0 17px;

    color: #24557f;

    font-size: 20px;
    font-weight: 600;

    line-height: 1.35;
}


/* View product */

.listing-card__content a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #24557f;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.listing-card__content a i {
    color: #b8ca52;

    transition:
        transform 0.3s ease;
}


.listing-card__content a:hover {
    gap: 14px;

    color: #91a52d;
}


.listing-card__content a:hover i {
    transform: translateX(3px);
}


/* =========================================================
   CARD ENTRANCE ANIMATION
========================================================= */

.listing-card {
    opacity: 0;

    transform: translateY(35px);

    animation:
        productCardReveal 0.7s ease forwards;
}


.row > [class*="col-"]:nth-child(1) .listing-card {
    animation-delay: 0.05s;
}

.row > [class*="col-"]:nth-child(2) .listing-card {
    animation-delay: 0.10s;
}

.row > [class*="col-"]:nth-child(3) .listing-card {
    animation-delay: 0.15s;
}

.row > [class*="col-"]:nth-child(4) .listing-card {
    animation-delay: 0.20s;
}

.row > [class*="col-"]:nth-child(5) .listing-card {
    animation-delay: 0.25s;
}

.row > [class*="col-"]:nth-child(6) .listing-card {
    animation-delay: 0.30s;
}

.row > [class*="col-"]:nth-child(7) .listing-card {
    animation-delay: 0.35s;
}

.row > [class*="col-"]:nth-child(8) .listing-card {
    animation-delay: 0.40s;
}

.row > [class*="col-"]:nth-child(9) .listing-card {
    animation-delay: 0.45s;
}

.row > [class*="col-"]:nth-child(10) .listing-card {
    animation-delay: 0.50s;
}

.row > [class*="col-"]:nth-child(11) .listing-card {
    animation-delay: 0.55s;
}

.row > [class*="col-"]:nth-child(12) .listing-card {
    animation-delay: 0.60s;
}


@keyframes productCardReveal {

    from {
        opacity: 0;

        transform: translateY(35px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   ICON ANIMATIONS
========================================================= */

@keyframes productIconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes productIconPulse {

    0%,
    100% {
        transform: scale(0.92);

        opacity: 0.25;
    }

    50% {
        transform: scale(1.08);

        opacity: 0.75;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .products-page__hero-content h1 {
        font-size: 50px;
    }

    .products-listing {
        padding: 75px 0 90px;
    }

    .listing-card__image {
        height: 235px;
    }

    .listing-card__image > img {
        height: 165px;
    }

    .listing-card__content {
        padding-left: 20px;
        padding-right: 20px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 991px) {

    .products-page__hero {
        min-height: 350px;
    }

    .products-page__hero-content {
        padding: 60px 0;
    }

    .products-page__hero-content h1 {
        font-size: 44px;
    }

    .products-listing {
        padding: 65px 0 80px;
    }

    .products-filter {
        position: relative;

        top: auto;

        margin-bottom: 20px;
    }

    .products-filter__contact {
        display: none;
    }

    .products-listing__top h2 {
        font-size: 32px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .products-page__hero {
        min-height: 320px;

        background-position: center;
    }

    .products-page__hero-content {
        padding: 50px 0;
    }

    .products-page__hero-content > span {
        font-size: 13px;

        letter-spacing: 1.5px;
    }

    .products-page__hero-content h1 {
        font-size: 38px;
    }

    .products-page__hero-content p {
        font-size: 16px;

        line-height: 1.65;
    }

    .products-listing {
        padding: 55px 0 70px;
    }

    .products-listing__top {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

        margin-bottom: 28px;
    }

    .products-listing__top h2 {
        font-size: 29px;
    }

    .listing-card__image {
        height: 245px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .products-page__hero {
        min-height: 300px;
    }

    .products-page__hero-content {
        padding: 45px 0;
    }

    .products-page__hero-content h1 {
        font-size: 32px;
    }

    .products-page__hero-content p {
        font-size: 15px;

        margin-top: 17px;
    }

    .products-page__hero .breadcrumb-item {
        font-size: 13px;
    }

    .products-listing {
        padding: 45px 0 60px;
    }

    .products-filter__heading {
        font-size: 14px;
    }

    .products-filter li a {
        padding: 15px 16px;
    }

    .products-filter li:hover a,
    .products-filter li.active a {
        padding-left: 23px;
    }

    .products-listing__count {
        font-size: 12px;
    }

    .products-listing__top h2 {
        font-size: 27px;
    }

    .listing-card__image {
        height: 230px;

        padding: 20px;
    }

    .listing-card__image > img {
        height: 155px;

        max-width: 80%;
    }

    .listing-card__image::before {
        width: 180px;
        height: 180px;
    }

    .listing-card__number {
        top: 12px;
        left: 12px;

        width: 35px;
        height: 35px;
    }

    .listing-card__icon {
        right: 15px;
        bottom: -28px;

        width: 57px;
        height: 57px;
    }

    .listing-card__icon img {
        width: 29px;
        height: 29px;
    }

    .listing-card__content {
        padding: 35px 20px 23px;
    }

    .listing-card__content h3 {
        min-height: auto;

        font-size: 19px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .products-page *,
    .products-page *::before,
    .products-page *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   IMAGE AREA
   Allow floating icon to extend outside
========================================================= */

.listing-card__image {
    position: relative;

    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

  

    border-radius: 12px 12px 0 0;

    /* IMPORTANT */
    overflow: visible;
}


/* =========================================================
   CARD
========================================================= */

.listing-card {
    position: relative;

    height: 100%;

    background: #ffffff;

    border: 1px solid #e4e9ec;

    border-radius: 12px;

    /* Do NOT clip the floating icon */
    overflow: visible;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


/* =========================================================
   CENTER ICON
========================================================= */

.listing-card__icon {
    position: absolute;

    z-index: 20;

    left: 50%;
    bottom: -31px;

    width: 63px;
    height: 63px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #24557f;

    border: 5px solid rgba(184, 202, 82, 0.20);

    box-shadow:
        0 8px 20px rgba(36, 85, 127, 0.15);

    transform: translateX(-50%);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;

    isolation: isolate;
}


/* Rotating ring */

.listing-card__icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    animation:
        productIconRotate 3s linear infinite;

    pointer-events: none;
}


/* Pulse ring */

.listing-card__icon::after {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.20);

    animation:
        productIconPulse 2.5s ease-in-out infinite;

    pointer-events: none;
}


/* Icon */

.listing-card__icon img {
    position: relative;

    z-index: 5;

    width: 32px;
    height: 32px;

    object-fit: contain;

    transition:
        transform 0.4s ease;
}


/* =========================================================
   HOVER
========================================================= */

.listing-card:hover .listing-card__icon {
    transform:
        translateX(-50%)
        scale(1.12);

    border-color:
        rgba(184, 202, 82, 0.60);

    box-shadow:
        0 12px 28px rgba(36, 85, 127, 0.22);
}


.listing-card:hover .listing-card__icon img {
    transform: scale(1.12);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes productIconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes productIconPulse {

    0% {
        transform: scale(0.90);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 0.65;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .listing-card__image {
        height: 225px;

        overflow: visible;
    }

    .listing-card__icon {
        width: 57px;
        height: 57px;

        bottom: -28px;
    }

    .listing-card__icon img {
        width: 29px;
        height: 29px;
    }

}



/*product-details*/



/* =========================================================
   PRODUCT DETAIL
========================================================= */

.product-detail {
    position: relative;

    padding: 75px 0 105px;

    background: #ffffff;

    overflow: hidden;
}

.product-detail::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    left: -330px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 202, 82, 0.14) 0%,
            rgba(184, 202, 82, 0) 70%
        );

    pointer-events: none;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.product-detail__breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 42px;

    color: #929a9e;

    font-size: 13px;
}

.product-detail__breadcrumb a {
    color: var(--primary);
}

.product-detail__breadcrumb a:hover {
    color: var(--green-dark);
}

.product-detail__breadcrumb i {
    color: var(--green);

    font-size: 9px;
}

.product-detail__breadcrumb span {
    color: #929a9e;
}


/* =========================================================
   GALLERY
========================================================= */

.product-gallery {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: stretch;

    gap: 18px;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.product-gallery__thumbs {
    width: 88px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    flex-shrink: 0;
}

.product-gallery__thumbs button {
    position: relative;

    width: 88px;
    height: 88px;

    padding: 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 10px;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.product-gallery__thumbs button:hover {
    transform: translateX(4px);

    border-color: var(--green);

    box-shadow:
        0 6px 18px rgba(36, 85, 127, 0.08);
}

.product-gallery__thumbs button.active {
    border-color: var(--green);

    box-shadow:
        0 7px 20px rgba(36, 85, 127, 0.12);
}

.product-gallery__thumbs button.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background: var(--green);

    animation: thumbnailLine 0.4s ease;
}

.product-gallery__thumbs img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.product-gallery__thumbs button:hover img {
    transform: scale(1.06);
}

@keyframes thumbnailLine {

    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }

}


/* =========================================================
   MAIN IMAGE
========================================================= */

.product-gallery__carousel {
    flex: 1;
    min-width: 0;
}

.product-gallery__image {
    position: relative;



    display: flex;
    align-items: center;
    justify-content: center;

    padding: 45px;

    border-radius: 16px;

   

    overflow: hidden; border:1px solid #eeeff2;
}




.product-gallery__image:hover::before {
    transform: scale(1.08);
}

.product-gallery__image img {
    position: relative;

    z-index: 3;

    width: auto;

    height: 410px;

    max-width: 90%;

    object-fit: contain;

    transition:
        transform 0.65s ease,
        filter 0.65s ease;
}



/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.product-gallery__carousel .carousel-control-prev,
.product-gallery__carousel .carousel-control-next {
    width: 43px;
    height: 43px;

    top: auto;
    bottom: 20px;

    opacity: 1;

    border-radius: 50%;

    background: var(--primary);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.product-gallery__carousel .carousel-control-prev {
    left: 20px;
}

.product-gallery__carousel .carousel-control-next {
    left: 72px;
    right: auto;
}

.product-gallery__carousel .carousel-control-prev:hover,
.product-gallery__carousel .carousel-control-next:hover {
    background: var(--green);

    transform: translateY(-3px);
}

.product-gallery__carousel .carousel-control-prev-icon,
.product-gallery__carousel .carousel-control-next-icon {
    width: 13px;
    height: 13px;
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-detail__content {
    position: relative;
    z-index: 2;

    padding-left: 25px;

    animation:
        productContentReveal 0.8s ease both;
}

@keyframes productContentReveal {

    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   PRODUCT ICON
========================================================= */

.product-detail__icon {
    position: relative;

    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 50%;

    background: #ffffff;

    border: 5px solid rgba(184, 202, 82, 0.20);

    box-shadow:
        0 8px 22px rgba(36, 85, 127, 0.09);

    animation:
        detailIconFloat 3s ease-in-out infinite;
}

.product-detail__icon::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: var(--green);

    animation:
        detailIconRotate 3s linear infinite;
}

.product-detail__icon::after {
    content: "";

    position: absolute;

    inset: -13px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.15);

    animation:
        detailIconPulse 2.5s ease-in-out infinite;
}

.product-detail__icon img {
    position: relative;

    z-index: 3;

    width: 35px;
    height: 35px;

    object-fit: contain;
}

@keyframes detailIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}

@keyframes detailIconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes detailIconPulse {

    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }

}


/* =========================================================
   CATEGORY
========================================================= */

.product-detail__category {
    display: block;

    margin-bottom: 9px;

    color: var(--green-dark);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 2px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.product-detail__content h1 {
    margin: 0;

    color: var(--primary);

    font-size: 52px;
    font-weight: 700;

    line-height: 1.15;
}


/* =========================================================
   TITLE LINE
========================================================= */

.product-detail__line {
    width: 70px;
    height: 4px;

    margin: 20px 0 25px;

    background: var(--green);

    border-radius: 5px;

    animation:
        lineGrow 0.8s ease both;
}

@keyframes lineGrow {

    from {
        width: 0;
    }

    to {
        width: 70px;
    }

}


/* =========================================================
   INTRO
========================================================= */

.product-detail__intro {
    max-width: 580px;

    margin: 0 0 30px;

    color: var(--text);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   PRODUCT DETAILS
========================================================= */

.product-detail__info {
    max-width: 580px;

    margin-bottom: 35px;

    border-top: 1px solid var(--border);
}

.product-detail__info-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid var(--border);

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}

.product-detail__info-item:hover {
    padding-left: 8px;
}

.product-detail__info-item span {
    color: #788187;

    font-size: 14px;
}

.product-detail__info-item strong {
    color: var(--primary);

    font-size: 14px;
    font-weight: 600;

    text-align: right;
}


/* =========================================================
   PRODUCT CTA
========================================================= */

.product-detail__actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 15px 25px;

    border-radius: 30px;

    background: var(--primary);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(36, 85, 127, 0.08);
}

.product-detail__btn i {
    color: var(--green);

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.product-detail__btn:hover {
    background: var(--green);

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(36, 85, 127, 0.16);
}

.product-detail__btn:hover i {
    color: #ffffff;

    transform: translateX(5px);
}


/* =========================================================
   PRODUCT INFORMATION SECTION
========================================================= */

.product-info-section {
    position: relative;

    padding: 10px 0;

    background: var(--soft-bg);

    overflow: hidden;
}

.product-info-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -280px;
    top: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 202, 82, 0.12),
            transparent 70%
        );
}


/* =========================================================
   INFORMATION HEADING
========================================================= */

.product-info-heading {
    position: relative;
    z-index: 2;

   

    margin: 0 auto 70px;

    text-align: center;
}

.product-info-heading > span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--green-dark);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 2px;
}

.product-info-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size: 42px;
    font-weight: 700;

    line-height: 1.2;
}

.product-info-heading h2 strong {
    color: var(--green-dark);
}

.product-info-heading p {
  

    margin: 20px auto 0;

    color: #687278;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   PRODUCT OVERVIEW
========================================================= */

.product-overview {
    position: relative;
    z-index: 2;

    padding: 55px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 12px 35px rgba(36, 85, 127, 0.06);
}

.product-section-label {
    display: block;

    margin-bottom: 12px;

    color: var(--green-dark);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.8px;
}

.product-overview__content h3 {
    max-width: 620px;

    margin: 0 0 22px;

    color: var(--primary);

    font-size: 36px;
    font-weight: 600;

    line-height: 1.25;
}

.product-overview__content h3 strong {
    color: var(--green-dark);
}

.product-overview__content p {
    max-width: 680px;

    margin-bottom: 17px;

    color: #667077;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.product-highlight-box {
    position: relative;

    min-height: 280px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 40px;

    background: var(--primary);

    border-radius: 12px;

    overflow: hidden;
}

.product-highlight-box::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -110px;
    top: -110px;

    border-radius: 50%;

    border: 35px solid rgba(184, 202, 82, 0.08);

    animation:
        highlightRotate 12s linear infinite;
}

.product-highlight-box::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    background: rgba(184, 202, 82, 0.10);
}

@keyframes highlightRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.product-highlight-box__icon {
    position: relative;
    z-index: 2;

    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #ffffff;
}

.product-highlight-box__icon img {
    width: 35px;
    height: 35px;

    object-fit: contain;
}

.product-highlight-box > span,
.product-highlight-box h4,
.product-highlight-box p {
    position: relative;
    z-index: 2;
}

.product-highlight-box > span {
    color: var(--green);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.product-highlight-box h4 {
    margin: 8px 0 12px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 600;
}

.product-highlight-box p {
    max-width: 390px;

    margin: 0;

    color: rgba(255,255,255,0.75);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   KEY INFORMATION
========================================================= */

.product-key-info {
    position: relative;
    z-index: 2;

    padding-top: 90px;
}

.product-section-heading {
    margin-bottom: 35px;
}

.product-section-heading > span {
    color: var(--green-dark);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.8px;
}

.product-section-heading h3 {
    margin: 7px 0 0;

    color: var(--primary);

    font-size: 32px;
    font-weight: 600;
}


/* =========================================================
   SPECIFICATION CARDS
========================================================= */

.product-spec-card {
    position: relative;

    height: 100%;

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.product-spec-card::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    background: rgba(184, 202, 82, 0.08);

    transition:
        transform 0.4s ease;
}

.product-spec-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(184, 202, 82, 0.45);

    box-shadow:
        0 15px 32px rgba(36, 85, 127, 0.09);
}

.product-spec-card:hover::after {
    transform: scale(2.2);
}

.product-spec-card__icon {
    position: relative;
    z-index: 2;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background: var(--light-green);

    color: var(--green-dark);

    font-size: 18px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.product-spec-card:hover .product-spec-card__icon {
    transform: scale(1.08) rotate(8deg);

    background: var(--green);

    color: #ffffff;
}

.product-spec-card > span,
.product-spec-card h4 {
    position: relative;
    z-index: 2;
}

.product-spec-card > span {
    color: #899297;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;
}

.product-spec-card h4 {
    margin: 7px 0 0;

    color: var(--primary);

    font-size: 18px;
    font-weight: 600;
}


/* =========================================================
   THERAPEUTIC APPLICATIONS
========================================================= */

.product-applications {
    position: relative;
    z-index: 2;

    margin-top: 100px;

    padding: 70px;

    background: var(--primary);

    border-radius: 15px;

    overflow: hidden;
}

.product-applications::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -250px;
    top: -250px;

    border-radius: 50%;

    border: 55px solid rgba(184, 202, 82, 0.07);

    animation:
        applicationCircle 14s linear infinite;
}

@keyframes applicationCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}

.product-applications__heading {
    position: relative;
    z-index: 2;
}

.product-applications__heading > span {
    color: var(--green);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.8px;
}

.product-applications__heading h3 {
    max-width: 410px;

    margin: 12px 0 0;

    color: #ffffff;

    font-size: 38px;
    font-weight: 600;

    line-height: 1.25;
}

.product-applications__heading h3 strong {
    color: var(--green);
}


/* Application items */

.product-applications__list {
    position: relative;
    z-index: 2;
}

.application-item {
    display: flex;

    gap: 22px;

    padding: 22px 0;

    border-bottom: 1px solid rgba(255,255,255,0.12);

    transition:
        padding-left 0.35s ease;
}

.application-item:first-child {
    padding-top: 0;
}

.application-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.application-item:hover {
    padding-left: 8px;
}

.application-item__number {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--green);

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    transition:
        transform 0.35s ease;
}

.application-item:hover .application-item__number {
    transform: rotate(8deg) scale(1.08);
}

.application-item h4 {
    margin: 0 0 6px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 600;
}

.application-item p {
    margin: 0;

    color: rgba(255,255,255,0.68);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   MECHANISM
========================================================= */

.product-mechanism {
    position: relative;
    z-index: 2;

    padding: 100px 0 20px;
}

.mechanism-visual {
    position: relative;

    height: 350px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mechanism-circle {
    position: relative;
    z-index: 5;

    width: 150px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--primary);

    color: var(--green);

    font-size: 55px;

    box-shadow:
        0 15px 40px rgba(36, 85, 127, 0.18);

    animation:
        mechanismFloat 4s ease-in-out infinite;
}

.mechanism-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    animation:
        mechanismPulse 3s ease-in-out infinite;
}

.ring-one {
    width: 220px;
    height: 220px;
}

.ring-two {
    width: 300px;
    height: 300px;

    animation-delay: 0.7s;
}

@keyframes mechanismFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}

@keyframes mechanismPulse {

    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.30;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.80;
    }

}


/* Mechanism content */

.mechanism-content > span {
    color: var(--green-dark);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.8px;
}

.mechanism-content h3 {
    margin: 12px 0 20px;

    color: var(--primary);

    font-size: 38px;
    font-weight: 600;

    line-height: 1.2;
}

.mechanism-content h3 strong {
    color: var(--green-dark);
}

.mechanism-content p {
    max-width: 600px;

    color: #667077;

    font-size: 15px;

    line-height: 1.8;
}


/* Mechanism note */

.mechanism-note {
    display: flex;

    gap: 12px;

    margin-top: 25px;

    padding: 17px;

    background: var(--light-green);

    border-left: 3px solid var(--green);

    color: #526069;

    font-size: 13px;

    line-height: 1.6;
}

.mechanism-note i {
    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green-dark);
}


/* =========================================================
   SAFETY
========================================================= */

.product-safety {
    position: relative;
    z-index: 2;

    margin-top: 80px;
}

.product-safety__heading {
    margin-bottom: 35px;
}

.product-safety__heading > span {
    color: var(--green-dark);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.8px;
}

.product-safety__heading h3 {
    margin: 8px 0 0;

    color: var(--primary);

    font-size: 32px;
    font-weight: 600;
}

.safety-card {
    position: relative;

    height: 100%;

    padding: 30px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.safety-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background: var(--green);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.4s ease;
}

.safety-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(184, 202, 82, 0.40);

    box-shadow:
        0 15px 32px rgba(36, 85, 127, 0.08);
}

.safety-card:hover::before {
    transform: scaleX(1);
}

.safety-card > i {
    display: inline-flex;

    margin-bottom: 18px;

    color: var(--green-dark);

    font-size: 25px;
}

.safety-card h4 {
    margin: 0 0 10px;

    color: var(--primary);

    font-size: 19px;
    font-weight: 600;
}

.safety-card p {
    margin: 0;

    color: #687278;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.product-detail-cta {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 90px;

    padding: 45px 50px;

    background: var(--green);

    border-radius: 12px;

    overflow: hidden;
}

.product-detail-cta::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    border: 40px solid rgba(255,255,255,0.10);

    animation:
        ctaCircle 10s linear infinite;
}

@keyframes ctaCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.product-detail-cta > div {
    position: relative;
    z-index: 2;
}

.product-detail-cta span {
    color: rgba(36,85,127,0.70);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.product-detail-cta h3 {
    margin: 8px 0 0;

    color: var(--primary);

    font-size: 27px;
    font-weight: 600;
}

.product-detail-cta a {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 30px;

    background: var(--primary);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
}

.product-detail-cta a:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(36, 85, 127, 0.18);
}

.product-detail-cta a i {
    color: var(--green);

    transition:
        transform 0.3s ease;
}

.product-detail-cta a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.product-disclaimer {
    padding: 35px 0;

    background: #eef2e9;
}

.product-disclaimer__inner {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    max-width: 1000px;

    margin: 0 auto;
}

.product-disclaimer__inner > i {
    flex-shrink: 0;

    margin-top: 3px;

    color: var(--green-dark);

    font-size: 18px;
}

.product-disclaimer__inner p {
    margin: 0;

    color: #70797d;

    font-size: 12px;

    line-height: 1.8;
}

.product-disclaimer__inner strong {
    color: var(--primary);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 75px 0 0;

    background: #173d5c;

    color: rgba(255,255,255,0.70);
}

.footer-logo {
    display: inline-block;

    margin-bottom: 20px;
}

.footer-logo img {
    width: 175px;

    filter: brightness(0) invert(1);
}

.site-footer p {
    max-width: 350px;

    margin: 0;

    color: rgba(255,255,255,0.62);

    font-size: 14px;

    line-height: 1.8;
}

.site-footer h4 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.site-footer ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer ul li {
    margin-bottom: 11px;
}

.site-footer ul li a {
    color: rgba(255,255,255,0.62);

    font-size: 14px;
}

.site-footer ul li a:hover {
    color: var(--green);

    padding-left: 4px;
}

.footer-contact li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: rgba(255,255,255,0.62);

    font-size: 14px;

    line-height: 1.6;
}

.footer-contact li i {
    width: 18px;

    margin-top: 4px;

    color: var(--green);
}

.footer-bottom {
    margin-top: 55px;

    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,0.10);

    text-align: center;
}

.footer-bottom p {
    max-width: none;

    margin: 0;

    color: rgba(255,255,255,0.45);

    font-size: 12px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .site-header .nav-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .header-btn {
        margin-left: 10px;

        padding: 12px 17px;
    }

    .product-gallery__image {
        height: 480px;
    }

    .product-gallery__image img {
        height: 370px;
    }

    .product-detail__content h1 {
        font-size: 45px;
    }

    .product-overview {
        padding: 45px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .site-header .navbar {
        min-height: 80px;
    }

    .site-header .navbar-brand img {
        width: 155px;
    }

    .site-header .navbar-collapse {
        padding: 15px 0 25px;
    }

    .site-header .navbar-nav {
        gap: 0;
    }

    .site-header .nav-link {
        padding: 12px 0 !important;
    }

    .site-header .nav-link::after {
        display: none;
    }

    .header-btn {
        margin: 12px 0 0;
    }

    .inner-banner {
        min-height: 310px;
    }

    .inner-banner__content {
        padding: 60px 0;
    }

    .inner-banner__content h1 {
        font-size: 45px;
    }

    .product-detail {
        padding: 60px 0 80px;
    }

    .product-detail__content {
        padding-left: 0;
    }

    .product-gallery {
        margin-bottom: 35px;
    }

    .product-gallery__image {
        height: 500px;
    }

    .product-gallery__image img {
        height: 390px;
    }

    .product-info-section {
        padding: 80px 0;
    }

    .product-overview {
        padding: 40px;
    }

    .product-applications {
        padding: 50px;
    }

    .product-mechanism {
        padding-top: 75px;
    }

    .product-detail-cta {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   MOBILE TABLET
========================================================= */

@media (max-width: 767px) {

    .inner-banner {
        min-height: 270px;
    }

    .inner-banner__content {
        padding: 50px 0;
    }

    .inner-banner__content h1 {
        font-size: 38px;
    }

    .product-detail {
        padding: 45px 0 65px;
    }

    .product-detail__breadcrumb {
        margin-bottom: 30px;
    }

    .product-gallery {
        gap: 10px;
    }

    .product-gallery__thumbs {
        width: 68px;

        gap: 9px;
    }

    .product-gallery__thumbs button {
        width: 68px;
        height: 68px;
    }

    .product-gallery__image {
        height: 410px;

        padding: 25px;
    }

    .product-gallery__image::before {
        width: 270px;
        height: 270px;
    }

    .product-gallery__image::after {
        width: 210px;
        height: 210px;
    }

    .product-gallery__image img {
        height: 320px;
    }

    .product-detail__content h1 {
        font-size: 38px;
    }

    .product-info-heading {
        margin-bottom: 45px;
    }

    .product-info-heading h2 {
        font-size: 34px;
    }

    .product-overview {
        padding: 30px;
    }

    .product-overview__content h3 {
        font-size: 29px;
    }

    .product-highlight-box {
        padding: 30px;
    }

    .product-applications {
        margin-top: 70px;

        padding: 40px 30px;
    }

    .product-applications__heading h3 {
        font-size: 31px;
    }

    .product-mechanism {
        padding-top: 65px;
    }

    .mechanism-visual {
        height: 300px;
    }

    .mechanism-content h3 {
        font-size: 31px;
    }

    .product-safety {
        margin-top: 60px;
    }

    .product-detail-cta {
        margin-top: 65px;

        padding: 35px 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .site-header .navbar-brand img {
        width: 140px;
    }

    .inner-banner {
        min-height: 230px;
    }

    .inner-banner__content {
        padding: 40px 0;
    }

    .inner-banner__content h1 {
        font-size: 32px;
    }

    .inner-banner__content > span {
        font-size: 11px;
    }

    .product-gallery {
        display: flex;

        flex-direction: column;
    }

    .product-gallery__carousel {
        order: 1;
    }

    .product-gallery__thumbs {
        order: 2;

        width: 100%;

        flex-direction: row;

        gap: 8px;

        margin-top: 10px;
    }

    .product-gallery__thumbs button {
        width: 64px;
        height: 64px;
    }

    .product-gallery__thumbs button.active::before {
        left: 10px;
        right: 10px;

        top: auto;
        bottom: 0;

        width: auto;
        height: 3px;
    }

    .product-gallery__image {
        height: 350px;

        padding: 20px;
    }

    .product-gallery__image::before {
        width: 230px;
        height: 230px;
    }

    .product-gallery__image::after {
        width: 180px;
        height: 180px;
    }

    .product-gallery__image img {
        height: 275px;
    }

    .product-gallery__carousel .carousel-control-prev,
    .product-gallery__carousel .carousel-control-next {
        width: 38px;
        height: 38px;

        bottom: 15px;
    }

    .product-gallery__carousel .carousel-control-prev {
        left: 15px;
    }

    .product-gallery__carousel .carousel-control-next {
        left: 60px;
    }

    .product-detail__icon {
        width: 62px;
        height: 62px;
    }

    .product-detail__icon img {
        width: 30px;
        height: 30px;
    }

    .product-detail__content h1 {
        font-size: 34px;
    }

    .product-detail__intro {
        font-size: 15px;
    }

    .product-detail__info-item {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

    .product-detail__info-item strong {
        text-align: left;
    }

    .product-detail__btn {
        width: 100%;
    }

    .product-info-section {
        padding: 60px 0;
    }

    .product-info-heading h2 {
        font-size: 30px;
    }

    .product-info-heading p {
        font-size: 14px;
    }

    .product-overview {
        padding: 25px;
    }

    .product-overview__content h3 {
        font-size: 26px;
    }

    .product-overview__content p {
        font-size: 14px;
    }

    .product-highlight-box {
        min-height: 250px;

        padding: 28px;
    }

    .product-key-info {
        padding-top: 65px;
    }

    .product-section-heading h3 {
        font-size: 28px;
    }

    .product-spec-card {
        padding: 25px 20px;
    }

    .product-applications {
        padding: 30px 20px;
    }

    .product-applications__heading h3 {
        font-size: 28px;
    }

    .application-item {
        gap: 15px;
    }

    .application-item__number {
        width: 40px;
        height: 40px;
    }

    .application-item h4 {
        font-size: 17px;
    }

    .application-item p {
        font-size: 13px;
    }

    .mechanism-circle {
        width: 120px;
        height: 120px;

        font-size: 42px;
    }

    .ring-one {
        width: 180px;
        height: 180px;
    }

    .ring-two {
        width: 240px;
        height: 240px;
    }

    .mechanism-content h3 {
        font-size: 29px;
    }

    .mechanism-content p {
        font-size: 14px;
    }

    .product-detail-cta {
        padding: 30px 22px;
    }

    .product-detail-cta h3 {
        font-size: 22px;
    }

    .product-detail-cta a {
        width: 100%;

        justify-content: center;
    }

    .product-disclaimer {
        padding: 28px 0;
    }

    .product-disclaimer__inner {
        gap: 10px;
    }

    .product-disclaimer__inner p {
        font-size: 11px;
    }

    .site-footer {
        padding-top: 55px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   PRODUCT CAROUSEL CONTROLS
========================================================= */

.product-gallery__carousel .carousel-control-prev,
.product-gallery__carousel .carousel-control-next {
    position: absolute;

    top: auto;
    bottom: 22px;

    width: 46px;
    height: 46px;

    margin: 0;

    opacity: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #24557f;

    transition:
        background 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* Previous */

.product-gallery__carousel .carousel-control-prev {
    left: 22px;
}


/* Next */

.product-gallery__carousel .carousel-control-next {
    left: 78px;
    right: auto;
}


/* =========================================================
   ARROW ICON
========================================================= */

.product-gallery__carousel .carousel-control-prev-icon,
.product-gallery__carousel .carousel-control-next-icon {
    width: 15px;
    height: 15px;

    background-size: 15px 15px;

    opacity: 1;
}


/* =========================================================
   HOVER
========================================================= */

.product-gallery__carousel .carousel-control-prev:hover,
.product-gallery__carousel .carousel-control-next:hover {
    background: #b8ca52;

    transform: translateY(-4px);

    box-shadow:
        0 8px 18px rgba(36, 85, 127, 0.20);
}


/* =========================================================
   FOCUS
========================================================= */

.product-gallery__carousel .carousel-control-prev:focus,
.product-gallery__carousel .carousel-control-next:focus {
    opacity: 1;

    outline: none;

    box-shadow:
        0 0 0 4px rgba(184, 202, 82, 0.20);
}


/* =========================================================
   ARROW ANIMATION
========================================================= */

.product-gallery__carousel .carousel-control-prev-icon {
    transition:
        transform 0.3s ease;
}

.product-gallery__carousel .carousel-control-next-icon {
    transition:
        transform 0.3s ease;
}

.product-gallery__carousel .carousel-control-prev:hover
.carousel-control-prev-icon {
    transform: translateX(-3px);
}

.product-gallery__carousel .carousel-control-next:hover
.carousel-control-next-icon {
    transform: translateX(3px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .product-gallery__carousel .carousel-control-prev,
    .product-gallery__carousel .carousel-control-next {
        width: 38px;
        height: 38px;

        bottom: 15px;
    }

    .product-gallery__carousel .carousel-control-prev {
        left: 15px;
    }

    .product-gallery__carousel .carousel-control-next {
        left: 60px;
    }

    .product-gallery__carousel .carousel-control-prev-icon,
    .product-gallery__carousel .carousel-control-next-icon {
        width: 12px;
        height: 12px;

        background-size: 12px 12px;
    }

}



/* =========================================================
   PRODUCT HIGHLIGHT BOX
========================================================= */

.product-highlight-box {
    position: relative;

    min-height: 280px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 40px;

    background: #24557f;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 15px 35px rgba(36, 85, 127, 0.12);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =========================================================
   DECORATIVE BACKGROUND CIRCLE
========================================================= */

.product-highlight-box::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -130px;
    top: -140px;

    border-radius: 50%;

    border: 45px solid rgba(184, 202, 82, 0.08);

    animation:
        highlightRotate 12s linear infinite;

    pointer-events: none;
}


/* Second decorative circle */

.product-highlight-box::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -90px;

    border-radius: 50%;

    background:
        rgba(184, 202, 82, 0.08);

    animation:
        highlightPulse 5s ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.product-highlight-box__icon {
    position: relative;

    z-index: 3;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #ffffff;

    border: 5px solid rgba(184, 202, 82, 0.20);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


/* Rotating transparent ring */

.product-highlight-box__icon::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    animation:
        highlightIconRotate 3s linear infinite;
}


/* Outer pulse */

.product-highlight-box__icon::after {
    content: "";

    position: absolute;

    inset: -13px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.18);

    animation:
        highlightIconPulse 2.5s ease-in-out infinite;
}


/* Icon image */

.product-highlight-box__icon img {
    position: relative;

    z-index: 4;

    width: 36px;
    height: 36px;

    object-fit: contain;

    transition:
        transform 0.4s ease;
}


/* =========================================================
   ICON HOVER
========================================================= */

.product-highlight-box:hover
.product-highlight-box__icon {
    transform: scale(1.08);

    border-color:
        rgba(184, 202, 82, 0.65);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.15);
}


.product-highlight-box:hover
.product-highlight-box__icon img {
    transform: rotate(8deg) scale(1.08);
}


/* =========================================================
   TEXT
========================================================= */

.product-highlight-box > span,
.product-highlight-box > h4,
.product-highlight-box > p {
    position: relative;

    z-index: 3;
}


.product-highlight-box > span {
    display: block;

    margin-bottom: 8px;

    color: #b8ca52;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.8px;
}


.product-highlight-box > h4 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 29px;
    font-weight: 600;

    line-height: 1.2;
}


.product-highlight-box > p {
    max-width: 390px;

    margin: 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CARD HOVER
========================================================= */

.product-highlight-box:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 42px rgba(36, 85, 127, 0.18);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes highlightRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes highlightPulse {

    0%,
    100% {
        transform: scale(0.95);

        opacity: 0.5;
    }

    50% {
        transform: scale(1.08);

        opacity: 1;
    }

}


@keyframes highlightIconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes highlightIconPulse {

    0% {
        transform: scale(0.90);

        opacity: 0;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        transform: scale(1.18);

        opacity: 0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .product-highlight-box {
        min-height: 270px;

        padding: 35px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .product-highlight-box {
        min-height: 250px;

        padding: 30px;
    }

    .product-highlight-box__icon {
        width: 62px;
        height: 62px;

        margin-bottom: 22px;
    }

    .product-highlight-box__icon img {
        width: 32px;
        height: 32px;
    }

    .product-highlight-box > h4 {
        font-size: 25px;
    }

    .product-highlight-box > p {
        font-size: 13px;
    }

}










/* =========================================================
   PRIVACY POLICY
========================================================= */

.privacy-policy {
    position: relative;

    padding: 90px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


/* Background radial effect */

.privacy-policy::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 202, 82, 0.14),
            rgba(184, 202, 82, 0) 70%
        );

    pointer-events: none;
}


/* =========================================================
   INTRO
========================================================= */

.privacy-policy__intro {
    position: relative;
    z-index: 2;


    margin: 0 auto 70px;

    text-align: center;
}


.privacy-policy__label {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #9caf35;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;
}


.privacy-policy__label::before,
.privacy-policy__label::after {
    content: "";

    width: 28px;
    height: 2px;

    background: #b8ca52;
}


.privacy-policy__intro h2 {
    margin: 0 0 20px;

    color: #24557f;

    font-size: 44px;
    font-weight: 700;

    line-height: 1.2;
}


.privacy-policy__intro p {
    max-width: 760px;

    margin: 0 auto;

    color: #687278;

    font-size: 16px;

    line-height: 1.85;
}


.privacy-policy__updated {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    padding: 9px 17px;

    border-radius: 30px;

    background: #f3f7df;

    color: #728037;

    font-size: 12px;
}


.privacy-policy__updated i {
    color: #9caf35;
}


/* =========================================================
   CONTENT
========================================================= */

.privacy-policy__content {
    position: relative;
    z-index: 2;



    margin: 0 auto;
}


/* =========================================================
   POLICY SECTION
========================================================= */

.privacy-policy__section {
    position: relative;

    display: flex;

    gap: 30px;

    padding: 38px 0;

    border-bottom: 1px solid #e5e9e7;
}


.privacy-policy__section:first-child {
    border-top: 1px solid #e5e9e7;
}


/* =========================================================
   NUMBER
========================================================= */

.privacy-policy__number {
    position: relative;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #24557f;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(36, 85, 127, 0.12);

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


.privacy-policy__number::before {
    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    animation:
        privacyNumberRotate 4s linear infinite;
}


.privacy-policy__section:hover
.privacy-policy__number {
    background: #b8ca52;

    transform: scale(1.08);
}


@keyframes privacyNumberRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   BODY
========================================================= */

.privacy-policy__body {
    flex: 1;
}


.privacy-policy__body h3 {
    margin: 0 0 14px;

    color: #24557f;

    font-size: 25px;
    font-weight: 600;

    line-height: 1.3;
}


.privacy-policy__body p {
    max-width: 820px;

    margin: 0 0 15px;

    color: #697379;

    font-size: 15px;

    line-height: 1.85;
}


.privacy-policy__body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LIST
========================================================= */

.privacy-policy__body ul {
    margin: 18px 0 0;

    padding: 0;

    list-style: none;
}


.privacy-policy__body li {
    position: relative;

    padding-left: 25px;

    margin-bottom: 11px;

    color: #697379;

    font-size: 14px;

    line-height: 1.7;
}


.privacy-policy__body li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 9px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #b8ca52;

    box-shadow:
        0 0 0 4px rgba(184, 202, 82, 0.12);
}


/* =========================================================
   CONTACT BOX
========================================================= */

.privacy-contact {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;
}


.privacy-contact__item {
    min-width: 250px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px 20px;

    background: #f7f9f2;

    border: 1px solid #e4e9dc;

    border-radius: 10px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.privacy-contact__item:hover {
    transform: translateY(-4px);

    border-color: rgba(184, 202, 82, 0.5);

    box-shadow:
        0 10px 25px rgba(36, 85, 127, 0.08);
}


.privacy-contact__item > i {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffffff;

    color: #b8ca52;

    box-shadow:
        0 4px 12px rgba(36, 85, 127, 0.07);
}


.privacy-contact__item span {
    display: block;

    margin-bottom: 3px;

    color: #899196;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.privacy-contact__item a {
    color: #24557f;

    font-size: 14px;
    font-weight: 600;
}


.privacy-contact__item a:hover {
    color: #9caf35;
}


/* =========================================================
   ANIMATION
========================================================= */

.privacy-policy__section {
    opacity: 0;

    transform: translateY(25px);

    animation:
        privacyReveal 0.7s ease forwards;
}


.privacy-policy__section:nth-child(1) {
    animation-delay: 0.05s;
}

.privacy-policy__section:nth-child(2) {
    animation-delay: 0.10s;
}

.privacy-policy__section:nth-child(3) {
    animation-delay: 0.15s;
}

.privacy-policy__section:nth-child(4) {
    animation-delay: 0.20s;
}

.privacy-policy__section:nth-child(5) {
    animation-delay: 0.25s;
}

.privacy-policy__section:nth-child(6) {
    animation-delay: 0.30s;
}

.privacy-policy__section:nth-child(7) {
    animation-delay: 0.35s;
}

.privacy-policy__section:nth-child(8) {
    animation-delay: 0.40s;
}

.privacy-policy__section:nth-child(9) {
    animation-delay: 0.45s;
}

.privacy-policy__section:nth-child(10) {
    animation-delay: 0.50s;
}


@keyframes privacyReveal {

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .privacy-policy {
        padding: 70px 0 85px;
    }

    .privacy-policy__intro h2 {
        font-size: 38px;
    }

    .privacy-policy__section {
        gap: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .privacy-policy {
        padding: 55px 0 70px;
    }

    .privacy-policy__intro {
        margin-bottom: 45px;
    }

    .privacy-policy__intro h2 {
        font-size: 32px;
    }

    .privacy-policy__intro p {
        font-size: 14px;
    }

    .privacy-policy__section {
        gap: 17px;

        padding: 30px 0;
    }

    .privacy-policy__number {
        width: 48px;
        height: 48px;

        font-size: 11px;
    }

    .privacy-policy__body h3 {
        font-size: 21px;
    }

    .privacy-policy__body p {
        font-size: 14px;
    }

    .privacy-contact {
        flex-direction: column;
    }

    .privacy-contact__item {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .privacy-policy__intro h2 {
        font-size: 28px;
    }

    .privacy-policy__label {
        font-size: 10px;

        letter-spacing: 1.5px;
    }

    .privacy-policy__section {
        display: block;
    }

    .privacy-policy__number {
        margin-bottom: 20px;
    }

    .privacy-policy__body h3 {
        font-size: 20px;
    }

}





/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
    position: relative;

    padding: 95px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND EFFECTS
========================================================= */

.faq-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -300px;
    top: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 202, 82, 0.15) 0%,
            rgba(184, 202, 82, 0) 70%
        );

    pointer-events: none;
}


.faq-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -250px;
    bottom: -220px;

    border-radius: 50%;

    border: 55px solid rgba(36, 85, 127, 0.035);

    animation:
        faqBackgroundRotate 14s linear infinite;

    pointer-events: none;
}


@keyframes faqBackgroundRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   HEADING
========================================================= */

.faq-section__heading {
    position: relative;

    z-index: 2;

  

    margin: 0 auto 60px;
}


.faq-section__label {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #9caf35;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;
}


.faq-section__label::before,
.faq-section__label::after {
    content: "";

    width: 32px;
    height: 2px;

    background: #b8ca52;
}


.faq-section__heading h2 {
    margin: 0;

    color: #24557f;

    font-size: 44px;
    font-weight: 700;

    line-height: 1.2;
}


.faq-section__heading h2 span {
    color: #b8ca52;
}


.faq-section__heading p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #687278;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   ACCORDION WRAPPER
========================================================= */

.faq-section__accordion {
    position: relative;

    z-index: 2;



    margin: 0 auto;
}


/* =========================================================
   ACCORDION ITEM
========================================================= */

.faq-section .accordion-item {
    margin-bottom: 15px;

    background: #ffffff;

    border: 1px solid #e4e9e7 !important;

    border-radius: 10px !important;

    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(36, 85, 127, 0.035);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}


.faq-section .accordion-item:hover {
    border-color:
        rgba(184, 202, 82, 0.45) !important;

    box-shadow:
        0 10px 28px rgba(36, 85, 127, 0.07);

    transform: translateY(-2px);
}


/* =========================================================
   ACCORDION BUTTON
========================================================= */

.faq-section .accordion-button {
    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;

    padding: 18px 25px;

    background: #ffffff;

    color: #24557f;

    border: 0;

    box-shadow: none !important;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 600;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


/* Remove Bootstrap focus */

.faq-section .accordion-button:focus {
    border: 0;

    box-shadow: none !important;
}


/* =========================================================
   ACTIVE BUTTON
========================================================= */

.faq-section .accordion-button:not(.collapsed) {
    background: #f3f7df;

    color: #24557f;
}


/* =========================================================
   NUMBER
========================================================= */

.faq-number {
    position: relative;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-right: 18px;

    border-radius: 50%;

    background: #24557f;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}


.faq-number::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    opacity: 0;

    transition: opacity 0.3s ease;

    animation:
        faqNumberRotate 3s linear infinite;
}


.accordion-button:not(.collapsed) .faq-number {
    background: #b8ca52;

    transform: scale(1.06);
}


.accordion-button:not(.collapsed) .faq-number::before {
    opacity: 1;
}


@keyframes faqNumberRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   QUESTION
========================================================= */

.faq-question {
    flex: 1;

    padding-right: 15px;
}


/* =========================================================
   BOOTSTRAP ARROW
========================================================= */

.faq-section .accordion-button::after {
    width: 11px;
    height: 11px;

    margin-left: 15px;

    background-size: 11px;

    transition:
        transform 0.35s ease;
}


.faq-section .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}


/* =========================================================
   ACCORDION BODY
========================================================= */

.faq-section .accordion-body {
    padding: 0 75px 28px 86px;

    color: #697379;

    background: #f3f7df;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   BODY TOP LINE
========================================================= */

.faq-section .accordion-collapse {
    position: relative;
}


.faq-section .accordion-collapse::before {
    content: "";

    position: absolute;

    left: 86px;
    right: 25px;
    top: 0;

    height: 1px;

    background: rgba(184, 202, 82, 0.25);
}


/* =========================================================
   HOVER QUESTION
========================================================= */

.faq-section .accordion-button:hover {
    background: #fafcf5;
}


.faq-section .accordion-button:not(.collapsed):hover {
    background: #f3f7df;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .faq-section {
        padding: 65px 0 75px;
    }


    .faq-section__heading {
        margin-bottom: 40px;
    }


    .faq-section__heading h2 {
        font-size: 34px;
    }


    .faq-section__heading p {
        font-size: 14px;
    }


    .faq-section .accordion-button {
        min-height: 72px;

        padding: 14px 18px;

        font-size: 14px;
    }


    .faq-number {
        width: 38px;
        height: 38px;

        margin-right: 13px;

        font-size: 10px;
    }


    .faq-section .accordion-body {
        padding:
            0
            20px
            25px
            69px;

        font-size: 13px;
    }


    .faq-section .accordion-collapse::before {
        left: 69px;
        right: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .faq-section {
        padding: 55px 0 65px;
    }


    .faq-section__heading h2 {
        font-size: 29px;
    }


    .faq-section__label {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .faq-section__label::before,
    .faq-section__label::after {
        width: 20px;
    }


    .faq-section .accordion-button {
        padding: 13px 14px;

        font-size: 13px;
    }


    .faq-number {
        width: 35px;
        height: 35px;

        margin-right: 10px;
    }


    .faq-question {
        padding-right: 5px;
    }


    .faq-section .accordion-body {
        padding:
            0
            18px
            22px
            59px;

        font-size: 12.5px;
    }


    .faq-section .accordion-collapse::before {
        left: 59px;
        right: 18px;
    }

}

/* =========================================================
   CAREER LISTING
========================================================= */

.career-listing {
    position: relative;

    padding: 90px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


/* Background */

.career-listing::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    top: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 202, 82, 0.14),
            rgba(184, 202, 82, 0) 70%
        );

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.career-listing__heading {
    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: 0 auto 60px;
}


.career-listing__heading > span {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    color: #9caf35;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;
}


.career-listing__heading > span::before,
.career-listing__heading > span::after {
    content: "";

    width: 28px;
    height: 2px;

    background: #b8ca52;
}


.career-listing__heading h2 {
    margin: 0;

    color: #24557f;

    font-size: 43px;
    font-weight: 700;

    line-height: 1.2;
}


.career-listing__heading h2 strong {
    color: #b8ca52;
}


.career-listing__heading p {
    max-width: 650px;

    margin: 18px auto 0;

    color: #687278;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   CARD
========================================================= */

.career-listing-card {
    position: relative;

    height: 100%;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e3e8e5;

    border-radius: 14px;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* Top green line */

.career-listing-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background: #b8ca52;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.45s ease;
}


.career-listing-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(184, 202, 82, 0.45);

    box-shadow:
        0 18px 38px rgba(36, 85, 127, 0.10);
}


.career-listing-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   CARD TOP
========================================================= */

.career-listing-card__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


/* =========================================================
   ICON
========================================================= */

.career-listing-card__icon {
    position: relative;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f3f7df;

    color: #9caf35;

    font-size: 22px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}


.career-listing-card__icon::before {
    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    opacity: 0;

    transition: opacity 0.3s ease;

    animation:
        careerIconRotate 3s linear infinite;
}


.career-listing-card:hover
.career-listing-card__icon {
    transform: scale(1.08);

    background: #b8ca52;

    color: #ffffff;
}


.career-listing-card:hover
.career-listing-card__icon::before {
    opacity: 1;
}


@keyframes careerIconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Number */

.career-listing-card__top > span {
    color: rgba(36, 85, 127, 0.08);

    font-size: 38px;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   TITLE
========================================================= */

.career-listing-card h3 {
    min-height: 48px;

    margin: 0 0 13px;

    color: #24557f;

    font-size: 20px;
    font-weight: 600;

    line-height: 1.3;
}


.career-listing-card p {
    min-height: 72px;

    margin: 0 0 23px;

    color: #737c81;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   META
========================================================= */

.career-listing-card__meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    padding: 16px 0;

    border-top: 1px solid #e7ebe9;

    border-bottom: 1px solid #e7ebe9;
}


.career-listing-card__meta span {
    color: #858e92;

    font-size: 11px;
}


.career-listing-card__meta i {
    margin-right: 5px;

    color: #b8ca52;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.career-listing-card__btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    color: #24557f;

    font-size: 13px;
    font-weight: 600;

    transition:
        color 0.3s ease;
}


.career-listing-card__btn i {
    color: #b8ca52;

    transition:
        transform 0.3s ease;
}


.career-listing-card__btn:hover {
    color: #9caf35;
}


.career-listing-card__btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .career-listing {
        padding: 75px 0 90px;
    }

    .career-listing__heading h2 {
        font-size: 38px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .career-listing {
        padding: 60px 0 75px;
    }

    .career-listing__heading {
        margin-bottom: 40px;
    }

    .career-listing__heading h2 {
        font-size: 33px;
    }

    .career-listing__heading p {
        font-size: 14px;
    }

    .career-listing-card {
        padding: 27px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .career-listing__heading h2 {
        font-size: 29px;
    }

    .career-listing__heading > span {
        font-size: 10px;

        letter-spacing: 1.5px;
    }

    .career-listing-card h3 {
        font-size: 19px;
    }

}





/* =========================================================
   CAREER DETAIL
========================================================= */

.career-detail {
    position: relative;

    padding: 90px 0 110px;

    background: #ffffff;

    overflow: hidden;
}


/* Background radial */

.career-detail::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    left: -330px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 202, 82, 0.14),
            rgba(184, 202, 82, 0) 70%
        );

    pointer-events: none;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.career-detail__content {
    position: relative;

    z-index: 2;
}


/* Top */

.career-detail__top {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-bottom: 35px;
}


.career-detail__icon {
    position: relative;

    width: 72px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f3f7df;

    color: #9caf35;

    font-size: 25px;
}


.career-detail__icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px solid rgba(184, 202, 82, 0.35);

    border-top-color: #b8ca52;

    animation: careerDetailRotate 3s linear infinite;
}


@keyframes careerDetailRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.career-detail__top > div:last-child > span {
    color: #9caf35;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.8px;
}


.career-detail__top h1 {
    margin: 6px 0 0;

    color: #24557f;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.2;
}


/* =========================================================
   META
========================================================= */

.career-detail__meta {
    display: flex;

    flex-wrap: wrap;

    gap: 0;

    margin-bottom: 45px;

    border-top: 1px solid #e4e9e7;

    border-bottom: 1px solid #e4e9e7;
}


.career-detail__meta > div {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

    min-width: 160px;

    padding: 18px 15px;

    border-right: 1px solid #e4e9e7;
}


.career-detail__meta > div:last-child {
    border-right: 0;
}


.career-detail__meta > div > i {
    color: #b8ca52;

    font-size: 17px;
}


.career-detail__meta span {
    display: flex;

    flex-direction: column;

    gap: 3px;

    color: #24557f;

    font-size: 13px;
    font-weight: 600;
}


.career-detail__meta small {
    color: #90979a;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1px;
}


/* =========================================================
   CONTENT BLOCK
========================================================= */

.career-detail__block {
    margin-bottom: 42px;
}


.career-detail__block h2 {
    position: relative;

    margin: 0 0 18px;

    padding-left: 17px;

    color: #24557f;

    font-size: 23px;
    font-weight: 600;
}


.career-detail__block h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 4px;
    height: 24px;

    border-radius: 5px;

    background: #b8ca52;
}


.career-detail__block p {
    margin: 0 0 15px;

    color: #697379;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   LIST
========================================================= */

.career-detail__list {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.career-detail__list li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: #697379;

    font-size: 14px;

    line-height: 1.7;
}


.career-detail__list li i {
    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-top: 2px;

    border-radius: 50%;

    background: #f3f7df;

    color: #9caf35;

    font-size: 9px;
}


/* =========================================================
   OFFER LIST
========================================================= */

.career-offer-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}


.career-offer-list > div {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border: 1px solid #e4e9e7;

    border-radius: 8px;

    color: #24557f;

    font-size: 12px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.career-offer-list > div:hover {
    transform: translateY(-3px);

    border-color: rgba(184, 202, 82, 0.5);

    background: #f8faf4;
}


.career-offer-list i {
    color: #b8ca52;

    font-size: 17px;
}


/* =========================================================
   APPLY BOX
========================================================= */

.career-apply {
    position: sticky;

    top: 30px;

    padding: 38px;

    background: #24557f;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(36, 85, 127, 0.14);
}


.career-apply::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    top: -150px;

    border-radius: 50%;

    border: 45px solid rgba(184, 202, 82, 0.08);

    animation: applyCircle 12s linear infinite;
}


@keyframes applyCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Heading */

.career-apply__heading {
    position: relative;

    z-index: 2;

    margin-bottom: 28px;
}


.career-apply__heading > span {
    color: #b8ca52;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.8px;
}


.career-apply__heading h2 {
    margin: 7px 0 8px;

    color: #ffffff;

    font-size: 32px;
    font-weight: 600;
}


.career-apply__heading h2 strong {
    color: #b8ca52;
}


.career-apply__heading p {
    margin: 0;

    color: rgba(255,255,255,0.68);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   FORM
========================================================= */

.career-apply form {
    position: relative;

    z-index: 2;
}


.career-form__group {
    margin-bottom: 17px;
}


.career-form__group label {
    display: block;

    margin-bottom: 7px;

    color: rgba(255,255,255,0.85);

    font-size: 11px;
    font-weight: 500;
}


.career-form__input,
.career-form__textarea,
.career-form__file {
    position: relative;
}


.career-form__input i {
    position: absolute;

    left: 15px;
    top: 50%;

    z-index: 2;

    color: #b8ca52;

    font-size: 13px;

    transform: translateY(-50%);
}


.career-form__input input,
.career-form__input select,
.career-form__textarea textarea {
    width: 100%;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: 7px;

    outline: none;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.career-form__input input,
.career-form__input select {
    height: 48px;

    padding:
        0
        15px
        0
        42px;
}


.career-form__textarea textarea {
    min-height: 105px;

    padding: 14px 15px;

    resize: vertical;
}


.career-form__input input::placeholder,
.career-form__textarea textarea::placeholder {
    color: rgba(255,255,255,0.40);
}


.career-form__input select {
    appearance: none;

    cursor: pointer;
}


.career-form__input select option {
    color: #24557f;

    background: #ffffff;
}


.career-form__input input:focus,
.career-form__input select:focus,
.career-form__textarea textarea:focus {
    border-color: #b8ca52;

    background: rgba(255,255,255,0.11);

    box-shadow:
        0 0 0 3px rgba(184,202,82,0.10);
}


/* =========================================================
   FILE UPLOAD
========================================================= */

.career-form__file {
    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    padding: 15px;

    border: 1px dashed rgba(255,255,255,0.25);

    border-radius: 7px;

    background: rgba(255,255,255,0.05);

    cursor: pointer;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}


.career-form__file:hover {
    border-color: #b8ca52;

    background: rgba(184,202,82,0.07);
}


.career-form__file i {
    color: #b8ca52;

    font-size: 20px;
}


.career-form__file input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


.career-form__file span {
    color: rgba(255,255,255,0.48);

    font-size: 10px;
}


/* =========================================================
   SUBMIT
========================================================= */

.career-form__submit {
    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;

    border: 0;

    border-radius: 30px;

    background: #b8ca52;

    color: #24557f;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.career-form__submit i {
    transition:
        transform 0.3s ease;
}


.career-form__submit:hover {
    background: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.12);
}


.career-form__submit:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .career-detail {
        padding: 70px 0 85px;
    }

    .career-apply {
        position: relative;

        top: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .career-detail {
        padding: 55px 0 70px;
    }

    .career-detail__top h1 {
        font-size: 30px;
    }

    .career-detail__icon {
        width: 60px;
        height: 60px;

        font-size: 21px;
    }

    .career-detail__meta {
        display: block;
    }

    .career-detail__meta > div {
        border-right: 0;

        border-bottom: 1px solid #e4e9e7;
    }

    .career-detail__meta > div:last-child {
        border-bottom: 0;
    }

    .career-offer-list {
        grid-template-columns: 1fr;
    }

    .career-apply {
        padding: 30px 25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .career-detail__top {
        align-items: flex-start;

        gap: 15px;
    }

    .career-detail__top h1 {
        font-size: 26px;
    }

    .career-detail__top > div:last-child > span {
        font-size: 9px;
    }

    .career-detail__block h2 {
        font-size: 21px;
    }

    .career-detail__block p,
    .career-detail__list li {
        font-size: 13px;
    }

    .career-apply__heading h2 {
        font-size: 28px;
    }

}






/* =========================================================
   SLIDER-C CAPTION ANIMATIONS
   ========================================================= */

/* Initial state */
.slider-C .carousel-item .slider-C__eyebrow,
.slider-C .carousel-item .slider-C__title,
.slider-C .carousel-item .slider-C__tagline,
.slider-C .carousel-item .slider-C__wellness,
.slider-C .carousel-item .health-badge {
    opacity: 0;
}


/* =========================================================
   1. EYEBROW
   ========================================================= */

.slider-C .carousel-item.active .slider-C__eyebrow {
    animation: captionFadeDown 0.8s ease forwards;
    animation-delay: 0.15s;
}


/* =========================================================
   2. MAIN TITLE
   ========================================================= */

.slider-C .carousel-item.active .slider-C__title {
    animation: captionReveal 0.9s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: 0.35s;
}


/* Animate title words separately */
.slider-C .carousel-item.active .slider-C__title span:first-child {
    display: inline-block;
    animation: titleWordLeft 0.8s ease forwards;
    animation-delay: 0.45s;
    opacity: 0;
}

.slider-C .carousel-item.active .slider-C__title .highlight {
    display: inline-block;
    animation: titleWordRight 0.8s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}


/* =========================================================
   3. TAGLINE
   ========================================================= */

.slider-C .carousel-item.active .slider-C__tagline {
    animation: captionFadeUp 0.8s ease forwards;
    animation-delay: 0.85s;
}


/* Small line beside tagline */
.slider-C .carousel-item.active .slider-C__tagline i {
    display: inline-block;
    transform-origin: left center;
    animation: taglineLine 0.7s ease forwards;
    animation-delay: 1.15s;
}


/* =========================================================
   4. WELLNESS TEXT
   ========================================================= */

.slider-C .carousel-item.active .slider-C__wellness {
    animation: wellnessReveal 1s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: 1.05s;
}


/* Title */
.slider-C .carousel-item.active .wellness-title {
    display: inline-block;
    animation: wellnessTitle 0.7s ease forwards;
    animation-delay: 1.15s;
}


/* Script text */
.slider-C .carousel-item.active .wellness-script {
    display: inline-block;
    animation: wellnessScript 0.9s ease forwards;
    animation-delay: 1.35s;
}


/* =========================================================
   5. HEALTH BADGE
   ========================================================= */

.slider-C .carousel-item.active .health-badge {
    animation: badgeReveal 0.9s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: 0.7s;
}


/* Badge icon */
.slider-C .carousel-item.active .health-badge__icon {
    animation: badgeIcon 0.8s ease forwards;
    animation-delay: 0.9s;
}


/* Badge text */
.slider-C .carousel-item.active .health-badge__text {
    animation: badgeText 0.8s ease forwards;
    animation-delay: 1s;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes captionFadeDown {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes captionReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}


@keyframes titleWordLeft {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes titleWordRight {
    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes captionFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes taglineLine {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


@keyframes wellnessReveal {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes wellnessTitle {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes wellnessScript {
    from {
        opacity: 0;
        transform: translateX(25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes badgeReveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes badgeIcon {
    from {
        opacity: 0;
        transform: rotate(-20deg) scale(.7);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}


@keyframes badgeText {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   OPTIONAL: REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .slider-C .carousel-item.active .slider-C__eyebrow,
    .slider-C .carousel-item.active .slider-C__title,
    .slider-C .carousel-item.active .slider-C__title span,
    .slider-C .carousel-item.active .slider-C__tagline,
    .slider-C .carousel-item.active .slider-C__wellness,
    .slider-C .carousel-item.active .wellness-title,
    .slider-C .carousel-item.active .wellness-script,
    .slider-C .carousel-item.active .health-badge,
    .slider-C .carousel-item.active .health-badge__icon,
    .slider-C .carousel-item.active .health-badge__text {
        animation: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }
}


@media (min-width: 1300px) {
.container {max-width: 1290px;}


}





.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: whatsappPulse 2s infinite;
}

/* Hover effect */
.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Tooltip */
.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background: #128C7E;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    opacity: 0;
    white-space: nowrap;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Pulse animation */
@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


.video-container {
    position: relative;
    width: 100%;
    height: 350px; /* Adjust height as needed */
    overflow: hidden;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

.video-modal .modal-body {
    padding: 0;
}


/* Product Listing Card */
.listing-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e8edf2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(20, 50, 80, 0.06);
    transition: all 0.4s ease;
}

.listing-card:hover {
    transform: translateY(-8px);
    border-color: #d7e8e2;
    box-shadow: 0 18px 45px rgba(20, 50, 80, 0.12);
}

/* Image */
.listing-card__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, #f4faf8, #edf5f3);
}

.listing-card__image::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

.listing-card__image > img {
    position: relative;
    z-index: 1;
    max-width: 75%;
    max-height: 170px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.listing-card:hover .listing-card__image > img {
    transform: scale(1.07);
}

/* Floating Icon */
.listing-card__icon {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

.listing-card__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Content */
.listing-card__content {
    padding: 28px 26px 25px;
}

.listing-card__category {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 30px;
    background: #e7f4ef;
    color: #17805f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.listing-card__content h3 {
    margin: 0 0 8px;
    color: #183b45;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
}

.listing-card__description {
    margin-bottom: 22px;
    color: #71818a;
    font-size: 14px;
    line-height: 1.6;
}

/* Details */
.listing-card__details {
    display: grid;
    gap: 13px;
    margin-bottom: 22px;
    padding: 18px 0;
    border-top: 1px solid #edf1f2;
    border-bottom: 1px solid #edf1f2;
}

.detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.detail-item span {
    color: #84939a;
    font-size: 12px;
}

.detail-item strong {
    color: #294b54;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

/* Export Markets */
.listing-card__markets {
    margin-bottom: 24px;
}

.markets-label {
    display: block;
    margin-bottom: 7px;
    color: #183b45;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.listing-card__markets p {
    margin: 0;
    color: #7b898f;
    font-size: 12px;
    line-height: 1.8;
}

/* View Product Link */
.listing-card__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #16805f;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.listing-card__link i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.listing-card__link:hover {
    color: #0f6048;
    gap: 17px;
}

.listing-card__link:hover i {
    transform: translateX(3px);
}






/* Export Markets - Alternative Style */

.listing-card__markets {
    position: relative;
    margin: 28px 0 25px;
    padding: 18px 0 0;
    border-top: 1px solid #e6eeeb;
}

/* Decorative Green Line */
.listing-card__markets::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 3px;
    border-radius: 10px;
    background: #16805f;
}

/* Label */
.markets-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: #183b45;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.markets-label::before {
    content: "\f57d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #16805f;
    font-size: 15px;
}

/* Countries Text */
.listing-card__markets p {
    margin: 0;
    color: #71818a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}

/* Subtle Hover Effect */
.listing-card:hover .listing-card__markets::before {
    width: 75px;
    transition: width 0.4s ease;
}




/* =========================================
   RENEX PHARMA — PREMIUM DARK FOOTER
========================================= */

.footer {
    --footer-bg: #081820;
    --footer-bg-light: #0d2530;
    --footer-card: #102b35;
    --footer-border: rgba(255,255,255,.10);
    --footer-text: #a9b8bd;
    --footer-heading: #ffffff;
    --accent: #b5d334;
    --accent-dark: #8fae16;

    position: relative;
    overflow: hidden;

    padding: 85px 0 0;

    color: var(--footer-text);
    font-family: "Jost", sans-serif;

    background:
        linear-gradient(135deg, #07161d 0%, #0a2029 55%, #0b2b32 100%);
}


/* =========================================
   ABSTRACT BACKGROUND PATTERN
========================================= */

.footer::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .45;
    pointer-events: none;

    background-image:
        radial-gradient(
            circle at 15% 30%,
            rgba(181,211,52,.12) 0,
            rgba(181,211,52,.12) 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,.07) 0,
            rgba(255,255,255,.07) 1px,
            transparent 2px
        );

    background-size: 28px 28px, 35px 35px;
}


/* =========================================
   LARGE DECORATIVE CIRCLES
========================================= */

.footer::after {
    content: "";

    position: absolute;
    width: 600px;
    height: 600px;

    top: -350px;
    right: -180px;

    border: 1px solid rgba(181,211,52,.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(181,211,52,.025),
        0 0 0 70px rgba(181,211,52,.018);

    pointer-events: none;
}


/* =========================================
   MAIN FOOTER
========================================= */

.footer__main {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.55fr
        1fr
        1fr
        1.25fr;

    column-gap: 55px;
    min-height: 305px;
}


/* =========================================
   BRAND
========================================= */

.footer__brand {
    position: relative;
    padding-left: 20px;
}

.footer__brand::before {
    content: "";

    position: absolute;
    left: 0;
    top: 8px;

    width: 3px;
    height: 75px;

    border-radius: 10px;

    background: linear-gradient(
        to bottom,
        var(--accent),
        transparent
    );
}

.footer__logo {
    display: inline-block;
    margin-bottom: 28px;
}

.footer__logo img {
    display: block;
    width: 205px;
    height: auto;
}

.footer__brand address {
    max-width: 290px;
    margin: 0;

    color: #a5b5bb;
    font-size: 15px;
    font-style: normal;
    line-height: 2;
    font-weight: 400;
}


/* =========================================
   COLUMN HEADINGS
========================================= */

.footer__column {
    position: relative;
    z-index: 2;
    padding-top: 5px;
}

.footer__column h3 {
    margin: 0;

    color: var(--footer-heading);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =========================================
   AUTOMATIC HEADING FIX
========================================= */

.footer__social-column h3,
.footer__newsletter h3 {
    font-size: 0;
}

.footer__social-column h3::after {
    content: "FOLLOW US";
    font-size: 14px;
}

.footer__newsletter h3::after {
    content: "NEWSLETTER";
    font-size: 14px;
}


/* =========================================
   HEADING ACCENT LINE
========================================= */

.footer__title-line {
    position: relative;

    width: 58px;
    height: 3px;

    margin-top: 17px;
    margin-bottom: 28px;

    background: var(--accent);
    border-radius: 20px;
}

.footer__title-line::after {
    content: "";

    position: absolute;
    left: 68px;
    top: 1px;

    width: 28px;
    height: 1px;

    background: rgba(255,255,255,.18);
}


/* =========================================
   QUICK LINKS
========================================= */

.footer__column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__column ul li {
    margin-bottom: 12px;
}

.footer__column ul li a {
    position: relative;

    display: inline-flex;
    align-items: center;

    color: #9eafb5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

.footer__column ul li a::before {
    content: "→";

    display: inline-block;

    width: 0;
    overflow: hidden;

    opacity: 0;

    color: var(--accent);
    font-size: 15px;

    transition:
        width .3s ease,
        opacity .3s ease;
}

.footer__column ul li a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

.footer__column ul li a:hover::before {
    width: 18px;
    opacity: 1;
}


/* =========================================
   ACTIVE LINK
========================================= */

.footer__column ul li a.active {
    color: var(--accent);
    font-weight: 500;
}


/* =========================================
   SOCIAL MEDIA
========================================= */

.footer__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer__social a {
    position: relative;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;

    background: rgba(255,255,255,.035);
    color: #a8b8bd;

    font-size: 16px;
    text-decoration: none;

    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.footer__social a:hover {
    color: #081820;
    background: var(--accent);
    border-color: var(--accent);

    transform: translateY(-6px);

    box-shadow: 0 12px 25px rgba(181,211,52,.20);
}


/* =========================================
   NEWSLETTER CARD
========================================= */

.footer__newsletter {
    position: relative;

    padding: 27px 25px 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.12);

    overflow: hidden;
}

.footer__newsletter::before {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    top: -100px;
    right: -80px;

    border: 1px solid rgba(181,211,52,.18);
    border-radius: 50%;
}

.footer__newsletter::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 25px;
    right: 30px;

    border-radius: 50%;
    background: var(--accent);

    box-shadow:
        -16px 20px 0 rgba(181,211,52,.45),
        -32px 40px 0 rgba(181,211,52,.20);
}

.footer__newsletter p {
    position: relative;
    z-index: 1;

    margin: 0 0 24px;

    color: #a7b8bd;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   SUBSCRIBE FORM
========================================= */

.footer__subscribe {
    position: relative;
    z-index: 2;

    display: flex;

    width: 100%;
    max-width: 293px;
    height: 54px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;

    background: rgba(255,255,255,.05);

    transition: border-color .3s ease;
}

.footer__subscribe:focus-within {
    border-color: var(--accent);
}

.footer__subscribe input {
    width: calc(100% - 56px);
    min-width: 0;

    border: 0;
    outline: none;

    background: transparent;

    padding: 0 16px;

    color: #ffffff;
    font-family: "Jost", sans-serif;
    font-size: 14px;
}

.footer__subscribe input::placeholder {
    color: #82949a;
}

.footer__subscribe button {
    width: 56px;
    flex: 0 0 56px;

    border: 0;

    background: var(--accent);
    color: #0a1820;

    font-size: 18px;
    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}

.footer__subscribe button:hover {
    background: #c5e542;
    transform: scale(1.05);
}


/* =========================================
   BOTTOM COPYRIGHT
========================================= */

.footer__bottom {
    position: relative;
    z-index: 2;

    margin-top: 60px;

    border-top: 1px solid rgba(255,255,255,.10);

    padding: 22px 0 24px;
}

.footer__bottom::before {
    content: "";

    position: absolute;
    left: 0;
    top: -1px;

    width: 100px;
    height: 2px;

    background: var(--accent);
}

.footer__bottom p {
    margin: 0;

    color: #829299;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 400;
}

.footer__bottom a {
    color: #d4dee1;
    font-weight: 500;
    text-decoration: none;

    transition: color .3s ease;
}

.footer__bottom a:hover {
    color: var(--accent);
}


/* =========================================
   RESPONSIVE — TABLET
========================================= */

@media (max-width: 1199px) {

    .footer {
        padding-top: 70px;
    }

    .footer__main {
        column-gap: 30px;
    }

    .footer__logo img {
        width: 190px;
    }

}


/* =========================================
   RESPONSIVE — SMALL LAPTOP
========================================= */

@media (max-width: 991px) {

    .footer__main {
        grid-template-columns: 1fr 1fr;
        row-gap: 50px;
        min-height: auto;
    }

    .footer__brand {
        grid-column: span 2;
    }

    .footer__bottom {
        margin-top: 50px;
    }

}


/* =========================================
   RESPONSIVE — MOBILE
========================================= */

@media (max-width: 767px) {

    .footer {
        padding: 60px 0 0;
    }

    .footer__main {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .footer__brand {
        grid-column: auto;
        padding-left: 15px;
    }

    .footer__logo img {
        width: 185px;
    }

    .footer__newsletter {
        padding: 25px;
    }

    .footer__subscribe {
        max-width: 100%;
    }

    .footer__bottom {
        margin-top: 40px;
    }

    .footer__bottom p {
        font-size: 13px;
        line-height: 1.9;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .footer__brand address {
        font-size: 14px;
    }

    .footer__newsletter {
        padding: 22px;
    }

    .footer__social a {
        width: 40px;
        height: 40px;
    }

}

@media (max-width: 767px) {



	.menu-button {
    background: rgba(0, 0, 0, 0) url("../images/menu-btn.png") no-repeat scroll 0 0;
    cursor: pointer;
    float: right;
    height: 21px;
    position: relative;
    width: 38px;
    z-index: 1000;
}
#cssmenu > ul > li{ margin-left:0px;}
#cssmenu > ul > li a{ padding:8px!important;}
#cssmenu > ul > li{ padding:0px!important;}
#cssmenu > ul > li a.active{ border:none;}

#cssmenu #menu-button{ top:-4px;}
#cssmenu ul{ margin-top:38px;}

#cssmenu > ul ul{ margin-top:0px;}
#cssmenu ul ul li a{ font-size:12px; text-transform:capitalize;}

#cssmenu{ top:5px;}
#cssmenu #menu-button{ background:none;}



#cssmenu #menu-button::before{ background:#ff000a;}

#cssmenu #menu-button::after{ border-top:2px solid #ff000a; border-bottom:2px solid #ff000a;}

#cssmenu ul{ margin-top:35px!important; }
#cssmenu ul ul{ margin-top:0px!important;background:#a7bf23;}
#cssmenu ul{ padding:0px; border-bottom-right-radius:2px; border-bottom-left-radius:2px;}

#cssmenu ul{ background:#404040;}
		#cssmenu li a{ border-top:1px solid #373636!important;}

	#cssmenu li ul   a{ border-bottom:1px solid #373636!important; border-top:none!important;}

    #cssmenu > ul > li a {
        font-size: 14px;
        padding: 12px !important;
    }

#cssmenu .submenu-button{ width:50px; height:50px;}

.fix-height{}
#cssmenu > ul > li:first-child {  background:none!important;}

#cssmenu > ul > li a.active{ border-left:5px solid #f039a7; color:#f039a7!important;}
#cssmenu > ul > li a{ padding-left:18px!important;}
#cssmenu > ul  ul li a{ padding-left:35px!important; position:relative;}

#cssmenu > ul  ul li a:before{ content:'\f105'; font-family:FontAwesome; position:absolute; left:25px; color:#FFF;}

#cssmenu ul{ margin-top:39px!important;}
#cssmenu ul{  width:102%;}
#cssmenu ul ul li{ border-bottom:none;}

#cssmenu ul ul li{ line-height:22px;}

#cssmenu{ margin-top:2px!important;}
#cssmenu > ul > li{ font-size:12px!important;}
#cssmenu ul ul{ padding-top:0px!important;}
#cssmenu > ul > li a.active{ border-left:0px;}
#cssmenu > ul > li a.active{color:#b5b5b5!important;}


#cssmenu > ul > li a:hover{color:#930033;}


#cssmenu{ z-index:1;}

.menu-button{ margin-top:0px!important;}
#cssmenu{ padding:10px 0px!important;}

 #cssmenu{ top:23px;}








.top-menu-1{ display:none;}

.tp-em{ display:none!important;}

 .topbar-wrapper {
    flex-direction: column;
    gap: 0;
    padding: 5px 0;
  }
.slider-C__eyebrow strong {
    font-size: 10px;}
	
 .slider-C__title span {
    font-size: 18px;
  }	
	.slider-C__title {
    flex-direction: unset;}
 .slider-C__title span {
    font-size: 18px;
    margin-right: 5px;
  }	
	 .slider-C__wellness .wellness-title {
    font-size: 16px;
  }
  
 .slider-C__wellness .wellness-script { display:none;} 
 
  .slider-C__content {
    position: relative;
    width: 49%;}
	
	.health-badge{ display:none;}
	
	.slider-C__tagline {
    padding: 0px;
    background-attachment: n;
    background: none;
    color: #000 !important;
  }
  
  .slider-C__tagline span {
    font-size: 9px;
    color: #000;
    letter-spacing: 0px;
  }
  
  .slider-C__tagline { margin-bottom:0px;}
  
   .slider-C__content {
    position: relative;
   
    top: auto;
    left: auto;
    transform: none;
    padding: 20px 16px;
    background: #f4faff;
  }
   .slider-C__wellness .wellness-title {
    font-size: 13px;
  }
  
   .slider-C .slider-image {
    width: 100%;
    position: absolute;
    top: 0;
  }
  
  .slider-C__content{ background:none;}
  .slider-C__title{ margin-bottom:3px;}
  .slider-C__tagline i{ display:none;}
  .topbar-contact a{ font-size:11px;}
  
  .main-header{ padding:7px 0px;}
  
  .our-spl__doctor{ display:none;}
  
  .our-spl{background: #c3d83c;}
  
  .our-spl__content {
    min-height: 100px;
    padding: 40px 25px;
  }


 .our-spl {
    min-height: 0px;}
	
	
	
	
 .your-visio__top span {
    font-size: 13px;
  }	
	
	
	 .video-section__content h2 strong {
    font-size: 27px;}
	
	
	  .video-section__content h2 span {
    font-size: 26px;
  }
	
	
	  .footer__bottom {
    margin-top: 21px;
  }
  
  .logo {
  overflow: hidden;
  margin: 5px 0px;
}

.main-header{ position:static;}

  #cssmenu { z-index:10}
    
	 .product-detail {
    padding: 45px 0 0px;
  }
  
   .product-info-section {
    padding: 30px 0;
  }
  
  .slider-C .carousel-item.active .wellness-script{ display:none;}
  
	}