/* ==========================================================================
   BLEND — Design Tokens
   Extracted verbatim from the original Elementor Kit (elementor-kit-5)
   and the per-page CSS of blendksa.com. Do not invent values here.
   ========================================================================== */

:root{
  /* --- Brand palette (Elementor global colors) --- */
  --brand-primary:    #EF5E32;   /* --e-global-color-primary   */
  --brand-secondary:  #0D1E2A;   /* --e-global-color-secondary */
  --brand-text:       #A9B2BC;   /* --e-global-color-text      */
  --brand-accent:     #F9A447;   /* --e-global-color-accent    */

  /* --- Supporting colours (taken from original rules) --- */
  --page-bg:          #FEFEFE;
  --divider:          #989898;
  --slide-border:     #464646;
  --video-border:     #391C14;
  --field-bg:         #F1F1F1;
  --field-border:     #A7A7A7;
  --progress-track:   #E2E2E2F7;
  --social-icon:      #DADADA;
  --overlay-dark:     #0000009E;
  --scrolltop-bg:     #046BD2;

  /* --- Typography --- */
  --font-main: "DINNextLTArabic-Regular", "Almarai", sans-serif;
  --font-alt:  "Almarai", sans-serif;
  --line-base: 1.65;

  /* --- Layout (Elementor container model) --- */
  --container-max:  1140px;
  --con-padding:    10px;   /* Elementor default .e-con padding      */
  --con-gap:        20px;   /* Elementor default --widgets-spacing   */

  /* --- Asset base -----------------------------------------------------
     Every image, font and document is referenced from the live production
     site, byte for byte the original file. To move to local copies later,
     mirror /wp-content/uploads into assets/ and run one search & replace
     across assets/css/*.css and *.html:
        https://blendksa.com/wp-content/uploads  ->  assets/images
     ------------------------------------------------------------------ */
}

/* --- Fonts ------------------------------------------------------------ */
@font-face{
  font-family:'DINNextLTArabic-Regular';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/DINNextLTArabic-Regular.ttf?v=2') format('truetype');
}
/* The original site loads a single weight and lets the browser synthesise
   the 600 weight used by every heading — reproduced here 1:1. */
@font-face{
  font-family:'DINNextLTArabic-Regular';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/DINNextLTArabic-Regular.ttf?v=2') format('truetype');
}

/* --- Base ------------------------------------------------------------- */
html{ scroll-behavior:smooth; }

body{
  background-color:var(--page-bg);
  font-family:var(--font-main);
  font-size:16px;
  font-weight:400;
  line-height:var(--line-base);
  color:var(--brand-secondary);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; border:none; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-main);
  font-weight:600;
  margin:0;
  line-height:1.3;
}
p{ margin:0; }

/* Bootstrap resets we must neutralise so the original design wins */
.container,.container-fluid{ padding-inline:0; }
button{ font-family:inherit; }

/* Direction multiplier — mirrors Elementor's RTL handling */
[dir="rtl"]{ --direction-multiplier:-1; }
[dir="ltr"]{ --direction-multiplier: 1; }