*, ::after, ::before {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
}

ul, li{
    list-style: none;
}

img {
    max-width: 100%;
}

a{
    text-decoration: none;
}

button {
    border: none;
}

section {
    width: 85%;
    margin: auto; 
}

select {
    border: 1px solid rgba(210, 210, 210, 0.699);
    font: 200 14px Nunito;
    padding: 7px 10px 5px;
}

option {
    font-weight: normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}


input[type="text"], .header-search input[type="search"] {
    border: none;
    box-sizing: border-box;
    color: #000;
    height: 45px;
    padding: 8px 5px 10px 40px;
    font-size: 14px;
    text-transform: capitalize;
    float: right;
    letter-spacing: 1px;
}

.header-top, .site-navigation, .header-search, .right-icons, .header-right, .newsletter, .footer-middle, .reseaux,
.new-arrival-time-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-main{
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 100%;
}

.cross-price {
    font-size: 18px;
    color: #666;
    font-weight: 700;
    text-decoration: line-through;
    margin-right: 8px;
}

.only-responsive{
    display: none;
}

.hide {
    display: none; 
}

.header-top{
    background-image: url("elementor.dostguru.com/");
    background-position: top left;
    background-repeat: repeat;
    background-attachment: fixed;
    width: 90%;
    margin: auto;
    padding: 15px 0 15px;
    min-height: 10vh;
}

.header-navigation{
    width: 50%;
}

.site-navigation{
    list-style:none;
    justify-content: center;
    padding: 0 40px;
}

.site-navigation > li {
    padding: 14.2px 22px;
    font: 700 18px Nunito;
    white-space: nowrap;
    text-align: center;
}

.site-navigation > li:hover{
    color: #742CFE;
}

.dropdown{
    background-color: #fff;
}

.dropdown > li {
    color: black;
}

.header-right{
    text-align: right;
    width: 35%;
    align-items:end;
    justify-content: flex-end;
}

.header-search{
    margin-top: 5px;
    box-shadow: 0 3px 6px #0003;
    border-radius: 30px;
    padding: 0 15px;
    width: max-content;
}

.search-field {
    background: #fff;
    display: inline-block;
    vertical-align: top;
    margin-right: 0px;
    border-radius: 30px;
}

.header-search-bar{
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
    border-radius: 36px;
    border: none;
}

.search-product-inner{
    position: relative;
}

.icon-search {
    background-image: url("../img/svg/search.svg");
    position: absolute;
    left: -15px;
    top: 0;
    bottom: auto;
    padding: 6px 10px 6px;
    float: right;
    line-height: 29px;
    background-color: transparent !important;
    border-radius: 30px 0 0 30px;
    height: 44px;
    box-sizing: border-box;
    border: none;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 0 4px 4px 0;
    transition: all 500ms ease;
    vertical-align: top;
    font-size: 0;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    width: 60px;
    border-color: black;   
}

.wishlist-btn{
    display: block;
    background: url("../img/svg/header-heart.svg") no-repeat;
    background-size: 20px;
    height: 35px;
    width: 35px;
    background-position: center;
    background-color: #fff;
    border-radius: 5px;
}

.wishlist{
    position: relative; 
}

.wishlist-btn::before{
    position: absolute;
    content: '';
    right: -2px;
    top: 8px;
    width: 1px;
    height: 18px;
    background: #707070;
}

.listing-menu-btn{
    display: block; 
    background: url("../img/svg/user.svg") no-repeat;
    background-size: 20px;
    height: 35px;
    width: 35px;
    background-position: center;
    background-color: #fff;
    border-radius: 5px;
}

.header-cart{
    padding-right: 20px;
    height: 100%;
    display: flex;
    align-items: center;
}

.shopping-cart-item{
    display: inline-block;
    vertical-align: top;
    margin-left: 0px;
    margin-right: 0px;
    width: 44px;
    height: 44px;
    line-height: 40px;
    text-align: center;
}

.cart-icon{
    display: inline-block;
    background: url("../img/svg/cart.svg") no-repeat;
    border-radius: 5px;
    height: 24px;
    width: 24px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}

.quantity{
    position: relative;
}

.quantity-text {
    display: inline-block;
    padding: 0;
    position: absolute;
    left: -20px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    top: -25px;
    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    background: #742CFE;
}

.dropdown-hover{
    position: relative;
}

.dropdown {
    width: 210px;
    left: 0%;
    top: 100%;
    border-radius: 5px;
    position: absolute;
    transform: scaleY(0);
    text-align: left;
    padding: 0;
    border: 1px solid #e4e4e4 !important;
}

.dropdown > li {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: lighter;
}

.dropdown-hover:hover > .dropdown{
    transform: scaleY(1);  
    opacity: 1; 
}

.dropdown-hover:not(:hover) > .dropdown{
    opacity: 0; 
    transform: scaleY(0);
    transition: all 400ms ease-in-out;   
}

.shop-now {
    color: white;
    background: #742CFE;
    border-radius: 30px;
    padding: 16px 23px;
    text-decoration: none;
    font: 500 18px Nunito;
}

.play-video {
    padding: 16px 23px;
    text-decoration: none;
    color: black;
    font: 500 20px Nunito;
}

.play-video > i {
    font-size: 35px !important;
    vertical-align: middle;
}


.current-page {
    width: 100%;
    padding: 10px 0;
    background-color: #F5F5F5;
    margin-bottom:30px;
}

.title-page {
    font: 700 28px Nunito; 
    margin: 5px 0;
    text-align: center;
}

.current-page-path, .current-page-path > a {
    font: 500 14px Nunito;
    margin: 5px 0;
    color: #111;
    text-decoration: none;
    text-align: center;
}

.section-titles {
    margin-bottom: 30px; 
}

.section-title{
    font: 900 50px Nunito; 
    text-align: center;
}

.section-subtitle{
    font: 500 18px Nunito; 
    text-align: center;
    color: #707070;
}


.new-arrival-time-left{
    margin-top: 15px;
    padding: 13px 20px 13px 20px;
    background-color: #F5F5F5;
    border-radius: 50px;
    width: 236px;
    justify-content: space-between;
}

.value-date{
    color: #742CFE;
    font: bold 16px Nunito;
}

.value-name{
    font: bold 16px Nunito;
}

.price-text {
    font: bold 16px Nunito; 
    margin: 0;
    padding: 5px 0;
}

footer {
    background-color: #F8F7F6;
}

.newsletter{
    width: 90%;
    margin: auto;
    justify-content: space-between;
    padding: 40px 0;
    border-bottom: 1px solid #adadad;
}

#input-newsletter{
    padding: 15px 20px;
    border-radius: 30px;
    font-size: 14px;
    box-shadow: 0 3px 3px #0003;
    border: 1px solid #ededed;
    line-height: 20px;
    background: #fff;
    width: 58%;
    margin-right: 20px;
    margin-left: 60px;
}

.newsletter-form{
    min-width: 60%;
    display: flex;
    flex-direction: row;
}

.sign-up{
    font: 900 32px Nunito;
    width: max-content;
    margin: auto;
}

.footer-middle {
    width: 90%;
    padding: 45px 0;
    margin: auto;
    justify-content: space-between;
    align-items: baseline;
}

.about-us {
    min-width: 28%;
    max-width: 28%;
}

.footer-middle-title {
    font: 900 28px Nunito;
    padding: 30px 0;
    margin: 0;
}

.footer-middle-links {
    display: flex; 
    flex-direction: column;
    padding: 0;
}

.footer-middle-links > li, .footer-middle-desc {
    color: #707070;
    text-align: left;
    font: 600 16px Nunito;
    padding: 4px 0;
    line-height: 35px;
}

.reseaux{
    margin-top: 30px;
}

.reseaux-inner {
    width: 42px; 
    height: 42px;
    background-color: #fff;
    border-radius:49%;
    position: relative;
    margin: 0 10px;
}

.reseaux-inner > i {
    font-size: 22px;
    color: black;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer-mail {
    background: url("../img/svg/mail.svg") no-repeat left 4px;
}

.footer-phone {
    background: url("../img/svg/phone.svg") no-repeat left 4px;
}

.footer-address {
    background: url("../img/svg/localisation.svg") no-repeat left 4px;
}

.footer-icon{
    background-size: 22px !important;
    padding-left: 30px !important;
}

.sign-up{
    color: #02224D;
}

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

        .only-responsive{
            display: inherit;
        }

        .header-top{
            flex-direction:column;
            align-items:center;
            width: 95%;
        }

        .header-right {
            display: block;
            width: 100%;
        }

        .header-left, .header-right, .site-logo{
            height: 50px;
        }

        .header-left, .search-product-inner{
            display:flex; 
            flex-direction:row;
            align-items:center;
        }

        .header-left{
            justify-content:space-between; 
            width: 95%;
        }
        
        .mdi-view-headline {
            font-size:30px;
            font-weight:bold;
        }

        .header-cart{
            padding: 0;
        }

        .site-navigation, .header-search > .right-icons, .header-right > .header-cart, .sign-up, .newsletter-image{
            display: none;
        }

        #input-newsletter{
            font-size: 11px;
            margin-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        .suscribe {
            font-size: 11px;
        }
        
        .header-search-bar, .header-search{
            width: 100%;
            margin: 0;
        }

        .wishlist-btn::before{
            display: none;
        }

        .wishlist-btn, .menu-btn{
            font-size: 24px;
        }


        .newsletter, .footer-middle, .site-navigation-vertical{
            display:flex;
            flex-direction: column;
        }

        .navigation-vertical{
            position: fixed; 
            background-color: #fff;
            width: 70vw; 
            height: 100vh;
            display: flex;
            flex-direction: column;
            left: -100%;
            z-index: 2;
            padding: 10px 15px;
            font-family: Nunito;
            text-align: left;
            transition: all 400ms ease-in-out;
        }

        .site-navigation-vertical{
            padding: 0;
        }

        .site-navigation-vertical > li {
            padding: 12px 2px;
        }

        .navigation-vertical-show {
            left: 0;
            transition: all 400ms ease-in-out;
        }

        .navigation-vertical-top {
            display: flex;
            flex-direction: row;
            justify-content:space-between;
            align-items:center;
        }

        .about-us{
            width: 100%;
            min-width: none;
            max-width: none;
        }

        .footer-middle{
            padding: 10px 0 8px;
        }

        .footer-middle-title{
            text-align: left;
            font-size: 18px;
            padding: 0;
        }

        .footer-middle-desc{
            margin: 0;
            font-size: 14px;
            text-align: center;
            padding: 0;
        }

        .reseaux{
            justify-content: center;
        }

        .footer-middle-links{
            transform: scaleY(0);
            height: 0;
            margin: 0;
            transition: all 400ms ease-in-out;
            transform-origin: bottom center;
        }

        .footer-middle-links-show{
            transform: scaleY(1);
            height: auto;
            margin: 16px 0;
            transition: all 400ms ease-in-out;
            transform-origin: top center;
        }

        .about-us > .footer-middle-title{
            text-align: center;
        }
        
        .footer-middle-inner {
            padding: 0;
            padding-top: 22px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .footer-middle > div {
            width: 100%;
        }
}

@media only screen and (min-width: 768px) and (max-width: 1024px),
screen and (min-device-width: 768px) and (max-device-width: 1024px){


    .only-responsive{
        display: inherit;
    }

    #input-newsletter{
        font-size: 11px;
        margin-left: 0;
        margin-bottom: 0;
        margin-top: 0;
    }

    .suscribe {
        font-size: 11px;
    }
    
    .header-search-bar, .header-search{
        width: 100%;
        margin: 0;
    }

    .wishlist-btn::before{
        display: none;
    }

    .wishlist-btn, .menu-btn{
        font-size: 24px;
    }

    .newsletter{
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .sign-up{
        flex-basis: 100%;
        font-size: 25px;
        margin: 5px 0;
    }

    .suscribe {
        font-size: 16px;
        width: max-content;
    }
    
    #input-newsletter{
        width: 70%;
        font-size: 16px;
        min-height: 100%;
    }

    .site-navigation-vertical{
        display:flex;
        flex-direction: column;
    }

    .navigation-vertical{
        position: fixed; 
        background-color: #fff;
        width: 70vw; 
        height: 100vh;
        display: flex;
        flex-direction: column;
        left: -100%;
        z-index: 2;
        padding: 10px 15px;
        font-family: Nunito;
        text-align: left;
        transition: all 400ms ease-in-out;
    }

    .site-navigation-vertical{
        padding: 0;
    }

    .site-navigation-vertical > li {
        padding: 12px 2px;
    }

    .navigation-vertical-show {
        left: 0;
        transition: all 400ms ease-in-out;
    }

    .navigation-vertical-top {
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items:center;
    }

    .about-us{
        width: 100%;
        min-width: none;
        max-width: none;
    }

    .footer-middle{
        flex-wrap: wrap;
        flex-direction: row;
    }

    .footer-middle > div{
        flex-basis: 23%;
    }

    .about-us {
        flex-basis: 100% !important;
        margin-bottom:20px;
    }

    .footer-middle{
        padding: 10px 0 8px;
    }

    .footer-middle .mdi-chevron-down {
        display: none;
    }

    .footer-middle-title{
        text-align: left;
        font-size: 18px;
        padding: 0;
    }

    .footer-middle-desc{
        margin: 0;
        font-size: 14px;
        text-align: center;
        padding: 0;
    }

    .reseaux{
        justify-content: center;
    }

    .about-us > .footer-middle-title{
        text-align: center;
    }
    
    .footer-middle > div {
        width: 100%;
    }

}

@media (max-width: 1200px) {
    
    .mdi-view-headline, .navigation-vertical {
        display: inherit;
    }

    .header-right {
        width: 100%;
    }

    .header-left, .header-right, .site-logo{
        height: 50px;
    }

    .header-left, .search-product-inner{
        display:flex; 
        flex-direction:row;
        align-items:center;
    }

    
    .header-left{
        width: 95%;
    }
    
    .mdi-view-headline {
        font-size:30px;
        font-weight:bold;
    }
    
    .header-cart{
        padding: 0;
    }
    
    .site-navigation, .header-left-icons{
        display: none;
    }
    
    .navigation-vertical{
        position: fixed; 
        background-color: #fff;
        width: 70vw; 
        height: 100vh;
        display: flex;
        flex-direction: column;
        left: -100%;
        z-index: 2;
        padding: 10px 15px;
        font-family: Nunito;
        text-align: left;
        transition: all 400ms ease-in-out;
    }
    
    .navigation-vertical-show {
        left: 0;
        transition: all 400ms ease-in-out;
    }
}