@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&display=swap');

body {
	font-family: 'Mulish', sans-serif;
}


/* Hide scrollbar for IE, Edge and Firefox */
html,
body {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}


.main-blog-content {
	background: #000;
	padding-top: 120px;
}

.detail-main-blog-content {
	background: #000;
	padding-top: 10px;
}

.blog-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	/* max-width: 1360px; */
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px max(24px, calc((100% - 1360px) / 2));
	background: linear-gradient(180deg, #0F0F0F 21.5%, rgba(15, 15, 15, 0.80) 59.35%, rgba(15, 15, 15, 0.00) 97.2%);
	z-index: 9999;
}


.blog-detail-back-button {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-top: 6px;
}


.blog_shem_logo {
	margin: auto;
	padding: 10px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	background: linear-gradient(180deg, #0F0F0F 21.5%, rgba(15, 15, 15, 0.80) 59.35%, rgba(15, 15, 15, 0.00) 97.2%);
	/* Optional: helps avoid transparency overlap */
	z-index: 100;
}

.shema_logo {
	height: 80px !important;
	width: 148px;
}

.detail_blog_shem_logo {
	display: flex;
	justify-content: center;
	pointer-events: none;
	/* so clicks don't block */
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	padding: 10px;
}

.shema_logo {
	height: 60px;
}

.back-button-blog {
	padding: 8px;
	width: 36px;
	height: 36px;
	border-radius: 51px;
	border: 1px solid #444;
	background: #222;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.back-btn-icon {
	width: 48.374px;
	height: 48.374px;
	aspect-ratio: 1/1;
	stroke-width: 3px;
	stroke: #FFF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11 17' fill='none'%3E%3Cpath d='M8.5 14.5L2.5 8.5L8.5 2.5' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.back-btn-text {
	color: #FFF;
	font-family: "Mulish";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.blog-title {
	max-width: 1360px;
	margin: 0 auto;
	color: #FFF;
	font-family: "Mulish";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.blog-movie-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 6px;
	row-gap: 20px;
	/* padding-bottom: 50px; */
}

.blog-movie-item {
	width: 678px;
	height: 222px;
	border-radius: 24px;
	border: 1px solid #444;
	background: #111;
}

.blog-week-trending-list {
	display: flex;
	justify-content: center;
	gap: 20px;
}

/*.blog-trending-left {
	width: 716px;
	height: 404px;
	border-radius: 24px;
	border: 1px solid #444;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
}*/
/*.blog-trending-right {
	width: 644px;
	height: 404px;
	border-radius: 24px;
	border: 1px solid #444;
}*/

.blog-trending-month-item {
	width: 1360px;
	height: 765px;
	position: relative;
	margin: 0 auto;
	border-radius: 24px;
	border: 1px solid #444;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
}

.trending-shows-list {
	display: flex;
	gap: 12px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none;
	/* IE/Edge */
	scrollbar-width: none;
	/* Firefox */
	max-width: 1360px;
	margin: 0 auto;
	padding-bottom: 8px;
}

.trending-shows-list::-webkit-scrollbar {
	display: none;
	/* Chrome/Safari */
}

.show-trending {
	text-align: left;
}

.trending-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
}

.nav-buttons {
	display: flex;
	gap: 10px;
	align-items: center;
}

.trending-header .blog-title {
	margin: 0;
	max-width: none;
}

.trending-show-item {
	flex: 0 0 323px;
	height: 405px;
	display: flex;
	flex-direction: column;
	border-radius: 24px;
	border: 1px solid #444;
	background: #111;
}

.trending-show-item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

.blog-trending-text-wrap {
	position: relative;
	width: 716px;
	height: 404px;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid #444;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 10%, #000);
}

/* overlay pseudo-element placed ABOVE the image */
.blog-trending-text-wrap::after,
.blog-trending-month-item::after,
.movie-detail-text-det::after {
	content: "";
	position: absolute;
	inset: 0;
	/* top:0; right:0; bottom:0; left:0 */
	z-index: 2;
	/* MUST be > img z-index */
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%);
	border-radius: inherit;
}

.blog-trending-text-wrap img,
.movie-detail-text-det img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
	z-index: 1;
}

.image-gradient {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
}

.movie-overlay {
	width: 517px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	/* background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8)); */
	border-radius: 0 0 24px 24px;
	z-index: 3;
	/* highest layer */
}

.movie-title {
	color: #FFF;
	font-family: "Mulish";
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0 0 10px;
}

.tags {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.blog-tag {
	display: flex;
	height: 32px;
	padding: 6px 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 12px;
	border: 1px solid #444;
	background: rgba(0, 0, 0, 0.24);
	font-size: 16px;
	font-family: "Mulish";
	font-weight: 700;
	color: #fff;
}

.movie-desc {
	font-family: "Mulish";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


.trending-show-item.many-tags .movie-desc,
.blog-trending-right .movie-card.many-tags .movie-desc,
.movie-card-small.many-tags .movie-desc,
.movie-card-small.tags-wrapped .movie-desc {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}


.read-more-btn {
	display: inline-block;
	width: 107px;
	height: 44px;
	border-radius: 12px;
	background: #444;
	padding: 12px;
	font-size: 16px;
	font-family: "Mulish";
	font-weight: 700;
}

.read-more-btn:hover {
	background: #D41F52;
	color: #fff;
}

.movies-row {
	display: flex;
	gap: 20px;
}

.movie-card {
	background: #111;
	border: 1px solid #444;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 312px;
	height: 404px;
}

.movie-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.movie-content {
	padding: 15px;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: space-between;
}

.blog-movie-title {
	font-family: "Mulish";
	font-size: 20px;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.movie-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.movie-tag {
	display: flex;
	padding: 6px 8px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	border: 1px solid #444;
	background: rgba(0, 0, 0, 0.24);
	font-size: 12px;
	font-weight: 400;
	font-family: "Mulish";
}

.movie-read-more-btn {
	display: inline-block;
	padding: 8px 14px;
	background: #444;
	color: #FFF;
	font-size: 16px;
	font-weight: 700;
	font-family: "Mulish";
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
	align-items: center;
	align-self: stretch;
}

.movie-read-more-btn:hover {
	background: #D41F52;
	;
	color: #fff;
}

.movie-card-small {
	display: flex;
	gap: 12px;
	overflow: hidden;
	border-radius: 24px;
	border: 1px solid #444;
	background: #111;
	padding: 6px 6px 12px 6px;
	height: 100%;
	box-sizing: border-box;
}

.movie-card-small img {
	width: 360px;
	height: 204px;
	object-fit: cover;
	border-radius: 24px;
}

.movie-info {
	padding: 6px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex: 1;
}

.blog-trending-month-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
}

.banner-movie-overlay {
	width: 597px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 40px;
	/* background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8)); */
	border-radius: 0 0 24px 24px;
	z-index: 3;
	/* highest layer */
}

.banner-blog-title {
	color: #FFF;
	font-family: "Mulish";
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	margin: 0 0 10px;
}

.blog-banner-tag {
	display: flex;
	height: 32px;
	padding: 6px 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 12px;
	border: 1px solid #444;
	background: rgba(0, 0, 0, 0.24);
	font-size: 18px;
	font-family: "Mulish";
	font-weight: 700;
}

.blog-banner-desc {
	font-family: "Mulish";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.movie-detail-wrap {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding-top: 140px;
}

.movie-detail-text-det {
	position: relative;
	width: 900px;
	height: 542px;
	border-radius: 24px;
	border: 1px solid #444;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%);
}

.movie-star-cast-det {
	width: 440px;
	height: 542px;
	border-radius: 24px;
	border: 1px solid #444;
	background: #111;
	padding: 15px;
}

.movie-detail-overlay {
	/*width: 825px;*/
	height: auto;
	display: flex;
	gap: 12px;
	position: absolute;
	bottom: 12px;
	left: 7px;
	right: 12px;
	padding: 6px;
	/* background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); */
	border-radius: 0 0 24px 24px;
	z-index: 3;
	justify-content: space-between;
}

.movie-detail-desc {
	color: #FFF;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
}

.det-desc-first {
	font-weight: 500;
	font-family: "Mulish";
}

.det-desc-second {
	font-weight: 700;
	font-family: "Mulish";
}

.movie-det-wrap {
	width: 529px;
}

.movie-det-tags {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.watch-now-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	gap: 10px;
	width: 265px;
	height: 68px;
	border-radius: 20px;
	background: #D41F52;
	padding: 10px 18px;
	font-size: 24px;
	font-family: "Mulish";
	font-weight: 700;
}

.blog-play-pause-btn {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='48' viewBox='0 0 49 48' fill='none'%3E%3Cpath d='M24.5 44C35.5457 44 44.5 35.0457 44.5 24C44.5 12.9543 35.5457 4 24.5 4C13.4543 4 4.5 12.9543 4.5 24C4.5 35.0457 13.4543 44 24.5 44Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.5 17.9307C19.5 16.9761 19.5 16.4988 19.6995 16.2324C19.8733 16.0001 20.1394 15.8549 20.4288 15.8342C20.7608 15.8105 21.1622 16.0686 21.9652 16.5848L31.4064 22.6541C32.1032 23.102 32.4516 23.326 32.5719 23.6108C32.677 23.8596 32.677 24.1404 32.5719 24.3892C32.4516 24.674 32.1032 24.898 31.4064 25.3459L21.9652 31.4152C21.1622 31.9314 20.7608 32.1895 20.4288 32.1658C20.1394 32.1451 19.8733 31.9998 19.6995 31.7676C19.5 31.5012 19.5 31.0239 19.5 30.0693V17.9307Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-color: transparent;
	border: none;
}

.star-cast-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.star-cast-det {
	max-height: 460px;
	overflow-y: auto;
}

.star-cast-det::-webkit-scrollbar {
	width: 2px;
}

.star-cast-det::-webkit-scrollbar-track {
	background: #000;
}

.star-cast-det::-webkit-scrollbar-thumb {
	background: #000;
	border: 1px solid #444;
	border-radius: 10px;
}

.star-cast-names {
	width: 100%;
	box-sizing: border-box;
	height: 76px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	border-radius: 20px;
	background: #222;
}

.original-name {
	font-family: "Mulish";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #fff;
}

.cast-name {
	color: #999;
	font-family: Mulish;
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: normal;
}

.blog-synopsis-wrap {
	width: 1360px;
	margin: auto;
	border-radius: 20px;
	border: 1px solid #444;
	background: #111;
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	/* needed for gradient overlay */
}

.blog-where-to-watch-wrap,
.blog-why-should-watch-wrap {
	width: 1360px;
	/* height: 250px; */
	min-height: 250px;
	margin: auto;
	border-radius: 20px;
	border: 1px solid #444;
	background: #111;
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog-syn-episode-wrap {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.blog-synopsis-wrap-data {
	width: 900px;
	/* height: 250px; */
	margin: auto;
	border-radius: 20px;
	border: 1px solid #444;
	background: #111;
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	/* needed for gradient overlay */
}

.where-to-watch-wrap-data,
.why-should-watch-wrap-data {
	width: 900px;
	/* height: 250px; */
	margin: auto;
	border-radius: 20px;
	border: 1px solid #444;
	background: #111;
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog-episode-box {
	width: 440px;
	max-height: 860px;
	border-radius: 20px;
	border: 1px solid #444;
	background: #111;
	padding: 14px 20px;
	overflow: hidden;
}

.episode-scroll {
	max-height: 810px;
	width: 410px;
	overflow-y: auto;
}

.episode-scroll::-webkit-scrollbar {
	width: 2px;
}

.episode-scroll::-webkit-scrollbar-track {
	background: #000;
}

.episode-scroll::-webkit-scrollbar-thumb {
	background: #000;
	border: 1px solid #444;
	border-radius: 10px;
}



.synopsis-desc-wrap {
	max-height: 280px;
	overflow-y: hidden;
	position: relative;
}

.synopsis-desc-wrap,
.why-should-watch-desc-wrap,
.where-to-watch-desc-wrap {
	transition: max-height 0.35s ease;
}

/* Add the gradient at the bottom of the synopsis */
.synopsis-desc-wrap::after,
.why-should-watch-desc-wrap::after,
.where-to-watch-desc-wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	/* adjust height of gradient */
	background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111 100%);
	pointer-events: none;
	/* so it doesn’t block button clicks */
}

.synopsis-desc-wrap.no-gradient::after,
.why-should-watch-desc-wrap.no-gradient::after,
.where-to-watch-desc-wrap.no-gradient::after {
	display: none;
}

.why-should-watch-desc-wrap,
.where-to-watch-desc-wrap {
	max-height: 180px;
	overflow-y: hidden;
	position: relative;
}

.synopsis-desc {
	color: #FFF;
	font-family: "Mulish";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.synopsis-desc-below-btn,
.where-to-watch-desc-below-btn,
.why-should-watch-desc-below-btn {
	width: 18px;
	height: 18px;
	aspect-ratio: 1/1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M13.5 6.75L9 11.25L4.5 6.75' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.synopsis-below-btn-wrap {
	display: flex;
	justify-content: center;
	margin-top: auto;
}

.synopsis-desc-below-btn.rotate,
.where-to-watch-desc-below-btn.rotate,
.why-should-watch-desc-below-btn.rotate {
	transform: rotate(180deg);
	transition: transform 0.3s ease;
}

.blog-trailer-wrap {
	width: 1360px;
	height: 632px;
	margin: auto;
	padding: 20px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: #111;
}

.trailer-container {
	display: flex;
	justify-content: center;
}

.trailer-video {
	width: 972px;
	height: 549px;
	border-radius: 20px;
}

.blog-review-wrap {
	max-width: 1360px;
	margin: auto;
}

.review-card {
	background: #1e1e1e;
	border-radius: 8px;
	padding: 15px 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

.review-content {
	flex: 1;
}

.reviewer {
	color: #FFF;
	font-family: "Mulish";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.date {
	margin-bottom: 10px;
	color: #FFF;
	font-family: "Mulish";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.review-text {
	color: #FFF;
	font-family: "Mulish";
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: normal;
}

.rating {
	background: #2e2e2e;
	padding: 5px 10px;
	border-radius: 6px;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
	position: absolute;
	top: 15px;
	right: 20px;
}

.rating.green {
	background: #2e7d32;
}

/* Positive */
.rating.red {
	background: #c62828;
}

/* Negative */
.rating.yellow {
	background: #f9a825;
}

/* Neutral */

.review-tags {
	margin-top: 20px;
}

.review-tags span {
	display: inline-block;
	background: #2a2a2a;
	color: #999;
	font-size: 16px;
	padding: 6px 10px;
	margin: 5px 5px 0 0;
	border-radius: 6px;
	cursor: pointer;
	transition: 0.2s;
	font-family: "Mulish";
	font-style: normal;
	font-weight: 700;
}

.review-tags span:hover {
	background: #444;
	color: #fff;
}

.recommendations {
	margin-top: 30px;
}

.recommendations h3 {
	font-size: 18px;
}

.recommendations_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	color: #fff;
}

#prevBtnn {
	height: 24px;
	width: 24px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.20);
	/*background: rgba(51, 51, 51, 0.70);*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M-2.18485 -1.55844H12.932V13.5584H-2.18485V-1.55844Z' fill='white'/%3E%3C/svg%3E");
	background-color: transparent;
	/*border: none;*/
	cursor: pointer;
}

#nextBtnn {
	height: 24px;
	width: 24px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.20);
	/*background: rgba(51, 51, 51, 0.70);*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M9.1846 -1.55844H-5.93228V13.5584H9.1846V-1.55844Z' fill='white'/%3E%3C/svg%3E");
	background-color: transparent;
	/*border: none;*/
	cursor: pointer;
}

.movie-slider {
	display: flex;
	overflow-x: auto;
	gap: 12px;
	scrollbar-width: thin;
	scrollbar-color: #444 transparent;
}

.movie-slider::-webkit-scrollbar {
	height: 8px;
}

.movie-slider::-webkit-scrollbar-thumb {
	background: #444;
	border-radius: 4px;
}

.movie-poster {
	flex: 0 0 auto;
	width: 120px;
	height: 170px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #444;
}

.movie-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.blog-episode-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* overflow-y: auto; */
}

.episode-det {
	width: 100%;
	max-width: 100%;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border-radius: 24px;
	background: #222;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.40);
	padding: 12px;
	margin-bottom: 15px;
	overflow: hidden;
}

.episode-img {
	width: 173px;
	height: 97px;
	border-radius: 16px;
	aspect-ratio: 173/97;
	border: 1px solid rgba(255, 255, 255, 0.24);
}

.episode-content {
	flex: 1;
}

.episode-title {
	color: #FFF;
	font-family: Mulish;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* limit to 2 lines */
	overflow: hidden;
}

.episode-desc {
	font-family: Mulish;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.0em;
	color: #FFF;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;

	width: 192px;
	max-height: 3em;
	/* 3 lines × 1em */
}

.left_arrow_icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
	background-image: url("data:image/svg+xml,%3Csvg id='left_arrow' data-name='left arrow' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='24' height='24' fill='rgba(147,147,147,0)'/%3E%3Cg id='Rectangle_4' data-name='Rectangle 4' transform='translate(0 1)' fill='rgba(0,0,0,0.24)' stroke='rgba(255,255,255,0.4)' stroke-width='1'%3E%3Crect width='23' height='23' rx='11.5' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='22' height='22' rx='11' fill='none'/%3E%3C/g%3E%3Cpath id='Path_5' data-name='Path 5' d='M935.334,1215.074a1,1,0,0,0,.707-1.707l-3.627-3.627,3.627-3.626a1,1,0,0,0-1.414-1.414l-4.334,4.333a1,1,0,0,0,0,1.414l4.334,4.334A1,1,0,0,0,935.334,1215.074Z' transform='translate(-921.667 -1197.241)' fill='%23fff'/%3E%3C/svg%3E%0A");
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.right_arrow_icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg id='right_arrow' data-name='right arrow' transform='translate(-919.265 -1203)'%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='24' height='24' transform='translate(919.265 1203)' fill='rgba(147,147,147,0)'/%3E%3Cg id='Rectangle_4' data-name='Rectangle 4' transform='translate(920.265 1204)' fill='rgba(0,0,0,0.24)' stroke='rgba(255,255,255,0.4)' stroke-width='1'%3E%3Crect width='23' height='23' rx='11.5' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='22' height='22' rx='11' fill='none'/%3E%3C/g%3E%3Cpath id='Path_5' data-name='Path 5' d='M931,1215.074a1,1,0,0,1-.707-1.707l3.627-3.627-3.627-3.626a1,1,0,0,1,1.414-1.414l4.334,4.333a1,1,0,0,1,0,1.414l-4.334,4.334A1,1,0,0,1,931,1215.074Z' transform='translate(-1.402 5.759)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
	background-color: transparent;
	border: none;
	cursor: pointer;
}



/* Pro 12.9 (1024-1366) */
@media (min-width: 1024px) and (max-width: 1366px) {

	/* Trending Movies Layout */
	.blog-week-trending-list {
		display: flex;
		flex-direction: row !important;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.blog-trending-left {
		width: 669px;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.blog-trending-right {
		width: auto;
	}

	.blog-trending-text-wrap {
		width: 669px;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	/* Scale Movie Cards in Trending Right to fit 2-up */
	.blog-trending-right .movies-row {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}

	/* Second and Third Card Style */
	.blog-trending-right .movie-card {
		/* width: 248.045px;
		height: 369px; */
		border-radius: 24px;
		border: 1px solid #444;
		background: #000;
		flex: none;
		position: relative;
		overflow: hidden;
	}

	.blog-trending-right .movie-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.blog-trending-right .movie-card .movie-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		background: transparent;
		padding-bottom: 20px;
		border: none;
	}

	/* Gradient Overlay */
	.blog-trending-right .movie-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%);
		border-radius: inherit;
	}

	/* Trending Movies Row: 2 items per row */
	.blog-movie-item {
		width: calc(48% - 10px);
	}

	.week-movies-trending-blog .movie-card-small img {
		width: 331px;
		height: 186px;
		aspect-ratio: 105/59;
		object-fit: cover;
	}

	/* Read More Button */
	/* .week-movies-trending-blog .movie-read-more-btn,
	.trending-show-item .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		text-align: left;
	} */

	/* Trending Shows: horizontal scroll row */
	.trending-shows-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 12px;
		justify-content: flex-start;
	}

	.trending-show-item {
		width: 282px;
		flex: none;
		height: auto;
	}

	.trending-show-item img {
		height: 159px;
		width: 100%;
		aspect-ratio: 94/53;
		border-radius: 24px 24px 0 0;
		object-fit: cover;
		background: lightgray 50% / cover no-repeat;
	}

	.trending-shows-list {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 20px;
	}

	/* .main-blog-content{
	padding: 120px 50px;
	} */

	.blog-week-trending-list,
	.blog-trending-left,
	.blog-trending-right {
		padding-bottom: 20px;
	}

	.blog-trending-month-item {
		/* width: 1360px; */
		height: 537px;
		position: relative;
		margin: 0 auto;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.main-blog-content {
		padding: 100px 20px 22px 20px;
	}

	.detail-main-blog-content {
		padding: 1px 24px 20px 24px;
	}

	.movie-detail-overlay {
		/* width: 825px; 
		height: 230px; */
		display: flex;
		gap: 2px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20px;
		/* background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); */
		border-radius: 0 0 24px 24px;
	}

	.movie-star-cast-det {
		width: 100%;
		background: none;
		border: none;
		height: 110px;
		padding: 0px;
		margin-bottom: 28px;
		margin-top: 28px;
	}

	.movie-detail-text-det {
		width: 100%;
		height: 544px;
	}

	.banner-blog-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 28px;
		font-style: normal;
		font-weight: 900;
		line-height: normal;
		margin: 0 0 10px;
	}

	.movie-detail-desc {
		color: #FFF;
		font-size: 20px;
		font-style: normal;
		line-height: normal;
	}

	.blog-tag {
		display: flex;
		height: 32px;
		padding: 6px 12px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 12px;
		border: 1px solid #444;
		background: rgba(0, 0, 0, 0.24);
		font-size: 14px;
		font-family: "Mulish";
		font-weight: 700;
		color: #fff;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
	.movie-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 24px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0 0 10px;
	}

	.movie-desc {
		font-family: "Mulish";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* .read-more-btn {
		display: inline-block;
		width: 107px;
		height: 44px;
		border-radius: 12px;
		background: #444;
		padding: 12px;
		font-size: 14px;
		font-family: "Mulish";
		font-weight: 700;
	} */

	.blog-week-trending-list {
		display: flex;
		flex-direction: row !important;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.blog-movie-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 6px;
		row-gap: 20px;
		padding-bottom: 20px;
	}

	.blog-trending-left {
		width: 100%;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.blog-trending-right {
		width: 44%;
	}

	/* First Card Style */
	.blog-trending-text-wrap {
		width: 100%;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	/* Scale Movie Cards in Trending Right to fit 2-up */
	.blog-trending-right .movies-row {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}

	/* Second and Third Card Style */
	.blog-trending-right .movie-card {
		width: calc(50% - 10px);
		height: 369px;
		border-radius: 24px;
		border: 1px solid #444;
		/* background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%); removed bg on container, moved to overlay */
		background: #000;
		flex: none;
		position: relative;
		overflow: hidden;
	}

	.blog-trending-right .movie-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	/* .blog-trending-right .movie-card .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		align-self: flex-start;
		text-align: left;
	} */

	.blog-trending-right .movie-card .movie-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		background: transparent;
		padding-bottom: 20px;
		border: none;
	}

	/* Gradient Overlay */
	.blog-trending-right .movie-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%);
		border-radius: inherit;
	}

	/* Trending Movies Row: 2 items per row */
	.blog-movie-item {
		width: calc(48% - 10px);
	}

	/* .week-movies-trending-blog .movie-read-more-btn,
	.trending-show-item .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		text-align: left;
	} */

	/* Trending Shows: horizontal scroll row */
	.trending-shows-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 12px;
		justify-content: flex-start;
	}

	.trending-show-item {
		width: 282px;
		flex: none;
		height: auto;
	}

	.trending-show-item img {
		height: 159px;
		width: 100%;
		aspect-ratio: 94/53;
		border-radius: 24px 24px 0 0;
		object-fit: cover;
		background: lightgray 50% / cover no-repeat;
	}

	/* 2. Detail Page: Mini Desktop Row */
	.movie-detail-wrap {
		flex-direction: row;
		align-items: flex-start;
		padding-top: 100px;
		gap: 20px;
		margin-bottom: 0px !important;
	}

	.movie-detail-text-det {
		width: 65%;
		height: auto;
		/* min-height: 480px; */
	}

	.movie-star-cast-det {
		width: 32%;
		height: 483px;
		border: 1px solid #444;
		padding: 15px;
		margin-top: 0;
	}

	.star-cast-det {
		height: calc(100% - 50px);
		overflow-y: auto;
	}

	/* 3. Synopsis & Episodes: Mini Desktop Row (Side-by-Side) */
	.blog-syn-episode-wrap {
		flex-direction: row;
		align-items: flex-start;
		/* Aligns tops of Synopsis and Episodes */
		gap: 20px;
	}

	.blog-synopsis-box {
		width: 65%;
		margin-right: 0;
	}

	.blog-episode-box {
		width: 32%;
		margin-left: auto;
	}

	/* Prevent Episode Scroll fixed width from breaking layout */
	.episode-scroll {
		width: 100% !important;
		max-height: 800px;
		overflow-y: auto;
	}

	/* Ensure internal wrappers scale */

	.blog-trending-month-item {
		width: 100%;
		height: auto;
	}

	.blog-synopsis-wrap-data,
	.where-to-watch-wrap-data,
	.why-should-watch-wrap-data {
		width: 100%;
	}
}

/* iPad Pro 12.9 Landscape specifically */
@media only screen and (min-width: 1360px) and (max-width: 1366px) and (orientation: landscape) {
	.blog-movie-list {
		row-gap: 58px;
		padding-bottom: 50px;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
	.blog-week-trending-list {
		flex-direction: column !important;
		align-items: center;
	}

	.blog-trending-left {
		margin-bottom: 20px;
	}

	.blog-trending-right {
		width: auto;
	}

	.blog-trending-right .movies-row {
		display: flex;
		gap: 20px;
		justify-content: center;
	}

	.blog-trending-month-item {
		width: 100%;
		height: auto;
	}

	.blog-trending-month-item img {
		width: 100%;
		height: auto;
	}
}

/* Specific Desktop/Tablet Ranges */
@media (min-width: 1025px) and (max-width: 1280px) {
	.movie-detail-text-det {
		width: 65%;
		height: 375px;
	}

	.star-cast-names {
		width: calc(100% - 4px);
	}

	.blog-synopsis-wrap,
	.blog-where-to-watch-wrap,
	.blog-why-should-watch-wrap,
	.blog-trailer-wrap,
	.blog-title,
	.blog-trending-month-item {
		width: 100%;
	}

	.movie-detail-text-det img {
		object-fit: fill;
	}

	.movie-star-cast-det {
		width: 32%;
		height: 375px;
	}

	.star-cast-det {
		height: calc(100% - 40px);
		overflow-y: auto;
	}

	.blog-episode-box {
		display: flex;
		width: 32%;
		height: 861px;
		padding: 14px 20px;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
}

@media (min-width: 821px) and (max-width: 1190px) {
	/* .blog-trending-right .movies-row .movie-card .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: none;
		width: auto;
		height: auto;
		padding: 0;
		align-self: flex-start;
	} */

	.movie-card-small .movie-info {
		justify-content: space-between;
		height: 100%;
	}

	.movie-card-small {
		align-items: stretch;
		height: 100%;
		flex: 1;
	}

	.blog-movie-list>a {
		display: flex;
		height: auto;
	}

	.blog-movie-item {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.trending-shows-list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 10px;
		justify-content: flex-start;
	}

	.trending-show-item {
		width: calc(25% - 15px);
		flex: none;
	}

	.blog-episode-box {
		display: flex;
		width: auto;
		height: 560px;
		padding: 14px 20px;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
}

/* Max 1024 Generic */
@media (max-width: 1023px) {
	.blog-week-trending-list {
		flex-direction: column;
	}

	.blog-trending-month-item {
		width: 100%;
	}

	.blog-trending-month-item img {
		object-fit: fill;
	}

	.trending-shows-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
	}

	.trending-show-item {
		width: 460px;
	}

	.main-blog-content,
	.detail-main-blog-content {
		padding: 120px 20px;
	}

	.blog-header-wrap {
		justify-content: space-between;
		gap: 0px;
		background: linear-gradient(180deg, #0F0F0F 21.5%, rgba(15, 15, 15, 0.80) 59.35%, rgba(15, 15, 15, 0.00) 97.2%);
	}

	.movie-detail-wrap {
		flex-direction: column;
	}

	.movie-detail-text-det {
		width: 100%;
		height: 500px;
	}

	.movie-detail-overlay {
		width: 100%;
	}

	.movie-star-cast-det {
		width: 100%;
		background: none;
		border: none;
		height: 110px;
		/* padding: inherit; */
	}

	.star-cast-det {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #444 transparent;
	}

	.star-cast-wrap {
		display: inline-flex;
		flex-wrap: nowrap;
		flex-direction: row;
		;
		height: 75px;
	}

	.star-cast-names {
		width: 210px;
		height: 64px;
		border-radius: 16px;
	}

	.blog-synopsis-wrap,
	.blog-where-to-watch-wrap,
	.blog-why-should-watch-wrap,
	.blog-trailer-wrap,
	.trailer-video,
	.blog-synopsis-wrap-data,
	.where-to-watch-wrap-data,
	.why-should-watch-wrap-data,
	.blog-episode-box,
	.episode-det {
		width: 100%;
	}

	.blog-movie-item {
		width: 900px;
	}

	.detail_blog_shem_logo {
		width: 100%;
		justify-content: flex-end !important;
		/* move to right */
		padding-right: 15px;
		/* adjust spacing from edge */

	}
}


/* Specific Fix for iPad Air / Portal / Mini Side-by-Side (768-1024) */
@media (min-width: 768px) and (max-width: 1024px) {
	.movie-detail-wrap {
		flex-direction: row !important;
		flex-wrap: nowrap;
		gap: 10px;
		margin-bottom: 0px !important;
	}

	.movie-detail-text-det {
		width: 66%;
		height: 370px;
	}

	.movie-star-cast-det {
		width: 38%;
		height: 370px;
		background: #111;
		padding: 15px;
		border: 1px solid #444;
		margin-top: 0px;
	}

	.star-cast-det {
		height: calc(100% - 60px);
		overflow: hidden;
		overflow-y: auto;
		width: 100%;
		display: block;
	}

	.star-cast-wrap {
		/* Override generic mobile flex-row style */
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		height: auto;
		gap: 8px;
	}

	.star-cast-names {
		/* width: 100%; */
		/* or 48% if you want 2-col */
		height: 76px;
	}
}

/* iPad Portrait Generic */
@media only screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {

	/* Ensure Episodes are below Synopsis, but before Where to Watch */
	.blog-syn-episode-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.blog-synopsis-box {
		display: contents;
	}

	.blog-synopsis-wrap-data {
		order: 1;
		width: 100% !important;
	}

	.blog-episode-box {
		order: 2;
		width: 100% !important;
		margin-left: 0;
	}

	.where-to-watch-wrap-data {
		order: 3;
		width: 100% !important;
	}

	.why-should-watch-wrap-data {
		order: 4;
		width: 100% !important;
	}

	.blog-episode-box {
		width: 100%;
		height: auto;
		max-height: none;
		/* Let scroll handle inner height */
	}

	.episode-scroll {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 15px;
		width: 100%;
		height: auto;
		max-height: 550px;
		/* Adjust for roughly 2 rows visible */
		overflow-y: auto;
		padding-right: 5px;
		/* space for scrollbar */
		justify-content: flex-start;
	}

	.episode-scroll>a {
		width: calc(33.33% - 10px);
		/* 3 items per row, accounting for gap */
		text-decoration: none;
		display: flex;
	}

	.episode-det {
		flex-direction: column;
		width: 100% !important;
		/* Override fixed widths */
		max-width: 100%;
		height: 100%;
		margin-bottom: 0;
		/* Gap handles spacing */
		padding: 10px;
	}

	.episode-img {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

	.episode-content {
		width: 100%;
		margin-top: 8px;
	}

	.movie-card {
		position: relative;
		display: block;
		width: 347px;
		height: 369px;
		border: 1px solid #444;
	}

	.movie-card img {
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: 0;
		object-fit: cover;
	}

	.movie-card .movie-content {
		position: absolute;
		bottom: 0;
		z-index: 2;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
		width: 100%;
		border: none;
	}

	.movie-card .movie-desc {
		font-size: 14px;
	}

	.movie-card .movie-tag {
		font-size: 12px;
	}

	/* .movie-card .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		display: inline;
		align-self: flex-start;
		text-align: left;
	} */

	.blog-movie-item {
		width: 340px;
		height: auto;
	}

	/* Updated Trending Movies to match Trending Shows layout (Column) */
	.movie-card-small {
		display: flex;
		/* flex-direction: row; */
		flex-direction: column;
		/* height: auto; */
		height: 385px;
		/* Match trending-show-item height */
		width: 100%;
		border: 1px solid #444;
		/* width: 358px; */
		/* align-items: stretch; */
		/* align-items: flex-start; */
		padding: 12px 11px;
		/* Match trending-show-item padding */
		gap: 12px;
	}

	.movie-card-small img {
		/* width: 160px; */
		width: 100%;
		/* height: auto; */
		height: 159px;
		/* Match trending-show-item image height */
		/* min-height: 100%; */
		min-height: 0;
		object-fit: cover;
		border-radius: 24px 24px 0 0;
	}

	.movie-card-small .movie-desc {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.movie-card-small.tags-wrapped .movie-desc {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	/* .movie-card-small .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		display: inline;
		align-self: flex-start;
		text-align: left;
	} */

	.movie-card-small .movie-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: auto;
		flex: 1;
	}

	.trending-show-item {
		display: flex;
		height: 385px;
		padding: 12px 11px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.blog-movie-list {
		gap: 10px;
		justify-content: center;
		row-gap: 20px;
		padding-bottom: 20px;
	}

	.movie-detail-wrap {
		flex-direction: column !important;
		align-items: center;
	}

	.movie-detail-text-det {
		display: flex;
		width: 100%;
		height: 404px;
		flex-direction: column;
		align-items: flex-start;
	}

	.movie-star-cast-det {
		width: 100%;
		/* match movie card width */
		padding: 15px;
		/* added padding */
		margin-top: 20px;
		/* add some spacing */
		height: auto;
		border: 1px solid #444;
		border-radius: 24px;
	}

	.star-cast-det {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #444 transparent;
	}

	.star-cast-wrap {
		display: inline-flex;
		flex-wrap: nowrap;
		flex-direction: row;
		height: 75px;
		gap: 10px;
	}

	.star-cast-names {
		width: 210px;
		height: 64px;
		border-radius: 16px;
		flex: 0 0 auto;
	}

}

/* Air / Pro 11 (820-1023) */
@media (min-width: 820px) and (max-width: 1023px) {

	/* .movie-card { width: 50%; } */
	.blog-trending-text-wrap {
		position: relative;
		width: 780px;
		height: 404px;
		border-radius: 24px;
		overflow: hidden;
		border: 1px solid #444;
		z-index: 2;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 10%, #000);
	}

	.movie-content {
		display: flex;
		/* gap: 12px; */
		overflow: hidden;
		border-radius: 0 0 12px 12px;
		/* border: 1px solid #444; */
		background: #111;
		padding: 6px;
	}

	.movie-content img {
		width: 360px;
		height: 204px;
		object-fit: cover;
		border-radius: 24px;
	}

	.movie-tags {
		padding: 6px;
		display: flex;
		/* flex-direction: column; */
		/* justify-content: space-around; */
		flex: 1;
	}

	.movies-row {
		display: flex;
		gap: 10px;
		justify-content: space-evenly;
	}

	.movie-card img {
		object-fit: cover;
	}

	/* .movie-card { width: auto; } */

	.trending-shows-list {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 30px;
	}

	.trending-show-item {
		flex: 0 0 358px;
	}

	.main-blog-content,
	.detail-main-blog-content {
		padding: 100px 20px 22px 20px;
	}

	.blog-week-trending-list,
	.blog-trending-left,
	.blog-trending-right {
		padding-bottom: 20px;
	}

	.blog-trending-month-item {
		/* width: 1360px; */
		height: 404px;
		position: relative;
		margin: 0 auto;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.detail-main-blog-content {
		padding: 1px 22px 20px 22px;
	}

	.movie-detail-overlay {
		/* width: 825px; 
		height: 230px; */
		display: flex;
		gap: 2px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20px;
		/* background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); */
		border-radius: 0 0 24px 24px;
	}

	/* Fix for iPad Air Vertical Layout & Border */
	.movie-detail-wrap {
		flex-direction: column !important;
		align-items: center;
	}

	.movie-star-cast-det {
		width: 100%;
		height: auto;
		border: 1px solid #444;
		border-radius: 24px;
		padding: 15px;
		margin-bottom: 28px;
		margin-top: 20px;
		background: none;
	}

	.movie-detail-text-det {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		height: 404px;
	}

	/* Ensure scrolling works if not inherited */
	.star-cast-det {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #444 transparent;
	}

	.star-cast-wrap {
		display: inline-flex;
		flex-wrap: nowrap;
		flex-direction: row;
		height: 75px;
		gap: 10px;
	}

	.star-cast-names {
		width: 210px;
		height: 64px;
		border-radius: 16px;
		flex: 0 0 auto;
	}

	.banner-blog-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 26px;
		font-style: normal;
		font-weight: 900;
		line-height: normal;
		margin: 0 0 10px;
	}

	.movie-detail-desc {
		color: #FFF;
		font-size: 18px;
		font-style: normal;
		line-height: normal;
	}

	.blog-tag {
		display: flex;
		height: 32px;
		padding: 6px 12px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 12px;
		border: 1px solid #444;
		background: rgba(0, 0, 0, 0.24);
		font-size: 12px;
		font-family: "Mulish";
		font-weight: 700;
		color: #fff;
	}
}

@media only screen and (min-width: 820px) and (max-width: 1023px) and (orientation: landscape) {
	.movie-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 24px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0 0 10px;
	}

	.movie-desc {
		font-family: "Mulish";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.read-more-btn {
		display: inline-block;
		width: 107px;
		height: 44px;
		border-radius: 12px;
		background: #444;
		padding: 12px;
		font-size: 14px;
		font-family: "Mulish";
		font-weight: 700;
	}

	.blog-week-trending-list {
		display: flex;
		flex-direction: row !important;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.blog-movie-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		padding: 6px;
		row-gap: 20px;
		padding-bottom: 20px;
	}

	.blog-trending-left {
		width: 669px;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.blog-trending-right {
		width: auto;
	}

	/* First Card Style */
	.blog-trending-text-wrap {
		width: 669px;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	/* Scale Movie Cards in Trending Right to fit 2-up */
	.blog-trending-right .movies-row {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}

	/* Second and Third Card Style */
	.blog-trending-right .movie-card {
		width: calc(50% - 10px);
		height: 369px;
		border-radius: 24px;
		border: 1px solid #444;
		/* background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%); removed bg on container, moved to overlay */
		background: #000;
		flex: none;
		position: relative;
		overflow: hidden;
	}

	.blog-trending-right .movie-card img {
		width: 100%;
		height: 100%;
		object-fit: fill;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.blog-trending-right .movie-card .movie-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		background: transparent;
		padding-bottom: 20px;
		border: none;
	}

	/* Gradient Overlay */
	.blog-trending-right .movie-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%);
		border-radius: inherit;
	}

	/* Trending Movies Row: 2 items per row */
	.blog-movie-item {
		width: 578px;
	}

	/* .week-movies-trending-blog .movie-read-more-btn,
	.trending-show-item .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		text-align: left;
	} */

	/* Trending Shows: horizontal scroll row */
	.trending-shows-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 12px;
		justify-content: flex-start;
	}

	.trending-show-item {
		width: 282px;
		flex: none;
		height: auto;
	}

	.trending-show-item img {
		height: 159px;
		width: 100%;
		aspect-ratio: 94/53;
		border-radius: 24px 24px 0 0;
		object-fit: cover;
		background: lightgray 50% / cover no-repeat;
	}

	/* 2. Detail Page: Mini Desktop Row */
	/* 2. Detail Page: Mini Desktop Row */
	.movie-detail-wrap {
		flex-direction: column !important;
		align-items: center;
		padding-top: 20px;
		gap: 20px;
	}

	.movie-detail-text-det {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 713px;
		height: 404px;
		min-height: 0;
	}

	.movie-star-cast-det {
		width: 713px;
		height: auto;
		border: 1px solid #444;
		border-radius: 24px;
		padding: 15px;
		background: none;
		margin-top: 20px;
	}

	.star-cast-det {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #444 transparent;
	}

	.star-cast-wrap {
		display: inline-flex;
		flex-wrap: nowrap;
		flex-direction: row;
		height: 75px;
		gap: 10px;
	}

	.star-cast-names {
		width: 210px;
		height: 64px;
		border-radius: 16px;
		flex: 0 0 auto;
	}

	/* 3. Synopsis & Episodes: Mini Desktop Row (Side-by-Side) */
	/* 3. Synopsis & Episodes: Vertical Stack for iPad Air */
	/* 3. Synopsis & Episodes: Vertical Stack for iPad Air */
	.blog-syn-episode-wrap {
		/* flex-direction: column;  Already column from previous edit, but ensure it */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Aligns tops of Synopsis and Episodes */
		gap: 20px;
	}

	.blog-synopsis-box {
		/* width: 713px; */
		/* margin-right: 0; */
		display: contents;
		/* Unwrap to allow reordering children */
	}

	.blog-synopsis-wrap-data {
		order: 1;
		width: 100% !important;
	}

	.blog-episode-box {
		/* width: 713px; */
		margin-left: 0;
		order: 2;
		width: 100% !important;
	}

	.where-to-watch-wrap-data {
		order: 3;
		width: 100% !important;
	}

	.why-should-watch-wrap-data {
		order: 4;
		width: 100% !important;
	}

	/* Movie Details Independent Sections */
	.blog-synopsis-wrap,
	.blog-where-to-watch-wrap,
	.blog-why-should-watch-wrap {
		width: 100% !important;
		margin: 0 auto !important;
		/* Center them */
	}

	/* Ensure inner data covers full width of parent 713px box */
	.blog-synopsis-wrap-data,
	.where-to-watch-wrap-data,
	.why-should-watch-wrap-data {
		width: 100% !important;
	}

	/* Prevent Episode Scroll fixed width from breaking layout */
	.episode-scroll {
		width: 100% !important;
		max-height: 550px;
		overflow-y: auto;
	}

	/* Ensure internal wrappers scale */

	.blog-trending-month-item {
		width: 100%;
		height: auto;
	}

	.blog-synopsis-wrap-data,
	.where-to-watch-wrap-data,
	.why-should-watch-wrap-data {
		width: 100%;
	}
}

/* Max 820 Generic */
@media (max-width: 820px) {
	.trending-show-item {
		display: flex;
		padding: 12px;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		gap: 12px;
		height: auto;
		margin-bottom: 24px;
	}

	/* .trending-show-item .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: none;
		width: auto;
		height: auto;
		padding: 0;
		align-self: flex-start;
	} */

	.trending-shows-list {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 10px;
	}
}

/* Mini (768-819) */
@media (min-width: 768px) and (max-width: 819px) {

	/* .movie-card { width: 100%; } */
	.blog-trending-text-wrap {
		position: relative;
		width: 726px;
		height: 404px;
		border-radius: 24px;
		overflow: hidden;
		border: 1px solid #444;
		z-index: 2;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 10%, #000);
	}

	.movie-content {
		display: flex;
		/* gap: 12px; */
		overflow: hidden;
		border-radius: 0 0 12px 12px;
		/* border: 1px solid #444; */
		background: #111;
		padding: 6px;

	}

	.movie-content img {
		width: 360px;
		height: 204px;
		object-fit: cover;
		border-radius: 24px;
	}

	.movie-tags {
		padding: 6px;
		display: flex;
		/* flex-direction: column; */
		/* justify-content: space-around; */
		flex: 1;
	}

	.movies-row {
		display: flex;
		gap: 22px;
		justify-content: space-evenly;
	}

	.movie-card img {
		object-fit: cover;
	}

	/* .movie-card { width: auto; } */

	.trending-shows-list {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 10px;
	}

	/* .main-blog-content{
	padding: 120px 50px;
	} */

	.blog-movie-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		padding: -5px;
		row-gap: 30px;
		padding-bottom: 40px;
	}

	.blog-week-trending-list,
	.blog-trending-left,
	.blog-trending-right {
		padding-bottom: 20px;
	}

	.blog-trending-month-item {
		/* width: 1360px; */
		height: 404px;
		position: relative;
		margin: 0 auto;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.main-blog-content {
		padding: 95px 22px 20px 22px;
	}

	.detail-main-blog-content {
		padding: 1px 22px 20px 22px;
	}

	.movie-detail-overlay {
		/* width: 825px; 
		height: 230px; */
		display: flex;
		gap: 2px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20px;
		/* background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); */
		border-radius: 0 0 24px 24px;
	}

	.movie-detail-wrap {
		flex-direction: column !important;
		align-items: center;
	}

	.movie-detail-text-det {
		display: flex;
		width: 713px;
		height: 404px;
		flex-direction: column;
		align-items: flex-start;
	}

	.movie-star-cast-det {
		width: 713px;
		padding: 15px;
		margin-top: 20px;
		margin-bottom: 28px;
		height: auto;
		border: 1px solid #444;
		border-radius: 24px;
		background: none;
	}

	.star-cast-det {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #444 transparent;
	}

	.star-cast-wrap {
		display: inline-flex;
		flex-wrap: nowrap;
		flex-direction: row;
		height: 75px;
		gap: 10px;
	}

	.star-cast-names {
		width: 210px;
		height: 64px;
		border-radius: 16px;
		flex: 0 0 auto;
	}

	.movie-detail-text-det img {
		object-fit: fill;
		width: 100%;
		height: 100%;
		border-radius: 24px;
	}

	.banner-blog-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 26px;
		font-style: normal;
		font-weight: 900;
		line-height: normal;
		margin: 0 0 10px;
	}

	.movie-detail-desc {
		color: #FFF;
		font-size: 18px;
		font-style: normal;
		line-height: normal;
	}

	.blog-tag {
		display: flex;
		height: 32px;
		padding: 6px 12px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 12px;
		border: 1px solid #444;
		background: rgba(0, 0, 0, 0.24);
		font-size: 12px;
		font-family: "Mulish";
		font-weight: 700;
		color: #fff;
	}




	/* Reorder Episode List for iPad Mini */
	.blog-syn-episode-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.blog-synopsis-box {
		display: contents;
	}

	.blog-synopsis-wrap-data {
		order: 1;
		width: 100% !important;
	}

	.blog-episode-box {
		order: 2;
		width: 100% !important;
		margin-left: 0;
	}

	.where-to-watch-wrap-data {
		order: 3;
		width: 100% !important;
	}

	.why-should-watch-wrap-data {
		order: 4;
		width: 100% !important;
	}

}

@media only screen and (min-width: 768px) and (max-width: 819px) and (orientation: landscape) {

	.movie-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 24px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0 0 10px;
	}

	.movie-desc {
		font-family: "Mulish";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.blog-movie-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 6px;
		row-gap: 20px;
		padding-bottom: 20px;
	}

	.read-more-btn {
		display: inline-block;
		width: 107px;
		height: 44px;
		border-radius: 12px;
		background: #444;
		padding: 12px;
		font-size: 14px;
		font-family: "Mulish";
		font-weight: 700;
	}

	.blog-week-trending-list {
		display: flex;
		flex-direction: row !important;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.blog-trending-left {
		width: 669px;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	.blog-trending-right {
		width: auto;
	}

	/* First Card Style */
	.blog-trending-text-wrap {
		width: 669px;
		height: 368.989px;
		border-radius: 24px;
		border: 1px solid #444;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, #000 100%);
	}

	/* Scale Movie Cards in Trending Right to fit 2-up */
	.blog-trending-right .movies-row {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}

	/* Second and Third Card Style */
	.blog-trending-right .movie-card {
		width: calc(50% - 10px);
		height: 369px;
		border-radius: 24px;
		border: 1px solid #444;
		/* background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%); removed bg on container, moved to overlay */
		background: #000;
		flex: none;
		position: relative;
		overflow: hidden;
	}

	.blog-trending-right .movie-card img {
		width: 100%;
		height: 100%;
		object-fit: fill;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.blog-trending-right .movie-card .movie-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		background: transparent;
		padding-bottom: 20px;
		border: none;
	}

	/* Gradient Overlay */
	.blog-trending-right .movie-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.23%, #000 90%);
		border-radius: inherit;
	}

	/* Trending Movies Row: 2 items per row */
	.blog-movie-item {
		width: calc(48% - 10px);
	}

	/* .week-movies-trending-blog .movie-read-more-btn,
	.trending-show-item .movie-read-more-btn {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		background: transparent;
		padding: 0;
		width: auto;
		text-align: left;
	} */

	/* Trending Shows: horizontal scroll row */
	.trending-shows-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 12px;
		justify-content: flex-start;
	}

	.trending-show-item {
		width: 282px;
		flex: none;
		height: auto;
	}

	.trending-show-item img {
		height: 159px;
		width: 100%;
		aspect-ratio: 94/53;
		border-radius: 24px 24px 0 0;
		object-fit: cover;
		background: lightgray 50% / cover no-repeat;
	}

	/* 2. Detail Page: Mini Desktop Row */
	.movie-detail-wrap {
		flex-direction: row;
		align-items: flex-start;
		padding-top: 100px;
		gap: 20px;
	}

	.movie-detail-text-det {
		width: 65%;
		height: auto;
		min-height: 480px;
	}

	.movie-star-cast-det {
		width: 32%;
		height: auto;
		border: 1px solid #444;
		padding: 15px;
	}

	/* 3. Synopsis & Episodes: Mini Desktop Row (Side-by-Side) */
	.blog-syn-episode-wrap {
		flex-direction: row;
		align-items: flex-start;
		/* Aligns tops of Synopsis and Episodes */
		gap: 20px;
	}

	.blog-synopsis-box {
		width: 65%;
		margin-right: 0;
	}

	.blog-episode-box {
		width: 32%;
		margin-left: auto;
	}

	/* Prevent Episode Scroll fixed width from breaking layout */
	.episode-scroll {
		width: 100% !important;
		max-height: 550px;
		overflow-y: auto;
	}

	/* Ensure internal wrappers scale */

	.blog-trending-month-item {
		width: 100%;
		height: auto;
	}

	.blog-synopsis-wrap-data,
	.where-to-watch-wrap-data,
	.why-should-watch-wrap-data {
		width: 100%;
	}

}

/* Max 440 Generic */
@media (max-width: 440px) {
	.main-blog-content {
		padding: 60px 20px;
	}

	.movie-tag {
		/* font-size: 10px; */
		color: #FFF;
		font-family: Mulish;
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		padding: 6px 4px;
	}

	.detail-main-blog-content {
		padding: 0px 20px;
	}

	.blog_shem_logo {
		width: 100%;
		background: linear-gradient(180deg, #0F0F0F 21.5%, rgba(15, 15, 15, 0.80) 59.35%, rgba(15, 15, 15, 0.00) 97.2%);

	}

	.detail_blog_shem_logo {
		width: auto;
		justify-content: flex-end !important;
		/* move to right */
		padding-right: 0px;
		/* adjust spacing from edge */
		position: static;
		transform: none;
		padding: 0;
		pointer-events: auto;
	}

	.detail-main-blog-content .banner-blog-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 24px;
		font-style: normal;
		font-weight: 900;
		line-height: normal;
	}

	.detail-main-blog-content .movie-title {
		color: #FFF;
		font-family: "Mulish";
		font-size: 26px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.shema_logo {
		width: 99px;
		height: 66px;
	}

	.blog-week-trending-list {
		flex-direction: column;
	}

	.blog-title {
		width: 100%;
		font-size: 20px;
	}

	.blog-trending-text-wrap {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.blog-trending-text-wrap img {
		height: auto;
		aspect-ratio: 16/9;
	}

	.movie-overlay {
		width: 100%;
		padding: 12px;
		position: static;
		height: auto;
	}

	.movie-title {
		font-size: 20px;
	}

	.blog-tag {
		color: #999;
		font-family: Mulish;
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		display: flex;
		padding: 4px 8px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 8px;
		border: 1px solid #444;
		background: rgba(0, 0, 0, 0.24);
	}

	.movie-desc {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.movie-card {
		width: 100%;
		position: relative;
		height: auto;
		display: flex;
		flex-direction: column;
		background: #111;
		border: 1px solid #444;
		border-radius: 24px;
		margin-bottom: 20px;
	}

	.movie-card img {
		width: 100%;
		height: 200px;
		position: static;
		object-fit: cover;
		z-index: 0;
		border-radius: 24px 24px 0 0;
	}

	.movie-tags {
		justify-content: flex-start;
	}

	.movie-content {
		position: static;
		width: 100%;
		z-index: 1;
		background: none;
		justify-content: flex-start;
		padding: 15px;
	}


	.read-more-btn {
		width: 101px;
		height: 30px;
		background: #D41F52;
		/* font-size: 15px; */
		padding: 6px 12px;
		color: #FFF;
		font-family: Mulish;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 8px;
		;
	}

	.movies-row {
		flex-direction: column;
	}

	.blog-movie-item {
		width: 100%;
		height: auto;
	}

	.movie-card-small img {
		width: 100%;
		height: 168px;
	}

	.movie-card-small {
		flex-direction: column;
		height: auto;
		border: none;
		background: none;
	}

	.blog-trending-month-item {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.blog-trending-month-item img {
		height: auto;
		aspect-ratio: 16/9;
	}

	.banner-movie-overlay {
		width: 100%;
		padding: 12px;
		position: static;
		height: auto;
	}

	.banner-blog-title {
		font-size: 22px;
	}

	.blog-banner-tag {
		padding: 6px 8px;
		font-size: 12px;

	}

	.blog-banner-desc {
		font-size: 16px;
	}

	/* Trending Shows – horizontal scroll on this breakpoint */
	.trending-shows-list {
		width: auto;
		flex-direction: row;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		padding-bottom: 8px;
	}

	.trending-shows-list::-webkit-scrollbar {
		display: none;
	}

	.blog-movie-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* gap: 10px; */
		/* padding: 6px; */
		row-gap: 10px;
		/* padding-bottom: 20px; */
	}

	.blog-trending-text-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* border-radius: 24px; */
		z-index: 1;
	}

	.blog-header-wrap {
		width: 100%;
		gap: 80px;
		padding: 0 30px;
		background: linear-gradient(180deg, #0F0F0F 21.5%, rgba(15, 15, 15, 0.80) 59.35%, rgba(15, 15, 15, 0.00) 97.2%);
	}

	.movie-detail-wrap {
		flex-direction: column;
		align-items: center;
	}

	.movie-star-cast-det {
		padding: 0px;
		align-self: self-start;
	}

	.movie-detail-text-det {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 6px;
		justify-content: center;
		align-items: flex-start;
		gap: 20px;
		height: auto;
	}

	.movie-detail-wrap {
		padding-top: 90px;
	}

	.movie-det-wrap {
		width: 100%;
	}

	.banner-blog-title {
		font-size: 18px;
	}

	.movie-detail-overlay {
		width: 100%;
		flex-direction: column;
		padding: 8px;
		height: auto;
		position: static;
	}

	.movie-detail-desc {
		font-size: 16px;
	}

	.blog-tag {
		padding: 4px 8px;
	}

	.movie-detail-text-det img {
		width: 100%;
		height: 179px;
		aspect-ratio: 318/179;
		border-radius: 24px;
		background: url(<path-to-image>) lightgray 50% / cover no-repeat;
	}

	.watch-now-wrap {
		width: 100%;
		height: 48px;
		font-size: 18px;
	}

	.blog-play-pause-btn {
		height: 24px;
		width: 24px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 8.96533C9.5 8.48805 9.5 8.24941 9.59974 8.11618C9.68666 8.00007 9.81971 7.92744 9.96438 7.9171C10.1304 7.90525 10.3311 8.03429 10.7326 8.29239L15.4532 11.3271C15.8016 11.551 15.9758 11.663 16.0359 11.8054C16.0885 11.9298 16.0885 12.0702 16.0359 12.1946C15.9758 12.337 15.8016 12.449 15.4532 12.6729L10.7326 15.7076C10.3311 15.9657 10.1304 16.0948 9.96438 16.0829C9.81971 16.0726 9.68666 15.9999 9.59974 15.8838C9.5 15.7506 9.5 15.512 9.5 15.0347V8.96533Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/*.movie-star-cast-det {
		width: 100%;
		background: none;
		border: none;
		height: 110px;
		padding: inherit;
	}
	.star-cast-det {
		width: 100%;
	    overflow-x: auto;
	}
	.star-cast-wrap {
		display: inline-flex;
		flex-wrap: nowrap;
		flex-direction: row;;
		height: 75px;
	}
	.star-cast-names {
		width: 210px;
		height: 64px;
		border-radius: 16px;
	}
	.blog-synopsis-wrap, .blog-where-to-watch-wrap, .blog-why-should-watch-wrap, .blog-trailer-wrap, .trailer-video, .blog-synopsis-wrap-data, .where-to-watch-wrap-data, .why-should-watch-wrap-data, .blog-episode-box, .episode-det {
		width: 100%;
	}*/
	.blog-trailer-wrap {
		height: 242px;
	}

	.trailer-video {
		height: 175px;
	}

	.blog-syn-episode-wrap {
		flex-direction: column;
	}

	.blog-synopsis-box {
		display: contents;
	}

	.blog-synopsis-wrap-data {
		order: 1;
	}

	.blog-episode-box {
		order: 2;
		height: auto;
		width: 100%;
		border-radius: 20px;
		border: 1px solid #444;
		background: #111;
		padding: 10px;
		overflow: hidden;
	}

	.episode-scroll {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.where-to-watch-wrap-data {
		order: 3;
	}

	.why-should-watch-wrap-data {
		order: 4;
	}

	.episode-det {
		flex-direction: column;
		height: auto;
		padding: 10px;
		width: 290px;
		gap: 10px;
	}

	.episode-img {
		width: 272px;
		height: 173px;
		object-fit: cover;
	}

	.episode-content {
		width: 100%;
	}

	.episode-title {
		font-size: 18px;
	}

	.episode-desc {
		font-size: 14px;
		-webkit-line-clamp: 2;
		max-height: 2.4em;
		width: 100%;
	}

	.back-button-blog {
		padding: 8px;
		width: 36px;
		height: 36px;
		border-radius: 51px;
		border: 1px solid #444;
		background: #222;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
	}

	.back-btn-icon {
		width: 48.374px;
		height: 48.374px;
		aspect-ratio: 1/1;
		stroke-width: 3px;
		stroke: #FFF;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11 17' fill='none'%3E%3Cpath d='M8.5 14.5L2.5 8.5L8.5 2.5' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.back-btn-text {
		color: #FFF;
		font-family: "Mulish";
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	/* Trending Shows – horizontal scroll on mobile */
	.trending-shows-list {
		width: auto;
		flex-direction: row;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		padding-bottom: 8px;
		gap: 10px;
	}

	.trending-shows-list::-webkit-scrollbar {
		display: none;
	}

	.trending-show-item {
		flex: 0 0 340px;
		width: 260px;
		height: auto;
		min-height: unset;
	}

	.trending-show-item img {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
		object-fit: cover;
		border-radius: 24px 24px 0 0;
		background: url(<path-to-image>) lightgray 50% / cover no-repeat;

	}

	.det-desc-first {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.det-desc-second {
		color: #FFF;
		font-family: Mulish;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.recommendations h3 {
		color: #FFF;
		font-family: Mulish;
		font-size: 20px;
	}
}

/* iPad Mini Horizontal / Standard iPad Landscape Fix */
@media only screen and (min-width: 1024px) and (max-width: 1024px) {

	.blog-synopsis-wrap,
	.blog-where-to-watch-wrap,
	.blog-why-should-watch-wrap {
		width: 975px !important;
		margin: auto;
		border-radius: 20px;
		border: 1px solid #444;
		background: #111;
		padding: 14px 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		position: relative;
	}
}

@media (min-width: 768px) {
	.episode-det {
		align-items: stretch;
	}

	.episode-img {
		height: auto;
		object-fit: cover;
		aspect-ratio: unset;
	}
}