@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

/* Base Reset */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

/* Full Screen Image Background */
.fullscreen-bg {
    width: 100%;
    height: 100vh;
    background-image: url('alejandro-background-landing.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Center the container vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dark Container */
.content-container {
    background-color: rgba(15, 15, 15, 0.85); /* Dark translucent background */
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Banner Logo Placeholder */
.banner-logo {
    width: 100%;
    background-image: url('logo-invert.webp');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

/* H1 Typography (Same font/style as menu headings) */
h1 {
    color: #ffffff; /* Clear color */
    text-transform: uppercase;
    font-weight: 800;
    margin: 0;
    letter-spacing: 2px;
}

/* Links / Buttons Container */
.button-group {
    display: flex;
    flex-direction: row; /* Keeps them on the same line */
    justify-content: center;
    width: 100%;
}

/* Button Styles */
.btn {
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase; /* Capital letters */
    font-weight: 600;
    border: 2px solid #ffffff;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-sizing: border-box;
}

.btn:hover, .btn:focus {
    background-color: #ffffff;
    color: #000000;
}


/* -----------------------------------------
   1. Mobile-First (Up to 767px)
----------------------------------------- */
.content-container {
    padding: 2rem 1.5rem;
    width: 90%; 
    max-width: 450px; /* Adapts to content but prevents being too wide on phones */
}

.banner-logo {
    height: 80px;
    margin-bottom: 1.5rem;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.button-group {
    gap: 1rem;
}

.btn {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    flex: 1; /* Allows buttons to share the space evenly on small screens */
}


/* -----------------------------------------
   2. Tablet (768px to 1199px)
----------------------------------------- */
@media (min-width: 768px) {
    .content-container {
        padding: 3rem 4rem;
        width: auto;
        min-width: 500px;
    }

    .banner-logo {
        height: 120px;
        margin-bottom: 2rem;
    }

    h1 {
        font-size: 3.5rem;
        margin-bottom: 2rem;
    }

    .button-group {
        gap: 2rem;
    }

    .btn {
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
        flex: none; /* Reverts to natural button width */
    }
}


/* -----------------------------------------
   3. Desktop (1200px and up)
----------------------------------------- */
@media (min-width: 1200px) {
    .content-container {
        padding: 4rem 5rem;
        min-width: 650px;
    }

    .banner-logo {
        height: 150px;
        margin-bottom: 2.5rem;
    }

    h1 {
        font-size: 4.5rem;
        margin-bottom: 2.5rem;
    }

    .button-group {
        gap: 3rem;
    }

    .btn {
        padding: 1.2rem 3.5rem;
        font-size: 1.25rem;
    }
}