/* defaults */
:root {
    --pale-black: #171E1D;
    --pale: #F5F3ED;
    --coral: #ff5252;
    --coral-gradient: linear-gradient(90deg, #FF5252 0%, #ED3D69 111.81%);
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    font-family: Poppins, sans-serif !important;
}

p,
input,
button,
a,
div {
    font-family: Poppins, sans-serif !important;
    font-size: 16px;
}

/* global css */
.site-main {
    padding: 0px;
    max-width: none;
}

.nav-wrapper {
    z-index: 999;
}

.btn.btn-tertiary.hover-white:hover,
.btn.btn-secondary.hover-white:hover {
    background: var(--white);
    color: var(--black);
}

.content-wrapper {
    max-width: 1192px;
    margin: 0 auto;
}

.heading-with-cta {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
}

.content-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
}

.content-column h1,
.content-column p {
    margin: 0px;
}

.cta-column {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

/* Ambassador Lists */
.marketers-list .marketer-card .instructor-profile {
    height: auto;
}
.marketers-section .marketers-content {
    gap: 48px;
}
.marketers-section .heading-decal {
    position: relative;
}
.marketers-section .btn {
    margin-top: 0;
}
.marketers-section .btn:hover {
    background: var(--coral-gradient);
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
}
.marketers-section .content-column h2 {
    margin-bottom: 0;
}
.marketers-section .content-column h2 .text-italic{
    padding-bottom: 0;
}
.marketers-section .heading-decal::before {
    position: absolute;
    content: '';
    height: 40px;
    width: 40px;
    background-image: url(/assets/img/asterisk-small.svg?v=3221);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    right: -50px;
}
.marketers-section.bg-white {
    background-image: url(/assets/img/eclipse-coral-full.svg?v=3221);
    background-position: -400px bottom;
}
.marketers-list .marketer-card .basic-info{
    position: relative;
}
.marketers-section.bg-white .marketer-card{
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
.marketers-list .marketer-card h5:after {
    position: absolute;
    top: 30%;
    right: 0;
    transition: all 0.1s ease-out;
    content: url(/assets/img/arrow-right-coral.svg?v=3221);
    filter: invert(78%) sepia(9%) saturate(17%) hue-rotate(358deg) brightness(88%) contrast(91%);
}
.marketers-list .marketer-card:hover h5:after {
    right: -8px;
    filter: none;
}
.marketers-list.limit-logo-display .marketer-card:nth-child(n+7) {
    display: none;
}

/* banner listing section */
.banner-listing-section {
    background: var(--black);
    color: var(--white);
    margin: 0;
    padding: 80px 0px;
}

.banner-listing-section .heading-decal {
    position: relative;
}

.banner-listing-section .heading-decal::before {
    position: absolute;
    content: '';
    height: 40px;
    width: 40px;
    background-image: url(/assets/img/asterisk-white.svg?v=3221);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    right: -50px;
}

.banner-listing-section .cta-column {
    position: relative;
}

.banner-listing-section .cta-column::before {
    position: absolute;
    content: '';
    height: 130px;
    width: 130px;
    background-image: url(/assets/img/curly_arrow_down-white.svg?v=3221);
    background-size: contain;
    background-repeat: no-repeat;
    top: -140px;
    right: 60px;
    transform: rotate(20deg);
}

/* ambassadors section */
.ambassadors-section {
    background: var(--white);
    color: var(--black);
    margin: 0;
    padding: 80px 0px;
    background-image: url(/assets/img/eclipse-coral-full.svg?v=3221);
    background-repeat: no-repeat;
    background-position: -80%;
}

.ambassadors-section .heading-decal {
    position: relative;
}

.ambassadors-section .heading-decal::before {
    position: absolute;
    content: '';
    height: 40px;
    width: 40px;
    background-image: url(/assets/img/asterisk-coral.svg?v=3221);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    right: -50px;
}

.ambassador-listing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}

.ambassador-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    background: var(--pale);
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
}

.ambassador-image-wrapper {
    height: 260px;
    overflow: hidden;
    width: 100%;
    border-radius: 12px;
}

.ambassador-image-wrapper img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: top;
}

.ambassador-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ambassador-details p {
    margin: 0;
}

/* Search Filter */
.chapter-listing-filter-searchbox-wrapper {
    position: relative;
}
.chapter-listing-filter-searchbox-wrapper::before {
    content: url(/assets/img/search.svg?v=3221);
    color: #fff;
    position: absolute;
    top: 5px;
    left: 0;
}

/* testimonials section */
.testimonials-section {
    background: var(--white);
    color: var(--black);
    margin: 0;
    padding: 80px 0px;
}

/* previous meetuops section */
.previous-meetups-section {
    background: var(--black);
    color: var(--white);
    margin: 0;
    padding: 80px 0px;
    background-image: url(/assets/img/eclipse-banner.svg?v=3221);
    background-repeat: no-repeat;
    background-position: top right;
}

.previous-meetups-section .previous-image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.previous-meetups-section .previous-image-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

.previous-meetups-section .content-decal {
    transform: scale(-1, 1) rotate(336deg);
    height: 160px;
    width: auto;
}

/* resquest section */
.request-section {
    background: var(--coral-gradient);
    color: var(--black);
    margin: 0;
    padding: 80px 0px;
}

.request-section .request-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 24px;
}

.request-section .request-content * {
    margin: 0;
}


/* Modal */
.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; /* Two equal columns */
  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: 185px;
  height: 164px;
  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=3221?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 only screen and (max-width: 1192px) {
    .content-wrapper {
        padding: 0px 32px;
    }
}

@media only screen and (max-width: 1024px) {
    .marketers-section .marketers-content {
        padding: 0px 32px;
    }
    .marketers-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-content {
        display: flex;
        grid-template-columns: 360px 324px;
        padding: 80px 56px;
        width: 91%;
        flex-direction: column;
    }
    .content-column {
        width: 60%;
    }
   
    .ambassador-listing {
        grid-template-columns: 1fr 1fr;
    }

    .previous-meetups-section .previous-image-gallery {
        grid-template-columns: 1fr 1fr;
    }
}

@media all and (max-width: 768px) {
    .marketers-list {
        grid-template-columns: repeat(1, 1fr);
    }
     .previous-meetups-section .content-column, .marketers-section .content-column, .request-section .content-column {
        width: 100%;
    }
    .marketers-section .heading-decal::before {
        right: 0;
    }
}

@media only screen and (max-width: 600px) {
    .content-wrapper {
        padding: 0px 32px;
    }

    .banner-listing-section .cta-column::before {
        display: none;
    }
    .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;
    }

    .heading-with-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    h1 {
        font-size: 52px;
        line-height: 1;
    }

    .banner-listing-section {
        padding: 56px 0px;
    }

    .ambassadors-section {
        padding: 56px 0px;
    }

    h2 {
        font-size: 42px;
        line-height: 1;
    }

    .ambassador-listing {
        grid-template-columns: 1fr;
    }

    .previous-meetups-section .content-decal {
        display: none;
    }

    .previous-meetups-section .previous-image-gallery {
        grid-template-columns: 1fr;
        margin-top: 12px;
    }

    .request-section .request-content img {
        width: 100%;
    }
}