/* Reset & basics */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Arial', sans-serif; line-height:1.6; background:#f0f8ff; color:#00334d; }

/* Header */
header {
    background: linear-gradient(90deg, #004466, #006699);
    color: white;
    padding: 1rem 2rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}
header h1 { font-size: 1.8rem; }
header nav a {
    color:white;
    text-decoration:none;
    margin-left:1rem;
    font-weight: bold;
}
header nav a:hover { text-decoration: underline; }

/* Main content */
main { padding: 2rem; max-width:1200px; margin:auto; }

/* Hero section */
.hero {
    background: url('../images/hero.jpg') center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 6rem 2rem;
    margin-bottom:2rem;
    border-radius: 15px;
}
.hero h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; }

/* Course cards */
.cards { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.card {
    background:white;
    border-radius:15px;
    padding:1rem;
    flex:1 1 250px;
    max-width:300px;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-5px); box-shadow:0 6px 12px rgba(0,0,0,0.2); }
.card img { width:100%; border-radius:10px; margin-bottom:1rem; }
.card h3 { margin-bottom:0.5rem; }
.card p { font-size:0.95rem; }

/* Footer */
footer {
    background:#004466;
    color:white;
    text-align:center;
    padding:1rem 2rem;
    margin-top:2rem;
    border-top:3px solid #006699;
}

/* Buttons */
button {
    padding:0.5rem 1rem;
    background:#006699;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition: background 0.3s;
}
button:hover { background:#004466; }

/* Forms */
input, textarea, select { width:100%; padding:0.5rem; margin:0.5rem 0; border:1px solid #ccc; border-radius:5px; }
textarea { font-family: monospace; }

/* Messages */
.message { color:green; margin:0.5rem 0; font-weight:bold; }

/* Login page */
.login-container {
    max-width:400px;
    margin:5rem auto;
    background:white;
    padding:2rem;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* Gallery images */
.gallery img { max-width:150px; margin:5px; border-radius:5px; }

/* Responsive */
@media(max-width:768px) {
    .cards { flex-direction: column; align-items:center; }
    header { flex-direction:column; align-items:flex-start; }
    header nav a { margin:0.5rem 0; }
}