:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-purple-50: oklch(97.7% 0.014 308.299);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-6xl: 72rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
  --radius-lg: 0.5rem;
}
.container {
  width: 80%;
  margin-inline: auto;
}

section {
  padding: 80px 24px;
}
.muted {
  color: var(--color-gray-600);
}
.muted-card {
  color: var(--color-gray-700);
}
.card-bgc-color-blue {
  background-color: var(--color-blue-200);
}
.card-bgc-color-green {
  background-color: var(--color-emerald-200);
}
.card-bgc-color-purple {
  background-color: var(--color-purple-200);
}
.card-bgc-color-blue-light {
  background-color: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
}
.card-bgc-color-green-light {
  background-color: var(--color-emerald-50);
  border: 1px solid var(--color-emerald-200);
}
.card-bgc-color-purple-light {
  background-color: var(--color-purple-50);
  border: 1px solid var(--color-purple-200);
}
.bgc-grey {
  background-color: var(--color-gray-50);
}
.text-center {
  text-align: center;
}
a,
span {
  display: inline-block;
}
a {
  text-decoration: none;
  color: var(--color-gray-400);
}

img {
  width: 100%;
  display: block;
}

section .header h2 {
  font-size: 36px;
  margin-bottom: 24px;
}
section .header p {
  font-size: 20px;
  margin-bottom: 24px;
}
.header {
  margin-bottom: 64px;
}

ul,
.copy-right {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 20px;
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
  font-family: var(--font-sans);
}

.hero-section .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}
.hero-section .container .content h1 {
  font-size: clamp(50px, 8vw, 60px);
  line-height: 1.25;
  margin-bottom: 24px;
}
.hero-section .container .content p {
  font-size: 20px;
  margin-bottom: 32px;
  line-height: 1.8;
}

.hero-section .container .content .button span {
  padding: 16px 32px;
  margin-right: 16px;
  cursor: pointer;
  font-size: 18px;
  border-radius: var(--radius-lg);
  font-weight: 600;
}
.hero-section .container .button span.btn-start {
  color: white;
  background-color: #000;
  cursor: pointer;
  margin-bottom: 15px;
}
.hero-section .container .button span.btn-learn {
  background-color: white;
  cursor: pointer;
  border: 2px solid var(--color-gray-300);
}

.hero-section .container .img img{

  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}


/* End */

.Choose-section .container .Choose-content,
.reviews-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.card {
  padding: 32px;
  border-radius: 15px;
}
.more {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.more .img {
  border-radius: 15px;
  overflow: hidden;
  width: 50%;
  margin-top: 15px;
}

.more .caption {
  width: 46%;
}

.more .caption h3 {
  font-size: 30px;
  margin-bottom: 24px;
}
.more .caption .advantage {
  margin-bottom: 16px;
  padding-left: 24px;
  border-left: 4px solid black;
}
.more .caption .advantage h4 {
  font-size: 20px;
  margin-bottom: 8px;
}

.border-outside {
  --bgc: var(--color-blue-600);
  background-color: var(--bgc);
  width: 70px;
  height: 70px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.border-inside {
  background-color: white;
  width: 50%;
  height: 50%;
  border-radius: var(--radius-lg);
}

/* End */

/* Start */
.header-caption {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}
.avatar {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.over-review {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 48px;
  background-color: var(--color-slate-100);
  border-radius: 25px;
}
.over-review .related {
  width: 22.5%;
}
strong {
  display: block;
  font-size: 36px;
}

/* End */

/* Start */
label {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-700);
  display: block;
}
input,
select,
button {
  padding: 16px 24px;
  width: 100%;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  font-size: 20px;
}
form {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: 48px;
  width: 85%;
  margin: auto;
}
.item {
  margin-bottom: 24px;
}
form .fullname {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 15px;
}
.firstname,
.lastname {
  flex-grow: 1;
}
.footer-caption button {
  margin-bottom: 24px;
  padding: 16px 32px;
  font-size: 20px;
  font-weight: 700;
  background-color: black;
  color: white;
}

/* End */

/* Start */
footer {
  background-color: var(--color-gray-900);
  color: var(--color-gray-400);
  padding: 80px 24px;
}
footer h3,
footer h4,
footer h5 {
  color: white;
  margin-bottom: 16px;
}

.grid-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 25px;
  margin-bottom: 48px;
}

.FitCore h3 {
  font-size: 35px;
  font-weight: 700;
}
footer h4 {
  font-size: 25px;
  font-weight: 600;
}
footer h5 {
  font-size: 18px;
  font-weight: 500;
}
.FitCore p {
  margin-bottom: 24px;
  font-size: 18px;
  line-height: 1.8;
}

.social ul {
  justify-content: flex-start;
}

.quick-links ul {
  display: block;
}
.quick-links ul li,
.contact-info .item {
  margin-bottom: 12px;
}

.contact-info h5 {
  margin-bottom: 8px;
}

.copy-right {
  border-top: 1px solid var(--color-gray-700);
  padding-top: 32px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

footer a:hover {
  color:white;
}

/* End */
@media screen and (max-width: 992px) {
  .Choose-section .container .Choose-content,
  .reviews-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-section .container .button {
    display: flex;
    flex-flow: column wrap;
    text-align: center;
  }
  .more {
    flex-flow: column wrap;
  }
  .more .img{
    width: 100%;
  }

  .more .caption {
    width: 100%;
    font-size: 22px;
  }
  .more .caption h3 {
    font-size: 40px;
  }
  .more .caption .advantage h4 {
    font-size: 25px;
  }
  .over-review {
    flex-flow: row wrap;
  }
  .over-review .related {
    width: 49%;
  }
  section {padding: 40px 14px;}
  .container {width: 85%;}
}

@media screen and (max-width: 768px) {
  .hero-section .container {
    grid-template-columns: 1fr;
  }
  section {
    padding: 40px 12px;
  }
  .container {
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  form .fullname {
    flex-flow: column wrap;
  }
  form {
    width: 100%;
    padding: 24px;
  }
  .hero-section .container .img img{
  width: 100%;
}
  .grid-footer {
    grid-template-columns: 1fr;
  }
  .over-review {
    flex-flow: column wrap;
  }
  .over-review .related {
    width: 100%;
  }
  .more {
    grid-template-columns: 1fr;
  }
  .copy-right {
    flex-flow: column wrap;
  }
  .copy-right {
    font-size: 12px;
    font-weight: 400;
  }
  .Choose-section .container .Choose-content,
  .reviews-content {
    grid-template-columns: 1fr;
  }
  .copy-right {
    text-align: center;
  }
}