final

resources/css/theme.css

@@ -47,28 +47,26 @@ html, body {
 
 .grey-gradient-hover {
     background: linear-gradient(90deg, #9d9994 39.42%, #c5c5b9 92.9%);
-    background-size: 177% 100%;
-    background-position: 0% 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: background 180ms ease-in-out;
+    background-size: 101%!important;
 }
 
 .grey-gradient-hover:hover {
-    background-position: 39.42% 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
 }
 
 .dark .grey-gradient-hover {
     border: 1px solid rgba(248, 248, 248, 0.12);
     backdrop-filter: blur(20px);
+    box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
     background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
-    background-size: 177% 100%;
-    background-position: -1px 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: background 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 .dark .grey-gradient-hover:hover {
-    background-position: 9.42% 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    background:
+            linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%),
+            linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
 }
 
 .red-gradient-hover {
@@ -113,11 +111,13 @@ html, body {
 
 
 
-#fluentform_4 {
+#fluentform_4,
+#fluentform_5 {
 
 }
 
-#fluentform_4 .ff-el-form-control {
+#fluentform_4 .ff-el-form-control,
+#fluentform_5 .ff-el-form-control {
     border: none;
     box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
     background: #fff;
@@ -133,7 +133,8 @@ html, body {
     color: #6c6b6b;
 }
 
-#fluentform_4 .ff-btn-submit {
+#fluentform_4 .ff-btn-submit,
+#fluentform_5 .ff-btn-submit {
     height: 75px;
     background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
     border-radius: 90px;
@@ -148,16 +149,32 @@ html, body {
     transition: 180ms ease-in;
 }
 
-#fluentform_4 .ff-btn-submit:hover {
+@media (max-width: 1049px) {
+    #fluentform_4 .ff-el-form-control,
+    #fluentform_5 .ff-el-form-control {
+        font-size: 16px;
+        height: 69px;
+    }
+    #fluentform_4 .ff-btn-submit,
+    #fluentform_5 .ff-btn-submit {
+        font-size: 16px;
+        height: 69px;
+    }
+}
+
+#fluentform_4 .ff-btn-submit:hover,
+#fluentform_5 .ff-btn-submit:hover {
     font-weight: 700;
     transition: 180ms ease-in;
 }
 
-#fluentform_4 .ff_submit_btn_wrapper {
+#fluentform_4 .ff_submit_btn_wrapper,
+#fluentform_5 .ff_submit_btn_wrapper {
     margin-bottom: 0!important;
 }
 
-#fluentform_4 .error.text-danger {
+#fluentform_4 .error.text-danger,
+#fluentform_5 .error.text-danger {
     position: absolute;
     margin-top: 0;
     bottom: -18px;
@@ -166,18 +183,19 @@ html, body {
     text-align: center;
 }
 
-#fluentform_4 .ff-el-group {
+#fluentform_4 .ff-el-group,
+#fluentform_5 .ff-el-group {
     position: relative;
     margin-bottom: 18px;
 }
 
-#fluentform_4_success {
+#fluentform_4_success,
+#fluentform_5_success {
     display: none!important;
 }
 
-
-
-#fluentform_4 .ff-el-input--label {
+#fluentform_4 .ff-el-input--label,
+#fluentform_5 .ff-el-input--label {
     position: absolute;
     top: 50%;
     left: 32px;
@@ -193,19 +211,30 @@ html, body {
     color: #6c6b6b;
 }
 
-
 #fluentform_4 .ff-el-group.focused .ff-el-input--label,
-#fluentform_4 .ff-el-group.has-value .ff-el-input--label {
+#fluentform_4 .ff-el-group.has-value .ff-el-input--label,
+#fluentform_5 .ff-el-group.focused .ff-el-input--label,
+#fluentform_5 .ff-el-group.has-value .ff-el-input--label {
     top: 6px;
     transform: translateY(0);
     transition: 180ms ease-in-out;
     font-size: 14px;
 }
-#fluentform_4 .ff-el-tc{
+
+#fluentform_4 .ff-el-tc,
+#fluentform_5 .ff-el-tc {
     margin-top: 32px!important;
     font-weight: 500!important;
     font-size: 16px!important;
     line-height: 145%!important;
     color: #6c6b6b!important;
     margin-bottom: 0!important;
+}
+
+@media (max-width: 1047px) {
+    #fluentform_4 .ff-el-tc,
+    #fluentform_5 .ff-el-tc {
+        font-size: 12px!important;
+        margin-top: 16px!important;
+    }
 }

resources/css/utilities.css

@@ -1,7 +1,26 @@
-@utility container {
-    max-width: 1330px;
-    padding-left: 5px;
-    padding-right: 5px;
+@layer utilities {
+    .container {
+        max-width: 1330px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+}
+
+@media (max-width: 767px) {
+    @layer utilities {
+        .container {
+            padding-left: 24px;
+            padding-right: 24px;
+        }
+    }
+}
+@media (max-width: 349px) {
+    @layer utilities {
+        .container {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    }
 }
 
 /*@utility alignfull {