@font-face {
font-family: 'Comic Neue';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
  src: url('/font/comicneue-italic-webfont.woff2') format('woff2');
}
@font-face {
font-family: 'Rouge Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  src: url('/font/rougescript-regular-webfont.woff2') format('woff2');
}


* {
  box-sizing: border-box;
  text-decoration: none;
  

} 
.be {
       font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;;; 
}
body {
 padding: 0px;
 margin: 0px;
}
#ap1 {
display: none;
}
img{max-width: 100%;
  
  object-fit: cover;}


  @keyframes logo {
    from {
      opacity: 0.2;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
      header {
      
        position: sticky;
        background-color: rgb(196, 255, 107);
        z-index: 90;
        height: min-content;
         justify-content: space-between;
         height: fit-content;
         display: flex;
         align-items: center;
         margin-top: -1px;
         margin-left: -1px;
         margin-right: -1px;
         width: 100%;
      }
      /*sezione header guarda qua va da sinistra a destra */
      .header-text{
        height: 100px;
        width: max-content;
        margin: 10px;
        background-color: rgba(255, 255, 255, 0.5);
      color:rgb(95, 25, 25);
      font-family: "Rouge Script", cursive;
      font-size: larger;
      border-radius: 20px;
      font-weight: bold;
      animation: logo 0.5s ease-out forwards;
  
      height: fit-content;
      overflow: hidden;
      }

      .dek-cta {
        border-radius: 20px;
        width: 100px;
        height: 60px;
         color:rgb(250, 249, 249);
          font-family: "Rouge Script", cursive;
         font-size: 30px;
         font-weight: bold;
           background-color: rgb(95, 25, 25);
         border: 0;
         border-color: transparent;
         transition: all 0.5s ease;
         padding: 20px;
      }





      .hamburger {
  display: none;
  font-size: 28px;
  background: transparent;
  border: none;
  color: rgb(95, 25, 25);
  cursor: pointer;
  padding: 10px 16px;
  margin-right: 10px;
  position: relative;
}
.hamburger-drop {
  position: absolute;
  right: 0;
  top: 70px;
  display: none;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border: 5px solid salmon;
   opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.hamburger-drop.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.open {display:block;}
/* Links inside the dropdown */
.hamburger-drop-link a {
  color:rgb(95, 25, 25);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    transition: color 0.15s ease;
}
       nav{
        
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        padding-right: 20px;
      }
      .nav-button{
        border-radius: 20px;
        margin-left: 10px;
         color:rgb(95, 25, 25);
         font-family: "Rouge Script", cursive;
         font-size: 30px;
         font-weight: bold;
         height: fit-content;
         width: max-content;
         background-color: transparent;
         border: 0;
         border-color: transparent;
         transition: all 0.5s ease;
         padding: 20px;
      }
      .nav-button:hover {
          background-color: white;
          border: 1;
          border-color: darkmagenta;
        }
      
      /* drop down stuff*/
        .dropbutton {
   border-radius: 20px;
        margin-left: 10px;
         color:rgb(95, 25, 25);
         font-family: "Rouge Script", cursive;
         font-size: 30px;
         font-weight: bold;
         padding: 20px;
         background-color: transparent;
         border-color: transparent;
         transition: all 0.5s;
}

/* Dropdown button on hover & focus */
.dropbutton:hover, .dropbtn:focus {
  background-color:rgb(255, 255, 255);
  border-color: salmon;

}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border: 5px solid salmon;
   opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.dropdown-content.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Links inside the dropdown */
.dropdown-content a {
  color:rgb(95, 25, 25);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    transition: color 0.15s ease;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  color: black;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


      /*centro della pagina */
    .hero {
        display: flex;              /* lay children in a row */
        flex-direction: row;        /* left to right */
        align-items: center;        /* vertically center both sides */
        min-height: 80vh;           /* tall section */
        padding: 60px 60px;
        gap: 60px;                  /* space between left and right */
        background-color: rgb(255, 248, 244); /* very light warm background */
      }

      /*
        The left side takes up all available space (flex: 1).
        This is where the text lives.
      */
      .hero-left {
        flex: 1;                    /* take up remaining space */
        display: flex;
        flex-direction: column;     /* stack children top to bottom */
        gap: 24px;                  /* space between each child element */
      }

      /*
        Small label above the big title.
        We use letter-spacing and uppercase to make it feel like a tag.
        opacity starts at 0 and animates to 1 via the fadeUp keyframe.
      */
      .hero-eyebrow {
        font-size: 0.75rem;
        letter-spacing: 0.2em; 
        font-weight: 600;/* spread the letters out */
        text-transform: uppercase;
        color: rgb(95, 25, 25);
        opacity: 0;                 /* starts invisible */
        animation: fadeUp 0.7s ease 0.1s forwards; 
        /*                 ^duration  ^delay  ^keeps final state */
      }

      /*
        The big title. Rouge Script + large size + line-height
        controls how the two lines sit relative to each other.
      */
      .hero-title {
        font-family: "Rouge Script", cursive;
        font-size: clamp(2.5rem, 6vw, 5rem);
        /*          ^min        ^fluid  ^max
          clamp() makes font-size responsive automatically:
          never smaller than 2.5rem, never bigger than 5rem,
          and scales smoothly in between based on viewport width (6vw).
        */
        color: rgb(95, 25, 25);
        line-height: 1.1;           /* tighten line spacing for big text */
        font-weight: 400;
        opacity: 0;
        animation: fadeUp 0.7s ease 0.25s forwards;
      }

      /*
        A short description below the title.
      */
      .hero-subtitle {
        font-size: 1.3rem;
        line-height: 1.7;           /* generous line height for readability */
        color: rgb(120, 60, 40);
        max-width: 400px;
        opacity: 0;
        animation: fadeUp 0.7s ease 0.4s forwards;
      }

      /*
        The call-to-action button.
        border-radius: 40px makes it a "pill" shape.
        transition handles the hover animation.
      */
      .hero-btn {
        display: inline-block;
        width: fit-content;
        background-color: rgb(95, 25, 25);
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 14px 32px;
        border-radius: 40px;        /* pill shape */
        transition: background-color 0.3s ease, transform 0.2s ease;
        opacity: 0;
        animation: fadeUp 0.7s ease 0.55s forwards;
      }
      .hero-btn:hover {
        background-color: rgb(226, 159, 174); /* your pink */
        transform: translateY(-3px);           /* floats up on hover */
      }

      /*
        The right side holds the image.
        It's a fixed size box with a decorative border and soft shadow.
        overflow: hidden clips the image to the rounded corners.
      */
      .hero-right {
      

  max-width: 700px; 
  width: 100%;      
  
  /* . Tell the height to scale automatically */
  height: auto;     
  
  
  border-radius: 24px;
  overflow: hidden;           
  box-shadow: 8px 8px 32px rgba(95, 25, 25, 0.18);
  border: 4px solid rgba(226, 159, 174, 0.5);
  opacity: 0;
  animation: fadeIn 1s ease 0.3s forwards;
}
     
      
      .hero-right img {
       background-color: white;
            
      }

      /*
        @keyframes defines the animation steps.
        fadeUp: moves element from 20px below and invisible → normal position and visible.
        fadeIn: just fades in with no movement.
        
        These are reusable — any element can reference them with animation: fadeUp ...
      */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(20px); /* starts 20px below */
        }
        to {
          opacity: 1;
          transform: translateY(0);    /* ends in normal position */
        }
      }

      @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      .new-info {
        width: fit-content;
        height: fit-content;
        display: flex;
        gap: 10px;
        background-color: #A4B894;
        padding: 10px;
        justify-content: center
      }
       .new-info-img {
        
       width: 550px;
       height: 400px; 
      }
      .new-info-text {
           width: 600px;
           height: 400px;
           color: rgb(95, 25, 25);
           font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;; 
           background-color: white;
           border-radius: 20px;
      }
     
      .sec-main {
        height: fit-content;
        
      
        width: fit-content;
        margin-top: 40px;
          font-family: "Rouge Script", cursive;
          font-size: 46px;
          transition: fadeUp 0.5s ease-out forwards;
             background: linear-gradient(to bottom, rgb(170, 224, 103), rgb(244, 168, 191));
             border-radius: 10px;
}

      
    
      .sec-main-image {
        display: flex;
        width: fit-content;
        height: fit-content;
        padding: 20px;
        gap: 8px;

      }
    
    
   /* footer */
   footer {
    background: linear-gradient(to bottom, rgb(236, 197, 204), rgb(152, 106, 103));
    bottom: 0;
    position: relative;
    height: max-content;
   margin-top: 80px;
    padding: 10px;
    padding-top: 50px;
   }
   .social-logo {
    position: absolute;
    display: flex;
    top: 0;
    right: 50px;
    width: 100px;
    height: 50px;
    gap: 10px;
   }
   a + .social-logo {
    width: 50px;
    height: 30px;
   }
   .footer-text{
    
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(0, 0, 0);
    height: fit-content;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    padding: 6px; 
    font-size: 20px;
    opacity: 0.7;
    border-radius: 10px;
    font-weight: 300;
  
    width: fit-content;
    

   }
   hr {
    width: 80%; /* Now it takes up 80% of the screen, no matter the screen size */
  max-width: 500px; /* But it will never get wider than 500px on big screens */
  height: 5px;
  background-color: rgb(95, 25, 25);
  border-radius: 20px;
  animation: fadeUp 0.7s ease 0.25s forwards;
   opacity: 0;   
   }
   .img-sec {
     max-width: 400px;
    transition: all 0.4s;
            border: solid white 3px;
   }
   .img-sec:hover{
    transform: translatey(10px);
   }

   /* i miei lavori */

   .imiei-lavori-main{
        display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      
      gap: 20px;
      max-width: 1300px;
      margin: 40px auto;
      padding: 0 20px;
      height: fit-content;
      animation: fadeUp 0.7s ease 0.25s forwards;
       opacity: 0;   
   }
   .text-right {
    position: relative;
      font-family: "Rouge Script", cursive;
    font-size: 40px;
    color: rgb(95, 25, 25);
    grid-column: 4;
    text-align: left;
    background: linear-gradient(rgb(240, 230, 239), rgb(211, 169, 175));
    padding: 10px;
    grid-row: 1/3;
    border-radius: 8px;
   }
/* Image 1 - BIG LEFT (spans rows 1-2) */
  .imiei-lavori-img-tall-1 {
      border-radius: 8px;
      overflow: hidden;
      background: #C49A89;
      position: relative;
      grid-column: 1/2;
      grid-row: 1 / 3;
       animation: fadeUp 0.8s ease 0.25s forwards;
      height: fit-content;
  }
 .imiei-lavori-img-tall-2 {
      border-radius: 8px;
      overflow: hidden;
      background: #C49A89;
      position: relative;
      grid-column: 2 / 4;
      grid-row: 1 / 3;
       animation: fadeUp 0.8s ease 0.25s forwards;

  }
  /* Image 2 - TOP MIDDLE */
  .imiei-lavori-img-2 {
      border-radius: 8px;
      overflow: hidden;
      background: #A4B894;
      position: relative;
      grid-column: 2;
      grid-row: 1/3;
      animation: fadeUp 0.5s ease 0.25s forwards;
  }

  /* Image 3 - TOP RIGHT */
  .imiei-lavori-img-3 {
      border-radius: 8px;
      overflow: hidden;
      background: #B8A393;
      position: relative;
      grid-column: 1/3;
      grid-row: 1/2;
       animation: fadeUp 0.5s ease 0.25s forwards;
    height: fit-content;
  }

  /* Image 4 - right small */
  .imiei-lavori-img-4 {
      border-radius: 8px;
      overflow: hidden;
      background: #A8A0BD;
      position: relative;
      grid-column: 1/3;
      grid-row: 2/3;
     height: fit-content;
  }

  /* If you want a 5th image - BOTTOM RIGHT (spans 2 columns) */
  .imiei-lavori-img-5 {
      border-radius: 8px;
      overflow: hidden;
      background: #9C9B6B;
      position: relative;
       grid-column: 1;
      grid-row: 2;
  }
    .imiei-lavori-img-6 {
      border-radius: 8px;
      overflow: hidden;
      background: #9C9B6B;
      position: relative;
       grid-column: 2;
      grid-row: 2;
  }
    .imiei-lavori-img-7 {
      border-radius: 8px;
      overflow: hidden;
      background: #9C9B6B;
      position: relative;
       grid-column: 3;
      grid-row: 2;
  }
  .main-content-text {
     color: rgb(95, 25, 25);
     font-family: "Rouge Script", cursive;
      font-size: 60px;
  }
  /*   chi sono    */

  .main-text{
    color: rgb(95, 25, 25);
     font-family: "Rouge Script", cursive;
     font-weight: bold;
     font-size: 60px;
     margin: 30px;
  }
   .main-content-chi{
    display: flex;
    margin: 10px;
    padding: 10px;
    
    justify-content: center;
    animation: fadeUp 0.5s  forwards;
   flex-direction: row;
   height: fit-content;
    background: linear-gradient(#769869, #bca3b5) ;
    padding-bottom: 100px;
  }
 
   .main-content-text-chi {
    font-family: "Rouge Script", cursive;
    font-size: 30px;
    color: rgb(95, 25, 25);
  
   
  }
    .text-container {
        background-color: white;
        color: rgb(92, 25, 25);
        	font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif; 

          margin: 10px;
          padding: 10px;
           border-radius: 20px;
           width: auto;
           height: fit-content;
           max-width: 800px;
           font-weight: 500;
           border: solid rgb(123, 122, 122);
      }
  .main-content-image {
    padding: auto;
    margin: 10px;
  
    margin-top: 10px;
   max-width: 600px;
   background-color: #9c9b6b00;
   height: fit-content;
   border-radius: 23px;
   animation: fadeUp 0.8s  forwards;
   border: solid rgb(131, 131, 131);
  }
 

/*   dropdown-btn/menu  */

  .dropdown-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    margin: 10px;
  }
  .drop-text {
    grid-column: 1;
    font-family: "Rouge Script", cursive;
    font-size: 40px;
    color: rgb(95, 25, 25);
    text-align: left;
    
  }
  .drop-img {
    grid-column: 2;
    max-height: 400px;
  }
 
  .after-drop-flex {
  display: flex;
 gap: 10px;
 max-width: 900px;
 
  }
  .after-drop-flex-box {
    max-width: 400px;
    height: fit-content;
    font-size: 40px;
    color: rgb(95, 25, 25);
    text-align: center;
  }

  /*    sezione dopo il dropdown    */
  .after-drop-main-text {
   font-family: "Rouge Script", cursive;
   align-content: center;
   font-size: 20px;
  }
  .after-drop-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: fit-content;
  }
  .after-drop-text{
  background: linear-gradient(rgb(35, 101, 49), rgb(211, 183, 187));
  font-family: "Rouge Script", cursive;
  font-size: 20px;
  }
  .after-drop-img {
   max-width: 500px;
   height: fit-content;
  }


/* corsi */
.pre-poln {
      color: rgb(95, 25, 25);
        font-family:  "Rouge Script", cursive;
}

.corsi-chose {
   display: flex;
    margin: 10px;
    padding: 10px;
    
    justify-content: center;
    animation: fadeUp 0.5s  forwards;
   flex-direction: row;
   height: fit-content;
   gap: 30px ;
}

.columns123 {
  max-width:  350px;
  width: 300px;
  max-height: 550px;
  height: 500px;
  background-color: rgb(164, 79, 79);
  font-family:  "Rouge Script", cursive;
  color: white;
  border-radius: 5px;
}
.text-img {
  max-width: 750px;
  width: 700px;
  max-height: 550px;
  height: fit-content;
  display: flex;
  flex-direction: row;
  background: linear-gradient(rgb(108, 188, 125), rgb(211, 183, 187));;
}
.polnareff-txt {
 font-size: 40px;
    color: rgb(95, 25, 25);
}
.polnareff-img {
 max-height: 500px;
 height: 450px;
 overflow: hidden;
}





#te {
display:none;
}
  @media  (max-width: 1400px) {
    .hero-right {
      width: 500px;
      height: 500px;
    }
    #imgdex {
      width: 500px;
      height: 500px;
    }
    .new-info {
      width: fit-content;
      height: fit-content;
      flex-direction: column;
    }
    .new-info-img {
      width: 600px;
      height: 400px;
    }
    .new-info-text  h2 {
      font-size: 25px;
    }
  }
@media (max-width: 980px) {
  .text-right {
  height: fit-content;
    font-size: 32px;
  }
  .sec-main-image {
  flex-direction: column;
   
  }
  .new-info {
       width: fit-content;
      height: fit-content;
      
    }
    .new-info-img {
      width: 350px;
      height: 300px;
    }
    .new-info-text {
      width: 350px;
      height: fit-content;
    }
       .new-info-text h2 {
      font-size: 20px;
    }
}

  @media (max-width: 840px) {
    .hero {
    gap: 30px;
    }
    #imgdex {
       width: 300px;
       height: 300px;
    }
    .text-right {
    height: fit-content;
      font-size: 24px;
    }
    nav {
      display: none;
    }
    .hamburger {
      display: inline;
    }
    .text-container {
      font-size: 20px;
      font-weight: 600;
    }
    .hero-right {
      width: 300px;
      height: 300px;
    }
  }
  @media (max-width: 500px) {
    .text-container {
      font-size: 15px;
    }
    .hero-right {
      display: none
    }
    #te {
    display: block;
  max-width: 280px; 
  height: fit-content;      
  
  /* . Tell the height to scale automatically */
     
  
  
  border-radius: 24px;
  overflow: hidden;           
  box-shadow: 8px 8px 32px rgba(95, 25, 25, 0.18);
  border: 4px solid rgba(226, 159, 174, 0.5);
  opacity: 0;
  animation: fadeIn 1s ease 0.3s forwards;
    }
     .new-info {
       width: fit-content;
      height: fit-content;
      
    }
    .new-info-img {
      width: 300px;
      height: 200px;
    }
    .new-info-text {
      width: 300px;
      height: fit-content;
    }
       .new-info-text h2 {
      font-size: 17px;
    }
    .hero-left {
     font-size: 10px  !important;
     
    }
    .hero-title { width: 200px; }
    .text-right {
      font-size: 10px;
      height: 200px;
      width: 100px;
      
    }
    .imiei-lavori-img-tall-1 {
      width: 400px;
      height: fit-content;
      padding: 10px;
      align-items: center;
      grid-column: 1 !important;
    }
    .imiei-lavori-main {
     display: flex;
     justify-content: center;
    }
    #ap1 {
    display: block;
    }
    #et {
      display: none !important;
    }
     #et1 {
      display: none !important;
    }
     #et2 {
      display: none !important;
    }
     #et3 {
      display: none !important;
    }
     #et4 {
      display: none !important;
    }
     #et5 {
      display: none !important;
    }
     #et6 {
      display: none !important;
    }
    .text-right {
      display: none;
    }
    .main-content-chi {
        flex-direction: column;
    }
    }
     @media (max-width: 340px) {
      .text-container {
        font-size: 18px;
      }
    }