/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1280px) {
  .navbar {
    width: 752px;
  }
  .hero-left {
    padding: 50px 0px 50px 50px;
    width: 80%;
  }
  .hero-right {
    padding-top: 0px;
    padding-bottom: 60px;
    width: 40%;
  }
  .cards {
    display: flex;
  }
  .content-left {
    padding: 80px 20px 80px 50px;
  }
  .content-right {
    padding: 80px 50px 80px 0px;
  }
}

@media (max-width: 1024px) {
  .navbar {
    width: 752px;
  }
  .hero-left {
    padding: 50px 0px 50px 50px;
    width: 80%;
  }
  .hero-right {
    padding-top: 0px;
    padding-bottom: 60px;
    width: 40%;
  }
  .cards {
    display: flex;
  }
  .content-left {
    padding: 80px 20px 80px 50px;
  }
  .content-right {
    padding: 80px 50px 80px 0px;
  }
}

@media (max-width: 965px) {
  .mob { max-width: 90% !important; height: 60% !important; }
  .container { width: 95%; }
  .navbar {
    display: none; /* Replace with mobile menu later */
  }
  .cards {
    display: block;
  }

}


@media (max-width: 550px) {
  .container {
    width: 90%;
  }
  .navbar {
    display: none; /* Replace with mobile menu later */
  }
  .hero h1 {
    font-size: 2rem;
    line-height: 2.2rem;
  }
  .hero {
    display: block;
  }
  .hero {
    background: none, linear-gradient(to bottom, #ffffff, #f97428);;
  }
  .hero-left {
    text-align: left;
    padding: 20px 20px;
    width: 100%;
  }
  .hero-right {
    text-align: left;
    padding-top: 0px;
    text-align: center;
    width: 100%;
  }
  .content-left {
    padding: 0px 20px;
    width: 100%;
  }
  .content-right {
    padding: 20px 20px;
    width: 100%;
  }
  .mission {
    display: block;
  }
  .approach {
    display: block;
  }
  .card {
    padding: 0px;
  }
  .cards {
    display: grid;
  }

}