:root {

    --primary: #0B4CC2;
    --secondary: #D4A017;
    --danger: #C62828;
    --light: #F7F9FC;
    --dark: #16314d;

}

body {

    font-family: 'Poppins', sans-serif;
    background: #fff;
    overflow-x: hidden;

}

 
html {

    scroll-behavior: smooth;

}

/* NAVBAR */

.navbar {

    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);

}

.navbar-brand {

    font-weight: 700;
    color: var(--primary) !important;

}

.nav-link {

    font-weight: 500;
    color: #555 !important;
    margin-left: 15px;

}

.nav-link:hover {

    color: var(--primary) !important;

}

/* HERO */

.hero {

    min-height: 100vh;

    display: flex;
    align-items: center;

    background:

        linear-gradient(rgba(255, 255, 255, .93),
            rgba(255, 255, 255, .93)),

        url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?auto=format&fit=crop&w=1800&q=80');

    background-size: cover;
    background-position: center;

    position: relative;

}

.hero:before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:

        radial-gradient(circle at top right,
            rgba(11, 76, 194, .08),
            transparent 45%),

        radial-gradient(circle at bottom left,
            rgba(212, 160, 23, .10),
            transparent 35%);

}

.hero-content {

    position: relative;
    z-index: 2;

}

.logo {

    width: 170px;

    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .15));

}

.hero h1 {

    font-size: 3.4rem;
    font-weight: 800;
    color: var(--primary);

}

.hero p {

    font-size: 1.2rem;
    color: #666;
    line-height: 1.8;

}

/* BUTTONS */

.btn-primary {

    background: var(--primary);
    border: none;
    padding: 14px 30px;
    border-radius: 50px;

}

.btn-primary:hover {

    background: #083998;

}

.btn-warning {

    background: var(--secondary);
    border: none;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;

}

.btn-warning:hover {

    background: #b8880d;

}

/* FEATURE CARD */

.feature {

    padding: 40px 25px;

    border-radius: 20px;

    transition: .4s;

    background: white;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

    height: 100%;

}

.feature:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, .12);

}

.feature i {

    font-size: 55px;
    color: var(--primary);
    margin-bottom: 20px;

}

/* STATS */

.stats {

    background: linear-gradient(135deg,
            var(--primary),
            #1649a5);

    color: white;

}

.stat-number {

    font-size: 3rem;
    font-weight: 700;

}

.stat-title {

    letter-spacing: 1px;

}

/* CTA */

.cta {

    background: linear-gradient(135deg,
            var(--secondary),
            #efb517);

    color: white;

    border-radius: 25px;

}

/* FOOTER */

footer {

    background: #0f2135;

    color: #ddd;

}

footer a {

    color: white;
    text-decoration: none;

}

footer a:hover {

    color: var(--secondary);

}

.social a {

    display: inline-flex;

    width: 45px;
    height: 45px;

    align-items: center;
    justify-content: center;

    background: #1d3550;

    border-radius: 50%;

    margin-right: 10px;

    transition: .3s;

}

.social a:hover {

    background: var(--secondary);

    transform: translateY(-5px);

}

.section-title {

    font-weight: 700;
    color: var(--primary);

}


/* RESPONSIVE */

@media(max-width:768px){

    .hero{
        padding-top:100px;
        text-align:center;
    }

    .logo{
        width:120px;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:1rem;
    }

    .btn-primary,
    .btn-warning{
        display:block;
        width:100%;
        margin-bottom:15px;
    }


    .stat-card {
        border: none;
        border-radius: 16px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08) !important;
    }
    .icon-shape {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}