:root {
      color-scheme1: dark light;
    }


    #inquiryPageContainer {
      display: grid;
      place-items: center;
      inline-size: 100%;
      min-block-size: 100dvh;
      background-color: rgb(0 0 0 / 40%);
      padding-block: 2rem;
      box-sizing: border-box;

      & .background-content {
        text-align: center;
        padding-inline: clamp(1rem, 4vw, 2.5rem);
        padding-block: clamp(1rem, 4vw, 2.5rem);
        inline-size: min(90%, 520px);
        box-sizing: border-box;

        & h1 {
          color: #ffffff;
          margin-block-end: 0.625rem;
          font-size: clamp(1.75rem, 5vw, 2.5rem);
          text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
        }

        & p {
          color: #e2e8f0;
          margin-block-end: 1.5rem;
          font-size: clamp(0.9rem, 2vw, 1.1rem);
          text-shadow: 0 1px 4px rgb(0 0 0 / 50%);
        }

        & .button-group {
          display: flex;
          gap: 0.875rem;
          justify-content: center;
          flex-wrap: wrap;
          margin-block-end: 1.5rem;

          & button {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgb(255 255 255 / 15%);
            color: #ffffff;
            border: 1px solid rgb(255 255 255 / 30%);
            padding-inline: clamp(1rem, 3vw, 1.5rem);
            padding-block: 0.75rem;
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            font-weight: 600;
            border-radius: 0.75rem;
            cursor: pointer;
            box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
            transition: background 0.3s ease, transform 0.3s ease;

            &:hover {
              background: rgb(255 255 255 / 30%);
              transform: translateY(-2px);
            }
          }
        }
      }
    }

    /* EXISTING ON-PAGE CONTACT FORM STYLING */
    .contactus-form {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: rgb(255 255 255 / 15%);
      border: 1px solid rgb(255 255 255 / 30%);
      box-shadow: 0 20px 50px rgb(0 0 0 / 40%);
      border-radius: 1.25rem;
      padding: clamp(1.25rem, 2vw, 1rem);
      text-align: start;
      color: #ffffff;

      & form {
        display: grid;
        gap: 0.875rem;

        & input,
        & textarea {
          inline-size: 100%;
          padding-inline: 0.875rem;
          padding-block: 0.625rem;
          box-sizing: border-box;
          border: 1px solid rgb(255 255 255 / 30%);
          border-radius: 0.625rem;
          font-size: 0.875rem;
          font-family: inherit;
          outline: none;
          background-color: rgb(255 255 255 / 20%);
          color: #ffffff;

          &::placeholder {
            color: rgb(255 255 255 / 70%);
          }
        }

        & .btn {
          inline-size: 100%;
          background1: rgb(255 255 255 / 25%);
          background:var(--color-cta-bg);;
          color: #ffffff;
          border: 1px solid rgb(255 255 255 / 40%);
          padding-block: 0.75rem;
          font-size: 0.9375rem;
          font-weight: 700;
          border-radius: 0.625rem;
          cursor: pointer;
          transition: background 0.2s ease;

          &:hover {
            background: rgb(255 255 255 / 40%);
          }
        }
      }
    }

    /* POPUP OVERLAY STYLING (Strictly Scoped) */
    .modal-overlay {
      position: fixed;
      inset: 0;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgb(0 0 0 / 20%);
      display: grid;
      place-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 1000;

      &.active {
        opacity: 1;
        visibility: visible;

        & #inquiryPopupBox {
          transform: scale(1);
          opacity: 1;
          scrollbar-width: thin;
        }
      }
    }

    #inquiryPopupBox {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: rgb(255 255 255 / 15%);
      border: 1px solid rgb(255 255 255 / 30%);
      box-shadow: 0 20px 50px rgb(0 0 0 / 40%);
      inline-size: min(90%, 480px);
      border-radius: 1.25rem;
      padding: clamp(1.25rem, 4vw, 2rem);
      box-sizing: border-box;
      transform: scale(0.95);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
      opacity: 0;
      max-block-size: 90dvh;
      overflow-y: auto;
      color: #ffffff;
      font-family: inherit;

      & .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-block-end: 1.25rem;

        & h2 {
          margin: 0;
          color: #ffffff;
          font-size: clamp(1.125rem, 3vw, 1.35rem);
          font-weight: 700;
          text-shadow: 0 1px 3px rgb(0 0 0 / 40%);
        }

        & .close-x {
          background: rgb(255 255 255 / 15%);
          border: 1px solid rgb(255 255 255 / 30%);
          inline-size: 2rem;
          block-size: 2rem;
          border-radius: 50%;
          font-size: 1.25rem;
          color: #ffffff;
          cursor: pointer;
          display: grid;
          place-items: center;
          transition: background 0.2s ease;

          &:hover {
            background: rgb(255 255 255 / 35%);
          }
        }
      }
    }

    /* SHARED FORM ERRORS & STATUS MESSAGES */
    .form-group {
      margin-block-end: 0.875rem;

      & label {
        display: block;
        margin-block-end: 0.375rem;
        font-weight: 600;
        font-size: 0.8125rem;
        color: #ffffff;
        text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
      }

      & input, 
      & select,
      & textarea {
        inline-size: 100%;
        padding-inline: 0.875rem;
        padding-block: 0.625rem;
        box-sizing: border-box;
        border: 1px solid rgb(255 255 255 / 30%);
        border-radius: 0.625rem;
        font-size: 0.875rem;
        font-family: inherit;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        background-color: rgb(255 255 255 / 20%);
        color: #ffffff;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        & option {
          background-color: #1e293b;
          color: #ffffff;
        }

        &::placeholder {
          color: rgb(255 255 255 / 70%);
        }

        &:focus-visible {
          border-color: #ffffff;
          box-shadow: 0 0 0 3px rgb(255 255 255 / 25%);
          background-color: rgb(255 255 255 / 30%);
        }
      }

      & textarea {
        resize: vertical;
        min-block-size: 5rem;
      }

      & .error-message {
        color: #ffffff;
        background1: rgb(220 38 38 / 60%);
        padding-inline: 0.625rem;
        padding-block: 0.25rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        margin-block-start: 0.25rem;
        display: none;
        border1: 1px solid rgb(255 255 255 / 20%);
      }

      &.error {
        & input,
        & select,
        & textarea {
          border-color1: #f87171;
          background-color1: rgb(239 68 68 / 20%);
        }

        & .error-message {
          display: block;
        }
      }

      & .submenu-container {
        display: none;
        background: rgb(255 255 255 / 15%);
        border: 1px solid rgb(255 255 255 / 30%);
        border-radius: 0.625rem;
        padding: 0.75rem;
        margin-block-start: 0.5rem;

        &.visible {
          display: block;
        }

        & .submenu-label {
          font-size: 0.8125rem;
          font-weight: 600;
          color: #ffffff;
          margin-block-end: 0.5rem;
          display: block;
        }

        & .checkbox-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
          gap: 0.5rem;

          & .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 0.8125rem;
            color: #ffffff;
            cursor: pointer;

            & input[type="checkbox"] {
              inline-size: 1rem;
              block-size: 1rem;
              cursor: pointer;
              accent-color: #4f46e5;
            }
          }
        }
      }
    }

    .submit-btn {
      inline-size: 100%;
      background: rgb(255 255 255 / 25%);
      color: #ffffff;
      border: 1px solid rgb(255 255 255 / 40%);
      padding-block: 0.75rem;
      font-size: 0.9375rem;
      font-weight: 700;
      border-radius: 0.625rem;
      cursor: pointer;
      margin-block-start: 0.9375rem;
      box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
      transition: background 0.2s ease, transform 0.2s ease;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);

      &:hover {
        background: rgb(255 255 255 / 40%);
        transform: translateY(-1px);
      }
    }

    .form-status-msg {
      margin-block-start: 0.875rem;
      padding-inline: 0.875rem;
      padding-block: 0.625rem;
      border-radius: 0.5rem;
      font-size: 0.8125rem;
      font-weight: 600;
      text-align: center;
      display: none;
      transition: all 0.3s ease;

      &.visible {
        display: block;
      }

      &.success {
        background: rgb(34 197 94 / 30%);
        border: 1px solid rgb(34 197 94 / 50%);
        color: #ffffff;
      }

      &.error {
        background: rgb(239 68 68 / 30%);
        border: 1px solid rgb(239 68 68 / 50%);
        color: #ffffff;
      }

      &.info {
        background: rgb(59 130 246 / 30%);
        border: 1px solid rgb(59 130 246 / 50%);
        color: #ffffff;
      }
    }

    .modal-form {
      display: none;

      &.active {
        display: block;
      }
    }