/* Hero Section Styles */
.hero-section {
    position: relative;
    height: 100vh; /* Full viewport height for desktop */
    min-height: 600px;
    width: 100%;
    background-size: cover; /* Changed back to cover to prevent letterboxing */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end; /* Align content to bottom */
    padding-bottom: 80px; /* Add some padding at the bottom */
    color: #fff;
}

/* Add overlay to make text more visible */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2; /* Position above the overlay */
    text-align: left; /* Align text to the left */
    padding-left: 4rem !important; /* Override the default container padding */
    max-width: 100%; /* Allow content to expand if needed */
}

.hero-section h1 {
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /* Font styles now handled by heading-xl class */
}

.hero-section .btn {
    margin-top: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .hero-section {
        height: 90vh;
        min-height: 500px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        height: 80vh;
        min-height: 450px;
        padding-bottom: 60px;
    }
    
    .hero-section .container {
        padding-left: 3rem !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        /* Create 16:9 aspect ratio container */
        height: 0;
        padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
        min-height: unset;
        padding-bottom: 0;
        position: relative;
    }
    
    .hero-section .container {
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .hero-section .container {
        bottom: 20px;
    }
    
    .hero-section h1 {
        margin-bottom: 0.2rem;
    }
    
    .hero-section .btn {
        margin-top: 0.2rem;
    }
}

@media (max-width: 480px) {
    .hero-section .container {
        bottom: 10px;
    }
    
    .hero-section h1 {
        margin-bottom: 0.1rem;
    }
}