body {
   overflow-x: hidden;
}

.ms-speakers-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 3rem 1.5rem;
   padding-inline: 30px;
}

/* Notebook */
@media (max-width: 1200px) {
   .ms-speakers-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Tablet */
@media (max-width: 992px) {
   .ms-speakers-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Mobile */
@media (max-width: 576px) {
   .ms-speakers-grid {
      grid-template-columns: 1fr;
   }
}

.ms-speaker-card {
   position: relative;
}

.ms-speaker-image {
   position: relative;
   max-width: min(80%, 250px);
   margin-inline: auto;
}

.ms-speaker-image img {
   display: block;
   width: 100%;
   height: auto;
   z-index: 2;
   border-radius: 50%!important;
   aspect-ratio: 1;
}

.ms-speaker-svg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: -1;

}

.ms-speaker-svg .svg1,
.ms-speaker-svg .svg2 {
   --width-extra: 10%;
   position: absolute;
   width: calc(100% + var(--width-extra));
   max-width: none;
   transition: transform .8s ease;
   will-change: transform;
}

.ms-speaker-svg .svg1 {
   top: calc(var(--width-extra) / 2 * (-1));
   left: calc(var(--width-extra) / 2 * (-1));
}

.ms-speaker-svg .svg2 {
   bottom: calc(var(--width-extra) / 2 * (-1));
   right: calc(var(--width-extra) / 2 * (-1));
}

.ms-speaker-card:hover .svg1 {
   transform: rotate(180deg);
}

.ms-speaker-card:hover .svg2 {
   transform: rotate(-180deg);
}


@keyframes msRotateClockwise {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

@keyframes msRotateCounter {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(-360deg);
   }
}



.ms-speaker-card .svg1 {
   animation: msRotateClockwise 8s linear infinite;
   animation-play-state: paused;
}

.ms-speaker-card .svg2 {
   animation: msRotateCounter 8s linear infinite;
   animation-play-state: paused;
}

.ms-speaker-card:hover .svg1 {
   animation-play-state: running;
}

.ms-speaker-card:hover .svg2 {
   animation-play-state: running;
}


.ms-speaker-content {
   text-align: center;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.ms-speaker-content .name,
.ms-speaker-content .name .ms-open-modal {
   margin: 0;
   font-size: 2rem;
   margin-top: 1rem;
   color: #fff;
   font-family: "Syne", Sans-serif;
   line-height: 1.24;
}

.ms-speaker-content .name .ms-open-modal {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
}

.ms-speaker-content:hover .name .ms-open-modal {
   text-decoration: underline;
}

/* @media (min-width:1200px) {
   .ms-speaker-content .name {
      margin-top: 2rem;
   }
} */

.ms-speaker-position {
   margin-bottom: 10px;
   color: #e1e1e1;
   font-size: 0.9rem;
   font-family: "Plus Jakarta Sans", 'Inter', Sans-serif;
   line-height: 1.4;
   padding-inline: 15px;
}



#ms-modal {
   position: fixed;
   inset: 0;
   z-index: 9999;

   display: none;
}

#ms-modal.active {
   display: flex;
   align-items: center;
   justify-content: center;
}

.ms-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .8);
}

.ms-content {
   position: relative;
   z-index: 2;

   background: #062734;
   width: min(900px, 95vw);
   max-height: 90vh;
   overflow-y: auto;
   padding: 30px;
   border-radius: 20px;
   color: #fff;
}

.ms-speaker-profile {
   display: grid;
   grid-template-columns: 250px 1fr;
   gap: 40px;
   align-items: start;
}

.ms-speaker-profile__image img {
   width: 100%;
   height: auto;
   display: block;

   border-radius: 50%!important;
	aspect-ratio: 1;
    object-fit: cover;
}

.ms-speaker-profile__name {
   margin: 0 0 10px;
   font-size: 2rem;
   line-height: 1.1;
   font-family: "Syne", Sans-serif;
   line-height: 1.24;
   color: #fff;

}

.ms-speaker-profile__position {
   margin-bottom: 20px;

   font-size: .95rem;
   font-weight: 600;

   color: #00a86b;
}

.ms-speaker-profile__bio {
   line-height: 1.7;
   color: #fff;
   font-family: "Plus Jakarta Sans", 'Inter', Sans-serif;
   font-size: 0.95rem;
}


.ms-speaker-profile__bio p:first-child {
   margin-top: 0;
}

.ms-speaker-profile__social {
   display: flex;
   gap: 12px;
}

.ms-speaker-profile__social a {
   width: 44px;
   height: 44px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: #5AA74F;

   text-decoration: none;

   transition: .3s;
}

.ms-speaker-profile__social a:hover {
   transform: translateY(-3px);
}

.ms-speaker-profile__social i {
   font-size: 18px;
}

@media (max-width: 768px) {

   .ms-speaker-profile {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .ms-speaker-profile__image {
      max-width: 320px;
      /* max-width: 100%; */
      margin: 0;
   }

   .ms-speaker-profile__name {
      font-size: 1.6rem;
   }

}

.ms-actions .ms-open-modal {
   display: inline-flex;
   align-items: center;
   gap: 8px;

   font-size: 14px;
   font-weight: 600;

   text-decoration: none;

   color: #00A86B;
   border: none;
   background: none;
   text-decoration: underline;
   transition: .3s;

   cursor: pointer;
   padding-inline: 0;

}


.ms-open-modal:hover {
   color: #067e66;
}

.ms-open-modal:hover::after {
   transform: translateX(6px);
}

.ms-edit-speaker {
   margin-left: 10px;
}

.ms-close {
   position: absolute;
   top: 20px;
   right: 20px;

   width: 42px;
   height: 42px;

   display: flex;
   align-items: center;
   justify-content: center;

   border: none;
   border-radius: 50%;

   background: #f5f5f5;
   color: #333;

   font-size: 32px;
   line-height: 1;

   cursor: pointer;

   transition: all .3s ease;
   z-index: 10;
}

.ms-close:hover {
   background: #00A86B;
   color: #fff;
   transform: rotate(90deg);
}

.ms-close:focus {
   outline: none;
}

.ms-close:focus-visible {
   outline: 2px solid #00A86B;
   outline-offset: 2px;
}