body {
	font-family: "Tajawal", sans-serif;
	font-size: 18px;
	font-weight: 400;
}

:root {
	--brown:#655640;
	--green:#70A64D;
	--light:#DDD6C2;
	--checkbox-size: 43px;
	--checkbox-gap: 12px;
	--checkbox-border: 2px;
	--checkbox-color: #70A64D;
	--checkbox-bg: #fff;
	--checkbox-border-muted: #70A64D;
	--checkbox-focus-ring: rgba(40,167,69,0.18);
}

/* Language Switcher */
.lang-switcher {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	display: flex;
	gap: 8px;
	background: rgba(255, 255, 255, 0.95);
	padding: 8px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
}

.lang-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 50px;
	text-decoration: none;
	color: var(--brown);
	font-weight: 600;
	font-size: 15px;
	transition: all 0.3s ease;
	background: transparent;
	min-width: 80px;
}

.lang-btn:hover {
	background: rgba(112, 166, 77, 0.1);
	color: var(--green);
	transform: translateY(-2px);
}

.lang-btn.active {
	background: var(--green);
	color: white;
	box-shadow: 0 2px 8px rgba(112, 166, 77, 0.3);
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.lang-switcher {
		top: 10px;
		right: 10px;
		padding: 5px;
		gap: 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.lang-btn {
		padding: 6px 12px;
		font-size: 13px;
		min-width: 60px;
	}

	[dir="rtl"] .lang-switcher {
		right: auto;
		left: 10px;
	}
}

/* RTL Support */
[dir="rtl"] {
	text-align: right;
}

[dir="rtl"] .lang-switcher {
	right: auto;
	left: 20px;
}

[dir="rtl"] .grid.two-col {
	direction: rtl;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
	text-align: right;
}

[dir="rtl"] .fancy-checkbox {
	flex-direction: row-reverse;
	text-align: right;
	justify-content: flex-end;
}

[dir="rtl"] .label-text {
	text-align: right;
	direction: rtl;
}

/* RTL Overlay Animation - يظهر من اليسار */
[dir="rtl"] .img-wrap .overlay {
	right: auto;
	left: 0;
	border-radius: 0 20px 20px 0;
	transform: translateX(-12%);
	text-align: right;
	justify-content: flex-end;
}

[dir="rtl"] .img-wrap:hover .overlay,
[dir="rtl"] .img-wrap:focus-within .overlay {
	transform: translateX(0);
}

/* =========================================
   MOBILE (max-width: 575px)
   ========================================= */
@media (max-width: 575px) {
	.pb-6 {padding-bottom:10rem!important}
	.arc-text img { width:80vw; position:absolute; top:0px; left:50%; transform:translateX(-50%); }
	.center-graphic img { width:90vw; max-width:95vw; }
	.tagline-mob { font-size:26px; line-height:1.5; text-align:center; color:var(--green); margin-bottom:40px}
	.bimg img { max-width:35vw; margin:30px 0 10px 0}
	.blogo img { max-width:180px; margin-bottom: 140px}
	.bottom-arc-text-bottom { position:absolute; bottom:100px; left:50%; transform:translateX(-50%); }
	.grid{flex-direction:column}
	.two-col input{width:100%}
	.overlay .text { font-size:16px!important;}
	.contact {margin-bottom:180px}
	.scroll-bottom { position:absolute; bottom:30px!important; right:30px!important }

}

/* =========================================
   > 576px
   ========================================= */
@media (min-width: 576px) and (max-width: 767px) {
	.pb-6 {padding-bottom:10rem!important}
	.arc-text img { width:80vw; position:absolute; top:0px; left:50%; transform:translateX(-50%); }
	.center-graphic img { width:90vw; max-width:95vw; }
	.tagline-mob { font-size:26px; line-height:1.5; text-align:center; color:var(--green); margin-bottom:40px}
	.bimg img { max-width:35vw; margin:30px 0 50px 0}
	.blogo img { max-width:180px;}
	.bottom-arc-text-bottom { position:absolute; bottom:100px; left:50%; transform:translateX(-50%); }
	.grid{flex-direction:column}
	.two-col input{width:100%}
	.overlay .text { font-size:18px;}
	.contact {margin-bottom:140px}
}

/* =========================================
   > 768px
   ========================================= */
@media (min-width: 768px)  and (max-width: 991px) {
	.tagline-mob { font-size:26px; line-height:1.5; text-align:center; color:var(--green); margin-bottom:40px}
	.arc-text img { width:250px }
	.arc-text-left img { height:250px; }
	.arc-text-right img { height:250px; }
	.center-graphic img { height:500px; }
	.contact {margin-bottom:140px}
}

/* =========================================
   > 992px
   ========================================= */
@media (min-width: 992px)  and (max-width: 1199px) {
	.tagline-mob { font-size:26px; line-height:1.5; text-align:center; color:var(--green); margin-bottom:40px}
	.arc-text img { width:300px }
	.arc-text-left img { height:300px; }
	.arc-text-right img { height:300px; }
	.center-graphic img { height:450px; }
	.blogo img { margin-bottom:0}
	.bimg img { width:200px}
}

/* =========================================
   > 1200px
   ========================================= */
@media (min-width: 1200px)  and (max-width: 1399px) {
	.tagline-mob { font-size:26px; line-height:1.5; text-align:center; color:var(--green); margin-bottom:40px}
	.arc-text img { width:400px }
	.arc-text-left img { height:400px; }
	.arc-text-right img { height:400px; }
	.center-graphic img { height:600px; }
	.img-wrap .overlay { width:90%; }
	.bimg img { width:200px}
	.blogo img { margin-top: 140px}

}

/* =========================================
   1400px–1650px RANGE
   ========================================= */
@media (min-width: 1400px) and (max-width: 1650px) {
	.tagline { position:absolute; left:65%; top:40%; transform:translateY(-50%); font-size:26px; line-height:1.5; text-align:center; color:var(--green); }
	.tagline-1 { position:absolute; left:70%; top:43%; transform:translateY(-50%); font-size:26px; line-height:1.5; text-align:center; color:var(--green); }
	.arc-text img { width:393px }
	.arc-text-left img { height:393px; }
	.arc-text-right img { height:393px; }
	.center-graphic img { height:557px; }
	.img-wrap .overlay { width:90%; }
	.overlay .text { font-size:16px!important;}
	.bimg img { width:200px}
	.blogo img { margin-top: 140px}
}

/* =========================================
   MAIN STYLES
   ========================================= */
.pb-6 {padding-bottom:3rem}
.green { color:var(--green); }
.wrapper { background:#655640; position:relative; width:100%; height:100vh; display:flex; justify-content:center; align-items:center; }

.arc-text img { position:absolute; top:0; left:50%; transform:translateX(-50%); }
.arc-text-left img { position:absolute; left:0px; top:50%; transform:translateY(-50%); }
.arc-text-right img { position:absolute; right:0px; top:50%; transform:translateY(-50%); }

.scroll-bottom { position:absolute; bottom:60px; right:60px }

.tagline { position:absolute; left:65%; top:40%; transform:translateY(-50%); font-size:26px; line-height:1.5; text-align:center; color:var(--green); }
.tagline-1 { position:absolute; left:70%; top:43%; transform:translateY(-50%); font-size:26px; line-height:1.5; text-align:center; color:var(--green); }

.title { font-weight:700; font-size:40px; line-height:50px; text-transform:uppercase; color:var(--green); }
.prtitle {font-weight:700; font-size:18px; line-height:20px; text-align:center; color:var(--brown); margin-top:20px}

.img-wrap { position:relative; display:inline-block; overflow:hidden; }
.img-wrap img { display:block; width:100%; height:auto; }

.img-wrap .overlay {
	position:absolute; top:0; right:0; width:80%; height:100%;
	background:var(--green); color:#fff; box-sizing:border-box;
	padding:1rem; display:flex; justify-content:flex-start; text-align:left;
	z-index:5; border-radius:20px 0 0 20px; opacity:0; transform:translateX(12%);
	transition:opacity .22s ease, transform .22s ease; pointer-events:none;
}

.img-wrap:hover .overlay,
.img-wrap:focus-within .overlay {
	opacity:1;
	transform:translateX(0);
	pointer-events:auto;
}

.overlay .text {
	font-size:20px; line-height:1.5; padding:20px; color:var(--light);
}

.bottom-arc-text-left { position:absolute; left:0px; top:50%; transform:translateY(-50%); }
.bottom-arc-text-right { position:absolute; right:0px; top:50%; transform:translateY(-50%); }
.bottom-arc-text-bottom { position:absolute; bottom:0px; left:50%; transform:translateX(-50%); }

.scroll-top { position:absolute; bottom:60px; right:60px }

.form{display:block}

.grid{
	display:flex;
	flex-direction:initial;
	gap:18px;
	row-gap:18px;  /* FIXED */
	margin-bottom: 18px;
}

.two-col input{flex:1}

input,select,textarea{
	background:transparent;
	border:1px solid var(--green);
	padding:14px;
	border-radius: 10px 0 0 0;
	color:var(--green);
	font-size:18px;
	width:100%;
}

input::placeholder, textarea::placeholder{color:var(--green)}

input:focus,textarea:focus,select:focus{
	outline:none;
	box-shadow:0 0 0 3px rgba(122,193,66,.06);
}

textarea{min-height:120px;width:100%}

.radios{display:block;margin:2px 0}
.radios label{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--light)}
.radios input[type=checkbox]{width:18px;height:18px;border-radius:50%;accent-color:var(--green)}

select{
	appearance:none;
	padding-right:48px;
	background-image:url('../images/dropdown.svg');
	background-position:calc(100% - 28px) calc(1em + 2px), calc(100% - 20px) calc(1em + 2px);
	background-repeat:no-repeat;
}

.consent{margin:18px 0}

.primary {
	background:var(--green);
	color: #4a3a27;
	border:none;
	padding:14px 22px;
	border-radius:10px 0 0 0;
	font-weight:700;
	cursor:pointer;
	margin-top:10px;
}

/* ===== Custom Circle Checkboxes ===== */

input[type="checkbox"] {
	appearance: none;
	border-radius: 50%;
	border: 2px solid var(--green);
	display: grid;
	place-content: center;
	padding:2px;
}

input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--green);
	transform: scale(0);
	transition: 0.2s all ease-in-out;
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

/* ===== Fancy Checkbox ===== */

.fancy-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--checkbox-gap);
	cursor: pointer;
	user-select: none;
	position: relative;
	font-family: inherit;
	color: inherit;
	line-height: 1;
	margin-top: 10px;
}

.fancy-checkbox input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.fancy-checkbox .fbox{
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	min-width: var(--checkbox-size);
	border-radius: 10px 0 0 0;
	box-sizing: border-box;
	border: var(--checkbox-border) solid var(--checkbox-border-muted);
	background: var(--brown);
	display: inline-block;
	position: relative;
	transition: background .18s ease, border-color .18s ease, transform .12s ease;
	flex-shrink: 0;
	overflow: hidden;
}

.fancy-checkbox .fbox::after {
    content: "";
    display: block;
    width: 43px;
    height: 43px;
}

.fancy-checkbox input[type="checkbox"]:checked + .fbox {
	background: var(--checkbox-color);
	border-color: var(--checkbox-color);
}

.fancy-checkbox input[type="checkbox"]:checked + .fbox::after {
	opacity: 1;
    background-image: url('../images/checkbox.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.fancy-checkbox input[type="checkbox"]:focus + .fbox {
	box-shadow: 0 0 0 6px var(--checkbox-focus-ring);
	outline: none;
}

.fancy-checkbox .label-text{
	font-size: 14px;
	display: inline-block;
}

.fancy-checkbox input[type="checkbox"]:disabled + .fbox {
	opacity: 0.55;
	cursor: not-allowed;
}

.fancy-checkbox input[type="checkbox"]:disabled ~ .label-text {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ===== Custom Select ===== */

.custom-select { width:100%; }

.select-toggle {
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	padding:10px 12px;
	border-radius:8px 0 0 0;
	background:var(--brown);
	border:1px solid var(--green);
	cursor:pointer;
	justify-content:space-between;
}

.select-placeholder { color:var(--green); }

.select-value {
	display:flex;
	align-items:center;
	gap:12px;
	flex:1;
	color:var(--green);
}

.options {
	margin:-1px 0 0 0;
	padding:2px;
	list-style:none;
	border:1px solid rgba(0,0,0,0.06);
	background:var(--brown);
	color:var(--light);
	display:none;
}

.custom-select.open .options {
	display:block;
	border:1px solid var(--green);
}

.options li {
	display:flex;
	align-items:center;
	gap:12px;
	padding:6px 6px;
	cursor:pointer;
	user-select:none;
	border-radius:6px;
}

.options li:hover {
	background: rgba(255,255,255,0.03);
}

.circle {
	width:18px;
	height:18px;
	min-width:18px;
	border-radius:50%;
	border:2px solid var(--green);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:transparent;
}

.dot {
	width:10px;
	height:10px;
	border-radius:50%;
	background:transparent;
	transition: background .12s;
}

.options li[aria-selected="true"] .dot {
	background:var(--green);
	box-shadow:0 0 0 3px rgba(120,192,67,0.06);
}

.caret {
	background-image:url('../images/dropdown.svg');
	width:42px;
	height:21px;
	background-repeat:no-repeat;
}