/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}

body{
    background:#f8f9fb;
    color:#1b1b1b;
}

/* =========================
        NAVBAR
========================= */

.profile-link{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#10284f;

    font-weight:600;

}

.profile-link i{

    color:#6B8E23;

    font-size:20px;

}

.nav-right{

    display:flex;

    align-items:center;

    gap:12px;

}
/* =========================
        HERO
========================= */

.hero{

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 140px 8% 80px;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,0.88) 0%,
        rgba(255,255,255,0.65) 35%,
        rgba(255,255,255,0.15) 65%,
        rgba(255,255,255,0.02) 100%
    ),
    url("../assets/bg2.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}
.hero-content{
    animation:fadeUp 1.2s ease forwards;
}

.hero-buttons{
    animation:fadeUp 1.6s ease forwards;
}


@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


@keyframes heroZoom{
    from{
        background-size:100%;
    }

    to{
        background-size:110%;
    }
}

.hero h1 {

    font-size: 72px;

    line-height: 82px;

    font-weight: 800;

    color: #10284f;

    letter-spacing: -2px;
}

.hero p{
    max-width:650px;
    margin-top:30px;
    font-size:20px;
    line-height:1.8;
    color:#222;
}
.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

}
.hero-buttons{
    animation:floatButtons 3s ease-in-out infinite;
}

@keyframes floatButtons{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

.primary-btn {

    display: inline-block;

    padding: 18px 36px;

    border-radius: 10px;

    background: #10284f;

    color: white;

    text-decoration: none;

    transition: 0.35s ease;
}

.primary-btn:hover {

    transform: translateY(-4px);

    background: #6B8E23;

    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.secondary-btn {

    display: inline-block;

    margin-left: 18px;

    padding: 18px 36px;

    border: 2px solid #10284f;

    border-radius: 10px;

    color: #10284f;

    text-decoration: none;

    transition: .35s;
}

.secondary-btn:hover {

    background: #10284f;

    color: white;
}

.location{

    margin-top:30px;

    font-weight:600;

    color:#0d2346;

}


@media (max-width:768px){

.hero{

justify-content:center;

text-align:center;

padding:120px 20px;

background-position:right center;

}

.hero-content{

max-width:100%;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}

.secondary-btn{

margin-left:0;

}

.hero h1{

font-size:42px;

line-height:52px;

}

}

/* =========================
      FEATURES
========================= */

.features{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    width:90%;

    margin:80px auto;

}
.feature-card{

    background:white;

    text-align:center;

    padding:35px;

    border-radius:15px;

    transition:.3s;

}
.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}
.feature-card i{

    font-size:40px;

    color:#6b8e23;

}
.feature-card h3{

    margin-top:20px;

    color:#0d2346;

}
.feature-card p{

    margin-top:15px;

    color:#666;

    line-height:28px;

}
.feature-card:nth-child(1){
    animation:floatCard 4s ease-in-out infinite;
}

.feature-card:nth-child(2){
    animation:floatCard 4.5s ease-in-out infinite;
}

.feature-card:nth-child(3){
    animation:floatCard 5s ease-in-out infinite;
}

.feature-card:nth-child(4){
    animation:floatCard 5.5s ease-in-out infinite;
}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}
.feature-card:hover,
.program-card:hover{
    transform:translateY(-12px) scale(1.03);
    transition:0.4s ease;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.reveal {

    opacity: 0;

    transform: translateY(70px);

    transition: 1s ease;
}

.reveal.active {

    opacity: 1;

    transform: translateY(0);
}
/* =========================
      PROGRAMS
========================= */
.programs{

    width:90%;

    margin:auto;

    padding:60px 0;

}
.programs h2{

    text-align:center;

    color:#0d2346;

    font-size:42px;

}
.subtitle{

    text-align:center;

    margin-top:10px;

    color:#777;

}
.program-grid{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}
.program-card{

    background:white;

    border-radius:15px;

    overflow:hidden;

    transition:.3s;

}
.program-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.1);

}
.program-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}
.program-card h3{

    padding:20px;

    color:#0d2346;

}
.program-card p{

    padding:0 20px;

    color:#666;

    min-height:70px;

}
.bottom{

    display:flex;

    justify-content:space-between;

    padding:20px;

    font-weight:600;

}
.view-btn{

    display:block;

    margin:45px auto;

    padding:16px 35px;

    background:#0d2346;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

}
.view-btn:hover{

    background:#6b8e23;

}

/* =========================
     MEMBERSHIP
========================= */
.membership{
    width:90%;
    margin:60px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-radius:20px;
    overflow:hidden;
}
.membership-left{
    background:#071b3c;
    color:#fff;
    padding:45px 45px;
}
.membership-left h2{
    font-size:52px;
    line-height:1.1;
    margin-bottom:18px;
}
.membership-left h4{
    color:#b8e68d;
    font-size:22px;
    margin-bottom:25px;
}
.membership-left ul{
    list-style:none;
    padding:0;
    margin:0;
}

.membership-left ul li{
    margin-bottom:18px;
    font-size:18px;
    line-height:1.6;
}
.membership-left a{
    margin-top:20px;
    padding:16px 34px;
    border:none;
    border-radius:8px;
    background:#b8d89f;
    color:#071b3c;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.membership-left a:hover{
    background:#98c875;
}
.membership-right img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* =========================
       BENEFITS
========================= */
.benefits{

    width:90%;

    margin:70px auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    text-align:center;

    gap:25px;

}
.benefits div{

    background:white;

    padding:35px;

    border-radius:15px;

}
.benefits i{

    font-size:35px;

    color:#6b8e23;

}
.benefits h4{

    margin-top:15px;

    color:#0d2346;

}

/* =========================
        FOOTER
========================= */
footer{
    background:#061b47;
    color:#fff;
    padding:40px 5%;
    display:grid;
    grid-template-columns:2.2fr 1fr 1fr 1fr 2fr;
    gap:35px;
}

.footer-brand{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:15px;
}

.footer-brand img{
    width:65px;
    height:auto;
    object-fit:contain;
}
.brand-text h2{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
    letter-spacing:1px;
}

.brand-text span{
    display:block;
    margin-top:4px;
    font-size:10px;
    color:#bfc7d5;
    letter-spacing:1px;
}

.footer-logo p{
    margin-top:0;
    margin-left:0;
    max-width:250px;
    color:#d9d9d9;
    line-height:1.6;
    font-size:14px;
    margin-bottom:18px;
}

.footer-logo small{
    color:#bfbfbf;
    font-size:12px;
}

.footer-col h4{
    font-size:14px;
    margin-bottom:18px;
    font-weight:700;
    letter-spacing:1px;
}

.footer-col a{
    display:block;
    color:#d9d9d9;
    text-decoration:none;
    margin-bottom:10px;
    font-size:14px;
    transition:.3s;
}

.footer-col a:hover{
    color:#9acd32;
}

.social-icons{
    display:flex;
    gap:18px;
    font-size:18px;
}

.social-icons i{
    cursor:pointer;
    transition:.3s;
}

.social-icons i:hover{
    color:#9acd32;
}

.newsletter p{
    color:#d9d9d9;
    font-size:14px;
    margin-bottom:15px;
}

.newsletter-box{
    display:flex;
}

.newsletter-box input{
    flex:1;
    padding:12px;
    border:none;
    outline:none;
    border-radius:5px 0 0 5px;
}

.newsletter-box button{
    background:#b9dca2;
    color:#061b47;
    border:none;
    padding:12px 20px;
    font-weight:600;
    cursor:pointer;
    border-radius:0 5px 5px 0;
}

/* =========================
      RESPONSIVE
========================= */

@media(max-width:1100px){
.program-grid{

grid-template-columns:repeat(2,1fr);

}
.features{

grid-template-columns:repeat(2,1fr);

}
.benefits{

grid-template-columns:repeat(2,1fr);

}
.hero{

grid-template-columns:1fr;

}
.membership{

grid-template-columns:1fr;

}
footer{

grid-template-columns:1fr 1fr;

}
.hero-content{

padding:60px;

}

}
@media(max-width:768px){


.hero h1{

font-size:45px;

line-height:55px;

}
.features{

grid-template-columns:1fr;

}
.program-grid{

grid-template-columns:1fr;

}
.benefits{

grid-template-columns:1fr;

}
footer{

grid-template-columns:1fr;

}
.hero-content{

padding:35px;

}
.membership-left{

padding:35px;

}

}



.hero{
    overflow:hidden;
}