.white {
      width: 100%;
      height: 400px;
      background-color: #ECF6FF;
      display: flex;
      justify-content: start;
      align-items: center;
      filter:drop-shadow(0px 4px 4px #2d2d2d);
  }

  .white>.container {
      width: 85%;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
  }

  .black {
      width: 100%;
      height: 400px;
      background-color: #3F3F3F;
      display: flex;
      justify-content: end;
      align-items: center;
      filter:drop-shadow(0px 4px 4px #2d2d2d);
  }

  .black>.container {
      width: 85%;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .black>.container>.info>p {
      color: #ECF6FF;
      font-size: 20px;
      font-weight: 300;
  }

  .white>.container>.info>p {
      color: #3F3F3F;
      font-size: 20px;
      font-weight: 400;
  }

  .info>p>span {
      color: #FF5C00;
      font-weight: 600;
  }

  .info>a>.button {
      background-color: #FF5C00;
      padding: 10px;
      width: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px;
      margin-top: 10px;
  }

  .info>a>.button {
      font-family: ndot32;
      letter-spacing: 1.2px;
  }

  .info>a {
      cursor: pointer;
  }

  .info {
      width: 45%;
  }

  .image {
      height: 400px;
  }

  .image>img {
      width: 500px;
      height: 400px;
      object-fit: cover;
  }

  @media screen and (max-width: 600px) {

  .black {
      width: 100%;
      height: 70vh;
      justify-content: center;
  }


  .black>.container>.info>p {
      font-size: 16px;
  }

  .black>.container {
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .white {
      width: 100%;
      height: 70vh;
      justify-content: center;
  }

  .white>.container {
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .white>.container>.info>p {
      font-size: 16px;
  }

  
  .info {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
  }

  .image {
      height: 300px;
      padding-top: 5vw;
  }

  .image>img {
      width: 90vw;
      height: 300px;
      object-fit: cover;
  }
  }