@font-face {
  font-family: zuume-cut; /* set name */
  src: url(../fonts/zuume-cut-regular.woff); /* url of the font */
}

body {
    background:  var(--default-bg) !important;   
    overflow: auto;
}

h1, h2, h3, a, p{  font-family: 'zuume-cut-bold', sans-serif; color: var(--default-text);}
p{  font-family: 'zuume-cut', sans-serif; color: var(--default-text);}

 main {
            display: grid;
            grid-template-columns: 45% 55%; /* Divide lo schermo */
            height: 90vh;
            width: 100%;
        }

        /* --- COLONNA SINISTRA (FISSA) --- */
        .left-panel {
            display: flex;
            height: 90vh;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            z-index: 10;
            padding: 0;
        }

        #arrow-color {
            fill: var(--default-text);
            /*transform: rotate(5deg);*/
        }


        .hero-text {
            line-height: 3.5em;
            padding: 150px 0 0 60px;
        }

        .hero-text h1 {
            font-weight: normal;
            font-size: 4rem;
            font-size: 4.2vw;
            line-height: 4vw;
        }
        
        .hero-text h1 span {
            color: var(--secondary-text);
            display: block;

        }

         .hero-text h2 {
            font-weight: normal;
            font-size: 4rem;
            font-size: 4.2vw;
            line-height: 4vw;
            filter: brightness(60%) hue-rotate(-5deg);
        
        }

        .hero-text p {
            font-size: 1.2rem;
            font-size: 1.3vw;
            letter-spacing: 0.1em;
            font-weight: lighter !important;
            line-height: 1.3vw;
            max-width: 80%;
        }

        .hero-desc {
            font-size: 0.9rem;
            line-height: 1.6;
            max-width: 415px;
            /*color: #dcb35c;*/
            opacity: 0.8;
            margin-top: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .content-arrow {
            padding-left: 60px;
        }



/* Navigazione Footer Sinistro */
        
        .big-arrow-left {
            font-size: 4rem;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .big-arrow-left:hover { transform: translateX(-10px); }

        /* --- COLONNA DESTRA (SCROLLABLE) --- */
        .right-panel {
            overflow-y: auto; /* Abilita lo scroll solo qui */
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 150px 40px 40px 20px;
            /* Nascondiamo la scrollbar per estetica */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
        }
        .right-panel::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

        /* Menu Items */
        .menu-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 20px; /* Spazio tra le voci */
        }

        .menu-item {
            line-height: 0.8;
            display: flex;
            align-items: center;
            /* Transizioni fluide */
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s;
            transform-origin: left center; /* Si ingrandisce verso destra */
        }

        .menu-item a{
            text-decoration: none;
            font-family: 'zuume-cut-bold', Oswald, sans-serif;
            font-size: 8rem;
            font-size: 7vw;
            letter-spacing:1px;
        }



        /* Freccia nascosta nel link */
        .menu-arrow {
            font-size: 3rem;
            margin-left: 20px;
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

         .menu-arrow svg{
            transform: rotate(180deg)
         }

        /* --- EFFETTI HOVER --- */
        .menu-item:hover {
            transform: scale(1.15); /* Aumenta dimensioni */
            color: #fff; /* Opzionale: diventa più chiaro */
        }

        .menu-item:hover .menu-arrow {
            opacity: 1; /* Trasparenza richiesta */
            transform: translateX(0); /* Entra da sinistra */
        }

footer{
        background:var(--default-bg);
        background: linear-gradient(360deg,
            color-mix(in srgb, var(--default-bg), transparent 0%) 30%,
            color-mix(in srgb, var(--default-bg), transparent 100%) 100%);
        opacity: 1;
    }


/*Mobile*/

 @media (max-width: 768px) {
	 
	.arrow-container{position:fixed; bottom:100px; left:20px; padding:0 !important;}
	.arrow-container svg{width:24px;}
	 .righr-pannel{}

	 .menu-list {gap: 0px;}

 }