@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ruda:wght@400;700;900&display=swap');

/*HEADER*/
header {
    background-color: #D9D9D9;
    color: #421A22;
    display: flex;
}

.ops {
    text-align: center;
    height: 100%;
    width: 100%;
    opacity: 0.8;
    color: #421A22;
}

.ops:hover {
    opacity: 1;
    transition: 0.3s all;
}

#menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*FOOTER*/
footer {
    background: linear-gradient(to bottom, #C5C5C5, #949494);
}

footer p {
    color: #343434;
}

.foot-menu {
    display: flex;
    align-items: center;
}

.ops-foot {
    opacity: 0.8;
    color: #343434;
}

.ops-foot:hover {
    opacity: 1;
    color: #292929;
    transition: 0.3s all;
}

#nav1 {
    display: flex;
    align-items: center;
    position: relative;
}

#logo1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#logo1 h1 {
    position: relative;
    font-weight: normal;
    color: #404143;
}

#linha {
    opacity: 0.8;
    background-color: #343434;
    border: 0.8dvh #343434;
    border-radius: 10dvb;
}

#linha1 {
    background-color: #421A22;
    border: 0.8dvh #421A22;
    border-radius: 10dvb;
}

@media screen and (min-width: 320px) and (orientation: portrait) {
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 2dvh;
        position: relative;
        z-index: 200;
    }

    #menu {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        background: #c7c7c7;
        border: 2;
        border-radius: 1dvb;

        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        z-index: 100;
        transition: max-height 0.8s cubic-bezier(.4,0,.2,1), opacity 0.4s;
    }

    #menu.show {
        max-height: 100dvh;
        opacity: 1;
        display: flex;
    }

    #menu-icon {
        display: block;
        cursor: pointer;
        z-index: 101;
        padding: 1dvh 2dvw;
    }

    #menu-icon svg {
        transform: scaleX(-1);
        transition: opacity 0.3s,transform 0.3s;
    }

    #icon-hamburger[style*="display: none"], #icon-close[style*="display: none"] {
        opacity: 0;
        transform: scale(0.8) rotate(20deg);
        pointer-events: none;
    }

    #icon-hamburger, #icon-close {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    .ops {
        width: 100%;
        border-bottom: 0.3dvh solid #421A22;
        opacity: 1;
        font-size: 2.3dvh;
        padding: 2.5dvh 2dvw;
        text-align: start;
    }

    .ops:hover {
        color: #D9D9D9;
        background-color: #421A22;
        transition: 0.3s all;
    }

    #contato {
        width: 100%;
        border-bottom: none;
        padding: 2.5dvh 2dvw;
        color: #421A22;
        font-size: 2.3dvh;
        text-align: start;
    }

    #contato:hover {
        color: #D9D9D9;
        background-color: #421A22;
        transition: 0.3s all;
    }

    #contato img {
        display: none;
    }

    /*FOOTER*/
    footer {
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 3dvh 3dvw;
    }

    footer p {
        margin: 3dvh 0;
        opacity: 0.8;
        font-size: 2dvh;
    }

    .foot-menu {
        display: none;
    }

    .ops-foot {
        display: none !important;
    }

    #logo1 {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }

    #logo1 h1 {
        font-size: 4dvh;
        text-align: center;
        width: 100%;
    }

    #logo1 img{
        margin-top: 5dvh;
        height: 15dvh;
    }

    #linha {
        opacity: 0.8;
        height: 0.2dvh;
        width: 100%;
    }

    #linha1 {
        width: 1dvw;
        height: 6dvh;
        margin-left: 1dvw;
        margin-right: 1dvw;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    /*HEADER*/
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 3dvh;
    }

    #menu {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 3dvw;
    }

    #menu-icon {
        display: none;
    }

    .ops {
        font-size: 2.7dvh;
    }

    #contato {
        padding: 2.5dvh 2dvw;
        font-size: 2.5dvh;
        background-color: #421A22;
        color: #D9D9D9;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 3px;
        border-radius: 30px;
        gap: 1.5dvw;
    }

    #contato:hover {
        transform: scale(1.1);
        transition: 0.3s all;
    }

    #contato img {
        height: 5dvh;
    }

    /*FOOTER*/
    footer {
        padding: 3dvh 5dvw;
    }

    footer p {
        margin: 3dvh 0;
        opacity: 0.8;
        font-size: 2.3dvh;
    }

    .ops-foot {
        font-size: 2.5dvh;
        margin-left: 1dvw;
    }

    #nav1 {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #logo1 h1 {
        font-size: 4dvh;
    }

    #logo1 img{
        height: 10dvh;
    }

    #linha {
        opacity: 0.8;
        height: 0.2dvh;
        width: 100%;
    }

    #linha1 {
        width: 0.15dvw;
        height: 5dvh;
        margin-left: 0.5dvw;
        margin-right: 0.5dvw;
    }
}