@import url("https://fonts.cdnfonts.com/css/satoshi");
@import url('https://fonts.cdnfonts.com/css/tt-ramillas-trl');

.banner-area{
    position:relative;
    width:100%;
    height:945px;
    overflow:hidden;
    margin:0;
    padding:0;
    background:#111;
}

.banner-slider,
.banner-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.banner-slide{
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0;
    transform:scale(1.04);
    transition:opacity 0.9s ease, transform 3s ease;
}

.banner-slide.active{
    opacity:1;
    transform:scale(1);
    z-index:1;
}

.banner-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0.68) 100%);
}

.banner-content{
    position:absolute;
    top:70%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:4;
    width:100%;
    max-width:1100px;
    padding:0 25px;
    text-align:center;
}

.banner-title{
    color:#fff;
    font-size:55px;
    line-height:1.12;
    margin:0 0 18px;
    text-transform:uppercase;
    text-shadow:0 8px 28px rgba(0,0,0,0.65);
	font-family: "TT Ramillas Trl", serif;
}

.banner-subtitle{
    color:#fff;
    font-size:22px;
    line-height:1.6;
    margin:0 0 32px;
    text-shadow:0 5px 18px rgba(0,0,0,0.6);
}

.banner-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#b99a5b;
    color:#fff;
    text-decoration:none;
    padding:15px 38px;
    border-radius:40px;
    font-size:15px;
    font-weight:600;
    transition:0.3s ease;
}

.banner-btn:hover{
    background:#fff;
    color:#111;
}

.banner-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    width:54px;
    height:54px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.45);
    background:rgba(0,0,0,0.35);
    color:#fff;
    font-size:28px;
    cursor:pointer;
    transition:0.3s ease;
}

.banner-arrow:hover{
    background:#b99a5b;
    border-color:#b99a5b;
}

.banner-arrow.prev{
    left:35px;
}

.banner-arrow.next{
    right:35px;
}

/* Booking Box */
.banner-booking-box{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%, 50%);
    z-index:6;
    width:74%;
    background:#fff;
    border-radius:8px;
    padding:20px 24px;
    box-shadow:0 18px 45px rgba(0,0,0,0.25);
    display:grid;
    grid-template-columns:1fr 1fr 1fr 180px;
    gap:18px;
    align-items:center;
}

.booking-item{
    border-right:1px solid #ddd;
    padding-right:18px;
}

.booking-item span{
    display:block;
    font-size:13px;
    color:#666;
    margin-bottom:6px;
}

.booking-item strong{
    display:block;
    font-size:22px;
    color:#1f2937;
}

.booking-btn{
    background:#b99a5b;
    color:#fff;
    text-align:center;
    padding:18px 20px;
    border-radius:7px;
    text-decoration:none;
    font-weight:600;
}

@media(max-width:991px){
    .banner-area{
        height:560px;
    }

    .banner-title{
        font-size:42px;
    }

    .banner-booking-box{
        width:92%;
        grid-template-columns:1fr 1fr;
        transform:translate(-50%, 60%);
    }

    .booking-item{
        border-right:0;
        border-bottom:1px solid #eee;
        padding-bottom:12px;
    }
}

@media(max-width:576px){
    .banner-area{
        height:520px;
    }

    .banner-title{
        font-size:30px;
    }

    .banner-subtitle{
        font-size:15px;
    }

    .banner-arrow{
        width:42px;
        height:42px;
        font-size:22px;
    }

    .banner-arrow.prev{
        left:12px;
    }

    .banner-arrow.next{
        right:12px;
    }

    .banner-booking-box{
        display:none;
    }
}