/*
 * Calitax Service Cards Plugin Stylesheet
 * Version: 1.0.0
 * This file styles the output of the [calitax_service_cards] shortcode.
 */

/* Import Google Font for a professional look */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Main container for the cards section */
.calitax-services-container {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
    padding: 40px 15px; /* Add vertical space and side padding for smaller screens */
    box-sizing: border-box;
}

/* Responsive grid for the cards */
.services-grid {
    display: grid;
    /* Creates a responsive grid that adjusts the number of columns based on screen width */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px; /* Space between the cards */
    text-align: left;
}

/* Individual service card styling */
.service-card {
    background-color: #f9f9f9; /* Light grey background */
    padding: 40px;
    border-radius: 8px;
    border-left: 5px solid #d4af37; /* Gold accent color on the left */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animations */
}

/* Hover effect for the cards */
.service-card:hover {
    transform: translateY(-10px); /* Lifts the card up slightly */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* More pronounced shadow on hover */
}

/* Icon styling */
.service-card .icon {
    font-size: 3rem;
    color: #0a1f44; /* Dark Blue to match branding */
    margin-bottom: 20px;
}

/* Card heading (h3) styling */
.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0a1f44;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Card paragraph styling */
.service-card p {
    color: #444;
    margin-bottom: 20px;
}

/* Unordered list styling */
.service-card ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* List item styling */
.service-card ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    color: #333;
}

/* Custom checkmark icon for list items using Font Awesome */
.service-card ul li::before {
    content: '\f00c'; /* FontAwesome check icon unicode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Use the solid style of the icon */
    color: #d4af37; /* Gold color for the checkmark */
    position: absolute;
    left: 0;
    top: 2px;
}