:root {
    --global-font-family: 'Montserrat';
    --paragraph-font-family: 'Open Sans';
}

html {
    scroll-behavior: smooth;
}

p {
    font-family: var(--paragraph-font-family);
    color: #4a4a4a;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0%;
}

/* scroll behavior */
h2[id] {
    scroll-margin-top: 120px;
}

/* header section */
.post-header-section {
    display: flex;
    justify-content: center;
}

.post-header-section .container {
    width: 100%;
}

.post-header-section .container h1.post-title {
    text-align: left;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    /* width 60%; */
}

.post-header-section .container div.post-image {
    display: flex;
    flex-direction: column;
}

.container .category {
    display: inline-block;
    background-color: #d1d8de;
    padding: 8px 16px;
    margin-bottom: 20px;
}

.container .category p {
    font-size: 18px;
    color: #1a3e5c;
    margin: 0;
    font-weight: 600;
    font-family: var(--global-font-family);
}

/* table of contents */
.table-of-contents-container {
    border: 1px solid #adadad;
    position: -webkit-sticky;
    position: sticky;
    top: 160px;
}

.table-of-contents-container h4 {
    text-align: start;
    padding: 20px;
    background-color: #f2f2f2;
    margin-bottom: 16px;
    font-size: 24px;
}

.table-of-contents-container ol li {
    margin-bottom: 10px;
}

.table-of-contents-container ol li:hover {
    opacity: 0.5;
}

.table-of-contents-container ol li a {
    text-decoration: none;
    color: initial;
    font-family: var(--paragraph-font-family);
    font-size: 18px;
}

/* content section */
.post-content-section {
    display: flex;
    justify-content: center;
}

.post-content-section .container .content-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
}

.post-content-section .container .content-container .left-content {
    width: 30%;
}

.post-content-section .container .content-container .right-content {
    width: 70%;
}

.post-content-section .container .content-container .right-content .post-content {
    margin-bottom: 48px;
}

.post-content-section .container .content-container .right-content .post-content h2:first-of-type {
    margin-top: 10px;
}

.post-content-section .container .content-container .right-content .post-content h2 {
    width: 90%;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
}

#page>div>section.post-content-section>div>div>div.right-content>div.post-content>p:nth-child(1) {
    font-size: 20px;
}

.post-content-section .container .content-container .right-content .post-content .wp-block-list li {
    font-family: var(--paragraph-font-family);
    color: #4a4a4a;
}

.post-content-section .container .content-container .right-content .post-content blockquote {
    margin-left: 0;
    /* margin-right: 0; */
    padding: 24px 16px;
    background-color: #f5f5f5;
    border-left: 4px solid #FF6600;
}

.post-content-section .container .content-container .right-content .post-content blockquote p {
    margin: 0;
}

/* author section */
.credit-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 36px;
}

.credit-section .author-profile {
    display: flex;
    align-items: center;
}

.credit-section .author-profile .author-image {
    margin-right: 10px;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 50%;
}

.credit-section .author-profile .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.credit-section .author-profile .author-name h3 {
    font-size: 28px;
    margin: 0;
}

.credit-section .author-profile .author-name p {
    font-size: 22px;
    margin: 0;
}

.credit-section .social-links ul {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links .norm_row {
    max-width: fit-content;
    display: flex;
    align-items: center;
}

.social-links h4 {
    text-align: center;
    margin-bottom: 0;
}

.social-links a.sficn {
    position: relative;
}

a.sficn::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
}

a#sfsiid_facebook_icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill='%23fff'%20d='M0%200h42v42H0z'/%3E%3Cpath%20d='M28%2017.743h-4.427V14.94c0-1.052.722-1.297%201.231-1.297h3.125V9.016L23.626%209c-4.777%200-5.864%203.45-5.864%205.659v3.084H15v4.767h2.762V36h5.81V22.51h3.921z'%20fill='%23000'/%3E%3C/svg%3E");
}

a#sfsiid_linkedin_icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill='%23fff'%20d='M0%200h42v42H0z'/%3E%3Cpath%20d='M14.247%2011.668a2.7%202.7%200%200%201-.77%201.885c-.492.5-1.16.78-1.855.78a2.6%202.6%200%200%201-1.855-.782A2.7%202.7%200%200%201%209%2011.665c0-.707.277-1.385.77-1.885.492-.5%201.159-.78%201.855-.78.695%200%201.363.282%201.854.782s.768%201.179.768%201.886m.078%204.64H9.08V33h5.246zm8.29%200h-5.22V33h5.167v-8.76c0-4.88%206.257-5.332%206.257%200V33H34V22.427c0-8.226-9.26-7.92-11.438-3.88z'%20fill='%23000'/%3E%3C/svg%3E");
}

a#sfsiid_twitter_icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill='%23fff'%20d='M0%200h42v42H0z'/%3E%3Cpath%20d='M23.283%2019.157%2032.218%209H30.1l-7.758%208.82L16.147%209H9l9.37%2013.336L9%2032.988h2.117l8.193-9.314%206.543%209.314H33zm-2.9%203.297-.95-1.328-7.553-10.567h3.252l6.096%208.528.95%201.328L30.102%2031.5h-3.253z'%20fill='%23000'/%3E%3C/svg%3E");
}


a#sfsiid_facebook_icon img {
    opacity: 0;
}

/* continue reading section */
.continue-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.continue-section .continue-reading-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 72px;
}

.continue-section .continue-reading-title h2 {
    font-size: 42px;
    margin: 0;
}

.continue-section .continue-reading-title h2 span {
    color: #FF6600;
}

.continue-section .continue-reading-title .btn_orange span {
    font-size: 16px;
}

.continue-section .continue-reading-title .btn_orange.full {
    display: block;
}

.continue-section .continue-reading-articles .articles-container .btn_orange.mobile {
    display: none;
}

@media screen and (min-width: 1537px) and (max-width: 1919px) {

    .continue-section .continue-reading-title h2 {
        font-size: 36px;
    }


    .articles-container .card .card-content p {
        font-size: 20px;
    }
}

@media only screen and (max-width: 1536px) {

    .container .category p {
        font-size: 16px;
    }



    .table-of-contents-container ol li a {
        font-size: 16px;
    }



    .continue-section .continue-reading-title h2 {
        font-size: 28px;
    }

    .continue-section .continue-reading-title .btn_orange {
        padding: 12px 20px;
    }

    .continue-section .continue-reading-title .btn_orange span {
        font-size: 16px;
    }

    .credit-section .author-profile .author-image {
        width: 62px;
        height: 62px;
    }

    .credit-section .author-profile .author-name h3 {
        font-size: 20px;
        margin: 0;
    }

    .credit-section .author-profile .author-name p {
        font-size: 16px;
        margin: 0;
    }
}

@media screen and (max-width: 1440px) {

    .table-of-contents-container h4 {
        font-size: 20px;
    }

    .table-of-contents-container ol li a {
        font-size: 14px;
    }



    .continue-section .continue-reading-title h2 {
        font-size: 24px;
    }


}

@media only screen and (max-width: 1200px) {
    .breadcrumbs .breadcrumbs-container .custom-breadcrumbs {
        font-size: 14px;
    }

    .post-content-section .container .content-container .right-content .post-content h2 {
        margin-top: 10px;
    }

    .post-content-section .container .left-content {
        display: none;
    }

    .post-content-section .container .content-container .right-content {
        width: 100%;
    }

    .continue-section .continue-reading-title .btn_orange span {
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px) {


    .container .category p {
        font-size: 14px;
    }

    .post-content-section .container .content-container .right-content .post-content h2 {
        width: 100%;
    }

    .post-content p {
        font-size: 16px;
    }

    .continue-section .continue-reading-title h2 {
        font-size: 22px;
    }

    .continue-section .continue-reading-title .btn_orange.full {
        padding: 10px 18px;
    }


}

@media only screen and (max-width: 768px) {



    .credit-section {
        margin: 0;
        align-items: end;
    }

    .credit-section .author-profile .author-name h3 {
        font-size: 16px;
    }

    .credit-section .author-profile .author-name p {
        font-size: 14px;
    }



    .continue-section .continue-reading-title h2 {
        font-size: 20px;
    }

    .articles-container .card .card-media .overlay-block-arrow {
        outline-offset: -7.5px;
    }

    .sfsi_shortcode_container .sfsi_wicons {
        margin-left: 0px !important;
        width: 100% !important;
    }

}

@media only screen and (max-width: 520px) {
    .breadcrumbs .breadcrumbs-container .custom-breadcrumbs {
        font-size: 12px;
    }



    .continue-section .continue-reading-title h2 {
        font-size: 20px;
    }

    .post-content-section .container .content-container .right-content .post-content h2 {
        margin-bottom: 10px;
    }


    .credit-section .author-profile {
        margin-bottom: 20px;
    }

    .continue-section .continue-reading-title {
        flex-direction: column;
    }

    .continue-section .continue-reading-title .btn_orange.full {
        display: none;
    }

    .continue-section .continue-reading-articles .articles-container .btn_orange.mobile {
        padding: 10px 24px;
        text-align: center;
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .credit-section .social-links {
        align-self: baseline;
    }

    .credit-section .social-links ul {
        gap: 0;
    }

    .credit-section .author-profile .author-image {
        width: 46px;
        height: 46px;
    }

    .continue-section .continue-reading-title {
        margin-top: 30px;
    }

    .articles-container .card .card-content .tag {
        padding: 6px 12px;

    }

    .articles-container .card .card-content .tag p {
        font-size: 14px;
    }

    a.sficn::after {
        background-size: 35px;
        height: 35px;
    }
}

@media only screen and (max-width: 382px) {
    .credit-section .author-profile .author-image {
        width: 40px;
        height: 40px;
    }

    .credit-section .social-links ul li a svg {
        width: 32px;
        height: 32px;
    }
}


/* ###################################################### */
.articles-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 32px;
}

.articles-container .card {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.articles-container .card .card-media {
    position: relative;
    aspect-ratio: 4/3;
}


.articles-container .card .card-content {
    position: relative;
    background-color: white;
}

.articles-container .card .card-content .tag {
    display: inline-block;
    background-color: #d1d8de;
    padding: 8px 16px;
    margin: 10px 0;
}

.articles-container .card .card-content .tag p {
    color: #1a3e5c;
    font-size: 18px;
    font-family: var(--global-font-family);
    font-weight: 600;
    margin: 0;
}

.articles-container .card .card-content h4 {
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-size: 16px;
}

.articles-container .card .card-content p {
    font-size: 22px;
    line-height: 150%;
    margin: 0;
}

/* -------------------RESPONSIVE CARDS BLOCK (ADJUSTED)------------------- */
@media only screen and (max-width: 1536px) {
    .card-content p {
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 1440px) {
    .post-content-section .container .content-container {
        gap: 40px;
    }

    .post-content h2 {
        margin: 0px 0px 20px;
    }

    .articles-container .card .card-content p {
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 1200px) {
    .articles-container {
        width: initial;
    }
}

@media only screen and (max-width: 1024px) {
    .card-content p {
        font-size: 14px !important;
    }

    .articles-container .card .card-media {
        height: 220px;
    }
}

@media only screen and (max-width: 768px) {
    .variant-0 {
        grid-template-columns: 100% !important;
    }

    .articles-container {
        grid-template-columns: 100%;
        gap: 20px;
    }

    .articles-container .card .card-media {
        height: 280px;
    }
}