.li_padding li {
    padding-bottom: 10px !important;
}

/* Global justification for paragraphs and list items */
p,
li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Optional: Exclude navbar/footer links if they look bad, but user asked for "all text" initially. 
   Will verify visually. Usually nav links are short and won't be affected by justify unless they wrap. 
*/

/* ----------------------------------------------------------- */
/* GLASSMORPHISM UPGRADE FOR SERVICE CARDS */
/* ----------------------------------------------------------- */
.service-item {
    background: rgba(255, 255, 255, 0.9) !important;
    /* Semi-transparent white */
    backdrop-filter: blur(10px);
    /* Blur effect behind */
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    /* Soft shadow */
    border-radius: 15px !important;
    /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Subtle border */
    transition: all 0.3s ease !important;
    /* Smooth transition */
    padding: 30px;
    /* Ensure content has breathing room */
}

/* Lift Effect on Hover */
.service-item:hover {
    transform: translateY(-10px);
    /* Move up */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
    /* Deeper shadow */
    background: rgba(255, 255, 255, 1) !important;
    /* Solid on hover for contrast */
}

/* Icon Container Styling Upgrade */
.service-item .service-icon {
    background: linear-gradient(135deg, #0B5989 0%, #00a8cc 100%) !important;
    /* Gradient brand color */
    color: #fff !important;
    border-radius: 12px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    /* Center icon */
    box-shadow: 0 5px 15px rgba(11, 89, 137, 0.3);
}




@media (max-width: 991.98px) {
    .navbar-brand h1 {
        font-size: 1.5rem;
        /* Reduce navbar brand size */
        margin: 0;
    }

    /* Force Navbar Brand and Toggler to be side-by-side */
    .navbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .navbar-brand {
        flex-grow: 1;
        /* Allow brand to take space */
        max-width: 80%;
        /* Prevent it from pushing toggler off */
    }

    .navbar-toggler {
        margin-left: auto !important;
        /* Push toggler to right */
    }

    .hero-header .display-4 {
        font-size: 2.5rem;
        /* Reduce hero heading size */
        word-wrap: break-word;
        /* Ensure long words don't overflow */
    }

    .mb-4 {
        font-size: 1rem;
        /* Adjust paragraph size if needed */
    }
}

@media (max-width: 575.98px) {
    .navbar-brand h1 {
        font-size: 1.2rem;
        /* Further reduce for mobile */
    }

    .hero-header .display-4 {
        font-size: 2rem;
        padding-top: 20px;
        /* Add space to prevent navbar overlap */
    }

    .hero-header {
        padding-top: 8rem !important;
        /* Force extra top padding on mobile */
    }
}