/* !base style */
body{font-family: 'Inter', sans-serif; font-size: 16px;}

a{text-decoration: none;}

h1{color:#000; padding-top:20px; padding-bottom:20px;}
h2,h3,h4,h5{color:#000; padding-bottom: 15px;}

p{line-height:28px; color: #000; font-weight: 300;}


.big-text{font-size:70px; font-weight: 900;}
.med-text{font-size:40px; font-weight 300;}
.normal-text{font-size:16px;}
.small-text{font-size:14px;}

.intro-text{font-size:20px; text-transform: uppercase; font-weight:bold;}

.button{padding:15px 25px; background: white; color:black; 
          border: solid #010e30; border-radius: 20px; 
          display:inline-block;}
          
        
@media (max-width:760px) {
  .big-text{font-size:50px;}
  .med-text{font-size:40px;}
  .normal-text{font-size:15px;}
  h4{padding-top:25px;}
  
}

@media (min-width: 768px) and (max-width: 950px){
  h4{padding-top:15px;}
}

/* !Header */
.header{
  width: 100%;
  position: fixed;
  top:0;
  padding: 30px;
  display: flex;
  z-index: 10;
  justify-content: space-between;

}



/* ========== HEADER / NAV ========== */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  background: #007c00;           /* verde header */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.logo img{ height: 48px; width: auto; }

/* Hamburger */
.menu-toggle{
  display: none;                 /* visibile solo su mobile */
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 1300;                 /* sopra il pannello */
}
.menu-toggle span{
  display: block;
  height: 3px; width: 26px;
  margin: 5px 0;
  background: #f73859;           /* ROSSO */
  transition: transform .3s, opacity .3s, background .2s;
}
/* animazione a X */
.menu-toggle.active span:nth-child(1){ transform: rotate(-45deg) translate(-5px, 6px); }
.menu-toggle.active span:nth-child(2){ opacity: 0; }
.menu-toggle.active span:nth-child(3){ transform: rotate(45deg) translate(-5px, -6px); }

/* Menu desktop */
.menu{
  display: flex;
}
.menu ul{
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 0; margin: 0;
}
.menu li{ margin: 0 7px; }
.menu a{
  text-decoration: none;
  color: #fff;                   /* bianco su desktop */
  font-size: 18px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
}
.menu a:hover{ background: rgba(255,255,255,.1); text-decoration: none; }

/* ========== MOBILE ========== */
@media (max-width: 768px){
  /* pannello laterale */
  .menu{
    position: fixed;
    top: 0; right: -100%;
    width: 80%; max-width: 360px; height: 100dvh;
    background: #fff;
    transition: right .45s ease;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 1250;
    box-shadow: -6px 0 20px rgba(0,0,0,.15);
  }
  body.menu-open .menu{ right: 0; }

  .menu ul{
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }
  .menu a{
    color: #f73859;              /* ROSSO su mobile */
    font-weight: 700;
    font-size: 22px;
    padding: 8px 14px;
    border-radius: 10px;
  }
  .menu a:hover{
    background: rgba(247,56,89,.08);
    text-decoration: none;
  }

  .menu-toggle{ display: block; }

  /* bottone X dentro al menu */
  .menu-close{
    position: absolute;
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    border: none; border-radius: 50%;
    background: transparent;
    color: #f73859;
    font-size: 28px; line-height: 1;
    cursor: pointer;
  }
  .menu-close:hover{ background: rgba(247,56,89,.08); }

  /* overlay cliccabile per chiudere */
  .menu-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1240;
  }
  body.menu-open .menu-backdrop{
    opacity: 1; pointer-events: auto;
  }
}




/* !HERO */
.title{
    color: #dd3333;
    font-size: 32px;
    text-align: center;
    padding-top: 25px;
}

.title:after{
    content: "";
    display: block;
    height: 5px;
    margin: 1rem auto auto;
    width: 100px;
  background: linear-gradient(45deg,
  #ff0000,   /* rosso */
  #ff7f00,   /* arancione */
  #ffff00,   /* giallo */
  #00ff00,   /* verde */
  #0000ff,   /* blu */
  #4b0082,   /* indaco */
  #8b00ff    /* violetto */
);

}

.subtitle{
    padding-top: 25px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #55b360;
}

.hero{
  padding-top: 125px;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
  padding-left: 5vw;
  padding-right: 5vw;
  content: justify;
  align-content: justify;
  text-align: justify;
}


.logo img{ height: 48px; width: auto; }




























/* !Grid*/

.col{float:left;width:100%;}

.grid{width:100%;
  display: flex;
  max-width: 1350px;
  padding: 0 30px;
  margin: 0 auto;
  align-content: baseline;
  align-items: baseline;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 768px) {
  .grid{flex-wrap:wrap;}
  .col{float:left; width: 100%;}
}

@media (min-width: 768px) and (max-width: 950px){
  .grid{flex-wrap:wrap}
  .col{float:left; width:100%;}
}


/* !footer #010e30 */ 
.footer {
  padding: 30px 0px;
  background: #007c00;
}


.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-left: 30px; /* Adjust the padding as needed */
  padding-right: 30px; /* Adjust the padding as needed */
  padding-top: 10px;
}

.terms {
  color: white;
  font-size: .75rem;
  line-height: 1rem;
}

.developer {
  opacity: 1;
  color: white;
  font-size: .75rem;
  line-height: 1rem;
}



/* =========================================================
   SOCIAL ICONS FOOTER
   ========================================================= */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
  transform: translateY(-3px);
}

.social-icons svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  transition: fill 0.3s ease;
}










/* !helpers */

.mt-1{margin-top:50px;}
.mt-2{margin-top:100px;}
.mt-3{margin-top:150px;}
.tw{color: #fff}
.tb{color: #010e30}
.bold{font-weight: bold;}


*,
*:before,
*:after{
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
      box-sizing: border-box;
}


/* Offset per l'header fisso quando si clicca sugli anchor link */
:target {
  scroll-margin-top: 90px; /* regola questo valore in base all'altezza effettiva dell’header */
}


html { scroll-behavior: smooth; }