/* Extracted from Elementor HTML widget edbd591; now loaded properly as a stylesheet. */
:root{
    --rd-red:#e10600;
    --rd-dark:#0b0d12;

    /* header offset */
    --rd-header: 150px;

    /* premium electric (yellow) */
    --rd-electric: 255, 214, 0;
    --rd-electric-hex: #ffd600;

    /* Urdu spacing */
    --rd-urdu-word-space: .34em;

    /* reserve space for Urdu badge on desktop */
    --rd-top-safe: 96px;
    --rd-top-offset: 34px;

    /* glass */
    --shadow-soft: 0 18px 55px rgba(0,0,0,.10);
    --shadow-deep: 0 22px 75px rgba(0,0,0,.16);
    --inset: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06);
  }

  /* Jameel is NOT loaded by default (huge file). If it loads later, we swap to it. */
  .rd-urdu{
    font-family: "Noto Nastaliq Urdu", serif;
  }
  html.rd-jameel .rd-urdu{
    font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif;
  }

  /* =========================================
     HERO
  ========================================= */
  .rd-hero{
    position:relative;
    width:100%;
    height: calc(100vh - var(--rd-header));
    min-height: 560px;
    max-height: 760px;
    border-radius: 22px;
    overflow:hidden;
    padding: clamp(14px, 2vw, 34px);
    isolation:isolate;
    background: transparent;
  }

  .rd-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(70% 60% at 50% 10%, rgba(255,255,255,.72), rgba(255,255,255,0) 60%),
      linear-gradient(90deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.68) 44%,
        rgba(255,255,255,0) 74%,
        rgba(255,255,255,0) 100%);
    z-index:0;
  }

  /* ✅ Animation starts only when hero is in-view */
  .rd-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(55% 55% at 78% 55%, rgba(225,6,0,.10), rgba(225,6,0,0) 70%),
      repeating-linear-gradient(115deg,
        rgba(225,6,0,0) 0,
        rgba(225,6,0,0) 34px,
        rgba(225,6,0,.07) 36px,
        rgba(225,6,0,0) 54px);
    opacity:.28;
    mix-blend-mode:multiply;
    z-index:0;

    animation: none;
    background-position: 0 0, 0 0;
  }
  .rd-hero.rd-in::after{
    animation: rdStreaks 7.5s linear infinite;
  }
  @keyframes rdStreaks{
    0%{ background-position: 0 0, 0 0; }
    100%{ background-position: 0 0, 460px 0; }
  }

  .rd-noise{
    position:absolute;
    inset:-20%;
    pointer-events:none;
    z-index:1;
    opacity:.06;
    mix-blend-mode: overlay;
    background:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,.18) 0 1px, transparent 2px),
      radial-gradient(circle at 70% 60%, rgba(0,0,0,.14) 0 1px, transparent 2px),
      radial-gradient(circle at 40% 80%, rgba(0,0,0,.12) 0 1px, transparent 2px);
    background-size: 240px 240px, 280px 280px, 320px 320px;

    animation:none;
    transform: rotate(2deg);
  }
  .rd-hero.rd-in .rd-noise{
    animation: rdNoiseDrift 12s linear infinite;
  }
  @keyframes rdNoiseDrift{
    0%{ background-position: 0 0, 0 0, 0 0; }
    100%{ background-position: 240px 0, -280px 0, 320px 0; }
  }

  /* Scroll reveal (JS adds .rd-js + .rd-in) */
  .rd-js .rd-hero{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.2,1);
  }
  .rd-js .rd-hero.rd-in{
    opacity:1;
    transform: translateY(0);
  }

  /* =========================================
     TOP URDU
  ========================================= */
  .rd-top{
    position:absolute;
    top: var(--rd-top-offset);
    left:50%;
    transform:translateX(-50%);
    z-index:9;
    text-align:center;

    padding: 14px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.60));
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft), var(--inset);
    overflow: visible;
  }

  .rd-top::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%,-50%);
    border-radius: 999px;
    background: rgba(225,6,0,.12);
    box-shadow: 0 0 0 0 rgba(225,6,0,.18);
    z-index:-1;

    animation:none;
    opacity:0;
  }
  .rd-hero.rd-in .rd-top::before{
    opacity:1;
    animation: rdPulse 2.4s ease-out infinite;
  }
  @keyframes rdPulse{
    0%{ box-shadow: 0 0 0 0 rgba(225,6,0,.18); opacity:1; }
    70%{ box-shadow: 0 0 0 26px rgba(225,6,0,0); opacity:.7; }
    100%{ box-shadow: 0 0 0 32px rgba(225,6,0,0); opacity:0; }
  }

  .rd-urdu{
    margin:0;
    font-weight:700;
    line-height: 1.72;
    font-size: clamp(18px, 2vw, 30px);
    direction: rtl;
    unicode-bidi: plaintext;
    word-spacing: var(--rd-urdu-word-space);

    padding: 6px 10px 10px;
    display:inline-block;
    transform: translateY(3px);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    color: var(--rd-dark);
    text-shadow: 0 10px 25px rgba(0,0,0,.06);
    overflow: visible;
  }

  @supports (-webkit-background-clip: text) or (background-clip: text){
    .rd-urdu{
      background: linear-gradient(90deg, var(--rd-red), #0b0d12, var(--rd-red));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
  }

  /* =========================================
     MAIN
  ========================================= */
  .rd-main{
    position:relative;
    z-index:5;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(14px, 2.2vw, 28px);

    padding-top: calc(clamp(34px, 4.6vh, 50px) + var(--rd-top-safe));
    padding-bottom: 10px;
  }

  .rd-left{
    flex: 1 1 auto;
    max-width: 820px;

    margin-left: clamp(40px, 5vw, 90px);

    padding: clamp(14px, 1.7vw, 18px) clamp(16px, 2vw, 20px);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft), var(--inset);
  }

  .rd-left h1{
    margin:0 0 10px;
    font-weight: 950;
    line-height: 1.02;
    font-size: clamp(30px, 3.9vw, 64px);
    letter-spacing: -.03em;
    color: var(--rd-dark);
  }
  .rd-left h1 .accent{
    color: var(--rd-red);
    transition: text-shadow .18s ease, filter .18s ease, transform .18s ease;
  }

  .rd-hero.rd-hot .rd-left h1 .accent{
    text-shadow:
      0 0 14px rgba(var(--rd-electric), .22),
      0 0 44px rgba(var(--rd-electric), .12),
      0 0 24px rgba(225,6,0,.10);
    filter: saturate(1.08);
    transform: translateY(-1px);
  }

  .rd-sub{
    margin: 0 0 12px;
    font-size: clamp(13px, 1.15vw, 17px);
    opacity:.88;
    max-width: 62ch;
    color: rgba(11,13,18,.86);
  }

  .rd-btns{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 8px;
  }

  .rd-btn{
    --bx: 0px;
    --by: 0px;

    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 15px;
    border-radius: 14px;
    font-weight: 950;
    text-decoration:none;
    user-select:none;
    white-space:nowrap;

    border: none;
    transform: translate(var(--bx), var(--by));
    transition: transform .18s ease, box-shadow .22s ease, filter .18s ease, background .22s ease;
    box-shadow: 0 14px 35px rgba(0,0,0,.10), var(--inset);
    overflow:hidden;
  }

  .rd-btn::before{
    content:"";
    position:absolute;
    inset:-2px;
    transform: translateX(-120%) rotate(14deg);
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.18) 35%,
      rgba(255,255,255,.40) 50%,
      rgba(255,255,255,.18) 65%,
      transparent 100%);
    opacity:0;
    transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
    pointer-events:none;
  }

  .rd-btn:hover{
    transform: translate(var(--bx), calc(var(--by) - 2px));
    box-shadow: 0 18px 48px rgba(0,0,0,.13), var(--inset);
    filter: saturate(1.03);
  }
  .rd-btn:hover::before{
    opacity:.85;
    transform: translateX(120%) rotate(14deg);
  }
  .rd-btn:active{
    transform: translate(var(--bx), calc(var(--by) + 1px));
  }

  .rd-btn.primary{
    color:#fff;
    background: linear-gradient(180deg, #ff1a10, #c80500);
    box-shadow:
      0 18px 60px rgba(225,6,0,.18),
      0 14px 35px rgba(0,0,0,.10),
      var(--inset);
  }
  .rd-btn.secondary{
    color:#0b0d12;
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
    backdrop-filter: blur(10px);
  }
  .rd-btn.ghost{
    color:#0b0d12;
    background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.18));
    backdrop-filter: blur(10px);
  }

  .rd-badges{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 14px;
    font-size: 13px;
    opacity:.96;
    color: rgba(11,13,18,.88);
  }
  .rd-badge{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 8px 11px;
    border-radius: 999px;

    border: none;
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.38));
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08), var(--inset);
  }
  .rd-badge .mini{
    width:9px;height:9px;border-radius:50%;
    background: var(--rd-red);
    box-shadow: 0 0 0 6px rgba(225,6,0,.10);
  }

  /* =========================================
     Right side device
  ========================================= */
  .rd-right{
    flex: 0 0 auto;
    width: min(400px, 38vw);
    position:relative;
    z-index:4;
  }

  .rd-stage{ position: relative; perspective: 950px; }

  .rd-ground{
    position:absolute;
    left:50%;
    top: calc(100% - 22px);
    width: 86%;
    height: 36px;
    transform: translateX(-50%);
    filter: blur(10px);
    background: radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0));
    opacity:.35;
    z-index:0;
    pointer-events:none;
  }

  .rd-device{
    position:relative;
    width:100%;
    display:block;
    isolation:isolate;

    --mx: 50%;
    --my: 45%;
    --rx: 0deg;
    --ry: 0deg;

    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .18s ease;

    touch-action: manipulation;
    z-index:1;
  }

  .rd-device::before{
    content:"";
    position:absolute;
    inset:-44px;
    border-radius: 40px;
    pointer-events:none;
    opacity:0;
    transform: scale(.985);
    transition: opacity .18s ease, transform .18s ease;
    background:
      radial-gradient(240px 240px at var(--mx) var(--my),
        rgba(var(--rd-electric), .42), rgba(var(--rd-electric), 0) 66%),
      radial-gradient(460px 460px at var(--mx) var(--my),
        rgba(255,255,255,.16), rgba(255,255,255,0) 74%);
    mix-blend-mode: screen;
    filter: blur(1px);
    z-index:3;
  }

  .rd-device::after{
    content:"";
    position:absolute;
    inset:-58px;
    border-radius: 44px;
    pointer-events:none;
    opacity:0;
    transition: opacity .18s ease, transform .18s ease;
    transform: scale(.98);
    background:
      conic-gradient(from 140deg,
        rgba(var(--rd-electric), 0) 0 18%,
        rgba(var(--rd-electric), .20) 20% 28%,
        rgba(var(--rd-electric), 0) 30% 55%,
        rgba(0,0,0,.08) 57% 62%,
        rgba(var(--rd-electric), 0) 64% 100%);
    filter: blur(12px);
    z-index:2;
  }

  .rd-device.rd-on::before,
  .rd-device.rd-on::after{
    opacity:1;
    transform: scale(1);
  }

  .rd-ring{
    position:absolute;
    inset:-20px;
    border-radius: 44px;
    pointer-events:none;
    opacity:0;
    z-index:5;
    mix-blend-mode: screen;

    background:
      conic-gradient(from 0deg,
        rgba(var(--rd-electric), 0) 0%,
        rgba(var(--rd-electric), .55) 12%,
        rgba(var(--rd-electric), 0) 26%,
        rgba(var(--rd-electric), .26) 44%,
        rgba(var(--rd-electric), 0) 62%,
        rgba(var(--rd-electric), .46) 78%,
        rgba(var(--rd-electric), 0) 100%);

    -webkit-mask: radial-gradient(transparent 62%, #000 64%);
    mask: radial-gradient(transparent 62%, #000 64%);
    filter: blur(.25px);
  }

  .rd-device.rd-on .rd-ring{
    opacity: .92;
    animation: rdRingSpin 2.6s linear infinite;
  }
  @keyframes rdRingSpin{ to{ transform: rotate(360deg); } }

  .rd-inverter{
    width: 100%;
    height: auto;
    display:block;
    position:relative;
    z-index:1;
    user-select:none;
    -webkit-user-drag:none;

    filter: drop-shadow(0 18px 34px rgba(0,0,0,.16));
    transition: transform .25s ease, filter .25s ease;

    /* ✅ animation starts only after visible */
    animation: none;

    aspect-ratio: 420 / 520;
    object-fit: contain;
  }
  .rd-hero.rd-in .rd-inverter{
    animation: rdFloat 6.2s ease-in-out infinite;
  }
  @keyframes rdFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }

  .rd-device.rd-on .rd-inverter{
    transform: translateY(-10px) rotate(-0.35deg);
    filter:
      drop-shadow(0 28px 66px rgba(var(--rd-electric), .12))
      drop-shadow(0 18px 38px rgba(0,0,0,.15));
  }

  /* =========================================
     ELECTRIC bolts
  ========================================= */
  .rd-electric{
    position:absolute;
    inset:-30px;
    z-index:6;
    pointer-events:none;
    opacity:0;
    transition: opacity .15s ease;
    mix-blend-mode: screen;
  }
  .rd-device.rd-on .rd-electric{ opacity:1; }

  .rd-electric-svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
  }

  .rd-bolt{
    fill:none;
    stroke: rgba(var(--rd-electric), .96);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#rdBoltGlow);
    opacity: 0;
  }
  .rd-device.rd-on .rd-bolt{
    opacity: 1;
    stroke-dasharray: 10 16;
    animation: rdBoltDash .48s linear infinite, rdBoltFlicker .22s steps(2,end) infinite;
  }
  @keyframes rdBoltDash{ to{ stroke-dashoffset: -280; } }
  @keyframes rdBoltFlicker{ 0%{ opacity:.62; } 100%{ opacity:1; } }

  .rd-spark{
    fill: rgba(var(--rd-electric), .98);
    filter: url(#rdBoltGlow);
    opacity:0;
    transform-origin: center;
  }
  .rd-device.rd-on .rd-spark{
    opacity:1;
    animation: rdSparkPulse .34s ease-in-out infinite;
  }
  @keyframes rdSparkPulse{
    0%,100%{ transform: scale(1); opacity:.75; }
    50%{ transform: scale(1.32); opacity:1; }
  }

  /* =========================================
     Mobile toggle
  ========================================= */
  .rd-mobile-toggle{
    display:none;
    margin-top: 10px;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 14px;
    font-weight: 900;
    border: none;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0,0,0,.10), var(--inset);
    cursor:pointer;
    user-select:none;
    width: fit-content;
    max-width: 100%;
  }
  .rd-mobile-toggle .dot{
    width:10px;height:10px;border-radius:999px;
    background: rgba(var(--rd-electric), 1);
    opacity:.55;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .rd-mobile-toggle.is-on .dot{
    opacity:1;
    box-shadow: 0 0 0 12px rgba(var(--rd-electric), .0);
    transform: scale(1.05);
  }

  /* =========================================
     Responsive
  ========================================= */
  @media (max-width: 768px){
    :root{
      --rd-top-safe: 0px;
      --rd-top-offset: 0px;
      --rd-urdu-word-space: .32em;
    }

    .rd-hero{
      height: auto;
      min-height: 640px;
      max-height: none;
      border-radius: 16px;
      padding: 16px;
    }

    .rd-top{
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      margin: 6px auto 10px;
      padding: 12px 16px;
      max-width: calc(100% - 10px);
    }

    .rd-urdu{
      font-size: clamp(18px, 5.2vw, 26px);
      line-height: 1.95;
      padding: 8px 12px 12px;
      transform: translateY(1px);
    }

    .rd-main{
      flex-direction:column;
      align-items:flex-start;
      padding-top: 16px;
    }

    .rd-right{
      width: min(360px, 82vw);
      align-self:flex-end;
      margin-top: 10px;
    }

    .rd-left{
      margin-left: 0;
      width: 100%;
    }

    .rd-mobile-toggle{ display:inline-flex; }
  }

  @media (min-width: 769px) and (max-height: 720px){
    :root{ --rd-top-safe: 112px; }
  }

  @media (prefers-reduced-motion: reduce){
    .rd-hero::after, .rd-top::before, .rd-inverter, .rd-bolt, .rd-spark, .rd-noise, .rd-ring{
      animation:none !important;
      transition:none !important;
    }
  }