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

.hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:900px;
    padding:120px 20px 80px;

    background:
    linear-gradient(rgba(8,27,51,.72),rgba(8,27,51,.72)),
    url('../images/hero-bg.jpg');

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

.hero-container{

    width:100%;
    max-width:1250px;
    margin:auto;
    text-align:center;

}

.hero-tag{

    display:inline-block;

    background:#D4AF37;

    color:#fff;

    padding:12px 28px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.hero h1{

    margin:0;

    color:#fff;

    font-size:72px;

    font-weight:800;

    line-height:1.15;

}

.hero p{

    margin:28px 0 55px;

    color:#ECECEC;

    font-size:24px;

}

/* ==========================================
   SEARCH
========================================== */

.hero-search{

    width:100%;

    max-width:1150px;

    margin:auto;

    padding:22px;

    background:#fff;

    border-radius:24px;

    display:grid;

    grid-template-columns:2fr 2fr 2fr 1.2fr;

    gap:18px;

    box-shadow:0 25px 60px rgba(0,0,0,.22);

}

.hero-search select{

    height:62px;

    width:100%;

    border:2px solid #ECECEC;

    border-radius:14px;

    padding:0 18px;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.hero-search select:focus{

    border-color:#D4AF37;

}

.hero-search button{

    height:62px;

    border:none;

    border-radius:14px;

    background:#D4AF37;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.hero-search button:hover{

    background:#C79D1F;

}
/* ======================================================
   HERO STATS
====================================================== */

.hero-stats{

    width:100%;

    max-width:1150px;

    margin:55px auto 0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

.stat-card{

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:22px;

    padding:35px 20px;

    text-align:center;

    transition:.35s ease;

}

.stat-card:hover{

    transform:translateY(-8px);

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

    box-shadow:0 18px 40px rgba(0,0,0,.25);

}

.stat-card h2{

    margin:0 0 10px;

    color:#D4AF37;

    font-size:46px;

    font-weight:800;

}

.stat-card span{

    display:block;

    color:#ffffff;

    font-size:17px;

    font-weight:500;

}

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

@media (max-width:991px){

.hero{

    min-height:auto;

    padding:90px 20px;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:18px;

}

.hero-search{

    grid-template-columns:1fr;

}

.hero-stats{

    grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:576px){

.hero{

    padding:70px 15px;

}

.hero-tag{

    font-size:12px;

    padding:8px 18px;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

.hero-search{

    padding:18px;

}

.hero-stats{

    grid-template-columns:1fr;

}

}