.workshop-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 20px;
  }

  .workshop-container .workshop-name-1,
  .workshop-name-2,
  .workshop-name-3,
  .workshop-name-4 {
    width: 25%;
  }

  .workshop-container .workshop-name-1 {
    border-radius: 20px;
    box-shadow: 2px 2px 12px 6px #363535;
  }

  .workshop-container .workshop-name-2 {
    border-radius: 20px;
    box-shadow: 2px 2px 12px 6px #363535;
  }

  .workshop-container .workshop-name-3 {
    border-radius: 20px;
    box-shadow: 2px 2px 12px 6px #363535;
  }

  .workshop-container .workshop-name-4 {
    border-radius: 20px;
    box-shadow: 2px 2px 12px 6px #363535;
  }

  .workshop-container .workshop-name-1 .workshop-image-1 {
    width: 100%;
    color: white;
    background-image: url('https://files.iict.ac/media/cyber_security.webp');
    height: 220px;
    background-size: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-position: center;
  }

  .workshop-container .workshop-name-1 .text-content {
    background-color: #050b3d;
    padding: 18px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 100%;
    color: white;
  }

  .workshop-container .workshop-name-2 .workshop-image-2 {
    width: 100%;
    color: white;
    background-image: url('https://files.iict.ac/media/artificial_intelligence.webp');
    height: 220px;
    background-size: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-position: center;
  }

  .workshop-container .workshop-name-2 .text-content {
    background-color: #050b3d;
    padding: 18px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 100%;
    color: white;
  }

  .workshop-container .workshop-name-3 .workshop-image-3 {
    width: 100%;
    color: white;
    background-image: url('https://files.iict.ac/media/cloud_computing.webp');
    height: 220px;
    background-size: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-position: center;
  }

  .workshop-container .workshop-name-3 .text-content {
    background-color: #050b3d;
    padding: 18px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 100%;
    color: white;
  }

  .workshop-container .workshop-name-4 .workshop-image-4 {
    width: 100%;
    color: white;
    background-image: url('https://miro.medium.com/v2/resize:fit:1200/0*M4bxiCIjcTK-2Xr6.jpeg');
    height: 220px;
    background-size: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-position: center;
  }

  .workshop-container .workshop-name-4 .text-content {
    background-color: #050b3d;
    padding: 18px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 100%;
    color: white;
  }

  @media(max-width:1600px) {
    .html-form-container {
      zoom: 70%;
    }
  }

  @media(max-width:1280px) {
    .html-form-container {
      zoom: 60%;
    }

    .workshop-container .workshop-name-4 .text-content {
      height: 60px;
      padding: 20px;
    }
  }

  @media(max-width:1100px) {
    .html-form-container {
      zoom: 60%;
    }

    .workshop-container .workshop-name-4 .text-content {
      height: 83px;
      padding: 24px;
    }

    .workshop-container .workshop-name-3 .text-content {
      height: 83px;
      padding: 24px;
    }

    .workshop-container .workshop-name-2 .text-content,
    .workshop-name-3 .text-content,
    .workshop-name-4 .text-content {
      height: 83px;
      padding: 24px;
    }
  }
  @media(max-width:1000px){
    .workshop-container .workshop-name-1 .text-content {
      height: 83px;
      padding: 24px;
    }
  }
  @media(max-width:680px){
    .ongoing-workshops{
      zoom: 80%;
    }
  }
  @media(max-width:540px){
    .ongoing-workshops{
      zoom: 60%;
    }
  }
  @media(max-width:390px){
    .ongoing-workshops{
      zoom: 50%;
    }
  }