/* 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: 22px 0px;
    background-color: var(--color-netral-silver);
}

.logo-header img {
    width: 154.49px;
    height: 24px;
}

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

.nav-header ul li a{
    color: #18191F;
    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{
    display: flex;
    gap: 14px;
}
.container-btn-header button{
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;

}

.container-btn-header .btn-login{
    background-color: var(--color-netral-silver);
}

.container-btn-header .btn-login a{
    color: var(--color-primary);
}

.container-btn-header .btn-sign-up{
    background-color: var(--color-primary);
}

.container-btn-header .btn-sign-up a{
    color: var(--color-netral-white);
    
}

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

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

main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 104px;
    padding: 96px 0px;
    background-color: var(--color-netral-silver);
}

.content-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 657px;
}

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

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

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

/*-- ------------ OUR CLIENTS ---------- --*/
.our-clients {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    margin: 40px 0px;
    
}

.content-our-clients {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.container-logo-clients {
    display: flex;
    gap: 136px;
    padding: 25px 0px;
    justify-content: center;
}

/*-- ------------ FIM OUR CLIENTS ---------- --*/

/*-- ------------ MANAGE SYSTEM ---------- --*/

.manage-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.content-manage-system {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-manage-system h2{
    width: 542px;
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 127.5px;
}
.cards-container article{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 299px;
    padding: 24px 16px;
    box-shadow: 0 2px 4px rgba(171, 190, 209, 0.2);
}

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

/*-- ------------ FIM MANAGE SYSTEM ---------- --*/


/*-- ------------ PIXEL GRADE ---------- --*/

.pixelgrade {
    display: flex;
    justify-content: center;
    gap: 49px;
    margin-top: 42px;
    padding: 52px;
}

.pixelgrade-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 601px;
}

.pixelgrade-content h2 {
    width: 564px;

}

.pixelgrade-content p {
    font-size: var(--font-body3-size);
    line-height: 20px;
}

.pixelgrade .btn-primary {
    color: var(--color-netral-white);
}



/*-- ------------ FIM PIXEL GRADE ---------- --*/

/*-- ------------ HELPING LOCAL ---------- --*/

.helping-local {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 204px;
    padding: 64px;
    background-color: var(--color-netral-silver);
}
.helping-local-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.helping-local-content h2 {
    width: 380px; 
}
.helping-local-content span {
    color: var(--color-primary);
}

.helping-local-content p {
    color: #18191F;
}

.helping-local-statistics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

.helping-local-items {
    display: flex;
    gap: 16px;
}


/*-- ------------ FIM HELPING LOCAL ---------- --*/

/*-- ------------ DESIGN-SITE ---------- --*/

.design-site {
    display: flex;
    justify-content: center;
    gap: 49px;
    margin-top: 42px;
    padding: 48px 0;
}

.design-site-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 601px;
}

.design-site-content h2, .design-site-content p {
    width: 601px;

}

.design-site-content p {
    font-size: var(--font-body3-size);
    line-height: 20px;
}

.design-site .btn-primary {
    color: var(--color-netral-white);
}

/*-- ------------ FIM DESIGN-SITE ---------- --*/

/*-- ------------ CUSTOMER ---------- --*/
.customer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 78px;
    padding: 32px;
    background-color: var(--color-netral-silver);
}

.customer-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 748px;
    font-size: var(--font-body3-size);
    line-height: 24px;

}

.customer-signature {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-signature h2 {
    color: var(--color-primary);
    font-size: var(--font-headline-4-size);
}

.customer-signature p {
    color: var(--color-netral-l_grey);
}

.customer-container {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 16px;
}


.customer-itens {
    display: flex;
    gap: 32px;
}

.customer-itens img {
    width: 48px;
}
/*-- ------------ FIM CUSTOMER ---------- --*/



/*-- ------------ CARING MARKETING ---------- --*/

.caring-marketing {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    margin-top: 48px;
}

.caring-marketing p {
    width: 628px;
    margin: 0 auto;
}

.caring-marketing-container {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    gap: 24px;
}

.caring-marketing-card {
    width: 368px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.caring-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background-color: var(--color-netral-silver);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(171, 190, 209, .4);
    width: 317px;
    position: absolute;
    top: 190px;
}

.caring-card-content h3 {
    font-size: var(--font-headline-4-size);
    font-weight: var(--font-headline-4-weight);
    color: var(--color-netral-l_grey);
    width: 285px;
}

/*-- ------------ FIM  CARING MARKETING ---------- --*/

/*-- ------------  PELLENTESQUE ---------- --*/
.pellentesque {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-netral-silver);
    gap: 32px;
    padding: 32px 0px;
    margin-top: 94.6px;
}

.pellentesque h2 {
    text-align: center;
    font-size: var(--font-headline-1-size);
    width: 722px;

}

.pellentesque a {
    display: flex;
    align-self: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-netral-white);

}

/*-- ----------- FIM PELLENTESQUE ---------- --*/

/*-- ----------- RODAPÉ ---------- --*/

footer {
    display: flex;
    justify-content: center;
    gap: 269px;
    padding: 64px 0px;
    background-color: var(--color-netral-black);
}

.copyright-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.copyright-reserved p   {
    color: var(--color-netral-silver);
}

.copyright-reserved p:nth-of-type(1)   {
    margin-bottom: 8px;
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.social-icon {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 7.47px;
    border-radius: 100%;
    transition: 0.3s;
}
.social-icon a {
    display: flex;
}

.social-icon:hover {
    background-color: var(--color-primary);
    transform: translateY(-5px);
}

.footer-navigation {
    display: flex;
    gap: 97px;
}

.foot-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.foot-container h2 {
    color: var(--color-netral-white);
    font-size: var(--font-headline-4-size);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: var(--font-body3-size);
}

.footer-item {
    text-decoration: none;
    color: var(--color-netral-silver);
    transition: 0.3s;
}

.footer-links li{
    transition: 0.3s;
}

.footer-links li:hover{
    transform: translateX(10px);
}

.footer-item:hover {
    color: var(--color-primary);
    transform: translateX(10px);
}
.foot-container form {
    display: flex;
    align-items: center;
}

.foot-container form input {
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #D9DBE1;
    border-radius: 8px 0px 0px 8px;
    outline: none;
}

.foot-container form input::placeholder {
    color: #D9DBE1;
}

.foot-container form button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8.9px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0px 8px 8px 0px;
    cursor: pointer;
    transition: 0.3s;
    
}

.foot-container form button:hover {
    background-color: var(--color-primary);
}
/*-- ----------- FIM RODAPÉ ---------- --*/