:root {
  --primary-color: #f9cd4b;
  --primary-color-soft: #f9cd4b50;

  --primary-color-brown: #603100;
}

.offcanvas {
  height: 90vh !important;
}

.pointer {
  cursor: pointer;
  transition: 0.3s all;
}

.pointer:hover {
  border-color: var(--primary-color);
  box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.1);
  transition: 0.3s all;
}

@font-face {
  font-family: gagalin-regular;
  src: url(/fonts/Gagalin-Regular.otf);
}

.card-header {
  height: 20vh;
  overflow: hidden;
}

.card-scale {
  transition: 0.3s all;
}

.card-scale:hover {
  cursor: pointer;
  box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
  transition: 0.3s all;
}

.card-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel-container {
  scroll-snap-type: x mandatory; /* Para un desplazamiento más fluido */
  display: flex;
  overflow: auto;
  gap: 1rem;
}

.carousel-container::-webkit-scrollbar {
  height: 8px; /* Tamaño del scrollbar horizontal */
}

.carousel-container::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Color del scrollbar */
  border-radius: 4px;
}

.carousel-container > * {
  flex: 0 0 calc(100% / 3); /* Cada carta ocupa un tercio del viewport, ajusta según lo que necesites */
  scroll-snap-align: start; /* Al hacer scroll, las cartas se alinean */
}

.explore-header {
  /*background-image: url("./bg.jpg");
  background-color: #f9cd4b;
  */
  background: rgb(249, 205, 75);
  background: -moz-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9cd4b",endColorstr="#fabb00",GradientType=1);
  width: 100%;
  min-height: 40vh;
}

.landing-page {
  background: rgb(249, 205, 75);
  background: -moz-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9cd4b",endColorstr="#fabb00",GradientType=1);
  color: #381c00;
}

.faqs-page {
  background: rgb(249, 205, 75);
  background: -moz-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9cd4b",endColorstr="#fabb00",GradientType=1);
  width: 100%;
  min-height: 100vh;
}

.bg-primary-custom {
  background: rgb(249, 205, 75);
  background: -moz-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  background: radial-gradient(
    circle,
    rgba(249, 205, 75, 1) 0%,
    rgba(250, 187, 0, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9cd4b",endColorstr="#fabb00",GradientType=1);
  color: #381c00;
}