@use '../utils' as *;

/*=============================
    Service 01
===============================*/
.service-bg1-1 {
    position: absolute;
    inset: 0 0 320px 0;
    background: var(--tg-heading-color);
    z-index: -1;
    border-radius: 150px 0;
    @media #{$lg} {
        border-radius: 50px 0;
        inset: 0;
    }
}
.service-card {
    border-radius: 5px;
    overflow: hidden;
    .box-content {
        background: var(--tg-color-white-default);
        padding: 40px;
    }
    .box-icon {
        color: var(--tg-theme-primary);
        display: inline-block;
        position: relative;
        padding-top: 6px;
        margin-bottom: 30px;
        svg,
        img {
            transition: 0.4s;
        }
        &:after {
            content: '';
            position: absolute;
            width: 51px;
            height: 51px;
            border-radius: 50%;
            background: var(--tg-theme-primary);
            opacity: 0.1;
            top: 0;
            right: -15px;
        }
    }
    .box-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
        line-height: 1.333em;
        margin-top: -0.25em;
        a {
            color: var(--tg-heading-color);
            &:hover {
                color: var(--tg-theme-primary);
            }
        }
    }
    .box-text {
        margin-bottom: -0.4em;
    }
    .box-img {
        position: relative;
        z-index: 1;
        overflow: hidden;
        &:after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--tg-heading-color);
            opacity: 0;
            transition: 0.4s;
            mix-blend-mode: multiply;
        }
        img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: 0.4s;
        }
        .tg-button-wrap {
            position: absolute;
            left: 40px;
            right: 40px;
            bottom: 40px;
            transition: 0.4s;
            transform: scaleX(0);
            opacity: 0;
            z-index: 1;
            .btn {
                width: 100%;
                border-radius: 5px;
            }
        }
    }
    &:hover {
        .box-icon {
            svg,
            img {
                transform: scale(-1) rotate(180deg);
            }
        }
        .box-img {
            &:before {
                height: 250%;
                transition: all 600ms linear;
                background-color: transparent;
            }
            &:after {
                opacity: 0.8;
            }
            .tg-button-wrap {
                transform: scaleX(1);
                opacity: 1;
            }
            img {
                filter: grayscale(1);
                scale: 1.1;
            }
        } 
    }
    @media #{$lg} {
        .box-content {
            padding: 30px;
        }
        .box-title {
            font-size: 20px;
        }
        .box-img {
            .tg-button-wrap {
                left: 30px;
                right: 30px;
                bottom: 30px;
            }
        }
    }
}

/*=============================
    Service 02
===============================*/
.service-card.style2 {
    text-align: center;
    border-radius: 10px;
    .box-img {
        img {
            filter: none;
        }
        &:after {
            display: none;
        }
    }
    .box-content {
        padding: 0 40px 40px;
        .box-icon {
            padding: 0;
            margin: 0;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: -55px auto 40px;
            position: relative;
            z-index: 1;
            &:after {
                inset: 0;
                width: auto;
                height: auto;
                opacity: 0.15;
                transition: 0.4s;
                z-index: -1;
            }
            &:before {
                content: '';
                position: absolute;
                inset: -15px -15px 50% -15px;
                border: 15px solid var(--tg-color-white-default);
                border-radius: 50% 50% 0 0 / 100% 100% 0 0;
                border-bottom: 0;
                background: var(--tg-color-white-default);
                z-index: -1;
            }
        }
        .box-title {
            margin-bottom: 9px;
        }
        .tg-button-wrap {
            margin-top: 30px;
            .btn {
                border-radius: 5px;
            }
        }
    }
    &:hover {
        .box-content .box-icon {
            svg {
                color: var(--tg-color-white-default);
            }
            &:after {
                opacity: 1;
            }
        }
    }
    @media #{$lg} {
        .box-content {
            padding: 0 30px 40px;
        }
    }
}
/*=============================
    Service 03
===============================*/
.service-card.style3 {
    border: 1px solid var(--tg-border-1);
    border-radius: 10px;
    text-align: center;
    padding: 0 40px 40px;
    overflow: inherit;
    margin-top: 58px;
    transition: 0.4s;
    .box-content {
        padding: 0;
        margin-bottom: -0.4em;
        background: transparent;
    }
    .box-icon {
        width: 130px;
        height: 130px;
        background: var(--tg-color-smoke-5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: -58px auto 28px;
        transition: 0.4s;
        svg {
            position: relative;
            z-index: 2;
        }
        &:after {
            width: auto;
            height: auto;
            inset: 17px;
            z-index: 1;
            opacity: 1;
            background: var(--tg-color-white-default);
        }
    }
    .box-title {
        margin-bottom: 5px;
    }
    .box-text {
        margin-bottom: 15px;
    }
    &:hover {
        box-shadow: 0px 23px 30px rgba(113, 113, 113, 0.12);
        .box-icon {
            background: var(--tg-theme-primary);
        }
    }
    @media #{$lg} {
        padding: 0 30px 30px;
        .box-title {
            margin-bottom: 10px;
            font-size: 18px;
        }
    }
    @media #{$md} {
        .box-title {
            font-size: 20px;
        }
    }
}
/*=============================
    Service 04
===============================*/
.service-card.style4 {
    box-shadow: 0px 13px 39px rgba(23, 29, 33, 0.07);
    .box-content {
        border: 1px solid #E1EBEB;
        border-bottom: 0;
        border-radius: 5px 5px 0 0;
    }
}

/*=============================
    Service details page
===============================*/
.service__details-wrap {
    margin-right: 30px;
    overflow: hidden;
    .service__details-thumb {
        border-radius: 12px;
        overflow: hidden;
        .thumb {
            img {
                width: 100%;
            }
        }
    }
    .title {
        font-size: 36px;
    }
    @media #{$lg} {
        margin-right: 0;
        .title {
            font-size: 24px;
        }
    }
}