/* File: main/static/main/css/services.css */

/* Hero section for the Services page */
.hero-section-services {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
}

/* General content section padding */
.content-section {
    padding: 60px 0;
}

/* Card styling */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Icon styling */
.service-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 20px;
}

/* --- THE FIX FOR THE BULLET POINTS --- */

/* 1. Target the wrapper div for the lists */
.service-list {
    margin-top: 1rem; /* Adds some space above the list */
}

/* 2. Remove any default padding from the list itself */
.service-list ul.list-unstyled {
    padding-left: 0;
    list-style-position: inside;
}

/* 3. Style each list item */
.service-list li {
    position: relative; /* Needed for positioning the bullet point */
    padding-left: 1.5em; /* Create space for the bullet point */
    margin-bottom: 0.5rem; /* Space between list items */
    text-align: left;
}

/* 4. Create the custom bullet point */
.service-list li::before {
    content: '•';
    color: #667eea;
    font-weight: bold;
    font-size: 1.2em; /* Make the bullet slightly larger */
    
    position: absolute; /* Position it relative to the li */
    left: 0;
    top: -0.1em; /* Adjust vertical alignment if needed */
}