/* style.css - 3 Image Floating Collapse for Noon Line */

:root {
    --primary: #611C24;
    --primary-dark: #4A141A;
    --background: #FFFFFF;
    --surface: #FAF6F2;
    --text-primary: #2F2425;
    --text-secondary: #6B7280;
}

* {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Cairo', sans-serif;
    color: var(--text-primary);
}

.container-fixed {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 3 Layers Floating Animations */
@keyframes float-main {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

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

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

.hero-images-container {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layered Positioning */
.img-layer-1 {
    position: absolute;
    width: 300px;
    z-index: 10;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.2));
    animation: float-main 4s ease-in-out infinite;
}

.img-layer-2 {
    position: absolute;
    width: 240px;
    right: 5%;
    top: 15%;
    z-index: 5;
    opacity: 0.8;
    animation: float-side-1 5s ease-in-out infinite;
}

.img-layer-3 {
    position: absolute;
    width: 240px;
    left: 5%;
    bottom: 15%;
    z-index: 1;
    opacity: 0.6;
    animation: float-side-2 6s ease-in-out infinite;
}

@media (max-width: 1024px) {
    .hero-images-container { height: 350px; margin-bottom: 2rem; }
    .img-layer-1 { width: 220px; }
    .img-layer-2 { width: 160px; right: 0; }
    .img-layer-3 { width: 160px; left: 0; }
}

@media (max-width: 640px) {
    .hero-images-container { height: 300px; }
    .img-layer-1 { width: 190px; }
    .img-layer-2 { width: 130px; }
    .img-layer-3 { width: 130px; }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }