/* ===========================================
   Responsive CSS
   Shwe Padonmar Footwear
===========================================*/

/* ---------- Tablet ---------- */

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

    header{
        flex-wrap:wrap;
        padding:15px;
    }

    .main-nav{
        width:100%;
        margin-top:15px;

        display:flex;
        overflow-x:auto;
        white-space:nowrap;
        gap:20px;

        scrollbar-width:none;
    }

    .main-nav::-webkit-scrollbar{
        display:none;
    }

    .main-nav a{
        flex:0 0 auto;
    }

    .container{
        flex-direction:column;
        padding:20px;
    }

    .sidebar{
        width:100%;
        margin-bottom:20px;
    }

    main{
        width:100%;
    }

    .products{

        grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    }

    .footer-container{

        flex-wrap:wrap;

        gap:40px;

    }

}



/* ---------- Mobile ---------- */
@media screen and (max-width:768px){

   header{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    padding:10px 15px;

}

   h1{

    margin:0;

    font-size:24x;

}

    .hamburger{

    display:block !important;

    background:none;

    border:none;

    font-size:30px;

    cursor:pointer;

    color:white;

}

   .main-nav{

    width:100%;

    display:none;

    flex-direction:column;

    margin-top:15px;

}

.main-nav.active{

    display:flex;

}
.dropdown{

    width:100%;

}

.dropdown>a{

    display:block;

    padding:12px;

}

.dropdown-content{

    position:static;

    display:none;

    box-shadow:none;

}

.dropdown.active .dropdown-content{

    display:block;

}

   .social{

    display:none;

}

    .container{

        display:block;

        padding:15px;

    }

.sidebar{

    display:none;

}

   main{

    flex:1;

    min-width:0;

}

   .products{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(170px,1fr));

    gap:15px;

}

    .product{

        padding:15px;

    }

    .product h3{

        font-size:15px;

    }

    .product img{

    width:100%;

    height:auto;

    display:block;

}

    .price-box{

        font-size:14px;

    }

    .footer-container{

        flex-direction:column;

        gap:25px;

        padding:20px;

    }

    .footer-col{

        width:100%;
        text-align:center;

    }

}



/* ---------- Small Phones ---------- */

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

    .products{

        grid-template-columns:
        repeat(2,1fr);

        gap:10px;

    }

    .product{

        padding:10px;

    }

    .product h3{

        font-size:14px;

    }

    .product-price{

        font-size:16px;

    }

    .badge{

        font-size:10px;

    }

    .sidebar{

        padding:15px;

    }

}
/* ---------- Extra Small Phones ---------- */

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

    .products{

        grid-template-columns:1fr;

    }

}