:root {
    --primary-color: #1f2b28;
    --secondary-color: #d8c04a;
}

/* --- Sotto al mask dev'essere sempre nero --- */
html, body {
    background: #000;
}

.bg-section-white {
    background-color: #fff;
}
/* Se avevi qualche overlay chiaro "di tema", portalo a nero */
.programma::before,
.hero::before,
.section-overlay::before {
    background: #000 !important;
}

/*Codice font logo*/
@font-face {
    font-family: "Seagram"; /* Scegli un nome per il tuo font */
    src: url('../fonts/Seagram tfb.ttf') format('truetype');
    font-weight: normal; /* Opzionale: peso del font (es. bold) */
    font-style: normal; /* Opzionale: stile del font (es. italic) */
}


.font-logo-titolo {
    font-family: "Seagram","Poppins", sans-serif !important;
    font-size: 100px !important;
    font-weight: 500 !important;
    line-height: 100px !important;
}

.text-title {
    font-family: "Poppins", sans-serif;
    font-size: 34px;
    font-weight: 500;
    color: #fff;
}

.text-description {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}

.page-banner > h1 {
    text-shadow: 5px 5px 10px #000000;
    font-size: 40px !important
}

/* BTN-1 — dark con “cornice” gialla sfalsata + hover giallo */
.btn-1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: var(--primary-color); /* fondo scuro */
    color: #ffffff;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none; /* sovrascrive Bootstrap se serve */
    transition: background-color .25s ease, color .25s ease, transform .15s ease;
    margin: auto 5px;
}

    /* cornice gialla dietro (offset a dx / in basso) */
    .btn-1::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--secondary-color); /* giallo */
        border-radius: inherit;
        z-index: -1;
        transform: translate(5px, 5px);
        transition: transform .25s ease;
    }

    /* ombra morbida sotto la “cornice” (opzionale) */
    .btn-1::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: -2;
        box-shadow: 0 10px 20px rgba(0,0,0,.25);
        transform: translate(5px, 5px);
    }

    /* hover: bottone giallo, cornice rientra */
    .btn-1:hover,
    .btn-1:focus {
        background: #d8c04a;
        color: #1b1f1e;
    }

        .btn-1:hover::after,
        .btn-1:focus::after {
            transform: translate(0,0);
        }

        .btn-1:hover::before,
        .btn-1:focus::before {
            box-shadow: none;
        }



    /* micro feedback al click */
    .btn-1:active {
        transform: translateY(1px);
    }


/* Riduci lo spazio tra le due righe in hero */
.meeta-hero-section-2 .meeta-hero-content .text {
    line-height: 1.45 !important; /* ~30–36px a seconda del font-size */
    margin: 0 !important;
}

[data-aos=fade-up] {
    transform: translate3d(0, 0, 0);
}

[data-aos^=fade][data-aos^=fade] {
    opacity: 1;
    transition-property: opacity, transform;
}

/* Coerenza anche su mobile */
@media (max-width: 767.98px) {
    .meeta-hero-section-2 .meeta-hero-content .text {
        line-height: 1.35 !important;
    }
}

/* sezione about index */
.custom-section-black {
    background-color: #020202;
}

    .custom-section-black .meeta-about-images-2 .image img {
        border-radius: 0px;
        box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.25);
    }

    .custom-section-black .meeta-about-images-2 .custom-position {
        position: absolute;
        bottom: -30px;
        right: 100px;
    }

    .custom-section-black p,
    .custom-section-black h2,
    .custom-section-black h3,
    .custom-section-black h4 {
        color: white !important;
    }

    .custom-section-black .about-2-content-wrap .meeta-about-content .about-list ul .about-list-item:nth-child(1) {
        margin-right: 35px;
        border-color: #C9AF49;
    }

    .custom-section-black .about-2-content-wrap .meeta-about-content .about-list ul .about-list-item:nth-child(2) {
        border-color: #C9AF49;
    }

    .custom-section-black .about-2-content-wrap .meeta-about-content .about-list ul .about-list-item:nth-child(3) {
        margin-right: 35px;
        border-color: #C9AF49;
    }

    .custom-section-black .about-2-content-wrap .meeta-about-content .about-list ul .about-list-item:nth-child(4) {
        border-color: #C9AF49;
    }

/* sezione footer */
.bg-forest-page {
    background: url("/assets/images/bg/header.jpg") center/cover no-repeat;
}

    /* 1) Togli sfondi/overlay di sponsor e footer */
    .bg-forest-page .meeta-event-sponsors,
    .bg-forest-page .meeta-footer-section {
        background: transparent !important;
    }

        .bg-forest-page .meeta-event-sponsors::before,
        .bg-forest-page .meeta-footer-3::before {
            content: none !important;
        }

    /* 2) Rimuovi grigi/bordi delle griglie sponsor */
    .bg-forest-page .meeta-event-sponsors-3 .meeta-sponsor-wrap .meeta-sponsor-logo {
        background: transparent !important;
    }

    .bg-forest-page .meeta-event-sponsors-4 .meeta-sponsor-wrap::before {
        display: none !important;
    }

    .bg-forest-page .meeta-event-sponsors-4 .meeta-sponsor-wrap .meeta-sponsor-item-box {
        border-right: 0 !important;
    }

/* 3) Elimina eventuali “fessure” tra le sezioni */
#sponsor, .meeta-footer-section {
    margin: 0 !important;
}

.page-banner-section {
    min-height: 400px;
}

/* pagina CHI SIAMO */
.page-chi-siamo {
    background-image: url(../images/bg/bg-chi-siamo.jpg);
    background-position: top center;
}

.page-manifestazioni {
    background-image: url(../images/bg/bg-chi-siamo.jpg);
}

.page-gallery {
    background-image: url(../images/bg/bg-gallery.jpg);
    background-position: top center;
}


.page-banner .breadcrumb {
    min-width: 225px;
    max-width: max-content;
}



.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--secondary-color);
}



    .btn-primary:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--secondary-color);
    }



.btn-secondary {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-color);
}



    .btn-secondary:hover {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        color: var(--primary-color);
    }



.event-list-content-wrap .event-list-item .event-list-content .meta-data span i {
    color: var(--secondary-color);
}



.event-list-content-wrap .event-list-item.event-list .event-time {
    background: var(--primary-color);
}



.event-list-content-wrap .event-list-item .event-list-content .ticket-link {
    color: var(--secondary-color);
    text-decoration-color: var(--secondary-color)
}



.event-list-content-wrap .event-list-item.event-list .event-list-content {
    margin-left: 20px;
}



.event-list-content-wrap .event-list-item .event-img a img {
    max-width: 200px;
}



.text-justify {
    text-align: justify;
}



.section-title-4 .main-title {
    font-size: 30px;
    line-height: unset;
    text-align: justify;
}



.event-list-content-wrap .event-list-item.event-list::before {
    z-index: 0
}



.event-details li a {
    color: var(--primary-color);
}



.event-details li:hover a, .event-details li.active a, .event-single-sidebar .sidebar-item .event-details ul li .title {
    color: var(--secondary-color)
}

.section-programma::before {
    background-image: url(../images/bg/bg-programma.jpg);
}

.progress-wrap::after {
    color: #C9AF49;
}

.meeta-about-section-4 {
    background: black;
}

.section-title-4 .main-title {
    color: white;
}

.meeta-section-title-2 .sub-title {
    color: #C9AF49;
}

.meeta-section-title-2 .main-title {
    color: #fff;
}

.meeta-event-schedule-tabs-menu .active .meeta-event-schedule-time {
    background-color: #1f2b28;
}

.meeta-event-schedule-2 .meeta-event-schedule-tabs .meeta-event-schedule-tabs-menu li::before {
    border-top: 15px solid #1f2b28;
}

.meeta-event-schedule-2 .meeta-event-schedule-tabs .meeta-event-schedule-tabs-menu li:hover {
    background: #1f2b28;
}

.meeta-event-schedule-2 .meeta-event-schedule-tabs .meeta-event-schedule-tab-content .meeta-event-schedule-tab-pane .meeta-event-accordion .meeta-event-accordion-item .meeta-event-accordion-toggle .event-title .time {
    color: #1f2b28;
}

.meeta-event-schedule-2 .meeta-event-schedule-tabs .meeta-event-schedule-tab-content .meeta-event-schedule-tab-pane .meeta-event-accordion .meeta-event-accordion-item + .meeta-event-accordion-item {
    border-top: 1px solid #1f2b28;
    margin-top: 10px;
}

.meeta-video-section-2 .video-img .popup-video {
    background: #C9AF49;
    color: #ffffff;
}

    .meeta-video-section-2 .video-img .popup-video:hover {
        background: #ffffff;
        color: #C9AF49;
    }

.meeta-section-title .sub-title {
    color: #C9AF49;
}

.meeta-event-sponsors-2 section-padding {
    background-color: black !important;
}

.meeta-blog {
    padding-top: 400px;
    background-image: url(../images/bg/bg-news.jpg);
    background-size: cover;
}

.single-blog {
    background: #C9AF49;
    margin-top: 30px;
}

    .single-blog .blog-content .blog-meta .category {
        background: #1f2b28;
    }

.meeta-gallery {
    background: black;
}

.card-news {
    display: flex;
}

.single-blog {
    background: #C9AF49;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .single-blog .blog-content {
        width: 100%;
        flex-grow: 1; /* spinge in basso e rende uniforme */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .single-blog .blog-content h3 {
            margin: auto 0; /* spinge automaticamente dall’alto e dal basso */
        }

    .single-blog .blog-image a img { /*
        max-height: 240px;*/
    }

.meeta-section-title .main-title {
    color: #fff;
}

.meeta-event-sponsors-2.section-padding {
    background: #000;
}

.color-4 {
    background: #C9AF49;
}

.page-storia {
    min-height: 400px;
    background-image: url(../images/bg/radici-storiche.jpg);
    background-position: top center;
}

.page-contatti {
    min-height: 400px;
    background-image: url(../images/bg/contattaci.jpg);
    background-position: top center;
}

.main-subtitle {
    color: #C9AF49;
}

.accordion-button:not(.collapsed)::after {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
}

.accordion-button:focus {
    z-index: 3;
    border-color: #C9AF49;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(201, 175, 73, 0.25);
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #C9AF49;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.programma::before {
    background: #fefefe !important;
}

.programma .main-title {
    color: var(--primary-color);
}

a:hover {
    text-decoration: none;
    color: #C9AF49;
}

.header-toggle button span {
    width: 25px;
    height: 2px;
    background: #C9AF49;
    margin: 5px 0;
    display: block;
}

a-header {
    color: #C9AF49 !important;
}

.header-navigation .main-menu li:hover > a::after {
    color: #C9AF49;
}

.a-header:hover {
    color: #C9AF49 !important;
}

.page-programma {
    min-height: 400px;
    background-image: url(../images/bg/programma.jpg);
    background-position: top center;
}

.meeta-footer-section {
    background-image: url(../images/bg/footer.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0px -10px 20px rgba(0,0,0,0.7);
    color: #fff;
}

.footer-title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

.footer-widget-social {
    display: flex;
    gap: 15px;
}

    .footer-widget-social .social-circle {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #777;
        border-radius: 50%;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s;
        font-size: 18px;
    }

        .footer-widget-social .social-circle:hover {
            background: #C9AF49;
            color: #111;
        }

.event-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .event-map img {
        width: 28px;
        height: 28px;
    }

    .event-map a {
        color: #C9AF49;
        text-decoration: none;
        font-weight: 500;
    }

.footer-bottom-wrap {
    color: #fff;
}

    .footer-bottom-wrap p a {
        color: #C9AF49;
        text-decoration: none;
        font-weight: 500;
    }

.footer-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .footer-separator span {
        position: relative;
        padding: 0 15px;
        font-weight: 500;
    }

        .footer-separator span::before,
        .footer-separator span::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #C9AF49;
            margin: 0 10px;
        }

.meeta-sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.meeta-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex: 0 1 calc(33.333% - 20px); /* 3 loghi per riga, sottraendo gap */
    box-sizing: border-box;
}

    .meeta-sponsor-logo img {
        max-height: 150px;
        width: auto;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .meeta-sponsor-logo img:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

@media (max-width: 767px) {
    .meeta-sponsor-logo {
        flex: 0 1 calc(50% - 15px);
    }
}

@media (max-width: 480px) {
    .meeta-sponsor-logo {
        flex: 0 1 100%;
    }
}

.btn-contatti {
    background-color: #C9AF49;
}

    .btn-contatti:hover {
        background-color: #C9AF49;
    }

.meeta-event-schedule::before {
    opacity: 1 !important;
}

.meeta-gallery-2 .gallery-image img {
    width: 100%;
    height: 250px
}

.header-navigation .main-menu li:hover > a {
    color: var(--secondary-color);
}

.header-navigation .sub-menu {
    border-color: var(--secondary-color)
}
/*
.meeta-event-schedule-2 .meeta-event-schedule-tabs .meeta-event-schedule-tab-content .meeta-event-schedule-tab-pane .meeta-event-accordion .meeta-event-accordion-item .meeta-event-accordion-toggle .image img {
    border-radius: 0 !important;
    -o-object-fit: cover;
    object-fit: cover;
}
*/

.accordion-button:not(.collapsed)::after {
    /* background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e); */
    /* transform: rotate(-180deg); */
}

.meeta-event-accordion-item .event-title {
    padding-left: 1rem;
}

    .meeta-event-accordion-item .event-title * {
        font-family: "Archivo", sans-serif;
    }

.meeta-footer-2 .footer-copyright {
    border-top: 1px solid #C9AF49 !important;
    padding-top: 40px;
    padding-bottom: 45px;
    margin-top: 0;
}

.font-logo-titolo {
    text-shadow: 5px 5px 10px #000000;
}











/* ombreggiatura header */
.meeta-header-2 .header-middle {
    background: linear-gradient(rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.0) 100%);
}

    .meeta-header-2 .header-middle.header-sticky.sticky {
        background-color: var(--primary-color);
        border-bottom-color: var(--primary-color);
    }

.offcanvas {
    background-color: var(--primary-color);
}

.offcanvas-menu .main-menu li:hover > a {
    color: var(--secondary-color);
}

/*header, elenco puntato*/
.meeta-header-2 .header-middle .header-wrap .header-navigation .sub-menu li:hover > a {
    color: var(--primary-color);
}

.header-navigation .sub-menu li a::before {
    background-color: var(--primary-color);
}

.header-navigation .sub-menu li a {
    color: var(--primary-color);
}

.page-banner .breadcrumb {
    background: var(--primary-color);
}

/* progress-circle */
.progress-wrap {
    box-shadow: inset 0 0 0 2px rgba(201, 175, 73, 0.2);
}

    .progress-wrap svg.progress-circle path {
        stroke: var(--secondary-color);
    }


/* ================================
   BLEND con CSS MASK (cinematografico)
   - Niente pseudo-elementi
   - Nessuna riga/hairline
   - Facile da modulare
   ================================ */

/* Base */
.blend {
    position: relative;
    overflow: hidden;
    background-color: #000; /* fallback/colore di fusione */
    isolation: isolate;
}

/* Sezione con immagine */
.blend--image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* --- Utility di fade (usa quella che ti serve) --- */

/* Fade verso il basso (es. chiusura immagine -> nero sezione successiva) */
.fade-bottom-s {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.fade-bottom-m {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.fade-bottom-l {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

/* Fade verso l’alto (es. apertura sezione nera per far “entrare” l’immagine sopra) */
.fade-top-s {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.fade-top-m {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.fade-top-l {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

/* Fade su entrambi i lati (utile per hero molto alto) */
.fade-y-m {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* Impostazioni comuni della mask */
.blend,
.blend--image,
.fade-bottom-s,
.fade-bottom-m,
.fade-bottom-l,
.fade-top-s,
.fade-top-m,
.fade-top-l,
.fade-y-m {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Evita “hairline” tra sezioni su resize/retina */
.blend {
    transform: translateZ(0);
}

    .blend + .blend {
        margin-top: -1px;
    }
/* sovrappone di 1px la sezione successiva */

/* Parallax/fixed solo desktop per evitare scatti su mobile */
.bg-fixed {
    background-attachment: scroll;
}

@media (min-width: 992px) {
    .bg-fixed {
        background-attachment: fixed;
    }
}

/* ------- Fallback (se il browser non supporta mask-image) ------- */
@supports not (mask-image: linear-gradient(black, transparent)) {
    /* usa una sfumatura con pseudo-elemento come ripiego */
    .fade-bottom-m {
        position: relative;
    }

        .fade-bottom-m::after {
            content: "";
            position: absolute;
            left: -1px;
            right: -1px;
            bottom: -1px;
            height: 140px;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, #000 100%);
            pointer-events: none;
        }

    .fade-top-m {
        position: relative;
    }

        .fade-top-m::before {
            content: "";
            position: absolute;
            left: -1px;
            right: -1px;
            top: -1px;
            height: 140px;
            background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, #000 100%);
            pointer-events: none;
        }
}


/* griglia icone home page*/

/* === ABOUT LIST: override tema + Grid responsiva === */
.meeta-about-content .about-list {
    max-width: none !important;
}

    .meeta-about-content .about-list ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 24px 36px;
        list-style: none;
        margin: 24px 0 0;
        padding: 0;
    }

    .meeta-about-content .about-list .about-list-item {
        display: grid !important;
        grid-template-columns: 56px 1fr;
        align-items: center;
        column-gap: 14px;
        width: auto !important;
        max-width: none !important;
        padding-bottom: 14px;
        border-bottom: 1px solid #C9AF49;
        min-height: 64px;
    }

    /* Icone (facoltativo: rimuovi width/height inline e usa questi) */
    .meeta-about-content .about-list .about-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .meeta-about-content .about-list .about-icon img {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

    /* Titoli */
    .meeta-about-content .about-list .about-text .title {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.25;
        font-weight: 700;
        color: #fff;
    }



/* BREAKPOINTS
---------------------------------
XS: <576px
SM: ≥576px
MD: ≥768px
LG: ≥992px
XL: ≥1200px
XXL: ≥1400px
*/

/* XXL (≥1400px) — grandi monitor */
@media (min-width: 1400px) {
    .font-logo-titolo {
        font-size: 110px !important;
        line-height: 110px !important;
    }
}

/* LG ( ≥992px e <1200px ) */
@media (max-width: 1199.98px) {
    .font-logo-titolo {
        font-size: 90px !important;
        line-height: 95px !important;
    }
}

/* MD ( ≥768px e <992px ) */
@media (max-width: 991.98px) {
    .font-logo-titolo {
        font-size: 80px !important;
        line-height: 85px !important;
    }

    .text-title {
        font-size: 30px;
    }

    .meeta-sponsor-logo {
        flex: 0 1 calc(33.333% - 20px); /* 3 loghi per riga */
    }

    .custom-section-black .meeta-about-images-2 .custom-position {
        bottom: 40px;
    }

    .meeta-about-content .about-list ul {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* 1) Compatta un po’ le sezioni blend su mobile */
    .blend {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* 2) Alleggerisci i fade: riduci la parte “trasparente”,
        così non scurisce/chiude troppo i testi su mobile */

    /* --- verso il basso --- */
    .fade-bottom-s {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
    }

    .fade-bottom-m {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
    }

    .fade-bottom-l {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
    }

    /* --- verso l’alto --- */
    .fade-top-s {
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
    }

    .fade-top-m {
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
    }

    .fade-top-l {
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
    }

    /* --- doppio fade (alto+basso) più morbido su mobile --- */
    .fade-y-m {
        -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100% );
        mask-image: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100% );
    }

    /* 3) Fallback (browser senza mask-image):
        abbassa l’altezza dei gradienti di chiusura */
    @supports not (mask-image: linear-gradient(black, transparent)) {
        .fade-bottom-m::after,
        .fade-top-m::before {
            height: 90px; /* prima era ~140px */
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 65%, #000 100%);
        }

        .fade-top-m::before {
            background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 65%, #000 100%);
        }
    }
}

/* SM ( ≥576px e <768px ) */
@media (max-width: 767.98px) {
    .font-logo-titolo {
        font-size: 60px;
        line-height: 60px;
    }

    .text-title {
        font-size: 28px;
    }

    .text-description {
        font-size: 20px;
    }

    .meeta-sponsor-logo {
        flex: 0 1 calc(50% - 15px); /* 2 loghi per riga */
    }

    .meeta-hero-section-2 .meeta-hero-content .text {
        line-height: 1.35 !important;
    }

    .meeta-hero-section-2 .meeta-hero-content .header-btn {
        margin-top: 10px;
    }

    .meeta-hero-content .text-description {
        margin-top: 20px !important;
    }
}

/* XS (<576px) */
@media (max-width: 575.98px) {
    .font-logo-titolo {
        font-size: 50px !important;
        line-height: 55px !important;
    }

    .text-title {
        font-size: 24px;
    }

    .text-description {
        font-size: 18px;
    }

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

    .meeta-sponsor-logo {
        flex: 0 1 100%; /* 1 logo per riga */
    }

    .custom-section-black .meeta-about-images-2 .custom-position {
        bottom: 0px;
        right: 50px;
    }
}

.pagina-gallery .gallery-image img {
    width: 375px;
    height: 250px;
}

.page-banner .breadcrumb .breadcrumb-item {
    font-size: 15px;
    font-weight: 500;
}