#section_cursos {
  padding-top: 2.875rem;
  padding-bottom: 5.625rem;

  & .wrapper {
    display: flex;
    flex-direction: column;
    gap: 52px;
    border-bottom: 1px solid #55555533;
    padding-bottom: 53px;
  }

  & h2 {
    font-size: 2rem;
    line-height: 1.2;
    color: var(--gray-600);
	text-align: center;

    & strong {
      color: var(--yellow-100);
    }
  }

  & .menu_cursos {
    border-top: 1px solid #55555533;
    border-bottom: 1px solid #55555533;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & button {
      padding: 1.125rem 1rem;
      font-size: 1.25rem;

      &:hover {
        color: var(--blue-100);
      }

      &.active {
        background-color: var(--blue-100);
        color: var(--white);
      }

      &.btn_pesquisa {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        background-color: var(--yellow-100);
        color: var(--white);
      }
    }
  }

  & .card_curso {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;

    &:hover {
      & .card_image > img:nth-child(2) {
        opacity: 1;
      }

      & .card_image > div {
        opacity: 1;

        & button {
          padding: 1rem 1.5rem;
        }
      }

      & .card_content {
        gap: 12px;
      }
    }

    & .card_image {
      position: relative;
      width: 100%;
      height: 300px;

      & > img:nth-child(2) {
        opacity: 0;
      }

      & > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s ease;
      }

      & > div {
        opacity: 0;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
        gap: 8px;

        & button {
          transition: all 0.5s ease;
          padding: 0.5rem 1rem;
          background-color: var(--white);
          color: var(--gray-600);

          &.active,
          &:hover {
            background-color: var(--blue-100);
            color: var(--white);
          }
        }
      }
    }

    & .card_content {
      display: flex;
      flex-direction: column;
      gap: 1.125rem;
      transition: all 0.5s ease;

      & .title_curso {
        font: var(--font-h4);
        font-weight: bold;
        color: var(--gray-600);
      }

      & .tag_curso {
        max-width: fit-content;
        text-transform: uppercase;
        padding: 10px;
        color: var(--blue-100);
        border: 1px solid var(--blue-100);
      }
    }
  }
}

#section_destaques {
  padding-bottom: 150px;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 82px;
  }

  & h2 {
    max-width: 938px;
    margin: 0 auto;
    font: var(--font-h2);
    color: var(--gray-600);
    text-align: center;

    & strong {
      color: var(--yellow-100);
    }
  }

  & .card_destaque {
    position: relative;
	overflow: hidden;
	  
	  & > img {
		  width: 100%;
		  height: 634px;
		  object-fit: cover;
		  transition: all .5s ease;
	  }
	  
	 &:hover > img {
		 transform: scale(1.1);
	 }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 232px;
      background: linear-gradient(0deg, rgb(0 0 0 / 80%), rgb(0 0 0 / 0%));
      z-index: 1;
    }

    & .card_content {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2rem;
      z-index: 2;
		width: 100%;

      & h3 {
        max-width: 50%;
        font: var(--font-h2);
        color: var(--white);
        z-index: 2;
      }

      & .btn_site {
        padding: 1.25rem 3.5rem;
        z-index: 2;
      }
    }
  }
}

#section_depoimentos {
  background-color: var(--yellow-100);
  color: var(--white);
  text-align: center;
  padding-top: 89px;
  padding-bottom: 154px;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 78px;
  }

  & h2 {
    font: var(--font-h2);
  }

  & h4 {
    font: var(--font-h4);
  }

  & .card_depoimento {
    background-color: var(--white);
    box-shadow: 0px 4px 9.4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 13px 25px 23px;
    color: var(--gray-900);
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .card_header {
      display: flex;
      flex-direction: column;
      gap: 10px;

      & .avaliacoes {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding-block: 10px;
        color: var(--yellow-100);
        font-size: 1.25rem;
      }

      & a:hover {
        color: var(--yellow-100);
      }
    }

    & .card_footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;

      & > img {
        max-width: fit-content;
      }

      & h5 {
        font-weight: bold;
        font-size: 1.25rem;
      }
    }
  }
}

#section_novidades {
  padding-top: 67px;
  padding-bottom: 95px;
  text-align: center;
  border-bottom: 1px solid #55555533;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 70px;
  }

  & h2 {
    font: var(--font-h2);
    color: var(--gray-900);
  }

  & .list_novidades {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 57px;

    & .card_novidade {
      display: flex;
      flex-direction: column;
      gap: 30px;

      & .card_content {
        display: flex;
        flex-direction: column;
        text-align: start;
        gap: 26px;

        & h4 {
          font-size: 1.125rem;
          font-weight: bold;
        }

        & a {
          font-size: 1.125rem;
          font-weight: bold;
          color: var(--yellow-100);

          &:hover {
            color: var(--blue-100);
          }
        }
      }
    }
  }
}

#section_duvidas {
  padding-top: 114px;
  padding-bottom: 75px;

  & > div > div > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    text-align: center;
  }

  & h4 {
    font: var(--font-h4);
    font-weight: bold;
    color: var(--gray-900);

    & span {
      color: var(--yellow-100);
    }
  }
}

@media (max-width: 1400px) {
  #section_cursos {
    & .menu_cursos {
      & button {
        font-size: 1rem;
      }
    }
  }

  #section_destaques {
    & .card_destaque {
      & .card_content {
		width: 100%;
        padding: 1rem;
        & h3 {
          font: var(--font-h4);
          font-weight: bold;
          max-width: 100%;
          flex: 1;
        }

        & a {
          font-size: 1rem;
          padding: 0.625rem 1.25rem;
        }
      }
    }
  }
}

@media (max-width: 1280px) {
	#section_destaques {
		& .card_destaque {
			& > img {
				height: 419px;
			}
		}
	}
}

@media (max-width: 992px) {
  #section_cursos {
    & .menu_cursos {
      & button {
        font-size: 0.875rem;
        &.btn_pesquisa {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  #section_destaques {
    & .list_destaques {
      grid-template-columns: 1fr;
    }
  }

  #section_cursos {
    padding-inline: 1.25rem;
    & select {
      background: var(--blue-100);
      color: var(--white);
      padding-block: 22px;
      text-align: center;
    }
  }
	
	#section_novidades {
		padding-inline: 2rem;
		& .list_novidades {
			grid-template-columns: 1fr 1fr;
		}
	}
}

@media (max-width: 500px) {
	
	#section_novidades {
		& .list_novidades {
			grid-template-columns: 1fr;
		}
	}
}