/* Disable the theme overlays completely */
.page-title-layout1.bg-overlay::before,
.page-title-layout1.bg-overlay::after{
    background: transparent !important;
    opacity: 0 !important;
}

/* Optional: add your own lighter overlay */
.page-title-layout1{
    position: relative;
}

.page-title-layout1 .bg-img::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.0.9); /* adjust darkness here */
}
/* --------  / title opacity end */

 /* ============================================================
       1. THE HEADER OVERRIDE - MENU
       ============================================================ */
    header.header:not(.fixed-navbar), .header-layout1:not(.fixed-navbar) {
        background-color: #1a1a1a !important; 
    }
    header[class*="fixed"], header[class*="sticky"], .fixed-navbar {
        background-color: #ffffff !important;
    }
    header[class*="fixed"] .nav__item-link, .fixed-navbar .nav__item-link {
        color: #222222 !important; 
    }

    /* ============================================================
       2. SERVICES GRID STYLING (FIXED FOR DISTORTION)
       ============================================================ */
    #services-section {
        padding: 100px 0;
        background-color: #fcfcfc;
    }

    /* Standardize column heights to prevent grid breakage */
    .services-wrapper .row {
        display: flex;
        flex-wrap: wrap;
    }

    .service-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 30px;
        transition: all 0.4s ease;
        border: 1px solid #eee;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        height: calc(100% - 30px); /* Account for margin-bottom */
        display: flex;
        flex-direction: column;
    }

    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border-color: #28a745;
    }

    .service-img-wrapper {
        position: relative;
        height: 240px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .service-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .service-card:hover .service-img-wrapper img {
        transform: scale(1.1);
    }

    .service-content {
        padding: 30px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .service-title {
        font-size: 1.4rem;
        font-weight: 800;
        color: #1a1a1a;
        margin-bottom: 15px;
        line-height: 1.3;
        /* Force titles to take same space to prevent snagging */
        min-height: 3.6em; 
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .service-excerpt {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 20px;
        /* Standardize description height */
        min-height: 4.8em;
    }

    .btn-service {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        color: #28a745;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
        text-decoration: none;
        transition: 0.3s;
    }

    .btn-service i {
        margin-left: 8px;
        transition: 0.3s;
    }

    .btn-service:hover { color: #1a1a1a; }
    .btn-service:hover i { transform: translateX(5px); }

    .section-header { margin-bottom: 60px; }
    .section-header .divider {
        width: 60px;
        height: 4px;
        background: #28a745;
        margin: 20px auto;
    }

    /* Fix for smaller screens */
    @media (max-width: 767px) {
        .service-title { min-height: auto; }
        .service-excerpt { min-height: auto; }
    }