/* =========================================================
   VENDOR PORTAL / SUPPLIERS — page styles (en/suppliers.html, ar/suppliers.html)
   Values taken from the live Elementor CSS (page id 40102 / 40100).
   ========================================================= */
body.hero-page { background: #fff !important; }

/* ---------- shared bits ---------- */
.sup-label { display: flex; align-items: center; gap: 6px; line-height: 30px; margin-bottom: 20px; font-family: "Marcellus", serif; font-size: 17px; font-weight: 400; text-transform: uppercase; color: #2C2C2C; }
.sup-label i { font-size: 14px; color: #2C2C2C; margin-top: -10px; }
.sup-title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C; margin: 0; }
.sup-title .brown { color: #85553A !important; }
.sup-text { font-family: "Marcellus", serif; font-size: 17px; font-weight: 400; line-height: 1.5; color: #7A7A7A; margin-top: 20px; }
.sup-text p + p { margin-top: 1em; }

/* brown Elementor "size-sm" button */
.sup-btn { display: inline-block; padding: 12px 24px; font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 15px; font-weight: 500; line-height: 1; color: #fff; background: #85553A; border: 0; border-radius: 0; transition: background .3s; }
.sup-btn:hover, .sup-btn:focus { background: #2C2C2C; color: #fff; }
.sup-actions { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 13px; }

/* ---------- 1. video banner ---------- */
/* the video's first frame (WebP, 59 KB) shows until the video itself plays */
.sup-banner { position: relative; min-height: 700px; overflow: hidden; background: #2C2C2C url("https://s3.nl-ams.scw.cloud/retal/media/Retal-Sound-poster.webp") center / cover no-repeat; }
.sup-banner video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, 177.78vh); height: max(100%, 56.25vw); min-width: 100%; min-height: 100%; object-fit: cover; }

/* ---------- 2/3. two-column sections ---------- */
.sup-split { padding: 80px 0; }
.sup-split__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.sup-split__img { text-align: end; }
.sup-split__img img { display: inline-block; width: 75%; height: auto; }
.sup-split--vendor .sup-split__img { text-align: start; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
	.sup-label { font-size: 13px; }
	.sup-title { font-size: 25px; line-height: 33px; }
	.sup-text { font-size: 13px; padding-right: 30px; }
	.sup-split { padding: 50px 20px; }
	.sup-split__img img { width: 85%; }
}
@media (max-width: 1024px) {
	.sup-split__img { display: none; }
	.sup-split__grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
	.sup-title { font-size: 20px; line-height: 30px; }
}
@media (max-width: 767px) {
	.sup-banner { min-height: 320px; }
	.sup-title { font-size: 20px; line-height: 32px; }
	.sup-text { padding: 10px 0 0; }
	.sup-split { padding: 4px 20px 50px; }
	.sup-split--about .sup-split__text { margin-top: 11px; }
	.sup-split--vendor .sup-split__text { margin-top: 15px; }
	.sup-actions { gap: 10px; }
}

/* =========================================================
   RTL (ar/suppliers.html)
   ========================================================= */
.rtl .sup-label { font-family: "29LTAzer-Light", sans-serif; }
.rtl .sup-title { font-family: "29LTZaridDisplayVF", sans-serif; font-weight: 700; }
.rtl .sup-text { font-family: "29LTAzer-Light", sans-serif; }
.rtl .sup-btn { font-family: "29LTZaridDisplayVF", sans-serif; font-weight: 700; }
/* AR column order: about = image first, vendor = text first */
.rtl .sup-split--about .sup-split__img { order: 1; text-align: start; }
.rtl .sup-split--about .sup-split__text { order: 2; }
.rtl .sup-split--vendor .sup-split__img { order: 2; text-align: end; }
.rtl .sup-split--vendor .sup-split__text { order: 1; }
@media (max-width: 1200px) {
	.rtl .sup-text { padding-right: 0; padding-left: 30px; }
}
@media (max-width: 767px) {
	.rtl .sup-text { padding: 10px 0 0; }
}