/* Modal */
.profile-image-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 10px;
}
body.modal-show .nav-wrapper {
  z-index: 998;
}
.instructor-profile {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marketers-list.limit-logo-display .marketer-card:nth-child(n+7) {
    display: none;
}
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal p{
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}
.modal.show, .modal.show.form-modal {
  display: flex;
  opacity: 1;
}
.modal-content {
  position: relative;
  top: auto;
  background-color: #fff;
  padding: 80px 124px;
  border-radius: 12px;
  width: 100%;
  max-width: 1192px;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  align-items: start;
  row-gap: 40px;
  column-gap: 24px;
  opacity: 0;
  transform: translateY(-3rem);
  transition: all 0.3s ease-out;
}
.form-modal .modal-content {
  max-width: 100%;
  width: auto;
  padding: 32px;
}

.modal.show .modal-content, .modal.show.form-modal .modal-content{
  opacity: 1;
  transform: translateY(0);
}
.form-modal.two-col .modal-content {
  max-width: 100%;
  width: auto;
  padding: 80px 124px;
}
.modal-content .profile-picture {
  width: auto;
  height: 266px;
  border-radius: 12px;
}
.modal-content .instructor-name {
  margin-top: 0;
  margin-bottom: 16px;
}
.modal-content .instructor-job_title {
  margin-bottom: 0;
}
.modal-content .instructor-linkedin img{
  margin-left: -5px;
}
.modal-content .col-group {
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 24px;
}
.modal-content .company-logo{
  height: 48px;
}
.modal-content h3, .modal-content h5 {
  margin-top: 0;
}
.modal.modal-show .modal-content {
  animation: fadeInDown 0.3s ease-in-out forwards;
}
.modal.modal-hide .modal-content {
  animation: fadeOutUp 0.2s ease-in-out forwards;
}

.modal-close, .x-modal-close {
  position: absolute;
  top: 29px;
  right: 27px;
  cursor: pointer;
}
.modal-close:before, .x-modal-close:before {
  content: url("/assets/img/close.svg?v=123422");
}

.modal .top-panel {
  grid-column: span 2;
}
.modal .left-panel {
  grid-column: span 1;
}
.modal .right-panel {
  grid-column: span 1;
}

@media all and (max-width: 820px) {
  .modal-content {
    width: 95%;
    padding: 70px 114px;
    gap: 60px;
    top: 5%;
  }
}
@media all and (max-width: 768px) {
  .form-modal.two-col .modal-content {
    padding: 56px 32px;
  }
  .modal-content {
    width: 95%;
    padding: 70px 114px;
    gap: 60px;
    top: 5%;
  }
  .modal-content {
    padding: 72px 32px 32px 32px;
    display: block;
    width: 90%;
    margin-bottom: 100px;
  }
  .modal-content .col-group {
    align-items: unset;
  }
  .modal-content .instructor-linkedin {
    display: block;
    margin-bottom: 30px;
  }
  .modal-content .profile-picture {
    width: 100%;
    height: unset;
  }
}

/* Animations */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3rem);
  }
}