@media screen and (max-width:1200px) { /* about app section */ .about_app_section .about_text .app_statstic li { width: 210px; padding-left: 20px; } .about_app_section .about_text .app_statstic li p:first-child { font-size: 30px; } } @media screen and (max-width:992px) { /* about app section */ .about_app_section .row { flex-direction: column-reverse; } .about_app_section .about_img { justify-content: flex-start; margin-top: 75px; margin-left: 0; } .about_app_section .about_img::before { left: 50%; } .about_app_section .about_img .screen_img { margin-left: -170px; } .about_app_section .about_text .app_statstic { justify-content: flex-start; } .about_app_section .about_text .app_statstic li { width: 35%; margin-right: 30px; } .about_app_section .about_img::before { left: 35%; } } @media screen and (max-width:767px) { /* about app section */ .about_app_section .about_text, .about_app_section .about_text .section_title { text-align: center; } .about_app_section .about_text .app_statstic { margin-top: 0; justify-content: space-between; } .about_app_section .about_text .app_statstic li { width: 48%; margin-right: 0; } .about_app_section .about_text .app_statstic li p:first-child { font-size: 18px; } .about_app_section .about_img { margin: 0; margin-top: 50px; justify-content: center; } .about_app_section .about_img::before { width: 350px; height: 350px; } } .row_am.about_app_section._ { background: #fbf4fe; } @media screen and (max-width:479px) { /* about app section */ .about_app_section .about_img::before { left: 49%; } } /* about app section */ /* .about_app_section .row { flex-direction: column-reverse; } */ .about_app_section .about_img { justify-content: flex-start; margin-top: 75px; margin-left: 0; } .about_app_section .about_img::before { left: 50%; } .about_app_section .about_img .screen_img { margin-left: -170px; } .about_app_section .about_text .app_statstic { justify-content: flex-start; } .about_app_section .about_text .app_statstic li { width: 35%; margin-right: 30px; } .about_app_section .about_img::before { left: 35%; } /* about app section */ .about_app_section .about_text .app_statstic { margin-top: 0; justify-content: space-between; } .about_app_section .about_text .app_statstic li { width: 48%; margin-right: 0; } .about_app_section .about_text .app_statstic li p:first-child { font-size: 18px; } .about_app_section .about_img { margin: 0; margin-top: 50px; justify-content: center; } .about_app_section .about_img::before { width: 350px; height: 350px; } @media screen and (max-width: 479px) { /* about app section */ .about_app_section .about_img::before { left: 49%; } } .section_title h2 { font-size: 44px; letter-spacing: 2px; line-height: 54px; text-shadow: 0 4px 10px #0000004d; font-weight: 700; color: #32236F; } .section_title h2 span { color: #1a3544; } /* about us section wraper */ .about_app_section .about_img { display: flex; align-items: center; position: relative; } /* about us section images*/ .about_app_section .about_img img { max-width: 100%; } .about_app_section .about_img::before { content: ""; position: absolute; left: 38%; top: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background-color: #fff; border-radius: 100%; z-index: -1; } .about_app_section .about_img .screen_img { margin-left: -135px; margin-top: 110px; } .about_app_section .about_text .section_title { text-align: left; } .about_app_section .about_text .section_title h2 { margin-bottom: 15px; } /* about us section statastics nomber */ .about_app_section .about_text .app_statstic { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; margin-top: 40px; } .about_app_section .about_text .app_statstic li { width: 248px; background-color: #fff; margin-bottom: 30px; display: flex; align-items: center; border-radius: 12px; padding: 15px 10px; padding-left: 35px; box-shadow: 0px 4px 10px #ede9fe; } .about_app_section .about_text .app_statstic li .icon { margin-right: 9px; } .about_app_section .about_text .app_statstic li p { margin-bottom: 0; line-height: 1; color: #32236F; } .about_app_section .about_text .app_statstic li p:first-child { font-size: 40px; font-weight: 600; margin-bottom: 3px; } .about_app_section .about_img .screen_img img { animation-delay: 3s; } .row_am { padding: 50px 0; } .row_am { padding: 30px 0; } .puprple_btn { background-color: #1a3544; color: #fff; border-radius: 50px; padding: 10px 40px; position: relative; overflow: hidden; z-index: 1; font-weight: 500; } .puprple_btn::before { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: #fff; border-radius: 50px; transition: .6s all; z-index: -1; } .puprple_btn:hover::before { width: 100%; } .puprple_btn:hover { color: #1a3544; } @media screen and (max-width:767px) { /* modern ui section */ .modern_ui_section .ui_images { margin-top: 10px; } .modern_ui_section .section_title { text-align: center; } .modern_ui_section .design_block li { padding-left: 0; margin-bottom: 30px; } .modern_ui_section .design_block li::before { position: relative; left: auto; top: auto; display: inline-block; } } .modern_ui_section .row { align-items: center; } .modern_ui_section .design_block { margin-top: 45px; } /* modern ui text */ .modern_ui_section .section_title { text-align: left; } .modern_ui_section .ui_text { padding-right: 75px; } /* modern ui list */ .modern_ui_section .design_block li { padding-left: 40px; position: relative; margin-bottom: 25px; } .modern_ui_section .design_block li::before { content: ""; position: absolute; left: 0; top: 5px; /* background-image: url(../../src/assets/images/right_icon.png); */ background-image: url(../../assets//images//right_icon.png); width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: contain; } .modern_ui_section .design_block li h4 { font-size: 24px; font-weight: 700; padding-bottom: 7px; text-shadow: 3px 4px 10px #0000004d; color: #32236F; margin-bottom: 8px; } .modern_ui_section .design_block li p { margin-bottom: 0; }