@media screen and (max-width: 639px) {
  .w-sm-100{width:100% !important}
  .w-sm-90{width:90% !important}
  .w-sm-80{width:80% !important}
  .w-sm-70{width:70% !important}
  .w-sm-60{width:60% !important}
  .w-sm-50{width:50% !important}
  .w-sm-40{width:40% !important}
  .w-sm-30{width:30% !important}
  .w-sm-20{width:20% !important}
  .w-sm-10{width:10% !important}
  .f-sm-1{font-size:1rem !important}
  .f-sm-2{font-size:2rem !important}
  .f-sm-3{font-size:3rem !important}
  .f-sm-4{font-size:4rem !important}

  nav button.bars{display:block}
  nav .links{display:none}
  nav .links ul{display:flex;flex-direction: column  }
  nav .links ul li{margin: 10px; font-size: larger; }
  nav .links.menu{display:flex;flex-direction: column;  }

  nav .nav-content{display:flex;flex-wrap:wrap;justify-content:space-between}
  nav .nav-content .text-header{width:50%}
  .items{flex-direction:column;}
  .flex{flex-wrap:wrap;gap: 10px;}
  .my-sm-10{margin-top:10rem !important;margin-bottom:10rem !important}
  .my-sm-20{margin-top:20rem !important;margin-bottom:20rem !important}
  .my-sm-30{margin-top:30rem !important;margin-bottom:30rem !important}
  .my-sm-40{margin-top:40rem !important;margin-bottom:40rem !important}
  .my-sm-50{margin-top:50rem !important;margin-bottom:50rem !important}
}


@media screen and (min-width: 640px) and (max-width: 767px) {
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-90 {
    width: 90% !important;
  }
  .w-md-80 {
    width: 80% !important;
  }
  .w-md-70 {
    width: 70% !important;
  }
  .w-md-60 {
    width: 60% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-40 {
    width: 40% !important;
  }
  .w-md-30 {
    width: 30% !important;
  }
  .w-md-20 {
    width: 20% !important;
  }
  .w-md-10 {
    width: 10% !important;
  }

  .f-md-25 {
    font-size: 25rem !important;
  }
  .f-md-20 {
    font-size: 20rem !important;
  }
  .f-md-15 {
    font-size: 15rem !important;
  }
  .f-md-10 {
    font-size: 10rem !important;
  }
  .my-md-10{
  margin-top:10rem !important ;
  margin-bottom:10rem !important ;
 }
 .my-md-30{
  margin-top:30rem !important ;
  margin-bottom:30rem !important ;
 }
 .my-md-40{
  margin-top:40rem !important ;
  margin-bottom:40rem !important ;
 }
 .my-md-50{
  margin-top:50rem !important ;
  margin-bottom:50rem !important ;
 }
 .my-md-20{
  margin-top:20rem !important ;
  margin-bottom:20rem !important ;
 }
  nav button.bars{display:block}
  nav .links{display:none}
  nav .links ul{display:flex;flex-direction: column  }
  nav .links ul li{margin: 10px; font-size: larger; }
  nav .links.menu{display:flex;flex-direction: column;  }

  nav .nav-content{display:flex;flex-wrap:wrap;justify-content:space-between}
  nav .nav-content .text-header{width:50%}

  .items{
  flex-direction: column;
}
.flex{
  flex-wrap: wrap;
}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-90 {
    width: 90% !important;
  }
  .w-lg-80 {
    width: 80% !important;
  }
  .w-lg-70 {
    width: 70% !important;
  }
  .w-lg-60 {
    width: 60% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-40 {
    width: 40% !important;
  }
  .w-lg-30 {
    width: 30% !important;
  }
  .w-lg-20 {
    width: 20% !important;
  }
  .w-lg-10 {
    width: 10% !important;
  }

  .f-lg-25 {
    font-size: 25rem !important;
  }
  .f-lg-20 {
    font-size: 20rem !important;
  }
  .f-lg-15 {
    font-size: 15rem !important;
  }
  .f-lg-10 {
    font-size: 10rem !important;
  }
   .my-lg-10{
  margin-top:10rem !important ;
  margin-bottom:10rem !important ;
 }
 .my-lg-30{
  margin-top:30rem !important ;
  margin-bottom:30rem !important ;
 }
 .my-lg-40{
  margin-top:40rem !important ;
  margin-bottom:40rem !important ;
 }
 .my-lg-50{
  margin-top:50rem !important ;
  margin-bottom:50rem !important ;
 }
 .my-lg-20{
  margin-top:20rem !important ;
  margin-bottom:20rem !important ;
 }
 
  .items{
  flex-direction: column;
}
.flex{
  flex-wrap: wrap;
}
.nav-content{
  display: flex;
  flex-wrap: wrap;
}
.nav-content .links{
  width: 80%;
  ul{
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0;

  }

}
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .w-xl-100 {
    width: 100% !important;
  }
  .w-xl-90 {
    width: 90% !important;
  }
  .w-xl-80 {
    width: 80% !important;
  }
  .w-xl-70 {
    width: 70% !important;
  }
  .w-xl-60 {
    width: 60% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-40 {
    width: 40% !important;
  }
  .w-xl-30 {
    width: 30% !important;
  }
  .w-xl-20 {
    width: 20% !important;
  }
  .w-xl-10 {
    width: 10% !important;
  }

  .f-xl-25 {
    font-size: 25rem !important;
  }
  .f-xl-20 {
    font-size: 20rem !important;
  }
  .f-xl-15 {
    font-size: 15rem !important;
  }
  .f-xl-10 {
    font-size: 10rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .w-2xl-100 {
    width: 100% !important;
  }
  .w-2xl-90 {
    width: 90% !important;
  }
  .w-2xl-80 {
    width: 80% !important;
  }
  .w-2xl-70 {
    width: 70% !important;
  }
  .w-2xl-60 {
    width: 60% !important;
  }
  .w-2xl-50 {
    width: 50% !important;
  }
  .w-2xl-40 {
    width: 40% !important;
  }
  .w-2xl-30 {
    width: 30% !important;
  }
  .w-2xl-20 {
    width: 20% !important;
  }
  .w-2xl-10 {
    width: 10% !important;
  }

  .f-2xl-25 {
    font-size: 25rem !important;
  }
  .f-2xl-20 {
    font-size: 20rem !important;
  }
  .f-2xl-15 {
    font-size: 15rem !important;
  }
  .f-2xl-10 {
    font-size: 10rem !important;
  }
}