.get-touch-section {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--primary-teal);
  margin: 0 5px 50px;
}

.get-touch-bg-rect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.get-touch-bg-layer {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: none;
}

.get-touch-cloud-left,
.get-touch-cloud-right,
.get-touch-script,
.get-touch-stamp {
  --get-touch-scroll-x: 0px;
  --get-touch-scroll-y: 0px;
  --get-touch-scroll-rotate: 0deg;
  --get-touch-scroll-scale: 1;
  will-change: transform;
}

.get-touch-cloud-left {
  animation: get-touch-cloud-bounce 3.6s ease-in-out 0.1s infinite alternate;
}

.get-touch-cloud-right {
  animation: get-touch-cloud-bounce-alt 3.9s ease-in-out 0.28s infinite
    alternate;
}

.get-touch-script {
  animation: get-touch-script-bounce 2.1s ease-in-out infinite alternate;
}

.get-touch-script-book {
  animation-delay: 0.18s;
}

.get-touch-script-email {
  animation-delay: 0.34s;
}

.get-touch-script-connect {
  animation-delay: 0.52s;
}

.get-touch-stamp {
  animation: get-touch-stamp-bounce 2.2s ease-in-out infinite alternate;
}

.get-touch-branches > div:nth-child(2) .get-touch-stamp {
  animation-delay: 0.18s;
  animation-duration: 2.35s;
}

.get-touch-branches > div:nth-child(3) .get-touch-stamp {
  animation-delay: 0.34s;
  animation-duration: 2.05s;
}

@keyframes get-touch-cloud-bounce {
  from {
    transform: translate3d(
        var(--get-touch-scroll-x),
        var(--get-touch-scroll-y),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }

  to {
    transform: translate3d(
        var(--get-touch-scroll-x),
        calc(var(--get-touch-scroll-y) - 18px),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }
}

@keyframes get-touch-cloud-bounce-alt {
  from {
    transform: translate3d(
        var(--get-touch-scroll-x),
        var(--get-touch-scroll-y),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }

  to {
    transform: translate3d(
        var(--get-touch-scroll-x),
        calc(var(--get-touch-scroll-y) - 22px),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }
}

@keyframes get-touch-script-bounce {
  from {
    transform: translate3d(
        var(--get-touch-scroll-x),
        var(--get-touch-scroll-y),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }

  to {
    transform: translate3d(
        var(--get-touch-scroll-x),
        calc(var(--get-touch-scroll-y) - 10px),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }
}

@keyframes get-touch-stamp-bounce {
  from {
    transform: translate3d(
        var(--get-touch-scroll-x),
        var(--get-touch-scroll-y),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }

  to {
    transform: translate3d(
        var(--get-touch-scroll-x),
        calc(var(--get-touch-scroll-y) - 12px),
        0
      )
      rotate(var(--get-touch-scroll-rotate))
      scale(var(--get-touch-scroll-scale));
  }
}

.get-touch-container {
  position: relative;
  padding: 60px 0;
}

.get-touch-bg-teal {
  width: 60%;
  left: -8%;
  top: 5%;
  opacity: 1;
  z-index: 1;
}

.get-touch-cloud-left {
  width: 52%;
  left: -4%;
  top: -4%;
  opacity: 1;
  z-index: 2;
}

.get-touch-cloud-right {
  width: 58%;
  right: -5%;
  top: -4%;
  opacity: 1;
  z-index: 2;
}

.get-touch-bg-orange {
  width: 62%;
  right: -10%;
  top: 5%;
  opacity: 1;
  z-index: 3;
}

.get-touch-bg-vector4 {
  width: 26%;
  left: 38%;
  top: 34%;
  opacity: 0.45;
  z-index: 2;
}

.get-touch-script {
  position: absolute;
  z-index: 4;
  margin: 0;
  color: var(--primary-teal);
  font-size: 44px;
  line-height: 1;
  pointer-events: none;
}

.get-touch-script-follow {
  left: 20%;
  top: 58px;
}

.get-touch-script-book {
  right: 19%;
  top: 58px;
}

.get-touch-script-email {
  left: 5%;
  top: 172px;
}

.get-touch-script-connect {
  right: 5%;
  top: 148px;
}

.get-touch-heading {
  max-width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 4;
}

.get-touch-title {
  margin: 0;
  text-align: center;
  font-size: clamp(48px, 6vw, 66px);
  font-style: italic;
}

.get-touch-branches {
  position: relative;
  z-index: 4;
  margin-top: 100px;
}

.get-touch-branch-card {
  text-align: center;
  color: var(--primary-teal);
  position: relative;
  z-index: 4;
}

.get-touch-stamp {
  width: 200px;
  height: 250px;
  display: block;
  margin: 0 auto 24px;
  border: none;
  box-shadow: none;
  object-fit: contain;
}

.get-touch-stamp-tall {
  width: 168px;
}

.get-touch-branch-title {
  margin: 0 0 4px;
  font-size: 32px;
  line-height: 1;
  color: var(--primary-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.get-touch-flag {
  width: clamp(18px, 2.1vw, 28px);
  height: clamp(18px, 2.1vw, 28px);
  object-fit: contain;
  flex-shrink: 0;
}

.get-touch-company,
.get-touch-address,
.get-touch-contact-line {
  margin: 0;
  color: var(--primary-teal);
  font-family: var(--font-brandon-grotesque);
}

.get-touch-company {
  font-size: 20px;
  line-height: 1.1;
}

.get-touch-address {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.25;
}

.get-touch-contact-line {
  margin-top: 3px;
  font-size: 17px;
  line-height: 1.2;
}

.get-touch-contact-line .bi {
  font-size: 13px;
  margin-right: 4px;
}

@media (min-width: 1800px) {
  .get-touch-container {
    max-width: 1360px;
    padding: 58px 0 54px;
  }

  .get-touch-bg-teal {
    width: 58%;
    left: -5%;
    top: 5%;
  }

  .get-touch-bg-orange {
    width: 60%;
    right: -7%;
    top: 5%;
  }

  .get-touch-bg-vector4 {
    width: 25%;
    left: 38%;
    top: 34%;
  }

  .get-touch-cloud-left {
    width: 50%;
    left: -2%;
    top: -3%;
  }

  .get-touch-cloud-right {
    width: 56%;
    right: -4%;
    top: -3%;
  }

  .get-touch-script {
    font-size: 44px;
  }

  .get-touch-script-follow {
    left: 20%;
    top: 58px;
  }

  .get-touch-script-book {
    right: 19%;
    top: 58px;
  }

  .get-touch-script-email {
    left: 5%;
    top: 172px;
  }

  .get-touch-script-connect {
    right: 5%;
    top: 148px;
  }

  .get-touch-branches {
    margin-top: 92px;
  }

  .get-touch-stamp {
    width: 200px;
    height: 250px;
    margin-bottom: 24px;
  }

  .get-touch-stamp-tall {
    width: 168px;
  }

  .get-touch-branch-title {
    font-size: 32px;
  }

  .get-touch-company {
    font-size: 20px;
  }

  .get-touch-address,
  .get-touch-contact-line {
    font-size: 17px;
  }
}

@media (min-width: 1451px) and (max-width: 1799px) {
  .get-touch-container {
    max-width: min(1320px, calc(100vw - 120px));
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .get-touch-container {
    max-width: min(1180px, calc(100vw - 84px));
    padding: 54px 18px 60px;
  }

  .get-touch-bg-teal {
    width: 62%;
    left: -11%;
    top: 6%;
  }

  .get-touch-bg-orange {
    width: 64%;
    right: -13%;
    top: 6%;
  }

  .get-touch-bg-vector4 {
    width: 24%;
    left: 38%;
    top: 35%;
  }

  .get-touch-cloud-left {
    width: 54%;
    left: -9%;
    top: -2%;
  }

  .get-touch-cloud-right {
    width: 60%;
    right: -10%;
    top: -1%;
  }

  .get-touch-script {
    font-size: clamp(36px, 3vw, 42px);
  }

  .get-touch-script-follow {
    left: 17%;
    top: 54px;
  }

  .get-touch-script-book {
    right: 17%;
    top: 54px;
  }

  .get-touch-script-email {
    left: 3%;
    top: 154px;
  }

  .get-touch-script-connect {
    right: 3%;
    top: 134px;
  }

  .get-touch-branches {
    margin-top: 82px;
  }

  .get-touch-stamp {
    width: 176px;
    height: 224px;
    margin-bottom: 20px;
  }

  .get-touch-stamp-tall {
    width: 150px;
  }

  .get-touch-branch-title {
    font-size: 28px;
    gap: 8px;
  }

  .get-touch-company {
    font-size: 18px;
  }

  .get-touch-address,
  .get-touch-contact-line {
    font-size: 15px;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .get-touch-container {
    padding: 54px 22px 60px;
  }

  .get-touch-bg-teal {
    width: 70%;
    left: -18%;
  }

  .get-touch-bg-orange {
    width: 72%;
    right: -20%;
  }

  .get-touch-cloud-left {
    width: 58%;
    left: -16%;
    top: 0;
  }

  .get-touch-cloud-right {
    width: 64%;
    right: -18%;
    top: 4%;
  }

  .get-touch-script {
    font-size: 38px;
  }

  .get-touch-script-follow {
    left: 16%;
  }

  .get-touch-script-book {
    right: 15%;
  }

  .get-touch-script-email {
    left: 2%;
  }

  .get-touch-script-connect {
    right: 2%;
  }

  .get-touch-branches {
    margin-top: 78px;
  }

  .get-touch-stamp {
    width: 170px;
    height: 220px;
  }

  .get-touch-stamp-tall {
    width: 148px;
  }

  .get-touch-branch-title {
    font-size: 27px;
  }

  .get-touch-company {
    font-size: 18px;
  }

  .get-touch-address,
  .get-touch-contact-line {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .get-touch-container {
    padding-top: clamp(20px, 4vw, 34px);
    padding-bottom: clamp(28px, 6vw, 48px);
  }

  .get-touch-cloud-left {
    width: 430px;
    left: -160px;
    top: 40px;
    z-index: 3;
  }

  .get-touch-cloud-right {
    width: 570px;
    right: -300px;
    top: 130px;
    z-index: 3;
  }

  .get-touch-script-follow {
    right: 30px;
    top: 25px;
    left: unset;
  }

  .get-touch-script-book {
    left: 0;
    top: 210px;
    right: unset;
  }

  .get-touch-script-connect {
    right: 50px;
    top: 160px;
  }

  .get-touch-stamp {
    width: clamp(142px, 36vw, 184px);
    height: 180px;
    margin-bottom: 18px;
  }

  .get-touch-stamp-tall {
    width: clamp(126px, 31vw, 154px);
  }

  .get-touch-branch-title {
    font-size: clamp(27px, 7.6vw, 34px);
  }

  .get-touch-bg-rect {
    display: none;
  }

  .get-touch-section {
    margin: 0 15px 50px;
  }

  .get-touch-branch-card {
    max-width: 420px;
    margin: 0 auto;
    padding: clamp(14px, 4vw, 20px);
  }

  .get-touch-title {
    margin: 50px 0 0;
  }

  .get-touch-branches {
    margin-top: clamp(72px, 18vw, 108px);
    row-gap: clamp(22px, 5vw, 36px) !important;
  }

  .get-touch-company {
    font-size: clamp(17px, 4.4vw, 20px);
  }

  .get-touch-address,
  .get-touch-contact-line {
    font-size: clamp(14px, 3.7vw, 17px);
  }

  .get-touch-script-email {
    display: none;
  }

  .get-touch-bg-vector4 {
    display: none;
  }

  .get-touch-bg-teal,
  .get-touch-bg-orange {
    display: none;
  }

  .get-touch-bg-teal.mobile {
    display: block !important;
    width: 520px;
    top: -10px;
    left: 0;
  }

  .get-touch-bg-orange.mobile {
    display: block !important;
    width: 800px;
    right: -180px;
    top: 120px;
  }
}

@media (min-width: 426px) and (max-width: 768px) {
  .get-touch-section {
    margin-bottom: clamp(52px, 8vw, 68px);
  }

  .get-touch-script {
    font-size: clamp(32px, 6vw, 40px);
  }

  .get-touch-script-follow {
    right: clamp(34px, 3vw, 72px);
    top: clamp(76px, 8vw, 104px);
  }

  .get-touch-script-book {
    left: clamp(0px, 2vw, 18px);
    top: clamp(190px, 34vw, 191px);
  }

  .get-touch-script-connect {
    right: clamp(42px, 10vw, 82px);
    top: clamp(145px, 25vw, 190px);
  }

  .get-touch-cloud-left {
    left: clamp(-170px, -24vw, -120px);
    top: clamp(34px, 7vw, 58px);
    width: clamp(430px, 74vw, 560px);
  }

  .get-touch-cloud-right {
    right: clamp(-320px, -45vw, -230px);
    top: clamp(118px, 21vw, 168px);
    width: clamp(560px, 96vw, 720px);
  }

  .get-touch-bg-teal.mobile {
    width: clamp(520px, 92vw, 680px);
    left: clamp(-12px, -1vw, 0px);
    top: clamp(-16px, -1vw, -4px);
  }

  .get-touch-bg-orange.mobile {
    width: clamp(780px, 136vw, 1040px);
    right: clamp(-260px, -34vw, -160px);
    top: clamp(108px, 19vw, 148px);
  }
}

@media (max-width: 568px) {
  .get-touch-container {
    padding-top: 20px;
  }

  .get-touch-script {
    font-size: clamp(28px, 8vw, 34px);
  }

  .get-touch-script-follow {
    right: clamp(30px, 8vw, 38px);
    left: auto;
    top: clamp(42px, 12vw, 50px);
  }

  .get-touch-script-book {
    left: clamp(10px, 3vw, 14px);
    top: clamp(184px, 48vw, 204px);
  }

  .get-touch-script-connect {
    right: clamp(28px, 9vw, 40px);
    top: clamp(138px, 36vw, 154px);
  }

  .get-touch-cloud-left {
    width: clamp(400px, 108vw, 430px);
    left: clamp(-172px, -42vw, -150px);
    top: clamp(34px, 9vw, 40px);
  }

  .get-touch-cloud-right {
    width: clamp(530px, 144vw, 570px);
    right: clamp(-312px, -76vw, -286px);
    top: clamp(116px, 31vw, 130px);
  }

  .get-touch-bg-teal.mobile {
    width: clamp(490px, 132vw, 520px);
    left: clamp(-12px, -3vw, 0px);
  }

  .get-touch-bg-orange.mobile {
    width: clamp(760px, 208vw, 820px);
    right: clamp(-198px, -48vw, -176px);
    top: clamp(112px, 30vw, 124px);
  }

  .get-touch-branches {
    margin-top: clamp(70px, 18vw, 78px);
  }
}

@media (min-width: 426px) and (max-width: 800px) {
  .get-touch-script-follow {
    right: clamp(30px, 8vw, 72px);
    left: auto;
    top: clamp(44px, 10vw, 78px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .get-touch-cloud-left,
  .get-touch-cloud-right,
  .get-touch-script,
  .get-touch-stamp {
    animation: none;
  }
}
