/* =====================================================
   GLOBAL
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

/* BACKGROUNDS */
.home-page,
.about-page,
.programs-page,
.gallery-page,
.lions-page,
.testimonials-page,
.contact-page {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.home-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/home-bg.jpg');}
.about-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/about-bg.jpg');}
.programs-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/programs-bg.jpg');}
.gallery-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/gallery-bg.jpg');}
.testimonials-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/testimonials-bg.jpg');}
.contact-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/contact-bg.jpg');}
.lions-page {background-image: linear-gradient(rgba(0,25,50,.65),rgba(0,25,50,.65)), url('assets/lions-bg.jpg');}

/* HEADER */
.top {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 25px;
    background: rgba(255,255,255,.30);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.35);
}

.logo-link { 
    text-decoration: none; 
}

.logo-container {
    background: rgba(255,255,255,.15);
    border: none;
    box-shadow: none;
    padding: 4px 8px;
    border-radius: 10px;
    backdrop-filter: blur(6px);
    transition: .3s ease;
}

.logo-container:hover { 
    transform: scale(1.03); 
}

.logo {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}

.nav { display:flex; gap:20px; }
.nav a {
 color:#fff;
 text-decoration:none;
 font-weight:600;
 transition:.3s ease;
}
.nav a:hover { color:#7bb5ff; }

.action-buttons { display:flex; gap:10px; }
.proposal-btn,.call-btn,.btn {
 color:#fff;
 text-decoration:none;
 border-radius:8px;
 padding:12px 18px;
 font-weight:bold;
 transition:.3s ease;
}
.proposal-btn{background:#0f2d52;}
.proposal-btn:hover{background:#174ea6;}
.call-btn{background:#28a745;}
.call-btn:hover{background:#20963c;}

.hero {
 min-height:50vh;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding:60px 20px;
}
.hero-content{max-width:900px;animation:fadeUp 1s ease;}
.hero h1{font-size:3.5rem;font-weight:700;line-height:1.2;text-shadow:0 3px 10px rgba(0,0,0,.45);margin-bottom:20px;}
.hero h2{color:#d2e4ff;margin-bottom:15px;}
.hero p{font-size:1.3rem;margin-bottom:30px;}
.hero-buttons {
    margin-top: 25px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.hero-btn {
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.hero-btn-programs {
    background: #0f2d52;
}
.hero-btn-programs:hover {
    background: #174ea6;
}
.hero-btn-contact {
    background: #28a745;
}
.hero-btn-contact:hover {
    background: #20963c;
}

.container{max-width:1200px;margin:auto;padding:50px 20px;}
.section-title{text-align:center;margin-bottom:30px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin-bottom:30px;}

.card {
 background:rgba(255,255,255,.30);
 backdrop-filter:blur(18px);
 color:#fff;
 padding:25px;
 border-radius:12px;
 margin-bottom:25px;
 border:1px solid rgba(255,255,255,.35);
 box-shadow:0 6px 16px rgba(0,0,0,.25);
 transition:.3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.30);} 
.card h2,.card h3{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);margin-bottom:15px;}
.card p{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);}
.card ul li{color:#f2f6ff;margin-bottom:8px;}
.framework{text-align:center;}
.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

footer{background:rgba(0,20,40,.9);text-align:center;padding:25px;}

.hamburger{
 display:none;
 font-size:32px;
 background:rgba(255,255,255,.30);
 border:1px solid rgba(255,255,255,.35);
 padding:6px 12px;
 border-radius:8px;
 cursor:pointer;color:white;
}
.nav.open{display:flex !important;}

@media (max-width:600px){
    .top{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:4px 10px;
        min-height:60px;
    }

    .logo{height:45px;}

    .action-buttons{display:flex;gap:4px;}

    .proposal-btn,.call-btn{
        width:38px;
        height:38px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:0;
    }

    .proposal-btn::before{content:"📄";font-size:18px;}
    .call-btn::before{content:"📞";font-size:18px;}

    .hamburger{display:block;color:white;}

    .nav{
        display:none;
        position:absolute;
        top:60px;
        left:0;
        width:100%;
        flex-direction:column;
        background:rgba(0,20,40,.95);
        padding:20px;
        z-index:999;
    }

    .nav.open{display:flex;}

    .hero h1{font-size:1.75rem;line-height:1.2;}
    .hero h2,.hero p{font-size:1rem;}

    /* FIXED: mobile hero buttons */
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
@keyframes fadeUp {
 from { opacity:0; transform:translateY(30px);} 
 to { opacity:1; transform:translateY(0);} 
}