@font-face {
    font-family: 'BarlowLight';
    src: url('../fonts/Barlow-Light.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowRegular';
    src: url('../fonts/Barlow-Regular.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowCondensedLight';
    src: url('../fonts/BarlowCondensed-Light.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowCondensedRegular';
    src: url('../fonts/BarlowCondensed-Regular.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowSemiCondensedBold';
    src: url('../fonts/BarlowSemiCondensed-Bold.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowCondensedThin';
    src: url('../fonts/BarlowCondensed-Thin.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
}


.invisible {
    display: none;
}


.principal {
    width: 100vw;
    height: 100vh;
    background-image: url('../img/1920x1080.jpg');
    background-repeat: no-repeat;
    background-size: cover;

}

.main {
    width: 100vw;
    height: 100vh;
    background-color: #947A5F;
    min-height: 850px;
}

.content-main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    position: relative;
    gap: 40px;
}

.main-logo {
    width: 480px;
    height: 220px;
    margin-bottom: 60px;
}

.main-logo img {
    width: 100%;
    height: 100%;
}

.main-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
    margin-top: 100px;
}

.agende {
    color: #947A5F;
    background-color: #C9B197;
    padding: 10px 70px;
    border-radius: 10px;
    border: none;
    min-width: 465px;
    cursor: pointer;
    font-family: 'BarlowCondensedRegular', 'Times New Roman', Times, serif;
    font-size: 42px;
    font-weight: 500;
    text-align: center;
}

.agende-text {
    color: #fff;
    margin-top: 25px;
    margin-bottom: 70px;
    font-family: 'BarlowLight', 'Times New Roman', Times, serif;
    font-size: 22px;
    font-weight: 700;
}

.main-text a {
    text-decoration: none;
}

.agende-whatsapp,
.agende-insta {
    color: #fff;
    background-color: transparent;
    border: 2px solid #C9B197;
    padding: 15px 0px;
    border-radius: 10px;
    margin-bottom: 45px;
    max-width: 465px;
    min-width: 465px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 20px;
    font-size: 26px;
    letter-spacing: 0.1rem;
    font-family: 'BarlowRegular', 'Times New Roman', Times, serif;
    font-weight: 700;
    width: 100%;
}

.agende-whatsapp span {
    display: flex;
    justify-content: start;
    gap: 20px;
    width: 100%;
    margin-left: 45px;
    font-size: 32px;
}

/* image --------------- */

.main-img {
    width: 50%;
    height: 90%;
    align-self: flex-end;
    overflow: hidden;
}

.main-img img {
    width: 100%;
    height: 100%;
}

.whatsapp {
    width: 520px;
    height: 100px;
    position: fixed;
    top: 70%;
    left: 9%;
    cursor: pointer;
}


.insta {
    width: 520px;
    height: 100px;
    position: fixed;
    top: 83%;
    left: 9%;
    cursor: pointer;
}



@media screen and (max-width: 1600px) {

    .principal {
        background-image: url('../img/1500x700.jpg');

    }

}

@media screen and (max-width: 1600px) {

    .whatsapp {
        top: 62%;
        left: 14%;
    }

    .insta {
        top: 78%;
        left: 14%;
    }

}


@media screen and (max-width: 1370px) {

    .principal {
        background-image: url('../img/1370x770.jpg');
    }




    .content-main {
        justify-content: center;
        gap: 150px;
    }


}



@media screen and (max-width: 1370px) {

    .whatsapp {
        top: 55%;
        left: 14%;
    }

    .insta {
        top: 70%;
        left: 14%;
    }

}



@media screen and (max-width: 1150px) {

    .principal {
        background-image: url('../img/1280x1024.jpg');
        min-height: 800px;
    }

}

@media screen and (max-width: 1150px) {

    .whatsapp {
        top: 65%;
        left: 6%;
    }

    .insta {
        top: 78%;
        left: 6%;
    }

}

@media screen and (max-width: 1150px) {

    .main {
        min-height: 1400px;
    }

    .main-img {
        width: 90%;
        display: flex;
        justify-content: center;
    }

    .main-img img {
        width: 60%;
    }

    .main-text {
        width: 100%;
        margin-top: 40px;
    }

    .content-main {
        flex-direction: column;
        align-items: center;
        justify-content: start;
        overflow: scroll;
        gap: 0;
    }

}

@media screen and (max-width: 950px) {

    .whatsapp {
        top: 55%;
        left: 6%;
    }

    .insta {
        top: 68%;
        left: 6%;
    }

}

@media screen and (max-width: 840px) {

    .principal {
        background-image: url('../img/700x800.jpg');

    }

}

@media screen and (max-width: 840px) {

    .whatsapp {
        top: 63%;
        left: 6%;
    }

    .insta {
        top: 75%;
        left: 6%;
    }

    .main-img {
        min-height: 600px;
        height: 100%;
    }

    .main-img img {
        width: 100%;
        height: 100%;
    }

}

@media screen and (max-width: 620px) {

    .principal {
        background-image: url('../img/430x935.jpg');
        min-height: 1100px;
    }

    .img-leo-desktop {
        display: none;
    }

    .invisible {
        display: inline-block;
    }

    .main-img {
        width: 100%;
    }

}

@media screen and (max-width: 620px) {

    .whatsapp {
        top: 45%;
        left: 6%;
    }

    .insta {
        top: 55%;
        left: 6%;
    }

}

@media screen and (max-width: 550px) {

    .main {
        min-height: 0px;
        height: 100%;
    }

    .content-main {
        min-height: 1000px;
    }

    .main-img {
        min-height: 0px;
        height: auto;

    }

    .main-img img {
        width: 300px;
        height: 320px;
    }


    .agende,
    .agende-whatsapp,
    .agende-insta {
        min-width: 0;
        width: 400px;
        font-size: 21px;
        max-width: 100%;
    }

    .agende-whatsapp span {
        font-size: 26px;
    }

    .agende {
        font-size: 32px;
    }

    .main-logo {
        width: 400px;
    }

    .main-text {
        width: 97%;
        padding-left: 0;
    }

}

@media screen and (max-width: 490px) {

    .principal {
        background-position: 40% 40%;
    }

}

@media screen and (max-width: 412px) {

    .principal {
        background-image: url('../img/412x915.jpg');
        background-position: 40% 40%;
    }

}

@media screen and (max-width: 430px) {

    .agende,
    .agende-whatsapp,
    .agende-insta {
        min-width: 0;
        width: 320px;
        font-size: 18px;
        max-width: 100%;
    }

    .agende {
        font-size: 24px;
    }

    .agende-text {
        font-size: 18px;
    }

    .agende-insta {
        padding: 25px 50px;
    }

    .agende-whatsapp span {
        font-size: 22px;
        margin-left: 18px;
    }


    .main-logo {
        width: 320px;
    }



}

@media screen and (max-width: 400px) {

    .principal {
        background-image: url('../img/390x850.jpg');
        min-height: 850px;
    }






}