:root {
	--flip-duration: 400ms;
}

.trifold-page {
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* height: calc(1700px / 3); */
	/* width: calc(733px / 3); */
	width: 733px;
	height: auto;
	max-height: 2500px;
	transition: transform ease-in-out var(--flip-duration);
	z-index: 1;
	cursor: pointer;
}

.trifold-page img {
	height: 100%;
	width: 100%;
}

#p1 {
	transform-origin: left;
	/* border-radius: 0 5px 5px 0; */
	left: 33.4%;
}

#p2 {
	transform-origin: right;
	/* border-radius: 5px 0 0 5px; */
	left: -33.3%;
}

#p3 {
	z-index: 0;
}

.trifold-page > div {
	position: absolute;
	display: flex;
	transition: z-index linear 0s;
	transition-delay: calc(var(--flip-duration) / 2);
}

.front {
	z-index: 10;
}

.back {
	z-index: 9;
	transform: rotateY(180deg);
}

.trifold-page.flipped,
#book.flipped .trifold-page {
	transform: rotateY(180deg);
}

#book.flipped .back {
	z-index: 9;
}

#book.flipped .front {
	z-index: 10;
}

.trifold-page.flipped > .back {
	z-index: 10;
}

.trifold-page.flipped > .front {
	z-index: 9;
}

#book.flipped #p3 {
	transform: rotateY(0deg);
}

#book.flipped #p3 > .back {
	z-index: 10;
}

#book.flipped #p3 > .front {
	z-index: 9;
}

.top {
	z-index: 2;
}

#book {
	user-select: none;
	display: flex;
	flex-direction: row;
	position: relative;
	width: fit-content;
	height: fit-content;
	/* transform-origin: center; */
	transition: transform ease-in-out var(--flip-duration);
	width: 100%;
	height: 100%;
	transform: scale(1);
	max-width: 1800px;
	margin: 0% 0 80%;
}

#book.flipped {
	transform: rotateY(180deg) scale(1);
}

/* Arabic simple flip styles */
.arabic-flip-container, .english-flip-container {
	perspective: 1000px;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	cursor: pointer;
}

.arabic-flip-card, .english-flip-card {
	position: relative;
	width: 100%;
	margin-top: 10%;
	margin-bottom: 10%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 aspect ratio - adjust based on your image ratio */
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.arabic-flip-container.flipped .arabic-flip-card,
.english-flip-container.flipped .english-flip-card {
	transform: rotateY(180deg);
}

.arabic-front,
.arabic-back,
.english-front,
.english-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arabic-front,
.english-front {
	z-index: 2;
}

.arabic-back,
.english-back {
	transform: rotateY(180deg);
	z-index: 1;
}

.arabic-front img,
.arabic-back img,
.english-front img,
.english-back img {
	width: 100%;
	height: auto;
	display: block;
}