/********** Adstrome AdTech CSS **********/
:root {
    --primary: #2563EB;
    /* Modern Tech Blue */
    --secondary: #1E293B;
    /* Slate Dark */
    --accent: #F59E0B;
    /* Conversion Amber */
    --dark: #0F172A;
    /* Deep Navy */
    --light: #F8FAFC;
    /* Clean Background */
    --success: #10B981;
    --text-body: #475569;
    --text-heading: #1E293B;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-body);
    background-color: var(--light);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    transition: .3s;
    text-decoration: none;
}

/********** Core Components **********/

/*** Buttons ***/
.btn-square {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.btn-lg-square {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.btn {
    font-weight: 600;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px 24px;
    border-radius: 8px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
    background: #1D4ED8;
    border-color: #1D4ED8;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.btn-secondary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
}

.btn-secondary:hover {
    background: var(--dark);
    transform: translateY(-2px);
}

.btn-light {
    background: #ffffff;
    color: var(--primary);
    border: 1px solid #e2e8f0;
}

.btn-light:hover {
    background: #f1f5f9;
    color: #1D4ED8;
}

.btn-accent {
    background-color: var(--accent);
    color: white;
    font-weight: 700;
}

.btn-accent:hover {
    background-color: #d97706;
    color: white;
    transform: translateY(-1px);
}


/*** Navbar ***/
.navbar {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.navbar .navbar-nav .nav-link {
    padding: 20px 15px;
    color: var(--text-heading);
    font-weight: 600;
    font-size: 15px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.dropdown-item {
    font-weight: 500;
    padding: 10px 20px;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: var(--primary);
}

/*** Hero Header ***/
.hero-header {
    background: var(--light);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: var(--gradient-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-body);
    margin-bottom: 2rem;
    max-width: 600px;
}

@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

/*** Cards & Glassmorphism ***/
.card-glass {
    background: white;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-glass:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.feature-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.card-glass:hover .feature-icon-box {
    background: var(--primary);
    color: white;
}

/*** Footer ***/
.footer {
    background: var(--dark) !important;
    color: #94a3b8;
}

.footer h3 {
    color: white;
    font-size: 1.25rem;
}

.footer .btn-link {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s;
}

.footer .btn-link:hover {
    color: white;
    padding-left: 5px;
}

.btn-social {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: 0.3s;
    margin-right: 10px;
}

.btn-social:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.copyright {
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright a {
    color: white;
}

.footer-menu a {
    color: #94a3b8;
    margin-left: 15px;
}

.footer-menu a:hover {
    color: white;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Utilities ***/
.bg-light-blue {
    background-color: #F0F9FF;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-heading);
}

.section-subtitle {
    display: inline-block;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

/*** Animation Helper ***/
.wow {
    visibility: hidden;
}

/*** Back to Top ***/
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.back-to-top:hover {
    background: var(--dark);
    color: white;
}

/*** Responsive Media Queries ***/

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        padding: 10px 15px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .card-glass {
        padding: 24px;
    }

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

    .footer .col-lg-3,
    .footer .col-md-6 {
        margin-bottom: 30px;
    }

    .footer .btn-link {
        text-align: center;
        padding-left: 0 !important;
    }

    .footer .social-links {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .hero-header {
        padding: 60px 0;
        text-align: center;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
        margin-bottom: 10px;
    }

    .back-to-top {
        width: auto;
        right: 20px;
        bottom: 20px;
    }

    .d-flex.animated {
        flex-direction: column;
        align-items: center;
    }

    .d-flex.animated .btn {
        margin-right: 0 !important;
        margin-bottom: 15px;
    }

    .card-glass {
        padding: 20px;
    }

    .feature-icon-box {
        margin: 0 auto 20px auto;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .display-5 {
        font-size: 2rem;
    }

    .copyright {
        text-align: center;
    }

    .copyright .col-md-6 {
        margin-bottom: 10px;
    }

    .footer-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-menu a {
        margin-left: 0;
    }
}

/* Accordion Fixes */
.accordion-item.card-glass {
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 16px !important;
    background: white;
    overflow: hidden;
    /* Ensure content doesn't spill out of rounded corners */
}

.accordion-item.card-glass:not(:first-of-type) {
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(37, 99, 235, 0.05);
    color: var(--primary);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(226, 232, 240, 0.8);
}

/* AdStrome Hero Logo Animation */
.hero-logo-container {
    perspective: 1200px;
    /* Increased perspective */
    height: 600px;
    /* Increased from 500px */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-svg {
    width: 100%;
    max-width: 650px;
    /* Increased from 550px */
    filter: drop-shadow(0 20px 40px rgba(37, 99, 235, 0.3));
    /* Stronger shadow */
    overflow: visible;
    /* Allow particles to float outside */
    animation: logo-float 8s ease-in-out infinite;
    /* Slower float */
}

.logo-path-a {
    fill: none;
    stroke: var(--primary);
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    /* Drawing first, then a very subtle flow */
    animation: draw-a 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards, line-flow 10s linear 2.5s infinite;
}

.logo-path-bar {
    fill: none;
    stroke: var(--accent);
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw-bar 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}

.logo-circle {
    fill: white;
    opacity: 0;
    animation: fade-in-circle 0.5s ease 2.5s forwards;
}

.logo-pulse {
    fill: var(--primary);
    opacity: 0;
    transform-origin: center;
    animation: pulse-dot 4s ease-in-out infinite 2.5s;
    /* Slower, calmer pulse */
}

@keyframes draw-a {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-bar {
    to {
        stroke-dashoffset: 0;
    }
}

/* Subtle data stream effect instead of broken lines */
@keyframes line-flow {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -2000;
        /* Smooth continuous flow without changing array */
    }
}

@keyframes fade-in-circle {
    to {
        opacity: 1;
    }
}

@keyframes logo-float {

    0%,
    100% {
        transform: translateY(0) rotateY(0deg) scale(1);
    }

    50% {
        transform: translateY(-20px) rotateY(5deg) scale(1.02);
        /* Reduced range for stability */
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(0.95);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.5;
    }
}

/* --- AdStrome "Ad" Glass Animation (V2) --- */
.ad-logo-path {
    fill: url(#ad-gradient);
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    opacity: 0;
    transform-origin: center;
    animation: fade-spread 1s ease-out forwards;
}

.ad-logo-a {
    animation-delay: 0.2s;
}

.ad-logo-d {
    animation-delay: 0.4s;
}

.ad-accent-bar {
    fill: var(--accent);
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
    opacity: 0;
    animation: slide-in-bar 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

/* Animated Gradient Defs would handle the shimmer inside the SVG */

@keyframes fade-spread {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slide-in-bar {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* --- AdStrome "Digital Banner" Animation (Ad View) --- */
.ad-banner-group {
    animation: banner-float 8s ease-in-out infinite;
    transform-origin: center;
    transform-style: preserve-3d;
}

.ad-banner-frame {
    fill: url(#ad-gradient);
    /* Brand Blue Gradient */
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw-frame 2s cubic-bezier(0.4, 0, 0.2, 1) forwards, frame-glow 4s ease-in-out infinite 2s;
    filter: drop-shadow(0 15px 30px rgba(37, 99, 235, 0.4));
}

.ad-banner-text {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 180px;
    fill: white;
    opacity: 0;
    animation: slide-up-text 0.8s ease-out 1.5s forwards;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

.ad-badge {
    fill: var(--accent);
    stroke: white;
    stroke-width: 1;
    opacity: 0;
    animation: fade-in-badge 0.5s ease 2.2s forwards, badge-pulse 2s infinite 3s;
}

.ad-scan-line {
    fill: url(#scan-gradient);
    opacity: 0.8;
    mix-blend-mode: overlay;
    animation: scan-pass 4s cubic-bezier(0.4, 0, 0.2, 1) infinite 3s;
}

@keyframes draw-frame {
    to {
        stroke-dashoffset: 0;
        fill: url(#ad-gradient);
    }
}

@keyframes slide-up-text {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fade-in-badge {
    to {
        opacity: 1;
    }
}

@keyframes banner-float {

    0%,
    100% {
        transform: translateY(0) rotateX(10deg) rotateY(-5deg);
    }

    50% {
        transform: translateY(-30px) rotateX(0deg) rotateY(5deg);
    }

    /* Larger 3D movement */
}

@keyframes scan-pass {
    0% {
        transform: translateX(-100%) skewX(-20deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(200%) skewX(-20deg);
        opacity: 0;
    }
}

@keyframes frame-glow {

    0%,
    100% {
        stroke: var(--primary);
        stroke-width: 4;
        filter: drop-shadow(0 0 15px rgba(37, 99, 235, 0.3));
    }

    50% {
        stroke: #60A5FA;
        stroke-width: 6;
        filter: drop-shadow(0 0 25px rgba(37, 99, 235, 0.6));
    }
}

@keyframes badge-pulse {

    0%,
    100% {
        fill: var(--accent);
        transform: scale(1);
    }

    50% {
        fill: #FBBF24;
        transform: scale(1.05);
    }
}

/* --- AdStrome "Fluid Data" Animation (V3) --- */

.ad-fluid-group {
    animation: banner-float 8s ease-in-out infinite;
    /* Reuse float */
    transform-origin: center;
}

.ad-fluid-text-outline {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 200px;
    fill: none;
    stroke: rgba(37, 99, 235, 0.3);
    stroke-width: 2;
    filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.2));
}

.ad-fluid-text-fill {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 200px;
    fill: url(#ad-gradient);
    /* Brand Blue */
    clip-path: url(#wave-clip);
}

.ad-fluid-wave {
    fill: white;
    opacity: 0.1;
    animation: wave-move 3s linear infinite;
    transform-origin: center;
}

/* Wave moves horizontally to simulate flow */
@keyframes wave-move {
    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0px);
    }
}

/* Vertical Fill Animation (handled by SVG animate tag or CSS translation of clip path content) */
/* In this implementation, we will move the wave *up* visually using translate on the wave group */

.wave-group {
    animation: wave-fill 4s ease-out forwards;
}

@keyframes wave-fill {
    0% {
        transform: translateY(150px);
    }

    100% {
        transform: translateY(0px);
    }
}

.ad-fluid-particles circle {
    fill: var(--accent);
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.8));
    animation: particle-float 3s ease-in-out infinite;
    opacity: 0;
}

.ad-fluid-particles circle:nth-child(1) {
    animation-delay: 2.5s;
    opacity: 1;
}

.ad-fluid-particles circle:nth-child(2) {
    animation-delay: 2.7s;
    opacity: 1;
}

.ad-fluid-particles circle:nth-child(3) {
    animation-delay: 2.9s;
    opacity: 1;
}

@keyframes particle-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* --- AdStrome "Click & Convert" Animation (V4 Refined) --- */

.ad-click-group {
    transform-origin: center;
}

.ad-card-bg {
    fill: url(#ad-gradient);
    filter: drop-shadow(0 20px 40px rgba(37, 99, 235, 0.4));
    transform-origin: center;
    animation: card-interact 6s ease-in-out infinite;
}

.ad-click-text {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 200px;
    /* Increased from 160px */
    fill: white;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
    pointer-events: none;
    transform-origin: center;
    animation: text-pop 6s ease-in-out infinite;
}

.mouse-cursor {
    fill: white;
    stroke: black;
    /* Real cursor has black border */
    stroke-width: 1.5;
    /* Slightly thicker for visibility */
    paint-order: stroke;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
    /* Realistic shadow */
    transform-origin: left top;
    animation: cursor-path 6s ease-in-out infinite;
    opacity: 0;
}

.click-ripple {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 4;
    opacity: 0;
    transform-origin: center;
    animation: ripple-burst 6s linear infinite;
}

.success-star {
    fill: var(--accent);
    transform-origin: center;
    opacity: 0;
}

/* 
   Timeline (6s Loop):
   0-1.5s: Cursor floats in from bottom-right (outside)
   1.5-2.0s: Cursor hovers/slows down over target
   2.0s: Click Start (Scale Down)
   2.2s: Click Release (Scale Up + Ripple + Stars)
   3.5s: Cursor moves away
   4-6s: Reset/Idle
*/

@keyframes card-interact {

    0%,
    33% {
        transform: scale(1);
    }

    35% {
        transform: scale(0.92);
    }

    /* Distinct Press Down */
    38% {
        transform: scale(1.05);
    }

    /* Elastic Bounce Back */
    45% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes text-pop {

    0%,
    35% {
        transform: scale(1);
    }

    38% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
    }

    /* Explode on click release */
    45% {
        transform: scale(1);
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
    }

    100% {
        transform: scale(1);
    }
}

@keyframes cursor-path {
    0% {
        opacity: 1;
        transform: translate(500px, 500px) scale(1);
    }

    /* Start far out */
    20% {
        opacity: 1;
        transform: translate(300px, 300px) scale(1);
    }

    /* Move closer */
    33% {
        transform: translate(130px, 120px) scale(1);
    }

    /* Arrive at button center (offset relative to group origin) */
    35% {
        transform: translate(130px, 120px) scale(0.9);
    }

    /* Subtle click shrink of cursor itself */
    38% {
        transform: translate(130px, 120px) scale(1);
    }

    /* Release */
    60% {
        opacity: 1;
        transform: translate(-100px, -50px);
    }

    /* Move away to top-left */
    65% {
        opacity: 0;
    }

    /* Fade out */
    100% {
        opacity: 0;
        transform: translate(500px, 500px);
    }

    /* Reset position invisible */
}

@keyframes ripple-burst {

    0%,
    36% {
        opacity: 0;
        transform: scale(0);
        stroke-width: 8;
    }

    38% {
        opacity: 1;
        transform: scale(0.4);
    }

    50% {
        opacity: 0;
        transform: scale(2.5);
        stroke-width: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Star particles styles - Synced to 38% (2.28s) click release */
.star-1 {
    animation: star-pop-1 6s ease-out infinite;
}

.star-2 {
    animation: star-pop-2 6s ease-out infinite;
}

.star-3 {
    animation: star-pop-3 6s ease-out infinite;
}

@keyframes star-pop-1 {

    0%,
    36% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }

    40% {
        opacity: 1;
        transform: translate(-90px, -90px) scale(1.5) rotate(45deg);
    }

    55% {
        opacity: 0;
        transform: translate(-130px, -130px) scale(0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes star-pop-2 {

    0%,
    36% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }

    40% {
        opacity: 1;
        transform: translate(90px, -70px) scale(1.2) rotate(-30deg);
    }

    55% {
        opacity: 0;
        transform: translate(130px, -100px) scale(0);
    }
}

@keyframes star-pop-3 {

    0%,
    36% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }

    40% {
        opacity: 1;
        transform: translate(10px, -110px) scale(1.8) rotate(15deg);
    }

    55% {
        opacity: 0;
        transform: translate(10px, -160px) scale(0);
    }

    100% {
        opacity: 0;
    }
}

/* Hero Logo Container - Scaled down and responsive */
.hero-logo-container {
    max-width: 500px;
    /* Reduced from 600px */
    max-height: 400px;
    /* Reduced from 500px */
    margin: 0 auto;
    position: relative;
    transform: scale(0.85);
    /* Scale down entire animation by 15% */
    transform-origin: center;
}

.hero-logo-container svg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .hero-logo-container {
        max-width: 100%;
        max-height: 350px;
        transform: scale(0.75);
        /* Smaller on tablets */
    }

    /* Reorder columns - animation on top, text below */
    .hero-header .container .row {
        display: flex !important;
        flex-direction: column-reverse !important;
        /* Reverses order of children */
    }

    .hero-header .col-lg-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .hero-header .col-lg-6.wow.fadeIn {
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .hero-logo-container {
        max-width: 100%;
        max-height: 300px;
        transform: scale(0.65);
        /* Even smaller on mobile */
        margin-bottom: 1.5rem;
    }

    .hero-header .col-lg-6.wow.fadeIn {
        margin-bottom: 1.5rem;
    }
}

/* Ensure parent flex container respects order */
.hero-header .container .row {
    display: flex;
    flex-wrap: wrap;
}

/* --- AdStrome "Ad to Customer" Conversion Animation (V5) --- */

.ad-conversion-group {
    transform-origin: center;
}

/* 1. The Real Ad Unit Group */
.ad-unit-v6 {
    transform-origin: center;
    animation: banner-lifecycle 6s ease-in-out infinite;
    /* Sped up from 8s to 6s */
    /* Optional hovering float for the whole ad before it's clicked */
}

.ad-text-v5 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 140px;
    fill: white;
    pointer-events: none;
    transform-origin: center;
    animation: banner-content-lifecycle 8s ease-in-out infinite;
}

/* 2. The Customer Object (Initially Hidden) */
.customer-symbol-group {
    transform-origin: center;
    /* 300 250 */
    opacity: 0;
    animation: customer-appear 6s ease-in-out infinite;
    /* Sped up from 8s to 6s */
}

.customer-body {
    fill: var(--primary);
    /* Deep Blue */
    stroke: white;
    stroke-width: 4;
}

.customer-head {
    fill: var(--primary);
    stroke: white;
    stroke-width: 4;
}

/* 3. The Cursor */
.mouse-cursor-v5 {
    fill: white;
    stroke: black;
    /* Real cursor has black border */
    stroke-width: 1.5;
    paint-order: stroke;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
    transform-origin: left top;
    animation: cursor-action-v6 6s ease-in-out infinite;
    opacity: 0;
}

/* 4. Effects */
.conversion-sparkle {
    transform-origin: center;
    animation: sparkle-burst 6s ease-out infinite;
    /* Sped up from 8s to 6s */
}

@keyframes banner-lifecycle {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    5%,
    25% {
        transform: scale(1.02);
        filter: drop-shadow(0 20px 40px rgba(37, 99, 235, 0.2));
    }

    /* Blink/Pulse */
    15% {
        transform: scale(1);
        filter: drop-shadow(0 10px 20px rgba(37, 99, 235, 0.15));
    }

    35% {
        transform: scale(1);
    }

    38% {
        transform: scale(0.95);
    }

    /* Click Press */
    40% {
        transform: scale(1.05);
        opacity: 1;
    }

    /* Pop before vanish */
    42% {
        transform: scale(0);
        opacity: 0;
    }

    /* Disappear */
    90% {
        transform: scale(0);
        opacity: 0;
    }

    /* Stay hidden while customers are shown */
    97% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes banner-content-lifecycle {

    0%,
    38% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 0;
        transform: scale(0);
    }

    /* Text vanishes faster */
    100% {
        opacity: 0;
    }
}

@keyframes customer-appear {

    0%,
    38% {
        opacity: 0;
        transform: scale(0);
    }

    /* Hidden until cursor clicks at 38% */
    40% {
        opacity: 0.3;
        transform: scale(0.5);
    }

    /* Gradual appearance - slower */
    43% {
        opacity: 1;
        transform: scale(1.2);
    }

    /* Settle to normal size */
    47% {
        transform: scale(1);
    }

    52% {
        transform: translateY(-10px);
    }

    /* Bounce 1 - slower */
    57% {
        transform: translateY(0);
    }

    62% {
        transform: translateY(-5px);
    }

    /* Bounce 2 - slower */
    67% {
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: scale(1);
    }

    /* Hold customers longer to show conversion */
    95% {
        opacity: 1;
        transform: scale(1);
    }

    97% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 0;
    }
}

/* Staggered customer appearances - all at 6s now */
.customer-1 {
    animation: customer-appear 6s ease-in-out infinite;
    animation-delay: 0.1s;
}

.customer-2 {
    animation: customer-appear 6s ease-in-out infinite;
    animation-delay: 0.2s;
}

.customer-3 {
    animation: customer-appear 6s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes cursor-action-v6 {
    0% {
        opacity: 0;
        transform: translate(600px, 600px);
    }

    20% {
        opacity: 1;
    }

    35% {
        transform: translate(440px, 340px);
    }

    /* Hover over larger 'Visit Site' Button */
    38% {
        transform: translate(440px, 340px) scale(0.9);
    }

    /* Click */
    45% {
        opacity: 1;
        transform: translate(440px, 340px) scale(1);
    }

    55% {
        opacity: 0;
        transform: translate(600px, 600px);
    }

    /* Move away & Hide */
    100% {
        opacity: 0;
        transform: translate(600px, 600px);
    }
}

@keyframes sparkle-burst {

    0%,
    40% {
        opacity: 0;
        transform: scale(0);
    }

    42% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 0;
        transform: scale(2) rotate(45deg);
    }

    100% {
        opacity: 0;
    }
}

```