body {
  font-size: 1.1rem;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 99;
}

.header-sub-container {
  justify-content: space-between;
  width: 95%;
}

/* Logo */
.logo {
  color: var(--NATURAL);
}
/* End of Logo */

/* Navigation */
.navigation__li {
  margin-right: 15px;
}

.navigation__a {
  display: block;
  font-size: 1.3rem;
  color: var(--NATURAL);
}

.navigation__a::after {
  display: block;
  content: "";
  height: 4px;
  width: 0;
  background-color: rgb(247, 85, 85);
  transition: all 0.5s;
}

.active::after {
  display: block;
  content: "";
  height: 4px;
  width: 100%;
  background-color: red;
}

.navigation__a:hover::after {
  width: 100%;
}
/* End of Navigation */

/* Body of the site */

/* Hero Section */
.hero-container {
  /*position: absolute:*/
  background-image: url("../images/hero-image/img-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0px -200px;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.hero__details {
  height: inherit;
  width: inherit;
  flex-flow: row nowrap;
  justify-content: space-between;
  /* background-color: var(--PRIMARY-COLOR); */
  gap: var(--XS-N-1);
}

.hero__row-1 {
  height: 100%;
  width: 100%;
}

.hero__headings {
  text-align: center;
  padding: var(--XS-N-1);
  color: black;
}
/*End of Hero Section */

/* About Us */
.about-us {
  background-color: #fff;
}

.about-us__details ul {
  list-style-type: disc;
}

/* End of about Us */

/* Services */
.services-container {
  flex-flow: column nowrap;
  background-color: #eee;
}

.services__details-row-1 {
  width: 100%;
}

.services__prices {
  gap: 2rem;
}

/* Couching Prices */
.services__coaching-option,
.services__cost-per-session,
.services__cost-per-month {
  background-color: var(--NATURAL);
}

.coaching-option-heading,
.cost-per-session-heading,
.cost-per-month-heading {
  padding: var(--XS-N-1) var(--M-N-2);
  background-color: var(--SECONDARY-COLOR);
}

.coaching-option-info-1,
.coaching-option-info-2,
.cost-per-session-info-1,
.cost-per-session-info-2,
.cost-per-month-info-1,
.cost-per-month-info-2 {
  padding: var(--XS-N-1) var(--M-N-2);
}

.coaching-option-info-1,
.cost-per-session-info-1,
.cost-per-month-info-1 {
  border-bottom: 1px solid rgba(119, 119, 119, 0.3);
}

/* End of Couching Prices */

/* Coach Details */
.services__details-row-2 {
  margin-bottom: var(--XS-N-1);
}

.services__coach-details {
  grid-template-columns: 1fr 1fr 2fr;
  justify-content: start;
  align-items: start;
  gap: 1rem;
}

.coach-details__info-col-1,
.coach-details__info-col-2,
.coach-details__info-col-3 {
  height: 100%;
  width: 100%;
  background-color: var(--NATURAL);
  padding: var(--XS-N-1) var(--L-N-2-5);
}

.services__coach-details ul {
  list-style-type: disc;
}

.services__coach-details li {
  margin-bottom: 5px;
}

.coach-details__img {
  height: 90%;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(112, 112, 112, 0.3);
}

/* .coach-details__info-col-3 {
  flex-flow: row wrap;
} */
/* End of Coach Details  */
