challenge-landing-page-Mateus-Farias/style.css

* {
    font-family: 'Inter';
    margin: 0px;
}
.menu {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:101px;
    background:#000000;

}
.img-logo{
    width:226;
    height:43;
}
.imgBackground {
    background-image: url("imagens/telaPc.png");
    background-size:100% 100%;
    width:100%;
    height:500px;
}
@media only screen and (max-width: 700px) {
    .imgBackground{
        background-image: url("imagens/telaPc.png");
        background-size:100% 100%;
        width:100%;
        height:300px;
    }
  
  }
  @media only screen and (min-width: 700px) {
  .imgDesk2 {
    display: flex;
    justify-content: center;
  }
  }

.container {
    width:100%;
    height:auto;
    display:block;
    text-align: center;
   
}
.text1 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 39px;
    text-transform: uppercase;
    color: #000000;
    padding: 70px 0px 0px 0px;

}
.text2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 58px;
    text-transform: uppercase;
    color: #000000;
    padding: 0px 0px 30px 0px;
}
.text3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    color: #000000;

}
.text4 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    color: #000000;
    padding: 0px 100px 60px 0px;
}
.cardCenter {
    width:100%;
    display:flex;
    justify-content:center;
    align-items: center;
    padding: 50px 0px 0px 0px;
    flex-wrap: wrap;
     margin: auto auto;
    
}
.card1 {
    width: 300px;
    height: 250px;
    display:block;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
    padding: 50px 0px 0px 0px;
    margin: 20px 20px 50px 0px;
    
}
.imgDesk1 {
    display: flex;
    justify-content:center;
    flex-wrap: nowrap;
    width:100%;
    height:400px;
    background: #E0E0E0;
    
}
.imgDesk2 {
    width: 100%;
    display: flex;
    justify-content:center;
   gap:25px;
   padding: 40px 0px 0px 0px;
}
.imgDesk3 {
    width: 100%;
     height:400px;
    display: flex;
    justify-content:center;
    margin:30px 0px -50px 0px;
    padding: 0px 0px 0px 0px;
    background: #E0E0E0;
}
.backgroundCinza {
    background: #E0E0E0;
    width: 100%;
}
@media only screen and (max-width: 1200px) {
.imgDesk1 {
    display:none;
}
}
@media only screen and (min-width: 1200px) {
.imgDesk2 , .imgDesk3 , .backgroundCinza{
    display:none;
    
}
}

.imgNote1 {
    width:32%;
    padding-left: 40px;
    height:400px;
}
.imgNote2 {
    width:45%;

}

.imgNote3 {
    width:93%;
    height:400px;
}

.card2 {
    width: 100%;
    display: flex;
    justify-content:center;
    flex-wrap: nowrap;
    margin: 50px 50px 0px 0px;
    padding-left: 0px;
    font-size: 30px;
    text-align: center;
  
}
.card3 {
    width: 380px;
    height: 320px;
    display:block;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
    padding: 50px 0px 0px 0px;
    margin: 60px 20px 0px 0px;
    
}
.text5 {
    font-family: 'Inter';
font-style: normal;

font-weight: 400;
font-size: 16px;
text-align: center;
color: #000000;

}
.img-card {
    width:100px;
    height:80px;
    padding: 0px 0px 20px 0px;
}
@media only screen and (min-width: 800px) {
    .mobileBackground {
        width: 400px;
        display: none;

}


}
.textFinal {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    text-align: center;
    color: #000000;
    margin: 60px 0px 0px 0px;

}
.imgRectangle {
    background: url("./imagens/Rectangle.png");
    background-size: 100% 100%;
    width: 80%;
    height: 276px;
    margin: 40px auto;
    
}
@media only screen and (max-width: 800px) {
    .imgRectangle {
     display:none;
     margin: 40px 0px 0px 0px;
    }
  }
  .oculosPng {
    width:95%;
     height:400px;
  }
.rodape {
    text-align: center;
    width: 100%;
    height: 160px;
    background: #000000;
    margin: 80px 0px 0px 0px;
    }

.links ,ul ,li ,a  {
    display: flex;
    justify-content: center;
    padding: 10px 5px 6px 0px;
}
 .textFooter {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  color: #BDBDBD;
 }
  @media only screen and (max-width: 2500px) {
    .text1 {
     font-size: 30px;  
        
    
    }
    .text2 {
        font-size: 50px;  
        
    
    }
    .text3 {
       
        font-size: 20px;  
    
    }
    .text4 {
       
        font-size: 20px;  
    
    }
    .text5 {
        font-size: 18px;  
        
    }
    .textFinal {
        font-size: 30px;  
    }
    }
    @media only screen and (max-width: 760px) {
        .text4 {
         display: flex;
         justify-content: center;
         padding: 10px 0px 30px 0px;
        }
        }
        @media only screen and (max-width: 400px) {
            .text5 {
                font-size:13px;
            }
            }
        @media only screen and (max-width: 600px) {
            .cardCenter {
               width:80%;
                height:auto;
               display:flex;
               justify-content: center;
               align-items: center;
               margin:  auto;
            }
            }