p,
img,
button {
  z-index: 1;
}

/* button back to index */
.button-back {
  width: 25%;
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  height: auto;
  color: aliceblue;
  padding: 5px;
  margin: 5px auto;
  background-color: rgb(25, 118, 210);
  border: solid #1a4c77 2px;
}

.button-back:hover {
  background-color: rgb(17, 77, 138);
  border: solid #11324e 2px;
  color: aliceblue;
}

/* end button back to index */

.container {
  max-width: 1326px;
}

/* text and color type */
.raleway-700 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
}

.opens-sans-700 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.raleway-400 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}

.opens-sans-400 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.font-size {
  font-size: 14px;
}

.neutral-color {
  color: hsl(0, 0%, 100%);
}

.secondary-color {
  color: hsl(217, 30%, 85%);
}

/* end text and color type */

.row,
.col {
  z-index: 2;
}

/* --- first row --- */
.first-row {
  background-color: hsl(217, 28%, 15%);
}

/* nav edit */
.logo-img {
  width: 150px;
}

.item-right li {
  list-style: none;
}

.nav-link:hover {
  color: hsl(0, 0%, 100%);
  font-weight: 700;
  text-decoration: underline;
}

/* end nav edit*/

/* top - first element */
.img-top {
  width: 51%;
}

.size-title-top {
  font-size: 35px;
}

.size-paragraph-top {
  font-size: 17px;
}

.btn-lg {
  width: 17em;
  border-radius: 25px;
  font-size: 14px;
  height: 3.5em;
}

.btn-background {
  background: linear-gradient(to right, hsl(176, 68%, 64%), hsl(198, 60%, 50%));
}

.btn-background:hover {
  background: hsl(176, 68%, 64%);
  border-color: hsl(176, 68%, 64%);
  color: hsl(0, 0%, 100%);
}

.curv-img {
  z-index: 0;
}

.separation-first-row {
  margin-bottom: 170px;
}

/* end top - first element */

/* --- end first row --- */

/* --- second row --- */

.middle-bg-color {
  background-color: hsl(218, 28%, 13%);
}

.second-row-card {
  border-style: none;
}

.separation-row {
  margin-bottom: 130px;
}

/* --- end second row --- */

/* --- end third row --- */
.illustration {
  width: 34em;
}

.border-third-card {
  border-style: none;
}

.link-detail {
  color: hsl(176, 68%, 64%);
  display: inline-block;
  border-bottom: 1px solid hsl(176, 68%, 64%);
  padding-bottom: 2px;
}

.link-detail:hover {
  color: hsl(0, 0%, 100%);
  cursor: pointer;
  filter: grayscale(100%);
}

/* --- end third row --- */

/* --- fourth row --- */

/* quote */
.quotes {
  top: 2368px;
  z-index: 1;
  left: 80px;
}
/* end quote */

/* testimonials cards */
.testimonials-bg-card {
  background-color: hsl(219, 30%, 18%);
}

.box-shadow {
  box-shadow: 10px 10px 5px hsl(217, 28%, 15%);
}

.card-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.size-name-card-fourth {
  font-size: 9px;
  margin: 0px;
}

.size-status-card-fourth {
  font-size: 8px;
  margin: 0px;
}

.body-card-text {
  font-size: 13px;
}
/* end testimonials cards */

.separation-fourth {
  margin-bottom: 210px;
}

/* --- end fourth row --- */

/* --- fifth row --- */
.card-fifth-row {
  font-size: 14px;
  background-color: hsl(217, 28%, 15%);
  border-radius: 9px;
  top: 2790px;
  left: 250px;
  width: 58%;
  box-shadow: 7px 7px 5px rgba(17, 17, 17, 0.4);
  z-index: 3;
}

.btn-get-started {
  height: 3.5em;
  width: 14em;
  border-radius: 30px;
  font-weight: 700;
}

.input-fifth {
  height: 3.5em;
  border-radius: 2em;
  border-style: hidden;
  padding-left: 35px;
  color: hsl(217, 28%, 15%);
}

.input-fifth::placeholder {
  color: hsl(217, 30%, 85%);
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  padding-top: 5px;
}

.font-fith {
  font-size: 12px;
}
/* --- end fifth row --- */

/* --- six row --- */
.footer {
  height: 30em;
  background: hsl(216, 53%, 9%);
}

.circle-social {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* color: white; */
  border: 1px solid hsl(0, 0%, 100%);
  margin-left: 5px;
}

/* --- end six row --- */

footer {
  background: hsl(208, 92%, 53%);
  width: 98%;
  margin: 5px auto;
  padding: 5px 5px;
  border-radius: 15px;
}

.attribution {
  font-size: 12px;
  text-align: center;
  color: white;
}

.attribution a {
  color: hsl(182, 34%, 70%);
  font-weight: bold !important;
}

/* Mobile default: 375px */

@media screen and (max-width: 376px) {
  .button-back {
    width: 30%;
  }

  .font-size-mobile {
    font-size: 18px;
  }

  .font-nav-size {
    font-size: 12px;
  }

  .nav-link:hover {
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    text-decoration: underline;
  }

  .logo-footer-img,
  .logo-img {
    width: 30%;
  }

  .principal-col {
    /* width: 533px; */
    width: 375px;
  }

  .first-row {
    background: linear-gradient(
      to bottom,
      hsl(217, 28%, 15%) 0%,
      hsl(217, 28%, 15%) 60%,
      hsl(218, 28%, 13%) 60%,
      hsl(218, 28%, 13%) 100%
    );
  }

  .separation-first-row {
    margin-bottom: 140px;
  }

  .img-top {
    width: 85%;
  }

  .size-title-top {
    font-size: 22px;
  }

  .size-paragraph-top {
    font-size: 14px;
  }

  .btn-lg {
    width: 13em;
    border-radius: 35px;
    height: 2.5em;
  }

  .img-second-row {
    width: 20%;
  }

  .img-secu-second-row {
    width: 15%;
  }

  .illustration {
    width: 17em;
    margin-left: 8%;
  }

  .size-title-top {
    font-size: 18px;
  }

  .quotes {
    top: 24678px;
    left: 40px;
  }

  .font-size-fourth {
    font-size: 10px;
  }

  .separation-row {
    margin-bottom: 115px;
  }

  .card-fifth-row {
    top: 3100px;
    left: 28px;
    width: 80%;
    z-index: 3;
  }

  .btn-get-started {
    width: 20em;
  }

  .footer {
    height: 55em;
    z-index: 2;
  }

  .logo-footer-img {
    width: 40%;
  }
}