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

/* =====================================
   HERO LEFT CONTENT
===================================== */

.hero-copy-col{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px 60px;
}

.hero{
    max-width:650px;
}

/* =====================================
   HERO BADGE
===================================== */

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(12px);

    border:1px solid rgba(29,118,236,.15);

    color:#1d76ec;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:28px;

    box-shadow:0 8px 25px rgba(29,118,236,.08);
}

/* =====================================
   HERO TITLE
===================================== */

.hero-title{
    font-size:clamp(3rem,3vw,5.5rem);
    line-height:1.05;
    font-weight:700;

    color:#092a68;

    margin:0;
    padding:0;

    max-width:700px;
}

.hero-title font{
    color:#1d76ec !important;
}

/* =====================================
   HERO DESCRIPTION
===================================== */

.hero-description{
    margin-top:28px;

    font-size:14px;
    line-height:1.8;

    color:#60738e;

    max-width:620px;
}

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

@media (max-width:992px){

    .hero-copy-col{
        padding:60px 30px;
    }

    .hero-title{
        font-size:clamp(2.5rem,7vw,4rem);
    }
}

@media (max-width:768px){

    .hero-copy-col{
        text-align:center;
        padding:50px 24px;
    }

    .hero{
        max-width:100%;
    }

    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-title{
        font-size:clamp(2rem,9vw,3rem);
        line-height:1.15;
    }
}