/* ============================================= */
/* === Hero Section                          === */
/* ============================================= */
.hero-section {
    position: relative;         /* For positioning pseudo-elements */
    min-height: 60vh;           /* Minimum height relative to viewport */
    padding-top: 50px;         /* To offset the fixed header (adjust if header height changes) */
    padding-bottom: 20px;       /* Bottom padding for the section */
    display: flex;              /* Using flexbox for content alignment */
    align-items: center;        /* Vertically center content */
    justify-content: flex-start;/* Align content block to the left */
    color: #fff;                /* Default text color for this section */
    overflow: hidden;           /* Prevents pseudo-element blur/scale from causing scrollbars */
}

.hero-section::before { /* Pseudo-element for blurred background image and overlay */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/hero-applica-where-learning-meets-performance.png');
    background-size: cover;
    background-position: center center;
    filter: blur(3px);          /* Blur effect for the background image */
    z-index: 0;                 /* Place it behind the actual content */
    transform: scale(1.05);     /* Slightly scale to avoid blurred edges creating gaps */
}

.hero-content { /* Container for hero text and buttons (also has .container class in HTML) */
    position: relative;
    z-index: 1;                 /* Ensure content is above the ::before pseudo-element */
    text-align: left;           /* Align text within this block to the left */
    margin: 0;                  /* Resetting potential margins from .container */
}

/* Specific positioning for .hero-content block when inside .hero-section */
.hero-section > .hero-content.container {
    margin: 0 auto;         /* Allow it to use its max-width, pushing to left */
    width: 1100px;                /* Let max-width and content define width */
    max-width: 90%;           /* Max width for the hero text block */
}

.hero-content h1 { /* Main heading in hero */
    font-size: 2.8rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.hero-content p { /* Subtitle/paragraph in hero */
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    max-width: 600px;
    opacity: 0.9;
}

.hero-buttons { /* Container for hero call-to-action buttons */
    text-align: left; /* Ensure buttons align to the left */
}

.hero-buttons .btn { /* General style for buttons in hero */
    padding: 12px 28px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    margin-right: 15px;
    margin-bottom: 10px; /* For wrapping on smaller screens */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    min-width: 150px;   /* Minimum button width */
}
.hero-buttons .btn:hover {
    transform: translateY(-2px); /* Slight lift effect on hover */
}

.btn-primary { /* Primary button style (e.g., "Get Started") */
    background-color: #4CAF50;
    color: #fff;
    border: 2px solid #4CAF50;
}

.btn-primary:hover {
    background-color: #45a049; /* Darker shade on hover */
    border-color: #45a049;
}

.btn-secondary { /* Secondary button style (e.g., "Learn More") */
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}

/* --- Hero Section (Mobile: max-width: 768px) --- */
@media (max-width: 768px) {
    .hero-section {
        min-height: auto; /* Allow height to be determined by content */
        padding-top: 30px; /* Reduced padding as header might be static now */
        padding-bottom: 30px;
    }
    .hero-section > .hero-content.container {
        margin-left: 5%; /* Keep some margin */
        margin-right: 5%;
        width: 90%; /* Use more of the available width */
        padding-left: 0; /* Remove specific padding if not needed */
        text-align: center; /* Center text and buttons on mobile */
    }
    .hero-content h1 {
        font-size: 2rem; /* Adjust font size for smaller screens */
    }
    .hero-content p {
        font-size: 1rem; /* Adjust font size */
        max-width: 100%; /* Allow paragraph to use full width */
    }
    .hero-buttons {
        text-align: center; /* Ensure buttons are centered */
    }
    .hero-buttons .btn {
        margin: 8px 5px; /* Adjust margins for stacked buttons */
        width: calc(100% - 10px); /* Make buttons take full width available */
        max-width: 280px; /* But cap their max width */
    }
     .hero-buttons .btn:last-child {
        margin-right: 5px; /* Consistent margin for the last button */
    }
}