/* 

Template: Riode Ecommerce 
Author: Shuvo Mallick
Description: Complete ecommerce Template
Version: 1.0.0
Keywords: eCommerce, Template etc. 

*/

/* =============== *** =============== */
/* ===== Home Page css ===== */
/* ===== Login Page & Registration Page CSS ===== */
/* ===== Product Page CSS ===== */
/* ===== Blog Page CSS ===== */
/* ===== Footer CSS ===== */
/* ===== Login Page & Registration Page CSS ===== */
/* =============== *** =============== */

/* ===== style list table ===== */
/* 
  1. utilities class 
  2. header section
  3. hero section
  4. feature products section
  5. Browse Caegories 
  6. Support section 
  7. Product page 
  8. Blog page
  9. footer 
  10. login page and registration page
  */
/* ===== style list table ===== */

/* ====================== Next Page ====================== */
/* ===== Home Page CSS ===== */
/* ====================== Next Page ====================== */

/* ===== Discount alert start ===== */
.discount-alert {
  padding: 12px;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-blue-500);
}

.discount-alert > p {
  font-size: 12px;
  font-weight: 400;
}

.discount-alert > p .category {
  margin: 0 5px;
  padding: 4px 6px;
  color: var(--color-blue-500);
  background-color: var(--color-white);
}

.discount-alert > small {
  font-weight: 400;
  font-size: 10px;
}
/* ===== Discount alert end ===== */

/* ===== Header area start ===== */
.header-top-content {
  padding: 20px 0;
}

.header-top-content > p {
  color: var(--text-secondary);
}

.header-top-nav ul {
  gap: 20px;
}

.header-top-nav ul li {
  list-style: none;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

/* ===== Header mid ===== */
.header-mid {
  padding: 5px 0;
  gap: 15px;
}

.header-mid > .logo {
  max-width: 140px;
  flex-shrink: 0;
}

.header-mid .logo img {
  width: 100%;
}

.search-box {
  display: flex;
  max-width: 500px;
  width: 100%;
  border-radius: 20px;
  padding: 10px 10px 10px 15px;
  background-color: var(--color-grey-100);
}

.search-box input {
  flex-grow: 1;
  border: none;
  outline: none;
  line-height: 1;
  font-size: 12px;
  font-weight: 600;
  background-color: transparent;
  color: var(--color-grey-500);
  padding: 0 !important;
}

.search-box button {
  width: 50px;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  margin: 0px;
}

.search-box button img {
  margin-top: 2px;
  margin-bottom: 0px;
}
.icon-buttons {
  gap: 25px;
  display: flex;
  align-items: center;
}

.icon-buttons > a {
  display: flex;
  align-items: center;
}

/* ===== Header Navigation ===== */
.navigation {
  padding: 18px 0;
}

.navigation nav ul {
  gap: 35px;
}

.navigation-left ul li {
  font-weight: 500;
  list-style: none;
}

.navigation-right {
  gap: 20px;
}

.navigation-right a {
  font-weight: 600;
  color: var(--color-grey-500);
}

/* ===== Header area end ===== */

/* ===== Banner area Start ===== */
.banner-area {
  background-color: #f5f5f5;
}

.banner-content {
  max-height: 530px;
  height: 100%;
  overflow: hidden;
}

.left-content {
  color: var(--color-grey-800);
}

.left-content h5 {
  font-weight: 400;
  font-size: 18px;
}

.left-content h3 {
  font-size: 32px;
  font-weight: 600;
}

.left-content h2 {
  line-height: 1;
  font-size: 90px;
  font-weight: 700;
  color: var(--color-blue-800);
}

.left-content h2 span {
  color: var(--color-danger);
}

.left-content p {
  font-size: 16px;
  margin-bottom: 44px;
}

.left-content p span {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-blue-800);
}

.banner-content img {
  max-width: 600px;
  width: 100%;
}

/* ==== Banner area end ===== */

/* ===== Discount product start =====  */
.discount-product-area {
  padding: 90px 0;
  width: 100%;
}

.discount-products {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.single-discount-product {
  width: 32%;
  max-height: 160px;
  height: 100%;
  background-color: var(--color-grey-200);
  padding: 30px;
  gap: 10px;
  margin-bottom: 20px;
}

.discount-left-contents h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  color: var(--color-grey-600);
  line-height: 1;
}

.discount-left-contents h2 {
  font-weight: 600;
  font-size: 22px;
  line-height: 33px;
  color: var(--color-blue-500);
  margin-top: 10px;
  line-height: 0.8;
}

.discount-left-contents > h2 .discount {
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-blue-500);
}

.discount-left-contents > button {
  margin-top: 15px;
}

.single-discount-product img {
  max-width: 140px;
  width: 100%;
}

.middle-product {
  background-image: url("../images/deal-romos.png");
  object-fit: cover;
  height: 160px;
}

.middle-product .discount-left-contents {
  text-align: right;
}

.middle-product .discount-left-contents > p {
  color: var(--color-grey-600);
}
/* ===== Discount product End =====  */

/* ===== Special Offer start ===== */
.special-offer {
  background-image: url("../images/Special-offer-bg.png");
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px 50px;
  margin-bottom: 100px;
}

.special-offer-left {
  gap: 15px;
}

.special-offer-left img {
  max-width: 89px;
  width: 100%;
}

.special-offer-left h3 {
  color: var(--color-grey-900);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}

.special-offer-left h3 small {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-800);
}

/* ===== Special Offer end ===== */

/* ===== Browse Caegories start ===== */
.browse-categories-heading {
  margin-bottom: 50px;
}

.browse-categories {
  width: 100%;
  margin-bottom: 100px;
  gap: 20px;
  flex-wrap: wrap;
}

.browse-categorie {
  width: 23%;
  flex-wrap: wrap;
}

.browse-categorie-img {
  height: 250px;
  width: 100%;
  overflow: hidden;
  padding-bottom: 0;
  background-color: var(--color-grey-100);
  cursor: pointer;
}

.browse-categorie-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-items: center;
  justify-content: center;
}
/* ===== Browse Caegories end ===== */

/* Support Categories start */
.supports {
  width: 100%;
  margin-bottom: 100px;
  gap: 20px;
  flex-wrap: wrap;
}

.support {
  width: 30%;
  flex-wrap: wrap;
  text-align: center;
  padding: 20px 10px;
  cursor: pointer;
}

.support-icon {
  width: 55px;
  margin: auto;
}

.support-icon img {
  width: 100%;
}

.support-content h3 {
  margin-top: 5px;

  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-grey-800);
}

.support-content h5 {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-grey-500);
}

.support-content p {
  margin-top: 15px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

/* Support Categories end */

/* ===== Special Offer Top Fasion start ===== */
.special-offer-top-fasion {
  background-image: url("../images/Special-offer-bg.png");
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px 50px;
  margin-bottom: 100px;
}

.top-fasion-left {
  gap: 15px;
}

.top-fasion-left img {
  max-width: 89px;
  width: 100%;
}

.top-fasion-left h3 {
  color: var(--color-grey-900);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}

.top-fasion-left h3 span {
  color: var(--color-success);
}

.top-fasion-left h3 small {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-800);
}

/* ===== Special Offer Top Fasion end ===== */

/* ===== Latest News start ===== */
.latest-news-heading {
  margin-bottom: 50px;
}

.latest-news {
  width: 100%;
  margin-bottom: 100px;
  gap: 20px;
  flex-wrap: wrap;
}

.single-latest-news {
  width: 23%;
  flex-wrap: wrap;
  position: relative;
}

.single-latest-news-img {
  height: 250px;
  width: 100%;
  overflow: hidden;
  padding-bottom: 0;
  background-color: var(--color-grey-100);
  cursor: pointer;
}

.single-latest-news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-items: center;
  justify-content: center;
}

.news-date {
  position: absolute;
  background-color: var(--color-grey-900);
  top: 20px;
  left: 20px;
  text-align: center;
  padding: 8px 10px;
  color: var(--color-grey-200);
}

.news-content {
  padding: 10px 0;
  width: 100%;
}

.news-content h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-grey-800);
  margin-top: 20px;
}

.news-content p {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-400);
  margin-top: 10px;
  justify-content: justify;
}
/* ===== Latest News end ===== */
/* ===== End Home Page CSS ===== */

/* ====================== Next Page ====================== */
/* ===== Login Page & Registration Page CSS Start ===== */
/* ====================== Next Page ====================== */
.login {
  margin-top: 150px;
  /* width: 100%; */
  flex-wrap: wrap;
}

.login-form {
  width: 40%;
}

.login-heading {
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-grey-400);
}

label,
input {
  /* display: block; */
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-grey-400);
  padding: 4px 0;
}

input {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-grey-400);
  background-color: transparent;
  outline: none;
  border: none;
  border: 1px solid var(--color-grey-300);
  padding: 10px 20px;
  margin-top: 2px;
}

.input-control {
  width: 100%;
}

.form-control {
  margin: 30px 0;
}

.checkbox-control {
  gap: 10px;
  width: fit-content;
}

.forgot-password {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-grey-700);
}

.login-btn {
  width: 100%;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  padding: 15px 0;
  background-color: var(--color-blue-500);
  color: var(--color-grey-200);
  margin-top: 20px;
}

span {
  color: red;
}
/* ===== End Login Registration Page CSS ===== */

/* ====================== Next Page ====================== */
/* ===== Product Page CSS Start ===== */
/* ====================== Next Page ====================== */
.products {
  width: 100%;
  margin-bottom: 100px;
  gap: 15px;
  flex-wrap: wrap;
}

.single-product {
  width: 23%;
  position: relative;
}

.product-img {
  height: 250px;
  width: 100%;
  overflow: hidden;
  padding-bottom: 0;
  cursor: pointer;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discount-badges {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
  color: var(--color-grey-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.discount-badges p {
  border-radius: 10px;
}

.discount-badges p:first-child {
  background-color: var(--color-success);
  padding: 2px 17px;
}

.discount-badges p:last-child {
  background-color: var(--color-danger);
  padding: 2px 12px;
}

.product-content {
  padding: 10px;
  width: 100%;
  text-align: center;
}

.heading {
  font-weight: 500;
  font-size: 22px;
  color: var(--color-grey-600);
}

.product-category {
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: var(--color-grey-400);
}

.product-heading {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-grey-500);
}

.product-old-price {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-grey-400);
  text-decoration-line: line-through;
}

.product-new-price {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-grey-500);
}

.product-price {
  gap: 5px;
}

.product-reviews {
  gap: 2px;
}

.product-reviews i {
  line-height: 200px;
  font-size: 10px;
  color: var(--color-grey-500);
  line-height: 2;
}
/* ===== end product css ===== */

/* ===== Product List view css start ===== */
.product-list-view {
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  flex-direction: row;
  margin-bottom: 100px;
}

.products-list {
  width: 23%;
  flex-direction: column;
  gap: 25px;
}

.list-product {
  width: 100%;
  gap: 20px;
  cursor: pointer;
}

.list-product-img {
  width: 78px;
  height: 79px;
  overflow: hidden;
  background-color: red;
}

.list-product-img {
  cursor: pointer;
}

.list-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-grow: 1;
}

.list-product-content h4 {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-grey-800);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.list-product-price {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-grey-800);
}
/* ===== Product List view css end ===== */

/* Product page product view css start */
.productpage-directory {
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-grey-400);
}

.productpage-details {
  width: 100%;
}

.left-productpage-gellery {
  width: 48%;
  position: relative;
}

.productpage-gellery {
  width: 100%;
  height: 590px;
  overflow: hidden;
  padding-bottom: 0;
  cursor: pointer;
}

.productpage-gellery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.productpage-bottom-gellery {
  width: 100%;
}

.productpage-bottom-gellery img {
  width: 30%;
}

.productpage-discount-badges {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 1;
  color: var(--color-grey-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.productpage-discount-badges p {
  border-radius: 10px;
}

.productpage-discount-badges p:first-child {
  background-color: var(--color-success);
  padding: 2px 17px;
}

.productpage-discount-badges p:last-child {
  background-color: var(--color-danger);
  padding: 2px 12px;
}

/* Product details*/
.productpage-details {
  flex-wrap: wrap;
}

.right-productpage-details {
  padding: 0 25px;
  width: 52%;
}

.productpage-heading {
  font-weight: 600;
  font-size: 32px;
  line-height: 35px;
  color: var(--color-grey-600);
}

.productpage-reviews {
  gap: 2px;
}

.productpage-reviews i {
  line-height: 200px;
  font-size: 15px;
  color: var(--color-danger);
  line-height: 2;
}

.productpage-old-price {
  font-weight: 700;
  font-size: 22px;
  line-height: 33px;
  color: var(--color-grey-400);
  text-decoration-line: line-through;
}

.productpage-new-price {
  font-weight: 600;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-grey-700);
}

.productpage-price {
  gap: 5px;
}

.productpage-description {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-400);
}

.productpage-three-types {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-grey-500);
}

.productpage-sku span,
.productpage-category span,
.productage-tags span {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-grey-700);
}

.product-add-cart {
  gap: 10px;
}

.btn-productpage i {
  padding-right: 10px;
}

/* Product Quantity & Add to Cart Button */
.product-add-to-cart {
  gap: 10px;
}

.product-quantity-wrap {
  flex-wrap: wrap;
}

.product-quantity-input-minus,
.product-quantity-input,
.product-quantity-input-plus {
  border: 1px solid var(--color-grey-300);
  outline: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 22px;
  color: var(--color-grey-600);
  padding: 10px 10px;
  border-radius: 2px;
  background-color: var(--color-white);
  text-align: center;
}

.product-quantity-input {
  width: 50px;
  font-weight: 600;
}
/* Product page css end */

/* ====================== Next Page ====================== */
/* ===== Blog Page CSS Start ===== */
/* ====================== Next Page ====================== */
.blog-area {
  width: 100%;
}

.left-side-blog {
  width: 75%;
}

.latest-blog {
  flex-wrap: wrap;
  gap: 20px;
  row-gap: 30px;
}

.single-latest-blog {
  width: 31%;
}

/* Right Side Start */
.right-side-blog {
  width: 22%;
}

.right-side-blog h2 {
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-grey-500);
}

.blog-categories ul li {
  padding: 12px 0;
}

.blog-categories ul li a {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-grey-400);
}

/* Receipt Blog Post */
.blog-recent-post-area {
  width: 100%;
}

.category-single-recet-post {
  gap: 15px;
}

.single-recent-post-img {
  width: 70px;
  height: 47px;
}

.single-recent-post-img img {
  width: 100%;
  height: 100%;
}
/* ===== Blog Page Css End ===== */

/* ====================== Next Page ====================== */
/* ===== Footer CSS Start ===== */
/* ====================== Next Page ====================== */
.footer-area {
  background-color: var(--color-footer-background);
  color: var(--color-grey-200);
}

.footer {
  padding: 70px 0;
  width: 100%;
}

.footer-top {
  gap: 15px;
  flex-wrap: wrap;
}

.single-footer-column {
  width: 23%;
}

.footer-heading {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.footer-heading {
  margin-bottom: 15px;
}

.single-contact {
  margin-bottom: 15px;
}

.single-contact p:first-child {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.single-contact p:last-child {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-400);
}

.customer-service-menu ul li {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-400);
  padding-bottom: 10px;
}

/* Popular Tag */
.popular-tag ul {
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.popular-tag ul li {
  gap: 15px;
}

.popular-tag ul li a {
  border: 0.5px solid var(--color-grey-600);
  padding: 2px 5px;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
}

/* Subscribe Newsletter */
.subscribe-contents p {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-400);
}

.subscribe-field {
  flex-direction: column;
  align-items: left;
}

.subscribe-email {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-400);
  background-color: transparent;
  outline: none;
  border: none;
  border: 1px solid var(--color-grey-600);
  padding: 10px 20px;
  border-radius: 25px;
}

.btn-subscribe {
  border: 0;
  outline: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 15px;
  border-radius: 25px;
  width: 50%;
}

.btn-subscribe-primary {
  color: var(--color-grey-800);
  background-color: var(--color-blue-500);
  transition: all 300ms ease-in-out;
}

.btn-subscribe-primary:hover {
  color: var(--color-white);
  background-color: var(--color-grey-900);
  transition: all 300ms ease-in-out;
}

.footer-line {
  border: none;
  border-bottom: 0.5px solid var(--color-grey-600);
}
/* Footer Top Section End */

/* Footer Bottom Start */
.footer-bottom > p {
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-blue-500);
}

.footer-bottom > p span {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-600);
}

.social-icons {
  display: flex;
}

.social-icons a {
  color: var(--color-grey-600);
  padding: 0 10px;
  font-size: 20px;
}
/* ===== Footer End ===== */