/* ========================================= */
/* GENERAL SETTINGS                          */
/* ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding doesn't make elements wider than set width */
    font-family: Arial, sans-serif; /* Changes the font for the whole site */
}

body {
    background-color: #f4f4f9; /* Light grey background for the page */
    color: #333; /* Dark grey text color */
}

/* ========================================= */
/* HERO SECTION STYLES                       */
/* ========================================= */
.hero {
    /* Background Image Setup */
    /* EDIT: Change the URL inside url('') to your own image file path */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('masterimage.jpg');
    background-size: cover; /* Ensures image covers the whole area */
    background-position: center; /* Centers the image */
    
    height: 400px; /* EDIT: Change height of the top banner here */
    
    /* Flexbox used to center text horizontally and vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; /* Text color inside hero */
}

.hero h1 {
    font-size: 3rem; /* EDIT: Change Title Size */
    margin-bottom: 10px; /* Space below title */
}

/* ========================================= */
/* COURSES SECTION STYLES                    */
/* ========================================= */
.courses-container {
    max-width: 1200px; /* Prevents site from getting too wide on large screens */
    margin: 50px auto; /* Centers the container in the middle of the page */
    padding: 0 20px; /* Adds space on left and right sides */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px; /* Space between "Our Courses" and the cards */
}

/* THE GRID LAYOUT */
.course-grid {
    display: grid;
    /* This magic line makes it responsive automatically */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Space between cards */
}

/* ========================================= */
/* INDIVIDUAL CARD DESIGN                    */
/* ========================================= */
.course-card {
    background: white; /* Card background color */
    padding: 20px; /* Space inside the card */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow effect */
    text-align: center; /* Centers text inside card */
    transition: transform 0.3s; /* Smooth animation for hover */
}

/* Hover Effect: Moves card up slightly when mouse is over it */
.course-card:hover {
    transform: translateY(-5px); 
}

.course-title {
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 15px; /* Space between title and image */
}

.course-img {
    width: 100%; /* Image takes full width of the card */
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures image doesn't stretch weirdly */
    border-radius: 5px; /* Slightly rounded image corners */
    margin-bottom: 15px; /* Space below image */
}

.course-desc {
    color: #555; /* Lighter text for description */
    margin-bottom: 15px;
    font-size: 1rem;
}

.course-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #27ae60; /* Green color for price */
    padding-top: 10px;
    border-top: 1px solid #eee; /* Thin line above price */
}

/* ========================================= */
/* FOOTER STYLES                             */
/* ========================================= */
footer {
    background-color: #333; /* Dark footer background */
    color: white; /* White text */
    text-align: center;
    padding: 20px; /* Spacing inside footer */
    margin-top: 50px; /* Space above footer */
}

/* ========================================= */
/* REGISTER BUTTON STYLES                    */
/* ========================================= */

/* Update the price container to hold the button nicely */
.course-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #27ae60;
    padding-top: 15px;
    border-top: 1px solid #eee;
    
    /* This makes the price and button sit side-by-side */
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

/* The style for the Register button */
.register-btn {
    background-color: #007bff; /* Blue color */
    color: white; /* White text */
    padding: 10px 20px; /* Size of the button */
    text-decoration: none; /* Removes underline */
    border-radius: 5px; /* Rounded corners */
    font-size: 0.9rem;
    transition: background-color 0.3s; /* Smooth color change */
}

/* Change color when mouse moves over the button */
.register-btn:hover {
    background-color: #0056b3; /* Darker blue */

}