/* Font Imports */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

/* For Typo Slab, we'll use a fallback system since it's a custom font */
@font-face {
  font-family: "Typo Slab";
  src: local("Roboto Slab"),
    url("../fonts/TypoSlab-Regular.woff2") format("woff2"),
    url("../fonts/TypoSlab-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Typo Slab";
  src: local("Roboto Slab Bold"),
    url("../fonts/TypoSlab-Bold.woff2") format("woff2"),
    url("../fonts/TypoSlab-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", "Arial", sans-serif;
  line-height: 1.6;
  color: #2a2a2a;
  background-color: #fff;
}

a {
  text-decoration: none;
  color: inherit !important;
}

ul {
  list-style: none;
}

.container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Header Styles */
header {
  background-color: #fff;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.logo {
  width: 115px;
  height: 45px;
}

.nav-menu {
  display: flex;
  gap: 40px;
}

.nav-menu a,
.nav-link,
.dropdown-item {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif !important;
  font-size: 15px;
  text-transform: uppercase !important;
  position: relative !important;
  color: #2a2a2a !important;
  padding-bottom: 0;
}

.nav-menu a.active::after,
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #601c4e;
}

.language-selector {
  width: 33px;
  height: 33px;
}
/* Mobil menü gomb (hamburger) */
.mobile-menu-button {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23601c4e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.mobile-menu-button .bar {
  height: 4px;
  width: 100%;
  background-color: #601c4e;
  border-radius: 2px;
}

.language-dropdown {
  position: relative;
}

.language-selector {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.language-selector img {
  width: 100%;
  height: auto;
}

.language-options {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 5px 0;
  z-index: 150;
  border-radius: 6px;
  min-width: 150px;
}

.language-options li {
  padding: 8px 12px;
}

.language-options li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  text-decoration: none;
}

.language-options li a:hover {
  background-color: #f0f0f0;
}

/* Megjelenítés hoverre */
.language-options.show {
  display: block;
}
/* Mobil menü */
@media (max-width: 768px) {
  .mobile-menu-button {
    display: flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    display: none;
  }

  .nav-menu.active {
    display: flex;
    min-width: 250px;
  }

  .header-container {
    position: relative;
  }
}
/* Slider Styles */
.slider {
  background-color: #a7d8e4;
  width: 100%;
  height: 230px;
  position: relative;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.slider-title {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  color: #601c4e;
}

/* Product Menu Styles */
.product-menu {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 20px 0;
}

.product-menu a {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
}

.product-menu a.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #601c4e; /* Default color, will be overridden by category-specific colors */
}

/* Category-specific colors for product menu active indicators */
.product-menu a.active[data-category="zabpelyhek"]::after {
  background-color: #0089ad; /* Blue for zabpelyhek */
}

.product-menu a.active[data-category="tesztak"]::after {
  background-color: #d6cc0a; /* Yellow for tesztak */
}

.product-menu a.active[data-category="granolak"]::after {
  background-color: #601c4e; /* Purple for granolak */
}

.product-menu a.active[data-category="kiemelt"]::after {
  background-color: #601c4e; /* Using purple for kiemelt as default */
}

/* Product Section Styles */
.products-section {
  padding: 50px 0;
}

.products-container-wrapper {
  position: relative;
  margin-top: 30px;
}

.products-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0 auto;
  width: 100%;
  padding: 20px 0;
}

/* Product Card Styles for Kiemelt Category */
.product-card {
  background-color: #fff;
  border-radius: 20px;
  width: 320px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.5s ease;
  overflow: hidden;
  margin: 0 15px;
  padding: 20px;
}

/* Slider item product card styles */
.slider-item .product-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.product-card .product-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  justify-content: flex-start;
}

.product-card .product-info-container {
  padding: 15px 0;
}

.product-card .product-brand {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  color: #0089ad;
  margin-bottom: 5px;
}

.product-card .product-detail-title {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.product-card .product-code {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  margin-bottom: 15px;
}

.product-card .product-description {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* Adjust text sizes in slider items */
.slider-item .product-card .product-detail-title {
  font-size: 20px;
}

.slider-item .product-card .product-description {
  font-size: 13px;
  line-height: 1.3;
}

.product-card .product-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
}

.product-card .product-tab {
  padding: 8px 15px;
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}

.product-card .tab-content {
  font-size: 14px;
  line-height: 1.4;
  max-height: 150px;
  overflow-y: auto;
  margin-bottom: 15px;
}
.tab-content table {
  width: 100%;
  border-collapse: collapse;
}
.tab-content table tr td {
  width: 50%;
  padding: 5px;
}
.tab-content table tr:nth-child(even) {
  background-color: white;
}
.product-card .product-weights {
  display: flex;
  gap: 10px;
}

.product-card .weight-option {
  padding: 10px;
  font-size: 16px;
}

/* Adjust weight options in slider items */
.slider-item .product-card .product-weights {
  gap: 5px;
}

.slider-item .product-card .weight-option {
  padding: 8px 5px;
  font-size: 14px;
}

.slider-item .product-card .weight-value {
  font-size: 18px;
}

/* Detailed Product View Styles */
.product-detail {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

.product-detail-container {
  display: flex;
  padding: 30px;
}

.product-image-container {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.product-detail-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.product-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.product-icon {
  width: 49px;
  height: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}

.product-icon.gluten-free {
  color: #0089ad;
}

.product-icon.vegan {
  color: #d6cc0a;
}

.product-icon.allergen-free {
  color: #601c4e;
}

.product-icon.high-protein {
  color: #0089ad;
}

.product-icon.organic {
  color: #8b5e3c;
}

.product-info-container {
  flex: 0 0 60%;
  padding-left: 30px;
}

.product-brand {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  color: #0089ad;
  margin-bottom: 5px;
}

.product-detail-title {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: #0089ad;
}

.product-detail-title.zabpelyhek,
.product-detail-title.muzlik {
  color: #0089ad;
}

.product-detail-title.tesztak {
  color: #d6cc0a;
}

.product-detail-title.granolak {
  color: #601c4e;
}

.product-code {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: bold;
}

.product-description {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.product-tab {
  padding: 10px 15px;
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}

.product-tab.active:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0089ad;
}

.product-tab.active.zabpelyhek:after,
.product-tab.active.muzlik:after {
  background-color: #0089ad;
}

.product-tab.active.tesztak:after {
  background-color: #d6cc0a;
}

.product-tab.active.granolak:after {
  background-color: #601c4e;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content p {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.product-weights {
  display: flex;
  margin-top: 30px;
}

.weight-option {
  flex: 1;
  text-align: center;
  padding: 15px;
  background-color: #f2f2f2;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.weight-option.active {
  background-color: #0089ad;
  color: #fff;
}

.weight-option.active.zabpelyhek .weight-option.active.muzlik {
  background-color: #0089ad;
}

.weight-option.tesztak {
  background-color: #f7f5ce !important;
}
.weight-option:not(.active).tesztak span {
  background-color: #f7f5ce !important;
  color: #d6cc0a;
}
.weight-option.active.tesztak {
  background-color: #d6cc0a !important;
}
.weight-option.active.granolak {
  background-color: #601c4e !important;
}
.weight-option.granolak {
  background-color: #dfd2dc !important;
}
.weight-option:not(.active).granolak span {
  color: #601c4e;
}
.weight-value {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 24px;
}

/* Highlighted Products Slider Styles */
.highlighted-products-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 40px;
  overflow: hidden;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Ensure the slider container is wide enough to hold all items */
.highlighted-products-slider .slider-container {
  width: auto;
  min-width: 100%;
}

.slider-container {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.slider-item {
  flex: 0 0 33.33%;
  width: 33.33%;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Make sure slider items are displayed horizontally */
.highlighted-products-slider .product-card {
  display: block;
  width: 100%;
  height: 100%;
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #601c4e;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  transition: all 0.3s ease;
}

.slider-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prev-button {
  left: 0;
}

.next-button {
  right: 0;
}

/* Navigation arrows hidden for vertical layout */
.nav-arrow {
  display: none;
}

.product-card {
  background-color: #f2f2f2;
  border-radius: 30px;
  width: 100%;
  max-width: 1000px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 0 auto 30px;
  overflow: visible;
}

/* Ensure slider items don't have bottom margin and have proper sizing */
.slider-item .product-card-wrapper {
  margin-bottom: 0;
  max-width: 100%;
  height: 100%;
}
.slider-item .product-card {
  margin-bottom: 0;
  max-width: 100%;
  height: calc(100% - 150px);
  /* max-height: 280px; */
  padding-top: 50px;
  display: flex;
}

.product-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  max-height: 300px;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}

/* Adjust image size in slider items */
.slider-item .product-image {
  max-height: 200px;
  margin-bottom: -50px;
}

.product-title {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  text-align: center;
  padding: 15px 0;
  letter-spacing: 1px;
  line-height: 1.2;
}

.premium-title {
  color: #0089ad;
}

.penne-title {
  color: #d6cc0a;
}

.granola-title {
  color: #601c4e;
}

.product-info {
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  margin: 0 15px 15px;
}

/* Product card layout for zabpelyhek, tesztak, granolak categories */
.zabpelyhek-card,
.muzlik-card,
.tesztak-card,
.granolak-card {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  max-width: min(100%, 1000px);
  margin-left: auto;
  margin-right: auto;
}

.product-left {
  flex: 0 0 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  position: relative;
  padding-bottom: 60px; /* Make space for the weight options */
}

.product-right {
  flex: 0 0 60%;
  padding: 30px;
  background-color: #f2f2f2;
}

/* Position product weights at the bottom of product-left */
.product-left .product-weights {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  margin: 0;
  gap: 0;
}

.product-left .weight-option {
  flex: 1;
  text-align: center;
  padding: 15px;
  border-radius: 0;
  margin: 0;
  color: #fff;
  font-weight: bold;
}

.product-left .weight-option {
  background-color: #8dcde0;
}

.product-icons-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-self: flex-end;
}
.granolak-card .product-icons-container {
  /* display: none; */
}
.zabpelyhek-card .product-detail-title,
.muzlik-card .product-detail-title {
  color: #0089ad;
}

.tesztak-card .product-detail-title,
.tesztak-card .product-brand {
  color: #d6cc0a;
}
/* .tesztak-card .product-icon svg {
  color: #d6cc0a !important;
} */
/* .tesztak-card .product-icon svg path {
  fill: #d6cc0a !important;
} */
.granolak-card .product-detail-title,
.granolak-card .product-brand {
  color: #601c4e;
}

.zabpelyhek-card .product-tab.active:after,
.muzlik-card .product-tab.active:after {
  background-color: #0089ad;
}

.tesztak-card .product-tab.active:after {
  background-color: #d6cc0a;
}

.granolak-card .product-tab.active:after {
  background-color: #601c4e;
}

.zabpelyhek-card .weight-option.active,
.muzlik-card .weight-option.active {
  background-color: #0089ad;
}

.tesztak-card .weight-option.active {
  background-color: #d6cc0a;
}

.granolak-card .weight-option.active {
  background-color: #601c4e;
}

.info-icon {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.info-icon i {
  font-size: 22px;
  margin-top: 3px;
}

.premium-icon {
  color: #0089ad;
}

.penne-icon {
  color: #d6cc0a;
}

.granola-icon {
  color: #601c4e;
}

.product-description {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  flex: 1;
}

.product-packaging {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-top: 5px;
}

.product-packaging i {
  font-size: 22px;
}

.details-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 204px;
  height: 59px;
  border-radius: 30px;
  margin: 20px auto 30px;
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  text-align: center;
}

.details-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.premium-button {
  background-color: #0089ad;
}

.penne-button {
  background-color: #d6cc0a;
}

.granola-button {
  background-color: #601c4e;
}

/* Contact Form Styles */
.contact-section {
  background-color: #f3f0eb;
  padding: 80px 0;
}

.contact-title {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  color: #0089ad;
  text-align: center;
  margin-bottom: 20px;
}

.contact-description {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #fff;
  padding: 15px 30px;
  border-radius: 30px;
}

.contact-icon {
  color: #0089ad;
  font-size: 24px;
}

.contact-text {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.form-container {
  background-color: #f8f8f8;
  border-radius: 30px;
  padding: 40px;
  max-width: 1013px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.form-input {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 30px;
  background-color: #f5f5f5;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
}

.form-select {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 30px;
  background-color: #f5f5f5;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 20px center;
}

.form-textarea {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 30px;
  background-color: #f5f5f5;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  min-height: 130px;
  resize: vertical;
}

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

.form-row .form-group {
  flex: 1;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 30px 0;
}

.checkbox-input {
  width: 30px;
  height: 30px;
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  appearance: none;
  cursor: pointer;
}

.checkbox-input:checked {
  background-color: #0089ad;
  border-color: #0089ad;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.checkbox-label {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 20px;
}

.captcha {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.submit-button {
  display: block;
  width: 194px;
  height: 59px;
  border-radius: 30px;
  background-color: #0089ad;
  color: #fff;
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  margin: 0 auto;
}

/* Footer Styles */
footer {
  background-color: #1c1c1c;
  padding: 60px 0;
  color: #ffffff;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 250px;
  margin-bottom: 30px;
}

.footer-title {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 25px;
  color: #ffffff;
}

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

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #d6cc0a;
  font-family: "Poppins", "Arial", sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo-img {
  width: 150px;
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-family: "Typo Slab", "Roboto Slab", "Trebuchet MS", "Arial", sans-serif;
  font-size: 16px;
  text-align: right;
  margin-bottom: 25px;
}

.footer-social {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #1c1c1c !important;
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .products-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 20px;
  }

  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact-info {
    flex-direction: column;
    align-items: center;
  }

  .form-row {
    flex-direction: column;
  }

  .footer-container {
    flex-direction: column;
  }

  .footer-column {
    width: 100%;
    margin-bottom: 40px;
  }

  .footer-right {
    align-items: center;
  }

  .footer-tagline {
    text-align: center;
  }
  .contact-item {
    flex-direction: column;
    width: 100%;
  }
  .product-menu {
    flex-direction: column;
  }
  .zabpelyhek-card,
  .muzlik-card,
  .tesztak-card,
  .granolak-card {
    flex-direction: column;
    max-width: 100%;
  }
  .product-tabs {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .slider-title {
    font-size: 36px;
  }

  .contact-title {
    font-size: 36px;
  }

  .form-container {
    padding: 20px;
  }

  .footer-title {
    font-size: 18px;
    text-align: center;
  }

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

  .footer-social {
    justify-content: center;
  }

  .social-icon {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 1024px) {
  .slider-item {
    flex: 0 0 50%;
    width: 50%;
  }
}

/* Mobil: 1 termék */
@media (max-width: 600px) {
  .slider-item {
    flex: 0 0 100%;
    width: 100%;
  }
}

.product-card.tesztak .product-description svg path {
  fill: #d6cc0a !important;
}

.product-card .product-detail-title {
  text-align: center;
}

.product-button {
  display: block;
  text-align: center;
  color: white !important;
  background-color: #0089ad;
  padding: 15px 30px;
  border-radius: 30px;
  margin-top: auto;
}

.product-button.tesztak {
  background-color: #d6cc0a;
}
.product-button.granolak {
  background-color: #601c4e;
}
.product-detail-table {
  margin-right: -20px;
  margin-left: -20px;
  border-collapse: collapse;
}
.product-detail-table tr:nth-child(odd) {
  background-color: #f5f5f5;
}
.product-detail-table tr td {
  padding: 10px 20px;
}
.product-detail-table.tesztak tr td svg path {
  fill: #d6cc0a !important;
}

.product-detail-table.granolak tr td svg path {
  fill: #601c4e !important;
}
/* .tesztak-card .product-icons-container svg path {
  fill: #d6cc0a !important;
}

.granolak-card .product-icons-container svg path {
  fill: #601c4e !important;
} */

i.organic {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41" fill="none"><g clip-path="url(%23clip0_337_181)"><path d="M21.7887 0C32.1772 0.641356 40.4289 9.21139 40.9881 19.5536C41.0226 20.19 40.9627 20.8396 40.9881 21.4768L40.5511 24.6852C36.7848 42.672 12.7982 47.1303 3.03527 31.2466C-4.72521 18.6207 3.18615 2.1072 17.76 0.171631C18.2405 0.107577 18.7678 0.12318 19.2286 0H21.7887ZM7.09837 8.3401C6.79497 8.28754 5.05821 10.9096 4.81549 11.326C-0.284907 20.0742 2.75893 31.3402 11.4952 36.3167C18.334 40.2117 26.9686 39.2722 32.7472 33.9385L25.1851 26.3654L26.1995 25.141L27.7501 26.6052L33.9091 32.7749C35.7205 30.79 37.1489 28.3133 37.909 25.7249C40.5634 16.681 35.9763 7.16907 27.3065 3.64941C20.8842 1.0421 13.3238 2.35848 8.27097 7.0927L15.628 14.4654L14.6686 15.7875L7.09919 8.34092L7.09837 8.3401Z" fill="%230089AD"/><path d="M18.4106 24.5621C18.2507 25.8571 16.8353 26.193 16.4294 24.8643C16.5918 22.1518 16.1506 19.0518 16.4065 16.3846C16.4639 15.7835 16.8189 15.45 17.4102 15.3868C17.7201 15.354 18.4671 15.3458 18.7656 15.3926C19.3109 15.4771 19.4413 15.8812 19.5881 16.3312C20.0743 17.8217 20.2219 19.5782 20.7197 21.0473C20.7549 21.1524 20.7426 21.2921 20.8894 21.3167C21.1444 20.0364 21.4216 18.7496 21.7447 17.485C21.8693 16.998 22.0473 15.8902 22.4138 15.5905C22.7475 15.317 23.6938 15.3441 24.1333 15.3835C24.6926 15.4328 25.0649 15.6594 25.2051 16.2335V24.7978C25.0608 25.5565 24.2317 26.0197 23.6061 25.4481C23.5003 25.3512 23.21 24.8265 23.21 24.723V19.4739L21.9685 24.7608C21.6094 26.0066 20.0202 25.954 19.652 24.7608L18.4106 19.5528V24.5612V24.5621Z" fill="%230089AD"/><path d="M13.1308 21.8776H11.5711C11.5318 21.8776 11.0307 21.6427 10.9758 21.5926C10.4166 21.0868 10.8077 20.1243 11.5695 20.0323C12.1435 19.9634 13.4637 19.979 14.0549 20.0307C14.8044 20.0972 15.0578 20.4709 15.1307 21.1968C15.198 21.8702 15.225 23.7614 14.847 24.2763C14.0557 25.3537 11.5367 25.7635 10.2927 25.6428C5.70401 25.1985 5.06605 17.6968 8.73063 15.7449C10.5346 14.7841 13.5014 15.0091 14.5567 16.9635C14.8847 17.5704 15.0651 18.8112 14.1287 18.9869C12.6699 19.2621 12.9463 17.2912 11.312 17.0892C9.64657 16.883 8.70767 18.2446 8.57401 19.7539C8.35507 22.2102 9.34071 24.4701 12.1902 23.6169C13.3579 23.267 13.1414 23.0207 13.1332 21.8767L13.1308 21.8776Z" fill="%230089AD"/><path d="M29.9112 15.2464C34.1022 14.72 35.7578 18.2175 35.1067 21.894C34.604 24.7329 32.331 26.1864 29.5143 25.5401C25.0281 24.5103 25.1667 15.8426 29.9112 15.2472V15.2464ZM30.3097 17.1688C27.8112 17.5613 27.8276 22.9073 29.9891 23.6226C33.8365 24.8963 34.2383 16.5521 30.3097 17.1688Z" fill="%230089AD"/></g><defs><clipPath id="clip0_337_181"><rect width="41" height="41" fill="white"/></clipPath></defs></svg>');
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: unset;
}
.nav-link {
  color: inherit !important;
}