/* 1. Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Mada:wght@400;700&display=swap');

/* 2. Neo-Kufi Font Utility */
.neo-kufi {
  font-family: 'Mada', sans-serif;
  font-weight: 200;          /* Light weight; use 700 for bold */
  letter-spacing: 0.05em;
  text-transform: none;
  line-height: 1.2;
}

/* 3. Global Text Color */
body,
 h3 {
  color: #445351;
}

/* 4. Inherit Color for Interactive Elements */
a,
button,
input,
textarea,
select,
label {
  color: inherit;
}

/* 5. Top Navbar */
.top-navbar {
  background-color: #ffffff !important;
}

/* 6. Search Input */
.s-search-input {
  background-color: #d2dda9 !important;
}

/* 7. Product Card Backgrounds */
.s-product-card-image-contain.lazy.loaded {
  background-color: #f9fafb;
}


/* 8. Hero Slider */
.s-block--hero-slider .swiper-slide {
  position: relative;
  height: 20rem;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}



/* 10. Responsive Heights */
@media (min-width: 640px) {
  .s-block--hero-slider .swiper-slide {
    height: 24rem;
  }
  .s-block--slider-with-bg .slider-bg {
    height: 464px;
  }
}

/* 11. Button Styles */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn,
.button-primary {
  background-color: transparent !important;
  border: 1px solid #d2dda9 !important;
  color: #445351 !important;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.btn:hover,
.button-primary:hover {
  background-color: #d2dda9 !important;
  border-color: #445351 !important;
  color: #445351 !important;
}

/* 12. Testimonial Icon */
.s-reviews-testimonial__icon svg {
  fill: #d2dda9 !important;
}
.s-fast-checkout-button.outline {
  background-color: transparent !important;
  border: 1px solid #d2dda9 !important;
  color: #445351 !important;
}

.s-fast-checkout-button.outline:hover {
  background-color: #d2dda9 !important;
  border-color: #445351 !important;
  color: #445351 !important;
}
@media (min-width: 640px) {
  .sm\:gap-8 {
    gap: 1rem;  /* reduced from 2rem */
  }
}
.banner-entry h3.text-with-border {
  border-radius: 0.375rem;
  border-style: dashed;
  border-color: #d2dda9 !important;  /* your primary color */
  color: #d2dda9 !important;         /* your text color */
}
.s-block__title h2 {
    position: relative;
    font-size: 2.5rem;
    line-height: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.leading-12{
font-size: 2.5rem;
margin-bottom: 1rem;
color: #ffffff !important;
}
.s-slider-block__title h2{
font-size: 2.5rem;
margin-bottom: 1rem;
}
.s-reviews-header{
font-size: 2.5rem;
margin-bottom: 1rem;
}
.leading-tight{
font-size: 4rem;
}
.line-clamp-2{
font-size: 1.2rem;
}
.text-sm{
font-size: 0.8rem;
}
/* Default dark text */
.main-menu li > a {
  color: #445351;
  transition: color 0.2s ease-in-out;
}

/* On hover, switch to lighter */
.main-menu li > a:hover {
  color: #d2dda9;
}
/* Default dark link color */
.s-product-card-content-title a {
  color: #445351;
  transition: color 0.2s ease-in-out;
}

/* Lighter color on hover */
.s-product-card-content-title a:hover {
  color: #d2dda9;
}
.header-btn {
  border: none !important;
  /* if there’s an outline on focus you can also add: */
  outline: none !important;
}

.s-fast-checkout-button.outline {
    background-color: transparent;
    border-color: #d2dda9;
    color: #d2dda9;
}
.text-primary{
color: #445351; !important;
}
/* Make logo a bit bigger */
.navbar-brand img {
     max-height: 130px !important;  /* was probably around 60px, now a little bigger */
    width: auto !important;
}


/* Align logo vertically with menu */
.navbar-brand  {
    display: flex;
    align-items: center;
}
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 80px !important;
    }
}