body {

    margin: 8PX;

    font-family: "Inter", sans-serif;

}



html {

    scroll-behavior: smooth;

}







.homepage-responsive {

    background: #242c44;

    position: relative;

    overflow: hidden;

}



.hero-direction {

    display: inherit;

    opacity: 0.1;

    flex-shrink: 0;

    width: 1730px;

    height: 512px;

    position: absolute;

    left: 1731px;

    top: 512px;

    transform: translate(-1730px, -512px);



}



#section1 {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 64px;

    padding: 200px 220px;

    position: relative;

    align-self: stretch;

    width: 100%;

    flex: 0 0 auto;

    margin-top: -45px;

    background-image: url(img/backg1.png);

    background-size: cover;

    background-position: 50% 50%;

}













.logodiv {

    flex-shrink: 0;

    width: 20%;

    position: absolute;

    left: 62px;

    top: 40px;

    background: #d9d9d9;

    border-radius: 8px;

}



.logo-o {

    border-style: solid;

    border-width: 1px;

    border-radius: 8px;

    padding: 8px;

    width: 100%;

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

    background: #fff;

    position: relative;

    top: 10px;

    left: 10px;

}









/* Stile generale del menu */





.header {

    background-color: #242c44;

    height: 200px;

    position: relative;

    /* Mantieni relativo per desktop */

    width: 100%;

    z-index: 1000;

}









.menu {



    position: absolute;

    right: 5%;

    top: 64.5px;



    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    flex-shrink: 0;

    height: auto;

    z-index: 10;



}





/* Contenitore per ciascuna voce e il suo semicerchio */

.nav-item {

    position: relative;

    /* Permette al semicerchio di posizionarsi rispetto alla voce */

    display: flex;

    flex-direction: column;

    /* Impila voce e semicerchio */

    align-items: center;

    /* Centra il semicerchio sotto la voce */

    color: rgba(255, 255, 255, 0.5);

    text-align: center;

    font-family: "Inter-Regular", sans-serif;

    font-size: 1rem;

    font-weight: 400;

    position: relative;

    cursor: pointer;

    transition: color 0.3s ease, font-weight 0.3s ease;

}



/* Stile delle voci del menu */

.nav-menu2 {

    color: rgba(255, 255, 255, 0.5);

    text-align: center;

    width: max-content;

    margin: 5px;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    font-weight: 400;

    position: relative;

    cursor: pointer;

    transition: color 0.3s ease, font-weight 0.3s ease;

}



/* Cambia stile della voce al passaggio del mouse */

.nav-menu2:hover {

    font-weight: bold;

    color: rgba(255, 255, 255, 1);

}



.nav-item a {
    text-decoration: none;
}



/* Stile iniziale per il semicerchio */

.intersect {

    width: 20px;

    opacity: 0;

    /* Invisibile inizialmente */

    transition: opacity 0.3s ease, transform 0.3s ease;

    position: absolute;

    top: 100%;

    /* Posiziona sotto la voce */

    left: 50%;

    /* Centra il semicerchio rispetto alla voce */

    transform: translate(-50%, -10px);

    /* Regola posizione iniziale */

}



/* Mostra il semicerchio quando si passa sopra la voce */

.nav-menu2:hover+.intersect {

    opacity: 1;

    transform: translate(-50%, 0);

    /* Torna alla posizione corretta */

}



.button-contact {

    border-radius: 100px;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.3);

    border-width: 1px;

    padding: 23px;

    display: flex;

    flex-direction: row;

    gap: 10px;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    height: 50px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

}



.contattami {

    color: #ffffff;

    text-align: center;

    font-family: "Inter-Bold", sans-serif;

    font-size: 16px;

    font-weight: 700;

    position: relative;

}









.ellipse-1 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 0.7px;

    width: 892px;

    height: 892px;

    position: absolute;

    left: -520px;

    top: -250px;

}



.ellipse-2 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 0.7px;

    width: 892px;

    height: 892px;

    position: absolute;

    left: -485.05px;

    top: -250px;

}



.ellipse-3 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 0.7px;

    width: 892px;

    height: 892px;

    position: absolute;

    left: -450.09px;

    top: -250px;

}



.ellipse-4 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 0.7px;

    width: 892px;

    height: 892px;

    position: absolute;

    left: -415.14px;

    top: -250px;

}



.name-title {

    padding: 140px 0px 140px 0px;

    display: flex;

    flex-direction: column;

    gap: 56px;

    align-items: center;

    justify-content: flex-end;

    flex: 1;

    position: relative;

}



.frame-3 {

    display: flex;

    flex-direction: column;

    gap: 40px;

    align-items: flex-start;

    justify-content: flex-start;

    align-self: stretch;

    flex-shrink: 0;

    position: relative;

}



.marina-di-dio-avvocato {

    color: #ffffff;

    text-align: left;

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

    font-size: 70px;

    font-weight: 400;

    position: relative;

    align-self: stretch;

}



.marina-di-dio-avvocato-span {

    color: #ffffff;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 70px;

    font-weight: 700;

}



.marina-di-dio-avvocato-span2 {

    color: #ffffff;

    font-family: "Armata-Regular", sans-serif;

    font-size: 70px;

    font-weight: 400;

}



.esperta-in-diritto-penale-e-diritto-dei-consumatori {

    color: #bdbfc8;

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 18px;

    line-height: 32px;

    font-weight: 400;

    position: relative;

    align-self: stretch;

}



.frame-4 {

    display: flex;

    flex-direction: row;

    gap: 10px;

    align-items: center;

    justify-content: flex-start;

    align-self: stretch;

    flex-shrink: 0;

    position: relative;

}



.button {

    background: #d6ad60;

    border-radius: 100px;

    border-style: solid;

    border-color: transparent;

    border-width: 1px;

    padding: 24px;

    display: flex;

    flex-direction: row;

    gap: 10px;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 300.72px;

    height: 65px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

}



.button-text {

    color: #1b1e21;

    text-align: center;

    font-family: "Inter-Bold", sans-serif;

    font-size: 16px;

    font-weight: 700;

    position: relative;

}



.link {

    flex: 1;

    height: 32px;

    position: relative;

}



.immagine-marina-di-dio-2-1 {

    flex-shrink: 0;

    width: 630px;

    position: relative;

    object-fit: cover;

}



.group-2 {

    flex-shrink: 0;

    width: 215px;

    height: 215px;

    position: absolute;

    left: 744px;

    top: 1005px;

}



.ellipse-5 {

    background: #1b1e21;

    border-radius: 50%;

    width: 100%;

    height: 100%;

    position: absolute;

    right: 0%;

    left: 0%;

    bottom: 0%;

    top: 0%;

}



@keyframes rotate {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



.group-3 {

    width: 100%;

    height: 100%;

    position: absolute;

    animation: rotate 10s linear infinite;

    /* Ruota in 5 secondi con movimento uniforme e infinito */

}



#section2 {

    padding: 0px 220px 0px 0px;

    display: flex;

    flex-direction: row;

    gap: 80px;

    align-items: flex-start;

    justify-content: flex-start;

    align-self: stretch;



}



.ellissi {

    position: absolute;

}



.ellipse-6 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 1px;

    width: 1276px;

    height: 1264.47px;

    position: absolute;

    left: 961px;

    top: 12px;

}



.ellipse-7 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 1px;

    width: 1276px;

    height: 1264.47px;

    position: absolute;

    left: 1011px;

    top: 12px;

}



.ellipse-8 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 1px;

    width: 1276px;

    height: 1264.47px;

    position: absolute;

    left: 1061px;

    top: 12px;

}



.ellipse-9 {

    border-radius: 50%;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.1);

    border-width: 1px;

    width: 1276px;

    height: 1264.47px;

    position: absolute;

    left: 1111px;

    top: 12px;

}



.etichetta {

    flex-shrink: 0;

    width: 550px;

}



.frame-6 {

    padding: 140px 0px 140px 0px;

    display: flex;

    flex-direction: column;

    gap: 69px;

    align-items: flex-start;

    justify-content: flex-start;

    flex: 1;

    position: relative;

}



.frame-7 {

    display: flex;

    flex-direction: column;

    gap: 32px;

    align-items: flex-start;

    justify-content: flex-start;

    align-self: stretch;

    flex-shrink: 0;

    position: relative;

}



.marina-di-dio {

    color: #ffffff;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

    position: relative;

    align-self: stretch;

}



.contatti {

    color: #ffffff;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

    align-self: stretch;

    margin: 10px;

}



.p-avvocato {

    color: rgba(255, 255, 255, 0.6);

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    position: relative;

    align-self: stretch;

}



.elencoab {



    align-self: stretch;



}



.flexli {

    display: flex;

    flex-direction: row;

    gap: 64px;



}



li {

    display: flex;

    flex-direction: row;

    gap: 13px;

    align-items: center;

    justify-content: flex-start;

    flex: 1;

    position: relative;

}



.star {

    border-radius: 0px;

    flex-shrink: 0;

    width: 13px;

    height: 13px;

    position: relative;



}



.lip {

    color: #ffffff;

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 32px;

    font-weight: 400;

    position: relative;

}













.prenota-un-appuntamento {

    color: #1b1e21;

    text-align: center;

    font-family: "Inter-Bold", sans-serif;

    font-size: 16px;

    font-weight: 700;

    position: relative;

}



#section3 {

    background: #ffffff;

    padding: 140px 220px 140px 220px;

    display: flex;

    flex-direction: column;

    gap: 100px;

}



.intest {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.di-cosa-mi-occupo {

    color: #1b1e21;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

    position: relative;

    align-self: stretch;

}



.p-competenza {

    color: var(--dark-gray, #3f4242);

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    position: relative;

    align-self: stretch;

}



.paragraphs-ins {

    display: flex;

    flex-direction: row;

    gap: 64px;



}



.paragraph {

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: flex-start;

    justify-content: flex-start;

}



.parimg {

    flex-shrink: 0;

    width: 72.75px;

    height: 72.75px;

    position: relative;

    overflow: hidden;

}



.ellipse-10 {

    background: #d6ad60;

    border-radius: 50%;

    width: 59.11%;

    height: 59.11%;

    position: absolute;

    right: -0.35%;

    left: 41.24%;

    bottom: 20.75%;

    top: 20.15%;

}



.sectimg {

    height: 100%;

    position: absolute;

    left: 9.09px;



    opacity: 0.5;

}



.partit {

    color: #1b1e21;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 18px;

    font-weight: 700;

    position: relative;

    align-self: stretch;

}



.p-par {

    color: var(--dark-gray, #3f4242);

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    opacity: 0.8;

    position: relative;

    align-self: stretch;

}





.ellipse-11 {

    background: #d6ad60;

    border-radius: 50%;

    width: 58.24%;

    height: 58.24%;

    position: absolute;

    right: -0.22%;

    left: 41.99%;

    bottom: 28.22%;

    top: 13.54%;

}







.mask-group {

    flex-shrink: 0;

    width: 709px;

    height: 880px;

    position: relative;



}







.descr-map {



    display: flex;



}



.listmap {

    display: flex;

    flex-direction: column;

    gap: 23px;

    flex-shrink: 0;



}



.list-map-tit {

    color: #1b1e21;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

    position: relative;

    align-self: stretch;

    padding: 0;

    margin: 0;

}





.map-li {

    display: flex;

    flex-direction: row;

    gap: 12px;

    align-items: center;

    justify-content: flex-start;

    flex: 1;

    min-width: 110px;

    max-width: 300px;

    position: relative;

}



.spunta {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    position: relative;



}



.p-map {

    color: #1b1e21;

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    position: relative;

    flex: 1;

}



#section4 {

    background: #242c44;

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



#section5 {

    padding-top: 20px;

    background: #ffffff;

    position: relative;





}



/* Elementi decorativi di sfondo */

.background-circles {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}



.circle {

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 50%;

}



.circle-1 {

    width: 300px;

    height: 300px;

    top: -50px;

    left: -100px;

}



.circle-2 {

    width: 200px;

    height: 200px;

    bottom: -50px;

    right: -50px;

}



.circle-3 {

    width: 150px;

    height: 150px;

    top: 50%;

    right: 10%;

    transform: translateY(-50%);

}



.contacts-container {

    max-width: 1200px;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2%;

    align-items: start;

    position: relative;

    z-index: 2;

    margin-bottom: 60px;

}



.contact-section {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    padding: 40px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    margin: auto;

}



.contact-section:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



.country-header {

    display: flex;

    align-items: center;

    gap: 16px;

    border-bottom: 2px solid #d6ad60;

}



.flag-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    background: #d6ad60;

}



.country-title {

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: 24px;

    font-weight: 700;

}



.country-subtitle {

    color: rgba(255, 255, 255, 0.8);

    font-size: 16px;

    margin-bottom: 24px;

    line-height: 1.5;

}



.contact-info {

    display: flex;

    flex-direction: column;

    gap: 20px;





}



.contact-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    transition: background 0.3s ease;

}



.contact-item:hover {

    background: rgba(255, 255, 255, 0.1);

}



.contact-icon {

    width: 24px;

    height: 24px;

    background: #d6ad60;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.contact-details {

    flex: 1;

}



.contact-label {

    color: rgba(255, 255, 255, 0.6);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 4px;

}



.contact-value {

    color: #ffffff;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;

}



.contact-value:hover {

    color: #d6ad60;

}



/* Sezione centrale con profilo */

.profile-section {

    grid-column: span 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 40px;

    background: rgba(255, 255, 255, 0.03);

    border-radius: 24px;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.profile-image {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    border: 4px solid #d6ad60;

    object-fit: cover;

}



.profile-name {

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: 36px;

    font-weight: 700;

    margin-bottom: 8px;

}



.profile-title {

    color: #d6ad60;

    font-size: 18px;

    font-weight: 600;

}



.profile-description {

    color: rgba(255, 255, 255, 0.8);

    font-size: 16px;

    line-height: 1.6;

    max-width: 600px;

    margin-bottom: 32px;

}



.cta-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}



.cta-button {

    background: #d6ad60;

    color: #1b1e21;

    padding: 16px 32px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 8px;

}



.cta-button:hover {

    background: #e8bd6f;

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(214, 173, 96, 0.3);

}







.half-circle {

    flex-shrink: 0;

    width: 543px;

    height: 565px;

    position: absolute;

    left: 190px;

    top: 0px;



}



.emblem {

    display: flex;

    flex-direction: column;

    gap: 0px;

    align-items: flex-start;

    justify-content: flex-start;

    flex-shrink: 0;

    position: relative;

}



.border {

    border-radius: 0px;

    flex-shrink: 0;

    width: 312px;

    height: 362px;

    position: absolute;

    left: 17px;

    top: 19px;



}



.rettangle-emb {

    background: #ffffff;

    padding: 20px 32px 20px 32px;

    display: flex;

    flex-direction: row;

    gap: 24px;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 312px;

    position: relative;

}



.marina-img-tondo {

    flex-shrink: 0;

    width: 74px;

    height: 74px;

    position: relative;



}



.tit-emb {

    display: flex;

    flex-direction: column;

    gap: 0px;

    align-items: flex-start;

    justify-content: flex-start;

    flex: 1;

    position: relative;

}



.marina-di-dio2 {

    color: #1b1e21;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 19px;

    font-weight: 700;

    position: relative;

    margin: 0;

}



.p-emb {

    color: var(--dark-gray, #3f4242);

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 14px;

    line-height: 26px;

    font-weight: 400;

    position: relative;

}



.sub-emb {

    background: #d6ad60;

    border-radius: 0px 0px 280px 280px;

    display: flex;

    flex-direction: column;

    gap: 18px;

    align-items: center;

    justify-content: flex-start;

    flex-shrink: 0;

    width: 312px;

    height: 242px;

    position: relative;

    overflow: hidden;

}



.emb-int {

    display: flex;

    flex-direction: row;

    gap: 12px;

    padding: 5px;



}



.icon-emb {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    position: relative;



}



.emb-desc {



    display: flex;

    flex-direction: column;

}



.tit-sub-emb {

    color: #242c44;

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 14px;

    line-height: 26px;

    font-weight: 400;

    opacity: 0.5;

    position: relative;

    margin: 0;

}



.mail {

    color: #ffffff;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 13px;

    font-weight: 700;

    position: relative;

    text-decoration: none;



}







.sec-5-desc {

    display: flex;

    flex-direction: column;

    gap: 37px;



}



.sec-5-desc-align {

    display: flex;

    flex-direction: column;

    gap: 18px;



}



.sec-5-tit {

    color: #ffffff;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 40px;

    font-weight: 700;

    position: relative;

    align-self: stretch;

}



.p-sec-5 {

    color: #ffffff;

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    position: relative;

    align-self: stretch;

}



.button-b {

    background: #1b1e21;

    border-radius: 100px;

    border-style: solid;

    border-color: transparent;

    border-width: 1px;

    padding: 23px;

    display: flex;

    flex-direction: row;

    gap: 10px;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 252px;

    height: 65px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

}



.button-desc-b {

    color: #ffffff;

    text-align: left;

    font-family: "Inter-Bold", sans-serif;

    font-size: 16px;

    font-weight: 700;

    position: relative;

}



#section6 {

    background: #ffffff;

    padding: 140px 0px 140px 0px;

    display: flex;

    flex-direction: column;

    gap: 112px;

    align-items: center;

    align-self: stretch;

}



.pubblicazioni {

    color: #1b1e21;

    text-align: center;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

}



.news {

    color: #1b1e21;

    text-align: center;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

}



.pubblicazioni-singole {



    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 64px;

    margin: 0 5%;

    justify-items: stretch;

}





.img-pub-1 {

    width: 37px;

    height: 37px;

    position: absolute;

    left: 0px;

    top: 0px;

    object-fit: cover;

}



.button-pub {

    color: #ffffff;

    text-align: center;

    font-family: "Inter-Bold", sans-serif;

    font-size: 16px;

    font-weight: 700;



}



.group-pub {

    flex-shrink: 0;

    width: 37px;

    height: 37px;

    position: static;

}



.p-pub-tit {

    color: #1b1e21;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 25px;

    font-weight: 700;

    align-self: stretch;



}



.p-pub-risp {

    color: var(--dark-gray, #3f4242);

    text-align: left;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    align-self: stretch;



}



.frame-pub-des {

    display: flex;

    flex-direction: column;

    gap: 16px;

    align-items: flex-end;

    justify-content: center;

    flex: 1;



}



.div-button-pub {

    background: #1b1e21;

    border-radius: 100px;

    border-style: solid;

    border-color: transparent;

    border-width: 1px;

    padding: 23px;

    display: flex;

    flex-direction: row;

    gap: 10px;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    height: 27px;

    position: relative;

    overflow: hidden;

    text-decoration: none;

}



.pub {

    display: flex;

    flex-direction: row;

    gap: 32px;

    align-items: flex-start;

    justify-content: flex-start;

    flex-shrink: 0;

    position: relative;

}











/* GENERALI */

#slider {

    padding: 150px 150px 400px 150px;

    margin: 0 auto;

    height: 250%;

    width: 100vw;

    text-align: center;

    background-image: url("img/Rectangle\ 57.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

    /* Evita overflow indesiderato */

    position: relative;

}



#slider input[type=radio] {

    display: none;

}



#slider label {

    cursor: pointer;

    text-decoration: none;

}



/* SLIDES E ANIMAZIONI */

#slides {

    position: relative;

    z-index: 1;

}



#overflow {

    width: 100%;

    overflow: hidden;

}



#slides .inner {

    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

    width: 600%;

    /* Adatto per 6 slide */

    display: flex;

    height: 100%;

}



#slides .slide {

    width: calc(100% / 6);

    /* Larghezza dinamica per 6 slide */

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    height: 100%;

    box-sizing: border-box;

}



#slide1:checked~#slides .inner {

    margin-left: 0;

}



#slide2:checked~#slides .inner {

    margin-left: -100%;

}



#slide3:checked~#slides .inner {

    margin-left: -200%;

}



#slide4:checked~#slides .inner {

    margin-left: -300%;

}



#slide5:checked~#slides .inner {

    margin-left: -400%;

}



#slide6:checked~#slides .inner {

    margin-left: -500%;

}



/* CONTENUTO DELLE SLIDES */

.slide-content {

    display: flex;

    flex-direction: column;

    gap: 52px;

    align-items: center;

    justify-content: flex-start;

}



.rub-avv,

.rub-tit,

.rub-risp {

    text-align: center;

    color: #ffffff;

}



.rub-avv {

    font-family: "Inter-Regular", sans-serif;

    font-size: 18px;

    line-height: 28px;

    font-weight: 400;

    width: 704px;

}



.rub-tit {

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 50px;

    font-weight: 700;

    width: 1126px;

}



.rub-risp {

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    line-height: 28px;

    font-weight: 400;

    opacity: 0.7;

    margin-bottom: 100px;

    /* Spazio per non sovrapporre il testo ai puntini */

    width: 961px;

}



.slide-button {

    background-color: #4447;

    color: #fff;

    font-family: "Inter-Regular", sans-serif;

    font-size: 16px;

    font-weight: 500;

    border: 2px solid #fff;

    border-radius: 25px;

    padding: 10px 20px;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.2s ease;

    margin: 20px 0;

}



.slide-button:hover {

    background-color: #444444;

    transform: scale(1.05);

}



/* CONTROLLI */

#controls {

    position: absolute;

    width: 80%;

    top: 50%;

    display: flex;

    justify-content: space-between;

    transform: translateY(-50%);

    z-index: 5;

    cursor: pointer;

}









/* BULLETS */

#bullets {

    position: absolute;



    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 20px;

}



#bullets label {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #ccc;

    cursor: pointer;

    transition: background 0.3s;

}



#slide1:checked~#bullets label:nth-child(1),

#slide2:checked~#bullets label:nth-child(2),

#slide3:checked~#bullets label:nth-child(3),

#slide4:checked~#bullets label:nth-child(4),

#slide5:checked~#bullets label:nth-child(5),

#slide6:checked~#bullets label:nth-child(6) {

    background: #444;

}













.frame-1686556232 {

    position: fixed;

    background: #1b1e21;

    border-radius: 50%;

    padding: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    right: 40px;

    top: 830px;

    z-index: 100;

    cursor: pointer;

    /* Mostra il puntatore */

}



.icon-container {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    /* Evita che l'immagine esca fuori */

}



.vectort {

    height: 80%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.ret-vect {

    width: 40%;

    position: absolute;

    top: 85%;

    /* Inizialmente più in basso */

    left: 50%;

    transform: translate(-50%, -50%);

    transition: top 0.3s ease-out;

    /* Animazione fluida */

}



/* Effetto hover */

.frame-1686556232:hover .ret-vect {

    top: 15%;

    /* Sposta leggermente in alto */

}











/* footer*/





.footer {

    display: flex;

    flex-direction: column;

    width: 100vw;



    align-items: flex-start;

    gap: 35px;

    padding: 70px 220px 30px;

    position: relative;

    margin-left: -105px;

    margin-right: -105px;

    margin-top: -300px;

    background-color: #242c44;

    border-radius: 0px 300px 0px 0px;

}



.content-footer {

    display: flex;

    width: 1288px;

    align-items: flex-start;

    gap: 71px;

    position: relative;

    flex: 0 0 auto;

}



.back-logo {

    position: relative;



    background-color: #d9d9d9;

    border-radius: 25px;

}



.logo {

    width: 250px;

    margin: 10px;

}



.footer-contact {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    position: relative;

    flex: 1;

    flex-grow: 1;

}



.desc-foot {

    position: relative;

    align-self: stretch;

    opacity: 0.5;

    font-family: "Inter", Helvetica;

    font-weight: 400;

    color: #ffffff;

    font-size: 18px;

    letter-spacing: 0;

    line-height: 32px;



}



.tit-foot {

    position: relative;

    align-self: stretch;

    font-family: "Playfair Display", Helvetica;

    font-weight: 400;

    color: #ffffff;

    font-size: 20px;

    letter-spacing: 0;

    line-height: 20px;

    margin: 0;

}



.mail-footer {

    color: #ffffff;

    text-align: left;

    font-family: "PlayfairDisplay-Bold", sans-serif;

    font-size: 18px;

    font-weight: 700;

    position: relative;

    text-decoration: none;



}



.group-social {

    display: flex;

    position: relative;

    width: 141px;

    height: 41px;

    flex-direction: row;

    gap: 20px;

}



.img-social {



    height: 30px;

}



.foot-res {

    display: flex;

    width: 397px;

    align-items: flex-start;

    gap: 32px;

    padding: 24px 0px;

    position: relative;

}



.foot-sitemap {

    display: flex;

    flex-direction: column;



    align-items: flex-start;

    gap: 24px;

    position: relative;

    flex: 1;

    flex-grow: 1;

}



.tit-sitemap {

    position: relative;

    align-self: stretch;



    font-weight: 400;

    color: #ffffff;

    font-size: 18px;

    letter-spacing: 0;

    line-height: 20px;

    margin: 0;



}





.li-foot a {

    position: relative;

    align-self: stretch;

    text-decoration: none;

    color: #ffffff;

    font-size: 16px;

    letter-spacing: 0;

    line-height: 20px;

    margin: 0;

    padding: 10px 0;





}







.sub-footer {

    display: flex;

    width: 1288px;

    align-items: flex-start;

    justify-content: space-between;

    position: relative;

    flex: 0 0 auto;

}



.copyright {

    text-decoration: none;

    position: relative;

    width: fit-content;

    margin-top: -1px;

    opacity: 0.5;

    font-family: "Inter", Helvetica;

    font-weight: 400;

    color: #ffffff;

    font-size: 15px;

    letter-spacing: 0;

    line-height: 32px;

    white-space: nowrap;



}



.copyright a {

    text-decoration: none;

    color: #ffffff;
}



.doc {



    display: inline-flex;

    align-items: flex-start;

    gap: 25px;

    position: relative;

    flex: 0 0 auto;

}



/* SEZIONE NEWS - Stili aggiuntivi da aggiungere al file style.css */



/* Contenitore immagine notizia */

.news-image-container {

    width: 100%;

    height: 250px;

    overflow: hidden;

    border-radius: 15px 15px 0 0;

    position: relative;

}



.news-image {

    width: 100%;



    object-fit: cover;

    transition: transform 0.3s ease;

}



.news-card:hover .news-image {

    transform: scale(1.05);

}



/* Quando c'è un'immagine, aggiusta il padding del contenuto */

.news-card:has(.news-image-container) .news-content {

    padding-top: 20px;

}



/* Pulsante link articolo */

.news-link-button {

    display: inline-block;

    margin-top: 20px;

    padding: 6px 12px;

    background: linear-gradient(135deg, #1b1e21, #2c3e50);

    color: white;

    text-decoration: none;

    border-radius: 50px;

    font-weight: 600;

    font-size: 0.95em;

    transition: all 0.3s ease;

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

}



.news-link-button:hover {

    background: linear-gradient(135deg, #2c3e50, #34495e);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}



.news-link-button:active {

    transform: translateY(0);

}



/* Stati di caricamento ed errore */

.loading-news,

.error-news {

    text-align: center;

    padding: 60px 20px;

    color: #7f8c8d;

    font-size: 1.2em;

    background: #f8f9fa;

    border-radius: 15px;

}



.loading-news::before {

    content: '⏳';

    font-size: 3em;

    display: block;

    margin-bottom: 20px;

    animation: pulse 1.5s ease-in-out infinite;

}



.error-news::before {

    content: '⚠️';

    font-size: 3em;

    display: block;

    margin-bottom: 20px;

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}







/*SEZIONE NEWS */









.container {

    max-width: 1500px;

    margin: 0 10%;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 20px;

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

    backdrop-filter: blur(10px);

    overflow: hidden;

}





@keyframes float {

    0% {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    100% {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}







.news-section {

    padding: 50px 40px;

}



.section-title {

    font-size: 2.5em;

    color: #2c3e50;

    text-align: center;

    margin-bottom: 40px;

    position: relative;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 4px;

    background: linear-gradient(135deg, #3498db, #2c3e50);

    border-radius: 2px;

}



.news-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));

    gap: 30px;

    margin-top: 40px;

}



.news-card {

    background: white;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    transition: all 0.3s ease;

    position: relative;

}



.news-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.news-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(135deg, #3498db, #2c3e50);

}



.news-content {

    padding: 25px;

}



.news-title {

    font-size: 1.4em;

    color: #2c3e50;

    margin-bottom: 15px;

    font-weight: 600;

    line-height: 1.3;

}



.news-date {

    color: #7f8c8d;

    font-size: 0.9em;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.news-date::before {

    content: '📅';

    font-size: 1.1em;

}



.news-text {

    color: #34495e;

    line-height: 1.6;

    font-size: 1em;

}



.no-news {

    text-align: center;

    padding: 60px 20px;

    color: #7f8c8d;

    font-size: 1.2em;

    background: #f8f9fa;

    border-radius: 15px;

    border: 2px dashed #bdc3c7;

}



.no-news::before {

    content: '📰';

    font-size: 3em;

    display: block;

    margin-bottom: 20px;

}









/* MEDIA QUERY */

@media (max-width: 1024px) {

    #section1 {

        padding: 100px 50px;

        gap: 32px;

    }



    .name-title {

        padding: 80px 0;

    }



    .marina-di-dio-avvocato {

        font-size: 50px;

    }



    .immagine-marina-di-dio-2-1 {

        width: 400px;

    }



    #section2 {

        padding: 0 50px 0 0;

    }



    #section3 {

        padding: 100px 50px;

    }



    .footer {

        padding: 70px 50px 30px;

        margin-left: -50px;

        margin-right: -50px;

    }

}



/* Smartphone e dispositivi piccoli */

@media (max-width: 768px) {



    /* Header e Logo */

    .header {

        position: fixed;

        top: 8px;

        left: 8px;

        right: 8px;

        height: 80px;

        z-index: 1000;

        width: 96.5%;

        background-color: #242c44;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    }



    .hero-direction {

        height: auto;

    }





    .logodiv {

        width: 150px;

        height: 50px;

        left: 20px;

        top: 15px;

    }



    .logo-o {

        left: 5px;

        top: 3px;

    }



    /* Menu Hamburger */

    .nav-hamburger {

        position: fixed;

        top: 25px;

        right: 20px;

        width: 30px;

        height: 25px;

        height: 25px;

        z-index: 1001;

        cursor: pointer;

    }



    .nav-hamburger span {

        position: absolute;

        left: 0;

        width: 100%;

        height: 3px;

        background: #c2c2c2;

        border-radius: 2px;

        transition: all 0.3s ease;

    }



    .nav-hamburger span:nth-child(1) {

        top: 0;

    }



    .nav-hamburger span:nth-child(2) {

        top: 8px;

    }



    .nav-hamburger span:nth-child(3) {

        top: 16px;

    }



    /* Animazione hamburger */

    body.header-open .nav-hamburger span:nth-child(1) {

        transform: rotate(45deg);

        top: 8px;

    }



    body.header-open .nav-hamburger span:nth-child(2) {

        opacity: 0;

    }



    body.header-open .nav-hamburger span:nth-child(3) {

        transform: rotate(-45deg);

        top: 8px;

    }



    /* Menu Mobile */

    .menu {

        right: 3%;

        display: flow-root;

        width: 100%;

        height: 100vh;

        max-height: 90vh;

        background: #242c44;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        z-index: 999;

        overflow-y: scroll;

        /* Aggiunge scroll se necessario */

        padding: 10%;

        /* Padding per evitare sovrapposizioni con hamburger */

        box-sizing: border-box;

        /* Include padding nel calcolo altezza */

    }



    body.header-open .menu {

        transform: translateX(3%);

    }



    .nav-item {

        width: auto;

        text-align: center;

        margin: 10px 0;

        /* Spaziatura verticale tra le voci */

        flex-shrink: 0;

        /* Impedisce che gli elementi si comprimano troppo */

    }







    .button-contact {

        margin-top: 30px;

        margin-bottom: 20px;

        flex-shrink: 0;

    }

    /* Section 1 - Hero */

    #section1 {

        padding: 120px 20px 80px;

        flex-direction: column;

        text-align: center;

        margin-top: 0;

    }



    .name-title {

        padding: 40px 0;

        order: 2;

    }



    .marina-di-dio-avvocato {

        font-size: 32px;

        line-height: 1.2;

    }



    .marina-di-dio-avvocato-span,

    .marina-di-dio-avvocato-span2 {

        font-size: 32px;

    }



    .esperta-in-diritto-penale-e-diritto-dei-consumatori {

        font-size: 16px;

        line-height: 24px;

    }



    .button {

        width: 100%;

        max-width: 300px;

    }



    .immagine-marina-di-dio-2-1 {

        width: 100%;

        max-width: 300px;

        height: auto;

        order: 1;

    }



    /* Ellissi Hero - nascondi su mobile */

    .ellipse-1,

    .ellipse-2,

    .ellipse-3,

    .ellipse-4 {

        display: none;

    }



    /* Section 2 */

    #section2 {

        flex-direction: column;

        padding: 80px 20px;

        gap: 40px;

    }



    .etichetta {

        display: none;

    }



    .frame-6 {

        padding: 40px 0;

    }



    .marina-di-dio {

        font-size: 32px;

        text-align: center;

    }



    .flexli {

        flex-direction: column;

        gap: 20px;

    }







    /* Ellissi Section 2 - nascondi su mobile */

    .ellipse-6,

    .ellipse-7,

    .ellipse-8,

    .ellipse-9 {

        display: none;

    }



    /* Section 3 */

    #section3 {

        padding: 80px 20px;

        gap: 60px;

    }



    .di-cosa-mi-occupo {

        font-size: 32px;

        line-height: 1.2;

        text-align: center;

    }



    .paragraphs-ins {

        flex-direction: column;

        gap: 40px;

    }



    .paragraph {

        text-align: center;

    }







    .mask-group {

        width: 100%;

        height: auto;

    }





    .listmap {

        width: 100%;

        gap: 30px;

    }



    .list-map-tit {

        font-size: 32px;

        text-align: center;

    }







    /* Section 5 */

    .contacts-container {

        display: inline-block;



    }



    .profile-section {

        grid-column: span 1;

        order: -1;

        padding: 20px;

        margin: 20px 10px;

    }



    .contact-section {

        margin: 20px 10px;

    }



    .country-title {

        font-size: 28px;

    }



    .profile-name {

        font-size: 28px;

    }



    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }



    .cta-button {

        width: 100%;

        max-width: 300px;

        justify-content: center;

    }



    #section5 {

        padding: 80px 20px;

    }



    .half-circle {

        position: absolute;

        left: 15px;

        top: 30px;

        width: 100%;

        max-width: 350px;

        height: auto;

    }



    .intersect {

        top: 50%;

    }



    .sec-5-tit {

        font-size: 32px;

    }



    .button-b {

        width: 100%;

        max-width: 300px;

    }















    /* Slider */

    #slider {

        padding: 40px 20px 120px;

        height: auto;

        min-height: 70vh;

    }



    .rub-tit {

        font-size: 28px;

        line-height: 1.2;

        width: 100%;

    }



    .rub-avv {

        font-size: 16px;

        width: 100%;

    }



    .rub-risp {

        font-size: 14px;

        line-height: 1.4;

        width: 100%;

        margin-bottom: 60px;

    }



    #controls {

        width: 90%;

    }



    #bullets {

        bottom: 20px;

        gap: 15px;

    }



    /* Section 6 - Pubblicazioni */

    #section6 {

        padding: 80px 20px;

    }



    .pubblicazioni {

        font-size: 32px;

        text-align: center;

    }



    .pubblicazioni-singole {

        grid-template-columns: 1fr;

        gap: 40px;

        margin: 0;

    }



    .pub {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }



    /* Footer */

    .footer {

        padding: 60px 20px 30px;

        margin-left: 0;

        margin-right: 0;

        margin-top: -200px;

        border-radius: 0px 100px 0px 0px;

    }



    .content-footer {

        flex-direction: column;

        width: 100%;

        gap: 40px;

    }



    .back-logo {

        align-self: center;

    }



    .logo {

        width: 200px;

    }



    .foot-res {

        flex-direction: column;

        width: 100%;

        gap: 40px;

    }



    .foot-sitemap {

        text-align: center;

    }



    .group-social {

        justify-content: center;

        width: 100%;

    }



    .sub-footer {

        flex-direction: column;

        width: 100%;

        gap: 20px;

        text-align: center;

    }



    .doc {

        justify-content: center;

        flex-wrap: wrap;

    }



    /* Bottone scroll to top */

    .frame-1686556232 {

        right: 20px;

        bottom: 20px;

        top: auto;

    }











}



/* Smartphone molto piccoli */

@media (max-width: 480px) {

    .marina-di-dio-avvocato {

        font-size: 28px;

    }



    .di-cosa-mi-occupo,

    .marina-di-dio,

    .list-map-tit,

    .sec-5-tit,

    .pubblicazioni {

        font-size: 28px;

    }



    .rub-tit {

        font-size: 24px;

    }



    .button,

    .button-b {

        padding: 20px;

        font-size: 14px;

    }



    .logodiv {

        width: 120px;

        height: 40px;

    }



    .logo {

        width: 150px;

    }



    #section1 {

        padding: 100px 15px 60px;

    }



    #section2,

    #section3,

    #section4,

    #section5,

    #section6 {

        padding-left: 15px;

        padding-right: 15px;

    }



    .footer {

        padding: 40px 15px 20px;

    }

    .contact-section {

        padding: 24px;

    }



    .country-title {

        font-size: 24px;

    }



    .profile-name {

        font-size: 24px;

    }



}



/* Landscape orientation per smartphone */

@media (max-width: 768px) and (orientation: landscape) {

    .header {

        height: 60px;

    }



    .logodiv {

        width: 120px;

        height: 40px;

        top: 10px;

    }



    .nav-hamburger {

        top: 17px;

    }



    #section1 {

        padding: 80px 20px 60px;

    }



    .marina-di-dio-avvocato {

        font-size: 28px;

    }



    #slider {

        min-height: 50vh;

    }

}



/* Utility classes per il menu mobile */

body {

    transition: overflow 0.3s ease;

}



body.header-open {

    overflow: hidden;

}



/* Fix per elementi che escono dal viewport */

* {

    box-sizing: border-box;

}



.homepage-responsive {

    overflow-x: hidden;

    width: 100%;

}



/* Assicura che le immagini siano responsive */

img {

    max-width: 100%;

    height: auto;

}



/* Fix per testi che potrebbero essere troppo larghi */

.marina-di-dio-avvocato,

.di-cosa-mi-occupo,

.marina-di-dio,

.list-map-tit,

.sec-5-tit,

.pubblicazioni,

.rub-tit {

    word-wrap: break-word;

    hyphens: auto;

}



/* Miglioramenti per la leggibilità su mobile */

@media (max-width: 768px) {



    p,

    .p-avvocato,

    .p-competenza,

    .p-par,

    .p-map,

    .p-sec-5,

    .p-pub-risp {

        line-height: 1.6;

        font-size: 16px;

    }



    /* Aumenta le aree cliccabili */

    .button,

    .button-b,

    .button-contact {

        min-height: 44px;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    /* Migliora lo spacing per touch */

    .menu .nav-item {

        padding: 10px 0;

    }







    .news-image-container {

        height: 200px;

    }



    .news-link-button {

        width: 100%;

        text-align: center;

        padding: 14px 20px;

    }

}



@media (max-width: 480px) {

    .news-image-container {

        height: 180px;

    }









}




/* ===== NEWS SECTION - RESPONSIVE MOBILE ===== */

@media (max-width: 768px) {

    .container {
        margin: 0 12px;
        border-radius: 16px;
    }

    .news-section {
        padding: 30px 16px;
    }

    .section-title {
        font-size: 1.8em;
        margin-bottom: 28px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 24px;
    }

    .news-card {
        border-radius: 12px;
    }

    .news-card:hover {
        transform: none;
    }

    .news-content {
        padding: 18px;
    }

    .news-title {
        font-size: 1.15em;
        line-height: 1.4;
    }

    .news-date {
        font-size: 0.85em;
    }

    .news-text {
        font-size: 0.95em;
    }

    .news-image-container {
        height: 200px;
    }

    .news-link-button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        font-size: 1em;
        box-sizing: border-box;
    }

    .no-news {
        padding: 40px 16px;
        font-size: 1em;
    }

    .loading-news,
    .error-news {
        padding: 40px 16px;
        font-size: 1em;
    }

}

@media (max-width: 480px) {

    .container {
        margin: 0 8px;
        border-radius: 12px;
    }

    .news-section {
        padding: 24px 12px;
    }

    .section-title {
        font-size: 1.5em;
    }

    .news-grid {
        gap: 16px;
    }

    .news-image-container {
        height: 180px;
    }

    .news-content {
        padding: 14px;
    }

    .news-title {
        font-size: 1.05em;
    }

}

/* ===== COOKIE CONSENT POPUP ===== */
#cookie-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 30, 33, 0.75);
    z-index: 9998;
    backdrop-filter: blur(3px);
}

#cookie-banner {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    width: calc(100% - 48px);
    max-width: 680px;
    animation: cookieSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#cookie-inner {
    background: #1b1e21;
    border: 1px solid rgba(214, 173, 96, 0.3);
    border-radius: 20px;
    padding: 36px 40px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(214, 173, 96, 0.08);
    position: relative;
    overflow: hidden;
}

#cookie-inner::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(214, 173, 96, 0.08);
    pointer-events: none;
}

#cookie-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

#cookie-title {
    color: #ffffff;
    font-family: "PlayfairDisplay-Bold", "Georgia", serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px 0;
}

#cookie-desc {
    color: #bdbfc8;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 24px 0;
}

.cookie-link {
    color: #d6ad60;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.cookie-link:hover {
    color: #e8c878;
}

#cookie-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

#cookie-reject {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.7);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 22px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

#cookie-reject:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

#cookie-customize {
    background: transparent;
    border: 1px solid rgba(214, 173, 96, 0.4);
    border-radius: 100px;
    color: #d6ad60;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 22px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    white-space: nowrap;
}

#cookie-customize:hover {
    background: rgba(214, 173, 96, 0.08);
    border-color: #d6ad60;
}

#cookie-accept {
    background: #d6ad60;
    border: 1px solid transparent;
    border-radius: 100px;
    color: #1b1e21;
    font-family: "Inter-Bold", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-left: auto;
    white-space: nowrap;
}

#cookie-accept:hover {
    background: #e8c878;
    transform: translateY(-1px);
}

/* Sezione dettagli */
#cookie-details {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cookie-toggle-row:last-of-type {
    border-bottom: none;
}

.cookie-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cookie-toggle-name {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.cookie-toggle-desc {
    color: #bdbfc8;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

/* Toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.3s;
}

.cookie-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.cookie-switch input:checked+.cookie-slider {
    background: #d6ad60;
}

.cookie-switch input:checked+.cookie-slider::before {
    transform: translateX(20px);
}

.cookie-switch input:disabled+.cookie-slider {
    background: rgba(214, 173, 96, 0.4);
    cursor: not-allowed;
}

.cookie-switch input:disabled:checked+.cookie-slider {
    background: rgba(214, 173, 96, 0.5);
}

#cookie-save {
    margin-top: 20px;
    background: #d6ad60;
    border: 1px solid transparent;
    border-radius: 100px;
    color: #1b1e21;
    font-family: "Inter-Bold", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

#cookie-save:hover {
    background: #e8c878;
}

/* Mobile */
@media (max-width: 600px) {

    @keyframes cookieSlideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #cookie-banner {
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    #cookie-inner {
        border-radius: 20px 20px 0 0;
        padding: 28px 24px;
        max-height: 85vh;
        overflow-y: auto;
    }

    #cookie-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    #cookie-reject,
    #cookie-customize,
    #cookie-accept {
        min-height: 48px;
        text-align: center;
        width: 100%;
    }

    #cookie-accept {
        margin-left: 0;
    }

}