/* =========================================================
   4-CARD VALUES SECTION (.about-diff--4-cards)
   Figma Exact Implementation (1520px Container Baseline)
   ========================================================= */

.about-diff--4-cards {
    position: relative !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    padding-block: clamp(5.416688rem, 6.7708vw, 8.125rem) !important;
    overflow: hidden !important;
}

/* Gradient background */
.about-diff--4-cards .about-diff__gradients {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Container */
.about-diff--4-cards .careers-values__container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 97.5rem !important;
    padding-inline: clamp(0.833313rem, 1.0417vw, 1.25rem) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Header container: 750px width, 134px height */
.about-diff--4-cards .careers-values__header {
    width: 100% !important;
    max-width: clamp(31.25rem, 39.0625vw, 46.875rem) !important;
    margin: 0 auto clamp(3.75rem, 4.6875vw, 5.625rem) auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Why Choose Thevisiontech? */
.about-diff--4-cards .careers-values__title {
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: clamp(2.25rem, calc(2.8125vw * var(--desktop-font-vw-scale, 1)), 3.375rem) !important;
    line-height: clamp(2.666688rem, 3.3333vw, 4rem) !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: capitalize !important;
    color: #000000 !important;
    margin: 0 0 clamp(0.583313rem, 0.7292vw, 0.875rem) 0 !important;
}

/* Subtitle description */
.about-diff--4-cards .careers-values__description {
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: clamp(0.75rem, calc(0.9375vw * var(--desktop-font-vw-scale, 1)), 1.125rem) !important;
    line-height: clamp(1.25rem, 1.5625vw, 1.875rem) !important;
    letter-spacing: normal !important;
    text-align: center !important;
    color: #000000 !important;
    opacity: 0.6 !important;
    max-width: clamp(31.25rem, 39.0625vw, 46.875rem) !important;
    margin: 0 !important;
}

/* Cards Wrapper */
.about-diff--4-cards .careers-values__cards {
    width: 100% !important;
    max-width: 95rem !important;
    margin-inline: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Card Styling: background rgba(255, 255, 255, 0.6), border-radius 20px */
.about-diff--4-cards .careers-values__card,
.about-diff--4-cards .careers-values__card:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(1.25rem) !important;
    -webkit-backdrop-filter: blur(1.25rem) !important;
    border-radius: clamp(0.833313rem, 1.0417vw, 1.25rem) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Card Title: DM Sans 500, 24px/30px, max-width 265px */
.about-diff--4-cards .careers-values__card-title {
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: clamp(1rem, calc(1.25vw * var(--desktop-font-vw-scale, 1)), 1.5rem) !important;
    line-height: clamp(1.25rem, 1.5625vw, 1.875rem) !important;
    text-align: center !important;
    color: #000000 !important;
    margin: 0 0 clamp(0.833313rem, 1.0417vw, 1.25rem) 0 !important;
    max-width: 16.5625rem !important;
    width: 100% !important;
}

/* Card Description: DM Sans 500, 18px/30px, max-width 265px, opacity 0.6 */
.about-diff--4-cards .careers-values__card-description {
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: clamp(0.875rem, calc(0.9375vw * var(--desktop-font-vw-scale, 1)), 1.125rem) !important;
    line-height: clamp(1.25rem, 1.5625vw, 1.875rem) !important;
    text-align: center !important;
    color: #000000 !important;
    opacity: 0.6 !important;
    margin: 0 !important;
    max-width: 16.5625rem !important;
    width: 100% !important;
}

/* Desktop Grid (min-width: 1024px) */
@media (min-width: 1024px) {
    .about-diff--4-cards .careers-values__cards,
    .about-diff--4-cards .careers-values__cards .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: clamp(0.833313rem, 1.0417vw, 1.25rem) !important;
        width: 100% !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .about-diff--4-cards .careers-values__card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: clamp(15.208312rem, 19.0104vw, 22.8125rem) !important;
        min-height: clamp(13.75rem, 17.1875vw, 20.625rem) !important;
        height: 100% !important;
        padding: clamp(2.083312rem, 2.6042vw, 3.125rem) clamp(2.083312rem, 2.6042vw, 3.125rem) !important;
    }
}

/* Tablet & Mobile Grid (< 1024px) */
@media (max-width: 1023px) {
    .about-diff--4-cards.careers-values,
    .about-diff--4-cards {
        overflow: visible !important;
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .about-diff--4-cards .careers-values__container {
        padding-inline: 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .about-diff--4-cards .careers-values__cards,
    .about-diff--4-cards .careers-values__cards.swiper {
        overflow: visible !important;
        width: 100% !important;
    }

    .about-diff--4-cards .careers-values__cards,
    .about-diff--4-cards .careers-values__cards .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .about-diff--4-cards .careers-values__card,
    .about-diff--4-cards .careers-values__card.swiper-slide {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 16.25rem !important;
        align-self: stretch !important;
        flex-shrink: 1 !important;
        padding: 2.25rem 1.5rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .about-diff--4-cards .careers-values__card-title {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.3125rem !important;
        line-height: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .about-diff--4-cards .careers-values__card-description {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.9375rem !important;
        line-height: 1.5rem !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .about-diff--4-cards .careers-values__title {
        font-size: 1.625rem !important;
        line-height: 1.25 !important;
    }

    .about-diff--4-cards .careers-values__container {
        width: 100% !important;
        max-width: calc(100% - 2.5rem) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }

    .about-diff--4-cards .careers-values__card {
        padding: 1.75rem 1.125rem !important;
        min-height: 13.75rem !important;
        border-radius: 1.25rem !important;
    }

    .about-diff--4-cards .careers-values__card-title {
        font-size: 1.25rem !important;
        line-height: 1.625rem !important;
        margin-bottom: 0.75rem !important;
    }

    .about-diff--4-cards .careers-values__card-description {
        font-size: 0.9375rem !important;
        line-height: 1.5rem !important;
    }
}

@media (max-width: 640px) {
    .about-diff--4-cards .careers-values__cards,
    .about-diff--4-cards .careers-values__cards .swiper-wrapper {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }
}