.banner {
      background-image: url(../image/teambg.jpg);
  }

  .content1 {
      display: flex;
      align-items: center;
      gap: 40px;
  }

  .leftside {
      width: 40%;
  }

  .leftside img {
      width: 100%;
      border-radius: 20px;
  }

  .rightside {
      flex-direction: column;
      width: 60%;
  }

  .rightside h3 {
      color: var(--primary-red);
      margin: 0px;
  }

  .rightside h2 {
      margin-top: 0px;
  }

  .content2 h3 {
      color: var(--primary-red);
  }

  .vinyls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
      gap: 40px;
  }

  .genre {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
  }

  .vinyl {
      display: flex;
      justify-content: center;
      width: 100%;
  }

  .vinyl img {
      width: 100%;
  }

  .content3>h3 {
      color: var(--primary-red);
  }

  .boxes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
  }

  .expertise-card {
      background: var(--dark);
      border-radius: 20px;
      padding: 30px;
      color: var(--light);
      text-align: center;
  }

  .content4 h3 {
      color: var(--primary-red);
  }

  .bts-card {
      background-image: url(../image/btsimg.jpg);
      min-height: 400px;
      border-radius: 20px;
      background-size: cover;
      display: flex;
      align-items: flex-end;
  }

  .text {
      color: var(--light);
      padding: 35px;
  }

  .text p {
      margin-bottom: 40px;
  }

  .button-right {
      display: flex;
      justify-content: flex-end;
  }

  .content5 h3 {
      color: var(--primary-red);
  }

  .join-card {
      background-image: url(../image/joinusbg.jpg);
      min-height: 400px;
      border-radius: 20px;
      background-size: cover;
      display: flex;
      align-items: flex-end;
  }

  .card-text {
      color: var(--light);
      padding: 35px;
      width: 100%;
  }

  .card-text p {
      margin: 0px;
  }

  p.email {
      margin: 40px 0px;
  }

  @media (max-width: 1180px) {
      .leftside {
          width: 40%;
      }

      .rightside {
          width: 60%;
      }
  }

  @media (max-width: 990px) {
      .leftside {
          width: 45%;
      }

      .rightside {
          width: 55%;
      }

      .vinyls {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }

      .vinyl img {
          width: 80%;
      }
  }

  @media (max-width: 768px) {
      .content1 {
          flex-direction: column;
      }

      .leftside,
      .rightside {
          width: 100%;
      }

      .vinyls {
          grid-template-columns: 1fr;
      }

      .boxes {
          grid-template-columns: 1fr;
      }
  }