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

:root {
  font-size: 16px !important;
  font-family: 'Inter', sans-serif;
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}
.plyr.plyr--stopped .plyr__controls {
  display: none;
}

.animated-box {
  position: absolute;
  bottom: 0;
  transition: bottom 15s ease;
  animation: moveUpAndReset 15s infinite;
}

@keyframes moveUpAndReset {
  0% {
    bottom: 0; /* Inicia desde abajo */
  }

  50% {
    bottom: 15%; /* Sube hasta el 50% */
  }
  51% {
    bottom: 0; /* Vuelve a 0% inmediatamente después de llegar a 50% */
  }
  100% {
    bottom: 15%; /* Termina en el 0% */
  }
}

@layer utilities {
  .contact-agents-form .form .form-floating .form-control,
  .contact-agents-form .form .form-select {
    @apply tw-border-[#D4D4D4] tw-font-inter tw-text-sm tw-font-normal tw-text-[#97999B];
  }
  .contact-agents-form .form .form-floating label {
    @apply tw-font-inter tw-text-sm tw-font-normal tw-text-[#97999B];
  }
  .quote-form .contact-form .form-floating .form-control,
  .quote-form .contact-form .form-select {
    @apply tw-border-white tw-font-inter tw-text-base tw-font-normal tw-text-main-dark tw-bg-white/[0.3];
  }
  .quote-form .contact-form .form-floating label {
    @apply tw-font-inter tw-text-base tw-font-normal tw-text-main-dark;
  }

  .contact-form .form .form-floating .form-control,
  .contact-form .form .form-select {
    @apply tw-border tw-border-dark-gray tw-rounded  tw-text-sm tw-font-normal tw-text-[#7F7F7F];
  }
  .contact-form .form .form-floating label {
    @apply tw-font-inter tw-text-sm tw-font-normal tw-text-[#7F7F7F];
  }
  .contact-form .form .react-datepicker__day--selected {
    @apply !tw-bg-main-color !tw-text-main-light;
  }
  .contact-form .form .react-datepicker__day--keyboard-selected {
    @apply !tw-bg-main-color !tw-text-main-light tw-opacity-60;
  }
  .navbar button.hamburger {
    color: white;
  }
  .navbar-project .offcanvas-backdrop {
    @apply !tw-top-[70px];
  }
  .offcanvas-nav .offcanvas-body {
    @apply max-[991px]:!tw-h-max max-[991px]:!tw-overflow-y-auto max-[991px]:!tw-max-h-[calc(100vh-50px)] max-[991px]:tw-pb-8;
  }
  /*header.tw-relative .navbar {
    @apply tw-bg-white;
  } 
  header.tw-relative .navbar button.hamburger,
  .navbar.fixed button.hamburger {
    @apply tw-text-main-dark;
  }
*/
  .Reviews-pagination .swiper-pagination-bullet {
    @apply tw-h-[6px]  tw-w-[6px]  tw-bg-main-color tw-rounded-full;
  }
  .Reviews-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply tw-h-[8px]  tw-w-[8px];
  }
  .Reviews-project-pagination .swiper-pagination-bullet {
    @apply tw-h-[6px]  tw-w-[6px];
  }
  .Reviews-project-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply tw-h-[8px]  tw-w-[8px];
  }
  .projects-carousel .swiper-pagination-bullet {
    @apply tw-h-[6px]  tw-w-[6px]  tw-bg-main-color tw-rounded-full tw-opacity-100;
  }

  .projects-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply tw-h-[8px]  tw-w-[8px];
  }
  .cities-carousel-dark .swiper-pagination-bullet {
    @apply tw-h-[6px]  tw-w-[6px]  tw-bg-white tw-rounded-full tw-opacity-100;
  }
  .cities-carousel-dark .swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply tw-h-[8px]  tw-w-[8px];
  }
  .cities-bullet {
    @apply tw-h-[6px]  tw-w-[6px]  tw-bg-main-color tw-rounded-full tw-opacity-60;
  }
  .cities-pagination .cities-bullet.cities-bullet-active {
    @apply tw-h-[8px]  tw-w-[8px] tw-opacity-100;
  }
  .BusinessPartners-section .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active,
  .premises-section .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply tw-h-[10px]  tw-w-[10px];
  }
  #gallery-carousel .swiper-controls .swiper-pagination .swiper-pagination-bullet,
  #gallery-carousel .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply tw-bg-main-dark tw-border-0;
  }
  #gallery-carousel:hover .swiper-button {
    @apply tw-flex;
  }
  #gallery-carousel .swiper-button {
    @apply tw-hidden;
  }
  #gallery-carousel .image,
  #gallery-carousel video {
    @apply tw-min-h-[200px] tw-max-h-[200px] md:tw-min-h-[400px] md:tw-max-h-[400px] lg:tw-min-h-[600px] lg:tw-max-h-[600px] tw-object-cover;
  }
  a.filter-item {
    cursor: pointer;
  }
  a.filter-item.active {
    text-decoration: underline;
  }

  .custom-gallery .react-photo-album .react-photo-album--photo {
    @apply tw-relative;
  }
  .custom-gallery .react-photo-album .react-photo-album--photo:hover::after {
    @apply tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center tw-bg-black tw-bg-opacity-50 tw-text-white tw-rounded-[10px] tw-font-inter tw-font-semibold tw-uppercase;
    border-radius: 0px;
    display: flex;
  }
  .custom-gallery.es .react-photo-album .react-photo-album--photo:hover::after {
    content: 'Ver más';
  }
  .custom-gallery.en .react-photo-album .react-photo-album--photo:hover::after {
    content: 'see more';
  }
  .base-title {
    @apply tw-text-3xl md:tw-text-5xl tw-font-normal tw-text-main-dark tw-font-ibm;
  }
  .base-pretitle {
    @apply tw-text-base md:tw-text-xl  tw-text-main-color tw-font-ibm tw-font-semibold  tw-uppercase;
  }
  .base-text {
    @apply tw-font-inter tw-text-base tw-leading-[28px] md:tw-text-xl md:tw-leading-[38px] tw-font-normal tw-text-main-dark;
  }
}