@font-face {
    font-family: Gilroy;
    src: url(res/fonts/Gilroy-Regular.ttf) format(truetype);
}

@font-face {
    font-family: Gilroy-Bold;
    src: url(res/fonts/Gilroy-Bold.ttf) format(truetype);
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    div.land-box {
        height: 100%;
    }

    div.gallery-style-1 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "gs1-gallery-text"
            "gs1-land-image-1"
            "gs1-por-image-1"
            "gs1-por-image-2"
            "gs1-land-image-2"
            "gs1-land-image-3";
        padding-bottom: 20%;
    }

    div.gallery-style-2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "gs2-gallery-text"
            "gs2-por-image-1"
            "gs2-land-image-1"
            "gs2-land-image-2"
            "gs2-land-image-3";
        padding-bottom: 20%;
    }

    div.gallery-style-3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "gs3-gallery-text"
            "gs3-land-image-1"
            "gs3-land-image-2"
            "gs3-land-image-3"
            "gs3-por-image-3";
        padding-bottom: 20%;
    }


    #hero-p-hide {
        display: none;
    }

    div#hero-container {
        padding-top: 40%;
    }

    nav {
        display: none;
    }

    div#contact-us-form {
        padding-bottom: 10%;
        padding-top: 10%;
        padding-left: 10%;
        padding-right: 10%;
    }

}


html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    scroll-behavior: smooth;

}

nav {
    padding-top: 1%;
}

li {
    padding-left: 5%;
    display: inline;
}

ul {
    text-align: right;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: Gilroy-Bold;
}

p,
a {
    font-family: Gilroy;
}


hr {
    border-color: #F8FAE9;
}

label {
    color: #1E1E1E;
}

input[type=text],
input[type=email] {
    width: 100%;
    color: #1E1E1E;
}

textarea[type=text] {
    width: 100%;
    height: 100px;
    resize: none;
    color: #1E1E1E;
}

i {
    font-size: 16px;
    color: #1E1E1E;
}

#hero {
    background-image: url(res/img/hero.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
    height: 100%;
}

#hero-container {
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 55%;
}

#about-us {
    background-color: #F8F8F8;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 15%;
    padding-right: 15%;
}

#gallery {
    background-color: #1E1E1E;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 10%;
    padding-right: 10%;
}

.gallery-text {
    color: #F8FAE9;
}

#contact-us {
    background-color: #F8FAE9;
}

#contact-us-form {
    padding-bottom: 3%;
    padding-top: 3%;
    padding-left: 10%;
    padding-right: 10%;
}

#contact-us-image {
    object-fit: cover;
    height: 675px;
    width: 100%;
}

#footer {
    background-color: #1E1E1E;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
    padding-right: 5%;
}

.link-button {
    background-color: #1E1E1E;
    color: #F8FAE9;
    padding: 14px 25px;
    margin-bottom: 5%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.link-button:hover {
    text-decoration: underline;
}

.navigationlink,
.navigationlink:link,
.navigationlink:visited {
    color: #1E1E1E;
    background-color: transparent;
    text-decoration: none;
}

.navigationlink:hover {
    background-color: transparent;
    text-decoration: underline;
}

.gallery-image-cover {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.land-box {
    height: 300px;
}


.gallery-style-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
        "gs1-gallery-text gs1-land-image-1 gs1-por-image-1 gs1-por-image-2"
        "gs1-land-image-2 gs1-land-image-3 gs1-por-image-1 gs1-por-image-2";
    width: 100%;
    height: 100%;
    padding-bottom: 5%;
}

.gs1-gallery-text {
    grid-area: gs1-gallery-text;
}

.gs1-land-image-1 {
    grid-area: gs1-land-image-1;
}

.gs1-land-image-2 {
    grid-area: gs1-land-image-2;
}

.gs1-land-image-3 {
    grid-area: gs1-land-image-3;
}

.gs1-por-image-1 {
    grid-area: gs1-por-image-1;
}

.gs1-por-image-2 {
    grid-area: gs1-por-image-2;
}

.gallery-style-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
        "gs2-por-image-1 gs2-land-image-1 gs2-land-image-1 gs2-gallery-text"
        "gs2-por-image-1 gs2-land-image-2 gs2-land-image-3 gs2-land-image-3";
    width: 100%;
    height: 100%;
    padding-bottom: 5%;
}

.gs2-por-image-1 {
    grid-area: gs2-por-image-1;
}

.gs2-land-image-1 {
    grid-area: gs2-land-image-1;
}

.gs2-land-image-2 {
    grid-area: gs2-land-image-2;
}

.gs2-land-image-3 {
    grid-area: gs2-land-image-3;
}

.gs2-gallery-text {
    grid-area: gs2-gallery-text;
}

.gallery-style-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
        "gs3-gallery-text gs3-land-image-2 gs3-land-image-2 gs3-por-image-3"
        "gs3-land-image-1 gs3-land-image-3 gs3-land-image-3 gs3-por-image-3";
    width: 100%;
    height: 100%;
    padding-bottom: 5%;
}


.gs3-land-image-1 {
    grid-area: gs3-land-image-1;
}

.gs3-por-image-3 {
    grid-area: gs3-por-image-3;
}

.gs3-gallery-text {
    grid-area: gs3-gallery-text;
}

.gs3-land-image-2 {
    grid-area: gs3-land-image-2;
}

.gs3-land-image-3 {
    grid-area: gs3-land-image-3;
}

#myBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: red;
    /* Set a background color */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    font-size: 18px;
    /* Increase font size */
}

#myBtn:hover {
    background-color: #555;
    /* Add a dark-grey background on hover */
}