#login-section1{ width: 100%; height: 70px; padding-top: 25px; font-size: 14px; position: relative; text-align: left; margin-bottom: 0; border-radius:0%; } #login-section1 a, #login-section1 span{ font-weight: bold; color: grey; } #login-section1 a:hover{ transition: 0.1s; color: #C32929; text-decoration: none; } #login-section1 a span{ font-weight: bold; color: grey; } #login-section1 .login{ font-weight: bold; color: rgb(68, 68, 68); } #left-column{ display: flex; flex-direction: column; align-content: flex-start; margin-top: 20px; margin-left: 30px; }
/* Main Code For Filter */
.filter-section { width: 250px; background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; margin-right: 20px; font-family: Arial, sans-serif; } .filter-section h2 { font-size: 18px; margin-bottom: 20px; font-weight: bold; } .filter-section .filter-group h3{ font-weight: bold; } .filter-group { margin-bottom: 20px; } .filter-group h3 { font-size: 14px; margin-bottom: 10px; font-weight: normal; } .filter-group ul { list-style: none; padding: 0; font-size: 12px; } .filter-group li { margin-bottom: 1px; } .filter-group label { margin-left: 5px; } .price-range { display: flex; flex-direction: column; align-items: center; } .price-range input[type="range"] { width: 100%; margin: 10px 0; } .price-values { display: flex; justify-content: space-between; width: 100%; font-size: 14px; } .color-options { display: flex; gap: 10px; } .color-option { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; } .product-section { flex: 1; padding: 20px; } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .view-options i { font-size: 20px; margin-right: 10px; cursor: pointer; } .sort-by label { margin-right: 10px; } .product-list { display: flex; justify-content: space-between; flex-wrap: wrap; } .product-card { background-color: #fff; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 48%; margin-bottom: 20px; border-radius: 8px; } .product-card img { max-width: 100%; height: 55vh; } .product-list .product-card .vertical p,h3,span{ font-size: 12px; margin-bottom: 10px; } .product-list .product-card .vertical h3{ font-size: 13px; } .info{ height: 50px; font-size: 13px; padding-top: 7px; } .product-card button:hover{ color: white; background-color: #C32929; } .product-card .category { font-size: 14px; color: #666; cursor: pointer; } .product-card .category:hover { color: #C32929; } .product-card h3 { font-size: 16px; margin: 10px 0; } .product-card h3:hover { color: #C32929; cursor: pointer; } .sizes span { display: inline-block; margin: 5px; padding: 5px 10px; border: 1px solid #ddd; cursor: pointer; } .sizes span:hover { color: white; background-color: #C32929; } .product-card .price { font-size: 18px; color: #333; margin-top: 10px; cursor: pointer; } .product-card .price:hover{ color: #C32929; }  /*  */
  /* Vertical */
  /* Default grid view styling */
  .product-list.grid-view .product-card { flex-basis: 32%; margin-bottom: 20px; } .item9{ height: 55vh; } .product-list.list-view .product-card { flex-basis: 100%; margin-bottom: 20px; display: flex; align-items: center; } .product-list.list-view .product-card .premium{ flex-basis: 100%; margin-bottom: 0px; display: flex; align-items: center; width: 350px; height: 55vh; } .product-list.list-view .product-card .vertical { margin-top: -200px; } .item9 .discount{ top: 2px; right: 2px; position: absolute; background-color: rgb(202, 29, 29); color: white; padding: 4px; font-size: 10px; border-radius: 50px; width: 45px; height:45px ; border: none; } .premium{ height: 55vh; width: 100%; max-width: 100%; background-size: cover; background-position: top; display: flex; flex-direction: column; align-items: flex-start; justify-content:center; transition: transform 4s ease; } .off{ margin-left: 10px; } .section-p2 .center { margin-left: 80px; } .content-section{ margin: 10px; margin-left: 125px; margin-right: 100px; } .content-section p{ font-weight: 400; } .category-name{ font-size: 24px; line-height: 24px; color: #222; font-weight: bold; } .category-description{ font-size: 16px; color: black; font-weight: 100; padding: 0px 0px; }
  @media (max-width:777px) or (max-width:1024px) { .section-p2 .center { margin-left: 80px; } .product-list.grid-view .product-card { flex-basis: 49%; margin-bottom: 20px; } .item9{ height: 50vh; } .item9 .discount{ font-size: 8px; border-radius: 50px; width: 35px; height:35px ; border: none; } .off{ margin-left: 0px; } .shop1{ height: 50vh; } /* Footer */ .content-section{ margin: 10px; margin-left: 90px; margin-right: 75px; text-align: justify; } }
  @media (min-width:567px) and (max-width:750px) { .section-p2 .center { margin-left: 80px; } .product-list.grid-view .product-card { flex-basis: 70%; margin-bottom: 20px; } }
  @media (max-width:477px) or (max-width:333px){ /* Footer */ .product-card { box-shadow: 0 0 0px } .product-list.grid-view .product-card { flex-basis: 49%; /* margin: 0 1%; */ margin-bottom: 10px; } .list{ display: none; } .item9{ height: 32vh; margin: 0px; width: 95%; } .vertical{ text-align: center; } .item9 img{ /* height: 38vh; */ height: 110%; width: 100%; transform: scale(1.02); transform: scaleX(1.3); transition: none; } .item9:hover img { transform:none; } .info, .wishlist,.img { position: absolute; opacity: 0; /* transition: opacity 0.3s ease; */ transform: scaleX(1.3); transition: none; } .info, .wishlist { transition: opacity 0.3s ease; transform: none; } .item9 .premium{ height: 38vh; width: 100%; } .product-card .item9 .img a img{ height: 38vh; width: 100%; } .product-list .product-card .item9 { width: 100%; } .info{ height: 44px; font-size: 10px; padding-top: 5px; } .info button { padding: 8px 9px; } .add-to-cart{ padding-top: 0px; } .product-list .product-card .vertical h3{ font-size: 10px; } .category{font-size: 10px;} .sizes span{font-size: 8px;} .sizes {display: none;} .price span{font-size: 10px;} .price .priceCut{display: block;} .product-list .product-card .vertical .offer-timer,span{font-size: 11px;} .content-section{margin: 10px; margin-left: 30px; margin-right: 20px;} .product-section { padding: 12px; flex: unset; } }
  @media (max-width: 767px) { #left-column{ margin-left: 10px; /* margin-right: 20px; */ } .product-list{ margin-right: 0px; } .sort-by{ width: 80%; } .relevance{ width: 30%; padding-left: 20px; padding-right: 20px; } /* .item9 .img{ width: 100%; } */ .product-list .product-card .item9{ /* flex-basis: 90%; margin-bottom: 20px; */ width: 93%; } .product-list{ justify-content: center; } }
/* For Filter in mobile section */
/* By default, hide the filter section on mobile devices */
@media (max-width: 767px) { .filter-section { display: none; } /* Button to show filters on mobile */ .filter-toggle-btn { display: block; padding: 10px; background-color: #007bff; color: white; border: none; cursor: pointer; margin-bottom: 15px; text-align: center; font-size: 16px; } .toolbar{ /* display: none; */ } .sort{ display: none; } .relevance{ width: 80%; padding-left: 20px; padding-right: 20px; } }
/* Show filter section on tablets and larger devices */
@media (min-width: 768px) { .filter-section { display: block; } .filter-toggle-btn { display: none; } .filter-mobile-btn{ /* display: none; */ } }
@media (max-width: 477px) { .price .priceCut{ display: block; } .product-card{ padding: 0px; } .category-name{ font-size: 20px; } .category-description{ font-size: 14px; } }
@media (max-width:566px){ .product-list .product-card .item9 { width: 103%; } } @media (min-width:1120px){ .product-card { flex: 0 0 32%; } /* Grid View - 4 items per row */ .product-list.grid-view1 .product-card { flex: 0 0 24%; } }