nav li a,
nav li {
    text-decoration: none;
    color: #493082;
    font-family: "Aller-regular", serif;
    font-size: 18px;
}

.blog {
    background: #feefec;
    margin-top: 10vh;
}

.blog-container {
    padding-top: 120px;
    padding-bottom: 120px;
}

.breadcrumb-item.active {
    color: var(--default-color);
}

.blog-title {
    width: fit-content;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 50px;
}

.blog-item {
    border-radius: 10px;
    border: 1px solid #20154e;
    background: #fff;
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    /* width: 431px; */
    height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
}

.blog-item h1 {
    color: #493082;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
}

.blog-item p {
    color: #20154e;
    font-family: "Aller-regular", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 29.576px;
    letter-spacing: -0.211px;
}

.blog-swiper {
    overflow-x: hidden;
    position: relative;
}

.blog-swiper a {
    text-decoration: none;
}

.blog .swiper-button-prev,
.blog .swiper-button-next {
    color: #20154e;
    border: none;
    border-radius: 18px;
    background: #f8f5ff;
    padding: 30px;
    height: 10px;
    width: 10px;
}

.latest {
    background: var(--bg-color-3);
}

#media-prev,
#media-next {
    color: #f8f5ff;
    border: none;
    border-radius: 18px;
    background: #20154e;
    padding: 30px;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 40%;
}

#media-container {
    position: relative;
}

.latest-container {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    gap: 100px;
   padding-top: 120px;
    padding-bottom: 120px;
}

.latest-container h1 {
    font-size: 40px;
    font-weight: 800;
    font-family: "Playfair Display", serif;
    color: var(--text-color-5);
    text-align: center;
}

.latest-list {
    gap: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.latest-top {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.news-top,
.news-bottom {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}

.latest-title {
    width: fit-content;
    margin: auto;
}

.latest-bottom {
    align-self: flex-end;
    display: flex;
    justify-content: space-evenly;
    gap: 30px;
}

.latest a {
    border-radius: 6px;
    background: #493082;
    border: none;
    color: #f8f5ff;
    font-family: "Aller-regular", serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.5px;
    padding: 5px;
    text-decoration: none;
}

.news {
    background: var(--bg-color-1);
    border-radius: 21px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    /* max-width: 430px; */
    gap: 10px;
     min-height: 280px;
}

.news p {
    font-size: 16px;
    font-weight: 400;
    font-family: "Aller-regular", serif;
    color: var(--text-color-2);
}

/* audio section */

.podcast-para {
    color: #493082;
    text-align: center;
    font-family: "Aller-regular", serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 30px;
}

.audio-section {
    padding: 120px 0 80px 0;
}

.audio-section-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: fit-content;
    margin: auto;
}

.podcast-underline {
    width: 100%;
}

.audio-section-title h1 {
    color: #20154e;
    text-align: center;
    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px; /* 100% */
    letter-spacing: -0.8px;
}

.audio-section-title p {
    color: #493082;
    text-align: center;
    font-family: "Aller-regular", serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px; /* 144.444% */
    padding-top: 30px;
}

.audio-section-bottom {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    margin-top: 100px;
}

/* newsletter */

.newsletter-section {
    background: #feefec;
}

.newsletter-container {
    padding-top: 120px;
    padding-bottom: 120px;
}

.newsletter-header {
    width: fit-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.newsletter-header h1 {
    color: var(--text-color-1);
    text-align: center;
    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 700;
}

.newsletter-header .underline {
    width: 100%;
}

.newsletter-text p {
    color: var(--text-color-2);
    text-align: center;
    font-family: "Aller-regular", serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin-top: 50px;
    margin-bottom: 80px;
}

.newsletter-list {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.newsletter {
    background: var(--default-color);
    border-radius: 10px;
    border: 2px solid #faaf40;
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 452px;
    min-height: 600px;
}

.newsletter-image {
    width: 100%;
    /* background: var(--bg-color-3); */
    border-radius: 10px;
    overflow: hidden;
}

.newsletter-image img {
    width: 100%;
}

.newsletter-title h1 {
    color: var(--text-color-2);
    font-family: "Playfair Display", serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 129.162%;
    margin-top: 20px;
    margin-bottom: 30px;
}

.newsletter-date p {
    color: var(--text-color-1);
    font-family: "Aller-regular", serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 29.576px;
}

#newsletter-prev,
#newsletter-next {
    position: absolute !important;
}

.swiper-button-prev,
.swiper-button-next {
    background-color: var(--text-color-1);
    color: var(--default-color);
    border: none;
    border-radius: 50%;
    padding: 20px;
    height: 10px;
    width: 10px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px;
    font-weight: 800;
}

.newsletter-slider a {
    text-decoration: none;
}

.involve {
    background-color: #feefec;
    padding-bottom: 120px;
}
.involve-title {
    width: fit-content;
    margin: auto;
}

.involve-title h1 {
    color: #20154e;
    text-align: center;
    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 700;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.involve-box input {
    border-radius: 6px;
    background: #fff;
    border: none;
    color: #635b83;
    font-family: "Aller-regular", serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 100%;
}

.involve-box textarea {
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: 10px;
}

.involve-box form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.involve-box form div {
    display: flex;
    gap: 15px;
}

.involve-box button {
    color: #fff;
    text-align: center;
    font-family: "Aller-regular", serif;
    font-size: 16px;
    font-weight: 400;
    border-radius: 6px;
    background: #493082;
    border: none;
    width: fit-content;
    padding: 10px;
    margin: auto;
}

#latest-line {
    margin-top: unset;
}

.involve-box {
    background-color: #00a695;
    margin: auto;
    border-radius: 7px;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 80px;
    max-width: 1000px;
}

.involve-box p {
    color: #fff;
    text-align: center;
    font-family: "Aller-regular", serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 50px;
}

.involve-box form {
    width: 90%;
    margin: auto;
}

@media only screen and (max-width: 1280px) {
    .media-list {
        grid-template-columns: 1fr;
    }

    .newsletter-image {
        height: 160px;
    }

    .audio-section-bottom {
        flex-direction: column;
    }
    .audio-section-bottom img {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .latest-top,
    .latest-bottom {
        flex-direction: column;
        margin: auto;
        width: 90%;
    }

    .latest-bottom {
        flex-direction: column;
    }

    .involve-box form div,
    .involve-box textarea {
        flex-direction: column;
        width: 90%;
        margin: auto;
    }

    .involve-box form {
        width: 100%;
    }

    .involve-box {
        padding: 50px 0;
    }

    .newsletter {
        width: 100%;
        min-height: 500px;
    }
    
    .latest-list {
        grid-template-columns: 1fr;
    }
}