* {
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  color: #fff;
  border: 0;
}

:root {
  --color-primary: rgb(105, 105, 138);
  --color-danger: rgb(250, 86, 86);
  --color-warning: rgb(216, 230, 25);
  --color-danger-deep: rgb(122, 28, 5);
  --color-white: #fff;
  --color-black: rgb(51, 21, 21);
  --color-bgg: rgb(28, 28, 46);
  --color-nature: rgb(158, 154, 154);
  --color-custom-blue: rgb(87, 87, 209);
  --color-light-blue: rgb(94, 94, 150);

  --transition: all 400ms ease;

  --container-width-sm: 94%;
  --container-width-md: 90%;
  --container-width-lg: 80%;
}
body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-bgg);
  color: var(--color-white);
  line-height: 1.65;
}

/* typography*/
.nav__logo a {
  font-size: 1.5rem;
  font-weight: 600;
}
.nav__container a {
  color: var(--color-white);
}
.nav__container a:hover {
  color: var(--color-danger);
  transition: var(--transition);
}
.list__container a {
  font-size: 1.1rem;
  font-weight: 400;
}
.container {
  width: var(--container-width-lg);
  margin: 0 auto;
}
h1,
h2,
h3,
h4 {
  line-height: 1.2;
}
h1 {
  font-size: 2.4rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.6rem;
}
h4 {
  font-size: 1.3rem;
}

section {
  padding: 5rem 0;
}
section h2 {
  margin-bottom: 3rem;
  text-align: center;
}
img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.btn {
  border: 1px solid transparent;
  font-weight: 500;
  background-color: var(--color-white);
  color: black;
  padding: 0.8rem 1.5rem;
  transition: var(--transition);
  border-radius: 3px;
}

.btn:hover {
  color: var(--color-white);
  border-color: var(--color-white);
  background: transparent;
}
.btn-pry {
  color: var(--color-white);
  background: var(--color-danger);
}

/* layout*/
nav {
  width: 100vw;
  height: 5rem;
  position: fixed;
  top: 0;
  z-index: 11;
  background-color: transparent;
}
/* this is a classlist from my script*/
.window-scroll {
  background: var(--color-light-blue);
}
.nav__container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list__item {
  display: flex;
  align-items: center;
  gap: 4rem;
}

nav button {
  display: none;
}

/* header*/

.header {
  height: 70vh;
  top: 5rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 5rem;
}

.header__secong-img img {
  border-radius: 10%;
}
.header__container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.header__first p {
  margin: 1rem 0 2.4rem;
}

/*categories*/
.section__categories {
  background-color: rgb(38, 38, 75);
  height: 65vh;
}
.section__categories h1 {
  margin-bottom: 2rem;
}
.categories__container {
  display: grid;
  grid-template-columns: 40% 60%;
}
.categories__first {
  margin-right: 4rem;
}
.categories__first p {
  margin: 0 0 3rem;
}

.categories__second {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.category__icon {
  padding: 0.6rem;
  background: var(--color-bgg);
  border-radius: 0.8rem;
}
.category {
  background-color: var(--color-light-blue);
  border-radius: 10%;
  padding: 2rem;
  transition: var(--transition);
  cursor: pointer;
}
.category:hover {
  box-shadow: 0 3rem 3rem rgba(143, 160, 233, 0.15);
}
.category h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1rem 0 0.7rem;
}
.category p {
  font-size: 0.8rem;
  line-height: 0.9rem;
}

/*common programmes*/
.programmes__section {
  margin-top: 8rem;
}
.programmes__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.program {
  text-align: center;
  border: 1px solid transparent;

  cursor: pointer;
  transition: var(--transition);
}
.program:hover {
  border-color: var(--color-primary);
  background: transparent;
}

.program__text {
  padding: 2rem;
}
.program__text p {
  margin: 1.2rem 0 2rem;
  font-size: 0.85rem;
}

/*questions*/
.questions__section {
  background-color: rgb(50, 50, 66);
}
.questions__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.question {
  display: flex;
  align-items: center;
  background-color: var(--color-light-blue);
  cursor: pointer;
  padding: 1.5rem;
  height: fit-content;
}
.question__icon {
  align-self: flex-start;
  font-size: 1.3rem;
}

.question h4 {
  line-height: 1.5rem;
  font-size: 1rem;
}
.question p {
  margin-top: 0.7rem;
  display: none;
}
.question.show p {
  display: block;
}

/*testimonials*/
.testimonials__container {
  margin-bottom: 3rem;
  position: relative;
  overflow-x: hidden;
}
.wrapper {
  margin: 0;
  padding: 0;
}
.testimonials__container h2 {
  margin-top: 4rem;
}

.testimonial {
  padding-top: 2rem;
}
.avatar img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1rem solid var(--color-light-blue);
  margin: 0 auto;
}
.testimonial__info {
  text-align: center;
}
.testimonial__body {
  padding: 2rem;
  margin-top: 2rem;
  background-color: var(--color-light-blue);
  position: relative;
}
.testimonial__body::before {
  width: 3rem;
  height: 3rem;
  content: '';
  display: block;
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: rotate(45deg);
  background: linear-gradient(
    transparent,
    var(--color-light-blue),
    var(--color-light-blue)
  );
}

/*footer section*/
footer {
  padding-top: 4rem;
  background: rgb(38, 38, 75);
  font-size: 0.95rem;
}
.footer__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
.footer__two,
.footer__three {
  display: flex;
  flex-direction: column;
}

.footer__two h4,
.footer__three h4 {
  margin-bottom: 1.15rem;
}

.footer__two ul,
.footer__three ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer__two li,
.footer__three li {
  margin-bottom: 0.65rem;
}

.footer__two li a:hover,
.footer__three li a:hover {
  color: var(--color-danger);
  border-bottom: 2px solid #fff;
  font-weight: 400;
}
.footer__socials {
  margin-left: 0;
  font-size: 1.3rem;
  margin-top: 1.5rem;
  padding-left: 0;
  display: flex;
}

.footer__socials i {
  color: #fff; /* Set the color of the social icons */
}

.footer__socials a:hover i {
  color: var(--color-danger); /* Change the color on hover as needed */
}

.copyright {
  margin-top: 3rem;
  text-align: center;
  padding: 1.3rem 0;
  border-top: 1px solid var(--color-light-blue);
  font-size: 1.3rem;
}
/*media queries for tablet*/
@media screen and (max-width: 1024px) {
  .container {
    width: var(--container-width-md);
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.6rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  h4 {
    font-size: 1.1rem;
  }
  nav button {
    font-size: 1.9rem;
    display: inline-block;
    cursor: pointer;
    background: transparent;
  }
  #closeBtn {
    display: none;
  }

  ul.list__item {
    right: 5%;
    position: fixed;
    top: 5rem;
    flex-direction: column;
    gap: 0;
    width: 18rem;
    height: fit-content;
    display: none;
  }
  .list__item li {
    width: 100%;
    height: 5.2rem;
    animation: animateNav 400ms linear forwards;
    transform-origin: top right;
    opacity: 0;
  }

  .list__item li a {
    width: 100%;
    height: 100%;
    background-color: var(--color-light-blue);
    box-shadow: -4rem 5.9rem 9.5rem rgba(0, 0, 0, 0.59);
    display: grid;
    place-items: center;
  }
  .list__item li a:hover {
    color: var(--color-white);
    background: var(--color-bgg);
  }

  @keyframes animateNav {
    from {
      transform: rotateZ(-90deg);
    }
    to {
      transform: rotateZ(0);
      opacity: 1;
    }
  }
  .list__item li:nth-child(2) {
    animation-delay: 200ms;
  }
  .list__item li:nth-child(3) {
    animation-delay: 400ms;
  }
  .list__item li:nth-child(4) {
    animation-delay: 600ms;
  }

  .header {
    height: 80vh;
    margin-bottom: 4.2rem;
  }
  .header__container {
    padding-bottom: 3rem;
    top: 0;
  }

  .section__categories {
    height: auto;
  }
  .categories__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .programmes__container {
    grid-template-columns: 1fr 1fr;
  }

  .question {
    padding: 1.35rem;
  }
  .questions__container {
    grid-template-columns: 1fr;
  }

  .footer__container {
    grid-template-columns: 1fr 1fr;
  }
}

/*media queries for phones*/
@media screen and (max-width: 600px) {
  nav {
    min-width: 100vw;
  }
  .container {
    width: var(--container-width-sm);
  }
  ul.list__item {
    right: 3%;
  }
  .header {
    height: 80vh;
  }
  .header__first h1 {
    font-size: 1.5rem;
    padding-top: 3rem;
  }
  .header__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0;
  }

  .categories__second {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .category {
    padding: 1rem;
  }
  .category__icon {
    display: inline-block;
    margin-top: 0.25rem;
  }
  .programmes__container {
    grid-template-columns: 100%;
  }

  .program__text p {
    margin: 0;
    font-size: 0.85rem;
  }
  .program__text {
    padding: 1rem;
  }
  .footer__container {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    text-align: center;
  }
  .footer__first p {
    margin: 1rem auto;
  }
  .footer__socials {
    justify-content: center;
  }
}