/* ===========================================================================
Imports
============================================================================*/



/* ===========================================================================
Twitter Bootstrap
============================================================================*/
html[lang="ar"] .list-inline-item:not(:last-child) {
	margin-left: .5rem;
    margin-right: unset;
}

@media(min-width: 992px) {
    .col-lg-20percent {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ===========================================================================
Common Styles for Sections
============================================================================*/
.row-section-heading h1 {
	color: #000;
	margin-bottom: 0;
}
.row-section-heading h5 {
	color: #6f6f6f;
	margin-bottom: 0;
	font-size: 18px;
	font-weight: 400 !important;
}

@media (max-width: 767.98px) {
	.row-section-heading h1 {
		font-size: 28px;
	}
	.row-section-heading h5 {
		font-size: 14px;
	}
}

/* ---------- section heading with leaf on both sides --------- */
.row-section-heading-with-leaf h1 {
	font-size: 28px;
	font-weight: 400 !important;
	color: var(--colorRed);
	margin: 0 auto;
	text-align: center;
}
@media (max-width: 767.98px) {
	.row-section-heading-with-leaf img {
		width: 26px;
	}
	.row-section-heading-with-leaf h1 {
		font-size: 16px;
	}
}
@media (max-width: 390px) {
	.row-section-heading-with-leaf img {
		width: 23px;
	}
	.row-section-heading-with-leaf h1 {
		font-size: 15px;
	}
}

/* ---------- Red background full width title + subtitles --------- */
.pag-top-banner {
	background: linear-gradient(0deg, #af1b18 0%, #e63946 100%);
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 20px 15px;
	flex-direction: column;
	gap: 10px;
}
.pag-top-banner h1 {
	color: white;
	font-size: 32px;
	text-align: center;
	margin-bottom: 0;
}
.pag-top-banner h5 {
	color: white;
	font-weight: 400 !important;
	font-size: 18px;
	text-align: center;
	margin-bottom: 0;
}
@media(max-width: 767.98px) {
	.pag-top-banner h1 {
		font-size: 24px;
	}
	.pag-top-banner h5 {
		font-size: 14px;
	}
}

/* ===========================================================================
Buttons
============================================================================*/
/* 4. Keyframes */
@keyframes shine-sweep {
	from { left: -100%; }
	to   { left: 100%; }
}
@keyframes shine-sweep-reverse {
	from { left: 100%; }
	to   { left: -100%; }
}
@keyframes shine-sweep-loop {
	0% { left: -100%; }
	43% { left: 100%; }
	100% { left: 100%; }
}

.btn {
	border-radius: 14px;
	padding: 0.5rem 1rem;
	border: none;
	font-weight: 500;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Effects and Animations (.btn-effects) */
.btn.btn-effects:hover {
	transform: scale(1.05);
}
.btn.btn-effects:active {
	transform: scale(1.02);
	transition: transform 0.1s ease;
}
.btn.btn-effects::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.4);
	opacity: 0;
	pointer-events: none;
}
.btn.btn-effects:hover::after {
	animation: shine-sweep 0.8s forwards;
	opacity: 1;
}
.btn.btn-effects:not(:hover)::after {
	animation: shine-sweep-reverse 0.8s forwards;
	opacity: 1;
}

/* Infinite shine animation (.btn-shine-loop) */
.btn.btn-effects.btn-shine-loop::after,
.btn.btn-effects.btn-shine-loop:hover::after {
	opacity: 1;
	animation: shine-sweep-loop 3.5s infinite linear;
}


/* 4. Keyframes */
/*@keyframes shine-sweep {*/
/*	from { left: -100px; }*/
/*	to   { left: 100%; }*/
/*}*/

/*@keyframes shine-sweep-reverse {*/
/*	from { left: 100%; }*/
/*	to   { left: -100px; }*/
/*}*/


/*.btn {*/
/*	border-radius: 14px;*/
/*	padding: 0.5rem 1rem;*/
/*	border: none;*/
/*	font-weight: 500;*/
/*	position: relative;*/
/*	overflow: hidden;*/
/*	transition: transform 0.2s ease, box-shadow 0.3s ease;*/
/*}*/

/* Effects and Animations (.btn-effects) */
/*.btn.btn-effects:hover {*/
/*	transform: scale(1.05);*/
/*}*/

/*.btn.btn-effects:active {*/
/*	transform: scale(1.02);*/
/*	transition: transform 0.1s ease;*/
/*}*/

/*.btn.btn-effects::after {*/
/*	content: "";*/
/*	position: absolute;*/
/*	top: 0;*/
/*	left: -100px;*/
/*	width: 100px;*/
/*	height: 100%;*/
/*	background: rgba(255, 255, 255, 0.4);*/
/*	opacity: 0;*/
/*}*/

/*.btn.btn-effects:hover::after {*/
/*	animation: shine-sweep 0.8s forwards;*/
/*	opacity: 1;*/
/*}*/

/*.btn.btn-effects:not(:hover)::after {*/
/*	animation: shine-sweep-reverse 0.8s forwards;*/
/*	opacity: 1;*/
/*}*/

/* sizes */
.btn-lg {
	padding: 0.85rem 1rem;
	font-size: 18px;
}
.btn-xxs {
	padding: 2px 12px;
	line-height: 1.3;
	font-size: 14px;
}
.btn-xxxs {
	padding: 2px 10px;
	line-height: 1.2;
	font-size: 13px;
}

/* .btn-red */
.btn-red {
	background-image: linear-gradient(
			to right,
			rgba(175, 27, 24, 1),
			rgba(230, 57, 70, 1)
	);
	color: white;
	box-shadow:
			0 4px 6px -4px rgba(175, 27, 24, 0.3),
			0 10px 15px -3px rgba(175, 27, 24, 0.3);
}

.btn-red:hover {
	color: white;
	background-image: linear-gradient(
			to left,
			rgba(175, 27, 24, 1),
			rgba(230, 57, 70, 1)
	);
}

.btn-red[disabled]:hover {
	background-image: linear-gradient(
			to right,
			rgba(175, 27, 24, 1),
			rgba(230, 57, 70, 1)
	);
	color: white;
	cursor: not-allowed;
}

.btn-red.btn-effects:hover {
	background-image: linear-gradient(
			to right,
			rgba(175, 27, 24, 1),
			rgba(230, 57, 70, 1)
	);
	box-shadow:
			0 6px 8px -4px rgba(175, 27, 24, 0.4),
			0 12px 18px -3px rgba(175, 27, 24, 0.4);
}

.btn-red.btn-effects:active {
	box-shadow:
			0 2px 4px -2px rgba(175, 27, 24, 0.2),
			0 8px 10px -2px rgba(175, 27, 24, 0.2);
}

/* .btn-outline-red */
.btn-outline-red {
	color: var(--colorRed);
	background-color: #fff;
	border: 2px solid var(--colorRed);
	transition: color 0.3s ease, background-color 0.2s ease;
}
.btn-outline-red:hover {
	color: #fff;
	background-image: linear-gradient(
			to right,
			rgba(175, 27, 24, 1),
			rgba(230, 57, 70, 1)
	);
	border: 2px solid transparent;
}

/* .btn-white */
.btn-white {
	color: #373737;
	background-color: #fffafa;
	border: 2px solid #eaeaed;
}
.btn-white:hover {
	color: #364153;
	background-color: #eaeaed;
	border: 2px solid #eaeaed;
}

/* .btn-outline-white */
.btn-outline-white {
	color: #373737;
	background-color: #fffdfb;
	border: 2px solid #eaecee;
}
.btn-outline-white:hover {
	color: #364153;
	background-color: #eaecee;
}


/* ---------- old button styles --------- */
.btn-primary {
	color: #fff;
	background-color: var(--colorBlue);
	border-color: var(--colorBlue);
}
.btn-primary:hover {
	color: #fff;
	background-color: var(--colorBlueLight);
	border-color: var(--colorBlueLight);
}

.btn-outline-primary {
	color: var(--colorBlue);
	border-color: var(--colorBlue);
}
.btn-outline-primary:hover {
	color: #fff;
	background-color: var(--colorBlueLight);
	border-color: var(--colorBlueLight);
}

.btn-outline-secondary {
	color: #4f4f4f;
	border: 1px solid #dfdfdf;
}

.btn-outline-violet {
	background-color: transparent;
	border-color: var(--colorViolet);
	color: var(--colorViolet);
}
.btn-outline-violet:hover {
	background-color: var(--colorViolet);
	color: white;
}

.btn-light {
	color: #364153;
	background-color: #e5e7eb;
	border-color: #e8e8e8;
}

.btn-gray {
	background-color: var(--colorGray);
	color: white;
}
.btn-gray:hover {
	background-color: black;
	color: white;
}

.btn-danger {
	color: #fff;
	background-color: red;
	border-color: red;
}

.btn-green {
	background: var(--colorGradientGreenToGreenDeep);
	color: white;
}
.btn-green:hover {
	background: var(--colorGradientGreenDeepToGreen);
	color: white;
}

.btn-info {
	background-color: #68ce9d;
	border-color: #68ce9d;
	color: white;
}
.btn-info:hover {
	background-color: #000;
	border-color: #000;
	color: white;
}

.btn-link {
	color: var(--colorGray);
	text-decoration: underline;
}
.btn-link:hover {
	color: black;
	text-decoration: none;
}

.btn-pre-amount {
	background-color: transparent;
	border: 1px solid #ced4da;
	color: #777777;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ===========================================================================
Nav (override bootstrap's default one)
============================================================================*/
.nav-pills.nav-justified .nav-item:not(:last-child) {
	margin-inline-end: 10px;
}
@media(max-width: 575.98px) {
	.nav-pills.nav-justified.flex-sm-row .nav-item:not(:last-child) {
		margin-inline-end: 0;
	}
}

.nav-pills .nav-link {
	background-color: #f3f4f6;
	color: #3e3e3e;
	transition: all 0.3s ease;
	border-radius: 8px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: #dc3545 !important;
	background: var(--colorGradientRedDeepToRed);
	color: #ffffff !important;
}

.nav-pills .nav-link:hover:not(.active) {
	background-color: #dee2e6;
	color: #212529;
}

/* ===========================================================================
Forms
============================================================================*/
.form-control:focus {
	color: black;
	background-color: #fff;
	border-color: black;
	box-shadow: 0 0 .5rem .2rem rgba(195, 146, 46, 0.25);
}

textarea{
	min-height: 120px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}

@media(max-width: 767.98px){
	.custom-select-lg {
		height: 40px;
		padding: 5px;
		font-size: 16px;
	}
	.form-control-lg {
		height: 40px;
		font-size: 16px;
		line-height: 16px;
	}
	.btn-group-lg > .btn, .btn-lg {
		font-size: 16px;
		padding: 0.7rem 1rem;
	}
	.b-sidebar .h5 {
		font-size: 17px;
	}
	.b-sidebar {
		font-size: 14px;
	}
	.b-sidebar .btn {
		font-size: 14px;
	}
}

/* ----- readonly/disabled ----- */
.form-control:disabled,
.form-control[readonly] {
	background-color: #e9ecef;
	color: rgb(73, 80, 87);
	opacity: 1;
	cursor: not-allowed;
}
.form-control:disabled:focus,
.form-control[readonly]:focus {
	color: rgb(73, 80, 87);
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	box-shadow: none;
}

/* input with icon inside */
.input-with-icon-wrapper {
	position: relative;
}
.input-with-icon-wrapper .icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: black;
}
html[lang="ar"] .input-with-icon-wrapper .icon {
	right: 15px;
    left: unset;
}
.input-with-icon-wrapper .input-with-icon {
	padding: 3px 10px 3px 40px;
}
html[lang="ar"] .input-with-icon-wrapper .input-with-icon {
	padding: 3px 40px 3px 10px;
}

/* ---------- input-style-icon-placeholder ---------- */
.input-style-icon-placeholder {
	position: relative;
	margin-top: 10px;
}
.input-style-icon-placeholder .form-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
html[lang="ar"] .input-style-icon-placeholder .form-icon {
	left: unset;
	right: 15px;
}
.input-style-icon-placeholder label {
	transition: 0.2s all ease;
	pointer-events: none;
	margin: 0;
	padding: 0;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	left: calc( 15px + 24px + 10px ); /* icon left value + icon width + space as wish */
}
html[lang="ar"] .input-style-icon-placeholder label {
	left: unset;
	right: calc( 15px + 24px + 10px ); /* icon right value in Ar + icon width + space as wish */
}

.input-style-icon-placeholder > input:focus{
	box-shadow: none;
}
html[lang="en"] .input-style-icon-placeholder > input{
	padding-left: calc( 15px + 24px + 10px ); /* icon left value + icon width + space as wish */
}
html[lang="ar"] .input-style-icon-placeholder > input{
	padding-right: calc( 15px + 24px + 10px ); /* icon right value in Ar + icon width + space as wish */
}

/*if user click or input value*/
.input-style-icon-placeholder:not(.empty) label{
	top: 0;
	font-size: 13px;
	transform: translateY(-65%);
	background-color: white;
	padding: 1px 5px;
}
.input-style-icon-placeholder > input:focus + .form-icon .icon {
	color: var(--colorBlue);
}

/* file upload*/
.input-style-icon-placeholder.input-style-icon-placeholder-file-upload label {
	font-size: 15px;
	color: gray;
	font-weight: bold;
}

/* pill style checkbox */
.checkbox-pill .checkbox-pill-input{
    display: none;
}
.checkbox-pill .checkbox-pill-label {
	margin: 0;
    display: inline-flex;
	padding: 5px 15px;
	font-size: 16px;
	border: 1px solid #e6e6e6;
	background-color: white;
	border-radius: 20px;
	min-width: 75px;
	align-items: center;
	justify-content: center;
	font-weight: normal;
	cursor: pointer;
}
.checkbox-pill .checkbox-pill-input:checked + .checkbox-pill-label {
	background-color: var(--colorRed);
	border-color: var(--colorRed);
	color: white;
}

/* phone input */
.iti {
    width: 100%;
}
.iti,
.iti * {
    direction: ltr !important;
    text-align: left !important;
}
.iti__arrow {
	margin-left: 5px !important;
}
.iti__selected-country {
	background: #f7f7f7;
	border-radius: 6px 0 0 6px;
}
.iti--inline-dropdown .iti__dropdown-content {
	z-index: 3;
}

/* ---------- Radio (Pill style) ---------- */
.radio-pill input[type="radio"] {
	display: none;
}
.radio-pill label {
	border: 1px solid #ced4da;
	border-radius: 20px;
	color: #777;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	font-size: 16px;
	padding: 5px 15px;
}
.radio-pill label:hover {
	border-color: var(--colorRed);
}
.radio-pill input[type="radio"]:checked + label {
	border-color: var(--colorRed);
	background-color: var(--colorRed);
	color: #fff;
}

.radio-pill.radio-pill-lg label {
	padding: 8px 15px;
	border-radius: 25px;
}


/* ===========================================================================
Payment Methods
============================================================================*/
.each-pay-method input[type="radio"]{
	display: none;
}

.each-pay-method label {
	padding: 15px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 16px;
	width: 100%;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 15px;
	color: black;
	border: 2px solid #e7e9ed;
	background: white;
}
html[lang="en"] .each-pay-method label {
	padding-right: 40px;
}
html[lang="ar"] .each-pay-method label {
	padding-left: 40px;
}
@media(max-width: 767.98px){
	.each-pay-method {
		min-height: 100px;
	}
}

.each-pay-method .pay-img-holder {
	position: relative;
	width: 60px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.each-pay-method .pay-img-holder .payment-method-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* selected */
.each-pay-method input[type="radio"]:checked + label,
.each-pay-method label.active {
	border: 2px solid #e43844;
	background: #f8e9e8;
}

.each-pay-method input[type="radio"]:checked + label::after,
.each-pay-method label.active::after {
	content: "\F26A";
	font-family: "bootstrap-icons";
	display: inline-flex;
	color: #e43844;
	font-size: 21px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
html[lang="en"] .each-pay-method input[type="radio"]:checked + label::after,
html[lang="en"] .each-pay-method label.active::after {
	right: 15px;
}
html[lang="ar"] .each-pay-method input[type="radio"]:checked + label::after,
html[lang="ar"] .each-pay-method label.active::after {
	left: 15px;
}


/* ===========================================================================
Breadcrumb
============================================================================*/
/* ----------- Page Breadcrumb ---------- */

/* ----------- Form Step Breadcrumb ---------- */
.steps-bcrumb-wrapper {
	background-color: white;
	color: #b4b4b4;
	font-size: 22px;
	font-weight: 600;
	padding: 7px 50px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.steps-bcrumb-wrapper .txt {
	display: flex;
	align-items: center;
}
html[lang="en"] .steps-bcrumb-wrapper .txt {
	padding-right: 5px;
}
html[lang="ar"] .steps-bcrumb-wrapper .txt {
	padding-left: 5px;
}
html[lang="en"] .steps-bcrumb-wrapper .icon {
	font-size: 21px;
	margin-left: -3px;
	margin-right: 5px;
}
html[lang="ar"] .steps-bcrumb-wrapper .icon {
	font-size: 21px;
	margin-right: -3px;
	margin-left: 5px;
}
.steps-bcrumb-wrapper hr {
	border-top: 2px solid #b4b4b4;
}
@media(max-width: 1199.98px){
	.steps-bcrumb-wrapper > .row {
		flex-direction: column;
		align-items: flex-start;
		padding: 10px 0;
	}
	.steps-bcrumb-wrapper hr {
		width: 2px;
		border-top: 40px solid #b4b4b4;
		margin: 0;
	}
	html[lang="en"] .steps-bcrumb-wrapper hr {
		margin-left: 7px;
	}
	html[lang="ar"] .steps-bcrumb-wrapper hr {
		margin-right: 7px;
	}
}
/* active step */
/* 1 */
.steps-bcrumb-wrapper[data-active-step="1"] .txt-step1 {
	color: var(--colorBlue);
}

/* 2 */
.steps-bcrumb-wrapper[data-active-step="2"] .txt-step1,
.steps-bcrumb-wrapper[data-active-step="2"] .txt-step2 {
	color: var(--colorBlue);
}
.steps-bcrumb-wrapper[data-active-step="2"] .divider-step2 hr {
	border-color: var(--colorBlue);
}

/* 3 */
.steps-bcrumb-wrapper[data-active-step="3"] .txt-step1,
.steps-bcrumb-wrapper[data-active-step="3"] .txt-step2,
.steps-bcrumb-wrapper[data-active-step="3"] .txt-step3 {
	color: var(--colorBlue);
}
.steps-bcrumb-wrapper[data-active-step="3"] .divider-step3 hr,
.steps-bcrumb-wrapper[data-active-step="3"] .divider-step2 hr {
	border-color: var(--colorBlue);
}


/* ===========================================================================
Offcanvas
============================================================================*/
/*
.b-sidebar {
    height: 100%;
}
.b-sidebar-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.02);
    border-radius: 6px;
    background-color: #F5F5F5;
}
.b-sidebar-body::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}
.b-sidebar-body::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: none;
    background-color: #ddd;
}
*/

@media(min-width: 500px){
	.b-sidebar {
		width: 400px;
	}
}

.b-sidebar > .b-sidebar-body {
	padding: .5rem 1rem;
    font-size: 14px;
}

.sidebar-cart img.img-fluid {
	width: 85px;
	font-size: 12px;
	display: inline-flex;
}

/* ===========================================================================
LightGallery => https://www.lightgalleryjs.com/
============================================================================*/
/* rtl fix*/
.lg-outer, .lg-outer * {
	direction: ltr;
}

/* ===========================================================================
Aldar Tabs
============================================================================*/
/* navs */
.aldar-tabs-navs {
	display: flex;
	align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.aldar-tabs-nav{
    margin-bottom: 10px;
}
html[lang="en"] .aldar-tabs-nav:not(:last-of-type){
    margin-right: 10px;
}
html[lang="ar"] .aldar-tabs-nav:not(:last-of-type){
    margin-left: 10px;
}

.aldar-tabs-nav.active {
	background: var(--colorGradientRedDeepToRed) !important;
	border: 2px solid #e63946 !important;
	outline: none !important;
	box-shadow: none !important;
	color: white !important;
}

/*contents*/
.aldar-tabs-content:not(.active) {
	display: none;
}

/* ===========================================================================
VideoBox
============================================================================*/
:root {
	--vb-primary-color: #c8102e;
	--vb-primary-hover: #a80d25;
	--vb-text-dark: #2d2d2d;
	--vb-text-muted: #6c757d;
	--vb-bg-white: #ffffff;
	--vb-border-color: #e9ecef;
	--vb-tag-bg: #f5f5f5;
	--vb-tag-text: #555555;
	--vb-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--vb-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
	--vb-radius: 16px;
	--vb-radius-sm: 8px;
	--vb-transition: all 0.3s ease;
}

/* Base Component Container */
.videobox {
	background-color: var(--vb-bg-white);
	border-radius: var(--vb-radius);
	box-shadow: var(--vb-shadow);
	overflow: hidden;
	transition: var(--vb-transition);
	width: 100%;
}

.videobox:hover {
	box-shadow: var(--vb-shadow-hover);
	transform: translateY(-4px);
}

/* Thumbnail Container */
.videobox .vb-thumbnail {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
}

.videobox .vb-thumbnail-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--vb-transition);
}

.videobox:hover .vb-thumbnail-img {
	transform: scale(1.05);
}

/* Dark Overlay on Hover */
.videobox .vb-thumbnail::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0);
	transition: var(--vb-transition);
	pointer-events: none;
}

.videobox:hover .vb-thumbnail::after {
	background-color: rgba(0, 0, 0, 0.25);
}

/* Duration Badge */
.videobox .vb-duration {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--vb-primary-color);
	color: #ffffff;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	z-index: 2;
	line-height: 1;
	pointer-events: none;
}

.videobox .vb-duration i {
	font-size: 12px;
}

/* Play Button Overlay */
.videobox .vb-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 64px;
	height: 64px;
	background-color: var(--vb-primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 32px;
	z-index: 3;
	opacity: 0;
	transition: var(--vb-transition);
	cursor: pointer;
	border: none;
	box-shadow: 0 4px 16px rgba(200, 16, 46, 0.4);
}

.videobox .vb-play-btn i {
	margin-inline-start: 4px;
}

.videobox:hover .vb-play-btn {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.videobox .vb-play-btn:hover {
	background-color: var(--vb-primary-hover);
	transform: translate(-50%, -50%) scale(1.1);
}

@media (pointer: coarse) and (hover: none) {
	.videobox .vb-play-btn {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

/* Content Container */
.videobox .vb-content {
	padding: 20px;
}

/* Title */
.videobox .vb-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--vb-primary-color);
	margin-block-end: 8px;
	line-height: 1.4;
}

/* Subtitle / Description */
.videobox .vb-subtitle {
	font-size: 14px;
	font-weight: 500;
	color: var(--vb-text-dark);
	margin-block-end: 14px;
	line-height: 1.5;
}

/* Tags Container */
.videobox .vb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 16px;
}

.videobox .vb-tag {
	display: inline-block;
	background-color: var(--vb-tag-bg);
	color: var(--vb-tag-text);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	transition: var(--vb-transition);
}

.videobox .vb-tag:hover {
	background-color: #e8e8e8;
}

/* Meta Info Row */
.videobox .vb-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 12px;
	border-block-start: 1px solid var(--vb-border-color);
	margin-block-end: 16px;
}

.videobox .vb-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--vb-text-muted);
}

.videobox .vb-meta-item i {
	font-size: 14px;
	color: var(--vb-text-muted);
}

/* Share Button */
.videobox .share-btns-holder {
	border: 1px solid #eee;
	padding: 10px 20px;
	border-radius: 30px;
	display: flex;
}

/* ----- responsive adjustments ----- */
@media (max-width: 1199.98px) {
	.videobox .vb-title {
		font-size: 17px;
	}
}

@media (max-width: 991.98px) {
	.videobox .vb-content {
		padding: 18px;
	}

	.videobox .vb-title {
		font-size: 16px;
	}

	.videobox .vb-subtitle {
		font-size: 13px;
	}

	.videobox .vb-play-btn {
		width: 56px;
		height: 56px;
		font-size: 20px;
	}
}

@media (max-width: 767.98px) {
	.videobox .vb-content {
		padding: 16px;
	}

	.videobox .vb-title {
		font-size: 16px;
		margin-block-end: 6px;
	}

	.videobox .vb-subtitle {
		font-size: 13px;
		margin-block-end: 12px;
	}

	.videobox .vb-tags {
		gap: 6px;
		margin-block-end: 14px;
	}

	.videobox .vb-tag {
		padding: 5px 12px;
		font-size: 11px;
	}

	.videobox .vb-meta {
		padding-block: 10px;
		margin-block-end: 5px;
	}

	.videobox .vb-meta-item {
		font-size: 12px;
	}

	.videobox .vb-share-btn {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.videobox .vb-watch-btn {
		padding: 10px 20px;
		font-size: 14px;
	}

	.videobox .vb-duration {
		padding: 5px 10px;
		font-size: 12px;
	}

	.videobox .vb-play-btn {
		width: 52px;
		height: 52px;
		font-size: 24px;
	}
}

@media (max-width: 575.98px) {
	.videobox .vb-content {
		padding: 14px;
	}

	.videobox .vb-title {
		font-size: 15px;
	}

	.videobox .vb-subtitle {
		font-size: 12px;
	}

	.videobox .vb-meta-item {
		font-size: 11px;
		gap: 4px;
	}

	.videobox .vb-share-btn {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}

	.videobox .vb-watch-btn {
		padding: 10px 16px;
		font-size: 13px;
	}

	.videobox .vb-play-btn {
		width: 48px;
		height: 48px;
		font-size: 24px;
	}
}


/* ----- Videobox player modal ----- */
/*
	=> include the modal (from bootstrap-vue) markup at the bottom of the page. one modal for all videoboxes in a page.
	=> include the script
*/
#videoBoxPlayerModal .close {
	color: white;
}
@media (max-width: 767.98px) {
	#videoBoxPlayerModal h5.modal-title {
		font-size: 16px;
	}
}


/* ===========================================================================
VideoBox Minimal
============================================================================*/
.videobox-mini {
	display: flex;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16/9;
	cursor: pointer;
}
.videobox-mini .thumbnail {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s linear;
}
.videobox-mini:hover .thumbnail {
	transform: scale(1.05) rotate(1deg);
}
.videobox-mini .caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	padding: 15px 25px;
	color: white;
	background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	opacity: 0;
	transition: opacity 0.2s linear;
}
.videobox-mini:hover .caption {
	opacity: 1;
}
.videobox-mini .caption h3 {
	font-size: 21px;
	margin-bottom: 3px;
}
.videobox-mini .caption p {
	font-size: 14px;
	color: #bdbdbd;
	margin-bottom: 0;
}

.videobox-mini .video-duration {
	position: absolute;
	left: 15px;
	top: 10px;
	background: black;
	color: white;
	padding: 3px 12px;
	font-size: 14px;
	border-radius: 14px;
	line-height: 1.3;
	font-family: "Ubuntu", sans-serif !important;
	box-shadow: 0 0 5px 5px rgba(255,255,255,0.2);
}
html[lang="ar"] .videobox-mini .video-duration {
	right: 15px;
	left: unset;
}

.videobox-mini .btn-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 55px;
	height: 55px;
	background: rgba(255,255,255,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(185, 185, 185, 0.4);
	backdrop-filter: blur(3px);
	border: 4px solid rgba(255,255,255,0.2);
	color: white;
	transition: all 0.3s ease;
}
.videobox-mini .btn-play .bi {
	margin-left: 5px;
}
.videobox-mini:hover .btn-play {
	background: #c0392b;
	transform: translate(-50%,-50%) scale(1.2);
	box-shadow: 0 12px 32px rgba(231, 76, 60, 0.5);
}


/* ----- responsive ----- */
@media(max-width: 767.98px) {
	.videobox-mini .caption {
		padding: 10px 15px;
		background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 100%);
	}
	.videobox-mini .caption h3 {
		font-size: 18px;
	}
	.videobox-mini .caption p {
		font-size: 13px;
	}
}
/* touch devices */
@media (pointer: coarse) and (hover: none) {
	.videobox-mini .caption {
		opacity: 1 !important;
	}
}

/* ===========================================================================
PdfBox
============================================================================*/
.pdfbox {
	--pdfbox-primary: #c41e3a;
	--pdfbox-primary-hover: #a31830;
	--pdfbox-icon-bg: #fdf2f4;
	--pdfbox-icon-color: #e85a6b;
	--pdfbox-card-bg: #ffffff;
	--pdfbox-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	--pdfbox-card-radius: 16px;
	--pdfbox-badge-radius: 16px;
	--pdfbox-btn-radius: 10px;
	--pdfbox-text-color: #c41e3a;
	--pdfbox-badge-bg: #f5f5f5;
	--pdfbox-badge-text: #666666;
	--pdfbox-transition: all 0.3s ease;
}

/* Main Container */
.pdfbox {
	display: flex;
	justify-content: center;
}

/* Card */
.pdfbox .pdfbox__card {
	background-color: var(--pdfbox-card-bg);
	border-radius: var(--pdfbox-card-radius);
	box-shadow: var(--pdfbox-card-shadow);
	padding: 25px 20px 20px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: var(--pdfbox-transition);
}

.pdfbox .pdfbox__card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* Header with Badges */
.pdfbox .pdfbox__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	z-index: 5;
	margin-bottom: -35px;
	padding: 0 10px;
}

/* Badges */
.pdfbox .pdfbox__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.75rem;
	border-radius: var(--pdfbox-badge-radius);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pdfbox .pdfbox__badge--type {
	background-color: var(--pdfbox-primary);
	color: #ffffff;
}

.pdfbox .pdfbox__badge--size {
	background-color: var(--pdfbox-badge-bg);
	color: var(--pdfbox-badge-text);
}

/* Icon Wrapper */
.pdfbox .pdfbox__icon-wrapper {
	background-color: var(--pdfbox-icon-bg);
	border-radius: 12px;
	padding: 2rem 3rem;
	margin-block-end: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Icon */
.pdfbox .pdfbox__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdfbox .pdfbox__icon i {
	font-size: 3.5rem;
	color: var(--pdfbox-icon-color);
}

/* Title */
.pdfbox .pdfbox__title {
	color: var(--pdfbox-text-color);
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	margin-block-end: 1rem;
	text-align: center;
	line-height: 1.4;
	min-height: 45px;
}

/* ---------- Responsive fixes ---------- */
@media (max-width: 1199.98px) {
	.pdfbox .pdfbox__icon-wrapper {
		padding: 1.75rem 2.5rem;
	}

	.pdfbox .pdfbox__icon i {
		font-size: 3rem;
	}
}

@media (max-width: 991.98px) {
	.pdfbox .pdfbox__icon-wrapper {
		padding: 1.5rem 2rem;
	}

	.pdfbox .pdfbox__icon i {
		font-size: 2.75rem;
	}

	.pdfbox .pdfbox__title {
		font-size: 0.95rem;
	}
}

@media (max-width: 767.98px) {
	.pdfbox .pdfbox__badge {
		padding: 0.3rem 0.6rem;
		font-size: 0.7rem;
	}

	.pdfbox .pdfbox__icon-wrapper {
		padding: 1.25rem 1.75rem;
		margin-block-end: 0.75rem;
	}

	.pdfbox .pdfbox__icon i {
		font-size: 2.5rem;
	}

	.pdfbox .pdfbox__title {
		font-size: 0.9rem;
		margin-block-end: 0.75rem;
	}
	.pdfbox .btn.btn-red {
		font-size: 14px;
	}
}

@media (max-width: 575.98px) {
	.pdfbox .pdfbox__card {
		max-width: 100%;
		padding: 1rem;
	}

	.pdfbox .pdfbox__header {
		margin-bottom: -30px;
	}

	.pdfbox .pdfbox__badge {
		padding: 0.25rem 0.5rem;
		font-size: 0.65rem;
		border-radius: 6px;
	}

	.pdfbox .pdfbox__icon-wrapper {
		padding: 1.25rem 1.5rem;
		border-radius: 10px;
	}

	.pdfbox .pdfbox__icon i {
		font-size: 2.25rem;
	}

	.pdfbox .pdfbox__title {
		font-size: 0.875rem;
	}
}


/* ===========================================================================
Slick Sliders
============================================================================*/
.slick-common-styles .slick-prev, .slick-common-styles .slick-next {
	background: linear-gradient(to top, #e63946, #af1b18);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.slick-common-styles .slick-prev:hover, .slick-common-styles .slick-next:hover {
	background: linear-gradient(to bottom, #e63946, #af1b18);
}

html[lang="en"] .slick-common-styles .slick-next {
	right: 0;
	transform: translate(100%, -50%);
}
html[lang="en"] .slick-common-styles .slick-prev {
	left: 0;
	transform: translate(-100%, -50%);
}
html[lang="ar"] .slick-common-styles .slick-next {
	right: auto;
	left: 0;
	transform: translate(-100%, -50%);
}
html[lang="ar"] .slick-common-styles .slick-prev {
	left: auto;
	right: 0;
	transform: translate(100%, -50%);
}
.slick-common-styles .slick-prev::before,
.slick-common-styles .slick-next::before {
	font-family: 'bootstrap-icons';
	font-size: 18px;
	line-height: 1;
	opacity: 1;
	color: #fff;
}
html[lang="ar"] .slick-common-styles .slick-prev::before,
html[lang="ar"] .slick-common-styles .slick-next::before {
	transform: scaleX(-1);
}
.slick-common-styles .slick-next::before {
	 content: "\F285"; 
}
.slick-common-styles .slick-prev::before {
	 content: "\F284"; 
}

.slick-common-styles .slick-arrow.slick-disabled {
	opacity: 0;
    pointer-events: none;
}

/* dots */
.slick-common-styles .slick-dots {
	bottom: -35px;
}
.slick-common-styles .slick-dots li button::before {
    display: none;
}
.slick-common-styles .slick-dots li {
	width: unset;
	height: unset;
}
.slick-common-styles .slick-dots li button {
	background: #f0e1de;
	height: 10px;
	padding: 0;
	border-radius: 5px;
	width: 30px;
    transition: all 0.5s ease;
}
.slick-common-styles .slick-dots li.slick-active button {
	background: var(--colorRed);
	width: 90px;
}

/* fix broken flash */
.slick-fix-broken-flash {
	display: none;
}
.slick-fix-broken-flash.slick-initialized {
	display: block;
}

/* for touch devices, no slick, use browser overflow styles */
@media (pointer: coarse) {
    .no-slider-on-touch-device {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .no-slider-on-touch-device::-webkit-scrollbar {
        display: none;
    }
    .no-slider-on-touch-device::-webkit-scrollbar-track {
        display: none;
    }
    .no-slider-on-touch-device::-webkit-scrollbar-thumb {
        display: none;
    }
    .no-slider-on-touch-device::-webkit-scrollbar-thumb:hover {
        display: none;
    }
}

@media (pointer: coarse) and (min-width: 1200px) {
    .slick-common-config .each-item {
        flex: 0 0 400px;
        max-width: 400px;
    }
}
@media (pointer: coarse) and (max-width: 1199.98px) {
    .slick-common-config .each-item {
        flex: 0 0 350px;
        max-width: 350px;
    }
}
@media (pointer: coarse) and (max-width: 499.98px) {
    .slick-common-config .each-item {
        flex: 0 0 300px;
        max-width: 300px;
    }
}

/* ===========================================================================
Progressbar
============================================================================*/
.progressbar {
	margin: 0;
}
.percentCount {
	display: none;
}

.progressbar-holder{
    position: relative;
}

.progress-count {
	font-size: 14px;
	font-weight: bold;
	color: var(--colorRed);
	font-family: sans-serif;
}

.proggress {
	background: linear-gradient(to right, #b52b28, #e74550);
}
html[lang="ar"] .proggress {
	background: linear-gradient(to left, #b52b28, #e74550);
}

/* ===========================================================================
Badges
============================================================================*/
/* ---------- Status level (Bronze/Silver/Gold/Diamond) badges ---------- */
.badge-donor-level {
	background: #f4f4f4;
	border: 1px solid #e8e8e8;
	padding: 10px 15px;
	border-radius: 12px;
	display: flex;
	gap: 15px;
	align-items: center;
}
.badge-donor-level .icon {
	font-size: 20px;
}
.badge-donor-level .txt {
	display: flex;
	flex-direction: column;
}
.badge-donor-level .txt label {
	margin-bottom: 0;
	font-size: 13px;
	color: #757575;
}

.badge-donor-level.bronze .bi:not(.color-bronze) { display: none; }
.badge-donor-level.silver .bi:not(.color-silver) { display: none; }
.badge-donor-level.gold .bi:not(.color-gold) { display: none; }
.badge-donor-level.diamond .bi:not(.color-diamond) { display: none; }

.badge-donor-level.bronze {
	background: #f7e7da;
	border: 1px solid #e9c4a1;
}
.badge-donor-level.silver {
	background: #f7f7f7;
	border: 1px solid #dfdfdf;
}
.badge-donor-level.gold {
	background: #fff9d8;
	border: 1px solid #ffe686;
}
.badge-donor-level.diamond {
	background: #f1fffa;
	border: 1px solid #c4e0e1;
}

/*
<div class="badge-donor-level bronze">
                        <div class="icon">
                            <i class="bi bi-award-fill color-bronze"></i>
                            <i class="bi bi-star-fill color-silver"></i>
                            <i class="bi bi-trophy-fill color-gold"></i>
                            <i class="bi bi-gem color-diamond"></i>
                        </div>
                        <div class="txt">
                            <label>Current  Level</label>
                            <span class="name">Bronze</span>
                        </div>
                    </div>
*/


/* -------------------- Site's custom badges -------------------- */
.badge {
	display: inline-block;
	padding: 0.4em 0.6em;
	font-size: 75%;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Fix for links formatted as badges */
a.badge:hover, a.badge:focus {
	text-decoration: none;
}

.badge-pill {
	padding-right: 0.7em;
	padding-left: 0.7em;
	border-radius: 10rem;
}


/* Primary */
.badge-primary {
	color: #fff;
	background-color: var(--colorRed);
}
a.badge-primary:hover, a.badge-primary:focus {
	color: #fff;
	background-color: var(--colorRed);
}
/* Secondary */
.badge-secondary {
	color: #575757;
	background-color: #dfdfdf;
}
a.badge-secondary:hover, a.badge-secondary:focus {
	color: #575757;
	background-color: #dfdfdf;
}
/* Success */
.badge-success {
	color: white;
	background-color: #00c950;
}
a.badge-success:hover, a.badge-success:focus {
	color: white;
	background-color: green;
}
/* Danger */
.badge-danger {
	color: #fff;
	background-color: #dc3545;
}
a.badge-danger:hover, a.badge-danger:focus {
	color: #fff;
	background-color: #bd2130;
}
/* Warning */
.badge-warning {
	color: #212529;
	background-color: #ffc107;
}
a.badge-warning:hover, a.badge-warning:focus {
	color: #212529;
	background-color: #d39e00;
}
/* Info */
.badge-info {
	color: #1447e6;
	background-color: #d1e5ff;
}
a.badge-info:hover, a.badge-info:focus {
	color: #1447e6;
	background-color: #d1e5ff;
}
/* Light */
.badge-light {
	color: #212529;
	background-color: #f8f9fa;
}
a.badge-light:hover, a.badge-light:focus {
	color: #212529;
	background-color: #dae0e5;
}
/* Dark */
.badge-dark {
	color: #fff;
	background-color: #343a40;
}
a.badge-dark:hover, a.badge-dark:focus {
	color: #fff;
	background-color: #1d2124;
}



/* ===========================================================================
Progressbar Half Circle
============================================================================*/
/*.progress-half-circle {*/
/*	position: relative;*/
/*	margin: 4px;*/
/*	float: left;*/
/*	text-align: center;*/
/*	font-size: 36px;*/
/*	font-weight: bold;*/
/*	color: #2a7be4;*/
/*}*/

/*.progress-half-circle .barOverflow { !* Wraps the rotating .bar *!*/
/*    position: relative;*/
/*    overflow: hidden; !* Comment this line to understand the trick *!*/
/*    width: 180px;*/
/*    height: 90px; !* Half circle (overflow) *!*/
/*    margin-bottom: -55px; !* bring the numbers up *!*/
/*}*/

/*.progress-half-circle .bar {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 180px;*/
/*    height: 180px; !* full circle! *!*/
/*    border-radius: 50%;*/
/*    box-sizing: border-box;*/
/*    border: 15px solid #eeeeee; !* half gray, *!*/
/*    border-bottom-color: #2a7be4; !* half azure *!*/
/*    border-right-color: #2a7be4;*/
/*}*/

/*!* page specific css override *!*/
/*.homepage-pr-with-details-1 .row-half-circle-stat {*/
/*    font-weight: bold;*/
/*	font-size: 15px;*/
/*	width: 220px;*/
/*    line-height: 20px;*/
/*    margin: 0 auto;*/
/*}*/

/* ===========================================================================
Accordion (product details page accordion is not this one)
============================================================================*/
.accordion-common .acc-item {
	background: linear-gradient(135deg, var(--aboutus-bg-gradient-start) 0%, var(--aboutus-bg-gradient-end) 100%);
	border-radius: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid #fff;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.05);
}

.accordion-common .acc-item:hover {
	border-color: rgba(120, 120, 120, 0.5);
}

.accordion-common .acc-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25px 24px;
	cursor: pointer;
	user-select: none;
}

.accordion-common .acc-question-text {
	color: #1a1919;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	flex: 1;
}
.accordion-common .acc-question-text .bi {
	color: var(--colorRed);
}
.product-details-finished .accordion-common .acc-question-text .bi {
	color: var(--colorGreen);
}
.accordion-common .active .acc-question-text {
	color: var(--colorRed);
}
.product-details-finished .accordion-common .active .acc-question-text {
	color: var(--colorGreen);
}

.accordion-common .acc-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20px;
	transition: transform 0.3s ease;
}
html[lang="ar"] .accordion-common .acc-icon {
	transform: rotate(180deg);
}

.accordion-common .acc-icon svg {
	width: 25px;
	height: 25px;
	stroke: #4f4d4d;
	stroke-width: 2;
	fill: none;
}

.accordion-common .acc-item.active .acc-icon {
	transform: rotate(90deg);
}

.accordion-common .acc-item.active .acc-icon svg {
	stroke: #e51e1e;
}
.product-details-finished .accordion-common .acc-item.active .acc-icon svg {
	stroke: var(--colorGreen);
}

.accordion-common .acc-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-common .acc-item.active .acc-answer {
	max-height: unset;
}

.accordion-common .acc-answer-content {
	padding: 0 24px 20px 24px;
	color: #4f4f4f;
	font-size: 15px;
	line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.accordion-common {
		padding: 20px 0;
	}

	.accordion-common .acc-question {
		padding: 16px 18px;
	}

	.accordion-common .acc-question-text {
		font-size: 16px;
	}

	.accordion-common .acc-answer-content {
		padding: 0 18px 16px 18px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.accordion-common .acc-question {
		padding: 14px 16px;
	}

	.accordion-common .acc-question-text {
		font-size: 16px;
	}

	.accordion-common .acc-icon {
		margin-left: 12px;
	}

	.accordion-common .acc-icon svg {
		width: 16px;
		height: 16px;
	}
}


/* ===========================================================================
Bootstrap Touchspin
============================================================================*/
html[lang="en"] .bootstrap-touchspin .bootstrap-touchspin-up {
	border-left: 0;
}
html[lang="en"] .bootstrap-touchspin .bootstrap-touchspin-down {
	border-right: 0;
}
html[lang="ar"] .bootstrap-touchspin .bootstrap-touchspin-up {
	border-right: 0;
}
html[lang="ar"] .bootstrap-touchspin .bootstrap-touchspin-down {
	border-left: 0;
}

.bootstrap-touchspin input {
	height: 48px;
    max-width: 150px;
	border: 1px solid #eee;
    border-radius: 0 !important;
	background-color: white;
	color: #575757;
	font-weight: bold;
	font-size: 18px;
	box-shadow: none;
	text-align: center;
    padding: 8px 2px;
}
.bootstrap-touchspin input:hover,
.bootstrap-touchspin input:focus{
	box-shadow: 1px 1px 15px #dbdbdb !important;
}
.bootstrap-touchspin input[disabled="disabled"]{
	cursor: not-allowed;
}

/* ===========================================================================
Spinner
============================================================================*/
/*.spinner-common .input-group input {*/
/*	height: 38px;*/
/*	border: 1px solid #ced4da;*/
/*	border-radius: 0 !important;*/
/*	background-color: white;*/
/*	color: black;*/
/*	font-weight: bold;*/
/*	font-size: 18px;*/
/*	box-shadow: none;*/
/*	text-align: center;*/
/*}*/
/*.spinner-common .input-group .btn {*/
/*	height: 38px;*/
/*    min-width: 38px;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	font-size: 18px;*/
/*	border-color: #ced4da;*/
/*	font-weight: bold;*/
/*	color: black;*/
/*}*/
/*.spinner-common .input-group .btn:hover {*/
/*	color: white;*/
/*}*/


/* ===========================================================================
Project Money Box
============================================================================*/
/*.project-money-box {*/
/*	padding: 10px;*/
/*	border-radius: 10px;*/
/*	text-align: center;*/
/*	border: 1px solid #d5d5d5;*/
/*}*/
/*@media(max-width: 767.98px){*/
/*	.project-money-box {*/
/*        padding: 15px 10px;*/
/*        border-radius: 8px;*/
/*    }*/
/*}*/
/*.project-money-box .pm-stat-single {*/
/*	padding-left: 8px;*/
/*	padding-right: 8px;*/
/*}*/
/*@media(max-width: 767.98px){*/
/*    .project-money-box .pm-stat-single:not(:last-of-type) {*/
/*        border-bottom: 1px solid #eaeaea;*/
/*    }*/
/*}*/
/*@media(min-width: 768px){*/
/*	html[lang="en"] .project-money-box .pm-stat-single:not(:last-of-type) {*/
/*		border-right: 1px solid #d5d5d5;*/
/*	}*/
/*	html[lang="ar"] .project-money-box .pm-stat-single:not(:last-of-type) {*/
/*		border-left: 1px solid #d5d5d5;*/
/*	}*/
/*}*/
/*.project-money-box p {*/
/*	text-align: center;*/
/*	color: #686868;*/
/*	margin: 0;*/
/*	font-size: 16px;*/
/*	white-space: nowrap;*/
/*}*/
/*.project-money-box p:first-of-type {*/
/*	color: #898989;*/
/*	font-size: 16px;*/
/*	font-weight: 400;*/
/*}*/
/*.project-money-box p:first-of-type + p {*/
/*	font-size: 20px;*/
/*    color: var(--colorGray);*/
/*}*/
/*@media(max-width: 767.98px){*/
/*    .project-money-box p:first-of-type {*/
/*        font-size: 15px;*/
/*    }*/
/*    .project-money-box p:first-of-type + p {*/
/*        font-size: 16px;*/
/*    }*/
/*}*/

/* ===========================================================================
Docbox (reports/documents)
============================================================================*/
.docbox {
	background: linear-gradient(135deg,rgb(254, 243, 242) 0%, rgb(255, 247, 237) 100%);
	padding: 15px;
	border-radius: 16px;
	border: 1px solid #ffede3;
	font-size: 13px;
	line-height: 1.3;
	color: #ae8686;
}
.docbox.success {
	background: #eefdf4;
	border: 1px solid #e4f0e2;
}
.docbox:hover {
	border-color: #e8cfc2;
}
.docbox.success:hover {
	border-color: #c0e3b7;
}
.docbox .icon {
	background: linear-gradient(90deg, #af1b18 0%, #e63946 100%);
	display: flex;
	width: 50px;
	height: 50px;
	border-radius: 16px;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
}
.docbox.success .icon {
	background: var(--colorGradientGreenToGreenDeep);
}
.docbox .name {
	color: black;
	font-size: 14px;
}
.docbox .bi-download {
	color: var(--colorRed);
	font-size: 18px;
}
.docbox.success .bi-download {
	color: var(--colorGreen);
}


/* ===========================================================================
Productbox
============================================================================*/
.productbox {
	background-color: #fff;
	color: #2c2c2c;
	border: 1px solid transparent;
	border-radius: 25px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	transition: all ease 0.3s;
}
@media screen and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	/* Styles for large screens and non-touch devices */
	.productbox:hover {
		transform: scale(1.02);
		border-color: #f7a1a1;
	}
}

/* ----- picture-container ----- */
.picture-container {
	position: relative;
	border-radius: 25px 25px 0 0;
	overflow: hidden;
}
.productbox a.img-container {
	position: relative;
	display: flex;
	width: 100%;
	color: transparent;
	/*aspect-ratio: 397/338;*/
	aspect-ratio: 3/2;
}
.productbox .main-product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px 20px 0 0;
	transition: all 0.5s ease-in-out;
}
/*@media (pointer: fine) {*/
/*	.productbox:hover .main-product-img {*/
/*		transform: scale(1.07) rotate(2deg);*/
/*	}*/
/*}*/


/* badges */
.productbox .product-label {
	position: absolute;
	top: 15px;
	right: 15px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	pointer-events: none;
	align-items: flex-end;
}
html[dir="rtl"] .productbox .product-label {
	align-items: flex-start;
}
.productbox .product-label .badge {
	font-weight: 400;
	line-height: 1.5;
}
/* completed badge */
.productbox .completed-percent {
	background: linear-gradient(90deg, #00c851 0%, #02bc7c 100%);
	backdrop-filter: blur(7px);
	padding: 3px 8px;
	border-radius: 12px;
	text-align: center;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.5);
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.productbox .completed-percent .percent {
	font-weight: 700;
	font-size: 16px;
	color: white;
	line-height: 1.2;
}

.productbox .completed-percent i {
	font-size: 18px;
}


/*time countdown*/
.timer-wrapper {
	pointer-events: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 50%;
	z-index: 20;
    color: white;
    text-align: center;
}
.timer-title {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 3px;
	font-weight: 900;
}
.timer-digits-holder {
	display: flex;
	justify-content: center;
}
.timer-digits-holder .unit {
	width: 40px;
	height: 40px;
	background-color: rgba(0,0,0,0.7);
    color: white;
	border-radius: 4px;
	font-size: 9px;
    line-height: 1;
	margin: 0 3px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.timer-digits-holder .unit .digit {
	font-weight: bold;
	font-size: 19px;
}



/* ----- product body ----- */
.productbox .card-body {
	padding-top: 0.8rem;
}

.row-project-stats .col-each-stat {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: normal;
	color: #000;
}

.productbox .product-title a {
	font-size: 16px;
	color: #000;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.productbox .desc, .blog-short-description .desc {
	font-weight: bold;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.productbox .desc-long-wrapper {
	min-height: 60px; /* addition of progressbar + stats height to keep all productbox same in height*/
}
.blog-short-description .desc {
	line-height: 16px;
	-webkit-line-clamp: 4;
}
.productbox .desc-long-wrapper .desc {
	-webkit-line-clamp: 2;
}

.productbox .project-money {
	padding: 5px 0px;
	line-height: 1;
	border-radius: 0;
	text-align: center;
	/* border: 1px solid #d5d5d5; */
	margin: 10px 0 0 0;
}

.productbox .project-money .pm-stat-single:first-of-type p {
	text-align: start !important;
}
.productbox .project-money .pm-stat-single:last-of-type p {
	text-align: end !important;
}
.productbox .project-money .pm-stat-single:last-of-type p:last-of-type {
	font-size: 16px;
	font-weight: 700;
}

.productbox .project-money p {
	text-align: center;
	color: #959595;
	margin: 0;
	font-size: 12px;
	white-space: nowrap;
}
.productbox .project-money p:first-of-type {
	color: #959595;
	font-size: 12px;
}
.productbox .project-money p:first-of-type + p {
	font-size: 14px;
	line-height: 1.7;
    color: #444;
}

.productbox .row-counter .input-group-btn .btn {
	font-size: 20px;
    font-weight: bold;
	padding: 2px;
	height: 40px;
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.productbox .row-counter .input-group-append .btn{
    border-radius: 0 !important;
}
.productbox .row-counter .btn-currency{
    border-radius: 0;
    cursor: auto;
    font-size: 14px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
html[lang="en"] .productbox .row-counter .btn-currency {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
html[lang="ar"] .productbox .row-counter .btn-currency {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.productbox .row-counter .donation-input-holder, .productbox .row-action-buttons .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0.7rem;
	padding-bottom: 0.6rem;
}

.productbox .donation-input-holder input {
	height: 40px;
    max-width: 50px;
	border: 1px solid #eee;
    border-radius: 0 !important;
	background-color: white;
	color: #575757;
	font-weight: bold;
	font-size: 18px;
	box-shadow: none;
	text-align: center;
    padding: 8px 2px;
}
.productbox .donation-input-holder input:hover,
.productbox .donation-input-holder input:focus{
	box-shadow: 1px 1px 15px #dbdbdb !important;
}
.productbox .donation-input-holder input[disabled="disabled"]{
	cursor: not-allowed;
}


.productbox .donate_complete {
	color: green;
	padding: 10px 15px;
	font-weight: bold;
	text-align: center;
}

.productbox .card-body .project-complete-button {
    font-size: 16px;
    height: 40px;
    color: #717171;
}

.productbox .donation-completion-message {
	text-align: center;
	min-height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background: #fef3f5;
	border-radius: 8px;
	padding: 5px;
}

/* -------- label -------- */
.productbox .badge-donation-completed {
	display: inline-flex;
	align-items: center;
	pointer-events: none;
	position: absolute;
	left: 5px;
	top: 5px;
}
html[lang="ar"] .productbox .badge-donation-completed {
	left: unset;
	right: 5px;
}

.productbox .badge-donation-completed .star {
	background: url('image/icon/project-complete/completed-star-en.png') center center no-repeat;
	width: 70px;
	height: 64px;
}
html[lang="ar"] .productbox .badge-donation-completed .star {
	background: url('image/icon/project-complete/completed-star-ar.png') center center no-repeat;
	width: 69px;
}

.productbox .badge-donation-completed .txt {
	background: url('image/icon/project-complete/completed-bg-en.png') center center repeat-x;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
	font-weight: 700;
	font-size: 14px;
	padding-inline-end: 5px;
}

.productbox .badge-donation-completed .edge {
	background: url('image/icon/project-complete/completed-edge-en.png') center center no-repeat;
	width: 37px;
	height: 64px;
}
html[lang="ar"] .productbox .badge-donation-completed .edge {
	background: url('image/icon/project-complete/completed-edge-ar.png') center center no-repeat;
	width: 36px;
}


.productbox .badge-zakat {
	background-color: white;
	color: #2c2c2c;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.2;
	padding: 5px 15px;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 12px 0 12px 0;
    pointer-events: none;
}
html[lang="ar"] .productbox .badge-zakat {
	right: 0; left: unset;
	border-radius: 0 12px 0 12px;
}

.prbox-donors-count {
	font-size: 14px;
}

/* ---------- donate popup (mostly override) ---------- */
.modal-productbox-donate .modal-header {
	border: 0;
    padding-bottom: 0;
}
.modal-productbox-donate .header {
	margin-top: -65px;
	padding-bottom: 40px;
    width: calc(100% - 30px);
}

@media(min-width: 1200px) {
    .modal-productbox-donate .modal-dialog {
        max-width: 600px;
    }
}

.modal-productbox-donate .tabs-holder {
	font-size: 14px;
}

.modal-productbox-donate .header-txt {
    font-size: 13px;
}

.modal-productbox-donate .bg-white.shadow.br-10 {
	box-shadow: none !important;
}
.modal-productbox-donate .card-header {
	background-color: transparent;
	padding-top: 0;
    border: 0;
}

.modal-productbox-donate .nav-tabs .nav-link {
	border: 1px solid #ced4da;
	border-radius: 25px;
	margin: 3px;
	padding: 5px 15px;
}
.modal-productbox-donate .nav-tabs .nav-item.show .nav-link,
.modal-productbox-donate .nav-tabs .nav-link.active {
	color: white;
	background-color: var(--colorBrown);
	border: 1px solid var(--colorBrown) !important;
}

/*each*/
.modal-productbox-donate .my-wallet {
    font-size: 13px;
}

/* phone area in : donate now popup + cart + fast cart */
.whatsapp-receipt .greenbox {
	background-color: #f5e9e9;
	padding: 15px 20px;
	border-radius: 10px;
	color: black;
}
.whatsapp-receipt .wa-note {
	display: flex;
	gap: 5px;
	margin-bottom: 10px;
	color: #000;
	font-weight: 700;
}
.whatsapp-receipt .wa-note svg {
	color: #2dab6c;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ===========================================================================
Productbox Success
============================================================================*/
.productbox-sucess {
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all 0.3s linear;
}

.productbox-sucess:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.productbox-sucess-img {
	position: relative;
	overflow: hidden;
}

.productbox-sucess-img img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: all 0.3s linear;
}

.productbox-sucess:hover .productbox-sucess-img img {
	transform: scale(1.05);
}

.productbox-sucess-badge {
	position: absolute;
	top: 16px;
	inset-inline-end: 16px;
	background-color: rgba(255, 255, 255, 0.95);
	color: #1a1a1a;
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.productbox-sucess-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.productbox-sucess-title {
	color: #1a1a1a;
	font-size: 1.0625rem;
	font-weight: 600;
	margin-block-end: 12px;
	line-height: 1.4;
}

.productbox-sucess-location {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #6c757d;
	font-size: 0.875rem;
	margin-block-end: 8px;
}

.productbox-sucess-location i {
	font-size: 0.9375rem;
}

.productbox-sucess-status {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #198754;
	font-size: 0.875rem;
	font-weight: 500;
	margin-block-end: 12px;
}

.productbox-sucess-status i {
	font-size: 1rem;
}

.productbox-sucess-desc {
	color: #6c757d;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-block-end: 16px;
	flex: 1;
}

.productbox-sucess-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #a61c1c;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s linear;
	margin-block-start: auto;
}

.productbox-sucess-link:hover {
	color: #8b1717;
	text-decoration: none;
	gap: 10px;
}

.productbox-sucess-link i {
	font-size: 0.75rem;
	transition: all 0.3s linear;
}

/* Product Cards Responsive */
@media (max-width: 991.98px) {
	.productbox-sucess-img img {
		height: 180px;
	}
}

@media (max-width: 575.98px) {
	.productbox-sucess-body {
		padding: 16px;
	}

	.productbox-sucess-title {
		font-size: 1rem;
	}

	.productbox-sucess-img img {
		height: 160px;
	}
}

/* ===========================================================================
Productbox Minimal
============================================================================*/
/*.productbox-minimal {*/
/*	background-color: #fff;*/
/*	color: #2c2c2c;*/
/*	border: 1px solid #e6e6e6;*/
/*	border-radius: 12px;*/
/*	position: relative;*/
/*	box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
/*	margin: 12px auto;*/
/*    padding: 15px;*/
/*}*/
/*.productbox-minimal .pic-container {*/
/*	position: relative;*/
/*	width: 100%;*/
/*	aspect-ratio: 1;*/
/*    border-radius: 10px;*/
/*    overflow: hidden;*/
/*}*/
/*.productbox-minimal .pic-container img {*/
/*	height: 100%;*/
/*	width: 100%;*/
/*    object-fit: cover;*/
/*}*/
/*.productbox-minimal .pic-container .label {*/
/*	position: absolute;*/
/*	bottom: 0;*/
/*	right: 0;*/
/*	color: white;*/
/*	font-weight: 600;*/
/*	font-size: 18px;*/
/*	background: rgb(0,0,0, .2);*/
/*	width: 100%;*/
/*	padding: 7px;*/
/*	min-height: 70px;*/
/*	pointer-events: none;*/
/*	display: flex;*/
/*	align-items: center;*/
/*}*/

/* ===========================================================================
Timeline
============================================================================*/
.timeline-wrapper {
	position: relative;
	max-width: 800px;
	margin-inline-start: auto;
	margin-inline-end: auto;
	padding-inline-start: 40px;
}

.timeline-line {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #a61c1c;
}

.timeline-item {
	position: relative;
	margin-block-end: 30px;
	display: flex;
	align-items: center;
}

.timeline-item:last-child {
	margin-block-end: 0;
}

.timeline-dot {
	position: absolute;
	inset-inline-start: -39px;
	width: 18px;
	height: 18px;
	background: var(--colorGradientRedToRedDeep);
	border-radius: 50%;
	transform: translateX(-50%);
	z-index: 2;
	border: 2px solid white;
}

html[lang="ar"] .timeline-dot {
	transform: translateX(50%);
}

.timeline-card {
	background-color: white;
	border-radius: 12px;
	padding: 24px 30px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	flex: 1;
	transition: all 0.3s linear;
}

.timeline-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.timeline-year {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #a61c1c;
	font-size: 1.25rem;
	font-weight: 700;
	margin-block-end: 12px;
}

.timeline-year i {
	font-size: 1rem;
}

.timeline-card-title {
	color: #1a1a1a;
	font-size: 1.125rem;
	font-weight: 600;
	margin-block-end: 8px;
}

.timeline-card-desc {
	color: #6c757d;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}


@media (max-width: 767.98px) {
	.timeline-wrapper {
		padding-inline-start: 30px;
	}

	.timeline-dot {
		inset-inline-start: -28px;
	}

	.timeline-card {
		padding: 20px;
	}

	.timeline-year {
		font-size: 1.125rem;
	}

	.timeline-card-title {
		font-size: 1rem;
	}
}

/* ===========================================================================
Success Story Box
============================================================================*/
.storybox-card {
	display: flex;
	background-color: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin-block-end: 30px;
	transition: all 0.3s linear;
}

.storybox-card:last-child {
	margin-block-end: 0;
}

.storybox-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.storybox-content {
	flex: 1;
	padding: 35px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.storybox-img {
	flex: 0 0 45%;
	max-width: 45%;
}

.storybox-img img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	display: block;
}

.storybox-card-title {
	color: #1a1a1a;
	font-size: 1.375rem;
	font-weight: 700;
	margin-block-end: 16px;
}

.storybox-card-desc {
	color: #6c757d;
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-block-end: 20px;
}

.storybox-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #a61c1c;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s linear;
}

.storybox-link:hover {
	color: #8b1717;
	text-decoration: none;
	gap: 12px;
}

.storybox-link i {
	font-size: 0.75rem;
	transition: all 0.3s linear;
}

/* Story Section Responsive */
@media (max-width: 991.98px) {
	.storybox-content {
		padding: 25px 30px;
	}

	.storybox-card-title {
		font-size: 1.25rem;
	}
}

@media (max-width: 767.98px) {
	.storybox-card {
		flex-direction: column-reverse;
		margin-block-end: 24px;
	}

	.storybox-img {
		flex: none;
		max-width: 100%;
	}

	.storybox-img img {
		height: 200px;
		min-height: auto;
	}

	.storybox-content {
		padding: 24px 20px;
	}

	.storybox-card-title {
		font-size: 1.125rem;
	}

	.storybox-card-desc {
		font-size: 0.875rem;
	}
}


/* ===========================================================================
Blog Box (Activities/Events/News/Blog boxes)
============================================================================*/
.blogbox {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blogbox:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* Image Section */
.blogbox .blogbox-image-link {
	display: block;
	text-decoration: none;
	overflow: hidden;
}

.blogbox .blogbox-image {
	position: relative;
	width: 100%;
	padding-top: 66.67%; /* 3:2 Aspect Ratio */
	overflow: hidden;
}

.blogbox .blogbox-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.blogbox:hover .blogbox-image img {
	transform: scale(1.05);
}

/* Content Section */
.blogbox .blogbox-content {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 14px;
}

.blogbox .date {
	color: gray;
	font-size: 13px;
}

.blogbox .blogbox-title {
	margin: 0 0 10px 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a2e;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 45px;
}

.blogbox .blogbox-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.blogbox .blogbox-title a:hover {
	color: var(--colorRedDeep);
}

.blogbox .blogbox-description {
	margin: 0 0 15px 0;
	font-size: 0.9rem;
	font-weight: 400;
	color: #8c8c8c;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	min-height: 65px;
}
.blogbox .blogbox-description p {
	margin-bottom: 0 !important;
}

/* Details Link */
.blogbox .blogbox-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--colorRed);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
	border-top: 1px solid whitesmoke;
	padding-top: 10px;
	padding-bottom: 10px;
}

.blogbox .blogbox-link:hover {
	color: var(--colorRedDeep);
	gap: 12px;
}

.blogbox .blogbox-link i {
	font-size: 1rem;
	transition: transform 0.2s ease;
}


html[lang="en"] .blogbox .blogbox-link i,
html:not([lang="ar"]) .blogbox .blogbox-link i {
	transform: rotate(180deg);
}

html[lang="ar"] .blogbox .blogbox-link i {
	transform: rotate(0deg);
}

html[lang="ar"] .blogbox .blogbox-link:hover i {
	transform: translateX(-4px);
}

/* Responsive Styles */
@media (max-width: 1199.98px) {
	.blogbox .blogbox-content {
		padding: 22px;
	}

	.blogbox .blogbox-title {
		font-size: 1.1875rem;
	}

	.blogbox .blogbox-description {
		font-size: 0.9rem;
	}
}

@media (max-width: 991.98px) {
	.blogbox {
		border-radius: 14px;
	}

	.blogbox .blogbox-content {
		padding: 20px;
	}

	.blogbox .blogbox-title {
		font-size: 1.125rem;
		margin-bottom: 10px;
	}

	.blogbox .blogbox-description {
		font-size: 0.875rem;
		margin-bottom: 16px;
		line-height: 1.65;
	}

	.blogbox .blogbox-link {
		font-size: 0.9375rem;
	}
}

@media (max-width: 767.98px) {
	.blogbox {
		border-radius: 12px;
	}

	.blogbox .blogbox-image {
		padding-top: 60%;
	}

	.blogbox .blogbox-content {
		padding: 18px;
	}

	.blogbox .blogbox-title {
		font-size: 1.0625rem;
		margin-bottom: 8px;
		min-height: unset;
	}

	.blogbox .blogbox-description {
		font-size: 0.8125rem;
		margin-bottom: 14px;
		line-height: 1.6;
		min-height: unset;
	}

	.blogbox .blogbox-link {
		font-size: 0.875rem;
		gap: 6px;
	}
}

@media (max-width: 575.98px) {
	.blogbox {
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.blogbox .blogbox-content {
		padding: 16px 16px 6px;
	}

	.blogbox .blogbox-title {
		font-size: 1rem;
	}

	.blogbox .blogbox-description {
		font-size: 0.8125rem;
		margin-bottom: 12px;
	}

	.blogbox .blogbox-link {
		font-size: 0.8125rem;
	}
}

/* ===========================================================================
Blog Details (Activities/Events/News/Blog details page)
============================================================================*/
.blog-details-wrapper {
	background: white;
	padding: 50px;
	border-radius: 20px;
	border: 1px solid #f0f0f0;
	box-shadow: 0 0 25px 10px rgba(242, 221, 223, 0.6);
}
.blog-details-wrapper .date {
	color: #8a8a8a;
	font-size: 14px;
}

/* hero image slider */
.blog-details-wrapper .hero-image img {
	width: 100%;
	aspect-ratio: 5/3;
	min-height: 300px;
	position: relative;
	border-radius: 12px;
	object-fit: cover;
}

/* blog footer */
.row-blog-footer {
	border-top: 1px solid #f0f0f0;
	padding-top: 30px;
}


@media (max-width: 767.98px) {
	.blog-details-wrapper {
		padding: 25px;
		border-radius: 12px;
	}
	.blog-details-wrapper .title {
		font-size: 28px;
	}
	.blog-details-wrapper .hero-image img {
		min-height: 200px;
	}
}

/* ===========================================================================
Social Share icons
============================================================================*/
.share-btn-list .label {
	color: gray;
	font-size: 14px;
}
.share-btn-list .btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.share-btn-list .btns .share-btn {
	background: #e5e7eb;
	display: inline-flex;
	width: 32px;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	border-radius: 10px;
	color: #404040;
	transition: all 0.1s linear;
}
.share-btn-list .btns .share-btn:hover {
	transform: scale(1.1);
}

/* social colors */
.share-btn-list .btns .share-btn.whatsapp {
	background: #25d366;
	color: white;
}
.share-btn-list .btns .share-btn.twitter {
	background: #000;
	color: white;
}
.share-btn-list .btns .share-btn.facebook {
	background: #0866ff;
	color: white;
}

.share-btn-list .btns .share-btn.copied {
	background: #25d366;
	color: white;
	transform: scale(1.1);
}

/* ===========================================================================
BV Modals
============================================================================*/
/*#modal-1 .modal-header,*/
/*#modal-1 .modal-footer{*/
/*    border: 0;*/
/*}*/

/*#modal-2 .modal-header,*/
/*#modal-2 .modal-footer{*/
/*    border: 0;*/
/*}*/

/* ===========================================================================
BV Tabs (Bootstrap Vue Tabs)
============================================================================*/
.bv-tabs-wrapper .nav {
	display: flex;
	gap: 5px;
}

.bv-tabs-wrapper .nav-pills .nav-link {
	background: #fffdfb;
	border: 2px solid #eaecee;
	border-radius: 16px;
}
.bv-tabs-wrapper .nav-pills .nav-link:hover {
	background: #eaecee;
	color: black;
}

/* active */
.bv-tabs-wrapper .nav-pills .nav-link.active {
	color: #fff;
	background: var(--colorGradientRedDeepToRed);
	border: 2px solid #e63946;
}



/*.bv-tabs ul.nav-tabs{*/
/*	border: 1px solid #c9c9c9;*/
/*	border-radius: 15px;*/
/*	overflow: hidden;*/
/*}*/
/*.bv-tabs ul.nav-tabs .nav-link {*/
/*	color: #5d5d5d;*/
/*	border: none;*/
/*	border-radius: 0;*/
/*	padding: 0.6rem 1rem;*/
/*	font-size: 17px;*/
/*}*/

/*!* active tab *!*/
/*.bv-tabs ul.nav-tabs .nav-item.show .nav-link,*/
/*.bv-tabs ul.nav-tabs .nav-link.active {*/
/*	color: white;*/
/*	background-color: var(--colorBlue);*/
/*	border-color: #c9c9c9;*/
/*}*/

/*!* borders *!*/
/*html[lang="en"] .bv-tabs ul.nav-tabs .nav-item:not(:last-child) .nav-link{*/
/*	border-right: 1px solid #c9c9c9;*/
/*}*/
/*html[lang="ar"] .bv-tabs ul.nav-tabs .nav-item:not(:last-child) .nav-link{*/
/*	border-left: 1px solid #c9c9c9;*/
/*}*/

/*!* tab content *!*/
/*.bv-tabs .tab-content {*/
/*	margin-top: 30px !important;*/
/*}*/


/* ===========================================================================
BV Collapse (Bootstrap Vue Collapse)
============================================================================*/
/*.bv-collapse{*/
/*	font-weight: bold;*/
/*	font-size: 14px;*/
/*}*/
/*.collapse-title-holder {*/
/*	background-color: #f8f8f8;*/
/*	border-radius: 15px;*/
/*	font-size: 15px;*/
/*	padding: 10px 15px;*/
/*	color: black;*/
/*	position: relative;*/
/*	z-index: 50;*/
/*}*/

/*.collapsible-content {*/
/*	border: 1px solid #e5e5e5;*/
/*	border-top: 0;*/
/*	border-radius: 15px;*/
/*	border-top-left-radius: 5px;*/
/*	border-top-right-radius: 5px;*/
/*	min-height: 100px;*/
/*	margin-top: -10px;*/
/*	padding: 20px 15px;*/
/*	position: relative;*/
/*	z-index: 20;*/
/*}*/

/* ===========================================================================
Notificatons
============================================================================*/
/* --------- style1 -------- */
/*.notification-style1 a{*/
/*	color: #a7a7a7;*/
/*}*/

/*.notification-style1 {*/
/*	background-color: #f6f6f8;*/
/*	color: #a7a7a7;*/
/*	border: 1px solid transparent;*/
/*	font-size: 15px;*/
/*	border-radius: 12px;*/
/*	padding: 8px 15px;*/
/*	line-height: 1.3;*/
/*	transition: all 0.5s ease;*/
/*}*/
/*@media(max-width: 767.98px){*/
/*	.notification-style1{*/
/*		font-size: 14px;*/
/*	}*/
/*}*/
/*.notification-style1:hover{*/
/*	border: 1px solid black;*/
/*}*/

/*.notification-style1 .icon-holder {*/
/*	background-color: white;*/
/*	color: black;*/
/*	width: 45px;*/
/*	height: 45px;*/
/*	border-radius: 50%;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	font-size: 20px;*/
/*}*/

/*.notification-style1 .time-holder {*/
/*	font-size: 13px;*/
/*	color: black;*/
/*}*/
/*.notification-style1 .time-holder i {*/
/*	color: #a7a7a7;*/
/*}*/

/*unseen*/
/*.notification-style1.unseen a{*/
/*	color: #5d5d5d;*/
/*}*/
/*.notification-style1.unseen {*/
/*	background-color: white;*/
/*	color: #5d5d5d;*/
/*	box-shadow: 1px 1px 5px #e1dbdb;*/
/*}*/
/*.notification-style1.unseen .icon-holder {*/
/*	background-color: #f6f6f8;*/
/*}*/


/* ===========================================================================
Tables
============================================================================*/
/* common styles */
/*table{*/
/*	font-size: 14px;*/
/*}*/
/*table th,*/
/*table td{*/
/*	padding: 15px 10px;*/
/*}*/

/* --------- border-style1 ---------- */
/*table.border-style1{*/
/*	border: 1px solid #c9c9c9;*/
/*}*/
/*table.border-style1 > thead {*/
/*	border: 1px solid #c9c9c9;*/
/*	background-color: #eee;*/
/*}*/
/*table.border-style1 > tbody > tr > td {*/
/*	border-bottom: 1px solid #c9c9c9;*/
/*}*/

/* ---------- border-responsive-style1-1200 ---------- */
/*@media(max-width: 1199.98px){*/
/*	.border-responsive-style1-1200,*/
/*	.border-responsive-style1-1200 > thead,*/
/*	.border-responsive-style1-1200 > thead > tr,*/
/*	.border-responsive-style1-1200 > thead > tr > th,*/
/*	.border-responsive-style1-1200 > tbody,*/
/*	.border-responsive-style1-1200 > tbody > tr,*/
/*	.border-responsive-style1-1200 > tbody > tr > td {*/
/*		border: none !important;*/
/*	}*/
/*	.border-responsive-style1-1200 > tbody > tr{*/
/*		border: 1px solid #c9c9c9 !important;*/
/*	}*/
/*}*/


/* ---------- responsive-break-1200 ---------- */
/*@media(max-width: 1199.98px){*/
/*	table th,*/
/*	table td{*/
/*		padding: 10px;*/
/*	}*/
/*	.table-responsive-primeface.responsive-break-1200 thead {*/
/*		display: none;*/
/*	}*/
/*	.table-responsive-primeface.responsive-break-1200 > tbody > tr {*/
/*		display: flex;*/
/*		flex-direction: column;*/
/*		margin-bottom: 10px;*/
/*		padding: 10px;*/
/*	}*/
/*	.table-responsive-primeface.responsive-break-1200 .data-wrap {*/
/*		display: flex;*/
/*		align-items: center;*/
/*		justify-content: space-between;*/
/*	}*/

/*}*/
/*@media(min-width: 1200px){*/
/*	.table-responsive-primeface.responsive-break-1200 .data-heading{*/
/*		display: none;*/
/*	}*/
/*}*/

/* ===========================================================================
Fast Donation
============================================================================*/
/* =================== Fast Donation (desktop) =================== */

/*.sticky-widget{*/
/*    display: flex;*/
/*    position: fixed;*/
/*    top: 350px;*/
/*    right: 0;*/
/*    z-index: 500;*/
/*    direction: ltr;*/
/*}*/
/*.sticky-widget .arrow-holder {*/
/*	background-color: var(--colorBlue);*/
/*	color: white;*/
/*    height: 90px;*/
/*    width: 25px;*/
/*	border-radius: 8px 0 0 8px;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	cursor: pointer;*/
/*}*/
/*.sticky-widget .label-holder {*/
/*	background-color: var(--colorBlue);*/
/*    border-left: 1px solid var(--colorBlue);*/
/*    height: 90px;*/
/*	width: 70px; margin-right: -70px;*/
/*	color: white;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	text-align: center;*/
/*	cursor: pointer;*/
/*    transition: all 300ms linear;*/
/*    width: 55px; margin: 0; !* override original style to make it show always *!*/
/*    font-size: 13px;*/
/*}*/
/*.sticky-widget .label-holder p{*/
/*    text-align: center;*/
/*}*/
/*.sticky-widget .label-holder.shown-by-margin{*/
/*    margin-right: 0;*/
/*}*/
/*.sticky-widget .content-holder {*/
/*	background-color: white;*/
/*    box-shadow: 15px 0 25px rgba(0,0,0,0.4);*/
/*	color: #343a40;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	!*height: 420px;*!*/
/*    height: auto;*/
/*	position: relative;*/
/*	transition: all 300ms linear;*/
/*    width: 420px; margin-right: -420px;*/
/*}*/
/*.sticky-widget .content-holder.shown-by-margin{*/
/*	margin-right: 0;*/
/*}*/

/*.sticky-widget .content-holder-inner {*/
/*    padding: 0 15px;*/
/*    width: 100%;*/
/*}*/
/*html[lang="ar"] .sticky-widget .content-holder-inner{*/
/*    direction: rtl;*/
/*}*/
/*.sticky-widget .content-holder-inner > .row {*/
/*    background-color: white;*/
/*    box-shadow: 0 0 15px rgba(0,0,0,0.4);*/
/*    padding-top: 15px;*/
/*    padding-bottom: 15px;*/
/*}*/
/*.sticky-widget .fast-donation-title {*/
/*	background-color: var(--colorBlue);*/
/*	color: white;*/
/*	display: inline-flex;*/
/*	font-size: 22px;*/
/*	padding: 3px 15px;*/
/*	border-radius: 0 0 12px 12px;*/
/*	position: absolute;*/
/*	top: -15px;*/
/*	z-index: 20;*/
/*	left: 50%;*/
/*	transform: translateX(-50%);*/
/*}*/
/*@media(max-width: 1199.98px) {*/
/*    .sticky-widget .fast-donation-title {*/
/*        font-size: 18px;*/
/*        padding: 7px 15px;*/
/*    }*/
/*}*/

/*.sticky-widget-opened .arrow {*/
/*	transform: rotate(180deg);*/
/*    display: flex;*/
/*}*/

/*!* inner forms *!*/
/*.sticky-widget .fast-donation-tabs {*/
/*	color: gray;*/
/*}*/
/*.sticky-widget .fast-donation-tabs .card {*/
/*	border: 0;*/
/*	margin-top: 25px;*/
/*}*/
/*.sticky-widget .fast-donation-tabs .card-header {*/
/*	padding: 0 10px;*/
/*	margin-bottom: 0;*/
/*	background-color: transparent;*/
/*	border-bottom: 0;*/
/*}*/
/*.sticky-widget .fast-donation-tabs .nav-pills .nav-link.active {*/
/*	color: var(--colorBlue);*/
/*	background-color: transparent;*/
/*	border-bottom: 2px solid var(--colorBlue);*/
/*	border-radius: 0;*/
/*}*/

/*.sticky-widget .fast-donation-tabs .card-header-pills {*/
/*	display: flex;*/
/*	flex-wrap: nowrap;*/
/*	width: 100%;*/
/*	overflow-x: auto;*/
/*	white-space: nowrap;*/
/*	padding-bottom: 7px;*/
/*}*/

/*.sticky-widget .fast-donation-tabs .tab-pane {*/
/*	padding: 20px 0 0 0;*/
/*}*/

/*.sticky-widget .fast-donation-amount-input {*/
/*	height: 38px;*/
/*    max-width: 150px;*/
/*}*/
/*html[lang="en"] .sticky-widget .fast-donation-amount-input {*/
/*	border-radius: 4px 0 0 4px !important;*/
/*}*/
/*html[lang="ar"] .sticky-widget .fast-donation-amount-input {*/
/*	border-radius: 0 4px 4px 0 !important;*/
/*}*/

/*html[lang="en"] .sticky-widget .btn-currency {*/
/*	border-radius: 0 4px 4px 0 !important;*/
/*}*/
/*html[lang="ar"] .sticky-widget .btn-currency {*/
/*	border-radius: 4px 0 0 4px !important;*/
/*}*/

/*.sticky-widget .money-spinner {*/
/*	max-width: 180px;*/
/*}*/

/*!* custom scrollbar *!*/
/*.sticky-widget ::-webkit-scrollbar {*/
/*    height: 12px;*/
/*}*/
/*.sticky-widget ::-webkit-scrollbar-track {*/
/*    box-shadow: inset 0 0 5px rgb(215 215 215);*/
/*    border-radius: 12px;*/
/*}*/
/*.sticky-widget ::-webkit-scrollbar-thumb {*/
/*    background: var(--colorBlue);*/
/*    border-radius: 12px;*/
/*}*/

/* =================== Fast Donation (mobile) =================== */
/*@media(max-width: 1199.98px){*/

/*    .sticky-widget {*/
/*        top: 0;*/
/*        right: 0;*/
/*        left: 0;*/
/*        bottom: 0;*/
/*        background-color: rgba(0,0,0,0.5);*/
/*        display: none;*/
/*    }*/

/*    .sticky-widget .close-button-holder {*/
/*        position: absolute;*/
/*        left: 50%;*/
/*        transform: translateX(-50%);*/
/*        top: 15px;*/
/*    }*/
/*    .sticky-widget .close-button {*/
/*        background-color: white;*/
/*        width: 40px;*/
/*        height: 40px;*/
/*        border-radius: 50%;*/
/*        display: flex;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        color: black;*/
/*    }*/

/*    .sticky-widget .content-holder {*/
/*        width: auto;*/
/*        margin: 0;*/
/*        position: absolute;*/
/*        left: 15px;*/
/*        right: 15px;*/
/*        top: 70px;*/
/*    }*/
/*    .sticky-widget .arrow-holder,*/
/*    .sticky-widget .label-holder {*/
/*        display: none;*/
/*    }*/

/*    .sticky-widget .card-body {*/
/*        padding: 15px 0;*/
/*    }*/

/*    !* trigger button *!*/
/*    .up-btn{*/
/*        display: none; !* hide go top button*!*/
/*    }*/
/*    .btn-fast-donation-mobile-trigger {*/
/*        background-color: var(--colorGreen);*/
/*        color: white;*/
/*        width: 50px;*/
/*        height: 50px;*/
/*        display: flex;*/
/*        border-radius: 50%;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        text-align: center;*/
/*        line-height: 1;*/
/*        font-size: 11px;*/
/*        position: fixed;*/
/*        right: 5px;*/
/*        z-index: 50;*/
/*        bottom: 60px;*/
/*    }*/
/*    html[lang="ar"] .btn-fast-donation-mobile-trigger {*/
/*        right: unset;*/
/*        left: 5px;*/
/*    }*/


/*}!* End @media *!*/


/* ===========================================================================
Pagination
============================================================================*/
.page-link {
	cursor: pointer;
    color: #000;
}
.page-link:hover {
	color: white;
	background-color: var(--colorRed);
}

.page-item.currentpage .page-link {
	color: white;
	background-color: var(--colorRed);
    cursor: auto;
}
.page-item.currentpage .page-link:hover {
	color: white;
	background-color: var(--colorRed);
}
/* ar fix */
html[lang="ar"] .page-item:first-child .page-link {
	margin-left: -1px;
    margin-right: 0;
	border-radius: 0 .25rem .25rem 0;
}
html[lang="ar"] .page-item:last-child .page-link {
	margin-left: 0;
    margin-right: -1px;
	border-radius: .25rem 0 0 .25rem;
}


/* ===========================================================================
Homepage Products with Details
============================================================================*/
@media(max-width: 1199.98px){
    .homepage-products-with-details .each-product {
        padding: 15px 0;
        margin: 0;
        border-radius: 12px;
        border: 1px solid #eeecec;
        box-shadow: 0 0 5px #d9d9d9;
    }
}

.homepage-products-with-details .col-gallery .main-img {
	height: 400px;
	width: 100%;
	object-fit: fill;
    border-radius: 12px;
}
@media(max-width: 1199.98px){
    .homepage-products-with-details .col-gallery .main-img {
        height: auto;
        max-height: 400px;
    }
}

.homepage-products-with-details .project-title {
	color: #2c2c2c;
	font-weight: bold;
	font-size: 22px;
    margin-top: 10px;
}
.homepage-products-with-details .short-description p {
	color: rgb(168, 167, 167);
}

.homepage-products-with-details .col-product-forms .input-group input {
	/*height: 48px;*/
	height: 42px;
	border: 1px solid #ced4da;
	border-radius: 0 !important;
	background-color: white;
	color: black;
	font-weight: bold;
	font-size: 18px;
	box-shadow: none;
	text-align: center;
}
.homepage-products-with-details .col-product-forms .input-group .btn {
	/*height: 48px;
	min-width: 48px;*/
	height: 42px;
	min-width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border-color: #ced4da;
	font-weight: bold;
	color: black;
}

.homepage-products-with-details .row-project-shares .btn-share {
	background-color: white;
	color: #2c2c2c;
	border: 1px solid #e2e2e2;
    position: relative;
}
.homepage-products-with-details .row-project-shares .btn-share.active {
	background-color: var(--colorGreen);
	border-color: var(--colorGreen);
	color: white;
}
.homepage-products-with-details .row-project-shares .btn-share.active::after {
	content: "\F26E";
	font-family: "bootstrap-icons" !important;
	font-size: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--colorBlue);
	color: white;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-30%,-50%);
	border-radius: 50%;
}
html[lang="ar"] .homepage-products-with-details .row-project-shares .btn-share.active::after {
	left: unset; right: 0;
	transform: translate(30%,-50%);
}

.homepage-products-with-details .btn-pre-amount {
	background-color: transparent;
	border: 1px solid #ced4da;
	color: #777777;
	min-width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.homepage-products-with-details .btn-pre-amount.active {
    border: 1px solid var(--colorGreen) !important;
    color: var(--colorGreen) !important;
}

/* ===========================================================================
Testimonials
============================================================================*/
:root {
	--testimonials-primary: #9C2B3E;
	--testimonials-primary-light: #B73D52;
	--testimonials-bg: #fff6ee;
	--testimonials-text-dark: #2D2D2D;
	--testimonials-text-medium: #8c8c8c;
	--testimonials-text-light: #888888;
	--testimonials-white: #fffbf6;
	--testimonials-radius: 24px;
	--testimonials-radius-sm: 16px;
	--testimonials-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	--testimonials-transition: all 0.3s ease;
}


.testimonials {
	background-color: var(--testimonials-bg);
	padding-block: 70px;
}

/* Header */
.testimonials .testimonials__header {
	text-align: center;
	margin-block-end: 50px;
}

.testimonials .testimonials__header-icon {
	width: 64px;
	height: 64px;
	margin-inline: auto;
	margin-block-end: 24px;
}

.testimonials .testimonials__title {
	font-size: 2rem;
	font-weight: 700;
	color: black;
	margin-block-end: 12px;
}

.testimonials .testimonials__subtitle {
	font-size: 1rem;
	color: var(--testimonials-text-medium);
	max-width: 500px;
	margin-inline: auto;
	text-align: center;
}

/* Grid */
.testimonials .testimonials__grid {
	margin-inline: auto;
}

/* Card */
.testimonials .testimonials__card {
	background: var(--testimonials-white);
	border-radius: var(--testimonials-radius);
	padding: 28px 24px;
	box-shadow: var(--testimonials-shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: var(--testimonials-transition);
	border: 1px solid white;
}

.testimonials .testimonials__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Card Header - Quote Icon, Author Info, Avatar in same row */
.testimonials .testimonials__card-header {
	margin-block-end: 20px;
}

.testimonials .testimonials__author-avatar {
	width: 60px;
	height: 60px;
	border-radius: var(--testimonials-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonials .testimonials__author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonials .testimonials__author-info {
	text-align: start;
	margin-inline-start: 15px;
}

.testimonials .testimonials__author-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--testimonials-text-dark);
	margin-block-end: 4px;
}

.testimonials .testimonials__author-role {
	font-size: 0.8rem;
	color: var(--testimonials-text-light);
	margin: 0;
}

/* Card Body - Testimonial Text */
.testimonials .testimonials__text {
	font-size: 0.95rem;
	color: var(--testimonials-text-medium);
	flex: 1;
	margin-block-end: 20px;
	min-height: 75px;
}

.testimonials .testimonials__text::before {
	content: '"';
}

.testimonials .testimonials__text::after {
	content: '"';
}

/* Decorative Line */
.testimonials .testimonials__line {
	width: 50px;
	height: 4px;
	background: var(--testimonials-primary);
	border-radius: 2px;
	margin-inline-start: auto;
}


@media (max-width: 991.98px) {
	.testimonials {
		padding-block: 50px;
	}

	.testimonials .testimonials__header {
		margin-block-end: 40px;
	}

	.testimonials .testimonials__title {
		font-size: 1.75rem;
	}

	.testimonials .testimonials__card {
		padding: 24px 20px;
	}

	.testimonials .testimonials__author-avatar {
		width: 55px;
		height: 55px;
	}
}


@media (max-width: 767.98px) {
	.testimonials {
		padding-block: 40px;
	}

	.testimonials .testimonials__header-icon {
		margin-block-end: 20px;
	}

	.testimonials .testimonials__title {
		font-size: 1.5rem;
	}

	.testimonials .testimonials__subtitle {
		font-size: 0.95rem;
	}

	.testimonials .testimonials__card {
		padding: 20px 18px;
	}

	.testimonials .testimonials__author-avatar {
		width: 50px;
		height: 50px;
	}

	.testimonials .testimonials__author-name {
		font-size: 0.95rem;
	}

	.testimonials .testimonials__author-role {
		font-size: 0.75rem;
	}

	.testimonials .testimonials__text {
		font-size: 0.9rem;
		line-height: 1.8;
	}
}


@media (max-width: 575.98px) {
	.testimonials .testimonials__card {
		padding: 18px 16px;
	}

	.testimonials .testimonials__card-header {
		flex-wrap: wrap;
		gap: 15px;
	}

	.testimonials .testimonials__quote-icon {
		display: none;
	}

	.testimonials .testimonials__author-avatar {
		width: 45px;
		height: 45px;
	}

	.testimonials .testimonials__line {
		width: 40px;
		height: 3px;
	}
}


html[lang="ar"] .testimonials {
	direction: rtl;
}

html[lang="ar"] .testimonials .testimonials__author-info {
	text-align: start;
}

html[lang="ar"] .testimonials .testimonials__line {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* no slider on touch device*/
@media (pointer: coarse) and (min-width: 1200px) {
	.slick-testimonials-config .each-item {
		flex: 0 0 500px;
		max-width: 500px;
	}
}
@media (pointer: coarse) and (max-width: 1199.98px) {
	.slick-testimonials-config .each-item {
		flex: 0 0 400px;
		max-width: 400px;
	}
}
@media (pointer: coarse) and (max-width: 499.98px) {
	.slick-testimonials-config .each-item {
		flex: 0 0 280px;
		max-width: 280px;
	}
}

/* ===========================================================================
Newsletter
============================================================================*/
.newsletter {
	background: #fff7ed;
}
.newsletter-subscribe {
	background: linear-gradient(135deg, var(--aboutus-bg-gradient-start) 0%, var(--aboutus-bg-gradient-end) 100%);
	border-radius: 24px;
	padding: 50px 60px;
	margin-inline: auto;
	border: 1px solid white;
	box-shadow: 10px 10px 25px rgba(0,0,0,0.1);
}

.aboutus-newsletter__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--colorRed);
	margin-block-end: 11px;
	text-align: center;
}

.aboutus-newsletter__subtitle {
	font-size: 1rem;
	color: gray;
	max-width: 550px;
	margin-inline: auto;
	margin-block-end: 40px;
	line-height: 1.7;
	text-align: center;
}

.newsletter-subscribe .newsletter-email {
	height: 54px;
	background: rgba(255,255,255,0.3);
	backdrop-filter: blur(5px);
	border: 1px solid white;
	border-radius: 12px !important;
	padding: 5px 20px;
	color: gray;
}
.newsletter-subscribe small {
	font-size: 80%;
	font-weight: 400;
	color: #999;
	margin: 5px 10px 20px 10px;
	display: flex;
}

.newsletter-subscribe .success .alert-info {
	color: #2c992c;
	background: #ebffeb;
	border-color: #c5dfc1;
}

@media (max-width: 767.98px) {
	.newsletter-subscribe {
		border-radius: 12px;
		padding: 20px;
	}
	.aboutus-newsletter__title {
		font-size: 1.3rem;
		margin-block-end: 8px;
	}
	.aboutus-newsletter__subtitle {
		max-width: 100%;
		margin-block-end: 30px;
	}
}

/* ===========================================================================
Check List (check ul > li that comes from admin WYSIWYG editors)
============================================================================*/
.ul-checked ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ul-checked ul li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.95rem;
	font-weight: 500;
}
.ul-checked ul li:not(:last-child) {
	margin-block-end: 12px;
}
.ul-checked ul li::before {
	display: flex;
	align-items: center;
	content: '\F270';
	font-family: "bootstrap-icons", sans-serif;
	font-size: 21px;
	line-height: 1.2;
	color: var(--colorRed);
}

/* ===========================================================================
Contact Form (InsanAcademy page + ...)
============================================================================*/
.common-contact-form-section {
	padding-block: 80px;
	display: flex;
	align-items: center;
}

.common-contact-form-section .contact-form-card {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 50px 60px 60px;
	max-width: 720px;
	margin-inline: auto;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
}

.common-contact-form-section .contact-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: #fdf6f0;
	border: 1px solid #f0e6dd;
	border-radius: 50px;
	padding: 10px 24px;
	margin-block-end: 24px;
	color: #8b1832;
	font-size: 15px;
	font-weight: 500;
}

.common-contact-form-section .contact-badge i {
	font-size: 18px;
}

.common-contact-form-section .contact-header {
	text-align: center;
	margin-block-end: 32px;
}

.common-contact-form-section .contact-title {
	color: var(--colorRed);
	font-size: 32px;
	font-weight: 700;
	margin-block-end: 12px;
	line-height: 1.4;
	text-align: center;
}

.common-contact-form-section .contact-subtitle {
	color: #6b6b6b;
	font-size: 15px;
	font-weight: 400;
	margin: 0;
	text-align: center;
}

.common-contact-form-section .form-group {
	margin-block-end: 20px;
}

.common-contact-form-section .form-label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #4a4a4a;
	font-size: 14px;
	font-weight: 500;
	margin-block-end: 10px;
}

.common-contact-form-section .form-label i {
	font-size: 16px;
	color: #6b6b6b;
}

.common-contact-form-section .form-label .required {
	color: #8b1832;
}

.common-contact-form-section .form-control {
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 14px;
	color: #333333;
	background-color: #ffffff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	height: auto;
}

.common-contact-form-section .form-control::placeholder {
	color: #b0b0b0;
	font-size: 14px;
}

.common-contact-form-section .form-control:focus {
	border-color: #8b1832;
	box-shadow: 0 0 0 3px rgba(139, 24, 50, 0.1);
	outline: none;
}

.common-contact-form-section textarea.form-control {
	min-height: 140px;
	resize: vertical;
}

/* Row with two columns for email and phone */
.common-contact-form-section .form-row-double {
	display: flex;
	gap: 20px;
}

.common-contact-form-section .form-row-double .form-group {
	flex: 1;
}


/* Responsive */
@media (max-width: 1199.98px) {
	.common-contact-form-section .contact-form-card {
		max-width: 680px;
		padding: 45px 50px 55px;
	}
}

@media (max-width: 991.98px) {
	.common-contact-form-section {
		padding-block: 60px;
	}

	.common-contact-form-section .contact-form-card {
		max-width: 600px;
		padding: 40px 40px 50px;
	}

	.common-contact-form-section .contact-title {
		font-size: 28px;
	}
}

@media (max-width: 767.98px) {
	.common-contact-form-section {
		padding-block: 50px;
	}

	.common-contact-form-section .contact-form-card {
		padding: 35px 28px 45px;
		border-radius: 12px;
		margin-inline: 15px;
	}

	.common-contact-form-section .contact-badge {
		padding: 8px 20px;
		font-size: 14px;
	}

	.common-contact-form-section .contact-title {
		font-size: 24px;
	}

	.common-contact-form-section .contact-subtitle {
		font-size: 14px;
	}

	.common-contact-form-section .form-row-double {
		flex-direction: column;
		gap: 0;
	}

	.common-contact-form-section .form-control {
		padding: 12px 14px;
	}
}

@media (max-width: 575.98px) {
	.common-contact-form-section {
		padding-block: 40px;
	}

	.common-contact-form-section .contact-form-card {
		padding: 30px 20px 40px;
		margin-inline: 10px;
	}

	.common-contact-form-section .contact-badge {
		padding: 8px 18px;
		font-size: 13px;
		margin-block-end: 20px;
	}

	.common-contact-form-section .contact-title {
		font-size: 22px;
	}

	.common-contact-form-section .contact-subtitle {
		font-size: 13px;
	}

	.common-contact-form-section .contact-header {
		margin-block-end: 24px;
	}

	.common-contact-form-section textarea.form-control {
		min-height: 120px;
	}
}

/* ===========================================================================
Common Album Section
============================================================================*/
.section-album-common {
	background: #fcebe3;
	border-top: 5px solid #ffe6de;
	border-bottom: 5px solid #ffe6de;
}
.section-album-common .pill-title {
	background: #f8d7d2;
	color: var(--colorRed);
	border: 2px solid #e9b1ad;
	font-size: 18px;
	padding: 7px 18px;
	display: inline-flex;
	border-radius: 25px;
	font-weight: bold;
	line-height: 1.2;
}
.section-album-common .bar {
	background: #fde7dd;
	border-top: 1px solid #f9e7de;
	border-bottom: 1px solid #f9e7de;
	padding: 15px;
	margin-bottom: 40px;
}
@media (max-width: 767.98px) {
	.section-album-common .bar {
		margin-bottom: 25px;
	}
}
/* --------- Pics --------- */
.section-album-common .tab-content-wrapper-pics a.img-thumb-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	aspect-ratio: 5/3;
	border-radius: 16px;
	overflow: hidden;
	cursor: zoom-in;
}
.section-album-common .tab-content-wrapper-pics a.img-thumb-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s linear;
}
.section-album-common .tab-content-wrapper-pics a.img-thumb-wrapper img:hover {
	transform: scale(1.05) rotate(1deg);
}
/* --------- Videos --------- */

/* ===========================================================================
Common Cards and Boxes
============================================================================*/
/* ----- common card ----- */
.common-card {
	background: #fffbf8;
	border: 1px solid white;
	border-radius: 15px;
	padding: 25px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	height: 100%;
}
.common-card .icon {
	background: #f5d2d1;
	width: 60px;
	aspect-ratio: 1;
	border-radius: 15px;
	border: 1px solid #f9cdcb;
	color: var(--colorRed);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 12px;
}
.common-card h3 {
	color: var(--colorRed);
	font-size: 20px;
}
.common-card h5 {
	color: var(--colorRed);
	font-size: 18px;
	font-weight: 400 !important;
}

@media(max-width: 767.98px) {
	.common-card {
		border-radius: 12px;
		padding: 15px;
	}
}

/* ----- common whitebox ----- */
.common-whitebox {
	background: #fffcfb;
	border: 1px solid white;
	border-radius: 20px;
	padding: 35px 25px;
}
.common-whitebox .title .icon {
	background: #f5d2d1;
	width: 50px;
	aspect-ratio: 1;
	border-radius: 12px;
	border: 1px solid #f9cdcb;
	color: var(--colorRed);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	margin-bottom: 10px;
	margin-top: 10px;
}
.common-whitebox .title h2 {
	margin-bottom: 0;
	color: var(--colorRed);
	font-size: 28px;
}

@media(max-width: 767.98px) {
	.common-whitebox {
		border-radius: 12px;
		padding: 20px;
	}
}