
:root {
    --primary-color: #C2B0A1;
    --secondary-color: #635E57;
    --accent-color: #851A10;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --transition: all 0.3s ease-in-out;
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
html { scroll-behavior:smooth; }
body { background:#f5f5f5; color:#333; overflow-x:hidden; }
.container { width:90%; max-width:1200px; margin:0 auto; padding:0 15px; }
section { padding:80px 0; }
h1, h2, h3, h4, h5 { color:var(--secondary-color); margin-bottom:20px; font-weight:700; }
h1 { font-size:2.8rem; line-height:1.2; }
h2 { font-size:2.2rem; position:relative; display:inline-block; margin-bottom:40px; }
h2::after { content:''; position:absolute; bottom:-10px; left:0; width:60px; height:4px; background:var(--accent-color); }
p { line-height:1.7; margin-bottom:15px; color:#555; }
img { max-width:100%; height:auto; border-radius:8px; }

.btn { display:inline-block; padding:12px 30px; background:var(--accent-color); color:#fff; border:none; border-radius:50px;
    font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:var(--transition);
    text-decoration:none; box-shadow:0 4px 15px rgba(214,6,6,0.3); }
.btn:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(214,6,6,0.4); background:#c00505; }
.btn-outline { background:transparent; border:2px solid var(--accent-color); color:var(--accent-color); box-shadow:none; }
.btn-outline:hover { background:var(--accent-color); color:#fff; }

header { position:sticky; top:0; left:0; width:100%; z-index:1000; transition:var(--transition); background:rgba(255,255,255,0.95);
    box-shadow:0 2px 10px rgba(0,0,0,0.1); }
header.scrolled { background:#fff; padding:10px 0; box-shadow:0 2px 15px rgba(0,0,0,0.1); }
.navbar { display:flex; justify-content:space-between; align-items:center; padding:20px 0; transition:var(--transition); }
.logo { display:flex; align-items:center; }
.logo img { height:60px; margin-right:10px; border-radius:0; }
.logo h1 { font-size:1.5rem; margin:0; color:var(--secondary-color); }
.logo span { color:var(--accent-color); }
.nav-links { display:flex; list-style:none; }
.nav-links li { margin-left:30px; }
.nav-links a { text-decoration:none; color:var(--secondary-color); font-weight:600; text-transform:uppercase; font-size:0.9rem;
    letter-spacing:1px; transition:var(--transition); position:relative; }
.nav-links a:hover { color:var(--accent-color); }
.nav-links a::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--accent-color); transition:var(--transition); }

.nav-links .active { color:var(--accent-color); }
.nav-links a:hover::after { width:100%; }
.mobile-toggle { display:none; font-size:1.5rem; cursor:pointer; color:var(--secondary-color); }
@media (min-width:992px){
.video-header { position:relative; min-height:100vh; width:100%; overflow:hidden; background:#000; }
.video-container { position:absolute; inset:0; z-index:0; }
#hero-video { width:100%; height:100%; object-fit:cover; }
.overlay { position:absolute; inset:0; background:rgba(7,23,105,0.35); z-index:1; }
.header-content { position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; justify-content:center; color:#fff; text-align:center; padding:0 20px; }
.header-content h3 { color:#fff; font-size:50px;margin-bottom:20px; animation:fadeInUp 1s ease-out; }
.header-content p { font-size:1.2rem; max-width:800px; margin:0 auto 30px; animation:fadeInUp 1s ease-out 0.3s both; }
.header-buttons { animation:fadeInUp 1s ease-out 0.6s both; }
.header-buttons .btn { margin:0 10px; }
}
.unmute-control { position:absolute; right:20px; bottom:20px; z-index:3; padding:10px 16px; background:rgba(0,0,0,0.5); border:1px solid #fff; color:#fff; border-radius:999px; }

.about-content { display:flex; align-items:center; gap:50px; }
.about-img { flex:1; border-radius:10px;  box-shadow:0 15px 30px rgba(0,0,0,0.1); }
.about-text { flex:1; }
.stats-container { display:flex; justify-content:space-between; margin-top:40px; flex-wrap:wrap; }
.stat-item { flex:1; min-width:200px; text-align:center; padding:20px; }
.stat-item i { font-size:2.5rem; color:var(--accent-color); margin-bottom:15px; }
.stat-item h3 { font-size:2.5rem; color:var(--secondary-color); margin-bottom:5px; }

#facilities { background:var(--primary-color); color:#fff; }
#facilities h2, #facilities h3 { color:#fff; }
#facilities h2::after { background:#fff; }
.facilities-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; margin-top:40px; }
.facility-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 10px 20px rgba(0,0,0,0.1); transition:var(--transition); }
.facility-card:hover { transform:translateY(-10px); }
.facility-img { height:200px; overflow:hidden; }
.facility-img img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.facility-card:hover .facility-img img { transform:scale(1.1); }
.facility-content { padding:20px; }
.facility-content h3 { color:var(--secondary-color); margin-bottom:10px; }

.values-container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-top:40px; }
.value-card { flex:1; min-width:280px; text-align:center; padding:30px 20px; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,0.08);
    transition:var(--transition); border-top:5px solid var(--secondary-color); background:#fff; }
.value-card.vision { border-top-color:var(--accent-color); }
.value-card.mission { border-top-color:var(--primary-color); }
.value-card:hover { transform:translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,0.15); }
.value-card i { font-size:3rem; color:var(--accent-color); margin-bottom:20px; }
.value-card h3 { margin-bottom:15px; color:var(--secondary-color); }

#gallery { background:var(--primary-color); color:#fff; text-align:center; }
#gallery h2, #gallery h3 { color:#fff; }
#gallery h2::after { background:#fff; }
.gallery-filter { display:flex; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.filter-button { padding:8px 20px; margin:5px; background:rgba(255,255,255,0.2); color:#fff; border:none; border-radius:30px; cursor:pointer; transition:var(--transition); }
.filter-button.active, .filter-button:hover { background:var(--accent-color); }
.gallery-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.gallery-item { position:relative; border-radius:10px; overflow:hidden; height:250px; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.gallery-item:hover img { transform:scale(1.1); }
.gallery-overlay { position:absolute; inset:0; background:rgba(7,23,105,0.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--transition); }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay i { color:#fff; font-size:2.5rem; }

footer { background:var(--secondary-color); color:#fff; padding:60px 0 20px; }
.footer-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-bottom:40px; }
.footer-column h3 { color:#fff; margin-bottom:20px; position:relative; padding-bottom:10px; }
.footer-column h3::after { content:''; position:absolute; bottom:0; left:0; width:40px; height:3px; background:var(--accent-color); }
.footer-column p, .footer-column a { color:rgba(255,255,255,0.8); margin-bottom:10px; display:block; text-decoration:none; transition:var(--transition); }
.footer-column a:hover { color:#fff; padding-left:5px; }
.social-links { display:flex; gap:15px; margin-top:20px; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,0.1); color:#fff; border-radius:50%; transition:var(--transition); }
.social-links a:hover { background:var(--accent-color); transform:translateY(-3px); }
.footer-bottom { text-align:center; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); font-size:0.9rem; color:rgba(255,255,255,0.6); }

.modal { display:none; position:fixed; z-index:1001; inset:0; overflow:auto; background:rgba(0,0,0,0.9); opacity:0; transition:opacity 0.3s ease; }
.modal.active { opacity:1; }
.modal-content { margin:auto; display:block; max-width:90%; max-height:90%; margin-top:50px; border-radius:5px; box-shadow:0 4px 8px rgba(0,0,0,0.2); }
.close { position:absolute; top:20px; right:30px; color:#f1f1f1; font-size:40px; font-weight:bold; cursor:pointer; transition:var(--transition); }
.close:hover { color:#bbb; transform:rotate(90deg); }

#promo-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none; align-items:center; justify-content:center; z-index:1100; }
#promo-card { background:#fff; border-radius:16px; max-width:720px; width:92%; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,0.35); }
#promo-media { height:260px; background:#111; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#promo-media img { width:100%; height:100%; object-fit:cover; border-radius:0; }
#promo-body { padding:24px; }
#promo-body h3 { margin:0 0 8px; }
#promo-body p { margin-bottom:16px; }
#promo-actions { display:flex; gap:12px; flex-wrap:wrap; }
#promo-dismiss { background:#e9ecef; color:#111; }

@media (max-width:992px){
    .about-content{ flex-direction:column; }
    .about-img{ margin-bottom:30px; max-width:100%; }
    h1{ font-size:2.3rem; }
    h2{ font-size:2rem; }
	
	.video-header { position:relative; min-height:60vh; width:100%; overflow:hidden; background:#000; }
.video-container { position:absolute; inset:0; z-index:0; }
#hero-video { width:100%; height:100%; object-fit:cover; }
.overlay { position:; inset:0; background:rgba(7,23,105,0.35); z-index:1; }
.header-content { position:relative; z-index:2;  display:flex; flex-direction:column; justify-content:center; color:#fff; text-align:center; padding:0 20px; }
.header-content h3 { color:#fff; margin-top:130px; font-size:30px; animation:fadeInUp 1s ease-out; }
.header-content p { font-size:1.2rem; max-width:800px; margin:0 auto 30px; animation:fadeInUp 1s ease-out 0.3s both; }
.header-buttons { animation:fadeInUp 1s ease-out 0.6s both; }
.header-buttons  .btn {right:20px; bottom:-30px; position:absolute;}
}
@media (max-width:768px){
    .nav-links{ position:fixed; top:80px; left:-100%; width:100%; height:calc(100vh - 80px); flex-direction:column; background:#fff; padding:40px 0;
        transition:var(--transition); box-shadow:0 10px 15px rgba(0,0,0,0.1); }
    .nav-links.active{ left:0; }
    .nav-links li{ margin:15px 0; text-align:center; }
    .mobile-toggle{ display:block; }
    .header-content h1{ font-size:2rem; }
    .header-content p{ font-size:1rem; }
    .btn{ display:block; width:80%; margin:10px auto; }
    section{ padding:60px 0; }
    .values-container{ flex-direction:column; }
    .value-card{ margin-bottom:20px; }
    .stats-container{ flex-direction:column; }
	
	.video-header { position:relative; min-height:60vh; width:100%; overflow:hidden; background:#000; }
.video-container { position:absolute; inset:0; z-index:0; }
#hero-video { width:100%; height:100%; object-fit:cover; }
.overlay { position:; inset:0; background:rgba(7,23,105,0.35); z-index:1; }
.header-content { position:relative; z-index:2;  display:flex; flex-direction:column; justify-content:center; color:#fff; text-align:center; padding:0 20px; }
.header-content h3 { color:#fff; margin-top:130px; font-size:30px; animation:fadeInUp 1s ease-out; }
.header-content p { font-size:1.2rem; max-width:800px; margin:0 auto 30px; animation:fadeInUp 1s ease-out 0.3s both; }
.header-buttons { animation:fadeInUp 1s ease-out 0.6s both; }
.header-buttons  .btn {right:20px; bottom:-30px; position:absolute;}
}
@media (max-width:576px){
    .header-buttons .btn{ margin:10px 0; }
    .logo h1{ font-size:1.3rem; }
    .nav-links li{ margin:10px 0; }
    h1{ font-size:2rem; }
    h2{ font-size:1.8rem; }
	
	.video-header { position:relative; min-height:60vh; width:100%; overflow:hidden; background:#000; }
.video-container { position:absolute; inset:0; z-index:0; }
#hero-video { width:100%; height:100%; object-fit:cover; }
.overlay { position:; inset:0; background:rgba(7,23,105,0.35); z-index:1; }
.header-content { position:relative; z-index:2;  display:flex; flex-direction:column; justify-content:center; color:#fff; text-align:center; padding:0 20px; }
.header-content h3 { color:#fff; margin-top:130px; font-size:30px; animation:fadeInUp 1s ease-out; }
.header-content p { font-size:1.2rem; max-width:800px; margin:0 auto 30px; animation:fadeInUp 1s ease-out 0.3s both; }
.header-buttons { animation:fadeInUp 1s ease-out 0.6s both; }
.header-buttons  .btn {right:20px; bottom:-30px; position:absolute;}
}

@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
