/*pricing tab css*/
/* ======================================= */
        /* PRICING SECTION STYLES                  */
        /* ======================================= */
  /* ======================================= */
        /* PRICING SECTION STYLES                  */
        /* ======================================= */

        .pricing-section {
            padding: 100px 0;
            text-align: center;
        }

        .section-header h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            /* Gradient effect on the title text */
            background: linear-gradient(90deg, #FFFFFF 0%, var(--text-color-faded) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* --- Tabs Navigation --- */
        .tabs-nav {
            display: flex;
            justify-content: center;
            margin-bottom: 60px;
            gap: 10px;
        }

        .tab-btn {
            background-color: var(--secondary-color);
            color: var(--text-color-faded);
            padding: 8px 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .tab-btn.active {
            background-color: var(--primary-color);
            color: var(--text-color-light);
            /* Soft neon glow for active tab */
            box-shadow: 0 0 15px rgba(176, 35, 240, 0.5);
            border-color: var(--primary-color);
        }

        /* --- Tab Content / Pricing Grid --- */

        .pricing-content {
            /* Hide inactive tabs */
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .pricing-content.active {
            display: block;
            opacity: 1;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* Three columns for the main cards */
            gap: 30px;
            text-align: left;
        }

        .strategy-card {
            background: linear-gradient(145deg, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0.7));
            padding: 40px;
            border-radius: 20px;
            /* Darker background with purple gradient fade effect */
            background: linear-gradient(145deg, #1A1A1A, #1A1A1A 60%, rgba(176, 35, 240, 0.1) 100%);
            grid-column: span 1; /* Occupies one column */
        }
        
        .strategy-card h2 {
            font-size: 2.5rem;
            margin: 0;
            /* White/faded gradient text */
            background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .strategy-card p {
            font-size: 1.1rem;
            color: var(--text-color-faded);
            margin: 20px 0 40px 0;
        }

        .strategy-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--primary-color);
            font-weight: 600;
            transition: color 0.3s;
        }
        .strategy-link:hover {
            color: #d15fff;
        }

        /* --- Pricing Card Styles (Template for data insertion) --- */

        .pricing-card {
            background-color: var(--secondary-color);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 30px rgba(176, 35, 240, 0.15);
            position: relative;
        }

        .bundle-tag {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #28a745; /* Green for "BUNDLE & SAVE" */
            color: var(--text-color-light);
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .best-value-tag {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--primary-color); 
            color: var(--text-color-light);
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            box-shadow: 0 0 15px rgba(176, 35, 240, 0.5);
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 5px;
            line-height: 1.2;
            color: var(--text-color-light);
        }

        .card-description {
            font-size: 0.9rem;
            color: var(--text-color-faded);
            margin-bottom: 25px;
            min-height: 36px; /* Ensure consistent height for non-bundle cards */
        }
        .card-description.fit-content {
            min-height: auto;
        }

        .price-display {
            display: flex;
            align-items: baseline;
            margin-bottom: 30px;
            gap: 5px;
        }

        .price-amount {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary-color);
            line-height: 1;
        }

        .price-term {
            font-size: 1rem;
            color: var(--text-color-faded);
            font-weight: 500;
            line-height: 1;
        }
        
        .card-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: #111111;
            color: var(--text-color-light);
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 50px;
            font-weight: 600;
            border: 1px solid var(--primary-color);
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 25px;
        }
        .card-btn:hover {
            background-color: var(--primary-color);
            color: var(--background-color);
        }

        .card-btn .arrow-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: var(--background-color);
            font-size: 1rem;
            transition: all 0.3s;
        }
        .card-btn:hover .arrow-icon {
            background-color: var(--text-color-light);
            color: var(--primary-color);
        }

        .features-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .features-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
            font-size: 0.95rem;
            color: var(--text-color-faded);
        }
        /* Custom checkmark icon (using Font Awesome) */
        .features-list li::before {
            content: '\f058'; /* Solid Check Circle Icon from Font Awesome */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: var(--primary-color);
            flex-shrink: 0;
            margin-top: 2px;
        }
        
        /* --- Specialized Connect Section Styles --- */
        .connect-special-plans {
            margin-top: 60px;
            text-align: left;
        }
        .connect-special-plans h3 {
            font-size: 1.8rem;
            color: var(--text-color-light);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-color);
            display: inline-block;
            padding-bottom: 5px;
        }

        .industry-plans-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
            padding: 0;
            list-style: none;
        }

        .industry-plans-list li {
            background-color: #151515;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid var(--primary-color);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .industry-plans-list li strong {
            display: block;
            font-size: 1.1rem;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        .industry-plans-list li span {
            font-size: 0.9rem;
            color: var(--text-color-faded);
        }


/*pricing tab css*/



/*Important!important*/
section.trust-bar-section-outer {
    display: none;
}

/*Important!important*/


/* ======================================= */
/* LUNEXA HEADER/MENU STYLES               */
/* ======================================= */
.lunexa-nav-link.active,
.lunexa-nav-link:hover {
    /* Retain color change */
    color: var(--primary-color);
    
    /* NEW: Add subtle underline effect */
    position: relative;
}

.lunexa-nav-link.active::after,
.lunexa-nav-link:hover::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px; /* Adjust this value to control distance from text */
    width: 60%; /* The line is shorter than the text */
    height: 2px;
    background-color: var(--primary-color);
    border-radius: 1px;
}

.lunexa-site-header {
    background-color: var(--background-color);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separator */
}

.lunexa-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* --- Logo/Brand --- */
.lunexa-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lunexa-brand-logo img {
    height: 35px;
    /* filter: invert(100%); */
}
.lunexa-brand-logo span {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color-light);
}

/* --- Navigation Links --- */
.lunexa-main-nav {
    flex-grow: 1;
}
.lunexa-nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
        justify-content: center;
}
.lunexa-nav-link,
.lunexa-dropdown-toggle {
    color: var(--text-color-faded);
    text-decoration: none;
    font-weight: 500;
    padding: 10px 5px;
    display: block;
    transition: color 0.3s;
}
.lunexa-nav-link:hover,
.lunexa-dropdown-toggle:hover,
.lunexa-nav-link.active {
    color: var(--primary-color);
}


/* --- Dropdown Menu (Desktop) --- */
.lunexa-nav-dropdown {
    position: relative;
}
.lunexa-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--secondary-color);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 10px 0;
    list-style: none;
    margin: 0;
    z-index: 50;
}
.lunexa-nav-dropdown:hover .lunexa-dropdown-menu {
    display: block; /* Show on hover */
}
.lunexa-dropdown-menu li a {
    color: var(--text-color-faded);
    text-decoration: none;
    padding: 8px 15px;
    display: block;
    font-size: 0.95rem;
}
.lunexa-dropdown-menu li a:hover {
    background-color: rgba(200, 42, 239, 0.1);
    color: var(--primary-color);
}


/* --- CTA (Phone Number) --- */
.lunexa-header-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    text-decoration: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    transition: opacity 0.3s;
    white-space: nowrap;
}
.lunexa-header-cta:hover {
    opacity: 0.9;
}
/* ======================================= */
/* MOBILE MENU OVERRIDES                   */
/* ======================================= */

.lunexa-mobile-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
    width: 30px;
    height: 30px;
    position: relative;
}

.lunexa-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color-light);
    border-radius: 5px;
    margin: 5px 0;
    transition: transform 0.3s, opacity 0.3s;
}

/* Open/Close Animation */
.lunexa-header-wrap.menu-open .lunexa-line:nth-child(2) { opacity: 0; }
.lunexa-header-wrap.menu-open .lunexa-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.lunexa-header-wrap.menu-open .lunexa-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ======================================= */
/* COLOR VARIABLES & INITIAL SETUP         */
/* ======================================= */

:root {
    /* Based on Dark Theme */
    --primary-color: #C82AEF;   /* Dark Pink/Purple Accent (CTA/Highlight) */
    --background-color: #000000; /* Main page background (Black) */
    --secondary-color: #1A1A1A; /* Dark secondary color for backgrounds/borders */
    --text-color-light: #F0F0F0; /* Light text for dark background */
    --text-color-faded: #B0B0B0; /* Faded grey for less important text */
}

/* Basic Reset for cross-browser consistency */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Apply Font and Main Background/Text Colors */
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-color-light); /* Light text on dark background */
    background-color: var(--background-color);
    line-height: 1.6; /* Good reading line spacing */
    /* Remove default browser margins */
    margin: 0; 
    padding: 0 30px;
    /* Set box-sizing globally for easier layout control */
    box-sizing: border-box;
}

/* ======================================= */
/* GLOBAL TYPOGRAPHY & GRADIENT HEADINGS   */
/* ======================================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color-light); 
    font-weight: 800;
    margin-bottom: 0.5em; 
}
/* Specific H1 style for the gradient effect in the Hero */
.hero-title {
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* ======================================= */
/* GLOBAL BUTTON STYLES                    */
/* ======================================= */

.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

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


/* ======================================= */
/* 1. HEADER & NAVIGATION STYLES           */
/* ======================================= */

.main-header {
    background-color: var(--background-color);
    padding: 20px 0;
    border-bottom: 1px solid var(--secondary-color); /* Subtle dark border */
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between; /* Space out logo, nav, and button */
    align-items: center;
}

/* Logo Styling */
.logo-link {
    text-decoration: none;
    color: var(--text-color-light);
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.logo-placeholder {
    width: 130px; /* Adjust size */
    height: 30px;
    background-color: #333; /* Placeholder visual */
    border-radius: 5px;
    margin-right: 10px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation Links */
.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav ul li a {
    text-decoration: none;
    color: var(--text-color-faded); /* Faded grey for inactive links */
    font-weight: 500;
    margin: 0 15px;
    padding-bottom: 5px;
    transition: color 0.3s, border-bottom 0.3s;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: var(--text-color-light); /* White/light grey on hover/active */
    border-bottom: 2px solid var(--primary-color); /* Highlight for active link */
}

/* Phone CTA Button */
.btn-phone {
    /* Uses the Primary Color variable for background */
    background-color: var(--primary-color); 
    color: var(--background-color);
    padding: 10px 20px;
    border-radius: 50px; /* Pill shape */
    font-size: 0.9rem;
}
.btn-phone:hover {
    /* Slightly darker color for hover effect */
    background-color: color-mix(in srgb, var(--primary-color) 90%, black);
}
/* --- UPDATED HEADER & NAVIGATION STYLES --- */

.main-header {
    background-color: var(--background-color);
    padding: 20px 0;
    border-bottom: 1px solid var(--secondary-color);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styling */
.logo-link {
    /* Logo Placeholder uses a regular image tag now */
    text-decoration: none;
    display: flex;
    align-items: center;
}

.site-logo {
    /* Set max height/width for your actual logo icon */
    height: 30px; 
    max-width: 150px;
    /* You may need more specific styling here once you place your image */
}

/* Navigation Links (No change from before) */
.main-nav ul {
    list-style: none;
    display: flex;
}
/* ... (rest of .main-nav ul li a styles) ... */


/* Header Actions (Contains Phone CTA and Mobile Toggle) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Mobile Menu Toggle (Hamburger Icon) */
.mobile-menu-toggle {
    display: none; /* Hide by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color-light); /* Light color for the bars */
    margin: 4px 0;
    transition: 0.4s;
    border-radius: 2px;
}


/* ======================================= */
/* 2. HERO SECTION STYLES (Dark Theme)     */
/* ======================================= */

.hero-section {
   position: relative;
    padding: 100px 5%; 
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden; 
    min-height: 85vh; 
    
    /* --- NEW BACKGROUND IMAGE STYLES --- */
    background-image: url('./Background.png');
    background-size: cover; /* Cover the entire element */
    background-position: center bottom; /* Position the image */
    background-repeat: no-repeat; /* Don't repeat the image */
    
    /* Optional: Add a subtle overlay for better text readability on top of image */
    /* This creates a dark layer on top of the image */
    background-blend-mode: multiply; 
    background-color: rgba(0, 0, 0, 0.6);
    
}

/* Background Pattern/Image Placeholder (Based on the purple swirls) */
.dark-bg-pattern {
    /* Placeholder for the dynamic background */
    /* background: radial-gradient(circle at center, #110022 0%, #000000 70%);  */
    
}

.hero-content-wrapper {
    position: relative;
    z-index: 10;
}

/* Hero Text Styling */
.hero-title {
    font-size: 4.5rem; /* Huge heading size */
    max-width: 75%; /* Keep the title contained */
    margin-bottom: 40px;
    line-height: 1.1;
}

.hero-sub-section {
    display: flex;
    justify-content: flex-end; /* Push the description to the right */
    margin-bottom: 50px;
}

.hero-description {
    font-size: 1rem; 
    max-width: 50%; /* Description takes up half the width on desktop */
    color: var(--text-color-faded);
    line-height: 1.8;
}

/* CTA ROW STYLES */
.hero-cta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align groups to the bottom */
}

/* Left: Video CTA Group */
.video-cta-group {
    display: flex;
    align-items: center;
    max-width: 300px;
}

.btn-video-play {
    background-color: var(--background-color); 
    color: var(--text-color-light); 
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 15px;
    border: 2px solid var(--text-color-faded);
}
.btn-video-play:hover {
    border-color: var(--primary-color);
}

.video-text {
    font-size: 0.85rem;
    color: var(--text-color-faded);
}


/* Right: CTA Button and Reviews Group */
.cta-review-group {
    display: flex;
    align-items: center;
    gap: 30px; /* Space between items */
}

/* Main CTA Button (btn-primary is the style for the button) */
.btn-primary {
    /* Use Primary Color, which is the purple accent */
   background-color: #0E0E0E;
    color: #ffffff;
}
.btn-primary:hover {
    background-color: 
 color-mix(in srgb, #0E0E0E 80%, white);
    border: 1px solid #dc0eeb;
    box-shadow: -5px -2px 9px #dc0eeb;
}

.btn-cta-main {
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    position: relative;
    padding-right: 45px; /* Make space for the arrow */
}

.btn-cta-main .arrow-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
        background-color: #C82AEF;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
}

.review-circles-placeholder {
    width: 140px; 
    height: 30px;
    background-color: transparent; 
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-color-faded);
    border: 1px dashed var(--text-color-faded);
}

.review-count {
    font-size: 0.9rem;
    color: var(--text-color-faded);
}
.review-count strong {
    color: var(--text-color-light);
}

/* ======================================= */
/* EXPERTISE SECTION STYLES                */
/* ======================================= */

.expertise-section {
    padding: 10px 0;
    background-color: var(--background-color); 
}

.expertise-container {
    display: flex;
    gap: 80px; /* Space between the two columns */
    align-items: stretch;
}


/* --- LEFT COLUMN (Image and Floating Card) --- */

.expertise-left-column {
    flex: 1; /* Takes up equal space as the right column */
    position: relative;
    min-height: 700px; /* Ensure space for image and floating card */
}

.expertise-image-bg {
    /* Placeholder for the image */
    background: url('./assets/images/working-job-career-casual-showing-SJZWF3N-800x576.jpg.png') no-repeat center center/cover; /* Replace with your image path */
    position: absolute;
    top: 50px;
    left: 0;
    width: 85%; /* Image is slightly smaller than the column */
    height: 90%;
    border-radius: 10px;
    /* Optional: Darken the image slightly */
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
}

/* Floating CTA Card */
.floating-cta-card {
position: absolute;
    top: 50px;
    /* right: 392px; */
    width: 50%;
    padding: 30px;
    background-color: var(--secondary-color);
    border-radius: 10px;
    border: 10px solid #000000;
    z-index: 20;
}

.floating-cta-card .cta-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.floating-cta-card .cta-subtitle {
    color: var(--text-color-faded);
    margin-bottom: 20px;
}

.cta-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}
.cta-link:hover {
    color: var(--text-color-light);
}

.cta-link .arrow-icon {
    font-size: 1.1rem;
}


/* --- RIGHT COLUMN (Content) --- */

.expertise-right-column {
    flex: 1;
    padding-top: 50px; /* Align with the top of the image */
}

.section-label {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 5px;
}

.expertise-heading {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 25px;
    /* Apply the gradient text style for H2 elements */
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.expertise-intro-text {
    color: var(--text-color-faded);
    margin-bottom: 40px;
    font-size: 1rem;
}

/* Services List Styles */
.list-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-color-light);
}

.services-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for the list items */
    gap: 15px;
    max-width: 500px;
    margin-bottom: 50px;
}

.services-list li {
    color: var(--text-color-light);
    font-size: 0.95rem;
    font-weight: 500;
}
.check-icon {
    color: var(--primary-color); /* Use the purple accent for the checkmark */
    margin-right: 8px;
}


/* Experience Card Styles */
.experience-card {
    background-color: var(--secondary-color);
    padding: 20px 30px;
    border-radius: 10px;
    border-left: 5px solid var(--primary-color); /* Left border highlight */
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 650px;
}

.experience-content {
    min-width: 150px;
    text-align: center;
}
.experience-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-color-light);
    line-height: 1;
}
.experience-label {
    font-size: 0.8rem;
    color: var(--text-color-faded);
}

.experience-description {
    font-size: 0.9rem;
    color: var(--text-color-faded);
}
/* ======================================= */
/* CLIENT TRUST BAR/SLIDER SECTION STYLES  */
/* (REVISED TO MATCH SCREENSHOT EXACTLY)   */
/* ======================================= */

.trust-bar-section-outer {
    padding: 10px 0; 
    background-color: var(--background-color); 
    display: flex; /* Helps center the box if it has a max-width */
    justify-content: center;
    align-items: center;
}

.trust-bar-box {
    border: 1px solid rgba(200, 42, 239, 0.3);
    border-radius: 20px;
    padding: 60px 40px;
    max-width: 1100px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 80px rgba(200, 42, 239, 0.2);
    display: flex
;
    flex-direction: column;
    gap: 40px;
    background: radial-gradient(80.71% 141.42% at 50% -1%, #c82aef40 0%, rgb(200 42 239 / 0%) 50%);
    /* background: linear-gradient(180deg, rgba(56, 9, 68, 1) 0%, rgba(87, 199, 133, 0) 50%, rgba(237, 221, 83, 0) 100%); */
}


/* --- TOP AREA (Heading and Subheading) --- */
.trust-header-area {
    display: flex; /* Layout for heading and subheading */
    justify-content: space-between;
    align-items: flex-end; /* Align content to the bottom */
    gap: 40px;
}

.trust-heading {
    /* Uses the gradient styling defined for H2 */
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 0; /* Remove default margin as flex handles spacing */
    flex-shrink: 0; /* Prevent it from shrinking */
    max-width: 45%; /* Control width of the heading */
}

.trust-subheading {
    color: var(--text-color-faded);
    font-size: 1.05rem;
    line-height: 1.6;
    flex-grow: 1; /* Allow it to take remaining space */
}


/* --- BOTTOM AREA (Logo Slider) --- */
.logo-slider-area {
    /* No longer flex: 1; as it's full width within the box */
    width: 100%;
    overflow: hidden; /* Crucial for containing slider items */
    position: relative;
    padding: 10px 0; 
}

.logo-slider-wrapper {
    display: flex; 
    gap: 30px;
    /* This will be managed by JS for actual sliding */
}

.logo-slide {
    flex-shrink: 0; 
    flex-grow: 0;
    width: 150px; 
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--secondary-color); /* Darker background for slides */
    border-radius: 8px;
    padding: 10px;
    cursor: grab;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
}

.client-logo-img {
    max-height: 100%;
    max-width: 80%;
    filter: grayscale(100%) brightness(150%); /* Make logos grayscale and brighter for dark background */
    opacity: 0.7; 
    transition: filter 0.3s, opacity 0.3s;
}
.client-logo-img:hover {
    filter: grayscale(0%) brightness(100%); /* Color on hover */
    opacity: 1;
}

/* --- Slider Nav Placeholder (Hides on basic CSS setup) --- */
.slider-nav-placeholder {
    display: none; 
}
/* ======================================= */
/* MISSION / WHY CHOOSE US SECTION STYLES  */
/* ======================================= */

.mission-section {
    padding: 100px 0;
    background-color: var(--background-color); 
}

.mission-container {
    display: flex;
    gap: 80px; /* Space between the two main columns */
    align-items: center;
}


/* --- LEFT COLUMN (Feature Cards) --- */

.mission-left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between the cards */
}

.feature-benefit-card {
    display: flex;
    gap: 20px;
    padding: 20px 30px;
    border-radius: 10px;
    background-color: #1A1A1A; /* Dark background for the cards */
    
    /* Subtle border highlight similar to other sections */
    border: 1px solid var(--secondary-color); 
    transition: border-color 0.3s;
        align-items: center;
}

.feature-benefit-card:hover {
    border-color: var(--primary-color);
}

.card-icon-wrapper {
    flex-shrink: 0; /* Prevents the icon column from squeezing */
    padding-top: 5px;
}

.icon-placeholder {
    width: 60px;
    height: 60px;
    background-color: color-mix(in srgb, var(--primary-color) 10%, black);
    border-radius: 50%;
    /* You would use an SVG or FontAwesome icon here */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
}
.award-icon {
    /* Style adjustment for the middle icon in the screenshot */
    border: 1px solid var(--primary-color); 
}

.card-content {
    flex-grow: 1;
}

.feature-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.feature-description {
    color: var(--text-color-faded);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.read-more-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}
.read-more-link:hover {
    color: var(--text-color-light);
}

/* --- RIGHT COLUMN (Content, Image, and CTA) --- */

.mission-right-column {
    flex: 1;
}

.section-label {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 5px;
}

.mission-heading {
    font-size: 3.2rem;
    line-height: 1.1;
    margin-bottom: 25px;
    /* Apply the gradient text style for H2 elements */
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.mission-intro-text {
    color: var(--text-color-faded);
    margin-bottom: 40px;
    font-size: 1rem;
}

/* Image and Floating CTA Wrapper */
.image-cta-wrapper {
    position: relative;
    width: 100%;
    min-height: 400px; /* Set height for image container */
}

.mission-image-bg {
    /* Placeholder for the image */
    background: url('./assets/images/collaborative-process-of-multicultural-skilled-peo-5EHBQRG-800x533.jpg.png') no-repeat center center/cover; /* Replace with your image path */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    /* Dark overlay for better text contrast */
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
}

/* Floating CTA Card */
.floating-image-cta {
position: absolute;
    bottom: -10px;
    right: 0;
    width: 50%;
    padding: 30px;
    background-color: #1A1A1A;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    display: flex
;
    flex-direction: column;
    gap: 10px;
    border: 11px solid #000000;
}

.floating-image-cta .cta-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 5px;
}

.cta-link-btn {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}
.cta-link-btn:hover {
    color: var(--text-color-faded);
}
/* ======================================= */
/* VIDEO CTA SECTION STYLES                */
/* ======================================= */

.video-cta-section {
    padding: 100px 0;
    border-radius: 15px;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 500px; 
    
    /* --- BACKGROUND IMAGE AND GRADIENT OVERLAY --- */
    
    /* 1. Gradient Overlay: Creates the dark fade effect over the image */
    background: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.7) 0%, /* Darkest black on the left side */
        rgba(0, 0, 0, 0.5) 50%, 
        rgba(0, 0, 0, 0.3) 100% /* Lighter black/transparent on the right side */
    );
    
    /* 2. Background Image Placeholder: You MUST replace the path below */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* Gradient overlay */
    url('./assets/images/video.png'); /* Background image */
        
        /* linear-gradient(
            to right, 
            rgba(0, 0, 0, 0.8) 0%, 
            rgba(0, 0, 0, 0.3) 100%
        ), 
       
        url('./assets/images/video.jpg');  */
        
    /* 3. Background Sizing/Positioning */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* This ensures the text stays visible */
    background-blend-mode: overlay; 
}

.video-cta-content {
    /* Aligns text content */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
    z-index: 10; 
    
    /* Center the content on the left side of the block */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 350px; 
}

/* Play Button Styling */
.video-play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary-color); /* Use your purple accent color */
    box-shadow: 0 0 0 10px rgba(200, 42, 239, 0.3); /* Subtle outer ring glow */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.video-play-button:hover {
    transform: scale(1.05);
}

.video-text-small {
    font-size: 0.9rem;
    color: var(--text-color-light); 
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 5px;
}

.video-title {
    font-size: 3.5rem;
    line-height: 1.1;
    max-width: 60%; 
    margin-bottom: 20px;
    color: var(--text-color-light); /* Override gradient to white for readability on dark background */
}

.video-description {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 50%; 
    color: var(--text-color-faded);
}
/* ======================================= */
/* SERVICES OVERVIEW SECTION STYLES        */
/* ======================================= */

.services-overview-section {
    padding: 100px 0;
    background-color: var(--background-color); 
}

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

.section-label { /* Re-using existing label class */
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 5px;
}

.section-heading-services {
    font-size: 3.2rem;
    line-height: 1.1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    /* This H2 will use the gradient text style */
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


.services-grid {
    display: grid;
    /* Create a 2x2 grid */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; /* Space between cards */
    margin-bottom: 80px; /* Space before the final CTA text */
}

.service-card {
    background-color: #1A1A1A; /* Dark background for the card */
    border: 1px solid var(--secondary-color); /* Subtle border */
    border-radius: 15px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    border-color: var(--primary-color); /* Purple border on hover */
    box-shadow: 0 0 20px rgba(200, 42, 239, 0.2); /* Subtle glow */
}

.service-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.icon-placeholder {
    width: 70px;
    height: 70px;
    background-color: rgba(200, 42, 239, 0.1); /* Light purple background for icon */
    border-radius: 10px; /* Rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-placeholder img {
    max-width: 100%; /* Ensure icon image fits */
    max-height: 100%;
}

.service-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color-light);
    margin: 0;
}

.service-description {
    color: var(--text-color-faded);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.sub-services-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for sub-services */
    gap: 10px;
    margin-bottom: 30px;
}

.sub-services-list li {
    color: var(--text-color-light);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.check-icon {
    color: var(--primary-color);
    margin-right: 8px;
    font-size: 1.1rem;
}

/* View Details Button Styling */
.btn-view-details {
    margin-top: auto; /* Pushes the button to the bottom of the card */
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 180px; /* Limit button width */
}
.btn-view-details .arrow-icon {
    font-size: 1.1rem;
    font-weight: bold;
}
.btn-view-details:hover {
    background-color: color-mix(in srgb, var(--primary-color) 80%, white);
}


/* Final CTA Text below the grid */
.final-cta-text {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-color-light);
}

.final-cta-text .strategy-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}
.final-cta-text .strategy-link:hover {
    color: var(--text-color-faded);
    text-decoration: underline;
}

/* case studies */
.case-studies {
  padding: 10px 8%;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.case-header .tag {
  color: #c82aef;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.case-header h2 {
    font-size: 3.2rem;
    line-height: 1.1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.case-header h2 span {
  color: #ccc;
  font-weight: 400;
}

.case-header .right {
  max-width: 500px;
  color: #bbb;
  line-height: 1.6;
}

.case-header .more {
  color: #c82aef;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  font-weight: 500;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.case-box {
  background: #151515;
  border: 1px solid rgba(168, 109, 245, 0.2);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.case-box.with-img {
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.case-box.with-img .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0.8), rgba(60, 0, 90, 0.4));
  z-index: 0;
}

.case-box .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 1;
  position: relative;
}

.case-box .tags span {
  border: 1px solid #c82aef;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  /* background: rgba(168, 109, 245, 0.1); */
}

.case-box h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.case-box p {
  color: #ccc;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
/* ======================================= */
/* TESTIMONIALS SECTION STYLES             */
/* ======================================= */

.testimonials-section {
    padding: 100px 0;
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

.testimonials-grid-container {
    display: grid;
    /* Two columns: left (smaller) and right (larger) */
    grid-template-columns: 1.5fr 3fr; 
    gap: 60px;
    align-items: center;
}

/* --- LEFT COLUMN: STATS CARD --- */

.stats-card {
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(200, 42, 239, 0.2); /* Soft purple glow */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100%; /* Ensures it stretches to align with the right column content */
}

.review-stats {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
}

.review-icon-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.review-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--primary-color);
    opacity: 0.8;
}

.review-count {
    font-size: 1rem;
    color: var(--text-color-faded);
    margin-bottom: 25px;
}

.stat-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    /* Apply gradient similar to headings */
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.stat-label-row .stat-label {
    font-size: 0.85rem;
    color: var(--text-color-faded);
    margin: 0;
}

.service-check-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-item {
    background-color: #111111; /* Slightly darker background for the item */
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 500;
}
.service-item .check-icon {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: bold;
}

/* --- RIGHT COLUMN: HEADER & CARDS --- */

.testimonials-header {
    margin-bottom: 40px;
}

.testimonials-header .section-label {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.testimonials-heading {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 15px;
}
.testimonials-heading .highlight-text {
    /* Use the gradient style for the highlighted phrase */
    background: linear-gradient(90deg, #D9D9D9 0%, #6B6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.header-description {
    color: var(--text-color-faded);
    font-size: 1rem;
    line-height: 1.6;
}

/* Testimonial Cards Grid */
.testimonial-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 30px;
    margin-top: 30px;
}

.testimonial-card {
    background-color: var(--secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}
.testimonial-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(200, 42, 239, 0.1);
}

.card-header {
    margin-bottom: 15px;
}

.stars {
    color: gold; /* Simulating star color */
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.client-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    flex-shrink: 0;
}
.client-name {
    font-weight: 600;
    margin: 0;
}
.client-title {
    font-size: 0.85rem;
    color: var(--text-color-faded);
    margin: 0;
}

.quote-text-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.quote-text {
    font-style: italic;
    color: var(--text-color-faded);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    padding-right: 15px;
}
.quote-icon {
    font-family: Georgia, serif; /* Using a classic font for the quote mark */
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.5;
    line-height: 0.5;
    flex-shrink: 0;
    align-self: flex-start;
}
/*  */
/* ======================================= */
/* PROCESS STEPS SECTION STYLES            */
/* ======================================= */

.process-section {
    /* padding: 100px 0; */
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

/* --- Header Styles --- */
.process-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 50px;
}

.process-header .header-left {
    flex-shrink: 0;
    max-width: 50%;
}

.process-header .section-label {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.process-heading {
    font-size: 3rem;
    line-height: 1.1;
    /* Apply the dark gradient/white text effect */
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}

.process-header .header-right {
    flex-grow: 1;
    padding-bottom: 10px;
}

.process-header .header-description {
    color: var(--text-color-faded);
    margin-bottom: 15px;
}

.process-header .cta-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

/* --- Process Steps Container (Glow Effect) --- */

.process-steps-container {
    position: relative;
    padding: 1px;
}

/* This creates the vertical/horizontal glow border effect seen in the screenshot */
.process-border-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--primary-color) 0%, transparent 100%);
    opacity: 0.3;
    border-radius: 10px;
    z-index: 1;
    box-shadow: 0 0 15px rgba(200, 42, 239, 0.2);
}

/* --- Steps Grid --- */
.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    background-color: #000000; /* Dark background for the main area */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 50px 30px;
    position: relative;
    z-index: 2;
}

.process-step {
    /* Padding and border for separation */
    padding-right: 20px;
    border-right: 1px solid #c82aef33;
}
.process-step:last-child {
    /* Remove border from the last step */
    border-right: none;
    padding-right: 0;
}

.step-icon-number {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.step-icon-wrapper {
    /* Styling the circular frame around the icon image */
    background-color: #1A1A1A; 
    padding: 10px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    width: 45px; /* Define size for the frame */
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.step-icon-img {
    /* Ensure icon image fits inside the wrapper */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.step-number {
    font-size: 15px;
    font-weight: 700;
    color: #fffcfc;
    opacity: 0.4;
    line-height: 1;
}

.process-step h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.process-step p {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    line-height: 1.5;
}

.container {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(31, 31, 31, 1);
    background: radial-gradient(141.42% 141.42% at 0% 0%, #1F1F1F 0%, #040404 50%);
}
/* ======================================= */
/* PRICING SECTION STYLES                  */
/* ======================================= */

.pricing-section {
    padding: 10px 0;
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

/* --- Header Styles --- */
.pricing-header {
    text-align: center;
    margin-bottom: 70px;
}

.pricing-header .section-label {
    color: var(--text-color-light);
    opacity: 0.8;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.pricing-heading {
    font-size: 3.5rem;
    line-height: 1.1;
    /* Apply the dark gradient/white text effect */
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}

/* --- Main Pricing Card Wrapper (Glow and Position) --- */

.price-card-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    
    /* The main card background, border, and glow */
    background: linear-gradient(to right, #1A1A1A, #1A1A1A), 
                linear-gradient(to right, #C82AEF, #2A0E42); /* Purple gradient for border */
    background-origin: padding-box, border-box;
    background-repeat: no-repeat;
    border: 3px solid transparent;
    border-radius: 15px;
    
    /* Soft internal shadow for glow effect */
    box-shadow: 0 0 40px rgba(200, 42, 239, 0.4); 
}

.price-card {
    display: flex;
    justify-content: space-between;
    padding: 40px 50px;
    gap: 40px;
    border-radius: 15px;
    background-color: #1A1A1A; /* Ensure background is solid inside the border */
}

/* --- BEST SELLER Tag --- */
.best-seller-tag {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #E74C3C; /* Red background */
    color: var(--text-color-light);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 5px 20px;
    border-radius: 0 15px 0 15px;
    z-index: 10;
}


/* --- Card Left (Title and Features) --- */

.card-left {
    flex-basis: 50%;
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider line */
    padding-right: 40px;
}

.plan-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 5px;
    color: var(--text-color-light);
    /* Subtle purple tint for the title */
    text-shadow: 0 0 5px rgba(200, 42, 239, 0.2); 
}

.plan-subtitle {
    font-size: 1rem;
    color: var(--text-color-faded);
    margin-bottom: 30px;
}

.plan-features {
    display: flex;
    gap: 30px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    font-size: 1rem;
    color: var(--text-color-faded);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.check-icon {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-right: 10px;
    font-weight: bold;
}

/* --- Card Right (Price and CTA) --- */

.card-right {
    flex-basis: 50%;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push CTA to the bottom */
}

.plan-description {
    font-size: 1rem;
    color: var(--text-color-faded);
    line-height: 1.6;
    margin-bottom: 30px;
}

.pricing-cta-block {
    display: flex;
    align-items: center;
    gap: 30px;
}

.price-info {
    flex-grow: 1;
}

.starting-price {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 2px;
}
.price-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color-light);
}

.price-note {
    font-size: 0.8rem;
    color: var(--text-color-faded);
    margin: 0;
}

.btn-cta {
    display: flex
;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    background-color: var(--background-color);
    color: var(--text-color-light);
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-cta .arrow-icon {
    display: flex
;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary-color);
    font-size: 1rem;
    transition: transform 0.3s;
}
.btn-cta:hover .arrow-icon {
    transform: translateX(5px);
}
.btn-cta:hover {
    background-color: #000000;
}


/* --- Bottom CTA Button (Explore More) --- */

.bottom-cta {
    text-align: center;
    margin-top: 60px;
}

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #1A1A1A;
    color: var(--text-color-light);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s;
}

.explore-btn .arrow-icon {
    /* Reuse the purple arrow style */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary-color);
    font-size: 1rem;
    transition: transform 0.3s;
}
.explore-btn:hover {
    border-color: var(--primary-color);
}
.explore-btn:hover .arrow-icon {
    transform: translateX(5px);
}
/* for the blogs sections */

/* ======================================= */
/* BLOG/ARTICLES SECTION STYLES            */
/* ======================================= */

.blog-section {
    /* padding: 100px 0; */
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

/* --- Header Styles (Reusing pattern from previous sections) --- */
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 70px;
}

.blog-header .header-left {
    flex-shrink: 0;
    max-width: 50%;
}

.blog-header .section-label {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.blog-heading {
    font-size: 3rem;
    line-height: 1.1;
    /* Apply the dark gradient/white text effect */
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}

.blog-header .header-right {
    flex-grow: 1;
    padding-bottom: 10px;
}

.blog-header .header-description {
    color: var(--text-color-faded);
    margin-bottom: 15px;
}

.blog-header .cta-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
}

/* --- Articles Grid --- */

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

.article-card {
    background-color: var(--secondary-color);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s, transform 0.3s;
}
.article-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.article-image-container {
    height: 300px; /* Set a fixed height for consistency */
    overflow: hidden;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.article-card:hover .article-image {
    transform: scale(1.05);
}

.article-content {
    padding: 30px;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.article-meta .meta-date {
    color: var(--text-color-faded);
}

.article-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.article-excerpt {
    font-size: 0.95rem;
    color: var(--text-color-faded);
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
}
/* ======================================= */
/* FOOTER SECTION STYLES                   */
/* ======================================= */

.main-footer {
    background-color: var(--background-color); 
    color: var(--text-color-light);
    padding-top: 50px; /* Space above the footer's main content area */
}

.footer-top {
    /* Main wrapper for the top part of the footer with the border and background */
    background-color: var(--secondary-color);
    border-radius: 20px 20px 0 0; /* Rounded top corners only */
    padding: 60px 0 40px 10px;
    position: relative;
    /* Create the glowing purple border effect */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1), /* Inner thin white border */
        0 0 30px rgba(200, 42, 239, 0.3);   /* Soft purple glow */
    border-top: 1px solid transparent; /* Ensure border-radius applies nicely */
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

/* --- Footer Grid Layout --- */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr; /* Custom widths based on screenshot */
    gap: 40px;
}

/* --- Footer Brand Info --- */
.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}
.footer-brand .footer-logo img {
    height: 60px; /* Adjust logo size */
    
}
.footer-brand .footer-logo span {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color-light);
}

.footer-brand h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--text-color-light);
}
.footer-brand p {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    line-height: 1.6;
}

/* --- Link Sections (Quick Links, Services) --- */
.footer-links h4,
.footer-services h4,
.footer-contact h4,
.footer-social h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color); /* Purple headings */
    margin-bottom: 25px;
}

.footer-links ul,
.footer-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li,
.footer-services li {
    margin-bottom: 12px;
}
.footer-links a,
.footer-services a,
.footer-contact p a {
    color: var(--text-color-faded);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
}
.footer-links a:hover,
.footer-services a:hover,
.footer-contact p a:hover {
    color: var(--primary-color);
}

/* --- Contact Info & Social Media --- */
.footer-contact p {
    font-size: 0.95rem;
    color: var(--text-color-faded);
    line-height: 1.5;
    margin-bottom: 10px;
}
.footer-contact p:last-of-type {
    margin-bottom: 0;
}

.footer-social {
    margin-top: 30px; /* Space between contact and social */
}
.social-icons {
    display: flex;
    gap: 10px;
}
.social-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #1A1A1A; /* Dark background for icons */
    border-radius: 8px;
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    transition: background-color 0.3s, border-color 0.3s;
}
.social-icon-box img {
    width: 60px;
    height: 50px;

}
.social-icon-box:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.social-icon-box:hover img {
    opacity: 1;
}

/* --- Footer Bottom (Copyright and Legal) --- */
.footer-bottom {
    padding: 25px 0;
    background-color: var(--background-color); /* Continues the main dark background */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separator line */
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-color-faded);
}

.legal-links a {
    color: var(--text-color-faded);
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s;
}
.legal-links a:hover {
    color: var(--primary-color);
}

/* pricing section  */

/* ======================================= */
/* FLEXIBLE PRICING (3-COLUMN) SECTION STYLES */
/* ======================================= */

.flexible-pricing-section {
    /* padding: 100px 0; */
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

.pricing-header-wide {
    text-align: center;
    margin-bottom: 70px;
}
.pricing-header-wide .section-label {
    color: var(--text-color-light);
    opacity: 0.8;
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.pricing-heading-wide {
    font-size: 3.5rem;
    line-height: 1.1;
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}

.plans-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr; /* 3 unequal columns based on image */
    gap: 20px;
    align-items: stretch;
}

/* --- Base Card Styles --- */

.plan-card,
.plan-cta-block {
    padding: 30px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background-color: var(--secondary-color);
    
    /* Subtle border/glow effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(200, 42, 239, 0.1);
}

.card-top-title,
.cta-title,
.priority-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px;
}
.card-top-subtitle,
.plan-for {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    margin-bottom: 15px;
}
.card-price {
    margin-bottom: 20px;
}
.card-price .price-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color-light);
}

.view-details-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111111;
    color: var(--text-color-light);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}
.view-details-btn .arrow-icon {
    display: flex;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--primary-color);
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}


/* --- Card Features List --- */
.card-features,
.starter-features {
    list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
}
.card-features li,
.starter-features li {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}
.card-features .check-icon,
.starter-features .check-icon {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-right: 8px;
    flex-shrink: 0;
}

.best-for {
    font-size: 0.8rem;
    color: var(--text-color-faded);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
}


/* --- Column 1: CTA Block Styling --- */

.plan-cta-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Background gradient for the top section */
    background: linear-gradient(180deg, rgba(200, 42, 239, 0.1) 0%, rgba(26, 26, 26, 0) 100%), 
                var(--secondary-color);
    padding-bottom: 0; /* Remove padding from bottom since the starter plan box has its own padding */
}
.cta-title {
    font-size: 2rem;
    /* Apply a purple tint to the CTA title */
    background: linear-gradient(90deg, var(--text-color-light) 60%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 20px;
}
.cta-subtitle {
    color: var(--text-color-faded);
    margin-bottom: 40px;
}
.cta-link-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 20px;
    padding: 5px 0;
    align-self: flex-start;
}
.cta-link-btn .arrow-icon {
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-light);
    font-size: 0.8rem;
}

/* Starter Plan Box within the CTA Column */
.starter-plan-box {
    background-color: #1A1A1A;
    padding: 30px;
    border-radius: 10px;
    margin-top: auto; /* Push to the bottom */
}
.starter-plan-box h4 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}
.starter-plan-box .plan-for {
    margin-bottom: 15px;
}
.starter-plan-box .starter-price .price-value {
    font-size: 1.8rem;
}

/* --- Column 3: Priority Box Styling --- */

.priority-box {
    background-color: #111111;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle purple tint overlay */
    background: linear-gradient(180deg, rgba(200, 42, 239, 0.1) 0%, #111111 100%);
}
.priority-title {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.priority-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.priority-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.priority-features li:last-child {
    border-bottom: none;
}
.priority-features li p {
    color: var(--text-color-light);
    margin: 0;
    font-size: 0.95rem;
}
.priority-features .arrow-icon-small {
    color: var(--primary-color);
    font-size: 1.1rem;
}
/* ======================================= */
/* FLEXIBLE PRICING (3-COLUMN) SECTION STYLES */
/* ======================================= */

.flexible-pricing-section {
    /* padding: 100px 0; */
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

.pricing-header-wide {
    text-align: center;
    margin-bottom: 70px;
}
.pricing-header-wide .section-label {
    color: var(--text-color-light);
    opacity: 0.8;
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.pricing-heading-wide {
    font-size: 3.5rem;
    line-height: 1.1;
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}

.plans-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr; /* 3 unequal columns based on image */
    gap: 20px;
    align-items: stretch;
}

/* --- Base Card Styles --- */

.plan-card,
.plan-cta-block {
    padding: 30px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background-color: var(--secondary-color);
    
    /* Subtle border/glow effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(200, 42, 239, 0.1);
}

.card-top-title,
.cta-title,
.priority-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px;
}
.card-top-subtitle,
.plan-for {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    margin-bottom: 15px;
}
.card-price {
    margin-bottom: 20px;
}
.card-price .price-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color-light);
}

.view-details-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111111;
    color: var(--text-color-light);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}
.view-details-btn .arrow-icon {
    display: flex;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--primary-color);
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}


/* --- Card Features List --- */
.card-features,
.starter-features {
    list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
}
.card-features li,
.starter-features li {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}
.card-features .check-icon,
.starter-features .check-icon {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-right: 8px;
    flex-shrink: 0;
}

.best-for {
    font-size: 0.8rem;
    color: var(--text-color-faded);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
}


/* --- Column 1: CTA Block Styling --- */

.plan-cta-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Background gradient for the top section */
    background: linear-gradient(180deg, rgba(200, 42, 239, 0.1) 0%, rgba(26, 26, 26, 0) 100%), 
                var(--secondary-color);
    padding-bottom: 0; /* Remove padding from bottom since the starter plan box has its own padding */
}
.cta-title {
    font-size: 2rem;
    /* Apply a purple tint to the CTA title */
    background: linear-gradient(90deg, var(--text-color-light) 60%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 20px;
}
.cta-subtitle {
    color: var(--text-color-faded);
    margin-bottom: 40px;
}
.cta-link-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 20px;
    padding: 5px 0;
    align-self: flex-start;
}
.cta-link-btn .arrow-icon {
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-light);
    font-size: 0.8rem;
}

/* Starter Plan Box within the CTA Column */
.starter-plan-box {
    background-color: #1A1A1A;
    padding: 30px;
    border-radius: 10px;
    margin-top: auto; /* Push to the bottom */
}
.starter-plan-box h4 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}
.starter-plan-box .plan-for {
    margin-bottom: 15px;
}
.starter-plan-box .starter-price .price-value {
    font-size: 1.8rem;
}

/* --- Column 3: Priority Box Styling --- */

.priority-box {
    background-color: #111111;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle purple tint overlay */
    background: linear-gradient(180deg, rgba(200, 42, 239, 0.1) 0%, #111111 100%);
}
.priority-title {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.priority-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.priority-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.priority-features li:last-child {
    border-bottom: none;
}
.priority-features li p {
    color: var(--text-color-light);
    margin: 0;
    font-size: 0.95rem;
}
.priority-features .arrow-icon-small {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* ======================================= */
/* TEAM SECTION STYLES                     */
/* ======================================= */

.team-section {
    padding: 100px 0;
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

/* --- Header Styles --- */
.team-header {
    text-align: center;
    margin-bottom: 50px;
}
.team-header .section-label {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.team-heading {
    font-size: 3.5rem;
    line-height: 1.1;
    /* Apply the dark gradient/white text effect */
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}

/* --- Team Grid --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.team-member-card {
    background-color: var(--secondary-color);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden; /* Crucial to contain the image and overlays */
    transition: transform 0.3s, box-shadow 0.3s;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(200, 42, 239, 0.3);
}

.member-image-wrap {
    position: relative;
    width: 100%;
    /* Maintain a specific aspect ratio for the photo area */
    aspect-ratio: 1 / 1.1; 
}

.member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Details Overlay (Name and Title) --- */
.member-details-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
    padding: 40px 20px 20px;
}

.member-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.member-title {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin: 0;
}

/* --- Social Icons Overlay --- */
.member-socials {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
}
.team-member-card:hover .member-socials {
    opacity: 1; /* Show on hover */
}

.member-socials a {
    display: block;
    width: 30px;
    height: 30px;
    background-color: rgba(200, 42, 239, 0.2); /* Semi-transparent purple background */
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s;
}

.member-socials a:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
/* ======================================= */
/* PAGE HERO BANNER (Pricing/Secondary Page) */
/* ======================================= */

.page-hero-banner {
    padding: 100px 0;
    position: relative;
    text-align: center;
    background-color: var(--background-color);
    overflow: hidden; /* Crucial to contain the bottom glow */
    border-radius: 0 0 15px 15px; /* Rounded bottom edges like the screenshot */
    margin-bottom: 50px; /* Space before the next section */
}

/* --- Purple Bottom Glow Effect --- */
.page-hero-banner::after {
    content: '';
    position: absolute;
    bottom: -150px; /* Adjust to move the glow up or down */
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
    /* background: radial-gradient(circle, rgba(200, 42, 239, 0.4) 0%, rgba(200, 42, 239, 0) 70%); */
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 0;
}

.hero-content-center {
    position: relative;
    z-index: 10; /* Keep content above the glow */
}

.page-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 10px 0;
    
    /* Apply the soft white/gray gradient for the main title */
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--text-color-faded);
    margin: 0;
}

.page-subtitle .active-breadcrumb {
    color: var(--primary-color);
    font-weight: 600;
}
/* ======================================= */
/* CONTACT SECTION STYLES                  */
/* ======================================= */

.contact-section {
    padding: 100px 0;
    background-color: var(--background-color); 
    color: var(--text-color-light);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr; /* Left column narrower than the form */
    gap: 30px;
    align-items: center;
}

/* --- Base Box Styles (Left & Right) --- */
.info-box,
.form-box {
    background-color: var(--secondary-color);
    padding: 40px;
    border-radius: 15px;
    
    /* Neon Border Effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(200, 42, 239, 0.15); 
}

/* --- Left Column: Contact Info --- */
.contact-heading {
    font-size: 3rem;
    line-height: 1.1;
    margin: 10px 0 15px 0;
    /* Apply the dark gradient/white text effect */
    background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.contact-subtext {
    font-size: 1rem;
    color: var(--text-color-faded);
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Info Blocks */
.info-block {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #111111; /* Darker background for the individual blocks */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-icon-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-light);
    font-size: 1.1rem;
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-color-faded);
    margin: 0;
}
.info-detail {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color-light);
}

/* --- Right Column: Contact Form --- */

.form-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: flex;
    gap: 15px;
}
.form-row input {
    flex: 1;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #111111;
    color: var(--text-color-light);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(200, 42, 239, 0.5);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
}

/* Submit Button */
.submit-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111111;
    color: var(--text-color-light);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid var(--primary-color);
    cursor: pointer;
    transition: background-color 0.3s;
    width: 200px; /* Match the button width in the screenshot */
    margin-top: 15px;
}
.submit-btn:hover {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.submit-btn .arrow-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--background-color);
    font-size: 1rem;
    /* On button hover, these colors will need to be inverted for contrast */
}
.submit-btn:hover .arrow-icon {
    background-color: var(--text-color-light);
    color: var(--primary-color);
}

/* ======================================= */
/* RESPONSIVENESS (Mobile/Tablet View)     */
/* ======================================= */
@media (max-width: 1200px) {
    .pricing-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .strategy-card {
                text-align: center;
                grid-column: span 1;
            }
            .strategy-link {
                justify-content: center;
            }
    .plans-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablets */
    }
    .plan-cta-block {
        grid-column: span 2; /* CTA block spans 2 columns at the top */
        padding-bottom: 30px;
    }
    .starter-plan-box {
        margin-top: 30px; /* Space from the top CTA content */
    }
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr; /* Two columns on tablet */
    }
    .footer-contact-social {
        grid-column: span 2; /* Span both columns for contact/social on tablet */
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 30px;
    }
    .footer-social {
        margin-top: 0; /* Adjust margin if side-by-side */
    }
    .footer-bottom-content {
        flex-direction: column;
        gap: 10px;
    }
    .legal-links a {
        margin: 0 10px;
    }
    .expertise-container {
        flex-direction: column; /* Stack columns on tablets/mobiles */
        gap: 40px;
    }
    
    .expertise-left-column {
        min-height: 500px; /* Reduce height for stacked layout */
        order: 2; /* Move image/card below the main content on mobile */
    }
    
    .expertise-right-column {
        order: 1; /* Keep main content at the top */
        padding-top: 0;
    }

    .expertise-heading {
        font-size: 2.5rem;
    }
    
    .floating-cta-card {
        width: 60%; /* Card is wider on smaller screens */
    }
    
    .services-list {
        grid-template-columns: 1fr; /* Stack service list items */
        gap: 10px;
    }
    
    .experience-card {
        flex-direction: column; /* Stack content inside the experience card */
        text-align: center;
    }
    /* Header/Navigation adjustments */
    .main-nav {
        /* Hide navigation on smaller screens (A JavaScript hamburger menu is often used here) */
        display: none;
    }
    .header-content {
        justify-content: space-between; 
    }
    
    /* Hero adjustments */
    .hero-title {
        font-size: 3.5rem; 
        max-width: 100%; /* Full width for the title */
    }
    
    .hero-sub-section {
        justify-content: flex-start; /* Align description to the left */
        margin-bottom: 40px;
    }

    .hero-description {
        max-width: 80%; 
    }

    .hero-cta-row {
        flex-direction: column; /* Stack the CTA groups */
        align-items: flex-start;
        gap: 40px;
    }
    /* Header/Navigation adjustments */
    .main-nav {
        /* Hide navigation on smaller screens */
        display: none;
    }
    
    .btn-phone {
        /* Hide phone button on small screens to save space */
        display: none; 
    }
    
    /* Show the hamburger menu icon */
    .mobile-menu-toggle {
        display: block;
    }

    /* Future: When the menu is open, you will use CSS/JS to show the navigation */

    .main-nav {
        display: none; /* Hidden by default */
        /* You might use position: absolute; for a full-screen overlay */
    }
    
    .main-nav.menu-open {
        display: flex; /* Displayed when the JS adds the 'menu-open' class */
        /* Add styling to make it look like a mobile overlay */
    }
    
    /* for the 3rd section  */
    .trust-bar-box {
        padding: 40px 30px;
        border-radius: 15px;
    }
    
    .trust-header-area {
        flex-direction: column; /* Stack heading and subheading */
        align-items: flex-start;
        gap: 20px;
    }
    
    .trust-heading {
        max-width: 100%; /* Full width for heading */
        font-size: 2.5rem;
    }
    
    .logo-slider-area {
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar on Chrome/Safari/Opera */
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .logo-slider-wrapper {
        padding-bottom: 20px; /* Space for hidden scrollbar */
    }
    /* our mission */
    .mission-container {
        flex-direction: column; /* Stack columns on tablets/mobiles */
        gap: 60px;
    }
    
    .mission-heading {
        font-size: 2.5rem;
    }
    
    .image-cta-wrapper {
        min-height: 450px; /* Increase height for better visibility */
    }
    
    .floating-image-cta {
        width: 85%; 
        bottom: -20px;
        right: 50%;
        transform: translateX(50%); /* Center the floating card */
    }
    .section-heading-services {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
    .services-grid {
        gap: 30px;
        margin-bottom: 60px;
    }
    .service-card {
        padding: 30px;
    }
    .service-title {
        font-size: 1.5rem;
    }
    .testimonials-grid-container {
        /* Stack columns vertically */
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .stats-card {
        min-height: auto; /* Reset min-height on mobile */
    }
    .testimonials-heading {
        font-size: 2.5rem;
    }
    .testimonial-cards-grid {
        /* Two columns on tablet */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .process-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .process-heading {
        font-size: 2.5rem;
    }
    .process-steps-grid {
        /* Switch to 2 columns on tablets */
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 20px;
        gap: 40px 20px;
    }
    .process-step {
        border-right: none; 
    }
    .process-step:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 20px;
    }
    .process-step:nth-child(even) {
        padding-right: 0;
    }
    .pricing-heading {
        font-size: 3rem;
    }
    .price-card {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
    }
    .card-left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 20px;
    }
    .card-right {
        padding-left: 0;
        padding-top: 10px;
    }
    .plan-features {
        flex-direction: column;
    }
    .blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
    }
    .blog-heading {
        font-size: 2.5rem;
    }
    .article-image-container {
        height: 250px;
    }
    
}
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stack columns vertically on tablets */
        gap: 30px;
    }
    .lunexa-nav-link.active::after,
    .lunexa-nav-link:hover::after {
        content: none; /* Remove underline in mobile overlay */
    }
    .lunexa-mobile-toggle {
        display: block; /* Show hamburger button */
        order: 3;
    }
    
    .lunexa-main-nav {
        /* Default mobile state: full-screen overlay, hidden */
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-color);
        padding: 100px 30px;
        z-index: 100;
        overflow-y: auto;
    }
    
    /* Show menu when open class is toggled by JS */
    .lunexa-header-wrap.menu-open .lunexa-main-nav {
        display: flex;
    }
    
    .lunexa-nav-list {
        flex-direction: column; /* Stack links vertically */
        align-items: flex-start;
        gap: 25px;
        width: 100%;
    }
    
    /* Make mobile links larger */
    .lunexa-nav-link,
    .lunexa-dropdown-toggle {
        font-size: 1.5rem;
        padding: 10px 0;
        width: 100%;
    }

    /* Mobile Dropdown Overrides */
    .lunexa-dropdown-menu {
        position: static; 
        background: none; 
        border: none;
        box-shadow: none;
        padding: 0 0 0 20px; 
        display: none; 
        width: 100%;
    }
    /* Show submenu when parent is toggled open by JS */
    .lunexa-nav-dropdown.menu-open .lunexa-dropdown-menu {
        display: block; 
    }
    .lunexa-dropdown-menu li a {
        font-size: 1.2rem;
        padding: 8px 0;
    }
    
    /* Hide CTA on mobile screen to prevent clutter */
    .lunexa-header-cta {
        display: none;
    }
}
@media (max-width: 900px) {
    .video-cta-section {
        min-height: 400px;
        padding: 60px 0;
    }
    
    .video-title {
        font-size: 2.5rem;
        max-width: 85%; /* Use more width on mobile/tablet */
    }
    
    .video-description {
        font-size: 1rem;
        max-width: 90%;
    }
     .case-grid {
    grid-template-columns: 1fr;
  }

  .case-header {
    flex-direction: column;
  }
}



@media (max-width: 768px) {
    
     .pricing-section {
                padding: 60px 0;
            }
            .section-header h1 {
                font-size: 2.5rem;
            }
            .tab-btn {
                padding: 6px 15px;
                font-size: 0.9rem;
            }
            .tabs-nav {
                flex-wrap: wrap;
            }
            .strategy-card h2 {
                font-size: 2rem;
            }
            .pricing-card {
                padding: 30px;
            }
            .price-amount {
                font-size: 2rem;
            }
    .expertise-right-column img {
    width: 100%;
}
    .expertise-section{
        padding: 0;
    }
    .page-hero-banner {
        padding: 80px 0;
    }
    .page-title {
        font-size: 2.5rem;
    }
    .plans-grid {
        grid-template-columns: 1fr; /* Stack all into 1 column on mobile */
        gap: 30px;
    }
    .plan-cta-block {
        grid-column: span 1;
        padding-bottom: 30px;
    }
    .pricing-heading-wide {
        font-size: 2.5rem;
    }
    .process-header .header-left {
    max-width: 100%;
}
    .logo-slider-wrapper {
    display: flex
;
    flex-direction: column;
    align-items: center;
}
    .services-grid {
        grid-template-columns: 1fr; /* Stack cards into a single column */
    }
    .service-card {
        max-width: 500px; /* Limit card width on mobile for better readability */
        margin: 0 auto; /* Center the cards */
    }
    .sub-services-list {
        grid-template-columns: 1fr; /* Stack sub-services too */
    }
    .final-cta-text {
        font-size: 1rem;
    }
    .blog-section {
        padding: 60px 0;
    }
    .articles-grid {
        /* Stack articles vertically on mobile */
        grid-template-columns: 1fr;
    }
    .blog-heading {
        font-size: 2rem;
    }
    .article-image-container {
        height: 200px;
    }
    .article-content {
        padding: 20px;
    }
    .article-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .social-icon-box img {
    width: 60px;
    height: 40px;

}
    .contact-section {
        padding: 60px 0;
    }
    .contact-heading {
        font-size: 2.2rem;
    }
    .form-heading {
        font-size: 1.8rem;
    }
    .form-row {
        flex-direction: column; /* Stack form inputs vertically on small mobile */
        gap: 0;
    }
    .form-row input:first-child {
        margin-bottom: 15px;
    }
    .submit-btn {
        width: 100%; /* Full width button on mobile */
    }

    .footer-brand .footer-logo {
    justify-content: center;
}
    .footer-top {
        padding: 40px 0 30px 0;
    }
   .footer-grid {
        /* grid-template-columns: 1fr; */
        gap: 30px;
        display: flex
;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-brand h3 {
        font-size: 1.3rem;
    }
    .footer-contact-social {
        flex-direction: column;
        gap: 30px;
    }
    .footer-social h4 {
        margin-bottom: 15px;
    }
    .footer-bottom {
        padding: 20px 0;
    }
    .footer-bottom-content {
        text-align: center;
    }
    .expertise-image-bg {
        width: 100%; /* Image takes full width */
    }
.floating-cta-card {
        width: 100%;
        right: 50%;
        text-align: center;
        transform: translateX(50%);
        /* top: -30px; */
    }
    .expertise-left-column {
        min-height: 400px; /* Reduce overall height */
        padding-top: 50px; /* Space for the moved card */
    }
    .hero-section {
        padding: 50px 5%;
        min-height: auto;
    }
    .hero-title {
        font-size: 2.2rem; 
        margin-bottom: 20px;
    }
    .hero-description {
        max-width: 100%;
    }
    .video-cta-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .btn-video-play {
        margin-right: 0;
    }
    .cta-review-group {
        flex-wrap: wrap; 
        gap: 15px 30px;
    }
   .trust-bar-section {
        padding: 60px 0;
    }
    .trust-heading {
        font-size: 2rem;
    }
    .logo-slide {
        width: 130px; /* Slightly smaller logos on mobile */
    }
    /* our mission */

    .mission-section {
        padding: 60px 0;
    }
    .mission-heading {
        font-size: 2rem;
    }
    .feature-benefit-card {
        padding: 15px;
        flex-direction: column; /* Stack content within the card on small screens */
        text-align: center;
        gap: 10px;
    }
    .card-icon-wrapper {
        padding-top: 0;
    }
    .icon-placeholder {
        /*margin: 0 auto;*/
    }
    .floating-image-cta {
        width: 95%; 
        padding: 20px;
        bottom: -10px;
    }
    .video-title {
        font-size: 2rem;
    }
    
    .video-play-button {
        width: 60px;
        height: 60px;
    }
    .video-play-button svg {
        width: 20px;
        height: 20px;
    }

    /*  */
    .testimonials-section {
        padding: 60px 0;
    }
    .testimonials-heading {
        font-size: 2rem;
    }
    .testimonial-cards-grid {
        /* Single column on mobile */
        grid-template-columns: 1fr;
    }
    .stat-value {
        font-size: 2rem;
    }
    .quote-icon {
        font-size: 2rem;
    }.process-section {
        padding: 60px 0;
    }
    .process-heading {
        font-size: 2rem;
    }
    .process-steps-grid {
        /* Stack to 1 column on mobile */
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .process-step {
        border-right: none !important;
        padding-right: 0 !important;
    }
    .pricing-section {
        padding: 60px 0;
    }
    .pricing-heading {
        font-size: 2.5rem;
    }
    .plan-title {
        font-size: 2rem;
    }
    .pricing-cta-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .btn-cta {
        width: 100%;
        justify-content: space-between;
    }

}
@media (max-width: 500px) {
    .services-overview-section {
        padding: 60px 0;
    }
    .section-heading-services {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    .service-card {
        padding: 25px;
    }
    .service-title {
        font-size: 1.3rem;
    }
    .service-description {
        font-size: 0.9rem;
    }
    .final-cta-text {
        padding: 0 5%; /* Add horizontal padding for text on small screens */
    }
}