@import "./common-var.css";

/**************
Probox Module - Using Bootstrap Grid
**************/
.probox-main{
    border-bottom: 1px solid #A2AAAE;
    &:last-child{
        border-bottom: none;
        padding-bottom: 0;
    }
}
/**************
Probox Content
**************/
.probox-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
    .homepage &{
        .hd-type2, .cms-text{
            color: var(--white);
        }
    }
    @media (max-width: 576px) {
        gap: 12px;
    }
}


/**************
Probox Image Styling
**************/
.probox img {
    width: 100%;
    height: auto;
    aspect-ratio: 624 / 568;
    object-fit: cover;
    border-radius: 20px;
    display: block;

    /* @media (max-width: 991px) {
        aspect-ratio: 16 / 9;
    } */

    @media (max-width: 576px) {
        border-radius: 15px;
    }
}

/**************
Probox Spacing with Bootstrap
**************/
.probox .row:not(:last-child) {
    margin-bottom: 120px;

    @media (max-width: 991px) {
        margin-bottom: 80px;
    }

    @media (max-width: 576px) {
        margin-bottom: 60px;
    }
}

/* Override Bootstrap spacing for specific rows */
.probox .mb-5 {
    margin-bottom: 120px !important;

    @media (max-width: 991px) {
        margin-bottom: 80px !important;
    }

    @media (max-width: 576px) {
        margin-bottom: 60px !important;
    }
}

/**************
Common Classes Enhancements
**************/

/* CMS Text - ensuring proper spacing */
.probox .cms-text {
    margin-bottom: 20px;

    @media (max-width: 576px) {
        margin-bottom: 15px;
    }

    p {
        margin-bottom: 15px;

        &:last-child {
            margin-bottom: 0;
        }

        &.lead {
            font-weight: 500;
            font-size: 24px;
            line-height: 36px;

            @media (max-width: 1440px) {
                font-size: 22px;
                line-height: 32px;
            }

            @media (max-width: 576px) {
                font-size: 20px;
                line-height: 30px;
            }
        }
    }
}

/* Button Type 1 - ensuring proper positioning */
.probox .btn-type1 {
    margin-top: 10px;

    @media (max-width: 576px) {
        margin-top: 8px;
    }
}

/* Heading Type 2 - ensuring proper spacing */
.probox .hd-type2 {
    margin-bottom: 30px;

    @media (max-width: 991px) {
        margin-bottom: 25px;
    }

    @media (max-width: 576px) {
        margin-bottom: 20px;
    }
}

/**************
RTL Support
**************/
[dir="rtl"] {
    .probox-content {
        text-align: right;
    }

    .probox .btn-type1 {
        margin-right: 0;
        margin-left: auto;

        @media (max-width: 991px) {
            margin-left: 0;
        }
    }

    .probox .text-center {
        text-align: right !important;
    }

}