@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body, html {
    overscroll-behavior: none;
    min-height: 100vh;
    width:100%;
    background: #fff;
    color:#111517;
    padding:0;
    margin: 0;
    font-family: "Helvetica", sans-serif;
}
:root{
    --primary:#008A8A;
    --secondary: #25C97A;
    --dark: #111517;
    --white: #fff;
    --grey: #777;
    --nav: #46484F;
    --default: #005454;
}
.pri-color{color: var(--primary) !important;}
.sec-color{color: var(--secondary) !important;}
.white-color{color: var(--white) !important;}
.grey-color{color: #777;}
.pri-bg{background-color: var(--primary) !important; color: #fff !important;}
.sec-bg{background-color: var(--secondary) !important; color: #fff !important;}
.img{width: 100%;}
.h-spacer{height:10px; padding: 6% 0;}
.py-c-10{padding: 10% 0 5% !important;}
@media (min-width: 1400px) {
    .container{ max-width:1500px;}
}
/* ------------------------------------ */
.header{ position: fixed; top: 0; left:0; width:100%; padding:20px 3px; background: var(--white); background-color: #fff; border-bottom:1px solid #eee; transition: all 0.5s ease-in-out; z-index:99999;}
.logos{ display:block; max-height:60px; padding:5px 0 0;}
.logos img{ max-height:50px;}
.menu{ font-size:1.1rem; padding:10px 12px; margin:14px 0; border:1px solid var(--primary); border-radius:4px;  color:var(--primary); display: none; cursor: pointer;background: #ccc;}
.navigations{ width: 100%; text-align:left; display: inline block;}
ul.navs padding:0; margin:0; position: relative;}
ul.navs-right{ text-align: right;}
ul.navs li, ul.navs-right li{ list-style: none; display: inline-block;}
ul.navs li a, ul.navs-right li a{ display: block; padding:10px 5px; margin:0 10px; text-decoration: none; color: var(--nav); border-bottom: 3px solid transparent; font-size: 18px; font-weight: 700; font-family: 'rangesans-regular', sans-serif;}
ul.navs-right li a{ display: block; padding:7px 16px; margin:3px 0 0; text-decoration: none; color: var(--primary); border: 1px solid var(--primary); border-radius: 30px; font-size: 15px; font-weight: 400; font-family: 'rangesans-regular', sans-serif;}
ul.navs li a:hover, ul.navs li a:active{ text-decoration:none; border-bottom: 3px solid var(--primary); transition: all 0.5s ease-in-out;}
ul.navs li div.mega-droped{position: absolute; left:0; margin:0; padding: 10px; border-radius: 5px; background:#fff; display: none; opacity: 0; min-width:250px; width:100%; min-height:100px; transition: all 0.5s ease-in-out; z-index: 999;}
ul.navs li:hover div.mega-droped{ display: block; opacity: 1; transition:all 0.5s ease-in-out; color:var(--nav); text-transform: uppercase;}
div.mega-droped .mega-box{ border:1px solid transparent; font-size: .8rem; padding:10px; margin:5px 0; border-radius: 5px;}
div.mega-droped .mega-box:hover{padding:10px; margin:5px 0; background-color:#fff; color: var(--nav);}
div.mega-droped .mega-menu{ border:1px solid transparent; font-size: .8rem; padding:10px; margin:5px 0; border-radius: 5px;display: none; opacity: 0; min-width:250px; width:100%; min-height:100px; transition: all 0.5s ease-in-out; z-index: 999;}
div.mega-droped .mega-menu:hover{display: block; opacity: 1; transition:all 0.5s ease-in-out; padding:10px; margin:5px 0; background-color:#fff; color: var(--nav);}

.nav-link {
    color: #333;
    font-weight: 500;
    margin-right: 20px;
    position: relative;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    background-color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: none;
    width: 600px;
    border-radius: 8px;
}
.submenu-container {
    display: flex;
    justify-content: space-between;
}
.submenu-left {
    width: 30%;
    border-right: 1px solid #e0e0e0;
    padding-right: 20px;
}
.submenu-left .service-item {
    display: block;
    color: #333;
    font-weight: 500;
    padding: 10px 0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
}
.submenu-left .service-item:hover {
    background-color: #f0f0f0;
    padding-left: 10px;
}
.submenu-right {
    width: 65%;
    display: none;
    flex-wrap: wrap;
    gap: 20px;
}
.submenu-right.active {
    display: flex;
}
.submenu-right .insurance-item {
    width: 45%;
    margin-bottom: 20px;
}
.submenu-right .insurance-item h6 {
    color: #1a3c34;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.submenu-right .insurance-item p {
    color: #666;
    font-size: 0.85rem;
    margin: 0;
}
.submenu-right.placeholder {
    display: none;
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
}
.submenu-right.placeholder.active {
    display: block;
}

div.mega-droped span{font-size:0.9rem;}
/* ------------------------------------- */
.nav-pills .tab-c-nav{border-radius: 50%; width: 50px; height: 50px; line-height: 50px; padding: 0; text-align: center; margin-left:5px; border: 1px solid var(--primary); color: #fff;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--white);
  background-color: var(--primary);
}
/*---------------------------------------*/
.sticky-bar{position: sticky; top: 90px; min-height:40px; background-color: #ccc; padding: 15px 10px; z-index: 998;}
.sticky-bar a{border-right: 1px solid #bbb8b8; text-decoration: none; color: #333; padding: 5px 20px !important; border-radius: 0 !important; }
.sticky-bar a:first-child{border-left: 1px solid #bbb8b8;}
/*---------------------------------------*/
.section, .section-half, .section-25{min-height:100vh; padding: 5% 0;}
.section-half{min-height:50vh;}
.section-25{min-height:25vh;}
.title-1{font-size: 40px; font-weight: 500; line-height:1.1; padding:10px 0; margin:10px 0; font-family: 'Roboto';}
.title-2, .title-3{font-size: 16px; font-weight: 600; line-height:1.1; padding:10px 0; margin:10px 0; font-family: 'Roboto';}
.title-2{font-size: clamp(1.4rem, 5vw, 1.6rem);}
.title-3{font-size: clamp(1.1rem, 3vw, 1.3rem);}
.page-banner, .page-banner-2{position: relative; display: flex; align-items: center; height: 500px; width:100%; background-size: cover; background-position: top center; z-index:3;}
.page-banner .cont, .page-banner-2 .cont{ padding: 20px 0; color: #fff;}
.comp-box{padding: 20px; min-height:200px; position: relative; z-index:99;}

.comp-stage{position:relative; border-left: 3px dotted #ccc; padding:0 15px 25px; display: inline-block;}
.comp-stage .icon{position:absolute;top:100%; left:-45px; content:""; width:90px; height: 90px; text-align:center; background-color: var(--primary); border-radius: 50%; line-height:90px; }
.comp-stage:nth-child(even) .icon{background-color: var(--secondary);}
.comp-stage .icon img{width: 40px;}
.comp-stage .inner{ border-left: 5px solid var(--primary); padding: 15px;}
.comp-stage:nth-child(even) .inner{ border-left: 5px solid var(--secondary); padding: 15px;}
.comp-stage .inner h4{font-size: 1.4rem; font-weight: 600; padding:5px 0; color: #222;}
/* .comp-stage .inner p{font-size: 1rem; padding:5px 0; color: #555;} */
.comp-stage:first-child{margin-top: 20%;}
/*.comp-stage:nth-child(3){margin-top: 50%;}*/
.comp-lft-img{position: relative;}
.flat-bar{position: absolute; bottom:10%; right:10px; max-width: 1200px; min-height:15px; padding:20px;}
/*---------Team feature------*/
.team{position:relative;}
.team .team-box{position:relative; transform: scale(1); max-width:350px; margin: 0 auto; margin-top: 10px; border:1px solid transparent; border-radius:0px; overflow:hidden; transition: all 0.5s ease; z-index:1;}
.team .team-box:hover{transform: scale(1); z-index: 3; background: #f6f6f6; transition: all 0.5s ease;}
.team-box .img{background-color: var(--pale-grey); height:350px; width:100%; background-size:cover; background-position: top center; background-repeat: no-repeat; overflow:hidden; display: flex; align-items: end;}
.team-box .img img{max-width:80%; margin: 0 auto;}
.team-box .name{color: var(--dark); font-size: 1.2rem; padding:5px 8px 2px; font-weight: 500;}
.team-box .title{color: var(--grey); font-size:0.85rem; line-height:1.1; padding:2px 8px 15px;}
.team-box .img .team-captn{position:relative; width:100%; font-weight:500; background-color: #d6d2d2c2; backdrop-filter: blur(4px); padding:10px; bottom:-110%; transition: all 0.8s ease; font-size: 0.75rem;}
.team-box:hover .team-captn{position:relative; bottom:-1px; transition: all 0.5s ease;}
/* -------------------------------------- */
/*----------------------------*/
.services-list{display: block; padding: 20px;}
.services-list ul{margin:0; padding: 0;}
.services-list ul li{list-style-type: none; display: block;}
.services-list ul li a{display: inline-block; text-decoration: none; border-bottom: 1px solid #777; font-weight: 400; font-size: 1.2rem; color: #777; padding: 5px; }
/*----------------------------*/
/*-------custom accodions-----*/
.acc-item{background-color: #008a8a !important; border: 0 !important; border-radius: 20px !important; margin-bottom: 10px; color: #fff;}
.acc-item-header{border-radius: 20px !important; background-color: #008a8a !important; color: #fff;}
.acc-item-header-btn{background-color:transparent !important; color: #fff;}
/*-------------------------*/
.client-logos{display:flex; align-items:center; line-height:1.1; text-align:center; padding:5px 0; height:100px;}
.client-logos img{margin: 10px 0; max-width: 90%;}
/* ---------------------- */
.partition{display: inline-flex;}
.p-left, .p-right{
    width:60vw; position: fixed; top: 0; min-height:100vh; background-color: #fff; background-position: center; background-size: cover; background-blend-mode: multiply; overflow: hidden;
}
.p-right{overflow-y: auto; left:45%; background-color: #fff;}
/* --------------------- */

.tab-content > .d-panel {
    width: 100%;
    height: 100vh;
    /* display: flex; */
    /* justify-content: left; */
    /* align-items: center; */
    font-weight: 600;
    font-size: 1.5em;
    text-align: center;
    color: white;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right;
    overflow: hidden;
  }

.d-panel .col-a, .d-panel .col-b, .d-panel .col-c{
    display: flex;
    align-items: center;
    text-align: left;
    height: 100vh;
    width:45%;
    overflow: hidden;
}

.d-panel .col-a{position:absolute; left: 0; background-color: rgb(1 83 83); color: #fff;}
.d-panel .col-b{position:absolute; left: 45%; background-color: #fff; color: #111; width:25%;}

.hero-conts{
    margin-left:20%;
}
.hero-conts h1{
    font-size: clamp(1.5rem, 7vw, 4rem);
    line-height: 1.1;
    font-weight: 700;
}
.hero-conts p{
    font-size: clamp(.9rem, 2vw, 1.3rem);
    line-height: 1.1;
    font-weight: 300;
}
.section_nav { position: fixed; bottom: 10px; right: 10px; height: 100px; z-index: 999;}
/* ----- */
.big-bg-word{
    font-size: 19vw;
    line-height:0.7;
    font-weight: 700;
    position:absolute;
    bottom:1px;
    left: 0%;
    color: #008A8A1A;
    opacity: .7;
    z-index: 0;
    min-width: 100%;
}

.scroll-container {
    height: 400vh; /* Tall container to allow vertical scrolling */
    position: relative;
}
.horizontal-scroll-wrapper {
    position: sticky;
    top: 80px; /* Adjust based on navbar height */
    height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.cards-container {
    display: flex;
    flex-direction: row;
    will-change: transform; /* Optimize for animation */
    transition: transform 0.8s ease-in-out; /* Smooth snapping transition */
}
.card {
    flex: 0 0 auto;
    width: 100vw; /* Full viewport width */
    margin-right: 0; /* No margin since full-width */
    border: none;
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 80px);
}
.left-card{
    background-color: var(--default);
    flex-direction: column;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 10% 32px;
}
.about-card{
    background-color: var(--default);
    flex-direction: column;
    display: flex;
    padding: 10% 32px;
}
.showNum{
    display: block;
}
.card-left {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.card-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: url('../../public/images/gwen.png') no-repeat center;
    opacity: 0.1;
    background-size: 30%;
}
.card-right {
    flex: 1;
    width: 80%;
    background: url('https://via.placeholder.com/800x600?text=Earth') no-repeat center;
    background-size: cover;
    position: relative;
}
.card-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://via.placeholder.com/400?text=Shield') no-repeat center;
    background-size: 50%;
}
.card-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}
.card-title2 {
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    text-align: left;
    left:0
}
.heading{
    font-family: Helvetica;
    padding-left:0;
    color:#9D9D9D;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    text-transform: uppercase;
    justify-content: start;
    display: flex;
}
.card-text {
    color: #ddd;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}
.pagination-container {
    position: fixed;
    bottom: 0;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}
/* .pagination-number {
    color: #25C97A;
    font-size: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
} */
.pagination {
    position: absolute;
    bottom: 40px;
    right: -20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
    overflow-x: hidden;
}
.pagination .page-item {
    width: 10px;
    height: 10px;
    border: 1px solid #00FFB4;
    border-radius: 50%;
    margin-bottom: 12px;
    background-color: transparent;
    transition: all 0.3s ease;
}
.pagination .page-link {

    background-color: transparent;
    cursor: pointer;
}
.pagination .page-item.active .page-link {
    background-color: #28a745;
    width: 8px;
    height: 8px;
}
.custom-pagination {
    position: absolute;
    bottom: 40px;
    right: -10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
  }

  .pagination-number {
    color: #25C97A;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
  }

  .pagination-number::after {
    content: '';
    height: 1px;
    width: 50px;
    background-color: #25C97A;
    margin-left: 10px;
  }

  .pagination .dot {
    width: 10px;
    height: 10px;
    border: 1px solid #00FFB4;
    border-radius: 50%;
    margin-bottom: 12px;
    background-color: transparent;
    transition: all 0.3s ease;
  }

  .pagination .dot.active {
    background-color: #25C97A;
  }

  .hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

/* ---- */
.footer{background-size: 40%;padding: 1% 0; background-position: bottom right; background-repeat: no-repeat;}
/*---------------------------------*/

.mail-box{display: block; position:relative; max-width:400px; margin:20px 0;}
.mail-box-input{width:100%; border:1px solid #25C97A21; border-radius: 30px; background-color: #25C97A21; color: #333; padding: 10px 30px 10px 20px;}
.mail-box-btn{position: absolute; top:10px; right: 20px; border:0; background-color: transparent; color: var(--secondary);}
/* --------footer links------------------- */
.footer-copy-bar{  padding: 10px; border-top:1px solid #eaeaea;}
.footer-copy-bar span{font-size:0.9rem; color: #888;}
/*--=============================---*/
.footer-links{padding:1px; margin-top: 10px;}
.footer-links ul{margin:0; padding:0; list-style: none;}
.footer-links ul li{display: block; position: relative;}
.footer-links ul li a{display: block; padding:3px 8px; color: var(--grey); text-decoration: none; margin:5px 0;font-size: 16px;font-weight:300; font-family: 'Roboto';}
.footer-links ul li a:hover{display: block; padding:3px 8px; color: var(--secondary);}
.footer-links ul li span{display: block; padding:3px 8px; color: var(--grey); text-decoration: none; margin:5px 0;font-size: 16px;font-weight:300; font-family: 'Roboto';}

/* ================================ */
/*----social---*/
.social{margin: 2px 0; text-align:center;}
.social ul{padding: 0; margin: 0;}
.social ul li{list-style: none; display: inline-block; margin-right:6px;}
.social ul li a{text-decoration: none;align-items: center; border-radius:50%; width:33px; height: 33px; line-height:35px; text-align: center; font-size: 1.1rem; display: block; color: var(--white); background: var(--secondary);}
.social ul a:hover{ color: var(--primary); background:#1c1d1e;}
/*------//--------*/
/*-------==========Media Queries=========----------*/
@media(max-width:768px){
    .header { padding: 5px 0;}
    .header .top{display:none;}
    .menu{ display: inline-block;}
    .navigations{ position: fixed; top: 0; left: -280%;  width: 80%; min-height:100vh; text-align:left; background:#005f49a3; backdrop-filter: blur(10px);  padding:20px; display:block; transition: all 0.5s ease-in-out; overflow-y:auto; z-index: 9999;}
    .shownav{left: 0; transition: all 0.5s ease-in-out;}
    ul.navs li{ display: block;}
    ul.navs li a{ display: block; padding:12px 10px;}
    ul.navs li ul, ul.navs li:hover ul{ position: relative; display: block; opacity: 1; top:0;}
    .d-panel .col-b {width: 35%;}
}
@media(max-width:600px){
    .hero-conts { margin-left: 2%; padding: 20px;}
    .d-panel .col-b {width: 40%;}
}
/*-------================----------*/