*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.outline *{
    border: 1px solid #000;
}

html { scroll-behavior: smooth; }


body {
    overflow-x: hidden;
    width: 100%;
}

main {
    overflow-x: hidden;
    width: 100%;
}

/* ===================== Text Animation Effects   ==========================*/

/* Letter-by-Letter Masked Reveal */
.reveal-text {
    opacity: 1 !important;
    visibility: visible !important;
}

.mask-word {
    display: inline-flex;
    overflow: hidden; 
    vertical-align: bottom;
    position: relative;
}

.mask-char {
    display: inline-block;
    transform: translateX(105%); 
    opacity: 0;
    will-change: transform, opacity;
}

.reveal-text.animated .mask-char {
    animation: maskedSlideLeftToRight cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
@keyframes maskedSlideLeftToRight {
    0% {
        transform: translateX(105%);
        opacity: 0;
    }
    30% {
        opacity: 1; 
    }
    100% {
        transform: translateX(0); 
        opacity: 1;
    }
}


/* Fade TypeWriter By Letters */
.dynamic-typewriter {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.dynamic-typewriter.start-typing {
    opacity: 1;
}

.dynamic-typewriter .word-wrapper {
    display: inline-block;
    white-space: nowrap; 
}

.dynamic-typewriter .fade-letter {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.dynamic-typewriter .fade-letter.letter-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== Text Animation Effects End  ==========================*/

/*=========================== Fonts =========================*/

.syncopate-700 {
    font-family: "Syncopate", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.jost-400 {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.jost-500 {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.jost-600 {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.jost-700 {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.plus-jakarta-sans-200 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.plus-jakarta-sans-600 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.plus-jakarta-sans-700 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.bebas-neue-400 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*=========================== Button =========================*/

.btn-talk {

    background-color: #2A3BBA; 
    color: white !important;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 14px 26px;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-talk:hover {
    background-color: #0A0707;
    /* transform: translateY(-1px); */
}

.our-services, .all-projects {
    background-color: #FFFFFF; 
    color: black !important;
    font-size: 17px;
    padding: 9px 23px;
    cursor: pointer;
    white-space: nowrap;
    /* width: 184.17px; */
    /* height: 52px; */
    line-height: 34px;
    border: none !important;
    outline: none !important;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.our-services a, .all-projects a {
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.our-services a svg, .all-projects a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.our-services:hover, .all-projects:hover {
    background-color: #333cdd;
    color: #ffffff !important;
    border-color: #333cdd !important;
}

.our-services:hover a, .all-projects:hover a {
    color: #ffffff !important;
}

.our-services:hover a svg, .all-projects:hover a svg {
    transform: translate(3px); 
}


.get-in-touch, .view-fresh-news, .work-with-us{
    display: block;
    font-size: 17px;
    line-height: 23.8px;
    color: #0A0A0A;
}

.get-in-touch svg, .view-fresh-news svg, .work-with-us svg{
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.get-in-touch:hover svg, .view-fresh-news:hover svg, .work-with-us:hover svg{
    transform: translate(3px); 
}


.collaboration-lets-talk-btn {
    background-color: transparent; 
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    font-size: 17px;
    padding: 15px 52px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 34px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.collaboration-lets-talk-btn a {
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.collaboration-lets-talk-btn a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.collaboration-lets-talk-btn:hover {
    background-color: #FFFFFF; 
    color: black  !important;
    /* border-color: #333cdd !important; */
}


.collaboration-lets-talk-btn:hover a svg {
    transform: translate(3px); 
}


.collaboration-2-lets-talk-btn {
    background-color: #FFFFFF; 
    color: #000000 !important;
    border: 1px solid #000000 !important; 
    font-size: 17px;
    padding: 15px 52px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 34px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.collaboration-2-lets-talk-btn a {
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.collaboration-2-lets-talk-btn a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.collaboration-2-lets-talk-btn:hover {
    background-color: #333cdd; 
    color: #FFFFFF !important;
    border-color: #333cdd !important;
}


.collaboration-2-lets-talk-btn:hover a svg {
    transform: translate(3px); 
}


.inner-page-all-projects-btn {
    background-color: #E9E9E9; 
    color: black !important;
    font-size: 17px;
    padding: 9px 23px;
    cursor: pointer;
    white-space: nowrap;
    width: 184.17px;
    height: 52px;
    line-height: 34px;
    border: none !important;
    outline: none !important;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.inner-page-all-projects-btn a{
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.inner-page-all-projects-btn a svg{
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.inner-page-all-projects-btn:hover{
    background-color: #333cdd;
    color: #ffffff !important;
    border-color: #333cdd !important;
}

.inner-page-all-projects-btn:hover a{
    color: #ffffff !important;
}

.inner-page-all-projects-btn:hover a svg{
    transform: translate(3px); 
}


.connect-with-our-expert-btn {
    background-color: #FFFFFF; 
    color: black !important;
    font-size: 17px;
    padding: 9px 23px;
    cursor: pointer;
    white-space: nowrap;
    /* width: 184.17px; */
    /* height: 52px; */
    line-height: 34px;
    outline: none !important;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.connect-with-our-expert-btn a {
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.connect-with-our-expert-btn a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.connect-with-our-expert-btn:hover {
    background-color: #333cdd;
    color: #ffffff !important;
    border-color: #333cdd !important;
}

.connect-with-our-expert-btn:hover a {
    color: #ffffff !important;
}

.connect-with-our-expert-btn:hover a svg {
    transform: translate(3px); 
}

/*=========================== Main Navbar =========================*/

/* <!-- Navbar Title --> */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 1.5rem;
}

/* 🔥 FIXED: Logo completely responsive aur custom scale size par responsive rahega */
.navbar-brand img {
    width: auto;             /* Aspect ratio damage nahi hoga */
    object-fit: contain;
    display: block;
    max-height: 100%;        /* Bootstrap flex-bounds se bahar crash nahi karega */
}


.offcanvas-title {
    font-size: 14px;
    line-height: 12px;
    color: rgb(34, 34, 34);
    text-transform: uppercase;
}

/* <!-- Navigation Links --> */

.navbar-nav .nav-item .nav-link{
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 12px;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-nav .nav-item .nav-link a{
    padding: 10px 20px;
}

@media (min-width: 992px){
    .navbar-nav .nav-item .nav-link {
        border-radius: 20px !important;
    }

    .navbar-nav .nav-item .nav-link:not(.active):hover {
        background-color: #FCF1E5 !important;
        color: #000000 !important;
    }
    #mainNavbar .navbar-nav .nav-item .nav-link.active,
    .navbar-transparent .navbar-nav .nav-item .nav-link.active,
    .navbar-scrolled .navbar-nav .nav-item .nav-link.active,
    .navbar-nav .nav-item .nav-link.active {
        background-color: #0a0a0a !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }
}

@media (max-width: 991px){
    .navbar-nav .nav-item .nav-link{
    color: black;
    padding: 0;
    line-height: 48px;
    border-bottom: 1px solid rgba(235, 235, 235, 1);
    border-radius: 0px;
}

    .navbar-nav .nav-item .nav-link:hover{
    background-color: none;
    border-radius: none;
}
}

/* <!-- End --> */

/* <!-- Search and Talk Button on Navbar  --> */
/* Base Layout */
.nav-right-actions {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search Input Base Styling */
.search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    height: 45px;
}

/* Icons General Styling */
.search-action-btn, .close-btn {
    background: none;
    border: none;
    font-size: 13px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s ease;
}

/* Close button default hidden state */
.close-btn {
    display: none;
}

/* Search Wrapper General Base */
.search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.2s ease;
}

.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none; /* Default cross ko load hone se block kar diya */
}

.navbar-scrolled .close-btn,
#mainNavbar:not(.has-scroll-effect) .close-btn {
    color: #111111 !important;
}

.navbar-transparent.has-scroll-effect .close-btn {
    color: #ffffff !important;
}



/* DESKTOP ONLY STYLING (992px and above)  */

/* DESKTOP ONLY STYLING (992px and above)  */
@media (min-width: 992px) {
    .nav-right-actions {
        justify-content: flex-end; 
        width: 140px; /* Dynamic width area fix kiya */
        position: relative;
        height: 45px;
        display: flex;
        align-items: center;
    }

    /* Desktop par shuru mein input field chupi hui hogi */
    .search-input {
        width: 0;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
    }

    /* 🔥 THE FIX: Active hote hi search input ko absolute kiya taake links apni jagah fix rahein */
    .search-wrapper.active {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #ffffff; /* Nav bar state color sync fill */
        z-index: 5;
        display: flex;
        align-items: center;
    }
    
    /* Agar transparent header par ho to background seamless transparent rahe */
    .navbar-transparent.has-scroll-effect .search-wrapper.active {
        background: transparent !important;
    }

    /* Active State width configuration */
    .search-wrapper.active .search-input {
        width: 180px; 
        padding: 6px 35px 6px 12px; /* Close button ke liye right side par padding chodi */
        visibility: visible;
        opacity: 1;
        box-shadow: 0 1px 0 0 #333; 
        border-bottom: none;
    }

    /* Transparent page par underline white ho jaye */
    .navbar-transparent.has-scroll-effect .search-wrapper.active .search-input {
        box-shadow: 0 1px 0 0 #fff; 
        color: #ffffff !important;
    }

    /* Active State: Magnifying glass collapse control */
    .search-wrapper.active .search-action-btn {
        display: none !important;
    }

    /* Active State: Close cross button corner lock alignment */
    .search-wrapper.active .close-btn {
        display: block;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6;
    }

    /* Active State: Let's Talk button vanishes cleanly behind absolute bounds */
    .btn-talk.hide-btn {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}


/* For Mobile and Tablet Screens */
@media (max-width: 991px) {
    .nav-right-actions {
        width: 100%;
        margin-top: 20px;
        flex-direction: column-reverse; /* Search field upar aur button neechay stack hoga */
        align-items: flex-start;
        gap: 15px;
    }

    .btn-talk {
        /* width: 100%; */
        text-align: center;
    }

    .search-wrapper {
        width: 100%;
        border-bottom: 2px solid #ccc; /* Mobile par transparent outline design */
    }

    .search-input {
        width: 100% !important; /* Mobile par field hamesha open aur full layout par rahegi */
        visibility: visible !important;
        opacity: 1 !important;
        /* padding: 5px 10px; */
    }

    .search-action-btn {
        display: block !important; /* Magnifying glass icon mobile par visible rahega */
    }

    .close-btn {
        display: none !important; /* Mobile offcanvas par cross ki zaroorat nahi hai */
    }
}


/* SCROLL EFFECT LOGIC (Transparent to Solid White) */

.navbar-transparent {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    /* transition: all 0.4s ease-in-out; */

    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}
@media (min-width: 992px) {
    .navbar-transparent .navbar-brand,
    .navbar-transparent .navbar-nav .nav-item .nav-link,
    .navbar-transparent .search-action-btn,
    .navbar-transparent .search-input {
        color: #ffffff !important;
    }

    /* Transparent state ke hover par light blend setup */
    .navbar-transparent .navbar-nav .nav-item .nav-link:hover {
        background-color: #FCF1E5 !important; 
        color: #000000 !important; 
        border-radius: 20px;
    }
}
.navbar-transparent .search-action-btn,
.navbar-transparent .navbar-brand {
    color: #ffffff !important;
}

.navbar-transparent .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.navbar-transparent .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}


.navbar-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s ease-in-out;
}

/* Scrolled state mein text aur links ka color -> Black/Dark Gray */
.navbar-scrolled .navbar-brand,
.navbar-scrolled .navbar-nav .nav-item .nav-link,
.navbar-scrolled .search-action-btn,
.navbar-scrolled .search-input {
    color: #222222 !important;
}

/* Scrolled state mein mobile burger icon lines ko dark karna */
.navbar-scrolled .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1) !important;
}
.navbar-scrolled .navbar-toggler-icon {
    filter: none;
}

/* Scrolled state ka hover state desktop ke liye */
@media (min-width: 992px) {
    .navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
        background-color: #FCF1E5 !important;
        color: #000000 !important;
    }
}

/*=========================== Main Navbar End =========================*/

/*======================================================= HOME  ==============================================================*/

/*=========================== Hero Section =========================*/

/* Hero Section Effect */
.hero-slider .swiper-slide-active img {
    animation: kenBurnsEffect 5s ease-out both;
}

@keyframes kenBurnsEffect {
    0%   { transform: scale(1.08) translate3d(1.5%, 0, 0); }
    100% { transform: scale(1)    translate3d(-1%, 0, 0); }
}


/* Slider Area Container */
.hero-section {
    width: 100%;
    height: 680px; 

    min-height: 680px; 
    max-height: 750px;
    
}

/* Fix: Swiper container ko force karein pure section par stretch karne ke liye */
.hero-slider {
    width: 100% !important;
    height: 100% !important;
    position: relative;
}

/* Fix: Slides ko absolute lock karein taake block layout collapse na ho */
.hero-slider .swiper-slide {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}

/* Images Auto-Fill Rule */
.hero-slider .swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center;
    z-index: 1; 
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* YEH ADD KARO ↓ */
    will-change: transform;
    transform: translateZ(0);
}

/* Background Dark Overlay Effect */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(10,7,7,0.4) 0%, rgba(10,7,7,0.85) 100%);
    z-index: 2; /* Image ke upar overlay */
}

/* Foreground Text over image */


.hero-slider .swiper-slide .hero-content-overview {
    opacity: 0;
    transform: translateY(50px);
    will-change: transform, opacity;
    /* 
    */
}

/* --- Trigger Animation on Active Slide (Next/Prev karne par chalega) --- */
.hero-slider .swiper-slide-active .hero-content h1 {
    animation: fade-in-bottom-normal 0.8s ease-out forwards;
    animation-delay: 0.2s; /* H1 thoda pehle aayega */
}

.hero-slider .swiper-slide-active .hero-content-overview {
    animation: fade-in-bottom-normal 1s ease-out forwards;
    animation-delay: 0.5s; /* Overview thodi der baad smoothly aayega */
}

@keyframes fade-in-bottom-normal {
    0% {

    }
    100% { 
        transform: translateY(0); 
        opacity: 1;
    } 
}

.hero-content {
    position: relative;
    z-index: 3; /* Overlay aur image dono ke upar text */
    /* padding: 0 20px; */
}

.hero-content h1{
    letter-spacing: -1px;
    line-height: 1.15;
}

/* ==========================================================================
   1. Default Hidden States (Jab slide active nahi hoti)
   ========================================================================== */
.hero-slider .swiper-slide .hero-content h1 {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-slider .swiper-slide .hero-content-overview {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ==========================================================================
   2. NEXT DIRECTION ANIMATION (Forward Motion)
   ========================================================================== */
/* Heading: Left se aayegi */
.hero-slider.slide-direction-next .swiper-slide-active .hero-content h1 {
    animation: slide-in-right-intellify 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.2s;
}

/* Overview: Niche se upar jayega */
.hero-slider.slide-direction-next .swiper-slide-active .hero-content-overview {
    animation: slide-in-up-intellify 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.4s;
}

/* ==========================================================================
   3. PREVIOUS DIRECTION ANIMATION (Reverse Motion!)
   ========================================================================== */
/* Heading: Right se aayegi */
.hero-slider.slide-direction-prev .swiper-slide-active .hero-content h1 {
    animation: slide-in-up-intellify 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.2s;
}

/* Overview: Upar se niche aayega (As per your request) */
.hero-slider.slide-direction-prev .swiper-slide-active .hero-content-overview {
    animation: slide-in-up-intellify 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.4s;
}

/* ==========================================================================
   4. Keyframes Definition
   ========================================================================== */

@keyframes slide-in-up-intellify {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right-intellify {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-up-intellify {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-up-intellify {
    from { opacity: 0; transform: translateY(-50px); } /* Minus lagaya taake upar se start ho */
    to { opacity: 1; transform: translateY(0); }
}

.hero-content h3{
    font-size: clamp(0.75rem, 0.625rem + 0.5556vw, 1.125rem);
    text-transform: uppercase;
}

.hero-content p{
    font-size: clamp(0.75rem, 0.625rem + 0.5556vw, 1.125rem);
    color: rgba(255, 255, 255, 0.67);
}

.my-custom-vertical-dots {
    bottom: auto !important; 
    right: auto !important;  
    width: auto !important;
    
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important; 
    
    top: 50% !important;
    left: 20px !important; 
    transform: translateY(-50%) !important;
    z-index: 10; 
}

/* Jab screen barhi ho (Desktop view) */
@media (min-width: 992px) {
    .my-custom-vertical-dots {
        left: 120px !important; 
    }
}

/* Dots ka custom color aur look (Normal Inactive State) */
.hero-slider .my-custom-vertical-dots .swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.5;
    width: 6px; 
    height: 6px;
    margin: 0 !important; 
    position: relative; 
    transition: all 0.3s ease;
}

/* Active dot ka rang aur look */
.hero-slider .my-custom-vertical-dots .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #ffffff !important;
    transform: scale(1); 
}

.hero-slider .my-custom-vertical-dots .swiper-pagination-bullet-active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Ring ka size (Dot se bada) */
    width: 22px; 
    height: 22px;
    
    /* Circle border styling */
    border: 1px solid #ffffff;
    border-radius: 50%;
    
    /* Transition animation */
    animation: scaleIn 0.5s ease-out forwards;
}

/* Smooth active circle pop animation */
@keyframes scaleIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}


.arrow-keys {
    position: absolute;
    bottom: 70px;      /* Niche se 70px ka gap */
    left: 100px;        /* Left side se 100px ka gap */
    z-index: 10 !important; /* Slider content ke bilkul upar display karne ke liye */
}

.arrow-keys a {
    display: inline-flex;       
    align-items: center;
    justify-content: center;
    text-decoration: none;      
    
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    color: #ffffff !important;   /* Waise rang WHITE rahega */
    
    /* Desktop size */
    height: 50px;
    width: 50px;
    
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover effect */
.arrow-keys a:hover {
    background: #ffffff;
    color: #000000 !important; /* Hover karne par rang BLACK ho jayega */
}

/* 2. Media Queries (Neeche rahengi taaki override kar sakein) */
@media (max-width: 992px) {
    .arrow-keys {
        bottom: 40px;      
        left: 30px;        
    }

    .arrow-keys a {
        height: 44px;
        width: 44px;
    }
}

@media (max-width: 768px) {
    .arrow-keys a {
        height: 32px;
        width: 32px;
    }

    .arrow-keys a svg {
        transform: scale(0.8); /* Icon ko chota karne ke liye */
    }
}

.social-media{
    bottom: 40px;
    right: 20px;
}

@media (min-width: 992px){
    .social-media{
    bottom: 60px;
    right: 100px;
}
}

.social-media h3 {
    padding: 0;
    font-size: 12px;
}

/* Glassmorphism Icon Circles */
.social-icon-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-icon-circle:hover {
    background: #ffffff; 
    color: #000000;
    /* transform: translateY(-3px); */
}

/* Tooltip ka custom background aur look */
.custom-tooltip .tooltip-inner {
    background-color: #0202022b; 
    color: #ffffff;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
}

/* Tooltip ke chote arrow (pointer) ka color set karne ke liye */
.custom-tooltip .tooltip-arrow::before {
    display: none;
}


/*=========================== Hero Section End =========================*/


/* =========================== Carousel Section ========================= */
.carousel-swiper .swiper-slide img.logo-img {
    position: relative !important;
    width: auto !important;
    max-width: 140px !important;  /* Logos ki standard safe width */
    height: 45px !important;       /* Logos ki grid height */
    object-fit: contain !important;
    transform: none !important;     /* Hero section ke zoom scale se azaadi */

}
/* =========================== Carousel Section End========================= */

/* =========================== Services Section ========================= */
.services-section{
    color: black;
    background-color: rgb(247, 247, 247);
}

.services-intro h3{
    font-size: 18px;
    line-height: 18px;


}
.services-intro h1{
    font-size: 46px;
    letter-spacing: -1.82px;
    line-height: 46px;

}

.services-card h5, 
.services-card h5 {
    font-size: 14px !important;  /* Bootstrap ki default headings ko bypass karne ke liye !important laga diya */
    color: #0a0a0a !important;
    line-height: 36px;
    letter-spacing: 0.98px;
}

.services-card h2, 
.services-card h2 {
    font-size: 28px !important;  /* Bootstrap ki default headings ko bypass karne ke liye !important laga diya */
    color: #0a0a0a !important;
    line-height: 36.4px;
}

.services-card p, 
.services-card p {
    font-size: 16px !important;  /* Bootstrap ki default headings ko bypass karne ke liye !important laga diya */
    color: rgba(0, 0, 0, 0.68)!important;
    line-height: 22.4px;   
}


.services-list li {
    /* display: flex;
    align-items: center; */
    margin-bottom: 10px; /* Links ke darmiyan ka gap */
    line-height: 22.7px;
   
}

/* Custom SVG Plus Icon Adjustments */
.services-list .plus-icon {
    width: 12px;           /* Default clean scale size */
    height: 12px;
    fill: currentColor;    /* Auto colors inherit */
    color: #000000;        /* Plus icon color */
    margin-right: 12px;    /* Icon aur text ke darmiyan ka safe distance */
    flex-shrink: 0;
}

.services-list a {
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}


/* =========================== Services Section End========================= */

/* =========================== Insights Section ========================= */

.insights-media{
    display: grid;
    grid-template-areas: "stack";
    min-height: 450px;
}

.insights-figure,
.insights-overlay,
.insights-caption {
    grid-area: stack;
}

.insights-figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    position: relative; /* ← yeh add karo */
}

.insights-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.25) 60%,
        rgba(0,0,0,0.10) 100%
    );
    z-index: 2;
    pointer-events: none; /* click through hoga */
}

.insights-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1; /* Overlay se niche */
}

.insights-slide.active {
    opacity: 1;
    z-index: 1;
}


.insights-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@keyframes kenBurns {
    0%   { transform: scale(1);    transform-origin: center center; }
    100% { transform: scale(1.20); transform-origin: center center; }
}

.insights-slide.active img {
    animation: kenBurns 6s ease-out forwards;
}

.insights-caption {
    z-index: 3;
    align-self: center;   
    justify-self: start; 
}

.insights-caption h3 {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 20px;
}

.insights-caption h1 {
    font-size: clamp(2.5rem, 2.0833rem + 1.8519vw, 3.75rem);
    color: rgba(255, 255, 255);
    letter-spacing: -2.4px;
}

.insights-accordion {
    background: transparent;
    border: 1px solid #000000 !important; 
    border-radius: 0 !important;
}


.insights-accordion .accordion-item {
    border: none;
    border-radius: 0 !important; 
    background-color: #ffffff;
}

.insights-accordion .accordion-header {
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    border-bottom: 1px solid #000000 !important;
}

.insights-accordion .accordion-item:last-child .accordion-header {
    border-bottom: none !important;
}

.insights-accordion .accordion-item:last-child .accordion-button:not(.collapsed) {
    border-bottom: 1px solid #000000 !important;
}

/* Master Header Button Settings */
.insights-accordion .accordion-button {
    font-size: 22px; 
    color: #000000 !important;
    background: transparent !important;
    box-shadow: none !important; 
    border: none;
    /* padding: 24px 24px;  */
    position: relative;
    border-radius: 0 !important;
}

/* --- BODY CONTENT CONTENT AND PADDING --- */
.insights-accordion .accordion-collapse {
    /* Har open collapse body ke neeche border line taake next panel se border match kare */
    border-bottom: 1px solid #000000 !important;
}

/* Sabse last panel ki collapse body par neeche line nahi chahiye kyunki outer border maujood hai */
.insights-accordion .accordion-item:last-child .accordion-collapse {
    border-bottom: none !important;
}


.insights-accordion .accordion-body p {
    color: #000000a6; 
    font-size: 17px; 
    line-height: 28.9px
}


.insights-accordion .accordion-button::after {
    display: none !important;
}

.insights-accordion .accordion-button::before {
    content: "";
    position: absolute;
    right: 24px; 
    top: 50%;
    transform: translateY(-50%); 
    width: 14px;
    height: 14px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    transition: transform 0.3s ease;
}

.insights-accordion .accordion-button:not(.collapsed)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    transform: translateY(-50%) rotate(180deg); 
}

.num-digit-1{
    font-size: 50px;
}
.num-digit-2{
    font-size: 50px;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #333;
    text-shadow: none;
}
.num-digit-3{
    font-size: 50px;
}


.counter-label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* color: rgba(0, 0, 0, 0.86); */
    color: #000000DB;
    line-height: 18px;
}

/* =========================== Insights Section End ========================= */


/* =========================== Consulting Process Overview Section ========================= */
.consulting-process-overview{
    color: black;
    background-color: rgb(247, 247, 247);
}

.consulting-process-overview h3{
    font-size: 16px;
    line-height: 16px;
    color: #0A0A0A;
    text-transform: uppercase;
}

.consulting-process-overview h1{
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}


.consulting-process-overview p{
    display: block;
    font-size: 17px;
    line-height: 23.8px;
}


.process-section {
    position: relative;
}

.process-item {
    position: relative;
    text-align: center;
}

.process-item h4{
    color:#0a0a0a;
    font-size: 20px;
    line-height: 24px;
}
.process-item p{
    color:#717780;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
}

/* Base Node Circle Grid */
.circle-node-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border: 2px solid #868686;
    border-radius: 50%;
}

/* Step Badge Context Upper Border Corner */
.step-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #000000;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
}


@media (min-width: 992px) {
    .process-item::after {
        content: "";
        position: absolute;
        top: 65px; 
        left: calc(50% + 60px); 
        width: calc(100% + 30px - 150px);

        height: 2px;
        background-color: #868686;
        z-index: 1;
    }

    .process-item:last-child::after {
        display: none !important;
    }
}
/* =========================== Consulting Process Overview Section End ========================= */


/* =========================== Expertise Section ========================= */
.expertise{
    background-color: black;
    color: white;
}

.expertise-content{
    padding-right: 60px;
}

.expertise-content h3{
    /* letter-spacing: -1.76px;  */
    font-size: 16px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.79);
    text-transform: uppercase;
}

.expertise-content h1{
    letter-spacing: -1.76px; 
    font-size: 44px;
    line-height: 44px;
}

.expertise-content p{
    color: rgba(255, 255, 255, 0.53);
    font-size: 17px;
    line-height: 24px;
    padding-right: 30px;
}

.expertise-slider {
    /* height: 100% !important;  */
    min-height: 619px; 
    position: relative;
}
 
/* Slides */
.expertise-slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
 
.expertise-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/* Vertical pagination — bottom right */
.expertise-slider .swiper-pagination {
    position: absolute;
    bottom: 20px !important;
    right: 15px !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    counter-reset: slide-num;
    /* z-index: 10; */
    /* font-size: 20px; */
}
 
.expertise-slider .swiper-pagination-bullet {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    counter-increment: slide-num;


    font-size: 17px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-weight: 400 !important;
    transition: color 0.3s ease, font-weight 0.3s ease;
}
 
.expertise-slider .swiper-pagination-bullet::before {
    content: counter(slide-num);
}
 
.expertise-slider .swiper-pagination-bullet-active {
    font-size: 20px !important;
    color: #ffffff !important;
    border-bottom: 2px solid #ffffff;
    font-weight: 600 !important;
    padding-bottom: 2px;
    padding-left: 5px;  
    padding-right: 5px;
}
 
/* PREV / NEXT — bottom left */
.expertise-arrows {
    position: absolute;
    bottom: 20px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}
 
.expertise-prev,
.expertise-next {
    background: none;
    border: none;
    color: rgb(237, 242, 244);
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}
 
.expertise-prev:hover,
.expertise-next:hover {
    color: #ffffff;
    border-bottom: 1px solid white;
}
 
/* Responsive */
@media (max-width: 991.98px) {
    .expertise-slider {
        /* Mobile/Tablet par columns upar-niche hote hain, wahan explicit height wapas dein ge */
        /* height: 450px !important;  */
        margin-top: 2rem;
    }
}
 
@media (max-width: 575.98px) {
    .expertise-slider {
        height: 332px !important;
    }
 
    .expertise-arrows {
        bottom: 16px;
        left: 16px;
    }
 
    .expertise-slider .swiper-pagination {
        bottom: 16px !important;
        right: 16px !important;
    }
}

.expertise-slider .lp-slide {
    /* position: relative; */
    width: 100%;
    height: 100%;
}

.expertise-slider .lp-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}


.expertise-slider .lp-overlay {
    /* position: absolute; */
    inset: 0; 
    background: rgba(0, 0, 0, 0.74);
    transition: background 0.4s ease; 
    /* z-index: 1;  */
    pointer-events: none;
}

.expertise-slider .swiper-slide-active.lp-slide .lp-overlay {
    background: rgba(7, 7, 7, 0.3) !important; /* Active slide par overlay kam kar ke 0.35 kar diya taake pic bright aur saaf dikhe */
}

.expertise-slider .lp-content {
    position: absolute;
    /* left: 20px;   */
    z-index: 2;   
    color: #ffffff;
    /* right: 40px;   */
    text-align: left; 
    padding: 15px;
}

.expertise-slider .lp-content .lp-title {
    font-size: 22px;
    line-height: 28.6px;
    margin-bottom: 0.7rem;
    letter-spacing: -0.3px;
    color: rgb(255, 255, 255);
}

.expertise-slider .lp-content .lp-title:hover {
    color: rgba(255, 255, 255, 0.8);
}

.expertise-slider .lp-content .lp-date {
    display: flex; 
    align-items: center; 
    font-size: 14px;
    /* letter-spacing: 0.1em; */
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.51);
    line-height: 23.8px;
    gap: 6px;
}
/* =========================== Expertise Section End ========================= */

/* =========================== Latest News Update Section ========================= */

.latest-news-updates h3{
    font-size: 16px;
    line-height: 16px;
    color: rgb(10, 10, 10);
    text-transform: uppercase;
    display: inline-block;
}
.latest-news-updates h1{
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    color: rgb(0, 0, 0);
}

.latest-news-updates p{
    display: block;
    font-size: 17px;
    line-height: 23.8px;
}

.latest-news-card {
    display: grid;
    grid-template-areas: "stack";
    /* border-radius: 10px; */
    overflow: hidden;
    position: relative; /* ← Bootstrap position-relative rakho */
    color: white;
}

/* Sab ek cell mein — quotes nahi chahiye */
.latest-news-card > * {
    grid-area: stack; /* ← "stack" nahi, sirf stack */
    width: 100%;
    height: 100%;
}

/* Image */
.latest-news-card img {
    display: block;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform; 
}

.latest-news-card:hover img {
    transform: scale(1.03); /* Halka aur clean premium 6% zoom scale */
}

/* Overlay */
.nc-overlay {
    background: #0000008C;
    z-index: 1;
    pointer-events: none;
}

/* Date — Top Right Corner Position Fix */
.latest-news-card .nc-date-block {
    z-index: 3;
    align-self: start;     /* Top edge */
    justify-self: end;     /* Right edge */
    
    width: auto !important; 
    height: auto !important;
    
    padding: 10px 20px;     
    background-color: #ffffff !important; 
}

.latest-news-card .nc-date-block a {
    color: rgb(51, 34, 34) !important;  
    font-size: 12px;
    line-height: 20.4px;
    text-transform: uppercase;    
    display: block;                      
}

/* Content — bottom */
.nc-content {
    z-index: 2;
    align-self: end;    /* bottom */
    justify-self: start; /* left */
    height: fit-content; /* ← full height nahi, sirf content jitna */
    padding: 30px;
}

/* Core link reset */
.nc-category {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
    text-decoration: none !important;
}

.nc-category .nc-cat-text {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.nc-category .nc-divider {
    padding: 0 5px; 
    color: rgba(255, 255, 255, 0.4) !important; 
    pointer-events: none;
    display: inline-block;
}

.nc-category .nc-cat-text:hover {
    color: #ffffff !important; 
}
.nc-title {
    display: inline-block; 
    font-size: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem); 
    color: #ffffff;
    line-height: 26px;
    margin: 0;
    position: relative;   
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Base Line Setup */
.nc-title::after {
    content: '';
    position: absolute;
    height: 2px;               /* Line Thickness */
    bottom: -2px;              /* Text se niche distance */
    background-color: #ffffff; /* Line Color */
    
    /* 🔥 Default state (Hover out): left auto aur right 0 rakhenge taake 100 se 0 right side par ho */
    width: 0;
    left: 0;
    right: auto;
    
    /* Smooth transition flow */
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 🌟 Hover hone par: Left 0 aur Right auto taake 0 se 100 left side se shuru ho */
.nc-title:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

/* =========================== Latest News Update Section End ========================= */


/* =========================== Testimonial Section ========================= */
/* .expertise{
    background-color: rgb(247, 247, 247);
} */

.why-choose-section h3{
    font-size: 16px;
    line-height: 16px;
    color: rgb(10, 10, 10);
    text-transform: uppercase;
    display: inline-block;
}
.why-choose-section h1{
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    color: rgb(0, 0, 0);
}

.why-choose-section p{
    display: block;
    font-size: 17px;
    line-height: 23.8px;
}

/* Custom Quote spacing */
.quote-icon {
    color: rgba(0, 0, 0, 0.16); 
    width: 20px; /* Content layout balance ke liye size thoda visible kiya */
    height: auto;
    margin-bottom: 20px;
}

.why-choose-cards p {
    font-size: 22px;
    color: rgb(10, 10, 10);
    line-height: 31px;

}

/* 🔥 NEW PROFILE WRAPPER DESIGN */
.why-choose-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    margin-bottom: 5px; /* Slider bounds se balanced padding rakhne ke liye */
}

/* Avatar Image Crop to Perfect Circle */
.why-choose-user-info .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0; /* Image ko kisi bhi haal mein dabne nahi dega */
}

.why-choose-user-info .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Typographic specifications */
.why-choose-user-info .user-meta {
    display: flex;
    flex-direction: column; /* Name aur Designation ko clean line-by-line lock karega */
    justify-content: center;
} 

.why-choose-user-info .user-name {
    font-size: 18px;
    color: #0a0a0a;
    line-height: 1.2; /* Tight vertical space for dynamic sizing */
    margin: 0 !important;
}

.why-choose-user-info .user-designation {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    margin-top: 2px !important;
}



/* Wrap ko zyada padding do arrows ke liye */
.why-choose-slider-wrap {
    position: relative;
    padding: 0; /* arrows yahan fit honge */
}

.why-choose-slider {
    overflow: hidden; /* Slides block clip rakhne ke liye code default stable */
}

/* Arrows — vertically center, wrap ke edges pe */
.why-choose-slider-prev,
.why-choose-slider-next {
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5; /* Stack sequence upar rakhne ke liye weight barhaya */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;;
}

.why-choose-slider-prev { 
    left: -60px; 
}
.why-choose-slider-next { 
    right: -60px; 
}

.why-choose-slider-prev svg,
.why-choose-slider-next svg {
    width: 24px;       /* Iconic representation visual focus improve karne ke liye clear size */
    height: 24px;
    stroke: #111111;
    stroke-width: 2;   /* Stroke width strong ki taake clear visibility ho */
    fill: none;
}


.why-choose-slider-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    opacity: 1;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}


.why-choose-slider-pagination .swiper-pagination-bullet-active {
    background: #111;
    transform: scale(1.5);
}    

/* =========================== Testimonial Section End ========================= */


/* =========================== Team Section ========================= */
.team{
    background-color: rgb(247, 247, 247);
}

.team h3{
    font-size: 16px;
    line-height: 16px;
    color: rgb(10, 10, 10);
    text-transform: uppercase;
    display: inline-block;
}
.team h1{
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    color: rgb(0, 0, 0);
}

.team p{
    display: block;
    font-size: 17px;
    line-height: 23.8px;
}

.team-profile-card {
    background-color: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.tc-image-wrapper {
    width: 100%;
    height: 100%;
}

.tc-image-wrapper img {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 🔥 CONTENT OVERLAY BOX - Default position hidden down below the card */
.tc-info {
    /* position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2; */
    
    /* Initially pushed down outside the view bounds */
    transform: translateY(101%); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Inner block with clean solid panel styling */
.tc-info-inner {
    /* padding: 30px; */
    background: #ffffff;
}

@media (max-width: 576px) {
    /* .tc-info-inner {
    padding: 20px;
    background: #ffffff;
} */
}

/* Typography locks */
.tc-info-inner .user-name {
    font-size: 19px;
    color:rgb(10, 10, 10);
    letter-spacing: 0.7px;
}

.tc-info-inner .user-designation {
    font-size: 15px;
    color:rgba(0, 0, 0, 0.58);
    letter-spacing: 0.4px;
}

/* Social link buttons style layout rules */
.tc-socials .social-link {
    color: #555555;
    font-size: 16px;
    transition: color 0.2s ease;
}

.tc-socials .social-link:hover {
    color: #111111;
}

/* ==========================================================================
   HOVER ENGINE TRIGGER
   ========================================================================== */

/* 🔥 Jab card par hover hoga, info container bottom se 0 coordinate par smooth slide up hoga */
.team-profile-card:hover .tc-info {
    transform: translateY(0);
}

/* Micro-zoom acceleration effect on core media image */
.team-profile-card:hover .tc-image-wrapper img {
    transform: scale(1.06);
}

/* =========================== Testimonial Section End ========================= */



/* =========================== Collaboration Section (Home Page) ========================= */
.collaboration-section {
    position: relative;
    width: 100%;
    /* height: 100vh; */
    min-height: 550px;
    overflow: hidden;
    background-color: #0d1117; /* Fallback baseline dark frame color */
}

/* BACKGROUND VIDEO LAYER ENGINE */
.collaboration-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Exact crop ratio balance without compression warping */
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* VISUAL MASK OVERLAY LAYER */
.collaboration-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(7, 23, 31, 0.56);
    /* opacity: 0.56; */
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 2;
}

/* Content Typography Weight Scales */
.collaboration-video-content {
    color: #ffffff;
}

.collaboration-subtitle {
    font-size: 16px;
    color: #ffffffd9;
    
}

.collaboration-title {
    color:#fff; 
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    justify-content: center;
    letter-spacing: -2.56px;
    line-height: lamp(2.5rem, 2rem + 2.2222vw, 4rem);
}

.collaboration-description {
    font-size: clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);
    line-height: clamp(1.4375rem, 1.2917rem + 0.6481vw, 1.875rem);
    color: rgba(255, 255, 255, 0.77);

}


/* Responsive Fluid Layout Breakpoints rules */
@media (max-width: 991px) {
    .collaboration-lets-talk-btn {
    padding: 7px 26px;
    font-size: 15px;

}
}

/* =========================== Collaboration Section End ========================= */

/* =========================== Collaboration Section 2 (About Us) ========================= */
.collaboration-2-section {
    position: relative;
    overflow: hidden;
}


/* Content Typography Weight Scales */
.collaboration-2-subtitle {
    font-size: 16px;
    color: #000000d9;
    
}

.collaboration-2-title {
    color:#000000; 
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    justify-content: center;
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}

.collaboration-2-description {
    font-size: clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);
    line-height: clamp(1.4375rem, 1.2917rem + 0.6481vw, 1.875rem);
    color: rgba(0, 0, 0, 0.77);
}


/* Responsive Fluid Layout Breakpoints rules */
@media (max-width: 991px) {
    .collaboration-2-lets-talk-btn {
    padding: 7px 26px;
    font-size: 15px;

}
}

/* =========================== Collaboration Section End ========================= */

/* =========================== Footer Section ========================= */

.footer-text, .footer-text a {
    color:#353535;
    font-size: clamp(0.5625rem, 0.5089rem + 0.2679vw, 0.75rem);
    letter-spacing: 3px;
    line-height: 20.4px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

/* =========================== Footer Section End ========================= */





/* ======================================================== About Page ========================================= */

.about-hero-section {
    width: 100%;
    height: 400px;  
    min-height: 400px;  
    max-height: 750px;
    padding-top: 80px; /* Solid Navbar gap offset */
}

@media (max-width: 991px) {
    /* .about-hero-section {
        height: 500px;
    } */
}

@media (max-width: 575px) {
    /* .about-hero-section {
        height: 420px;
    } */
}

/* BACKGROUND IMAGE SCALE ENGINE */
/* .about-hero-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
} */

.about-hero-section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Background seamlessly crops like a slider layer */
    object-position: center;
}

/* DARK PREMIUM CINEMATIC OVERLAY MASK */
.about-hero-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.65) 0%, rgba(10, 10, 10, 0.5) 100%); 
    z-index: 2;
}

/* FOREGROUND TYPOGRAPHY (Synced with Home Style Contrast) */
.about-hero-section-content {
    position: relative;
    z-index: 3;
}

.about-hero-section-content h1{
    font-size: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
    letter-spacing: -2.304px;
    /* line-height: 61px; */
    color: #ffffff;
}
.about-hero-section-content h6{
    font-size: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.125rem);
    letter-spacing: -0.512px;
    color: rgba(255, 255, 255, 0.56);
    line-height: 25px;
}



/*=========================================== Company Overview Section ==================================================*/
.company-overview-text {
    font-size: 17px !important;
    line-height: 28px; 
    text-align: justify; 
    color: #333333;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 🔥 FIXED HEADING STYLE: Heading ko crisp aur safe line-height dene ke liye */
.company-overview-text h1.dynamic-typewriter {
    font-size: 2.5rem; /* Screen size ke hisab se responsive space */
    line-height: 1.3 !important;
    color: #111111;
    margin-bottom: 20px !important; 
    letter-spacing: -2px;
}


/* Icons (Ticks) Alignment Fix */
.core-highlights .text-primary {
    font-weight: bold;
    font-size: 18px;
    color: #333cdd !important; /* Aapka theme purple/blue color */
}


/* Swiper Container Configuration */
.company-overview-img-slider {
    overflow: hidden;
    margin: 0; 
}

/* Individual Card Layout */
.company-overview-img-slider .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0px !important; 
    overflow: hidden;
    cursor: grab;
    box-shadow: -10px 10px 25px rgba(0,0,0,0.04);
}

.company-overview-img-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Custom Navigation Buttons */
.company-overview-img-slider-navigation {
    /* width: 100%; */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Default start, Bootstrap class isko manage karegi */
    /* gap: 16px; */
    /* margin-top: 12px; */
}

.company-overview-slider-prev,
.company-overview-slider-next {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

.company-overview-slider-prev svg,
.company-overview-slider-next svg {
    width: 28px;
    height: 28px;
    stroke: #111111; /* Text color se match karne ke liye color thoda dark kiya */
    stroke-width: 1.5; /* Line visual thodi behtar karne ke liye thick ki */
    fill: none;
}
/*=========================================== Company Overview Section End ==================================================*/


/*=========================================== Timeline Section ==================================================*/

.timeline {
    position: relative;
}

/* ── DESKTOP ONLY: Vertical center line ko media query mein wrap kar diya ── */
@media (min-width: 992px) {
    .timeline-container {
        position: relative;
    }
    
    .timeline-container::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #d0d0d0;
        transform: translateX(-50%);
        z-index: 0;
    }
}

/* ── Timeline item grid ── */
.timeline-item {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 0 24px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ── Image ── */
.tl-image {
    aspect-ratio: 4/3;
    border-radius: 4px;
    overflow: hidden;
}

.tl-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Dot ── */
.tl-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.tl-dot::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #111;
    border-radius: 50%;
    display: block;
    border: 2px solid #fff; 
}

/* ── Typography Styling ── */
.tl-content .tl-year {
    font-size: 15px;
    line-height: 26px;
    color: rgb(51, 34, 34);
}

.tl-content h3 {
    font-size: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
    line-height: 28px;
    color: rgb(10, 10, 10);
    /* letter-spacing: -1px; */
}

.tl-content p {
    font-size: 16px;
    line-height: 22px;
    color: rgb(51, 34, 34);
}

/* ── item-right: Order swapping logic for desktop ── */
@media (min-width: 992px) {
    .item-right .tl-image {
        order: 3;
    }
    .item-right .tl-dot {
        order: 2;
    }
    .item-right .tl-content {
        order: 1;
    }
}

/* ── Mobile Layout Fixes (Below 992px) ── */
@media (max-width: 991.98px) {
    .timeline-item {
        grid-template-columns: 1fr; /* Stack layout */
        gap: 16px;
    }

    /* Force clean alignment on mobile for every item */
    .tl-image {
        order: 1 !important;
        aspect-ratio: 16/10;
    }

    .tl-content {
        order: 2 !important;
        text-align: left !important; /* 🔥 Mobile par content left-align rahega taake read karna comfortable ho */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tl-dot {
        display: none !important; /* 🔥 Center line default grid break se completely hidden */
    }
}

/*============================= Timeline Section End ======================================*/
/* ================================================ About Page End ========================================= */


/* ======================================================== Contact Page ========================================= */

.contact-page .contact-page-hero-section {
    width: 100%;
    height: 400px;  
    min-height: 400px; 
    max-height: 650px;
}

@media (max-width: 991px) {
    /* .contact-page .contact-page-hero-section {
        height: 500px;
    } */
}

@media (max-width: 575px) {
    /* .contact-page .contact-page-hero-section {
        height: 420px;
    } */
}

.contact-page-hero-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.65) 0%, rgba(10, 10, 10, 0.5) 100%); 
    z-index: 2;
}

.contact-page .contact-page-hero-section-content h1{
    font-size: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
    letter-spacing: -2.304px;
    color: #ffffff;
}


.contact-page .contact-page-hero-section-content p{
    font-size: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.125rem);
    letter-spacing: -0.512px;
    color: rgba(255, 255, 255, 0.56);
    /* line-height: 25px; */
}



.contact-page .contact-page-hero-section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}


.contact-page .lets-talk-content h1{
    font-size: clamp(1.75rem, 1.2143rem + 2.6786vw, 3.625rem);
    color: rgb(10, 10, 10);
    /* letter-spacing: -2.56px; */
}

.contact-page .lets-talk-content h2{
    font-size: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
    /* line-height: 23.1px; */
}

.contact-page .follow-us h4{
    font-size: 28px;
    /* line-height: 28px; */
    letter-spacing: -1.56px;
}
/* .contact-page .follow-us p{
    font-size: 20px;
    line-height: 20px;
} */

.contact-page .follow-us p{
    font-size: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
    line-height: 23.1px;
}

/* Div wrapper ko simple rakhein */
.contact-page .book-a-consultation {
    display: inline-block;
    margin-top: 24px; /* mt-4 ki jagah fix spacing */
}

/* Asli styling Anchor Tag (<a>) par lagayein */
.contact-page .book-a-consultation a {
    background-color: #000000; 
    color: rgb(255, 252, 252) !important;
    font-size: 17px;
    padding: 12px 28px; /* Sahi button sizing padding */
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    border: none !important;
    outline: none !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* SVG Arrow ke liye agar andar icon hai */
.contact-page .book-a-consultation a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Hover Effect - Jab pure button par hover ho */
.contact-page .book-a-consultation a:hover {
    background-color: #333cdd; /* Aapka blue hover color */
    color: #ffffff !important;
}



.contact-page .lets-talk-section-form input,
.contact-page .lets-talk-section-form textarea {
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    padding: 10px 0;
    font-size: 16px;
}

.contact-page .lets-talk-section-form textarea {
    height: 220px;
    resize: none;
}

.contact-page .lets-talk-section-form button {
    background: #000;
    color: #fff;
    border: none;
    font-size: 16px;
}
.contact-page .lets-talk-section-form button:hover {
    background: #333cdd;;
    color: #fff;
}

.contact-page .lets-talk-icons a {
    color: #000;
}

@media (max-width: 575px) {
    .contact-page .lets-talk-section-form textarea {
        height: 160px;
    }
}


/* =========================== Contact Page Work Section ========================= */

.contact-page .work-section {
    background: #f7f7f7;
}

/* Fluid typography settings */
.contact-page .work-card h2 {
    font-size: clamp(1.2rem, 3.5vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -1.56px;
    color: #111111;
}

/* ── Image Component Layer ── */
.contact-page .work-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.book-a-consultation a {
    background-color: #FFFFFF; /* Base standard white background */
    color: #000000 !important; /* Bold solid black text */
    border: 1px solid #000000 !important; /* Clean outer structural boundary border */
    font-size: 17px;
    padding: 15px 52px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 34px;
    border-radius: 4px; /* Matches the sleek rectangular flow shape */
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* 🎯 Interactive Hover State Logic Engine */
.book-a-consultation a:hover {
    background-color: #333cdd; /* Shift background color frame to accent blue */
    color: #FFFFFF !important; /* Invert text cleanly to fully white contrast */
    border-color: #333cdd !important; /* Matches background border layout seamlessly */
}

/* 📱 MOBILE RESPONSIVE LAYOUT SAFEGUARDS */
@media (max-width: 991.98px) {
    .contact-page .work-text-col {
        text-align: left !important;
    }

    .contact-page .work-text-col h2 {
        font-size: clamp(1.8rem, 5vw, 2.4rem);
        line-height: 1.2;
        margin-bottom: 20px !important;
    }

    .contact-page .work-text-col p {
        font-size: 16px !important;
        line-height: 1.6;
        margin-bottom: 24px !important;
    }
}

/* =========================== Contact Us Page Section Collaboration Section ========================= */

.contact-page .contact-page-collaboration-section {
    position: relative;
    width: 100%;
    min-height: 550px;
    padding: 80px 0;
    overflow: hidden;
    background-color: #0d1117; /* Fallback frame color code */
    
    /* 🔥 CORE PARALLAX STRUCTURAL LAYER ENGINE */
    /* background-attachment: fixed; */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* VISUAL MASK OVERLAY LAYER */
.contact-page .collaboration-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 23, 31, 0.65); /* Increased contrast tracking for high text visibility */
    z-index: 2;
}

/* Content Wrapper Index Reset */
.contact-page-collaboration-content {
    position: relative;
    color: #ffffff;
    z-index: 3; /* Places text cleanly safely above dark transparent layer masking */
}

.contact-page-collaboration-subtitle{
    font-size: 16px;
}

/* Typography Scales and Line Heights matching your clamp configurations */
.contact-page-collaboration-title {
    color: #ffffff ; 
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.8rem, 2.2rem + 2.5vw, 4.2rem); /* Dynamic fluid line-height fallback */
}

.contact-page-collaboration-description, .contact-page-collaboration-content p {
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.77);
}

/* Button structural wrapper padding corrections */
.contact-page-collaboration-lets-talk-btn {
    background-color: transparent; 
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    font-size: 17px;
    padding: 7px 28px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 34px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-page-collaboration-lets-talk-btn a {
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.contact-page-collaboration-lets-talk-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.contact-page-collaboration-lets-talk-btn:hover a {
    color: #111111 !important;
}

.contact-page-collaboration-lets-talk-btn a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.contact-page-collaboration-lets-talk-btn:hover a svg {
    transform: translate(3px); 
}


.contact-page-collaboration-panel-phone span,
.contact-page-collaboration-panel-email span,
.contact-page-collaboration-panel-direction span {
    font-size: 16px;
    color: white;
}

/* Yahan pane ko badal kar panel kiya gaya hai aur anchor color ko optimize kiya hai */
.contact-page-collaboration-panel-phone h4 a {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.69) !important; /* !important lagaya taake Bootstrap overrides na kare */
}

/* Yahan bhi pane ko badal kar panel kiya gaya hai */
.contact-page-collaboration-panel-email h4 a {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.69) !important;
}

.contact-page-collaboration-panel-direction p {
    font-size: 15px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.54);
}



/* ===================================== Contact Us Page Section End  ===================================== */

/* ======================================================== Agentic Page Start ========================================= */
.agentic-hero-section {
    width: 100%;
    height: 400px;  
    min-height: 400px; 
    max-height: 750px;
    padding-top: 80px; /* Solid Navbar gap offset */
}

@media (max-width: 991px) {
    /* .agentic-hero-section {
        height: 500px;
    } */
}

@media (max-width: 575px) {
    /* .agentic-hero-section {
        height: 420px;
    } */
}

/* BACKGROUND IMAGE SCALE ENGINE */
/* .about-hero-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
} */

.agentic-hero-section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Background seamlessly crops like a slider layer */
    object-position: center;
}

/* DARK PREMIUM CINEMATIC OVERLAY MASK */
.agentic-hero-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.65) 0%, rgba(10, 10, 10, 0.5) 100%); 
    z-index: 2;
}

/* FOREGROUND TYPOGRAPHY (Synced with Home Style Contrast) */
.agentic-hero-section-content {
    position: relative;
    z-index: 3;
}

.agentic-hero-section-content h1{
    font-size: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
    letter-spacing: -2.304px;
    /* line-height: 85px; */
    color: #ffffff;
}
.agentic-hero-section-content h6{
    font-size: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.125rem);
    letter-spacing: -0.512px;
    color: rgba(255, 255, 255, 0.56);
    /* line-height: 25px; */
}

/*=========================================== Agentic Hero Section ==================================================*/ 

.agentic-overview-text {
    font-size: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
    line-height: 28.9px; 
    text-align: justify; 
    color: black;
}

@media (max-width: 992px) {
    .agentic-overview-text{
        text-align: start;
    }
}



.agentic-overview-text ul li {
    font-size: 15px !important;
    line-height: 28.9px; 
    text-align: justify; 
    color: black;
}

/*============================== Agentic Hero Section End ======================================*/  

/* =========================== Agentic AI Accordion Showcase Section ========================= */

.agentic-ai-accordion .accordion-button::after {
    display: none !important;
}

/* Base accordion heading */
.agentic-ai-accordion .accordion-button {
    font-size: clamp(1.25rem, 1.2143rem + 0.1786vw, 1.375rem);
    border: none;
    transition: color 0.3s ease;
}

.agentic-ai-accordion .accordion-body {
    font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    line-height: 28px;
    letter-spacing: 0.1px;
    color: rgba(0, 0, 0, 0.73);
}

.agentic-ai-accordion-icon-box {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Horizontal Line (Visible in both + and -) */
.agentic-ai-accordion-icon-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111111;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.agentic-ai-accordion .accordion-button:not(.collapsed) {
    color: #111111 !important; 
    background-color: transparent !important; 
    box-shadow: none !important; 
}

.agentic-ai-accordion .accordion-button:not(.collapsed) .agentic-ai-accordion-icon-box::before,
.agentic-ai-accordion .accordion-button:not(.collapsed) .agentic-ai-accordion-icon-box::after {
    background-color: #111111 !important; 
}

.agentic-ai-accordion-icon-box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #111111;
    transform: translateX(-50%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.agentic-ai-accordion-button:not(.collapsed) .agentic-ai-accordion-icon-box::before {
    transform: translateY(-50%) rotate(180deg); 
}

.agentic-ai-accordion-button:not(.collapsed) .agentic-ai-accordion-icon-box::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}
/* =========================== Agentic AI Accordion Showcase Section End ========================= */

/* =========================== Consulting Process Overview Section ========================= */
.implementation-process-overview {
    color: black;
    background-color: rgb(247, 247, 247);
}

.implementation-process-overview h3{
    font-size: 16px;
    line-height: 16px;
    color: #0A0A0A;
    text-transform: uppercase;
}

.implementation-process-overview h1{
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}


.implementation-process-overview p{
    display: block;
    font-size: 17px;
    line-height: 23.8px;
}


.implementation-process-overview .process-section {
    position: relative;
}

.implementation-process-overview .process-item {
    position: relative;
    text-align: center;
}

.implementation-process-overview .process-item h4{
    color:#0a0a0a;
    font-size: 18px;
    line-height: 24px;
}
.implementation-process-overview .process-item ul{
    color:#717780;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}

/* Base Node Circle Grid */
.implementation-process-overview .circle-node-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border: 2px solid #868686;
    border-radius: 50%;
}

/* Step Badge Context Upper Border Corner */
.implementation-process-overview.step-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #000000;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
}


@media (min-width: 992px) {
    .implementation-process-overview .process-item::after {
        content: "";
        position: absolute;
        top: 65px; 
        left: calc(50% + 60px); 
        width: calc(100% + 30px - 150px);

        height: 2px;
        background-color: #868686;
        z-index: 1;
    }

    .implementation-process-overview .process-item:last-child::after {
        display: none !important;
    }
}
/* =========================== Consulting Process Overview Section End ========================= */


/* =========================== FAQ Section ========================= */
.faq-section h1{
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}


.faq-accordion .accordion-button::after {
    display: none !important;
}

/* Base accordion heading */
.faq-accordion .accordion-button {
    font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);;
    border: none;
    transition: color 0.3s ease;
}

.faq-accordion .accordion-body {
    font-size: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
    line-height: 28px;
    letter-spacing: 0.1px;
    color: rgba(0, 0, 0, 0.73);
}

.faq-accordion-icon-box {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Horizontal Line (Visible in both + and -) */
.faq-accordion-icon-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111111;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: #111111 !important; 
    background-color: transparent !important; 
    box-shadow: none !important; 
}

.faq-accordion .accordion-button:not(.collapsed) .faq-accordion-icon-box::before,
.faq-accordion .accordion-button:not(.collapsed) .faq-accordion-icon-box::after {
    background-color: #111111 !important; 
}

.faq-accordion-icon-box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #111111;
    transform: translateX(-50%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.faq-accordion-button:not(.collapsed) .faq-accordion-icon-box::before {
    transform: translateY(-50%) rotate(180deg); 
}

.faq-accordion-button:not(.collapsed) .faq-accordion-icon-box::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* =========================== FAQ Section End ========================= */

/* =========================== Agentic AI Services Section ========================= */
.agentic-ai-services-section {
    color: #000000;
    background-color: rgb(247, 247, 247);
}

/* .agentic-ai-services-intro h3 {
    font-size: 18px;
    line-height: 1.2;
} */

.agentic-ai-services-intro h1 {
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}

/* Core Card Grid Configuration */
.agentic-ai-services-card h2 {
    font-size: 28px !important;
    color: #0a0a0a !important;
    line-height: 36.4px;
}

/* List Item Line Spacing Architecture */
.agentic-ai-services-list li {
    
    margin-bottom: 16px; 
    /* line-height: 2px; */
    color: rgba(0, 0, 0, 0.8);
}



/* =========================== Agentic AI Services Section End========================= */
/* ======================================================== Agentic AI Page End ========================================= */


/* ======================================================== Industries Page ========================================= */
/* ===================================== Entry Title ===================================== */
.industries-page .entry-title h1{
    font-size: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
}

.industries-page .entry-title p{
    font-size: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.125rem);
}
/* ===================================== Entry Title End ===================================== */

/* ===================================== Content Split Card Section  ===================================== */

.industries-page .content-split-card-wrapper {
    background: transparent; 
}

.industries-page .content-split-card-title a {
    font-size: clamp(22px, 2.2vw, 28px); 
    line-height: 1.25;
    color: rgb(17, 17, 17);
    transition: color 0.3s ease;
}

.industries-page .content-split-card-subtitle {
    font-size: 16px;
    line-height: 1.6; 
    color: rgba(0, 0, 0, 0.75); 
}


.industries-page .content-split-card-list li {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 14px; 
}


/* ===================================== Content Split Card Section End ===================================== */
/* =========================== Collaboration Section 2  ========================= */
.industries-main-page .collaboration-2-section {
    position: relative;
    overflow: hidden;
}

.industries-main-page .collaboration-2-subtitle {
    font-size: 16px;
    color: #000000d9;
    
}

.industries-main-page .collaboration-2-title {
    color:#000000; 
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    justify-content: center;
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}

.industries-main-page .collaboration-2-description {
    font-size: clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);
    line-height: clamp(1.4375rem, 1.2917rem + 0.6481vw, 1.875rem);
    color: rgba(0, 0, 0, 0.77);

}

@media (max-width: 991px) {
    .industries-main-page .collaboration-2-lets-talk-btn {
    padding: 7px 26px;
    font-size: 15px;

}
}

/* =========================== Collaboration Section End ========================= */

/* =========== Content Split Card 2 Section End ================= */
/* ===================================== Industries Page End  ===================================== */

/* ===================================== Industries Inner Page Section  ===================================== */
/* Manufacturing 
Public Sector
Retail and Ecommerce
About Media and Entertainment
Energy Sector 
Life Sciences Solutions */

/* ====================== Hero Section ===================================  */
.industries-inner-page-hero-section {
    width: 100%;
    height: 400px;  
    min-height: 400px;  
    max-height: 650px;
}

@media (max-width: 991px) {
    /* .industries-inner-page-hero-section {
        height: 500px;
    } */
}

@media (max-width: 575px) {
    /* .industries-inner-page-hero-section {
        height: 420px;
    } */
}

.industries-inner-page-hero-section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}


/* ======================= Inner Entry Section ==================== */

.inner-page-entry-section h1 {
    font-size: clamp(2.375rem, 1.9821rem + 1.9643vw, 3.75rem);
    letter-spacing: -2.56px;
    color: #0a0a0a;
    /* display: inline-flex; */
}

.inner-page-entry-section p {
    font-size: clamp(0.9375rem, 0.8839rem + 0.2679vw, 1.125rem);
    /* line-height: 21px; */
    color: #555555; 
    /* margin-top: 15px;  */
}

/* ============= Parrallex Image Section =================== */
.parallax-image-section {
    
    background-attachment: fixed; 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
    
    height: 50vh; 
    position: relative;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .parallax-image-section {
        background-attachment: scroll; 
        height: 50vh; 
    }
}

/* ============= Parrallex Image Section End =================== */
/* ====================== Custom Tabs Navigation System ======== */

.tabs-info-section{
    background-color: rgb(247, 247, 247);
}

.custom-tabs-nav .nav-link {
    background: transparent !important;
    border: none !important;
    font-size: clamp(0.9375rem, 0.8482rem + 0.4464vw, 1.25rem);
    color: #8C8C8C;
    border-bottom: 2px solid transparent !important; 
    border-radius: 0 !important;
    position: relative; 
    transition: color 0.3s ease;
}

.custom-tabs-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px; 
    bottom: -3px; 
    left: 0;
    background-color: #111111; 
    transform: scaleX(0); 
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 🔥 Hover Entry Control Switch */
.custom-tabs-nav .nav-link:hover {
    color: rgb(0, 0, 0) !important;
}

.custom-tabs-nav .nav-link:hover::after {
    transform: scaleX(1); /* Expand line smoothly on hover */
    transform-origin: bottom left;
}

/* 2. Active Tab State Layer Styling */
.custom-tabs-nav .nav-link.active {
    color: rgb(0, 0, 0) !important; /* Active text color */
    border-bottom-color: rgb(0, 0, 0) !important; /* Keeps the line solid for active tab */
}

/* Don't show hover animation on the already active tab */
.custom-tabs-nav .nav-link.active::after {
    display: none;
}

/* 3. Description Dynamic Display Content styling */
.tab-content p {
    font-size: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
    /* line-height: 27px; */
    color: rgba(0, 0, 0);
    max-width: 95%; /* Responsive edge padding */
    margin-top: 20px;
}

.tab-content ul li{
    font-size: clamp(0.875rem, 0.8214rem + 0.2679vw, 1.0625rem);
    /* line-height: 1.6; */
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
}
/* ====================== Custom Tabs Navigation System End ======== */

/* ====================== Case Studies ======== */
.case-studies-card-section {
    color: #000000;
    background-color: rgb(247, 247, 247);
}

.case-studies-card h5{
    color:#0a0a0a;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.case-studies-card h2 {
    font-size: 28px !important;
    color: #0a0a0a !important;
    line-height: 36.4px;
}

.case-studies-card p {
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.68) !important;
}

/* List Item Line Spacing Architecture */
.case-studies-card-list li {
    color: rgba(0, 0, 0, 0.8);
}

/* ====================== Case Studies End ======== */

/* =========================== Collaboration Section 2 ========================= */
.industries-inner-page .collaboration-2-lets-talk-btn {
    background-color: #FFFFFF; 
    color: #000000 !important;
    border: 1px solid #000000 !important; 
    font-size: 17px;
    /* padding: 15px 52px; */
    cursor: pointer;
    white-space: nowrap;
    line-height: 34px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.industries-inner-page .collaboration-2-lets-talk-btn a {
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.industries-inner-page .collaboration-2-lets-talk-btn a svg {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.industries-inner-page .collaboration-2-lets-talk-btn:hover {
    background-color: #333cdd; 
    color: #FFFFFF !important;
    border-color: #333cdd !important;
}


.industries-inner-page .collaboration-2-lets-talk-btn:hover a svg {
    transform: translate(3px); 
}

.industries-inner-page .collaboration-2-section {
    position: relative;
    overflow: hidden;
}


/* Content Typography Weight Scales */
.industries-inner-page .collaboration-2-subtitle {
    font-size: 16px;
    color: #000000d9;
    
}

.industries-inner-page .collaboration-2-title {
    color:#000000; 
    font-size: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
    justify-content: center;
    letter-spacing: -2.56px;
    line-height: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
}

.industries-inner-page .collaboration-2-description {
    font-size: clamp(0.9375rem, 0.8482rem + 0.4464vw, 1.25rem);
    /* line-height: clamp(1.4375rem, 1.2917rem + 0.6481vw, 1.875rem); */
    color: rgba(0, 0, 0, 0.77);

}


/* Responsive Fluid Layout Breakpoints rules */
@media (max-width: 991px) {
    .industries-inner-page .collaboration-2-lets-talk-btn {
    padding: 7px 26px;
    font-size: 15px;

}
}

/* =========================== Collaboration Section End ========================= */
/* ===================================== Industries Inner Page  End  ===================================== */


/* ===================================== Services Page  ===================================== */

.services-hero-section {
    width: 100%;
    height: 400px;  
    min-height: 400px; 
    max-height: 750px;
    padding-top: 80px; /* Solid Navbar gap offset */
}

@media (max-width: 991px) {
    /* .services-hero-section {
        height: 500px;
    } */
}

@media (max-width: 575px) {
    /* .services-hero-section {
        height: 420px;
    } */
}

.services-hero-section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}


.services-hero-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.65) 0%, rgba(10, 10, 10, 0.5) 100%); 
    z-index: 2;
}

.service-hero-section-content {
    position: relative;
    z-index: 3;
}

.service-hero-section-content h1{
    font-size: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
    letter-spacing: -2.304px;
    /* line-height: 61px; */
    color: #ffffff;
}
.service-hero-section-content p{
    font-size: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.125rem);
    letter-spacing: -0.512px;
    color: rgba(255, 255, 255, 0.56);
    /* line-height: 25px; */
}


/* * ===================================== Entry Title ===================================== */ 
/* .services-page-entry-title h1{
    font-size: clamp(3.125rem, 2.875rem + 1.25vw, 4rem);
    letter-spacing: -2.56px;
    line-height: clamp(3.125rem, 2.875rem + 1.25vw, 4rem);
}
.services-page-entry-title p{
    font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
} */
/* ===================================== Entry Title End ===================================== */

/* =========================== Our Services Card ===================================== */

.our-services-section {
    color: #000000;
    /* background-color: rgb(247, 247, 247); */
}


.our-services-card h2 {
    font-size: 28px !important;
    color: #0a0a0a !important;
    line-height: 36.4px;
}

.our-services-card p {
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.68) !important;
}

/* List Item Line Spacing Architecture */
.our-services-list li {
    color: rgba(0, 0, 0, 0.8);
}
/* ========================== Our Services Card End ========================== */

/* ========================== Service Compliance Section ========================== */
.services-compliance-section{
    background-color: rgb(247, 247, 247);
}

.services-compliance-note h3{
    font-size: 40px;
    letter-spacing: -2.56px;
    color: rgba(0, 0, 0);
    /* background-color: rgb(247, 247, 247); */

    /* line-height: clamp(3.125rem, 2.875rem + 1.25vw, 4rem); */
}
/* ========================== Service Compliance Section End ========================== */

/* ===================================== Services Page End =============================================*/


/* ======================================= AI Applications Page  =============================================*/

/* ===================== Hero Section ===============================*/
.ai-application-hero-section {
    width: 100%;
    height: 540px;   
    min-height: 500px; 
    max-height: 750px;
    padding-top: 80px; /* Solid Navbar gap offset */
}

@media (max-width: 991px) {
    /* .ai-application-hero-section {
        height: 500px;
    } */
}

@media (max-width: 575px) {
    /* .ai-application-hero-section {
        height: 420px;
    } */
}

.ai-application-hero-section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}


.ai-application-hero-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.65) 0%, rgba(10, 10, 10, 0.5) 100%); 
    z-index: 2;
}

.ai-application-hero-section-content {
    position: relative;
    z-index: 3;
}

.ai-application-hero-section-content h1{
    font-size: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem);
    letter-spacing: -2.304px;
    /* line-height: 61px; */
    color: #ffffff;
}
.ai-application-hero-section-content p{
    font-size: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.125rem);
    letter-spacing: -0.512px;
    color: rgba(255, 255, 255, 0.56);
    /* line-height: 25px; */
}

 /* ========================== AI Applications Card Section ========================== */ 
 .ai-application-card-section {
    color: #000000;
    background-color: rgb(247, 247, 247);
}


.ai-application-card h2 {
    font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem) !important;
    color: #0a0a0a !important;
    /* line-height: 36.4px; */
}

.ai-application-card p {
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.68) !important;
}

/* List Item Line Spacing Architecture */
.ai-application-card li {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px !important;
}

 /* ========================== AI Applications Card Section End ========================== */