@media only screen and (max-width: 1024px){
    .hero_area {
        height: auto;
      }
    .product-container-details{
        flex-wrap:  wrap;
        justify-content: center;
    }
    .product-detail-img{
        width: 100%;
        margin: 2rem;
    }
    .product-detail-info{
        width: 100%;
        margin: 2rem;
    }
}

@media only screen and (max-width: 768px){
    .res-hidden{
        display: none;
        opacity: 0;
    }
    .header{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .logo{
        display: block;
        margin: 1rem;
        position: relative;
        left: -20%;
    }
    .menu-btn{
        width: 20%;
        position: absolute;
        left: 0;
        top: 1.5rem;
    }
    .search{
        width: auto;
        margin: 0 0 1.5rem 0;
        position: relative;
    }
    .head-icon{
        font-size: 3rem;
    }
    .cart{
        position: absolute;
        right: 20%;
        top: 1.5rem;
        width: 15%;
    }
    .cart_count {
        top: -.5rem;
        right: -.5rem;
        width: 2.1rem;
        height: 2.1rem;
        line-height: 2.1rem;
      }
    .user{
        position: absolute;
        right: 0;
        top: 1.5rem;
        width: 20%;
    }
    .menu{
        top: 0;
        padding: 4rem 1rem;
    }
    .menu-close-btn{
        top: 1rem;
        right: 2rem;
    }
    .menu-category {
        min-width: 40%;
    }
    main{
        top:11rem;
    }
    #customCarousel1{
        flex-direction: column;
    }
    .slider_section .detail-box {
        margin: 4.5rem 0;
    }
    .carousel-indicators{
        flex-direction: row !important;
    }
    .info_section .row>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .info_section .row>div:not(:nth-last-child(1)) {
        margin-bottom: 25px;
    }
    .info_section .info_form .social_box {
        justify-content: center;
    }

    .info_section .info_form .social_box a {
        margin: 0 15px;
    }
    .banner_txt_box{
        width: 100%;
    }
    .banner_txt_box{
        border-radius: 0;
    }
}

@media only screen and (max-width: 480px){
    html{
        font-size: 7.4px;/* 6p */
    }
    body{
        font-size: 15px;/* 9.6p */
    }
    .hero_area {
        padding-left: 0;
        background: none;
    }
    
    .hero_area .hero_social {
        top: unset;
        bottom: 0;
        transform: none;
        left: 1rem;
    }
    .hero_area .hero_social a {
        color: #353535;
    }
    .slider_section {
        margin: 0 0 0 0 !important;
        border-radius: 0 0 0 20rem;
    }
    .product-container{
        width: 20.3rem;
    }
    .product-img {
      height: 18.3rem;
    }

    .form {
        width: 100%;
    }
}