/* FULLSCREEN RESPONSIVE BACKGROUND */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh; /* dynamic viewport height for mobile */
  overflow-x: hidden;
}

body {
  background-image: url('Assets/BG/Cubitrek UI Background Design-02 1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* MAIN CONTAINER */
.regions {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
  padding-bottom: 120px;
}

/* TOP ICONS */
.icon {
  width: 36px;
  position: absolute;
  top: 40px;
}
.company { right: 40px; }
.back { left: 40px; }

/* TITLE */
.title {
  margin-top: 100px;
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 52px;
  font-weight: 500;
  background: linear-gradient(180deg, white 43%, rgba(153,153,202,0.79) 81%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* GREEN LINE */
.divider {
  width: 60%;
  height: 2px;
  margin: 30px auto 40px auto;
  background: linear-gradient(90deg, rgba(0,0,0,0), #34FF9D, rgba(0,0,0,0));
}

/* MAP */
.map {
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}

/* LABELS */
.label {
  position: absolute;
  font-family: "Unbounded", sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: #fff;
}

/* DESKTOP POSITIONS */
.usa { top: 42%; left: 17%; }
.eur { top: 42%; left: 42%; }
.nor { top: 42%; left: 58%; }
.uae { top: 42%; left: 75%; }
.ksa { top: 75%; left: 52%; }
.pak { top: 75%; left: 73%; }

/* BOTTOM ARROW */
.expand {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expand .vector {
  width: 70%;
  height: 70%;
}

/* ---------------------
      RESPONSIVE
--------------------- */
@media (max-width: 900px) {

  .title {
    font-size: 36px;
    margin-top: 80px;
  }

  .label {
    font-size: 20px;
  }

  .usa { top: 45%; left: 15%; }
  .eur { top: 45%; left: 40%; }
  .nor { top: 45%; left: 58%; }
  .uae { top: 45%; left: 78%; }
  .ksa { top: 78%; left: 52%; }
  .pak { top: 78%; left: 75%; }

  .expand {
    right: 20px;
    bottom: 20px;
  }
}