body{ margin: 0; padding: 0; border: 0; font-family: inter; background: #FFFFFF; } main figure{ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .cabecalho { background-color: #000000; text-align: center; width: 100%; } .imagemCabecalho { width: 12%; height: 42%; padding-top: 1.4%; padding-bottom: 1.4%; } .imagemCorpoMobile{ display: none; } .imagemCorpoPt1{ width: 100%; height: 100%; } .corpoPt1{ display: flex; flex-direction: column; align-items: center; margin: 0; } .corpoPt1 h2{ margin-block-start: 0; margin-block-end: 0; margin-top: 73px; line-height: 39px; font-size: 32px; text-transform: uppercase; } .corpoPt1 h1{ margin-block-start: 0; margin-block-end: 0; font-weight: 500; line-height: 58px; font-size: 48px; text-transform: uppercase; } .corpoPt1 p{ margin-top: 28px; width: 40%; font-size: 16px; } .corpoPt2{ margin-top: 73px; text-align: center; } .imagem2{ width: 16%; } .corpoPt3{ margin-top: 178px; display: flex; flex-direction: row; justify-content: center; gap: 1%; margin-bottom: 80px; } section figure { text-align: center; width: 18%; background: #FFFFFF; } section figure img{ width: 29%; } section figure figcaption p{ font-style: normal; font-size: 16px; margin-left: 11%; margin-right: 11%; } .quadrado1 { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .quadrado2 { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .quadrado3 { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .quadrado1 img{ margin-top: 47px; margin-bottom: 38px; } .quadrado2 img{ margin-top: 35px; margin-bottom: 31px; } .quadrado3 img{ margin-top: 31px; margin-bottom: 31px; } .corpoPt4{ background: #E0E0E0; display: flex; width: 100%; } .corpoPt4Mobile{ display: none; background: #E0E0E0; } .corpoPt4 div{ position: relative; gap: 2%; display: flex; flex-direction: row; justify-content: center; width: 100%; } .corpoPt4 figure { width: 29%; position: relative; top: 70px; } .corpoPt4 figure img{ width: 100%; } .corpoPt5{ margin-top: 129px; display: flex; flex-direction: row; width: 100%; justify-content: center; gap: 0.8%; background: #FFFFFF; } .corpoPt5 figure{ width: 22.5%; background: #FFFFFF; } .corpoPt5 figure p{ font-size: 16px; margin-bottom: 65px; } .box1{ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .box2{ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .box3{ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .box4{ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .box1 img{ margin-top: 51px; width: 24%; } .box2 img{ margin-top: 41px; width: 24%; } .box3 img{ margin-top: 41px; width: 24%; } .box4 img{ margin-top: 35px; width: 20%; } .corpoPt6{ margin-top: 108px; display: flex; flex-direction: column; align-items: center; width: 100%; background: #FFFFFF; } .corpoPt6 p{ font-size: 16px; width: 28%; margin-block-start: 0; margin-block-end: 0; margin-bottom: 50px; } .corpoPt6 h1{ font-weight: 600; font-size: 32px; width: 22%; margin-block-start: 0; margin-block-end: 0; } .corpoPt6 img{ width: 71%; } .retanguloMobile{ display: none; } footer{ margin-top: 116px ; background: #000000; display: flex; flex-direction: column; align-items: center; } .divRodape{ margin-top: 38px; gap: 21.5px; width: 5%; } .divRodape img{ width: 23%; } .paragrafoRodape{ color:#BDBDBD; font-style: normal; font-size: 10px; text-transform: uppercase; margin-bottom: 38px; } @media(max-width:1024px){ .cabecalho { height: 101px; } .imagemCabecalho{ margin-top: 18px; width: 52%; } .imagemCorpoMobile{ display: flex; width: 100%; } .imagemCorpoPt1{ display: none; } .corpoPt1 h2{ font-size: 20px; } .corpoPt1 h1{ font-size: 28px; } .corpoPt1 p{ text-align: center; font-size: 16px; width: 86%; } .imagem2{ width: 58%; } .corpoPt3{ flex-direction: column; align-items: center; gap: 24px; } section figure { text-align: center; width: 84%; background: #FFFFFF; } .corpoPt4Mobile div figure{ width: 42%; } .corpoPt4Mobile div figure img{ width: 100%; } .corpoPt4Mobile figure{ width:100%; background: #E0E0E0; } .corpoPt4Mobile figure img{ width:86%; } .corpoPt4{ display: none; } .box1 figcaption p{ font-size: 14px; } .box2 figcaption p{ font-size: 14px; } .box3 figcaption p{ font-size: 14px; } .box4 figcaption p{ font-size: 14px; } .retangulo2{ order: 1; } .retangulo1{ order: 2; } .retangulo3{ order: 3; } .corpoPt5{ margin-top: 129px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .corpoPt5 figure{ width: 89%; } .divRodape{ width: 25%; } .corpoPt6 p{ width: 84%; order: 3; } .corpoPt6 h1{ font-size: 24px; width: 76%; order: 2; } .corpoPt6 img{ width: 100%; order: 1; height: 414px; } .retanguloDesktop{ display: none; } .retanguloMobile{ display: flex; margin-bottom: 50px; } .corpoPt4Mobile{ display: flex; flex-direction: column; position: relative; } .corpoPt4Mobile div{ background: #E0E0E0; display: flex; flex-direction: row; justify-content: center; width: 100%; gap: 2%; } .paragrafoRodape{ width: 63%; text-align: center; } } @media(min-width: 2500px){ .corpoPt1 h2{ font-size: 64px; margin-bottom: 25px; } .corpoPt1 h1{ font-size: 96px; } .corpoPt1 p{ font-size: 32px; } section figure figcaption p{ font-size: 32px; } .corpoPt4 div{ position: relative; gap: 2%; display: flex; flex-direction: row; justify-content: center; width: 100%; } .corpoPt5 figure p{ font-size: 32px; } .corpoPt6 p{ font-size: 32px; } .corpoPt6 h1{ font-size: 64px; } .paragrafoRodape{ font-size: 20px; } }