/* ============================================================
   GLOBAL AT PU
   Markup: section.global > .global-wrapper > .global-globe-col
                                            + .global-content-col
============================================================ */

.global{
  /* globe tuning knobs — layout adjust karne ke liye sirf ye 6 */
  --globe-d-height: 124%;   /* desktop: globe size, section height ka % */
  --globe-d-floor:  62vw;   /* desktop: chhoti section height par minimum size */
  --globe-d-right:  53%;    /* desktop: globe ka right edge (100% - 53% = 47%) */
  --globe-m-size:   170vw;  /* mobile: globe ki poori chaudai */
  --globe-m-band:   48vw;   /* mobile: globe ki kitni height dikhe */
  --globe-m-gap:    2rem;   /* mobile: content aur globe ke beech gap */

  position: relative;
  width: 100%;
  padding: 3.5rem 0;
  background: #F5F5F7;
  overflow: hidden;
}

.global-wrapper{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  min-height: 520px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------- Globe ---------- */
.global-globe-col{
  position: relative;
  flex: 0 0 50%;
  max-width: 50%;
}

.globe-img-box{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.globe-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------- Floating frosted stat badges ---------- */
.globe-stat-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 15px;
  border: 1px solid #FFF;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.globe-stat-badge:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 46px rgba(10, 16, 45, 0.2);
}

.globe-stat-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0F0445;
}

.globe-stat-lbl{
  display: block;
  width: 180px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.22;
  color: #0F0445;
  text-wrap: auto;
}

/* ---------- Right column: copy & actions ---------- */
.global-content-col{
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 1rem;
}

.global-eyebrow{
  margin-bottom: .5rem;
  letter-spacing: -0.01em;
  color: #0F0445;
}

.global-h{
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0F0445;
}
.global-h .purple-highlight{
  background: var(--New, linear-gradient(90deg, #B53C72 0%, #5641E0 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dim-highlight{
  color: #5b5b5b;
}

.global-p{
  margin-bottom: 2.2rem;
  font-size: 18px;
  line-height: 1.65;
  color: #5b5b5b;
}

/* ---------- CTA buttons ---------- */
.global-cta-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.4rem;
}

.global-btn--primary,
.global-btn--secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 2.2rem;
  border-radius: 72px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  transition: all .25s ease;
}

.global-btn--primary{
  color: #fff;
  background: #0F0445;
  border: 3px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 8px 20px rgba(18, 9, 63, 0.2);
}

.global-btn--secondary{
  color: #0F0445;
  background: #FFF;
  border: 3px solid rgba(15, 4, 69, 0.40);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
}

/* ---------- Country flag chips ---------- */
.flag-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .8rem;
}

.flag-chip,
.flag-chip b,
.flag-more{
  font-weight: 700;
  font-size: 12px;
}

.flag-chip{
  display: flex;
  align-items: center;
  gap: 7.95px;
  padding: 7.95px 7.95px 7.95px 9.938px;
  border: 0.994px solid rgba(20, 11, 75, 0.14);
  border-radius: 47.702px;
  background: #F8F7FF;
}

.flag-more{
  color: #000;
}

.flag-icon,
.flag-dot{
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* CSS vector flags — sirf fallback markup (<i class="flag-dot">) ke liye */
.flag-dot--ng{ background: linear-gradient(90deg, #008751 33.3%, #ffffff 33.3% 66.6%, #008751 66.6%); }
.flag-dot--ae{ background: linear-gradient(#00732F 33.3%, #FFFFFF 33.3% 66.6%, #000000 66.6%); border-left: 5px solid #FF0000; }
.flag-dot--np{ background: linear-gradient(135deg, #DC143C 60%, #003893 100%); }
.flag-dot--vn{ background: #DA251D; }
.flag-dot--vn::after{
  content: "\2605";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: #FFFF00;
}
.flag-dot--ke{ background: linear-gradient(#000000 30%, #FFFFFF 30% 33%, #BB0000 33% 67%, #FFFFFF 67% 70%, #006600 70%); }

/* ============================================================
   DESKTOP — globe left/top/bottom se bleed karta hai
   wrapper/col static hain taaki globe .global ke relative ho,
   yani viewport ke bilkul left edge tak pahunche.
============================================================ */
@media (min-width: 992px){

  .global-wrapper,
  .global-globe-col{
    position: static;
  }

  /* right edge pin, size section height se -> hamesha bleed */
  .globe-wrap{
    position: absolute;
    top: 50%;
    right: var(--globe-d-right);
    width: auto;
    max-width: none;
    height: max(var(--globe-d-height), var(--globe-d-floor));
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    z-index: 1;
  }

  .globe-img-box{
    height: 100%;
    aspect-ratio: auto;
  }

  .global-content-col{
    position: relative;
    z-index: 2;
  }

  .globe-stat-badge{ position: absolute; }
  .globe-stat-badge--1{ top: 22%; left: 44%; }
  .globe-stat-badge--2{ top: 44%; left: 56%; }
  .globe-stat-badge--3{ top: 66%; left: 44%; }
}
@media (min-width: 1600.98px){
	.globe-stat-badge--1{
		top:25%;
	}
}
@media (min-width: 1800.98px){
	.globe-stat-badge--1{
		top:30%;
	}
	.globe-stat-badge--3{
		top:60%;
	}
}

/* ============================================================
   MOBILE / TABLET — neeche aadha globe, edge-to-edge
============================================================ */
@media (max-width: 991.98px){

  .global{ padding: 3rem 0 0; }

  .global-wrapper{
    flex-direction: column-reverse;
    min-height: auto;
    padding: 0 1.25rem;
  }

  .global-content-col{
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }

  /* wrapper ka 1.25rem padding cancel karke full-bleed band */
  .global-globe-col{
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    max-width: none;
    height: var(--globe-m-band);
    margin: var(--globe-m-gap) -1.25rem 0;
    overflow: hidden;
  }

  /* transform NAHI — transform badges ka containing block bana deta
     hai, isliye centring margin-left se ki hai. */
  .globe-wrap{
    width: var(--globe-m-size);
    max-width: none;
    margin-left: calc(50% - var(--globe-m-size) / 2);
  }

  .globe-stat-badge{
    position: absolute;
    z-index: 3;
    padding: .55rem .95rem;
    border-radius: 12px;
  }
  .globe-stat-badge--2{ top: 24%; left: 27%; }
  .globe-stat-badge--1{ top: 58%; left: 7%; }
  .globe-stat-badge--3{ top: 58%; right: 7%; }

  .globe-stat-num{ font-size: 1.6rem; }
  .globe-stat-lbl{
    width: auto;
    max-width: 108px;
    font-size: .7rem;
  }
}
@media (max-width: 575.98px){
  .global,
  .global-section{
    --globe-m-size: 180vw;
    --globe-m-band: 50vw;
  }
	.globe-stat-badge{padding:.55rem !important;}
	.globe-stat-badge--1 .globe-stat-lbl,.globe-stat-badge--3 .globe-stat-lbl{max-width:100px !important;}
	.global-p{
		font-size:16px;
	}
	.global-btn--primary,
	.global-btn--secondary{font-size:16px;}
}
@media (max-width: 424.98px){
	.global .globe-stat-badge--1,
  .global .global-badge--1{ left: 2% !important;}
  .global .globe-stat-badge--3,
  .global .global-badge--3{ right: 2% !important;}
  
}
	@media (max-width: 375.98px){
		.globe-stat-badge--1 .globe-stat-lbl,.globe-stat-badge--3 .globe-stat-lbl{max-width:75px !important;}
	}