:root {
  --green: #2F6865;
  --onion: #896096;
  --pink: #DCAFE0;
}


html{scroll-behavior: smooth;}
body.body-hidden{overflow: hidden;}
section{scroll-margin-top: 120px;}


@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');


@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-Bold.woff2') format('woff2'),
        url('../fonts/Forrest-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-Extrabold.woff2') format('woff2'),
        url('../fonts/Forrest-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-ExtraboldItalic.woff2') format('woff2'),
        url('../fonts/Forrest-ExtraboldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-BoldItalic.woff2') format('woff2'),
        url('../fonts/Forrest-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-Heavy.woff2') format('woff2'),
        url('../fonts/Forrest-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-Light.woff2') format('woff2'),
        url('../fonts/Forrest-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-HeavyItalic.woff2') format('woff2'),
        url('../fonts/Forrest-HeavyItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-Medium.woff2') format('woff2'),
        url('../fonts/Forrest-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-MediumItalic.woff2') format('woff2'),
        url('../fonts/Forrest-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-LightItalic.woff2') format('woff2'),
        url('../fonts/Forrest-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-RegularItalic.woff2') format('woff2'),
        url('../fonts/Forrest-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Forrest';
    src: url('../fonts/Forrest-Regular.woff2') format('woff2'),
        url('../fonts/Forrest-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body, .fig{font-family: "Figtree", sans-serif;}
h1, h2, h3, h4, h5, h6{font-family: 'Forrest';}


#header{position: sticky; top:0; z-index: 99;}
.container{width: 100%; max-width: 1410px; padding: 0 20px; margin: 0 auto;}

.trigger span{ background-color: #2F6865; height: 2px; display: block; width: 100%; border-radius: 2px; transition: all 0.3s ease;}
body.slip .trigger span:nth-child(1) {transform: rotate(45deg) translateY(8px) translateX(5px);}
body.slip .trigger span:nth-child(2) { opacity: 0;}
body.slip .trigger span:nth-child(3) { transform: rotate(-45deg) translateY(-8px) translateX(5px);}

.common_btn{border-radius: 40px; background: #DCAFE0; color: #673277; font-size: 18px; font-style: normal; font-weight: 600; line-height: 20px; padding: 15px 30px; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: all ease 0.3s; cursor: pointer; border:none;}

.common_btn:hover{color: #DCAFE0; background: #673277;}
.section_padding{padding-top:120px; padding-bottom:120px;}

.menus_overlay{display: none;}
.menus > ul{display: flex; align-items: center; gap:50px;}
.menus ul li{position: relative; width: 100%;}
.menus > ul > li > a{transition: all ease 0.0s; display: flex; font-size: 17px; line-height: 18px; white-space: nowrap; padding: 14px 0;}

.menus ul li button{cursor: pointer; white-space: nowrap;     padding: 15px 20px; text-align: left; display: flex;}
.menus ul .sub-menu .sub-menu li:hover button{color: var(--onion);}
.menus > ul > li:hover > a,
.menus > ul > li > .sub-menu li:hover a{color:var(--onion)}

.menus > ul > li:last-child > .sub-menu li:hover a{color:#000000;}

.menus > ul > li:last-child > a{background-color: #DCAFE0; color: #673277; font-weight: 700; border-radius: 50px; padding: 14px 20px;}

.menus > ul > li > .sub-menu{display: none; position: absolute; background: #ffffff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); flex-direction: column; align-items: flex-start; gap:0; min-width: 180px; }

.menus > ul > li:hover > .sub-menu{display: flex;}

.menus ul li.have-sub-menu .drop_arrow{position: absolute; right: 0; top:50%; margin-top:-9px; width: 16px; height: 16px; background: url(../images/svg/drop.svg) center center no-repeat;}

.menus ul li.have-sub-menu:hover .drop_arrow{background: url(../images/svg/drop-hover.svg) center center no-repeat;}


.menus ul li.have-sub-menu .sub-menu .drop_arrow{right:20px; transform: rotate(-90deg); transform-origin: center center;}
.menus > ul > li.have-sub-menu:last-child a{padding-right: 50px !important;}
.menus > ul > li.have-sub-menu:last-child .drop_arrow{background: url(../images/svg/drop_bold.svg) center center no-repeat; right:20px}
.menus > ul > li.have-sub-menu:last-child:hover a{border-radius:20px; border-end-start-radius: 0; border-end-end-radius: 0;}
.menus > ul > li.have-sub-menu:last-child .sub-menu{left:auto; right: 0; border-top-right-radius:0 ; background-color: #DCAFE0; }



.menus ul li.have-sub-menu a{padding-right:27px !important; position: relative;}
.menus > ul > li > .sub-menu li a{white-space: nowrap; text-align: left; padding: 15px 20px; display: flex; align-items: center;}

.menus > ul > li > .sub-menu .sub-menu{left:100%; top:0; position: absolute; background: #ffffff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: none; flex-direction: column; gap: 0; min-width: 180px; }

.menus > ul > li > .sub-menu li:hover .sub-menu{display: flex;}


.footer_links{display: flex; flex-direction: column; gap:20px;}
.footer_links ul{display: flex; flex-direction: column; gap:10px;}
.footer_links ul li a,
.footer_links ul li button
{color: #757575; font-size: 14px; line-height: 20px; transition: all ease 0.2s; cursor: pointer;}

.footer_links ul li:hover a,
.footer_links ul li:hover button
{color: #111111;}


.testimonial-section{margin-top:60px;}
.testimonial-card{border-radius: 35px; background: rgba(255, 250, 240, 0.20); border:1px solid #ffffff; padding: 50px 50px 150px 50px; backdrop-filter:blur(10px); height: auto;}

.testimonial-card h6{color: #896096; font-size: 25px; margin-bottom: 30px; font-style: normal; font-family: "Figtree", sans-serif;
font-weight: 700; line-height: 30px; letter-spacing: -0.5px;}

.testimonial-card p{color: #000; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px;}

.testimonial-card .testimonial-author{display: flex; flex-wrap: wrap; gap: 20px; align-items: center; position: absolute ; left:50px; bottom: 50px;}
.testimonial-card .testimonial-author img{width: 60px; height: 60px; border-radius: 100%; object-fit: cover;}
.testimonial-card .testimonial-author .name{width:calc(100% - 80px); display: flex; flex-direction: column;}
.testimonial-card .testimonial-author .name strong{color: #2F6865; font-size: 20px; font-style: normal; font-weight: 500; line-height: 28px;}
.testimonial-card .testimonial-author .name span{color: #000; font-size: 14px; font-style: normal; font-weight: 400; line-height: 19px;}
.testimonial-card .testimonial-author .name span em{color: #000; font-size: 14px; font-style: normal; font-weight: 700; line-height: 24px;}

.worldSwiper .swiper-pagination{left:calc(50% + 80px) !important; bottom:20px; width: auto !important; display: flex; gap:15px;}
.worldSwiper .swiper-pagination .swiper-pagination-bullet{margin: 0 !important; opacity: 1 !important; background: rgba(92, 139, 136, 0.25) !important; width:10px !important; height: 10px !important;}

.worldSwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: rgba(92, 139, 136, 0.70) !important;}

.team_card{height: auto !important;}
.team_card .about_info p:not(:first-child){display: none;}
.team_card .about_info p{  display: -webkit-box;  line-clamp: 4; box-orient: vertical; -webkit-line-clamp: 4; -webkit-box-orient: vertical;   overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 22.6%, rgba(0, 0, 0, 0.00) 81.73%);
background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.form_control{position: relative;}
.form_control .animated{position: absolute; left:25px; top:20px; color: rgba(0, 0, 0, 0.75); font-size: 18px; line-height: 19px; font-weight: 500; cursor: text; transition: all ease 0.2s;}

.form_control.active .animated{font-size: 12px; top:5px; text-transform: uppercase;}


.form_control input,
.form_control textarea
{border-radius: 13px; border: 1px solid #CDCCCC; background: #FFF; height: 62px; width:100%; padding: 0 25px; outline: none; box-shadow: none; font-size: 18px; color: rgba(0, 0, 0, 0.75);}


.form_control select
{border-radius: 13px; border: 1px solid #CDCCCC; background: #FFF; height: 62px; width:100%; padding: 0 25px; outline: none; box-shadow: none; font-size: 18px; color: rgba(0, 0, 0, 0.75); cursor: text;}

.form_control textarea{height: 160px; padding: 25px; resize: none;}


.bullets ul{display: flex; flex-wrap: wrap; gap:30px 40px; max-width: 490px;}
.bullets li{width: calc(50% - 20px); color: #000;font-size: 16px;font-style: normal;font-weight: 400;line-height: 24px; background: url(../images/svg/bullet-check.svg) left 8px no-repeat; padding-left: 38px; }


.bullets .bullet_sub ul{gap: 15px 0px;}
.bullets .bullet_sub li{width: 100%;}

.popup_overlay{background: rgba(255,255,255,0.5); position: fixed; left: 0; top:0; right:0; bottom: 0; z-index: 999; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); align-items: center; justify-content: center; padding: 20px;}

.popup_overlay.active{display: flex;}

.feature_popup{  width:100%; max-width: 955px; border-radius: 35px; background: rgba(255, 255, 255, 0.90); box-shadow: 0 0 50px 0 #EAEAE2; padding: 50px; position: relative; }

.feature_popup .close{position: absolute; right:0; top:0; width: 48px; height: 48px; border-radius: 48px; background: #D6C8E3; display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translate(20px, -20px);}

.popup_inner{max-height: calc(100svh - 150px); overflow: auto;}

.tab_links{display: flex; padding-bottom: 5px; overflow: auto;}
.tab_links button{white-space: nowrap; color: #96B3B1; font-size: 12px; font-style: normal;font-weight: 700;line-height: 14px; letter-spacing: 0.77px;text-transform: uppercase; padding: 7px 10px; border-radius: 40px; cursor: pointer; transition: all ease 0.2s;}

.tab_links button.active{background-color: #96B3B1; color: #ffffff;}

.tabs_data .tab-content{display: none; margin: 40px 0 0 0;}
.tabs_data .tab-content.active { display: block; }

.tabs_data .tab-content h3{color: #000; font-size: 32px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: -0.64px; margin-bottom: 20px;}
.tabs_data .tab-content p{color: #000; font-size: 16px;font-style: normal;font-weight: 400;line-height: 24px; margin-bottom: 30px; max-width: 690px;}
.tabs_data .tab-content .bullets{max-width: 100%;}
.tabs_data .tab-content .bullets ul{max-width: 720px;}


.story .swiper-container{padding-bottom: 50px;}
.story .paragraphs{gap:30px;}
.story .paragraphs p{color: #000; font-size: 18px; font-style: normal; font-weight: 400;  line-height: 28px;     max-width: 1020px;}
.story .paragraphs p em{font-size: 22px; font-weight: 700; line-height: 37px;}
.swiper-scrollbar{border-radius: 8px !important; background: #D6E2E1 !important; height: 7px !important;}
.swiper-scrollbar-drag{background: #8DAEAC !important; cursor: pointer;}

.single_team_popup{display: flex; flex-wrap: wrap; gap: 50px; align-items: flex-start;}

.single_team_popup .image{width: 250px; position: sticky; top: 0; text-align: center;}
.single_team_popup .image img{aspect-ratio: 1/1; width: 100%; background-color: #D1E6C7; border-radius: 100%; margin-bottom: 30px;}
.single_team_popup .image h4{font-size: 20px; color: #111111;}
.single_team_popup .image span{text-transform: uppercase; font-size: 14px; letter-spacing: 1px; font-weight: bold; color: #0F4C49;}
.single_team_popup .text{width: calc(100% - 300px);}

.single_team_popup .text .paras{display: flex; flex-direction: column; gap:20px;}

.tab_data .tab-content{display: none;}
.tab_data .tab-content.active{display: block;}

.tab_capsules{display: flex; width: 100%; max-width: 750px; margin: 0 auto; margin-bottom: 80px; border-radius: 80px; padding: 8px; border:1px solid #CBCBCB; justify-content: space-between;}
.tab_capsules button{cursor: pointer; width:calc(33.33% - 1px); height: 48px; color: rgba(0, 0, 0, 0.75); text-align: center; font-size: 18px;
font-style: normal; font-weight: 500; line-height: normal; transition: all ease 0.3s;}
.tab_capsules button br{display: none;}

.tab_capsules button:hover{color: #111111;}

.tab_capsules button.active{font-weight: 600; background: #D1E6C7; color: #2F6865; border-radius: 60px; pointer-events: none;}
.tab_capsules button:nth-child(2).active{background: #D6C8E3; color: #673277; }
.tab_capsules button:nth-child(2).active{background: #B1D9E0; color: #006F82; }

.pagination_test .swiper-pagination{display: flex; gap:10px; justify-content: center;}
.pagination_test .swiper-pagination .swiper-pagination-bullet{opacity:1; margin: 0; border-radius: 7px; background: rgba(92, 139, 136, 0.25); width: 7px; height: 7px;}

.pagination_test .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: rgba(92, 139, 136, 0.70);}

.timeline{    position: absolute; left: 0; height: 2px;  background: #D6E2E1; width: 100%; top: 220px;}
    .timeline_draw_line{    position: absolute; left: 0;  height: 4px;  background: #96B3B1;  width: 0; top: 219px;}
    .timeline .ring_circle{background-color: #96B3B1; width: 8px; height: 8px; border-radius: 100%; position: absolute; left: 0; top:-3px}
    .timeline .ring_circle:before{    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #D6E2E1;
    background: none;
    position: absolute;
    transition: all ease 0.3s;
    transform: scale(0);
    left: -6px;
    top: -6px;
    border-radius: 100%;}

    .timeline .ring_circle.active::before{transform: scale(1);}

        .timeline .ring_circle:nth-child(2){left: calc(25% + 10px);}
        .timeline .ring_circle:nth-child(3){left: calc(50% + 13px);}
        .timeline .ring_circle:nth-child(4){left: calc(75% + 18px);}


.highlight {
  animation: pulse 1s ease;
  outline: 3px solid #673277;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(103,50,119,0.6); transform: scale(1); }
  70% { box-shadow: 0 0 5px 5px rgba(103,50,119,0); transform: scale(1.02);  }
  100% { box-shadow: 0 0 0 0 rgba(103,50,119,1); transform: scale(1.01);  }
}



.hidden-by-js { display: none; }
.read-more-btn { background: transparent; border: 0; padding: 0; cursor: pointer; margin-top:20px; }


.World .navigation{display: flex; align-items: center; justify-content: center; gap:10px; margin-top: -30px;}
.World .navigation .swiper-button-prev,
.World .navigation .swiper-button-next
{position: static; width: 50px; height: 50px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 50%; transform: none; margin: 0;}

.World .navigation .swiper-button-prev:after,
.World .navigation .swiper-button-next:after{color: #111111; font-size: 15px;}
