/* Style for Service Pages - services-style.css */

/* General Main Section Styling */
.service-page-main {
    padding-top: 80px; /* Adjust based on your navbar height */
    padding-bottom: 50px;
    background-color: #f8f9fa; /* Light background for the content area */
}

/* Hero Section Styles (Optional - if you use a hero image/intro section) */
.service-hero-section {
    background-color: #e9ecef; /* Light gray background */
    padding: 60px 0;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.service-hero-section .display-4 {
    color: #007bff; /* Primary color for main heading */
}
.service-hero-section .lead {
    color: #495057; /* Darker text for readability */
}
.service-hero-section img {
    border-radius: 8px;
    object-fit: cover;
    max-height: 350px; /* Ensure images are consistent height */
    width: 100%;
}
@media (max-width: 991.98px) { /* On smaller screens, remove margin top from image */
    .service-hero-section .col-lg-5 img {
        margin-top: 20px;
    }
}


/* Card Styles for Features/Problem Lists */
.service-card {
    border: none;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 180px; /* Ensure cards have minimum height */
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}
.service-card .card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content in cards */
    text-align: center;
}
.service-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.service-card .card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c757d; /* Muted text color */
}
.service-card i {
    margin-bottom: 15px; /* Space below icons */
    font-size: 3rem; /* Larger icons */
}

/* Styles for the "Related Articles" section */
.related-articles-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0; /* Light separator line */
}
.related-articles-section h2 {
    color: #343a40;
    font-weight: 700;
    margin-bottom: 30px;
}
/* Article card image within service pages */
.article-card-img {
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Crops image to fit */
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.card.h-100.shadow-sm { /* Existing article card style, adjust if needed */
    border-radius: 8px;
    overflow: hidden; /* Ensures image corners are rounded */
}
.card-body.d-flex.flex-column .card-title { /* Specific style for article titles */
    font-size: 1.15rem;
    line-height: 1.4;
}
.card-body.d-flex.flex-column .card-text { /* Specific style for article summary */
     font-size: 0.875rem;
     line-height: 1.5;
    }
    
/* Call to Action/Contact Form Section */
.service-contact-form-section {
     background-color: #ffffff; /* White background for the form card */
     border-radius: 8px;
     padding: 30px;
     margin-top: 50px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
.service-contact-form-section h3 {
     color: #007bff; /* Primary color for form heading */
     font-weight: 700;
    }
.service-contact-form-section .btn-success {
     background-color: #28a745;
     border-color: #28a745;
     font-size: 1.1rem;
     font-weight: 600;
     transition: background-color 0.3s ease;
    }
.service-contact-form-section .btn-success:hover {
     background-color: #218838;
     border-color: #1e7e34;
    }
    
/* General typography */
h1, h2, h3, h4, h5, h6 {
     font-family: 'Vazirmatn', sans-serif;
    }
p, li, a, span, div {
     font-family: 'Vazirmatn', sans-serif;
    }