/*
 Theme Name:   Applounge Child
 Theme URI:    https://applounge.radiantthemes.com
 Description:  Applounge Child Theme
 Author:       RadiantThemes.com
 Author URI:   https://radiantthemes.com/
 Template:     applounge
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 Text Domain:  applounge-child
*/

:root {
  --primary-gradient-start: #1E4CA8; /* Deep Blue */
  --primary-gradient-end: #7A8FD3;   /* Soft Blue */
  --background-gradient: linear-gradient(103.3deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
  --background-gradient-hover: linear-gradient(180deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
  --white: #ffffff;
  --Noto-font-family: "Noto Sans", sans-serif;
  --font-weight-600: 600;
  --white-fade:#F8F8F8;
}

.primary-btn-small{
    background: var(--background-gradient);
    color: var(--white-fade);
    font-family: var(--Noto-font-family);
    font-weight: var(--font-weight-600);
    font-size: 16px;
    border-radius: 46px;
    padding: 12px 24px;
    border:none;
    width: 100%;
}
.primary-btn-small:hover{
    background: var(--background-gradient-hover);
}


/*Blog Page*/
.master_blog_container{
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.border_bottom_blog_list {
    border-bottom: 1px solid #E8E8E8;
    width: 100%;
}
div#blog-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
 h4{
     margin-top: 15px!important;
}
 .blog_categories{
     margin-bottom: 0px;
     width: 100%;
}
 .post-thumbnail{
     margin-right: 10px;
}
 @media only screen and (max-width: 768px){
     #sticky_side_bar_blog {
         margin-bottom: 45px;
    }
     .related-resources {
         margin-bottom: 20px;
    }
}
 .blog_date {
     font-family: Noto Sans !important;
     color: #21449f;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .recentlya-added-title {
     font-family: Noto Sans !important;
     color: #21449f;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-left: -12px;
     padding-bottom: 0px;
}

 .recent_added_author {
     color: #595959;
     font-family: "Lato", sans-serif!important;
     font-weight: 500;
     font-size: 14px;
     font-style: normal;
}
 .blog_bottom_title {
     color: #374151;
     font-family: Noto Sans !important;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     margin-bottom: 8px;
     margin-top: 5px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
    /* Adjust the number of lines you want to display */
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
}
 .blog_up_next_title {
     color: #374151;
     font-family: Noto Sans !important;
     font-size: 24px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px;
    /* 100% */
     letter-spacing: 0.12px;
     margin-left: 0px;
     margin-bottom: 26px;
}
 .blog_category {
     color: #111111;
     font-family: Noto Sans !important;
     font-size: 11px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     height: 20px;
     padding:2px 10px 4px 10px;
     justify-content: center;
     align-items: center;
     border-radius: 46px;
     background: var(--Table-Row, #e3eaf5);
     margin: 4px;
     cursor: pointer;
     display: inline-block;
}
 #blog_category_m:hover {
     color: #111;
     cursor: pointer;
}
 #blog_category-r{
     height: 25px;
}
 #blog_category-r:hover{
     color: #111;
     cursor: pointer;
}
 #blog_category_m{
     height: 36px;
     padding: 8px 20px 8px 20px;
     font-size: 14px;
}
 #blog_main_thumb{
     width: 155px;
     height: 155px;
     border-radius: 8px;
     object-fit: cover;
}
 #blog_main_thumb2{
     width: 155px;
     height: 155px;
     border-radius: 8px;
     object-fit: cover;
}
 @media only screen and (max-width: 600px) {
     #blog_main_thumb2{
         width: 355px;
         height: 155px;
         border-radius: 8px;
         object-fit: cover;
    }
}
 @media only screen and (max-width: 600px) {
     .wraper_blog_banner.style-one .wraper_blog_banner_main > .container {
         padding-top: 90px !important;
         padding-bottom: 70px !important;
    }
     #case_single_responsive_title, #blog_single_responsive_title {
         font-size: 30px !important;
         line-height: 38px !important;
    }
     #case_study_related_sources_responsive {
         padding: 0px 10px 0px 10px !important;
         margin-bottom: 20px;
    }
     .s-line {
         display: none;
    }
}
 @media screen and (max-width: 320px) {
     #custom-thumbnail-id {
         width: 100%!important;
         height: 221px;
         object-fit: cover;
         padding: 10px;
         border-radius: 15px;
         margin: 0;
    }
}
 @media screen and (max-width: 1024px) {
     .container-case {
         
    }
     #custom-thumbnail-id {
         max-width: 484px;
         width: 499px!important;
         height: 376px!important;
        ;
         object-fit: cover;
    }
}
 .container-case {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     border: 0.5px solid var(--disbled, #ccc);
     border-radius: 6px;
     background: var(--Footer, #fff);
     margin: 20px;
}
 .container-case:hover {
     border-radius: 6px;
     border: 1px solid var(--Primary-Color, #21449f);
     background: var(--Footer, #fff);
     box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.1);
}
 #custom-thumbnail-id {
     max-width: 484px;
     width: 484px;
     height: 306px;
     object-fit: cover;
}
 .container-case {
     margin: 0;
     display: flex;
     align-items: center;
    /* Align items vertically in the center */
}
 .content-case {
     margin-left: 20px;
    /* Adjust this margin as needed for spacing */
}
 .button {
     display: inline-block;
    /* Ensure the button is treated as an inline block */
}
 .container-case img {
     border-radius: 6px;
     margin: 15px;
}
 .content-case {
     flex: 1;
     max-width: 100%;
     margin-left: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
}
 button {
     background-color: #ffffff;
     color: #21449f;
     border-radius: 46px;
     border: 1px solid var(--Primary-Color, #21449f);
     font-family: Noto Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     display: inline-flex;
     padding: 13px 26px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     margin-top: 17px;
}
 #arrow-right {
     margin: 0px;
     padding-left: 10px;
}
 button a {
     background-color: #ffffff;
     color: #21449f;
}
 #about-case {
     color: var(--dark-grey, #595959);
     font-family: Noto Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .entry-title-case-study {
     color: #111;
     font-family: Raleway;
     font-size: 25px;
     font-style: normal;
     font-weight: 600;
     line-height: 35px;
    /* 140% */
}
 .entry-title-case-study a {
     color: #111;
     font-family: Raleway;
     font-size: 25px;
     font-style: normal;
     font-weight: 600;
     line-height: 35px;
    /* 140% */
}
 .about_text {
     color: var(--dark-grey, #595959);
     font-family: Noto Sans;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .loader {
     width: 50px;
    /* control the size */
     aspect-ratio: 1;
     display: grid;
     -webkit-mask: conic-gradient(from 15deg, rgba(226, 136, 136, 0.2), #a31212);
     mask: conic-gradient(from 15deg, rgba(226, 136, 136, 0.2), #a31212);
     animation: load 1s steps(12) infinite;
}
 .loader, .loader:before, .loader:after {
     background: radial-gradient( closest-side at 50% 12.5%, currentColor 90%, #0000 98% ) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, currentColor 90%, #0000 98%) 0 50%/80% 20% repeat-x;
}
 .loader:before, .loader:after {
     content: "";
     grid-area: 1/1;
     transform: rotate(30deg);
}
 .loader:after {
     transform: rotate(60deg);
}
 @keyframes load {
     20% {
         transform: rotate(0turn);
         color: #21449f33;
    }
     100% {
         transform: rotate(1turn);
         color: #21449f;
    }
}
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loading-text {
     margin-left: 10px;
     font-weight: bold;
}
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loading-text {
     margin-left: 10px;
     font-weight: bold;
}
 .load-more-container {
     text-align: center;
    /* Center the content horizontally */
     margin: 40px 40px;
    /* Add some top margin for spacing */
}
/*Case Study Mobile View*/
 @media only screen and (max-width: 600px) {
     .overview_box {
         margin: 20px;
    }
}
 @media (max-width: 768px) {
     .container-case {
         flex-direction: column;
         width: auto;
    }
     .blog_sider_border{
         border: none!important;
    }
     #custom-thumbnail-id {
         max-width: 800px;
         width: 100%!important;
         height: auto!important;
         object-fit: cover;
         margin: 0;
    }
}
 .content-case {
     margin: 20px;
}
/* Sticky the blog Details page side bar */
/*js is added in wp-code plugin custom.js */
 .sticky {
     position: fixed;
     top: 48px;
     z-index: 1000;
     transition: top 0.3s ease;
    /* Add transition for smooth animation */
}
 @media only screen and (max-width: 600px) {
     .sticky {
         position: absolute;
         transition: none;
        /* Remove transition for small screens */
    }
}
/* Sticky the blog Details page side bar */
 .post-title, .suggestion_title {
     color: #374151;
     font-family: Noto Sans !important;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .post-excerpt {
     color: #374151;
     font-family: Noto Sans;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .search-input-container {
     position: relative;
     display: flex;
     align-items: center;
}
 .explore_title {
     color: #374151;
     font-family: Noto Sans !important;
     font-size: 19px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .carousel-item {
     width: 274px;
     height: auto;
     border-radius: 16px;
     border: 1px #f7f8fb;
     background: white;
     box-shadow: -4px 4px 13px 0px #0000001C;
     margin:16px 10px 16px 10px;
     padding: 16px;
}
 .slick-slide img{
     border-radius: 8px;
     height: 150px;
     object-fit: cover;
     width: 100%;
}
 #fa-chevron-left {
     float: left;
     position: absolute;
     top: 42%;
     border-radius: 40px;
     width: 40px;
     height: 40px;
     padding: 12px;
     background: var(--Text, #FFF);
     box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
     margin-left: -20px;
     cursor:pointer;
     margin-left: 0;
     z-index: 2;
}
 #fa-chevron-right {
     float: right;
     position: relative;
     top: 34%;
     margin-right: -14px;
     margin-top: -207px;
     width: 40px;
     height: 40px;
     padding: 12px;
     border-radius: 40px;
     background: var(--Text, #FFF);
     box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
     cursor:pointer;
}
 @media only screen and (max-width:600px){
     #fa-chevron-right {
         margin-right: 0px;
    }
}
 .blog_sider_border{
     border-right: 1px solid #E8E8E8;
     padding-right: 40px;
     
}
 @media only screen and (max-width: 600px) {
     .sider_border{
         border-right: none;
         padding-right: 0;
    }
     .blog_sider_border{
         padding-right: 0px;
    }
     .post-thumbnail{
         margin-right: 0px;
    }
     .related-resources{
         margin-bottom: 20px;
    }
}
 .blog_top_cat_icon_today{
     display: flex;
     height: 36px;
     padding:8px 40px 9px 24px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     border-radius: 80px;
     background: #21449F;
     color: #FFF;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .blog_top_cat_icon_TTopic{
     display: flex;
     height: 36px;
     padding: 8px 12px;
     justify-content: center;
     align-items: center;
     color:#141414;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     float: left;
     gap:7px;
}
 #slider_container{
     padding-top:20px;
     padding-bottom:0;
     border-top: 1px solid #E8E8E8;
}
 #border-today{
     border-right: 2px solid #E8E8E8;
}
 @media only screen and (max-width: 600px) {
     .recently_added_box,.recently_added_box{
         padding-left: 30px;
         padding-right: 30px;
    }
}
 .recently_added_box{
     padding: 12px 15px;
     gap:24px!important;
}


 #today_conatiner{
     padding-top:30px;
     padding-bottom:30px;
}
/* Media query for 1024px size */
 @media (min-width: 769px) and (max-width: 1024px) {
     #today_conatiner{
         padding-top:25px;
         padding-bottom:0;
    }
}
 @media (min-width: 769px) and (max-width: 1024px) {
     input[type=button], input[type=reset], input[type=submit] {
         cursor: pointer;
         position: absolute;
         top: 46px;
         left: -119px;
         right: 0;
         position: relative;
         float: right;
         background: transparent;
         border: none;
         color: #fff;
    }
}
/*the container must be positioned relative:*/
 .ff-el-input--content {
     position: relative;
     font-family: Arial;
}
 .select-selected {
     background-color: transparent;
     background-clip: padding-box;
     background-image: none;
     border: 1px solid #898989!important;
     border-radius: 8px!important;
     color: #000!important;
     font-family: 'Manrope'!important;
     font-size: 14px!important;
     line-height: 1;
     margin-bottom: 0;
     max-width: 100%;
     padding: 13px 16px!important;
     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
 .same-as-selected{
     color: #fb4927!important;
}
 .select-selected:hover {
     border: 1px solid #FEC6AA!important;
     color: #000!important;
}
 .select-selected:focus {
     border: 1px solid #FEC6AA!important;
     color: #000!important;
}
/*style the arrow inside the select element:*/
 .select-selected:after {
     position: absolute;
     content: url('http://localhost/htraction/wp-content/uploads/2024/02/down-arrow-grey.svg');
     top: 8px;
     right: 20px;
     width: 15px;
     height: 16px;
}
/*point the arrow upwards when the select box is open (active):*/
 .select-selected.select-arrow-active:after {
     position: absolute;
     content: url('http://localhost/htraction/wp-content/uploads/2024/02/Up-arrow-Grey.svg');
     top: 8px;
     right: 20px;
     width: 15px;
     height: 16px;
}
/*style the items (options), including the selected item:*/
 .select-items div,.select-selected {
     color: #000;
     font-size: 14px;
     padding: 12px 24px;
     font-family: 'Manrope';
     cursor: pointer;
     user-select: none;
    /* font-weight: 500;
     */
}
/*style items (options):*/
 .select-items {
     position: absolute;
     background-color: white;
     color: white;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 99;
     border-radius: 8px;
     border: 0.5px solid #fb492724;
}
/*hide the items when the select box is closed:*/
 .select-hide {
     display: none;
}
 .select-items div:hover, .same-as-selected {
     background-color: #fec6aa40;
     font-family: 'Manrope';
     color: #000;
}
/*Case Study Details*/
 .case-study-details {
     height: 404px;
     width: 100%;
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 16px;
     align-items: center;
     text-align: center;
     color: white;
     padding: 0 208px 0 208px;
     margin-top:70px;
     
}
 .case-study-details h1 {
     color: #fff;
     font-family: 'Raleway';
     font-size: 25px;
     font-weight: 600;
     text-align: center;
     margin: 0;
     padding: 0;
}
 .case-study-details p {
     font-family: 'Raleway';
     font-size: 39.06px;
     font-weight: 600;
     letter-spacing: -0.005em;
     margin: 0;
     padding: 0;
     line-height: 56px;
}
 .horizontalLine{
     width:130px;
     height:5px;
     background:#fff;
     border-radius:4px 
}
 .horizontalLine.green {
     width:50px;
     height:5px;
     background:#3A8E03;
     border-radius:4px;
     display: block;
     margin-left: 0;
}
/* Responsive Design */
 @media (max-width: 768px) {
     .case-study-details{
         padding: 0 32px 0 32px;
    }
     .case-study-details h1 {
         font-size: 20px;
    }
     .case-study-details p {
         font-size: 30px;
         line-height: 35px;
    }
}
 @media (max-width: 600px) {
     .case-study-details{
         padding: 0 12px 0 12px;
    }
     .case-study-details h1 {
         font-size: 18px;
    }
     .case-study-details p {
         font-size: 25px;
         line-height: 31px;
    }
}
 .case_study_details_content_container{
     width: 100%;
     max-width: 1303px;
     padding: 56px 64px 56px 64px;
     display: flex;
     gap: 56px;
}
 .case_study_details_content_container .left_content{
     width: 65%;
}
 .case_study_details_content_container .right_content{
     display: flex;
     flex-direction: column;
     gap: 30px;
     width: 35%;
}
 @media (max-width: 768px) {
     .case_study_details_content_container{
         padding: 25px 32px 64px 32px;
    }
     .case_study_details_content_container{
         flex-direction: column;
    }
     .case_study_details_content_container .left_content{
         width: 100%;
    }
     .case_study_details_content_container .right_content{
         width: 100%;
         flex-direction: row;
    }
}
 @media (max-width: 600px) {
     .case_study_details_content_container {
         padding: 12px 12px 12px;
    }
     .case_study_details_content_container .right_content{
         flex-direction: column;
    }
}
 .right_side_card_container{
     width: 100%;
     max-width: 400px;
     border-radius:12px;
     border: 1px solid #F8F8F8;
     background:#fff;
     box-shadow: 0px 0px 25px 0px #00000014;
     margin: 0!important;

}
 .inner_container{
     padding:16px ;
}
 .right_side_card_container .right_side_card_top{
     height:70px;
     gap: 8px;
     border-radius: 12px 12px 0px 0px;
     background:#21449F;
     display: flex;
     align-items: center;
     justify-content: center;
}

 .right_side_card_container .inner_content{
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .right_side_card_container .inner_content span{
     align-items: flex-start;
     display: flex;
     width: 100%;
     color:#111111;
     font-family: Noto Sans;
     font-size: 16px;
     font-weight: 600;
     line-height: 21.79px;
}
 .right_side_card_container .inner_content p{
     color:#595959;
     font-family: Noto Sans;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
}
 .horizontalLine_small{
     border: none;
     height: 1px;
     color: #C4C4C4;
     background-color: #C4C4C4;
     border-radius:4px;
}
.inner_content span.looking_soln_heading {
    color: #1D1D1D !important;
    font-family: 'Poppins';
    font-size: 25px;
    font-weight: 500;
    line-height: 40px;
    margin-top: 0px;
}
 @media (max-width: 600px) {
     .inner_content span.looking_soln_heading {
         font-size: 18px;
         line-height: 24px;
    }
}
 .btn_container.btn_container{
     width: 100%;
}
 .right_side_card_container .inner_content.looking_soln{
     gap: 20px;
}
 .related_sources {
     display: flex;
     align-items: center;
     text-align: center;
}
 .horizontalLine.blue{
     width:45px;
     height:2px;
     background:#052C6F;
     border-radius:4px 
}
 .related_sources h1 {
     font-family: 'Raleway';
     font-size: 31.25px;
     font-weight: 700;
     line-height: 48px;
     margin: 0 20px;
}
 @media (max-width: 600px) {
     .related_sources h1 {
         display: block;
         font-size: 25px;
    }
     .related_sources {
         display:block;
         margin-top: 20px;
     }
}
 .related_rources_container {
     display: flex;
     gap: 32px;
     align-items: center;
     justify-content: center;
     flex-direction: row-reverse;
     max-width: 1303px;
     width: 100%;
     padding: 64px;
}
 .related_rources_container .inner_card{
     width:50%;
     height: auto;
     border-radius: 12px;
     border: 1px 0px 0px 0px;
     background: #fff;
     box-shadow: 0px 8px 30px 0px #0000001A;
}
 .related_rources_case_study_heading{
     font-family: Noto Sans;
     font-size: 20px;
     font-weight: 600;
     line-height: 32px;
     letter-spacing: 0.005em;
     text-align: left;
}
 .related_rources_inner_content{
     padding: 24px;
}
 .case_study_tagline_conatiner{
     display: flex;
     align-items: center;
     margin-top: 13px;
}
 .related_rources_case_study_label{
     color: #595959;
     font-family: 'Noto Sans';
     font-size: 16px;
     font-weight: 500;
     line-height: 21.79px;
     text-align: left;
     width: 100%;
}
 @media only screen and (max-width: 768px) {
     .related_rources_container{
         gap:12px;
         padding: 24px 24px 64px 24px;
    }
}
 @media only screen and (max-width: 600px) {
     .related_rources_container{
         flex-direction: column;
         gap: 12px;
         padding: 12px 12px 64px 12px;
    }
     .related_rources_container .inner_card{
     width:100%;
     }
     .related_rources_case_study_heading{
         font-size: 16px;
         line-height: 24px;
    }
     .related_rources_container .blog_inner_card{
         width: 100%;
    }
}
 .blog_content_container{
     width: 100%;
     max-width:1440px;
     padding: 36px 64px 36px 64px;
     margin: 0!important;
}
 .blog_content_container .blog_inner_container{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .blog_content_container .blog_inner_container_left{
     width: 100%;
}
 @media (max-width: 768px) {
     .blog_content_container{
         padding: 24px 24px 23px 24px;
    }
}
 @media (max-width: 600px) {
     .blog_content_container{
         padding: 12px;
    }
     .trending_heading{
         font-size: 20px!important;
    }
     .blog_content_container .blog_inner_container{
         padding: 0px 12px 0px 12px;
    }
}
 .blog_content_container .trending_heading{
     color: #111111;
     font-family: 'Raleway';
     font-size: 25px;
     font-weight: 600;
     line-height: 40px;
     text-align: left;
}
 .blog_item_card_content .blog_post_by{
     font-family: 'Noto Sans';
     color: #595959 ;
     font-size: 12px;
     font-weight: 400;
     line-height: 18px;
     text-align: left;
}
 .blog_item_card_content{
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 16px;
}
 .blog_heading{
     color: #595959 ;
     font-family: 'Noto Sans'!important;
    ;
     font-size: 14px;
     font-weight: 400;
     line-height: 19.07px;
     text-align: left;
}
 .container_date_time{
     display: flex;
     justify-content: space-between;
     width: 100%;
}
 .container_date_time .blog_post_date{
     color:#21449F ;
     font-family: 'Noto Sans'!important;
     font-size: 12px;
     font-weight: 400;
     line-height: 18px;
     text-align: left;
     width: 100%;
}
 .container_date_time .post-read-time{
     color:#21449F ;
     font-family: 'Noto Sans'!important;
    ;
     font-size: 12px;
     font-weight: 400;
     line-height: 18px;
     text-align: right;
     width: 100%;
}
 .container_explore_more_topics {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     justify-content: flex-start;
     padding:16px 0 16px 0px;
     border-bottom: 1px solid #E8E8E8;
}
 .chip_btn, .today_btn, .trending_btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 24px;
     height: 32px;
     border-radius: 80px;
     font-size: 14px;
     font-weight: 500;
     line-height: normal;
     border: none;
     margin-top: 0!important;
}

 .today_btn {
     background: #21449F;
     color: #FFF;
     cursor: context-menu;
     padding: 8px 24px!important;
     height: 36px!important;
}
 .trending_btn {
     background: none;
     color: #111111;
     padding: 6px;
     cursor: context-menu;
}
 .today_btn img, .trending_btn img {
     max-height: 100%;
    /* Adjusts image height if needed */
}
 .verticalLine {
     width: 2px;
     height: 36px;
    /* Adjust height to match button */
     background: #E8E8E8;
     margin: 0 8px;
    /* Add margin for spacing */
}
/* Responsive adjustments */
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
        /* Stack items vertically on smaller screens */
         align-items: center;
        /* Center items vertically */
    }
     .container_explore_more_topics {
         padding: 12px 12px;
    }
     .verticalLine {
         display: none;
        /* Hide vertical line on smaller screens */
    }
}
 .blog_list_conatiner{
     display:flex;
     gap:16px;
     justify-content:center;
     align-items: center;
}
.blog_list_conatiner:hover .blog_list_heading{
    color: #21449F;
}
.blog_list_inner_right_conatiner{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
 .blog_list_inner_left_conatiner img{
     max-width: 155px;
     width:155px;
     height:155px;
     object-fit:cover;
     border-radius:8px 
}
 .blog_list_date_time{
     color:#21449F;
     font-family: Noto Sans!important;
     font-size: 14px;
     font-weight: 400;
     line-height: 21px;
     text-align: left;
     margin-bottom: 8px;
}
 .blog_list_heading{
     color:#374151;
     font-family: Noto Sans!important;
     font-size: 16px;
     font-weight: 500;
     line-height: 21.79px;
     text-align: left;
     margin-bottom: 8px;
}
 .blog_list_author{
     color:#595959;
     font-family: Noto Sans!important;
     font-size: 14px;
     font-weight: 400;
     line-height: 21px;
     text-align: left;
     margin-bottom: 8px;
}
 @media (max-width: 480px) {
     .blog_list_conatiner{
         flex-direction:column;
    }
     .blog_list_inner_left_conatiner{
         width:100%;
    }
     .blog_list_inner_left_conatiner img{
        max-width: 100%;
        width: 100%;
         height:155px;
         object-fit:cover;
         border-radius:8px 
    }
     .blog_list_inner_left_conatiner img{
         width:100%;
         height:200px;
         object-fit:cover;
         border-radius:8px 
    }
}

 .right_blog_list_author{
     color:#595959;
     font-family: "Noto Sans"!important;
     font-size: 14px;
     font-weight: 400;
     line-height: 21px;
     text-align: left;
     margin:0!important;
}

 .right_list_inner_img_conatiner{
}
 .right_list_inner_img_conatiner img{
     max-width:65px!important ;
     width: 65px;
     height: 65px;
     object-fit: cover;
     border-radius: 8px;
}
 .related_topic_img{
     max-width:65px!important ;
     width: 65px;
     height: 65px;
     object-fit: cover;
     border-radius: 8px;
}
 .right_blog_list_conatiner {
     display: flex;
     flex-direction: row;
     gap: 16px;
     align-items: center;
     width: 100%;
}
 .right_blog_list_inner_conatiner{
     display: flex;
     flex-direction: column;
     gap: 8px;
     width: 100%;
}
 @media (max-width: 600px) {
     .right_blog_list_conatiner {
         padding: 0 ;
    }
}
 .container_blog_main{
    padding: 0 64px 64px 64px;
     max-width: 1440px;
     width: 100%;
     margin: 0!important;
}
 @media (max-width: 768px) {
    .container_blog_main{
       padding: 12px 24px;
    }
   
 }

 .blog_inner_container.explore_more {
     margin-top: 36px;
 }
 
.blog-details-hero{
    position: relative;
    z-index: 2;
}

 .blog-details-hero h1.time_date {
     color: #fff;
     font-family: 'Noto Sans';
     font-size: 20px;
     font-weight: 500;
     text-align: center;
     margin: 0;
     padding: 0;
}
@media (max-width:600px)
{
     .blog-details-hero h1.time_date {
              font-size: 16px;
     }
}

 /*Blog Details CSS*/

 .blog_detail_container{
     background-color: #fff!important;;
     display: flex!important;;
     align-items: center!important;;
     justify-content: center!important;;
     padding: 56px 0;
 }
 .blog_details_left_inner_container{
     margin: 0px!important;
     padding: 0 64px!important;
     width: 100%!important;
     display: block!important;
     max-width: 1303px!important;
 }
 .blog_details_card{
     margin: 0!important;
     padding: 0!important;
 }

 .blog_details_single{
     padding-right: 40px!important;
     width: 100%!important;;
 }
 @media (max-width:768px){
      .blog_details_single{
     padding-right: 0px!important;
     }
      .blog_details_left_inner_container{
        padding: 0 32px!important;
      }
      .blog_detail_container{
        padding: 24px 0;
      }
      .blog_details_single_responsive {
        margin-left: -25px;
      }
 }

 .blog_details_single_responsive{
     padding-right: 0!important;
     padding-left: 25px!important;
 }

 .up_next p,h1,blog_categories{
     margin: 0!important;
 }

 .container_up_next{
   padding: 0px 32px 64px;
    max-width: 1303px;
    width: 100%;
 }
 .container_up_next .up_next_card{
     margin-right: 20px;
 }
 .container_up_next .up_next_heading {
     color:#111111!important;
        font-size: 24px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.005em;
        text-align: left;
        margin: 32px 0px!important

 }

@media (max-width:768px){
     .container_up_next{
   padding: 12px 12px;
     }
}

@media (max-width: 600px) {
    .next-prev-btn-container {
    position: relative;
    top: -61px;
    float: none!important;
   display:none!important;
   
    left: 285px;
    right: 0;
    margin-bottom: -33px;
}
     .container_up_next .up_next_card{
     margin-right: 0px;
 }
  .container_up_next .up_next_heading {
 margin: -32px 0px 37px 0px !important;
  }

}

/*the container must be positioned relative:*/
.custom-dropdown {
    position: relative;
    font-family: Arial;
  }
  
  .custom-dropdown select {
    display: none; /*hide original SELECT element:*/
  }
  
  .select-selected {
    background-color: transparent;
    background-clip: padding-box;
    background-image: none;
    border: 1px solid #898989!important;
    border-radius: 8px!important;
    color: #000!important;
    font-family: 'Manrope'!important;
    font-size: 14px!important;
    line-height: 1;
    margin-bottom: 0;
    max-width: 100%;
    padding: 13px 16px!important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  .same-as-selected{
  color: #fb4927!important;
  }

  .select-selected:hover {
    border: 1px solid #FEC6AA!important;
    color: #000!important; 
  }
  .select-selected:focus {
    border: 1px solid #FEC6AA!important;
    color: #000!important; 
  }

  /*style the arrow inside the select element:*/
  .select-selected:after {
    position: absolute;
    content: url('https://htraction.com/wp-content/uploads/2024/02/down-arrow-grey.svg');
    top: 8px;
    right: 20px;
    width: 15px;
    height: 16px;
}

  
  /*point the arrow upwards when the select box is open (active):*/
  .select-selected.select-arrow-active:after {
    position: absolute;
    content: url('https://htraction.com/wp-content/uploads/2024/02/Up-arrow-Grey.svg');
    top: 8px;
    right: 20px;
    width: 15px;
    height: 16px;
  }
  
  /*style the items (options), including the selected item:*/
  .select-items div,.select-selected {
      color: #000;
      font-size: 14px;
      padding: 12px 24px;
      font-family: 'Manrope';
      cursor: pointer;
      user-select: none;
      /* font-weight: 500; */
  }
 
  
  /*style items (options):*/
  .select-items {
    position: absolute;
    background-color: white;
    color: white;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 8px;
    border: 0.5px solid #fb492724;

}
  
  /*hide the items when the select box is closed:*/
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
      background-color: #fec6aa40;
      font-family: 'Manrope';
      color: #000;
    
  }
@media only screen and (max-width:600px){
.share-container .post-title
{
    width:75%!important;
}
.modal-content{
    margin: 50% auto;
    width:90%;
}
}