*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 159px;
}


 /* START HEADER  */
.header{
    display: flex;
    align-items: center;
    padding: 23px 0 29px;
}

.header__logo{
    display: flex;
    gap: 16px;    
}

.logo{
    background-color: white;    
}

.header__logo p{
    font-size: 30px;
    color: #173A56;
    font-weight: bolder;
    padding-right: 150px;
}

.header__nav ul{
    display: flex;
    gap: 30px;
    padding-right:24px ;
}

.header__nav__product{
    font-weight: bolder;
}

.header__nav li:hover{
    text-decoration: underline;
    cursor: pointer;
}

.header__button{
    display: flex;
    gap: 24px;
}

.header__sanduiche{
    visibility: hidden;
}

.header__button button{
    padding: 10px 25px;
    cursor: pointer;
}

.header__button button:hover{
    text-decoration: underline;
}

.button1{
    background-color: white;
    border: 1px solid #BCD0E5;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bolder;
}

.button2{
    background-color: #02897A;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bolder;
}
/* END HEADER  */

/* START PRINCING */
.header__main{
    background-color: red;
    display: flex;
    flex-direction: column;
}
/* END PRINCING */


/* START WORK AT THE SPEED  */
.section__1{
    display: flex;
}

.section__1__div{
    display: flex;
    align-items: center;
    gap: 30px;
}

.section__1__left{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.section__1__left h1{
    font-size: 40px;
}
.section__1__button{
    display: flex;
    gap: 30px;
}

.section__1__button button{
    background-color:#02897A ;
    color: white;
    padding: 15px 40px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.section__1__button button:hover{
    text-decoration: underline;
}

.section__1__button div{
    display: flex;
    background-color: white ;
    color: #02897A;
    padding: 15px 40px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.section__1__button p:hover{
    text-decoration: underline;
}

.fa-solid{
    display: flex;
    margin-right: 8px;
}

.section__1__right{
    width: 40vw;
}
/* END START WORK AT THE SPEED  */


/* START PRODUCT WAS BUILT  */
.section__2{
    background-image: url(assets/section2/img1.svg);
    width: 100vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section__2__h2{
    display: flex;
    text-align: center;
    padding: 114px 150px 57px;
    font-size: 32px;
}

.section__2__cores{
    display: flex;
    align-items: center;
    gap: 46px;
    padding: 0 147px;
}

.section__2__button{
     padding: 15px 32px;
     background-color: #02897A;
     color: white;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     margin-top: 100px;
     font-size: 16px;
     font-weight: bolder;
}

.section__2__button:hover{
    text-decoration: underline;
}
/* END PRODUCT WAS BUILT  */


/* START MANAGEMENT  */
.section__3{
    display: flex;
    align-items: center;
    padding-top: 150px;
    gap: 84px;
}

.section__3__left{
    display: flex;
    flex-direction: column;
    gap: 28px;
}
/* END MANAGEMENT  */


/* START CUSTOMER SUPPORT  */
.section__4{
    display: flex;
    align-items: center;
    padding-top: 150px;
    gap: 94px;
}

.section__4__right{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section__4__right__check{
    display: flex;
    flex-direction: column;    
}

.check{
    display: flex;
    gap: 30px;
}
/* END CUSTOMER SUPPORT  */


/* START COLLABORATIVE  */
.section__5{
    display: flex;
    align-items: center;
    padding-top: 150px;
    gap: 84px;
}

.section__5__left{
    display: flex;
    flex-direction: column;
    gap: 28px;
}
/* END COLLABORATIVE  */


/* START QUICK E EASY  */
.section__6{
    /* background-image: url(assets/section6/backgroud_img.svg); */
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 253px;
    gap: 32px;
}

.section__6__div{
    display: flex;
    flex-direction: column;
    padding: 0 200px;
}

.section__6__conversas{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 178px;
}

.section__6__button{
    background-color:#02897A ;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 15px 31px;
    font-weight: bolder;
}

.section__6__button:hover{
    text-decoration: underline;
}
/* END QUICK E EASY  */



/* START CONTENTS STRATEGIES  */
.section__7{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:150px ;
    gap: 33px;
}

.section__7__div1{
    display: flex;
    flex-direction: column;
    text-align: left;
}

.section__7__div2{
    display: flex;
}

.section__7__div2__figure{
    display: flex;
    gap: 32px;
}

.h3{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 30px;
    gap: 12px;
    border: 1px solid lightgray;
}

.section__7__div2__figure span{
    font-weight: bolder;
}

.green h3{
    color:#02897A;
}

.pontinho{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:64px ;
}
/* END CONTENTS STRATEGIES  */


/* STAR PRICE TABLE  */
.section__8{
    display: flex;
    flex-direction: column;
    padding-top: 150px;
}

.section__8__div1{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}

.section__8__div2{
    display: flex;
    gap: 72px;
}


.section__8__div2__retangulos{
    display: flex;
    text-align: center;
    gap: 72px;
}

.green2{
    background-color: #02897A;
    border: none;
    box-shadow: 3px 3px 5px 3px lightgray;
    border-radius: 5px;
}

.green2 button{
    background-color: white;
    color: #02897A;
    padding: 11px 19px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.green2 button:hover{
    text-decoration: underline;
}

.section__8__div2__retangulos div{
    padding: 24px 20px 32px;   
}

.borda{
    border: none;
    box-shadow: 3px 3px 5px 3px lightgray;
    border-radius: 5px;
}

.borda button{
    padding: 11px 19px;
    background-color: #02897A;
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.borda button:hover{
    text-decoration: underline;
}

.button3{
    padding-top: 38px;
}
/* END PRICE TABLE  */


/* START WHAT CLIENTS SAY */
.section__9{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 150px 200px;
    gap: 50px;
}

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

.section__9__div2{
    display: flex;
    text-align: left;
    
}

.section__9__clients{
    display: flex;
    padding: 28px 26px 23px 26px;
    gap: 64px;
    width: 80vw;
}

.borda{
    border: 1px solid lightgray;
    padding: 28px 26px 16px 26px;
}

.section__9__clients img{
    width: 60px;
}

.section__9__clients div{
    display: flex;
    flex-direction: column;
}

.section__9__img{
    display: flex;
    flex-direction: row;
}

.section__9__clients .designer{
    display: flex;
    flex-direction: row;
    gap: 14px;
    padding-top: 16px;
}

.designer h4{
    color: #02897A;
}
/* END WHAT CLIENTS SAY */


/*START JOIN 100 */
.section__10{
    display: flex;
    align-items: center;
    color: white;
    padding: 49px 51px;
    background-color: #02897A;
    border-radius: 32px;
    margin-bottom: 150px;
    font-size: 22px;
}

.section__10 button{
    padding: 13px 35px;
    background-color: white;
    color: #02897A;
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: bolder;
    margin-top: 98px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.section__10 button:hover{
    background-color: whitesmoke;
}
/*END JOIN 100 */


/* PRINCING.HTML__SECTION 11 - ENTERPRISE */
.section__11{
    display: flex;
    flex-direction: column;
    padding: 150px 0;
    background-color: #F6F6F6;
    width: 100vw;
    align-items: center;
    gap: 20px;
}

.section__11 h3{
    font-size: 34px;
    font-weight: bolder;
    font-family: 'Poppins';
}

.section__11 button{
    padding: 11px 18px;
    background-color: #02897A;
    color: white;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.section__11__product{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150px 145px;
    gap: 80px;
}

.computador{
    display: flex;
    gap: 60px;
}

.section__11__product .right{
    display: flex;
    align-items: center;
}

.Enterpreneur{
    align-items: center;
}
/* END ENTERPRISE */

/* START PRICING - SECTION 12 - FREQUENTLY */
.section__12{
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 149px 240px;
}

.section__12__circle{
    display: flex;
    gap: 16px;
}

.section__12__point div{
  margin: 30px 0;
}

.menos{
    display: flex;
    flex-direction: column;
}
/* END PRICING - SECTION 12 - FREQUENTLY */





/* START FOOTER */
.footer__logo{
    display: flex;
    gap: 160px;  
}

.footer__product{
    display: flex;
    gap: 16px;
}

.footer__logo p{
    display: flex;
    flex-direction: column;
    font-size: 30px;
    color: #173A56;
    font-weight: bolder;
}

.footer__footer{
    display: flex;
    flex-direction: column;
}

.footer__icones{
    display: flex;
}

.footer__nav{
   display: flex;
   gap: 129px;
}

.footer__form{
    display: flex;
    flex-direction: column;
    width: 20vw;
}

.footer__form input{
    display: flex;
    padding: 10px 105px 10px 15px;
    border: 0.8px solid lightgray;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0px 0px 3px 2px lightgray;
    margin: 34px 0 21px 0;
}

.footer__form button{
    background-color: #02897A;
    color: white;
    padding: 8px 15px;
    width: 131px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.footer__form button:hover{
    text-decoration: underline;
}

.footer__made{
    display: flex;
    justify-content: center;
    padding: 10px 0 46px 0;
}

/* START RESPOSIVIDADE MOBILE */
@media (min-width: 320px) and (max-width: 640px) {
    .header__logo .logo{
        visibility: visible;
        background-color: red;    
    }

    .header__nav__product{
        visibility: visible;
        font-size: 30px;
        color: #173A56;
    }
    
    .header__nav ul{
        visibility: hidden;
    }

    .header__button {
        visibility: hidden; 
        /* ou utilizar >>> display:none */
    }

    .header__sanduiche{
        visibility:visible ;
    }

    .section__1__div{
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
    }

    .section__1__button{
        padding: 15px 24px;
    }

    .section__1__right img{
        display: flex;
        width: 70vw; 
    }

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

    .section__3{
        display: flex;
        flex-direction: column-reverse;
        padding-top: 1300px;
        align-items: center;
    }

    .section__3 img{
        width: 349px;
    }

    .section__4{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 100px 30px;
    }

    .section__4 img{
        width: 349px;
    }

    .section__4__right{
        padding: 10px 36px;
    }

    .section__4__right__check img{
        width: 35px;
    }

    .section__5{
        display: flex;
        flex-direction: column-reverse;
    }

    .section__5  img{
        width: 349px;
    }

    .section__6{
        display: flex;
        flex-direction: column;
    }


    .section__6__conversas{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .section__7{
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .section__7__div2__figure{
        display: flex;
        flex-direction: column;
    }

    .section__8{
        display: flex;
        flex-direction: column;
    }

    .section__8__div2__retangulos{
        display: flex;
        flex-direction: column;
    }

    .section__9__clients{
        display: flex;
        flex-direction: column;
    }

    .section__10{
        display: flex;
        flex-direction: column;
        width: 371px;
        height: 688px;
        width: 300px;
    }

    .footer{
        display: flex;
        flex-direction: column;
    }

    .footer__logo{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .footer__nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: large;
        gap: 50px;
    }

    .footer__form{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 50px 0;
    }

    .footer__made{
        text-align: center;
    }

}
/* END RESPOSIVIDADE MOBILE */


/* START RESPOSIVIDADE TABLET */
@media (min-width: 641px) and (max-width: 1023px) {
   
}
/* END RESPOSIVIDADE TABLET */


/* START RESPOSIVIDADE WEBPAGE */
@media (min-width: 1024px) {
    

}
/* END RESPOSIVIDADE WEBPAGE */