:root {
      --mored: #C1272D;
      --nblue: #2C3E50;
}
.global-content-section{
        min-height: 900px;
        
    }
    .gcs-left{
        padding-top: 47px;
        padding-right: 54px;
    }
    .gcs-right{
        padding-right: 65px;
        font-family: 'PFBeauSansPro';
    }
    .blog-menu__container{
        background: white;
        outline: 0.25px solid #ddd;
        border-radius: 2px;
        opacity: 1;
        min-height: 418px;
        padding-top: 60px;

    }
    .blog-menu-inner{
        width: 100%;
        height: 100%;
        
    }
    .blog-menu-inner-header-container{
        display: flex;
        height: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .bm-header-text-container{
        height: 100%;
        flex: 1;
        padding-left: 24px;
        padding-top: 4px;
        
    }
    .bm-h3{
        font-family: 'PFBeauSansPro';
        font-weight: 400;
        font-size: 24px;
    }
    .bm-header-close-btn-container{
        flex-shrink: 0;
        width: 50px;
        font-size: 50px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    .blog-menu-inner-chapters-container{
        width: 100%;
        font-family: 'Firasans-regular';
        font-size: 18px;
        padding-left: 21px;
        padding-right: 15px;
    }
    .bm-chapter{
        padding-top: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #eee;
        cursor: pointer;
    }
    
    .load-more-btn-container{
        justify-content: center;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .load-more-btn{
        border: 0.25px solid var(--nblue);
        border-radius: 3px;
        padding: 12px 25px;
        outline: none;
        background: inherit;
        color: var(--nblue);
        font-family: 'PFBeauSansPro';
        font-weight: 200;
        font-size: 18px;
        cursor: pointer;
        
    }
    .lm-loading-btn{
        display: none;
        width: 100%;
        column-gap: 12px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        height: 47px;
    }
    .lm-loading-btn div{
        width: 5px;
        border-radius: 4px;
        background: var(--nblue);
    }
    .lm-loading-btn div:nth-child(odd){
        height: 47px;
        animation-name: btn-loading-c;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    .lm-loading-btn div:nth-child(even){
        height: 24px;
        animation-name: btn-loading-s;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    @keyframes btn-loading-c{
        0%{height: 24px;}
        50%{height: 47px;}
        100%{height: 24px;}
    }
    @keyframes btn-loading-s{
        0%{height: 47px;}
        50%{height: 24px;}
        100%{height: 47px;}
    }
    @media(hover: hover){
        .bm-chapter:hover{
            color: #666;
        }
        .htag:hover{
            border: 0.25px solid #bbb;
        }
    }
    .bm-chapter:first-child{
        border-top: 2px solid #eee;
    }
    .bm-tags{
        padding-left: 9px;
        padding-top: 21px;
        font-family: 'PFBeauSansPro';
        font-weight: 300;
    }
    .bm-tags-inner-container{
        padding-top: 18px;
        padding-bottom: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .bm-tags-inner-container > .htag{

    }
    .search-results-area{
        height: 47px;
        display: flex;
        margin-bottom: 15px;
    }
    .sra-inner{
        flex: 1;
        padding-top: 15px;
    }
    .filter-btn-container{
        width: 47px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 6px;
        padding-right: 6px;
        cursor: pointer;
    }
    .filter-btn-container div{
        align-self: flex-end;
        background: #000;
        height: 12%;
    }
    .filter-btn-container div:nth-child(1){
        width: 100%;
    }
    .filter-btn-container div:nth-child(2){
        width: 70%;
    }
    .filter-btn-container div:nth-child(3){
        width: 50%;
    }
    .blog-articles-container{
        padding: 0;
    }
    .blog-article-card{
        min-height: 228px;
        background: white;
        opacity: 1;
        display: flex;
        outline: 0.25px solid #ddd;
        border-radius: 2px;
        margin-bottom: 16px;
    }
    .blog-article-card-img-section{
        width: 42%;
        flex-shrink: 0;
        padding-left: 26px;
        padding-right: 33px;
        padding-top: 20px;
        padding-bottom: 20px;

    }
    .blog-article-card-text-section{
        flex: 1;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 15px;
    }
    .bac-img-container{
        width: 100%;
        overflow: hidden;
        background: #b3b3b3;
        border-radius: 12px;
    }
    .bac-img-container:before {
        content: "";
        padding-top: 70%;
        float: left;
}
    .blog-article-card-header{
        font-size: 24px;
        font-weight: 400;
    }
    .blog-article-card-paragraph{
        font-size: 14px;
        font-weight: 300;
        margin-block-start: 3px;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        
    }
    p{
        outline: 0px solid purple;
    }
    .bac-footer{
        width: 100%;
        padding-top: 0px;
        padding-bottom: 11px;
        display: flex;
        justify-content: space-between;
    }
    .bac-footer-container{
        width: 100%; 
        padding-left: 26px; 
        padding-right: 30px;
        
    }
    .bac-footer-left{
        
    }
    .bac-tags{
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.4em;
    }
    .htag{
        border-radius: 999px;
        font-weight: 300;
        font-size: 16px;
        border: 0.25px solid #ccc;
        padding: 0.3rem 0.6rem;
        cursor: pointer;
        
    }
    .htag::before{
        content: '#';
        color: var(--mored);
        margin-right: 0.1rem;
    }
    .bac-read-more-btn{
        font-weight: 300;
        font-size: 14px;
        color: var(--mored);
        border: 0.75px solid var(--mored);
        background: transparent;
        outline: none;
        padding: 0.3rem 0.6rem;
        opacity: 0.8;
        cursor: pointer;
    }
    .reading-time{
        font-weight: 200;
        font-style: italic;
        font-size: 14px;
        color: #666;
    }
    @keyframes ani {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    
@media(min-width: 992px){
    .search-results-area {
        margin-bottom: 0;
    }
    .blog-menu__container{
        padding-top: 24px;
    }
    .bm-header-close-btn-container{
        display: none;
    }
    .filter-btn-container{
        display: none;
    }
    .sra-inner{
        padding-left: 26px;
    }

}
@media(max-width: 992px){
    
    .gcs-left {
        position: fixed;
        z-index: 998;
        padding: 0;
        height: 100vh;
        display: none;
        opacity: 0;
        animation: ani 0.5s forwards;
        left: 0;
    }
    .blog-menu__container {
        height: 100vh;
        overflow-y: auto;
        padding-bottom: 20vh;
    }
    .gcs-right{
        padding-right: 15px;
        padding-left: 15px;
    }
    .sra-inner{
        padding-left: 1em;
    }
    .blog-article-card-text-section {
        
        flex-shrink: 0;
    }
}
    @media(min-width: 992px) and (max-width: 1200px){
        .gcs-right{
            padding-right: 0px;
        }
    }
    @media(min-width: 1393px){
        .blog-article-card-header {
        font-size: 26px;
    }
        .blog-article-card-paragraph {
        font-size: 18px;
        margin-block-start: 10px;
    }
    } 
@media(min-width: 768px) and (max-width: 992px){
    .blog-article-card-header {
        font-size: 26px;
    }
    .blog-article-card-paragraph {
        font-size: 18px;
        margin-block-start: 10px;
    }
    .blog-article-card-img-section {
        width: 36%;    
    }
}
@media(max-width: 576px){
        .blog-article-card-img-section {
        width: 100%;
        height: auto;
        padding-left: 15px;
        padding-right: 15px;

    }
    
    .blog-article-card-text-section {
        width: 100%;
        height: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .blog-article-card {
        flex-wrap: wrap;
    }
    .bac-footer{
        flex-wrap: wrap-reverse;
    }
    .bac-footer-container{
        padding-left: 15px; 
        padding-right: 15px;
        
    }
    .bac-footer-right{
        padding-bottom: 15px;
        width: 100%;
    }
}