:root {

    --primary: #F2AA4C;

    --secondary: #101820;

    --white: #ffffff;

    --gray-100: #f3f4f6;

    --gray-200: #e5e7eb;

    --gray-600: #4b5563;

    --max-width: 80rem;

    /* 1280px = 80rem */

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    scroll-behavior: smooth;

}



body {

    font-family: "Poppins", serif;

    line-height: 1.5;

    color: var(--secondary);

    overflow: hidden;

    /* Impedisce lo scroll durante il periodo dello sfondo giallo */

}



/* Il div che copre l'intera pagina con lo sfondo giallo */

.yellow-screen {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    /* Imposta l'altezza al 100% della finestra */

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: var(--primary);

    z-index: 10;

    transition: transform 1s ease-out, height 1s ease-out;

    /* Animazione per il movimento */

}



.slide-up {

    transform: translateY(-100vh);

    /* Muove l'elemento verso l'alto */

    height: 0;

    /* Riduce l'altezza a 0 */

}



/* La classe hidden che nasconde il contenuto */

.hidden {

    display: none;

}



.container {

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 1rem;

    /* 16px = 1rem */

}



/* Header */

.header {

    background-color: var(--secondary);

    padding: 1rem 0;

    /* 16px = 1rem */

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

}



.nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 1rem;

    /* 16px = 1rem */

}



.logo {

    color: var(--primary);

    text-decoration: none;

    font-size: 2rem;

    /* 32px = 2rem */

    font-weight: bold;

}



.nav-links {

    display: flex;

    list-style: none;

    gap: 2rem;

    /* 32px = 2rem */

}



.nav-links a {

    color: var(--white);

    text-decoration: none;

    transition: color 0.3s;

    font-size: 1.25rem;

    /* 20px = 1.25rem */

}



.nav-links a:hover,

.nav-links a.active {

    color: var(--primary);

}



.mobile-menu-btn {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 0.5rem;

    /* 8px = 0.5rem */

}



.mobile-menu-btn span {

    display: block;

    width: 1.5625rem;

    /* 25px = 1.5625rem */

    height: 0.1875rem;

    /* 3px = 0.1875rem */

    background-color: var(--white);

    margin: 0.3125rem 0;

    /* 5px = 0.3125rem */

    transition: 0.3s;

}



/* Hero Section */

.hero {

    position: relative;

    height: 100vh;

    margin-top: -4rem;

    /* 64px = 4rem */

}



.slider {

    height: 110%;

    position: relative;

    overflow: hidden;

}



.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 0.5s ease-in-out;

}



.slide.active {

    opacity: 1;

}



.slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.slide-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

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

}



.slide-caption {

    position: absolute;

    bottom: 2rem;

    /* 32px = 2rem */

    left: 2rem;

    /* 32px = 2rem */

    color: var(--white);

    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);

    z-index: 1;

}



.slider-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

    color: var(--white);

    border: none;

    padding: 1rem;

    /* 16px = 1rem */

    border-radius: 50%;

    /* 1rem = 16px */

    cursor: pointer;

    font-size: 1.5rem;

    /* 24px = 1.5rem */

    transition: background-color 0.3s;

    z-index: 2;

}



.prev {

    left: 1rem;

    /* 16px = 1rem */

}



.next {

    right: 1rem;

    /* 16px = 1rem */

}



.hero-content {

    position: absolute;

    top: 50%;

    left: 50%;

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

    text-align: center;

    color: var(--white);

    z-index: 2;

}



.hero-content h1 {

    font-size: 4rem;

    /* 64px = 4rem */

    margin-bottom: 1rem;

    /* 16px = 1rem */

}



.hero-content p {

    font-size: 1.5rem;

    /* 24px = 1.5rem */

}



/* Features Section */

.features {

    padding: 6rem 0;

    /* 96px = 6rem */

    background-color: var(--gray-100);

}



.features h2 {

    text-align: center;

    font-size: 2.5rem;

    /* 40px = 2.5rem */

    margin-bottom: 1rem;

    /* 16px = 1rem */

    padding-top: 3rem;

    /* 48px = 3rem */

}



.subtitle {

    text-align: center;

    color: var(--gray-600);

    max-width: 50rem;

    /* 800px = 50rem */

    margin: 0 auto 3rem;

    /* 48px = 3rem */

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));

    /* 300px = 18.75rem */

    gap: 2rem;

    /* 32px = 2rem */

}



.feature-card {

    background: var(--white);

    padding: 2rem;

    /* 32px = 2rem */

    border-radius: 0.5rem;

    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);

}



.feature-card h3 {

    color: var(--secondary);

    margin-bottom: 1rem;

    /* 16px = 1rem */

}



.feature-card p {

    color: var(--gray-600);

}



/* About Section */

.about-section {

    background-color: var(--white);

}



.about-hero {

    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),

        url('File/img4.jpg');

    background-size: cover;

    background-position: center;

    height: 37.5rem;

    /* 600px = 37.5rem */

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--white);

    margin-bottom: 4rem;

    /* 64px = 4rem */

}



.about-hero-content h2 {

    font-size: 3rem;

    /* 48px = 3rem */

    margin-bottom: 1rem;

    /* 16px = 1rem */

}



.about-content {

    max-width: 50rem;

    /* 800px = 50rem */

    margin: 0 auto;

}



.about-content h3 {

    font-size: 2rem;

    /* 32px = 2rem */

    margin-bottom: 1.5rem;

    /* 24px = 1.5rem */

    text-align: center;

}



.about-content p {

    margin-bottom: 2rem;

    /* 32px = 2rem */

}



.about-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));

    /* 300px = 18.75rem */

    gap: 2rem;

    /* 32px = 2rem */

    margin-top: 3rem;

    /* 48px = 3rem */

}



.about-card {

    background: var(--secondary);

    color: var(--white);

    padding: 2rem;

    /* 32px = 2rem */

    border-radius: 0.5rem;

    text-align: center;

}



.about-card h3 {

    color: var(--primary);

    margin-bottom: 1rem;

    /* 16px = 1rem */

    font-size: 1.5rem;

    /* 24px = 1.5rem */

}



/* Menu Section */

.menu-section {

    margin-top: 3rem;

    /* 48px = 3rem */

    padding: 6rem 0;

    /* 96px = 6rem */

    background-color: var(--primary);

    color: var(--secondary);

}



.menu-hero {

    text-align: center;

    margin-bottom: 4rem;

    /* 64px = 4rem */

}



.menu-hero h2 {

    font-size: 3rem;

    /* 48px = 3rem */

    margin-bottom: 1rem;

    /* 16px = 1rem */

    color: var(--secondary);

}



.menu-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));

    /* 300px = 18.75rem */

    gap: 2rem;

    /* 32px = 2rem */

    max-width: 62.5rem;

    /* 1000px = 62.5rem */

    margin: 0 auto 4rem;

    /* 64px = 4rem */

}



.menu-card {

    background: var(--white);

    padding: 2rem;

    /* 32px = 2rem */

    border-radius: 0.5rem;

    text-align: center;

    color: var(--secondary);

}



.menu-card h3 {

    font-size: 1.5rem;

    /* 24px = 1.5rem */

    margin-bottom: 1rem;

    /* 16px = 1rem */

}



.download-btn {

    display: inline-flex;

    align-items: center;

    padding: 1rem 2rem;

    /* 16px = 1rem, 32px = 2rem */

    background-color: var(--primary);

    color: var(--secondary);

    text-decoration: none;

    border-radius: 0.5rem;

    font-weight: bold;

    transition: opacity 0.3s;

    border: none;

    cursor: pointer;

    margin-top: 2rem;

    /* 32px = 2rem */

}



.download-btn:hover {

    opacity: 0.9;

}



.menu-info {

    background: var(--white);

    padding: 3rem;

    /* 48px = 3rem */

    border-radius: 0.5rem;

    color: var(--secondary);

    max-width: 62.5rem;

    /* 1000px = 62.5rem */

    margin: 0 auto;

}



.menu-info h3 {

    text-align: center;

    font-size: 2rem;

    /* 32px = 2rem */

    margin-bottom: 2rem;

    /* 32px = 2rem */

}



.info-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));

    /* 250px = 15.625rem */

    gap: 2rem;

    /* 32px = 2rem */

}



.info-section h4 {

    color: var(--secondary);

    margin-bottom: 1rem;

    /* 16px = 1rem */

    font-size: 1.25rem;

    /* 20px = 1.25rem */

}



.info-section ul {

    list-style-position: inside;

    color: var(--gray-600);

}



.info-section li {

    margin-bottom: 0.5rem;

    /* 8px = 0.5rem */

}



/* Footer */

.footer {

    background-color: var(--secondary);

    color: var(--white);

    padding: 4rem 0 2rem;
    
    text-align: center;

    /* 64px = 4rem, 32px = 2rem */

}



.footer a{
    color: var(--primary);
    text-decoration: none;
}



.footer-grid {
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
    
    gap: 2rem;
    
    margin-bottom: 2rem;

    max-width: 1200px;   /* Limita la larghezza totale */
    
    margin-left: auto;   /* Centra a sinistra */
    
    margin-right: auto;  /* Centra a destra */
    
    padding: 0 1rem;     /* Padding laterale per mobile */
}



.footer-section h3 {

    color: var(--primary);

    margin-bottom: 1rem;

    /* 16px = 1rem */

}



.footer-section a {

    color: var(--white);

}



.footer-bottom {

    text-align: center;

    padding-top: 2rem;

    /* 32px = 2rem */

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

}



/* From Uiverse.io by Nawsome */

.wheel-and-hamster {

    --dur: 1s;

    position: relative;

    width: 12em;

    height: 12em;

    font-size: 14px;

}



.wheel,

.hamster,

.hamster div,

.spoke {

    position: absolute;

}



.wheel,

.spoke {

    border-radius: 50%;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.wheel {

    background: radial-gradient(100% 100% at center, hsla(0, 0%, 60%, 0) 47.8%, hsl(0, 0%, 60%) 48%);

    z-index: 2;

}



.hamster {

    animation: hamster var(--dur) ease-in-out infinite;

    top: 50%;

    left: calc(50% - 3.5em);

    width: 7em;

    height: 3.75em;

    transform: rotate(4deg) translate(-0.8em, 1.85em);

    transform-origin: 50% 0;

    z-index: 1;

}



.hamster__head {

    animation: hamsterHead var(--dur) ease-in-out infinite;

    background: hsl(30, 90%, 55%);

    border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;

    box-shadow: 0 -0.25em 0 hsl(30, 90%, 80%) inset,

        0.75em -1.55em 0 hsl(30, 90%, 90%) inset;

    top: 0;

    left: -2em;

    width: 2.75em;

    height: 2.5em;

    transform-origin: 100% 50%;

}



.hamster__ear {

    animation: hamsterEar var(--dur) ease-in-out infinite;

    background: hsl(0, 90%, 85%);

    border-radius: 50%;

    box-shadow: -0.25em 0 hsl(30, 90%, 55%) inset;

    top: -0.25em;

    right: -0.25em;

    width: 0.75em;

    height: 0.75em;

    transform-origin: 50% 75%;

}



.hamster__eye {

    animation: hamsterEye var(--dur) linear infinite;

    background-color: hsl(0, 0%, 0%);

    border-radius: 50%;

    top: 0.375em;

    left: 1.25em;

    width: 0.5em;

    height: 0.5em;

}



.hamster__nose {

    background: hsl(0, 90%, 75%);

    border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;

    top: 0.75em;

    left: 0;

    width: 0.2em;

    height: 0.25em;

}



.hamster__body {

    animation: hamsterBody var(--dur) ease-in-out infinite;

    background: hsl(30, 90%, 90%);

    border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;

    box-shadow: 0.1em 0.75em 0 hsl(30, 90%, 55%) inset,

        0.15em -0.5em 0 hsl(30, 90%, 80%) inset;

    top: 0.25em;

    left: 2em;

    width: 4.5em;

    height: 3em;

    transform-origin: 17% 50%;

    transform-style: preserve-3d;

}



.hamster__limb--fr,

.hamster__limb--fl {

    clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%);

    top: 2em;

    left: 0.5em;

    width: 1em;

    height: 1.5em;

    transform-origin: 50% 0;

}



.hamster__limb--fr {

    animation: hamsterFRLimb var(--dur) linear infinite;

    background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%);

    transform: rotate(15deg) translateZ(-1px);

}



.hamster__limb--fl {

    animation: hamsterFLLimb var(--dur) linear infinite;

    background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%);

    transform: rotate(15deg);

}



.hamster__limb--br,

.hamster__limb--bl {

    border-radius: 0.75em 0.75em 0 0;

    clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0% 30%);

    top: 1em;

    left: 2.8em;

    width: 1.5em;

    height: 2.5em;

    transform-origin: 50% 30%;

}



.hamster__limb--br {

    animation: hamsterBRLimb var(--dur) linear infinite;

    background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%);

    transform: rotate(-25deg) translateZ(-1px);

}



.hamster__limb--bl {

    animation: hamsterBLLimb var(--dur) linear infinite;

    background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%);

    transform: rotate(-25deg);

}



.hamster__tail {

    animation: hamsterTail var(--dur) linear infinite;

    background: hsl(0, 90%, 85%);

    border-radius: 0.25em 50% 50% 0.25em;

    box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset;

    top: 1.5em;

    right: -0.5em;

    width: 1em;

    height: 0.5em;

    transform: rotate(30deg) translateZ(-1px);

    transform-origin: 0.25em 0.25em;

}



.spoke {

    animation: spoke var(--dur) linear infinite;

    background: radial-gradient(100% 100% at center, hsl(0, 0%, 60%) 4.8%, hsla(0, 0%, 60%, 0) 5%),

        linear-gradient(hsla(0, 0%, 55%, 0) 46.9%, hsl(0, 0%, 65%) 47% 52.9%, hsla(0, 0%, 65%, 0) 53%) 50% 50% / 99% 99% no-repeat;

}



/* Animations */

@keyframes hamster {



    from,

    to {

        transform: rotate(4deg) translate(-0.8em, 1.85em);

    }



    50% {

        transform: rotate(0) translate(-0.8em, 1.85em);

    }

}



@keyframes hamsterHead {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(0);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(8deg);

    }

}



@keyframes hamsterEye {



    from,

    90%,

    to {

        transform: scaleY(1);

    }



    95% {

        transform: scaleY(0);

    }

}



@keyframes hamsterEar {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(0);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(12deg);

    }

}



@keyframes hamsterBody {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(0);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(-2deg);

    }

}



@keyframes hamsterFRLimb {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(50deg) translateZ(-1px);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(-30deg) translateZ(-1px);

    }

}



@keyframes hamsterFLLimb {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(-30deg);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(50deg);

    }

}



@keyframes hamsterBRLimb {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(-60deg) translateZ(-1px);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(20deg) translateZ(-1px);

    }

}



@keyframes hamsterBLLimb {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(20deg);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(-60deg);

    }

}



@keyframes hamsterTail {



    from,

    25%,

    50%,

    75%,

    to {

        transform: rotate(30deg) translateZ(-1px);

    }



    12.5%,

    37.5%,

    62.5%,

    87.5% {

        transform: rotate(10deg) translateZ(-1px);

    }

}



@keyframes spoke {

    from {

        transform: rotate(0);

    }



    to {

        transform: rotate(-1turn);

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .mobile-menu-btn {

        display: block;

    }



    .nav-links {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background-color: var(--secondary);

        padding: 1rem;

        flex-direction: column;

        gap: 1rem;

    }



    .nav-links.active {

        display: flex;

    }



    .hero-content h1 {

        font-size: 2.5rem;

    }



    .hero-content p {

        display: none !important;

    }



    .about-hero-content h2 {

        font-size: 2rem;

    }



    .menu-hero h2 {

        font-size: 2rem;

    }

}