/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Source Serif Pro",  sans-serif;
  --nav-font: "Roboto Slab",  sans-serif;
}

/* Global Colors - Updated with New Palette */
:root { 
  --background-color: #f8efeb; 
  --default-color: #30140C;   /* Deep Brown for primary text */
  --heading-color: #30140C;   /* Deep Brown for headings */
  --accent-color: #D39F2E;    /* Bright Gold/Bronze for primary accents (buttons, links) */
  --secondary-accent-color: #BE7C16; /* NEW: Darker Bronze for hovers/highlights */
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  --nav-color: rgba(255, 255, 255, 0.6);  /* The default color of the main navmenu links */
  --nav-hover-color: var(--accent-color); /* Use D39F2E */
  --nav-dropdown-hover-color: var(--accent-color); /* Use D39F2E */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #352a26; /* Used for navigation links of the dropdown items in the navigation menu. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #efe3de;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

/* General Styling (unchanged) */
body {
  color: var(--default-color);
  background-color: var(--background-color);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--secondary-accent-color);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Global Header */
.header {
  --background-color: rgba(0, 0, 0, 0);
  --heading-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: var(--background-color);
  height: 40px;
  padding: 0 15px;
  font-size: 14px;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
  display: flex;
  align-items: center;
  white-space: nowrap; 
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  color: var(--contrast-color);
  padding-left: 5px;
  font-size: 13px; 
}

@media (min-width: 576px) {
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 14px; /* Restore original size above 575px */
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: var(--contrast-color);
  margin-left: 10px; /* Reduced for tighter spacing */
  font-size: 16px; /* Larger icons for visibility */
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 65px;
  margin-right: 5px;
}

.header .logo h1 {
  font-size: 24px; /* Reduced for smaller screens */
  margin: 0;
  font-weight: 700;
  color: #352a26;
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

.scrolled .header .topbar {
  height: auto;
  visibility: visible;
  overflow: visible;
}

.scrolled .navmenu a i,
.navmenu a:focus i {
  font-size: 18px; /* Reduced for consistency */
  line-height: 0;
  margin-left: 5px;
  transition: 0.3s;
  border: 1px solid #e07844;
}

/* Custom Style for Login */
.nav-text-link {
  font-size: 14px;
  font-weight: 500;
  color: #352a26;
  padding: 6px 10px; /* Tighter padding */
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
}

.nav-text-link:hover {
  color: var(--secondary-accent-color);
}

.header .navmenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Button (unchanged) */
.button {
  position: relative;
  overflow: hidden;
  height: 2.5rem; /* Reduced for smaller screens */
  padding: 0 1.2rem;
  border-radius: 1.2rem;
  background: #ff6530;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
}

.button:hover::before {
  transform: scaleX(1);
}

.button-content {
  position: relative;
  z-index: 1;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg, rgba(190, 124, 22, 1) 10.8%, rgba(255, 99, 0, 1) 94.3%);
  transition: all 0.475s;
}

/* Search Form */
.search-form {
  display: flex;
  align-items: center;
  margin: 0 5px; /* Tighter spacing */
}

.search-form input {
  border: 1px solid #fff;
  border-radius: 20px 0 0 20px;
  padding: 5px 8px; /* Tighter padding */
  font-size: 12px; /* Smaller for mobile */
  width: 120px; /* Reduced for small screens */
  background: rgba(255, 255, 255, 0.9);
  transition: width 0.3s;
}

.search-form input:focus {
  width: 150px;
  outline: none;
}

.search-form button {
  background: var(--accent-color);
  border: none;
  border-radius: 0 20px 20px 0;
  padding: 5px 8px;
  color: #fff;
  cursor: pointer;
}

.search-form button:hover {
  background: var(--secondary-accent-color);
}

/* Global Header on Scroll */
.scrolled .header {
  --background-color: rgb(255, 255, 255);
}

/* Navigation Menu */

/* Desktop (min-width: 1200px) - Horizontal Nav */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--default-color);
    padding: 18px 8px;
    font-size: 18px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 18px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--accent-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 15px;
    font-size: 14px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 14px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover > a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Tablet (max-width: 1199px) - Stacked Topbar, Horizontal Nav */
@media (max-width: 1199px) {
  .header .topbar {
    height: auto;
    padding: 10px 15px;
  }

  .header .topbar .container {
    flex-direction: column;
    align-items: stretch;
  }

  .header .topbar .contact-info,
  .header .topbar .search-form,
  .header .topbar .social-links {
    width: 100%;
    margin: 5px 0;
    text-align: center;
  }

  .header .topbar .search-form {
    order: 2;
  }

  .header .topbar .social-links {
    order: 3;
  }

  .search-form input {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }

  .navmenu ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .navmenu a,
  .navmenu a:focus {
    padding: 10px 8px; /* Tighter for tablet */
    font-size: 15px;
  }

  .navmenu .dropdown ul {
    left: 0;
    width: 180px;
  }
}

/* Mobile (max-width: 991px) - Collapsible Nav Menu */
@media (max-width: 991px) {
  .header .topbar {
    padding: 8px 10px; /* Tighter padding */
  }

  .mobile-nav-toggle {
    font-size: 24px; /* Smaller for mobile */
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    color: var(--default-color);
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 15px 15px 15px; /* Tighter inset */
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 8px 15px; /* Tighter padding */
    font-family: var(--nav-font);
    font-size: 14px; /* Smaller for mobile */
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px; /* Smaller icons */
    line-height: 0;
    margin-left: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 8px 0; /* Tighter padding */
    margin: 8px 15px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown > .dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    position: absolute;
    font-size: 28px;
    top: 10px;
    right: 10px;
    margin-right: 0;
    z-index: 9999;
    color: var(--contrast-color);
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}

/* Extra Small Screens (max-width: 767px) - Specific Adjustments */
@media (max-width: 767px) {
  .header .topbar .contact-info i {
    flex-direction: column; /* Stack phone/email vertically */
    align-items: flex-start;
  }

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    padding-left: 0;
    margin-top: 2px;
  }

  .search-form input {
    width: 100px; /* Even smaller for 767px */
  }

  .search-form input:focus {
    width: 120px;
  }

  .navmenu a,
  .navmenu a:focus {
    padding: 8px 6px; /* Tighter for small screens */
    font-size: 14px;
  }
}

/* Very Small Screens (max-width: 320px) - Fix Overlap */
@media (max-width: 320px) {
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 11px; /* Smaller text */
    white-space: normal; /* Allow wrapping */
  }

  .header .topbar .contact-info i .bi-phone a {
    display: flex;
    flex-direction: column; /* Stack +91 and number */
  }

  .header .topbar .contact-info i .bi-phone a span {
    margin-left: 0; /* Remove padding to align */
  }

  .search-form input {
    width: 80px; /* Minimum width */
  }

  .search-form input:focus {
    width: 100px;
  }

  .header .logo h1 {
    font-size: 20px; /* Smaller logo text */
  }

  .navmenu a,
  .navmenu a:focus {
    padding: 6px 4px; /* Tightest padding */
    font-size: 12px; /* Smallest text */
  }
}
 /* -------------------------------------------------------------- 
 Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background: var(--background-color);
  font-size: 14px;
  padding: 80px 0 0;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.footer .footer-content .logo {
  line-height: 1;
}

.footer .footer-content .logo span {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--heading-font);
}

.footer .footer-content p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.footer .newsletter-form {
  margin-top: 30px;
}

.footer .newsletter-form h5 {
  color: var(--heading-color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  font-family: var(--heading-font);
}

.footer .newsletter-form .input-group {
  position: relative;
  display: flex;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .newsletter-form input[type=email] {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background-color: var(--surface-color);
  color: var(--default-color);
  font-size: 14px;
}

.footer .newsletter-form input[type=email]:focus {
  outline: none;
  box-shadow: none;
}

.footer .newsletter-form input[type=email]::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.footer .newsletter-form .btn-subscribe {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  transition: 0.3s;
}

.footer .newsletter-form .btn-subscribe:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

.footer .newsletter-form .btn-subscribe i {
  font-size: 16px;
}

.footer .newsletter-form .loading,
.footer .newsletter-form .error-message,
.footer .newsletter-form .sent-message {
  font-size: 13px;
  margin-top: 8px;
}

.footer h4 {
  color: var(--heading-color);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  font-family: var(--heading-font);
}

.footer h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 2px;
  background-color: var(--accent-color);
}

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

.footer .footer-links ul li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.footer .footer-links ul li:hover {
  transform: translateX(5px);
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: 0.3s;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-links ul a i {
  margin-right: 8px;
  font-size: 12px;
  color: var(--accent-color);
}

.footer .footer-contact .contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.footer .footer-contact .contact-item .contact-icon {
  width: 40px;
  height: 40px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.footer .footer-contact .contact-item .contact-icon i {
  color: var(--accent-color);
  font-size: 16px;
}

.footer .footer-contact .contact-item .contact-info p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 14px;
  line-height: 1.5;
}

.footer .social-links {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.footer .social-links a {
  width: 42px;
  height: 42px;
  background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
  text-decoration: none;
}

.footer .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.footer .social-links a i {
  font-size: 16px;
}

.footer .footer-bottom {
  margin-top: 50px;
  padding: 25px 0;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.footer .footer-bottom .copyright p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

@media (max-width: 991px) {
  .footer .footer-bottom .copyright p {
    text-align: center;
    margin-bottom: 15px;
  }
}

.footer .footer-bottom .footer-bottom-links {
  text-align: right;
  margin-bottom: 8px;
}

@media (max-width: 991px) {
  .footer .footer-bottom .footer-bottom-links {
    text-align: center;
    margin-bottom: 10px;
  }
}

.footer .footer-bottom .footer-bottom-links a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 13px;
  margin-left: 20px;
  text-decoration: none;
}

.footer .footer-bottom .footer-bottom-links a:first-child {
  margin-left: 0;
}

.footer .footer-bottom .footer-bottom-links a:hover {
  color: var(--accent-color);
}

@media (max-width: 991px) {
  .footer .footer-bottom .footer-bottom-links a {
    margin: 0 10px;
  }
}

.footer .footer-bottom .credits {
  text-align: right;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 991px) {
  .footer .footer-bottom .credits {
    text-align: center;
  }
}

.footer .footer-bottom .credits a {
  color: var(--accent-color);
  text-decoration: none;
}

.footer .footer-bottom .credits a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .footer {
    padding: 60px 0 0;
  }

  .footer .footer-content {
    text-align: center;
    margin-bottom: 40px;
  }

  .footer .footer-links,
  .footer .footer-contact {
    margin-bottom: 40px;
  }
}

input[type=text],
input[type=email],
textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  border-color: var(--accent-color);
}

input[type=text]::placeholder,
input[type=email]::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
} /*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 78px;
  overflow: clip;
  position: relative;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 60px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 4px;
  color: color-mix(in srgb, var(--heading-color), transparent 95%);
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 1;
}

.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .section-title span {
    font-size: 38px;
  }
}
  
  
  /*------------
  Hero Section Index
  ---------------*/

/* Carousel Base */
#hero-carousel{
 margin-top: 8rem;
 padding: 0
}
#hero-carousel .carousel-item {
  height: auto;
  min-height: 400px;
}

/* Make rows full height */
#hero-carousel .carousel-item .container-fluid,
#hero-carousel .carousel-item .row {
  height: 80%;
}

/* Desktop fixed height */
@media (min-width: 992px) {
  #hero-carousel .carousel-item {
    height: 500px;
  }
}

/* Image behavior */
.object-fit-cover {
  object-fit: cover;
}

/* Button (simple clean version) */
.btn-warning {
  background-color: #ffc107;
  border: none;
  color: #000;
}
.btn-warning:hover {
  background-color: #e0a800;
  color: #fff;
}

/*------------
  Ticker Banner
  ---------------*/
    .ticker-banner {
      position: relative;
      background: linear-gradient(90deg, #FFFDE7 0%, #FFECB3 20%, #F4E3A0 50%, #FFECB3 80%, #FFFDE7 100%  ); 
      border-top: 3px solid var(--default-color); 
      border-bottom: 3px solid var(--default-color);
      box-shadow: inset 0 0 15px rgba(211, 159, 46, 0.2); /* Added deeper shadow for richness */
  }
    
  .ticker-text {
    color: var(--default-color); /* Keeps the deep brown text base */
    text-transform: uppercase;
    font-weight: 900 !important; /* Make the text extra bold */
    font-size: 1.5rem; 
    text-shadow: 
      0 0 3px rgba(211, 159, 46, 0.6), /* Inner glow - brighter accent color */
      0 0 8px rgba(190, 124, 22, 0.4); /* Outer shimmer - secondary accent color */
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
  }
  
  /* Add a subtle interactive hover effect to the text */
  .marquee:hover .ticker-text {
      text-shadow: 
          0 0 5px rgba(211, 159, 46, 0.8), 
          0 0 10px rgba(190, 124, 22, 0.6); 
      transform: scale(1.01); /* Subtle "pop" on hover */
  }
  .dot {
    color: var(--secondary-accent-color); /* Darker Bronze/Gold */
    font-weight: 800;
    font-size: 1.8rem; 
    vertical-align: middle;
    padding: 0 10px; 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    content: "♦"; 
  }

.ticker-wrap {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Marquee animation */
.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
  width: max-content;
  color: #111;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

/* Pause on hover */
.marquee:hover {
  animation-play-state: paused;
  cursor: pointer;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



/* Responsive scaling */
@media (max-width: 768px) {
  .marquee {
    font-size: 1.1rem;
    animation-duration: 35s;
  }
  .dot {
    font-size: 1.2rem;
  }
}


      /* product section*/
.product-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); 
  border-radius: 12px; 
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: var(--surface-color);
}

.product-card:hover {
  box-shadow: 0 8px 25px rgba(48, 20, 12, 0.15); 
  transform: translateY(-4px); /* Add a slight vertical lift on hover */
}
      
      .product-img {
        position: relative;
        height: 250px;
        overflow: hidden;
      }
      
      .product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
      }
      
      .product-card:hover img {
        transform: scale(1.05);
      }
      
      .discount-badge {
        position: absolute;
        top: 18px; /* Move slightly further from the edge */
        left: 18px;
        background: var(--secondary-accent-color); /* Darker Gold */
        color: #fff;
        font-weight: 700; /* Bolder font */
        font-size: 15px; /* Slightly larger text */
        padding: 6px 12px; /* More padding */
        border-radius: 50px;
        /* Subtle glow/shadow for a pop effect */
        box-shadow: 0 0 10px rgba(190, 124, 22, 0.5); 
        z-index: 10;
    }
    
    .price .old-price {
        /* Mute the old price slightly more */
        color: color-mix(in srgb, var(--default-color), transparent 50%); 
        font-size: 0.9rem;
        font-weight: 400;
    }
        
    .price .new-price {
        color: var(--secondary-accent-color); 
        font-weight: 800; /* Extra bold */
        font-size: 1.35rem; /* More dominant size */
    }
      
      .hover-icons {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
        opacity: 0;
        transition: all 0.3s ease;
      }
      
      .product-card:hover .hover-icons {
        opacity: 1;
      }
      
      .hover-icons a {
        background: #fff;
        color: #222;
        border-radius: 50%;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        text-decoration: none;
      }
      
      .hover-icons a:hover {
        background: var(--secondary-accent-color); /* Darker gold on hover */
        color: var(--contrast-color);
      }
      
      .add-to-cart-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background-color: var(--accent-color) !important; 
    color: var(--contrast-color); 
        border: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.4s ease;
        overflow: hidden;
        width: 140px;
        height: 42px;
      }
      
      .add-to-cart-btn .btn-icon {
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
        font-size: 1.2rem;
      }
      
      .add-to-cart-btn .btn-text {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.4s ease;
      }
      
      /* On hover: swap text with icon */
      .add-to-cart-btn:hover .btn-text {
        opacity: 0;
        transform: translateY(-20px);
      }
      
      .add-to-cart-btn:hover .btn-icon {
        opacity: 1;
        transform: translateY(0);
      }
      
      /* Optional hover visual effect */
      .add-to-cart-btn:hover {
        background-color: var(--secondary-accent-color) !important; 
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      }
      
      /*Story*/
      #our-story {
        /* Padding adjustments for the section container */
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    #our-story .story-content {
        /* Optional: Slightly larger line height for readability */
        line-height: 1.6;
    }
    
    /* Style for the image */
    #our-story .story-image {
        /* Ensure the image is visually appealing */
        border: 5px solid #fff; /* Light border */
        transition: transform 0.3s ease-in-out;
    }
    
    #our-story .story-image:hover {
        transform: scale(1.02); /* Slight zoom on hover */
    }
    
    /* Responsive adjustments for the image on smaller screens */
    @media (max-width: 991.98px) {
        #our-story .story-image {
            margin-bottom: 2rem; /* Add space below image when stacked on mobile/tablet */
        }
    }
    
    /* Optional: Subtle color adjustment for text inside the section */
    .text-dark-emphasis {
        color: #333 !important;
    }

     /* Contact Section */
.contact-info-section {
  background-color: var(--background-color);
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Individual contact cards */
.contact-item {
  background-color: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  padding: 30px 20px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.contact-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Vertical separator (for large screens) */
.separator-col {
  width: 2px;
  background-color: var(--default-color);
  opacity: 0.2;
  height: 80px;
}

/* Title + text consistency */
.item-title-sans {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--heading-color, #222);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.item-value-sans {
  font-size: 1.1rem;
  color: var(--text-color, #444);
}

/* Icon consistency */
.contact-icon {
  font-size: 1.8rem;
  color: var(--default-color);
  margin-right: 10px;
  transition: color 0.3s ease;
}

.contact-item:hover .contact-icon {
  color: var(--secondary-accent-color); 
}

/* Social icons styling */
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--default-color); 
  color: #fff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  background-color: var(--accent-color);
  transform: translateY(-4px);
}

/* Responsive spacing adjustments */
@media (max-width: 768px) {
  .contact-item {
    margin-bottom: 20px;
  }
  .separator-col {
    display: none !important;
  }
}
/*==============================================================
# REVIEWS SECTION (TESTIMONIALS) - THEMED STYLING
==============================================================*/
.reviews-section {
  background-color: #FFFDF7; /* Light, warm background */
  padding: 60px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Base Styles for Header Typography */
.section-title-custom { /* Assuming this new class is used for the main title */
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--heading-color);
  font-family: var(--heading-font);
  margin-bottom: 0.5rem;
}

.rating-value {
  font-size: 1.4rem; /* More prominent */
  font-weight: 800;
  color: var(--secondary-accent-color);
}

.rating-stars {
  color: var(--accent-color);
  font-size: 1.5rem;
  letter-spacing: 0;
}

.reviews-count {
  color: var(--default-color);
  font-size: 1rem;
  opacity: 0.7;
}

/* Review Button Styling */
.review-btn-themed { /* Changed from .review-btn to match the HTML naming pattern */
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--contrast-color) !important;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 1rem;
}
.review-btn-themed:hover {
  background-color: var(--secondary-accent-color) !important;
  border-color: var(--secondary-accent-color) !important;
}

/* Review Card Styling */
.review-card {
  /* background-color: var(--surface-color);
  border-radius: 12px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  width: 100%; 
  flex-shrink: 0;
  padding: 2rem !important; 
  font-style: italic;
  line-height: 1.6;
  color: var(--default-color);
  transition: all 0.4s ease-out; */
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 280px;
    text-align: center;
  
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(211, 159, 46, 0.2);
  cursor: default;
}
.review-text {
  font-style: italic;
  color: var(--default-color);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 90%;
}
/* Optional: Customer Name/Details */
.customer-name {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--secondary-accent-color);
  text-transform: uppercase;
}
.customer-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--accent-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: inline-block;
}
/* Quote Icon (Replaces Google G Icon) */
.quote-icon {
  font-size: 2rem;
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  margin-left: 10px;
}

/*--------------------------------------------------------------
# MULTI-ITEM CAROUSEL OVERRIDES (CRITICAL FOR SLIDING)
--------------------------------------------------------------*/

/* CRITICAL: Force inner container to be flexible and wide */
#reviewsCarousel .carousel-inner {
  display: flex;
  overflow: visible;
}

/* CRITICAL: Define the width of the individual slide item and add spacing */
#reviewsCarousel .carousel-item {
  display: block !important; 
  margin: 0 8px; 
  transform: none !important;
  transition: none !important;
}

/* RESPONSIVE SIZING - Defined on the .carousel-item to control viewport exposure */

@media (min-width: 1200px) {
  /* DESKTOP: Show 3 cards comfortably */
  #reviewsCarousel .carousel-item {
      flex: 0 0 calc(33.3333% - 16px); /* 33.33% - total margin (8px left + 8px right) */
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #reviewsCarousel .carousel-item {
      flex: 0 0 calc(50% - 16px);
  }
}
@media (max-width: 767px) {
  #reviewsCarousel .carousel-item {
      flex: 0 0 calc(100% - 16px);
  }
}

/* CAROUSEL CONTROLS (Positioning and Theming) */
.carousel-control-prev,
.carousel-control-next {
  top: 45%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--secondary-accent-color);
  border: 2px solid var(--accent-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transition: all 0.3s ease;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: var(--secondary-accent-color);
  border-color: var(--secondary-accent-color);
  box-shadow: 0 6px 20px rgba(190, 124, 22, 0.6);
  transform: scale(1.05);
}
.carousel-control-prev {
  left: -25px;  /* Move outside the carousel slightly */
}

.carousel-control-next {
  right: -25px;
}


.review-card-group,
.review-card:last-child,
.reviews-count {
  /* These styles were either unused or superseded by the new flex logic */
  margin-right: unset !important;
}
@media (max-width: 767px) {
  .carousel-control-prev,
  .carousel-control-next {
    top: 50%;
    width: 40px;
    height: 40px;
    left: -10px;
    right: -10px;
  }
}
/* ------------------------------------------- */
/* Why Choose Us Section Styling */
/* ------------------------------------------- */
.why-choose-us-section {
  background-color: var(--surface-color); 
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* SECTION TITLE (Keep as is) */
.why-choose-us-section .section-title {
  font-family: var(--heading-font); 
  font-size: 2.5rem;
  color: var(--heading-color);
  text-transform: uppercase;
  font-weight: 700;
}

/* FEATURE ITEM CONTAINER: Add padding and rounded corners for a 'box' look */
.why-choose-us-section .feature-item {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center; 
  cursor: pointer; 
  padding: 30px 15px; 
  border-radius: 12px; 
  background-color: var(--surface-color); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
  transition: all 0.4s ease-out; 
}

/* New: Make the whole box lift and get a pronounced shadow on hover */
.why-choose-us-section .feature-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* FEATURE ICON CONTAINER: The icon and badge need specific alignment */
.why-choose-us-section .feature-icon {
  color: var(--accent-color); 
  margin-bottom: 1rem;
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;      
  justify-content: center; 
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative; 
}

/* Hover Effect (Keep as is) */
.why-choose-us-section .feature-item:hover .feature-icon {
  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  transform: translateY(-5px);
}

/* Icon Sizing (Keep as is) */
.why-choose-us-section .feature-icon i {
  font-size: 3.5rem;
  line-height: 1;
  /* Ensure the icon itself is contained */
  z-index: 1; 
}

/* Specific styling for the "FREE" badge: Adjust positioning if needed */
.why-choose-us-section .free-badge {
  position: absolute;
  top: 0px; 
  right: 0px; 
  transform: translate(10%, -10%); 
  
  background-color: var(--secondary-accent-color);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 2px 6px; 
  border-radius: 5px;
  text-transform: uppercase;
  z-index: 10;
}

/* FEATURE TITLE: Ensure it uses the default font and is centered */
.why-choose-us-section .feature-title {
  color: var(--default-color); 
  font-weight: 700;
  margin-top: 0.5rem;
  /* Ensure no residual alignment issues */
  text-align: center; 
  width: 100%; /* Take full width to respect parent's centering */
}


/*----------------------------------------
Products Section
------------------------------*/
/* --- Sidebar Layout and Aesthetics --- */
.sidebar-filter {
  border-right: 1px solid #ddd;
  /* Adjusted min-height to account for the header spacer */
  min-height: calc(100vh - 80px); 
  /* CRITICAL FIX: Ensures the sidebar is below the header and stays visible */
  position: sticky;
  top: 80px; 
  background-color: white; 
  padding-top: 20px !important; /* Added padding to align content better */
}

/* --- Main Content Area Spacing --- */
.product-page-content {
  /* Ensures the row starts correctly */
  padding-top: 0; 
  padding-bottom: 50px;
}

.main-content-area {
  /* CRITICAL FIX: Adds space above the main content to match the sidebar's sticky start */
  padding-top: 20px !important; 
  min-height: calc(100vh - 80px); /* Keeps main content area tall */
}

.main-title {
  font-weight: 700;
}

/* --- Filter Groups --- */
.filter-group {
  border-top: 1px solid #ddd; 
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0 !important;
}

.filter-heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: #333; /* Darker heading color for better contrast */
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer; 
}

/* Category Links */
.filter-category-link {
  display: block;
  color: #777;
  text-decoration: none;
  padding: 3px 0;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.filter-category-link:hover,
.filter-category-link.active {
  color: #ff6530; 
  font-weight: 600;
}

/* --- Price Slider Customization (CRITICAL) --- */
.price-range-group {
  position: relative; 
  padding-bottom: 40px; 
}

.price-slider-track {
  position: relative;
  height: 5px;
  background: #ccc; /* Default track color */
  border-radius: 5px;
  margin-top: 25px; 
}

.price-range-slider {
  position: absolute;
  width: 100%;
  height: 0; 
  background: none;
  pointer-events: none; 
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
}

/* Custom Thumbs for Webkit (Chrome/Safari) */
.price-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  background: #ff6530; 
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: -8px; 
}

/* Custom Thumbs for Firefox */
.price-range-slider::-moz-range-thumb {
  pointer-events: all;
  width: 18px;
  height: 18px;
  background: #ff6530;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Price Input Fields */
.price-inputs {
  margin-top: 10px;
}
.price-inputs .form-control {
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
}
.price-inputs .input-group-text {
  font-size: 0.9rem;
  padding: 0.2rem 0.5rem;
}


/* --- Top Controls --- */
.top-controls-container {
  background-color: white;
  border: 1px solid #f0f0f0;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

.view-as-label, .control-label {
  font-weight: 500;
  color: #333 !important;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.sort-control {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 0.25rem 1rem;
  height: calc(1.5em + 0.5rem + 2px); 
}

.active-view-icon { color: #ff6530; font-size: 1.2rem; cursor: pointer; }
.inactive-view-icon { color: #ccc; font-size: 1.2rem; cursor: pointer; }

/* Apply Filters Button */
#apply-filters-btn {
  background-color: #ff6530;
  color: white;
  font-weight: 700;
  border: none;
  transition: background-color 0.2s;
  text-transform: uppercase;
}
#apply-filters-btn:hover {
  background-color: #e55c2c;
}

/*--------------------
      Contact
-----------------*/
.map-container {
  position: relative;
  width: 100%;
  height: 350px; 
  overflow: hidden;
}
.map-container iframe {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.btn-custom-orange {
  background-color: #ea580c; /* Orange-600 */
  border-color: #ea580c;
  color: white;
  font-weight: bold;
  transition: background-color 0.3s;
}
.btn-custom-orange:hover {
  background-color: #c2410c; /* Darker orange on hover */
  border-color: #c2410c;
  color: white;
}

.banner{
    padding-top: 120px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center; 
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.highlight-section {
  background: linear-gradient(to bottom right, #ffedd5, #fdba74); 
}

.product-image {
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
  object-fit: cover;
  height: 250px; 
}

.product-card:hover .product-image {
  transform: scale(1.03);
}

.section-title {
  font-family: serif; 
  font-weight: 700;
}

.product-card {
  background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.homebanner{
  background-image: url('../img/homebanner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 120vh;
}
.about-section {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Custom style for the image container to simulate the 'card' look */
.image-card {
  border-radius: 1rem; /* Rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  position: relative;
  overflow: hidden;
}

/* Style for the simulated video play button */
.play-icon-overlay {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  background-color: white;
  color: #ea580c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.play-icon-overlay:hover {
  transform: scale(1.05);
}
.about-title-serif, .section-title-serif, .section-subtitle-serif {
  font-family: 'Times New Roman', serif;
  font-weight: 500;
}
.lead, .story-text, .why-us-title, .why-us-text {
  font-family: Arial, sans-serif;
}

/* --- Our Story Section --- */
.our-story-section {
  background-color: white;
}
.section-subtitle-serif {
  font-size: 1.8rem;
  font-weight: 600;
}
.story-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
}
/* Chef Image Floating Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animated-chef {
  animation: float 3s ease-in-out infinite;
  border: 6px solid #fff;
}

/* Title & Text */
.chef-title-serif, 
.section-subtitle-serif {
  font-family: 'Times New Roman', serif;
  font-weight: 600;
  color: #2c3e50;
}

.chef-story-text, 
.story-text {
  font-size: 1rem;
  line-height: 1.8;
  text-align: justify;
}

/* Image Hover Effect */
.hover-scale {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* --- Why Choose Us Section --- */
.why-us-section {
  background: linear-gradient(to bottom right, #ffedd5, #fdba74); 
}
.why-us-section .section-title-serif {
  font-size: 2.5rem;
}
.why-us-section .text-muted {
  font-size: 1.1rem;
}

.why-us-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* Ensure uniform height in the row */
}

/* Hover Effect on Why Us Card */
.why-us-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255, 101, 48, 0.2); /* Orange glow effect */
}

.why-us-icon {
  font-size: 3rem;
  color: #ff6530; /* Your primary brand color */
}

.why-us-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: #333;
}
.why-us-text {
  font-size: 0.95rem;
  color: #666;
}
.about-hero{
  background-image: url('../img/aboutbanner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 30vh;
  margin-top: 120px;
}
.about-hero .container h1, .about-hero .container p{
  color: white;
  text-align: center;
  align-items: center;
}
/*-------
About owner
------*/

.chef-section {
  background-color: white; 
  padding: 60px 0;
}

.chef-image-container {
  position: relative;
  width: 300px;
  height: 300px; 
  border-radius: 50%; 
  display: flex; 
  justify-content: center;
  align-items: center;
  margin: 0 auto; 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden; 
}

.chef-image-container img {
  max-width: 90%; 
  max-height: 90%; 
  border-radius: 50%; 
}


/* --- Animation for the Chef Image --- */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); } /* Adjust distance as needed */
  100% { transform: translateY(0px); }
}

.animated-chef {
  animation: float 3s ease-in-out infinite; /* 3 seconds duration, smooth, infinite loop */
}


/* --- Text Styling --- */
.chef-title-serif {
  font-family: 'Times New Roman', serif;
  font-weight: 500;
  font-size: 2.2rem;
  color: #333;
  text-align: left; /* Align to the left in its column */
}

.chef-story-text {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  text-align: justify; /* Justify text for a clean block look */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) { 
  .chef-title-serif {
      text-align: center; 
      margin-top: 30px;
  }
  .chef-story-text {
      text-align: center;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: #dc3545;
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-contact {
  margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-contact .contact-box {
    flex-direction: column;
    text-align: center;
  }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
  flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
  .terms-of-service .tos-contact {
    display: none;
  }

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
  font-size: 1rem;
  line-height: 1.7;
}

.privacy .privacy-header {
  margin-bottom: 60px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 40px;
}

.privacy .privacy-header .header-content .last-updated {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
}

.privacy .privacy-header .header-content h1 {
  font-size: 2.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-header .header-content .intro-text {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.privacy .privacy-content .content-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .content-section:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 25px;
  font-weight: 600;
}

.privacy .privacy-content .content-section h3 {
  font-size: 1.4rem;
  color: var(--heading-color);
  margin: 30px 0 20px;
  font-weight: 500;
}

.privacy .privacy-content .content-section p {
  margin-bottom: 20px;
}

.privacy .privacy-content .content-section p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.privacy .privacy-content .content-section ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.privacy .privacy-content .content-section ul li:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.privacy .privacy-contact {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-contact h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-contact p {
  margin-bottom: 20px;
}

.privacy .privacy-contact .contact-details {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
}

.privacy .privacy-contact .contact-details p {
  margin-bottom: 10px;
}

.privacy .privacy-contact .contact-details p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-contact .contact-details p strong {
  color: var(--heading-color);
  font-weight: 600;
}

@media print {
  .privacy {
    font-size: 12pt;
    line-height: 1.5;
  }

  .privacy .privacy-header {
    text-align: left;
    border-bottom: 1pt solid #000;
    padding-bottom: 20pt;
    margin-bottom: 30pt;
  }

  .privacy h1 {
    font-size: 24pt;
  }

  .privacy h2 {
    font-size: 18pt;
    page-break-after: avoid;
  }

  .privacy h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }

  .privacy p,
  .privacy ul {
    page-break-inside: avoid;
  }

  .privacy .contact-details {
    border: 1pt solid #000;
    padding: 15pt;
  }
}

@media (max-width: 767px) {
  .privacy .privacy-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }

  .privacy .privacy-header .header-content h1 {
    font-size: 2.2rem;
  }

  .privacy .privacy-header .header-content .intro-text {
    font-size: 1.1rem;
  }

  .privacy .privacy-content .content-section {
    margin-bottom: 40px;
  }

  .privacy .privacy-content .content-section h2 {
    font-size: 1.6rem;
  }

  .privacy .privacy-content .content-section h3 {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 120px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 97%) 100%);
}

.error-404 .error-number {
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 300;
  color: color-mix(in srgb, var(--heading-color), transparent 15%);
  line-height: 0.8;
  margin-bottom: 40px;
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}

.error-404 .error-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.error-404 .error-description {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-404 .error-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 80px;
}

@media (min-width: 576px) {
  .error-404 .error-actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

.error-404 .error-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid var(--accent-color);
}

.error-404 .error-actions .btn-primary:hover {
  background-color: transparent;
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-primary i {
  font-size: 18px;
}

.error-404 .error-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--heading-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.error-404 .error-actions .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-secondary i {
  font-size: 18px;
}

.error-404 .helpful-links {
  text-align: center;
}

.error-404 .helpful-links h3 {
  font-size: 24px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 40px;
}

.error-404 .helpful-links .links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.error-404 .helpful-links .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background-color: var(--surface-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--default-color);
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.error-404 .helpful-links .link-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .helpful-links .link-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item span {
  font-size: 16px;
  font-weight: 400;
}

.error-404 .helpful-links .link-item:hover i {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .error-404 {
    padding: 80px 0;
  }

  .error-404 .error-actions {
    margin-bottom: 60px;
  }

  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: 1fr;
  }
}
/*--------------------------
Product Page
--------------------------*/
   /* General Layout & Typography */
   .product-page-filter-title,
   .product-page-title,
   .product-page-recently-viewed-title {
       color: var( --default-color);
       font-weight: 700;
   }

   .product-page-filter-title {
       font-size: 1.1rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .product-page-title {
       font-size: 2rem; /* Slightly larger title */
       margin-bottom: 20px;
       font-weight: 800;
   }

   .product-page-recently-viewed-title {
       font-size: 1.5rem;
   }

   /* Filter Sidebar Styles */
   .product-page-filter-card {
       border: 1px solid #e9ecef;
       border-radius: 8px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Soft shadow on filters */
   }

   .product-page-filter-list a {
       color: var( --default-color);
       text-decoration: none;
       padding: 5px 0;
       display: block;
       font-size: 0.95rem;
       transition: color 0.2s;
   }

   .product-page-filter-list a:hover,
   .product-page-filter-list a.active {
       color: var(--accent-color);
       font-weight: 600;
   }

   /* Price Filter Input and Button */
   .product-page-price-input {
       text-align: center;
       max-width: 80px;
       height: 38px;
       border-radius: 5px;
       border: 1px solid #ccc;
       font-size: 0.9rem;
       padding: 0.375rem 0.5rem;
   }

   .product-page-btn-apply-filter {
       background-color: var(--accent-color);
       color: white;
       font-weight: 600;
       border: none;
       border-radius: 5px;
       padding: 10px 0;
       transition: background-color 0.3s;
       text-transform: uppercase;
   }

   .product-page-btn-apply-filter:hover {
       background-color: #e05c2a;
   }

   /* Product Controls (View/Sort Bar) */
   .product-page-controls span {
       color: #6c757d;
       font-weight: 500;
   }

   .product-page-custom-select-width {
       width: 150px !important; /* Fixed width for better control */
   }

   .product-page-controls .btn-group-sm .btn {
       border-color: #ddd;
       color: #6c757d;
   }

   .product-page-controls .btn-group-sm .btn.active {
       background-color: var(--accent-color);
       border-color: var(--accent-color);
       color: white;
   }

   /* --------------------------------- */
   /* PREMIUM PRODUCT CARD STYLES (New) */
   /* --------------------------------- */
   .product-page-product-card {
       border: 1px solid #f0f0f0;
       border-radius: 10px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
       overflow: hidden;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       height: 100%;
   }

   .product-page-product-card:hover {
       transform: translateY(-5px);
       box-shadow: var(--premium-shadow);
   }

   .product-page-product-img {
       position: relative;
       overflow: hidden;
       height: 220px; /* Slightly taller image container */
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #f8f9fa; /* Light background for image */
   }

   .product-page-product-img img {
       width: 100%;
       height: 100%;
       object-fit: contain; /* Use contain to ensure full image visibility */
       padding: 15px; /* Padding for the image inside the container */
       transition: transform 0.5s ease;
   }
   
   .product-page-product-card:hover .product-page-product-img img {
       transform: scale(1.05);
   }

   .product-page-discount-badge {
       position: absolute;
       top: 10px;
       left: 10px;
       background-color: #dc3545;
       color: white;
       padding: 4px 10px;
       border-radius: 5px;
       font-size: 0.8rem;
       font-weight: 700;
       z-index: 10;
   }

   .product-page-hover-icons {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       opacity: 0;
       transition: opacity 0.3s ease;
       display: flex;
       gap: 10px;
   }

   .product-page-product-card:hover .product-page-hover-icons {
       opacity: 1;
   }

   .product-page-hover-icons a {
       display: block;
       width: 40px;
       height: 40px;
       line-height: 40px;
       text-align: center;
       background-color: white;
       color: var(--accent-color);
       border-radius: 50%;
       font-size: 1.1rem;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       transition: background-color 0.2s, color 0.2s;
   }

   .product-page-hover-icons a:hover {
       background-color: var(--accent-color);
       color: white;
   }

   .product-page-name {
       font-size: 1.15rem;
       font-weight: 600;
       color: var( --default-color);
   }

   .product-page-old-price {
       color: #adb5bd;
       text-decoration: line-through;
       font-size: 0.9rem;
   }

   .product-page-new-price {
       color: var(--accent-color);
       font-weight: 700;
       font-size: 1.2rem;
   }

   .product-page-add-to-cart-btn {
       background-color: var(--accent-color);
       color: white;
       font-weight: 600;
       text-transform: uppercase;
       border-radius: 20px; /* Highly curved button */
       padding: 8px 20px;
       transition: background-color 0.3s;
       border: 2px solid var(--accent-color);
       width: 100%;
       max-width: 200px; /* Constraint width */
       position: relative;
       overflow: hidden;
   }

   .product-page-add-to-cart-btn:hover {
       background-color: white;
       color: var(--accent-color);
   }
   
   /* Show More Button (Custom Curved Style) */
   .product-page-btn-show-more {
       border: 2px solid var(--accent-color);
       color: var(--accent-color);
       background-color: white;
       padding: 10px 40px;
       border-radius: 25px;
       font-weight: 600;
       font-size: 0.9rem;
       transition: all 0.3s;
   }

   .product-page-btn-show-more:hover {
       background-color: var(--accent-color);
       color: white;
   }


   /* Price Slider Container CSS */
   .product-page-slider-container {
       position: relative;
       padding: 10px 0; 
   }

   .product-page-range-slider-wrap {
       position: relative;
       height: 10px;
   }

   .product-page-range-min, .product-page-range-max {
       position: absolute;
       width: 100%;
       height: 10px;
       background: none;
       pointer-events: none; 
       z-index: 2; 
   }

   .product-page-range-min { z-index: 3; }

   /* The range input styles already use attribute selectors, which are fine, but for completeness, I'll update the thumb margin to use the prefixed class if possible, or leave as is if not. Leaving as is to avoid over-complication of generic input types. */
   /* ... (input[type="range"] styles remain as they target generic input types) ... */


   /* Recently Viewed Section Specifics */
   .product-page-product-item-small .product-image-container {
       height: 150px;
       position: relative;
       background-color: #f8f9fa;
   }

   .product-page-product-item-small .product-image-container img {
       object-fit: contain;
       padding: 10px;
   }

   .product-page-product-wishlist-small {
       position: absolute;
       bottom: 5px;
       right: 5px;
       color: var(--accent-color); 
       font-size: 1.1rem;
   }

   .product-page-small-card-title {
       font-size: 0.95rem;
       font-weight: 600;
   }

   .product-page-small-card-price {
       font-size: 0.85rem;
       margin-bottom: 0;
       color: var(--accent-color);
       font-weight: 700;
   }

   .product-page-product-item-small .btn-sm {
       padding: 5px 10px;
       font-size: 0.75rem;
       border-radius: 15px;
       background-color: var(--accent-color);
   }
   
   /* Recently Viewed Section Specifics (Refined) */
   .product-page-product-item-small .product-page-product-card {
       padding: 0; /* Remove padding if added by premium card style */
   }

   .product-page-product-item-small .product-image-container {
       height: 150px; /* Kept previous height */
       position: relative;
       background-color: #f8f9fa;
       padding: 10px; /* Ensures image isn't right against the edge */
       display: flex; /* Centers the image */
       align-items: center;
       justify-content: center;
   }

   .product-page-product-item-small .product-image-container img {
       width: 100%; /* Image fills its container */
       max-height: 100%; /* Important: Prevents image from overflowing the 150px height */
       object-fit: contain; /* Ensures the whole product is visible, not cropped */
       padding: 0; /* Clear previous padding */
   }

   /* FIX: The text info block needs space. */
   .product-page-product-item-small .card-body {
       padding: 10px 5px; /* Reduced padding for compact look */
   }

   /* Ensure text elements have correct styling if they were being hidden by size constraints */
   .product-page-small-card-title {
       font-size: 0.95rem;
       font-weight: 600;
       margin-bottom: 5px !important;
   }

   .product-page-small-card-price {
       font-size: 0.85rem;
       margin-bottom: 5px !important;
       color: var(--accent-color);
       font-weight: 700;
   }

   .product-page-product-item-small .btn-sm {
       /* Ensure the quick add button is visible */
       display: block;
       margin: 5px auto;
       width: 90%;
   }