/* CSS Style by Diana */

/* ARTICLES PAGE */

.article-card .thumb {
	width: 100%;
	aspect-ratio: 466 / 198;
	object-fit: cover;
}

.article-card .title {
	font-weight: bold;
	font-size: 26px;
	margin-block: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: black;
	cursor: pointer;
}

.article-card .title:hover {
	color: #ed2603;
}
.video.article-card .title {
	color: #ed2603;
}
.article-card .desc , .video .desc{
	font-size: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-card.featured .title {
	font-size: 34px;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
	text-transform: none !important;
	color: black;
	height: 52px;
}

.article-card.featured .title:hover {
	color: #ed2603;
}

.article-card.featured .desc {
	font-size: 20px;
}

.article-card .date {
	font-size: 20px;
	color: #ed2603;
}
.side-article {
	align-items: center;
}
.side-article .title {
	font-size: 22px;
}

.side-article .desc {
	font-size: 16px;
}

/* .article-card .featured-thumb {
	width: 100%;
	aspect-ratio: 1520 / 559;
	object-fit: cover;
} */

.featured-articles {
	display: flex;
	flex-wrap: wrap;
}
.featured-articles .main-article .thumb {
	width: 100%;
	aspect-ratio: 1520 / 559;
	object-fit: cover;
	/* min-height: 190px; */
}
.featured-articles .main-article .desc {
	-webkit-line-clamp: 3;
}
.featured-articles .side-article .thumb {
	width: 100%;
	/* aspect-ratio: 172/ 161; */
	object-fit: cover;
	height: 161px;
	width: 172px;
}

.featured-articles .side-articles {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.side-article {
	display: flex;
	gap: 10px;
}

.view-button {
	color: #ed2603;
	font-weight: bold;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-block: 40px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.home-view-button{
    color: #ed2603;
	font-weight: bold;
	font-size: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-block: 40px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.view-button img, .home-view-button img {
	height: 20px;
}

.view-button:hover, .home-view-button:hover {
	scale: 1.1;
}

.hidden {
	display: none;
}

/* INNER ARTICLE PAGE */

.article-content .featured-img {
	width: 100%;
	aspect-ratio: 1520 / 559;
	object-fit: cover;
	margin-block: 24px;
}
.article-inner iframe {
	display: block;
	margin: auto;
	/*width: 60%;*/
	/*aspect-ratio: 16/9;*/
	margin-block: 30px;
}

.article-inner video {
	display: block;
	margin: auto;
	width: 60%;
	aspect-ratio: 16/9;
	margin-block: 30px;
}

.article-inner img {
	/* max-height: 500px; */
	width: 70%;
	height: 500px;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	margin: auto;
}

.article-inner p {
	padding-inline: 30px;
	margin-block: 24px;
	font-size: 20px;
}

.article-inner a {
	padding-inline: 30px;
	margin-block: 24px;
	font-size: 20px;
	font-weight: 600;
	color: black;
}
.article-inner a:hover {
	color: #ed2603;
}

.video-card {
	z-index: 100;
	position: relative;
}

.video-card iframe {
	z-index: 0;
	position: relative;
	width: 100%;
	height: 100%;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: red; */
	cursor: pointer;
	z-index: 150; /* Higher than iframe */
}

.video-card iframe {
	aspect-ratio: 470/ 250;
	position: relative;
	height: 100%;
	width: 100%;
}

.article-inner h1,
.article-inner h2,
.article-inner h3,
.article-inner h4,
.article-inner h5,
.article-inner h6 {
	padding-inline: 30px;
	margin-block: 24px;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
	text-transform: none !important;
	text-align: left;
	color: black;
}

.article-inner h1 {
	font-size: 36px;
}

.article-inner h2 {
	font-size: 32px;
}

.article-inner h3 {
	font-size: 30px;
}
.article-inner h4 {
	font-size: 28px;
}
.article-inner h5 {
	font-size: 26px;
}
.article-inner h6 {
	font-size: 24px;
}

.article-inner .meta {
	padding-block: 60px 30px;
	width: 100%;
	padding-inline: 30px;
}

.article-inner .meta p {
	padding-inline: 0px !important;
	font-size: 20px;
}
.article-inner .title {
	text-align: left !important;
	font-size: 58px;
	margin-bottom: 0px;
	padding-inline: 0px !important;
	color: #ed2603;
}

.featured-video {
	padding-inline: 8%;
}

.articles-container {
	padding-inline: 8%;
}

/* Modal Background */
.modal {
	display: none; /* Hidden by default */
	/* position: fixed; */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Dark background */
	justify-content: center;
	align-items: start;
	overflow: auto;
	/* overflow-y: scroll; */
	z-index: 1000;
	color: white !important;
}

/* Modal Content */
.modal-content {
	position: relative;
	width: 80%;
	max-width: 900px;
	padding: 20px;
	border-radius: 8px;
	background-color: transparent;
}
.modal-content h2,
.modal-content p {
	color: white !important;
	text-transform: none;
}

/* Video Container */
.video-container {
	width: 100%;
	/* height: 100%; */
	height: 560px;
	padding-top: 60px;
	position: relative;
}

.video-container iframe {
	/* aspect-ratio: 560 /315; */
	height: 100%;
	position: relative;
}
.video.article-card.featured {
	position: relative;
}

.modal-content #videoTitle {
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
}

/* Close Button */
.close-btn {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 14px;
	background: white;
	color: black;
	padding: 4px 16px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all ease 0.3s;
	z-index: 200;
}
.close-btn .x {
	color: #ed2603 !important;
	font-weight: bold;
	font-size: 24px;
}

.close-btn:hover {
	scale: 1.1;
}

.c-cookie {
	z-index: 200 !important;
}

#articlesContainer {
	min-height: 300px; /* Prevents layout shift */
	transition: opacity 0.3s ease-in-out;
}

#loader, #loaderVideo{
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #ccc;
	border-top: 4px solid #333;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.hidden {
	display: none !important;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.no-results {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #666;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Search Bar Container */
.search-container {
	width: 100%;
	display: flex;
	justify-content: right;
	margin-block: 40px;
	/* max-width: 400px; */
	/* margin: 20px auto; */
}

/* Input Field */
#searchInput, #searchInputVideo {
	padding: 12px 40px 12px 15px;
	font-size: 16px;
	border: 2px solid #ddd;
	border-radius: 25px;
	outline: none;
	transition: all 0.3s ease-in-out;
	width: 400px;
	
}

 .search-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	cursor: pointer;
}

/* Focus Effect */
#searchInput:focus {
	border-color: #ed2603;
	box-shadow: 0 0 8px rgba(237, 38, 3, 0.3);
}

/* Search Bar Hover Effect */
#searchInput:hover {
	border-color: #bbb;
}

/* MOBILE AND TABLET VIEW */
@media (max-width: 1025px) {
	.article-inner p {
		padding-inline: 10px;
		margin-block: 14px;
		font-size: 16px;
	}

	.article-inner a {
		padding-inline: 10px;
		margin-block: 14px;
		font-size: 16px;
	}
	.article-inner h1,
	.article-inner h2,
	.article-inner h3,
	.article-inner h4,
	.article-inner h5,
	.article-inner h6 {
		padding-inline: 10px;
		margin-block: 14px;
	}

	.article-inner .title {
		font-size: 34px;
	}
	.article-inner .meta {
		padding-block: 10px 10px;
	}

	.header-title {
		text-align: left !important;
	}
	.articles-container {
		padding-inline: 6%;
	}

	.featured-video {
		padding-inline: 0%;
		width: 100vw;
	}

	.featured-video iframe {
		width: 100vw;
	}

	.featured-video .details {
		padding-inline: 6%;
	}
	.featured-video .title {
		padding-inline: 6%;
	}
	.featured-video .header-title {
		padding-inline: 6%;
	}

	.article-card.featured .title {
		font-size: 28px;
		height: auto;
	}

	.modal-content {
		width: 100%;
	}

	.article-card .title {
		font-size: 24px;
	}
	.article-card .desc {
		font-size: 18px;
	}
	.featured-articles .side-article .thumb{
	    aspect-ratio: 1520 / 559;
	    width: 100%;
	}
}

/* Mobile view */
@media (max-width: 600px) {
	.video-container {
		/* height: 280px; */
		height: 30vh;
	}

	.article-inner iframe {
		width: 95%;
		margin-block: 30px;
	}

	.article-inner video {
		width: 95%;
		margin-block: 30px;
	}

	.article-inner img {
		height: 240px;
		width: 95%;
	}
	.side-article {
		align-items: center;
		flex-direction: column;
	}
	
	.featured-articles .side-article .thumb{
	    aspect-ratio: 1520 / 559;
	    width: 100%;
	}
}

.c-hdr__mobile__nav {
	z-index: 200 !important;
}