:root {
  --offering-background: #1f1f1f;
  --offering-title: #fff;
  --offering-underline: #f70;
  --offering-card-background: #f70;
  --offering-card-background-2: #000;
  --offering-card-back-text: #000;
  --offering-card-back-text-2: #f70;
  --offering-card-front-text: #fff;
  --offering-card-front-background: #00000099;

  --training-background: #f70;
  --training-title: #000;
  --training-underline: #000;
  --training-table-title-background: #000;
  --training-table-title: #fff;
  --training-table-row-border: #000000;
  --training-table-row-background-1: #f70;
  --training-table-row-background-2: #ffffff;


  --faq-title: #ffffff;
  --faq-underline: #f70;
  --faq-background: #1f1f1f;
  --faq-table-background: #dedede;
  --faq-item-border: #000000;
  --faq-item-title: #000;
  --faq-item-title-hover: #000;

  --join-background: #f70;
  --join-title: #000;
  --join-underline: #000;
  --join-btn-background: #000;
  --join-btn-background-hover: #333;
  --join-btn-text: #fff;

  --footer-background: #121212;
  --footer-text: #fff;

}

html,
body {
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  font-family: quicksand;
}

.offering-section {
  background: var(--offering-background);
  padding: 4rem 2rem;
  text-align: center;
}

.offering-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
  color: var(--offering-title);
}

.offering-section h2::after {
  content: "";
  height: 4px;
  width: 60px;
  background: var(--offering-underline);
  display: block;
  margin: 0.5rem auto 0;
}

.grid {
  display: grid;
  gap: 1.5rem;
  /* This applies both row and column gaps */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1100px;
  margin: auto;
  justify-items: center;
}

@media (max-width: 768px) {
  .flip-card.mobile-flip .flip-card-inner {
    transform: rotateY(180deg);
  }
}

.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 300px;
  height: 200px;
  perspective: 1000px;
  margin: 0;
  /* no margin interfering */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;

  font-size: 1.75rem;
}

/* Style the back side */
.flip-card-back {
  background-color: var(--offering-card-background);
  color: var(--offering-card-back-text);
  transform: rotateY(180deg);

  font-weight: bold;

}

.flip-card.black .flip-card-back {
  background-color: var(--offering-card-background);
  /* Black */
  color: var(--offering-card-back-text);
  /* White text */
}

/* Specific styles for orange flip cards (if you want to explicitly define or override) */
.flip-card.orange .flip-card-back {
  background-color: var(--offering-card-background-2);
  /* Orange */
  color: var(--offering-card-back-text-2);
  /* Black text */
}

.flip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 10px;
}

.card-title {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  background: var(--offering-card-front-background);
  /* Optional: for better readability */
  color: var(--offering-card-front-text);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1rem;
}

.training-section {
  background: var(--training-background);
}

.training-times {
  padding: 4rem 2rem;
  text-align: center;
}

.training-times h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
  color: var(--training-title);
}

.training-times h2::after {
  content: "";
  height: 4px;
  width: 7rem;
  background: var(--training-underline);
  display: block;
  margin: 0.5rem auto 0;
}

.table-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.styled-table {
  width: 90%;
  max-width: 600px;
  font-size: 1rem;
  text-align: center;
  background-color: var(--training-table-row-background-2);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.styled-table thead tr {
  background-color: var(--training-table-title-background);
  color: var(--training-table-title);
  font-weight: bold;
}

.styled-table th,
.styled-table td {
  padding: 14px 16px;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: var(--training-table-row-background-1);
}

.faq-wrapper {
  background-color: var(--faq-background);
  padding-top: 1rem;
  padding-bottom: 2rem;
  text-align: left;
}

.faq-title {
  text-align: center;
  color: var(--faq-title);
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.faq-wrapper h2::after {
  content: "";
  height: 4px;
  width: 60px;
  background: var(--faq-underline);
  display: block;
  margin: 0.5rem auto 0;
}

.faq-section {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 700px;
  padding: 2rem;
  background-color: var(--faq-table-background);
  margin: auto;
}

.faq-item {
  border-bottom: 1px solid var(--faq-item-border);
  margin-bottom: 1rem;
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--faq-item-title);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}

.faq-item summary:hover {
  color: var(--faq-item-title-hover);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.arrow {
  transition: transform 0.3s ease;
}

.faq-item[open] .arrow {
  transform: rotate(90deg);
}

/* FAQ content container with animation */
.faq-inner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  padding-left: 1rem;
}

/* Animate open state */
.faq-item[open] .faq-inner {
  max-height: 300px;
  /* large enough for content */
  opacity: 1;
  margin-top: 0.5rem;
}

.join-section {
  text-align: center;
  padding-bottom: 100px;
  padding-top: 50px;
  background-color: var(--join-background);
}

.join-heading {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--join-title);
}

.join-heading::after {
  content: "";
  height: 4px;
  width: 10rem;
  background: var(--join-underline);
  display: block;
  margin: 0.5rem auto 0;
}

.download-btn {
  display: inline-block;
  background-color: var(--join-btn-background);
  color: var(--join-btn-text);
  padding: 0.75rem 1.5rem;
  margin-top: 50px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.download-btn:hover {
  background-color: var(--join-btn-background-hover);
}

.disclaimer {
  margin-top: 3.5rem;
  font-size: 0.95rem;
  color: var(--join-disclaimer);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}




.footer-container {
  background-color: var(--footer-background);
  color: var(--footer-text);
  text-align: center;
  padding: 40px 20px;
}

.footer-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-subtitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.sponsor-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.sponsor-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.sponsor-link:hover {
  transform: scale(1.1);
}

.sponsor-img {
  width: 100px;
  height: auto;
  display: block;
}