:root {

    --primary-teal: #3b9baf;

    --accent-yellow: #f8db3a;

    --dark-text: #1a1a1a;

    --light-bg: #fdfdfd;

}



body {

    font-family: 'Arial', sans-serif;

    background-color: var(--light-bg);

    color: var(--dark-text);

    margin: 0;

    padding: 0;

    line-height: 1.6;

}



header {

    background-color: var(--primary-teal);

    color: white;

    text-align: center;

    padding: 2rem 1rem;

    border-bottom: 5px solid var(--accent-yellow);

}



header h1 {

    margin: 0;

    font-size: 2.5rem;

}



nav {

    display: flex;

    justify-content: center;

    background-color: #2b7a8a;

    padding: 1rem;

    flex-wrap: wrap;

}



nav a {

    color: white;

    text-decoration: none;

    margin: 0 15px;

    font-weight: bold;

    font-size: 1.1rem;

}



nav a:hover {

    color: var(--accent-yellow);

}



.container {

    max-width: 900px;

    margin: 2rem auto;

    padding: 0 1rem;

}



.btn {

    display: inline-block;

    background-color: var(--accent-yellow);

    color: var(--dark-text);

    padding: 10px 20px;

    text-decoration: none;

    font-weight: bold;

    border-radius: 25px;

    border: none;

    cursor: pointer;

    font-size: 1.1rem;

}



.btn:hover {

    background-color: #e5c928;

}



.card {

    background: white;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    padding: 20px;

    margin-bottom: 20px;

    border-top: 4px solid var(--primary-teal);

}



/* Forms */

form {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



input, select, textarea {

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 1rem;

}



/* Gallery Grid */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 15px;

    margin-top: 20px;

}



.gallery-grid img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    border-radius: 5px;

    border: 2px solid var(--primary-teal);

}