/* css/custom.css */
:root {
    --brand-green: #38a14a; /* Colore verde principale (da verificare/aggiustare) */
    --brand-red: #d9534f;   /* Colore rosso per i bottoni (da verificare/aggiustare) */
    --brand-dark-grey: #494949; /* Grigio scuro sfondo (da verificare/aggiustare) */
    --brand-off-white: #f3f3f1; /* Sfondo principale pagina (da verificare/aggiustare) */
    --brand-yellow: #f0ad4e; /* Giallo decorazioni (da verificare/aggiustare) */
    --brand-orange: #fd7e14; /* Arancione decorazioni (da verificare/aggiustare) */
}

body {
    background-color: var(--brand-off-white);
    /* Aggiungi qui il font-family desiderato se diverso da quello di default */
    /* font-family: 'Tua-Fonte', sans-serif; */
}

.site-header {
  /* Se vuoi lo sfondo diviso, potresti farlo qui con un gradiente o pseudo-elementi */
  /* background: linear-gradient(to right, var(--brand-dark-grey) 50%, var(--brand-off-white) 50%); */
  /* Per ora lo lasciamo semplice */
   background-color: var(--brand-off-white); /* O il grigio scuro se predomina */
   padding-bottom: 3rem; /* Aggiungi spazio sotto l'header */
}

.hero-content-block {
    background-color: var(--brand-green);
    color: white;
    /* padding e border-radius sono già applicati con classi Bootstrap,
       ma puoi sovrascriverli qui se necessario */
     /* border-radius: 1.5rem; /* Esempio se vuoi un raggio specifico */ */
}

.hero-content-block h1 {
    /* Aggiusta font-size, font-weight se necessario */
    font-weight: 700; /* Bold */
}

.btn-brand-red {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: white;
    padding: 0.6rem 1.5rem; /* Aggiusta padding */
    font-weight: 500;
}

.btn-brand-red:hover,
.btn-brand-red:focus {
    background-color: #c9302c; /* Rosso più scuro per hover/focus */
    border-color: #ac2925;
    color: white;
}

.hero-image-wrapper img {
   /* Gli angoli arrotondati sono dati da .rounded-4 */
   /* Potrebbe servire z-index o margini negativi per sovrapposizioni */
   /* Esempio: */
   /* position: relative; */
   /* z-index: 1; */
   /* margin-left: -30px; */ /* Attenzione: questo richiede test accurati */
}

/* Stili base per le forme decorative (da sviluppare) */
.decorative-shape {
   position: absolute;
   z-index: 1; /* Sotto il contenuto principale (z-index: 2) ma sopra lo sfondo (z-index: 0) */
   /* Esempi di stile forma */
   /* width: 100px; height: 100px; border-radius: 50%; background-color: var(--brand-yellow); */
}

/* Stili specifici per ogni forma (posizione, rotazione, colore, etc.) */
/* Esempio: */
/* .shape-red-line { top: 10px; left: 5%; width: 200px; height: 10px; background: var(--brand-red); transform: rotate(-15deg); } */
/* .shape-yellow-swoosh { bottom: 20%; right: 45%; width: 150px; height: 70px; background: var(--brand-yellow); border-radius: 50% / 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transform: rotate(10deg); } */

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .hero-content-block {
        text-align: center;
    }
     .hero-image-wrapper {
        margin-top: 2rem; /* Spazio tra blocco testo e immagine su mobile */
    }
    .hero-image-wrapper img {
        margin-left: 0; /* Resetta eventuali margini negativi su mobile */
    }
    .site-header .navbar .btn-brand-red {
        display: none; /* Nascondi il bottone in alto a destra su mobile se non già fatto */
    }
     .decorative-shape {
        /* Potrebbe essere necessario nascondere o riposizionare le forme su mobile */
        /* display: none; */
     }
}


/*come lavoriamo*/

/* css/custom.css */

/* Aggiungi o aggiorna queste variabili se non già presenti */
:root {
    /* ... (altri colori) */
    --brand-orange: #e07a5f; /* Arancione/Marrone per sottotitolo (da verificare/aggiustare) */
    --dark-grey: #4f4f4f; /* Grigio scuro per titoli (da verificare/aggiustare) */
}

.how-we-work-section {
    /* Eventuali stili specifici per la sezione */
    background-color: var(--brand-off-white); /* Assicura lo sfondo corretto */
}

.dark-grey-text {
    color: var(--dark-grey);
}

.subtitle-text em { /* Stile per il sottotitolo */
   font-style: italic; /* Assicura corsivo */
   color: #6c757d; /* Colore grigio standard per il resto del sottotitolo */
}

.text-brand-orange {
    color: var(--brand-orange);
    font-style: normal; /* Rimuove il corsivo solo per questa parte se necessario */
    /* font-weight: 500; /* Eventuale leggero grassetto */ */
}

.text-brand-red-highlight {
    color: var(--brand-red); /* Usa il rosso definito precedentemente */
    /* Il tag <strong> fornisce già il grassetto */
}

.image-composition-wrapper {
    padding: 1rem; /* Aggiunge spazio attorno alle immagini per la cornice */
    margin-top: 2rem; /* Spazio dopo il sottotitolo */
}

/* Stile per la cornice decorativa verde */
.decorative-frame-shape {
    position: absolute;
    /* Posiziona la cornice dietro e attorno alle immagini */
    top: 0;
    left: -5%; /* Leggermente a sinistra */
    width: 100%;
    height: 90%; /* Leggermente più bassa */
    border: 6px solid var(--brand-green); /* Spessore e colore della cornice */
    border-radius: 1.8rem; /* Raggio angoli (da aggiustare per matchare le immagini) */
    transform: rotate(-6deg); /* Rotazione della cornice */
    z-index: -1; /* Posiziona dietro le immagini ma sopra lo sfondo */
}

/* Affinamento posizione immagine assoluta (meglio che inline style) */
.image-composition-wrapper img.position-absolute {
   /* Rimuovi gli stili inline bottom/right se usi questo */
   /* bottom: -15px; */
   /* right: -15px; */
   /* width: 75%; /* Già inline */
   /* transform: rotate(2deg); /* Già inline */
}


/* Responsive Adjustments */
@media (max-width: 991.98px) { /* Sotto large */
    .image-composition-wrapper {
        /* Riduci o aggiusta la composizione su schermi medi/piccoli se necessario */
        margin-bottom: 2rem; /* Spazio prima del testo quando le colonne si impilano */
         max-width: 500px; /* Limita la larghezza massima su mobile */
         margin-left: auto;
         margin-right: auto;
    }
    .decorative-frame-shape {
        /* Potrebbe essere necessario aggiustare la cornice */
        left: 0;
        width: 95%;
        height: 85%;
    }
    .how-we-work-section .text-secondary {
         text-align: center; /* Centra il testo su mobile se le immagini sono centrate */
    }

}
 @media (max-width: 767.98px) { /* Sotto medium */
     .image-composition-wrapper img.position-absolute {
         /* Potrebbe essere necessario semplificare il layout */
         position: relative; /* Rimuovi posizionamento assoluto */
         width: 100%; /* Immagine piena larghezza */
         display: block;
         margin-top: -20px; /* Sovrapposizione semplice */
         transform: rotate(0); /* Rimuovi rotazione */
     }
      .image-composition-wrapper img.position-relative {
          transform: rotate(0); /* Rimuovi rotazione */
          width: 100%;
          margin-bottom: 0;
      }
      .decorative-frame-shape {
          display: none; /* Nascondi la cornice su schermi molto piccoli */
      }
       .how-we-work-section h2,
       .how-we-work-section .subtitle-text {
           text-align: center; /* Centra titoli */
       }
 }


/* css/custom.css PHILOSOPHY */

/* Aggiungi se non già presente */
:root {
    /* ... */
    --brand-peach: #f4a28a; /* Colore linea decorativa pesca/arancio chiaro (da verificare/aggiustare) */
    --card-title-grey: #4a4a4a; /* Grigio specifico per titoli card se diverso da dark-grey */
}

.philosophy-section {
    background-color: var(--brand-green); /* Sfondo verde per tutta la sezione */
    color: white; /* Testo default bianco per titolo/sottotitolo */
    /* position: relative; overflow: hidden; già inline/precedente */
}

.philosophy-section .lead em {
    font-weight: 300; /* Font più leggero per il sottotitolo */
    font-style: italic;
}

/* Stile Frecce di Navigazione */
.philosophy-nav-arrow {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px; /* Centra l'icona verticalmente */
    text-align: center;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem; /* Dimensione icona */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.philosophy-nav-arrow:hover {
    background-color: white;
    color: var(--brand-green);
}

/* Stile Card */
.philosophy-section .card {
    background-color: white;
    color: var(--dark-grey); /* Sovrascrive il text-white della sezione */
    /* rounded-4, border-0, shadow-sm sono classi Bootstrap */
    /* h-100 e d-flex align-items-stretch assicurano stessa altezza */
    /* p-3 aggiunge padding interno */
}

.philosophy-section .card-title {
    color: var(--card-title-grey); /* Usa il grigio specifico o var(--dark-grey) */
    /* font-weight: bold; (già da fw-bold) */
}

.philosophy-section .card-text {
    color: var(--bs-secondary-color); /* Usa variabile Bootstrap per testo secondario */
    /* font-size: small; (già da .small) */
    line-height: 1.6; /* Migliora leggibilità */
}


/* Forme Decorative (Esempi - da definire e posizionare precisamente) */
/*
.shape-red-line-top-left {
    top: -20px;
    left: -5%;
    width: 30%;
    height: 40px;
    border-bottom: 8px solid var(--brand-red);
    border-left: 8px solid var(--brand-red);
    border-bottom-left-radius: 30px;
    transform: rotate(-15deg);
    z-index: 0;
}

.shape-peach-line-top-right {
    top: -30px;
    right: -10%;
    width: 45%;
    height: 150px;
    border-bottom: 8px solid var(--brand-peach);
    border-right: 8px solid var(--brand-peach);
    border-bottom-right-radius: 80px;
     transform: rotate(10deg);
    z-index: 0;
}

.shape-green-triangle-bottom {
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 80px solid var(--brand-green); /* Triangolo punta in su, ma lo ruotiamo */
    /* Attenzione: questo colore si confonde con lo sfondo, serve un colore diverso o un bordo?
       Forse è un verde più chiaro? Es: var(--brand-light-green)
    */
    /* filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); */ /* Ombra se serve */
    /* z-index: 1; */ /* Sopra lo sfondo ma sotto le altre sezioni? */
}
*/

/* Responsive */
@media (max-width: 767.98px) {
    .philosophy-section .text-md-end {
        text-align: center !important; /* Centra le frecce su mobile */
    }
    /* Potrebbe essere necessario nascondere o ridimensionare le forme decorative */
    /* .decorative-shape { display: none; } */
}

/* css/custom.css VIDEO */
/* css/custom.css */

/* --- Sezione Videos --- */

.videos-section {
    background-color: var(--brand-off-white);
     /* py-5, position-relative, overflow-hidden già presenti/inline */
}

.videos-section h3 {
    /* Stili titolo se necessario (dark-grey-text, fw-bold già inline) */
}

/* Stile Wrapper Video Singolo (Bootstrap fa già molto) */
.video-wrapper {
    /* shadow-sm, rounded-4, overflow-hidden sono classi Bootstrap */
    /* Potresti aggiungere un bordo se vuoi */
    /* border: 1px solid #dee2e6; */
}

/* Rimuovi queste regole CSS perché non più utilizzate */
/*
.video-composition-wrapper { ... }
.decorative-frame-shape-videos { ... }
.video-wrapper-1 { ... }
.video-wrapper-2 { ... }
*/

/* Forme Decorative (Esempi da adattare al nuovo layout) */
/*
.shape-green-line-video-top {
    top: -15px;
    left: 5%;
    width: 30%;
    height: 50px;
    border-bottom: 6px solid var(--brand-green);
    border-left: 6px solid var(--brand-green);
    border-bottom-left-radius: 25px;
    transform: rotate(-10deg);
    z-index: 0;
}
.shape-yellow-line-video-bottom {
     bottom: 5%;
     right: -5%;
     width: 40%;
     height: 80px;
     border-top: 6px solid var(--brand-yellow);
     border-right: 6px solid var(--brand-yellow);
     border-top-right-radius: 40px;
     transform: rotate(15deg);
     z-index: 0;
 }
*/

/* Responsive */
@media (max-width: 767.98px) {
    .videos-section .text-md-start {
        text-align: center !important; /* Centra titolo */
    }
    /* Il video si impilerà automaticamente sotto il testo grazie alle classi col-* */
    .video-wrapper {
        max-width: 500px; /* Limita larghezza max video su mobile */
        margin-left: auto;
        margin-right: auto;
    }
     /* Nascondi/riposiziona forme decorative se necessario */
     /* .decorative-shape { display: none; } */
}

/* css/custom.css STRUTTURE */

/* css/custom.css */

/* --- Sezione Strutture --- */

.structures-section {
    background-color: var(--brand-off-white);
    padding-top: 5rem; /* Spazio sopra */
    padding-bottom: 5rem; /* Spazio sotto */
    position: relative; /* Per forme decorative assolute */
}

/* Stile Titoli Sezione */
.structure-subtitle em {
    font-style: italic;
    color: #6c757d;
    font-size: 1.1rem;
}
.structures-section h2.display-5 {
    /* Assicurati che lo stile del titolo sia consistente */
    /* es. color: var(--dark-grey); font-weight: 700; */
}


/* Card Struttura - Garanzia dimensioni e aspetto */
.structure-card {
    /* h-100 (da classe HTML) garantisce altezza uguale nella riga (insieme a d-flex/align-items-stretch sulla colonna) */
    display: flex; /* Abilita flexbox per gestione interna */
    flex-direction: column; /* Impila immagine e body verticalmente */
    border: none; /* Già da border-0 */
    border-radius: 1.5rem; /* Già da rounded-4 (o valore specifico) */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075); /* Già da shadow-sm (o valore specifico) */
    background-color: white;
    overflow: hidden; /* Necessario per clippare immagine a angoli card */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.structure-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Area Immagine Card - Dimensioni fisse */
.structure-card-img {
    aspect-ratio: 16 / 10; /* Proporzioni fisse */
    object-fit: cover; /* Immagine copre senza distorsioni */
    background-color: #e9ecef; /* Sfondo placeholder */
    border-bottom: 1px solid #dee2e6; /* Separatore */
    display: block;
    min-height: 150px; /* Altezza minima */
    flex-shrink: 0; /* Non si restringe */
}

/* Corpo Card - Padding e gestione spazio */
.structure-card .card-body {
    padding: 1.25rem; /* Spaziatura interna uniforme */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Occupa lo spazio verticale rimanente */
}

/* Titolo Card - Margine uniforme */
.structure-card h5 {
   margin-bottom: 0.75rem;
   /* Assicurati stile font uniforme (es. classe dark-grey-text fw-bold) */
   flex-shrink: 0;
}

/* Blocco Indirizzo - Stile e crescita uniformi */
.structure-card address {
    font-style: normal;
    line-height: 1.6;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    flex-grow: 1; /* Occupa lo spazio verticale rimanente nel body */
}
.structure-card address a {
    color: var(--brand-orange);
    text-decoration: none;
}
.structure-card address a:hover {
     text-decoration: underline;
}

/* Spaziatura tra righe (classe mt-4 su HTML) */
/* Spaziatura tra colonne (classe g-4 su HTML) */

/* Responsive (assicurati sia presente) */
@media (max-width: 767.98px) {
    .structures-section .text-center h2 {
       font-size: 2.5rem;
    }
}

/* css/custom.css CONTATTI */

/* --- Sezione Contact Form --- */

.contact-form-section {
    background-color: var(--brand-off-white); /* Sfondo pagina */
    /* py-5 già inline */
}

.contact-form-block {
    background-color: var(--brand-green);
    color: white;
    /* p-4 p-md-5, rounded-4, shadow già inline */
}

.contact-form-block h2 {
   /* Stile titolo se necessario */
}
.contact-form-block .lead {
   /* Stile sottotitolo se necessario */
   font-size: 1rem; /* Riduci leggermente rispetto al lead standard */
}

/* Stile Labels */
.contact-form-block .form-label {
    color: rgba(255, 255, 255, 0.85); /* Bianco leggermente trasparente */
    /* font-size: small; (già da classe .small) */
}

/* Stile Inputs e Select */
.contact-form-input,
.contact-form-select {
    background-color: white;
    border: 1px solid #ced4da; /* Aggiunto bordo standard per chiarezza, puoi rimuoverlo o renderlo trasparente se vuoi */
    /* border: none; */ /* Se non vuoi bordi */
    border-radius: 0.375rem; /* Default Bootstrap */
    /* form-control-lg o form-select-lg per altezza maggiore */
    color: #495057; /* Testo scuro dentro l'input */
    padding: 0.75rem 1rem; /* Padding per lg size */
}

.contact-form-input::placeholder {
    color: #adb5bd; /* Grigio chiaro per placeholder */
    opacity: 1; /* Assicura visibilità */
}
.contact-form-input:focus,
.contact-form-select:focus {
   border-color: #86b7fe; /* Colore bordo focus standard Bootstrap */
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Ombra focus standard */
   background-color: white; /* Assicura sfondo bianco anche su focus */
   color: #495057;
}

/* Stile Select (freccia) - Bootstrap gestisce questo, ma puoi personalizzarla */
.contact-form-select {
   /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); */
   /* background-repeat: no-repeat; */
   /* background-position: right 0.75rem center; */
   /* background-size: 16px 12px; */
}


/* Stile Checkbox */
.contact-form-checkbox {
    border: 1px solid rgba(255, 255, 255, 0.6); /* Bordo leggermente visibile */
    background-color: transparent; /* Sfondo trasparente prima del check */
}
.contact-form-checkbox:checked {
    background-color: var(--brand-red); /* Usa il colore del bottone per il check */
    border-color: var(--brand-red);
}
.contact-form-checkbox:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.25rem rgba(217, 83, 79, 0.25); /* Ombra focus rossa */
}

/* Stile Label Checkbox */
.contact-form-block .form-check-label {
    color: white;
     /* font-size: small; (già da classe .small) */
}
.contact-form-block .form-check-label a {
    /* text-white text-decoration-underline già inline */
    font-weight: 500; /* Rendi il link leggermente più evidente */
}
.contact-form-block .form-check-label a:hover {
    /* Potrebbe scurire leggermente o cambiare colore */
}

/* Stile Bottone (dovrebbe usare btn-brand-red esistente) */
/* .btn-brand-red { ... } */
/* btn-lg, rounded-pill, px-4 sono classi Bootstrap per dimensione/forma/padding */

/* css/custom.css FOOTER */

/* --- Sezione Direct Contact --- */
.direct-contact-section {
    background-color: var(--brand-off-white);
    /* py-5 già inline */
}

.contact-card {
    /* bg-white, p-4, rounded-4, shadow-sm, d-flex, align-items-center, h-100 già inline */
}

.contact-image {
    width: 80px;
    height: 80px;
    object-fit: cover; /* Per evitare distorsioni */
    /* rounded-circle, me-4, flex-shrink-0 già inline */
}

.contact-info h5 {
   /* fw-bold dark-grey-text mb-2 già inline */
}
.contact-info p {
    /* text-secondary small mb-1/mb-0 già inline */
    line-height: 1.5;
}
.contact-info a {
     /* text-decoration-none text-brand-orange già inline */
     /* Aggiungi stile hover se vuoi */
     word-break: break-word; /* Evita overflow se email è lunga */
}

/* --- Sezione Footer --- */
.site-footer {
    /* bg-white, pt-5, pb-4, border-top già inline */
    font-size: 0.875rem; /* Dimensione base testo footer */
}

.site-footer h6 {
   /* text-uppercase text-secondary small fw-bold mb-3 già inline */
   letter-spacing: 0.5px; /* Leggera spaziatura lettere */
}

.site-footer address,
.site-footer p {
    line-height: 1.6;
}

.site-footer a {
   /* Stili di base per link */
}

.social-icon-placeholder {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid #ced4da; /* Bordo grigio chiaro */
    border-radius: 0.25rem; /* Leggero arrotondamento */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.social-icon-placeholder:hover {
    background-color: #e9ecef; /* Sfondo leggermente grigio su hover */
    border-color: #adb5bd;
}
/* Se usi icone vere (es. Bootstrap Icons): */
/*
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: var(--dark-grey);
    text-decoration: none;
     transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.social-icon i {
    font-size: 1.1rem;
}
.social-icon:hover {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: white;
}
*/

/* Sposta il widget delle preferenze Iubenda a sinistra */
/*.iubenda-tp-alert-btn[data-tp-float][data-tp-float=bottom-right], .iubenda-tp-alert-btn[data-tp-float][data-tp-float=top-right], .iubenda-tp-btn[data-tp-float][data-tp-float=bottom-right], .iubenda-tp-btn[data-tp-float][data-tp-float=top-right], .iubenda-uspr-btn[data-tp-float][data-tp-float=bottom-right], .iubenda-uspr-btn[data-tp-float][data-tp-float=top-right] {
right: 0!important;
}



.btn-brand-orange {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: white;
    padding: 0.75rem 1.75rem;
    font-weight: 500;
}

.btn-brand-orange:hover,
.btn-brand-orange:focus {
    background-color: #c96b51;
    border-color: #c96b51;
    color: white;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: var(--dark-grey);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.social-icon i {
    font-size: 1.1rem;
}

.social-icon:hover {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: white;
}

.faq-accordion .accordion-item {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
}

.faq-accordion .accordion-button {
    font-weight: 600;
    color: var(--dark-grey);
    background-color: #ffffff;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--brand-green);
    background-color: rgba(56, 161, 74, 0.08);
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(56, 161, 74, 0.18);
}

.faq-accordion .accordion-body {
    color: #5f666d;
    line-height: 1.7;
}