@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cairo.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

.flag-emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
  font-variant-emoji:emoji;
  font-weight:400;
  line-height:1;
  text-transform:none;
  letter-spacing:0;
}

    :root { --primary-font: 'Cairo', sans-serif; }
    [lang="en"] { --primary-font: 'Inter', sans-serif; }

    body { font-family: var(--primary-font); background-color: #f4f6f8; color: #333; transition: background-color .3s ease; scroll-behavior: smooth; }
    .imkan-blue { color: #00afd6; }
    .bg-imkan-blue { background-color: #00afd6; }
    .imkan-orange { color: #f89421; }
    .bg-imkan-orange { background-color: #f89421; }

    /* Hero (luxe tech) */
    .hero-bg{
      background-image:
        linear-gradient(120deg, rgba(9,14,23,.62), rgba(0,175,214,.55)),
        radial-gradient(1200px 600px at 80% 20%, rgba(255,255,255,.12), transparent 60%),
        url('../assets/hero-tech.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .floating-card { background: white; padding: .75rem 1.25rem; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,.05); position: absolute; z-index: 10; display: flex; align-items: center; gap: .75rem; animation: float 4s ease-in-out infinite; }
    @keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

    .chart-container { position: relative; width: 100%; height: 300px; }
    @media (min-width: 768px) { .chart-container { height: 350px } }

    .step-active { background-color: #00afd6; color: #fff; border-color: #00afd6; }
    .step-inactive { background-color: #fff; color: #aaa; border-color: #eee; }

    .custom-scroll::-webkit-scrollbar { width: 6px; }
    .custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background: #00afd6; }

    .transition-all { transition: all .3s ease-in-out; }

    .fixed-action-btn { position: fixed; bottom: 30px; z-index: 100; }
    .btn-whatsapp { right: 30px; background-color: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 15px rgba(37,211,102,.4); transition: transform .3s; }
    .btn-whatsapp:hover { transform: scale(1.1) }
    .btn-scroll-top { left: 30px; background-color: #00afd6; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .3s; }
    .btn-scroll-top.visible { opacity: 1; visibility: visible; }
	
    /* ==== Contact (unified icons, RTL/LTR aware) ==== */
    :root{
      --contact-color:#6ec1dc;         /* light blue; change to #00afd6 for primary or #f89421 for secondary */
    }

    .contact-item{
      display:flex;
      gap:.75rem;
      align-items:center;
    }
    [dir="ltr"] .contact-item{ justify-content:flex-start; }   /* flip for EN */
    .contact-item.contact-address{ align-items:flex-start; }   /* multi-line address */

    .contact-icon{
      width:22px;
      height:22px;
      color:var(--contact-color);
      flex-shrink:0;
    }

    /* Key fix: apply stroke/fill to inner shapes so all browsers render correctly */
    .contact-icon *{
      stroke:currentColor;
      fill:none;
      stroke-width:1.8;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .contact-text{ color:#cbd5e1; line-height:1.7; }

    /* micro-lift for icons on card hover */
    .tech-card:hover .h-16.w-16 { transform: translateY(-2px); transition: transform .25s ease; }
    /* helps thin strokes render crisply on some browsers */
    svg [vector-effect="non-scaling-stroke"] { vector-effect: non-scaling-stroke; }

    /* Fix right-aligned classes when switching to LTR */
    [dir="ltr"] .text-right { text-align: left; }