body{
  margin: 0;
    padding: 0;
    overflow-x: hidden;
}



header{
    justify-content: center;
    display: flex;
    align-items: center;

    background-image: url(./images/bg-header-desktop.png);
    background-size: cover; 
    background-size: contain; 
    background-size: 100% 100%;

    @media (max-width:1326px){
    background-image: url(./images/bg-header-mobile.png);
    background-size: cover; 
    background-size: contain; 
    background-size: 100% 100%;
    }
}

.logo{
    margin-top: 2%;
}
.titulo{
    width: 100%;

    font-family: "Bai Jamjuree", sans-serif;
    font-size: 50px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
    
}
.header-container{
    margin-top: 70px;
    width: 40%;
    text-align: center;


    justify-content: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;

    @media (max-width:1326px){
        width: 100%;

    }
}
.parag{
    width: 85%;
    text-align: center;

    margin-left: auto;
    margin-right: auto;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    color: hsl(201, 11%, 66%);
    font-weight: 300;
}
.ios{
    background-color: hsl(171, 66%, 44%);
    border: 0;
    padding: 20px;
    border-radius: 70px;
    color: aliceblue;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    @media (max-width:1326px){
        font-size: 14px;
        border-radius: 40px;
        margin-left: auto;
        margin-right: auto;
    }
}
.mac{
    background-color: hsl(233, 100%, 69%);
    padding: 20px;
    border-radius: 70px;
    border: 0;
    color: aliceblue;
    margin-left: 20px;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    @media (max-width:1326px){
        font-size: 14px;
        border-radius: 40px;
        margin-left: auto;
        margin-right: auto;
    }
}
.botao{
    padding: 20px;
    gap: 20px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;


    @media (max-width:1326px){
        gap:20px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        width: 400px;


        flex-wrap: wrap;
        height: auto;
        
    }
    @media (max-width:500px){
        width: 300px;
    }

}
.ios:hover{
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    background-color: hsl(171, 63%, 61%);;
    
}
.mac:hover{
    background-color: hsl(233, 87%, 71%);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.titulo2{
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
}
.container-main{
    margin-top: 30px;
    display: flex;
    @media (max-width:1326px){
        display: block;
}
}
.imagens{
    margin-left: 30px;

}

.imagens img{
    @media (max-width:1326px){
        width: 300px;
    }
    @media (max-width:500px){
        width: 240px;
    }
}
.texto{
    margin-left: 10%;
    margin-top: 5%;
}
.parag-main{
    width: 60%;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    color: hsl(201, 11%, 66%);
    font-weight: 300;
    @media (max-width:1326px){
        width: 100%;
    }
}
.parag3{
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    color: hsl(201, 11%, 66%);
    font-weight: 300;
    width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
            @media (max-width:1326px){
            width: 100%;
            margin-left: 0;
            text-align: start;
        
    }
}
.titulo-main{
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
    margin-left: auto;
    margin-right: auto;
    width: 50%;

        @media (max-width:1326px){
            width: 100%;
        
    }

}
.image-sec{

    width: 50%;
    margin-left: auto;
    margin-right: auto;

        @media (max-width:1326px){
            width: 20%;
            margin-left: 0;
        
    } 
}
.image-sec img{
        @media (max-width:1326px){
            width: 350px;
        
    }
    
}
.parag4{
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    color: hsl(201, 11%, 66%);
    font-weight: 300;
    width: 30%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
                @media (max-width:1326px){
            width: 80%;
            text-align: start;
        
    }

}
.titulo-main2{
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
    margin-left: auto;
    margin-right: auto;
    width: 30%;

                @media (max-width:1326px){
            width: 70%;
            
            text-align: start;
        
    }
}
.item1,.item2,.item3{

    width: 30%;
     @media (max-width:1326px){
        width: 30%;
     }
}
.titulo-bloco{
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
    margin-left: auto;
    margin-right: auto;

    width: 80%;
                @media (max-width:1326px){
            width: 70%;
            margin-left: 0;
            text-align: start;
            font-size: 20px;
            
        
    }

}
.parag-bloco{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    color: hsl(201, 11%, 66%);
    font-weight: 300;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

     @media (max-width:1326px){
        font-size: 12px;
        text-align: start;
        width: 100%;
     }
    
}
.container-blocos{
    margin-top: 6%;

    width: 80%;
    margin-left:auto;
    margin-right: auto;
    display: flex;
    gap: 40px;
                @media (max-width:1326px){

            margin-left: 20px;
            text-align: start;
            width: 80%;
        
    }
}
.icon{
        width: 60px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
    }
.titulo-blocoP{
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
    margin-left: auto;
    margin-right: auto;


    width: 20%;
                @media (max-width:1326px){
            width: 30%;
            text-align: start;
            font-size: 20px;
        
    }
}
.logos{
    margin-top: 3%;
    display: flex;
    gap: 200px;

    width: 80%;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;

     @media (max-width:1326px){
            gap: 100px;
        
    }


    

}
.titulo-final{
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);

    width: 40%;
    margin-left: auto;
    margin-right: auto;
        @media (max-width:1326px){
            width: 90%;
        
    }
}
.parag-final{
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    color: hsl(201, 11%, 66%);
    font-weight: 300;
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
        @media (max-width:1326px){
            width: 80%;
            text-align: start;

        
    }

}
.final{
    margin-top: 6%;
}

footer{
    margin-top: 50px;
    background-color: #ededed;
    height: auto;
    width: auto;
    
}
.container-foot{
    display: flex;
    margin-top: 50px;
    
    
}
.logo-footer img{
    width: 50px;
    margin-left: 60px;



    
}
.logo-footer{

    width: 300px;
    margin-left: 30px;
    margin-top: 50px;
    
    
}
.botoes{

    width: 45%;
    margin-top: 50px;
    

    button{
        font-size: 20px;
        margin: 20px;
        margin-left:30px ;
    
        background-color: transparent;
        border: 0;
        font-family: "Bai Jamjuree", sans-serif;
        color: hsl(210, 10%, 33%);
        
    }
}
.social{
    margin-top: 2%;

}
.social img{
        width: 30px;
        padding: 20px;
}