@media only screen and (min-width: 240px) and (max-width: 991px) {

	html {
		font-size: 52%;
	}

	body {
		font-size: 14px;
		line-height: 24px;
	}

	.container {
		max-width: 100%;
	}


	.only_desktop_view {
		display: none;
	}

	.only_mobile_view {
		display: flex;
		align-items: center;
	}


	.button a, .button button {
		padding: 6px 15px;
	}

	.section {
		padding: 30px 0;
	}

	.social_icons { display:none; }

	.header_top_end ul {
		flex-wrap: nowrap;
	}

	.header_top_content ul li {
		font-size: 12px;
	}

	.header_right_list_text, .header_contact_button_text { display:none; }

	.header_right {
	    display: flex;
	    align-items: center;
	}


	.logo {
		max-width: 75px;
        padding-right: 10px;
        padding-bottom: 10px;
	}

	.header_button_list {
		padding: 0;
	}

	.heading {
		margin-bottom: 40px;
	}

	.heading h2 {
		font-size: 30px;
		line-height: 40px;
	}

	.heading h3 {
		font-size: 22px;
		line-height: 28px;
	}

	.toggle_button {
		display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 20px;
	    height: 18px;
	    cursor: pointer;
	    background: transparent;
	}

	.toggle_button div {
		width: 100%;
	    height: 1.5px;
	    border-radius: 3px;
	    background-color: #1AB6D0;
	    position: relative;
	    transition: all .25s ease 0s;
	}

	.toggle_button div:before,
	.toggle_button div:after {
	    content: "";
	    position: absolute;
	    left: 0;
	    width: inherit;
	    height: inherit;
	    background-color: #1AB6D0;
	    border-radius: 3px;
	    transition: all .25s ease 0s;
	}

	.toggle_button div:before {		
		-webkit-transform: translateY(-6px);
    	transform: translateY(-6px);
	}	

	.toggle_button div:after {
		-webkit-transform: translateY(6px);
    	transform: translateY(6px);
	}	

	.close_toggle {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		margin-bottom: 10px;
		padding-top: 10px;
		padding-right: 0;
		float: right;
		padding-right: 0;
		margin: 0 0 0 auto;
	}

	.close_toggle .toggle_button div {
		background-color: #1AB6D0;
	}

	.close_toggle .toggle_button div:before,
	.close_toggle .toggle_button div:after {
		background-color: #1AB6D0;
	}

	.toggle_button.active div {
		background-color: initial;
	}

	.toggle_button.active div:before {		
		-webkit-transform: translateY(0) rotate(-45deg);
    	transform: translateY(0) rotate(-45deg);
	}	

	.toggle_button.active div:after {
		-webkit-transform: translateY(0) rotate(45deg);
    	transform: translateY(0) rotate(45deg);
	}

	.menu .only_mobile_view {
		width: 100%;
	}

	.mobile_version_menu_inside {
		width: 100%;
		display: flex;
	}

	.mobile_version_menu_inside .logo {
		max-width: 100px;
	}

	.menu {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		left: -100%;
		background-color: #070B28;
		overflow: hidden;
		padding: 1rem;
		-webkit-transition: left .6s cubic-bezier(.6,.1,.68,.53);
    	transition: left .6s cubic-bezier(.6,.1,.68,.53);
    	flex-wrap: wrap;
	    align-items: flex-start;
	    align-content: flex-start;
	}

	.menu.menu_open {
		left: 0;
	}

	#menu_background_overlay {
		display: block;
	    position: fixed;
	    z-index: 14;
	    top: 0;
	    left: -110vw;
	    height: 100%;
	    width: 100%;
	    background-color: rgba(51,51,51,.5);
	    -webkit-transition: all .4s ease;
	    transition: all .4s ease;
	    opacity: 1;
	    visibility: visible;
	}

	#menu_background_overlay.menu_overlay_active {
		left: 0;
	}

	.mobile_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2rem;
	}

	.mobile_view_logo {
		max-width: 17rem;
	}

	.menu > ul {
		width: 100%;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		margin-top: 20px;
	}

	.menu > ul li {
		width: 100%;
		padding: 10px 20px;
	}

	.menu > ul li a {
		width: auto;
		display: inline-block;
		padding: 10px 15px;
		transform: skew(0deg);
	}


	.menu > ul li a span {
		position: relative;
		transform: skew(0deg);
	}

	
	.menu > ul li.child_menu .child_menu_panel {
		position: relative;
		display: none;
	}

	.menu > ul li.child_menu:hover .child_menu_panel {
		display: block;
	}

	.mega_menu {
		max-width: 100%;
		min-width: 100%;
		right: 0;
		height: 78vh;
		overflow-y: auto;
	}

	.mega_menu .mega_menu_part_top {
		border-top: solid 0.1rem #DFDFDF;
	}

	.menu ul li.child_menu .child_menu_panel li, 
	.menu ul li.child_menu .mega_menu .mega_menu_part .mega_menu_part_list ul li {
		font-size: 14px;
	    padding: 5px 0;
	}

	.menu ul li.child_menu > a:after {
		right: 0;
	}

	.menu .social ul li a {
		background-color: #E00544;
		color: var(--e-global-color-white);
	}


	








	.footer_top {
		padding: 30px 0;
	}

	.footer_top_left h2 {
		font-size: 30px;
	}

	.newsletter {
		width: 100%;
	}

	.newsletter input {
		width: 65%;
		height: 50px;
		font-size: 14px;
	}

	.newsletter input::placeholder {
		font-size: 14px;
	}

	.newsletter button {
		width: 35%;
		height: 50px;
	}

	.newsletter button {
		font-size: 14px;
	}

	.footer_bottom_box {
	    padding: 10px 20px;
	    border: none;
	}


	.footer_bottom_box h2 {
		font-size: 22px;
	}

	.social ul li a {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}
	.copyright {
		font-size: 14px;
		padding: 15px;
		line-height: normal;
	}



	.inner_banner {
		height: 100px;
	}

	.inner_banner img {
		object-position: left;
	}

	.before_login_sec {
		padding: 30px 15px;
	}

	.before_login_sec:before, .before_login_sec:after { display:none; }

	.before_login_box {
		padding: 20px 0 30px;
	}

	.before_login_box .heading {
		margin-bottom: 30px;
	}

	.custom_checkbox label {
		font-size: 14px;
	}

	.profile_banner_left {
		display: flex;
		justify-content: center;
	}
	
	.profile_banner {
		height: auto;
		padding: 30px 15px;
	}

	.profile_image {
		width: 150px;
		height: 150px;
	}

	.profile_banner_right {
		text-align: center;
	}

	.profile_banner_right h2 {
		font-size: 28px;
		line-height: 40px;
	}
	

	

	




	

}







@media only screen and (min-width: 240px) and (max-width: 767px) {


	.home_banner {
		min-height: 65vh;
		align-items: flex-end;
		position: relative;
	}
	
	.home_banner::after {
		width: 100%;
		height: 100%;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}


	.banner_content {
		font-size: 16px;
		position: relative;
		z-index: 2;
		padding-bottom: 20px;
	}

	.banner_content ul li {
		font-size: 18px;
	}

	.banner_content h1 {
		font-size: 28px;
	}

	.home_sec2 {
		margin-top: 0;
		padding: 30px 0;
		background: linear-gradient(to right, #1ab6d0 0%, #5107d8 100%) !important;
	}

	.home_sec2_box {
		top: 0;
	}

	.home_sec2_box ul {
		flex-wrap: wrap;
	}

	.home_sec2_box ul li {
		position: static;
		width: 100%;
		margin-bottom: 20px;
		transform: scale(1.0) !important;
	}

	.home_sec3_main ul {
		flex-wrap: wrap;
	}

	.home_sec3_main ul li {
		width: 100%;
		margin-bottom: 40px;
	}

	.home_sec3_main ul li:after {
		display: none;
	}


	.home_sec4:before, .home_sec6:before { display:none; }

	.home_sec4_wrap {
		flex-wrap: wrap;
	}

	.home_sec4_box_icon {
		margin: 0 auto 15px;
	}

	.home_sec4_box_content {
		width: 100%;
		text-align: center;
	}


	.home_sec4_bottom {
		flex-wrap: wrap;
		row-gap: 15px;
	}

	.home_sec4_bottom_box {
		width: 100%;
	}

	.home_sec4_bottom_box_bottom {
		padding: 15px;
	}

	.home_sec4_bottom_box table {
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}

	.home_sec4_bottom_box table thead { display:none; }

	.home_sec4_bottom_box table tbody tr {
	    display: block;
	    border: .1px solid #d5d5d5;
	    padding: 13px 0;
	    margin-bottom: 15px;
	    border-radius: 10px;
	    background-color: var(--e-global-color-white);
	}

	.home_sec4_bottom_box table>tbody>tr>td {
		font-size: 14px;
	    display: flex;
	    background: transparent !important;
	    text-align: left!important;
	    border: none;
	    max-width: unset!important;
	    width: unset!important;
	    min-width: unset!important;
	}

	.home_sec4_bottom_box table>tbody>tr>td:before {
	    content: attr(data-th) ":";
	    color: #fff;
	    font-size: 14px;
	    line-height: 22px;
	    font-weight: 500;
	    margin: 0;
	    display: inline-block;
	    width: 100px;
	    white-space: pre-wrap;
	    overflow-wrap: break-word;
	    word-wrap: break-word;
	    word-break: break-word;
	    padding-right: 10px;
	    flex: 0 0 auto;
	}

	.home_sec4_bottom_box_bottom table tbody tr td .user_details h6{
		margin-right: 10px;
	}


	.join_main {
		flex-wrap: wrap;
	}

	.join_box_border,
	.join_box {
		clip-path: polygon(0% 0, 80% 0%, 100% 20%, 100% 0%, 100% 100%, 20% 100%, 0% 80%, 0% 100%);
	}

	.join_box_wrap {
		width: 100%;
		margin-top: 30px;
	}

	.join_box_image {
		height: 300px;
	}

	.join_box_content {
		padding: 20px 40px;
	}

	.home_sec6_image {
		width: 100%;
	}

	.home_sec6_right {
		padding-top: 30px;
	}

	.home_sec6_right h2 {
		width: 100%;
		font-size: 30px;
        line-height: 40px;
	}

	.home_sec6_right h3 {
		font-size: 20px;
	}

	.home_sec7 {
		padding: 30px 30px;
	}

	.home_sec7_box h2 {
		font-size: 30px;
		line-height: 40px;
	}

	.home_sec8_main {
		flex-wrap: wrap;
	}

	.team_box {
		width: 100%;
		margin-bottom: 30px;
	}

	.team_box_image {
		height: 400px;
	}


	.spiner_screen_wrap_top {
		flex-direction: column;
	    height: auto;
	    padding: 20px;
	}

	.spiner_screen_main {
		flex-wrap: wrap;
	}

	.spiner_screen_sidebar {
		width: 100%;
	}

	.spiner_screen_body {
		width: 100%;
		padding: 10px 0;
	}

	.spiner_screen_sidebar_box_player_image {
		height: auto;
	}

	.game_question_gradient {
		padding: 4px;
	}

	.game_question {
		padding: 10px 20px;
	}

	.game_question h2 {
		font-size: 16px;
	}

	.question_under {
		padding-top: 15px;
		flex-wrap: wrap;
	}

	.question_option,
	.question_video_box {
		width: 100%;
	}

	.question_video_box {
		margin-top: 20px;
	}
	.question_video_box {
		display: none; /* Initially hidden */
		position: relative;
	}
	.question_video_box video {
		width: 100%; /* Adjust width as needed */
		height: auto; /* Maintain aspect ratio */
	}
	/* CSS to hide default controls (some might still be visible depending on the browser) */
	.question_video_box video::-webkit-media-controls {
		display: none; /* For WebKit browsers like Chrome and Safari */
	}
	.question_video_box video::-moz-media-controls {
		display: none; /* For Firefox */
	}
	.question_video_box video::-ms-media-controls {
		display: none; /* For Internet Explorer */
	}
	.visitor_body {
		padding: 10px 30px;
	}

	.audience_vote_modal .modal-dialog {
		max-width: 95%;
		margin: 15px auto;
	}

	.audience_vote_modal .modal-dialog .modal-header {
		padding: 10px 20px;
	}

	.audience_vote_modal .modal-dialog .modal-header .close {
		font-size: 32px;
	}



	.profile_avatar ul li {
		width: calc(100% / 2);
		display: flex;
		justify-content: center;
		margin: 15px 0;
	}

	.profile_category_list button {
		padding: 12px 38px;
	}

	.profile_notification_box > span {
		font-size: 14px;
	}

	.home_sec6_right .button {
		margin: 15px auto auto;
	}









	
}




@media only screen and (min-width: 768px) and (max-width: 1023px) {


	html {
		font-size: 55%;
	} 

	.heading h2 {
        font-size: 48px;
        line-height: 60px;
    }

	.home_banner {
		min-height: 65vh;
	}

	.banner_content {
		font-size: 18px;
	}

	.banner_content h1 {
		font-size: 42px;
	}

	.home_sec2_box {
		top: -10px;
	}

	.home_sec2_box ul li {
		width: 22%;
	}

	.home_sec2_box_wrap {
		padding: 30px 10px;
	}

	.home_sec2_box ul li:nth-child(1) {
		left: -70%;
	}

	.home_sec2_box ul li:nth-child(5) {
		right: -70%;
	}


	.home_sec2_box_content h2 {
		font-size: 20px;
	}

	.diamond_shape {
		font-size: 16px;
	}

	.home_sec2_box_content .button a {
		font-size: 13px;
		padding: 6px 15px;
	}

	.home_sec3_main ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	.home_sec3_main ul li {
		width: 33.33%;
	}

	.home_sec3_main ul li:nth-child(3):after {
		display: none;
	}

	.home_sec3_main ul li:not(:last-child):after {
		height: 150px;
	}

	.home_sec3_icon_gradient {
		width: 160px;
		height: 160px;
	}

	.home_sec4_wrap {
		max-width: 50%;
	}

	.home_sec4_bottom {
		flex-wrap: wrap;
		row-gap: 15px;
	}

	.home_sec4_bottom_box {
		width: 100%;
	}

	.join_main {
		flex-wrap: wrap;
	}

	.join_box_wrap {
		width: 50%;
		margin-bottom: 30px;
	}

	.home_sec6_image {
		width: 100%;
	}

	.home_sec6_right h2 {
		width: 100%;
		font-size: 48px;
		line-height: 60px;
	}

	.home_sec7 {
		padding: 30px;
	}

	.home_sec7_box h2 {
		font-size: 48px;
		line-height: 60px;
	}

	.home_sec8_main {
		flex-wrap: wrap;
	}

	.team_box {
		width: 50%;
		margin-bottom: 20px;
	}




	.inner_banner {
        height: 200px;
    }




    .game_screen_body_main {
    	padding: 15px 10px 10px;
    }

    .game_screen_body_main_top {
    	padding: 10px;
    }

    .game_count {
    	padding: 6px 20px;
    }

    .game_question {
    	padding: 10px 30px;
    }

    .game_question h2 {
    	font-size: 16px;
    }

    .question_option {
    	row-gap: 10px;
    }

    .answer {
    	padding: 4px 10px;
    }

    .answer h5 {
    	font-size: 12px;
    	line-height: 22px;
    }




	.profile_avatar ul li {
		width: calc(100% / 4);
		margin: 15px 0;
		display: flex;
		justify-content: center;
	}

	.profile_category_list button {
		padding: 15px 42px;
	}





}



@media only screen and (min-width: 768px) {

	.hamburger_menu, .hamburger_close {display: none;}

}


@media only screen and (min-width: 992px) and (max-width: 1023px) {

	.menu ul {
		column-gap: 6px;
	}

	.menu ul li {
		font-size: 14px;
	}

	.menu ul li a {
		padding: 15px 7px;
	}

	.header_bottom .button {
		padding-left: 0;
	}

	.header_bottom .button a {
		padding: 8px 10px;
	}


}


@media only screen and (min-width: 1023px) {

	.home_sec4_main ul li {
		padding: 15px 30px;
	}

	.home_sec4_main ul li img {
		margin-right: 10px;
	}

}


@media only screen and (min-width: 1023px) and (max-width: 1190px) {

	html {
		font-size: 58%;
	}

	.menu ul {
		column-gap: 6px;
	}

	.menu ul li {
		font-size: 13px;
	}

	.menu ul li a {
		padding: 15px 7px;
	} 
	

	.header_bottom .button {
		padding-left: 0;
	}

	.header_bottom .button a {
		padding: 8px 10px;
	}

	.home_banner {
		background-position-x: 60% !important;
	}

	.banner_content h1  {
		font-size: 48px;
	}

	.banner_content ul li {
		font-size: 26px;
	}

	.banner_under_sec .button a {
		padding: 10px 15px;
	}

	.banner_under_box h4 {
		font-size: 17px;
	}

	.location_sec4_main ul li {
		width: 33.33%;
		margin-bottom: 30px;
	}

	.location_sec4_main ul li .location_sec4_image {
		width: 200px;
		height: 200px;
	}

	.home_sec2_box {
		max-width: 100%;
    	flex: 0 0 100%;
	}

	.home_sec2_box_content h2 {
		font-size: 28px;
	}

	.home_sec3_main ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	.home_sec3_main ul li {
		width: 33.33%;
		margin-bottom: 20px;
	}

	.home_sec3_main ul li:nth-child(3):after {
		display: none;
	}

	.home_sec3_main ul li:not(:last-child):after {
		height: 170px;
	}

	.inner_banner img {
		object-position: left;
	}

	.before_login_box {
		max-width: 90%;
	}

	.before_login_box_wrap {
		max-width: 100%;
	}

	.heading h2 {
		font-size: 58px;
	}

	.profile_avatar ul li {
		width: calc(100% / 6);
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.footer_top_left h2 {
		font-size: 48px;
	}
	

}

@media only screen and (min-width: 1191px) and (max-width: 1300px) {

	html {
		font-size: 60%;
	}

	.menu ul {
		column-gap: 10px;
	}

	.menu ul li {
		font-size: 14px;
	}

	.menu ul li a {
		padding: 15px 10px;
	}

	.header_bottom .button {
		padding-left: 0;
	}

	.header_bottom .button a {
		padding: 8px 10px;
	}


	.location_sec4_main ul li {
		margin-bottom: 30px;
	}

	.location_sec4_main ul li .location_sec4_image {
		width: 200px;
		height: 200px;
	}

	.before_login_sec {
		padding-left: 30px;
		padding-right: 30px;
	}



}


@media only screen and (min-width: 1601px) and (max-width: 1800px) {

	html {
		font-size: 85%;
	}

}



@media only screen and (min-width: 1801px) and (max-width: 2000px) {

	html {
		font-size: 95%;
	}

}



@media only screen and (min-width: 2001px) and (max-width: 2500px) {

	html {
		font-size: 110%;
	}


}



@media only screen and (min-width: 2501px) and (max-width: 2800px) {

	html {
		font-size: 128%;
	}


}


@media only screen and (min-width: 2801px) and (max-width: 3500px) {

	html {
		font-size: 148%;
	}


}


@media only screen and (min-width: 3501px) and (max-width: 4000px) {

	html {
		font-size: 180%;
	}


}


@media only screen and (min-width: 4001px) and (max-width: 4500px) {

	html {
		font-size: 200%;
	}


}


@media only screen and (min-width: 4501px) and (max-width: 5000px) {

	html {
		font-size: 200%;
	}


}


@media only screen and (min-width: 5001px) {

	html {
		font-size: 250%;
	}


}