/* Importar as variaveis  */
@import url("./global.css");

/*-- ------------ HEADER ---------- --*/
header {
  display: flex;
  justify-content: space-around;
  /* Horizontal | mantem o tamanho nas laterais */
  align-items: center;
  /* Vertical */
  padding: 33px 0px;
  background-color: var(--color-background-color);
  font-weight: var(--font-weight-semi-bold);
}

.nav-header ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-header ul li a {
  color: var(--color-netral-grey);
  font-weight: var(--font-body2-weight-regular);
  transition: 0.3s;
}

.nav-header ul li a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.container-btn-header img {
  margin-left: 10px;
}

/* ----------- FIM HEADER ----------- */

/* ----------- MAIN ----------- */

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

main img {
  margin-left: 63px;
}

.content-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-right: 30px;
  width: 441px;
  height: 332px;
}

.content-hero h1 {
  font-size: var(--font-headline-1-size);
  margin-bottom: 32px;
}

.content-hero p {
  margin-bottom: 32px;
  font-size: var(--text-2xl);
}

.content-hero-btn {
  display: flex;
  gap: 8px;
}

/* ----------- FIM MAIN ----------- */

/* ----------- SECTION POPULAR COURSES ----------- */
.section-popular-courses {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.container-popular-cousers-content {
  width: 463px;
  height: 116px;
  margin: 81px 0px 120px 0px;
}

.container-popular-cousers-content h2 {
  margin: 15px 0px 10px 0px;
}

.container-popular-cousers-content span {
  color: var(--color-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}

.container-popular-cousers-content p {
  color: var(--);
  font-size: var(--text-base);
}

.container-popular-cousers-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container-popular-cousers-img img {
  width: 688px;
  height: 363;
}

/* ----------- FIM SECTION POPULAR COURSES ----------- */

/* ----------- SECTION MOST POPULAR COURSES ----------- */
.section-most-popular-courses {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* border: 1px solid black; */
}

.container-most-popular-cousers-content {
  width: 463px;
  height: 134px;
  margin: 184px 0px 80px 0px;
}

.container-most-popular-cousers-content h2 {
  margin: 15px 0px 10px 0px;
}

.container-most-popular-cousers-content span {
  color: var(--color-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}

.container-most-popular-cousers-content p {
  color: var(--);
  font-size: var(--text-base);
}

.most-popular-courses-cards-container {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.most-popular-courses-cards-container article {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 328px;
  padding: 35px 16px;
  /* box-shadow: 0px 2px 10px rgba(171, 190, 209, 0.518); */
  box-shadow: 0 4px 6px rgba(171, 190, 209, 0.3);
}

.most-popular-courses-cards-container article:hover {
  box-shadow: 0px 8px 12px rgba(171, 190, 209, 0.5);
  transform: translateY(-8px);
}

.most-popular-courses-cards-container h3 {
  margin: 20px 0px 20px 0px;
}

/* ----------- FIM MOST POPULAR COURSES ----------- */

/* <!-- POPULAR COURSES --> */
.popular-courses {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-light);
  padding: 61px 0px 72px 0px;
}

.content-student {
  padding-left: 197.5px;

}

.content-popular {
  display: flex;
  align-items: center;
  gap: 120px;
}

.content-description {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 381px;
  gap: 35px;
  margin-bottom: 35px;

}

.content-description img {
  padding: 0px 287px 0px 0px;
}

.btn-learn1 a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-body-1-size);
  font-weight: 700;
  line-height: 24px;
  color: var(--color-primary-text);
}

/* <!-- FIM POPULAR COURSES --> */
/* <!-- CLIENT MATTERS --> */

.client-matters {
  background-color: var(--color-background-light);
  padding: 69px 0px;
}

.content-client-matters {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  padding-bottom: 80px;
}

.content-client-matters h6 {
  color: var(--color-primary-text)
}

.client-icons {
  display: flex;
  gap: 10px;
  position: relative;
  top: -64px;
  left: 104px;
  z-index: 2;
}

.danger-sale {
  position: relative;
  left: 20px;
  bottom: -44px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5 ease;
}

.danger-sale:hover {
  transform: scale(1.5);
  background-color: black;
}

.client-img {
  position: absolute;
  z-index: 1;
}

.client-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.content-sales {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0px 25px 35px;

}

.content-information {
  display: flex;
  gap: 131px;
}

.content-information a {
  color: var(--color-primary-text);
  text-decoration: none;
  font-weight: var(--font-weight-bold);

}

.content-evaluations {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--color-background-dark);
  gap: 5px;
  border-radius: 20px;
  width: 50px;
}

.content-evaluations p {
  display: flex;
  gap: 5px;
}

.content-evaluations p {
  color: var(--color-light-text);

}

.content-information-quality {
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.content-information-quality h5 {
  font-size: var(--text-base2);
  font-weight: var(--font-weight-bold);
}

.content-sales2 h5 {
  display: flex;
  gap: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.content-values {
  display: flex;
  gap: 5px;
  padding: 10px 0;
}

.content-values h5 {
  font-size: var(--text-base2);
  font-weight: var(--font-weight-bold);
}

.content-values h5:nth-of-type(1) {
  color: var(--color-netral-muted)
}

.content-values h5:nth-of-type(2) {
  color: var(--color-netral-second)
}

.btn-learn2 a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-body-1-size);
  font-weight: 700;
  line-height: 24px;
  color: var(--color-primary-text);
  padding: 10px 10px 10px 22px;
  border: 2px solid var(--color-primary);
  width: 144.14px;
  border-radius: 37px;
  transition: transform 0.3 ease;
}

.btn-learn2 a:hover {
  transform: scale(1);
  background-color: var(--color-primary);
  color: black;
}

/* <!-- FIM CLIENT MATTERS --> */



/* ----------- inicio Get Quality ----------- */


/* ----------- fim Get Quality ----------- */
.Get-Quality{
    display: flex;
    justify-content: center;
    
}
.Quality-Content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 160px 0px;
    gap: 80px;
}
.Quality-Education{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.Quality-Education p{
    text-align: center;
    width: 463px;
}
.Quality-Content-card{
    display: flex;
    justify-content: center;
    width: 1045px;
    gap: 30px;
}
.Quality-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 40px;
    gap: 35px;
    box-shadow: 0px 4px 6px rgba(171, 190, 209, 0.5);
    transition: 0.3s;
    
}
.Quality-card p{
    color: var(--color-netral-grey);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    text-align: center;
    
}
.Quality-card p span{
    color: var(--color-netral-grey);
    font-size: var(--font-headline-6-size);
    font-weight: var(--font-weight-bold); 
}
.vantagens-content p{
    color: var(--color-text);
    font-size: var(--font-body-1-size);
    font-weight: var(--font-headline-6-weight);
    text-align: start;
}
.Quality-card:hover{
    transform: scale(1.1);
}
.card-valor span{
    color: var(--color-primary);
    font-size: var(--font-headline-2-size);
    font-weight: var(--font-headline-2-weight);
}
.card-valor .small{
    color: var(--color-disable-element);
    font-size: var(--font-headline-6-size);
    font-weight: var(--font-headline-6-weight);
}

.Quality-card-principal{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 40px;
    gap: 35px;
    box-shadow: 0px 4px 6px rgba(171, 190, 209, 0.5);
    background-color: #2D4059;
    position: relative;
    margin-top: 31px;
    margin-bottom: 16px;
    transition: 0.3s;
}
.Quality-card-principal:hover{
    transform: scale(1.1);
}
.Quality-card-principal .new{
    display: flex;
    bottom: 840px;
    left: 260px;
    position: absolute;
    
}

.Quality-card-principal h2 span{
    color: var(--color-light-text);
    font-size:var(--font-headline-3-size) ;
    font-weight: var(--font-headline-3-weight);
}
.Quality-card-principal p{
    color: var(--color-light-text);
    font-size: var(--font-headline-6-size);
    font-weight: var(--font-headline-6-weight);  
    
}
#Organize{
    text-align: center;
}

#Slate-helps{
    color: var(--color-light-text);
    font-size: var(--font-headline-6-size);
    font-weight: var(--font-body-1-weight-regular);
    text-align: center;

} 
.card-valor{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.card-vantagens{
    display: flex;
    flex-direction: column;
    gap: 15px;

}
.vantagens-content{
    display: flex;
    align-items: center;
    width: 250px;
    gap: 4px;
}


/* ----------- inicio Most Popular Courses ----------- */

.Most-Courses{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }
  .Most{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 160px 0px;
    gap: 96px;
    
}
.Most-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 692px;
    gap: 10px;
}

.Most-content h3{
    color: var(--color-black);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    
}
.Most-content p{
    color: var(--color-netral-grey);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    width: 463px;
    
}
.cards{
    display: flex;
    justify-content: center;
    gap: 15px;
}
.Most-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 25px 0px 25px;
}

.card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 30px;
    width: 451px;
    gap: 15px;
}
.card-content p{
    text-align: center;
    width: 159px;
}
.profession{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 25px;
    gap: 5px;
}

/* ----------- fim Most Popular Courses ----------- */

/* ----------- inicio Newsletter ----------- */
.Newsletter{
    background-color: #2D4059;
    width: 100%;
    
}
.Newsletter-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 160px 0px;
    gap: 80px;
    
}
.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 691px;
    gap: 10px;
}
.content h3{
    color: var(--color-text-color);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
}
.content p{
    color: var(--color-text-color);
    width: 463px;
}

.content span{
  color: var(--color-primary);
}

.Newsletter-content form{
    display: flex;
}

.Newsletter-content input{
    width: 688px;
    padding: 10px;
    outline: none;
    border-radius: 4px 0px 0px 4px;    
}
.btn-Newsletter{
    background-color: var(--color-primary);
    color: var(--color-text-color);
    cursor: pointer;
    width: 117px;
    padding: 20px;
    border-radius: 0px 4px 4px 0px;
    
}
/* ----------- fim Newsletter ----------- */
/* ----------- inicio footer ----------- */
footer{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0px;
    
}
.footer-container{
    display: flex;
    justify-content: center;
    padding: 50px 0px;
    gap:30px;
}
.footer-navigation{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-navigation h2{
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}
.nav-Company ul{
    display: flex;
    flex-direction: column;
    font-size: var(--text-base);
    color: var(--color-second-text-color);
    font-weight: var(--font-weight-bold);
    gap: 10px;
}
.nav-Company li{
    cursor: pointer;
}
.nav-Company li:hover{
    color: var(--color-primary);
}

.footer-links-contacts div{
    display: flex;  
    justify-content: center;
    
}
.footer-links-contacts div a{
    display: flex;
    align-items: center;
    font-size: var(--text-base);
    color: var(--color-second-text-color);
    font-weight: var(--font-weight-bold);
    gap: 10px;  
}
.footer-links-contacts div a:hover{
    color: var(--color-primary);
}

.Right-Reserved{
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: #FAFAFA;
    gap: 213px;
    padding: 20px;    
}
.Right-Reserved p{
    color: var(--color-netral-grey);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
}
.socials{
    display: flex;
    justify-content: center;
    width: 236px;
    gap: 20px;
    
}
.socials img:hover{
    transition: 0.3s;
    transform: translateY(-5px);

}


/* ----------- fim footer ----------- */