* { margin: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; } /*Header*/ .header-page { display: flex; justify-content: center; background: #000; } .header-page-logo { display: block; padding: 30px 0; } /*Main Banner*/ .main-banner { width: 100%; } .main-banner-desktop { display: block; } .main-banner-mobile { display: none; } /* Top Infocard */ .top-infocard { display: flex; flex-direction: column; align-items: center; padding: 74px 0; } .top-infocard-content { width: 40%; } .top-infocard-subtitle, .top-infocard-title { text-align: center; } .top-infocard-subtitle { text-transform: uppercase; font-weight: 400; font-size: 32px; line-height: 39px; } .top-infocard-title { text-transform: uppercase; font-weight: 500; font-size: 48px; line-height: 58px; padding-bottom: 28px; } .top-infocard-description { font-weight: 400; font-size: 16px; line-height: 24px; padding-bottom: 73px; } .top-infocard-image-container { width: 16%; } .top-infocard-image { width: 100%; } /*top cards*/ .cards { display: flex; justify-content: center; } .top-cards { gap: 21px; width: 57%; margin: 0 auto; padding-bottom: 80px; } .card { display: flex; align-items: center; flex-direction: column; text-align: center; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .top-card { padding: 36px 26px 26px; min-width: 300px; } .top-card-image { width: 34%; padding-bottom: 28px; } .top-card-description { font-weight: 400; font-size: 16px; line-height: 24px; } /*mobile*/ @media screen and (max-width: 1024px) { /*Banner*/ .main-banner-desktop { display: none; } .main-banner-mobile { display: block; max-height: 598px; object-fit: cover; } /*Top infocard*/ .top-infocard { padding: 74px 30px 90px 30px; } .top-infocard-content { width: 100%; } .top-infocard-subtitle { font-size: 20px; line-height: 24px; } .top-infocard-title { font-size: 28px; line-height: 34px; } .top-infocard-description { text-align: center; } .top-infocard-image-container { width: 58%; max-width: 239px; } /*top cards*/ .cards { flex-direction: column; } .top-cards { width: 100%; padding: 0 30px 80px; } .top-card { min-width: initial; } .top-card-description { font-size: 14px; } .top-card-image { max-width: 150px; } } /*4K*/ @media screen and (min-width: 2500px) { /*top infocard*/ .top-infocard-subtitle { font-size: 40px; line-height: 70px; } .top-infocard-title { font-size: 75px; } .top-infocard-description { font-size: 32px; line-height: 40px; } /*top cards*/ .top-card-description { font-size: 25px; line-height: 30px; } } @media screen and (min-width: 3000px) { /*Top InfoCard*/ .top-infocard-subtitle { font-size: 48px; } .top-infocard-title { font-size: 100px; line-height: 125px; } }