@import "/public/node_modules/sweetalert2/dist/sweetalert2.min.css";
@import "/public/node_modules/swiper/swiper-bundle.min.css";
@import "/public/css/global.css";

@import "/public/components/whatsapp-chat-button/WhatsAppChatButton.css";
@import "/public/components/contact-form/ContactForm.css";
@import "/public/components/booking-form/BookingForm.css";
@import "/public/components/site-footer/SiteFooter.css";
@import "/public/components/site-header/SiteHeader.css";
@import "/public/components/main-swiper/MainSwiper.css";
@import "/public/components/apartments/Apartments.css";
@import "/public/components/banner-nav/BannerNav.css";
@import "/public/components/mobile-nav/MobileNav.css";

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/******************************/

#site-header {
    /*component*/
}

/** SiteHeader component **/

/******************************/

#site-main > section > .section-center {
    padding: 4rem 1.5rem;
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

/******************************/

#banner {
}

/** BannerNav component **/

/** MainSwiper component **/

/******************************/

#booking {
}

/** BookingForm component **/

/******************************/

#about-us {
    background-color: white;
}

#about-us h2 {
    color: #14475e;
    font-size: 2.7rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

#about-us img {
    width: 100%;
    aspect-ratio: 2/1.8;
    object-fit: cover;
}

#about-us .text-box {
    padding: 3rem 3rem 0 6rem;
    color: #14475e;
}

@media (max-width: 1170px) {
    #about-us .text-box {
        padding: 0;
    }
}

/******************************/

#summary {
    background-color: #14475e;
    color: white;
}

#summary img {
    width: 100%;
    max-width: 180px;
}

#summary .title {
    font-size: 1.5rem;
    text-align: center;
}

#summary .text {
    text-align: center;
}

/******************************/

#services {
    background-color: #dfeaf0;
}

#services h2 {
    color: #14475e;
    font-size: 3rem;
    margin-bottom: 3rem;
}

#services img {
    width: 100%;
    max-width: 75px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

#services .border-right-custom {
    border-right: 5px solid #14475e;
}

/******************************/

#apartments {
    background-color: white;
}

#apartments h2 {
    color: #14475e;
    font-size: 3rem;
    margin-bottom: 2rem;
}

#apartments .text-box {
    color: #14475e;
    padding: 0 3rem 0 6rem;
}

#apartments .note {
    font-weight: 500;
}

/** Apartments component **/

@media (max-width: 1200px) {
    #apartments .text-box {
        padding: 0;
    }
}

/******************************/

#places {
    background-color: #e7e7e7;
}

#places h2 {
    color: #14475e;
    font-size: 3rem;
    margin-bottom: 2rem;
}

#places img {
    width: 100%;
    aspect-ratio: 3/2.5;
    object-fit: cover;
}

#places .text-box {
    color: #14475e;
    padding-left: 2rem;
}

@media (max-width: 767px) {
    #places .text-box {
        padding: 0;
    }
}

/******************************/

#find-us {
    background-color: #14475e;
}

#find-us h2 {
    color: white;
    font-size: 3rem;
    margin-bottom: 3rem;
}

#find-us .google-map iframe {
    width: 100%;
    min-height: 400px;
}

/******************************/

#contact {
    background-color: white;
}

#contact h2 {
    color: #14475e;
    font-size: 3rem;
    margin-bottom: 2rem;
}

#contact img {
    width: 100%;
    max-width: 350px;
    height: 100%;
    object-fit: cover;
}

/** ContactForm component **/

@media (max-width: 1200px) {
    #contact img {
        max-width: unset;
        height: 200px;
    }
}

/******************************/

#site-footer {
    /*component*/
}

/** SiteFooter component **/

@media (max-width: 960px) {
    #site-main h2 {
        font-size: 2.0rem !important;
    }
}