.about { width: 100vw; max-width: 1250px; margin: 0px auto; padding: 0px 10px; direction: rtl; min-height: calc(100vh - 288px); padding-top: 60px; &__first { margin-top: 30px; width: 70%; .top { h1 { display: inline; letter-spacing: -2px; font-family: numeralMedium; background-color: #00cc69; color: white; text-align: center; } p { margin-top: 10px; text-align: justify; font-family: numeralLight; color: #6d6d6d; letter-spacing: -1px; } } } &__fury { margin-top: 30px; width: 100%; margin-bottom: 30px; justify-content: space-between; &--right { align-items: center; width: 45%; .right-top { h1 { display: inline; letter-spacing: -2px; font-family: numeralMedium; background-color: #00cc69; color: white; } p { margin-top: 10px; text-align: justify; font-family: numeralLight; color: #6d6d6d; letter-spacing: -1px; } } .right-bottom { margin: 20px 60px 20px 0px; h2 { display: inline; font-family: numeralMedium; background-color: #00cc69; color: white; } ul { margin: 0px; list-style: none; padding: 0px; margin-top: 5px; li { display: inline; border-bottom: 2px solid #00cc69; font-family: numeralLight; color: #6d6d6d; } } } } &--left { width: 50%; height: 100%; position: relative; & img { position: absolute; } &__1 { top: 100px; left: 00px; z-index: 100; // height: 470px; width: 100%; } &__2 { left: 430px; bottom: 80px; z-index: 150; height: 235px; width: 235px; } &__3 { bottom: 0px; left: 310px; z-index: 200; height: 200px; width: 200px; } &__4 { top: 50px; left: 0px; z-index: 150; height: 200px; width: 200px; } } } &__advantages { width: 100%; height: 300px; margin-top: 50px; margin-bottom: 10px; justify-content: space-around; &--right { width: 48%; height: 100%; & img { width: 100%; } } &--left { padding-top: 20px; width: 48%; height: 100%; align-items: flex-end; margin-top: 20px; h1 { display: inline; font-family: numeralMedium; background-color: #00cc69; color: white; } ul { margin: 0px; list-style: none; padding: 0px; margin-top: 5px; li { display: inline; text-align: justify; font-family: numeralLight; color: #6d6d6d; } } } } } .mobile-about { width: 100vw; max-width: 650px; margin: 0px auto; padding: 0px 10px 40px; direction: rtl; padding-top: 70px; overflow-x: hidden; &__fury { h1 { display: inline; letter-spacing: -2px; font-family: numeralMedium; background-color: #00cc69; color: white; } p { margin-top: 10px; text-align: justify; font-family: numeralLight; color: #6d6d6d; letter-spacing: -1px; } } &__images { position: relative; height: 330px; width: 100%; & img { position: absolute; } &--1 { top: 0px; left: calc(100vw / 8); z-index: 100; height: calc(100vw - 100px); width: calc(100vw - 100px); max-width: 275px; max-height: 275px; } &--2 { right: -20px; bottom: 70px; z-index: 150; height: calc(100vw / 2.5); width: calc(100vw / 2.5); max-width: 150px; max-height: 150px; } &--3 { bottom: -10px; right: -10px; z-index: 200; height: calc(100vw / 3); width: calc(100vw / 3); max-width: 125px; max-height: 125px; } &--4 { top: 50px; left: -20px; z-index: 150; height: calc(100vw / 3); width: calc(100vw / 3); max-width: 125px; max-height: 125px; } } &__keys { transform: translateY(-40px); h2 { display: inline; font-family: numeralMedium; background-color: #00cc69; color: white; } ul { margin: 0px; list-style: none; padding: 0px; margin-top: 5px; li { display: inline; border-bottom: 2px solid #00cc69; font-family: numeralLight; color: #6d6d6d; } } } &__video { img { width: 100%; } } &__advantages { margin-top: 30px; h1 { display: inline; font-family: numeralMedium; background-color: #00cc69; color: white; // margin-bottom: 20px; } ul { margin: 0px; list-style: none; padding: 0px; margin-top: 5px; li { display: inline; text-align: justify; font-family: numeralLight; color: #6d6d6d; margin-bottom: 5px; } } } }