Services fixed · CSS html,
body {
    width: 100%;
    overflow-x: hidden !important;
    position: relative;
}


/* Ensure padding is calculated inwards, not outwards */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* --- SERVICES PAGE SPECIFIC STYLES --- */


/* 1. HERO & GENERAL Styles */

.serv-hero-video-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-center-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-mask {
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
}

.hero-title {
    font-family: 'Clash', sans-serif;
    font-size: 9rem;
    color: #fff;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 500;
    transform: translateY(110%);
}

.hero-title.italic {
    font-style: italic;
    color: #dadada;
}

.hero-desc-container {
    margin-top: 3rem;
    overflow: hidden;
}

.hero-desc {
    font-family: sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #fff;
    max-width: 45ch;
    transform: translateY(100%);
    font-weight: 300;
    opacity: 0.9;
}


/* Layout Fixes */


/* Marquee sits above Custom initially */

.fifthSection.service-marquee-fix {
    position: relative;
    top: 0 !important;
    margin-top: 0 !important;
    height: 40vh;
    background-color: #fff;
    /* High Z-Index to ensure it's visible over the sticky section coming in */
    z-index: 5;
}

footer.service-footer-fix {
    position: relative;
    top: 0 !important;
    margin-top: 0 !important;
    height: 70vh;
}

.headerLeft img.logo-img {
    filter: invert(1);
}

.serv-section {
    position: relative;
    width: 100vw;
    padding: 10vh 5vw;
    box-sizing: border-box;
    font-family: Clash, sans-serif;
}

.line-mask {
    overflow: hidden;
    padding-bottom: 0.2em;
}


/* =========================================================
   --- REDESIGNED ECOSYSTEM BENTO (FROSTED GLASS) ---
========================================================= */

.bento-section.glass-theme {
    background-color: #050a10;
    padding: 15vh 5vw 30vh 5vw;
    z-index: 10;
    position: relative;
    overflow: hidden;
}


/* --- BENTO BACKGROUND IMAGE --- */

.bento-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Assets/Img/Banner.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: grayscale(100%);
    z-index: 0;
    pointer-events: none;
}


/* Ambient Lights behind the glass */

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.glow-1 {
    width: 600px;
    height: 600px;
    background: rgba(76, 175, 80, 0.15);
    top: -10%;
    left: -10%;
}

.glow-2 {
    width: 500px;
    height: 500px;
    background: rgba(41, 128, 185, 0.15);
    bottom: -10%;
    right: -5%;
}

.section-header {
    margin-bottom: 5vh;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2vh;
    position: relative;
    z-index: 2;
}

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


/* --- UPDATED ECOSYSTEM GRID (SINGLE ROW) --- */

.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 55vh;
    gap: 2rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

.card-large {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.card-tall {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.card-medium {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}


/* The Frosted Glass Effect */

.bento-card.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    opacity: 0;
    transform: translateY(50px);
    color: #fff;
}

.bento-card.glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}


/* --- UNIFIED CARD CONTENT ARCHITECTURE --- */

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.card-text {
    position: relative;
    z-index: 5;
}

.card-text h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}


/* --- CARD 1: EMAIL AUTOMATION BARS --- */

.email-stats-row {
    display: flex;
    gap: 30px;
    margin-top: 1.5rem;
}

.estat {
    display: flex;
    flex-direction: column;
}

.estat-label {
    font-size: 1rem;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 5px;
}

.estat-val {
    font-size: 2.5rem;
    font-weight: 500;
    color: #4caf50;
    line-height: 1;
}

.visual-email-graph {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    padding: 0 3rem;
}

.email-bars-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.email-bar {
    flex: 1;
    height: 0%;
    background: linear-gradient(to top, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.8));
    border-radius: 4px 4px 0 0;
    transition: background 0.3s, filter 0.3s;
}

.email-bar:hover {
    background: #4caf50;
    filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.4));
}


/* --- CARD 2: SALES INTELLIGENCE AREA GRAPH --- */

.visual-sales-dashboard-tall {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: transparent !important;
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
}

.sales-badge-tall {
    position: absolute;
    top: 0px;
    left: 3rem;
    background: rgba(5, 10, 16, 0.8);
    border: 1px solid rgba(76, 175, 80, 0.2);
    color: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(10px);
    backdrop-filter: blur(10px);
}

.sb-label {
    font-size: 0.8rem;
    opacity: 0.7;
    text-transform: uppercase;
}

.sb-val {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4caf50;
}

.sales-svg-tall {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.chart-line-tall {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke: #4caf50 !important;
}

.chart-area-tall {
    opacity: 0;
}

.chart-dot-tall {
    transform: scale(0);
    transform-origin: 200px 10px;
}


/* --- CARD 3: SMART CRM DONUT --- */

.visual-crm {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
}

.donut-chart {
    position: relative;
    width: 180px;
    height: 180px;
}

.donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    /* MOVED THE GLOW HERE: Applying it to the whole SVG prevents the bounding box glitch */
    filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.4));
}

.donut-segment {
    /* SAFETY OVERRIDE: Forces the inside of the circle to stay empty */
    fill: transparent !important;
    stroke-dasharray: 0, 100;
    transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Removed the filter from here! */
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.8rem;
    font-weight: 500;
    color: #fff;
    opacity: 0;
}


/* Horizontal Scroll (Dark Theme) */


/* --- HIDE MOBILE UI ON DESKTOP --- */


/* Dots and mobile header are hidden by default — JS shows them only on touch devices */

.hs-mobile-header,
.hs-dots-container {
    display: none;
}

.horizontal-scroll-section {
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #091423;
    overflow: hidden;
    color: #fff;
    z-index: 20;
}

.hs-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: 500vw;
    height: 100vh;
}

.hs-panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

.hs-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 25vw 25vh;
}

.hs-content-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.hs-text-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

.hs-image-side {
    width: 35vw;
    min-width: 300px;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.hs-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hs-num {
    font-family: sans-serif;
    font-size: 1.2rem;
    color: #fff;
    display: block;
    margin-bottom: 2rem;
}

.hs-big-title {
    font-family: 'Clash', sans-serif;
    font-size: 7vw;
    font-weight: 500;
    color: #fff;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 3rem;
    letter-spacing: -0.03em;
}

.hs-subtitle-wrapper {
    max-width: 600px;
}

.hs-subtitle {
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    color: #ccc;
    margin: 0;
}


/* --- HOW WE OPERATE SECTION --- */

.operate-section {
    background-color: #091423;
    /* Matches your dark theme */
    padding: 15vh 5vw 10vh 5vw;
    position: relative;
    z-index: 20;
    /* Ensures it flows correctly after the horizontal scroll */
}

.operate-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8vh;
}

.operate-text {
    font-family: sans-serif;
    /* Clean font matching the reference */
    font-size: 2.5vw;
    line-height: 1.1;
    font-weight: 500;
    margin: 0;
    color: rgba(255, 255, 255, 0.15);
    /* Base text is faded */
    letter-spacing: -0.02em;
}

.operate-text .op-muted {
    color: #666;
    /* The intro phrase stays grey */
}


/* Image Grid */

.operate-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    width: 100%;
}

.op-img-wrapper {
    width: 100%;
    height: 70vh;
    /* Adjust height based on your preference */
    border-radius: 24px;
    /* Soft rounded corners like the reference */
    overflow: hidden;
    position: relative;
    background-color: #111;
}

.op-img {
    width: 100%;
    height: 120%;
    /* 20% taller for the parallax travel distance */
    object-fit: cover;
    transform: translateY(-10%);
    /* Starts slightly shifted up */
    will-change: transform;
}


/* --- ADAPTABILITY / WORKFLOW SECTION --- */

.custom-section {
    position: sticky;
    /* Locks the section to the screen */
    top: 0;
    /* Pins it exactly to the top */
    width: 100vw;
    height: 100vh;
    /* Forces it to exactly screen height so it pins perfectly */
    padding: 10vh 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #091423;
    color: #fff;
    z-index: 1;
    /* Drop the z-index so the next section can cover it */
    overflow: hidden;
}

.custom-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #091423;
    z-index: 0;
}


/* 2-Column Flex Layout */

.custom-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    gap: 5vw;
}


/* Left Side */

.custom-text-wrapper {
    flex: 1;
    /* Takes up 50% of the space */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Right Side */

.custom-visual {
    flex: 1;
    /* Takes up the other 50% */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


/* Text Styling */

.custom-tag {
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: #4caf50;
    margin-bottom: 2rem;
}

.custom-title {
    font-size: 6rem;
    line-height: 1;
    margin: 0 0 2rem 0;
    font-weight: 500;
    font-family: 'Clash', sans-serif;
}

.custom-desc {
    font-family: sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #ccc;
    max-width: 45ch;
    margin-bottom: 3rem;
}

.custom-btn {
    display: inline-block;
    padding: 1.2rem 3rem;
    border: 1px solid #fff;
    border-radius: 3rem;
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.custom-btn:hover {
    background-color: #fff;
    color: #000;
}


/* Abstract Visuals */


/* --- UPDATED: MASKED VIDEO LOGO (ROBUST FIX) --- */


/* --- FINAL WORKING CODE --- */

.custom-visual {
    /* Responsive width */
    width: 50vw;
    max-width: 800px;
    /* Auto height based on aspect ratio */
    height: auto;
    position: relative;
    z-index: 10;
    /* Above the background */
    /* Ensure GSAP doesn't hide it while we test */
    opacity: 1 !important;
    transform: none !important;
}

.logo-mask-wrapper {
    width: 100%;
    max-width: 2000px;
    /* 1. Dimensions of the test Apple Logo */
    aspect-ratio: 1200 / 1486;
    /* 2. Visuals */
    position: relative;
    display: block;
    /* Red background just to see the bounding box (Optional) */
    /* background-color: rgba(255, 0, 0, 0.2); */
    /* 3. THE TEST MASK (Remote URL) */
    -webkit-mask-image: url('Assets/Img/Logo-black.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('Assets/Img/Logo-black.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.custom-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


/* CTA */

.serv-cta-section {
    position: relative;
    z-index: 20;
    /* Higher than the sticky section's z-index: 1 */
    background-color: #fff;
    /* Solid background is mandatory to hide the section beneath */
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10vh 5vw 10vh 5vw;
    margin-top: 0;
}

.cta-bg-wrapper {
    width: 100%;
    height: 100%;
    background-color: #091423;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem;
    overflow: hidden;
    position: relative;
    transform: scale(0.9);
    opacity: 0;
}

.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.cta-title {
    font-family: 'Clash', sans-serif;
    font-size: 7vw;
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1;
}

.cta-text {
    font-family: sans-serif;
    font-size: 1.5rem;
    color: #ccc;
    max-width: 40ch;
    margin: 0;
}

.cta-btn {
    display: inline-block;
    background-color: #ffffff;
    color: #091423;
    font-family: sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1.2rem 3rem;
    border-radius: 3rem;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}


/* Initial state for the CTA inner elements */

.cta-title,
.cta-text,
.cta-btn-wrapper {
    opacity: 0;
    transform: translateY(40px);
}

footer {
    z-index: 5;
}


/* --- 1. MODAL BUTTON STYLES --- */

.read-more-btn {
    background: transparent;
    border: none;
    border-bottom: 1px solid #4caf50;
    color: #4caf50;
    font-family: sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 0 5px 0;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.read-more-btn:hover {
    opacity: 0.7;
}


/* --- 2. DESKTOP MODAL SIZING --- */

.glass-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 10, 16, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* THE FIX: Use visibility instead of pointer-events */
    visibility: hidden;
}

.glass-modal-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    /* UPDATED DESKTOP SIZES */
    width: 85vw;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
}

.glass-modal-content::-webkit-scrollbar {
    display: none;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9999;
    /* Forces the button above all other modal elements */
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

.modal-close-btn:hover {
    background: #4caf50;
    border-color: #4caf50;
}

.modal-image-wrapper {
    width: 100%;
    height: 250px;
    /* Increased from 300px */
}

.modal-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem 1.5rem 0 0;
}

.modal-text-wrapper {
    padding: 3rem 2.5rem;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}


/* =========================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 768px) {
    /* --- 0. HEADER FIX --- */
    /* Resets the right alignment and ensures it spans the exact screen width safely */
    header {
        left: 0;
        right: auto;
        width: 100vw;
        padding: 0 15px;
        /* Adds safe breathing room on the edges */
        box-sizing: border-box;
    }
    .headerLeft {
        margin-left: 0;
    }
    .headerRight {
        margin-right: 0;
    }
    /* --- 1. HERO SECTION --- */
    .hero-title {
        font-size: 15vw;
    }
    .hero-desc {
        font-size: 1.2rem;
        padding: 0 1rem;
    }
    /* --- 2. ECOSYSTEM BENTO GRID (MOBILE FIX) --- */
    .bento-section.glass-theme {
        padding: 5vh 5vw 10vh 5vw;
    }
    /* Stack the grid and remove fixed row heights */
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1.5rem;
    }
    .card-large,
    .card-tall,
    .card-medium {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    /* Adjust padding and give a baseline height */
    .bento-card.glass-card {
        padding: 2rem 1.5rem;
        min-height: 350px;
    }
    /* THE FIX: Force padding at the bottom of the text so the absolute charts never cover it */
    .card-large .card-content {
        padding-bottom: 120px;
    }
    .card-tall .card-content {
        padding-bottom: 180px;
    }
    /* Shrink Email Chart */
    .email-stats-row {
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 1rem;
    }
    .estat-val {
        font-size: 2rem;
    }
    .visual-email-graph {
        height: 100px;
        padding: 0 1.5rem;
    }
    /* Shrink Sales Chart */
    .visual-sales-dashboard-tall {
        height: 160px;
        /* Switch from 60% to a fixed pixel height on mobile */
    }
    .sales-badge-tall {
        left: 1.5rem;
        top: -15px;
        /* Pop it above the chart slightly */
        padding: 8px 12px;
    }
    .sb-val {
        font-size: 1.2rem;
    }
    /* Shrink Donut Chart */
    .visual-crm {
        margin-top: 1.5rem;
    }
    .donut-chart {
        width: 140px;
        height: 140px;
    }
    .donut-center {
        font-size: 2rem;
    }
    /* --- 3. HORIZONTAL SCROLL (NATIVE MOBILE SLIDER) --- */
    /* --- NATIVE SLIDER MOBILE UI --- */
    .hs-mobile-header {
        display: block;
        padding: 0 5vw 2rem 5vw;
    }
    .hs-mobile-header h2 {
        font-family: 'Clash', sans-serif;
        font-size: 3.5rem;
        color: #fff;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .hs-dots-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding-top: 2rem;
        width: 100%;
    }
    .hs-dot {
        width: 8px;
        height: 8px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .hs-dot.active {
        background-color: #4caf50;
        transform: scale(1.4);
    }
    .horizontal-scroll-section {
        height: auto;
        overflow: visible;
        background-color: #091423;
        padding: 5vh 0;
        /* Breathing room above and below */
    }
    /* Creates the native swipeable track */
    .hs-wrapper {
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* Snaps perfectly to each card */
        scrollbar-width: none;
        /* Hides scrollbar in Firefox */
        -webkit-overflow-scrolling: touch;
        /* Smooth iOS scrolling */
        padding: 0 5vw;
        /* Start padding */
        gap: 4vw;
        /* Space between the cards */
    }
    /* Hides scrollbar in Chrome/Safari */
    .hs-wrapper::-webkit-scrollbar {
        display: none;
    }
    .hs-panel {
        width: 85vw;
        /* 85vw lets the next card peek out, inviting the user to swipe */
        flex-shrink: 0;
        height: auto;
        scroll-snap-align: center;
        /* Snaps the card to the middle of the screen */
        border-radius: 1.5rem;
        background: #050a10;
        /* Gives the card a subtle background */
        border: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .hs-content-container {
        flex-direction: column-reverse;
        /* Image on top, text below */
        height: auto;
    }
    .hs-image-side {
        width: 100%;
        height: 30vh;
        /* Tighter image height */
    }
    .hs-text-side {
        width: 100%;
        padding: 2rem 1.5rem;
        justify-content: flex-start;
    }
    .hs-big-title {
        font-size: 10vw;
        /* Scaled down from 15vw */
        margin-bottom: 1rem;
    }
    .hs-subtitle {
        font-size: 1rem;
        line-height: 1.4;
    }
    .hs-num {
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }
    /* --- 4. HOW WE OPERATE --- */
    .operate-text {
        font-size: 5vw;
        text-align: center;
    }
    .operate-images {
        grid-template-columns: 1fr;
        gap: 4vw;
    }
    .op-img-wrapper {
        height: 50vh;
    }
    /* --- 5. WORKFLOW / ADAPTABILITY --- */
    .custom-section {
        position: relative;
        /* Crucial: Disables sticky so content doesn't clip off-screen */
        height: auto;
        min-height: 100vh;
        padding: 15vh 5vw;
    }
    .custom-content {
        flex-direction: column;
        text-align: center;
        gap: 4rem;
    }
    .custom-text-wrapper {
        align-items: center;
    }
    .custom-title {
        font-size: 3.5rem;
    }
    .custom-desc {
        max-width: 100%;
    }
    /* Override the 50vw desktop width */
    .custom-visual {
        width: 100vw !important;
        max-width: 100%;
    }
    .logo-mask-wrapper {
        max-width: 80vw;
        margin: 0 auto;
    }
    /* --- 6. CTA SECTION --- */
    .serv-cta-section {
        padding: 5vh 5vw;
        min-height: 60vh;
    }
    .cta-bg-wrapper {
        padding: 3rem 1.5rem;
    }
    .cta-title {
        font-size: 12vw;
    }
    /* Upscaled from 7vw */
    .cta-text {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .read-more-btn {
        display: none !important;
        /* Hide button on mobile */
    }
    .hs-panel {
        cursor: pointer;
        /* Indicate the whole card is clickable */
    }
    .glass-modal-content {
        width: 95vw;
        max-height: 90vh;
    }
    .modal-image-wrapper {
        height: 250px;
        /* Tighter image on mobile */
    }
    .modal-text-wrapper {
        padding: 2rem 1.5rem;
        /* Tighter padding */
    }
    #modal-title {
        font-size: 8vw !important;
        /* Scale title down */
        margin-bottom: 0.5rem !important;
    }
}

Write Compose Reply k Format: Essay Paragraph Email Idea Blog Post Outline Marketing Ads Comment Message Twitter Tone: 🙂 Formal 😉 Casual 🧐 Professional 🤩 Enthusiastic 🤓 Informational 😄 Funny Length: Short Medium Long Language: English Submit (enter) Powered by AITOPIA Chat Ask Search Write Image ChatFile Vision Full Page