.loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--body-color);
	/* background-color: rgba(0, 0, 0, 0.8); */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

@media only screen and (max-width: 868px){
	.loader-wrapper{
		/* background-color: var(--blurple); */
		padding: 0px 20px;
	}
}

.content{
	display: none;
}

.btn{
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	color: var(--white) !important;
}

.btn-blurple, .bg-blurple{
	background-color: var(--blurple) !important;
	color: var(--white) !important;
}

.bg-light-blurple{
	background-color: var(--light-blurple) !important;
}

.btn.btn-hover{
	border: 2px solid #000 !important;
}

.btn.btn-hover:hover{
	transform: translate(-3px, -9px);
	box-shadow: 3px 9px 0 #000000, 15px 15px 20px rgba(64, 164, 122, 0.2);
}

.btn-darkgreen, .bg-darkgreen{
	background-color: var(--darkgreen) !important;
	color: var(--white) !important;
}

.btn-outline-greenwhite{
	background-color: var(--greenwhite) !important;
	color: var(--darkgreen) !important;
	border: 5px solid var(--darkgreen) !important;
}

.btn-outline-greenwhite.btn-hover{
	border: 5px solid var(--darkgreen) !important;
}

.bg-darkgreen-light{
	background-color: var(--darkgreen-light) !important;
}

.btn-orange, .bg-orange{
	background-color: var(--orange) !important;
}

.btn-green, .bg-green{
	background-color: var(--green) !important;
}

.btn-lightgreen, .bg-lightgreen{
	background-color: var(--lightgreen) !important;
	color: var(--darkgreen) !important;
}

.btn-outline-lightgreen{
	background-color: var(--lightgreen) !important;
	color: var(--darkgreen) !important;
	border: 5px solid var(--darkgreen) !important;
}

.btn-outline-lightgreen.btn-hover{
	border: 5px solid var(--darkgreen) !important;
}

.btn-greenwhite, .bg-greenwhite{
	background-color: var(--greenwhite) !important;
	color: var(--darkgreen) !important;
}

@media (max-width: 991px) and (orientation: landscape) {
	.btn-outline-lightgreen, .btn-outline-greenwhite, .btn-outline-lightgreen.btn-hover, .btn-outline-greenwhite.btn-hover{
		border-width: 3px !important;
	}
}

.border-blurple{
	border-color: var(--blurple) !important;
}

.border-orange{
	border-color: var(--orange) !important;
}

.border-darkgreen{
	border-color: var(--darkgreen) !important;
}

.border-greenwhite{
	border-color: var(--greenwhite) !important;
}

.border-purple{
	border-color: var(--purple) !important;
}

.btn-red, .bg-red{
	background-color: var(--red) !important;
	color: var(--white) !important;
	transition: all 0.3s ease-in-out;
}

.bg-hover-greenwhite:hover{
	background-color: var(--greenwhite) !important;
	color: var(--darkgreen) !important;
	transition: 0s;
}

.btn-outline-blurple{
	border: 2px solid var(--blurple) !important;
	color: var(--blurple) !important;
}

.btn-purple, .bg-purple{
	background-color: var(--purple) !important;
	color: var(--white) !important;
}

.btn-blue, .bg-blue{
	background-color: var(--blue) !important;
	color: var(--white) !important;
}

.btn-navbar, .bg-navbar{
	background-color: var(--navbar) !important;
	color: var(--white) !important;
}

.btn-elements, .bg-elements{
	background-color: var(--elements) !important;
	color: var(--white) !important;
}

.btn-cards, .bg-cards{
	background-color: var(--elements) !important;
}

.bg-level-easy{
	background-color: var(--level-easy);
}

.bg-level-medium{
	background-color: var(--level-medium);
}

.bg-level-hard{
	background-color: var(--level-hard);
}

.btn-custom{
	background-color: transparent !important;
	padding: 8px 22px !important;
	font-size: 17px;
	color: #ccc !important;
	border: 2px solid var(--blurple) !important;
	border-radius: 25px;
	width: max-content;
	opacity: 1;
	transition: 0.3s;
}

.btn-custom.btn{
	font-size: 13px !important;
	text-transform: none !important;
}

.btn-custom:hover{
	opacity: 0.7;
	box-shadow: 0px 0px 10px 3px var(--blurple);
}

.btn-login{
	background-color: var(--discord) !important;
	padding: .5rem 1.3rem !important;
	color: var(--white) !important;
	border: none;
	border-radius: .375rem;
	opacity: 1;
	transition: 0.3s;
	width: 100%;
}

.btn-login:hover{
	opacity: 0.7;
}

.btn-square{
	padding: 12px 27px !important;
	font-size: 17px;
	color: #ccc !important;
	border: none;
	border-radius: 4px;
	width: max-content;
	opacity: 1;
	transition: 0.3s;
}

.btn-square.blurple{
	background-color: var(--blurple) !important;
}

.btn-square.blurple:hover{
	opacity: 0.7;
	box-shadow: 0px 3px 25px var(--blurple-rgb);
}

.btn-square.purple{
	background-color: var(--purple) !important;
}

.btn-square.purple:hover{
	opacity: 0.7;
	box-shadow: 0px 3px 25px var(--purple-rgb);
}

.btn-square.darkpurple{
	background-color: var(--dark-purple) !important;
}

.btn-square.darkpurple:hover{
	opacity: 0.7;
	box-shadow: 0px 0px 10px 3px var(--dark-purple);
}

.text-light-blue{
	color: var(--light-blue) !important;
}

.text-blurple{
	color: var(--blurple) !important;
}

.text-orange{
	color: var(--orange) !important;
}

.text-purple{
	color: var(--purple) !important;
}

.text-light{
	color: #a0a6b9 !important;
}

.text-lighter{
	color: #ccc !important;
}

.text-gray{
	color: #2D3441 !important;
}

.text-green{
	color: var(--green) !important;
}

.text-red{
	color: var(--red) !important;
}

.text-greenwhite{
	color: var(--greenwhite) !important;
}

.text-lightgreen{
	color: var(--lightgreen) !important;
}

.cursor-pointer{
	cursor: pointer;
}

.cursor-notallowed{
	cursor: not-allowed !important;
}

.bg-transparent{
	background-color: transparent !important;
}

.checkbox-lg{
	transform: scale(1.3,1.3);
}

.w-maxcontent, .w-mc{
	width: max-content !important;
}

.fs-text{
	font-size: 1.1rem !important;
}

.fs-6{
	font-size: 15px !important;
}

.fs-7{
	font-size: 12px !important;
}

.scrollbtn{
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	cursor: pointer;
	padding: 10px 15px !important;
	width: max-content !important;
}

/* banner with custom background */

.banner-bg {
	overflow: hidden;
	position: relative;
	border-radius: 20px;
}

.banner-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1;
	border-radius: 20px;
}

.banner-bg-image {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
	height: 360px;
	z-index: 0;
}

.banner-bg-content {
	position: relative;
	padding: 20px;
	z-index: 2;
}

.search-input-label{
	border-radius: 12px 0px 0px 12px;
	background-color: #f4f5f5;
	padding: 12px 13px 12px 15px;
	border: none;
	outline: none;
	color: #000;
}

.search-input{
	border-radius: 0px 12px 12px 0px;
	background-color: #f4f5f5;
	padding: 12px 20px 12px 0px;
	border: none;
	outline: none;
	width: 100% !important;
	color: #000;
}

.search-input::placeholder{
	color: #2D3441 !important;
}

.fw-100{
	font-weight: 100 !important;
}

.fw-200{
	font-weight: 200 !important;
}

.fw-300{
	font-weight: 300 !important;
}

.fw-400{
	font-weight: 400 !important;
}

.fw-500{
	font-weight: 500 !important;
}

.fw-600{
	font-weight: 600 !important;
}

.fw-700{
	font-weight: 700 !important;
}

.fw-800{
	font-weight: 800 !important;
}

.fw-900{
	font-weight: 900 !important;
}

.left-word,
.right-word {
  flex: 1;
  text-align: center;
  font-size: 18px;
}

.horizontal-line {
  width: 2px;
  height: 27px;
  background-color: #ccc;
}

.custom-gradient{
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(180deg, rgba(255, 255, 255, 0.2205) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(270deg, rgba(255, 128, 0, 0.82) 0%, rgba(255, 188, 120, 0.63) 100%) !important;
	box-shadow: inset 0px 22px 101px rgba(0, 0, 0, 0.25) !important;
}

.custom-gradient-reverse{
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), linear-gradient(267.35deg, rgba(74, 188, 251, 0.38) 0.21%, rgba(221, 142, 124, 0.24) 100%), #FFFFFF !important;
	box-shadow: inset 6px -6px 7px rgba(106, 106, 106, 0.06), inset -6px 6px 7px rgba(255, 255, 255, 0.05) !important;
}

/* carousel */

.custom-carousel-container {
	position: relative !important;
	width: 100% !important;
	overflow: hidden !important;
}

.custom-carousel {
	display: flex !important;
	transition: transform 0.5s ease-in-out !important;
}

.custom-carousel-item {
	position: relative !important;
	flex: 0 0 100% !important;
}

.custom-carousel-item img {
	width: 100% !important;
	height: 500px !important;
	object-fit: cover !important;
	border-radius: 15px !important;
}

.custom-carousel-caption {
	position: absolute !important;
	top: 40% !important;
	left: 20% !important;
	transform: translate(-40%, -20%) !important;
	color: white !important;
}

@media only screen and (max-width: 1300px) {
	.custom-carousel-caption {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}
}

.prev-button,
.next-button {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	padding: 10px !important;
	background-color: transparent !important;
	font-size: 25px !important;
	color: white !important;
	border: none !important;
	cursor: pointer !important;
	margin-left: 1%;
	margin-right: 1%;
}

.next-button {
	right: 0 !important;
}

.custom-carousel-btn{
	border-radius: 6px;
	background: #fff;
	color: #2D3441;
	font-size: 16px;
	font-weight: 600;
	border: none;
	outline: none;
	width: 65%;
	padding: 12px;
	transition: 0.3s;
}

.custom-carousel-btn:hover{
	background: #ccc;
}

.dashed-line {
	position: relative;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.dashed-line .dashed-line-dashes {
	border-bottom: 2px dashed #000;
}

.dashed-line .dashed-line-start {
	position: absolute;
	background-color: #fff;
	top: -6px;
	margin: 1rem 0;
	padding: 0 1rem;
	margin-left: 1rem;
	width: max-content;
}

.dashed-line .dashed-line-center {
	position: absolute;
	background-color: #fff;
	top: -9px;
	left: 50%;
    transform: translateX(-50%);
	margin: 1rem 0;
	padding: 0 1rem;
	margin-left: 1rem;
	width: max-content;
}

.dashed-line .dashed-line-end {
	position: absolute;
	right: 0;
	top: 0px;
	background-color: #fff;
	margin: 1rem 0;
	padding: 0 1rem;
	margin-right: 2rem;
	width: max-content;
}

.input-blurple{
	padding: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 17px;
	background-color: var(--greenwhite);
	color: #333333;
	outline: none;
	width: 100%;
	transition: 0.3s;
	font-weight: 700;
}

:dir(rtl) .input-blurple {
	text-align: right;
}

.input-blurple:focus{
	border: 1px solid var(--blurple);
	box-shadow: 0px 3px 25px var(--blurple-rgb);
}

.input-darkgreen{
	padding: 0.8rem 20px;
	border: none;
	border-radius: 50rem;
	background-color: var(--darkgreen);
	color: var(--greenwhite);
	outline: none;
	width: 100%;
	transition: 0.3s;
	font-weight: 700;
	font-size: 20px;
}

:dir(rtl) .input-darkgreen {
	text-align: right;
}

.input-darkgreen.input-sm{
	font-size: 16px;
}

.input-darkgreen::placeholder{
	color: var(--greenwhite);
	opacity: 0.7;
}

.input-darkgreen:focus{
	box-shadow: 0px 3px 25px var(--darkgreen-rgb);
}

select.input-darkgreen option{
	background: var(--greenwhite);
	color: var(--darkgreen);
}

.input-greenwhite{
	padding: 0.8rem 20px;
	border: none;
	border-radius: 50rem;
	background-color: var(--greenwhite);
	color: var(--darkgreen);
	outline: none;
	width: 100%;
	transition: 0.3s;
	font-weight: 500;
}

.input-greenwhite.input-lg{
	font-weight: 700;
	font-size: 20px;
}

:dir(rtl) .input-greenwhite {
	text-align: right;
}

.input-greenwhite::placeholder{
	color: var(--darkgreen);
	opacity: 0.7;
}

.input-greenwhite:focus{
	box-shadow: 0px 3px 25px var(--greenwhite-rgb);
}

.input-blurple.group-right, .input-darkgreen.group-right, .input-greenwhite.group-right{
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	border-top-left-radius: 9px !important;
	border-bottom-left-radius: 9px !important;
}

.input-blurple.group-left, .input-darkgreen.group-left, .input-greenwhite.group-left{
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-top-right-radius: 9px !important;
	border-bottom-right-radius: 9px !important;
}

.input-blurple.group-right.rounded-pill, .input-darkgreen.group-right.rounded-pill, .input-greenwhite.group-right.rounded-pill{
	border-top-left-radius: 25px !important;
	border-bottom-left-radius: 25px !important;
}

.input-blurple.group-left.rounded-pill, .input-darkgreen.group-left.rounded-pill, .input-greenwhite.group-left.rounded-pill{
	border-top-right-radius: 25px !important;
	border-bottom-right-radius: 25px !important;
}

.btn-sub{
	padding: 0.8rem 2rem;
	background-color: var(--blurple);
	color: #fff;
	font-size: 14px;
	border: none;
	transition: 0.3s;
	border-radius: 9px;
}

.btn-sub.btn-sm{
	padding: 8px 17px !important
}

.btn-sub:hover, .btn-sub:focus{
	box-shadow: 0px 3px 25px var(--blurple-rgb);
}

.btn-sub.darkpurple{
	background-color: var(--dark-purple);
}

.btn-sub.darkpurple:hover, .btn-sub.darkpurple:focus{
	box-shadow: 0px 3px 25px rgb(41, 41, 63, 0.5);
}

.btn-sub.group-left{
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-top-right-radius: 9px !important;
	border-bottom-right-radius: 9px !important;
}

.btn-sub.group-right{
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	border-top-left-radius: 9px !important;
	border-bottom-left-radius: 9px !important;
}

.btn-sub.group-left.rounded-pill{
	border-top-right-radius: 50rem !important;
	border-bottom-right-radius: 50rem !important;
}

.btn-sub.group-right.rounded-pill{
	border-top-left-radius: 50rem !important;
	border-bottom-left-radius: 50rem !important;
}

.square-sm{
	width: 100%;
	padding: 7px;
	border-radius: 13px;
	background-color: #fafafa;
	transition: 0.3s;
}

.square-sm:hover{
	background-color: #ccc;
	cursor: pointer;
}

.square-sm.red{
	border-bottom: 5px solid var(--red);
}

.square-sm.blue{
	border-bottom: 5px solid #4770ff;
}

.square-sm.orange{
	border-bottom: 5px solid #ff9447;
}

.square-sm.purple{
	border-bottom: 5px solid #ae47ff;
}

.square-sm.blurple{
	border-bottom: 5px solid var(--blurple);
}

.square-sm.green{
	border-bottom: 5px solid #36d900;
}

.square-sm img{
	max-width: 100%;
	padding: 40px;
	margin: 40px 0px;
	transition: 0.3s;
}

.square-sm:hover img{
	padding: 0px;
	transform: rotate(20deg);
}

.about-card{
	width: 100%;
	background: #fff;
	border-radius: 25px;
	padding: 45px;
	color: #000;
	box-shadow: 0px 6.39px 16.76px 0px rgba(0, 0, 0, 0.05);
	display: grid;
	align-items: center;
	justify-content: center;
	transition: background 0.3s;
}

.about-card:hover{
	background: #272727;
	color: #fff;
}

.custom-item-button{
	border-radius: 13px;
	border: none;
	width: 100%;
	font-size: 14px;
	padding: 13px;
	color: #fff;
	transition: 0.3s;
}

.custom-item-button:hover{
	opacity: 0.7;
}

.custom-item-button.red{
	background-color: var(--red) !important;
}

.custom-item-button.dark{
	background-color: #272727 !important;
}

.qoute{
	transition: opacity 0.5s ease-in-out;
}

.qoute{
	transition: opacity 0.5s ease-in-out;
	opacity: 1;
}

.qoute-fade {
    animation: fadeOutAnimation 0.3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.character-image{
	transition: 0.3s;
}

.faq-card{
	padding: 25px 45px;
	background-color: var(--cards);
	opacity: 0.3;
	transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.faq-card:hover{
	opacity: 1;
	cursor: pointer;
}

.faq-card.active{
	opacity: 1;
	font-size: 20px;
}

.faq-card .question{
	color: var(--darkgreen);
	font-size: 25px;
	font-weight: 500;
}

.chevron.bg-white{
	color: var(--blurple);
	border-radius: 80rem !important;
}

.chevron.btn-floating{
	width: 3.5rem !important;
	height: 3.5rem !important;
	border-radius: 150% !important;
}

.navbar-logo{
	font-size: 33px;
}

.navbar-links{
	font-size: 24px;
}

@media only screen and (max-width: 600px) {
	.navbar-logo, .navbar-links{
		font-size: 20px;
	}
}

.game-btn{
	display: flex;
	width: 100%;
	background: var(--elements-gradient);
	height: 33.333333%;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 9999px;
	font-size: 2.125rem;
	line-height: 1.75rem;
	color: #fff;
}

.game-btn.left{
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
}

.game-btn.right{
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem;
}

.green-card{
	background-color: #13b852;
	color: #fcf5ab;
	padding: 40px;
	border-radius: 10px;
}

.darkgreen-card{
	background-color: var(--darkgreen);
	color: var(--greenwhite);
	border-radius: 40px;
}

.darkgreen-card-body{
	padding: 40px;
}

.text-darkgreen{
	color: var(--darkgreen) !important;
}

.text-green-gradient{
	background: #23E76D;
	background: linear-gradient(to right, #23E76D 0%, #024F29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-dark-gradient{
	background: #242424;
	background: linear-gradient(to right, #242424 0%, #141414 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.btn-green{
	background-color: var(--lightgreen);
	padding: 12px 60px;
	font-weight: bold;
	font-size: 20px;
	border: none;
	border-radius: 7px;
	color: #002614;
}

.orange-card{
	background-color: #fe8001;
	color: #fcf5ab;
	padding: 65px 35px;
	border-radius: 10px;
}

.rounded-category{
	border-radius: 50px;
}

@media (min-width: 1px) {
	.col-game{
		width: 50% !important;
	}
}

@media (min-width: 768px) {
	.col-game{
		width: 33.3333333333% !important;
	}
}

@media (min-width: 992px) {
	.col-game{
		width: 16.6666666667% !important;
	}
}

@media (min-width: 1700px) {
	.col-game{
		width: 16.6666666667% !important;
	}
}

.landscape-only{
	display: none;
}

.portrait-only{
	display: block;
}

@media only screen and (max-width: 991px){
	@media (orientation: landscape){
		.col-game{
			width: 16.6666666667% !important;
		}
		.fs-game{
			font-size: 10px !important;
		}
		.rounded-category{
			border-radius: 25px !important;
		}
		.landscape-only{
			display: block;
		}
		.portrait-only{
			display: none;
		}
	}
}

.hero {
	position: relative;
	height: 96vh;
	width: 98%;
	margin: 2vh auto;
	min-height: 480px;
	border-radius: 24px;
	overflow: hidden;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
    height: 100%;
    border-radius: inherit;
}
.hero .hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: none;
    z-index: 0;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.hero-ui {
    z-index: 5;
}

@media (max-width: 767.98px) {
    .hero {
        min-height: 520px;
    }
}

#heroCarousel .carousel-indicators{
	gap:8px;
	margin: 0 !important;
	margin-bottom: 20px !important;
}

#heroCarousel .carousel-indicators [data-mdb-target]{
	border: none !important;
	width: 15px !important;
	height: 15px !important;
	border-radius:50% !important;
	background: rgba(255,255,255,.75) !important;
}

#heroCarousel .carousel-indicators .active{
	background:#fff;
}

.feedbacks-section{
	background-image: url('/img/home/feedbacks-section.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 98%;
	margin: 2vh auto;
}

.app-section{
	background: url('/img/home/app-section.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 98%;
	margin: 2vh auto;
}

.categories-section{
	background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('/img/home/burjarab.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top right;
	border-radius: 30px;
	width: 98%;
	margin: 2vh auto;
}

.helpways-section{
	/* background: url('/img/home/burjkhalifa.png'); */
	background-image: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)), url('/img/home/burjkhalifa.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	border-radius: 30px;
	width: 98%;
	margin: 2vh auto;
}

.museum-section{
	background: url('/img/home/museum.png');
	/* background-image: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)), url('/img/home/museum.png'); */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	border-radius: 30px;
	aspect-ratio: 2483 / 1161;
}

.museum-card{
	width: 650px;
	max-width: 98%;
	border-radius: 32px;
	color: #363735;
}

.bg-glass{
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(2px) saturate(160%);
	-webkit-backdrop-filter: blur(2px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/*
.glass-card {
  max-width: 650px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
  color: #363735;
}
*/
/*
.glass-card{
  position: relative;
  max-width: 700px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.glass-card::before{
  content: "";
  position: absolute; inset: 0;
  background: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;  
  border: 1px solid rgba(255,255,255,.18);  
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
*/

.categories-height{
	height: calc(100vh - var(--categories-height)) !important;
}

.question-height{
	height: calc(100vh - var(--question-height)) !important;
}

.dashboard-height{
	height: calc(100vh - var(--dashboard-height)) !important;
}

.bg-win{
	/* background-image: url('/img/game/win.png') !important; */
	background:linear-gradient(180deg, var(--blurple-rgb), rgba(0, 0, 0, 0.2)), url(/img/game/win.png);
	background-size: cover !important;
	background-position: center;
	background-repeat: no-repeat;
}

.win-height{
	height: calc(100vh - var(--win-height)) !important;
}

/*
.media-container {
	max-width: 60%;
	max-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-container img,
.media-container video {
	max-width: 100%;
	max-height: 100%;
}

@media only screen and (max-width: 960px){
	@media (orientation: landscape){
		.media-container {
			max-width: 60%;
			max-height: 150px;
		}
	}
}
*/

.media-container {
	display: inline-block;
}

.media-container img,
.media-container video {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 500px;
}

@media (max-width: 991px) and (orientation: landscape) {
	.media-container img,
	.media-container video {
		max-width: 60%;
		max-height: 200px;
	}
}

.landscape-btn{
	bottom: 0px;
	z-index: 3;
}

.landscape-btn.right {
	right: 20px;
}

.landscape-btn.left{
	left: 20px;
}

@media (max-width: 991px) and (orientation: landscape) {
	.landscape-btn {
		padding: 0 .5rem !important;
		font-size: 1.25rem !important;
		bottom: 16px !important;
	}
	.landscape-btn.right{
		right: 30px !important;
	}
	.landscape-btn-left{
		left: 30px !important;
	}
}

.toast-popup{
	background-color: var(--greenwhite);
	color: var(--darkgreen);
	border-top: 3px solid;
	border-radius: 13px;
}

.toast-popup.swal2-icon-error{
	border-color: var(--red);
	color: var(--red);
}

.toast-popup.swal2-icon-success{
	border-color: var(--green);
}

.toast-popup.swal2-icon-info{
	border-color: var(--bs-info);
	color: var(--bs-info);
}

.toast-popup.swal2-icon-warning{
	border-color: var(--bs-warning);
	color: var(--bs-warning);
}

.toast-title{
	font-size: 1.1rem;
	font-weight: bold;
}

.app-button {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	border: 2px solid var(--greenwhite) !important;
	border-radius: 9999px !important;
	background-color: var(--greenwhite) !important;
	padding: 0.625rem 1.5rem !important;
	text-align: center !important;
	color: var(--darkgreen) !important;
	outline: 0 !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.app-button:hover {
	background-color: transparent !important;
	color: var(--greenwhite) !important;
}

.app-button-dark{
	border: 2px solid var(--darkgreen) !important;
	background-color: var(--darkgreen) !important;
	color: var(--greenwhite) !important;
}

.app-button-dark:hover {
	color: var(--darkgreen) !important;
}

.app-button .icon {
	height: 1.5rem !important;
	width: 1.5rem !important;
}

.app-button .texts {
	margin-left: 1rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	line-height: 1 !important;
}

.app-button .texts .text-1 {
	margin-bottom: 0.25rem !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
}

.app-button .texts .text-2 {
	font-weight: 600 !important;
}

/* ramadan theme */

.bg-ramadan{
	background-image: url('../img/ramadan.svg');
	background-position: center top;
	background-repeat: repeat-x;
	background-size: cover;
}

.fanos-section {
    margin-top: -8%;
    position: relative;
    height: 0;
}

.bg-fanos {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 30%;
    height: 600px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 960px){
	.fanos-section {
		margin-top: -10%;
	}
	.bg-fanos {
		width: 50%;
		opacity: 0.6;
	}
}

.bg-fanos.left {
    left: 1%;
    background-image: url('../img/fanos-left.svg');
}

.bg-fanos.right {
    right: 1%;
    background-image: url('../img/fanos-right.svg');
}

/* plan games count title */

.plan-title{
	font-size: 140px;
	line-height: 1;
}

@media only screen and (max-width: 960px){
	.plan-title{
		font-size: 80px;
	}
}

.category{
	background-color: #fff !important;
	border-radius: 17px !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.category.category-hover:hover{
	transform: translate(-3px, -9px);
	box-shadow: 3px 9px 0 #000000, 15px 15px 20px rgba(64, 164, 122, 0.2);
}

.category.no-questions{
	opacity: 0.5;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.plan{
	border-radius: 20px !important;
	box-shadow: 6px 6px 0 #000000, 15px 15px 20px rgba(64, 164, 122, 0.2);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.plan.plan-hover:hover{
	transform: translate(-12px, -12px);
	box-shadow: 12px 12px 0 #000000, 15px 15px 20px rgba(64, 164, 122, 0.2);
}

.helpway{
	opacity: 0.2;
	transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.helpway:hover, .helpway.active{
	opacity: 1;
}

.bg-blur{
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.bg-blur.bg-blur-overlay{
	background-color: rgba(2, 79, 41, 0.4);
}

.placeholder-darkgreen::placeholder{
	color: var(--darkgreen);
	opacity: 0.7;
}

.placeholder-white::placeholder{
	color: var(--white);
	opacity: 0.9;
}

.center-absolute{
	left: 50%;
	transform: translateX(-50%);
}

.h-full{
	height: calc(100vh - var(--navbar-height)) !important;
}

.h-full-container{
	height: calc(100vh - var(--navbar-height-container)) !important;
}

.fade-mask{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	pointer-events: none;
	z-index: 3;
}

.fade-mask.top {
	top: 0;
	height: 60px;
	background: linear-gradient(to bottom, var(--darkgreen) 80%, transparent);
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.fade-mask.bottom {
	bottom: 0;
	height: 60px;
	background: linear-gradient(to top, var(--darkgreen) 80%, transparent);
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

.section-option{
	background-color: var(--blurple);
	padding: 8px 16px;
	color: var(--white);
	border-radius: 12px;
	cursor: pointer;
	opacity: 1;
	box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.75);
}

.section-option.active{
	background-color: var(--white);
	color: var(--blurple);
	cursor: not-allowed !important;
}

@media (min-width: 992px) {
	.section-option{
		background-color: transparent;
		padding: none;
		color: var(--blurple);
		border-radius: 0px;
		opacity: 0.3;
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
	}

	.section-option.active{
		background-color: transparent;
		opacity: 1;
	}
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar { 
    display: none;
}

@media (min-width: 992px) {
    .fs-lg-1 {
        font-size: 2.5rem !important;
    }
	.fs-lg-2 {
        font-size: 2rem !important;
    }
	.fs-lg-3 {
        font-size: 1.75rem !important;
    }
	.fs-lg-4 {
        font-size: 1.5rem !important;
    }
	.fs-lg-5 {
        font-size: 1.25rem !important;
    }
	.fs-lg-6 {
        font-size: 1rem !important;
    }
	.border-lg-5{
		border-width: 5px !important;
	}
}

.question-solved{
	text-decoration-line: line-through;
	text-decoration-thickness: 0.3rem;
	color: var(--darkgreen) !important;
	pointer-events: none;
	opacity: .65;
}

.team-categories{
	bottom: -30px;
	z-index: 5;
}

.team-categories.first{
	right: 20%;
	transform: translateX(-20%);
}

.team-categories.second{
	left: 20%;
	transform: translateX(-20%);
}

@media (max-width: 1700px){
	.team-categories.first{
		right: 10%;
		transform: translateX(-10%);
	}
	.team-categories.second{
		left: 10%;
		transform: translateX(-10%);
	}
}

@media (max-width: 1150px){
	.team-categories.first{
		right: 3%;
		transform: translateX(-3%);
	}
	.team-categories.second{
		left: 3%;
		transform: translateX(-3%);
	}
}

@media (max-width: 991px) and (orientation: portrait) {
	.team-categories{
		background-color: var(--greenwhite);
		border: 5px solid var(--darkgreen);
		bottom: 1px;
		border-radius: 17px 17px 0px 0px;
	}
	.team-categories.nofooter{
		bottom: 44px;
	}
	.team-categories.first{
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		padding-bottom: 7px;
	}
	.team-categories.second{
		left: 50%;
		transform: translateX(-50%);
		padding-bottom: 7px;
	}
}

/* border radiuses */

.rounded-x{
	border-radius: 25px !important;
}

.rounded-win{
	border-radius: 50px !important;
}

.rounded-global, .btn:not(.rounded-pill){
	border-radius: 17px !important;
}

.rounded-global-top{
	border-top-left-radius: 17px !important;
	border-top-right-radius: 17px !important;
}

.rounded-global-top-left{
	border-top-left-radius: 15px !important;
}

.rounded-global-top-right{
	border-top-right-radius: 15px !important;
}

.rounded-global-bottom{
	border-bottom-left-radius: 17px !important;
	border-bottom-right-radius: 17px !important;
}

.rounded-global-bottom-left{
	border-bottom-left-radius: 15px !important;
}

.rounded-global-bottom-right{
	border-bottom-right-radius: 15px !important;
}

.rounded-pill{
	border-radius: 50rem !important;
}

.rounded-1{
	border-radius: .2rem !important;
}

.rounded-2{
	border-radius: .25rem !important;
}

.rounded-3{
	border-radius: .3rem !important;
}

.rounded-4{
	border-radius: .5rem !important;
}

.text-ellipsis{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.qdot{
	width: 0.7vw;
	height: 0.7vw;
}

.qdot.easy{
	background-color: var(--level-easy);
}

.qdot.medium{
	background-color: var(--level-medium);
}

.qdot.hard{
	background-color: var(--level-hard);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background 0.4s ease;
	z-index: 1000;
}

body:has(.game-category-hover:hover)::before,
body:has(.game-category-hover:focus)::before,
body:has(.game-category-hover:focus-within)::before {
	background: rgba(0, 0, 0, 0.5);
}

.game-category-hover {
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}

.game-category-hover:hover,
.game-category-hover:focus,
.game-category-hover:focus-within {
	transform: scale(1.04);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
	z-index: 1001 !important;
}

.transition-wrapper {
	position: relative;
	overflow: hidden;
}

.qdots,
.question-grid {
	transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.5s ease;
	will-change: opacity, transform, max-height;
}

.qdots {
	opacity: 1;
	transform: translateY(0);
	max-height: 80px;
}

.question-grid {
	opacity: 0;
	transform: translateY(8px);
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.5s ease;
}

.game-category-hover:hover .qdots,
.game-category-hover:focus .qdots,
.game-category-hover:focus-within .qdots {
	opacity: 0;
	transform: translateY(-6px);
	max-height: 0;
	pointer-events: none;
}

.game-category-hover:hover .question-grid,
.game-category-hover:focus .question-grid,
.game-category-hover:focus-within .question-grid {
	opacity: 1;
	transform: translateY(0);
	max-height: 500px;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.qdots,
	.question-grid,
	.game-category-hover,
	body::before {
		transition: none !important;
	}
}

.rounded-points{
	border-radius: 200px 200px 0px 0px
}

.helpway-stack{
	position: relative;
	height: 100px;
	display: grid;
	place-items: center;
}

.help-card{
	position: absolute;
	width: 100px;
	transform-origin: center bottom;
	transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
	will-change: transform;
}

.help-card.is-left  { z-index: 1; transform: translate(-90px, -25px) rotate(-10deg); }
.help-card.is-mid   { z-index: 3; transform: translate(0px, -35px) rotate(0deg); }
.help-card.is-right { z-index: 2; transform: translate(90px, -25px) rotate(10deg); }

.helpway-stack:hover .help-card.is-left,
.helpway-stack:focus-within .help-card.is-left  { transform: translate(-125px, -25px) rotate(-15deg); }

.helpway-stack:hover .help-card.is-mid,
.helpway-stack:focus-within .help-card.is-mid   { transform: translate(0px, -55px) scale(1.04); }

.helpway-stack:hover .help-card.is-right,
.helpway-stack:focus-within .help-card.is-right { transform: translate(125px, -25px) rotate(15deg); }

.helpway-stack:hover .help-card.is-mid { box-shadow: 0 12px 30px rgba(0,0,0,.28); }

.helpway-stack-col{
	margin-top: 10px !important;
}

@media (min-width: 992px) {
	.help-card.is-left  { z-index: 1; transform: translateX(-90px) rotate(-10deg); }
	.help-card.is-mid   { z-index: 3; transform: translateY(-10px) rotate(0deg); }
	.help-card.is-right { z-index: 2; transform: translateX(90px) rotate(10deg); }
	
	.helpway-stack:hover .help-card.is-left,
	.helpway-stack:focus-within .help-card.is-left  { transform: translateX(-150px) rotate(-16deg); }
	
	.helpway-stack:hover .help-card.is-mid,
	.helpway-stack:focus-within .help-card.is-mid   { transform: translateY(-25px) scale(1.04); }
	
	.helpway-stack:hover .help-card.is-right,
	.helpway-stack:focus-within .help-card.is-right { transform: translateX(150px) rotate(16deg); }
	
	.bg-lg-transparent {
		background-color: transparent !important;
	}
	.w-lg-75{
		width: 75% !important;
	}
	.qdot{
		width: 0.6vw;
		height: 0.6vw;
	}
	.help-card{
		width: 160px;
	}
	.helpway-stack{
		height: 240px;
	}
	.helpway-stack-col{
		margin-top: -100px !important;
	}
}