/*
 * BSOURIA unified main hero
 * Identical structure and design for:
 * 1. Opportunities
 * 2. Welcome to Syria
 * 3. Business Directory
 * Only text, form destination, and image content differ.
 */
.bs-main-hero{
  --bs-hero-bg-start:#06140f;
  --bs-hero-bg-end:#123f2e;
  --bs-hero-border:#285340;
  --bs-hero-text:#ffffff;
  --bs-hero-muted:#c4d5cc;
  --bs-hero-green:#24c77d;
  --bs-hero-field:#071710;
  min-height:620px;
  padding:54px 0;
  background:
    radial-gradient(circle at 82% 25%,rgba(48,200,132,.17),transparent 36%),
    linear-gradient(90deg,var(--bs-hero-bg-start) 0%,#081a13 52%,var(--bs-hero-bg-end) 100%);
  color:var(--bs-hero-text);
  border-bottom:1px solid rgba(90,145,117,.24);
}

.bs-main-hero .container{
  max-width:1420px;
  margin:0 auto;
  padding-inline:28px;
}

.bs-main-hero__grid{
  min-height:512px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:72px;
  align-items:center;
}

.bs-main-hero__content{
  min-width:0;
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bs-main-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  align-self:flex-start;
  height:52px;
  padding:0 18px;
  border:1px solid var(--bs-hero-border);
  border-radius:999px;
  background:rgba(5,29,20,.72);
  color:#fff;
  font-size:15px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

[dir="rtl"] .bs-main-hero__eyebrow{align-self:flex-end;}

.bs-main-hero__eyebrow>span{
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:50%;
  background:#8bf2bb;
  box-shadow:0 0 0 5px rgba(139,242,187,.16);
}

.bs-main-hero h1{
  min-height:126px;
  margin:18px 0 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  font-size:clamp(42px,4.25vw,66px);
  line-height:1.12;
  letter-spacing:-1.6px;
  font-weight:850;
}

.bs-main-hero h1 span{color:var(--bs-hero-green);}

.bs-main-hero__content>p{
  min-height:82px;
  margin:0;
  color:var(--bs-hero-muted);
  font-size:18px;
  line-height:1.9;
  max-width:720px;
}

.bs-main-hero__search{
  width:100%;
  height:78px;
  margin-top:24px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--bs-hero-border);
  border-radius:18px;
  background:rgba(7,25,18,.72);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.bs-main-hero__search-icon{
  width:32px;
  flex:0 0 32px;
  text-align:center;
  color:#38d390;
  font-size:25px;
}

.bs-main-hero__search input{
  min-width:0;
  flex:1;
  height:56px;
  padding:0 8px;
  border:0!important;
  outline:0;
  box-shadow:none!important;
  background:transparent!important;
  color:#fff!important;
  font:inherit;
  font-size:16px;
}

.bs-main-hero__search input::placeholder{color:#839d90;opacity:1;}

.bs-main-hero__search .btn{
  min-width:148px;
  height:56px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
}

.bs-main-hero__media{
  width:100%;
  height:430px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:26px;
  background:transparent;
}

.bs-main-hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:26px;
}

/* Light mode keeps the exact same structure and dimensions. */
html[data-theme="light"] .bs-main-hero,
body[data-theme="light"] .bs-main-hero{
  --bs-hero-bg-start:#f4fbf7;
  --bs-hero-bg-end:#e9f7ef;
  --bs-hero-border:#c8e3d5;
  --bs-hero-text:#0a2419;
  --bs-hero-muted:#536a60;
  --bs-hero-field:#ffffff;
  background:
    radial-gradient(circle at 18% 18%,rgba(49,190,124,.16),transparent 35%),
    linear-gradient(90deg,#f8fcfa 0%,#ffffff 52%,#eaf8f0 100%);
  color:var(--bs-hero-text);
}

html[data-theme="light"] .bs-main-hero h1,
body[data-theme="light"] .bs-main-hero h1{color:#10271e;}
html[data-theme="light"] .bs-main-hero__eyebrow,
body[data-theme="light"] .bs-main-hero__eyebrow{
  background:#fff;
  color:#0c7548;
}
html[data-theme="light"] .bs-main-hero__search,
body[data-theme="light"] .bs-main-hero__search{background:#fff;}
html[data-theme="light"] .bs-main-hero__search input,
body[data-theme="light"] .bs-main-hero__search input{color:#163027!important;}

@media (max-width:980px){
  .bs-main-hero{min-height:0;padding:42px 0;}
  .bs-main-hero__grid{min-height:0;grid-template-columns:1fr;gap:34px;}
  .bs-main-hero__content{min-height:0;}
  .bs-main-hero h1{min-height:0;font-size:clamp(38px,8vw,56px);}
  .bs-main-hero__content>p{min-height:0;}
  .bs-main-hero__media{height:auto;aspect-ratio:4/3;}
  .bs-main-hero__media img{height:100%;}
}

@media (max-width:640px){
  .bs-main-hero .container{padding-inline:18px;}
  .bs-main-hero__grid{gap:26px;}
  .bs-main-hero__eyebrow{height:46px;padding:0 14px;font-size:13px;}
  .bs-main-hero h1{margin-top:14px;font-size:clamp(34px,11vw,46px);}
  .bs-main-hero__content>p{font-size:16px;line-height:1.75;}
  .bs-main-hero__search{height:auto;min-height:70px;flex-wrap:wrap;}
  .bs-main-hero__search input{min-width:calc(100% - 46px);}
  .bs-main-hero__search .btn{width:100%;}
  .bs-main-hero__media{border-radius:20px;}
  .bs-main-hero__media img{border-radius:20px;}
}

/* Keep the Welcome to Syria hero title on one line on desktop. */
@media (min-width:981px){
  .welcome-syria-page .bs-main-hero h1{
    display:block !important;
    min-height:126px;
    white-space:nowrap;
    align-content:center;
    padding-top:24px;
  }

  .welcome-syria-page .bs-main-hero h1 span{
    display:inline !important;
  }
}

/* Arabic RTL: align the small hero title/badge to the physical right edge. */
html[dir="rtl"] .bs-main-hero__eyebrow,
body[dir="rtl"] .bs-main-hero__eyebrow,
[dir="rtl"] .bs-main-hero__eyebrow{
  width:fit-content !important;
  max-width:100% !important;
  align-self:flex-start !important; /* flex-start is the right side in RTL */
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
  direction:rtl !important;
  justify-content:flex-start !important;
}


/* =========================================================
   BSOURIA V2 — FINAL IDENTICAL HERO SYSTEM
   Opportunities + Welcome to Syria + Business Directory
   Exact same desktop height, columns, content slots, image size,
   background, spacing and responsive behavior.
   ========================================================= */

:root{
  --bs-identical-hero-height:620px;
  --bs-identical-hero-inner-height:532px;
  --bs-identical-hero-column-height:430px;
  --bs-identical-hero-image-height:430px;
  --bs-identical-hero-gap:48px;
  --bs-identical-hero-radius:26px;
  --bs-identical-hero-title:clamp(42px,3.55vw,54px);
  --bs-identical-hero-copy:17px;
}

/* One visual background for all three pages. */
.bs-main-hero,
.bd-hero{
  background:
    radial-gradient(circle at 82% 24%,rgba(45,194,126,.17),transparent 36%),
    linear-gradient(90deg,#06140f 0%,#081a13 52%,#123f2e 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(90,145,117,.24) !important;
}

@media (min-width:981px){

  /* Exact outer hero box. */
  .bs-main-hero,
  .bd-hero{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    height:var(--bs-identical-hero-height) !important;
    min-height:var(--bs-identical-hero-height) !important;
    max-height:var(--bs-identical-hero-height) !important;
    padding:44px 0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .bs-main-hero > .container,
  .bd-hero > .container{
    width:min(1420px,calc(100% - 48px)) !important;
    max-width:1420px !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
  }

  /* Exact 50/50 grid. */
  .bs-main-hero__grid,
  .bd-hero-grid{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:var(--bs-identical-hero-gap) !important;
    align-items:center !important;
    width:100% !important;
    height:var(--bs-identical-hero-inner-height) !important;
    min-height:var(--bs-identical-hero-inner-height) !important;
    max-height:var(--bs-identical-hero-inner-height) !important;
  }

  /* Exact text-column box. */
  .bs-main-hero__content,
  .bd-hero-copy{
    position:relative !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    width:100% !important;
    height:var(--bs-identical-hero-column-height) !important;
    min-height:var(--bs-identical-hero-column-height) !important;
    max-height:var(--bs-identical-hero-column-height) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Same small title/badge. */
  .bs-main-hero__eyebrow,
  .bd-eyebrow{
    box-sizing:border-box !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    width:max-content !important;
    max-width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 17px !important;
    border:1px solid #285340 !important;
    border-radius:999px !important;
    background:rgba(5,29,20,.72) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    white-space:nowrap !important;
  }

  .bd-eyebrow:before{
    width:10px !important;
    height:10px !important;
    flex:0 0 10px !important;
    background:#8bf2bb !important;
    box-shadow:0 0 0 5px rgba(139,242,187,.16) !important;
  }

  html[dir="rtl"] .bs-main-hero__eyebrow,
  html[dir="rtl"] .bd-eyebrow{
    align-self:flex-start !important;
    margin-left:auto !important;
    margin-right:0 !important;
    direction:rtl !important;
    text-align:right !important;
  }

  /* Same title slot and typography. */
  .bs-main-hero h1,
  .bd-hero-copy h1{
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    width:100% !important;
    height:126px !important;
    min-height:126px !important;
    max-height:126px !important;
    margin:14px 0 10px !important;
    padding:0 !important;
    overflow:hidden !important;
    color:#fff !important;
    font-size:var(--bs-identical-hero-title) !important;
    font-weight:800 !important;
    line-height:1.16 !important;
    letter-spacing:0 !important;
    text-wrap:balance !important;
  }

  .bs-main-hero h1 span{color:#24c77d !important;}

  /* Same description slot. */
  .bs-main-hero__content > p,
  .bd-hero-copy > p{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:none !important;
    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    color:#c4d5cc !important;
    font-size:var(--bs-identical-hero-copy) !important;
    line-height:1.9 !important;
  }

  /* Exact same search height and shell. */
  .bs-main-hero__search,
  .bd-hero-search{
    box-sizing:border-box !important;
    width:100% !important;
    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
    margin:22px 0 0 !important;
    padding:10px !important;
    border:1px solid #285340 !important;
    border-radius:18px !important;
    background:rgba(7,25,18,.78) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.12) !important;
  }

  .bs-main-hero__search{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* Business Directory search becomes the same one-line hero search. */
  .bd-hero-search{
    display:grid !important;
    grid-template-columns:minmax(220px,1.5fr) minmax(145px,.72fr) minmax(145px,.72fr) auto !important;
    align-items:center !important;
    gap:10px !important;
  }

  .bd-search-field{
    box-sizing:border-box !important;
    height:56px !important;
    min-height:56px !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#071710 !important;
  }

  .bd-search-field input{
    height:56px !important;
    padding:0 6px !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  .bd-search-field input::placeholder{
    color:#839d90 !important;
    opacity:1 !important;
  }

  .bd-hero-filters{
    display:contents !important;
    padding:0 !important;
  }

  .bd-hero-filters select{
    box-sizing:border-box !important;
    width:100% !important;
    height:56px !important;
    min-height:56px !important;
    padding-inline:14px 38px !important;
    border:1px solid #315b48 !important;
    border-radius:12px !important;
    background:#071710 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:14px !important;
    font-weight:700 !important;
  }

  .bd-hero-filters .btn,
  .bs-main-hero__search .btn{
    box-sizing:border-box !important;
    min-width:142px !important;
    height:56px !important;
    min-height:56px !important;
    padding:0 22px !important;
    border-radius:13px !important;
    font-size:16px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  /* Keep guide link without changing the hero height. */
  .bd-guide-jump{
    position:absolute !important;
    inset-inline-start:0 !important;
    bottom:0 !important;
    margin:0 !important;
    color:#fff !important;
    font-size:14px !important;
  }

  /* Exact image-column and image rectangle. */
  .bs-main-hero__media,
  .bd-hero-media-column{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:var(--bs-identical-hero-column-height) !important;
    min-height:var(--bs-identical-hero-column-height) !important;
    max-height:var(--bs-identical-hero-column-height) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .bd-hero-media-column{
    flex-direction:column !important;
  }

  .bs-main-hero__media,
  .bd-hero-visual{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:none !important;
    height:var(--bs-identical-hero-image-height) !important;
    min-height:var(--bs-identical-hero-image-height) !important;
    max-height:var(--bs-identical-hero-image-height) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:var(--bs-identical-hero-radius) !important;
    background:transparent !important;
    box-shadow:none !important;
    aspect-ratio:auto !important;
    transform:none !important;
  }

  .bs-main-hero__media img,
  .bd-hero-visual > img{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:var(--bs-identical-hero-image-height) !important;
    min-height:var(--bs-identical-hero-image-height) !important;
    max-height:var(--bs-identical-hero-image-height) !important;
    margin:0 !important;
    border-radius:var(--bs-identical-hero-radius) !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
  }

  .bd-visual-badges{
    inset:auto 18px 18px !important;
  }
}

/* Light mode: same dimensions, only colors change. */
html[data-theme="light"] .bs-main-hero,
body[data-theme="light"] .bs-main-hero,
html[data-theme="light"] .bd-hero,
body[data-theme="light"] .bd-hero{
  background:
    radial-gradient(circle at 18% 18%,rgba(49,190,124,.16),transparent 35%),
    linear-gradient(90deg,#f8fcfa 0%,#fff 52%,#eaf8f0 100%) !important;
  color:#10271e !important;
  border-bottom-color:#d8e8df !important;
}

html[data-theme="light"] .bs-main-hero h1,
body[data-theme="light"] .bs-main-hero h1,
html[data-theme="light"] .bd-hero-copy h1,
body[data-theme="light"] .bd-hero-copy h1{
  color:#10271e !important;
}

html[data-theme="light"] .bs-main-hero__content > p,
body[data-theme="light"] .bs-main-hero__content > p,
html[data-theme="light"] .bd-hero-copy > p,
body[data-theme="light"] .bd-hero-copy > p{
  color:#536a60 !important;
}

html[data-theme="light"] .bs-main-hero__eyebrow,
body[data-theme="light"] .bs-main-hero__eyebrow,
html[data-theme="light"] .bd-eyebrow,
body[data-theme="light"] .bd-eyebrow{
  background:#fff !important;
  color:#0c7548 !important;
  border-color:#c8e3d5 !important;
}

html[data-theme="light"] .bs-main-hero__search,
body[data-theme="light"] .bs-main-hero__search,
html[data-theme="light"] .bd-hero-search,
body[data-theme="light"] .bd-hero-search{
  background:#fff !important;
  border-color:#c8e3d5 !important;
}

html[data-theme="light"] .bd-search-field,
body[data-theme="light"] .bd-search-field,
html[data-theme="light"] .bd-hero-filters select,
body[data-theme="light"] .bd-hero-filters select{
  background:#f8fcfa !important;
  color:#163027 !important;
  -webkit-text-fill-color:#163027 !important;
  border-color:#c8e3d5 !important;
}

html[data-theme="light"] .bd-search-field input,
body[data-theme="light"] .bd-search-field input{
  color:#163027 !important;
  -webkit-text-fill-color:#163027 !important;
}

/* Responsive: all three switch to the same stacked layout. */
@media (max-width:980px){
  .bs-main-hero,
  .bd-hero{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:40px 0 !important;
    overflow:visible !important;
  }

  .bs-main-hero__grid,
  .bd-hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:30px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .bs-main-hero__content,
  .bd-hero-copy,
  .bs-main-hero__media,
  .bd-hero-media-column{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .bs-main-hero h1,
  .bd-hero-copy h1{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:14px 0 !important;
    font-size:clamp(36px,7.5vw,50px) !important;
  }

  .bs-main-hero__content > p,
  .bd-hero-copy > p{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    font-size:16px !important;
  }

  .bs-main-hero__media,
  .bd-hero-visual{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:16/10 !important;
    border-radius:22px !important;
  }

  .bs-main-hero__media img,
  .bd-hero-visual > img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:22px !important;
  }

  .bd-hero-search{
    display:grid !important;
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:10px !important;
  }

  .bd-hero-filters{
    display:grid !important;
    grid-template-columns:1fr 1fr auto !important;
    gap:10px !important;
  }

  .bd-guide-jump{
    position:static !important;
    display:inline-block !important;
    margin-top:12px !important;
  }
}

@media (max-width:640px){
  .bs-main-hero,
  .bd-hero{padding:30px 0 !important;}

  .bs-main-hero > .container,
  .bd-hero > .container{
    width:calc(100% - 28px) !important;
  }

  .bs-main-hero__eyebrow,
  .bd-eyebrow{
    height:44px !important;
    min-height:44px !important;
    padding:0 13px !important;
    font-size:13px !important;
    white-space:normal !important;
  }

  .bs-main-hero h1,
  .bd-hero-copy h1{
    font-size:clamp(32px,10vw,43px) !important;
    line-height:1.2 !important;
  }

  .bs-main-hero__search{
    height:auto !important;
    min-height:70px !important;
    max-height:none !important;
    flex-wrap:wrap !important;
  }

  .bs-main-hero__search input{
    min-width:calc(100% - 46px) !important;
  }

  .bs-main-hero__search .btn{
    width:100% !important;
  }

  .bd-hero-filters{
    grid-template-columns:1fr !important;
  }

  .bd-hero-filters .btn{
    width:100% !important;
  }
}

/* =========================================================
   BSOURIA PATCH — Force hero small badge text to white in dark mode
   ========================================================= */
:is(html[data-theme="dark"],html.dark,body[data-theme="dark"],body.dark,body.dark-mode) .home-eyebrow-v35,
:is(html[data-theme="dark"],html.dark,body[data-theme="dark"],body.dark,body.dark-mode) .bs-main-hero__eyebrow,
:is(html[data-theme="dark"],html.dark,body[data-theme="dark"],body.dark,body.dark-mode) .bd-eyebrow,
:is(html[data-theme="dark"],html.dark,body[data-theme="dark"],body.dark,body.dark-mode) .ws-eyebrow,
:is(html[data-theme="dark"],html.dark,body[data-theme="dark"],body.dark,body.dark-mode) .section-kicker,
html[data-theme="dark"] .home-eyebrow-v35,
html[data-theme="dark"] .bs-main-hero__eyebrow,
html[data-theme="dark"] .bd-eyebrow,
html[data-theme="dark"] .ws-eyebrow,
html[data-theme="dark"] .section-kicker,
[data-theme="dark"] .home-eyebrow-v35,
[data-theme="dark"] .bs-main-hero__eyebrow,
[data-theme="dark"] .bd-eyebrow,
[data-theme="dark"] .ws-eyebrow,
[data-theme="dark"] .section-kicker{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}