@font-face {
    font-family: "Vazirmatn";
    src: url("./fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* =========================
       OM COLORS
    ========================= */

    :root {
      --green: #21409a;
      --green-dark: #182d6b;

      --cream: #F5F5F2;
      --warm-white: #FAFAF7;

      --beige: #ECE4D9;
      --sand: #CBBF9D;

      --black: #1B1B1B;
      --gray: #777871;

      --border: #DEDCD3;
    }




    /* =========================
       RESET
    ========================= */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Vazirmatn", sans-serif;
      background: var(--cream);
      color: var(--black);
      line-height: 1.8;
    }

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


    /* =========================
       CONTAINER
    ========================= */

    .container {
      width: min(1100px, 90%);
      margin: auto;
    }




    /* =========================
       TOP
    ========================= */

    .top {
      min-height: 100svh;

      display: flex;
      flex-direction: column;

      background:
        radial-gradient(
          circle at 85% 15%,
          rgba(203,191,157,.25),
          transparent 25%
        ),
        var(--cream);
    }


    /* =========================
       HEADER
    ========================= */

    header {
      padding: 24px 0;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      color: var(--green);
      font-size: 31px;
      font-weight: 600;
      letter-spacing: -1px;
    }

    .header-phone {
      color: var(--green);
      font-size: 12px;
      border-bottom: 1px solid var(--green);
      padding-bottom: 2px;
    }



    /* =========================
       HERO
    ========================= */

    .hero {
      flex: 1;

      display: flex;
      align-items: center;

      padding: 55px 0 75px;
    }

    .hero-content {
      max-width: 760px;
    }

    .eyebrow {
      color: var(--green);
      font-size: 11px;
      letter-spacing: 3px;
      margin-bottom: 18px;
    }

    h1 {
      color: var(--green);

      font-size: clamp(43px, 8vw, 76px);

      line-height: 1.35;

      font-weight: 500;

      letter-spacing: -2px;

      margin-bottom: 25px;
    }


    .hero-text {
      max-width: 650px;

      color: var(--gray);

      font-size: 17px;

      line-height: 2.1;

      font-weight: 300;
    }

    .hero-text strong {
      color: var(--black);
      font-weight: 500;
    }

    .hero-actions {
      display: flex;
      gap: 10px;

      margin-top: 32px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-height: 48px;

      padding: 10px 28px;

      border-radius: 2px;

      font-size: 13px;

      transition: .25s ease;
    }




    .button-green {
      background: var(--green);
      color: white;
    }

    .button-green:hover {
      background: var(--green-dark);
    }

    .button-outline {
      border: 1px solid var(--green);
      color: var(--green);
    }

    .button-outline:hover {
      background: var(--green);
      color: white;
    }


    /* =========================
       MENU SECTION
    ========================= */

    .menu-section {
      background: var(--warm-white);

      padding: 70px 0 80px;
    }

    .menu-title {
      margin-bottom: 28px;
    }

    .menu-title span {
      color: var(--green);

      font-size: 11px;

      letter-spacing: 3px;
    }


    .menu-title h2 {
      font-size: 31px;

      font-weight: 500;

      margin-top: 5px;
    }


    /* =========================
       MENU LINKS
    ========================= */

    .menu-list {
      border-top: 1px solid var(--border);
    }

    .menu-item {
      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 20px;

      min-height: 76px;

      border-bottom: 1px solid var(--border);

      transition: .25s ease;
    }

    .menu-item:hover {
      padding-right: 10px;
    }

    .menu-item:hover .arrow {
      transform: translateX(-5px);
      color: var(--green);
    }

    .menu-main {
      display: flex;
      align-items: baseline;

      gap: 16px;
    }

    .menu-number {
      color: var(--sand);

      font-size: 11px;

      letter-spacing: 1px;
    }

    .menu-name {
      font-size: 17px;
      font-weight: 500;
    }

    .menu-description {
      color: var(--gray);

      font-size: 12px;

      font-weight: 300;
    }

    .arrow {
      color: var(--gray);

      font-size: 20px;

      transition: .25s ease;
    }


    /* =========================
       BRANCHES
    ========================= */

    .branches {
      padding: 70px 0 75px;

      background: var(--green);

      color: white;
    }

    .branches .eyebrow {
      color: var(--sand);
    }

    .branches h2 {
      font-size: 34px;

      font-weight: 400;

      margin-bottom: 30px;
    }

    .branch-grid {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 10px;
    }

    .branch {
      position: relative;

      min-height: 185px;

      display: flex;
      flex-direction: column;

      justify-content: flex-end;

      padding: 24px;

      border: 1px solid rgba(255,255,255,.2);

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.09),
          rgba(255,255,255,.025)
        );

      transition: .25s ease;
    }

    .branch:hover {
      background: rgba(255,255,255,.13);
    }

    .branch small {
      color: var(--sand);

      font-size: 10px;

      letter-spacing: 2px;

      margin-bottom: 5px;
    }

    .branch h3 {
      font-size: 23px;

      font-weight: 400;
    }

    .branch-link {
      margin-top: 12px;

      color: #DCE5DF;

      font-size: 12px;
    }



    /* =========================
       FINAL
    ========================= */

    .final {
      padding: 75px 0 55px;

      background: var(--beige);

      text-align: center;
    }

    .final h2 {
      color: var(--green);

      font-size: clamp(31px, 6vw, 48px);

      font-weight: 500;

      margin-bottom: 12px;
    }

    .final p {
      color: var(--gray);

      font-size: 14px;

      margin-bottom: 25px;
    }

    .phone {
      display: block;

      margin-top: 22px;

      color: var(--green);

      font-size: 16px;

      direction: ltr;
    }

    .ahhh {
      margin-top: 35px;

      color: var(--green);

      font-size: 34px;

      font-weight: 600;
    }


    /* =========================
       FOOTER
    ========================= */

    footer {
      padding: 20px 0;

      background: var(--beige);

      color: #89877E;

      text-align: center;

      font-size: 10px;
    }


    /* =========================
       MOBILE
    ========================= */

    @media (max-width: 700px) {

      .container {
        width: 88%;
      }

      header {
        padding: 18px 0;
      }

      .logo {
        font-size: 28px;
      }

      .header-phone {
        font-size: 11px;
      }

      .hero {
        padding: 35px 0 65px;
      }

      h1 {
        font-size: 46px;

        letter-spacing: -1.5px;
      }

      .hero-text {
        font-size: 15px;
        line-height: 2;
      }

      .hero-actions {
        flex-direction: column;
      }

      .button {
        width: 100%;
      }

      .menu-section {
        padding: 55px 0;
      }

      .menu-title h2 {
        font-size: 27px;
      }

      .menu-item {
        min-height: 72px;
      }

      .menu-main {
        gap: 10px;

        flex-wrap: wrap;
      }

      .menu-number {
        display: none;
      }

      .menu-name {
        font-size: 16px;
      }

      .menu-description {
        width: 100%;
        margin-top: -8px;
      }

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

      .branch {
        min-height: 145px;
      }

      .branches {
        padding: 55px 0;
      }

      .branches h2 {
        font-size: 30px;
      }

      .final {
        padding: 65px 0 45px;
      }

      .ahhh {
        font-size: 31px;
      }

    }