/**
 * ==========================================
 * Homepage Why Choose Section
 * ==========================================
 */

.tr-why-choose {

    padding: 110px 0;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

}


/* ==========================================
   Section Description
========================================== */

.tr-why-choose .tr-section-description {

    margin-bottom: 50px;

    max-width: 620px;

}


/* ==========================================
   Images
========================================== */

.tr-why-choose img {

    max-width: 100%;

    height: auto;

}


/* ==========================================
   Feature Cards
========================================== */

.tr-why-choose .tr-card {

    height: 100%;

}


/* ==========================================
   Card Body
========================================== */

.tr-why-choose .tr-card-body {

    display: flex;

    flex-direction: column;

    height: 100%;

}


/* ==========================================
   Card Icon
========================================== */

.tr-why-choose .tr-card-icon {

    width: 56px;

    height: 56px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #eef4ff;

}


/* ==========================================
   Card Icon Image
========================================== */

.tr-why-choose .tr-card-icon img {

    width: 28px;

    height: 28px;

    display: block;

}


/* ==========================================
   Card Title
========================================== */

.tr-why-choose .tr-card-title {

    margin: 0;

    font-size: 22px;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.35;

}


/* ==========================================
   Card Text
========================================== */

.tr-why-choose .tr-card-text {

    margin-top: 12px;

    margin-bottom: 0;

    color: #64748b;

    line-height: 1.8;

    font-size: 15px;

}


/* ==========================================
   Card Hover
========================================== */

.tr-why-choose .tr-card:hover {

    transform: translateY(-8px);

    border-color: #2563eb;

    box-shadow: 0 18px 45px rgba(15, 23, 42, .12);

}


/* ==========================================
   Icon Hover
========================================== */

.tr-why-choose .tr-card:hover .tr-card-icon {

    background: #0A2E73;

}


.tr-why-choose .tr-card:hover .tr-card-icon img {

    filter: brightness(0) invert(1);

}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 991px) {

    .tr-why-choose {

        padding: 80px 0;

    }

    .tr-why-choose .text-center {

        margin-top: 50px;

    }

}


@media (max-width: 767px) {

    .tr-why-choose .tr-card-body {

        padding: 22px;

    }

    .tr-why-choose .tr-card-icon {

        width: 46px;

        height: 46px;

    }

    .tr-why-choose .tr-card-icon img {

        width: 22px;

        height: 22px;

    }

    .tr-why-choose .tr-card-title {

        font-size: 18px;

    }

}