@media (max-width:698px) {
    .hero {
        width: 100%;
        height: 25vh;
        position: relative;
    }

    nav .search-form {
        display: none;
    }

    .before-nav {
        max-width: 100vw;
    }


    .before-nav p {
        font-size: 10px;
        line-height: inherit;
        font-weight: 500;
        letter-spacing: 0em;
    }

    .before-nav button {
        width: 73px;
        height: 16px;
        color: #000;
    }

    .before-nav button a {
        font-size: 8px;
    }

    nav {
        padding: 1rem 1rem;
        height: 22%;
    }

    nav .nav-logo {
        display: none;
    }

    nav ul .closeNav {
        display: block;
        margin-top: 3rem;
        margin-left: 1rem;
        font-size: 1.5rem;
    }

    nav ul {
        flex-direction: column;
        position: absolute;
        background-color: rgb(255, 255, 255);
        z-index: 100;
        top: 0;
        left: -100%;
        width: 80vw;
        height: 100vh;
        transition: all 0.3s;
        overflow: scroll;
    }

    nav ul li:nth-of-type(1) {
        margin-top: 4rem;
    }

    nav ul li {
        margin-top: 2rem;
        padding-left: 1rem;
        font-size: 18px;
    }

    nav ul li::after {
        position: absolute;
        content: "";
        width: 104%;
        height: 2px;
        background-color: rgb(214, 207, 207);
        left: -2%;
        bottom: -1rem
    }

    .active-li::after{
        position: absolute;
        content: "";
        width: 104%;
        height: 2px;
        background-color: rgb(214, 207, 207);
        left: -2%;
        bottom: -55%
    }

    nav ul li a {
        font-size: 18px;
    }

    nav .openNav {
        display: block;
        color: rgba(191, 106, 75, 1);
        font-size: 1.3rem;
        margin-left: 0.5rem;
    }

    nav .icons {
        margin-left: 0rem;
    }

    nav .icons .icon p {
        margin-top: 2px;
        font-size: .7rem;
    }

    nav .icons .icon p span {
        display: none;
    }

    nav .icons .icon {
        margin-right: .3rem;
    }


    nav .icons .icon i {
        font-size: 1.1rem;
    }

    /* dropdown cart */
    .dropdown-cart {
        right: -5rem;
    }

    /* Swiper */
    .swiper {
        height: 100%;
    }

    .swiper .swiper-pagination-bullet {
        margin: 0.7rem 0 !important;
        width: 0.7rem;
        height: 0.7rem;
    }

    .swiper-pagination-vertical.swiper-pagination-bullets,
    .swiper-vertical>.swiper-pagination-bullets {
        left: 28px;
    }

    .swiper .swiper-pagination-bullet-active {
        left: 0px;
        width: 0.8rem;
        height: 0.8rem;
        background-color: #A67356;
    }

    .swiper .swiper-pagination-bullet-active::after {
        content: none;
    }

    /* Container */
    .container-box {
        padding: 1.5rem 1rem;
        margin-bottom: 0.7rem;
    }

    .container-box-head {
        font-size: 24px;
        line-height: 40px;
    }

    .container .flex {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Categories */
    .categories .category-items {
        width: 169px;
        height: 185px;
        margin-bottom: 1rem;
    }


    /* Featured Products */
    .featured-products .product {
        height: 185px;
        cursor: pointer;
        margin-bottom: 1.5rem;
    }

    .featured-products .product .picture {
        min-height: 120px;
        max-height: 200px;
        width: 100%;
        border-radius: 4px;
    }

    .featured-products .product .picture .hover-info{
        display: none;
    }

    .featured-products .product .picture:hover img, .featured-products .product .picture:hover .discount{
        filter: inherit;
    }

    .featured-products .product .picture img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: cover;
    }

    .featured-products .product .product-name {
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        color: #111111;
        margin-top: 0.5rem;
        margin-bottom: 0.2rem;
    }

    /* Stories */

    .stories .story {
        margin-bottom: 1rem;
    }

    .stories .story .title {
        font-size: 14px;
    }

    .stories .story .grey {
        font-weight: 400;
        font-size: 13px;
        line-height: 26px;
        color: #757575;
    }

    .stories .story a {
        font-size: 12px;
    }

    /* Newsletter */
    .newsletter {
        width: 100%;
        /* box-shadow: 0 2px 5px rgba(0,0,0,.3); */
    }

    .newsletter p {
        width: 100%;
    }

    /*  Footer */
    .footer {
        padding-bottom: 1rem;
    }

    .footer-col:nth-of-type(1) {
        width: 100%;
        margin-right: 0rem;
    }

    .footer-col {
        width: 100%;
        margin-right: 0rem;
        padding-left: 2rem;
    }


    /* Develop */
    .develop {
        padding: 0rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .develop p {
        margin-bottom: 0.5rem;
    }

    .filter__display .sortbox .sortbox__item select {
        width: 8rem;
    }
}

@media (max-width:390px) {
    .before-nav {
        display: none !important;
    }
}

@media (max-width:375px) {

    .categories .category-items {
        width: 96%;

    }

    .categories .category-items img {
        width: 80%;
        object-fit: cover;
    }

    .stories .flex .story {
        width: 159px;
        margin-bottom: 1rem;
    }

    .container-box-head {
        font-size: 22px;
        line-height: 40px;
    }
}



/* Tab View */
@media only screen and (max-width: 1260px) and (min-width: 698px) {
    .hero {
        height: 35vh;
    }

    nav .search-form {
        display: none;
    }

    .before-nav {
        height: 10%;
    }


    .before-nav p {
        font-size: 11.5px;
        line-height: inherit;
        font-weight: 400;
        letter-spacing: 0em;
    }

    .before-nav button {
        width: 73px;
        height: 16px;
        margin: auto 0.5rem;
        color: #000;
        border-radius: 10px;
        outline: none;
        border: none;
    }

    .before-nav button a {
        font-size: 8px;
    }

    nav {
        padding: 1rem 1rem;
        height: 13%;
    }

    nav .nav-logo {
        display: none;
    }

    nav ul .closeNav {
        display: block;
        font-size: 1.5rem;
        position: absolute;
        right: 10%;
        top: 3%;
    }

    nav ul {
        flex-direction: column;
        position: absolute;
        background-color: rgb(255, 255, 255);
        z-index: 100;
        top: 0;
        left: -100%;
        width: 80vw;
        height: 100vh;
        transition: all 0.3s;
        overflow: scroll;
    }

    nav ul li:nth-of-type(1) {
        margin-top: 7rem;
    }

    nav ul li {
        margin-top: 2rem;
        padding-left: 2rem;
        position: relative;
    }

    nav ul li::after {
        position: absolute;
        content: "";
        width: 104%;
        height: 2px;
        background-color: rgb(214, 207, 207);
        left: -2%;
        bottom: -1rem;
    }
    .active-li::after{
        position: absolute;
        content: "";
        width: 104%;
        height: 2px;
        background-color: rgb(214, 207, 207);
        left: -2%;
        bottom: -55%
    }

    nav ul li a {
        font-size: 18px;
    }

    nav .openNav {
        display: block;
        color: rgba(191, 106, 75, 1);
        font-size: 1.3rem;
        margin-left: 0.5rem;
    }

    nav .icons {
        margin-left: 0rem;
    }

    nav .icons .icon p {
        margin-top: 2px;
        font-size: .7rem;
    }

    nav .icons .icon p span {
        display: none;
    }

    nav .icons .icon {
        margin-right: .9rem;
        flex-direction: column;
    }


    nav .icons .icon i {
        font-size: 1.1rem;
    }

    /* Swiper */
    .swiper {
        height: 100%;
    }

    .swiper .swiper-pagination-bullet {
        margin: 1rem 0 !important;
    }

    /* Container */
    .container-box {
        padding: 1.5rem 2rem;
        margin-bottom: 0.7rem;
    }

    .container-box-head {
        font-size: 24px;
        line-height: 40px;
    }

    .container-box .flex {
        flex-wrap: wrap;
        justify-content: space-between
    }

    /* Categories */
    .categories .category-items {
        width: 169px;
        height: 185px;
        margin-bottom: 1rem;
    }

    .categories .container-box-head {
        margin-bottom: 1rem
    }

    .featured-products .product .picture {
        /* height: 200px; */
        width: 100%;
        border-radius: 4px;
    }

    .featured-products .product .picture img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: cover;
    }

    .featured-products .product .product-name {
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        color: #111111;
        margin-top: 0.5rem;
        margin-bottom: 0.2rem;
    }

    /* Stories */

    .stories .story .title {
        font-size: 14px;
    }

    .stories .story .grey {
        font-weight: 400;
        font-size: 13px;
        line-height: 26px;
        color: #757575;
    }

    .stories .story a {
        font-size: 12px;
    }

    /* Newsletter */
    .newsletter {
        width: 100%;
        /* box-shadow: 0 2px 5px rgba(0,0,0,.3); */
    }

    .newsletter p {
        width: 100%;
    }

    /*  Footer */
    .footer {
        padding-bottom: 1rem;
    }

    .footer-col:nth-of-type(1) {
        width: 100%;
        margin-right: 0rem;
    }

    .footer-col {
        width: 100%;
        margin-right: 0rem;
        padding-left: 2rem;
        margin-bottom: 1.5rem;
    }


    /* Develop */
    .develop {
        padding: 0rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .develop p {
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width: 1260px) {

    /* Featured Products */
    .featured-products .product {
        height: auto;
        cursor: pointer;
        margin-bottom: 1.5rem;
    }

    nav ul .category-li{
        font-size: 18px;
    }
}

@media screen and (max-width: 990px) {
    .accountpanel__board-img {
        display: none;
    }
}

@media screen and (max-width: 850px) {

    /* Featured Products */
    .featured-products .product {
        height: auto;
        cursor: pointer;
        margin-bottom: 1.5rem;
    }

    .breadcrumb {
        padding: 1.5rem 1rem;
        margin-bottom: 0rem
    }

    .upshot__briefs h1 {
        font-size: 20px;
        line-height: 28px;
    }

    .upshot__pricing {
        font: 400 16px/1.5 "Poppins", sans-serif;
        margin: 0 0 8px;
    }
}

@media screen and (max-width: 650px) {

    /* Featured Products */
    .featured-products .product {
        width: 240px;
        height: auto;
        cursor: pointer;
        margin: 0 auto;
    }
}

@media screen and (max-width: 530px) {
    .featured-products .product {
        width: 100%;
}
.featured-products .product .picture{
    height: 140px;
}
.featured-products .product .price{
    font-size: 16px;
}
.featured-products .product .price .crossed-price{
    font-size: 15px;
    margin-left: 0.5rem;
}
}

@media screen and (max-width:390px) {
    .featured-products .product {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .stories .story {
        width: 100%;
    }
}