@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&family=Noto+Naskh+Arabic:wght@500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600&display=swap");

      :root {
        --navy: #06151f;
        --navy2: #092333;
        --blue: #1298d0;
        --blue2: #32b9ed;
        --white: #f7fbfd;
        --muted: #a8b8c1;
        --line: rgba(50, 185, 237, 0.22);
        --gold: #1298d0;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: #06131c;
        color: var(--white);
        font-family: Inter, Arial, sans-serif;
      }

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

      button,
      input,
      textarea,
      select {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      h1,
      h2,
      h3,
      .brand-name,
      .eyebrow,
      .service-title {
        font-family: "Trajan Pro", "Cormorant Garamond", Georgia, serif;
      }

      /* Arabic script must not use the Latin serif stack above (Trajan Pro /
         Cormorant Garamond / Georgia contain no Arabic glyphs, which forces
         the browser to fall back to an ornate system Arabic font that
         renders overlapping and unreadable). Force a legible Arabic
         typeface everywhere text can appear in RTL mode. */
      [dir="rtl"] {
        font-family: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
      }

      [dir="rtl"] h1,
      [dir="rtl"] h2,
      [dir="rtl"] h3,
      [dir="rtl"] .brand-name,
      [dir="rtl"] .eyebrow,
      [dir="rtl"] .service-title,
      [dir="rtl"] .strip-item,
      [dir="rtl"] .cat strong,
      [dir="rtl"] .value .num,
      [dir="rtl"] .foot b,
      [dir="rtl"] .portrait-caption strong,
      [dir="rtl"] .review p {
        font-family: "Noto Naskh Arabic", "Cormorant Garamond", Georgia, serif !important;
      }

      .container {
        width: 100%;
        max-width: 1228px;
        margin: 0 auto;
        padding: 0 24px;
      }

      header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(4, 16, 24, 0.94);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
      }

      .nav {
        min-height: 88px;
        display: flex;
        align-items: center;
        gap: 25px;
        justify-content: space-between;
      }

      .logo {
        display: flex;
        align-items: center;
        min-width: 235px;
      }

      .logo img {
        width: 118px;
        height: 76px;
        object-fit: contain;
        display: block;
      }

      .brand-copy {
        margin-left: 5px;
      }

      .brand-name {
        font-size: 22px;
        letter-spacing: 4px;
        color: #fff;
      }

      .brand-copy small {
        display: block;
        color: #54bde9;
        font-size: 10px;
        letter-spacing: 1.7px;
        margin-top: 4px;
      }

      nav {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      .navlink {
        font-size: 13px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #d9e5ea;
      }

      .nav-dropdown {
        position: relative;
        display: flex;
        align-items: center;
      }

      .nav-dropdown > .navlink:after {
        content: " ▾";
        font-size: 10px;
      }

      .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 280px;
        background: #041018;
        border: 1px solid var(--line);
        padding: 6px 0;
        z-index: 200;
      }

      .nav-dropdown:hover .dropdown-menu,
      .nav-dropdown:focus-within .dropdown-menu {
        display: block;
      }

      .dropdown-menu a {
        display: block;
        padding: 11px 18px;
        font-size: 12px;
        letter-spacing: 0.4px;
        text-transform: none;
        color: #c9d7dd;
        border-bottom: 1px solid rgba(50, 185, 237, 0.08);
      }

      .dropdown-menu a:last-child {
        border-bottom: 0;
      }

      .dropdown-menu a:hover {
        background: rgba(18, 152, 208, 0.12);
        color: #fff;
      }

      .navlink:hover {
        color: var(--blue2);
      }

      .lang {
        border: 1px solid var(--line);
        background: transparent;
        color: #fff;
        padding: 9px 13px;
        font-size: 12px;
        letter-spacing: 1px;
      }

      .lang:hover {
        border-color: var(--blue2);
      }

      .mobile-menu {
        display: none;
        background: none;
        border: 0;
        color: #fff;
        font-size: 25px;
      }

      .hero {
        position: relative;
        overflow: hidden;
        min-height: 510px;
        background: linear-gradient(
          90deg,
          #03121d 0%,
          #062334 52%,
          #0a2940 100%
        );
        border-bottom: 1px solid var(--line);
      }

      .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            circle at 78% 40%,
            rgba(50, 185, 237, 0.2),
            transparent 26%
          ),
          linear-gradient(115deg, rgba(0, 0, 0, 0.55), transparent 62%);
        pointer-events: none;
      }

      .hero-art {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 55%;
        height: 100%;
        opacity: 0.95;
        background:
          linear-gradient(
            90deg,
            #06151f 0%,
            rgba(6, 21, 31, 0.55) 22%,
            rgba(6, 21, 31, 0.04) 60%
          ),
          radial-gradient(
            circle at 62% 40%,
            rgba(50, 185, 237, 0.16),
            transparent 24%
          ),
          linear-gradient(135deg, #0a2a3c, #0a1a25 70%);
        overflow: hidden;
      }

      .hero-art:after {
        content: "";
        position: absolute;
        right: 8%;
        top: 15%;
        width: 360px;
        height: 230px;
        border: 1px solid rgba(50, 185, 237, 0.5);
        box-shadow: 0 0 45px rgba(18, 152, 208, 0.18);
        transform: skewY(-4deg);
        background: linear-gradient(
          145deg,
          rgba(40, 190, 235, 0.08),
          rgba(255, 255, 255, 0.015)
        );
      }

      .hero-inner {
        position: relative;
        z-index: 2;
        padding: 82px 0 75px;
        max-width: 760px;
      }

      .eyebrow {
        font-size: 12px;
        letter-spacing: 3px;
        color: #55c0ea;
        text-transform: uppercase;
      }

      .hero h1 {
        font-size: clamp(40px, 5.3vw, 72px);
        line-height: 0.98;
        margin: 18px 0 17px;
        font-weight: 600;
        max-width: 720px;
      }

      .hero h1 span {
        color: var(--blue2);
      }

      .hero p {
        max-width: 650px;
        color: #c1cdd2;
        font-size: 17px;
        line-height: 1.85;
      }

      .hero-actions {
        display: flex;
        gap: 11px;
        flex-wrap: wrap;
        margin-top: 25px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 18px;
        border: 1px solid var(--blue);
        border-radius: 8px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        text-transform: none;
        letter-spacing: 0.2px;
        text-decoration: none;
        cursor: pointer;
        transition: 0.25s;
        white-space: nowrap;
        box-sizing: border-box;
      }

      .btn.primary {
        background: var(--blue);
        color: #fff;
      }

      .btn:hover {
        transform: translateY(-1.5px);
        box-shadow: 0 6px 18px rgba(18, 152, 208, 0.18);
      }

      .banner-note {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        letter-spacing: 1.4px;
        color: #7f9aa7;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .strip {
        border-bottom: 1px solid var(--line);
        background: #071b27;
      }

      .strip-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .strip-item {
        padding: 18px;
        text-align: center;
        border-right: 1px solid var(--line);
        font-family: "Trajan Pro", "Cormorant Garamond", serif;
        font-size: 14px;
        letter-spacing: 1.2px;
      }

      .strip-item:last-child {
        border: 0;
      }

      section {
        padding: 80px 0;
      }

      .section-head {
        max-width: 760px;
        margin-bottom: 38px;
      }

      .section-head .eyebrow {
        margin-bottom: 10px;
      }

      .section-head h2 {
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.03;
        margin: 0 0 13px;
      }

      .section-head p {
        color: var(--muted);
        line-height: 1.8;
        font-size: 15px;
      }

      .services-page {
        background: linear-gradient(180deg, #071924, #06131c);
      }

      .service-layout {
        display: grid;
        grid-template-columns: 290px 1fr;
        gap: 22px;
        align-items: start;
      }

      .categories {
        border: 0;
        background: transparent;
        position: sticky;
        top: 112px;
      }

      .cat {
        display: block;
        width: 100%;
        padding: 17px 18px;
        text-align: left;
        border: 0;
        border-bottom: 1px solid rgba(50, 185, 237, 0.12);
        background: transparent;
        color: #c9d7dd;
        font-size: 13px;
        letter-spacing: 0.5px;
      }

      .cat:last-child {
        border-bottom: 0;
      }

      .cat.active,
      .cat:hover {
        background: rgba(18, 152, 208, 0.12);
        color: #fff;
      }

      .cat strong {
        display: block;
        color: #58c3ea;
        font-family: "Trajan Pro", "Cormorant Garamond", serif;
        font-size: 16px;
        margin-bottom: 4px;
      }

      .cat span {
        font-size: 11px;
        color: #7f9aa7;
      }

      .service-panel {
        border: 1px solid var(--line);
        background: #071923;
        min-height: 480px;
      }

      .service-top {
        padding: 30px 32px;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        gap: 20px;
      }

      .service-title {
        font-size: 34px;
        margin: 0 0 7px;
      }

      .service-desc {
        margin: 0;
        color: #9eb1ba;
        font-size: 14px;
        line-height: 1.8;
        max-width: 720px;
      }

      .service-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        border: 1.5px solid rgba(50, 185, 237, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(18, 152, 208, 0.14);
        color: #32b9ed;
        box-shadow: 0 4px 16px rgba(18, 152, 208, 0.15);
        flex: none;
      }

      .service-icon svg {
        width: 26px;
        height: 26px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        display: block;
      }

      .cat-num {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: rgba(18, 152, 208, 0.12);
        border: 1px solid rgba(50, 185, 237, 0.28);
        color: #32b9ed;
        transition: all 0.25s ease;
      }

      .cat-num svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        display: block;
      }

      .subservices {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--line);
      }

      .sub {
        background: #071923;
        padding: 25px;
      }

      .sub h3 {
        font-size: 22px;
        margin: 0 0 8px;
        color: #f5fbfd;
      }

      .sub p {
        font-size: 14px;
        color: #94a9b3;
        line-height: 1.75;
        margin: 0;
      }

      .sub ul {
        padding-left: 17px;
        color: #b8c8cf;
        font-size: 13px;
        line-height: 1.9;
        margin: 13px 0 0;
      }

      .sub li::marker {
        color: var(--blue2);
      }

      .service-image {
        height: 220px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(120deg, #092c3d, #0a1720);
      }

      .service-image .chart {
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: 25px;
        height: 110px;
        border: 1px solid rgba(50, 185, 237, 0.3);
        background: linear-gradient(
          180deg,
          rgba(18, 152, 208, 0.12),
          transparent
        );
      }

      .bar {
        position: absolute;
        bottom: 0;
        width: 8%;
        background: linear-gradient(180deg, #3dc1ee, #0b78aa);
      }

      .b1 {
        left: 13%;
        height: 30%;
      }

      .b2 {
        left: 27%;
        height: 55%;
      }

      .b3 {
        left: 41%;
        height: 78%;
      }

      .b4 {
        left: 55%;
        height: 48%;
      }

      .b5 {
        left: 69%;
        height: 90%;
      }

      .service-image .glow {
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(18, 152, 208, 0.14);
        filter: blur(15px);
        right: 8%;
        top: -70px;
      }

      .breadcrumb {
        padding: 22px 0 0;
        font-size: 12px;
        letter-spacing: 0.3px;
        color: #7f9aa7;
      }

      .breadcrumb a {
        color: #7f9aa7;
      }

      .breadcrumb a:hover {
        color: var(--blue2);
      }

      .breadcrumb span {
        margin: 0 6px;
        color: #3f5761;
      }

      .breadcrumb .current {
        color: var(--muted);
      }

      .cta-band {
        border: 1px solid var(--line);
        background: linear-gradient(135deg, #0a2836, #071923);
        padding: 40px 36px;
        margin-top: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }

      .cta-band h3 {
        margin: 0 0 6px;
        font-size: 24px;
        color: #fff;
      }

      .cta-band p {
        margin: 0;
        color: #9eb1ba;
        font-size: 14px;
        max-width: 520px;
      }

      .related-services {
        margin-top: 22px;
        border: 1px solid var(--line);
        background: #071923;
        padding: 28px 30px;
      }

      .related-services h3 {
        font-size: 18px;
        margin: 0 0 14px;
        color: #58c3ea;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      .related-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .related-list a {
        border: 1px solid rgba(50, 185, 237, 0.18);
        padding: 13px 15px;
        font-size: 13px;
        color: #c9d7dd;
        transition: 0.2s;
      }

      .related-list a:hover {
        background: rgba(18, 152, 208, 0.12);
        color: #fff;
      }

      .faq {
        margin-top: 22px;
        border: 1px solid var(--line);
        background: #071923;
        padding: 30px 30px 8px;
      }

      .faq h3 {
        font-size: 18px;
        margin: 0 0 16px;
        color: #58c3ea;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      .faq details {
        border-top: 1px solid rgba(50, 185, 237, 0.14);
        padding: 18px 0;
      }

      .faq summary {
        cursor: pointer;
        font-size: 15px;
        color: #f5fbfd;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        font-family: inherit;
      }

      .faq summary::-webkit-details-marker,
      .faq summary::marker {
        display: none;
      }

      .faq-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(18, 152, 208, 0.16);
        border: 1.5px solid #32b9ed;
        color: #32b9ed;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-left: 14px;
        transition: transform .32s cubic-bezier(0.25, 1, 0.5, 1), background .25s ease;
      }

      .faq-icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.5;
        display: block;
      }

      .faq details[open] .faq-icon {
        transform: rotate(45deg);
        background: #32b9ed;
        color: #06131c;
      }

      .faq summary:after {
        content: "+";
        color: var(--blue2);
        flex: none;
      }

      .faq summary:has(.faq-icon):after {
        display: none !important;
      }

      .faq details[open] summary:after {
        content: "−";
      }

      .faq p {
        margin: 12px 0 0;
        color: #9eb1ba;
        font-size: 14px;
        line-height: 1.8;
      }

      .areas-served {
        margin-top: 22px;
        border: 1px solid var(--line);
        background: #071923;
        padding: 28px 30px;
      }

      .areas-served h3 {
        font-size: 18px;
        margin: 0 0 14px;
        color: #58c3ea;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      .areas-served .area-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }

      .areas-served .area-card h4 {
        margin: 0 0 6px;
        font-size: 16px;
        color: #f5fbfd;
      }

      .areas-served .area-card p {
        margin: 0;
        font-size: 13px;
        color: #90a4ad;
        line-height: 1.7;
      }

      .values {
        background: #06131c;
      }

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

      .value {
        border: 1px solid var(--line);
        padding: 25px;
        background: #071923;
      }

      .value .num {
        color: var(--blue2);
        font-family: "Trajan Pro", "Cormorant Garamond", serif;
        font-size: 25px;
      }

      .value h3 {
        font-size: 21px;
        margin: 14px 0 8px;
      }

      .value p {
        font-size: 13px;
        line-height: 1.7;
        color: #90a4ad;
      }

      .about {
        background: linear-gradient(135deg, #071923, #06131c);
      }

      .about-grid {
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        gap: 55px;
        align-items: start;
      }

      .portrait {
        min-height: 430px;
        border: 1px solid var(--line);
        background: linear-gradient(145deg, #0b2a3a, #06131c);
        position: relative;
        overflow: hidden;
      }

      .portrait:before {
        content: "AHMED";
        position: absolute;
        bottom: 28px;
        left: 24px;
        font-family: "Trajan Pro", "Cormorant Garamond", serif;
        font-size: 65px;
        letter-spacing: 5px;
        color: rgba(255, 255, 255, 0.05);
      }

      .portrait-inner {
        position: absolute;
        inset: 20px;
        border: 1px solid rgba(50, 185, 237, 0.18);
        display: flex;
        align-items: flex-end;
        padding: 28px;
        background: linear-gradient(
          180deg,
          transparent 45%,
          rgba(3, 13, 19, 0.85)
        );
      }

      .portrait-placeholder {
        font-size: 10px;
        letter-spacing: 1.5px;
        color: #7f9aa7;
        text-transform: uppercase;
      }

      .person h2 {
        font-size: 48px;
        margin: 8px 0;
      }

      .person .role {
        color: var(--blue2);
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      .person p {
        color: #9db0b9;
        line-height: 1.9;
        font-size: 16px;
      }

      .signature {
        margin-top: 22px;
        padding-top: 17px;
        border-top: 1px solid var(--line);
        font-family: "Trajan Pro", "Cormorant Garamond", serif;
        color: #fff;
        letter-spacing: 2px;
      }

      .contact {
        background: #071923;
      }

      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .contact-card {
        border: 1px solid var(--line);
        padding: 30px;
        background: #06151f;
      }

      .contact-card h3 {
        font-size: 28px;
        margin: 0 0 20px;
        color: #fff;
      }

      .contact-list {
        display: grid;
        gap: 9px;
      }

      .contact-list a,
      .contact-list div {
        border: 1px solid rgba(50, 185, 237, 0.13);
        padding: 14px;
        font-size: 13px;
        color: #d3e0e5;
      }

      .contact-list small {
        display: block;
        color: #6f8995;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
      }

      .socials {
        display: flex;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;
      }

      .social {
        border: 1px solid var(--line);
        padding: 10px 13px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .social:hover {
        border-color: var(--blue2);
      }

      .contact-form {
        border: 1px solid var(--line);
        padding: 30px;
        background: #06151f;
      }

      .contact-form h3 {
        font-size: 28px;
        margin: 0 0 8px;
        color: #fff;
      }

      .contact-form > p {
        margin: 0 0 22px;
        color: #91a7b1;
        font-size: 14px;
        line-height: 1.7;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .form-field {
        display: grid;
        gap: 6px;
        margin-bottom: 14px;
      }

      .form-field label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #6f8995;
      }

      .form-field input,
      .form-field select,
      .form-field textarea {
        width: 100%;
        background: #071923;
        border: 1px solid rgba(50, 185, 237, 0.22);
        color: #ffffff;
        padding: 13px 14px;
        font-size: 14px;
      }

      .form-field input:focus,
      .form-field select:focus,
      .form-field textarea:focus {
        outline: none;
        border-color: var(--blue2);
      }

      .form-field textarea {
        resize: vertical;
        min-height: 130px;
      }

      .form-note {
        font-size: 12px;
        color: #6f8995;
        margin: 4px 0 18px;
      }

      .testimonials {
        background: #06131c;
      }

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

      .review {
        border: 1px solid var(--line);
        padding: 25px;
        background: #071923;
      }

      .stars {
        color: #52bce6;
        letter-spacing: 3px;
      }

      .review p {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 22px;
        line-height: 1.35;
        color: #e8f0f3;
      }

      .review small {
        color: #718b97;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
      }

      footer {
        border-top: 1px solid var(--line);
        background: #041018;
        padding: 30px 0;
      }

      .foot {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
      }

      .foot b {
        font-family: "Trajan Pro", "Cormorant Garamond", serif;
        letter-spacing: 4px;
        font-size: 22px;
      }

      .foot small {
        color: #6f8791;
      }

      .footlinks {
        display: flex;
        gap: 16px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #9cb0b8;
      }

      .whatsapp {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #20c76a;
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 25px;
        font-weight: 700;
        z-index: 110;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
      }

      .toast {
        position: fixed;
        left: 50%;
        bottom: 25px;
        transform: translate(-50%, 20px);
        opacity: 0;
        pointer-events: none;
        background: #0a2634;
        border: 1px solid var(--line);
        padding: 12px 17px;
        font-size: 12px;
        z-index: 120;
        transition: 0.25s;
      }

      .toast.show {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      [dir="rtl"] {
        font-family: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
      }

      [dir="rtl"] .nav,
      [dir="rtl"] .service-top,
      [dir="rtl"] .foot {
        flex-direction: row-reverse;
      }

      [dir="rtl"] nav {
        flex-direction: row-reverse;
      }

      [dir="rtl"] .service-layout {
        direction: rtl;
      }

      [dir="rtl"] .categories {
        text-align: right;
      }

      [dir="rtl"] .cat {
        text-align: right;
      }

      [dir="rtl"] .service-top,
      [dir="rtl"] .about-grid,
      [dir="rtl"] .contact-grid {
        direction: rtl;
      }

      [dir="rtl"] .sub ul {
        padding-right: 17px;
        padding-left: 0;
      }

      [dir="rtl"] .hero-inner {
        text-align: right;
      }

      [dir="rtl"] .hero-art {
        left: 0;
        right: auto;
        background:
          linear-gradient(
            270deg,
            #06151f 0%,
            rgba(6, 21, 31, 0.55) 22%,
            rgba(6, 21, 31, 0.04) 60%
          ),
          radial-gradient(
            circle at 38% 40%,
            rgba(50, 185, 237, 0.16),
            transparent 24%
          ),
          linear-gradient(135deg, #0a2a3c, #0a1a25 70%);
      }

      [dir="rtl"] .hero:before {
        background:
          radial-gradient(
            circle at 22% 40%,
            rgba(50, 185, 237, 0.2),
            transparent 26%
          ),
          linear-gradient(245deg, rgba(0, 0, 0, 0.55), transparent 62%);
      }

      [dir="rtl"] .banner-note {
        direction: rtl;
      }

      @media (max-width: 980px) {
        nav {
          display: none;
        }

        .mobile-menu {
          display: block;
        }

        .logo {
          min-width: 0;
        }

        .service-layout {
          grid-template-columns: 1fr;
        }

        .categories {
          position: static;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }

        .cat {
          border-right: 1px solid rgba(50, 185, 237, 0.12);
        }

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

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

        .portrait {
          min-height: 330px;
        }

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

        .related-list {
          grid-template-columns: 1fr 1fr;
        }

        .areas-served .area-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media (max-width: 650px) {
        .nav {
          min-height: 72px;
        }

        .cta-band {
          padding: 28px 22px;
        }

        .related-list {
          grid-template-columns: 1fr;
        }

        .areas-served .area-grid {
          grid-template-columns: 1fr;
        }

        .faq {
          padding: 24px 20px 6px;
        }

        .form-row {
          grid-template-columns: 1fr;
        }

        .contact-form {
          padding: 22px;
        }

        .logo img {
          width: 86px;
          height: 58px;
        }

        .brand-name {
          font-size: 17px;
          letter-spacing: 3px;
        }

        .brand-copy small {
          font-size: 10px;
        }

        .hero {
          min-height: 540px;
        }

        .hero-art {
          width: 100%;
          opacity: 0.4;
        }

        .hero-inner {
          padding: 72px 0 70px;
        }

        .hero h1 {
          font-size: 46px;
        }

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

        .strip-item {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .strip-item:last-child {
          border-bottom: 0;
        }

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

        .subservices,
        .value-grid,
        .contact-grid,
        .review-grid {
          grid-template-columns: 1fr;
        }

        .service-top {
          padding: 25px;
        }

        .service-title {
          font-size: 28px;
        }

        .foot {
          flex-direction: column;
          align-items: flex-start;
        }

        .footlinks {
          flex-wrap: wrap;
        }

        .banner-note {
          white-space: normal;
          text-align: center;
          width: 90%;
        }
      }

      /* FINAL VISUAL UPDATE - supplied banners, logo and portrait */
      .logo {
        min-width: 150px;
      }

      .logo img {
        width: 150px;
        height: 66px;
        object-fit: contain;
        display: block;
      }

      .brand-copy {
        display: none;
      }

      .hero {
        min-height: 560px;
        background: #06131c;
        isolation: isolate;
      }

      .hero-background {
        position: absolute;
        inset: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -3;
        transition: background-image 0.2s ease;
      }

      .hero-shade {
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(
          90deg,
          rgba(3, 15, 24, 0.84) 0%,
          rgba(3, 15, 24, 0.6) 28%,
          rgba(3, 15, 24, 0.12) 58%,
          rgba(3, 15, 24, 0.04) 100%
        );
      }

      .hero-inner {
        max-width: 650px;
        padding: 92px 0 86px;
        margin-left: max(4%, calc((100% - 1180px) / 2));
        margin-right: auto;
        text-align: left;
      }

      .hero h1 {
        max-width: 620px;
        text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45);
      }

      .hero p {
        max-width: 560px;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
      }

      .hero-actions {
        position: relative;
        z-index: 2;
      }

      [dir="rtl"] .hero-shade {
        background: linear-gradient(
          270deg,
          rgba(3, 15, 24, 0.84) 0%,
          rgba(3, 15, 24, 0.6) 28%,
          rgba(3, 15, 24, 0.12) 58%,
          rgba(3, 15, 24, 0.04) 100%
        );
      }

      [dir="rtl"] .hero-inner {
        margin-left: auto;
        margin-right: max(4%, calc((100% - 1180px) / 2));
        text-align: right;
      }

      [dir="rtl"] .hero-background {
        transform: none;
      }

      .service-image {
        height: 260px;
        position: relative;
        overflow: hidden;
        background: #09202d;
      }

      .service-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      .service-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(3, 15, 24, 0.04),
          rgba(3, 15, 24, 0.18)
        );
        pointer-events: none;
      }

      .service-panel {
        overflow: hidden;
      }

      .portrait {
        min-height: 580px;
        height: auto !important;
        min-height: auto !important;
        background: #071923;
        border: 1px solid var(--line);
        position: relative;
        overflow: hidden;
      }

      .portrait > img {
        width: 100%;
        height: 100%;
        min-height: 580px;
        height: auto !important;
        min-height: auto !important;
        display: block;
        object-fit: cover;
        object-fit: contain;
        object-position: center top;
      }

      .portrait-caption {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 16px 18px;
        background: linear-gradient(
          180deg,
          rgba(4, 16, 24, 0.12),
          rgba(4, 16, 24, 0.92)
        );
        border: 1px solid rgba(50, 185, 237, 0.22);
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .portrait-caption strong {
        font-family: "Trajan Pro", "Cormorant Garamond", Georgia, serif;
        font-size: 25px;
        color: #fff;
      }

      .portrait-label {
        font-size: 11px;
        color: var(--blue2);
        letter-spacing: 1.8px;
        text-transform: uppercase;
      }

      .portrait-placeholder {
        display: none;
      }

      .footer-brand {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }

      .footer-brand img {
        width: 190px;
        height: auto;
        max-height: 70px;
        object-fit: contain;
        object-position: left center;
      }

      .footer-brand small {
        color: #6f8791;
      }

      [dir="rtl"] .footer-brand img {
        object-position: right center;
      }

      @media (max-width: 980px) {
        .hero-inner {
          margin-left: 4%;
          margin-right: 4%;
          max-width: 620px;
        }

        .service-image {
          height: 260px;
        }

        .portrait {
          min-height: 480px;
        }

        .portrait > img {
          min-height: 480px;
        }
      }

      @media (max-width: 650px) {
        .logo img {
          width: 112px;
          height: 56px;
        }

        .nav {
          min-height: 72px;
        }

        .hero {
          min-height: 620px;
        }

        .hero-background {
          background-position: center center;
        }

        .hero-shade {
          background: linear-gradient(
            180deg,
            rgba(3, 15, 24, 0.3) 0%,
            rgba(3, 15, 24, 0.6) 42%,
            rgba(3, 15, 24, 0.92) 100%
          );
        }

        [dir="rtl"] .hero-shade {
          background: linear-gradient(
            180deg,
            rgba(3, 15, 24, 0.3) 0%,
            rgba(3, 15, 24, 0.6) 42%,
            rgba(3, 15, 24, 0.92) 100%
          );
        }

        .hero-inner {
          margin: 0 auto;
          padding: 245px 5% 55px;
          max-width: 100%;
          text-align: left;
        }

        .hero h1 {
          font-size: 42px;
          line-height: 1.02;
        }

        .hero p {
          font-size: 16px;
          line-height: 1.7;
        }

        .hero-actions {
          flex-direction: column;
          align-items: stretch;
        }

        .hero-actions .btn {
          width: 100%;
        }

        [dir="rtl"] .hero-inner {
          margin: 0 auto;
          text-align: right;
        }

        .service-image {
          height: 205px;
        }

        .portrait {
          min-height: 430px;
        }

        .portrait > img {
          min-height: 430px;
        }

        .portrait-caption strong {
          font-size: 22px;
        }

        .footer-brand img {
          width: 155px;
        }

        .footlinks {
          gap: 12px;
        }
      }

      /* AL YAQEEN FINAL POLISH V2 */
      html,
      body {
        overflow-x: clip;
      }

      .container {
        width: 100%;
        max-width: 1228px;
        margin: 0 auto;
        padding: 0 24px;
      }

      header {
        height: 88px;
      }

      .nav {
        height: 88px;
        min-height: 88px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
      }

      .logo {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 190px;
        min-width: 190px;
        height: 58px;
        margin: 0;
        padding: 0;
      }

      .logo img {
        display: block !important;
        width: 190px !important;
        height: 52px !important;
        object-fit: contain !important;
        object-position: left center !important;
        margin: 0;
      }

      .brand-copy {
        display: none !important;
      }

      nav {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 28px;
      }

      .navlink,
      .lang {
        white-space: nowrap;
      }

      .mobile-menu {
        margin-left: auto;
      }

      .hero {
        min-height: 620px;
        position: relative;
        overflow: hidden;
      }

      .hero-background {
        position: absolute !important;
        inset: 0;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        z-index: 0;
      }

      .hero-shade {
        position: absolute !important;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          90deg,
          rgba(3, 15, 24, 0.96) 0%,
          rgba(3, 15, 24, 0.84) 27%,
          rgba(3, 15, 24, 0.35) 55%,
          rgba(3, 15, 24, 0.08) 100%
        ) !important;
      }

      .hero-inner {
        position: relative !important;
        z-index: 2;
        width: min(1180px, calc(100% - 48px));
        max-width: 610px !important;
        margin: 0 auto 0 max(24px, calc((100% - 1180px) / 2)) !important;
        padding-top: 145px !important;
        padding-bottom: 90px !important;
        text-align: left !important;
      }

      .hero h1 {
        font-size: clamp(22px, 2.3vw, 32px);
        line-height: 1.2;
        max-width: 590px;
        margin: 16px 0 18px;
      }

      .hero p {
        max-width: 560px;
        font-size: 17px;
        line-height: 1.8;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
      }

      [dir="rtl"] .hero-shade {
        background: linear-gradient(
          270deg,
          rgba(3, 15, 24, 0.96) 0%,
          rgba(3, 15, 24, 0.84) 27%,
          rgba(3, 15, 24, 0.35) 55%,
          rgba(3, 15, 24, 0.08) 100%
        ) !important;
      }

      [dir="rtl"] .hero-inner {
        margin: 0 max(24px, calc((100% - 1180px) / 2)) 0 auto !important;
        text-align: right !important;
      }

      .service-panel {
        min-width: 0;
        border: 1px solid var(--line);
        background: #061923;
        overflow: hidden;
      }

      .service-image {
        height: 300px !important;
        width: 100%;
        position: relative;
        overflow: hidden;
        background: #09202d;
      }

      .service-image img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover !important;
        object-position: center center !important;
      }

      .service-image-overlay {
        background: linear-gradient(
          180deg,
          rgba(3, 15, 24, 0),
          rgba(3, 15, 24, 0.22)
        ) !important;
      }

      .about {
        padding: 80px 0;
      }

      .about-grid {
        display: grid !important;
        grid-template-columns: minmax(320px, 0.92fr) minmax(
            0,
            1.08fr
          ) !important;
        gap: 72px !important;
        align-items: start !important;
      }

      .about-grid .portrait {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100%;
        height: 560px;
        min-height: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border: 1.5px solid rgba(18, 152, 208, 0.5) !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #071923;
        position: relative;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      }

      .about-grid .portrait > img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        object-fit: contain !important;
        object-position: center top !important;
        border-radius: 16.5px !important;
      }

      .about-grid .portrait-caption {
        display: none !important;
      }

      .about-grid .person {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0;
        max-width: 620px;
      }

      .about-grid .person h2 {
        font-size: clamp(26px, 2.8vw, 36px);
        line-height: 1.15;
        margin: 10px 0 12px;
      }

      .about-grid .person .role {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 22px;
      }

      .about-grid .person p {
        font-size: 16px;
        line-height: 1.9;
        max-width: 600px;
        margin: 0 0 16px;
      }

      .about-grid .signature {
        margin-top: 30px;
        padding-top: 18px;
        font-size: 13px;
      }

      [dir="rtl"] .about-grid .portrait {
        grid-column: 2 !important;
      }

      [dir="rtl"] .about-grid .person {
        grid-column: 1 !important;
        text-align: right;
      }

      footer {
        border-top: 1px solid var(--line);
      }

      .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-brand img {
        width: 185px;
        height: auto;
        max-height: 65px;
        object-fit: contain;
      }

      .footer-copy {
        color: #91a5ae;
        font-size: 13px;
        line-height: 1.6;
      }

      .portrait-placeholder,
      .banner-note {
        display: none !important;
      }

      @media (max-width: 980px) {
        header,
        .nav {
          height: 78px;
          min-height: 78px;
        }

        .container {
          padding: 0 18px;
        }

        .logo {
          width: 170px;
          min-width: 170px;
        }

        .logo img {
          width: 170px !important;
          height: 48px !important;
        }

        nav {
          display: none;
        }

        .mobile-menu {
          display: block;
        }

        .nav-dropdown {
          display: block;
          position: static;
        }

        .dropdown-menu {
          display: none;
          position: static;
          border: 0;
          background: transparent;
          padding: 0 0 6px 14px;
        }

        .nav-dropdown.open .dropdown-menu {
          display: block;
        }

        .dropdown-menu a {
          padding: 8px 0;
          border-bottom: 0;
          color: #9fb4bd;
        }

        .hero {
          min-height: 600px;
        }

        .hero-inner {
          width: min(100% - 36px, 760px);
          margin: 0 auto !important;
          padding-top: 150px !important;
          padding-bottom: 70px !important;
          max-width: 600px !important;
        }

        .hero-shade {
          background: linear-gradient(
            90deg,
            rgba(3, 15, 24, 0.94),
            rgba(3, 15, 24, 0.62) 60%,
            rgba(3, 15, 24, 0.18)
          ) !important;
        }

        [dir="rtl"] .hero-shade {
          background: linear-gradient(
            270deg,
            rgba(3, 15, 24, 0.94),
            rgba(3, 15, 24, 0.62) 60%,
            rgba(3, 15, 24, 0.18)
          ) !important;
        }

        .about-grid {
          grid-template-columns: 1fr !important;
          gap: 42px !important;
        }

        .about-grid .portrait,
        .about-grid .person,
        [dir="rtl"] .about-grid .portrait,
        [dir="rtl"] .about-grid .person {
          grid-column: 1 !important;
          grid-row: auto !important;
        }

        .about-grid .portrait {
          height: 520px;
          height: auto !important;
        }

        .about-grid .person {
          max-width: 760px;
        }

        .service-image {
          height: 270px !important;
        }

        .foot {
          flex-direction: column;
          align-items: flex-start;
          padding: 28px 0;
        }
      }

      @media (max-width: 650px) {
        .container {
          padding: 0 14px;
        }

        header,
        .nav {
          height: 70px;
          min-height: 70px;
        }

        .logo {
          width: 145px;
          min-width: 145px;
          height: 48px;
        }

        .logo img {
          width: 145px !important;
          height: 44px !important;
        }

        .hero {
          min-height: 690px;
        }

        .hero-background {
          background-position: center center !important;
        }

        .hero-shade {
          background: linear-gradient(
            180deg,
            rgba(3, 15, 24, 0.18) 0%,
            rgba(3, 15, 24, 0.48) 35%,
            rgba(3, 15, 24, 0.94) 68%,
            rgba(3, 15, 24, 0.99) 100%
          ) !important;
        }

        [dir="rtl"] .hero-shade {
          background: linear-gradient(
            180deg,
            rgba(3, 15, 24, 0.18) 0%,
            rgba(3, 15, 24, 0.48) 35%,
            rgba(3, 15, 24, 0.94) 68%,
            rgba(3, 15, 24, 0.99) 100%
          ) !important;
        }

        .hero-inner {
          width: calc(100% - 28px);
          max-width: none !important;
          margin: 0 auto !important;
          padding-top: 360px !important;
          padding-bottom: 45px !important;
          text-align: left !important;
        }

        [dir="rtl"] .hero-inner {
          margin: 0 auto !important;
          text-align: right !important;
        }

        .hero h1 {
          font-size: clamp(18px, 4.5vw, 24px);
          line-height: 1.2;
          margin: 12px 0 15px;
        }

        .hero p {
          font-size: 16px;
          line-height: 1.75;
        }

        .hero-actions {
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
          margin-top: 22px;
        }

        .hero-actions .btn {
          width: 100%;
          text-align: center;
        }

        .service-image {
          height: 205px !important;
        }

        .about {
          padding: 60px 0;
        }

        .about-grid {
          gap: 30px !important;
        }

        .about-grid .portrait {
          height: 460px;
          height: auto !important;
        }

        .about-grid .person h2 {
          font-size: 28px;
        }

        .about-grid .person p {
          font-size: 16px;
          line-height: 1.8;
        }

        .footer-brand img {
          width: 190px !important;
          height: 44px !important;
        }

        .footer-copy {
          font-size: 12px;
        }
      }


/* =========================================================
   AL YAQEEN MIXED PREMIUM THEME
   Previous dark/premium visual language + latest features
   ========================================================= */

/* Keep the latest navigation usable with Projects + Calculators */
@media (min-width:981px){
  .nav{gap:16px}
  .logo{min-width:205px}
  nav{gap:15px;flex-wrap:nowrap}
  .navlink{font-size:12px}
}
.projects{background:linear-gradient(180deg,#071924,#06131c);overflow:hidden}
.projects .section-head h2,
.projects .section-head p{color:var(--white)}
.projects .section-head p{color:var(--muted)}
.projects-carousel{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;touch-action:pan-y;overscroll-behavior-x:contain}
.projects-carousel::-webkit-scrollbar{display:none}
.projects-carousel.is-dragging{cursor:grabbing;scroll-behavior:auto}
.projects-track{display:flex;gap:22px;width:max-content}
.project-card{width:min(78vw,920px);scroll-snap-align:start;background:#071923;border:1px solid var(--line);border-radius:2px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.22);display:grid;grid-template-columns:1.2fr .8fr;min-height:360px}
.project-image{position:relative;min-height:360px;background:#071b2b;overflow:hidden}
.project-image img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;transition:transform .7s ease}
.project-card:hover .project-image img{transform:scale(1.035)}
.project-number{position:absolute;top:18px;left:18px;padding:8px 12px;background:rgba(4,18,30,.82);border:1px solid rgba(50,185,237,.25);color:#fff;font-size:11px;font-weight:900;letter-spacing:1.5px}
.project-body{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center}
.project-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.project-meta span{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8ddbf5;background:rgba(18,152,208,.10);border:1px solid rgba(50,185,237,.18);padding:7px 10px}
.project-body h3{font-size:30px;line-height:1.15;color:#f5fbfd;margin:0 0 13px}
.project-body p{font-size:13px;line-height:1.8;color:#9eb1ba;margin:0 0 18px}
.project-benefit{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:6px}
.project-benefit strong{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--blue2)}
.project-benefit span{font-size:12px;line-height:1.7;color:#b8c8cf}
.projects-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:25px}
.carousel-arrow{width:44px;height:44px;border:1px solid var(--line);background:#071923;color:#fff;border-radius:0;font-size:18px;cursor:pointer;transition:.25s}
.carousel-arrow:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.project-dots{display:flex;align-items:center;gap:7px}
.project-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:#3d5967;cursor:pointer;transition:.25s}
.project-dot.active{width:24px;border-radius:999px;background:var(--blue2)}

.calculators{background:linear-gradient(180deg,#071924 0%,#06131c 100%)}
.calculators .section-head h2{color:#f5fbfd}
.calculators .section-head p{color:#9eb1ba}
.calculator-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.calculator-card{background:#071923;border:1px solid var(--line);border-radius:2px;padding:30px;box-shadow:0 18px 55px rgba(0,0,0,.18);position:relative;overflow:hidden}
.calculator-card:before{display:none}
.calc-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.calc-head h3{margin:0 0 5px;color:#f5fbfd;font-size:25px}
.calc-head p{margin:0;color:#8fa5b0;font-size:12px}
.calc-icon{width:52px;height:52px;border:1px solid rgba(50,185,237,.25);border-radius:0;display:grid;place-items:center;background:rgba(18,152,208,.08);color:var(--blue2);font-weight:900;font-size:14px;letter-spacing:1px}
.calc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:#041420;border:1px solid rgba(50,185,237,.22);border-radius:11px;margin-bottom:20px;width:100%;box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.calc-tab{width:100%;border:0;background:transparent;border-radius:7px;padding:10px 14px;color:#8fa5b3;font-weight:600;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;transition:all .25s cubic-bezier(0.25,1,0.5,1);outline:none;user-select:none;line-height:1.3}
.calc-tab:hover:not(.active){color:#fff;background:rgba(50,185,237,.09)}
.calc-tab:focus-visible{outline:2px solid #32b9ed;outline-offset:1px}
.calc-tab.active{background:#32b9ed;color:#041420;font-weight:700;box-shadow:0 3px 12px rgba(50,185,237,.35)}
.calc-field{display:grid;gap:8px;margin-bottom:20px}
.calc-field span{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:#72c7e8}
.calc-field input{width:100%;box-sizing:border-box;border:1px solid rgba(50,185,237,.22);border-radius:0;padding:15px 16px;font-size:18px;color:#fff;outline:none;background:#06131c}
.calc-field input:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(80,200,236,.10)}
.calc-results{border:1px solid rgba(50,185,237,.2);border-radius:12px;overflow:hidden;background:rgba(4,18,28,.65);margin-top:18px}
.calc-results>div{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(50,185,237,.12);gap:16px}
.calc-results>div:last-child{border-bottom:0}
.calc-results small{font-size:13.5px;color:#b0c4cf;font-weight:600;text-transform:none;letter-spacing:.2px;margin:0}
.calc-results strong{font-size:16px;color:#fff;font-weight:700;white-space:nowrap;flex-shrink:0}
.calc-results .total{background:rgba(18,152,208,.16)}
.calc-results .total small{color:#fff;font-weight:700}
.calc-results .total strong{color:var(--gold-2);font-size:17.5px;font-weight:800}
.ct-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.ct-breakdown span{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;background:#06131c;border:1px solid rgba(50,185,237,.10);font-size:10px;color:#8fa5b0}
.ct-breakdown em{font-style:normal;font-weight:900;color:var(--blue2)}
.calc-note{font-size:12.5px;line-height:1.7;color:#8fa5b3;margin:15px 0 0}
.calc-disclaimer{margin:18px auto 0;text-align:center;color:#718893;font-size:10px;max-width:800px}

.pathways{background:#06131c}
.pathways .section-head h2{color:#f5fbfd}
.pathways .section-head p{color:#9eb1ba}
.path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.path-card{position:relative;min-height:210px;padding:27px;border:1px solid var(--line);background:#071923;overflow:hidden;transition:.35s}
.path-card:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(0,0,0,.2);border-color:rgba(50,185,237,.55)}
.path-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(81,203,239,.05);right:-35px;bottom:-35px}
.path-card span{font-size:10px;letter-spacing:2px;font-weight:900;color:#5dbddd}
.path-card h3{font-size:19px;line-height:1.25;color:#f5fbfd;margin:24px 0 10px}
.path-card p{font-size:12px;line-height:1.75;color:#8fa5b0;margin:0}
.path-card b{position:absolute;right:25px;bottom:22px;color:var(--blue2);font-size:20px}

.contact-topline{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px}
.contact-topline a,.contact-topline>span{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 18px;color:#fff;font-size:13.5px;font-weight:600;text-align:center;border-right:1px solid var(--line);text-decoration:none;transition:.25s}
.contact-topline a:hover{color:#32b9ed;background:rgba(18,152,208,.08)}
.contact-topline>*:last-child{border-right:0}
.contact-topline .topline-icon{width:18px;height:18px;color:#32b9ed;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none;display:inline-block;vertical-align:middle}
.contact-grid-four{grid-template-columns:repeat(4,1fr);gap:12px}
.contact-action{border:1px solid var(--line);border-radius:14px;padding:22px;background:#071923;display:flex;flex-direction:column;align-items:flex-start;transition:.3s}
.contact-action:hover{transform:translateY(-5px);border-color:rgba(18,152,208,.6);box-shadow:0 18px 38px rgba(7,27,43,.08)}
.action-icon{width:48px;height:48px;border-radius:12px;background:rgba(18,152,208,.12);border:1.5px solid rgba(50,185,237,.35);color:#32b9ed;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;transition:all .3s ease;box-shadow:0 4px 14px rgba(18,152,208,.12)}
.contact-action:hover .action-icon{background:rgba(18,152,208,.25);border-color:#32b9ed;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(50,185,237,.25)}
.action-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;display:block}
.contact-action h3{font-size:18px;color:#fff;line-height:1.2;margin:0 0 8px}
.contact-action p{font-size:13.5px;line-height:1.6;color:#b7c8d2;margin:0 0 17px;flex:1}
.contact-action .btn{color:#071b2b;background:var(--gold);padding:8px 14px;font-size:12.5px;font-weight:600;border-radius:7px;margin-top:auto}

@media(max-width:1050px){
  .path-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid-four{grid-template-columns:repeat(2,1fr)}
  .calculator-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .project-card{width:min(88vw,760px);grid-template-columns:1fr}
  .project-image{height:300px;min-height:300px}
  .project-body{padding:27px}
  .contact-grid-four{grid-template-columns:1fr}
  .contact-topline{align-items:flex-start;flex-direction:column;max-width:500px;margin:0 auto 25px}
}
@media(max-width:600px){
  .project-card{width:calc(100vw - 28px)}
  .project-image{height:210px;min-height:210px}
  .project-body{padding:22px}
  .project-body h3{font-size:23px}
  .project-body p{font-size:12px}
  .projects-track{gap:14px}
  .projects-controls{margin-top:18px}
  .calculator-card{padding:22px}
  .calc-head h3{font-size:21px}
  .path-grid{grid-template-columns:1fr}
  .path-card{min-height:175px}
  .contact-action{padding:27px 20px}
  .ct-breakdown{grid-template-columns:1fr 1fr}
}

/* Keep the latest language + mobile rules compatible with the dark theme */
[dir="rtl"] .project-number{left:auto;right:18px}
[dir="rtl"] .project-meta{flex-direction:row-reverse}