@font-face {
  font-display: swap;
  font-family: "Lato Bold";
  src: url("../fonts/Lato/Lato-Bold.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium Bold";
  src: url("../fonts/Oxanium/Oxanium-Bold.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium ExtraBold";
  src: url("../fonts/Oxanium/Oxanium-ExtraBold.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium Light";
  src: url("../fonts/Oxanium/Oxanium-Light.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium ExtraLight";
  src: url("../fonts/Oxanium/Oxanium-ExtraLight.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium Medium";
  src: url("../fonts/Oxanium/Oxanium-Medium.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium Regular";
  src: url("../fonts/Oxanium/Oxanium-Regular.ttf");
}
@font-face {
  font-display: swap;
  font-family: "Oxanium SemiBold";
  src: url("../fonts/Oxanium/Oxanium-SemiBold.ttf");
}

p {
  margin: 0;
}

.geek-text p,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oxanium Regular";
}

.button,
.next-button {
  font-family: "Lato Bold";
}

.img-top {
  object-fit: cover;
  min-height: 100%;
}

.next {
  color: #ffffff;
  font-family: Oxanium;
  font-size: 10.8px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 13.5px;
}

.try-geek-support {
  color: #ffffff;
  font-family: Oxanium;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 31.5px;
}

.oxanium-white-small {
  color: #ffffff;
  font-family: Oxanium;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 26px;
  display: flex;
  font-weight: 300;
  gap: 20px;
  margin-bottom: 24px;
  align-items: center;
}

.homepage-heading {
  font-size: 54px;
  color: #491d72;
}

.copyright-text {
  color: #ffffff;
  font-family: Oxanium;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 15px;
}

.bg-hero-gradient {
  background: linear-gradient(180deg, #3023ae 0%, #c86dd7 100%);
}

.contact-form {
  width: 800px !important;
}

.got-you-covered {
  width: 400px;
}

.contact-rep {
  width: 120px;
  height: 120px;
}

.form-link {
  text-decoration: underline;
  font-weight: 300;
  color: inherit;
  cursor: pointer;
}

.form-input:focus-within {
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.form-input {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.form-input .input-group-prepend {
  padding: 0.5rem 0.6rem;
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.form-input img {
  border: none;
}

.form-input input {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border: none;
  font-family: "Oxanium Light";
  font-weight: 300;
  font-size: 1.1rem;
}

.form-input input:focus {
  box-shadow: none;
}

.form-control {
  font-family: "Oxanium Light";
  color: #111;
  font-weight: 300;
}

.header-card {
  width: 410px;
}

.geek-logo {
  width: fit-content;
  position: absolute;
  left: 30px;
  top: 30px;
}

.geek-logo img {
  width: 160px;
}

/* Dropdown classes */
.vue-dropdown {
  width: 100%;
  min-width: 160px;
  text-align: left;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.vue-dropdown a:hover {
  text-decoration: none;
}

.vue-dropdown img {
  width: 16px;
}

.vue-dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 160px;
  padding: 8px 20px 8px 10px;
  text-transform: none;
  font-weight: 300;
  border: 1px solid #d7d7d7;
  background-size: 0 2px, 100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom, center calc(100% - 1px);
  background-color: transparent;
  transition: background 0s ease-out;
  float: none;
  box-shadow: none;
  border-radius: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.vue-dropdown-toggle.menu-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: 0;
}

.vue-dropdown-placeholder {
  font-size: 10px;
}

.vue-dropdown-toggle:hover {
  background: #e1e1e1;
  cursor: pointer;
}

.vue-dropdown-menu {
  position: absolute;
  overflow: auto;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-clip: padding-box;
}

.vue-dropdown-menu > li > a {
  padding: 10px 30px;
  display: block;
  clear: both;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  font-family: Oxanium;
  color: #111111;
  white-space: nowrap;
  text-decoration: none;
}
.vue-dropdown-menu > li > a:hover {
  background: #f3f3f3;
}

.vue-dropdown-menu > li {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin: 0;
}

.vue-dropdown li {
  list-style-type: none;
}

.carousel-inner {
  overflow: visible !important;
}

.avoid-absolute {
  margin-top: 2rem;
}

/* Modal Classes */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(73, 29, 114, 0.8);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-wrapper .close-icon {
  position: absolute;
  cursor: pointer;
  right: 5%;
  top: 5%;
  color: #eee;
  z-index: 999;
}
.modal-container {
  width: 650px;
  margin: 0px auto;
  border-radius: 2px;
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.custom-indicators {
  bottom: 0px;
  gap: 0.5em;
  margin-top: 24px;
}

.custom-indicators button {
  border: 2px solid #17a7a7 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

.custom-indicators button.active {
  background-color: #17a7a7;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  display: block;
  margin-top: 1rem;
}

.modal-dropdown {
  width: 342px;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.open {
  display: block;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-bg {
  background: #ebeaf7;
}

.step-avatar {
  left: 38%;
  position: relative;
  transform: translate(0%, -60%);
  width: 24%;
  border: 3px solid #17a7a7;
  margin-bottom: -5%;
}

.div-padding {
  padding-top: 10%;
  padding-bottom: 10%;
}

.div-padding-middle {
  text-align: left;
  margin: auto;
  width: 250px;
}

.div-padding-top {
  padding-top: 5%;
  padding-bottom: 0%;
}

.card-padding {
  margin-top: 10%;
  left: 23%;
  position: relative;
  width: 54%;
  height: 18%;
  border-radius: 5px;
}

.card-padding > .card-body {
  padding-top: 0;
}

.btn-geek-default {
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  width: 100%;
}

.dropdown button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aaa;
}

.number-of-employees {
  color: #979797;
  font-family: Oxanium;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 14px;
}

.geek-toggle {
  background: #efefef;
  border: 1px solid #f1f1f1;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  width: 100%;
}

.geek-toggle a {
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
  padding: 15px 50px;
  font-size: 14px;
  font-family: "Oxanium Regular";
  color: #111111;
}

.geek-toggle a.active {
  background: #17a7a7;
  color: white;
}

.inline-block {
  display: inline-block;
}

.plan-price {
  font-size: 64px;
}

.next-button {
  border-radius: 1.5em;
  background-color: #d7d7d7;
  padding: 0.5em 1.4em;
  color: white;
  font-weight: 700;
  width: fit-content;
  border: none;
  outline: none;
}

.next-button:hover {
  color: white;
  filter: brightness(105%);
}

.next-button:disabled {
  background: rgba(73, 29, 114, 0.49);
  color: rgba(200, 109, 215, 0.51);
}

.splash-card {
  padding: 15px;
  text-align: center;
  margin: 0;
  margin-top: 10%;
  border-radius: 8px;
}

.splash-pricing-plans {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  align-items: stretch;
}

.pricing-card {
  --paddingAmount: 30px;
  background: white;
  padding: var(--paddingAmount);
  border-radius: 10px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pricing-card.first {
  padding-right: calc(var(--paddingAmount) + (var(--paddingAmount) / 2));
  margin-right: calc(-1 * (var(--paddingAmount) / 3));
}

.pricing-card.last {
  padding-left: calc(var(--paddingAmount) + (var(--paddingAmount) / 2));
  margin-left: calc(-1 * (var(--paddingAmount) / 3));
}

.pricing-card .popular-plan {
  position: absolute;
  color: white;
  top: 3%;
  right: 3%;
  background: #3023ae;
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 17px;
}

.geek-support-footer {
  background-color: #491d72;
}

.w-60 {
  width: 60% !important;
}
.w-90 {
  width: 90% !important;
}

.limit-img-45 {
  max-height: 45px;
}

.mt-6 {
  margin-top: 72px;
}

.p-6 {
  padding: 72px;
}

.pt-6 {
  padding-top: 72px;
}
.py-6 {
  padding-top: 72px;
  padding-bottom: 72px;
}
.px-6 {
  padding-left: 72px;
  padding-right: 72px;
}
.m-6 {
  margin: 72px;
}

.page-width {
  width: 80vw;
  margin: 0 auto;
}

.pricing-page-width {
  width: 80vw;
  margin: 0 auto;
}

.pricing-table {
}

.pricing-table .header {
  background: #f3fafa;
  padding: 14px 0;
  display: flex;
  align-items: center;
}

.pricing-table .header h3 {
  color: #491d72;
  font-size: 18px;
  font-family: "Oxanium SemiBold";
  line-height: 1;
}

.pricing-table .table-row-wrapper {
  border: 1px solid #f3fafa;
  padding: 8px 0;
}

.pricing-table .table-row-wrapper p {
  font-size: 13px;
}
.pricing-icon {
  height: 16px;
  text-align: center;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  text-align: center;
  color: white;
  border-radius: 50%;
  background: #17a7a7;
  font-family: Oxanium;
}

.step-bar {
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background-color: #17a7a7;
}

.accordion-item {
  border: none !important;
}

.accordion-button {
  outline: none;
  border: none;
  background: #f3fafa;
  width: 100%;
  text-align: left;
  color: #491d72;
  font-family: "Oxanium SemiBold";
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: #491d72;
  background-color: #f3fafa;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.form-icon {
  width: 15px;
  height: 15px;
}

.border-green {
  border: 1px solid #17a7a7;
}

.fs-7 {
  font-size: 0.9rem !important;
}
.fs-10 {
  font-size: 10px;
}
.fs-12 {
  font-size: 12px;
}
.fs-13 {
  font-size: 13px;
}
.fs-14 {
  font-size: 14px;
}
.fs-16 {
  font-size: 16px;
}
.fs-18 {
  font-size: 18px;
}
.fs-21 {
  font-size: 21px;
}
.fs-24 {
  font-size: 24px;
}
.fs-26 {
  font-size: 26px;
}
.fs-28 {
  font-size: 28px;
}
.fs-32 {
  font-size: 32px;
}
.fs-40 {
  font-size: 40px;
}
.fs-60 {
  font-size: 60px;
}

.fsd-1 {
  font-size: 2vw;
}
.fsd-2 {
  font-size: 5vw;
}
.fsd-3 {
  font-size: 8vw;
}
.fsd-4 {
  font-size: 10vw;
}
.fsd-5 {
  font-size: 15vw;
}
.fsd-26 {
  font-size: 26px;
}
.fsd-32 {
  font-size: 32px;
}
.fsd-40 {
  font-size: 40px;
}
.fsd-60 {
  font-size: 60px;
}

.lh-0 {
  line-height: 1;
}

.oxanium-regular {
  font-family: "Oxanium Regular" !important;
}
.oxanium-light {
  font-family: "Oxanium Light" !important;
}
.oxanium-extra-light {
  font-family: "Oxanium ExtraLight" !important;
}
.oxanium-bold {
  font-family: "Oxanium Bold" !important;
}
.oxanium-semi-bold {
  font-family: "Oxanium SemiBold" !important;
}
.oxanium-extra-bold {
  font-family: "Oxanium ExtraBold" !important;
}
.oxanium-medium {
  font-family: "Oxanium Medium" !important;
}

.text-gray {
  color: #d7d7d7;
}
.teal-text {
  color: #80cccb;
}
.text-pink {
  color: #cb75d8;
}
.text-green {
  color: #17a7a7;
}
.text-purple {
  color: #491d72;
}
.text-light-purple {
  color: #3023ae;
}
.purple-text-2 {
  color: #3626af;
}

.bg-faded-blue {
  background: rgba(23, 167, 167, 0.05);
}
.bg-gray {
  background: #d7d7d7;
}
.bg-light-gray {
  background: rgba(48, 35, 174, 0.1);
}
.bg-teal {
  background: #80cccb;
}
.plans-bg {
  background: #f2fafa;
}
.green-bg {
  background-color: #17a7a7;
}
.bg-purple {
  background: #4a1e72;
}
.bg-gradient-geek {
  background: linear-gradient(90deg, #3023ae 0%, #c86dd7 100%);
}

.rounded-4 {
  border-radius: 10px;
}
.rounded-5 {
  border-radius: 24px;
}

.mt-n3 {
  margin-top: -24px;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.thank-you-bg {
  background: #ebe9f7;
}

.calendly-inline-widget {
  display: flex;
  justify-content: center;
  height: 100% !important;
}

.hero-bg {
  position: relative;
  background-image: url("/images/splash/IMG-HERO.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.hero-bg-2 {
  position: relative;
  background-image: url("/images/splash/IMG-HERO-2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.hero-bg-3 {
  position: relative;
  background-image: url("/images/splash/IMG-HERO-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.hero-bg-4 {
  position: relative;
  background-image: url("/images/splash/IMG-HERO-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.pricing-plan-bg {
  background: linear-gradient(134.72deg, #3023ae 0%, #c86dd7 100%);
}

.carousel-indicators [data-bs-target] {
  border-radius: 50%;
  height: 11px;
  width: 11px;
  border: 1px solid #17a7a7;
  background-color: transparent !important;
}

.carousel-indicators .active {
  background-color: #17a7a7 !important;
}

.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 90%, white 100%);
  z-index: 1;
}

.hide-on-desktop {
  display: none;
}

.carousel-item.always-visible {
  display: block !important;
}

@media (max-width: 992px) {
  .page-width {
    width: 95vw;
  }

  .pricing-page-width {
    width: 95vw;
  }

  .pricing-card.first {
    padding-right: var(--paddingAmount);
    margin-right: 0;
  }

  .pricing-card.last {
    padding-left: var(--paddingAmount);
    margin-left: 0;
  }

  .w-md-100 {
    width: 100% !important;
  }

  .splash-pricing-plans {
    grid-template-columns: 100%;
  }

  .contact-form {
    width: 95% !important;
  }
  .calendly-inline-widget {
    height: 480px !important;
  }

  .header-card {
    width: 100%;
  }

  .splash-card {
    border-radius: 0;
    margin-top: 0;
  }

  .card-body {
    max-width: 510px;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-dropdown {
    width: auto;
  }

  .geek-logo {
    position: relative;
    z-index: 3;
    left: auto;
    top: auto;
    width: 100%;
    text-align: center;
    padding: 20px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.7) 80%,
      rgba(255, 255, 255, 0) 100%
    );
    margin-bottom: -20px;
  }
  .geek-logo img {
    width: 100px;
  }

  .hero-bg {
    padding-bottom: 150px;
  }
  .hide-on-mobile {
    display: none;
  }

  .hide-on-desktop {
    display: block;
  }

  .step-avatar-wrapper {
    width: 100px;
    margin-bottom: -40px;
  }

  .column-mobile {
    flex-direction: column;
  }
  .column-reverse-mobile {
    flex-direction: column-reverse;
  }
  .row-reverse-mobile {
    flex-direction: row-reverse;
  }

  .text-center-mobile {
    text-align: center;
  }

  .fsm-12 {
    font-size: 12px;
  }
  .fsm-16 {
    font-size: 16px;
  }
  .fsm-18 {
    font-size: 18px;
  }
  .fsm-21 {
    font-size: 21px;
  }
  .fsm-24 {
    font-size: 24px;
  }

  .w-100-mobile {
    width: 100% !important;
  }

  .modal-body {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .modal-mobile-overflow {
    max-height: 80vh;
    overflow-y: auto;
  }
}

@media (max-width: 650px) {
  .modal-container {
    width: 100%;
  }
}
.mob-menu .modal-header img {
  cursor: pointer;
}