.details-section {
  display: flex;
  flex-direction: column;
  padding: 105px;
  background-color: rgb(0, 49, 69);
  position: relative;

  .challenge-heading {
    color: white;
    background-color: rgb(0, 49, 69);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .time {
      background-color: rgb(255, 206, 92);
      color: black;
      font-size: 16px;
      font-weight: 700;
      padding: 6px 30px 6px 25px;
      border-radius: 7px;
      width: 520px;

      .bi-clock {
        font-size: 17px;
        margin: 0px 5px 0px 0px;
      }
    }
    .name {
      margin-top: 21px;
      font-size: 40px;
      font-weight: 700;
      color: white;
    }
    .desc {
      margin-top: 22px;
      font-size: 20px;
      font-weight: 500;
      color: white;
    }
    .level {
      margin-top: 22px;
      background-color: white;
      width: 105px;
      padding: 5px 10px;
      color: rgb(0, 49, 69);
      border-radius: 5px;
      font-weight: 600;

      img {
        padding-bottom: 4px;
      }
    }
  }
}
.edit-section {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 33px 120px;
  position: relative;

  .overview {
    font-size: 22px;
    font-weight: 700;
    color: black;
    padding-top: 5px;
    position: relative;
    top: 6px;

    &::before {
      content: "";
      position: absolute;
      width: 125px;
      background-color: rgb(68, 146, 76);
      height: 4px;
      top: 51px;
      left: -10px;
    }
  }

  .options {
    display: flex;
    justify-content: space-around;
    width: 200px;
    .btn-success {
      padding: 8px 28px;
      border-radius: 10px;
    }
    .btn-outline-danger {
      padding: 8px 20px;
      border-radius: 10px;
    }
  }
}

.description-section {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 120px;
  font-size: 20px;
  font-weight: 500;
  color: rgb(100, 96, 125);
  position: relative;
  box-shadow: 0 0 8px 12px rgb(229 236 241);
}

@media only screen and (max-width: 1025px) {
  .details-section {
    .level {
      img {
        padding-bottom: 4px;
        margin-right: 10px;
      }
    }
  }
  .description-section {
    padding: 50px 60px;
  
  }
}

@media only screen and (max-width: 770px) {
  .details-section {
    padding: 70px;
  }
  .edit-section {
    .options {
      display: flex;
      justify-content: space-around;
      width: 200px;
      position: relative;
      top: 10px;
      left: 60px;
      .btn-success {
        padding: 8px 28px;
        border-radius: 10px;
      }
      .btn-outline-danger {
        padding: 8px 20px;
        border-radius: 10px;
      }
    }
  }
}
@media only screen and (max-width: 430px) {
  .details-section {
    padding: 45px;
  }
  .edit-section {
    padding: 33px 75px;
    .options {
      width: 220px;
    }
  }
  .description-section {
    padding: 50px 35px;
  
  }
}

