/*
Theme Name: Designary Theme
Theme URI: https://designarybh.com
Author: Designary
Author URI: https://designarybh.com
Description: ثيم مخصص لشركة Designary للتسويق والتكنولوجيا والدعاية والإعلان. مصمم بهوية بصرية دافئة (كحلي/بورجندي/برتقالي) مستوحاة من شعار الشركة.
Version: 1.0
License: Proprietary
Text Domain: designary
*/


  @font-face{
    font-family:'Madani Arabic';
    src: url('assets/fonts/MadaniArabic-Bold.woff2') format('woff2'),
         url('assets/fonts/MadaniArabic-Bold.woff') format('woff');
    font-weight:700;
    font-display:swap;
  }
  @font-face{
    font-family:'Madani Arabic';
    src: url('assets/fonts/MadaniArabic-Regular.woff2') format('woff2'),
         url('assets/fonts/MadaniArabic-Regular.woff') format('woff');
    font-weight:400;
    font-display:swap;
  }
  :root{
    --navy:#10203F;
    --navy-2:#1A2E54;
    --wine:#3D0F08;
    --wine-2:#6E1F0A;
    --orange:#FA8534;
    --orange-2:#F2822E;
    --coral:#E8542F;
    --gold:#D9A757;
    --cream:#FBF6EE;
    --cream-dim:rgba(251,246,238,0.72);
    --ink:#241208;
    --logo-ink:#2B2B2B;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{ background:var(--cream); font-family:'Inter','Tajawal',sans-serif; }

  @keyframes pulse{
    0%,100%{ opacity:.55; transform:scale(1); }
    50%{ opacity:.85; transform:scale(1.08); }
  }
  @keyframes drift1{
    0%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-40px,30px) scale(1.15); }
    100%{ transform:translate(0,0) scale(1); }
  }
  @keyframes drift2{
    0%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(35px,-25px) scale(0.9); }
    100%{ transform:translate(0,0) scale(1); }
  }
  @keyframes drift3{
    0%{ transform:translate(0,0) scale(1); opacity:.4; }
    50%{ transform:translate(-20px,-40px) scale(1.2); opacity:.65; }
    100%{ transform:translate(0,0) scale(1); opacity:.4; }
  }
  @keyframes gradientShift{
    0%,100%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
  }
  @media (prefers-reduced-motion: reduce){
    .glow-orb, .glow-orb-2, .glow-orb-3{ animation:none !important; }
    .hero{ animation:none !important; }
  }

  .hero{
    position:relative; overflow:hidden; min-height:740px;
    background:
      radial-gradient(650px 550px at 80% 85%, rgba(255,107,26,0.62), transparent 60%),
      radial-gradient(500px 420px at 88% 35%, rgba(217,167,87,0.28), transparent 65%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 28%, var(--wine) 60%, var(--wine-2) 80%, #B34A1D 100%);
    background-size:100% 100%, 100% 100%, 220% 220%;
    animation:gradientShift 16s ease-in-out infinite;
    padding:32px 56px 64px;
  }
  .glow-orb{
    position:absolute; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,140,60,0.55), transparent 70%);
    top:20%; right:6%; animation:pulse 5s ease-in-out infinite; pointer-events:none;
    filter:blur(6px);
  }
  .glow-orb-2{
    position:absolute; width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle, rgba(217,167,87,0.45), transparent 70%);
    bottom:8%; left:8%; animation:drift1 9s ease-in-out infinite; pointer-events:none;
    filter:blur(4px);
  }
  .glow-orb-3{
    position:absolute; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(232,84,47,0.4), transparent 70%);
    top:12%; left:30%; animation:drift2 7s ease-in-out infinite; pointer-events:none;
    filter:blur(4px);
  }
  .glow-orb-4{
    position:absolute; width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle, rgba(250,133,52,0.35), transparent 70%);
    bottom:30%; right:32%; animation:drift3 11s ease-in-out infinite; pointer-events:none;
    filter:blur(4px);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
  .nav-right-group{ display:flex; align-items:center; gap:34px; }
  .logo-wrap{ display:flex; align-items:center; background:var(--cream); padding:6px 14px; border-radius:10px; }
  .logo-full{ height:42px; width:auto; display:block; }
  .nav-links{ display:flex; gap:34px; list-style:none; margin:0; padding:0; }
  .nav-links a{ color:var(--cream-dim); text-decoration:none; font-family:'Tajawal',sans-serif; font-size:15px; font-weight:500; }
  .nav-cta{ background:var(--orange-2); color:var(--navy); font-weight:700; font-family:'Tajawal',sans-serif; padding:10px 22px; border-radius:30px; font-size:14px; border:none; cursor:pointer; }

  .hero-body{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:480px; margin-top:32px; text-align:center; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--gold); font-family:'Tajawal',sans-serif; font-size:15px; font-weight:500; border:1px solid rgba(217,167,87,0.45); padding:8px 20px; border-radius:30px; margin:0 auto 30px; }
  .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); }
  h1{ font-family:'Madani Arabic','Cairo',sans-serif; font-weight:800; color:var(--cream); font-size:72px; line-height:1.22; max-width:820px; margin:0 auto 26px; }
  h1 em{ font-style:normal; background:linear-gradient(90deg, var(--orange), var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .sub{ font-family:'Tajawal',sans-serif; color:var(--cream-dim); font-size:20px; line-height:1.8; max-width:640px; margin:0 auto 40px; }
  .sub .en{ display:block; font-family:'Inter',sans-serif; font-size:14px; color:rgba(251,246,238,0.5); margin-top:8px; direction:ltr; text-align:right; }
  .cta-row{ display:flex; gap:16px; margin-bottom:56px; justify-content:center; }
  .btn-primary{ background:var(--orange-2); color:var(--navy); font-family:'Tajawal',sans-serif; font-weight:700; font-size:16px; padding:15px 32px; border-radius:30px; border:none; cursor:pointer; box-shadow:0 10px 30px rgba(255,107,26,0.4); }
  .btn-secondary{ background:transparent; color:var(--cream); font-family:'Tajawal',sans-serif; font-weight:500; font-size:16px; padding:15px 30px; border-radius:30px; border:1px solid rgba(251,246,238,0.35); cursor:pointer; }
  .stats{ display:flex; gap:48px; position:relative; z-index:2; border-top:1px solid rgba(251,246,238,0.14); padding-top:28px; justify-content:center; }
  .stat-num{ font-family:'Sora',sans-serif; font-weight:800; font-size:32px; color:var(--cream); }
  .stat-num span{ color:var(--orange); font-size:20px; }
  .stat-label{ font-family:'Tajawal',sans-serif; font-size:13px; color:var(--cream-dim); margin-top:2px; }

  section{ padding:80px 56px; }
  .section-head{ text-align:center; max-width:560px; margin:0 auto 48px; }
  .section-eyebrow{ font-family:'Tajawal',sans-serif; color:var(--coral); font-weight:700; font-size:14px; margin-bottom:10px; }
  .section-title{ font-family:'Madani Arabic','Cairo',sans-serif; font-weight:800; font-size:34px; color:var(--ink); }

  .services{ background:var(--cream); }
  .service-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; max-width:1080px; margin:0 auto; }
  .service-card{ background:#fff; border-radius:20px; padding:34px 28px; border:1px solid rgba(36,18,8,0.06); transition:transform .25s ease, box-shadow .25s ease; }
  .service-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(230,90,30,0.15); }
  .service-icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; }
  .icon-orange{ background:rgba(242,135,43,0.14); color:var(--orange-2); }
  .icon-coral{ background:rgba(232,84,47,0.14); color:var(--coral); }
  .icon-gold{ background:rgba(217,167,87,0.18); color:#A97A2F; }
  .icon-navy{ background:rgba(18,23,46,0.08); color:var(--navy); }
  .service-card h3{ font-family:'Cairo',sans-serif; font-size:19px; font-weight:700; color:var(--ink); margin-bottom:10px; }
  .service-card p{ font-family:'Tajawal',sans-serif; font-size:14.5px; color:#5A4B3F; line-height:1.8; }

  .about{ background:linear-gradient(135deg, var(--navy), var(--navy-2)); color:var(--cream); }
  .about-wrap{ max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:60px; }
  .about-text{ flex:1; }
  .about-text .section-title{ color:var(--cream); text-align:right; }
  .about-text p{ font-family:'Tajawal',sans-serif; color:rgba(251,246,238,0.7); line-height:1.85; font-size:15px; margin-top:16px; }
  .about-bars{ flex:1; display:flex; flex-direction:column; gap:22px; }
  .bar-row{ }
  .bar-label{ display:flex; justify-content:space-between; font-family:'Tajawal',sans-serif; font-size:14px; color:var(--cream-dim); margin-bottom:8px; }
  .bar-label b{ color:var(--orange); font-family:'Sora',sans-serif; }
  .bar-track{ height:8px; background:rgba(251,246,238,0.12); border-radius:10px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:10px; background:linear-gradient(90deg, var(--orange), var(--gold)); }

  .testimonials{ background:#FBF3E8; }
  .test-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:1080px; margin:0 auto; }
  .test-card{ background:#fff; border-radius:18px; padding:28px 26px; border:1px solid rgba(36,18,8,0.06); }
  .test-card p{ font-family:'Tajawal',sans-serif; font-size:14.5px; color:#4A3B2E; line-height:1.9; margin-bottom:16px; }
  .test-name{ font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; color:var(--coral); }

  .cta-final{ background:linear-gradient(120deg, var(--wine), var(--orange-2)); text-align:center; }
  .cta-final .section-title{ color:var(--cream); }
  .cta-final p{ font-family:'Tajawal',sans-serif; color:rgba(251,246,238,0.85); margin:12px 0 30px; }

  .faq{ background:var(--cream); max-width:760px; margin:0 auto; padding:80px 56px; }
  .faq-item{ border-bottom:1px solid rgba(36,18,8,0.1); padding:22px 0; }
  .faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Cairo',sans-serif; font-weight:700; font-size:16px; color:var(--ink); }
  .faq-q span{ color:var(--orange-2); font-size:20px; }
  .faq-a{ font-family:'Tajawal',sans-serif; font-size:14.5px; color:#5A4B3F; line-height:1.85; margin-top:12px; }

  footer{ background:var(--navy); padding:48px 56px 28px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:center; max-width:1080px; margin:0 auto 30px; flex-wrap:wrap; gap:20px; }
  .footer-links{ display:flex; gap:26px; list-style:none; }
  .footer-links a{ color:var(--cream-dim); text-decoration:none; font-family:'Tajawal',sans-serif; font-size:14px; }
  .footer-social{ display:flex; gap:14px; }
  .footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(251,246,238,0.25); display:flex; align-items:center; justify-content:center; color:var(--cream); text-decoration:none; font-size:14px; }
  .footer-bottom{ text-align:center; font-family:'Tajawal',sans-serif; font-size:13px; color:rgba(251,246,238,0.45); border-top:1px solid rgba(251,246,238,0.1); padding-top:20px; }

  .page-banner{ position:relative; z-index:2; padding:36px 0 8px; }
  .page-banner h1{ font-size:38px; max-width:100%; margin-bottom:10px; }
  .page-banner .sub{ max-width:600px; }
  .content-section{ padding:70px 56px; }
  .content-wrap{ max-width:1080px; margin:0 auto; }
  .two-col{ display:flex; gap:56px; align-items:center; }
  .two-col > div{ flex:1; }
  .value-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:30px; }
  .value-card{ background:#fff; border-radius:16px; padding:26px 22px; border:1px solid rgba(36,18,8,0.06); }
  .value-card h3{ font-family:'Cairo',sans-serif; font-size:17px; font-weight:700; color:var(--ink); margin-bottom:8px; }
  .value-card p{ font-family:'Tajawal',sans-serif; font-size:14px; color:#5A4B3F; line-height:1.8; }
  .services-full-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:1080px; margin:0 auto; }
  .portfolio-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:1080px; margin:0 auto; }
  .portfolio-card{ border-radius:16px; overflow:hidden; border:1px solid rgba(36,18,8,0.06); background:#fff; }
  .portfolio-thumb{ height:180px; display:flex; align-items:center; justify-content:center; color:var(--cream); font-family:'Cairo',sans-serif; font-weight:700; font-size:15px; }
  .portfolio-body{ padding:18px 20px; }
  .portfolio-body h3{ font-family:'Cairo',sans-serif; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px; }
  .portfolio-body p{ font-family:'Tajawal',sans-serif; font-size:13.5px; color:#5A4B3F; }
  .portfolio-tag{ display:inline-block; font-family:'Tajawal',sans-serif; font-size:12px; color:var(--coral); background:rgba(232,84,47,0.1); padding:3px 10px; border-radius:20px; margin-top:10px; }
  .contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1080px; margin:0 auto; }
  .contact-info{ display:flex; flex-direction:column; gap:20px; }
  .contact-item{ display:flex; align-items:center; gap:14px; }
  .contact-icon{ width:44px; height:44px; border-radius:12px; background:rgba(242,135,43,0.14); color:var(--orange-2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
  .contact-item div p{ font-family:'Tajawal',sans-serif; font-size:14px; color:#5A4B3F; margin:0; }
  .contact-item div b{ font-family:'Cairo',sans-serif; font-size:15px; color:var(--ink); }
  .contact-form{ background:#fff; border-radius:18px; padding:30px; border:1px solid rgba(36,18,8,0.06); display:flex; flex-direction:column; gap:14px; }
  .contact-form label{ font-family:'Tajawal',sans-serif; font-size:13.5px; color:var(--ink); font-weight:500; margin-bottom:4px; display:block; }
  .contact-form input, .contact-form textarea{ width:100%; padding:11px 14px; border-radius:10px; border:1px solid rgba(36,18,8,0.14); font-family:'Tajawal',sans-serif; font-size:14px; background:#FBF6EE; }
  .contact-form textarea{ resize:vertical; min-height:100px; }
  .breadcrumb{ position:relative; z-index:2; font-family:'Tajawal',sans-serif; font-size:13px; color:var(--cream-dim); margin-bottom:14px; }
  .breadcrumb a{ color:var(--cream-dim); text-decoration:none; }
  .breadcrumb span{ color:var(--orange); }


/* ---------- WordPress core alignment helpers ---------- */
.alignleft{float:left; margin-right:1em;}
.alignright{float:right; margin-left:1em;}
.aligncenter{display:block; margin-left:auto; margin-right:auto;}
img{max-width:100%; height:auto;}
a{color:inherit;}

/* ---------- English (LTR) mode overrides ---------- */
body.lang-en{ direction:ltr; }
body.lang-en .sub .en{ display:none; }
body.lang-en .about-text .section-title{ text-align:left; }
body.lang-en h1, body.lang-en .section-title{ text-align:left; }
body.lang-en .about-wrap{ flex-direction:row-reverse; }
body.lang-en .lang-switch{ direction:ltr; }