@import url(./global.css);

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

header{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--color-neutral-silver);
    position: relative;
}

.logo{
    padding: 30px 0px;
}

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

.nav-header ul a{
    text-decoration: none;
    color: #18191F;
   
}

.nav-header ul a :hover{
    color: var(--color-primary);
    transform: translateY(-1px);
}

 

.active{
    font-weight: bold;
}

.btn-login{
    color: var(--color-primary);
    background-color: transparent;
    padding: 10px 20px;
    cursor: pointer;
}

.btn-SignUp{
    color: var(--color-neutral-white);
    padding: 10px 20px;
    background-color: var(--color-primary);
    border-radius: 6px;
    cursor: pointer;
}

.btn-header{
    gap: 14px;
    padding: 22px 0px;
}

/* ----- menu toggle----- */

.menu-toggle{
    flex-direction: column;
    width: 30px;
    height: 22px; 
    display: none; 
    cursor: pointer;  
 }
 
 .menu{
     background-color: black;
     height: 4px;
     width: 100%;
     margin: 2px;
     transition: 0.5s ease;
 }

 .menu-toggle.active :nth-child(1){
    background-color: red;
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active :nth-child(2){
    opacity: 0;

}

.menu-toggle.active :nth-child(3){
    background-color: red;
    transform: rotate(-45deg) translate(5px, -5px);
}



.navegation-mobile{
    display: none;
  
}


/* ----- fim menu toggle----- */

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



/*---------- Main -----------*/ 

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

}

.content-lessons{
    width: 657px;
}

h1{
    font-size: 64px;
    color: var( --color-neutral-d_grey);
    font-weight: 600;
}   

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

.content-lesso p{
    margin-top: 20px;
}




/*---------- Fim  Main -----------*/

/*---------- Our Clients -----------*/

.Our-Client{
    text-align: center;
    margin-top: 40px;
}

.Our-Client p{
    margin-top: 8px;

}

.Logo-clients{
    display:flex;
    justify-content: center;
    gap: 136px;
    padding: 25px 0px;
    margin-top: 16px;
}
/*---------- Fim  Our Clients -----------*/

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

.manage-system{
    text-align: center;
    margin-top: 40px;


}

.manage-system h2{
    width: 542px;
    margin: 0 auto;
    
}

#manage-system-subtitle{
    margin-top: 8px;
}

.cards-container{
    display: flex;
    margin-top: 16px;
    gap: 127.5px;
    justify-content: center ;

}
.cards-container article{
    width: 299px;
    box-shadow: 0px 2px 4px rgba(171, 190, 209, 0.2);
    padding: 24px 16px;
    text-align: center;
    border-radius: 8px;
    transition: 0.5s;
}

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

}

.cards-container article img{
    width: 65px;
    height: 56px;

}

.cards-container article h3{
    color: var(--color-neutral-d_grey);
    font-size: 28px;
    margin-bottom: 8px;
    width: 231;
    margin: 0 auto;
}

.cards-container article p{

    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;

}


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


/*----------  Pixelgrade ----------- */


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

.Pixelgrade-content{
    width: 661px;   
}

.Pixelgrade-content h2{
    font-size: 36px;
    margin-bottom: 16px;
    width: 526;
}

.Pixelgrade-content p{
    margin-top: 16px;

}

/*----------  Fim Pixelgrade -----------*/

/* ---------- Helping Local----------*/

.Helping-Local{
    display: flex;
    justify-content: center;
    margin: 48px 0px;
    background-color: var(--color-neutral-silver);
    align-items: center;
    gap: 204px;
    padding: 64px 0px;


}

.helpin-content h2{

    width: 390px;

}

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

.helpin-content p{

    margin-top: 8px;
    color: #18191F;

}

.helpin-statistic{

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 64px;

}

.helpin-itens{
    display: flex;
    gap: 16px;

}


.helpin-itens img{
    width: 48px ;
}

.information-itens{
    text-align: start;

}

/* ---------- Fim Helping Local------*/



/* ---------- How to design------*/

.How-to-design{
    display: flex;
    justify-content: center;
    margin-top: 48px;
    gap: 49.47px;
    align-items: center;
    padding: 48px;
}

.How-to-design-content{
    width: 601px;
    padding-top: 62px;

}



.How-to-design h2{
    color: var(--color-neutral-d_grey);


}

.How-to-design p {
    margin-bottom: 16px;
    line-height: 1.5;
   

}


/* ---------- Fim How to design------*/



/*----- customer -------- */

.customer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0px;
    gap: 78px;
    background-color: var(--color-neutral-silver);



}

.customer-content{
    width: 748px;
}

.customer-content p{
    line-height: 1.5;
    margin-bottom: 16px;
}

.customer-content h2{
    color: var(--color-primary);
    font-size: 20px;
    margin-bottom: 8px;
}

.customer-content p:nth-of-type(2){
    color: var(--color-neutral-L_grey);
}

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

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

.customer-itens img {
    width: 48px;
}


.customer-navigation a {
    display: flex;
    text-decoration: none;
    
    
}

.customer-navigation p {
    color: var(--color-primary);
    margin:  0px;
    gap: 8px;

    
}



/*----- Fim  customer -------- */


/*----- Caring Marketing -------- */
.caring-marketing{
    text-align: center;
}

.caring-marketing h2{
    margin-top: 48px;
    margin-bottom: 8px;
}

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

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

.caring-cards{
    width: 368px;
    position: relative;
}

.caring-cards-content{
    box-sizing: border-box;
    background-color: var(--color-neutral-silver);
    border-radius: 8px;
    box-shadow: 0px 8px 16px 3px rgba(171, 190, 209, 0.4);
    width: 317px;
    padding: 16px;
    position: absolute;
    bottom: -53px;
    left: 26px;
}

.caring-cards-content h3{
    font-size: 20px;
    color: var(--color-neutral-grey);
}

.caring-cards-content a{
    display: flex;
    font-size: 20px;
    text-decoration: none;
    margin-top: 24px;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
}

.caring-cards-content a p{
    color: var(--color-primary);
}


/*----- fim Caring Marketing -------- */


/*----- Pellentesque -------- */

.Pellentesque{
    text-align: center;
    background-color: var(--color-neutral-silver);  
    padding: 32px;
}

.Pellentesque h2{
    font-size: 64px;
    width: 670px;
    margin:  0 auto;
    padding: 32px 0px;
}

.Pellentesque a {
    text-decoration: none;
}

.Pellentesque button{
    display: flex;
    align-items: center;
    margin: 0 auto;
    gap: 8px;


}

/*----- fim Pellentesque -------- */

/*----- footer-------- */
footer{
    background-color: var(--color-neutral-black);
    display: flex;
    justify-content: center;
    gap: 284px;
    padding: 64px 0;
   
}

 .Copyright{
     margin: 40px 0px;

}

.Copyright p{
    color: var(--color-neutral-silver);
}

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


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

.social-icons{
    background-color: #3c474c ;
    padding: 7.47px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

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

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

.footer-navigation h2{
    margin-bottom: 24px;
    font-size: 20px;
    color: var(--color-neutral-white);
}

.footer-links{
    list-style: none;
    font-family: 14px   ;
}

.footer-item{
    color: var(--color-neutral-silver);
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    transition: 0.5s;
}

.footer-item:hover{
    color: var(--color-primary);
    transform: translateX(10px);
}

.footer-container form{
    display: flex;
    align-items: center;
    
}

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

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

.stay-button{
    padding: 8.5px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    

}

.stay-button:hover{
    background-color: var(--color-primary);

}

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

/*----- RESPONSIVIDADE ------*/
/*----- celular------*/ 

  /* ---- Header----- */

  @media (max-width: 480px){
    .nav-header, .btn-header{
        display: none;
    }

    .menu-toggle{
        display: flex;
        flex-direction: column;
    }

    .navegation-mobile{
    display: flex;
    background-color: var(--color-neutral-grey);
    border-radius: 3px;
    padding: 10px 15px 0px;
    align-items: end;
    text-align: end;
    flex-direction: column;
    position: absolute;
    width: 50%;
    height: 100vh;
    right: 0px;
    top: 100%;
    gap: 20px;
    visibility: hidden;
    transition: opacity 0.8s ease;

}


 .nav-header-mobile ul{
     display: flex;
     flex-direction: column;
     justify-content: center;
     list-style: none;
     gap: 10px;
     
 }
 
 .nav-header-mobile ul a{
    text-decoration: none;
    color: var(--color-neutral-black);
    font-weight: bold;
 }

 .navegation-mobile.show{
     opacity: 1;
     visibility: visible;
 }

    /* ----- Fim Header ----- */

    /* ----- Main ---- */

    main{
        flex-direction: column-reverse;
        
    }

    .main-container-img{
       
    }

    main img{
        width: 350px;
        text-align: center;
        
    }

    .content-lessons{
        width: 90%;
    }

    .content-lessons h1{
        font-size: 50px;
    }
    /* ----- Fim Main ---- */


     /* ------ Our-Client ------ */

     .Our-Client{
        width: 90%;
        margin-top: 10px;
        margin: 0 auto;

    }

    .Logo-clients{
        width: 90%;
        gap: 30px;
        margin: 0 auto;
        margin-left: 40px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       margin-bottom: 50px;
    }

    /* ------ Fim Our-Client ------ */

    /* ----- Manage----- */

    .manage-system h2{
        width: 80%;
    }

    .cards-container{
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    /* ----- Fim Manage----- */


    /* ----- pixelgrade----- */

    .Pixelgrade{
        flex-direction: column;
        align-items: center;
        padding: 52px 0px;
        margin-top: 10px;
        text-align: start;
    }
    
    .Pixelgrade-content{
        width: 90%;
        font-size: 20px;
      
    }

    .Pixelgrade-content h2, .Pixelgrade-content p{
       width: 350px;
        
    }

    /* ----- Fim pixelgrade----- */

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

    .Helping-Local{
        flex-direction: column;
        gap: 50px;
    }

    .helping-content h2, .helping-content p{
        width: 90%;
        margin: 0 auto;
    }
    
    .helping-statistic{
        grid-template-columns: repeat(1, 1fr);
        
    }

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

    /* ---- HOW TO DESGINER ----- */

    .How-to-design{
        flex-direction: column;
        width: 95%;
    }

    .How-to-design-img{
        margin-right: 60px;
    }

    .How-to-design-content{
        width: 90%;
        font-size: 20px;
    }

    .How-to-design-content h2, .How-to-design-content p{
        width: 95%;
        text-align: start;
    }

    .How-to-design-content p{
        width: 370px;
        margin-top: 10px;
        font-size: 16px;
    }
    
    /* ----  HOW TO DESIGN ----- */

    /* ---- CUSTOMER ---- */

    .customer{
        width: 90%;
        flex-direction: column;
        gap: 0;
        text-align: justify;
    }

    .customer-content{
        width: 90%;
        margin: 0 auto;
        margin-left: 20px;
    }

    .customer-content p{
        width: 390px;
        margin-bottom: 10px;
    }

    .customer-container{
        width: 90%;
        flex-direction: column;
    }

    
    .customer-itens{
        width: 100%;
        gap: 25px;
        margin-left: 20px;
    }
        /* ---- fIM CUSTOMER ---- */

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

    .caring-marketing P{
        width: 90%;
    }

    .caring-marketing-container{
        flex-direction: column;
        align-items: center;
        gap: 100PX;
    }

    /* ----- fIM CARING MARKETING ----- */
    
    /* ----- PELLENTESQUE ----- */

    .Pellentesque h2{
        width: 100%;
        font-size: 60px;
    }

    /* ----- fIM PELLENTESQUE ----- */

    /* ---- FOOTER ----- */

    footer{
        flex-direction: column;
        align-items: start;
        padding: 64px 20px;
        gap: 40px;
    }

    .footer-navigation{
        flex-direction: column;
        gap: 40px;
    }

    /* ---- Fim FOOTER ----- */

}


/* ------ IPAD ------ */

@media (max-width: 835px) {

    /* ------ Header ------ */

    .nav-header, .btn-header{
        display: none;
    }

    .menu-toggle{
        display: flex;
        flex-direction: column;
    }

    .menu-toggle{
        display: flex;
        flex-direction: column;
    }

    .navegation-mobile{
    display: flex;
    border-radius: 20px;
    background-color: #61626261;
    border-radius: 3px;
    padding: 10px 20px;
    align-items: end;
    text-align: end;
    flex-direction: column;
    position: absolute;
    width: 50%;
    height: 50vh;
    right: 0px;
    top: 100%;
    gap: 20px;
    visibility: hidden;
    transition: opacity 0.8s ease;

}


 .nav-header-mobile ul{
     display: flex;
     flex-direction: column;
     justify-content: center;
     list-style: none;
     gap: 25px;
     
 }
 
 .nav-header-mobile ul a{
    text-decoration: none;
    color: var(--color-neutral-black);
    font-weight: bold;
 }

 .navegation-mobile.show{
     opacity: 1;
     visibility: visible;
 }



    /* ------ Fim Header ------ */
    
    /* ------ Main ------ */

    main{
        padding: 96px 50px;        
    }

    /* ------ Fim Main ------ */

    /* ------ Manage ------ */

    .cards-container{
        gap: 25px;
    }

    .cards-container article{
        width: 250px;
    }

    /* ------ Fim Manage ------ */


    /* ------ Pixelgrade ------ */

    .pixelgrade{
        gap: 10px;
    }

    .pixelgrade-content{
        width: 500px;
    }

    /* ------ Fim Pixelgrade ------ */


    /* ------ Helping local ------ */
    
    .Helping-Local{
        gap: 50px;
        margin-left: 50px;
    }
    


    /* ------ Fim Helping local ------ */

    /* ------ How design ------ */

    .how-design{
        gap: 20px;
    }

    .how-design h2{
        width: 500px;
    }

    .how-design p{
        width: 500px;
    }

    /* ------ Fim How design ------ */


    /* ------ Custumer ------ */

    .customer{
        gap: 20px;
    }


    .customer-content{
        width: 560px;
    }

    .customer-container{
        flex-direction: column;
    }

    /* ------ Fim Custumer ------ */

    /* ------ Caring ------ */

    .caring-marketing-p{    
        width: 90%; 
        margin: 0 auto; 
    }

    .caring-marketing-container{
        flex-direction: column;
        align-items: center;
        gap: 100px;
    }

   /* ------ Fim Caring ------ */

   /* ------ Footer ------ */
   
   footer{
    gap: 97px
   }

   /* ------ Fim Footer ------ */

}