@import "tailwindcss";
@config "../../tailwind.config.js";
@plugin "@tailwindcss/typography";
/* @plugin "@tailwindcss/forms"; */
@plugin "daisyui";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/**/*.blade.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
  --default-font-family: "Helvetica";
  --font-sans:
    "Raleway", ui-sans-serif, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --breakpoint-xs: 30rem;
}

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0.003 247.858);
  --color-base-300: oklch(98% 0 0);
  --color-base-content: oklch(14% 0 0);
  --color-primary: #0d74b9;
  --color-primary-content: oklch(97% 0.014 308.299);
  --color-secondary: #fff100;
  --color-secondary-content: #0d74b9;
  --color-accent: #f4f4f4;
  --color-accent-content: oklch(14% 0 0);
  --color-neutral: oklch(100% 0 0);
  --color-neutral-content: #0d74b9;
  --color-info: oklch(62% 0.214 259.815);
  --color-info-content: oklch(97% 0.014 254.604);
  --color-green: oklch(0.843618 0.20449 129.115);
  --color-green-content: oklch(98% 0 0);
  --color-success: oklch(64% 0.2 131.684);
  --color-success-content: oklch(98% 0 0);
  --color-warning: #facc15;
  --color-warning-content: oklch(42% 0.095 57.708);
  --color-error: oklch(57% 0.245 27.325);
  --color-error-content: oklch(97% 0.013 17.38);
  --radius-selector: 2rem;
  --radius-field: 0rem;
  --radius-box: 0rem;
  --size-selector: 0.28125rem;
  --size-field: 0.28125rem;
  --border: 1px;
  --depth: 0;
  --noise: 1;
}

:root {
  color-scheme: light;
}

.prose {
  :root & {
    --tw-prose-links: var(--color-primary);
  }

  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    @apply no-underline text-primary;
  }

  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
    @apply underline text-primary/80;
  }
}

@layer components {
  .loaded-shadow {
    box-shadow: 0 -10px 15px rgb(9 83 140 / 35%);
    border-top: 1px solid rgb(80 213 255 / 60%);
  }
  .origin-left-right {
    transform-origin: 0% 50%;
  }

  .columnspan-all {
    column-span: all;
  }

  .columnspan-none {
    column-span: none;
  }

  .columnspan-initial {
    column-span: initial;
  }

  .hero-eyebrow {
    @apply text-center text-pretty md:text-left;
  }

  .title-page {
    @apply text-4xl leading-none text-center text-pretty md:text-left md:text-5xl;
  }

  .hero-subtitle {
    @apply mx-auto text-lg md:mx-0 md:text-xl font-light max-w-xl text-center md:text-left text-pretty;
    line-height: 1.3;
  }

  .title-section {
    @apply text-3xl md:text-[2.5rem] text-primary;
  }

  .title-section-blue-variant {
    @apply text-3xl md:text-[2.5rem] text-[#033551] text-pretty;
  }

  .text-primary-blue-variant {
    color: #033551 !important;
  }
  .img-native {
    height: attr(height px, auto) !important;
  }
}

@utility title-menu-section {
  @apply px-4 py-3 text-2xl font-light text-white hover:bg-transparent;
}

@utility no-scrollbar {
  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
}

@layer utilities {
  .text-shadow-sm {
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.831);
  }

  .filter-shadow-sm {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  }

  .btn {
    height: initial;
    min-height: var(--size);
    flex-shrink: initial;
  }

  .btn-green {
    --btn-color: var(--color-green);
    --btn-fg: var(--color-green-content);
  }

  .visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
  }
}

@keyframes progress-loading {
  0% {
    transform: translateX(0) scaleX(0);
  }

  40% {
    transform: translateX(0) scaleX(0.4);
  }

  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}

.testimonials .swiper-slide {
  height: auto;
}
@media (min-width: 992px) {
  .testimonials .swiper-slide {
    scale: 0.8;
    opacity: 0.7;
    transition:
      scale 0.3s ease,
      opacity 0.3s ease;
  }
  .testimonials .big-center-slide {
    scale: 1;
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .testimonials .swiper {
    overflow: visible;
  }
  .testimonials .swiper-slide {
    scale: 1;
    opacity: 1;
  }
}
.animate-progress {
  animation: progress-loading 1s infinite linear;
}

:where(
  :root:has(
    .modal-open,
    .modal[open],
    .modal:target,
    .modal-toggle:checked,
    .drawer:not(.drawer-open) > .drawer-toggle:checked
  )
) {
  scrollbar-gutter: auto;
}

.menu.menu-horizontal > li.list-item-megamenu {
  font-size: 1rem;
}

.menu li > *:not(ul, .menu-title, details, .btn):active {
  @apply bg-transparent text-white underline shadow-none underline-offset-4;
  --fallback-bc: #1e415a33;
}

:where(.menu li).list-item-megamenu {
  position: static;
}

.menu .megamenu :where(li ul) {
  white-space: initial;
  margin-inline-start: initial;
  padding-inline-start: initial;
}

.menu .megamenu :where(li ul)::before {
  content: none;
}

.menu .megamenu-container#mega-menu-services .megamenu {
  padding-bottom: 1rem;
}

.menu .megamenu-container#mega-menu-gallery .megamenu {
  padding-bottom: 1rem;
}

:where(
    .menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)
  ):not(summary, .active, .btn):focus {
  @apply bg-transparent text-secondary;
}

.menu li > *:not(ul, .menu-title, details, .btn):active {
  @apply text-secondary;
}

:where(
    .menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)
  ):not(summary, .active, .btn):active {
  @apply text-secondary;
  background-color: var(--fallback-bc, oklch(var(--bc) / 0.1));
}

.menu
  :where(
    li:not(.menu-title)
      > *:not(ul, details, .menu-title, .btn, .megamenu-container)
  ) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.menu :where(li:not(.menu-title) > *:has(.megamenu)) {
  padding: 0;
}

.menu
  :where(
    li:not(.menu-title) > *:not(ul, details, .menu-title, .btn, .megamenu)
  ):hover {
  --fallback-bc: transparent;
}

.menu > .list-item-megamenu > a:hover {
  background: transparent !important;
}

.menu li > *:not(ul, .menu-title, details, .btn):active {
  text-decoration: none;
}

.menu-horizontal > li:not(.menu-title) > details > ul {
  margin-top: 0;
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-inline-end: 0;
}

.link-menu:hover {
  @apply text-secondary;
}

[x-cloak] {
  display: none !important;
}

.link-menu-active,
.link-menu-route-active {
  @apply border-secondary text-secondary;
}

/* .btn {
  min-height: initial;
  font-size: 1rem;
  height: initial;
}
 */
.collapse:is([open], :focus:not(.collapse-close)) > :where(.collapse-content),
.collapse:not(.collapse-close)
  > :where(
    input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content
  ) {
  padding-bottom: initial;
}

.menu li > details > summary:active {
  @apply text-primary bg-secondary;
}

/* Jquery Timepicker */
.ui-timepicker-standard {
  z-index: 9999 !important;

  .ui-state-hover {
    background: #f8f8f8 !important;
  }
}

/* Dropzone */
.dropzone .dz-preview .dz-error-message {
  top: 150px;
}

.dz-preview .dz-progress,
.dz-preview .dz-image .dz-spinner {
  display: none !important;
}

/* Swiper */
.swiper-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: center;
}

.banner .swiper-pagination-bullet {
  width: 25px;
  height: 25px;
  font-size: 12px;
  opacity: 1;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-weight: bold;
  border: 1px solid;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0);
  transition: border-color 0.3s;
}

.banner .swiper-pagination-bullet-active {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}

.banner .swiper-pagination-bullet-active .bullet-number {
  display: none;
}

.banner .swiper-pagination-bullet-active .bullet-icon {
  display: inline-flex !important;
  background: transparent;
}

/* END Swiper */
/* Leaflet */

.leaflet-pane {
  z-index: 25 !important;
}

.leaflet-div-icon-custom {
  background: none;
  border: none;
}

.custom-map-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-pin {
  width: 50px;
  /* Ancho del icono principal */
  height: 50px;
  /* Alto del icono principal */
  border-radius: 50%;
  /* Hacerlo circular */
  background-color: #fff100;
  /* Color amarillo de fondo (ajusta según tu paleta) */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Ocultar partes de la imagen que se salgan */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Sombra suave */
  border: 2px solid white;
  /* Borde blanco opcional */
}

.marker-pin img {
  width: 75%;
  /* Ajustar tamaño de la imagen dentro del círculo */
  height: 75%;
  object-fit: contain;
}

.marker-caret {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  /* Mitad del ancho deseado del caret */
  border-right: 10px solid transparent;
  /* Mitad del ancho deseado del caret */
  border-top: 12px solid #fff100;
  /* Alto y color del caret (mismo que el fondo del pin) */
  position: relative;
  top: -2px;
  /* Ajustar para que se solape ligeramente con el círculo */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
  /* Sombra para el caret */
}

/* Ajustes opcionales para el popup */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  /* Bordes redondeados para el popup */
}

.leaflet-popup-content {
  margin: 15px;
  /* Espaciado interno del popup */
  line-height: 1.4;
}

/* End Leaflet */
/* Datepicker */
.datepicker {
  width: 100%;
}

/* End Datepicker */
/************************* CORE *************************/
.btn-green:not(.btn-outline) {
  --btn-color: var(--color-green);
  --btn-fg: var(--color-green-content);
  @apply btn btn-outline px-4 py-2 text-base hover:text-white;
}

@media only screen and (max-width: 768px) {
  .btn-green:not(.btn-outline) {
    @apply btn bg-[#8fd013] px-4 py-2 text-base hover:bg-[#a1e438] border-none;
    color: #fff;
  }
}

.border-gradient-animated,
.shadow-gradient-animated {
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(115deg, #fb921b, #338aff, #3cf0c5);
  background-size: 600%;
  z-index: 2;
  position: relative;
  transition: all 0.2s ease;
  animation: anime 10s linear infinite;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-gradient-animated > div {
  border-radius: 7px;
}

@media screen and (min-width: 768px) {
  .border-gradient-animated:hover {
    filter: brightness(1.1);
  }

  .shadow-gradient-animated {
    position: absolute;
    width: 120%;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    z-index: -1;
    filter: blur(30px);
    opacity: 0.8;
    height: 100%;
    transform: translate(-50%, 40%);
  }
}

@utility fade-in {
  animation-name: fade-in;
  animation-duration: 500ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@utility fade-out {
  animation-name: fade-out;
  animation-duration: 500ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anime {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.grid-auto-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* Si el último elemento es impar (es decir, queda solo en la fila) */
.grid-auto-4 > :nth-child(2n + 1):last-child {
  grid-column: 1 / -1;
  max-width: 50%;
  margin: auto;
}

.gradient-shadow {
  --gradient-direction: to top;
  /* Valor por defecto */
  --start-color: rgba(0, 0, 0, 0.9);
  --end-color: rgba(0, 0, 0, 0);
  --start-percentage: 0%;
  /* Valor por defecto */
  --end-percentage: 60%;
  /* Valor por defecto */
  position: relative;
}

.gradient-shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    var(--gradient-direction),
    var(--start-color) var(--start-percentage),
    var(--end-color) var(--end-percentage)
  );
  z-index: -1;
}

@property --banner-color-start {
  syntax: "<color>";
  initial-value: rgba(13, 116, 185, 0.9);
  inherits: false;
}

@property --banner-color-end {
  syntax: "<color>";
  initial-value: rgba(13, 116, 185, 0);
  inherits: false;
}

.banner-gradient {
  --start: 31%;
  --end: 60%;
  --degree: 120deg;
  transition:
    --banner-color-start 200ms ease-in,
    --banner-color-end 200ms ease-in;
  background: linear-gradient(
    var(--degree),
    var(--banner-color-start) var(--start),
    var(--banner-color-end) var(--end)
  );

  /* // cuando la slide activa tenga la clase .pool */
  &:has(.swiper-slide-active img.pool) {
    --banner-color-start: rgba(13, 116, 185, 0.9);
    --banner-color-end: rgba(13, 116, 185, 0);
  }

  /* // cuando la slide activa tenga la clase .paver */
  &:has(.swiper-slide-active img.paver) {
    --banner-color-start: rgba(141, 120, 94, 0.9);
    --banner-color-end: rgba(141, 120, 94, 0);
  }

  &:has(.swiper-slide-active img.fire) {
    --banner-color-start: rgba(193, 102, 15, 0.7);
    --banner-color-end: rgba(193, 102, 15, 0);
  }

  .accent {
    color: #62bce4;
  }

  .paver-accent .accent {
    color: #352612;
  }

  .fire-accent .accent {
    color: #6d5419;
  }

  .water-accent .accent {
    color: #008080;
  }

  .render-accent .accent {
    color: #334a23;
  }
}

@media (min-width: 768px) {
  .accent ~ .link-items > a {
    @apply hover:border-b-[#62bce4];
  }

  .paver-accent .link-items > a {
    @apply hover:border-b-[#352612];
  }

  .fire-accent .link-items > a {
    @apply hover:border-b-[#6d5419];
  }

  .water-accent .link-items > a {
    @apply hover:border-b-[#008080];
  }

  .render-accent .link-items > a {
    @apply hover:border-b-[#334a23];
  }
}

.banner-gradient-paver {
  --banner-color-start: rgba(141, 120, 94, 0.9);
  --banner-color-end: rgba(168, 121, 63, 0);
}

.banner-gradient-fire {
  --banner-color-start: rgba(193, 102, 15, 0.9);
  --banner-color-end: rgba(193, 102, 15, 0);
}

.banner-gradient-water {
  --banner-color-start: rgba(76, 140, 143, 0.9);
  --banner-color-end: rgba(76, 140, 143, 0);
}

.banner-gradient-render {
  --banner-color-start: rgba(118, 164, 79, 0.9);
  --banner-color-end: rgba(118, 164, 79, 0);
}

.break-inside-avoid {
  break-inside: avoid;
}

.video-container {
  overflow: hidden;
}

.video-container .video-icon {
  width: 2.375rem;
  height: 2.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.megamenu-gradient {
  background: #0d74b9;
  background: linear-gradient(
    135deg,
    rgba(13, 116, 185, 0.8) 0%,
    rgba(141, 120, 94, 0.8) 100%
  );
}

.careers-container {
  .careers-grid {
    @apply grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3;
  }

  .badge {
    @apply rounded-xs;
  }

  nav[role="navigation"] {
    width: 100%;
  }
}

.school-layout {
  .banner {
    height: auto;
    min-height: initial;
    background: linear-gradient(
      rgba(13, 116, 185, 0.9) 0%,
      rgba(13, 116, 185, 0.5) 100%
    );
  }
  .banner_body {
    padding-top: 0;
  }
}

.blog-layout {
  @apply min-h-screen flex;

  .hero-blog-container {
    @apply flex items-center justify-center flex-col;
  }

  .banner:has(.hero-blog-container) {
    height: auto;
    min-height: initial;
    background: linear-gradient(
      rgba(13, 116, 185, 0.9) 0%,
      rgba(13, 116, 185, 0.5) 100%
    );
  }

  .drawer-content {
    @apply flex flex-col justify-between;

    main {
      @apply flex-1;
    }
  }

  .link-tw-paginator {
    @apply flex flex-col-reverse gap-2;
  }
}

.post-layout {
  .banner:has(.hero-picture) .banner_body::after {
    content: "";
    @apply bg-gradient-to-b from-primary from-[5%] to-transparent to-100% absolute left-0 right-0 top-0 h-40;
  }

  header {
    max-width: none;
    @apply bg-primary relative;
    z-index: 1;
  }

  /*   .banner-gradient {
    --start: 0%;
    --middle: 30%;
    --end: 60%;
    --degree: 180deg;
    --banner-color-start: rgba(13, 116, 185, 1);
    --banner-color-middle: rgba(13, 116, 185, .7);
    --banner-color-end: rgba(13, 116, 185, 0);
    background: linear-gradient(
      var(--degree),
      var(--banner-color-start) var(--start),
      var(--banner-color-middle) var(--middle),
      var(--banner-color-end) var(--end));
  } */

  .grid-aside {
    width: 100%;
    display: grid;
    grid: "body sidebar" 1fr / 1fr 350px;
    gap: 2rem;

    aside {
      grid-area: sidebar;
      min-width: 200px;
    }

    .content {
      grid-area: body;
    }
  }

  .posts-swiper {
    .swiper-slide {
      height: auto;
      display: flex;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    --swiper-navigation-sides-offset: -20px;
    @apply !bg-primary text-white p-3 aspect-square flex items-center justify-center;

    &:after {
      font-size: 28px;
    }
  }
}

.bg-paver {
  background: #8d785e;
}

.text-paver {
  color: #a77734;
}

.from-bg-paver {
  --tw-gradient-from: rgb(141 120 94 / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(141 120 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-bg-paver {
  --tw-gradient-from: rgb(141 120 94 / 1);
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

@media (min-width: 576px) {
  .video-container .video-icon {
    width: 3rem;
    height: 3rem;
  }
}

.video-container:hover .video-icon {
  display: none;
}

.backdrop-faded {
  --phoenix-black-rgb: 0, 0, 0;
  --phoenix-black: #000000;
  position: absolute;
  width: 100%;
  padding: 1.5rem;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--phoenix-black-rgb), 0) 0%,
    var(--phoenix-black) 100%
  );
}

.img-zoom-hover {
  img {
    transition:
      transform 0.5s,
      -webkit-transform 0.5s;
  }

  a {
    text-decoration: none;
  }

  .backdrop-faded {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;

    &:has(h4:empty) {
      display: none;
    }
  }

  &:hover {
    img {
      transform: scale(1.2);
    }

    .backdrop-faded {
      opacity: 1;
    }
  }
}

/************************* END CORE *********************/

/************************* REVIEWS *************************/
.birdeye-widget-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.birdeye-widget-container iframe {
  width: 100%;
  max-width: 100% !important;
}

/************************* END REVIEWS *********************/

/************************* LANDING *************************/
header {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  right: 0 !important;
  z-index: 99;
  max-width: 1500px;
}

.drawer-side {
  overflow-y: clip;

  [class*="grid-service-"] {
    @apply grid-cols-1 md:grid-cols-2;
    grid-template-rows: auto;

    > li:has(.title-menu-section) {
      @apply col-span-1 md:col-span-2;
    }
  }

  [class*="grid-gallery-"] {
    @apply grid grid-cols-1 md:grid-cols-2 pb-0;
    grid-template-rows: auto;

    > li:has(.title-menu-section) {
      @apply md:col-span-2;
    }
  }

  .grid-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;

    > li:has(.title-menu-section) {
      grid-column: 1 / span 2;
    }
  }

  .grid-features {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}

.banner {
  height: 50vh;
  height: 50dvh;
  max-height: 600px;
  min-height: 500px;
  width: 100%;
  position: relative;
  display: grid;
  grid: "header" auto "main" 1fr "footer" auto / 1fr;
  transition:
    height 0.5s ease,
    min-height 0.5s ease;

  &.animated {
    height: auto;
    min-height: 0;
  }

  .banner_top {
    background: rgba(13, 116, 185, 0.5);
    grid-area: header;
    padding: 0 1rem;
  }

  .banner_swiper {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -1;

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

  .banner__end {
    grid-area: footer;

    .swiper-pagination {
      position: static;
      width: fit-content;
    }
  }
}

.gallery-section {
  @apply min-h-[500px];
  background:
    linear-gradient(
      to right,
      rgba(13, 116, 185, 0.9) 25%,
      rgba(13, 116, 185, 0) 80%
    ),
    url("../images/pools/10.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper#featureSwiper {
  overflow: hidden;
}

.container-estimate {
  background:
    linear-gradient(
      to right,
      rgba(13, 116, 185, 1) 65%,
      rgba(13, 116, 185, 0) 80%
    ),
    url("../images/pools/7.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/************************* END LANDING *********************/
#estimateDropzone.dropzone {
  display: flex;
  min-height: 260px;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

#estimateDropzone.dropzone .dz-message {
  margin: auto;
}

#estimateDropzone.dropzone .dz-preview {
  background-color: transparent;
  margin: 0;
}

#estimateDropzone.dropzone .dz-preview .dz-image {
  width: 200px;
  height: 200px;
}

#estimateDropzone.dropzone .dz-preview .dz-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/************************* AI *********************/
.icon {
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease;

  .line-h {
    width: 20px;
    height: 2px;
    background-color: #393939;
    opacity: 1;
    transition: opacity 0.1s ease;
  }

  .line-v {
    height: 20px;
    background-color: #393939;
    width: 3px;
    position: relative;
    left: 50%;
    transition: background-color 0.1s ease;
  }
}

.accordion-item {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
}

.accordion-item input[type="radio"] {
  min-height: initial;
}

.collapse-title {
  padding-top: 0;
  padding-bottom: 0;
  min-height: initial;
  transition: color 0.3s ease;
}

.accordion-item:has(input[type="radio"]:checked) {
  .collapse-title {
    @apply text-primary;
  }

  .icon {
    height: auto;
    bottom: 22px;

    .line-v {
      height: 100%;
      @apply bg-primary;
    }

    .line-h {
      opacity: 0;
    }
  }
}

/************************* END AI *****************/

/************************* DESIGN *********************/
#featureTabs h5 {
  @apply text-primary;
}

#featureSwiper .swiper-pagination-bullet {
  @apply size-2.5 opacity-70 !bg-gray-300;
}

#featureSwiper .swiper-pagination {
  @apply hidden;
}

#featureSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  @apply !bg-primary;
}

@media screen and (max-width: 1280px) {
  #featureTabs li:not(:nth-child(1)) {
    @apply opacity-0;
  }

  #featureSwiper .swiper-pagination {
    @apply flex;
  }

  #featureTabs li h5 {
    @apply text-2xl;
  }

  #featureTabs li p {
    @apply text-pretty;
  }

  .container:has(#featureTabs) h2.title-section-blue-variant::after {
    content: "";
    @apply bg-primary mx-auto mb-8 h-1 w-24 block mt-6;
  }
}

@media screen and (min-width: 1280px) {
  #featureTabs .active-slide > div {
    @apply border-primary;
  }
}

.nav-item__career-header {
  @apply hidden;
}

.nav-item__career-about-menu {
  @apply flex;
}

@media screen and (min-width: 1145px) {
  .nav-item__career-header {
    @apply flex;
  }

  .nav-item__career-about-menu {
    @apply hidden;
  }
}

/************************* END DESIGN *****************/

/************************* BLOG *********************/
.grid-blog-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.grid-blog-categories > div:nth-child(1) {
  grid-area: 1 / 1 / 4 / 2;
}

.grid-blog-categories > div:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;
}

.grid-blog-categories > div:nth-child(3) {
  grid-area: 2 / 2 / 3 / 3;
}

.grid-blog-categories > div:nth-child(4) {
  grid-area: 3 / 2 / 4 / 3;
}

/************************* END BLOG *****************/
@media screen and (max-width: 768px) {
  .banner {
    height: 80dvh;
    min-height: 430px;
    max-height: 455px;
  }

  .banner .gallery-footer-links > div.group-row {
    @apply hidden;
  }

  .banner .gallery-footer-links > div.group-row:has(.active) {
    @apply flex;
  }

  .banner .gallery-footer-links > div.group-row a:not(.active) {
    @apply hidden;
  }

  .banner .select-gallery-links {
    @apply bg-primary text-white outline-2 outline-white px-4 py-0 border-0 border-r-[10px] border-r-primary focus-visible:outline-white font-medium cursor-pointer;
    outline-offset: -4px;
    text-align: center;
    text-align-last: center;
    min-height: 55px;
  }

  .banner .select-gallery-links :is(option, optgroup) {
    @apply bg-white text-primary rounded-none;
    text-align: left;
    text-align-last: left;
  }

  .banner .water-accent .select-gallery-links {
    background: teal;
    border-color: teal;
  }

  .banner .fire-accent .select-gallery-links {
    background: #6d5419;
    border-color: #6d5419;
  }

  .banner .render-accent .select-gallery-links {
    background: #334a23;
    border-color: #334a23;
  }

  .banner .paver-accent .select-gallery-links {
    background: #352612;
    border-color: #352612;
  }

  .bg-paver-mobile {
    background: rgba(141, 120, 94, 0.78);
  }

  .bg-pool-mobile {
    background-color: rgba(13, 116, 185, 0.7);
  }

  .bg-fire-mobile {
    background-color: rgba(236, 158, 74, 0.5);
  }

  .bg-water-mobile {
    background-color: rgba(102, 180, 183, 0.7);
  }

  .bg-green-mobile {
    background-color: rgba(118, 164, 79, 0.5);
  }

  .banner:has(.gallery-footer-links) {
    height: auto;
    max-height: initial;
  }

  .banner:has(.gallery-footer-links) .banner_body {
    min-height: 280px;
  }

  .container-estimate {
    background-image:
      linear-gradient(
        to bottom,
        rgba(13, 116, 185, 0.9) 65%,
        rgba(13, 116, 185, 0.3) 100%
      ),
      url("../images/pools/7.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  }

  .banner-gradient {
    --start: 0%;
    --middle: 40%;
    --end: 70%;
    background: linear-gradient(
      180deg,
      var(--banner-color-start) var(--start),
      var(--banner-color-start) var(--middle),
      var(--banner-color-end) var(--end)
    );

    &:has(.swiper-slide-active img.pool) {
      --banner-color-start: rgba(13, 116, 185, 0.8);
      --banner-color-end: rgba(13, 116, 185, 0.2);
    }

    &:has(.swiper-slide-active img.paver) {
      --banner-color-start: rgba(141, 120, 94, 0.8);
      --banner-color-end: rgba(141, 120, 94, 0.2);
    }
  }

  #featureTabs li p {
    max-width: 430px;
    margin: auto;
  }

  #pool-builder .swiper-wrapper {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .post-layout {
    .grid-aside {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
    }
  }
}

.container-three-body {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}
.three-body {
  --uib-size: 50px;
  --uib-speed: 0.8s;
  --uib-color: #fff100;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
  -webkit-animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}
.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}
.three-body__dot:after {
  content: "";
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--uib-color);
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform-origin: 50% 85%;
  -webkit-transform-origin: 50% 85%;
}
.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out;
  -webkit-animation: wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
  -webkit-animation-delay: calc(var(--uib-speed) * -0.3);
}
.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform-origin: 50% 85%;
  -webkit-transform-origin: 50% 85%;
}
.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)
    ease-in-out;
  -webkit-animation: wobble1 var(--uib-speed) infinite ease-in-out;
}
.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
  -webkit-transform: translateX(116.666%);
}
.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out;
  -webkit-animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin78236 {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes wobble1 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@-webkit-keyframes wobble1 {
  0%,
  100% {
    -webkit-transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}

@-webkit-keyframes wobble2 {
  0%,
  100% {
    -webkit-transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}