@font-face {
  font-family: "ubuntu-regular";
  src: url("../fonts/Regular/ubuntu-v12-latin-ext_latin-regular.eot");
  src: url("../fonts/Regular/ubuntu-v12-latin-ext_latin-regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/Regular/ubuntu-v12-latin-ext_latin-regular.woff")
      format("woff"),
    url("../fonts/Regular/ubuntu-v12-latin-ext_latin-regular.ttf")
      format("truetype"),
    url("../fonts/Regular/ubuntu-v12-latin-ext_latin-regular.svg#ubunturegular")
      format("svg");
  font-weight: normal;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "ubuntu-500";
  src: url("../fonts/500/ubuntu-v12-latin-ext_latin-500.eot");
  src: url("../fonts/500/ubuntu-v12-latin-ext_latin-500.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/500/ubuntu-v12-latin-ext_latin-500.woff") format("woff"),
    url("../fonts/500/ubuntu-v12-latin-ext_latin-500.ttf") format("truetype"),
    url("../fonts/500/ubuntu-v12-latin-ext_latin-500.svg#ubunturegular")
      format("svg");
  font-weight: normal;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "ubuntu-700";
  src: url("./fonts/700/ubuntu-v12-latin-ext_latin-700.eot");
  src: url("./fonts/700/ubuntu-v12-latin-ext_latin-700.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/700/ubuntu-v12-latin-ext_latin-700.woff") format("woff"),
    url("./fonts/700/ubuntu-v12-latin-ext_latin-700.ttf") format("truetype"),
    url("./fonts/700/ubuntu-v12-latin-ext_latin-700.svg#ubunturegular")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------ */
/* GLOBAL */
/* ------------------------------------------------------ */

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

html {
  font-size: 100%;
}

body {
  font-family: ubuntu-regular, serif;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ------------------------------------------------------ */
/* blackdown */
/* ------------------------------------------------------ */
.blackdown {
  height: 100vh;
  max-height: 930px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../images/tlo.png);
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  position: relative;
  max-width: 1428px;
  margin: 0 auto;
  padding: 0 1rem;
}

.blackdown__woman {
  position: absolute;
  bottom: 0;
  right: 0;
}

.blackdown__logo-wrapper {
  margin: 5.5625rem auto 3.0625rem;
}
.blackdown__logo {
  max-width: 100%;
}


/* ------------------------------------------------------ */
/* card */
/* ------------------------------------------------------ */
.card {
  padding: 2.75rem 4rem;
  -webkit-box-shadow: 0px 0px 26px -5px rgb(0 0 0 / 18%);
  box-shadow: 0px 0px 26px -5px rgb(0 0 0 / 18%);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 4.625rem;
  background: #fff;
}

.card__logo-wrapper {
  position: relative;
  padding-bottom: 1.99rem;
  margin-bottom: 1.11rem;
}

.card__logo-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 230px;
  height: 1px;
  background-color: #f60;
}

.card__logo {
  max-width: 100%;
}

.card__heading {
  font-size: 2.4rem;
  line-height: 1.25;
  font-weight: normal;
  margin-bottom: 2rem;
}

.card__cta,
.card__cta:active,
.card__cta:visited {
  width: 200px;
  height: 50px;
  border-radius: 0.55em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background-color: #f60;
  border: 2px solid #f60;
  box-shadow: 0px 0px 19px -1px rgb(0 0 0 / 39%);
  transition: 0.3s all ease-in-out;
}

.card__cta:hover {
  color: #f60;
  background: #fff;
  transform: translateY(-3px);
  box-shadow: none;
}

.card__cta:focus {
  transform: translateY(-1px);
}

/* ------------------------------------------------------ */
/* domain */
/* ------------------------------------------------------ */
.domain {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.domain__name {
  margin-bottom: 0.625rem;
}
.domain__text {
  margin-bottom: 2rem;
}
.domain__shadow{
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 1439px) {
    .blackdown__woman {
      display: none;
    }
  }

@media(max-width: 580px){
    html{
        font-size: 80%;
    }
.card__heading {
    font-size: 1.625rem;
}
}