/*----------------------------------------
    19. fact css
----------------------------------------*/
@use "../abstract" as *;

// fact area style 
.fact-area {
    background: #1F1F1F;
}

.fact-area-title-wrapper {
    padding: 40px;
    border: 1px solid #414141;
    border-bottom: 0;
}

.fact-box-wrapper {
    border: 1px solid #414141;

    >.row>div:not(:last-child) {
        border-right: 1px solid #414141;

        @media #{$sm,$xs} {
            border-right: 0;
            border-bottom: 1px solid #414141;
        }
    }

    >.row>div:nth-child(2n) {
        @media #{$lg,$md} {
            border-right: 0;
        }
    }

    >.row>div:not(:nth-last-child(-n+2)) {
        @media #{$lg,$md} {
            border-bottom: 1px solid #414141;
        }
    }

}

// fact-box-content style 
.fact-box-content {

    .fact__number {
        font-size: 30px;
        color: var(--clr-common-white);
        font-weight: 400;
        margin-bottom: 5px;
    }

    .fact__number span span {
        font-size: 80px;
        color: var(--clr-theme-2);
        font-weight: 500;
        line-height: 1;

        @media #{$xl} {
            font-size: 70px;
        }

        @media #{$sm,$xs} {
            font-size: 70px;
        }

        @media #{$xxs} {
            font-size: 60px;
        }
    }

    .fact__number span {
        display: flex;
        align-items: center;
        gap: 24px;
    }

}

// fact style 
.fact-box {
    padding: 80px 40px 70px;
}

.fact {
    &__text {
        p {
            margin-bottom: 0;
            color: #A5A5A5;
            text-transform: uppercase;
            font-size: 16px;
        }
    }
}

// fact style is white
.fact-box-wrapper-2 {
    .fact-box-content {
        .fact__number {
            span {
                justify-content: center;
                color: var(--clr-theme-2);

                span {
                    color: var(--clr-theme-1);
                    font-weight: 600;
                }
            }
        }
    }

    .fact__text {
        p {
            color: #4f4f4f;
            font-family: var(--tpl-ff-heading)
        }
    }

    .fact-box {
        padding: 0px 40px 0px;
        text-align: center;
        position: relative;

        &:before {
            position: absolute;
            content: "";
            height: 88%;
            width: 1px;
            background: #D9D9D9;
            right: 0;
            top: 18px;
        }
    }

    & .row {
        & [class*="col-"] {
            &:last-child {
                .fact-box {
                    &:before {
                        display: none;
                    }
                }
            }

            @media #{$md,$lg} {
                &:nth-child(2n) {
                    .fact-box {
                        &:before {
                            display: none;
                        }
                    }
                }
            }

            @media #{$xs,$sm} {
                .fact-box {
                    &:before {
                        display: none;
                    }
                }
            }
        }
    }
}