@font-face {
    font-family: 'Amsterdam';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/amsterdam-two.ttf') format('truetype');
}


    body {
      font-family: "Open Sans", sans-serif !important;
    }
    
    a {
        text-decoration: none !important;
        color: black;
    }

    .custom-header {
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
      padding: 20px 0px;
    }

    .header-container {
      max-width: 100% !important;
      width: 1500px;
      margin: 0 auto;
      padding: 0px 20px;
    }

    .custom-header span {
      font-size: 20px;
      color: black;
      font-weight: 500;
    }

    .header-left, .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .header-center {
      text-align: center;
    }

    img.main-logo {
      width: 170px;
    }

    .logo-text {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 2px;
    }

    .icon-btn {
      font-size: 20px;
      color: #111;
      position: relative;
      cursor: pointer;
    }

    .badge-notification {
      position: absolute;
      top: -8px;
      color: white !important;
      right: -8px;
      background-color: red;
      color: white;
      font-size: 12px !important;
      padding: 2px 7px;
      border-radius: 100px;
    }

    .flag-img {
      width: 26px;
      border-radius: 100%;
    }

    img.header-heart-icon {
      width: 28px;
    }

    img.header-search-icon {
      width: 28px;
    }
    
    img.header-user-icon {
      width: 28px;
    }

    .header-right {
      gap: 15px;
    }

    h5.offcanvas-title {
      font-size: 20px;
      color: black;
      font-weight: 600;
    }

    a.menu-title {
      font-size: 18px;
      color: #444444;
      border-bottom: solid 1px #eaeaea;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    a.menu-title:hover {
      color: #0097B2 !important;
    }

    .dropdown-menu img {
      width: 18px;
      margin-right: 8px;
    }

    .offcanvas-body a {
      font-size: 18px;
      padding: 8px 0;
      display: block;
      text-decoration: none;
      color: #333;
    }

    .offcanvas-body a:hover {
      color: #007bff;
    }

    


/*automotice pade css*/
.web-container {
  max-width: 100% !important;
  width: 1500px;
  margin: 0 auto;
  padding: 90px 20px 0px 20px;
}

.automative-category-main {
  display: grid;
  grid-template-columns: repeat(5, minmax(20%, 1fr));
  gap: 20px;
  justify-items: anchor-center;
}

.category-item {
  text-align: center;
  margin-bottom: 30px;
}
.category-item img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ccc;
  padding: 5px;
  transition: transform 0.3s ease;
}
.category-item img:hover {
  transform: scale(1.05);
}
.category-title {
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #333;
}
.breadcrumb-custom {
  font-size: 18px;
  margin-bottom: 40px;
}
.breadcrumb-custom a {
  color: #2E85FF;
  font-weight: bold;
  text-decoration: none;
}
.breadcrumb-custom span {
  color: #000;
}

.color-section {
      border-radius: 20px;
      background: linear-gradient(to right, #f8fbfe, #fefbfc);
      overflow: hidden;
      padding: 0px !important;;
    }
    .color-text {
      padding: 80px !important;
    }
    .color-text h2 {
      font-weight: 700;
      font-size: 38px;
      background: linear-gradient(to right, #b3a100, #b95125, #614d4c, #006b91);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .color-text h4 {
      font-weight: 600;
      font-size: 31px;
      background: linear-gradient(to right, #778e45, #7c9f91);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      display: inline-block;
    }
    .color-text p {
      font-size: 20px;
      max-width: 500px;
      color: black;
      margin-top: 14px;
    }
    .color-image img {
      width: 100%;
      height: 450px;
      border-radius: 0px 10px 10px 0px;
      object-fit: cover;
    }

/* === IDEA AREA === */
.idea-area .idea-heading {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(to right, #8e2de2, #4a00e0, #1d6b83);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.idea-area .idea-subheading {
  margin-bottom: 20px;
}

.idea-area .idea-description {
  max-width: 900px;
  font-size: 15px;
  line-height: 1.8;
}

/* === CTA AREA === */
.paint-cta-area .paint-cta-box {
  border-radius: 15px;
  background: #f9f9f9;
  padding: 30px;
}

.paint-cta-area .paint-cta-title {
  color: #0818ce;
  font-weight: 700;
}

.paint-cta-area .paint-cta-click {
  color: #00aaff;
  font-weight: 700;
}

.paint-cta-area .paint-cta-desc {
  color: #444;
  font-size: 14px;
}

.paint-cta-area .paint-step-box {
  background: #eaf5ff;
  border: 1px solid #cce4f6;
  border-radius: 10px;
  padding: 15px;
  height: 100%;
}

.paint-cta-area .paint-step-title {
  font-weight: 600;
  color: #0056b3;
}

.paint-cta-area .paint-step-desc {
  font-size: 13px;
  color: #333;
  margin-top: 5px;
}

.paint-cta-area .paint-cta-link {
  font-size: 14px;
}

.paint-header h2 {
      font-size: 55px;
      font-weight: 500;
      background: linear-gradient(to right, #00ff89, #08c76f, #7d4f2a, #b3c731);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }

    .paint-header p {
      color: #7e7e7e;
      font-size: 26px;
      margin-top: 20px;
    }

    .step-title {
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 8px;
    }

    .paint-step-card {
      border-radius: 20px;
      text-align: center;
      height: 100%;
      background: linear-gradient(to right, #c7d8cf4a, #dde6c740);
    }

    .paint-step-content {
      padding: 25px 20px;
    }

    .step-box-title {
      margin-bottom: 15px;
      color: #000000;
      font-size: 16px;
    }

    .paint-step-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 15px;
    }

    .paint-subtext {
      color: #777777;
      font-size: 16px;
    }

    .paint-footer {
      text-align: center;
      font-size: 20px;
      margin-top: 52px !important;
      color: #555555;
    }

    .for-primming-box {
      height: 190px;
    }

    .paint-step-card-two {
      border-radius: 150px;
      text-align: center;
      height: 100%;
      background: linear-gradient(to right, #c7d8cf4a, #dde6c740);
    }
    .paint-step-content-two {
      padding: 20px 15px;
    }
    
    .step-2-main {
        display: grid;
        grid-template-columns: repeat(7, minmax(auto, 1fr));
        gap: 20px;
    }

    .step-bottom-number {
      text-align: center;
      font-size: 16px;
      background: white;
      width: 28px;
      height: 28px;
      justify-self: center;
      margin-top: -8px;
      font-weight: 700;
      border-radius: 50px;
      align-content: center;
      margin-left: auto;
      margin-right: auto;
    }

    .step-box-title-two {
      margin-bottom: 10px;
      color: #000000;
      width: 75%;
      justify-self: center;
      font-size: 16px;
      line-height: 20px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .paint-subtext-two {
      color: #777777;
      font-size: 13px;
      width: 90%;
      justify-self: center;
      line-height: 19px;
      margin-left: auto;
      margin-right: auto;
    }

    



.section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.content-block {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 70vh;
  border-radius: 0px;
  overflow: hidden;
  z-index: -1;
  transition: transform 0.4s ease;
}

.content-block:hover {
  transform: scale(1.02);
}

.content-main {
  background: rgb(255 255 255);
  padding: 40px 30px;
  width: 80%;
  justify-self: center;
  margin-top: -115px;
  text-align: center;
  height: 220px;
  align-content: center;
}

h2.homecolor-title {
    font-size: 40px;
    line-height: 94px;
    color: #486638;
    font-weight: 300;
    margin-bottom: 22px;
    font-family: 'Amsterdam' !important;
}

p.home-colot-subtitle {
    font-size: 18px;
    line-height: 1.4;
    color: #486638;
    margin-bottom: 0px;
}

h2.automotive-title {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #26404E;
}

p.automotive-subtitle {
    font-size: 18px;
    line-height: 1.4;
    color: #26404E;
    margin-bottom: 0px;
}


.start-with-an-idea.text-center {
    padding: 90px 30px 0px 30px;
}

h1.startwith-gradient-heading {
    background: linear-gradient(to right, #2e00b8, /* Deep blue/purple on the left */ #822d66, /* Maroon/magenta */ #805634, /* Brownish tone */ #607080, /* Grayish */ #3b78b4 /* Blue on the right */);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 75px;
    display: inline-block;
}

.startwith-subtext {
    color: #555 !important;
    font-size: 25px !important;
    margin-top: 18px;
}

p.startwith-text {
    font-weight: 300 !important;
    color: #6d6d6d;
    margin-top: 85px;
    font-size: 16px;
}


.paint-process {
      margin: 90px 30px 0px 30px;
      padding: 25px 25px 25px 70px;
      background-color: #F4F4F4;
      border-radius: 12px;
    }

    .paint-content {
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .paint-intro {
      width: 46%;
      display: flex;
      gap: 45px;
    }

    .paint-heading {
      font-size: 28px;
      font-weight: bold;
      color: #001c64;
      line-height: 1.3;
      width: 49%;
    }

    .paint-heading .highlight {
      color: #3cb7e7;
    }

    .paint-description {
      font-size: 1rem;
      margin-top: 10px;
      color: #223a70;
      width: 49%;
    }

    .divider {
      width: 5px;
      height: 80px;
      background: #b8dff2;
      margin: 0 10px;
    }

    .paint-steps {
      display: flex;
      flex: 3 1 600px;
      gap: 20px;
      width: 54%;
    }

    .paint-step {
      background-color: #E6F2FA;
      width: 33.33%;
      border: 2px solid #9DC9E7;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
    }

    .paint-step h4 {
      font-size: 18px;
      font-weight: bold;
      color: #0D2A67;
    }

    .paint-step p {
      font-size: 14px;
      color: #2C4888;
      margin-bottom: 0;
    }

    .paint-step img {
      width: auto;
      height: 70px;
    }

.obsessed-content\=part {
    height: 450px;
}


/*Footer Css*/
.site-footer {
  background: #f8f8f8;
  font-family: 'Helvetica Neue', sans-serif;
  color: #222;
  padding: 85px 0px 30px 0px;
  border-top: 1px solid #e0e0e0;
  margin-top: 90px;
}

.footer-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0px 20px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}



.footer-col h4 {
  font-weight: 700;
  margin-bottom: 20px;
  color: black;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 20px;
  color: #3d3d3d;
}

h4.footer-contact {
    margin-top: 98px;
}

h4.footer-payment {
    margin-top: 40px;
}

h4.footer-security {
    margin-top: 40px;
}

.social-icons {
  margin-top: 10px;
}

.social-icons i {
  font-size: 18px;
  margin-right: 5px;
  color: #ffffff;
  transition: 0.3s;
  background: #878787;
  padding: 5px;
  border-radius: 100px;
  width: 35px;
  text-align: center;
  align-content: center;
  height: 35px;
}

.social-icons i:hover {
  color: #000;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  padding-top: 30px;
  border-top: 1px solid #ddd;
  margin-top: 160px;
  flex-wrap: wrap;
}




.for-repair-box {
    flex: 0 0 auto;
    width: 14.28% !important;
}

.step-title-main {
    font-size: 22px;
    margin-bottom: 50px;
    margin-top: 90px !important;
}








.filter-sidebar {
  width: 25%;
  background: white;
  border: 1px solid #ddd;
  padding-bottom: 15px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  padding: 46px 36px 40px 36px;
  border-bottom: 1px solid #ddd;
}

.filter-header h2 {
  font-size: 33px;
  margin: 0;
  font-weight: 500;
}

a.clear-all {
    color: #0097B2;
    font-size: 18px;
    align-content: center;
    line-height: 18px;
    text-decoration: none;
}

.filter-group {
  border-bottom: 1px solid #ddd;
}

.filter-title {
    padding: 20px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 23px;
    color: #3F464B;
    font-weight: bold;
    border-bottom: solid 1px #E1E1E1;
}

.filter-options {
    padding: 15px 36px;
    background: #FAFAFA;
}

.filter-options label {
    display: flex;
    font-size: 20px;
    margin: 16px 0;
    cursor: pointer;
}

p.filter-label {
    margin: 0;
}

input[type="radio"], input[type="checkbox"] {
  height: 31px;
  margin-right: 8px;
  width: 31px;
}

.arrow {
  transition: transform 0.3s ease;
}

.filter-title.active .arrow {
  transform: rotate(0deg);
}

.filter-title:not(.active) .arrow {
  transform: rotate(180deg);
}

.filter-options.hidden {
  display: none;
}



/* Main container */
.filter-data-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    font-family: Arial, sans-serif;
    border-bottom: solid 1px #F1F1F1;
    margin-bottom: 60px;
}

/* Left section */
.filter-data-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-data-count {
    font-size: 22px;
    color: #333;
}

.filter-data-tag {
    color: #0097B2;
    font-size: 21px;
    cursor: default;
}

.filter-data-remove {
    cursor: pointer;
    margin-left: 4px;
}

/* Right section */
.filter-data-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    color: #333333;
}



/* Dropdown styling */
.filter-data-dropdown {
    border: none;
    cursor: pointer;
    padding: 4px 4px 4px 8px;
    background: url('data:image/svg+xml;utf8,<svg fill="black" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 6px center;
    background-size: 12px;
    appearance: none;
    color: #333333;
}

.filter-data-dropdown:focus {
    outline: none;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .filter-data-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .filter-data-right {
        width: 100%;
        justify-content: space-between;
    }
}

.listing-main {
    display: flex;
    gap: 40px;
}
.prodcut-listing-main {
    width: 75%;
}
svg.product-wishlisticon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 26px;
    height: auto;
}
.prodcut-listing-main h2 {
    font-size: 35px;
}


.product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        gap: 20px;
    }

    .product-card {
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        border: 1px solid #eee;
        padding: 40px 30px;
        text-align: center;
        transition: 0.3s ease;
        background: white;
        position: relative;
    }

    .product-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .product-img img {
        max-width: 100%;
        height: auto;
    }

    .product-title {
        font-size: 21px;
        font-weight: 400;
        margin: 15px 0 18px 0px;
        color: #000;
        line-height: 28px;
    }

    .size-label {
        display: inline-block;
        border-radius: 20px;
        padding: 4px;
        font-size: 11px !important;
        letter-spacing: 1px;
        font-weight: bold !important;
        margin: 4px 3px;
        cursor: pointer;
        transition: 0.3s ease;
        width: 34px !important;
        height: 34px;
        align-content: center;
        background: #C7D8D0;
        background: linear-gradient(90deg, rgba(199, 216, 208, 1) 0%, rgba(248, 255, 228, 1) 100%);
    }

    .product-card span {
        font-weight: 400;
        font-size: 15px;
    }

    .price {
        font-size: 17px;
        font-weight: bold;
        margin-top: 18px;
        color: #3F464B;
        font-family: inter;
    }

    span.mrp {
        text-decoration: line-through;
        font-family: 'Inter';
        font-weight: 400;
        font-size: 13px;
        color: #737373;
    }

    span.discount {
        color: #0097B2;
        font-size: 13px;
        font-family: 'Inter';
    }

    .select-btn {
        display: block;
        margin: 45px auto 0;
        padding: 16px 72px;
        border: 1px solid #000;
        line-height: 17px;
        border-radius: 5px;
        background: transparent;
        font-size: 17px;
        color: #3F464B;
        transition: 0.3s ease;
    }

    .select-btn:hover {
        background: #d5e2cf;
        border-color: #b4c7a7;
    }




.container-1500 {
      max-width: 1500px;
      margin: auto;
      padding: 20px;
    }
    .breadcrumb {
      background: transparent;
      font-size: 14px;
    }
    .offer-badge {
        position: absolute;
        top: -15px;
        right: -15px;
        color: black;
        padding: 11px 12px;
        border-radius: 50px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 600;
        text-align: center;
        background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
        font-family: inter;
    }
    .product-image {
      border: 1px solid #eee;
      border-radius: 10px;
    }
    .thumbnail img {
      border: 1px solid #eee;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
      width: 16.66%;
    }
    .thumbnail img:hover {
      border-color: #333;
    }
    /* Product Detail */
    .product-detail-title {
      font-size: 28px;
      font-weight: 400;
      margin-bottom: 25px;
      margin-top: 35px;
    }
    .product-detail-rating {
      font-size: 24px;
      color: #f9a825;
    }
    small.product-rating-title {
      margin-left: 10px;
      font-size: 17px;
      margin-top: 5px;
    }
    .product-detail-price {
      font-size: 26px;
      font-weight: 600;
      color: #111;
      font-family: 'Inter';
    }
    .product-detail-old-price {
      text-decoration: line-through;
      color: #737373;
      font-size: 22px;
      margin-left: 8px;
      font-family: 'Inter';
    }
    .product-rating-main {
      margin-bottom: 20px;
    }
    svg.product-detail-wishlist {
      width: 19px;
      height: 19px;
    }
    .product-detail-wishlist-main {
      background: #F5F5F5;
      padding: 10px 15px;
      align-items: anchor-center;
      border-radius: 5px;
      margin-left: auto;
    }
    p.product-detail-wishlist {
      margin: 0;
      font-size: 16px;
      line-height: 16px;
      color: #202020;
    }

    p.pincode-title {
      font-size: 18px;
      color: black;
      margin-bottom: 10px;
    }

    p.pincode-desc {
      color: #646464;
      font-size: 16px;
      font-weight: 400;
    }
    small.text-success {
      color: #08BF08 !important;
      font-size: 16px;
      font-weight: 400;
    }
    .pincode-text input.form-control {
      font-size: 16px;
      font-family: 'Inter';
      color: black;
      height: 45px;
      padding: 15px;
      margin-right: 10px;
      border-radius: 5px !important;
    }
    button.pincode-btn {
      font-size: 16px;
      line-height: 16px;
      font-weight: 400;
      padding: 10px;
      height: 45px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      border: unset;
    }
    .variation-color {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        margin-left: 10px;
    }

    /* Buttons */
    .product-detail-action-btn {
      border: 1px solid #ddd;
      background: #fff;
      font-size: 14px;
      padding: 6px 12px;
      border-radius: 5px;
      margin-left: 10px;
      cursor: pointer;

    }
    .product-detail-action-btn:hover {
      background: #f5f5f5;
    }

    /* Pin code box */
    .product-detail-pincode {
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 8px;
      background: #fafafa;
      font-size: 14px;
      text-align: center;
    }
    .product-detail-pincode input {
      border-radius: 6px 0 0 6px;
    }

    .whish-compare-btn-box.ms-auto {
      display: flex;
      gap: 10px;
    }

    .main-price-box {
      display: flex;
    }
    

    /* Paint calculator */
    .product-detail-calculator {
      padding: 15px;
      border-radius: 8px;
      text-align: center;
      height: 100%;
      align-content: center;
    }
    .product-detail-calculator button {
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 32px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
    }
    .quantity-btn {
      align-content: end;
    }
    input.quantity-value {
        font-size: 18px;
        line-height: 18px;
        font-weight: 500;
        padding: unset;
        height: 46px;
        border: none;
        width: 40px !important;
    }
    .Product-attributes {
        display: grid;
        grid-template-columns: repeat(2, [col-start] 1fr);
        gap: 10px;
    }
    .select-attributes {
        display: grid;
        grid-template-columns: repeat(2, [col-start] 1fr);
        gap: 10px;
    }
    .product-detail-quantity button {
        font-size: 20px;
        line-height: 21px;
        font-weight: 500;
        padding: unset;
        background: white;
        border: none;
    }
    p.paint-calculator-title {
      font-size: 18px;
      color: black;
    }

    label.productdetail-filter-title {
      font-size: 18px;
      margin-bottom: 12px;
      color: black;
      display: flex;
      align-items: center;
    }
    label.productdetail-filter-title span {
      color: #979797;
    }
    .select-size-btn button {
      width: 100%;
      font-size: 18px;
      color: #707070;
      background: white;
      border: solid 1px #C8C8C8;
      border-radius: 5px;
      padding: 14px;
      line-height: 18px;
    }
    input.filter-field.form-control {
      font-size: 18px;
      color: #707070;
      background: white;
      border: solid 1px #C8C8C8;
      border-radius: 5px;
      line-height: 18px;
      padding: 12px 15px;
    }
    .cart-option-main {
      display: flex;
      justify-content: space-between;
    }

    /* Size Selector */
    .product-detail-size button {
      border: 1px solid #ccc;
      padding: 6px 16px;
      border-radius: 5px;
      margin-right: 8px;
      background: #fff;
      transition: all 0.3s;
    }
    .product-detail-size button.active,
    .product-detail-size button:hover {
      border-color: #7CB342;
      background: #e8f5e9;
    }

    /* Quantity */
    .product-detail-quantity {
      display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    color: #707070;
    background: white;
    border: solid 1px #C8C8C8;
    border-radius: 5px;
    }
    
    label.quantity-title {
      font-size: 18px;
      margin-bottom: 12px;
      color: black;
    }

    /* Cart + Buy buttons */
    .product-detail-cart-btn {
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      border: unset;
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
    }
    .product-detail-buy-btn {
      background: #ffffff;
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      border: unset;
      letter-spacing: 1.5px;
      color: black;
      border: solid 1px #c6d5a2;
    }

    .product-detail-main {
      display: flex;
      gap: 60px;
      padding: 60px 20px 0px 20px;
    }

    .product-detail-left {
      width: 45%;
    }

    .product-detail-right {
      width: 55%;
    }

    .productdetailsecondmain {
      display: flex;
      gap: 40px;
      justify-content: right;
      height: 500px;
    }

    .productdetail-img {
      width: 45%;
    }
    .productdetail-content {
      width: 55%;
      align-content: center;
    }



    .third-title {
      font-size: 32px;
      margin-bottom: 40px;
      font-weight: bold;
    }

    .third-title span {
      color: #ff6600; /* highlight color */
    }

    .third-slider .third-slide {
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
      padding: 10px;
    }

    .third-slider .third-slide img {
      width: 100%;
      border-radius: 12px;
    }

    /* Center slide bigger */
    .third-slider .slick-center {
      transform: scale(1) !important;
      opacity: 1;
      z-index: 2;
    }

    /* Side slides smaller & dimmed */

    .third-slider h3 {
      margin-top: 15px;
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      background: linear-gradient(90deg, rgba(97, 93, 0, 1) 40%, rgba(96, 42, 10, 1) 50%, rgba(67, 101, 115, 1) 72%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 35px;
    }

    /* Dots */
    .slick-dots {
      margin-top: 20px;
    }

    .slick-dots li button:before {
      font-size: 14px;
      color: #000;
    }

    .slick-dots li.slick-active button:before {
      color: #ff6600;
    }
    .slick-initialized .slick-slide {
      transform: scale(0.7);
    }
    
    .third-slider .slick-center h3 {
        transform: scale(1) !important;
    }
    
    .slick-initialized .slick-slide h3 {
        transform: scale(1.3);
    }
    h2.measured-title {
        font-size: 23px;
        font-weight: 600;
        margin-top: 45px;
    }
    p.measured-desc {
        font-size: 19px;
        color: #545454;
    }


    /* Heading */
    .fourth-section-title {
      font-size: 48px;
      font-weight: 400;
      text-align: center;
      background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 35px;
      line-height: 55px;
      width: fit-content;
      justify-self: center;
    }

    .fourth-section-subtext {
      font-size: 21px;
      max-width: 1000px;
      margin-bottom: 52px;
      color: #40412B;
      font-weight: 400;
      text-align: center;
      width: fit-content;
      justify-self: center;
    }

    /* Main Content */
    .fourth-section-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    /* Left Features */
    .fourth-section-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 65px 35px;
      text-align: center;
      padding: 0px 64px;
    }

    .fourth-section-feature {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      color: #333;
    }

    .fourth-section-feature img {
      width: 98px;
      margin-bottom: 15px;
    }

    /* Right Image */
    .fourth-section-image img {
      width: 100%;
    }

    /* Responsive */
    @media(max-width: 992px) {
      .fourth-section-content {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .fourth-section-features {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width: 600px) {
      .fourth-section-features {
        grid-template-columns: 1fr;
      }
    }


li.breadcrumb-item a {
    font-size: 18px;
    font-family: 'AbeeZee', sans-serif;
    color: #5A5A5A;
    text-decoration: unset;

}
li.breadcrumb-item.active {
    font-size: 18px;
    font-family: 'AbeeZee', sans-serif;
    color: #000000;
    text-decoration: unset;
}

h2.productdetail-content-title {

    font-size: 65px;
    font-weight: 400;
    background: linear-gradient(90deg, rgba(66, 83, 0, 1) 0%, rgba(37, 157, 0, 1) 50%, rgba(121, 162, 0, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

p.productdetails-contnet-desc {

    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin-top: 18px;
    color: #545454;
}

.productdetail-img img {

    right: 0;
    position: absolute;
}

.third-section-title h2.section-title {
    font-size: 48px;
    font-weight: 400;
    text-align: center;
    background: linear-gradient(90deg, rgba(0, 119, 171, 1) 0%, rgba(132, 68, 3, 1) 50%, rgba(152, 111, 0, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 90px;
    line-height: 65px;
    width: fit-content;
    justify-self: center;

}

.fourth-section-leftside {
    align-content: center;
    height: 100%;
    background: linear-gradient(90deg, rgba(237, 243, 240, 1) 0%, rgba(252, 255, 246, 1) 100%);
}

.fourth-section-feature p {
    font-size: 19px;
    line-height: 25px;
    margin-bottom: 0px;
    color: #393434;
}



.fifth-section {
      background: linear-gradient(to right, #F2F9FF, #EEE6EB);
      color: #111;
      padding: 65px 20px 80px 20px;
    }

    .fifth-section .container {
      max-width: 1500px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
    }

    .fifth-section .section-header {
      width: 100%;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 40px;
      background: linear-gradient(to right, #f1c40f, #16a085, #2980b9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .fifth-section .detail-box {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .fifth-section .detail-icon {
      width: 33px;
    }

    .fifth-section .detail-content h4 {
      margin-bottom: 10px;
      font-weight: 600;
      font-size: 20px;
    }

    .fifth-section .detail-content p {
      font-size: 20px;
      color: #333333;
      margin: 0;
    }

    @media(max-width: 768px) {
      .fifth-section .detail-box {
        width: 100%;
      }
    }

.fifth-section-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 65px 40px;
    padding: 0px 150px;
}

h2.fifth-section-title {
    font-size: 48px;
    font-weight: 400;
    text-align: center;
    background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 100px;
    line-height: 62px;
    width: fit-content;
    justify-self: center;
}




    .compare-section .section-header {
      font-size: 38px;
      font-weight: 400;
      text-align: center;
      background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 30px;
      line-height: 48px;
      width: fit-content;
      justify-self: center;
    }

    /* Default desktop grid */
    .compare-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    .compare-product-card {
      background: #fff;
      text-align: center;

    }

    img.compare-product-img {
      display: block;
      width: 90%;
      justify-self: center;
    }

    .compare-product-card h3 {
      font-size: 22px;
      font-weight: 400;
      line-height: 31px;
      margin-bottom: 16px;
    }

    .compare-product-card .price {
      font-size: 18px;
      font-weight: bold;
      font-family: 'Inter';
      color: #3F464B;
      margin: 0px;
      border-bottom: solid 1px #EFEFEF;
      padding-bottom: 48px;
    }

    .compare-product-card .old-price {
      text-decoration: line-through;
      font-size: 14px;
      font-weight: 400;
      font-family: 'Inter';
      color: #737373;
      margin: 0px;
    }

    .compare-product-card .discount {
      font-size: 14px;
      font-weight: 400;
      font-family: 'Inter';
      color: #0097B2;
      margin: 0px;
      margin-left: 5px;
    }

    .product-meta {
      margin-top: 50px;
      font-size: 15px;
    }

    .product-meta h4 {
      font-weight: bold;
      margin: 10px 0 5px;
    }

    /* Mobile: grid off */
    @media (max-width: 767px) {
      .compare-grid {
        display: block; /* Let Slick handle layout */
      }
    }

h4.product-meta-title {
    font-size: 22px;
    line-height: 31px;
    font-weight: bold;
    color: #545454;
    margin: 8px 0px 0px 0px;
}

p.product-meta-desc {
    font-size: 22px;
    line-height: 31px;
    font-weight: 400;
    color: #545454;
    margin: 8px 0px 0px 0px;
}

img.product-meta-img {
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

.related-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 20px;
}

h2.related-product-title {
    font-size: 30px;
    margin-bottom: 55px;
}




/* Titles */
.faq-title {
    text-align: center;
    font-size: 56px;
    font-weight: 400;
    margin-bottom: 80px;
}

.faq-subtitle {
    margin: 0 auto 20px;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 70px;
}

.faq-note {
    color: #0097B2;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 80px;
}

.faq-icon {
  margin-right: 6px;
}

/* FAQ Box */
.faq-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 16px 46px 56px 46px;
}

.faq-header {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #009688;
}

/* FAQ Items */
.download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    border-top: 1px solid #eee;
}

.faq-item:first-child {
  border-top: none;
}

.faq-file {
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq-file i {
  color: #444;
  font-size: 18px;
}

.faq-download {
  font-size: 20px;
  color: #009688;
  text-decoration: none;
  transition: color 0.3s ease;
}

.faq-download:hover {
  color: #005f4f;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-title {
    font-size: 28px;
  }

  .faq-subtitle {
    font-size: 14px;
  }

  .faq-file {
    font-size: 14px;
  }
}


.download-file {
    display: flex;
    gap: 18px;
}

img.download-file-img {
    width: fit-content;
    height: 32px;
}

h3.donwload-file-title {
    font-size: 18px;
    margin: 0;
    align-content: center;
    line-height: 25px;
    font-weight: 400;
}

.faq-header span {
    font-size: 18px;
}

section.faq-section-main {
    background: linear-gradient(160deg, rgba(245, 250, 254, 1) 0%, rgba(241, 236, 240, 1) 100%);
    padding: 80px 0px 100px 0px;
    margin-top: 90px;
}



.cart-area {
    display: flex;
    gap: 50px;
  }
  .cart-product {
    width: 70%;
    margin-top: -45px;
  }
  .cart-summary {
    width: 30%;
  }
  h5.cart-product-title {
    font-size: 25px;
    font-weight: 400;
    color: black;
    margin-bottom: 10px;
  }
  p.cart-product-cat {
    font-size: 15px;
    font-weight: 600;
    color: #545454;
    margin-bottom: 16px;
  }
  select.form-select.cart-qty {
    font-size: 18px;
    height: 45px;
    border-radius: 5px;
    width: 140px;
    border: 1px solid #c2c2c2;
    padding: 0px 15px;
    color: #7F7F7F;
  }
  .twocolumn {
    display: flex;
    gap: 30px;
    justify-content: space-between;
  }
  h5.color-shade-title {
    font-size: 15px;
    font-weight: 400;
    color: #545454;
    margin-bottom: 16px;
  }
  .color-shade-box {
    width: 110px;
    height: 80px;
    border-radius: 5px;
    padding: 2px 5px;
    background: #ECEBE5;
    align-content: end;
    text-align: center;
  }
  p.color-shade-content {
    font-size: 15px;
    font-weight: 400;
    color: #545454;
    margin: 0;
  }
  p.returntext {
    font-size: 16px;
    font-weight: 400;
    color: #545454;
    margin-bottom: 0px;
  }
  .return-text-main {
    display: flex;
    gap: 8px;
    margin-right: auto;
    margin-top: 15px;
  }
  img.returnimg {
    width: 21px;
    height: fit-content;
  }
  .cart-product-imgpart {
    width: 20%;
    margin: 0;
    padding: 0px 10px 0px 0px;
  }
  .cart-product-detail {
    width: 50%;
    padding: 0px 10px 0px 10px;
  }
  .cart-product-btnpart {
    width: 30%;
    margin: 0px;
    padding: 0px 0px 0px 10px;
  }
  .cart-product-box {
    display: flex;
    flex-wrap: wrap;
  }
  .cart-delete a {
    text-decoration: unset !important;
    color: #0097B2 !important;
    font-size: 15px;
  }
  .placeorder{
    font-size: 18px;
    line-height: 16px;
    font-weight: 500;
    padding: 18px 40px;
    border-radius: 5px !important;
    background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
    border: unset;
    letter-spacing: 1.5px;
    border: solid 1px #c6d5a2;
    margin-bottom: 70px !important;
  }
  h6.summary-return-label {
    font-size: 17px;
    color: #545454;
    margin-bottom: 10px;
  }
  p.summary-return-desc {
    font-size: 17px;
    color: #767676;
    margin-bottom: 20px;
    line-height: 22px;
  }
  a.summary-return-btn {
    font-size: 17px;
    color: #27404E;
    line-height: 22px;
    text-decoration: unset;
    font-weight: bold;
  }
  small.small-text {
    color: #6C2575;
    font-size: 12px;
  }
  .innercolumn1 .me-3 {
      display: flex;
      gap: 20px;
  }
  .cart-product-detail {
    margin-top: 0;
    align-self: center;
  }
  .cart-card {
    border: 0;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  .cart-card {
      border-bottom: 1px solid #ddd;
      margin: 0px;
      padding: 0px;
      padding-top: 45px;
      padding-bottom: 40px !important;
      margin-bottom: 0 !important;
      position: relative;
      align-items: flex-start !important;
  }
  .cart-card .col-md-3 {
      margin: 0 !important;
  }
  .cart-amountsection {
      margin-top: 55px;
  }
  .cart-price-tag {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid #000;
    border-radius: 25px;
    font-weight: 600;
    font-family: 'Inter';
    font-size: 18px;
  }
  h5.cart-order-title {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
    color: black;
  }
   .cart-price-old {
      text-decoration: line-through;
      color: #545454;
      font-family: inter;
      font-weight: 400;
      font-size: 16px;
    }
    .cart-amountsection {
      margin-top: 55px;
      display: flex;
      justify-content: end;
    }
    .cart-price-tag {
      display: inline-block;
      padding: 6px 16px;
      border: 2px solid #000;
      border-radius: 25px;
      font-weight: 600;
    }
    p.cart-discount {
      color: #545454;
      font-family: inter;
      font-weight: 400;
      font-size: 16px;
      margin-bottom: 12px;
    }
    .shade-box {
      width: 40px;
      height: 40px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-right: 8px;
    }
    .shade-grey { background: #cfd2d6; }
    .shade-deserted { background: #d9d2c7; }
    .shade-thermal { background: #d7d2c3; }

    .summary-box {
      border: 1px solid #b5b5b5;
      border-radius: 5px;
      padding: 30px 35px;
      background: #fff;
    }
    span.summary-label {
      font-size: 18px;
      color: black;
    }
    .summary-value{
      font-size: 18px;
      font-weight: 400;
      color: #27404E;
    }
    span.summary-total-label {
      font-size: 20px;
      margin-bottom: 25px;
      font-weight: bold;
      color: black;
    }
    span.summary-tatal-value {
      font-size: 20px;
      margin-bottom: 25px;
      font-weight: bold;
      color: black;
    }
    .innercolumn {
        flex-direction: column;
        justify-content: left !important;
        text-align: left !important;
    }
    .innercolumn1 {
        width: 100%;
    }
    span.innerliter {
      display: flex;
      align-items: center;
      border: 1px solid #c2c2c2;
      width: 140px;
      height: 45px;
      justify-content: center;
      gap: 6px;
      border-radius: 5px;
    }
    .innerliter p {
      margin-bottom: 0;
      color: #7F7F7F;
      font-size: 14px;
      letter-spacing: 1px;
    }





    .shade-container {
      max-width: 1500px;
      width: 100%;
      text-align: center;
      transition: background 0.3s ease;
      padding: 30px !important;
    }

    h3.shade-product-title {
      font-size: 20px;
      margin-bottom: 25px;
      color: black;
    }

    /* Color Picker Row */
    .color-picker {
      position: relative;
    }

    .colors {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      justify-content: flex-start;
    }

    .colors::-webkit-scrollbar {
      height: 8px;
    }
    .colors::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 5px;
    }
    .colors::-webkit-scrollbar-track {
      background: #f5f5f5;
    }

    .shade-color {
      flex: 0 0 auto;
      width: 70px;
      height: 35px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .shade-color:hover {
      transform: scale(1.1);
    }

    /* Indicator (blue triangle) */
    .indicator {
      position: absolute;
      top: 45px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 10px solid blue;
      transition: left 0.3s;
    }

    /* Selected Text + Arrows */
    .selected-box {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin-top: 50px;
    }

    .selected-box span {
      font-size: 20px;
      font-weight: 600;
    }

    .shade-arrow {
      border: none;
      background: #f5f5f5;
      padding: 8px 14px;
      font-size: 17px;
      border-radius: 100px;
      transition: background 0.2s;
    }
    .shade-arrow:hover {
      background: #ddd;
    }

    /* Example shade-based styles */
    .shade-red .selected-box span { color: #e60000; }
    .shade-yellow .selected-box span { color: #d4b100; }
    .shade-blue .selected-box span { color: #0056d4; }
    .shade-green .selected-box span { color: #118c5b; }
    .shade-violet .selected-box span { color: #6a0dad; }
    .shade-brown .selected-box span { color: #5a381e; }

    /* Note */
    p.shade-note {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 0px;
      margin-top: 50px;
    }

    .shade-note a {
      font-size: 16px;
      font-weight: bold;
      text-decoration: unset;
    }

    .note a {
      color: teal;
      font-weight: bold;
      text-decoration: underline;
    }

.color-picker-section {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: solid 1px #e7e7e7;
}

span#selected-color {
    font-size: 18px;
    font-weight: 400;
    color: #212121;
}

.shade-card-color {
    height: 300px;
    background: #d9e0cd;
    margin-bottom: 10px;
    padding: 25px 30px;
    align-content: end;
    border-radius: 5px;
}
h4.shade-card-title {
    font-size: 25px;
    color: black;
}

.color-shade-list-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 50px;
}

.shade-meta {
    display: flex;
    justify-content: space-between;
}




/* Box Style */
    .shade-option-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 90px;
      height: 42px;
      border: 1px solid #bbb;
      border-radius: 8px;
      background: #fff;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: 0.2s;
    }
    .shade-option-box:hover {
      border-color: #333;
    }

    /* Quantity Selector */
    .shade-qty-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 8px;
      background: #fff;
      font-size: 18px;
      width: 90px;
      height: 42px;
      border: 1px solid #bbb;
    }

    .shade-qty-btn {
      flex: 1;
      text-align: center;
      cursor: pointer;
      font-weight: bold;
      user-select: none;
      padding: 4px 2px 6px 2px;
      transition: background 0.2s;
    }

    .shade-qty-btn:hover {
      background: #f0f0f0;
      border-radius: 5px;
    }

    .shade-qty-value {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
    }


 /* Main search container */
    .shade-search {
      display: flex;
      align-items: center;
      width: 420px;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 50px;
      padding: 10px 18px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }

    /* Input field */
    .shade-search input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 18px;
      padding: 0px 12px;
      background: transparent;
      color: #333;
    }

    /* Icons */
    .shade-search .icon {
      font-size: 18px;
      color: #888;
      cursor: pointer;
    }

.shade-meta-select {
    display: flex;
    gap: 10px;
    width: 100%;
}
.shade-meta-left {
    width: 50%;
}
.shade-meta-right {
    width: 50%;
}

.shade-option-box p {
    margin-bottom: 0;
    color: #7F7F7F;
    font-size: 13px;
    letter-spacing: 1px;
}
.shade-meta-left {
    width: 46%;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
.shade-meta-right {
    width: 46%;
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
}
.shade-option-box img {
    width: 12px;
}




/*CHEKOUT PAGE CSS*/
    .checkout-main
    {
      display: flex;
    }
    .checkout-info-part {
      padding-right: 40px;
    }
    .checkout-section-title{
      font-size: 20px;
      font-weight: 600;
      color: black;
      margin-bottom: 18px;
      padding-bottom: 10px;
      border-bottom: solid 1px #e1e1e1;
    }
    .checkout-section-sub-title {
      font-size: 20px;
      font-weight: 500;
      color: black;
      margin-bottom: 18px;
    }
    label.form-label {
      font-size: 16px;
      font-weight: 500;
      color: #313131;
    }
    .shipping-label {
      font-weight: 400;
      font-size: 16px;
      color: #313131;
    }
    .form-control {
      display: block;
      width: 100%;
      height: 45px;
      padding: 15px;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--bs-body-color);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--bs-body-bg);
      background-clip: padding-box;
      border: var(--bs-border-width) solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    .form-select {
      --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
      display: block;
      height: 45px;
      width: 100%;
      padding: 0px 15px;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #595f69;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--bs-body-bg);
      background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
      background-repeat: no-repeat;
      background-position: right .75rem center;
      background-size: 16px 12px;
      border: var(--bs-border-width) solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    .form-control,.form-select{
      border-radius:10px;
      padding:12px 14px;
    }
    /* Shipping method option */
    .ship-option {
      border: 1px solid #d1d5db;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: .2s;
      background: white;
      margin-bottom: 15px;
    }
    .ship-option:hover{
      border-color:#0097b2;
    }
    .ship-option.active{
      border-color: #0097b2;
      background: #0097b203;
    }
    .ship-left{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .ship-radio{
      width:18px;
      height:18px;
      border:2px solid #9ca3af;
      border-radius:50%;
      display:inline-block;
      position:relative;
      flex:0 0 18px;
      margin-top:4px;
    }
    .ship-option.active .ship-radio{
      border-color:var(--brand);
    }
    .ship-option.active .ship-radio::after{
      content:"";
      position:absolute;
      inset:3px;
      border-radius:50%;
      background:var(--brand);
    }
    .ship-price {
      white-space: nowrap;
      font-weight: 400;
      font-size: 16px;
      color: #000000;
    }
    .ship-meta {
      font-weight: 400;
      font-size: 16px;
      color: #595c74;
      margin-top: 2px;
    }
    .ship-input{
      display:none;
    }
    /* Payment tabs (like screenshot) */
    .checkout-pay-tabs{
      display:flex;
      gap:14px;
      margin-bottom:16px;
    }
    .checkout-pay-tab{
      flex: 1;
      flex-wrap: wrap;
      text-align: center;
      font-weight: 500;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: .2s;
      background: white;
      margin-bottom: 5px;
      justify-content: center;
    }
    .checkout-pay-tab:hover{
      border-color:#0097b2;
    }
    .checkout-pay-tab.active{
      border-color: #0097b2;
      background: #0097b203;
    }
    .checkout-pay-icons {
      width: 100%;
    }
    .checkout-pay-icons img{
      height:18px;
      vertical-align:middle;
      margin-right:6px;
    }
    button.checkout-place-btn {
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
      width: 100%;
    }
    /* Order summary */
    h5.checkout-ordersummary-title {
      font-size: 20px;
      font-weight: 600;
      color: black;
    }
    .checkout-product-title {
      font-size: 16px;
    }
    .checkout-qty.text-muted.small {
      font-size: 14px;
    }
    .checkout-product-price {
      font-size: 16px;
      font-weight: 400;
      color: #27404E;
    }
    span.checkout-summary-label {
      font-size: 16px;
      color: black;
    }
    span.checkout-summary-value {
      font-size: 16px;
      font-weight: 400;
      color: #27404E;
    }
    span.checkout-summary-total {
      font-size: 17px;
      color: #000000;
      font-weight: 600;
    }
    .checkout-summary-total-value {
      font-size: 17px;
      color: #000000;
      font-weight: 600;
    }
    .checkout-summary-card{
      border: 1px solid #b5b5b5;
      border-radius: 5px;
      padding: 30px 35px;
      background: #fff;
      position: sticky;
      top: 35px;
    }
    .prod{
      display:flex;
      gap:12px;
      align-items:center;
      margin-bottom:14px;
    }
    .prod img{
      width:56px;
      height:56px;
      border-radius:10px;
      object-fit:cover;
    }
    .btn-primary{
      background:#111827;
      border:none;
      border-radius:10px;
      padding:14px 16px;
      font-weight:600;
    }
    .btn-primary:hover{
      background:#374151;
    }
    @media (max-width:991.98px){
      .checkout-pay-tabs{
        flex-direction:column;
      }
    }

  .product-filter {
    display: none;
  }

  button.filter-toggle {
    display: none;
  }

.dashboard-main {
    display: flex;
    background: linear-gradient(to right, #c7d8cf, #dde6c7);
}

.dash-sidebar-part {
    width: 20%;
    height: 100vh;
    padding: 15px 0px 15px 15px;
}
.dash-sidebar {
    height: 100%;
    border-radius: 15px;
    position: relative;
}

.dash-content-part {
    width: 80%;
    padding: 15px 15px 15px 0px;
}
.dash-content {
    height: 100%;
    border-radius: 15px;
    background: white;
    padding: 25px;
}

.dash-header {
    border-radius: 10px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    align-content: center;
    align-items: center;
    gap: 15px;
    background: #f6f6f6;
    margin-bottom: 20px;
}

.dash-header img {
    height: auto;
    width: 32px;
}

.dash-header img {
    height: 37px;
    width: 37px;
}

.dash-header h4 {
    font-family: poppins;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 0px;
    color: black;
}

.dash-header h4 span {
    font-weight: 600;
    font-size: 22px;
}

.dash-nav-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px;
}

.dash-nav-box.active {
    background: white;
    padding: 15px;
    border-radius: 10px;
    border-radius: 10px 0px 0px 10px;
}

img.dash-nav-img {
    width: 23px;
    height: auto;
}

h5.dash-nav-title {
    margin: 0;
    font-family: 'Poppins';
    font-size: 18px;
    color: #3c3c3c;
    font-weight: 400;
}

img.dash-logo {
    width: 165px;
    margin-top: 15px;
}

.dash-navigation {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
}

.dash-content-section {
    height: 575px;
    display: flex;
    gap: 25px;
    margin-top: 15px;
}
.dash-content-left {
    border-radius: 10px;
    width: 70%;
    gap: 25px;
    display: flex;
    flex-direction: column;
}
.dash-content-right {
    border-radius: 10px;
    width: 30%;
    background: white;
    box-shadow: 0px 0px 20px 0px #0000000d;
    border: solid 1px #e5e5e5;
    padding: 5px 20px 20px 20px;
}

.dash-content-left-top {
    height: 30%;
    border-radius: 10px;
    display: flex;
    gap: 25px;
    width: 100%;
}

.dash-wishlist-box {
    width: 50%;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px #0000000d;
    border: solid 1px #e2e2e2;
    padding: 27px 20px;
    text-align: center;
}

.dash-ad-box {
    width: 50%;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px #0000000d;
    border: solid 1px #e2e2e2;
    padding: 27px 20px;
    text-align: center;
}

.dash-wishlist-box img {
    width: 70px;
}

.dash-ad-box img {
    width: 70px;
}

h4.dash-wishlist-title {
    font-size: 22px;
    color: black;
    margin-top: 12px;
    margin-bottom: 0px;
}

.dash-content-orderlist {
    height: 70%;
    background: white;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0px 0px 20px 0px #0000000d;
    border: solid 1px #e2e2e2;
    padding: 5px 20px 20px 20px;
}

h4.dash-product-main-title {
    font-size: 22px;
    font-weight: 600;
    color: black;
    padding: 15px 0px;
    margin-bottom: 20px;
    border-bottom: solid 1px #e6e6e6;
}

.dash-product-box {
    display: flex;
    gap: 15px;
    margin-bottom: 18px;
}

.dash-product-box img {
    width: 90px;
    height: 100%;
    border-radius: 5px;
}

h4.dash-product-title {
    font-size: 18px;
    margin: 0px;
    color: black;
}

.dash-product-detail .dash-price {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 15px;
    color: #3c3c3c;
    margin-top: 8px;
}

.dash-product-detail {
    align-content: center;
}

.dash-content-orderlist th {
    padding: 10px 10px !important;
}

.dash-content-orderlist td {
    padding: 10px 10px !important;
}

.order-screen-table {
    margin-top: 10px;
}

.dash-nav-box-two {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 15px;
    position: absolute;
    right: 0%;
    top: 18px;
}

a.dash-nav-box {
    text-decoration: unset;
}







    .wishlist-page{
      margin-inline:auto;
    }

    .wishlist-page .page-head{
      display:flex; 
      gap: clamp(12px,1vw,16px);
      align-items:center; 
      justify-content:space-between;
      margin-bottom: clamp(16px, 2.5vw, 28px);
      flex-wrap:wrap;
    }
    .wishlist-page .title{
      font-size: 35px;
    }
    .wishlist-page .subtitle{
      font-size: 16px;
      margin-bottom: 8px;
    }

    .wishlist-page .toolbar{
      display:flex; gap:10px; 
      align-items:center; 
      flex-wrap:wrap;
    }
    .wishlist-page .btn{
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      background: white;
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
    }
    .wishlist-page .btn:hover{ 
      transform: translateY(-1px);
      border: solid 1px #c6d5a2;  
    }
    .wishlist-page .btn.primary{ 
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
    }
    .wishlist-page .btn.danger{ 
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      background: red;
      color: white;
      letter-spacing: 1.5px;
      border: solid 1px red;
    }

    .wishlist-page .grid{
      display:grid; 
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(16px, 2vw, 22px);
    }

    @media (max-width: 1200px){ 
      .wishlist-page .grid{ 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
      } 
    }
    @media (max-width: 680px){ 
      .wishlist-page .grid{ 
        grid-template-columns: 1fr; 
      } 
    }

    .wishlist-page .card {
      display: grid;
      grid-template-rows: auto 1fr auto;
      background: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
    }
    .wishlist-page .card-media{ 
      aspect-ratio: 16/10; 
      overflow:hidden 
    }
    .wishlist-page .card-media img{ 
      width:100%; 
      height:100%; 
      object-fit:cover 
    }
    .wishlist-page .card-body{ 
      padding:16px 
    }
    .wishlist-page .name{ 
      font-size:16px; 
      font-weight:600; 
      margin-bottom:8px 
    }
    .wishlist-page .price{ 
      font-size:18px; 
      font-weight:700 
    }
    .wishlist-page .select-box {
      position: absolute;
      top: 15px;
      left: 15px;
    }
    .whishlist-product-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(250px, 1fr));
      gap: 20px;
    }
    .wishlist-variation-box {
      background: #F5F5F5;
      padding: 5px 8px;
      align-items: anchor-center;
      border-radius: 5px;
      margin-left: auto;
      width: 100%;
    }
    .wishlist-variation-mainbox {
      display: grid;
      grid-template-columns: repeat(2, minmax(130px, 1fr));
      gap: 10px;
    }

    .compare-page-main {
      align-items: center;
      justify-content: center;
      margin-top: 135px;
    }

    .compare-page-main svg {
      width: 30px;
      height: 30px;
    }

    button.compare-page-cartbtn {
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 18px 40px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      border: unset;
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
      margin-top: 40px;
    }

    .footer-app-images {
      display: grid;
      gap: 20px;
      padding-top: 5px;
    }

    .footer-app-images img.store-img {
      width: 170px;
      margin-bottom: 0px;
    }

    .footer-payment-app {
      display: grid;
      gap: 20px;
      padding-top: 5px;
    }

    .footer-payment-app img.pay-img {
      height: 36px;
      width: auto !important;
    }

    .login-section {
      width: 100%;
      max-width: 450px;
      background: #fff;
      padding: 2rem;
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .login-section h2 {
      font-size: 36px;
      font-weight: 400;
      text-align: center;
      background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 35px;
      line-height: 46px;
      width: fit-content;
      justify-self: center;
    }

    .login-form .form-group {
      margin-bottom: 1rem;
    }

    .login-form label {
      margin-bottom: .5rem;
      font-size: 16px;
      font-weight: 500;
      color: #313131;
    }

    .login-form input {
      display: block;
      width: 100%;
      height: 45px;
      padding: .375rem .75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--bs-body-color);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--bs-body-bg);
      background-clip: padding-box;
      border: var(--bs-border-width) solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .login-form input:focus {
      border-color: #667eea;
      box-shadow: 0 0 5px rgba(102,126,234,0.5);
    }

    .login-btn {
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 15px 40px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
      width: 100%;
      margin-top: 10px;
      transition: background 0.3s ease;
    }

    .login-btn:hover {
      background: white;
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
    }

    .extra-links {
      text-align: center;
      margin-top: 1rem;
      font-size: 14px;
    }

    .extra-links a {
      color: #0097b2;
      text-decoration: none;
      margin: 0 8px;
      font-size: 16px;
    }

    .extra-links a:hover {
      text-decoration: underline;
    }

    section.login-section-main {
      background: linear-gradient(to right, #c7d8cf, #dde6c7);
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0px 15px;
    }


    .register-section {
      width: 100%;
      max-width: 450px;
      background: #fff;
      padding: 2rem;
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .register-section h2 {
      font-size: 36px;
      font-weight: 400;
      text-align: center;
      background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 35px;
      line-height: 46px;
      width: fit-content;
      justify-self: center;
    }

    .register-form .form-group {
      margin-bottom: 1rem;
    }

    .register-form label {
      margin-bottom: .5rem;
      font-size: 16px;
      font-weight: 500;
      color: #313131;
    }

    .register-form input {
      display: block;
      width: 100%;
      height: 45px;
      padding: .375rem .75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--bs-body-color);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--bs-body-bg);
      background-clip: padding-box;
      border: var(--bs-border-width) solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .register-form input:focus {
      border-color: #667eea;
      box-shadow: 0 0 5px rgba(102,126,234,0.5);
    }

    .register-btn {
      font-size: 18px;
      line-height: 16px;
      font-weight: 500;
      padding: 15px 40px;
      border-radius: 5px !important;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
      width: 100%;
      margin-top: 10px;
      transition: background 0.3s ease;
    }

    .register-btn:hover {
      background: white;
      letter-spacing: 1.5px;
      border: solid 1px #c6d5a2;
    }

    .extra-links {
      margin-top: 1rem;
      text-align: center;
      color: #2f2f2f;
      text-decoration: none;
      font-size: 16px;
    }

    .extra-links a {
      color: #0097b2;
      text-decoration: none;
      margin: 0 8px;
      font-size: 16px;
    }

    .extra-links a:hover {
      text-decoration: underline;
    }

    section.register-section-main {
      background: linear-gradient(to right, #c7d8cf, #dde6c7);
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0px 15px;
    }

    h2.policy-title {
      font-size: 36px;
      font-weight: 400;
      text-align: center;
      background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 70px;
      line-height: 46px;
      width: fit-content;
      justify-self: center;
      margin-left: auto;
      margin-right: auto;
    }

    h5.policy-content-title {
      font-size: 20px;
      color: black;
      margin-top: 20px;
    }

    p.policy-content {
      font-size: 18px;
      color: #5d5d5d;
      font-weight: 400;
    }

    ui.policy-content {
      font-size: 18px;
      color: #5d5d5d;
      font-weight: 400;
    }






.about-us-logo span {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Hero */
.about-us-hero {
  display: flex;
  gap: 50px;
  align-items: center;
}
.about-us-hero-content {
  width: 50%;
}
.about-us-hero-img {
  width: 50%;
}
.about-us-hero h1 {
  font-size: 56px;
  font-weight: 700;
  color: black;
  line-height: 66px;
}
.about-us-hero p {
  margin-top: 18px;
  font-size: 18px;
  color: #626262;
  font-weight: 400;
}
.about-us-hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.about-us-hero-actions a.btn-primary {
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  padding: 18px 40px;
  border-radius: 5px !important;
  background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
  border: unset;
  letter-spacing: 1.5px;
  border: solid 1px #c6d5a2;
  color: black;
  text-decoration: unset;
}
.about-us-hero-actions a.btn-outline {
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  padding: 18px 40px;
  border-radius: 5px !important;
  background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
  border: unset;
  letter-spacing: 1.5px;
  border: solid 1px #c6d5a2;
  color: black;
  text-decoration: unset;
}
.about-us-hero img {
  width: 100%;
  border-radius: 5px;
}

/* Stats */
.about-us-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 24px;
}
.about-us-stat-card {
  background: white;
  padding: 28px;
  border-radius: 5px;
  border: solid 1px #f9f9f9;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);;
  text-align: center;
}
.about-us-stat-card h3 {
  font-size: 42px;
  line-height: 45px;
  font-weight: 700;
  color: #0097b2;
}
.about-us-stat-card p {
  color: #333333;
  font-size: 18px;
}


/* Section */
.about-us-section h2 {
  font-size: 48px;
  font-weight: 400;
  text-align: center;
  background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 25px;
  line-height: 55px;
  width: fit-content;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}
.about-us-section p.lead {
  font-size: 21px;
  max-width: 1000px;
  margin-bottom: 40px;
  color: #40412B;
  font-weight: 400;
  text-align: center;
  width: fit-content;
  justify-self: center;
}

/* Story */
.about-us-story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.about-us-story img {
  width: 100%;
  border-radius: 5px;
}
.about-us-story p {
  margin-top: 18px;
  font-size: 18px;
  color: #626262;
  font-weight: 400;
}

/* Team */
.about-us-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin-top: 40px;
}
.about-us-team-member {
background: white;
padding: 24px;
border-radius: 5px;
border: solid 1px #f9f9f9;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);;
text-align: center;
}
.about-us-team-member img {
width: 100%;
height: auto;
border-radius: 5px;
object-fit: cover;
margin-bottom: 16px;
}
.about-us-team-member h3 {
  font-size: 20px;
  font-weight: 500;
  color: black;
  line-height: 25px;
}
.about-us-team-member p {
  color: #727272;
  font-size: 18px;
  margin-bottom: 0px;
}

/* CTA */
.about-us-cta {
  background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
  color: white;
  padding: 60px;
  border-radius: 5px;
  text-align: center;
}
.about-us-cta h2 {
  margin-bottom: 16px;
  font-size: 48px;
  font-weight: 400;
  text-align: center;
  color: white;
}
.about-us-cta p {
  font-size: 21px;
  max-width: 1000px;
  margin-bottom: 40px;
  color: #ffffff;
  font-weight: 400;
  text-align: center;
  width: fit-content;
  justify-self: center;
}
.about-us-cta .btn {
  background: #0097b2;
  color: white;
  border-radius: 12px;
  font-size: 18px;
  line-height: 16px;
  padding: 18px 40px;
  font-weight: 400;
}
.about-us-cta .btn:hover {
  background: white;
  color: #0097b2;
  border-radius: 12px;
  font-size: 18px;
  line-height: 16px;
  padding: 18px 40px;
  font-weight: 400;
}

/* Header */
    .help-header {
      text-align: center;
      padding: 60px 20px 40px;
    }

    .help-header h1 {
      font-size: 48px;
      font-weight: 400;
      text-align: center;
      background: linear-gradient(90deg, rgba(191, 195, 0, 1) 0%, rgba(175, 161, 0, 1) 25%, rgba(154, 114, 2, 1) 50%, rgba(129, 59, 11, 1) 75%, rgba(41, 98, 120, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 25px;
      line-height: 55px;
      width: fit-content;
      justify-self: center;
      margin-left: auto;
      margin-right: auto;
    }

    .help-header p {
      font-size: 21px;
      max-width: 1000px;
      color: #40412B;
      font-weight: 400;
      text-align: center;
      width: fit-content;
      justify-self: center;
    }

    /* Contact Section */
    .contact-info {
      background: #fff;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      margin: 30px 0px 0px 0px;
    }

    .contact-info h2 {
      color: #191919;
      text-align: center;
      font-size: 38px;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
    }

    .contact-card {
      text-align: center;
      padding: 25px;
      border: 1px solid #eee;
      border-radius: 10px;
      background: #fafafa;
      transition: 0.3s;
    }

    .contact-card:hover {
      background: #f0f8ff;
      transform: translateY(-4px);
    }

    .contact-card h3 {
      color: #333;
      margin-bottom: 15px;
      font-size: 22px;
    }

    .contact-card p {
      font-size: 20px;
      color: #666;
      margin: 0;
      line-height: 28px;
    }

    /* Categories */
    .categories {
      margin: 60px 0;
    }

    .categories h2 {
      color: #191919;
      text-align: center;
      font-size: 38px;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
    }

    .category-card {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      transition: transform 0.3s;
      text-align: center;
    }

    .category-card:hover {
      transform: translateY(-5px);
    }

    .category-card h3 {
      margin-bottom: 15px;
      font-size: 22px;
      color: #0097b2;
    }

    .category-card p {
      font-size: 18px;
      color: #666;
      margin: 0;
      line-height: 26px;
    }

    /* FAQ */
    .faq {
    }

    .faq h2 {
      color: #191919;
      text-align: center;
      font-size: 38px;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .faq-item {
      background: #fff;
      padding: 25px;
      margin-bottom: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .faq-item h4 {
      color: #333;
      margin-bottom: 15px;
      font-size: 22px;
    }

    .faq-item p {
      font-size: 18px;
      color: #666;
      margin: 0;
      line-height: 26px;
    }









  







/*1300 Tablet responsive*/
@media screen and (max-width: 1300px) {
  
  .for-repair-box {
    flex: 0 0 auto;
    width: 20% !important;
  }

  .for-primming-box {
    height: 225px;
    margin-bottom: 20px;
  }
  
  .step-2-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(auto, 1fr));
    gap: 20px;
  }

}


/*1080 Tablet responsive*/
@media screen and (max-width: 1080px) {
  
  .content-block {
    height: 400px;
  }
  
  .step-2-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(auto, 1fr));
    gap: 20px;
  }

  .content-main {
    padding: 30px 30px;
  }

  .for-repair-box {
    flex: 0 0 auto;
    width: 25% !important;
  }

  .for-primming-box {
    height: 215px;
    margin-bottom: 20px;
  }

  .color-text {
    padding: 50px !important;
  }

  .paint-intro {
    width: 100%;
    display: flex;
    gap: 45px;
  }

  .paint-process {
    margin: 90px 30px 0px 30px;
    padding: 25px;
    background-color: #F4F4F4;
    border-radius: 12px;
  }

  .web-container {
    padding: 70px 20px 0px 20px;
  }

  .color-image img {
    height: 420px;
  }

  .obsessed-content\=part {
    height: 420px;
  }

  h1.startwith-gradient-heading {
    font-size: 65px;
  }

  p.startwith-text {
    margin-top: 70px;
  }

  .checkout-info-part {
    padding-right: 20px;
  }

  .innercolumn1 .me-3 {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  span.innerliter {
    width: 120px;
  }

  select.form-select.cart-qty {
    width: 120px;
  }

  .cart-area {
    display: flex;
    gap: 30px;
  }

  .cart-product {
    width: 65%;
    margin-top: -35px;
  }

  .cart-summary {
    width: 35%;
  }

  .cart-card {
    padding-top: 35px;
    padding-bottom: 30px;
  }

  .twocolumn {
    display: flex;
    gap: 15px;
    justify-content: space-between;
  }

  .summary-box {
    padding: 20px 25px;
  }

  .color-picker-section {
    display: flex;
    flex-wrap: wrap;
  }

  .color-picker-slider {
    width: 100%;
    justify-items: center;
  }

  .color-picker-search {
    width: 100%;
    justify-items: center;
  }

  .color-shade-list-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 35px;
  }

  .product-detail-main {
    display: flex;
    gap: 30px;
    padding: 60px 20px 0px 20px;
  }

  .product-detail-price {
    font-size: 22px;
  }

  .product-detail-old-price {
    font-size: 18px;
  }

  .product-detail-calculator {
    padding: 0px;
  }

  .product-detail-cart-btn {
    padding: 18px 25px;
  }

  .product-detail-buy-btn {
    padding: 18px 25px;
  }

  .productdetail-img img {
    right: 0;
    position: unset;
    width: 100%;
    margin-left: 20px;
    height: 100%;
    object-fit: cover;
  }

  h2.productdetail-content-title {
    font-size: 55px;
  }

  p.productdetails-contnet-desc {
    font-size: 26px;
    line-height: 38px;
    margin-top: 15px;
  }

  .fourth-section-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 65px 35px;
    text-align: center;
    padding: 40px;
  }

  .fourth-section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fourth-section-image {
    height: 100%;
  }

  .fifth-section-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 40px;
    padding: 0px 55px;
  }

  .related-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 20px;
  }

  .footer-col {
    flex: 1 1 400px;
    min-width: 200px;
  }

  .site-footer {
    padding: 70px 0px 10px 0px;
    margin-top: 80px;
  }

  .footer-bottom {
    margin-top: 100px;
  }

  .dashboard-main {
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(to right, #c7d8cf, #dde6c7);
  }

  .dash-sidebar-part {
    width: 100%;
    padding: 15px;
    height: unset;
  }

  .dash-content-part {
    width: 100%;
    padding: 0px;
  }

  .dash-content {
    border-radius: 0px;
  }

  .dash-navigation {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .dash-nav-box {
    width: unset;
    border-radius: 10px !important;

  }

  .dash-content-section {
    flex-wrap: wrap;
    height: unset;
  }

  .dash-content-left {
    width: 100%;
  }

  .dash-content-right {
    width: 100%;
  }

  .dash-nav-box.logout {
    position: absolute;
    top: 18px;
    right: 123px;
    padding: 0;
  }

  .automative-category-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(25%, 1fr));
    gap: 20px;
    justify-items: anchor-center;
  }

  .about-us-hero {
    gap: 30px;
  }

  .about-us-hero h1 {
    font-size: 45px;
    font-family: 'Glacial Indifference', sans-serif;
    line-height: 55px;
  }
  
  .whishlist-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 20px;
  }

     

}




/*767 Tablet responsive*/
@media screen and (max-width: 767px) {
    
    .dash-content-left-top {
        height: unset;
    }
    
    .dash-wishlist-box img {
        width: 55px;
    }
    
    .dash-ad-box img {
        width: 55px;
    }
    
    .dash-content-orderlist {
        height: unset;
    }
    
    .breadcrumb-item+.breadcrumb-item {
        padding-left: 14px !important;
    }
    .breadcrumb-item+.breadcrumb-item::before {
        padding-right: 14px !important;
    }
    
    .slick-initialized .slick-slide h3 {
        transform: scale(1);
    }
    
    .paint-content {
      flex-wrap: wrap;
    }

  .web-container {
    padding: 50px 15px 0px 15px;
  }

  .obsessed-content\=part {
    height: auto;
  }

  .color-image img {
    height: auto;
  }

  h1.startwith-gradient-heading {
    font-size: 46px;
  }

  .paint-subtext-two {
    width: 100%;
  }

  .paint-intro {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .paint-steps {
    display: flex;
    flex: 3 1 600px;
    gap: 20px;
    width: 54%;
    flex-wrap: wrap;
  }

  .paint-step {
    background-color: #E6F2FA;
    width: 100%;
    border: 2px solid #9DC9E7;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
  }

  .paint-heading {
    font-size: 28px;
    font-weight: bold;
    color: #001c64;
    line-height: 1.3;
    width: 100%;
  }

  .divider {
    width: 5px;
    height: 80px;
    background: #b8dff2;
    margin: 0px;
  }

  .paint-description {
    font-size: 1rem;
    margin-top: 0px;
    color: #223a70;
    width: 85%;
  }

  .paint-header h2 {
    font-size: 40px !important;
  }

  .start-with-an-idea.text-center {
    padding: 70px 15px 0px 15px;
  }

  .step-title-main {
    font-size: 22px;
    margin-bottom: 50px;
    margin-top: 70px !important;
  }
  
  .content-main {
    margin-top: -58px;
    padding: 20px;
    width: 90%;
    height: 210px;
    justify-self: center;
    justify-self: anchor-center;
    place-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .content-grid {
    gap: 30px;
  }

  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .content-block {
    height: 320px;
  }

  .title {
    font-size: 22px;
  }

  .subtitle {
    font-size: 13px;
  }

  .category-item img {
    width: 120px;
    height: 120px;
  }



  
    .color-text h4 {
        font-size: 18px;
    }
    .color-section {
        padding: 30px 15px;
    }

  .paint-header h2 {
        font-size: 1.8rem;
    }

  .for-repair-box {
    flex: 0 0 auto;
    width: 50% !important;
  }

  .for-primming-box {
    height: 185px;
    margin-bottom: 20px;
  }
  .step-2-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    gap: 20px;
  }

  .checkout-main {
    display: flex;
    flex-wrap: wrap;
  }

  .checkout-info-part {
    padding-right: 0px;
    order: 1;
  }

  .checkout-summary-part {
    width: 100%;
    margin-bottom: 30px;
  }

  .checkout-summary-card {
    padding: 20px 25px;
  }

  .cart-area {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
  }

  h5.cart-product-title {
    font-size: 22px;
    font-weight: 400;
    color: black;
    margin-bottom: 15px;
    margin-top: 8px;
  }

  .cart-product {
    width: 100%;

  }

  .cart-summary {
    width: 100%;
  }

  .cart-product-detail {
    width: 100%;
    padding: 10px 0px 10px 0px;
  }

  .cart-product-btnpart {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }

  .cart-product-btnpart {
    display: flex;
    justify-content: space-between;
  }

  .cart-amountsection {
    margin-top: 0px;
    display: flex;
    justify-content: end;
    align-items: center;
  }

  p.cart-discount {
    margin-bottom: 0px;
    margin-left: 5px;
  }

  .cart-delete {
    align-content: center;
    position: absolute;
    top: 55px;
    right: 0;
  }

  .color-shade-list-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 30px 20px;
  }

  .color-picker {
    width: 100%;
  }

  .color-shade-list-main {
    display: grid;
    grid-template-columns: repeat(1, minmax(250px, 1fr));
    gap: 30px 20px;
  }

  .shade-search {
    width: 100%;
  }

  .shade-card-color {
    height: 230px;
    padding: 15px 30px;
  }

  .color-picker-section {
    margin-bottom: 35px;
    padding-bottom: 35px;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(250px, 1fr));
    gap: 20px;
  }

  .prodcut-listing-main {
    width: 100%;
  }

  .filter-sidebar {
    display: none;
  }

  .product-filter {
    display: block !important;
  }

  button.filter-toggle {
    display: block !important;
    position: absolute;
    right: 0;
    top: 0;
  }

  .prodcut-listing-main h2 {
    font-size: 30px;
  }

  .listing-main {
    display: flex;
    gap: 40px;
    position: relative;
  }

  .filter-data-bar {
    margin-bottom: 35px;
    padding: 10px 0 15px 0px;
  }

  .filter-data-right {
    display: none;
  }

  .filter-header {
    display: flex;
    justify-content: space-between;
    padding: 30px 36px 30px 36px;
    border-bottom: 1px solid #ddd;
  }

  .product-detail-main {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .product-detail-left {
    width: 100%;
  }

  .product-detail-right {
    width: 100%;
  }

  .product-detail-title {
    margin-top: 0px;
    margin-bottom: 15px;
  }

  .cart-option-main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }

  .quantity-btn {
    width: 100%;
    display: flex;
    gap: 10px;
  }

  button.product-detail-cart-btn {
    width: 50%;
  }

  button.product-detail-buy-btn {
    width: 50%;
  }

  .product-detail-calculator {
    padding-bottom: 10px;
  }

  .fifth-section-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px 30px;
    padding: 0px 0px;
  }

  .fifth-section {
    background: linear-gradient(to right, #F2F9FF, #EEE6EB);
    color: #111;
    padding: 40px 20px 55px 20px;
  }

  .related-product-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(250px, 1fr));
    gap: 20px;
  }

  .productdetailsecondmain {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: unset;
    height: unset;
  }

  .productdetail-img {
    width: 100%;
  }

  .productdetail-content {
    width: 100%;
    align-content: center;
  }

  h2.productdetail-content-title {
    font-size: 48px;
  }

  .productdetail-img img {
    right: 0;
    position: unset;
    width: 100%;
    margin-left: 15px;
    height: 280px;
    object-fit: cover;
  }

  .third-section-title h2.section-title {
    font-size: 42px;
    margin-bottom: 18px;
    line-height: 52px;
  }

  .slick-initialized .slick-slide {
    transform: scale(1);
  }

  .fourth-section-title {
    font-size: 42px;
    margin-bottom: 35px;
    line-height: 55px;
  }

  .fourth-section-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 65px 35px;
    text-align: center;
    padding: 60px 30px;
  }

  .compare-product-card {
    background: #fff;
    text-align: center;
    border: solid 1px #d7d7d7;
    border-radius: 5px;
    padding: 20px 0px;
    padding: 20px 15px;
    margin: 0px 10px !important;
    
  }

  .faq-title {
    text-align: center;
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 55px;
  }

  section.faq-section-main {
    background: linear-gradient(160deg, rgba(245, 250, 254, 1) 0%, rgba(241, 236, 240, 1) 100%);
    padding: 60px 0px 80px 0px;
    margin-top: 80px;
  }

  .faq-subtitle {
    font-size: 18px;
    margin-bottom: 60px;
  }

  .faq-note {
    margin-bottom: 70px;
  }

  .faq-box {
    padding: 16px 35px 52px 35px;
  }

  .download-item {
    padding: 20px 0px;
    gap: 20px;
  }

  h2.related-product-title {
    margin-bottom: 40px;
  }

  .main-price-box {
    display: block;
  }

  .whish-compare-btn-box.ms-auto {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    margin-bottom: 35px;
  }

  .whish-compare-btn-box {
    justify-content: center;
  }

  .select-size-btn {
    margin-bottom: 10px;
  }

  section.sixth-section-main {
    width: 100%;
    overflow: hidden;
  }

  .custom-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
  }

  img.header-search-icon {
    display: none;
  }

  .header-right {
    gap: 10px;
  }

  img.main-logo {
    width: 145px;
  }

  .header-container {
    max-width: 100% !important;
    width: 1500px;
    margin: 0 auto;
    padding: 0px 15px;
  }

  .site-footer {
    padding: 60px 0px 10px 0px;
    margin-top: 70px;
  }

  .footer-bottom {
    justify-content: center;
    margin-top: 60px;
  }

  .footer-container {
    padding: 0px 15px;
  }

  .dash-nav-box {
    width: 100%;
    border-radius: 10px !important;
  }

  .dash-navigation {
    margin-top: 20px;
  }

  .dash-nav-box.logout {
    display: flex;
    position: unset;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px;
  }

  h4.footer-contact {
    margin-top: 46px;
  }

  h4.footer-payment {
    margin-top: 46px;
  }

  h4.footer-security {
    margin-top: 48px;
  }

  section.register-section-main {
    background: linear-gradient(to right, #c7d8cf, #dde6c7);
    min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 15px;
  }

  section.login-section-main {
    background: linear-gradient(to right, #c7d8cf, #dde6c7);
    min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 15px;
  }

  h2.policy-title {
    margin-bottom: 40px;
  }

  .automative-category-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(50%, 1fr));
    gap: 20px;
    justify-items: anchor-center;
  }

  p.startwith-text {
    margin-top: 40px;
    font-size: 18px;
  }

  .about-us-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
  }

  .about-us-hero-content {
    width: 100%;
    order: 1;
  }

  .about-us-hero-img {
    width: 100%;
  }

  .about-us-hero h1 {
    font-size: 40px;
    line-height: 47px;
  }

  .about-us-stats {
    display: grid;
    grid-template-columns: repeat(1, minmax(220px, 1fr));
    gap: 24px;
  }

  .about-us-story {
    display: unset;
    align-items: center;
  }

  .about-us-story img {
    width: 100%;
    margin-bottom: 20px;
  }

  .about-us-cta {
    padding: 30px;
  }

  .about-us-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(46%, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

  .about-us-team-member {
    padding: 15px;
  }

  .about-us-team-member h3 {
    margin-bottom: 2px;
  }
  
  .whishlist-product-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(250px, 1fr));
        gap: 20px;
  }
  

}































/* Mobile view - side menu */
@media (max-width: 768px) {
  .filter-toggle {
    padding: 7px 15px;
    border-radius: 100px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 16px;
    z-index: 100;
    position: relative;
  }

  .product-filter {
    position: fixed;
    top: 0;
    left: -100%;
    width: 90%;
    height: 100%;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
  }

  .product-filter.active {
    left: 0;
  }

  .filter-close {
    background: none;
    border: none;
    font-size: 20px;
    float: right;
    cursor: pointer;
    padding: 10px 32px 0px 0px;
  }

  .filter-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
  }

  .filter-overlay.active {
    display: block;
  }

  .product-filter h3 {
    padding: 10px 0px 0px 35px;
  }
  
}



/*Searchbar css*/
.search-icon {
      cursor: pointer;
      font-size: 22px;
      position: relative;
    }

    /* Popup below icon */
    .search-popup {
      position: absolute;
      top: 60px; /* distance below topbar */
      right: 20px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      padding: 12px;
      display: none;
      z-index: 100;
      width: 380px;
      animation: fadeIn 0.25s ease;
      
    }

    .search-popup form{
      display: flex;
      gap: 10px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .search-popup input {
      width: 75%;
      height: 45px;
      padding: 10px;
      border: 1px solid #cbd5e1;
      border-radius: 5px;
      font-size: 15px;
      outline: none;
    }

    .search-popup button {
      width: 25%;
      color: black;
      height: 45px;
      padding: 10px;
      font-size: 15px;
      border-radius: 5px;
      cursor: pointer;
      background: linear-gradient(90deg, rgba(161, 190, 176, 1) 0%, rgba(199, 213, 161, 1) 100%);
      letter-spacing: 0.5px;
      border: solid 1px #c6d5a2;

    }

    /* Optional: overlay just to detect outside clicks */
    .overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      display: none;
      z-index: 50;
    }