@import url('https://fonts.googleapis.com/css?family=Lato|Pacifico|Righteous|Roboto+Condensed|Ubuntu&display=swap');
@import url('https://db.onlinewebfonts.com/c/602123ef5a08a5aa292cbd46236307d2?family=RollerscriptW01-Smooth');
body {
    padding: 0%;
    margin: 0%;
    font-family: 'lato';
}

.image-100 {
    width: 100%;
}

.navbar-brand {
    font-family: 'RollerscriptW01-Smooth';
    font-size: 35px;
    color: lightcoral !important;
}

.nav-link {
    font-size: 16px;
    margin: 15px;
    color: black !important;
    font-family: 'Roboto Condensed';
}

.nav-link:hover {
    color: #00E8E8 !important;
}

.active .nav-link {
    color: #00E8E8;
}

.menu-right-btn {
    padding: 13px 46px;
    margin-right: 4%;
    background-color: transparent;
    transition: all 300ms ease-in;
}

.menu-right-btn:hover {
    color: white;
    background-color: #00E8E8;
}

.site-content {
    background-image: url(https://images.unsplash.com/photo-1548244207-da38cb222a19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI5MzI0fQ&auto=format&fit=crop&w=2000&q=100);
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    min-height: calc(100vh - 86px);
}

.rooms .site-content {
    background-image: url(https://images.unsplash.com/photo-1558572701-64ad14264a75?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=100);
    min-height: calc(50vh - 86px);
}

.site-title, .site-desc {
    color: white;
    font-family: 'Righteous';
}

.site-title {
    font-family: 'RollerscriptW01-Smooth';
    margin-top: 30%;
    margin-bottom: 6%;
    font-size: 50px;
}

.site-desc {
    font-size: 14px;
    padding-left: 15%;
}

.site-btn1 {
    margin-left: 20%;
    background-color: black;
    color: white;
}

.site-btn2 {
    background-color: white;
}

.site-btn1, .site-btn2 {
    margin-top: 5%;
    margin-bottom: 40%;
}

/* Section-1 */

.section-1 .heading-1 {
    margin-top: 8%;
}

.section-1 .heading-2 {
    margin-bottom: 5%;
    font-size: 39px;
}

.section-1 .para-1 {
    widows: 60%;
    margin-left: 20%;
    margin-bottom: 5%;
}

.section-1 .card-text, .para-1 {
    color: rgba(0, 0, 0, 0.59);
}

.section-1 {
    margin-bottom: 8%;
}

/* Section 2 */

.section-2 .container-fluid {
    background-image: url(images/pexels-photo-352096.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

.section-2 .heading-1 {
    margin-top: 20%;
    margin-bottom: 4%;
    font-family: 'Righteous';
    /* width: 80%; */
    color: whitesmoke;
}

.section-2 .para {
    width: 80%;
    font-family: 'ubuntu';
    color: whitesmoke;
    margin-bottom: 7%;
}

.section-2 .btn {
    margin-bottom: 15%;
    width: 30%;
    padding: 2%, 5%;
}

/* Section 3 */

.section-3 {
    margin-top: 6%;
}

.section-3 i {
    color: #00E8E8;
}

.section-3 p {
    color: rgba(0, 0, 0, 0.59);
}

/* Section 4 */

.section-4 {
    margin-top: 8%;
}

.section-4 .row .col-md-7, .col-md-5 {
    margin-top: 10%;
    margin-bottom: 10%;
}

.section-4 a {
    color: lightseagreen;
    font-size: 40px;
    text-decoration: none;
}

.section-4 .para-1 {
    color: white;
    font-family: 'Roboto Condensed';
    margin-top: 7%;
    font-size: 23px;
}

/* footer */

.social {
    margin-top: 30px;
}

.social i {
    color: #EF5651;
    font-size: 20px;
}

.social a {
    margin-right: 20px;
}

@media screen and (max-width: 768px) {
    .section-1 .card {
        margin-top: 2rem;
    }
    .section-4 .col-md-7 img {
        width: 350px;
    }
}

@media screen and (max-width: 320px) {
    .site-content .site-title {
        font-size: 30px;
        padding: 15%;
    }
    .site-content .site-btn2 {
        display: none;
    }
    .site-content .site-btn1 {
        margin-left: 15%;
    }
    .section-1 .heading-1 .section-1 .heading-2 {
        font-size: 25px;
    }
    .section-1 .col-md-4 {
        padding: 5%;
        margin-left: 8%;
    }
    .section-1 .card {
        width: 15rem;
    }
    .section-4 .col-md-5 {
        padding: 0% 15%;
    }
    footer input [ type="button"] {
        margin-top: 5%;
    }
}

/*
    Contact Page
*/

.contact .site-content {
    min-height: calc(50vh - 86px);
}