* { 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; } }