:root{
 --primary:#0D47A1;
 --secondary:#1565C0;
 --accent:#FFC107;
 --light:#f5f7fa;
 --dark:#1f2937;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Poppins,sans-serif;background:var(--light);color:#333;line-height:1.6}
.container{width:90%;max-width:1200px;margin:auto}
header{position:sticky;top:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);z-index:1000}
header .container{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo h2{color:var(--primary)} .logo span{color:var(--accent)}
.nav-links{display:flex;list-style:none;gap:30px}
.nav-links a{text-decoration:none;color:#333;font-weight:500}
.nav-links a:hover{color:var(--primary)}
.header-buttons{display:flex;gap:10px}
.btn{padding:12px 24px;border-radius:40px;text-decoration:none;font-weight:600;transition:.3s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--secondary)}
.btn-outline{border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-outline-light{border:2px solid #fff;color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--primary)}
.menu-btn{display:none;font-size:28px}
.hero{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:100px 0}
.hero-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.hero h1{font-size:52px;margin-bottom:20px}
.hero p{margin-bottom:30px}
.hero-buttons{display:flex;gap:15px}
.hero img{width:100%}
section{padding:80px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:38px;color:var(--primary)}
.about-grid,.services-grid,.pricing-grid,.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.about-card,.service-card,.price-card{background:#fff;padding:30px;border-radius:12px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.08);transition:.3s}
.about-card:hover,.service-card:hover,.price-card:hover{transform:translateY(-8px)}
.about-card i,.service-card i{font-size:42px;color:var(--accent);margin-bottom:15px}
.stats{background:var(--primary);color:#fff}
.stats .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center;gap:20px}
.stat h2{font-size:42px}
.cta{background:var(--secondary);color:#fff;text-align:center}
.btn-light{background:#fff;color:var(--primary)}
footer{background:#0b2345;color:#ddd;padding-top:60px}
footer h3{color:#fff;margin-bottom:15px}
footer ul{list-style:none}
footer a{color:#ddd;text-decoration:none}
footer a:hover{color:var(--accent)}
.copyright{text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,.15);margin-top:30px}
@media(max-width:768px){
.nav-links,.header-buttons{display:none}
.menu-btn{display:block}
.hero-content{grid-template-columns:1fr;text-align:center}
.hero h1{font-size:38px}
.hero-buttons{justify-content:center;flex-wrap:wrap}
}
/* ==========================================
   RESPONSIVE DESIGN
========================================== */

/* Tablets */

@media (max-width: 992px){

    section{
        padding:70px 5%;
    }

    .container{
        width:100%;
    }

    /* Hero */

    .hero-content{
        flex-direction:column-reverse;
        text-align:center;
        gap:40px;
    }

    .hero-text,
    .hero-image{
        width:100%;
    }

    .hero-text h1{
        font-size:42px;
    }

    .hero-image img{
        width:100%;
        max-width:500px;
        margin:auto;
        display:block;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* About */

    .about-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* Services */

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* Pricing */

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

    /* Stats */

    .stats .container{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    /* Footer */

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }

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

    section{
        padding:60px 20px;
    }

    .section-title h2{
        font-size:30px;
    }

    .section-title p{
        font-size:16px;
    }

    /* Hero */

    .hero{
        padding-top:120px;
    }

    .hero-content{
        flex-direction:column-reverse;
        text-align:center;
    }

    .hero-text h1{
        font-size:34px;
        line-height:1.3;
    }

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

    .hero-image img{
        width:100%;
        height:auto;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons a{
        width:100%;
        text-align:center;
    }

    /* About */

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

    /* Services */

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

    /* Pricing */

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

    /* Stats */

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

    .stat{
        padding:25px;
    }

    /* Footer */

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-grid ul{
        padding:0;
        list-style:none;
    }

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

    .hero-text h1{
        font-size:28px;
    }

    .section-title h2{
        font-size:26px;
    }

    .hero-text p,
    .about-card p,
    .service-card p,
    .price-card p{
        font-size:15px;
    }

    .about-card,
    .service-card,
    .price-card{
        padding:20px;
    }

    .btn{
        width:100%;
        display:block;
        text-align:center;
    }

    .copyright{
        font-size:13px;
        line-height:1.6;
    }

}