/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: #ffffff;

    font-family: 'HomepageBook', Arial, sans-serif;

    padding-top: 95px;
}

/* =========================================================
   TOPO
========================================================= */

.topo {

    width: 100%;
    height: 95px;

    background: #f4ead6;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 5%;

    border-bottom: 1px solid rgba(0,38,63,0.08);
}

/* =========================================================
   LOGOTIPO
========================================================= */

.logo img {

    height: 40px;
    width: auto;

    display: block;
}

/* =========================================================
   MENU
========================================================= */

.menu {

    display: flex;
    align-items: center;

    gap: 42px;
}

.menu a {

    text-decoration: none;

    color: #00263f;

    font-family: 'HomepageBook', Arial, sans-serif;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: all 0.3s ease;
}

.menu a:hover {
    color: #c7a15e;
}

/* =========================================================
   SOCIAL
========================================================= */

.topo-social {

    display: flex;
    align-items: center;

    gap: 14px;
}

.topo-social a img {

    width: 22px;
    height: 22px;

    display: block;

    transition: all 0.3s ease;
}

.topo-social a img:hover {
    opacity: 0.7;
}

/* =========================================================
   WHATSAPP
========================================================= */

.btn-menu {

    display: flex;
    align-items: center;

    gap: 8px;

    text-decoration: none;
}

.btn-menu img {

    width: 22px;
    height: 22px;

    display: block;
}

.btn-menu span {

    color: #00263f;

    font-family: 'HomepageBold', Arial, sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all 0.3s ease;
}

.btn-menu:hover span {
    color: #c7a15e;
}

/* =========================================================
   RESPONSIVO TABLET
========================================================= */

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

    .menu {
        gap: 26px;
    }

    .menu a {
        font-size: 12px;
    }

}

/* =========================================================
   RESPONSIVO 980
========================================================= */

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

    body {
        padding-top: 150px;
    }

    .topo {

        height: auto;

        flex-direction: column;

        padding: 18px 25px;
    }

    .logo {

        margin-bottom: 16px;
    }

    .logo img {

        height: 48px;
    }

    .menu {

        flex-wrap: wrap;

        justify-content: center;

        gap: 14px 18px;

        margin-bottom: 16px;
    }

    .menu a {

        font-size: 11px;

        letter-spacing: 1px;
    }

}

/* =========================================================
   RESPONSIVO CELULAR
========================================================= */

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

    body {
        padding-top: 170px;
    }

    .topo {

        height: auto;

        flex-direction: column;

        justify-content: center;

        padding: 14px 18px;
    }

    .logo {

        margin-bottom: 14px;
    }

    .logo img {

        height: 42px;
    }

    .menu {

        width: 100%;

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px 16px;

        margin-bottom: 14px;
    }

    .menu a {

        font-size: 10px;

        letter-spacing: 1px;
    }

    .topo-social {

        justify-content: center;

        gap: 12px;
    }

    .topo-social a img {

        width: 20px;
        height: 20px;
    }

    .btn-menu span {

        font-size: 11px;
    }

}

/* =========================================================
   RESPONSIVO PEQUENO
========================================================= */

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

    body {
        padding-top: 185px;
    }

    .logo img {

        height: 36px;
    }

    .menu {

        gap: 10px 14px;
    }

    .menu a {

        font-size: 9px;

        letter-spacing: 0.8px;
    }

    .btn-menu span {

        font-size: 10px;
    }

}