/*==================================================
 HERO SECTION
==================================================*/

.hero-section{

    position:relative;

    min-height:760px;

    display:flex;

    align-items:center;

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

    overflow:hidden;

}

/* dark overlay */

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(9,20,43,.72) 0%,
        rgba(9,20,43,.58) 28%,
        rgba(9,20,43,.18) 65%,
        rgba(9,20,43,.05) 100%
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:720px;

    padding:10px 0;

}

/*==================================================
LABEL
==================================================*/

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D7E7FF;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

/*==================================================
HEADING
==================================================*/

.hero-content h1{

    color:#fff;

    font-size:68px;

    line-height:1.05;

    font-weight:700;

    margin:0 0 30px;

}

.hero-content p{

    color:rgba(255,255,255,.82);

    font-size:20px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:30px;

}

/*==================================================
BUTTON
==================================================*/

.hero-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:14px;

    text-decoration:none;

    background:#2563EB;

    color:#fff;

    font-size:16px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 18px 45px rgba(37,99,235,.35);

}

.hero-btn:hover{

    background:#1D4ED8;

    transform:translateY(-4px);

}

.hero-arrow{

    font-size:22px;

    transition:.3s;

}

.hero-btn:hover .hero-arrow{

    transform:translateX(6px);

}

/*==================================================
STATS
==================================================*/

.hero-stats{

    display:flex;

    gap:70px;

    margin-top:30px;

}

.hero-stat h3{

    color:#fff;

    font-size:42px;

    margin-bottom:10px;

}

.hero-stat span{

    color:rgba(255,255,255,.72);

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:1.4px;

}