/* ============================================
   RESET
============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   VARIABILI
============================================ */
:root {
    --text-color: #222222;
    --border-color: #B8B8BA;
    --font-main: 'Satoshi', sans-serif;
    --font-display: 'Clash Display', sans-serif;
    --margin-desktop: 96px;
    --gutter-desktop: 24px;
    --columns-desktop: 12;
    --margin-mobile: 16px;
    --gutter-mobile: 16px;
    --columns-mobile: 4;
    --navbar-height: 80px;
}

/* ============================================
   BASE
============================================ */
body {
    font-family: var(--font-main);
    color: var(--text-color);
}

body.no-scroll {
    overflow: hidden;
}

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

ul {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

/* ============================================
   HERO SECTION
============================================ */
.hero {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-rows: var(--navbar-height) 1fr auto;
    background-color: #ffffff;
    overflow: hidden;
}

/* ============================================
   NAVBAR
============================================ */
.navbar {
    width: 100%;
    height: var(--navbar-height);
}

.nav-container {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    padding: 0 var(--margin-desktop);
    height: 100%;
    align-items: center;
}

.logo {
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
    height: 100%;
}

.logo img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.nav-links {
    grid-column: 8 / 13;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-links li a {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    transition: opacity 0.3s ease;
}

.nav-links li a:hover {
    opacity: 0.6;
}

/* ===== Bottone Contact ===== */
.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-contact:hover {
    background-color: var(--text-color);
    color: #ffffff;
    border-color: var(--text-color);
}

.btn-contact svg {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

/* ===== Burger (nascosto desktop) ===== */
.burger {
    display: none;
}

/* ===== Mobile Menu Overlay ===== */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.mobile-menu.active {
    display: flex;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.mobile-nav-links li a {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-color);
}

/* ============================================
   HERO CONTENT
============================================ */
.hero-content {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    padding: 0 var(--margin-desktop);
    align-items: center;
    min-height: 0;
}

.hero-text {
    grid-column: 1 / 6;
    align-self: center;
}

.hero-role {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 50px;
}

.hero-name {
    font-family: var(--font-display);
    font-size: clamp(72px, 8vw, 110px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -3px;
    margin-bottom: 50px;
}

.first-name,
.last-name {
    display: inline;
}

.hero-caption {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color);
}

.hero-caption strong {
    font-weight: 700;
}

.hero-visual {
    grid-column: 7 / 13;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hero-visual img {
    width: 100%;
    max-width: 780px;
    height: auto;
    object-fit: contain;
}

.hero-liquid {
  position: relative;
  width: min(82vw, 860px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: visible;
  user-select: none;
}

.blob-base {
  position: relative;
  width: 100%;
  will-change: transform;
  animation: ambientFloat 10s cubic-bezier(0.37, 0, 0.2, 1) infinite;
}

.blob-metal {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform, filter;
  transform-origin: center center;
  filter:
    drop-shadow(0 28px 40px rgba(0, 0, 0, 0.16))
    drop-shadow(0 10px 24px rgba(255, 255, 255, 0.08));
}

@keyframes ambientFloat {
  0% {
    transform: translate3d(0px, 0px, 0px) rotate(-0.8deg) scale(1);
  }
  20% {
    transform: translate3d(10px, -8px, 0px) rotate(0.35deg) scale(1.01);
  }
  45% {
    transform: translate3d(-8px, -16px, 0px) rotate(-0.25deg) scale(1.018);
  }
  75% {
    transform: translate3d(-12px, 8px, 0px) rotate(0.45deg) scale(1.008);
  }
  100% {
    transform: translate3d(0px, 0px, 0px) rotate(-0.8deg) scale(1);
  }
}

/* solo desktop */
@media (hover: hover) and (pointer: fine) {
  .hero-liquid {
    cursor: default;
  }
}

/* ============================================
   HERO BOTTOM
============================================ */
.hero-bottom {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    padding: 0 var(--margin-desktop);
    padding-bottom: 32px;
    align-items: end;
}

.hero-bottom-left {
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    gap: 55px;
}

.hero-bottom-right {
    grid-column: 10 / 13;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    gap: 16px;
}

.btn-view-work {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background-color: var(--text-color);
    color: #ffffff;
    border-radius: 0;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.btn-view-work:hover {
    opacity: 0.8;
    color: #ffffff;
}

.btn-view-work svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.btn-about-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.btn-about-me:hover {
    opacity: 0.6;
}

.btn-about-me svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.hero-location {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-available {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: var(--text-color);
    border-radius: 50%;
    flex-shrink: 0;
}

/* About Me */
.btn-about-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.btn-about-me:hover {
    opacity: 0.6;
}

.btn-about-me svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* ===== Destra ===== */
.hero-bottom-right {
    grid-column: 10 / 13;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.hero-location {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-available {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: var(--text-color);
    border-radius: 50%;
    flex-shrink: 0;
}
/* ============================================
   ABOUT ME SECTION — DESKTOP
============================================ */
.about {
    padding-top: 100px;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
}
.about-container {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    padding: 0 var(--margin-desktop);
    grid-template-rows: auto 1fr;          /* riga 1: titolo, riga 2: contenuto */
}

.about-left {
    grid-column: 1 / 7;
    grid-row: 1 / 3;                       /* occupa entrambe le righe */
}

/* ===== Sinistra: Testi (col 1 → inizio col 7) ===== */
.about-left {
    grid-column: 1 / 7;
}

.about-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 80px;
}

.about-star-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.about-text-main {
    font-family: var(--font-main);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 32px;
}

.about-text-secondary {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 24px;
}

.about-text-motto {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-color);
}

.about-star-image img {
    width: 200px;
    height: 237px;
    object-fit: contain;
}

.about-star-image img {
    width: 200px;
    height: 237px;
    max-width: none;
    object-fit: contain;
}

/* ===== Destra: Aggettivi (col 8 → 12) ===== */

.about-skills {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    padding-left: 65px;
    display: flex;
    flex-direction: column;

    /* Offset per partire allo stesso livello del testo principale */
    padding-top: 110px;                    /* titolo (~16px + line-height) + 80px margin */
    padding-bottom: 5px;                   /* si allinea al motto in basso */
    justify-content: space-between;
}

.skill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.skill-name {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
}

.skill-line {
    width: 22px;
    height: 1px;
    background-color: var(--text-color);
    flex-shrink: 0;
    margin-left: 16px;
}
/* ============================================
   SKILLS & LANGUAGES — DESKTOP
============================================ */
/* ============================================
   SKILLS & LANGUAGES — DESKTOP
============================================ */
.skills-section {
    padding-top: 200px;
    background-color: #ffffff;
}

.skills-container {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    padding: 0 var(--margin-desktop);
    position: relative;
    grid-template-rows: 1fr;            /* forza una sola riga */
}
/* ===== SKILLS LEFT (col 1–5) ===== */
.skills-left {
    grid-column: 1 / 5;
    grid-row: 1;                        /* forza riga 1 */
}


/* SKILLS ✦ e WHAT I DO sulla stessa riga, allineati in basso */
.skills-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 80px;
}

.skills-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-right: auto;             /* spinge SKILLS a sinistra */
}

.section-star {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.skills-subtitle {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(34, 34, 34, 0.65);
    text-transform: uppercase;
    margin-right: auto;             /* centra rispetto alla metà sinistra */
}

/* SKILLS ✦ e WHAT I DO sulla stessa riga */
.skills-header {
    display: grid;
    grid-template-columns: auto 1fr;    /* col 1: SKILLS, col 2: WHAT I DO */
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 80px;
}

.skills-title {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.skills-subtitle {
    grid-column: 2;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(34, 34, 34, 0.65);
    text-transform: uppercase;
    justify-self: start;            /* allineato a sinistra nella sua colonna */
}


/* Bottoni Skills — griglia a 2 colonne */
/* Bottoni — indentati per allinearsi con WHAT I DO */
.skills-buttons {
    display: grid;
    grid-template-columns: auto 1fr;    /* stesse proporzioni del header */
    gap: 24px 115px;                      /* 24px verticale, 40px orizzontale */
}

/* Tutte le righe partono dalla colonna 2 (dove sta WHAT I DO) */
.skills-row {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
}

.skill-align-right {
    margin-left: auto;
}
.skill-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    white-space: nowrap;
}
/* ===== TOOLS (col 6–7) ===== */
.tools-col {
    grid-column: 6 / 8;
    grid-row: 1;                        /* forza riga 1 */
}

.tools-title {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(34, 34, 34, 0.65);
    text-transform: uppercase;
    margin-bottom: 80px;                    /* 80px come skills */
}
.tools-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tool-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    width: fit-content;
}

.tool-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: grayscale(100%);
}
/* ===== LINEA VERTICALE ===== */

.vertical-divider {
    grid-column: 8 / 10;
    grid-row: 1;                        /* forza riga 1 */
    justify-self: center;
    width: 1px;
    height: 400px;
    background-color: var(--border-color);
    align-self: center;
}

/* ===== LANGUAGES (col 10–12) ===== */
.languages-col {
    grid-column: 10 / 13;
     grid-row: 1;     
}

.languages-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 80px;
}

/* Ogni lingua */
.language-item {
    display: flex;
    align-items: center;
    gap: 42px;
    margin-bottom: 42px;
}

.language-item:last-child {
    margin-bottom: 0;
}

.lang-name {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    min-width: 60px;
}

.lang-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lang-level {
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 10px;
}

.lang-bar-bg {
    width: 100%;
    height: 3px;
    background-color: var(--border-color);
    border-radius: 2px;
}

.lang-bar-fill {
    height: 100%;
    background-color: var(--text-color);
    border-radius: 2px;
}
/* ============================================
   LINEA SEPARATRICE SEZIONI
============================================ */
.section-line-wrapper {
    padding: 0 var(--margin-desktop);
    margin-top: 100px;
}

.section-line {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    width: 100%;
}
/* ============================================
   SELECTED WORKS — DESKTOP
============================================ */
.works-section {
    padding-top: 80px;
    background-color: #ffffff;
}

.works-header {
    padding: 0 var(--margin-desktop);
    margin-bottom: 80px;
}

.works-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Cards grid */
.works-cards {
    display: flex;
    gap: 64px;
    padding: 0 var(--margin-desktop);
}

/* Singola Card */
.work-card {
    flex: 1;
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 32px;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease;
}

.work-card:hover {
    transform: translateY(-4px);
}

/* Immagine */
.card-image {
    width: 100%;
    height: 171px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.card-img-default,
.card-img-hover {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.card-img-default {
    opacity: 1;
}

.card-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.work-card:hover .card-img-default {
    opacity: 0;
}

.work-card:hover .card-img-hover {
    opacity: 1;
}

/* Info card */
.card-info {
    display: flex;
    flex-direction: column;
}

/* Tag/bottone caption */
.card-tag {
    display: inline-block;
    width: fit-content;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 24px;
}

/* Titolo */
.card-title {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 16px;
}

/* Caption piccola */
.card-caption {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
}

/* Indicatori scroll — nascosti su desktop */
.scroll-indicators {
    display: none;
}
/* ============================================
   CONTACT SECTION — DESKTOP
============================================ */
.contact-section {
    padding-top: 100px;
    padding-bottom: 0;
    background-color: #ffffff;
}

.contact-card {
    margin: 0 var(--margin-desktop);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
}

.contact-container {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    align-items: center;
}

/* Immagine — col 1 a fine col 3 */
.contact-image {
    grid-column: 1 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-image img {
    width: 100%;
    max-width: 150px;
    object-fit: contain;
}

/* Testi centrati tra immagine e bottone */
.contact-text {
    grid-column: 5 / 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-text-main {
    font-family: var(--font-main);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 24px;
}

.contact-text-secondary {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-color);
}

/* Bottone Contact Me — allineato prima della col 12 */
.contact-btn-wrapper {
    grid-column: 11 / 13;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn-contact-me {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background-color: var(--text-color);
    color: #ffffff;
    border-radius: 0;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.btn-contact-me:hover {
    opacity: 0.8;
    color: #ffffff;
}

.btn-contact-me svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* ============================================
   FOOTER — DESKTOP
============================================ */
.footer {
    padding-top: 64px;
    padding-bottom: 40px;
    background-color: #ffffff;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
    column-gap: var(--gutter-desktop);
    padding: 0 var(--margin-desktop);
    align-items: center;
}

.footer-copy {
    grid-column: 1 / 7;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.65);
}

.footer-linkedin {
    grid-column: 12 / 13;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    justify-self: end;
    transition: opacity 0.3s ease;
}

.footer-linkedin:hover {
    opacity: 0.6;
}
.scroll-top-btn {
    position: fixed;
    right: 32px;
    bottom: 32px;

    width: 56px;
    height: 56px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.28);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.22),
            rgba(255,255,255,0.08)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        inset 0 1px 1px rgba(255,255,255,0.35);

    color: #222;

    font-size: 22px;
    font-weight: 300;

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

    cursor: pointer;

    z-index: 999;

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px) scale(0.96);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background 0.3s ease;
}

/* visibile */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* hover desktop */
@media (hover: hover) {

    .scroll-top-btn:hover {
        transform: translateY(-2px);
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.30),
                rgba(255,255,255,0.12)
            );
    }

}
/* ============================================
 ===== PAGINA PROGETTO ===== 
============================================ */
.project-page {
  width: 100%;
}
@media (min-width: 769px) {

    .project-cover-wrapper {
        min-height: calc(100vh - var(--navbar-height));
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

}
.project-gallery {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  line-height: 0;
}

.project-image {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
}
.project-video {
  display: block;
  width: 100%;
  height: auto;
}
.project-videojd3 {
    filter: brightness(0.9655);
}
.projectvideocope2 {
  filter: brightness(1.008);
}
.copertinaJdissue2 {
   background: #1c1c1c;
}
/* ============================================
   PROJECT NAVIGATION
============================================ */

.project-navigation {
    width: 100%;
    max-width: 560px;

    margin: 80px auto 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.project-navigation .prev-link {
    justify-self: start;
}

.project-navigation .next-link {
    justify-self: end;
}

.project-navigation.both {
    justify-content: space-between;
}

.project-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;

    color: var(--text-color);
    text-decoration: none;

    transition: opacity 0.3s ease;
}

.project-nav-link:hover {
    opacity: 0.6;
}

.project-nav-link svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE — MOBILE (max 768px)
============================================ */
@media (max-width: 768px) {

    /* ===== HERO ===== */
    .hero {
            background: #ffffff;
    }

    /* ===== NAVBAR ===== */
    .navbar {
        height: auto;
        padding-top: 10px;
    }

    .nav-container {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        padding: 0 var(--margin-mobile);
        position: relative;
        height: auto;
        min-height: 55px;
    }

    .logo {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .nav-links {
        display: none;
    }

    /* ===== BURGER ===== */
    .burger {
        grid-column: 4 / 5;  
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
    }

    .burger span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--text-color);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ===== HERO CONTENT ===== */
    .hero-content {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        padding: 0 var(--margin-mobile);
        align-content: start;
        padding-top: 30px;
    }
.hero-visual {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.hero-visual img {
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
}

    .hero-role {
        grid-column: 1 / -1;
        font-size: 12px;
        margin-bottom: 30px;
    }

      .hero-name {
        grid-column: 1 / -1;
        font-size: clamp(36px, 11vw, 55px);
        margin-bottom: 30px;
        white-space: nowrap;
        letter-spacing: -0.02em;             /* lettere leggermente strette */
        display: flex;                        /* nome e cognome affiancati */
        gap: 0.25em;                          /* spazio SOLO tra nome e cognome */
    }

    .hero-name br {
        display: none;
    }

    .hero-caption {
        grid-column: 1 / -1;
        font-size: 14px;
    }
    

    /* ===== HERO LINE ===== */
    .hero-line-wrapper {
    padding: 0 var(--margin-mobile);
    background-color: #ffffff;      /* sfondo bianco sotto la linea */
}

      /* ===== HERO BOTTOM ===== */
    .hero-bottom {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        padding: 0 var(--margin-mobile);
        padding-bottom: 25px;               /* distanza dalla linea */
    }

    /* View Work + About Me — SOPRA */
    .hero-bottom-left {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        align-items: center;
        order: 1;
        margin-bottom: 25px;               /* stessa distanza = centrato */
    }

    /* Based in Italy + Available — SOTTO */
.hero-bottom-right {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;   /* reset desktop */
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    order: 2;
    width: 100%;
}

.hero-location {
    font-size: 10px;
    white-space: nowrap;
    margin: 0;
}

.hero-available {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 8px;
    padding: 10px 15px;
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
    margin: 0;
}

    .btn-view-work {
        grid-column: 1 / 3;
        justify-content: center;
        font-size: 13px;
        padding: 8px 16px;
    }

    .btn-about-me {
        grid-column: 4 / 5;                /* allineato alla fine della colonna 4 */
        justify-content: flex-end;          /* testo a destra */
        font-size: 13px;
    }

    .hero-location {
        font-size: 10px;
    }

    .hero-available {
        font-size: 8px;
        padding: 10px 15px;
    }
         /* ============================================
       ABOUT ME — MOBILE
    ============================================ */
    .about {
        padding-top: 64px;
        background-color: #ffffff;
    }

    .about-container {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        padding: 0 var(--margin-mobile);
    }

    /* Testi — full width */
    .about-left {
        grid-column: 1 / -1;
    }

    .about-title {
        margin-bottom: 64px;
    }

    .about-text-main {
        font-size: 22px;
        margin-bottom: 32px;
    }

    .about-text-secondary {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .about-text-motto {
        font-size: 14px;
    }

  /* Stella immagine — full width, centrata */
    .about-star-image {
        grid-column: 1 / -1;
        grid-row: auto;
        padding-top: 64px;
        margin-top: 0;
        display: flex;                      /* aggiunto */
        justify-content: center;
        align-items: center;                /* aggiunto */
    }

    .about-star-image img {
        width: 200px;
        height: 237px;
        max-width: none;
        object-fit: contain;
    }

    /* Aggettivi — full width, sotto la stella */
    .about-skills {
        grid-column: 1 / -1;
        grid-row: auto;                    /* reset dal desktop */
        padding-top: 64px;
        padding-left: 0;                   /* reset dal desktop */
        padding-bottom: 0;                 /* reset dal desktop */
        gap: 0;
    }

    .skill-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .skill-name {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* Linea sotto ogni aggettivo — full width */
    .skill-line {
        width: 100%;
        height: 1px;
        margin-left: 0;
        margin-bottom: 42px;
        background-color: var(--border-color);
    }

    /* Ultimo skill-item senza margin-bottom extra */
    .skill-item:last-child .skill-line {
        margin-bottom: 0;
    }
    /* ============================================
       SKILLS & LANGUAGES — MOBILE
    ============================================ */
    .skills-section {
        padding-top: 120px;
    }

    .skills-container {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        padding: 0 var(--margin-mobile);
        grid-template-rows: auto;
    }

    /* Tutto in colonna, una sezione sotto l'altra */
    .skills-left {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-left: 0;
    }

        .skills-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-bottom: 0;
    }

    .skills-title {
        margin-bottom: 64px;
    }

    .skills-subtitle {
        font-size: 12px;
        margin-bottom: 32px;
    }

    .skills-buttons {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .skills-row {
        display: flex;
    }

    .skill-btn {
        font-size: 12px;
        padding: 8px 16px;
        width: fit-content;
    }

    /* ⚠️ RESET dal desktop — questa è la chiave */
    .skill-align-right {
        margin-left: 0;
    }

    /* Riga 1: UX Research sx + Wireframing a metà */
    .skills-row:nth-child(1) {
        justify-content: flex-start;
        gap: 0;
    }

    .skills-row:nth-child(1) .skill-align-left {
        margin-right: auto;
    }

    .skills-row:nth-child(1) .skill-align-right {
        margin-right: 26%;
    }

    /* Riga 2: Design Systems + Prototyping spostati a dx */
    .skills-row:nth-child(2) {
        justify-content: space-between;
        padding-left: 15%;
    }

    /* Riga 3: Collaboration a sinistra */
    .skills-row:nth-child(3) {
        justify-content: flex-start;
    }

    /* Riga 4: Coding & Vibe a destra */
    .skills-row:nth-child(4) {
        justify-content: flex-end;
    }

    /* Riga 5: Data-Driven a sinistra */
    .skills-row:nth-child(5) {
        justify-content: flex-start;
    }

    /* Tools — sotto i bottoni skills */
    .tools-col {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 64px;
    }

    .tools-title {
        margin-bottom: 32px;
    }

  .tools-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: flex-start;
    }

    /* HTML/CSS/JS allineato a destra */
    .tool-item:nth-child(5) {
        margin-left: auto;
    }

    .tool-item {
        font-size: 12px;
        padding: 8px 16px;
    }

    .tool-icon {
        width: 16px;
        height: 16px;
    }

    /* Linea verticale → orizzontale su mobile */
    .vertical-divider {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        height: 1px;
        margin: 64px 0;
        justify-self: stretch;
    }

    /* Languages — sotto la linea */
    .languages-col {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .languages-title {
        margin-bottom: 64px;
    }

    .language-item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 20px;
        margin-bottom: 42px;
    }

    .lang-name {
        font-size: 14px;
        grid-column: 1;
    }

    .lang-bar-wrapper {
        grid-column: 2;
    }

    .lang-bar-bg {
        height: 3px;
    }

    .lang-level {
        font-size: 10px;
        margin-bottom: 8px;
    }
     .section-line-wrapper {
        padding: 0 var(--margin-mobile);
        margin-top: 64px;
    }
        /* ============================================
       SELECTED WORKS — MOBILE
    ============================================ */
    .works-section {
        padding-top: 64px;
    }

    .works-header {
        padding: 0 var(--margin-mobile);
        margin-bottom: 64px;
    }

    /* Scroll orizzontale */
    .works-cards {
        display: flex;
        gap: 24px;
        padding: 0 var(--margin-mobile);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-padding: 0 var(--margin-mobile);
    }

    .works-cards::-webkit-scrollbar {
        display: none;
    }

   .work-card {
        min-width: calc(100vw - (var(--margin-mobile) * 2));
        flex-shrink: 0;
        scroll-snap-align: center;
        padding: 24px;
    }

    .card-image {
        height: 171px;
        margin-bottom: 24px;
    }

    .card-tag {
        font-size: 11px;
        padding: 6px 12px;
        margin-bottom: 20px;
    }

    .card-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .card-caption {
        font-size: 13px;
    }

    /* Indicatori scroll — visibili su mobile */
    .scroll-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 0 var(--margin-mobile);
        margin-top: 32px;
    }

    .indicator {
        height: 3px;
        border-radius: 2px;
        background-color: var(--border-color);
        transition: all 0.3s ease;
    }

    /* Indicatore corto (inattivo) */
    .indicator {
        width: 24px;
    }

    /* Indicatore lungo (attivo) */
    .indicator.active {
        width: 48px;
        background-color: var(--text-color);
    }
        /* ============================================
       CONTACT SECTION — MOBILE
    ============================================ */
    .contact-section {
        padding-top: 64px;
    }

    .contact-card {
        margin: 0 var(--margin-mobile);
        padding: 24px;
        border-radius: 12px;
    }

    .contact-container {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
    }

    /* Immagine — full width */
    .contact-image {
        grid-column: 1 / -1;
        margin-bottom: 32px;
    }

    .contact-image img {
        max-width: 120px;
        margin: 0 auto;
    }

    /* Testi — full width */
    .contact-text {
        grid-column: 1 / -1;
        margin-bottom: 32px;
    }

    .contact-text-main {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .contact-text-secondary {
        font-size: 14px;
    }

    /* Bottone — full width */
    .contact-btn-wrapper {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .btn-contact-me {
        width: auto;
        justify-content: center;
        padding: 14px 24px;
        font-size: 13px;
    }

    /* ============================================
       FOOTER — MOBILE
    ============================================ */
        .footer {
        padding-top: 32px;
        padding-bottom: 30px;
    }

    .footer-container {
        grid-template-columns: repeat(var(--columns-mobile), 1fr);
        column-gap: var(--gutter-mobile);
        padding: 0 var(--margin-mobile);
        align-items: center;
    }

    .footer-copy {
        grid-column: 1 / 4;
        font-size: 10px;
        margin-bottom: 0;
    }

    .footer-linkedin {
        grid-column: 4 / 5;
        font-size: 14px;
        justify-self: end;
    }
/* =========================================================
   PATCH RESPONSIVE FINALE — STABILE E SENZA TOCCARE HTML/JS
   Incolla questo blocco in fondo al CSS
========================================================= */

/* ---------- sicurezza base ---------- */
html, body {
  overflow-x: hidden;
}

.hero,
.hero-content,
.hero-bottom,
.about-container,
.skills-container,
.contact-container,
.footer-container,
.works-cards,
.hero-text,
.hero-visual,
.hero-bottom-left,
.hero-bottom-right,
.about-left,
.about-skills,
.skills-left,
.tools-col,
.languages-col,
.contact-text {
  min-width: 0;
}

.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-bottom,
.hero-bottom-left,
.hero-bottom-right {
  position: relative;
  z-index: 2;
}

/* blob più controllato sempre */
.hero-liquid {
  width: min(100%, 680px);
  margin-left: auto;
  margin-right: auto;
}

.blob-metal {
  max-width: 100%;
  height: auto;
}
 .project-cover-wrapper {
        padding-top: 32px;
    }

 .project-videojd3 {
   filter: none;
}
  .project-videojd3 {
    filter: brightness(1.05) !important;
  }
    .projectvideocope2 {
    filter: brightness(1.013);
  }
  .project-video {
    background: #F9F9F8;
}
   .project-navigation {
        padding: 0 var(--margin-mobile);
        margin-top: 64px;
    }

    .project-nav-link {
        font-size: 14px;
    }
        .scroll-top-btn {
        width: 48px;
        height: 48px;

        right: 16px;
        bottom: 145px;

        font-size: 18px;
    }

}

/* =========================================================
   DESKTOP MEDIO / LAPTOP
========================================================= */
@media (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --margin-desktop: 48px;
    --gutter-desktop: 20px;
  }

  .hero {
    min-height: 100svh;
    height: auto;
  }

  .hero-content {
    padding: 0 var(--margin-desktop);
    align-items: center;
  }

  .hero-text {
    grid-column: 1 / 7;
  }

  .hero-visual {
    grid-column: 7 / 13;
    justify-content: flex-end;
  }

  .hero-name {
    font-size: clamp(64px, 7vw, 90px);
    letter-spacing: -2px;
    margin-bottom: 32px;
  }

  .hero-role {
    margin-bottom: 32px;
  }

  .hero-caption {
    font-size: 17px;
    max-width: 32ch;
  }

  .hero-liquid {
    width: min(100%, 520px);
  }

  .hero-bottom {
    padding: 0 var(--margin-desktop) 28px;
  }

  .hero-bottom-left {
    grid-column: 1 / 6;
    gap: 24px;
  }

  .hero-bottom-right {
    grid-column: 9 / 13;
  }

  .hero-available {
    padding: 12px 18px;
    font-size: 11px;
  }

  .about-container,
  .skills-container,
  .contact-container,
  .footer-container {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }

  .works-header,
  .works-cards,
  .section-line-wrapper,
  .contact-card {
    margin-left: 0;
    margin-right: 0;
  }

  .works-cards {
    gap: 32px;
    padding: 0 var(--margin-desktop);
  }

  .works-header,
  .section-line-wrapper {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

/* =========================================================
   TABLET / INTERMEDIO — QUI SI SISTEMA L'OVERLAP
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --margin-desktop: 28px;
    --gutter-desktop: 16px;
    --navbar-height: 72px;
  }

  .hero {
    height: auto;
    min-height: auto;
    grid-template-rows: var(--navbar-height) auto auto;
    padding-bottom: 28px;
  }

  /* NAV */
  .nav-container {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 var(--margin-desktop);
    column-gap: var(--gutter-desktop);
    position: relative;
  }

  .logo {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .nav-links {
    display: none;
  }

  .burger {
    display: flex;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* HERO CONTENT: diventa stacked senza toccare HTML */
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 24px var(--margin-desktop) 0;
  }

  .hero-text {
    width: 100%;
  }

  .hero-role {
    font-size: 14px;
    margin-bottom: 22px;
  }

  .hero-name {
    font-size: clamp(54px, 9vw, 78px);
    line-height: 0.95;
    letter-spacing: -2px;
    margin-bottom: 24px;
  }

  .hero-caption {
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch;
  }

  .hero-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 4px;
  }

  .hero-liquid {
    width: min(54vw, 380px);
    max-width: 380px;
    margin: 0 auto;
  }

  .blob-base {
    animation: none !important;
    transform: none !important;
  }

  .blob-metal {
    transform: none !important;
    filter:
      drop-shadow(0 16px 24px rgba(0, 0, 0, 0.10))
      drop-shadow(0 4px 12px rgba(255, 255, 255, 0.05));
  }

  /* HERO BOTTOM sotto al visual */
  .hero-bottom {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px var(--margin-desktop) 0;
    align-items: stretch;
  }

  .hero-bottom-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .hero-bottom-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .btn-view-work {
    padding: 12px 18px;
    font-size: 13px;
  }

  .btn-about-me {
    font-size: 13px;
    margin-left: auto;
  }

  .hero-location {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .hero-available {
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }

  /* ABOUT */
  .about {
    padding-top: 80px;
  }

  .about-container {
    grid-template-columns: repeat(8, 1fr);
    column-gap: 16px;
    padding: 0 var(--margin-desktop);
    row-gap: 40px;
  }

  .about-left {
    grid-column: 1 / 6;
    grid-row: auto;
  }

  .about-skills {
    grid-column: 6 / 9;
    grid-row: auto;
    padding-left: 0;
    padding-top: 88px;
    padding-bottom: 0;
    gap: 20px;
  }

  .about-title {
    margin-bottom: 48px;
  }

  .about-text-main {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .about-text-secondary,
  .about-text-motto {
    font-size: 15px;
  }

  .about-star-image {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding-top: 8px;
  }

  .about-star-image img {
    width: 170px;
    height: auto;
  }

  /* SKILLS */
  .skills-section {
    padding-top: 120px;
  }

  .skills-container {
    grid-template-columns: repeat(8, 1fr);
    column-gap: 16px;
    padding: 0 var(--margin-desktop);
    row-gap: 40px;
  }

  .skills-left {
    grid-column: 1 / 6;
    grid-row: auto;
  }

  .tools-col {
    grid-column: 6 / 9;
    grid-row: auto;
  }

  .vertical-divider {
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    justify-self: stretch;
    align-self: stretch;
  }

  .languages-col {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .skills-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 32px;
  }

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

  .skills-subtitle {
    margin-bottom: 20px;
  }

  .skills-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .skills-row {
    display: contents;
  }

  .skill-align-right {
    margin-left: 0;
  }

  .skill-btn {
    font-size: 13px;
    padding: 8px 14px;
  }

  .tools-title,
  .languages-title {
    margin-bottom: 32px;
  }

  .tools-list {
    gap: 12px;
  }

  .tool-item {
    font-size: 13px;
    padding: 8px 14px;
  }

  .language-item {
    gap: 24px;
    margin-bottom: 28px;
  }

  /* WORKS */
  .works-section {
    padding-top: 72px;
  }

  .works-header {
    padding: 0 var(--margin-desktop);
    margin-bottom: 40px;
  }

  .works-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 0 var(--margin-desktop);
  }

  .work-card {
    min-width: 0;
    padding: 24px;
  }

  .card-image {
    height: 150px;
    margin-bottom: 24px;
  }

  .scroll-indicators {
    display: none;
  }

  /* CONTACT */
  .contact-section {
    padding-top: 80px;
  }

  .contact-card {
    margin: 0 var(--margin-desktop);
    padding: 28px;
  }

  .contact-container {
    grid-template-columns: repeat(8, 1fr);
    column-gap: 16px;
    row-gap: 24px;
  }

  .contact-image {
    grid-column: 1 / 3;
    justify-content: flex-start;
  }

  .contact-text {
    grid-column: 3 / 7;
  }

  .contact-btn-wrapper {
    grid-column: 7 / 9;
    justify-content: flex-end;
  }

  .contact-text-main {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .contact-text-secondary {
    font-size: 15px;
  }

  /* FOOTER */
  .footer {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  .footer-container {
    grid-template-columns: repeat(8, 1fr);
    column-gap: 16px;
    padding: 0 var(--margin-desktop);
  }

  .footer-copy {
    grid-column: 1 / 6;
    font-size: 11px;
  }

  .footer-linkedin {
    grid-column: 7 / 9;
    font-size: 15px;
  }
}
.project-videojd3 {
    filter: brightness(0.9655);
}

@media (min-width: 769px) and (max-width: 1024px) {
  .nav-container {
    position: relative;
  }

  .nav-links {
    display: none !important;
  }

  .burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }

  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease;
  }
}