.header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: baseline;

  background: url(../img/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow-x: hidden;
}

.header div {
  padding: 300px;
  width: 100%;
}

.header div h1 {
  font-size: 50px;
  font-weight: 900;
  color: #2c3346;
}

.header div p {
  font-size: 30px;
  color: #2c3346;
}


@media screen and (max-width: 630px) {
  .header div {
    padding: 100px 24px; /* Adjust padding to fit within viewport */
  }

  .header div h1 {
    font-size: 25px;
    color: #2c3346;
  }

  .header div p {
    font-size: 14px;
    color: #2c3346;
  }
}

@media screen and (max-width: 600px) {
  .header div {
    padding: 100px 24px; /* Adjust padding to fit within viewport */
  }

  .img {
    width: 100%; /* Ensure images scale within their container */
  }

  .title {
    font-size: 1rem;
  }
}