
	@font-face {
		font-family: RobotoSlab;
		src: url("/fonts/RobotoSlab-VariableFont_wght.ttf");
	}

	@font-face {
		font-family: DigitalFont;
		src: url("/fonts/digital-7.regular.ttf");
	}

	@font-face {
		font-family: BanglaFont;
		src: url("https://fonts.maateen.me/kalpurush/font.css");
	}

	* {
		font-family: RobotoSlab;
		color: #404040;
	}

	#owl-demo .owl-page {
		display: none !important;
	}

	@media only screen and (min-width: 1900px) {
		.player-desc strong {
			font-size: 12px;
		}

		.player-desc span {
			font-size: 10px;
		}

		#player-list {
			max-height: 610px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			height: 100vh;
			min-height: 614px;
			background-size: cover;
		}

		.hide-md {
			display: none;
		}

		#owl-demo .item img {
			padding-right: 28px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		#owl-demo .item div {
			position: absolute;
			top: 50%;
			color: white;
			width: 60%;
			right: -0.5%;
		}
	}

	@media only screen and (min-width: 1261px) and (max-width: 1366px) {

		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-desc strong {
			font-size: 10px;
		}

		.player-desc span {
			font-size: 9px;
		}

		.item-img i {
			position: absolute;
			top: 30px;
			right: 50px;
			color: white;
		}

		#player-list {
			max-height: 440px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		.logo-left {
			position: absolute;
			top: 50px;
			left: 50px;
		}

		.logo-left img {
			width: 100px;
		}

		.logo-right {
			position: absolute;
			top: 50px;
			right: 50px;
		}

		.logo-right img {
			width: 100px;
		}

		#owl-demo .item {
			height: 95vh;
			min-height: 614px;
			background-size: cover;
		}

		.hide-md {
			display: none;
		}

		#owl-demo .item div {
			position: absolute;
			top: 50%;
			color: white;
			width: 60%;
			right: 3%;
		}

		#owl-demo .item img {
			padding-top: 50px;
			padding-right: 60px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		#owl-demo h1 {
			padding-bottom: 130px;
			font-size: 4.5vw;
			color: #ffffff;
			text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 20px #2597cd;
		}

		.desc {
			min-height: 120px;
			text-align: center;
			padding: 5px;
		}
	}

	@media only screen and (min-width: 320px) and (max-width: 450px) {

		#owl-demo .item div {
			position: absolute;
			top: 60%;
			left: 15px;

		}

		#owl-demo .item img {
			margin-top: -20px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
			padding: 10px;
			margin-left: 20px;
		}

		#owl-demo h1 {
			padding-bottom: 130px;
			font-size: 3.7vw;
			color: #ffffff;
			text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 20px #2597cd;
		}

	}

	@media only screen and (min-width: 1000px) and (max-width: 1260px) {

		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-list img {
			object-fit: cover;
			min-height: 60px;
		}

		.player-desc strong {
			font-size: 9.5px;
		}

		.player-desc span {
			font-size: 9px;
		}

		.item-img i {
			position: absolute;
			top: 30px;
			right: 50px;
			color: white;
		}

		#player-list {
			max-height: 400px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		.logo-left {
			position: absolute;
			top: 50px;
			left: 50px;
		}

		.logo-left img {
			width: 100px;
		}

		.logo-right {
			position: absolute;
			top: 50px;
			right: 50px;
		}

		.logo-right img {
			width: 100px;
		}

		#owl-demo .item {
			height: 93vh;
			min-height: 614px;
			background-size: cover;
		}

		.hide-md {
			display: none;
		}

		#owl-demo .item div {
			position: absolute;
			top: 50%;
			color: white;
			width: 60%;
			right: -3%;
		}

		#owl-demo .item img {
			padding-top: 50px;
			padding-right: 120px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		#owl-demo h1 {
			padding-bottom: 130px;
			font-size: 3.7vw;
			color: #ffffff;
			text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 20px #2597cd;
		}

		.desc {
			min-height: 120px;
			text-align: center;
			padding: 5px;
		}
	}

	@media only screen and (min-width: 600px) and (max-width: 999px) {
		#player-list {
			max-height: 380px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			height: 100vh;
			min-height: 614px;
			background-size: cover;
		}

		.hide-md {
			display: none;
		}

		#owl-demo .item img {
			padding-right: 28px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		#owl-demo .item div {
			position: absolute;
			top: 50%;
			color: white;
			width: 60%;
			right: -0.5%;
		}
	}

	@media only screen and (min-width: 1367px) and (max-width: 1499px) {

		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-desc strong {
			font-size: 10px;
		}

		.player-desc span {
			font-size: 9px;
		}

		.item-img i {
			position: absolute;
			top: 30px;
			right: 50px;
			color: white;
		}

		#player-list {
			/*height: 70vh;*/
			height: 468px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			height: 95vh;
			min-height: 614px;
			background-size: cover;
		}

		.hide-md {
			display: none;
		}

		#owl-demo .item img {
			padding-right: 28px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		#owl-demo .item div {
			position: absolute;
			top: 50%;
			color: white;
			width: 60%;
			right: 2%;
		}

		#owl-demo h1 {
			padding-bottom: 130px;
			font-size: 4.5vw;
			color: #ffffff;
			text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 20px #2597cd;
		}

		.logo-left {
			position: absolute;
			top: 50px;
			left: 50px;
		}

		.logo-left img {
			width: 100px;
		}

		.logo-right {
			position: absolute;
			top: 50px;
			right: 50px;
		}

		.logo-right img {
			width: 100px;
		}

		.desc {
			min-height: 120px;
			text-align: center;
			padding: 5px;
		}
	}

	@media only screen and (min-width: 1500px) {


		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-list img {
			object-fit: cover;
			min-height: 80px;
		}

		.player-desc strong {
			font-size: 12px;
		}

		.player-desc span {
			font-size: 10px;
		}

		.item-img i {
			position: absolute;
			top: 30px;
			right: 65px;
			color: white;
		}

		#player-list {
			max-height: 610px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			height: 95vh;
			min-height: 814px;
			background-size: cover;
		}

		.hide-md {
			display: none;
		}

		#owl-demo .item img {
			padding-right: 50px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		#owl-demo .item div {
			position: absolute;
			top: 50%;
			color: white;
			width: 60%;
			right: -0.5%;
		}

		#owl-demo h1 {
			font-size: 4vw;
			color: #ffffff;
			text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 20px #2597cd;
		}

		h2 {
			font-size: 34px;
		}

		.fsize {
			font-size: 25px;
		}

		.clock {
			text-align: right;
		}

		.clock img {
			width: 30%;
		}

		.player {
			background-color: gray;
			/*width:60%;*/
			height: 50%;
			min-height: 650px;
			display: block;
			align-content: center;
		}

		#owl-demo2 .item {
			width: 230px;
			height: 150px;
			background-size: cover;
			display: block;
			text-align: center;
			background-color: gray;
			border-radius: 5px;
		}

		#owl-demo2 .item img {
			width: 70px;
			position: relative;
			top: 40px;
			z-index: 99 !important;
		}

		.desc-btn {
			margin-top: 100px;
		}

		.item-img i {
			font-size: 30px;
			color: white;
			position: absolute;
			top: 30%;
			left: 46%;
			cursor: pointer;
		}

		#player-list {
			max-height: 610px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		.player-list .col-md-12 {
			border-bottom: 1px solid black;
		}

		.card-body {
			padding: 10px 120px;
		}

		.desc-btn img {
			max-width: 90%;
			border-radius: 70px;
			transition: ease all 0.5s;
		}

		.logo-left {
			position: absolute;
			top: 50px;
			left: 50px;
		}

		.logo-left img {
			width: 100px;
		}

		.logo-right {
			position: absolute;
			top: 50px;
			right: 50px;
		}

		.logo-right img {
			width: 100px;
		}

		.language-block {
			position: absolute;
			top: 20px;
			right: 20px;
		}

		.desc {
			min-height: 120px;
			text-align: center;
			padding: 5px;
		}
	}

	/*mobile*/
	@media only screen and (min-width: 320px) and (max-width: 410px) {
		#player-list {
			max-height: 610px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			width: 100% !important;
			display: block;
			height: 78vh;
			min-height: 560px;
			background-size: cover;
		}

		#owl-demo .item img {
			padding-right: 28px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		.card-body {
			padding: 0px 40px;
		}

		.fsize {
			font-size: 3.2vw;
		}

		.clock img {
			max-width: 60%;
			position: relative;
			left: 30% !important;
		}

		.desc {
			text-align: center;
			padding: 5px;
		}

		#owl-demo .item div {
			padding-top: 10px;
			position: absolute;
			top: 27%;
			color: white;
			text-align: center;
			left: 9%;
		}

		#owl-demo h1 {
			padding: 3px 10px;
			font-size: 6.5vw;
			color: #ffffff;
			/*text-shadow:  0 0 5px #FFF, 0 0 5px #FFF, 0 0 20px #2597CD*/
			/*text-shadow: 2px 2px 4px #2597CD;*/
			text-shadow: 2px 1px 20px rgba(255, 255, 255, 0.74);
		}

		.desc-btn img {
			max-width: 80%;
			border-radius: 70px;
			transition: ease all 0.5s;
			position: relative;
			top: 50px;
		}

		h2 {
			font-size: 20px;
		}

		.player {
			background-color: gray;
			/*width:100%;*/
			height: 60%;
			min-height: 230px;
			display: block;
			align-content: center;
		}

		#owl-demo2 .item {
			width: 160px;
			height: 110px;
			background-size: cover;
			display: block;
			text-align: center;
			background-color: gray;
			border-radius: 5px;
		}

		#owl-demo2 .item img {
			width: 40px;
			position: relative;
			top: 40px;
			z-index: 99 !important;
		}

		.card {
			margin-top: 30px;
		}

		.item-img i {
			font-size: 40px;
			color: white;
			position: absolute;
			top: 42%;
			left: 45%;
		}

		#player-list {
			max-height:350px;
			overflow-y: scroll;
		}

		.logo-left {
			position: absolute;
			top: 25px;
			left: 30px;
		}

		.logo-left img {
			width: 50px;
		}

		.logo-right {
			position: absolute;
			top: 25px;
			right: 15px;
		}

		.logo-right img {
			width: 50px;
		}

		.language-block {
			font-size: 12px;
			position: absolute;
			top: 10px;
			right: 20px;
		}

		.desc {
			padding: 0px;
			height: 90px;
			align-items: center;
			align-content: center;
		}

		.desc .clock img {
			width: 50% !important;
			/*padding: 5px;*/
		}

		.desc .csect {
			position: relative;
			top: -15px;
		}
	}


	@media only screen and (min-width: 411px) and (max-width: 600px) {
		#player-list {
			max-height: 610px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			width: 100% !important;
			display: block;
			height: 78vh;
			min-height: 650px;
			background-size: cover;
		}

		#owl-demo .item img {
			padding-right: 28px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		.card-body {
			padding: 0px 40px;
		}

		.fsize {
			font-size: 3.2vw;
		}

		.clock img {
			max-width: 60%;
			position: relative;
			left: 30% !important;
		}

		.desc {
			text-align: center;
			padding: 5px;
		}

		#owl-demo .item div {
			padding-top: 10px;
			position: absolute;
			top: 27%;
			color: white;
			text-align: center;
			left: 9%;
		}

		#owl-demo h1 {
			padding: 3px 10px;
			font-size: 6.5vw;
			color: #ffffff;
			/*text-shadow:  0 0 5px #FFF, 0 0 5px #FFF, 0 0 20px #2597CD*/
			/*text-shadow: 2px 2px 4px #2597CD;*/
			text-shadow: 2px 1px 20px rgba(255, 255, 255, 0.74);
		}

		.desc-btn img {
			max-width: 80%;
			border-radius: 70px;
			transition: ease all 0.5s;
			position: relative;
			top: 50px;
		}

		h2 {
			font-size: 20px;
		}

		.player {
			background-color: gray;
			/*width:100%;*/
			height: 60%;
			min-height: 230px;
			display: block;
			align-content: center;
		}

		#owl-demo2 .item {
			width: 160px;
			height: 110px;
			background-size: cover;
			display: block;
			text-align: center;
			background-color: gray;
			border-radius: 5px;
		}

		#owl-demo2 .item img {
			width: 40px;
			position: relative;
			top: 40px;
			z-index: 99 !important;
		}

		.card {
			margin-top: 30px;
		}

		.item-img i {
			font-size: 40px;
			color: white;
			position: absolute;
			top: 42%;
			left: 45%;
		}

		#player-list {
			max-height: 370px;
			overflow-y: scroll;
		}

		.logo-left {
			position: absolute;
			top: 25px;
			left: 30px;
		}

		.logo-left img {
			width: 50px;
		}

		.logo-right {
			position: absolute;
			top: 25px;
			right: 15px;
		}

		.logo-right img {
			width: 50px;
		}

		.language-block {
			font-size: 12px;
			position: absolute;
			top: 10px;
			right: 20px;
		}

		.desc {
			padding: 0px;
			height: 90px;
			align-items: center;
			align-content: center;
		}

		.desc .clock img {
			width: 50% !important;
			/*padding: 5px;*/
		}

		.desc .csect {
			position: relative;
			top: -15px;
		}
	}

	@media only screen and (min-width: 601px) and (max-width: 999px) {
		#player-list {
			max-height: 610px;
			overflow-y: scroll;
			margin: 20px 0px;
		}

		#owl-demo .item {
			width: 100% !important;
			display: block;
			height: 78vh;
			min-height: 560px;
			background-size: cover;
		}

		#owl-demo .item img {
			padding-right: 28px;
			display: block;
			width: 100%;
			height: auto;
			max-height: 550px;
		}

		.card-body {
			padding: 0px 40px;
		}

		.fsize {
			font-size: 3.2vw;
		}

		.clock img {
			max-width: 60%;
			position: relative;
			left: 30% !important;
		}

		.desc {
			text-align: center;
			padding: 5px;
		}

		#owl-demo .item div {
			padding-top: 10px;
			position: absolute;
			top: 27%;
			color: white;
			text-align: center;
			left: 9%;
		}

		#owl-demo h1 {
			padding: 3px 10px;
			font-size: 6.5vw;
			color: #ffffff;
			text-shadow: 2px 1px 20px rgba(255, 255, 255, 0.74);
		}

		.desc-btn img {
			max-width: 80%;
			border-radius: 70px;
			transition: ease all 0.5s;
			position: relative;
			top: 50px;
		}

		h2 {
			font-size: 20px;
		}

		.player {
			background-color: gray;
			/*width:100%;*/
			height: 60%;
			min-height: 230px;
			display: block;
			align-content: center;
		}

		#owl-demo2 .item {
			width: 160px;
			height: 110px;
			background-size: cover;
			display: block;
			text-align: center;
			background-color: gray;
			border-radius: 5px;
		}

		#owl-demo2 .item img {
			width: 40px;
			position: relative;
			top: 40px;
			z-index: 99 !important;
		}

		.card {
			margin-top: 30px;
		}

		.item-img i {
			font-size: 40px;
			color: white;
			position: absolute;
			top: 42%;
			left: 45%;
		}

		#player-list {
			max-height: 240px;
			overflow-y: scroll;
		}

		.logo-left {
			position: absolute;
			top: 25px;
			left: 30px;
		}

		.logo-left img {
			width: 50px;
		}

		.logo-right {
			position: absolute;
			top: 25px;
			right: 15px;
		}

		.logo-right img {
			width: 50px;
		}

		.language-block {
			font-size: 12px;
			position: absolute;
			top: 10px;
			right: 20px;
		}

		.desc {
			padding: 0px;
			height: 90px;
			align-items: center;
			align-content: center;
		}

		.desc .clock img {
			width: 50% !important;
			/*padding: 5px;*/
		}

		.desc .csect {
			position: relative;
			top: -15px;
		}
	}

	/*end mobile*/

	.fa-chevron-right,
	.fa-chevron-left {
		color: #d3d3d3;
	}

	#owl-demo2 .owl-prev,
	#owl-demo2 .owl-next {
		display: none !important;
		/*background:none!important;*/
	}

	.owl-theme .owl-controls .owl-buttons div {
		background: none !important;
	}

	.owl-theme .owl-controls {
		margin-top: 0px !important;
	}

	.owl-prev,
	.owl-next {
		/*width: 150px;
			        /*height: 100px;*/
		position: absolute;
		top: 55%;
		transform: translateY(-50%);
		/*display: block !important;*/
		/*border:0px solid black;*/
	}

	.owl-prev {
		left: 10px;
	}

	.owl-next {
		right: 10px;
	}

	.owl-prev i,
	.owl-next i {
		font-size: 50px;
		padding: 5px;
		font-weight: inherit;
	}

	#owl-demo2 .owl-carousel .owl-stage {
		display: flex;
		align-items: center;
	}

	#owl-demo2 .owl-carousel .caption {
		text-align: center;
	}

	.desc {
		max-width: 100% !important;
		overflow: hidden;
	}

	.activeBtn {
		background-color: #cececed2;
		color: white;
		padding: 5px 7px;
		border-radius: 2px;
	}
