.about-sec-rpb.update-about.pad-tb {
    background-image: url(../images/home-about-sec/about-service.png);
    padding-bottom: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:2;
  }

  /* -------- Left column -------- */
  .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fdeceb;
    border:1px solid #f7c6c2;
    color:var(--red);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.5px;
    padding:8px 18px;
    border-radius:999px;
    margin-bottom:24px;
  }

  h1{
    font-size:44px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-0.5px;
  }
  h1 .accent{ color:var(--red); }

  .rule{
    width:90px;
    height:4px;
    margin:22px 0;
    border-radius:4px;
    background:linear-gradient(90deg, var(--red), var(--purple));
  }

  .sub{
    color:var(--red);
    font-weight:700;
    font-size:15px;
    letter-spacing:0.3px;
    line-height:1.6;
    text-transform:uppercase;
    max-width:560px;
    margin-bottom:26px;
  }

  .info-card{
    background:var(--card-bg);
    border-radius:18px;
    padding:10px 30px;
    box-shadow:0 10px 30px rgba(20,20,60,0.06);
   background-color: #dddefc59; 
  }

  .info-card p{
    font-size:15.5px;
    line-height:1.7;
    color:#333752;
  }
  .info-card strong{ color:var(--red); font-weight:700; }

  .buttons-row{
        text-align: left;
    display: ruby-text;
    margin-top: 85px;
  }
  .float-card {
    display: inline-grid;
    justify-content: center;
}
  .float-card img {
    width: 55px;
    margin: 0 auto 12px auto;
}

  /* -------- Right column (globe) -------- */
  .visual{
    position:relative;
    height:460px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Tilted elliptical orbit: outer layer tilts the whole path at an angle
     (like the diagonal ring in the reference image), the middle layer
     squashes a perfect circle into an ellipse, and the inner layer spins
     a dot around that circle — because it inherits the squash + tilt,
     the dot visually travels along the tilted ellipse. */
  .orbit-tilt{
    position:absolute;
    width:440px;
    height:440px;
    top:50%; left:50%;
    transform:translate(-50%,-50%) rotate(-18deg);
  }
  .orbit-squish{
    position:absolute;
    inset:0;
    transform:scaleY(0.42);
  }
  .orbit-line{
    position:absolute;
    inset:0;
    border:4px solid rgba(60,60,110,0.18);
    border-radius:50%;
  }
  .orbit-spin{
    position:absolute;
    inset:0;
    border-radius:50%;
    animation: spin 14s linear infinite;
  }
  .orbit-spin.reverse{
    animation-direction:reverse;
    animation-delay:-7s;
  }
  .orbit-dot{
    position:absolute;
    top:-5px; left:50%;
    width:14px; height:14px;
    margin-left:-5px;
    border-radius:50%;
  }
  .orbit-dot.purple{ background:var(--purple); box-shadow:0 0 10px rgba(106,76,245,0.6); }
  .orbit-dot.red{ background:var(--red); box-shadow:0 0 10px rgba(239,59,45,0.6); }

  @keyframes spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }

  .globe{
    width:300px;
    height:300px;
    border-radius:50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(198,203,247,0.5) 35%, rgba(158,168,230,0.55) 60%, rgba(120,130,200,0.6) 100%);
    box-shadow:
      inset -25px -25px 60px rgba(70,70,140,0.35),
      inset 15px 15px 40px rgba(255,255,255,0.6),
      0 30px 60px rgba(90,90,160,0.25);
    position:relative;
    overflow:hidden;
  }
  .globe::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(90,95,170,0.55) 1.4px, transparent 1.5px);
    background-size:9px 9px;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><ellipse cx='95' cy='95' rx='42' ry='30'/><ellipse cx='90' cy='160' rx='28' ry='55'/><ellipse cx='190' cy='80' rx='55' ry='35'/><ellipse cx='210' cy='150' rx='40' ry='45'/><ellipse cx='150' cy='230' rx='30' ry='20'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><ellipse cx='95' cy='95' rx='42' ry='30'/><ellipse cx='90' cy='160' rx='28' ry='55'/><ellipse cx='190' cy='80' rx='55' ry='35'/><ellipse cx='210' cy='150' rx='40' ry='45'/><ellipse cx='150' cy='230' rx='30' ry='20'/></svg>");
    animation: rotateMap 40s linear infinite;
  }

  @keyframes rotateMap{
    from{ background-position:0 0; }
    to{ background-position:-300px 0; }
  }

  .float-card{
    position:absolute;
    background:#fff;
    border-radius:16px;
    padding:14px 20px;
    text-align:center;
    box-shadow:0 14px 30px rgba(30,30,80,0.12);
    font-size:11.5px;
    font-weight:700;
    color:var(--navy);
    letter-spacing:0.4px;
    animation: float 5s ease-in-out infinite;
  }
  .float-card svg{ width:36px; height:36px; display:block; margin:0 auto 8px; }

  .fc-1{ top:0px; left:50%; transform:translateX(-50%); animation-delay:0s; }
  .fc-2{ top:130px; left:0px; animation-delay:0.6s; }
  .fc-3{ top:250px; left:16px; animation-delay:1.2s; }
  .fc-4{ top:130px; right:-10px; animation-delay:0.3s; }

  @keyframes float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  .fc-1{ animation-name: floatX; }
  @keyframes floatX{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%{ transform: translateX(-50%) translateY(-10px); }
  }

  .dot{
    position:absolute;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--purple);
    opacity:0.6;
  }
.text-align-right{
    text-align: left;
}
  /* -------- Stats bar -------- */
  .stats{
    max-width:1408px;
    margin:12px auto 0;
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(20,20,60,0.05);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:30px 20px;
    position:relative;
    z-index:2;
  }

  .stat{
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 20px;
    border-right:1px solid #ececf3;
  }
  .stat:last-child{ border-right:none; }

  .stat-icon{
    width:52px; height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .stat-icon svg{ width:24px; height:24px; }

  .stat-num{
    font-size:22px;
    font-weight:800;
    line-height:1.2;
  }
  .stat-label{
    font-size:13.5px;
    color:var(--muted);
    font-weight:500;
  }
  .stat-underline{
    display:block;
    width:26px;
    height:2px;
    margin-top:4px;
    border-radius:2px;
  }

  /* -------- Responsive -------- */
  @media (max-width:1024px){
    .hero{ padding:44px 32px 30px; }
    h1{ font-size:34px; }
    .hero-grid{ grid-template-columns:1fr; }
    .visual{ height:400px; order:-1; }
    .stats{ grid-template-columns:repeat(2,1fr); gap:24px 0; }
    .stat{ border-right:none; padding:10px 12px; }
  }

  @media (max-width:560px){
    .hero{ padding:32px 18px 20px; }
    h1{ font-size:26px; }
    .badge{ font-size:11px; padding:7px 14px; }
    .sub{ font-size:13px; }
    .info-card{ padding:20px; }
    .info-card p{ font-size:14px; }
    .cta-row{ flex-direction:column; }
    .btn{ justify-content:center; width:100%; }
    .visual{ height:340px; }
    .globe{ width:220px; height:220px; }
    .orbit-ring{ width:300px; height:300px; }
    .float-card{ padding:10px 12px; font-size:10px; }
    .float-card svg{ width:20px; height:20px; margin-bottom:5px; }
    .fc-1{ top:-10px; }
    .fc-2{ left:-15px; top:100px; }
    .fc-3{ left:0; top:220px; }
    .fc-4{ right:-20px; top:100px; }
    .stats{ grid-template-columns:1fr; }
    .stat{ padding:8px 4px; }
  }