/* @import url(./normalize.css); */
@import url("https://use.typekit.net/xfy3ljd.css");
@import url(./_variables.css);
@import url(./_utilities.css);

/* Resets */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-size: var(--hw-body-font-size);
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: inherit;
}

ul,
li {
  list-style-type: none;
}

/* General styles */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li {
  font-family: "Montserrat", sans-serif;
  color: inherit;
}

b,
strong {
  font-weight: bold !important;
}

small {
  font-family: poppins, sans-serif;
  color: #101028;
}

/* Divider */
.divider {
  display: block;
  height: 14px;
  width: 100%;
}

.divider--small {
  height: 8px;
}

.divider > .background-line {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(131, 58, 180);
  background: linear-gradient(240deg, rgba(253, 29, 29, 1) 0%, rgba(252, 176, 69, 1) 25%, rgba(58, 180, 154, 1) 50%, rgba(29, 139, 253, 1) 75%, rgba(222, 69, 252, 1) 100%);
}

a.link-orange {
  color: var(--orange-1);
}

.list-group-item a.link-orange {
  color: initial;
}

a.link-orange,
.list-group-item.underline::before {
  border-bottom: 1px solid transparent;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
}

a.link-orange:hover,
.list-group-item.underline:hover a.link-orange,
.list-group-item.underline:hover::before {
  color: var(--orange-1);
  border-color: var(--orange-1);
}

li.list-style-disc {
  list-style-type: disc;
}

li.list-style-dash {
  list-style-type: "- ";
}

/* Background Components */
.bg-hw-img {
  position: relative;
}

/* Background Masking */
.bg-masking--blue {
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.bg-masking--blue::after {
  position: absolute;
  inset: 0 0 0 0;
  content: "";
  display: block;
  background-color: var(--mask-blue);
  z-index: -1;
}

/* Primary & Secondary Buttons */
.btn-wrapper {
  display: block;
  font-size: calc(0.35rem + 0.6vw);
  font-weight: 600;
  border-style: solid;
  border-width: 3px;
  border-color: transparent;
  padding: 0.85rem 2.9rem;
  border-radius: 38px;
  -webkit-border-radius: 38px;
  -moz-border-radius: 38px;
  -ms-border-radius: 38px;
  -o-border-radius: 38px;
  transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
}

.btn-wrapper.nav {
  padding: 0.75rem 2rem;
}

.btn-primary {
  display: block;
  color: var(--white);
  background-color: var(--main-blue);
}

.btn-primary:hover {
  color: var(--white);
  background-color: var(--main-blue-hover);
}

.btn-outline-primary {
  display: block;
  background-color: var(--white);
  border-color: var(--main-blue);
  color: var(--main-blue);
}

.btn-outline-primary:hover {
  background-color: var(--main-blue);
  border-color: transparent;
  color: var(--white);
}

/* Button color variations */
.btn-primary--golden-yellow {
  background-color: var(--golden-yellow);
}

.btn-primary--golden-yellow:hover {
  background-color: var(--golden-yellow-hover);
}

.btn-primary--white {
  color: var(--main-blue);
  background-color: var(--white);
}

.btn-primary--white:hover {
  background-color: var(--white-hover);
}

.btn-primary--golden-yellow--blue:hover,
.btn-primary--golden-yellow--blue {
  color: var(--main-blue);
}

.btn-outline-primary--golden-yellow {
  background-color: transparent;
  border-color: var(--golden-yellow);
  color: var(--golden-yellow);
}

.btn-outline-primary--golden-yellow:hover {
  color: var(--main-blue);
  background-color: var(--golden-yellow);
}

.btn-outline-primary--white {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn-outline-primary--white:hover {
  color: var(--main-blue);
  background-color: var(--white);
}

/* Company Logo */
.header__logo-wrapper {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 40%;
  pointer-events: none;
}

.header__logo {
  width: 100%;
  margin: 0 auto;
  object-fit: contain;
  aspect-ratio: 16/9;
}

/* Links custom styles */
.link {
  transition: all 300ms linear;
}

.link--main-blue:hover {
  color: var(--main-blue);
}

.link--golden-yellow:hover {
  color: var(--golden-yellow);
}

.logo {
  max-width: 225px;
  width: 100%;
  height: auto;
}

/* 
  Layout System
  Breakpoint	Range
  small	max-width: 575px
  medium	576px - 767px
  large	768px - 991px
  extra large	992px - 1024px
  extra extra large	1025px - 1439px
  extra extra extra large	1440px and up
  */
@media screen and (max-width: 575px) {
  .sm-hidden {
    display: none;
  }

  .sm-show {
    display: inline;
  }

  .btn-wrapper {
    font-size: calc(0.75rem + 0.6vw);
  }

  .card-img-wrapper {
    height: 240px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .md-hidden {
    display: none;
  }

  .md-show {
    display: inline;
  }

  .btn-wrapper {
    font-size: calc(0.8rem + 0.6vw);
  }

  .card-img-wrapper {
    height: 290px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .lg-hidden {
    display: none;
  }

  .lg-show {
    display: inline;
  }

  .btn-wrapper {
    font-size: calc(0.7rem + 0.6vw);
  }

  .card-img-wrapper {
    height: 320px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
  .xl-hidden {
    display: none;
  }

  .xl-show {
    display: inline;
  }

  .btn-wrapper {
    font-size: calc(0.41rem + 0.6vw);
  }

  .card-img-wrapper {
    /* height: 100%; */
    height: auto;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1439px) {
  .xxl-hidden {
    display: none;
  }

  .xxl-show {
    display: inline;
  }

  .mobile-hidden {
    display: inline;
  }

  .mobile-show {
    display: none;
  }

  .card-img-wrapper {
    height: 260px;
  }
}

@media screen and (min-width: 1440px) {
  .desktop-hidden {
    display: none;
  }

  .desktop-show {
    display: inline;
  }

  .mobile-show {
    display: none;
  }
}