@import url("fonts.css");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: hsl(0, 0%, 100%);
  text-wrap: balance;
  font-size: 1em;
  font-family: "DMSans", sans-serif;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4 {
  font-family: "LexendDeca", sans-serif;
}
h3 {
  font-size: clamp(1rem, calc(6vw + 1rem), 2rem);
}

p {
  color: rgba(26, 22, 22, 0.771);
}

/*HEADER SECTION*/
header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 2rem 3rem 0 3rem;
  width: 100%;
}
header div {
  display: flex;
  align-items: center;
}
header ul {
  list-style: none;
}
header li {
  display: inline;
  margin: 24px;
}
header a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 10px;
  border-radius: 6px;
  transition: all 0.2s ease-in;
  display: inline-block;
}
header a:hover {
  background-color: rgb(9, 97, 9);
  color: white;
  font-weight: 500;
}
.hamburger {
  display: none;
  font-size: 24px;
  cursor: pointer;
}
/* Mobile styles for header */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  header {
    justify-content: space-between;
    padding: 1rem;
  }
  header h1 {
    font-size: 1.4rem;
  }
  header ul {
    position: absolute;
    top: 6rem;
    right: 1.4rem;
    background: #fff;
    flex-direction: column;
    width: 90%;
    display: none;
    background-color: beige;
    border-radius: 0.4rem;
    overflow: clip;
  }
  header li {
    border-bottom: 1px solid rgb(9, 97, 9);
    margin: 0;
  }
  header li:last-child {
    border: none;
  }
  header a {
    width: 100%;
    border-radius: 0px;
    padding: 1rem;
    text-align: center;
  }
  header ul.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}
/* header end */

/* utility classes */
.start-two {
  padding: 14px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 3px;
  background-color: rgb(9, 97, 9);
  text-decoration: none;
  width: 90%;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 20px 1.5rem -20px rgb(9, 97, 9);
}
.start-two:nth-child(1) {
  border: 1px solid rgb(9, 97, 9);
}
.start-two:nth-child(2) {
  background-color: white;
  color: rgb(9, 97, 9);
  border: 1px solid rgb(9, 97, 9);
}
.start-two:nth-child(2):hover {
  background-color: rgb(9, 97, 9);
  color: white;
}
.start-two:hover {
  background-color: white;
  color: rgb(9, 97, 9);
  transition: all 0.21s linear;
  transform: translateY(-4px);
}
.wrapper {
  max-inline-size: 960px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.text-center {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.btn {
  padding: 14px;
  background-color: rgb(9, 97, 9);
  color: white;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid rgb(9, 97, 9);
}
.btn:hover {
  color: rgb(22, 21, 21);
  background-color: beige;
}
.title {
  color: rgb(9, 97, 9);
  font-family: "PoppinsN", sans-serif;
}
.buttons {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 1.5rem;

  @media (min-width: 768px) {
    flex-direction: row;
    .start-two {
      width: 30%;
    }
  }
}
/* utility classes end */

/*SECTIONS*/
section {
  padding-bottom: 6rem;
}

/* hero section */
.hero {
  display: grid;
  place-items: center;
  padding: 0 1rem 1rem 1rem;

  & .ins {
    border: 1px solid rgb(9, 97, 9);
    display: inline-block;
    padding: 10px;
    border-radius: 1.6rem;
    color: rgb(9, 97, 9);
  }

  & h2 {
    font-size: clamp(1rem, calc(6vw + 1rem), 4rem);
    padding-bottom: 1rem;
    font-family: "PoppinsN", sans-serif;
  }

  @media (max-width: 768px) {
    text-align: center;

    & h2 {
      padding-top: 4rem;
    }
    & img {
      display: none;
    }
    & .ins {
      display: none;
    }
  }

  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
    padding: 4rem;
  }
}

/* hero end */

/* features section*/
.features {
  padding-top: 4rem;
}
.feature-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.feature-card {
  border: none;
  border-radius: 6px;
  transition: all 0.5s ease-in;
  box-shadow:
    1px 1px 7px -4px rgba(0, 0, 0, 0.152),
    -1px -1px 12px -1px rgba(0, 0, 0, 0.193);
  padding: 2rem;

  & h4 {
    font-size: 1.35rem;
    padding-bottom: 0.5rem;
  }
}
.feature-card:hover {
  transform: translateY(-15px);
}
.feature-card i {
  font-size: 2rem;
  margin-bottom: 0.5em;
  color: rgb(9, 97, 9);
}
/*courses section*/
.courses img {
  border-radius: 6px;
}
.courses-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.course-card {
  border: none;
  border-radius: 6px;
  transition: all 0.5s ease-in;
  overflow: clip;
  box-shadow:
    1px 1px 7px -4px rgba(0, 0, 0, 0.152),
    -1px -1px 12px -1px rgba(0, 0, 0, 0.193);
  padding: 1.2rem;
}
.course-card h4 {
  padding-block: 1rem;
  font-size: 1.5em;
  color: rgb(22, 21, 21);
}
.course-card p {
  padding-block: 1rem;
  font-size: 0.875em;
  color: rgba(26, 22, 22, 0.771);
}
.course-card:hover {
  transform: translateY(-15px);
}
.course-category {
  background-color: rgb(9, 97, 9);
  color: white;
  padding: 10px;
  font-size: 1em;
  border-radius: 1.5rem;
}
.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgba(26, 22, 22, 0.671);
}
/*section cta*/
.cta {
  text-align: center;
  margin-block-start: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  & h3 {
    padding-bottom: 2rem;
  }
}
.cta a {
  text-align: center;
  width: 60%;

  @media (min-width: 768px) {
    width: 20%;
  }
}
/* cta end */

/* footer */
footer {
  background-color: rgb(9, 97, 9);
  color: white;
  padding-block-start: 1.8rem;

  & p {
    color: rgba(255, 255, 255, 0.8);
  }
}
.footer-content {
  display: grid;
  gap: 0.7rem;
  padding-bottom: 1rem;
}
.footer-col h4::before {
  border-bottom: 3px solid white;
}
.footer-column {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.social-links ul {
  display: flex;
  gap: 0.7rem;
}
.social-links i {
  font-size: 1.3em;
}
.social-links i:hover {
  color: rgb(2, 200, 2);
}
.copyright {
  border-top: 2px solid rgb(2, 200, 2);
  text-align: center;
  padding-block: 2rem;
}
.contact-links li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
footer ul {
  list-style: none;
}
footer li {
  padding-block: 0.5rem;
}
footer a {
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
  text-decoration: none;
}
footer a:hover {
  color: rgb(2, 200, 2);
  background-color: none;
}