/* PALETTE */



:root {



    --verde-oliva: #7c8b45;



    --testo: #333;



    --bianco: #fff;



}







/* RESET */



body, h1, h2, h3, p, a {



    margin: 0;



    padding: 0;



    font-family: "Helvetica Neue", sans-serif;



    color: var(--testo);



}







body {



    background: #f7f7f7;



}







/* HERO */



.hero {



    position: relative;



    height: 90vh;



    overflow: hidden;



}







.slider {



    height: 100%;



    width: 100%;



    position: relative;



}







.slide {



    position: absolute;



    height: 100%;



    width: 100%;



    opacity: 0;



    transition: opacity 1.5s ease-in-out;



}







.slide.active {



    opacity: 1;



}







.slide img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.hero-text {



    position: absolute;



    bottom: 10%;



    left: 5%;



    color: var(--bianco);



    text-shadow: 0 2px 10px rgba(0,0,0,0.6);



}



.hero-text {

    position: absolute;

    bottom: 10%;

    left: 5%;

    color: var(--bianco);

    text-shadow: 0 2px 10px rgba(0,0,0,0.6);

}



.hero-text h1,

.hero-text p {

    color: rgba(255, 255, 255, 0.85) !important;

}



.hero-text h1 {



    font-size: 3rem;



}







.hero-text p {



    font-size: 1.3rem;



}







/* SEZIONE DIMORE */



.dimore {



    padding: 60px 20px;



    text-align: center;



}







.cards {



    display: flex;



    justify-content: center;



    gap: 40px;



    margin-top: 40px;



}







.card {



    background: var(--bianco);



    border-radius: 12px;



    overflow: hidden;



    width: 320px;



    box-shadow: 0 4px 20px rgba(0,0,0,0.1);



    transition: transform .3s;



}







.card:hover {



    transform: translateY(-8px);



}







.card img {



    width: 100%;



    height: 220px;



    object-fit: cover;



}







.card h3 {



    margin: 20px 0 10px;



    color: var(--verde-oliva);



}







.card p {



    padding: 0 20px 20px;



}







.btn {



    display: inline-block;



    background: var(--verde-oliva);



    color: var(--bianco);



    padding: 10px 20px;



    margin-bottom: 20px;



    border-radius: 6px;



    text-decoration: none;



}







/* GIARDINO */



.giardino {



    padding: 60px 20px;



    text-align: center;



}







.giardino-img {



    width: 80%;



    border-radius: 12px;



    margin-top: 20px;



}







/* FOOTER */



footer {



    background: var(--verde-oliva);



    color: var(--bianco);



    padding: 20px;



    text-align: center;



}



@media (max-width: 768px) {

    .hero-text h1 {

        font-size: 2rem;

    }



    .hero-text p {

        font-size: 1rem;

    }

}