Home page and shopping-cart

styles/base/_utilities.scss

@@ -1,158 +1,181 @@
 // colors
 .bg-green {
-  background-color: #3bb78f;
-  background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
+    background-color: #3bb78f;
+    background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
 }
 
-.text-green-Awni{
-  color: #0A886A;
+.text-green-Awni {
+    color: #0A886A;
 }
 
-.orbitron_font{
-  font-family: 'Orbitron', sans-serif;
+.orbitron_font {
+    font-family: 'Orbitron', sans-serif;
 }
 
 // font size
 .font-3 {
-  font-size: 3rem;
+    font-size: 3rem;
 }
+
 .font-1_5 {
-  font-size: 2rem;
+    font-size: 2rem;
 }
 
-.font-1_7{
-  font-size: 1.7rem;
+.font-1_7 {
+    font-size: 1.7rem;
 }
 
-.font-2{
-  font-size: 2.2rem;
+.font-2 {
+    font-size: 2.2rem;
 }
 
-.font-2_2{
-  font-size: 2.2rem;
+.font-2_2 {
+    font-size: 2.2rem;
 }
 
-.font-2_7{
-  font-size: 2.7rem;
+.font-2_7 {
+    font-size: 2.7rem;
 }
 
-
-.font_4{
-  font-size: 4rem;
+.font_4 {
+    font-size: 4rem;
 }
 
-
 .subtitle_1 {
-  font-size: 1.5rem;
+    font-size: 1.5rem;
 }
 
-
+.gap-1 {
+    gap: 0.7rem;
+}
 
 .banner_heading_4 {
-  font-size: 3rem;
+    font-size: 3rem;
 }
 
-
 // padding
-
 .padding_top_14 {
-  padding-top: 14rem;
+    padding-top: 14rem;
 }
 
-.p-6{
-  padding:5rem;
+.p-6 {
+    padding: 5rem;
 }
 
 .padding_top_10 {
-  padding-top: 10rem; }
-
+    padding-top: 10rem;
+}
 
 // heights
-
-.h-10{
-  height: 10%;
+.h-10 {
+    height: 10%;
 }
 
-.h-15{
-  height: 15%;
+.h-15 {
+    height: 15%;
 }
 
-.h-20{
-  height: 20%;
+.h-20 {
+    height: 20%;
 }
 
-.h-30{
-  height: 30%;
+.h-30 {
+    height: 30%;
 }
 
-.h-33{
-  height: 33%;
-}
-.h-34{
-  height: 34%;
-}
-.h-35{
-  height: 35%;
+.h-33 {
+    height: 33%;
 }
 
-.h-40{
-  height: 40%;
+.h-34 {
+    height: 34%;
 }
 
-.vh_60{
-  height: 60vh;
+.h-35 {
+    height: 35%;
 }
 
-.vh-70{
-  height: 70vh;
+.h-40 {
+    height: 40%;
 }
 
-.vh-77{
-  height: 77vh;
+.vh_60 {
+    height: 60vh;
+}
+
+.vh-70 {
+    height: 70vh;
+}
+
+.vh-77 {
+    height: 77vh;
 }
 
 .vh-85 {
-  height: 85vh;
+    height: 85vh;
 }
 
 .vh-15 {
-  height: 15vh;
+    height: 15vh;
 }
 
-.h-700p{
-  height: 700px;
+.h-700p {
+    height: 700px;
 }
 
+// margin
+.mt-7 {
+    margin-top: 7rem;
+}
 
 // font weight
-
-.fw-600{
-  font-weight: 600;
+.fw-600 {
+    font-weight: 600;
 }
 
-
-  .fw-700 {
-    font-weight: 700; }
-
-
-.h-200p{
-  height: 200px;
+.fw-700 {
+    font-weight: 700;
 }
 
+.h-200p {
+    height: 200px;
+}
 
+// spacing
+.sec-space-1 {
+    margin-top: 80px;
+}
+
+.sec-space-2 {
+    margin-top: 60px;
+}
+
+.sec-space-3 {
+    margin-top: 40px;
+}
+
+.sec-space-4 {
+    margin-top: 20px;
+}
+
+.sec-space-5 {
+    margin-top: 0px;
+}
+
+.h-100p {
+    height: 100px;
+}
 
 // gap
-
 .gap-1 {
-  gap: 0.7rem;
+    gap: 0.7rem;
 }
 
-.gap-2{
-  gap:2rem
+.gap-2 {
+    gap: 2rem
 }
 
 // border-radius
-
-.br-1{
-  border-radius: 1rem;
+.br-1 {
+    border-radius: 1rem;
 }