Services Content added

public/assets/css/styles.css

@@ -26,9 +26,10 @@ body {
     background: #ffffff;
     border-radius: 24px;
     padding: 50px 45px;
-    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+    /*box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);*/
     border: 1px solid #eef2f7;
     text-align: left;
+    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.16);
 }
 
 .about-card h2 {
@@ -88,7 +89,7 @@ body {
 }
 
 .belief-box {
-    background: linear-gradient(135deg, #f8fbff, #F4A2AE);
+    background: linear-gradient(135deg, rgba(244, 162, 174, 0.45), rgba(59, 130, 246, 0.25));
     border-left: 6px solid #F4A2AE;
     border-radius: 18px;
     padding: 28px 24px;
@@ -113,7 +114,9 @@ body {
 
 .connect-card {
     text-align: center;
-    background: linear-gradient(135deg, #ffffff, #f8fafc);
+    /*background: linear-gradient(135deg, #ffffff, #f8fafc);*/
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(244, 162, 174, 0.45) );
+
 }
 
 .button-wrapper {
@@ -170,11 +173,7 @@ body {
 .meet-toks-section h2 {
     margin-bottom: 18px;
 }
-/*.title-head-subtitle {*/
-/*    display: block;*/
-/*    margin-bottom: 20px;*/
-/*    line-height: 1.7;*/
-/*}*/
+
 /*---------------------------------------------*/
 /*About-Profile image*/
 /*----------------------------------------------*/
@@ -235,4 +234,161 @@ body {
     .profile-image {
         border-radius: 22px;
     }
+}
+
+/*---------------------------------------------*/
+/*Services Section*/
+/*----------------------------------------------*/
+/* Compact service list */
+.about-list2 {
+    list-style: none;
+    padding: 0;
+    margin: 14px 0 18px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 9px;
+}
+
+/* Fancy compact pills */
+.about-list2 li {
+    background: rgba(255, 255, 255, 0.85);
+    color: #f4a2ae;
+    padding: 8px 10px;
+    border-radius: 999px;
+    border: 1px solid #e2e8f0;
+    font-size: 0.78rem;
+    line-height: 1.25;
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
+    white-space: normal;
+}
+
+.about-list2 li strong {
+    font-weight: 600;
+}
+
+/* Keep clean-list spacing, but do NOT override columns */
+.clean-list2 {
+    margin-bottom: 0px;
+}
+
+/* Button tighter */
+.about-card2 .btn {
+    margin-top: 4px;
+    font-size: 0.85rem;
+}
+
+
+/* Tablet: 2 cards per row */
+@media (max-width: 1024px) {
+    .module-iconbox {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .about-card2 {
+        padding: 26px 22px;
+    }
+}
+/* Mobile: 1 card per row */
+@media (max-width: 768px) {
+    .module-iconbox {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .about-card {
+        padding: 24px 20px;
+        border-radius: 20px;
+    }
+
+    .about-list2 {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Card row layout: max 3 cards per row */
+.module-iconbox {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    column-gap: 24px;
+    row-gap: 38px;
+    align-items: stretch;
+}
+
+/* Make each card fill its grid space */
+.module-iconbox .max-w-full {
+    width: 100%;
+    max-width: 100%;
+}
+
+.about-card2 {
+    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;
+    position: relative;
+    overflow: hidden;
+}
+
+
+/* Hover effect */
+.about-card2:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
+    border-color: rgb(195, 190, 239);
+}
+
+/* Icon styling */
+.about-card2 .iconbox-icon-wrap {
+    margin-bottom: 8px;
+}
+
+.about-card2 .iconbox-icon-container {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 18px !important;
+    border-radius: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
+    color: #d592ea;
+    box-shadow: inset 0 0 0 1px rgb(173, 166, 231);
+}
+
+.about-card2 svg {
+    width: 24px;
+    height: 24px;
+}
+
+.about-card2 svg path {
+    fill: currentColor;
+}
+
+/* Card heading */
+.about-card2 h3,
+.about-card2 .lqd-iconbox-heading {
+    font-size: 1.08rem !important;
+    font-weight: 750;
+    color: #0f172a;
+    line-height: 1.25;
+    margin-bottom: 12px !important;
+    letter-spacing: -0.02em;
+}
+
+/* Paragraphs compact */
+.about-card2 p {
+    font-size: 0.9rem;
+    line-height: 1.55;
+    color: #475569;
+    margin-bottom: 14px;
+}
+
+.about-card2 strong {
+    color: #0f172a;
+    font-weight: 650;
 }