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

.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:180px 0 120px;
    background:#FCFAF7;
}

/*=====================================
BACKGROUND IMAGE
=====================================*/

.hero-bg{
    position:absolute;
    top:0;
    right:0;
    width:62%;
    height:100%;
    background:url("../images/hero/hero-bg.jpg") no-repeat center right;
    background-size:cover;
    z-index:1;
}

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

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(252,250,247,.98) 0%,
        rgba(252,250,247,.95) 28%,
        rgba(252,250,247,.75) 48%,
        rgba(252,250,247,.25) 72%,
        rgba(252,250,247,0) 100%
    );
}

/*=====================================
DECORATIVE BLOBS
=====================================*/

.hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    z-index:3;
}

.hero-blob-1{

    width:320px;
    height:320px;

    top:-100px;
    left:-120px;

    background:rgba(201,169,106,.18);

}

.hero-blob-2{

    width:220px;
    height:220px;

    bottom:-60px;
    left:40%;

    background:rgba(201,169,106,.10);

}

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

.hero-content{

    position:relative;
    z-index:5;
    max-width:620px;

}

.hero-subtitle{

    display:inline-flex;
    align-items:center;
    gap:12px;

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.hero-subtitle::before{

    content:"";

    width:55px;

    height:2px;

    background:var(--gold);

}

.hero-title{

    font-size:76px;

    line-height:1.05;

    margin-bottom:20px;

}

.hero-title span{

    display:block;

    font-size:34px;

    font-weight:500;

    margin-top:10px;

}

.hero-divider{

    width:80px;

    height:2px;

    background:var(--gold);

    margin:30px 0;

}

.hero-description{

    font-size:18px;

    line-height:1.9;

    max-width:540px;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.btn-book{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:60px;

    background:var(--gold);

    color:#fff;

    font-weight:600;

    border:1px solid var(--gold);

    transition:.35s;

}

.btn-book:hover{

    background:var(--gold-dark);

    color:#fff;

    transform:translateY(-3px);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:60px;

    border:1px solid var(--gold);

    color:var(--gold);

    transition:.35s;

    font-weight:600;

}

.btn-outline:hover{

    background:var(--gold);

    color:#fff;

}

/*=====================================
TRUST CARDS
=====================================*/

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

/*=====================================
TRUST ITEMS
=====================================*/

.hero-trust{

    display:flex;

    align-items:center;

    gap:40px;

    flex-wrap:nowrap;

}

.trust-item{
display: flex;
    align-items: center;
    gap: 12px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--heading);

}

.trust-item i{

    color:var(--gold);

    font-size:22px;

}

@media(max-width:991px){

.hero-trust{

    justify-content:center;

    gap:20px;

}

}

@media(max-width:767px){

.hero-trust{

    flex-direction:column;

    align-items:flex-start;

}

}

/*=====================================
SCROLL INDICATOR
=====================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:5;

    text-align:center;

    animation:bounce 2s infinite;

}

.hero-scroll span{

    display:block;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;

    color:var(--heading);

}

.hero-scroll i{

    color:var(--gold);

    font-size:20px;

}

@keyframes bounce{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

}

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

@media(max-width:1200px){

.hero-title{

    font-size:62px;

}

}

@media(max-width:991px){

.hero-section{

    padding:150px 0 80px;

}

.hero-bg{

    width:100%;

    opacity:.18;

}

.hero-content{

    text-align:center;

    margin:auto;

}

.hero-divider{

    margin:25px auto;

}

.hero-description{

    margin:0 auto 40px;

}

.hero-buttons{

    justify-content:center;

}

.hero-trust{

    justify-content:center;

}

}

@media(max-width:767px){

.hero-title{

    font-size:44px;

}

.hero-title span{

    font-size:24px;

}

.hero-description{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

.trust-card{

    width:100%;

}

.hero-scroll{

    display:none;

}

}

@media(max-width:576px){

.hero-title{

    font-size:36px;

}

.hero-section{

    padding-top:130px;

}

}