/*
* Theme Name: Ensus Advanced Engineering
* Theme URI: https://ensus.com.br
* Description: Tema desenvolvido exclusivamente para o site Ensus.
* Author: Agência Santis
* Author: URI: https://agenciasantis.com.br
* Version: 1.0
* Text Domain: ensus
*/

*,
::before,
::after {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
}

/*** HEADER ***/

#main-header {
    visibility: hidden;
    transition: all .3s ease-in-out;
    transform: translateY(2rem);
    opacity: 0;
}

.menu-opened {
    visibility: visible !important;
    transform: translateY(0) !important;
    opacity: 1 !important;


    .hfe-nav-menu {
        animation: slideUp 1s ease .2s;
    }
}

#close-nav {
    .elementor-icon {
        transition: transform .3s ease-in-out;
    }

    .elementor-icon:hover {
        transform: rotate(180deg);
    }
}

/*** HOME ***/

.edge-overflow {
    overflow: hidden;
}

.box {
    position: relative;
    overflow: hidden;

    .text-box {
        height: 0;
        visibility: hidden;
        transition: all 1s ease;
    }
}

.number span {
    position: absolute;
    left: -8rem;
    font-size: 10rem;
    font-weight: 800 !important;
    font-family: 'DM Sans', sans-serif !important;
    align-content: end;
    transition: all  .3s ease-in-out;
    border: none;
    background: linear-gradient(-45deg, #eeaa52, #e73c6f, #2394d5, #2af3b7);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px transparent;
    color: #fff !important;
    z-index: 0;
    top: -1rem;
}

.box:hover {
    h3 {
        color: #fff !important;
    }

    .text-box {
        visibility: visible;
        height: 80px;
    }

    .number span {
        position: absolute;
        font-size: 15rem;
        align-content: end;
        color: #33AF7F !important;
        /*background: #fff !important;*/
    }
}

/*** CONTATO ***/

#wpforms-form-210 {
    font-family: 'DM Sans', sans-serif !important;

    .wpforms-field {
        label {
            font-weight: 300 !important;
            text-transform: uppercase !important;
        }

        input[type=text],
        input[type=email],
        textarea {
            font-family: 'DM Sans', sans-serif !important;
            border-bottom: 1px solid #abb3b6 !important;
            border-radius: 0 !important;
            padding: 1rem 0 !important;
            font-size: 18px !important;
            resize: none;

            &:focus {
                outline: none !important;
                border: 0 !important;
                border-bottom: 2px solid #4EB58B !important;
                box-shadow: none !important;
            }
        }

        li.choice-3 {
            input {
                &::after {
                    border: 1px solid #000 !important;
                    border-radius: 2px !important;
                }
            }

            label {
                font-family: 'DM Sans', sans-serif;
                font-size: .875rem !important;
                text-transform: none !important;
            }
        }
    }

    .wpforms-submit-container {
        display: flex;

        button[type=submit] {
            text-transform: lowercase;
            padding-inline: 3rem;
        }

        &::before {
            content: '';
            display: block;
            width: 41px;
            height: 41px;
            border: 1px solid #4EB58B;
            border-radius: 2rem;
            margin-right: .5rem;
        }
    }
}

.gradient-text {
    background: -webkit-linear-gradient(#e2e6ed, #93a5cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/** SOBRE **/

#viewport {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

#viewport::-webkit-scrollbar {
    display: none;
    visibility: hidden;
    height: 0;
}

.elementor-element-2dee704 {
    position: relative;
}

.card {
    min-width: 480px;
    scroll-behavior: smooth;
    scroll-snap-align: center;

    .front {
        position: absolute;
        cursor: pointer;
        opacity: 1;
        transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .back {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .close {
        cursor: pointer;
        width: fit-content;
        align-self: flex-end;
    }
}

.show {
    visibility: visible !important;
    opacity: 1 !important;
}

.hide {
    visibility: hidden;
    opacity: 0;
}

#areas-nav {
    ul {
        column-count: 2;
        width: fit-content;

        li {
            width: 245px;
            border: 1px solid #29b07c;
            border-radius: 2rem;
            padding: .5rem 1rem;

            a {
                text-align: center;
                display: block;
                width: 100%;
            }
        }

        li.active {
            background: #0a875a;

            span {
                color: #fff;
            }
        }
    }
}

.images-container {
    .elementor-widget-image {
        display: none;
    }

    .active-image {
        display: block;
        animation: slideUp .5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(2rem);
        opacity: .5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(2rem);
        opacity: .5;
    }
}