﻿@media screen and (max-width: 1199px) {
    body {
        width: 100%;
        text-align: center;
        --width-name: min-width-1000px;
    }

    .headersearch .user {
        font-size: 11px;
        height: 35px;
       
    }

    #section2 {
       
    }

    .sitePrimary {
        width: 99%;
        margin: auto;
    }

    .mainSlider {
        width: 100%;
    }

    .secondSlider {
        width: 99%;
        height: 100px;
        margin-top: 10px;
    }

   .secondSlider .slide1 {
            width: 49%;
            float: right;
            height: 100px;
            padding: 0;
   }
   .secondSlider .slide1 img {
            height: 100px;
   }

    #section4 {
        height: 40px;
       
    }

        #section4 ul {
            width: 99%;
        }

    #section5 ul {
        width: 99%;
        padding:5px;
        height:150px;
        margin-bottom:14px;
    }

    .footer {
        width: 100%;
    }

    .splide, .splide2, .splide3, .splide4, .splide5, .splide6, .splide7, .splide8 {
        width: 99% !important;
        margin: auto;
        margin-bottom:10px;
    }
   
}

@media screen and (max-width: 1000px) {
    #productfeature {
        width: 100%;
        height: 450px;
    }

    .ads {
        width: 60%;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    #brand {
        position: relative;
    }

        #brand #product-daste ul li {
            font-size: 10px;
            padding: 10px 0px;
        }

    #product-price {
        margin-top: 90px;
        margin-left: 0;
    }

        #product-price button {
            font-size: 14px;
        }

    #productlist {
        width: 100%;
    }

    #productlist .product {
        max-width: 33% !important;
        height: 300px;
    }

    #productlist .product img {
                width: 200px;
                height: 200px;
    }
    #productfeature #product-price {
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #productfeature #product-price button {
            font-size: 10px;
    }
    .about-img{
        width:90%;
        margin:5px auto;
    }
    .about-content {
        width: 90%;
        margin: 10px 5%;
    }

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    #section1 {
        height:50px;
        padding:0px;
        box-shadow:none;
    }

    .headersearch {
        padding-top: 10px;
        background: #fff;
    }

        .headersearch .logo {
            width: 30%;
            height: 40px;
            /*margin-top: 10px;*/
            margin-bottom: 10px;
        }

    .logo img {
        width: 75%;
        height: 40px;
        float: right;
    }

    .search-box {
        float: right;
        width: 50%;
        background: #eee;
        height: 40px;
        border-radius: 4px;
        padding: 0px 7px;
        line-height: 40px;
    }

        .search-box a {
            float: right;
            color: #555;
        }

        .search-box input {
            border: none;
            background: #eee;
            width: 90%;
            float: left;
            text-align: right;
            line-height: 35px;
        }

    .headersearch .search {
        width: 100%;
    }

        .headersearch .search #searchtxt {
            width: 90%;
            float: none;
        }

    .mobileheader {
        display: block;
    }

    

    .logo img {
        margin-left: 5%;
    }

    .mobileheader .headermenu-mobile {
        position: absolute;
        right: 0px;
        top: 65px;
        text-align: right;
    }

        .mobileheader .headermenu-mobile ul {
            list-style: none;
        }

        .mobileheader .headermenu-mobile .menubar {
            padding: 10px;
        }

        .mobileheader .headermenu-mobile .menu {
            visibility: hidden;
            padding-right: 7px;
            opacity: 0;
            z-index: -1;
            background: none;
            display: block;
            border: none;
            transform: translateX(3em);
            transition: all 0.3s ease 0s,visibility 1s linear 0.3s,z-index 0s linear 0.01s;
            height: 0;
            overflow: hidden;
            position: relative;
            top: -10px;
            width: 230px;
            direction:rtl;
        }

    .headermenu-mobile li:hover .menu,
    .headermenu-mobile li:focus .menu,
    .headermenu-mobile li:focus-within .menu {
        visibility: visible;
        opacity: 1;
        z-index: 1;
        transform: translateX(0);
        transition-delay: 0s,0s,0.3s;
        height: auto;
        opacity: 1;
        background: #080;
        direction:rtl;
    }

    .mobileheader .headermenu-mobile .menubar i {
        width: 10%;
        color: #080;
        font-size: 20px;
        position: relative;
        top: 10px;
    }

    .mobileheader .headermenu-mobile a {
        color: #fff !important;
        cursor: pointer;
        text-decoration: none;
        width: 100%;
        display: block;
    }

    .mobileheader .headermenu-mobile .sub-title {
        visibility: hidden;
        padding-right: 7px;
        opacity: 0;
        z-index: -1;
        background: none;
        display: block;
        border: none;
        transform: translateX(3em);
        transition: all 0.3s ease 0s,visibility 1s linear 0.3s,z-index 0s linear 0.01s;
        height: 0;
        overflow: hidden;
        display: none;
    }

    .mobileheader .headermenu-mobile .title:hover .sub-title,
    .mobileheader .headermenu-mobile .title:focus .sub-title {
        visibility: visible;
        opacity: 1;
        z-index: 1;
        height: 100%;
        width: 100%;
        transform: translateX(0);
        transition-delay: 0s,0s,0.3s;
        height: auto;
        opacity: 1;
        background: #0a0;
    }

    .mobileheader .bascket {
        float: left;
        margin-left: 0;
        color: #000;
        cursor: pointer;
        font-size: 25px;
        background: none;
        border-radius: unset;
        top: 0 !important;
        width: 10%;
    }

    .mobileheader .userfa {
        font-size: 25px;
        float: left;
        margin-left: 0;
    }

    .icon-user::before {
        color: #000;
    }

    #section2 {
        height:460px;
    }
    #section5{
        height:160px;
    }
    .mainSlider {
        height: 250px;
    }

        .mainSlider .splide__list {
            height: 250px;
        }

        .mainSlider img {
            height: 250px;
        }

    .secondSlider {
        width: 99%;
        height: 190px;
        margin-top: 10px;
    }
    .secondSlider .slide1{
        height:100%;
    }
    .secondSlider .slide1 img{
        height:100%;
        width:100%;
    }
    #brand #product-daste ul li {
        font-size: 9px;
        padding: 10px 0px;
    }

    
    #product-price {
        margin-top: 40px;
        margin-left: 0;
        margin-bottom:10px;
    }

    #brand #feature li a {
        font-size: 11px;
    }

    #brand #feature li span {
        font-size: 11px;
    }

    #productlist {
        width: 100%;
    }

    #productlist .product {
       max-width: 33% !important;
    }

    #productlist .product img {
       width: 200px;
       height: 200px;
    }

    #productlist {
        width: 100%;
    }

    #productlist .product {
        max-width: 50% !important;
        height: 300px;
    }
    #productlist .product img {
        width: 200px;
        height: 200px;
    }
}





@media only screen and (max-width: 600px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
        background-color: red !important;
    }
    .headersearch .logo {
        width: 100%;
        height: 30px;
        margin-bottom:15px;
    }
    .logo a {
       
        width: 30%;
        display: block;
    }
    .logo img {
        width: 80%;
        max-height: 40px;
        float: left;
        margin-left: 2%;
    }
    
    .mobileheader .headermenu-mobile {
        right:0px;
        top: 0px;       
    }
    .headersearch .search {
        width: 100%;
    }

   .headersearch .search #searchtxt {
        width: 90%;
   }
    .search-box {
        position: relative;
        float: right;
        width: 70%;
        background: #eee;
        height: 40px;
        border-radius: 4px;
        padding: 0px 7px;
        line-height: 40px;
        border:1px solid #888;
        right: 5px;
    }

    #section2 {
       height:390px;
    }
    
    #section4 img {
        width: 20%;
        margin-right: 0;
    }
    #section5 ul{
        height:130px;
    }
    #section5 ul div {
        height: 120px;
    }
    #section5 ul div img{
        height:120px;
    }
        .mainSlider {
        height: 200px;
        border-radius:20px;
    }
    .splide, .splide2, .splide3, .splide4, .splide5, .splide6, .splide7, .splide8 {
        position: relative;
        height: 360px;
        width: 90%;        
        overflow: hidden;
        background:#caefd1;
        border-radius:20px;
    }
    .splide_title{
        margin-bottom:0;
    }
    .splide__arrows{
        display:none;
    }
    .mainSlider .splide__list {
        height: 200px;
    }
    .splide__title h1{
        margin:0 !important;
    }
    .splide__track li {
        height: 285px;
    }
   .mainSlider img {
        height: 200px;
   }
   .secondSlider {
       display:flex;
        justify-content:center;
       grid-column-gap:70px;

        
    }
    .secondSlider .slide1 {
        height: 170px;
        width: 245px;
        border-radius: 20px;
    }
    .slide1 img{
        width:100%;
        height:100%;
    }
    #brand {
        width: 100%;
        height: 100%;
        padding:10px;
    }

    .ads {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        display: none;
    }

    #brand #product-daste ul li {
        font-size: 7px;
    }

    #product-price span {
        float: left;
       font-size:12px;
    }

    #product-price #off {
        width: 60%;
    }

    #product-price #price {
        height: 0;
    }

    #productlist {
        width: 100%;
    }

        #productlist .product {
            max-width: 100% !important;
            height: 300px;
            min-width: 90%;
            float: none;
            margin: 0 auto;
           
        }

   #productlist .product img {
          width: 225px;
          height: 225px;
   }

    .footer .footersection {
        display: none;
    }
    #section3{
       
    }
    
    .footer .footersectionmobile {
        display: block;
        width: 100%;       
        float: right;
        font-size: 12px;
        text-align: right;
        padding: 10px;
    }
    .page{
        display:block;
        float:right;
    }
    .page a{
        width:47%;
        text-align:right;
        color:#fff;
        font-size:12px;
        display:block;
        float:right;
        margin-bottom:10px;
        text-decoration:none !important;
    }
    
   .footer .footersectionmobile img {
       width: 30px;
       height: 30px;
   }

    #productfeature {
        display: none;
    }

    #mobileproductfeature {
        
        display: block;
        width: 100%;
        background: #fff;
        border-radius: 10px;
        margin: auto;
    }

        #mobileproductfeature #ax {
            width: 100%;
            height: 375px;
        }

        #mobileproductfeature #product-daste {
            width: 100%;
             
            color: #0a0;
        }

        #mobileproductfeature #product-daste ul li {
            width: 50%;
            float: right;
            font-size:14px;
            list-style:none;
            padding-right:5%;
        }
        #mobileproductfeature #product-daste ul li * {
                text-align:center;
                float: right;
        }
        .sale-btn {
            font-size: 14px;
            width: 100%;
            border-radius: 3px;
            background: #e00;
            color: #fff;
            font-family: myfont;
            border: none;
            height: 40px;
        }

        #mobileproductfeature #feature {
            width: 100%;
            text-align: right;
            min-height:200px;
            padding-right:15px;
        }

        #mobileproductfeature #feature li {
           width: 100%;
           list-style:none;
           float:right;
           line-height:30px;
        }
        #mobileproductfeature #feature li * {
           font-size: 14px;
           font-family: myfont;
           float: right;
        }
            #mobileproductfeature #feature h5 {
                color: #333;
                font-size:16px;
                font-weight:normal;                
                margin:12px;
            }
            #mobileproductfeature #feature li p {
                font-size:14px;
                color:#fbac08;
            }
            #mobileproductfeature #feature li a {
                font-size: 14px;
            }
            #mobileproductfeature #feature li span {
                font-size: 14px;
            }
        #mobileproductfeature #product-price #offf {
            font: 300 15px IRANSans;
            background: #f34c4c;
            border-radius: 25px 15px 25px 2px;
            width: 30px;
            text-align: center;
            color: #fff;
            float: right;
        }

        #mobileproductfeature #product-price #price {
            text-decoration: line-through;
            color: #555;
            font-size: 18px;
            float: right;
            height: 50px;
            text-align: left;
            font-family: iransans;
            width: 105px;
        }

        #mobileproductfeature #product-price #off {
            color: #000;
            font-size: 26px;
            font-weight: 900;
            float: left;
            width: 100%;
            height: 30px;
            text-align: left;
            font-family: iransans;
        }

        #mobileproductfeature #product-price span {           
            float: left;   
            font-size:12px;
        }
/*_________*/
    .contact-us {
        width: 100%;
        float: left;
        padding-right: 10%;
    }

    .address {
        width: 100%;
        float: left;
        padding-right: 10%;
    }

        
}
/* #4- Landscape phones and down */
@media (max-width: 480px) {
    .search-box {
        background: #efefef;
        height: 40px;
        width: 70%;
        border-radius: 8px;
        right: 10px;
        border: 1px solid #888;
        
    }

    .search-btn {
        color: #bbb;
        float: right;
        width: 30px;
        height: 30px;
        line-height:35px;
        border-radius: 50%;         
        justify-content: center;
        align-items: center;
    }

    .searchtxt {
        border: none;
        background: none;
        outline: none;
        float: right;
        padding: 0;
        color: #444;
        font-size: 12px;       
        line-height: 35px;
        width: 80% !important;
        top:0;       
        text-align:right;
    }

    .search-box:hover > .searchtxt {
       /* width: 240px !important;
        color:#fff;
        padding: 0px 5px;*/
    }

    .search-box:hover > .search-btn {
      /*  background: white;
        color:#060;*/
    }

    .mobileheader .headermenu-mobile {
        width: 80%;
        
    }
    .headermenu-mobile ul li a {
        display: block;
    }
    .headermenu-mobile li:hover{
        border-bottom:none;
        width:100%;
    }
    .headermenu-mobile .menu {
        float:right;

        
    }
    .headermenu-mobile li:hover .menu,
    .headermenu-mobile li:focus .menu,
    .headermenu-mobile li:focus-within .menu {
                
    }

    .headermenu-mobile .menu .item {
        display: block;
        width: 100%;
        padding:0px 8px;
        color: #888;
    }
    .headermenu-mobile .menu .selecteditem{
        color:#f20;
    }
    .headermenu-mobile .menu .item a{        
        font-size:12px;
        line-height:30px;
        font-weight:800;
        display:block;
    }
    .headermenu-mobile .menu .item a i{
        padding-left:5px;
        line-height:30px;
        float:left;
    }
    .headermenu-mobile .menu .sub-title {
        display: none;
        padding-right: 35px;
        background: #fefefe;
    }
    .headermenu-mobile .menu .sub-title a {
        color: #fff;
        display:block;
    }
    #section2{
        height:360px;
    }
    .secondSlider {
        height:165px;
        grid-column-gap: 20px;
    }

        .secondSlider .slide1 {
            height: 150px;
            width: 190px;
           
        }
    #section5 ul div {
        height: 110px;
    }

        #section5 ul div img {
            height: 110px;
        }
}


/*menu buttom of mobile*/
.mobile-end-screen {
    position: fixed !important;
    left: 0px;
    bottom: 0px;
    width: 105vw;
    z-index: 999;
    border-top: 2px solid #eee;
    height:60px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    margin:0px;
    padding:0px;
}



.flex-item {
    width: 150px;
    margin:0px;
    padding:0px;
}

    .flex-item img {
        width: 50px;
    }