/* General Layout */
body { margin: 0; font-family: sans-serif; }
.section { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; background-size: cover; background-position: center; }

/* Header */
header { display: flex; align-items: center; padding: 15px 30px; background: white; position: fixed; width: 100%; top: 0; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.logo { display: flex; align-items: center; }
.logo img { height: 50px; margin-right: 15px; }
.logo h2 { color: #494d4a; margin: 0; }
nav { margin-left: auto; display: flex; gap: 20px; padding-right: 40px; }
nav a { text-decoration: none; color: #333; font-weight: bold; }

/* Hero Section */
.hero { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('slid2.png'); }

/* Popups */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
.modal-content { background: white; padding: 20px; width: 80%; max-width: 500px; color: black; border-radius: 10px; }

/* Footer */
footer { position: fixed; bottom: 50px; left: 10px; color: #f6f2f2; font-size: 0.9rem; }
footer {
    position: fixed;
    bottom: 10px;
    left: 10px;
    color: #555;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.footer-links a {
    color: #27ae60;
    text-decoration: none;
    font-weight: bold;
    margin-right: 10px;
}

.footer-links a:hover {
    text-decoration: underline;
}