.flex { display: flex; margin: 40px 0; position: relative; justify-content: space-between; flex-wrap: wrap; } .flex_1 { width: 48%; } .primary_color { color: #4909d6; } .secondary_color { color: #1f0063; } .btn { background: #4909d6; color: white; border-radius: 10px; } .text_center { text-align: center; } .mt { margin-top: 60px; } /* /// Section 4 /// */ .section4 { width: 100%; margin-top: -200px; } .section4 p { max-width: 360px; } .section4__content { display: flex; justify-content: space-between; margin-top: 60px; z-index: 9; position: relative; } .section4__content_1 { flex: 1; margin: auto 0px; } .section4__content__1_line1 { font-size: 0.9rem; font-weight: 400; letter-spacing: 0.1rem; } .section4__content__1_line2 { max-width: 300px !important; } .section4__content_2 { flex: 1; } /* section 6 */ .section6 { margin-bottom: 180px; background-color: white; width: 100%; } .section6__content { padding: 2rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; } .section6__content_right { width: 40%; display: flex; flex-direction: column; justify-content: center; } .cloud_img { margin-top: -140px; } .preschoolCard { width: 30%; background: white; border: 1px solid #01518c4d; border-radius: 6px; padding: 30px; } .bottom_cloud { position: absolute; bottom: -220px; } .skills_card { width: 24%; background: white; border: 1px solid #01518c4d; border-radius: 6px; padding: 30px; } .triangle_right { width: 0; height: 0; border-top: 30px solid transparent; border-left: 60px solid #97c4ea; border-bottom: 30px solid transparent; margin-left: auto; margin-right: -60px; } .triangle_topright { width: 0; height: 0; border-top: 40px solid #8997cc; border-left: 40px solid transparent; margin-left: -40px; } @media only screen and (max-width: 1600px) { .bottom_cloud { bottom: -130px; } } @media only screen and (max-width: 900px) { .cloud_img { margin-top: -80px; } .preschoolCard { width: 48%; margin: 0 auto 30px auto; } .flex_1 { width: 100%; } .order_1 { order: 2; } .order_2 { order: 1; } .bottom_cloud { bottom: -52px; } .skills_card { width: 49%; margin-bottom: 16px; } .section4 p { max-width: 100%; } .section4__content { flex-direction: column; } } @media only screen and (max-width: 500px) { .cloud_img { margin-top: -40px; } .preschoolCard { width: 100%; } .skills_card { width: 100%; } .bottom_cloud { bottom: -30px; } .section6__content_right, .section6__content_left { width: 100%; } .section6 { margin-bottom: 40px; } }