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

.hero-section{

	min-height:85vh;

	background-size:cover;

	background-position:center;

	background-repeat:no-repeat;

	position:relative;

	display:flex;

	align-items:center;
}

/* =========================================
   HERO OVERLAY
========================================= */

.hero-overlay{

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(0,33,71,.88) 0%,
        rgba(0,33,71,.72) 38%,
        rgba(0,33,71,.25) 70%,
        rgba(0,33,71,.08) 100%
    );

    padding:120px 0;

}

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

.hero-content{

    max-width:700px;

    color:#ffffff;

}

.hero-tag{

    display:inline-block;

    background:rgba(255,255,255,.12);

    padding:10px 20px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:58px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:25px;

}

.hero-highlight{

    color:#ffb400;

    display:block;

}

.hero-content p{

    font-size:18px;

    line-height:1.8;

    max-width:650px;

    margin-bottom:35px;

    color:#e5e5e5;

}

/* =========================================
   HERO BUTTONS
========================================= */

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-btn-primary{

    background:#ffb400;

    color:#002147;

    padding:15px 35px;

    font-weight:700;

    border-radius:8px;

    transition:.3s;

}

.hero-btn-primary:hover{

    transform:translateY(-3px);

}

.hero-btn-secondary{

    background:transparent;

    border:2px solid #ffffff;

    color:#ffffff;

    padding:15px 35px;

    font-weight:700;

    border-radius:8px;

    transition:.3s;

}

.hero-btn-secondary:hover{

    background:#ffffff;

    color:#002147;

}