/* ============================================
   Wearabize brand overrides & new sections
   Primary purple #791B97 · Accent green #6ABC00
   ============================================ */

/* Import Arabic-capable webfont for Arabic strings */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root{
  --wz-purple:#791B97;
  --wz-purple-dark:#5A1273;
  --wz-green:#6ABC00;
  --wz-green-dark:#5CA800;
  --wz-ink:#1E1E1E;
}

/* Secondary / alternate button (outline green) */
.finves-btn-alt{
  background:transparent !important;
  border:2px solid var(--wz-green) !important;
  color:var(--wz-green) !important;
  margin-left:12px;
}
.finves-btn-alt:hover{
  background:var(--wz-green) !important;
  color:#fff !important;
}

/* Make header CTA pop in green */
.header-action a{
  background:var(--wz-green) !important;
}
.header-action a:hover{
  background:var(--wz-green-dark) !important;
}

/* RTL Arabic text in hero */
.slider-text h3[dir="rtl"]{
  direction:rtl;
  font-family:'Tajawal',sans-serif;
  font-weight:700;
}

/* ---- Stats / Why band ---- */
.wearabize-stats-area{
  background:var(--wz-purple);
  color:#fff;
}
.site-heading-light h4{ color:var(--wz-green); }
.site-heading-light h2{ color:#fff; }
.wearabize-stats-row{ margin-top:20px; }
.wearabize-stat{
  text-align:center;
  padding:24px 10px;
}
.wearabize-stat h2{
  color:#fff;
  font-size:46px;
  font-weight:800;
  margin-bottom:8px;
  line-height:1;
}
.wearabize-stat p{
  color:rgba(255,255,255,.85);
  margin:0;
  font-size:15px;
}
.wearabize-stats-note{
  color:rgba(255,255,255,.7);
  font-style:italic;
  font-size:14px;
  margin:0;
}

/* ---- Industries list ---- */
.wearabize-industry-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  padding:0;
  margin:30px 0 0;
  list-style:none;
}
.wearabize-industry-list li a{
  display:inline-block;
  padding:12px 22px;
  border:1px solid #e3e3e8;
  border-radius:40px;
  color:var(--wz-ink);
  font-weight:500;
  transition:all .25s ease;
  background:#fff;
}
.wearabize-industry-list li a:hover{
  background:var(--wz-purple);
  border-color:var(--wz-purple);
  color:#fff;
}

/* ---- Final CTA band ---- */
.wearabize-cta-area{
  background:var(--wz-green);
  padding:55px 0;
}
.wearabize-cta-area h2{
  color:#fff;
  margin:0 0 6px;
  font-weight:800;
}
.wearabize-cta-area p{
  color:rgba(255,255,255,.92);
  margin:0;
  font-size:17px;
}
.wearabize-cta-buttons{
  text-align:right;
  padding-top:14px;
}
.wearabize-cta-area .finves-btn{
  background:#fff !important;
  color:var(--wz-purple) !important;
}
.wearabize-cta-area .finves-btn:hover{
  background:var(--wz-purple-dark) !important;
  color:#fff !important;
}
.wearabize-cta-area .finves-btn-alt{
  background:transparent !important;
  border:2px solid #fff !important;
  color:#fff !important;
}
.wearabize-cta-area .finves-btn-alt:hover{
  background:#fff !important;
  color:var(--wz-green-dark) !important;
}

/* Footer copyright Arabic */
.copyright p span[dir="rtl"]{ font-family:'Tajawal',sans-serif; }

/* Header top extra links spacing */
.header-top-auth a{ white-space:nowrap; }

/* Responsive: stack CTA on mobile */
@media (max-width:991px){
  .wearabize-cta-buttons{ text-align:left; margin-top:18px; }
  .wearabize-stat h2{ font-size:38px; }
}

/* ---- Navigation fit: tighten spacing for 7 items ---- */
#navigation_menu > li{ margin-right:18px; }
#navigation_menu > li > a{ font-size:15px; }
.site-logo{ padding:12px 0; }
.site-logo img{ width:240px !important; max-width:none !important; height:auto !important; margin:10px 0 !important; }
@media (max-width:1169px){
  .site-logo img{ width:200px !important; }
}
@media (max-width:767px){
  .site-logo img{ width:180px !important; }
}
@media (min-width:992px){
  .mainmenu nav{ text-align:right; }
}

/* ---- Force single-line nav (override template padding) ---- */
@media (min-width:992px){
  #navigation_menu{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-items:center;
    white-space:nowrap;
  }
  #navigation_menu > li{ margin-right:14px; float:none; }
  #navigation_menu > li:last-child{ margin-right:0; }
  #navigation_menu > li > a{ padding:38px 2px; font-size:14.5px; }
  /* keep dropdowns positioned normally */
  #navigation_menu > li > ul{ white-space:normal; }
}

/* ---- Contact form select styling ---- */
.contact-form .wz-select{
  width:100%;
  padding:12px 15px;
  border:1px solid #e3e3e8;
  border-radius:4px;
  background:#fff;
  color:#555;
  font-size:14px;
  height:48px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.contact-form .wz-select:focus{
  border-color:var(--wz-purple);
  outline:none;
}

/* ---- Industries: always-visible sector label + hover detail ---- */
.finves-project-area .work-item .project-img{ position:relative; }
.finves-project-area .work-item .project-img:after{
  content:attr(data-label);
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(transparent, rgba(42,10,58,.92));
  color:#fff; font-weight:700; font-size:16px; text-align:left;
  z-index:2;
  transition:opacity .3s ease;
}
.finves-project-area .work-item:hover .project-img:after{ opacity:0; }
.finves-project-area .work-item:hover .content{ z-index:3; }
/* darken image on hover so white description text is readable */
.finves-project-area .work-item .project-img:before{
  background:rgba(121,27,151,.0);
  transition:background .3s ease;
}
.finves-project-area .work-item:hover .project-img:before{
  background:rgba(121,27,151,.85) !important;
}

/* ---- Quality workflow: sequential step badges 1-7 ---- */
.wz-step-1.mission-box-one:after{ content:"1"; }
.wz-step-2.mission-box-one:after{ content:"2"; }
.wz-step-3.mission-box-one:after{ content:"3"; }
.wz-step-4.mission-box-one:after{ content:"4"; }
.wz-step-5.mission-box-one:after{ content:"5"; }
.wz-step-6.mission-box-one:after{ content:"6"; }
.wz-step-7.mission-box-one:after{ content:"7"; }

/* ---- Hero text: keep within the dark panel, prevent overflow into purple ---- */
@media (min-width:992px){
  .slider-text{ width:42% !important; }
  .slider-text h3{ max-width:100%; }
  .slider-text p{ width:100% !important; max-width:100% !important; }
}
.slider-text h3{
  font-size:30px;
  line-height:42px;
  word-wrap:break-word;
}

/* ============================================
   Industries page (project-one.html) — redesigned
   ============================================ */
.wz-industries .wz-filter-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  padding:0; margin:30px 0 40px; list-style:none;
}
.wz-industries .wz-filter-btn{
  display:inline-block; padding:10px 22px;
  border:1.5px solid var(--wz-purple); border-radius:30px;
  color:var(--wz-purple); font-weight:600; font-size:14px;
  cursor:pointer; background:#fff;
  transition:all .2s ease;
  user-select:none;
}
.wz-industries .wz-filter-btn:hover{ background:#F4F0F8; }
.wz-industries .wz-filter-btn.active{
  background:var(--wz-purple); color:#fff;
}
.wz-industries .wz-sectors-grid{ margin-top:0; }
.wz-industries .wz-sector{ margin-bottom:30px; }
.wz-industries .wz-sector-card{
  background:#fff; border-radius:8px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border:1px solid #eee;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.wz-industries .wz-sector-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(121,27,151,.18);
}
.wz-industries .wz-sector-card img{
  width:100%; height:auto; display:block;
}
.wz-industries .wz-sector-body{
  padding:22px 22px 24px;
  flex:1;
}
.wz-industries .wz-sector-body h3{
  color:var(--wz-purple);
  font-size:18px; font-weight:700;
  margin:0 0 10px;
  line-height:1.3;
}
.wz-industries .wz-sector-body p{
  color:#555; font-size:14px; line-height:1.6; margin:0;
}

/* ============================================
   Knowledge Hub — Wearabize YouTube/Facebook content
   ============================================ */
.wearabize-hub-intro .wz-hub-stats{
  display:flex; flex-direction:column; gap:18px;
  padding:30px 26px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 18px rgba(121,27,151,.10);
  border-left:5px solid var(--wz-green);
}
.wz-hub-stat{ display:flex; flex-direction:column; gap:4px; }
.wz-hub-stat-num{ color:var(--wz-purple); font-size:32px; font-weight:800; line-height:1; }
.wz-hub-stat-label{ color:#555; font-size:14px; }

.wz-video-block{ margin:30px 0; }
.wz-video-cta-yt, .wz-video-cta-fb{
  display:block;
  padding:22px 26px;
  border-radius:10px;
  text-decoration:none !important;
  border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease;
  background:linear-gradient(135deg, #F4F0F8 0%, #ffffff 100%);
}
.wz-video-cta-yt{ border-color:#FF0000; }
.wz-video-cta-fb{ border-color:#1877F2; }
.wz-video-cta-yt:hover, .wz-video-cta-fb:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(121,27,151,.18);
}
.wz-video-cta-yt > i, .wz-video-cta-fb > i{
  font-size:28px; margin-right:14px; vertical-align:middle;
}
.wz-video-cta-yt > i{ color:#FF0000; }
.wz-video-cta-fb > i{ color:#1877F2; }
.wz-video-cta-label{
  display:inline-block;
  color:var(--wz-purple); font-weight:700; font-size:18px;
  vertical-align:middle;
}
.wz-video-cta-sub{
  display:block;
  margin-top:8px; margin-left:42px;
  color:#444; font-size:14px; line-height:1.5;
}

.wz-more-resources{
  margin:30px 0;
  padding:24px 28px;
  background:#F4F0F8;
  border-radius:8px;
  border-left:4px solid var(--wz-purple);
}
.wz-more-resources h3{
  color:var(--wz-purple);
  font-size:18px; font-weight:700;
  margin:0 0 14px;
}
.wz-more-resources ul{ list-style:none; padding:0; margin:0; }
.wz-more-resources ul li{
  margin-bottom:8px; color:#444; font-size:15px;
}
.wz-more-resources ul li i{ color:var(--wz-green); margin-right:8px; }
.wz-more-resources ul li a{
  color:var(--wz-purple); font-weight:600;
}

.wz-quicklinks-area .wz-quicklink-col{ margin-bottom:20px; }
.wz-quicklink{
  display:block;
  padding:20px 22px;
  background:#fff;
  border-radius:8px;
  text-decoration:none !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.wz-quicklink:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(121,27,151,.15);
}
.wz-quicklink > i{
  font-size:24px; margin-right:10px; vertical-align:middle;
}
.wz-quicklink-title{
  display:inline-block;
  color:var(--wz-purple); font-weight:700; font-size:16px;
  vertical-align:middle;
}
.wz-quicklink-sub{
  display:block;
  margin-top:10px;
  color:#666; font-size:13px; line-height:1.5;
}