body {
  font-family: "Inter", sans-serif;
}

* {
  box-sizing: border-box;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card img {
  flex-shrink: 0;
}

.product-card .p-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card .flex-grow {
  flex-grow: 1;
}

.product-card .mt-auto {
  margin-top: auto;
}

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-card img {
  flex-shrink: 0;
}

.article-card .p-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card .flex-grow {
  flex-grow: 1;
}

.article-card .mt-auto {
  margin-top: auto;
}

.article-card p {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Responsive Typography */
h1 {
  font-size: 2rem; /* Mobile */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.2rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 2.5rem; /* Desktop */
  }
}

h2 {
  font-size: 1.8rem; /* Mobile */
}

@media (min-width: 768px) {
  h2 {
    font-size: 2.2rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 2.5rem; /* Desktop */
  }
}

h3 {
  font-size: 1.4rem; /* Mobile */
}

@media (min-width: 768px) {
  h3 {
    font-size: 1.6rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  h3 {
    font-size: 1.8rem; /* Desktop */
  }
}

/* Ensure buttons don't cut text */
.whitespace-normal {
  white-space: normal;
}

.break-words {
  word-break: break-words;
}

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

/* Hide scrollbar for mobile menu when closed */
.mobile-menu-closed {
  overflow: hidden;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Dark overlay for hero image */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0; /* Hidden by default */
}

.animate-fade-in-up.delay-100 {
  animation-delay: 0.1s;
}
.animate-fade-in-up.delay-200 {
  animation-delay: 0.2s;
}
.animate-fade-in-up.delay-300 {
  animation-delay: 0.3s;
}

/* Fix for Material Symbols outline style */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Custom styles for cart quantity select */
.cart-item-quantity {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}
.complianceCoreSlot {
  margin-top: 2rem; /* Spacing from the element above */
  padding-left: 1.5rem; /* Inner padding on the left side */
  padding-right: 1.5rem; /* Inner padding on the right side */
}

.complianceCoreSlot h1 {
  font-size: 2.25rem; /* Moderately large heading */
  font-weight: 700; /* Bold font weight */
  margin-top: 2rem; /* Space above the heading */
  margin-bottom: 1rem; /* Space below the heading */
  line-height: 1.2; /* Tighter line height for headings */
}

.complianceCoreSlot h2 {
  font-size: 1.875rem; /* Second level heading */
  font-weight: 600; /* Semi-bold font weight */
  margin-top: 1.75rem;
  margin-bottom: 0.875rem;
  line-height: 1.3;
}

.complianceCoreSlot h3 {
  font-size: 1.5rem; /* Third level heading */
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.complianceCoreSlot h4 {
  font-size: 1.25rem; /* Fourth level heading */
  font-weight: 500; /* Medium font weight */
  margin-top: 1.25rem;
  margin-bottom: 0.625rem;
  line-height: 1.5;
}

.complianceCoreSlot h5 {
  font-size: 1.125rem; /* Fifth level heading */
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.complianceCoreSlot p {
  margin-bottom: 1rem; /* Space between paragraphs */
  line-height: 1.6; /* Standard body line height for readability */
}

.complianceCoreSlot p:last-child {
  margin-bottom: 0; /* Remove bottom margin for the last paragraph in the slot */
}

.complianceCoreSlot ul {
  list-style-type: disc; /* Default bullet style */
  margin-top: 1rem; /* Space above the list */
  margin-bottom: 1rem; /* Space below the list */
  padding-left: 2rem; /* Indentation for bullet points */
}

.complianceCoreSlot li {
  margin-bottom: 0.5rem; /* Space between list items */
  line-height: 1.6; /* Standard body line height for list items */
}

.complianceCoreSlot li:last-child {
  margin-bottom: 0; /* Remove bottom margin for the last list item */
}

header {
  .lg\:text-4xl {
    font-size: clamp(16px, 4vw, 22px) !important;
  }
}

#mobile-menu-button {
  margin: 0 !important;
}

@media (max-width: 575px) {
  .h-10.w-auto {
    width: 30px !important;
    height: 30px !important;
  }

  header {
    .text-3xl {
      font-size: 19px !important;
    }
  }

  #cart-items-container {
    .flex.items-center.space-x-4.border-b.border-gray-100.pb-4 {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }

    .flex.items-center.mt-2{
        align-items: center;
        justify-content: center;
    }
  }

  #cart-summary {
    .flex.justify-between.items-center.mb-4 {
      flex-direction: column;
    }
  }
}

#hero {
  height: auto !important;
}