/*
** Blog
*/

.breadcrumbs { font-size: 16px; color: var(--white); }

.breadcrumbs > span, .breadcrumbs a {color: var(--formfieldbg);}

.breadcrumbs .breadcrumb_last, .breadcrumbs a:hover { color: var(--primary); }

.breadcrumbs .separator { margin: 0 4px; }

/* .hero-blog .site-search { margin-bottom: 30px; } */

.hero-blog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/blog-bg.webp');
    background-image: var(--herobg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.15;
    mix-blend-mode: exclusion;
    z-index: 0;
}

.hero-blog .container { position: relative; z-index: 1; }

.site-search {
    width: auto;
}

h1 + .site-search { margin-top: 40px; }

.search-form {
    display: flex;
    max-width: 450px;
    margin: 0 auto;
    border-radius: var(--siteradius12);
    background: var(--white);
    overflow: hidden;
}

.search-form label { flex: 1 0 auto; }

.search-form input[type="search"] {
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
}

.search-submit {
    font-size: 20px;
    padding: 0 20px 0 0;
    border: 0;
    outline: none;
    background-color: transparent;
}

/* Pagination */
.pagination .nav-links { display: flex; flex-wrap: wrap; margin-top: 50px; justify-content: center; row-gap: 10px; }
.pagination .page-numbers {
    display: inline-flex;
    font-size: 18px;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    margin: 0 4px;
    color: var(--secondary);
    background-color: var(--lightgreen);
    transition:0.3s all ease-in-out;
}
.pagination .page-numbers:not(span):hover{ opacity:0.8; }
.pagination span.page-numbers { background-color: #f5f5f5; color: var(--body); opacity: 1; }
.pagination span.page-numbers.current { background: var(--primary); color: var(--white); }
.pagination .page-numbers.next, .pagination .page-numbers.prev { font-size: 8px; }
.pagination .page-numbers.prev i { display: inline-block; transform: rotate(90deg); transform-origin: center center; }
.pagination .page-numbers.next i { display: inline-block; transform: rotate(-90deg); transform-origin: center center; }


/*Posts Cats*/
.postcats {
    position: relative;
    margin-top: 20px;
    white-space: nowrap;
    z-index: 1;
}

.postcats ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.postcats a {
    padding: 11px 20px;
    color: var(--secondary);
    border-radius: 100px;
    background-color: var(--lightgreen);
}

.postcats a:hover {
    color: var(--primary);
}

.postcats a.active {
    color: var(--white);
    background-color: var(--primary);
}


.postcats ul::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #e1e5f5;
    background-color: #F4F6FF;
}

.postcats ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
    background-color: #7e7e7e;
}

.postcats ul::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #F4F6FF;
}



.bloglist-sc {
    display: grid;
    grid-template-columns: calc(50% - 27px) calc(25% - 27px) calc(25% - 27px);
    grid-template-rows: auto auto;
    gap: 40px;
    margin-bottom: 50px;
}

.bloglist-grid {
    display: flex;
    gap: 0 40px;
    flex-wrap: wrap;
}

.bloglist-paged {
    margin-top: 50px;
}

.postcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bloglist-grid .postcard {
    flex-direction: row;
    flex: 1 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    gap: 24px;
    
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--lightgreen);
}

.bloglist-grid .postcard:last-child,
.bloglist-grid .postcard:nth-last-child(2):nth-child(odd) {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
}

.bloglist-grid .postcard-img {
    max-width: 250px;
}

.postcard-img img {
    object-fit: cover;
    object-position: center center;
    /* aspect-ratio: 1200 / 628; */
    border-radius: var(--siteradius12);
}

.postcard-brief {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.postcard-title {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 16px;
}

.postcard-title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--secondary);
}

.postcard-cat {
    font-size: 16px;
    padding: 8px 0px 4px;
    border-radius: 20px;
}

.bloglist-grid .postcard-cat { padding-top: 0; }

.postcard-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
}

.bloglist-sc .postcard-date {
    display: none;
}

.bloglist-sc .postcard-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: var(--lightgreen);
    border-radius: var(--siteradius12);
}

.bloglist-sc .postcard-1 .postcard-brief {
    padding: 30px;
}

.bloglist-sc .postcard-1 .postcard-title {
    font-size: 32px;
    line-height: 40px;
}

.bloglist-sc .postcard-1 img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bloglist-sc .postcard-1 .postcard-cat { padding-top: 0; }

.section-search .search-form { border: 1px solid var(--formfieldborder); }


/*
** Blog Detail Page
*/

.singlecont {
    position: relative;
    font-size: 18px;
    line-height: 28px;
    margin-top: -60px;
    margin-bottom: 60px;
}

.singlethumb {
    margin: 0px auto 20px;
    border-radius: var(--siteradius12);
    overflow: hidden;
}

.col-singlecont i, .col-singlecont span, .col-singlecont strong, .col-singlecont a { display: inline; }

.singlecont ul ul, .singlecont ul ol, .singlecont ol ul, .singlecont ol ol { margin-top: 16px; margin-bottom: 24px; }

.schema-faq-section + .schema-faq-section { margin-top: 20px; }

.singlecats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.singlecats a {
    font-size: 14px;
    line-height: 14px;
    padding: 5px 12px;
    color: var(--body);
    border-radius: var(--siteradius12);
    background: var(--white);
}

.singlecats a:hover { color: var(--primary); }

.singlemeta {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.singlemeta span {
    color: var(--white);
}

.authorbox {
    padding: 10px;
    margin: 30px 0;
    border-radius: var(--siteradius12);
    background: var(--lightgreen);
}

.authorhead {
    display: flex;
    gap: 15px;
    align-items: center;
    cursor: pointer;
}

.authorbox img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--siteradius12);
}

.author-title {
    display: flex;
    flex-direction: column;
}

.authorhead .author-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -4px;
    color: var(--secondary);
}

.authorbox .icon-angle-down {
    font-size: 9px;
    transition: ease 0.3s all;
}

.authorbox.open .icon-angle-down {
    transform: rotate(180deg);
}

.author-role {
    font-size: 16px;
    line-height: 26px;
    color: var(var(--secondary));
}

.authorbody {
    display: none;
    font-size: 16px;
    line-height: 24px;
    padding: 5px 30px 5px 60px;
}

.authorbox .socialnav {
    font-size: 18px;
    gap: 16px;
}

.authorbox .socialnav a {
    color: var(--body);
}

.authorbox .socialnav a:hover {
    color: var(--primary);
}

.social-wa, .social-email {
    font-size: 21px;
}

.sidebar {
    flex: 0 0 315px;
    min-width: 315px;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

.nav-links>div {
    flex: 1 0 50%;
    max-width: 50%;
}

.nav-links .nav-subtitle {
    display: block;
    font-size: 14px;
    line-height: 22px;
    color: var(--body);
}

.nav-links .nav-title {
    font-size: 16px;
    line-height: 24px;
}

.nav-next {
    text-align: right;
    margin-left: auto;
}

.nav-links>div+div {
    padding-left: 30px;
}

.break-line {
    height: 1px;
    border: 0;
    background-color: var(--formfieldborder);
}

.faqs + .break-line { display: none; }

figure.wp-block-table { margin: 30px 0; }
table { border-collapse: collapse; }
table td, table th { padding: 8px 8px; border: 1px solid; }

/*Sidebar*/
.col-sidebar { padding-right: 40px; }

.col-singlecont .toc { display: none; }

.indaside {
    /* position: sticky;
    top: 90px; */
    padding: 20px;
    border-radius: var(--siteradius12);
}

.indaside + .indaside {
    margin-top: 30px;
}

.indaside h2 {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 10px;
}

.indaside ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.indaside a {
    color: rgba(4, 36, 59, 0.8);
}

.indaside a:hover {
    color: var(--primary);
}

/*Blog CTAs*/
.ctav {
    position: sticky;
    top: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 300px; */
    max-width: 100%;
    padding: 20px 30px 40px;
    margin: 40px auto 0px;
    gap: 30px;
    border-radius: var(--siteradius12);
    background-color: var(--lightgreen);
    /* box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); */
}

.ctav h2 {
    font-size: 27px;
    line-height: 37px;
    margin: 0;
    color: var(--primary);
}

.ctav ul {
    font-size: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ctav li {
    display: flex;
    gap: 10px;
}

.ctav li::before {
    content: "";
    display: block;
    --ctavlisize: 12px;
    width: var(--ctavlisize);
    min-width: var(--ctavlisize);
    height: calc(var(--ctavlisize) + 10px);
    background-image: url('../images/ctav-li.svg');
    background-position: center 6px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.ctav .bttn { width: 100%; }

.ctav-art { text-align: center; }

/*CTA 1*/
.cta1 {
    padding: 20px;
    padding-right: 210px;
    margin: 30px 0 30px;
    border-radius: var(--siteradius12);
    background-color: var(--lightgray);
    background-image: url(../images/cta1-bg.webp), url(../images/cta1-corner.webp);
    background-position: center center, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto 100%;
}

.cta1 .cta1-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 20px;
    color: var(--secondary);
}

.bttn.bttn-cta {
    display: inline-block;
    font-size: 15px;
    line-height: 40px;
    height: 40px;
    padding-right: 48px;
    background-image: url('../images/cta1-arrow.webp');
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-size: 20px;
}

.bttn.bttn-cta:hover {
    background-position: center right 10px;
}

.bttn-icon i {
    font-size: 0.5em;
    transform: rotate(-90deg) translate(2px, 4px);
}

/*CTA 2*/
.cta2 {
    padding: 30px 30px 60px;
    margin: 30px auto 30px;
    border-radius: var(--siteradius12);
    background-image: url('../images/cta-2.svg');
    background-size: 108% auto;
    background-position: left -4px bottom -40px;
    background-repeat: no-repeat;
}

.cta2-title {
    font-size: 29px;
    line-height: 39px;
    margin-bottom: 26px;
}

.cta2 .bttn:hover {
    background-color: var(--primary-a);
}

.cta2-form {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cta2-form input {
    height: 40px;
    line-height: 40px;
    width: 300px;
}

.cta2-form input::placeholder { color: var(--secondary); }

/* CTA 3 */
.cta3 {
    --ctasize: 45px;
    padding: 20px;
    margin: 30px 0;
    border-radius: var(--siteradius12);
}

.cta3-title {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 14px;
}

.cta3-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    border: 2px solid var(--white);
    border-radius: 40px;
    background: var(--white);
    overflow: hidden;
}

.cta3-form input {
    font-size: 16px;
    line-height: var(--ctasize);
    width: auto;
    height: var(--ctasize);
    flex: 1 0 auto;
    border: 0;
}

.cta3-form input::placeholder {
    color: var(--secondary);
}

.bttn-cta3 {
    font-size: 16px;
    line-height: var(--ctasize);
    height: var(--ctasize);
    padding: 0px 20px;
    border-radius: 40px;
    color: var(--secondary);
    background: var(--yellow);
}

.bttn-cta3:hover {
    background-color: var(--yellow-a);
}

.cta3-sitecta {
    margin: 0;
    border-radius: 0;
}


@media screen and (max-width: 1800px) {
    .ctav { padding: 0px 30px 40px; gap: 20px; }
}
/*1800*/

@media screen and (max-width: 1600px) {
    .prev-arrow { right: calc(100% + 30px); }
    .next-arrow { left: calc(100% + 30px); }
    .singlecont { font-size: 17px; line-height: 27px; }
    .ctav { top: 120px; padding: 0px 30px 30px; }
    .ctav-art img { width: 260px; }
}
/*1600*/

@media screen and (max-width: 1440px) {
    .prev-arrow { right: calc(100% + 15px); }
    .next-arrow { left: calc(100% + 15px); }
    .bloglist-sc { grid-template-columns: calc(50% - 25px) calc(25% - 25px) calc(25% - 25px);  gap: 30px; }
    .bloglist-grid .postcard { flex: 1 0 calc(50% - 15px); max-width: calc(50% - 15px); }
    .bloglist-grid { gap: 0 30px; }
}
/*1440*/


@media screen and (max-width: 1199px) {
    .postlist { gap: 20px; }
    .postlist-item { flex: 1 0 calc(50% - 20px); max-width: calc(50% - 20px); }
    .singlecont { font-size: 16px; line-height: 26px; }

    .singlehead { padding: 70px 0 100px; }
    .ctav { padding: 0px 20px 20px; }
    .ctav h2 { font-size: 25px; line-height: 35px; }
    .ctav ul { font-size: 16px; }
    .ctav .bttn { font-size: 16px;  padding: 0px 16px; }
    .cta2-title { font-size: 22px; line-height: 32px; }
    .cta2-form input { width: 270px; }
    .bttn.bttn-cta { padding-right: 42px; }
    .cta2 { padding: 30px 30px 50px; background-size: 104% auto; background-position: left -4px bottom -27px; }

    .postcats ul { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; padding-bottom: 5px; overflow-x: auto; }
    .bloglist-grid .postcard-img { max-width: 200px; }
    .bloglist-sc .postcard-1 .postcard-title { font-size: 30px; line-height: 36px; }
}
/*1199*/

@media screen and (max-width: 991px) {
    .postlist { gap: 30px; }
    .postlist-item { flex: 1 0 100%; max-width: 100%; }
    .col-singleside { margin-top: 40px; }
    .ctav { max-width: 340px; }

    .bloglist-sc { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto auto; }
    .bloglist-sc .postcard-1 { grid-column: span 2; }
    .bloglist-grid { gap: 30px; }
    .bloglist-grid .postcard { flex: 1 0 100%; max-width: 100%; }
}
/*991*/

@media screen and (max-width: 767px) {
    .singlehead { padding: 50px 0 80px;}
    .singlecont-wrap { padding: 0; box-shadow: none; }

    .singlecont h2, .singlecont .h2, .relatedblogs h2 { font-size: 30px; line-height: 40px; }
    .singlecont h3, .singlecont .h3, .relatedblogs h3 { font-size: 26px; }
    .singlecont h4, .singlecont .h4 { font-size: 22px; }
    .singlecont h5, .singlecont .h5 { font-size: 18px; }
    .singlecont h6, .singlecont .h6 { font-size: 14x; }

    .cta1 { padding: 20px; background-image: url(../images/cta1-bg.webp); }
    .cta1 .cta1-title { font-size: 20px; }
    .cta2 { padding: 20px 20px 50px; background-position: left -4px bottom -18px; }
    .ctav h2 { font-size: 24px; line-height: 1.4; }
    .indaside h2 { font-size: 22px; line-height: 32px; }
    .cta2-form, .cta3-form { flex-wrap: wrap; justify-content: center; }
    .cta2-form input, .cta3-form input { width: 100%; max-width: 100%; }
    .bttn.bttn-cta { width: auto; flex: 0 0 auto; }
    .cta3-form { border-width: 10px; border-radius: var(--siteradius12); text-align: center; }
    .cta3-form input { text-align: center; margin-bottom: 8px; border: 0; border: 1px solid #d4d4d4; }
    .bttn-cta3 { width: 100%; border-radius: var(--siteradius12); }
    .ctav { max-width: 100%; }

    .bloglist-sc { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; }
    .bloglist-sc .postcard-1 { grid-column: unset; }
    .bloglist-sc .postcard-date {display: block;}
    .bloglist-grid .postcard { flex-wrap: wrap; }
    .bloglist-grid .postcard-img { width: 100%; max-width: 100%; }
    .bloglist-paged { margin-top: 30px; }
    .postcard-title { font-size: 20px; line-height: 30px; }
    .postcard-title a { display: block; }
    .postcard-img img { width: 100%; }
}
/*767*/


@media screen and (max-width: 575px) {
    .container, .container-fluid, .row>* { padding-left: 15px; padding-right: 15px; }
    .row { margin-left: -15px; margin-right: -15px; }
    .cta1 .cta1-title { font-size: 19px; }
    .cta2 { padding: 20px 20px 40px; }
    .cta2-title { font-size: 20px; line-height: 30px; margin-bottom: 18px; }

    .nav-links > div,
    .nav-links > div + div {
        max-width: 100%;
        flex: 1 0 100%;
        text-align: left;
        padding: 0;
    }
    .nav-links { gap: 10px; }
    .nav-title { font-size: 14px; line-height: 22px; }
}
/*575*/


@media screen and (max-width: 459px) {
    .bloglist-sc .postcard-1 .postcard-title { font-size: 26px; line-height: 30px; }
    .bloglist-sc .postcard-1 .postcard-brief { padding: 20px; }
}
/*459*/

@media screen and (max-width: 374px) {
    .singlecont h2, .singlecont .h2, .relatedblogs h2 { font-size: 28px; }
    .singlecont h3, .singlecont .h3, .relatedblogs h3 { font-size: 24px; }
    .singlecont h4, .singlecont .h4 { font-size: 20px; }
    .bloglist-sc .postcard-1 .postcard-title { font-size: 24px; line-height: 32px; }
    .sc-featlist img { flex: 1 0 33.33%; width: auto; max-width: calc(33.33% - 9px); max-height: 50px; }
}
/*374*/