@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');

/* * {
	--primary:#53dbc9;
	// --primary:#5F9EA0;
	--on-primary:#003731;
	--primary-container:#005048;
	--on-primary-container:#74f8e5;
	--secondary:#b1ccc6;
	--on-secondary:#1c3531;
	--secondary-container:#334b47;
	--on-secondary-container:#cce8e2;
	--tertiary:#53dbc9;
	--on-tertiary:#153349;
	--tertiary-container:#2d4961;
	--on-tertiary-container:#cce5ff;
	--error:#ffb4ab;
	--on-error:#690005;
	--error-container:#93000a;
	--on-error-container:#ffb4ab;
	--background:#191c1b;
	--on-background:#e0e3e1;
	--surface:#101413;
	--on-surface:#e0e3e1;
	--surface-variant:#3f4947;
	--on-surface-variant:#bec9c6;
	--outline:#899390;
	--outline-variant:#3f4947;
	--shadow:#000000;
	--scrim:#000000;
	--inverse-surface:#e0e3e1;
	--inverse-on-surface:#2d3130;
	--inverse-primary:#006a60;
	--surface-dim:#101413;
	--surface-bright:#363a39;
	--surface-container-lowest:#0b0f0e;
	--surface-container-low:#191c1b;
	--surface-container:#1d201f;
	--surface-container-high:#272b2a;
	--surface-container-highest:#323534;
} */
* {
--primary:#53dbc9;
--on-primary:#003731;
--primary-container:#005048;
--on-primary-container:#74f8e5;
--secondary:#b1ccc6;
--on-secondary:#1c3531;
--secondary-container:#334b47;
--on-secondary-container:#cce8e2;
--tertiary:#adcae6;
--on-tertiary:#153349;
--tertiary-container:#2d4961;
--on-tertiary-container:#cce5ff;
--error:#ffb4ab;
--on-error:#690005;
--error-container:#93000a;
--on-error-container:#ffb4ab;
--background:#191c1b;
--on-background:#e0e3e1;
--surface:#101413;
--on-surface:#e0e3e1;
--surface-variant:#3f4947;
--on-surface-variant:#bec9c6;
--outline:#899390;
--outline-variant:#3f4947;
--shadow:#000000;
--scrim:#000000;
/* --inverse-surface:#e0e3e1; */
--inverse-surface:#101413;
--inverse-on-surface:#2d3130;
--inverse-primary:#006a60;
--surface-dim:#101413;
--surface-bright:#363a39;
--surface-container-lowest:#0b0f0e;
--surface-container-low:#191c1b;
--surface-container:#1d201f;
--surface-container-high:#272b2a;
--surface-container-highest:#323534;
--hidden-opacity: 0;
}

body {
	background-color: #101413 !important;
	color: #e0e3e1 !important;
}

#icon_logo {
	font-size: 35px !important;
	width: 35px !important;
	height: 40px !important;
	margin-top: -8px;
	display: inline-block;
}
#logo {
	font-weight: 900 !important;
	font-family: "Montserrat", "Noto Nastaliq Urdu", sans-serif !important;
	text-align: center;
}
* {
	/* font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Nastaliq Urdu", Arial, sans-serif;*/
	font-family: "Montserrat", "Noto Nastaliq Urdu", sans-serif;
}

.urdu-line-height {
	line-height: 1.8;
	margin-top: 3px;
	margin-bottom: 2px;
}

#menu_btn {
	display: none;
}
#menu_btn_2 {
	display: none;
	margin-top: 20px;
	margin-left: 3px;
}

@media only screen and (max-width: 500px) {
  #navbar {
  	position: fixed;
  	width: 100px;
  	left: -100%;
  	transition: all 0.3s;
  }
  #navbar::after {
  	content: "";
  	background-color: rgba(0, 0, 0, 0.5);
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	left: 200%;
  	transition: all 0.3s;
  }
  #navbar.toggled {
  	left: 0;
  }
  #navbar.toggled::after {
  	left: 100px;
  }
  #menu_btn {
	display: inline-block;
  }
  #menu_btn_2 {
	display: inline-block;
  }
}

#hero {
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 25px;
	padding-right: 25px;
	position: relative;
	overflow: hidden;
}
#hero > div:nth-of-type(1) {
	position: absolute;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	top: -10px;
	left: -10px;
	filter: blur(4px) brightness(50%) grayscale(30%);
	opacity: 1;
	background-size: cover;
	background-position: center;
}
#posts {
	position: absolute;
	width: 30%;
	height: 200%;
	top: -50%;
	right: 5%;
	background-size: cover;
	background-position: center;
	transform: rotate(25deg);
}
#hero > p:not(.no):nth-of-type(2) {
	width: 60%;
	display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (max-width: 1100px) {
  #posts {
    display: none;
  }
  #hero > p:not(.no):nth-of-type(2) {
		width: 100%;
  }
}

.grid_custom {
	width: 100%;
}
.movie_poster {
	width: calc(25% - 40px);
	height: calc(34vw - 60px);
	display: inline-block;
	background-size: cover;
	background-position: center;
	margin-right: 2px;
	margin-left: 2px;
	vertical-align: bottom;
	position: relative;
	border-radius: 5px;
	/* margin-top: 40px; */
	border: 1px solid #014d4e !important;
	cursor: pointer;
	overflow: hidden;
}
.movie_poster > i.fill {
	position: absolute;
	bottom: -100%;
	left: 50%;
	transform: translate(-50%, 0%);
	transition: all 0.3s;
	font-size: 50px;
}
.movie_poster:hover > i.fill {
	position: absolute;
	bottom: calc(50% - 25px);
	left: 50%;
	transform: translate(-50%, -50%);
}
.movie_poster > .tag {
	background-color: var(--on-primary);
	color: var(--primary);
	display: inline-block;
	padding: 10px;
	width: 50px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 9px;
	text-align: center;
	font-weight: 900;
	position: absolute;
	top: -16px;
	right: 0;
	border-radius: 0 4px 0 4px;
}
.movie_poster:hover > .bottom-shadow {
	width: 100%;
	height: 200%;
}
@media only screen and (min-width: 1200px) {
  .movie_poster {
    width: calc(20% - 40px);
	height: calc(28vw - 60px);
  }
}
@media only screen and (max-width: 700px) {
  .movie_poster {
    width: calc(33.33% - 40px);
	height: calc(40vw - 60px);
  }
}
@media only screen and (max-width: 580px) {
  .movie_poster {
    width: calc(50% - 40px);
		height: calc(60vw - 60px);
  }
}
.movie_poster > p:nth-of-type(3) {
	position: absolute;
	bottom: -8px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	border-radius: 0 0 4px 4px;
	left: 0;
	background-color: black;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
	transition: all 0.3s;
}
.movie_poster > p:nth-of-type(2) {
	position: absolute;
	bottom: 17.5px;
	width: 100%;
	height: 20%;
	color: transparent;
	border-radius: 0;
	left: 0;
	transition: all 0.3s;
}
.movie_poster > .bef {
	position: absolute;
	display: none;
	font-family: "Montserrat", sans-serif;
	top: -35px;
	font-size: 11px;
	text-align: center;
	width: 100%;
	left: 0;
}
.movie_poster > .bg {
	position: absolute;
	width: 100%;
	height: calc(100% + 30px);
	top: 100%;
	left: 0;
	background-size: cover;
	background-position: center;
	transition: all 0.3s;
	filter: blur(3px) sepia(50%) brightness(100%);
}
.movie_poster:hover > .bg {
	top: -30px;
}
.movie_poster > a {
	position: absolute;
	width: 300%;
	height: 300%;
	top: -50%;
	left: -50%;
}

a.btn {
	display: inline-block;
}

.grid_movie_info {
	width: 100%;
	max-width: 500px;
	display: inline-grid;
}
.grid_movie_info .primary {
	background-color: rgba(0, 55, 49, 0.7) !important;
	color: var(--primary) !important;
	backdrop-filter: blur(3px);
}
.grid_movie_info .secondary {
	background-color: rgba(21, 52, 74, 0.7) !important;
	color: var(--secondary) !important;
	backdrop-filter: blur(3px);
}
.grid_movie_info .tertiary-text, .grid_movie_info .secondary-text {
	backdrop-filter: blur(3px) brightness(50%); !important;
}
#hero.no > div:nth-of-type(1) {
	filter: blur(5px) brightness(60%);
}
#hero.no h6 {
	font-weight: 900;
	color: lightgrey;
	font-style: italic;
}
#hero.no h5 > img {
	width: 100%;
	height: auto;
	max-width: 300px;
}

.genre_popup {
	display: inline-block;
	width: calc(100% - 550px);
	margin-left: 25px;
	height: 100px;
	vertical-align: bottom;
	line-height: 50px;
}

.genre_popup > div {
	display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media only screen and (max-width: 1000px) {
	.genre_popup {
		display: block;
		width: 100%;
		margin: 0;
		margin-top: 30px;
		height: auto;
		line-height: 25px;
		font-size: 15px;
	}
	.grid_movie_info {
		max-width: 100%;
	}
}

#vote_score {
	width: 125px;
	height: 125px;
	background-color: transparent;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

#inner-circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: black;
}
#half_1 {
	position: absolute;
	width: 100px;
	/* height: calc(15px + 30%); */
	height: 0%;
	border-radius: 0;
	background-color: var(--primary);
	left: 50%;
	top: 0;
	transition: all 0.3s;
}

#half_2 {
	position: absolute;
	width: 100px;
	height: calc(15px + 0%);
	border-radius: 0;
	background-color: var(--primary);
	right: 50%;
	bottom: -15px;
	transition: all 0.3s;
}

.yt-video {
	width: 223px;
	height: 136px;
	position: relative;
	border: 1px solid #4a4a4a;
	border-radius: 5px;
	background-size: cover;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: -5px;
	background-position: center;
	cursor: pointer;
	vertical-align: bottom;
	text-align: left;
	overflow: hidden;
	transition: all 0.3s;
}
.yt-video > h5 {
	font-size: 13px;
	border-radius: 4px;
	padding-left: 4px;
	padding-right: 4px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	line-height: 280px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.yt-video.main {
	position: fixed;
	top: 50%;
	left: calc(50% + 50px);
	transform: translate(-50%, -50%);
	z-index: 99;
	cursor: initial;
	width: 80%;
	overflow: visible;
	height: 40vw;
}
.yt-video.main::before {
	content: "";
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: -500%;
	left: -500%;
	width: 1000%;
	height: 1000%;
}

.yt-video iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: 0;
}

@media only screen and (max-width: 500px) {
	.yt-video.main {
		left: 50%;
	}
}


.hidden {
	opacity: var(--hidden-opacity);
	transition: all 0.3s;
}

#search_dec {
	width: calc(100% - 75px);
	transition: all 0.3s;
}
#results {
	overflow: auto;
	white-space: nowrap;
}
#results_container {
	all: unset;
	display: block;
	max-height: 0px;
	overflow: hidden;
	margin-top: 10px;
	transition: all 0.3s;
}

#search_main_container {
	position: fixed;
	top: 50%;
	left: calc(50% + 50px);
	transform: translate(-50%, -50%);
	width: calc(100% - 200px);
}

@media only screen and (max-width: 500px) {
	#search_main_container {
		left: 50%;
		width: calc(90% - 50px);
	}
}

#games {
	text-align: center;
}

#games > h6 {
	text-align: left;
}

#games > article {
	width: 300px;
	height: 125px;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 30px;
	text-align: left;
}

#games > article h5 {
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

#games > article button {
	margin-top: 30px;
}

#games > article > .ol {
	all: unset;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(3px);
}

.movie_player_page, .movie_player_page > body {
	width: 100%;
	height: 100%;
}
.movie_player {
	width: calc(100% - 50px);
	height: calc(100% - 150px);
}
#movie_player, #fake_player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 50px);
	border: 1px solid white;
	border-bottom: 1px solid #4a4a4a;
	border-radius: 11px 11px 0 0;
}

#fake_player > h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 90%;
}
#fake_player > h3 > img {
	width: 90%;
	max-width: 400px;
}
#fake_player > h3 > button {
	margin-top: 20px;
	background-color: rgba(21, 52, 74, 0.7) !important;
	color: var(--secondary) !important;
	border: 1px solid var(--secondary);
}

#controls {
	position: absolute;
	bottom: 0px;
	border-radius: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.7);
}
#controls > button:nth-of-type(1) {
	position: absolute;
	left: -8px;
	top: 0px;
	width: calc(50% - 33.5px);
	height: calc(100% - 2px);
	border-radius: 0 0 0 11px !important;
}
#controls > button:nth-of-type(2) {
	position: absolute;
	right: -8px;
	top: 0px;
	width: calc(50% - 33.5px);
	height: calc(100% - 2px);
	border-radius: 0 0 11px 0 !important;
}


#language_selector_btn {
	position: fixed;
	inset-block-end: 35px;
}

@media only screen and (max-height: 665px) {
	#language_selector_btn {
		position: relative;
		inset-block-end: 0;
	}
}




#server_selector {
	position: absolute;
	right: 2px;
	top: auto;
	bottom: 50px;
	width: calc(50% - 2px);
	height: 200px;
	border-radius: 0 0 11px 0 !important;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 5px 0 0 0 !important;
	overflow-y: scroll;
	transition: all 0.3s;
}
#server_selector p {
	font-weight: 900;
	margin-left: 15px;
}
#server_selector > div {
	background-color: cadetblue;
	width: calc(100% - 5px);
	font-weight: 900;
	padding: 5px;
	cursor: pointer;
	font-size: 15px;
}
#server_selector > div > img {
	width: 30px;
	vertical-align: middle;
}





#banner_img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: calc(100% - 40px);
	height: 30vw;
	cursor: pointer;
	position: relative;
}
#banner_img::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 11px;
	opacity: 0;
	transition: 0.25s all;
	z-index: 2;
}
#banner_img:hover::after {
	opacity: 1;
}
#banner_img::before {
	content: "Change Banner & PFP";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block;
	width: calc(100% - 40px);
	text-align: center;
	font-size: 0px;
	transition: 0.25s all;
}
#banner_img:hover::before {
	font-size: 20px;
}
#pfp_img {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: -30px;
	left: 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 3;
	filter: grayscale(0%);
	transition: all 0.3s;
}
#banner_img:hover #pfp_img {
	filter: grayscale(50%);
}

hr + h6 {
	margin-top: 20px !important;
}

.horizontal-scroll-movies {
	overflow: auto;
	white-space: nowrap;
}