/* CSS to ensure equal height cards and aligned "Read More" buttons */

/* Make all cards in a row equal height */
.service-section .row {
    display: flex;
    flex-wrap: wrap;
}

/* Make each service box take full height of its column */
.service-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px !important; /* Consistent margin */
}

/* Make service thumb take full height */
.service-box .service-thumb {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Make service content expand to fill available space */
.service-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    margin: -100px 15px 0 !important; /* Match margins but keep the negative top */
    padding: 0 20px 0 !important; /* Remove bottom padding to control it in service-text */
    background-color: #e63a27 !important; /* Ensure consistent background */
}

/* Make service text take available space */
.service-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-bottom: 15px; /* Add padding at bottom to ensure space */
}

/* Override the paragraph style to ensure consistent height */
.service-text p {
    flex-grow: 1;
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Remove the ::before element on paragraphs to avoid lines in wrong places */
.service-text p::before {
    display: none !important;
}

/* Position "Read More" link at the bottom of the content area */
.service-text a {
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px 0 !important;
    text-align: center !important;
    display: block !important; /* Ensure it's a block element */
    width: 100% !important; /* Take full width */
    text-decoration: none !important; /* Remove underline */
}

/* Ensure icon thumb is properly positioned */
.service-icon-thumb {
    margin-bottom: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .service-content {
        margin: -100px 15px 0 !important; /* Keep consistent margin */
    }
}

@media (max-width: 767px) {
    .service-content {
        margin: -100px 10px 0 !important; /* Smaller margin on mobile */
    }
    
    .service-box {
        margin-bottom: 40px !important; /* More space between cards on mobile */
    }
}