/* DESCRIPTION:Banner */
@media screen and (max-width: 767.5px) {
  body {
    overflow: visible !important;
  }
}
.contact-us-banner {
  .pt-container {
    border-radius: 0 0 clamp(3.125rem, 1.532rem + 6.536vw, 9.375rem)
      clamp(3.125rem, 1.532rem + 6.536vw, 9.375rem);
    background: linear-gradient(180deg, #1a2c47 -9.43%, #1c638d 52.5%);
  }

  .top-container {
    text-align: center;
    margin: auto;
    width: 100%;
    margin-bottom: 10%;
  }

  .top-container h1 {
    margin-bottom: 2.95% !important;
    width: 41.6%;
    margin: auto;
    color: #ffff;
    padding-top: 14.6%;
  }

  .top-container p {
    width: 62.8%;
    color: #ffff;
    margin: auto;
  }

  .bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    padding: 4% 0 0;
  }

  @media (max-width: 767.5px) {
    .top-container {
      /* margin-bottom: 12.5%; */
    }

    .bottom-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .top-container h1 {
      margin-bottom: 4.6% !important;
      width: 88%;
      padding-top: 45.23%;
    }

    .top-container p {
      width: 88%;
    }
  }
}

/* contact us form  new */
.form-popup-overlay {
  display: none;
}

.custom-dropdown.open {
  .form-popup-overlay {
    display: flex;
  }
}
@media (max-width: 767.5px) {
  .form-popup-overlay {
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }
}
/* contact us form  */

.contact-us-container {
  padding: 2.09% 0 0;
  padding-top: 4vw;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
  background-size: cover;

  #playPauseBtn {
    display: none !important;
  }

  .contact-us-main-header {
    margin-bottom: 1.67em;
    padding: 0 1.34em;
  }

  .contact-us-container-inner {
    .owl-carousel {
      padding: 0 5.21%;

      .item {
        cursor: pointer;
        min-height: clamp(4.5rem, 1.495rem + 3.756vw, 6rem);
        position: relative;
        color: rgba(255, 255, 255, 0.5);
        transition: transform 0.3s ease, color 0.3s ease;
      }

      .item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 1;
      }

      .item::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: white;
        z-index: 1;
        transition: width 0.3s ease;
      }

      .item:hover:before,
      .item.current:before {
        width: 100%;
      }

      .item:hover,
      .item.current {
        color: #fff;
      }
    }

    .content-box {
      display: flex;
      justify-content: space-between;
      padding: 2.5% 3.34% 4.17% 3.34%;
      opacity: 0;
      transform: translateY(20%);
      transition: opacity 0.3s ease, transform 0.3s ease;

      .service-btn-solid {
        min-width: 176px;
        height: 48px;
        padding: 0;
        background-color: var(--service-primary-color);
      }

      .service-btn-solid:hover {
        background-color: var(--service-hover-color);
      }

      .left-box,
      .right-box {
        text-align: left;
      }

      .left-box {
        width: 29%;

        .left-heading {
          margin-bottom: 0.35em;
          margin-top: 0.38em;
        }

        .left-text {
          margin-bottom: 1.25em;
        }
      }

      .right-box {
        width: 66.09%;

        .required-text {
          margin-bottom: 1.5em;
          margin-left: 1.87%;
        }
      }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
      screen and (max-width: 767.5px) {
      .content-box .left-box,
      .content-box .right-box {
        width: auto;
      }
    }

    .fade-up {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .custom-form {
    .form-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1%;

      .form-group {
        display: flex;
        flex-direction: column;
        width: 49%;
      }

      .form-group.service-dropdown {
        display: flex;
        flex-direction: column;

        .custom-dropdown {
          accent-color: var(--adro-electric-blue);
          border-radius: clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
          height: clamp(2.875rem, 2.65rem + 1.125vw, 4rem);
          border: 2px solid var(--adro-electric-blue);
          background: rgba(53, 74, 96, 0.6);
          color: white;
          width: 100%;
          position: relative;

          /* .custom-selected::after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            right: 16px;
                            transform: translateY(-50%)rotate(0deg);
                            transition: transform 0.2s ease;
                            width: clamp(0.938rem, 0.825rem + 0.563vw, 1.5rem);
                            height: clamp(0.938rem, 0.825rem + 0.563vw, 1.5rem);
                            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'><path d='M12.3951 18C11.6253 19.3333 9.70084 19.3333 8.93104 18L0.270782 3C-0.499018 1.66666 0.463234 -2.11562e-06 2.00283 -1.98102e-06L19.3233 -4.66815e-07C20.8629 -3.32219e-07 21.8252 1.66667 21.0554 3L12.3951 18Z' fill='%23D9D9D9'/></svg>");
                            background-repeat: no-repeat;
                            background-size: contain;
                            pointer-events: none;
                        }

                        .custom-selected.rotated::after {
                            transform: translateY(-50%) rotate(180deg);
                        } */

          .custom-selected {
            margin: 12px 16px;
            height: 58%;
            /* height: clamp(2.875rem, 2.65rem + 1.125vw, 4rem); */
            position: relative;
            align-content: center;
            text-wrap: nowrap;
            overflow: hidden;
          }

          .custom-selected.grey-text {
            color: rgba(255, 255, 255, 0.6);
          }

          .contactUsPopup {
            max-height: 24.36vh;
            /* display: none; */
            /* overflow-y: auto; */
            margin: 0;
            border-radius: 15px;
            border: 2px solid var(--adro-electric-blue);
            background: #2b5472;
            padding: clamp(0.5rem, 0.35rem + 0.75vw, 1.25rem)
              clamp(0.75rem, 0.5rem + 1.25vw, 2rem);

            .popup-header {
              display: none;

              .service-close-popup {
                cursor: pointer;
              }
            }

            .custom-options {
              position: relative;
              z-index: 10;
              -webkit-overflow-scrolling: touch;
              /* display: none; */
              max-height: 20.36vh;
              list-style: none;
              overflow-y: auto;
              width: 100%;
              margin: 0;
              padding: 0;
              padding-right: 16px;

              li {
                margin-bottom: 1em;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                flex-direction: row-reverse;
                justify-content: flex-end;
              }

              li.subservice {
                padding-left: 2em;
              }

              li:hover {
                font-weight: 500;
              }

              li::after {
                content: "";
                width: 18px;
                height: 18px;
                border: 2px solid #fff;
                border-radius: 3px;
                display: flex;
                flex-shrink: 0;
                margin-right: 16px;
              }

              li.selected::after {
                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'><path d='M0.799805 6.80005L5.49546 10.8L12.7998 0.800049' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>")
                  no-repeat center;
                background-size: 80%;
                pointer-events: none;
              }
            }

            .custom-options::-webkit-scrollbar {
              width: 4px;
            }

            .custom-options::-webkit-scrollbar-thumb {
              background: white;
              border-radius: 20px !important;
            }

            .custom-options::-webkit-scrollbar-track {
              background: var(--adro-mid-blue);
            }
          }
        }

        .custom-dropdown::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 16px;
          transform: translateY(-50%) rotate(0deg);
          transition: transform 0.2s ease;
          width: clamp(0.938rem, 0.825rem + 0.563vw, 1.5rem);
          height: clamp(0.938rem, 0.825rem + 0.563vw, 1.5rem);
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'><path d='M12.3951 18C11.6253 19.3333 9.70084 19.3333 8.93104 18L0.270782 3C-0.499018 1.66666 0.463234 -2.11562e-06 2.00283 -1.98102e-06L19.3233 -4.66815e-07C20.8629 -3.32219e-07 21.8252 1.66667 21.0554 3L12.3951 18Z' fill='%23D9D9D9'/></svg>");
          background-repeat: no-repeat;
          background-size: contain;
          pointer-events: none;
        }

        .custom-dropdown.rotated::after {
          transform: translateY(-50%) rotate(180deg);
        }
      }

      .file-upload {
        #attachment {
          border-top-right-radius: 0;
          border-top-left-radius: 0;
          border-top: none;
        }

        input[type="file"] {
          position: absolute;
          left: -9999px;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
          border: 0;
          padding: 0;
          margin: 0;
        }

        .file-label {
          text-align: center;
          display: flex;
          justify-content: center;
          gap: 16px;
          align-items: center;
          position: relative;
          margin: 0;
          padding: 14px 48px 14px 18px;
          border-radius: 0 0 clamp(0.875rem, 0.738rem + 0.688vw, 1.563rem)
            clamp(0.875rem, 0.738rem + 0.688vw, 1.563rem);
          border: 2px solid var(--adro-electric-blue);
          border-top: 0;
          background: rgba(53, 74, 96, 0.6);
          cursor: pointer;
          user-select: none;
          min-height: 54px;
          box-sizing: border-box;
          transition: box-shadow 0.15s, border-color 0.15s, transform 0.06s;

          .file-name {
            pointer-events: none;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: calc(100% - 88px);
            text-align: center;
          }

          .file-hint {
            margin-top: 8px;
            font-size: 13px;
            color: #6b7280;
            text-align: center;
          }

          .file-icon {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0.92;
          }
        }

        .file-label:focus,
        .file-label:focus-visible {
          outline: none;
          box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
          border-color: var(--accent);
        }

        .file-label:hover {
          box-shadow: 0 4px 12px rgba(67, 85, 110, 0.06);
        }

        .file-label:active {
          transform: translateY(1px);
        }
      }

      .sr-only {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap;
        border: 0;
        padding: 0;
        margin: -1px;
      }
    }

    .form-row.full-width {
      flex-direction: column;
    }

    .form-row.msg-box {
      margin-bottom: 2.1%;

      textarea {
        border-radius: clamp(0.875rem, 0.738rem + 0.688vw, 1.563rem);
        height: auto;
        padding: 2% 2.75%;
        resize: none;
      }
      textarea::-webkit-scrollbar {
        width: 10px; /* width of the scrollbar */
      }

      textarea::-webkit-scrollbar-track {
        background: #2d79a6; /* scrollbar track color */
      }

      textarea::-webkit-scrollbar-thumb {
        background-color: var(--adro-electric-blue); /* scrollbar thumb color */
        border-radius: 10px; /* rounded corners */
        border: 2px solid #2d79a6; /* space around thumb */
      }

      /* Firefox support */
      textarea {
        scrollbar-width: thin; /* "auto" | "thin" */
        scrollbar-color: var(--adro-electric-blue) #2d79a6; /* thumb | track */
      }
    }

    .form-row.privacy-row {
      .privacy-statement {
        margin-left: 0;
        margin-right: 0;
        padding-left: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
        text-indent: calc(-1 * clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem));

        a {
          font-weight: 700;
        }

        .privacy-policy {
          height: unset;
          vertical-align: text-bottom;
        }
      }
    }

    input,
    textarea,
    select {
      accent-color: var(--adro-electric-blue);
      border-radius: clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
      height: clamp(2.875rem, 2.65rem + 1.125vw, 4rem);
      border: 2px solid var(--adro-electric-blue);
      background: rgba(53, 74, 96, 0.6);
      color: white;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
      color: white;
      background-color: transparent !important;
      transition: background-color 9999s ease-in-out 0s;
      outline: none !important;
    }

    input:focus-visible,
    textarea:focus-visible {
      outline: none !important;
    }

    label {
      margin: 0.16em 1.25em;
      color: white;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
    }

    input[type="radio"] {
      width: clamp(1rem, 0.887rem + 0.563vw, 1.563rem) !important;
      height: clamp(1rem, 0.887rem + 0.563vw, 1.563rem) !important;
/*       accent-color: white; */
      margin-right: 4px;
    }

    button {
      max-width: fit-content;
      background-color: var(--adro-deep-blue);
    }

    button[type="submit"]:disabled {
      background-color: #c6c6c6;
      border-color: #c6c6c6;
      color: #8a8a8a;
      transition: all 0.3s ease;
      cursor: not-allowed;
    }

    button[type="submit"]:not(:disabled) {
      cursor: pointer;
    }
    button[type="submit"]:not(:disabled):hover {
      color: #1a2c47 !important;
      border-color: #0cf !important;
      background: #0cf !important;
      font-weight: 500;
      transition: 0.3s ease;
    }

    input.error-border,
    textarea.error-border,
    select.error-border {
      border-color: #e84944;
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 24px 24px;
      padding-right: 40px;
      transition: none;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17316C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="%23E84944"/><path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="%23E84944"/><path d="M12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14C12.2652 14 12.5196 13.8946 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7Z" fill="%23E84944"/></svg>');
    }

    .error-message {
      padding: 4px 1.34em;
      color: #e84944;
    }

    .form-row .custom-dropdown.error-border {
      border-color: #e84944 !important;
    }
  }

  .custom-form.type-2 {
    .form-row.msg-box {
      margin-bottom: 0;

      textarea {
        border-radius: clamp(0.875rem, 0.738rem + 0.688vw, 1.563rem)
          clamp(0.875rem, 0.738rem + 0.688vw, 1.563rem) 0 0;
      }
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    @media (orientation: landscape) {
      padding: 2.69% 0 9.39%;
      padding-top: 8vw;

      .contact-us-main-header {
        margin-bottom: 1.4em;
        padding: 0 1em;
      }

      .contact-us-container-inner {
        .owl-carousel {
          @media screen and (min-width: 1193.98px) and (max-width: 1194.5px),
            screen and (min-width: 833.98px) and (max-width: 834.5px) {
            .item {
              min-height: 81px;
            }
          }
        }

        .content-box {
          padding: 4.03% 3.36%;
          margin-top: 3.27%;

          .carousel-controls {
            display: none;
          }

          .right-box {
            width: 68%;
          }
        }

        .custom-form {
          .form-row {
            .form-group.service-dropdown {
              .custom-options {
                li::after {
                  width: 14px;
                  height: 14px;
                  margin-right: 12px;
                }
              }
            }
          }
        }
      }
    }

    @media (orientation: portrait) {
      padding-top: 8vw;

      .contact-us-main-header {
        margin-bottom: 1.3em;
        padding: 0 1em;
      }

      .contact-us-container-inner {
        .carousel-controls {
          margin: 4.25% 0;
        }

        .owl-carousel {
          padding: 0;

          .owl-stage-outer {
            padding-bottom: 0;
          }
        }

        .content-box {
          padding: 4% 4.8% 5.76% 4.8%;
          margin-top: 0;
          flex-direction: column-reverse;

          .right-box {
            .required-text {
              margin-left: 2.7%;
            }
          }

          .left-box {
            img {
              width: 49%;
              margin: 0 25%;
            }
          }
        }
      }
    }
  }

  @media (max-width: 767.5px) {
    padding: 6.16% 0 6.16%;
    padding-top: 15vw;

    .contact-us-main-header {
      margin-bottom: 1.34em;
      padding: 0 1em;
    }

    .contact-us-container-inner {
      .owl-carousel {
        .owl-stage-outer {
          padding-bottom: 0;
        }

        .item {
          min-height: 3rem;
        }
      }

      .carousel-controls {
        margin: 5% 0;
      }

      .content-box {
        padding: 6.7% 6.16% 10.26%;
        flex-direction: column-reverse;
        margin-top: 0;
        .right-box {
          .required-text {
            margin-left: 5.87%;
          }
        }
      }

      .left-box,
      .right-box {
        width: 100%;
        margin-bottom: 15px;
      }
    }

    .custom-form {
      .form-row.full-width button {
        margin-top: 2.5%;
      }

      .form-row .form-group.service-dropdown .custom-dropdown.error-border {
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 24px 24px;
        padding-right: 40px;
        transition: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17316C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="%23E84944"/><path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="%23E84944"/><path d="M12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14C12.2652 14 12.5196 13.8946 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7Z" fill="%23E84944"/></svg>');
      }

      .form-row {
        flex-direction: column;

        .form-group {
          width: 100%;
          margin-bottom: 16px;
        }

        .form-group.service-dropdown {
          .custom-dropdown {
            .contactUsPopup {
              padding: 0;
              max-height: 55.5vh;
              width: 90vw;
              background: var(--adro-blue);
              border-radius: 20px;
              display: flex;
              flex-direction: column;

              .custom-options {
                max-height: 39vh;
              }

              .popup-header {
                flex-shrink: 0;
                display: flex;
                padding: 16px;
                box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);

                span {
                  flex: 1;
                  text-align: center;
                  align-self: center;
                  font-size: 18px;
                }
              }

              .custom-options {
                background-color: unset;
                border: none;
                border-radius: 0;
                margin: 24px;
                padding: 0;
                padding-right: 32px;
                width: auto;
                max-height: 39vh;

                li {
                  padding: 0;
                  margin-bottom: 20px;
                  gap: 8px;
                  border-bottom: none;
                  font-size: 20px !important;
                  flex-direction: row;
                  justify-content: space-between;
                  margin-right: 0;
                }

                li.subservice {
                  padding-left: 0;
                }

                li::after {
                  margin-right: 0;
                  width: 24px;
                  height: 24px;
                  border-radius: 5px;
                }
              }
            }
          }

          .custom-dropdown:after {
            display: none;
          }
        }
      }

      .form-row.msg-box {
        textarea {
          padding: 4% 4.75%;
        }
      }

      .form-row.privacy-row {
        .privacy-statement {
          margin-top: 0.75em;
        }
      }
    }
  }
}

/* DESCRIPTION:Get Social with Us */
.contact-us-get-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 11.25%;
  margin: auto;

  .contact-left {
    width: 51.08%;
    margin: 0 !important;

    .main-header {
      margin-bottom: 0.84em;
    }

    .description {
      margin-bottom: 0.75em;
      width: 78.81%;
    }

    .sub-line {
      margin-bottom: 1.67em;
      width: 82.89%;
    }

    .contact-btn {
      margin-bottom: 2em;
    }

    .social-icons {
      width: 35.53%;
      display: flex;
      justify-content: space-between;

      .icon-a {
        margin: 0 5px;
      }

      .icon-a svg {
        width: 100%;
        height: 48px;
        fill: white;
      }

      .icon-a:hover svg {
        fill: var(--adro-electric-blue);
      }
    }
  }

  .contact-right {
    width: 40.06%;
    margin: 0 !important;
    text-align: center;

    img {
      width: 100%;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    padding: 0 3.36%;

    .contact-left {
      .social-icons {
        gap: 1em;
        width: fit-content;

        .icon-a svg {
          width: 100%;
          height: 32px;
        }
      }
    }
  }

  @media (max-width: 768px),
    screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    flex-direction: column;

    .contact-left {
      width: auto;

      .description {
        width: auto;
      }

      .sub-line {
        width: auto;
      }

      .social-icons {
        .icon-a svg {
          width: 100%;
          height: 32px;
        }
      }
    }
  }

  @media screen and (max-width: 767.5px) {
    padding: 0 6.16%;

    .contact-left {
      .main-header {
        margin-bottom: 1em;
      }

      .description {
        margin-bottom: 0.89em;
      }

      .sub-line {
        margin-bottom: 1.5em;
      }

      .contact-btn {
        margin-bottom: 1.34em;
      }

      .social-icons {
        width: 51.47%;
        margin-bottom: 2.25em;
      }
    }

    .contact-right {
      width: 100%;
      padding: 10.83%;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    padding: 0 4.8%;

    .contact-left {
      .main-header {
        margin-bottom: 0.6em;
      }

      .description {
        margin-bottom: 0.67em;
      }

      .sub-line {
        margin-bottom: 1.34em;
      }

      .contact-btn {
        margin-bottom: 1.34em;
      }

      .social-icons {
        width: 26.93%;
        margin-bottom: 3.125em;
      }
    }

    .contact-right {
      width: 61.02%;
      padding: 4.91%;
    }
  }
}

/* DESCRIPTION:Worldwide offices Section */
.worldwide-offices-section > * {
  position: relative;
  z-index: 1;
}

.worldwide-offices-section {
  padding: 0 0 0% 0;
  position: relative;

  .section-header-container {
    text-align: left;
    margin-bottom: 1.68%;

    h2 {
      margin-bottom: 0;
    }
  }

  .worldwide-offices-section-inner {
    .owl-carousel {
      .owl-stage-outer {
        padding-bottom: 4%;
      }

      .item {
        align-content: center;
        cursor: pointer;
        min-height: clamp(4.5rem, 1.495rem + 3.756vw, 6rem);
        position: relative;
        color: rgba(255, 255, 255, 0.5);
        transition: transform 0.3s ease, color 0.3s ease;
      }

      .item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 1;
      }

      .item::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: white;
        z-index: 1;
        transition: width 0.3s ease;
      }

      .item:hover:before,
      .item.current:before {
        width: 100%;
      }

      .item:hover,
      .item.current {
        color: #fff;
      }
    }

    .content-box {
      padding: 0 3.34%;
      opacity: 0;
      transform: translateY(20%);
      transition: opacity 0.3s ease, transform 0.3s ease;

      .service-btn-solid {
        min-width: 176px;
        height: 48px;
        padding: 0;
        background-color: var(--adro-electric-blue);
      }

      .service-btn-solid:hover {
        background-color: var(--ia-btn-hover-color);
      }

      .portrait-only-box {
        display: none;
      }

      .office-list {
        display: flex;
        flex-wrap: wrap;
        gap: 1.79%;
      }

      .office-card {
        position: relative;
        width: 32.14%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-bottom: 5.3%;
      }

      .office-image {
        position: relative;
        width: 100%;
        aspect-ratio: 72 / 43;
        border-radius: 20px;
      }

      .office-city {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Center the text horizontally and vertically */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        /* Optional for better visibility */
        text-align: center;
        z-index: 1;
      }

      .office-details {
        width: 81.3%;
        margin-top: 2.8%;
      }

      .office-country {
        color: var(--adro-yellow);
      }

      .office-address {
        margin: 3.5% 0;
      }

      .office-phone {
      }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
      margin-bottom: 5%;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
      screen and (max-width: 767.5px) {
    }

    .fade-up {
      opacity: 1;
      transform: translateY(0);
    }

    .content-box {
      .office-details {
        width: 100%;
      }
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    padding: 0% 0 4.8%;

    .section-header-container {
      margin-bottom: 5.3%;
    }

    .worldwide-offices-section-inner {
      .owl-carousel {
        .owl-stage-outer {
          padding-bottom: 6.85%;
        }
      }

      .content-box {
        padding: 0 4.8%;

        .office-list {
          gap: 5.03%;
        }

        .office-card {
          width: 29.98%;
          margin-bottom: 4.8%;
        }

        .office-details {
          margin-top: 7.1%;
        }

        .office-address {
          margin: 7.2% 0;
        }

        .office-image {
          aspect-ratio: 113/72;
        }
      }
    }
  }

  @media (max-width: 767.5px) {
    padding: 0 0 12.4% 0;

    .section-header-container {
      padding: 0 6.2%;
      margin-bottom: 4.15%;
    }

    .worldwide-offices-section-inner {
      .owl-carousel {
        .owl-stage-outer {
          padding-bottom: 8.5%;
        }

        .item {
          min-height: 3.5rem;
        }
      }

      .content-box {
        flex-direction: column;
        margin-top: 0;
        padding: 0 6.2%;

        .office-list {
          width: 100%;
          gap: 3.4%;
        }

        .office-card {
          width: 48.3%;
          margin-bottom: 7.1%;
        }

        .office-image {
          aspect-ratio: 165 / 104;
        }

        .office-details {
          margin-top: 4.5%;
        }

        .office-address {
          margin: 4.9% 0;
        }
      }
    }
  }
}

/* DESCRIPTION:All section spacers */

.space-contact-us-below-banner {
  height: 7.5vw;
}

.space-contact-us-below-social-media {
  height: 10.3vw;
}

@media screen and (max-width: 767.5px) {
  .space-contact-us-below-banner {
    height: 28.72vw;
  }

  .space-contact-us-below-social-media {
    height: 15vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  @media (orientation: portrait) {
    .space-contact-us-below-banner {
      height: 13.43vw;
    }

    .space-contact-us-below-social-media {
      height: 10.56vw;
    }
  }
}

/* DESCRIPTION:Custom HTML */
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  /* hidden initially */
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.custom-modal-content {
  position: relative;
  background-color: #144074;
  width: 71.1%;
  /* 1366 / 1920 */
  min-height: 57.7%;
  /* 624 / 1080 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  overflow: hidden;
  padding: 2.1% 3.36%;
}

.custom-modal-content iframe {
  width: 100%;
  height: 400px;
  border: none;
  overflow: hidden;
  display: block;
}

.close-modal-btn {
  position: absolute;
  top: 40px;
  right: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10001;
}

.close-modal-btn svg {
  width: 32px;
  height: 32px;
}

.contact-subscribe-heading {
  color: #0cf !important;
  margin: 0 0 0.84em 0 !important;
  width: 95%;
}

.consent-txt {
}

.consent-txt a {
  text-decoration: none !important;
  color: #0cf;
}

@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  .custom-modal-content iframe {
    height: 340px !important;
  }

  .close-modal-btn {
    top: 15px !important;
    right: 10px !important;
  }
}

@media (min-width: 768px) and (max-width: 1280px) and (orientation: portrait) {
  .custom-modal-content iframe {
    height: 310px !important;
  }

  .close-modal-btn {
    top: 15px !important;
    right: 10px !important;
  }
}

@media screen and (max-width: 767.5px) {
  .custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* hidden initially */
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }

  .custom-modal-content {
    position: relative;
    background-color: #144074;
    width: 90%;
    /* 1366 / 1920 */
    min-height: 57.7%;
    /* 624 / 1080 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    overflow: hidden;
    padding: 3.36%;
  }

  .custom-modal-content iframe {
    width: 100%;
    height: 320px;
    border: none;
    overflow: hidden;
    display: block;
  }

  .close-modal-btn {
    position: absolute;
    top: 15px !important;
    right: 10px !important;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10001;
  }

  .close-modal-btn svg {
    width: 32px;
    height: 32px;
  }

  .contact-subscribe-heading {
    color: #0cf !important;
    margin: 0 0 0.84em 0 !important;
    width: 90% !important;
  }

  .consent-txt {
  }

  .consent-txt a {
    text-decoration: none;
    color: #0cf;
  }
}

/* Get to know us better */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: none;
  /* Prevent any transitions initially */
}

/* Animation keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation class applied when in viewport */
.animate-fade-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Different delay classes for staggered effect */
.animate-on-scroll.delay-1 {
  animation-delay: 0.2s;
}

.animate-on-scroll.delay-2 {
  animation-delay: 0.4s;
}

.animate-on-scroll.delay-3 {
  animation-delay: 0.6s;
}