.service-section {
    position: relative;

    &::before {
       @include before;
       background-color: $bg-color;
       top: 40%;
       z-index: -1;
    }
}

.servie-card-image-items {
    padding: 70px 45px;
    background-color: $theme-color;
    position: relative;
    height: 100%;

    @include breakpoint (max-sm){
        padding: 50px 30px;
    }
    
    .content {

        p {
            color: $white;
            font-weight: 500;
        }

        h3 {
            font-size: 26px;
            color: $white;
            margin-top: 20px;
            line-height: 1.3;

            @include breakpoint (max-sm){
               margin-top: 15px;
            }
        }
    }
}

.service-card-items {
    padding: 50px 20px;
    background-color: $white;
    box-shadow: $shadow;
    height: 100%;
    position: relative;
    z-index: 9;

    @include breakpoint (max-sm){
        padding: 40px 20px;
    }

    .icon {
        width: 120px;
        height: 120px;
        line-height: 130px;
        border-radius: 50%;
        background-color: $bg-color;
        text-align: center;
        margin: 0 auto;
        position: relative;
        transition: all 500ms ease;

        @include breakpoint (max-sm){
            width: 90px;
            height: 90px;
            line-height: 100px;
        }

        &::before {
            background-image: $color-gradient-1;
            content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border-radius: 50%;
        }

        i {
            font-size: 60px;
            color: $theme-color;
            @include transition;

            @include breakpoint (max-sm){
                font-size: 48px;
            }
        }
    }

    .content {
        margin-top: 30px;

        @include breakpoint (max-sm){
           margin-top: 20px;
        }

        h5 {
            a {
                &:hover {
                    color: $theme-color;
                }
            }
        }
    }

    &:hover {
        .icon {
            transform: scaleX(-1);

            &::before {
                visibility: visible;
                opacity: 1;
            }

            i {
                color: $white;
                position: relative;
                z-index: 9;
            }
        }
    }

    &.active {
        .icon {
            &::before {
                visibility: visible;
                opacity: 1;
            }

            i {
                color: $white;
                position: relative;
                z-index: 9;
            }
        }
    }

    &.style-2 {
        position: relative;
        overflow: hidden;

        .icon,.content {
            position: relative;
            z-index: 9;
        }

        &::before {
            @include before;
            background-image: url(../../assets/img/service/03.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0;
            visibility: hidden;
            @include transition;
        }

        &::after {
            position: absolute;
            top: 10%;
            left: 17%;
            background-image: url(../../assets/img/service/shape-2.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 200px;
            height: 94px;
            content: "";
            opacity: 0;
            visibility: hidden;
            @include transition;

            @include breakpoint (max-xxl){
               left: 12%;
            }

            @include breakpoint (max-xl){
                left: 17%;
             }

            @include breakpoint (max-md){
                display: none;
            }
        }

        &:hover {
            .icon {
                &::before {
                    background-color: $white;
                    background-image: initial;
                }

                i {
                    color: $theme-color;
                }
    
            }
            
            &::before {
                opacity: 1;
                visibility: visible;
            }

            &::after {
                opacity: 1;
                visibility: visible;
                top: 37%;
            }

            .content {
                h5 {
                    a {
                        color: $white;
                    }
                }
            }
        }

        &.active {
            .icon {
                &::before {
                    background-color: $white;
                    background-image: initial;
                }

                i {
                    color: $theme-color;
                }
    
            }
            
            &::before {
                opacity: 1;
                visibility: visible;
            }

            &::after {
                opacity: 1;
                visibility: visible;
                top: 37%;
            }

            .content {
                h5 {
                    a {
                        color: $white;
                    }
                }
            }
        }
    }
}

.service-provide {
    position: relative;

    @include breakpoint (max-xxxl){
        overflow: hidden;
    }

    .shape-image {
        position: absolute;
        right: 0;
        top: -70%;
        z-index: -1;

        @include breakpoint (max-xxxl){
            display: none;
        }
    }
}

.service-provide-items {
    position: relative;
    padding: 50px 50px;
    box-shadow: $shadow;
    margin-top: 60px;
    background-color: $white;
    @include transition;

    .icon {
        width: 120px;
        height: 120px;
        line-height: 130px;
        border-radius: 50%;
        background-image: $color-gradient-1;
        text-align: center;
        margin: 0 auto;
        font-size: 60px;
        color: $white;
        margin-top: -100px;
        @include transition;
        transition: transform 500ms ease;

        @include breakpoint (max-sm){
            width: 90px;
            height: 90px;
            line-height: 100px;
            font-size: 42px;
        }
    }

    .content {
        margin-top: 25px;

        @include breakpoint (max-sm){
           margin-top: 20px;
        }

        h5 {
            margin-bottom: 20px;

            @include breakpoint (max-sm){
                margin-bottom: 10px;
            }

            a {
                &:hover {
                    color: $theme-color;
                }
            }
        }
    }

    .arrow-icon {
        margin-top: 30px;

        @include breakpoint (max-sm){
            margin-top: 20px;
        }

        a {
            i {
                font-size: 28px;
                color: $theme-color;
                @include transition;
            }
        }
    }

    &::before {
        @include before;
        background-image: $color-gradient-1;
        transform: scale(1, 0);
        transition: transform 500ms ease;
        transform-origin: bottom center;
        z-index: -1;
    }

    &::after {
        position: absolute;
        top: 0px;
        right: -120px;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/service/shape.png);
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        z-index: -1;
        @include transition;
    }

    &:hover {
        background-color: initial;

        &::before {
            transform: scale(1, 1);
            transform-origin: top center;
        }

        &::after {
            right: -80px;
            background-color: initial;
        }

        .icon {
            color: $theme-color;
            background-color: $white;
            background-image: $white;
            transform: scaleX(-1);
        }

        .content {
            h5 {
    
                a {
                    color: $white;
                }
            }

            p {
                color: $white;
            }

            .arrow-icon {
                
                a {
                    i {
                       color: $white;
                    }
                }
            }
        }
    }

    &.active {
        background-color: initial;

        &::before {
            transform: scale(1, 1);
            transform-origin: top center;
        }

        .icon {
            color: $theme-color;
            background-color: $white;
            background-image: $white;
        }

        .content {
            h5 {
    
                a {
                    color: $white;
                }
            }

            p {
                color: $white;
            }

            .arrow-icon {
                
                a {
                    i {
                       color: $white;
                    }
                }
            }
        }
    }
}

.service-productive-wrapper {
    position: relative;

    .service-productive-image {
        width: 500px;
        height: 751px;
        position: absolute;
        top: -248px;
        left: 0;

        @include breakpoint (max-xxxl){
            position: initial;
            top: initial;
        }

        @include breakpoint (max-lg){
           height: 600px;
        }

        @include breakpoint (max-md){
            height: 520px;
        }

        @include breakpoint (max-sm){
            height: 400px;
        }
    }

    .icon-items-area {
        margin-top: 40px;
        @include flex;
        gap: 90px;

        @include breakpoint (max-md){
            gap: 50px;
        }

        @include breakpoint (max-sm){
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 30px;
        }

        .icon-item {
            gap: 25px;

            .icon {
                font-size: 42px;
                color: $theme-color;
                padding: 15px 20px;
                background-color: $bg-color;
                @include transition
            }

            &:hover {
                .icon {
                    background-color: $theme-color;
                    color: $white;
                }
            }

            &.active {
                .icon {
                    background-color: $theme-color;
                    color: $white;
                }
            }
        }
    }

    h6 {
        margin-top: 40px;
        font-size: 20px;
        color: $theme-color;

        @include breakpoint (max-sm){
           margin-top: 20px;
        }
    }

    .author-items {
        @include flex;
        gap: 60px;
        margin-top: 50px;

        @include breakpoint (max-sm){
            margin-top: 30px;
            flex-wrap: wrap;
            gap: 30px;
        
        }
    }

    &.style-2 {
        position: relative;
        padding-top: 80px;

        .circle-shape {
            top: 25%;
        }

        &::after {
            @include before;
            background-color: $bg-color;
            top: -28%;
            width: 32%;
            height: 80%;
        }

        .productive-image-2 {
            margin-right: 60px;
            position: relative;
            z-index: 9;

            img {
                @include imgw;
            }

            @include breakpoint (max-xl){
                margin-right: 20px;
            }

            @include breakpoint (max-lg){
                margin-right: 0;
            }
        }
    }
}

.service-productive {
    position: relative;

    .circle-shape {
        position: absolute;
        top: 10%;
        right: 5%;

        .text-circle {
            animation: cir36 10s linear infinite;
        }

        @include breakpoint (max-xxxl){
            right: 0;
            top: 4%;
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }
}

.service-details-wrapper {
    .service-details-content {
        h2 {
            font-size: 48px;
            margin-bottom: 20px;

            @include breakpoint (max-sm){
                font-size: 32px;
            }
        }

        .details-image {
            height: 400px;
            margin-bottom: 30px;

            @include breakpoint (max-sm){
                margin-bottom: 20px;
            }
        }

        .details-title {
            font-size: 30px;
            margin-bottom: 20px;

            @include breakpoint (max-sm){
               font-size: 28px;
            }
        }

        .service-details-list {
            .goal-list {
                ul {
                    li {
                        color: $header-color;
                        font-weight: 500;

                        &:not(:last-child){
                            margin-bottom: 10px;
                        }

                        i {
                            color: $theme-color;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
}