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

html {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f7;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Header Styles */
.header {
    background: transparent !important;
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* MOBILE HEADER - PERMANENT BACKGROUND (NO SCROLL EFFECT) */
@media (max-width: 730px) {
    .header {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-combined {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.logo-text-image {
    height: 80px;
    object-fit: contain;
}

.login-container {
    display: flex;
    align-items: center;
}

.nav-login-btn {
    background: transparent;
    color: #9CA3AF;
    padding: 0.6rem 1.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 240px; /* Wider to accommodate full English text */
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
}

.nav-login-btn:hover {
    background: rgba(156, 163, 175, 0.1);
    color: #6B7280;
    border-color: #9CA3AF;
}

.nav-login-btn span {
    transition: opacity 0.15s ease;
    font-size: 0.85rem; /* Smaller font size for better fit */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Styles */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative; /* For absolute positioning of arrow */
            margin-left: 520px; /* Move Learn button a tiny bit to the left */
}

.nav-link {
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.nav-link:hover {
    color: #8B5CF6;
}

.nav-dropdown {
    position: relative;
}

/* Style the Learn / Aprender button like Test de nivel */
.nav-dropdown > .nav-link {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: white;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.nav-dropdown > .nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    color: white;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 5px 20px rgba(139, 92, 246, 0.1);
    padding: 1.5rem;
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
    background-clip: padding-box;
    backdrop-filter: blur(10px);
}

/* Prevent dropdown from being clipped by window edges */
@media (max-width: 1600px) {
    .dropdown-content {
        left: 50%;
        transform: translateX(-50%) translateY(15px) scale(0.95);
    }
    
    .nav-dropdown:hover .dropdown-content {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* For smaller screens, align to right edge to prevent overflow */
@media (max-width: 1200px) {
    .dropdown-content {
        left: auto;
        right: 0;
        transform: translateY(15px) scale(0.95);
    }
    
    .nav-dropdown:hover .dropdown-content {
        transform: translateY(0) scale(1);
    }
}

.nav-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    border-color: rgba(139, 92, 246, 0.2);
}

/* Dynamic positioning class for JavaScript control */
.dropdown-content.position-right {
    left: auto !important;
    right: 0 !important;
    transform: translateY(15px) scale(0.95) !important;
}

.dropdown-content.position-right.show {
    transform: translateY(0) scale(1) !important;
}

.dropdown-content.position-center {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(15px) scale(0.95) !important;
}

.dropdown-content.position-center.show {
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(167, 139, 250, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
}

.dropdown-item:hover::before {
    opacity: 1;
}

.dropdown-item:hover {
    background-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.dropdown-icon {
    font-size: 1.75rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #C4B5FD 100%);
    border-radius: 14px;
    color: white;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
    position: relative;
}

.dropdown-item:hover .dropdown-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.dropdown-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dropdown-item:hover .dropdown-icon::after {
    opacity: 1;
}

.dropdown-text {
    flex: 1;
    padding-top: 0.25rem;
}

.dropdown-text strong {
    display: block;
    color: #4C1D95;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.dropdown-item:hover .dropdown-text strong {
    color: #6D28D9;
}

.dropdown-text p {
    color: #6B7280;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.dropdown-item:hover .dropdown-text p {
    color: #5B6574;
}

/* Mobile Menu Toggle - Hidden by default, shown on tablet/mobile */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 3px;
    position: relative;
    z-index: 1001;
    width: 30px;
    height: 25px;
    justify-content: center;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background: #4C1D95;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Base mobile menu styles */
.mobile-menu {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: white;
    transition: left 0.3s ease;
    z-index: 999;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: none;
    text-align: left;
}

.mobile-menu.active {
    left: 0;
    display: block;
}

.mobile-menu-item {
    padding: 1rem;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    color: #4C1D95;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-menu-item:hover {
    background: #f8f9fa;
    color: #8B5CF6;
}

.mobile-menu-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.mobile-menu-text {
    flex: 1;
    text-align: left;
}

.mobile-menu-text strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    text-align: left;
}

.mobile-menu-text p {
    font-size: 0.85rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.3;
    text-align: left;
}

.mobile-menu-text span {
    transition: opacity 0.15s ease;
}

/* Video Mute Button - Hidden on desktop */
.video-mute-button {
    display: none !important;
}

/* Custom Icon Designs - No More Emojis */
.custom-icon-education::before {
    content: '';
    width: 20px;
    height: 20px;
    background: white;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

.custom-icon-spanish::before {
    content: 'ES';
    color: white;
    font-weight: 700;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    letter-spacing: 0.5px;
}

.custom-icon-account::before {
    content: '';
    width: 20px;
    height: 20px;
    background: white;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

/* Hero Section */
.hero-section {
    padding: 8rem 0 12rem 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 3rem;
    align-items: flex-start;
    justify-items: center;
    justify-content: center;
    width: 100%;
}

/* Video Sections */
.hero-left, .hero-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    position: relative;
}

.video-header {
    margin-bottom: 2rem;
    max-width: 320px;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-left .video-header {
    text-align: left;
}

.hero-right .video-header {
    text-align: center; /* Center Spanish content for better mobile experience */
}

.video-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #4C1D95;
    margin-bottom: 1rem;
    line-height: 1.1;
    font-family: 'DM Sans', sans-serif;
}

.rotating-word {
    color: #8B5CF6;
    position: relative;
    display: inline-block;
    min-width: 140px;
    text-align: center; /* Center all rotating words */
    transition: all 0.3s ease;
}

/* Spanish rotating word - perfectly centered with special handling for "conversaciones" */
#spanish-word {
    text-align: center; /* Center the Spanish words */
    min-width: 240px; /* Extra wide to accommodate "conversaciones" properly on all screens */
    margin-left: -50px; /* Strong adjustment for visual centering of very long words */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Perfect centering technique for absolute alignment */
}

/* English rotating word - perfectly centered */
#english-word {
    text-align: center; /* Center the English words */
    min-width: 140px;
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Consistent centering technique with Spanish words */
}

.video-description {
    font-size: 1rem;
    line-height: 1.5;
    color: #6B7280;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
}

.language-button {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: white;
    padding: 1.2rem 2rem;
    border-radius: 35px;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 200px;
    max-width: 320px;
    width: auto;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 2rem auto 0 auto;
    position: relative;
    text-align: center;
}

.language-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.hero-left .language-button {
    transform: rotate(-5deg);
}

.hero-left .language-button:hover {
    transform: rotate(-5deg) scale(1.05);
}

.hero-right .language-button {
    background: linear-gradient(135deg, #A78BFA, #C4B5FD);
    color: white;
    transform: rotate(5deg);
}

.hero-right .language-button:hover {
    transform: rotate(5deg) scale(1.05);
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.4);
}

.video-container {
    width: 420px;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 3rem;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    background: transparent;
    pointer-events: auto;
}

/* Prevent Safari from showing any loading states or poster images */
.hero-video::-webkit-media-controls-loading-panel {
    display: none !important;
}

.hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure video takes up full space and hides any Safari overlays */
.hero-video {
    position: relative;
    z-index: 1;
}

.custom-play-button {
    z-index: 10 !important;
    pointer-events: auto !important;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #8B5CF6;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.custom-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.custom-play-button.playing {
    opacity: 0;
    pointer-events: none;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 2rem 1rem 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5;
    border-radius: 0 0 20px 20px; /* Match video border-radius for bottom corners */
}

/* Show controls only when visible class is added (not on hover) */
.video-controls.visible {
    opacity: 1;
    visibility: visible;
}

/* Disable hover showing controls - only show when visible class is added via JavaScript */
.video-wrapper:hover .video-controls:not(.visible) {
    opacity: 0;
    visibility: hidden;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-bottom: 1rem;
    cursor: pointer;
    position: relative;
    transition: height 0.2s ease;
}

.progress-bar:hover {
    height: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #8B5CF6;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.progress-bar:hover .progress-fill::after {
    opacity: 1;
}

.progress-bar.dragging {
    height: 8px;
}

.progress-bar.dragging .progress-fill::after {
    opacity: 1;
}

.progress-buffered {
    position: absolute;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    width: 0%;
}

.control-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fullscreen-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-left: auto;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.control-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.volume-slider {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.time-display {
    color: white;
    font-size: 0.9rem;
    margin-left: 1rem;
}

/* Hide unwanted browser video controls - only for videos without explicit controls */
video:not([controls])::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}

video:not([controls])::-webkit-media-controls-cast-button {
    display: none !important;
}

video:not([controls])::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

video:not([controls])::-webkit-media-controls-start-playback-button {
    display: none !important;
}

video:not([controls])::-moz-media-controls-overlay {
    display: none !important;
}

/* Hide unwanted buttons from ALL videos (including fullscreen) */
video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}

video::-webkit-media-controls-cast-button {
    display: none !important;
}

/* Hide browser controls only for hero videos when NOT in fullscreen */
.hero-video:not(:fullscreen)::-webkit-media-controls {
    visibility: hidden !important;
    display: none !important;
}

.hero-video:not(:fullscreen)::-webkit-media-controls-enclosure {
    visibility: hidden !important;
    display: none !important;
}

.hero-video:not(:-webkit-full-screen)::-webkit-media-controls {
    visibility: hidden !important;
    display: none !important;
}

.hero-video:not(:-webkit-full-screen)::-webkit-media-controls-enclosure {
    visibility: hidden !important;
    display: none !important;
}

.hero-video:not(:-moz-full-screen)::-webkit-media-controls {
    visibility: hidden !important;
    display: none !important;
}

.hero-video:not(:-moz-full-screen)::-webkit-media-controls-enclosure {
    visibility: hidden !important;
    display: none !important;
}

/* AGGRESSIVE Safari video control hiding - ALL possible elements */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-overlay-enclosure,
.hero-video::-webkit-media-controls-overlay,
.hero-video::-webkit-media-controls-current-time-display,
.hero-video::-webkit-media-controls-time-remaining-display,
.hero-video::-webkit-media-controls-timeline,
.hero-video::-webkit-media-controls-volume-slider,
.hero-video::-webkit-media-controls-fullscreen-button,
.hero-video::-webkit-media-controls-mute-button,
.hero-video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
    -webkit-appearance: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -1 !important;
}

/* Extra aggressive Safari mobile hiding */
.hero-video {
    -webkit-appearance: none !important;
    -webkit-media-controls: none !important;
    -webkit-playsinline: true !important;
    outline: none !important;
}

/* Force remove all possible video controls on Safari */
.hero-video[controls] {
    -webkit-appearance: none !important;
}

.hero-video:not([controls]) {
    -webkit-appearance: none !important;
}

/* Nuclear option - hide ANY webkit video control that might appear */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-overlay-enclosure,
video::-webkit-media-controls-overlay,
video::-webkit-media-controls-loading-panel,
video::-webkit-media-controls-status-display {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    z-index: -99999 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Ensure our custom play button is always on top */
.video-wrapper {
    position: relative;
    z-index: 1;
}

.custom-play-button {
    position: absolute;
    z-index: 999 !important;
    pointer-events: auto !important;
    display: flex !important;
}

/* Ensure ALL video controls are visible in fullscreen mode */
video:fullscreen::-webkit-media-controls {
    visibility: visible !important;
}

video:fullscreen::-webkit-media-controls-enclosure {
    visibility: visible !important;
}

video:-webkit-full-screen::-webkit-media-controls {
    visibility: visible !important;
}

video:-webkit-full-screen::-webkit-media-controls-enclosure {
    visibility: visible !important;
}

video:-moz-full-screen::-webkit-media-controls {
    visibility: visible !important;
}

video:-moz-full-screen::-webkit-media-controls-enclosure {
    visibility: visible !important;
}

/* Ensure fullscreen overlay video controls are always visible */
#fullscreen-video::-webkit-media-controls {
    visibility: visible !important;
}

#fullscreen-video::-webkit-media-controls-enclosure {
    visibility: visible !important;
}

/* Fullscreen Video Overlay */
.video-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
    padding: 4rem 2rem;
    box-sizing: border-box;
}

.video-fullscreen-overlay.active {
    display: flex;
}

.fullscreen-video-container {
    position: relative;
    width: 80vw;
    max-width: 800px;
    max-height: calc(100vh - 8rem);
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background: #000;
}

.fullscreen-video-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    position: relative;
    z-index: 1;
}

/* Fix video zoom in native fullscreen */
video:fullscreen {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

video:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

video:-moz-full-screen {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

video:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* Ensure video controls work properly in fullscreen */
.video-fullscreen-overlay.active video {
    cursor: default !important;
}

.video-fullscreen-overlay.active {
    cursor: default;
}

.video-fullscreen-overlay.active video[controls] {
    outline: none;
}

/* Let browser handle video controls naturally - no interference */

.fullscreen-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    font-weight: 300;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    transition: all 0.2s ease;
    backdrop-filter: blur(3px);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
}

.fullscreen-close-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

.fullscreen-close-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.hero-left .video-container {
    transform: rotate(-5deg);
}

.hero-right .video-container {
    transform: rotate(5deg);
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-right .video-placeholder {
    background: linear-gradient(135deg, #A78BFA, #C4B5FD);
}

.video-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.presenter-image {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.play-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.play-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* Center Mascot Area */
.hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mascot-placeholder {
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ready for custom mascot image */
}

.center-fox {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 450px;
    max-height: 450px;
    z-index: 10;
    position: relative;
    opacity: 0.9;
    margin-top: 40rem;
    transition: all 0.4s ease;
    cursor: pointer;
}

.center-fox:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Floating Scroll Arrow */
.scroll-arrow-container {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.scroll-arrow-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #8B5CF6;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
    backdrop-filter: blur(10px);
    animation: float 3s ease-in-out infinite;
}

.scroll-arrow-btn:hover {
    background: #8B5CF6;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
}

.scroll-arrow-btn:hover .arrow-down {
    color: white;
}

.arrow-down {
    font-size: 1.4rem;
    font-weight: 900;
    color: #8B5CF6;
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
    transform: scale(1.3, 1.1);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: scale(1.3, 1.1) translateY(0);
    }
    50% {
        transform: scale(1.5, 1.3) translateY(8px);
    }
}

/* Bilingual Titles within New Section */
.titles-container {
    max-width: 1200px;
    margin: 0 auto 4rem auto;
    padding: 2rem 2rem 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: relative;
    z-index: 10;
}

.section-title {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    color: #4C1D95;
    line-height: 1.2;
    white-space: nowrap;
}

.english-title {
    text-align: right;
}

.spanish-title {
    text-align: left;
}

.titles-separator {
    width: 4px;
    height: 80px;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
}

.titles-separator::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -2px;
    right: -2px;
    bottom: -4px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(167, 139, 250, 0.3));
    border-radius: 4px;
    z-index: -1;
}

/* New Section */
.new-section {
    min-height: 100vh;
    background: #ffffff; /* White background */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    margin-top: 5rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
    z-index: 1;
}

/* Artistic separation - elliptical gradient layer */
.new-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #f5f5f7 0%, #faf9fb 50%, rgba(255, 255, 255, 0.9) 100%);
    clip-path: ellipse(100% 100% at 50% 0%);
    z-index: 1;
}

/* Artistic separation - wavy animated layer */
.new-section::after {
    content: '';
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 50%, transparent 100%);
    clip-path: polygon(0 40%, 25% 60%, 50% 40%, 75% 60%, 100% 40%, 100% 100%, 0% 100%);
    z-index: 2;
    animation: waveFlow 8s ease-in-out infinite;
}

.section-content {
    max-width: 1200px;
    width: 100%;
    padding: 0 2rem;
    z-index: 10;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.bottom-foxes {
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    padding: 0 2rem;
    gap: 12rem;
    margin: 0 auto; /* Same centering as footer and fox image */
    text-align: center; /* Same as footer content */
}

.fox-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    max-width: 350px;
    z-index: 15;
}

.fox-container-bottom {
    margin-bottom: -7.5rem;
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
}

.bottom-fox-image {
    width: 210px; /* 30% bigger than previous 162px */
    height: 210px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 25;
    transform: translateY(-2rem);
}

.fox-text-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 6rem 2rem 2rem 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    position: relative;
    z-index: 15;
    width: 350px;
    height: 450px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fox-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4C1D95;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-family: 'DM Sans', sans-serif;
}

.fox-description {
    font-size: 1rem;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 1.5rem;
    font-family: 'DM Sans', sans-serif;
}

.fox-button {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    width: 100%; /* Make button full width within its container */
    text-decoration: none;
    display: inline-block;
}

.fox-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* Wave Flow Animation for Artistic Separation */
@keyframes waveFlow {
    0%, 100% {
        transform: translateX(0) scaleY(1);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-20px) scaleY(1.1);
        opacity: 1;
    }
}

/* Footer Styles */
.main-footer {
    background: linear-gradient(135deg, #4C1D95, #6B46C1, #8B5CF6);
    color: white;
    padding: 5rem 0 3rem 0 !important;
    margin-top: 2rem; /* Changed from negative to positive to prevent overlap */
    margin-bottom: 0 !important;
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
}

/* Primary curve at the top of the footer */
.main-footer::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, #4C1D95, #6B46C1);
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    z-index: -1;
}

/* Secondary smaller curve for added interest */
.main-footer::after {
    content: '';
    position: absolute;
    top: -70px;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(135deg, #6B46C1, #8B5CF6);
    border-top-left-radius: 60% 100%;
    border-top-right-radius: 40% 100%;
    z-index: -2;
    opacity: 0.7;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    text-align: center;
}

.footer-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #E8D5FF;
    font-family: 'DM Sans', sans-serif;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.footer-logo a {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-logo a:hover {
    opacity: 0.8;
}

.footer-combined-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.footer-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #C4B5FD;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    text-align: center;
}

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

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #C4B5FD;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

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

.footer-bottom {
    border-top: 1px solid rgba(196, 181, 253, 0.3);
    margin: 2rem 0 0 0 !important; /* Ensure no bottom margin */
    padding: 1rem 0 0 0 !important; /* Ensure no bottom padding */
    text-align: center;
    width: 100%;
}

.footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.9rem;
    color: #C4B5FD;
    line-height: 1.2;
}

/* Animations */

/* Default - show line breaks on desktop and tablet */
.tablet-break {
    display: inline;
}

/* DESKTOP RESPONSIVE SCALING & ALIGNMENT (1025px and above) */
@media (min-width: 1025px) {
    /* RESPONSIVE HERO CONTAINER */
    .hero-container {
        max-width: min(1400px, 90vw); /* Never take more than 90% of viewport width */
        gap: clamp(2.5rem, 5vw, 3rem); /* Ensure adequate spacing between columns */
        padding: 0 clamp(2rem, 5vw, 2rem); /* Always maintain side margins */
    }
    
    /* RESPONSIVE VIDEO CONTAINERS */
    .video-container {
        width: clamp(320px, 26vw, 420px); /* Slightly smaller to prevent overflow */
        height: clamp(460px, 37vw, 600px); /* Proportionally smaller height */
        margin-top: clamp(3rem, 6vw, 3rem); /* More space above to prevent overlap */
    }
    
    /* RESPONSIVE VIDEO SECTIONS */
    .hero-left, .hero-right {
        gap: clamp(1.5rem, 3vw, 1rem); /* More space between header and video */
        padding: clamp(0.5rem, 1vw, 0rem); /* Small internal padding to prevent edge touching */
    }
    
    /* RESPONSIVE VIDEO HEADERS */
    .video-header {
        max-width: clamp(280px, 25vw, 320px);
        min-height: clamp(180px, 18vw, 200px); /* Ensure enough height for title + description */
        margin-bottom: clamp(2rem, 4vw, 2rem); /* More space below header */
        padding-bottom: clamp(1rem, 2vw, 1.5rem); /* Internal padding to prevent content cramping */
    }
    
    /* RESPONSIVE TYPOGRAPHY */
    .video-title {
        font-size: clamp(2.4rem, 3.8vw, 2.8rem); /* More conservative scaling */
        line-height: 1.1;
        margin-bottom: clamp(1rem, 1.8vw, 1rem);
    }
    
    .video-description {
        font-size: clamp(0.95rem, 1.3vw, 1rem); /* More conservative scaling */
        line-height: 1.5;
        margin-top: clamp(0.5rem, 1vw, 0.75rem); /* Ensure space above description */
    }
    
    /* RESPONSIVE LANGUAGE BUTTONS */
    .language-button {
        padding: clamp(1rem, 2vw, 1.2rem) clamp(1.5rem, 3vw, 2rem);
        font-size: clamp(0.9rem, 1.5vw, 1rem);
        min-width: clamp(180px, 18vw, 200px);
        max-width: clamp(260px, 26vw, 320px); /* Slightly smaller to fit better */
        margin-top: clamp(1.5rem, 3vw, 2rem); /* Ensure space above button */
        margin-bottom: clamp(1rem, 2vw, 1rem); /* Ensure space below button */
    }
    
    /* RESPONSIVE FOX MASCOT */
    .mascot-placeholder {
        width: clamp(350px, 30vw, 500px); /* Smaller to maintain proportions */
        height: clamp(350px, 30vw, 500px);
        margin: clamp(1rem, 2vw, 2rem); /* Ensure spacing around fox */
        transition: all 0.3s ease; /* Smooth transition for size changes */
    }
    
    .center-fox {
        max-width: clamp(300px, 28vw, 450px); /* Proportionally smaller */
        max-height: clamp(300px, 28vw, 450px);
        margin-top: 40rem; /* FIXED POSITION - never moves, only size changes */
        transition: all 0.3s ease; /* Smooth transition for size changes */
    }
    
    /* RESPONSIVE SECTION PADDING */
    .hero-section {
        padding: clamp(7rem, 8vw, 8rem) clamp(1rem, 2vw, 0rem) clamp(9rem, 10vw, 12rem) clamp(1rem, 2vw, 0rem);
        min-height: clamp(80vh, 85vh, 80vh); /* Ensure adequate height */
    }
    
    /* RESPONSIVE ROTATING WORDS */
    .rotating-word {
        min-width: clamp(130px, 16vw, 140px); /* More conservative scaling */
        font-size: inherit; /* Inherit from title size */
    }
    
    /* English rotating words - align left */
    .hero-left #english-word {
        text-align: left !important;
        left: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
        min-width: clamp(130px, 14vw, 140px); /* More conservative */
    }
    
    /* Spanish rotating words - align right */  
    .hero-right #spanish-word {
        text-align: right !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: clamp(220px, 22vw, 240px); /* More conservative for "conversaciones" */
    }
    
    /* DESKTOP TITLE ALIGNMENT */
    .hero-left .video-title {
        text-align: left !important;
    }
    
    .hero-right .video-title {
        text-align: right !important;
    }
    
    .hero-left .video-description {
        text-align: left !important;
    }
    
    .hero-right .video-description {
        text-align: right !important;
    }
    
    /* RESPONSIVE VIDEO CONTROLS */
    .custom-play-button {
        width: clamp(70px, 8vw, 80px);
        height: clamp(70px, 8vw, 80px);
        font-size: clamp(1.8rem, 2.5vw, 2rem);
    }
    
    .video-controls {
        padding: clamp(1.5rem, 2.5vw, 2rem) clamp(0.8rem, 1.5vw, 1rem) clamp(0.8rem, 1.5vw, 1rem);
    }
    
    .progress-bar {
        height: clamp(5px, 0.8vw, 6px);
        margin-bottom: clamp(0.8rem, 1.2vw, 1rem);
    }
    
    .control-btn, .fullscreen-btn {
        font-size: clamp(1.1rem, 1.5vw, 1.2rem);
        padding: clamp(0.4rem, 0.8vw, 0.5rem);
        min-width: clamp(40px, 5vw, 44px);
        min-height: clamp(40px, 5vw, 44px);
    }
}

/* Floating decorative shapes */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
    z-index: 1;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    animation-delay: -2s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 15%;
    animation-delay: -4s;
}

.shape-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 20%;
    animation-delay: -1s;
}

.shape-4 {
    width: 70px;
    height: 70px;
    top: 15%;
    right: 25%;
    animation-delay: -3s;
}

.shape-5 {
    width: 90px;
    height: 90px;
    top: 75%;
    left: 60%;
    animation-delay: -5s;
}

.shape-6 {
    width: 50px;
    height: 50px;
    top: 40%;
    left: 5%;
    animation-delay: -1.5s;
}

.shape-7 {
    width: 65px;
    height: 65px;
    top: 30%;
    right: 8%;
    animation-delay: -2.5s;
}

.shape-8 {
    width: 85px;
    height: 85px;
    bottom: 35%;
    right: 30%;
    animation-delay: -4.5s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* Make floating shapes responsive on mobile */
@media (max-width: 768px) {
    .floating-shape {
        opacity: 0.05; /* More subtle on mobile */
    }
    
    .shape-1 { width: 60px; height: 60px; top: 15%; left: 8%; }
    .shape-2 { width: 40px; height: 40px; top: 65%; right: 12%; }
    .shape-3 { width: 50px; height: 50px; bottom: 25%; left: 15%; }
    .shape-4 { width: 45px; height: 45px; top: 12%; right: 20%; }
    .shape-5 { width: 55px; height: 55px; top: 78%; left: 55%; }
    .shape-6 { width: 35px; height: 35px; top: 45%; left: 3%; }
    .shape-7 { width: 42px; height: 42px; top: 35%; right: 6%; }
    .shape-8 { width: 52px; height: 52px; bottom: 40%; right: 25%; }
}

/* Ensure floating shapes are visible in small mobile fox section view */
@media (max-width: 480px) {
    .floating-shape {
        position: fixed; /* Fixed positioning for better visibility when hero is hidden */
        opacity: 0.06; /* Slightly more visible since fox section has more content */
        z-index: 1; /* Behind content but visible */
    }
    
    /* Reposition circles to work well with fox section layout */
    .shape-1 { width: 50px; height: 50px; top: 20%; left: 5%; }
    .shape-2 { width: 35px; height: 35px; top: 70%; right: 8%; }
    .shape-3 { width: 45px; height: 45px; bottom: 30%; left: 10%; }
    .shape-4 { width: 40px; height: 40px; top: 10%; right: 15%; }
    .shape-5 { width: 48px; height: 48px; top: 85%; left: 50%; }
    .shape-6 { width: 32px; height: 32px; top: 40%; left: 2%; }
    .shape-7 { width: 38px; height: 38px; top: 25%; right: 4%; }
    .shape-8 { width: 46px; height: 46px; bottom: 45%; right: 20%; }
}

/* Fox section floating shapes - ONLY visible on mobile */
.fox-floating-shape {
    display: none; /* Hidden by default */
}

/* Show fox section circles on ALL mobile breakpoints where fox section is visible (730px and below) */
@media (max-width: 730px) {
    .fox-floating-shape {
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, #8B5CF6, #A78BFA);
        opacity: 0.08; /* Slightly more visible for fox section */
        animation: float 6s ease-in-out infinite;
        z-index: 2; /* Above background but below fox cards */
        display: block; /* Show on mobile */
    }
    
    /* Fox section specific circle positioning - Medium mobile (730px-601px) */
    .fox-shape-1 { width: 50px; height: 50px; top: 18%; left: 8%; animation-delay: -1s; }
    .fox-shape-2 { width: 40px; height: 40px; top: 65%; right: 12%; animation-delay: -3s; }
    .fox-shape-3 { width: 45px; height: 45px; bottom: 28%; left: 15%; animation-delay: -2s; }
    .fox-shape-4 { width: 42px; height: 42px; top: 35%; right: 8%; animation-delay: -4s; }
    .fox-shape-5 { width: 47px; height: 47px; bottom: 42%; right: 25%; animation-delay: -1.5s; }
    .fox-shape-6 { width: 35px; height: 35px; top: 48%; left: 5%; animation-delay: -3.5s; }
}

/* Smaller fox section circles for smaller mobile (600px and below) */
@media (max-width: 600px) {
    .fox-shape-1 { width: 45px; height: 45px; top: 15%; left: 8%; animation-delay: -1s; }
    .fox-shape-2 { width: 35px; height: 35px; top: 60%; right: 12%; animation-delay: -3s; }
    .fox-shape-3 { width: 40px; height: 40px; bottom: 25%; left: 15%; animation-delay: -2s; }
    .fox-shape-4 { width: 38px; height: 38px; top: 35%; right: 8%; animation-delay: -4s; }
    .fox-shape-5 { width: 42px; height: 42px; bottom: 40%; right: 25%; animation-delay: -1.5s; }
    .fox-shape-6 { width: 30px; height: 30px; top: 45%; left: 5%; animation-delay: -3.5s; }
}

/* Even smaller fox section circles for smallest mobile (480px and below) */
@media (max-width: 480px) {
    .fox-shape-1 { width: 40px; height: 40px; top: 12%; left: 6%; animation-delay: -1s; }
    .fox-shape-2 { width: 30px; height: 30px; top: 55%; right: 10%; animation-delay: -3s; }
    .fox-shape-3 { width: 35px; height: 35px; bottom: 22%; left: 12%; animation-delay: -2s; }
    .fox-shape-4 { width: 33px; height: 33px; top: 32%; right: 6%; animation-delay: -4s; }
    .fox-shape-5 { width: 37px; height: 37px; bottom: 38%; right: 22%; animation-delay: -1.5s; }
    .fox-shape-6 { width: 28px; height: 28px; top: 42%; left: 3%; animation-delay: -3.5s; }
}

/* Animations */

/* Fix Learn/Aprender button wrapping with smooth positioning */
@media (max-width: 1300px) {
    .header-content {
        max-width: 95vw; /* Allow more flexibility on narrower screens */
        padding: 0 1.5rem; /* Slightly less padding for more content space */
    }
    
    .header-nav {
        margin-left: clamp(250px, 30vw, 450px); /* Smoother scaling that maintains balance */
    }
    
    .nav-link {
        white-space: nowrap; /* Prevent text wrapping */
        font-size: clamp(0.9rem, 1.1vw, 1rem); /* Responsive font size */
    }
    
    .nav-login-btn {
        width: clamp(200px, 18vw, 240px); /* Make login button responsive too */
        font-size: clamp(0.8rem, 1vw, 0.85rem); /* Responsive login button text */
    }
}

/* Responsive Design */
/* Tablet Design - Single column layout with videos under descriptions */
@media (max-width: 1024px) {
    .hero-section {
        min-height: 100vh;
        padding-bottom: 4rem;
    }
    
    .hero-container {
        max-width: 1200px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 3rem 2rem 2rem 2rem;
        margin: 0 auto;
        min-height: 85vh;
    }
    
    .hero-left, .hero-right {
        width: 32%;
        max-width: 350px;
        min-width: 280px; /* Increased min-width for better Spanish text layout */
        display: flex;
        flex-direction: column;
        gap: 2rem;
        flex-shrink: 1;
    }
    
    /* Left alignment for English section */
    .hero-left {
        align-items: flex-start;
        text-align: left;
        order: 1;
    }
    
    /* Right alignment for Spanish section */  
    .hero-right {
        align-items: flex-end;
        text-align: right;
        order: 3;
    }
    
    /* TABLET ROTATING WORDS ALIGNMENT FIX */
    /* English rotating words - align left */
    .hero-left #english-word {
        text-align: left !important;
        left: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
    }
    
    /* Spanish rotating words - align right */  
    .hero-right #spanish-word {
        text-align: right !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* TABLET TITLE ALIGNMENT */
    .hero-left .video-title {
        text-align: left !important;
    }
    
    .hero-right .video-title {
        text-align: right !important;
    }
    
    .hero-left .video-description {
        text-align: left !important;
    }
    
    .hero-right .video-description {
        text-align: right !important;
    }
    
    /* TABLET SPANISH TITLE LINE BREAK */
    .tablet-break {
        display: inline; /* Show the line break on tablet */
    }
    
    /* Show fox mascot between videos on tablet */
    .hero-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 25%;
        max-width: 300px;
        min-width: 200px;
        order: 2;
        height: 100%;
    }
    
    .mascot-placeholder {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .center-fox {
        width: 322px;
        height: auto;
        object-fit: contain;
        opacity: 0.9;
        transition: all 0.4s ease;
        cursor: pointer;
        transform: translateY(-15rem);
    }
    
    .center-fox:hover {
        transform: translateY(-15rem) scale(1.05);
        opacity: 1;
    }
    
    /* Simplified content ordering with natural spacing */
    .hero-left .video-header {
        order: 1;
    }
    
    .hero-left .video-container {
        order: 2;
    }
    
    .hero-left .language-button {
        order: 3;
    }
    
    .hero-right .video-header {
        order: 1;
    }
    
    .hero-right .video-container {
        order: 2;
    }
    
    .hero-right .language-button {
        order: 3;
    }
    
    /* Video containers for tablet - 15% bigger */
    .video-container {
        width: 287px;
        height: 431px;
        max-width: 85vw;
        transform: none;
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }
    
    /* Align videos based on section */
    .hero-left .video-container {
        transform: none;
        align-self: flex-start;
    }
    
    .hero-right .video-container {
        transform: none;
        align-self: flex-end;
    }
    
    /* Fox-related elements are shown in tablet view above */
    
    /* Language buttons - aligned left/right for tablet - 15% bigger */
    .language-button {
        position: static;
        transform: none;
        padding: 1.04rem 1.73rem;
        font-size: 1.15rem;
        border-radius: 10px;
        max-width: 287px;
        width: 287px;
        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25);
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    /* Align buttons to match video alignment */
    .hero-left .language-button {
        position: static;
        left: auto;
        transform: none;
        background: linear-gradient(135deg, #8B5CF6, #A78BFA);
        align-self: flex-start;
    }
    
    .hero-right .language-button {
        position: static;
        left: auto;
        transform: none;
        background: linear-gradient(135deg, #A78BFA, #C4B5FD);
        align-self: flex-end;
    }
    
    .language-button:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
    }
    
    .hero-left .language-button:hover {
        transform: translateY(-2px) scale(1.03);
    }
    
    .hero-right .language-button:hover {
        transform: translateY(-2px) scale(1.03);
    }
    
    .logo-combined {
        height: 40px;
    }
    
    /* Show hamburger menu on tablet */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
        /* Hide Learn/Aprender dropdown on tablet */
    .nav-dropdown {
        display: none !important;
    }

    /* Hide login button on tablet and mobile - only show in hamburger menu */
    .nav-login-btn {
        display: none !important;
    }
    
    /* Mobile menu shows on tablet */
    .mobile-menu {
        display: block;
    }
    
    /* Navigation responsive sizing for main tablet */
    .header-nav {
        gap: 1.5rem;
        position: static;
        margin-left: 0; /* Reset margin on tablet */
    }
    
    .nav-link {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .dropdown-content {
        min-width: 280px;
        max-width: 320px;
        width: 80vw;
        padding: 1.25rem;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        right: auto !important;
    }
    
    .nav-dropdown:hover .dropdown-content {
        transform: translateX(-50%) translateY(0) !important;
    }
    
    .dropdown-item {
        padding: 1rem;
    }
    
    .dropdown-icon {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }
    
    .dropdown-text strong {
        font-size: 1rem;
    }
    
    .dropdown-text p {
        font-size: 0.9rem;
    }
    
    .info-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* More Information Section - Tablet Optimization */
    .bottom-fox-image {
        width: 160px;
        height: 160px;
        transform: translateY(-0.5rem);
        position: relative;
        z-index: 25;
    }
    
    .bottom-foxes {
        padding: 4rem 2rem 0 2rem;
        flex-direction: row;
        gap: 4rem;
        align-items: flex-end;
        max-width: 100%;
        justify-content: center;
    }
    
    .fox-section {
        width: 45%;
        max-width: 400px;
        min-width: 300px;
    }
    
    .fox-section:first-child {
        align-self: flex-start;
    }
    
    .fox-section:last-child {
        align-self: flex-start;
    }
    
    .fox-text-content {
        padding: 3rem 2rem 2rem 2rem;
        width: 100%;
        height: 450px;
        box-sizing: border-box;
    }
    
    .fox-container-bottom {
        margin-bottom: -3rem;
        z-index: 20;
    }
    
    .fox-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    
    .fox-description {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    
    .fox-button {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .titles-container {
        gap: 1.5rem;
        padding: 2rem 2rem 0 2rem;
        margin: 0 auto 3rem auto;
    }
    
    .section-title {
        font-size: 2.8rem;
        line-height: 1.1;
    }
    
    .titles-separator {
        width: 3px;
        height: 60px;
    }
    
    /* New Section spacing for tablet */
    .new-section {
        padding-top: 8rem;
        padding-bottom: 4rem;
        margin-top: 2rem;
    }
    
    .new-section::before {
        top: -100px;
        height: 150px;
    }
    
    .new-section::after {
        top: -120px;
        height: 170px;
    }
    
    .scroll-arrow-container {
        bottom: 8rem;
    }
    
    .scroll-arrow-btn {
        width: 60px;
        height: 60px;
    }
    
    /* Optimize video controls for tablet */
    .video-controls {
        padding: 1.5rem 0.8rem 0.8rem;
    }
    
    .progress-bar {
        height: 8px;
        margin-bottom: 0.8rem;
    }
    
    .progress-bar:hover {
        height: 10px;
    }
    
    .progress-fill::after {
        width: 14px;
        height: 14px;
        right: -7px;
    }
    
    .control-buttons {
        gap: 0.8rem;
    }
    
    .control-btn, .fullscreen-btn {
        font-size: 1.4rem;
        padding: 0.6rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    .volume-container {
        gap: 0.6rem;
    }
    
    .volume-slider {
        width: 60px;
        height: 6px;
    }
    
    .time-display {
        display: none;
    }
    
    .fullscreen-btn {
        display: block;
        font-size: 1.4rem;
        padding: 0.6rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Adjust fullscreen for tablet */
    .video-fullscreen-overlay {
        padding: 3.5rem 2rem;
    }
    
    .fullscreen-video-container {
        max-height: calc(100vh - 7rem);
        width: 82vw;
        max-width: 700px;
    }
    
    /* Responsive text content for tablet */
    .hero-left .video-header,
    .hero-right .video-header {
        width: 100%;
    }
    
    .hero-left .video-header {
        text-align: left;
    }
    
    .hero-right .video-header {
        text-align: right;
    }
    
    .video-title {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    
    .hero-left .video-title {
        text-align: left;
    }
    
    .hero-right .video-title {
        text-align: right; /* Right align Spanish title */
        max-width: 100%;
        min-width: 280px; /* Ensure enough space for proper line breaks */
        margin-left: 0;
        margin-right: 0;
        line-height: 1.1;
        /* Prevent bad word breaks - keep "inglés" together */
        word-break: keep-all;
        white-space: normal;
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }
    
    .video-description {
        font-size: 1rem;
        line-height: 1.6;
        color: #6B7280;
    }
    
    .hero-left .video-description {
        text-align: left;
        max-width: 100%;
    }
    
    .hero-right .video-description {
        text-align: right;
        max-width: 100%;
    }
}

/* Responsive adjustments for narrower tablets (880px and below) */
@media (max-width: 880px) {
    /* Reduce top padding to bring hero closer to header */
    .hero-section {
        padding: 6rem 0 8rem 0;
    }
    
    .hero-container {
        max-width: 95vw;
        padding: 1.5rem 1.5rem;
        gap: 1rem;
        justify-content: center;
        align-items: center;
    }
    
    .hero-left, .hero-right {
        width: 30%;
        max-width: 280px;
        min-width: 240px;
        gap: 1.5rem;
    }
    
    .hero-center {
        width: 20%;
        max-width: 250px;
        min-width: 180px;
    }
    
    .center-fox {
        width: 250px;
        transform: translateY(-12rem);
    }
    
    .video-container {
        width: 240px;
        height: 360px;
        max-width: 100%;
    }
    
    .video-title {
        font-size: 1.9rem;
        line-height: 1.1;
        margin-bottom: 0.8rem;
    }
    
    /* Fix Spanish title alignment and spacing */
    .hero-right .video-title {
        text-align: right;
        max-width: 240px;
        min-width: 240px;
        margin-left: auto;
        margin-right: 0;
        word-break: normal;
        white-space: normal;
        line-height: 1.2;
    }
    
    .video-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Fix Spanish description alignment */
    .hero-right .video-description {
        text-align: right;
        max-width: 240px;
        margin-left: auto;
        margin-right: 0;
    }
    
    /* Align waitlist buttons with videos */
    .language-button {
        padding: 0.9rem 1.2rem;
        font-size: 0.95rem;
        max-width: 240px;
        width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1.5rem auto 0 auto;
    }
    
    /* Ensure buttons align with videos */
    .hero-left .language-button {
        align-self: flex-start;
        margin-left: 0;
        margin-right: auto;
    }
    
    .hero-right .language-button {
        align-self: flex-end;
        margin-left: auto;
        margin-right: 0;
    }
    
    /* Ensure scroll arrow stays centered */
    .scroll-arrow-container {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Scale down titles to match hero content */
    .section-title {
        font-size: 2.6rem;
    }
    
    .titles-separator {
        height: 55px;
    }
}

/* Further responsive adjustments for even narrower tablets (820px and below) */
@media (max-width: 820px) {
    /* Continue reducing top padding */
    .hero-section {
        padding: 5.5rem 0 7rem 0;
    }
    
    .hero-container {
        max-width: 98vw;
        padding: 1.2rem 1rem;
        gap: 0.8rem;
    }
    
    .hero-left, .hero-right {
        width: 32%;
        max-width: 260px;
        min-width: 220px;
        gap: 1.2rem;
    }
    
    .hero-center {
        width: 18%;
        max-width: 220px;
        min-width: 160px;
    }
    
    .center-fox {
        width: 220px;
        transform: translateY(-10rem);
    }
    
    .video-container {
        width: 220px;
        height: 330px;
    }
    
    .video-title {
        font-size: 1.7rem;
        margin-bottom: 0.7rem;
    }
    
    /* Fix Spanish title alignment */
    .hero-right .video-title {
        text-align: right;
        max-width: 220px;
        min-width: 220px;
        margin-left: auto;
        margin-right: 0;
        line-height: 1.2;
    }
    
    /* Fix Spanish rotating word alignment at narrow widths */
    .hero-right #spanish-word {
        text-align: right !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: 180px;
        position: relative;
    }
    
    .video-description {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    /* Fix Spanish description alignment */
    .hero-right .video-description {
        text-align: right;
        max-width: 220px;
        margin-left: auto;
        margin-right: 0;
    }
    
    /* Align waitlist buttons with videos */
    .language-button {
        padding: 0.8rem 1.1rem;
        font-size: 0.9rem;
        max-width: 220px;
        width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1.2rem auto 0 auto;
    }
    
    /* Ensure buttons align with videos */
    .hero-left .language-button {
        align-self: flex-start;
        margin-left: 0;
        margin-right: auto;
        padding: 0.8rem 1.1rem;
        font-size: 0.9rem;
    }
    
    /* Spanish button needs more space and smaller text */
    .hero-right .language-button {
        align-self: flex-end;
        margin-left: auto;
        margin-right: 0;
        padding: 0.7rem 0.9rem;
        font-size: 0.85rem;
        max-width: 220px;
        width: 220px;
    }
    
    .section-title {
        font-size: 2.3rem;
    }
    
    .titles-separator {
        height: 50px;
    }
    
    /* Video controls adjustments for 820px breakpoint - make controls fit smaller videos */
    .hero-left .video-controls,
    .hero-right .video-controls {
        padding: 1.2rem 0.8rem 0.8rem !important; /* Reduced from 2rem 1rem 1rem */
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
        border-radius: 0 0 15px 15px;
    }
    
    .hero-left .control-buttons,
    .hero-right .control-buttons {
        gap: 0.6rem !important; /* Reduced from 1rem */
        font-size: 1rem; /* Slightly smaller */
    }
    
    .hero-left .control-btn, .hero-left .fullscreen-btn,
    .hero-right .control-btn, .hero-right .fullscreen-btn {
        font-size: 1rem !important; /* Reduced from 1.2rem */
        padding: 0.4rem !important; /* Reduced from 0.5rem */
    }
    
    .hero-left .volume-slider,
    .hero-right .volume-slider {
        width: 60px !important; /* Reduced from 80px */
    }
    
    .hero-left .time-display,
    .hero-right .time-display {
        font-size: 0.8rem !important; /* Reduced from 0.9rem */
        margin-left: 0.6rem !important; /* Reduced from 1rem */
    }
    
    .hero-left .progress-bar,
    .hero-right .progress-bar {
        height: 5px !important; /* Slightly reduced */
        margin-bottom: 0.8rem !important; /* Reduced spacing */
    }
    
    .hero-left .progress-bar:hover,
    .hero-right .progress-bar:hover {
        height: 6px !important; /* Proportionally smaller */
    }
}

/* Final responsive adjustments before mobile (760px and below) */
@media (max-width: 760px) {
    /* Continue reducing top padding for closer header spacing */
    .hero-section {
        padding: 5rem 0 6rem 0;
    }
    
    .hero-container {
        padding: 1rem 0.8rem;
        gap: 0.5rem;
    }
    
    .hero-left, .hero-right {
        width: 34%;
        max-width: 240px;
        min-width: 200px;
        gap: 1rem;
    }
    
    .hero-center {
        width: 16%;
        max-width: 200px;
        min-width: 140px;
    }
    
    .center-fox {
        width: 190px;
        transform: translateY(-8rem);
    }
    
    .video-container {
        width: 200px;
        height: 300px;
    }
    
    .video-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
    }
    
    /* Fix Spanish title alignment */
    .hero-right .video-title {
        text-align: right;
        max-width: 200px;
        min-width: 200px;
        margin-left: auto;
        margin-right: 0;
        line-height: 1.2;
    }
    
    /* Fix Spanish rotating word alignment at very narrow widths */
    .hero-right #spanish-word {
        text-align: right !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: 160px;
        position: relative;
    }
    
    .video-description {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    /* Fix Spanish description alignment */
    .hero-right .video-description {
        text-align: right;
        max-width: 200px;
        margin-left: auto;
        margin-right: 0;
    }
    
    /* Align waitlist buttons with videos */
    .language-button {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
        max-width: 200px;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1rem auto 0 auto;
    }
    
    /* Ensure buttons align with videos */
    .hero-left .language-button {
        align-self: flex-start;
        margin-left: 0;
        margin-right: auto;
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Spanish button needs even more compact styling */
    .hero-right .language-button {
        align-self: flex-end;
        margin-left: auto;
        margin-right: 0;
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
        max-width: 200px;
        width: 200px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .titles-separator {
        height: 45px;
    }
    
    .scroll-arrow-btn {
        width: 50px;
        height: 50px;
    }
    
    .arrow-down {
        font-size: 1.2rem;
    }
}

/* Remove emojis and arrows from waitlist buttons at 790px and narrower */
@media (max-width: 790px) {
    .language-button .btn-emoji,
    .language-button .btn-arrow {
        display: none !important;
    }
    
    /* Improve text spacing with emojis removed and maintain alignment */
    .language-button {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
        gap: 0;
        margin: 1rem auto 0 auto;
    }
    
    /* Ensure English button aligns with video */
    .hero-left .language-button {
        align-self: flex-start;
        margin-left: 0;
        margin-right: auto;
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    
    /* Spanish button can now use larger text with more space and proper alignment */
    .hero-right .language-button {
        align-self: flex-end;
        margin-left: auto;
        margin-right: 0;
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
}









/* Mobile Design - Hide hero section for main landing page, show fox section instead */
@media (max-width: 730px) {
    /* BULLETPROOF MOBILE VIEWPORT SETUP */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        overflow-x: hidden; /* Prevent any horizontal overflow */
        width: 100%;
        max-width: 100vw;
    }
    
    body {
        overflow-x: hidden; /* Prevent horizontal scroll */
        width: 100%;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* UNIVERSAL MOBILE CENTERING SYSTEM */
    * {
        box-sizing: border-box; /* Ensure all elements include padding/border in width */
    }
    
    /* Hide tablet line breaks on mobile */
    .tablet-break {
        display: none !important;
    }

    /* HIDE hero section and scroll arrow on mobile for main landing page only */
    .hero-section {
        display: none !important; /* Completely hide hero section on mobile */
    }
    
    .scroll-arrow-container {
        display: none !important; /* Hide scroll arrow since hero is gone */
    }
    
    /* BULLETPROOF MOBILE CONTAINER SYSTEM */
    .new-section {
        margin: 0;
        padding: max(9rem, calc(140px + env(safe-area-inset-top))) 0 max(4rem, calc(3rem + env(safe-area-inset-bottom))) 0;
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        overflow-x: hidden; /* Never allow horizontal overflow */
        box-sizing: border-box;
    }
    
    /* Hide titles since fox section is now PRIMARY mobile experience */
    .titles-container {
        display: none !important; /* Remove "More Information" titles completely */
    }
    
    /* Add single fox image at the top for mobile - centered above cards */
    .new-section .section-content::before {
        content: '';
        display: block;
        width: 200px;
        height: 200px;
        background-image: url('fox/ChatGPT Image Jun 11, 2025, 03_43_10 PM.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 auto 3rem auto;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
    }
    
    .hero-container {
        max-width: 100%;
        gap: 2rem; /* More spacing for bigger text + bigger buttons */
        padding: 0 1rem; /* More comfortable padding */
        flex-direction: column;
        align-items: center;
        margin-top: 0; /* Remove negative margin to prevent header overlap */
    }
    
    /* Increase spacing when any video is expanded */
    .hero-container:has(.video-container.expanded) {
        gap: 3rem; /* More spacing when expanded to accommodate everything */
    }
    
    .hero-left, .hero-right {
        width: 100%;
        max-width: 100%;
        gap: 1rem; /* Better internal spacing */
        order: unset;
    }
    
    .hero-center {
        display: none;
    }
    
    /* MOBILE VIDEO EXPANDABLE SYSTEM - SMALLER SIZE like waitlist buttons */
    .hero-left .video-container, 
    .hero-right .video-container {
        width: min(95vw, 360px); /* Smaller width to match waitlist button style */
        height: 80px; /* Much smaller collapsed height - same visual weight as waitlist buttons */
        max-width: 95vw;
        min-width: 280px; /* Smaller minimum width */
        transform: none;
        margin: 0 auto;
        position: relative;
        border-radius: 25px; /* Same radius as waitlist buttons */
        overflow: hidden;
        background: linear-gradient(135deg, #8B5CF6, #A78BFA);
        transition: height 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); /* Same shadow as waitlist buttons */
    }
    
    /* Hover effect for collapsed videos */
    .hero-left .video-container:not(.expanded):hover,
    .hero-right .video-container:not(.expanded):hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    }
    
    /* Pulse animation for collapsed videos to indicate interactivity */
    .hero-left .video-container:not(.expanded),
    .hero-right .video-container:not(.expanded) {
        animation: subtlePulse 3s ease-in-out infinite;
    }
    
    @keyframes subtlePulse {
        0%, 100% { box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); }
        50% { box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5); }
    }
    
    /* Expanded state when video is active */
    .hero-left .video-container.expanded, 
    .hero-right .video-container.expanded {
        height: min(75vh, 520px); /* Full height when expanded */
        cursor: default;
        box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
    }
    
    /* Video tap overlay for collapsed state - becomes close button when expanded */
    .hero-left .video-container::before,
    .hero-right .video-container::before {
        position: absolute;
        z-index: 20;
        transition: all 0.4s ease;
        border-radius: 50%;
        cursor: pointer;
    }
    
    /* Collapsed state - full overlay */
    .hero-left .video-container:not(.expanded)::before,
    .hero-right .video-container:not(.expanded)::before {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(167, 139, 250, 0.9));
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        border-radius: 25px; /* Match new video container border radius */
    }
    
    /* Expanded state - close button */
    .hero-left .video-container.expanded::before,
    .hero-right .video-container.expanded::before {
        content: '×';
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        font-weight: bold;
        pointer-events: auto;
        backdrop-filter: blur(10px);
    }
    
    .hero-left .video-container.expanded::before:hover,
    .hero-right .video-container.expanded::before:hover {
        background: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }
    
    /* Tap to see video text - MAXIMUM READABILITY - Optimized for smaller buttons */
    .hero-left .video-container::after,
    .hero-right .video-container::after {
        content: '▶ Tap to see video';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 1rem; /* Optimized for smaller button height */
        font-weight: 800; /* Even bolder for maximum visibility */
        text-align: center;
        z-index: 11;
        transition: opacity 0.4s ease, transform 0.3s ease;
        pointer-events: none;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9); /* Multiple shadows for extreme contrast */
        white-space: nowrap;
        letter-spacing: 0.8px; /* Optimized letter spacing for smaller size */
        background: rgba(0, 0, 0, 0.35); /* Slightly darker background for better readability */
        padding: 0.4rem 0.8rem; /* Smaller padding for smaller button */
        border-radius: 20px; /* Smaller rounded background */
        backdrop-filter: blur(5px); /* Blur background for better contrast */
        border: 1px solid rgba(255, 255, 255, 0.25); /* Slightly more visible border */
    }
    
    /* Spanish video button text */
    .hero-right .video-container::after {
        content: '▶ Click para ver video'; /* Spanish text for right side video */
    }
    
    /* Hover effect on text */
    .hero-left .video-container:not(.expanded):hover::after,
    .hero-right .video-container:not(.expanded):hover::after {
        transform: translate(-50%, -50%) scale(1.05);
    }
    
    /* Hide text when expanded */
    .hero-left .video-container.expanded::after,
    .hero-right .video-container.expanded::after {
        opacity: 0;
        pointer-events: none;
    }
    
    /* Different gradient for right side */
    .hero-right .video-container {
        background: linear-gradient(135deg, #A78BFA, #C4B5FD);
    }
    
    .hero-right .video-container:not(.expanded)::before {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.9), rgba(196, 181, 253, 0.9));
        border-radius: 25px; /* Match mobile video container border radius */
    }
    
    /* Keep English/Spanish landing pages with original mobile video size */
    .hero-media .video-container {
        width: min(280px, 80vw); /* Original size for English/Spanish pages */
        height: min(280px, 80vw); /* Keep square aspect ratio */
        max-width: 320px; /* Original maximum */
        min-width: 200px; /* Original minimum */
        transform: none;
        margin: 0 auto;
        position: relative;
    }
    
    /* MOBILE VIDEO CONTROLS - Hidden when collapsed, visible when expanded */
    .hero-left .video-container .video-controls,
    .hero-right .video-container .video-controls {
        display: block;
        opacity: 0; /* Hidden by default in collapsed state */
        visibility: hidden;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        transition: opacity 0.4s ease, visibility 0.4s ease;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 15;
    }
    
    /* Show controls when expanded */
    .hero-left .video-container.expanded .video-controls,
    .hero-right .video-container.expanded .video-controls {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hide video element when collapsed */
    .hero-left .video-container .hero-video,
    .hero-right .video-container .hero-video {
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    /* Show video when expanded */
    .hero-left .video-container.expanded .hero-video,
    .hero-right .video-container.expanded .hero-video {
        opacity: 1;
    }
    
    /* Hide custom play button when collapsed */
    .hero-left .video-container .custom-play-button,
    .hero-right .video-container .custom-play-button {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    
    /* Show play button when expanded */
    .hero-left .video-container.expanded .custom-play-button,
    .hero-right .video-container.expanded .custom-play-button {
        opacity: 1;
        pointer-events: auto;
    }
    

    
    /* Keep English/Spanish pages with original hover-based controls */
    .hero-media .video-container .video-controls {
        display: block;
        opacity: 0;
        visibility: hidden;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        transition: opacity 0.3s ease;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
    }
    
    .hero-media .video-wrapper:hover .video-controls.visible {
        opacity: 1;
        visibility: visible;
    }
    
    /* Keep hover controls working for main page - only when visible class is present */
    .hero-left .video-wrapper:hover .video-controls.visible,
    .hero-right .video-wrapper:hover .video-controls.visible {
        opacity: 1 !important;
    }
    
    /* Ensure video controls are always visible when video is playing - main page only */
    .hero-left .video-wrapper .custom-play-button.playing ~ .video-controls,
    .hero-right .video-wrapper .custom-play-button.playing ~ .video-controls {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Make sure mobile users can tap on videos without accidentally hitting play button */
    @media (max-width: 730px) {
        .custom-play-button.playing {
            pointer-events: none !important;
            opacity: 0 !important;
        }
        
        /* Ensure controls are easily accessible on touch devices */
        .video-controls {
            pointer-events: auto !important;
            touch-action: manipulation !important;
        }
        
        /* Bigger play button for larger mobile videos - MAIN PAGE ONLY */
        .hero-left .custom-play-button,
        .hero-right .custom-play-button {
            width: 100px !important;
            height: 100px !important;
            font-size: 2.5rem !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        }
        
        .hero-left .custom-play-button:hover,
        .hero-right .custom-play-button:hover {
            transform: translate(-50%, -50%) scale(1.1) !important;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
        }
        
        /* Keep original play button size for English/Spanish pages */
        .hero-media .custom-play-button {
            width: 80px;
            height: 80px;
            font-size: 2rem;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }
        
        .hero-media .custom-play-button:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
        }
    }
    
    /* Mobile video mute button - compact for phones */
    .video-mute-button {
        position: absolute;
        top: 12px; /* Slightly closer to edge */
        right: 12px;
        width: 40px; /* Smaller for phone screens */
        height: 40px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        display: none; /* Hidden by default */
        align-items: center;
        justify-content: center;
        font-size: 1.1rem; /* Smaller icon */
        color: white;
        cursor: pointer;
        z-index: 15;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    }
    
    /* Safari Mobile Video Control Fixes - AGGRESSIVE */
    .hero-video {
        -webkit-playsinline: true !important;
        -webkit-appearance: none !important;
        -webkit-media-controls: none !important;
    }
    
    /* Hide Safari mobile video controls - ALL ELEMENTS on high DPI screens */
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .hero-video::-webkit-media-controls,
        .hero-video::-webkit-media-controls-enclosure,
        .hero-video::-webkit-media-controls-panel,
        .hero-video::-webkit-media-controls-start-playback-button,
        .hero-video::-webkit-media-controls-overlay-play-button,
        .hero-video::-webkit-media-controls-play-button,
        .hero-video::-webkit-media-controls-overlay-enclosure,
        .hero-video::-webkit-media-controls-overlay {
            display: none !important;
            -webkit-appearance: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            position: absolute !important;
            left: -9999px !important;
            z-index: -1 !important;
        }
        
        /* Force video to have no native controls on mobile Safari */
        .hero-video {
            -webkit-appearance: none !important;
            appearance: none !important;
        }
    }
    
    .video-mute-button:hover {
        background: rgba(0, 0, 0, 0.9);
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }
    
    .video-mute-button.visible {
        display: flex !important;
    }
    
    .video-mute-button.muted {
        background: rgba(220, 38, 38, 0.8);
        border-color: rgba(255, 255, 255, 0.4);
    }
    
    .video-mute-button.muted:hover {
        background: rgba(220, 38, 38, 0.9);
    }
    
    /* Override desktop video rotations for mobile */
    .hero-left .video-container,
    .hero-right .video-container {
        transform: none;
    }
    
    /* Content ordering for mobile - simplified since buttons are now absolute */
    .hero-left .video-header {
        order: 1;
    }
    
    .hero-left .video-container {
        order: 2;
        margin-bottom: 2rem; /* Even more spacing to prevent overlap */
    }
    
    .hero-right .video-header {
        order: 1;
    }
    
    .hero-right .video-container {
        order: 2;
        margin-bottom: 2rem; /* Even more spacing to prevent overlap with waitlist button */
    }
    
    /* More spacing when expanded */
    .hero-left .video-container.expanded {
        margin-bottom: 2.5rem; /* More space when expanded */
    }
    
    .hero-right .video-container.expanded {
        margin-bottom: 2.5rem; /* More space when expanded */
    }
    
    /* Ensure fox elements stay hidden */
    .center-fox,
    .mascot-placeholder {
        display: none;
    }
    
    /* Language buttons - BIGGER like video cards, positioned underneath videos for mobile */
    .language-button {
        position: relative;
        padding: 1.6rem 2rem; /* Much bigger padding - same visual weight as video cards */
        font-size: 1.2rem; /* Larger, clearer text */
        border-radius: 25px;
        max-width: min(95vw, 420px); /* Match video width for consistency */
        width: auto;
        min-width: 320px; /* Larger minimum for better presence */
        margin: 2rem auto 0 auto; /* More spacing for larger videos */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); /* Stronger shadow like video cards */
        font-weight: 700; /* Bolder text for better readability */
        backdrop-filter: blur(15px); /* More blur for premium feel */
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(167, 139, 250, 0.95));
        border: 2px solid rgba(255, 255, 255, 0.4); /* More prominent border */
        text-align: center;
        white-space: nowrap;
        line-height: 1.4; /* Better line spacing */
        transition: all 0.3s ease; /* Smooth interactions */
    }
    
    /* Remove desktop-specific positioning for mobile */
    .hero-left .language-button,
    .hero-right .language-button {
        position: relative;
        margin: 1rem auto 0 auto;
    }
    
    /* Special styling for right side button (Spanish) */
    .hero-right .language-button {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(196, 181, 253, 0.95));
    }
    
    .language-button:hover,
    .hero-left .language-button:hover,
    .hero-right .language-button:hover {
        transform: translateY(-4px) scale(1.06); /* More pronounced hover like video cards */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45); /* Stronger hover shadow */
    }
    
    .course-info {
        padding: 2rem;
    }
    
    .logo-combined {
        height: 36px;
    }
    
    /* =================================================
       MOBILE HAMBURGER MENU STYLES
       ================================================= */
    
    /* Hide mobile burger button */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .mobile-menu-toggle span {
        width: 25px !important;
        height: 3px !important;
        background: #4C1D95 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }
    
    /* Keep desktop nav visible on mobile */
    .header-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        transition: none !important;
        box-shadow: none !important;
        z-index: auto !important;
        display: flex !important;
        margin-left: 0 !important; /* Reset margin on mobile */
    }
    
    /* Mobile navigation links - keep desktop styling */
    .nav-link {
        font-size: 0.9rem !important;
        padding: 0.5rem 1rem !important;
        text-align: left !important;
        width: auto !important;
        justify-content: flex-start !important;
        color: #4C1D95 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    
    .nav-link:hover {
        text-decoration: none !important;
        color: #8B5CF6 !important;
    }
    
    /* Hide Learn/Aprender dropdown on mobile */
    .nav-dropdown {
        display: none !important;
    }
    
    /* Hide login button on mobile - only show in hamburger menu */
    .nav-login-btn {
        display: none !important;
    }
    
    /* Keep desktop nav visible but hide dropdown on mobile */
    .header-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        transition: none !important;
        box-shadow: none !important;
        z-index: auto !important;
        display: flex !important;
    }
    
    /* =================================================
       MOBILE TEXT AND ELEMENT CENTERING
       ================================================= */
    
    /* Center all text elements */
    * {
        text-align: center !important;
    }
    
    /* Override center alignment for mobile menu - force left alignment */
    .mobile-menu,
    .mobile-menu *,
    .mobile-menu-item,
    .mobile-menu-text,
    .mobile-menu-text *,
    .mobile-menu-text strong,
    .mobile-menu-text p {
        text-align: left !important;
    }
    
    body {
        text-align: center !important;
    }
    
    /* Center all main containers */
    .hero-container,
    .hero-left,
    .hero-right,
    .video-header,
    .video-title,
    .video-description,
    .language-button,
    .footer-content,
    .fox-text-content {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure all buttons are centered */
    .language-button,
    .fox-button,
    .login-button {
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .logo-fox {
        width: 36px;
        height: 36px;
    }
    
    /* More Information Section - Mobile Optimization */
    .bottom-fox-image {
        width: 120px;
        height: 120px;
        transform: translateY(-0.75rem);
    }
    
    /* MOBILE SECTION CONTENT - BULLETPROOF CENTERING */
    .section-content {
        width: 100%;
        max-width: 100vw;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow-x: visible; /* Allow shadows to show outside container */
        box-sizing: border-box;
    }
    
    /* BULLETPROOF MOBILE FOX CONTAINER */
    .bottom-foxes {
        width: 100%;
        max-width: 100vw;
        padding: 0 clamp(2rem, 8vw, 3rem); /* Increased padding to accommodate new shadows */
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(2rem, 5vh, 3.5rem); /* Increased gap to prevent shadow overlap */
        position: relative;
        overflow-x: visible; /* Allow shadows to show */
        box-sizing: border-box;
    }
    
    /* BULLETPROOF MOBILE FOX SECTION */
    .fox-section {
        width: 100%;
        max-width: min(400px, 92vw); /* Ensure cards never exceed viewport */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Hide individual fox images and containers on mobile */
    .fox-container-bottom {
        display: none !important;
    }
    
    .bottom-fox-image {
        display: none !important;
    }
    
    /* BULLETPROOF MOBILE FOX CARDS */
    .fox-text-content {
        width: 100%;
        max-width: min(320px, 80vw); /* Reduced width to leave space for shadows */
        min-width: min(280px, 75vw); /* Minimum size for very narrow screens */
        padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem); /* Fully responsive padding */
        margin: 0 auto;
        height: auto;
        min-height: clamp(200px, 30vh, 280px); /* Responsive height */
        border-radius: clamp(16px, 4vw, 24px); /* Responsive border radius */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        /* NEW IMPROVED SHADOW SYSTEM */
        box-shadow: 
            0 4px 12px rgba(139, 92, 246, 0.15),
            0 8px 24px rgba(139, 92, 246, 0.1),
            0 16px 32px rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(139, 92, 246, 0.15);
        backdrop-filter: blur(12px);
        gap: clamp(1rem, 3vh, 2rem);
        position: relative;
        box-sizing: border-box;
        overflow: hidden; /* Prevent any content overflow */
        /* Add subtle glow effect */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Hide descriptions for minimalistic design */
    .fox-description {
        display: none !important;
    }
    
    .fox-title {
        font-size: clamp(1.1rem, 4vw, 1.5rem); /* Fully responsive title */
        font-family: 'DM Sans', sans-serif;
        font-weight: 700;
        margin: 0;
        color: #4C1D95;
        line-height: 1.2;
        text-align: center;
        width: 100%;
        word-wrap: break-word;
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }
    
    .fox-button {
        padding: clamp(0.8rem, 2.5vh, 1.2rem) clamp(1.5rem, 5vw, 2.5rem); /* Fully responsive padding */
        font-size: clamp(0.9rem, 3vw, 1.1rem); /* Responsive font size */
        font-weight: 600;
        border-radius: clamp(20px, 5vw, 30px); /* Responsive border radius */
        margin: 0 auto;
        display: block;
        text-align: center;
        width: auto;
        max-width: 90%; /* Never exceed card width */
        min-width: clamp(120px, 35vw, 180px); /* Responsive minimum width */
        background: linear-gradient(135deg, #8B5CF6, #A78BFA);
        color: white;
        text-decoration: none;
        /* NEW IMPROVED BUTTON SHADOW */
        box-shadow: 
            0 4px 8px rgba(139, 92, 246, 0.25),
            0 8px 16px rgba(139, 92, 246, 0.15);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
        border: none;
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
    }
    
    .fox-button:hover {
        transform: translateY(-2px);
        box-shadow: 
            0 6px 12px rgba(139, 92, 246, 0.35),
            0 12px 24px rgba(139, 92, 246, 0.25),
            0 24px 48px rgba(139, 92, 246, 0.1);
        color: white;
        text-decoration: none;
    }
    
    /* Add hover effect for cards */
    .fox-text-content:hover {
        transform: translateY(-2px);
        box-shadow: 
            0 6px 16px rgba(139, 92, 246, 0.2),
            0 12px 32px rgba(139, 92, 246, 0.15),
            0 24px 48px rgba(0, 0, 0, 0.12);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .main-footer::before {
        top: -60px;
        height: 60px;
    }
    
    .main-footer::after {
        top: -40px;
        height: 40px;
    }
    
    /* Fox section as PRIMARY mobile experience - Enhanced styling */
    .new-section {
        padding-top: 2rem; /* Less top padding since hero is hidden */
        padding-bottom: 6rem; /* Increased to prevent footer overlap */
    }
    
    .new-section::before {
        top: -60px;
        height: 100px;
    }
    
    .new-section::after {
        top: -80px;
        height: 120px;
    }
    
    .scroll-arrow-container {
        bottom: 1.5rem;
    }
    
    .scroll-arrow-btn {
        width: 55px;
        height: 55px;
    }
    
    .arrow-down {
        font-size: 1.3rem;
    }
    
    /* Optimize Spanish word alignment for mobile - PERFECTLY CENTERED with "conversaciones" fix */
    #spanish-word {
        min-width: 200px; /* Much wider for "conversaciones" on mobile */
        margin-left: -35px; /* Stronger centering for longer words on mobile */
        text-align: center; /* Center Spanish words on mobile */
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Perfect centering technique for mobile */
    }
    
    #english-word {
        min-width: 140px;
        text-align: center; /* Center English words on mobile */
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Consistent centering technique */
    }
    
    .login-button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .titles-container {
        gap: 1.25rem;
        flex-direction: column;
        text-align: center;
        padding: 1rem 1rem 0 1rem;
        margin: 0 auto 2rem auto;
    }
    
    .section-title {
        font-size: 2.2rem;
        line-height: 1.1;
    }
    
    .english-title,
    .spanish-title {
        text-align: center;
    }
    
    .titles-separator {
        width: 3px;
        height: 50px;
        align-self: center;
    }
    
    /* Center all text content for mobile - MUCH MORE RESPONSIVE with overlap fix */
    .video-header {
        text-align: center;
        margin-bottom: 2.5rem; /* Even more spacing to prevent overlap with waitlist button */
    }
    
    .video-title {
        font-size: 2.4rem; /* MUCH BIGGER for better mobile impact */
        line-height: 1.3; /* Better line height for larger text */
        margin-bottom: 1rem; /* More spacing for better hierarchy */
        text-align: center;
        font-weight: 800; /* Bolder for better presence */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }
    
    /* Spanish title - create natural line breaks for mobile with perfect centering */
    .hero-right .video-title {
        max-width: 240px; /* Even wider for perfect text flow and centering */
        margin-left: auto;
        margin-right: auto;
        line-height: 1.2; /* Better for multi-line */
        text-align: center; /* Ensure title itself is centered */
        position: relative; /* For better centering control */
    }
    
    .video-description {
        font-size: 1.1rem; /* BIGGER for better readability */
        line-height: 1.6; /* Better line spacing */
        max-width: 95%; /* Use more screen space */
        margin-bottom: 2rem; /* More spacing to prevent overlap with video button */
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-weight: 500; /* Slightly bolder for better readability */
        opacity: 0.95; /* Slight transparency for hierarchy */
    }
    
    /* Optimize video controls for mobile - Always visible and touch-friendly, sized for bigger videos - MAIN PAGE ONLY */
    .hero-left .video-controls,
    .hero-right .video-controls {
        padding: 1.5rem 1.2rem 1rem !important;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
        border-radius: 0 0 16px 16px;
    }
    
    /* Keep original video control styling for English/Spanish pages */
    .hero-media .video-controls {
        padding: 2rem 1rem 1rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        border-radius: 0 0 20px 20px;
    }
    
    /* Enhanced controls for main page only */
    .hero-left .progress-bar,
    .hero-right .progress-bar {
        height: 12px !important; /* Bigger for better touch targets on larger videos */
        margin-bottom: 1rem;
        border-radius: 6px;
    }
    
    .hero-left .progress-bar:hover,
    .hero-right .progress-bar:hover {
        height: 14px;
    }
    
    .hero-left .progress-fill::after,
    .hero-right .progress-fill::after {
        width: 18px;
        height: 18px;
        right: -9px;
    }
    
    .hero-left .control-buttons,
    .hero-right .control-buttons {
        gap: 1.2rem; /* More spacing for larger video */
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-left .control-btn, .hero-left .fullscreen-btn,
    .hero-right .control-btn, .hero-right .fullscreen-btn {
        font-size: 1.6rem !important; /* Bigger for larger video */
        padding: 0.9rem !important;
        min-width: 52px !important; /* Bigger touch targets for larger interface */
        min-height: 52px !important;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
    }
    
    /* Enhanced hover effects for main page only */
    .hero-left .control-btn:hover, .hero-left .fullscreen-btn:hover,
    .hero-right .control-btn:hover, .hero-right .fullscreen-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
    
    /* Keep original control sizing for English/Spanish pages */
    .hero-media .progress-bar {
        height: 6px;
        margin-bottom: 1rem;
        border-radius: 3px;
    }
    
    .hero-media .progress-bar:hover {
        height: 8px;
    }
    
    .hero-media .progress-fill::after {
        width: 12px;
        height: 12px;
        right: -6px;
    }
    
    .hero-media .control-buttons,
    .hero-media .video-buttons {
        gap: 1rem;
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-media .control-btn, .hero-media .fullscreen-btn {
        font-size: 1.2rem;
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        background: none;
        transition: all 0.2s ease;
    }
    
    /* Keep original hover effects for English/Spanish pages */
    .hero-media .control-btn:hover, .hero-media .fullscreen-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Enhanced volume controls for main page only */
    .hero-left .volume-container,
    .hero-right .volume-container {
        gap: 0.8rem; /* More spacing for larger interface */
        display: flex;
        align-items: center;
    }
    
    .hero-left .volume-slider,
    .hero-right .volume-slider {
        width: 80px !important; /* Bigger for easier control on larger videos */
        height: 10px !important;
        border-radius: 5px;
    }
    
    .hero-left .time-display,
    .hero-right .time-display {
        font-size: 0.9rem; /* Larger text for bigger interface */
        margin-left: 0.8rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        display: block; /* Show time on mobile */
        min-width: 70px; /* Prevent layout shift */
    }
    
    /* Keep original volume controls for English/Spanish pages */
    .hero-media .volume-container,
    .hero-media .volume-control {
        gap: 0.5rem;
        display: flex;
        align-items: center;
    }
    
    .hero-media .volume-slider {
        width: 60px;
        height: 4px;
        border-radius: 2px;
    }
    
    .hero-media .video-time {
        font-size: 0.9rem;
        margin-left: 1rem;
        color: white;
    }
    
    /* Adjust fullscreen for mobile */
    .video-fullscreen-overlay {
        padding: 3rem 1.5rem;
    }
    
    .fullscreen-video-container {
        max-height: calc(100vh - 6rem);
        width: 85vw;
    }
    
    .fullscreen-close-btn {
        top: 15px;
        right: 15px;
        width: 26px;
        height: 26px;
        font-size: 1rem;
    }
}

/* CRITICAL FIX: Specific clearance for 730px to prevent header overlap */
@media (max-width: 730px) and (min-width: 601px) {
    .new-section {
        padding-top: 8rem !important; /* Reduced clearance - closer but still safe */
        margin-top: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* Also ensure titles are hidden since this is mobile view */
    .titles-container {
        display: none !important;
    }
    
    /* Ensure consistent card sizing at this breakpoint too */
    .fox-text-content {
        max-width: min(320px, 85vw) !important; /* Same as main mobile */
        min-height: auto !important; /* Same as main mobile */
        padding: 2rem 1.5rem !important; /* Same as main mobile */
    }
    
    .fox-title {
        font-size: 1.3rem !important; /* Same as main mobile */
    }
    
    /* Hide fox images consistently */
    .bottom-fox-image {
        display: none !important;
    }
    
    .fox-container-bottom {
        display: none !important;
    }
}

/* Intermediate mobile breakpoint - keep consistent card sizing */
@media (max-width: 600px) {
    /* MUCH safer header clearance - prevent any overlap */
    .new-section {
        padding-top: 11rem; /* Even more clearance to match the larger breakpoint */
        padding-bottom: 4rem;
        justify-content: flex-start; /* Ensure content starts from top */
    }
    
    /* Override any card sizing to maintain consistency - keep same as main mobile styles */
    .fox-text-content {
        max-width: min(320px, 85vw) !important; /* Same as main mobile */
        min-height: auto !important; /* Same as main mobile */
        padding: 2rem 1.5rem !important; /* Same as main mobile */
    }
    
    /* Hide fox images consistently */
    .bottom-fox-image {
        display: none !important;
    }
    
    .fox-title {
        font-size: 1.3rem !important; /* Same as main mobile */
    }
    
    .fox-description {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }
}

/* EXTRA NARROW SCREENS - BULLETPROOF SCALING */
@media (max-width: 450px) {
    .new-section {
        padding-top: max(8rem, calc(120px + env(safe-area-inset-top))) !important;
        overflow-x: hidden !important;
    }
    
    .bottom-foxes {
        padding: 0 clamp(0.5rem, 2vw, 1rem) !important; /* Minimal but safe padding */
        gap: clamp(1rem, 3vh, 2rem) !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .fox-section {
        width: 100% !important;
        max-width: min(320px, 85vw) !important; /* Aggressive but safe scaling */
        padding: 0 clamp(0.5rem, 1vw, 1rem) !important;
    }
    
    .fox-text-content {
        width: 100% !important;
        max-width: min(300px, 82vw) !important; /* Ultra-safe width for narrow screens */
        min-width: min(240px, 70vw) !important;
        padding: clamp(1rem, 3vw, 1.5rem) clamp(0.8rem, 2vw, 1.2rem) !important;
        min-height: clamp(180px, 25vh, 220px) !important;
    }
    
    .fox-title {
        font-size: clamp(1.2rem, 4vw, 1.4rem) !important; /* Increased minimum and preferred size for better readability */
        line-height: 1.15 !important; /* Slightly more breathing room */
    }
    
    .fox-button {
        padding: clamp(0.7rem, 2vh, 1rem) clamp(1.2rem, 4vw, 2rem) !important;
        font-size: clamp(0.85rem, 2.8vw, 1rem) !important;
        min-width: clamp(100px, 30vw, 150px) !important;
        max-width: 85% !important;
    }
}

/* Small Mobile Design - Hide hero section for main landing page, show fox section instead */
@media (max-width: 480px) {
    /* SMALL MOBILE HEADER - PERMANENT BACKGROUND (NO SCROLL EFFECT) */
    .header {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    /* HIDE hero section and scroll arrow on small mobile for main landing page only */
    .hero-section {
        display: none !important; /* Completely hide hero section on small mobile */
    }
    
    .scroll-arrow-container {
        display: none !important; /* Hide scroll arrow since hero is gone */
    }
    
    /* SMALL MOBILE - BULLETPROOF HEADER CLEARANCE */
    .new-section {
        margin: 0;
        padding: max(9.5rem, calc(145px + env(safe-area-inset-top))) 0 max(3rem, calc(2rem + env(safe-area-inset-bottom))) 0;
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Hide titles since fox section is now PRIMARY small mobile experience */
    .titles-container {
        display: none !important; /* Remove "More Information" titles completely */
    }
    
    /* =================================================
       SMALL MOBILE LAYOUT IMPROVEMENTS
       ================================================= */
    
    /* Center main hero elements without forcing everything */
    .hero-container,
    .hero-left,
    .hero-right,
    .video-header,
    .video-title,
    .video-description {
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure buttons are properly centered */
    .language-button,
    .fox-button,
    .login-button {
        margin: 0 auto;
        text-align: center;
    }
    
    .hero-container {
        gap: 1.8rem; /* More spacing for bigger text + bigger buttons on small mobile */
        padding: 0 1rem; /* More comfortable padding */
        margin-top: 0; /* Remove negative margin to prevent overlap */
    }
    
    /* Increase spacing when any video is expanded on small mobile */
    .hero-container:has(.video-container.expanded) {
        gap: 2.5rem; /* More spacing when expanded on small mobile */
    }
    
    /* Hide login button on small mobile - only show in hamburger menu */
    .nav-login-btn {
        display: none !important;
    }
    
    .hero-left, .hero-right {
        gap: 0.75rem; /* Better spacing on small screens */
    }
    
    /* SMALL MOBILE VIDEO EXPANDABLE SYSTEM - SMALLER SIZE like waitlist buttons */
    .hero-left .video-container, 
    .hero-right .video-container {
        width: min(92vw, 320px); /* Smaller width to match waitlist button style */
        height: 70px; /* Much smaller collapsed height - same visual weight as waitlist buttons */
        max-width: 92vw;
        min-width: 260px; /* Smaller minimum width */
        transform: none;
        margin: 0 auto;
        position: relative;
        border-radius: 22px; /* Same radius as waitlist buttons */
        overflow: hidden;
        background: linear-gradient(135deg, #8B5CF6, #A78BFA);
        transition: height 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
        cursor: pointer;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35); /* Same shadow as waitlist buttons */
    }
    
    /* Hover effect for collapsed videos on small mobile */
    .hero-left .video-container:not(.expanded):hover,
    .hero-right .video-container:not(.expanded):hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 18px rgba(139, 92, 246, 0.4);
    }
    
    /* Expanded state for small mobile */
    .hero-left .video-container.expanded, 
    .hero-right .video-container.expanded {
        height: min(70vh, 480px); /* Full height when expanded */
        cursor: default;
        box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
    }
    
    /* Video button text for small mobile - MAXIMUM READABILITY - Optimized for very small buttons */
    .hero-left .video-container::after,
    .hero-right .video-container::after {
        content: '▶ Tap to see video';
        font-size: 0.9rem; /* Smaller size optimized for very small button height */
        font-weight: 800; /* Even bolder for maximum visibility */
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9); /* Multiple shadows for extreme contrast */
        letter-spacing: 0.6px; /* Optimized letter spacing for very small size */
        background: rgba(0, 0, 0, 0.4); /* Darker background for better readability on small buttons */
        padding: 0.3rem 0.6rem; /* Very compact padding for tiny button */
        border-radius: 16px; /* Smaller rounded background */
        backdrop-filter: blur(5px); /* Blur background for better contrast */
        border: 1px solid rgba(255, 255, 255, 0.3); /* More visible border */
    }
    
    /* Spanish video button text for small mobile */
    .hero-right .video-container::after {
        content: '▶ Click para ver video'; /* Spanish text for right side video */
    }
    
    /* Different gradient for right side on small mobile */
    .hero-right .video-container {
        background: linear-gradient(135deg, #A78BFA, #C4B5FD);
    }
    
    .hero-right .video-container:not(.expanded)::before {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.9), rgba(196, 181, 253, 0.9));
        border-radius: 22px; /* Match small mobile video container border radius */
    }
    
    /* Keep English/Spanish landing pages with original small mobile video size */
    .hero-media .video-container {
        width: min(250px, 75vw); /* Original size for English/Spanish pages */
        height: min(250px, 75vw); /* Keep square aspect ratio */
        max-width: 280px; /* Original maximum */
        min-width: 180px; /* Original minimum */
        transform: none;
        margin: 0 auto;
        position: relative;
    }
    
    /* SMALL MOBILE VIDEO CONTROLS - Hidden when collapsed, visible when expanded */
    .hero-left .video-container .video-controls,
    .hero-right .video-container .video-controls {
        display: block;
        opacity: 0; /* Hidden by default in collapsed state */
        visibility: hidden;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        transition: opacity 0.4s ease, visibility 0.4s ease;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 15;
    }
    
    /* Show controls when expanded on small mobile */
    .hero-left .video-container.expanded .video-controls,
    .hero-right .video-container.expanded .video-controls {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Keep English/Spanish pages with original hover-based controls on small mobile */
    .hero-media .video-container .video-controls {
        display: block;
        opacity: 0;
        visibility: hidden;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        transition: opacity 0.3s ease;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
    }
    
    .hero-media .video-wrapper:hover .video-controls.visible {
        opacity: 1;
        visibility: visible;
    }
    
    /* Keep hover controls working for main page on small mobile - only when visible class is present */
    .hero-left .video-wrapper:hover .video-controls.visible,
    .hero-right .video-wrapper:hover .video-controls.visible {
        opacity: 1 !important;
    }
    
    /* Ensure video controls are always visible when video is playing on small mobile - main page only */
    .hero-left .video-wrapper .custom-play-button.playing ~ .video-controls,
    .hero-right .video-wrapper .custom-play-button.playing ~ .video-controls {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Make sure small mobile users can tap on videos without accidentally hitting play button */
    @media (max-width: 480px) {
        .custom-play-button.playing {
            pointer-events: none !important;
            opacity: 0 !important;
        }
        
        /* Ensure controls are easily accessible on small touch devices */
        .video-controls {
            pointer-events: auto !important;
            touch-action: manipulation !important;
        }
        
        /* Bigger play button for larger small mobile videos - MAIN PAGE ONLY */
        .hero-left .custom-play-button,
        .hero-right .custom-play-button {
            width: 90px !important;
            height: 90px !important;
            font-size: 2.3rem !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
        }
        
        .hero-left .custom-play-button:hover,
        .hero-right .custom-play-button:hover {
            transform: translate(-50%, -50%) scale(1.1) !important;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
        }
        
        /* Keep original play button size for English/Spanish pages on small mobile */
        .hero-media .custom-play-button {
            width: 70px;
            height: 70px;
            font-size: 1.8rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }
        
        .hero-media .custom-play-button:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
    }
    
    /* Mobile video mute button for small screens - compact */
    .video-mute-button {
        top: 10px; /* Closer to edge for smaller videos */
        right: 10px;
        width: 35px; /* Smaller for tiny videos */
        height: 35px;
        font-size: 1rem; /* Smaller icon */
    }
    
    /* Override desktop video rotations for small mobile */
    .hero-left .video-container,
    .hero-right .video-container {
        transform: none;
    }
    
    /* Content ordering for small mobile - simplified since buttons are now absolute */
    .hero-left .video-header {
        order: 1;
    }
    
    .hero-left .video-container {
        order: 2;
        margin-bottom: 1.8rem; /* Even more spacing to prevent overlap on small mobile */
    }
    
    .hero-right .video-header {
        order: 1;
    }
    
    .hero-right .video-container {
        order: 2;
        margin-bottom: 1.8rem; /* Even more spacing to prevent overlap with waitlist button on small mobile */
    }
    
    /* More spacing when expanded on small mobile */
    .hero-left .video-container.expanded {
        margin-bottom: 2rem; /* More space when expanded on small mobile */
    }
    
    .hero-right .video-container.expanded {
        margin-bottom: 2rem; /* More space when expanded on small mobile */
    }
    
    /* Ensure fox elements stay hidden */
    .center-fox,
    .mascot-placeholder {
        display: none;
    }
    
    /* Language buttons - BIGGER like video cards for small mobile */
    .language-button {
        position: relative;
        padding: 1.4rem 1.8rem; /* Much bigger padding - same visual weight as video cards */
        font-size: 1.1rem; /* Larger, clearer text for small mobile */
        border-radius: 22px;
        max-width: min(92vw, 380px); /* Match small mobile video width */
        width: auto; /* Auto width for text fitting */
        min-width: 290px; /* Larger minimum for better presence */
        margin: 1.5rem auto 0 auto; /* More spacing for larger videos */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35); /* Stronger shadow like video cards */
        font-weight: 700; /* Bolder text for better readability */
        backdrop-filter: blur(15px); /* More blur for premium feel */
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(167, 139, 250, 0.95));
        border: 2px solid rgba(255, 255, 255, 0.4); /* More prominent border */
        text-align: center;
        white-space: nowrap;
        line-height: 1.3; /* Better line spacing */
        transition: all 0.3s ease; /* Smooth interactions */
    }
    
    /* Remove desktop-specific positioning for small mobile */
    .hero-left .language-button,
    .hero-right .language-button {
        position: relative;
        margin: 0.5rem auto 0 auto;
    }
    
    /* Special styling for right side button (Spanish) on small mobile */
    .hero-right .language-button {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(196, 181, 253, 0.95));
    }
    
    .language-button:hover,
    .hero-left .language-button:hover,
    .hero-right .language-button:hover {
        transform: translateY(-3px) scale(1.05); /* More pronounced hover like video cards */
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45); /* Stronger hover shadow */
    }
    
    .logo-fox {
        width: 32px;
        height: 32px;
    }
    
    /* More Information Section - Small Mobile Optimization */
    .bottom-fox-image {
        width: 100px;
        height: 100px;
        transform: translateY(-0.5rem);
    }
    
    .bottom-foxes {
        padding: 0 1rem;
        gap: 2rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .fox-section {
        max-width: 320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .fox-text-content {
        padding: 3rem 1.25rem 1.5rem 1.25rem;
        max-width: 320px;
        min-height: 320px;
        border-radius: 14px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .fox-title {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }
    
    .fox-description {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }
    
    .fox-button {
        padding: 0.6rem 1.4rem;
        font-size: 0.85rem;
        border-radius: 18px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }
    
    .main-footer::before {
        top: -40px;
        height: 40px;
    }
    
    .main-footer::after {
        top: -25px;
        height: 25px;
    }
    
    /* SMALL MOBILE - BULLETPROOF FOX CONTAINER */
    .bottom-foxes {
        width: 100%;
        max-width: 100vw;
        padding: 0 clamp(1.5rem, 6vw, 2.5rem); /* Increased padding for shadows */
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(1.8rem, 4vh, 3rem); /* Increased gap for shadow space */
        position: relative;
        overflow-x: visible; /* Allow shadows to show */
        box-sizing: border-box;
    }
    
    .fox-section {
        width: 100%;
        max-width: min(380px, 90vw);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        box-sizing: border-box;
    }
    
    .fox-text-content {
        width: 100%;
        max-width: min(300px, 78vw); /* Reduced to leave more space for shadows */
        min-width: min(260px, 72vw);
        padding: clamp(1.2rem, 3vw, 2rem) clamp(0.8rem, 2.5vw, 1.5rem);
        margin: 0 auto;
        height: auto;
        min-height: clamp(190px, 28vh, 240px);
        border-radius: clamp(14px, 3.5vw, 20px);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        /* NEW IMPROVED SHADOW SYSTEM FOR SMALL MOBILE */
        box-shadow: 
            0 3px 8px rgba(139, 92, 246, 0.18),
            0 6px 16px rgba(139, 92, 246, 0.12),
            0 12px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(139, 92, 246, 0.18);
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.98);
        gap: clamp(1rem, 2.8vh, 1.8rem);
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .fox-title {
        font-size: clamp(1.15rem, 3.8vw, 1.4rem); /* Increased minimum for better readability */
        font-family: 'DM Sans', sans-serif;
        font-weight: 700; /* Slightly lighter for better readability */
        margin-bottom: clamp(0.6rem, 1.5vh, 1rem); /* Progressive spacing */
        color: #4C1D95;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        line-height: 1.2; /* Better line height for readability */
        text-align: center;
        word-wrap: break-word; /* Ensure long words wrap properly */
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }
    
    .fox-description {
        display: none !important; /* Keep descriptions hidden in mobile view */
    }
    
    .fox-button {
        padding: clamp(0.6rem, 1.8vh, 0.9rem) clamp(1rem, 4vw, 2rem); /* Progressive padding scaling */
        font-size: clamp(0.8rem, 2.2vw, 1rem); /* Progressive font scaling */
        font-weight: 600;
        border-radius: clamp(16px, 4vw, 20px); /* Scale border radius progressively */
        margin: 0 auto; /* Same centering as fox image */
        display: block;
        text-align: center;
        /* NEW IMPROVED BUTTON SHADOW FOR SMALL MOBILE */
        box-shadow: 
            0 3px 6px rgba(139, 92, 246, 0.3),
            0 6px 12px rgba(139, 92, 246, 0.18);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: clamp(120px, 30vw, 180px); /* Progressive minimum width scaling */
        max-width: 85%; /* Slightly smaller max width for narrow screens */
        white-space: nowrap;
        background: linear-gradient(135deg, #8B5CF6, #A78BFA);
        color: white;
        text-decoration: none;
        border: none;
        cursor: pointer;
    }
    
    .fox-button:hover {
        transform: translateY(-2px);
        box-shadow: 
            0 4px 8px rgba(139, 92, 246, 0.4),
            0 8px 16px rgba(139, 92, 246, 0.3),
            0 16px 32px rgba(139, 92, 246, 0.15);
    }
    
    /* Add hover effect for small mobile cards */
    .fox-text-content:hover {
        transform: translateY(-1px);
        box-shadow: 
            0 4px 12px rgba(139, 92, 246, 0.25),
            0 8px 20px rgba(139, 92, 246, 0.18),
            0 16px 32px rgba(0, 0, 0, 0.12);
    }
    
    /* Enhanced fox images for small mobile - COMPACT size for square cards */
    .bottom-fox-image {
        width: clamp(60px, 10vw, 75px); /* Much smaller size for compact small mobile cards */
        height: clamp(60px, 10vw, 75px); /* Maintain aspect ratio - very compact */
        transform: translateY(-6px); /* Smaller lift for compact design */
        margin-bottom: max(0.4rem, 1vh); /* Minimal spacing below image */
        border-radius: 50%; /* Circular fox images for modern look */
        box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3); /* Smaller shadow for compact design */
        border: 1.5px solid rgba(255, 255, 255, 0.8); /* Thinner border for very compact look */
    }
    
    .new-section::before {
        top: -40px;
        height: 80px;
    }
    
    .new-section::after {
        top: -60px;
        height: 100px;
    }
    
    .scroll-arrow-container {
        bottom: 1rem;
    }
    
    .scroll-arrow-btn {
        width: 50px;
        height: 50px;
    }
    
    .arrow-down {
        font-size: 1.1rem;
    }
    
    /* Further adjust for small mobile - PERFECTLY CENTERED with "conversaciones" fix */
    #spanish-word {
        min-width: 180px; /* Much wider for "conversaciones" on small mobile */
        margin-left: -25px; /* Stronger centering for longer words on small mobile */
        text-align: center; /* Center Spanish words on small mobile */
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Perfect centering technique for small mobile */
    }
    
    #english-word {
        min-width: 130px;
        text-align: center; /* Center English words on small mobile */
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Consistent centering technique */
    }
    
    .header-content {
        padding: 0 1rem;
    }
    
    .login-button {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
        width: 180px;
    }
    
    .logo-combined {
        height: 32px;
    }
    
    .header-nav {
        display: none;
    }
    
    /* Show hamburger menu on small mobile */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Hide Learn/Aprender dropdown on small mobile */
    .nav-dropdown {
        display: none !important;
    }
    
    .logo-fox {
        width: 32px;
        height: 32px;
    }
    
    .titles-container {
        gap: 1rem;
        padding: 0.75rem 1rem 0 1rem;
        margin: 0 auto 1.5rem auto;
    }
    
    .section-title {
        font-size: 1.8rem;
        line-height: 1.1;
    }
    
    .titles-separator {
        width: 2px;
        height: 40px;
        align-self: center;
    }
    
    /* Center all text content for small mobile - MUCH MORE RESPONSIVE with overlap fix */
    .video-header {
        text-align: center;
        margin-bottom: 2rem; /* Even more spacing to prevent overlap with waitlist button on small mobile */
    }
    
    .video-title {
        font-size: 2rem; /* MUCH BIGGER even on small mobile */
        line-height: 1.2; /* Better line height */
        margin-bottom: 0.8rem; /* Better spacing */
        text-align: center;
        font-weight: 800; /* Bolder for better presence */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }
    
    /* Spanish title - create natural line breaks for small mobile with perfect centering */
    .hero-right .video-title {
        max-width: 220px; /* Even wider for perfect text flow and centering */
        margin-left: auto;
        margin-right: auto;
        line-height: 1.15; /* Better for multi-line */
        text-align: center; /* Ensure title itself is centered */
        position: relative; /* For better centering control */
    }
    
    .video-description {
        font-size: 1rem; /* BIGGER text for better readability */
        line-height: 1.5; /* Better line spacing */
        margin-bottom: 1.5rem; /* More bottom margin to prevent overlap with video button */
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-weight: 500; /* Slightly bolder for better readability */
        max-width: 95%; /* Use more screen space */
        opacity: 0.95; /* Slight transparency for hierarchy */
    }
    
    /* Optimize video controls for small mobile - Always visible and touch-friendly, sized for bigger videos - MAIN PAGE ONLY */
    .hero-left .video-controls,
    .hero-right .video-controls {
        padding: 1.3rem 1rem 0.8rem !important;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
        border-radius: 0 0 14px 14px;
    }
    
    .hero-left .progress-bar,
    .hero-right .progress-bar {
        height: 11px !important; /* Bigger for better touch targets on larger small mobile videos */
        margin-bottom: 0.8rem;
        border-radius: 5px;
    }
    
    .hero-left .progress-bar:hover,
    .hero-right .progress-bar:hover {
        height: 13px;
    }
    
    .hero-left .progress-fill::after,
    .hero-right .progress-fill::after {
        width: 16px;
        height: 16px;
        right: -8px;
    }
    
    .hero-left .control-buttons,
    .hero-right .control-buttons {
        gap: 1rem; /* More spacing for larger small mobile video */
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-left .control-btn, .hero-left .fullscreen-btn,
    .hero-right .control-btn, .hero-right .fullscreen-btn {
        font-size: 1.5rem !important; /* Bigger for larger small mobile video */
        padding: 0.8rem !important;
        min-width: 48px !important; /* Bigger touch targets for larger interface */
        min-height: 48px !important;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
    }
    
    /* Enhanced hover effects for main page small mobile only */
    .hero-left .control-btn:hover, .hero-left .fullscreen-btn:hover,
    .hero-right .control-btn:hover, .hero-right .fullscreen-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
    
    /* Keep original small mobile control styling for English/Spanish pages */
    .hero-media .video-controls {
        padding: 1.5rem 0.8rem 0.8rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        border-radius: 0 0 16px 16px;
    }
    
    .hero-media .progress-bar {
        height: 6px;
        margin-bottom: 0.8rem;
        border-radius: 3px;
    }
    
    .hero-media .progress-bar:hover {
        height: 8px;
    }
    
    .hero-media .progress-fill::after {
        width: 10px;
        height: 10px;
        right: -5px;
    }
    
    .hero-media .control-buttons,
    .hero-media .video-buttons {
        gap: 0.8rem;
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-media .control-btn, .hero-media .fullscreen-btn {
        font-size: 1.1rem;
        padding: 0.4rem;
        min-width: 40px;
        min-height: 40px;
        border-radius: 50%;
        background: none;
        transition: all 0.2s ease;
    }
    
    /* Keep original hover effects for English/Spanish pages on small mobile */
    .hero-media .control-btn:hover, .hero-media .fullscreen-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Enhanced volume controls for main page small mobile only */
    .hero-left .volume-container,
    .hero-right .volume-container {
        gap: 0.6rem; /* More spacing for larger small mobile interface */
        display: flex;
        align-items: center;
    }
    
    .hero-left .volume-slider,
    .hero-right .volume-slider {
        width: 70px !important; /* Bigger for larger small mobile videos */
        height: 8px !important;
        border-radius: 4px;
    }
    
    .hero-left .time-display,
    .hero-right .time-display {
        font-size: 0.8rem; /* Larger text for bigger small mobile interface */
        margin-left: 0.6rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        display: block; /* Show time on small mobile */
        min-width: 60px; /* Prevent layout shift */
    }
    
    /* Keep original small mobile volume controls for English/Spanish pages */
    .hero-media .volume-container,
    .hero-media .volume-control {
        gap: 0.4rem;
        display: flex;
        align-items: center;
    }
    
    .hero-media .volume-slider {
        width: 50px;
        height: 4px;
        border-radius: 2px;
    }
    
    .hero-media .video-time {
        font-size: 0.8rem;
        margin-left: 0.8rem;
        color: white;
    }
    
    /* Adjust fullscreen padding for mobile */
    .video-fullscreen-overlay {
        padding: 2rem 1rem;
    }
    
    .fullscreen-video-container {
        max-height: calc(100vh - 4rem);
        width: 90vw;
    }
    
    .fullscreen-close-btn {
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
}

/* Discount Style Button */
.language-button.discount-style {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
    color: white;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    animation: floatButton 3s ease-in-out infinite;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    border: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.language-button.discount-style:hover {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
}

.hero-left .language-button.discount-style {
    transform: rotate(-2deg);
}

.hero-left .language-button.discount-style:hover {
    transform: rotate(-2deg) scale(1.05);
}

.hero-right .language-button.discount-style {
    transform: rotate(2deg);
}

.hero-right .language-button.discount-style:hover {
    transform: rotate(2deg) scale(1.05);
}

.btn-emoji {
    font-size: 1rem;
    margin-right: 0.3rem;
}

.btn-arrow {
    font-size: 1.2rem;
    margin-left: 0.3rem;
    transition: transform 0.3s ease;
}

/* Responsive button icons */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet specific button sizing */
    .language-button {
        max-width: 280px !important;
        min-width: 250px !important;
        padding: 1rem 0.9rem !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
    
    .btn-emoji {
        font-size: 0.9rem;
        margin-right: 0.3rem;
    }
    
    .btn-arrow {
        font-size: 1.1rem;
        margin-left: 0.3rem;
    }
}

@media (max-width: 730px) {
    .btn-emoji {
        font-size: 0.85rem;
        margin-right: 0.25rem;
    }
    
    .btn-arrow {
        font-size: 1rem;
        margin-left: 0.25rem;
    }
}

@media (max-width: 480px) {
    .btn-emoji {
        font-size: 0.75rem;
        margin-right: 0.2rem;
    }
    
    .btn-arrow {
        font-size: 0.9rem;
        margin-left: 0.2rem;
    }
}

.language-button.discount-style:hover .btn-arrow {
    transform: translateX(5px);
}

@keyframes floatButton {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Footer Centering */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    text-align: center;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.footer-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.footer-section h4,
.footer-heading {
    text-align: center;
    margin: 0 auto 1rem auto;
}

.footer-section ul,
.footer-links {
    text-align: center;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.footer-section li {
    text-align: center;
    margin: 0 auto;
}

.footer-section a {
    text-align: center;
    display: block;
    margin: 0 auto;
}

.footer-logo {
    text-align: center;
    margin: 0 auto 1rem auto;
}

.footer-description {
    text-align: center;
    margin: 0 auto;
}

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

/* Add smooth transitions for responsive changes */
@media (min-width: 1025px) {
    .hero-container,
    .video-container,
    .center-fox,
    .mascot-placeholder,
    .language-button,
    .fox-text-content,
    .video-title,
    .video-description {
        transition: all 0.3s ease;
    }
}

/* Responsive footer */
@media (max-width: 730px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 600px;
        margin: 0 auto 3rem auto;
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 400px;
        margin: 0 auto 3rem auto;
    }
}

/* Ensure the main container doesn't exceed viewport */
.hero-section,
.new-section,
.main-footer {
    box-sizing: border-box;
}

.main-footer *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ULTRA TINY SCREENS - ABSOLUTE MINIMUM SAFE SCALING */
@media (max-width: 350px) {
    .new-section {
        padding-top: max(7.5rem, calc(110px + env(safe-area-inset-top))) !important;
    }
    
    .bottom-foxes {
        padding: 0 clamp(0.3rem, 1vw, 0.8rem) !important;
        gap: clamp(0.8rem, 2.5vh, 1.5rem) !important;
    }
    
    .fox-section {
        max-width: min(280px, 80vw) !important;
        padding: 0 clamp(0.2rem, 0.5vw, 0.5rem) !important;
    }
    
    .fox-text-content {
        max-width: min(260px, 75vw) !important;
        min-width: min(200px, 65vw) !important;
        padding: clamp(0.8rem, 2.5vw, 1.2rem) clamp(0.6rem, 1.5vw, 1rem) !important;
        min-height: clamp(160px, 22vh, 200px) !important;
        border-radius: clamp(12px, 3vw, 16px) !important;
    }
    
    .fox-title {
        font-size: clamp(0.9rem, 3.2vw, 1.1rem) !important;
        line-height: 1.1 !important;
    }
    
    .fox-button {
        padding: clamp(0.6rem, 1.8vh, 0.9rem) clamp(1rem, 3.5vw, 1.5rem) !important;
        font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
        min-width: clamp(90px, 28vw, 130px) !important;
        border-radius: clamp(16px, 4vw, 20px) !important;
    }
} 

/* 🎥 YouTube Button Styling - Modern Social Media Style with Mobile Responsive */
.footer-links .youtube-btn,
.youtube-btn {
    background: linear-gradient(45deg, #FF6B35, #FF8E53) !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15) !important;
    width: 140px !important;
    text-align: center !important;
    margin-bottom: 0.75rem !important;
}

/* Remove bottom margin from the last YouTube button */
.footer-links li:has(.youtube-btn):last-child .youtube-btn,
.footer-links .youtube-btn:last-child,
.youtube-btn:last-child {
    margin-bottom: 0 !important;
}

/* Alternative approach - override li margins for YouTube buttons with broader compatibility */
.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links li:last-child {
    margin-bottom: 0;
}

/* Extra spacing specifically for YouTube button containers */
.footer-section:last-child .footer-links li {
    margin-bottom: 0.75rem !important;
}

.footer-section:last-child .footer-links li:last-child {
    margin-bottom: 0 !important;
}

/* Mobile responsive sizing */
@media (max-width: 768px) {
    .footer-links .youtube-btn,
    .youtube-btn {
        width: 160px !important;
        padding: 12px 20px !important;
        font-size: 1rem !important;
        gap: 10px !important;
        margin-bottom: 1rem !important;
    }

    .footer-links .yt-icon,
    .yt-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }

    /* Mobile spacing for YouTube button containers */
    .footer-section:last-child .footer-links li {
        margin-bottom: 1rem !important;
    }

    .footer-section:last-child .footer-links li:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .footer-links .youtube-btn,
    .youtube-btn {
        width: 180px !important;
        padding: 14px 22px !important;
        font-size: 1.1rem !important;
        gap: 12px !important;
        margin-bottom: 1.25rem !important;
    }

    .footer-links .yt-icon,
    .yt-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }

    /* Small mobile spacing for YouTube button containers */
    .footer-section:last-child .footer-links li {
        margin-bottom: 1.25rem !important;
    }

    .footer-section:last-child .footer-links li:last-child {
        margin-bottom: 0 !important;
    }
}

.footer-links .youtube-btn::before,
.youtube-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transition: all 0.5s ease !important;
    z-index: 1 !important;
}

.footer-links .youtube-btn:hover::before,
.youtube-btn:hover::before {
    left: 100% !important;
}

.footer-links .youtube-btn:hover,
.youtube-btn:hover {
    background: linear-gradient(45deg, #ffffff, #f8f9fa) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4) !important;
    border-color: #ffffff !important;
    color: #1a1a1a !important;
}

.footer-links .youtube-btn:active,
.youtube-btn:active {
    transform: translateY(-1px) scale(1.01) !important;
}

/* YouTube Icon Styling - Robust Background Swap */
.footer-links .yt-icon,
.yt-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background-image: url('./yt-icon-button.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: background-image 0.3s ease !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    /* Ensure visibility */
    opacity: 1 !important;
    vertical-align: middle !important;
}

.footer-links .youtube-btn:hover .yt-icon,
.youtube-btn:hover .yt-icon {
    background-image: url('./yt-icon-button-dark.png') !important;
}

/* 🎬 Video Loading Animation - Smooth Defocus Effect */
.video-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%,
        rgba(59, 130, 246, 0.15) 50%,
        rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    overflow: hidden;
}

.video-loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Enhanced video loading states */
.video-container video {
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-container video[data-loaded="true"] {
    opacity: 1;
}

/* Loading Animation Spinner */
.loading-spinner {
    width: 100px;
    height: 100px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid rgba(139, 92, 246, 0.8);
    border-radius: 50%;
    animation: video-loading-spin 1.2s linear infinite;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
}

@keyframes video-loading-spin {
    0% { 
        transform: rotate(0deg);
        border-top-color: rgba(139, 92, 246, 0.8);
    }
    33% { 
        border-top-color: rgba(59, 130, 246, 0.8);
    }
    66% { 
        border-top-color: rgba(139, 92, 246, 0.8);
    }
    100% { 
        transform: rotate(360deg);
        border-top-color: rgba(139, 92, 246, 0.8);
    }
}

/* Pulsing Animation for Added Effect */
.loading-spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: video-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes video-loading-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .loading-spinner {
        width: 90px;
        height: 90px;
        border-width: 3.5px;
    }
    
    .loading-spinner::before {
        width: 55px;
        height: 55px;
    }
}