.blog-listing-section { padding: 60px 0 120px; }
.blog-listing-section .wrap-drop-topic .drop-topic li a { text-transform: capitalize }
.blog-listing-section .wrap-drop-topic { border-radius: 12px; box-shadow: none; cursor: pointer; margin-left: 0; max-width: 290px; padding: 11px 48px 11px 20px; position: relative; text-align: left; width: 100%; z-index: 3; border: 1px solid var(--secondary_color); transition: all 0.5s ease-in-out; } 
.blog-listing-section .wrap-drop-topic .drop-topic { left: 0; list-style: none; margin-top: 0; max-height: 320px; opacity: 0; overflow-y: auto; padding: 15px 20px; pointer-events: none; position: absolute; top: calc(100% + 1px); z-index: 2; transition: all 0.5s ease-in-out; visibility: hidden; z-index: 999; background-color: var(--primary_color); border: 1px solid #000; border-top: 0; border-radius: 0 0 12px 12px; right: 0;width: calc(100% + 2px); left: -1px; }
.blog-listing-section .wrap-drop-topic span { display: block; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; width: 140px; color: var(--secondary_color); font-family: var(--heading_font); font-weight: 600; font-size: 18px; line-height: 1.555; } 
.blog-listing-section .wrap-drop-topic .drop-topic li a { display: block; margin: 0 0 7px; padding: 0; text-decoration: none; color: var(--secondary_color); font-family: var(--heading_font); } 
.blog-listing-section .wrap-drop-topic .drop-topic li:hover a { background-color: transparent } 
.blog-listing-section .wrap-drop-topic:after { -webkit-mask-image: url('https://www.sfour-consulting.com/hubfs/SFOUR_2025/images/Icon%20(2).svg'); content: ""; height: 8px; margin-top: 0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 12px; background-color: var(--secondary_color); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; transition: all 0.5s ease; } 
.blog-listing-section .wrap-drop-topic.active:after { transform: translateY(-50%) rotate(180deg) } 
.blog-listing-section .wrap-drop-topic.active .drop-topic { opacity: 1; pointer-events: auto; visibility: visible; }
.blog-listing-section .topic-list { padding-bottom: 60px; display: flex; justify-content: flex-end; } 
.blog-listing-section .wrap-drop-topic.active {border-radius: 12px 12px 0 0;} 
.blog-listing-section .wrap-drop-topic .drop-topic li:last-child a { margin-bottom: 0; } 
.blog-listing-section .wrap-drop-topic .drop-topic li a:hover { color: var(--tertiary_color); }
.blog-listing-section .main-blog-listing-section { display: flex; flex-wrap: wrap; margin: 0 -14px;justify-content:center; } 
.blog-listing-section .main-blog-listing-section .item-blog-listing-section { width: 33.33%; padding: 0 14px; margin-bottom: 30px; } 
.blog-listing-section .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section { height: 100%; box-shadow: 0px 0px 20px 0px #0000001A; border-radius: 12px; overflow: hidden; position: relative; background-color: var(--secondary_color); } 
.blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section .image-blog-listing { height: 270px; } 
.blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section .image-blog-listing img { height: 100%; object-fit: cover; object-position: center center; width: 100%; } 
.blog-listing-section .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section .conatent-blog-listing { height: calc(100% - 270px); padding: 20px; display: flex; flex-wrap: wrap; flex-direction: column; }
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .tag-blog-listing { margin-bottom: 20px; } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link { border: 1px solid var(--primary_color); color: var(--primary_color); position: relative; z-index: 1; text-decoration: none; padding: 5px 10px; font-size: 14px; line-height: 1.714; display: inline-flex; border-radius: 8px; align-items: center; } 
.blog-listing-section .item-blog-listing-section .tag-blog-listing a.topic-link span.tag-icon { width: 16px; height: 16px; display: inline-block; } 
.blog-listing-section .item-blog-listing-section .tag-blog-listing a.topic-link span.tag-icon svg path { fill: var(--primary_color); transition: all 0.5s ease-in-out; } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link span.tag-text { padding-left: 5px; }
.blog-listing-section .item-blog-listing-section  .conatent-blog-listing .title-blog-listing { margin-bottom: 10px; } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .title-blog-listing h5 { color: var(--primary_color); margin-bottom: 0; } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .summary-blog-listing p { color: var(--primary_color); } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .cta-blog-listing { margin-top: auto; } 
.blog-listing-section .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section a.link-blog-listing { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: inline-block; } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .cta-blog-listing a { position: relative; z-index: 11; } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link:hover { color: var(--secondary_color) ; border-color: var(--primary_color); background-color: var(--primary_color); } 
.blog-listing-section .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link:hover svg path { fill: var(--secondary_color); } 
.blog-listing-section .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section:hover .cta-blog-listing a { border-color: var(--primary_color) ; color: var(--secondary_color) ; background-color: var(--primary_color); }
.blog-listing-section.dark-bg-mode { background-color: var(--secondary_color) !important; } 
.blog-listing-section.dark-bg-mode .wrap-drop-topic { border-color: var(--primary_color); } 
.blog-listing-section.dark-bg-mode .wrap-drop-topic span { color: var(--primary_color); }
.blog-listing-section.dark-bg-mode .wrap-drop-topic::after { background-color: var(--primary_color); } 
.blog-listing-section.dark-bg-mode .wrap-drop-topic ul.drop-topic { background-color: var(--secondary_color); border-color: var(--primary_color); } 
.blog-listing-section.dark-bg-mode .wrap-drop-topic ul.drop-topic li a { color: var(--primary_color); }
.blog-listing-section.dark-bg-mode .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section { background-color:var(--primary_color); }
.blog-listing-section.dark-bg-mode .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section * {color: var(--secondary_color);}
.blog-listing-section .blog-pagination { margin-top: 20px; } 
.blog-listing-section .blog-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } 
.blog-listing-section .blog-pagination ul .blog-pagination-center { display: flex; flex-wrap: wrap; align-items: center; } 
.blog-listing-section .blog-pagination ul .blog-pagination-center li { margin-right: 10px; }
.blog-listing-section .blog-pagination ul li a { color: var(--secondary_color);); text-decoration: none; width: 40px; height: 40px; display: inline-flex; border: 1px solid var(--secondary_color); align-items: center; justify-content: center; border-radius: 8px; }
.blog-listing-section.dark-bg-mode .blog-pagination ul li a { color: var(--primary_color);); border-color: var(--primary_color); }
.blog-listing-section.dark-bg-mode .blog-pagination ul li a svg path { fill: var(--primary_color); }
.blog-listing-section .blog-pagination ul li a:hover, .blog-listing-section .blog-pagination ul .blog-pagination-center li.active a { color: var(--primary_color); border-color: var(--secondary_color); background-color: var(--secondary_color); }
.blog-listing-section .blog-pagination ul li a:hover svg path { fill: var(--primary_color); } 
.blog-listing-section .blog-pagination ul li a svg path { text-decoration: none; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } 
.blog-listing-section .blog-pagination .blog-pagination-left li { margin-right: 10px; }
.blog-listing-section .blog-pagination .blog-pagination-left, .blog-listing-section .blog-pagination .blog-pagination-right { display: flex; align-items: center; flex-wrap: wrap; } 
.blog-listing-section .blog-pagination .blog-pagination-right li { margin-right: 10px; } 
.blog-listing-section .blog-pagination .blog-pagination-right li:last-child { margin-right: 0; }
.blog-listing-section .blog-pagination ul .blog-pagination-center li:only-child { display: none; }
.blog-listing-section .blog-heading-title h2 { text-align: center; margin-bottom: 40px; } 
.blog-listing-section.dark-bg-mode .blog-heading-title h2 { color: var(--primary_color); }
 .blog-listing-section.dark-bg-mode .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link { border-color: var(--secondary_color); } 
.blog-listing-section.dark-bg-mode .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link svg path { fill: var(--secondary_color); }
.blog-listing-section.dark-bg-mode .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link:hover { color: #fff !important; background-color: #000; } 
.blog-listing-section.dark-bg-mode .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link:hover svg path { fill: #fff; }
 .blog-listing-section.dark-bg-mode .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section .cta-blog-listing a { border-color: #000; } 
.blog-listing-section.dark-bg-mode .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section .cta-blog-listing a:hover, .blog-listing-section.dark-bg-mode .main-blog-listing-section .item-blog-listing-section .inner-item-blog-listing-section:hover .cta-blog-listing a { background-color: #000; color: #fff; border-color: #000; } 
.blog-listing-section.dark-bg-mode .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link:hover span.tag-text { color: #fff; }
.blog-listing-section.dark-bg-mode .item-blog-listing-section .conatent-blog-listing .tag-blog-listing a.topic-link span.tag-text {    transition: all .5s ease; -moz-transition: all .5s ease;-ms-transition: all .5s ease;-o-transition: all .5s ease;-webkit-transition: all .5s ease;}
.blog-listing-section .wrap-drop-topic .drop-topic li { list-style: none; }







@media(max-width:991px){
    .blog-listing-section { padding: 40px 0 80px; }
    .blog-listing-section .main-blog-listing-section .item-blog-listing-section { width: 50%; }
}

@media(max-width:767px){
    .blog-listing-section { padding: 30px 0 60px; }
    .blog-listing-section .main-blog-listing-section .item-blog-listing-section { width: 100%; padding: 0; } 
    .blog-listing-section .main-blog-listing-section .item-blog-listing-section:last-child{margin-bottom:0;}
    .blog-listing-section .main-blog-listing-section { margin: 0; } 
    .blog-listing-section .topic-list { justify-content: center; }
    .blog-listing-section .blog-pagination ul li a { border: none; width: auto; height: auto; padding: 5px; }
    .blog-listing-section .blog-heading-title h2 { margin-bottom: 30px; } 
}