*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:Arial, sans-serif;

    background:#f5f7fb;

    overflow-x:hidden;

}

/* Navbar */

.navbar{

    background:#111827;

    padding:15px 0;

}

.navbar-brand{

    font-size:24px;

    font-weight:bold;

}

.nav-link{

    color:white !important;

    margin-left:15px;

}

/* Hero */

.hero{

    padding:80px 0;

}

.hero h1{

    font-size:55px;

    font-weight:bold;

    margin-bottom:20px;

    color:#111827;

}

.hero p{

    font-size:18px;

    color:gray;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-image{

    width:100%;

    max-width:420px;

}

/* Features */

.features{

    padding:60px 0;

}

.feature-card{

    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,0.08);

    transition:0.3s;

    height:100%;

}

.feature-card:hover{

    transform:translateY(-5px);

}

.feature-card i{

    font-size:50px;

    color:#111827;

    margin-bottom:20px;

}

.feature-card h3{

    margin-bottom:15px;

}

/* Footer */

.footer{

    background:#111827;

    color:white;

    text-align:center;

    padding:20px;

    margin-top:50px;

}

/* Mobile */

@media(max-width:768px){

    .hero{

        text-align:center;

        padding-top:95px;

    }

    .hero h1{

        font-size:38px;

    }

    .hero p{

        font-size:16px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-image{

        margin-top:40px;

        max-width:280px;

    }

}