/* =====================================================
   About Cards
   ===================================================== */

.about-card {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.about-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.12),
        0 6px 12px rgba(0, 0, 0, 0.08);
}

.about-card-layout {
    display: flex;
    align-items: stretch;
    min-height: 245px;
}

.about-image-button {
    flex: 0 0 125px;
    width: 125px;

    padding: 18px 0 18px 18px;

    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.about-card-image {
    width: 100px;
    height: 100px;

    object-fit: contain;
    object-position: center;

    background: #f8fafc;
    border-radius: 0px;
}

.about-image-button:hover .about-card-image {
    transform: scale(1.03);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.about-card .card-body {
    width: 66%;
    padding: 20px 20px 20px 16px;
}

.about-card .card-title,
.about-card-title {
    text-align: left;
    font-weight: 200;
    margin-bottom: 0.75rem;
    color: #0d6efd;
    cursor: pointer;
}

.about-card .card-title:hover,
.about-card-title:hover {
    text-decoration: underline;
}

.about-card .card-text {
    color: #5f6b7a;
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;
}

.about-card .btn {
    border-radius: 999px;
    font-weight: 600;
}

/* =====================================================
   Image Preview Modals
   ===================================================== */

.about-image-modal-dialog {
    max-width: 96vw;
    margin: 2vh auto;
}

.about-image-modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.about-image-modal-body {
    width: 96vw;
    height: 92vh;

    padding: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    /*cursor: grab;*/
    text-align: center;
}

.about-image-modal-body:active {
    cursor: grabbing;
}

.about-fullscreen-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 92vw;
    max-height: 88vh;

    object-fit: contain;
    object-position: center;

    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.about-image-modal-close {
    position: fixed;
    top: 24px;
    right: 28px;

    filter: invert(1);
    opacity: 0.95;
    z-index: 1060;
}

/* =====================================================
   Tablet
   ===================================================== */

@media (max-width: 991.98px) {

    .about-card-layout {
        min-height: 230px;
    }

    .about-image-button {
        min-width: 112px;
    }


    .about-card .card-body {
        padding: 18px 18px 18px 14px;
    }
}

/* =====================================================
   Mobile
   ===================================================== */

@media (max-width: 767.98px) {

    .about-card-layout {
        min-height: 215px;
    }

    .about-image-button {
        width: 32%;
        min-width: 105px;
        padding: 16px 0 16px 16px;
    }


    .about-card .card-body {
        width: 68%;
        padding: 16px 16px 16px 14px;
    }

    .about-card .card-title,
    .about-card-title {
        font-size: 1.15rem;
    }

    .about-card .card-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .about-card:hover {
        transform: none;
    }
}

/* =====================================================
   Galaxy Tab S4
   ===================================================== */

@media (min-width: 700px) and (max-width: 900px) {
    .about-fullscreen-image {
        max-width: 86vw;
        max-height: 82vh;
    }
}

/* =====================================================
   Small Mobile
   ===================================================== */

@media (max-width: 575.98px) {

    .about-card-layout {
        flex-direction: column;
    }

    .about-image-button {
        width: 100%;
        padding: 16px 16px 0 16px;
    }

    .about-card .card-body {
        width: 100%;
        padding: 18px 20px 20px;
    }

    .about-card .card-title,
    .about-card-title {
        text-align: center;
        font-size: 1.25rem;
    }

    .text-center.mt-5 .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .text-center.mt-5 .btn.me-3 {
        margin-right: 0 !important;
    }
}