*{ margin:0; padding:0; box-sizing: border-box; } body{ font-family: 'Inter', sans-serif; } .header{ text-align: center; background: #000000; width: 100%; height: 100px; padding:28px; } .header img{ } .topbanner img{ height: 100%; width: 100%; } .topinfo{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .topinfo-texts{ text-align: center; margin-top: 73px; width: 43%; } .topinfo-subtitle{ text-transform: uppercase; font-weight: 400; font-size: 32px; line-height: 39px; } .topinfo-title{ font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; } .topinfo-text{ font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 28px; text-align: left; } .topinfo-img{ margin-top:70px; } .topcards{ margin: 0 25%; } .topcards-wrapper{ margin-top: 178px; margin-bottom: 80px; display: flex; justify-content: center; gap:21px; } .topcard{ padding: 46px 26px 27px; text-align: center; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .topcard-text{ min-width: 300px; margin-top: 38px; font-weight: 400; font-size: 16px; line-height: 24px; } @media screen and (max-width: 1439px){ .topinfo-texts{ min-width: 86%; } .topinfo-subtitle{ font-weight: 400; font-size: 20px; line-height: 24px; } .topinfo-title{ font-weight: 500; font-size: 28px; line-height: 34px; } .topinfo-text{ text-align: center; font-size: 16px; line-height: 24px; } .figuretopinfo{ text-align: center; } .topinfo-img{ width: 75%; } .topcards{ margin: 0 10%; } .topcards-wrapper{ margin-top: 90px; margin-bottom: 80px; flex-direction:column; gap:24px; } .topcard-text{ min-width: 0; } } @media screen and (min-width: 2500px){ .topinfo-subtitle{ font-size: 64px; line-height: 78px; } .topinfo-title{ font-size: 96px; line-height: 116px; } .topinfo-text{ font-size: 32px; line-height: 48px; margin-top: 28px; } .figuretopinfo{ width: 100%; text-align: center; } .topinfo-img{ width: 13%; } .topcard-text{ font-weight: 400; font-size: 32px; line-height: 48px; } }