@font-face {
    font-family: poppinsMid;
    src: url(../assets/fonts/Poppins-Medium.ttf);
}

@font-face {
    font-family: urbanistMid;
    src: url(../assets/fonts/Urbanist-Medium.ttf);
}

@font-face {
    font-family: urbanistBold;
    src: url(../assets/fonts/Urbanist-Bold.ttf);
}

@font-face {
    font-family: urbanist;
    src: url(../assets/fonts/Urbanist-Regular.ttf);
}

@font-face {
    font-family: urbanistSemi;
    src: url(../assets/fonts/Urbanist-SemiBold.ttf);
}

@font-face {
    font-family: urbanistXBold;
    src: url(../assets/fonts/Urbanist-ExtraBold.ttf);
}

@font-face {
    font-family: poppins;
    src: url(../assets/fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: poppinsXBold;
    src: url(../assets/fonts/Poppins-ExtraBold.ttf)
}

*{
    margin: 0;
    padding: 0;
    appearance: none;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    transition: all 0.5s ease-out;
}

html{
    font-size: 16px;
}

body::-webkit-scrollbar {
    display: none;
}

a{
    text-decoration: none;
}

.container{
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vh;
    gap: 60px;
}

.hero{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
    width: 100%;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10vh;
    justify-content: space-between;
    animation: backgroundSlide 30s linear infinite; 
}

/* Keyframe animation to change the background image */
@keyframes backgroundSlide {
    0% {
        background: url(../assets/backgrounds/homebg1.png);
        opacity: 1;
    }
    25% {
        background: url(../assets/backgrounds/homebg5.png);
        opacity: 1;
    }
    50% {
        background: url(../assets/backgrounds/homebg2.png);
        opacity: 1;
    }
    75% {
        background: url(../assets/backgrounds/homebg3.png);
        opacity: 1;
    }
    100% {
        background: url(../assets/backgrounds/homebg4.png);
        opacity: 1;
    }
}

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95vw;
}

.logo a{
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.logo img{
    width: 4.4rem;
}

.logo .logo-name{
    font-family: poppinsMid;
    font-size: 1rem;
    color: #555555;
    text-transform: capitalize;
    width: 100%;
}

.logo .logo-name span{
    color: #FFAD1B;
}

.nav-links{
    display: flex;
    gap: 0.6rem;
}

.nav-links a{
    color: #555555;
    text-transform: capitalize;
    font-family: urbanistMid;
    letter-spacing: -5%;
}

.nav-links a:hover{
    color: #FFAD1B;
}

.nav-links .link-active{
    color: #FFAD1B;
}

/* .nav-links .link-active:hover{
    color: #555555;
} */

.nav-links .location-link{
    font-family: urbanistBold;
}

.contact-buttons{
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
}

.tab-menu-icon{
    display: none;
}

.contact-buttons .phone-contact a{
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.contact-buttons .phone-contact a img{
    width: 1.2rem;
}

.contact-buttons .phone-contact a .phone-number{
    font-family: urbanistMid;
    color: #555555;
    font-size: 1.1rem;
}

.contact-buttons .phone-contact a .phone-number:hover{
    color: #FFAD1B;
}

.contact-buttons button{
    background: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    width: 11rem;
    padding: 0.6rem;
    outline: none;
    border: none;
    cursor: pointer;
}

.contact-buttons button img{
    width: 1.2rem;
}

.contact-buttons button .button-text{
    color: #ffffff;
    font-family: urbanistMid;
    text-transform: capitalize;
    font-size: 1.1rem;
}

.mobile-menu{
    display: none;
}

.hero-text-section{
    width: 95vw;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 10px;
}

.hero-left{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.small-talk{
    display: flex;
    gap: 1rem;
    align-items: center;
}

.talk{
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.talk img{
    width: 20px;
}

.talk p{
    color: #ffffff;
    font-family: urbanist;
    font-size: 0.9rem;
    text-transform: capitalize;
}

.hero-text{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.big-text{
    color: #ffffff;
    font-size: 4.5rem;
    font-family: urbanistBold;
    text-transform: capitalize;
    width: 90%;
}

.small-text{
    color: #ffffff;
    font-family: urbanistMid;
    font-size: 1.2rem;
    width: 71%;
}

.hero-buttons{
    display: flex;
    gap: 10px;
    align-items: center;
}

.hero-buttons button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    width: 12rem;
    padding: 10px;
    outline: none;
    background: white;
    border: none;
}

.hero-buttons button:hover{
    cursor: pointer;
}

.hero-buttons button p{
    font-family: urbanistMid;
    text-transform: capitalize;
    font-size: 1.1rem;
    color: #363535;
}

.hero-buttons .secondary-button{
    background: none;
    border: 1px solid white;
    color: #ffffff;
    width: 12rem;

}

.hero-buttons .secondary-button p{
    color: #ffffff;
}

.hero-right{
    display: flex;
    align-items: center;
    gap: 5px;
}

.toggles{
    display: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    border: 1px solid white;
    background: #FFFFFF;
}

.hero-right .active{
    background: #FFAD1B;
    border: 1px solid #FFAD1B;
}

.section-type-one{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.section-icon{
    width: 1.9rem;
}

.section-type-one .upper-div{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: space-between;
}

.section-type-one .upper-div .section-heading{
    width: 50vw;
}

.section-heading p{
    color: #363535;
    font-family: urbanistBold;
    font-size: 3.5rem;
    width: 83%;
    letter-spacing: -5%;
    text-transform: capitalize;
}

/*.gradient-heading{
    background: #E4911B;
    background: linear-gradient(90deg,rgba(228, 145, 27, 1) 0%, rgba(126, 80, 15, 1) 100%);
    -webkit-background-clip: text;
    display: inline-block;
    color: transparent;
}

*/

.section-type-one .upper-div .section-text{
    width: 42vw;
}

.section-type-one .upper-div .section-text p{
    color: #4f4f4f;
    font-family: urbanist;
    font-size: 1.0rem;
    letter-spacing: -2%;
}

.section-type-one .lower-div{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.section-type-one .lower-div .image-pair{
    width: 31vw;
    display: flex;
    flex-direction: column;
    height: 24vw;
    justify-content: space-between;
} 

.section-type-one .lower-div .image-pair img{
    width: 31vw;
    height: 11vw;
}

.section-type-one .lower-div > img{
    width: 31vw;
    height: 24vw;
}

.section-type-two{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 40px;
}

.section-type-two .section-top{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.section-type-two .section-top .section-heading{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.section-type-two .section-top .section-heading p{
    text-align: center;
    text-transform: capitalize;
}

.section-type-two .section-top .section-text{
    width: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.section-type-two .section-top .section-text p{
    color: #4f4f4f;
    font-family: urbanist;
    font-size: 1.0rem;
    letter-spacing: -2%;
    text-align: center;
    width: 70%;
}

.section-type-two .section-content{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.section-type-two .section-content >div{
    width: 47vw;
}

.section-type-two .section-content .section-content-left{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-type-two .section-content .section-content-left .content-heading{
    font-family: urbanistBold;
    font-size: 2.2rem;
    color: #3F3F3F;
}

.section-type-two .section-content .section-content-left .content-text{
    color: #4f4f4f;
    font-family: urbanist;
    font-size: 1.2rem;
}

.section-type-two .section-content .section-content-right img{
 width: 100%;
}

.amenities-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 2.5rem;
    background: rgba(168, 114, 18, 0.1);
}

.amenities-section .section-top{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.amenities-section .section-top .section-heading{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.amenities-section .section-top .section-heading p{
    text-align: center;
}

.amenities-section .section-top .section-text{
    width: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.amenities-section .section-top .section-text p{
    color: #4f4f4f;
    font-family: urbanist;
    font-size: 1.0rem;
    letter-spacing: -2%;
    text-align: center;
    width: 70%;
}

.amenities-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.desktop-amenities{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.amenities-row{
    display: flex;
    gap: 1.1rem;
    align-items: center;
}

.amenity{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1.2px solid #ADADAD;
    padding: 1.1rem;
    border-radius: 10px;
    width: 14vw;
    text-align: center;
}

.amenity img{
    width: 2.4rem;
}

.amenity-text{
    font-family: urbanistBold;
    font-size: 1.2rem;
    color: #3F3F3F;
    text-transform: capitalize;
}

.amenity-sub-text{
    color: #4f4f4f;
    font-family: urbanist;
}

.tab{
    display: none;
}

.mobile-amenities{
    display: none;
}

.gallery-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 2.5rem;
    background: #1E1E1E;
}

.white{
    background: #ffffff;
}

.white .gallery-heading{
    color: #474747;
}

.gallery-text-heading{
    color: #ffffff;
    font-family: urbanistBold;
    text-transform: capitalize;
    font-size: 2.3rem;
}

.white .gallery-text-heading{
    color: #3F3F3F;
    font-family: urbanistBold;
    text-transform: capitalize;
    font-size: 2.3rem;
}

.white .gallery-sub-text{
    color: #474747;
}

.gallery-top{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.gallery-top-left{
    width: 45vw;
}

.gallery-heading{
    color: white;
    font-family: urbanistBold;
    font-size: 3.5rem;
    letter-spacing: -5%;
    text-transform: capitalize;
}

.gallery-top-right{
    width: 35vw;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gallery-sub-text{
    font-family: urbanist;
    color: #ffffff;
    font-size: 1.2rem;
}

.gallery-top-right button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    width: 12rem;
    padding: 10px;
    outline: none;
    border: none;
    background: white;
    cursor: pointer;
}

.gallery-top-right button a{
    display: flex;
     display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gallery-top-right button p{
    font-family: urbanistMid;
    text-transform: capitalize;
    font-size: 1.1rem;
    color: #363535;
}
.hero-buttons button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    width: 10vw;
    padding: 10px;
    outline: none;
    border: none;
}

.hero-buttons button:hover{
    cursor: pointer;
}

.gallery-down{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery-down img{
    width: 20vw;
}

.location-section{
    width: 100%;
    padding: 2.5rem;
    background: #f0f0f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.location-section > div{
    width: 38vw;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.location-top{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.location-top .location-top-heading{
    font-family: urbanistMid;
    font-size: 3.0rem;
    color: #363535;
    text-transform: capitalize;
}

.location-top .box{
    padding: 2rem 1.5rem;
    background: url(../assets/backgrounds/p1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
}

.box .box-info{
    display: flex;
    gap: 1.5rem;
}

.box-left img{
    width: 1.5rem;
}

.box-right{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.box-heading{
    font-family: urbanistBold;
    color: #3f3f3f;
    text-transform: capitalize;
    font-size: 1.3rem;
}

.box-sub{
    font-family: urbanist;
    color: #4f4f4f;
    font-size: 1.1rem;
}

.location-right .location-top .box{
    background: url(../assets/backgrounds/p2.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.attractions-section{
    display: flex;
    flex-direction: column;
    gap: 1.0rem;
}

.attractions{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.attraction{
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    background: url(../assets/backgrounds/p3.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
}

.attraction-heading{
    font-family: urbanistBold;
    color: #363535;
    text-transform: capitalize;
    font-size: 1.6rem;
}

.attraction-left img{
    width: 2rem;
}

.attraction-right{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.attraction-name{
    font-family: urbanistBold;
    color: #3f3f3f;
    text-transform: capitalize;
    font-size: 1.1rem;
}

.attraction-info-section{
    display: flex;
    align-items: center;
    width: 30vw;
    justify-content: space-between;
}

.attraction-info{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.attraction-info img{
    width: 1.5rem;
}

.attraction-info-text{
    color: #474747;
    font-family: urbanist;
    text-transform: capitalize;
    font-size: 1.1rem;
}

.transport-ratings{
    padding: 2rem;
    background: #CFCFCF;
    width: 100%;
    box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.transport-heading{
    font-family: urbanistBold;
    text-transform: capitalize;
    font-size: 1.4rem;
    color: #3f3f3f;
}

.ratings-bottom{
    display: flex;
    width: 30vw;
    align-items: center;
    justify-content: space-between;
}

.score{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.score-index{
    font-family: urbanistXBold;
    color: #474747;
    text-transform: capitalize;
    font-size: 1.6rem;
}

.score-text{
    font-family: urbanist;
    text-transform: capitalize;
    font-size: 1.1rem;
    color: #474747;
}

.schedule-box{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem 1.5rem;
    background: url(../assets/backgrounds/p3.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 1px 9px 9px 0px rgba(0,0,0,0.19);
}

.schedule-top p{
    font-family: urbanistSemi;
    color: #363535;
    font-size: 1.8rem;
    text-transform: capitalize;
}

.schedule-bottom{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-text{
    color: #474747;
    font-family: urbanist;
    font-size: 1.1rem;
}

.schedule-bottom button{
    width: 100%;
    height: 3.5rem;
    outline: none;
    background: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.schedule-bottom button a{
    display: flex;
    align-items: center;
    gap: 0.4rem;
}


.schedule-bottom a p{
    color: #ffffff;
    font-family: urbanistMid;
    text-transform: capitalize;
    font-size: 1.1rem;
}

.location-map{
    width: 100%;
}

.location-map iframe{
    width: 100%;
}

.footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.footer-top{
    width: 100%;
}

.footer-top img{
    width: 100%;
}

.footer-bottom{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: #1e1e1e;
    padding: 2.5rem;
}

.motto{
    font-family: urbanistSemi;
    color: #ffffff;
    font-size: 2.2rem;
    text-transform: capitalize;
}

.footer-nav{
    display: flex;
    align-items: center;
    width: 40vw;
    justify-content: space-between;
}

.footer-nav a{
    text-transform: capitalize;
    color: #ffffff;
    font-family: urbanistMid;
    font-size: 1.2rem;
}

.socials{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.socials img{
    width: 1.4rem;
}

.copyright-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.copyright-section .logo-name{
    color: white;
}

.copyright-text{
    font-family: urbanistBold;
    color: #FFFFFF;
    font-size: 1.1rem;
    text-align: center;
}

.developer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.developer-text{
    font-family: poppins;
    color: #ffffff;
}

.developer-logo a{
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.developer-logo a img{
    width: 1.6rem;
}

.developer-name{
    font-family: poppinsXBold;
    color: #ffffff;
}


@media screen and (max-width: 1500px){
    html{
        font-size: 90%;
    }
}

@media screen and (max-width: 1370px){
    html{
        font-size: 85%;
    }
}

@media screen and (max-width: 1250px){
    html{
        font-size: 80%;
    }

    .hero-buttons button{
        width: 12rem;
    }
}

@media screen and (max-width: 1000px){

    .desktop-amenities{
        display: none;
    }

    .tab{
        display: flex;
    }
    .amenity{
        width: 20vw;
    }
    .footer-nav{
        width: 60vw;
    }

}

@media screen and (max-width: 850px){

    .nav-links{
        display: none;
    }
    .logo-name{
        width: 1.2rem;
    }

    .tab-menu-icon{
        display: flex;
        cursor: pointer;
    }

    .amenity{
        width: 25vw;
    }
    .amenities-section .section-top .section-text{
        width: 80%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .amenities-section{
        gap: 1.6rem;
    }

    .amenities-section .section-top .section-text p{
        width: 100%;
        font-size: 1.2rem;
    }
    .location-section{
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .location-section > div{
        width: 100%;
    }
    .attraction-name{
        font-size: 1.5rem;
    }
    .attraction-info-section{
        width: 65vw;
    }
    .attraction-info-text{
        font-size: 1.3rem;
    }
    .box-heading{
        font-size: 1.6rem;
    }

    .box-sub{
        font-size: 1.3rem;
    }

    .transport-ratings{
        align-items: center;
    }
    .ratings-bottom{
        flex-direction: column;
        gap: 1rem;
        width: 50vw;
    }
    .mobile-menu{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        position: relative;
        z-index: 5;
        background: #1E1E1E;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 150px 30px;
        color: var(--white-color);
        position: fixed;
        color: white;
        gap: 10vh;
        display: none;
    }
    .close-btn{
        width: 30px;
        position: absolute;
        top: 5%;
        right: 5%;
        cursor: pointer;
    }
    .mobile-logo{
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-direction: column;
    }

    .mobile-logo img{
        width: 4.4rem;
    }

    .mobile-logo .logo-name{
        font-family: poppinsMid;
        font-size: 1.3rem;
        color: #ffffff;
        text-transform: capitalize;
        width: 100%;
    }

    .mobile-logo .logo-name span{
        color: #FFAD1B;
    }
    .mobile-menu-items{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .mobile-menu-items a{
        color: #ffffff;
        text-transform: capitalize;
        font-family: urbanistSemi;
        letter-spacing: -5%;
        font-size: 1.6rem;
    }
    .mobile-menu-items .link-active{
        color: #FFAD1B;
    }

    .mobile-contact a button{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 50px;
        width: 12rem;
        padding: 10px;
        outline: none;
        background: white;
        border: none;
        cursor: pointer;
        display: none;
    }

    .mobile-contact a button p{
        font-family: urbanistSemi;
        text-transform: capitalize;
        font-size: 1.1rem;
        color: #363535;
    }
    .mobile-motto-text{
        font-family: urbanistSemi;
        color: #ffffff;
        font-size: 2.0rem;
        text-transform: capitalize;
    }


}

@media screen and (max-width: 758px){

    .container{
        gap: 40px;
    }
    .contact-buttons button{
        display: none;
    }
    .hero{
        padding-bottom: 5vh;
    }
    .hero-text-section{
        align-items: center;
    }
    .hero-left{
        align-items: center;
    }
    .hero-text{
        align-items: center;
    }
    .big-text{
        text-align: center;
    }
    .small-text{
        text-align: center;
    }
    .amenity{
        width: 25vw;
    }
    .section-type-one .upper-div .section-heading{
        width: 100%;
    }
    .section-type-one .upper-div{
        flex-direction: column;
        gap: 1.1rem;
        width: 100%;
    }
    .section-type-one .upper-div .section-text{
        width: 100%;
    }

    .section-type-one .upper-div .section-text p{
        font-size: 1.2rem;
    }
    .section-type-two .section-top{
        width: 100%;
    }
    .section-type-two .section-top .section-text{
        width: 100%;
    }
    .section-type-two .section-top .section-text p{
        width: 90%;
        font-size: 1.2rem;
    }
    .section-type-two .section-content{
        width: 100%;
        flex-direction: column;
        gap: 1.3rem;
    }

    .section-type-two .section-content >div{
        width: 100%;
    }
    .section-type-two .section-content .section-content-left{
        gap: 0.8rem;
    }
    .amenities-section .section-top .section-text{
        width: 80%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .amenities-section{
        gap: 1.6rem;
    }

    .amenities-section .section-top .section-text p{
        width: 100%;
        font-size: 1.2rem;
    }

    .gallery-top{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .gallery-top-left{
        width: 100%;
    }
    .gallery-top-right{
        width: 100%;
    }
    .gallery-down{
        flex-direction: column;
        gap: 0.6rem;
    }
    .gallery-down img{
        width: 100%;
    }
    .footer-nav{
        width: 90vw;
    }
}

@media screen and (max-width: 450px){
    .attraction{
        flex-direction: column;
    }
    .attraction-info{
        flex-direction: column;
    }
    .footer-nav{
        width: 55vw;
        flex-wrap: wrap;
        gap: 10px;
    }
    .mobile-contact a button{
        display: flex;
    }
    .tab{
        display: none;
    }
    .mobile-amenities{
        display: flex;
    }
    .amenity{
        width: 40vw;
    }
}


@media screen and (max-width: 420px){
    html{
        font-size: 64%;
    }
}

@media screen and (max-width: 345px){
    .contact-buttons{
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }
    .navbar{
        align-items: flex-start;
    }
}