@font-face {
  font-family: Novecento;
  src: url(../fonts/Novecento\ Bold.otf);
}

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

@font-face {
  font-family: HKGrotesk-Bold;
  src: url(../fonts/HKGrotesk-Bold.otf);
}

body {
  height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

:root {
  --blue: #242b57;
  --blue-light: #4197cb;
  --gray: #f3f5f7;
  --gray-dark: #758496;
  --pink: #e63a82;
}

body {
  font-family: HKGrotesk;
  color: var(--blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Novecento;
}

.menu-slide {
  transition: transform 0.3s ease-in-out;
}
.overlay {
  transition: opacity 0.3s ease-in-out;
}

p.title-bold {
  font-family: HKGrotesk-Bold;
}

.bg-blue {
  background-color: var(--blue);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-blue-light {
  background-color: var(--blue-light);
}

.color-blue {
  color: var(--blue);
}

.color-pink {
  color: var(--pink);
}

.color-gray-dark {
  color: var(--gray-dark);
}

.menu .active,
.menu-mobile .active {
  color: var(--pink);
  font-weight: bold;
}

.menu a:hover,
.menu-mobile a:hover {
  color: var(--pink);
}

.bg-gray {
  background-color: var(--gray);
}

.menu-mobile {
  display: none;
}

.w-90 {
  width: 90% !important;
}

#close-menu-btn {
  background-color: var(--blue);
  padding: 5px;
  border-radius: 100px;
  color: white;
}

#left-arrow,
#right-arrow {
  display: none;
}

@media screen and (max-width: 1340px) {
  .menu,
  .ayuda-img {
    display: none !important;
  }

  .menu-mobile {
    display: block;
  }

  .w-90 {
    margin: auto;
    width: 95% !important;
  }

  .div-tel {
    margin: 0px 35px;
  }

  .w-mob {
    width: 100% !important;
  }
}

@media screen and (max-width: 1023px) {
  .persons {
    justify-content: start;
    height: auto !important;
  }
}

@media screen and (max-width: 767px) {
  .h-div {
    height: 300px!important;
  }

}

@media screen and (max-width: 767px) {
  #places-items ul {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #places-items ul li button {
    width: max-content;
  }
  #places-items ul li{
    margin: 0px!important;
    margin-bottom: 10px!important;
  }
  #default-tab-content {
    width: 100%;
  }
  #default-tab-content .p-4 .flex {
    width: 100%;
    flex-direction: column!important;
  }
  #places-items ul {
    height: auto!important;
  }
}

@media screen and (max-width: 750px) {
  .w-90 {
    margin: auto;
    width: 85% !important;
  }
  p.title-bold {
    font-size: 35px !important;
  }

  .cont-padd .persons {
    padding-top: 50px !important;
  }

  #left-arrow,
  #right-arrow {
    display: block;
  }

  button.h-10 {
    width: 300px;
  }
}

@media screen and (max-width: 534px) {
  .cont-padd {
    padding-top: 180px !important;
  }
  .div-slider-info {
    margin-bottom: 0px!important;
    height: auto!important;
  }
}

.persons {
  background-image: url("../images/persons.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  height: 100vh;
}

@media (max-width: 640px) {
  .persons {
    background-image: none;
  }
}

.cont-padd {
  padding-top: 143px;
}

.tab-link {
  background-color: var(--gray);
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0px 3px 6px #00000029;
}
.active-tab {
  background-color: var(--blue);
  color: #fff;
}

.active-tab img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(13%)
    hue-rotate(334deg) brightness(102%) contrast(105%);
}

/****/



#places-items ul li button.active,
#accordion-collapse h2 button.dark\:bg-gray-800 {
  background-color: var(--blue);
  color: white;
}

#places-items ul li button {
  background-color: var(--gray);
  color: var(--blue);
}

#places-items ul {
  height: 910px;
}

.div-slider-info {
  margin-bottom: -10%;
}

/****/

.shadow-p {
  box-shadow: 0px 3px 6px #00000029;
}

.slider-tabs .slick-list .slick-track {
  display: flex;
  gap:5px;
}

/**/

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}

.btn-filter {
  background-color: var(--blue-light);
  color: #ffffff;
}
.btn-filter img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(13%) hue-rotate(334deg) brightness(102%) contrast(105%)!important;
}

li button[aria-selected="false"] img{
  filter: brightness(0) saturate(100%) invert(18%) sepia(25%) saturate(1257%) hue-rotate(193deg) brightness(95%) contrast(100%);
}

li button[aria-selected="true"] img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(13%) hue-rotate(334deg) brightness(102%) contrast(105%);
}

.h-div {
  height: 900px;
}

.badge {
  border: 1px solid var(--blue-light);
  color: var(--blue-light);
}

.sm\:justify-center {
  justify-content: center;
}

.sm\:bg-contain {
  background-size: contain;
}


/*********************************/


.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.checkbox-group > * {
  margin: 0.5rem 0.5rem;
}

.checkbox-group-legend {
  font-size: 1.5rem;
  font-weight: 700;
  color: #9c9c9c;
  text-align: center;
  line-height: 1.125;
  margin-bottom: 1.25rem;
}

.checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.checkbox-input:checked + .checkbox-tile {
  border-color: #C9FFDB;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #758496;
  background-color: #C9FFDB;
}
.checkbox-input:checked + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #C9FFDB;
  border-color: #307D0B;
}
.checkbox-input:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile .checkbox-label {
  color: #758496;
}
eckbox-input:focus + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-tile {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding: 15px ;
  border: 1px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
  gap: 12px;
  align-items: center;
}
.checkbox-tile:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.checkbox-input:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile:before  {
  background-image: url('../images/close-check.svg');
}

.checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
  font-size: small;
}