/* Mobile: h2 and related headings at 30px */
@media (max-width: 768px) {

    h2,
    .section-header h2,
    .cs-intro-heading,
    .about-goals-heading,
    .why-choose-header h2,
    .faq-header h2,
    .mission-content h2,
    .values-header h2,
    .team-header h2,
    .industry-header .header-left h2 {
        font-size: 30px !important;
    }
}

/* Ensure all h2 and related headings use 44px on desktop, not 48px */
@media (min-width: 1025px) {

    h2,
    .section-header h2,
    .cs-intro-heading,
    .about-goals-heading,
    .why-choose-header h2,
    .faq-header h2,
    .mission-content h2,
    .values-header h2,
    .team-header h2,
    .industry-header .header-left h2 {
        font-size: 44px !important;
    }
}

/* About Us page: set about heading h2 to 32px on desktop */
@media (min-width: 1025px) {

    body.page-template-about-us .about-section h2,
    body.page-template-about-us .about-main-title,
    body.page-id-about-us .about-section h2,
    body.page-id-about-us .about-main-title {
        font-size: 32px !important;
    }
}

/* Mobile typography standardization across the theme */
@media (max-width: 768px) {
    h1 {
        font-size: 32px !important;
    }

    h1 .subtext,
    .hero-top-text .hero-description,
    .about-hero p,
    .it-solutions-description {
        font-size: 16px !important;
    }

    h2 {
        font-size: 26px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    p,
    .section-header p,
    .solutions-header p,
    .solution-card p,
    .about-description,
    .web-dev-intro-text {
        font-size: 16px !important;
    }

    /* FAQ questions */
    .faq-question,
    .faq-header h2,
    .faq-list-question {
        font-size: 20px !important;
    }

    /* FAQ answers */
    .faq-answer p,
    .faq-list-answer p,
    .faq-inner-content p,
    .faq-item .faq-content p {
        font-size: 18px !important;
    }
}

/* Responsive fix for home page stats-row section */
@media (max-width: 768px) {
    .stats-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .stats-row .stat-card {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }
}

/* FINAL OVERRIDE: Home stats-row mobile responsiveness */
@media (max-width: 768px) {

    body.home .stats-row,
    .front-page .stats-row,
    .stats-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        max-width: 100vw !important;
    }

    body.home .stats-row .stat-card,
    .front-page .stats-row .stat-card,
    .stats-row .stat-card {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* Service pages: set <a> tags to 36px font size in Digital Solutions, IT Solutions, AI Automation, Cloud & Infra, Branding & Creative Studio */
@media (min-width: 1025px) {

    body.page-template-digitalsolutions .business-tech-section .tech-accordion-col a,
    body.page-template-it-solutions .business-tech-section .tech-accordion-col a,
    body.page-template-aiautomation .business-tech-section .tech-accordion-col a,
    body.page-template-cloudbussinessinfra .business-tech-section .tech-accordion-col a,
    body.page-template-brandingandcreativestudio .business-tech-section .tech-accordion-col a,
    body.page-template-digitalsolutions .business-tech-section .section-header a,
    body.page-template-it-solutions .business-tech-section .section-header a,
    body.page-template-aiautomation .business-tech-section .section-header a,
    body.page-template-cloudbussinessinfra .business-tech-section .section-header a,
    body.page-template-brandingandcreativestudio .business-tech-section .section-header a {
        font-size: 36px !important;
    }
}

/* Service pages: set <a> tags to 36px font size (Digital Solutions, IT Solutions, AI Automation, Cloud & Infra, Branding & Creative Studio) */
@media (min-width: 1025px) {

    .page-id-digitalsolutions a,
    .page-id-it-solutions a,
    .page-id-aiautomation a,
    .page-id-cloudbussinessinfra a,
    .page-id-brandingandcreativestudio a {
        font-size: 36px !important;
    }
}

/* Digital Solutions page: set h2 in .business-tech-section .section-header to 48px on desktop */
@media (min-width: 1025px) {
    .business-tech-section .section-header h2 {
        font-size: 44px !important;
    }
}

/*
Theme Name: Purple Rose
Theme URI: https://www.gingertechnologies.in/
Description: Child theme based on Astra
Author: Adarsh
Author URI: https://yourwebsite.com/
Template: astra
Version: 1.0.0
Text Domain: purple-rose
*/

/* ================================================================
   ???  PURPLE ROSE � MASTER DESIGN TOKENS
   -------------------------------------------------------------
   ONE PLACE TO EDIT. Changes here cascade to the ENTIRE site.

   SECTIONS:
     1. Brand Colors & Gradients
     2. Typography � Font Weights
     3. Typography � Font Sizes (Desktop)
     4. Typography � Font Sizes (Mobile)
     5. Typography � Line Heights
     6. Spacing & Layout
     7. Service Intro Heading
     8. Section Headings (h2 / h3)
     9. FAQ Section
    10. Navigation & Header
    11. Buttons & CTAs
    12. Cards & Sections
   ================================================================ */

:root {

    /* ---------------------------------------------------------
       1. BRAND COLORS & GRADIENTS
       --------------------------------------------------------- */
    --color-brand-pink: #E8409A;
    --color-brand-purple: #5E1A6B;
    --color-brand-pink-alt: #D24D96;
    --color-brand-dark: #011218;
    --color-text-body: #334155;
    --color-text-heading: #111111;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-white: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-white: #ffffff;

    --gradient-brand: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    --gradient-brand-alt: linear-gradient(90deg, #e6007e 0%, #7f0c81 100%);
    --gradient-purple-text: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);

    /* ---------------------------------------------------------
       2. FONT WEIGHTS
       Change a weight here ? it updates everywhere on the site.
       --------------------------------------------------------- */
    --fw-thin: 300;
    /* thin / light text                   */
    --fw-regular: 400;
    /* body text, headings (plain)         */
    --fw-medium: 500;
    /* nav links, labels, sub-headings      */
    --fw-semibold: 600;
    /* purple/gradient accent text          */
    --fw-bold: 700;
    /* strong emphasis                      */
    --fw-extrabold: 800;
    /* hero h1                              */
    --fw-black: 900;
    /* reserved / display use              */

    /* ---------------------------------------------------------
       3. FONT SIZES (Desktop)
       --------------------------------------------------------- */
    --fs-hero: clamp(36px, 6vw, 84px);
    /* page hero h1          */
    --fs-display: clamp(28px, 4.5vw, 64px);
    /* display/feature h2    */
    --fs-h1: 56px;
    --fs-h2: 48px;
    /* section h2 � 48px everywhere */
    --fs-h3: 28px;
    --fs-h4: 22px;
    --fs-h5: 18px;
    --fs-body: 16px;
    /* base paragraph        */
    --fs-body-large: 17px;
    /* intro paragraph       */
    --fs-small: 14px;
    --fs-label: 13px;
    /* badges / category tag */
    --fs-nav: 15px;
    /* header nav links      */
    --fs-btn: 16px;
    /* CTA buttons           */
    --fs-faq-question: 20px;
    /* FAQ question text     */
    --fs-faq-answer: 18px;
    /* FAQ answer text       */
    --fs-card-title: 22px;
    /* industry/service card */

    /* Service intro section heading */
    --sih-font-size-desktop: 48px;

    /* ---------------------------------------------------------
       4. FONT SIZES (Mobile  = 768px)
       --------------------------------------------------------- */
    --fs-h1-mobile: 32px;
    --fs-h2-mobile: 30px;
    --fs-h2-section-mobile: 30px;
    /* partners-container h2    */
    --fs-h3-mobile: 20px;
    --fs-body-mobile: 16px;
    --fs-faq-q-mobile: 20px;
    --fs-faq-a-mobile: 16px;
    --sih-font-size-mobile: 30px;
    /* service intro mobile     */

    /* ---------------------------------------------------------
       5. LINE HEIGHTS
       --------------------------------------------------------- */
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;
    --lh-loose: 1.9;
    --lh-heading: 1.25;
    /* default for h2 headings  */
    --lh-body: 1.6;
    /* body / paragraph default */

    /* ---------------------------------------------------------
       6. SPACING & LAYOUT
       --------------------------------------------------------- */
    --section-pad-desktop: 120px;
    --section-pad-tablet: 80px;
    --section-pad-mobile: 60px;
    --container-max: 1200px;
    --container-pad: 40px;
    --gap-cards: 30px;
    --border-radius-card: 24px;
    --border-radius-btn: 30px;

    /* ---------------------------------------------------------
       7. SERVICE INTRO HEADING (all service inner pages)
       --------------------------------------------------------- */
    --sih-font-weight: var(--fw-regular);
    /* plain text � 400  */
    --sih-line-height: var(--lh-snug);
    --sih-color: var(--color-text-heading);
    --sih-margin-bottom: 30px;
    --sih-accent-weight: var(--fw-semibold);
    /* gradient part � 600 */
    --sih-gradient: var(--gradient-brand);

    /* ---------------------------------------------------------
       8. SECTION HEADINGS (h2 / h3 inside sections)
       --------------------------------------------------------- */
    --heading-weight: var(--fw-regular);
    /* plain h2 text � 400       */
    --heading-gradient-weight: var(--fw-semibold);
    /* .purple-text span � 600   */
    --heading-color: var(--color-text-heading);

    /* ---------------------------------------------------------
       9. FAQ SECTION
       --------------------------------------------------------- */
    --faq-question-size: var(--fs-faq-question);
    --faq-question-weight: var(--fw-medium);
    --faq-answer-size: var(--fs-faq-answer);
    --faq-answer-weight: var(--fw-regular);

    /* ---------------------------------------------------------
       10. NAVIGATION & HEADER
       --------------------------------------------------------- */
    --nav-font-size: var(--fs-nav);
    --nav-font-weight: var(--fw-medium);
    --nav-color: var(--color-white);
    --nav-color-hover: #e44d93;
    --header-bg: var(--color-brand-dark);
    --mega-menu-top: 78px;
    --mega-menu-pad-top: 70px;
    --mega-menu-pad-bottom: 12px;

    /* ---------------------------------------------------------
       11. BUTTONS & CTAs
       --------------------------------------------------------- */
    --btn-gradient: var(--gradient-brand);
    --btn-font-size: var(--fs-btn);
    --btn-font-weight: var(--fw-medium);
    --btn-border-radius: var(--border-radius-btn);
    --btn-color: var(--color-white);
    --global-btn-gradient: var(--gradient-brand);

    /* ---------------------------------------------------------
       12. CARDS & SECTIONS
       --------------------------------------------------------- */
    --card-title-size: var(--fs-card-title);
    --card-title-weight: var(--fw-bold);
    --card-text-size: var(--fs-body);
    --card-text-weight: var(--fw-regular);
    --card-border-radius: var(--border-radius-card);
}

/* ================================================================
   APPLYING TOKENS GLOBALLY
   All selectors below wire to the variables above.
   ================================================================ */

/* --- Body & base text --- */
body {
    line-height: var(--lh-body);
    color: var(--color-text-body);
}

/* --- All headings font-weight (important to override scattered rules) --- */
h1 {
    font-weight: var(--fw-extrabold) !important;
}

/* 48px desktop, 28px mobile */
h2 {
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-regular) !important;
}

/* 400 */
h3 {
    font-weight: var(--fw-regular) !important;
}

/* 400 */
h4 {
    font-weight: var(--fw-regular) !important;
}

/* 400 */
h5 {
    font-weight: var(--fw-medium) !important;
}

/* 500 */
h6 {
    font-weight: var(--fw-medium) !important;
}

/* 500 */

/* --- Purple text gradient (all h1/h2 .purple-text spans) --- */
h2 .purple-text,
h1 .purple-text,
h3 .purple-text {
    background: var(--gradient-purple-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    font-weight: var(--heading-gradient-weight) !important;
    /* 600 */
}

/* --- Service intro h2 (all service inner pages) --- */
.web-dev-intro-wrapper h2 {
    font-size: var(--sih-font-size-desktop);
    font-weight: var(--sih-font-weight) !important;
    line-height: var(--sih-line-height);
    color: var(--sih-color);
    margin-bottom: var(--sih-margin-bottom);
    -webkit-text-fill-color: var(--sih-color);
}

.web-dev-intro-wrapper h2 .purple-text b,
.web-dev-intro-wrapper h2 .purple-text {
    font-weight: var(--sih-accent-weight) !important;
    background: var(--sih-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline;
}

/* --- FAQ typography --- */
.faq-question h4,
.faq-list-question,
.faq-question {
    font-size: var(--faq-question-size) !important;
    font-weight: var(--faq-question-weight) !important;
}

.faq-answer p,
.faq-list-answer p,
.faq-inner-content p,
.faq-item .faq-content p {
    font-size: var(--faq-answer-size) !important;
    font-weight: var(--faq-answer-weight) !important;
}

/* --- Section body text --- */
p,
.web-dev-intro-text {
    font-size: var(--fs-body-large);
    font-weight: var(--fw-regular);
}

/* --- Nav links --- */
.main-navigation ul li a,
#services-menu-toggle {
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
}

/* --- Mobile overrides via tokens --- */
@media (max-width: 768px) {
    h1 {
        font-size: var(--fs-h1-mobile) !important;
    }

    h2 {
        font-size: var(--fs-h2-mobile) !important;
    }

    h3 {
        font-size: var(--fs-h3-mobile) !important;
    }

    .partners-container h2 {
        font-size: var(--fs-h2-section-mobile) !important;
    }

    .web-dev-intro-wrapper h2 {
        font-size: var(--sih-font-size-mobile) !important;
    }

    p,
    .web-dev-intro-text {
        font-size: var(--fs-body-mobile) !important;
    }

    .faq-question,
    .faq-list-question {
        font-size: var(--fs-faq-q-mobile) !important;
    }

    .faq-answer p,
    .faq-list-answer p {
        font-size: var(--fs-faq-a-mobile) !important;
    }
}

/* ================================================================
   END MASTER DESIGN TOKENS
   ================================================================ */

/* --- Link Underline Removal & Color Change (Home, About Us, Service Pages) --- */
/* We exclude buttons and explore links to keep their original colors */
body.home .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.card-explore):not(.explore-link):not(.blog-learn-more),
body.front-page .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.card-explore):not(.explore-link):not(.blog-learn-more),
body.page-template-about-us .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-digitalsolutions .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-it-solutions .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-aiautomation .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-cloudbussinessinfra .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-brandingandcreativestudio .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-web-development .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-mobiledev .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-customweb .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-ecommerce .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-performancemarket .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-growth .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-communication .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-domainhosting .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-bussinessemailproduction .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-websitesecurity .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-case-studies .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-blogs .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-insights .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-careers .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-faq .site-content a:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more) {
    text-decoration: none !important;
    color: #D24D96 !important;
}

body.home .site-content a:hover:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.front-page .site-content a:hover:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more),
body.page-template-about-us .site-content a:hover:not([class*="btn"]):not([class*="button"]):not([class*="explore"]):not(.blog-learn-more) {
    color: #E8409A !important;
    text-decoration: none !important;
}


/* Your custom CSS starts below */

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Manrope', sans-serif;
}

body {
    line-height: 1.6;
    color: #334155;
}

.purple-text {
    color: #D24D96;
}

h2 .purple-text,
h1 .purple-text {
    background: var(--gradient-purple-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    font-weight: var(--heading-gradient-weight) !important;
    /* 600 */
}

/* Responsive base */
html {
    overflow-x: hidden;
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES - ALL DEFINED HERE
   --------------------------------------------------------------- */
:root {
    /* Mega menu sizing constants */
    --mega-menu-top: 78px;
    --mega-menu-pad-top: 70px;
    --mega-menu-pad-bottom: 12px;

    /* Global button gradient */
    --global-btn-gradient: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);

    /* Display headings - Type Scale */
    --fs-hero: clamp(36px, 6vw, 84px);
    --fs-display: clamp(28px, 4.5vw, 64px);
    --fs-h1: 56px;
    --fs-h2: 44px;
    --fs-h3: 28px;

    /* Desktop heading and paragraph font sizes */
    /* Remove conflicting h2 mobile font-size and enforce 24px for all h2 and related selectors */
    @media (max-width: 768px) {

        /* h2 in .partners-container: 30px, all others: 30px */
        .partners-container h2 {
            font-size: 30px !important;
        }

        h2,
        .section-header h2,
        .cs-intro-heading,
        .about-goals-heading,
        .why-choose-header h2,
        .faq-header h2,
        .mission-content h2,
        .values-header h2,
        .team-header h2,
        .industry-header .header-left h2 {
            font-size: 30px !important;
        }

        h3 {
            font-size: 20px !important;
        }

        p,
        .section-header p,
        .solutions-header p,
        .solution-card p,
        .about-description,
        .web-dev-intro-text {
            font-size: 16px !important;
        }

        /* FAQ questions */
        .faq-question,
        .faq-list-question {
            font-size: 20px !important;
        }

        /* FAQ answers */
        .faq-answer p,
        .faq-list-answer p,
        .faq-inner-content p,
        .faq-item .faq-content p {
            font-size: 16px !important;
        }
    }

    /* Line heights */
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;
    --lh-loose: 1.9;
}

img {
    max-width: 100%;
    height: auto;
}

/* Global Container Centering */
.ast-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    /* Harmonized side spacing */
    width: 100%;
}

@media (max-width: 1024px) {
    .ast-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 768px) {
    .ast-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .ast-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* --- Header: Layout & Containers --- */
#custom-header.site-header .ast-container {
    max-width: 100% !important;
}

#custom-header.site-header {
    position: absolute;

    left: 0;
    width: 100%;
    padding: 2px 0;
    background: transparent;
    z-index: 12000;
    /* Higher than mega menu */
    font-family: 'Manrope', sans-serif;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#custom-header.is-sticky {
    position: absolute;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

body.mega-menu-open #custom-header.site-header {
    position: fixed;
    top: 0;
    background: transparent !important;
    padding: 00px 0;
}

body.mega-menu-open #custom-header.site-header::before,
body.mobile-menu-open #custom-header.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #010B0E !important;
    z-index: 11500;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.custom-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0;
    width: 100%;
    position: relative;
}

.site-logo {
    position: relative;
    z-index: 12001;
}

.site-logo img {
    max-width: 150px;
    height: auto;
    display: block;
    transition: max-width 0.3s ease;
    margin-top: 10px;
}

.header-nav-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 12001;
}

/* --- Navigation Links --- */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
}

.main-navigation ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
    z-index: 12001;
}

#custom-header.is-sticky .main-navigation ul li a {
    color: #011218;
}

#custom-header.is-sticky .main-menu-toggle,
#custom-header.is-sticky .mobile-menu-toggle {
    color: #011218 !important;
}

@media (max-width: 768px) {
    #custom-header.is-sticky .main-navigation ul li a {
        color: #ffffff;
    }
}

.main-navigation ul li a:hover,
#services-menu-toggle:hover {
    color: #e44d93 !important;
}

/* Reset button styles for services toggle (now a <button> not <a>) */
#services-menu-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #ffffff;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: none;
}

.services-nav-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 12001;
    font-weight: 500 !important;
}

.main-menu-toggle {
    background-color: transparent !important;
    background-image: none !important;
    border: none;
    cursor: pointer;
    color: #ffffff !important;
    font-size: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease, background-color 0.3s ease;
    padding: 0;
    z-index: 13000;
}

.main-menu-toggle:hover i,
.main-menu-toggle:focus i,
.main-menu-toggle:active i {
    background: linear-gradient(135deg, #e6007e 0%, #7f0c81 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

#custom-header.is-sticky .main-menu-toggle {
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
}

.main-menu-toggle.is-active {
    transform: rotate(180deg);
}

.main-menu-toggle.is-active i {
    color: #ffffff !important;
    /* Always white when menu is open */
}

/* Scroll Lock */
body.mega-menu-open,
body.mobile-menu-open {
    overflow: hidden !important;
    height: 100vh !important;
}

/* --- CTA Button --- */
.lets-talk-btn {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff !important;
    padding: 5px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.lets-talk-btn:hover {
    color: #000000 !important;
}

.btn-arrow {
    font-size: 22px;
    line-height: normal;
}

/* --- Mobile Menu Toggle --- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ffffff;
    z-index: 12001;
    padding: 0;
}

#custom-header.is-sticky .mobile-menu-toggle {
    color: #011218;
}

@media (max-width: 768px) {
    #custom-header.is-sticky .mobile-menu-toggle {
        color: #ffffff;
    }
}

.mobile-menu-toggle {
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-menu-toggle .toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
}

#custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(2) {
    opacity: 0;
}

#custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Mega Menu (Desktop) --- */
.mega-menu-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    background: #011218;
    z-index: 11000;
    overflow: hidden;
    display: none;
    padding: calc(var(--mega-menu-top) + var(--mega-menu-pad-top)) 0 var(--mega-menu-pad-bottom) 0;
    border-bottom: 2px solid rgba(228, 77, 147, 0.1);
}

.mega-menu-container.is-open {
    display: flex;
    flex-direction: column;
    animation: fadeInMega 0.3s ease-out;
}

@keyframes fadeInMega {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.dropdown-video-bg {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    z-index: -1;
    opacity: 0.6;
    pointer-events: none;
}

.mega-menu-inner {
    display: flex;
    gap: 48px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px;
    height: calc(100vh - (var(--mega-menu-top) + var(--mega-menu-pad-top) + var(--mega-menu-pad-bottom)));
    flex: 1 1 auto;
}

.mega-menu-footer {
    position: relative;
    margin-top: auto;
    padding: 12px 0 6px;
}

.mega-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    max-width: 1300px;
    margin: 0 auto 24px;
}

.mega-menu-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1300px;
    padding: 0 40px;
}

.mega-menu-footer-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

.mega-menu-footer-title span {
    font-weight: 400;
}

.mega-menu-footer-title .accent {
    color: #D24D96;
    font-weight: 700;
}

.mega-menu-footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.mega-menu-footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.mega-menu-footer-link:hover {
    color: #ffffff;
}

.mega-menu-info h2 {
    color: #fff;
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.mega-menu-info h2 .highlight {
    color: #ffffff;
}

.mega-menu-info p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.mega-menu-subitems {
    flex: 1;
}

.mega-menu-close {
    position: fixed;
    top: 90px;
    right: 40px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11001;
}

/* --- Responsive Styles --- */
@media (max-width: 1024px) {
    .main-navigation ul {
        gap: 20px;
    }

    .mega-menu-inner {
        gap: 30px;
    }

    .mega-menu-info {
        display: none;
    }

    /* On tablet, also keep Services accordion collapsed by default ? same as mobile */
    .mega-menu-container {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease !important;
    }

    .mega-menu-container.mobile-services-open {
        max-height: 2000px !important;
    }
}

/* Blog page title */
.blog h2 a,
.blog .entry-title a,
.archive h2 a,
.archive .entry-title a {
    color: #000 !important;
}

.blog-card-content {
    padding: 0 !important;
}

/* -- MOBILE HEADER (= 768px) -- */
@media (max-width: 768px) {

    /* Header bar: always fixed, always dark */
    #custom-header.site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(1, 18, 24, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 0 !important;
        z-index: 12000 !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
    }

    #custom-header.is-sticky {
        background: #011218 !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
    }

    /* Keep header bar always solid when mobile menu or mega menu open */
    body.mobile-menu-open #custom-header.site-header,
    body.mega-menu-open #custom-header.site-header {
        background: #011218 !important;
    }

    /* Header bar row: logo | cta | hamburger */
    .custom-header-section {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 0 !important;
        min-height: 64px !important;
    }

    /* Logo */
    .site-logo {
        order: 1;
        flex-shrink: 0;
    }

    .site-logo img {
        max-width: 120px !important;
        margin-top: 0 !important;
        display: block;
    }

    /* CTA button */
    .header-cta {
        order: 2;
        margin-left: auto;
        margin-right: 12px;
    }

    .lets-talk-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 30px !important;
    }

    .lets-talk-btn .btn-arrow {
        display: none;
    }

    /* Hamburger */
    .mobile-menu-toggle {
        display: flex !important;
        order: 3;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 12002;
        color: #ffffff;
    }

    .mobile-menu-toggle .toggle-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    #custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    #custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* -- SLIDING MOBILE DRAWER -- */
    .header-nav-wrap {
        display: block !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 64px) !important;
        background: #011218 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        z-index: 11500 !important;
        padding: 0 !important;
        /* Hidden state */
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.35s !important;
    }

    #custom-header.header-nav-open .header-nav-wrap {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* -- MOBILE NAV LIST -- */
    .main-navigation {
        padding: 0 60px;
    }

    .main-navigation ul {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Hide desktop Services toggle (chevron button) in mobile */
    #main-menu-toggle {
        display: none !important;
    }

    /* Regular nav items */
    .main-navigation ul li a,
    #services-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        background: transparent !important;
        cursor: pointer;
    }

    #services-menu-toggle {
        border: none !important;
        font-family: inherit !important;
        letter-spacing: inherit !important;
    }

    #services-menu-toggle::after {
        content: '\f078';
        font-family: 'FontAwesome', 'Font Awesome 4', sans-serif;
        font-size: 12px;
        opacity: 0.5;
        transition: transform 0.3s ease;
    }

    .services-nav-open #services-menu-toggle::after {
        transform: rotate(180deg);
    }

    /* -- SERVICES ACCORDION (replaces fullscreen mega menu) -- */
    .mega-menu-container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        display: block !important;
        padding: 0 !important;
        border: none !important;
        z-index: auto !important;
        transition: max-height 0.4s ease !important;
    }

    .mega-menu-container.mobile-services-open {
        max-height: 2000px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Remove fullscreen background image on mobile */
    .mega-menu-container .dropdown-video-bg {
        display: none !important;
    }

    .mega-menu-inner {
        flex-direction: column !important;
        padding: 0 0 10px 0 !important;
        gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
    }

    /* Hide info panel on mobile */
    .mega-menu-info {
        display: none !important;
    }

    /* Services categories list */
    .mega-menu-categories {
        width: 100% !important;
        flex: none !important;
        gap: 2px !important;
        padding-top: 6px !important;
    }

    .category-item {
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        margin-bottom: 2px !important;
    }

    .category-item.mobile-active {
        color: #e44d93 !important;
        background: rgba(228, 77, 147, 0.07) !important;
        border-color: rgba(228, 77, 147, 0.2) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Sub-items dropdown */
    .subitem-group {
        background: rgba(228, 77, 147, 0.03) !important;
        padding: 10px 14px 14px !important;
        margin-bottom: 2px !important;
        border: 1px solid rgba(228, 77, 147, 0.12) !important;
        border-top: none !important;
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

    .subitem-group ul {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .subitem-group ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .subitem-group ul li:last-child {
        border-bottom: none;
    }

    .subitem-group ul li a {
        display: block !important;
        padding: 10px 0 !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: none !important;
    }

    /* Hide sub-item groups by default on mobile (JS controls) */
    .mega-menu-subitems {
        display: none !important;
    }

    /* Mega menu footer: contact info strip */
    .mega-menu-footer {
        margin-top: 0 !important;
        padding: 16px 20px !important;
        background: rgba(255, 255, 255, 0.03);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mega-menu-footer-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .mega-menu-footer-title {
        font-size: 16px !important;
    }

    .mega-menu-footer-right {
        align-items: flex-start !important;
        gap: 6px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .mega-menu-footer-link {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        text-decoration: none !important;
        margin-right: 16px;
    }

    .mega-menu-close {
        display: none !important;
    }

    /* Body scroll lock */
    body.mobile-menu-open {
        overflow: hidden !important;
    }
}

/* -- SMALL PHONES (= 480px) -- */
@media (max-width: 480px) {
    .site-logo img {
        max-width: 105px !important;
    }

    .header-cta {
        margin-right: 8px;
    }

    .lets-talk-btn {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }

    .custom-header-section {
        min-height: 58px !important;
    }

    .header-nav-wrap {
        top: 88px !important;
        height: calc(100vh - 58px) !important;
    }
}

/* -- LARGE SCREENS (= 1400px) -- */
@media (min-width: 1400px) {
    .custom-header-section {
        margin: 0 auto;
        padding: 0 40px;
    }

    .main-navigation ul {
        gap: 28px;
    }

    .site-logo img {
        max-width: 165px;
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .header-nav-wrap {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        justify-content: center;
    }
}

/* --- Misc Reset --- */
body.mega-menu-open {
    overflow: hidden;
}

.site-content {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0 !important;
}

/* Offset fixed header on mobile */
@media (max-width: 768px) {
    .site-content {
        padding-top: 64px !important;
    }
}

@media (max-width: 480px) {
    .site-content {
        padding-top: 58px !important;
    }
}

.site-main,
.site-content,
#content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.elementor-section:first-child,
section:first-child {
    margin-top: 0;
}


.mega-menu-info {
    flex: 0 0 30%;
}

.mega-menu-info h2 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 25px 0;
}

.mega-menu-info h2 .highlight {
    color: #e44d93;
    font-weight: 400;
}

.mega-menu-info p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
}

.mega-menu-categories {
    flex: 0 0 35%;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.category-item span {
    font-size: 18px;
    font-weight: 500;
}

.category-item i {
    font-size: 14px;
    color: #ffffff;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.category-item:hover,
.category-item.active {
    color: #e44d93;
    border-bottom-color: rgba(228, 77, 147, 0.4);
}

.category-item:hover i,
.category-item.active i {
    opacity: 1;
    color: #e44d93;
    transform: translateX(5px);
}

.mega-menu-subitems {
    flex: 1 1 0;
}

.subitem-group {
    display: none;
    animation: fadeInMenu 0.4s ease-out;
}

.subitem-group.active {
    display: block;
}

.subitem-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex !important;
    flex-direction: column !important;
}

.subitem-group ul li {
    margin-bottom: 10px;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.subitem-group ul li a {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    line-height: 1.3;
}

.subitem-group ul li a:hover {
    color: #e44d93 !important;
}

.subitem-group ul li .sub-meta {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    margin-top: 5px;
    display: block;
    line-height: 1.5;
    max-width: 380px;
}

@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Video Background Styling (Shared with Mega Menu) */
.dropdown-video-bg {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 0px);
    object-fit: cover;
    pointer-events: none;
}

.main-navigation ul li ul.sub-menu li a:hover {
    background-color: rgba(228, 77, 147, 0.1);
    color: #e44d93 !important;
}

.homepage-hero {
    background-color: #020617;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 60px;
    z-index: 1;
}

/* --- New Logo Wall Section --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* [clients-section removed ? see canonical block] */

.clients-section .partners-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    padding: 0 40px;
}

.clients-section .scene {
    position: relative;
    width: 100%;
    max-width: 1300px;
    height: 420px;
    flex-shrink: 0;
    overflow: visible;
}

/* Logo card base */
.logo-card {
    position: absolute;
    background: #ffffff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-card img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-card:hover {
    transform: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.logo-card:hover img {
    transform: none;
}

/* Pyramid positions ? matching Figma/Image 2 exactly
   Col 1: left=0      ? Samsung       (row 2, middle)
   Col 2: left=250    ? Wycon (top), Abusidra (bottom)
   Col 3: left=500    ? Al-Khor (top), Alfardan (mid), City Exchange (bottom)
   Col 4: left=750    ? Harvey Nichols (top), Jumbo Souq (bottom)
   Col 5: left=1000   ? Naseem        (row 2, middle)
*/
.card-airbnb {
    /* Samsung ? col 1 middle */
    width: 210px;
    height: 110px;
    top: 150px;
    left: 0px;
}

.card-google {
    /* Wycon ? col 2 top */
    width: 210px;
    height: 105px;
    top: 70px;
    left: 250px;
}

.card-bms {
    /* Abusidra ? col 2 bottom */
    width: 210px;
    height: 105px;
    top: 230px;
    left: 250px;
}

.card-microsoft {
    /* Al-Khor ? col 3 top */
    width: 210px;
    height: 105px;
    top: 0px;
    left: 500px;
}

.card-fedex {
    /* Alfardan ? col 3 middle */
    width: 210px;
    height: 105px;
    top: 150px;
    left: 500px;
}

.card-walmart {
    /* City Exchange ? col 3 bottom */
    width: 210px;
    height: 105px;
    top: 300px;
    left: 500px;
}

.card-oyo {
    /* Harvey Nichols ? col 4 top */
    width: 210px;
    height: 105px;
    top: 70px;
    left: 750px;
}

.card-ola {
    /* Jumbo Souq ? col 4 bottom */
    width: 210px;
    height: 105px;
    top: 230px;
    left: 750px;
}

.card-amazon {
    /* Naseem ? col 5 middle */
    width: 210px;
    height: 110px;
    top: 150px;
    left: 1000px;
}

.g-green {
    color: #34A853;
}

.logo-bms {
    font-size: 13px;
    font-weight: 700;
}

.bms-book {
    color: #333;
}

.bms-my {
    color: #fff;
    background: #e8173b;
    padding: 1px 4px;
    border-radius: 3px;
}

.bms-show {
    color: #333;
}

.logo-microsoft {
    gap: 8px;
}

.ms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 18px;
    height: 18px;
}

.ms-sq1 {
    background: #F25022;
}

.ms-sq2 {
    background: #7FBA00;
}

.ms-sq3 {
    background: #00A4EF;
}

.ms-sq4 {
    background: #FFB900;
}

.ms-name {
    font-size: 15px;
    font-weight: 400;
    color: #666;
    letter-spacing: -0.3px;
}

.logo-fedex {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.fedex-fed {
    color: #4D148C;
}

.fedex-ex {
    color: #FF6200;
}

.logo-walmart {
    gap: 5px;
}

.walmart-name {
    font-size: 18px;
    font-weight: 600;
    color: #0071CE;
}

.walmart-spark {
    color: #FFC220;
    font-size: 22px;
}

.logo-oyo {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -2px;
}

.oyo-o1,
.oyo-y,
.oyo-o2 {
    color: #EE2E24;
}

.logo-ola {
    gap: 8px;
}

.ola-dot-outer {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ola-dot-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFD700;
}

.ola-name {
    font-size: 20px;
    font-weight: 800;
    color: #1c1c1c;
    letter-spacing: -1px;
}

.logo-amazon {
    flex-direction: column;
    gap: 2px;
}

.amazon-name {
    font-size: 20px;
    font-weight: 700;
    color: #232F3E;
    letter-spacing: -0.5px;
}

.amazon-arrow {
    color: #FF9900;
    font-size: 14px;
}

@media (max-width: 1200px) {
    .clients-section .partners-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .clients-section .scene {
        margin: 0 auto;
        transform: scale(0.85);
    }
}

@media (max-width: 768px) {
    .clients-section {
        padding: 80px 0;
    }

    .clients-section .scene {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        transform: none;
    }

    .logo-card {
        position: static !important;
        transform: none !important;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-top-text {
    max-width: 900px;
    margin-bottom: 60px;
    margin-top: 40px;
}

.hero-top-text h1 {
    font-family: 'Manrope', sans-serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.05;
    margin-bottom: 40px;
    letter-spacing: -2px;
    color: #ffffff;
}

.hero-top-text h1 span.thin {
    font-weight: 300;
}

.hero-top-text .hero-description {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .homepage-hero {
        padding: 160px 0 60px;
        /* Restore mobile visibility */
    }

    .hero-top-text h1 {
        font-size: 38px;
        letter-spacing: -1.5px;
        line-height: 1.1;
    }
}

/* --- Device Visibility Toggles --- */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

/* --- Mobile-Only Marquee Animation --- */
.scene-mobile {
    width: 100%;
    margin-top: 40px;
}

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scrollLogos 30s linear infinite;
    gap: 25px;
}

.mobile-logo-card {
    flex-shrink: 0;
    width: 180px;
    height: 110px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Contain zoom */
}

.mobile-logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.mobile-logo-card:hover img {
    transform: scale(1.2);
}

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }

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

@media (max-width: 480px) {
    .marquee-track {
        animation-duration: 20s;
    }
}

.hero-bottom-area {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    align-items: center;
    text-align: left;
}

/* Card Column */
.trusted-partner-text {
    max-width: 320px;
}

.trusted-partner-text h2 {
    font-size: 36px !important;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 30px;
}

.trusted-partner-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.6;
}

.it-services-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    padding: 10px 10px 10px 50px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.card-left h5 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-title-icon {
    width: 24px;
    height: 24px;
    color: #d64f8c;
}

.card-left p {
    color: rgb(255, 255, 255) !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: 220px;
}

.card-right {
    height: 100%;
}

.card-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
    display: block;
}

/* Responsive Redesign */
@media (max-width: 1200px) {
    .hero-top-text h1 {
        font-size: 54px;
    }

    .hero-bottom-area {
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .homepage-hero {
        padding: 120px 0 60px;
    }

    .hero-top-text h1 {
        font-size: 54px !important;
        letter-spacing: -1.5px;
    }

    .hero-bottom-area {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
        max-width: 800px;
    }

    .trusted-partner-text {
        max-width: 100%;
        margin: 0 auto;
    }

    .trusted-partner-text h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .it-services-card {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .homepage-hero {
        padding: 100px 0 50px;
    }

    .hero-top-text h1 {
        font-size: 42px;
        letter-spacing: -1px;
        margin-bottom: 25px;
    }

    .hero-top-text .hero-description {
        font-size: 15px;
    }

    .it-services-card {
        grid-template-columns: 1fr;
        padding: 40px;
        text-align: center;
    }

    .card-left h5 {
        justify-content: center;
        font-size: 20px;
    }

    .card-left p {
        max-width: 100%;
        margin: 0 auto;
    }

    .card-right {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .hero-top-text h1 {
        font-size: 32px;
        letter-spacing: -0.5px;
    }

    .hero-top-text .hero-description {
        font-size: 14px;
        line-height: 1.5;
    }

    .trusted-partner-text h2 {
        font-size: 22px;
        line-height: 1.2;
    }

    .it-services-card {
        padding: 30px 20px;
    }
}


/* Partners Carousel Styling */
.partners-section {
    padding: 40px 0 60px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    position: relative;
    z-index: 5;
    width: 100%;
}

.partners-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: inherit !important;
}

@media (max-width: 480px) {
    .partners-container {
        padding: 0 16px;
    }
}

.partners-title {
    text-align: center;
    color: #64748b;
    font-size: 18px;
    margin-bottom: 60px;
    letter-spacing: 2px;
    display: block;
}

.partners-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.partners-carousel::before,
.partners-carousel::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 200px;
    z-index: 2;
    pointer-events: none;
}

.partners-carousel::before {
    left: 0;
    top: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.partners-carousel::after {
    right: 0;
    top: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.scroll-track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: scroll 20s linear infinite;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    flex-shrink: 0;
}

.partner-logo img {
    max-width: 180px;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.7s ease;
}

.partners-section .partner-logo img {
    height: 120px;
    width: auto;
    max-width: none;
    max-height: none;
}

.partner-logo:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

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

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

/* Responsive adjustment for carousel */
@media (max-width: 768px) {
    @keyframes scrollMobile {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-180px * 13));
        }
    }

    .partners-section {
        padding: 40px 0;
    }

    .scroll-track {
        width: calc(180px * 26) !important;
        animation: scrollMobile 25s linear infinite !important;
    }

    .partner-logo {
        width: 180px !important;
        padding: 0 10px !important;
    }

    .partner-logo img {
        width: auto !important;
        max-width: 180px !important;
        max-height: 110px !important;
        object-fit: contain !important;
        transform: scale(1.7) !important;
    }

    .partner-logo:hover img,
    .partner-logo:active img {
        filter: grayscale(0%) opacity(1) !important;
    }
}

/* Solutions Section Styling */
.solutions-section {
    padding: 80px 0 0;
    background: #ffffff;
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

.solutions-section .partners-container {
    max-width: 1200px;
    padding: 0 40px;
    align-items: stretch;
    width: 100%;
}

.solutions-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 60px;
}

.solutions-badge {
    display: inline-block;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px !important;
    padding: 8px 22px;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    background: #ffffff;
}

.solutions-header h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    color: #011218;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    line-height: 1.0;
}

/* Two-line heading: line 1 dark, line 2 pink gradient */
.solutions-main-heading {
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 400 !important;
    color: #011218 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 24px !important;
    -webkit-text-fill-color: #011218 !important;
}

.solutions-gradient-line {
    display: block;
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%);
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 600;
}

.solutions-header h2 .purple-text {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.solutions-header p {
    font-size: 18px;
    color: #475569;
    /* Slightly softer gray */
    line-height: 1.8;
    margin: 0 auto 10px;
    max-width: 800px;
    /* Better wrap for readability */
}

.explore-more-btn {
    display: inline-block;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    padding: 10px 45px;
    border-radius: 50px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px;
}

.explore-more-btn:hover {
    color: #000000;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
    position: relative;
}

.solutions-grid .solution-card {
    min-height: 340px;
}

.solutions-grid .solution-card {
    grid-column: span 2;
}

.solutions-grid .solution-card:nth-child(4) {
    grid-column: 2 / 4;
    width: 100%;
}

.solutions-grid .solution-card:nth-child(5) {
    grid-column: 4 / 6;
    width: 100%;
}

.solution-card {
    background: #ffffff;
    border: 1.5px solid transparent;
    border-radius: 24px;
    padding: 48px 32px 40px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-width: 0;
    cursor: pointer;
}

/* Default: top-half pink border via ::before mask */
.solution-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid #8b84884f;
    border-radius: 24px;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    transition: opacity 0.3s ease;
}

/* Hover: full pink border ? hide the masked ::before, show full border on element */
.solution-card:hover {
    border-color: #D24D96 !important;
}

.solution-card:hover::before {
    opacity: 0;
}

.card-icon-box {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.solution-card:hover .card-icon-box {
    transform: scale(1.05);
}

.solution-icon {
    width: 60px;
    height: 60px !important;
    object-fit: contain;
}

.solution-card h4 {
    font-size: 22px;
    font-weight: 600;
    color: #011218;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

.solution-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.75;
    margin-bottom: 32px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.card-explore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #D24D96;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.card-explore:hover {
    gap: 10px;
    color: #8C3A86;
}

.section-spacer {
    height: 0;
    /* Height controlled by responsive blocks below */
    background: #ffffff;
    width: 100%;
    display: none;
}

/* Responsive adjustment for solutions grid */
@media (max-width: 1200px) {
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solutions-grid .solution-card:nth-child(4) {
        grid-column: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .solutions-grid .solution-card:nth-child(5) {
        grid-column: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .solutions-header h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    .solutions-header p {
        font-size: 16px;
    }

    /* Mobile solutions grid carousel handled in the comprehensive block below */

    .solutions-section {
        padding: 60px 0 0;
    }
}

@media (max-width: 480px) {
    .solutions-header h2 {
        font-size: 28px;
    }

    .about-sub-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
}

/* About Us Section Styling */
.about-section {
    padding: 80px 0 80px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Video overlay removed as requested */

.about-section .partners-container {
    position: relative;
    z-index: 2;
    bottom: 0;
}

.about-grid {
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: center;
    width: 100%;
}

.about-left {
    flex: 1.2;
    min-width: 0;
}

.about-right {
    flex: 1;
    min-width: 0;
}

.about-label {
    color: #D24D96;
    font-weight: 700;
    text-transform: capitalize;
    /* Matches image style */
    display: block;
    margin-bottom: 25px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.about-hero .about-label {
    color: #ffffff !important;
}

.about-section .about-label {
    color: #D24D96 !important;
}

.about-main-title {
    font-size: 64px;
    font-weight: 700;
    /* Slightly thinner than 800 */
    color: #011218;
    line-height: 1.15;
    margin-bottom: 50px;
    letter-spacing: -1.5px;
}

.about-main-title .purple-text {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    color: transparent;
    padding-bottom: 13px;
}

.stats-row {
    display: flex;
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.2);
    /* Much cleaner glass look */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 35px 20px;
    text-align: center;
    flex: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Tight gap as per image */
    margin-bottom: 5px;
    font-weight: 500 !important;
}

.stat-number,
.stat-number .count,
.stat-number .suffix {
    display: inline-block;
    font-size: 54px;
    /* Larger as seen in image */
    font-weight: 500 !important;
    /* Thinner font as per image */
    color: #011218;
    margin: 0;
    line-height: 1;
}

.stat-suffix,
.suffix {
    font-size: 38px;
    font-weight: 500 !important;
    color: #D24D96;
    line-height: 1;
    margin-top: -5px;
    /* Adjust vertical alignment for plus icon */
}

.stat-label {
    font-size: 14px !important;
    color: #64748b;
    margin: 12px 0 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-sub-title {
    font-size: 32px;
    font-weight: 700;
    color: #011218;
    margin-bottom: 30px;
    line-height: 1.3;
}

.about-description {
    font-size: 17px;
    color: #2c2d30;
    line-height: 1.8;
    margin-bottom: 40px;
}

.our-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%);
    color: #ffffff;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px;
}

.our-story-btn:hover {
    color: #000000;
}

/* Responsive adjustment for About section */
@media (max-width: 1200px) {
    .about-grid {
        flex-direction: column;
        gap: 60px;
    }

    .about-left,
    .about-right {
        flex: unset;
        width: 100%;
    }

    .about-section {
        padding: 100px 0;
    }

    .about-main-title {
        font-size: 52px;
    }
}

@media (max-width: 768px) {
    .about-main-title {
        font-size: 40px;
    }

    /* stats-row stays as row ? handled by inline style */
    .about-section {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .about-main-title {
        font-size: 32px;
    }

    .about-sub-title {
        font-size: 26px;
    }

    .about-description {
        font-size: 15px;
    }

    .stat-number {
        font-size: 38px;
    }
}

/* Insights Section Styling (Bento Grid) */
.insights-section {
    padding: 80px 0 100px;
    background: #ffffff;
}

.insights-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.5fr 1fr;
    grid-template-rows: 320px 320px;
    gap: 30px;
    width: 100%;
    margin-top: 60px;
}

.insight-box {
    background: #f8fafc;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Box 1: Abstract image (Col 1, Row 1) */
.box-1 {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
}

.box-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Box 2: Styled Stat Card (Col 1, Row 2) */
.box-2 {
    grid-column: 1;
    grid-row: 2;
    background: #e6e8eb;
    padding: 30px;
    justify-content: space-between;
}

.stat-main h3 {
    font-size: 52px;
    font-weight: 800;
    color: #011218;
    margin: 10px 0 0;
    letter-spacing: -1px;
}

.stat-main h3 span {
    color: #D24D96;
    font-size: 32px;
}

.stat-main p {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    margin-top: 5px;
}

.stat-footer {
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.stat-footer p {
    font-size: 13px;
    margin: 0;
    color: #011218;
    font-weight: 500;
    line-height: 1.4;
}

.mini-learn-more {
    display: inline-block;
    background: #D24D96;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
}

/* Box 3: Woman Pointing (Col 2, Rows 1-2) */
.box-3 {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Common Overlay Styles for Boxes 3, 5, 6 */
.box-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.insight-box:hover .box-bg-image {
    transform: scale(1.05);
}

.box-content-overlay {
    position: relative;
    z-index: 2;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgb(140 58 134) 0%, rgba(0, 0, 0, 0) 40%);
}

.box-content-overlay h4 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    margin: 20px 0;
    line-height: 1.2;
}

/* Box 4: Large Landscape Text (Cols 3-4, Row 1) */
.box-4 {
    grid-column: 3 / span 2;
    grid-row: 1;
    background: #f5f5f5 !important;
    padding: 45px 50px 35px !important;
    justify-content: flex-start !important;
    position: relative;
    display: flex;
    flex-direction: column;
}

.box-4 .tips-badge {
    position: absolute;
    top: 10px !important;
    right: 30px !important;
    margin: 0 !important;
}

.box-4 h3 {
    font-size: 34px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 0 10px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    max-width: 90% !important;
}

.box-4 p {
    font-size: 16px !important;
    color: #555555 !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    max-width: 85% !important;
}

.purple-pill-btn {
    display: inline-block;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: color 0.3s ease;
}

.purple-pill-btn:hover {
    color: #000000;
}

/* Box 5: Magenta Gradient Box (Col 3, Row 2) */
.box-5 {
    grid-column: 3;
    grid-row: 2;
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%);
    padding: 40px;
    justify-content: space-between;
}

.box-5 h3 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin: 14px 20px 20px;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* White Pill Button (used in Box 3 and Box 5) */
.white-pill-btn {
    display: inline-block;
    background: #ffffff !important;
    color: #D24D96;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: color 0.3s ease;
}

.white-pill-btn:hover {
    color: #000000;
}

/* Box 6: Coder Workspace (Col 4, Row 2) */
.box-6 {
    grid-column: 4;
    grid-row: 2;
}

.box-6 .box-bg-image {
    background-position: left center;
}

/* Badges */
.badge {
    padding: 4px 15px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    width: fit-content;
    margin-top: 1px;
}


.tips-badge {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    color: #ffffff;
}

.white-badge {
    background: #ffffff;
    color: #D24D96;
}

/* Responsive bento grid */
/* Tablet: 1024px and below */
@media (max-width: 1024px) {
    .insights-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 24px;
    }

    .box-1 {
        grid-column: 1;
        grid-row: 1;
        height: 250px;
    }

    .box-2 {
        grid-column: 1;
        grid-row: 2;
    }

    .box-3 {
        grid-column: 2 / span 2;
        grid-row: 1 / span 2;
        height: auto;
        min-height: 520px;
    }

    .box-4 {
        grid-column: 1 / span 3;
        grid-row: 3;
        padding: 40px;
    }

    .box-4 h3 {
        font-size: 32px;
    }

    .box-5,
    .box-6 {
        grid-column: auto;
        grid-row: auto;
    }

    .box-5 {
        grid-column: 1;
        grid-row: 4;
        height: auto;
        min-height: 300px;
    }

    .box-6 {
        grid-column: 2 / span 2;
        grid-row: 4;
        height: auto;
        min-height: 300px;
    }
}

/* Medium devices: 768px and below */
@media (max-width: 768px) {
    .insights-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        margin-top: 40px;
    }

    .box-1 {
        grid-column: 1;
        grid-row: 1;
        height: 220px;
    }

    .box-2 {
        grid-column: 2;
        grid-row: 1;
        height: auto;
        min-height: 220px;
    }

    .box-3 {
        grid-column: 1 / span 2;
        grid-row: 2;
        height: auto;
        min-height: 380px;
    }

    .box-4 {
        grid-column: 1 / span 2;
        grid-row: 3;
        padding: 30px;
    }

    .box-4 h3 {
        font-size: 24px;
    }

    .box-4 p {
        font-size: 14px;
    }

    .box-5,
    .box-6 {
        grid-column: auto;
        grid-row: auto;
    }

    .box-5 {
        grid-column: 1;
        grid-row: 4;
        height: auto;
        min-height: 250px;
    }

    .box-6 {
        grid-column: 2;
        grid-row: 4;
        height: auto;
        min-height: 250px;
    }

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

    .box-content-overlay {
        padding: 30px;
    }

    .box-content-overlay h4 {
        font-size: 20px;
    }
}

/* Small devices: 480px and below */
@media (max-width: 480px) {
    .insights-section {
        padding: 50px 0 70px;
    }

    .insights-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5,
    .box-6 {
        grid-column: 1;
        grid-row: auto;
        height: auto;
        min-height: 200px;
    }

    .box-1 {
        min-height: 200px;
    }

    .box-2 {
        min-height: 240px;
        padding: 25px 20px;
    }

    .box-3 {
        min-height: 300px;
    }

    .box-4 {
        padding: 25px 20px;
        justify-content: center;
    }

    .box-4 h3 {
        font-size: 20px;
        margin: 10px 0;
    }

    .box-4 p {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .box-5 {
        min-height: 220px;
        padding: 30px 20px;
    }

    .box-5 h3 {
        font-size: 20px;
        margin: 15px 0;
    }

    .box-6 {
        min-height: 200px;
    }

    .box-content-overlay {
        padding: 20px;
    }

    .box-content-overlay h4 {
        font-size: 18px;
        margin: 15px 0;
    }

    .stat-main h3 {
        font-size: 42px;
    }

    .stat-main h3 span {
        font-size: 26px;
    }

    .purple-pill-btn,
    .white-pill-btn,
    .mini-learn-more {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Extra small devices: 360px and below */
@media (max-width: 360px) {
    .insights-section {
        padding: 40px 0 60px;
    }

    .insights-grid {
        gap: 12px;
    }

    .box-2,
    .box-4,
    .box-5 {
        padding: 20px 15px;
    }

    .stat-main h3 {
        font-size: 36px;
    }

    .stat-main h3 span {
        font-size: 22px;
    }

    .box-4 h3 {
        font-size: 18px;
    }

    .box-5 h3 {
        font-size: 18px;
    }

    .box-content-overlay h4 {
        font-size: 16px;
    }
}

/* Web Development Page */
.web-dev-hero {
    padding: 160px 0 100px;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.web-dev-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 18, 24, 0.4);
    /* Subtle overlay for better readability */
    z-index: -1;
}

.web-dev-hero-content {
    width: 100%;
}

.web-dev-hero-content h1 {
    font-size: 54px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -1px;
}

.breadcrumb-nav {
    margin-top: 20px;
}

.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 16px;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
}

.breadcrumbs li a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumbs li a:hover {
    color: #D24D96;
}

.breadcrumbs .separator {
    color: #D24D96;
    font-size: 18px;
    margin: 0 5px;
}

.breadcrumbs .current {
    font-weight: 600;
    color: #ffffff;
}

@media (max-width: 768px) {
    .web-dev-hero {
        padding: 120px 0 80px;
        min-height: 50vh;
    }

    .web-dev-hero-content h1 {
        font-size: 34px;
    }

    .breadcrumbs {
        font-size: 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

.web-dev-intro-section {
    padding: 120px 0 80px;
    background: #ffffff;
}

.web-dev-intro-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.web-dev-heading {
    font-size: 40px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #0f172a;
}

.web-dev-heading-main {
    font-weight: 600;
}

.web-dev-heading-accent {
    font-weight: 700;
    color: #D24D96;
}

.web-dev-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    margin: 0 0 18px;
}

.web-dev-layout-section {
    padding: 0 0 120px;
    background: #ffffff;
}

.web-dev-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

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

.web-dev-image img {
    display: block;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
}

.web-dev-text h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #0f172a;
}

.web-dev-text p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    margin: 0 0 12px;
}

.web-dev-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .web-dev-intro-section {
        padding: 100px 0 70px;
    }

    .web-dev-layout-section {
        padding-bottom: 100px;
    }
}

@media (max-width: 768px) {
    .web-dev-heading {
        font-size: 32px;
    }

    .web-dev-row {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 50px;
    }

    .web-dev-row-2 .web-dev-text {
        order: -1;
    }
}

@media (max-width: 480px) {
    .web-dev-intro-section {
        padding: 80px 0 50px;
    }

    .web-dev-intro-text {
        font-size: 15px;
    }

    .web-dev-layout-section {
        padding-bottom: 70px;
    }

    .web-dev-text h3 {
        font-size: 20px;
    }
}

/* About Us Page */
.about-hero {
    position: relative;
    height: 120vh;
    min-height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
}

.about-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 120%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent dark overlay */
    z-index: 1;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 160px 20px 0;
    /* Pushed significantly further down to clear header */
}

.about-label {
    display: inline-block;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4px 8px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #D24D96;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
}

.about-hero .about-label {
    color: #ffffff !important;
}

.about-section .about-label {
    color: #D24D96 !important;
}

.about-hero h1 {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: 1px;
    color: #ffffff;
}

.about-hero h1 .white-text {
    font-weight: 400;
}

.about-hero h1 .bold-text {
    font-weight: 700;
}

.about-hero p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75) !important;
    max-width: 700px;
    margin: 0 auto 40px;
}

.about-hero-controls {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 10;
}

.video-control-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

@media (max-width: 1024px) {
    .about-hero h1 {
        font-size: 60px;
    }

    .about-hero-content {
        padding-top: 100px !important;
    }
}

@media (max-width: 768px) {
    .about-hero h1 {
        font-size: 42px;
    }

    .about-hero p {
        font-size: 14px;
    }

    .about-hero-content {
        padding-top: 80px !important;
    }

    .about-hero {
        align-items: flex-start !important;
        padding-top: 0 !important;
        min-height: unset !important;
        height: 100vh !important;
    }
}

@media (max-width: 480px) {
    .about-hero h1 {
        font-size: 32px !important;
    }

    .about-hero-content {
        padding-top: 54px !important;
    }
}

/* About Us Sections */
.section-label {
    display: inline-block;
    color: #D24D96;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.purple-text {
    color: #D24D96;
}

/* Intro Text Section (Technology Meets Creativity) */
.about-intro-text-section {
    padding: 80px 0;
    background: #ffffff;
    text-align: center;
}

.about-intro-text-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-intro-heading {
    font-size: 44px;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #011218;
    letter-spacing: -1.5px;
}

.about-intro-paragraphs p {
    font-size: 18px;
    line-height: 1.9;
    color: #475569;
    margin-bottom: 35px;
}

.about-intro-paragraphs p:last-child {
    margin-bottom: 0;
}

/* Goals Section (Identifying & Developing Solutions) */
.about-goals-section {
    background: #ffffff;
    width: 100%;
    position: relative;
    z-index: 1;
}

.about-goals-section .ast-container {
    max-width: 1200px !important;
    margin: 0 auto;
    display: block !important;
    padding: 70px;
    /* Force block to prevent theme flex interference */
}

.about-goals-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 100px;
}

.about-goals-heading {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #011218;
    letter-spacing: -1px;
}

.about-goals-description {
    font-size: 17px;
    line-height: 1.7;
    color: #475569;
    max-width: 800px;
    margin: 0 auto;
}

.about-goals-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: flex-start;
    /* Important for overlapping images */
    padding-top: 80px;
    /* Base padding for overlap */
}

.goal-card {
    flex: 1;
    background: #ffffff;
    /* border removal for semi-rectangular effect */
    border: none;
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    position: relative;
    max-width: 380px;
}

/* Semi-rectangular border: Top half only */
.goal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    /* Only top half */
    border: 1px solid #b1578d;
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    pointer-events: none;
    z-index: 1;
    border: 1px solid transparent;
    border-bottom: none;

    background: linear-gradient(to bottom,
            #b1578d,
            rgba(177, 87, 141, 0.15)) border-box;

    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


.goal-card:hover {
    box-shadow: none;
    transform: none;
}

.goal-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.goal-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 25px;
    display: block;
    color: #D24D96;
}

.goal-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
}

/* Specific Staggering & Overlaps */
.goal-image-bottom {
    position: absolute;
    bottom: -127px;
    left: 50%;
    transform: translateX(-50%);
    width: 310px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.goal-image-bottom img {
    width: 100%;
    height: auto;
}

.vision-card .goal-card-content {
    padding-top: 10px;
}

.goal-image-top {
    position: absolute;
    top: -180px;
    /* Centered overlap for 420px height asset */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* Extra large asset */
    z-index: 10;
}

.goal-image-top img {
    width: 90%;
    height: auto;
}

@media (max-width: 1024px) {
    .about-goals-grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding-top: 40px;
    }

    .goal-card {
        min-height: auto;
        width: 100%;
        max-width: 500px;
        margin-top: 0 !important;
        padding: 40px 30px;
    }

    .goal-image-bottom,
    .goal-image-top,
    .goal-image-bottom img,
    .goal-image-top img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
    }
}

@media (max-width: 768px) {
    .about-goals-heading {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .about-goals-description {
        font-size: 15px;
    }
}

/* Stats Section (Numbers That Speak) */
.about-stats-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    color: #011218;
    text-align: center;
}

.about-stats-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.about-stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient at top and bottom for smooth transitions */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0) 80%,
            rgba(255, 255, 255, 0.6) 100%);
    z-index: 1;
}

.about-stats-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.stats-heading {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #011218;
}

.stats-description {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.stat-number {
    font-size: 44px;
    font-weight: 400;
    color: #011218;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.stat-number .suffix {
    color: #D24D96;
}

.stat-label {
    font-size: 14px !important;
    font-weight: 400;
    color: #42464c;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .stats-heading {
        font-size: 36px;
    }

    .stat-card {
        width: 100%;
        max-width: 300px;
    }
}

/* The People Behind Our Success Section */
.about-people-section {
    background: #ffffff;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 50px;
}

.about-people-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.people-heading {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #011218;
}

.people-description {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 0px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.people-image-full {
    margin: 60px 0;
    width: 100%;
    overflow: hidden;
}

.people-image-full img {
    width: 100%;
    height: auto;
    display: block;
}

.people-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
    border: none;
    cursor: pointer;
}

.people-button:hover {
    color: #000000;
}

.people-button i {
    font-size: 12px;
}

@media (max-width: 768px) {
    .people-heading {
        font-size: 36px;
    }

    .people-description {
        font-size: 15px;
    }

    .people-button {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* Mission Section */
.about-mission-section {
    padding: 120px 0;
    background: #ffffff;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.mission-content h2 {
    font-size: 54px;
    font-weight: 700;
    color: #011218;
    line-height: 1.2;
    margin-bottom: 30px;
}

.mission-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

.mission-image img {
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

/* Values Section */
.about-values-section {
    padding: 120px 0;
    background: #f8fafc;
    text-align: center;
}

.values-header {
    margin-bottom: 80px;
}

.values-header h2 {
    font-size: 54px;
    color: #011218;
    font-weight: 700;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.value-card {
    background: #ffffff;
    padding: 50px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(174, 74, 142, 0.1);
}

.value-icon {
    width: 70px;
    height: 70px;
    background: #fdf2f8;
    color: #D24D96;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 30px;
}

.value-card h3 {
    font-size: 22px;
    color: #011218;
    margin-bottom: 20px;
}

.value-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
}

/* Team Section */
.about-team-section {
    padding: 120px 0;
    background: #ffffff;
    text-align: center;
}

.team-header {
    margin-bottom: 80px;
}

.team-header h2 {
    font-size: 44px;
    color: #011218;
    font-weight: 700;
}

.team-member {
    max-width: 300px;
    margin: 0 auto;
}

.member-image-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #f1f5f9;
    margin: 0 auto 30px;
    border: 2px dashed #cbd5e1;
}

@media (max-width: 1024px) {
    .mission-grid {
        gap: 40px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .about-mission-section,
    .about-values-section,
    .about-team-section {
        padding: 80px 0;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .mission-content h2,
    .values-header h2,
    .team-header h2 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Blogs Section - Latest Trends, Strategies, and Industry Knowledge */
.blogs-section {
    padding: 00px 0;
    background: #ffffff;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    width: 100%;
}

.blog-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    border: none;
    transition: none;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    box-shadow: none;
}

.blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    margin-bottom: 20px;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: none;
    will-change: transform;
}

/* Hover zoom on blogs section - image only */
.blogs-section .blog-card:hover .blog-card-image img {
    transform: scale(1.1);
}

/* No hover zoom on blogs section */
/* .blogs-section .blog-card:hover .blog-card-image img {
    transform: none;
} */

.blog-card-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.blog-category {
    color: #D24D96;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.blog-title {
    font-size: 22px;
    font-weight: 800;
    color: #011218;
    line-height: 1.3;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.blog-excerpt {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 30px 0;
    flex: 1;
}

.blog-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #D24D96;
    color: #000000 !important;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.blog-learn-more svg {
    transform: translateY(2px);
}

.blog-learn-more:hover {
    color: #000000 !important;
}

.blog-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f8fafc00;
    border-radius: 50px;
    overflow: hidden;
    padding: 6px 6px 6px 6px !important;
    gap: 8px;
}

/* Responsive - Blogs section */
@media (max-width: 1200px) {
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blogs-section {
        padding: 60px 0;
        overflow: hidden;
    }

    .blogs-section .solutions-header {
        margin-bottom: 40px;
        text-align: center;
        padding: 0 20px;
    }

    .blogs-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 0 25px 40px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
        grid-template-columns: none;
        /* Reset grid */
    }

    .blogs-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .blog-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .blog-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .blog-card {
        flex: 0 0 90%;
    }

    .blog-title {
        font-size: 17px;
    }
}

/* -- Testimonials Section -- */
.testimonials-section {
    padding: 100px 0 80px;
    background: #ffffff;
}

.testimonials-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonials-carousel {
    width: 100%;
    overflow: hidden;
    padding: 16px 0 0;
}

/* Track ? JS sets transform to center active card */
.testimonial-track {
    display: flex;
    gap: 20px;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: stretch;
}

/* Side card default ? JS overrides via dynamic <style> tag */
.testimonial-card {
    flex: 0 0 200px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    opacity: 0.5;
    transition: flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        box-shadow 0.4s ease;
}

/* Active card */
.testimonial-card.active {
    flex: 0 0 560px;
    opacity: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    cursor: default;
}

/* Track transition controlled by JS */
.testimonial-track {
    transition: none;
}

.testimonial-card-image {
    width: 100%;
    height: 100%;
}

.testimonial-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    pointer-events: none;
    user-select: none;
}

.testimonial-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 22px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.testimonial-card.active .testimonial-card-overlay {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease 0.2s;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.testimonial-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.testimonial-company {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.80) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.80) !important;
}

.play-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 8px 18px 8px 8px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: color 0.3s ease;
}

.play-video-btn:hover {
    color: #000000 !important;
}

.play-icon {
    width: 32px;
    height: 32px;
    background: #D24D96;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-icon svg {
    margin-left: 2px;
}

/* Arrows */
.t-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #011218;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
}

.t-arrow:hover {
    background: #D24D96;
    color: #ffffff;
}

.t-arrow-prev {
    left: 16px;
}

.t-arrow-next {
    right: 16px;
}

/* Dots */
/* REMOVED REDUNDANT DOTS */

/* REMOVED REDUNDANT DOT */

/* REMOVED REDUNDANT ACTIVE DOT */

/* Responsive */
@media (max-width: 1100px) {
    .testimonial-card.active {
        flex: 0 0 460px;
    }

    .testimonial-card {
        flex: 0 0 160px;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 70px 0 60px;
    }

    .testimonial-card-overlay {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding-bottom: 15px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .play-video-btn {
        margin-top: 8px;
    }

    .testimonial-card {
        flex: 0 0 80px;
        height: 320px;
    }

    .testimonial-card.active {
        flex: 0 0 76vw;
    }

    .t-arrow {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        flex: 0 0 50px;
        height: 280px;
    }

    .testimonial-card.active {
        flex: 0 0 82vw;
    }
}

/* -- TESTIMONIAL DOTS ? mobile prominent styling -- */
@media (max-width: 768px) {
    /* REMOVED REDUNDANT DOTS */

    /* REMOVED REDUNDANT DOT */

    /* REMOVED REDUNDANT ACTIVE DOT */
}

/* Building Success With Our Clients Section */
/* Building Success With Our Clients Section (Consolidated) */
/* [clients-section removed ? see canonical block] */

/* Video BG overlay handled in front-page.php */

.clients-section .partners-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* clients-section text ? dark on light pink video bg */
.clients-section .solutions-header h2 {
    color: #011218 !important;
    font-size: 44px;
    font-weight: 400 !important;
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.clients-section .solutions-header p {
    color: #444444 !important;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 18px;
    line-height: 1.6;
}

.clients-section .solutions-header .purple-text {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.clients-logos-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 60px;
}

.clients-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.client-logo-box {
    width: 160px;
    height: 80px;
    background: transparent;
    border: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.client-logo-box:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
}

.client-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: none;
}

.client-logo-box:hover img {
    filter: none;
    transform: none;
}

/* Carousel wrapper for mobile/tablet swipe */
.clients-carousel-wrapper {
    display: none;
    width: 100%;
    margin-top: 60px;
}

.clients-carousel {
    overflow: hidden;
    width: 100%;
}

.clients-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 0 20px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.clients-carousel-track::-webkit-scrollbar {
    display: none;
}

.client-carousel-item {
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-carousel-item .client-logo-box {
    width: auto;
    min-width: 160px;
}

@media (max-width: 1024px) {
    .clients-section {
        padding: 80px 0;
    }

    .clients-section .solutions-header h2 {
        font-size: 38px;
    }

    .client-logo-box {
        width: 160px;
        height: 80px;
    }

    .clients-row {
        gap: 16px;
    }

    .clients-logos-pyramid {
        gap: 16px;
    }

    /* Enable carousel on tablet */
    .clients-carousel-wrapper {
        display: block;
        padding: 0 20px;
    }

    .clients-logos-pyramid {
        display: none;
    }

    .client-carousel-item {
        flex: 0 0 calc(50% - 8px);
    }
}

@media (max-width: 768px) {
    .clients-section {
        padding: 60px 0;
    }

    .clients-section .solutions-header h2 {
        font-size: 32px;
    }

    .client-logo-box {
        width: 160px;
        height: 80px;
        border-radius: 24px;
        background: #ffffff !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
        border: none !important;
    }

    .clients-row {
        gap: 12px;
        flex-wrap: wrap;
    }

    .clients-logos-pyramid {
        gap: 12px;
    }

    /* Enable carousel on mobile */
    .clients-carousel-wrapper {
        display: block;
        padding: 0 20px;
    }

    .clients-logos-pyramid {
        display: none;
    }

    .client-carousel-item {
        flex: 0 0 calc(45% - 8px);
    }
}

@media (max-width: 480px) {
    .clients-section .solutions-header h2 {
        font-size: 28px;
    }

    .client-logo-box {
        width: 140px;
        height: 70px;
        border-radius: 24px;
        background: #ffffff !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
        border: none !important;
    }

    .clients-row {
        gap: 10px;
    }

    .clients-carousel-wrapper {
        padding: 0 16px;
    }

    .clients-carousel-track {
        gap: 12px;
    }

    .client-carousel-item {
        flex: 0 0 calc(50% - 6px);
    }
}

@media (max-width: 360px) {
    .client-logo-box {
        width: 130px;
        height: 65px;
        border-radius: 20px;
        /* Slightly smaller for very small screens */
        background: #ffffff !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
        border: none !important;
    }

    .clients-carousel-wrapper {
        padding: 0 12px;
    }

    .clients-carousel-track {
        gap: 10px;
        padding: 8px 0 16px 0;
    }

    .client-carousel-item {
        flex: 0 0 calc(55% - 5px);
    }
}



/* --- New Premium Footer Design --- */
.site-footer.custom-footer {
    background-color: #050505;
    background-image: var(--footer-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    outline: none !important;
}

.footer-wrapper {
    position: relative;
    padding: 70px 0 60px;
    z-index: 2;
}

/* Extra Design Effects Removed */
.footer-wrapper::before {
    display: none;
}

/* CTA Section Styles */
.footer-cta-container {
    text-align: center;
    margin-bottom: 120px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.footer-cta-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff !important;
    margin-bottom: 30px;
}

.cta-accent {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.cta-swoosh {
    display: block;
    width: 220px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8C50 2 170 2 218 8' stroke='%23D24D96' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    margin: 5px auto 0;
    opacity: 1;
}

.footer-cta-text {
    font-size: 16px;
    color: rgb(139 176 187 / 85%);
    line-height: 1.6;
    margin-bottom: 35px;
}

.footer-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 35px;
    border-radius: 99px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-cta-button:hover {
    color: #000000 !important;
}

.footer-cta-button .chevron {
    font-size: 18px;
    font-weight: 400;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1.5fr;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-column-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 18px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #ffffff;
}

.footer-column.no-title {
    padding-top: 65px;
}

/* Mobile view */
@media (max-width: 768px) {
    .footer-column.no-title {
        padding-top: 10px !important;
    }
}

/* Contact Info */
.footer-contact-info {
    margin-bottom: 60px;
}

.footer-contact-phone,
.footer-contact-email {
    margin-bottom: 10px;
}

.footer-contact-phone a,
.footer-contact-phone a:visited,
.footer-contact-phone a:hover,
.footer-contact-phone a:active,
.footer-contact-email a,
.footer-contact-email a:visited,
.footer-contact-email a:hover,
.footer-contact-email a:active {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff !important;
    opacity: 0.9;
    text-decoration: none !important;
}

/* Newsletter Styles */
.footer-newsletter-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
}

.newsletter-form-wrapper {
    position: relative;
    border-bottom: none;
    padding-bottom: 15px;
    margin-top: 30px;
}

/* Reset only visual styles on non-input newsletter children */
.footer-newsletter .noptin-form-notice,
.footer-newsletter .noptin-form-footer,
.footer-newsletter label,
.footer-newsletter .noptin-form-fields {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Explicitly allow the underline we want */
.newsletter-form-wrapper {
    position: relative;
    border-bottom: none !important;
    padding-bottom: 15px;
    margin-top: 30px;
}

.footer-newsletter input[type="email"],
.footer-newsletter input[type="text"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: text !important;
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 8px 40px 8px 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    font-family: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

.footer-newsletter input[type="email"]:focus,
.footer-newsletter input[type="text"]:focus {
    outline: none !important;
    border-bottom-color: #ec4899 !important;
}

.footer-newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.newsletter-icon-svg {
    position: absolute;
    right: 0;
    top: -5px;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.3s ease;
}

.footer-newsletter .noptin-form-submit {
    display: none !important;
}

/* Divider & Bottom */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 40px;
    width: 100%;
}

.footer-bottom {
    text-align: center;
    padding-top: 40px;
}

.footer-social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-social-links a {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.footer-social-links a:hover {
    transform: translateY(-2px);
    color: #ec4899;
    opacity: 1;
}

.footer-social-links a svg {
    fill: currentColor;
}

.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.footer-legal-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: #ffffff;
}

.footer-legal-links .sep {
    opacity: 0.3;
}

.site-footer .footer-copyright,
.site-footer .footer-copyright p,
.footer-copyright,
.footer-copyright p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.footer-brand {
    color: #ec4899;
    font-weight: 400;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
    .footer-cta-title {
        font-size: 44px;
    }

    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-column.no-title {
        padding-top: 60;
    }
}

@media (max-width: 768px) {
    .footer-cta-title {
        font-size: 32px;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .newsletter-form-wrapper {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}



@media (max-width: 768px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-column-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .newsletter-form-wrapper {
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-legal-links {
        gap: 10px;
    }
}

.footer-newsletter .noptin-form-notice {
    font-size: 13px !important;
    margin-top: 12px !important;
    color: #ec4899 !important;
}

@media (max-width: 480px) {
    .custom-footer .footer-background {
        padding: 60px 0 24px;
    }

    .footer-cta-title {
        font-size: 28px;
    }

    .footer-main-grid {
        gap: 28px;
    }

    .footer-newsletter-field {
        padding: 4px 4px 4px 12px;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 8px;
    }
}

/* IT Solutions Page Hero */
.it-solutions-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 60px;
    overflow: hidden;
}

/*.it-solutions-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--it-solutions-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}*/

.it-solutions-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.it-solutions-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.it-solutions-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 10px 24px;
    border-radius: 0;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.it-solutions-title {
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 40px;
    letter-spacing: -0.04em;
    text-align: center;
}

.it-solutions-title-emphasis {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.it-solutions-description {
    font-size: 8px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
    letter-spacing: 0.2px;
}

@media (max-width: 768px) {
    .it-solutions-hero {
        min-height: 70vh;
        padding: 100px 0 80px;
    }

    .it-solutions-title {
        font-size: 30px;
    }

    .it-solutions-description {
        font-size: 8px;
        padding-top: 20px;
    }
}

/* Business Technology Section - Premium Styles */
.business-tech-section {
    padding: 60px 0;
    background: #ffffff;
}

.business-tech-section .section-header {
    text-align: center;
    margin-bottom: 80px;
}

.business-tech-section .section-header h2 {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #011218;
}

.business-tech-section .section-header p {
    font-size: 20px;
    line-height: 1.6;
    color: #475569;
    max-width: 800px;
    margin: 0 auto;
}

.accordion-main-title {
    font-size: 38px !important;
    font-weight: 400 !important;
    margin-bottom: 30px !important;
    color: #D24D96 !important;
}

.accordion-main-title a {
    color: inherit !important;
}

.business-tech-content {
    display: flex;
    gap: 80px;
    align-items: center;
}

.business-tech-content.reverse-row {
    flex-direction: row-reverse;
}

.tech-image-col {
    flex: 1;
    max-width: 500px;
}

.tech-visual {
    width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}



.tech-accordion-col {
    flex: 1.2;
}

.accordion-main-title {
    font-size: 32px;
    font-weight: 400 !important;
    color: #e44d93;
    margin-bottom: 32px;
}

/* Polished Accordion */
.accordion-item {
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.accordion-item.active {
    background: transparent;
    border-bottom-color: #f1f5f9;
}

.accordion-header {
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: #011218;
    margin: 0;
    transition: color 0.3s ease;
}

.accordion-item.active .accordion-header h4 {
    color: #000000;
}

.accordion-icon {
    font-size: 24px;
    color: #e44d93;
    font-weight: 300;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    padding-bottom: 30px;
}

.accordion-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

.ecommerce-section {
    background: #ffffff;
}

@media (max-width: 1024px) {
    .business-tech-content {
        gap: 40px;
    }
}

@media (max-width: 768px) {

    .business-tech-content,
    .business-tech-content.reverse-row {
        flex-direction: column;
    }

    .tech-image-col {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .business-tech-section .section-header h2 {
        font-size: 36px;
        font-weight: 500;
    }

    .accordion-main-title {
        font-size: 28px;
        font-weight: 400 !important;
    }
}

/* Industry Slider Section */
.industry-slider-section {
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.industry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 60px;
    text-align: left;
    width: 100%;
}

.industry-header .header-left {
    flex: 0 0 auto;
}

.industry-header .header-left h2 {
    font-size: 44px;
    /* Slightly larger */
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    color: #000000;
    /* Pure black */
}

.industry-header .header-left h2 .purple-text {
    color: #D24D96;
    display: inline-block;
    font-weight: 900;
}

.industry-header .header-right {
    max-width: 550px;
}

.industry-header .header-right p {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

.industry-slider-container {
    position: relative;
    width: 100%;
    margin-top: 40px;
}

.industry-slider-track {
    display: flex;
    align-items: stretch;
    gap: 30px;
    overflow-x: hidden;
    /* Important for auto-movement */
    padding-bottom: 50px;
    padding-left: 0;
    scroll-behavior: auto;
    /* auto for script control */
}

.industry-card {
    flex: 0 0 320px;
    background: #fff;
    cursor: grab;
    display: flex;
    flex-direction: column;
}

.industry-image {
    width: 100%;
    height: 250px;
    /* Improved height */
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 24px;
}

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

.industry-card:hover .industry-image img {
    transform: scale(1.05);
}

.industry-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.industry-info h4 {
    font-size: 22px;
    font-weight: 600;
    color: #011218;
    margin: 0 0 12px;
}

.industry-info p {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 20px;
    flex: 1;
}

.explore-link {
    font-size: 15px;
    font-weight: 500;
    color: #D24D96;
    text-decoration: none;
    display: block;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
    margin-top: auto;
    flex-shrink: 0;
}

.explore-link:hover {
    gap: 10px;
}

/* Hide explore link and footer button only in the Industry Slider (not Success Stories) */
.industry-slider-section:not(.success-stories-section) .explore-link,
.industry-slider-section:not(.success-stories-section) .slider-footer {
    display: none !important;
}

.slider-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #D24D96;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.industry-slider-nav-group {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 125px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.industry-slider-nav-group .slider-nav-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.industry-slider-nav-group .slider-nav-btn i {
    font-size: 14px;
}

.slider-footer {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.slider-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #fff;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.slider-explore-btn:hover {
    color: #000000;
}

.industry-info .category-tag {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 8px;
    display: block;
    text-transform: capitalize;
}

@media (max-width: 991px) {
    .industry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .industry-header .header-left h2 {
        font-size: 36px !important;
    }
}

@media (max-width: 768px) {
    .industry-slider-container {
        padding-right: 0;
        overflow: hidden;
    }

    .industry-slider-track {
        gap: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .industry-card {
        flex: 0 0 calc(100% - 0px);
        width: 100%;
        scroll-snap-align: start;
    }
}

.slider-footer {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    position: relative;
    z-index: 10;
}

.slider-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.slider-explore-btn:hover {
    color: #000000;
}

/* Why Choose Section Styling */
.why-choose-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    min-height: 700px;
    display: flex;
    align-items: center;
}

.why-choose-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.8;
}

.why-choose-section .partners-container {
    position: relative;
    z-index: 2;
}

.why-choose-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.why-choose-header h2 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #011218;
}



/* IT Solutions Page Styles */
.it-solutions-hero {
    padding: 160px 0 100px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
}

.it-solutions-label {
    display: inline-block;
    padding: 8px 16px;
    background: rgb(174 74 142 / 0%);
    color: #ffffff;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.it-solutions-title {
    font-size: 64px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
}

.it-solutions-description {
    font-size: 8px;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

.business-tech-section {
    padding: 60px 0;
    background: #ffffff;
}

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

.section-header h2 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #011218;
}

.section-header h2 .purple-text {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    color: transparent;
}

.business-tech-content {
    display: flex;
    align-items: stretch;
    gap: 80px;
}

.tech-image-col,
.tech-visual-col {
    flex: 1;
}



.tech-accordion-col,
.tech-content-col {
    flex: 1;
}

.accordion-main-title {
    font-size: 42px;
    font-weight: 400 !important;
    margin-bottom: 40px;
    line-height: 1.2;
}

.accordion-main-title a {
    background: #D24D96;
    background-clip: text;
    color: transparent;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.accordion-main-title a:hover {
    opacity: 0.8;
}

.accordion-item {
    border-top: none;
    border-bottom: 1px solid #f1f5f9;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-header h4 {
    font-size: 20px;
    font-weight: 500;
    color: #011218;
    margin: 0;
}

.accordion-icon {
    font-size: 16px;
    color: #94a3b8;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    padding-bottom: 20px;
}

.accordion-content p {
    font-size: 16px;
    line-height: 1.6;
    color: rgb(54 60 68);
    margin: 0;
}

/* IT Solutions - Why Choose & FAQ Styles */
.why-choose-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    min-height: 700px;
    display: flex;
    align-items: center;
}

.why-choose-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.why-choose-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.8;
}

.why-choose-section .partners-container {
    position: relative;
    z-index: 2;
}

.why-choose-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.why-choose-header h2 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #011218;
}

.why-choose-header h2 .purple-text {
    color: #D24D96;
}

.why-choose-header p {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
}

.why-choose-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.glass-card {
    flex: 1;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transform: skewX(-25deg);
    transition: 0.75s;
    pointer-events: none;
    z-index: 1;
}

.glass-card:hover::before {
    left: 150%;
}

.glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.glass-card h3 {
    font-size: 48px;
    font-weight: 800;
    color: #011218;
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.glass-card h3 .purple-text {
    color: #D24D96;
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
}

.glass-card p {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.faq-section {
    padding: 100px 0;
    background: #ffffff;
    width: 100%;
}

.faq-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px;
}

.faq-header h2 {
    font-size: 44px !important;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #011218;
}

.faq-header h2 .purple-text {
    color: #D24D96;
}

.faq-header p {
    font-size: 18px;
    line-height: 1.6;
    color: #475569;
}

.faq-accordion {
    /* max-width: 1000px; */
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #f1f5f9;
}

.faq-question {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question h4 {
    font-size: 24px;
    font-weight: 400;
    color: #011218;
    margin: 0;
    line-height: 1.4;
    text-align: left;
}

.faq-icon {
    font-size: 14px;
    color: #64748b;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 24px;
}

.faq-answer p {
    font-size: 24px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    text-align: left;
}

@media (max-width: 1200px) {
    .faq-header h2 {
        font-size: 44px;
    }
}

@media (max-width: 991px) {
    .faq-header h2 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .faq-section {
        padding: 60px 0;
    }

    .faq-header {
        margin-bottom: 32px;
    }

    .faq-question {
        padding: 16px 0;
    }

    /* Overrides removed to allow bottom typography rules to apply */

    .faq-header p {
        font-size: 14px;
    }

    .faq-question h4,
    .faq-modern-question h4 {
        font-size: 18px !important;
        font-weight: 400 !important;
    }

    .faq-answer p {
        font-size: 16px !important;
        font-weight: 400 !important;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding: 40px 0;
    }

    /* Overrides removed to allow bottom typography rules to apply */

    .faq-question h4,
    .faq-modern-question h4 {
        font-size: 18px !important;
        font-weight: 400 !important;
    }

    .faq-answer p {
        font-size: 16px !important;
        font-weight: 400 !important;
    }
}

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

.ecommerce-section {
    padding: 80px 0;
    background: #ffffff;
}

.tech-visual-col {
    flex: 1;
    min-width: 280px;
    max-width: 480px;
}

.tech-content-col {
    flex: 1;
    min-width: 300px;
}

@media (max-width: 991px) {
    .business-tech-content {
        flex-direction: column;
        gap: 40px;
    }

    .tech-visual-col,
    .tech-content-col {
        max-width: 100%;
        width: 100%;
    }

    .business-tech-content.reverse-row {
        flex-direction: column;
    }
}

/* Contact Section Styling */
.contact-cta-section {
    padding: 120px 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    overflow: hidden;
}

.contact-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 18, 24, 0.9) 0%, rgba(174, 74, 142, 0.7) 100%);
    z-index: 1;
}

.contact-cta-section .partners-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.contact-cta-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-cta-header h2 {
    font-size: 54px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.contact-cta-header p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 60px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* CF7 Form Elements Styling
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 25px;
}

.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #D24D96;
    outline: none;
    box-shadow: 0 0 0 4px rgba(174, 74, 142, 0.2);
}

.wpcf7-form input[type='submit'] {
    background: #D24D96;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wpcf7-form input[type='submit']:hover {
    background: linear-gradient(135deg, #8C3A86 0%, #D24D96 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(174, 74, 142, 0.3);
}

@media (max-width: 768px) {
    .contact-cta-header h2 {
        font-size: 38px;
    }

    .contact-form-wrapper {
        padding: 40px 20px;
    }
} */

/* Identical Contact Form Design */
.purple-gradient-text {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.contact-cta-section {
    padding: 100px 0;
    background-color: #fcfcfc;
    background-attachment: scroll;
}

.contact-cta-section::before {
    display: none;
}

.contact-cta-header h2 {
    font-size: 44px;
    color: #011218;
    line-height: 1.2;
}

.contact-cta-header p {
    color: #64748b;
    font-size: 16px;
    margin-top: 15px;
}

.contact-form-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    margin-top: 50px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.form-footer-note {
    font-size: 14px;
    color: #94a3b8;
    margin-top: 25px;
}

/* CF7 Identical Grid Layout */
.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    text-align: left;
}

.wpcf7-form p {
    width: calc(50% - 10px);
    margin: 0;
    display: flex;
    flex-direction: column;
}

.wpcf7-form p:has(textarea),
.wpcf7-form p:has(input[type='submit']) {
    width: 100%;
    align-items: center;
}

.wpcf7-form label {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    margin-bottom: 8px;
}

.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form input[type='tel'],
.wpcf7-form textarea {
    background: #fcfcfc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    color: #000 !important;
    font-size: 14px !important;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #cbd5e1 !important;
}

.wpcf7-form input[type='submit'] {
    margin-top: 10px;
    width: auto !important;
    min-width: 200px;
    background: #D24D96 !important;
    padding: 12px 30px !important;
    font-size: 15px !important;
    border-radius: 30px !important;
}

.contact-cta-section {
    background-size: cover !important;
    background-position: center !important;
}

.contact-form-card .form-footer-note {
    text-align: center;
}

.wpcf7-form .wpcf7-submit {
    display: block;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .wpcf7-form p {
        width: 100%;
    }
}

.tech-slider {
    overflow: hidden;
    position: relative;
    margin-top: 60px;
}

.tech-track {
    display: flex;
    gap: 30px;
    animation: scrollTech 55s linear infinite;
    width: max-content;
}

.tech-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    width: 260px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
}

.tech-card img {
    width: 55px;
    height: 55px;
    margin-bottom: 20px;
}

.tech-card h4 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #111;
}

.tech-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

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

@keyframes scrollTech {
    0% {
        transform: translateX(0);
    }

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

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

.tech-hero {
    padding: 60px 20px 60px 20px;
    background: #ffffff;
    text-align: center;
}

.tech-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.tech-hero h2 {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
    margin-bottom: 20px;
}

.tech-hero h2 span {
    background: #D24D96;
    background-clip: text;
    color: transparent;
}

.tech-hero p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    max-width: 750px;
    margin: 0 auto 35px auto;
}

.tech-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary {
    padding: 12px 35px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-primary:hover {
    color: #000000;
}

.btn-outline {
    padding: 12px 35px;
    border-radius: 30px;
    background: transparent;
    border: 1.5px solid #D24D96;
    color: #D24D96;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.btn-outline:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(140, 58, 134, 0.4);
}

/* Blogs Section Styling */
.blogs-section {
    padding: 100px 0;
    background: #fcfcfc;
}

/* Featured Blogs section moved to end of file for better override control */

/* Responsive adjustments moved to end of file */

.blogs-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.blog-card {
    flex: 1 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    transition: none !important;
}

.blog-card-image {
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
}

.blog-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    will-change: transform;
}

.blog-card-image:hover img {
    transform: none;
}

/* blogs-section: zoom on hover - image only */
.blogs-section .blog-card:hover .blog-card-image img {
    transform: scale(1.1) !important;
}



.blog-card-content {
    padding: 0 !important;
}

.blog-category {
    display: inline-block;
    color: #000000b7;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.blog-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #011218;
}

.blog-excerpt {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.blog-avatar {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    box-sizing: border-box;
}

.blog-author-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #011218;
}

.blog-author-role {
    display: block;
    font-size: 12px;
    color: #94a3b8;
}

/* Testimonials Carousel Specifics */
.testimonials-section.about-testimonials {
    padding-bottom: 120px;
}

.testimonial-track {
    display: flex;
    align-items: center;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(.2, .9, .2, 1);
}

.testimonial-card {
    flex: 0 0 450px;
    opacity: 0.6;
    transform: scale(0.9);
    transition: all 0.5s ease;
}

.testimonial-card.active {
    opacity: 1;
    transform: scale(1);
}

.testimonial-card-image {
    border-radius: 20px;
    overflow: hidden;
    height: 500px;
}


.testimonial-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-card-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    color: #ffffff;
    z-index: 2;
}

.testimonial-info {
    margin-bottom: 20px;
}

.testimonial-name {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.testimonial-company {
    display: block;
    font-size: 14px;
    opacity: 0.8;
}

.play-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.play-video-btn:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
}

/* Blogs Section Styling */
.blogs-section {
    padding: 100px 0;
    background: #fcfcfc;
}

/* Featured Blogs section moved to end of file for better override control */

/* Responsive adjustments moved to end of file */

.blogs-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.blog-card {
    flex: 1 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    transition: none !important;
}

.blog-card-image {
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
}

.blog-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    will-change: transform;
}

.blog-card-image:hover img {
    transform: none;
}

/* blogs-section: zoom on hover - image only */
.blogs-section .blog-card:hover .blog-card-image img {
    transform: scale(1.1) !important;
}



.blog-card-content {
    padding: 0 !important;
}

.blog-category {
    display: inline-block;
    color: #000000b7;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.blog-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #011218;
}

.blog-excerpt {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.blog-avatar {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    box-sizing: border-box;
}

.blog-author-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #011218;
}

.blog-author-role {
    display: block;
    font-size: 12px;
    color: #94a3b8;
}

/* Testimonials Carousel Specifics */
.testimonials-section.about-testimonials {
    padding-bottom: 120px;
}

.testimonial-track {
    display: flex;
    align-items: center;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(.2, .9, .2, 1);
}

.testimonial-card {
    flex: 0 0 450px;
    opacity: 0.6;
    transform: scale(0.9);
    transition: all 0.5s ease;
}

.testimonial-card.active {
    opacity: 1;
    transform: scale(1);
}

.testimonial-card-image {
    border-radius: 20px;
    overflow: hidden;
    height: 500px;
}


.testimonial-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-card-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    color: #ffffff;
    z-index: 2;
}

.testimonial-info {
    margin-bottom: 20px;
}

.testimonial-name {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.testimonial-company {
    display: block;
    font-size: 14px;
    opacity: 0.8;
}

.play-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.play-video-btn:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
}

/* REMOVED REDUNDANT DOTS */

/* REMOVED REDUNDANT DOT */

@media (max-width: 768px) {
    .blogs-grid {
        flex-direction: column;
    }

    .testimonial-card {
        flex: 0 0 300px;
    }
}

/* Our Global Partner Ecosystem Section */
.about-partners-section {
    padding: 10px 0 120px 0;
    background: #ffffff;
    text-align: center;
}

.about-partners-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.partners-heading {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #011218;
}

.partners-description {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about-partners-section .about-partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    justify-items: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

.about-partners-section .partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.about-partners-section .partner-logo img {
    max-width: 190px;
    height: auto;
    max-height: 115px;
    object-fit: contain;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.3s ease;
}

.about-partners-section .partner-logo:hover img {
    /* No hover effects */
}

@media (max-width: 1024px) {
    .about-partners-section .about-partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .about-partners-section .partner-logo {
        padding: 5px;
        height: 100px;
    }

    .about-partners-section .partner-logo img {
        max-width: 140px;
        max-height: 70px;
    }
}

@media (max-width: 768px) {
    .about-partners-section {
        padding: 60px 0;
    }

    .partners-heading {
        font-size: 36px;
    }

    .partners-description {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .about-partners-section .about-partners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .about-partners-section .partner-logo {
        height: 80px;
        padding: 5px;
    }

    .about-partners-section .partner-logo img {
        width: auto !important;
        max-width: 100px !important;
        max-height: 100px !important;
        object-fit: contain !important;
        transform: scale(1.0) !important;
    }
}

@media (max-width: 480px) {
    .about-partners-section .about-partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .about-partners-section .partner-logo {
        padding: 0 5px;
        height: 70px;
    }

    .about-partners-section .partner-logo img {
        max-width: 100px;
    }
}

/* ===== Contact Us Page Premium Styles ===== */
.contact-page {
    background: #ffffff;
}

.contact-hero {
    position: relative;
    background-color: #011218;
    background-image: url('../../uploads/2026/02/63c23ff129423b33c6c650ff0c99a6d64d62b8a9-scaled.jpg');
    background-size: cover;
    background-position: center;
    padding: 180px 0 200px;
    /* Increased bottom padding for overlap */
    text-align: center;
    overflow: visible;
    /* Allow overflow for card overlap */
    color: #ffffff;
}

.contact-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 18, 24, 0.6);
    z-index: 1;
}

.contact-hero-glow {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(174, 74, 142, 0.3) 0%, rgba(65, 105, 225, 0.2) 30%, transparent 70%);
    filter: blur(80px);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 120px;
}

.reach-us-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    color: #cbd5e1;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-hero h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 30px;
    color: #ffffff;
}

.contact-hero h1 .white-text {
    font-weight: 400;
}

.purple-gradient-text {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-hero p {
    font-size: 20px;
    color: #ffffff8f;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Info Section Styles */
.contact-info-section {
    padding: 100px 0;
    text-align: center;
    background: #ffffff;
}

.info-header {
    max-width: 800px;
    margin: 0 auto 80px;
}

.info-header h2 {
    font-size: 52px;
    font-weight: 800;
    color: #011218;
    line-height: 1.1;
    margin-bottom: 25px;
}

.info-header .purple-text {
    color: #D24D96;
}

.info-header p {
    font-size: 18px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 40px;
}

.download-brochure-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.download-brochure-btn:hover {
    color: #000000;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px;
}

.info-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 50px 30px;
    text-align: center;
    transition: border-color 0.3s ease;
}

.info-card:hover {
    border-color: #D24D96;
}

.info-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon img {
    max-width: 100%;
    height: auto;
}

.info-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #011218;
    margin-bottom: 40px;
}

.info-card p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.info-highlight {
    font-size: 16px !important;
    font-weight: 600;
    color: #011218 !important;
}

.map-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #D24D96;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.map-link:hover {
    gap: 10px;
}

/* Contact Form Section Overlap */
.contact-form-section {
    position: relative;
    margin-top: -150px;
    /* Pulled up into hero */
    z-index: 100;
    padding: 100px 0 120px;
}

.contact-form-container {
    background: #ffffff;
    border-radius: 40px;
    border: 1px solid #e5e7eb;
    box-shadow: none;
    overflow: hidden;
    width: min(900px, 100%) !important;
    margin: 0 auto;
}

.contact-form-header {
    padding: 80px 40px 40px;
    text-align: center;
}

.contact-form-header h2 {
    font-size: 42px;
    font-weight: 700;
    color: #011218;
    line-height: 1.2;
    margin-bottom: 20px;
}

.contact-form-header h2 span {
    background: #D24D96;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.contact-form-header p {
    color: #64748b;
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Tabs Styling */
.contact-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.tab-btn {
    padding: 10px 30px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    background: #ffffff !important;
    background-image: none !important;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    border-color: #ae4a8e;
    color: #ae4a8e;
}

.tab-btn.active {
    background: #D24D96 !important;
    color: #ffffff !important;
    border-color: #D24D96 !important;
}

/* Contact Info Section (Redesigned) */
.contact-info-section {
    background: #ffffff;
    padding: 20px 0;
    text-align: center;
}

.custom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.info-header {
    margin-bottom: 50px;
}

.info-header h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #011218;
    line-height: 1.2;
}

.info-header h2 span {
    color: #b64c92;
    font-weight: 600;
}

.info-header p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.download-btn:hover {
    color: #000000;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.info-card {
    position: relative;
    background: #ffffff;
    padding: 40px 20px;
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    transition: border-color 0.3s ease;
}

.info-card:hover {
    border-color: #D24D96;
}

/* Half border from the top using a pseudo-element */
.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    border: 1px solid #fceaf2;
    /* Light shade pink */
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}

.info-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.info-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 40px !important;
    color: #011218;
}

.info-card p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    margin-top: 15px !important;
}

.info-card a.highlight {
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s ease;
}

.info-card a.highlight:hover {
    color: #ae4a8e;
    text-decoration-color: #ae4a8e;
}

@media (max-width: 1024px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 900px;
        margin: 0 auto;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .info-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px;
    }
}

/* Form Grid */
.contact-form-content {
    padding: 0 80px 80px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
}

.form-item {
    display: flex;
    flex-direction: column;
}

.form-item.full-width {
    grid-column: span 2;
}

.form-item label {
    font-size: 14px;
    font-weight: 600;
    color: #011218;
    margin-bottom: 10px;
}

.form-item input,
.form-item textarea {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 15px;
    color: #011218;
    transition: all 0.3s ease;
}

.form-item input:focus,
.form-item textarea:focus {
    background: #ffffff;
    border-color: #ae4a8e;
    box-shadow: 0 0 0 4px rgba(174, 74, 142, 0.05);
    outline: none;
}

.form-item textarea {
    height: 150px;
    resize: none;
    border-color: #d5d5d5;
}

/* Phone Input Fix */
.contact-form-content .iti {
    width: 100%;
}

.contact-form-content .iti input {
    width: 100% !important;
    padding-left: 100px !important;
}

/* Submit Area */
.form-submit-row {
    margin-top: 40px;
    text-align: center;
}

.submit-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.pink-gradient-btn {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    padding: 16px 45px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}

.pink-gradient-btn:hover {
    color: #000000;
}

.form-note {
    margin-top: 15px;
    font-size: 13px;
    color: #94a3b8;
    display: none;
}

/* Map Pulse Animation */
.contact-map-section {
    position: relative;
    overflow: hidden;
}

.map-pulse-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    /* Size of the pulsing ring */
    height: 60px;
    pointer-events: none;
    /* Let clicks pass through to the map */
    z-index: 10;
}

.map-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(174, 74, 142, 0.5);
    /* Theme purple-pink */
    border-radius: 50%;
    animation: mapPulse 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes mapPulse {
    0% {
        transform: scale(0.1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .contact-form-section {
        margin-top: -80px;
        padding: 0 20px 80px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-item.full-width {
        grid-column: span 1;
    }

    .contact-form-content {
        padding: 0 30px 50px;
    }

    .contact-form-header h2 {
        font-size: 32px;
    }

    .contact-tabs {
        flex-direction: column;
        align-items: center;
    }

    .tab-btn {
        width: 100%;
        max-width: 250px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-hero h1 {
        font-size: 56px;
    }

    .contact-form-header h2 {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 120px 20px 80px;
    }

    .contact-hero h1 {
        font-size: 38px;
        letter-spacing: 1px;
    }

    .contact-form-header h2 {
        font-size: 32px;
    }

    .contact-form-card,
    .contact-form-header {
        padding: 40px 20px;
    }

    .contact-hero p {
        font-size: 17px;
    }
}

/* Blogs Page Styles */
/* =====================================================
   BLOGS HERO ? Redesigned to match dark blob design
   ===================================================== */

.blogs-page .blogs-hero {
    position: relative;
    background: #08060e;
    padding: 160px 0 130px;
    text-align: center;
    color: #ffffff !important;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Purple blob ? left/bottom */
.blogs-hero-glow-1 {
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 55%;
    height: 85%;
    background: radial-gradient(ellipse at center, rgba(140, 40, 220, 0.70) 0%, rgba(100, 20, 180, 0.45) 35%, transparent 70%);
    filter: blur(60px);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Blue/indigo blob ? right/top */
.blogs-hero-glow-2 {
    position: absolute;
    top: -5%;
    right: -5%;
    width: 45%;
    height: 75%;
    background: radial-gradient(ellipse at center, rgba(60, 80, 220, 0.55) 0%, rgba(40, 60, 200, 0.30) 40%, transparent 70%);
    filter: blur(70px);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Pink accent blob ? center */
.blogs-hero-glow-3 {
    position: absolute;
    top: 20%;
    left: 30%;
    width: 40%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(200, 50, 160, 0.30) 0%, transparent 65%);
    filter: blur(80px);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.blogs-hero-content {
    position: relative;
    z-index: 10;
    max-width: 860px;
    margin: 0 auto;
}

/* H1 ? mixed weights like the screenshot */
.blogs-hero h1 {
    font-size: clamp(48px, 8vw, 90px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 36px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Bold words: Latest, and, Business */
.blogs-hero h1 .bh-bold {
    font-weight: 500;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.blogs-hero p {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75) !important;
    max-width: 620px;
    margin: 0 auto 52px;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
}

/* -- Search Bar -- */
.blog-search-container {
    max-width: 1200px;
    margin: 0 auto 36px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 28px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    z-index: 2;
    pointer-events: none;
}

.blog-search-field {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 100px !important;
    padding: 12px 36px 12px 68px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-family: 'Manrope', sans-serif !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.blog-search-field::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.blog-search-field:focus {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 0 40px rgba(140, 40, 220, 0.25) !important;
    outline: none !important;
}

/* -- Filter Chips -- */
.blog-filters-container {
    padding: 8px 0 0;
}

.blog-filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.filter-chip {
    padding: 11px 26px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.filter-chip:hover {
    border-color: rgba(255, 255, 255, 0.65);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.filter-chip.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
    font-weight: 600;
}

/* Blog Grid Section */
.blog-grid-section {
    padding: 100px 0;
    background: #f8fafc;
    min-height: 400px;
}

.blog-grid-placeholder {
    text-align: center;
    padding: 100px 0;
    color: #64748b;
    border: 2px dashed #e2e8f0;
    border-radius: 30px;
}

/* Responsive Blogs */
@media (max-width: 1024px) {
    .blogs-hero {
        padding: 130px 0 100px;
    }
}

@media (max-width: 768px) {
    .blogs-hero {
        padding: 110px 20px 80px;
        min-height: auto;
    }

    .blogs-hero h1 {
        letter-spacing: -1px;
        margin-bottom: 24px;
    }

    .blogs-hero p {
        font-size: 15px;
        margin-bottom: 36px;
    }

    .blog-search-field {
        padding: 16px 24px 16px 56px !important;
        font-size: 15px !important;
    }

    .search-icon {
        left: 20px;
    }

    .filter-chip {
        padding: 9px 20px;
        font-size: 13px;
    }

    .blogs-hero-glow-1,
    .blogs-hero-glow-2,
    .blogs-hero-glow-3 {
        filter: blur(40px);
    }
}

@media (max-width: 480px) {
    .blogs-hero {
        padding: 100px 16px 70px;
    }

    .filter-chip {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Featured Blogs Grid Styles ? Premium Refinement */
.featured-blogs-section {
    padding: 120px 0 60px;
    background: #ffffff;
}

.featured-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}

.featured-main .blog-card-image {
    aspect-ratio: 16 / 10;
    border-radius: 36px;
    /* Extra rounded for premium feel */
    margin-bottom: 35px;
}

.featured-main .blog-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 25px;
    color: #011218;
}

.featured-main .blog-excerpt {
    font-size: 16px;
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 35px;
    max-width: 90%;
}

/* Sidebar List Styles ? Ultra Compact & Aligned */
.featured-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Align top/bottom with main post */
    height: 100%;
}

.horizontal-card {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.horizontal-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.horizontal-card .blog-card-image {
    width: 140px;
    /* Reduced further */
    height: 95px;
    /* Reduced further */
    flex-shrink: 0;
    margin-bottom: 0;
    border-radius: 12px;
    aspect-ratio: auto;
}

.horizontal-card .blog-card-content {
    flex: 1;
}

.horizontal-card .blog-category {
    font-size: 10px;
    margin-bottom: 5px;
}

.horizontal-card .blog-title {
    font-size: 16px;
    /* Reduced further */
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.horizontal-card .blog-meta {
    gap: 12px;
}

.blog-meta {
    font-weight: 500;
    color: #94a3b8;
}

.blog-meta .author {
    color: #64748b;
    font-weight: 600;
}

/* Responsive Grid */
@media (max-width: 1100px) {
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .horizontal-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .horizontal-card .blog-card-image {
        width: 100%;
        aspect-ratio: 16/9;
    }

    .featured-main .blog-title {
        font-size: 24px;
    }
}

/* Latest Articles Section Redesign (3-Column Grid) */
/* ==========================================
   LATEST ARTICLES ? PREMIUM DESIGN
   ========================================== */

.latest-articles-section {
    padding: 140px 0;
    background: linear-gradient(135deg, #ffffff, #f1f5fb 100%);
    position: relative;
    width: 100%;
}

.latest-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.latest-articles-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(192, 38, 211, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* HEADER SECTION - FULL WIDTH AT TOP */
.latest-header {
    text-align: center;
    margin-bottom: 100px;
    animation: fadeInDown 0.8s ease-out;
}

.latest-header h2 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 24px;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.latest-header p {
    font-size: 17px;
    color: #64748b;
    line-height: 1.8;
    max-width: 580px;
    margin: 0 auto;
    font-weight: 500;
}

/* ARTICLES GRID - 3 COLUMNS */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 100px;
}

/* VERTICAL CARD - PREMIUM STYLING */
.vertical-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    border: none;
    transition: none;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vertical-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #c026d3 0%, #9f1239 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vertical-card:hover {
    transform: none;
    box-shadow: none;
}

.vertical-card:hover::before {
    display: none;
}

/* IMAGE CONTAINER */
.vertical-card .blog-card-image {
    position: relative;
    overflow: hidden;
    height: 200px;
    border-radius: 20px;
    background: #f1f5f9;
    margin-bottom: 20px;
}

.vertical-card .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vertical-card .blog-card-image:hover img {
    transform: scale(1.08) rotate(0.5deg);
}

.vertical-card .blog-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, 0.05) 100%);
    pointer-events: none;
}

/* CONTENT */
.vertical-card .blog-card-content {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* CATEGORY BADGE - ENHANCED */
.vertical-card .blog-category {
    font-size: 13px;
    font-weight: 500;
    color: #D24D96;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px;
    display: inline-block;
    width: fit-content;
}

.vertical-card:hover .blog-category {
    transform: none;
}

/* TITLE - PREMIUM */
.vertical-card .blog-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
    color: #000000;
}

.vertical-card .blog-title a {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
    word-spacing: -2px;
}

.vertical-card .blog-title a:hover {
    color: #c026d3;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* EXCERPT */
.vertical-card .blog-excerpt {
    font-size: 15px;
    color: #64748b;
    line-height: 1.68;
    margin-bottom: 20px;
    flex-grow: 1;
    font-weight: 500;
}

/* META INFO - PREMIUM */
.vertical-card .blog-meta {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    margin-top: auto;
}

.vertical-card .author {
    font-weight: 600;
    color: #64748b;
}

.vertical-card .divider {
    width: 4px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
    flex-shrink: 0;
}

.vertical-card .read-time {
    font-weight: 500;
}

/* PAGINATION - PREMIUM */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 80px;
}

/* paginate_links outputs <ul class="page-numbers"><li>? */
.blog-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-pagination .page-numbers li {
    list-style: none;
}

/* Every clickable page item */
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid #e2e8f0;
    font-size: 14px;
}

.blog-pagination .page-numbers a:hover:not(.current) {
    background: #f8fafc;
    border-color: #D24D96;
    color: #D24D96;
    transform: translateY(-2px);
}

.blog-pagination .page-numbers .current {
    background: #D24D96;
    border-color: #D24D96;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(174, 74, 142, 0.3);
    font-weight: 700;
}

.blog-pagination .page-numbers .prev,
.blog-pagination .page-numbers .next {
    font-size: 12px;
}

.blog-pagination .page-numbers .dots {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: default;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* Responsive */
@media (max-width: 1024px) {
    .latest-articles-section {
        padding: 100px 0;
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        margin-bottom: 80px;
    }

    .latest-header h2 {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .latest-articles-section {
        padding: 80px 0;
    }

    .latest-header {
        margin-bottom: 70px;
    }

    .latest-header h2 {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .latest-header p {
        font-size: 15px;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 60px;
    }

    .vertical-card {
        border-radius: 20px;
    }

    .vertical-card .blog-card-image {
        height: 180px;
        border-radius: 20px 20px 0 0;
    }

    .vertical-card .blog-card-content {
        padding: 20px;
    }

    .vertical-card .blog-title {
        font-size: 20px;
    }

    .blog-pagination {
        gap: 6px;
    }

    .blog-pagination .page-numbers a,
    .blog-pagination .page-numbers span {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
    }
}

/* NOTE: Global white heading removed ? each dark-bg section sets its own color */
/* Dark hero/banner heading colours are set inline on those sections */

/* ===== FORCE RESET CF7 DEFAULT ===== */
.contact-form-card .wpcf7-form p {
    margin: 0 !important;
}

/* ===== CARD DESIGN ===== */
.contact-form-card {
    background: #f4f4f6;
    padding: 60px !important;
    border-radius: 18px;
}

/* ===== FLEX GRID ===== */
.contact-form-card .wpcf7-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px 30px !important;
}

/* Two columns */
.contact-form-card .wpcf7-form>p {
    width: calc(50% - 15px) !important;
}

/* Full width textarea */
.contact-form-card .wpcf7-form>p:nth-last-child(2) {
    width: 100% !important;
}

/* Full width button */
.contact-form-card .wpcf7-form>p:last-child {
    width: 100% !important;
    text-align: center !important;
}

/* Labels */
.contact-form-card label {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Inputs */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e2e5 !important;
    background: #fff !important;
    font-size: 14px !important;
}

/* Focus */
.contact-form-card input:focus,
.contact-form-card textarea:focus {
    border-color: #b23b8f !important;
    box-shadow: 0 0 0 3px rgba(178, 59, 143, 0.1) !important;
    outline: none !important;
}

/* Textarea */
.contact-form-card textarea {
    height: 150px !important;
    resize: none !important;
}

/* Intl phone fix */
.contact-form-card .iti {
    width: 100% !important;
}

.contact-form-card .iti input {
    padding-left: 70px !important;
    height: 48px !important;
}

/* Button */
.contact-form-card input[type="submit"] {
    background: #D24D96 !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 35px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: 0.3s ease !important;
}

.contact-form-card input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
}

/* Footer text */
.form-footer-note {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-top: 18px;
}

/* Mobile */
@media (max-width: 768px) {
    .contact-form-card {
        padding: 35px 25px !important;
    }

    .contact-form-card .wpcf7-form>p {
        width: 100% !important;
    }
}

/* ===== CARD BACKGROUND ===== */
.contact-form-card {
    background: #ffffff;
    padding: 70px;
    border-radius: 18px;
    max-width: 1000px;
    margin: auto;
}

/* Remove default CF7 <p> spacing */
.contact-form-card .wpcf7-form p {
    margin: 0 !important;
}

/* ===== GRID LAYOUT ===== */
.custom-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.half {
    width: calc(50% - 20px);
}

.form-group.full {
    width: 100%;
}

.form-group.center {
    text-align: center;
}

/* ===== LABEL STYLE ===== */
.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}

/* ===== INPUT STYLE ===== */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #e6e6ea;
    background: #ffffff;
    font-size: 14px;
    transition: all 0.25s ease;
}

/* Placeholder color */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #b5b5b5;
}

/* Focus effect */
.form-group input:focus,
.form-group textarea:focus {
    border-color: #b23b8f;
    box-shadow: 0 0 0 3px rgba(178, 59, 143, 0.08);
    outline: none;
}

/* ===== TEXTAREA ===== */
.form-group textarea {
    height: 170px;
    resize: none;
}

/* ===== PHONE FIELD FIX ===== */
.contact-form-card .iti {
    width: 100%;
}

.contact-form-card .iti input {
    padding-left: 75px !important;
    height: 52px;
    border-radius: 12px;
}

/* ===== BUTTON ===== */
.form-group input[type="submit"] {
    background: #D24D96;
    border: none;
    color: #fff;
    padding: 14px 38px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-group input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(142, 68, 173, 0.3);
}

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

    .contact-form-card {
        padding: 40px 25px;
    }

    .form-group.half {
        width: 100%;
    }
}

/* ==========================================================================
   Single Post Page Styles ? Blog Detail
   ========================================================================== */

/* ==========================================================================
   Single Post Page Styles ? Blog Detail
   ========================================================================== */

.single-post-main {
    display: block;
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

/* ---- Blog Detail Banner ---- */
.blog-detail-banner {
    background: #030e14;
    position: relative;
    overflow: hidden;
    padding: 120px 20px 80px;
    text-align: center;
}

/* Glowing orb on the left */
.blog-detail-banner::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -150px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(228, 77, 147, 0.45) 0%, rgba(155, 66, 141, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
}

.blog-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-banner-title {
    display: inline-block;
    font-size: 54px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 24px;
    font-family: 'Manrope', sans-serif;
}

/* Breadcrumb */
.blog-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-breadcrumb a,
.blog-breadcrumb .bc-current {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.blog-breadcrumb a:hover {
    color: #e44d93;
}

.blog-breadcrumb .bc-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
}

/* ---- Blog Post Body ---- */
.blog-post-body {
    background: #ffffff;
    padding-bottom: 120px;
}

.blog-post-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 20px 40px;
}

.blog-post-heading {
    font-size: 56px;
    font-weight: 500;
    color: #011218;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.blog-post-excerpt {
    font-size: 18px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Post Meta Row */
.blog-post-meta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    border: 1px solid #f1f5f9;
    border-radius: 40px;
    background: #ffffff;
}

.blog-post-meta img {
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.meta-author,
.meta-date,
.meta-read {
    font-size: 14px;
    color: #64748b;
}

.meta-author {
    color: #011218;
    font-weight: 500;
}

.meta-sep {
    color: #e2e8f0;
    font-size: 14px;
    display: none;
    /* Using border meta now */
}

/* Featured Image */
.blog-post-thumbnail {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.blog-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 32px;
}

/* Blog Content Container */
.blog-content-container {
    max-width: 900px;
    /* Centered narrow width for readability */
    margin: 0 auto;
}

.blog-main-article {
    width: 100%;
}

/* Content Article Card */
.blog-post-content-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
}

.blog-post-content {
    font-size: 17px;
    line-height: 1.8;
    color: #475569;
}

.blog-post-content h2 {
    font-size: 28px;
    font-weight: 600;
    color: #011218;
    margin: 40px 0 20px;
}

.blog-post-content p {
    margin-bottom: 24px;
}

/* Tags in Card */
.blog-post-tags {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blog-post-tags .tags-label {
    font-weight: 600;
    color: #011218;
    font-size: 15px;
}

.blog-post-tags a {
    color: #64748b;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-post-tags a:hover {
    color: #e44d93;
}

/* Post Nav below card */
.blog-main-article .post-navigation {
    margin-top: 40px;
    max-width: 100%;
}


@media (max-width: 768px) {
    .blog-post-heading {
        font-size: 36px;
    }

    .blog-post-content-card {
        padding: 30px 20px;
    }

    .blog-banner-label {
        font-size: 40px;
    }
}

.nav-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    color: #D24D96;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    display: block;
}

.nav-title {
    font-size: 16px;
    font-weight: 700;
    color: #011218;
    line-height: 1.4;
}

.nav-next {
    text-align: right;
}

@media (max-width: 768px) {
    .error-actions {
        display: none !important;
    }
}

/* Comments */
.post-comments-wrap {
    max-width: 760px;
    margin: 60px auto 0;
    padding: 0 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-banner-title {
        font-size: 40px;
    }

    .blog-detail-banner {
        padding: 80px 20px 80px;
    }

    .blog-post-heading {
        font-size: 32px;
    }

    .blog-post-content {
        font-size: 16px;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }
}


.single-post-main {
    display: block;
    width: 100%;
    overflow-x: hidden;
}

.single-post-container {
    padding-bottom: 100px;
    background: #fff;
    width: 100%;
}

.post-header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 100px calc(50vw - 50%) 140px;
}

.post-header {
    background: linear-gradient(135deg, #011218 0%, #032b3a 100%);
    padding: 100px 0 140px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.post-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(174, 74, 142, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.post-meta-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.post-category {
    background: #D24D96;
    color: #fff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.post-title {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.1;
    max-width: 900px;
    margin: 0 auto 40px;
    letter-spacing: -2px;
}

.post-author-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.post-author-box img {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 48px;
    height: 48px;
}

.author-info {
    text-align: left;
}

.author-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 2px;
}

.author-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* Featured Image */
.post-featured-image {
    max-width: 1000px;
    margin: -80px auto 60px;
    position: relative;
    z-index: 5;
    padding: 0 20px;
}

.post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 32px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* Content Area */
.post-content-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.post-content {
    font-size: 18px;
    line-height: 1.8;
    color: #334155;
}

.post-content h2,
.post-content h3 {
    color: #011218;
    margin: 50px 0 25px;
    font-weight: 700;
}

.post-content h2 {
    font-size: 32px;
}

.post-content h3 {
    font-size: 26px;
}

.post-content p {
    margin-bottom: 30px;
}

.post-content blockquote {
    border-left: 5px solid #D24D96;
    padding: 20px 30px;
    margin: 40px 0;
    background: #f8fafc;
    border-radius: 0 16px 16px 0;
    font-style: italic;
    color: #011218;
    font-size: 22px;
}

/* Footer / Navigation */
.post-footer {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e2e8f0;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.tags-label {
    font-weight: 700;
    color: #011218;
    margin-right: 10px;
}

.post-tags a {
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s ease;
}

.post-tags a:hover {
    background: #D24D96;
    color: #fff;
}

/* Post Navigation */
.post-navigation {
    max-width: 1000px;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 40px 20px;
    background: #f8fafc;
    border-radius: 32px;
}

.post-navigation .nav-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
}

.post-navigation a {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.post-navigation a:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
    border-color: #D24D96;
}

.nav-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    color: #D24D96;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.nav-title {
    font-size: 18px;
    font-weight: 700;
    color: #011218;
}

.nav-next {
    text-align: right;
}

@media (max-width: 768px) {
    .post-title {
        font-size: 36px;
    }

    .post-header {
        padding: 80px 20px 100px;
    }

    .post-featured-image {
        margin-top: -60px;
    }

    .post-navigation {
        flex-direction: column;
    }

    .post-navigation a {
        padding: 20px;
    }
}

/* ==========================================================================
   Case Studies Page
   ========================================================================== */

.cs-page {
    background: #fff;
    overflow-x: hidden;
}

/* ---- Hero ---------------------------------------------------------------- */
.cs-hero {
    position: relative;
    background-color: #060b14;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 160px 20px 100px;
}

/* Dark overlay so text stays readable over the image */
.cs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 20, 0.45);
    z-index: 1;
}

.cs-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 2;
}

.cs-glow-left {
    width: 800px;
    height: 800px;
    top: -200px;
    left: -200px;
}

.cs-glow-right {
    width: 600px;
    height: 600px;
    bottom: -150px;
    right: -100px;
}

.cs-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
}

.cs-hero-title {
    font-size: 64px;
    font-weight: 400;
    color: #ffffff !important;
    letter-spacing: -2px;
    line-height: 1.1;
    margin: 0 0 24px;
}

.cs-hero-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.8;
    max-width: 540px;
    margin: 0 auto;
}

/* ---- Container ----------------------------------------------------------- */
.cs-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    padding-top: 40px;
}

/* ---- Intro Section ------------------------------------------------------- */
.cs-intro-section {
    padding: 100px 0 0px;
    background: #fff;
    text-align: center;
    overflow: hidden;
}

.cs-intro-text {
    margin-bottom: 50px;
}

.cs-intro-heading {
    font-size: 44px;
    font-weight: 500;
    color: #011218 !important;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin: 0 auto 24px !important;
    /* Centered */
    max-width: 800px;
}

/* ---- 404 Page Styles ----------------------------------------------------- */
.error-404-page {
    background-color: #ffffff;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.error-404-content {
    width: 100%;
    margin: 0;
}

.error-404-image img {
    width: 100%;
    height: auto;
    display: block;
}

.error-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    z-index: 10;
    display: none;
}

.back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: linear-gradient(90deg, #AE4A8E 0%, #D24D96 100%);
    color: #ffffff;
    text-decoration: none !important;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(210, 77, 150, 0.3);
}

.cs-pink {
    background: linear-gradient(135deg, #D24D96 0%, #e855c0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.cs-intro-sub {
    font-size: 16px;
    color: #64748b !important;
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto 50px !important;
}

/* ---- Filter Dropdowns ---------------------------------------------------- */
.cs-filters {
    display: none;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 50;
}

.cs-filter-dropdown {
    position: relative;
}

.cs-filter-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: #ffffff !important;
    background-image: none !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #000000 !important;
    cursor: pointer;
    transition: none !important;
    min-width: 160px;
    justify-content: center;
}

.cs-filter-btn[aria-expanded="true"] {
    border-color: #000000;
}

.cs-filter-btn svg {
    transition: transform 0.25s ease;
}

.cs-filter-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.cs-filter-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    padding: 10px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-filter-btn[aria-expanded="true"]~.cs-filter-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
    display: none;
}

.cs-filter-item {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
}

.cs-filter-item:hover,
.cs-filter-item.is-active {
    background: #f8fafc;
    color: #D24D96;
    font-weight: 600;
}

/* ---- Cards Grid ---------------------------------------------------------- */
.cs-grid-section {
    background: #fff;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 200px;
}

.cs-card {
    transition: all 0.3s ease;
}

.cs-card-image-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 1.35 / 1;
    overflow: hidden;
    border-radius: 24px;
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Varied Backgrounds as per design */
/* .cs-grid .cs-card:nth-child(3n+1) .cs-card-image-wrap {
    background-color: #d9f1e1;
} */

/* Mint */
/* .cs-grid .cs-card:nth-child(3n+2) .cs-card-image-wrap {
    background-color: #1a1a1a;
} */

/* Dark */
/* .cs-grid .cs-card:nth-child(3n+3) .cs-card-image-wrap {
    background-color: #8a8b41;
} */

/* Olive */

.cs-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.cs-card:hover .cs-card-img {
    transform: scale(1.06);
}

.cs-card-meta {
    padding: 0 4px;
}

.cs-card-industry {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    /* Lighter grey as per design */
    display: block;
    margin-bottom: 8px;
    text-transform: capitalize;
}

.cs-card-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a !important;
    margin: 0 0 12px !important;
    line-height: 1.25;
}

.cs-card-title a {
    text-decoration: none;
    color: #000000 !important;
    transition: color 0.2s ease;
}

.cs-card-title a:hover {
    color: #D24D96 !important;
}

body.page-template-case-studies .site-content .cs-card-title a {
    color: #000000 !important;
}

body.page-template-case-studies .site-content .cs-card-title a:hover {
    color: #D24D96 !important;
}

body.page-template-case-studies .site-content .cs-filter-item {
    color: #475569 !important;
}

body.page-template-case-studies .site-content .cs-filter-item:hover,
body.page-template-case-studies .site-content .cs-filter-item.is-active {
    color: #D24D96 !important;
}

body.page-template-case-studies .site-content .cs-pagination .page-numbers a {
    color: #64748b !important;
}

body.page-template-case-studies .site-content .cs-pagination .page-numbers a:hover {
    color: #D24D96 !important;
}

.cs-card-result {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 20px !important;
}

.cs-card-explore {
    font-size: 14px;
    font-weight: 700;
    color: #000000 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.cs-card-explore:hover {
    gap: 10px;
    color: #D24D96;
}

/* ---- Pagination ---------------------------------------------------------- */
.cs-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.cs-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-pagination .page-numbers li {
    list-style: none;
}

.cs-pagination .page-numbers a,
.cs-pagination .page-numbers span {
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1.5px solid #e2e8f0;
    font-size: 14px;
}

.cs-pagination .page-numbers a:hover:not(.current) {
    background: #f8fafc;
    border-color: #D24D96;
    color: #D24D96;
    transform: translateY(-2px);
}

.cs-pagination .page-numbers .current {
    background: #D24D96;
    border-color: #D24D96;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(174, 74, 142, 0.3);
    font-weight: 700;
}

.cs-pagination .page-numbers .dots {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: default;
}

/* ---- No Results ---------------------------------------------------------- */
.cs-no-results {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
    font-size: 18px;
}

.cs-no-results a {
    color: #D24D96;
    font-weight: 600;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .cs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-intro-heading {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .cs-hero-title {
        font-size: 40px;
    }

    .cs-hero {
        padding: 80px 20px;
    }

    .cs-intro-section {
        padding: 70px 0 40px;
    }

    .cs-intro-heading {
        font-size: 34px;
    }

    .cs-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-grid-section {
        padding: 20px 0 0px;
    }
}

/* Force whole form to left ? covers any noptin form ID */
.footer-newsletter [class*="noptin-form"],
.footer-newsletter [id*="noptin-form"] {
    text-align: left !important;
    margin: 0 !important;
}

/* Override footer wrapper */
.footer-newsletter [class*="noptin-form-footer"],
.footer-newsletter [id*="noptin-form"] .noptin-form-footer {
    display: block !important;
    margin: 0 !important;
    justify-content: flex-start !important;
}

/* Override fields container */
.footer-newsletter [class*="noptin-form-fields"],
.footer-newsletter .noptin-fields-wrap {
    display: block !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   Clients Pyramid Grid Styles
   ========================================================================== */
/* Lower clients styles removed and consolidated above */

/* Responsive adjustments for pyramid grid */
@media (max-width: 992px) {
    .client-logo-box {
        width: 160px;
        height: 80px;
        padding: 16px;
    }

    .clients-row {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .clients-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .client-logo-box {
        width: 140px;
        height: 70px;
    }
}

/* ==========================================================================
   Insights Page - Premium Redesign
   ========================================================================== */

.insights-page {
    background: #ffffff;
    overflow-x: hidden;
}

/* Ensure Astra container behaves as a block in this layout */
.insights-page .ast-container {
    display: block !important;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ---- Hero Section: Dark Glow Style ---- */
.insights-hero {
    position: relative;
    padding: 160px 0 120px;
    text-align: center;
    overflow: hidden;
    color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.insights-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.ins-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgb(6 6 6 / 0%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin-bottom: 35px;
    backdrop-filter: blur(10px);
}

.insights-hero-content h1 {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
    color: #ffffff;
}

.insights-hero-content p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    max-width: 650px;
    margin: 0 auto 50px;
    line-height: 1.7;
}

.purple-gradient-text {
    background: linear-gradient(135deg, #D24D96 0%, #A34BB9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.white-text {
    color: #ffffff;
}

/* Search Bar: Glassmorphism */
.ins-search-container {
    max-width: 550px;
    margin: 0 auto;
}

.ins-search-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 2px 25px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
}

.ins-search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(210, 77, 150, 0.5);
    box-shadow: 0 0 30px rgba(210, 77, 150, 0.15);
}

.ins-search-wrapper .search-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    margin-right: 15px;
}

.ins-search-field {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 100%;
    padding: 16px 0;
    font-size: 16px;
    outline: none;
}

.ins-search-field::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ---- Main Featured Section ---- */
.insights-featured-section {
    padding: 100px 0 60px;
}

.ins-featured-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    width: 100%;
    min-width: 0;
}

/* General Card V2 Styling: Flat Editorial Look */
.ins-card-v2 {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: none;
}

.ins-card-v2 .ins-card-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 25px;
    background: #f8fafc;
}

.ins-card-v2 .ins-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    display: block;
}

.ins-card-v2 .ins-card-image:hover img {
    transform: scale(1.08);
}

.ins-card-v2 .ins-category,
.ins-category,
.ins-category-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    background: #D24D96;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.ins-card-v2 .ins-card-content {
    padding: 0;
}

/* Meta Data */
.ins-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.ins-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.ins-author {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.ins-meta-sep {
    color: #cbd5e1;
}

.ins-date {
    font-size: 14px;
    color: #64748b;
}

/* Typography */
.ins-card-v2 .ins-card-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 18px;
    color: #011218;
}

.ins-card-v2.horizontal-layout .ins-card-title {
    font-size: 22px;
}

.ins-card-excerpt {
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 25px;
}

.ins-read-more {
    font-size: 15px;
    font-weight: 700;
    color: #D24D96;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Sidebar Styling */
.ins-popular-sidebar .sidebar-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 35px;
    color: #011218;
}

.ins-popular-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ins-popular-item {
    display: flex;
    gap: 20px;
    text-decoration: none;
    align-items: flex-start;
}

.ins-pop-thumb {
    flex-shrink: 0;
    width: 140px;
    height: 95px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
}

.ins-pop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ins-popular-item:hover .ins-pop-thumb img {
    transform: scale(1.1);
}

.ins-pop-content h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #011218;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.ins-pop-content .ins-meta {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

/* Featured Subrow (2 Cards Horizontal) */
.ins-featured-subrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    width: 100%;
    min-width: 0;
}

.ins-card-v2.horizontal-layout {
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
}

.ins-card-v2.horizontal-layout .ins-card-image {
    flex: 0 0 250px;
    width: 250px;
    height: 170px;
    margin-bottom: 0;
}

/* ---- Latest Articles Grid ---- */
.ins-latest-section {
    padding: 80px 0 120px;
}

.ins-section-header {
    margin-bottom: 60px;
    max-width: 600px;
}

.ins-section-header h2 {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #011218;
    letter-spacing: -1px;
}

.ins-section-header p {
    font-size: 17px;
    color: #64748b;
    line-height: 1.6;
}

.ins-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    width: 100%;
    min-width: 0;
}

.ins-latest-grid .ins-card-v2 .ins-card-title {
    font-size: 22px;
    line-height: 1.4;
}

.ins-latest-grid .ins-card-image {
    height: 240px;
}

/* Responsiveness */
@media (max-width: 1200px) {
    .ins-featured-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .ins-main-featured {
        max-width: 800px;
    }
}

@media (max-width: 992px) {
    .insights-hero-content h1 {
        font-size: 44px;
    }

    .ins-latest-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ins-card-v2.horizontal-layout {
        flex-direction: column;
        gap: 20px;
    }

    .ins-card-v2.horizontal-layout .ins-card-image {
        width: 100%;
        flex: none;
        height: 220px;
    }
}

@media (max-width: 768px) {
    .insights-hero {
        padding: 120px 0 80px;
    }

    .insights-hero-content h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .ins-featured-subrow {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ins-latest-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ins-section-header h2 {
        font-size: 36px;
    }
}

/* Success Stories (Testimonials) Section - 70/15/15 Layout */
.testimonials-section {
    position: relative;
    padding: 100px 0;
    overflow: visible;
    background: #ffffff;
}

.testimonials-section .partners-container {
    max-width: 1400px;
    margin: 0 auto;
    overflow: visible;
}

.testimonials-carousel-wrapper {
    position: relative;
    width: 100%;
    margin-top: 60px;
}

.testimonials-carousel {
    width: 100%;
    overflow: visible;
}

.testimonial-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.testimonial-card {
    flex: 0 0 15%;
    /* Side card occupies 15% */
    max-width: 15%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

.testimonial-card.active {
    flex: 0 0 70%;
    /* Active card occupies 70% */
    max-width: 70%;
    z-index: 10;
}

.testimonial-card:not(.active) {
    opacity: 0.6;
    transform: scale(0.95);
    filter: blur(5px) brightness(0.7);
}

.testimonial-card-image {
    width: 100%;
    height: 600px;
}

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

.testimonial-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 40%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 25%);
    /* Top-down white gradient as requested */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.testimonial-card.active .testimonial-card-overlay {
    opacity: 1;
}

.testimonial-name {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}

.testimonial-company {
    display: block;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.play-video-btn {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 28px;
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.play-video-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.play-icon {
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #D24D96;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* REMOVED REDUNDANT DOTS */

/* REMOVED REDUNDANT DOT */

/* REMOVED REDUNDANT ACTIVE DOT */

@media (max-width: 1024px) {
    .testimonial-card.active {
        flex: 0 0 80%;
        max-width: 80%;
    }

    .testimonial-card:not(.active) {
        flex: 0 0 8%;
        max-width: 8%;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .testimonial-card:not(.active) {
        display: none;
    }
}

/* Global Button Hover Text Override */
button:hover,
.button:hover,
.btn:hover,
input[type='submit']:hover,
input[type='button']:hover,
.lets-talk-btn:hover,
.explore-more-btn:hover,
.our-story-btn:hover,
.purple-pill-btn:hover,
.white-pill-btn:hover,
.blog-learn-more:hover,
.cs-card-explore:hover,
.ins-read-more:hover,
.video-control-btn:hover,
.people-button:hover,
.play-video-btn:hover,
.footer-cta-button:hover,
.slider-nav-btn:hover,
.slider-explore-btn:hover,
.download-brochure-btn:hover {
    color: #000000 !important;
}

/* ---- List Layout FAQ Design (Iteration 10) ------------------------------- */
/* ============================================================
   FAQ PAGE ? colours matched to design reference image
   ============================================================ */

/* -- Hero -- */
.faq-page .faq-hero-new {
    position: relative;
    background: #0a0010;
    /* near-black base */
    background-image:
        radial-gradient(ellipse 70% 60% at 85% 10%,
            rgba(160, 32, 200, 0.55) 0%,
            rgba(120, 20, 180, 0.30) 40%,
            transparent 70%),
        /* purple glow top-right */
        radial-gradient(ellipse 50% 40% at 90% 0%,
            rgba(210, 77, 150, 0.35) 0%,
            transparent 60%);
    /* pink accent top-right */
    padding: 140px 20px 100px;
    text-align: center;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
}

.faq-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.faq-hero-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(32px, 5vw, 58px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px;
    margin: 0 !important;
}

/* -- FAQ body section -- */
.faq-list-section {
    padding: 90px 0 120px;
    background: #ffffff;
    /* pure white, matches image */
}

.faq-body-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: visible;
}

/* -- Section header -- */
.faq-list-header {
    text-align: center;
    margin-bottom: 44px;
}

/* "Got Questions?"  bold black, matches image */
.faq-got-q {
    font-family: 'Manrope', sans-serif;
    font-size: 36px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    line-height: 1.1 !important;
    margin: 0 0 4px !important;
}

/* "We've Got Answers"  pink/magenta gradient, matches image */
.faq-got-a {
    font-family: 'Manrope', sans-serif;
    font-size: 36px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin: 0 0 20px !important;
    background: linear-gradient(to right, #D24D96, #8C3A86) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

/* Subtitle */
.faq-got-sub {
    font-size: var(--fs-body) !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* -- Category pills -- */
.faq-cat-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

/* Inactive pill  white bg, dark border, dark text (matches image) */
.faq-pill {
    padding: 10px 36px;
    border-radius: 50px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1.5px solid #2d2d2d;
    background: #ffffff;
    color: #1a1a1a;
    letter-spacing: 0.1px;
    -webkit-text-fill-color: #1a1a1a;
}

/* Active pill  site gradient, white text */
.faq-pill.active,
button.faq-pill.active {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(210, 77, 150, 0.3);
}

/* Inactive pill */
.faq-pill:not(.active) {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    background: #ffffff;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

.faq-pill:hover:not(.active) {
    border-color: #D24D96;
    color: #D24D96 !important;
    -webkit-text-fill-color: #D24D96 !important;
}

/* -- Accordion -- */
.faq-list-accordion {
    width: 100%;
}

/* Each row  bottom border only, matches image */
.faq-list-item {
    border-bottom: 1px solid #e8ecf0;
    padding: 22px 0;
    cursor: pointer;
}

.faq-list-item:first-child {
    border-top: 1px solid #e8ecf0;
}

.faq-list-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Question text  dark/black, matches image */
.faq-list-question h4 {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-h4) !important;
    font-weight: 400 !important;
    color: #111111 !important;
    margin: 0 !important;
    line-height: 1.5;
    transition: color 0.25s ease;
    flex: 1;
}

/* Chevron icon  grey, matches image */
.faq-list-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    /* grey chevron, matches image */
    font-size: 13px;
    transition: color 0.25s ease;
}

/* Answer ? hidden by default */
.faq-list-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    opacity: 0;
}

.faq-list-answer p {
    padding-top: 12px;
    font-size: var(--fs-body) !important;
    color: #475569 !important;
    /* grey answer text, matches image */
    line-height: 1.75 !important;
    margin: 0 !important;
    max-width: 88%;
}

/* Active state */
.faq-list-item.active .faq-list-answer {
    max-height: 600px;
    opacity: 1;
}

/* Active question text stays dark (not purple) ? matches image */
.faq-list-item.active .faq-list-question h4 {
    color: #111111 !important;
    /* always black, never changes */
}

/* Active chevron ? grey (matches image, no colour change on open) */
.faq-list-item.active .faq-list-icon {
    color: #6b7280;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .faq-page .faq-hero-new {
        padding: 100px 20px 70px;
        min-height: auto;
    }

    .faq-list-section {
        padding: 60px 0 80px;
    }

    .faq-body-wrap {
        padding: 0 4px;
    }

    .faq-pill {
        padding: 9px 24px;
        font-size: 13px;
    }

    .faq-list-question h4 {
        font-size: 16px !important;
    }

    .faq-list-answer p {
        max-width: 100%;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .faq-cat-selector {
        gap: 8px;
    }

    .faq-pill {
        padding: 8px 20px;
        font-size: 12px;
    }
}

/* =========================================
   Web Development Page - Responsive Styles
   ========================================= */

.web-dev-intro-container {
    padding: 80px 20px 80px 20px;
    background: #ffffff;
    text-align: center;
}

.web-dev-intro-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* Legacy classes � kept for backwards compatibility but now
   overridden by .web-dev-intro-wrapper h2 at the top of this file. */
.web-dev-intro-title {
    font-size: 34px;
    font-weight: 500 !important;
    color: #111;
    margin-bottom: 10px;
    line-height: 1.3;
}

.web-dev-intro-subtitle {
    font-size: 42px;
    font-weight: 600 !important;
    background: linear-gradient(90deg, #e6007e, #7f0c81);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 30px;
    line-height: 1.3;
}

.web-dev-intro-text {
    font-size: 17px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 25px;
}

.web-dev-intro-text:last-child {
    margin-bottom: 0;
}

.web-dev-services-section {
    padding: 20px 0;
    background: #ffffff;
    width: 100%;
    display: block;
}

.web-dev-services-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.web-dev-service-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 80px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.web-dev-service-col {
    flex: 1;
    min-width: 280px;
}

.web-dev-service-img {
    width: 100%;
    display: block;
}

.web-dev-service-title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #111;
}

.web-dev-service-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* Responsive adjustments for Web Dev padding and titles */
@media (max-width: 768px) {
    .web-dev-intro-container {
        padding: 80px 20px 40px 20px;
    }

    .web-dev-intro-title {
        font-size: 34px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        display: block;
    }

    .web-dev-intro-subtitle {
        font-size: 34px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        display: block;
    }

    .web-dev-intro-text {
        font-size: 16px;
    }

    .web-dev-services-section {
        padding: 50px 0;
    }

    .web-dev-service-row {
        gap: 40px;
        margin-bottom: 60px;
        text-align: center;
        flex-direction: column;
    }

    /* Image column always first on mobile */
    .web-dev-service-col.img-col {
        order: -1;
    }

    /* Text column always second on mobile */
    .web-dev-service-col:not(.img-col) {
        order: 1;
    }

    .web-dev-service-col {
        width: 100%;
        flex: none;
    }

    .web-dev-service-img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .web-dev-service-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .web-dev-service-desc {
        font-size: 16px;
    }

    .web-dev-service-desc br {
        display: none;
    }

    .tech-hero {
        padding: 50px 20px !important;
    }

    .tech-hero h2 {
        font-size: 28px !important;
    }
}

/* =========================================
   Featured Blogs Layout (1 Large, 3 Small)
   ========================================= */

.featured-blogs-section {
    padding: 100px 0 50px;
    background: #ffffff;
}

.latest-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.featured-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
}

.featured-main .blog-card-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 25px;
}

.featured-sidebar {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Force override of default .blog-card styles for featured section */
.featured-blogs-section .blog-card {
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: none !important;
    display: block !important;
}

.featured-blogs-section .horizontal-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 25px !important;
    align-items: flex-start !important;
    padding-bottom: 50px !important;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0 !important;
}

.featured-blogs-section .horizontal-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.featured-blogs-section .horizontal-card .blog-card-image {
    flex: 0 0 200px !important;
    width: 200px !important;
    display: block !important;
    overflow: hidden;
    border-radius: 16px;
    height: 140px;
}

.featured-blogs-section .horizontal-card .blog-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 16px;
    display: block !important;
}

/* Remove hover scale for sidebar items */
.featured-blogs-section .horizontal-card:hover .blog-card-image img {
    transform: none !important;
}

.featured-blogs-section .horizontal-card .blog-card-content {
    padding: 0 !important;
    flex: 1 !important;
    display: block !important;
    margin-top: 0 !important;
}

.featured-main .blog-card-content {
    padding: 0 !important;
}

/* Typography & Meta Overrides for Featured Section */
.featured-blogs-section .blog-category {
    color: #D24D96 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.featured-blogs-section .blog-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    color: #000000 !important;
    display: block !important;
}

.featured-blogs-section .horizontal-card .blog-title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    color: #000000 !important;
}

.featured-blogs-section .blog-meta {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    font-size: 14px !important;
    color: #64748b !important;
}

.featured-blogs-section .blog-meta .divider::after {
    content: "|";
    color: #cbd5e1;
}

.featured-blogs-section .blog-excerpt {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .featured-main .blog-card-image img {
        height: auto;
        aspect-ratio: 16/9;
    }
}

@media (max-width: 768px) {
    .featured-blogs-section .horizontal-card {
        gap: 15px !important;
    }

    .featured-blogs-section .horizontal-card .blog-card-image {
        flex: 0 0 150px !important;
        width: 150px !important;
        height: 100px;
    }
}

@media (max-width: 576px) {
    .featured-blogs-section .horizontal-card {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    .featured-blogs-section .horizontal-card .blog-card-image {
        flex: 0 0 110px !important;
        width: 110px !important;
        height: 80px;
    }

    .featured-blogs-section .horizontal-card .blog-title {
        font-size: 15px !important;
        margin-bottom: 5px !important;
    }

    .featured-blogs-section .blog-category {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
}

/* =========================================
   Blog Detail Page Styles
   ========================================= */

.blog-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.blog-banner-title {
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.blog-breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-breadcrumb a:hover {
    color: #D24D96;
}

.bc-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
}

.bc-current {
    color: #D24D96;
    font-weight: 500;
}

/* Post Intro (Title, Excerpt, Meta) */
.blog-post-intro {
    text-align: center;
    max-width: 900px;
    margin: 60px auto 40px;
    padding: 0 20px;
}

.blog-post-heading {
    font-size: 42px;
    font-weight: 800;
    color: #011218;
    line-height: 1.2;
    margin-bottom: 20px;
}

.blog-post-excerpt {
    font-size: 18px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 30px;
}

.blog-post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 15px;
    color: #64748b;
    padding: 15px 30px;
    background: #f8fafc;
    border-radius: 50px;
    display: inline-flex;
}

.blog-post-meta img.avatar {
    border-radius: 50%;
    margin-right: 5px;
}

.blog-post-meta .meta-author {
    font-weight: 600;
    color: #011218;
}

.meta-sep {
    color: #cbd5e1;
}

.blog-post-meta .meta-category a {
    color: #D24D96;
    font-weight: 600;
    text-decoration: none;
}

.blog-post-meta .meta-category a:hover {
    text-decoration: underline;
}

/* Featured Image */
.blog-post-thumbnail {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.blog-post-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ---- Two Column Layout (TOC + Article) ---- */
.blog-content-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    margin: 0 auto 80px;
    max-width: 1200px;
    padding: 0 20px;
    align-items: start;
}

/* Sidebar / TOC */
.blog-toc-sidebar {
    position: sticky;
    top: 100px;
}

.blog-toc-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.toc-title {
    font-size: 20px;
    font-weight: 800;
    color: #011218;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 15px;
}

.toc-list li:last-child {
    margin-bottom: 0;
}

.toc-list a {
    color: #475569;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    display: block;
    padding-left: 15px;
    position: relative;
    transition: color 0.3s ease;
}

.toc-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.toc-list a:hover,
.toc-list a.active {
    color: #D24D96;
}

.toc-list a:hover::before,
.toc-list a.active::before {
    background: #D24D96;
}

/* Main Article Content */
.blog-post-content {
    font-size: 18px;
    color: #334155;
    line-height: 1.8;
}

.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
    color: #011218;
    font-weight: 600;
    margin: 40px 0 20px;
    line-height: 1.3;
}

.blog-post-content h2 {
    font-size: 32px;
}

.blog-post-content h3 {
    font-size: 26px;
}

.blog-post-content p {
    margin-bottom: 25px;
}

.blog-post-content img {
    border-radius: 16px;
    margin: 30px 0;
    width: 100%;
    height: auto;
}

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 30px;
    padding-left: 20px;
}

.blog-post-content li {
    margin-bottom: 10px;
}

.blog-post-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.tags-label {
    font-size: 16px;
    font-weight: 700;
    color: #011218;
    margin-right: 10px;
}

.blog-post-tags a {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-post-tags a:hover {
    background: #D24D96;
    color: #ffffff;
}

/* ---- Related Articles ---- */
.related-articles-section {
    padding: 100px 0;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.related-articles-header {
    max-width: 1200px;
    margin: 0 auto 50px;
    padding: 0 20px;
}

.related-articles-header h3 {
    font-size: 36px;
    font-weight: 800;
    color: #011218;
    letter-spacing: -0.5px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    min-width: 0;
}

.related-grid .ins-card-v2 {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.related-grid .ins-card-image {
    height: 220px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.related-grid .ins-card-title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.related-grid .ins-card-excerpt {
    font-size: 15px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.related-grid .ins-read-more {
    font-size: 14px;
}

/* Responsive Post Details */
@media (max-width: 992px) {
    .blog-content-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-toc-sidebar {
        position: static;
        order: -1;
    }

    .related-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .blog-detail-banner {
        padding: 120px 20px 50px;
        min-height: 350px;
    }

    .blog-banner-title {
        font-size: 42px;
    }

    .blog-post-intro {
        margin: 40px auto 30px;
    }

    .blog-post-heading {
        font-size: 32px;
    }

    .blog-post-meta {
        flex-direction: column;
        gap: 10px;
        padding: 15px 20px;
        border-radius: 20px;
    }

    .meta-sep {
        display: none;
    }

    .blog-post-thumbnail img {
        border-radius: 16px;
    }

    .related-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .related-articles-header h3 {
        font-size: 28px;
    }
}

/* =========================================
   Top Gap Fixes & WordPress Admin Bar Adjustments
   ========================================= */

/* Hide accessibility skip link properly to prevent flow issues */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Override Astra's default padding on Insights and Careers pages */
.page-template-insights #content.site-content,
.page-template-insights #primary.content-area,
.page-template-careers #content.site-content,
.page-template-careers #primary.content-area,
.insights-page,
.careers-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix global site container top spacing */
body,
.site,
#page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ast-below-header-wrap,
.ast-main-header-wrap,
.ast-primary-header-bar {
    display: none !important;
}

/* Adjust header positioning when logged in to account for the Admin Bar */
body.logged-in #custom-header.site-header {
    margin-top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.logged-in #custom-header.site-header {
        margin-top: 46px !important;
    }
}

input[type=email],
input[type=number],
input[type=password],
input[type=reset],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    color: #666;
    padding: .75em;
    height: auto;
    border-width: 1px;
    border-style: solid;
    border-color: var(--ast-border-color);
    border-radius: 2px;
    background: var(--ast-comment-inputs-background);
    box-shadow: none;
    box-sizing: border-box;
    transition: all .2s linear;
}

/* =========================================
   Insights Page: Hero Search Bar
   ========================================= */

.ins-search-container {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 0 20px;
}

.ins-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 8px 25px 8px 60px;
    /* Shift everything inside 60px to the right */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.ins-search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.ins-search-wrapper .search-icon {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 20px;
    opacity: 0.9;
    pointer-events: none;
}

/* Highly specific to override Astra's default input styles */
.insights-hero .ins-search-container input[type="text"].ins-search-field,
.ins-search-container input.ins-search-field {
    flex: 1 1 auto;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 16px;
    font-family: 'Manrope', sans-serif;
    padding: 5px 0 !important;
    text-indent: 5px !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100%;
}

.ins-search-container input[type="text"].ins-search-field::placeholder,
.ins-search-container input.ins-search-field::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
}

/* =========================================
   Careers Page Layout & Styling
   ========================================= */

.careers-page {
    background: #ffffff;
}

/* Careers Hero */
.careers-hero {
    position: relative;
    padding: 160px 0 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center;
}


.careers-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 50px auto;
}

.careers-hero-content h1 {
    font-size: 54px;
    font-weight: 500 !important;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
}

.careers-hero-content h1 b {
    font-weight: 800;
}

.careers-hero-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Badge Style (Shared/Global) */
.ins-badge {
    display: inline-block;
    padding: 8px 18px;
    background: rgb(6 6 6 / 34%);
    border: 1px solid rgb(255 255 255 / 30%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 25px;
    backdrop-filter: blur(5px);
}

.purple-gradient-text {
    background: #D24D96;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.white-text {
    color: #ffffff;
}

/* Open Roles Section */
.careers-roles-section {
    padding: 20px 0;
    background: #ffffff;
}

.roles-flex-layout {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.roles-left-col {
    flex: 0 0 350px;
}

.roles-left-col .section-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    color: #011218;
    margin-bottom: 40px;
    margin-top: 35px;
}

.purple-text {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hr-contact {
    margin-top: 60px;
}

.hr-contact p {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 8px;
}

.hr-email {
    font-size: 22px;
    font-weight: 700;
    color: #D24D96;
    text-decoration: none;
    border-bottom: 2px solid rgba(210, 77, 150, 0.2);
    transition: all 0.3s;
}

.hr-email:hover {
    border-color: #D24D96;
}

.roles-right-col {
    flex: 1;
}

/* Job Accordion Styles */
.role-item {
    border-bottom: 1px solid #f1f5f9;
    padding: 35px 0;
    transition: all 0.3s ease;
}

.role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.role-cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    background: #D24D96;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.role-info h3 {
    font-size: 24px;
    font-weight: 800;
    color: #011218;
    margin-bottom: 12px;
    transition: color 0.3s;
}

.role-item:hover h3 {
    color: #D24D96;
}

.role-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 15px;
    font-weight: 500;
}

.role-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.submit-app-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.submit-app-btn:hover {
    color: #000000;
}

.role-toggle-icon {
    font-size: 18px;
    color: #cbd5e1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.role-item.is-open .role-toggle-icon {
    transform: rotate(180deg);
}

.role-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.role-item.is-open .role-content {
    max-height: 1000px;
    opacity: 1;
    padding-top: 30px;
}

.role-inner-content p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    max-width: 800px;
}

/* FAQ Section */
.careers-faq-section {
    padding: 100px 0 120px;
    background: #ffffff;
}

.careers-faq-section .ast-container {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.faq-header h2 {
    font-size: 48px !important;
    font-weight: 400 !important;
    color: #111827 !important;
    margin-bottom: 2px !important;
    line-height: 1.2;
}

.faq-header h3,
.faq-header .purple-text {
    font-size: 48px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    line-height: 1.2;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.faq-header p {
    font-size: 15px;
    color: #64748b;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq-accordion-container {
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
}

.faq-item:first-child {
    border-top: 1px solid #e5e7eb;
}

.faq-header-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 26px 0;
}

.faq-header-toggle span {
    font-size: 17px;
    font-weight: 400;
    color: #111827;
    transition: color 0.3s;
    padding-right: 20px;
    line-height: 1.4;
}


.faq-toggle-icon {
    font-size: 18px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-toggle-icon {
    transform: rotate(180deg);
    color: #374151;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.faq-item.is-open .faq-content {
    max-height: 500px;
    opacity: 1;
}

.faq-inner-content p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    padding-bottom: 26px;
    margin-bottom: 0;
}

/* Responsiveness */
@media (max-width: 1200px) {
    .roles-flex-layout {
        gap: 50px;
    }

    .roles-left-col {
        flex: 0 0 300px;
    }
}

@media (max-width: 992px) {
    .careers-hero-content h1 {
        font-size: 48px;
    }

    .roles-flex-layout {
        flex-direction: column;
        gap: 60px;
    }

    .roles-left-col {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .roles-left-col .section-title {
        font-size: 48px;
    }

    .hr-contact {
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .careers-hero {
        padding: 120px 0 80px;
    }

    .careers-hero-content h1 {
        font-size: 38px;
    }

    .faq-header h2 {
        font-size: 48px;
    }

    .faq-header h3 {
        font-size: 32px;
    }

    .role-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .role-actions {
        width: 100%;
        justify-content: space-between;
    }
}

button,
.button,
.btn,
input[type='submit'],
input[type='button'],
/* Buttons: gradient base colour */
.lets-talk-btn,
.explore-more-btn,
.our-story-btn,
.purple-pill-btn,
.people-button,
.footer-cta-button,
.slider-explore-btn,
.download-brochure-btn,
.submit-btn,
.submit-app-btn,
.download-btn,
.btn-primary {
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%);
    background-image: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%);
}

.lets-talk-btn:hover,
.explore-more-btn:hover,
.our-story-btn:hover,
.purple-pill-btn:hover,
.people-button:hover,
.footer-cta-button:hover,
.slider-explore-btn:hover,
.download-brochure-btn:hover,
.submit-btn:hover,
.submit-app-btn:hover,
.download-btn:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    background-image: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
}

.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
    margin-left: 6px;
    display: none !important;
}



/* Global H2 Font Size Standardized */
h2 {
    font-size: 54px !important;
}

/* Footer Background Fix */
.site-footer.custom-footer {
    background-image: var(--footer-bg) !important;
    background-size: cover !important;
    background-position: center !important;
}

/* =====================================================
   COMPREHENSIVE SPACING & RESPONSIVE FIXES v3
   Applied: fixes wide gaps, overflow, section spacing
   ===================================================== */

/* === GLOBAL OVERFLOW & BASE === */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

* {
    box-sizing: border-box;
}

/* === HERO SECTION === */
.homepage-hero {
    padding: 120px 0 60px !important;
    min-height: 100vh;
}

.hero-top-text {
    margin-top: 30px !important;
    margin-bottom: 50px !important;
}

.hero-top-text h1 {
    font-size: 52px !important;
    line-height: 1.05 !important;
}

@media (max-width: 1280px) {
    .hero-top-text h1 {
        font-size: 62px !important;
    }
}

@media (max-width: 1024px) {
    .homepage-hero {
        padding: 110px 0 50px !important;
    }

    .hero-top-text h1 {
        font-size: 52px !important;
    }

    .hero-top-text {
        margin-top: 20px !important;
        margin-bottom: 40px !important;
    }
}

@media (max-width: 768px) {
    .homepage-hero {
        padding: 100px 0 40px !important;
    }

    .hero-top-text h1 {
        font-size: 38px !important;
        letter-spacing: -1px !important;
    }

    .hero-top-text {
        margin-top: 10px !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 480px) {
    .hero-top-text h1 {
        font-size: 30px !important;
    }
}

/* === PARTNERS / LOGO WALL ? consolidated into master block below === */

/* === PARTNERS CAROUSEL (scroll track) === */
.partners-section {
    padding: 30px 0 50px !important;
}

.partners-title {
    margin-bottom: 40px !important;
}

/* === SOLUTIONS SECTION === */
/* Solution card ::before already defined above ? no duplicate needed */

.solutions-section {
    padding: 7px 0 0 !important;
    overflow: visible !important;
}

.solutions-section .partners-container {
    padding: 0 40px !important;
}

.solutions-header {
    margin-bottom: 7px !important;
}

.solutions-header h2 {
    font-size: 44px !important;
}

@media (min-width: 1025px) {
    .solutions-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-bottom: -140px !important;
    }

    .solution-card {
        padding: 40px 24px !important;
        flex: 0 1 calc(33.333% - 14px) !important;
        min-width: 320px !important;
    }

    .section-spacer {
        height: 160px !important;
    }
}

@media (max-width: 1100px) {
    .solutions-header h2 {
        font-size: 36px !important;
    }

    .solutions-grid {
        margin-bottom: -120px !important;
    }

    .solutions-grid .solution-card {
        flex: 0 1 calc(50% - 10px) !important;
    }

    .section-spacer {
        height: 140px !important;
    }
}

@media (max-width: 768px) {
    .solutions-section {
        padding: 60px 0 0 !important;
        overflow: visible !important;
    }

    .solutions-section .partners-container {
        padding: 0 !important;
        overflow: visible !important;
    }

    .solutions-header {
        margin-bottom: 36px !important;
        padding: 0 20px !important;
    }

    .solutions-header h2 {
        font-size: 32px !important;
    }

    /* -- Horizontal scroll carousel with peek -- */
    .solutions-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 10px 20px 20px !important;
        margin-bottom: -80px !important;
        /* Hide scrollbar */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .solutions-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* Each card: fixed width so neighbours peek */
    .solutions-grid .solution-card {
        flex: 0 0 78vw !important;
        min-width: 0 !important;
        max-width: 320px !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
    }

    /* Peek: first card has left padding so half of it peeks from left */
    .solutions-grid .solution-card:first-child {
        margin-left: 0 !important;
    }

    .solution-card {
        padding: 32px 20px !important;
    }

    .section-spacer {
        height: 100px !important;
    }

    .about-section {
        padding: 110px 0 60px !important;
    }
}

@media (max-width: 480px) {
    .solutions-header h2 {
        font-size: 26px !important;
    }

    .solutions-grid {
        margin-bottom: -60px !important;
    }

    .solutions-grid .solution-card {
        flex: 0 0 82vw !important;
    }

    .section-spacer {
        height: 80px !important;
    }

    .about-section {
        padding: 90px 0 50px !important;
    }
}

/* === ABOUT SECTION === */
.about-section {
    padding: 80px 0 80px !important;
}

.about-grid {
    gap: 60px !important;
}

.about-main-title {
    font-size: 52px !important;
    margin-bottom: 36px !important;
}

.stats-row {
    gap: 16px !important;
}

.stat-card {
    padding: 10px 5px !important;
}

.stat-number {
    font-size: 44px !important;
}

.stat-suffix {
    font-size: 30px !important;
}

@media (max-width: 1200px) {
    .about-section {
        padding: 160px 0 70px !important;
    }

    .about-main-title {
        font-size: 44px !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 110px 0 60px !important;
    }

    .about-main-title {
        font-size: 36px !important;
    }

    /* stats-row and stat-card layout handled by front-page.php inline styles */

    .about-sub-title {
        font-size: 26px !important;
    }

    .about-description {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .about-section {
        padding: 90px 0 50px !important;
    }

    .about-main-title {
        font-size: 28px !important;
    }

    .stat-number {
        font-size: 36px !important;
    }
}

/* === INSIGHTS / BENTO GRID === */
.insights-section {
    padding: 70px 0 90px !important;
}

.insights-grid {
    gap: 20px !important;
    margin-top: 48px !important;
}

.stat-main h3 {
    font-size: 44px !important;
}

@media (max-width: 1024px) {
    .insights-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 20px !important;
    }

    .box-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: 220px !important;
    }

    .box-2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .box-3 {
        grid-column: 2 / span 2 !important;
        grid-row: 1 / span 2 !important;
        min-height: 460px !important;
    }

    .box-4 {
        grid-column: 1 / span 3 !important;
        grid-row: 3 !important;
        padding: 36px !important;
    }

    .box-5 {
        grid-column: 1 !important;
        grid-row: 4 !important;
        min-height: 260px !important;
    }

    .box-6 {
        grid-column: 2 / span 2 !important;
        grid-row: 4 !important;
        min-height: 260px !important;
    }
}

@media (max-width: 768px) {
    .insights-section {
        padding: 50px 0 70px !important;
    }

    .insights-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        margin-top: 32px !important;
    }

    .box-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: 200px !important;
    }

    .box-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        height: auto !important;
        min-height: 200px !important;
    }

    .box-3 {
        grid-column: 1 / span 2 !important;
        grid-row: 2 !important;
        min-height: 340px !important;
    }

    .box-4 {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
        padding: 28px !important;
    }

    .box-4 h3 {
        font-size: 22px !important;
    }

    .box-5 {
        grid-column: 1 !important;
        grid-row: 4 !important;
        min-height: 230px !important;
    }

    .box-6 {
        grid-column: 2 !important;
        grid-row: 4 !important;
        min-height: 230px !important;
    }
}

@media (max-width: 480px) {
    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5,
    .box-6 {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
        min-height: 220px !important;
    }

    .box-3 {
        min-height: 300px !important;
    }
}

/* === INDUSTRY SLIDER SECTION === */
.industry-slider-section {
    padding: 0px 0 !important;
}

.industry-header {
    margin-bottom: 48px !important;
    gap: 40px !important;
}

.industry-header .header-left h2 {
    font-size: 44px !important;
}

/* Mobile: h2 and related headings at 24px (force override) */
@media (max-width: 768px) {

    h2,
    .section-header h2,
    .cs-intro-heading,
    .about-goals-heading,
    .why-choose-header h2,
    .faq-header h2,
    .mission-content h2,
    .values-header h2,
    .team-header h2,
    .industry-header .header-left h2 {
        font-size: 24px !important;
    }
}

@media (max-width: 1024px) {
    .industry-header {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
    }

    .industry-header .header-left h2 {
        font-size: 38px !important;
    }

    .industry-header .header-right {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .industry-slider-section {
        padding: 50px 0 !important;
    }

    .industry-header .header-left h2 {
        font-size: 30px !important;
        font-weight: 550;
    }
}

@media (max-width: 480px) {
    .industry-header .header-left h2 {
        font-size: 24px !important;
    }
}

/* === TESTIMONIALS SECTION === */
.testimonials-section {
    padding: 80px 0 !important;
}

.testimonials-section .solutions-header {
    margin-bottom: 48px !important;
}

.testimonials-section .solutions-header h2 {
    font-size: 44px !important;
    line-height: 1.25;
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 60px 0 !important;
    }

    .testimonials-section .solutions-header h2 {
        font-size: 36px !important;
    }
}

@media (max-width: 480px) {
    .testimonials-section {
        padding: 50px 0 !important;
    }

    .testimonials-section .solutions-header h2 {
        font-size: 26px !important;
    }
}

/* === CLIENTS BUILDING SUCCESS ? consolidated into master block below === */

/* === FOOTER === */
.footer-wrapper {
    padding: 60px 0 50px !important;
}

.footer-cta-container {
    margin-bottom: 80px !important;
}

.footer-cta-title {
    font-size: 48px !important;
}

.footer-main-grid {
    gap: 40px !important;
    margin-bottom: 60px !important;
}

@media (max-width: 1200px) {
    .footer-cta-title {
        font-size: 38px !important;
    }

    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 768px) {
    .footer-wrapper {
        padding: 50px 0 40px !important;
    }

    .footer-cta-container {
        margin-bottom: 60px !important;
    }

    .footer-cta-title {
        font-size: 28px !important;
    }

    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: center !important;
    }

    .footer-social-links {
        gap: 20px !important;
    }

    .footer-legal-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .footer-cta-title {
        font-size: 24px !important;
    }

    .footer-main-grid {
        gap: 22px !important;
    }
}

/* === GLOBAL SECTION HEADINGS === */
h2 {
    font-size: 40px !important;
}

.solutions-header h2,
.insights-section h2,
.why-choose-header h2 {
    font-size: 44px !important;
    line-height: 1.25;
}

@media (max-width: 1024px) {
    h2 {
        font-size: 38px !important;
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 30px !important;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 24px !important;
    }
}

/* === WHY CHOOSE SECTION === */
.why-choose-section {
    padding: 80px 0 !important;
}

.why-choose-header {
    margin-bottom: 48px !important;
}

.why-choose-grid {
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.glass-card {
    flex: 1 1 calc(33.333% - 14px) !important;
    min-width: 220px !important;
    max-width: 340px !important;
}

@media (max-width: 1024px) {
    .glass-card {
        flex: 1 1 calc(50% - 10px) !important;
    }
}

@media (max-width: 640px) {
    .why-choose-section {
        padding: 60px 0 !important;
    }

    .glass-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* === PREVENT HORIZONTAL SCROLL === */
.ast-container,
.partners-container {
    max-width: 1280px !important;
    width: 100% !important;
    overflow: Hidden;
}

.solutions-grid,
.about-grid,
.insights-grid,
.footer-main-grid {
    max-width: 100% !important;
}

/* Ensure no section bleeds beyond viewport */
section,
.about-section,
.insights-section,
.industry-slider-section,
.why-choose-section,
.testimonials-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Solutions section needs overflow visible for the card overlap effect */
.solutions-section {
    overflow: visible !important;
    max-width: 100% !important;
}


/* =====================================================
   MISSING CLASSES ? ALL PAGES & TEMPLATES AUDIT
   Covers: front-page, about-us, blogs, careers,
   case-studies, contact-us, faq, footer, it-solutions,
   web-development, success-stories, success-story-detail
   ===================================================== */

/* -- GLOBAL UTILITY -- */
.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 6px;
    top: 6px;
    z-index: 99999;
    background: #fff;
    padding: 8px 16px;
    border-radius: 4px;
}

.no-posts-found {
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    color: #64748b;
}

.site-footer {
    /* already handled by .custom-footer */
}

.navigation {
    margin: 40px 0;
}

.nav-previous,
.nav-next {
    display: inline-block;
}

.comment-navigation {
    margin: 30px 0;
    display: flex;
    gap: 20px;
}

.comments-area {
    padding: 60px 0;
}

.comments-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #011218;
}

.sidebar-main {
    padding: 20px;
}

.search-form {
    display: flex;
    gap: 10px;
}

.search-field {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
}

.search-submit {
    padding: 10px 20px;
    background: #D24D96;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* -- FRONT PAGE: ABOUT SECTION LAYOUT -- */
.about-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.clients-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.about-left {
    /* Left column of about-grid ? stats + title */
    position: relative;
    z-index: 2;
}

.about-right {
    /* Right column of about-grid ? description + CTA */
    position: relative;
    z-index: 2;
}

/* -- FOOTER LAYOUT -- */
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.footer-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mega-menu-footer-left {
    flex: 1;
}

@media (max-width: 768px) {
    .footer-inner {
        padding: 0 20px;
    }
}

/* -- BLOGS PAGE -- */
.featured-card {
    /* Extends .blog-card ? featured post gets a larger image */
    flex: 0 0 100%;
    max-width: 100%;
}

.featured-card .blog-card-image {
    height: 440px;
}

.blog-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f8fafc00;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    overflow: hidden;
    padding: 6px 6px 6px 20px;
    gap: 8px;
}

.blog-search-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #011218;
    outline: none;
    padding: 8px 0;
}

.blog-search-form button {
    background: #D24D96;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .featured-card .blog-card-image {
        height: 260px;
    }
}

/* -- SUCCESS STORIES PAGE -- */
.success-stories-page {
    background: #ffffff;
    min-height: 60vh;
}

.success-stories-section {
    /* Modifier on .industry-slider-section for success story slider */
    background: #ffffff !important;
}

.ss-name {
    font-size: 18px;
    font-weight: 700;
    color: #011218;
    margin: 8px 0 4px;
    line-height: 1.3;
}

.ss-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.ss-name a:hover {
    color: #D24D96;
}

.ss-category {
    display: inline-block;
    color: #D24D96;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 1px;
    border-radius: 50px;
    margin-bottom: 8px;
}

.ss-designation {
    font-size: 14px;
    color: #64748b;
    margin: 4px 0 12px;
}

.ss-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #D24D96;
    text-decoration: none;
    transition: gap 0.3s;
}

.ss-link:hover {
    gap: 10px;
    color: #8C3A86;
}

.success-story-detail-page {
    background: #ffffff;
}

/* -- IT SOLUTIONS HERO BG -- */
.it-solutions-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* -- IT SOLUTIONS / WEB-DEV: APP-DEV SECTION -- */
.app-dev-section {
    /* Reuses .business-tech-section styles ? video on left */
}

/* -- QUOTE SECTION (it-solutions.php + web-development.php) -- */
.quote-section {
    padding: 100px 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.quote-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.quote-header {
    margin-bottom: 30px;
}

.quote-header h2 {
    font-size: 38px !important;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.quote-header h2 span {
    background: #D24D96;
    background-clip: text;
    color: transparent;
}

.quote-header p {
    font-size: 17px;
    color: #475569;
    margin-top: 12px;
    line-height: 1.7;
}

.quote-card {
    background: #fff;
    margin-top: 50px;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.quote-form {
    display: block;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full {
    margin-bottom: 25px;
    flex: 0 0 100%;
    width: 100%;
}

.form-group label {
    font-size: 14px;
    margin-bottom: 6px;
    color: #444;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    height: 44px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #011218;
    background: #fafafa;
    transition: border-color 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #D24D96;
    background: #fff;
}

.form-group textarea {
    height: 120px;
    padding-top: 12px;
    resize: none;
}

.phone-wrapper,
.phone-input-wrap {
    position: relative;
    width: 100%;
}

.phone-wrapper .iti,
.phone-input-wrap .iti {
    width: 100%;
}

.phone-wrapper input,
.phone-input-wrap input {
    width: 100%;
    height: 44px;
    border-radius: 0;
    padding-left: 90px !important;
    border: 1px solid #e5e5e5;
    font-size: 14px;
}

.submit-area {
    text-align: center;
    padding-top: 10px;
}

.quote-form button {
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 40px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    box-shadow: 0 10px 20px rgba(210, 77, 150, 0.2);
    text-transform: none;
}

.quote-form button:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(210, 77, 150, 0.3);
}

.submit-area p {
    margin-top: 10px;
    font-size: 12px;
    color: #777;
}

.static-contact-form {
    display: block;
}

@media (max-width: 768px) {
    .quote-section {
        padding: 70px 16px;
    }

    .quote-card {
        padding: 28px 20px;
    }

    .quote-header h2 {
        font-size: 28px !important;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .quote-header h2 {
        font-size: 22px !important;
    }

    .quote-card {
        padding: 20px 14px;
        border-radius: 14px;
    }
}

/* -- CONTACT PAGE: FAQ MODERN SECTION -- */
.faq-modern-section {
    padding: 80px 0;
    background: #f8fafc;
}

.faq-modern-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.faq-modern-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-modern-header h2 {
    font-size: 48px !important;
    font-weight: 700;
    color: #011218;
    line-height: 1.2;
    margin-bottom: 16px;
}

.faq-modern-header h2 span {
    background: #D24D96;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.faq-modern-header p {
    color: #64748b;
    font-size: 17px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.faq-modern-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-modern-item {
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}

.faq-modern-item:first-child {
    border-top: 1px solid #e2e8f0;
}

.faq-modern-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    cursor: pointer;
    gap: 20px;
}

.faq-modern-question h4 {
    font-size: 17px;
    font-weight: 600;
    color: #011218;
    margin: 0;
    flex: 1;
    transition: color 0.3s;
}


.faq-arrow {
    font-size: 22px;
    font-weight: 300;
    color: #D24D96;
    line-height: 1;
    transition: transform 0.3s;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.faq-modern-item.active .faq-arrow {
    transform: rotate(90deg);
}

.faq-modern-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-modern-item.active .faq-modern-answer {
    max-height: 600px;
    padding-bottom: 0px;
}

.faq-modern-answer p {
    font-size: 17px;
    color: #475569;
    line-height: 1.8;
    margin: 0;
}

/* Contact page FAQ answer size override (covers both FAQ variants) */
.contact-page .faq-modern-answer p,
.contact-page .faq-answer p,
.contact-page .faq-list-answer p {
    font-size: 17px;
}

@media (max-width: 768px) {
    .faq-modern-section {
        padding: 60px 0;
    }

    .faq-modern-container {
        padding: 0 20px;
    }

    .faq-modern-header h2 {
        font-size: 28px !important;
    }

    .faq-modern-question h4 {
        font-size: 15px;
    }
}

/* -- FAQ PAGE -- */
.faq-page {
    background: #ffffff;
}

.faq-hero-new {
    position: relative;
    overflow: hidden;
    /* padding, bg set inline in PHP */
}

.faq-hero-new .ast-container {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .faq-hero-new {
        padding: 80px 16px !important;
    }
}

/* -- CAREERS: ROLES ACCORDION -- */
.roles-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* -- FONT AWESOME ICON FIXES -- */
/* fa classes are served by Font Awesome CDN ? no custom CSS needed, but prevent layout shift */
.fa,
.fa-solid {
    display: inline-block;
    line-height: 1;
}

.fa-chevron-right,
.fa-chevron-left,
.fa-chevron-down,
.fa-chevron-up,
.fa-angle-right,
.fa-magnifying-glass,
.fa-search {
    font-size: inherit;
    vertical-align: middle;
}

/* -- RESPONSIVE: ALL INNER PAGES -- */
@media (max-width: 1024px) {
    .faq-modern-header h2 {
        font-size: 32px !important;
    }

    .quote-header h2 {
        font-size: 30px !important;
    }

    .success-stories-page .cs-hero-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {

    .success-stories-page,
    .faq-page,
    .success-story-detail-page {
        overflow-x: hidden;
    }

    .quote-container {
        padding: 0 16px;
    }

    .form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .faq-modern-container {
        padding: 0 16px;
    }
}


/* WP default comment empty state */
.no-comments {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-size: 15px;
}

/* -- INLINE STYLE OVERRIDES (padding reduction on mobile) -- */
/* faq hero, success-stories slider, IT/web-dev sections */
@media (max-width: 1024px) {
    .faq-hero-new {
        padding: 90px 20px !important;
    }

    .success-stories-section {
        padding: 80px 0 40px !important;
    }
}

@media (max-width: 768px) {
    .faq-hero-new {
        padding: 70px 16px !important;
    }

    .industry-slider-section.success-stories-section {
        padding: 0px 0 30px !important;
    }

    /* it-solutions and web-dev inline padded sections */
    section[style*="padding: 120px"] {
        padding: 70px 0 !important;
    }
}

@media (max-width: 480px) {
    .faq-hero-new {
        padding: 60px 12px !important;
    }

    section[style*="padding: 120px"] {
        padding: 50px 0 !important;
    }
}

/* -------------------------------------------------------
   BLOG DETAIL PAGE  ?  bd-* namespace
   Matches Figma: dark hero ? centered intro ? wide image
   ? 2-col layout (sticky TOC left + article right)
   ? Related articles 3-col grid ? Footer CTA
   ------------------------------------------------------- */

/* -- ROOT / PAGE -- */
.bd-page {
    background: #ffffff;
    overflow-x: hidden;
}

/* ------------------------------
   HERO BANNER
------------------------------ */
.bd-hero {
    position: relative;
    background: #030e14;
    padding: 110px 20px 70px;
    text-align: center;
    overflow: hidden;
}

/* Pink-purple glowing orb top-left */
.bd-hero-orb {
    position: absolute;
    top: -120px;
    left: -160px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 77, 147, 0.5) 0%, rgba(140, 58, 134, 0.25) 40%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}

.bd-hero {
    position: relative;
    height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.bd-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.bd-hero-eyebrow {
    display: none;
    /* The title itself acts as eyebrow */
}

.bd-hero-title {
    font-family: 'Manrope', sans-serif;
    font-size: 56px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 24px;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* -- Breadcrumb -- */
.bd-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.bd-breadcrumb a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.bd-breadcrumb a:hover {
    color: #e44d93;
}

.bd-bc-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

.bd-bc-current {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------
   POST INTRO: Title + Meta
------------------------------ */
.bd-intro-section {
    background: #ffffff;
    padding: 72px 20px 40px;
}

.bd-intro-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.bd-post-title {
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #011218;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}

.bd-post-excerpt {
    font-size: 17px;
    color: #64748b;
    line-height: 1.7;
    margin: 0 0 28px;
}

/* Meta row: avatar ? author ? dot ? date ? dot ? read time */
.bd-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    border: 1px solid #f0f4f8;
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.bd-meta-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bd-meta-author {
    font-size: 14px;
    font-weight: 600;
    color: #011218;
}

.bd-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.bd-meta-date,
.bd-meta-read {
    font-size: 14px;
    color: #64748b;
}

/* ------------------------------
   FEATURED IMAGE (full-width)
------------------------------ */
.bd-featured-img-wrap {
    max-width: 1100px;
    margin: 0 auto 60px;
    padding: 0 40px;
}

.bd-featured-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

/* ------------------------------
   CONTENT SECTION: TOC + Article
------------------------------ */
.bd-content-section {
    padding: 0 40px 80px;
}

.bd-content-wrapper {
    max-width: 860px;
    margin: 0 auto;
    display: block;
}


/* -- RIGHT: Article body -- */
.bd-article {
    min-width: 0;
    /* prevent overflow in grid */
}

.bd-article h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #011218;
    margin: 48px 0 16px;
    line-height: 1.3;
    scroll-margin-top: 120px;
    /* offset for sticky header */
}

.bd-article h3:first-child {
    margin-top: 0;
}

.bd-article p {
    font-size: 16px;
    line-height: 1.85;
    color: #475569;
    margin: 0 0 20px;
}

.bd-article ul,
.bd-article ol {
    padding-left: 20px;
    margin: 0 0 20px;
}

.bd-article li {
    font-size: 16px;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 8px;
}

.bd-article strong {
    color: #011218;
    font-weight: 600;
}

/* Inline image inside article */
.bd-inline-img-wrap {
    margin: 32px 0;
    border-radius: 16px;
    overflow: hidden;
}

.bd-inline-img-wrap img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* ------------------------------
   RELATED ARTICLES
------------------------------ */
.bd-related-section {
    background: #ffffff;
    padding: 60px 40px 100px;
    border-top: 1px solid #f0f4f8;
}

.bd-related-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.bd-related-title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #011218;
    margin: 0 0 40px;
    letter-spacing: -0.3px;
}

.bd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* -- Related Card -- */
.bd-rel-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #f0f4f8;
    transition: box-shadow 0.3s, transform 0.3s;
}

.bd-rel-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    /* translateY removed for image-only zoom effect */
}

.bd-rel-img-link {
    display: block;
    overflow: hidden;
}

.bd-rel-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.bd-rel-card:hover .bd-rel-img {
    transform: scale(1.1);
}

.bd-rel-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bd-rel-cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D24D96;
    margin-bottom: 10px;
    display: block;
}

.bd-rel-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #011218;
    line-height: 1.35;
    margin: 0 0 10px;
}

.bd-rel-heading a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.bd-rel-heading a:hover {
    color: #D24D96;
}

.bd-rel-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0 0 16px;
    flex: 1;
}

.bd-rel-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.bd-rel-author {
    font-size: 13px;
    font-weight: 600;
    color: #011218;
}

.bd-rel-readtime {
    font-size: 13px;
    color: #94a3b8;
}

/* ------------------------------
   RESPONSIVE
------------------------------ */
@media (max-width: 1100px) {
    .bd-content-wrapper {
        grid-template-columns: 220px 1fr;
        gap: 40px;
    }

    .bd-featured-img-wrap {
        padding: 0 20px;
    }

    .bd-content-section {
        padding: 0 20px 60px;
    }

    .bd-related-section {
        padding: 60px 20px 80px;
    }
}

@media (max-width: 900px) {
    .bd-content-wrapper {
        grid-template-columns: 1fr;
    }

    .bd-toc {
        position: relative;
        top: auto;
        border-left: none;
        border-top: 2px solid #f0f4f8;
        padding: 20px 0 0;
        margin-bottom: 40px;
    }

    .bd-toc-item a {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        padding: 6px 0;
    }

    .bd-toc-item.is-active a {
        border-left: none;
        color: #D24D96;
    }

    .bd-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bd-hero {
        padding: 80px 16px 50px;
    }

    .bd-hero-title {
        font-size: 38px;
    }

    .bd-intro-section {
        padding: 50px 16px 30px;
    }

    .bd-post-title {
        font-size: 28px;
    }

    .bd-post-excerpt {
        font-size: 15px;
    }

    .bd-meta-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .bd-featured-img-wrap {
        padding: 0 16px;
        margin-bottom: 40px;
    }

    .bd-featured-img {
        height: 260px;
        border-radius: 16px;
    }

    .bd-content-section {
        padding: 0 16px 50px;
    }

    .bd-related-section {
        padding: 50px 16px 70px;
    }

    .bd-related-title {
        font-size: 26px;
    }

    .bd-inline-img-wrap img {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .bd-hero-title {
        font-size: 30px;
        letter-spacing: -0.5px;
    }

    .bd-post-title {
        font-size: 22px;
    }

    .bd-related-grid {
        grid-template-columns: 1fr;
    }

    .bd-rel-img {
        height: 180px;
    }
}


/* -- BD: Tags row -- */
.bd-tags-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid #f0f4f8;
}

.bd-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: #011218;
}

.bd-tag {
    display: inline-block;
    padding: 4px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.bd-tag:hover {
    background: #fce7f3;
    color: #D24D96;
    border-color: #D24D96;
}

/* -- BD: Prev/Next post nav -- */
.bd-post-nav {
    margin-top: 48px;
}

.bd-nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.bd-nav-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 46%;
    text-decoration: none;
    padding: 16px 20px;
    border: 1px solid #f0f4f8;
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bd-nav-item:hover {
    border-color: #D24D96;
    box-shadow: 0 4px 20px rgba(210, 77, 150, 0.08);
}

.bd-nav-next {
    align-items: flex-end;
}

.bd-nav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D24D96;
}

.bd-nav-ptitle {
    font-size: 15px;
    font-weight: 600;
    color: #011218;
    line-height: 1.4;
}

/* -- BD: Comments wrap -- */
.bd-comments-wrap {
    padding: 60px 40px 80px;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .bd-comments-wrap {
        padding: 40px 16px 60px;
    }

    .bd-nav-item {
        max-width: 100%;
    }
}

/* ---------------------------------------------------
   CLIENTS LOGO SECTION ? MASTER FIX (single source)
   Replaces all previous conflicting overrides
   --------------------------------------------------- */

/* [clients-section removed ? see canonical block] */

.clients-section .partners-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
}

/* Header text */
.clients-section .solutions-header {
    text-align: center;
    max-width: 700px;
}

.clients-section .solutions-header h2 {
    font-size: 44px;
    font-weight: 500;
    color: #011218;
    line-height: 1.2;
    margin-bottom: 16px;
}

.clients-section .solutions-header p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Desktop pyramid scene ? tall enough to show all 9 logos */
.clients-section .scene {
    position: relative;
    width: 100%;
    max-width: 1300px;
    /* wide enough for card at left:1060px + 200px width */
    height: 420px;
    /* tall enough for card at top:290px + 110px height */
    flex-shrink: 0;
    overflow: visible;
    /* never clip logo cards */
    margin: 0 auto;
}

/* Logo cards */
.clients-section .logo-card {
    position: absolute;
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.clients-section .logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

.clients-section .logo-card img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform 0.3s ease;
}

/* Mobile marquee ? hidden on desktop */
.clients-section .scene-mobile {
    display: none;
}

/* -- Desktop: scale down gracefully -- */
@media (max-width: 1400px) {
    .clients-section .scene {
        transform: scale(0.88);
        transform-origin: center top;
        height: 380px;
    }
}

@media (max-width: 1200px) {
    .clients-section .scene {
        transform: scale(0.76);
        transform-origin: center top;
        height: 330px;
    }

    .clients-section .solutions-header h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .clients-section .scene {
        transform: scale(0.64);
        transform-origin: center top;
        height: 290px;
    }
}

@media (max-width: 900px) {
    .clients-section .scene {
        transform: scale(0.54);
        transform-origin: center top;
        height: 250px;
    }
}

/* -- Tablet & Mobile: switch to marquee -- */
@media (max-width: 768px) {
    .clients-section {
        padding: 60px 0;
        background: #0d0020 !important;
        /* dark base ? video shows over it */
    }

    .clients-section .partners-container {
        gap: 36px;
        padding: 0 20px;
    }

    .clients-section .solutions-header h2 {
        font-size: 30px;
        color: #ffffff !important;
    }

    .clients-section .solutions-header p {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .clients-section .explore-more-btn {
        color: #ffffff !important;
    }

    /* Hide desktop pyramid, show mobile marquee */
    .clients-section .scene.desktop-only {
        display: none !important;
    }

    .clients-section .scene-mobile {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .clients-section {
        padding: 50px 0;
    }

    .clients-section .solutions-header h2 {
        font-size: 28px;
    }
}

/* -- Mobile marquee animation -- */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 20px;
    animation: marquee-scroll 22s linear infinite;
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

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

.mobile-logo-card {
    flex-shrink: 0;
    width: 130px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* white logos on dark video bg */
    opacity: 0.9;
}

/* ============================================================
   COMPREHENSIVE MOBILE ALIGNMENT & HEADING FIX
   Covers all front-page sections at 768px and 480px
   ============================================================ */

/* -- GLOBAL: prevent any element from overflowing viewport -- */
@media (max-width: 768px) {
    * {
        max-width: 100%;
    }

    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
        height: auto;
    }

    .ast-container,
    .partners-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* -- HERO SECTION -- */
@media (max-width: 768px) {
    .homepage-hero {
        padding: 90px 0 50px !important;
        min-height: auto !important;
    }

    .hero-top-text {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
    }

    .hero-top-text h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 20px !important;
    }

    .hero-top-text .hero-description {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .hero-bottom-area {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .trusted-partner-text {
        max-width: 100% !important;
    }

    .trusted-partner-text h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .it-services-card {
        grid-template-columns: 1fr !important;
        padding: 30px 20px !important;
        text-align: center !important;
        border-radius: 24px !important;
    }

    .card-left h5 {
        justify-content: center !important;
        font-size: 18px !important;
    }

    .card-left p {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .card-right {
        margin-top: 20px !important;
        max-height: 200px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .card-right img {
        border-radius: 16px !important;
        object-position: center top !important;
    }
}

@media (max-width: 480px) {
    .hero-top-text h1 {
        font-size: 28px !important;
        letter-spacing: -0.3px !important;
    }

    .trusted-partner-text h2 {
        font-size: 22px !important;
    }

    .it-services-card {
        padding: 24px 16px !important;
    }
}

/* -- PARTNERS CAROUSEL -- */
@media (max-width: 768px) {
    .partners-section {
        padding: 40px 0 50px !important;
    }

    .partners-title {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        margin-bottom: 30px !important;
    }
}

/* -- SOLUTIONS SECTION -- */
@media (max-width: 768px) {
    .solutions-section {
        padding: 60px 0 0 !important;
    }

    .solutions-header {
        margin-bottom: 30px !important;
        padding: 0 4px !important;
    }

    .solutions-badge {
        font-size: 12px !important;
        letter-spacing: 2px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
        padding: 7px 18px !important;
    }

    .solutions-header h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    .solutions-header p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .solutions-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: -80px !important;
    }

    .solutions-grid .solution-card:nth-child(4),
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: auto !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .solution-card {
        padding: 30px 20px !important;
        min-width: 0 !important;
    }

    .solution-card h4 {
        font-size: 18px !important;
    }

    .section-spacer {
        height: 100px !important;
    }
}

@media (max-width: 480px) {
    .solutions-badge {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }

    .solutions-header h2 {
        font-size: 28px !important;
    }

    .section-spacer {
        height: 80px !important;
    }
}

/* -- ABOUT SECTION -- */
@media (max-width: 768px) {
    .about-section {
        padding: 100px 0 60px !important;
    }

    .about-main-title {
        font-size: 30px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 24px !important;
    }

    .about-sub-title {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    .about-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .stats-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        justify-content: center !important;
    }

    .stat-card {
        width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }

    .stat-main h3 {
        font-size: 36px !important;
    }

    .about-section .partners-container {
        align-items: flex-start !important;
    }

    .about-right-col {
        padding-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .about-section {
        padding: 90px 0 50px !important;
    }

    .about-main-title {
        font-size: 26px !important;
    }

    .about-sub-title {
        font-size: 18px !important;
    }

    .stat-card {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .stat-main h3 {
        font-size: 30px !important;
    }
}

/* -- INSIGHTS / BENTO SECTION -- */
@media (max-width: 768px) {
    .insights-section {
        padding: 60px 0 80px !important;
    }

    .insights-section>.partners-container>h2,
    .insights-section .solutions-header h2,
    .insights-section h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .insights-section>.partners-container>p,
    .insights-section p.section-description {
        font-size: 15px !important;
        text-align: center !important;
    }

    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 30px !important;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5,
    .box-6 {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
        min-height: 200px !important;
    }

    .box-3 {
        min-height: 280px !important;
    }

    .box-4 {
        min-height: auto !important;
    }

    .box-4 h3 {
        font-size: 20px !important;
    }

    .box-content-overlay h4 {
        font-size: 16px !important;
    }

    .box-content-overlay {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .box-4 h3 {
        font-size: 18px !important;
    }

    .box-content-overlay h4 {
        font-size: 15px !important;
    }
}

/* -- BLOGS SECTION -- */
@media (max-width: 768px) {
    .blogs-section {
        padding: 60px 20px !important;
    }

    .blogs-section .solutions-header h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .blogs-section .solutions-header p {
        font-size: 15px !important;
    }

    .blogs-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        overflow-x: unset !important;
        scroll-snap-type: unset !important;
    }

    .blog-card {
        scroll-snap-align: unset !important;
        min-width: unset !important;
        width: 100% !important;
    }
}

/* -- TESTIMONIALS SECTION -- */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 60px 0 !important;
    }

    .testimonials-section .solutions-header h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .testimonials-section .solutions-header p {
        font-size: 15px !important;
    }

    .testimonials-grid,
    .testimonials-slider {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .testimonial-card {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* -- CLIENTS / BUILDING SUCCESS -- */
@media (max-width: 768px) {
    .clients-section {
        padding: 60px 0 80px !important;
    }

    .clients-section .solutions-header h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .clients-section .solutions-header p {
        font-size: 15px !important;
    }

    /* Mobile logo marquee already handles display */
}

@media (max-width: 480px) {
    .clients-section .solutions-header h2 {
        font-size: 22px !important;
    }
}

/* -- CONTACT CTA SECTION -- */
@media (max-width: 768px) {
    .contact-cta-section {
        padding: 60px 0 !important;
    }

    .contact-cta-header h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
    }

    .contact-cta-header p {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .contact-cta-header h2 {
        font-size: 24px !important;
    }
}

/* -- GLOBAL h2 OVERRIDE ? catch-all for any missing sections -- */
@media (max-width: 768px) {
    h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    h4 {
        font-size: 17px !important;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 15px !important;
    }
}

/* -- ALIGNMENT: center text in all section headers on mobile -- */
@media (max-width: 768px) {

    .solutions-header,
    .section-header,
    .insights-section>.partners-container,
    .contact-cta-header,
    .clients-section .solutions-header,
    .blogs-section .solutions-header,
    .testimonials-section .solutions-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Buttons: keep centered */
    .explore-more-btn,
    .view-all-btn,
    .section-cta-btn {
        display: inline-block !important;
        margin: 0 auto !important;
    }

    /* Fix any left-aligned text that should be centered */
    .about-section .partners-container {
        text-align: center !important;
    }

    /* Prevent text overflow / clipping */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    span,
    li {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* -- FIX: about section 2-col layout on mobile -- */
@media (max-width: 768px) {

    .about-inner-grid,
    .about-two-col {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
}

/* -- FIX: footer on mobile -- */
@media (max-width: 768px) {
    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .footer-col {
        text-align: left !important;
    }
}

/* -- END MOBILE FIX -- */


/* ============================================================
   FIX: Solutions ? About section heading overlap on mobile
   Root cause: negative margin-bottom on .solutions-grid +
   large padding-top on .about-section clash on small screens
   ============================================================ */

@media (max-width: 768px) {

    /* Remove negative margin ? no overlap effect on mobile */
    .solutions-grid {
        margin-bottom: 0 !important;
    }

    /* Remove the spacer that was compensating for the negative margin */
    .section-spacer {
        height: 0 !important;
        display: none !important;
    }

    /* About section: normal top padding, no giant offset needed */
    .about-section {
        padding: 60px 0 60px !important;
    }
}

@media (max-width: 480px) {
    .solutions-grid {
        margin-bottom: 0 !important;
    }

    .section-spacer {
        height: 0 !important;
        display: none !important;
    }

    .about-section {
        padding: 50px 0 50px !important;
    }
}

/* -- END OVERLAP FIX -- */

/* -- ABOUT SECTION: video visible on mobile, dark theme restored -- */
@media (max-width: 768px) {
    .about-section {
        background-color: transparent !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Show the background video on mobile */
    .about-bg-video {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 0 !important;
    }

    /* No overlay ? video shows clearly */
    .about-section::before {
        display: none !important;
    }

    /* All about-section content must sit above the video */
    .about-section .partners-container,
    .about-section .ast-container,
    .about-section>* {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Black text over the light/colourful video */
    .about-main-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        color: #011218 !important;
        -webkit-text-fill-color: #011218 !important;
    }

    .about-sub-title {
        color: #011218 !important;
    }

    .about-description {
        color: #333333 !important;
    }

    .about-label {
        color: #D24D96 !important;
    }

    .stat-number {
        color: #011218 !important;
        -webkit-text-fill-color: #011218 !important;
    }

    .stat-label {
        color: #444444 !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   MOBILE & TABLET RESPONSIVE FIXES
   Affects: max-width 1024px and below ONLY
   Desktop (min-width: 1025px) is completely untouched
   ============================================================ */

/* -- 1. HIDE MEGA MENU FOOTER ON MOBILE & TABLET -- */
@media (max-width: 1024px) {

    .mega-menu-footer,
    .mega-menu-divider {
        display: none !important;
    }
}

/* -- 2. CONTACT FORM CONTAINER: Override fixed 900px width -- */
@media (max-width: 1024px) {
    .contact-form-container {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px !important;
        margin: 0 16px !important;
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 768px) {
    .contact-form-container {
        border-radius: 16px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .contact-form-header {
        padding: 40px 24px 24px !important;
    }
}

/* -- 3. GLOBAL OVERFLOW PREVENTION ? headings never clip or overlay -- */
@media (max-width: 1024px) {

    /* All heading levels: always wrap, never overflow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* All sections: allow content to show fully */
    section,
    .section,
    [class*="-section"],
    [class*="-wrap"],
    [class*="-inner"] {
        overflow-x: hidden;
    }

    /* Boxes and cards: prevent clipping */
    .card,
    [class*="-card"],
    [class*="-box"],
    [class*="-block"] {
        overflow: visible !important;
    }
}

/* -- 4. TABLET (769px ? 1024px): Responsive layout adjustments -- */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Headings: reduce font sizes gracefully for tablet */
    .hero-top-text h1 {
        font-size: 52px !important;
        line-height: 1.1 !important;
    }

    .solutions-header h2,
    .section-header h2,
    h2 {
        font-size: 36px !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h4 {
        font-size: 20px !important;
    }

    /* Two-column grids: collapse gracefully */
    .about-inner-grid,
    .about-two-col,
    [class*="-two-col"],
    [class*="-grid-2"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }

    /* Padding adjustments */
    .ast-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Hero section padding on tablet ? be specific, not wildcard */
    .blogs-hero,
    .about-hero,
    .contact-hero,
    .web-dev-hero,
    .it-solutions-hero,
    [class*="banner"] {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
}

/* -- 5. MOBILE (=768px): Additional heading & layout fixes -- */
@media (max-width: 768px) {

    /* Ensure page-level sections have breathing room */
    section,
    .section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Blog banner title */
    .blog-banner-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
        display: block !important;
        white-space: normal !important;
    }

    /* Solution card headings */
    .solution-card h4 {
        font-size: 17px !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Stat sections: prevent number overflow */
    .stat-number {
        font-size: 36px !important;
        white-space: normal !important;
    }

    /* Fix rows / flex containers that force single line */
    .hero-stats,
    [class*="-stats"],
    [class*="-row"],
    .partners-row {
        flex-wrap: wrap !important;
    }

    /* Category items in mega-menu accordion: allow wrapping */
    .category-item {
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* -- 6. SMALL PHONES (=480px): Fine-tune remaining headings -- */
@media (max-width: 480px) {

    .hero-top-text h1 {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .blog-banner-title {
        font-size: 26px !important;
    }

    /* Prevent any heading from spilling outside the viewport */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        max-width: 100vw !important;
    }

    /* Contact form header on tiny screens */
    .contact-form-header {
        padding: 30px 16px 20px !important;
    }
}

/* -- END RESPONSIVE FIXES -- */

/* ============================================================
   FIX: "Our Story" & "Reach Us" visibility in mobile drawer
   These items sit after the Services accordion ? add a clear
   visual separator so users know to scroll down to them.
   ============================================================ */
@media (max-width: 768px) {

    /* Add a subtle top border to the first non-Services nav item
       that follows the mega-menu accordion block */
    .mega-menu-container+li>a,
    .mega-menu-container~li>a {
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin-top: 8px !important;
        padding-top: 20px !important;
    }

    /* Sticky scroll hint: show a faint "more below" shadow at bottom of drawer when there's overflow */
    .header-nav-wrap {
        /* ensure scrollability */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Give the drawer nav list a bottom pad so last items aren't flush at edge */
    .main-navigation {
        padding-bottom: 32px !important;
    }
}

@media (max-width: 480px) {

    .mega-menu-container+li>a,
    .mega-menu-container~li>a {
        margin-top: 6px !important;
        padding-top: 18px !important;
    }
}

/* -- END MENU SCROLL FIX -- */

/* -- HIDE insight-box box-2 and box-5 on mobile & tablet -- */
@media (max-width: 1024px) {

    .insight-box.box-2,
    .insight-box.box-5 {
        display: none !important;
    }
}

/* -- END INSIGHT BOX HIDE -- */

/* ============================================================
   FIX: Category-item arrow direction + overflow, mobile menu
   ============================================================ */
@media (max-width: 1024px) {

    /* Arrow: rotate right-chevron to point DOWN on mobile (closed state) */
    .category-item i.fa-chevron-right {
        transform: rotate(90deg) !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
        min-width: 16px !important;
        text-align: center !important;
        overflow: visible !important;
    }

    /* Arrow: point UP when category is open (mobile-active) */
    .category-item.mobile-active i.fa-chevron-right {
        transform: rotate(-90deg) !important;
        color: #e44d93 !important;
    }

    /* Keep icon inside the box ? ensure flex layout is tight */
    .category-item {
        overflow: hidden !important;
        position: relative !important;
    }
}

/* ============================================================
   FIX: Our Story & Reach Us ? move closer to Services list
   ============================================================ */
@media (max-width: 1024px) {

    /* Remove the giant empty space between Services accordion and these items */
    .header-nav-wrap .main-navigation ul li.menu-item:not(.menu-item-has-children) {
        margin-top: 0 !important;
    }

    /* Tighten gap after the mega-menu-container closes */
    .mega-menu-container {
        margin-bottom: 0 !important;
    }

    /* Our Story and Reach Us: sit right after Services with normal spacing */
    .mega-menu-container~li {
        margin-top: 0 !important;
    }

    .mega-menu-container~li>a {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-top: 0 !important;
        padding-top: 16px !important;
    }

    /* Add a bottom divider line under the Services menu item,
       matching the style of lines above Our Story & Reach Us */
    .menu-item.menu-item-has-children {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 16px !important;
    }
}

/* -- END ARROW + MENU POSITION FIX -- */

/* -- SOLUTION CARDS: half-black border unselected, full pink when active -- */
/* Ensure ::before mask-border works on mobile too */
@media (max-width: 1024px) {
    .solution-card {
        border: 1.5px solid transparent !important;
    }

    /* Keep the top-half black border on unselected cards */
    .solution-card::before {
        display: block !important;
        opacity: 1 !important;
    }

    /* Active card: full pink border, hide partial */
    .solution-card.active,
    .solution-card:active {
        border-color: #D24D96 !important;
        box-shadow: 0 4px 20px rgba(210, 77, 150, 0.15) !important;
    }

    .solution-card.active::before,
    .solution-card:active::before {
        opacity: 0 !important;
    }
}

/* -- END SOLUTION CARD BORDER FIX -- */

/* ============================================================
   FIX: Insights section ? badge overflow + heading cut on mobile
   ============================================================ */
@media (max-width: 768px) {

    /* box-4: badge inside the box, heading not clipped */
    .box-4 {
        position: relative !important;
        overflow: hidden !important;
        padding: 25px 20px 25px !important;
    }

    .box-4 .tips-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 0 14px 0 !important;
        display: inline-block !important;
        align-self: flex-start !important;
    }

    .box-4 h3 {
        font-size: 20px !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
        margin: 0 0 10px !important;
    }

    .box-4 p {
        max-width: 100% !important;
        font-size: 14px !important;
    }

    /* box-3: badge inside the overlay, not overflowing */
    .box-3 .box-content-overlay {
        overflow: hidden !important;
    }

    .box-3 .tips-badge {
        margin: 0 0 75px 0 !important;
        display: inline-block !important;
    }
}

@media (max-width: 480px) {
    .box-4 {
        padding: 20px 16px !important;
    }

    .box-4 h3 {
        font-size: 18px !important;
    }
}

/* ============================================================
   FIX: Footer newsletter input visible on all screen sizes
   ============================================================ */
@media (max-width: 768px) {
    .newsletter-form-wrapper {
        width: 100% !important;
        margin: 20px auto 0 !important;
        margin-left: 0 !important;
    }

    .footer-newsletter input[type="email"],
    .footer-newsletter input[type="text"] {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        font-size: 15px !important;
        padding: 10px 40px 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    }

    /* Noptin form fields layout on mobile */
    .footer-newsletter .noptin-form-fields,
    .footer-newsletter .noptin-fields-wrap {
        display: block !important;
        width: 100% !important;
    }

    .footer-newsletter .noptin-field-wrapper,
    .footer-newsletter .noptin-form-field {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* -- END INSIGHTS + NEWSLETTER FIXES -- */

/* ============================================================
   FIX: Noptin newsletter form ? transparent bg, white text
   Targets the rendered form=156 input regardless of form ID
   ============================================================ */
.footer-newsletter input,
.footer-newsletter input[type="email"],
.footer-newsletter input[type="text"],
.footer-newsletter textarea,
.footer-newsletter .noptin-form input,
.footer-newsletter [class*="noptin"] input {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 10px 45px 10px 0 !important;
    font-size: 15px !important;
    width: 100% !important;
    pointer-events: auto !important;
    cursor: text !important;
    position: relative !important;
    z-index: 2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Autofill override ? browser injects white bg on autofill */
.footer-newsletter input:-webkit-autofill,
.footer-newsletter input:-webkit-autofill:hover,
.footer-newsletter input:-webkit-autofill:focus,
.footer-newsletter input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.footer-newsletter input::placeholder,
.footer-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

.footer-newsletter input:focus,
.footer-newsletter input[type="email"]:focus {
    outline: none !important;
    border-bottom-color: #ec4899 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* -- END NEWSLETTER INPUT FIX -- */

/* ============================================================
   FIX: Noptin form container ? remove all white backgrounds
   ============================================================ */
.footer-newsletter .noptin-form,
.footer-newsletter .noptin-form-main,
.footer-newsletter .noptin-form-body,
.footer-newsletter .noptin-form-content,
.footer-newsletter .noptin-form-fields-wrapper,
.footer-newsletter .noptin-form-fields,
.footer-newsletter .noptin-fields-wrap,
.footer-newsletter .noptin-field-wrapper,
.footer-newsletter .noptin-form-footer,
.footer-newsletter form,
.footer-newsletter [id*="noptin"],
.footer-newsletter [class*="noptin"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The actual rendered form widget iframe/embed if any */
.footer-newsletter iframe {
    background: transparent !important;
}

/* -- END NOPTIN CONTAINER FIX -- */

/* ============================================================
   DEFINITIVE DESKTOP FIX ? no overlap, clean layout
   ============================================================ */
@media (min-width: 769px) {

    /* Reset all negative margins from previous rules */
    .solutions-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Hide the spacer ? not needed without overlap */
    .section-spacer {
        display: none !important;
        height: 0 !important;
    }

    /* About section: normal padding */
    .about-section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

@media (min-width: 1025px) {
    .solutions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        margin-bottom: 0 !important;
    }

    .about-section {
        padding-top: 80px !important;
    }
}

/* -- about-intro-paragraphs: reduce to 14px on mobile -- */
@media (max-width: 768px) {
    .about-intro-paragraphs p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
    }
}

/* -- Global p: match 14px across entire site on mobile -- */
@media (max-width: 768px) {
    p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 480px) {
    p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .about-intro-paragraphs p {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .about-label {
        color: #D24D96 !important;
    }
}

/* -- END DESKTOP OVERLAP FIX -- */
/* ============================================================
   PURPLE ROSE ? COMPREHENSIVE FIXES
   1. Font Size Uniformity (consistent type scale site-wide)
   2. Overlap / Layout Fixes (z-index, negative margin issues)
   3. Mobile Responsiveness (all breakpoints)
   ============================================================ */

/* --- 0. CSS CUSTOM PROPERTIES ? UNIFIED TYPE SCALE ----------- */
/* All properties are now consolidated in the first :root block above */

/* --- 1. GLOBAL HEADING RESET ? UNIFORM SCALE ----------------- */
/*
  Remove conflicting !important font-sizes from earlier rules
  by using a higher-specificity re-declaration.
  We target all heading contexts that previously had scattered
  pixel values (11px to 84px with no coherent system).
*/

/* --- H1 across the site --- */
h1,
.hero-top-text h1,
.about-hero h1,
.contact-hero h1,
.cs-hero-title,
.web-dev-hero-content h1,
.it-solutions-title,
.post-title,
.bd-hero-title,
.blog-banner-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
}

/* blogs-hero h1 uses its own clamp size ? do not override */
.blogs-hero h1 {
    font-size: 56px;
    font-weight: 300;
    line-height: 1.08 !important;
    letter-spacing: -2px !important;
}

/* Extra-large hero (home page only) */
.homepage-hero .hero-top-text h1 {
    font-size: var(--fs-hero);
}

/* --- H2 across the site (inner pages only ? not homepage solutions/insights headers) --- */
h2,
.section-header h2,
.why-choose-header h2,
.faq-header h2,
.about-goals-heading,
.mission-content h2,
.values-header h2,
.team-header h2,
.people-heading,
.stats-heading,
.partners-heading,
.info-header h2,
.contact-form-header h2,
.business-tech-section .section-header h2,
.latest-header h2,
.bd-post-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
}

/* Homepage section headers ? use their own declared sizes */
.solutions-header h2,
.insights-section h2,
.about-main-title {
    font-size: inherit;
    line-height: 1.25;
}

/* --- H3 across the site --- */
h3,
.about-sub-title,
.accordion-main-title,
.stat-main h3,
.box-4 h3,
.box-5 h3,
.related-articles-section h3,
.bd-related-title {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
}

/* --- H4 across the site --- */
h4,
.solution-card h4,
.accordion-header h4,
.faq-question h4,
.industry-info h4,
.web-dev-text h3,
.bd-article h3 {
    font-size: var(--fs-h4);
    line-height: var(--lh-normal);
}

/* --- Body / Lead copy --- */
.hero-description,
.solutions-header p,
.section-header p,
.why-choose-header p,
.about-description,
.it-solutions-description,
.business-tech-section .section-header p,
.footer-cta-text,
.clients-section .solutions-header p,
.about-hero p,
.contact-hero p,
.mission-content p {
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
}

/* Stat numbers ? intentionally large, keep clamped */
.stat-number,
.glass-card h3 {
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1;
}

.stat-suffix {
    font-size: clamp(24px, 2.5vw, 38px);
}

/* Nav + UI elements ? small but consistent */
.main-navigation ul li a,
.lets-talk-btn,
.footer-column ul li a,
.blog-category,
.badge,
.filter-chip {
    font-size: var(--fs-body);
}

/* Blog titles */
.blog-title,
.featured-blogs-section .blog-title {
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
}

/* Hero badge / label */
.it-solutions-label,
.about-label,
.section-label {
    font-size: var(--fs-body);
}

/* solutions-badge is a small pill ? keep its own font-size */

/* --- 2. SPECIFIC SECTION OVERRIDES ? STOP CONFLICTS ---------- */

/* Solutions badge: small pill label ? do not override */
.solutions-badge {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Clients section headline: was 72px, now unified */
.clients-section .solutions-header h2 {
    font-size: clamp(24px, 3.5vw, 44px) !important;
}

/* Footer CTA: was 56px */
.footer-cta-title {
    font-size: clamp(24px, 3.5vw, 48px) !important;
}

/* About page intro heading: was 56px */
.about-intro-heading {
    font-size: clamp(24px, 3.5vw, 44px) !important;
}

/* Accordion main title: was duplicate 32px/38px/42px */
.accordion-main-title {
    font-size: clamp(20px, 2.5vw, 36px) !important;
    font-weight: 400 !important;
}

/* Testimonial name */
.testimonial-name {
    font-size: var(--fs-h5);
}

/* Sub-meta / small labels */
.stat-label {
    font-size: 14px !important;
}

.subitem-group .sub-meta,
.blog-author-role,
.category-tag,
.mega-menu-footer-link,
.section-label {
    font-size: var(--fs-xs);
}

/* --- 3. OVERLAP / Z-INDEX FIXES ------------------------------ */

/*
  PRIMARY CAUSE: .solutions-grid had margin-bottom: -160px
  which intentionally overlapped the .about-section.
  This is a cool desktop effect but breaks on tablet/mobile.
  Strategy: keep effect on large screens, disable below 1024px.
*/

/* Desktop: keep the card-overlap effect */
@media (min-width: 1025px) {
    .solutions-grid {
        margin-bottom: -120px;
        /* slightly reduced from -160px */
        position: relative;
        z-index: 20;
    }

    .section-spacer {
        display: block;
        height: 160px;
        /* compensate for the negative margin */
    }

    .about-section {
        padding-top: 180px !important;
        /* give room for cards above */
        position: relative;
        z-index: 10;
    }
}

/* Tablet + mobile: NO overlap */
@media (max-width: 1024px) {
    .solutions-grid {
        margin-bottom: 0 !important;
        z-index: 1;
    }

    .section-spacer {
        display: none !important;
        height: 0 !important;
    }

    .about-section {
        padding-top: 60px !important;
    }
}

/*
  Contact form section: was pulling up with margin-top: -150px
  This caused overlap on certain viewports.
*/
@media (max-width: 1024px) {
    .contact-form-section {
        margin-top: 0 !important;
    }
}

/* Goal cards with absolute positioned images ? hide on tablet/mobile */
@media (max-width: 1024px) {

    .goal-image-bottom,
    .goal-image-top {
        display: none !important;
    }

    .about-goals-grid {
        padding-top: 0 !important;
    }
}

/* Blog banner title was display:inline-block causing layout issues */
.blog-banner-title {
    display: block;
    white-space: normal;
}

/* Mega menu z-index ensure it stays above everything */
.mega-menu-container.is-open {
    z-index: 11000;
}

/* Header always above page content */
#custom-header.site-header {
    z-index: 12000;
}

/* Fix glass cards on why-choose section overflowing */
.why-choose-grid {
    align-items: stretch;
}

.glass-card {
    min-height: auto;
    aspect-ratio: unset;
    padding: 40px 30px;
}

/* --- 4. MOBILE RESPONSIVENESS ? 768px ------------------------ */

@media (max-width: 768px) {

    /* --- Global --- */
    html,
    body {
        overflow-x: hidden;
    }

    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
        height: auto;
    }

    .ast-container,
    .partners-container,
    .latest-container,
    .custom-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* --- Hero --- */
    .homepage-hero {
        padding: 90px 0 50px !important;
        min-height: auto !important;
    }

    .hero-top-text {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        padding: 0 20px;
    }

    .hero-bottom-area {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
        padding: 0 20px;
    }

    .trusted-partner-text {
        max-width: 100% !important;
    }

    .it-services-card {
        grid-template-columns: 1fr !important;
        padding: 30px 20px !important;
        text-align: center !important;
    }

    .card-left h5 {
        justify-content: center !important;
    }

    .card-right {
        margin-top: 16px !important;
        max-height: 200px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    /* --- Solutions --- */
    .solutions-section {
        padding: 60px 0 0 !important;
    }

    .solutions-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 0 !important;
    }

    .solutions-grid .solution-card:nth-child(4),
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: auto !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- About (front page) --- */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .stats-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .stat-card {
        width: calc(50% - 6px) !important;
        flex: 0 0 calc(50% - 6px) !important;
        padding: 20px 12px !important;
    }

    /* --- Insights bento --- */
    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .box-5,
    .box-6 {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
        min-height: 200px !important;
    }

    .box-4 .tips-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 0 12px !important;
        display: inline-block !important;
    }

    /* --- Blogs grid --- */
    .blogs-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        overflow-x: unset !important;
        scroll-snap-type: unset !important;
        padding: 0 !important;
        display: grid !important;
    }

    .blog-card {
        flex: none !important;
        min-width: unset !important;
        width: 100% !important;
        scroll-snap-align: unset !important;
    }

    /* --- Testimonials --- */
    .testimonial-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .testimonial-card:not(.active) {
        display: none !important;
    }

    /* --- Industry slider --- */
    .industry-header {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .industry-slider-track {
        gap: 0 !important;
    }

    .industry-card {
        flex: 0 0 100%;
    }

    .industry-slider-nav-group {
        top: 125px !important;
        /* Centered on the 250px height image area */
        left: 0 !important;
        right: 0 !important;
        padding: 0 5px !important;
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .slider-nav-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
        border: none !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 15px rgba(232, 64, 154, 0.4) !important;
        color: #ffffff !important;
        overflow: hidden !important;
    }

    .slider-nav-btn i {
        font-size: 11px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* --- Why choose cards --- */
    .why-choose-grid {
        flex-direction: column !important;
        align-items: center !important;
    }

    .glass-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: unset !important;
        padding: 32px 24px !important;
    }

    /* --- Footer --- */
    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
    }

    .footer-column-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .newsletter-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
    }

    .footer-social-links {
        gap: 20px !important;
    }

    .footer-legal-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* --- About page --- */
    .about-hero {
        align-items: flex-start !important;
        min-height: unset !important;
        height: 100vh !important;
    }

    .about-goals-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        padding-top: 0 !important;
    }

    .goal-card {
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 40px 24px !important;
        margin-top: 0 !important;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .mission-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* --- Contact page --- */
    .contact-hero {
        padding: 100px 20px 80px !important;
    }

    .contact-form-container {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    .contact-form-header {
        padding: 40px 24px 24px !important;
    }

    .contact-form-content {
        padding: 0 24px 40px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-item.full-width {
        grid-column: span 1 !important;
    }

    .contact-tabs {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* --- Case studies page --- */
    .cs-hero-title {
        font-size: clamp(28px, 5vw, 48px) !important;
    }

    /* --- Web dev / IT solutions --- */
    .web-dev-row {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .web-dev-row-2 .web-dev-text {
        order: -1;
    }

    .business-tech-content,
    .business-tech-content.reverse-row {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .tech-image-col,
    .tech-visual-col,
    .tech-accordion-col,
    .tech-content-col {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }

    /* --- FAQ --- */
    .faq-pill {
        padding: 10px 20px !important;
        font-size: 12px !important;
    }

    /* --- Blog detail --- */
    .blog-content-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .blog-toc-sidebar {
        position: relative !important;
        top: auto !important;
    }

    .bd-content-wrapper {
        grid-template-columns: 1fr !important;
    }

    .bd-toc {
        position: relative !important;
        top: auto !important;
    }

    .bd-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* --- Success stories --- */
    .about-stats-section .stats-grid {
        flex-direction: column !important;
        align-items: center !important;
    }

    .about-stats-section .stat-card {
        width: 100% !important;
        max-width: 340px !important;
    }

    /* --- Featured blogs sidebar --- */
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .articles-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Partners carousel --- */
    .partners-section {
        padding: 40px 0 50px !important;
    }

    /* --- Prevent any heading/text overflow --- */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    span,
    li {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* --- 5. MOBILE RESPONSIVENESS ? 480px ------------------------ */

@media (max-width: 480px) {

    .ast-container,
    .partners-container,
    .latest-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Hero */
    .homepage-hero {
        padding: 80px 0 40px !important;
    }

    /* Stats */
    .stat-card {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* Info grid (contact) */
    .info-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    /* Related blogs */
    .bd-related-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact form */
    .contact-form-container {
        margin: 0 !important;
    }

    .contact-form-header {
        padding: 30px 16px 20px !important;
    }

    .contact-form-content {
        padding: 0 16px 30px !important;
    }

    /* Footer */
    .footer-cta-container {
        margin-bottom: 50px !important;
    }

    /* Blog horizontal cards on very small screens */
    .featured-blogs-section .horizontal-card {
        flex-direction: row !important;
        gap: 12px !important;
    }

    .featured-blogs-section .horizontal-card .blog-card-image {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: 70px !important;
    }
}

/* --- 6. TABLET ? 769px to 1024px ----------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {

    /* Heading scale on tablet */
    .homepage-hero .hero-top-text h1 {
        font-size: clamp(42px, 6vw, 64px) !important;
    }

    /* Solutions: 2-col grid on tablet */
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-bottom: 0 !important;
    }

    /* About goals: stay as flex column */
    .about-goals-grid {
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 0 !important;
    }

    /* Business tech */
    .business-tech-content,
    .business-tech-content.reverse-row {
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Why choose: 2 cards per row */
    .why-choose-grid {
        flex-wrap: wrap !important;
    }

    .glass-card {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
        aspect-ratio: unset !important;
    }

    /* Footer: 2 columns */
    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }

    /* Info grid: 2 columns */
    .info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Articles: 2 columns */
    .articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Blogs: 2 columns */
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contact form container */
    .contact-form-container {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    /* Padding adjustments */
    .ast-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* --- 7. SPECIFIC OVERLAP FIXES ? HIGH SPECIFICITY ------------ */

/*
  Fix: blog-card-content padding: 60px 30px 10px 10px !important
  This was causing internal content to overflow the card.
*/
.blog-card-content {
    padding: 0 !important;
}

/*
  Fix: .contact-form-container width: 900px !important
  Hard-coded pixel width breaks on smaller viewports.
*/
.contact-form-container {
    width: min(900px, 100%) !important;
}

/*
  Fix: post-header using width: 100vw + margin-left: calc(50% - 50vw)
  This pattern causes horizontal scroll on some setups.
*/
@media (max-width: 768px) {
    .post-header {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 80px 20px 100px !important;
    }
}

/*
  Fix: mega-menu-footer with position:relative/absolute items
  overflowing on mobile nav.
*/
@media (max-width: 1024px) {

    .mega-menu-footer,
    .mega-menu-divider {
        display: none !important;
    }
}

/*
  Fix: about-hero height: 120vh causing cut-off on tall phones.
*/
@media (max-width: 768px) {
    .about-hero {
        height: auto !important;
        min-height: 100svh;
        padding: 100px 20px 60px !important;
    }
}

/*
  Fix: blog detail two-column layout with position:sticky TOC
  breaking on mobile ? TOC was overlapping article content.
*/
@media (max-width: 768px) {
    .blog-toc-sidebar {
        position: static !important;
        border-left: none !important;
        border-top: 1px solid #f0f4f8;
        padding: 20px 0 0 !important;
        margin-bottom: 30px;
    }
}

/*
  Fix: .trusted-partner-text h2 font-size set to 54px
  ? too large for its container at mid-sizes.
*/
.trusted-partner-text h2 {
    font-size: clamp(22px, 3.5vw, 44px);
}

/*
  Fix: .stat-number font-size: 54px next to .stat-suffix: 38px
  ? ratio is fine but sizes should scale.
*/
.stat-number {
    font-size: clamp(32px, 4vw, 54px) !important;
}

.stat-suffix {
    font-size: clamp(22px, 2.5vw, 38px) !important;
}

/* --- 8. MOBILE-SPECIFIC SECTION PADDING ---------------------- */

@media (max-width: 768px) {

    /* Standardise section vertical padding */
    .solutions-section,
    .clients-section,
    .testimonials-section,
    .blogs-section,
    .why-choose-section,
    .faq-section,
    .contact-cta-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .insights-section,
    .partners-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .about-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .industry-slider-section,
    .business-tech-section {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }

    .footer-wrapper {
        padding: 50px 0 40px !important;
    }

    /* Hero sections on inner pages */
    .web-dev-hero,
    .it-solutions-hero,
    .blogs-page .blogs-hero,
    .contact-hero {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }

    .about-intro-text-section {
        padding: 60px 0 !important;
    }

    .about-goals-section .ast-container {
        padding: 40px 20px !important;
    }

    .about-stats-section {
        padding: 80px 0 !important;
    }

    .about-mission-section,
    .about-values-section,
    .about-team-section,
    .about-people-section {
        padding: 20px 0 !important;
    }

    .about-partners-section {
        padding: 60px 0 80px !important;
    }

    /* Blog detail */
    .blog-detail-banner,
    .bd-hero {
        padding: 80px 16px 50px !important;
    }

    .blog-post-intro,
    .bd-intro-section {
        padding: 50px 16px 30px !important;
    }

    .blog-post-thumbnail,
    .bd-featured-img-wrap {
        padding: 0 16px !important;
        margin-bottom: 30px !important;
    }

    .blog-content-container,
    .bd-content-section {
        padding: 0 16px 50px !important;
    }

    .bd-related-section {
        padding: 50px 16px 70px !important;
    }

    /* Latest articles */
    .latest-articles-section {
        padding: 60px 0 !important;
    }

    .latest-header {
        margin-bottom: 40px !important;
    }

    /* FAQ */
    .faq-list-section {
        padding: 60px 0 80px !important;
    }

    .faq-modern-section {
        padding: 60px 0 !important;
    }

    .faq-modern-container {
        padding: 0 20px !important;
    }

    /* Case studies */
    .cs-intro-section {
        padding: 70px 0 40px !important;
    }

    /* Web dev */
    .web-dev-intro-container {
        padding: 70px 20px 40px !important;
    }

    .web-dev-services-section {
        padding: 50px 0 !important;
    }

    .web-dev-service-row {
        gap: 40px !important;
        margin-bottom: 60px !important;
    }

    /* Quote section */
    .quote-section {
        padding: 60px 16px !important;
    }
}

@media (max-width: 480px) {

    .solutions-section,
    .clients-section,
    .blogs-section,
    .testimonials-section,
    .why-choose-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .insights-section {
        padding-top: 40px !important;
        padding-bottom: 50px !important;
    }
}

/* --- 9. HEADER NAV MOBILE IMPROVEMENTS ----------------------- */

@media (max-width: 768px) {

    /* Ensure mobile nav drawer is scrollable */
    .header-nav-wrap {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Give bottom padding so last nav item isn't flush */
    .main-navigation {
        padding-bottom: 32px !important;
    }

    /* Services accordion in mobile nav */
    .category-item {
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Category item chevron direction */
    .category-item i.fa-chevron-right {
        transform: rotate(90deg) !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
        padding-right: 20px;
    }

    .category-item.mobile-active i.fa-chevron-right {
        transform: rotate(-90deg) !important;
        color: #e44d93 !important;
    }
}

/* --- 10. UTILITY ? PREVENT HORIZONTAL SCROLL ----------------- */

@media (max-width: 1024px) {

    section,
    .about-section,
    .insights-section,
    .industry-slider-section,
    .why-choose-section,
    .testimonials-section,
    .clients-section,
    .blogs-section,
    .contact-cta-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Solutions can overflow vertically but not horizontally */
    .solutions-section {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
}

/* --- 11. ACCESSIBILITY ? REDUCED MOTION ---------------------- */

@media (prefers-reduced-motion: reduce) {

    .scroll-track,
    .marquee-track,
    .tech-track {
        animation: none !important;
    }

    .solution-card,
    .glass-card,
    .blog-card,
    .industry-card,
    .testimonial-card {
        transition: none !important;
    }
}

/* ============================================================
   TECH STACK SECTION ? new tabbed marquee (web-development.php)
   Replaces old .tech-hero + .tech-slider + .tech-track/.tech-card
   ============================================================ */

/* -- Outer section wrapper -- */
.tech-stack-section {
    background: #ffffff;
    padding: 80px 0 60px;
    overflow: hidden;
}

/* -- Header block -- */
.tech-stack-header {
    max-width: 860px;
    margin: 0 auto 60px;
    text-align: center;
    padding: 0 24px;
}

.tech-stack-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 4vw, 48px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #111 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.5px;
}

.tech-stack-accent {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    color: transparent;
    display: inline;
}

.tech-stack-desc {
    font-size: clamp(14px, 1.4vw, 16px) !important;
    line-height: 1.8 !important;
    color: #666 !important;
    max-width: 720px;
    margin: 0 auto 36px !important;
}

/* -- Tab toggle buttons -- */
.tech-tab-group {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tech-tab {
    padding: 10px 34px;
    border-radius: 50px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1.5px solid #D24D96;
    background: transparent;
    color: #D24D96;
    min-width: 110px;
}

.tech-tab.active {
    background: linear-gradient(to right, #D24D96, #8C3A86);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(210, 77, 150, 0.25);
}

.tech-tab:hover:not(.active) {
    background: rgba(210, 77, 150, 0.06);
}

/* -- Panel wrapper -- */
.tech-panel {
    width: 100%;
    overflow: hidden;
}

/* -- Scrolling track -- */
.tech-marquee-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: auto;
    padding: 20px 40px 30px;
    /* hide scrollbar ? purely JS/CSS driven */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* prevent flex children from shrinking below their declared width */
    flex-shrink: 0;
}

.tech-marquee-track::-webkit-scrollbar {
    display: none;
}

.tech-marquee-container {
    position: relative;
}

/* -- Individual tech card (class: tmc) -- */
.tmc {
    flex: 0 0 220px;
    /* fixed width ? never shrinks */
    min-width: 220px;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 24px 28px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.tmc:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
    border-color: rgba(210, 77, 150, 0.2);
}

/* Icon container */
.tmc-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 14px;
    padding: 10px;
}

.tmc-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

/* Card text */
.tmc h4 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #111 !important;
    margin: 0 0 10px !important;
    white-space: nowrap;
    /* prevent letter-wrap */
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmc p {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* -- Edge fade overlays -- */
.tech-panel {
    position: relative;
}

.tech-panel::before,
.tech-panel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 2;
}

.tech-panel::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.tech-panel::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .tech-stack-section {
        padding: 60px 0 40px;
    }

    .tech-stack-header {
        margin-bottom: 40px;
        padding: 0 20px;
    }

    .tech-marquee-track {
        gap: 16px;
        padding: 16px 20px 24px;
    }

    .tmc {
        flex: 0 0 180px;
        min-width: 180px;
        padding: 28px 18px 22px;
    }

    .tmc-icon {
        width: 50px;
        height: 50px;
    }

    .tmc-icon img {
        width: 32px;
        height: 32px;
    }

    .tmc h4 {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .tmc p {
        font-size: 12px !important;
    }

    .tech-panel::before,
    .tech-panel::after {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .tech-tab {
        padding: 9px 24px;
        font-size: 13px;
        min-width: 96px;
    }

    .tmc {
        flex: 0 0 160px;
        min-width: 160px;
        padding: 24px 14px 18px;
    }
}

/* ============================================================
   CONSOLIDATED FIXES ? applied last for highest specificity
   1. Clients section ? no pink blob on mobile
   2. FAQ questions ? always black
   3. Buttons ? plain solid base, gradient only on :hover
   ============================================================ */


/* -- 2. FAQ QUESTIONS ? always black, no colour change on active -- */
.faq-list-question h4,
.faq-list-item .faq-list-question h4,
.faq-list-item.active .faq-list-question h4,
.faq-list-item:hover .faq-list-question h4 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* -- 3. BUTTONS — text-only hover color, no shadow, no background change -- */

/* Base state: always gradient, no shadow */
.lets-talk-btn,
.explore-more-btn,
.our-story-btn,
.purple-pill-btn,
.people-button,
.footer-cta-button,
.slider-explore-btn,
.download-brochure-btn,
.submit-btn,
.submit-app-btn,
.download-btn,
.btn-primary,
.pink-gradient-btn {
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%) !important;
    background-image: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%) !important;
    box-shadow: none !important;
    transition: color 0.3s ease !important;
}

/* Hover: text color only — no background, no shadow change */
.lets-talk-btn:hover,
.explore-more-btn:hover,
.our-story-btn:hover,
.purple-pill-btn:hover,
.people-button:hover,
.footer-cta-button:hover,
.slider-explore-btn:hover,
.download-brochure-btn:hover,
.submit-btn:hover,
.submit-app-btn:hover,
.download-btn:hover,
.btn-primary:hover,
.pink-gradient-btn:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    background-image: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    box-shadow: none !important;
    color: #000000 !important;
}

/* White pill button: keep white bg on hover — only text color changes */
.white-pill-btn:hover {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #000000 !important;
}

/* Contact form submit */
.contact-form-card input[type="submit"],
.wpcf7-form input[type="submit"],
.form-group input[type="submit"],
.pink-gradient-btn {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    background-image: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    box-shadow: none !important;
}

.contact-form-card input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.form-group input[type="submit"]:hover,
.pink-gradient-btn:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    background-image: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    box-shadow: none !important;
    color: #000000 !important;
}


/* ---------------------------------------------------------------
   CLIENTS SECTION ? CANONICAL (single source of truth)
   All previous .clients-section rules above are overridden here.
   --------------------------------------------------------------- */

/* -- Base section -- */
.clients-section {
    position: relative !important;
    overflow: hidden !important;
    padding: 80px 0 100px !important;
    background: #f8f0fa !important;
    text-align: center !important;
    display: block !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* -- Background video restored -- */
.clients-section .clients-bg-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 100 !important;
    display: block !important;
}

/* -- Content above video -- */
.clients-section .partners-container {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 50px !important;
    width: 100% !important;
}

/* -- Header text -- */
.clients-section .solutions-header {
    text-align: center !important;
    max-width: 760px !important;
    position: relative !important;
    z-index: 2 !important;
    color: #011218 !important;
    -webkit-text-fill-color: initial !important;
}

.clients-section .solutions-header * {
    -webkit-text-fill-color: initial;
}

.clients-section .solutions-header h2 {
    font-size: clamp(28px, 4vw, 52px) !important;
    font-weight: 400 !important;
    color: #011218 !important;
    -webkit-text-fill-color: #011218 !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.5px !important;
}

.clients-section .solutions-header h2 .purple-text {
    background: linear-gradient(135deg, #E8409A, #5E1A6B) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.clients-section .solutions-header p {
    font-size: clamp(14px, 1.4vw, 17px) !important;
    color: #2c2d30 !important;
    -webkit-text-fill-color: #2c2d30 !important;
    line-height: 1.7 !important;
    margin: 0 auto 30px !important;
    max-width: 640px !important;
}

/* -- Desktop pyramid scene -- */
.clients-section .scene {
    position: relative !important;
    width: 1210px !important;
    height: 420px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Scale down gracefully */
@media (max-width: 1400px) {
    .clients-section .scene {
        transform: translateX(-50%) scale(0.88) !important;
        transform-origin: center top;
        height: 380px !important;
    }
}

@media (max-width: 1200px) {
    .clients-section .scene {
        transform: translateX(-50%) scale(0.76) !important;
        transform-origin: center top;
        height: 330px !important;
    }
}

@media (max-width: 1024px) {
    .clients-section .scene {
        transform: translateX(-50%) scale(0.64) !important;
        transform-origin: center top;
        height: 290px !important;
    }
}

@media (max-width: 900px) {
    .clients-section .scene {
        transform: translateX(-50%) scale(0.54) !important;
        transform-origin: center top;
        height: 250px !important;
    }
}

/* -- Logo cards (desktop pyramid) -- */
.clients-section .logo-card {
    position: absolute !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.clients-section .logo-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}

.clients-section .logo-card img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
}

/* -- Mobile marquee hidden on desktop -- */
.clients-section .scene-mobile {
    display: none !important;
}

/* -- Mobile & tablet: switch to marquee, keep video -- */
@media (max-width: 768px) {
    .clients-section {
        padding: 60px 0 !important;
    }

    .clients-section .partners-container {
        gap: 36px !important;
        padding: 0 20px !important;
    }

    /* Hide desktop pyramid */
    .clients-section .scene.desktop-only {
        display: none !important;
    }

    /* Show mobile marquee */
    .clients-section .scene-mobile {
        display: block !important;
        width: 100% !important;
    }

    /* Mobile logo marquee: white cards on dark bg */
    .clients-section .marquee-wrapper {
        overflow: hidden !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 16px 0 !important;
    }

    .clients-section .mobile-logo-card {
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        width: 140px !important;
        height: 85px !important;
        padding: 5px !important;
    }

    .clients-section .mobile-logo-card img {
        filter: none !important;
        opacity: 1 !important;
        max-width: 90% !important;
        max-height: 90% !important;
    }
}

@media (max-width: 480px) {
    .clients-section {
        padding: 50px 0 !important;
    }

    .clients-section .mobile-logo-card {
        width: 120px !important;
        height: 65px !important;
    }
}

/* ============================================================
   PURPLE ROSE ? HOMEPAGE CANONICAL OVERRIDES
   Applied last to win over all previous patch rules.
   Desktop (min-width: 1025px): enforces correct layout.
   ============================================================ */

@media (min-width: 1025px) {

    /* -- HERO -- */
    .homepage-hero {
        padding: 120px 0 60px !important;
        min-height: 100vh !important;
    }

    .hero-top-text h1 {
        font-size: 54px !important;
        font-weight: 500 !important;
        line-height: 1.05 !important;
        letter-spacing: -2px !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .hero-bottom-area {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr !important;
        gap: 60px !important;
        width: 100% !important;
        max-width: 1200px !important;
        align-items: center !important;
        text-align: left !important;
    }

    /* -- SOLUTIONS SECTION -- */
    .solutions-badge {
        display: inline-block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        padding: 8px 22px !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        margin-bottom: 18px !important;
        line-height: normal !important;
    }

    .solutions-section .solutions-header h2,
    .solutions-section .solutions-main-heading {
        font-size: clamp(28px, 4vw, 44px) !important;
        font-weight: 500 !important;
        color: #011218 !important;
        -webkit-text-fill-color: #011218 !important;
        letter-spacing: -0.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 24px !important;
    }

    .solutions-gradient-line {
        display: block !important;
        background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }

    .solutions-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 24px !important;
        padding: 5px !important;
    }

    .solutions-grid .solution-card {
        grid-column: span 2 !important;
    }

    .solutions-grid .solution-card:nth-child(4) {
        grid-column: 2 / 4 !important;
    }

    .solutions-grid .solution-card:nth-child(5) {
        grid-column: 4 / 6 !important;
    }

    /* -- ABOUT SECTION -- */
    .about-section {
        padding: 80px 0 80px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .about-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 80px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .about-left {
        flex: 1.2 !important;
        min-width: 0 !important;
    }

    .about-right {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .about-main-title {
        font-size: 48px !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
        letter-spacing: -1px !important;
        color: #011218 !important;
    }

    .stats-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
        margin-top: 40px !important;
    }

    /* -- INSIGHTS BENTO GRID -- */
    .insights-section {
        padding: 80px 0 100px !important;
    }

    .insights-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.3fr 1.5fr 1fr !important;
        grid-template-rows: 320px 320px !important;
        gap: 30px !important;
        width: 100% !important;
        margin-top: 60px !important;
    }

    .insight-box.box-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .insight-box.box-2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
    }

    .insight-box.box-3 {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
    }

    .insight-box.box-4 {
        grid-column: 3 / span 2 !important;
        grid-row: 1 !important;
    }

    .insight-box.box-5 {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: flex !important;
        background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%) !important;
    }

    .insight-box.box-6 {
        grid-column: 4 !important;
        grid-row: 2 !important;
    }

    /* -- BLOGS SECTION -- */
    .blogs-section {
        padding: 0px 0 100px !important;
    }

    .blogs-section .solutions-header h2 {
        font-size: clamp(32px, 4vw, 44px) !important;
        line-height: 1.25 !important;
    }

    .blogs-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 50px !important;
        padding-top: 60px;
    }

    /* -- TESTIMONIALS -- */
    .testimonials-section {
        padding: 100px 0 80px !important;
    }

    /* Testimonial card sizes set dynamically by JS */
    .testimonial-card.active {
        opacity: 1 !important;
        filter: none !important;
    }

    .testimonial-card:not(.active) {
        opacity: 0.55 !important;
        filter: none !important;
    }

    /* -- CLIENTS SECTION -- */
    .clients-section {
        padding: 20px 0 100px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .clients-section .solutions-header h2 {
        font-size: 44px !important;
        color: #011218 !important;
        font-weight: 400 !important;
    }

    .clients-section .solutions-header p {
        color: #444444 !important;
    }

    .clients-section .explore-more-btn {
        background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
        border: none !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
}

/* -- END HOMEPAGE CANONICAL OVERRIDES -- */

/* ============================================================
   MOBILE FIX ? Solutions cards stack cleanly on small screens
   ============================================================ */
@media (max-width: 768px) {

    /* Force single-column, full-width grid */
    .solutions-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    /* Reset ALL grid-column spans so cards go full width */
    .solutions-grid .solution-card,
    .solutions-grid .solution-card:nth-child(1),
    .solutions-grid .solution-card:nth-child(2),
    .solutions-grid .solution-card:nth-child(3),
    .solutions-grid .solution-card:nth-child(4),
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Card internals ? readable on mobile */
    .solution-card {
        padding: 32px 24px !important;
        text-align: center !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .solution-card h4 {
        font-size: 18px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
    }

    .solution-card p {
        font-size: 14px !important;
        min-height: unset !important;
    }

    .card-icon-box {
        width: 64px !important;
        height: 64px !important;
    }

    .solution-icon {
        width: 52px !important;
        height: 52px !important;
    }

    /* Remove the negative margin that causes overlap with about section */
    .section-spacer {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .solutions-section {
        padding: 50px 0 0 !important;
    }

    .solutions-grid {
        gap: 12px !important;
    }

    .solution-card {
        padding: 28px 20px !important;
    }
}

/* -- END MOBILE SOLUTIONS FIX -- */

/* ============================================================
   SUCCESS STORIES PAGE ? GRADIENT TEXT + CARD FIXES
   ============================================================ */

/* Gradient text for cs-hero-title spans */
.cs-gradient-text {
    background: linear-gradient(135deg, #E8409A 0%, #a855f7 100%);
    background-clip: text;
    color: transparent !important;
    display: inline;
}

/* cs-card image wrap ? ensure bg color shows when image is missing */
.cs-card-image-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    background: transparent;
}

.cs-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.cs-card-image-wrap:hover .cs-card-img {
    transform: scale(1.05);
}

/* cs-hero title responsive */
.cs-hero-title {
    font-size: clamp(32px, 6vw, 56px) !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
}

.cs-hero-title b {
    font-weight: 800;
}

/* cs-hero sub */
.cs-hero-sub {
    color: rgb(183 176 176 / 72%) !important;
    font-size: clamp(15px, 1.4vw, 18px) !important;
    max-width: 560px;
    margin: 0 auto;
}

/* cs-card grid responsive */
@media (max-width: 768px) {
    .cs-grid {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }

    .cs-card-image-wrap {
        border-radius: 12px 12px 0 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .cs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ============================================================
   BLOG PAGE STYLES ? scoped to .blogs-page body class
   ============================================================ */

.blogs-page {
    --bp-dark2: #0f0f1a;
    --bp-heading: #000000;
    --bp-body: #444460;
    --bp-muted: #888899;
    --bp-purple: #7B2FBE;
    --bp-pink: #E91E8C;
    --bp-cat: #9B30FF;
    --bp-gradient: linear-gradient(135deg, #7B2FBE 0%, #E91E8C 100%);
    --bp-radius: 10px;
    --bp-ease: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.blogs-page {
    overflow-x: hidden;
    width: 100%;
}

.blogs-page .blogs-hero {
    position: relative;
    background-color: #0A0A12;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 140px 0 90px;
    overflow: hidden;
    text-align: center;
}

.blogs-page .blogs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.blogs-page .blogs-hero-glow-1 {
    position: absolute;
    width: 700px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(140, 40, 210, 0.65) 0%, rgba(220, 30, 130, 0.25) 45%, transparent 70%);
    filter: blur(60px);
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.blogs-page .blogs-hero-glow-2 {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 30, 130, 0.4) 0%, transparent 70%);
    filter: blur(70px);
    top: 0;
    right: 8%;
    pointer-events: none;
    z-index: 1;
}

.blogs-page .blogs-hero-glow-3 {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 20, 180, 0.35) 0%, transparent 70%);
    filter: blur(70px);
    bottom: 0;
    left: 5%;
    pointer-events: none;
    z-index: 1;
}

.blogs-page .blogs-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.blogs-page .blogs-hero-content::before {
    content: "Blogs";
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: capitalize;
    margin-bottom: 24px;

    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.blogs-page .blogs-hero h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 300;
    line-height: 1.12;
    color: #ffffff;
    margin: 0 0 22px;
    letter-spacing: -0.02em;
}

.blogs-page .blogs-hero h1 .bh-bold {
    font-weight: 600;
}

.blogs-page .blogs-hero p {
    font-family: 'Manrope', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    max-width: 580px;
    margin: 0 auto 36px;
}

.blogs-page .blog-search-container {
    margin-bottom: 30px;
}

.blogs-page .blog-search-form {
    display: flex;
    justify-content: center;
}

.blogs-page .search-input-wrapper {
    position: relative;
    width: 1200px;
    max-width: 100%;
}

.blogs-page .search-icon {
    position: absolute;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(255 255 255 / 61%);
    font-size: 18px;
    pointer-events: none;
}

.blogs-page .blog-search-field {
    width: 100%;
    padding: 10px 20px 10px 44px;
    background: rgba(255, 255, 255, 0.10);
    border: none;
    border-radius: 50px;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    outline: none;
    transition: background var(--bp-ease);
}

.blogs-page .blog-search-field::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.blogs-page .blog-search-field:focus {
    background: rgba(255, 255, 255, 0.14);
}

.blogs-page .blog-filters-container {
    display: flex;
    justify-content: center;
}

.blogs-page .blog-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.blogs-page .filter-chip {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 50px;
    border: 0px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--bp-ease);
    white-space: nowrap;
}

.blogs-page .filter-chip:hover {
    border-color: rgba(155, 48, 255, 0.5);
    color: #fff;
    background: rgba(123, 47, 190, 0.15);
}

.blogs-page .filter-chip.active {
    background: var(--bp-gradient);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.blogs-page .featured-blogs-section {
    background: #ffffff;
    padding: 72px 0 56px;
}

.blogs-page .latest-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.blogs-page .featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 880px) {
    .blogs-page .featured-grid {
        grid-template-columns: 1fr;
    }
}

.blogs-page .blog-card {
    background: #ffffff;
    border: none;
    border-radius: var(--bp-radius);
    overflow: hidden;
    transition: transform var(--bp-ease), box-shadow var(--bp-ease);
}

.blogs-page .blog-card:hover {
    /* transform: translateY removed for image-only zoom effect */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}

.blogs-page .blog-card-image {
    display: block;
    overflow: hidden;
    background: #ddd;
}

.blogs-page .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.blogs-page .blog-card:hover .blog-card-image img {
    transform: scale(1.1);
}

.blogs-page .blog-card-content {
    padding: 18px 4px 4px;
}

.blogs-page .blog-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bp-cat);
    margin-bottom: 8px;
}

.blogs-page .blog-title {
    margin: 0 0 8px;
    line-height: 1.35;
}

.blogs-page .blog-title a {
    color: var(--bp-heading);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--bp-ease);
}

.blogs-page .blog-title a:hover {
    color: var(--bp-purple);
}

.blogs-page .blog-excerpt {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bp-body);
    margin: 0 0 12px;
    font-family: 'Manrope', sans-serif;
}

.blogs-page .blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bp-muted);
    font-family: 'Manrope', sans-serif;
}

.blogs-page .blog-meta .author {
    color: var(--bp-body);
    font-weight: 500;
}

.blogs-page .blog-meta .divider::after {
    content: "|";
    color: var(--bp-muted);
}

.blogs-page .featured-main .blog-card-image {
    height: 300px;
    border-radius: var(--bp-radius);
}

.blogs-page .featured-main .blog-title {
    font-size: 20px;
}

.blogs-page .featured-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blogs-page .horizontal-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.blogs-page .horizontal-card .blog-card-image {
    width: 120px;
    min-width: 120px;
    border-radius: var(--bp-radius);
    flex-shrink: 0;
}

.blogs-page .horizontal-card .blog-card-content {
    padding: 4px 0 4px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blogs-page .horizontal-card .blog-title {
    font-size: 13.5px;
    margin-bottom: 6px;
    display: block;
}

.blogs-page .latest-articles-section {
    background: #ffffff;
    padding: 56px 0 80px;
}

.blogs-page .latest-header {
    margin-bottom: 36px;
}

.blogs-page .latest-header h2 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    color: var(--bp-heading);
    margin: 0 0 8px;
}

.blogs-page .latest-header p {
    font-size: 14px;
    color: var(--bp-body);
    margin: 0;
    max-width: 500px;
    font-family: 'Manrope', sans-serif;
}

.blogs-page .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 900px) {
    .blogs-page .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .blogs-page .articles-grid {
        grid-template-columns: 1fr;
    }
}

.blogs-page .vertical-card .blog-card-image {
    height: 195px;
    border-radius: var(--bp-radius);
}

.blogs-page .vertical-card .blog-title {
    font-size: 14.5px;
}

.blogs-page .blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: 52px;
}

.blogs-page .blog-pagination .page-numbers {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
}

.blogs-page .blog-pagination .page-numbers li {
    display: flex;
}

.blogs-page .blog-pagination .page-numbers a,
.blogs-page .blog-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--bp-body);
    background: #f2f2f8;
    border: 1px solid #e0e0ee;
    text-decoration: none;
    transition: all var(--bp-ease);
}

.blogs-page .blog-pagination .page-numbers a:hover {
    background: rgba(123, 47, 190, 0.1);
    border-color: rgba(123, 47, 190, 0.3);
    color: var(--bp-purple);
}

.blogs-page .blog-pagination .page-numbers .current {
    background: var(--bp-gradient);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}

.blogs-page .blogs-cta-section {
    background: var(--bp-dark2);
    padding: 96px 40px;
    text-align: center;
}

.blogs-page .blogs-cta-section h2 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 4vw, 50px);
    font-weight: 300;
    color: #ffffff;
    margin: 0 0 6px;
    line-height: 1.2;
}

.blogs-page .blogs-cta-section h2 span {
    background: var(--bp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.blogs-page .blogs-cta-section p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
    line-height: 1.7;
    font-family: 'Manrope', sans-serif;
}

.blogs-page .blogs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 30px;
    background: var(--bp-gradient);
    color: #fff;
    border-radius: 50px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--bp-ease), transform var(--bp-ease);
}

.blogs-page .blogs-cta-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    color: #fff;
}

.blogs-page .no-posts-found {
    text-align: center;
    color: var(--bp-muted);
    font-size: 15px;
    padding: 60px 0;
    font-family: 'Manrope', sans-serif;
}

.blogs-page .entry-title {
    display: none;
}

@media (max-width: 768px) {
    .blogs-page .blogs-hero {
        padding: 110px 0 64px;
    }

    .blogs-page .latest-container {
        padding: 0 20px;
    }

    .blogs-page .ast-container,
    .blogs-page .latest-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .blogs-page .horizontal-card .blog-card-image {
        width: 100px;
        min-width: 100px;
    }

    .blogs-page .featured-blogs-section,
    .blogs-page .latest-articles-section {
        padding: 48px 0;
    }

    /* Increase internal padding for blog card content on mobile */
    .blogs-page .blog-card-content {
        padding: 24px 20px 20px !important;
    }

    /* Prevent mobile image crop for featured main post */
    .blogs-page .featured-main .blog-card-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* ============================================================
   MOBILE HEADER FIXES
   ============================================================ */

@media (max-width: 1024px) {
    .mega-menu-container {
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none;
        transition: max-height 0.4s ease !important;
    }

    .mega-menu-container.mobile-services-open {
        max-height: 2000px !important;
        pointer-events: auto;
    }

    #services-menu-toggle::after {
        content: '\f078';
        font-family: 'FontAwesome', 'Font Awesome 4', sans-serif;
        font-size: 12px;
        opacity: 0.5;
        transition: transform 0.3s ease;
        margin-left: 6px;
        padding-right: 20px;
    }

    .services-nav-open #services-menu-toggle::after {
        transform: rotate(180deg);
    }
}

@media (max-width: 768px) {
    .mega-menu-container .dropdown-video-bg {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 0.18 !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .mega-menu-container.mobile-services-open {
        position: relative !important;
    }

    .mega-menu-container .mega-menu-inner,
    .mega-menu-container .mega-menu-footer {
        position: relative !important;
        z-index: 1 !important;
    }

    #custom-header.header-nav-open .header-nav-wrap {
        background-image: url('/wp-content/uploads/2026/02/7c585fb324afdc2cdb553147543cf58a3b3bde1b-scaled.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .header-nav-wrap::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(1, 12, 20, 0.88);
        z-index: 0;
        pointer-events: none;
    }

    .header-nav-wrap .main-navigation {
        position: relative;
        z-index: 1;
    }
}

/* ============================================================
   BOX-4 DESIGN CORRECTIONS & RESPONSIVENESS
   ============================================================ */
.insight-box.box-4 {
    position: relative !important;
    background: #f8f9fa !important;
    padding: 50px !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.insight-box.box-4 .tips-badge {
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    margin-bottom: 0 !important;
}

.insight-box.box-4 h3 {
    font-size: 32px !important;
    color: #011218 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    max-width: 80% !important;
}

.insight-box.box-4 p {
    color: #475569 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    max-width: 85% !important;
}

/* Mobile & Tablet Responsiveness for Box 4 */
@media (max-width: 1024px) {
    .insight-box.box-4 {
        padding: 40px !important;
    }

    .insight-box.box-4 h3 {
        font-size: 28px !important;
        max-width: 90% !important;
    }

    .insight-box.box-4 p {
        font-size: 15px !important;
        max-width: 95% !important;
    }
}

@media (max-width: 768px) {
    .insight-box.box-4 {
        padding: 30px 20px !important;
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    .insight-box.box-4 .tips-badge {
        top: 1px !important;
        right: 13px !important;
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    .insight-box.box-4 h3 {
        font-size: 24px !important;
        margin-top: 30px !important;
        max-width: 100% !important;
    }

    .insight-box.box-4 p {
        font-size: 14px !important;
        margin-bottom: 25px !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   BUTTON CLICK STATE FIXES
   ============================================================ */
/* Prevent text from turning default blue on click/focus */
a.purple-pill-btn:active,
a.purple-pill-btn:focus,
a.purple-pill-btn:visited,
a.our-story-btn:active,
a.our-story-btn:focus,
a.our-story-btn:visited,
a.lets-talk-btn:active,
a.lets-talk-btn:focus,
a.lets-talk-btn:visited {
    color: #ffffff !important;
}

/* Remove default focus outline that might appear on buttons */
a:active,
a:focus {
    outline: none !important;
}

/* ============================================================
   BREADCRUMB SEPARATOR UPDATE (SOLID WHITE TRIANGLE)
   ============================================================ */
.breadcrumbs .separator {
    color: transparent !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 12px !important;
    position: relative !important;
}

.breadcrumbs .separator::after {
    content: "\25B6" !important;
    /* Solid right-pointing triangle */
    color: #ffffff !important;
    font-size: 8px !important;
    position: absolute !important;
}

/* ============================================================
   ACTIVE/SELECTED MENU HIGHLIGHT
   ============================================================ */
/* Breadcrumb selected items */
.breadcrumbs .current,
.bd-bc-current {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
}

/* Main Navigation & Hardcoded Mega Menu Active links */
.main-navigation ul li.current-menu-item>a,
.main-navigation ul li.current_page_item>a,
#custom-header a.current-active-link,
a.current-active-link {
    color: #e44d93 !important;
    font-weight: 700 !important;
}

/* ============================================================
   SLIDER NAV BUTTON HIGHLIGHT
   ============================================================ */
body .slider-nav-btn.next,
body .slider-nav-btn.prev {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(232, 64, 154, 0.3) !important;
}

body .slider-nav-btn.next:hover,
body .slider-nav-btn.prev:hover {
    background: linear-gradient(135deg, #5E1A6B 0%, #E8409A 100%) !important;
    box-shadow: 0 8px 25px rgba(94, 26, 107, 0.4) !important;
}

/* ============================================================
   TECH TAB ACTIVE & HOVER HIGHLIGHT
   ============================================================ */
body .tech-tab-group button.tech-tab {
    color: #011218 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
    border: 0px solid transparent !important;
    background: transparent !important;
}

body .tech-tab-group button.tech-tab::before {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: inherit !important;
    padding: 2px !important;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: destination-out !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

body .tech-tab-group button.tech-tab.active {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(232, 64, 154, 0.3) !important;
    border-color: transparent !important;
}

body .tech-tab-group button.tech-tab:hover {
    color: #000000 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

body .tech-tab-group button.tech-tab:hover::before {
    opacity: 1 !important;
}

body .tech-tab-group button.tech-tab.active::before {
    display: none !important;
}

body .tech-tab-group button.tech-tab.active:hover {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(232, 64, 154, 0.4) !important;
}

/* GLOBAL BLOCKS RELOCATED TO END OF FILE */

@media (max-width: 768px) {
    .blogs-page .blogs-hero-content h1 {
        font-size: 36px !important;

    }

    .footer-contact-phone a,
    .footer-contact-phone a:visited,
    .footer-contact-phone a:hover,
    .footer-contact-phone a:active,
    .footer-contact-phone a:focus {
        color: #ffffff !important;
        text-decoration: none !important;
    }
}

/* Disable Blog/Case Study Hover Effects on Mobile/Tablet */
@media (max-width: 1100px) {

    body .blog-card:hover,
    body .cs-card:hover,
    body .bd-rel-card:hover,
    body .featured-card:hover,
    body .horizontal-card:hover,
    body .vertical-card:hover,
    body .ins-popular-item:hover,
    body .ins-featured-card:hover,
    body .insight-box:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    body .blog-card-image img,
    body .cs-card-img,
    body .bd-rel-img,
    body .ins-pop-thumb img,
    body .ins-card-image img,
    body .insight-img,
    body .blog-card:hover .blog-card-image img,
    body .blog-card-image:hover img,
    body .blogs-page .blog-card:hover .blog-card-image img,
    body .cs-card-image-wrap:hover .cs-card-img,
    body .cs-card:hover .cs-card-img,
    body .bd-rel-card:hover .bd-rel-img,
    body .ins-popular-item:hover .ins-pop-thumb img,
    body .featured-blogs-section .horizontal-card:hover .blog-card-image img,
    body .vertical-card .blog-card-image:hover img,
    body article:hover img,
    body .card:hover img {
        transform: none !important;
        transition: none !important;
    }
}

/* --- FORCE MOBILE PADDING FOR FEATURED BLOGS --- */
@media (max-width: 768px) {
    .featured-blogs-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .featured-blogs-section .latest-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .featured-blogs-section .featured-grid {
        gap: 25px !important;
        width: 100% !important;
    }
}

/* --- FINAL MOBILE HOVER & PADDING OVERRIDE --- */
@media (max-width: 1100px) {

    /* FINAL NUCLEAR FIX FOR MOBILE HOVERS */
    /* Targets EVERY specific blog card variation to ensure no zoom on tap */
    html body .blogs-page .blog-card:hover .blog-card-image img,
    html body .blogs-page .blog-card:active .blog-card-image img,
    html body .featured-blogs-section .blog-card:hover img,
    html body .featured-blogs-section .horizontal-card:hover img,
    html body .blogs-grid .blog-card:hover img,
    html body .insight-box:hover img,
    html body .solution-card:hover img,
    html body .blog-card:hover .blog-card-image img,
    html body .blog-card:hover img {
        transform: none !important;
        transition: none !important;
        -webkit-transform: none !important;
    }
}

/* --- TECH STACK NAVIGATION BUTTONS --- */
.tech-nav-group {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 20;
}

.tech-nav-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    pointer-events: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    line-height: 0 !important;
    padding: 0 !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    flex-shrink: 0 !important;
}

.tech-nav-btn:hover {
    /* Hover effect removed: no visual change on hover */
}

.tech-nav-btn i {
    font-size: 14px;
    color: #fff !important;
    opacity: 1 !important;
    transition: color 0.3s;
}

.tech-nav-btn.active i {
    color: #fff !important;
}
}

/* Show icon only after active/clicked */
.tech-nav-btn:not(.active) i {
    opacity: 0 !important;
}

.tech-nav-btn.active i {
    opacity: 1 !important;
}
}

/* Mobile specific positioning */
@media (max-width: 768px) {
    .tech-nav-group {
        padding: 0 15px;
    }

    .tech-nav-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        background: #fff !important;
    }

    .desktop-only {
        display: none !important;
    }
}

/* MOBILE BLOCKS RELOCATED TO END OF FILE */


/* Privacy Policy Styling */
.privacy-policy-content-section {
    padding: 120px 0;
    background-color: #ffffff;
}

.privacy-intro p {
    font-size: 19px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 60px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.privacy-grid {
    display: grid;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto;
}

.privacy-subtitle {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

.privacy-subtitle .purple-text {
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%);
    background-clip: text;
    color: transparent !important;
}

.privacy-item p {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.8;
}

.privacy-item {
    border-left: 3px solid transparent;
    padding-left: 20px;
    transition: border-color 0.3s ease;
}

.privacy-item:hover {
    border-left-color: #D24D96;
}

@media (max-width: 768px) {
    .privacy-policy-content-section {
        padding: 80px 0;
    }

    .privacy-subtitle {
        font-size: 24px;
    }

    .privacy-intro p {
        font-size: 17px;
    }
}

/* Simplified & Left-Aligned Privacy Policy CSS */
.privacy-policy-content-section {
    padding: 80px 0;
    background-color: #ffffff;
    color: #000000 !important;
    text-align: left !important;
}

.privacy-intro p {
    font-size: 18px;
    color: #000000 !important;
    line-height: 1.8;
    margin-bottom: 50px;
    text-align: left !important;
    max-width: 100%;
    margin-left: 0;
}

.privacy-grid {
    display: grid;
    gap: 40px;
    max-width: 1100px;
    margin: 0;
    text-align: left !important;
}

.privacy-subtitle {
    font-size: 24px !important;
    font-weight: 800;
    margin-bottom: 12px;
    color: #000000 !important;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1.5px;
}

.privacy-item p {
    font-size: 16px;
    color: #000000 !important;
    line-height: 1.7;
    margin: 0;
    text-align: left !important;
}

@media (max-width: 768px) {
    .privacy-policy-content-section {
        padding: 50px 0;
    }

    .privacy-subtitle {
        font-size: 18px !important;
    }
}

/* Cookie Policy & List Styles */
.policy-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
}

.policy-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #000000;
    line-height: 1.6;
}

.policy-list li::before {
    content: '\203a';
    position: absolute;
    left: 0;
    color: #D24D96;
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    top: 0px;
}

/* ============================================================
   CAREERS PAGE � FAQ SECTION
   ============================================================ */

.careers-faq-section {
    padding: 90px 0 120px;
    background: #ffffff;
}

.careers-faq-section .faq-header {
    text-align: center;
    margin-bottom: 44px;
}

.careers-faq-section .faq-header h2 {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-h2) !important;
    font-weight: 500 !important;
    line-height: var(--lh-snug) !important;
    margin: 0 0 4px !important;
}

.careers-faq-section .faq-header h2.purple-text {
    font-weight: 600 !important;
}

.careers-faq-section .faq-header h3 {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-h3) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug) !important;
    margin: 0 0 20px !important;
    background: linear-gradient(to right, #D24D96, #8C3A86) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: block;
}

.careers-faq-section .faq-header p {
    font-size: var(--fs-body) !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* FAQ accordion container */
.faq-accordion-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Individual FAQ item � simple row with bottom border, no box */
.faq-item {
    border: none;
    border-bottom: 1px solid #e8ecf0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    padding: 0;
    box-shadow: none;
    transition: none;
}

.faq-item:first-child {
    border-top: 1px solid #e8ecf0;
}

.faq-item:hover,
.faq-item.is-open {
    border-color: #e8ecf0;
    box-shadow: none;
    background: transparent;
}

/* Question toggle row */
.faq-header-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    cursor: pointer;
    gap: 20px;
    user-select: none;
}

.faq-header-toggle span {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 200;
    color: #111111;
    line-height: 1.5;
    flex: 1;
    transition: color 0.25s ease;
}

.faq-item.is-open .faq-header-toggle span {
    color: #111111;
}

/* Toggle icon */
.faq-toggle-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #6b7280;
    transition: color 0.25s ease;
}

.faq-item.is-open .faq-toggle-icon {
    transform: none;
    color: #6b7280;
}

/* Answer panel */
.faq-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.faq-item.is-open .faq-content {
    max-height: 400px;
    opacity: 1;
}

.faq-inner-content {
    padding: 0;
}

.faq-inner-content p {
    padding-top: 12px;
    padding-bottom: 22px;
    font-size: 17px;
    color: #475569;
    line-height: 1.75;
    margin: 0;
    max-width: 88%;
}

/* Mobile */
@media (max-width: 768px) {
    .careers-faq-section {
        padding: 60px 0 80px;
    }

    .faq-accordion-container {
        padding: 0 4px;
    }

    .faq-header-toggle span {
        font-size: 16px;
    }

    .faq-inner-content p {
        font-size: 15px;
        max-width: 100%;
    }
}

/* ============================================================
   STRICT GLOBAL TYPOGRAPHY STANDARDIZATION (FINAL OVERRIDE)
   ============================================================ */
h1,
.entry-title,
.it-solutions-title,
.hero-top-text h1,
.blogs-hero h1,
.blogs-hero-content h1,
.blogs-page .blogs-hero h1,
.blogs-page .blogs-hero-content h1 {
    font-size: 56px !important;
}

.about-main-title {
    font-size: 44px !important;
}

h2,
.section-header h2,
.cs-intro-heading,
.about-goals-heading,
.why-choose-header h2,
.mission-content h2,
.values-header h2,
.team-header h2,
.industry-header .header-left h2 {
    font-size: 48px !important;
}

h3,
.stat-main h3,
.box-4 h3,
.box-5 h3,
.about-card h3,
.cs-card-title,
.glass-card h3 {
    font-size: 36px !important;
}

h4,
.solution-card h4,
.insight-box h4 {
    font-size: 24px !important;
}

/* STANDARDIZED FAQ QUESTIONS */
.faq-question h4,
.faq-list-question h4,
.faq-header-toggle span,
.faq-item .faq-header-toggle span {
    font-size: 20px !important;
}

h5,
.card-left h5 {
    font-size: 24px !important;
}

h6 {
    font-size: 24px !important;
}

p,
.privacy-item p,
.about-card p,
.industry-info p,
.glass-card p,
.faq-header p {
    font-size: 18px !important;
}

/* STANDARDIZED FAQ ANSWERS */
.faq-answer p,
.faq-list-answer p,
.faq-inner-content p,
.faq-item .faq-content p {
    font-size: 18px !important;
    font-weight: 400 !important;
}

/* Standardization for heading hierarchy: Base text 500, Purple/Highlights 700 */
h1,
h2,
.it-solutions-title,
.section-header h2 {
    font-weight: 500 !important;
}

.web-dev-intro-title {
    font-weight: 500 !important;
}

.web-dev-intro-subtitle {
    font-weight: 700 !important;
    background: linear-gradient(90deg, #e6007e, #7f0c81) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

h1 .purple-text,
h1 span.highlight,
h1 b,
h2 .purple-text,
h2 span.highlight,
h2 b,
.it-solutions-title .purple-text,
.it-solutions-title b,
.entry-title .purple-text {
    font-weight: 600 !important;
}

/* =========================================================
   STRICT MOBILE TYPOGRAPHY STANDARDIZATION (FINAL OVERRIDE)
   ========================================================= */
@media (max-width: 768px) {

    h1,
    .hero-top-text h1,
    .cs-hero-title,
    .it-solutions-title,
    .web-dev-intro-title,
    .web-dev-service-title,
    .about-main-title,
    .about-intro-heading,
    .web-dev-hero-content h1,
    .contact-hero h1,
    .insights-hero-content h1,
    .careers-hero-content h1,
    .blogs-hero h1,
    .entry-title,
    .post-title,
    .bd-hero-title,
    .blog-banner-title,
    .blogs-hero-content h1,
    .blogs-page .blogs-hero h1,
    .blogs-page .blogs-hero-content h1 {
        font-size: 36px !important;
        font-weight: 500 !important;
    }

    h2,
    .section-header h2,
    .cs-intro-heading,
    .about-goals-heading,
    .why-choose-header h2,
    .mission-content h2,
    .values-header h2,
    .team-header h2,
    .people-heading,
    .stats-heading,
    .partners-heading,
    .info-header h2,
    .contact-form-header h2,
    .business-tech-section .section-header h2,
    .latest-header h2,
    .bd-post-title,
    .solutions-header h2,
    .solutions-main-heading,
    .trusted-partner-text h2,
    .mega-menu-info h2 {
        font-size: 28px !important;
        font-weight: 500 !important;
    }

    /* Standardized FAQ Header Colors & Weights for Mobile */
    .faq-header h2,
    .faq-got-q {
        font-weight: 400 !important;
        font-size: 28px !important;
        color: #111111 !important;
    }

    h3,
    h3 .purple-text,
    h4,
    h4 .purple-text,
    h5,
    h6,
    .web-dev-intro-subtitle,
    .it-solutions-label,
    .about-label,
    .section-label,
    .category-tag,
    .cs-card-title,
    .about-card h3,
    .stat-main h3,
    .box-4 h3,
    .box-5 h3,
    .accordion-main-title,
    .solution-card h4,
    .insight-box h4,
    .box-content-overlay h4,
    .card-left h5 {
        font-weight: 600 !important;
    }

    /* FAQ Section Gradient Headings - Maximum Boldness (900 vs 500) */
    .faq-header h3,
    .faq-list-header h3,
    .faq-got-a,
    .careers-faq-section .faq-header h3,
    .faq-header .purple-text,
    .faq-list-header .purple-text,
    .section-header h2 .purple-text {
        font-weight: 400 !important;
        font-size: 28px !important;
        display: inline-block;
        -webkit-text-stroke: 1px currentColor;
        /* Physical thickening */
        filter: drop-shadow(0 0 0.5px rgba(210, 77, 150, 0.5));
        /* Adds visual density */
        letter-spacing: -0.8px;
        /* Tighter characters appear bolder */
    }

    h3,
    .cs-card-title,
    .about-card h3,
    .stat-main h3,
    .box-4 h3,
    .box-5 h3 {
        font-size: 24px !important;
    }

    .accordion-main-title,
    .accordion-main-title a {
        font-size: 26px !important;
    }

    h4,
    .solution-card h4,
    .insight-box h4,
    .box-content-overlay h4 {
        font-size: 18px !important;
    }

    .accordion-header h4 {
        font-size: 20px !important;
    }

    /* Standardized Mobile FAQ Questions */
    .faq-question h4,
    .faq-list-question h4,
    .faq-header-toggle span,
    .faq-item .faq-header-toggle span {
        font-size: 18px !important;
        font-weight: 400 !important;
    }

    h5,
    .card-left h5 {
        font-size: 16px !important;
    }

    h6 {
        font-size: 12px !important;
    }

    /* Standardized Mobile FAQ Answers & General Paragraphs */
    p,
    .faq-answer p,
    .faq-list-answer p,
    .faq-inner-content p,
    .faq-item .faq-content p {
        font-size: 16px !important;
    }
}

/* Extra-small screen adjustments */
@media (max-width: 480px) {

    h1,
    .hero-top-text h1,
    .cs-hero-title,
    .it-solutions-title,
    .web-dev-intro-title,
    .web-dev-service-title,
    .about-main-title,
    .about-intro-heading,
    .web-dev-hero-content h1,
    .contact-hero h1,
    .insights-hero-content h1,
    .careers-hero-content h1,
    .blogs-hero h1,
    .entry-title,
    .post-title,
    .bd-hero-title,
    .blog-banner-title,
    .blogs-hero-content h1,
    .blogs-page .blogs-hero h1,
    .blogs-page .blogs-hero-content h1 {
        font-size: 32px !important;
        font-weight: 500 !important;
    }

    h2,
    .section-header h2,
    .cs-intro-heading,
    .about-goals-heading,
    .why-choose-header h2,
    .mission-content h2,
    .values-header h2,
    .team-header h2,
    .people-heading,
    .stats-heading,
    .partners-heading,
    .info-header h2,
    .contact-form-header h2,
    .business-tech-section .section-header h2,
    .latest-header h2,
    .bd-post-title,
    .solutions-header h2,
    .solutions-main-heading,
    .trusted-partner-text h2,
    .mega-menu-info h2 {
        font-size: 28px !important;
        font-weight: 500 !important;
    }

    /* Maintain bold FAQ headers on extra-small mobile */
    .faq-header h2,
    .faq-header h3,
    .faq-got-q,
    .faq-got-a,
    .purple-text {
        font-size: 28px !important;
        /* Slightly smaller for 480px but still large */
    }

    /* Subtitles in extra-small mobile */
    h3,
    h4,
    h5,
    h6,
    .web-dev-intro-subtitle,
    .it-solutions-label,
    .about-label,
    .section-label,
    .category-tag {
        font-weight: 500 !important;
    }
}

/* Phone Validation Floating Tooltip */
.phone-input-wrap,
.phone-wrapper {
    position: relative;
    padding-top: 3px;
}

.phone-error-msg {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.4;
}

.phone-error-msg::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 15px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #ff4d4f;
}

.phone-input-invalid {
    border-color: #ff4d4f !important;
    background-color: #fff1f0 !important;
}

/* File Upload Active State */
.file-upload-info.is-active {
    color: #D24D96 !important;
    font-weight: 600 !important;
}

/* Careers FAQ Header Centering */
.careers-faq-section .faq-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.careers-faq-section .faq-header p {
    margin: 0 auto !important;
    max-width: 700px !important;
}

/* ============================================================
   HOME PAGE - INSIGHTS SECTION MOBILE GRID (2x2)
   ============================================================ */
@media (max-width: 768px) {
    .insights-section {
        padding: 60px 0 !important;
        height: auto !important;
    }

    .insights-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
        padding: 0 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Force hide boxes 1 and 6 */
    .insight-box.box-1,
    .insight-box.box-6 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force show and standardize boxes 2, 3, 4, 5 */
    .insight-box.box-2,
    .insight-box.box-3,
    .insight-box.box-4,
    .insight-box.box-5 {
        display: flex !important;
        /* box-2 and box-5 use flex internally usually */
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        grid-area: auto !important;
        width: 100% !important;
        min-height: 220px !important;
        height: auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 !important;
    }

    /* Specific ordering to ensure 2x2 logic */
    .insight-box.box-2 {
        order: 1 !important;
    }

    .insight-box.box-3 {
        order: 2 !important;
    }

    .insight-box.box-4 {
        order: 3 !important;
    }

    .insight-box.box-5 {
        order: 4 !important;
    }

    /* Fix for box-3 / box-4 background image scaling */
    .insight-box.box-3 .box-bg-image,
    .insight-box.box-6 .box-bg-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        z-index: 0 !important;
    }

    .insight-box.box-3 .box-content-overlay {
        position: relative !important;
        z-index: 1 !important;
        padding: 20px !important;
    }

    /* Adjust box 4 text specifically */
    .insight-box.box-4 {
        padding: 20px !important;
        background: #f8fafc !important;
        /* Fallback background */
    }

    .insight-box.box-4 h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin-top: 10px !important;
    }

    .insight-box.box-4 p {
        font-size: 11px !important;
        margin-bottom: 15px !important;
    }

    /* box-2 (Projects Done) styling fix */
    .insight-box.box-2 .stat-main h3 {
        font-size: 32px !important;
    }
}

/* ================================================================
   APPLICATION MODAL STYLES
   ================================================================ */
/* Global Scroll Lock for Modals */
.modal-open,
.modal-open body {
    overflow: hidden !important;
    height: 100% !important;
}

.app-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 18, 24, 0.85);
    /* Dark overlay */
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-modal.is-visible {
    visibility: visible;
    opacity: 1;
}

.app-modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 24px;
    padding: 50px;
    position: relative;
    overflow-y: auto;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.app-modal.is-visible .app-modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 35px;
    font-weight: 300;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.close-modal:hover {
    color: #E8409A;
}

.modal-header {
    margin-bottom: 35px;
    text-align: left;
}

.modal-header h2 {
    font-size: 36px !important;
    margin-bottom: 10px !important;
    font-weight: 400 !important;
}

.modal-header p {
    color: #64748b;
    font-size: 16px;
}

/* Form Layout */
#careerApplicationForm .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

#careerApplicationForm .form-group {
    flex: 1;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

#careerApplicationForm .form-row .form-group {
    margin-bottom: 0;
}

#careerApplicationForm label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    display: block;
}

#careerApplicationForm .required {
    color: #E8409A;
}

#careerApplicationForm input[type="text"],
#careerApplicationForm input[type="email"],
#careerApplicationForm input[type="tel"],
#careerApplicationForm textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    transition: all 0.3s;
    background: #f8fafc;
}

#careerApplicationForm input:focus,
#careerApplicationForm textarea:focus {
    outline: none;
    border-color: #E8409A;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(232, 64, 154, 0.1);
}

#careerApplicationForm input[readonly] {
    background: #edf2f7;
    cursor: not-allowed;
    color: #4a5568;
}

/* File Upload Support */
.file-upload-wrapper {
    position: relative;
    width: 100%;
    height: 100px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    transition: all 0.3s;
    cursor: pointer;
}

.file-upload-wrapper:hover {
    border-color: #E8409A;
    background: rgba(232, 64, 154, 0.05);
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-info {
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

/* Submit Button */
.app-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-submit-btn:hover {
    color: #000000 !important;
}

.app-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Status Messages */
.form-status {
    margin-top: 20px;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 14px;
    display: none;
}

.status-success {
    display: block;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-error {
    display: block;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Responsive */
@media (max-width: 768px) {
    .app-modal-content {
        padding: 30px 20px;
        width: 95%;
    }

    .modal-header h2 {
        font-size: 28px !important;
    }

    #careerApplicationForm .form-row {
        flex-direction: column;
        gap: 0;
    }

    #careerApplicationForm .form-row .form-group {
        margin-bottom: 20px;
    }
}

/* =========================================================
   VIDEO MODAL (GLOBAL)
   ========================================================= */
.pr-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.pr-video-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.pr-video-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pr-video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1100px;
    z-index: 1;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pr-video-modal.is-active .pr-video-modal-content {
    transform: scale(1);
}

.pr-video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.pr-video-modal-close:hover {
    transform: rotate(90deg) scale(1.2);
    color: #ec4899;
}

.pr-video-aspect-ratio {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.pr-video-aspect-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .pr-video-modal-close {
        top: -40px;
        font-size: 32px;
    }
}

/* Testimonial Video Thumbnails */
.testimonial-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Let clicks pass through to the overlay/card */
}

.testimonial-card-image {
    position: relative;
    overflow: hidden;
    background: #000;
    /* Dark background while video loads */
}

/* Video Modal Dotted Navigation */
.pr-video-modal-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    position: absolute;
    bottom: -45px;
    left: 0;
    width: 100%;
}

.pr-modal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.pr-modal-dot.active {
    background: #D24D96;
    width: 32px;
    border-radius: 10px;
}


/* FINAL CONSOLIDATED TESTIMONIAL DOTS */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 50px !important;
    position: relative;
    z-index: 10;
    visibility: visible !important;
    opacity: 1 !important;
}

.testimonial-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #64748b !important;
    /* Visible Medium Gray */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    padding: 0 !important;
    opacity: 0.6 !important;
    display: block !important;
}

.testimonial-dot.active {
    background: #D24D96 !important;
    /* Brand Pink */
    width: 32px !important;
    border-radius: 10px !important;
    opacity: 1 !important;
}



.testimonials-section {

    position: relative !important;

    padding: 100px 0 !important;

    overflow: visible !important;

    background: #ffffff !important;

    display: none !important;

    min-height: 800px;


}




/* CONSOLIDATED TECH VISUALS FOR SERVICE PAGES */
.business-tech-content {
    display: flex !important;
    align-items: center !important;
    gap: 80px !important;
    margin-bottom: 60px !important;
    width: 100% !important;
}

.business-tech-content.reverse-row {
    flex-direction: row-reverse !important;
}

.tech-image-col,
.tech-visual-col {
    flex: 1 !important;
    height: 550px !important;
    align-self: center !important;
    overflow: hidden !important;
}

.tech-accordion-col,
.tech-content-col {
    flex: 1.2 !important;
}

.tech-visual {
    width: 100% !important;
    height: 550px !important;
    object-fit: cover !important;
    /* Uniform height & fill */
    background: #000 !important;
    /* Solid backdrop for a premium look */
    border-radius: 0 !important;
    display: block !important;
    box-shadow: none !important;
    margin: 0 auto !important;
}

@media (max-width: 1024px) {
    .business-tech-content {
        gap: 40px !important;
    }
}

@media (max-width: 768px) {

    .business-tech-content,
    .business-tech-content.reverse-row {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .tech-image-col {
        height: 400px !important;
    }

    .tech-visual {
        height: 400px !important;
    }
}


/* DESKTOP ONLY OVERRIDES */
@media (min-width: 1025px) {
    .vision-card .goal-card-content {
        padding-top: 50px !important;
    }
}

/* ============================================================
   TABLET & iPAD RESPONSIVE OVERRIDES
   Target: 769px – 1024px (iPad Mini, iPad, iPad Pro 11")
   ============================================================ */

/* ── 1. HEADER: Show hamburger on tablets (JS already treats ≤1024 as mobile) ── */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Fixed dark header on tablets */
    #custom-header.site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(1, 18, 24, 0.97) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 0 !important;
        z-index: 12000 !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
    }

    #custom-header.is-sticky {
        background: #011218 !important;
    }

    body.mobile-menu-open #custom-header.site-header,
    body.mega-menu-open #custom-header.site-header {
        background: #011218 !important;
    }

    /* Header bar: logo | cta | hamburger */
    .custom-header-section {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 0 !important;
        min-height: 68px !important;
    }

    .site-logo {
        order: 1;
        flex-shrink: 0;
    }

    .site-logo img {
        max-width: 130px !important;
        margin-top: 0 !important;
    }

    /* Show hamburger, hide desktop nav */
    .mobile-menu-toggle {
        display: flex !important;
        order: 3;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        border: none;
        background: transparent !important;
        cursor: pointer;
        padding: 0;
        z-index: 12002;
        color: #ffffff;
    }

    .mobile-menu-toggle .toggle-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    #custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    #custom-header.header-nav-open .mobile-menu-toggle .toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header-cta {
        order: 2;
        margin-left: auto;
        margin-right: 16px;
    }

    .lets-talk-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* Slide-in drawer nav (same as mobile) */
    .header-nav-wrap {
        display: block !important;
        position: fixed !important;
        top: 68px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 68px) !important;
        background: #011218 !important;
        overflow-y: auto !important;
        z-index: 11500 !important;
        padding: 0 !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s !important;
    }

    #custom-header.header-nav-open .header-nav-wrap {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .main-navigation {
        padding: 0 30px;
    }

    .main-navigation ul {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 20px 0 !important;
        margin: 0 !important;
    }

    .main-navigation ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    }

    .main-navigation ul li a,
    #services-menu-toggle {
        display: block !important;
        padding: 16px 0 !important;
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Body scroll lock when tablet menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }

    /* Offset page content for fixed header */
    body:not(.mobile-menu-open) .site-main,
    body:not(.mobile-menu-open) main {
        padding-top: 68px;
    }
}


/* ── 2. HERO SECTION ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .homepage-hero {
        padding: 110px 0 70px !important;
        min-height: auto !important;
    }

    .hero-content {
        gap: 50px !important;
    }

    .hero-top-text h1 {
        font-size: clamp(44px, 6vw, 58px) !important;
        letter-spacing: -1.5px !important;
        line-height: 1.1 !important;
    }

    .hero-top-text .hero-description {
        font-size: 15px !important;
        max-width: 620px;
        margin: 0 auto;
    }

    .hero-bottom-area {
        grid-template-columns: 1fr 1.4fr !important;
        gap: 30px !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .trusted-partner-text {
        max-width: 100% !important;
    }

    .trusted-partner-text h2 {
        font-size: 26px !important;
    }

    .it-services-card {
        padding: 20px 20px 20px 32px !important;
        border-radius: 28px !important;
    }

    .card-left h5 {
        font-size: 20px !important;
    }
}


/* ── 3. SOLUTIONS GRID ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .solutions-section {
        padding: 60px 0 !important;
        overflow: visible !important;
    }

    /* Override the min-width:1025px flex layout AND the max-width:1100px flex-child rules */
    .solutions-grid {
        display: grid !important;
        flex-wrap: unset !important;
        flex-direction: unset !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        overflow-x: unset !important;
    }

    /* Reset ALL grid-column spans and flex sizing on cards */
    .solutions-grid .solution-card,
    .solutions-grid .solution-card:nth-child(1),
    .solutions-grid .solution-card:nth-child(2),
    .solutions-grid .solution-card:nth-child(3),
    .solutions-grid .solution-card:nth-child(4),
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: span 1 !important;
        flex: unset !important;
        flex-basis: unset !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 280px !important;
        scroll-snap-align: unset !important;
    }

    /* Center the lone 5th card */
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        max-width: 48% !important;
        margin: 0 auto !important;
    }

    .solution-card {
        padding: 36px 24px 30px !important;
    }

    .section-spacer {
        height: 0 !important;
        display: none !important;
    }

    .solutions-header h2 {
        font-size: 36px !important;
    }
}


/* ── 4. ABOUT / STATS SECTION ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .about-section {
        padding: 80px 0 !important;
    }

    .about-grid {
        flex-direction: column !important;
        gap: 50px !important;
    }

    .about-left,
    .about-right {
        flex: unset !important;
        width: 100% !important;
    }

    .about-main-title {
        font-size: 44px !important;
        letter-spacing: -1px !important;
        margin-bottom: 36px !important;
    }

    .stats-row {
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .stat-card {
        flex: 1 1 calc(33% - 12px) !important;
        min-width: 120px !important;
        padding: 28px 16px !important;
    }

    .stat-number {
        font-size: 42px !important;
    }
}


/* ── 5. PARTNERS CONTAINER ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .partners-container {
        padding: 0 30px !important;
    }
}


/* ── 6. INSIGHTS (BENTO GRID) ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .insights-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 20px !important;
    }

    .insight-box {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}


/* ── 7. WHY CHOOSE / GLASS CARDS ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .why-choose-grid {
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: center !important;
    }

    .glass-card {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        aspect-ratio: unset !important;
        min-height: 200px !important;
        padding: 30px 20px !important;
    }

    .glass-card h3 {
        font-size: 38px !important;
    }
}


/* ── 8. TESTIMONIALS CAROUSEL ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .testimonials-section {
        padding: 80px 0 60px !important;
    }

    .testimonial-card.active {
        flex: 0 0 400px !important;
    }

    .testimonial-card {
        flex: 0 0 130px !important;
        height: 380px !important;
    }
}


/* ── 9. MISSION / VALUES GRIDS (About page) ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .mission-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .mission-content h2 {
        font-size: 40px !important;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .value-card {
        padding: 36px 24px !important;
    }
}


/* ── 10. WEB DEV / SERVICE PAGE ROWS ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .web-dev-row {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .web-dev-row:nth-child(even) .web-dev-image {
        order: -1 !important;
    }
}


/* ── 11. FOOTER ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px !important;
        margin-bottom: 50px !important;
    }

    .footer-column.no-title {
        padding-top: 60 !important;
    }

    .footer-cta-title {
        font-size: 40px !important;
    }
}


/* ── 12. BUSINESS TECH CONTENT ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .business-tech-content,
    .business-tech-content.reverse-row {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .tech-image-col,
    .tech-visual-col,
    .tech-accordion-col,
    .tech-content-col {
        flex: unset !important;
        width: 100% !important;
    }

    .tech-visual {
        height: 420px !important;
    }
}


/* ── 13. GENERAL TYPOGRAPHY SCALE ── */
@media (min-width: 769px) and (max-width: 1024px) {

    h1 {
        font-size: clamp(36px, 5.5vw, 52px) !important;
    }

    h2 {
        font-size: clamp(28px, 4vw, 40px) !important;
    }

    h3 {
        font-size: clamp(22px, 3vw, 30px) !important;
    }

    .section-header h2,
    .section-title {
        font-size: clamp(28px, 4vw, 40px) !important;
    }
}


/* ── 14. SECTION PADDING NORMALISATION ── */
@media (min-width: 769px) and (max-width: 1024px) {

    section {
        overflow-x: hidden;
    }

    .ast-container,
    .partners-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Prevent any overflow issues */
    img,
    video {
        max-width: 100% !important;
    }
}


/* ── 15. HERO OFFSET FOR FIXED TABLET HEADER ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .homepage-hero {
        padding-top: 110px !important;
    }
}

/* END TABLET OVERRIDES */


/* ============================================================
   NUCLEAR TABLET SOLUTIONS GRID FIX — 2×2+1 layout
   Max specificity + last-in-file to win ALL cascade conflicts
   ============================================================ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* Force grid display — override every flex rule above */
    html body .solutions-section {
        overflow: visible !important;
    }

    html body .solutions-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 20px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex-wrap: unset !important;
        flex-direction: unset !important;
        scroll-snap-type: unset !important;
        -webkit-overflow-scrolling: unset !important;
    }

    /* Row 1: cards 1 & 2 — each takes 1 column */
    html body .solutions-grid .solution-card:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        flex: unset !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        scroll-snap-align: unset !important;
    }

    html body .solutions-grid .solution-card:nth-child(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        flex: unset !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        scroll-snap-align: unset !important;
    }

    /* Row 2: cards 3 & 4 — each takes 1 column */
    html body .solutions-grid .solution-card:nth-child(3) {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        flex: unset !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        scroll-snap-align: unset !important;
    }

    html body .solutions-grid .solution-card:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        flex: unset !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        scroll-snap-align: unset !important;
    }

    /* Row 3: card 5 — centered, spanning both columns */
    html body .solutions-grid .solution-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        flex: unset !important;
        width: 50% !important;
        min-width: 280px !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        scroll-snap-align: unset !important;
    }

    /* Card styling */
    html body .solutions-grid .solution-card {
        padding: 36px 24px 30px !important;
        min-height: 300px !important;
    }

    /* Hide section spacer — no overlap effect on tablet */
    html body .section-spacer {
        display: none !important;
        height: 0 !important;
    }
}

/* END NUCLEAR TABLET SOLUTIONS GRID FIX */


/* ============================================================
   INSIGHTS GRID — TABLET BENTO REDESIGN (769px – 1024px)
   New layout: featured hero card + asymmetric 2-col bento
   ============================================================ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    .insights-section {
        padding: 60px 0 80px !important;
    }

    /* ── Grid: 1-column vertical stack ── */
    html body .insights-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 24px !important;
        width: 100% !important;
        margin-top: 40px !important;
    }

    /* Hide decorative boxes for cleaner tablet view */
    html body .insights-grid .box-1,
    html body .insights-grid .box-6 {
        display: none !important;
    }

    /* Standardize all boxes for full-width stack */
    html body .insights-grid .insight-box {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: unset !important;
        height: auto !important;
        border-radius: 24px !important;
    }

    /* Box 3: Hero style box */
    html body .insights-grid .box-3 {
        min-height: 320px !important;
    }

    html body .insights-grid .box-3 .box-content-overlay {
        padding: 40px !important;
        background: linear-gradient(90deg, rgba(140, 58, 134, 0.95) 0%, rgba(140, 58, 134, 0.4) 70%, rgba(0, 0, 0, 0) 100%) !important;
    }

    html body .insights-grid .box-3 .box-content-overlay h4 {
        font-size: 28px !important;
        max-width: 70% !important;
        margin: 15px 0 25px !important;
    }

    /* Box 4: Content box */
    html body .insights-grid .box-4 {
        padding: 40px !important;
        background: #f8fafc !important;
    }

    html body .insights-grid .box-4 h3 {
        font-size: 30px !important;
        margin-bottom: 16px !important;
    }

    html body .insights-grid .box-4 p {
        font-size: 16px !important;
        margin-bottom: 24px !important;
    }

    /* Box 2: Stat box */
    html body .insights-grid .box-2 {
        padding: 40px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 30px !important;
        background: #e6e8eb !important;
    }

    html body .insights-grid .box-2 .stat-main {
        flex-shrink: 0 !important;
    }

    html body .insights-grid .box-2 .stat-main h3 {
        font-size: 54px !important;
        margin: 0 !important;
    }

    html body .insights-grid .box-2 .stat-footer {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        text-align: right !important;
    }

    html body .insights-grid .box-2 .stat-footer p {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        color: #475569 !important;
    }

    /* Box 5: Strip style box */
    html body .insights-grid .box-5 {
        padding: 40px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 30px !important;
        background: linear-gradient(135deg, #D24D96, #8C3A86) !important;
    }

    html body .insights-grid .box-5 h3 {
        font-size: 32px !important;
        margin: 0 !important;
        color: #fff !important;
    }

    html body .insights-grid .box-5 .white-badge {
        display: none !important;
    }

    html body .insights-grid .box-5 .white-pill-btn {
        padding: 14px 30px !important;
    }
}

/* END INSIGHTS TABLET BENTO REDESIGN */


/* ============================================================
   MOBILE + TABLET MENU GAP FIX
   Root cause: .mega-menu-subitems (flex:1) renders as an empty
   column alongside .mega-menu-categories on 769-1024px because
   the display:none rule only existed inside <=768px.
   Also: .mega-menu-inner stays as flex-row on tablet, creating
   a wide empty right column.
   ============================================================ */
@media (max-width: 1024px) {

    /* Force inner to single column — no side-by-side columns */
    .mega-menu-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 20px 10px !important;
        height: auto !important;
        overflow: hidden !important;
    }

    /* Hide the subitems column entirely — it's not used on mobile/tablet */
    .mega-menu-subitems {
        display: none !important;
        flex: unset !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Categories take full width */
    .mega-menu-categories {
        width: 100% !important;
        flex: none !important;
    }

    /* Hide the close X button (mobile uses hamburger toggle) */
    .mega-menu-close {
        display: none !important;
    }

    /* Remove any residual padding/margin on the container */
    .mega-menu-container {
        padding: 0 !important;
        /* Note: Allow JS to control display/height for Services accordion */
    }
}

/* END MENU GAP FIX */


/* ============================================================
   MOBILE + TABLET MENU: KILL THE HEIGHT GAP
   Root cause: .mega-menu-inner has height:calc(100vh - ...) 
   from desktop styles. This stretches the accordion to full 
   viewport height even on mobile/tablet.
   ============================================================ */
@media (max-width: 1024px) {

    /* Reset the 100vh height — let content define the height */
    html body .mega-menu-inner {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Container: shrink to content, no excess space ONLY WHEN CLOSED */
    html body .mega-menu-container:not(.mobile-services-open) {
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    /* Ensure container flows correctly when open on tablet */
    html body .mega-menu-container.mobile-services-open {
        max-height: 2000px !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Hide everything that adds phantom height */
    html body .mega-menu-container .dropdown-video-bg {
        display: none !important;
    }

    html body .mega-menu-subitems:not(.active) {
        display: none !important;
        height: 0 !important;
        flex: none !important;
    }

    html body .mega-menu-footer,
    html body .mega-menu-divider {
        display: none !important;
        height: 0 !important;
    }

    html body .mega-menu-info {
        display: none !important;
        height: 0 !important;
    }

    /* Categories list: full width, tight */
    html body .mega-menu-categories {
        width: 100% !important;
        flex: none !important;
        padding: 4px 0 2px !important;
        gap: 1px !important;
    }

    /* Hide desktop toggle to avoid double icon on tablet */
    html body #main-menu-toggle {
        display: none !important;
    }
}

/* END MENU HEIGHT GAP NUCLEAR FIX */

/* [Scene alignment removed - handled by standard responsive blocks to ensure centering] */

/* ============================================================
   LAUNCH FIX: ALIGN ALL "EXPLORE" BUTTONS & REDUCE GAPS
   ============================================================ */
html body .solutions-grid .solution-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

html body .solutions-grid .solution-card p {
    flex: 1 !important;
    width: 100% !important;
}

html body .solutions-grid .solution-card .card-explore {
    margin-top: auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* Footer & Newsletter Spacing Polish */
.footer-section {
    padding-top: 60px !important;
}

.footer-cta-section {
    padding: 60px 0 !important;
}

.footer-main {
    padding-bottom: 40px !important;
}

.footer-newsletter-title {
    margin-bottom: 20px !important;
}

/* Global Section Gap Reducer */
body.page-template-digitalsolutions .section-spacer {
    height: 60px !important;
}

body.page-template-it-solutions .section-spacer {
    height: 60px !important;
}

/* =================================================
   LAUNCH FIX: SITE-WIDE VERTICAL RYHTHM & GAP REDUCTION
   Standardizing gaps from 100px-150px down to 60px-80px.
   ============================================================ */

/* 1. Global Section Padding Normalizer */
.about-section,
.blogs-section,
.insights-section,
.testimonials-section,
.clients-section,
.partners-section,
.solutions-section,
.business-tech-section,
.careers-roles-section,
.careers-faq-section,
.contact-form-section,
.faq-section {
    padding: 40px 0 !important;
}

/* 2. Standardize Section Spacers (Manual Gaps) */
.section-spacer {
    height: 60px !important;
}

/* 3. Hero Header Calibration (More compact) */
.it-solutions-hero,
.digital-hero,
.careers-hero,
.contact-hero,
.about-hero,
.blogs-hero {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
}

/* 4. Secondary Header / Intro Sections */
.intro-section,
.solutions-header,
.web-dev-intro-section,
.digital-intro-section {
    padding-top: 10px !important;
    padding-bottom: 40px !important;
}

/* 5. Footer Density Fine-tuning */
.footer-cta-section {
    padding: 60px 0 !important;
}

.footer-section {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

.footer-main {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
}

/* 6. Gap Adjustments for Specific Components */
.solutions-grid,
.insights-grid,
.articles-grid {
    margin-top: 30px !important;
}

.partners-logos {
    margin-top: 40px !important;
}

/* 7. Mobile Heading Accent Boost (Purple weight) */
@media (max-width: 768px) {

    h1 .purple-text,
    h2 .purple-text,
    h3 .purple-text,
    .solutions-main-heading .purple-text,
    .solutions-gradient-line,
    .about-main-title .purple-text,
    .section-header h2 .purple-text,
    .it-solutions-title .purple-text,
    .careers-faq-section .faq-header h2 .purple-text {
        font-weight: 600 !important;
    }
}

/* ================================================================
   CAREERS: View Details button (replaces Submit Application)
   ================================================================ */
.view-details-btn {
    display: inline-block;
    padding: 10px 22px;
    background: linear-gradient(135deg, #D24D96 0%, #8C3A86 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none !important;
    transition: opacity 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
}

.view-details-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ================================================================
   CAREER DETAIL PAGE  (.cd-*)
   Mirrors blog-detail structure — hero → intro → article → modal
   ================================================================ */

/* Reset page padding (same as blog/careers) */
.page-template-career-detail #content.site-content,
.page-template-career-detail #primary.content-area,
.page-template-career-detail .site-main {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Hero ── */
.cd-page {
    background: #fff;
}

.cd-hero {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
}

.cd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.cd-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 80px 24px 0;
    text-align: center;
    color: #fff;
}

.cd-hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
}

.cd-hero-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 18px;
}

.cd-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.cd-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.cd-breadcrumb a:hover {
    color: #fff;
}

.cd-bc-sep {
    opacity: 0.5;
}

.cd-bc-current {
    color: #fff;
    font-weight: 500;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Intro ── */
.cd-intro-section {
    background: #fff;
    padding: 56px 24px 36px;
}

.cd-intro-inner {
    max-width: 800px;
    margin: 0 auto;
}

.cd-cat-badge {
    display: inline-block;
    background: linear-gradient(135deg, #D24D96, #8C3A86);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.cd-job-title {
    font-size: 34px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin: 0 0 20px;
}

.cd-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.cd-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f4f8;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
}

.cd-meta-chip i {
    color: #D24D96;
}

/* Apply button with enhanced visibility and higher specificity */
.cd-page .cd-apply-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 34px !important;
    background: #E8409A !important;
    /* Fallback */
    background: -webkit-linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    background: linear-gradient(135deg, #E8409A 0%, #5E1A6B 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(232, 64, 154, 0.2) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 10 !important;
}

.cd-page .cd-apply-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(232, 64, 154, 0.3) !important;
}

.cd-page .cd-apply-btn .btn-arrow {
    font-size: 20px !important;
    line-height: 1 !important;
    margin-left: 2px !important;
}

/* ── Article Content ── */
.cd-content-section {
    padding: 20px 24px 80px;
    background: #fff;
}

.cd-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.cd-article {
    font-size: 16px;
    color: #334155;
    line-height: 1.8;
}

.cd-section-heading {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 40px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0e8f6;
}

.cd-list {
    margin: 0 0 20px 20px;
    padding: 0;
    list-style: disc;
}

.cd-list li {
    margin-bottom: 8px;
    color: #334155;
    line-height: 1.7;
}

/* Bottom CTA block */
.cd-bottom-cta {
    margin-top: 50px;
    padding: 36px;
    background: linear-gradient(135deg, rgba(210, 77, 150, 0.06) 0%, rgba(140, 58, 134, 0.06) 100%);
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(210, 77, 150, 0.15);
}

.cd-bottom-cta p {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .cd-hero-title {
        font-size: 28px;
    }

    .cd-job-title {
        font-size: 24px;
    }

    .cd-section-heading {
        font-size: 19px;
    }

    .cd-intro-section {
        padding: 40px 16px 28px;
    }

    .cd-content-section {
        padding: 10px 16px 60px;
    }

    .cd-bottom-cta {
        padding: 24px 16px;
    }
}