/* Add here all your css styles (customizations) */

body {
  color: #272b3e;
  background-color: #dfe5ee;
}

/* ================ Globals ================ */

a:hover, a:active {
  text-decoration: none;
}

.nav-item {
  border-bottom: 1px solid rgba(39, 43, 62, 0.2);
}

.nav-item.active, .nav-item:hover, .nav-item:focus {
  border-bottom: 1px solid #6b11ab;
}

.nav-link {
  color: #272b3e;
}

.g-letter-spacing-minus-3 {
  letter-spacing: -0.03em;
}

.g-line-height-125x {
  line-height: 125% !important;
}

.g-line-height-156x {
  line-height: 156% !important;
}

.g-min-height-345 {
  min-height: 345px;
}

.g-hidden
{
  display: none !important;
}

.g-width-8 {
  width: 8px !important;
  /* Q. point */
}

.g-width-155 {
  width: 155px !important;
  /* HeroArrowDesktop */
}

.g-width-650 {
  width: 650px !important;
  /* O */
}

.g-height-16 {
  height: 16px !important;
}

.g-brd-bottom-1 {
  border-bottom: 1px solid #bac4d5;
}

.g-mt-minus-200 {
    margin-top: -200px;
}

.g-bottom-100 {
  bottom: 7.14285rem;
}

.g-font-weight-450 {
  font-weight: 450 !important;
}



/* ================ Header ================ */
.u-header__section .navbar-nav:not([class*="u-main-nav-v"]) .open > .nav-link,
.u-header__section .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link,
.u-header__section .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.open,
.u-header__section .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.active,
.u-header__section--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .open > .nav-link,
.u-header__section--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link,
.u-header__section--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.open,
.u-header__section--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.active {
  color: #272b3e;
}

.u-header__section {
  background-color: #dfe5ee;
}

.u-header__section_t {
  background: transparent;
}

.navbar-brand {
  color: #272b3e;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.05em;
  line-height: normal;
}

.navbar-brand:focus,
.navbar-brand:hover {
  color: #272b3e;
}

.navbar > .container {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}



/* ================ Contact button ================ */

.btn-contact, .btn-contact:hover
{
  color: white;
  margin-left: 90px;
  height: 30px !important;
  padding-top: 4px !important;
  padding-bottom: 10px !important;
  padding-left: 12px !important;
  padding-right: 9px !important;
  font-size: 0.92856rem !important;
}

.btn-contact
{
  background-color: rgb(39, 43, 62);
  transition: background-color 250ms ease;
}

.btn-contact:hover
{
  background-color: #6b11ab;
}

/* ================ Form ================ */

.form-control,
.form-control:focus {
  color: rgba(39, 43, 62, 0.7);
}

.u-form-control-xl {
  padding: 1rem 1.25rem 1rem;
  font-weight: 450;
  font-size: 21px;
  letter-spacing: -0.03em;
}

button {
  border-width: 0px; background-color: transparent;
}

.btn-send, .btn-send:hover
{
  font-weight: 450;
  font-size: 102px;
  line-height: 120%;
}

.btn-send
{
  color: #272b3e;
  transition: color 250ms ease;
}

.btn-send:hover
{
  color: #6b11ab;
}




/* ================ Slogan ================ */

.q-slogan p {
  font-size: 48px;
  font-weight: 500;
  line-height: 84%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #272b3e;
  overflow: hidden !important;
}

.q-slogan p svg {
  max-width: 25px;
  padding-top: 26px;
  margin-left: 3px;
}

.q-slogan p svg rect {
  width: 7px;
  height: 7px;
}

.q-slogan p.q-slogan-plain {
  margin-left: -13px;
  overflow: hidden !important;
}

.q-slogan p.q-slogan-informed {
  margin-left: -4px;
}

.q-slogan p.q-slogan-solutions {
  margin-left: -2px;
}




/* ================ Hero Section ================ */

.q-main {
  background-color: #dfe5ee;
  background-image: none;
}

.q-hero {
    background-image: url(../../assets/img/bg/bg-q-light-mobile.jpg?9);
    background-position-y: 0px;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 610px;
    height: calc((var(--vh, 1svh) * 100) - 72px);

    /* fix bg */
    position: relative;
  }

  .q-hero--h {
      display: none;
  }

  .q-hero--v {
      display: block;
  }



/* ================ Expertise Section ================ */

#expertise {
  /* fix bg
    position: relative;
  */

  background-image: url(../../assets/img/bg/bg-q-dark.jpg?9);
  background-position-y: 0px !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

/*
#expertise::before {
  background-image: url(../../assets/img/bg/bg-q-dark.jpg);
  background-position-y: 0px !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
    content: ' ';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
    z-index: -1;
}
*/


.expertise-button-text {
  font-weight: 450;
  font-size: 32px;
  line-height: 125%;
  letter-spacing: -0.04em;
}

/* ================ SM ================ */

@media (min-width: 576px) {
  .q-slogan p {
    font-size: 48px;
    line-height: 83%;
  }

  .q-main {
    /* fix bg */
    position: relative;
}


/* fix bg */
.q-main::before {

  background-image: url(../../assets/img/bg/bg-q-light.jpg?9);
  background-position-y: 0px !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
    content: ' ';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
}



  .q-hero {

  }

}





/* ================ MD ================ */

@media (min-width: 768px) {
  .navbar-brand {
    font-size: 61px;
  }

  .q-slogan p {
      font-size: 100px;
   }

  .q-slogan p svg {
    max-width: 25px;
    padding-top: 40px;
    margin-left: 1px;
  }

  .q-slogan p svg rect {
    width: 10px;
    height: 10px;
  }

  .q-slogan p.q-slogan-plain {
    margin-left: -30px;
  }

  .q-slogan p.q-slogan-informed {
    margin-left: -8px;
  }

  .q-slogan p.q-slogan-solutions {
    margin-left: -3px;
  }

  .q-hero {
    background: none;
    background-image: none;
  }

  .btn-contact, .btn-contact:hover
  {
    color: white;
    margin-left: 90px;
    height: 41.00006px !important;
    padding-top: 5px !important;
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 12px !important;
    font-size: 1.28571rem !important;
  }

  .g-font-size-32--md {
  font-size: 2.28571rem !important;
}

  .g-bottom-60--md {
  bottom: 4.28571rem;
}

  .g-bottom-80--md {
  bottom: 5.71429rem;
}

  .g-mt-minus-200--md {
      margin-top: -200px;
  }

  .g-width-12--md {
  width: 12px !important;
  /* Q. point */
}

.g-height-22--md {
  height: 22px !important;
}

}




/* ================ LG ================ */

@media (min-width: 992px) {
  .q-slogan p {
   font-size: 100px;
  }

  .q-slogan p svg {
    max-width: 25px;
    padding-top: 50px;
    margin-left: 1px;
  }

  .q-hero {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
  }

  .g-mt-minus-130--lg {
    margin-top: -130px;
  }

  .g-left-45--lg {
    left: 3.214284rem;
  }

  .g-right-15--lg {
   right: 1.07143rem;
  }

  .g-width-650--lg {
    width: 650px !important;
  /* O */
  }

}

@media (min-width: 992px) and (max-height: 800px) and (orientation: landscape) {
  .expertise-button-text {
    font-size: 28px;
  }
}

/* ================ XL ================ */

@media (min-width: 1200px) {
  .q-slogan p {
    font-size: 120px;
  }

  .g-mt-minus-130--xl {
    margin-top: -130px;
  }

  .g-left-75--xl {
    left: 5.35714rem;
  }

  .g-right-30--xl {
    right: 2.14286rem;
  }

  .g-font-size-44--xl {
    font-size: 3.14286rem !important;
  }

  .g-font-size-48--xl {
    font-size: 3.42857rem !important;
 }

}


@media (min-width: 1200px) and (max-height: 800px) and (orientation: landscape) {
  .expertise-button-text {
    font-size: 28px;
  }
}



/* ================ HR ================ */

@media (max-height: 700px) and (orientation: landscape) {

    .q-main {
  background-color: #dfe5ee;
  background-image: url(../../assets/img/bg/bg-q-light.jpg?9);
  background-position-y: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

  .q-hero {
      min-height: 440px;
      background: none;
      background-image: none;
    }

  .q-hero--h {
      display: block;
    }

  .q-hero--v {
      display: none;
  }

  .q-slogan p {
      font-size: 72px;
      line-height: 84%;
   }

  .q-slogan p svg {
    max-width: 25px;
    padding-top: 39px;
    margin-left: 1px;
  }

  .q-slogan p svg rect {
    width: 7px;
    height: 7px;
  }

  .q-slogan p.q-slogan-plain {
    margin-left: -17px;
  }

  .q-slogan p.q-slogan-informed {
    margin-left: -5px;
  }

  .q-slogan p.q-slogan-solutions {
    margin-left: -3px;
  }

  .q-clients {
    height: fit-content;
    min-height: 45vh;
  }

  .q-you {
    height: fit-content;
    min-height: 55vh;
  }


}