html { scroll-behavior: smooth; }
    body {
      font-family: 'Cairo', sans-serif;
      background: #fff;
      overflow-x: hidden;
    }

    html[dir="ltr"] body {
      font-family: 'Inter', sans-serif;
    }

    .glass {
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .gradient-text {
      background: linear-gradient(90deg,#60317a,#00a99d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-grid {
      background-image:
        linear-gradient(rgba(96,49,122,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96,49,122,.06) 1px, transparent 1px);
      background-size: 44px 44px;
    }

    .floating {
      animation: floating 5s ease-in-out infinite;
    }

    @keyframes floating {
      0%,100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }

    .spin-slow {
      animation: spin 18s linear infinite;
    }

    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    html[dir="rtl"] .marquee-track {
      animation: marqueeRtl 28s linear infinite;
    }

    html[dir="ltr"] .marquee-track {
      animation: marquee 28s linear infinite;
    }

    @keyframes marqueeRtl {
      0% { transform: translateX(0); }
      100% { transform: translateX(50%); }
    }

    .page { display: none; }
    .page.active { display: block; }

    .portfolio-card:hover img {
      transform: scale(1.1);
    }

    .portfolio-card img {
      transition: 900ms ease;
    }

    .mega-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px);
      transition: .3s ease;
    }

    .mega-parent:hover .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .nav-link.active {
      color: #60317a;
      font-weight: 900;
    }


    /* Header & mega menu fixes */
    header {
      overflow: visible !important;
    }

    header .h-20 {
      height: 88px !important;
      min-height: 88px !important;
      overflow: visible !important;
    }

    main {
      padding-top: 88px !important;
    }

    .mega-parent {
      position: static !important;
    }

    .mega-menu {
      position: fixed !important;
      top: 88px !important;
      left: 50% !important;
      right: auto !important;
      width: min(1100px, calc(100vw - 40px)) !important;
      max-height: calc(100vh - 110px);
      overflow-y: auto;
      z-index: 9999;
      transform: translate(-50%, 15px);
    }

    .mega-parent:hover .mega-menu {
      transform: translate(-50%, 0);
    }

    html[dir="rtl"] .mega-menu,
    html[dir="ltr"] .mega-menu {
      left: 50% !important;
      right: auto !important;
    }

    html[dir="rtl"] .mega-menu .grid {
      text-align: right;
    }

    html[dir="ltr"] .mega-menu .grid {
      text-align: left;
    }

    @media (max-width: 1279px) {
      main { padding-top: 88px !important; }
    }

    .partner-logo {
      filter: grayscale(1);
      opacity: .75;
      transition: .35s ease;
    }

    .partner-logo:hover {
      filter: grayscale(0);
      opacity: 1;
      transform: translateY(-6px);
    }

    .portfolioSwiper {
      padding-bottom: 3.5rem !important;
      --swiper-pagination-color: #60317a;
      --swiper-pagination-bullet-inactive-color: #60317a;
      --swiper-pagination-bullet-inactive-opacity: 0.25;
      --swiper-pagination-bullet-size: 12px;
      --swiper-pagination-bullet-horizontal-gap: 6px;
    }
    
    .portfolioSwiper .swiper-pagination {
      bottom: 0 !important;
    }

    /* Fixed Contact Buttons + Chatbot + Scroll Top */
    .fixed-contact-stack {
      position: fixed;
      right: 25px;
      bottom: 25px;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .fixed-action-btn {
      width: 62px;
      height: 62px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
      box-shadow: 0 15px 35px rgba(0,0,0,.15);
      transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      cursor: pointer;
    }

    /* Sonar Effect Animation */
    .fixed-action-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 999px;
      background: inherit;
      opacity: 0.6;
      z-index: -1;
      animation: sonar-effect 2s infinite;
    }

    @keyframes sonar-effect {
      0% { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    .fixed-action-btn:hover {
      transform: translateY(-8px) scale(1.1);
      box-shadow: 0 20px 45px rgba(0,0,0,.25);
    }

    .fixed-action-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      right: calc(100% + 15px);
      top: 50%;
      transform: translateY(-50%) translateX(10px);
      background: rgba(33, 17, 41, 0.95);
      backdrop-filter: blur(8px);
      color: #fff;
      white-space: nowrap;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      opacity: 0;
      pointer-events: none;
      transition: all .3s ease;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    .fixed-action-btn:hover::after {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    .call-btn { 
      background: linear-gradient(135deg, #60317a, #8b4faf); 
      animation: pulse-gentle 3s infinite;
    }

    .whatsapp-btn { 
      background: linear-gradient(135deg, #25D366, #128C7E); 
      animation: pulse-gentle 3s infinite 1.5s;
    }

    @keyframes pulse-gentle {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    .scroll-top-btn { 
      background: linear-gradient(135deg, #211129, #60317a); 
      opacity: 0; 
      visibility: hidden; 
      transform: translateY(20px); 
      width: 55px;
      height: 55px;
      font-size: 18px;
    }
    .scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }


    .chatbot-panel {
      width: min(380px, calc(100vw - 44px));
      background: #fff;
      border: 1px solid rgba(96,49,122,.12);
      border-radius: 28px;
      box-shadow: 0 28px 80px rgba(33,17,41,.25);
      overflow: hidden;
      transform: translateY(18px) scale(.96);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: .35s ease;
    }

    .chatbot-panel.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .chatbot-header {
      background: linear-gradient(135deg, #60317a, #00a99d);
      color: #fff;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .chatbot-body {
      height: 310px;
      overflow-y: auto;
      padding: 18px;
      background: #fbf8fd;
    }

    .chat-msg {
      max-width: 85%;
      padding: 12px 14px;
      border-radius: 18px;
      margin-bottom: 10px;
      line-height: 1.7;
      font-size: 14px;
      animation: chatPop .25s ease both;
    }

    @keyframes chatPop {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .chat-msg.bot {
      background: #fff;
      color: #334155;
      border: 1px solid rgba(96,49,122,.10);
      border-top-right-radius: 4px;
      margin-left: auto;
    }

    .chat-msg.user {
      background: #60317a;
      color: #fff;
      border-top-left-radius: 4px;
      margin-right: auto;
    }

    html[dir="ltr"] .chat-msg.bot { margin-right: auto; margin-left: 0; border-top-left-radius: 4px; border-top-right-radius: 18px; }
    html[dir="ltr"] .chat-msg.user { margin-left: auto; margin-right: 0; border-top-right-radius: 4px; border-top-left-radius: 18px; }

    .chatbot-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 14px 16px;
      border-top: 1px solid rgba(96,49,122,.10);
      background: #fff;
    }

    .chatbot-quick button {
      background: #f8f1fb;
      color: #60317a;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 800;
      transition: .25s ease;
    }

    .chatbot-quick button:hover {
      background: #60317a;
      color: #fff;
    }

    .chatbot-input-wrap {
      display: flex;
      gap: 8px;
      padding: 14px;
      background: #fff;
      border-top: 1px solid rgba(96,49,122,.10);
    }

    .chatbot-input-wrap input {
      flex: 1;
      border: 1px solid rgba(96,49,122,.18);
      border-radius: 999px;
      padding: 12px 14px;
      outline: none;
      font-size: 14px;
    }

    .chatbot-input-wrap input:focus {
      border-color: #60317a;
    }

    .chatbot-input-wrap button {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      background: #60317a;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .25s ease;
    }

    .chatbot-input-wrap button:hover {
      transform: rotate(-12deg) scale(1.05);
      background: #00a99d;
    }

    @media (max-width: 640px) {
      .fixed-contact-stack { right: 14px; bottom: 18px; }
      .fixed-left-stack { left: 14px; bottom: 18px; }
      .fixed-action-btn { width: 52px; height: 52px; font-size: 20px; }
      .fixed-action-btn::after { display: none; }
      .chatbot-panel { width: calc(100vw - 28px); }
      .chatbot-body { height: 280px; }
    }

    /* Mobile accordion - Our Work dropdown */
    #mobileWorkDropdown {
      transition: max-height 0.4s ease;
    }

    #mobileWorkChevron {
      transition: transform 0.35s ease;
    }

    /* Mobile menu scrollable */
    #mobileMenu {
      max-height: calc(100vh - 88px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }