.sem-main .title-separator {
  border-top: 2px solid #ef5a21;
  display: flex;
  width: 150px;
  margin: 0 auto;
}

.sem-main .nav-tabs .nav-item {
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #bebebe;
  padding: 12px;
}

.sem-main .nav-tabs .nav-item:hover {
  background-color: #ef5a21;
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  color: #fff;
}

.sem-main .nav-tabs .nav-item.active {
  background-color: #ef5a21;
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  color: #fff;
}

.sem-main .event-image {
  border-radius: 50% 50% 50% 50%;
  max-width: 120px !important;
  height: 120px !important;
}

.sem-main .card-main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.sem-main .image-section {
  flex: 15%;
  max-width: 15%;
}

.sem-main .content-section {
  flex: 80%;
  max-width: 80%;
}

.sem-main .button-section {
  flex: 5%;
  max-width: 5%;
}

.sem-main .date-section {
  flex: 30%;
  max-width: 30%;
}

.sem-main .time-section {
  flex: 30%;
  max-width: 30%;
}

.sem-main .action-button-section {
  flex: 40%;
  max-width: 40%;
}

@media (max-width: 1024px) {
  .sem-main .card-main {
    flex-direction: column;
  }

  .sem-main .image-section {
    flex: 100%;
    max-width: 100%;
  }

  .sem-main .content-section {
    flex: 100%;
    max-width: 100%;
  }

  .sem-main .button-section {
    flex: 100%;
    max-width: 100%;
  }

  .sem-main .event-title {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .sem-main .date-time-section {
    flex-direction: column;
  }

  .sem-main .date-section {
    flex: 100%;
    max-width: 100%;
    text-align: center;
    margin: 5px;
  }

  .sem-main .time-section {
    flex: 100%;
    max-width: 100%;
    text-align: center;
    margin: 5px;
  }

  .sem-main .action-button-section {
    flex: 100%;
    max-width: 100%;
    margin: 5px;
  }
}