/*
======================================
COMING SOON PAGE TEMPLATE STYLES
======================================
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    /* Removed overflow: hidden to allow scrolling */
}

/* Main Container */
.coming-soon-container {
    width: 100%;
    min-height: 100vh; /* Changed from height to min-height for scrolling */
    background-color: #0c5488;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Changed from center to flex-start */
    position: relative;
    padding: 50px 20px; /* Added padding for better spacing */
}

/* Logo Container */
.logo-container {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2s ease-out forwards;
    animation-delay: 0.5s;
    width: 100%;
    max-width: 800px; /* Added max-width to prevent overstretching on large screens */
}

/* Logo Styling */
.coming-soon-logo {
    max-width: 250px;
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 40px auto; /* Explicit centering with auto margins */
}

/* Featured Image Container */
.featured-image-container {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2s ease-out forwards;
    animation-delay: 1s;
    width: 100%;
}

/* Featured Image Styling */
.coming-soon-featured-image {
    max-width: 600px;
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto; /* Explicit centering */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Animation Keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tablet Responsive */
@media (max-width: 768px) {
    .coming-soon-container {
        padding: 30px 15px; /* Adjusted padding for tablets */
    }
    
    .coming-soon-logo {
        max-width: 280px; /* Reduced from 300px */
        margin-bottom: 30px; /* Reduced spacing */
    }
    
    .coming-soon-featured-image {
        max-width: 500px;
    }
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .coming-soon-container {
        padding: 20px 10px; /* Adjusted padding for mobile */
    }
    
    .coming-soon-logo {
        max-width: 220px; /* Reduced from 250px */
        margin-bottom: 25px; /* Reduced spacing */
    }
    
    .coming-soon-featured-image {
        max-width: 350px;
    }
}

/* Extra small mobile devices */
@media (max-width: 320px) {
    .coming-soon-logo {
        max-width: 200px;
    }
    
    .coming-soon-featured-image {
        max-width: 280px;
    }
}