/* Global Styles & Variables */
:root {
    --bg-color: #f0f4f8;
    --text-color: #1a1a1a;
    --accent-blue: #0077b6;
    /* Un azul más legible sobre blanco */
    --accent-purple: #7209b7;
    /* Un morado más sólido */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

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

body {
    background-color: transparent;
    /* Changed to transparent to show .hero-bg particles */
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Ensure particles are fixed and cover the whole screen */
.hero-bg,
#bg-particles {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 2px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-purple));
    color: white;
    font-weight: bold;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(157, 0, 255, 0.6);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Align to top to handle potentially different label heights */
}

.btn-china {
    background: linear-gradient(45deg, #023e8a, #0077b6);
    /* Deep Blue */
    box-shadow: 0 5px 15px rgba(2, 62, 138, 0.4);
}

.btn-england {
    background: linear-gradient(45deg, #7209b7, #f72585);
    /* Purple/Pink */
    box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4);
}

.btn-ireland {
    background: linear-gradient(45deg, #2e7d32, #66bb6a);
    /* Green */
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.4);
}

.hero-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.age-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Hero Section */
/* Hero Section Updated for Antigravity Style */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    /* background-image removed for carousel */
    /* background-size: cover; */
    /* background-position: center; */
    color: white;
    /* Default text color in hero */
}

/* Dark Overlay for Readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    /* Increased to 0.35 for better text contrast while keeping image visible */
    z-index: 1;
}

/* Background Canvas */
.hero-bg {
    position: fixed;
    /* Fixed to cover screen during scroll */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    /* Behind content */
    pointer-events: none;
    /* Let clicks pass through */
}

#bg-particles {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    /* Increased from 900px to fit long title */
    padding: 0 20px;
    transform: translateY(-15vh);
    /* Moved up as requested */
    width: 100%;
    /* Ensure it uses space */
}

/* Typography Minimalist */
/* Brand Overline - Small & Elegant */
.brand-overline {
    font-family: var(--font-body);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    /* Full white */
    margin-bottom: 10px;
    display: inline-block;
    border-bottom: 2px solid var(--accent-blue);
    padding-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    /* Stronger shadow */
}

/* Main Headline - Massive Impact but Light */
.main-headline {
    font-family: var(--font-heading);
    font-size: 3.5rem !important;
    font-weight: 800;
    /* Bold as requested */
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
    /* Heavy shadow */
}

.text-highlight {
    color: #4cc9f0;
    /* Reverted to light blue as requested */
    display: block;
    font-size: 3rem;
    font-weight: 700;
    /* Bolder */
    /* Semi-bold instead of black */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

/* Hero Description (Desktop) */
.hero-description {
    font-size: 1.5rem;
    /* Increased from 1.2rem */
    color: #ffffff;
    /* Pure white */
    margin-bottom: 40px;
    font-weight: 600;
    /* Bold */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
    /* Stronger shadow */
}

/* Mobile adjust */
@media (max-width: 768px) {
    .main-headline {
        font-size: 2rem !important;
        /* Force smaller size */
        margin-bottom: 15px;
    }

    .text-highlight {
        font-size: 1.8rem;
        /* Reduced from 3rem */
        line-height: 1.2;
    }

    .hero-description {
        font-size: 1rem;
        /* Smaller text on mobile */
        padding: 0 10px;
        margin-bottom: 20px;
    }
}

.hero p {
    color: #f0f0f0;
}

/* Glassmorphism Cards */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Section Styling */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 4px;
    background: var(--accent-blue);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .brand-name {
        font-size: 2.5rem;
        /* Smaller title */
        padding: 0 10px;
    }

    .hero p {
        font-size: 1.1rem;
        padding: 0 20px;
    }

    .hero-content {
        transform: translateY(2vh);
        /* Much less vertical shift on mobile to keep buttons visible */
        width: 100%;
        padding-top: 60px;
        /* Add some padding from top since navbar is fixed */
    }

    .layer-floating {
        width: 150%;
        /* Larger parallax layer to cover potential gaps on rotation/movement */
        max-width: none;
    }

    .glass-card {
        flex: 1 1 100%;
        /* Cards take full width on mobile */
    }

    h1,
    h2 {
        word-wrap: break-word;
        /* Prevent overflow */
    }
}

/* Innovation Section Typography */
.innovation-section {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    /* Stack intro and main text */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* Transparent to show particles */
    overflow: hidden;
    padding: 0;
}

.in-intro {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: #202124;
    margin-bottom: 2rem;
    /* Separated from the big text */
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 2;
    text-align: center;
    font-weight: 300;
}

.in-container {
    display: flex;
    align-items: center;
    line-height: 0.8;
    width: 90%;
    /* Ensure container takes 90% */
    justify-content: center;
    /* Center the massive text */
    gap: 2vw;
    /* Responsive gap */
}

.in-prefix {
    font-family: var(--font-heading);
    font-size: 20vw;
    /* Reduced from 25vw */
    /* Massive viewport-relativ size */
    font-weight: 300;
    /* Matching suffix weight or slightly different */
    color: transparent;
    -webkit-text-stroke: 2px #202124;
    /* Outline effect as differentiator */
    margin-right: 0;
    letter-spacing: -1vw;
    line-height: 0.8;
}

.in-suffixes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    /* Responsive gap */
}

.in-word {
    font-family: var(--font-heading);
    font-size: 7.5vw;
    /* Reduced from 11vw to fit TERNACIONAL */
    /* Responsive huge size */
    font-weight: 400;
    /* Slightly bolder to contrast with outline */
    /* Light */
    color: #202124;
    text-transform: uppercase;
    letter-spacing: 0.5vw;
    line-height: 0.9;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Mobile Adjustments for Innovation */
@media (max-width: 768px) {
    .innovation-section {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .in-container {
        flex-direction: row;
        /* Keep side-by-side */
        align-items: center;
        /* Center to ensure height alignment */
        justify-content: center;
        text-align: left;
        gap: 2vw;
        flex-wrap: nowrap;
        /* Prevent wrapping */
    }

    .in-prefix {
        font-size: 16vw;
        /* Reduced to match height of 2 lines */
        margin-right: 0;
        margin-bottom: 0px;
        line-height: 0.8;
        -webkit-text-stroke: 1px #202124;
    }

    .in-suffixes {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

    .in-word {
        font-size: 8vw;
        /* Adjusted to fit width */
        line-height: 0.9;
    }
}

/* Interactive Letter Styles */
.hover-letter {
    display: inline-block;
    /* Required for transform */
    cursor: default;
    transition: transform 0.3s ease;
}

.hover-letter:hover {
    transform: translateY(-10px) scale(1.1);
    color: var(--accent-blue);
    text-shadow: 0 10px 20px rgba(0, 119, 182, 0.4);
}

/* Video Showcase Styles */
.video-section {
    padding: 0;
    /* Remove padding for full bleed */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    /* White background to avoid black bars */
    position: relative;
    z-index: 10;
    margin-top: -1px;
    /* Fix sub-pixel gaps */
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    /* Video bg fallback */
}

/* The Frame Effect - Removed for Full Screen Clean Look */

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

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 20;
    pointer-events: none;
}

.video-overlay h3 {
    font-size: 3rem;
    color: white;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* Registration Process Cards Styles */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto;
}

.process-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.step-number {
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 5rem;
    /* Huge number */
    font-weight: 900;
    color: rgba(0, 0, 0, 0.15);
    /* Watermark effect */
    z-index: 0;
    line-height: 1;
}

.step-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    z-index: 1;
    position: relative;
}

.process-card h4 {
    margin: 10px 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: 700;
    z-index: 1;
    position: relative;
}

.process-card p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.5;
    z-index: 1;
    position: relative;
}

.step-detail {
    font-size: 0.8rem;
    color: var(--accent-blue);
    font-weight: 600;
    background: rgba(0, 119, 182, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 1;
    position: relative;
}

/* Highlight specifically the flights step if desired */
.highlight-step {
    border: 2px solid var(--accent-purple);
}

.highlight-step .step-number {
    color: rgba(157, 0, 255, 0.15);
}

/* On mobile, maybe stacking is automatic via grid, but ensure spacing */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
        /* Stack */
        padding: 0 20px;
    }

    .process-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 15px 20px;
    }

    .step-number {
        font-size: 3rem;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        opacity: 0.5;
    }

    .step-icon {
        margin-bottom: 0;
        margin-right: 20px;
        font-size: 2rem;
    }

    .process-card h4 {
        margin: 0 0 5px 0;
    }

    .process-card p {
        margin: 0;
        font-size: 0.85rem;
    }

    .step-detail {
        display: none;
        /* Hide extra detail on mobile if too cluttered, or adjust */
    }
}

/* =========================================
   NEW STYLES (Navbar, Cinematic, Fixes)
   ================================********* */

/* Navigation Bar Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    /* More opaque */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 15px 0;
}

.nav-container {
    max-width: 98%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-contact {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.nav-contact a {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

.nav-contact a:hover {
    color: var(--accent-blue);
}

@media (max-width: 900px) {
    .deskt-only {
        display: none;
    }
}

/* Floating Badge Styles */
.floating-badge {
    position: absolute;
    top: auto;
    /* Reset top */
    bottom: 10%;
    /* Move to bottom */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-purple);
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 20;
    animation: floatBadge 3s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--accent-purple);
}

@keyframes floatBadge {

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

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

@media (max-width: 768px) {
    .floating-badge {
        top: 80px;
        right: 50%;
        transform: translateX(50%);
        /* Center on mobile? No, animation conflicts with transform. Let's start with right/left */
        right: auto;
        left: 50%;
        margin-left: -130px;
        /* Rough trim centering or use calculation */
        /* Actually cleaner: */
        transform: none;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: fit-content;
        font-size: 0.8rem;
        padding: 10px 20px;
        animation: floatBadgeMobile 3s ease-in-out infinite;
    }

    @keyframes floatBadgeMobile {

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

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

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-blue);
}

/* Hamburger Menu (Mobile) */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: #333;
}

/* Mobile Responsiveness for Navbar */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-item {
        margin: 16px 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-link {
        display: block;
        padding: 20px 0;
        font-size: 1.2rem;
    }
}

/* Cinematic Grid Styles for Camps */
#camps {
    padding-top: 150px;
    /* Big spacing from video */
    padding-bottom: 100px;
}

.cinematic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    padding: 0 20px;
}

.cinematic-card {
    position: relative;
    height: 500px;
    /* Tall imposing cards */
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: block !important;
    text-decoration: none;
    background-color: #0f0c29;
    /* Fallback */
}

.cinematic-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.cinematic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

.cinematic-card:hover .cinematic-bg {
    transform: scale(1.1);
    /* Zoom effect on background */
}

/* Gradient Overlay */
.cinematic-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    transition: background 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.cinematic-card:hover::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(4, 30, 66, 0.5) 100%);
}

.cinematic-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 2;
    color: white;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.cinematic-card:hover .cinematic-content {
    transform: translateY(0);
}

.cinematic-tag {
    background: var(--accent-blue);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
}

.cinematic-content h3 {
    font-size: 3rem;
    margin: 10px 0;
    line-height: 1;
    font-weight: 800;
}

.cinematic-sub {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 20px;
}

.cinematic-details {
    font-size: 0.9rem;
    opacity: 0;
    /* Hidden initially */
    transform: translateY(20px);
    transition: all 0.4s ease 0.1s;
    /* Slight delay */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 15px;
    margin-top: 15px;
}

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

/* --- Cookie Consent Banner --- */
#cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10000;
    font-family: var(--font-body);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

#cookie-banner.hidden {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
}

#cookie-content {
    flex: 1;
    margin-right: 20px;
}

#cookie-content h3 {
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: var(--accent-blue);
}

#cookie-content p {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

#cookie-content a {
    color: var(--accent-blue);
    text-decoration: underline;
    font-weight: bold;
}

#cookie-actions {
    display: flex;
    gap: 10px;
}

#accept-cookies,
#reject-cookies {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

#accept-cookies {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #333;
    box-shadow: 0 4px 15px rgba(253, 185, 49, 0.3);
}

#accept-cookies:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(253, 185, 49, 0.4);
}



#reject-cookies {
    background: transparent;
    border: 2px solid #ef4b4b;
    color: #ef4b4b;
}

#reject-cookies:hover {
    background: #ef4b4b;
    color: white;
}

@media (max-width: 768px) {
    #cookie-banner {
        flex-direction: column;
        text-align: center;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 20px 20px 0 0;
        padding: 30px 20px;
    }

    #cookie-content {
        margin-right: 0;
        margin-bottom: 20px;
    }

    #cookie-actions {
        width: 100%;
        justify-content: center;
    }

    #accept-cookies,
    #reject-cookies {
        flex: 1;
        text-align: center;
    }
}

/* Color Fixes for Buttons and Tags v2 */
.btn-china {
    background: #d90429 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(217, 4, 41, 0.4);
    border: none !important;
}

.btn-china:hover {
    background: #ef233c !important;
    transform: translateY(-2px);
}

.btn-england {
    background: #0077b6 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 119, 182, 0.4);
    border: none !important;
}

.btn-england:hover {
    background: #023e8a !important;
    transform: translateY(-2px);
}

/* Specific fix for Ireland tag text color */
a[href='irlanda.php'] .camp-tag {
    color: white !important;
}

/* Tag Background Colors (Matching Buttons but lighter) */
/* China: Red Button -> Light Red BG */
a[href='china.php'] .camp-tag {
    background-color: rgba(217, 4, 41, 0.15) !important;
    color: #d90429 !important;
}

/* England: Blue Button -> Light Blue BG */
a[href='inglaterra.php'] .camp-tag {
    background-color: rgba(0, 119, 182, 0.15) !important;
    color: #0077b6 !important;
}

/* Ireland: Green Button -> Light Green BG */
/* Note: User previously asked for white text on Ireland tag. 
   If light BG is used, white text is unreadable. 
   I will use dark green text for consistency with the "lighter background" request 
   unless the user insists on white text. 
   Override the previous 'white' text rule for Ireland to ensure readability on light BG.
*/
a[href='irlanda.php'] .camp-tag {
    background-color: rgba(46, 125, 50, 0.15) !important;
    color: #2e7d32 !important;
    /* Dark Green to match button family */
}

/* Process Grid Styles (Restored and Fixed) */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    /* Force 3 columns */
    gap: 30px;
    margin-top: 50px;
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr !important;
    }
}

.process-card {
    background: white;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    /* Increased shadow opacity */
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* Ensure big watermark numbers don't overflow */
}

.process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    /* Stronger shadow on hover */
    border-color: var(--accent-blue);
}

/* New Stylish Step Number Design */
.step-number {
    position: absolute;
    top: -15px;
    left: -10px;
    /* Top left corner */
    transform: none;
    /* Reset transform */
    font-size: 5rem;
    /* Much larger */
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 0, 0, 0.15);
    /* Subtle watermark */
    z-index: 0;
    font-family: 'Outfit', sans-serif;
    transition: all 0.3s ease;
    background: transparent;
    /* Remove old bg */
    user-select: none;
}

.process-card:hover .step-number {
    color: rgba(0, 119, 182, 0.25);
    /* Slight blue tint on hover */
    transform: scale(1.1) rotate(-5deg);
}


.step-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
}

.process-card h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #333;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.process-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.highlight-step {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 2px solid var(--accent-blue);
}

.step-detail {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #888;
    background: #f9f9f9;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
}

/* Video Testimonials Styles */
.video-card .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    transition: all 0.3s ease;
}

.video-card:hover .play-overlay {
    background: var(--accent-purple);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Video Modal Styles */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    aspect-ratio: 9/16;
    max-height: 90vh;
    background: black;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

@media(max-width: 900px) {

    /* Crew Section Mobile Fix */
    .crew-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }

    .crew-text {
        text-align: center !important;
        padding: 0 20px;
    }

    .crew-image-container {
        order: -1;
        margin-top: 30px;
    }
}

/* Active Nav Link */
.nav-link.active {
    font-weight: 800 !important;
    color: var(--accent-blue) !important;
    border-bottom: 2px solid var(--accent-blue);
    padding-bottom: 5px;
}