/* About Section Alignment Fix */

/* Target the about section by ID and fix excessive horizontal margins */
#about {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix the specific md:mx-12 class that causes excessive margins */
@media (min-width: 768px) {
    #about {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Override the md:mx-12 class specifically */
    #about.md\:mx-12,
    #about .md\:mx-12 {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Ensure proper alignment with other sections */
#about .container,
#about > div {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
}

/* Target any element with About Mumbai Central heading */
#about h1[class*="text-3xl"],
#about h1[class*="text-4xl"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

/* Fix any container with excessive margins */
#about [class*="mx-12"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure text content is properly aligned */
#about h1,
#about h2,
#about h3,
#about p {
    text-align: left;
}

@media (min-width: 768px) {
    #about h1,
    #about h2,
    #about h3 {
        text-align: left;
    }
}

/* Additional fix for any flex containers in the about section */
#about [class*="flex"],
#about [class*="md:flex"] {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
}

@media (min-width: 480px) {
    #about {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}