/* 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; /* Keep light background for now, but will adjust slightly */
  --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
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
}

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

a:hover {
  /* Use the darker gold/bronze for a rich hover effect */
  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;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

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

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.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: #352a26;
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.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: 30px;
  margin: 0;
  font-weight: 700;
  color: #352a26;
}

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

.scrolled .header .topbar {
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.scrolled .navmenu a i,
  .navmenu a:focus i {
    font-size: 20px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
    border: 1px solid #e07844;
  }
  /* Custom Style for Login (simple text link) */
.nav-text-link {
  font-size: 16px;
  font-weight: 500;
  color: #352a26; 
  padding: 8px 15px; 
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
}
.nav-text-link:hover {
  color: #ff6530; /* Accent on hover */
}
.header .navmenu {
  display: flex; 
  align-items: center; 
}

/* From Uiverse.io by Madflows */ 
.button {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  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(255, 165, 0, 1) 10.8%, rgba(255, 99, 0, 1) 94.3%);
  
  transition: all 0.475s;
}/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgb(255, 255, 255);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@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 15px;
    font-size: 20px;
    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: 20px;
    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 ul li {
    min-width: 200px;
  }

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

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

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

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

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

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

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

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

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    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: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    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;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    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: 10px 0;
    margin: 10px 20px;
    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: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .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;
  }
}/*--------------------------------------------------------------
# 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
  ---------------*/
  #hero-carousel #shrijiCarousel .carousel-item {
    height: 500px; 
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-color: var(--default-color); /* Themed fallback color */
    text-align: center;
    justify-content: center;
}

/* Indicators Styling */
#shrijiCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: color-mix(in srgb, var(--contrast-color), transparent 50%);
    border: 2px solid var(--contrast-color);
    opacity: 0.8;
    transition: all 0.3s ease;
}

#shrijiCarousel .carousel-indicators button.active {
    background-color: var(--accent-color); 
    border-color: var(--accent-color);
    opacity: 1;
    transform: scale(1.1);
}

/* Controls Styling (FIXED: Single Arrow inside Circle) */
#shrijiCarousel .carousel-control-prev,
#shrijiCarousel .carousel-control-next {
    width: 60px;
    opacity: 1;
    background: none; /* Remove conflicting gradient */
    margin: 0;
    transition: all 0.3s ease;
}

/* Circular Button Base (:after pseudo-element) */
#shrijiCarousel .carousel-control-prev:after,
#shrijiCarousel .carousel-control-next:after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--surface-color); 
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 2px solid var(--accent-color); 
}

#shrijiCarousel .carousel-control-prev:after {
    left: 20px;
}

#shrijiCarousel .carousel-control-next:after {
    right: 20px;
}

/* Circular Button Hover Effect */
#shrijiCarousel .carousel-control-prev:hover:after,
#shrijiCarousel .carousel-control-next:hover:after {
    background-color: var(--secondary-accent-color); 
    border-color: var(--secondary-accent-color);
    box-shadow: 0 4px 15px rgba(190, 124, 22, 0.5);
}

/* Arrow Icon Theming & Positioning (FIXED: Center Icon over Circle) */
#shrijiCarousel .carousel-control-prev-icon,
#shrijiCarousel .carousel-control-next-icon {
    /* Base Icon appearance */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2330140C'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    width: 1.5rem; 
    height: 1.5rem;
    
    /* Center the icon over the circle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; 
    transition: all 0.3s ease;
}

#shrijiCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2330140C'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* Move arrow slightly inside its control area to be over the 40px circle */
#shrijiCarousel .carousel-control-prev-icon { left: calc(50% + 10px); }
#shrijiCarousel .carousel-control-next-icon { left: calc(50% - 10px); }


/* Icon Hover Effect (Switch to white arrow) */
#shrijiCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#shrijiCarousel .carousel-control-next:hover .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

#shrijiCarousel .carousel-control-next:hover .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

    .ticker-banner {
      position: relative;
      /* Richer, warmer gold-to-cream gradient */
      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 {
    /* Use the secondary accent color for a rich separator */
    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);
    /* Use a slightly different marker for more character, like a diamond or star */
    content: "♦"; /* You can also use "•" or "★" */
  }

.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);
      }
      
      

     /* 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 {
  /* Base Card Appearance */
  background-color: var(--surface-color);
  border-radius: 12px; /* Slightly softer corners */
  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; /* Generous internal padding */

  /* Typography */
  font-style: italic;
  line-height: 1.6;
  color: var(--default-color);

  /* Hover Effect */
  transition: all 0.4s ease-out;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(211, 159, 46, 0.2);
  cursor: default;
}

/* Optional: Customer Name/Details */
.customer-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--secondary-accent-color);
  margin-top: 1rem;
  margin-bottom: 0;
  text-transform: uppercase;
}

/* 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 {
  width: 44px;
  height: 44px;
  top: 50%; 
  left: -15px;
  right: -15px;
  background-color: var(--surface-color);
  border: 1px solid var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.carousel-control-next {
  left: auto; /* Reset left position for the next button */
}

.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;
}
.review-card {
  flex-basis: unset; /* Remove conflicting definition */
}
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; /* Slightly larger button area for easier click */
    height: 50px;
    border-radius: 50%;
    opacity: 1; 
    background-color: var(--surface-color); /* White/Cream background */
    border: 2px solid var(--accent-color); /* Richer, prominent gold border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Deeper default shadow */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    margin-left: -35px; /* Pushes the 'prev' control further left */
    margin-right: -35px; /* Pushes the 'next' control further right */
    z-index: 10;
}

/* Hover Effect: Thematic color switch with a glow/lift */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: var(--secondary-accent-color); /* Solid Darker Gold on hover */
    border-color: var(--secondary-accent-color);
    box-shadow: 0 6px 20px rgba(190, 124, 22, 0.6); /* Pronounced gold glow */
    transform: translateY(-50%) scale(1.05); /* Subtle lift and scale */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
    color:  var(--accent-color)
}

/* Final Positioning */
.carousel-control-prev {
    left: 0; 
}

.carousel-control-next {
    right: 0; 
}
/* ------------------------------------------- */
/* 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%;
   }