/* Basic Reset */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #000;
    background-image: url('../images/background.png'); /* Path relative to CSS file */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* =================================== */
/* === HEADER, LOGO, NAV STYLING === */
/* (Keep all your existing header styles - unchanged) */
/* =================================== */
.site-header {
    position: sticky; top: 0; z-index: 100; background-color: rgba(240, 240, 240, 0.92); border-bottom: 2px solid #cccccc; display: flex; align-items: center; padding: 0 1rem; min-height: 120px;
transition: transform 0.3s ease-in-out; /* Smooth slide animation */
}
.site-header.header-hidden {
    transform: translateY(-100%); /* Slides header up completely */
}
.main-nav { margin-left: 20px; margin-right: 20px; text-align: center;}
.main-nav ul { list-style: none; display: inline-flex; padding: 0; flex-wrap: wrap; margin: 0; }
.main-nav li { margin: 0 0.8rem; }
.main-nav a { color: #333333; text-decoration: none; font-weight: 600; padding: 0.5rem 0.8rem; transition: background-color 0.3s ease, color 0.3s ease; border-radius: 4px; display: inline-block; white-space: nowrap; }
.main-nav a:hover, .main-nav a:focus { background-color: #dddddd; color: #000000; outline: none; }
.main-nav a.active { background-color: #55aaff; color: #ffffff; font-weight: bold;} /* Ensure this style is present */
.header-icons { display: flex; align-items: center; gap: 15px; margin-left: auto; }
#site-logo { width: 100px; height: auto; display: block; order: 2; }
.social-icon-link { line-height: 0; order: 1; display: block; }
.social-icon { width: 32px; height: 32px; display: block; transition: opacity 0.2s ease; }
.social-icon:hover { opacity: 0.8; }

/* ======================================= */
/* === MAIN CONTENT - Main Page ===      */
/* ======================================= */

#main-content {
    max-width: 1000px; /* Slightly wider for grid? Adjust as needed */
    margin: 2rem auto;  /* Keep centering */
    padding: 1.5rem;    /* Keep outer padding */
    background-color: transparent; /* Ensure container is transparent */
     /* Remove text styles from here - apply within specific elements */
     /* font-size, font-weight, color, text-shadow REMOVED */
}

/* General Heading for the page */
#main-content h1 {
    color: #000000;
    margin-bottom: 2.5rem; /* Space below main title */
    font-size: 2.5em; /* Adjust relative to body base size */
    font-weight: 700;
    text-align: center;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
}


/* ======================================== */
/* === PROMO BOX GRID LAYOUT ===          */
/* ======================================== */

.promo-grid {
    display: grid;
    /* --- Creates 3 equal columns on larger screens --- */
    grid-template-columns: repeat(3, 1fr);
    /* --- Gap between grid items (rows and columns) --- */
    /* This gap allows the background image to show */
    gap: 1.5rem; /* Adjust gap size as needed */
}

/* Individual Promo Box Styling */
.promo-box {
    /* --- Styling similar to FAQ answers --- */
    background-color: rgba(248, 249, 250, 0.7); /* FAQ answer opacity */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1.5rem; /* Internal padding */
    /* --- Use Flexbox to manage content inside box --- */
    display: flex;
    flex-direction: column; /* Stack h3, p, a vertically */
    text-align: center; /* Center text within box */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.promo-box:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Heading within the box */
.promo-box h3 {
    font-size: 1.3em; /* Relative to body font size */
    color: #333;
    margin-bottom: 0.75rem;
    text-shadow: none; /* Override any inherited shadow */
}

/* Paragraph within the box */
.promo-box p {
    font-size: 1em; /* Relative to body font size */
    color: #444;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    text-align: left; /* Keep paragraphs left-aligned usually looks better */
    flex-grow: 1; /* Allows paragraph to push link down */
    text-shadow: none;
}

/* Link button within the box */
a.promo-link {
    display: inline-block; /* Allow padding/margin */
    margin-top: auto; /* Pushes link to bottom if paragraph grows */
    padding: 0.6rem 1.2rem;
    background-color: #0056b3; /* Button color */
    color: #fff; /* Text color */
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    text-shadow: none; /* Ensure no shadow on link text */
}

a.promo-link:hover {
    background-color: #004494; /* Darker button on hover */
    color: #fff;
}


/* ======================================= */
/* === FOOTER === */
/* (Keep existing footer styles - unchanged) */
/* ======================================= */
.site-footer {
    text-align: center; margin-top: 2rem; padding: 1rem; font-size: 0.9em; color: #fff; background-color: rgba(51, 51, 51, 0.8); border-top: 1px solid #ccc;
}

/* ======================================= */
/* === RESPONSIVE ADJUSTMENTS ===          */
/* ======================================= */
@media (max-width: 960px) { /* Switch to 2 columns on smaller tablets */
    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 600px) { /* Switch to 1 column on small screens */
    /* Keep Header/Nav responsive rules from other pages */
    .site-header { min-height: 90px; padding: 0 0.5rem; flex-wrap: wrap; justify-content: center; }
    .main-nav { width: 100%; order: 2; margin: 0.5rem 0 0 0; text-align: center; }
    .main-nav ul { justify-content: center; }
    .main-nav li { margin: 0.3rem 0.4rem; }
    .main-nav a { white-space: normal; text-align: center; }
    .header-icons { gap: 10px; margin-left: 0; order: 1; width: 100%; justify-content: center; }
    #site-logo { width: 60px; order: 2; }
    .social-icon-link { order: 1; }
    .social-icon { width: 28px; height: 28px; }

    /* Content responsive rules */
    #main-content { padding: 1rem; /* Adjust padding */ }
     #main-content h1 { font-size: 2em; } /* Adjust H1 size */

    .promo-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 1rem; /* Adjust gap for single column */
    }
    .promo-box { padding: 1.2rem; } /* Adjust padding inside box */
    .promo-box h3 { font-size: 1.2em; }
    .promo-box p { font-size: 0.95em; }
}

/* Keep existing #main-content, h1, promo-grid, promo-box styles */
/* ... (your existing #main-content, #main-content h1, promo-grid styles etc.) ... */

/* ========================================== */
/* === ACTIVE & UPCOMING COURSES SECTION === */
/* ========================================== */

.active-courses-section {
    /* --- Spacing --- */
    margin-top: 2.5rem;  /* Space above this whole section */
    margin-bottom: 3rem; /* Space below, before the promo boxes */

    /* --- Optional: Background & Box Styling --- */
    /* If you want this section to have its own distinct box: */
    /* background-color: rgba(240, 240, 240, 0.75); */ /* Slightly different from promo boxes */
    /* padding: 1.5rem; */
    /* border: 1px solid #d0d0d0; */
    /* border-radius: 6px; */
    /* text-align: center; */ /* Center align content inside the section if desired */
}

/* Styling for the "Active Courses" Heading (H2) */
.active-courses-section h2 {
    font-size: 1.8em; /* Adjust relative to #main-content base font */
    color: #2c3e50; /* A darker, slightly muted color */
    text-align: center; /* Center the heading */
    margin-bottom: 1.5rem; /* Space below this heading */
    padding-bottom: 0.5rem; /* Space for an optional border */
    border-bottom: 2px solid #3498db; /* Accent border */
    display: inline-block; /* Makes border only as wide as text */
    /* If not centering the whole section, and want to center just h2: */
    /* display: block; */ /* Or keep inline-block if centering .active-courses-section */
}

/* Container for each active course entry */
.active-course-entry {
    margin-bottom: 1.5rem; /* Space between individual course listings */
    padding: 1rem; /* Padding inside each entry's box */
    background-color: rgba(255, 255, 255, 0.8); /* Subtle background if no section background */
    border: 1px solid #e0e0e0;
    border-left: 5px solid #3498db; /* Accent color on the left */
    border-radius: 4px;
}
.active-course-entry:last-child {
    margin-bottom: 0; /* Remove margin from last entry */
}

/* Styling for individual Active Course Titles (H3) */
.active-course-entry h3 {
    font-size: 1.3em; /* Relative to #main-content */
    color: #34495e; /* Another distinct color */
    margin-bottom: 0.5rem; /* Space below course title */
    text-align: left; /* Keep title aligned left for readability */
}
.active-course-entry h3 a {
    color: inherit; /* Inherit h3 color */
    text-decoration: none; /* Remove underline from title link */
    transition: color 0.2s ease;
}
.active-course-entry h3 a:hover {
    color: #2980b9; /* Hover color for title link */
}

/* Styling for course status (e.g., "Starting Soon!") */
.course-status {
    font-size: 0.85em; /* Smaller */
    font-weight: normal;
    color: #e74c3c; /* Reddish for urgency, or use green/blue for info */
    margin-left: 0.5rem;
    vertical-align: middle; /* Align with h3 text */
}
/* Example for different statuses */
.course-status.active { color: #27ae60; /* Green for active */ }


/* Styling for the short description of the course */
.course-short-desc {
    font-size: 1em; /* Relative to #main-content */
    color: #555;
    line-height: 1.6;
    margin-bottom: 0; /* No extra margin below if it's the last item */
    text-align: left;
}

/* =================================== */
/* === HERO INTRODUCTION SECTION ===   */
/* =================================== */

.hero-section {
    /* --- Background & Full Width --- */
    background-color: #2c3e50c4; /* Dark blue/grey - choose a color that contrasts well */
    /* Optional: Use a subtle background image or gradient for the hero */
    /* background-image: linear-gradient(to bottom, rgba(44, 62, 80, 0.8), rgba(52, 73, 94, 0.9)), url('../images/hero-background.jpg'); */
    /* background-size: cover; */
    /* background-position: center center; */
    color: #ecf0f1; /* Light text color for contrast */
    padding: 4rem 1.5rem; /* Generous vertical padding, standard horizontal */
    text-align: center; /* Center align all content within the hero section */
}

.hero-content {
    max-width: 800px; /* Limit the width of the text content for readability */
    margin: 0 auto; /* Center the content block horizontally */
}

.hero-section h1 {
    font-size: 2.8em; /* Large, prominent title (relative to body font size) */
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff; /* Bright white for title */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.hero-section .hero-subtitle {
    font-size: 1.3em; /* Subtitle size */
    font-weight: 300; /* Lighter font weight for subtitle */
    color: #bdc3c7; /* Slightly muted light color */
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.hero-section .hero-description {
    font-size: 1.1em; /* Main description text size */
    line-height: 1.7;
    margin-bottom: 2.5rem;
    color: #ecf0f1;
    text-align: justify; /* Justify for block look, or 'center' if preferred for short text */
     max-width: 700px; /* Further constrain paragraph width for readability */
     margin-left: auto;
     margin-right: auto;
}

.hero-section .hero-cta-button {
    display: inline-block; /* Allows padding, margin, and centering via text-align on parent */
    background-color: #3498db; /* Bright call-to-action blue */
    color: #ffffff;
    padding: 0.9rem 2rem;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hero-section .hero-cta-button:hover,
.hero-section .hero-cta-button:focus {
    background-color: #2980b9; /* Darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    outline: none;
}





/* ... (Keep your existing #main-content h1, .active-courses-section, .promo-grid, etc. styles below) ... */
/* You might need to adjust the font sizes of these sections if the hero's text size makes them look too small in comparison */


/* === RESPONSIVE ADJUSTMENTS for Active Courses === */
@media (max-width: 600px) {
    .active-courses-section h2 {
        font-size: 1.5em; /* Slightly smaller on mobile */
    }
    .active-course-entry h3 {
        font-size: 1.2em;
    }
    .active-course-entry h3 .course-status {
        display: block; /* Stack status below title */
        margin-left: 0;
        margin-top: 0.3rem;
    }
    .course-short-desc {
        font-size: 0.95em; /* Ensure readable on mobile */
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 3rem 1rem;
    }
    .hero-section h1 {
        font-size: 2.2em;
    }
    .hero-section .hero-subtitle {
        font-size: 1.15em;
    }
    .hero-section .hero-description {
        font-size: 1em;
    }
    .hero-section .hero-cta-button {
        font-size: 1em;
        padding: 0.8rem 1.8rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 2.5rem 1rem;
    }
    .hero-section h1 {
        font-size: 1.9em;
    }
     .hero-section .hero-subtitle {
        font-size: 1.05em;
    }
    .hero-section .hero-description {
        text-align: left; /* Justify might be poor on very narrow screens */
    }
}

/* MainPage/style.css */

/* ... (Keep all your existing CSS) ... */


/* ========================================== */
/* === STUDENT REVIEWS SECTION ===           */
/* ========================================== */

.student-reviews-section {
    margin-top: 3rem;  /* Space above this section */
    margin-bottom: 3rem; /* Space below this section */
    padding: 0 1rem; /* Horizontal padding for the section */
}

.student-reviews-section h2 {
    font-size: 1.8em; /* Adjust as needed */
    color: #2c3e50;
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #3498db;
    display: inline-block; /* Makes border only as wide as text */
    /* To center inline-block h2, wrap it or text-align parent */
    /* If .student-reviews-section isn't text-align:center, add this: */
    /* display: block; */
}

.review-entry {
    background-color: rgba(248, 249, 250, 0.7); /* Light, slightly opaque background */
    border: 1px solid #dfe6e9;
    border-left: 5px solid #fdcb6e; /* Example accent color (gold/yellow) */
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    /* --- For Animation --- */
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Initially moved down */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* --- For Staggered Animation (optional) --- */
    /* transition-delay will be set by JS */
}

/* Class added by JS when element is in view */
.review-entry.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.review-entry:last-child {
    margin-bottom: 0;
}

.review-text {
    font-style: italic; /* Italicize the review text */
    font-size: 1.1em; /* Adjust as needed */
    color: #34495e; /* Dark grey/blue for text */
    line-height: 1.7;
    margin-bottom: 0.75rem;
    quotes: "“" "”" "‘" "’"; /* Define quote characters */
}
/* Add quote marks visually - optional */
/* .review-text::before { content: open-quote; } */
/* .review-text::after { content: close-quote; } */


.review-author {
    display: block; /* Take its own line */
    text-align: right; /* Align author to the right */
    font-style: normal; /* Override italic from blockquote if needed */
    font-weight: bold;
    color: #7f8c8d; /* Lighter grey for author */
    font-size: 1em;
}

/* === Responsive for Student Reviews === */
@media (max-width: 600px) {
    .student-reviews-section h2 {
        font-size: 1.5em;
    }
    .review-entry {
        padding: 1rem;
    }
    .review-text {
        font-size: 1em;
    }
    .review-author {
        font-size: 0.9em;
    }
}


/* Styling for the language link to make it look like a button */
a.lang-link {
    display: fixed;      /* Allows padding and behaves like a button */
    padding: 6px 12px;        /* Adjust padding for button size */
    background-color: #e9ecef;  /* Light grey background */
    color: #343a40;            /* Darker text for contrast */
    border: 1px solid #ced4da;  /* Subtle border */
    border-radius: 4px;         /* Rounded corners */
    text-decoration: none;      /* Remove underline from link */
    font-weight: bold;
    font-size: 0.9em;         /* Slightly smaller or same as nav */
    line-height: 1.4;         /* Adjust for vertical text centering */
    text-align: center;
    min-width: 45px;          /* Minimum width to fit "EN" / "PT" nicely */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;      /* Prevent text like "PT" from wrapping */
}

a.lang-link:hover,
a.lang-link:focus {
    background-color: #dee2e6;  /* Slightly darker on hover */
    color: #000;
    border-color: #adb5bd;
    outline: none;
}