/* Page-specific styles for solution-home-insurance-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* --- Use Cases Section Fixes --- */

/* Use Flexbox for the container holding the Use Case cards */
.block100.p20:has(.card1) {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.card1 {
    flex: 1 1 calc(33.333% - 2rem);
    min-width: 300px;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Fix the stretched images inside the Use Case cards */
.card1 img.img-responsive {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.card1 .block100.p20 {
    padding: 1.5rem;
    flex: 1;
}

.card1 strong {
    color: #0c233e;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* --- FAQ Section Fixes --- */

/* Align the text and the arrow icon horizontally */
.accordion {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 0;
    gap: 1.5rem;
}

.accordion .nrmltxt {
    flex: 1; /* Allows the text to take up remaining space */
}

.accordion strong {
    color: #0c233e;
    display: block;
    margin-bottom: 0.5rem;
}

/* Fix the huge arrow icon and push it to the right */
.accordion img {
    width: 24px; /* Fix the massive size */
    height: auto;
    margin-top: 4px !important; /* Override inline margin-top */
    margin-left: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Tidy up the divider lines in the FAQ */
.full-section:has(.accordion) hr {
    border-top: 1px solid #dcdcdc;
    margin: 0;
}