.our-presence {
  padding: 0 20px 53px;

  .our-presence__wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .our-presence__map {
    position: relative;
    z-index: 1;
    order: 1;
    width: 100%;
    padding: 43px 0 24px;
    margin-bottom: 25px;
  }

  .our-presence__map-stage {
    position: relative;
    width: 100vw;
    margin-left: 25%;
    transform: translateX(-50%);
  }

  .our-presence__map-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .our-presence__content {
    position: relative;
    z-index: 4;
    order: 2;
    width: 100%;
    margin: -36px 0 0;
    padding: 24px 40px;
    border-radius: 8px;
    background: rgb(245 245 245 / 72%);
    overflow-wrap: normal;
  }

  .our-presence__eyebrow {
    margin-bottom: 24px;
    text-transform: uppercase;

    :is(h1, h2, h3, h4, p) {
      margin: 0;
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-3-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      opacity: 0.4;
    }
  }

  .our-presence__title {
    :is(h1, h2, h3, h4, p) {
      margin: 0;
      font-size: var(--corp-type-mobile-heading-xl-font-size);
      font-weight: var(--fw-400);
      line-height: var(--corp-type-mobile-heading-xl-line-height);
      letter-spacing: -0.2px;

      strong {
        font-weight: var(--fw-400);
      }
    }
  }

  .our-presence__description {
    margin-top: 24px;
    color: var(--neutral-medium-gray);

    :is(p) {
      margin: 0;
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;
    }
  }

  .our-presence__cta {
    padding: 12px 40px;
    margin-top: 24px;
    border-radius: 10px;
    font-size: var(--corp-type-mobile-body-2-font-size);
  }

  .our-presence__legend {
    position: absolute;
    right: -10%;
    bottom: -5%;
    z-index: 4;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgb(255 255 255 / 82%);
    list-style: none;
  }

  .our-presence__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-body-sm-2-font-size);
    font-weight: var(--corp-type-mobile-body-sm-2-font-weight);
    line-height: var(--corp-type-mobile-body-sm-2-line-height);
    letter-spacing: -0.24px;
    white-space: nowrap;
  }

  .our-presence__legend-marker {
    flex: 0 0 auto;
  }

  .our-presence__hotspot {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    padding: 0;
    text-decoration: none;
    transform: translate(-50%, -50%);

    &.is-active {
      z-index: 100;
    }
  }

  .our-presence__hotspot-dot,
  .our-presence__legend-marker {
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid currentcolor;
    border-radius: 50%;
    background: var(--corp-color-surface);
  }

  .our-presence__tooltip {
    position: absolute;
    z-index: 101;
    bottom: calc(100% + 10px);
    left: 50%;
    width: max-content;
    max-width: min(220px, 80vw);
    padding: 10px 30px 10px 12px;
    border-radius: 6px;
    background: var(--corp-color-surface);
    color: var(--corp-color-neutral-black);
    box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
    font-size: var(--corp-type-mobile-body-xs-font-size);
    font-weight: var(--corp-type-mobile-body-xs-font-weight);
    line-height: var(--corp-type-mobile-body-xs-line-height);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
    transform: translateX(-50%) translateY(6px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
  }
  .our-presence__hotspot.is-active .our-presence__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .our-presence__tooltip-close {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 2;
    width: 18px;
    height: 18px;
    color: var(--corp-color-neutral-black);
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
  }

  .our-presence__tooltip-title {
    display: block;
    margin-bottom: 6px;
    padding-right: 18px;
    font-weight: 700;
  }

  .our-presence__tooltip-content {
    display: block;
  }

  .red-point {
    color: #cb2532;
  }
  .blue-point {
    color: #232abd;
  }
  .green-point {
    color: #2fc516;
  }
  .yellow-point {
    color: #f7ca15;
  }
  .orange-point {
    color: #ff6b09;
  }

  .agra {
    left: 60%;
    top: 37%;
  }
  .ahmedabad {
    left: 50%;
    top: 50%;
  }
  .bangalore {
    left: 59%;
    top: 75%;
  }
  .bhopal {
    left: 59%;
    top: 48%;
  }
  .bhubaneshwar {
    left: 75.5%;
    top: 56%;
  }
  .chandigarh {
    left: 58%;
    top: 30%;
  }
  .chennai {
    left: 64%;
    top: 76%;
  }
  .cochin {
    left: 58%;
    top: 81%;
  }
  .coimbatore {
    left: 60%;
    top: 80%;
  }
  .dehradun {
    left: 63%;
    top: 32%;
  }
  .gujarat {
    left: 47%;
    top: 54%;
  }
  .gurugram {
    left: 58.2%;
    top: 34.2%;
  }
  .guwahati {
    left: 85%;
    top: 42%;
  }
  .haryana {
    left: 57.5%;
    top: 33%;
  }
  .hubli {
    left: 56%;
    top: 70%;
  }
  .hyderabad {
    left: 63%;
    top: 63%;
  }
  .indore {
    left: 56%;
    top: 52%;
  }
  .jaipur {
    left: 57.5%;
    top: 39%;
  }
  .jammu {
    left: 55.5%;
    top: 20%;
  }
  .kolkata {
    left: 79%;
    top: 51%;
  }
  .kozhikode {
    left: 58%;
    top: 80%;
  }
  .lucknow {
    left: 68%;
    top: 40%;
  }
  .ludhiana {
    left: 56%;
    top: 30%;
  }
  .madurai {
    left: 61%;
    top: 80%;
  }
  .manesar {
    left: 58.2%;
    top: 35.3%;
  }
  .mangalore {
    left: 56%;
    top: 75%;
  }
  .mumbai {
    left: 52%;
    top: 60%;
  }
  .nagpur {
    left: 62%;
    top: 56%;
  }
  .nasik {
    left: 54%;
    top: 57%;
  }
  .new-delhi {
    left: 58%;
    top: 34.5%;
  }
  .new-delhi-head-offices {
    left: 57.2%;
    top: 32.2%;
  }

  .new-delhi-regional-offices {
    left: 58.2%;
    top: 33.4%;
  }
  .panchkula {
    left: 58.5%;
    top: 29.5%;
  }
  .patna {
    left: 74%;
    top: 43%;
  }
  .pune {
    left: 54%;
    top: 63%;
  }
  .raipur {
    left: 68%;
    top: 53%;
  }
  .ranchi {
    left: 74%;
    top: 49%;
  }
  .siliguri {
    left: 80%;
    top: 40%;
  }
  .surat {
    left: 52%;
    top: 55%;
  }
  .trivandrum {
    left: 58%;
    top: 82%;
  }
  .udaipur {
    left: 52%;
    top: 45%;
  }
  .vijayawada {
    left: 65%;
    top: 67%;
  }
  .visakhapatnam {
    left: 70%;
    top: 63%;
  }

  @media (width >= 768px) {
    padding: 78px 20px 87px;

    .our-presence__map-stage {
      position: relative;
      width: 100vw;
      margin-left: 15%;
      transform: translateX(-50%);
    }

    .our-presence__wrapper {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
    }

    .our-presence__content {
      order: 1;
      flex: 0 0 34%;
      width: auto;
      margin: 0;
      padding: 32px;
      background: var(--corp-color-surface-secondary);
    }

    .our-presence__map {
      order: 2;
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      overflow: visible;
      padding: 0;
      margin-top: -35px;
    }

    .our-presence__eyebrow :is(h1, h2, h3, h4, p) {
      font-size: var(--corp-type-tablet-body-2-font-size);
      font-weight: var(--corp-type-tablet-body-3-font-weight);
      line-height: var(--corp-type-tablet-body-2-line-height);
      letter-spacing: -0.12px;
    }

    .our-presence__title :is(h1, h2, h3, h4, p) {
      font-size: var(--corp-type-tablet-heading-1-font-size);
      font-weight: var(--fw-500);
      line-height: var(--corp-type-tablet-heading-2-line-height);

      strong {
        font-weight: var(--fw-500);
      }
    }

    .our-presence__description :is(p) {
      font-size: var(--corp-type-tablet-body-2-font-size);
      font-weight: var(--corp-type-tablet-body-2-font-weight);
      line-height: var(--corp-type-tablet-body-2-line-height);
      letter-spacing: -0.36px;
    }

    .our-presence__cta {
      width: auto;
      padding: 12px 16px;
      font-size: var(--corp-type-cta-font-size);
      font-weight: var(--corp-type-cta-font-weight);
      line-height: var(--corp-type-cta-line-height);
      letter-spacing: -0.14px;
    }

    .our-presence__legend {
      right: 5%;
      bottom: 9%;
      gap: 16px;
      border-radius: 16px;
      background: var(--corp-legend-bg);
      padding: 4.503px 12px;
    }

    .our-presence__legend-item {
      font-size: var(--corp-type-tablet-body-2-font-size);
      font-weight: var(--corp-type-tablet-body-2-font-weight);
      line-height: var(--corp-type-tablet-body-2-line-height);
      letter-spacing: -0.36px;
    }

    .our-presence__hotspot {
      width: 12px;
      height: 12px;
    }

    .our-presence__hotspot-dot,
    .our-presence__legend-marker {
      width: 12px;
      height: 12px;
      border-width: 3px;
    }

    .our-presence__tooltip {
      font-size: var(--corp-type-tablet-body-sm-font-size);
      line-height: var(--corp-type-tablet-body-sm-line-height);
    }
  }

  @media (width >= 1200px) {
    padding: 68px 20px 0;

    .our-presence__wrapper {
      padding: 0 20px;
    }

    .our-presence__content {
      flex-basis: 34%;
      padding: 40px;
    }

    .our-presence__eyebrow :is(h1, h2, h3, h4, p) {
      font-size: var(--corp-type-desktop-heading-4-font-size);
      font-weight: var(--corp-type-desktop-heading-4-font-weight);
      line-height: var(--corp-type-desktop-heading-4-line-height);
      letter-spacing: -0.4px;
    }

    .our-presence__title :is(h1, h2, h3, h4, p) {
      font-size: var(--corp-type-desktop-heading-lg-font-size);
      font-weight: var(--fw-600);
      line-height: var(--corp-type-desktop-heading-lg-line-height);
      letter-spacing: -1.26px;
      text-transform: capitalize;

      strong {
        font-weight: var(--fw-600);
      }
    }

    .our-presence__description :is(p) {
      font-size: var(--corp-type-desktop-body-font-size);
      font-weight: var(--corp-type-desktop-body-font-weight);
      line-height: var(--corp-type-desktop-body-line-height);
      letter-spacing: -0.16px;
    }

    .our-presence__cta {
      margin-top: 32px;
      padding: 12px 40px;
      font-size: var(--corp-type-cta-font-size);
      font-weight: var(--corp-type-cta-font-weight);
      line-height: var(--corp-type-cta-line-height);
      letter-spacing: -0.42px;
    }

    .our-presence__legend {
      right: 5%;
      bottom: 10%;
      gap: 14px;
      border-radius: 12px;
      padding: 8px 12px;
    }

    .our-presence__legend-item {
      font-size: var(--corp-type-desktop-body-font-size);
      font-weight: var(--corp-type-desktop-body-font-weight);
      line-height: var(--corp-type-desktop-body-line-height);
      letter-spacing: -0.16px;
    }

    .our-presence__hotspot {
      width: 16px;
      height: 16px;
    }

    .our-presence__hotspot-dot,
    .our-presence__legend-marker {
      width: 14px;
      height: 14px;
      border-width: 4px;
    }

    .our-presence__tooltip {
      max-width: 300px;
      padding: 12px 34px 12px 14px;
    }
  }
}