
/*
    Theme Name: Emoza Woocommerce Child
    Theme URI: http://example.com/emoza-woocommerce-child/
    Description: Emoza Woocommerce Child Theme
    Author: SuperbThemesCom
    Author URI: http://sarisari.com
    Template: emoza-woocommerce
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: emoza-woocommerce-child
*/

*{
    list-style: none !important;
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto.ttf') format('truetype');
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

@font-face {
    font-family: 'Inter';
    src: url('font/Inter.ttf') format('truetype');
}

@font-face {
    font-family: 'Rubik';
    src: url('font/Rubik.ttf') format('truetype');
}

@font-face {
    font-family: 'RubikL';
    src: url('font/Rubik-l.ttf') format('truetype');
}

@font-face {
    font-family: 'Staatliches';
    src: url('font/Staatliches.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins.ttf') format('truetype');
}

.inter {
    font-family: 'Inter', sans-serif;
}

.rubik {
    font-family: 'Rubik', sans-serif;
}

.rubikL {
    font-family: 'RubikL', sans-serif;
}

.staatliches {
    font-family: 'Staatliches', sans-serif;
}

.poppins {
    font-family: 'Poppins', sans-serif;
}


/* HEADER */

#main-nav a {
    color: rgb(0, 0, 0) !important;  
    text-decoration: none; 
}

#main-nav a:hover {
    color: #FD4912 !important; 
    font-weight: 500 !important;
}

/* ACTIVE */
#main-nav .nav-link.active {
    color: #FD4912 !important;
    font-weight: 500 !important;
    /* text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
    text-decoration-color: #FD4912;  */
}

/* ACTIVE WITH ICON */
#main-nav .nav-link.active i {
    color: #FD4912;
}

#main-nav a:focus, #main-nav a:active {
    outline: none; 
    border: none; 
}

/* Mobile Nav */
#mobile-nav a {
    color: #101010 !important;  
    text-decoration: none; 
}

#mobile-nav a:hover {
    color: #FD4912 !important; 
}

#mobile-nav .nav-link.active {
    color: white !important;
    background-color: #fd5b29 !important;
    border-radius: 5px;
}

#mobile-nav a:focus, #mobile-nav a:active {
    outline: none; 
    border: none; 
}

/* Underline only the cart link when active */
#mobile-nav .underline-cart {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    color: #FD4912 !important;
}

/* Remove background styles that may apply from nav-link.active */
#mobile-nav .mobile-cart.nav-link.active {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #FD4912 !important;
}


/* Toogle */
.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline, .wp-block-search .wp-block-search__button, button, a.button, .wp-block-button__link, input[type=\"button\"], input[type=\"reset\"], input[type=\"submit\"] {
    border: none !important;
}

button, a.button, .wp-block-button__link, .wc-block-components-button, ul.wc-block-grid__products li.wc-block-grid__product .wp-block-button__link, ul.wc-block-grid__products li.wc-block-grid__product .button, ul.products li.product .button, input[type="button"], input[type="reset"], input[type="submit"] {
    padding: 0 !important;
}

/* From Uiverse.io by JulanDeAlb */ 
#mobile-nav .hamburger {
    cursor: pointer;
}
    
#mobile-nav .hamburger input {
    display: none;
}
    
#mobile-nav .hamburger svg {
    height: 3vh;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
    
#mobile-nav .line {
    fill: none;
    stroke: #101010;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
  
#mobile-nav .line-top-bottom {
    stroke-dasharray: 12 63;
}

#mobile-nav .hamburger input:checked + svg {
    transform: rotate(-45deg);
}

#mobile-nav .hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

/* Custom Shadow */
.custom-shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* FOOTER */
#footer a {
    color: #969696 !important;
}
#footer a:hover {
    color: #ffffff !important;
}

/* Woocommerce BTN */
button:not(.has-background), a.button:not(.has-background), .wp-block-button .wp-block-button__link:not(.has-background), .wp-block-button__link:not(.has-background), .wp-block-search .wp-block-search__button:not(.has-background), input[type="button"]:not(.has-background), input[type="reset"]:not(.has-background), input[type="submit"]:not(.has-background), .comments-area .comment-reply-link:not(.has-background), .emoza-sc-product-quantity {
    background: none !important;
}

#feature .shop-now {
    color: #2E2E2E;
}

#feature .shop-now:hover {
    color: #fff !important;
    background: #2E2E2E !important;
    border: #2E2E2E !important;
}

/* reveal animation */
#text-animation span,
#text-animation button{
    display: inline-block;
    transform: translateY(-100%);
}


@media screen and (max-width: 768px) {
    #mobile-nav .line {
        fill: none;
        stroke: #101010;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.2 !important;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media screen and (max-width: 640px) {
    #mobile-nav .line {
        fill: none;
        stroke: #101010;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.1 !important;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}


/* Header - Footer */
@media screen and (device-width: 1680px) and (device-height: 1050px) {

    #footer .footer-border {
        margin-top: 1.2% !important;
    }
}

@media screen and (device-width: 1600px) and (device-height: 900px) {
    #footer .footer-border {
        margin-top: 1.2% !important;
    }
}

@media screen and (device-width: 1440px) and (device-height: 900px) {
    
    #footer .footer-border {
        margin-top: 1.2% !important;
    }
}

@media screen and (device-width: 1400px) and (device-height: 1050px) {
    
    #footer .footer-border {
        margin-top: 1.1% !important;
    }
}

@media screen and (device-width: 1366px) and (device-height: 768px) {
    /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 28% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -6px !important;
        right: -8px !important
    }

    /* Footer */
    #footer {
        padding-top: 2% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }

    #footer .footer-border {
        margin-top: 1% !important;
    }
}

@media screen and (device-width: 1360px) and (device-height: 768px) {
    /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 28% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -6px !important;
        right: -8px !important
    }

    /* Footer */
    #footer {
        padding-top: 2% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }

    #footer .footer-border {
        margin-top: 1% !important;
    }
}

@media screen and (device-width: 1280px) and (device-height: 1024px) {
  
    #footer .footer-border {
        margin-top: 1.1% !important;
    }  
}

@media screen and (device-width: 1280px) and (device-height: 960px) {
    #footer .footer-border {
        margin-top: 1.1% !important;
    }
}

@media screen and (device-width: 1280px) and (device-height: 800px) {
     /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 28% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12.5px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -6px !important;
        right: -8px !important
    }

    /* Footer */
    #footer {
        padding-top: 2% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }

    #footer .footer-border {
        margin-top: 1.1% !important;
    }
}

@media screen and (device-width: 1280px) and (device-height: 768px) {
     /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 28% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -7px !important;
        right: -9px !important
    }

    /* Footer */
    #footer {
        padding-top: 2.2% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }
    
    #footer .footer-border {
        margin-top: 1.1% !important;
    }
}

@media screen and (device-width: 1280px) and (device-height: 720px) {
     /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 28% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12.2px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -7px !important;
        right: -9px !important
    }

    /* Footer */
    #footer {
        padding-top: 2.2% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }
    
    #footer .footer-border {
        margin-top: 1.1% !important;
    }
}

@media screen and (device-width: 1280px) and (device-height: 600px) {
     /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 28% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12.2px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -7px !important;
        right: -9px !important
    }

    /* Footer */
    #footer {
        padding-top: 2.1% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }
    
    #footer .footer-border {
        margin-top: 1% !important;
    }
}

@media screen and (device-width: 1152px) and (device-height: 864px) {
    
    /* Footer */
    #footer {
        padding-top: 2.5% !important;
    }
    
    #footer .footer-border {
        margin-top: 1% !important;
    }
}

@media screen and (device-width: 1024px) and (device-height: 768px) {
     /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-img {
        width: 30% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12.2px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -7px !important;
        right: -9px !important
    }

    /* Footer */
    #footer {
        padding-top: 2.5% !important;
    }

    #footer .logo {
        width: 52% !important;
    }

    #footer .footer-border {
        margin-top: 1.5% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }
    
    #footer .footer-border {
        margin-top: 1% !important;
    }
}


@media screen and (device-width: 800px) and (device-height: 600px) {
     /* Header */
    #header #main-nav {
        padding-top: 1.2% !important;
        padding-bottom: 1.2% !important;
    }

    #header #main-nav .header-menu a {
        font-size: 12.2px !important;
    }

    #header #main-nav .desktop-cart span {
        top: -7px !important;
        right: -9px !important
    }

    /* Footer */
    #footer {
        padding-top: 3% !important;
    }

    #footer .logo {
        width: 45% !important;
    }

    #footer .footer-border {
        margin-top: 1.5% !important;
    }

    #footer .footer-content .footer-menu a {
        font-size: 12.5px !important;
    }

    #footer .footer-content .social-media a {
        margin-top: 100px !important;
    }
    
    #footer .footer-border {
        margin-top: 1% !important;
    }
}
