/*
  Mobile Navigation Styles
  This media query hides the main navigation on smaller screens.
*/
@media (min-width: 768px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-width: unset;
  }
}
@media (max-width: 767px) {
  .main-nav {
    display: none;
  }
}

/* 
  Add to Cart Animation
  This provides a visual feedback (bounce) when an item is added to the cart.
*/
.cart-bounce {
  animation: cartBounce 0.4s cubic-bezier(.4,2,.3,1);
}
@keyframes cartBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
/* 
  Z-index Management
  Ensures that mobile buttons are always clickable and appear above other overlays.
*/
.fixed-contact-bar,
.cart-btn,
.main-nav.active {
  z-index: 2000;
}

/*
  Mobile-Specific Styles
  This media query contains styles for devices with a max-width of 767px.
  It includes adjustments for navigation links, footer, and the fixed contact bar.
*/
@media (max-width: 767px) {
  .nav-links a {
    background: #f6faf7;
    padding: 8px 12px; /* Smaller padding */
    border-radius: 4px;
    margin-bottom: 4px; /* Smaller margin */
    width: 100%;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background 0.2s;
  }
  .nav-links a:hover {
    background: #fbe9e7;
  }
  .modern-footer {
    padding-bottom: 70px;
  }
  .fixed-contact-bar .cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    font-size: 1.1em;
    padding: 10px 18px;
    border-radius: 999px;
    background: #ff5722;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 1501;
  }
  .fixed-contact-bar .cart-btn .cart-count {
    background: #fff;
    color: #ff5722;
    border: 1px solid #ff5722;
    margin-left: 6px;
  }
  .main-nav {
    display: none;
  }
  .fixed-contact-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--card);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    z-index: 1000;
  }
  .cart-btn {
    position: static;
    margin: 0;
    width: auto;
    max-width: none;
    box-shadow: none;
    background: #ff5722;
    color: #fff;
    border: none;
    font-size: 1.1em;
    z-index: 1501;
    border-radius: 999px;
  }
  .cart-btn .cart-count {
    background: #fff;
    color: #ff5722;
    border: 1px solid #ff5722;
  }
}

/*
  Global Variables
  This section defines the color palette for the entire site using CSS variables.
  This makes it easy to maintain a consistent color scheme.
*/
:root {
  --bg: #f6faf7;
  --card: #fff;
  --text: #0f172a;
  --muted: #475569;
  --acc: #16a34a;
  --bad: #ef4444;
}

/*
  General Styles
  This section contains basic styles for the entire site, such as box-sizing and image responsiveness.
*/
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
html {
    overflow-x: hidden;
}

/*
  Body Styles
  This sets the default typography, background color, and text color for the site.
  It also hides horizontal overflow.
*/
body {
  margin: 0;
  font-family:
    "LiAdorNoirrit", "Solaiman Lipi",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-weight: 400; /* Set to regular weight */
}

/*
  Container and Layout Styles
  This section defines the main container and grid system for the site.
  The media queries adjust the column spans for larger screens.
*/
html, body {
  width: 100%;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
.secIn {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.cart-btn {
  position: relative;
  border: 1px solid #e5e7eb;
  background: var(--card);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff5722;
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 12px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.products {
  grid-column: span 12;
}
@media (min-width: 900px) {
  .products {
    grid-column: span 8;
  }
}
.cart {
  grid-column: span 12;
}
@media (min-width: 900px) {
  .cart {
    grid-column: span 4;
    position: sticky;
    top: 16px;
    height: max-content;
  }
}

/*
  Card Styles
  This section defines the appearance of card elements used for products and the shopping cart.
  It includes background color, border-radius, shadow, and flex properties.
*/
.card {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(1, 5, 3, 0.1);
}
.p-16 {
  padding: 20px;
}


/*
  Product Grid and Item Styles
  This section defines the layout and appearance of the product grid and individual product cards.
  It includes the responsive grid layout, image styling, and thumbnail display.
*/
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.product {
  display: flex;
  flex-direction: column;
  min-height: 350px;
}


.product img.main-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: #fff;
  border-radius: 12px;
  transition: opacity 0.3s ease;
}

.thumbs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;
}
.thumbs img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/*
  Typography Styles
  This section defines the styling for various text elements, including titles, product sub-headlines,
  prices, and muted text.
*/
.title {
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid rgba(229,231,235,0.6);
  border-top: 1px solid rgba(229,231,235,0.6);
  color: var(--acc);
  font-size: 18px;
}

/* Subheadline shown above product name inside product cards */
.product .product-subheadline {
  text-align: center;
  color: #ff6497; /* pink */
  font-size: 0.7rem; /* even smaller as requested */
  margin-top: 15px; /* add top margin as requested */
  margin-bottom: 6px;
  font-weight: 600;
  opacity: 0.6
}

.card.product .title {
  font-size: 1.05rem;
  color: var(--acc);
  border-top: 1px solid rgba(22,163,74,0.5); /* Green top border @60% */
  border-bottom: 1px solid rgba(22,163,74,0.5); /* Green bottom border @60% */
  padding-top: 8px; /* Added padding-top for spacing */
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.price {
  color: var(--acc);
  font-weight: 950;
 font-size: larger;
}
.muted {
  color: var(--muted);
  font-size: 0.9rem;
}

/*
  Button and Quantity Input Styles
  This section defines the styling for buttons and the quantity input fields,
  ensuring a consistent and user-friendly design for all interactive elements.
*/
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.row h2 {
  text-align: center;
  width: 100%;
  margin: 5px auto;
  display: block;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  gap: 6px;
}
.qty button {
  border: 0;
  background: #f1f5f9;
  padding: 2px 6px;
  cursor: pointer;
  min-width: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qty button:hover { background: #e2e8f0; }
.qty input {
  width: 18px;
  text-align: center;
  border: 0;
  padding: 0px 0;
  font-size: 1rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.btn-primary {
  background: var(--acc);
  color: #fff;
  transition: background-color 0.3s ease;
}
.btn-primary:hover {
  background-color: #126d29;
}
.btn-ghost {
  background: #c5ccd2;
  color: var(--text);
}
.btn-ghost:hover {
  background-color: #dae7f4;
}
.btn-bad {
  background: var(--bad);
  color: #fff;
}

/*
  Form Styles
  This section defines the styling for form elements, including inputs, labels, and the overall form layout.
*/
.card h2 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  display: block;
}

.totals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0eeee;
  margin-top: 12px;
  padding-top: 12px;
}
form {
  display: grid;
  gap: 10px;
}
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #fff;
}
label {
  font-size: 0.9rem;
  color: var(--muted);
}
.line {
  height: 1px;
  background: #e5e7eb;
  margin: 10px 0;
}
.form-title {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  display: block;
  color: var(--acc);
  margin-top: 30px;
}
.chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.list {
  display: grid;
  gap: 8px;
  color: rgb(3, 43, 4);
  border: 1px dashed #ff0263;
  padding: 10px;
  margin-bottom: 10px;
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.item .name {
  flex: 1;
}
.right {
  text-align: right;
}
.desc {
  overflow: hidden;
  max-height: 0; /* Initially hidden */
  transition: max-height 0.5s ease-in-out;
  flex-grow: 1;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 300; /* Set to light weight */
}
.desc.show {
  max-height: 1000000vh; /* A large value to show the full content */
}
.see-more {
  cursor: pointer;
  color: var(--acc);
  font-size: 0.85rem;
  margin-top: 4px;
  display: inline-block;
  text-align: center;
}
.modern-footer {
  background: var(--text);
  color: #fff;
  padding: 40px 16px;
  text-align: center;
}
.modern-footer .footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-bottom: 50px;
  justify-content: space-evenly;
}
.modern-footer .footer-section h3 {
  color: var(--acc);
  margin-bottom: 15px;
  font-size: 1.2rem;
}
.modern-footer .footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modern-footer .footer-section ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  gap: 10px;
}
.modern-footer .footer-section ul li i {
  font-size: 1.2rem;
  color: var(--acc);
}
.modern-footer .footer-section a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.modern-footer .footer-section a:hover {
  color: var(--acc);
}
.modern-footer .copyright p {
  font-size: 0.9rem;
  margin: 0;
}
@media (min-width: 768px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 40%;
    right: 0;
    left: auto;
    background: transparent;
    box-shadow: none;
    padding: 0 48px;
    min-width: unset;
  }
}


.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  min-height: 64px;
}
/* Add top padding to container for fixed header */
.container {
  padding-top: 16px; /* Adjusted for header height */
}
.main-header .logo img {
  height: 60px; /* Increased logo size */
  width: auto;
}
.brand {
  display: none;
}
@media (min-width: 768px) {
  .services-section .catalogue-text h3::after {
    left: 0;
    transform: translateX(0);
  }
}
.catalogue-text p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.8;
  margin-bottom: 30px;
}

.services-section .service-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}
.services-section .service-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--card);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.services-section .service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.services-section .service-item .icon-list {
  font-size: 3rem;
  color: #0cc81c;
  line-height: 1;
  flex-shrink: 0;
}
.services-section .service-item .service-text h4 {
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 8px;
}
.services-section .service-item .service-text p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 767px) {
  .modern-footer {
    padding: 30px 10px;
  }
  .modern-footer .footer-container {
    flex-direction: column;
  }
  .form-row-responsive > div {
    width: 100%;
    flex: 1;
  }
}

.pay-method-title {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #126d29;
  background: #fbe9e7;
  padding: 6px 0;
  border-radius: 8px;
  font-size: 1.15em;
  margin-bottom: 8px;
}
.cart .card {
  background: #fff;
  border: 1.5px solid var(--acc);
}
.products .card {
  margin-bottom: 32px;
 
}
.cart .card {
  margin-top: 32px;
}
.thankyou-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.thankyou-modal .thank-container {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 90%;
}
.main-nav {
  display: none;
}
.nav-links {
  list-style: none;
  padding-left: 32px;
  margin: 0;
  display: flex;
  gap: 36px;
}
.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  transition: color 0.3s ease;
  padding: 12px 28px 12px 24px;
  font-size: 1.08em;
  border-radius: 6px;
}
.nav-links a:hover {
  color: #ff5722;
}
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
@media (min-width: 768px) {
  .main-nav {
    display: block;
  }
  .mobile-nav-toggle {
    display: none;
  }
}
@media (max-width: 767px) {
  .mobile-nav-toggle {
    display: none !important; /* Hide hamburger button on mobile */
    margin-left: auto;
    order: 2;
  }
  .logo {
    order: 1;
  }
  .main-nav {
    display: none !important; /* Hide main-nav on mobile */
    position: absolute;
    top: 100%; /* Position below header */
    left: 0;
    right: 0;
    background: var(--card);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
  }
  .main-nav.active {
    display: block;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch; /* Make links full-width */
    text-align: center;
    gap: 0;
    padding: 0;
  }
  .mobile-nav-toggle {
    display: none;
  }
}
.lazyYt {
  position: relative;
  cursor: pointer;
  aspect-ratio: 16/9;
}
.lazyYt .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  z-index: 1;
}
.lazyYt:hover .play {
  transform: translate(-50%, -50%) scale(1.1);
}
.lazyYt .play i {
  color: red;
  font-size: 80px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.lazyYt img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lazyYt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-title {
  text-align: center;
}
.radio-label {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.05em;
  color: var(--text);
}
.radio-label input[type="radio"] {
  margin-right: 5px;
}
.fixed-contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--card);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  z-index: 1000;
}
.fixed-contact-bar .contact-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-size: 0.8em;
  transition: transform 0.2s ease-in-out;
}
.fixed-contact-bar .contact-icon:hover {
  transform: translateY(-3px);
}
.fixed-contact-bar .contact-icon i {
  font-size: 2.2em;
  margin-bottom: 5px;
}
.fixed-contact-bar .contact-icon.whatsapp i {
  color: #25d366;
}
.fixed-contact-bar .contact-icon.phone i {
  color: #007bff;
}
.fixed-contact-bar .contact-icon.facebook i {
  color: #1877f2;
}
@media (max-width: 767px) {
  .payment-methods {
    gap: 12px;
    align-items: flex-start;
  }
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  overflow: hidden;
}

@media (min-width: 768px) {
  .slideshow-container {
    margin-top: 80px;
  }
}

.slides-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.mySlides {
  min-width: 100%;
}

.dot-container {
  text-align: center;
  padding: 10px 0;
}

.dot {
  cursor: pointer;
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.thankyou-modal .main-title {
  font-size: 1.2em;
  margin: 10px 0;
}

.thankyou-modal .order-received-msg {
  color: #ff5722;
  background-color: #fbe9e7;
  padding: 2px 5px;
  border-radius: 5px;
}

.thankyou-modal .back-to-home {
  margin-top: 15px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .section-heading {
    font-size: 1.5rem;
  }
}
.section-heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #ff5722;
}

@media (max-width: 767px) {
  .video-wrapper {
    max-width: unset;
  }
}
.video-wrapper {
  max-width: 700px;
  margin: 20px auto;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .catalogue-text-long {
    /* no margin on mobile */
  }
}
.catalogue-text-long {
  text-align: center;
  padding: 1rem; /* Reduced padding for minimalistic look */
}

.catalogue-text-long h3 {
  font-size: 1.05rem; /* Matched product title size */
  margin-bottom: 1rem;
}

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

#order-now-special {
  text-decoration: none;
}

.facebook-icon {
  font-size: 1.5em;
  color: #1877f3;
}

.youtube-icon {
  font-size: 1.5em;
  color: #ff0000;
}

.fly-to-cart {
  position: fixed;
  z-index: 2000;
  transition: all 1.5s ease-in-out; /* Slower transition */
  border-radius: 0; /* Square shape */
}

@media (max-width: 767px) {
  .slideshow-container {
    margin-top: 80px;
  }
}

.form-submit-btn {
  width: 100%;
  padding: 15px;
  font-size: 1.2rem;
  margin-top: 10px;
}

.form-row {
  display: flex;
  gap: 12px;
}


.payment-methods {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.category-filter {
  grid-column: span 12;
  margin-bottom: 2rem;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* 10px gap between items */
  margin: 10px auto 10px auto; /* Top and bottom margin 10px */
}
.category-buttons button {
  margin: 2px 0px; /* 2px top/bottom, 0px left/right margin */
  width: calc(50% - 5px); /* Adjusted for 10px gap (10px/2 = 5px per button) and 0px horizontal margin */
  background-color: #fff; /* Changed to white */
  border: 1px solid #999595;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
}
.category-buttons button:hover {
  background-color: #e0e0e0;
}

.category-buttons button.active {
  background-color: var(--acc);
  color: #fff;
  border-color: var(--acc);
}

.category-header {
  text-align: center;
  margin-bottom: 20px;
}

.category-title {
  font-size: 24px; /* Larger than product title (18px) for main heading */
  color: var(--text);
  margin-bottom: 8px;
}

.category-subtitle {
  font-size: 14px; /* Smaller than product title (18px) */
  color: var(--muted);
  margin-bottom: 15px; /* Space between subtitle and buttons */
}

@media (max-width: 767px) {
  /* General Layout */
  .grid {
    grid-template-columns: 1fr; /* Single column layout for mobile */
  }

  .products,
  .cart {
    grid-column: span 1; /* Each takes full width */
  }

  /* Header */
  .main-header {
    flex-wrap: wrap;
    min-height: auto;
    padding: 10px;
  }
  
  .main-nav {
    order: 3;
    width: 100%;
    display: none; /* Hidden by default */
  }
  
  .main-nav.active {
    display: block; /* Shown when toggled */
  }

  .mobile-nav-toggle {
    display: block; /* Show the hamburger menu icon */
    order: 2;
  }

  /* Product Grid */
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 10px;
  }
  .products .card { /* Remove border on mobile for responsiveness */
    border: none;
  }

  /* Ensure individual product cards keep side borders for visual separation */
  .product,
  .product .card,
  .card.product {
    border-left: 1px solid var(--acc);
    border-right: 1px solid var(--acc);
  }

  .card.product .title {
    font-size: 0.9rem;
  }

  /* Footer */
  .modern-footer .footer-container {
    flex-direction: column;
    gap: 30px;
  }
}