* { 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 { width: 100%; margin-bottom: 73px; } .top-infocard { display: flex; width: 100%; align-items: center; flex-direction: column; text-align: center; } .top-infocard-text { max-width: 766px; } .top-infocard-subtitle { text-transform: uppercase; line-height: 39px; font-weight: 400; font-size: 32px; margin-top: 28px; } .top-infocard-title { text-transform: uppercase; font-weight: 500; line-height: 58px; font-size: 48px; margin-bottom: 28px; } .top-infocard-discription { font-weight: 400; font-size: 64px; line-height: 24px; text-align: justify; } .top-infocard-image { margin-top: 73px; } .top-images-cards-section { display: flex; width: 100%; grid-template-columns: repeat(3, max-content); flex-wrap: wrap; justify-content: center; gap: 20px; background: #f0f0f0; } .top-card-image { display: flex; flex-direction: column; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .top-card-image-png { display: block; margin-bottom: 26px; } .top-card-discription { max-width: 300px; line-height: 24px; text-align: center; font-size: 16px; } .middle-banner { width: 100%; height: 530px; left: 0px; top: 1989px; } .display-grid { display:grid; width: 100%; background: #E0E0E0; } .middle-banner-desktop { position:relative; text-align: center; width: 32%; bottom: 320px; left: 2%; } @media screen and (max-width:414px) { .main-banner-desktop { display: none; } } @media screen and (min-width:415px) { .main-banner-mobile { display: none; padding: 84px 30px 158px; } }