/*
Components: Marfino
Version: 1.0
*/

/** 
 * 
 * 
 * Marfino Header
 * Uso: Estilo sticky no header.
 */
.header-spacer {
    display: block;
    width: 100%;
}

#marfino-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: background-color 0.3s ease, 
                box-shadow 0.3s ease, 
                padding 0.3s ease, 
                transform 0.3s ease;
}

#marfino-header.is-sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/** 
 * 
 * 
 * Marfino Menu
 * Uso: Estilo do menu do site.
 */
.menu-principal-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.site-navigation-menu{
  width: 100%;
}

.site-navigation-menu .main-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
    justify-content: center;
}

.site-navigation-menu .main-menu-list li a {
    text-decoration: none;
    display: block;
    font-family: "Schibsted Grotesk", Sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #B1AAA4;
    transition: all .3s;
}

.site-navigation-menu .main-menu-list li a:hover {
    color: #5E6B77;
}


.menu-toggle-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-right: 0.625rem;
    z-index: 1000;
}

.hamburger-box {
    width: 1.75rem;
    height: 1.25rem;
    display: inline-block;
    position: relative;
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
    width: 1.75rem;
    height: 0.188rem;
    background-color: #000;
    border-radius: 2px;
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner::before, 
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

.menu-toggle-btn.is-active .hamburger-inner {
    background-color: transparent;
}

.menu-toggle-btn.is-active .hamburger-inner::before {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle-btn.is-active .hamburger-inner::after {
    transform: translateY(-8px) rotate(-45deg);
}

/** 
 * 
 * 
 * Marfino Categories
 * Uso: Estilo dos cards de categoria.
 */

.img-hv-sdw{
    transition: box-shadow .3s;
}
 
.img-hv-sdw:hover{
    box-shadow: 0 10px 40px rgb(43, 113, 226, 0.9);
    
}

/** 
 * 
 * 
 * Marfino Contato Cards
 * Uso: Estilo dos cards de contato.
 */

.crd_contact:hover .elementor-icon{
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.crd_contact:hover h3, .crd_contact:hover p{
    color: #FFFFFF !important;
}

/** 
 * 
 * 
 * Marfino Contact Form
 * Uso: Estilo do form de contato.
 */
.wpforms-field-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
  width: 100%;
  box-sizing: border-box;
}

#wpforms-260-field_4-container,
#wpforms-260-field_9-container {
  display: none !important;
}

#wpforms-260-field_1-container,
#wpforms-260-field_2-container {
  flex: 1 1 calc(50% - 15px);
}

#wpforms-260-field_3-container {
  flex: 4 1 calc(40% - 15px);
}

#wpforms-260-field_8-container {
  flex: 1 1 calc(10% - 15px);
}

#wpforms-260-field_5-container {
  flex: 5 1 calc(50% - 15px);
}

#wpforms-260-field_6-container,
#wpforms-260-field_7-container {
  flex: 1 1 100%;
}

.wpforms-field-container label {
    display: flex;
    padding-bottom: 0.625rem;
    font-family: "Schibsted Grotesk", Sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1em;
    color: #818181;
}

.wpforms-field-container label .wpforms-required-label {
    display: none;
}

.wpforms-field-container input[type="text"],
.wpforms-field-container input[type="email"],
.wpforms-field-container select,
.wpforms-field-container textarea {
    padding: 0.875rem;
    border: 1px solid #EEEEEE;
    border-radius: 0;
    box-shadow: none !important;
    outline: none !important;
    font-family: "Schibsted Grotesk", Sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
}

.wpforms-field-container textarea {
    min-height: 12.5rem;
}

#wpforms-form-260 .wpforms-submit-container button {
    display: flex;
    width: 100%;
    margin: 1.25rem 0 0;
    justify-content: center;
    padding: 0.875rem 2rem 0.875rem 2rem;
    text-decoration: none;
    border-radius: 0;
    border: 2px solid #F5F5F5;
    font-family: "Schibsted Grotesk", Sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.3s ease;
    background-color: #2B71E2;
    border-color: #2B71E2;
    color: #FFFFFF;
    text-transform: uppercase;
}

#wpforms-form-260 .wpforms-submit-container button:hover {
    background-color: #161615;
    border-color: #161615;
}

@media (max-width: 767px) {
    .rbr_m br{
        display: none;
    }

    .menu-principal-wrapper{
        justify-content: end;
    }

    .menu-toggle-btn {
        display: inline-block;
    }

    .site-navigation-menu {
        /*display: none;*/
        visibility: hidden;
        top: 11.4%;
        left: 0;
        position: fixed;
        z-index: -1;
        height: 88.6%;
        background-color: #F5F5F5;
        padding: 1.875rem;
        width: 100%;
        transition: all .3s;
        transform: translateX(-100%);
    }
    
    .site-navigation-menu.is-open {
        /*display: block;*/
        visibility: visible;
        z-index: 999;
        transform: translateX(0%);
    }

    .site-navigation-menu .main-menu-list {
        flex-direction: column;
        gap: 1.25rem;
    }

    .site-navigation-menu .main-menu-list li a {
        font-size: 1.25rem;
        color: #5E6B77;
    }

    .wpforms-field {
        flex: 1 1 100% !important;
    }

    #wpforms-260-field_3-container {
        flex: 0 0 calc(70% - (1.25rem * 0.3)) !important;
    }

    #wpforms-260-field_8-container {
        flex: 0 0 calc(30% - (1.25rem * 0.7)) !important;
    }
}