pricing page layout

resources/views/pricing.antlers.html

@@ -7,7 +7,7 @@
             <p class="text-light">Harness the Full Force of Innovation in every aspect of operation</p>
         </div>
 
-        <div class="position-absolute d-flex flex-row container-fluid"
+        <div class="position-absolute d-flex flex-column flex-md-row container-fluid"
             style="gap: 35px;width: 80%; left: 50%; bottom: 20%; transform: translateX(-50%);">
 
             <div class="flex-grow-1 ms-5 position-relative">
@@ -30,7 +30,7 @@
 
 <section class="pricing-section1 features bg-white px-6">
 
-    <div class="d-flex flex-row justify-content-center mb-5" style="gap: 50px;">
+    <div class="d-flex flex-column flex-md-row justify-content-center mb-5" style="gap: 50px;">
         <div class="text-end">
             <h2>Plans & Pricng</h2>
             <h5 class="text-primary2">Nemo enim ipsam</h5>
@@ -41,7 +41,7 @@
         </div>
     </div>
 
-    <div class="d-flex container-fluid px-6" style="gap: 35px;">
+    <div class="d-flex flex-column flex-md-row container-fluid px-6" style="gap: 35px;">
         <div>
             <div class="pricing-card p-5">
                 <h5 class="" style="font-weight: 500;">Professional</h5>
@@ -124,7 +124,7 @@
 
     <div class="container-fluid d-flex position-relative mt-5 px-6">
 
-        <div class="d-flex flex-row container-fluid p-0" style="gap:20px">
+        <div class="d-flex flex-column flex-md-row container-fluid p-0" style="gap:20px">
 
             <div class="flex-grow-1 position-relative">
                 <input id="pricng-email-input2" type="text" class="form-control" placeholder="Pay Monthly">
@@ -132,7 +132,7 @@
                     style="top: 2.5px;right: 2px;color: #000;">Pay Yearly (Save RM 30)</button>
             </div>
 
-            <div class="px-5" style="max-width: 35%;">
+            <div class="px-5">
                 <p class="text-secondary2 text-start p-small m-0">*Yearly discount available on select plans Prices may
                     vary by your store location.</p>
             </div>
@@ -163,36 +163,36 @@
             <button type="button" class="btn-amics-small fw-bold ms-auto" style="color:#000">Start Free Trial</button>
         </div>
 
-        <div class="d-flex flex-wrap">
-            <div class="p-2" style="width:20%;">
+        <div class="d-flex flex-column flex-md-row">
+            <div class="p-2">
                 <div class="plan-feature-card">
                     <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                     <p class="p-small fw-bold">Lorem Ipsum</p>
                     <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                 </div>
             </div>
-            <div class="p-2" style="width:20%;">
+            <div class="p-2">
                 <div class="plan-feature-card">
                     <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                     <p class="p-small fw-bold">Lorem Ipsum</p>
                     <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                 </div>
             </div>
-            <div class="p-2" style="width:20%;">
+            <div class="p-2">
                 <div class="plan-feature-card">
                     <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                     <p class="p-small fw-bold">Lorem Ipsum</p>
                     <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                 </div>
             </div>
-            <div class="p-2" style="width:20%;">
+            <div class="p-2">
                 <div class="plan-feature-card">
                     <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                     <p class="p-small fw-bold">Lorem Ipsum</p>
                     <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                 </div>
             </div>
-            <div class="p-2" style="width:20%;">
+            <div class="p-2">
                 <div class="plan-feature-card">
                     <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                     <p class="p-small fw-bold">Lorem Ipsum</p>
@@ -224,14 +224,14 @@
     </p>
     <div class="row" style="margin-bottom: 70px;">
 
-        <div class="col-6">
+        <div class="col-12 col-md-6">
             <p class="text-secondary2 p-small">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                 labore et dolore magna aliquyam erat, sed diam voluptua.
             </p>
         </div>
 
-        <div class="col-6">
+        <div class="col-12 col-md-6">
             <div class="flex-grow-1 position-relative">
                 <input id="pricng-email-input2" type="text" class="form-control" placeholder="Enter Your Email Address">
                 <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"