/* How Different Section */
section.technologies-how-different-section {
    background: var(--firefly);
}

.technologies-how-different-section .container {
    gap: 17px;
}

.technologies-how-different-section .section-heading {
    color: var(--white);
    margin-top: 18px;
}

.technologies-how-different-section .section-description {
    font-size: 17px;
    line-height: 28px;
    font-weight: 400;
    color: var(--jagged-ice);
}

.technologies-how-different-section .cards-container {
    border: 1px solid rgba(74, 121, 152, 0.20);
    border-radius: 16px;
    padding-top: 32px;
}

.technologies-how-different-section .card {
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(74, 121, 152, 0.05);
    border: 1px solid rgba(74, 121, 152, 0.15);
    gap: 8px;
    padding: 32px 24px;
}

.technologies-how-different-section .card-primary {
    background-color: rgba(212, 119, 79, 0.04);
}


.technologies-how-different-section .card-featured {
    position: relative;
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 119, 79, 0.40);
    padding-top: 0;
}

.technologies-how-different-section .card-featured::before {
    width: 100px;
    content: 'RevIntel lives here';
    padding: 3px 15px;
    background-color: var(--raw-sienna);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    text-align: center;
    margin-top: -1px;
    margin-bottom: 3px;
}

.technologies-how-different-section .card:first-child {
    border-bottom-left-radius: 16px;
}

.technologies-how-different-section .card:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.technologies-how-different-section .card-icon {
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    background-color: rgba(74, 121, 152, 0.15);
    border: 1px solid rgba(74, 121, 152, 0.30);
    border-radius: 50px;
    margin: 0 auto 16px;
}

.technologies-how-different-section .card-primary .card-icon {
    border-color: rgba(212, 119, 79, 0.30);
    background-color: rgba(212, 119, 79, 0.12);
}

.technologies-how-different-section .card-featured .card-icon {
    border-color: rgba(255, 255, 255, 0.30);
    background-color: rgba(255, 255, 255, 0.10);
}

.technologies-how-different-section .card-icon img {
    width: 24px;
    height: 24px;
}

.technologies-how-different-section .card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--jagged-ice);
    text-align: center;
}

.technologies-how-different-section .card-subtitle {
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wedgewood);
    text-align: center;
    margin-bottom: 8px;
}

.technologies-how-different-section .card-primary .card-title, .technologies-how-different-section .card-primary .card-subtitle {
    color: var(--raw-sienna);
}

.technologies-how-different-section .card-featured .card-title {
    color: var(--white);
}

.technologies-how-different-section .card-featured .card-subtitle {
    color: rgba(255, 255, 255, 0.50);
}

.technologies-how-different-section .card-description {
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
    color: var(--wedgewood);
    text-align: center;
}

.technologies-how-different-section .card-featured .card-description {
    color: var(--jagged-ice)
}

.technologies-how-different-section .card-features {
    width: 100%;
    gap: 6px;
    margin-top: 8px;
}

.technologies-how-different-section .card-feature {
    align-items: center;
    justify-content: space-between;
    background-color: rgba(74, 121, 152, 0.15);
    border: 1px solid rgba(74, 121, 152, 0.30);
    border-radius: 4px;
    padding: 8px 11px;
}

.technologies-how-different-section .card-primary .card-feature {
    border-color: rgba(212, 119, 79, 0.20);
    background-color: rgba(212, 119, 79, 0.10);
}

.technologies-how-different-section .card-featured .card-feature {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.07);
}

.technologies-how-different-section .card-feature.card-feature-highlight {
    border-color: rgba(212, 119, 79, 0.30);
    background-color: rgba(212, 119, 79, 0.15);
}

.technologies-how-different-section .card-feature-title {
    font-size: 11px;
    line-height: 17px;
    font-weight: 400;
    color: var(--jagged-ice);
}

.technologies-how-different-section .card-feature-value {
    font-size: 11px;
    line-height: 17px;
    font-weight: 400;
    color: var(--jagged-ice);
}

.technologies-how-different-section .card-primary .card-feature-title, .technologies-how-different-section .card-primary .card-feature-value {
    color: var(--cinderella);
}

.technologies-how-different-section .card-featured .card-feature-title, .technologies-how-different-section .card-featured .card-feature-value {
    color: var(--white);
}

.technologies-how-different-section .card-feature-highlight .card-feature-title, .technologies-how-different-section .card-feature-highlight .card-feature-value {
    color: var(--raw-sienna);
    font-weight: 700;
}

.technologies-how-different-section .card-feature-value.text-green {
    color: var(--mountain-meadow) !important;
}

.technologies-how-different-section .card-feature-value.text-primary {
    color: var(--raw-sienna) !important;
}

@media only screen and (max-width: 976px) {
    .technologies-how-different-section .cards-container {
        flex-direction: column;
        gap: 1px;
        border: none;
        padding-top: 0;
        margin-top: 16px;
    }

    .technologies-how-different-section .card {
        align-items: flex-start;
    }

    .technologies-how-different-section .card:first-child {
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        border-bottom-left-radius: 0;
    }

    .technologies-how-different-section .card:last-child {
        border-top-right-radius: 0;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    .technologies-how-different-section .card-primary {
        border-color: rgba(212, 119, 79, 0.08);
    }

    .technologies-how-different-section .card-featured {
        border-width: 2px;
    }

    .technologies-how-different-section .top-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .technologies-how-different-section .card-icon {
        margin: 0;
    }

    .technologies-how-different-section .card-title, .technologies-how-different-section .card-subtitle {
        text-align: left;
    }

    .technologies-how-different-section .card-featured::before {
        width: fit-content;
        margin: -1px auto 3px auto;
    }
}

@media only screen and (max-width: 768px) {
    .technologies-how-different-section .container {
        gap: 12px;
    }

    .technologies-how-different-section .section-heading {
        margin-top: 0;
    }

    .technologies-how-different-section .section-description {
        font-size: 14px;
        line-height: 23px;
    }

    .technologies-how-different-section .card {
        gap: 12px;
    }

    .technologies-how-different-section .card-icon {
        width: 41px;
        height: 41px;
        margin-bottom: 0;
        position: relative;
        border: none;
    }

    .technologies-how-different-section .card-icon::after {
        content: '';
        position: absolute;
        left: -3px;
        right: -3px;
        top: -3px;
        bottom: -3px;
        border: 1px solid rgba(74, 121, 152, 0.30);
        border-radius: 50px;
    }

    .technologies-how-different-section .card-primary .card-icon::after {
        border-color: rgba(212, 119, 79, 0.30);
    }

    .technologies-how-different-section .card-featured .card-icon::after {
        border-color: rgba(255, 255, 255, 0.30);
    }

    .technologies-how-different-section .card-icon img {
        width: 22px;
        height: 22px;
    }

    .technologies-how-different-section .card-title {
        text-align: left;
    }

    .technologies-how-different-section .card-subtitle {
        
        text-align: left;
        margin-bottom: 2px;
    }

    .technologies-how-different-section .card-description {
        font-size: 12px;
        line-height: 18px;
        text-align: left;
    }

    .technologies-how-different-section .card-features {
        margin-top: 0;
    }

    .technologies-how-different-section .card-primary .card-feature {
        background-color: rgba(74, 121, 152, 0.15);
        border: 1px solid rgba(74, 121, 152, 0.30);
    }

    .technologies-how-different-section .card-primary .card-feature-title, .technologies-how-different-section .card-primary .card-feature-value {
        color: var(--jagged-ice);
    }
}