/* Base Styles */
.blog-detail-container-new{
	/* margin: 80px auto; */
}
.news-blogs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-blogs-header{
    padding: 100px 0;
    text-align: center;
}
h1, h2, h3 {
    font-family: "IBM Plex Sans", serif;
}
.news-blogs-header h1 {
    font-family: "IBM Plex Sans", serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
	text-align: left;
    background: linear-gradient(90deg, #f62f2f 5%, #6402f5 30%);
    background-size: 109% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-repeat: repeat;
}

.news-blogs-header p {
    font-family:"IBM Plex Sans", serif ;
    font-size: 18px;
    line-height: 30px;
    text-align: left;
    color: #1A1A1A;
}

.main-news {
    width: 100%;
}

.featured-post {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden; 
}

.featured-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.featured-image {
    position: relative;
}

.time-main-badge{
	display: flex;
    align-items: center;
    position: absolute;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
	line-height: normal;
    background-color: rgba(0, 0, 0, 0.1); /* Adding background for better visibility */
	top: 10px;
    left: 10px;
}
.time-badge-main {
	display: flex;
    align-items: center;
    position: absolute;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
	line-height: normal;
    background-color: rgba(0, 0, 0, 0.1); /* Adding background for better visibility */
}
.time-badge-main svg {
    margin-right: 5px; /* Optional: space between SVG and text */
}
.post-time, .post-date{
	display: flex;
    align-items: center;
	color: #1A1A1A;
}
.post-time svg, .post-date svg {
    margin-right: 5px; /* Optional: space between SVG and text */
}
.time-badge-main .svg-icon {
    fill: white; /* Force the fill color to be white */
}
.custom-white-svg path {
    fill: white !important;
}
.news-blogs-container > .badge {
    top: 10px;
    left: 10px;
}

.time-badge-main {
    top: 10px;
    right: 10px;
}

.post-content-main {
    padding: 15px 0;
}

.post-content-main h3 {
    font-family: "IBM Plex Sans", serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 36px;
    color: #1F1F1F;
    margin: 0;
}
.title-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Restrict to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em; /* Adjust based on font size */
    line-height: 30px; /* Adjust to match text styling */
    white-space: normal;
}

.post-content-main p {
    font-family: "IBM Plex Sans", serif;
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 15px;
    color: #1A1A1A;
}

.author-date {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #999;
}

.trending-topics {
    width: 100%;
}

.trending-topics h3 {
    font-family: "IBM Plex Sans", serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #E2001B;
    border-bottom: 1px solid #D3D3D3;
}

.trending-post {
    margin-bottom: 15px;
}

.trending-post h4 {
    font-family: "IBM Plex Sans", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 5px;
}

.trending-post p {
    margin-bottom: 5px;
    font-family: "IBM Plex Sans", serif;
    font-size: 14px;
    line-height: 22px;
    color: #1A1A1A;
}

.author img {
    border-radius: 50%;
}

.author span {
    font-size: 14px;
    margin-left: 10px;
}
.trending-posts hr:last-of-type {
    display: none;
}
.page-navigation-blog {
    display: inline;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
}
.page-navigation-blog {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.page-navigation-blog .page-numbers.current {
    color: #000;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
    background: #ffcf0b;
}
.page-navigation-blog .disabled, .page-navigation .page-numbers-blog.dots, .page-navigation-blog a, .page-navigation-blog a:hover, .page-navigation-blog.active a {
    color: #000;
    text-decoration: none;
    padding: 5px 12px;
    background: #f0f0f0;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
	margin: 5px;
}
.page-navigation,
.searched-blog-main {
    float: left;
    width: 100%;
    margin-bottom: 20px
}

.page-navigation {
    display: inline;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center
}

.page-navigation .disabled,
.page-navigation .page-numbers.dots,
.page-navigation a,
.page-navigation a:hover,
.page-navigation.active a {
    color: #000;
    text-decoration: none;
    padding: 5px 12px;
    background: #f0f0f0;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer
}

.page-navigation.active a,
.page-navigation.disabled,
.panel-default>.panel-heading a[aria-expanded=true] {
    background-color: #eee
}

.page-navigation .active a,
.page-navigation a:hover {
    background-color: #cacaca
}

.page-navigation .page-numbers.current {
    color: #000;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
    background: #ffcf0b
}

.page-numbers.next,
.page-numbers.next:hover,
.page-numbers.prev,
.page-numbers.prev:hover {
    background-position: center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    padding: 5px 16px
}

.page-numbers.next,
.page-numbers.next:hover {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-58 57 9.8 16' style='enable-background:new -58 57 9.8 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='-56.1,71 -50.1,65.1 -56,59 '/%3E%3C/svg%3E%0A");
    margin-left: 5px
}

.page-numbers.prev,
.page-numbers.prev:hover {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-58 57 9.8 16' style='enable-background:new -58 57 9.8 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='-50.1,59 -56.1,64.9 -50.2,71 '/%3E%3C/svg%3E%0A");
    margin-right: 5px
}

.accordion-btn .bottom-arrow-endnotes,
.accordion-btn.collapsed .bottom-arrow-endnotes {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 7.41016L6 2.83016L1.41 7.41016L-1.53646e-07 6.00016L6 0.000156823L12 6.00016L10.59 7.41016Z' fill='%231A1A1A'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99
}
.faq-agile-text-banner {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 3%
}
.faq-wrap-main {
    width: 85%;
    margin: 10% auto
}

.faq-agile-text-banner{
    line-height: 42px;
    letter-spacing: 0;
    text-align: left
}
.panel-default>.panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #e4e5e7;
    padding: 0;
    -webkit-user-select: none;
    user-select: none
}
.panel-default>.panel-heading a {
			padding: 20px 15px;
			display: block !important;
			text-decoration: none;
			background-color: #eee;
		}
		.panel-default>.panel-heading a::before {
			content: "";
			position: relative;
			top: 1px;
			display: inline-block;
			font-family: "IBM Plex Sans", serif;
			font-style: normal;
			font-weight: 400;
			font-size: 24px;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			transition: transform .25s linear;
			-webkit-transition: -webkit-transform .25s linear
		}
.panel-default {
    border-bottom: 1px solid #ddd !important;
    border: 0
}

#accordion .panel-heading a:not(.collapsed) {
    border-left: 4px solid red;
    transition: .2s ease-in
}

/* .panel-default>.panel-heading .panel-title [aria-expanded=true]:before { */
    /* content: "\2B9E"; */
    /* -webkit-transform: rotate(90deg); */
    /* transform: rotate(90deg) */
/* } */

/* .panel-default>.panel-heading .panel-title [aria-expanded=false]:before { */
    /* content: "\27A4"; */
    /* -webkit-transform: rotate(180deg); */
    /* transform: rotate(1deg) */
/* } */
	.panel-default>.panel-heading .panel-title [aria-expanded=false]:before {
			content: "+";
			margin-right: 1rem;
			float: right;
		}
		.panel-default>.panel-heading .panel-title [aria-expanded=true]:before {
			content: "-";
			margin-right: 1rem;
			color: #e2001b;
			text-decoration: none;
			float: right;
			transform: none;
		}
.panel-body p{
	font-family: "IBM Plex Sans", serif;
    font-weight: 500;
    background: #fff;
    font-size: 18px;
    height: 100%;
}

/* Media Queries for Different Screen Sizes */
@media (min-width: 768px) {
    .news-blogs-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .news-blogs-header h1 {
        font-size: 56px;
        line-height: 70px;
    }

    .main-news {
        width: 70%;
    }

    .trending-topics {
        width: 25%;
    }
}

@media (min-width: 992px) {
    .news-blogs-header h1 {
        font-size: 64px;
        line-height: 80px;
    }

    .post-content h3 {
        font-size: 32px;
        line-height: 42px;
    }
}

@media (max-width: 576px) {
    .news-blogs-header h1 {
        font-size: 36px;
        line-height: 48px;
    }

    .news-blogs-header p {
        font-size: 16px;
        line-height: 28px;
    }

    .post-content h3 {
        font-size: 24px;
        line-height: 32px;
    }

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

    .trending-topics h3 {
        font-size: 18px;
        line-height: 26px;
    }

    .trending-post h4 {
        font-size: 16px;
    }

    .trending-post p {
        font-size: 12px;
        line-height: 20px;
    }
}

/* Filterable Blog Section Styles */
.filterable-blog-section {
    padding: 30px;
    max-width: 1170px;
    margin: 0 auto;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-btn {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 20px;
    font-family: 'JetBrains Mono';
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
}

.filter-btn.active {
    background-color: #f62f2f;
    color: #fff;
}

.blog-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
    gap: 20px; /* Adjust the gap between cards as needed */
	margin: 30px 0;
}

.blog-post {
    box-sizing: border-box;
	border-radius: 10px; 
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: relative;
}
/* .blog-post { */
    /* flex: 1 1 calc(33.33% - 20px); */
	/* box-sizing: border-box; */
    /* background: #fff; */
    /* border-radius: 10px; */
    /* overflow: hidden; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	/* min-height: 200px;  */
/* } */
.post-thumbnail {
    position: relative;
    display: block;
}

.post-thumbnail img {
    width: 100%;
    /* height: auto; */
    /* object-fit: contain; */
	height: 170px;
    object-fit: cover;
    border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	display: block;
}

.responsive-three-columns .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: JetBrains Mono;
    font-size: 14px;
	font-weight: 500;
    border-radius: 20px;
}

.post-content{
	padding: 10px;
}
.post-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 0;
	line-height: 30px;
	min-height: 62px;
}
.post-content a:hover {
    color: #ee2124;
    text-decoration: underline;
    outline: 0;
}
.post-meta {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #777;
}

.post-meta i {
    margin-right: 5px;
}

.card-grid {
    display: grid;
    gap: 20px;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
	grid-template-columns: repeat(2, 1fr); /* Two columns */
    padding: 0 0 30px;
	width: 100%;
}

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    background-color: #f5f5f5;
}
.video-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    cursor: pointer;
}

.video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    opacity: 0.8;
    pointer-events: none; /* Ensures only the wrapper is clickable */
}
.play-btn{
   background: red;
}
.videoCoverImages button{
   margin-left: -5px;
   margin-top: -7px;
}
.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.card h3 {
    margin: 0;
    padding: 15px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 18px;
}

.hidden-card {
    display: none;
}
.school-of-thoughts h2{
	font-family: "IBM Plex Sans", serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 42px;
	text-align: left;
	color: #1F1F1F
}
#see-more-btn {
    display: block;
    margin: 20px auto; /* Center the button horizontally */
    background-color: #f06c44; /* Set background color */
    color: white; /* Set text color */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
}

#see-more-btn:hover {
    background-color: #e05a34; /* Slightly darker shade for hover effect */
}
.filterable-blog-section {
    position: relative;
}

.blog-posts.loading,
.page-navigation-blog.loading {
    opacity: 0;
    pointer-events: none;
	display: none;
}

/* Skeleton styles */
.skeleton-loader {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: repeat(3, 1fr); /* Default 3 columns for web */
}

/* Skeleton Item Styles */
.skeleton-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-thumbnail {
    width: 100%;
    height: 150px;
}

.skeleton-title {
    width: 100%;
    height: 20px;
}

/* Skeleton Meta with Two Blocks */
.skeleton-meta {
    display: flex;
    justify-content: space-between; /* Align blocks to the left and right ends */
    align-items: center; /* Vertically center the blocks */
    width: 100%;
    height: 20px;
	background-color: white;
}

/* Left Block Style */
.skeleton-meta .block-left {
    background-color: #e0e0e0;
    border-radius: 4px;
    height: 100%;
    width: 40%; /* Adjust width as needed */
    position: relative;
    overflow: hidden;
}

/* Right Block Style */
.skeleton-meta .block-right {
    background-color: #e0e0e0;
    border-radius: 4px;
    height: 100%;
    width: 40%; /* Adjust width as needed */
    position: relative;
    overflow: hidden;
}

.skeleton-meta .block-left::after, .skeleton-meta .block-right::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: skeleton-loading 1.5s infinite;
}

/* Responsive styles */

@keyframes skeleton-loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Hide skeleton loader when content is loaded */
.skeleton-loader.loading {
    display: grid;
}

@media (max-width: 1024px) {
    .blog-posts {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
	.skeleton-loader {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (max-width: 768px) {
	.blog-detail-container-new{
		/* margin: 40px auto; */
		padding: 0;
	}
	.news-blogs-header{
		padding: 100px 0;
	}
    .blog-posts {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
	.card-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
	.video-wrapper {
		height: auto;
	}
	.card img {
		height: auto;
		object-fit: contain;
	}
	.skeleton-loader {
        grid-template-columns: 1fr; /* 1 column for mobile */
    }
	.post-content h3{
		min-height: auto;
	}
}

@media (max-width: 576px) {
    .filter-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .post-content h3 {
        font-size: 16px;
		line-height: 22px;
    }

    .post-meta {
        font-size: 12px;
    }
}