/* 
Theme Name: FintaxNexus Child
Theme URI: https://fintaxnexus.com/
Description: A child theme for FintaxNexus.
Author: FintaxNexus Team
Template: astra
Version: 1.0.1
Text Domain: fintaxnexus-child
*/

/* =========================================
   Service Grid Premium Layout
   ========================================= */

.fintax-service-grid {
    display: grid;
    /* Use auto-fill to PREVENT stretching if there are few items. 
       They will keep their size and leave empty space. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    padding: 20px 0;
    margin: 40px auto;
    max-width: 1200px; 
}

.fintax-service-card {
    --card-padding: 30px;
    --card-radius: 16px;
    --icon-size: 60px;
    
    background: #fff;
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05); /* Stronger, layered shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy spring transition */
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 1;
}

/* Background Image styling */
.fintax-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--service-bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* Reduced opacity as requested */
    z-index: 0;
    transition: transform 0.5s ease;
}

.fintax-service-card:hover .fintax-card-bg {
    transform: scale(1.1);
}

.fintax-card-inner {
    position: relative;
    z-index: 1;
}

/* Hover Effect: Lift and Deepen Shadow */
.fintax-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* 
   Gradient Background Overlay on Hover 
   Uses the theme color to create a soft gradient wash
*/
.fintax-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--service-theme-color), transparent 60%);
    opacity: 0.2;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.fintax-service-card:hover::before {
    opacity: 0.5;
}

/* =========================================
   Icon Styling
   ========================================= */
.fintax-icon-wrapper {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    
    /* Use current color specifically for the icon box shadow/bg tint */
    box-shadow: 0 8px 20px -6px var(--service-theme-color); 
    
    /* To tint the background slightly with the theme color */
    background-image: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.9) 100%);
    
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.fintax-service-card:hover .fintax-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 25px -8px var(--service-theme-color);
}

.fintax-icon-wrapper i,
.fintax-icon-wrapper span.dashicons {
    font-size: 32px;
    color: var(--service-theme-color);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

/* =========================================
   Typography & Content
   ========================================= */
.fintax-service-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #2c3e50;
    transition: color 0.3s ease;
    letter-spacing: -0.02em;
}

.fintax-service-card:hover .fintax-service-title {
    color: var(--service-theme-color);
}

.fintax-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fintax-features-list li {
    position: relative;
    padding-left: 24px; /* Space for bullet */
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    transition: transform 0.3s ease;
}

/* Custom Bullet Points */
.fintax-features-list li::before {
    content: "•"; /* Simple fallback */
    color: var(--service-theme-color);
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -4px; /* Adjust visual alignment */
    line-height: 1;
}

/* Replace bullet with small SVG checkmark or dot for cleaner look */
.fintax-features-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--service-theme-color);
    border-radius: 50%;
    top: 8px; /* Center with text */
    font-size: 0;
}

/* Micro-interaction on list hover */
.fintax-features-list li:hover {
    transform: translateX(5px);
    color: #333;
}

/* =========================================
   Responsive Design
   ========================================= */
@media (max-width: 768px) {
    .fintax-service-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px;
    }
    
    .fintax-service-card {
        margin-bottom: 10px;
    }
}