/* Color palette */
:root {
	--primary-color: #DAC666;
	--secondary-color: #005D6E;
	--greene-color: #6D8973;
	--dark-pink-color: #B67162;
	--mid-pink-color: #E2BCB7;
	--pink-color: #E4D3CF;
	--text: #757575;
	--lighter-green: #D8DBD9;
	--lighter-pink: #F4EDEC;
    --darker-green: #4F6957;
    --var-pink-color: #e4bfb9;
    --aubergine-color: #87586C;
    --darker-aubergine: #704D61;
    --lighter-teal: #66A3AD;
}

/* Stili generali per i titoli */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.2;
    font-weight: 400;
    color: black;
}

/* Dimensioni Desktop */
h1 { font-size: 48px; }
h2 { font-size: 40px; }
h3 { font-size: 32px; }
h4 { font-size: 28px; }
h5 { font-size: 24px; }
h6 { font-size: 18px; }

/* Testi generici */
body, p, a, span, li, input, textarea {
    font-family: 'Mulish', sans-serif;
    color: var(--text);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

li {
    padding: 0.3em 0;
}

body{
    margin: 0;
}

/* Adattamenti per Mobile (≤ 768px) */
@media screen and (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; }
    body, p, a, span, li, input, textarea {
        font-size: 14px;
        line-height: 1.5;
    }
    ul {
        padding-inline-start: 1em;
    }
}

hr {
	border-style: dotted;
	margin-block-end: 0;
	margin-block-start: 0;
  	margin: 5vh 5vw;
}


/* generals */

.centered{
    text-align: center;
}

.left {
	text-align: left;
}

.uppercase{
    text-transform: uppercase;
}

.red{
	color: var(--dark-pink-color);
}

.white{
	color: white;
    fill: white;
}

.secondary-color{
    color: var(--secondary-color);
}

.green{
	color: var(--greene-color);
}

/* Stile Generale per le Card */
.card {
    width: min(75vw, 1200px);
    height: auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--primary);
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 -16px 24px rgb(0 0 0 / 15%);
    transform-origin: center top;
}

/* Stili per i titoli dentro le card */
.card h2 {
    font-size: inherit;
    margin-bottom: 10px;
}

.card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.card ul {
    list-style: none;
    padding: 0;
}

.card ul li {
    margin-bottom: 8px;
}

/* Sezione Stack */
.stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

/* Stili per le card nella sezione stack */
.stack .card {
    position: relative;
    width: 90%;
    max-width: 1024px;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Mostra solo la prima card inizialmente */
.stack .card:first-child {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Imposta gli z-index per la sovrapposizione corretta */
.stack .card {
    z-index: calc(10 - var(--index));
}

/* Aggiunto per evitare che le card vadano sopra l'header */
.stack .card:last-child {
    margin-bottom: 80px;
}


/* Per schermi fino a 1024px (Tablet) */
@media (max-width: 1024px) {
    .stack .card {
        width: 95%;  /* Le card occupano più spazio */
        padding: 25px;  /* Meno padding per non sprecare spazio */
        font-size: 1rem;  /* Adatta il testo */
    }
}

/* Per schermi fino a 768px (Smartphone) */
@media (max-width: 768px) {
    .stack {
        align-items: stretch;  /* Allarga le card al 100% */
    }

    .stack .card {
        width: 100%;  /* Le card occupano tutto lo schermo */
        padding: 0px;  /* Meno spazio ai lati */
        font-size: 0.95rem;  /* Testo leggermente più piccolo */
        box-shadow: none;  /* Rimuove l'ombra per evitare ingombro */
        border-radius: 0;  /* Rende il layout più pulito */
    }

    /* Aggiunto margine tra le card */
    .stack .card:not(:last-child) {
        margin-bottom: 10px;
    }
}

/* Per schermi molto piccoli (max 480px) */
@media (max-width: 480px) {
    .stack .card {
        padding: 0px;
        font-size: 0.9rem; 
    }
}

.section_tag{
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
    margin: 0 auto;
}

.isolate{
    padding: 16px 0;
    margin: 2vh;
}

.centered-text{
    text-align: center;
    margin: 0 auto;
    display: block;
}

/**** contenuto stack card ****/
/* LISTA servizi per cliente */
ul.horizontal-services-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 40px 0;
    flex-wrap: wrap;
    justify-content: space-evenly; /* Distribuisce gli elementi equamente */
    align-items: stretch; /* Mantiene l'altezza uniforme tra gli elementi */
}

/* Stile per ogni <li> */
li.horizontal-services {
    flex: 0 0 20%;               /* Occupa massimo il 20% della larghezza dello schermo */
    max-width: 250px;            /* Larghezza massima per evitare elementi troppo grandi */
    min-width: 200px;            /* Evita che diventi troppo stretto */
    text-align: left;          /* Centra il contenuto */
    background: #f8f8f8;         /* Sfondo leggero */
    padding: 15px;               /* Spaziatura interna */
    border-radius: 8px;          /* Angoli arrotondati */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera */
    display: flex;               /* Usa flexbox */
    flex-direction: column;      /* Dispone gli elementi in verticale */
    align-items: center;         /* Centra gli elementi */
    margin-bottom: 0px;
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    ul.horizontal-services-list{
        overflow-x: visible;
    }
    li.horizontal-services {
        flex: 0 0 45%;          /* Due colonne su tablet */
        max-width: 90%;        /* Larghezza adattabile */
        text-align: center;     /* Centra il contenuto */
        padding: 20px;          /* Maggiore spazio interno */
    }
}

/* Smartphone (max-width: 768px) */
@media (max-width: 768px) {
    li.horizontal-services {
        flex: 0 0 100%;         /* Ogni elemento occupa tutta la larghezza */
        max-width: 90%;
        padding: 25px;          /* Maggiore spazio per leggibilità */
        text-align: center;     /* Centra il testo */
    }
}

/* Schermi molto piccoli (max-width: 480px) */
@media (max-width: 480px) {
    li.horizontal-services {
        padding: 15px;          /* Riduce il padding per evitare spreco di spazio */
        font-size: 0.95rem;     /* Testo leggermente più piccolo */
    }
}

/* Immagini dentro i <li> */
.horizontal-services img {
    max-width: 100%;             /* L'immagine non supera la larghezza del <li> */
    height: auto;                /* Mantiene le proporzioni */
    margin-bottom: 10px;         /* Spazio sotto l'immagine */
}

/* Testo dentro i <li> */
.horizontal-services h5,
.horizontal-services p,
.horizontal-services a {
    max-width: 100%;             /* Il testo occupa il 100% della larghezza del <li> */
    word-wrap: normal;       
}

.horizontal-services h5 {
    text-align: center;
    margin: 0;
    font-weight: 900;
    font-size: larger;
}

.list-icon{
    color: var(--secondary-color);
    display: inline-block;
    width: 16px;
    vertical-align: middle;
}

/**** contenuto liste documenti ****/
/* LISTA documenti per cliente */
ul.horizontal-document-list {
    display: grid;                 /* Usa grid invece di flex */
    grid-template-columns: repeat(3, 1fr); /* 3 colonne */
    gap: 20px;                     /* Spaziatura tra i documenti */
    margin: 40px auto;             /* Margini per centrare il contenuto */
    padding: 20px;
    max-width: 1024px;             /* Limita la larghezza massima */
}

li.document-card {
    background: #fff;              /* Sfondo bianco */
    padding: 20px;                 /* Spaziatura interna */
    border-radius: 8px;            /* Angoli arrotondati */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera */
    display: flex;                 /* Usa flexbox */
    flex-direction: column;        /* Dispone gli elementi in verticale */
    align-items: center;           /* Centra gli elementi */
    text-align: center;            /* Allinea il testo */
}

.card-icon{
    color: var(--dark-pink-color);
    width: 25%;
    margin: 0 auto;
}

.city_image{
    border-radius: 100%;
    background-color: #D64994;
}

/* Adatta il layout su dispositivi più piccoli */
@media (max-width: 768px) {
    ul.horizontal-document-list {
        grid-template-columns: repeat(2, 1fr); /* Passa a 2 colonne */
    }
}

@media (max-width: 480px) {
    ul.horizontal-document-list {
        grid-template-columns: repeat(1, 1fr); /* Disposizione in 1 colonna su schermi piccoli */
    }
}

/**** Pricing table ****/
/* Stile generale tabella prezzi */
.pricing-table {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.pricing-table-heading {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.pricing-table table {
    table-layout: auto;  /* Lascia che la tabella si adatti */
    width: 100%;  
}

.pricing-table tr:not(:last-child) {
    border-bottom: 1px solid #ddd; /* Bordo grigio chiaro */
}

.pricing-table td {
    padding: 12px;
    text-align: left;
    font-size: 1rem;
}

.pricing-table td sub, td.pricing-table sub {
    display: block;
    color: var(--text);
    font-weight: 500;
    font-size: smaller;
}

.pricing-table .pricing-table-price {
    text-align: right;
    font-weight: bold;
    color: var(--greene-color);
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.pricing-table td:last-child {
    white-space: nowrap;  /* Impedisce il wrapping del testo */
    text-align: right;  /* Allinea i prezzi a destra */
    min-width: 100px; /* Imposta una larghezza minima per i prezzi */
}

.pricing-table td:last-child sub {
    display: block;
    font-size: 0.8em;  /* Riduce leggermente la dimensione */
    vertical-align: baseline;  /* Allinea in modo naturale */
    margin-right: 5px; /* Dà un piccolo spazio per separarlo */
}


/* Responsive: layout a colonna su schermi piccoli */
@media (max-width: 768px) {
    .pricing-table td {
        display: block;
    }
    .pricing-table td:last-child{
    border-bottom: 1px solid #ddd; /* Bordo grigio chiaro */
}

    .pricing-table .pricing-table-price {
        margin-top: 5px;
    }
}



/* Stile per il main content */
.main-content {
    max-width: 1440px;
    margin: 5vh auto; /* Centra il contenuto principale */
    z-index: 2;
}

/* Scroll fade-in effect */
.hidden {
    opacity: 0;
    transform: translateY(32px); /* Slight vertical movement for added effect */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Slower and smoother */
}

.fade-in {
    opacity: 1;
    transform: translateY(0); /* Return to original position */
}


/* ===== HEADER & NAVIGATION BAR STYLING ===== */

/* General Navbar */
.site-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    justify-content: center;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    z-index: 100;
    background-color: transparent; /* Default: transparent */
}

/* Navbar when scrolled */
.site-header.scrolled {
    background-color: white; /* Cambia in bianco quando si scrolla */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Nascondi un logo e mostra l'altro in base allo scroll */
.logo-image{
    height: auto;
}

.logo-image.light {
    display: block;
}
.logo-image.dark {
    display: none;
}

.site-header.scrolled .logo-image.light {
    display: none;
}

.site-header.scrolled .logo-image.dark {
    display: block;
}

/* NAVIGATION MENU */
.site-nav ul {
    display: flex;
    list-style: none; /* Rimuove i bullet points */
    margin: 0;
    padding: 0;
}

/* Menu items */
.navbar_link {
    position: relative;
    margin: 0 15px;
}

.navbar_link a {
    text-decoration: none;
    color: white; 
    padding: 10px 16px;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 24px; /* Angoli arrotondati */
}

.site-header.scrolled .navbar_link a{
    color: black;
}

.site-header.scrolled .navbar_link a:hover{
    color: white;
}

/* Hover effect */
@media (hover: hover) and (pointer: fine) {
    .navbar_link a:hover {
        background-color: var(--secondary-color); /* Usa il colore secondario al posto del rosa */
        color: white;
        border-radius: 24px; /* Angoli arrotondati */
    }
}

/* ACTIVE SECTION */
.navbar_link a.selected {
    background-color: var(--dark-pink-color);
    color: white;
    border-radius: 24px;
}

/* CTA BUTTON (CONTATTAMI) */
.navbar_link a.btn {
    background-color: var(--cta-color);
    color: white;
    padding: 12px 20px;
    border-radius: 24px;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;
}

/* Hover effect for CTA */
@media (hover: hover) and (pointer: fine) {
    .navbar_link a.btn:hover {
        background-color: var(--cta-hover-color);
    }
}

/* ===== DROPDOWN MENU ===== */
ul.dropdown {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    border-radius: 8px;
    min-width: 200px;
    overflow: hidden;
}

/* Dropdown visibile solo al click */
.navbar_link.open .dropdown {
    display: block;
}

/* Dropdown links */
.site-nav .dropdown li a {
    color: black;
    padding: 10px 20px;
    display: block;
    transition: background-color 0.3s ease;
    border-radius: 0px;
}

/* Hover effect */
@media (hover: hover) and (pointer: fine) {
    .site-nav .dropdown li a:hover {
        background-color: var(--secondary-color);
        color: white;
        border-radius: 0px;
    }
}

/* ===== MOBILE MENU ===== */
@media (max-width: 768px) {
    /* Navbar diventa un pannello laterale */
    .site-header{
        justify-content: space-between;
    }
    .site-nav {
        position: fixed;
        top: 0;
        right: -100%; /* Esce dallo schermo */
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: white;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease-in-out;
        padding-top: 60px;
    }

    /* Mostra il menu quando aperto */
    .site-nav.open {
        right: 0;
    }

    /* Stile per i link nel mobile menu */
    .site-nav ul {
        flex-direction: column;
        text-align: left;
        width: 100%;
    }

    .site-nav ul li {
        margin: 0;
        padding: 12px 20px;
        width: 100%;
    }

    /* Dropdown mobile */
    ul.dropdown {
        position: static;
        box-shadow: none;
        display: none;
        width: 100%;
    }

    .navbar_link.open .dropdown {
        display: flex;
        flex-direction: column;
    }

    .navbar_link a{
        color: black; 
    }

    /* Mobile menu button */
    .mobile-menu-icon {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        z-index: 101;
        padding-right: 5vw;
    }

    .mobile-menu-icon span {
        width: 24px;
        height: 3px;
        background-color: white;
        margin: 2.2px 0;
        transition: all 0.3s ease;
    }

    .site-header.scrolled .mobile-menu-icon span{
        background-color: black;
    }

    /* Opened menu icon */
    .mobile-menu-icon.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        background-color: black;
    }

    .mobile-menu-icon.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-icon.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
        background-color: black;
    }
    .logo-image{
        height: auto;
        height: 60px;
        padding: 1vh;
    }
}


/* ===== FOOTER and Social ===== */
/* Stili generali del footer */
.site-footer {
    background-color: #ECEBEB;
    color: #757575;
    padding: 40px 20px;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Permette agli elementi di andare su nuove righe se necessario */
}

.contact-info, .footer-links {
    margin: 0 20px; /* Spazio tra le sezioni */
    min-width: 200px; /* Imposta una larghezza minima per evitare che le sezioni diventino troppo strette */
}

.contact-info,
.footer-links {
    text-align: left; /* Allinea il testo a sinistra */
}

.footer-links {
    display: flex; /* Aggiungi Flexbox */
    justify-content: space-around; /* Distribuisce i link equamente */
    flex-wrap: wrap; /* Permette il wrap su dispositivi mobili */
    flex: 1;
}

.footer-links ul, .footer-column ul{
	list-style: none;
	margin: 0;
	padding-inline-start: 0px !important;

}

img.footer-logo{
    padding-top: 2vh;
}

img.footer_icon {
	vertical-align: bottom;
}


@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Dispone le sezioni una sotto l'altra */
        align-items: center; /* Centra tutto il contenuto */
        flex-wrap: wrap;
    }

    .footer-links {
        margin: 24px 0; /* Spazio tra le sezioni */
        width: 100%;
        flex-wrap: wrap;
    }

    .contact-info{
        display: flex;
        text-align: left;
        margin: 24px 0; /* Spazio tra le sezioni */
        width: 100%;
        flex-wrap: nowrap;
        justify-content: inherit;
    }

    .footer-column {
        width: 100%;
        text-align: left;
        margin-bottom: 24px;
    }

    .footer-column ul {
        padding: 0;
    }

    .contact-info h4, .footer-column h4{
        font-size: 16px;
        display: block;
        width: 100%;
        margin:0;
    }

    .contact-info p, .footer-column ul li {
        font-size: 14px;
    }

    .footer-bottom {
        font-size: 14px;
    }
    img.footer-logo {
    width: 25vw;
    }
    hr{
        margin: 5vh 1vw;
    }
}

/* social icons*/
.social-menu {
    display: flex;
    justify-content: center;
    margin-bottom: 5vw;
}


.social-menu ul{
  margin: 0;
  display: flex;
  padding-inline-start: 0;
}

.social-menu ul li{
    list-style: none;
    margin: 0 15px;
}

.social-menu ul li .fab{
    font-size: 30px;
    line-height: 60px;
    transition: .4s;
    color: #000;
}

.social-menu ul li a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
    transition: all 0.4s;
}



.social-menu ul li a:hover {
    transform: translate(0, -.5em);
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}

.social-menu ul li a:hover .fab{
    color: #fff;
}

.social-menu ul li:nth-child(1) a:hover{
    background-color: #3b5999;
}

.social-menu ul li:nth-child(2) a:hover{
    background-color: #e4405f;
}

.social-menu ul li:nth-child(3) a:hover {
    background-color: #0077B5;
}

.social-menu ul li a svg {
    transition: fill 0.4s;
    fill: #000; /* Default color */
}

.social-menu ul li a:hover svg {
    fill: white;
}

/* Stile di base del pulsante */
.btn, .btn.selected {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--primary-color) !important;
    color: black !important;
    border-radius: 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); /* Ombra di base */
    font-weight: bold;
}

/* Hover Effect */
.btn:hover {
    background-color: var(--secondary-color) !important; /* Cambia colore di sfondo */
    color: white !important; /* Testo bianco */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); /* Ombra più pronunciata */
}

/* INDEX PAGE - Hero Section - Background Fixed */
.hero_home {
                height: 85vh;
                background-image: url('../assets/Amanda-62-min.webp');
                background-size: cover;
                background-position: center;
                display: flex;
                justify-content: left;
                color: #ffffff;
                text-align: center;
                z-index: -1; /* Lo sfondo rimane sotto il contenuto */
                margin-bottom: 0;
            }
            .hero_home::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 85vh;
                background: rgba(0, 0, 0, 0.3); /* Sovrapposizione scura per una migliore leggibilità del testo */
                z-index: 0; /* Lo sfondo rimane sotto il contenuto */
            }
            .hero_home h2 {
                margin: 0;
                font-size: 48px;
                color: #fff;
                max-width: 640px;
                z-index: 1; /* Lo sfondo rimane sotto il contenuto */
                text-shadow: 0px 0px 10px black;
            }
            h2.sub-title{
                margin: 0;
                padding: 0;
                font-size: 32px;
                color: var(--primary-color) !important;
            }
            .hero_home p {
                font-size: 24px;
                color: #fff;
                margin: 16px auto;
                max-width: 640px;
            }
            .hero_home .btn{
                -webkit-box-shadow: 0px 0px 8px 5px rgba(0,0,0,0.2); 
                box-shadow: 0px 0px 8px 5px rgba(0,0,0,0.2);
            }
            .left {
                text-align: left;
            }

.hero{
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Rende lo sfondo fisso */
    height: 85vh; /* Occupa l'intera altezza della finestra */
    color: #fff; /* Colore del testo */
    position: relative; /* Mantiene il contenuto della sezione posizionato */
    z-index: 1; /* Assicura che il contenuto delle sezioni seguenti si sovrapponga */
}

.hero::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Sovrapposizione scura per una migliore leggibilità del testo */
    z-index: -1; /* Lo sfondo rimane sotto il contenuto */
}

.hero{
	background-image: url('../assets/Amanda-14-min.webp'); /* Immagine di sfondo */
	top: 0;
    left: 0;
    background-position: top center;
}

.hero h2 {
	padding-top: 20vh;
    margin: 0 auto;
    font-size: 48px;
    color: #fff;
    max-width: 640px;
}

.hero p{
    font-size: 24px;
    color: #fff;
    margin: 16px auto;
    max-width: 640px;
}

.hero .btn{
	-webkit-box-shadow: 0px 0px 8px 5px rgba(0,0,0,0.2); 
	box-shadow: 0px 0px 8px 5px rgba(0,0,0,0.2);
}

.hero-content {
    max-width: 50%; /* Il contenuto occupa il 50% della larghezza della sezione */
    padding-left: 5%; /* Distanza dal bordo sinistro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 5vh;
    max-width: 640px; /* Allineato alla larghezza massima del contenuto principale */
}

h2.sub-title{
	margin: 0;
	padding: 0;
	font-size: 32px;
	color: var(--primary-color) !important;
}


.hero_home p {
    font-size: 16px;
    color: #fff;
    margin: 16px 0;
    max-width: 100%; /* Mantiene il testo all'interno della larghezza massima */
}

.hero_home .btn {
    -webkit-box-shadow: 0px 0px 8px 5px rgba(0,0,0,0.2); 
    box-shadow: 0px 0px 8px 5px rgba(0,0,0,0.2);
    margin-top: 16px;
    max-width: fit-content;
}

.main_cta_subtitle {
    display:block;
    font-size: 14px;
    margin-top: 16px;
    color: #fff;
    font-weight: 300;
}

/* References */
.light_pink_background {
    background-color: var(--lighter-pink);
    padding: 20px 0; /* Aggiunge spazio verticale */
}

.references {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 40px 0px;
}

.references ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
}

.references li {
    margin: 16px auto;
}

.centered {
    text-align: center;
}

/* Regole per schermi più piccoli */
@media (max-width: 768px) {
    .references {
        flex-direction: column; /* Dispone le referenze in colonna */
        padding: 0px; /* Riduce il padding */
    }

    .references ul {
        flex-direction: column; /* Colonne singole */
        align-items: center;
    }

    .references li {
        width: 100%; /* Occupano tutta la larghezza disponibile */
        max-width: 80%; /* Limita la larghezza massima per evitare che diventi troppo grande */
        margin: 10px 0;
    }

    .references h1.grow {
        font-size: 24px; /* Adatta la dimensione del testo per schermi più piccoli */
    }

    .references p {
        font-size: 14px; /* Riduce la dimensione del paragrafo */
    }
}


/* ==== QUI INIZIA IL CODICE PER LA FASCIA DEI LOGHI A SCORRIMENTO === */

 @keyframes scroll-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.scroll-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.scroll-wrapper {
    display: flex;
    width: 100%;
}

.scroll {
    display: flex;
    gap: 40px;
    animation: scroll-animation 30s linear infinite;
}

.partners-container {
    text-align: center;
    width: 100%;
}

.partners-title {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--primary-color);
    margin-top: 0;
}

.partner {
    flex-shrink: 0;
}

.partner img.partners_logos {
    max-height: 80px;
    width: auto;
    height: 100%;
    display: inline-block;
    object-fit: contain;
}


h1.grow{
    font-family: 'Mulish';
    margin: 0 auto;
    font-size: xxx-large;
}

/* Stili comuni per le liste */

li.results h3, li.results p{
    text-align: center;
    display: block;
}

li.results h3{
    color: black;
}

li.results p{
    color: var(--dark-pink-color);
}

.light_pink_background {
    background-color: var(--lighter-pink);
}

/* Stili per titoli e paragrafi */
.references h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.references p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    display: inline-block; /* Consente al testo di essere centrato */
    vertical-align: middle; /* Allinea verticalmente il paragrafo */
}

.references h3 {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px; /* Aggiunge uno spazio tra il titolo e il paragrafo */
}


.left-bottom-corner{
    position: fixed;
    left:16px;
    bottom: 16px;
}


.client-name{
    font-style: italic;
    color: var(--greene-color);
    margin: 0;
}

.review-date{
    font-size: 10px;
    margin: 0;
}

.partners_logos {
    max-width: 120px;
    height:auto;
}

/* Sezione e descrizione Servizi */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0 auto;
    max-width: 1440px;
    padding: 20px;
}

.service-item {
    display: inline-block;
    align-items: center;
    max-width: 22vw;
    min-width: 300px;
    padding: 16px;
    text-align: left;
}

.service-item img {
    max-width: 80%;
    flex-shrink: 0;
    display: block;
    margin: 0 auto;
    background-color: var(--lighter-pink);
    border-radius: 0 50% 50% 50%;
    padding: 10%;
    overflow: visible;
}

.inline_icon{
    display: inline-block;
    vertical-align: sub;
    width: 20px;
}

.service-content {
    flex: 1;
}

.service-list{
    list-style: none;
}

.service-content h3, .content-block h3 {
	font-family: 'Mulish', sans-serif;
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: normal;
    color: var(--greene-color);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

.service-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-color);
}

.section_title {
    text-align: center; 
    width: 100%; 
}

.section_title h2 {
    margin: 0; 
    padding: 16px 0; 
    font-size: 32px; 
    font-family: 'Cormorant Garamond', serif; 
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .section_title h2{
        font-size: 24px;
        padding: 0;
    }
}

.service_detail{
    width: 60%;
    max-width: 1440px;
    min-width: 600px;
}

@media (max-width:768) {
    .service_detail {
        width: 90%;
        max-width: auto;
        min-width: auto;
    }
}

.detail_green_background{
    background-color: var(--lighter-green);
    border-radius: 0 500px 0 500px;
    height: 100%;
    padding: 5vw;
    z-index: -3;
}

.detail_pink_background{
    background-color: var(--lighter-pink);
    border-radius: 500px 0 500px 0;
    height: 100%;
    z-index: -3;
    padding: 5vw 0;
}

/* Stili per la sezione Affitto */
.rental-options {
    margin: 40px auto;
    max-width: 1200px;
    padding: 20px;
}

.columns {
    display: flex;
    justify-content: space-between;
    margin: 8vh 0;
}

.column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.margin-left{
	margin-left: 16px;
}

.margin-right{
	margin-right: 16px;
}

.margin-top{
	margin-top: 16px;
}

.doublemarginBR{
	margin-bottom: 32px;
	margin-right: 32px;
}

.doublemarginLT{
	margin-top: 32px;
	margin-left: 32px;
}

.content-block {
    padding: 32px 32px 48px 32px;
    background-color: rgba(223, 224, 230, 0.4);
    border-radius: 8px 100px 8px 100px;
}

.content-block p, .content-block ul {
    font-size: 16px;
    line-height: 1.5;
}

.content-block ul {
    list-style-type: disc;
    padding-left: 20px;
}

.image-block img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.locations {
    display: flex;
    justify-content: space-between; /* Spazia le colonne */
    gap: 20px; /* Aggiunge spazio tra le colonne */
    max-width: 600px; /* Limita la larghezza massima */
    margin: 0 auto; /* Centra il contenitore */
}

/* Sezione con effetto parallasse */
.parallax {
    /* Imposta l'altezza della sezione in base al contenuto */
    height: auto;
    
    /* Usa lo sfondo della sezione da altro stile */
    
    /* Fissa lo sfondo mentre la sezione scorre */
    background-attachment: fixed;
    
    /* Centra lo sfondo e scala l'immagine per coprire l'intera sezione */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Sezione Filosofia */
.philosophy {
    position: relative;
    padding: 60px 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Fallback color */
    overflow: hidden;
}

.section_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/leaf_green.svg'); /* Immagine di sfondo */
    background-size: cover;
    background-position: center;
    z-index: -1; /* Assicura che l'immagine di sfondo rimanga dietro il contenuto */
    opacity: 1; /* Opacità per il background */
}

.content-wrapper {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* Assicura che il contenuto sia sopra l'immagine di sfondo */
}

.photo-column {
    flex: 1;
    padding-right: 20px;
}

.text-column {
    flex: 2;
    padding-left: 20px;
}

.half-text-column{
    width: 50vw;
    margin: 0 auto;
}

.half-text-column > article{
    margin: 2vh 0;
}


@media (max-width: 768px) {
    .half-text-column{
        width: 85vw;
    }
}

.philosophy-photo {
    width: 100%;
    height: auto;
}

.article p {
    margin-bottom: 16px;
    line-height: 1.6;
}


/*** Pagina dedicata all'homestaging ***/

.flex-container {
    display: flex;
    flex-wrap: wrap;  /* Permette il passaggio in colonna su mobile */
    max-width: 1024px;
    margin: 5vh auto;   /* Centra il contenitore */
    justify-content: space-evenly; /* Distanza uniforme tra gli elementi */
    gap: 20px; /* Distanza uniforme tra le card */
}


.flex-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - 20px); /* Due card per riga con spazio tra loro */
    background-color: #f4f4f4; /* Sfondo leggero */
    border-radius: 8px; /* Angoli arrotondati */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Evita overflow di immagini */
}

.flex-item .homestaging_card{
    padding: 32px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.homestaging_title {
    margin: 0;
}

.homestaging_details {
    text-align: left;
}

.homestaging_details ul {
    list-style: none;
    padding-left: 0;
}

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
        align-items: center;
    }

    .flex-item {
        width: 100%; /* Occupa tutta la larghezza del contenitore */
        max-width: 100%;
    }
}



/* Blog Section */
.blog-section {
    position: relative; /* For background image positioning */
    padding: 60px 20px;
    overflow: hidden;
}

.blog-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/leaf_pink.svg'); /* Background leaf image */
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: -1;
}

.carousel-wrapper {
    display: flex;
    justify-content: space-evenly;
    gap: 24px;
    position: relative;
    z-index: 2;
    flex-direction: row-reverse;
    transition: transform 0.5s ease;
    max-height: 80vh;
}

/* Reattività per tablet e schermi medi */
@media (max-width: 768px) {
    .carousel-wrapper {
        flex-direction: row-reverse; /* Mantiene il layout orizzontale */
    }
}

/* Reattività per schermi molto piccoli (mobile) */
@media (max-width: 480px) {
    .carousel-wrapper {
        flex-direction: row-reverse;
        align-items: center; /* Centra gli elementi in colonna */
    }
}

.carousel-item{
    display: flex;
}

/* Blog Post */
.post {
    flex: 1 1 calc(33.333% - 20px); /* 3 columns */
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Post Image - Dynamic background */
.post-image {
    background-size: cover;
    background-position: center top;
    height: 200px;
    position: relative;
}

/* Author overlay on image */
.post-author, .service-tag {
    color: white;
    background-color: var(--dark-pink-color);
    padding: 5px 10px;
    border-radius: 4px;
    width: fit-content;
}

span.subtitle-tag {
    color: white;
    background-color: var(--greene-color);
    padding: 5px 10px;
    border-radius: 4px;
    width: fit-content;
    font-size: 14px;
    margin: 8px auto;
    display: block;
    text-transform: uppercase;
}

.post-author{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

/* Blog Card */
.blog-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spread content evenly */
    min-height: 240px; /* Uniform card height */
    overflow: hidden; /* Prevent overflow */
    position: relative; /* For controlled layout with label */
}

/* Blog Title */
.blog-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 10px;
    text-decoration: none;
}

/* Blog Content (Collapsed State) */
.blog-card .blog-content {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height 0.3s ease;
    max-height: 6.4em; /* Approximate height for 4 lines */
}

/* Blog Content (Expanded State) */
.blog-card input[type="checkbox"]:checked + .blog-content {
    -webkit-line-clamp: unset; /* Remove line clamp */
    max-height: 100%; /* Allow content to grow */
}

/* Hidden Checkbox */
.blog-card input[type="checkbox"] {
    display: none;
}

/* Toggle Label */
.blog-card .toggle-label {
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    align-self: flex-start; /* Align button to start */
}

/* Adjust Card Content to Always Fill Space */
.blog-card .blog-title {
    margin-bottom: auto; /* Push the blog-content to fill space */
}


/* Read More Link */
.blog-read {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .post {
        flex: 1 1 100%; /* Single column on smaller screens */
    }
}

/* Sezione Testimonianze */
.testimonial-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    margin: 0 auto;
}

.section_title {
    margin-bottom: 40px;
}

.carousel-container {
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    position: relative;
    padding: 16px 60px;
}

/* Reattività per schermi più piccoli */
@media (max-width: 768px) {
    .carousel-container {
        padding: 0; /* Riduce il padding laterale per frecce */
        overflow: hidden;
    }
}

/* Reattività per schermi molto piccoli (mobile) */
@media (max-width: 480px) {
    .carousel-container {
        padding: 0; /* Ulteriore riduzione per schermi molto piccoli */
        overflow: hidden;
    }
}

/* Singola slide - visualizzazione dinamica */
.testimonial-slide, article.post {
    position: relative;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    height: 100%;
    flex: 1 0 20%; /* Occupies 20% of space for 4 slides on large screens */
    transition: transform 0.3s ease;
    width: 20vw;
}

/* Adattamento tablet */
@media (max-width: 1024px) {
    .testimonial-slide, article.post {
        flex: 1 0 30%; /* Occupies 30% for 3 slides on medium screens */
    }
}

/* Adattamento mobile */
@media (max-width: 768px) {
    .testimonial-slide, article.post {
        width: 90vw;
        flex: 1 0 100%;  /* Occupies full width for mobile */
        height: 100%;
    }
}

/* Stili del testo all'interno della testimonianza */
.testimonial .comment {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 64px;
    margin-top: 20px;
    text-align: left;
    padding: 16px;
    max-height: 55vh;
    overflow-y: scroll;
}

.comment {
    line-height: 1.4; /* Line-height per mantenere una buona leggibilità */
    overflow-wrap: break-word; /* Gestisce parole lunghe senza overflow */
    text-align: center; /* Centra il testo per una migliore estetica */
}

/* Limita la crescita del font-size in caso di schermi piccoli */
@media (max-width: 768px) {
    .comment {
        font-size: clamp(1rem, 2vw, var(--h1-font-size)); /* Limita la crescita su schermi piccoli */
    }
}


.testimonial .service-tag{
    border-radius: 8px 0;
}

/* Stili carosello */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: var(--secondary-color);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.8;
}

.carousel-button.prev {
    left: 0px;
}

.carousel-button.next {
    right: 0px;
}

.carousel-button:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    /* Nasconde le frecce di navigazione */
    .carousel-button {
        display: none;
    }
}


/* stili pagina servizi */

.green_background{
    background:  linear-gradient(
        to top,  
    var(--darker-green), /* Darker green at the bottom */
    var(--greene-color) 60%); /* Lighter green moving towards the center */
    border-radius: 0 0 50% 50%;
}

.green_background, .pink_background, .teal_background, .aubergine_background{
    width: 100%;
    text-align: left;
    color: white;
    padding: 10vh 0;
}

.green_background article.service-item, .pink_background article.service-item, .teal_background article.service-item, .aubergine_background article.service-item {          
    max-width: 50vw;           /* Imposta la larghezza massima al 50% della viewport */
    text-align: justify;       /* Mantiene il testo a bandiera */
    padding: 20px;             /* Aggiunge un po' di padding interno */
    display: block;
    margin: 0 auto;  
}

h3.service-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: var(--text);
    text-transform: uppercase;
}

.services_bg {
    background-image: url(../assets/Amanda-6-min.webp);
    height: 70vh;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    z-index: -1;
}

/* biz card */
.biz-card{
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    background:var(--lighter-pink);
    width:100%;
    min-width: max-content;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 -16px 24px rgb(0 0 0 / 15%);
}

.biz-card .head{
  flex:1;
  padding:20px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.biz-card .head .avatar{
  overflow: hidden;
  height:120px;
  width:120px;
  border-radius:60px;
}

.biz-card .head .avatar img{
  width:100%;
}

.biz-card .head .name{
  margin:20px 0px 5px 0px;
}

.biz-card .head .position{
  margin: 5px 0px 0px 0px;
  color:#456;
}

.biz-card .body{
  padding:0px 10px 20px 10px;
}

.biz-card .body .social{
  margin:0px;
  padding:0px;
  list-style:none;
}

.biz-card .body .social > li{
  display:inline-block;
  margin:0px 5px;
}

.biz-card .body .social > li > a{
  text-align:center;
}

.biz-card .body .social > li > a{
  line-height:40px;
}

.biz-card .body .social > li > a{
  text-decoration:none;
  color:#aaa;
  transition-duration:0.2s;
}

.biz-card .body .social > li > a:hover{
  color:#fff;
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .biz-card {
        max-width: 90%; /* Occupa il 90% della larghezza */
        padding: 30px; /* Aggiunge spazio interno */
    }

    .biz-card .head .name {
        font-size: 1.5rem; /* Ingrandisce il nome */
    }

    .biz-card .body {
        padding: 0 15px 25px 15px; /* Maggiore padding per leggibilità */
    }
}

/* Smartphone (max-width: 768px) */
@media (max-width: 768px) {
    .biz-card {
        max-width: 90%; /* Occupa l'intera larghezza */
        padding: 20px; /* Riduce il padding */
        min-width: auto;
    }

    .biz-card .head .avatar {
        height: 100px;
        width: 100px; /* Riduce le dimensioni dell'avatar */
    }

    .biz-card .head .name {
        font-size: 1.3rem;
    }

    .biz-card .body {
        font-size: 1rem;
        padding: 10px; /* Rende il contenuto più compatto */
    }
}

/* Mobile piccolo (max-width: 480px) */
@media (max-width: 480px) {
    .biz-card {
        padding: 15px;
    }

    .biz-card .head .avatar {
        height: 80px;
        width: 80px;
    }

    .biz-card .head .name {
        font-size: 1.1rem;
    }

    .biz-card .body .social {
        flex-wrap: wrap; /* I social si adattano alla larghezza */
        gap: 5px;
    }
}


img.section_icon{
    border-radius: 100%;
    height: 200px;
    width: 200px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 auto;
    overflow: hidden !important;
}

.pricing{
    color: var(--dark-pink-color);
    font-size: smaller;
}

/* stili pagina affitti brevi */
.pink_background{
    background: linear-gradient(to bottom, var(--mid-pink-color) 20%, var(--var-pink-color) 100%);
}

.aubergine_background{
    background: linear-gradient(to bottom, var(--aubergine-color) 20%, var(--darker-aubergine) 100%);
} 

.teal_background{
    background: linear-gradient(to bottom, var(--lighter-teal) 20%, var(--secondary-color) 100%);

}

.affitti_brevi_bg, .registrazione_cin_bg, .vendita_bg, .affitti_medio_bg { 
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 40vh;
}

.affitti_brevi_bg {
    background-image: url('../assets/Amanda-73-min.webp'); /* Immagine di sfondo in parallasse */
}

.affitti_medio_bg {
    background-image: url('../assets/AmandaGuidotti_MoniaMeli.webp');
}

.vendita_bg{
    background-image: url('../assets/vendita.webp'); /* Immagine di sfondo in parallasse */
}

/* Pagina per registrazione CIN */

.list-map {
    display: flex;
    justify-content: center; /* Centra il contenuto */
}

.registrazione_cin_bg{
    background-image: url('../assets/registrazione_cin_bg.webp'); /* Immagine di sfondo in parallasse */
    margin: 2vh 0;
    border-radius: 0 1000px 0;
}

.info-box {
    background: #fff; 
    padding: 20px;
    border-radius: 8px; /* Angoli arrotondati */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leggera ombra */
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

.map-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spazio tra lista e mappa */
    align-items: center; 
}

.map-container {
    flex: 1; /* Occupa lo spazio disponibile */
    height: 350px;
    min-width: fit-content;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-image: url('../assets/map.webp');
    background-position: center;
    background-size: cover;
}

gmp-map {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    min-height: 350px;
}

.info-box h3 {
    margin: 0 0 10px 0;
    color: var(--darker-green);
    font-size: 1.2em;
}

.styled-list {
    list-style: none;
    padding-left: 0;
    min-width: max-content;
}

.styled-list li {
    background-color: #d8dbd952; /* Sfondo leggero */
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    color: var(--text);
    display: flex;
    align-items: center;
}

.styled-list li::before {
    content: "📌"; /* Emoji pin */
    margin-right: 8px;
    color: #0077cc;
    font-size: 1.1em;
}

@media (max-width: 1024px) {
    .styled-list{
        width: 100%;
    }
    .map-wrapper {
        align-items: center;
    }
    .map-container {
        width: 100%; /* Occupa tutta la larghezza */
        height: 350px; /* Aumenta l'altezza per visibilità */
    }
}

img.contatta_amanda_guidotti{
    background-color: transparent;
    padding: 0;
    margin: 0 auto;
    width: 25vw;
}

@media (max-width: 1024px) { /* Tablet */
    img.contatta_amanda_guidotti {
        width: 50vw; /* Aumenta la larghezza su schermi tablet */
    }
}

@media (max-width: 768px) { /* Schermi medio-piccoli */
    img.contatta_amanda_guidotti {
        width: 70vw; /* Allarga ulteriormente per dispositivi più piccoli */
    }
    .registrazione_cin_bg{
        background-image: url('../assets/registrazione_cin_mobile.webp');
    }
}

@media (max-width: 480px) { /* Mobile */
    .contatta_amanda_guidotti {
        width: 90vw; /* Quasi tutta la larghezza dello schermo su mobile */
    }
}


/* Apartments Section Styles */
.apartments {
    padding: 96px 20px;
    text-align: center;
    margin: 0;
}

.apartments h2 {
    font-size: 36px;
    margin-bottom: 30px;
    color: var(--secondary-color); /* Use a color variable for consistency */
}

/* Contenitore principale della sezione */
.pavia-apartments-container, .italianexperience-apartments-container, .apartments-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: auto;
    max-width: 1000px;
}

/* Elemento di ogni appartamento */
.apartment-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

/* Contenitore delle immagini */
.apartment-images {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

/* Wrapper delle immagini */
.apartment-images-inner {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 3s ease-in-out;
}

/* Immagini */
.apartment-images img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Scroll SOLO quando il mouse è sopra */
.apartment-item:hover .apartment-images-inner {
    animation: scroll-loop 6s linear infinite;
}

/* Animazione fluida senza stacchi */
@keyframes scroll-loop {
    0% { transform: translateY(0); }
    33% { transform: translateY(-200px); }
    66% { transform: translateY(-400px); }
    100% { transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .pavia-apartments-container, .italianexperience-apartments-container, .apartments-container {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
}

@media (max-width: 480px) {
    .pavia-apartments-container, .italianexperience-apartments-container, .apartments-container {
        grid-template-columns: 1fr;
    }
}


/* Apartment Details */
.apartment-details {
    padding: 20px;
    text-align: left; /* Align text to the left for a clean look */
}

.apartment-details h3 {
    font-size: 20px;
    margin: 0 0 10px;
    color: var(--text); /* Use color variable */
}

.apartment-details a {
    display: inline-block;
    margin-top: 10px;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
}

.apartment-details a:hover {
    text-decoration: underline;
}

button.expand{
    padding: 8px 16px;
    border-radius: 100px;
    border: 0;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 5vh;
    color: var(--text);
    cursor: pointer;
}

/* Titolo della sezione */
.section_title {
    text-align: center;
    margin-bottom: 30px;
}

/* Guides Section Styles */
.guides-section {
    padding: 40px 20px;
}

.guides-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between guide items */
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-evenly; /* Distribute items evenly */
}

.guide-item {
    display: flex;
    align-items: center; /* Center content vertically */
    padding: 24px;
    width: calc(80% - 60px); /* one column layout */
    margin-bottom: 16px; /* Add some space between rows */
}

.guide-item img {
    max-width: 120px; /* Max width for the image */
    width: 100%; /* Ensure it scales properly */
    height: auto; /* Maintain aspect ratio */
    margin-right: 24px; /* Space between the image and the content */
    flex-shrink: 0; /* Prevent image from shrinking */
}

.guide-content {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 140px); /* Adjust based on image width and margin */
}

.guide-content h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--greene-color);
}

.guide-content p {
    margin: 0;
    line-height: 1.4;
    color: var(--text);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .guide-item {
        width: 100%; /* One column layout on smaller screens */
        flex-direction: column; /* Stack image and content */
        text-align: center; /* Center the text */
    }

    .guide-item img {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 10px; /* Add space below the image */
    }

    .guide-content {
        max-width: 100%; /* Full width on small screens */
        text-align: left;
    }
}

/* Sezione Contatti */

.contact{
	background-image: url('../assets/Amanda-2-min.webp'); /* Immagine di sfondo */
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: space-around;
    padding: 40px auto;
}

section{
	margin-bottom: 5vh;
}


/* About Section */
.about {
    position: relative;
    overflow: visible;
    height: 100vh;
}


.about_bg {
    background-image: url('../assets/Amanda-41-min.webp'); /* Immagine di sfondo in parallasse */
    height: 100vh;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    border-radius: 0 0 10000px 0 ;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

.about > .content-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    top: 0;
    right: 0;
    min-width: 300px;
    width: 90%;
}

.about .section_title{
	margin-bottom: 0;
}

.about .text-column {
    position: absolute;
    z-index: 2;
    padding: 5%;
    top: 15vh;
    right: 0;
    margin-right: 0;
    margin-left: auto;
    width: 50%;
    overflow: visible;
    background-color: rgb(109 137 115 / .4);
    border-radius: 0 300px 0 300px;
}

/* Testo con immagine trasparente */
.about .text-bg {
    position: relative;
    padding: 20px;
    z-index: 1;
    color: white;
}

.about .text-bg p {
    position: relative;
    z-index: 2; /* Assicura che il testo sia sopra l'immagine trasparente */
    color: #fff;
}



/* My Work Section */
.my-work .mywork_section_bg{
	background-color: rgba(228,211,207,0.4);
    border-radius: 500px 0 500px 0;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -3;
}

.my-work .content-wrapper.centered-content {
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 25vh;
}

.my-work .text-column.centered-text {
    max-width: 528px;
    margin-left: auto;
    margin-right: auto;
}

.my-work .text-column {
    margin-left: 0;
    margin-right: auto;
}

.my-work {
    position: relative;
    z-index: 1;
    padding: 20vh 0;
}


/* Media query per tablet e dispositivi mobili */

/* Philosophy */
@media (max-width: 768px) {
    .columns {
        flex-direction: column;
    }

    .column {
        margin: 0 0 40px 0;
    }

    .column:first-child .image-block {
        order: -1; /* Inverte l'ordine dell'immagine su mobile per la prima colonna */
        margin-bottom: 0px;
    }
    .doublemarginBR, .doublemarginLT{
    	margin: 0;
    }
    .philosophy-photo{
    	height: 50vh !important;
        width: auto;
    }
}


/* Generale */
@media (max-width: 768px) {
    .hero {
        height: 70vh; /* Riduce l'altezza dell'hero section */
        background-position: center center; /* Centra meglio l'immagine su schermi più piccoli */
    }

    .hero h2 {
        padding-top: 15vh;
        font-size: 32px; /* Riduce la dimensione del font per i titoli */
    }

    .hero p {
        font-size: 18px; /* Riduce la dimensione del font per il paragrafo */
    }

    .hero .btn {
        padding: 10px 20px; /* Riduce il padding del bottone */
        font-size: 14px; /* Riduce la dimensione del font del bottone */
    }

    /* Sezioni generali */
    .services, .contact, .appointment {
        flex-direction: column; /* Dispone gli articoli in colonna */
        padding: 20px; /* Aggiunge padding per evitare che il contenuto tocchi i bordi */
    }

    .teal_background article.service-item, .service-item {
        max-width: 90vw; /* Allarga il contenuto dei servizi su schermi piccoli */
    }

    .contact {
        padding: 20px;
    }

    /* Sezione Contatti */
    form {
        padding: 15px; /* Riduce il padding del form */
        box-shadow: none; /* Rimuove l'ombra del form per evitare sovraccarico visivo su schermi piccoli */
        width: 90%; /* Allarga il form su schermi piccoli */
    }

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
        max-width: 100%;
        min-width: 300px;
        width: auto;    }

    .photo-column,
    .text-column {
        padding: 0;
    }

    .photo-column {
        margin-bottom: 20px;
    }
}
 

/* Adattamenti per schermi molto piccoli */
@media (max-width: 480px) {
    /* Hero Section */
    .hero h2 {
        font-size: 28px; /* Ulteriore riduzione del font per i titoli */
    }

    .hero p {
        font-size: 16px; /* Riduce ulteriormente la dimensione del paragrafo */
    }

    /* Sezioni generali */
    .services, .contact, .appointment {
        padding: 10px; /* Riduce ulteriormente il padding */
    }

    .service-item {
        max-width: 95vw;
    }

    /* Sezione Contatti */
    form {
        padding: 10px; /* Riduce ulteriormente il padding del form */
    }

    form button[type="submit"] {
        font-size: 20px; /* Riduce la dimensione del bottone di invio */
        padding: 10px; /* Riduce il padding del bottone */
    }
}

/* form.css */

@media (max-width: 768px) {
    /* Stili per il form su tablet e dispositivi mobili */
    form {
        max-width: 90%; /* Allarga il form su schermi piccoli */
    }

    form label {
        font-size: 16px; /* Riduce la dimensione del font per le etichette */
    }

    form input[type="text"],
    form input[type="email"],
    form textarea {
        font-size: 14px; /* Riduce la dimensione del font per i campi */
    }

    form button[type="submit"] {
        font-size: 20px; /* Riduce la dimensione del bottone di invio */
        padding: 10px 15px; /* Riduce il padding del bottone */
    }
}

@media (max-width: 480px) {
    /* Stili per il form su schermi molto piccoli */
    form {
        max-width: 100%; /* Allarga il form a tutta la larghezza disponibile */
    }

    form label {
        font-size: 14px; /* Riduce ulteriormente la dimensione del font per le etichette */
    }

    form input[type="text"],
    form input[type="email"],
    form textarea {
        font-size: 12px; /* Riduce ulteriormente la dimensione del font per i campi */
    }

    form button[type="submit"] {
        font-size: 18px; /* Riduce ulteriormente la dimensione del bottone di invio */
    }
}


/* hero per schermi più piccoli */
@media (max-width: 768px) {
    .hero-content {
        max-width: 90%; /* Estendi il contenuto su schermi piccoli */
        padding-left: 5%;
        justify-content: end;
        padding-bottom: 5vh;
    }

    .hero_home {
        background-image: url('../assets/Amanda-Guidotti_mobile.webp');
        background-position: top center;
    }

    .hero_home h2 {
        font-size: 32px;
        width: 60vw;
        text-shadow: 0px 0px 10px black;
    }

    h2.sub-title{
        font-size: 24px;
        width: 60vw;
    }

    .hero_home p {
        font-size: 18px;
    }

    .hero_home em {
        font-size: 14px;
    }

    .hero_home .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Servizi*/
@media (max-width: 768px) {
    .service-item {
        max-width: 90vw; /* Colonne singole su schermi piccoli */
        flex-direction: column; /* Disposizione verticale */
        align-items: flex-start;
    }

    .service-item img {
        margin-right: 16px auto;
        overflow: visible;
    }
}


/* Blog */
@media (max-width: 768px) {
	.post {
        flex: 1 1 100%; /* 1 colonna su mobile */
    }
}

@media (max-width: 480px) {
    .post {
        flex: 1 1 100%; /* 1 colonna su mobile */
    }
}


/* About Section */
@media (max-width: 768px) {
    .about {
        height: auto; /* Permette all'altezza di adattarsi al contenuto */
        padding-top: 80px; /* Spazio sotto l'header */
    }

    .about .text-column {
        position: relative;
        width: auto;
        padding: 20px;
        margin: 0 auto;
        background-color: rgba(109, 137, 115, 0.7);
        border-radius: 20px;
        text-align: left;
        margin-top: 6vh;
    }

    .about .section_title {
        text-align: center;
    }

    /* My Work Section */
    .my-work .text-column.centered-text {
        max-width: 90%;
    }
}


/* Adattamenti per schermi molto piccoli */
@media (max-width: 480px) {
    .about .text-column {
        padding: 20px 10px;
        border-radius: 15px;
        margin-top: 6vh;
    }

    /* My Work Section */
    .my-work .text-column.centered-text {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .services_bg,
    .about_bg,
    .affitti_brevi_bg, 
    .registrazione_cin_bg, 
    .vendita_bg, 
    .affitti_medio_bg { 
    background-position: center !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important; 
    background-attachment: scroll !important;
    height: 30vh;
    }
    .green_background, 
    .pink_background, 
    .teal_background, 
    .aubergine_background{
    width: 100%;
    text-align: left;
    color: white;
    padding: 5vh 0;
    }
    .green_background {
        border-radius: 0 0 100% 100% / 30%
    }
}