@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
:root {
  --color-primary: #e8661a;
  --color-primary-bright: #ff7e00;
  --color-secondary: #475d6b;
  --color-secondary-50: rgba(71, 93, 107, 0.5);
  --color-secondary-bright: #3f6778;
  --color-dark: #232e35;
  --color-light-10: rgba(71, 93, 107, 0.08);
  --color-light-20: rgba(71, 93, 107, 0.2);
  --color-primary-light-10: rgba(232, 102, 26, 0.1);
  --color-text: #475d6b;
  --color-footer-bg: #475d6b;
  --color-border: rgb(116.7415730337, 145.1685393258, 163.2584269663);
  --color-border-light: rgba(116.7415730337, 145.1685393258, 163.2584269663, 0.5);
  --color-success: #009d25;
  --color-danger: #f13c45;
  --max-width: 1280px;
  --gutter: 16px;
  --gutter-lg:32px;
  --section-y-gutter: 80px;
  --section-x-gutter: 80px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --box-padding-md:24px 28px;
  --box-padding:60px 44px;
  --shadow-lg:0 8px 8px rgba(0,0,0,.2);
  --shadow-xl:0 8px 16px rgba(0,0,0,.2);
}

*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

ul, ol {
  list-style: none;
}

body, input, textarea, button {
  color: var(--color-secondary);
  font-family: "Ubuntu", sans-serif;
}

body {
  background-color: #ffffff;
}

p {
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

a {
  cursor: pointer;
  text-decoration: none;
}

img {
  border: none;
  max-width: 100%;
}

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

.show-mobile {
  display: none;
}

.btn-primary {
  border: none;
  border-radius: 99px;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  overflow: hidden;
  padding: 10px 24px;
  position: relative;
  transition: all 0.25s;
  z-index: 0;
  background: var(--color-primary);
  color: #ffffff;
}
.btn-primary:after {
  border-radius: 99px;
  content: " ";
  display: block;
  height: 100%;
  left: -100%;
  opacity: 1;
  position: absolute;
  top: 0;
  transition: all 0.25s;
  width: 100%;
  z-index: -1;
}
.btn-primary:hover:after {
  left: 0;
  opacity: 1;
}
.btn-primary.btn-sm {
  font-size: 0.75rem;
  padding: 8px 16px;
}
.btn-primary.btn-lg {
  font-size: 1rem;
  padding: 16px 36px;
}
.btn-primary.btn-block {
  display: block;
  width: 100%;
}
.loading .btn-primary {
  background-image: url(../img/icons/loader.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 2rem;
  color: transparent;
  opacity: 0.8;
  pointer-events: none;
}
.btn-primary:after {
  background: var(--color-primary-bright);
}

.btn-secondary {
  border: none;
  border-radius: 99px;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  overflow: hidden;
  padding: 10px 24px;
  position: relative;
  transition: all 0.25s;
  z-index: 0;
  background: var(--color-secondary);
  color: #ffffff;
}
.btn-secondary:after {
  border-radius: 99px;
  content: " ";
  display: block;
  height: 100%;
  left: -100%;
  opacity: 1;
  position: absolute;
  top: 0;
  transition: all 0.25s;
  width: 100%;
  z-index: -1;
}
.btn-secondary:hover:after {
  left: 0;
  opacity: 1;
}
.btn-secondary.btn-sm {
  font-size: 0.75rem;
  padding: 8px 16px;
}
.btn-secondary.btn-lg {
  font-size: 1rem;
  padding: 16px 36px;
}
.btn-secondary.btn-block {
  display: block;
  width: 100%;
}
.loading .btn-secondary {
  background-image: url(../img/icons/loader.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 2rem;
  color: transparent;
  opacity: 0.8;
  pointer-events: none;
}
.btn-secondary:after {
  background: var(--color-secondary-bright);
}
.btn-secondary.active {
  background: var(--color-primary);
}
.btn-secondary.active:after {
  background: var(--color-primary-bright);
}

input[type=text], input[type=tel], input[type=email] {
  background-color: #ffffff;
  border: 2px solid var(--color-border-light);
  border-radius: 6px;
  display: block;
  font-size: 1rem;
  margin-bottom: 1rem;
  padding: 10px 16px;
  width: 100%;
}
input[type=text]::placeholder, input[type=tel]::placeholder, input[type=email]::placeholder {
  color: var(--color-secondary);
}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus {
  border-color: var(--color-secondary);
  outline: var(--color-secondary);
}
input[type=text]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=email]:focus::placeholder {
  color: var(--color-secondary-50);
}
input[type=text].error, input[type=tel].error, input[type=email].error {
  border-color: var(--color-danger);
}

textarea {
  background-color: #ffffff;
  border: 2px solid var(--color-border-light);
  border-radius: 6px;
  display: block;
  font-size: 1rem;
  margin-bottom: 1rem;
  padding: 10px 16px;
  width: 100%;
  min-height: 120px;
  resize: vertical;
}
textarea::placeholder {
  color: var(--color-secondary);
}
textarea:focus {
  border-color: var(--color-secondary);
  outline: var(--color-secondary);
}
textarea:focus::placeholder {
  color: var(--color-secondary-50);
}
textarea.error {
  border-color: var(--color-danger);
}

label {
  cursor: pointer;
  font-size: 1rem;
}

input[type=checkbox] {
  display: inline-block;
  margin: -2px 0.625rem 0 0.25rem;
  transform: scale(1.5);
  vertical-align: middle;
}

.form-input {
  margin-bottom: 1rem;
}

.input-error-message {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-top: -1rem;
  height: 1.25rem;
  padding: 0.125rem 0.25rem 0;
  text-align: right;
}
.form-input .input-error-message {
  transform: translateY(0.75rem);
  position: relative;
  z-index: 0;
}

.modal {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  inset: 0;
  opacity: 0;
  overscroll-behavior: contain;
  padding: var(--setion-y-gutter);
  position: fixed;
  transition: all 0.3s;
  visibility: hidden;
  z-index: 100;
}
.modal__container {
  background-color: #ffffff;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  max-width: var(--max-width);
  padding: var(--box-padding);
  position: relative;
  transition: all 0.25s ease 0.05s;
  transform: translateY(-20px);
  width: 100%;
}
.modal.open {
  opacity: 1;
  visibility: visible;
}
.modal.open .modal__container {
  transform: translateY(0px);
}
.modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  height: 100px;
  padding: 30px 35px;
  opacity: 0.7;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  z-index: 9;
}
.modal__content {
  height: 100%;
  overflow-y: auto;
  padding-right: 1rem;
}
.modal__content h2 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 3rem;
  position: relative;
}
.modal__content h2 span {
  color: var(--color-primary);
}
.modal__content h2:after {
  background-color: var(--color-primary);
  bottom: -10px;
  content: " ";
  height: 4px;
  left: 0;
  position: absolute;
  width: 120px;
}
.modal__content.text-content {
  font-size: 0.875rem;
  line-height: 1.5;
}
.modal__content.text-content h4 {
  margin-bottom: 0.5rem;
}
.modal__content.text-content p {
  margin-bottom: 1rem;
}
.modal__content.text-content a {
  color: var(--color-secondary-bright);
  text-decoration: underline;
}
.modal__content.contact {
  background-color: transparent;
  margin: -10px 0 -20px;
  padding: 10px 0 20px;
  position: static;
  z-index: 1;
}
.modal__content.contact:before {
  background-color: var(--color-light-10);
  content: " ";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.container {
  margin: 0 auto;
  max-width: var(--max-width);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

body {
  margin-top: 72px;
}

.header {
  background-color: #ffffff;
  box-shadow: var(--shadow-lg);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 99;
}
.header .container {
  align-items: center;
  display: flex;
  gap: var(--gutter);
  height: 100%;
  justify-content: space-between;
}
.header .logo img {
  height: auto;
  width: 240px;
}
.header .toggle-menu {
  display: none;
}
.header .main-menu-bg {
  display: none;
}

.main-menu {
  align-items: center;
  display: flex;
  gap: var(--gutter);
  justify-content: space-between;
}
.main-menu a {
  color: var(--color-secondary);
  display: block;
  padding: 8px;
  transition: all 0.25s;
}
.main-menu a:hover {
  color: var(--color-primary);
}
.main-menu a .icon {
  margin-left: 8px;
}
.main-menu ul {
  display: flex;
}
.main-menu li {
  margin-right: 16px;
  position: relative;
}
.main-menu ul ul {
  background-color: #ffffff;
  border-radius: 16px;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.25s;
  padding: 16px 8px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  box-shadow: var(--shadow-lg);
}
.main-menu ul ul li {
  margin-bottom: 8px;
  white-space: nowrap;
}
.main-menu li:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.footer {
  background-color: var(--color-footer-bg);
  padding-bottom: 1rem;
  padding-top: var(--section-y-gutter);
}
.footer .columns-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.footer-logo {
  transform: translateY(-18px);
}
.footer-logo img {
  width: 200px;
}
.footer-menu {
  color: #ffffff;
}
.footer-menu h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.footer-menu ul {
  margin-bottom: 1.5rem;
}
.footer-menu li {
  margin-bottom: 0.5rem;
}
.footer-menu li a {
  color: #ddd;
}
.footer-menu li a:hover {
  color: #fff;
}
.footer-menu .icon-placeholder {
  display: flex;
  align-items: start;
  gap: 8px;
}
.footer-menu .icon-placeholder img {
  color: #fff;
  fill: #fff;
  height: auto;
  margin-top: 2px;
  width: 18px;
}
.footer .note {
  border-top: 1px solid var(--color-border);
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 1.5rem;
  padding-top: 1rem;
  text-align: center;
}
.footer .note a {
  border-bottom: 1px solid var(--color-border);
  display: inline-block;
  margin: 0 8px;
}

.scroll-top {
  background: var(--color-secondary);
  border: none;
  border-radius: 199px;
  bottom: 60px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  height: 60px;
  opacity: 0;
  padding: 18px 20px 22px;
  position: fixed;
  right: 60px;
  transition: all 0.3s;
  visibility: hidden;
  width: 60px;
  z-index: 10;
}
.scroll-top img {
  transition: all 0.3s;
}
.scroll-top:hover img {
  transform: translateY(-4px);
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

section {
  padding-bottom: var(--section-y-gutter);
  padding-top: var(--section-y-gutter);
}
section .title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 3rem;
  position: relative;
}
section .title span {
  color: var(--color-primary);
}
section .title:after {
  background-color: var(--color-primary);
  bottom: -10px;
  content: " ";
  height: 4px;
  left: 0;
  position: absolute;
  width: 120px;
}

.intro {
  background-color: var(--color-dark);
  position: relative;
}
.intro .bg-intro {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.intro .box {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--box-padding);
  position: relative;
  width: 55%;
  z-index: 2;
}
.intro .title {
  color: #fff;
  font-size: 3rem;
}
.intro .title:after {
  bottom: -25px;
}
.intro h3 {
  color: #fff;
  font-weight: normal;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.intro-why .container {
  align-items: center;
  display: flex;
  gap: var(--section-x-gutter);
  justify-content: space-between;
}
.intro-why .box {
  background-color: var(--color-light-10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--box-padding);
}
.intro-why .services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter) var(--gutter-lg);
}
.intro-why .services .item {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
}
.intro-why .services .item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.intro-why .services .service-txt {
  color: var(--color-secondary-dark);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.1;
  padding-top: 1rem;
  text-align: center;
}
.intro-clients {
  background-color: var(--color-light-10);
}
.intro-clients .info {
  text-align: center;
}
.intro-clients .info .title {
  display: inline-block;
}
.intro-clients .info p {
  font-size: 1.25rem;
}
.intro-clients .clients {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 3rem;
  width: 100%;
}
.intro-clients .clients__item {
  background-color: var(--color-secondary-bright);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.intro-clients .clients__item:hover .clients__img img {
  transform: scale(1.07);
}
.intro-clients .clients__item:hover .clients__img:before {
  height: 135%;
  opacity: 1;
  width: 135%;
}
.intro-clients .clients__img {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.intro-clients .clients__img:before {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  content: " ";
  height: 20%;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.25s;
  width: 20%;
  z-index: 1;
}
.intro-clients .clients__img img {
  display: block;
  transition: transform 0.25s;
}
.intro-clients .clients__txt {
  background-color: var(--color-secondary-bright);
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 16px 0 20px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.company {
  background: url(../img/pictures/company.jpg?=1.1) center top no-repeat;
  position: relative;
  z-index: 0;
}
.company .bg-color {
  background-color: var(--color-light-20);
  inset: 0;
  position: absolute;
  z-index: 0;
}
.company .box {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 800px;
  padding: var(--box-padding);
  position: relative;
  z-index: 1;
}
.company .box p {
  line-height: 1.5;
}
.company .iso {
  align-items: start;
  display: flex;
  gap: 32px;
  margin-top: 3rem;
  max-width: 562px;
  width: 100%;
}
.company .iso li {
  flex-basis: 50%;
}

.products {
  padding-bottom: 0;
}
.products .heading {
  text-align: center;
}
.products .heading .title {
  display: inline-block;
  margin-bottom: 2rem;
}
.products .subtitle {
  color: var(--color-dark);
  font-size: 1.75rem;
  margin-bottom: 2rem;
}
.products p {
  line-height: 1.5;
  margin-bottom: 1rem;
}
.products p:last-child {
  margin-bottom: 0;
}
.products .bullets li {
  margin-bottom: 0.5rem;
  padding-left: 18px;
  position: relative;
}
.products .bullets li:before {
  background-color: var(--color-secondary-bright);
  border-radius: 99px;
  content: " ";
  height: 8px;
  left: 0px;
  position: absolute;
  top: 5px;
  width: 8px;
}
.products .content {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: var(--max-width);
  padding: var(--section-y-gutter) var(--gutter);
  width: 100%;
}
.products .content + .content {
  padding-top: 40px;
}
.products .box {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--box-padding);
  flex-basis: 50%;
}
.products .image {
  flex-basis: 50%;
}
.products .tabs__navigation {
  text-align: center;
}
.products .tabs__navigation button {
  margin: 0 0.125rem 1rem;
}
.products .tab {
  align-items: center;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  height: 0;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  transition: none;
  visibility: hidden;
}
.products .tab.open {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: all 0.25s;
}
.products .tab-core {
  background-image: url(../img/pictures/product_core.jpg);
}
.products .tab-sports {
  align-items: start;
  background-image: url(../img/pictures/product_sportsbook.jpg);
}
.products .tab-sports .box {
  flex-basis: 65%;
}
.products .tab-sports .image {
  flex-basis: 35%;
}
.products .tab-tracking {
  background-image: url(../img/pictures/product_livetracking.jpg);
}
.products .tab-tracking .box {
  flex-basis: 60%;
}
.products .tab-tracking .image {
  flex-basis: 40%;
}
.products .tab-casino {
  background-image: url(../img/pictures/product_casino.jpg);
}
.products .tab-casino .box {
  flex-basis: 60%;
}
.products .tab-casino .image {
  flex-basis: 40%;
}
.products .tab-mobile {
  background-image: url(../img/pictures/product_mobile.jpg);
}
.products .tab-mobile.open {
  min-height: 800px;
}
.products .tab-support {
  background-image: url(../img/pictures/product_support.jpg);
}
.products .tab-support.open {
  min-height: 800px;
}
.products .tab-payment {
  background-image: url(../img/pictures/product_payment.jpg);
}
.products .tab-payment .box {
  flex-basis: 65%;
  margin-bottom: 4rem;
}
.products .tab-payment .image {
  flex-basis: 35%;
}
.products .features__heading {
  margin: 0 auto 3rem;
  max-width: 900px;
  text-align: center;
}
.products .features__heading h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.products .features__list {
  display: grid;
  font-size: 0.9rem;
  gap: var(--gutter);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.products .features__item {
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: var(--box-padding-md);
}
.products .features__item h5 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
}
.products .providers__heading {
  margin-bottom: 1rem;
  text-align: center;
}
.products .providers__heading h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.products .providers__sort {
  MARGIN-BOTTOM: 1REM;
}
.products .providers__sort ul, .products .providers__sort li {
  display: inline;
}
.products .providers__sort button {
  margin: 0 0.125rem;
}
.products .providers__logos {
  display: grid;
  gap: 16px 32px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.products .providers__logos li {
  align-items: center;
  display: flex;
  justify-content: center;
  display: none;
}
.products .providers__logos li.show {
  display: flex;
}

.contact {
  background-color: var(--color-light-10);
  position: relative;
}
.contact .box {
  align-items: center;
  display: flex;
  gap: var(--section-x-gutter);
  margin: 0 auto;
  max-width: calc(var(--max-width) * 0.75);
  position: relative;
  z-index: 2;
}
.contact .form {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  flex-basis: 60%;
  padding: var(--box-padding);
  padding-bottom: 20px;
}
.contact .form .output {
  height: 40px;
  position: relative;
}
.contact .form .output__message {
  align-items: start;
  display: flex;
  font-size: 0.875rem;
  gap: 1rem;
  justify-content: start;
  left: 0;
  line-height: 1.2;
  opacity: 0;
  padding-top: 12px;
  position: absolute;
  top: 0;
  transition: all 0.5s;
  visibility: hidden;
}
.contact .form .output__message.success {
  color: var(--color-success);
}
.contact .form .output__message.error {
  color: var(--color-danger);
}
.contact .form .output img, .contact .form .output svg {
  height: auto;
  width: 20px;
}
.contact .form .output.done .output__message.success, .contact .form .output.fail .output__message.error {
  opacity: 1;
  visibility: visible;
}
.contact .form h2 {
  margin-bottom: 2rem;
}
.contact .form p {
  font-size: 0.875rem;
}
.contact .info {
  background-color: var(--color-dark);
  border-radius: var(--radius-lg);
  color: #ddd;
  flex-basis: 40%;
  padding: var(--box-padding);
}
.contact .info h3 {
  color: #fff;
  margin-bottom: 1rem;
}
.contact .info ul {
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
.contact .info li {
  margin-bottom: 0.5rem;
}
.contact .info .icon-placeholder {
  align-items: start;
  display: flex;
  gap: 14px;
}
.contact .info .icon-placeholder img {
  height: auto;
  margin-top: 2px;
  opacity: 0.6;
  width: 16px;
}
.contact .info .icon-placeholder a {
  color: #ddd;
  transition: color 0.25s;
}
.contact .info .icon-placeholder a:hover {
  color: #fff;
}
.contact .info-bg {
  background: var(--color-secondary);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 70%, var(--color-secondary) 100%);
  height: 120px;
  left: 55%;
  position: absolute;
  right: 0;
  top: calc(50% - 60px);
  z-index: 1;
}

@media (max-width: 1280px) {
  :root {
    --section-x-gutter:40px;
  }
  .intro .box {
    width: 80%;
  }
  .products .tab .box {
    flex-basis: 75%;
  }
  .products .tab .image {
    flex-basis: 25%;
  }
}
@media (max-width: 1023px) {
  /* Reset */
  :root {
    --section-y-gutter:20px;
    --section-x-gutter:20px;
    --box-padding:30px 30px;
  }
  .show-desktop {
    display: none;
  }
  .show-mobile {
    display: initial;
  }
  /* Buttons */
  .btn-sm-block {
    display: block;
    width: 100%;
  }
  /* Header/Footer */
  .header {
    padding-right: 60px;
  }
  .header .btn-primary, .header .btn-secondary {
    font-size: 0.75rem;
    line-height: 1;
    padding: 8px 16px;
  }
  .header .logo img {
    width: 160px;
  }
  .header .toggle-menu {
    background: transparent;
    border: none;
    display: block;
    height: 60px;
    position: absolute;
    right: 0;
    top: 5px;
    width: 60px;
  }
  .header .toggle-menu .open, .header .toggle-menu .close {
    height: 25px;
    left: 17px;
    position: absolute;
    top: 17px;
    transition: all 0.5s;
    width: 25px;
  }
  .header .toggle-menu .close {
    opacity: 0;
  }
  .mobile-menu .header .toggle-menu .open {
    opacity: 0;
    transform: rotate(180deg);
  }
  .mobile-menu .header .toggle-menu .close {
    opacity: 1;
    transform: rotate(180deg);
  }
  .header .main-menu nav {
    position: fixed;
    inset: 0;
    top: 72px;
    z-index: 97;
    transform: translateX(100%);
    transition: all 0.3s;
  }
  .mobile-menu .header .main-menu nav {
    transform: translateX(0%);
  }
  .header .main-menu ul {
    background-color: #fff;
    border-top: 1px solid var(--color-border);
    bottom: 0;
    display: block;
    overflow-y: auto;
    padding: var(--box-padding-md);
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s;
    width: 80%;
    z-index: 2;
  }
  .header .main-menu ul li {
    margin-bottom: 0.75rem;
  }
  .header .main-menu ul .icon {
    display: none;
  }
  .header .main-menu ul ul {
    border: none;
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    overflow: hidden;
    padding: 16px 8px 0px 32px;
    width: auto;
  }
  .header .main-menu .main-menu-bg {
    background: rgba(0, 0, 0, 0.7);
    display: block;
    opacity: 0;
    position: fixed;
    inset: 0;
    transition: all 0.2s;
    visibility: hidden;
    z-index: 1;
  }
  .mobile-menu .header .main-menu .main-menu-bg {
    opacity: 1;
    transition: all 0.3s ease 0.2s;
    visibility: visible;
  }
  .footer .footer-logo {
    margin-bottom: 1rem;
    text-align: center;
    transform: none;
  }
  .footer .footer-logo img {
    width: 120px;
  }
  .footer .footer-menu {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .footer .footer-menu h4 {
    font-size: 1.25rem;
  }
  /* Sections */
  section .title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  .intro {
    background: none;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .intro .bg-intro {
    order: 1;
    position: static;
  }
  .intro .title {
    font-size: 1.75rem;
  }
  .intro .container {
    background: url(../img/pictures/intro_mobile_grad.png?=1) center top no-repeat;
    background-size: cover;
    order: 2;
    padding-bottom: var(--section-y-gutter);
    padding-top: var(--section-y-gutter);
  }
  .intro .box {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
  }
  .intro-why .container {
    flex-direction: column;
  }
  .intro-why .services {
    padding: 20px var(--gutter) 0;
  }
  .intro-clients .clients {
    gap: var(--gutter);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products .tabs__navigation {
    padding: 0 var(--gutter) var(--gutter);
    text-align: left;
  }
  .products .tabs__navigation button {
    margin: 0.25rem 0.0625rem;
  }
  .products .content {
    padding-top: var(--gutter);
  }
  .products .tab.open {
    min-height: auto;
  }
  .products .tab .box {
    flex-basis: 100%;
  }
  .products .tab .image {
    flex-basis: 0%;
  }
  .products .features__list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .contact .box {
    flex-direction: column;
    padding: 0 var(--gutter);
    width: 100%;
  }
  .contact .box .form {
    flex-basis: auto;
    order: 2;
    width: 100%;
  }
  .contact .box .info {
    flex-basis: auto;
    order: 1;
    width: 100%;
  }
  .contact .box .output {
    height: 60px;
  }
  .scroll-top {
    bottom: 30px;
    height: 40px;
    padding: 11px 12px 13px;
    right: 30px;
    width: 40px;
  }
  /* Modal */
  .modal {
    padding: var(--gutter);
  }
  .modal__close {
    height: 50px;
    padding: 18px 15px;
    width: 50px;
  }
  .modal__container {
    height: 100%;
    padding: 20px;
  }
  .modal__content h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  .modal .contact .box {
    padding: 0;
  }
  .modal .contact .box .form {
    order: 1;
    padding: var(--gutter);
  }
  .modal .contact .box .info {
    order: 2;
  }
}

/*# sourceMappingURL=app.css.map */