:root {
            --saas-red: #cb4154;
            --saas-dark: #1a1a1a;
            --white: #ffffff;
            --transition: all 0.3s ease;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
       body { 
    font-family: 'Inter', sans-serif; /* Clean, modern, and highly readable */
    line-height: 1.6; 
    color: var(--saas-dark); 
    background-color: var(--white); 
    -webkit-font-smoothing: antialiased; /* Makes font look sharper */
}

    .container{
         max-width: 1350px !important;
        margin: 0 auto;
        padding: 0 20px;
    }

        /* --- Header & Navigation --- */
        header { 
            position: absolute; 
            top: 25px; 
            left: 0; 
            right: 0; 
            z-index: 1000; 
            display: flex; 
            justify-content: center; 
            padding: 0 15px;
        }
        nav { 
            background-color: var(--saas-red);
            width: 100%;
            max-width: 1140px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 35px;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        }
        .logo { color: var(--white); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; }
        .logo span { font-weight: 400; opacity: 0.9; }

        nav ul { display: flex; list-style: none; gap: 25px; align-items: center; }
        nav ul li a { 
            color: var(--white); 
            text-decoration: none; 
            font-size: 13px; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 0.5px;
            position: relative;
            padding-bottom: 5px;
            transition: var(--transition);
        }

        /* Active Underline Logic */
        nav ul li a.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--white);
        }

        .nav-cta { 
            background: var(--white); 
            color: var(--saas-red); 
            padding: 10px 22px; 
            border-radius: 25px; 
            font-size: 12px; 
            font-weight: 800; 
            text-transform: uppercase;
            text-decoration: none;
            transition: var(--transition);
        }
        .nav-cta:hover { background: #f0f0f0; transform: translateY(-1px); }

        .menu-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 10px;
    }

    .menu-toggle span {
        width: 25px;
        height: 3px;
        background-color: var(--white);
        border-radius: 3px;
        transition: var(--transition);
    }

    /* Dropdown Container */
nav ul li {
    position: relative; /* Anchor for the dropdown */
}

/* Dropdown Menu Styling */

/* Vertical Dropdown Correction */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #cb4154; /* Brick red */
    
    /* Set a fixed width to prevent horizontal stretching */
    width: 300px; 
    padding: 20px 0;
    border-radius: 20px; /* Pill-shaped container */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column; 
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1001;
}

/* Ensure each list item takes the full width */
.dropdown-menu li {
    display: block; 
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 15px 25px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none; /* Keeps natural casing */
}

/* Maintain hover state only on parent */
nav ul li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}


/* Show on Hover */
nav ul li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    /* transform: translateX(-50%) translateY(0); */
}

/* Dropdown Item Links */
.dropdown-menu li {
    width: 100%;
    padding: 0;
    margin: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 25px;
    color: #ffffff !important;
    text-transform: none; /* Matches natural casing in screenshot */
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: none !important; /* Remove the active underline for dropdown items */
}

.dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

    @media (max-width: 992px) {
        nav {
            border-radius: 30px; /* Slimmer for mobile */
            padding: 10px 20px;
        }
        
        .menu-toggle {
            display: flex; /* Show hamburger on mobile */
        }

        nav ul {
            display: none; /* Hide default list */
            flex-direction: column;
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            background-color: var(--saas-red);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            gap: 15px;
            text-align: center;
        }

        nav ul.show {
            display: flex; /* Script toggles this class */
        }

        .nav-cta {
            display: none; /* Hide original CTA on mobile bar */
        }

        /* Add CTA inside the mobile list */
        .mobile-cta {
            display: block !important;
            margin-top: 10px;
        }
    }

        /* --- Hero Slider Section --- */
        .hero { 
            position: relative; 
            height: 100vh; 
            min-height: 650px;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            text-align: center; 
            overflow: hidden; 
            background: #000;
        }

        /* Pure CSS Animated Zoom Background */
        .hero-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            animation: zoomBg 20s infinite alternate;
            z-index: 1;
            background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.5)), 
                              url("../images/hero-banner.png");
        }

        @keyframes zoomBg {
            from { transform: scale(1); }
            to { transform: scale(1.15); }
        }

        .hero-content { position: relative; z-index: 10; padding: 0 20px; max-width: 950px; }
        
        h1 { 
            color: var(--white); 
            font-size: clamp(2.2rem, 5vw, 4.5rem); 
            font-weight: 800; 
            line-height: 1.1; 
            margin-bottom: 25px;
        }

        .hero-description { 
            color: rgba(255,255,255,0.9); 
            font-size: 1.2rem; 
            margin-bottom: 40px; 
            max-width: 750px; 
            margin-left: auto; 
            margin-right: auto;
        }

        .hero-btns { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
        .btn { 
            padding: 18px 40px; 
            border-radius: 4px; 
            text-transform: uppercase; 
            font-weight: 700; 
            font-size: 14px; 
            text-decoration: none; 
            letter-spacing: 1px;
            transition: var(--transition);
        }
        .btn-main { background: var(--saas-red); color: var(--white); border: 2px solid var(--saas-red); }
        .btn-main:hover { background: #b03646; border-color: #b03646; }
        .btn-alt { background: transparent; color: var(--white); border: 2px solid var(--white); }
        .btn-alt:hover { background: var(--white); color: var(--saas-dark); }

        /* Mobile Adjustments */
        @media (max-width: 992px) {
            nav ul { display: none; } /* Standard for mobile; we can add a toggle later */
        }


    



   /* Services Section - Horizontal Layout */
    .services-section {
        background-color: #cb4254; /* Lightened Brand Red */
        padding: 80px 0 100px;
        color: var(--white);
    }

    .services-header {
        max-width: 1140px;
        margin: 0 auto 50px;
        padding: 0 20px;
    }

    .services-header h6 {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 10px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
    }

    .services-header h2 {
        font-size: 36px;
        font-weight: 800;
        line-height: 1.2;
    }

    /* Horizontal Container */
    .services-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

   /* Horizontal Container - Gap Removed */
    .services-flex-row {
        display: flex;
        flex-direction: row;
        gap: 0; /* This removes the space between boxes */
        justify-content: flex-start; /* Ensures they sit flush against each other */
        width: 100%;
        background-color: rgba(255, 255, 255, 0.1); /* Optional: thin line effect */
    }

    /* Service Box - Flush Design */
    .service-box {
        background-color: transparent; /* Inherits #d15666 from section */
        border: 1px solid rgba(255, 255, 255, 0.1); /* Creates a subtle divider line */
        padding: 45px;
        flex: 1; 
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        border-radius: 0; /* Removes rounded corners so boxes touch perfectly */
    }

    .service-box:hover {
        background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect without moving the box */
        transform: none; /* Removed translate to keep edges flush */
    }

    .service-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 25px;
        filter: brightness(0) invert(1);
    }

    .service-box h3 {
        font-size: 19px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .service-box p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 25px;
        opacity: 0.9;
    }

    .view-service {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--white);
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .view-service::after {
        content: "→";
    }

    /* Tablet/Mobile View - Stacks horizontally or allows scroll */
    @media (max-width: 992px) {
        .services-flex-row {
            flex-direction: column; /* Stacks on small screens for readability */
        }
        .service-box {
            margin-bottom: 10px;
        }
    }


    /* Projects Section Base Styles */
    .projects-header-container {
        background-color: var(--white); /* Matches the clean look before the grid */
        padding: 80px 0 40px; /* Space above and below the titles */
    }

    .projects-header-inner {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: left;
    }

    .projects-header-inner h6 {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 10px;
        font-weight: 600;
        color: var(--saas-red); /* Using brand red for the small header to pop */
    }

    .projects-header-inner h2 {
        font-size: 36px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--saas-dark);
        max-width: 700px;
    }
    .projects-section {
        background-color: var(--white); /* White background for any background outside the grid */
        padding: 0; /* Important: removes padding to ensure full bleed */
        color: var(--white); /* For text on hover overlay */
        margin-bottom: 40px;
    }

    /* --- CTA Button Container --- */
    .projects-cta-container {
        text-align: center;
        margin-top: 60px;
        padding: 0 20px;
    }

    .btn-view-all {
        display: inline-block;
        background-color: #cb4154; /* Brand Red */
        color: #ffffff;
        padding: 18px 45px;
        text-decoration: none;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
        border-radius: 4px;
        transition: background 0.3s ease, transform 0.2s ease;
    }

    .btn-view-all:hover {
        background-color: #1a1a1a; /* Dark hover state */
        transform: translateY(-3px);
    }

    /* Full-Bleed Grid Container */
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3x3 on Desktop */
        grid-gap: 0; /* CRITICAL: No space between project items */
        width: 100%; /* Spans full window width */
        max-width: none; /* Disables standard container max-width */
    }

    /* Individual Project Item */
    .project-item {
        position: relative; /* Setup for absolute hover overlay */
        overflow: hidden; /* Contains the image and overlay */
        aspect-ratio: 1 / 1; /* Forces square images like the reference */
    }

    /* Base Project Image */
    .project-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image fills the square without distortion */
        display: block;
        transition: transform 0.3s ease; /* Subtle zoom effect prep */
    }

    /* Hover Overlay with Color and Low Opacity */
    .project-overlay {
        position: absolute;
        inset: 0; /* Sets top, right, bottom, left to 0 */
        background-color: #cb4154; /* Main Brand Red color */
        opacity: 0; /* Hidden by default */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: opacity 0.3s ease; /* Clean fade-in effect */
        z-index: 2; /* Sits above the image */
    }

    /* Text on Hover */
    .project-category {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        margin-bottom: 5px;
        color: rgba(255, 255, 255, 0.7); /* Low opacity text like reference */
    }

    .project-name {
        font-size: 16px;
        font-weight: 800;
        text-transform: uppercase; /* Match reference style */
        line-height: 1.2;
    }

    /* Hover Interactions */
    .project-item:hover .project-overlay {
        opacity: 0.85; /* Shows color with low opacity on hover */
    }

    .project-item:hover img {
        transform: scale(1.05); /* Optional: slight zoom effect on image to add depth */
    }

    /* Responsive Adjustments */
    @media (max-width: 992px) {
        .projects-grid {
            grid-template-columns: repeat(2, 1fr); /* 2x2 on Tablets */
        }
    }

    @media (max-width: 600px) {
        .projects-grid {
            grid-template-columns: 1fr; /* 1-column stack on Mobile */
        }
    }


  /* Section & Container */
    .products-section {
        padding: 80px 0;
        background-color: #fcfcfc;
        overflow: hidden;
    }

    .container {
        max-width: 1350px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Header & Right-Aligned Nav */
    .products-header-area {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 50px;
    }

    .products-header-area h2 {
        font-size: 32px;
        font-weight: 800;
        text-transform: uppercase;
        color: #1a1a1a;
        margin: 0;
    }

    .slider-controls {
        display: flex;
        gap: 12px;
    }

    .control-btn {
        width: 45px;
        height: 45px;
        border: 1px solid #eee;
        background: white;
        color: #cb4154; /* Brand Red */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        transition: 0.3s;
    }

    .control-btn:hover {
        background: #cb4154;
        color: white;
        border-color: #cb4154;
    }

    /* Slider Track */
    .product-viewport {
        overflow: hidden;
    }

    .product-track {
        display: flex;
        gap: 20px; /* Space between products */
        transition: transform 0.5s ease-in-out;
    }

    /* 4 Products Per Row Logic */
    .product-card {
        min-width: calc((100% - 60px) / 4); 
        background: white;
        display: flex;
        flex-direction: column;
    }

    .product-img-box {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1 / 1; /* Square images for technical look */
    }

    .product-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    /* Hover Overlay */
    .product-img-overlay {
        position: absolute;
        inset: 0;
        background: rgba(203, 65, 84, 0.85); 
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: 0.3s ease;
    }

    .product-card:hover .product-img-overlay { opacity: 1; }

    .overlay-title {
        color: white;
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
    }

    /* Content below image */
    .product-content {
        padding: 20px 0;
    }

    .product-title {
        font-size: 16px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 8px;
        color: #1a1a1a;
    }

    .product-description {
        font-size: 13px;
        color: #666;
        line-height: 1.6;
    }

    /* Responsive adjustments */
    @media (max-width: 992px) {
        .product-card { min-width: calc((100% - 40px) / 3); } 
    }
    @media (max-width: 600px) {
        .product-card { min-width: 100%; } 
        .products-header-area { flex-direction: column; align-items: flex-start; gap: 20px; }
        .slider-controls { width: 100%; justify-content: flex-end; }
    }


    /* Why choose and testimonial */
    .dual-section {
        padding: 100px 0;
        background-color: #ffffff;
    }

    .dual-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        gap: 80px;
        flex-wrap: wrap;
    }

    .why-choose-us, .testimonials {
        flex: 1;
        min-width: 300px;
    }

    /* Common Headings */
    .sub-head {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #cb4154; /* Brand Red */
        font-weight: 600;
        margin-bottom: 15px;
        display: block;
    }

    .main-head {
        font-size: 32px;
        font-weight: 800;
        line-height: 1.2;
        color: #1a1a1a;
        margin-bottom: 40px;
    }

    /* Why Choose Us Points */
    .reason-item {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
    }

    .reason-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-top: 5px;
        filter: invert(36%) sepia(21%) font-weight(68%) saturate(1957%) hue-rotate(324deg) brightness(91%) contrast(85%); /* Matches #cb4154 */
    }

    .reason-content h4 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #1a1a1a;
    }

    .reason-content p {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
    }

    /* Testimonial Slider */
    .testimonial-viewport {
        overflow: hidden;
        position: relative;
    }

    .testimonial-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .testimonial-card {
        min-width: 100%;
        padding-right: 20px;
    }

    .quote-text {
        font-size: 16px;
        font-style: italic;
        color: #555;
        line-height: 1.8;
        margin-bottom: 30px;
        position: relative;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .user-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }

    .user-meta h5 {
        font-size: 16px;
        font-weight: 700;
        color: #cb4154;
        margin: 0;
    }

    .user-meta span {
        font-size: 12px;
        color: #888;
        text-transform: uppercase;
        font-weight: 600;
    }

    /* Slider Controls */
    .t-controls {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .t-btn {
        width: 35px;
        height: 35px;
        border: 1px solid #ddd;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .t-btn:hover {
        background: #cb4154;
        color: white;
        border-color: #cb4154;
    }

    @media (max-width: 768px) {
        .dual-container { gap: 50px; }
    }


   


     /* Section Branding */
    .problem-solution-section {
        background-color: #cb4154; /* Brand Red */
        padding: 100px 0;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
    }

    .container {
        max-width: 1350px; /* Matching your reduced container size */
        margin: 0 auto;
        padding: 0 20px;
    }

    .problem-solution-section h2 {
        font-size: 36px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 60px;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: -0.02em;
    }

    .ps-grid {
        display: flex;
        gap: 30px;
        align-items: stretch;
    }

    /* Box Styling */
    .ps-box {
        flex: 1;
        padding: 40px;
        background: rgba(255, 255, 255, 0.05); /* Very subtle white tint */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Low opacity white thin border */
        border-radius: 15px;
        transition: transform 0.3s ease;
    }

    .ps-box:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .ps-box h3 {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 30px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

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

    .ps-item {
        display: flex;
        gap: 15px;
        margin-bottom: 25px;
        align-items: flex-start;
    }

    .ps-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 18px;
        border-radius: 50%;
    }

    /* Red Cross Styling */
    .icon-cross {
        color: #ffffff;
        background: rgba(0, 0, 0, 0.2);
    }

    /* White Tick Styling */
    .icon-tick {
        color: #cb4154;
        background: #ffffff;
    }

    .ps-content h4 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .ps-content p {
        font-size: 14px;
        opacity: 0.9;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
        .ps-grid { flex-direction: column; }
        .problem-solution-section h2 { font-size: 28px; }
    }

    /* Section Container */
    .solutions-section {
        background-color: #cb4154; /* Brand Red */
        padding: 100px 0;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
    }

    .container {
        max-width: 1350px; /* Optimal width for 4 columns */
        margin: 0 auto; 
        padding: 0 20px;
    }

    .solutions-header {
        text-align: center;
        margin-bottom: 70px;
    }

    .solutions-header h2 {
        font-size: 38px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
        letter-spacing: -0.02em;
    }

    .solutions-header p {
        font-size: 18px;
        opacity: 0.9;
        max-width: 900px;
        margin: 0 auto;
        line-height: 1.5;
    }

    /* 4-Column Responsive Grid */
    .solutions-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* Solution Card Styling */
    .solution-card {
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        color: #1a1a1a;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .solution-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .card-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .card-content {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .card-content h3 {
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 15px;
        text-transform: uppercase;
        color: #cb4154;
        line-height: 1.3;
        min-height: 42px;
    }

    .card-content p {
        font-size: 13px;
        color: #555;
        margin-bottom: 20px;
        line-height: 1.5;
        min-height: 60px;
    }

    .key-services {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
    }

    .key-services li {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 6px;
        padding-left: 18px;
        position: relative;
        color: #333;
    }

    .key-services li::before {
        content: "•";
        color: #cb4154;
        position: absolute;
        left: 0;
    }

    /* Meta Details */
    .card-meta {
        font-size: 11px;
        text-transform: uppercase;
        color: #888;
        font-weight: 700;
        margin-bottom: 4px;
        display: block;
    }

    .card-actions {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }

    .btn-action {
        font-size: 10px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
        color: #cb4154;
    }

    .btn-secondary { color: #999; }

    @media (max-width: 1200px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 650px) { .solutions-grid { grid-template-columns: 1fr; } }


    /* Section Container */
    .comparison-section {
        background-color: #ffffff; /* White background for clean contrast */
        padding: 100px 0;
        font-family: 'Inter', sans-serif;
        color: #1a1a1a;
    }

    .container {
        max-width: 1350px; /* Matching your preferred narrow container */
        margin: 0 auto;
        padding: 0 20px;
    }

    .comparison-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .comparison-header h2 {
        font-size: 36px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
        letter-spacing: -0.02em;
    }

    .comparison-header p {
        font-size: 18px;
        color: #cb4154; /* Brand Red for subheading */
        font-weight: 600;
        max-width: 700px;
        margin: 0 auto;
    }

    /* Comparison Table Layout */
    .comparison-grid {
        display: flex;
        gap: 0;
        border: 1px solid #eee;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    }

    .comp-col {
        flex: 1;
        padding: 50px 40px;
    }

    /* Left Column: Multiple Vendors */
    .col-vendors {
        background-color: #f9f9f9;
        border-right: 1px solid #eee;
    }

    /* Right Column: SAAS Metal */
    .col-saas {
        background-color: #ffffff;
        position: relative;
    }

    /* Highlight border for the SAAS column */
    .col-saas::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border: 3px solid #cb4154;
        border-radius: 0 0 20px 0; /* Match container radius */
        pointer-events: none;
    }

    .comp-col h3 {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 35px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vendors-head { color: #888; }
    .saas-head { color: #cb4154; }

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

    .comp-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 22px;
        font-size: 15px;
        line-height: 1.4;
    }

    .comp-icon {
        flex-shrink: 0;
        font-size: 18px;
        font-weight: 900;
    }

    .icon-x { color: #ff4d4d; }
    .icon-check { color: #25d366; }

    .comp-text {
        font-weight: 500;
    }

    .saas-text {
        font-weight: 700;
        color: #1a1a1a;
    }

    /* Responsive Logic */
    @media (max-width: 768px) {
        .comparison-grid { flex-direction: column; }
        .col-vendors { border-right: none; border-bottom: 1px solid #eee; }
        .col-saas::after { border-radius: 0 0 20px 20px; }
        .comparison-header h2 { font-size: 28px; }
    }


    /* comparison */

    /* Section Container */
    .process-section {
        background-color: #ffffff;
        padding: 100px 0;
        font-family: 'Inter', sans-serif;
        color: #1a1a1a;
    }

    .container {
        max-width: 1350px; /* Matching your narrow container preference */
        margin: 0 auto;
        padding: 0 20px;
    }

    .process-header {
        text-align: center;
        margin-bottom: 80px;
    }

    .process-header h2 {
        font-size: 36px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin-bottom: 15px;
    }

    .process-header p {
        font-size: 16px;
        color: #cb4154; /* Brand Red */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Process Timeline Layout */
    .process-timeline {
        position: relative;
        padding-left: 40px;
    }

    /* Vertical Line */
    .process-timeline::before {
        content: "";
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #eee;
    }

    .process-step {
        position: relative;
        margin-bottom: 60px;
        padding-left: 30px;
    }

    /* Circle Marker */
    .process-step::before {
        content: "";
        position: absolute;
        left: -33px;
        top: 0;
        width: 16px;
        height: 16px;
        background: #cb4154;
        border: 4px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 2px #eee;
        z-index: 2;
    }

    .step-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
    }

    .step-header h3 {
        font-size: 20px;
        font-weight: 800;
        text-transform: uppercase;
        color: #1a1a1a;
    }

    .step-time {
        font-size: 12px;
        font-weight: 700;
        color: #cb4154;
        background: rgba(203, 65, 84, 0.1);
        padding: 4px 12px;
        border-radius: 20px;
    }

    .step-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        list-style: none;
    }

    .step-list li {
        font-size: 14px;
        color: #666;
        position: relative;
        padding-left: 20px;
    }

    .step-list li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: #cb4154;
        font-weight: 800;
    }

    /* Timeline Footer */
    .process-footer {
        text-align: center;
        margin-top: 40px;
        padding: 30px;
        background: #f9f9f9;
        border-radius: 12px;
    }

    .total-time {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 25px;
        display: block;
    }

    .btn-start {
        display: inline-block;
        background-color: #cb4154;
        color: #ffffff;
        padding: 18px 45px;
        text-decoration: none;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
        transition: 0.3s;
    }

    .btn-start:hover {
        background-color: #1a1a1a;
    }

    @media (max-width: 768px) {
        .step-list { grid-template-columns: 1fr; }
        .process-header h2 { font-size: 28px; }
        .step-header { flex-direction: column; align-items: flex-start; gap: 5px; }
    }


    /* Section Container */
    .industries-section {
        background-color: #ffffff;
        padding: 50px 0;
        font-family: 'Inter', sans-serif;
        color: #1a1a1a;
    }

    .container {
        max-width: 1350px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .industries-header {
        text-align: center;
        margin-bottom: 70px;
    }

    .industries-header h2 {
        font-size: 36px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    /* 3-Column Responsive Grid */
    .industry-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        margin-bottom: 60px;
    }

    /* Industry Card Styling */
    .industry-card {
        padding: 30px;
        border: 1px solid #eee;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

    .industry-card:hover {
        border-color: #cb4154; /* Brand Red */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transform: translateY(-5px);
    }

    .industry-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 20px;
    }

    .industry-card h3 {
        font-size: 19px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
        color: #1a1a1a;
    }

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

    .industry-list li {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        padding-left: 20px;
        position: relative;
    }

    .industry-list li::before {
        content: "•";
        color: #cb4154;
        position: absolute;
        left: 0;
        font-weight: 900;
    }

    /* CTA Section */
    .industry-cta {
        text-align: center;
    }

    .btn-industry {
        display: inline-block;
        background-color: #cb4154;
        color: #ffffff;
        padding: 18px 40px;
        text-decoration: none;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
        border-radius: 4px;
        transition: 0.3s;
    }

    .btn-industry:hover {
        background-color: #1a1a1a;
    }

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

    @media (max-width: 600px) {
        .industry-grid { grid-template-columns: 1fr; }
        .industries-header h2 { font-size: 28px; }
    }


    /* Section Container */
    .faq-section {
        background-color: #ffffff;
        padding: 20px 0;
        font-family: 'Inter', sans-serif;
        color: #1a1a1a;
    }

    .container {
        max-width: 1350px; /* Tighter container for better readability */
        margin: 0 auto;
        padding: 0 20px;
    }

    .faq-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .faq-header h2 {
        font-size: 36px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.02em;
    }

    /* Accordion Styling */
    .faq-item {
        border-bottom: 1px solid #eee;
        padding: 20px 0;
    }

    .faq-question {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        padding: 10px 0;
    }

    .faq-question h3 {
        font-size: 17px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.4;
        padding-right: 20px;
    }

    .faq-icon {
        color: #cb4154; /* Brand Red */
        font-size: 20px;
        font-weight: 800;
        transition: transform 0.3s ease;
    }

    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        color: #555;
        font-size: 15px;
        line-height: 1.7;
    }

    /* Active State (Can be toggled with JS) */
    .faq-item.active .faq-answer {
        max-height: 500px;
        padding-top: 15px;
    }

    .faq-item.active .faq-icon {
        transform: rotate(45deg);
    }

    /* Pricing Table inside FAQ */
    .price-table {
        width: 100%;
        margin-top: 15px;
        border-collapse: collapse;
        font-size: 14px;
    }

    .price-table td {
        padding: 8px 12px;
        border: 1px solid #eee;
    }

    .price-table tr td:first-child { font-weight: 700; background: #f9f9f9; }

    /* CTA Section */
    .faq-cta {
        margin-top: 50px;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .btn-faq {
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #1a1a1a;
        border-bottom: 2px solid #cb4154;
        padding-bottom: 5px;
        transition: 0.3s;
    }

    .btn-faq:hover { color: #cb4154; }

    @media (max-width: 600px) {
        .faq-header h2 { font-size: 28px; }
        .faq-cta { flex-direction: column; gap: 15px; }
    }

 /* Section Container */
    .testimonials-section {
        background-color: #f9f9f9; /* Subtle contrast */
        padding: 100px 0;
        font-family: 'Inter', sans-serif;
        color: #1a1a1a;
    }

    .container {
        max-width: 1350px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .testimonials-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .testimonials-header h2 {
        font-size: 36px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin-bottom: 10px;
    }

    /* 3-Column Grid */
    .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-bottom: 50px;
    }

    /* Testimonial Card Styling */
    .testimonial-card {
        background: #ffffff;
        padding: 40px 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        display: flex;
        flex-direction: column;
        border: 1px solid #eee;
        transition: transform 0.3s ease;
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
        border-color: #cb4154; /* Brand Red accent */
    }

    .client-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .client-photo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        background: #eee;
    }

    .client-info h4 {
        font-size: 15px;
        font-weight: 800;
        color: #1a1a1a;
    }

    .client-info span {
        font-size: 12px;
        color: #888;
        display: block;
    }

    .quote-text {
        font-size: 15px;
        line-height: 1.7;
        color: #555;
        font-style: italic;
        margin-bottom: 25px;
        flex-grow: 1;
        position: relative;
    }

    .quote-text::before {
        content: '"';
        font-size: 40px;
        color: rgba(203, 65, 84, 0.2);
        position: absolute;
        top: -10px;
        left: -15px;
        font-family: serif;
    }

    .project-tag {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #cb4154;
        letter-spacing: 1px;
        border-top: 1px solid #f0f0f0;
        padding-top: 15px;
    }

    /* CTA Button */
    .testimonial-cta {
        text-align: center;
    }

    .btn-reviews {
        display: inline-block;
        color: #1a1a1a;
        text-decoration: none;
        font-weight: 800;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 2px solid #cb4154;
        padding-bottom: 5px;
        transition: 0.3s;
    }

    .btn-reviews:hover {
        color: #cb4154;
    }

    @media (max-width: 992px) {
        .testimonial-grid { grid-template-columns: 1fr; }
        .testimonials-header h2 { font-size: 28px; }
    }

    /* --- Footer Base Styling --- */
    footer {
        background-color: #1a1a1a; /* Dark Industrial Charcoal */
        color: #ffffff;
        padding: 80px 0 0;
        font-family: 'Inter', sans-serif;
    }

    .footer-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1.2fr 1.5fr 1fr;
        gap: 40px;
        padding-bottom: 60px;
    }

    /* --- Column Specifics --- */
    .footer-col h4 {
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 25px;
        letter-spacing: 1px;
        color: #cb4154; /* Brand Red */
    }

    .footer-about .logo {
        font-size: 22px;
        font-weight: 800;
        color: #fff;
        text-decoration: none;
        display: block;
        margin-bottom: 20px;
    }

    .footer-about p {
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 20px;
    }

    .social-links {
        display: flex;
        gap: 12px;
    }

    .social-links a img {
        width: 18px;
        filter: brightness(0) invert(1);
        transition: 0.3s;
    }

    .social-links a:hover img { opacity: 0.7; }

    /* --- List Styling --- */
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

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

    .footer-links li a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: 0.3s;
    }

    .footer-links li a:hover {
        color: #cb4154;
        padding-left: 5px;
    }

    /* --- Contact Info Specifics --- */
    .contact-item {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 15px;
        display: flex;
        gap: 10px;
        line-height: 1.4;
    }

    .contact-item strong { color: #fff; }

    /* --- Copyright Bar --- */
    .copyright-bar {
        background-color: #111;
        padding: 25px 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .copyright-bar p {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.4);
    }

    /* --- Responsive Logic --- */
    @media (max-width: 1100px) {
        .footer-grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 768px) {
        .footer-grid { grid-template-columns: 1fr; gap: 40px; }
        .footer-col { text-align: center; }
        .social-links { justify-content: center; }
        .contact-item { justify-content: center; }
    }



        /* --- Section Styling --- */
    .final-cta-section {
        position: relative;
        padding: 100px 0;
        background: linear-gradient(rgba(20, 30, 48, 0.95), rgba(20, 30, 48, 0.95)), 
                    url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1920') center/cover fixed;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
    }

    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
    }

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

    .cta-header h2 {
        font-size: clamp(32px, 5vw, 42px);
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
        letter-spacing: -0.02em;
    }

    .cta-header p {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.8);
        max-width: 700px;
        margin: 0 auto;
    }

    /* --- Two Option Layout --- */
    .cta-options-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
        align-items: start;
    }

    /* Option 1: Urgent Contact */
    .urgent-box {
        background: rgba(203, 65, 84, 0.1);
        border: 2px dashed #cb4154; /* Brand Red */
        padding: 40px;
        border-radius: 15px;
        text-align: center;
    }

    .urgent-box h3 {
        color: #cb4154;
        font-size: 22px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .urgent-box p {
        font-size: 14px;
        margin-bottom: 25px;
        color: rgba(255,255,255,0.9);
    }

    .btn-call, .btn-wa {
        display: block;
        width: 100%;
        padding: 15px;
        margin-bottom: 12px;
        text-decoration: none;
        font-weight: 800;
        font-size: 13px;
        text-transform: uppercase;
        border-radius: 5px;
        transition: 0.3s;
    }

    .btn-call { background: #ffffff; color: #1a1a1a; }
    .btn-wa { background: #25d366; color: #ffffff; }
    .btn-wa:hover { background: #1da851; }

    /* Option 2: Standard Quote Form */
    .quote-form-container {
        background: #ffffff;
        padding: 40px;
        border-radius: 15px;
        color: #1a1a1a;
    }

    .quote-form-container h3 {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 25px;
        text-transform: uppercase;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .form-group { margin-bottom: 15px; }
    .full-width { grid-column: span 2; }

    .form-group label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #888;
    }

    .form-group input, .form-group select, .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: inherit;
        font-size: 14px;
    }

    .submit-quote {
        width: 100%;
        background-color: #cb4154;
        color: #ffffff;
        padding: 18px;
        border: none;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 14px;
        cursor: pointer;
        transition: 0.3s;
    }

    .submit-quote:hover { background-color: #1a1a1a; }

    /* Trust Line */
    .trust-line {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 25px;
        flex-wrap: wrap;
    }

    .trust-item {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #888;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .trust-item span { color: #cb4154; }

    @media (max-width: 992px) {
        .cta-options-grid { grid-template-columns: 1fr; }
        .quote-form-container { padding: 30px 20px; }
    }