/* Background */

#homepage {
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 29%,
		rgba(29, 29, 29, 1) 76%
	);
}

/* Fonts */
body {
	font-family: IBM Plex Sans, sans-serif;
}

/* Header Buttons*/
:root {
	--primary_button_color: transparent
		linear-gradient(90deg, #410374 0%, #7716bc 100%) 0% 0% no-repeat
		padding-box;
	--primary_button_hover_color: transparent
		linear-gradient(90deg, #7719bc 0%, #410b74 100%) 0% 0% no-repeat
		padding-box;
	--primary_button_text_color: #fff;
	--header_subscribe_btn_border: #bf9e448f;
}

.headBtn {
	color: var(--primary_button_text_color);
	background: var(--primary_button_color);
	font-size: 0.875rem;
	padding: 13.5px 26px;
	border-radius: 5px;
	border: 0px solid var(--header_subscribe_btn_border);
	text-transform: capitalize;
	transition: 0.3s ease-in-out;
	line-height: 1;
}

.headBtn:hover {
	background: var(--primary_button_hover_color) !important;
}

/* Shining button */

.btn-editors-pick {
	background: var(--primary_button_color) !important;
	border: 1px solid #7719bc !important;
	color: white;
}

.btn.btn-editors-pick.primary {
	padding: 6px 10px;
	background-color: blueviolet;
	color: white;
	border-radius: 3px;
	cursor: pointer;
}
.btn.btn-editors-pick {
	display: inline-block;
	position: relative;
	overflow: hidden;
}

.btn.btn-editors-pick:after,
.btn.playResumeBtn:after {
	content: "";
	position: absolute;
	top: -100%;
	left: -200%;
	width: 30%;
	height: 400%;
	opacity: 0;
	transform: rotate(30deg);
	background: rgba(255, 255, 255, 0.13);
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.75) 50%,
		rgba(255, 255, 255, 0.1) 100%
	);
	animation: shine 5s 1s infinite;
}

@keyframes shine {
	to {
		opacity: 1;
		left: 200%;
	}
}

/* Header Navigation Links */
.topNav ul li a {
	padding: 0 8px;
	color: var(--vod-white-color);
	font-size: 16px;
	font-weight: 500;
	transition: all 300ms ease-in;
}
.topNav ul li a:hover {
	color: #6a279b !important;
}

.topNav ul li a.active {
	color: #b3b3b3 !important;
}
.topNav ul li a.active {
	font-size: 16px;
	font-weight: 500;
}

/* Pop up Modal  */
.btn.playResumeBtn {
	background: var(--primary_button_color) !important;
	position: relative;
	overflow: hidden;
	border: 1px solid #7719bc !important;
	color: white;
}

/* Hover Card */
.boxBtn.playBtn2 {
	background: var(--primary_button_color) !important;
	border: 1px solid #6911a9 !important;
}

.boxBtn.playBtn2:hover {
	background: var(--primary_button_hover_color) !important;
	border: 1px solid #6911a9 !important;
}
.boxBtn.playBtn2 i {
	color: white !important;
}
.boxBtn i {
	font-size: 20px;
	line-height: 8px;
}
.boxBtn i.plusIcon {
	font-size: 24px;
}
.boxBtn i.more {
	font-size: 24px;
	margin-top: 1px;
}
.boxBtn:hover,
.boxBtn:active {
	border: 1px solid var;
}

.slideTitle {
    font-size: 40px !important;
}

/* Description Animation */

.text_description {
  overflow: hidden;
  max-height: auto; 
  opacity: 1; 
  animation-name: collapseAndFade;
  animation-duration: 1s; /* Duration of the animation */
  animation-timing-function: ease; 
  animation-fill-mode: forwards; /* Maintain the final state of the animation */
  animation-iteration-count: 1; /* Ensure the animation does not loop */
  animation-delay: 5s; /* Delay the animation by 5 seconds */
}

/* Define the keyframes for the animation */
@keyframes collapseAndFade {
  from {
    max-height: 100vh; /* Large enough to cover any height */
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

/* Footer CSS */
.footerHolder .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
}

.clearfix.socialIocnsHolder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}

.footer .container .row {
	display: block !important;
}

/* Splash Page Styles*/