/********************************************************
    VARIABILI E RESET (mobile-first)
  *********************************************************/
  :root{
    --primary-color:#0077ff;
    --primary-hover:#005bb5;
    --secondary-color:#002244;
    --accent-color:#ff0000;
    --menu-gradient-start:#0077ff;
    --menu-gradient-end:#0099ff;
    --main-bg-color:#f2f2f2;
    --main-text-color:#333;
    --secondary-text-color:#6f6f6f;
    --overlay-bg:rgba(0,0,0,0.5);
    --box-bg:#fff;
    --text-color:#333;
    --border-radius:8px;
  }

  a{color:inherit;transition:color .3s}
  a:hover{color:var(--accent-color)}

  /********************************************************
    CONTENITORE PRINCIPALE DELLE SLIDE
  *********************************************************/
  .container{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    width:100%;height:70vh;margin:0 auto;position:relative;
  }

  /********************************************************
    SEZIONE SLIDESHOW
  *********************************************************/
  .slideshow{flex:1 0 auto;position:relative;width:100%;height:100%;overflow:hidden}
  .slide{
    position:absolute;top:10%;left:0;width:100%;height:100%;
    display:flex;justify-content:center;align-items:center;font-size:1rem;
    transition:opacity 1s ease;opacity:0;
  }
  .slide.active{opacity:1;position:relative}

  /* Titolo grande in slide 1 */
  .slide-1 h1{
    font-size:2.5rem;color:#000;text-shadow:2px 2px 4px rgba(0,0,0,.3);
    animation:zoomAndFade 1.5s forwards;text-align:center;padding:0 10px;
    position:relative;bottom:20%;
  }
  @keyframes zoomAndFade{
    0%{transform:scale(.8);opacity:1}
    70%{transform:scale(1.2);opacity:1}
    100%{transform:scale(1.3);opacity:0}
  }

  /* Contenuto slide 2-3-4 */
  .content-container{
    width:100%;height:100%;overflow-y:auto;background:#fefefe;
    display:flex;justify-content:center;align-items:flex-start;
  }
  .content{
    display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;
    width:90%;max-width:1200px;margin:0 auto;padding:40px 20px;box-sizing:border-box;
    border-radius:8px;gap:40px;text-align:left;
  }
  .content h2{ text-transform:uppercase; font-size:2rem; margin-bottom:1rem; }
  .content p{
    white-space:pre-line;background:#fafafa;border-left:4px solid var(--accent-color);
    padding:20px;border-radius:4px;font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem;text-align:justify;
  }
  .content img{ max-width:100%; height:auto; object-fit:cover; border:2px solid #ddd; border-radius:4px; }

  /********************************************************
    NAVIGAZIONE PALLINI – visibili per slide 2-3-4
  *********************************************************/
  .navigation{
    position:absolute;bottom:20px;width:100%;display:flex;justify-content:center;gap:10px;
    opacity:1;transition:opacity .5s ease;
  }
  .dot{
    width:15px;height:15px;border-radius:50%;background:lightgray;border:none;cursor:pointer;
    transition:background-color .3s, transform .3s;
  }
  .dot:hover{ background:gray; transform:scale(1.2); }
  .dot.active{ background:var(--accent-color); }

  /* Messaggio schermo orizzontale */
  #rotate-message{ display:none; }

  /********************************************************
    MEDIA QUERIES (Responsive)
  *********************************************************/
  @media screen and (orientation:landscape) and (max-width:901px){
    /* Mostra solo il messaggio di rotazione */
    .container{ display:none !important; }
    #rotate-message{
      display:flex;position:fixed;inset:0;z-index:999999;background:#f5f5f5;color:#333;
      flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;
    }
    #rotate-message h2{font-size:1.5em;margin-bottom:10px}
    #rotate-message p{font-size:1em;line-height:1.4;max-width:400px}
  }

  @media screen and (max-width:400px){
    /* SLIDES - DIMENSIONI RIDOTTE */
    .t3,.t4{ position:absolute; overflow:block; }
    .t4{ top:10%; }
    .content h2{ font-size:1.2em; }
    .slide h1{ font-size:1.8em; }
    .promo-slider img{ width:100%; height:auto; margin-top:0; object-fit:cover; }
    .promo-slider .caption{ bottom:30%; }
    .promo-slider .caption button{ left:20%; font-size:.9em; }
    .promo-slider .caption h2{ font-size:.5em; text-align:center; width:auto; }
    .promo-indicators{ top:70%; left:50%; height:15px; transform:translateX(-50%); }

    /* SERVIZI */
    .content p, content h2{ font-size:.8em; width:100%; }
    .content img{ display:none; }
    .services-grid{ grid-template-columns:repeat(2,1fr); row-gap:10px; justify-items:center; margin-bottom:100px; }
    .service-item img{ width:20px; height:20px; }
    .service-title{ text-align:center; }

    /* MODAL DESCRIZIONE */
    .modal-description-box{ width:100% !important; border-bottom:1px solid #ccc !important; }
    .modal-description{ width:100%; height:auto; max-height:250px; margin-bottom:10px; }
    .modal-gallery{ width:100% !important; display:grid !important; grid-template-columns:1fr 1fr; gap:5px; overflow-y:auto; max-height:300px; }
    .modal-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid #ccc; border-radius:4px; }
  }

  @media screen and (min-width:403px) and (max-width:434px){
    .promo-slider .caption{ bottom:40%; }
    .promo-indicators{ top:65%; left:50%; height:20px; transform:translateX(-50%); }

    /* SLIDES - DIMENSIONI RIDOTTE */
    .t3,.t4{ position:absolute; overflow:block; }
    .t4{ top:10%; }
    .content h2{ font-size:1.2em; }
    .slide h1{ font-size:1.8em; }
    .promo-slider img{ width:100%; height:auto; margin-top:0; object-fit:cover; }
    .promo-slider .caption{ bottom:30%; }
    .promo-slider .caption button{ left:20%; font-size:.9em; }
    .promo-slider .caption h2{ font-size:.5em; text-align:center; width:auto; }
    .promo-indicators{ top:70%; left:50%; height:15px; transform:translateX(-50%); }

    /* SERVIZI */
    .content p, content h2{ font-size:1.0em; width:100%; }
    .content img{ display:none; }
    .services-grid{ grid-template-columns:repeat(2,1fr); row-gap:10px; justify-items:center; margin-bottom:100px; }
    .service-item img{ width:20px; height:20px; }
    .service-title{ text-align:center; }

    /* MODAL */
    .modal-description-box{ width:100% !important; border-bottom:1px solid #ccc !important; }
    .modal-description{ width:100%; height:auto; max-height:250px; margin-bottom:10px; }
    .modal-gallery{ width:100% !important; display:grid !important; grid-template-columns:1fr 1fr; gap:5px; overflow-y:auto; max-height:300px; }
    .modal-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid #ccc; border-radius:4px; }
  }

  @media screen and (min-width:435px) and (max-width:744px){
    .promo-slider img{ width:100%; height:100%; margin-top:0; object-position:70% 50%; }
    .promo-slider .caption{ bottom:35%; position:absolute; text-align:center; width:100%; }
    .promo-slider .caption h2{ font-size:2.8em; white-space:normal; overflow:visible; text-overflow:clip; width:auto; margin:0 auto; }
    .promo-slider .caption button{ left:30%; position:absolute; font-size:2em; width:40%; top:160%; }
    .promo-indicators{ top:74%; left:52.5%; height:30px; transform:translateX(-50%); font-size:2.8em; }

    /* SERVIZI */
    .services-grid{ grid-template-columns:repeat(3,1fr); row-gap:15px; justify-items:center; margin-bottom:145px; }
    .service-item img{ width:90px; height:90px; }
    .service-title{ font-size:1.2em; text-align:center; }
    .hover-box{ top:54% !important; position:fixed; }

    /* MODAL */
    .modal-description-box{ width:100% !important; border-bottom:1px solid #ccc !important; }
    .modal-description{ width:100%; height:auto; max-height:300px; margin-bottom:10px; }
    .modal-gallery{ width:100% !important; display:grid !important; grid-template-columns:1fr 1fr; gap:10px; overflow-y:auto; max-height:400px; }

    /* SLIDE 3 – griglia a scorrimento */
    .projects-grid{
      display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px; width:100%;
      margin:0 auto 145px;
    }
    .project-box{ flex:0 0 auto; width:70%; margin-right:30px; height:650px; }
    .modal-content{
      flex-direction:column; width:100%; height:100%; max-width:none; max-height:none;
      border-radius:0; margin:0; overflow-y:auto;
    }
    .modal-description-box{
      order:1; width:100%; height:450px; overflow-y:auto; border-right:none; border-bottom:1px solid #ccc;
      box-sizing:border-box; padding:6px; box-shadow:0 6px 8px rgba(0,0,0,1);
    }
    .modal-gallery{
      order:2; width:100%; display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:10px; box-sizing:border-box; padding:10px;
    }
    .modal-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid #ccc; border-radius:4px; }

    .navigation{ bottom:20%; }
  }

  @media screen and (orientation:landscape) and (max-width:1133px){
    .navigation{ bottom:13%; }
  }

  @media screen and (min-width:748px) and (max-width:900px){
    .promo-slider img{ width:100%; height:100%; margin-top:0; object-position:70% 50%; }
    .promo-slider .caption{ bottom:35%; position:absolute; text-align:center; width:100%; }
    .promo-slider .caption h2{ font-size:2.8em; white-space:normal; overflow:visible; text-overflow:clip; width:auto; margin:0 auto; }
    .promo-slider .caption button{ left:30%; position:absolute; font-size:2em; width:40%; top:160%; }
    .promo-indicators{ top:74%; left:53.5%; height:30px; transform:translateX(-50%); font-size:2.8em; }
  }

  @media screen and (min-width:901px) and (max-width:1024px){
    /* solo regole di slide, nessun header/footer/privacy */
  }

  @media screen and (orientation:landscape) and (min-width:1375px) and (max-width:1376px){
    .navigation{ bottom:20%; }
  }