/* ====================================== */
/*                   (0)                  */
/*               GLOBAL CSS               */
/*                                        */
/* ====================================== */


/* ====================================== */
/*              GLOBAL CSS               */
/* ====================================== */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Satoshi', sans-serif;
    color: #ffffff;
    /* background-color removed for animated gradient */
    overflow: auto;
    height: 100%;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
}

/* General styling for all sections to ensure spacing between them */
section {
    margin-bottom: 5vw; /* Adds spacing below each section */
}

/* Removes the bottom margin from the last section */
section:last-of-type {
    margin-bottom: 0;
}

/* ====================================== */
/*         HEADER STYLING GLOBAL         */
/* ====================================== */
h1 {
    font-size: 2.3vw;
    color: #FFFFFF;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin-top: 16px;
    margin-bottom: 10px;
    text-align: center;
    display: inline-block;
    transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out;
    backface-visibility: hidden;
}

h2 {
    font-size: 1.1vw;
    color: #9d9d9d;
    margin-top: 0px;
    text-align: center;
    display: inline-block;
    transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out;
    backface-visibility: hidden;
}






/* ====================================== */
/*          Manley Media Logo CSS         */
/* ====================================== */
#manley-logo-container {
    position: fixed;
    top: -0.20vw; /* Adjusted to move the logo closer to the top */
    left: 0.1vw; /* Horizontal position remains unchanged */
    display: flex;
    align-items: center;
    z-index: 1000; /* Ensure it stays above other elements */
}

#manley-logo {
    width: 3.9vw; /* Adjust size as needed */
    height: auto;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.7)); /* Add shadow around edges */
}

#manley-logo-container a {
    text-decoration: none; /* Remove underline from the link */
    display: flex; /* Keep the link as a flex container for consistency */
    align-items: center;
    color: inherit; /* Ensure color matches other elements */
}

/* ====================================== */
/*              MENU BAR CSS              */
/* ====================================== */
#menu-bar-container {
    position: fixed;
    top: 0.7vw; /* Default visible state */
    left: 4vw;
    display: flex;
    align-items: center;
    gap: 1.5vw;
    padding: 0.2vw 0.2vw;
    background-color: rgba(0, 0, 0, 0.3); /* darker semi-transparent background */
    backdrop-filter: blur(10px) brightness(0.75); /* blur with dimmer brightness */
    -webkit-backdrop-filter: blur(10px) brightness(0.75);
    border: 0.01vw solid rgba(255, 255, 255, 0.2);
    border-radius: 1vw;
    z-index: 1000;
    max-width: calc(100vw - 4vw); /* prevent overflow */
    transition: top 0.6s ease-in-out;
}

#menu-buttons {
    display: flex;
    gap: 0.2vw;
}

.nav-button {
    font-size: 0.7vw;
    padding: 0.38vw 0.8vw;
    color: #c7c7c7;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    font-family: 'Satoshi', sans-serif;
    border-radius: 1vw;
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.05vw rgba(255, 255, 255, 0.4);
    animation: fadeOutline 2s ease 2s forwards;
}

@keyframes fadeOutline {
    to {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.nav-button.active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 1vw;
}




/* ====================================== */
/*                CHATBOT BUTTON         */
/* ====================================== */
#chatbase-button {
    position: fixed; /* Fixed positioning for the button */
    bottom: 1vw; /* Adjust distance from the bottom */
    right: 1vw; /* Adjust distance from the right */
    width: 2.9vw;
    height: 2.9vw;
    background: #000000;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 1.7vw;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* High z-index to ensure visibility */
    transition: background 0.3s ease, transform 0.3s ease;
    border: 1px solid #2e2e2e;
    pointer-events: auto; /* Ensure the button is clickable */
}

/* Hover Effect */
#chatbase-button:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ====================================== */
/*            CHATBASE WINDOW            */
/* ====================================== */
#chatbase-window {
    position: fixed; /* Fixed positioning for the chat window */
    inset-block: 0; /* Center vertically */
    margin-block: auto; /* Ensures equal spacing above and below */
    right: 2dvw; /* Keeps it positioned to the right */
    width: 32vw;
    height: 28vw;
    background: white;
    border-radius: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.4s ease;
    transform: translateX(110%); /* Ensures it's off-screen by default */
    pointer-events: none; /* Prevents interaction when hidden */
    z-index: 998; /* Lower z-index than buttons */
}

/* Ensures Full Chat Window Visibility */
#chatbase-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ====================================== */
/*           THEME TOGGLE BUTTON          */
/* ====================================== */
#theme-toggle {
    position: fixed; /* Fixed positioning for theme toggle */
    bottom: 1vw; /* Distance from the bottom */
    left: 1vw; /* Distance from the left */
    width: 2.9vw;
    height: 2.9vw;
    border-radius: 50%;
    border: 1px solid #2e2e2e;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
    z-index: 9999; /* Ensure it's above other elements */
    opacity: 0;
    pointer-events: auto; /* Ensure the button is clickable */
}

#theme-toggle:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

#theme-toggle i {
    position: absolute;
    transition: opacity 0.6s ease, transform 0.6s ease;
    font-size: 1.5vw;
}

/* Light Mode / Dark Mode Icons */
[data-theme="dark"] .icon-moon {
    opacity: 1;
    transform: translateY(0) scale(1);
}
[data-theme="dark"] .icon-sun {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
}
[data-theme="light"] .icon-sun {
    opacity: 1;
    transform: translateY(0) scale(1);
}
[data-theme="light"] .icon-moon {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
}

/* ====================================== */
/*           LIGHT MODE STYLING          */
/* ====================================== */
[data-theme="light"] {
    /* Invert the whole page visually */
    filter: invert(1) hue-rotate(180deg);
    transition: filter 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

[data-theme="light"] .media-restore {
    filter: invert(1) hue-rotate(180deg);
    transition: filter 0.5s ease-in-out;
}

[data-theme="light"] .media-restore #main-video {
    filter: invert(1) hue-rotate(180deg) !important;
}


/* ====================================== */
/*           DARK MODE STYLING           */
/* ====================================== */
[data-theme="dark"] {
    transition: filter 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
























/* ====================================== */
/*                   (1)                  */
/*             STARTER SECTION            */
/*                                        */
/* ====================================== */




/* ====================================== */
/*              MAIN PAGE SECTION         */
/* ====================================== */
#main-page {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3.5vw; /* Optional: Space above the video */
    position: relative; /* Ensure proper stacking and positioning */
    z-index: 1; /* Maintain correct stacking context */
}

/* Wrapper to stack video and button vertically */
#main-video-wrapper {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center video and button */
    width: 90vw;
    max-width: 1590px;
}

/* ====================================== */
/*         MAIN VIDEO PLAY BUTTON         */
/* ====================================== */
#main-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5vw;
    height: 5vw;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    transition: opacity 0.4s ease;
}

#main-video-play-button i {
    font-size: 3vw;
    color: white;
    position: relative;
    left: 0.15vw;
}

/* Hidden state for fade out */
.hide-ui {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Fade text overlay */
#text-overlay.hide-ui {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
}

/* Fade gradient (background is on container) */
#main-video-container.fade-gradient {
    background: transparent;
    transition: background 0.6s ease;
}

/* ====================================== */
/*           MAIN VIDEO CONTAINER         */
/* ====================================== */
#main-video-container {
    position: relative; /* Required for absolute positioning of child elements */
    z-index: 1;
    width: 92vw;
    aspect-ratio: 2.1 / 1;
    background-color: #090909;
    border: 0.1vw solid #2e2e2e;
    background-size: 200% 200%;
    background-position: 75% 25%;
    border-radius: 1.5vw;
    overflow: hidden; /* Prevent overflow and small white spaces */
    box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.5);
}

/* Clickable Hitbox Overlay */
#main-video-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30; /* On top of video and play button */
    background: transparent;
    cursor: pointer;
}

/* Main video settings */
#main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.2vw;
    opacity: 1;
}

/* ====================================== */
/*         MAIN PAGE VIDEO UNTOUCHED      */
/* ====================================== */
#main-video-wrapper .media-restore {
    filter: unset !important; /* Ensures the video is not affected by the global filter inversion */
}

/* Ensure the video itself is also unaffected by any applied inversion or color change */
#main-video {
    filter: unset !important; /* Removes the filter from the video */
}

/* ====================================== */
/*         MAIN VIDEO AMBIENT GLOW        */
/* ====================================== */
#main-video-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 160%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    filter: blur(6vw);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#main-video-container.ambient-active::before {
    opacity: 1;
}




/* ====================================== */
/*          MAIN VIDEO LOADING SPINNER    */
/* ====================================== */
#video-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hidden by default, shown by JS while buffering */
    z-index: 40; /* Above video and play button */
    font-size: 3vw;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 1vw;
    border-radius: 50%;
    pointer-events: none;
}

#main-video.loaded {
    opacity: 1;
}

/* ====================================== */
/*              MAIN PAGE BUTTON          */
/* ====================================== */
#main-page-cta {
    margin-top: -0.1vw; /* Space between video and button */
    width: 20vw;
    aspect-ratio: 5.88 / 1;
    background: #000000;
    color: #ffffff;
    font-size: 1.1vw;
    font-family: 'Satoshi', sans-serif;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 0 0 2vw 2vw; /* Top corners: 0 (unrounded), bottom corners: 2vw */
    border: 0.1vw solid #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.7s ease, color 0.7s ease, border-color 0.7s ease;
    z-index: 15;
}

#main-page-cta:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}


/* ====================================== */
/*           MAIN PAGE TEXT OVERLAY       */
/* ====================================== */
#text-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0); /* Default: visible */
    width: 32vw;
    aspect-ratio: 5 / 1;
    padding: 0.5vw;
    margin-bottom: 1.5vw;
    background-color: #000000;
    border: 0.1vw solid #2e2e2e;
    border-radius: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 -0.8vw 2vw rgba(0, 0, 0, 0.5);
    z-index: 10;
    box-sizing: border-box;
    transition: transform 0.6s ease, opacity 0.6s ease; /* Enable sliding/fading */
}

/* Slide out when hidden */
#text-overlay.hide-ui {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
}

/* Header Text Styling */
#text-overlay h1 {
    font-size: 1.35vw;
    color: #ffffff;
    margin: 0 0 0.3vw 0;
    line-height: 1.3;
    font-family: 'Satoshi', sans-serif;
}

#text-overlay h2 {
    font-size: 0.97vw;
    color: #7d7d7d;
    margin: 0;
    line-height: 1.4;
    font-family: 'Satoshi', sans-serif;
}





























/* ====================================== */
/*                    (2)                 */
/*            EXPLAINER SECTION           */
/*                                        */
/* ====================================== */
/* ====================================== */
/*            BUSINESS MODEL SECTION      */
/* ====================================== */
#business-model {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5vw 3vw;
    background: linear-gradient(-45deg, #1a0033, #000033, #000022, #1a0044);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    position: relative;
    padding-bottom: 5vw;
    /* Adjust vertical scroll placement for smooth scroll */
    scroll-margin-top: -6vh; /* tweak this value as needed */
}

/* ====================================== */
/*            CONTENT WRAPPER             */
/* ====================================== */
.content-wrapper {
    display: grid;
    grid-template-columns: 53.5vw 35.7vw; /* Video + Widgets */
    column-gap: 1.5vw; /* Dynamically scaling gap */
    align-items: start;
}

/* ====================================== */
/*      VIDEO + CTA WRAPPER               */
/* ====================================== */
.video-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align video & CTA to the left */
    position: relative;
}

#video-placeholder {
    position: relative;
    width: 53.5vw;
    aspect-ratio: 3 / 2;
    background-color: #090909;
    border-radius: 1.5vw;
    overflow: hidden;
    box-shadow: 0px 1vw 2.5vw rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* ✅ Ensure video starts hidden but takes highest priority when loaded */
#video-placeholder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5vw;
    transition: opacity 0.8s ease-in-out;
    opacity: 0; /* Hidden until loaded */
    position: absolute; /* Stacks it properly */
    top: 0;
    left: 0;
    z-index: 3; /* ✅ Ensure video is above the loading text */
}

/* ====================================== */
/*     SHIMMER VIDEO LOADING EFFECT       */
/* ====================================== */
/* ✅ Loading Message (Now Text-Only) */
.loading-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2vw;
    font-weight: 600;
    color: #bfbfbf;
    text-align: center;
    white-space: nowrap;
    z-index: 0; /* ✅ Lower than video, so it gets covered */
    animation: textShimmer 1.6s infinite linear;
}

/* ✅ Shimmer Animation for Text */
@keyframes textShimmer {
    0% { color: rgba(191, 191, 191, 0.5); }
    50% { color: rgba(255, 255, 255, 1); }
    100% { color: rgba(191, 191, 191, 0.5); }
}

/* ✅ Video appears smoothly over the text when loaded */
.video-loaded video {
    opacity: 1;
    z-index: 4; /* ✅ Ensure it is ABOVE the loading text */
}


/* ====================================== */
/*         HOVER GROW & CENTER EFFECT     */
/* ====================================== */
.business-widgets {
    position: relative; /* Ensure children can move within this container */
}

/* ✅ Darken everything except the hovered widget */
.business-widgets::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0); /* Initially transparent */
    transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    z-index: 5; /* ✅ Below widgets but above background */
}

/* ✅ When a widget is hovered, darken everything ELSE */
.business-widgets:hover::before {
    background-color: rgba(0, 0, 0, 0.85); /* Darkens everything */
}

/* ====================================== */
/*         INDIVIDUAL WIDGET EFFECTS      */
/* ====================================== */
.widget {
    transition: transform 0.5s ease-in-out, translate 0.5s ease-in-out, filter 0.3s ease-in-out;
    position: relative;
    z-index: 6; /* ✅ Always above the dim effect */
}

/* ✅ Keep the hovered widget fully visible */
.widget:hover {
    transform: scale(1.45);
    z-index: 10;
    filter: brightness(1); /* Keep full brightness */
}

/* ✅ If ANY widget is hovered, dim the OTHER */
.business-widgets:hover .widget:not(:hover) {
    filter: brightness(0.2); /* Darkens unhovered widgets */
}

/* ✅ Prevent z-index from dropping too soon when shrinking */
.widget.shrinking {
    z-index: 10 !important;
}

/* ✅ Move widgets towards the center */
.widget-1:hover {
    translate: -20% 0;
}

.widget-2:hover {
    translate: -20% 0;
}

/* ====================================== */
/*            BUSINESS WIDGETS            */
/* ====================================== */
.business-widgets {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 1.3vw; /* Dynamically scaling gap between widgets */
    z-index: 5;
}

/* New Flex Container for Widget Content */
.widget-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* Shared Widget Header */
.widget-header {
    color: #7d7d7d;
    font-size: 0.9vw;
    margin: 0;
    text-align: left;
    font-family: 'Satoshi', sans-serif;
}

/* Shared Separator Line */
.separator-line {
    width: 100%;
    height: 0.064vw;  /* Keep it thin */
    background-color: #2e2e2e; /* Dark grey */
    margin: 0.5vw 0; /* Adds spacing above & below */
}

/* ====================================== */
/*      WIDGET 1: CLIENT TESTIMONIAL      */
/* ====================================== */
.widget-1 {
    width: 35.7vw;
    background-color: #090909;
    border: 0.064vw solid #2e2e2e;
    border-radius: 1vw;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: 'Libre Baskerville', serif;
    box-sizing: border-box;
    position: relative; /* ✅ Needed for layering */
}

/* ✅ Inner Container Holding Image & Text */
.testimonial-container {
    display: flex;
    align-items: center;
    width: 100%; /* ✅ Matches widget width */
    background-color: #141414; /* ✅ Matches styling */
    border-radius: 1vw; /* ✅ Soft rounded corners */
    border: 0.064vw solid #2e2e2e; /* ✅ Outline */
    position: relative;
}

/* ✅ Positions Image - Manually Adjustable */
.client-logo {
    width: 7.5vw; /* 🔥 Adjust width manually */
    height: 7.5vw; /* 🔥 Adjust height manually */
    border-radius: 1vw; /* 🔥 Adjust for perfect curve */
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible; /* 🔥 Allows image to overflow without disrupting layout */
    border: 0.064vw solid #2e2e2e; /* ✅ Keeps consistent border */
}

/* ✅ Image Inside - Manually Adjustable */
.client-logo img {
    width: 102.2%; /* 🔥 Adjust manually (increase to slightly overflow) */
    height: 102.2%; /* 🔥 Adjust manually (increase to slightly overflow) */
    object-fit: cover;
    border-radius: inherit; /* ✅ Ensures rounded corners match parent */
    position: relative;
    border: 0.064vw solid #2e2e2e; /* ✅ Keeps consistent border */
}

/* ✅ Text Wrapper - Ensure Proper Positioning */
.text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 🔥 Ensure it starts at the top */
    position: relative;
    margin-left: 1vw;
    padding-top: 0; /* 🔥 Remove any inherited padding */
}

/* ✅ Main Text (Quote) */
.widget-text {
    font-size: 1.2vw;
    margin-bottom: 1.2vw; /* 🔥 Increase bottom margin to add spacing */
    margin-top: 0vw;
    line-height: 1.4;
    text-align: left;
    font-family: 'Libre Baskerville', serif;
}

/* ✅ Source Text */
.widget-source {
    font-size: 0.7vw;
    color: #9d9d9d;
    text-align: left;
    margin-top: 0.5vw;
    font-family: 'Libre Baskerville', serif;
}






/* ====================================== */
/*       WIDGET 2: HEADER ONLY            */
/* ====================================== */
.widget-2 {
    width: 35.7vw;
    height: 22.35vw; /* ✅ Change this to a fixed height if needed */
    min-height: 15vw; /* ✅ Set a reasonable minimum height */
    max-height: 100%; /* ✅ Prevent unnecessary stretching */
    background-color: #090909;
    border: 0.064vw solid #2e2e2e;
    border-radius: 1vw;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: 'Satoshi', sans-serif;
    box-sizing: border-box;
    margin-bottom: 0vw; /* ✅ Remove any extra space below */
}

.widget-2 .widget-content {
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ====================================== */
/*       SECTION: VIDEO BENEFITS         */
/* ====================================== */
#video-benefits {
    display: flex;
    flex-direction: row; /* ✅ Forces left & right containers to be side-by-side */
    justify-content: space-between;
    align-items: stretch; /* ✅ Keeps both containers the same height */
    gap: 2vw; /* ✅ Ensures a clear gap */
    width: 35.7vw;
    margin: 0 auto;
    padding: 2vw;
    flex-wrap: nowrap; /* ✅ Prevents right-side from wrapping below */
}

/* ====================================== */
/*           WIDGET LAYOUT                */
/* ====================================== */
.widget-layout {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1vw;
    width: 100%;
    margin-bottom: 0vw; /* ✅ Prevent extra space below */
}

.right-side {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 1vw;
    align-items: stretch;
    height: auto; /* Allow manual control */
}

.right-top, 
.right-bottom {
    width: 100%; /* Match parent width */
    height: 8.4vw; /* ✅ Set fixed height */
    background-color: #141414;
    border-radius: 0.5vw;
    padding: 0 1.5vw; /* ✅ Side padding only */
    box-sizing: border-box;
    border: 0.064vw solid #2e2e2e;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ====================================== */
/*           LEFT CONTAINER              */
/* ====================================== */
.left-container {
    text-align: left;
    width: 50%;
    background-color: #141414;
    border-radius: 0.5vw;
    padding: 1.5vw; /* ✅ Now applies padding on all sides */
    box-sizing: border-box;
    border: 0.064vw solid #2e2e2e;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    flex-grow: 0;
    min-height: unset;
    margin-top: 0.4vw;
    gap: 1vw; /* ✅ Defines space *between* paragraphs only */
}

/* ✅ Removed: .container-header and .big-left-container-separator */

/* Text Content */
.container-text {
    font-size: 0.53vw;
    color: #7d7d7d;
    line-height: 1.5;
    text-align: left;
    margin: 0; /* ✅ Removes unwanted spacing above and below */
}

/* Source Styling */
.container-source {
    font-size: 0.44vw;
    color: #7d7d7d;
    font-style: italic;
    text-align: left;
    margin: 0; /* ✅ Removes default margin */
}


/* ====================================== */
/*          READING ANIMATION             */
/* ====================================== */
.container-text {
    display: inline-block;
    position: relative;
    color: #7d7d7d; /* Default text color */
}

/* Default word style */
.container-text span {
    color: #7d7d7d;
    transition: color 0.4s ease-in-out;
}

/* Main Highlight */
.reading-active {
    color: #ffffff !important; /* Brightest word */
}

/* Just Behind the Main Word */
.reading-mid {
    color: #d0d0d0 !important; /* Medium brightness */
}

/* A Little Further Behind */
.reading-fade {
    color: #a5a5a5 !important; /* Soft fade */
}

/* The Weakest Fade */
.reading-soft {
    color: #8a8a8a !important; /* Almost normal */
}

/* ====================================== */
/*          TOP RIGHT CONTAINER           */
/* ====================================== */
/* Right Top Container (Benefits with Icons) */
.right-top {
    justify-content: space-between; /* ✅ Ensures proper spacing inside */
    text-align: left;
    margin-top: 0.4vw;
}

/* Container to evenly distribute items between separators */
.benefits-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* ✅ Centers items between separators */
    height: 100%;
}

/* Individual Benefit Item */
.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.73vw;
    font-size: 0.45vw;
    color: #c7c7c7;
    width: 100%;
    position: relative;
    padding: 0.3vw 0;
    margin-left: -1vw; /* ✅ Adjust this value to move items left or right */
}

/* Icons Styling - Ensures Perfect Left Alignment */
.benefit-item i {
    width: 1.3vw;
    height: 1.3vw;
    font-size: 0.8vw;
    min-width: 1vw;
    min-height: 1vw;
    border-radius: 0.18vw;
    background-color: #2e2e2e;
    color: #c7c7c7;

    /* ✅ Aligns icons and text to the left */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

/* Edge-to-edge Separator Lines - Keep Original Position */
.benefit-item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -0.025vw; /* ✅ Small adjustment to prevent overlapping */
    left: -0.5vw; /* ✅ Ensures separator stays in place */
    right: -1.5vw; /* ✅ Ensures separator stays in place */
    width: calc(100% + 3vw); /* ✅ Ensures full edge-to-edge width */
    height: 0.04vw; /* ✅ Increase thickness slightly for uniformity */
    background-color: #2e2e2e;
}


/* ====================================== */
/*          BOTTOM RIGHT CONTAINER        */
/* ====================================== */

/* Stats container (bottom-right) */
.right-bottom {
    justify-content: flex-start;
    text-align: left;
    margin-top: 0vw; /* ✅ Remove unnecessary push-down */
}

/* Stats title (Header) */
.stats-title {
    font-size: 0.65vw; /* Smaller font size */
    color: #7d7d7d;
    text-align: center;
    width: 100%;
    margin-top: 0.6vw; /* Adjustable spacing from the top */
    margin-bottom: 0.6vw; /* Adjustable gap before the separator */
}

/* Separator line */
.stats-separator {
    width: 100%; /* Full width, edge to edge */
    height: 0.06vw;
    background-color: #2e2e2e;
    margin-top: 0.3vw; /* Adjustable */
    margin-bottom: 0.3vw; /* Adjustable */
}

/* Large stats number */
.stats-number {
    font-size: 4vw; /* Adjustable */
    font-weight: bold;
    color: #c9c9c9;
    text-align: center;
    margin-top: 1vw; /* Adjustable top spacing */
    margin-bottom: 1vw; /* Adjustable bottom spacing */
    line-height: 1.1; /* Ensures number is well-positioned */
}







/* ====================================== */
/*            BUSINESS MODEL CTA          */
/* ====================================== */
.cta-container {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Align CTA button to the right edge of video */
    margin-top: 1.6vw;
}

#explainer-cta {
    width: 17vw;
    aspect-ratio: 5 / 1;
    background: #000000;
    color: #ffffff;
    font-size: 1.1vw;
    font-family: 'Satoshi', sans-serif;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 30px;
    border: 0.064vw solid #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}

/* Hover effect */
#explainer-cta:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ====================================== */
/*            RESPONSIVENESS             */
/* ====================================== */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        row-gap: 4vw;
    }

    #video-placeholder,
    .business-widgets,
    .widget {
        width: 80vw;
    }

    #explainer-cta {
        width: 50vw;
    }
}






























/* ====================================== */
/*                    (3)                 */
/*          TESTIMONIAL SECTION           */
/*                                        */
/* ====================================== */

/* ====================================== */
/*              TESTIMONIAL SECTION CSS   */
/* ====================================== */

#testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, #1a0033, #000033, #000022, #1a0044);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    position: relative;
    padding: 2.2vw;
    scroll-margin-top: -6vh; /* tweak this value as needed */
}

/* ✅ FIX: WRAPPER ENSURING CTA & CONTROLS BELOW */
.carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ✅ FIX: Ensures carousel is contained properly */
.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 34.5vw;
    padding: 0 1.15vw;
    transition: transform 1s ease-in-out;
    z-index: 2;
}

/* ✅ FIX: Control buttons and CTA correctly placed */
.cta-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3vw;
    z-index: 10;
}

/* ✅ FIX: Ensure CTA and controls are clickable */
#testimonials-cta, .control-buttons {
    position: relative;
    z-index: 10;
}

/* ✅ VIDEO CONTAINERS: FIX FOR POSITIONING */
.video-container {
    position: absolute;
    width: 18.28vw;
    height: 32.5vw;
    border-radius: 0.9vw;
    overflow: hidden;
    border: 0.064vw solid #2e2e2e; /* ✅ Outline applied to full container */
    box-shadow: 0 0.24vw 0.72vw rgba(0, 0, 0, 0.5);
}

/* ✅ FIX: Ensure flipping inside each video container */
.video-container .flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
}

/* ✅ FIX: Flip effect */
.video-container.flipped .flip-card-inner {
    transform: rotateY(180deg);
}



/* ====================================== */
/*              CAROUSEL VIDEO CSS       */
/* ====================================== */
.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 34.5vw; /* 15% increase from 30vw */
    padding: 0 1.15vw; /* Slightly increased padding */
    margin-top: 2.5vw;
    transition: transform 1s ease-in-out;
    z-index: 2;
}

/* Video container styles */
.video-container {
    position: absolute;
    width: 18.28vw; /* 15% larger than 15.6vw */
    height: 32.5vw; /* 15% larger than 28vw */
    border-radius: 0.9vw;
    overflow: hidden;
    box-shadow: 0 0.24vw 0.72vw rgba(0, 0, 0, 0.5); /* Adjusted shadow */
    transform-origin: center center;
    filter: brightness(60%);
    transition: transform 1s ease, filter 1s ease, z-index 1s ease;
}

/* Videos inside the containers */
.video-container video {
    object-fit: contain;
    width: 100%;
    height: 100%;
    border-radius: 0.9vw;
}

.carousel-hitbox {
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 100%;
    z-index: 20;
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
}

/* Positioning and scaling for videos */
.video-container:nth-child(1) {
    transform: translateX(-16.1vw) rotate(-20deg) scale(0.69); /* 15% increase */
    filter: brightness(40%);
    z-index: 0;
}

.video-container:nth-child(2) {
    transform: translateX(-9.2vw) rotate(-10deg) scale(0.98); /* 15% increase */
    filter: brightness(80%);
    z-index: 1;
}

.video-container:nth-child(3) {
    transform: translateX(0%) rotate(0deg) scale(1.15); /* 15% increase */
    filter: brightness(100%);
    z-index: 3;
}

.video-container:nth-child(4) {
    transform: translateX(9.2vw) rotate(10deg) scale(0.98); /* 15% increase */
    filter: brightness(80%);
    z-index: 2;
}

.video-container:nth-child(5) {
    transform: translateX(16.1vw) rotate(20deg) scale(0.69); /* 15% increase */
    filter: brightness(40%);
    z-index: 0;
}

/* ====================================== */
/*           CAROUSEL VIDEO ANIMATION CSS */
/* ====================================== */
.video-container {
    transition: transform 1s ease, filter 1s ease, opacity 1s ease, z-index 1s ease;
}

.video-container.exiting {
    transform: translateX(16.1vw) rotate(20deg) scale(0);
    filter: brightness(0%);
    opacity: 0;
}

.video-container.entering {
    transform: translateX(-16.1vw) rotate(-20deg) scale(0);
    filter: brightness(0%);
    opacity: 0;
}

.video-container.entering-visible {
    transform: translateX(-16.1vw) rotate(-20deg) scale(0.69);
    filter: brightness(50%);
    opacity: 1;
    z-index: 1;
}

/* ====================================== */
/*           CENTER VIDEO STYLES         */
/* ====================================== */
.video-container.highlighted {
    transform: translateX(0%) rotate(0deg) scale(1.27); /* 15% increase from 1.1 */
    filter: brightness(100%);
    z-index: 4;
    border: 0.3vw solid transparent;
    animation: highlight 2s infinite alternate;
}

/* Gradient border animation */
@keyframes highlight {
    0% { border-color: #f6f2ce; }
    50% { border-color: #e2e9ff; }
    100% { border-color: #faffc5; }
}

/* ====================================== */
/*       RESPONSIVE DESIGN ADJUSTMENTS    */
/* ====================================== */
@media (max-width: 768px) {
    .video-container {
        width: 14.4vw; /* 15% larger than 12.5vw */
        height: 25.9vw; /* 15% larger */
    }

    .carousel {
        height: 27.6vw; /* Adjusted from 24vw */
    }
}

@media (max-width: 480px) {
    .video-container {
        width: 10.8vw; /* 15% larger than 9.4vw */
        height: 19.4vw; /* 15% larger */
    }

    .carousel {
        height: 20.5vw; /* Adjusted from 17.8vw */
    }
}




/* ====================================== */
/*      CTA & CONTROL BUTTONS LAYOUT      */
/* ====================================== */

.cta-wrapper {
    position: relative; /* Needed for absolute positioning of CTA */
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3vw;
}

/* Centered CTA Button */
#testimonials-cta {
    position: absolute; /* Absolutely centered */
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #ffffff;
    width: 17vw;
    aspect-ratio: 5 / 1;
    font-size: 1.1vw;
    font-family: 'Satoshi', sans-serif;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    border-radius: 30px;
    border: 0.064vw solid #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}

#testimonials-cta:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* Control Buttons */
.control-buttons {
    display: flex;
    align-items: center;
    gap: 1vw; /* Space between control buttons */
}

/* ✅ MANUAL GAP CONTROL */
.left-buttons {
    position: absolute;
    right: calc(50% + 9.5vw); /* Adjust value (e.g., 10vw, 8vw) to move closer/farther */
}

.right-buttons {
    position: absolute;
    left: calc(50% + 9.5vw); /* Adjust value (e.g., 10vw, 8vw) to move closer/farther */
}

/* Control Buttons (Flip, Play/Pause, Mute) */
#flip-button,
#play-pause-button,
#mute-button {
    width: 3.4vw;
    height: 3.4vw;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #7d7d7d;
    font-size: 1.6vw;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: 0.064vw solid #2e2e2e;
    box-sizing: border-box;
}

/* Hover Effect */
#flip-button:hover,
#play-pause-button:hover,
#mute-button:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

#flip-button i,
#play-pause-button i,
#mute-button i {
    font-size: 1.5vw; /* Reduce size slightly */
}






/* ====================================== */
/*         FADE & BLUR ANIMATION         */
/* ====================================== */

.fade-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Fade-out: Smoothly hide text */
.fade-out {
    animation: fadeOutBlur 0.5s ease-in-out forwards;
}

/* Fade-in: Smoothly reveal text */
.fade-in {
    animation: fadeInBlur 0.8s ease-in-out forwards;
}

/* Smooth fade-out & blur effect */
@keyframes fadeOutBlur {
    0% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        filter: blur(5px);
    }
}

/* Smooth fade-in & unblur effect */
@keyframes fadeInBlur {
    0% {
        opacity: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}


/* ====================================== */
/*          FLIP CARD STYLING            */
/* ====================================== */
.video-container {
    position: absolute;
    width: 18.28vw; /* Keep existing size */
    height: 32.5vw;
    border-radius: 0.9vw;
    overflow: hidden;
    box-shadow: 0 0.24vw 0.72vw rgba(0, 0, 0, 0.5);
    transform-origin: center center;
    filter: brightness(60%);
    transition: transform 1s ease, filter 1s ease, z-index 1s ease;
    perspective: 1500px; /* Enable 3D effect */
}

/* ✅ Ensure proper flipping inside each video container */
.video-container .flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
}

/* ✅ Flip effect applied when class is added */
.video-container.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* ✅ Front and Back Styling */
.video-container .flip-card-front,
.video-container .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.9vw;
    backface-visibility: hidden;
}

/* ✅ Video remains in front */
.video-container .flip-card-front {
    background-color: transparent;
}

/* ✅ Back side appears when flipped */
.video-container .flip-card-back {
    background-color: white;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2vw;
    color: black;
}

/* Hide videos when in Cards Mode */
.video-content.hidden-video {
    display: none !important; /* Prevents rendering */
    visibility: hidden;
    pointer-events: none; /* Disables interaction */
}


/* ✅ Smooth fade-in & fade-out animation */
.mute-button {
    transition: opacity 0.5s ease-in-out, visibility 0.5s linear;
    opacity: 1; /* Default: Visible */
    visibility: visible;
    pointer-events: auto; /* Ensure clickable */
}

/* ✅ Properly hides mute button when in card mode */
.mute-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents interactions */
}


/* ====================================== */
/*            TOOLTIP STYLING            */
/* ====================================== */
#flip-tooltip {
    position: absolute;
    bottom: 120%; /* Slightly above the button */
    left: 50%;
    transform: translateX(-50%);
    background-color: #141414; /* Dark background */
    color: #bfbfbf; /* Light gray text */
    padding: 10px 14px; /* Add padding for readability */
    border-radius: 8px; /* Rounded corners */
    font-size: 0.7vw;
    white-space: nowrap; /* Prevent text wrapping */
    border: 1px solid #2e2e2e; /* Thin outline */
    opacity: 0;
    visibility: hidden;
    z-index: 100000;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* ✅ Tooltip visible with **extra smooth fade-in** */
.tooltip-visible {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ✅ Tooltip hidden with **slower fade-out** */
.tooltip-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
}









/* =========================
   (A) CARD FRONT LAYOUT
   ========================= */
   .flip-card-front {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    background: #090909 !important;
    border-radius: 0.9vw;
    overflow: hidden;
    padding: 1.3vw;
    gap: 1vw; /* Ensures consistent vertical spacing */
    width: 100%;
    height: 100%; /* Ensure it takes full height of the container */
    box-sizing: border-box; /* Prevents extra width due to padding */
    text-align: center; /* Ensures text aligns properly */
}

/* =========================
   (A) HEADER (Company Name - Onboarding Clients)
   ========================= */
.client-onboarding .card-header {
    font-size: 1.6vw;
    font-weight: bold;
    font-family: "Libre Baskerville", serif;
    color: #ffffff;
    text-align: center;
    margin: 0; /* Ensure margin is set correctly */
    width: 100%; /* Make sure the header is centered */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   (B) SUBTITLE ("Optages")
   ========================= */
.client-onboarding .sub-header {
    font-size: 1vw;
    color: #7d7d7d;
    font-family: "Libre Baskerville", serif;
    text-align: center;
    width: 100%;
    margin: 0.5vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   (B) HEADER (Company Name)
   ========================= */
.card-header {
    font-size: 2.2vw; /* ✅ Correctly Scaled */
    font-weight: bold;
    font-family: "Libre Baskerville", serif;
    color: #ffffff; /* ✅ White text */
    text-align: center;
}

/* =========================
   (C) TOP CONTAINER (Quote & Author)
   ========================= */
   .top-container {
    height: 7.4vw;
    min-height: 7.4vw;
    max-height: 7.4vw;

    width: 15.7vw;
    min-width: 15.7vw;
    max-width: 15.7vw;

    background-color: #141414;
    border: 0.064vw solid #2e2e2e;
    border-radius: 0.55vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures even spacing */
    /* gap removed */
    padding: 0.46vw;
    box-sizing: border-box;
    margin: 0 auto;
}

.quote-text {
    font-size: 0.80vw;
    font-family: "Libre Baskerville", serif;
    color: #c7c7c7;
    line-height: 1.3;
    margin-top: auto; /* Centers it between the top and the separator */
    margin-bottom: 0.3vw; /* Adjusts spacing before separator */
    word-spacing: 0.35vw; /* Adjust as needed */
}

.quote-author {
    font-size: 0.55vw;
    font-family: "Libre Baskerville", serif;
    font-style: italic;
    color: #7d7d7d;
    margin-top: 0.3vw; /* Ensures proper spacing after separator */
    margin-bottom: auto; /* Centers it between separator and bottom */
}

.quote-divider {
    width: 80%;
    height: 0.045vw;
    background-color: #2e2e2e;
    margin: 0.46vw auto;
}

/* =========================
   (D) MIDDLE CONTAINERS (Videos & Days Together)
   ========================= */
   .middle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15.7vw;
    min-width: 15.7vw;
    max-width: 15.7vw;
    
    height: 7.4vw;
    min-height: 7.4vw;
    max-height: 7.4vw;

    gap: 0.91vw;
    flex-wrap: nowrap;
    margin: 0 auto;
}

/* Adjust stat-box width */
.stat-box {
    width: calc((15.7vw - 0.91vw) / 2);
    min-width: calc((15.7vw - 0.91vw) / 2);
    max-width: calc((15.7vw - 0.91vw) / 2);

    height: 7.4vw;
    min-height: 7.4vw;
    max-height: 7.4vw;
    
    background-color: #141414;
    border: 0.064vw solid #2e2e2e;
    border-radius: 0.55vw;
    padding: 0.46vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

/* Adjust text sizes */
.stat-title {
    font-size: 0.5vw;
    font-family: "Libre Baskerville", serif;
    color: #7d7d7d;
    text-transform: uppercase;
    margin-bottom: 0.36vw;
}
.stat-title::after {
    content: "";
    display: block;
    width: 100%; /* Ensures it spans the full width of the container */
    height: 0.045vw;
    background-color: #2e2e2e;
    margin: 0.36vw auto; /* Centers it horizontally */
}

.stat-number {
    font-size: 4vw;
    font-family: "Abril Fatface", serif;
    color: #c7c7c7;
    font-weight: bold;
}

/* =========================
   (E) BOTTOM CONTAINER (Results with Icons)
   ========================= */
   .bottom-container {
    height: 7.4vw;
    min-height: 7.4vw;
    max-height: 7.4vw;

    width: 15.7vw;
    min-width: 15.7vw;
    max-width: 15.7vw;

    background-color: #141414;
    border: 0.064vw solid #2e2e2e;
    border-radius: 0.55vw;
    display: flex;
    flex-direction: column;
    gap: 0.73vw;
    padding: 0.46vw;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Adjust icon and text sizes */
.stat-item {
    display: flex;
    align-items: center;
    gap: 0.73vw;
    font-size: 0.64vw;
    color: #c7c7c7;
    width: 100%;
    position: relative; /* Ensures positioning for the separator */
}

.stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -0.4vw; /* Centers it between text and icon */
    left: -0.5vw; /* Extends beyond padding */
    right: -0.5vw; /* Extends beyond padding */
    width: calc(100% + 1vw); /* Makes it slightly longer */
    height: 0.05vw;
    background-color: #2e2e2e;
}

/* Icons */
.stat-icon {
    width: 1.64vw;
    height: 1.64vw;
    font-size: 1.09vw;
    min-width: 1.64vw;
    min-height: 1.64vw;
    border-radius: 0.18vw;
    background-color: #2e2e2e;
    color: #c7c7c7;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   (F) BOTTOM INFORMATION LINE (Business Details)
   ========================= */
   .business-info {
    text-align: center;
    font-family: "Libre Baskerville", serif;
    margin-top: auto; /* ✅ Dynamically aligns equal spacing */
    margin-bottom: auto; /* ✅ Keeps balance with top spacing */
    line-height: 1.3;
}

.business-info .footer-title {
    font-size: 0.55vw; /* ✅ Matches .footer-title */
    color: #7d7d7d;
}

.business-info .footer-copyright {
    font-size: 0.45vw; /* ✅ Matches .footer-copyright */
    color: #7d7d7d;
};




/* =========================
   ONBOARDING CLIENTS STYLE
   ========================= */
.client-onboarding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #090909 !important; /* Apply the background color */
    border-radius: 0.9vw;
    padding: 1.3vw;
    gap: 1vw;
    width: 18.28vw; /* Ensure the width is set */
    height: 32.5vw; /* Ensure the height is set correctly */
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #2e2e2e;
    overflow: hidden;
    position: relative;
}

/* =========================
   (A) HEADER (Company Name - Onboarding Clients)
   ========================= */
   .client-onboarding .card-header {
    font-size: 1.2vw;
    font-weight: bold;
    font-family: "Libre Baskerville", serif;
    color: #ffffff;
    text-align: center;
    margin-bottom: -1vw; /* Ensure margin is set correctly */
    width: 100%; /* Make sure the header is centered */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   (B) SUBTITLE ("Optages")
   ========================= */
.client-onboarding .sub-header {
    font-size: 0.7vw;
    color: #7d7d7d;
    font-family: "Libre Baskerville", serif;
    text-align: center;
    width: 100%;
    margin: 0.2vw 0 0; /* Adjust the top margin to control the space between the header and subtitle */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   (C) BUSINESS INFORMATION (Onboarding Clients)
   ========================= */
.client-onboarding .business-info {
    text-align: center;
    font-family: "Libre Baskerville", serif;
    position: absolute;
    bottom: 0.3vw;
    width: 100%;
    padding: 0.5vw 0;
}

.client-onboarding .business-info .footer-title {
    font-size: 0.55vw;
    color: #7d7d7d;
}

.client-onboarding .business-info .footer-copyright {
    font-size: 0.45vw;
    color: #7d7d7d;
}



























/* ====================================== */
/*                    (4)                 */
/*                PACKS SECTION           */
/*                                        */
/* ====================================== */

/* ====================================== */
/*             PACKS CTA BUTTON           */
/* ====================================== */
#packs-cta {
    background: #000000;
    color: #ffffff;
    width: 17vw; /* Responsive width */
    aspect-ratio: 5 / 1; /* Height ~3.4vw */
    font-size: 1.1vw;
    font-family: 'Satoshi', sans-serif;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    border-radius: 30px;
    border: 0.064vw solid #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.7s ease, color 0.7s ease, border-color 0.7s ease;
    margin-top: 2vw;
    margin-bottom: -1.1vw;
}

#packs-cta:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ====================================== */
/*         PACK CONTAINER STYLING         */
/* ====================================== */
.pack {
    width: 20.4vw; /* +10% from 18.75vw */
    background-color: #141414;
    border-radius: 1.15vw; /* +10% from 1.04vw */
    padding: 1.15vw; /* +10% */
    text-align: center;
    transition: filter 0.8s ease, transform 0.5s ease, border-color 0.8s ease;
    overflow-y: auto;
    border: 0.055vw solid #2e2e2e; /* +10% */
}

.pack.expanded {
    filter: brightness(100%);
}

.pack .pack-details {
    opacity: 1;
    transform: none;
}

/* ====================================== */
/*            PACKS SECTION SPACING       */
/* ====================================== */
#packs-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.15vw; /* +10% */
    margin-top: 0;
    background: linear-gradient(-45deg, #1a0033, #000033, #000022, #1a0044);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    overflow: hidden;
}

#packs-section h2 {
    margin-top: 0.29vw; /* +10% from 0.26vw */
    margin-bottom: 2.29vw; /* +10% from 2.08vw */
}

.pack-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.72vw; /* +10% from 1.56vw */
}

/* ====================================== */
/*         PACK DETAILS STYLING           */
/* ====================================== */
.pack-details {
    display: flex;
    flex-direction: column;
    gap: 0.57vw; /* +10% from 0.52vw */
    width: 100%;
    opacity: 0;
    transform: translateY(1.15vw); /* +10% */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.pack:hover .pack-details {
    opacity: 1;
    transform: translateY(0);
}

/* ====================================== */
/*          PACK TEXT STYLING             */
/* ====================================== */
.pack h3 {
    font-size: 1.4vw; /* +10% from 1.04vw */
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 1.5vw; /* +10% */
    margin-top: 0.5vw;
}

.pack .pack-caption {
    font-size: 0.86vw; /* +10% from 0.78vw */
    color: #9d9d9d;
    margin-bottom: 1.15vw; /* +10% */
    line-height: 1.6;
    min-height: 2.86vw; /* +10% from 2.6vw */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ====================================== */
/*        SEPARATOR LINES (FIXED)         */
/* ====================================== */
.pack .separator {
    width: 100%;
    height: 0.055vw; /* +10% */
    background-color: #2e2e2e;
    margin: 0.86vw 0; /* +10% */
}

/* ====================================== */
/*      BULLET POINTS (GENERAL PACKS)     */
/* ====================================== */
.pack-details .detail {
    display: flex;
    align-items: center;
    gap: 0.57vw; /* +10% */
}

.pack-details .circle {
    width: 1.72vw; /* +10% */
    height: 1.72vw;
    border-radius: 50%;
    background-color: #141414;
    color: #ffffff;
    font-size: 0.8vw; /* +10% */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.11vw 0.29vw rgba(0, 0, 0, 0.5); /* +10% */
    border: 0.055vw solid #2e2e2e;
}

.pack-details .text {
    color: #ffffff;
    font-size: 0.8vw; /* +10% */
    line-height: 1.6;
    text-align: left;
    flex: 1;
}

/* ====================================== */
/*    SKRÆDDERSYET BULLET POINT COLORS    */
/* ====================================== */
#custom-pack {
    background-color: #101010;
}
#custom-pack h3,
#custom-pack .pack-caption,
#custom-pack .text {
    background: linear-gradient(135deg, #f6f2ce, #ffe2fd, #e2e9ff, #c5c5f8, #e9e2ff, #e2f2ff, #faffc5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#custom-pack .pack-details .detail:nth-child(1) .circle { color: #f6f2ce; }
#custom-pack .pack-details .detail:nth-child(2) .circle { color: #ffe2fd; }
#custom-pack .pack-details .detail:nth-child(3) .circle { color: #e2e9ff; }
#custom-pack .pack-details .detail:nth-child(4) .circle { color: #c5c5f8; }
#custom-pack .pack-details .detail:nth-child(5) .circle { color: #e9e2ff; }
#custom-pack .pack-details .detail:nth-child(6) .circle { color: #e2f2ff; }
#custom-pack .pack-details .detail:nth-child(7) .circle { color: #faffc5; }

/* ====================================== */
/*         PACK REVEAL ANIMATION          */
/* ====================================== */

/* Initial state: Dimmed, blurred, and positioned lower */
.pack {
    opacity: 0;
    filter: blur(1.15vw);
    transform: translateY(2vw);
    transition:
        opacity 1.2s ease-out,
        filter 1.2s ease-out,
        transform 1.2s ease-out;
}

/* Revealed state: Fully visible, no blur, no movement */
.pack.revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}


/* ====================================== */
/*          PRICE TAG (SHINE EFFECT)      */
/* ====================================== */
.pack .darkened-message {
    position: relative;
    font-size: 0.91vw;
    color: transparent; /* Text color hidden initially for shine effect */
    margin-top: 1.2vw;
    margin-bottom: 0vw;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.8s ease, color 0.5s ease 1.5s; /* Color turns white after animation ends */
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.2) 100%
    );
    background-size: 200% 100%;
    background-position: 150%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* On hover: reveal text and trigger shine */
.pack:hover .darkened-message {
    opacity: 1;
    animation: shine 1.5s ease forwards; /* Slower shine effect */
    color: #9d9d9d; /* Text turns fully white after shine completes */
}

/* Keyframes: Right-to-left shine */
@keyframes shine {
    to {
        background-position: -150%;
    }
}


/* ====================================== */
/*         PACK HOVER GLOW EFFECT         */
/* ====================================== */

.pack {
    opacity: 0.3;
    filter: blur(0.8vw);
    transform: translateY(1.5vw);
    transition:
        opacity 0.4s ease-out,
        filter 0.4s ease-out,
        transform 0.4s ease-out,
        box-shadow 0.4s ease-in-out;
    will-change: transform, filter, opacity, box-shadow;
}

/* Revealed state */
.pack.revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* 🔥 **Less Grow, More Instant Glow, Increased Brightness** */
.pack:hover {
    filter: brightness(1.3); /* ✅ More brightness */
    transform: translateY(-0.2vw) scale(1.02); /* ✅ Subtle grow effect */
    box-shadow: 0 0 1.2vw rgba(255, 255, 255, 0.5), 
                0 0 2vw rgba(255, 255, 255, 0.3); /* ✅ Slightly reduced glow */
    transition:
        filter 0.2s ease-in-out,
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out; /* ✅ Glow is now instant */
}
























/* ====================================== */
/*                    (5)                 */
/*                 CTA SECTION            */
/*                                        */
/* ====================================== */
/* ====================================== */
/*        CTA SECTION FIXES               */
/* ====================================== */

#cta-section {
    position: relative; /* Keep relative to its parent container */
    width: 100%;
    min-height: 100vh; /* Ensures it always fills the screen */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Attach to the top */
    text-align: center;
    overflow: hidden;
}

/* ====================================== */
/*        CTA HEADER CONTAINER UPDATED    */
/* ====================================== */
#cta-video-container {
    position: absolute;
    top: 0; /* Attach to the top of #spiral-container */
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 24vw;
    aspect-ratio: 6 / 1;
    padding: 1vw 2vw;

    margin-top: 1.6vw; /* Space from top edge */
    margin-bottom: 1vw; /* ✅ Added space between header and kontakt-container */

    background-color: rgba(0, 0, 0, 0.90); /* Semi-transparent black */
    border: 0.15vw solid #2e2e2e;
    border-radius: 1vw;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    text-align: center;
    box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.5);
    z-index: 10;
    box-sizing: border-box;

    animation: slideDown 1s ease-out forwards;
}

/* Keyframes: Slide Down from top */
@keyframes slideDown {
    0% {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Header Text Styling */
#cta-video-container h1 {
    font-size: 1.35vw; /* Responsive font size */
    color: #ffffff;
    margin: 0 0 0.3vw 0; /* Adjusted bottom margin */
    line-height: 1.3;
    font-family: 'Satoshi', sans-serif;
}

#cta-video-container h2 {
    font-size: 0.95vw; /* Responsive font size */
    color: #7d7d7d; /* Matches text color of main page header */
    margin: 0; /* Remove extra margins */
    line-height: 1.4;
    font-family: 'Satoshi', sans-serif;
}


/* ====================================== */
/*         FIX FOR THE BACKGROUND         */
/* ====================================== */
/* Ensure spiral container background is not affected by the filter inversion */
.no-filter {
    filter: unset !important; /* Removes the global invert filter from this element */
    background: linear-gradient(90deg, #ffa9f9, #fff7ad, #a9f2ff) !important; /* Apply gradient */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Ensure that the gradient remains unaffected by the filter */
#spiral-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 900px;
    height: 100%;
    z-index: 0;
    box-sizing: border-box;
    background: linear-gradient(90deg, #ffa9f9, #fff7ad, #a9f2ff);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-top: #2b2b2b 0.1vw solid;
    box-shadow: inset 0px 16px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



/* ====================================== */
/*         KONTAKT OS CONTAINER           */
/* ====================================== */
#kontakt-container {
    width: 17vw;
    height: 26vw;
    background-color: rgba(0, 0, 0, 0.9); /* Maintain opacity */
    border-radius: 1vw;
    border: 0.15vw solid #2e2e2e;
    padding: 1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.5);

    /* Centering inside #spiral-container */
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

#kontakt-container h1 {
    font-size: 1.5vw;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    margin-top: 0.3vw;
    text-align: center;
}
/* ====================================== */
/*        GENERAL SEPARATOR FIX           */
/* ====================================== */
.separator {
    width: 100%;
    height: 0.055vw; /* Reduced height by 25% */
    background-color: #2e2e2e;
    display: block;
}

.description-wrapper {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.description-wrapper .separator {
    width: 100%;
    max-width: 100%;
    height: 0.064vw; /* Reduced by 25% */
    background-color: #2e2e2e;
}

.bottom-separator {
    width: 100%;
    height: 0.064vw; /* Reduced height */
    background-color: #2e2e2e;
    margin-top: 0.75vw; /* Reduced margin-top by 25% */
    display: block;
    visibility: visible;
    position: relative;
    z-index: 10;
}

/* ====================================== */
/*        DESCRIPTION & SPACING          */
/* ====================================== */
.description {
    color: #7d7d7d;
    font-size: 0.9vw;
    line-height: 1.4; /* Slightly reduced line height */
    font-family: 'Satoshi', sans-serif;
    margin-top: 0.6vw; /* Reduced by 25% */
    margin-bottom: 0.6vw; /* Reduced by 25% */
}
/* ====================================== */
/*          OPTIONS SPACING              */
/* ====================================== */
.options {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0.75vw; /* Reduced margin above options */
}

/* ====================================== */
/*          BUTTON STYLING                */
/* ====================================== */
.option-btn, .chatbot-btn, .dark-option-btn {
    width: 100%;
    height: 2.7vw; /* Reduced height by 10% for better compactness */
    font-size: 0.85vw; /* Slightly smaller font */
    font-family: 'Satoshi', sans-serif;
    text-align: center;
    cursor: pointer;
    border-radius: 1vw;
    border: 0.1vw solid #2e2e2e;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Option 1: margin-bottom: 0.3vw */
.options button:nth-child(1) {
    margin-bottom: 0.6vw;
}

/* Option 2: margin-bottom: 0.6vw */
.options button:nth-child(2) {
    margin-bottom: 1.2vw;
}

/* Option 3: margin-bottom: 0.3vw */
.options button:nth-child(3) {
    margin-bottom: 0.6vw;
}

/* Option 4: No margin-bottom (last option) */
.options button:nth-child(4) {
    margin-bottom: 0;
}

/* Light buttons */
.option-btn, .chatbot-btn {
    background-color: #141414 !important;
    color: #ffffff;
}

/* Dark buttons */
.dark-option-btn {
    background-color: #000000 !important;
    color: #7d7d7d;
}

/* Hover Effects */
.option-btn:hover, .chatbot-btn:hover {
    background-color: #ffffff !important;
    color: #141414 !important;
    border-color: #ffffff !important;
}

.dark-option-btn:hover {
    background-color: #2e2e2e !important;
    color: #ffffff !important;
}
/* ====================================== */
/*          ANIMATION EFFECTS            */
/* ====================================== */
.copied {
    animation: fadeOut 1.5s ease-in-out forwards;
}

@keyframes fadeOut {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ====================================== */
/*           FOOTER STYLING              */
/* ====================================== */
.footer-text {
    text-align: center;
    font-family: 'Satoshi', sans-serif;
    margin-top: 0.5vw;
    margin-bottom: 0vw;
}

.footer-title {
    font-size: 0.65vw;
    color: #7d7d7d;
}

.footer-copyright {
    font-size: 0.5vw;
    color: #7d7d7d;
}









/* ===== Global Font & Scroll Behavior ===== */
html {
  scroll-behavior: smooth;
}

html, body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, div {
  font-family: 'Space Grotesk', sans-serif !important;
}


/* ===== Animated Background Gradient ===== */
body {
  background: linear-gradient(-45deg, #1a0033, #000033, #000022, #1a0044);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: #ffffff;
  font-family: 'Libre Baskerville', serif;
  margin: 0;
  padding: 0;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}