@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: -ms-grid;
  display: grid;
  grid-template: "header header header header header header" 3em "img img img img img img" 90vh "main main main main main main" minmax(3em, auto) "contact contact contact contact contact contact" minmax(3em, auto) "footer footer footer footer footer footer" auto/1fr 1fr 1fr 1fr 1fr 1fr;
  font-family: "Roboto", sans-serif;
  background: #f4f4f4;
}

button {
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  color: #414141;
  background-color: #f7f52d;
}

button:hover, button:focus {
  opacity: 0.7;
}

button:hover {
  opacity: 0.8;
}

input {
  border: none;
  outline: none;
}

header {
  grid-area: header;
  background: transparent;
  color: #d0d1cc;
  font-size: 0.9rem;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5em 2em;
}

header h1 {
  color: rgba(247, 245, 45, 0.8);
  font-size: 1.5rem;
}

header h1 span {
  color: #d0d1cc;
  font-size: 1.5rem;
}

header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
}

header ul li {
  margin: 0.5rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

header ul li:hover {
  border-bottom: 1px solid #f7f52d;
}

.hero {
  grid-area: img;
  background: url(../public/hero.jpg);
  background-size: cover;
  background-position: center;
  height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.hero h1 {
  color: rgba(247, 245, 45, 0.8);
  font-size: 1.6rem;
  text-transform: uppercase;
  text-align: center;
}

.hero h1 span {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
}

.hero h1::before, .hero h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(247, 245, 45, 0.8);
}

.hero h1::before {
  margin: 0 auto 0.5em;
}

.hero h1::after {
  margin: 0.5em auto 0;
}

.main {
  grid-area: main;
  min-width: 0;
}

.main .card__container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(180px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 2em;
  gap: 2em;
}

.main .card__container .card {
  background: #fff;
  border-bottom: none;
}

.main .card__container .card img {
  max-width: 100%;
  min-width: 100%;
  height: 40vh;
  -o-object-fit: cover;
     object-fit: cover;
}

.main .card__container .card .card__body {
  margin: 0.5em 0;
  padding: 0.3em;
}

.main .card__container .card .card__body h3 {
  color: #414141;
  font-weight: bolder;
  text-align: center;
  text-transform: uppercase;
}

.main .card__container .card .card__body p {
  padding: 0.5em;
  font-size: 0.95rem;
  color: #7a7a7a;
  text-align: center;
}

.main .card__container .card .card__body p:last-child {
  display: none;
}

.main .card__container .card button {
  width: 100%;
  padding: 1em;
  font-weight: 600;
}

.main .trainer {
  margin: 3em 0;
  padding: 0 2em;
}

.main .trainer img {
  max-width: 100%;
  border: 12px solid #fff;
  -o-object-fit: contain;
     object-fit: contain;
}

.main .trainer .trainer__info {
  margin-top: 1em;
}

.main .trainer .trainer__info .trainer__profession {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.main .trainer .trainer__info .trainer__name {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.main .trainer .trainer__info .trainer__desc {
  margin: 1em 0;
  color: #7a7a7a;
  font-size: 0.8rem;
}

.main .trainer .trainer__info .exercises {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.main .trainer .trainer__info .exercises h6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.9rem;
}

.main .trainer .trainer__info .exercises h6 span {
  margin-right: 5em;
  font-size: 0.05rem;
  border: 10px solid #f7f52d;
  border-radius: 50%;
}

.main .offer {
  color: #fff;
  background-color: #000;
  margin: 3em 0;
  padding: 2em;
  text-align: center;
}

.main .offer h2 {
  font-size: 1rem;
}

.main .offer p {
  padding: 1em;
  font-size: 0.7rem;
}

.main .offer .input__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.main .offer .input__container input {
  border-top-left-radius: 0.2em;
  border-bottom-left-radius: 0.2em;
  color: #0a0a0a;
  padding: 0.8em 0.7em;
}

.main .offer .input__container button {
  width: 6em;
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  font-size: bolder;
}

.contact {
  background: #ffffff;
  grid-area: contact;
  margin-bottom: 3em;
}

.contact h1 {
  font-size: 2.5rem;
  margin: 1em auto 1em;
  text-align: center;
}

.contact form {
  width: 85%;
  margin: 0 auto;
  max-width: 50em;
}

.contact form label {
  display: block;
  font-weight: 900;
}

.contact form label input,
.contact form label textarea {
  display: block;
  width: 100%;
  padding: 0.75em;
  margin: 0.3em 0 1em;
  font-size: 1rem;
  background-color: #f9f9f9;
  border: 1px solid #f4f4f4;
  outline: none;
  border-radius: 2px;
}

.contact form label textarea {
  height: 7em;
  font-size: 1rem;
}

.contact form .button {
  display: block;
  font-size: 0.9rem;
  padding: 1em 3em;
  margin: 2em 0 2em auto;
  color: #ffffff;
  background-color: #000;
  cursor: pointer;
}

.contact form .button:hover, .contact form .button:focus {
  opacity: 0.7;
}

footer {
  grid-area: footer;
  color: #fff;
  background-color: #000;
  text-align: center;
  padding: 5em 0;
}

footer .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

footer .social-icons .social-icon {
  margin: 3em 0.7em;
  max-width: 4em;
  width: 15%;
  cursor: pointer;
}

footer .copyright::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 2.5em auto;
  width: 25%;
}

@media screen and (min-width: 460px) {
  .trainer {
    padding: 0 7em !important;
  }
}

@media screen and (min-width: 600px) {
  .hero {
    height: 95vh;
  }
  .hero h1 {
    font-size: 3rem;
  }
  .hero h1 span {
    display: block;
    font-size: 1rem;
  }
  .hero button {
    padding: 1em;
  }
  .trainer {
    padding: 0 10em !important;
  }
  .contact h1 {
    font-size: 3.5rem;
    margin: 0.7em auto;
  }
  .contact form {
    display: -ms-grid;
    display: grid;
        grid-template-areas: "name    email"
 "message message"
 "   .    button";
    gap: 0 1em;
  }
  .contact form .name {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: name;
  }
  .contact form .email {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: email;
  }
  .contact form .message {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: message;
  }
  .contact form .message textarea {
    height: 10em;
  }
  .contact form .button {
    font-size: 1.1em;
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: button;
  }
}

@media screen and (min-width: 685px) {
  .header {
    padding-top: 2em;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    font-size: 1rem;
  }
  .header h1 {
    font-size: 2rem;
  }
  .card__container .card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .card__container .card img {
    height: 100% !important;
    display: block;
  }
  .card__container .card .card__body {
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 251, 32, 0.6);
    height: 100%;
    -webkit-transition: top ease-in-out 250ms;
    transition: top ease-in-out 250ms;
  }
  .card__container .card .card__body h3 {
    margin-top: 1em;
  }
  .card__container .card .card__body p {
    color: #ffffff !important;
    text-align: justify !important;
    text-justify: inter-word;
  }
  .card__container .card .card__body p:last-child {
    display: block !important;
  }
  .card__container .card:hover .card__body {
    top: 0;
  }
  .card__container .card button {
    display: none;
  }
  .card__container .card:last-child {
    display: none;
  }
}

@media screen and (min-width: 756px) {
  main .trainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr minmax(350px, 2fr) minmax(300px, 2fr) 1fr;
        grid-template-columns: 1fr minmax(350px, 2fr) minmax(300px, 2fr) 1fr;
    gap: 2em;
    padding: 0em !important;
  }
  main .trainer img {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }
  main .trainer .trainer__info {
    margin-top: 0em !important;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
  }
  main .trainer .trainer__info .trainer__profession {
    font-size: 0.9rem !important;
  }
  main .trainer .trainer__info .trainer__name {
    font-size: 2rem !important;
  }
  main .trainer .trainer__info .trainer__desc {
    font-size: 0.9rem !important;
  }
  main .trainer .trainer__info .exercises {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  main .trainer .trainer__info .exercises h6 {
    margin: 0.6em 0;
    font-size: 1rem;
  }
  main .trainer .trainer__info .exercises h6 span {
    font-size: 0.1rem;
  }
  main .offer h2 {
    font-size: 1.5rem !important;
  }
  main .offer p {
    font-size: 0.8rem !important;
  }
}

@media screen and (min-width: 900px) {
  .card__container .card:last-child {
    display: block;
  }
}
/*# sourceMappingURL=main.css.map */