add style 320px

css/styles.css

@@ -342,7 +342,7 @@ h1 {
   color: white;
   font-weight: 800;
   line-height: 62px;
-  letter-spacing: 0.6px;
+  letter-spacing: 1px;
   margin-bottom: 2.5%;
   text-align: left;
 }
@@ -881,6 +881,12 @@ video {
   color: #303a81;
   line-height: 21px;
 }
+@media (min-width: 1250px) {
+  .main-text {
+    line-height: 27px;
+    margin-bottom: 50px;
+  }
+}
 @media (max-width: 768px) {
   .main-text {
     font-size: 14px;
@@ -901,7 +907,7 @@ video {
   background: #f9fbff;
   padding-top: 184px;
   padding-bottom: 60px;
-  margin-bottom: 70px;
+  margin-bottom: 75px;
 }
 @media (max-width: 576px) {
   .advertising-background {
@@ -933,7 +939,7 @@ video {
 }
 @media (max-width: 576px) {
   .advertising-background {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
     padding-top: 60px;
   }
 }
@@ -1028,10 +1034,11 @@ video {
     width: 100%;
     height: 45%;
     right: 0;
-    top: 40%;
+    top: 45%;
   }
 }
-.advertising-text {
+.advertising-text p {
+  width: 100%;
   font-family: SFUIDisplay-Light;
   font-size: 18px;
   font-weight: 300;
@@ -1040,18 +1047,43 @@ video {
   color: #303a81;
 }
 @media (max-width: 768px) {
-  .advertising-text {
+  .advertising-text p {
     font-size: 14px;
     letter-spacing: 0.14px;
   }
 }
 @media (max-width: 576px) {
-  .advertising-text {
+  .advertising-text p {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 20px;
+  }
+}
+.advertising-text-order p {
+  width: 100%;
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 24px;
+  letter-spacing: 0.24px;
+  color: #303a81;
+}
+@media (max-width: 768px) {
+  .advertising-text-order p {
     font-size: 14px;
     letter-spacing: 0.14px;
   }
 }
 @media (max-width: 576px) {
+  .advertising-text-order p {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 20px;
+  }
+}
+@media (max-width: 576px) {
   .advertising-text-p {
     margin-bottom: 0;
   }
@@ -1180,12 +1212,12 @@ video {
     min-width: 320px;
     min-height: 183px;
     margin-left: -25px;
-    margin-bottom: 13px;
+    margin-bottom: 4px;
   }
 }
 @media (max-width: 1250px) {
   .advertising-img {
-    padding-top: 25px;
+    padding-top: 26px;
   }
 }
 @media (min-height: 577px) {
@@ -1209,7 +1241,7 @@ video {
     min-width: 320px;
     min-height: 183px;
     margin-left: -25px;
-    margin-bottom: 52px;
+    margin-bottom: 21px;
   }
 }
 /*option*/
@@ -1231,13 +1263,12 @@ video {
 .option h2 {
   font-size: 36px;
   line-height: 62px;
-  margin-bottom: 3px;
   color: #315197;
   letter-spacing: 0.36px;
   max-width: 803px;
   font-family: SF-UI-Display-Black;
   font-weight: 800;
-  margin-bottom: 0;
+  margin-bottom: 3px;
 }
 @media (max-width: 576px) {
   .option h2 {
@@ -1254,12 +1285,16 @@ video {
     margin-bottom: 15px;
     line-height: 24px;
     font-weight: 800;
-    margin-top: -22px;
   }
 }
 .option-card-img {
   text-align: center;
-  max-width: 485px;
+  width: 500px;
+}
+@media (max-width: 1250px) {
+  .option-card-img {
+    width: 400px;
+  }
 }
 @media (max-width: 768px) {
   .option-card-img {
@@ -1344,7 +1379,7 @@ video {
   text-align: center;
   margin: 0 auto;
   /*max-width: 281px;*/
-  max-height: 284px;
+  max-height: 279px;
 }
 @media (max-width: 768px) {
   .option-card-img-container {
@@ -1457,7 +1492,7 @@ video {
   background: #f9fbff;
   background-size: 100% 100%;
   background-position: center;
-  padding-top: 118px;
+  padding-top: 123px;
   padding-bottom: 95px;
 }
 @media (max-width: 576px) {
@@ -1534,9 +1569,13 @@ video {
   }
 }
 .protection-img {
-  height: 120px;
   width: 100%;
 }
+@media (min-width: 1150px) {
+  .protection-img {
+    height: 98px;
+  }
+}
 @media (max-width: 768px) {
   .protection-img {
     height: 126px;
@@ -1550,12 +1589,29 @@ video {
     margin-left: -10px;
   }
 }
-@media (max-width: 576px) {
+@media (min-width: 1250px) {
   .protection-img img {
-    width: 70px;
-    height: 70px;
-    margin-bottom: 0;
-    margin-right: 16px;
+    margin-bottom: 0px;
+  }
+}
+.protection-text-margin {
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  letter-spacing: 0.24px;
+  color: #303a81;
+  line-height: 27px;
+  margin-bottom: 20px;
+}
+@media (min-width: 1250px) {
+  .protection-text-margin p {
+    font-family: SFUIDisplay-Light;
+    font-size: 18px;
+    font-weight: 300;
+    letter-spacing: 0.24px;
+    color: #303a81;
+    line-height: 27px;
+    margin-bottom: 20px;
   }
 }
 @media (min-width: 1250px) {
@@ -1572,6 +1628,10 @@ video {
 @media (max-width: 576px) {
   .protection-text-margin {
     margin-bottom: 35px;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 0.14px;
+    line-height: 21px;
   }
 }
 .protection-text {
@@ -1599,12 +1659,12 @@ video {
 }
 @media (max-width: 576px) {
   .protection-line {
-    margin-top: 13px;
+    margin-top: 10px;
   }
 }
 /*catalog*/
 .catalog {
-  padding-top: 135px;
+  padding-top: 163px;
 }
 @media (max-width: 992px) {
   .catalog {
@@ -1613,7 +1673,7 @@ video {
 }
 @media (max-width: 576px) {
   .catalog {
-    padding-top: 55px;
+    padding-top: 57px;
   }
 }
 .catalog-container {
@@ -1827,7 +1887,7 @@ video {
   background-position: center;
   padding-top: 118px;
   padding-bottom: 113px;
-  margin-bottom: 103px;
+  margin-bottom: 114px;
 }
 @media (max-width: 576px) {
   .technology {
@@ -1856,7 +1916,7 @@ video {
 }
 @media (max-width: 576px) {
   .technology {
-    padding-top: 58px;
+    padding-top: 60px;
     padding-bottom: 35px;
     margin-bottom: 40px;
   }
@@ -1915,6 +1975,29 @@ video {
     margin-bottom: 5px;
   }
 }
+.technology-text {
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 27px;
+  letter-spacing: 0.24px;
+  color: #303a81;
+  margin-bottom: 32px;
+}
+@media (max-width: 768px) {
+  .technology-text {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+  }
+}
+@media (max-width: 576px) {
+  .technology-text {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 10px;
+  }
+}
 .technology-card {
   width: 48%;
   text-align: left;
@@ -2336,7 +2419,7 @@ video {
   margin-left: 7px;
   width: 240px;
   height: 40px;
-  margin-top: 20px;
+  margin-top: 15px;
   background: #f9fbff;
   border: #c94d4e 1px solid;
   border-radius: 20px;
@@ -2406,7 +2489,7 @@ video {
   max-width: 650px;
   margin: 0 auto;
   padding-top: 12.7%;
-  padding-bottom: 14%;
+  padding-bottom: 211px;
 }
 @media (max-width: 576px) {
   .form-wrapper {
@@ -2420,8 +2503,8 @@ video {
   font-size: 60px;
   font-weight: 400;
   color: white;
-  letter-spacing: 0.6px;
-  margin-bottom: 20px;
+  letter-spacing: 0.9px;
+  margin-bottom: 25px;
 }
 @media (max-width: 768px) {
   .form-wrapper h6 {
@@ -2444,7 +2527,7 @@ video {
   color: white;
   letter-spacing: 0;
   line-height: 30px;
-  margin-bottom: 27px;
+  margin-bottom: 55px;
 }
 @media (max-width: 576px) {
   .form-wrapper p {

css/styles.less

@@ -289,7 +289,7 @@ h1 {
   color: white;
   font-weight: 800;
   line-height: 62px;
-  letter-spacing: 0.6px;
+  letter-spacing: 1px;
   margin-bottom: 2.5%;
   text-align: left;
   @media (max-width: 992px) {
@@ -736,6 +736,10 @@ video {
   }
 }
 .main-text {
+  @media(min-width: 1250px){
+    line-height: 27px;
+    margin-bottom: 50px;
+  }
   .catalog-tittle-text;
   line-height: 21px;
 }
@@ -747,7 +751,7 @@ video {
   background: #f9fbff;
   padding-top: 184px;
   padding-bottom: 60px;
-  margin-bottom: 70px;
+  margin-bottom: 75px;
   @media (max-width: 576px) {
     padding-top: 60px;
     padding-bottom: 5px;
@@ -769,7 +773,7 @@ video {
     padding-top: 90px;
   }
   @media (max-width: 576px) {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
     padding-top: 60px;
   }
 }
@@ -843,10 +847,12 @@ video {
     width: 100%;
     height: 45%;
     right: 0;
-    top: 40%;
+    top: 45%;
   }
 }
 .advertising-text {
+  p {
+    width: 100%;
     font-family: SFUIDisplay-Light;
   font-size: 18px;
   font-weight: 300;
@@ -860,6 +866,30 @@ video {
   @media (max-width: 576px) {
     font-size: 14px;
     letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 20px;
+  }
+  }
+}
+.advertising-text-order {
+  p {
+    width: 100%;
+    font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 24px;
+  letter-spacing: 0.24px;
+  color: #303a81;
+     @media (max-width: 768px) {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+  }
+  @media (max-width: 576px) {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+     margin-bottom: 20px;
+  }
   }
 }
 .advertising-text-p {
@@ -970,13 +1000,13 @@ video {
       min-width: 320px;
       min-height: 183px;
       margin-left: -25px;
-      margin-bottom: 13px;
+      margin-bottom: 4px;
     }
   }
 }
 .advertising-img {
   @media (max-width: 1250px) {
-    padding-top: 25px;
+    padding-top: 26px;
   }
   @media (min-height: 577px) {
     margin-top: -65px;
@@ -995,7 +1025,7 @@ video {
       min-width: 320px;
       min-height: 183px;
       margin-left: -25px;
-      margin-bottom: 52px;
+      margin-bottom: 21px;
     }
   }
 }
@@ -1019,18 +1049,21 @@ video {
     .h2-desktop;
     font-family: SF-UI-Display-Black;
     font-weight: 800;
-    margin-bottom: 0;
+    margin-bottom: 3px;
     @media (max-width: 576px) {
       margin-bottom: 15px;
       line-height: 24px;
       font-weight: 800;
-      margin-top: -22px;
+
     }
   }
 }
 .option-card-img {
   text-align: center;
-  max-width: 485px;
+  width: 500px;
+  @media (max-width: 1250px){
+    width: 400px;
+  }
   @media (max-width: 768px) {
     text-align: center;
     width: 275px;
@@ -1103,7 +1136,7 @@ video {
   text-align: center;
   margin: 0 auto;
   /*max-width: 281px;*/
-  max-height: 284px;
+  max-height: 279px;
   @media (max-width: 768px) {
     height: 169px;
     max-width: 180px;
@@ -1198,7 +1231,7 @@ video {
   background: #f9fbff;
   background-size: 100% 100%;
   background-position: center;
-  padding-top: 118px;
+  padding-top: 123px;
   padding-bottom: 95px;
   @media (max-width: 576px) {
     padding-top: 51px;
@@ -1257,8 +1290,11 @@ video {
   }
 }
 .protection-img {
-  height: 120px;
+
   width: 100%;
+   @media (min-width: 1150px) {
+      height: 98px;
+    }
   @media (max-width: 768px) {
     height: 126px;
     margin-left: -10px;
@@ -1269,15 +1305,31 @@ video {
     margin-left: -10px;
   }
   img {
-    @media (max-width: 576px) {
-      width: 70px;
-      height: 70px;
-      margin-bottom: 0;
-      margin-right: 16px;
+     @media(min-width: 1250px){
+    margin-bottom: 0px;
+
   }
   }
 }
 .protection-text-margin {
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  letter-spacing: 0.24px;
+  color: #303a81;
+      line-height: 27px;
+      margin-bottom: 20px;
+  @media(min-width: 1250px){
+    p {
+      font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  letter-spacing: 0.24px;
+  color: #303a81;
+      line-height: 27px;
+      margin-bottom: 20px;
+    }
+  }
   @media(min-width: 1250px){
     width: 740px;
     margin-bottom: 50px;
@@ -1287,6 +1339,10 @@ video {
   }
   @media (max-width: 576px) {
     margin-bottom: 35px;
+     font-size: 14px;
+  font-weight: 300;
+  letter-spacing: 0.14px;
+      line-height: 21px;
   }
 }
 .protection-text {
@@ -1308,17 +1364,17 @@ video {
 .protection-line {
   margin-bottom: 12px;
   @media (max-width: 576px) {
-    margin-top: 13px;
+    margin-top: 10px;
   }
 }
 /*catalog*/
 .catalog {
-  padding-top: 135px;
+  padding-top: 163px;
   @media (max-width: 992px) {
     padding-top: 65px
   }
   @media (max-width: 576px) {
-    padding-top: 55px
+    padding-top: 57px
   }
 }
 .catalog-container {
@@ -1486,7 +1542,7 @@ video {
   background-position: center;
   padding-top: 118px;
   padding-bottom: 113px;
-  margin-bottom: 103px;
+  margin-bottom: 114px;
   @media (max-width: 576px) {
     padding-top: 51px;
   }
@@ -1505,7 +1561,7 @@ video {
     margin-bottom: 40px;
   }
   @media (max-width: 576px) {
-    padding-top: 58px;
+    padding-top: 60px;
     padding-bottom: 35px;
     margin-bottom: 40px;
   }
@@ -1553,6 +1609,25 @@ video {
     margin-bottom: 5px;
   }
 }
+.technology-text {
+   font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 27px;
+  letter-spacing: 0.24px;
+  color: #303a81;
+  margin-bottom: 32px;
+  @media (max-width: 768px) {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+  }
+  @media (max-width: 576px) {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 10px;
+  }
+}
 .technology-card {
   width: 48%;
   text-align: left;
@@ -1885,7 +1960,7 @@ video {
   margin-left: 7px;
   width: 240px;
   height: 40px;
-  margin-top: 20px;
+  margin-top: 15px;
   background: #f9fbff;
   border: #c94d4e 1px solid;
   border-radius: 20px;
@@ -1944,7 +2019,7 @@ video {
   max-width: 650px;
   margin: 0 auto;
   padding-top: 12.7%;
-  padding-bottom: 14%;
+  padding-bottom: 211px;
   @media (max-width: 576px) {
     height: 560px;
     padding-top: 45px;
@@ -1955,8 +2030,8 @@ video {
     font-size: 60px;
     font-weight: 400;
     color: white;
-    letter-spacing: 0.6px;
-    margin-bottom: 20px;
+    letter-spacing: 0.9px;
+    margin-bottom: 25px;
     @media (max-width: 768px) {
       font-size: 50px;
     }
@@ -1975,7 +2050,7 @@ video {
     color: white;
     letter-spacing: 0;
     line-height: 30px;
-    margin-bottom: 27px;
+    margin-bottom: 55px;
 
     @media (max-width: 576px) {
       margin: 0 auto;

index.html

@@ -479,7 +479,7 @@
         <h2 class="h2-desktop">Защита данных в облаке</h2>
         <div class="main-line protection-line">
         </div>
-        <p class="advertising-text protection-text-margin">
+        <p class="protection-text-margin">
             Используемая архитектура Single tenant позволяет оградить от рисков злонамеренной
             или случайно гибели данных всех своих пользователей благодаря использованию
             персональной архитектуры и, как следствие, минимизации рисков.
@@ -614,7 +614,7 @@
         <h2 class="h2-desktop">Технологии</h2>
         <div class="main-line protection-line">
         </div>
-        <p class="catalog-tittle-text technology-p-margin">
+        <p class="technology-text technology-p-margin">
             На всех этапах разработки, адаптации и внедрения проекта команда использует
             только самые актуальные на сегодняшний день технологии, позволяющие
             клиенту не беспокоиться о будущем MSO.
@@ -1116,7 +1116,7 @@
             <div class="form-line">
             </div>
             <p>
-                Свяжитесь с нашим специалистом, <br>чтобы узнать, как быстро
+                Свяжитесь с нашим специалистом, чтобы узнать, как быстро
                 и безболезненно для Вашего бизнеса повысить его эффективность!
             </p>
             <form>