*{ margin:0; padding:0; box-sizing: border-box; } .page-header{ display: flex; width: 100%; height: 101px; left: 0px; top: 0px; justify-content: center; align-items: center; background: #000000; } .header-logo{ width: 100%; height: 43px; } .main-banner{ width: 100%; height: auto; } @media screen and (max-width: 414px){ .desktop-hidden{ display: none; } .div-image-pc{ margin: 15% 0; } .image-pc{ width: 50%; } .infoboxes-sub-wrapper{ width: 100%; flex-direction: column; } .div-infobox{ width: 96%; height: 70%; } .imagem-note-wrapper{ width: 100%; flex-direction: column; } .image-note-mobile{ width: 50%; flex-direction: row; display: flex; } .imagem-note{ width: 96%; height: 70%; } } @media screen and (min-width: 415px) { .mobile-hidden{ display: none; } .div-image-pc{ margin: 5% 0; } .image-pc{ width: 15%; } .infoboxes-sub-wrapper{ width: 70%; flex-direction: row; margin: 5% 0; } .div-infobox{ width: 40%; margin: 5% 0; } .image-note-desktop{ width: 100%; flex-direction: row; display: flex; } .imagem-note{ display: flex; flex-direction: row; width: 100%; } } .div-title{ margin: 5% 0; display: flex; flex-direction: column; align-items: center; } .title-one{ width: 100%; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; text-align: center; color: #000000; } .title-two{ width: 100%; font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; text-align: center; color: #000000; } .title-three{ width: 80%; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: #000000; } .div-image-pc{ width: 100%; display: flex; align-items: center; justify-content: center; } .infoboxes-wrapper{ margin: 5% 0; display: flex; width: 100%; justify-content: space-around; gap: 2%; } .infoboxes-sub-wrapper{ display: flex; justify-content: center; align-items: center; gap: 2%; } .div-infobox{ flex-direction: column; display: flex; align-items: center; justify-content: center; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: #000000; box-shadow: 0 0 8px #E0E0E0;; } .infobox-image{ display: flex; width: 35%; } .imagem-note-wrapper{ gap: 10%; margin: 5% 0; display: flex; width: 100%; justify-content: space-around; background-color: #E0E0E0;; } .imagem-note{ width: 100%; margin: 5% 0; } .page-footer{ list-style: none; flex-direction: row; display: flex; width: 100%; align-items: center; justify-content: center; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: white; gap: 4%; background: #000000; } .page-footer{ flex-direction: column; display: flex; align-items: center; justify-content: center; color: #000000; } .text-footer{ text-transform: uppercase; line-height: 12px; font-size: 10px; color: #bdbdbd ; } .icones-footer{ display: flex; list-style: none; margin-bottom: 16px; } .footer-li{ margin: 0 8px } @media screen and (min-width: 415px) { .footer-image{ margin-left: 10%; display:flex; justify-content: center; align-items: center; width: 80%; } } @media screen and (max-width: 414px){ .footer-image{ margin-left: 10%; display:flex; justify-content: center; align-items: center; width: 80%; } }