/* Evidenziare voce menù in cui ci troviamo */
.attivo{
    border-bottom: 0.2rem solid #EA444C;
    cursor: default;
}
:root {
    --swiper-pagination-color: #EA444C;
}

/* section presentazione */

#presentazione{
    position: relative;
    overflow: hidden;
}
#boxImmagine{
    height: 50rem;
    /* overflow: hidden; */
}

#sfondoTitolo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenburns-top 5s ease-out both;
}
@keyframes kenburns-top {
   0% {
     transform: scale(1) translateY(0);
     transform-origin: 50% 16%;
   }
   100% {
     transform: scale(1.25) translateY(-15px);
     transform-origin: top;
   }
 }
#titolo{
    position: absolute;
    top: 15rem;
    left: 4.5rem;
}
h1{
    margin: 0;
    font-size: 5rem;
    font-weight: 500;
}
#lineaRossaTitolo{
    height: 0.313rem;
    width: 36.75rem;
    background-color:#EA444C;
    margin-top: -6rem;
    animation: caricamento 1s linear;
}
@keyframes caricamento{
    0%{width: 0%;}
    100%{width: 100%;}
}
#sottotitolo{
    width: 0;
    overflow: hidden;
    font-size: 3rem;
    margin-top: 7rem;
    animation: caricamentoSottotitolo  3s 1.5s linear both;
}
@keyframes caricamentoSottotitolo{
    0%{width: 0%; background: linear-gradient(90deg, rgba(234,68,76,1) 0%, rgba(234,68,76,0.7635386918439251) 50%, rgba(234,68,76,0) 80%); }
    100%{width: 100%; background: linear-gradient(90deg, rgba(234,68,76,1) 0%, rgba(234,68,76,0.7635386918439251) 50%, rgba(234,68,76,0) 80%);}
}
#sottotitolo p{
    width: 26rem;
    font-size: 3rem;
    margin: 0;
}
 
/* Section descrizione */

#descrizione{
    width: 60rem;
    display: flex;
    flex-wrap: wrap;
    margin: 4rem auto;
    /* border: #EA444C solid 1px; */
}
#descrizione p{
    text-align: center;
    width: 18rem;
    padding: 1rem;
    font-size: 1.3rem;
    line-height:2rem ;
    opacity: 0;
}
#descrizione p span{
    color: #EA444C;
}
#paragrafoRelax{
    margin:auto;
}
#paragrafoMare{
    margin:auto;
}
#paragrafoNatura{
    margin:auto;
}


/* Section Strutture */
#alloggi{
    margin: 4rem 4.5rem;
}
#alloggi h2{
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
    margin-top: 3.75rem;
}
#boxCards{
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}
.card{
    margin: 1rem 0;  
}
/* #boxCards div:first-child{
    margin-left: 0;
  }
#boxCards div:last-child{
    margin-right: 0;
  } */
.card a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.boxImg{
    height: 25rem;
    width: 17.5rem;
    overflow: hidden;
}
.lineaRossaCard{
    width: 2rem;
    height:1px;
    margin: auto 0.625rem auto 0;
    background-color: #EA444C;
}
.titoloCard{
    display: flex;
    height: 2rem;
}
.titoloCard a{
    margin-top: 3px;
    font-size: 1.3rem;
    font-weight: 100;
    color: #E1DFDE;
}

/* Recensioni */

#recensioni{
    margin: 4rem auto;
    width: 60rem;
}
.cardRecensione{
    margin: auto;
    background-color: #e8e4e656;
    width: 59rem;
    min-height: 25rem;
    border-radius: 20px;
}

#recensioni .graffaAlta{
    margin: 1rem auto auto 1rem;
    width: 2rem;
}
#recensioni h3 {
    font-size: 1.6rem;
    text-align: center;
    padding: 0.5rem;
}
#recensioni p {
    padding: 1rem;
    font-size: 1.3rem;
    text-align: center;
}
#recensioni .graffaBassa {
    transform: rotate(180deg);
    margin: auto auto 1rem 56rem;
    width: 2rem;
}


@media (max-width: 1300px) {
    html{
        font-size: 0.9em;
    }
}
@media (max-width: 1170px) {
    html{
        font-size: 0.8em;
    }
}
@media (max-width: 1040px) {
    html{
        font-size: 0.7em;
    }
}
@media (max-width: 900px) {
    .card{
        margin: 1rem 1.5rem;  
    }
    .boxImg{
        height: 320px;
        width: 235px;
    }
    #boxCards{
        justify-content:space-around;
    }
    #descrizione{
        width: 30rem;
    }
    #recensioni{
        width: 30rem;
    }
    .cardRecensione{
        width: 29rem;
        height: 30rem;
    }
    #recensioni .graffaBassa {
        margin: auto auto 1rem 26rem;
    }
}
@media (max-width: 500px) {
    #titolo{
        top: 20rem;
        left: 3rem;
    }
    h1{
        font-size: 3.5rem;
    }
    #sottotitolo p{
        font-size: 1.9rem;
    }
    #lineaRossaTitolo{
        width: 25.75rem;
        margin-top: -4.3rem;
    }
    

    /* html{
        font-size: 0.5em;
    }
    .titoloCard a{
        font-size: 1.7rem;
    }
    .titoloCard{
        height: 22.4px;
        margin-bottom: 20px;
    } */
    
}