@tailwind base;
@tailwind components;
@tailwind utilities;

.primary-btn {
  @apply px-7 lg:px-10 py-4 text-center bg-red-700 text-neutral-50 text-xs lg:text-base rounded-xl;
}

.heading_underline {
  @apply border-2 border-red-600 rounded-lg;
}

/* image text overlay */
.content {
  @apply relative overflow-hidden w-full h-full md:w-[31.33%] md:min-w-[31.33%];
}
.content .content-overlay {
  @apply absolute top-0 left-0 bottom-0 right-0 opacity-0 bg-black bg-opacity-70 rounded-lg transition-all duration-500 ease-in-out;
}
.content:hover .content-overlay {
  @apply opacity-100 cursor-pointer;
}
.content .content-image {
  @apply h-auto w-full rounded-lg;
}
.content .content-details {
  @apply absolute text-center top-1/2 left-1/2 opacity-0 transform -translate-x-1/2 -translate-y-1/2 hover:cursor-pointer transition-all duration-500 ease-in-out;
}
.content:hover .content-details {
  @apply top-1/2 left-1/2 opacity-100;
}
.content-details .content-text {
  @apply text-white font-semibold;
}

/* Slider */
.swiper {
  position: relative;
  margin-inline: auto;
  height: 40vh;
}
.swiper::before {
  content: "";
  position: absolute;
  top: -70px;
  left: -10%;
  width: 120%;
  height: 100px;
  background: #fcf9f4;
  border-radius: 100%;
  z-index: 100;
}
.swiper::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -10%;
  width: 120%;
  height: 100px;
  background: #fcf9f4;
  border-radius: 100%;
  z-index: -1;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}

body {
  --v-offset: 60px;
  --curve-height: 100px;
}
.image-curved-slider {
  overflow: hidden;
  position: relative;
  background-color: #fcf9f4;
}
.image-curved-slider:before {
  content: "";
  display: block;
  background-color: #fcf9f4;
  width: calc(100vw + 2 * var(--v-offset));
  height: var(--curve-height);
  position: absolute;
  border-radius: 50%;
  left: calc(-1 * var(--v-offset));
  right: calc(-1 * var(--v-offset));
}
.image-curved-slider:before {
  top: calc(-0.6 * var(--curve-height));
}
.wrapper {
  overflow: auto;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}
.wrapper img {
  scroll-snap-align: center;
}
.image-curved-slider:after {
  bottom: calc(-0.6 * var(--curve-height));
}