/********** Template CSS **********/


:root {

    /* =========================
       COLORI SOCIALI
       ========================= */

    --team-primary: #da643a;   /* Arancione basket */
    --team-dark: #02245B;      /* Blu istituzionale */
    --team-secondary: #5F656F; /* Grigio */
    --team-light: #F5F5F5;     /* Bianco */

    /* =========================
       ALIAS TEMPLATE / BOOTSTRAP
       ========================= */

    --primary: #da643a;        /* HEADER ARANCIONE */
    --secondary: #5F656F;
    --dark: #02245B;
    --light: #F5F5F5;

}


.header,
.topbar {
    background-color: var(--team-primary) !important;
}


:root {
    --brand-blue: #02245B;
}









/* =========================
   FONT FACE – LOCALI
   ========================= */

@font-face {
    font-family: "Titillium";
    src: url("../fonts/titillium/TitilliumWeb-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Titillium";
    src: url("../fonts/titillium/TitilliumWeb-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("../fonts/rajdhani/Rajdhani-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================
   FONT GLOBALI
   ========================= */

:root {
    --bs-font-sans-serif: "Titillium", Arial, Helvetica, sans-serif;
}

html, body {
    font-family: "Titillium", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

/* =========================
   TITOLI
   ========================= */

h1 {
    font-family: "Rajdhani", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 2.5rem; /* desktop */
}

h2,
h3,
.display-1,
.display-2,
.display-3 {
    font-family: "Titillium", Arial, sans-serif;
    font-weight: 600;
}

h4,
h5,
h6,
.display-4,
.display-5,
.display-6 {
    font-family: "Titillium", Arial, sans-serif;
    font-weight: 600;
}

/* =========================
   TESTI
   ========================= */

p, span, a, li, small, em, strong,
.card-text, .lead {
    font-family: "Titillium", Arial, sans-serif;
    font-weight: 400;
}

.text-body-lg {
    font-size: 1.1rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    font-weight: 400;
}

.text-body-lg.fw {
    font-weight: 600;
}

.text-meta {
    font-size: 1.04rem;
    font-weight: 400;
}

.text-highlight {
    color: #0346ff;
    font-weight: 600;
}

/* =========================
   COMPONENTI BOOTSTRAP
   ========================= */

.navbar, .navbar a, .btn,
.card, .card-title, .card-text,
.dropdown-item, .list-group-item,
.form-control, .form-select, .table,
.footer, .footer p, .footer h5 {
    font-family: "Titillium", Arial, sans-serif;
}

/* =========================
   CAROUSEL
   ========================= */

#header-carousel {
    font-family: "Titillium", Arial, sans-serif;
}

/* =========================
   BACK TO TOP
   ========================= */

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

/* =========================
   MOBILE RESPONSIVE
   ========================= */

@media (max-width: 768px) {

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    h5, h6 {
        font-size: 1rem;
    }

    .text-body-lg {
        font-size: 1rem;
        line-height: 1.5;
    }

    .text-meta {
        font-size: 0.95rem;
    }

    .back-to-top {
        right: 20px;
        bottom: 20px;
    }
}







                                /* ===============================
                                    TOP BAR CON TAGLIO "A MASCHERA"
                                =============================== */

.top-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;
    background:  var(--primary); /* ARANCIONE SOTTO */
    z-index: 10;
}

/* Fascia blu */

.top-bar-inner {
    position: relative;
    background: var(--dark);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: center; /* CENTRO ORIZZONTALE */
    text-align: center;
    overflow: visible;
}


/* TAGLIO: chiude il blu */
.top-bar-inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: -35px;     /* PRIMA era -60px */
    width: 90px;      /* PRIMA era 120px */
    height: 100%;
    background: var(--primary);
    transform: skewX(-20deg);
    z-index: 2;
}


/* Titolo */
.top-bar h1 {
    
     font-family: 'Rajdhani', sans-serif;  /* Assegna il font al Titolo */
    letter-spacing: 2px;
    margin: 0;
    color: #fff;
    font-size: clamp(65px, 3vw, 36px); /* Cambia dimensione al Titolo */
    font-weight: 700;
    z-index: 3;
}


/* Area logo (arancione, sopra lo sfondo arancione) */
.top-bar-logo {
    background: transparent; /* eredita l'arancione sotto */
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

/* Logo */
.top-bar-logo img {
    height: 100px; /* PRIMA era 70px */
    width: auto;
}

/* Mobile */
@media (max-width: 768px) {
    .top-bar-inner {
        padding: 10px 15px;
    }

    .top-bar-logo img {
        height: 90px;
    }

    .top-bar h1 {
        font-size: 23px;
    }
}


                                        /* ===============================
                                            FINE TOP BAR CON TAGLIO "A MASCHERA"
                                        =============================== */


                                /* ===============================
  SEPARATORE sottile delle sezioni da abbinare a a <div class="section-divider"></div> in HTML
                                =============================== */

/* CSS per il divider con animazione */
.section-divider {
    width: 100%;
    height: 3px;    /* ===== definisce larghezza separatore ===== */
    background: linear-gradient(
        to right,
        #0b1f93 0%,
        #04167c 70%,
        var(--primary) 75%,
        var(--primary) 100%
    );
    margin: 40px 0;
    opacity: 0;                   /* Inizialmente invisibile */
    transform: translateY(20px);  /* Inizia da sotto */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.section-divider.visible {
    opacity: 1;  /* Diventa visibile */
    transform: translateY(0);  /* Scivola verso l’alto */
}




                                    /* ===============================
                                        FINE SEPARATORE sottile delle sezioni 
                                    =============================== */





                        /* ===============================
                            Fascia sottile sfumata blu-arancio 
                          =============================== */
.hero-divider {
    height: 5px;
    background: linear-gradient(90deg, #007bff, #cb4c0f);
    margin: 0;
    padding: 0;
}

/* Hero: rimuove margini extra */
.page-header {
    margin-bottom: 0 !important;  /* necessario per fascia subito attaccata */
}

/* Schede attività */
.activity-img {
    width: 100%;
    height: 200px;        /* altezza fissa, modifica se vuoi dimensione diversa */
    object-fit: cover;    /* taglia/centra l'immagine senza deformarla */
    display: block;
    border-radius: 4px;   /* angoli leggermente arrotondati */
}

/* Altezza immagine su tablet e mobile */
@media (max-width: 768px) {
    .activity-img { height: 150px; }
}
@media (max-width: 576px) {
    .activity-img { height: 120px; }
}

/* UPbar: piccole regolazioni */
.upbar {
    font-size: 0.9rem;
}
.upbar-icon {
    width: 20px;
    height: 20px;
}


                            /* ==============================================
                                FINE  Fascia sottile sfumata blu-arancio 
                            ============================================== */





                                        /* ===============================
                                                SPINNER 
                                        =============================== */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

                                        /* ===============================
                                            FINE     SPINNER 
                                        =============================== */



                                        /* ===============================
                                               BUTTON
                                        =============================== */
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}
                                      /* ===============================
                                           FINE    BUTTON
                                        =============================== */

.topbar-right {
    position: relative;
    background: var(--primary);
}

.topbar-right::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 100%;
    top: 0;
    left: -15px;
    transform: skewX(-20deg);/*** inclinazione barra arancione sopra menù a destra ***/
    background-color: var(--primary);
}



/***** HEADER TOP *****/
.header-top {
    display: flex;
    width: 100%;
    height: 80px;
}

.header-title {
    flex: 1;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: -40px;
    width: 80px;
    height: 100%;
    background: var(--primary);
    transform: skewX(-20deg); /*** inclinazione barra arancione a destra ***/
}

.header-title h1 {
    margin: 0;
    color: #fff;
    font-family: "Titillium", sans-serif;
    font-weight: 700;
    font-size: 26px;
    z-index: 2;
    text-align: center;
}

.header-logo-right {
    background: var(--dark);
    display: flex;
    align-items: center;
    padding: 0 25px;
}

.header-logo-right img {
    height: 60px;
    width: auto;
}

                         /* ===========================
                                NAVBAR
                        =========================== */

.navbar-sport {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* LOGO TONDO */
.navbar-logo {
    height: 70px;
    width: auto;
    object-fit: contain;
}

                            /* MENU */
/* Navbar link principale */

.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}


.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 20px 0;
    color: var(--dark);
    font-size: 21px;     /* più grande */
    font-weight: 400;   /* 700=grassetto 400=normale */

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}



/* ===========================
   STILE MENU DROPDOWN
   =========================== */

/* Dropdown menu */
.navbar .dropdown-menu {
    font-family: "Titillium", sans-serif;   /* Font uniforme */
    font-weight: 400;                        /* Stesso peso dei nav-link */
    font-size: 20px;                         /* Dimensione leggibile */
    min-width: 220px;                        /* Larghezza minima menu */
    padding: 0;                              /* Rimuove padding standard */
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Ombra per il dropdown */
}

/* Voci del menu dropdown */
.navbar .dropdown-item {
    padding: 6px 14px;                      /* Padding simile ai nav-link */
    color: var(--dark);                       /* Colore blu di base */
    
    
    /* ← le prossime 3 righe forzano il bootstrap per le dimensioni del sottomenù */
    font-size: 20px;                         
    font-weight: 400; /* ← stesso 700=grassetto 400=normale dei nav-link */
    font-family: "Titillium", sans-serif;
    /* FINE dele 3 righe che forzano il bootstrap per le dimensioni del sottomenù */
    
    
    transition: background .3s ease, color .3s ease;
    text-align: center;                       /* Allineamento del testo per desktop */
}

/* Hover per le voci del dropdown */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--primary);        /* Sfondo arancione al passaggio del mouse */
    color: #fff;                             /* Testo bianco */
}





             /* ==FRECCIA DROPDOWN NAVBAR=== */


.navbar .dropdown-toggle::after {
    margin-left: 12px;
    vertical-align: middle;

    border-top: 0.55em solid currentColor;
    border-right: 0.55em solid transparent;
    border-left: 0.55em solid transparent;
    border-bottom: 0;

    transform: translateY(1px);
    transition: transform .25s ease;
}

/* Hover reale → il menu è aperto */
.navbar .dropdown:hover > .dropdown-toggle::after {
    transform: rotate(180deg) translateY(-1px);
}



        /* ==FINE FRECCIA DROPDOWN NAVBAR=== */



/* Dropdown mobile / responsive */


@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link.active {
        border-radius: 8px;
    }

    .navbar .dropdown-item.active {
        border-radius: 6px;
    }
}


@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        min-width: 100%;                      /* Occupa tutta la larghezza della navbar */
        font-size: 16px;                      /* Testo leggermente più piccolo per mobile */
        padding: 0;
    }

    .navbar .dropdown-item {
        padding: 12px 16px;                   /* Padding ridotto per mobile */
        text-align: left;                     /* Allineamento del testo per mobile */
    }
}


/* FINE Dropdown mobile / responsive */





/* ===========================
   NAVBAR – HOVER & ACTIVE
   (OVERRIDE BOOTSTRAP)
   =========================== */

/* bordo sempre presente (evita salti) */
.navbar .navbar-nav .nav-link,
.navbar .dropdown-item {
    border: 1.5px solid transparent;
}

/* HOVER */
.navbar .navbar-nav .nav-link:hover {
    background-color: var(--light);
    color: var(--dark);

    border-color: var(--dark);
    border-radius: 12px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--light);
    color: var(--dark);

    border-color: var(--dark);
    border-radius: 10px;
}

/* ACTIVE */
.navbar .navbar-nav .nav-link.active,
.navbar .dropdown-item.active {
    background-color: var(--primary);
    color: #fff !important;

    border-color: var(--dark);
}


                        /* ===========================
                              FINE  NAVBAR
                        =========================== */



/*** Header ***/


                                                         /* =========================
                                                                 HERO FISSA
                                                         ========================= */

.hero-fixed {
    width: 100%;
    height: 35vh;               /* stessa forza visiva del carousel */
    background: url("../img/sfondi/basket%2003%20OK.jpg") center/cover no-repeat;
    position: relative;
}


.hero-divider {
    width: 100%;
    height: 8px;
    background: linear-gradient(
        to right,
        #02245B 0%,
        #0b1f93 49%,
        var(--primary) 51%,
        var(--primary) 100%
    );
}


/* Overlay scuro */
.hero-overlay {
    width: 100%;   /* sposta in orizzontale overlay */
    height: 100%;   /* sposta in verticale overlay */
    background: rgba(8, 8, 8, 0.35);
    display: flex;
    align-items: center;

}

/* Testi */
.hero-subtitle {
    color: var(--light);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 1px;
}

.hero-title {
    color: #fff;
    margin-bottom: 30px;
}

/* Pulsante al'interno di HERO */
.hero-fixed .btn {
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.hero-fixed .btn:hover {
    transform: translateY(-2px);
}
/* FINE Pulsante al'interno di HERO */

/* Animazione ingresso (una sola volta) */
.animate-hero {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.8s ease forwards;
}

.animate-hero.delay-1 {
    animation-delay: 0.3s;
}

.animate-hero.delay-2 {
    animation-delay: 0.6s;
}

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

/* Mobile */
@media (max-width: 768px) {
    .hero-fixed {
        height: 30vh;
    }
}


@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: linear-gradient(to right, rgba(2, 36, 91, 1) 0%, rgba(2, 36, 91, 0) 100%), url(../img/sfondi/palazzetto/Palazzetto01.jpg) center center no-repeat; /* imamgine HERO di tutte le pagine tranne HOME */
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}

/* HEADER end */





/* =========== UPBAR =========== */

.upbar {
    display: flex;
    align-items: center;
    min-height: 50px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 20;

    font-family: "Titillium", sans-serif;
    font-size: 1rem;
}

/* ===============================
   ICONE SOCIAL
================================ */

.upbar-icon {
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-link:hover .upbar-icon {
    transform: scale(1.25);
    filter: brightness(1.2);
}

/* ===============================
   BLOCCO SINISTRO (BLU)
================================ */

.upbar-left {
    background-color: dark;
    display: flex;
    align-items: center;
}

/* ===============================
   BLOCCO DESTRO (ARANCIONE)
================================ */

.upbar-right {
    position: relative;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Diagonale desktop */
.upbar-right::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0;
    width: 22px;
    height: 100%;
    background-color: var(--primary);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

/* Hover desktop  fascia Upbar*/
.upbar-right:hover {
    background-color: #51abef;
    transform: translateX(-2px);
}

.upbar-right:hover::before {
    background-color: rgb(81, 171, 239);
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 767px) {

    .upbar {
        flex-direction: column;   /* ← CHIAVE */
        height: auto;
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .upbar-left,
    .upbar-right {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        min-height: 44px;
        text-align: center;
    }

    /* Linea di separazione */
    .upbar-left {
        border-bottom: 4px solid #fff;
    }

    /* Mobile = niente animazioni */
    .upbar-right {
        font-size: 1rem;
        transform: none;
    }

    .upbar-right:hover {
        transform: none;
    }

    /* Niente diagonale */
    .upbar-right::before {
        display: none;
    }

    /* Icone più piccole */
    .upbar-icon {
        width: 30px;
        height: 30px;
    }

    /* Tap area */
    .upbar a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 6px;
    }
}

/* =========== UPBAR END =========== */




                                                /*** FACTS (Contatori al centro pagina) ***/
.facts {
    position: relative;
    margin: 6rem 0;
    background: var(--team-dark);
}

.facts .border {
    border-color: rgba(255, 255, 255, .1) !important;
}


/*** Features ***/
.btn-play {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 26px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 18px 20px 20px 28px;
    background: var(--primary);
}

@media (max-width: 992px) {
    .btn-play {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: -1px;
    border-left: 16px solid #FFFFFF;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}

.modal-video .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

.modal-video .modal-body {
    position: relative;
    padding: 1px;
}

.modal-video .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 1px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}



/*** Service ***/

/*** Service / Blog Card – versione altezza ridotta ***/
.service-item.blog-card {
    position: relative;
    margin: 65px 0 25px 0;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
    height: 300px;      /* altezza ridotta rispetto a prima */
    min-height: 300px;
    max-height: 320px;
}

/* Immagine superiore – sporge fuori dalla card */
.service-item.blog-card .service-img {
    position: absolute;
    padding: 12px;
    width: 130px;
    height: 130px;
    top: -65px;        /* metà altezza fuori */
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .09);
    z-index: 2;
    overflow: hidden;
}

.service-item.blog-card .service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Contenuto principale */
.service-item.blog-card .service-detail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
}

/* Titolo con animazione hover */
.service-item.blog-card .service-title {
    position: absolute;
    padding: 65px 30px 25px 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    transition: .5s;
}

.service-item.blog-card:hover .service-title {
    top: -100%;
}

/* Testo blu */
.service-item.blog-card .service-text {
    position: absolute;
    overflow: hidden;
    padding: 60px 20px 15px 20px;
    width: 100%;
    height: calc(100% - 60px);
    top: 100%;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
    background: var(--team-dark);
    transition: .5s;
}

.service-item.blog-card:hover .service-text {
    top: 0;
}

/* Linea diagonale tra bianco e blu */
/*** Pulsante “Leggi di più” Blog Card completo ***/
.service-item.blog-card .btn {
    position: absolute;
    min-width: 130px;
    padding: 10px 15px;     
    left: 50%;
    bottom: -25px;       
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;  
    line-height: 1.2;
    color: var(--secondary);
    background: #FFFFFF;
    border: 2px solid #FFA500; /* bordo arancio a riposo */
    box-shadow: 0 0 45px rgba(0, 0, 0, .09);
    z-index: 3;
    transition: all 0.3s ease;
    border-radius: 15px; /* arrotondamento medio */
}

.service-item.blog-card .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
    border: none;  /* bordo scompare in hover */
}

/* Responsive: tablet */
@media (max-width: 991px) {
    .service-item.blog-card .btn {
        min-width: 110px;
        padding: 8px 12px;
        bottom: -22px;
        border-radius: 12px; /* leggermente più piccolo su tablet */
    }
}

/* Responsive: mobile */
@media (max-width: 575px) {
    .service-item.blog-card .btn {
        min-width: 90px;
        padding: 6px 10px;
        bottom: -18px;
        border-radius: 10px; /* arrotondamento ridotto su mobile */
    }
}

/*** FINE Service ***/


                            /* ===============================================
                                PROJECT CAROUSEL – VERSIONE OTTIMIZZATA
                            ================================================ */

.project-carousel {
    position: relative;
    background: var(--team-dark);
    padding: 20px 0;
}

/* ===============================
   ITEM
================================ */

.project-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 300px; /* altezza del CAROUSEL  */
    text-align: center;
}

/* ===============================
   IMMAGINI (GRANDEZZA REALE)
================================ */

.project-item img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    transition: transform 0.35s ease;
}

/* leggero zoom solo estetico */
.project-item:hover img {
    transform: scale(1.04);
}

/* ===============================
   TITOLO
================================ */

.project-item .project-title {
    position: absolute;
    left: 0;
    bottom: -70px;
    width: 100%;
    height: 70px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--dark);
    transition: bottom 0.35s ease;
    z-index: 2;
}

/* ingresso titolo */
.project-item:hover .project-title,
.project-carousel .owl-item.center .project-title {
    bottom: 0;
}

/* decorazione superiore del titolo */
.project-item .project-title::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    width: 100%;
    height: 28px;
    background: var(--dark);
    transform: skewY(-4deg);
}

/* ===============================
   NAVIGAZIONE
================================ */

.project-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.project-carousel:hover .owl-nav {
    opacity: 1;
    pointer-events: auto;
}

.project-carousel .owl-nav .owl-prev,
.project-carousel .owl-nav .owl-next {
    width: 45px;
    height: 45px;
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.project-carousel .owl-nav .owl-prev:hover,
.project-carousel .owl-nav .owl-next:hover {
    transform: scale(1.1);
    background-color: rgb(81, 171, 239);
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 767px) {

    .project-item {
        min-height: 240px;
    }

    .project-item img {
        max-height: 180px;
    }

    /* titolo sempre visibile su mobile */
    .project-item .project-title {
        bottom: 0;
        height: 60px;
    }

    .project-item .project-title::before {
        top: -10px;
        height: 20px;
    }

    /* niente hover zoom su mobile */
    .project-item:hover img {
        transform: none;
    }

    /* frecce meno invasive */
    .project-carousel .owl-nav .owl-prev,
    .project-carousel .owl-nav .owl-next {
        width: 38px;
        height: 38px;
        font-size: 18px;
        margin: 0 10px;
    }
}

                            /* ===============================================
                                FINE PROJECT CAROUSEL – VERSIONE OTTIMIZZATA
                            ================================================ */

/*** Team ***/
.team-item .team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    display: flex;
    align-items: center;
    background: var(--primary);
    transition: .5s;
}

.team-item:hover .team-social {
    left: 0;
}

.bg-team-dark {
    background-color: var(--team-dark);
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
    z-index: 1;
}

.testimonial-carousel:hover .owl-nav {
    width: 300px;
    opacity: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    color: var(--primary);
    font-size: 45px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}

.testimonial-carousel .testimonial-img img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel .testimonial-img .btn-square {
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
}

.testimonial-carousel .owl-item .testimonial-text {
    margin-bottom: 30px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transform: scale(.8);
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    transform: scale(1);
}


                                       /* =========================
                                                FOOTER
                                        ========================= */


.container-fluid.footer {
    background-color: var(--brand-blue);
}

.footer {
    color: #32fd04;
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #aeb9af;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    color: var(--light);
    content: "\f434";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}



.footer .btn.btn-link {
    white-space: nowrap;
}

.footer a {
    color: #ffffff;     /* cambia i colori del testo nei sottomenù del footer */
    transition: all 0.3s ease;
}

.footer a:hover {
    color: var(--team-primary);
    text-decoration: underline;
}

/* Dropdown menu footer */
.footer .dropdown-menu {
    background-color: var(--team-secondary);
}

.footer .dropdown-item:hover {
    background-color: var(--team-primary);
    color:var(--team-dark);
}


/* Pulsanti social */
.btn-square.btn-primary {
    background-color: primary;
    border-color: primary;
}

.btn-square.btn-primary:hover {
    background-color: var(--team-light);
    border-color: var(--team-dark);
}

/* Testo */
.text-white { color: var(--light) !important; }
.text-light { color: #f5f5f5 !important; }


.copyright {
    color: #d8ddd7;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

                                                 /* =========================
                                                        FINE FOOTER
                                                ========================= */










/* ALTEZZA CAROUSEL */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item {
    height: 50vh; /* metà schermo */
}

/* IMMAGINI */
#header-carousel .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* MOBILE: leggermente più compatto */
@media (max-width: 768px) {
    #header-carousel,
    #header-carousel .carousel-inner,
    #header-carousel .carousel-item {
        height: 40vh;
    }
}





/* =========================
   SPONSOR TICKER DEFINITIVO
   ========================= */

:root {
    --team-primary:#da643a;
    --ticker-speed: 22s;
}

/* SEZIONE */
.sponsor-section {
    background: #f8f9fa;
    border-bottom: 3px solid var(--team-primary);
    padding: 22px 0;
    overflow: hidden;
}

.sponsor-section {
    box-shadow: 0 -6px 15px rgba(0,0,0,0.05);
}


.sponsor-ticker img {
    height: 70px;
    padding: 0 35px;
    object-fit: contain;
    transition: transform .25s ease, opacity .25s ease;
}


/* TICKER */
/* =========================
   SPONSOR TICKER – CLEAN
   ========================= */

.sponsor-ticker {
    overflow: hidden;
    width: 100%;
}

/* Stato normale */
.sponsor-ticker img {
    transition: transform .25s ease, opacity .25s ease;
}

/* De-enfasi quando il mouse entra nel ticker */
.sponsor-ticker:hover img {
    opacity: 0.45;
}

/* Logo attivo */
.sponsor-ticker a:hover img {
    opacity: 1;
    transform: scale(1.06);
}



/* TRACK */
.ticker-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: ticker-scroll var(--ticker-speed) linear infinite;
}

/* PAUSA SOLO QUANDO PASSI SU UN LOGO */
.ticker-track a:hover ~ .ticker-track,
.ticker-track:hover {
    animation-play-state: paused;
}

/* LINK */
.ticker-track a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LOGHI – COLORI REALI SEMPRE */
.ticker-track img {
    max-height: 65px;
    width: auto;
    filter: none !important;
    opacity: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* HOVER LOGO – NESSUN IMPATTO SUL FLUSSO */
.ticker-track a:hover img {
    transform: scale(1.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 2;
}

/* ANIMAZIONE CONTINUA */
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* MOBILE */
@media (max-width: 768px) {
    .ticker-track {
        gap: 40px;
    }
    .ticker-track img {
        max-height: 50px;
    }
}



/* ===========================
   DROPDOWN CON VOCE ATTIVA
   =========================== */



/* Voce principale del dropdown diventa attiva se contiene una voce attiva */
.navbar .nav-item.dropdown:has(.dropdown-item.active) > .nav-link {
    background-color: var(--primary);
    color: #fff;
}

/* Freccia coerente */
.navbar .nav-item.dropdown:has(.dropdown-item.active) > .nav-link::after {
    border-top-color: currentColor;
}

/* ===========================
   STATO ACTIVE UNIFICATO – BORDI STONDATI
   =========================== */

/* Link principale del menu o dropdown quando attivo */
.navbar .nav-item > .nav-link.active {
    background-color: var(--primary);
    color: #fff;
    border-radius: 8px;        /* angoli stondati */
    padding-left: 15px;        /* aggiustamento padding */
    padding-right: 15px;
    display: inline-block;      /* fondamentale per vedere border-radius */
}

/* Freccia coerente per i dropdown */
.navbar .nav-item.dropdown > .nav-link.active::after {
    border-top-color: currentColor;
}

/* Contenitore dropdown arrotondato */
.navbar .dropdown-menu {
    border-radius: 10px;       /* arrotonda il bordo del menu */
    padding: 8px 0;            /* spazio interno per vedere gli angoli */
}

/* ===========================
   LINK PRINCIPALE ATTIVO CON ANGOLI STONDATI
   =========================== */

/* Menu principale attivo con angoli stondati visibili */
.navbar .nav-item > .nav-link.active {
    background-color: var(--primary);
    color: #fff;
    border-radius: 12px;       /* angoli stondati */
    display: inline-flex;       /* fondamentale per border-radius */
    padding: 10px 18px;
    transition: background-color .3s ease, color .3s ease;
    width: auto;                /* evita full width di bootstrap */
}


/* ===========================
   CONTENITORE DROPDOWN
   =========================== */
.navbar .dropdown-menu {
    border-radius: 12px;        /* arrotonda anche il contenitore dropdown */
    padding: 6px;               /* lascia spazio per margini interni */
    overflow: hidden;            /* evita che il background delle voci escano fuori */
    box-sizing: border-box;
}

/* ===VOCI DROPDOWN ATTIVE CON ANGOLI STONDATI=== */
.navbar .dropdown-item.active {
    background-color: var(--primary);
    color: #fff;
    border-radius: 6px;        /* arrotondamento visibile */
             
    transition: background-color .3s ease, color .3s ease;
    box-sizing: border-box;
    

    outline: 1.5px solid var(--dark);  /* spazio interno per vedere gli angoli */
    outline-offset: -1.5px;

}




/* Hover sulle voci dropdown */

.navbar .dropdown-item:hover {
    border-radius: 10px;
}
.navbar .dropdown-item:focus {
    background-color: var(--primary);
    color: #fff;
    border-radius: 6px;        /* mantiene arrotondamento anche in hover */
}

/* ===== MENU PRINCIPALE: ACTIVE stondato ===== */

.navbar .navbar-nav .nav-link {
    position: relative;
    padding: 10px 18px;
    border-radius: 10px;
    box-sizing: border-box;
}

/* stato ACTIVE */
.navbar .navbar-nav .nav-link.active {
    background-color: var(--primary);
    color: #fff !important;

    border: 1.5px solid var(--dark);
    border-radius: 12px;
}

/* ===========================
   NAVBAR – ANIMAZIONI REFINED
   =========================== */

/* BASE – niente salti */
.navbar .navbar-nav .nav-link,
.navbar .dropdown-item {
    border: 1.5px solid transparent;
    box-sizing: border-box;

    transition:
        border-color .25s ease,
        background-color .25s ease,
        color .2s ease,
        transform .2s ease;
}

/* ===== HOVER ===== */
.navbar .navbar-nav .nav-link:hover,
.navbar .dropdown-item:hover {
    background-color: var(--light);
    color: var(--dark);

    border-color: var(--dark);
    transform: scale(1.02);
}

/* ===== ACTIVE ===== */
.navbar .navbar-nav .nav-link.active,
.navbar .dropdown-item.active {
    background-color: var(--primary);
    color: #fff !important;

    outline: 1.5px solid var(--dark);
    outline-offset: -1.5px;

    animation: activeFade .25s ease-out;
}

/* ===== ANIMAZIONE ACTIVE ===== */
@keyframes activeFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link:hover,
    .navbar .dropdown-item:hover {
        transform: none;
    }
}

                                /* ===========================
                                        Google MAPS
                                =========================== */

.google-maps {
  position: relative;
  padding-bottom: 50%; /* Definisco l'aspect ratio. */
  height: 0;
  overflow: hidden;
}
.google-maps > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

                                /* ===========================
                                    FINE Google MAPS
                                =========================== */




                                /* ================================
                                    ALERT PERSONALIZZATI CONTATTI
                                ================================ */

.custom-alert {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
    animation: slideFadeIn 0.6s ease forwards;
}

.alert-success {
    background-color: #0d3b66;   /* blu sociale */
    color: #ffffff;
    border-left: 6px solid #f28c28; /* arancione */
}

.alert-error {
    background-color: #f28c28;   /* arancione */
    color: #ffffff;
    border-left: 6px solid #0d3b66; /* blu */
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Migliore leggibilità su mobile */
@media (max-width: 768px) {
    .custom-alert {
        font-size: 15px;
        padding: 14px;
    }
}
                                /* ====================================
                                    FINE ALERT PERSONALIZZATI CONTATTI
                                ====================================== */


                                /* ====================================
                                    PER NASCONDERE PARTE DEL CONTENUTO DI UNA PAGINA
                                ====================================== */
.nascosto-ma-spazio {
  visibility: hidden;
}
                                /* ====================================
                                 Fine    PER NASCONDERE PARTE DEL CONTENUTO DI UNA PAGINA
                                ====================================== */




                               /* ====================================
                              Allineamento immagini in pagina SOCIETA'
                                ====================================== */

/* ================================
   ABOUT SECTION – IMMAGINI FISSE
   ================================ */

.about-img-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* BOX a rapporto fisso */
.about-img-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;   /* CAMBIA QUI IL RAPPORTO */
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}

/* Immagine adattata */
.about-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Allineamento immagini al titolo */
@media (min-width: 992px) {
    .about-img-wrapper {
        margin-top: 72px;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .about-img-wrapper {
        margin-bottom: 30px;
    }

    .about-img-box {
        max-width: 100%;
    }
}


                                /* ====================================
                             FINE Allineamento immagini in pagina SOCIETA'
                                ====================================== */

/* Fix dropdown navbar (sottocartelle + sticky-top) */
.navbar,
.navbar .container-fluid {
    overflow: visible !important;
}

.dropdown-menu {
    z-index: 1050;
}

/* Fix dropdown navbar SOLO per sticky-top */
.navbar.sticky-top {
    overflow: visible !important;
}

/* Garantisce visibilità del menu */
.navbar .dropdown-menu {
    z-index: 2000;
}
/* FINE Fix dropdown navbar (sottocartelle + sticky-top) */


/* CORREZIONE PER ELEMENTI FUORI LAYOUT SU MOBILE : esempio "Pulsante TORNA SU" */
/* =========================================================
   FIX OVERFLOW ORIZZONTALE (OBBLIGATORIO)
   ========================================================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================================
   UPBAR – FIX MOBILE
   ========================================================= */
@media (max-width: 768px) {

    .upbar {
        flex-direction: column;
        width: 100%;
    }

    .upbar-left {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .upbar-left span {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .upbar-right {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =========================================================
   PAGE HEADER – PREVENZIONE SCROLL LATERALE
   ========================================================= */
.page-header {
    overflow-x: hidden;
}

/* =========================================================
   BACK TO TOP – POSIZIONE SICURA
   ========================================================= */
.back-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;
}

@media (max-width: 576px) {
    .back-to-top {
        right: 10px;
        bottom: 10px;
    }
}
/* Fine CORREZIONE PER ELEMENTI FUORI LAYOUT SU MOBILE : esempio "Pulsante TORNA SU" */



/* =========================================================
   Widget TAGEMBED
========================================================= */

.instagram-placeholder {
    border: 2px dashed var(--team-secondary);
    padding: 40px 24px;
    text-align: center;
    border-radius: 10px;
    background: var(--team-light);
    max-width: 100%;
    margin: 0 auto;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.instagram-placeholder p {
    margin-bottom: 20px;
    color: var(--team-secondary);
    font-size: 16px;
    line-height: 1.5;
    max-width: 520px;
}

.instagram-placeholder button {
    width: 100%;
    max-width: 320px;
    background: linear-gradient(135deg, #da643a, #ff8a3d);
    color: #fff;
    border: none;
    padding: 18px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* 🟧 Hover con specificità maggiore */
.instagram-placeholder button:hover,
.instagram-placeholder button:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #c85a31, #ff7a25) !important;
}

/* 🟧 Active con specificità maggiore */
.instagram-placeholder button:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile */
@media (max-width: 576px) {
    .instagram-placeholder {
        padding: 30px 18px;
        min-height: 260px;
    }

    .instagram-placeholder p {
        font-size: 15px;
    }

    .instagram-placeholder button {
        padding: 16px 20px;
        font-size: 17px;
    }
}

/* SOLO DESKTOP: testo più grande e su una riga */
@media (min-width: 992px) {
    .instagram-placeholder p.instagram-info {
        font-size: 20px !important;
        white-space: nowrap !important;
    }
}

/* Hover blu garantito */
.instagram-placeholder button:hover,
.instagram-placeholder button:focus {
    background-image: linear-gradient(135deg, #02245B, #01417a) !important;
    background-color: #02245B !important;
}




.instagram-placeholder {
    padding: 40px;
    border: 1px dashed #ccc;
    background: #f9f9f9;
    text-align: center;
}
.instagram-placeholder button {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}


.easter-hero-clean {
    position: relative;
    width: 100%;
    padding: 60px 20px;
    border-radius: 15px;
    margin: 40px 0;
    overflow: hidden;

    /* 🔥 IMMAGINE + COLORE INSIEME (senza overlay) */
    background:
        linear-gradient(rgba(13,43,69,0.75), rgba(13,43,69,0.35)),
        url('../img/banner/bannerpasqua17.jpg');

    background-size: cover;
    background-position: right;
}

/* contenuto */
.easter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

.easter-left {
    flex: 0 0 180px;
    text-align: center;
}

.easter-logo {
    width: 150px;
    filter: drop-shadow(0 5px 20px rgba(0,0,0,0.6));
}

.easter-right {
    color: #fff;
    max-width: 600px;
}

.easter-right h1 {
    font-size: 40px;
    margin-bottom: 15px;
}

.easter-right p {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.easter-sign {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

.team-name {
    display: inline-block;
    margin-top: 10px;
    font-size: 20px;
    background: rgba(255,255,255,0.9);
    color: #0d2b45;
    padding: 6px 12px;
    border-radius: 8px;
}

/* 🐣 elementi decorativi */
.easter-hero-clean::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 240px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    bottom: -80px;
    left: -40px;
}

/* 📱 RESPONSIVE */
@media (max-width: 768px) {
    .easter-container {
        flex-direction: column;
        text-align: center;
    }

    .easter-logo {
        width: 110px;
        margin-bottom: 15px;
    }

    .easter-right h1 {
        font-size: 28px;
    }

    .easter-right p {
        font-size: 16px;
    }
}



/* ==========================================================================
   BANNER COMUNICATI (ATTIVITÀ) - CENTRATURA E GESTIONE RESPONSIVE
   ========================================================================== */

/* Contenitore principale della sezione */
.banner-hero {
    width: 100%;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container interno */
.banner-container {
    width: 100%;
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}

/* Forziamo la centratura assoluta di testi e media */
.banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centra gli elementi figli in orizzontale */
    justify-content: center;
    text-align: center;     /* Centra i testi internamente (h1, p, ecc.) */
    width: 100%;
}

/* Spaziature del titolo */
.banner-title {
    margin-bottom: 30px;
}

.banner-title h1 {
    margin: 0;
    font-family: "Rajdhani", Arial, sans-serif;
    font-weight: 700;
    color: var(--team-dark); /* Riprende il blu istituzionale dei tuoi titoli */
}

/* Box dei media (Contiene il tag <picture>) */
.banner-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Regole per l'immagine WebP (Sia Desktop che Mobile) */
.banner-webp-nuovo {
    display: block;
    max-width: 100%;        /* Impedisce all'immagine di uscire dallo schermo */
    height: auto;           /* Mantiene intatte le proporzioni natali */
    border-radius: 8px;     /* Angoli arrotondati coerenti con il resto del sito */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Dà profondità al banner */
    transition: transform 0.3s ease;
}

/* Piccolo effetto al passaggio del mouse su Desktop */
.banner-webp-nuovo:hover {
    transform: scale(1.01);
}

/* ==========================================================================
   VERSIONE MOBILE REATTIVA (Sotto i 768px)
   ========================================================================== */
@media (max-width: 767px) {
    .banner-hero {
        padding: 40px 0; /* Riduce il padding verticale sugli smartphone */
    }

    .banner-title {
        margin-bottom: 20px;
    }

    .banner-webp-nuovo {
        border-radius: 6px; /* Arrotondamento leggermente minore sui display piccoli */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    }
}


/* ==========================================================================
  Comunicato prima delle ATTIVITA'
   ========================================================================== */
/* ====================================
   BANNER: DOCUMENTO ASSEMBLEA (immagine)
   ==================================== */

.banner-doc {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.banner-doc-img {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0,0,0,0.15);
}

@media (max-width: 576px) {
    .banner-doc-img {
        max-width: 100%;
    }
}

/* ====================================
   FINE BANNER: DOCUMENTO ASSEMBLEA
   ==================================== */