/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and sass, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
@import url("https://unpkg.com/tippy.js@6/dist/tippy.css");
@import url("https://unpkg.com/tippy.js@6/themes/material.css");
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #141414;
  color: white;
  font-family: "Outfit", sans-serif;
  font-size: 19px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

h1 {
  color: #2466f3;
  font-size: 2.2em;
}

h2 {
  font-size: 2em;
}

input,
textarea {
  padding: 15px 20px;
  font-size: 1em;
  font-family: inherit;
  border-radius: 6px;
  border: none;
  background-color: transparent;
  border: 4px solid #2466f3;
  color: white;
}

input::placeholder,
textarea::placeholder {
  color: #3e3e3e;
}

input:focus,
textarea:focus {
  outline: none;
}

button,
.button {
  padding: 8px 20px;
  font-size: 0.8em;
  font-family: inherit;
  border-radius: 200px;
  color: white;
  border: none !important;
  font-weight: 600;
  cursor: pointer;
}
button.button-secondary,
.button.button-secondary {
  background-color: transparent !important;
  box-shadow: inset 0px 0px 0px 3px #2466f3;
}
button:not(.button-secondary):not(.link),
.button:not(.button-secondary):not(.link) {
  background-color: #2466f3;
}
button.button-disabled,
.button.button-disabled {
  cursor: not-allowed;
  background-color: #828282;
  color: white;
  opacity: 0.6;
}
button:hover:not(.button-disabled):not(.link),
.button:hover:not(.button-disabled):not(.link) {
  background-color: rgba(36, 102, 243, 0.7764705882);
  transition: 300ms;
}
button.button-secondary:hover,
.button.button-secondary:hover {
  box-shadow: inset 0px 0px 0px 3px rgba(36, 102, 243, 0.7764705882);
}

a.transition:hover,
.link-hover.transition:hover {
  transition: 300ms;
}
a:hover,
.link-hover:hover {
  color: rgba(36, 102, 243, 0.7764705882);
}

.link-disabled {
  cursor: not-allowed !important;
  color: #828282 !important;
  opacity: 0.6 !important;
}

.dashboard-menu {
  border-bottom: rgba(36, 102, 243, 0.7764705882) 2px solid;
  padding: 20px;
}

table {
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 25px 0;
  font-size: 0.9em;
  word-break: normal;
  table-layout: fixed;
}

table th {
  background-color: rgba(36, 102, 243, 0.8509803922);
  color: #ffffff;
  text-align: left;
}

table th,
table td {
  padding: 12px 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

table tbody tr:nth-of-type(even) {
  background-color: rgba(110, 110, 110, 0.1568627451);
}

a,
.link {
  all: unset;
  cursor: pointer;
  text-decoration: none;
  color: #2466f3;
  font-weight: 600;
}

.slogan {
  color: #c8c8c8;
  margin-top: 10px;
  font-size: 1.1em;
  font-weight: 500;
}

.main {
  margin: 2rem 20rem;
  min-height: 72vh;
}

.global-flex-center-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.global-flex-center-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.focal-point {
  color: #2466f3;
  font-weight: bold;
  margin: 0;
  padding: 0 !important;
}

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

.icons-down {
  font-size: 1.5em;
  color: #2466f3;
  animation-name: icon-down;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

@keyframes icon-down {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
}
.footer {
  padding: 20px;
  background-color: #1e1e1e;
  text-align: center;
  color: #3e3e3e;
  align-content: center;
  justify-content: center;
  border-top: 2px solid #2466f3;
}

@media only screen and (max-width: 1315px) {
  .main {
    margin: 3rem 15rem;
  }
  .desktop-menu {
    display: none !important;
  }
  #menuToggle {
    display: flex !important;
  }
  .modal-body {
    min-width: 500px;
  }
  .new-line-for-type-writer-for-phone {
    display: block !important;
  }
}
@media only screen and (max-width: 800px) {
  .main {
    margin: 3rem 2rem !important;
  }
  .modal-body {
    min-width: 90vw !important;
  }
  .new-line-for-type-writer-for-phone {
    display: block !important;
  }
  .home-page-img-text-combo-reversed {
    width: 100% !important;
  }
  .home-page-img-text-combo {
    width: 100% !important;
  }
  .payment-plans {
    display: block !important;
  }
  .payment-plan {
    width: auto !important;
  }
}
@media only screen and (max-width: 1000px) {
  .main {
    margin: 3rem 10rem;
  }
  .type-writer-full-text {
    font-size: 1.5em;
  }
  .home-page-img-text-combo {
    flex-direction: column !important;
  }
  .home-page-img-text-combo-reversed {
    flex-direction: column-reverse !important;
  }
  .home-page-img-text-combo-item {
    min-width: 75% !important;
  }
  .home-page-img-text-combo-item-split {
    display: block !important;
  }
  .modal-body {
    min-width: 500px;
  }
  .payment-plans {
    display: flex;
    gap: 20px;
    text-align: left;
    justify-content: center;
  }
  .payment-plan {
    width: 25vw;
  }
}
.table::-webkit-scrollbar {
  height: 10px;
}

.table::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background-color: #2466f3;
  width: 2px;
}

.form input:not([type=checkbox]),
.form textarea,
form input:not([type=checkbox]),
form textarea {
  margin-bottom: 20px !important;
  border: 2px solid #3e3e3e !important;
}
.form input:not([type=checkbox]):last-of-type,
.form textarea:last-of-type,
form input:not([type=checkbox]):last-of-type,
form textarea:last-of-type {
  margin-bottom: 0 !important;
}
.form input[type=submit],
.form button,
form input[type=submit],
form button {
  margin-top: 20px;
  border: none !important;
}
.form input::autocomplete,
form input::autocomplete {
  background-color: black !important;
}

input[type=checkbox] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #141414;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  padding: 4px;
}

input[type=checkbox]::before {
  content: "";
  width: 0.35em;
  height: 0.35em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #2466f3;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type=checkbox]:checked::before {
  transform: scale(1);
}

input[type=checkbox]:checked {
  border-color: #2466f3;
}

input[type=checkbox]:focus {
  outline: none;
}

input[type=checkbox]:disabled {
  color: #3e3e3e;
  cursor: not-allowed;
}

.typewrite {
  margin: 0;
}

.typewrite > .wrap {
  animation: blink 1.5s linear infinite alternate !important;
}

@keyframes blink {
  0% {
    border-color: #2466f3;
  }
  50% {
    border-color: rgba(36, 102, 243, 0);
  }
  100% {
    border-color: #2466f3;
  }
}
#menuToggle {
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#menuToggle button {
  padding: 0;
  background: none;
}

#menuToggle input {
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span {
  display: flex;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  border-radius: 3px;
  z-index: 1;
}

.mobile-menu {
  position: fixed;
  width: 280px;
  height: 100vh;
  background-color: #1e1e1e;
  -webkit-font-smoothing: antialiased;
  left: -300px;
  top: 0;
  padding-top: 60px;
  padding-left: 20px;
  transition: 0.5s;
  opacity: 0;
}
.mobile-menu a,
.mobile-menu button {
  padding: 0 20px !important;
  display: block;
}

.mobile-menu-dark {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3215686275);
  z-index: 2;
  transition: 0.5s;
  opacity: 0;
  pointer-events: none;
  padding-top: 1000px;
}

.x {
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 500000;
  padding: 0;
  background: none;
  font-size: 22px;
}

.mobile-menu-dark.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-menu-dark.open .mobile-menu {
  left: 0 !important;
  opacity: 1;
}