/* VA Landing Page - Hero Only with Scroll Animation */

/* ================== FONTS ================== */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/fonnts.com-BarlowCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/fonnts.com-BarlowCondensed-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/fonnts.com-BarlowCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/fonnts.com-BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/fonnts.com-BarlowCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/fonnts.com-BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('../fonts/fonnts.com-Roc_Grotesk_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('../fonts/fonnts.com-Roc_Grotesk_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('../fonts/fonnts.com-Roc_Grotesk_Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('../fonts/fonnts.com-Roc_Grotesk_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ================== VARIABLES ================== */
:root {
    --bg-default: #F3F1DE;
    --color-green: #80B29B;
    --color-orange: #DF7A5F;
    --color-dark: #1C1C1C;
    --color-dark-accent: #3D405B;
    --font-primary: 'Roc Grotesk', sans-serif;
    --font-secondary: 'Barlow Condensed', sans-serif;
    --container-width: 1400px;
}

/* ================== GLOBAL ================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: var(--bg-default);
    scroll-behavior: smooth;
    /* ✅ REMOVED: max-width and overflow-x - breaks sticky and scroll animations */
}

body {
    background-color: var(--bg-default);
    font-family: var(--font-secondary);
    color: var(--color-dark);
    /* ✅ REMOVED: overflow-x and max-width */
}

main {
    min-height: 100vh;
    /* ✅ REMOVED: overflow-x - breaks categories section */
}

/* ✅ ONLY apply overflow to sections that actually need it */
.intro-wrap,
.editorial-hero,
.features-section,
.testimonials-3d-carousel {
    overflow: hidden; /* ✅ Only on these specific sections */
}

/* ✅ Make sure containers don't exceed viewport */
.hero-content,
.features-container,
.testimonials-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* ✅ CRITICAL: Categories section must NOT have overflow restrictions */
.categories-magazine,
.magazine-container,
.magazine-categories,
.category-entry,
.category-info,
.nav-arrow-left,
.nav-arrow-right {
    max-width: none !important;
    overflow: visible !important; /* ✅ Allow horizontal scroll */
}


/* ================== HERO ================== */
.editorial-hero {
    min-height: 100vh;
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


/* ================== WRAPPER GRID BACKGROUND ================== */
.intro-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-default);
}

.intro-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(61,64,91,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,64,91,0.14) 1px, transparent 1px);
    background-size: 40px 40px;

    animation: gridMoveNW 30s linear infinite;
}

.intro-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(61,64,91,0.20) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.18;

    animation: dotsMoveNW 40s linear infinite;
}


/* ================== HERO CONTENT ================== */
.hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--container-width);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
    padding: 0 2rem;
}



/* ================== ANIMATIONS ================== */

/* TRUE NORTH-WEST MOVEMENT */
@keyframes gridMoveNW {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: -200px -200px;
    }
}

@keyframes dotsMoveNW {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: -120px -120px;
    }
}

/* ================== ACCESSIBILITY ================== */
@media (prefers-reduced-motion: reduce) {
    .intro-wrap::before,
    .intro-wrap::after {
        animation: none !important;
    }
}

/* Typography Utilities */
.text-green { color: var(--color-green); }
.text-orange { color: var(--color-orange); }
.text-dark { color: var(--color-dark); }
.bg-orange { background-color: var(--color-orange) !important; }

/* ========== SCROLL-TRIGGERED HERO LAYOUT ========== */

/* Default Hero Section */
.editorial-hero {
    background-color: transparent;
    padding: 0;
    padding-top: 100px;
    padding-bottom: 4rem; /* ✅ Add bottom padding for space */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible; /* ✅ Changed from hidden to visible */
}

body.scrolled .editorial-hero {
    padding-top: 5rem;
    padding-bottom: 4rem; /* ✅ Keep bottom padding */
    min-height: auto;
}


/* Hero Content Grid - ALWAYS 2 COLUMNS (just hide one initially) */
.hero-content {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 0 2rem;
    z-index: 1;
}



/* Hero Text - USE TRANSFORM FOR CENTERING */
.hero-text {
    grid-column: 1 / span 12;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translateX(0) scale(1);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* After Scroll - SLIDE LEFT USING TRANSFORM */
body.scrolled .hero-text {
    grid-column: 1 / span 7;
    text-align: left;
    align-items: flex-start;
    transform: translateX(-10%) scale(0.9);
    will-change: auto;
}

/* Sub-headline */
.sub-headline {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 2rem;
    display: block;
    transition: font-size 0.6s ease;
}

body.scrolled .sub-headline {
    font-size: 1.25rem;
}

/* Hero Title - USE TRANSFORM SCALE */
.display-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 2rem;
    text-align: center;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                text-align 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tracking-tight {
    letter-spacing: -0.05em;
    word-spacing: 0.2em;
}

/* After Scroll - SCALE DOWN */
body.scrolled .display-title {
    text-align: left;
    transform: scale(0.75);
    transform-origin: left center;
}

/* Hero Subtitle */
.hero-subtitle {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--color-dark);
    margin: 0 auto 3rem;
    max-width: 850px;
    font-weight: 300;
    text-align: center;
    letter-spacing: 1px;
    transition: font-size 0.6s ease,
                text-align 0.6s ease,
                margin 0.6s ease;
}

/* After Scroll */
body.scrolled .hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.7;
    margin-left: 0;
    margin-bottom: 2.5rem;
    max-width: 600px;
    text-align: left;
}

/* Hero CTA */
.hero-cta {
    margin-top: 2rem;
    text-align: center;
    transition: text-align 0.6s ease;
}

body.scrolled .hero-cta {
    text-align: left;
}

/* Button */
.btn-login {
    display: inline-block;
    padding: 1.25rem 3.5rem;
    background-color: var(--color-green); 
    color: white; 
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

body.scrolled .btn-login {
    padding: 1rem 3rem;
    font-size: 1.125rem;
}

.btn-login:hover {
    background-color: var(--color-orange); /* ✅ ADD THIS - Changes to orange on hover */
    color: white; /* ✅ Keep white text on hover */
    transform: translateY(-3px);
    box-shadow: 5px 5px 0px #F2CC8F;
}



.hero-image {
    grid-column: 1 / span 12;
    width: 100%;
    max-width: 600px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    opacity: 0;
    transform: translateX(0) scale(0.95);
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                grid-column 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}


/* HERO + FEATURES wrapper background */
@media (prefers-reduced-motion: reduce) {
    .intro-wrap::before,
    .intro-wrap::after {
        animation: none !important;
    }
}






/* ========== DECORATIVE LINES - CLEANED UP ========== */
.hero-divider {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: -100px; /* ✅ Changed from 0 to -100px to extend below */
    transform: translateX(-50%);
    width: 2px;
    pointer-events: none;
    opacity: var(--scroll-progress);
    transition: opacity 0.3s ease;
}


body.scrolled .hero-divider {
    opacity: 1;
}

.divider-vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 99.7%;  /* ✅ Changed from 109% to 99.7% */
    background-color: var(--color-dark);
}


.divider-horizontal {
    position: absolute;
    bottom: 0px;
    right: 0;
    transform: translateX(-50%);
    width: 100vw; /* ✅ Changed from calc(20vw + 800px) */
    max-width: calc(100vw - 40px); /* ✅ Never exceed viewport */
    height: 2px;
    background-color: var(--color-dark);
}

@media (max-width: 992px) {
  .divider-horizontal {
    display: none !important;
  }
}

/* ========== TASKMASTERS ANIMATION ========== */
.taskmasters {
    color: var(--color-orange);
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* Scrolling shine effect */
.taskmasters::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(243, 241, 222, 0.4) 50%,
        transparent 100%
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Alternative: Typing/reveal effect */
.taskmasters.typing {
    overflow: hidden;
    border-right: 3px solid var(--color-orange);
    white-space: nowrap;
    animation: typing 2s steps(12) 1s 1 normal both,
               blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* Pulse effect (use this if you want pulsing instead) */
.taskmasters.pulse {
    animation: pulse-orange 2s ease-in-out infinite;
}

@keyframes pulse-orange {
    0%, 100% {
        transform: scale(1);
        color: var(--color-orange);
    }
    50% {
        transform: scale(1.05);
        color: #DF7A5F;
        text-shadow: 0 0 20px rgba(223, 122, 95, 0.5);
    }
}



/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-divider {
        display: none;
    }
}

/* After Scroll - MOVE TO RIGHT COLUMN */
body.scrolled .hero-image {
    grid-column: 8 / span 5;
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* GRADIENT SHADOW - On .hero-image (not video-container!) */
.hero-image::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background: rgba(250, 55, 1, 0.4); /* ✅ ORANGE with 40% opacity in light mode */
    border: 2px solid var(--color-dark);
    z-index: 0;
}

/* ✅ DARK MODE: GREEN shadow */
body.dark-mode .hero-image::before {
    background: rgba(128, 178, 155, 0.5) !important; /* ✅ GREEN with 50% opacity */
}

.hero-image img {
    width: 100%;
    height: auto;
    border: 2px solid var(--color-dark);
}

/* Video Container Styling */
.video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--color-dark);
    overflow: hidden;
    background-color: var(--bg-default);
    z-index: 1;
}

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


/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1200px) {
    body.scrolled .hero-content {
        gap: 3rem;
    }
}

@media (max-width: 992px) {
    body.scrolled .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    body.scrolled .hero-text,
    body.scrolled .hero-image {
        grid-column: 1 / -1;
    }
    
    body.scrolled .hero-text {
        padding-right: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    body.scrolled .display-title {
        text-align: center;
    }
    
    body.scrolled .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    body.scrolled .hero-cta {
        text-align: center;
    }
}
@media (max-width: 768px) {
    body.scrolled .editorial-hero {
        padding: 4rem 1rem 3rem;
    }
    
    .display-title {
        font-size: 3rem;
    }
    
    body.scrolled .display-title {
        font-size: 2.25rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    /* Gradient shadow - smaller on mobile */
    .hero-image::before {
        top: 5px;
        left: 5px;
       right: 5px;
        bottom: 5px;
    }
}


@media (max-width: 480px) {
    .display-title {
        font-size: 2.5rem;
    }
    
    body.scrolled .display-title {
        font-size: 2rem;
    }
    
    .sub-headline {
        font-size: 1.2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn-login {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }
}




/* FIXED: Use background-position instead of transform */
@keyframes washFloatBG {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% -20%;
    }
}

/* Disable animations for accessibility */
@media (prefers-reduced-motion: reduce) {
    .editorial-hero,
    .editorial-hero::before,
    .editorial-hero::after {
        animation: none !important;
    }
}




/* ========== FEATURES SECTION - CARD STYLE ========== */
.features-section {
  background-color: transparent !important; /* ✅ Changed from var(--bg-default) */
  padding: 3rem 2rem;
  margin-top: -2rem;
  padding-top: 8rem;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-dark);
}



/* ✅ Add responsive adjustments */
@media (max-width: 1200px) {
    .features-section {
        margin-top: 0; /* ✅ Remove overlap on smaller screens */
        padding-top: 3rem;
    }
}

@media (max-width: 768px) {
    .features-section {
        margin-top: 0;
        padding-top: 2rem;
    }
}


/* Grid animation layers */
.features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(61,64,91,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,64,91,0.14) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMoveNW 30s linear infinite;
}

.features-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(61,64,91,0.20) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.18;
    animation: dotsMoveNW 40s linear infinite;
}

body.scrolled .features-section {
    opacity: 1;
    pointer-events: auto;
}

/* ✅ CARD GRID WITH GAP */
.features-container {
    max-width: 1550px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
    position: relative;
    z-index: 1;
}



/* ✅ ACTUAL CARD STYLE */
.feature-item {
    text-align: left;
    position: relative;
    padding: 2rem 1.5rem;
    background-color: var(--color-open-tab); /* Same as background for clean look */
    border: 2px solid var(--color-night-shift); /* ✅ Solid border */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    z-index: 2; /* ✅ Ensures card sits above grid */
    isolation: isolate;
}

/* ✅ Remove all dividers */
.feature-item::after {
    display: none !important;
}

/* ✅ Card Hover Effect */
.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 0px var(--color-orange);
}

.feature-hero-card-title {
    font-family: var(--font-primary);
    font-size: 1.2rem !important;  
    font-weight: 700;
    text-transform: uppercase;
    color: #3D405B !important;  
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}


.feature-hero-card-text {
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-dark) !important;
    margin: 0;
    line-height: 1.4;
    font-weight: 300;
    position: relative;
    z-index: 1;
}


/* ========== RESPONSIVE FOR FEATURES ========== */
@media (max-width: 992px) {
    .features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .features-section {
        padding: 2rem 1.5rem;
    }
    
    .features-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feature-item {
        padding: 1.5rem 1.25rem;
    }
    
    .feature-hero-card-title {
        font-size: 1.35rem;
    }
    
    .feature-hero-card-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .features-section {
        padding: 1.5rem 1rem;
    }
    
    .features-container {
        gap: 1rem;
    }
    
    .feature-item {
        padding: 1.25rem 1rem;
    }
    
    .feature-hero-card-title {
        font-size: 1.25rem;
    }
}

/* ========== SCROLL-TOP BUTTON - FIXED POSITIONING ========== */

.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-orange);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: none;
    z-index: 9999; /* ✅ Very high z-index to float above everything */
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
    
    /* ✅ CRITICAL: Prevent overflow */
    max-width: calc(100vw - 40px); /* ✅ Never exceed viewport width */
    max-height: calc(100vh - 40px); /* ✅ Never exceed viewport height */
    box-sizing: border-box;
}

.scroll-top:hover {
    background-color: var(--color-green);
    transform: translateY(-3px);
}

.scroll-top.active {
    display: flex;
    opacity: 1;
}

/* ========== FOOTER ========== */
.site-footer {
    background-color: var(--color-dark);
    color: white;
    padding: 4rem 2rem 2rem;
    margin-top: 4rem;
}

.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: var(--color-orange);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.footer-col h5 {
    color: white;
    font-family: var(--font-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.footer-col p {
    font-family: var(--font-secondary);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    margin: 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: 1.125rem;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--color-orange);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.footer-bottom p {
    font-family: var(--font-secondary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

/* ========== RESPONSIVE FOOTER ========== */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .site-footer {
        padding: 3rem 1.5rem 1.5rem;
    }
}
/* ========================================
   REMOVE GAP BETWEEN SECTIONS
   ======================================== */

/* Remove bottom spacing from how-to-apply section */
.how-to-apply-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important; /* ✅ Remove bottom border */
}

/* Remove top spacing from categories section */
.categories-magazine {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important; /* ✅ Remove top border */
}

/* Force sections to touch */
.how-to-apply-section + .categories-magazine {
  margin-top: 0 !important;
  border-top: none !important; /* ✅ Remove border when adjacent */
}


/* ========== MOBILE HERO SECTION FIXES ========== */

@media (max-width: 992px) {
  
  /* ✅ Hide the vertical divider line on mobile */
  .hero-divider {
    display: none !important;
  }
  
  .divider-vertical,
  .divider-horizontal {
    display: none !important;
  }
  
  /* ✅ Hide the video container on mobile */
  .hero-image,
  .video-container,
  .hero-video {
    display: none !important;
  }
  
  /* ✅ DISABLE ALL SCROLL TRANSFORMATIONS ON MOBILE */
  .editorial-hero {
    min-height: auto !important;
    padding: 5rem 1.5rem 3rem !important;
  }
  
  /* ✅ Force hero content to stay in single column - NO GRID CHANGES */
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding: 0 1rem;
  }
  
  /* ✅ OVERRIDE: Keep hero text centered at ALL times */
  .hero-text {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    align-items: center !important;
    transform: none !important; /* ✅ Disable translateX and scale */
    padding: 0 !important;
    max-width: 100%;
  }
  
  /* ✅ OVERRIDE SCROLLED STATE - Keep everything centered */
  body.scrolled .hero-text {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    align-items: center !important;
    transform: none !important; /* ✅ Disable all transforms */
    padding: 0 !important;
  }
  
  /* ✅ OVERRIDE: Title stays centered and doesn't transform */
  .display-title {
    text-align: center !important;
    transform: none !important; /* ✅ Disable scale */
    transform-origin: center !important;
    font-size: 2.5rem !important;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }
  
  body.scrolled .display-title {
    text-align: center !important;
    transform: none !important; /* ✅ Keep centered even when scrolled */
    font-size: 2.5rem !important; /* ✅ Fixed size, no scaling */
  }
  
  /* ✅ OVERRIDE: Subtitle stays centered */
  .hero-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1.125rem !important;
    max-width: 90%;
  }
  
  body.scrolled .hero-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1.125rem !important; /* ✅ Fixed size */
  }
  
  /* ✅ OVERRIDE: Sub-headline stays centered */
  .sub-headline {
    text-align: center !important;
    font-size: 1.2rem !important;
  }
  
  body.scrolled .sub-headline {
    font-size: 1.2rem !important; /* ✅ Fixed size */
  }
  
  /* ✅ OVERRIDE: CTA button stays centered */
  .hero-cta {
    text-align: center !important;
    margin-top: 2rem;
  }
  
  body.scrolled .hero-cta {
    text-align: center !important;
  }
  
  /* ✅ Button sizing on mobile */
  .btn-login {
    padding: 1rem 2.5rem !important;
    font-size: 1rem !important;
  }
  
  body.scrolled .btn-login {
    padding: 1rem 2.5rem !important;
    font-size: 1rem !important;
  }
}

/* ✅ Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
  .editorial-hero {
    padding: 4rem 1rem 2rem !important;
  }
  
  .display-title {
    font-size: 2rem !important;
  }
  
  body.scrolled .display-title {
    font-size: 2rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.95rem !important;
  }
  
  body.scrolled .hero-subtitle {
    font-size: 0.95rem !important;
  }
  
  .sub-headline {
    font-size: 1rem !important;
  }
  
  body.scrolled .sub-headline {
    font-size: 1rem !important;
  }
  
  .btn-login {
    padding: 0.875rem 2rem !important;
    font-size: 0.9rem !important;
  }
}

/* ✅ FEATURES SECTION - Mobile Responsive */
@media (max-width: 992px) {
  .features-section {
    padding: 2rem 1.5rem;
    margin-top: 0 !important; /* ✅ Remove overlap on mobile */
    padding-top: 2rem !important;
  }
  
  .features-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .features-section {
    padding: 2rem 1.5rem;
  }
  
  .features-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .feature-item {
    padding: 1.5rem 1.25rem;
  }
  
  .feature-hero-card-title {
    font-size: 1.35rem !important;
  }
  
  .feature-hero-card-text {
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .features-section {
    padding: 1.5rem 1rem;
  }
  
  .features-container {
    gap: 1rem;
  }
  
  .feature-item {
    padding: 1.25rem 1rem;
  }
  
  .feature-hero-card-title {
    font-size: 1.25rem !important;
  }
  
  .feature-hero-card-text {
    font-size: 0.9rem !important;
  }
}

/* ========== SCROLL-TOP BUTTON - HIDE ON MOBILE ========== */

@media (max-width: 992px) {
  /* ✅ Completely hide scroll-top button on mobile */
  .scroll-top,
  .scroll-top.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ========== MOBILE-ONLY: PREVENT HORIZONTAL SCROLL ========== */

@media (max-width: 992px) {
  /* ✅ Apply overflow-x hidden ONLY on mobile */
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
  }
  
  /* ✅ Ensure all major sections don't overflow on mobile */
  .intro-wrap,
  .editorial-hero,
  .features-section,
  .about-section,
  .how-to-apply-section,
  .testimonials-3d-carousel,
  .general-application-section,
  .cta-section,
  .contact-section,
  .site-footer {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* ✅ EXCEPTION: Categories section gets overflow-x CLIP (not hidden) */
  .categories-magazine {
    overflow-x: clip !important; /* ✅ Prevents overflow but doesn't affect scrolling context */
    max-width: 100vw;
  }
  
  /* ✅ Fix testimonial carousel cards on mobile */
  .carousel-wrapper {
    max-width: 100vw;
    overflow: hidden; /* ✅ Prevent cards from causing horizontal scroll */
  }
  
  .carousel-card {
    max-width: min(95vw, 380px); /* ✅ Never exceed viewport */
  }
  
  /* ✅ Fix hero content */
  .hero-content {
    max-width: 100vw;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  
  /* ✅ Fix features container */
  .features-container {
    max-width: 100vw;
    padding: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .carousel-card {
    max-width: min(90vw, 340px);
  }
}

@media (max-width: 480px) {
  .carousel-card {
    max-width: min(95vw, 300px);
  }
}