@import url(../styles/global.css);

/* Header */
header{
    display:flex; justify-content: center; align-items: center;
    padding:20px 193px; gap:200px;
}

#logo{display:flex; align-items: center; gap:11px;}
#logo>p{font-size: 22px;}

#navBar{
    display:flex; justify-content: space-evenly;
    gap:40px;
}

#navBar>a{color:var(--gray2);}
#navBar>a:nth-child(1){color:white;}

#headerButtons{display:flex; gap:16px;
text-transform: capitalize;}

#logIn{padding:10px 24px;}
#tryForFree{padding:10px 24px; 
    background-color: var(--primaryGreen); color: black; 
    border-radius: 40px; width: fit-content;}

/* main */

main{
    display:flex; justify-content: center; align-items: center;
    padding: 60px 166px; gap:100px;
}

#batch{
    display:flex; align-items: center; 
    border: 2px solid var(--gray2);
    border-radius: 40px; 
    padding: 10px 12px; 
    width: fit-content; gap:12px;
    margin: 20px 0px;
}

#batch>p{text-transform: capitalize; color: var(--primaryGreen);}

#mainText{width: 40%; margin: 20px 0px;}

#mainText>h1{
    font-size: 22px; text-align: center;
}
#mainText>p{color:var(--gray1);}

#mainButtons{display:flex; align-items: center; gap:20px; margin: 20px 0px;}

#getStarted{background-color: var(--primaryGreen); color: black; padding: 14px 24px; border-radius: 40px; font-size: 18px; width: fit-content;}

#watchVideo{display: flex; align-items: center;
    background-color: black; border: 2px solid var(--gray1); border-radius: 40px;
    padding: 14px 24px;
    font-size: 18px;}

/* partners */

#partners{
    display:flex; flex-direction: column; justify-content: center; align-items: center;
    background-color: var(--gray4);
    padding:40px 329.5px;
}

#partners>p{
    color: var(--gray1); margin-bottom:40px;
}

#partnersLogos{display:flex; gap:40px; align-items: center; justify-content: center;}

/* features */

#features{
    display:flex; flex-direction: column; justify-content: center;align-items: center; padding: 40px 144px;
}

#batchALT{
    display:flex; flex-direction: column;align-items: center; 
    border: 2px solid var(--gray2);
    border-radius: 40px;
    color: var(--primaryGreen); 
    padding: 10px 12px; 
    width: 15%; gap:12px;
    margin: 20px 0px;
}

#featuresText{display:flex; flex-direction: column; align-items: center; margin-bottom:60px;}

#featuresText>h2{font-size: 3em; margin: 20px 0px; text-transform: capitalize;font-weight: 300;}

#featuresText>p:nth-child(3){color:var(--gray1); width:70%; text-align: center;}

#featuresGrid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:20px;
}

.featuresCard{
    display:flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 36px;
    background-color: var(--gray4); border: 2px solid var(--gray3); border-radius: 14px;
}

.featuresCard>img{
    padding:18px 161px;
}

#featuresCardText{display:flex;align-items: center;flex-direction:column;gap:16px; text-align: center; width: 80%;}

#featuresCardText>p:nth-child(2){
    color: var(--gray1);
}

/* statistics */

#statistics{display:flex; flex-direction: column; justify-content: center;align-items: center; padding: 60px 144px; background-color: var(--gray4);}

#statisticsGrid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:72px;
}

.statisticsCard{
    display:flex; flex-direction: column;align-items: center;
}

.statisticsCard>h2{font-size: 3em; color: var(--primaryGreen);}

.statisticsCard>p{color: var(--gray2); text-transform: capitalize;}

/* future */ /* tem algo errado aqui (fixed)*/

#future{display:flex; flex-direction: column; justify-content: center;align-items: center; padding: 60px 144px; background-color: black;}

#futureAside{display:flex; justify-content: center; align-items: center; padding:0px 82px; gap:90px;}

#futureAside>img{width: 506px;}

#articleRow{display: flex; flex-direction: column; gap:22px;}

.futureCard{
    display:flex; background-color: var(--gray4); padding: 30px 12px; border: 2px solid var(--gray2); border-radius: 14px; width: 624px;height: 156px;
}

.futureCard>img{width: 15%;}

#futureCardText>p:nth-child(1){margin:10px 0px 0px 10px;}

#futureCardText>p:nth-child(2){color: var(--gray1); margin:10px 0px 0px 10px;}

/* FAQ */

#FAQ{display:flex; flex-direction: column; justify-content: center;align-items: center; padding: 60px 144px; background-color: var(--gray4);}

#FAQrows{display:grid; grid-template-rows: repeat(6,1fr); gap: 30px;}

.questions{display:flex; justify-content: space-between; padding:16px 20px; border:2px solid var(--gray2);}

.questions>p{padding-right: 700px;}

/* lading page */

#landingPage{display:flex; flex-direction: column; justify-content: center;align-items: center; padding: 60px 144px;}

#landingPageBTN{background-color: var(--primaryGreen); padding:14px 24px; color:black; margin-top:20px; text-transform: capitalize;}

/* footer */

footer{
    display: flex; justify-content: center;align-items: center; padding:60px 78px; gap:126px; width: 100%; border-top:2px solid var(--primaryGreen) ;
}

#footerLinks{
    display:flex; justify-content: center;align-items: flex-start; gap:92px;
    padding:40px 77px; 
}

#logo{display:flex; align-items: center;}

#quickLinks>p{font-size: 20px; font-weight: 400; text-transform: capitalize;}
#quickLinks>nav{display: flex; flex-direction: column; gap:12px; margin-top: 20px;}
#quickLinks>nav>a{color: var(--gray1);}

#newsLetter>p{font-size: 20px; font-weight: 400; margin-bottom: 20px;}
#newsLetterInput{display:flex;align-items: flex-end;}
#input{background: none; border:none; color: white; border-bottom: 1px solid var(--gray1); padding:5%;}

/* media querry */

@media (max-width:325px){
    header{display:none;}

    main{flex-direction: column; padding: 20px; gap: 12px;}

    #mainText>h1{font-size: 32px;}
    #mainText>h1, #mainText>p{text-align: center; display: flex; align-items: center; justify-content: center;}

    #mainButtons{align-items: center; justify-content: center; flex-direction: column;}

    #getStarted, #watchVideo{font-size: 12px; width: fit-content; text-align: center;}

    #watchVideo>p{font-size: 12px;}

    main>img{width: 90%;}

    #partners{padding:24px 0px;}
    #partnersLogos{flex-direction: column;}

    #featuresGrid{grid-template-columns: repeat(1,1fr);}

    #statisticsGrid{grid-template-columns: 1fr;}

    #futureAside{display:flex; justify-content: center; align-items: center; flex-direction: column; padding:12px}

    #futureAside>img{width: 206px;}

    .futureCard{
    display:flex; flex-direction: column; align-items: center;padding: 30px 12px; border-radius: 14px; width: 250px;height: 320px;
}
.featuresCard{
    padding:12px;
}

    .questions>p{padding-right: 20px;}

    footer{
        flex-direction: column;
    }

    #footerLinks{
        flex-direction: column; justify-content: center;
        padding:0px; gap:12px;
    }
}