@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 15px;
  font-family: "Inter", sans-serif;
}
.stats {
  font-family: "Lexend Deca", sans-serif;
}
:root {
  --main-bg: hsl(233, 47%, 7%);
  --card-bg: hsl(244, 38%, 16%);
  --accent: hsl(277, 64%, 61%);
  --main-pg: hsla(0, 0%, 100%, 0.75);
  --stats-hd: hsla(0, 0%, 100%, 0.6);
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.container {
  width: 100vw;
  height: 100vh;
  background: var(--main-bg);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.card {
  width: 70vw;
  background: var(--card-bg);
  border-radius: 7px;
  display: flex;
}
.card .desc {
  padding: 4rem;
  width: 50%;
}
.card .desc h1 {
  font-size: 2rem;
}
.card .desc h1 span {
  font-size: 2rem;
  color: var(--accent);
  font-weight: 700;
}


.card .desc p {
  color: var(--main-pg);
  margin: 1.5rem 0 3rem 0;
}


.card .stats {
  display: flex;
  justify-content: space-between;
}


.card .stats .number {
  font-size: 1.3rem;
  font-weight: 700;
}


.card .stats .name {
  text-transform: uppercase;
  color: var(--stats-hd);
  padding-top: 5px;
  font-size: 10px;
  letter-spacing: 1.5px;
}


.card .card-img {
  border-radius: 0 7px 7px 0;
  width: 50%;
  background: linear-gradient(
      0deg,
      hsla(277, 64%, 61%, 0.5) 0%,
      hsla(277, 64%, 61%, 0.5) 100%
    ),
    url(../images/image-header-desktop.jpg) center no-repeat;
  background-size: cover;
}
.copyright {
    color: var(--accent);
    transform: translateY(-140px);
    -webkit-transform: translateY(-140px);
    -moz-transform: translateY(-140px);
    -ms-transform: translateY(-140px);
    -o-transform: translateY(-140px);
}
.copyright a {
    color: var(  --main-pg);
    text-decoration: none;

}
/* &============================================== */
/* ^========@media (max-width: 375px)================ */
/* &============================================== */
/*=================== Responsive==================*/
@media (max-width: 767px) {
    .card {
      flex-direction: column-reverse;
      justify-content: space-between;
      width: 90vw;
      height: 90vh;
    }


    .card .desc {
      width: auto;
      height: 70%;
      text-align: center;
      padding: 1.5rem;
    }


    .card .stats {
      flex-direction: column;
    }


    .card .stats .companies,
    .card .stats .templates {
      margin-bottom: 2rem;
    }


    .card .card-img {
      border-radius: 7px 7px 0 0;
      width: 100%;
      height: 30%;
      background: linear-gradient(
          0deg,
          hsla(277, 64%, 61%, 0.5) 0%,
          hsla(277, 64%, 61%, 0.5) 100%
        ),
        url(../images/image-header-mobile.jpg) center no-repeat;
      background-size: cover;
    }
    .copyright {
        color: var(--accent);
        text-align: center;
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
}
}