:root {
  --primary-color: #0633ff;
  --secondary-color: #181818;
  --complementary-color: #162d3d;
  --menu-color: #f0f1f5;

  --boldB: "Barlow-Bold";
  --lightB: "Barlow-Light";
  --mediumB: "Barlow-Medium";
  --regularB: "Barlow-Regular";
  --semiB: "Barlow-SemiBold";
  --thinB: "Barlow-Thin";

  --space: 5vw;
  --box-size: 40vh;
  --huge: calc(185px + (50 - 25) * ((100vw - 300px) / (1900 - 300)));
  --big: calc(35px + (70 - 35) * ((100vw - 300px) / (1900 - 300)));
  --medium: calc(20px + (35 - 18) * ((100vw - 300px) / (1900 - 300)));
  --mediumHigh: calc(29px + (35 - 18) * ((100vw - 300px) / (1900 - 300)));
  --mediumHigher: calc(65px + (60 - 30) * ((100vw - 300px) / (1900 - 300)));
  --small: calc(16px + (20 - 14) * ((100vw - 300px) / (1900 - 300)));
  --smaller: calc(14px+ (14 - 10) * ((100vw - 300px) / (1900 - 300)));
  --mb: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
}

body {
  transition: background-color 2.5s ease-in-out;
}

@font-face {
  font-family: "Barlow-Bold";
  src: url(/frontend/web/css/fonts/Barlow/Barlow-Bold.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Barlow-Light";
  src: url(/frontend/web/css/fonts/Barlow/Barlow-Light.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Barlow-Medium";
  src: url(/frontend/web/css/fonts/Barlow/Barlow-Medium.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Barlow-Regular";
  src: url(/frontend/web/css/fonts/Barlow/Barlow-Regular.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Barlow-SemiBold";
  src: url(/frontend/web/css/fonts/Barlow/Barlow-SemiBold.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Barlow-Thin";
  src: url(/frontend/web/css/fonts/Barlow/Barlow-Thin.ttf);
  font-display: swap;
}

/* Typography */

h1 {
  font-size: calc(29px + (59 - 29) * ((100vw - 300px) / (1900 - 300)));
  font-family: var(--boldB);
  color: var(--secondary-color);
}

h2 {
  font-size: calc(25px + (50 - 25) * ((100vw - 300px) / (1900 - 300)));
  color: var(--secondary-color);
  font-family: var(--mediumB);
}

h3 {
  font-size: calc(17px + (25 - 12) * ((100vw - 300px) / (1900 - 300)));
  color: var(--secondary-color);
  font-family: var(--regularB);
}

h4 {
  font-size: calc(16px + (22 - 12) * ((100vw - 300px) / (1900 - 300)));
  color: var(--secondary-color);
  font-family: var(--regularB);
}

h5 {
  font-size: calc(16px + (18 - 10s) * ((100vw - 300px) / (1900 - 300)));
  color: var(--secondary-color);
  font-family: var(--regularB);
}

a {
  text-decoration: none !important;
}

p {
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1900 - 300)));
  font-family: var(--regularB);
}

.py-6 {
  padding-top: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
  padding-bottom: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
}

.p-7 {
  padding: var(--space);
}

.mb-6 {
  margin-bottom: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
}

.my-6 {
  margin-top: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
  margin-bottom: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
}

.mt-6 {
  margin-top: calc(40px + (80 - 40) * ((100vw - 300px) / (1900 - 300)));
}

.text-small {
  font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1900 - 300)));
}

.text-medium {
  font-size: calc(24px + (18 - 17) * ((100vw - 300px) / (1900 - 300)));
}

.text-big {
  font-size: calc(42px + (29 - 18) * ((100vw - 300px) / (1900 - 300)));
}

@media (min-width: 991px) {
  .padding-left {
    padding-left: 5vw;
  }

  .padding-right {
    padding-right: 5vw;
  }
}

.pl-2vw {
  padding-left: 2vw;
}

.pd-l5 {
  padding-left: 5vw;
}

svg {
  width: 100%;
  height: 100%;
  max-width: 64px;
  max-height: 64px;
}

/* Header */

header {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.menu_wrapper {
  height: 100vh;
  position: fixed;
  z-index: 999999;
  top: 0;
  bottom: 0;
  left: 100%;
  right: 0;
  background: var(--secondary-color);
  width: 100%;
  transition: all 0.25s linear;
  display: flex;
  border: 1px solid #767674;
  flex-direction: column;
}
.menu_wrapper > * {
  flex-grow: 1;
}
.menu_wrapper.in-view {
  left: 0;
  transition: all 0.25s linear;
}

.top {
  padding-left: 5vw;
  padding-right: 5vw;
}

.top img {
  max-height: 100px;
}

.links_wrapper {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  flex-grow: 7;
}

.links_wrapper li:hover {
  background-color: var(--primary-color);
  cursor: pointer;
  transition: all 0.45s linear;
}

.links_wrapper li:hover a {
  color: #fff;
  transition: all 0.45s linear;
}

.links_wrapper a {
  font-size: var(--big);
  color: #fff;
  font-family: var(--semiB);
}

.btn_wrapper .secondary_menu li a {
  font-size: var(--big);
  color: #fff;
}

.second_logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.second_logo .text_logo {
  color: #fff;
}

.btn_wrapper\>.\<nav.class\= {
  background-color: var(--primary-color);
  transition: all 0.45s linear;
}

.btn_wrapper\>.\<nav.class\=:hover li a {
  background-color: #fff;
  color: #000;
  transition: all 0.45s linear;
}

.btn_wrapper\>.\<nav.class\= ul {
  width: 100%;
  height: 100%;
}

.btn_wrapper\>.\<nav.class\= li {
  width: 100%;
  display: flex;
}

.btn_wrapper\>.\<nav.class\= a {
  display: block;
  height: 100%;
  padding-left: 5vw;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: calc(51px + (20 - 35) * ((100vw - 300px) / (1900 - 300)));
  font-family: var(--semiB);
  text-transform: uppercase;
  color: #fff;
}

.menu_wrapper .links_wrapper li {
  display: flex;
  align-items: center;
  padding-left: 5vw;
  border: 1px solid #767674;
  border-left: none !important;
}
.modal_trigger {
  cursor: pointer;
  padding-left: 2vw;
  padding-right: 2vw;
  display: flex;
  align-items: center;
}

.close_modal {
  cursor: pointer;
  padding: 1vw;
}
.close_modal svg {
  max-width: 50px;
  max-height: 50px;
  width: 100%;
  height: 100%;
}

.modal_trigger svg {
  max-width: 50px;
  max-height: 50px;
}

.modal_trigger svg path {
  fill: #181818;
}
.navbar {
  background-color: #f3f3f3;
}

.navbar .container {
  max-width: 100%;
}

.navbar-brand {
  padding-left: 2vw;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar {
  padding: 0;
  max-height: 13vh;
  height: 100%;
  min-height: 90px;
}

.navbar-expand-lg .navbar-nav .btn_wrapper .nav-link {
  background-color: var(--primary-color);
  color: #fff;
  height: 100%;
  padding-right: 3vw;
  padding-left: 3vw;
  padding-bottom: 2vw;
  padding-top: 2vw;
  font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1900 - 300)));
  font-family: var(--mediumB);
  text-transform: uppercase;
}

.text_logo {
  color: var(--secondary-color);
  font-family: var(--boldB);
  font-size: var(--smaller);
}

.logo {
  max-width: 50px;
  max-height: 50px;
}

.second_logo img {
  filter: saturate(0) invert(1) brightness(10);
}

/* Elements */

.border-left {
  border-left: 1px solid black !important;
}
.border-right {
  border-right: 1px solid black !important;
}
.border-top {
  border-top: 1px solid black !important;
}
.border-bottom {
  border-bottom: 1px solid black !important;
}

.box-size {
  min-height: var(--box-size);
}
.video-homepage .video-js {
  background-color: transparent;
}

.video-homepage {
  width: 100%;
  height: 70vh;
}

.video-homepage .video-js {
  width: 100%;
  height: 100%;
}

.video-homepage video {
  object-fit: cover;
  object-position: center;
}

.video-homepage .module-text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-left: 5vw;
}

.video-homepage .module-text h1 {
  font-family: var(--semiB);
  font-size: calc(61px + (60 - 40) * ((100vw - 300px) / (1900 - 300)));
  color: #fff;
}

.black-badge {
  padding: 0;
  background-color: #000000;
}

.black-badge .module-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.traits a {
  color: var(--secondary-color);
}

.black-badge h3 {
  white-space: nowrap;
  rotate: 90deg;
  margin: auto;
  color: #fff;
}

.traits {
  padding: 0;
}

.traits .module-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid black;
}

.traits p {
  flex-grow: 1;
  border-bottom: 1px solid black;
  font-size: calc(40px + (60 - 40) * ((100vw - 300px) / (1900 - 300)));
  margin: 0;
  display: flex;
  align-items: center;
  padding-left: 2vw;
}

.traits p:first-of-type {
  border-top: 1px solid #000;
}

.traits p:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.traits p:hover a {
  color: #fff;
}

.container {
  max-width: 100vw;
  padding: 0;
}

.btn-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  cursor: pointer;
  transition: all 0.35s linear;
}

.btn-center h3 {
  color: #fff;
  font-family: var(--mediumB);
}

.btn-center:hover {
  background-color: var(--secondary-color);
  transition: all 0.35s linear;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  font-family: var(--semiB);
  text-transform: uppercase;
  font-size: var(--medium);
  border: none;
  border-radius: none !important;
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  border: none;
  border-radius: none;
}

.gap-2rem {
  gap: 2rem;
}

.error-404 .module-image img {
  width: 100%;
  height: 100%;
  max-width: var(--mb);
  margin-left: 2rem;
  filter: invert(1);
}

/* homepage */

.hero {
  max-height: 70vh;
}

.simple-section .has-empty-div::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
}

.simple-section .text-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid black;
}

.simple-section .text-content h2 {
  padding-left: 5vw;
  border-right: 1px solid black;
  margin: 0;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.image-simple-section {
  padding: 0;
}

.simple-section .module-text:nth-child(2) p {
  padding-left: 5vw;
  padding-right: 5vw;
  flex-grow: 1;
  font-family: var(--regularB);
}

.simple-section-col {
  padding: 0;
}

.classes .has-empty-div::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
}

.classes .text-content {
  margin: 0;
  min-height: var(--box-size);
  display: flex;
  align-items: center;
  padding-left: 2vw;
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.classes .text-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-right: 1px solid;
}

.classes {
  border: 1px solid black;
  margin-right: 15px;
}

.classes .fixed-image img {
  min-height: 90vh;
  position: sticky;
  top: 0;
  object-fit: cover;
}

.classes .number h2 {
  font-size: var(--huge);
  color: var(--primary-color);
}

.classes .number-03 h2 {
  font-size: var(--huge);
  color: var(--primary-color);
}

.number-03 {
  border-left: 1px solid black;
}

.image-sticky {
  position: sticky;
  top: 0;
}

.number {
  border-left: 1px solid black;
}

.number > .module-text {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 90px;
  margin-bottom: 40vh;
}

.our-facillity > .module-text {
  display: flex;
  justify-content: center;
  position: sticky;
  margin-bottom: 0;
}

.number-03 > .module-text {
  margin-bottom: 0;
}

.full-row {
  grid-column: 1/3;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.empty-div {
  min-height: var(--box-size);
}
.book_wrapper a {
  min-height: var(--box-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-grid .full-row p {
  color: var(--secondary-color);
}

.box-grid .text-class-trainer {
  color: #fff;
  background-color: #181818;
  font-size: var(--medium);
  padding-left: 2vw;
}

.number-03 {
  display: flex;
  flex-direction: column;
  background-color: #181818;
  z-index: 9999;
}

.z-index-1 {
  z-index: -1;
}

.box-grid p {
  color: #fff;
}

.box-grid .text-class-trainer p {
  font-size: var(--small);
  color: #fff;
}

.box-grid .text-class-trainer h2 {
  color: #fff;
  font-family: var(--semiB);
  font-size: var(--medium);
  text-transform: uppercase;
}

.box-grid .text-class-trainer a {
  color: #fff;
}

.box-grid .module-text .anchor-br {
  font-size: var(--small);
  color: #ffffff70;
  font-family: var(--thinB);
}

.box-grid .module-text .anchor-br:before {
  content: "\f175 ";
  font-family: "FontAwesome";
  font-size: 30px;
  color: #ffffff70;
  margin-right: 10px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.team-grid .module-fickle {
  display: flex;
  flex-direction: column;
}

.team-grid .fickle-image {
  margin-right: 0;
  border-bottom: 1px solid #000;
}

.team-grid svg {
  width: 100%;
  height: 100%;
  max-height: 64px;
  max-width: 64px;
}

.team-grid .fickle-image img {
  height: 100%;
  width: 100%;
  max-height: inherit;
}

.team-grid .module-fickle-inline .fickle-item.fickle-title {
  padding-left: 2vw;
  padding-top: 30%;
}

.team-grid .module-fickle-inline .fickle-item.fickle-subtitle {
  padding-left: 2vw;
}

.team-grid .fickle-additional-html-code {
  padding-bottom: 30%;
  padding-left: 2vw;
  margin-top: 1vw;
}

.team-grid .fickle-content {
  order: -1;
}

.team-grid .fickle-content::before {
  content: "";
  width: 15px;
  border-top-width: 1px;
  border-top-style: solid;
}

.team-grid h4 {
  font-size: var(--medium);
  font-family: var(--boldB);
  text-transform: uppercase;
}

.team-grid h5 {
  font-size: var(--small);
  font-family: var(--regularB);
  color: #000;
  text-transform: capitalize;
}

.team-grid .module-fickle .fickle-image:hover img {
  transform: scale(1.03);
  transition: all 0.35s linear;
}

.team-grid .border-bottom {
  overflow: hidden;
  object-fit: contain;
}

.team-grid .module-fickle .fickle-image img {
  transition: all 0.35s linear;
}

.div-clear {
  background-color: #181818;
  width: 100%;
  min-height: 20vw;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 37vw;
}

.number .z-index-1 {
  margin-bottom: 0;
}

.z-inex9998 {
  z-index: 9998;
}

.gap-2rem .module-image img {
  max-width: 250px;
}

.text-class-trainer {
  color: #fff;
  background-color: #181818;
  font-size: var(--medium);
  padding-left: 2vw;
  width: 100%;
}

.min-height {
  min-height: 39vw;
}

.bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 22.7%;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.bg-trainers .full-row {
  grid-column: 1/4;
}

.bg-trainers .number {
  border: none;
}

.bg-trainers .bg-blue {
  background-color: var(--primary-color);
}

.bg-trainers .bg-grayish {
  background-color: #e3dede;
}

.bg-trainers .bg-grayish h2 {
  color: #000;
}

.bg-trainers .bg-black {
  background-color: #000;
  margin-top: 13vw;
}

.bg-trainers .bg-white {
  color: #000;
}

.bg-white h2 {
  color: #000 !important;
}

.bg-trainers h2 {
  color: #fff;
  font-family: var(--semiB);
  font-size: var(--medium);
}

.bg-trainers .bg-whie h2 {
  color: #000;
}

.module-white h2 {
  opacity: 0;
}

/* footer */

footer svg {
  max-width: 32px;
  max-height: 32px;
}

footer .module-fickle .fickle-title {
  margin: 0;
  margin-left: 5px;
}

footer .module-fickle .fickle-title h4 {
  font-size: var(--small);
}

footer .studio-text h3 {
  font-family: var(--boldB);
  font-size: var(--medium);
  color: var(--primary-color);
}

footer a {
  color: #000;
}

footer .copyright {
  background-color: var(--complementary-color);
}

footer .border-top {
  border-top: 1px solid #00000040 !important;
}

footer .copyright .module-text p {
  font-family: var(--mediumB);
  font-size: var(--small);
}

/* Our classes */

.our-traits {
  display: grid;
  grid-template-columns: repeat(2, 50% 25% 25%);
}

.our-traits .module-fickle-inline h3 {
  font-size: var(--medium);
  font-family: var(--semiB);
}

.our-traits .module-fickle-inline p {
  font-size: var(--small);
  font-family: var(--regularB);
}

.our-traits .fickle-image img {
  max-width: 100px;
  max-height: 100px;
}

.our-traits .fickle-image {
  margin-right: 3rem !important;
}

@media (max-width: 1386px) {
  .traits p {
    font-size: var(--mediumHigh);
  }
}

@media (max-width: 1148px) {
  .classes .number h2 {
    font-size: var(--mediumHigher);
    color: var(--primary-color);
  }
}

@media (max-width: 991px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid .module-fickle-inline .fickle-item.fickle-title {
    padding-left: 5vw;
  }
  .team-grid .module-fickle-inline .fickle-item.fickle-subtitle {
    padding-left: 5vw;
  }
  .bg-trainers .bg-black {
    margin-top: 0;
  }
  footer .footer-col {
    padding-left: 5vw;
  }
  .empty-div {
    display: none;
  }
  .hero {
    flex-direction: column;
  }
  .hero .video-homepage {
    height: 21vh;
  }
  .hero .black-badge h3 {
    rotate: 0deg;
  }
  .video-homepage .module-text h1 {
    font-size: var(--big);
    font-family: var(--semiB);
  }
  .box-grid .module-text h2 {
    padding-left: 5vw;
  }
  .our-facillity .bg {
    height: 100%;
  }
  .row-btn {
    display: block !important;
    width: 110%;
    height: 10vh;
    text-align: center;
  }
  .row-btn h3 {
    font-size: var(--big);
  }
  .number .module-text {
    margin-bottom: 0;
  }
  .box-grid .text-class-trainer {
    grid-column: 1/3;
    padding-left: 5vw;
  }
  .box-grid .module-code .trainer-class {
    padding-left: 5vw;
  }
}

@media (max-width: 650px) {
  .our-traits {
    grid-template-columns: repeat(1, 1fr);
    justify-items: start;
    padding-left: 10vw;
  }
  .our-traits .module-fickle {
    flex-direction: column;
    gap: 1.5rem;
    align-items: start !important;
  }
  .our-traits .fickle-image img {
    max-width: 500px;
    max-height: 500px;
  }
}

@media (max-width: 570px) {
  .team-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 356px) {
  .hero .video-homepage {
    height: 25vh;
  }
  .hero .traits a {
    font-size: var(--big);
  }
}

/* Custom scrollbar  */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--primary-color);
}
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 5px;
  border: 2px solid;
}