/* Services Styles */

/* --- Homepage Services Block --- */
.section-services li { padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
.section-services li:last-child { padding-bottom: 0; border-bottom: none; }

@media (max-width: 576px) {
	.section-services li { padding: 0.5rem 0; gap: 0.5rem !important; }
	.section-services li svg { width: 18px; height: 18px; margin-top: 2px; }
	.section-services li span:last-child { font-size: 0.85rem !important; }
}

/* --- 1. Problems Section --- */
.section-problems {
    background-color: #f8f9fa; /* Light Gray */
}

.problem-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1.5rem; /* rounded-4 equivalent */
}

.problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.075) !important;
}

.problem-card__decor {
    transition: transform 0.5s ease;
}

.problem-card:hover .problem-card__decor {
    transform: scale(1.2) rotate(15deg);
}

.problem-card__num {
    font-family: var(--font-heading, sans-serif);
    line-height: 1;
}


/* --- 2. Included Section --- */
.section-included .bg-white {
    transition: transform 0.3s ease;
}

.section-included .bg-white:hover {
    transform: translateY(-5px);
}


/* --- 3. Quiz CTA Section --- */
.section-quiz-cta .service-quiz-cta__panel {
    background: linear-gradient(140deg, #044764 0%, #1c252e 100%);
}

.section-quiz-cta .service-quiz-cta__decor {
    background: linear-gradient(180deg, rgba(90, 182, 216, 0.18) 0%, rgba(90, 182, 216, 0.05) 100%);
}

.section-quiz-cta .service-quiz-cta__btn {
    border-color: rgba(255, 255, 255, 0.35);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.section-quiz-cta .service-quiz-cta__btn:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}


/* --- 4. Prices Section --- */
.section-prices table th {
    font-family: var(--font-body, sans-serif);
    letter-spacing: 0.05em;
    background-color: #f8f9fa;
}

.section-prices table td {
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.section-prices table tbody tr:hover td {
    background-color: rgba(var(--bs-primary-rgb), 0.03);
}

.section-prices .card {
    border-radius: 1.5rem;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .section-prices table {
        min-width: 100%;
    }
    
    .section-prices table th:nth-child(2),
    .section-prices table td:nth-child(2) {
        display: none; /* Hide unit on small screens if needed, or make it smaller */
    }
}