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

body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden !important; /* Prevent horizontal expansion from ravens */
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

/* Mobile-specific body optimizations */
@media (max-width: 768px) {
    body {
        /* Enable momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        /* Disable pull-to-refresh on Chrome mobile */
        overscroll-behavior-y: none;
        /* Ensure body has height to scroll */
        position: relative;
        min-height: 100vh;
    }
}

/* Enhanced scroll snapping for precise positioning */
html {
    overflow-x: hidden !important; /* Prevent horizontal scrollbar from ravens */
    /* Safari-specific smooth scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Scroll snapping - desktop only */
@media (min-width: 769px) {
    html {
        scroll-snap-type: y proximity;
        /* Safari-specific smooth scroll behavior */
        scroll-behavior: smooth;
    }
}

/* Safari-specific scroll optimizations */
@supports (-webkit-touch-callout: none) {
    html, body {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loading-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 2rem;
    animation: logoPulse 0.8s ease-in-out 3;
    filter: drop-shadow(0 0 15px #dc2626);
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px #dc2626);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 25px #dc2626) drop-shadow(0 0 35px #dc2626);
        opacity: 1;
    }
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .loading-logo {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .loading-logo {
        max-width: 100px;
        margin-bottom: 1rem;
    }
}

/* Accessibility - respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .loading-logo {
        animation: none;
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 15px #dc2626);
    }
}

/* Background Container - Fixed positioned with scrolling image */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;  /* Changed from -2 to 0 to allow interactions */
    overflow: hidden;
}

.scrolling-background {
    position: relative;  /* Add relative positioning for absolute children */
    width: 100%;
    aspect-ratio: 1919 / 9156; /* Background aspect ratio - auto height calculation */
    background-size: cover; /* Cover ensures no cropping, aspect-ratio handles scaling */
    background-position: center top;
    background-repeat: no-repeat;
    transform: translateY(0);
    transition: transform 0.1s ease-out;
}

/* Mobile Background - Natural Scroll for Performance */
@media (max-width: 768px) {
    /* Make background scroll naturally with content on mobile */
    .background-container {
        position: absolute !important; /* ABSOLUTE so it scrolls with content */
        top: 0;
        left: 0;
        width: 100vw;
        height: auto !important; /* Auto height based on aspect ratio */
        /* NO padding - let background end naturally at DEFINE ADVENTURE */
    }
    
    .scrolling-background {
        background-image: url('./Mobil/mobilBG.jpg') !important;
        aspect-ratio: 1080 / 14279 !important; /* ACTUAL mobile background dimensions */
        background-size: contain !important; /* Prevent cropping on mobile */
        background-position: top center !important;
        width: 100vw !important;
        /* REMOVE transform animations for performance */
        transform: none !important;
        transition: none !important;
        /* Enable smooth native scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        /* Force GPU acceleration */
        will-change: auto !important;
    }
    
    /* Let background determine height naturally */
    .main-content {
        height: auto !important;
        min-height: auto !important; /* Remove forced height - background controls it */
    }
    
    /* Mobile carousel image styling */
    .story-image {
        width: 53%;
        height: auto;
        display: block;
        max-width: 400px;
    }
    
    .energy-image {
        width: 100%;
        height: auto;
        display: block;
        max-width: 100%;
        transform: scale(1.25);
        transform-origin: center center;
        /* Fix position to prevent shifting */
        position: relative;
    }
    
    /* Mobile Our Story carousel adjustments */
    .our-story-carousel {
        width: 80% !important; /* Wider on mobile for better visibility */
        left: 15% !important;  /* Right by 5% more (10% + 5% = 15%) */
        top: 77.1% !important; /* ORIGINAL POSITION */
    }
    
    /* Mobile story indicators positioning */
    .story-indicators {
        margin-top: 20.35vw !important;   /* Down by 0.5% more (19.85vw + 0.5vw = 20.35vw) */
        margin-left: -6.25vw !important;  /* Left by 2% more (-4.25vw - 2vw = -6.25vw) */
        display: flex !important;
        gap: 2vw !important;              /* Same gap as energy indicators on mobile */
    }
    
    /* Mobile story indicators size - 1.3x bigger to match energy dots */
    .story-indicators .indicator {
        width: 3.12vw !important;  /* 1.3x bigger (2.4vw * 1.3 = 3.12vw) */
        height: 3.12vw !important;
    }
    
    /* Mobile Natural Energy carousel adjustments */
    .natural-energy-carousel {
        width: 80% !important; /* Wider on mobile for better visibility */
        left: 5% !important;   /* Left by 5% more (10% - 5% = 5%) */
        top: 63% !important;   /* ORIGINAL POSITION */
    }
    
    /* Fix energy slide positioning on mobile - make it static like desktop */
    .energy-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Fix energy image container to maintain static layout */
    .energy-image-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        /* Set min-height based on scaled image to prevent jump */
        min-height: 30vw !important; /* Adjusted for mobile scaled images */
    }
    
    /* DISABLE RAVENS ON MOBILE FOR PERFORMANCE */
    .flying-ravens {
        display: none !important;
    }
    
    /* Mobile energy indicators positioning and size */
    .energy-indicators {
        top: 68.1% !important;    /* Down by 0.5% (67.6% + 0.5% = 68.1%) */
        left: 7.5% !important;     /* Back to previous position (7.5%) */
        display: flex !important;
        gap: 2vw !important;    /* Increased gap for better spacing on mobile */
    }
    
    .energy-indicators .energy-dot {
        width: 3.12vw !important;  /* 1.3x bigger (2.4vw * 1.3 = 3.12vw) */
        height: 3.12vw !important;
        position: relative !important;  /* Change from absolute to relative for flex layout */
    }
    
    /* Override individual positioning for mobile - use flex instead */
    .energy-indicators .energy-dot:nth-child(1),
    .energy-indicators .energy-dot:nth-child(2) {
        left: auto !important;
    }
    
    /* Mobile search bar adjustments */
    .search-bar-container {
        left: 42.5% !important;  /* Left by 4% more (46.5% - 4% = 42.5%) */
        top: 88% !important;     /* ORIGINAL POSITION */
        transform: translate(-50%, -50%) scale(0.9) !important;  /* 10% smaller */
    }
    
    .search-input {
        padding-left: 10px !important;  /* Left by 8px more (18px - 8px = 10px) */
        font-size: 1.26rem !important;  /* 10% smaller (1.4rem * 0.9 = 1.26rem) */
    }
    
    .search-bar-background {
        background-image: url('./Mobil/searchbar biely.png') !important;
    }
    
    /* Mobile contact form adjustments */
    .contact-form-container {
        width: 105% !important;  /* 10% bigger (95% + 10% = 105%) */
        left: 40% !important;    /* Right by 3% (37% + 3% = 40%) */
        top: 92.4% !important;   /* Down by 0.2% (92.2% + 0.2% = 92.4%) */
        transform: translate(-50%, -50%) scale(0.7) !important;  /* Smaller scale (0.9 -> 0.7) */
    }
    
    /* Mobile contact form input/textarea sizing */
    .contact-form-container input,
    .contact-form-container textarea {
        padding: 0.7rem !important;     /* Bigger padding for name/email fields */
        font-size: 1rem !important;     /* Bigger font for name/email fields */
    }
    
    .contact-form-container textarea {
        min-height: 50px !important;   /* Smaller textarea height */
    }
    
    /* Mobile submit button - much smaller and left aligned */
    .contact-form-container .designer-submit-btn {
        width: 40% !important;          /* 60% smaller (100% -> 40%) */
        padding: 0.5rem !important;     /* Smaller padding */
        font-size: 0.85rem !important;  /* Smaller font */
        margin: 0 !important;           /* Left aligned, no auto margin */
        display: block !important;      /* Block display */
    }
    
    /* Mobile contact info adjustments - hide on mobile */
    .contact-info-container {
        display: none !important;  /* Hide contact info on mobile */
    }
}

/* Desktop carousel image styling */
@media (min-width: 769px) {
    .story-image,
    .energy-image {
        width: 100%;
        height: auto;
        display: block;
        max-width: 100%;
        transform: scale(2.5);
        transform-origin: center center;
    }
}

/* Scale up Our Story slides with same positioning */
#story-slide-1 .story-image,
#story-slide-2 .story-image {
    transform: scale(2) translateX(11.5%) translateY(7.4%);
    transform-origin: center center;
}


/* Navigation Bar - Clean with Dynamic Backgrounds */
.main-navbar {
    position: fixed !important;
    top: 10px !important;
    left: 30px;
    right: 55px; /* Balanced position - halfway between 30px and 80px */
    z-index: 1000;
    background: transparent;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.5s ease-out; /* Only transition transform for game hide */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Prevent navbar from being affected by layout changes */
    will-change: transform;
    contain: layout style;
}

/* Logo on the left */
.nav-logo {
    flex-shrink: 0;
}

.logo-image {
    height: 48px;
    width: auto;
    transition: all 0.3s ease;
}

/* Default text - dark on top, white when scrolled */
.nav-text {
    color: #000000;
    text-shadow: none;
    transition: color 0.3s, background 0.3s, text-shadow 0.3s; /* Only transition colors, not position */
}

/* White text when scrolled */
.main-navbar.scrolled .nav-text:not(.nav-buy) {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 16px !important; /* Keep same padding */
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 48px; /* Fixed height to prevent jumping */
}

.nav-text[data-section="5"] { /* EXPLORE - hide for now since not in list */
    display: none;
}

.nav-text {
    font-family: 'Inter', 'Helvetica Neue', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s, color 0.3s, background 0.3s; /* Don't transition padding/margin */
    padding: 12px 16px !important; /* Keep padding consistent */
    border-radius: 12px;
    opacity: 0.85;
    position: relative;
    white-space: nowrap;
    user-select: none;
}

.nav-text:hover {
    transform: scale(1.05) translateY(-2px);
    opacity: 1;
}

/* Hover states for scrolled navbar */
.main-navbar.scrolled .nav-text:hover {
    background: rgba(0, 0, 0, 0.6);
}

.nav-text.active {
    opacity: 1;
    transform: scale(1.02);
}

/* Active states for scrolled navbar */
.main-navbar.scrolled .nav-text.active {
    background: rgba(0, 0, 0, 0.6);
}

/* Special styling for BUY button - ZIRRE red */
.nav-buy {
    background: #dc2626;
    color: #ffffff !important;
    border: 2px solid #dc2626;
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: 700;
    text-shadow: none !important;
}

.nav-buy:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    transform: scale(1.05) translateY(-2px);
}

/* Override scrolled state for BUY button */
.main-navbar.scrolled .nav-buy {
    background: #dc2626 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Mobile/Desktop visibility controls */
.mobile-only {
    display: none; /* Hidden by default (desktop) */
}

.desktop-only {
    display: flex; /* Visible by default (desktop) */
}

/* Hamburger Menu Styling */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 25px;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    flex-shrink: 0;
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    background: #000;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* White hamburger when scrolled */
.main-navbar.scrolled .hamburger-menu span {
    background: #fff !important;
}

/* Hamburger animation states */
.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

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

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

/* Mobile Menu Dropdown */
.mobile-menu-dropdown {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    transition: right 0.3s ease;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
}

.mobile-menu-dropdown.active {
    right: 0;
}

.mobile-menu-item {
    padding: 20px 30px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.mobile-menu-item:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

/* Desktop - hide mobile elements */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only {
        display: flex !important;
    }
    
    .mobile-menu-dropdown {
        display: none !important;
    }
}


/* Debug Overlay */
.debug-overlay {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: lime;
    padding: 15px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    z-index: 999;
    min-width: 200px;
    display: none; /* Hidden by default, can be toggled */
}

.debug-overlay.visible {
    display: block;
}

.debug-info {
    margin-bottom: 10px;
}

.debug-line {
    margin: 5px 0;
}

.debug-controls {
    border-top: 1px solid #333;
    padding-top: 10px;
}

.debug-controls button {
    background: #333;
    color: lime;
    border: 1px solid #555;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
}

.debug-controls button:hover {
    background: #555;
}

/* Main Content Styles */
.main-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;  /* Allow clicks to pass through to background */
}

.main-content.visible {
    opacity: 1;
}

/* Main container for sections */
main {
    position: relative;
    width: 100%;
}

/* Mobile main height fix */
@media (max-width: 768px) {
    main {
        /* Let background determine the height */
        height: auto !important;
        min-height: auto !important;
        position: relative;
    }
    
    /* Remove fixed viewport height on mobile for natural scrolling */
    .viewport-section {
        height: auto !important;
        min-height: auto !important; /* NO min-height on mobile - let background determine height */
        scroll-snap-align: none !important; /* Disable snap on mobile */
    }
}

/* Viewport Sections */
.viewport-section {
    position: relative;
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Container queries for responsive positioning */
    container-type: size;
}

/* Debug mode - section borders */
.debug-sections .viewport-section {
    border: 2px solid red;
    box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.3);
}

.debug-sections .viewport-section::before {
    content: "Section " attr(data-section);
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
}

/* Section Content Container */
.section-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Section Titles (temporary for testing) */
.section-title {
    color: white;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Text Overlay Styles */
.text-overlay {
    position: absolute;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.3rem;
    transform: translateX(-50%);
    
    /* Base positioning for 16:9 */
    top: 60%;
    left: 50%;
}

/* Person Detection Styles */
.person-detection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.detection-box {
    position: absolute;
    border: 2px solid #00ff00;
    border-radius: 4px;
    background: rgba(0, 255, 0, 0.1);
    animation: detectionPulse 2s ease-in-out infinite;
}

.person-box {
    top: 45%;
    left: 70%;
    width: 180px;
    height: 320px;
    border: 4px solid #00ff00 !important;
    background: rgba(0, 255, 0, 0.3) !important;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.8) !important;
    z-index: 1000;
}

.boundary-label {
    position: absolute;
    top: -30px;
    left: 0;
    background: #00ff00;
    color: #000000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

@keyframes detectionPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Responsive adjustments based on container aspect ratio */
@container (aspect-ratio > 1.9) {
    /* Ultrawide screens */
    .text-overlay {
        top: 58%;
        left: 50%;
    }
}

@container (aspect-ratio < 1.6) {
    /* Narrow screens (tablets portrait, etc.) */
    .text-overlay {
        top: 62%;
        left: 50%;
        font-size: 2.5rem;
    }
}

@container (max-width: 768px) {
    /* Mobile devices */
    .text-overlay {
        font-size: 2rem;
        letter-spacing: 0.2rem;
        top: 65%;
    }
    
    .section-title {
        font-size: 1.5rem;
        padding: 15px 30px;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .nav-icon {
        max-width: 100px;
        max-height: 70px;
        padding: 6px;
    }
    
    .nav-icons {
        gap: 12px;
    }
    
}

@media (max-width: 768px) {
    
    .main-navbar {
        top: 5px;
        right: 20px;
        left: 20px;
        justify-content: space-between; /* Logo left, mobile nav right */
    }
    
    /* Always white hamburger on mobile */
    .hamburger-menu span {
        background: #fff !important;
    }
    
    /* Safari-specific touch optimizations */
    .hamburger-menu {
        touch-action: manipulation; /* Faster touch response on Safari */
        -webkit-touch-callout: none; /* Remove iOS callout delay */
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
        -webkit-user-select: none; /* Prevent text selection */
        user-select: none;
        /* Ensure immediate responsiveness */
        cursor: pointer;
    }
    
    /* Show mobile elements only on mobile */
    .mobile-only {
        display: flex !important;
        align-items: center;
        gap: 15px;
        position: relative;
        flex-shrink: 0;
    }
    
    /* Keep logo visible on mobile */
    .nav-logo {
        display: flex !important;
    }
    
    /* Hide only nav-icons on mobile, not logo */
    .nav-icons.desktop-only {
        display: none !important;
    }
    
    /* Make CONTACT button smaller on mobile */
    .nav-buy {
        padding: 8px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 20px !important;
    }
    
    .debug-overlay {
        right: 10px;
        top: 100px;
        font-size: 10px;
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .main-navbar {
        top: 5px;
        right: 15px;
    }
    
    .nav-icons {
        gap: 8px;
    }
    
    .nav-icon {
        max-width: 65px;
        max-height: 45px;
        padding: 3px;
        border-radius: 14px;
    }
    
}

@media (max-width: 480px) {
    /* Mobile-specific styles handled in earlier media query */
}

/* Add smooth transitions to contact elements */
.contact-form-container,
.search-bar-container,
.contact-info-container {
    transition: left 0.3s ease, right 0.3s ease, top 0.3s ease, transform 0.3s ease;
}

/* Small notebooks - extra small elements */
@media (max-height: 900px) and (min-width: 1100px) and (max-width: 1300px) {
    /* Contact form - smaller for narrow notebooks */
    .contact-form-container {
        left: min(25%, 290px) !important;    /* Right by 2% (23% + 2% = 25%) */
        top: 93.45% !important;   /* Down by 0.4% (93.05% + 0.4% = 93.45%) */
        transform: scale(0.5);    /* Even smaller (0.55 -> 0.5) */
        transform-origin: left center;
    }
    
    /* Search bar - smaller for narrow notebooks */
    .search-bar-container {
        left: min(26%, 300px) !important;    /* Right by 2% (24% + 2% = 26%) */
        transform: scale(0.65);   /* Smaller (0.7 -> 0.65) */
        transform-origin: left center;
    }
    
    /* Adjust form field sizes - submit button back to normal */
    .contact-form-container input,
    .contact-form-container textarea {
        font-size: 0.8rem;
        padding: 5px;
    }
}

/* Larger notebooks/desktops - normal small elements */
@media (max-height: 900px) and (min-width: 1301px) {
    /* Contact form - normal small size for wider screens */
    .contact-form-container {
        left: min(24.5%, 315px) !important;
        top: 93.7% !important;   /* Down by 0.4% (93.3% + 0.4% = 93.7%) */
        transform: scale(0.7);
        transform-origin: left center;
    }
    
    /* Search bar - normal small size */
    .search-bar-container {
        left: min(25.5%, 310px) !important;
        transform: scale(0.8);
        transform-origin: left center;
    }
    
    /* Adjust form field sizes within scaled container */
    .contact-form-container input,
    .contact-form-container textarea {
        font-size: 0.9rem;
        padding: 8px;
    }
}

/* Contact info positioning for all notebook sizes */
@media (max-height: 900px) and (min-width: 1000px) {
    .contact-info-container {
        right: 25% !important;
        transform: scale(0.75);
        transform-origin: right center;
    }
}

/* Smaller form for small notebooks 1000-1299px */
@media (min-width: 1000px) and (max-width: 1299px) {
    .contact-form-container {
        left: 24.5% !important;    /* Right by 6% (18.5% + 6% = 24.5%) */
        top: 93.3% !important;     /* Down by 0.4% (92.9% + 0.4% = 93.3%) */
        transform: translate(-50%, -50%) scale(0.96) !important;  /* Scale down by 4% and positioning */
    }
    
    .search-bar-container {
        left: 24.5% !important;    /* Left by 2% (26.5% - 2% = 24.5%) - aligned with form */
        transform: translate(-50%, -50%) scale(0.85) !important;  /* Scale down search bar */
    }
    
    /* Keep smaller input fields only for this range */
    .contact-form-container .form-group input,
    .contact-form-container .form-group textarea {
        padding: 0.6rem;
        font-size: 0.75rem;
    }
    
    .contact-form-container .form-group textarea {
        min-height: 60px;
    }
}

/* Large screens 1300px+ - move form slightly lower */
@media (min-width: 1300px) {
    .contact-form-container {
        top: 93% !important;    /* Down by 0.4% (92.6% + 0.4% = 93%) */
    }
}

/* Content Overlay Styles */
.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.text-block {
    position: absolute;
    pointer-events: auto;
    max-width: 400px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-block.right-positioned {
    /* Position will be dynamically calculated by JavaScript */
    /* to maintain consistent position relative to background content */
    top: var(--text-position-top, 75%);
    right: var(--text-position-right, 25%);
    transform: translateY(-50%);
}

.brand-title {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: 0.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.brand-subtitle {
    font-size: 1.2rem;
    color: #e5b143;
    font-weight: 500;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.brand-description {
    font-size: 1rem;
    color: #e0e0e0;
    line-height: 1.6;
    font-weight: 300;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .text-block.right-positioned {
        right: 15%;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .text-block.right-positioned {
        /* On mobile, use full width but keep calculated positions */
        right: var(--text-position-right, 5%);
        left: 5%;
        max-width: none;
        top: var(--text-position-top, 75%);
    }
    
    .brand-title {
        font-size: 2.5rem;
    }
    
    .brand-subtitle {
        font-size: 1rem;
    }
    
    .brand-description {
        font-size: 0.9rem;
    }
}

/* OUR STORY Carousel Styles - Matching template exactly */
.our-story-carousel {
    position: absolute;
    left: 5%;           /* Moved a bit more to the right */
    top: 76.9%;         /* Positioned slightly lower by 0.15% */
    width: 40%;         /* Wider to match template layout */
    z-index: 100;       /* Higher z-index to ensure clickability */
    transform: translateY(-50%); /* Center vertically at 78% position */
}


.story-text-container {
    position: relative;
    background: transparent;    /* No background - text directly on wall */
    padding: 0;
    margin-bottom: 1.5vw;
}

.story-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.story-slide.active {
    display: block;
    opacity: 1;
}

.story-text {
    color: black;               /* Black text for wall like template */
    font-size: 1.35vw;         /* Slightly larger for better visibility on wall */
    line-height: 1.5;           /* Better readability */
    font-family: 'Arial', sans-serif;
    font-weight: 400;           /* Normal weight like template */
    max-width: 100%;
}

.story-text p {
    margin: 0 0 1.2vw 0;       /* More spacing between paragraphs like template */
    text-align: left;
}

/* Carousel indicators matching template dots - more visible */
.story-indicators {
    display: flex;
    gap: 1vw;                /* Reduced gap (changed from 2vw to 1vw) */
    justify-content: flex-start;
    margin-top: 7.85vw;      /* Down by 3.5% more (4.35vw + 3.5vw = 7.85vw) */
    margin-left: 1.25vw;     /* Right by 1% more (0.25vw + 1vw = 1.25vw) */
}

.indicator {
    width: 1.2vw;              /* Larger for better visibility */
    height: 1.2vw;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);  /* Darker for contrast on clay wall */
    cursor: pointer;
    transition: background 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.8);  /* Dark border for definition */
    pointer-events: auto;      /* Ensure clickability */
    z-index: 1000;             /* High z-index for clickability */
    position: relative;        /* Establish stacking context */
}

.indicator.active {
    background: #dc2626;       /* ZIRRE red for active indicator */
    border: 2px solid #dc2626;
}

.indicator:hover {
    background: rgba(220, 38, 38, 0.7);
    border: 2px solid #dc2626;
}

/* NATURAL ENERGY Carousel Styles - Section 5 - Same as Our Story */
.natural-energy-carousel {
    position: absolute;
    left: 1%;           /* Right by 3% (-2% + 3% = 1%) */
    top: 63%;           /* Back to original position in Section 5 */
    width: 60%;         /* Scale up by 20% total (50% * 1.2 = 60%) */
    z-index: 100;       /* Same z-index as Our Story */
    transform: translateY(-50%); /* Center vertically */
}

.energy-image-container {
    position: relative;
    min-height: 20vw;          /* Ensure consistent height for positioning */
    background: transparent;
    padding: 0;
    margin-bottom: 1.5vw;
}

.energy-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.energy-slide.active {
    display: block;
    opacity: 1;
}

.energy-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    transform: scale(1.05);
    transform-origin: center center;
}

.energy-indicators {
    position: absolute;        /* Absolute to background container */
    top: 66.75%;               /* Down by 0.2% more (66.55% + 0.2% = 66.75%) */
    left: 6.5%;                /* Right by 3% (3.5% + 3% = 6.5%) */
    z-index: 200;              /* Above everything */
    /* Anchored to background, not carousel content */
    display: flex;
    gap: 1vw;                  /* Same gap as Our Story indicators */
}

/* Energy indicators use same basic styles as Our Story but with white colors */
.energy-indicators .energy-dot {
    position: relative;        /* Relative for flex layout */
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);  /* White for dark background */
    cursor: pointer;
    transition: background 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);  /* White border */
    pointer-events: auto;
}

/* Fixed positions for each dot */
/* Individual positioning removed - using flex gap instead */

.energy-indicators .energy-dot.active {
    background: #dc2626;       /* ZIRRE red for active indicator */
    border: 2px solid #dc2626;
}

.energy-indicators .energy-dot:hover {
    background: rgba(220, 38, 38, 0.7);
    border: 2px solid #dc2626;
}

/* Search Bar - Above Contact Form */
.search-bar-container {
    position: absolute;
    left: 18.5%;        /* Back to original to match form */
    top: 88%;           /* Just slightly above contact form (93% - 5% = 88%) */
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 90%;
    max-width: 450px;   /* Same max-width as contact form */
}

.search-bar-background {
    position: relative;
    background-image: url('./icons/search bar.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 25px;
}

.search-input {
    background: transparent;
    border: none;
    outline: none;
    width: 80%;
    padding: 25px 0px;
    font-size: 1.4rem;
    color: #333;
    text-align: left;
}

.search-input::placeholder {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

/* Flying Ravens Animation - Diagonal Flight */
.flying-ravens {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    overflow: hidden; /* Prevent ravens from causing horizontal overflow */
    z-index: 150; /* Higher z-index */
    pointer-events: none; /* Container shouldn't block clicks */
}

.raven {
    position: absolute;
    width: 24px;
    height: 12px;
    opacity: 0; /* Opacity handled by animation */
    animation: flyRaven linear infinite;
    animation-fill-mode: both;
    cursor: pointer;
    pointer-events: auto; /* Enable so children can be clicked */
    z-index: 151;  /* Higher than container */
}

.raven.dead {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-out;
}

/* Prevent text selection during game */
body.game-active {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

body.game-active * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Spawned ravens MUST inherit from normal ravens */
.spawned-raven {
    --raven-base-height: 25%; /* Default, will be overridden by JS */
}

/* Left wing */
.raven::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 3px;
    background: #000;
    border-radius: 80% 40% 60% 100%;
    left: -1px;
    top: 4px;
    transform: rotate(-5deg);
    transform-origin: right center;
    animation: leftWing 0.4s ease-in-out infinite alternate;
}

/* Right wing */
.raven::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 3px;
    background: #000;
    border-radius: 40% 80% 100% 60%;
    right: -1px;
    top: 4px;
    transform: rotate(5deg);
    transform-origin: left center;
    animation: rightWing 0.4s ease-in-out infinite alternate;
}

.raven:nth-child(1) {
    --raven-base-height: 8%;
    animation-duration: 36s;
    animation-delay: -15s;
    transform: scale(0.8);
}

.raven:nth-child(2) {
    --raven-base-height: 12%;
    animation-duration: 44s;
    animation-delay: 0s;
    transform: scale(1.0);
}

.raven:nth-child(3) {
    --raven-base-height: 15%;
    animation-duration: 32s;
    animation-delay: -8s;
    transform: scale(0.7);
}

.raven:nth-child(4) {
    --raven-base-height: 6%;
    animation-duration: 40s;
    animation-delay: 12s;
    transform: scale(0.9);
}

.raven:nth-child(5) {
    --raven-base-height: 18%;
    animation-duration: 38s;
    animation-delay: -25s;
    transform: scale(0.8);
}

.raven:nth-child(6) {
    --raven-base-height: 10%;
    animation-duration: 34s;
    animation-delay: 8s;
    transform: scale(1.1);
}

@keyframes flyRaven {
    0% {
        top: calc(var(--raven-base-height) + 0%);
        left: -5%;
        transform: scale(1) rotate(-8deg);
        opacity: 0;
    }
    8% {
        top: calc(var(--raven-base-height) + 0.3%);
        left: 12%;
        transform: scale(1) rotate(-6deg);
        opacity: 0.8;
    }
    25% {
        top: calc(var(--raven-base-height) + 0.8%);
        left: 30%;
        transform: scale(0.9) rotate(-3deg);
        opacity: 0.7;
    }
    42% {
        top: calc(var(--raven-base-height) + 1.2%);
        left: 48%;
        transform: scale(0.75) rotate(-1deg);
        opacity: 0.6;
    }
    58% {
        top: calc(var(--raven-base-height) + 1.8%);
        left: 62%;
        transform: scale(0.6) rotate(1deg);
        opacity: 0.5;
    }
    72% {
        top: calc(var(--raven-base-height) + 1.5%);
        left: 74%;
        transform: scale(0.5) rotate(2deg);
        opacity: 0.4;
    }
    85% {
        top: calc(var(--raven-base-height) + 1.9%);
        left: 86%;
        transform: scale(0.35) rotate(4deg);
        opacity: 0.2;
    }
    95% {
        top: calc(var(--raven-base-height) + 2%);
        left: 95%;
        transform: scale(0.25) rotate(6deg);
        opacity: 0.05;
    }
    100% {
        top: calc(var(--raven-base-height) + 2%);
        left: 110%;
        transform: scale(0.2) rotate(8deg);
        opacity: 0;
    }
}

@keyframes leftWing {
    0% {
        transform: rotateZ(-10deg) rotateX(0deg);
    }
    100% {
        transform: rotateZ(-30deg) rotateX(-15deg);
    }
}

@keyframes rightWing {
    0% {
        transform: rotateZ(10deg) rotateX(0deg);
    }
    100% {
        transform: rotateZ(30deg) rotateX(-15deg);
    }
}

/* Only show ravens on first slide */
.viewport-section[data-section="1"] .flying-ravens {
    display: block;
}

/* CONTACT US Form - Clean Minimal */
.contact-form-container {
    position: absolute;
    left: 18.5%;        /* Back to original position for default */
    top: 92.7%;         /* Down by 0.4% (92.3% + 0.4% = 92.7%) */
    transform: translate(-50%, -50%);  /* Back to original scale for default */
    width: 90%;
    max-width: 450px;
    z-index: 100;
}

.designer-contact-form {
    background: transparent;
    padding: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group.half-width {
    flex: 1;
    margin-bottom: 0;
}

/* Mobile - make name/email fields longer */
@media (max-width: 768px) {
    .form-row {
        gap: 0.5rem; /* Smaller gap to make more room */
    }
    
    .form-group.half-width {
        min-width: 110px; /* Minimum width to fit email addresses */
    }
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;    /* Back to original size for default */
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    color: #333;
    font-size: 1rem;    /* Back to original size for default */
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #dc2626;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;    /* Back to original size for default */
}

.form-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0.8rem;
}

.form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.form-checkbox input[type="checkbox"]:checked {
    background: #dc2626;
    border-color: #dc2626;
}

.form-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.form-checkbox label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    cursor: pointer;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    user-select: none;
}

/* Legal links styling - ZIRRE red with hover effects */
.form-checkbox label .legal-link {
    color: #dc2626;
    text-decoration: underline;
    font-weight: 700;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.form-checkbox label .legal-link:hover {
    color: #ffffff;
    background: #dc2626;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    text-shadow: none;
}

.designer-submit-btn {
    width: 100%;
    padding: 1rem;
    background: #dc2626;
    border: 2px solid #dc2626;
    border-radius: 25px;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.designer-submit-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    transform: scale(1.05) translateY(-2px);
}

.designer-submit-btn:active {
    transform: translateY(0);
}

/* Contact Information - Right Side */
.contact-info-container {
    position: absolute;
    right: 17%;         /* Moved left by 3% more */
    top: 93%;           /* Same vertical position as form */
    transform: translate(50%, -50%);
    z-index: 100;
}

.contact-info-image {
    max-width: 600px;   /* Smaller size */
    height: auto;
    display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .contact-form-container {
        width: 95%;
        max-width: none;
    }
    
    .designer-contact-form {
        padding: 1.5rem;
    }
    
    .form-header h1 {
        font-size: 2rem;
    }
}

/* =========================================
   Safari Bar Spacer - iOS Bottom Bar Fix
   ========================================= */

.safari-bar-spacer {
    display: none; /* Hidden by default */
    height: 0;
    width: 100%;
    background: transparent;
    pointer-events: none; /* Cannot be clicked or interacted with */
    margin: 0;
    padding: 0;
    /* Ensure it doesn't interfere with background calculations */
    position: relative;
    z-index: -10;
}

/* iOS Safari Detection and Activation */
/* Only show on iOS Safari on mobile devices */
@media (max-width: 768px) {
    /* iOS Safari specific - supports safe-area-inset and -webkit-touch-callout */
    @supports (-webkit-touch-callout: none) and (env(safe-area-inset-bottom)) {
        .safari-bar-spacer {
            display: block;
            /* Use CSS environment variable with fallback */
            height: env(safe-area-inset-bottom, 100px);
            /* Add extra space to ensure contact form visibility */
            min-height: 80px;
            max-height: 150px;
        }
    }
    
    /* Fallback for older iOS versions without env() support */
    @supports (-webkit-touch-callout: none) and (not (env(safe-area-inset-bottom))) {
        .safari-bar-spacer {
            display: block;
            height: 100px; /* Standard iOS Safari bar height */
        }
    }
}

/* Desktop and non-iOS devices - always hidden */
@media (min-width: 769px) {
    .safari-bar-spacer {
        display: none !important;
        height: 0 !important;
    }
}