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

.hero{

    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    background:
        url("../images/hero.jpg");

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


}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        120deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.45),
        rgba(0,0,0,.20)
    );

    z-index:1;

}

.hero-wrapper{

    position:relative;
    z-index:2;

    width:100%;

    display:grid;
    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:center;

}


/* ==========================================
   LEFT SIDE
========================================== */

.hero-subtitle{

    display:block;

    margin-top:25px;

    margin-bottom:20px;

    letter-spacing:4px;

    color:#D4AF37;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

}

.hero-left h1{

    color:#ffffff;

    font-size:78px;

    font-weight:800;

    line-height:1.05;

}

.hero-left h1 span{

    color:var(--gold);

}

.hero-left p{

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

    font-size:18px;

    line-height:1.9;

    max-width:620px;

    margin-bottom:40px;

}


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

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:55px;

}

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 36px;

    border-radius:50px;

    background:var(--gold);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 36px;

    border-radius:50px;

    border:2px solid #fff;

    color:#fff;

    transition:.35s;

}

.btn-secondary:hover{

    background:#fff;

    color:#111;

}


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

.hero-stats{

    display:flex;

    gap:50px;

}

.stat h3{

    color:#D4AF37;

    font-size:42px;

    font-weight:700;

    margin-bottom:8px;

    text-shadow:0 3px 12px rgba(0,0,0,.35);

}

.stat span{

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    text-shadow:0 2px 10px rgba(0,0,0,.35);

}


/* ==========================================
   BOOKING CARD
========================================== */

.booking-card{

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

    backdrop-filter:blur(15px);

    border-radius:30px;

    padding:40px;

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

}

.booking-card h2{

    text-align:center;

    margin-bottom:30px;

    color:var(--dark);

}

.field{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}

.field label{

    margin-bottom:8px;

    color:var(--dark);

    font-weight:600;

}

.field input,
.field select{

    height:58px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid #ddd;

    outline:none;

    transition:.3s;

}

.field input:focus,
.field select:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(201,166,107,.20);

}

.search-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:var(--gold);

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.search-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(201,166,107,.35);

}


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

@media(max-width:992px){

    .hero{

        padding:140px 0 80px;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-left{

        max-width:650px;

    }

    .hero-left p{

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

    display:flex;

    gap:70px;

    margin-top:15px;

    }

}

@media(max-width:768px){

    .hero-left h1{

        font-size:52px;

    }

}

@media(max-width:576px){

    .hero{

        padding:120px 0 60px;

    }

    .hero-left h1{

        font-size:40px;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,
    .btn-secondary{

    padding:18px 40px;

    font-size:17px;

    }

    .hero-stats{

        flex-direction:column;

        gap:25px;

        text-align:center;

    }

}