@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}


html {
  font-size: 14px;
}


.row {margin-left: 0;margin-right:0;}


.reverse {
    flex-direction: column-reverse;
}


body {
    background: #343a40;
    color: #fff;
    margin-top: 10%;
}


.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.flourish {
    font-family: 'Dancing Script';
    letter-spacing: .17em;
}

h1.flourish {
    font-size: 3.6em;
}

h2.flourish {
    font-size: 2em;
}

.forMobile {
    display:flex;
    flex-direction:column;
}

.forDesktop {
    display: none;
}

.welcome {
    height: 1200px;
}

.welcomeContainer {
    height: 550px;
    margin-bottom:5%;
}

.center {
    margin: auto;
    text-align:center;
}

    .titleWrapper {
        position:relative;
        top: 30%;

    }

.welcome_home .titleWrapper {
    top: 20%;
}

.innerTitleWrapper {
    position: relative;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.hometile {
    width: 80%;
    background: rgba(51, 84, 105, 0.52);
    margin: 3% auto 3% auto;
    text-align: center;
}

.navBtn {
    cursor:pointer;
}

    .navBtn:hover {
        background: rgb(51, 84, 105);
    }

.welcome_home {
    background: no-repeat center url(../images/welcomeView.webp);
    background-size: cover;
}

.tint {
    background-color: rgba(2, 2, 2, 0.2);
   
}

.flex {
    display:flex;
}

    .flex > div {
        padding: 2%;
        flex-grow: 1;
        flex-basis: 16%;
    }

.tile {
    height: 350px;
    border: 4px solid #000;
    line-height: 1.6em;
    font-size: 1.5em;
}

.tile p {
    margin: 2% auto;
}

#mainHouse {
    background-color: #c5c36e;
}

#guestHouse {
    background-color: #30434a;
}

#terrace {
    background-color: #5081aa;
}

.welcome_jungle {
    background: no-repeat center url(../images/welcomeToTheJungle.jpg);
    background-size: cover;
}

.welcome_mainHouse {
    background: no-repeat center url("../images/welcome_mainHouse.jpg");
    background-size: cover;
}

.main_house_p1 {
    background: no-repeat center url("../images/mainHouse/kitchenDiningRoom.jpg");
    background-size: cover;
}

.main_house_p2 {
    background: no-repeat center url("../images/mainHouse/veranda.jpg");
    background-size: cover;
}

.main_house_p3 {
    background: no-repeat center url("../images/mainhouse/kitchenCeiling.jpg");
    background-size: cover;
}

.main_house_p4 {
    background: no-repeat center url("../images/mainhouse/kitchenOven.jpg");
    background-size: cover;
}

.main_house_p5 {
    background: no-repeat center url("../images/mainhouse/guest_Bedroom.jpg");
    background-size: cover;
}

.main_house_p6 {
    background: no-repeat center url("../images/mainhouse/guestBathroom.jpg");
    background-size:cover;
}

.main_house_p7 {
    background: no-repeat center url("../images/mainhouse/master_Bedroom.jpg");
    background-size: cover;
}

.main_house_p8 {
    background: no-repeat center url("../images/mainhouse/masterBathroom.jpg");
    background-size: cover;
}


.welcome_guestHouse {
    background: no-repeat center url("../images/welcome_guestHouse.webp");
    background-size: cover;
}

.guest_house_p1 {
    background: no-repeat center url("../images/guestHouse/WelcomeToTheGuestCasita.webp");
    background-size: cover;
}

.guest_house_p2 {
    background: no-repeat center url("../images/guestHouse/CheeryLivingRoom.webp");
    background-size: cover;
}

.guest_house_p3 {
    background: no-repeat center url("../images/guestHouse/LivingRoom.webp");
    background-size: cover;
}

.guest_house_p4 {
    background: no-repeat center url("../images/guestHouse/SunlitKitchen.webp");
    background-size: cover;
}

.guest_house_p5 {
    background: no-repeat center url("../images/guestHouse/AReallyGoodMorning.webp");
    background-size: cover;
}

.guest_house_p6 {
    background: no-repeat center url("../images/guestHouse/SecondBedroom.webp");
}

.welcome_terrace {
    background: no-repeat center url("../images/welcome_terrace.jpg");
    background-size: cover;
}

.terrace_p1 {
    background: no-repeat center url("../images/courtyard/poolMountains.jpg");
    background-size: cover;
}

.terrace_p2 {
    background: no-repeat center url("../images/courtyard/poolFromAbove.jpg");
    background-size: cover;
}

.terrace_p3 {
    background: no-repeat center url("../images/courtyard/eatWithAView.jpg");
    background-size: cover;
}

.terrace_p4 {
    background: no-repeat center url("../images/courtyard/tropicalSunset.jpg");
    background-size: cover;
}

.welcome_nearby {
    background: no-repeat center url("../images/welcome_nearby.jpg");
    background-size: cover;
}

#region div{
    margin-bottom: 2%;
}

#region a {
    color: #fff;
    font-weight:bold;
    text-decoration:underline;
}

@media (min-width:576px) and (max-width: 767px){
    html {
        font-size: 16px;
    }



    .container {
        max-width:initial;
    }

    h1.flourish {
        font-size: 3em;
    }

    h2.flourish {
        font-size: 2.5em;
    }

    .forDesktop {
        display: none;
    }

    .reverse {
        flex-direction: row;
    }

    .tileWrapper {
        margin: .5% 0;
    }

    .tile {
        height: 400px;
        line-height: 1.7em;
        font-size: 1.2em;
    }
}

@media (min-width: 768px) and (max-width:991px) {
    html {
        font-size: 16px;
    }

    body {
        margin-top: 0;
    }

    h1.flourish {
        font-size: 4.3em;
    }

    h2.flourish {
        font-size: 2.5em;
    }

    .forDesktop {
        display: flex;
    }

    .forMobile {
        display: none;
    }

    .reverse {
        flex-direction: row-reverse;
    }


    .tileWrapper {
        margin:.5% 0;
    }

    .tile {
        height: 425px;
        line-height: 1.6em;
        font-size: 1.5em;
    }

    .row>div:nth-child(3){
        order: 4;
    }

    .row > div:nth-child(4) {
        order: 3;
    }
}

@media (min-width: 992px){
    html {
        font-size: 16px;
    }

    body {
        margin-top: 0;
    }

    h1.flourish {
        font-size: 6em;
    }

    h2.flourish {
        font-size: 3.5em;
    }

    .forDesktop {
        display: flex;
    }

    .forMobile {
        display: none;
    }

    .reverse {
        flex-direction: row;
    }

    .tileWrapper {
        margin: .5% 0;
    }

    .tile {
        height: 400px;
        line-height: 1.6em;
        font-size: 1.1em;
    }

    .hometile {
        width: 30%;
    }
}