/* -------------------------------------------------------------------------------- */
/* ! Base */
/* -------------------------------------------------------------------------------- */
/* Reset */
*
/* Reset and Global Styles */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    scroll-behavior: smooth;
    font-family: "Poppins" sans-serif;
}

:root {
    /* Tavolozza colore */
    --primary: #000000;
    --light: #ffffff;
    --accent: rgb(160, 2, 55);
    --dark: rgb(26, 26, 26);
    /* animazioni micro */
    --micro: 0.3s cubic-bezier(1, .16, .03, .83);

}


html {
    font-size: 60%;
    overflow-x: hidden;
}

body {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--primary);
    color: var(--light);
}

/* Utility */
.clippy {
    clip-path: circle();
}

.res {
    width: 100%;
    max-width: 290px;
}

.container {
    max-width: 100%;
    padding: 0 20px;
}

/* Grid for Mobile First */
.grid {
    display: grid;
    gap: 10px;
    padding: 10px 20px;
}

.grid>div {
    background-color: var(--dark);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

/* Header */
header.header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 15px;
}

.fixed {
    position: fixed;
    width: 100%;
    /* z-index: 2; */
}

.header__logo {
    width: 50px;
    margin-top: 2px;
    /* Width set for mobile */
}

.header__logo img {
    color: var(--light);
}

.header__menu {
    display: none;
}

.header__menu.open {
    position: fixed;
    /* Assicura che il menu copra l'intera finestra */
    top: 0;
    /* Allinea il menu in alto */
    left: 0;
    /* Allinea il menu a sinistra */
    width: 100%;
    /* Copre tutta la larghezza */
    height: 100%;
    /* Copre tutta l'altezza */
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary);
    z-index: 3;
    /* Assicurati che il menu sia sopra tutto il resto */
}

.site-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 25px;
    padding: 0;
    /* Rimuove il padding che causa lo spostamento */
    margin: 0;
    height: 100%;
    /* Centra il contenitore .site-nav */
    font-size: 2em;
    background: var(--primary);
}

.site-nav li {
    cursor: pointer;
    font-size: 20px;
}

.site-nav li a {
    color: var(--light);
    border-bottom: 3px solid transparent;
    transition: 0.3s ease-in-out;
}

.site-nav li a:hover {
    border-bottom: 3px solid var(--accent);
}

/* Hamburger */
.header__icon {
    position: absolute;
    right: 15px;
    /* Mantiene l'icona allineata a destra */
    top: 0;
    transform: translateY(-50%);
    display: block;
    text-align: center;
    z-index: 4;
}

.icon-hamburger {
    cursor: pointer;
    height: 20px;
    width: 40px;
    position: relative;
    transition: 0.3s cubic-bezier(.57, .97, .58, -0.17);
}

.icon-hamburger.active {
    transform: scale(0.9);
}


.icon-hamburger span {
    background-color: var(--light);
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    border-radius: 20px;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.3s ease-in-out, opacity 0.3s ease-in-out;

}

.icon-hamburger span:nth-child(1) {
    top: 0;
    width: 90%;
    opacity: 1;
}

.icon-hamburger span:nth-child(2),
.icon-hamburger span:nth-child(3) {
    top: 10px;
    width: 90%;
}

.icon-hamburger span:nth-child(4) {
    top: 20px;
    width: 90%;
    opacity: 1;
}

/* Hamburger in open state */
.open .icon-hamburger {
    height: 20px;
    /* Dimensioni originali */
    width: 40px;
    /* Dimensioni originali */
    transform: rotate(180deg) scale(1.2);

}

.open .icon-hamburger span:nth-child(1),
.open .icon-hamburger span:nth-child(4) {
    width: 0;
    opacity: 0.4;
    transform: translateX(-20px);
}

.open .icon-hamburger span:nth-child(2) {
    transform: rotate(45deg) scale(1);
    width: 100%;
    transition-delay: 0.1s;
}

.open .icon-hamburger span:nth-child(3) {
    transform: rotate(-45deg) scale(1);
    width: 100%;
    transition-delay: 0.2s;
}

/* Section Home */
section#home {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 1rem;
    padding: 2rem 5%;
}



/* #home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 20px;
} */



.home-content {
    text-align: center;
    max-width: 600px;
}

#home h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1;
    text-align: center;
}

#home p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
    max-width: 100%;
    text-align: center;
    justify-content: center;
}


.home-img {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 50vw;
    padding: 20px;
}

.home-img img {
    width: 50vw;
    border-radius: 50%;
    box-shadow: 0 0 25px var(--accent);
    cursor: pointer;
    transition: 0.4s ease-in-out;
}

.home-img img:hover {
    box-shadow: 0 0 25px var(--accent),
        0 0 50px var(--accent),
        0 0 100px var(--accent);
}


.social-icons {
    display: flex;
    flex-direction: row;
    /* Mantiene le icone affiancate */
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    border: 2px solid var(--accent);
    font-size: 2rem;
    border-radius: 50%;
    color: var(--accent);
    margin: 3rem 1.5rem 3rem 0;
    margin-top: 3rem;
    margin-bottom: 2rem;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.social-icons a:hover {
    color: var(--light);
    transform: scale(1.3) translateY(-5px);
    box-shadow: 0 0 25px var(--accent);
    background-color: var(--accent);
}

.btn {
    background-color: var(--accent);
    color: var(--light);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
    transition: var(--micro);
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px var(--accent);
}

.btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.btn-group a:nth-of-type(2) {
    background-color: var(--primary);
    color: var(--accent);
    border: 2px solid var(--accent);
    box-shadow: 0 0 25px transparent;
}

.btn-group a:nth-of-type(2):hover {
    box-shadow: 0 0 25px var(--accent);
    background-color: var(--accent);
    color: var(--primary);
}

/* Unione di About e Skills in una singola sezione */
.about-skills-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 5%;
    background: var(--accent);
    color: var(--light);
    border-radius: 3rem;
    border: 5px solid transparent;
    transition: 0.4s ease-in-out;
}

.about-skills-section:hover {
    background-color: var(--primary);
    border: 5px solid var(--accent);
    transform: scale(1.03);
}

.about-box,
.skills-box {
    background: var(--primary);
    padding: 2rem;
    border-radius: 1rem;
    position: relative;
    padding-bottom: 30px;
    transition: transform 0.3s ease-in-out;
    /* Transizione per animazioni */
}

/* Hover Effects per le box */
.about-box:hover,
.skills-box:hover {
    transform: scale(1.03);
    /* Leggero ingrandimento al passaggio del mouse */
    box-shadow: 0 0 25px var(--accent);
}

/* Titoli della sezione */
.about-box h2,
.skills-box h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    text-align: left;
    color: var(--accent);
}

.about-box h3,
.about-box h4 {
    color: var(--light);
    /* Colore del testo */
}

.about-box h3 {
    font-size: 18px;
    border-bottom: 2px solid var(--accent);
}

.about-box h4 {
    padding-bottom: 25px;
    font-size: 15px;
}

.about-box ul,
.skills-info {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.about-box li {
    font-size: 12px;
    padding: 10px;
}

/* Stile per le Skills */
.skill {
    background: var(--primary);
    padding: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
}

.skill img {
    transition: transform 0.3s ease-in-out;
    filter: invert(1);
    /* Invertire il colore dell'immagine per contrasto */
}

.skill img:hover {
    transform: scale(1.1);
}

.skill span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--light);
    margin-top: 10px;
}


/* Skills Section */
#skills {
    border: 3px solid rgb(228, 226, 226);
    border-radius: 3rem;
    margin: 2rem;
    padding: 20px;
    cursor: pointer;
    /* color: var(--light); */
    transition: 0.4s ease-in-out;
}

#skills h2 {
    text-align: center;
    font-size: 3rem;
    padding: 15px;
    color: var(--accent);
}

#skills ul a {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#skills img {
    width: 22rem;
    border-radius: 50%;
    border: 3px solid var(--accent);
    padding: 2px;
    margin-bottom: 2rem;
    box-shadow: 0 0 25px var(--accent);
}

#skills li a {
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 12px;
    border: 2px solid var(--primary);
}

#skills img {
    width: 22rem;
    border-radius: 50%;
    border: 3px solid var(--accent);
    padding: 2px;
    margin-bottom: 1rem;
    box-shadow: 0 0 25px var(--accent);

}

#skills img a:hover {
    opacity: 30%;
    cursor: pointer;
    transition: 0.4s ease-in-out;

}

#skills h3 {
    font-size: 1.6rem;
    padding: 12px;
    text-align: center;
}

#skills a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgb(35, 35, 35);
    padding: 30px;
}

#skills a:hover {
    font-size: 30px;
    color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.4s ease-in-out;
}

/* Contatti Section */
.contatti {
    background-color: var(--primary);
    padding: 4rem 2rem;
    margin: 0 1rem;
}

.contatti h2 {
    margin-bottom: 3rem;
    color: var(--light);
    font-size: 2.5rem;
    text-align: center;
}

.contatti form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 auto;
    max-width: 600px;
}

/* Input group for Nome, Cognome, Email, and Numero di telefono */
.contatti .input-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.contatti .input-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Inputs */
.contatti form input,
.contatti form textarea {
    width: 100%;
    padding: 1rem;
    font-size: 1.6rem;
    color: var(--light);
    background: var(--dark);
    border-radius: 2rem;
    border: 2px solid var(--accent);
}

/* Privacy policy and button */
.contatti form .input-group-2 {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.contatti form .btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.6rem;
    text-align: center;
    background: var(--accent);
    color: var(--primary);
    border-radius: 2rem;
    cursor: pointer;
    transition: 0.3s ease;
}

.contatti form .btn:hover {
    background: var(--light);
    color: var(--accent);
}

.contatti .input-group-2 .input-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    /* Allinea verticalmente il checkbox e il label */
    gap: 1rem;
    /* Spazio tra il checkbox e il label */
    justify-content: center;
}

.contatti .input-group-2 .input-box input[type="checkbox"] {
    margin: 0;
    /* Rimuove qualsiasi margine predefinito sul checkbox */
    width: auto;
    /* Assicura che il checkbox mantenga le dimensioni predefinite */
    cursor: pointer;
}

.contatti .input-group-2 .input-box label {
    font-size: 1.3rem;
    color: var(--light);
    cursor: pointer;

}

.contatti .input-group-2 .input-box label a {
    color: var(--light);
    /* Colore dell'ancora all'interno del label */
    text-decoration: underline;
}

.contatti .input-group-2 .input-box label a:hover {
    color: var(--accent);
}

/* Footer Section */
.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 5% 5%;
    background-color: var(--dark);
    display: grid;
    /* Aggiunto display grid */
    grid-template-columns: 1fr;
    /* Una colonna per impostazione predefinita (mobile first) */
    gap: 20px;
    /* Spazio tra gli elementi */
    text-align: center;
}

.footer .social {
    grid-column: 1 / -1;
    /* Occupa tutta la larghezza della griglia */
    color: var(--accent);
}

.footer .social a {
    font-size: 2rem;
    color: var(--accent);
    border: 2px solid var(--accent);
    width: 4.2rem;
    height: 4.2rem;
    line-height: 4.2rem;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 1rem;
    transition: 0.3s ease-in-out;
}

.footer .social a:hover {
    transform: scale(1.2) translateY(-10px);
    background-color: var(--accent);
    color: var(--primary);
    box-shadow: 0 0 2px var(--accent);
}

.footer ul {
    margin-top: 0;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 0;
    margin-bottom: 0;
    grid-column: 1 / -1;
    /* Occupa tutta la larghezza della griglia */
    list-style: none;
}

.footer .copyright {
    margin-top: 50px;
    font-size: 1rem;
    color: var(--light);
    grid-column: 1 / -1;
    /* Occupa tutta la larghezza della griglia */
    font-size: 10px;
}

.footer ul li {
    display: inline-block;
    padding: 0 10px;
}

.footer ul li a {
    color: var(--light);
    border-bottom: 3px solid transparent;
    transition: 0.3s ease-in-out;
}

.footer ul li a:hover {
    border-bottom: 3px solid var(--accent);
}

.footer a {
    font-size: 12px;
}

/* Stile per la freccia */
.scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    background-color: var(--light);
    color: var(--primary);
    width: 50px;
    /* Imposta una larghezza fissa */
    height: 50px;
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    display: none;
    /* Nascondi la freccia inizialmente */
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1000;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    opacity: 0.6;

}

.scroll-to-top i {
    font-size: 25px;
}

.scroll-to-top:hover {
    background-color: var(--light);
    color: var(--accent);
    transform: scale(1.2) translateY(-10px);
    opacity: 1;
}

/* Stili generali per la pagina dei Lavori */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.container {
    max-width: 100%;
    padding: 0 20px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    position: relative;
}

.header__back {
    display: flex;
    align-items: center;
}


.header__back a {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Colore dell'icona e del testo */
}

.header__back a {
    /* flex-basis: 5%; */
    cursor: pointer;
    color: var(--primary);
    transition: 0.3s ease-in-out;
    font-size: 25px;
    width: 50px;
    /* Dimensioni del cerchio */
    height: 50px;
    /* Dimensioni del cerchio */
    background-color: var(--light);
    /* Colore di sfondo del cerchio */
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.header__back a:hover {
    color: var(--accent);
    transform: scale(1.2) translateY(-10px);
    box-shadow: var(--accent);
    background-color: var(--light);

}

.header__logo_lavori {
    display: none;
}

.header__menu {
    flex-basis: 60%;
    text-align: center;
}

.header__menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__menu nav ul li {
    display: inline-block;
    margin-left: 0;
}

.header__menu nav ul li a {
    text-decoration: none;
    color: var(--light);
    font-weight: 500;
}

.header__icon {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    /* Centra esattamente l'icona */
    right: 15px;
    text-align: right;
    flex-basis: 5%;
}



/* Grid per la sezione dei lavori */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
}

.communication-design-1,
.graphics-2,
.motion-graphic-3,
.motion-graphic-4,
.photography-5 {
    border: 1px solid #ccc;
    padding: 15px;
}

.caption h3 {
    margin-top: 15px;
}

.caption p {
    margin-bottom: 20px;
    line-height: 1.6;
}


.lavori {
    background-color: var(--primary);
    color: var(--light);
    text-align: center;
}

.lavori h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
    color: var(--accent);
}

.lavori .grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.lavori .grid>div {
    background-color: var(--dark);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

/* .lavori .grid>div:hover {
    transform: translateY(-5px);
} */

.lavori .grid>div img {
    width: 60%;
    max-width: 60%;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.lavori .grid>div h3 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.lavori .grid>div p {
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: left;
}

.caption .firme {
    margin-top: 40px;
    font-size: 0.9em;
    text-align: center;
    color: var(--light);
}

.motion-graphic-3,
.motion-graphic-4 {
    width: 100%;
    /* Di base, i video occupano tutta la larghezza disponibile */
    max-width: 500px;
    /* Imposta una larghezza massima su schermi più grandi */
    margin: 0 auto;
    /* Centra i video */
    display: block;
}

.communication-design-1 img {
    width: 80%;
    /* L'immagine si adatta alla larghezza del contenitore */
    max-width: 80%;
    /* Assicura che non superi la larghezza del contenitore */
    height: auto;
    /* Mantiene le proporzioni dell'immagine */
    display: block;
    /* Rimuove lo spazio extra sotto l'immagine */
    margin: 0 auto;
    /* Centra l'immagine se il contenitore ha una larghezza fissa */
}


/* Motion Graphic */

.motion-graphic {
    max-width: 100%;
    box-sizing: border-box;
}

.motion-graphic video {
    width: 100%;
    height: auto;

}

.motion-graphic-3 video {
    width: 100%;
    height: auto;
}

.motion-graphic-3 p {
    margin-bottom: 25px;
}

.motion-graphic-4 video {
    width: 100%;
    height: auto;

}

.motion-graphic video::before {
    content: "";
    display: block;
    background: url('img/copertinaapple.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    /* Rimuovi il poster visibile quando il video è in riproduzione */
}


/* Stili per gli slider */
.slider {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--dark);
    padding: 1rem;
}

.slider .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slides>* {
    min-width: 100%;
    /* Assicura che ogni slide occupi il 100% della larghezza del contenitore */
    box-sizing: border-box;
    /* Considera il padding e il border nella larghezza */
}

.slider img {
    /* width: 100%; */
    border-radius: 0.4rem;
    padding: 10px;
    flex-shrink: 0;
    width: 100%;
    /* Rende le immagini più grandi all'interno del contenitore */
    display: block;
    /* Assicura che le immagini occupino la larghezza del loro contenitore */
}

.slider.graphics-2 .slides,
.slider.photography-5 .slides {
    border-radius: 0.4rem;
    border-color: var(--light);

}

.slider.photography-5 p {
    padding-top: 35px;
}

/* Stile di base per il layout mobile (default) */
.btn-group-01 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 300px;
    margin: auto;

}

.btn02 {
    text-align: center;
    padding: 10px 15px;
    margin-top: 10px;
    background-color: transparent;
    color: white;
    text-decoration: none;
    border: 3px solid var(--light);
    border-radius: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--micro)
}

.btn02:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--accent);
}

.btn01 {
    text-align: center;
    padding: 10px 15px;
    margin-top: 15px;
    background-color: transparent;
    color: white;
    text-decoration: none;
    border: 3px solid var(--light);
    border-radius: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--micro)
}

.btn01:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--accent);
}

.communication-design-1 img {
    width: 40%;
    height: auto;
}

.communication-design-1 .slides img,
.slider.graphics-2 .slides img,
.slider.photography-5 .slides img {
    width: 100%;
    margin: 0;
    display: block;
}

.slider .prev,
.slider .next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 2;
    transition: 0.3s ease;
}

.slider.graphics-2 .prev,
.slider.graphics-2 .next,
.slider.photography-5 .prev,
.slider.photography-5 .next {
    top: 35%;
}

.slider .prev {
    left: 10px;
}

.slider .next {
    right: 10px;
}

.slider .prev:hover,
.slider .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}



/* Footer Lavori Section */
.footer-lavori {
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 5% 5%;
    background-color: var(--dark);
    display: grid;
    /* Aggiunto display grid */
    grid-template-columns: 1fr;
    /* Una colonna per impostazione predefinita (mobile first) */
    gap: 20px;
    /* Spazio tra gli elementi */
    text-align: center;
}

.footer-lavori .social {
    grid-column: 1 / -1;
    /* Occupa tutta la larghezza della griglia */
    color: var(--accent);
}

.footer-lavori .social a {
    font-size: 2rem;
    color: var(--accent);
    border: 2px solid var(--accent);
    width: 4.2rem;
    height: 4.2rem;
    line-height: 4.2rem;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 1rem;
    transition: 0.3s ease-in-out;
}

.footer-lavori .social a:hover {
    transform: scale(1.2) translateY(-10px);
    background-color: var(--accent);
    color: var(--primary);
    box-shadow: 0 0 2px var(--accent);
}

.footer-lavori ul {
    margin-top: 0;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 0;
    grid-column: 1 / -1;
    /* Occupa tutta la larghezza della griglia */
    list-style: none;
}

.footer-lavori .copyright {
    margin-top: 50px;
    font-size: 1rem;
    color: var(--light);
    grid-column: 1 / -1;
    /* Occupa tutta la larghezza della griglia */
}


.footer-lavori ul li {
    display: inline-block;
    padding: 0 10px;
}

.footer-lavori ul li a {
    color: var(--light);
    border-bottom: 3px solid transparent;
    transition: 0.3s ease-in-out;
}

.footer-lavori ul li a:hover {
    border-bottom: 3px solid var(--accent);
}

.footer-lavori a {
    font-size: 12px;
}

.footer-lavori .copyright {
    font-size: 10px;
}



/* Media Queries */
@media (min-width: 768px) {
    html {
        font-size: 62.5%;
    }


    .header__menu {
        display: flex;
        /* Assicura che il menu sia visibile su dispositivi più grandi */
        align-items: center;
        /* Allinea verticalmente gli elementi del menu */
        justify-content: flex-end;
        /* Allinea il menu a destra */
        height: auto;
        /* Imposta l'altezza automatica */
        transform: none;
        /* Rimuove la trasformazione di translate */
        position: static;
        /* Cambia la posizione per l'allineamento a destra */
        width: auto;
        /* Imposta la larghezza automatica */
        padding: 0;
        /* Rimuove il padding aggiunto per mobile */
    }

    .header__icon {
        display: none;
    }


    /* richiamo la classe in base al click */
    .open .header__menu {
        transform: translateY(0);

    }

    .icon-hamburger {
        display: none;
        /* Nascondi l'hamburger */
    }

    .site-nav {
        flex-direction: row;
        align-items: center;
        /* Allinea gli elementi della navigazione verticalmente */
        justify-content: flex-end;
        /* Allinea gli elementi della navigazione a destra */
        gap: 15px;
        padding: 0;

    }

    .site-nav li {
        font-size: 18px;
    }

    .site-nav a {
        color: var(--light);
        position: relative;
        cursor: pointer;

    }



    .site-nav a:hover {
        color: rgb(160, 2, 55);
    }


    .header__logo {
        width: 120px;
        /* Adjusted for larger screens */
    }

    .header__logo {
        z-index: 3;
        width: 300px;

    }

    .header h2 {
        font-size: 20px;
        color: var(--light);
    }

    section#home {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 4rem 10%;
    }

    .home-img {
        width: 80%;
    }

    .btn-group {
        justify-content: flex-start;
    }

    .home-content {
        align-items: baseline;
    }

    #home h1 {
        font-size: 4rem;
        text-align: left;
    }

    #home p {
        font-size: 1.6rem;
        max-width: 1000px;
        text-align: left;
    }

    .social-icons {
        justify-content: flex-start;
        /* Mantiene le icone allineate a sinistra su tablet */
    }


    /* .navbar {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .navbar.active {
        display: flex;
    }

    .navbar a {
        padding: 1rem;
        text-align: center;
        width: 100%;
        display: block;
    } */

    /* Altri stili */
    .navbar {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
    }

    #menu-icon {
        display: none;
    }

    .hamburger {
        display: block;
    }



    .about-section {
        flex-wrap: nowrap;
    }

    .about-skills-section {
        grid-template-columns: 1fr 1fr;
    }

    #skills ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    #skills {
        padding: 25px;
        margin: 3rem;
    }

    #skills img {
        width: 18rem;
    }

    #skills h3 {
        font-size: 2rem;
    }

    #skills a {
        font-size: 30px;
    }

    #skills a:hover {
        font-size: 40px;
    }

    .contatti {
        margin: 0 2rem;
        /* Aumenta il margine per schermi più grandi */
    }

    .contatti form {
        max-width: 700px;
        /* Aumento la larghezza del form per dispositivi più grandi */
    }

    .contatti form .btn {
        width: 50%;
        justify-self: center;
        /* Mantiene il bottone centrato */
    }

    .footer a {
        font-size: 14px;
    }

    .footer .copyright {
        font-size: 11px;
    }

    /* Pagina Lavori */

    .header {
        padding: 15px;
    }

    .header__content {
        padding: 0 15px;
        /* Aggiungi padding laterale per gli schermi più grandi */
    }

    .header__back i {
        font-size: 28px;
        /* Dimensione maggiore per icona */
    }

    .header__logo_lavori img {
        display: none;
        /* Dimensione maggiore per logo */
    }

    .header__menu {
        display: block;
        /* Mostra il menu di navigazione */
    }

    .lavori .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .slider {
        padding: 2rem;
    }

    .slider.graphics-2 .prev,
    .slider.graphics-2 .next,
    .slider.photography-5 .prev,
    .slider.photography-5 .next {
        top: 40%;
    }

    .communication-design-1 img {
        width: 50%;
        height: auto;
    }

    .communication-design-1 .slides img,
    .slider.graphics-2 img,
    .slider.photography-5 img {
        width: 70%;
        /* Aumenta la larghezza delle immagini su tablet */
        margin: 0;
        /* Mantiene le immagini vicine, ma con un margine leggermente maggiore */
    }

    .caption .firme {
        margin-top: 40px;
        font-size: 1em;
        text-align: center;
        color: var(--light);
    }


    .motion-graphic-3,
    .motion-graphic-4 {
        max-width: 90%;
        /* Aumenta la larghezza massima al 80% della larghezza del contenitore */
        width: 80%;
        /* Fissa la larghezza al 80% della larghezza del contenitore */
        margin: 0 auto;
        /* Mantiene i video centrati */
    }

    .footer-lavori {
        padding: 3% 5%;
    }


    .footer-lavori .social a {
        font-size: 2.5rem;
        width: 5rem;
        height: 5rem;
        line-height: 5rem;
    }

    .footer-lavori a {
        font-size: 14px;
    }

    .footer-lavori .copyright {
        font-size: 11px;
    }
}




@media (min-width: 992px) {

    #home {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .header {
        padding: 1.5rem 1.5rem;
    }

    .header__menu {
        /* Personalizza lo stile per schermi fino a 992px */
        font-size: 20px;
        justify-content: flex-end;
    }

    .header__icon {
        display: none;
    }


    .navbar a {
        font-size: 1rem;
    }

    header.header {
        padding: 20px 40px;
        /* More padding for larger screens */
    }

    .site-nav a {
        flex-direction: row;
        display: inline-block;
        justify-content: space-between;
        font-size: 20px;
        /* Slightly larger font size for desktop */
        padding: 10px;
        /* More padding for larger screens */
        color: var(--light);
        position: relative;
        cursor: pointer;

    }

    .site-nav a:hover {
        color: rgb(160, 2, 55);
    }

    .header__logo {
        width: 100px;
        /* Even larger logo for desktop */
    }

    .section {
        padding: 3rem;
    }

    #home {
        padding: 30px 50px 30px 50px;
        flex-direction: row;
    }

    #home h1 {
        font-size: 5rem;
        text-align: left;
    }

    #home p {
        font-size: 1.8rem;
        text-align: left;
    }

    .home-img img {
        width: 90%;
    }

    .social-icons {
        justify-content: flex-start;
        /* Mantiene le icone allineate a sinistra su desktop */
    }

    .about-box h4,
    .about-box p,
    .skills-box ul {
        font-size: 1.6rem;
    }

    .about-skills-section {
        grid-template-columns: 1fr 1fr;
    }

    #skills ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }

    #skills {
        padding: 25px;
        margin: 3rem;
    }

    #skills img {
        width: 18rem;
    }

    #skills h3 {
        font-size: 2rem;
    }

    #skills a {
        font-size: 30px;
    }

    #skills a:hover {
        font-size: 40px;
    }

    .header {
        padding: 20px;
    }

    .header__back i {
        font-size: 32px;
        /* Dimensione ancora maggiore per icona */
    }

    .header__logo_lavori img {
        display: none;
        /* Dimensione ancora maggiore per logo */
    }

    .header__content {
        padding: 0 20px;
        /* Aggiungi padding laterale per schermi molto grandi */
    }

    .contatti {
        margin: 0 3rem;
        /* Ancora più margine sui bordi per desktop */
    }

    .contatti form {
        max-width: 800px;
    }

    .contatti form .btn {
        width: 40%;
        justify-self: center;
    }

    .footer a {
        font-size: 14px;
    }

    .footer .copyright {
        font-size: 11px;
    }

    /* Pagina Lavori */
    .lavori .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .header__menu {
        flex-basis: 75%;
    }

    .header__logo_lavori {
        flex-basis: 10%;
    }

    .header__back,
    .header__icon {
        flex-basis: 5%;
    }

    .motion-graphic-3,
    .motion-graphic-4 {
        max-width: 100%;
        /* Aumenta la larghezza massima al 70% della larghezza del contenitore */
        width: 70%;
        /* Fissa la larghezza al 70% della larghezza del contenitore */
        margin: 0 auto;
        /* Mantiene i video centrati */
    }

    .slider {
        padding: 3rem;
    }

    .slider.graphics-2 .prev,
    .slider.graphics-2 .next,
    .slider.photography-5 .prev,
    .slider.photography-5 .next {
        top: 50%;
    }

    .communication-design-1 img {
        width: 60%;
        height: auto;
    }

    .communication-design-1 .slides img,
    .slider.graphics-2 img,
    .slider.photography-5 img {
        width: 60%;
        /* Riduce leggermente la larghezza per una migliore visualizzazione su desktop */
        margin: 0;
        /* Mantiene la vicinanza tra le immagini con un margine ancora più grande */
    }

    .caption .firme {
        margin: 40px;
        font-size: 1.1em;
        text-align: center;
        color: var(--light);
    }

    .footer-lavori {
        padding: 5% 5%;
    }

    .footer-lavori a {
        font-size: 14px;
    }

    .footer-lavori .copyright {
        font-size: 11px;
    }

}