/* Provide css */

.provide-area {}

.single-why {
    padding: 30px;
    @include transition(.3s);
    @include responsive(xl) {
        padding: 20px;
    }
    @include responsive(lg) {
        padding: 20px;
    }
    &:hover {
        border-color: var(--main-color-one);
    }
    &-border {
        border: 2px solid var(--gray-color);
    }
    &-icon {
        img {
            max-width: 60px;
        }
    }
    &-flex {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }
    &-contents {
        &-title {
            font-size: 20px;
            line-height: 28px;
            margin: -4px 0 0;
            font-weight: 600;
            @include transition(.3s);
            &:hover {
                color: var(--main-color-one);
            }
            @include responsive(lg) {
                font-size: 24px;
            }
            @include responsive(xs) {
                font-size: 26px;
            }
            @include responsive(xxs) {
                font-size: 24px;
            }
        }
        &-para {
            font-size: 16px;
            line-height: 26px;
            color: var(--paragraph-color);
        }
    }
}


/* Why Two Css */

.single-why-two {
    padding: 20px;
    background-color: $white;
    @include transition(.3s);
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        height: 0%;
        width: 0%;
        z-index: -1;
        background-color: var(--main-color-one);
        visibility: hidden;
        opacity: 0;
        @include transition(.3s);
    }
    &:hover {
        background-color: var(--main-color-one);
        border-color: var(--main-color-one);
        color: $white;
        &::before {
            background-color: var(--main-color-one);
            visibility: visible;
            opacity: 1;
            height: 100%;
            width: 100%;
        }
        .single-why-two {
            &-icon {
                background-color: $white;
                color: var(--main-color-one);
            }
            &-contents {
                &-title {
                    color: $white;
                }
                &-para {
                    color: $white;
                }
            }
        }
    }
    &-border {
        border: 2px solid var(--gray-color);
    }
    &-flex {
        @include flexStart;
        gap: 15px;
        @include responsive(vxxs) {
            flex-wrap: wrap
        }
    }
    &-icon {
        @include flexCenter;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        font-size: 24px;
        background-color: rgba(var(--main-color-one-rgb), .2);
        color: var(--main-color-one);
        @include transition(.3s);
    }
    &-contents {
        flex: 1;
        &-title {
            font-size: 16px;
            line-height: 28px;
            margin: -4px 0 0;
            font-weight: 600;
            @include transition(.3s);
            &:hover {
                color: var(--main-color-one);
            }
        }
        &-para {
            font-size: 15px;
            line-height: 24px;
            color: var(--paragraph-color);
        }
    }
}

div[class*=col] {
    &:nth-child(4n+3) {
        .single-why-two {
            &-icon {
                background-color: rgba(var(--secondary-color-rgb), .2);
                color: var(--secondary-color);
            }
            &:hover {
                border-color: var(--secondary-color);
                &::before {
                    background-color: var(--secondary-color);
                }
                .single-why-two {
                    &-icon {
                        background-color: $white;
                        color: var(--secondary-color);
                    }
                    &-contents {
                        &-title {
                            color: $white;
                        }
                        &-para {
                            color: $white;
                        }
                    }
                }
            }
        }
    }
}

div[class*=col] {
    &:nth-child(4n+4) {
        .single-why-two {
            &::before {
                background-color: #019267;
            }
            &-icon {
                background-color: rgba(#019267, .2);
                color: #019267;
            }
            &:hover {
                border-color: #019267;
                .single-why-two {
                    &-icon {
                        background-color: $white;
                        color: #019267;
                        ;
                    }
                    &-contents {
                        &-title {
                            color: $white;
                        }
                        &-para {
                            color: $white;
                        }
                    }
                }
            }
        }
    }
}