Jump to content

Does anyone know of any plugins that would make an accordion pop up on hover over text (wireframe example included)

Recommended Posts

Wondering if there's any Squarespace plugins out there that can achieve this effect or if there's anyone who creates custom code for something like this.

Looking to recreate the exact effect in the video attached. I want to be able to change the text on the left side and have it be interactive after hovering over the words on the right side. 

website is https://lawmaks.squarespace.com/
Password: Lawmaks

Link to comment
  • Replies 4
  • Views 537
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 6/24/2023 at 1:43 AM, BrookeMadison said:

@tuanphan Yes! like tabs 

The text on the right side when clicked would generate content on the left side 

Above is your site or example site?

The site uses Code Block

<style>
  :not(.squarespace-damask) [data-section-id="64928c710834743b4543f315"] {
  display: none !important;
}
.lawmaks-services-section,
.lawmaks-services-section *,
.lawmaks-services-section *::before,
.lawmaks-services-section *::after {
  box-sizing: border-box;
  margin: 0;
}

.lawmaks-services-section {
  --text-color: #ece8dc;
  font-family: gotham;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  z-index: 1;
  color: var(--text-color);
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: color;
}
/*#region - start of - input autofill fix */
.lawmaks-services-section input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}
.lawmaks-services-section input:-webkit-autofill,
.lawmaks-services-section input:-webkit-autofill:hover,
.lawmaks-services-section input:-webkit-autofill:focus,
.lawmaks-services-section input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
/*#endregion - end of - input autofill fix */

.lawmaks-services-section button {
  font-family: inherit;
  color: currentColor;
}
.lawmaks-services-section .col-large {
  color: var(--text-color);
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: color;
}
.lawmaks-services-section.active .col-large {
  --text-color: #0e0e0e;
}

.lawmaks-services-section .services-bg {
  overflow: hidden;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition-duration: 400ms;
  transition-timing-function: ease;
  transition-property: background-color;
  background-color: gray;
}
.lawmaks-services-section.active .services-bg {
  background-color: #ece8dc;
}

.lawmaks-services-section .services-bg picture {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.lawmaks-services-section .services-bg .bg-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left;
  object-position: left;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: visibility, opacity;
  visibility: visible;
  opacity: 1;
}
.lawmaks-services-section.active .services-bg .bg-image {
  visibility: hidden;
  opacity: 0;
}

.lawmaks-services-section .container {
  --gap: 1rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.lawmaks-services-section .row {
  display: flex;
  flex-direction: column-reverse;
  margin-left: calc(var(--gap) * -1);
  margin-right: calc(var(--gap) * -1);
  gap: var(--gap);
}
.lawmaks-services-section .col {
  padding: var(--gap);
  position: relative;
}

.lawmaks-services-section .col-small::after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  background-color: #6c6d68;
  top: 0;
  left: 0;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: background-color;
}
.lawmaks-services-section.active .col-small::after {
  background-color: #c08365;
}
.lawmaks-services-section .content-wrapper {
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.lawmaks-services-section .horizontal-line {
  --height: 1px;
  --line-color: var(--text-color);
  width: 100%;
  height: var(--height, 1px);
  background-color: var(--line-color, red);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.lawmaks-services-section .horizontal-line-fluid {
  position: relative;
  isolation: isolate;
  z-index: 1;
}
.lawmaks-services-section .horizontal-line-fluid::before,
.lawmaks-services-section .horizontal-line-fluid::after {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--height);
  background-color: var(--line-color);
  top: 0;
}
.lawmaks-services-section .horizontal-line-fluid::before {
  left: -100%;
}
.lawmaks-services-section .horizontal-line-fluid::after {
  right: -100%;
}
.lawmaks-services-section :is(.dynamic-content-wrapper, .content-info) {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2vw, 2.5rem);
}

.lawmaks-services-section .accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.lawmaks-services-section .single-accordion {
  --accordion-bg-color: #fff;
  --transition-duration: 300ms;
  position: relative;
  isolation: isolate;
  z-index: 1;
  background-color: transparent;
  transition-duration: var(--transition-duration);
  transition-timing-function: ease;
  transition-property: background-color;
}
.lawmaks-services-section .single-accordion.active {
  padding-block: 1rem;
  background-color: var(--accordion-bg-color);
}
.lawmaks-services-section .single-accordion::before,
.lawmaks-services-section .single-accordion::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: transparent;
  transition-duration: var(--transition-duration);
  transition-timing-function: ease;
  transition-property: background-color;
}
.lawmaks-services-section .single-accordion.active::before,
.lawmaks-services-section .single-accordion.active::after {
  background-color: var(--accordion-bg-color, red);
}
.lawmaks-services-section .single-accordion::before {
  left: -100%;
}
.lawmaks-services-section .single-accordion::after {
  right: -100%;
}

.lawmaks-services-section .single-accordion .accordion-inner-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 300ms ease;
  transition: grid-template-rows 300ms ease, -ms-grid-rows 300ms ease;
}
.lawmaks-services-section .single-accordion.active .accordion-inner-wrapper {
  grid-template-rows: 1fr;
}
.lawmaks-services-section
  .single-accordion
  .accordion-inner-wrapper
  .accordion-content {
  min-height: 0;
}

/*#region - start of - tab-panel-container */
.lawmaks-services-section .tab-panel-container .single-panel {
  height: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-duration: 150ms;
  transition-timing-function: ease;
  transition-property: visibility, opacity;
}
.lawmaks-services-section
  .tab-panel-container
  .single-panel[data-panel-id="default"]
  .large-title {
  text-align: center;
}
.lawmaks-services-section .tab-trigger-container {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.lawmaks-services-section .tab-trigger-container .triggerer-section {
  opacity: 1;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: opacity;
}
.lawmaks-services-section.active .tab-trigger-container .triggerer-section {
  opacity: 0.5;
}
.lawmaks-services-section.active
  .tab-trigger-container
  .triggerer-section.active {
  opacity: 1;
}
.lawmaks-services-section .single-panel.active {
  height: 100%;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.lawmaks-services-section .large-title {
  color: var(--text-color);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-family: inherit;
}
.lawmaks-services-section .sub-title {
  color: var(--text-color);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-family: inherit;
}
.lawmaks-services-section .sub-title a{
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  transition-duration: .3s;
  transition-timing-function: ease;
  transition-property: color;
}
.lawmaks-services-section .sub-title a:hover{
  color: #c08365;
}
.lawmaks-services-section .single-accordion.active .sub-title {
  -webkit-padding-after: clamp(0.5rem, 2.5vw, 1rem);
  padding-block-end: clamp(0.5rem, 2.5vw, 1rem);
}
.lawmaks-services-section .tab-buttons-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  justify-content: start;
  align-items: start;
}
.lawmaks-services-section .tab-triggerer-btn {
  grid-column: span 6;
  border: none;
  outline: none;
  padding-inline: 0;
  padding-block: 0.25rem;
  background-color: transparent;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 1;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: color, opacity, background-color;
}
.lawmaks-services-section.active .tab-triggerer-btn:not(.active):hover,
.lawmaks-services-section .tab-triggerer-btn:hover {
  opacity: 1;
  color: #0e0e0e;
}
.lawmaks-services-section.active .tab-triggerer-btn:not(.active) {
  opacity: 0.5;
}
.lawmaks-services-section .single-accordion,
.lawmaks-services-section .accordion-content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
}
.lawmaks-services-section .single-accordion:not(.active) {
  gap: 0;
}
.lawmaks-services-section .questionnaire-btn {
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0.25rem 0.5rem;
  background-color: #6c6d68;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(0.75rem, 1vw, 1rem);
  border-radius: 0.5rem;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: color, background-color;
}
.lawmaks-services-section .questionnaire-btn:hover {
  color: #e3e3e3;
  background-color: #494946;
}

/*#endregion - end of - tab-panel-container */

/*#region - start of - modal */
html.modal-no-scrolling {
  overflow: hidden !important;
  scrollbar-gutter: stable;
}
.modal-bg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(2.5rem);
  backdrop-filter: blur(2.5rem);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  overflow: auto;
  transform: scale(0.95);
  opacity: 0;
  cursor: pointer;
  z-index: -10000;
  /* visibility: hidden; */
  pointer-events: none;
  content-visibility: auto;
  /* transition: all 0.3s ease; */
  transition-timing-function: ease;
  transition-duration: 0.3s;
  transition-property: transform, opacity, -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter;
  transition-property: transform, opacity, backdrop-filter, -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
  transition-property: transform, opacity, backdrop-filter,
    -webkit-backdrop-filter;
}

.modal-bg.modal-shown {
  transform: scale(1);
  opacity: 1;
  z-index: 10000;
  /* visibility: visible; */
  pointer-events: auto;
}

.modal-bg:not(.modal-shown) * {
  pointer-events: none;
}

.modal-container {
  position: relative;
  flex-grow: 1;
  max-width: 40rem;
  margin: auto;
}

.modal-content {
  position: relative;
  background-color: var(--white, #fff);
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
  cursor: auto;
  padding: 1rem;
  border-radius: 1.5rem;
  outline: 1px solid #b1b1b1;
}
.modal-header {
  display: flex;
  justify-content: flex-end;
  position: relative;
  isolation: isolate;
  z-index: 999;
}
.modal-closer {
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  padding: 0;
  color: #000;
  transition: all 0.3s ease-in-out;
}

.modal-closer svg {
  width: 1.5rem;
  height: 1.5rem;
}

.modal-closer path {
  fill: #000000;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-property: fill;
}
.modal-closer:hover path {
  fill: #ed1313;
}

/*#endregion - end of - modal */

/*#region - start of - stepped-form */
.lawmaks-services-section .stepped-form-wrapper {
  --gap: 1rem;
  --title-gap: clamp(0.25rem, 1vw, 0.75rem);
  --item-font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: #000;
}
.lawmaks-services-section :is(.form-submitted, .hidden) {
  display: none !important;
}
.lawmaks-services-section .stepped-form-wrapper :where(fieldset, legend) {
  border-style: none;
  padding: 0;
}
.lawmaks-services-section .stepped-form-container {
  min-height: clamp(8rem, 20vw, 12rem);
}
.lawmaks-services-section .stepped-controller-wrapper {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 1rem;
}
.lawmaks-services-section .meta-info {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}
.lawmaks-services-section .submission-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  border-radius: 1.5rem;
}
.lawmaks-services-section .stepped-controller-wrapper button:not([hidden]) {
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0.25rem 2.75rem;
  background-color: #6c6d68;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(0.5rem, 1vw, 0.75rem);
  line-height: 1.25;
  border-radius: 0.5rem;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: color, background-color;
}
.lawmaks-services-section .stepped-controller-wrapper button:not([hidden]):hover{
  background-color: #c08365;
}
.lawmaks-services-section .form-item {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  font-size: var(--item-font-size);
}
.lawmaks-services-section
  .form-item
  :where([type="text"], [type="email"], select, textarea) {
  width: 100%;
  padding: 0.25rem 0.5rem;
  margin: 0;
  border-style: none;
  border-radius: 0.25rem;
  font-size: var(--item-font-size);
  box-shadow: 0 0 4px #b1b1b1 !important;
  outline: 1px solid #b1b1b1;
}
.lawmaks-services-section textarea{
  resize: vertical;
}
.lawmaks-services-section .form-item .title {
  display: flex;
  flex-direction: column;
  gap: var(--title-gap);
}
.lawmaks-services-section .form-item .description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 1;
  transition-duration: .3s;
  transition-timing-function: ease;
  transition-property:  opacity;
}
.lawmaks-services-section .form-item:is(.phone, .select) > legend {
  gap: var(--gap);
  -webkit-padding-after: var(--gap);
  padding-block-end: var(--gap);
}
/* .lawmaks-services-section .form-item:is(.text,.email,.phone,.number,.select) {
  max-width: 30rem;
} */
.lawmaks-services-section .form-item.textarea textarea {
  min-height: clamp(3rem, 3vw, 4rem);
}

.lawmaks-services-section .form-item:is(.checkbox, .radio) .title {
  -webkit-padding-start: calc(1rem + var(--title-gap));
  padding-inline-start: calc(1rem + var(--title-gap));
  -webkit-padding-after: 1.75rem;
  padding-block-end: clamp(1.25rem, 2vw, 1.75rem);
}
.lawmaks-services-section .form-item:is(.radio, .checkbox) .option label {
  display: flex;
  align-items: center;
  gap: var(--title-gap);
}
.lawmaks-services-section .form-item:is(.radio, .checkbox) .option input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  width: 1rem;
  height: 1rem;
  opacity: 1;
  border: 1px solid #000;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: background-color, background-image,opacity;
}
.lawmaks-services-section .form-item:is(.radio, .checkbox) .option input ~ span {
display: none !important;
}
.lawmaks-services-section .form-item.radio .option [type="radio"] {
  border-radius: 50%;
}

.lawmaks-services-section
  .form-item:is(.radio, .checkbox)
  .option
  :is([type="radio"], [type="checkbox"]):checked {
  background-color: #000;
}
.lawmaks-services-section
  .form-item.checkbox
  .option
  [type="checkbox"]:checked {
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E"); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
}
/*#endregion - end of - stepped-form */

/*#region - start of - extra large (1200px) devices */
@media screen and (min-width: 75rem) {
  .lawmaks-services-section .col-large-bg {
    width: 65vw;
  }
  .lawmaks-services-section .row {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .lawmaks-services-section .col {
    --width: 50%;
    padding-block: 4rem;
    width: calc(var(--width) - (var(--gap) / 2));
  }
  .lawmaks-services-section .col-large {
    --width: 60%;
  }
  .lawmaks-services-section .col-small {
    --width: 40%;
    isolation: isolate;
    z-index: 1;
  }
  .lawmaks-services-section .content-info {
    max-width: 31rem;
  }
  .lawmaks-services-section .tab-buttons-wrapper {
    max-width: 25rem;
  }
  .lawmaks-services-section .tab-buttons-wrapper.cols-3 {
    grid-template-columns: repeat(4, 1fr);
  }
  .lawmaks-services-section .tab-buttons-wrapper.cols-3 .tab-triggerer-btn {
    grid-column: auto;
  }
  .lawmaks-services-section
    .tab-panel-container
    .single-panel[data-panel-id="default"]
    .large-title {
    -webkit-padding-end: clamp(9rem, 9vw, 12rem);
    padding-inline-end: clamp(9rem, 9vw, 12rem);
    text-align: end;
  }
}
/*#endregion - end of - extra large (1200px) devices */

</style>

   <section class="lawmaks-services-section active" id="yui_3_17_2_1_1687676473952_283">
      <div class="container" id="yui_3_17_2_1_1687676473952_282">
        <div class="row" id="yui_3_17_2_1_1687676473952_281">
          <!-- tab panel col  -->
          <div class="col col-large">
            <div class="content-wrapper">
              <div class="tab-panel-container">
                <!--#region - start of - default panel -->
                <div data-panel-id="default" class="single-panel">
                  <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.144186s; animation-duration: 0.8s;">Services</h2>
                  <div class="horizontal-line horizontal-line-fluid"></div>
                  <div class="dynamic-content-wrapper"></div>
                  </div>
                  <!--#endregion - end of - default panel -->

                <!--#region - start of - investor visa panel -->
                <!-- panel 1 -->
                <div data-panel-id="eb-5" class="single-panel">
                  <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.148837s; animation-duration: 0.8s;">EB-5 visa</h2>
                  <div class="horizontal-line horizontal-line-fluid"></div>
                  <div class="dynamic-content-wrapper">
                    <div class="content-info">
                      <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.153488s; animation-duration: 0.8s;">Investor Visa 2023</h3>
                      <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.15814s; animation-duration: 0.8s;">
                        The United States welcomes foreign business owners and
                        investors who are willing to purchase, relocate or
                        establish a business which creates jobs for American
                        workers and contributes to the American economy.
                      </p>
                    </div>
                    <div class="accordion-wrapper">
                      <div class="single-accordion active">
                        <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.162791s; animation-duration: 0.8s;">Do I qualify for EB-5 visa?</h4>
                        <div class="accordion-inner-wrapper">
                          <div class="accordion-content">
                            <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.167442s; animation-duration: 0.8s;">
                              Submit our 3 minute and straight forward EB-5
                              questionnaire &amp; we will evaluate your potential
                              EB-5 case.
                            </p>
                            <div class="">
                              <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-64928c78af7f653d804d3756" class="questionnaire-btn">
                                start questionnaire
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.172093s; animation-duration: 0.8s;">
                        <a href="">What is EB-5 Visa?</a>
                      </h4>
                      <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.176744s; animation-duration: 0.8s;"><a href="">Why Lawmaks?</a></h4>
                      <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.181395s; animation-duration: 0.8s;">
                        <a href="">EB-5 program advantages</a>
                      </h4>
                      <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.186047s; animation-duration: 0.8s;"><a href="">Is EB-5 for me?</a></h4>
                      <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.190698s; animation-duration: 0.8s;">
                        <a href="">EB-5 vs E-2 &amp; L-1 Visa</a>
                      </h4>
                      <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.195349s; animation-duration: 0.8s;">
                        <a href="">EB-5 process timeline</a>
                      </h4>
                      <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.2s; animation-duration: 0.8s;">
                        <a href="">Our latest EB-5 approvals</a>
                      </h4>
                      <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.204651s; animation-duration: 0.8s;"><a href="">Other EB-5 FAQ</a></h4>
                      
                      <!-- <div class="single-accordion">
                      <h4 class="sub-title">Do I qualify for EB-5 visa?</h4>
                      <div class="accordion-inner-wrapper">
                        <div class="accordion-content">
                          <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. corrupti ducimus culpa, quam voluptatem. Doloremque reprehenderit hic similique. Dolores eveniet cupiditate tempore?</p>
                          <div class="">
                            <button type="button" class="questionnaire-btn">start questionnaire</button>
                          </div>
                        </div>
                      </div>
                    </div> -->
                    </div>
                    </div>
                    </div>
                    <!-- panel 2 -->
                    <div data-panel-id="e-2" class="single-panel">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.209302s; animation-duration: 0.8s;">E-2 visa</h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.213953s; animation-duration: 0.8s;">Treaty Investors 2023</h3>
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.218605s; animation-duration: 0.8s;">
                            The E-2 Investor Visa is a nonimmigrant Visa is used
                            where a foreign entrepreneur wishes to operate his or
                            her own business in the United States. This can be
                            accomplished in two ways: 1) to start a brand-new
                            business, or 2) to purchase an existing business
                            (certain restrictions apply; check with your immigration
                            attorney prior to establishing or purchasing an existing
                            business). <br>
                            The amount of the investment is determined by the type
                            of business, and while there is no “minimum” set amount,
                            the investment must be “substantial” and not “marginal”
                            in nature; the immigration adjudicator must be convinced
                            that your investment is sufficient to operate the
                            proposed venture. One of the key elements to a
                            successful E-2 application, is to prove that the
                            investor’s function is to “develop and direct” the
                            business in the United States. If there are language
                            barriers, it will be necessary to hire a manager who
                            will conduct the day-to-day operations.
                            <br>
                            So, while the Investor is not required to conduct the
                            daily activities, they will be expected to make the
                            executive decisions needed to “develop and direct” the
                            U.S. venture. The investor must also be a citizen or
                            national of a country which has an existing Treaty of
                            Commerce with the United States. See the most recent
                            <a href="https://travel.state.gov/content/travel/en/us-visas/visa-information-resources/fees/treaty.html">list of “Treaty Countries” on DOS</a>.
                          </p>
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.223256s; animation-duration: 0.8s;">Do I qualify for E-2 visa?</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <p class="preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.227907s; animation-duration: 0.8s;">
                                  Submit our 3 minute and straightforward E-2
                                  questionnaire and we will evaluate your potential
                                  E-2 case.
                                </p>
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-64966c4765ccf55fb7609d98" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.232558s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">Do I qualify for E-2 Visa</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.237209s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">Why Lawmaks</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.24186s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">E-2 program advantages</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.246512s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">Is E-2 for me</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.251163s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">E-2 comparison table</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.255814s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">E-2 FAQ</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.260465s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/e-2-treaty-investors/">Our latest E-2 approvals</a>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <!-- panel 3 -->
                    <div data-panel-id="l-1" class="single-panel">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.265116s; animation-duration: 0.8s;">L-1 visa</h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.269767s; animation-duration: 0.8s;">
                            Intracompany Transferee Visa 2023
                          </h3>
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.274419s; animation-duration: 0.8s;">
                            L-1 Visa is a nonimmigrant Visa which allows foreign
                            company’s executives, managers, or employees with
                            specialized knowledge, to transfer to an office located
                            in the United States, which is considered a parent,
                            affiliate, subsidiary, or branch of the foreign company.
                            Additionally, L-1 Visa category requires for the person
                            being transferred to have worked for the foreign
                            company, for at least one continuous year within the
                            preceding three years.The U.S. entity may be an existing
                            company (i.e., a “parent” of the foreign company) with
                            prior relationship with the foreign company, or it may
                            be a “new office” in the United States. If forming a
                            “new office,” it is critical for your U.S. Attorney to
                            properly structure the U.S. entity, and to determine,
                            early-on, the relationship between the foreign company
                            and its U.S. entity; depending on the existing structure
                            of your foreign entity, and the percentages of ownership
                            at both the foreign and U.S. entities, your U.S.
                            Attorney will determine as to whether the U.S. Offices
                            are considered an affiliate, subsidiary, or branch of
                            the foreign Company.
                          </p>
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.27907s; animation-duration: 0.8s;">Do I qualify for L-1 visa?</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <p class="preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.283721s; animation-duration: 0.8s;">
                                  Submit our 3 minute and straight forward L-1
                                  questionnaire &amp; we will evaluate your potential
                                  L-1 case.
                                </p>
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649671742e54835a13deb658" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.288372s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/l-1-visa-intracompany-transferee/">What is L-1 Visa</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.293023s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/l-1-visa-intracompany-transferee/">Why Lawmaks</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.297674s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/l-1-visa-intracompany-transferee/">L-1 program advantages</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.302326s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/l-1-visa-intracompany-transferee/">Is L-1 for me</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.306977s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/l-1-visa-intracompany-transferee/">L-1 comparison table</a>
                          </h4>
                          <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.311628s; animation-duration: 0.8s;">
                            <a href="https://www.lawmaks.com/l-1-visa-intracompany-transferee/">Our latest L-1 approvals</a>
                          </h4>
                        </div>
                      </div>
                    </div>
                    <!--#endregion - end of - investor visa panel -->
                    <!--#region - start of - Employment/Work Visa -->
                    <!-- panel 1 -->
                    <div data-panel-id="eb-1" class="single-panel">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.316279s; animation-duration: 0.8s;">EB-1 visa</h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.32093s; animation-duration: 0.8s;">Immigration Visa</h3>
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.325581s; animation-duration: 0.8s;">
                            Must be able to demonstrate extraordinary ability in the sciences arts, education, business or athletics through sustained national or international acclaim.Must be able to meet at least 3 of the 10 listed criteria, or provide evidence of a one-time achievement such as an Academy Award, Nobel Prize, Pulitzer Prize, Olympic Medal, etc. and give evidence that you will be continuing to work in the area of expertise. No job offer or labor certification is required.
                          </p>
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.330233s; animation-duration: 0.8s;">Do I qualify for an EB-1 Work Visa?</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.334884s; animation-duration: 0.8s;">
                                  Submit our 3 minute and straight forward EB-1
                                  questionnaire &amp; we will evaluate your potential
                                  EB-1 case.
                                </p>
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649686705028930e9622abeb" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- panel 2 -->
                    <div data-panel-id="eb-2" class="single-panel">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.339535s; animation-duration: 0.8s;">EB-2 visa</h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.344186s; animation-duration: 0.8s;">Immigration Visa</h3>
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.348837s; animation-duration: 0.8s;">
                            The EB-2 visa, also known as the Employment-Based Second preference is an immigrant visa for permanent workers. Individuals are eligible for this visa if they are members of the professions holding an advanced degree or its equivalent, or individuals with exceptional ability.
                          </p>
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.353488s; animation-duration: 0.8s;">Do I qualify for an EB-2 Work Visa?</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.35814s; animation-duration: 0.8s;">
                                  Submit our 3 minute and straight forward EB-2
                                  questionnaire &amp; we will evaluate your potential
                                  EB-2 case.
                                </p>
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649686705028930e9622abeb" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- panel 3 -->
                    <div data-panel-id="eb-3" class="single-panel">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.362791s; animation-duration: 0.8s;">EB-3 visa</h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.367442s; animation-duration: 0.8s;">Immigration Visa</h3>
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.372093s; animation-duration: 0.8s;">EB-3 is also known as the Employment-Based Third Preference and this immigrant visa is for individuals who want permanent residence in the United States. If you are a professional, skilled or non-skilled (Other worker), then you are eligible for this visa category. It should be noted that these categories require employer sponsorship and certification by the Department of Labor before the visa petition can be filed.
                          </p>
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.376744s; animation-duration: 0.8s;">Do I qualify for an EB-3 Work Visa?</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.381395s; animation-duration: 0.8s;">
                                  Submit our 3 minute and straight forward EB-3
                                  questionnaire &amp; we will evaluate your potential
                                  EB-3 case.
                                </p>
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649686705028930e9622abeb" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--#endregion - end of - Employment/Work Visa -->
                    
                    <!--#region - start of - USA Family Visa -->
                    
                    <!-- panel 1 -->
                    <div data-panel-id="family-immigrant" class="single-panel">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.386047s; animation-duration: 0.8s;">Family Immigrants
                      </h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.390698s; animation-duration: 0.8s;">Family Based USA Green Cards 2023</h3>
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.395349s; animation-duration: 0.8s;"></p>
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.4s; animation-duration: 0.8s;">Family Visa Questionnaire</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <!-- <p class="">
                                                                                                                                                                                                                                                                      Submit our 3 minute and straight forward EB-1
                                                                                                                                                                                                                                                                      questionnaire & we will evaluate your potential
                                                                                                                                                                                                                                                                      EB-1 case.
                                                                                                                                                                                                                                                                    </p> -->
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649686705028930e9622abeb" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                          </div>
                          </div>
                          </div>
                          <!-- panel 2 -->
                    <div data-panel-id="family-nonimmigrant" class="single-panel active">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.404651s; animation-duration: 0.8s;">Family Non-Immigrants</h2>
                      <div class="horizontal-line horizontal-line-fluid"></div>
                      <div class="dynamic-content-wrapper">
                        <div class="content-info">
                          <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.409302s; animation-duration: 0.8s;">Family Visa – Non-Immigrants</h3>
                          The employment based visa is generally for any foreign-citizen who wishes to enter the United States for a temporary fixed amount of time with a non-immigrant status.The employer who wishes for the foreign-citizen to work for them would need to file a petition with United States Citizenship and Immigration Services (USCIS) on the foreign-citizen employee’s behalf
                        </div>
                        <div class="accordion-wrapper">
                          <div class="single-accordion active">
                            <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.413953s; animation-duration: 0.8s;">Family Visa Questionnaire</h4>
                            <div class="accordion-inner-wrapper">
                              <div class="accordion-content">
                                <!-- <p class="">
                                                                                                                                                                                                                                                    Submit our 3 minute and straight forward EB-2
                                                                                                                                                                                                                                                    questionnaire & we will evaluate your potential
                                                                                                                                                                                                                                                    EB-2 case.
                                                                                                                                                                                                                                                  </p> -->
                                <div class="">
                                  <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649686705028930e9622abeb" class="questionnaire-btn">
                                    start questionnaire
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                    
                        </div>
                        </div>
                        </div>
                        <!--#endregion - end of - USA Family Visa -->
                        
                        <!--#region - start of - Other Visas -->
                        <!-- panel 1 -->
                        <div data-panel-id="student-visa" class="single-panel">
                          <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.418605s; animation-duration: 0.8s;">Student Visa</h2>
                          <div class="horizontal-line horizontal-line-fluid"></div>
                          <div class="dynamic-content-wrapper">
                  <div class="content-info">
                    <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.423256s; animation-duration: 0.8s;">2023 Student Visa F, M, J</h3>
                    <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.427907s; animation-duration: 0.8s;">
                    
                      The United States is known for having the most advanced educational systems in the world. This is why the Student Visa category is one of the most popular Visa categories and allows for students of all ages to travel to the United States to further their education.
                    </p>
                  </div>
                  <div class="accordion-wrapper">
                    <div class="single-accordion active">
                      <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.432558s; animation-duration: 0.8s;">Do I qualify for a Study Visa?</h4>
                      <div class="accordion-inner-wrapper">
                        <div class="accordion-content">
                          <!-- <p class=""></p> -->
                          <div class="">
                            <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649686705028930e9622abeb" class="questionnaire-btn">
                              start questionnaire
                            </button>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            <!-- panel 2 -->
                            <div data-panel-id="exchange-visitors" class="single-panel">
                              <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.437209s; animation-duration: 0.8s;">Exchange Visitors</h2>
                              <div class="horizontal-line horizontal-line-fluid"></div>
                              <div class="dynamic-content-wrapper">
                                <div class="content-info">
                                  <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.44186s; animation-duration: 0.8s;">2023 Exchange Visitors</h3>
                                  <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.446512s; animation-duration: 0.8s;">
                            
                            
                                  </p>
                                </div>
                                <div class="accordion-wrapper">
                                  <div class="single-accordion active">
                                    <h4 class="sub-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.451163s; animation-duration: 0.8s;">The following work/visitors may qualify <br> for this particular visa category:</h4>
                                    <div class="accordion-inner-wrapper">
                                      <div class="accordion-content">
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.455814s; animation-duration: 0.8s;">
                          
                          </p><ul>
                            <li>Au pair and EduCare</li>
                            <li>Camp Counselor</li>
                            <li>Government Visitor</li>
                            <li>Intern</li>
                            <li>International Visitor (Department of State use)</li>
                            <li>Physician</li>
                            <li>Professor and Research Scholar</li>
                            <li>Short-term Scholar</li>
                            <li>Specialists</li>
                            <li>Student (College/University)</li>
                            <li>Student (Secondary)</li>
                            <li>Summer Work Travel</li>
                            <li>Teacher</li>
                            <li>Trainee</li>
                          </ul>
                          <p class="preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.460465s; animation-duration: 0.8s;"></p>
                          <div class="">
                              <!-- <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-64928c78af7f653d804d3756" class="questionnaire-btn">
                                                                                                                                                                                                                                                  start questionnaire
                                                                                                                                                                                                                                                </button> -->
                              </div>
                              </div>
                              </div>
                              </div>
                              </div>
                              </div>
                              </div>
                              <!-- panel 3 -->
                              <div data-panel-id="tourism-business" class="single-panel">
                                <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.465116s; animation-duration: 0.8s;">Tourism Business visa</h2>
                                <div class="horizontal-line horizontal-line-fluid"></div>
                                <div class="dynamic-content-wrapper">
                                  <div class="content-info">
                                    <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.469767s; animation-duration: 0.8s;">Tourism/Business</h3>
                                    <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.474419s; animation-duration: 0.8s;">
                              
                              
                                    </p>
                                  </div>
                                  <div class="accordion-wrapper">
                                    <div class="single-accordion active">
                                      <!-- <h4 class="sub-title">The following work/visitors may qualify <br> for this particular visa category:</h4> -->
                                      <div class="accordion-inner-wrapper">
                                        <div class="accordion-content">
                          <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.47907s; animation-duration: 0.8s;">
                            The Business/Tourism Visa is particularly for foreign-citizens who would like to enter the United States for business (B-1) or pleasure (B-2). B-1 Visa is specifically for business purposes only, where an individual may enter the U.S. B-2 Visa is specifically for tourism and vacation purposes. The B-2 Visa recipient may also partake in needed medical treatment – treatment unable to obtain in their home country. This type of visa allows the individual to be present in the U.S. for a short period of time. There is also the combination of both B-1 and B-2 Visa, which does allow the individual to partake in business and pleasure in their time given in the U.S. With both these categories, an applicant must be able to prove his/her intent to return to their home country after a temporary visit. Therefore, proof of substantial ties to one’s home country is a key factor for which the applicant has the burden of proof.
                          
                          </p>
                          <div class="">
                              <!-- <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-64928c78af7f653d804d3756" class="questionnaire-btn">
                                                                                                                                                                                                                                                  start questionnaire
                                                                                                                                                                                                                                                </button> -->
                              </div>
                              </div>
                              </div>
                              </div>
                              </div>
                              </div>
                              </div>
                              <!-- panel 4 -->
                              <div data-panel-id="lottery" class="single-panel">
                                <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.483721s; animation-duration: 0.8s;">Lottery</h2>
                                <div class="horizontal-line horizontal-line-fluid"></div>
                                <div class="dynamic-content-wrapper">
                                  <div class="content-info">
                                    <h3 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.488372s; animation-duration: 0.8s;">Diversity Immigrant Visa – Lottery</h3>
                                    <p class="preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.493023s; animation-duration: 0.8s;">
                                      The Diversity Immigrant Visa program, also known as the “Green Card Lottery,” is a United States government lottery program meant to create diversity within the U.S. communities by making available 55,000 immigrant visas annually to countries which had lower numbers of immigrants (to the United States) in the previous five-years .Since 2017 certain nationalities have faced severe restrictions in their ability to successfully obtain their Immigrant Visas to the United States, in spite of having won the “Lottery.” The program has come under severe scrutiny especially with recent administration and there are different lawsuits which address different aspects of more current restrictions. For an evaluation of your case, please feel free to contact Lawmaks.
                            
</p>
</div>
<div class="accordion-wrapper">
  <div class="single-accordion active">
    <h4 class="sub-title preFade" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.497674s; animation-duration: 0.8s;">Lottery Questionnaire</h4>
    <div class="accordion-inner-wrapper">
      <div class="accordion-content">
                            <!-- <p class="">
                                                                                                                                                                                                                                                                                                                                                                                                                                      Submit our 3 minute and straight forward EB-2
                                                                                                                                                                                                                                                                                                                                                                                                                                      questionnaire & we will evaluate your potential
                                                                                                                                                                                                                                                                                                                                                                                                                                      EB-2 case.
                                                                                                                                                                                                                                                                                                                                                                                                                                    </p> -->
                            <div class="">
                              <button type="button" data-modal-ref="questionnaire-modal" data-form-context-id="form-context-649687e413e19455b24df348" class="questionnaire-btn">
                                start questionnaire
                              </button>
                            </div>
                          </div>
                          </div>
                      </div>

                    </div>
                    </div>
                    </div>
                  <!--#endregion - end of - Other Visas -->
                  
                  
                  </div>
                  </div>
                  </div>
                  <!-- tab buttons col  -->
                  <div class="col col-small" id="yui_3_17_2_1_1687676473952_280">
                    <div class="content-wrapper" id="yui_3_17_2_1_1687676473952_279">
                      <div class="tab-trigger-container" id="yui_3_17_2_1_1687676473952_278">
                        <!--#region - start of - Investment Visa -->
                        <div class="triggerer-section">
                          <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.502326s; animation-duration: 0.8s;">Investment Visa</h2>
                          <div class="horizontal-line"></div>
                          <div class="tab-buttons-wrapper cols-3">
                    <button data-panel-ref="eb-5" type="button" class="tab-triggerer-btn">
                      EB-5 visa
                    </button>
                    <button data-panel-ref="e-2" type="button" class="tab-triggerer-btn">
                      E-2 visa
                    </button>
                    <button data-panel-ref="l-1" type="button" class="tab-triggerer-btn">
                      L-1 visa
                    </button>
                    </div>
                    </div>
                    <!--#endregion - end of - Investment Visa -->
                    <!--#region - start of - Employment/Work Visa -->
                    <div class="triggerer-section">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.506977s; animation-duration: 0.8s;">Employment/Work Visa</h2>
                      <div class="horizontal-line"></div>
                      <div class="tab-buttons-wrapper cols-3">
                    <button data-panel-ref="eb-1" type="button" class="tab-triggerer-btn">
                      EB-1 visa
                    </button>
                    <button data-panel-ref="eb-2" type="button" class="tab-triggerer-btn">
                      EB-2 visa
                    </button>
                    <button data-panel-ref="eb-3" type="button" class="tab-triggerer-btn">
                      EB-3 visa
                    </button>
                    </div>
                    </div>
                    <!--#endregion - end of - Employment/Work Visa -->
                    <!--#region - start of - USA Family Visa -->
                    <div class="triggerer-section active" id="yui_3_17_2_1_1687676473952_277">
                      <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.511628s; animation-duration: 0.8s;">USA Family Visa</h2>
                      <div class="horizontal-line"></div>
                  <div class="tab-buttons-wrapper" id="yui_3_17_2_1_1687676473952_276">
                    <button data-panel-ref="family-immigrant" type="button" class="tab-triggerer-btn" id="yui_3_17_2_1_1687676473952_275">
                      Family Immigrants
                    </button>
                    <button data-panel-ref="family-nonimmigrant" type="button" class="tab-triggerer-btn active" id="yui_3_17_2_1_1687676473952_294">
                      Family Non - Immigrants
                    </button>
                  </div>
                  </div>
                  <!--#endregion - end of - USA Family Visa -->
                  <!--#region - start of - Other Visas -->
                  <div class="triggerer-section">
                    <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.516279s; animation-duration: 0.8s;">Other Visas</h2>
                    <div class="horizontal-line"></div>
                  <div class="tab-buttons-wrapper">
                    <button data-panel-ref="student-visa" type="button" class="tab-triggerer-btn">
                      Student visa
                    </button>
                    <button data-panel-ref="exchange-visitors" type="button" class="tab-triggerer-btn">
                      Exchange visitors
                    </button>
                    <button data-panel-ref="tourism-business" type="button" class="tab-triggerer-btn">
                      Tourism Business visa
                    </button>
                    <button data-panel-ref="lottery" type="button" class="tab-triggerer-btn">
                      Lottery
                    </button>
                  </div>
                  </div>
                  <!--#endregion - end of - Other Visas -->
                  <!--#region - start of - Other Services -->
                  <div class="triggerer-section">
                    <h2 class="large-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.52093s; animation-duration: 0.8s;">Other Services</h2>
                    <div class="horizontal-line"></div>
                    <div class="tab-buttons-wrapper"></div>
                  </div>
                  <!--#endregion - end of - Other Services -->
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  <!--#region - start of - stepped form modal -->
                  <div data-modal-id="questionnaire-modal" class="modal-bg">
                    <div class="modal-container mx-auto d-grid justify-content-center align-items-center">
          <div class="position-relative modal-inner-wrapper">
            <div class="modal-content">
              <div class="modal-header border-0">
                <button type="button" class="modal-closer" aria-label="modal-closer">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"></path>
                  </svg>
                </button>
              </div>
              <div class="modal-body">
                <div class="stepped-form-wrapper">
                  <div class="stepped-form-container"></div>
                  <div class="stepped-controller-wrapper">
                    <button type="button" class="form-prev" hidden="">
                      previous
                    </button>
                    <button type="button" class="form-next">next</button>
                    <button type="button" class="form-submit" hidden="" aria-label="submit form"></button>
                    </div>
                    <p class="meta-info preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.8s; transition-delay: 0.525581s; animation-duration: 0.8s;">
                      <span class="current-index"></span>
                      <span class="">of</span>
                      <span class="total-steps"></span>
                    </p>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    <!--#endregion - end of - stepped form modal -->

      <!--#region - start of - services background  -->
      <figure class="services-bg">
        <picture class="">
          <source media="(min-width: 150px)" srcset="
                                                                                                                                                                                                                                                              https://cdn.pixabay.com/photo/2013/11/15/01/27/flag-210765_1280.jpg 1280w
                                                                                                                                                                                                                                                            ">
          <img src="https://cdn.pixabay.com/photo/2013/11/15/01/27/flag-210765_1280.jpg" alt="image" class="bg-image" loading="lazy" width="1280" height="1013" decoding="async" fetchpriority="low">
          </picture>
          </figure>
          <!--#endregion - end of - services background -->
          </section>
 
<script>
  const INPUT_TYPES = {
  number: "number",
  email: "email",
  text: "text",
  textarea: "textarea",
  checkbox: "checkbox",
  radio: "radio",
  select: "select"
};
const afterDOMContentLoaded = () => {
  // after the DOM is ready

  //#region - start of - tab panel
  const lawmaksServicesSectionEl = document.querySelector(
    ".lawmaks-services-section"
  );
  const tabPanels = [
    ...lawmaksServicesSectionEl?.querySelectorAll("[data-panel-id]")
  ];
  const tabTriggers = [
    ...lawmaksServicesSectionEl?.querySelectorAll("[data-panel-ref]")
  ];
  const tabTriggerContainerEl = lawmaksServicesSectionEl?.querySelector(
    ".tab-trigger-container"
  );

  tabTriggerContainerEl.addEventListener("click", ev => {
    const currentTarget = ev.target;
    const currentRef = currentTarget?.getAttribute("data-panel-ref");
    if (!currentRef) return;

    const currentPanel = tabPanels?.find(
      panel => panel?.getAttribute("data-panel-id") === currentRef
    );

    const currentButton = tabTriggers?.find(
      button => button?.getAttribute("data-panel-ref") === currentRef
    );

    if (!currentPanel || !currentButton) return;
    if (currentButton.classList.contains("active")) return;
    lawmaksServicesSectionEl.classList.add("active");

    const triggerSections = [
      ...tabTriggerContainerEl?.querySelectorAll(".triggerer-section")
    ];

    triggerSections?.forEach(section => {
      section?.classList.remove("active");
      if (section === currentButton.closest(".triggerer-section")) {
        section?.classList.add("active");
      }
    });

    tabTriggers?.forEach(button => {
      button?.classList.remove("active");
      if (button === currentButton) {
        currentButton?.classList.add("active");
      }
    });

    tabPanels?.forEach(panel => {
      panel?.classList.remove("active");
      if (panel === currentPanel) {
        setTimeout(() => currentPanel?.classList.add("active"), 150);
      }
    });
  });
  //#endregion - end of - tab panel

  //#region - start of - modal
  //#region - start of - modal selectors
  const modalOpeners = document.querySelectorAll("[data-modal-ref]");
  const modalClosers = document.querySelectorAll(".modal-closer");
  //#endregion - end of - modal selectors

  // shows the modal when the user clicks open-btn
  modalOpeners.forEach(btn => {
    btn.addEventListener("click", () => {
      document
        .querySelector(`[data-modal-id="${btn.dataset.modalRef}"]`)
        .classList.add("modal-shown");
      document.documentElement.classList.add("modal-no-scrolling");

      // document.documentElement.dispatchEvent(new Event("modal-shown"));
    });
  });

  // hides the modal when the user clicks close-btn
  modalClosers.forEach(btn => {
    btn.addEventListener("click", () => {
      btn.closest("[data-modal-id]").classList.remove("modal-shown");
      document.documentElement.classList.remove("modal-no-scrolling");
    });
  });

  // hides the modal when the user clicks outside of the modal
  document.querySelectorAll("[data-modal-id]").forEach(modalBg => {
    modalBg.addEventListener("click", ev => {
      const elem = ev.target;
      if (
        elem.getAttribute("data-modal-id") != null &&
        elem.classList.contains("modal-shown")
      ) {
        elem.classList.remove("modal-shown");
        document.documentElement.classList.remove("modal-no-scrolling");
      }
    });
  });

  // hides the modal when the user press 'Esc' key
  document.addEventListener("keydown", event => {
    if (event.key === "Escape") {
      //if esc key was not pressed in combination with ctrl or alt or shift
      const isNotCombinedKey = !(
        event.ctrlKey ||
        event.altKey ||
        event.shiftKey
      );
      if (isNotCombinedKey) {
        document.querySelectorAll("[data-modal-id]").forEach(modal => {
          if (modal.classList.contains("modal-shown")) {
            modal.classList.remove("modal-shown");
            document.documentElement.classList.remove("modal-no-scrolling");
          }
        });
      }
    }
  });
  //#endregion - end of - modal

  //#region - start of - stepped form questionnaire
  const questionnaireButtons = [
    ...document?.querySelectorAll("[data-form-context-id]")
  ];

  questionnaireButtons
    ?.map(button => button?.dataset?.formContextId)
    .forEach(contextId => {
      const formScriptEl = document.querySelector(`#${contextId}`);
      const formEl = formScriptEl?.parentElement.querySelector("form");
      formEl?.setAttribute("hidden", true);
    });

  const showElement = el => {
    el.disabled = false;
    el.hidden = false;
    el.classList.remove("hidden");
  };
  const hideElement = el => {
    el.classList.add("hidden");
    el.disabled = true;
    el.hidden = true;
  };
  questionnaireButtons.forEach(button => {
    button.addEventListener("click", ev => {
      const currentButton = ev?.target;
      if (!questionnaireButtons?.includes(currentButton)) return;
      const targetFormContextId = currentButton.dataset.formContextId;
      const formScriptEl = document.querySelector(`#${targetFormContextId}`);
      const formEl = formScriptEl?.parentElement.querySelector("form");
      formEl?.removeAttribute("hidden");
      if (!formScriptEl) return;
      const startPhrase = 'formSubmissionMessage":{"html":"';
      const endChar = '"';
      const trimmedString = formScriptEl.textContent.slice(1, 500);
      const startIndex =
        trimmedString.indexOf(startPhrase) + startPhrase.length;
      const endIndex = trimmedString.indexOf(endChar, startIndex);
      const formSubmissionMessage = trimmedString.substring(
        startIndex,
        endIndex
      );

      if (!formEl) return;
      const submitButtonText = formEl.querySelector(
        'input[type="submit"]'
      ).value;

      // const formItems = [...formEl.querySelectorAll(".form-item")];
      const steppedFormWrapper = lawmaksServicesSectionEl?.querySelector(
        ".stepped-form-wrapper"
      );
      if (!steppedFormWrapper) return;
      const steppedFormController = steppedFormWrapper?.querySelector(
        ".stepped-controller-wrapper"
      );
      const steppedFormContainer = steppedFormWrapper?.querySelector(
        ".stepped-form-container"
      );
      const steppedFormPrev = steppedFormWrapper?.querySelector(".form-prev");
      const steppedFormNext = steppedFormWrapper?.querySelector(".form-next");
      const steppedFormSubmit =
        steppedFormWrapper?.querySelector(".form-submit");
      steppedFormSubmit.textContent = submitButtonText;

      if (steppedFormContainer?.firstElementChild) {
        steppedFormContainer?.removeChild(
          steppedFormContainer?.firstElementChild
        );
      }

      hideElement(formEl.querySelector(".form-button-wrapper"));
      // steppedFormContainer.appendChild(formEl);
      // steppedFormContainer.insertAdjacentElement("beforeend", formEl);
      // Clone the source form element
      const clonedForm = formEl.cloneNode(true);

      // Append the cloned form to the destination element
      steppedFormContainer.appendChild(clonedForm);
      const formItems = [...clonedForm.querySelectorAll(".form-item")];

      const afterSubmitEl = document.createElement("div");
      afterSubmitEl.classList.add("submission-message");
      afterSubmitEl.textContent = formSubmissionMessage;

      // Get the slider container and slide elements
      const sliderContainer = formEl;
      const slides = formItems;
      // Set initial slide index
      let currentSlide = 0;

      // Function to show the current slide
      const showSlide = () => {
        // Hide all slides
        // slides.forEach(slide => (slide.style.display = "none"));
        slides.forEach(slide => hideElement(slide));
        // Show the current slide
        if (currentSlide >= 0 && currentSlide < slides.length) {
          // slides[currentSlide].style.display = "flex";
          showElement(slides[currentSlide]);
        }
        if (currentSlide === 0) {
          hideElement(steppedFormSubmit);
          hideElement(steppedFormPrev);
          showElement(steppedFormNext);
        } else if (currentSlide > 0 && currentSlide < slides.length - 2) {
          showElement(steppedFormNext);
          showElement(steppedFormPrev);
          hideElement(steppedFormSubmit);
        } else if (currentSlide >= slides.length - 1) {
          showElement(steppedFormSubmit);
          hideElement(steppedFormNext);
        }

        steppedFormWrapper.querySelector(".current-index").textContent =
          currentSlide + 1;
        steppedFormWrapper.querySelector(".total-steps").textContent =
          slides.length;
      };

      // Function to move to the next slide
      const nextSlide = () => {
        currentSlide++;
        // Wrap around to the first slide if at the end
        if (currentSlide >= slides.length) {
          // currentSlide = 0;
        }
        showSlide();
      };

      // Function to move to the previous slide
      const prevSlide = () => {
        currentSlide--;
        // Wrap around to the last slide if at the beginning
        if (currentSlide < 0) {
          // currentSlide = slides.length - 1;
        }
        showSlide();
      };

      // Event listeners for next and previous buttons
      steppedFormController.addEventListener("click", event => {
        const target = event.target;
        if (target.classList.contains("form-next")) {
          nextSlide();
          // showElement(steppedFormPrev);
        } else if (target.classList.contains("form-prev")) {
          prevSlide();
          // showElement(steppedFormNext);
        } else if (target.classList.contains("form-submit")) {
          hideElement(steppedFormSubmit);
          hideElement(steppedFormPrev);
          hideElement(steppedFormNext);
          formEl.dispatchEvent(new Event("submit", { bubbles: true }));
          formEl.classList.add("form-submitted");
          steppedFormContainer.appendChild(afterSubmitEl);
          setTimeout(() => {
            formEl.closest("[data-modal-id].modal-shown").click();
            hideElement(steppedFormNext);
            formEl.classList.remove("form-submitted");
            formEl.reset();
            steppedFormContainer.removeChild(afterSubmitEl);
            currentSlide = 0;
            showSlide();
          }, 1000);
        }
      });

      // Show the initial slide
      showSlide();
    });
  });

  //#endregion - end of - stepped form questionnaire

  //#endregion - end of - custom form handling
};
document.addEventListener("DOMContentLoaded", afterDOMContentLoaded);

</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.