/* ===================================
   Main Styles CSS
   =================================== */

/* Global Font Styles */
body {
    font-family: 'Nunito', serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gotu', sans-serif;
}

/* Responsive: Remove divider on mobile, show on desktop */
@media (max-width: 767px) {
    .stitched-col-divider {
        border-left: none;
    }
}

@media (min-width: 768px) {
    .md\:stitched-divider-none {
        border-top: none;
    }

    .md\:stitched-col-divider {
        border-left: 1px dashed rgba(99, 41, 99, 0.3);
    }
}

/* Concerns Grid Hover Effects */
.concern-card {
    position: relative;
    overflow: hidden;
}

.concern-overlay {
    background: rgba(40, 40, 40, 0.85);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none; /* Prevent clicks when hidden */
    transition: all 0.4s ease;
}

.concern-card:hover .concern-overlay,
.concern-card.active .concern-overlay {
    opacity: 1;
    pointer-events: auto; /* Enable clicks when visible */
}

.concern-title {
    transition: all 0.4s ease;
    transform: translateY(0);
}

.concern-card:hover .concern-title,
.concern-card.active .concern-title {
    transform: translateY(20px);
    opacity: 0;
}