:root {
    --navbarColor: rgb(190, 195, 196);
    --mainColor: rgb(127, 132, 134);

    --mainTextColor: white;
    --secondTextColor: rgb(0, 0, 0);
}

html, body {
    min-height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    background-color: white;
}

#container {
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

/*---NAVBAR---*/

#navbar {
    width: auto;

    display: flex;

    align-items: flex-end;

    justify-content: flex-start;

    background-color: var(--navbarColor);
}

#navbarImgContainer {
    width: 5%;
    max-width: 100px;

    margin-right: 2.5%;
    margin-left: auto;

    aspect-ratio: 1 / 1;

    display: flex;

    align-self: center;

    transform: translateY(-0.5rem);

    /*vertical-align: middle; */
}

.navbarimg {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.btn {
    width: 100px;
    min-width: 10%;
    height: 2.5vw;

    display: inline-flex;

    text-align: center;
    justify-content: center;

    align-items: center;

    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1vw;

    color: white;
}

.btn:hover {
    background-color: white;

    color:black;

    transition: ease-in 0.3s;
}

.line {
    display: inline-flex;

    width: 10%;
    height: 30%;

    text-align: center;
    justify-content: center;

    align-items: center;

    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 2vw;

    color: white;
}

/*---MAIN---*/

#main {
    width: 100%;

    background-color: var(--mainColor);
}

#main.offer {
    width: 100%;

    background-color: var(--mainColor);
}

#main.contact {
    width: 100%;

    padding-bottom: 5vw;

    background-color: var(--mainColor);
}

.imageContainer {
    padding-bottom: 5vw;
}

.imagem {
    max-width: 40vw;
    max-height: 55vh;

    margin-top: 1%;
    margin-left: 2%;

    display: inline-flex;

    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.135);

    border-radius: 5px;
}

.imagem2 {
    width: 25%;
    height: 55%;

    max-height: 100%;

    margin-left: 2%;

    display: inline-flex;
}

.telephoneinfo {
    display: flex;

    gap: 2%;
}

.telephoneicon {
    height: 2.3dvw;

    aspect-ratio: 1 / 1;

    display: inline-block;

    vertical-align: middle;
}

/*---TEXTS---*/

.maintxt1 {
    color: var(--mainTextColor);;

    padding-top: 3%;
    padding-bottom: 2%;

    margin-left: 2%;

    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: calc(1.8vw + 1.4vh);
}

.maintxt1b {
    color: var(--mainTextColor);

    padding-top: 3%;

    margin-left: 2%;

    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: calc(1.8vw + 1.4vh);
}

.maintxt2 {
    color: var(--mainTextColor);

    padding-bottom: 2%;

    margin-left: 2%;

    font-family: "Roboto", sans-serif;
    font-size: 2vw;
    font-weight: 300;

    backface-visibility: hidden;

    position: relative;
    z-index: 2;
}

.maintxt2b {
    color: var(--secondTextColor);

    font-family: "Roboto", sans-serif;
    font-size: 2vw;

    backface-visibility: hidden;
}

.maintxt3 {
    color: var(--mainTextColor);

    padding-bottom: 3%;

    margin-left: 2%;

    font-family: "Roboto", sans-serif;
    font-size: 1.5vw;
    font-weight: 350;

    margin-top: 8%;
}

.maintxt3b {
    color: var(--secondTextColor);

    margin-top: 3%;
    margin-bottom: 10%;
    margin-left: 1%;
    margin-right: 1%;

    font-family: "Roboto", sans-serif;
    font-size: 1.5vw;
    font-weight: 350;
}


.maintxt4 {
    color: var(--mainTextColor);

    padding-bottom: 1%;
    padding-top: 5%;
    
    margin-bottom: 2%;
    margin-left: 2.5%;

    font-family: "Roboto", sans-serif;
    font-size: 4vw;
    font-weight: 300;
}

.maintxt5 {
    color: var(--mainTextColor);

    padding-bottom: 2%;

    margin-left: 2.5%;

    font-family: "Roboto", sans-serif;
    font-size: 2vw;
}

/*---GALLERY---*/

#gallery {
    width: auto;

    display: flex;
    flex-direction: column;

    flex: 1;
}

#gallery.longer {
    width: auto;
}

.gallerytxt {
    color: var(--secondTextColor);

    font-family: "Roboto", sans-serif;
    font-size: clamp(24px, 2vw, 28px);
    font-weight: 500;

    margin:auto;

    margin-top: 5%;
}

.gallerytxt2 {
    color: var(--secondTextColor);

    font-family: "Roboto", sans-serif;
    font-size: 1.5vw;
    font-weight: 500;

    margin:auto;

    margin-top: 3%;
}

.gallerytxt3 {
    color: var(--secondTextColor);

    font-family: "Roboto", sans-serif;
    font-size: 1.5vw;
    font-weight: 500;

    margin:auto;

    margin-top: 1.5%;
}

.centeredGallery {
    width: 100%;

    display: flex;
    flex-direction: column;

    text-align: center;
    align-items: center;
}

/*---BOTTOMBAR---*/

#bottombar {
    width: auto;
    min-height: 10vh;

    background-color: rgb(190, 195, 196);
}

/*---ANIMATION---*/

.fade-in {
    opacity: 0;
    transform: translateY(20%);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

/*---OTHER---*/

a, a:active {
    text-decoration: none;
}

p {
  margin: 0;
}

/*---MEDIA---*/

@media(max-width: 769px) {
    #navbarImgContainer {
        width: 8vh;
    }

    .btn {
        height: 5vh;
        font-size: clamp(16px, 1vw, 18px);
    }

    #main {
        display: flex;
        flex-direction: column;

        text-align: center;
        align-items: center;
    }

    #main.offer {
        display: block;
    }

    #main.contact {
        padding-bottom: 80vw;
    }

    .maintxt1, .maintxt1b {
        font-size: clamp(36px, 3vw, 48px);

        padding-top: 6%;

        align-items: center;
        justify-content: center;

        margin: 0;
        margin-bottom: 4%;
    }

    .maintxt2, .maintxt2b {
        font-size: clamp(24px, 3vw, 28px);

        margin-bottom: 4%;
    }

    .maintxt3b {
        font-size: 2vw;
    }

    .maintxt4 {
        font-size: 5vw;
    }

    .maintxt5 {
        font-size: 3vw;
    }

    .imageContainer {
        margin-top: 8%;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 5%;

        padding-bottom: 10vh;
    }

    .imagem {
        margin: 0;
    }

    .telephoneinfo {
        white-space: nowrap;

        justify-content: center;

        gap: 8%;
    }

    .telephoneicon {
        height: 2rem;
    }

    .gallerytxt2 {
        font-size: 4vw;

        margin-top: 10%;
    }

    .gallerytxt3 {
        font-size: 3vw;

        margin-top: 4.5%;
    }
}