/* Estilos generales */
body {margin: 0;padding: 0;font-family: Arial, sans-serif;background-image: url('../img/turron.jpg');background-size: contain;}
h1, h2, h3, p {margin: 0;padding: 0;}
a {text-decoration: none;color: inherit;}

/* Header */
.xixona {background-image: url('../img/xixona.jpg');background-size: cover;text-align: center;padding: 50px 0;color: white;}

/* destino */
#destino {padding: 50px 100px;text-align: center;background-color: #b28a71cc;margin: 60px 0px;}
#destino h2 {font-size: 30px;color: #0D5379;font-weight: 700;text-shadow: 2px 2px 4px #725645;}

/*Estilos para la sección */
section {display: flex;}
.otros{flex-basis: 80%;width: 80%;padding: 50px 0;text-align: center;}
.texto{padding: 20px 70px;}
.texto p{padding: 3px 0px;font-style: oblique;font-size: 18px;}

/*Menu lateral*/
.section-div {flex-basis: 20%;width: 20%;padding-top: 50px;background-color: #0a2531b6;color: white;text-align: left;}
.section-div img{pad: 5px 5px;}
.section-div ul {list-style: none;padding: 0;margin: 0;}
.section-div li{padding: 15px 10px;margin-top: 10px;margin-right: 50px;transition: 0.8s;border-radius: 5px;}
.section-div li:hover{background-color: #6EC1E4;}
.section-div a {display: flex;align-items: center;}
.mop{width: 20%;border-radius: 3px;margin-right: 10px;}
.menu-toggle-label {display: none;cursor: pointer;padding: 10px;background-color: #6EC1E4;text-align: center;}
    .menu-toggle-label span {display: block;width: 25px;height: 3px;margin-bottom: 5px;background-color: white;}

/*Video*/
.video{background-color: #5a3d35dd;padding: 20px 0px;}
#miVideo{width: 60%;}

/* Estilos para la tabla */
.tabla-show{
  display: flex;
  justify-content: center;
  width: 100%;
}
.custom-table {
  margin: 30px 30px;
  padding: 50px 30px;
  width: 100%;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.custom-table th {
  background-color: #f5f5f5c4;
  font-weight: bold;
  text-align: center;
}

.custom-table-cell {
  text-align: center;
}




/*Testimonios*/
.testimonios {display: flex;justify-content: space-between;background-color: #a18e5de2;padding: 50px 80px;}

.testimonio {
    width: 30%;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.testimonio img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.contenido {
    margin-top: 10px;
}

.contenido h3 {
    margin: 0;
}

.contenido p {
    margin: 0;
}

/*RESPONSIVE*/
@media screen and (max-width: 768px) {
  body {background-size: cover;}
  .xixona {background-size: contain;padding: 30px 0;}
  #destino {padding: 30px;margin: 30px 0;}
  #destino h2 {font-size: 24px;}
  section {width: 100%;}
  .otros {flex-basis: 100%;width: 100%;padding: 30px 0;}
  .texto {padding: 10px;}
  .texto p {font-size: 12px;}
  .section-div{flex-basis: 0%;width: 100% ;padding-top: 0px;}
  .section-div ul {display: none;}
  .section-div .menu-toggle {display: block;cursor: pointer;padding: 5px;background-color: #6EC1E4;text-align: center;}
  .section-div .menu-toggle span {display: block;width: 25px;height: 3px;margin-bottom: 5px;background-color: white;}
  .video {padding: 10px 0;}
  #miVideo {width: 100%;}

      /* Estilos para tablet y dispositivos móviles */
      .custom-table {
        font-size: 14px;
    }

    .custom-table th,
    .custom-table td {
        padding: 8px;
    }

  /* Testimonios */
  .testimonios {
  flex-direction: column;
  padding: 30px;
  }
  .testimonio {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  }
  .testimonio img {
  width: 60px;
  height: 60px;
  }
  .contenido {
  margin-top: 10px;
  }
  .contenido h3 {
  font-size: 16px;
  }
  .contenido p {
  font-size: 12px;
  }
}

@media screen and (max-width: 480px) {
  body {background-size: cover;}
  .xixona {background-size: contain;padding: 20px 0;}
  #destino {padding: 20px;margin: 20px 0;}
  #destino h2 {font-size: 20px;}
  .otros {flex-basis: 100%;width: 100%;padding: 20px 0;}
  section {width: 100%;}
  .texto {padding: 10px;}
  .texto p {font-size: 12px;}
  .section-div{flex-basis: 0%;width: 100% ;padding-top: 0px;}
  .section-div ul {display: none;}
  .section-div .menu-toggle {display: block;cursor: pointer;padding: 5px;background-color: #6EC1E4;text-align: center;}
  .section-div .menu-toggle span {display: block;width: 25px;height: 3px;margin-bottom: 5px;background-color: white;}
  .video {padding: 10px 0;}
  #miVideo {width: 100%;}

      /* Estilos para dispositivos móviles más pequeños */
      .custom-table {
        font-size: 12px;
    }

    .custom-table th,
    .custom-table td {
        padding: 6px;
    }
  /* Testimonios */
  .testimonios {
    flex-direction: column;
    padding: 20px;
  }

  .testimonio {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
  }

  .testimonio img {
    width: 50px;
    height: 50px;
  }

  .contenido {
    margin-top: 10px;
  }

  .contenido h3 {
    font-size: 14px;
  }

  .contenido p {
    font-size: 10px;
  }
}