.content-wrap{
    margin-bottom: 0px;
}
#hero-section{
    background-color: #F8F7F6;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: 0px;
}
.row-hero{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.title-hero{
    margin: 20px 0px 30px 0px;
}
.top-title-hero p{
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.top-title-hero img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.title-hero h1{
    /* font-size: 48px; */
    font-size: 3.33vw;
    color: var(--Core-Dark-Violet);
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
}
.title-hero p{
    /* font-size: 16px; */
    font-size: 1.11vw;
    color: #6D6289;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 30px;
}
.title-hero p strong,
.title-hero p b{
    color: var(--Core-Dark-Violet);
    font-weight: 500;
}
.cta-hero a{
    width: fit-content;
}
.col-hero-right img{
    border-radius: 16px;
}


/* Episodes section */
.row-episodes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.col-episode{
    border: 2px solid #D6DEE8;
    border-radius: 16px;
    box-shadow: 0px 0px 55px 21px rgba(215,223,233,0.59);
    -webkit-box-shadow: 0px 0px 55px 21px rgba(215,223,233,0.59);
    -moz-box-shadow: 0px 0px 55px 21px rgba(215,223,233,0.59);
}
.col-episode .block-image img{
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}
.col-episode .block-text{
    padding: 24px;
}

.col-episode .block-text p{
    display: flex;
    align-items: center;
    color: var(--Core-Base-Black);
    font-size: 14px;
}
.col-episode .block-text p img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.col-episode .block-text h3{
    /* font-size: 32px; */
    font-size: 2.22vw;
    color: #1C222B;
    line-height: 1.3;
    font-weight: 400;
    margin-top: 15px;
}

#paginationControls {
    text-align: center;
    margin-top: 80px;
}
#paginationControls button {
    margin: 0;
    padding: 6px 12px;
    cursor: pointer;
    background: none;
    border: none;
    /* font-size: 24px; */
    font-size: 1.66vw;
    line-height: 1;
    font-weight: 400;
    color: #999999
}  
#paginationControls button.active {
    color: var(--Core-Base-Black);
}
  

/* our-hosts-section */
#our-hosts-section{
    background-color: #F9FAFB;
    padding-top: 80px;
    padding-bottom: 80px;
}
.row-our-hosts{
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    gap: 30px;
}
.col-left-hosts img{
    border-radius: 10px;
}
.top-title-hosts p{
    /* font-size: 16px; */
    font-size: 1.11vw;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1C222B;
    font-weight: 500;
}
.title-hosts{
    margin-top: 30px;
}
.title-hosts h2,
.col-episodes-title h2{
    /* font-size: 48px; */
    font-size: 3.33vw;
    color: var(--Core-Dark-Violet);
    line-height: 1.2;
    letter-spacing: -1.75px;
    font-weight: 500;
    margin-bottom: 30px;
}
.title-hosts p{
    /* font-size: 20px; */
    font-size: 1.38vw;
    color: #455468;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 30px;
}
.title-hosts p:last-child{
    margin-bottom: 0px;
}


#footer-section-dont-compromise{
    margin-top: 0px;
}
@media(min-width: 1440px){
    .top-title-hero p{
        font-size: 14px;
    }
    .title-hero h1{
        font-size: 48px;
    }
    .title-hero p{
        font-size: 16px;
    }

    .col-episode .block-text p{
        font-size: 14px;
    }
    .col-episode .block-text h3{
        font-size: 32px;
    }
    #paginationControls button {
        font-size: 24px;
    }

    .top-title-hosts p{
        font-size: 16px;
    }
    .title-hosts h2,
    .col-episodes-title h2{
        font-size: 48px;
    }
    .title-hosts p{
        font-size: 20px;
    }
}

@media(max-width: 1000px){
    .title-hosts h2 br,
    .col-episodes-title h2 br{
        display: none;
    }
    #hero-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .row-hero{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .col-hero-left{
        order: 2;
    }
    .top-title-hero p {
        font-size: 12px;
    }
    .title-hero h1 {
        font-size: 40px;
    }
    .title-hero h1 br{
        display: none;
    }
    .title-hero p{
        font-size: 14px;
    }


    .row-episodes{
        grid-template-columns: 1fr;
    }
    .row-our-hosts{
        grid-template-columns: 1fr;
    }
    .col-episode .block-text p img {
        margin-right: 5px;
    }
    .col-episode .block-text p {
        font-size: 12px;
    }
    .col-episode .block-text h3 {
        font-size: 24px;
        line-height: 1.4;
    }
    #paginationControls {
        margin-top: 35px;
    }
    #paginationControls button{
        font-size: 20px;
    }

    #our-hosts-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .top-title-hosts p {
        font-size: 16px;
    }
    .title-hosts h2,
    .col-episodes-title h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }
    .title-hosts p{
        font-size: 16px;
    }
}

@media (max-width: 350px) {
    /* .title-hero h1, */
    .title-hosts h2,
    .col-episodes-title h2 {
        font-size: 35px;
    }
    .col-episode .block-text h3 {
        font-size: 22px;
    }
}