@import url("base.css");
/* *{
    border: 1px solid red;
}  */
html{
    scroll-behavior: smooth;
}




body{
    min-height: 100vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(168, 215, 66, 0.5), rgba(146, 45, 45, 0.4)); */
}

button a{
    text-decoration: none;
    color: black;
}


.section-1 span,
.section-1 h4,
.section-1 h2
{
    color:var(--primary-color);
}
.section-1 .moto{
    font-size: 13px;
}






/* the about us section design */

.section-2{
    margin-top: 80px;

}

.section-3 .offers,
.section-2 button{
    color: black;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.10);

}
.section-2 p{
    font-size: 13px;
}
.section-2 h2 span{
    color: gold;
}
.section-2 .text-width{
    max-width: 600px;
    margin: 0 auto;
}
.section-2 img{
    width: 100%;
    border-radius: 30px;
    object-fit: contain;
}
.section-2 img:hover{
    transition: all ease-in-out 0.6s;
    transform: scale(1.05);
}
@media screen and (max-width:500px) {
    .section-2 img{
        border-radius: 4px;
    }
    .section-2 img:hover{
        
        transform: scale(1.3);
    }
}
/* special offers design */
.section-3{
    margin-top: 50px;
    
}
.section-3 .offers{
    width: 150px;
}
.section-3 .offer-description{
    font-size: 13px;
}
.section-3 .special-offers{
    background-color: black;
    color: var(--primary-color);
    width: fit-content;
    padding: 10px 20px 10px 20px;
    border: none;
}

.section-3 img{
    width: 100%;
    object-fit: contain;
    border-radius: 30px;
    
}
.section-3 img:hover{
    transition: 0.6s;
    transform: scale(1.05);
}

.section-4{
    
    margin-top: 40px;
}


/* section 4 display's particular room */

.section-4 .display{
    
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5)), url(../images/room-img-6.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 30px;
    height: 500px;
    margin-left: 0px;
}
.section-4 .display .location{
    border: 1px solid var(--primary-color);
    width: 65%;
    padding: 5px 20px;
    border-radius: 20px;
    color: var(--primary-color);
    justify-content: center;
}
.move-item{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-content: center;
}
.section-4 .display h2{
    color: var(--primary-color);
}
.section-4 .display span{
    color: var(--primary-color);
    font-size: 13px;
}
.section-4 .display-room{
    height: 150px;
    border-radius: 5px;
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url(../images/header-bg-img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
@media screen and (min-width: 800px){
    .section-4 .display-room{
    height: 500px;
    border-radius: 30px;
}
}

.section-4 .room-1{
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url(../images/room-img-2.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    
}
.section-4 .room-2{
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url(../images/room-img-3.jpg);
}

.section-4 .display-room:hover{
    transition: 0.5s;
}
.section-4 .rating{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9)), url(../images/room-img-2.jpg);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
}
.section-4 .rating span{color: gold;}
.section-4 button{
    width: 100px;
    margin: 5px;
    border: 1px solid var(--primary-color);;
    font-size: 13px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    padding: 5px;
    
}



/* section 5 shows questions and thier answers */
.section-5{
    margin-top: 100px;
    
}


.section-5 h2{
    font-size: 40px;
    max-width: 300px;
    margin-bottom: 40px;
}
.section-5 span{
    cursor: pointer;
    font-weight: bold;

}
.section-5 .description{
    font-size: 12px;
    max-width: 400px;

}
.section-5 .display{
    height: 400px;
}
.section-5 .display{
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5)), url(../images/room-img-7.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 10px;
    height: 500px;
    margin-left: 0px;
}

.section-6{
    margin-top: 10px;
}




/* section 6 */

.section-6 button{
    background-color: transparent;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid white;
    font-size: 13px;
}

.section-6 h2{
    font-size: 30px;
}
.section-6 span{
    font-size: 13px;
}
.section-6 .display{

    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5)), url(../images/playground\ \(2\).jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 10px;
    height: 400px;
    margin-left: 0px;

}
.section-6 .display button a{
    color: white;
}


.move-col{
    margin-left: -3%;
}

/* Section 1 */
.tagline {
    font-size: 1rem;
    color: #f8f9fa;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Amenities */
.amenities i {
    margin-right: 5px;
}

/* Special Offers */
.highlight {
    color: #ffd700;
    font-weight: 500;
}

/* Room Badges */
.badge {
    margin: 0 5px;
    font-size: 0.9rem;
}

.gold-icon {
    color: #ffd700;
    margin: 0 5px;
}

/* Events */
.event-types {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.event-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.event-item:hover {
    transform: translateY(-5px);
}

.event-item i {
    color: #1f1d1d;
    margin-bottom: 0.5rem;
}

.bg-primary {
    background-color: transparent !important;
    border: 3px solid rgb(85, 85, 184);
    border-radius: 50px;
    margin-bottom: 10px;
}


.bg-success {
    background-color: transparent !important;
    border: 3px solid rgba(25, 135, 84, 1);
    border-radius: 50px;
    margin-bottom: 10px;
}

.bg-warning{
    background-color: transparent !important;
    border: 3px solid rgb(236, 35, 35);
    border-radius: 50px;
    margin-bottom: 10px;
}

/* .w-100{
    color: wheat;
    font-size: 30px;   
} */

.text-end1{
    text-align: right;
}

@media screen and (min-width: 430px){
    .text-end1{
        display: block;
        text-align: center;
    }
}