* { margin: 0; padding: 0; /*box-sizing: border-box;*/ } body { font-family: 'Inter', sans-serif; color: #000000; } .page-header { display: flex; justify-content: center; padding: 28px 0; background: #000000; } .header-logo { display: block; } .main-banner, .middle-banner { width: 100%; display: block; } .top-infocard { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 0 0; } .top-infocard-text { max-width: 766px; } .top-infocard-subtitle { display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: 32px; line-height: 39px; font-weight: 400; } .top-infocard-title { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; text-transform: uppercase; line-height: 58px; font-size: 48px; font-weight: 500; } .top-infocard-description { /*text-align: center; (ficaria mais bonito)*/ font-size: 16px; line-height: 24px; margin-bottom: 72px; } .top-infocard-image { display: flex; align-items: center; justify-content: center; width: 315px; max-width: 100%; } .top-cards{ display: grid; grid-template-columns: repeat(3, max-content); gap: 20px; justify-content: center; padding: 176px 0 80px; } .top-card{ display: flex; flex-direction: column; align-items: center; padding: 26px 26px 34px; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .top-card-image{ display: block; margin-bottom: 26px; } .top-card-description{ max-width: 300px; font-size: 16px; line-height: 24px; text-align: center; } .middle-banner { display: flex; justify-content: center; background: #E0E0E0; } .middle-banner-top, .middle-banner-bottom { display: flex; margin: 60px 0 60px; } .middle-banner-img { max-width: 530px; margin: 0 20px; } .bottom-cards{ padding: 0 72px; } .bottom-cards-wrapper{ display: flex; padding: 130px 0 108px; gap: 16px; justify-content: center; position: relative; } .bottom-card{ display: flex; flex-direction: column; align-items: center; padding: 36px 32px 66px; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .bottom-card-image{ display: block; margin-bottom: 14px; } .bottom-card-description{ max-width: 368px; font-size: 16px; line-height: 24px; text-align: center; } .bottom-infocard{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .bottom-infocard-image{ width: 100%; max-width: 1360px; } .bottom-infocard-text{ text-align: center; max-width: 550px; margin-bottom: 50px; } .bottom-infocard-title{ line-height: 1; font-size: 32px; font-weight: 600px; } .bottom-infocard-description{ font-size: 16px; line-height: 24px; } .page-footer{ display: flex; flex-direction: column; align-items: center; padding: 38px 0; margin-top: 116px; background-color: #000000; } .footer-icons{ display: flex; list-style: none; margin-bottom: 16px; } .footer-icon{ margin: 0 8px; } .footer-text{ text-transform: uppercase; line-height: 12px; font-size: 10px; color: #BDBDBD; } /* ---------------------------------resposividade------------------------------------*/ @media screen and (max-width: 300px) { .infocartop-title { line-height: 30px !important; font-size: 24px !important; } } @media screen and (max-width: 768px) { .main-banner-desktop, .middle-banner-desktop { display: none; } } @media screen and (min-width: 769px) { .main-banner-mobile, .middle-banner-mobile { display: none; } } @media screen and (max-width: 768px) { .dk { display: none; } .mb { margin-bottom: 50px; } } @media screen and (min-width: 769px) { .mb { display: none; } } @media screen and (max-width: 1500px) and (min-width: 769px) { .dk { max-width: 740px; } } @media screen and (max-width: 768px) { .top-infocard { padding: 0; } .top-infocard-text { max-width: 357px; width: 100%; padding: 72px 28px 65px; } .top-infocard-subtitle { font-size: 20px; line-height: 24px; } .top-infocard-title { font-size: 28px; line-height: 34px; } .top-infocard-description { margin: 0 0px 0px; } .top-infocard-image { width: 100%; max-width: 240px; } } @media screen and (max-width: 768px){ .top-cards{ grid-template-columns: 1fr; padding: 90px 26px 80px; } .bottom-cards{ margin-top: 114px; padding: 0 26px; } .bottom-card-description{ font-size: 14px; } .page-footer{ padding-bottom: 26px; } .footer-text{ max-width: 280px; text-align: center; } .bottom-cards-wrapper{ flex-direction: column; } .footer-icons{ margin-top: 87px; } } @media screen and (min-width: 769px) and (max-width: 1200px){ .top-cards { grid-template-columns: repeat(2, max-content); } } @media screen and (min-width: 769px) and (max-width: 992px){ .bottom-card-description { max-width: 280px; } } @media screen and (max-width: 1700px) { .middle-banner-img { max-width: 450px; margin: 0 20px; } } @media screen and (max-width: 1600px) { .middle-banner-img { max-width: 430px; margin: 0 20px; } } @media screen and (max-width: 1400px) { .middle-banner-img { max-width: 330px; margin: 0 20px; } } @media screen and (max-width: 1200px) { .middle-banner-img { max-width: 280px; margin: 0 15px; } } @media screen and (max-width: 920px) { .middle-banner-img { max-width: 200px; margin: 0 15px; } } @media screen and (max-width: 680px) { .middle-banner { padding: 32px 0; flex-direction: column; } .middle-banner-top, .middle-banner-bottom { display: flex; margin: 0; justify-content: center; } .middle-banner-img { max-width: 240px; margin: 0 14px; } .middle-banner-bottom .middle-banner-img { max-width: 510px; margin: 20px 0; } } @media screen and (max-width: 540px) { .middle-banner-img { max-width: 218px; margin: 0 7px; } .middle-banner-bottom .middle-banner-img { max-width: 450px; margin: 20px 0; } } @media screen and (max-width: 480px) { .middle-banner-img { max-width: 170px; margin: 0 7px; } .middle-banner-bottom .middle-banner-img { max-width: 350px; margin: 20px 0; } } @media screen and (max-width: 375px) { .middle-banner-img { max-width: 120px; margin: 0 7px; } .middle-banner-bottom .middle-banner-img { max-width: 260px; margin: 20px 0; } } @media screen and (max-width: 580px) { .bottom-infocard-title{ font-size: 24px; line-height: 29px; } .bottom-infocard-description{ max-width: 350px; } }