body { 
    background:#000; 
    color:#fff; 
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1.25rem;
}
.container { 
    max-width:1320px; 
    margin:auto;
}
header, footer { padding:1rem; display:flex; justify-content:space-between; align-items:center; }
footer { justify-content:center; text-align:center; }
header img.logo { 
    width:60px; margin-right:10px;
}
.language-switcher a { color:#fff; margin-left:0.5rem; text-decoration:none; }
.language-switcher a.active { color:#999; }
.language-switcher a:hover { color:#FF6347; }
.hero { 
    position:relative; 
    background:url('../images/bg-sunset-over-the-sea.webp') center/cover no-repeat; 
    height:600px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    text-align:center;
    
}
.hero::after { 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background:rgba(0,0,0,0.5); 
    
}
.hero .content { position:relative; z-index:1; max-width:800px; }
.hero-title { 
    font-size:3rem; 
    font-weight:bold; 
    background:linear-gradient(90deg,#FF4500,#FFD700); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    margin-bottom: 2rem; 
}
.hero-slogan { 
    text-shadow:2px 2px 4px rgba(0,0,0,0.7); 
    font-size:1.5rem;
    margin-bottom: 2rem;
    color: #fff;
    line-height: 1.2;
}
h2 { color:#FF6347; margin-bottom:1.5rem; }
p { font-size:1.25rem; }
.card { background:#333; margin-bottom:1rem; padding:1rem; }
form { width:75%; margin:0 auto; }
form input, form textarea { margin-bottom:1rem; background:#222; color:#fff; border:none; padding:0.5rem; width:100%; border-radius:0.5rem; }
form button { background:#FF4500; color:#fff; border:none; padding:0.75rem 1.5rem; border-radius:0.5rem; font-size:1.25rem; font-weight:bold; }
.about-section { background:#222; padding:2rem; width:100%; }
.about-section img { width:120px; margin-bottom:1rem; }

.dropdown-menu .dropdown-item.active {
    color: #000;
    background-color: #e9ecef;
    font-weight: bold;
}

@media (max-width:440px) {
    .about-section{
        padding: 2rem 0.2rem;
    }
    .hero{
        height:440px;
        padding: 0.2rem;
    } 
    .hero-title{font-size:2rem;} 
    .hero-slogan{font-size:1.2rem;} form{width:100%;} 
    .btn.btn-warning{font-size:1rem; padding:0.5rem 1rem;} 
    .card{width:90%; margin:0.5rem auto;}
    header img.logo { 
        width:40px; margin-right:4px;
    }
    
}