* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Century Gothic", Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 2.7rem;
  color: #343f1e;
}

.container {
  max-width: 120rem;
  margin: 0 auto;
}

/* HEADER */

header {
  background-color: #fdfaf1;
  padding: 3rem 0 3rem 0;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  display: none;
}

.logo img {
  width: 60%;
}

/* MENU */

.menu {
  list-style: none;
  display: flex;
}

.menu a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: #5e6357;
  font-weight: 600;

  display: inline-block;
  padding: 1.5rem 2.5rem;
}

.menu a:hover {
  color: #70a309;
}

.menu li:last-child a {
  border: 1px solid #5e6357;
  padding: 1.3rem 3.2rem;
  border-radius: 45px;
  margin-left: 2.5rem;
}

.menu li:last-child a:hover {
  border: none;
  border: 1px solid #70a309;
  background-color: #70a309;
  color: white;
}

.menu .active {
  color: #70a309;
}

/* GENERAL */

h2 {
  font-size: 4rem;
  line-height: 5.5rem;
  margin: 2.5rem 0;
  font-weight: 500;
}

.msg1 {
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 600;
}

.msg2 {
  text-transform: capitalize;
  font-size: 6rem;
  margin-top: 3.5rem;
  line-height: 8.5rem;
  font-weight: 500;
}

.cost {
  margin: 2rem 0 3rem 0;
  font-weight: 600;
}

.btn-green {
  text-transform: uppercase;
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background-color: #5c8607;
  padding: 1.5rem 3rem;
  border-radius: 45px;
  display: inline-block;
}

.btn-green:hover {
  background-color: #70a309;
}

.btn-white {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: #70a309;
  border: 2px solid #70a309;
  background-color: #fdfaf1;
  padding: 1.2rem 3rem;
  border-radius: 45px;
  display: inline-block;
}

.btn-white:hover {
  color: #fdfaf1;
  background-color: #70a309;
}

/* HERO SECTION */

.section-hero {
  background-image: url(images/Hero-BG-scaled-1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 20rem 0;
}

.hero {
  max-width: 140rem;
  display: grid;
  grid-template-columns: 45% auto;
  color: #fff;
  text-align: center;
}

.promo1 {
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 600;
}

.promo2 {
  text-transform: capitalize;
  font-size: 6.5rem;
  margin: 3.5rem 0 4rem 0;
  line-height: 8.5rem;
  font-weight: 500;
}

/* SECTION SCHEDULE */

.section-schedule {
  background-color: #fdfaf1;
  padding: 14rem 0;
}

.schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.program {
  width: 70%;
}

.program p:nth-child(1) {
  text-transform: uppercase;
  font-weight: 600;
}

.program p:nth-child(3) {
  font-weight: 500;
}

/* SECTION PLANS */

.section-plans {
  background-color: #e3e9d8;
  padding: 10rem 0 15rem 0;
}

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  row-gap: 6rem;
}

.plans div:nth-child(1) {
  grid-column: 1/3;
  text-align: center;
}

.plans div:nth-child(2),
.plans div:nth-child(4) {
  justify-self: end;
}

.plans div:nth-child(3),
.plans div:nth-child(5) {
  justify-self: start;
}

.coaching-services p:first-child {
  text-transform: uppercase;
  font-weight: 600;
}

.coaching-services h2 {
  margin: 3rem 0 0 0;
}

.offers {
  max-width: 100%;
  background-color: #fdfaf1;
  border-radius: 1.2rem;
  overflow: hidden;
}

.offers img {
  max-width: 100%;
}

.box {
  padding: 4rem 4rem 5rem 4rem;
}

.box p:nth-child(2) {
  font-size: 1.5rem;
  margin: 2rem 0;
}

/* SECTION COACH */

.section-coach {
  background-color: #fdfaf1;
  padding: 14rem 0;
}

.coach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.coach div:nth-child(1) {
  max-width: 95%;
}

.coach div:nth-child(2) {
  max-width: 70%;
}

.coach img {
  border-radius: 1.2rem;
  max-width: 100%;
}

.wellness p {
  margin: 3rem 0;
}

/* FOOTER */

footer {
  background-color: #e3e9d8;
}

.footer-top {
  padding: 10rem 0 7rem 0;
}

.footer-bottom {
  border-top: 1px solid #babdb5;
  padding: 1.5rem 0;
}

.top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.top .col4 {
  justify-self: end;
}

.top .col4 p {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.logo-img {
  max-width: 16rem;
  margin-bottom: 2rem;
}

footer h4 {
  margin-bottom: 1rem;
}

footer a {
  text-decoration: none;
  font-size: 1.5rem;
  color: #343f1e;
  display: inline-block;
}

footer a:hover {
  color: #70a309;
}

.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.bottom .col1 {
  font-size: 1.5rem;
}

.bottom .col2 {
  justify-self: end;
}

.social {
  font-size: 2rem;
  margin: 1.5rem 0.8rem 0 0;
}

/**************/
/* ABOUT PAGE */
/**************/

/* SECTION ABOUT */

.section-about {
  background-image: url(images/About-Hero-BG.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 22rem 0;
}

.about {
  display: grid;
  grid-template-columns: 45% 55%;
  color: #fff;
}

.about div:first-child {
  margin-left: 5rem;
}

/* SECTION HABITS */

.section-habits {
  background-color: #e3e9d8;
  padding: 15rem 0;
}

.habits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8rem;
  align-items: start;
}

.help {
  font-size: 1.6rem;
}

.help p:first-child {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 3rem;
  margin-bottom: 2.5rem;
  text-transform: capitalize;
}

/* SECTION SUPPORT */

.section-support {
  background-color: #fdfaf1;
  padding: 14rem 0;
}

.support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8rem;
  align-items: center;
}

.support img {
  border-radius: 1.2rem;
  max-width: 100%;
}

/* SECTION RATES */

.section-rates {
  background-color: #e3e9d8;
  padding: 14rem 0;
}

.rates {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 10rem;
  align-items: start;
}

.rates div {
  text-align: center;
}

.rates h3 {
  margin: 3rem 0 1.5rem 0;
}

.score {
  font-size: 4.5rem;
  color: #70a309;
}

/* SECTION WORK */

.section-work {
  background-color: #fdfaf1;
  padding: 14rem 0;
}

.work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8rem;
  align-items: center;
}

.work img {
  border-radius: 1.2rem;
  max-width: 100%;
}

.why p {
  margin-bottom: 3rem;
}

/*****************/
/* SERVICES PAGE */
/*****************/

/* SECTION SERVICES */

.section-services {
  background-image: url(images/Services-Hero-BG-1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 15rem 0 22rem 0;
}

.services {
  display: grid;
  grid-template-columns: 45% 55%;
}

.services .msg2 {
  font-size: 5.7rem;
  line-height: 7.8rem;
  margin-top: 2.8rem;
}

/* SECTION PERSONAL-PLANS */

.section-personal {
  background-color: #fdfaf1;
  padding: 14rem 0;
}

.personal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12rem;
  row-gap: 15rem;
  align-items: center;
}

.personal img {
  border-radius: 1.2rem;
  max-width: 100%;
}

.personal-plan .cost {
  padding-bottom: 2rem;
  border-bottom: 1px solid #babdb5;
}

.odd {
  font-weight: 600;
}

.even {
  margin-bottom: 3rem;
}

/*****************/
/* CONTACT PAGE */
/*****************/

.section-contact {
  background-image: url("images/Contact-Hero-BG-1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 14rem 0;
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12rem;
  align-items: start;
}

.phone,
.mail {
  margin: 1rem 0;
}

/* FORM */

form {
  background-color: #fdfaf1;
  border: 1px solid rgb(211, 203, 203);
  padding: 2rem 5rem 10rem 5rem;
  border-radius: 1.2rem;
}

form h2 {
  font-size: 3rem;
}

label {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

input {
  width: 100%;
}

input[type="text"],
textarea {
  font-family: "Century Gothic", sans-serif;
  border: 1px solid rgb(211, 203, 203);
  border-radius: 8px;
  padding: 1.5rem;
  font-size: 1.5rem;
}

input[type="text"] {
  margin-bottom: 2rem;
}

textarea {
  width: 100%;
  height: 15rem;
  margin-bottom: 3rem;
}

form .btn-green {
  border: none;
  font-weight: 500;
  font-size: 1.5rem;
  padding: 1rem 0;
}

form span {
  color: red;
  font-weight: 600;
}