:root {

    /* ===== BRAND CORE (Refined Premium Version) ===== */

    --primary-blue: #1E4ED8;      /* Deep Rich Blue */
    --royal-blue: #2563EB;        /* Brighter brand blue */
    --accent-teal: #14B8A6;       /* Premium teal (less neon) */
    --fresh-green: #22C55E;       /* Clean modern green */
    --lime-green: #84CC16;        /* Soft highlight green */

    /* ===== DARK PREMIUM BACKGROUNDS ===== */

    --dark-navy: #0A0F1F;         /* Elegant navy */
    --dark-blue: #0F1C3F;         /* Section dark blue */
    --deep-black: #050814;        /* Premium black */
    --soft-black: #0C1224;        /* Soft dark bg */

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

    --text-main: #0F172A;
    --text-gray: #64748B;
    --white: #FFFFFF;
    --black: #000000;

    /* ===== UI HELPERS ===== */

    --secondary-color: var(--fresh-green);
    --darkGreen-color: #16A34A;
    --brand-blue: var(--primary-blue);
    --brand-teal: var(--accent-teal);
    --teal-accent: var(--accent-teal);
    --icon-color: var(--primary-blue);
    --icon-bg: #ECFEFF;
    --card-border: #E2E8F0;
    --footer-dark: var(--deep-black);

    /* ===== RGB for Effects ===== */

    --secondary-rgb: 34, 197, 94;

    /* ===== PREMIUM GRADIENTS ===== */

    --gradients-linear: linear-gradient(
        135deg,
        #1E4ED8 0%,
        #14B8A6 55%,
        #22C55E 100%
    );

    --hero-gradient: linear-gradient(
        135deg,
        #050814 0%,
        #1E4ED8 45%,
        #14B8A6 100%
    );

    --dark-gradient: linear-gradient(
        135deg,
        #050814 0%,
        #0A0F1F 100%
    );

    --gradients-linear: linear-gradient(135deg, #1E4ED8 0%, #14B8A6 55%, #22C55E 100%);

    --gradients-linear-light: linear-gradient(
        135deg,
        rgba(30, 78, 216, 0.08) 0%,
        rgba(20, 184, 166, 0.08) 55%,
        rgba(34, 197, 94, 0.08) 100%
    );

}

html, body {
    max-width: 100%;
    overflow-x: hidden !important; /* Ye page ko left-right hilne nahi dega */
}

/* ===================================
   GLOBAL BUTTON RESET
=================================== */

a {
    color: #fff;
    text-decoration: none;
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}

.custom-btn,
.btn-outline-to-fill,
.btn-fill-to-outline,
.common_btn_fill,
.black_btn,
.main_btn,
.btn-case,
.btn-hire-primary,
.learn-more-btn,
.btn-primary,
.btn-secondary {

    border-radius: 50px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.35s ease !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid transparent !important;
}


/* ===================================
   PRIMARY BUTTON (BLACK)
=================================== */

.btn-primary,
.custom-btn,
.common_btn_fill,
.btn-fill-to-outline,
.btn-hire-primary,
.btn-case,
.black_btn {

    background: #000000 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.custom-btn:hover,
.common_btn_fill:hover,
.btn-fill-to-outline:hover,
.btn-hire-primary:hover,
.btn-case:hover,
.black_btn:hover {

    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    transform: translateY(-3px) !important;
}


/* ===================================
   SECONDARY BUTTON (WHITE)
=================================== */

.btn-secondary,
.btn-outline-to-fill,
.main_btn,
.learn-more-btn {

    background: #000000 !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-outline-to-fill:hover,
.main_btn:hover,
.learn-more-btn:hover {

    background: #ffffff !important;
    color: #0a192f !important;
    border: 2px solid #ffffff !important;
    transform: translateY(-3px) !important;
}


/* ===================================
   REMOVE OLD EFFECTS
=================================== */

.custom-btn::before,
.btn-outline-to-fill::before,
.btn-fill-to-outline::before,
.common_btn_fill::after,
.main_btn::before {
    display: none !important;
}


   body {
       font-family: 'Inter', sans-serif;
       background: #ffffff;
       color: #1a1a1a;
       overflow-x: hidden;
   }


   /* ============================= */
/* LOGO INTRO OVERLAY START */
/* ============================= */

#intro-overlay {
    position: fixed;
    inset: 0; /* top:0 left:0 right:0 bottom:0 */
    width: 100%;
    height: 100vh;
    background: var(--gradients-linear);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.8s ease-in-out;
}

/* Logo Wrapper */
.logo_intro {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Logo Image */
.logo_intro img {
    width: 250px;
    max-width: 90%;
    height: auto;
    opacity: 0;
    transform: scale(0.6);
    animation: logoReveal 1.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

/* Logo Animation */
@keyframes logoReveal {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade Out Effect */
.fade-out-overlay {
    opacity: 0;
    pointer-events: none;
}

/* ============================= */
/* Tablet Devices */
/* ============================= */

@media (max-width: 992px) {
    .logo_intro img {
        width: 200px;
        /*margin-right: 80px;*/
    }
}

/* ============================= */
/* Mobile Devices */
/* ============================= */

@media (max-width: 768px) {

    #intro-overlay {
        padding: 20px;
    }

    .logo_intro img {
        width: 160px;
        animation-duration: 1.2s;
        /*margin-right: 80px;*/
    }
}

/* ============================= */
/* Small Mobile Devices */
/* ============================= */

@media (max-width: 480px) {
    .logo_intro img {
        width: 160px;
        /*margin-right: 80px;*/
    }
}

/* Extra Small Devices */
@media (max-width: 360px) {
    .logo_intro img {
        width: 160px;
        margin-right: 80px;
    }
}

/* ============================= */
/* LOGO INTRO OVERLAY END */
/* ============================= */



   /* hero section css start */

   .hero-wrapper {
      background: var(--gradients-linear);
       color: white;
       padding-bottom: 80px;
       min-height: 100vh;
   }

   .dark-section,
.Appriffy_Advantage_sec,
.industries_sec,
.bot_methodology_sec {
    background: var(--dark-gradient);
}



   .hero-title {
       font-size: 3.5rem;
       font-weight: 800;
       line-height: 1.2;
   }

   .hero-content {
       padding: 60px 0;
       text-align: left;
   }

   .badge-launch {
       background: rgba(255, 255, 255, 0.15);
       padding: 8px 18px;
       border-radius: 50px;
       font-size:
           0.85rem;
       margin-bottom: 25px;
       display: inline-block;
   }



   /* hero section css end */


   /* common btn css start  */

   /* Common Button Styles */

.custom-btn {
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 70px;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-transform: uppercase;
    border: 2px solid var(--accent-teal);
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

   .btn-outline-to-fill {
       background: transparent;
       color: var(--brand-teal);
   }

   .btn-outline-to-fill::before {
       content: "";
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: var(--darkGreen-color);
       transition: all 0.4s ease;
       z-index: -1;
   }

   .btn-outline-to-fill:hover {
       color: #fff;
   }

   .btn-outline-to-fill:hover::before {
       left: 0;
   }


   .btn-fill-to-outline {
       background: var(--brand-teal);
       color: #fff;
       text-decoration: none;
   }

   .btn-fill-to-outline::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #fff;
       transition: all 0.4s ease;
       z-index: -1;
       transform: scaleX(0);
       transform-origin: right;
   }

   .btn-fill-to-outline:hover {
       color: var(--black);
   }

   .btn-fill-to-outline:hover::before {
       transform: scaleX(1);
       transform-origin: left;
   }


   .custom-btn:hover {
       box-shadow: 0 8px 15px rgba(77, 232, 209, 0.3);
       transform: translateY(-2px);
   }

   .common_btn_fill {
       position: relative;
       padding: 14px 40px;
       font-size: 17px;
       font-weight: 700;
       color: #fff;
       background: transparent;
       border: 2px solid var(--primary-blue);
       border-radius: 102px;
       cursor: pointer;
       overflow: hidden;
       transition: color 0.4s ease;
       z-index: 1;
       text-transform: uppercase;
       letter-spacing: 1px;
       text-decoration: none;
   }

   .common_btn_fill::after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--primary-blue);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: -1;
   }

   .common_btn_fill:hover {

       color: var(--white);
       border: 2px solid var(--white);
       box-shadow: 0 10px 20px rgba(0, 119, 182, 0.1);
   }

   .common_btn_fill:hover::after {

       height: 0;
   }

   .common_btn_fill:active {
       transform: scale(0.96);
   }

   /* common btn css end  */

   /* header css start  */

   .header_sec .common_btn_fill {
       font-size: 15px;
       font-weight: 500;
       text-transform: capitalize;
       padding: 10px 15px;

   }

   .header_sec .navbar-brand img {
       width: 200px;
       max-width: 100%;
   }

   .header_sec #main-nav {
       opacity: 0;
       padding: 20px 0;
       transition: opacity 0.5s;
   }

   .header_sec .nav-link {
       color: rgba(255, 255, 255, 0.85) !important;
       font-weight: 600;
       margin: 0 10px;
   }

   .header_sec .nav-link:hover {
       color: var(--primary-blue) !important;
   }


   /* header css end  */


   /* strips slider css start */


   .marquee-container {
       background: var(--dark-navy);
       padding: 18px 0;
       overflow: hidden;
       white-space: nowrap;
   }

   .marquee-content {
       display: inline-block;
       animation: scroll-left 35s linear infinite;
   }

   .marquee-item {
       color: white;
       font-weight: 700;
       margin-right: 50px;
       text-transform: uppercase;
       font-size: 0.85rem;
   }

   .dot {
       height: 7px;
       width: 7px;
       background: var(--accent-teal);
       border-radius: 50%;
       display: inline-block;
       margin-right: 12px;
   }

   @keyframes scroll-left {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }


   /* strips slider css end */


   .main_title {
       margin-bottom: 40px;
   }


   .main_title h2 {
       font-size: 40px;
       font-weight: 800;
       color: var(--gradients-linear);
   }

   .main_title p {
       font-size: 16px;
       font-weight: 400;
   }

   .white_title {
       margin-bottom: 30px;
   }

   .white_title p {
       font-size: 16px;
       font-weight: 400;
       color: var(--white);
   }

   .white_title h2 {
       font-size: 40px;
       font-weight: 800;
       color: var(--white);
   }

   .section-padding {
       padding: 80px 0;
   }

   .card-feature {
       background: #fff;
       border: none;
       border-radius: 20px;
       padding: 40px 30px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
       height: 100%;
       transition: 0.4s;
   }

   .card-feature .bridge_icon {
       background: hsl(186deg 69% 49% / 10%);
       width: fit-content;
       margin: auto;
       padding: 15px;
       width: 60px;
       /* font-size: 21px; */
       height: 55px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: 0.5s;
       margin-bottom: 15px;
   }

   .card-feature:hover .bridge_icon {
       background: var(--accent-teal);

   }

   .card-feature h5 {
       font-size: 25px;
       font-weight: 600;
   }

   .card-feature:hover {
       transform: translateY(-12px);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
   }

   .icon-sq {
       width: 100px ;
       height: 50px;
       background:
           #eaffff;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.4rem;
       margin-bottom: 25px;
   }


   .check-circ {
       color: var(--accent-teal);
       border: 2px solid var(--accent-teal);
       border-radius: 50%;
       width: 22px;
       height: 22px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       margin-right: 15px;
       font-size: 0.7rem;
       flex-shrink: 0;
   }

   .img-stack {
       position: relative;
       padding: 20px;
   }

   .img-stack img {
       width: 100%;
       border-radius: 20px;
   }

   .img-main {
       width: 100%;
       border-radius: 25px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   }

   .stat-badge {
       position: absolute;
       bottom: 0;
       left: 0;
       background: white;
       padding: 20px 30px;
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       z-index: 2;
   }


   .dark-section {
       background: var(--dark-navy);
       color: white;
       padding: 80px 0;
   }

   .capability-card {
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 15px;
       padding: 30px;
       height: 100%;
       transition: 0.3s;
   }

   .capability-card:hover {
       background: rgba(255, 255, 255, 0.07);
       border-color: var(--gradients-linear);
   }


   @media (max-width: 991px) {
       .hero-title {
           font-size: 2.5rem;
       }

       .navbar-collapse {
           background: var(--primary-blue);
           padding: 20px;
           border-radius: 15px;
           margin-top: 15px;
       }

       .stat-badge {
           position: relative;
           left: 0;
           top: 10px;
           display: inline-block;
           margin-top: 20px;
       }

       .hero-content {
           text-align: center;
       }

       .hero-content p {
           margin: 0 auto;
       }
   }

   @media (max-width: 576px) {
       .hero-title {
           font-size: 2rem;
       }

       .section-padding {
           padding: 50px 0;
       }

       .btn-lg {
           width: 100%;
           margin-bottom: 10px;
       }
   }




   .section-tag {
       color: var(--accent-teal);
       font-weight: 500;
       letter-spacing: 2px;
       text-transform: uppercase;
       font-size: 0.85rem;
   }

   .section-title {
       font-weight: 800;
       color: var(--gradients-linear);
       font-size: 2.5rem;
   }

   .gcc_service_sec .framework-container {
       position: relative;
       background: var(--gradients-linear);
       border-radius: 100px;
       padding: 40px 20px;
       margin-top: 80px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   }

   /* Connecting Line */
   .gcc_service_sec .framework-container::after {
       content: '';
       position: absolute;
       bottom: -30px;
       left: 10%;
       right: 10%;
       height: 2px;
       background: rgba(0, 0, 0, 0.1);
       z-index: -1;
   }

   .gcc_service_sec .step-card {
       text-align: center;
       color: white;
       position: relative;
       padding: 10px;
   }

   .gcc_service_sec .icon-wrapper {
       width: 80px;
       height: 80px;
       background: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: -80px auto 20px;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
       position: relative;
       border: 4px solid #fff;
       transition: transform 0.3s ease;
   }

   .gcc_service_sec .icon-wrapper:hover {
       transform: translateY(-5px);
   }

   .gcc_service_sec .icon-wrapper i {
       font-size: 35px;
       background: var(--primary-blue);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .gcc_service_sec .step-number {
       position: absolute;
       top: -5px;
       right: -5px;
       background: var(--primary-blue);
       color: white;
       width: 25px;
       height: 25px;
       border-radius: 50%;
       font-size: 0.75rem;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
   }

   .gcc_service_sec .step-title {
       font-weight: 700;
       font-size: 20px;
       margin-bottom: 5px;
   }

   .gcc_service_sec .step-desc {
       font-size: 16px;
       opacity: 0.9;
       font-weight: 400;
   }

   /* Decorative curves for the bottom (Optional, matching image) */
   .gcc_service_sec .curve-decoration {
       position: absolute;
       bottom: -20px;
       width: 100%;
       display: flex;
       justify-content: space-around;
   }

   @media (max-width: 991px) {
       .gcc_service_sec .framework-container {
           border-radius: 30px;
           padding: 90px 20px 20px;
       }

       .gcc_service_sec .step-card {
           margin-bottom: 80px;
       }

       .gcc_service_sec .step-card:last-child {
           margin-bottom: 0;
       }
   }


   /* real empact section css start */


   .real_Impact .swiper {
       width: 100%;
       padding: 50px 0 80px;
   }

   .real_Impact .case-card {
       background: white;
       border-radius: 30px;
       padding: 50px;
       box-shadow: 0 25px 50px -12px rgba(0, 180, 216, 0.15);
       max-width: 1000px;
       margin: 0 auto;
       border: 1px solid rgba(255, 255, 255, 0.8);
   }

   .real_Impact .case-image {
       max-width: 100%;
       height: auto;
       border-radius: 20px;
   }

   .real_Impact .stats-box {
       background: #f8fdfe;
       border-radius: 15px;
       padding: 15px;
       text-align: center;
       border: 1px solid #eefaff;
   }

   .real_Impact .stat-value {
       color: var(--brand-blue);
       font-weight: 800;
       font-size: 1.5rem;
       display: block;
   }

   .real_Impact .stat-label {
       font-size: 0.8rem;
       color: #6c757d;
       font-weight: 500;
   }

   .btn-case {
       background: var(--gradients-linear);
       border: none;
       color: white;
       padding: 12px 35px;
       border-radius: 12px;
       font-weight: 600;
       transition: 0.3s;
   }

   .btn-case:hover {
       transform: scale(1.03);
       box-shadow: 0 10px 20px rgba(77, 232, 209, 0.3);
       color: white;
   }

   .real_Impact .swiper-button-next, .swiper-button-prev {
       background: white;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       color: var(--brand-blue) !important;
   }

   .real_Impact .swiper-button-next::after, .swiper-button-prev::after {
       font-size: 18px;
       font-weight: bold;
   }

   .real_Impact .swiper-pagination-bullet-active {
       background: var(--brand-teal);
   }

   @media (max-width: 768px) {
       .real_Impact .case-card {
           padding: 30px;
       }

       .real_Impact .case-image {
           margin-bottom: 30px;
       }
   }



   /* real empact section css end */


   /* Why Appriffy section css start    */

   .Why_Appriffy_sec {
       background:var(--gradients-linear-light);
       /* background-repeat: no-repeat;
       background-position: 100%;
       background-size: cover;
       width: 100%;
       height: 100%;
       background-color: #F0F2F4; */
       padding: 100px 0;
   }



   .Why_Appriffy_sec .main_title h2 {
       font-weight: 800;
       font-size: 2.8rem;
       color: var(--gradients-linear);
   }

   .Why_Appriffy_sec .main_title p {
       color: #666;
       font-size: 1.1rem;
       margin-bottom: 50px;
   }

   /* Feature Card Redesign */
   .Why_Appriffy_sec .feature-card {
       background: #ffffff;
       border: 1px solid var(--card-border);
       border-radius: 20px;
       padding: 35px 25px;
       display: flex;
       flex-direction: column;
       /* Vertical alignment for better look */
       align-items: center;
       text-align: center;
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       height: 100%;
       position: relative;
       overflow: hidden;
       z-index: 1;
   }

   /* Background Hover Effect */
   .Why_Appriffy_sec .feature-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, var(--gradients-linear), #0077b6);
       z-index: -1;
       opacity: 0;
       transition: all 0.4s ease;
   }

   .Why_Appriffy_sec .feature-card:hover {
       transform: translateY(-12px);
       border-color: transparent;
       box-shadow: 0 20px 40px rgba(0, 180, 216, 0.15);
       background: var(--primary-blue);
   }

   .Why_Appriffy_sec .feature-card:hover::before {
       opacity: 1;
   }

   /* Icon Box Redesign */
   .Why_Appriffy_sec .icon-box {
       width: 70px;
       height: 70px;
       background-color: var(--icon-bg);
       border-radius: 50%;
       /* Circle for more modern feel */
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 25px;
       /* Spacing below icon */
       transition: 0.4s;
       box-shadow: 0 8px 15px rgba(0, 180, 216, 0.1);
   }

   .Why_Appriffy_sec .feature-card:hover .icon-box {
       background-color: rgba(255, 255, 255, 0.2);
       transform: rotateY(360deg);
   }

   .Why_Appriffy_sec .icon-box i {
       font-size: 1.8rem;
       color: var(--gradients-linear);
   }

   .Why_Appriffy_sec .feature-card:hover .icon-box i {
       color: #fff;
   }

   /* Text Styling */
   .Why_Appriffy_sec .feature-text {
       font-weight: 700;
       color: var(--text-main);
       font-size: 1.2rem;
       margin: 0;
       transition: 0.3s;
   }

   .Why_Appriffy_sec .feature-card:hover .feature-text {
       color: #fff;
   }

   /* Why Appriffy section css end    */



   /* AI GCCs section css start */


   .AI_GCCs_sec .map-box {
       /* background: var(--dark-blue); */
       border-radius: 30px;
       padding: 20px;
       
       position: relative;
       overflow: hidden;
       min-height: 450px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .AI_GCCs_sec .map-box img {
       width: 100%;
       border-radius: 30px;
   }

   .AI_GCCs_sec .map-box img {
       max-width: 100%;
       height: auto;
       filter: drop-shadow(0 0 15px rgba(77, 232, 209, 0.4));
   }



   .AI_GCCs_sec .feature-item {
       display: flex;
       align-items: flex-start;
       margin-bottom: 35px;
       transition: transform 0.3s ease;
   }

   .AI_GCCs_sec .feature-item:hover {
       transform: translateX(10px);
   }

   .AI_GCCs_sec .icon-square {
       width: 50px;
       height: 50px;
       background: #e6fcf9;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 20px;
       flex-shrink: 0;
   }

   .AI_GCCs_sec .icon-square i {
       font-size: 1.2rem;
       color: var(--accent-teal);
   }

   .AI_GCCs_sec .feature-content h5 {
       font-weight: 700;
       color: var(--dark-blue);
       margin-bottom: 4px;
       font-size: 1.1rem;
   }

   .AI_GCCs_sec .feature-content p {
       color: var(--text-gray);
       font-size: 0.9rem;
       margin: 0;
       line-height: 1.4;
   }

   @media (max-width: 991px) {
       .AI_GCCs_sec .map-box {
           margin-bottom: 50px;
           min-height: 100%;
       }

       .AI_GCCs_sec .heading-section h2 {
           font-size: 2rem;
       }
   }




   /* AI GCCs section css end */



   /* Build Your Global section css start */


   /* CTA Section */
   .Build_Your_Global.cta-section {
       background: var(--gradients-linear);
       padding: 100px 0;
       color: white;
       text-align: center;
   }

   .Build_Your_Global .cta-badge {
       background: rgba(255, 255, 255, 0.1);
       padding: 8px 20px;
       border-radius: 50px;
       font-size: 0.85rem;
       border: 1px solid rgba(255, 255, 255, 0.2);
       margin-bottom: 25px;
       display: inline-block;
   }



   /* Build Your Global section css end */


   /* Appriffy Advantage section css start */
   .Appriffy_Advantage_sec {
       background: #060b1a;
       /* Deeper Dark Navy */
       padding: 120px 0;
       position: relative;
       overflow: hidden;
       color: white;
   }

   /* Background Blur Effects */
   .bg-blur-circle {
       position: absolute;
       top: -10%;
       right: -5%;
       width: 400px;
       height: 400px;
       background: radial-gradient(circle, rgba(0, 207, 236, 0.15) 0%, transparent 70%);
       filter: blur(60px);
   }

   .bg-blur-circle-2 {
       position: absolute;
       bottom: -10%;
       left: -5%;
       width: 300px;
       height: 300px;
       background: radial-gradient(circle, rgba(0, 140, 201, 0.15) 0%, transparent 70%);
       filter: blur(50px);
   }

   .advantage-tag {
       color: var(--accent-teal);
       font-weight: 700;
       letter-spacing: 2px;
       font-size: 0.85rem;
       display: block;
       margin-bottom: 10px;
   }

   /* Redesigned Stats Card */
   .Appriffy_Advantage_sec .adv-card {
       background: rgba(255, 255, 255, 0.03);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       padding: 40px 30px;
       border-radius: 24px;
       text-align: left;
       /* Changed to left for professional look */
       position: relative;
       transition: all 0.4s ease;
       overflow: hidden;
   }

   .Appriffy_Advantage_sec .adv-card:hover {
       transform: translateY(-10px);
       background: rgba(255, 255, 255, 0.07);
       border-color: var(--accent-teal);
       box-shadow: 0 20px 40px rgba(0, 207, 236, 0.1);
   }

   .Appriffy_Advantage_sec .adv-val {
       font-size: 3rem;
       font-weight: 800;
       background: var(--gradients-linear);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 5px;
   }

   .adv-label {
       color: #ccd6f6;
       font-weight: 500;
       font-size: 1.1rem;
   }

   .stat-bar {
       width: 40px;
       height: 4px;
       background: var(--accent-teal);
       border-radius: 10px;
       margin-top: 15px;
       transition: width 0.4s ease;
   }

   .adv-card:hover .stat-bar {
       width: 80px;
   }

   /* Floating Image Animation */
   :root {
       --dark-navy: #060b1a;
       --brand-cyan: var(--accent-teal);
       --card-bg: rgba(17, 34, 64, 0.6);
   }

   .Appriffy_Advantage_sec {
       background-color: var(--dark-navy);
       padding: 120px 0;
       position: relative;
       overflow: hidden;
       color: #fff;
   }

   .advantage-visual-wrapper {
       position: relative;
       z-index: 1;
       height: 100%;
   }

   .side-tech-img {
       width: 100%;
       border-radius: 30px;
       box-shadow: 0 0 50px rgba(0, 207, 236, 0.2);
       border: 1px solid rgba(0, 207, 236, 0.3);
       position: relative;
       z-index: 2;
       height: 100%;
   }

   .tech-pattern {
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background-image: radial-gradient(var(--brand-cyan) 0.5px, transparent 0.5px);
       background-size: 20px 20px;
       opacity: 0.2;
       z-index: -1;
   }

   /* Floating Card Animation */
   .floating-data-card {
       position: absolute;
       bottom: 50px;
       right: -68px;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(15px);
       padding: 20px;
       border-radius: 20px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       z-index: 3;
       animation: floatAnim 4s ease-in-out infinite;
   }

   /* Stat Box Redesign */
   .adv-stat-box {
       background: var(--card-bg);
       border: 1px solid rgba(255, 255, 255, 0.05);
       padding: 35px 25px;
       border-radius: 25px;
       transition: all 0.3s ease;
       height: 100%;
   }

   .adv-stat-box:hover {
       background: rgba(0, 207, 236, 0.05);
       border-color: var(--brand-cyan);
       transform: translateY(-5px);
   }

   .adv-val {
       font-size: 3rem;
       font-weight: 800;
       color: var(--brand-cyan);
       line-height: 1;
       margin-bottom: 10px;
   }

   .text-gradient {
       background: var(--gradients-linear);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   /* Pulse Animation */
   .pulse-icon {
       width: 45px;
       height: 45px;
       background: var(--brand-cyan);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       box-shadow: 0 0 15px var(--brand-cyan);
   }

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

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

   @media (max-width: 991px) {
       .side-tech-img {
           margin-top: 50px;
       }

       .floating-data-card {
           left: 20px;
           bottom: 20px;
       }
   }

   /* Appriffy Advantage section css end */


   /* footer css start  */

   .footer_sec {
    background: #0a192f;
       color: #a8b2d1;
       padding: 80px 0 30px;
   }

   .privacy_text {
       display: flex;
       align-items: center;
       gap: 20px;
   }

   .privacy_text a {
       color: var(--white);
       text-decoration: none;
       font-size: 14px;
   }

   .footer_sec .footer-logo {
       color: white;
       font-weight: 800;
       font-size: 1.8rem;
       display: flex;
       align-items: center;
       margin-bottom: 20px;
   }

   .footer_sec .footer-logo img {
       width: 150px;
   }

   .footer_sec .footer-logo span {
       background: var(--teal-accent);
       color: var(--footer-dark);
       padding: 2px 8px;
       border-radius: 6px;
       margin-right: 10px;
   }

   .footer_sec .footer-heading {
       color: white;
       font-weight: 700;
       margin-bottom: 25px;
       font-size: 1.1rem;
   }

   .footer_sec .footer-links {
       list-style: none;
       padding: 0;
   }

   .footer_sec .footer-links li {
       margin-bottom: 12px;
   }

   .footer_sec .footer-links a {
       color: #a8b2d1;
       text-decoration: none;
       transition: 0.3s;
   }

   .footer_sec .footer-links a:hover {
       color: var(--teal-accent);
       padding-left: 5px;
   }

   .footer_sec .contact-info i {
       color: var(--teal-accent);
       margin-right: 10px;
   }

   .footer_sec .social-icons a {
       width: 40px;
       height: 40px;
       background: rgba(255, 255, 255, 0.05);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       color: white;
       margin-right: 10px;
       transition: 0.3s;
   }

   .footer_sec .social-icons a:hover {
       background: var(--teal-accent);
       color: var(--footer-dark);
   }

   .footer_sec .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, 0.05);
       margin-top: 50px;
       padding-top: 30px;
       font-size: 0.9rem;
   }


   /* footer css end  */

   @media (max-width: 991px) {
       .main_title h2 {
           font-size: 30px;
       }

       .white_title h2 {
           font-size: 30px;
       }
   }
  .GCCwithAppriffy_img { text-align: center;}

   .GCCwithAppriffy_img img {
       width: 60%;
   }


   /* industry section css start */

   .industries_sec {
       background-color: var(--dark-navy);
       color: #ffffff;
   }

   .industries_sec .section-title {
       font-weight: 700;
       font-size: 2.5rem;
       margin-bottom: 10px;
   }

   .industries_sec .industry-card {
       background:var(--dark-navy);
       border: 1px solid rgba(255, 255, 255, 0.05);
       border-radius: 20px;
       padding: 30px;
       height: 100%;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       display: flex;
       flex-direction: column;
   }

   /* --- HOVER EFFECT: Background White --- */
   .industries_sec .industry-card:hover {
       transform: translateY(-10px);
       background: var(--gradients-linear-light) !important;
       /* Force white background on hover */
       border-color: var(--accent-teal);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
   }

   /* Hover par text color change */
   .industries_sec .industry-card:hover .card-title,
   .industries_sec .industry-card:hover .card-text {
       color: #ffffff;
   }

   /* --- Learn More Button Styling --- */
   .industries_sec .learn-more-btn {
       margin-top: auto;
       color: var(--accent-teal);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.95rem;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       opacity: 0;
       /* Default hidden */
       transform: translateY(20px);
       /* Slightly below */
       transition: all 0.3s ease;
   }

   /* --- Hover par button show hoga --- */
   .industries_sec .industry-card:hover .learn-more-btn {
       opacity: 1;
       transform: translateY(0);
   }

   .industries_sec .card-number {
       background: var(--gradients-linear);
       color: #ffffff;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-size: 0.85rem;
       margin-bottom: 20px;
   }

   .industries_sec .card-title {
       color: var(--accent-teal);
       font-weight: 700;
       font-size: 1.25rem;
       margin-bottom: 15px;
       transition: color 0.3s ease;
   }

   .industries_sec .card-text {
       color: #ccd6f6;
       font-size: 0.95rem;
       line-height: 1.6;
       transition: color 0.3s ease;
   }

   .industries_sec .card-pattern {
       position: absolute;
       bottom: -20px;
       right: -20px;
       width: 120px;
       opacity: 0.1;
       pointer-events: none;
   }

   @media (min-width: 992px) {
       .industries_sec .row-bottom {
           justify-content: center;
       }
   }

   /* industry section css end */


   /* mission vision css start */

   /* Mission & Vision Container */
   .mission_sec .content-box {
       padding: 40px;
   }

   .mission_sec .tagline {
       color: var(--accent-orange);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 0.9rem;
       display: block;
       margin-bottom: 15px;
   }



   .mission_sec .image-wrapper {
       position: relative;
       border-radius: 30px;
       overflow: hidden;
       box-shadow: var(--card-shadow);
   }

   .mission_sec .image-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .mission_sec .image-wrapper:hover img {
       transform: scale(1.05);
   }

   /* Custom Shapes for Vision */
   .mission_sec .vision-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 15px;
   }

   .mission_sec .vision-img-1 {
       border-radius: 100px 30px 30px 30px;
       height: 300px;
   }

   .mission_sec .vision-img-2 {
       border-radius: 30px 100px 30px 30px;
       height: 180px;
   }

   .mission_sec .vision-img-3 {
       border-radius: 30px 30px 30px 100px;
       height: 180px;
       margin-top: -110px;
   }



   /* Responsive Fixes */
   @media (max-width: 991px) {
       .mission_sec .heading {
           font-size: 2.2rem;
       }

       .mission_sec .content-box {
           padding: 20px;
           text-align: center;
       }

       .mission_sec .vision-img-3 {
           margin-top: 0;
       }
   }

   /* mission vision css end */


   .black_btn {
       background: #000;
       border-radius: 50px;
       padding: 12px 25px;
       color: #fff;
       border: unset;
       font-size: 14px;
       display: inline-flex;
       justify-content: center;
       align-items: center;
   }

   .main_btn {
       background: var(--accent-teal);
       border-radius: 50px;
       padding: 12px 28px;
       color: #000;
       border: none;
       font-weight: 700;
       text-decoration: none;
       font-size: 14px;
       display: inline-flex;
       justify-content: center;
       align-items: center;
       position: relative;
       overflow: hidden;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       z-index: 1;
       cursor: pointer;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
       gap: 8px;
   }

   .main_btn::before {
       content: "";
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(120deg,
               transparent,
               rgba(255, 255, 255, 0.6),
               transparent);
       transition: all 0.6s;
       z-index: -1;
   }

   .main_btn:hover::before {
       left: 100%;
   }

   .main_btn:hover {
       color: #000;
       transform: translateY(-3px) scale(1.02);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
       background: var(--accent-teal);
   }

   .main_btn:active {
       transform: translateY(-1px);
   }

   @keyframes pulse-border {
       0% {
           box-shadow: 0 0 0 0 rgba(var(--secondary-rgb), 0.4);
       }

       70% {
           box-shadow: 0 0 0 10px rgba(var(--secondary-rgb), 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(var(--secondary-rgb), 0);
       }
   }





   /* 
   new section methodology css */

   .bot_methodology_sec {
       background: #0a192f;
       padding: 100px 0;
       position: relative;
       overflow: hidden;
   }

   .bot_methodology_sec .sub-tag {
       color: var(--accent-teal);
       font-weight: 700;
       letter-spacing: 2px;
       font-size: 0.9rem;
       display: block;
       margin-bottom: 10px;
   }



   .bot_methodology_sec .bot-card {
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 30px;
       padding: 50px 30px;
       text-align: center;
       position: relative;
       z-index: 1;
       transition: all 0.4s ease;
       height: 100%;
   }

   .bot_methodology_sec .bot-card:hover {
       background: rgba(255, 255, 255, 0.06);
       transform: translateY(-15px);
       border-color: var(--accent-teal);
       box-shadow: 0 20px 40px rgba(0, 207, 236, 0.15);
   }

   .bot_methodology_sec .bot-card.active {
       border-color: var(--accent-teal);
       background: rgba(0, 207, 236, 0.02);
   }

   .bot_methodology_sec .bot-step-num {
       position: absolute;
       top: 20px;
       right: 30px;
       font-size: 3rem;
       font-weight: 900;
       color: rgba(255, 255, 255, 0.05);
       line-height: 1;
   }

   .bot_methodology_sec .bot-icon-wrapper {
       width: 80px;
       height: 80px;
       background: var(--gradients-linear);
       border-radius: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 25px;
       font-size: 2rem;
       color: white;
       box-shadow: 0 10px 20px rgba(0, 207, 236, 0.3);
   }

   .bot_methodology_sec .bot-card-title {
       color: white;
       font-weight: 700;
       margin-bottom: 15px;
   }

   .bot_methodology_sec .bot-card-text {
       color: #ccd6f6;
       font-size: 0.95rem;
       line-height: 1.6;
       margin-bottom: 20px;
   }

   .bot_methodology_sec .bot-list {
       list-style: none;
       padding: 0;
       text-align: left;
       display: inline-block;
   }

   .bot_methodology_sec .bot-list li {
       color: #8892b0;
       font-size: 0.85rem;
       margin-bottom: 8px;
   }

   .bot_methodology_sec .bot-list li i {
       color: var(--accent-teal);
       margin-right: 8px;
   }

   @media (max-width: 991px) {
       .bot-card {
           margin-bottom: 20px;
       }
   }


   /* new section methodology css end */


   .hire_developers_light_sec {
       padding: 100px 0;
       position: relative;
       overflow: hidden;
       padding: 100px 0;
       position: relative;
       overflow: hidden;
       background: #fcfdfe;
       /* Background Shorthand: color, image, position, size, repeat */

   }

   .hire_developers_light_sec::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       background: url("../img/section-bg-shape.svg") no-repeat center / cover;
       width: 100%;
       background-repeat: no-repeat;
       background-position: center;
       width: 100%;
       height: 100%;
       background-size: cover;
       opacity: 0.2;
   }


   .light-blob {
       position: absolute;
       top: -10%;
       right: -5%;
       width: 500px;
       height: 500px;
       background: radial-gradient(circle, rgba(0, 180, 216, 0.05) 0%, transparent 70%);
       z-index: 0;
   }

   .text-gradient-blue {
       background:var(--gradients-linear);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }


   .badge-tech-light {
       background: #e0f7fa;
       color: #0077b6;
       padding: 8px 18px;
       border-radius: 50px;
       font-size: 0.8rem;
       font-weight: 700;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
   }


   .hire-stats-light {
       display: flex;
       gap: 40px;
       margin-top: 35px;
   }

   .stat-num-light {
       font-size: 2.8rem;
       font-weight: 800;
       color: #2d3436;
       line-height: 1;
   }


   .tech-card-light {
       background: #ffffff;
       border: 1px solid #edf2f7;
       padding: 25px 15px;
       border-radius: 20px;
       text-align: center;
       transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 12px;
   }

   .tech-card-light:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 40px rgba(0, 119, 182, 0.08);
       border-color: var(--gradients-linear);
   }

   .tech-icon-circle {
       width: 55px;
       height: 55px;
       background: #f8fafc;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.6rem;
       transition: 0.3s;
   }

   .tech-card-light:hover .tech-icon-circle {
       background: #e0f7fa;
       transform: scale(1.1);
   }

   .tech-card-light span {
       color: #4a5568;
       font-weight: 600;
       font-size: 0.9rem;
   }


   .btn-hire-primary {
       display: inline-block;
       background: #0077b6;
       color: #fff;
       padding: 16px 35px;
       border-radius: 12px;
       font-weight: 700;
       text-decoration: none;
       transition: 0.3s;
       box-shadow: 0 10px 20px rgba(0, 119, 182, 0.2);
   }

   .btn-hire-primary:hover {
       background: var(--gradients-linear);
       color: #fff;
       transform: scale(1.05);
   }

   @media (max-width: 768px) {
       .hire-stats-light {
           justify-content: space-between;
           gap: 10px;
       }
   }


   /* hire developer css end */


   /* get and tout form css start */

.contact-form-wrapper {
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); /* Soft shadow */
    border: 1px solid #f1f4f8;
    position: relative;
    overflow: hidden;
}

.form-header h3 {
    font-size: 1.8rem;
    letter-spacing: -0.5px;
}

.input-group-custom {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc; 
    border: 1px solid #edf2f7;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.input-group-custom i {
    padding-left: 15px;
    color: var(--gradients-linear); 
    font-size: 1.1rem;
}

.input-group-custom input, 
.input-group-custom select, 
.input-group-custom textarea {
    width: 100%;
    padding: 14px 15px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: #2d3436;
}

.input-group-custom textarea {
    resize: none;
}

.input-group-custom:focus-within {
    background: #ffffff;
    border-color: var(--gradients-linear);
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.1);
}

.contact-form-wrapper::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

@media (max-width: 576px) {
    .contact-form-wrapper {
        padding: 25px;
    }
}


/* ===============================
   CONTACT POPUP MODAL
================================ */
.contact-modal{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.25);
}

/* Close button */
.modal-close-btn{
    position:absolute;
    top:18px;
    right:18px;
    z-index:10;
}

/* Dark overlay */
.modal-backdrop.show{
    background:rgba(11,19,43,0.85);
}

/* ===============================
   FORM WRAPPER
================================ */
.contact-form-wrapper{
    background:#ffffff;
    border-radius:18px;
    padding:45px 40px;
}
.form-header h3{
    font-weight:700;
}
.form-header p{
    font-size:.95rem;
}

/* Custom input group */
.input-group-custom{
    position:relative;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 14px 12px 42px;
    transition:.3s;
}
.input-group-custom i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#6b7280;
}
.input-group-custom input,
.input-group-custom select,
.input-group-custom textarea{
    border:none;
    background:transparent;
    width:100%;
    outline:none;
    font-size:.95rem;
}
.input-group-custom:focus-within{
    border-color:#0D6EFD;
    background:#ffffff;
    box-shadow:0 0 0 3px rgba(13,110,253,.08);
}

/* Responsive */
@media(max-width:767px){
    .contact-form-wrapper{
        padding:30px 20px;
    }

    .hero-wrapper {
    background: var(--gradients-linear);
    color: white;
   
    min-height: 50vh;
    padding: 0px 15px;
}

.custom-btn, .btn-outline-to-fill, .btn-fill-to-outline, .common_btn_fill, .black_btn, .main_btn, .btn-case, .btn-hire-primary, .learn-more-btn, .btn-primary, .btn-secondary {
    border-radius: 50px !important;
    padding: 14px 32px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.35s ease !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid transparent !important;
}
}


/* ===============================
   APPRIFFY GCC SECTION
================================ */
.appriffy-gcc-sec{
    background:var(--gradients-linear-light);
}

.appriffy-gcc-sec .main_title h2{
    font-weight:800;
    line-height:1.2;
}
.appriffy-gcc-sec .main_title h2 span{
    background:var(--gradients-linear);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Right side highlight cards */
.gcc-highlights{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.highlight-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:#f9fbff;
    padding:22px 24px;
    border-radius:14px;
    border:1px solid #e5ecf5;
    transition:.35s;
}
.highlight-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 40px rgba(13,110,253,.12);
}

/* Icon */
.highlight-card .icon-box{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:10px;
    background:var(--gradients-linear);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.1rem;
}

/* Text */
.highlight-card h5{
    font-weight:600;
    margin-bottom:6px;
}
.highlight-card p{
    font-size:.95rem;
    color:#6b7280;
    margin:0;
}

/* Responsive */
@media(max-width:991px){
    .appriffy-gcc-sec .main_title h2{
        font-size:2rem;
    }
}

   /* get and tout form css end */

   /* Expand Animation */
.extra-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.4s ease;
    opacity: 0;
}

.extra-wrapper.active {
    max-height: 600px;
    opacity: 1;
}

/* Card Style */
.tech-card-light {
    position: relative;
    text-align: center;
    padding: 22px 10px;
    border-radius: 14px;
    background: #f8f9fa;
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

/* Gradient Border Hover */
.tech-card-light:hover {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
                var(--gradients-linear) border-box;
    transform: translateY(-6px);
}

/* Icon */
.tech-icon-circle {
    font-size: 30px;
    margin-bottom: 10px;
}

/* Small Toggle Text */
.tech-toggle-text {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
}

.tech-toggle-text:hover {
    color: #000;
}

.gradient-badge {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    background: transparent;
    border-radius:1000px;
    margin-bottom: 10px;

    /* Gradient Text */
    background-image: var(--gradients-linear);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Gradient Border */
    border: 2px solid;
    border-image: var(--gradients-linear) 1;

    transition: all 0.3s ease;
}

.gradient-badge:hover {
    transform: translateY(-2px);
}

/* ================= GLOBAL PRESENCE ================= */

.appriffy-global {
    background:var(--gradients-linear-light);
    padding: 90px 0;
}

.appriffy-global-title {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 10px;
}

.appriffy-global-subtitle {
    color: #666;
    font-size: 15px;
}

.appriffy-global-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    height: 100%;
}

.appriffy-global-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.appriffy-global-flag {
    width: 50px;
    margin-bottom: 15px;
}

.appriffy-global-card h6 {
    font-weight: 600;
    margin-bottom: 12px;
}

.appriffy-global-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* ================= CIN STRIP ================= */

.appriffy-top-strip {
    background: #0a192f;
    color: #fff;
    padding: 14px 0;
    font-size: 14px;
    text-align: center;
}

/* ================= FOOTER ================= */

.appriffy-footer {
    background: var(--gradients-linear);
    color: #cbd5e1;
    padding: 70px 0 30px;
}

.appriffy-footer-heading {
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.appriffy-footer-links {
    list-style: none;
    padding: 0;
}

.appriffy-footer-links li {
    margin-bottom: 10px;
}

.appriffy-footer-links li a {
    color: #cbd5e1;
    text-decoration: none;
    transition: 0.3s;
}

.appriffy-footer-links li a:hover {
    color: #fff;
}

.appriffy-footer-logo img {
    max-width: 160px;
    margin-bottom: 15px;
}

.appriffy-social-icons a {
    display: inline-block;
    margin-right: 12px;
    color: #fff;
    font-size: 16px;
    transition: 0.3s;
}

.appriffy-social-icons a:hover {
    color: #0f6f8f;
}

.appriffy-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 40px;
}

.appriffy-footer-bottom p {
    margin: 0;
}

.appriffy-privacy a {
    color: #cbd5e1;
    margin-left: 15px;
    text-decoration: none;
}

.appriffy-privacy a:hover {
    color: #fff;
}


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

.appriffy-hover-team {
    padding: 120px 0;
    background: #0f172a;
}

.appriffy-hover-title {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
}

.appriffy-hover-subtitle {
    color: #94a3b8;
}

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

.appriffy-hover-card {
    position: relative;
    background: #111827;
    padding: 50px 40px 50px 190px;
    border-radius: 28px;
    overflow: hidden;
    transition: 0.5s ease;
    min-height: 260px;
}

/* Gradient Border */

.appriffy-hover-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    padding: 2px;
    background: var(--gradients-linear);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: 0.5s ease;
}

/* Light Sweep */

.appriffy-hover-card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -50%;
    width: 200%;
    height: 300%;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.08),
        transparent 70%
    );
    transform: rotate(25deg);
    transition: 0.7s ease;
}

/* Hover Effects */

.appriffy-hover-card:hover {
    transform: translateY(-15px) scale(1.02);
    background: #1e293b;
}

.appriffy-hover-card:hover::before {
    opacity: 1;
}

.appriffy-hover-card:hover::after {
    top: -40%;
}

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

.appriffy-hover-img {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 130px;
}

.appriffy-hover-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    background: #1e293b;
    padding: 8px;
    transition: 0.5s ease;
}

.appriffy-hover-card:hover .appriffy-hover-img img {
    transform: scale(1.08) rotate(-2deg);
}

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

.appriffy-hover-content h3 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 8px;
}

.appriffy-hover-content p {
    color: #cbd5e1;
    font-size: 14.5px;
    line-height: 1.9;
    margin-bottom: 12px;
}

/* Role Badge */

.appriffy-hover-role {
    display: inline-block;
   
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    border: 1px solid transparent;

    background: linear-gradient(#111827, #111827) padding-box,
                var(--gradients-linear) border-box;

    background-image: var(--gradients-linear);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

@media (max-width: 991px) {

    .appriffy-hover-card {
        padding: 160px 30px 40px 30px;
    }

    .appriffy-hover-img {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    .appriffy-hover-content {
        text-align: center;
    }
}

section.section-padding.AI_GCCs_sec {
    background: var(--gradients-linear-light);
}

/* ========================================= */
/* FULL SCREEN PROFESSIONAL MOBILE MENU */
/* ========================================= */

@media (max-width: 991px) {

    /* ===== Navbar Layout ===== */
    .header_sec .navbar > .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo size */
    .navbar-brand img {
        width: 160px;
        height: auto;
    }

    /* Hide header button */
    .navbar-collapse .d-grid {
        display: none !important;
    }

    /* ===== Hamburger Styling ===== */
    .navbar-toggler {
        border: none !important;
        padding: 6px 8px;
        position: relative;
        z-index: 11000;
    }

    .navbar-toggler:focus {
        box-shadow: none !important;
    }

    /* Custom Hamburger Icon */
    .navbar-toggler-icon {
        background-image: none;
        width: 24px;
        height: 2px;
        background: #fff;
        position: relative;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 2px;
        background: #fff;
        left: 0;
        transition: all 0.3s ease;
    }

    .navbar-toggler-icon::before {
        top: -7px;
    }

    .navbar-toggler-icon::after {
        top: 7px;
    }

    /* Transform to Close Icon */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background: transparent;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }

    /* ===== Full Screen Menu ===== */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* height: 100vh; */
        background: linear-gradient(135deg, #1E90FF, #00E676);
        /* padding: 120px 30px 40px; */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        z-index: 10000;
    }

    /* When Open */
    .navbar-collapse.show {
        transform: translateX(0);
    }

    /* Nav Links */
    .navbar-nav {
        width: 100%;
    }

    .navbar-nav .nav-item {
        margin-bottom: 22px;
    }

    .navbar-nav .nav-link {
        font-size: 22px;
        font-weight: 600;
        color: #fff !important;
        padding: 0;
        text-align: left;
    }

    /* Button Full Width Inside Menu */
    .navbar-collapse.show .d-lg-block {
        display: block !important;
        width: 100%;
        margin-top: 30px;
    }

    .navbar-collapse .common_btn_fill {
        /* width: 100%; */
        padding: 14px;
        font-size: 15px;
        border-radius: 30px;
        white-space: nowrap;
        background: #000;
        color: #fff;
    }

    /* Prevent button text breaking */
    .common_btn_fill {
        white-space: nowrap;
    }
}


/* ========================================= */
/* APPRIFFY LIGHT GCC SECTION */
/* ========================================= */

.appriffy-light-section {
    background: #f8fbff;
    padding: 80px 0;
}

/* Section Title */
.appriffy-section-title h2 {
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
}

.appriffy-section-title p {
    color: #555;
    max-width: 650px;
    margin: 0 auto 50px;
}

/* Card */
.appriffy-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Gradient Border Hover */
.appriffy-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, #1E90FF, #00E676);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: 0.4s ease;
}

.appriffy-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(30, 144, 255, 0.15);
}

.appriffy-card:hover::before {
    opacity: 1;
}

/* Icon */
.appriffy-icon-box {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, #1E90FF, #00E676);
    color: #fff;
    flex-shrink: 0;
}

/* Text */
.appriffy-card h5 {
    font-weight: 600;
    margin-bottom: 8px;
    color: #111;
}

.appriffy-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {

    .appriffy-light-section {
        padding: 60px 0;
    }

    .appriffy-card {
        padding: 20px;
    }

    .appriffy-icon-box {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .appriffy-card h5 {
        font-size: 16px;
    }

    .appriffy-card p {
        font-size: 13px;
    }
}




        /* =========================================================
           1. BRAND CORE VARIABLES (From Your CSS)
        ========================================================= */
        :root {
            --primary-blue: #1E4ED8;
            --royal-blue: #2563EB;
            --accent-teal: #14B8A6;
            --fresh-green: #22C55E;
            --dark-navy: #0A0F1F;
            --deep-black: #050814;
            --text-main: #0F172A;
            --text-gray: #64748B;
            --white: #FFFFFF;
            --icon-bg: #ECFEFF;
            --card-border: #E2E8F0;

            /* PREMIUM GRADIENTS */
            --gradients-linear: linear-gradient(135deg, #1E4ED8 0%, #14B8A6 55%, #22C55E 100%);
            --dark-gradient: linear-gradient(135deg, #050814 0%, #0A0F1F 100%);
            --gradients-linear-light: linear-gradient(135deg, rgba(30, 78, 216, 0.08) 0%, rgba(20, 184, 166, 0.08) 55%, rgba(34, 197, 94, 0.08) 100%);
            
            /* UI HELPERS */
            --card-shadow: 0 20px 40px rgba(0, 180, 216, 0.08);
            --hover-shadow: 0 25px 50px rgba(0, 207, 236, 0.15);
        }

        /* =========================================================
           2. GLOBAL RESET & TYPOGRAPHY
        ========================================================= */
        body {
            font-family: 'Inter', sans-serif;
            background: var(--white);
            color: var(--text-main);
            overflow-x: hidden;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        a { text-decoration: none; }
        ul { list-style: none; padding: 0; margin: 0; }
        
        .container { max-width: 1280px; margin: 0 auto; padding: 0 15px; }
        .section-padding { padding: 100px 8%; }

        .text-gradient {
            background: var(--gradients-linear);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .section-tag {
            color: var(--accent-teal);
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 0.9rem;
            display: block;
            margin-bottom: 15px;
        }

        .section-title {
            font-weight: 800;
            color: var(--text-main);
            font-size: 2.8rem;
            line-height: 1.2;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        /* =========================================================
           3. BUTTON STYLES (Your Custom Button)
        ========================================================= */
        .main_btn {
            background: #000;
            border-radius: 50px;
            padding: 16px 35px;
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: none;
            cursor: pointer;
            z-index: 1;
        }

        .main_btn::before {
            content: "";
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transition: all 0.6s;
            z-index: -1;
        }

        .main_btn:hover::before { left: 100%; }
        .main_btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            background: var(--accent-teal);
            color: #000;
        }

        /* =========================================================
           4. ABOUT HERO SECTION
        ========================================================= */
        .about-hero {
            background: var(--dark-gradient);
            padding: 160px 8% 120px;
            color: var(--white);
            text-align: left;
            position: relative;
        }

        .about-hero::after {
            content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
            background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=1000') center/cover;
            opacity: 0.15; z-index: 0;
            -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        }

        .hero-content { position: relative; z-index: 1; }
        .about-hero h1 { font-size: 4.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; }
        .about-hero p { font-size: 1.25rem; color: #ccd6f6; max-width: 700px; margin-bottom: 40px; font-weight: 300;}

        /* =========================================================
           5. OUR STORY (Left Aligned Setup)
        ========================================================= */
        .about-story { background: var(--white); }
        .story-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: center; }
        .story-content { text-align: left; }
        .story-content p { color: var(--text-gray); font-size: 1.05rem; margin-bottom: 20px; line-height: 1.7;}

        /* Highlight Cards inside Story */
        .story-highlights { display: flex; flex-direction: column; gap: 15px; margin: 35px 0; }
        .s-card { display: flex; align-items: center; gap: 20px; background: var(--gradients-linear-light); padding: 20px 25px; border-radius: 16px; border: 1px solid rgba(20, 184, 166, 0.15); transition: all 0.4s ease; }
        .s-card:hover { transform: translateX(10px); background: var(--white); box-shadow: 0 15px 35px rgba(30, 78, 216, 0.08); border-color: var(--accent-teal); }
        .s-icon { width: 50px; height: 50px; min-width: 50px; border-radius: 12px; background: var(--gradients-linear); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 20px; }
        .s-text h5 { font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; color: var(--text-main); }
        .s-text p { font-size: 0.9rem; color: var(--text-gray); margin: 0; }

        /* Story Image */
        .story-image-box { position: relative; border-radius: 30px; padding: 20px; }
        .story-image-box::before { content: ''; position: absolute; inset: 0; background: var(--gradients-linear); border-radius: 35px; opacity: 0.15; filter: blur(25px); z-index: -1; }
        .story-image-box img { width: 100%; border-radius: 25px; box-shadow: var(--card-shadow); min-height: 500px; object-fit: cover; }

        /* =========================================================
           6. BOT METHODOLOGY (Dark Cards)
        ========================================================= */
        .about-methodology { background: var(--dark-navy); color: var(--white); text-align: center; }
        .methodology-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
        
        .method-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 50px 30px; text-align: left; position: relative; transition: all 0.4s ease; }
        .method-card:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-15px); border-color: var(--accent-teal); box-shadow: var(--hover-shadow); }
        
        .method-card .step-num { position: absolute; top: 20px; right: 30px; font-size: 3rem; font-weight: 900; color: rgba(255, 255, 255, 0.05); }
        .method-icon { width: 70px; height: 70px; background: var(--gradients-linear); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.8rem; margin-bottom: 25px; box-shadow: 0 10px 20px rgba(0, 207, 236, 0.3); }
        .method-card h3 { color: var(--white); font-weight: 700; margin-bottom: 15px; font-size: 1.5rem;}
        .method-card p { color: #ccd6f6; font-size: 0.95rem; line-height: 1.7;}

        /* =========================================================
           7. GLOBAL PRESENCE (Light Gradient Sec)
        ========================================================= */
        .about-global { background: var(--gradients-linear-light); text-align: center; }
        .global-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }
        
        .global-card { background: var(--white); border: 1px solid var(--card-border); border-radius: 20px; padding: 40px 25px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .global-card:hover { transform: translateY(-12px); border-color: transparent; box-shadow: var(--hover-shadow); background: var(--primary-blue); color: var(--white); }
        .global-card:hover p, .global-card:hover h4 { color: var(--white); }
        
        .global-icon { width: 60px; height: 60px; background: var(--icon-bg); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; color: var(--primary-blue); font-size: 1.5rem; transition: 0.4s; }
        .global-card:hover .global-icon { background: rgba(255,255,255,0.2); color: var(--white); transform: rotateY(360deg); }
        
        .global-card h4 { font-weight: 700; color: var(--text-main); margin-bottom: 10px; transition: 0.3s; font-size: 1.25rem;}
        .global-card p { color: var(--text-gray); font-size: 0.95rem; transition: 0.3s;}

        /* =========================================================
           8. RESPONSIVE DESIGN
        ========================================================= */
        @media (max-width: 1024px) {
            .story-grid { grid-template-columns: 1fr; }
            .about-hero h1 { font-size: 3.5rem; }
        }
        @media (max-width: 991px) {
            .section-title { font-size: 2.4rem; }
            .section-padding { padding: 80px 5%; }
            .methodology-grid, .global-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .about-hero h1 { font-size: 2.5rem; }
            .methodology-grid, .global-grid { grid-template-columns: 1fr; }
            .s-card { flex-direction: column; align-items: flex-start; gap: 10px;}
        }

        /* =========================================================
   OUR VISION & MISSION SECTION CSS (Updated)
========================================================= */

.vision-mission-sec {
    background: var(--gradients-linear-light); /* Uses your light gradient background */
    position: relative;
    overflow: hidden;
}

.vm-header {
    text-align: left;
    margin-bottom: 50px;
    max-width: 800px;
}

.vm-subtitle {
    color: var(--text-gray);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 10px;
}

/* --- illustrative Diagram Styling --- */
.vm-diagram-wrapper {
    margin: 40px auto 60px; /* Stats card overlap ke pattern ko follow karte hue margin */
    max-width: 900px; /* Diagram ki width limited taaki balance rahe */
    text-align: center; /* Center diagram tag */
    padding: 20px;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

/* Premium Dark Cards for Vision & Mission */
.vm-card {
    background: var(--dark-navy); /* Deep Premium Blue */
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Strictly Left Aligned */
    text-align: left;
}

/* Hover Effects */
.vm-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-teal);
    box-shadow: 0 25px 50px rgba(20, 184, 166, 0.2);
}

/* Icon Box */
.vm-icon-wrapper {
    width: 75px;
    height: 75px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--white);
    margin-bottom: 30px;
    transition: all 0.4s ease;
    box-shadow: inset 0 0 20px rgba(20, 184, 166, 0.05);
}

.vm-card:hover .vm-icon-wrapper {
    background: var(--gradients-linear);
    border-color: transparent;
    color: var(--white);
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.4);
}

/* Content Styling */
.vm-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.vm-content p {
    color: #cbd5e1; /* Soft light gray for readability on dark */
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 300;
}

/* Subtle Glowing Background Inside Card */
.vm-bg-glow {
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: var(--gradients-linear);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.1;
    z-index: -1;
    transition: all 0.6s ease;
}

.vm-card:hover .vm-bg-glow {
    opacity: 0.25;
    transform: scale(1.2);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .vm-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .vm-header {
        text-align: center;
        margin: 0 auto 40px;
    }
    .vm-diagram-wrapper {
        margin: 30px auto 40px;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .vm-card {
        padding: 40px 30px;
    }
    .vm-content h3 {
        font-size: 1.75rem;
    }
    .vm-diagram-wrapper {
        display: none; /* Mobile par diagram ko hide karna behtar rahega clean look ke liye */
    }
}


/* =========================================================
   10-YEAR TIMELINE SECTION CSS (DARK PREMIUM)
========================================================= */

.appriffy-timeline-sec {
    background: var(--dark-navy, #0A0F1F);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Background Blurs */
.appriffy-timeline-sec::before,
.appriffy-timeline-sec::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}
.appriffy-timeline-sec::before { top: 5%; left: -10%; }
.appriffy-timeline-sec::after { bottom: 5%; right: -10%; }

.timeline-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

/* Capsule Badge */
.timeline-capsule {
    display: inline-block;
    color: var(--accent-teal, #14B8A6);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding: 8px 22px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.1);
}

.text-white { color: #ffffff !important; }

.timeline-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 650px;
    margin: 15px auto 0;
    line-height: 1.6;
}

/* Timeline Structure */
.timeline-container {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px 0;
    z-index: 2;
}

/* Central Line */
.timeline-center-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-teal, #14B8A6) 0%, rgba(20, 184, 166, 0.05) 100%);
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 0 50px;
    margin-bottom: 70px;
    box-sizing: border-box;
}

.timeline-item:last-child { margin-bottom: 0; }
.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; text-align: left; }

/* SVG Icon Badges */
.timeline-icon-badge {
    position: absolute;
    top: 15px;
    width: 52px;
    height: 52px;
    background: var(--dark-navy, #0A0F1F);
    border: 2px solid var(--accent-teal, #14B8A6);
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal, #14B8A6);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.15);
}

.timeline-icon-badge svg {
    width: 22px;
    height: 22px;
    transition: all 0.4s ease;
}

.timeline-item.left .timeline-icon-badge { right: -26px; }
.timeline-item.right .timeline-icon-badge { left: -26px; }

.timeline-item:hover .timeline-icon-badge {
    background: var(--gradients-linear, linear-gradient(135deg, #1E4ED8 0%, #14B8A6 55%, #22C55E 100%));
    border-color: transparent;
    color: #ffffff;
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.5);
}

.timeline-item:hover .timeline-icon-badge svg { stroke: #ffffff; }

/* Timeline Content Cards */
.timeline-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 30px;
    position: relative;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.timeline-item:hover .timeline-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(20, 184, 166, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.timeline-year {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 8px;
    line-height: 1;
}

.timeline-content h4 {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.timeline-content p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   SPECIAL GCC 2026 HIGHLIGHT STYLES
========================================= */
.gcc-milestone-content {
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.3);
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.08);
    overflow: hidden;
}

.gcc-glow-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(30, 78, 216, 0.1) 0%, transparent 60%);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

.timeline-item:hover .gcc-milestone-content {
    border-color: var(--accent-teal, #14B8A6);
    box-shadow: 0 15px 40px rgba(30, 78, 216, 0.2);
}

.gcc-highlight-icon {
    border-color: var(--primary-blue, #1E4ED8);
    box-shadow: 0 0 20px rgba(30, 78, 216, 0.4);
}

.gcc-highlight-icon svg {
    color: var(--primary-blue, #1E4ED8);
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */
@media (max-width: 991px) {
    .timeline-container { padding-left: 30px; }
    .timeline-center-line { left: 30px; transform: translateX(0); }
    .timeline-item { width: 100%; left: 0 !important; padding: 0 0 0 60px; text-align: left; margin-bottom: 50px; }
    .timeline-item.left .timeline-icon-badge,
    .timeline-item.right .timeline-icon-badge { left: 4px; right: auto; }
}

@media (max-width: 768px) {
    .timeline-header { margin-bottom: 50px; }
    .timeline-container { padding-left: 15px; }
    .timeline-center-line { left: 15px; }
    .timeline-item { padding-left: 45px; margin-bottom: 40px;}
    .timeline-icon-badge { width: 44px; height: 44px; top: 20px; }
    .timeline-icon-badge svg { width: 18px; height: 18px; }
    .timeline-item.left .timeline-icon-badge,
    .timeline-item.right .timeline-icon-badge { left: -7px; }
    .timeline-content { padding: 25px 20px; }
    .timeline-year { font-size: 2rem; }
    .timeline-content h4 { font-size: 1.2rem; }
}

/* =========================================================
   SHORT & CREATIVE ABOUT HERO CSS (DARK PREMIUM)
========================================================= */

.premium-about-hero {
    background: var(--dark-navy, #0A0F1F);
    padding: 140px 0 100px; /* Short Internal Page Hero */
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Background subtle glow effect */
.premium-about-hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, rgba(20, 184, 166, 0.05) 50%, rgba(10, 15, 31, 0) 100%);
    border-radius: 50%;
    z-index: 0;
}

.about-hero-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
    
    margin: 0 auto;
}

/* --- Left Text Content --- */
.hero-text-box {
    text-align: left; /* Strict Left Alignment */
    position: relative;
    z-index: 5;
}

.hero-tagline {
    display: inline-block;
    color: var(--accent-teal, #14B8A6);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 13px;
    margin-bottom: 20px;
    padding: 6px 18px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 50px;
}

.hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -1px;
    margin: 0px;
}

/* Defined Blue, Teal, Green Gradient Text */
.text-gradient {
    background: var(--gradients-linear, linear-gradient(135deg, #1E4ED8 0%, #14B8A6 55%, #22C55E 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0 0 35px;
    max-width: 580px;
    font-weight: 400;
}

/* Button spacing for flow */
.hero-btn-wrap {
    margin-top: 10px;
}

.main_btn_short {
    background: var(--accent-teal, #14B8A6);
    color: #000;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    border: none;
    transition: all 0.4s ease;
    cursor: pointer;
}

.main_btn_short:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(20, 184, 166, 0.3);
}

/* --- Right Side: Pure CSS Abstract illustration --- */
.hero-creative-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.css-illustration-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Abstract Overlapping Rings (Enterprise Structure) */
.illust-ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.5s ease;
    animation: pulseRing 5s infinite;
}

.ring-1 {
    width: 100%;
    height: 100%;
    border-color: rgba(30, 78, 216, 0.3); /* Blue tinted */
    animation-delay: 0s;
}

.ring-2 {
    width: 80%;
    height: 80%;
    border-color: rgba(20, 184, 166, 0.2); /* Teal tinted */
    animation-delay: 1s;
    transform: rotate(45deg);
}

.ring-3 {
    width: 60%;
    height: 60%;
    border-color: rgba(34, 197, 94, 0.1); /* Green tinted */
    animation-delay: 2s;
    transform: rotate(-45deg);
}

/* Center Talent Node (Gradient Glow) */
.illust-center-node {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gradients-linear, linear-gradient(135deg, #1E4ED8 0%, #14B8A6 55%, #22C55E 100%));
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

@keyframes pulseRing {
    0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.03) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
}

/* illustration hover effect */
.css-illustration-wrapper:hover .illust-center-node {
    transform: scale(1.1);
    box-shadow: 0 0 50px rgba(20, 184, 166, 0.8);
}

/* =========================================
   Responsive Design
========================================= */
@media (max-width: 991px) {
    .about-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .hero-title {
        font-size: 3.2rem;
    }
    .hero-creative-visual {
        padding-top: 30px;
    }
}

@media (max-width: 768px) {
    .premium-about-hero {
        padding: 100px 15px 60px;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-desc {
        font-size: 1rem;
    }
    .css-illustration-wrapper {
        width: 250px;
        height: 250px;
    }
    .illust-center-node {
        width: 55px;
        height: 55px;
    }
}

/* =========================================================
   TEAM DETAILED SECTION CSS (LIGHT THEME)
========================================================= */

.team-detailed-sec {
    background: #ffffff;
    padding: 100px 0;
    color: #051139;
}

.team-main-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.team-badge {
    display: inline-block;
    color: #14B8A6;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    padding: 6px 20px;
    background: rgba(20, 184, 166, 0.1);
    border-radius: 50px;
}

.section-subtitle {
    color: #64748b;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Member Row Styling */
.member-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 100px;
}

.member-row.reverse {
    flex-direction: row-reverse;
}

.member-row:last-child {
    margin-bottom: 0;
}

/* Image Side */
.member-image {
    flex: 0 0 400px;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.member-image img {
    width: 100%;
    /*height: 500px;*/
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.member-row:hover .member-image img {
    transform: scale(1.05);
}

/* Text Side */
.member-text {
    flex: 1;
}

.member-role {
    color: #14B8A6;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0px;
}

.member-name {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #051139;
    margin-top: 0px;
    margin-bottom: 0px;
}

.member-bio p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
    margin-top: 0px;
}

/* Social Icon (Optional) */
.member-social a {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #ffffff;
    color: #0A66C2; /* LinkedIn Blue */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */
@media (max-width: 991px) {
    .member-row, .member-row.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    .member-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 450px;
    }
    .member-image img {
        /*height: 400px;*/
    }
    .member-bio p {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .member-name {
        font-size: 2rem;
    }
    .team-detailed-sec {
        padding: 60px 15px;
    }
}

/* =========================================================
   CLEAN GLOBAL PRESENCE - HEADQUARTER TAG INSIDE CARD
========================================================= */

.global-presence-new {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    color: #051139;
}

/* Header Left Aligned */
.global-header-new {
    text-align: left; /* Strict Left Alignment */
    margin-bottom: 90px;
    max-width: 800px;
}

.global-badge-new {
    display: inline-block;
    color: #14b8a6;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 15px;
}

.global-title-new {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0px;
}

.text-gradient-new {
    background: linear-gradient(135deg, #1E4ED8 0%, #14B8A6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.global-subtitle-new {
    color: #64748b;
    font-size: 1.15rem;
    margin-top: 15px;
    font-weight: 400;
    line-height: 1.6;
}

/* Grid Structure */
.global-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 60px 30px; /* Increased top-bottom gap for floating flag */
    
}

/* Card Styling */
.location-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.card-inner-new {
    padding: 60px 35px 35px; /* Extra top padding for floating flag */
    height: 100%;
    position: relative;
}

/* Floating Flag Circle */
.flag-icon-new {
    width: 65px;
    height: 65px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -32.5px; /* Floating above the card */
    left: 35px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    z-index: 5;
}

.flag-icon-new img {
    width: 34px;
    height: auto;
}

/* Full Headquarters Tag INSIDE Card */
.hq-tag-inside {
    position: absolute;
    top: 25px;
    right: 35px;
    background: #051139;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover Effects (No Arrow) */
.location-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06);
    border-color: #1e4ed8;
}

.card-text-new h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #051139;
    margin-bottom: 15px;
}

.card-text-new p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .global-grid-new { padding: 0 15px; }
}

@media (max-width: 768px) {
    .global-title-new { font-size: 2.2rem; }
    .global-header-new { text-align: left; padding: 0 15px; }
    .card-inner-new { padding: 50px 25px 30px; }
    .flag-icon-new { width: 55px; height: 55px; top: -27.5px; left: 25px; }
    .hq-tag-inside { top: 15px; right: 25px; font-size: 9px; padding: 5px 10px; }
    .card-text-new h4 { font-size: 1.2rem; }
}

/* =========================================================
   QUOTE SECTION CSS (LIGHT THEME)
========================================================= */

.quote-section {
    padding: 120px 0;
    background: #f5f5f5; /* Clean white */
    position: relative;
    overflow: hidden;
}

/* Background Subtle Accent */
.quote-section::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
    top: -150px;
    right: -100px;
}

.quote-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 40px;
}

.quote-icon {
    margin-bottom: 30px;
    opacity: 0.8;
}

.quote-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: #051139;
    line-height: 1.4;
    font-style: italic;
    letter-spacing: -0.5px;
}

.text-gradient {
    background: linear-gradient(135deg, #1E4ED8 0%, #14B8A6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote-author {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.author-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #1E4ED8, #14B8A6);
    border-radius: 2px;
}

.author-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #64748B;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .quote-section {
        padding: 80px 20px;
    }
    .quote-text {
        font-size: 1.8rem;
    }
    .quote-icon svg {
        width: 40px;
        height: 40px;
    }
}

/* =========================================================
   NEW SECTION CLASSES (CORE STYLING)
========================================================= */

.appriffy-hero-core {
    padding: 140px 0 100px;
    /*background-color: #ffffff;*/
    position: relative;
    overflow: hidden;
}

/* Heading Styling */
.hero-main-heading {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 25px;
    min-height: 1.2em; /* Typed text jump rokne ke liye */
}

/* Original Paragraph Styling */
.hero-original-lead {
    font-size: 1.25rem;
    color: #ffffff;
    line-height: 1.7;
    max-width: 750px;
    margin-bottom: 40px;
    opacity: 0.85;
}

/* Buttons Styling */
.hero-btns-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.appriffy-btn-solid {
    background: #051139;
    color: #ffffff;
    border: none;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.appriffy-btn-solid:hover {
    background: #1e4ed8;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(5, 17, 57, 0.15);
}

.appriffy-btn-border {
    background: transparent;
    color: #051139;
    border: 2px solid #051139;
    padding: 13px 35px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.appriffy-btn-border:hover {
    background: #051139;
    color: #ffffff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-main-heading {
        font-size: 2.5rem;
    }
    .hero-original-lead {
        font-size: 1.1rem;
    }
    .hero-btns-group {
        flex-direction: column;
    }
    .appriffy-btn-solid, .appriffy-btn-border {
        width: 100%;
        text-align: center;
    }
}
    /* =========================================================
   DARK AI INDUSTRIES CSS
========================================================= */

.appriffy-dark-inds {
    padding: 100px 0;
    background-color: #050b1a; /* Deep Space Dark */
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Background Ornament */
.appriffy-dark-inds::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 78, 216, 0.1) 0%, transparent 70%);
    top: -200px;
    left: -200px;
}

.inds-main-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.inds-glow-text {
    background: linear-gradient(135deg, #14b8a6, #1e4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.inds-subtitle {
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 50px;
}

/* Glass Card Design */
.inds-glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 24px;
    text-align: left;
    height: 100%;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.inds-glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.07);
    border-color: #14b8a6;
}

.inds-card-num {
    font-size: 12px;
    font-weight: 800;
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.inds-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #f8fafc;
}

.inds-card-text {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.inds-link {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.inds-link:hover {
    color: #ffffff;
}

/* Card Glow Effect on Hover */
.inds-card-glow {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: 0.4s;
}

.inds-glass-card:hover .inds-card-glow {
    opacity: 1;
}

/* Neon Button */
.inds-btn-neon {
    background: transparent;
    border: 2px solid #14b8a6;
    color: #14b8a6;
    padding: 14px 35px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.inds-btn-neon:hover {
    background: #14b8a6;
    color: #050b1a;
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.4);
}

@media (max-width: 768px) {
    .inds-main-title { font-size: 2.2rem; }
}


/* =========================================================
   GCC FRAMEWORK SECTION CSS
========================================================= */

.gcc-framework-sec {
    padding: 100px 0;
    background: #f8fafc; /* Very light slate background */
    position: relative;
    overflow: hidden;
}

/* Header Styles */
.gcc-fw-header {
    margin-bottom: 70px;
}

.fw-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    margin-bottom: 15px;
}

.fw-title {
    font-size: 3rem;
    font-weight: 800;
    color: #051139;
    margin-bottom: 15px;
}

.text-gradient {
    background: linear-gradient(135deg, #1E4ED8 0%, #14B8A6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fw-desc {
    color: #64748b;
    font-size: 1.15rem;
    max-width: 650px;
    line-height: 1.6;
}

/* Process Wrapper & Connector Line */
.gcc-process-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.relative-z {
    position: relative;
    z-index: 2;
}

/* The Dashed Line connecting the steps */
.process-connector {
    position: absolute;
    top: 50px; /* Aligns with the center of the icons */
    left: 10%;
    right: 10%;
    height: 2px;
    background-image: linear-gradient(to right, #cbd5e1 50%, transparent 50%);
    background-size: 15px 100%;
    z-index: 1;
    opacity: 0.6;
}

/* Card Styling */
.gcc-step-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.gcc-step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(30, 78, 216, 0.08);
    border-color: #1e4ed8;
}

/* Top accent line on hover */
.gcc-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1E4ED8, #14B8A6);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.gcc-step-card:hover::before {
    transform: scaleX(1);
}

/* Icon Area */
.step-icon-area {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #1e4ed8;
    margin: 0 auto;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.gcc-step-card:hover .icon-circle {
    background: #1e4ed8;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(30, 78, 216, 0.3);
}

/* Step Number Badge */
.step-num {
    position: absolute;
    top: 0;
    right: 0;
    /*background: #14b8a6;*/
    color: #ffffff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    border-radius: 50%;
    /*border: 3px solid #ffffff;*/
    z-index: 3;
    transition: 0.4s ease;
}

.gcc-step-card:hover .step-num {
    background: #051139;
}

/* Text Styling */
.step-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #051139;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.gcc-step-card:hover .step-name {
    color: #1e4ed8;
}

.step-detail {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .fw-title { font-size: 2.5rem; }
    .process-connector { display: none; } /* Hide line on tablet/mobile */
}

@media (max-width: 768px) {
    .gcc-framework-sec { padding: 80px 15px; }
    .fw-title { font-size: 2.2rem; }
    .gcc-step-card { padding: 30px 20px; }
}

/* ==========================================================================
   GLOBAL RESPONSIVE MEDIA QUERIES (TABLETS & LAPTOPS) - MAX-WIDTH: 991px
========================================================================== */
@media (max-width: 991px) {
    
    /* 1. TIMELINE SECTION */
    .timeline-container { padding-left: 30px; }
    .timeline-center-line { left: 30px; transform: translateX(0); }
    .timeline-item { width: 100%; left: 0 !important; padding: 0 0 0 60px; text-align: left; margin-bottom: 50px; }
    .timeline-item.left .timeline-icon-badge, .timeline-item.right .timeline-icon-badge { left: 4px; right: auto; }

    /* 2. ABOUT HERO SECTION */
    .about-hero-sec { padding: 140px 0 80px; min-height: auto; }
    .about-hero-wrapper, .about-hero-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; }
    .hero-text-box { text-align: center; } /* Centers text if stacked */
    .hero-title, .hero-main-heading { font-size: 3.2rem; }
    .hero-creative-visual { padding-top: 30px; }

    /* 3. CORE TEAM (DETAILED) */
    .member-row, .member-row.reverse { flex-direction: column; gap: 40px; text-align: center; }
    .member-image { flex: 0 0 auto; width: 100%; max-width: 450px; margin: 0 auto; }
    .member-image img { 
        /*height: 400px;*/
        }
    .member-bio p { text-align: center; }

    /* 4. GLOBAL PRESENCE */
    .global-grid-new, .creative-grid { padding: 0 15px; }
    .global-title-new, .creative-title { font-size: 2.8rem; }

    /* 5. MAIN GCC HERO */
    .hero-main-title { font-size: 3rem; }
    .title-top { font-size: 2.8rem; }

    /* 6. GCC FRAMEWORK */
    .fw-title { font-size: 2.6rem; }
    .process-connector { display: none; } /* Line hide ho jayegi tablets par */
}


/* ==========================================================================
   GLOBAL RESPONSIVE MEDIA QUERIES (MOBILE DEVICES) - MAX-WIDTH: 768px
========================================================================== */
@media (max-width: 768px) {
    
    /* 1. TIMELINE SECTION */
    .timeline-header { margin-bottom: 50px; padding: 0 15px; }
    .timeline-container { padding-left: 15px; }
    .timeline-center-line { left: 15px; }
    .timeline-item { padding-left: 45px; margin-bottom: 40px; }
    .timeline-icon-badge { width: 44px; height: 44px; top: 20px; }
    .timeline-icon-badge svg { width: 18px; height: 18px; }
    .timeline-item.left .timeline-icon-badge, .timeline-item.right .timeline-icon-badge { left: -22px; }
    .timeline-content { padding: 25px 20px; }
    .timeline-year { font-size: 2rem; }
    .timeline-content h4 { font-size: 1.2rem; }

    /* 2. ABOUT HERO SECTION */
    .premium-about-hero, .about-short-hero { padding: 100px 15px 50px; }
    .hero-title, .hero-main-heading { font-size: 2.4rem; }
    .hero-desc, .hero-original-lead { font-size: 1.05rem; padding: 0 10px; margin-bottom: 30px; }
    .hero-btns-group, .hero-actions { flex-direction: column; gap: 15px; width: 100%; align-items: center; }
    .main_btn, .secondary_btn, .appriffy-btn-solid, .appriffy-btn-border { 
        display: block !important;
        width: fit-content;
        margin: 0 auto;
        text-align: center;
    }
    
    /* CSS Illustration Resize (If using creative hero) */
    .css-illustration-wrapper { width: 250px; height: 250px; }
    .illust-center-node { width: 55px; height: 55px; }

    /* 3. CORE TEAM */
    .team-detailed-sec, .core-team-sec { padding: 60px 15px; }
    .member-name { font-size: 2rem; }
    .team-main-header, .team-header { margin-bottom: 40px; padding: 0 10px; }

    /* 4. GLOBAL PRESENCE */
    .global-presence-new, .creative-global-presence { padding: 80px 15px 50px; }
    .global-header-new { text-align: left; padding: 0 10px; margin-bottom: 50px; }
    .global-title-new, .creative-title { font-size: 2.2rem; }
    .global-subtitle-new { font-size: 1rem; }
    .global-grid-new { padding: 0 10px; gap: 45px 15px; }
    
    /* Floating Flag Adjustment for Mobile */
    .card-inner-new { padding: 50px 25px 30px; }
    .flag-icon-new { width: 55px; height: 55px; top: -27.5px; left: 25px; }
    .flag-icon-new img { width: 28px; }
    .hq-tag-inside { top: 15px; right: 20px; font-size: 9px; padding: 5px 10px; }
    .card-text-new h4 { font-size: 1.2rem; }

    /* 5. QUOTE SECTION */
    .quote-section { padding: 80px 20px; }
    .quote-text { font-size: 1.6rem; }
    .quote-icon svg { width: 45px; height: 45px; }
    .author-name { font-size: 1rem; }

    /* 6. INTRO OVERLAY (LOGO) */
    .intro-logo-anim { width: 150px; } /* Smaller logo on mobile loading screen */

    /* 7. MAIN GCC HERO */
    .appriffy-hero-prime, .appriffy-hero-core { padding: 120px 15px 60px; text-align: center; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-main-title { font-size: 2.5rem; }
    .title-top { font-size: 2.2rem; }
    .hero-lead-text { font-size: 1rem; margin-bottom: 30px; }

    /* 8. INDUSTRIES SECTION (DARK) */
    .appriffy-dark-inds { padding: 70px 15px; }
    .inds-main-title { font-size: 2rem; }
    .inds-subtitle { font-size: 1rem; margin-bottom: 35px; }
    .inds-glass-card { padding: 30px 25px; }
    .inds-card-title { font-size: 1.25rem; }

    /* 9. GCC FRAMEWORK */
    .gcc-framework-sec { padding: 80px 15px; }
    .fw-title { font-size: 2.2rem; }
    .fw-desc { font-size: 1rem; }
    .gcc-step-card { padding: 30px 20px; }
    .step-icon-area { width: 80px; height: 80px; margin-bottom: 20px; }
    .icon-circle { width: 65px; height: 65px; font-size: 26px; }
    .step-num { width: 26px; height: 26px; font-size: 11px; }
    .step-name { font-size: 1.2rem; }
}

/* ==========================================================================
   EXTRA SMALL MOBILE DEVICES (OPTIONAL FIXES) - MAX-WIDTH: 480px
========================================================================== */
@media (max-width: 480px) {
    .timeline-year { font-size: 1.6rem; }
    .global-title-new, .fw-title, .hero-main-heading, .hero-title { font-size: 2rem; }
    .quote-text { font-size: 1.4rem; }
}

/* =========================================================
   DARK AI INDUSTRIES SECTION - BASE CSS
========================================================= */

.ai-dark-industries {
    padding: 100px 0;
    background-color: #060b19; /* Deep Tech Blue/Black */
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Background Ambient Glow */
.ai-dark-industries::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.15) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.ai-ind-main-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 40px;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

.text-neon-glow {
    background: linear-gradient(135deg, #14B8A6 0%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card Styling (Glassmorphism) */
.ai-ind-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 2;
}

.ai-ind-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(20, 184, 166, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(20, 184, 166, 0.05);
}

.ai-card-num {
    font-size: 14px;
    font-weight: 800;
    color: #14B8A6;
    background: rgba(20, 184, 166, 0.1);
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.ai-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.ai-card-text {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.ai-card-link {
    color: #14B8A6;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.ai-card-link i {
    transition: transform 0.3s;
}

.ai-card-link:hover {
    color: #ffffff;
}

.ai-card-link:hover i {
    transform: translateX(5px);
}

/* Background Pattern inside Card */
.ai-card-pattern {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 120px;
    opacity: 0.05;
    transition: 0.4s;
    z-index: -1;
    filter: invert(1); /* Makes the black png white */
}

.ai-ind-card:hover .ai-card-pattern {
    opacity: 0.15;
    transform: scale(1.1);
}

/* CTA Button */
.ai-btn-neon-fill {
    background: #14B8A6;
    color: #000000;
    border: none;
    padding: 16px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.ai-btn-neon-fill:hover {
    background: #ffffff;
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.5);
    transform: translateY(-3px);
}


/* =========================================================
   MOBILE RESPONSIVE CSS (TABLET & SMARTPHONE)
========================================================= */

/* Tablets & Small Laptops (Max-width: 991px) */
@media (max-width: 991px) {
    .ai-dark-industries {
        padding: 80px 0;
    }
    .ai-ind-main-title {
        font-size: 2.6rem;
    }
    .ai-ind-card {
        padding: 30px 20px;
    }
    .ai-card-title {
        font-size: 1.25rem;
    }
}

/* Mobile Devices (Max-width: 768px) */
@media (max-width: 768px) {
    .ai-dark-industries {
        padding: 60px 15px;
    }
    
    .ai-ind-main-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }

    .ai-ind-card {
        padding: 30px 25px;
        text-align: center !important; /* Forces center alignment on mobile */
    }

    .ai-card-num {
        margin-bottom: 20px;
    }

    .ai-card-title {
        font-size: 1.35rem;
    }

    .ai-card-text {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    /* Center the link on mobile */
    .ai-card-link {
        width: 100%;
        justify-content: center;
    }

    /* Pattern repositioning for mobile center layout */
    .ai-card-pattern {
        right: 50%;
        transform: translateX(50%);
        bottom: 0;
        opacity: 0.03;
    }

    .ai-ind-card:hover .ai-card-pattern {
        transform: translateX(50%) scale(1.1);
    }

    /* Full width button on mobile */
    .ai-btn-neon-fill {
        width: 100%;
        padding: 15px 20px;
        font-size: 14px;
        margin-top: 20px !important;
    }
}

/* Extra Small Phones (Max-width: 480px) */
@media (max-width: 480px) {
    .ai-ind-main-title {
        font-size: 1.8rem;
    }
    .ai-card-title {
        font-size: 1.2rem;
    }
}

/* =========================================================
   DATA SCIENCE CoE FRAMEWORK CSS (APPRIFFY THEME)
========================================================= */

.coe-framework-section {
    padding: 100px 0;
    background-color: #fcfdfe; /* Clean white/light background */
    position: relative;
}

/* Header Styling */
.coe-header {
    margin-bottom: 60px;
}

.coe-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(20, 184, 166, 0.1); /* Theme Teal Light */
    color: #14b8a6; /* Theme Teal */
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    margin-bottom: 15px;
}

.coe-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #051139; /* Theme Deep Blue */
    margin-bottom: 15px;
}

.coe-gradient-text {
    background: linear-gradient(135deg, #051139 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coe-subtitle {
    color: #64748b;
    font-size: 1.15rem;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Feature Cards Styling */
.coe-feature-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    position: relative;
    z-index: 1;
}

.coe-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(20, 184, 166, 0.08); /* Teal Shadow */
    border-color: #14b8a6; /* Theme Teal Border */
}

/* Animated SVG Icons Base Styling */
.coe-anim-icon {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    background: rgba(20, 184, 166, 0.05); /* Very light teal bg */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14b8a6; /* Theme Teal Icon */
    transition: 0.4s ease;
}

.coe-anim-icon svg {
    width: 32px;
    height: 32px;
}

/* Hover par icon circle ban jayega aur Deep Blue color aayega */
.coe-feature-card:hover .coe-anim-icon {
    background: #051139; /* Theme Deep Blue */
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(5, 17, 57, 0.2);
}

/* Card Content Typography */
.coe-card-content h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #051139; /* Theme Deep Blue */
    margin-bottom: 12px;
    transition: 0.3s;
}

.coe-feature-card:hover .coe-card-content h3 {
    color: #14b8a6; /* Hover par heading teal ho jayegi */
}

.coe-card-content p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}


/* =========================================================
   SVG ANIMATIONS (KEYFRAMES)
========================================================= */

.anim-pulse { animation: pulseNode 2s infinite alternate ease-in-out; }
.anim-fade-lines { animation: fadeLines 2s infinite alternate ease-in-out; }
@keyframes pulseNode { 0% { transform: scale(0.8); fill: currentColor; } 100% { transform: scale(1.3); fill: transparent; } }
@keyframes fadeLines { 0% { opacity: 0.3; } 100% { opacity: 1; } }

.anim-db-layer1 { animation: floatDb 3s infinite ease-in-out; }
.anim-db-layer2 { animation: floatDb 3s infinite ease-in-out 1.5s; }
@keyframes floatDb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); opacity: 0.7; } }

.anim-bar-1 { animation: growBar 2s infinite ease-in-out; stroke-dasharray: 10; stroke-dashoffset: 10; }
.anim-bar-2 { animation: growBar 2s infinite ease-in-out 0.3s; stroke-dasharray: 16; stroke-dashoffset: 16; }
.anim-bar-3 { animation: growBar 2s infinite ease-in-out 0.6s; stroke-dasharray: 6; stroke-dashoffset: 6; }
@keyframes growBar { 0% { stroke-dashoffset: 20; } 50%, 100% { stroke-dashoffset: 0; } }

.anim-check { stroke-dasharray: 15; stroke-dashoffset: 15; animation: drawCheck 2.5s infinite ease-in-out; }
@keyframes drawCheck { 0%, 20% { stroke-dashoffset: 15; } 50%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 15; } }


/* =========================================================
   MOBILE RESPONSIVE CSS
========================================================= */

@media (max-width: 991px) {
    .coe-framework-section { padding: 80px 0; }
    .coe-title { font-size: 2.5rem; }
    .coe-feature-card { padding: 30px 20px; gap: 20px; flex-direction: column; text-align: center; }
    .coe-anim-icon { margin: 0 auto; }
}

@media (max-width: 768px) {
    .coe-framework-section { padding: 60px 15px; }
    .coe-header { margin-bottom: 40px; }
    .coe-title { font-size: 2.2rem; }
    .coe-subtitle { font-size: 1rem; }
    .coe-feature-card { padding: 30px 20px; flex-direction: column; align-items: center; text-align: center; }
    .coe-anim-icon { width: 60px; height: 60px; margin-bottom: 10px; }
    .coe-card-content h3 { font-size: 1.25rem; }
    .coe-card-content p { font-size: 0.95rem; }
}

@media (max-width: 480px) {
    .coe-title { font-size: 1.8rem; }
}

/* =========================================================
   INFOGRAPHIC CARDS - ABOUT PAGE THEME
========================================================= */

:root {
    --brand-navy: #051139;
    --brand-blue: #2563eb;
    --brand-teal: #14b8a6;
    --brand-grad: linear-gradient(135deg, #2563eb, #14b8a6);
}

.gcc-infographic-sec {
    padding: 100px 0;
    background: #fdfdfe;
}

/* Infographic Card */
.info-card {
    background: #ffffff;
    border-radius: 30px 30px 5px 30px; /* Unique Infographic Shape */
    padding: 40px 30px;
    height: 100%;
    position: relative;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(5, 17, 57, 0.03);
}

.info-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(5, 17, 57, 0.1);
    border-color: var(--brand-blue);
}

/* Card Header (Icon & Number) */
.info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.info-number {
    font-size: 48px;
    font-weight: 900;
    color: rgba(5, 17, 57, 0.05); /* Ghost Number Effect */
    line-height: 1;
    transition: 0.4s;
}

.info-card:hover .info-number {
    color: rgba(20, 184, 166, 0.15);
}

.info-icon {
    width: 65px;
    height: 65px;
    background: #f8fafc;
    color: var(--dark-navy);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: 0.4s;
}

.info-card:hover .info-icon {
    background: var(--gradients-linear);
    color: #fff;
    transform: rotateY(180deg); /* Modern Flip Effect */
}

/* Card Body */
.info-body h4 {
    color: var(--dark-navy);
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.info-body p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Bottom Infographic Bar */
.info-footer-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 60px;
    transition: 0.4s ease;
}

.bg-blue { background: var(--brand-blue); }
.bg-teal { background: var(--brand-teal); }

.info-card:hover .info-footer-line {
    width: 100%;
    background: var(--gradients-linear);
}

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

@media (max-width: 991px) {
    .info-card {
        padding: 30px 25px;
        text-align: center;
    }
    .info-header {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .section-title { font-size: 2rem; }
    .info-card { margin-bottom: 20px; }
}

/* APPRIIFY ADVANTAGE CUSTOM STYLES */

.Appriffy_Advantage_sec.animated-dark {
    background-color: #051139; /* Deep Navy Base */
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    z-index: 1;
}

/* Background Animated Glows */
.glow-circle {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    opacity: 0.35;
    animation: moveGlow 15s infinite alternate;
}
.glow-circle.one { background: #2563eb; top: -10%; right: -5%; }
.glow-circle.two { background: #14b8a6; bottom: -10%; left: -5%; animation-delay: -5s; }

@keyframes moveGlow {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-80px, 60px); }
}

/* Typography & Gradients */
.text-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.timeline-capsule {
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-lift:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.adv-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.adv-label {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Icons */
.icon-low { color: #f87171; font-size: 1.4rem; }
.icon-loop { color: #14b8a6; font-size: 1.4rem; }

/* Right Visuals */
.advantage-visual-wrapper {
    position: relative;
    text-align: center;
}

.side-tech-img {
    max-width: 100%;
    filter: drop-shadow(0 0 30px rgba(37, 99, 235, 0.3));
}

.glass-morph {
    background: rgba(5, 17, 57, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 20px;
    position: absolute;
    bottom: 10%;
    left: 5%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

/* Pulse Animation */
.pulse-icon-box {
    position: relative;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid #14b8a6;
    animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Floating Animations */
.anim-float { animation: float 6s ease-in-out infinite; }
.anim-float-delayed { animation: float 6s ease-in-out infinite; animation-delay: 2s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Responsive */
@media (max-width: 991px) {
    .display-5 { font-size: 2.5rem; }
    .adv-val { font-size: 2rem; }
}

/* =========================================================
   BRIDGE THE GAP - CSS THEME
========================================================= */

:root {
    --brand-navy: #051139;
    --brand-blue: #2563eb;
    --brand-teal: #14b8a6;
    --brand-grad: linear-gradient(135deg, #2563eb, #14b8a6);
}

.bridge-gap-sec {
    background-color: #fcfdfe; /* Light grayish background */
    padding: 100px 0;
    overflow: hidden;
}

/* Header Elements */
.timeline-capsule {
    background: rgba(20, 184, 166, 0.1);
    color: var(--brand-teal);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.gradient-text {
    background: var(--gradients-linear);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title {
    color: var(--dark-navy);
    font-weight: 800;
    font-size: 2.8rem;
}

/* Infographic Card Design */
.bridge-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    padding: 40px 25px;
    border-radius: 24px;
    height: 100%;
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Icon Styling */
.bridge-icon-box {
    width: 70px;
    height: 70px;
    background: #f8fafc;
    color: var(--dark-navy);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    transition: all 0.4s ease;
    border: 1px solid #f1f5f9;
}

.bridge-card:hover .bridge-icon-box {
    background: var(--dark-navy);
    color: #ffffff;
    transform: rotateY(180deg) scale(1.1);
}

/* Content */
.bridge-card h5 {
    color: var(--dark-navy);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 15px;
    transition: 0.3s;
}

.bridge-card:hover h5 {
    color: var(--brand-teal);
}

.bridge-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Hover Effect - Subtle Glow Behind Card */
.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradients-linear);
    opacity: 0;
    border-radius: 24px;
    z-index: -1;
    transition: 0.4s ease;
    filter: blur(20px);
}

.bridge-card:hover {
    transform: translateY(-12px);
    border-color: transparent;
}

.bridge-card:hover .card-glow {
    opacity: 0.15; /* Only a subtle light-blue glow */
}

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

@media (max-width: 768px) {
    .section-title { font-size: 2.2rem; }
    .bridge-card { padding: 30px 20px; }
    .bridge-icon-box { width: 60px; height: 60px; font-size: 24px; }
}

/* =========================================================
   DATA SCIENCE COE - CSS STYLES & ANIMATIONS
========================================================= */

.appriffy-coe-section {
    background-color: #f8fafc;
    padding: 100px 0;
}

/* Header Styles */
.coe-badge {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coe-title {
    color: #051139;
    font-weight: 800;
    font-size: 2.8rem;
    margin-bottom: 15px;
}

.coe-gradient-text {
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coe-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    max-width: 700px;
    line-height: 1.6;
}

/* Card Design */
.coe-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    padding: 35px 30px;
    border-radius: 24px;
    height: 100%;
    display: flex;
    gap: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.coe-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(5, 17, 57, 0.08);
    border-color: #2563eb;
}

/* Icon Box */
.coe-icon-box {
    width: 65px;
    height: 65px;
    background: rgba(37, 99, 235, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
    padding: 14px;
}

.coe-card:hover .coe-icon-box {
    background: #051139;
    transform: rotate(-5deg) scale(1.05);
}

.coe-icon-box svg {
    width: 100%;
    height: 100%;
}

/* Content */
.coe-content h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #051139;
    margin-bottom: 12px;
    transition: 0.3s;
}

.coe-card:hover .coe-content h3 {
    color: #2563eb;
}

.coe-content p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* =========================================================
   BULLETPROOF SVG ANIMATIONS
========================================================= */

/* 1. AI Pulse */
.anim-coe-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: coePulseAnim 2s ease-in-out infinite;
}
@keyframes coePulseAnim {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

/* 2. Database Floating Layers */
.anim-coe-float-1 { animation: coeFloatAnim 2s ease-in-out infinite alternate; }
.anim-coe-float-2 { animation: coeFloatAnim 2s ease-in-out infinite alternate 1s; }
@keyframes coeFloatAnim {
    0% { transform: translateY(0); }
    100% { transform: translateY(3px); }
}

/* 3. Bar Chart (Fixed Transform Origin) */
.anim-coe-bar-1, .anim-coe-bar-2, .anim-coe-bar-3 {
    transform-box: fill-box;
    transform-origin: bottom;
}
.anim-coe-bar-1 { animation: coeBarAnim 1.5s ease-in-out infinite; }
.anim-coe-bar-2 { animation: coeBarAnim 1.5s ease-in-out infinite 0.3s; }
.anim-coe-bar-3 { animation: coeBarAnim 1.5s ease-in-out infinite 0.6s; }

@keyframes coeBarAnim {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
}

/* 4. Shield Checkmark Draw */
.anim-coe-check {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: coeCheckAnim 3s ease-in-out infinite;
}
@keyframes coeCheckAnim {
    0%, 15% { stroke-dashoffset: 20; }
    45%, 100% { stroke-dashoffset: 0; }
}

/* =========================================================
   MOBILE RESPONSIVE QUERIES
========================================================= */

@media (max-width: 991px) {
    .coe-title { font-size: 2.4rem; }
    .coe-card { padding: 30px 20px; gap: 20px; }
}

@media (max-width: 768px) {
    .appriffy-coe-section { padding: 70px 15px; }
    .coe-title { font-size: 2.2rem; }
    
    .coe-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .coe-icon-box { margin-bottom: 5px; }
}


/* =========================================================
   APPRIFFY MODERN HEADER CSS
========================================================= */

:root {
    --brand-navy: #051139;
    --brand-blue: #2563eb;
    --brand-teal: #14b8a6;
    --brand-grad: linear-gradient(135deg, #2563eb, #14b8a6);
}

/* --- 1. DEFAULT DESKTOP STATE (Transparent) --- */
.modern-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background: transparent;
    padding: 20px 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keep Logo and Toggle above the mobile full-screen menu */
.header-element {
    position: relative;
    z-index: 1060;
}

.brand-logo { height: 62px; transition: 0.3s ease; }
.logo-light { display: block; }
.logo-dark { display: none; }

/* Desktop Nav Links (White by default) */
@media (min-width: 992px) {
    .modern-header .nav-link {
        color: #ffffff !important;
        font-weight: 500;
        font-size: 1.05rem;
        padding: 8px 18px !important;
        border-radius: 50px; 
        transition: all 0.3s ease;
    }

    .modern-header .nav-link:hover,
    .modern-header .nav-link.active {
        background: rgba(255, 255, 255, 0.15);
    }
}

.modern-cta-btn {
    background: var(--gradients-linear);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

.modern-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    color: #fff;
}

/* --- 2. STICKY SCROLLED STATE (Desktop & Mobile) --- */
.modern-header.is-sticky {
    background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 25px rgba(5, 17, 57, 0.08);
    padding: 12px 0;
}

.modern-header.is-sticky .logo-light { display: none; }
.modern-header.is-sticky .logo-dark { display: block; }

@media (min-width: 992px) {
    .modern-header.is-sticky .nav-link {
        color: var(--dark-navy) !important;
    }
    .modern-header.is-sticky .nav-link:hover,
    .modern-header.is-sticky .nav-link.active {
        background: rgba(37, 99, 235, 0.08); 
        color: var(--brand-blue) !important;
    }
}


/* --- 3. MOBILE RESPONSIVE (FULL SCREEN MENU) --- */
@media (max-width: 991px) {
    
    /* Hamburger Styling */
    .modern-toggler { background: transparent; padding: 5px; cursor: pointer; }
    .hamburger-lines { width: 30px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; }
    .hamburger-lines .line { display: block; height: 2px; width: 100%; border-radius: 10px; background: #ffffff; transition: all 0.4s ease; }
    
    /* Dark lines if sticky */
    .modern-header.is-sticky .hamburger-lines .line { background: var(--dark-navy); }

    /* Full Screen Menu Container */
    .modern-header .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #ffffff;
        z-index: 1055; /* Underneath logo and button (1060) */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 80px; /* Space for header */
        
        /* Smooth Slide up/down effect */
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Bootstrap override to show menu smoothly as flexbox */
    .modern-header .navbar-collapse.show {
        display: flex !important;
        opacity: 1;
        transform: translateY(0);
    }
    /* Handles the animation frame when Bootstrap adds 'collapsing' */
    .modern-header .navbar-collapse.collapsing {
        display: flex !important;
        height: 100vh;
    }

    /* Mobile Nav Links */
    .modern-header .navbar-nav { width: 100%; margin-bottom: 20px; }
    
    .modern-header .nav-link {
        color: var(--dark-navy) !important;
        font-size: 1.8rem; /* Big Typography for mobile */
        font-weight: 700;
        padding: 15px !important;
        display: block;
    }

    .modern-header .nav-link:hover,
    .modern-header .nav-link.active {
        color: var(--brand-blue) !important;
    }

    .modern-cta-btn {
        width: 100%;
        max-width: 300px;
        padding: 16px;
        font-size: 1.1rem;
    }

    /* --- WHEN FULL SCREEN MENU IS OPEN (Handled by JS .menu-open class) --- */
    /* Force logo to dark because background is white */
    .modern-header.menu-open .logo-light { display: none !important; }
    .modern-header.menu-open .logo-dark { display: block !important; }
    
    /* Animate Hamburger to 'X' and force dark color */
    .modern-header.menu-open .hamburger-lines .line { background: var(--dark-navy) !important; }
    .modern-header.menu-open .line1 { transform: translateY(10px) rotate(45deg); }
    .modern-header.menu-open .line2 { opacity: 0; }
    .modern-header.menu-open .line3 { transform: translateY(-10px) rotate(-45deg); }
}



/* =========================================================
   APPRIFFY DARK HERO SECTION - CSS
========================================================= */

.appriffy-dark-hero {
    position: relative;
    padding: 180px 0 120px;
    background-color: #051139; /* Deep Navy Background */
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

/* --- ABSTRACT GLOWING BACKGROUND (Matching Your Image Gradient) --- */
.dark-glow-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.35;
    animation: darkBlobFloat 12s infinite alternate ease-in-out;
}

/* Left side gets the Blue from your button */
.blob-left { background: #2563eb; top: -20%; left: -10%; }
/* Right side gets the Teal/Cyan from your button */
.blob-right { background: #0cbaba; bottom: -20%; right: -10%; animation-delay: -6s; }

.dark-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}

@keyframes darkBlobFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, -50px) scale(1.1); }
}

/* --- TYPOGRAPHY & BADGES --- */
.hero-badge-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 25px;
}

.badge-dot-cyan {
    width: 8px;
    height: 8px;
    background: #0cbaba;
    border-radius: 50%;
    box-shadow: 0 0 12px #0cbaba;
}

.hero-display-title {
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

/* Text Gradient based on the uploaded image */
.text-gradient-image {
    background: linear-gradient(90deg, #2563eb 0%, #0cbaba 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-lead-text-dark {
    font-size: 1.2rem;
    color: #94a3b8; /* Light gray to stand out on dark background */
    line-height: 1.7;
    max-width: 700px;
    margin-bottom: 40px;
}

/* --- BUTTONS --- */
.hero-action-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* EXACT MATCH: Button from your uploaded image */
.btn-image-gradient {
    background: linear-gradient(90deg, #2563eb 0%, #0cbaba 100%);
    color: #ffffff;
    border: none;
    padding: 15px 38px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Soft glowing shadow matching the button style */
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}

.btn-image-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.5);
    color: #ffffff;
}

/* Glassmorphism Outline Button for Dark Theme */
.btn-dark-outline {
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-dark-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

.btn-dark-outline:hover .icon-shift {
    transform: translateX(5px);
}

.icon-shift { transition: 0.3s ease; }

/* --- CUSTOM SMOOTH FADE ANIMATIONS --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: customFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

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

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .appriffy-dark-hero { padding: 150px 0 80px; text-align: center; }
    .hero-display-title { font-size: 2.8rem; }
    .hero-lead-text-dark { font-size: 1.1rem; margin: 0 auto 30px; }
    .hero-badge-dark { margin: 0 auto 20px; }
    .hero-action-group { justify-content: center; }
}

@media (max-width: 576px) {
    .hero-display-title { font-size: 2.2rem; }
    .btn-image-gradient, .btn-dark-outline { width: 100%; text-align: center; }
}

/* =========================================================
   APPRIFFY ALTERNATING THEME - CSS
========================================================= */

:root {
    --brand-navy: #051139;
    --brand-blue: #2563eb;
    --brand-teal: #0cbaba;
    --grad-cyan: linear-gradient(90deg, #14A0C9 0%, #0CB8BA 100%);
    --bg-light: #f8fafc;
}

/* Base Utilities */
.text-navy { color: var(--dark-navy) !important; }
.text-cyan { color: var(--brand-teal) !important; }
.bg-light-gray { background-color: var(--bg-light); }
.bg-navy { background-color: var(--dark-navy); }
.section-padding { padding: 100px 0; }

.text-gradient-cyan {
    background: var(--grad-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Background Glow Blobs for Dark Sections */
.glow-blob-left { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); z-index: 0; opacity: 0.25; top: -10%; left: -10%; background: var(--brand-blue); }
.glow-blob-right { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); z-index: 0; opacity: 0.25; bottom: -10%; right: -10%; background: var(--brand-teal); }

/* --- 1. DARK HERO --- */
.data-hero-dark { background-color: var(--dark-navy, #0A0F1F); padding-top: 160px; padding-bottom: 100px; overflow: hidden; }
.hero-badge-glass { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 20px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: #fff; backdrop-filter: blur(10px); }
.badge-dot-cyan { width: 8px; height: 8px; background: var(--brand-teal); border-radius: 50%; box-shadow: 0 0 10px var(--brand-teal); }
.btn-cyan-gradient { background: var(--grad-cyan); color: #fff; border: none; padding: 14px 35px; border-radius: 50px; font-size: 1.1rem; font-weight: 700; transition: 0.3s; box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3); }
.btn-cyan-gradient:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5); color: #fff;}

/* --- 2. LIGHT COMPARE TABLE --- */
.timeline-capsule { background: rgba(12, 186, 186, 0.1); color: var(--brand-teal); padding: 6px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; display: inline-block; text-transform: uppercase; }
.modern-table-wrapper { background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(5, 17, 57, 0.04); padding: 30px; border: 1px solid #e2e8f0; }
.modern-compare-table th { font-size: 1.1rem; padding: 20px 15px; border-bottom: 2px solid #e2e8f0; color: var(--dark-navy); }
.modern-compare-table td { padding: 20px 15px; vertical-align: middle; color: #475569; border-bottom: 1px solid #f1f5f9; }
.highlight-col-header { background: rgba(37, 99, 235, 0.04); border-radius: 12px 12px 0 0; color: var(--grad-cyan) !important; font-weight: 800;}
.highlight-col { background: rgba(37, 99, 235, 0.04); font-weight: 600; color: var(--dark-navy) !important; }

/* --- 3. DARK CAPABILITIES (GLASS CARDS) --- */
.data-caps-dark { background-color: var(--dark-navy); overflow: hidden;}
.glass-coe-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); padding: 40px 30px; border-radius: 20px; height: 100%; transition: 0.4s ease; }
.glass-coe-card:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.06); border-color: var(--brand-teal); box-shadow: 0 20px 40px rgba(0,0,0,0.3);}
.glass-icon { margin-bottom: 20px; }

/* --- 4. LIGHT FRAMEWORK STEPS --- */
.framework-step-card { background: #fff; border-left: 3px solid #e2e8f0; padding: 20px 0 20px 25px; height: 100%; transition: 0.3s ease; }
.framework-step-card:hover { border-left-color: var(--brand-teal); }
.step-num { font-size: 3rem; font-weight: 900; line-height: 1; margin: 0; }
.quote-box-light { background: #fff; border: 1px solid #e2e8f0; padding: 30px 40px; border-radius: 15px; border-left: 5px solid var(--brand-teal); box-shadow: 0 5px 20px rgba(0,0,0,0.02);}

/* --- 5. DARK IMPACT SECTION --- */
.impact-glass-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 45px; border-radius: 24px; backdrop-filter: blur(10px); }

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .text-start { text-align: left !important; }
    .display-4 { font-size: 2.8rem; }
    .modern-table-wrapper { overflow-x: auto; padding: 15px; }
    .framework-step-card { border-left: none; border-top: 3px solid #e2e8f0; padding: 25px 0 0 0; }
    .framework-step-card:hover { border-top-color: var(--brand-teal); }
    .impact-glass-card .border-start { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.2) !important; padding-top: 15px; margin-top: 5px;}
}

.appriffy-compare-section{

padding:80px 0;
background:#ffffff;

}

.compare-heading h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1a1a1a;
}


/* heading */

.compare-tag{

background:#e0f2fe;
color:#0284c7;
padding:6px 14px;
border-radius:20px;
font-size:13px;
display:inline-block;
margin-bottom:10px;

}

.gradient-text{

background:linear-gradient(90deg,#06b6d4,#2563eb);
-webkit-background-clip:text;
color:transparent;
font-size:2.8rem;
font-weight:700;
margin-bottom:20px;

}


/* ===== DESKTOP TABLE ===== */

.appriffy-table{

width:100%;
border-collapse:collapse;
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.05);

}

.appriffy-table th{

background:#f1f5f9;
padding:22px;
text-align:left;

}

.appriffy-table td{

padding:22px;
border-bottom:1px solid #eee;

}

.feature{

font-weight:600;

}

.appriffy-head{

background:#e0f7ff;
color:#0891b2;

}

.appriffy-col{

background:#f0fbff;
font-weight:500;

}


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

.compare-card{

background:#fff;
padding:20px;
border-radius:12px;
margin-bottom:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);

}

.compare-card h3{

margin-bottom:15px;
font-size:18px;

}

.compare-row{

display:flex;
gap:15px;

}

.old{

flex:1;
background:#f8fafc;
padding:15px;
border-radius:8px;

}

.new{

flex:1;
background:#ecfeff;
padding:15px;
border-radius:8px;

}

.old h4,
.new h4{

font-size:14px;
margin-bottom:6px;

}

.new{

border-left:4px solid #06b6d4;

}


/* visibility */

.desktop-compare{

display:block;
margin-top:30px;

}

.mobile-compare{

display:none;

}

@media(max-width:768px){

.desktop-compare{

display:none;

}

.mobile-compare{

display:block;

}

}

/* =========================================================
   APPRIFFY "OUR TEAM" PAGE CSS
========================================================= */

:root {
    --brand-navy: #051139;
    --brand-blue: #2563eb;
    --brand-teal: #0cbaba;
    --grad-cyan: linear-gradient(90deg, #2563eb 0%, #0cbaba 100%);
}

/* Base Fixes & Utilities */
html, body { overflow-x: hidden !important; }
.section-padding { padding: 100px 0; }
.text-navy { color: var(--brand-navy) !important; }
.text-cyan { color: var(--brand-teal) !important; }

.text-gradient-cyan {
    background: var(--grad-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ==================== 1. DARK VISION SECTION ==================== */
.appriffy-vision-dark {
    background-color: var(--dark-navy, #0A0F1F);
    padding-top: 150px; /* Thoda zyada padding taaki header ke neeche theek aaye */
    padding-bottom: 120px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glow-blob-left { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); z-index: 0; opacity: 0.25; top: -10%; left: -10%; background: var(--brand-blue); }
.glow-blob-right { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); z-index: 0; opacity: 0.2; bottom: -10%; right: -10%; background: var(--brand-teal); }

.hero-badge-glass {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.badge-dot-cyan { width: 8px; height: 8px; background: var(--brand-teal); border-radius: 50%; box-shadow: 0 0 10px var(--brand-teal); }

.vision-statement {
    font-size: 2.6rem;
    letter-spacing: -0.5px;
    color: #f8fafc;
}

/* ==================== 2. LIGHT TEAM SECTION ==================== */
.appriffy-team-light {
    background: linear-gradient(180deg, #e3fdfd 0%, #f8fafc 100%);
}

.team-capsule {
    background: rgba(12, 186, 186, 0.15);
    color: var(--brand-teal);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
}

.border-light-cyan { border-bottom: 1px solid rgba(12, 186, 186, 0.2) !important; }

.team-member-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 15px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(5, 17, 57, 0.03);
    height: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(5, 17, 57, 0.1);
    border-color: rgba(12, 186, 186, 0.3);
}

.team-img-wrap {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 4px;
    background: #f1f5f9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    transition: 0.3s ease;
}

.team-member-card:hover .team-img-wrap {
    background: var(--grad-cyan); /* Gradient border on hover */
}

.team-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #ffffff;
}

.team-member-card .team-name { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.team-member-card .team-role { font-size: 0.9rem; color: #475569; font-weight: 500; line-height: 1.4; margin: 0; }

/* ==================== 3. MOBILE RESPONSIVE ==================== */
@media (max-width: 991px) {
    .section-padding { padding: 70px 0 !important; }
    .appriffy-vision-dark { padding-top: 120px; padding-bottom: 80px; }
    .vision-statement { font-size: 2rem; }
    
    .team-member-card { padding: 25px 15px 20px; }
    .team-img-wrap { width: 100px; height: 100px; }
}

@media (max-width: 576px) {
    .vision-statement { font-size: 1.6rem; line-height: 1.5 !important; }
    .appriffy-vision-dark i.fa-3x { font-size: 2em; margin-bottom: 15px !important; }
    
    .team-member-card .team-name { font-size: 1.1rem; }
    .team-member-card .team-role { font-size: 0.85rem; }
}