body {
    padding: 0%;
    background-image: url(../images/About\ us\ -\ Desktop\ -\ 1920.png );
    background-repeat: no-repeat;
}

.nav-container {
    width: 100%;
    height: 100vh;
    background-image: url(../images/about-main-banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.nav-container .navbar {
    padding-top: 6rem;
}

.nav-container .navbar .container .collapse {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 2rem;
}

.nav-container .navbar .container .collapse .navbar-nav {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item a {
    font-size: 1.7rem;
    color: #fff;
    font-family: 'regular';
    padding: 0%;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item .unactive{
    color: #44766c;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item.navbar-brand-logo {
    width: 18rem;
    height: 23rem;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item.navbar-brand-logo img {
    width: 100%;
    height: 100%;
}

.nav-container .navbar .container .nav-item img {
    width: 5rem;
}

.rooms-section {
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 9rem;
}

.rooms-section .row {
    width: 100%;
    height: 100%;
    background-image: url(../images/hills-bg-tab.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.rooms-section .container {
    width: 79rem;
    height: 100%;
    display: block;
    padding: 6.5rem 9rem;
    margin: 0%;
}

.rooms-section .row .container h2 {
    color: #506E52;
    text-align: left;
    font-size: 3rem;
    margin-top: 2rem;
    font-family: 'regular';
}

.rooms-section .rooms-image {
    display: none;
}

.image-container {
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    padding: 2rem 9rem;
}

.image-container .img1 {
    width: 25rem;
    height: 20rem;
}

.image-container .img2 {
    display: block;
    width: 58rem;
    height: 44.5rem;
}

.image-container .img3 {
    width: 28rem;
    height: 20rem;
}

.image-container .images img {
    width: 100%;
    height: 100%;
}

.image-container .media-img {
    display: none;
}

.info-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11rem;
}

.info-section .img {
    width: 53rem;
    height: 53rem;
}

.info-section .img img {
    width: 100%;
    height: 100%;
}

.info-section .details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 69.3rem;
}

.info-section .heading h2 {
    color: #76463C;
    font-size: 4.5rem;
    font-family: "regular";
}

.info-section .details p {
    font-size: 2rem;
    font-family: 'regular';
    color: #506E52;
}

.bedinfo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

.bedinfo-section .details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 68.9rem;
    font-family: 'regular';
}

.bedinfo-section .media-img {
    display: none;
}

.bedinfo-section .img {
    width: 66rem;
    height: 66rem;
}

.bedinfo-section .img img {
    width: 100%;
    height: 100%;
}

.bedinfo-section .heading h2 {
    color: #76463C;
    font-size: 4.5rem;
    font-family: "regular";
}

.bedinfo-section .details p {
    font-size: 2rem;
    font-family: 'regular';
    color: #506E52;
}

.outsideinfo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13rem;
}

.outsideinfo-section .img {
    width: 53rem;
    height: 53rem;
}

.outsideinfo-section .img img {
    width: 100%;
    height: 100%;
}

.outsideinfo-section .details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 69.3rem;
    font-family: 'regular';
}

.outsideinfo-section .heading h2 {
    color: #76463C;
    font-size: 4.5rem;
    font-family: "regular";
}

.outsideinfo-section .details p {
    font-size: 2rem;
    font-family: 'regular';
    color: #506E52;
}

.stayinfo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}

.stayinfo-section .media-img {
    display: none;
}

.stayinfo-section .img {
    width: 45rem;
    height: 39.4rem;
}

.stayinfo-section .img img {
    width: 100%;
    height: 100%;
}

.stayinfo-section .details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 68.9rem;
    font-family: 'regular';
}

.stayinfo-section .heading h2 {
    color: #76463C;
    font-size: 4.5rem;
    font-family: "regular";
}

.stayinfo-section .details p {
    font-size: 2rem;
    font-family: 'regular';
    color: #506E52;
}

.Experience-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7rem;
    background-color: #F8F9E6;
}

.Experience-section .img {
    width: 21.5rem;
    height: 40rem;
}

.Experience-section .img img {
    width: 100%;
    height: 100%;
}

.Experience-section .details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 96rem;
    font-family: 'regular';
}

.Experience-section .heading h2 {
    color: #76463C;
    font-size: 4.5rem;
    font-family: "regular";
}

.Experience-section .details p {
    font-size: 2rem;
    font-family: 'regular';
    color: #506E52;
}

#quoteSectionCarousel .carousel-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

#quoteSectionCarousel.slide .carousel-inner .carousel-item {
    width: 100%;
    height: 45.6rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

#quoteSectionCarousel .item1 {
    background-image: url(../images/OB-loc-photo-1.jpg);
}

#quoteSectionCarousel .item2 {
    background-image: url(../images/OB-loc-photo-2.jpg);
}

#quoteSectionCarousel .item3 {
    background-image: url(../images/OB-loc-photo-3.jpg);
}

#quoteSectionCarousel .item4 {
    background-image: url(../images/OB-loc-photo-4.jpg);
}

#quoteSectionCarousel .item5 {
    background-image: url(../images/OB-loc-photo-5.jpg);
}

#quoteSectionCarousel .item6 {
    background-image: url(../images/OB-loc-photo-6.jpg);
}

#quoteSectionCarousel .item7 {
    background-image: url(../images/OB-loc-photo-7.jpg);
}

#quoteSectionCarousel .item8 {
    background-image: url(../images/OB-loc-photo-8.jpg);
}

#quoteSectionCarousel .carousel-item .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#quoteSectionCarousel .carousel-item .container .row .lead {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'regular';
}

#quoteSectionCarousel .carousel-item .container .row .lead h2 {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'regular';
}

#quoteSectionCarousel .carousel-item .container .row .lead blockquote {
    font-size: 2.6rem;
    color: #fff;
    font-family: 'regular';
}

#quoteSectionCarousel .carousel-item .container .row .lead p {
    font-size: 1.5rem;
    letter-spacing: .2rem;
    color: #fff;
    font-family: 'regular';
}

.carousel-item {
    transition: transform .3s ease-in-out;
}

.carousel-inner {
    scroll-behavior: smooth;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.carousel-item {
    min-width: 100%;
    scroll-snap-align: start;
}

/*Tab device*/
@media (max-width : 1024px) {

    body {
        background-image: url(../images/About\ us\ -\ Tablet\ -\ 1024.png );
        background-repeat: no-repeat;
    }

    .rooms-section,
    .image-container,
    .info-section,
    .bedinfo-section,
    .outsideinfo-section,
    .stayinfo-section,
    .Experience-section {
        overflow: hidden;
    }


    .rooms-section {
        height: auto;
        padding: 0;
    }

    .rooms-section .row {
        background-image: none;
        background-color: #939a93;
        width: 62rem;
        height: auto;
        margin: 2rem 0;
        border-radius: 1rem;
        margin-left: 19rem;
    }

    .rooms-section .container {
        margin-right: -7.5rem;
        width: 100%;
        padding: 4rem;
    }

    .rooms-section .rooms-image {
        display: block;
        width: 58.5rem;
        height: 49rem;
    }

    .rooms-section .rooms-image img {
        width: 100%;
        height: 100%;
    }

    .image-container {
        height: auto;
        align-items: center;
        justify-content: space-between;
        gap: 7rem;
        flex-wrap: wrap;
    }

    .image-container .img2 {
        display: none;
    }

    .image-container .img1 {
        width: 20rem;
        height: 16rem;
    }

    .image-container .img3 {
        width: 24rem;
        height: 18rem;
    }

    .image-container .media-img {
        display: block;
        width: 40rem;
        height: 30rem;
        margin-left: 10rem;
    }

    .info-section {
        width: 100%;
        height: auto;
        gap: 5rem;
        padding: 0%;
        margin: 0%;
    }

    .info-section .img {
        width: 53rem;
        height: 50rem;
        margin-left: -12rem;
    }

    .info-section .details {
        width: 43.2rem;
        height: 50.8rem;
    }

    .info-section .heading {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .bedinfo-section {
        width: 100%;
        height: auto;
        padding: 0%;
        margin: 0;
    }

    .bedinfo-section .details {
        width: 49rem;
        height: 44.1rem;
    }

    .bedinfo-section .heading {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .bedinfo-section .img {
        width: 53rem;
        height: 53rem;
        margin-right: -12rem;
    }

    .outsideinfo-section {
        gap: 7rem;
    }

    .outsideinfo-section .img {
        width: 54rem;
        height: 43rem;
        margin-left: -10rem;
    }

    .outsideinfo-section .details {
        width: 43.2rem;
    }

    .outsideinfo-section .heading {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .outsideinfo-section .heading h2 {
        font-size: 3.6rem;
    }

    .stayinfo-section {
        gap: 5rem;
    }

    .stayinfo-section .details {
        width: 40rem;
    }

    .Experience-section .details {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
        width: 50.2rem;
    }

    #quoteSectionCarousel .carousel-item .container .row .lead {
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

}

@media (max-width : 992px) {

    #quoteSectionCarousel .carousel-item .container .row .lead h2 {
        color: #fff;
        font-size: 3rem;
        font-weight: 600;
        text-transform: uppercase;
    }
}

@media (max-width : 768px) {
    .rooms-section {
        height: auto;
        padding: 0;
        align-items: center;
    }

    .rooms-section .container {
        height: 100%;
        display: block;
        margin: 1rem;
        padding-top: 1rem;
        padding-left: 1rem;
    }

    .rooms-section .rooms-image {
        display: block;
        width: 43.4rem;
        height: 36rem;
    }

    .image-container {
        height: auto;
    }

    .image-container .media-img {
        width: 39.6rem;
        height: 30.3rem;
    }

    .info-section {
        flex-wrap: wrap;
    }

    .bedinfo-section,
    .stayinfo-section {
        flex-wrap: wrap;
    }

    .bedinfo-section .img,
    .stayinfo-section .img {
        display: none;
    }

    .bedinfo-section .media-img,
    .stayinfo-section .media-img {
        display: block;
        width: 44.8rem;
        height: 44.8rem;
    }

    .outsideinfo-section {
        flex-wrap: wrap;
    }

    .stayinfo-section .media-img {
        padding: 3rem;
    }

    .stayinfo-section .heading {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .Experience-section {
        flex-wrap: wrap;
    }
}


@media (max-width : 480px) {
    body {
        background-image: url(../images/About\ us\ -\ Mobile\ -\ 480.png );
        background-repeat: no-repeat;
    }

    .nav-container {
        height: 700px;
    }

    .rooms-section {
        height: auto;
        padding: 0;
    }

    .rooms-section .row {
        background-image: none;
        background-color: #939a93;
        width: 36rem;
        height: auto;
        margin: 2rem 0;
        border-radius: 1rem;
    }

    .rooms-section .row .container {
        padding: 2rem;
    }

    .rooms-section .row .container h2 {
        font-size: 2.7rem;
        letter-spacing: .1rem;
    }

    .rooms-section .rooms-image {
        margin-left: -7rem;
    }

    .image-container {
        justify-content: center;
    }

    .image-container .media-img {
        display: block;
        margin-left: 0rem;
        margin: 0%;
        padding: 0%;
    }

    .image-container .media-img img {
        width: 376px;
        height: 283px;
    }

    .image-container .img1 {
        width: 192px;
        height: 153px;
    }

    .image-container .img3 {
        width: 215px;
        height: 153px;
    }

    .info-section {
        gap: 1rem;
    }

    .info-section .img {
        width: 448px;
        height: 400px;
        margin-left: 0rem;
    }

    .info-section .details {
        padding: 0%;
    }

    .info-section .details h2 {
        font-size: 3.5rem;
    }

    .bedinfo-section .img {
        width: 448px;
        height: 400px;
        margin-right: 0rem;
    }

    .bedinfo-section .details h2 {
        font-size: 3.3rem;
    }

    .info-section .details,
    .Experience-section .details,
    .outsideinfo-section .details,
    .bedinfo-section .details,
    .stayinfo-section .details,
    .Experience-section .details {
        width: 39rem;
        height: auto;
        padding: 1rem 2rem;

    }

    .outsideinfo-section .img {
        width: 448px;
        height: 400px;
        margin-left: 0rem;
    }

    .stayinfo-section .img {
        width: 450px;
        height: 373px;
    }

    .Experience-section .details .heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .Experience-section .details .heading h2 {
        font-size: 4rem;
    }

    .carousel-indicators [data-bs-target] {
        box-sizing: content-box;
        flex: 0 1 auto;
        width: 11px;
        height: 11px;
    }

    /* .Experience-section .details {
        width: 38rem;
    } */
}