:root {
    --dark-blue: #001f3f;
    --gold: #ffc107;
    --white: #ffffff;
    --light-bg: #f8f9fa;
}

body { font-family: 'Segoe UI', Arial, sans-serif; background-color: var(--light-bg); color: #333; }

/* Navigation */
.navbar { background-color: var(--dark-blue) !important; border-bottom: 3px solid var(--gold); }
.navbar-brand img { height: 50px; border: 1px solid var(--gold); border-radius: 5px; }
.nav-link { color: rgba(255,255,255,0.8) !important; font-weight: 600; text-transform: uppercase; margin-left: 20px; transition: 0.3s; }
.nav-link:hover, .nav-link.active { color: var(--gold) !important; }

/* Header */
.page-header { background: linear-gradient(rgba(0,31,63,0.9), rgba(0,31,63,0.9)), url('./v.jpeg'); background-size: cover; color: white; padding: 60px 0; text-align: center; border-bottom: 4px solid var(--gold); }

/* Components */
.card-custom { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-left: 6px solid var(--dark-blue); }
.img-res { width: 100%; border-radius: 10px; transition: 0.3s; object-fit: cover; height: 250px; }
.img-res:hover { transform: scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Services */
.service-card { background: white; padding: 15px; margin-bottom: 12px; border-left: 5px solid var(--dark-blue); border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.3s; }
.service-card:hover { background: #eef2f7; }
.main-service { background: #fff3cd; border-left-color: #d39e00; font-weight: bold; }

/* Footer */
footer { background-color: #111; color: #ccc; padding: 40px 0; margin-top: 50px; border-top: 4px solid var(--gold); }
.footer-icon { width: 35px; margin: 0 10px; filter: grayscale(100%); transition: 0.3s; }
.footer-icon:hover { filter: grayscale(0%); transform: translateY(-5px); }

iframe { width: 100%; border-radius: 10px; border: 1px solid #ddd; }