section 2 of services

public/assets/css/styles.css

@@ -120,6 +120,8 @@ body {
 }
 
 .button-wrapper {
+    display: flex;
+    justify-content: flex-end;
     margin-top: 28px;
 }
 
@@ -309,7 +311,7 @@ body {
 .module-iconbox {
     display: grid !important;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    column-gap: 24px;
+    column-gap: 28px;
     row-gap: 38px;
     align-items: stretch;
 }
@@ -391,4 +393,113 @@ body {
 .about-card2 strong {
     color: #0f172a;
     font-weight: 650;
-}
+}
+
+/*---------------------------------------------*/
+/*Services Intro-Section*/
+/*----------------------------------------------*/
+.about-intro-card {
+    max-width: 1150px;
+    width: 90%;
+    margin: 0 auto;
+    padding: 42px 48px;
+    text-align: left;
+}
+
+/* Center the buttons */
+.about-intro-card .button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+    margin-top: 32px;
+}
+
+/* Mobile fix */
+@media (max-width: 768px) {
+    .about-intro-card {
+        width: 94%;
+        padding: 30px 22px;
+    }
+
+    .about-intro-card .button-wrapper {
+        flex-direction: column;
+    }
+
+    .about-intro-card .about-btn {
+        width: 100%;
+    }
+}
+
+/*---------------------------------------------*/
+/*Services -Learn MoreButton-*/
+/*----------------------------------------------*/
+
+.about-card-wrapper {
+    width: 100%;
+}
+/* Hide services by default */
+.services-content {
+    display: none;
+    margin-top: 22px;
+    padding: 22px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 18px;
+    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+    animation: fadeSlide 0.35s ease;
+}
+
+/* Show when active */
+.services-content.show {
+    display: block;
+}
+
+@keyframes fadeSlide {
+    from {
+        opacity: 0;
+        transform: translateY(12px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*---------------------------------------------*/
+/*Services -Process*/
+/*----------------------------------------------*/
+/* Parent container for the cards */
+.about-card3-wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 28px;
+    row-gap: 36px;
+    align-items: stretch;
+}
+
+.about-card3 {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(244, 162, 174, 0.45), rgba(59, 130, 246, 0.25) );
+    border-radius: 22px;
+    padding: 28px 24px;
+    border: 1px solid rgba(226, 232, 240, 0.9);
+    text-align: left;
+    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
+    transition: all 0.35s ease;
+}
+
+/* Optional hover effect */
+.about-card3:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
+}
+
+/* Mobile: 1 card per row */
+@media (max-width: 768px) {
+    .about-card3-wrapper {
+        grid-template-columns: 1fr;
+        row-gap: 24px;
+    }
+}