.elementor-27 .elementor-element.elementor-element-a83da70{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-27 .elementor-element.elementor-element-a83da70:not(.elementor-motion-effects-element-type-background), .elementor-27 .elementor-element.elementor-element-a83da70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#001B4D;}.elementor-27 .elementor-element.elementor-element-d53a623{width:var( --container-widget-width, 99.964% );max-width:99.964%;--container-widget-width:99.964%;--container-widget-flex-grow:0;}.elementor-27 .elementor-element.elementor-element-d53a623.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-27 .elementor-element.elementor-element-bd9dc6d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-27 .elementor-element.elementor-element-bd20857{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27 .elementor-element.elementor-element-39b4669{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27 .elementor-element.elementor-element-62b07cc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27 .elementor-element.elementor-element-d2dd373{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-27 .elementor-element.elementor-element-bd20857{--width:25%;}.elementor-27 .elementor-element.elementor-element-39b4669{--width:25%;}.elementor-27 .elementor-element.elementor-element-62b07cc{--width:25%;}.elementor-27 .elementor-element.elementor-element-d2dd373{--width:25%;}}/* Start custom CSS for html, class: .elementor-element-d53a623 */*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --navy: #0A1628;
      --gold: #f5b800;
      --gold2: #e6a800;
      --white: #ffffff;
      --text-muted: #a0aec0;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background: var(--navy);
      color: var(--white);
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* ── HERO ── */
    .hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px 60px 80px 60px;
      min-height: 100vh;
      position: relative;
      overflow: hidden;
    }

    /* radial glow right side */
    .hero::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 55%; height: 100%;
      background: radial-gradient(ellipse at 70% 40%, rgba(245,184,0,.06) 0%, transparent 65%);
      pointer-events: none;
    }

    /* dot grid top-right */
    .dot-grid {
      position: absolute;
      top: 30px; right: 30px;
      width: 200px; height: 200px;
      background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size: 18px 18px;
      pointer-events: none;
    }

    /* geometric decorations */
    .geo { position: absolute; pointer-events: none; }
    .geo-circle { width:18px;height:18px;border:2px solid var(--gold);border-radius:50%;opacity:.5;display:block; }
    .geo-plus { color:var(--gold);font-size:1.2rem;opacity:.5; }
    .geo-triangle { width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid var(--gold);opacity:.4;display:block; }
    .geo1{top:12%;left:50%;}
    .geo2{top:28%;left:57%;}
    .geo3{top:18%;left:64%;}
    .geo4{top:62%;right:40%;}
    .geo5{bottom:22%;left:54%;}

    /* ── LEFT TEXT ── */
    .hero-left {
      flex: 0 0 46%;
      z-index: 2;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gold);
      color: var(--navy);
      font-weight: 700;
      font-size: .9rem;
      padding: 10px 22px;
      border-radius: 50px;
      margin-bottom: 28px;
      animation: fadeUp .6s ease both;
    }
    .badge svg { width:18px;height:18px;flex-shrink:0; }

    .hero-title {
      font-size: clamp(1.9rem, 3.2vw, 3.1rem);
      font-weight: 800;
      line-height: 1.15;
      animation: fadeUp .7s .1s ease both;
       color: var(--white);
    }

    .divider {
      width: 48px; height: 3px;
      background: var(--gold);
      margin: 18px 0 22px;
      animation: fadeUp .7s .15s ease both;
    }

    .hero-sub {
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.75;
      max-width: 380px;
      margin-bottom: 38px;
      animation: fadeUp .7s .2s ease both;
    }

    .cta-row {
      display: flex;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap;
      animation: fadeUp .7s .28s ease both;
    }

    .btn-primary {
      background: var(--gold);
      color: var(--navy);
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      padding: 14px 28px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      transition: background .2s, transform .2s, box-shadow .2s;
    }
    .btn-primary:hover {
      background: var(--gold2);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(245,184,0,.3);
    }

    .tagline {
      color: var(--text-muted);
      font-size: .8rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tagline::before {
      content:'';
      display:inline-block;
      width:8px;height:1px;
      background:var(--text-muted);
    }

    /* ── RIGHT: laptop + social icons ── */
    .hero-right {
      flex: 0 0 54%;
      position: relative;
      height: 520px;
      z-index: 2;
    }

    /* ── LAPTOP WRAP — FIX: properly centered ── */
    .laptop-wrap {
      position: absolute;
      top: 58%;
      left: 44%;
      width: 630px;
      transform: translate(-46%, -50%);
    }

    .laptop-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* dashed curved decoration */
    .dashed-arc {
      position: absolute;
      top: 2px;
      left: 48%;
      width: 170px;
      height: 76px;
      border-top: 2px dashed rgba(245,184,0,.4);
      border-right: 2px dashed rgba(245,184,0,.4);
      border-radius: 0 50px 0 0;
      pointer-events: none;
    }

    /* ── SOCIAL ICONS ── */
    .soc-icon {
      position: absolute;
      width: 78px; height: 78px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 32px rgba(0,0,0,.45);
      cursor: pointer;
      z-index: 5;
      transition: transform .2s, box-shadow .2s;
    }
    .soc-icon:hover {
      box-shadow: 0 18px 40px rgba(0,0,0,.5);
    }
    /* glass shine */
    .soc-icon::before {
      content:'';
      position:absolute;inset:0;
      border-radius:20px;
      background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 55%);
      pointer-events:none;
    }
    .soc-icon svg { width:38px;height:38px;position:relative;z-index:1; }

    /* FIX: icon positions adjusted to sit around laptop properly */
    .soc-fb {
      background: linear-gradient(145deg,#2d8cf0,#1265c0);
      top: 20px;
      right: 120px;
      animation: float1 3.6s ease-in-out infinite;
    }
    .soc-ig {
      background: linear-gradient(145deg,#f9a74b,#e1306c,#8134af,#405de6);
      top: 155px;
      right: -5px;
      animation: float2 4.1s ease-in-out infinite;
    }
    .soc-tw {
      background: linear-gradient(145deg,#4cb8f5,#1a91d1);
      bottom: 0px;
      right: -4px;
      animation: float3 4.7s ease-in-out infinite;
    }
    .soc-li {
      background: linear-gradient(145deg,#2f86e0,#0a5aad);
      top: 185px;
      left: 120px;
      animation: float4 3.9s ease-in-out infinite;
    }


    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes float1 {
      0%,100%{ transform:translateY(0) rotate(0deg); }
      30%    { transform:translateY(-20px) rotate(4deg); }
      65%    { transform:translateY(-9px) rotate(-2deg); }
    }
    @keyframes float2 {
      0%,100%{ transform:translateY(0) rotate(0deg); }
      25%    { transform:translateY(-16px) rotate(-3deg); }
      58%    { transform:translateY(-24px) rotate(3deg); }
    }
    @keyframes float3 {
      0%,100%{ transform:translateY(0) rotate(0deg); }
      40%    { transform:translateY(-22px) rotate(5deg); }
      72%    { transform:translateY(-11px) rotate(-2deg); }
    }
    @keyframes float4 {
      0%,100%{ transform:translateY(0) rotate(0deg); }
      35%    { transform:translateY(-14px) rotate(-4deg); }
      68%    { transform:translateY(-22px) rotate(3deg); }
    }

   /* ════════════════════════════════
   TABLET  ≤ 900px
════════════════════════════════ */
@media (max-width: 900px) {

  .hero{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 50px 32px 100px;
    gap: 50px;
    min-height: 100vh;
  }

  .hero-left{
    flex: none;
    width: 100%;
  }

  .badge{
    margin: 0 auto 24px;
  }

  .hero-sub{
    margin: 0 auto 30px;
  }

  .cta-row{
    justify-content: center;
  }

  .tagline{
    display: none;
  }

  .hero-right{
    flex: none;
    width: 100%;
    height: 420px;
    position: relative;
  }

  .laptop-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    transform: translate(-50%, -50%);
  }

  .laptop-wrap img{
    width: 100%;
    height: auto;
    display: block;
  }

  .soc-fb{
    top: 10px;
    right: 30px;
  }

  .soc-ig{
    top: 155px;
    right: -5px;
  }

  .soc-tw{
    bottom: 20px;
    right: -5px;
  }

  .soc-li{
    top: 165px;
    left: 20px;
  }

  .geo1,.geo2,.geo3,.geo4,.geo5{
    display:none;
  }
}


/* ════════════════════════════════
   MOBILE ≤ 540px
════════════════════════════════ */
@media (max-width: 540px) {

  .hero{
    padding: 36px 10px 90px;
    gap: 36px;
  }

  .badge{
    font-size: .78rem;
    padding: 8px 16px;
  }

  .hero-title{
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .hero-sub{
    font-size: .88rem;
  }

  .btn-primary{
    font-size: .85rem;
    padding: 12px 22px;
  }

  .hero-right{
    height: 320px;
  }

  .laptop-wrap{
    width: 300px;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
  }

  /* smaller icons on mobile */
  .soc-icon{
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .soc-icon svg{
    width: 28px;
    height: 28px;
  }

  .soc-fb{
    top: -5px;
    right: 20px;
  }

  .soc-ig{
    top: 95px;
    right: -5px;
  }

  .soc-tw{
    bottom: 10px;
    right: 10px;
  }

  .soc-li{
    top: 110px;
    left: 10px;
  }

  .dashed-arc{
    display:none;
  }

  .dot-grid{
    width:120px;
    height:120px;
  }
}/* End custom CSS */