.logo{font-size:34px;font-weight:700;color:#023047}
.logo span{color:#00b4d8}
header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:#fff;padding:20px 8%;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 20px rgba(0,0,0,.08)}
nav{display:flex;align-items:center;gap:35px}
nav a{text-decoration:none;color:#023047;font-size:18px;font-weight:500;line-height:1;transition:.3s;position:relative}
nav a:hover,nav a.active{color:#00b4d8}
nav a.active::after,nav a:hover::after{content:"";position:absolute;width:100%;height:3px;background:#00b4d8;left:0;bottom:-8px}
@media(max-width:768px){header{flex-direction:column;padding:20px}.logo{font-size:28px;margin-bottom:15px}nav{flex-wrap:wrap;justify-content:center;gap:12px}nav a{font-size:14px}}


*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f5fbff}
header{
    background:#fff;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
}

header h2{
    font-size:28px;
    font-weight:bold;
    color:#000;
}



.logo{
    font-size:34px;
    font-weight:700;
    color:#023047;
}

.logo span{
    color:#00b4d8;
}



nav{
    display:flex;
    align-items:center;
    gap:35px;
}

nav a{
    text-decoration:none;
    color:#023047;
    font-size:18px;
    font-weight:500;
    transition:.3s;
    position:relative;
}

nav a:hover{
    color:#0077b6;
}

nav a.active{
    color:#0077b6;
}

nav a.active::after,
nav a:hover::after{
    content:"";
    position:absolute;
    width:100%;
    height:3px;
    background:#00b4d8;
    left:0;
    bottom:-8px;
}

nav a:hover{
    color:#0077b6;
}
.hero{min-height:90vh;background:linear-gradient(135deg,#0077b6,#00b4d8);color:#fff;padding:80px 8%;display:flex;align-items:center}
.hero div{max-width:700px}
.hero h1{font-size:60px;margin-bottom:20px}
.hero p{font-size:20px;line-height:1.8}
.btn{display:inline-block;margin-top:25px;padding:14px 30px;background:#fff;color:#0077b6;border-radius:30px;text-decoration:none;font-weight:bold}
.section{padding:80px 8%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:#fff;padding:30px;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,.08);text-align:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:#0077b6;color:#fff;padding:30px;border-radius:15px;text-align:center}
footer{background:#012a4a;color:#fff;text-align:center;padding:30px}
.btn:hover{
    background-color: #004c74;
    color: #f5fbff;
    
}

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

@media(max-width:992px){

    .footer-content{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:45px;
    }

    .cards{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    header{
        flex-direction:column;
        gap:15px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        min-height:70vh;
        text-align:center;
        justify-content:center;
        padding:60px 20px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

    .section{
        padding:60px 20px;
    }
}

.hero{
    margin-top:80px;
}

.logo{
    font-size:32px;
    font-weight:700;
    color:#023047;
}

.logo span{
    color:#00b4d8;
}