*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',-apple-system,sans-serif}
body{background:#f5f9fc;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem}
.card{max-width:1200px;width:100%;background:rgba(255,255,255,0.8);backdrop-filter:blur(2px);border-radius:3.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.15);padding:2.5rem 2.8rem 3.5rem;border:1px solid rgba(255,255,255,0.5)}
@media(max-width:640px){.card{padding:1.8rem 1.2rem 2.5rem;border-radius:2.5rem}}

.top-banner{display:flex;justify-content:space-between;align-items:center;padding:0.8rem 1.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#f8fafc 0%,#e8edf4 100%);border-radius:3rem;border:1px solid rgba(0,102,204,0.08)}
.banner-left{display:flex;align-items:center;gap:1.5rem}
.date-display{font-size:1.1rem;font-weight:600;color:#0b2233}
.clock-container{width:120px;height:120px}
.clock-container canvas{width:100%;height:100%}
.banner-right{display:flex;align-items:center}
.rdv-button{background:#0066cc;color:#fff;padding:.6rem 1.5rem;border-radius:3rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:.6rem;border:none}
.rdv-button:hover{background:#004d99;transform:scale(1.02);box-shadow:0 8px 16px -6px rgba(0,102,204,0.3)}

.rdv-modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center}
.rdv-modal-content{background:#fff;padding:2rem;border-radius:2rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}
.rdv-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.rdv-modal-header h2{font-size:1.3rem;color:#0b2233}
.rdv-modal-close{font-size:2rem;cursor:pointer;color:#8ba0b0;transition:.2s}
.rdv-modal-close:hover{color:#dc3545}

.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:2.5rem;border-bottom:1px solid rgba(0,30,60,0.06);padding-bottom:1.2rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo .logo-icon{font-size:2.4rem;color:#0066cc;background:#fff;padding:.5rem;border-radius:1.2rem;box-shadow:0 4px 10px rgba(0,102,204,0.15)}
.logo span{font-size:1.8rem;font-weight:700;color:#0a1e2f}
.logo span small{font-weight:400;font-size:.9rem;color:#4a5b6b;margin-left:.3rem}
.nav-icons{display:flex;gap:.5rem;flex-wrap:wrap}
.nav-icons a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border-radius:3rem;background:#fff;color:#1e2f3f;font-weight:500;font-size:.9rem;text-decoration:none;transition:.2s;border:1px solid rgba(0,0,0,0.02);box-shadow:0 2px 6px rgba(0,0,0,0.02)}
.nav-icons a i{font-size:.95rem;color:#0066cc}
.nav-icons a:hover{background:#0066cc;color:#fff;border-color:#0066cc;transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(0,102,204,0.25)}
.nav-icons a:hover i{color:#fff}

.hero{text-align:center;margin-bottom:2.8rem}
.hero h1{font-size:2.8rem;font-weight:700;color:#0b2233;line-height:1.2;margin-bottom:.75rem}
.hero h1 i{color:#0066cc}
.hero .badge{display:inline-block;background:#e5f0fa;color:#004b99;font-weight:600;font-size:.9rem;padding:.3rem 1.4rem;border-radius:40px;border:1px solid rgba(0,102,204,0.15)}
.hero p{font-size:1.25rem;color:#2a3f51;max-width:780px;margin:1.2rem auto 1rem;line-height:1.6;background:rgba(255,255,255,0.5);padding:.6rem 1.2rem;border-radius:60px;display:inline-block;border:1px solid rgba(255,255,255,0.8)}
.hero .sub{font-size:1.1rem;color:#1f3b4f;background:#fff;padding:.5rem 2rem;border-radius:60px;display:inline-block;box-shadow:0 4px 10px rgba(0,0,0,0.02);margin-top:.3rem;font-weight:500}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2.8rem 0 2.5rem}
.service-item{background:rgba(255,255,255,0.7);padding:1.8rem 1.2rem;border-radius:2.2rem;text-align:center;border:1px solid rgba(0,0,0,0.02);transition:.25s ease}
.service-item:hover{transform:translateY(-6px);background:#fff;border-color:rgba(0,102,204,0.15);box-shadow:0 16px 30px -12px rgba(0,102,204,0.12)}
.service-item i{font-size:2.6rem;color:#0066cc;background:#e9f2fa;padding:.7rem;border-radius:2rem;margin-bottom:1rem;width:4.4rem;display:inline-block}
.service-item h3{font-size:1.2rem;font-weight:600;color:#0b2233;margin-bottom:.4rem}
.service-item p{font-size:.95rem;color:#3c5568;line-height:1.4}

.gallery-section{margin-top:2.5rem;padding:1.5rem;background:rgba(255,255,255,0.4);border-radius:2rem;border:1px solid rgba(0,0,0,0.05)}
.gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.gallery-header h2{font-size:1.3rem;color:#0b2233;display:flex;align-items:center;gap:.5rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.gallery-item{border-radius:0.8rem;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08);aspect-ratio:4/3;background:#e9f2fa}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

.info-zone{background:#ffffffcc;backdrop-filter:blur(4px);border-radius:3rem;padding:1.8rem 2.2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;border:1px solid rgba(255,255,255,0.8);box-shadow:0 6px 14px rgba(0,0,0,0.02);margin-top:.5rem}
.info-zone .hours{display:flex;align-items:center;gap:.8rem;font-weight:500;color:#003366}
.info-zone .hours i{font-size:1.8rem;color:#0066cc;background:#fff;padding:.5rem;border-radius:3rem}
.info-zone .hours span{background:#ebf3fa;padding:.3rem 1.2rem;border-radius:40px;font-size:.95rem;font-weight:600}
.cta-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.8rem;border-radius:60px;font-weight:600;font-size:.95rem;text-decoration:none;transition:.2s;background:#fff;color:#0b2233;border:1px solid #dbe4ed}
.btn-primary{background:#0066cc;color:#fff;border:1px solid #0066cc;box-shadow:0 6px 12px -6px rgba(0,102,204,0.2)}
.btn-primary:hover{background:#004d99;transform:scale(1.02)}
.btn-outline{border:1px solid #bccddb;background:transparent}
.btn-outline:hover{background:#0066cc10;border-color:#0066cc}

.departments{margin-top:2.2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.8rem;font-size:.95rem;color:#1d3b52;background:rgba(255,255,255,0.4);padding:.6rem 1.8rem;border-radius:60px;border:1px solid rgba(255,255,255,0.5);font-weight:500}
.departments i{color:#0066cc}
.departments strong{font-weight:700;color:#002b55}

.contact-form{margin-top:2rem;background:rgba(255,255,255,0.6);padding:2rem;border-radius:2rem;border:1px solid rgba(0,0,0,0.05)}
.contact-form h3{margin-bottom:1rem;color:#0b2233}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-weight:500;margin-bottom:.3rem;color:#1f3b4f}
.form-group input,.form-group textarea{width:100%;padding:.6rem 1rem;border-radius:3rem;border:1px solid #dbe4ed;font-size:1rem;background:#fff}
.form-group textarea{border-radius:1.5rem;min-height:100px;resize:vertical}
.btn-submit{background:#0066cc;color:#fff;border:none;padding:.7rem 2.5rem;border-radius:3rem;font-weight:600;cursor:pointer;transition:.2s}
.btn-submit:hover{background:#004d99;transform:scale(1.02)}
.success-msg{background:#d4edda;color:#155724;padding:.8rem 1.5rem;border-radius:2rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.error-msg{background:#f8d7da;color:#721c24;padding:.8rem 1.5rem;border-radius:2rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}

.footer-note{margin-top:2.8rem;text-align:center;font-size:.9rem;color:#4b677b;border-top:1px solid rgba(0,0,0,0.04);padding-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 2.2rem}
.footer-note a{color:#0066cc;text-decoration:none;font-weight:500}
.footer-note a:hover{text-decoration:underline}

@media(max-width:640px){
.hero h1{font-size:2.2rem}
.hero p{font-size:1rem;padding:.6rem 1rem;display:block;border-radius:2rem}
.info-zone{flex-direction:column;align-items:stretch;text-align:center;padding:1.5rem}
.cta-buttons{justify-content:center}
.top-banner{flex-direction:column;gap:0.8rem;padding:0.8rem 1rem}
.banner-left{flex-wrap:wrap;justify-content:center}
.clock-container{width:90px;height:90px}
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}