/* RESET */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 62.5%; -webkit-text-size-adjust: 100%; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } :root { --primary: #155844; --primary-light: #1d6f55; --secondary: #d4b98c; --neutral-light: #f7f7f7; --neutral: #e5e5e5; --dark: #222; --white: #fff; --font-main: "Cairo", sans-serif; --fs-xs: clamp(1.1rem, 0.9vw, 1.3rem); --fs-sm: clamp(1.3rem, 0.9vw, 1.5rem); --fs-md: clamp(1.5rem, 1vw, 1.7rem); --fs-lg: clamp(1.8rem, 1.8vw, 2.2rem); --fs-xl: clamp(2.3rem, 2.6vw, 2.9rem); --fs-xxl: clamp(2.8rem, 3.5vw, 3.8rem); --space-xs: 0.8rem; --space-sm: 1.6rem; --space-md: 2.4rem; --space-lg: 3.2rem; --space-xl: 4.8rem; --container: 1200px; --radius: 1.2rem; --transition: 0.25s; } html[lang="ar"] body { direction: rtl; text-align: right; } html[lang="en"] body { direction: ltr; text-align: left; } body { font-family: var(--font-main); font-size: var(--fs-md); color: var(--dark); background: var(--white); line-height: 1.6; } .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-sm); font-weight: 800; color: var(--primary); line-height: 1.2; } h1 { font-size: var(--fs-xxl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0 0 var(--space-sm); font-size: var(--fs-md); } a { text-decoration: none; color: inherit; } :focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; } .section { padding: var(--space-xl) 0; } .section-bg { background: var(--neutral-light); } .skip-link { position: absolute; inset-inline-start: 1rem; top: 1rem; padding: 0.8rem 1.2rem; background: var(--white); border-radius: 0.8rem; transform: translateY(-200%); transition: transform var(--transition); z-index: 9999; } .skip-link:focus { transform: translateY(0); } @media (max-width: 768px) { html { font-size: 58%; } .section { padding: var(--space-lg) 0; } } @media (max-width: 480px) { html { font-size: 55%; } }