:root {
      --gold: #E0B422;
      --gold-dark: #C9A31E;
      --ink: #2B2B2B;
      --muted: #666;
      --cream: #FFF9F0;
      --white: #ffffff;
      --main: #FCF6E0;
      --nav-bg: rgba(255, 249, 240, .75);
      --nav-bg-solid: #fff9f0;
      --shadow: 0 10px 30px rgba(215, 215, 215, 0.06);
      --hero-overlay: linear-gradient(90deg, rgba(255, 249, 240, .82) 0%, rgba(255, 249, 240, .70) 30%, rgba(255, 249, 240, .35) 60%, rgba(255, 249, 240, .0) 100%);
      --hero-image: url('./images/hero\ section.png');
    }
  @media (max-width: 600px) {
  .hero::before {
    background-size: 90% auto !important;
    background-position: center  !important;
    background-repeat: no-repeat;
  }
}
@media (max-width: 400px) {
  .hero::before {
    background-size: 80% auto !important;
    background-position: center 90px !important;
        background-repeat: no-repeat;

  }
}


    body {
      margin: 0;
      font-family: 'IBM Plex Sans Arabic', sans-serif;
      color: var(--ink);
      background-color: var(--main);
    }

    a {
      text-decoration: none;
      color: inherit
    }

    .container-1 {
      width: min(1180px, 92vw);
      margin-inline: auto
    }

    .navbar {
      position: fixed;
      inset-inline: 0;
      top: 0;
      z-index: 50;
      transition: background .25s ease, box-shadow .25s ease;
      padding-block: 10px
    }

    .navbar-inner {
      display: flex;
      align-items: center;
      gap: 24px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      color: #1d1d1d
    }

    .brand .logo {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--gold);
      color: #111;
      font-weight: 900;
      box-shadow: var(--shadow)
    }

    .nav-links {
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      gap: 22px
    }

    .nav-links a {
      color: var(--white);
      opacity: .9;
      font-weight: 600
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gold);
      color: #ffffff;
      padding: 10px 16px;
      border-radius: 999px;
      font-weight: 800;
      box-shadow: var(--shadow);
      border: 2px solid transparent;
      transition: transform .15s ease, background .2s ease
    }

    .nav-cta:hover {
      transform: translateY(-1px);
      background: var(--gold-dark)
    }

    .nav-cta .wa {
      width: 18px;
      height: 18px;
      display: inline-block;
      background: currentColor;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M20.52 3.48A11.82 11.82 0 0012.04 0C5.72 0 .6 5.12.6 11.44c0 2.01.53 3.98 1.54 5.73L0 24l6.99-2.07a11.4 11.4 0 005.05 1.22h.01c6.32 0 11.44-5.12 11.44-11.44 0-3.06-1.19-5.94-3.36-8.11zM12.05 21.1h-.01a9.64 9.64 0 01-4.92-1.35l-.35-.21-4.15 1.23 1.24-4.05-.23-.36A9.62 9.62 0 012.44 11.4c0-5.31 4.31-9.62 9.62-9.62 2.57 0 4.98 1 6.8 2.82a9.51 9.51 0 012.82 6.8c0 5.31-4.31 9.62-9.62 9.62zm5.54-7.2c-.3-.15-1.77-.87-2.05-.98-.28-.1-.49-.15-.7.15-.2.3-.8.98-.98 1.18-.18.2-.36.22-.66.07-.3-.15-1.27-.47-2.42-1.5-.89-.79-1.49-1.76-1.67-2.06-.18-.3-.02-.46.13-.6.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.7-1.7-.96-2.33-.25-.61-.5-.53-.7-.53-.18-.01-.37-.01-.56-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.22 3.07c.15.2 2.1 3.2 5.07 4.49.71.31 1.27.5 1.7.64.71.23 1.36.19 1.87.11.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg>') center / contain no-repeat
    }

    .navbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      gap: 24px;
    }

    .brand {
      flex: 0 0 auto;
    }

    .nav-links {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .burger {
      flex: 0 0 auto;
    }

    .burger {
      display: none;
      inline-size: 40px;
      block-size: 40px;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, .08);
      background: #E0B422;
      backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center
    }

    .burger span {
      width: 18px;
      height: 2px;
      background: #ffffff;
      position: relative;
      display: block
    }

    .burger span::before,
    .burger span::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 2px;
      background: #ffffff;
      inset-inline-start: 0
    }

    .burger span::before {
      transform: translateY(-6px)
    }

    .burger span::after {
      transform: translateY(6px)
    }

    .nav-solid {
      background: var(--nav-bg-solid);
      box-shadow: var(--shadow)
    }

    .nav-soft {
      background: var(--ink);
      backdrop-filter: blur(10px)
    }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 100vh;
      display: grid;
      align-items: center
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--hero-image);
      background-size: cover;
      background-position: center;
      z-index: -2
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: min(5vw, 48px);
      align-items: center
    }

    .hero .title {
      font-size: clamp(24px, 3.2vw, 44px);
      line-height: 1.3;
      margin: 0 0 14px
    }

    .hero .lead {
      color: var(--muted);
      font-size: clamp(14px, 1.2vw, 17px);
      margin: 0 0 20px
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gold);
      color: #ffffff;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 800;
      border: 2px solid transparent;
      box-shadow: var(--shadow)
    }

    .cta:hover {
      background: var(--gold-dark)
    }

    #mobileMenu .nav-cta {
      display: none;
    }

    .hex {
      display: none
    }

    .name {
      color: var(--gold-dark);
    }

    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 26px
      }

      .navbar .nav-links {
        display: none
      }

      .burger {
        display: flex;
        margin-inline-start: auto
      }

      .mobile-menu {
        display: none;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--ink);
        border-top: 1px solid rgba(0, 0, 0, .06);
        box-shadow: var(--shadow)
      }

      .mobile-menu.open {
        display: block
      }

      .mobile-menu a {
        display: block;
        padding: 16px 24px;
        color: var(--white)
      }

      .mobile-menu {
        box-shadow: var(--shadow);
        margin-top: 15px;
        border-radius: 3px;
      }
    }

    .sec-title {
      text-align: center;
      font-weight: 700;
      font-size: clamp(20px, 2.2vw, 28px);
      margin: 10px auto 22px auto;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .service-pill {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      padding: 18px 18px 18px 18px;
      border-radius: 999px;
      border: 3px solid #ffffff;
      overflow: hidden;
      width: 420px;
      justify-content: center;
    }

    .service-pill .pill-body {
      padding-inline: 18px;
    }

    .pill-title {
      margin: 0 0 6px;
      font-size: clamp(15px, 1.6vw, 18px);
      font-weight: 700;
    }

    .pill-desc {
      margin: 0;
      color: var(--muted);
      font-size: clamp(12px, 1.2vw, 14px);
      line-height: 1.8;
    }

    .pill-icon {
      inline-size: 72px;
      block-size: 72px;
      display: grid;
      place-items: center;
      margin-inline: 10px;
    }

    .soft-lilac {
      background: #E7F6F1
    }

    .soft-mint {
      background: #E7F6F1
    }

    .container {
      max-width: 1400px;
      margin: auto;
    }

    /* ===== Mobile only (≤ 600px) ===== */
    @media (max-width: 600px) {
      #services.container {
        padding-inline: 16px;
      }

      .services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        justify-items: stretch;
      }

      .service-pill {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 14px 16px;
        border-radius: 24px;
      }

      .service-pill .pill-body {
        padding-inline: 0;
        text-align: center;
      }

      .pill-title {
        line-height: 1.4;
      }

      .pill-desc {
        line-height: 1.8;
      }

      .service-pill>div[aria-hidden="true"] {
        display: grid;
        place-items: center;
        margin-top: 10px;
      }

      .service-pill img {
        max-width: 160px;
        width: 100%;
        height: auto;
        display: block;
      }
    }

    @media (max-width: 400px) {
      #services.container {
        padding-inline: 10px;
      }

      .services-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        justify-items: center;
      }

      .service-pill {
        width: 100%;
        max-width: 340px;
        grid-template-columns: 1fr;
        padding: 12px 14px;
        border-radius: 20px;
        text-align: center;
      }

      .service-pill .pill-body {
        padding-inline: 0;
      }

      .pill-title {
        font-size: 16px;
        margin-bottom: 6px;
      }

      .pill-desc {
        font-size: 13px;
        line-height: 1.7;
      }

      .service-pill>div[aria-hidden="true"] {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }

      .service-pill img {
        max-width: 120px;
        width: 100%;
        height: auto;
      }
    }

    /* ===== branches (Cards) ===== */
    .branches {
      padding-block: 12px 40px;
      margin-bottom: 30px;
    }

    .branches-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    .branch-card {
      background: var(--cream);
      border: 2px solid var(--gold);
      border-radius: 70px;
      padding: 16px 22px;
      display: flex;
      align-items: center;
      gap: 16px;
      text-align: start;
    }

    .branch-img img {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid var(--gld);
    }

    .branch-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .branch-name {
      margin: 4px 0;
      font-size: clamp(14px, 1.4vw, 18px);
      font-weight: 700;
    }

    .branch-phone {
      color: #333;
      font-weight: 600;
      letter-spacing: .2px;
    }

    .branch-phone:hover {
      text-decoration: underline;
    }

    /* ===== Responsive ===== */
    @media (max-width: 1100px) {
      .branches-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .branches-grid {
        grid-template-columns: 1fr;
      }

      .branch-card {
        border-radius: 26px;
        flex-direction: row;
      }
    }

    /* ===== Responsive ===== */
    @media (max-width: 1100px) {
      .services-grid {
        grid-template-columns: 1fr 1fr;
      }

      .branches-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .services-grid {
        grid-template-columns: 1fr;
      }

      .service-pill {
        grid-template-columns: 1fr auto;
        border-radius: 28px;
      }

      .pill-icon {
        inline-size: 64px;
        block-size: 64px;
      }

      .branches-grid {
        grid-template-columns: 1fr;
      }

      .branch-card {
        border-radius: 26px;
        margin: 15px;
      }
    }

    .contact-whatsapp {
      padding-block: 60px;
    }

    .whatsapp-card {
      width: 800px;
      height: 300px;
      background: var(--cream);
      border: 1.5px solid var(--gold);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: visible;
      box-shadow: 0 10px 30px rgba(215, 215, 215, 0.15);
      position: relative;
      margin: auto;
      margin-top: 80px;
    }

    .whatsapp-content {
      flex: 1;
      padding: 40px;
      text-align: right;
      color: #665c2e;
      z-index: 2;
    }

    .whatsapp-content h3 {
      font-size: clamp(20px, 2vw, 26px);
      margin-bottom: 10px;
      color: var(--gold-dark);
    }

    .whatsapp-content p {
      font-size: clamp(15px, 1.2vw, 18px);
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .whatsapp-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--white);
      padding: 10px 20px;
      border-radius: 999px;
      font-weight: 700;
      transition: transform 0.2s ease;
    }

    .whatsapp-btn:hover {
      transform: translateY(-2px);
    }

    .whatsapp-btn .wa {
      width: 18px;
      height: 18px;
      background: currentColor;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M20.52 3.48A11.82 11.82 0 0012.04 0C5.72 0 .6 5.12.6 11.44c0 2.01.53 3.98 1.54 5.73L0 24l6.99-2.07a11.4 11.4 0 005.05 1.22h.01c6.32 0 11.44-5.12 11.44-11.44 0-3.06-1.19-5.94-3.36-8.11zM12.05 21.1h-.01a9.64 9.64 0 01-4.92-1.35l-.35-.21-4.15 1.23 1.24-4.05-.23-.36A9.62 9.62 0 012.44 11.4c0-5.31 4.31-9.62 9.62-9.62 2.57 0 4.98 1 6.8 2.82a9.51 9.51 0 012.82 6.8c0 5.31-4.31 9.62-9.62 9.62z"/></svg>') center / contain no-repeat;
    }

    .whatsapp-image {
      flex: 1;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 380px;
      z-index: 1;
    }

    .whatsapp-image img {
      height: 100%;
      width: auto;
      display: block;
    }

    .mobileMenu {
      display: none;
    }

    /* ===== Responsive ===== */
    /* === Mobile only (≤ 600px) === */
    @media (max-width: 600px) {
      .whatsapp-card {
        width: 100%;
        max-width: none;
        height: auto;
        flex-direction: column-reverse;
        margin-top: 40px;
        width: 350px;
      }

      .whatsapp-content {
        padding: 24px 16px;
        text-align: center;
      }

      .whatsapp-image {
        position: relative;
        left: auto;
        bottom: auto;

        overflow: hidden;
      }

      .whatsapp-image img {

        display: block;
        border-radius: 0 0 20px 20px;
      }

      .whatsapp-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 18px;
        font-size: 14px;
      }

      .whatsapp-content h3 {
        font-size: 20px;
      }

      .whatsapp-content p {
        font-size: 14px;
        line-height: 1.6;
      }
    }

    .footer {
      background-color: #2d2d2d;
      color: white;
      padding: 20px 60px;
      position: relative;
      overflow: hidden;
    }

    .footer-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-left {
      align-items: center;
      gap: 15px;
    }

    .footer-left p {
      margin-bottom: 10px;
      font-size: 14px;
    }

    .social-icons {
      display: flex;
      gap: 10px;
    }

    .icon {
      width: 32px;
      height: 32px;
      background-color: #c9aa00;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 16px;
      transition: background 0.3s ease;
    }

    .icon:hover {
      background-color: #e3c200;
    }

    .footer-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }


    .brand-name {
      font-size: 14px;
      font-weight: 600;
      color: #f7d400;
    }

    .footer-line {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 100%;
      background: linear-gradient(90deg, #00c4ff, #0066ff);
    }