/* Font declaration for Alerion */
@font-face {
    font-family: 'Alerion';
    src: url('https://243122109.fs1.hubspotusercontent-na2.net/hubfs/243122109/Aileron-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Module Container */
.card-grid-module {
    font-family: 'Alerion', Arial, sans-serif;
    padding: 4rem 0;
    max-width: 100%;
    margin: 0 auto;
}

/* Section Header */
.section-header {
    text-align: center;
    font-family: 'Alerion', Arial, sans-serif;
    margin-bottom: 4rem;
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-family: 'Alerion', Arial, sans-serif;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-description {
    font-size: clamp(0.95rem, 1.5vw, 2rem);
    max-width: 70%;
    margin: 0 auto;
    line-height: 1.6;
}

/* Cards Container with 7% margins */
.cards-container {
    margin: 0 7%;
    width: 86%;
/*     font-weight:300; */
}

/* Grid System */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem 2rem;
    justify-items: center;
    align-items: stretch; /* Makes all cards same height */
}

/* Individual Card */
.card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 280px;
    width: 100%;
    height: 100%; /* Fill grid cell height */
}

/* Card Icon */
.card-icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: clamp(100px, 12vw, 175px); /* Set container size */
    height: clamp(100px, 12vw, 175px); /* Set container size */
}

.card-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Fit image within square container */
}

/* Card Title */
.card-title {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-family: 'Alerion', Arial, sans-serif;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.3;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Card Description Container - Fixed height for uniform alignment */
.card-description {
    font-size: clamp(0.85rem, 1.2vw, 1.25rem);
    font-family: 'Alerion', Arial, sans-serif;
    color: #666;
    line-height: 1.5;
    margin-bottom: 1.5rem; /* Fixed gap before category */
    max-width: calc(clamp(50px, 12vw, 175px) * 2);
    text-align: center;
    flex: 1; /* Takes up available space */
    display: flex;
    align-items: flex-start; /* Align text to top of container */
}

/* Card Category - Always at bottom */
.card-category {
    font-size: clamp(0.75rem, 1vw, 1rem);
    font-family: 'Alerion', Arial, sans-serif;
    font-weight: 600; !important;
    color: grey; !important;
    margin-top: auto; /* Pushes to bottom */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Responsive Breakpoints */
@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 767px) {
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .cards-container {
        margin: 0 5%;
        width: 90%;
    }
    
    .card-description {
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .section-header {
        margin-bottom: 2rem;
    }
    
    .card-grid-module {
        padding: 2rem 0;
    }
}