body {
  font-family: 'Poppins', sans-serif;
}
input[readonly] {
  cursor: not-allowed;
}
#timer-container {
  text-align: right;
}
.default-result-div {
  padding-top: 150px;
}
.properties-map {
  background-color: #d3f8e2;
}
.type_view_container {
  text-align: right;
}
.type_view_container i{
  opacity: .6;
  font-size: 1.5rem;
  cursor: pointer;
}
.type_view_container i:hover{
  opacity: 1;
}
.type_view_container i.active{
  opacity: 1;
}
#kinderparadijs_description h3 {
  margin-top: 50px;
}
.contact-container-form {
  min-height: 500px;
  padding-top: 200px;
  text-align: justify;
  background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 18%)), 
                  url(/image/kinderparadije-bg-one.jpg);
}
#gallery-content {
  margin-bottom: 150px;
}
#cloudlare-catp iframe{
  width: 100% !important;
  height: auto !important; /* O ajusta la altura si es necesario */
}
.content-ship-contact {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 70px;
}
.content-ship-contact i {
    font-size: 36px;
    padding-bottom: 25px;
}
.content-ship-contact i, .content-ship-contact span, .content-ship-contact a {
    display: block;
    text-align: center;
}
.content-ship-contact a {
  text-decoration: none;
  color: #222;
}
.contact-container-form h1{
  color: white;
  text-align: center;
}
#form-contact form {
  padding: 20px;
  background-color: white;
  box-shadow: rgb(0 0 0 / 46%) 0px 8px 20px;
}
.parallax-layer {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.loading_button {
  cursor: not-allowed !important;
  opacity: .7;
}
/* Popup container - can be anything you want */
.popup {
  position: fixed;
  z-index: 99;
  display: none;
  padding: 2px;
  top: 20%;
  right: 5%;
}
.popuptext {
  position: relative;
  padding: 10px;
  border-left: 0px;
  padding: 15px;
  margin: 0px;
  display: table-cell;
}
.icon_message_success {
  position: relative;
  padding: 10px;
  border-radius: 0px;
  border: solid 1px #84b856;
  color: white;
  display: table-cell;
  vertical-align: middle;
  background: #84b856;
  border-right: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.icon_message_danger {
  position: relative;
  padding: 10px;
  padding-top: 13px;
  border-radius: 0px;
  border: solid 1px #721c24;
  color: white;
  display: table-cell;
  vertical-align: middle;
  background: #721c24;
  border-right: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.success {
  background: #dff0d8;
  color: #3c763d;
}
.danger {
  color: #721c24;
  background-color: #f8d7da;
  border: solid 1px #721c24;
}
.info {
  color: #2179c1; 
  background: #dee9f2;
}
table ul {
  list-style: none;
}
.thanks {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
}
#camping_sfeer, #kinderparadijs_schedules, #verjaardagsfeestjes-h{
  margin-top: 50px;
}
.left-align {
  text-align: left;
}
.right-align {
  text-align: right;
}
.text-pretty {
  color: #8070b1;
}
.margin-top-50 {
  margin-top: 50px;
}
.p-t-5 {
  padding-top: 50px;
}
.p-t-10 {
  padding-top: 100px;
}
.p-b-10 {
  padding-bottom: 100px;
}
#kinderparadijs_parallax {
  background-image: url('/image/hero-1-kinderparadijs.jpeg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px; /* Ajusta según necesites */
  position: relative;
  padding-top: 180px;
  text-align: center;
}
#kinderparadijs_parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(24 21 21 / 29%);
}
#kinderparadijs_parallax h1{
  position: absolute;
  width: 100%;
  color: white;
  font-size: 4rem;
  font-weight: bold;
  font-family: 'Comic Neue', cursive;
}
#kinderparadijs_parallax span {
  position: absolute;
  width: 100%;
  color: white;
  left: 0px;
  font-weight: 200;
  top: 250px;
}
#kinderparadijs_description h1 {
  font-size: 4rem;
  font-weight: bold;
  font-family: 'Comic Neue', cursive;
}
#kinderparadijs_description ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#kinderparadijs_description p {
  color: rgb(86, 88, 94);
}
#kinderparadijs_description ul li {
  display: inline-block;
  margin-right: 80px;
  vertical-align: top;
}
#kinderparadijs_description .feature {
  font-size: 1.5rem;
  display: block;
  font-weight: bold;
}
#kinderparadijs_description .feature .feature_unit {
  display: block;
}
footer table tr td{
  border-top: solid 1px white;
  padding: 10px;
}
footer a {
  color: white !important;
  text-decoration: none;
}
footer i {
  display: inline-block;
  vertical-align: middle;
  padding-right: 10px;
}
footer h5 {
  margin-bottom: 25px;
  font-weight: bold;
}
.custom-title {
  margin-bottom: 60px;
  margin-top: 6px;
  text-align: center;
  font-family: 'Comic Neue', cursive;
}
.custom-title .title {
  display: block;
  color: #ff7224;
  font-weight: bold;
}
.custom-title .short-description {
  color: #483290;
  font-weight: bold;
  font-size: 4rem;
}
.hero-section {
  background-position: center center;
  padding: 250px 0;
  background: url('/image/bg-hero.webp'); 
  background-repeat: no-repeat;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-size: cover;
}
.hero-section {
  background-color: #563cab;
}
.shape-hero{
  transform: rotate(180deg);
  fill: white;
  position: absolute;
  width: 100%;
  bottom: -1px;
  background-color: transparent;
}
.shape-hero svg {
  height: 75px;
  width: 100%;
}
.card-content a {
  color: white;
  text-decoration: none;
}
.service-card {
  text-align: center;
  align-items: center;
  transition: transform 0.3s ease;
  padding-top: 70px;
  color: white;
  padding: 70px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 70px;
}
.service-card.one {
  background-color: #43a62c;
}
.service-card.thow {
  background-color: #ffc201;
}
.service-card.three {
  background-color: #ff6666;
}
.service-card:hover {
  transform: translateY(-10px);
}
.service-card img {
  width: 100%;
  max-width: 70px;
}
.testimonial-carousel {
  padding: 50px 0;
}
#about-us {
  background-color: #eef8ff;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}
#verjaardagsfeestjes {
  background-color: #eef8ff;
  position: relative;
}
#schoolreisjes , #verjaardagsfeestjes, #kinderparadijs_schedules {
  padding-top: 100px;
  padding-bottom: 100px;
} 
#kinderparadijs_prices {
  padding-bottom: 100px;
}
#kinderparadijs_schedules {
  padding-top: 0px;
  padding-bottom: 0px;
}
#about-us p {
  color: #8070b1;
}
#shape-about-us {
  position: absolute;
  z-index: 1;
  top: -1px;
  width: 100%;
  fill: white;
}
.shape-blue {
  position: absolute;
  z-index: 1;
  top: -1px;
  width: 100%;
  fill: white;
}
#shape-about-us svg {
  height: 25px;
  width: 100%;
}
#about-us {
  /*
  background-position: center center;
  background: url('/image/bg-colors-and-rockets.png'); 
  background-repeat: no-repeat;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-size: cover;
  */
}
#testimonials {
  background-position: center center;
  background: url(/image/bg-colors-and-rockets.png);
  background-repeat: no-repeat;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-size: contain;
  background-position: center;
  padding-top: 150px;
  padding-bottom: 150px;
}
#testimonials p {
  color: #0e9aff;
  font-weight: bold;
  font-size: 1.5rem;
  font-family: 'Comic Neue', cursive;
}
#testimonials h5 {
  color: #04cb8f;
  font-weight: bold;
  font-family: 'Comic Neue', cursive;
}
.carousel-item img {
  width: 100%;
  max-width: 150px;
  border-radius: 150px;
}
.carousel-control-next, .carousel-control-prev {
  max-width: 50px;
  height: 50px;
  top: 45%;
  background-color: #0b5ed7;
  opacity: .9;
}
footer {
  background-color: #563cab;
  color: #fff;
  padding: 40px 0;
}
.logo-header {
  width: 100%;
  max-width: 150px;
}
.logo-footer {
  max-width: 100px;
}
.navbar {
  transition: .3s;
}
.nav-link {
  color: white;
  font-family: 'Comic Neue', cursive;
  font-weight: bold !important;
  font-size: 24px;
  opacity: .9;
}
.nav-link:focus, .nav-link:hover {
  opacity: 1;
  color: white;
}
.navbar-brand img {
  width: 100%;
  max-width: 150px;
}
.bg-nav {
  background-color: white;
}
.bg-nav .nav-link {
  color: #222;
}
.bg-nav .navbar-brand img{
  max-width: 100px;
}
.btn-primary {
    background-color: #fee502;
    color: #3c297a;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
   /* box-shadow: rgb(0 0 0 / 46%) 0px 8px 20px; */
}
.letter {
    display: inline-block;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    animation: fadeBounce 0.8s forwards;
}
.form-control {
  margin-bottom: 15px;
}
.input-group select {
  height: 38px;
}
::placeholder {
  opacity: 0.8 !important; /* Reduce la opacidad para igualarlo con los normales */
}
#hero div.left{
  text-align: left;
}
#hero {
  position: relative;
}
#hero h2 {
    font-size: 48px;
    font-weight: bold;
    white-space: nowrap;
}
#lang_content {
  float: right;
}
body.reservations {
  /*background-color: #563cab;*/
}
#reservations {
  margin-top: 50px;
  max-width: 800px;
  margin: auto;
}
#filters {
  padding: 20px;
  max-width: 800px;
  margin: auto;
}
#banner_camping {
  max-width: 800px;
  margin: auto;
  position: relative;
}
#banner_camping  img {
  width: 100%;
  max-width: 800px;
}
.properties {
    max-width: 800px;
    margin: auto;
}
#headerCart {
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}
#headerCart .nav-return i, #headerCart .nav-return span {
  display: inline-block;
  vertical-align: middle;
}
#contador {
  font-weight: bold;
}
/*
.properties {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    /*max-width: 800px;
    margin: auto;
}
.property {
    display: flex;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    gap: 20px;
}

.property img {
    width: 150px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
}

.property-info {
    flex: 1;
}

.property h3 {
    margin: 5px 0;
}

.property p {
    margin: 5px 0;
    color: #555;
}

.property button {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.property button:hover {
    background: #218838;
}
*/
.property {
  margin-bottom: 15px;
  margin-top: 15px;
  border: solid 1px #1111;
  background-color: white;
}
.property .feature{
  display: inline;
}
.property .feature span {
  display: inline-block;
  vertical-align: middle;
}
.property .feature span.feature-value {
  margin-right: 10px;
}
.content-img, .content-info {
  display: inline-block;
}
.property .content-info {
  padding-left: 25px;
}
.form-gruop .desc {
  font-size: 10px;
  font-style: italic;
  padding-left: 5px;
}
.form-gruop label, span.desc {
  display: block;
}
.form-gruop {
  display: inline-block;
  margin-bottom: 15px;
}
.form-gruop input, .form-gruop select, .form-gruop textarea   {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-form-control-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .375rem;
  transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
}
#reservations_form h4 {
  margin-top: 25px;
  margin-bottom: 25px;
}
.published {
  padding-top: 25px;
  margin-top: 50px;
  border-top: solid 1px #1111;
  text-align: center;
}
#order_details {
  padding-top: 70px;
}
#order_details .title {
  border-bottom: solid 1px #1111;
  margin-bottom: 50px;
}
#order_details label{
  font-weight: bold;
}
/* Animación */
@keyframes fadeBounce {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Aplicar colores y retrasos */
.letter:nth-child(1) { color: #FF5733; animation-delay: 0s; }
.letter:nth-child(2) { color: #FF8D1A; animation-delay: 0.1s; }
.letter:nth-child(3) { color: #FFC300; animation-delay: 0.2s; }
.letter:nth-child(4) { color: #DAF7A6; animation-delay: 0.3s; }
.letter:nth-child(5) { color: #33FF57; animation-delay: 0.4s; }
.letter:nth-child(6) { color: #33FFF5; animation-delay: 0.5s; }
.letter:nth-child(7) { color: #337BFF; animation-delay: 0.6s; }
.letter:nth-child(8) { color: #8D33FF; animation-delay: 0.7s; }
.letter:nth-child(9) { color: #C833FF; animation-delay: 0.8s; }
.letter:nth-child(10) { color: #FF33A8; animation-delay: 0.9s; }
.letter:nth-child(11) { color: #FF3366; animation-delay: 1s; }
.letter:nth-child(12) { color: #FF3333; animation-delay: 1.1s; }
.letter:nth-child(13) { color: #FF5733; animation-delay: 1.2s; }
.letter:nth-child(14) { color: #FF8D1A; animation-delay: 1.3s; }
.letter:nth-child(15) { color: #FFC300; animation-delay: 1.4s; }
.letter:nth-child(16) { color: #DAF7A6; animation-delay: 1.5s; }
.letter:nth-child(17) { color: #33FF57; animation-delay: 1.6s; }
.letter:nth-child(18) { color: #33FFF5; animation-delay: 1.7s; }
.letter:nth-child(19) { color: #337BFF; animation-delay: 1.8s; }
.letter:nth-child(20) { color: #8D33FF; animation-delay: 1.9s; }
.letter:nth-child(21) { color: #C833FF; animation-delay: 2s; }
.letter:nth-child(22) { color: #FF33A8; animation-delay: 2.1s; }
.letter:nth-child(23) { color: #FF3366; animation-delay: 2.2s; }
.letter:nth-child(24) { color: #FF3333; animation-delay: 2.3s; }
.letter:nth-child(25) { color: #FF3333; animation-delay: 2.3s; }
.letter:nth-child(26) { color: #FF3333; animation-delay: 2.3s; }

.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #25d366;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

#contact {
  padding-top: 50px;
  padding-bottom: 150px;
}

.input-container {
  position: relative;
  margin-bottom: 15px;
  vertical-align: middle;
  display: inline;
}

.input-container input, .input-container select, .input-container button {
  width: 100%;
  height: 50px;
  padding: 10px 10px 10px 40px; /* Espacio para el ícono */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  max-width: 170px;
}
.input-container input[type="text"] {
  max-width: 50px;
}
.input-container button i{
}
#propertiesForm {
  text-align: center;
}
#propertiesForm .input-container label {
  display: none;
}
.input-container i{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.input-container i::not(.btn-primary) {
  color: #777;
}
.input-container .button {
  margin: 0px;
  height: 45px;
  margin-bottom: 15px;
}
.input-container .button i {
  position: initial; 
  transform: initial;
}
@media (max-width: 768px) {
  #banner_camping {
    display: none;
  }
  #propertiesForm .input-container i{
    display: none;
  }
  #propertiesForm .input-container label {
    display: block;
    text-align: left;
  }
  #propertiesForm .input-container input[type='date'] {
    text-align: left;  
    text-align-last: left;
  }
  #propertiesForm .input-container input,  
  #propertiesForm .input-container select, 
  #propertiesForm .input-container button {
    max-width: 100%;
    width: 100%;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  #propertiesForm .input-container {
    position: relative;
    display: block;
  }
  footer .right-align {
    text-align: left !important;
  }
  .carousel-control-next, .carousel-control-prev {
    display: none;
  }
  #hero h2 {
    font-size: 2rem;
  }
  .custom-title .title {
    font-size: 1.2rem;
  }
  .custom-title .short-description {
    font-size: 1.5rem;
  }
  .navbar {
    background-color: white;
  }
  .nav-link {
    color: #222;
  }
  .navbar-brand img{
    max-width: 100px;
  }
  .navbar .btn-primary {
    display: none;
  }
  .property {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .property img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }
}
.itivos_ajax_loading {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
}
.itivos_ajax_loading div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: itivos_ajax_loading 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.itivos_ajax_loading div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.itivos_ajax_loading div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.itivos_ajax_loading div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
#reservations_form {
  max-width: 800px;
  margin: auto;
  padding: 10px;
}
@keyframes itivos_ajax_loading {
  0% {
    top: 8px;
    height: 64px;
    background-color: #bfdfdc;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}