/* ======================================================================

   1️⃣  RESET GFG Design

   ====================================================================== */

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

html { scroll-behavior:smooth; }

body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

       line-height:1.6; color:#333; background:#fff; }



/* ======================================================================

   2️⃣  LAYOUT (contatori, sezioni, griglie)

   ====================================================================== */

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

.section   { padding:80px 0; }

.bg-light { background:#f9f9f9; }



.row   { display:flex; flex-wrap:wrap; margin:-10px; }

.col   { flex:1; padding:10px; }

.col-full { flex:1 0 100%; padding:10px; }



h2, h3, h4 { margin-bottom:15px; }

p          { margin-bottom:20px; }



/* ======================================================================

   3️⃣  HEADER (hero)

   ====================================================================== */

#hero {

    position:relative;

    background:url('../img/banner1.jpg') no-repeat center/cover;

    height:100vh;

    color:#fff;



    /* ---------  CENTRA IL CONTENUTO  --------- */

    display:flex;

    align-items:center;      /* verticale */

    justify-content:center;  /* orizzontale */

    text-align:center;       /* testo centrato */

    padding:0 20px;          /* spazio laterale su mobile */

}



/* Se vuoi l’overlay (sovrapposizione nera) mantienilo ma:

   #hero .overlay { display:none; }   /* o rimuovilo dal markup */

#hero .overlay { display:none; }      /* disabilitato per default */



#hero h1 { font-size:3rem; margin-bottom:15px; }

#hero p  { font-size:1.2rem; margin-bottom:30px; }



.btn-primary {

    background:#ffff00;

    color:#000;

    padding:12px 30px;

    border:none;

    border-radius:5px;

    text-transform:uppercase;

    font-weight:bold;

    cursor:pointer;

    text-decoration:none;

}

.btn-primary:hover { background:#e0484c; }



/* -------------------------------------------------- */

/*4️⃣  NAVIGATION (fixed bar, logo, links & languages) */

/* -------------------------------------------------- */



/* General navbar */

.navbar {

    position:fixed;

    top:0; left:0; right:0;

    background:#333;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    padding:10px 20px;

    z-index:1001;

    box-shadow:0 2px 5px rgba(0,0,0,.2);

}



/* Logo */

.navbar .logo img { height:60px; }



/* Hamburger – hidden by default, visible only on mobile */

.nav-toggle {

    display:none;                     /* desktop – hidden */

    background:transparent;

    border:none;

    color:#fff;

    font-size:1.8rem;

    cursor:pointer;

}

.nav-toggle i{pointer-events:none;}



/* Links */

.nav-links {

    list-style:none;

    display:flex;

    gap:20px;

}

.nav-links a {

    color:#ffff00;

    text-decoration:none;

    font-weight:500;

}

.nav-links a:hover { text-decoration:underline; }



/* Language switcher – always visible */

.language-switcher {

    display:flex;

    gap:8px;

}

.lang-button {

    text-decoration:none;

    color:#ff5a5f;

    background-color:rgba(255,255,255,.1);

    border:1px solid rgba(255,255,255,.5);

    padding:6px 10px;

    border-radius:4px;

    font-size:.9rem;

    font-weight:500;

    transition:all .3s ease;

}

.lang-button.active { background:#ffff00; border-color:#ff5a5f; }

.lang-button:hover { background:rgba(255,255,255,.3); }



/* Mobile: stack the items, hide links until toggle is clicked */

@media (max-width:768px) {

    /* hamburger visible */

    .nav-toggle { display:block; }



    /* Hide the links by default – they will be shown with .active */

    .nav-links {

        flex-direction:column;

        gap:10px;

        width:100%;

        display:none;          /* hidden initially */

        margin-top:10px;

    }

    .nav-links.active { display:flex; }   /* shown when toggled */



    /* Keep language buttons visible */

    .language-switcher { margin-top:10px; }



    /* Optional: make the navbar a bit less compact on mobile */

    .navbar { padding:10px 15px; }

}



/* ======================================================================

   5️⃣  SEZIONI (About, Services, Portfolio, Contact)

   ====================================================================== */



/* About */

.row .col img { width:100%; height:auto; border-radius:5px; margin-bottom:10px; }

.row .col h3   { margin-top:0; }



/* Services */

.service-box {

    flex:1 0 22%;

    background:#fff;

    padding:20px;

    border-radius:5px;

    box-shadow:0 2px 5px rgba(0,0,0,.1);

    text-align:center;

}

.service-box h3 { margin-top:0; }

.service-box p { font-size:.95rem; }



/* Portfolio */

.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:15px; }

.gallery-item { position:relative; overflow:hidden; border-radius:5px; }

.gallery-item img { width:100%; height:auto; display:block; transition:transform .3s; }

.gallery-item .overlay {

    position:absolute;

    inset:0;

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

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:opacity .3s;

    text-align:center;

    padding:10px;

}

.gallery-item:hover img   { transform:scale(1.1); }

.gallery-item:hover .overlay { opacity:1; }



/* Contact */

form input, form textarea {

    width:100%;

    padding:10px;

    border:1px solid #ccc;

    border-radius:4px;

    margin-bottom:15px;

    font-family:inherit;

}

form textarea { resize:vertical; }

form button { width:auto; }



/* Footer */

.footer { background:#222; color:#ffff00; padding:20px 0; text-align:center; }

.footer a img { width:24px; height:24px; margin:0 8px; }



/* ======================================================================

   6️⃣  RESPONSIVE (≤768 px)

   ====================================================================== */

@media (max-width:768px) {



    /* Navbar passa a 1 colonna */

    nav {

        grid-template-columns:1fr;

        justify-items:flex-start;   /* allinea a sinistra */

        padding:10px 15px;

    }

    .nav-links {

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:flex-start;

        gap:10px;

    }

    .language-switcher { margin-top:10px; }



    /* Hero titoli più piccoli */

    #hero h1 { font-size:2.5rem; }



    /* Service box 2 colonne */

    .service-box { flex:1 0 48%; margin-bottom:20px; }



    /* Colonna in fila */

    .row { flex-direction:column; }

}