/* font styles */

.ubuntu-mono-regular {
    font-family: "Ubuntu Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }
  
/* ----------- */

body {
    background: #F6F9FB;
    color: #1B2833;
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0; /* Rimuove il margine predefinito del browser */
    padding-left: 16px; /* Aggiunge spazio interno al body */
    padding-right: 16px; /* Aggiunge spazio interno al body */
}

.cover {
    width: 100%;
    
    border-radius: 4px; 
    margin-bottom: 32px;
}

.heading {
    color: #1B2832;
    font-family: "Ubuntu Mono";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}

/* --- NAVBAR --- */

.burger-icon {
    display: none;
}

.simple-menu {
    color: #1B2833;
    display: flex;
    width: 136px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.00rem;
    position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

#sideNav {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100vh;
  }

  @media (min-width: 992px) {
    .navbar-expand-lg {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .25rem;
    align-self: stretch;
}

.link-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .25rem;
    align-self: stretch;
}

a {
    color: #2F5279;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    /* text-decoration: none; */
}

a:hover {
    color: #1B2833;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    text-decoration: none;
}

a:active {
    color: #9C4F8B;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    text-decoration: none;
}


/* about  */

a {
color: #2F5279;
    font-family: "Quattrocento Sans";
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    background-color: #EBF1F5;
    text-decoration: none;

}


.portfolio-img-container {
    max-width: 280px;
    width: 100%; /* Fondamentale per farlo restringere su mobile */
}

.about-body-resume a {
    color: #2F5279;
    font-family: "Quattrocento Sans";
    font-size: 14px;
    font-style: normal;
}


.text-strong {
    font-weight: 700;
    color: #354E64;
    font-size: 16px;
    line-height: 150%; 
    font-family: "Quattrocento Sans";
    font-style: normal;
} 

h2 {
    font-weight: 600;
    color: #354E64;
    font-size: 16px;
    line-height: 150%; 
    font-family: "Quattrocento Sans";
    font-style: normal;
    margin-bottom: 1rem;
} 

.year {
    color: #1B2833;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}


.nav-link {
    color: #1B2833;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    /*line-height: 150%;  24px */
   
}

.nav-link:hover {
    color: #2F5279;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.nav-link:active {
    color: #9C4F8B;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}


nav ul {
    list-style-type: none;
    padding-left: 0; 
}


.nav-link.active {
    color: #9C4F8B !important; /* Il blu dello screenshot */
}



.go-back {
    font-size: 14px;
}

ul {
    list-style-type: square;
}

.list-sottolista {
    list-style-type: circle;
}

li::marker {
  color: #476985;
}

.about-section li {
    line-height: 200%; /* 24px */

}

/* BORDI PER IDENTIFICARE LE COLONNE E I CONTENITORI 
.col-3 {
    border:1px solid #cecece;
}

.col-9 {
    border:1px solid #cecece;
}
*/


/*   BUTTONS   */


.button-outline {
    display: inline-flex;
    padding: 6px 14px;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    border: 1px solid #4F769C;
    background-color: transparent;
    color: #4F769C;
    font-family: "Ubuntu Mono";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height:  125%;
    text-decoration: none;
}


.button-outline:hover {
    display: inline-flex;
    padding: 6px 14px;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    background-color: transparent;  
    font-family: "Ubuntu Mono";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height:  125%;   
    border: 1px solid #2F5279;
    color: #2F5279;   
    text-decoration: none;
}

.button-outline:active {
    display: inline-flex;
    padding: 6px 14px;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    background-color: transparent;  
    font-family: "Ubuntu Mono";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height:  125%;   
    border: 1px solid #2F5279;
    color: #2F5279;  
    border: 1px solid #9C4F8B;
    background-color: #F6F9FB;
    color: #9C4F8B;
    text-decoration: none;
}

/* Stile di Focus  */
.button-outline:focus-visible {
    outline: 2px dashed #2F5279;
    border-radius: 24px;
}

.icon-button {
    fill:#4F769C;
}

/* 2. HOVER: Quando passi sul BOTTONE, l'ICONA cambia */
.button-outline:hover .icon-button {
    fill: #2F5279;
}

/* 3. ACTIVE: Quando clicchi sul BOTTONE, l'ICONA cambia */
.button-outline:active .icon-button {
    fill: #9C4F8B;
}


.button-arrow {
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 4px;
    border-radius: 24px;
    border: 1px solid #4F769C;
    color: #4F769C;
    background-color: transparent;
}


/* 2. HOVER: Quando passi sul BOTTONE, l'ICONA cambia */
.button-arrow:hover .icon-button {
    fill: #2F5279;
}

/* 3. ACTIVE: Quando clicchi sul BOTTONE, l'ICONA cambia */
.button-arrow:active .icon-button {
    fill: #9C4F8B;
}


/* Annullare text decoration su card / link */
.a-notextdecoration {
    text-decoration: none;
}




/* Immagini con bordi arrotondati */
.img-fluid {
    border-radius: 24px;
}



.material-symbols-rounded {
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

.about-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;        
}

.about-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 14px;        
}

.about-body p {
    margin-bottom: 0.5rem; 
}

.chapters {
    gap: 32px;
}


.details {
    margin-top: 2rem;
    grid-column-gap: 2rem;
}

.details .col-4 img {
    border: 1px solid #B6C9DA;
    border-radius: 24px;
}


.img-static {
    border-radius: 24px;
    filter: grayscale(40%);
    
}

/*  DA BIANCO E NERO A COLORI CON IMG HOVER
.sezione-card img {
    border-radius: 24px;
    filter: grayscale(80%);
}

.sezione-card:hover img {
    border-radius: 24px;
    filter: grayscale(0%);
}
*/

p {
    color: #1B2833;
    /* Body_1 */
    font-family: "Quattrocento Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.about-body a {
    font-family: "Quattrocento Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    color: #2F5279;
    background-color: #EBF1F5;
    text-decoration: none;
}

.paragraphs {
    color: #080F14;
    /* Body_1 */
    font-family: "Quattrocento Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}


/* Sezione Resume */

.about-body-resume {
    display: flex;
    padding-left: 24px;
    padding-right: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    border-left: 1px solid #8CA9C5;
    /* #5e9c4f; */
}

.about-body-resume p {
    color: #2D3C49;
    /* Body_1 */
    font-family: "Quattrocento Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin-bottom: 0.5rem;
}

.about-body-resume a {
    color: #2F5279;
    font-family: "Quattrocento Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    background-color: #EBF1F5;
    text-decoration: none;
}


.spazio-resume {
    margin-bottom: 3rem;
}



.riga-resume .heading {
    margin-bottom: 20px;
    margin-top: 10px;
}


.about-body-resume h3 {
    font-weight: 600;
    color: #354E64;
    font-size: 16px;
    line-height: 150%; 
    font-family: "Quattrocento Sans";
    font-style: normal;
    margin-bottom: 1rem;

}


/* ---- End of Section Resume  ---- */




/*. ------- CARD ------- */


/* card Horizontal */
/* ------- CARD HORIZONTAL (Hero Card) ------- */

.card-horizontal {
    display: flex;
    flex-direction: row; /* Immagine a sx, testo a dx */
    align-items: center; /* Centra verticalmente il contenuto */
    background: #FFF;
    border: 1px solid #EBF0F5;
    border-radius: 24px;
    padding: 32px;       /* Spazio interno generoso per "aprire le danze" */
    gap: 40px;           /* Spazio tra immagine e testo */
    margin-bottom: 32px;
    transition: all 0.3s ease;
}

/* Sezione Immagine */
.card-horizontal-img {
    flex: 1;             /* Prende metà dello spazio */
    max-width: 450px;    /* Impedisce all'immagine di diventare enorme */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-horizontal-img img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Mantiene le proporzioni del tablet/mockup */
}

/* Sezione Testo */
.card-horizontal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;           /* Spazio coerente tra titolo, descr e bottone */
    align-items: flex-start;
}

.card-horizontal-title {
    font-size: 1.7rem;     /* Più grande delle card verticali essendo la prima */
    font-family: "Quattrocento Sans", sans-serif;
    line-height: 1.2;
    margin: 0;
    color: #1A1A1A;
    color: #2F5279;
    font-style: normal;
    font-weight: 400;
}

.card-horizontal-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4A4A4A;      /* Grigio leggibile per la descrizione */
    margin: 0;
}


/* --- RESPONSIVE (REFLOW) --- */
@media (max-width: 992px) {
    .card-horizontal {
        flex-direction: column; /* Diventa verticale su tablet/mobile */
        padding: 24px;
        gap: 24px;
    }
    
    .card-horizontal-img {
        max-width: 100%; /* L'immagine prende tutto il piano su mobile */
    }
    
    .card-horizontal-title {
        font-size: 1.5rem;
        line-height: 1.4;
        margin-bottom: 2px;
    }
}


/* portfolio sezione row di card verticali, spaziatura */
.portfolio-cards-row {
    margin-bottom: 24px;
}


/* ------ CARD VERTICAL ------ */

.card-vertical {
    border-radius: 24px;
    border: none;
    background: none;
    display: flex;            /* Attiva gap */
    flex-direction: column;   /* Mette immagine sopra e testo sotto */
    gap: 6px;  
    align-items: flex-start; 
              
}

.card-body {
    padding: 16px; 
    border-radius: 24px;
    background: #FFF;
    border: 1px solid #EBF0F5;
    display: flex;            /* Attiva gap */
    flex-direction: column;   /* Mette immagine sopra e testo sotto */
    gap: 8px;
    align-items: flex-start; 
}

.card-title {
    line-height: 1.4;
    /*margine sotto x distanziarlo dal paragrafo */
    margin-bottom: 2px;
    color: #476985 !important; 

}

.link-card, 
.link-card .card-title {
    font-family: 'Quattrocento Sans', sans-serif !important;
    text-decoration: none !important;
    line-height: 1.4;
    /*margine sotto x distanziarlo dal paragrafo */
    margin-bottom: 2px;
    color: #476985 !important;
}

.link-card:hover .card-title {
    color: #1B2833 !important; /* colore title card vertical hover */
}


/* vertical card image section */
.card-img-other {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 24px;
    border: 1px solid #EBF0F5;
    background: #FFF;
}



.annotation.list {
    gap: 16px;
}

.annotation-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;   
  padding: 16px;
  border-radius: 24px;
  border: 1px solid #CCDBEB;
  background-color: #F6F9FB;
  /* responsive */
  width: 100%;           /* occupa tutto lo spazio della colonna */
  min-width: 160px;      /* Non sotto i 160px */
  max-width: 300px;      /* Non più larga di così su schermi enormi */
  /* impedire alle parole lunghe di rompere il layout se la card è molto stretta */
  word-wrap: break-word; 
  overflow-wrap: break-word;
}

.annotation-card p {
  color: #30475A;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5; /* 150% */
  letter-spacing: 0.28px;
  margin: 0 !important;
  gap: 0px;
}

.annotation-text {
  color: #30475A;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5; /* 150% */
  letter-spacing: 0.28px;
  margin: 0; 
  gap: 0px;
}


.annotation-text > * { 
    margin-top: 0px; 
    margin-bottom: 0px;
}


.annotation-badge-style {
  display: inline-flex;
  padding: 4px 12px; 
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  /* Stili del testo del badge  */
  color: #505C68;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.56px;
  font-feature-settings: 'salt' on;
}

.badge-content {
  background-color: #F7DABC;
}

.badge-steps { 
  background-color: #FBF7D7;
}

.badge-a11y { 
  background-color: #F7D9F8;
}

.badge-uxdesign { 
  background-color: #C2EED3;
}

.badge-interaction { 
  background-color: #C6D4EB;
}


.img-presentation {
    max-width: 1180px;
}


.img-cover {
    width: 76%;
    height: auto;
}


/* Nav Tabber element */
#pills-tab {
    display: flex;
    width: auto;
    padding: 0px;
    align-items: flex-start;
    gap: 4px;
    border-radius: 32px;
    border: 1px solid #CCDBEB; 
    padding: 12px 16px;
}

/* MANTENERE Applichiamo la pillola a 360 gradi */
.nav-pills .nav-link, 
.nav-pills .nav-link:focus, 
.nav-pills .nav-link:active, 
.nav-pills .nav-link.active {
    border-radius: 50px !important; /*  */
    border: 1px solid #ffffff;  
}


/* PROVA NAV TABS */
/* Cambia il colore della "pillola" attiva */
.nav-pills .nav-link.active {
    background-color: #F1F5F7; 
    color: #2F5279;
    border: 1px solid #6C9AC4; 
}

/* Cambia il colore del testo dei tab non selezionati */
.nav-pills .nav-link {
    color: #717383;
}

/* sezione annotation sotto tabs, immagini con bordi arrotondati */
.borderimg {
    border-radius: 24px;
    border: 1px solid #CCDBEB;
}

.tab-link {
    color: #4F769C;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.tab-content {
    
    padding: 0px;
    
}


.tab-active {
    display: flex;
    height: 40px;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 4px;
    border-radius: 24px;
    border: 1px solid #2F5279;
    background: rgba(79, 118, 156, 0.06);
}


.tab-link-active {
    color: #1B2833;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}

/*
.tab-link-active:hover {
    color: #2F5279;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
} */

.tab-link-active:active {
    color: #9C4F8B;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}


.tab-link {
    color: #1B2833;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}

.tab-link:hover {
    color: #2F5279;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}

.tab-link:active {
    color: #9C4F8B;
    font-family: "Ubuntu Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}


.annotation-box {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 24px;
    background: #FBFDFD;
    margin-bottom: 1rem;
    margin-left: 0.75rem;  /* Corrisponde a 12px, valore standard del gutter Bootstrap 5 */
    margin-right: 2rem;
    width: fit-content;           /* Permette ai margini di rientrare correttamente */

}



/* ---------------- */

/* --- VIDEO MASK ---*/
.video-mask {
    width: 100%;
    height: auto;
    max-width: 1180px;
    border-radius: 24px; 
    overflow: hidden; 
}

/* Contenitore per posizionamento */
.video-container {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-element {
    width: 100%;
    display: block;
}

/* Overlay scuro per far risaltare il pulsante */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 67, 92, 0.3); /* Scurisce leggermente il frame */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* Il pulsante circolare */
.play-button {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7); /* nero con trasparenza */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);*/
}

.video-container:hover .play-button {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.7);
}

/* Nasconde l'overlay quando il video parte */
.video-container.is-playing .play-overlay {
    opacity: 0;
    pointer-events: none;
}


.video-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 24px;
    background: #000;
}

.video-element {
    width: 100%;
    display: block;
    transition: filter 0.3s ease;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 67, 92, 0.3); /* Scurisce leggermente il frame */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none; /* Il click "passa oltre" */
}

.play-button {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*box-shadow: 0 4px 20px rgba(0,0,0,0.4);*/
}

/* --- STATO: IN RIPRODUZIONE --- */
.video-container.is-playing .play-overlay {
    opacity: 0; /* Scompare tutto quando il video è attivo */
}

.video-container.is-playing .video-element {
    filter: brightness(1); /* Video chiaro */
}


/* Video container */

.video-container {
    position: relative;
    width: 100%;
    max-width: 1180px;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.video-element {
    width: 100%;
    display: block;
    z-index: 1;
}


/* Layer che copre tutto il video per intercettare il click */
.video-click-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Lasciamo un piccolo spazio in basso (es. 40px) se vuoi usare i controlli nativi */
    height: calc(100% - 40px); 
    z-index: 5;
    background: transparent;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 67, 92, 0.3); /* Scurisce leggermente il frame */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Sopra lo scudo */
    transition: opacity 0.3s ease;
    pointer-events: none; /* I click passano attraverso al click-shield */
}

/* Reset stili bottone */
.play-button {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, background-color 0.2s, opacity 0.3s;
    z-index: 20;
}

/* --- ACCESSIBILITÀ: FOCUS VISIBILE --- */
.play-button:focus-visible {
    outline: 4px solid #ffffff;
    outline-offset: 4px;
    /*box-shadow: 0 0 0 8px rgba(181, 95, 161, 0.4); */
}

/* Quando il video è in play, il bottone deve essere cliccabile ma invisibile */
.video-container.is-playing .play-overlay {
    opacity: 0;
    pointer-events: none; /* Rende il video cliccabile direttamente */
}

/* Per permettere alla tastiera di trovare il bottone anche se invisibile (opzionale) Se vuoi che il focus lo faccia riapparire:
.play-button:focus {
    opacity: 1 !important;
} */

/* Quando il video è in play, nascondiamo solo l'overlay scuro */
.video-container.is-playing .play-overlay {
    opacity: 0;
}


.card .card-content {
    padding: var(--font-size-caption, 16px) var(--font-size-caption, 16px) 24px var(--font-size-caption, 16px);
    gap: var(--font-size-h3, 32px);
}




.card-content .text-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--font-size-caption, 16px);
    align-self: stretch;
}

.card-content h1 {
    color: #1B2833;
    font-family: "Ubuntu Mono";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 26.4px */
}

.card-content p {
    color: #1B2833;
    /* Body_1 */
    font-family: "Quattrocento Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}


.card-img-first {
    max-height: 80%;
}


.img-size {
    height: 200px;
    color: #2F5279;
}


.avatar{
  vertical-align: middle;
  
  border-radius: 24%;
}

.card-resume{
    background-color: transparent;
    border-color: transparent;
}

.testo-dati-personali p{
    color: #080F14;
    /* Body_1 */
    font-family: "Ubuntu Mono";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%; /* 24px */
}


.aa {
    background-color: #4F769C;
    border: 2px solid #9C4F8B;
}


/* Media query for mobile screens */
@media only screen and (max-width: 600px){
    /* body {
        
      }
    Show the burger menu icon */
    .burger-icon {
      display: block;
    }

    .simple-menu {
        display: none;
       }
    }

    .vintage-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 40px 0;
    color: #fff6c6; /* Un grigio leggero */
}


/*  Cornicetta  */

.wavy-flower-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 50px 0;
}

.wavy-flower-divider::before,
.wavy-flower-divider::after {
    content: '';
    flex: 1;
    height: 12px; /* Aumentato leggermente per dare corpo */
    
    /* Colore coordinato ai bordi: #EBF0F5 (codificato %23EBF0F5) */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 12.5 0 25 10 T 50 10 T 75 10 T 100 10' stroke='%23EBF0F5' fill='transparent' stroke-width='6'/%3E%3C/svg%3E");
    
    background-repeat: repeat-x;
    background-size: 45px 12px;
    opacity: 1;
}

.wavy-flower-divider span {
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    /* Un piccolo tocco di trasparenza al fiore se vuoi che sia meno "shoccante" rispetto all'onda chiara */
    opacity: 0.9; 
}