#section1 {
  background-color: #fff;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%), url('../assets/images/ContactPage/ContactHeaderPage.jpg') center center/ cover no-repeat;

  .section1_content {
    height: 100svh;
    text-align: left;
    padding-left: 6.25svw;
    padding-bottom: 20svh;
    width: 100%;
    align-content: end;

    .main-overlay {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(76deg,
          #020200 -9.1%,
          rgba(0, 0, 0, 0) 64.12%);
    }

    span {
      z-index: 1;
      position: relative;
      font-family: "BentonSans Book";
      font-weight: 400;
      font-size: 36px;
      line-height: 38.9px;
      letter-spacing: 2px;

      vertical-align: middle;
      color: #c9c2c2;
    }

    h1 {
      z-index: 1;
      position: relative;
      font-family: FreightDispProBook-Regular;
      font-weight: 400;
      font-size: 85px;

      letter-spacing: 4%;
      vertical-align: middle;
      background: -webkit-linear-gradient(85.34deg,
          #855f39 -4.85%,
          #ffac59 34.69%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    h2 {
      z-index: 1;
      position: relative;
      font-family: FreightDispProMedium-Italic;
      font-weight: 400;
      font-style: italic;
      font-size: 85px;
      letter-spacing: 4%;
      vertical-align: middle;
      background: -webkit-linear-gradient(85.34deg,
          #855f39 -4.85%,
          #ffac59 34.69%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

#section2 {
  background-image: url("../assets/images/ContactPage/SingaporeContact.jpg");

  .section2_contact {
    .address {
      text-align: left;
      width: 75%;
      margin-right: 5%;
      margin-left: auto;
      display: flex;
      flex-direction: column;
      font-family: "Opensans", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0%;

      h1 {
        font-family: FreightDispProBold-Italic;
        font-weight: 400;
        font-style: italic;
        font-size: 40px;
        margin-bottom: 2svh;
        vertical-align: middle;

      }
    }
  }

  .bg-overlay {

    z-index: 1;
    height: 50svh;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 39.91%, #000000 100%);
  }

  .frame-overlay {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    /* background-color: #43434387; */
    /* border: 1px solid white; */
    display: inline-block;
  }

  .bg-overlay-address {
    z-index: 1;
    height: 100svh;
    width: 100svh;
    bottom: 0;
    position: absolute;
    background: radial-gradient(50% 50% at 0% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0.642408) 42.66%, rgba(255, 255, 255, 0) 100%);
  }

  .bangkok {
    background-image: url("../assets/images/ContactPage/BangkokContact.jpg");
    background-position-y: 25%;
  }

  .bengaluru {
    background-image: url("../assets/images/ContactPage/BengaluruContact.jpg");
    background-position-y: 30%;
  }

  .dubai {
    background-image: url("../assets/images/ContactPage/DubaiContact.jpg");
    background-position-y: 70%;
  }

  .frankfurt {
    background-image: url("../assets/images/ContactPage/FrankfurtContact.jpg");
    background-position-y: 50%;
  }

  .hongkong {
    background-image: url("../assets/images/ContactPage/HongKongContact.jpg");
    background-position-y: 25%;
  }

  .jakarta {
    background-image: url("../assets/images/ContactPage/JakartaContact.jpg");
    background-position-y: 90%;
  }

  .kualalumpur {
    background-image: url("../assets/images/ContactPage/KualaLumpurContact.jpg");
    background-position-y: 0%;
  }

  .london {
    background-image: url("../assets/images/ContactPage/LondonContact.jpg");
    background-position-y: 12.5%;
  }

  .madrid {
    background-image: url("../assets/images/ContactPage/MadridContact.jpg");
    background-position-y: 80%;
  }

  .mumbai {
    background-image: url("../assets/images/ContactPage/MumbaiContact.jpg");
    background-position-y: 45%;
  }

  .nashik {
    background-image: url("../assets/images/ContactPage/NashikContact.jpg");
    background-position-y: 35%;
  }

  .pune {
    background-image: url("../assets/images/ContactPage/PuneContact.jpg");
    background-position-y: 60%;
  }

  .seoul {
    background-image: url("../assets/images/ContactPage/SeoulContact.jpg");
    background-position-y: 25%;
  }

  .singapore {
    background-image: url("../assets/images/ContactPage/SingaporeContact.jpg");
    background-position-y: 50%;
  }

  .sydney {
    background-image: url("../assets/images/ContactPage/SydneyContact.jpg");
    background-position-y: 55%;
  }

  .taipei {
    background-image: url("../assets/images/ContactPage/TaipeiContact.jpg");
    background-position-y: 95%;
  }

  .tokyo {
    background-image: url("../assets/images/ContactPage/TokyoContact.jpg");
  }

  .zurich {
    background-image: url("../assets/images/ContactPage/ZurichContact.jpg");
    background-position-y: 35%;
  }

  .toronto {
    background-image: url("../assets/images/ContactPage/OntarioContact.jpg");
    background-position-y: 35%;
  }


  .container {
    background-color: #343434;
    height: 31svh;
    padding-top: 4svh;
    width: 100svw;
  }

  .container::-webkit-scrollbar {
    width: 0;
  }

  .contact-buttons {
    margin-bottom: 2svh;
    display: flex;
    width: 94svw;
    justify-content: end;
    margin-top: calc(3svh - 14px);

    button {
      background-color: transparent;
      border: transparent;
      color: #c9c2c2;
      width: fit-content;
      cursor: pointer;
      padding: 7px;
      text-decoration: underline;
      text-underline-offset: 5px;
      font-family: "Opensans", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0%;
    }

    .default {
      color: #e9a765;
    }
  }

  .matched-location {
    color: #e9a765;
  }

  .section2_contact {
    height: 100svh;
    bottom: 0;
    z-index: 2;
    width: 100%;

    position: absolute;
    align-items: flex-start;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
  }

  .carousel-container {
    overflow: hidden;
    width: 100%;

  }

  .locations {
    display: flex;
    column-gap: 3svw;
    padding: 0 2.4svw;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.frame_container {
  background-color: #343434;
  width: 100svw;
  height: 68.7svh;
  display: flex;
  flex-direction: column;
  justify-content: end;

  .row-flex {
    display: grid;
    margin-bottom: 4svh;
    grid-template-columns: 0.3fr 1fr 0.3fr;
    align-items: end;
  }

  .cityinfo {
    text-align: left;
    margin: 0 15% 0 5%;
    letter-spacing: 1px;
    font-size: 18px;
    font-family: sans-serif;
  }

  .frame {
    height: 44.8svh;
    /* background-color: transparent;
    border: 8px solid #656565; */
    border-radius: 6px;
    background-size: cover;
    background-position: center;
  }
}

.locations:hover {
  animation-play-state: paused !important;
}

.location {
  flex-shrink: 0;
}

.location .img {
  position: relative;

  border-radius: 0.68svw;
  width: 11svw;
  height: 7svw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.location .overlay {

  text-align: left;

  align-content: end;
  font-family: "Opensans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0%;

}

.location:has(.overlay:hover) .img {
  filter: none;
}

.locations::-webkit-scrollbar {
  width: 0;
}

@media (max-width: 1536px) and (min-width: 1366px) {

  .frame_container {
    .frame {
      height: 42svh;

      border-width: 6px;
      border-radius: 4px
    }
  }

}

@media (max-width: 1366px) {
  #section2 {
    .frame_container {
      .cityinfo {
        font-size: 14px;
      }

    }

    .section2_contact {
      .address {
        h1 {
          font-size: 32px;
        }

        font-size: 12px;
      }
    }
  }

  .location .overlay {
    font-size: 18px;
  }
}

@media (max-width: 1160px) {
  .location .img {
    width: 13.3svw;
  }
}

@media (max-width: 1080px) {
  .frame_container {
    .row-flex {
      grid-template-columns: 0.5fr 1fr 0.5fr;
    }
  }

  .location .overlay {
    font-size: 16px;
  }

}

@media (max-width: 820px) {
  #section2 {
    .frame_container {
      height: 70.7svh;

      .row-flex {
        grid-template-columns: 0.5fr 1fr 0.5fr;

        .frame {
          height: 47.8svh;
        }
      }
    }

    .container {
      height: 29svh;

      .location {
        .overlay {
          font-size: 16px;
        }

        .img {
          width: 16.6svw;
          height: 10svw;
        }
      }
    }
  }

  .carousel-container {}

}

@media (max-width: 768px) {
  #section2 {
    .frame_container {

      .row-flex {
        grid-template-columns: 0.75fr 1fr 0.75fr;
      }
    }
  }

  #section1 {
    .section1_content {
      span {
        font-weight: 400;
        font-size: 18px;
        line-height: 0px;
        letter-spacing: 1px;
      }
    }
  }
}

@media (max-width: 680px) {
  #section2 {
    .section2_contact {
      .address {
        margin-left: 10%;
      line-height: 15px;

      }
    }
  }

}

@media (max-width: 640px) {
  #section1 {
    .section1_content {
      align-content: flex-end;
      padding-bottom: 14svh;

      span {
        font-size: 18px;
      }

      h1,
      h2 {
        font-size: 44px;
      }
    }
  }

  #section2 {
    .section2_contact {

      .address {

        h1 {
          font-size: 32px;
        }

        font-size: 14px;
      }
    }
  }





}

@media (max-width: 600px) {
  #section2 {
    .container {
      height: 23svh;

      .location {
        .overlay {
          font-size: 16px;
        }
      }
    }

    .section2_contact {
      .address {
        h1 {
          margin-bottom: 3svh;
          color: #ffac59;
        }
      }
    }

    .frame_container {
      height: 76.85svh;

      .row-flex {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 6svh;

        .frame {
          width: 80svw;
          height: 32svh;
          margin: auto;
          margin-bottom: 2svh;

          .frame-overlay {
            width: calc(80svw - 16px);
            height: calc(32svh - 16px);
          }
        }
      }
    }

    .section2_contact {
      .cityinfo {
        margin: 0 10%;
        margin-bottom: 2svh;
      }

      .address {
        margin: auto;
        margin-top: 2svh;
      }
    }
  }
}

@media (max-width: 500px) {
  #section2 {
    .container {
      .location {
        .overlay {
          font-size: 14px;
          text-align: center;
        }

        .img {
          width: 21.4svw;
        }
      }
    }
  }
}

@media (max-width: 425px) {
  #section2 {
    .contact-buttons {
      width: fit-content;
      margin: 0 auto;
      margin-bottom: 1svh;

      position: absolute;
      bottom: 2svh;
      left: 50%;
      transform: translate(-50%, 0px);

      button {
        font-size: 12px;
      }
    }

    .section2_contact {
      .address {
        font-size: 12px;
      }
    }
  }
}