.services-wrapper {
    &.style1 {
        .servicesThumb {
            position: relative;
            width: 100%;
            height: 100%;

            &:before {
                opacity: 0;
                visibility: hidden;
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 95%;
                height: 93%;
                opacity: 0.6;
                background: rgba(143, 143, 143, 0.6);
                z-index: 3;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transition: all 0.4s;
                -webkit-transition: all 0.4s;
                -moz-transition: all 0.4s;
                -ms-transition: all 0.4s;
                -o-transition: all 0.4s;
            }

            img {
                position: relative;
                width: 100%;
                height: 100%;
                z-index: 1;
            }

            .services-content {
                opacity: 0;
                visibility: hidden;
                background: $white;
                padding: 20px 10px 15px 20px;
                position: absolute;
                bottom: 20px;
                left: 20px;
                right: 20px;
                z-index: 5;
                border-radius: 30px 0px 100px 0px;
                -webkit-border-radius: 30px 0px 100px 0px;
                -moz-border-radius: 30px 0px 100px 0px;
                -ms-border-radius: 30px 0px 100px 0px;
                -o-border-radius: 30px 0px 100px 0px;
                transition: all 0.4s;
                -webkit-transition: all 0.4s;
                -moz-transition: all 0.4s;
                -ms-transition: all 0.4s;
                -o-transition: all 0.4s;

                h3 {
                    color: $title-color;
                    font-family: $title-font;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 20px;
                    margin-bottom: 10px;
                    margin-bottom: 5px;

                }

                p {
                    color: $text-color;
                    font-family: $body-font;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 19px;
                    margin-bottom: 15px;
                }

            }

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

                .services-content {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }
}

.services-card {
    &.style2 {
        position: relative;
        background-color: $white;
        padding: 50px 30px;
        z-index: 1;
        transition: all 0.4s;
        border-radius: 15px;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;

        .shape1 {
            position: absolute;
            top: 30px;
            right: 30px;
            z-index: 5;
        }

        .shape2 {
            position: absolute;
            bottom: 30px;
            right: 30px;
            z-index: 5;
        }

        .shape3 {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 0px;
            right: 0px;
            z-index: 5;
            transition: all 1s;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            -ms-transition: all 1s;
            -o-transition: all 1s;
}

        .shape4 {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            bottom: 0px;
            right: 0px;
            z-index: 5;
            transition: all 1.5s;
            -webkit-transition: all 1.5s;
            -moz-transition: all 1.5s;
            -ms-transition: all 1.5s;
            -o-transition: all 1.5s;
}

        .services-card { 
           &_icon {
                position: relative;
                padding: 37px 40px;
                margin-bottom: 25px;
                display: inline-block;
                z-index: 3;
                transition: all 0.5s ease;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
    
                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    -o-transform: translate(-50%, -50%);
                }
    
                &:before {
                    position: absolute;
                    content: '';
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    -o-transform: translate(-50%, -50%);
                    width: 80px;
                    height: 80.638px;
                    background-color: $theme-color;
                    opacity: 0.1;
                    clip-path: polygon(43px 80.5px, 43px 80.5px, 39.53360194px 80.6138793px, 35.93715952px 80.1950024px, 32.27225038px 79.3019371px, 28.60045216px 77.9932512px, 24.9833425px 76.3275125px, 21.48249904px 74.3632888px, 18.15949942px 72.1591479px, 15.07592128px 69.7736576px, 12.29334226px 67.2653857px, 9.87334px 64.6929px, 9.87334px 64.6929px, 7.9367128753px 62.2494616px, 6.2104916824px 59.6854208px, 4.6949916931px 57.0120192px, 3.3905281792px 54.2404984px, 2.2974164125px 51.3821px, 1.4159716648px 48.4480656px, 0.7465092079px 45.4496368px, 0.2893443136px 42.3980552px, 0.0447922537px 39.3045624px, 0.0131683px 36.1804px, 0.0131683px 36.1804px, 0.1857139617px 33.13325371px, 0.5595666176px 30.11371768px, 1.1381176039px 27.13886617px, 1.9247582568px 24.22577344px, 2.9228799125px 21.39151375px, 4.1358739072px 18.65316136px, 5.5671315771px 16.02779053px, 7.2200442584px 13.53247552px, 9.0980032873px 11.18429059px, 11.2044px 9.00031px, 11.2044px 9.00031px, 13.4497356px 7.09728217542px, 15.8464968px 5.46032429936px, 18.3770652px 4.07326876834px, 21.0238224px 2.91994797888px, 23.76915px 1.9841943275px, 26.5954296px 1.24984021072px, 29.4850428px 0.70071802506px, 32.4203712px 0.32066016704px, 35.3837964px 0.09349903318px, 38.3577px 0.00306702px, 38.3577px 0.00306702px, 41.363953px 0.04044449038px, 44.35772px 0.21813520064px, 47.323653px 0.55116592146px, 50.246404px 1.05456342352px, 53.110625px 1.7433544775px, 55.900968px 2.63256585408px, 58.602085px 3.73722432394px, 61.198628px 5.07235665776px, 63.675249px 6.65298962622px, 66.0166px 8.49415px, 66.0166px 8.49415px, 68.3999054px 10.69325995px, 70.6702992px 13.0542976px, 72.7870678px 15.56399965px, 74.7094976px 18.2091028px, 76.396875px 20.97634375px, 77.8084864px 23.8524592px, 78.9036182px 26.82418585px, 79.6415568px 29.8782604px, 79.9815886px 33.00141955px, 79.883px 36.1804px, 79.883px 36.1804px, 79.5103764px 39.0453677px, 79.0147072px 41.5826016px, 78.3824948px 43.8539179px, 77.6002416px 45.9211328px, 76.65445px 47.8460625px, 75.5316224px 49.6905232px, 74.2182612px 51.5163311px, 72.7008688px 53.3853024px, 70.9659476px 55.3592533px, 69px 57.5px, 69px 57.5px, 66.7549105px 60.0575467px, 64.478px 62.8473696px, 62.1516255px 65.7609029px, 59.758144px 68.6895808px, 57.2799125px 71.5248375px, 54.699288px 74.1581072px, 51.9986275px 76.4808241px, 49.160288px 78.3844224px, 46.1666265px 79.7603363px, 43px 80.5px);
                }
    
            }

            &_title {
                a {
                    font-family: $title-font;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 30px;
                    text-align: left;
                    margin-bottom: 10px;
                }

            }

            &_text { 
                color: $text-color; 
                font-family: $body-font;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 26px;  
            }
        }

        &:hover {
            background-color: $title-color;
            margin-top: -5px;
            .services-card {
                &_icon { 
                    transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
    
                    &:before {
                        background-color: $white;
                        opacity: 1;
                    }
                } 

                &_text { 
                    color: $white;
                }
            }
   

            .shape3 { 
                opacity: 1;
                visibility: visible;
                top: 30px;
                right: 30px; 
            }
    
            .shape4 { 
                opacity: 1;
                visibility: visible;
                bottom: 30px;
                right: 30px; 
            }
            .services-card {
                &_title {
                    a {
                        color: $white;
                    }

                }

                &_text {
                    color: $white;
                }
            }

        }
    }
}



.service-details-area {
    .service-post-details {
        .single-service-post {
            .post-featured-thumb {
                height: 400px;
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                @include breakpoint (max-lg) {
                    height: 400px;
                }
            }

            .post-content {
                margin-top: 35px; 
                
                .title1 {
                    margin-bottom: 10px;
                    color: $title-color; 
                    font-family: $title-font;
                    font-size: 36px;
                    font-style: normal;
                    font-weight: 900;
                    line-height: 50px;  
                    text-transform: capitalize;
                }

                .title2 {
                    color: $title-color; 
                    font-family: $title-font;
                    font-size: 40px;
                    font-style: normal;
                    font-weight: 900;
                    line-height: 50px;  
                    text-transform: capitalize;
                    margin-top: 55px;
                    margin-bottom: 10px;
                }
            }

            .service-details-thumb {

                img {
                    width: 100%;
                    border-radius: 20px;
                    -webkit-border-radius: 20px;
                    -moz-border-radius: 20px;
                    -ms-border-radius: 20px;
                    -o-border-radius: 20px;
                }
            }

            .checklist {
                margin-bottom: 14px;
            }
        }
 
 
    }
}