/* 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: flex-start; /* or center */
  z-index: 1000; /* depending on what z-index values exist in your page, in order for the modal layer to sit on top of other content */
  overflow: auto; /* enable scrolling if needed - although this is not really necessary since we are going take care of overflow in modal-content */
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
}
.modal p{
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}
.modal.modal-show {
  animation: fadeIn 0.1s ease-in-out forwards;
}
.modal.modal-hide {
  animation: fadeOut 0.1s ease-in-out 0.1s forwards;
}
.modal-content {
  position: relative;
  top: 15%;
  /* display: grid;
  grid-template-columns: 535px 385px;
  grid-template-rows: auto 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;
}
.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 {
  position: absolute;
  top: 29px;
  right: 27px;
  cursor: pointer;
}
.modal-close:before {
  content: url("/assets/img/close.svg?v=123422");
}

.modal .top-panel {
  grid-column: span 2; /* First row spans across two columns */
}

.modal .left-panel {
  grid-column: span 1; /* Second row, first column */
}

.modal .right-panel {
  grid-column: span 1; /* Second row, second column */
}
@media all and (max-width: 768px) {
    .modal-content {
      width: 95%;
      padding: 70px 114px;
      gap: 60px;
      top: 5%;
    }
    .modal-content {
    padding: 72px 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;
  }
}