@media (max-width: 768px) {
    body{
        width: 100%;
    }
    .bg2{
        background-position: bottom;
    }
    #hero{
        background: 100%;
        width: 100%;
        height:600px;
        z-index: 3;
        animation: none;
    }
    @keyframes degrade{
        0%, 100%{
            background-position: 0% 0%;
        }
        50%{
            background-position: 200% 100%;
        }
      }
    #hero::before {
        content: "";
        position: absolute;
        bottom: 5%;
        left: 0px;
        width: 200px;
        height: 108px;
        background: url('/assets/rota.svg') center/cover no-repeat;
        opacity: 0.25;
        animation: fadeIn-seta 2.5s ease-in forwards;
      }
      #hero::after {
        content: "";
        position: absolute;
        top: 0%;
        right: 0px;
        transform:  scale(-1, -1);
        width: 200px;
        height: 108px;
        background: url('/assets/rota.svg') center/cover no-repeat;
        opacity: 0.25;
        animation: fadeIn-seta 2.5s ease-in forwards;
      }
      #hero #logo{
        width: 120px;
      }
      #hero h1 {
          width: 400px;
        font-size: 42px;
        margin-bottom: 24px;
      }
      #hero h1::after {
        width: 160px;
        height: 50px;
        bottom: -48px;
        right: 20%;
      }
      #hero h2{
        font-size: 16px;
      }
      button {
        font-size: 16px;
      }
      #hero span{
        font-size: 12px;
      }
      .marquee-content {
        animation: marquee 5s linear infinite;
      }
      .marquee-content span {
        margin: 0px 24px;
      }
}