/* =====================================================================
   3. OPPORTUNITY — «What if we could transform this paradox…»
   4. APPROACH    — «A new approach to loyalty» + «What does the solution look like»
   10. GLOBE      — «What we've learned building for the GCC…»
   ===================================================================== */

.divider { position: absolute; height: 1px; margin: 0; border: 0; background: var(--line); }

/* ---------------- opportunity ---------------- */
.opportunity { height: 608px; }
.opportunity .divider { left: 60px; top: 32px; width: 1320px; }
.opportunity__text  { position: absolute; left: 60.5px; top: 93px; width: 452px; font-size: 18px; line-height: 21.6px; }
.opportunity__title { position: absolute; left: 60.5px; top: 328px; width: 504px; font: 500 50px/50px var(--head); }
.opportunity__video { position: absolute; left: 719px; top: 82px; width: 661px; height: 460px; object-fit: cover; border-radius: 20px; }

/* ---------------- approach ---------------- */
.approach { height: 1078px; }
.approach__title { position: absolute; left: 59.6px; top: 117px; width: 451px; font: 500 50px/50px var(--head); }
.approach__text  { position: absolute; left: 641px; top: 117px; width: 603px; line-height: 19.2px; }
.approach__btn   { position: absolute; left: 641px; top: 250px; }
.approach__video { position: absolute; left: 59.5px; top: 332px; width: 1321px; height: 380px; object-fit: cover; border-radius: 20px; }
.approach__video--mobile { display: none; border-radius: 20px; }
.approach__title2 { position: absolute; left: 495px; top: 840px; width: 450px; font: 500 50px/50px var(--head); text-align: center; }
.approach__text2  { position: absolute; left: 420px; top: 958px; width: 600px; line-height: 19.2px; text-align: center; }
.approach .divider { left: 60px; top: 1051px; width: 1320px; }

/* ---------------- globe ---------------- */
.globe { height: 571px; }
.globe__box   { position: absolute; left: 593px; top: 44px; width: 787px; height: 450px; border-radius: 20px; background: var(--media); }
.globe__video { position: absolute; left: 775.1px; top: 52px; width: 447px; height: 435px; object-fit: cover; border-radius: 20px; }
.globe__text  { position: absolute; left: 60px; top: 67px; width: 454.1px; font: 500 24px/28.8px var(--head); }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .opportunity .divider, .approach .divider { width: 1130px; }
  .opportunity__video { left: 528.5px; }
  .approach__text { left: 546px; }
  .approach__btn { left: 546px; }
  .approach__video { left: 60.5px; width: 1130px; }
  .approach__title2 { left: 400px; }
  .approach__text2 { left: 325px; }
  .globe__box { left: 514.5px; width: 675px; }
  .globe__video { left: 630.5px; }
  .globe__text { left: 60.5px; width: 415px; }
}
/* tablet 740–1249 */
@media (max-width: 1249px) {
  .opportunity { height: 577px; }
  .opportunity .divider { left: -0.5px; top: 12px; width: 740px; }
  .opportunity__text  { left: 10px; top: 40px; width: 653px; font-size: 16px; line-height: 19.2px; }
  .opportunity__title { left: 10.5px; top: 126px; width: 663px; font-size: 40px; line-height: 40px; }
  .opportunity__video { left: 9.5px; top: 244px; width: 720px; height: 320px; }

  .approach { height: 998px; }
  .approach__title { left: 10.5px; top: 40px; width: 638px; font-size: 40px; line-height: 40px; }
  .approach__text  { left: 10.5px; top: 108px; width: 680px; font-size: 14px; line-height: 16.8px; }
  .approach__btn   { left: 9.5px; top: 230px; }
  .approach__video { left: 9.5px; top: 300px; width: 720px; }
  .approach__title2 { left: 145.5px; top: 808px; font-size: 40px; line-height: 40px; }
  .approach__text2  { left: 125.5px; top: 911px; width: 490px; font-size: 14px; line-height: 16.8px; }
  .approach .divider { left: 0.5px; top: 971px; width: 740px; }

  .globe { height: 610px; }
  .globe__box { left: 51px; top: 138px; width: 638px; }
  .globe__video { left: 146.5px; top: 145px; }
  .globe__text { left: 50.5px; top: 33px; width: 638px; }
}
/* mobile <740 */
@media (max-width: 739px) {
  .opportunity { height: 452px; }
  .opportunity .divider { left: 0.5px; width: 320px; }
  .opportunity__text  { left: 0.5px; top: 31px; width: 319px; font-size: 14px; line-height: 16.8px; }
  .opportunity__title { left: 0.5px; top: 147px; width: 319px; font-size: 25px; line-height: 25px; }
  .opportunity__video { left: 0.5px; top: 241px; width: 320px; height: 204px; }

  .approach { height: 938px; }
  .approach__title { left: 0.5px; top: 25px; width: 229px; font-size: 25px; line-height: 25px; }
  .approach__text  { left: 0.5px; top: 96px; width: 318px; }
  .approach__btn   { left: 0.5px; top: 284px; }
  .approach__video { display: none; }
  .approach__video--mobile { display: block; left: -1.5px; top: 328px; width: 330px; height: 337px; }
  .approach__title2 { left: 44.5px; top: 768px; width: 231px; font-size: 25px; line-height: 25px; }
  .approach__text2  { left: 37.5px; top: 839px; width: 244px; }
  .approach .divider { left: 0; top: 926px; width: 320px; }

  .globe { height: 491px; }
  .globe__box { left: -1.5px; top: 144px; width: 321px; height: 321px; }
  .globe__video { left: 11.5px; top: 154px; width: 294px; height: 300.6px; border-radius: 0; }
  .globe__text { left: -0.5px; top: 22px; width: 320px; font-size: 18px; line-height: 21.6px; }
}