:root {
      --bs-primary: #09A9AB;
    --bs-secondary: #001F20;  
    --bs-deep:#045D5E;
    --bs-success: #018500;
    --bs-info: #2E3192;
    --bs-warning: #F6BC01;
    --bs-danger: #DE3434;
    --bs-light: #f8f9fa;
    --bs-dark: #111;

    --bs-body-font-family: 'Inter', sans-serif;
    --bs-heading-font-family: 'Playfair Display', serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-body-color: rgba(43, 43, 43, 0.8);
    --bs-body-bg: #fff;
    --bs-border-color:rgba(206, 206, 206, 0.5);
  }

.lenis.lenis-smooth {scroll-behavior: auto;}
html, body {width: 100%; margin: 0; padding: 0; scroll-behavior: smooth;}
body {font-size:var(--bs-body-font-size); font-family: var(--bs-body-font-family); font-weight:200; line-height:1.4; color:var(--bs-white); overflow-y: scroll; width: 100%; position: relative;}

/* Common CSS Start */
a, a:hover, a:focus {text-decoration:none; transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; color: var(--bs-white); word-break: break-all;}
h1,h2,h3,h4,h5,h6 {font-family:var(--bs-heading-font-family); margin:0px; font-weight:600; color:var(--bs-white); line-height: 1.5;}
h1 {font-size:60px;}
h2 {font-size:50px;}
h3 {font-size:40px;}
h4 {font-size:20px;}
h5 {font-size:16px;}
.mb-6 {margin-bottom:100px;} 
.g-3, .gx-3 {--bs-gutter-x:1.875rem;}
.gsap-btn svg {margin-left: 10px;}
.gsap-btn {position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 18px 32px 18px 32px; font-size: 18px; color: #fff; border: none; border-radius: 10px; cursor: pointer;background: #09A9AB; overflow: hidden;}
.btn-bg {position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: #067a7d; z-index: 1;}
.btn-text-wrap {position: relative; z-index: 2; display: inline-block; height: 1em; overflow: hidden; white-space: nowrap;}
.btn-text {display: block; line-height: 1em;}
.btn-text.clone {position: absolute; top: 100%; left: 0;}
.card {border-radius: 24px;}
.container {max-width:100%; padding-left:100px; padding-right:100px;}
p {opacity: 0.6;}
input, input.form-control, input:focus, input.form-control:focus {background:#011718; border-radius: 10px; border-color: #062736;}
textarea, textarea.form-control, textarea:focus, textarea.form-control:focus {background:#011718; border-radius: 10px; border-color: #062736; resize:none; height: auto !important;}
.form-control:hover, .form-control:focus {box-shadow: none; border-color: var(--bs-primary) !important;}
label {font-size: 16px; opacity: 0.6;}
.secondary-sec {background: var(--bs-secondary); padding: 100px 0px;}
.deep-sec {background: var(--bs-deep); padding: 100px 0px;}
/* Header Section Start */
header {position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 111; padding: 15px 0px;}
header .logo img {width: 200px;}
.hamburger {width: 30px; height: 20px; position: relative; cursor: pointer; z-index: 1001;}
.hamburger span {position: absolute; height: 3px; width: 100%; background: var(--bs-white); left: 0; transition: 0.3s ease;}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 20px;}
.hamburger span:nth-child(3) { bottom: 0; }
.menu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bs-primary, rgba(0, 123, 255, 0.5));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); clip-path: circle(0% at 50% 50%); display: flex;
  justify-content: center; align-items: center; clip-path: circle(0% at 100% 0%); z-index: 1000;}
.menu ul {list-style: none; padding: 0; margin: 0; text-align: center;}
.menu ul li {padding: 20px 0px;}
.menu ul li a {color: #fff; font-size:30px; text-decoration: none; font-family: var(--bs-heading-font-family);}
.menu ul li a:hover {padding-left: 20px;}
.close-btn {position: absolute; top: 20px; right: 30px; background: transparent; border: none; font-size: 40px; cursor: pointer; color: var(--bs-white); transition: color 0.3s;}
.close-btn:hover {color: #000;}
header.active {position: fixed; width: 100%; top:0; left: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;}
/* Dropdown CSS Start */
nav .dropdown {position: relative;}
nav .dropdown .submenu {max-height: 0; opacity: 0; transform: translateY(-10px); overflow: hidden;transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.4s ease; background:var(--bs-primary);border-radius: 10px; background: var(--bs-deep);}
nav .dropdown .submenu li {padding: 0px;}
nav .dropdown .submenu li a {display: block; padding: 10px 20px; color: #fff; font-size: 20px;}
/* Active class to trigger open animation */
nav .dropdown.open .submenu {max-height: 300px; opacity: 1; transform: translateY(10px); padding: 12px 0px;}
.dropdown-toggle::after {content: inherit;}

/* Homebanner Slider Section Start */
/* .home-slider video {width: 100%; max-width: 100%; height: 100vh; object-fit: cover;} */
.home-slider img {width: 100%; max-width: 100%; height: 100vh; object-fit: cover;}
.home-slider .swiper {width: 100%; height: 100vh; position: relative; background: var(--bs-primary);}
.home-slider .swiper-slide {position: relative;}
.home-slider .swiper-slide::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.7) 10px, rgba(0, 0, 0, 0.3) 150px, rgba(0, 0, 0, 1) 100%);}
.banner-content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; z-index: 11;}
.banner-content {color: var(--bs-white);}
.banner-content h1 {color: var(--bs-white);}
.banner-content p {font-size: 24px; line-height: 1.5  ; margin: 30px 0px;}
.custom-pagination-number {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; font-weight: bold; opacity: 0; transition: opacity 0.4s ease; z-index: 11;}
/* Line + active bar */
.custom-pagination-line {position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 250px; height: 1px; background: rgba(255, 255, 255, 0.3); z-index: 11;}
.custom-pagination-active {position: absolute; top: -1.5px; height: 4px; background: #fff; width: 0;
  left: 0; transition: left 0.5s ease, width 0.5s ease; z-index: 11;}
.scroller {position: absolute; height: 60px; bottom: 90px; left: 50%; transform: translateX(-50%); border: 1px solid #fff;
  width: 35px; border-radius: 35px; z-index: 10;}
.scroller:after {content: ''; position: absolute; height: 10px; width: 1px; left: 50%; transform: translateX(-50%); background: #fff; top: 10px; animation: top-bottom 1s linear infinite;}
@keyframes top-bottom {0% {top: 10px;} 50% {top: 40px} 100% {top: 10px;}}

/* Common Banner Section CSS Start */
.common-banner {aspect-ratio: 16 / 6; width: 100%; position: relative;}
.common-banner picture, .common-banner picture img {width: 100%; height: 100%; object-fit: cover;}
.common-banner::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.7) 10px, rgba(0, 0, 0, 0.5) 180px, rgba(0, 0, 0, 1) 100%);}
.banner-content {position: absolute; top: 30px; display: flex; align-items: center; justify-content: start; height: 100%; }
.banner-content h2 {margin-bottom: 20px; color: var(--bs-white); font-size: 40px;}
.gradient-text {background: linear-gradient(90deg, #09A9AB, #0DD5D8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

/* About Us Page CSS Start */
.vission-sec {background:var(--bs-secondary); padding: 100px 0px;}
.vission-sec .left h3 {font-size: 40px; color: var(--bs-white);}
/* Core Value Section Star */
.core-value-sec {background: var(--bs-deep); padding: 100px 0px;}
.core-value-sec .left figure {height: 450px;}
.core-value-sec .left figure img {width: 100%; height: 100%; object-fit: cover;}
.ttl {margin-bottom: 80px;}
.ttl small {font-size: 20px; font-weight: 500; margin-bottom:20px; display: block; opacity: 0.6;}
.ttl h3 {line-height: 1.3; margin-bottom: 20px;}
ttl span {display: block;}
.core-value-sec .left img {border-radius: 10px;}
.accordian-arrow {width:36px; height: 36px; border-radius: 100%; background: var(--bs-primary); display: flex; align-items: center; justify-content: center;}
.accordian-arrow svg path {fill: var(--bs-white);}
.accordion-button, .accordion-button:not(.collapsed) {background: none; box-shadow: none; border-bottom: 1px solid var(--bs-secondary); padding: 1rem 0; color: var(--bs-white); font-size: 24px; display: flex; align-items: center; justify-content: space-between;}
.accordion-button::after {content: inherit;}
.accordion-item {background: none; border: none; margin-bottom: 20px;}
.accordion-item:last-child {margin-bottom: 0px;}
.accordion-body {padding: 1rem 0;}
.accordion-button .accordian-arrow svg {transform: rotate(-180deg); transition: transform .2s ease-in-out;}
.accordion-button.collapsed .accordian-arrow svg {transform: rotate(0deg);}
.team-sec {padding: 100px 0px;}
.team-sec .ttl {color: var(--bs-dark);}
.team-sec .ttl h3 {color: var(--bs-dark);}
.team-sec .grid {grid-template-columns: repeat(4, 1fr);}
.team-box {position: relative; border-radius: 10px; overflow: hidden;}
.team-box img {height: 400px; width: 100%; object-fit: cover;}
.team-box .content {position: absolute; bottom: 20px; left: 0; display: flex; align-items: end; justify-content: space-between; width: 100%; padding: 0px 16px;}
.team-box svg {width: 20px;}
.team-box::before {background: linear-gradient(180deg, #1C305300 0%, #021426 100%) 0% 0% no-repeat padding-box; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* Location Box CSS Start */
.location-sec {background: var(--bs-secondary); padding: 100px 0px;}
.location-sec .ttl h3 {margin-bottom: 20px;}
.common-card .card {background: #011718; border: 2px solid #062736; transition: all 0.35s ease-in-out; height: 100%;}
.common-card:hover .card {border-color: var(--bs-primary);}
.common-card .card .card-body {padding: 30px;}
.common-card .card img {border-radius: 20px;}
.common-card .card .content h4 {display: flex; align-items: center; justify-content: space-between;}
.common-card .card .content h4 img {width: 36px; border-radius: 3px;}
.common-card .card .content span {font-size: 16px;}
.common-card .card ul {margin-top: 18px; display: flex; flex-direction: column; gap: 18px;}
.common-card .card ul li {display: flex; align-items: start; gap: 10px;}
.common-card .card ul li svg {flex-shrink: calc(0); margin-top: 3px;}
.common-card svg path, .common-card svg rect, .common-card svg circle, .common-card svg line, .common-card svg polyline {stroke: var(--bs-primary);}
.common-card .card ul li a {color: var(--bs-white); font-size: 16px; word-break: break-all;}

/* Contact Form Section CSS Start */
.cont-form-sec {background: url(../images/tech-bg.webp) left top no-repeat; background-size: cover; padding: 100px 0px; position: relative; overflow: hidden;}
.cont-form-sec::before {content: ""; filter: blur(13rem); position: absolute; top: 0; left: 0; opacity: 0.8; background: var(--bs-primary); width: 100%; height: 100%;}
.contact-main-box {background: var(--bs-secondary); padding: 80px; border-radius: 24px; position: relative; z-index: 1;}
.grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
.grid .form-floating:last-child {grid-column: 1 / -1;}
.cont-btn {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.cont-btn small {font-size: 14px;}
.cont-btn .gsap-btn {flex-shrink: 0;}

/* Service Page CSS Start */
.service-banner .banner-content p {margin:20px 0px 30px 0px; opacity: 1;}
.service-banner .gsap-btn {margin: 0 auto;}
.service-banner .scroller {bottom: 30px;}
.overview p {font-size: 20px; opacity: 1;}
/* Case Studies Section Slider Start */
.mySwiper {position: relative;}
.mySwiper::after {
  content: "";
    bottom: 0;
    right: 0;
    width: 10%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: -webkit-linear-gradient(left, rgba(31, 31, 31, 0), #001f20);
}
.cusomt-arrows {display: flex; align-items: center; justify-content: end; gap: 16px; margin-bottom: 30px; position: relative; z-index: 11;}
.cusomt-arrows .swiper-btn {width: 48px; height: 48px; background: var(--bs-primary); border-radius: 3px; display: flex; align-items: center; justify-content: center;}
.cusomt-arrows .swiper-button-disabled {opacity: .7; cursor: not-allowed; border: .14rem solid var(--bs-primary); background: none;}

.common-contact-comp {background: url(../images/digital-solutions-banner.webp) left top no-repeat; background-size: cover; padding: 100px 0px; position: relative; background-position: left; overflow: hidden;}
.common-contact-comp::before {content: ""; position: absolute; top: 0; left: 0; opacity: 0.9; background:var(--bs-secondary); width: 100%; height: 100%;}
.common-contact-comp .gsap-btn {margin: 0 auto;}
.contact-content {position: relative; z-index: 11;}
.contact-content h2 {line-height: 1.3; margin-bottom: 20px;}
.contact-content p {font-size: 22px; margin-bottom: 40px;}

/* Footer Section CSS Start */
footer {background: var(--bs-secondary); padding: 100px 0px 0px 0px;}
.footer-box {display: flex; flex-direction: column; gap: 30px;}
.footer-box a img {width: 200px;}
.footer-box h4 {margin-bottom: 10px;}
.footer-box ul {display: flex; flex-direction: column; gap: 12px;}
.footer-box .d-flex {flex-direction: column; gap: 30px;}
.social div {display: flex; align-items: center; gap: 10px;}
.social a {width: 48px; height: 48px; border-radius: .5rem; border: 2px solid #062736; display: flex; align-items: center; justify-content: center;}
.social h4 {margin-bottom: 20px;}
.copyright {display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #062736; padding: 20px 0px; margin-top: 50px;}
.copyright p {margin-bottom: 0px;}
.terms-links {display: flex; gap: 16px;}

.coming-soon {background: var(--bs-secondary);}
.coming-soon .col-12 {display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh;}
.coming-soon .col-12 h1 {font-size: 70px;}