.offcanvas {
            height: 100vh !important;
        }

        .offcanvas-body {
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .offcanvas-header {
            border-bottom: 1px solid rgba(255,255,255,.1);
        }


        .hero-section{
            z-index:1;
        }

       
        :root {
            --primary: #ffc107;
            --dark: #0f0f0f;
            --dark2: #171717;
            --light: #f5f5f5;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: #fff;
            overflow-x: hidden;
        }

        section {
            padding: 100px 0;
        }

        /* NAVBAR */

        .navbar {
            background: rgba(0, 0, 0, .75);
            backdrop-filter: blur(10px);
        }

        .navbar-brand {
            font-weight: 800;
            letter-spacing: 1px;
        }

        .nav-link {
            color: white !important;
            font-weight: 500;
        }

        .nav-link:hover {
            color: var(--primary) !important;
        }

        /* HERO */

        .hero-section {
            height: 100vh;
            min-height: 700px;            
            background-size: cover;
            position: relative;

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

            text-align: center;
            color: white;
        }

        
        .hero-badge{
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255,255,255,.85);
            position: relative;
            display: inline-flex;
            align-items: center;
            margin-bottom: 22px;
            font-weight: 500;
        }

        .hero-badge::before,
        .hero-badge::after{
            content: "";
            width: 50px;
            height: 1px;
            background: rgba(255,255,255,.35);
            margin: 0 14px;
        }

        /* piccolo “glow” leggerissimo per leggibilità sul video */
        .hero-badge{
            text-shadow: 0 2px 10px rgba(0,0,0,.6);
        }


        .hero-badge{
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255,255,255,.85);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
            text-shadow: 0 2px 10px rgba(0,0,0,.6);
        }

        .hero-badge .dot{
            opacity: .5;
        }

       

        @media (max-width: 768px){
            .hero-badge{
                font-size: 10.5px;
                letter-spacing: 2px;
                gap: 6px;
                white-space: nowrap;
            }

            .hero-badge .dot{
                opacity: .25;
            }

             .hero-content{
                max-width: 80%;
            }
        }

    

        @media (max-width: 360px){
            .hero-badge{
                font-size: 9.5px;
                letter-spacing: 1.5px;
            }
        }


        .hero-content{
            position:relative;
            z-index:2;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
            text-align: center;
        }

       .hero-content h1{
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            font-weight: 800;
            line-height: 1.05;
            letter-spacing: -1px;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 10px 40px rgba(0,0,0,.7);
        }

        .hero-content p{
            font-size: 1.1rem;
            max-width: 650px;
            margin: 20px auto 0;
            color: rgba(255,255,255,.75);
            line-height: 1.6;

            /*padding: 0 10px;*/
            word-wrap: break-word;
            overflow-wrap: break-word;
            width: 80%;
        }



        /* TITOLI */

        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .section-subtitle {
            color: #666;
            margin-bottom: 60px;
        }

        /* CARD */

        .feature-card {
            border: none;
            border-radius: 20px;
            padding: 30px;
            height: 100%;
            transition: .3s;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }

        .feature-card:hover {
            transform: translateY(-8px);
        }

        .feature-card i {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        /* DARK SECTION */

        .dark-section {
            background: var(--dark);
            color: white;
        }

        .dark-section .feature-card {
            background: var(--dark2);
            color: white;
        }

        /* COURSE BOX */

        .course-box {
            background: white;
            border-radius: 25px;
            padding: 40px;
            box-shadow: 0 15px 40px rgba(0,0,0,.08);
        }

        .course-box p {
            margin-bottom: 12px;
        }

        /* INSTRUCTOR */

        .instructor-img {
            width: 100%;
            max-width: 350px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0,0,0,.15);
        }

        /* CTA */

        .cta-section {
            background: linear-gradient(135deg,#000,#222);
            color: white;
            text-align: center;
        }

        .cta-section h2 {
            font-size: 3rem;
            font-weight: 800;
        }

        /* FOOTER */

        footer {
            background: #000;
            color: #999;
            padding: 30px 0;
            text-align: center;
        }

        .btn-warning {
            font-weight: 700;
        }

        .btn-success {
            font-weight: 700;
        }




        .hero-video{
            filter: contrast(1.05) saturate(1.1) brightness(.85);
        }


    .floating-cta{
        position:fixed;
        bottom:20px;
        right:20px;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#25D366;
        display:flex;
        align-items:center;
        justify-content:center;
        color:white;
        font-size:28px;
        z-index:9999;
        box-shadow:0 10px 30px rgba(0,0,0,.3);
        transition: all .25s ease;
        text-decoration:none;
    }
    


    .floating-cta:hover{
        transform:scale(1.1);
    }

    .floating-cta.hide{
        opacity: 0;
        pointer-events: none;
        transform: scale(0.8);
    }   

    html, body {
        overflow-x: hidden;
    }


    .bg-midnightblack-grad{
        background: linear-gradient(to bottom, transparent 0%,#0b0f14 15%,#0b0f14 100%);
    }

    .bg-dark1-grad{
        background: linear-gradient(to bottom, transparent 0%,#0f0f0f 8%,#0f0f0f 100%);
    }

    .hero-section{
                position:relative;
                height:100vh;
                overflow:hidden;
            }

    .hero-video{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .hero-overlay{
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.65);
        z-index:1;
    }

   



.hero-section::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:120px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(11,15,20,0.6),
        rgba(11,15,20,1)
    );
    z-index:2;
}



.instagram i{
    color: transparent;
    background: linear-gradient(#400080, transparent),
                linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
    background-clip: text;
    -webkit-background-clip: text;
}











.hero-section{
    position:relative;
    height:100vh;
    overflow:hidden;
    background:#000;
}

.hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    object-fit:cover;

    opacity:0;
    transition:opacity 1.5s ease;

    transform:scale(1.05); /* leggero zoom cinematico */
}

.hero-section.loaded .hero-slide.active{
    opacity:1;
}


.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

    z-index:1;
     opacity:0;/*opacity:0.85;*/ /* fondamentale per far vedere le immagini sotto */
}

.hero-section.loaded .hero-video{
    opacity:.85;
}

.hero-content{
    position:relative;
    z-index:2;
}






/* PEr LOGO */
.hero-section{
    position:relative;
}


.hero-logo-wrapper{
    position:absolute;
    top: 6%;
    right:30px;

    width:90px;
    height:90px;

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

    border-radius:50%;

    /* NON ruotare questo */
    z-index:10;
}

@media (max-width: 768px){
    .hero-logo-wrapper{
        top: 70px;
        right:10px;
    }
}

.hero-logo-wrapper::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:50%;

    background:conic-gradient(
        #ffcc00,
        #ff7a00,
        #ff3300,
        #ffcc00
    );

    /* lascia solo il bordo */
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 4px),
        #000 calc(100% - 3px)
    );

    animation:ringRotate 6s linear infinite;
}

.hero-logo{
    width:70px;
    height:auto;
    object-fit:contain;

    position:relative;
    z-index:2;
}

@keyframes ringRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}


.hero-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:16px 28px;
    border-radius:999px;

    background:#f4c430;
    color:#111;
    text-decoration:none;

    font-weight:700;
    font-size:1rem;

    transition:.3s ease;
}

.hero-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(244,196,48,.35);
    color:#111;
}



.course-box{

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

    text-align:center;
}

.course-box:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.course-box h4{

    color:#111;

    font-weight:700;

    margin-bottom:20px;

}

.course-box p{

    margin-bottom:10px;

}


.location-badge{

    display:inline-block;

    background:#f4c430;

    color:#111;

    padding:6px 16px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:15px;

}


















#doblone-animation{

    position:fixed;
    inset:0;

    /*background:rgba(0,0,0,.85);*/

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

    z-index:10002;

    pointer-events:none;

    opacity:1;

    transition:opacity .4s ease;
}


.doblone-coin{

    z-index:10002;

    width:180px;
    height:180px;

    position:relative;

    transform-style:preserve-3d;

    perspective:800px;

    opacity:1;
    transition:opacity .7s ease;

}
.doblone-coin.fadeout{
    opacity:0;
}


/*
.doblone-coin.fadeout{
    animation: coinDisappear .4s ease forwards;
}
*/

.doblone-coin.launch{

    animation:coinSpin 2.1s linear forwards;

}

@keyframes coinDisappear{

    from{
        opacity:1;
    }

    to{
        opacity:0;
    }

}


.doblone-coin .side{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:contain;

    backface-visibility:hidden;

}


.doblone-coin .back{

    transform:rotateY(180deg);

}




@keyframes coinSpin{

    0%{
        transform:
            translateY(0)
            rotateX(0deg)
            scale(1.5);/*scale(.8);*/
    }

    /* sale e si avvicina */
    20%{
        transform:
            translateY(-120px)
            rotateX(360deg)
            scale(1);/*scale(1);*/
    }

    /* punto massimo: più vicina */
    45%{
        transform:
            translateY(-330px)
            rotateX(900deg)
            scale(1.20);/*scale(1.15);*/
    }

    /* inizia a ricadere e si allontana */
    70%{
        transform:
            translateY(-150px)
            rotateX(1260deg)
            scale(1.0);/*scale(1.05);*/
    }

    /* quasi atterrata */
    90%{
        transform:
            translateY(20px)
            rotateX(1410deg)
            scale(.75);/*scale(.9);*/
    }

    /* atterra */
    100%{
        transform:
            translateY(0)
            rotateX(1440deg)
            scale(.65);
    }

}


.doblone-modal{

    display:none;

    opacity:0;

    transition:opacity .5s ease;

    position:fixed;

    inset:0;

    background:transparent;

    z-index:10001;

    align-items:center;

    justify-content:center;

}


.doblone-modal.show{

    opacity:1;

}


.doblone-box{

    position:relative;

    /*background:#111;*/


    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("Immagini/SfondoDobloni1.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;


    color:white;

    padding:60px 50px 50px;

    border-radius:25px;

    width:90%;
    max-width:600px;

    min-height:350px;

    text-align:center;

    box-shadow:
        0 0 40px rgba(255,200,0,.25);

    border:1px solid rgba(255,200,0,.4);

}


.doblone-box{

    transform:
        scale(.65)
        translateY(250px);

    opacity:0;

    /*
    transition:
        transform .6s cubic-bezier(.2,1.4,.5,1),
        opacity .3s ease;
        */

}


.doblone-modal.show .doblone-box{

    transform:
        scale(1)
        translateY(0);

    opacity:1;

}


.modal-doblone{

    position:absolute;

    top:-45px;

    left:-45px;

    width:110px;

    height:110px;

    object-fit:contain;

}





@keyframes floatCoin{

    0%,100%{
        transform:rotate(0deg) translateY(0);
    }

    50%{
        transform:rotate(180deg) translateY(-20px);
    }

}


.doblone-close{

    position:absolute;

    top:15px;
    right:20px;

    background:transparent;
    border:none;

    color:#ff3333;

    font-size:38px;
    font-weight:700;

    line-height:1;

    cursor:pointer;

    padding:0;

    z-index:10;

    transition:.3s ease;
}


.doblone-close:hover{

    color:#ff6666;

    transform:scale(1.15) rotate(5deg);

}

#floatingCoin{

    position:fixed;

    right:-20px;
    top:50%;

    transform:translateY(-50%);

    width:80px;

    z-index:9998;

    cursor:pointer;

    display:none;

    animation:coinFloat 3s ease-in-out infinite;

}


#floatingCoin img{

    width:100%;

    transform-style:preserve-3d;

    backface-visibility:hidden;

}



@keyframes coinFloat{

    0%{
        transform:
        translateY(-50%)
        rotateY(-15deg);
    }


    50%{
        transform:
        translateY(-50%)
        rotateY(25deg);
    }


    100%{
        transform:
        translateY(-50%)
        rotateY(-15deg);
    }

}










.coin-shine{
    position:absolute;

    inset:0;

    border-radius:50%;

    overflow:hidden;

    pointer-events:none;
}


.coin-shine::after{

    content:"";

    position:absolute;

    top:-50%;
      left:-100%;

    width:50%;

    height:200%;

 
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );


    transform:rotate(25deg);

}


.coin-shine.active::after{

    animation:shineMove .8s ease forwards;

}


@keyframes shineMove{

    from{
        left:-80%;
    }

    to{
        left:140%;
    }

}

#floatingCoin{
    overflow:hidden;
    border-radius:50%;
    perspective:800px;
    
    border-radius:50%;
}


#doblone-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.80);

    z-index:10000;

    opacity:0;
    display:none;

    transition:opacity .4s ease;

    touch-action:none;
    overscroll-behavior:none;
    overflow:hidden;
}