@media (max-width: 1700px) {
  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-40vw, 50vh) rotate(0deg);
      opacity: 1;
    }
  }
}

@media (max-width: 1550px) {
  .hero .col-12 .background-overlay {
    gap: 12rem;
  }
}

@media (max-width: 1500px) {
  .blue-can {
    width: 30%;
  }

  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-38vw, 50vh) rotate(0deg);
      opacity: 1;
    }
  }
}

@media (max-width: 1399.98px) {
  .hero .col-12::after {
    background-position: 92% center;
  }
}

@media (max-width: 1199.98px) {
  .hero .col-12::after {
    background-position: 87% center;
  }

  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-40vw, 60vh) rotate(0deg);
      opacity: 1;
    }
  }
}

@media (max-width: 991.98px) {
  .logo {
    padding-top: 1.5rem;
  }

  .hero .col-12 .background-overlay {
    gap: 2rem;
  }

  .hero .col-12 {
    height: 50% !important;
  }

  .blue-can {
    width: 40%;
  }

  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-75vw, 55vh) rotate(5deg);
      opacity: 1;
    }
  }
}

@media (max-width: 820px) {
  .blue-can {
    width: 45%;
  }

  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-73vw, 58vh) rotate(5deg);
      opacity: 1;
    }
  }
}

@media (max-width: 767.98px) {
  .hero .col-12 .background-overlay {
    gap: 4rem;
  }

  .logo img {
    width: 10rem;
    height: auto;
  }

  .logo svg {
    width: 10rem;
    height: auto;
  }

  .content-box {
    gap: 2rem;
    max-width: 30rem;
  }

  .text-box {
    gap: 0.5rem !important;
  }

  .content-box .text-box h1 {
    font-size: 1.785rem;
    line-height: 2.375rem;
  }

  .content-box .text-box p {
    font-size: 0.875rem;
  }

  .btn-wrapper span {
    font-size: 0.875rem;
  }

  .btn-wrapper span svg {
    height: 20px;
  }
}

@media (max-width: 720px) {
  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-75vw, 64vh) rotate(5deg);
      opacity: 1;
    }
  }
}

@media (max-width: 650px) {
  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-78vw, 72vh) rotate(0deg);
      opacity: 1;
    }
  }
}

@media (max-width: 575.98px) {
  .hero .col-12 .background-overlay {
    gap: 3.5rem;
  }

  .content-box {
    padding: 0 1rem;
  }

  /* .logo img {
    width: 8.5rem;
    height: auto;
  }

  .logo svg {
    width: 8.5rem;
    height: auto;
  } */

  .content-box {
    max-width: 28rem;
  }

  .text-box {
    gap: 0.5rem !important;
  }

  .content-box .text-box h1 {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .content-box .text-box p {
    font-size: 0.8rem;
  }

  .btn-wrapper span {
    font-size: 0.8rem;
  }

  .btn-wrapper span svg {
    height: 20px;
  }

  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-78vw, 78vh) rotate(0deg);
      opacity: 1;
    }
  }
}

@media (max-width: 500px) {
  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-82vw, 84vh) rotate(0deg);
      opacity: 1;
    }
  }
}

@media (max-width: 430px) {
  @keyframes dropIn {
    from {
      transform: translate(0vw, -100vh) rotate(0deg);
      opacity: 0;
    }
    to {
      transform: translate(-88vw, 90vh) rotate(0deg);
      opacity: 1;
    }
  }
}