centrar cabra y padding fix

Author: quiellll

css/style.css

@@ -294,6 +294,80 @@ body {
     color: var(--bs-secondary) !important;
     font-size: smaller !important;
 }
+/*** Text End ***/
+
+/*** Header Start ***/
+/* Header padding adjustments */
+.portfolio-header,
+.about-header,
+.testimonial-header {
+    padding: 2rem !important; /* Base padding for all screen sizes */
+}
+
+/* Adjust header text sizing and spacing */
+.display-6 {
+    font-size: 1.75rem !important; /* Slightly smaller base size */
+    margin-bottom: 1rem !important;
+    line-height: 1.3 !important;
+}
+
+/* Responsive adjustments */
+@media (min-width: 576px) {
+    .portfolio-header,
+    .about-header,
+    .testimonial-header {
+        padding: 2.5rem !important;
+    }
+    
+    .display-6 {
+        font-size: 2rem !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .portfolio-header,
+    .about-header,
+    .testimonial-header {
+        padding: 3rem !important;
+    }
+    
+    .display-6 {
+        font-size: 2.25rem !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .portfolio-header,
+    .about-header,
+    .testimonial-header {
+        padding: 4% !important;
+    }
+    
+    .display-6 {
+        font-size: 2.5rem !important;
+    }
+}
+
+/* Additional spacing for header content */
+.text-start.d-flex.flex-column.justify-content-center {
+    padding: 0.5rem;
+}
+
+/* Ensure sub-title has proper spacing */
+.sub-title {
+    margin-top: 0.5rem;
+    line-height: 1.4;
+}
+
+/* Add proper spacing when stacked on mobile */
+@media (max-width: 991px) {
+    .portfolio-header,
+    .about-header,
+    .testimonial-header {
+        margin-bottom: 1rem;
+    }
+}
+/*** Header End ***/
 
 /*** Navbar Start ***/
 .nav-section {
@@ -362,21 +436,17 @@ body {
 
 /*** About Start ***/
 .about-content .about-img {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%; 
-    height: auto;    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
     padding-top: 10%;
-    /* margin-left: calc(15%); */
 }
 
 .about-img img {
-    display: block;
-    margin: 0 auto;
     max-width: 100%;
     height: auto;
-    margin: 10%;
-    /* margin-left: calc(50%); */
+    margin: 0 auto;
 }
 
 /*** About End ***/

index.html

@@ -71,10 +71,10 @@ <h1 class="display-6 text-white">Hola, somos</h1>
                                     <h1 class="text-big text-header">Against Software</h1>
                                 </div>
                             </div>
-                            <div class="row xl-5 centered-section-padding">
-                                <div class="col-xl-8">
+                            <div class="row justify-content-center centered-section-padding">
+                                <div class="col-12 col-xl-8">
                                     <div class="about-img p-4 wow fadeInUp" data-wow-delay="0.05s">
-                                        <img src="img/la cabra.png" class="img-fluid w-100" alt="Image">
+                                        <img src="img/la cabra.png" class="img-fluid mx-auto d-block" alt="Image">
                                     </div>
                                 </div>
                             </div>
@@ -118,7 +118,7 @@ <h4 class="text-big">Nuestro manifiesto</h4>
             <div class="container">
                 <div class="row g-0">
                     <div class="col-lg-3">
-                        <div class="portfolio-header h-100 bg-dark pt-6 pe-6 pb-6">
+                        <div class="portfolio-header h-100 bg-dark">
                             <div class="text-start d-flex flex-column justify-content-center wow fadeInUp" data-wow-delay="0.05s">
                                 <h1 class="display-6 text-white">Proyectos pasados de nuestros miembros</h1>
                                 <em class="text-white sub-title">Our team members past works</em>