:root {
	--primary-red: #ef4444;
	--text-white: #ffffff;
	--primary-green: #4ade80;
}

/* Language toggle button styling */
#languageToggle {
	font-weight: bold;
	transition: all 0.3s ease;
}

#languageToggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

@keyframes spinOuter {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(0.8);
		opacity: 1;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.3;
	}
}

@keyframes orbit {
	0% {
		transform: rotate(0deg) translateX(70px) rotate(0deg);
	}

	100% {
		transform: rotate(360deg) translateX(70px) rotate(-360deg);
	}
}

@keyframes colorShift {
	0% {
		color: #1a237e;
	}

	25% {
		color: #26a69a;
	}

	50% {
		color: #4db6ac;
	}

	75% {
		color: #81c784;
	}

	100% {
		color: #1a237e;
	}
}

@keyframes letterFloat {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

@keyframes dotBounce {
	0%, 100% {
		transform: scale(1) translateY(0);
		opacity: 0.7;
	}

	50% {
		transform: scale(1.3) translateY(-10px);
		opacity: 1;
	}
}

@keyframes floatParticle {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		transform: translateY(-100px) rotate(360deg);
		opacity: 0;
	}
}

@keyframes blink {
	0%,
    100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.7;
	}
}

@keyframes heartPulse {
	0%,
    100% {
		transform: scale(1);
		color: var(--text-white);
	}

	50% {
		transform: scale(1.1);
		color: var(--primary-red);
	}
}

@keyframes monitorBounce {
	0%,
    100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes monitorFloat {
	0%,
    100% {
		transform: translateY(0px);
	}

	33% {
		transform: translateY(-5px);
	}

	66% {
		transform: translateY(3px);
	}
}

@keyframes timeBlink {
	0%,
    90%,
    100% {
		opacity: 1;
	}

	95% {
		opacity: 0.5;
	}
}

/* Lazy loading classes - initially no background */
.page-1.lazy-bg, .page-2.lazy-bg, .page-3.lazy-bg,
.page-4.lazy-bg, .page-7.lazy-bg, .page-9.lazy-bg,
.page-10.lazy-bg, .page-13.lazy-bg, .page-19.lazy-bg {
	background-image: none;
	background-color: #F2EEEB; /* Light gray placeholder */
}

/* Mobile ≤640px */
@media (max-width: 640px) {
	.spinner-wrapper {
		width: 100px;
		height: 100px;
	}

	.orbit-container {
		width: 120px;
		height: 120px;
	}

	.loading-text {
		font-size: 16px;
	}

	.page-1 {
		background-size: 180% 100%;
		background-image: image-set(
            url("/custom_website/static/src/img/page_1/background-640.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_1/background-640.jpg") type("image/jpeg")
        );
	}

	.page-2 {
		background-size: 180% 100%;
		background-image: image-set(
            url("/custom_website/static/src/img/page_2/background-768.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_2/background-768.jpg") type("image/jpeg")
        );
	}

	.page-3 {
		background-size: 180% 100%;
		background-image: image-set(
            url("/custom_website/static/src/img/page_3/background-768.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_3/background-768.jpg") type("image/jpeg")
        );
	}

	.page-4, .page-7, .page-10, .page-9 {
		background-size: 180% 100%;
		background-image: image-set(
            url("/custom_website/static/src/img/background-640.avif") type("image/avif"),
            url("/custom_website/static/src/img/background-640.jpg") type("image/jpeg")
        );
	}

	.page-13 {
		background-size: 180% 100%;
		background-image: image-set(
            url("/custom_website/static/src/img/page_13/background-640.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_13/background-640.jpg") type("image/jpeg")
        );
	}

	.page-19 {
		background-size: 180% 100%;
		background-image: image-set(
            url("/custom_website/static/src/img/page_19/background-640.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_19/background-640.jpg") type("image/jpeg")
        );
	}

	.hover-card, .trainer_card {
		perspective: 800px;
	}

	.card__content {
		transform-style: preserve-3d;
	}

	.hover-card:hover .card__content, .trainer_card:hover .card__content {
		transform: rotateY(.5turn);
	}

	.card__front,
    .card__back {
		backface-visibility: hidden;
	}

	.card__back {
		transform: rotateY(.5turn);
	}
}

/* Small tablet ≤767px */
@media (min-width: 641px) and (max-width: 767px) {
	.page-1 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_1/background-768.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_1/background-768.jpg") type("image/jpeg")
        );
	}

	.page-2 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_2/background-1024.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_2/background-1024.jpg") type("image/jpeg")
        );
	}

	.page-3 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_3/background-1024.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_3/background-1024.jpg") type("image/jpeg")
        );
	}

	.page-4, .page-7, .page-10, .page-9 {
		background-image: image-set(
            url("/custom_website/static/src/img/background-768.avif") type("image/avif"),
            url("/custom_website/static/src/img/background-768.jpg") type("image/jpeg")
        );
	}

	.page-13 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_13/background-768.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_13/background-768.jpg") type("image/jpeg")
        );
	}

	.page-19 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_19/background-768.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_19/background-768.jpg") type("image/jpeg")
        );
	}

	.hover-card, .trainer_card {
		perspective: 800px;
	}

	.card__content {
		transform-style: preserve-3d;
	}

	.hover-card:hover .card__content, .trainer_card:hover .card__content {
		transform: rotateY(.5turn);
	}

	.card__front,
    .card__back {
		backface-visibility: hidden;
	}

	.card__back {
		transform: rotateY(.5turn);
	}
}

/* Tablet ≤1023px */
@media (min-width: 768px) and (max-width: 1023px) {
	.page-1 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_1/background-1024.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_1/background-1024.jpg") type("image/jpeg")
        );
	}

	.page-2 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_2/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_2/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-3 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_3/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_3/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-4, .page-7, .page-10, .page-9 {
		background-image: image-set(
            url("/custom_website/static/src/img/background-1024.avif") type("image/avif"),
            url("/custom_website/static/src/img/background-1024.jpg") type("image/jpeg")
        );
	}

	.page-13 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_13/background-1024.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_13/background-1024.jpg") type("image/jpeg")
        );
	}

	.page-19 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_19/background-1024.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_19/background-1024.jpg") type("image/jpeg")
        );
	}

}

/* Desktop ≤1920px */
@media (min-width: 1024px) and (max-width: 1920px) {
	.page-1 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_1/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_1/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-2 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_2/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_2/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-3 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_3/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_3/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-4, .page-7, .page-10, .page-9 {
		background-image: image-set(
            url("/custom_website/static/src/img/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-13 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_13/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_13/background-1920.jpg") type("image/jpeg")
        );
	}

	.page-19 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_19/background-1920.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_19/background-1920.jpg") type("image/jpeg")
        );
	}
}

/* Ultra-wide >1920px */
@media (min-width: 1921px) {
	.page-1 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_1/background-ultra.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_1/background-ultra.jpg") type("image/jpeg")
        );
	}

	.page-2 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_2/background-ultra.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_2/background-ultra.jpg") type("image/jpeg")
        );
	}

	.page-3 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_3/background-ultra.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_3/background-ultra.jpg") type("image/jpeg")
        );
	}

	.page-4, .page-7, .page-10, .page-9 {
		background-image: image-set(
            url("/custom_website/static/src/img/background-ultra.avif") type("image/avif"),
            url("/custom_website/static/src/img/background-ultra.jpg") type("image/jpeg")
        );
	}

	.page-13 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_13/background-ultra.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_13/background-ultra.jpg") type("image/jpeg")
        );
	}

	.page-19 {
		background-image: image-set(
            url("/custom_website/static/src/img/page_19/background-ultra.avif") type("image/avif"),
            url("/custom_website/static/src/img/page_19/background-ultra.jpg") type("image/jpeg")
        );
	}

	.hover-card, .trainer_card {
		perspective: 800px;
	}

	.card__content {
		transform-style: preserve-3d;
	}
    /* .hover-card:hover .card__content, .trainer_card:hover .card__content {transform: rotateY(.5turn);} */
	.card__front,
    .card__back {
		backface-visibility: hidden;
	}

	.card__back {
		transform: rotateY(.5turn);
	}
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: auto;
 /* important for ScrollTrigger to work */
	overscroll-behavior: none;
 /* prevent pull-to-refresh on mobile */
	-webkit-overflow-scrolling: touch;
	direction: ltr!important;
	text-align: left;
 /* smooth scrolling on iOS */;
}
/* Arabic font support - no layout changes */
html[lang="ar"] .card__back, html[lang="ar"] #about-us ul, html[lang="ar"] .arabic_lang {
	direction: rtl!important;
}
html[lang="ar"] .visionMission .card__back {
	direction: ltr;
}
html[lang="ar"], html[lang="ar"] body, html[lang="ar"] .arabic_text {
	text-align: right!important;
}


.bodyLoading {
	/* height: 100vh; */
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	overflow: "hidden";
}

#page-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.page-1 {
	background-size: 100% 100%;
}

.page-2 {
	background-size: cover;
	background-position: center 20%;
	background-repeat: no-repeat;
}

body {
	font-family: "Almarai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.header-height {
	height: 10vh;
}


.blink-dot {
	animation: blink 1s ease-in-out infinite;
}

.heart-pulse {
	animation: heartPulse 1s ease-in-out infinite;
}

.heart-monitor {
	animation: monitorBounce 2s ease-in-out infinite;
	animation-delay: 0s;
}

.workout-monitor {
	animation: monitorFloat 2.5s ease-in-out infinite;
	animation-delay: 0.7s;
	position: relative;
}

.time-blink {
	animation: timeBlink 2s ease-in-out infinite;
}

.heart-monitor:hover {
	cursor: pointer;
	border: 1px solid var(--primary-red);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.workout-monitor:hover {
	cursor: pointer;
	border: 1px solid var(--primary-green);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(74, 222, 128, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.heart-monitor:hover,
.workout-monitor:hover {
	animation-play-state: paused;
	transform: scale(1.2) translateY(-3px);
}

.about-box {
	background: #cce5e1;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
	width: 90svw;
	height: auto;
}

.page-3 {
	background-size: cover;
	background-position: center 15%;
	background-repeat: no-repeat;
}

.classes-box {
	background: #70809b !important;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: -20px 0 40px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
	width: 90svw;
	height: auto;
}

.page-4, .page-7, .page-10, .page-9 {
	background-size: cover;
}

.page-13 {
	background-size: cover;
}

.page-5 {
	background: linear-gradient(to bottom,
        #f2eeeb 50%,
        #d9cec5 50%
    );
}
/* Hiding Scroll */
.scroll-hidden::-webkit-scrollbar {
  display: none;
}
.scroll-hidden {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.page-19 {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.loader-container {
	text-align: center;
	position: relative;
}

/* Main spinner container */
.spinner-wrapper {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 40px;
}

/* Outer ring */
.spinner-ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 4px solid transparent;
	border-radius: 50%;
	animation: spinOuter 3s linear infinite;
}

.spinner-ring.ring-1 {
	border-top-color: #1a237e;
	animation-delay: 0s;
	filter: drop-shadow(0 0 10px rgba(26, 35, 126, 0.3));
}

.spinner-ring.ring-2 {
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	border-top-color: #26a69a;
	animation: spinOuter 2.5s linear infinite reverse;
	animation-delay: -0.5s;
	filter: drop-shadow(0 0 8px rgba(38, 166, 154, 0.3));
}

.spinner-ring.ring-3 {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	border-top-color: #4db6ac;
	animation: spinOuter 2s linear infinite;
	animation-delay: -1s;
	filter: drop-shadow(0 0 6px rgba(77, 182, 172, 0.3));
}

/* Inner pulsing circles */
.inner-circles {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
}

.pulse-circle {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: pulse 2s ease-in-out infinite;
}

.pulse-circle.circle-1 {
	background: radial-gradient(circle, rgba(26, 35, 126, 0.8), rgba(26, 35, 126, 0.2));
	animation-delay: 0s;
}

.pulse-circle.circle-2 {
	background: radial-gradient(circle, rgba(38, 166, 154, 0.6), rgba(38, 166, 154, 0.1));
	animation-delay: 0.7s;
}

.pulse-circle.circle-3 {
	background: radial-gradient(circle, rgba(129, 199, 132, 0.6), rgba(129, 199, 132, 0.1));
	animation-delay: 1.4s;
}

/* Orbiting dots */
.orbit-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140px;
	height: 140px;
}

.orbit-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	animation: orbit 4s linear infinite;
}

.orbit-dot.dot-1 {
	background: #1a237e;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 0s;
	box-shadow: 0 0 10px rgba(26, 35, 126, 0.5);
}

.orbit-dot.dot-2 {
	background: #26a69a;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	animation-delay: -1s;
	box-shadow: 0 0 10px rgba(38, 166, 154, 0.5);
}

.orbit-dot.dot-3 {
	background: #4db6ac;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: -2s;
	box-shadow: 0 0 10px rgba(77, 182, 172, 0.5);
}

.orbit-dot.dot-4 {
	background: #81c784;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	animation-delay: -3s;
	box-shadow: 0 0 10px rgba(129, 199, 132, 0.5);
}

/* Color changing loading text */
.loading-text {
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 3px;
	margin-top: 20px;
	animation: colorShift 4s ease-in-out infinite;
}

.loading-word {
	display: inline-block;
	animation: letterFloat 2s ease-in-out infinite;
}

.loading-word:nth-child(1) {
	animation-delay: 0s;
}

.loading-word:nth-child(2) {
	animation-delay: 0.1s;
}

.loading-word:nth-child(3) {
	animation-delay: 0.2s;
}

.loading-word:nth-child(4) {
	animation-delay: 0.3s;
}

.loading-word:nth-child(5) {
	animation-delay: 0.4s;
}

.loading-word:nth-child(6) {
	animation-delay: 0.5s;
}

.loading-word:nth-child(7) {
	animation-delay: 0.6s;
}

.dots {
	display: inline-block;
	margin-left: 5px;
}

.dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin: 0 2px;
	animation: dotBounce 1.5s ease-in-out infinite;
}

.dot:nth-child(1) {
	background: #1a237e;
	animation-delay: 0s;
}

.dot:nth-child(2) {
	background: #26a69a;
	animation-delay: 0.5s;
}

.dot:nth-child(3) {
	background: #81c784;
	animation-delay: 1s;
}

/* Background particles */
.particle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	animation: floatParticle 8s linear infinite;
}

.particle:nth-child(1) {
	width: 6px;
	height: 6px;
	background: rgba(26, 35, 126, 0.4);
	left: 10%;
	animation-delay: 0s;
	animation-duration: 6s;
}

.particle:nth-child(2) {
	width: 4px;
	height: 4px;
	background: rgba(38, 166, 154, 0.4);
	left: 20%;
	animation-delay: 2s;
	animation-duration: 8s;
}

.particle:nth-child(3) {
	width: 8px;
	height: 8px;
	background: rgba(129, 199, 132, 0.4);
	left: 80%;
	animation-delay: 4s;
	animation-duration: 7s;
}

.particle:nth-child(4) {
	width: 5px;
	height: 5px;
	background: rgba(77, 182, 172, 0.4);
	left: 90%;
	animation-delay: 1s;
	animation-duration: 9s;
}

.footerText {
	 display: -webkit-box;       /* Required for multiline truncation */
    -webkit-line-clamp: 1;      /* Number of lines to show */
    -webkit-box-orient: vertical;
	line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.text-white:hover, a.text-white:focus {
	color: rgb(74 222 128) !important
}