edit home section 5

dist/output.css

@@ -841,14 +841,14 @@ body:is(.dark *) {
   position: relative;
   margin-left: auto;
   margin-right: auto;
-  height: 400px;
-  width: 400px;
+  height: 500px;
+  width: 500px;
 }
 
 @media (min-width: 768px) {
   .circular-layout {
-    height: 500px;
-    width: 500px;
+    height: 600px;
+    width: 600px;
   }
 }
 
@@ -872,6 +872,55 @@ body:is(.dark *) {
   transform: translate(50%, 50%);
 }
 
+@media (max-width: 767px) {
+  .bg-black\/80 {
+    background-image: none;
+  }
+
+  .circular-layout {
+    display: flex;
+    height: auto;
+    width: 100%;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .title-container {
+    position: relative;
+    top: 0px;
+    margin-bottom: 1.25rem;
+  }
+
+  .pill-button-container {
+    margin-bottom: 1rem;
+    width: 100%;
+    max-width: 350px;
+  }
+
+  .pill-button {
+    width: 100%;
+    border-radius: 50px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    text-align: center;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  body, html {
+    overflow-x: hidden;
+  }
+
+  section {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+
 .absolute {
   position: absolute;
 }
@@ -925,6 +974,11 @@ body:is(.dark *) {
   margin-right: -50vw;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -967,6 +1021,10 @@ body:is(.dark *) {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-3 {
   height: 0.75rem;
 }
@@ -1027,6 +1085,10 @@ body:is(.dark *) {
   max-width: 28rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1079,6 +1141,12 @@ body:is(.dark *) {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1150,37 +1218,24 @@ body:is(.dark *) {
   padding-right: 1rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
-}
-
-.py-32 {
-  padding-top: 8rem;
-  padding-bottom: 8rem;
-}
-
 .py-48 {
   padding-top: 12rem;
   padding-bottom: 12rem;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
-}
-
-.pt-12 {
-  padding-top: 3rem;
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .pb-24 {
@@ -1310,6 +1365,14 @@ body:is(.dark *) {
 }
 
 @media (min-width: 768px) {
+  .md\:block {
+    display: block;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:h-5 {
     height: 1.25rem;
   }