@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html,
body {
    overflow-x: hidden;
}

body {
    line-height: 22px;
    background-color: #dde9f8;
    position: relative;
    margin-top: 105px;
}

@media (max-width: 410px) {
    body {
        margin-top: 80px;
    }
}

/* ------------------------------------Paddings, margins and text */


@media (max-width: 410px) {
    .size-small {
        font-size: 0.7em;
        line-height: 13px;
    }
}

@media (max-width: 410px) {
    nav i {
        font-size: 32px !important;
    }
}

@media (max-width: 410px) {
    nav .fas {
        position: relative;
        left: -15px !important;
        bottom: 5px !important;
    }
}

@media (max-width: 410px) {
    nav .book-now-style {
        font-size: 0.8rem;
    }
}

@media (max-width: 716px) {
    .hero-image .book-now-style {
        font-size: 0.8rem;
    }
}

.navbar-expand-md .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .3rem;
}

.nav-padding {
    padding-top: 15px;
    padding-bottom: 15px;
}

h1 {
    font-family: "Nanum Myeongjo", sans-serif;
}

nav i {
    font-size: 50px;
    color: white;
}

nav a {
    font-family: "Nanum Myeongjo", sans-serif;
    text-align: center;

}

.navbar-brand {
    margin-right: 0px;
}


hr {
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-dark .navbar-brand {
    color: rgb(214, 195, 127);
}

nav .fas {
    position: relative;
    left: -17px;
    bottom: 8px;
}

.nav-item-style {
    font-size: 22px;
    border-right: 2px solid rgb(214, 195, 127);
    top: 50%;
    bottom: 0;
}

@media (min-width:760px) and (max-width: 880px) {
    .nav-item-style {
        font-size: 16px;
    }
}

.contact-style-nav {
    font-size: 22px;
    top: 50%;
    bottom: 0;
}

@media (min-width:760px) and (max-width: 880px) {
    .contact-style-nav {
        font-size: 17px;
    }
}

.nav li {
    float: left;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
    color: rgb(214, 195, 127);

}

.callout-padding {
    padding-top: 45px;
    padding-bottom: 35px;
}

@media (max-width: 716px) {
    .callout-small {

        padding: 15px 5px 20px 5px;
        font-size: .8em;
    }
}

@media (max-width: 350px) {
    .callout-xsmall {

        margin-top: 30px;
        padding: 15px 5px 20px 5px;
        font-size: .8em;
    }
}

.h-style-1 {
    font-family: "Nanum Myeongjo", sans-serif;
    color: white;
    margin-bottom: 25px;
}

@media (max-width: 716px) {
    .h-style-1 {
        padding-top: 5px;
        padding-bottom: 1px;
        font-size: 250%;
        margin-top: 10px;
        margin-bottom: 5px;
    }
}

.h-style-2 {
    font-family: "Nanum Myeongjo", sans-serif;
    color: white;
    font-size: 24px;
}

.h-style-3 {
    font-family: "Nanum Myeongjo", sans-serif;
    color: rgb(214, 195, 127);
    font-size: 24px;
    padding-bottom: 10px;
}

.h-style-4 {
    font-family: "Nanum Myeongjo", sans-serif;
    color: rgb(6, 71, 161);
    font-size: 25px;
    padding-bottom: 10px;
}

.p-style-1 {
    color: silver;
    padding-bottom: 10px;
}

@media (max-width: 716px) {
    .p-style-1 {
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
}

.p-style-2 {
    margin-top: 30px;
}

@media (max-width: 716px) {
    .p-style-2 {
        padding-top: 8px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
}

.p-style-2 b {
    color: silver;
}

.p-style-2 i {
    color: rgb(214, 195, 127);
}

.body-style {
    font-family: "Crimson Text", sans-serif;
    color: rgb(212, 204, 174);
    font-size: large;
}

.body-style-1 {
    font-family: "Crimson Text", sans-serif;
    color: rgb(214, 195, 127);
    font-size: large;
}

.body-style-2 {
    font-family: "Crimson Text", sans-serif;
    color: rgb(0, 0, 0);
    font-size: large;
}

.list-text {
    font-family: "Crimson Text", sans-serif;
    color: white;
    font-size: large;
}

ul {
    list-style: none;
}

.scroll-offset {
    padding-top: 130px;
    margin-top: -130px;
}

.tagline {
    font-size: x-large;
    padding-bottom: 10px;
}

@media (max-width: 716px) {
    .tagline {
        margin-bottom: 0;
        font-size: 1.2em;}
}

.embed-margin {
    margin-bottom: 30px;
}

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

.embed-bg {
    background-color: black;
    padding-top: 40px;
    padding-bottom: 40px;
}

.modal-text h1 {
    font-family: "Nanum Myeongjo", sans-serif;
    color: rgb(214, 195, 127);
    font-size: 20px;
    padding-bottom: 10px;
}

@media (max-width:768px) {
    .modal-text h1 {
        font-size: 18px;
    }
}

.modal-size {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /* obtained from https://stackoverflow.com/questions/39627549/how-to-center-modal-to-the-center-of-screen */
    width: 400px;
}

@media (max-width:768px) {
    .modal-size {
        width: 300px;
    }
}

.modal-padding {
    margin: 30px;
}

@media (min-width:1200px) {
    .line-1-padding {
        padding-top: 45px;
        padding-bottom: 53px;
    }
}

@media (max-width: 1200px) and (min-width:992px) {
    .line-1-padding {
        padding-top: 18px;
        padding-bottom: 9px;
    }
}

@media (max-width: 992px) and (min-width:768px) {
    .line-1-padding {
        padding-top: 50px;
        padding-bottom: 49px;
    }
}

@media (max-width: 768px) and (min-width:576px) {
    .line-1-padding {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

@media (min-width:1200px) {
    .line-2-padding {
        padding-top: 50px;
        padding-bottom: 69px;
    }
}

@media (max-width: 1200px) and (min-width:992px) {
    .line-2-padding {
        padding-top: 21px;
        padding-bottom: 27px;
    }
}

@media (max-width: 992px) and (min-width:768px) {
    .line-2-padding {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

@media (max-width: 768px) and (min-width:576px) {
    .line-2-padding {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

@media (min-width:1200px) {
    .line-3-padding {
        padding-top: 44px;
        padding-bottom: 83px;
    }
}

@media (max-width: 1200px) and (min-width:992px) {
    .line-3-padding {
        padding-top: 30px;
        padding-bottom: 25px;
    }
}

@media (max-width: 992px) and (min-width:768px) {
    .line-3-padding {
        padding-top: 50px;
        padding-bottom: 76px;
    }
}

@media (max-width: 768px) and (min-width:576px) {
    .line-3-padding {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

@media (min-width:1200px) {
    .line-4-padding {
        padding-top: 40px;
        padding-bottom: 54px;
    }
}

@media (max-width: 1200px) and (min-width:992px) {
    .line-4-padding {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
        padding-bottom: 7px;
    }
}

@media (max-width: 992px) and (min-width:768px) {
    .line-4-padding {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

@media (max-width: 768px) and (min-width:576px) {
    .line-4-padding {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

@media (max-width: 768px) {
    .pd-mobile {
        padding-bottom: 30px;
    }
}

.divider {
    height: 30px;
}

/* ------------------------------------COLORS */

.nav-bg {
    background-color: rgb(22, 41, 63);
    border-bottom: 1px solid rgb(87, 79, 52)
}

.blue-fill-t {
    background-color: rgba(22, 41, 63, 0.9);
}

.green-fill {
    background-color: rgb(40, 77, 30);
}

.burgundy-fill {
    background-color: #470d1b;
}

.slate-fill {
    background-color: #1a1926;
}

.teal-fill {
    background-color: rgb(160, 167, 138);
    border: 2px solid #707070;
}

.new-fill {
    background-color: rgb(41, 38, 52);
    border: 2px solid #707070;
}

.no-fill {
    background-color: aliceblue;
}

.red-text {
    color: #d53a3a;
}

.green-text {
    color: green;
}

.sig-orange {
    color: rgb(214, 195, 127);
}

b {
    color: #BAA868;
}

.book-now-style {
    color: #eeeeee;
    background-image: linear-gradient(to right, #f98d1a, green);
    border-color: #ffc107;
    border-radius: 2rem;
    font-weight: 600;
    font-family: "Segoe UI";
}

.book-now-style1 {
    font-size: 2ch;
    color: #eeeeee;
    margin: 0 5% 30px 5%;
    background-image: linear-gradient(to right, #f98d1a, green);
    border-color: #ffc107;
    border-radius: 2rem;
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: rgb(255, 255, 255);
    border-color: rgb(63, 218, 63);
    background-image: linear-gradient(to right, #cc7315, rgb(2, 104, 2));
    font-weight: 600;
}

h2 i {
    color: #f98d1a;
}

/* ------------------------------------Bullet style code obtained from https://www.w3schools.com/howto/howto_css_bullet_color.asp */

.bullet-style:before {
    content: "\2022";
    color: red;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ------------------------------------Bullet style code ends */


/* ------------------------------------IMAGES */

.hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 90vh;
    width: 100%;
    background: url("../images/cottage-cover-800.jpg") no-repeat bottom center fixed;
    background-size: cover;

}

@media (max-width: 768px) {
    #hero-image {
        height: 90vh;
    }
}

.img-style {
    border: 2px solid rgb(22, 41, 63);
    border-radius: 2%;
}

.image-1 {
    border: 2px solid rgb(40, 77, 30);

}

.image-2 {
    display: none;
}

.image-3,
.image-3-2 {
    border: 2px solid #470d1b;
}

@media (max-width: 992px) and (min-width:768px) {
    .image-1 {
        display: none;
    }

    .image-2 {
        display: block;
        height: 415px;
        border: 2px solid rgb(40, 77, 30);
    }
}

@media (max-width: 992px) {
    .image-3 {
        display: none;
    }
}

@media (min-width: 768px) {
    .image-3-2 {
        display: none;
    }
}

.image-4 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-left: 30px;

}

@media (max-width:992px) {
    .image-4 {
        display: none;}
}

.image-4-2 {
    margin-top: 40px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;

}


@media (min-width:992px) {
    .image-4-2 {
        display: none;

    }
}

@media (min-width:1200px) {
    .image-4 {
        height: 303.75px;

    }
}

@media (min-width:992px)and (max-width: 1200px) {
    .image-4 {
        height: 253.125px;
    }
}

@media (min-width:992px)and (max-width: 1200px) {
    .image-4 {
        height: 253.125px;
    }
}

.image-7 {
    display: none;
}

@media (max-width: 992px) and (min-width:768px) {
    .image-5 {
        display: none;
    }

    .image-7 {
        display: block;
        height: 415px;
    }
}

@media (max-width: 992px) {
    .image-6 {
        display: none;
    }
}

@media (min-width: 768px) {
    .image-6-2 {
        display: none;
    }
}

.hiker-image {
    position: absolute;
    left: 67.1%;
    bottom: 34px;
    width: 14.5rem;
}

@media (max-width: 716px) {
    .hiker-image {
        position: absolute;
        left: 68.6%;
        bottom: 37px;
        width: 10rem;
    }
}

.trees-image {
    position: absolute;
    left: 2%;
    bottom: 32px;
    width: 15.5rem;
}

@media (max-width: 716px) {
    .trees-image {
        position: absolute;
        left: 3%;
        bottom: 37px;
        width: 9rem;
    }
}

@media (max-width: 576px) {

    .trees-image,
    .hiker-image {
        display: none;
    }
}

/* ------------------------------------FORM */

.form-style {
    margin: 5% 5% 10% 5%;
    background-color: rgba(22, 41, 63, 0.94);
    padding: 35px 25px 35px 25px;
    border-radius: .6rem;
}

@media (max-width:992px) {
    .form-style {
        width: 90%;
    }
}

@media (min-width:992px) {
    .form-style {
        margin: 5% 22.5% 10% 22.5%;
        width: 55%;
    }
}

.form-labels {
    font-family: "Crimson Text", sans-serif;
    color: rgb(214, 195, 127);
    font-size: x-large;
    padding: 15px 15px 15px 0px;
}

.form-promo-check {
    font-family: "Crimson Text", sans-serif;
    color: rgb(214, 195, 127);
    font-size: medium;
}

.message-input {
    vertical-align: text-top;
    text-align: left;
    height: 154px;

}

.contact-margin {
    margin-bottom: 30px;
}

.form-bg {
    background-image: url("../images/contact-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid rgb(22, 41, 63);
    border-radius: .4em;
    width: 100%;
    height: 800px;
}

@media (max-width:768px) {
    .form-bg {
        height: 100%;
    }
}

.form-pad {
    padding: 10px 0 0 0;
}

.form-heading {
    font-size: 20px;
}

/* ------------------------------------FOOTER */

footer {
    background-color: rgb(22, 41, 63);
    color: rgb(214, 195, 127);
}

.footer-heading {
    font-family: "Crimson Text", sans-serif;
    font-size: x-large;
    color: white;
    margin-bottom: 25px;
    padding-top: 10px;
}

.social-item {

    padding-top: 5px;
    padding-bottom: 10px;
}

.social-item li a i {
    padding-right: 15px;
    padding-left: 15px;
    color: rgb(214, 195, 127);
    font-size: x-large;
    text-align: center;
}

.social-item li a i:hover {
    padding-right: 15px;
    padding-left: 15px;
    color: #f98d1a;
    font-size: x-large;
    text-align: center;
}

#footer-style {
    width: 90%;
    padding-top: 30px;
    padding-bottom: 20px;
}

@media (max-width: 576px) {
    .align-small {
        text-align: center;
    }
}

footer p i {
    color: #f98d1a;
}

@media (min-width: 992px) {
    .footer-lg {
        text-align: right !important;
    }
}

@media (min-width: 992px) {
    .pd-lg {
        padding-right: 38px;
    }
}