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

section div{margin-bottom: 50px;}

.opDestinos {display:flex;justify-content: space-between;padding: 50px 100px; background-color: #0f3243ef;}

/*Slide*/
.slider{flex: 1; display: flex; flex-direction: column;align-items: center;}
.slider img{width: 450px;height: 300px;margin-top: 20px;box-shadow: 15px 15px 5px #041720;}
.titleSlide{font-size: 30px;font-weight: bold;text-shadow:3px 3px 5px #041720}




/* Nosotros */
#nosotros {padding: 50px 0px;background-color: #1b5891cf;color: lightgray;text-align: center;}
#nosotros h2{font-size: 30px;margin-bottom: 40px;text-shadow:2px 2px 8px black;font-stretch:ultra-expanded;}
#nosotros p{font-style: italic;font-size: 18px;padding: 10px 0px;margin: 0px 200px;}

/* Información */
#info {padding: 50px 0px;background-color: #1b5891b0;color: lightgray;text-align: center;}
#info h2{font-size: 30px;margin-bottom: 40px;text-shadow:2px 2px 8px black;}
#info p{font-style: italic;font-size: 18px;padding: 10px 0px;margin: 0px 200px;}

/* Experiencias */
#experiencias {padding: 40px 0px;background-color: rgba(240, 255, 255, 0.926);color:#041720;text-align: center;}
#experiencias h2{font-size: 35px;margin-bottom: 40px;text-shadow:2px 2px 4px #1b5891b0;}

.opinions { display: flex; align-items: center; justify-content: center; margin-top: 20px;}
.opinions .prev-button, .opinions .next-button {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.prev-button img, .next-button img{width: 100%;}

.opinions .opinion {width: 290px;height: 335px;padding: 30px 20px;margin: 0 10px;text-align: center;background-color: white;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
.perfil {width: 100px; height: 100px; object-fit: cover; border-radius: 50%;margin-bottom: 15px;}
.opinion h1{font-size: 20px;}
.opinion p {margin: 15px 15px;}
.valorar{width: 50%;margin:10px auto;object-fit: cover;}

/* Scroll Top Button */
#scroll-top-button {position: fixed;bottom: 20px;right: 20px;cursor: pointer;}
#scroll-top-button img {width:60px;height:60px;border-radius: 120px;}

/* RESPONSIVE*/
@media screen and (max-width: 768px) {
    body {background-size: cover;}
    .opDestinos {flex-direction: column;padding: 30px 20px;}   
    .slider img {width: 100%;height: auto;}
    .titleSlide {font-size: 24px;}
    #nosotros p {margin: 0px 20px;}
    #info p {margin: 0px 20px;}
    .opinions .opinion {width: 80%;height: auto;margin: 0 10px;}
    .valorar {width: 100%;}
}

@media screen and (max-width: 480px) {
    body {background-size: cover;}
    .opDestinos {flex-direction: column;padding: 20px 10px;}   
    .slider img {width: 100%;height: auto;}
    .titleSlide {font-size: 20px;}
    #nosotros p {margin: 0px 10px;}
    #info p {margin: 0px 10px;}
    .opinions {flex-direction: column;}
    .opinions .opinion {width: 60%;height: auto; margin: 0 10px 20px;}
    .valorar {width: 100%;}
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .opDestinos {padding: 40px 80px;}
    .slider img {width: 350px;height: 250px;}
    .titleSlide {font-size: 26px;}
    #nosotros p,#info p {margin: 0;}
    .opinion {width: 250px;height: 285px;margin: 0 8px;}
    .perfil {width: 80px;height: 80px;}
    .valorar {width: 60%;margin: 10px auto;}
}