.android-app-dev{
	background: url(../images/bg10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0px;
    position: relative;

    .before-img{
    	position: absolute;
    	right: 0;
    }

    .left-side{
    	position: relative;
    	top: 40px;
    }


    .right-side{
    	padding: 0px 220px 0px 50px;
    	h1{
    		font: 32px/42px "SFProDisplay-Bold" !important;
    		letter-spacing: 1px;
			color: #181818;
			text-transform: uppercase;
    		span{
    			display: block;
    		}
    	}
    	p{
    		font: 17px/30px 'SF Pro Display';
    	}

    	.btn-primary{
    		border-radius: 50px;
    		padding: .375rem 1.6rem;
    		background-color: #4964db;

    		i{
    			margin-right: 5px;
    		}
    	}
    }
}

.android-section-1{
    background: url(../images/android-section-1.png) no-repeat #fff;
    background-position: center right;
    position: relative;
    .aad-serves{
        margin-top: 50px;
        position: relative;

        .media{
            margin-bottom: 30px;
            .icon{
                width: 90px;
                height: 90px;
                border-radius: 100%;
                background-color: #ffc001;
                margin-right: 20px;
                display: block;
                line-height: 90px;
                text-align: center;
            }

            .media-body{
                h5{
                    font: 18px/20px 'SF Pro Display';
                    margin-bottom: 8px;
                }

                p{
                    font: 14px/20px 'SF Pro Display';
                }
            }
        }

        .media.service-item-1{
            position: relative;
            left: -80px;
        }

        .media.service-item-2{
            position: relative;
            left: -220px;
        }

        .media.service-item-3{
            position: relative;
            left: -25px;
        }

        .media.service-item-4{
            position: relative;
            left: -190px;
            top: -10px;
        }

        .media.service-item-5{
            position: relative;
            left: -60px;
            top: -10px;
        }


    }
}

.android-section-2{
    background-image: linear-gradient(#0f5cc3, #09285e);
    position: relative;
    padding:0px 0px 60px 0px!important;

    .shape-img{
        img{
            width: 100%;
        }
    }

    .shape-1{
        position: absolute;
        left: 0;
        top: 20%;
    }

    .shape-2{
        position: absolute;
        right: 0;
       bottom: 18%;
    }

    .container{
        margin-top: 50px;
    }

    .col-lg-6, .col-md-6{
        margin-bottom: 20px;
    }

    .media{
        .service_icon{
            width: 90px;
            height: 90px;
            background: #0f3f89;
            border-radius: 100px;
            display: block;
            line-height: 90px;
            text-align: center;
            margin-right: 15px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    }
}

.android-section-3{
    position: relative;
    .android-app-development-process{
        background: url(../images/android-bg-3.png) no-repeat #fff;
        background-position: center center;
        background-size: 60% 100%;
        padding-top: 40px;
        position: relative;

        .aadp-left, .aadp-right{
            .aadp-content{
                text-align: center;
                margin-bottom: 30px;
                h5{
                    font: 18px/20px 'SFProDisplay-Bold'!important;
                    margin-bottom: 8px;
                }

                p{
                    font: 16px/20px 'SF Pro Display';
                }
            }

            .aadp-content.one{
                position: relative;
                top: -30px;
                left: 30px;
            }

            .aadp-content.two{
                position: relative;
                top: 80px;
                right: 30px;
            }

            .aadp-content.three{
                position: relative;
                top: 50px;
                left: 30px;
            }

            .aadp-content.four{
                position: relative;
                top: 150px;
                right: 30px;
            }

            .aadp-content.five{
                position: relative;
                top: 130px;
                left: 30px;
            }
        }
    }

    .pattern-layer{
        position: absolute;
        right: 0px;
        top: -200px;
        width: 247px;
        height: 258px;
    }
}

.android-section-4{
    position: relative;

    .page-heading{margin-bottom: 50px}
    .mobile-frame{
        position: absolute;
        left: 584px;
        margin-top: -34px;
        z-index: 9;
        padding:0px 30px;

    }
    .ServicesAppSlider{
        padding:50px 0px 120px 0px;
        &:after{
            content: url("../images/mobile-frame.png");
            left: 50%;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-51.4%, -48.9%);
            transform: translate(-50%, -48.9%);
            margin-top: -40px;
        }

        .item{
            img{
                display: block;
                margin: auto;
                width: auto;
                max-width: 100%;
            }
        }
        .slick-dots{
            width: 100%;
            height: 10px;
            padding: 0px;
            position: absolute;
            list-style: none;
            text-align: center;
            bottom: 40px;

            li{
                display: inline-block;
                margin: 10px 5px 10px 0px;
                height: 10px;
                vertical-align: top;

                &:before{
                    display: none;
                }

                button{
                    padding: 0px;
                    background: none;
                    border: 0px;
                    height: 10px;
                    width: 10px;
                    background: rgba(225, 225, 225, 0.8);
                    border-radius: 100%;
                    text-indent: -9999px;
                }

            }
            li.slick-active{
                button{
                    background-color: #04b000;
                }
            }
        }
    }
}

/*=======================UIUX PAGE====================================*/ 
.uiux-design{

    background: url(../images/ui-ux-designing-shape.png) no-repeat #fff;
    background-position: top 60px center;
    position: relative;
   padding: 60px 0 70px 0px!important;

   .ui-ux-bg-1{
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .ui-ux-bg-2{
        position: absolute;
        top: 200px;
        left: 0px;
    }

    .ui-ux-bg-3{
        position: absolute;
        right: 0px;
        bottom: -80px;
    }

    .uiux-items{
        .box{
            background-color: #fff;
            border-radius: 110px;
            border: 2px solid #f1f1f1;
            width: 100%;
            display: block;
            overflow: hidden;
            padding: 30px 30px 30px 60px;
        }
    }

    .uiux-items.one{
        position:relative;
        top: 25px;
        left: -6px;
    }

    .uiux-items.two{
        position: relative;
        top: 40px;
        left: 6px;
    }

    .uiux-items.three{
        position: relative;
        top: 45px;
        left: -6px;
    }

    .uiux-items.four{
        position: relative;
        top: 35px;
        left: 6px;
    }

    .uiux-items.five{
        position: relative;
        top: 40px;
        left: -6px;
    }

}

.cmoon-ui-ux-shape-img{
    position: relative;
    z-index: 9;
}
.cmoon-ui-ux{
    background: url(../images/ui-ux-bg-2.png) no-repeat #d2f7f9;
    background-position: top left;
    padding:0px 0px 40px 0px!important;

    .why-choose-box{
        width: 100%;
        background-image: linear-gradient(#fff, transparent);
        min-height: 255px;
        border-radius: 18px;
        padding:20px;
        text-align: center;
        border:2px solid transparent;
        margin-bottom: 20px;

        &:hover{
            border: 2px solid #fff;
        }

        .icon{
            width: 90px;
            height: 90px;
            border-radius:100px;
            background: #04b000;
            display: block;
            line-height: 90px;
            text-align: center;
            margin:0px auto;
        }

        h5{
            margin:8px 0px 8px 0px;
            font: 17px/20px SFProDisplay-Bold !important;
        }

        p{
            font: 14px/20px 'SF Pro Display';
        }
    }

    .left-img{
        position: relative;
        top: 71px;
    }
}

/*===============================IOS-MOBILE-APP-DEVELOPMENT PAGE===============================================*/

.ios-service{
    position: relative;
    padding-top: 30px;
    overflow: hidden;
    padding-bottom: 50px;

    .layers-box{
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;

        .layer-one{
            position: absolute;
            right: 0px;
            top: 0px;
            width: 75%;
            border-left: 580px solid transparent;
            border-right: 580px solid transparent;
            border-top: 600px solid #2a5ffb;

        }

        .layer-two{
            position: absolute;
            right: -18px;
            top: -22px;
            border-top: 620px solid transparent;
            border-right: 600px solid #161e39;
            border-bottom: 377px solid transparent;
        }
        .layer-three{
            position: absolute;
            left: 7%;
            top: 25%;
            width: 170px;
            height: 170px;
            background-repeat: no-repeat;
            opacity: 0.5;
        }

        .layer-four{
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 247px;
            height: 258px;
            background-repeat: no-repeat;
        }

        .layer-five{
            position: absolute;
            left: 35%;
            top: 70%;
            width: 170px;
            height: 170px;
            background-repeat: no-repeat;
        }

        .layer-six{
            position: absolute;
            right: 7%;
            top: 45%;
            width: 170px;
            height: 170px;
            background-repeat: no-repeat;
        }
    }

    .container{
        position: static;
    }

    .content-column{
        position: relative;
        z-index: 3;

        .inner-column{
            position: relative;

            h1{
                font: 45px/60px 'SF Pro Display'!important;
                text-transform: uppercase;
            }

            p{
                font: 20px/30px 'SF Pro Display';
            }
        }

        .btn-success{
            color: #fff;
            background-color: #04b000;
            border-color: #04b000;
            border-radius: 50px;
            padding: .5rem 2rem;
        }
    }

    .image-column{
        position: relative;
        .inner-column{
            position: relative;
        }
    }
} 



.ios-section-1{
    position: relative;
    padding:0px!important;
    padding-top: 90px;

    .welcome-column{
        position: relative;

        .inner-column{
            position: relative;
            z-index: 1;
        }
    }

    .pattern-layer{
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 255px;
        height: 376px;
    }
}

.features-section{
    position: relative;

    .layer-one{
        position: absolute;
        left: 0px;
        top: -250px;
        z-index: -1;
        border-bottom: 970px solid #eaedf5;
        border-right: 840px solid transparent;
    }

    .featured-block{
        position: relative;
        margin-bottom: 30px;

        .inner-box{
            position: relative;
            text-align: center;
            overflow: hidden;
            padding: 55px 35px 55px;
            background-color: #ffffff;
            box-shadow: 0px 10px 30px rgba(0,0,0,0.10);
            min-height: 450px;

            &:before{
                position: absolute;
                content: '';
                left: 75px;
                top: 0px;
                width: 100%;
                height: 280%;
                background-color: #f8faff;
                transform: translateX(50%) rotate(-45deg);
                transform: translateY(-50%) rotate(-45deg);
                transition: all 900ms ease;
                -moz-transition: all 900ms ease;
                -webkit-transition: all 900ms ease;
                -ms-transition: all 900ms ease;
                -o-transition: all 900ms ease;
            }

            .side-lines{
                position: absolute;
                right: 0px;
                top: 0px;
                width: 70px;
                height: 70px;

                &:before{
                    position: absolute;
                    content: '';
                    right: 0px;
                    top: 0px;
                    height: 2px;
                    width: 0px;
                    background-color: #04b000;
                    transition: all 900ms ease;
                    -moz-transition: all 900ms ease;
                    -webkit-transition: all 900ms ease;
                    -ms-transition: all 900ms ease;
                    -o-transition: all 900ms ease;
                }

                &:after{
                    position: absolute;
                    content: '';
                    right: 0px;
                    top: 0px;
                    width: 2px;
                    height: 0px;
                    background-color: #04b000;
                    transition: all 900ms ease;
                    -moz-transition: all 900ms ease;
                    -webkit-transition: all 900ms ease;
                    -ms-transition: all 900ms ease;
                    -o-transition: all 900ms ease;
                }
            }

            h4{
                position: relative;
                margin:15px 0px;
                font: 18px/30px SFProDisplay-Bold !important;
            }

            p{
                position: relative;
                font-size: 14px;
            }
        }

        .inner-box:hover{
            &:before{
               left:-90px;
                right:auto;
                transform: translateX(0%) rotate(-45deg);
                transform: translateY(0%) rotate(-45deg); 
            }

            .side-lines{
                &:before{
                    width: 100%;
                }

                &:after{
                    height: 100%;
                }
            }
        }

        .icon-outer{
            position: relative;
            display: inline-block;

            &:before{
                position: absolute;
                content: '';
                left: -17px;
                top: -15px;
                right: 0px;
                bottom: 0px;
                width: 82px;
                height: 82px;
                background: url(../images/icons/pattern-5.png);
                animation-name: rotateme; 
                animation-duration: 15s; 
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                
                -webkit-animation-name: rotateme; 
                -webkit-animation-duration: 15s; 
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                
                -moz-animation-name: rotateme; 
                -moz-animation-duration: 15s; 
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
                
                -ms-animation-name: rotateme; 
                -ms-animation-duration: 15s; 
                -ms-animation-iteration-count: infinite;
                -ms-animation-timing-function: linear;
                
                -o-animation-name: rotateme; 
                -o-animation-duration: 15s; 
                -o-animation-iteration-count: infinite;
                -o-animation-timing-function: linear;
            }

            .icon{
                position: relative;
                width: 50px;
                height: 50px;
                color: #232325;
                text-align: center!important;
                display: block;
                line-height: 45px;
                background-color: #04b000;
                transition: all 300ms ease;
                -moz-transition: all 300ms ease;
                -webkit-transition: all 500ms ease;
                -ms-transition: all 300ms ease;
                -o-transition: all 300ms ease;
                box-shadow: 0px 10px 20px rgba(0,0,0,0.10);
            }
        }
    }
}

/*==================== Ecommerce Development =============================*/
.ecommerce-development{
    background: url(../images/e-commerce-development-1.png) no-repeat #fff;
    background-position: top -50px center;
    background-size: cover;
    position: relative;
    padding:50px 0px;

    .layers{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        .layer-1{
            position: absolute;
            left: 15%;
            top: 25%;
        }

        .layer-2{
            position: absolute;
            right: 20%;
            top: 18%;
        }

        .layer-3{
            position: absolute;
            bottom: -50px;
            left: 40%;
        }
    }

    .row{
        padding-top: 120px;
    }

    .left-img{
        position: relative;
        top: 50px;
    }

    .content{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            color: #181818;
            text-transform: uppercase;

            span{
                display: block;
            }
        }

        p{
            font: 18px/25px 'SF Pro Display';
        }
    }

}

.ecommerce-section-1{
    padding:100px 0px 0px 0px!important;
    position: relative;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            left: -60px;
            top:45%;
            -webkit-transform:rotate(80deg);
            -moz-transform: rotate(80deg);
            -ms-transform: rotate(80deg);
            -o-transform: rotate(80deg);
            transform: rotate(80deg);
        }

        .layer-2{
            position: absolute;
            bottom: 0px;
            right: -60px;
        }
    }
}

.ecommerce-section-2{
    padding:50px 0px 100px 0px!important;
    background: url(../images/e-commerce-development-2.png) no-repeat #fff;
    background-size: cover;
    position: relative;

    .container{
        padding-top: 130px;
    }

    ul{
        li{
            margin:0px;
            padding:0px;
            display: inline-block;
            &:before{
                display: none;
            }
        }
    }

    .ecommers-services{
        background:#015bff;
        padding:25px 20px;
        border-radius: 16px;
        margin-right: 1px solid #000;

        a{
            position: relative;
        }

        .ecom-tabs{
            text-align: center;
            border-right: 1px solid #4987fa;
            cursor: pointer;
            .icon{
                width: 60px;
                height: 60px;
                border-radius: 60px;
                background:#0149cc; 
                display: block;
                margin:0px auto;
                line-height: 60px;
                text-align: center;
            }

            .title{
                color: #fff;
                font: 14px/14px 'SF Pro Display';
                margin:0px;
            }
        }

        a.active{
            &:after{
            content: '';
            position: absolute;
            display: block;
            right: 0;
            bottom: -145px;
            border-left: 16px solid transparent;
            border-right: 16px solid transparent;
            border-top: 17px solid #015bff;
            transition: right 300ms ease-out, opacity 300ms ease;
            right: calc(50% - 100px);
            }
        }
    }

    .list-content{
        background:#fff;
        padding:60px;
        border-radius: 16px;
        margin-top: 22px;
        box-shadow: 0 5px 15px -2px rgba(0, 0, 0, 0.1);
    }

}

.ecommerce-section-3{
    position: relative;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            left: -30px;
            top:45%;
            -webkit-transform:rotate(80deg);
            -moz-transform: rotate(80deg);
            -ms-transform: rotate(80deg);
            -o-transform: rotate(80deg);
            transform: rotate(80deg);
        }

        .layer-2{
            position: absolute;
            bottom: 0px;
            right: -30px;
        }
    }
}

.ecommerce-section-4{
    background: url(../images/e-commerce-development-4.png) no-repeat #fff;
    background-size: cover;
    position: relative;
    color:#fff;

    .container{
        padding-top: 130px;
    }

    .media{
        margin-bottom: 30px;

        .service_icon{
            width: 75px;
            height: 75px;
            background: #ffc000;
            // border: 1px solid #fff;
            border-radius: 100px;
            display: block;
            line-height: 75px;
            text-align: center;
            margin-right: 0px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    }
}

.ecommerce-section-5{
    position: relative;
    ul{
        margin:0;
        padding:0;
        list-style-type: none;

        li{
            &:before{
                display: none;
            }
        }
    }
    .add-benefits{
        li{
            padding:15px 25px;
            cursor: pointer;
            a{
                color: #878787;
                font-size: 16px;
            }

            a.active{
                color: #000;
                &:after{
                content: '';
                position: absolute;
                display: block;
                right: 0;
                bottom: -1px;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 13px solid #f3f3f3;
                transition: right 300ms ease-out, opacity 300ms ease;
                right: calc(50% - 10px);
                }
            }
        }
    }

    .list-content{
        padding:40px 40px 200px 50px;
        background:#f3f3f3;
        border-radius: 18px;
    }

    .pos-img{
       position: relative;
       margin-top: -170px;
    }
}

/*==================================== Cross Platform Mobile App Development =================================================*/

.cross-platform{
    width: 100%;
    height: 100vh;
    background: url(../images/cross-platform-bg.svg) bottom 50px center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #fff;
    padding:50px 0px 0px 0px;

    .layers{
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;

        .layer-1{
            position: absolute;
            bottom: 150px;
            right: 0px;
        }

        .layer-2{
            position: absolute;
            top: 0px;
            left: 0px;
        }
    }

    .right-side{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }
}

.cross-platform-1{
    padding:0px 0px 50px 0px!important;

    .aad-serves{
        .media.service-item-3{
            position: relative;
            left: -25px;
            top: 120px
        }
        .media.service-item-5{
            position: relative;
            left: -50px;
            top: 200px;
        }
    }
}

.cross-platform-2{
    //background-image: linear-gradient(#0f5cc3, #09285e);
    position: relative;

    .layer-one{
        position: absolute;
        left: 0px;
        top: 50px;
        z-index: -1;
        border-bottom: 600px solid #0f5cc3;
        border-right: 640px solid transparent;
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}

.cross-platform-3{
    position: relative;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            right: 0px;
            top: -250px;
        }
    }
}

/*==================================== Rummy Game Development =================================================*/

.rummy-gaame-dev-bg{
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
    background: #7e0019;
    background: -moz-radial-gradient(top, ellipse cover, #7e0019 0%, #3f0011 100%);
    background: -webkit-gradient(radial, top top, 0px, top top, 100%, color-stop(0%, #7e0019), color-stop(100%, #3f0011));
    background: -webkit-radial-gradient(top, ellipse cover, #7e0019 0%, #3f0011 100%);
    background: -o-radial-gradient(top, ellipse cover, #7e0019 0%, #3f0011 100%);
    background: -ms-radial-gradient(top, ellipse cover, #7e0019 0%, #3f0011 100%);
    background: radial-gradient(ellipse at top, #7e0019 0%, #3f0011 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e0019', endColorstr='#3f0011', GradientType=1 );
    position: relative;
    padding:0px 0px 0px 0px;
    color: #fff;

    .container{padding:30px 0px;}

    .layers{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: -40px;
            top: -40px;
        }

        .layer-2{
            position: absolute;
            right: -40px;
            top: -40px;
        }
    }

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }

    .bottom-shape{
        background-image: url(../images/bottom-shape.svg);
        background-size: 66.666666666667% 100px;
        bottom: 0;
        height: 100px;
        z-index: 1;
    }
}

.rummy-gaame-dev-1{
    position: relative;
    .layers{
        position: absolute;
        left: 0;
        top:0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            right: -75px;
            bottom: -135px;
            z-index: 1;
        }

        .layer-2{
            position: absolute;
            right: -130px;
            bottom: -180px;
            z-index: 1;
        }
    }
}

.rummy-gaame-dev-2{
    background-size: contain;
    background-position: top center;
    background-image: url(../images/rummy-game-shape.png),linear-gradient(150deg,#e7db3c 0%,#e74c3c 100%)!important;
    background-repeat: no-repeat;
    position: relative;
    padding:0px 0px!important;

    .bottom-shape{
        background-image: url(../images/bottom-shape.svg);
        background-size: 66.666666666667% 100px;
        bottom: 0;
        height: 100px;
        z-index: 1;
    }

    .game-features{
        padding:180px 0px 30px 0px;
        .item{
            background: #fff;
            text-align: center;
            padding: 30px 25px;
            -webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
            box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
            border-radius: 20px;
            border:5px solid rgba(0, 0, 0, 0.07);
            margin-bottom: 30px;
            -webkit-transition: all .5s ease 0;
            transition: all .5s ease 0;
            transition: all 0.5s ease 0s;
            min-height: 330px;

            .icon{
                font-size: 40px;
                margin-bottom:25px;
                color: #f91942;   
                width: 90px;
                height: 90px;
                display: block;
                text-align: center;
                line-height: 90px;
                border-radius: 50px;
                display: block;
                background:rgba(209, 209, 209, 0.20);
                color:#f91942;
                margin: 0px auto 20px;
            }
        }
    }
}

.rummy-gaame-dev-3{
    position: relative;

    .layers{
        position: absolute;
        left: 0;
        top:0px;
        bottom: 0px;
        right: 0px;

        .layer-1{
            position: absolute;
            left: 0px;
            top: -20px;
        }
    }
}

/*=========================== Unity 3D Game Development =====================================*/
.unit-bg{
   width: 100%;
    background: url(../images/unity-bg1.jpg) center center;
    background-repeat: no-repeat;
    background-size: cover;
    // background: linear-gradient(45deg, #1c374c 5%, #122d3e 100%);
    position: relative;
    color: #fff;
    padding: 60px 0px 60px 0px;

    &:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.8);
    }

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            right: 0px;
            top: 0px;
        }
    }
}

.unity-section-1{
    position: relative;

    .overlay{
        position: absolute;
        width: 100%;
        height: 1005;
        background-color: rgba(0,0,0,.2);
        float: left;
        box-shadow: 0 1px 4px #000;

        .top-box{
            position: absolute;
            width: 60%;
            float: left;
            top: 143px;
            left: -100px;
            padding: 80px;
            z-index: 2;
            background-color: #eb1034;
            top: 60px;
            width: 30%;
            padding: 15px;
            left: -50px;
            border-radius: 3px;
            box-shadow: 0 0 5px rgba(52,49,49,.5), 8px 8px 0 #d8d9de;
        }
    }
}

.unity-section-2{
    background: #333 url(../images/unity-bg3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    &:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.8);
    }

    .row{
        position: relative;
    }

    .serviceBox{
        margin-bottom: 30px;
    }


}

.unity-section-3{
    background: url(../images/unity-bg-2.png) no-repeat;
    background-position: bottom center; 
    background-size: cover;
    position: relative;
}


/*==================================== Web App Development =================================================*/
.webapp-bg{
    padding:80px 0px 100px;
    position: relative;
    background: url(../images/webapp-bg-01.png) no-repeat;
    background-position: bottom center; 
    background-size: cover;
    color: #fff;

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }

        p{
          font: 18px/25px "SF Pro Display" !important;  
        }
    }
}

.webapp-section-1{
    position: relative;
    padding:40px 0px 0px 0px!important;
}

.webapp-section-2{
   position: relative;
   background: url(../images/webapp-bg-02.png) no-repeat;
   background-position: top center; 
   background-size: cover;
   color: #fff;

   .container{
    padding: 160px 0px;
   }

   .media{
        margin-bottom: 30px;

        .service_icon{
            width: 75px;
            height: 75px;
            background: #ffc000;
            border-radius: 100px;
            display: block;
            line-height: 75px;
            text-align: center;
            margin-right: 0px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
   }


}


/*==================================== Logo Design ============================================*/
.logo-design-bg{
    width: 100%;
    height: 100%;
    background-color: #42387a;
    background: -webkit-linear-gradient(60deg, #42387a, #9d41e0);
    background: linear-gradient(60deg, #42387a, #9d41e0);
    position: relative;
    overflow: hidden;
    padding:100px 0px 150px;
    color: #fff;

    svg.svg-intro-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 22;
    }

    svg.svg-intro-bottom2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 33;
    }

    svg.svg-intro-right {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    .container{
        position: relative;
        z-index: 99;
    }

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 55;

        .layer-1{
            position: absolute;
            bottom: 50%;
            right: 80px;
        }

        .layer-2{
            position: absolute;
            right: 200px;
            top: 8%;
        }

        .layer-3{
            position: absolute;
            top: 50%;
            left: 5%;
        }

        .layer-4{
            position: absolute;
            top: 10%;
            left: 18%;
        }
        .layer-5{
            position: absolute;
            top: 20%;
            left: 45%;
        }
    }
}

.logo-design-section-1{
    position: relative;
    padding:0px 0px 60px 0px!important;
}

.logo-design-section-2{
    position: relative;
    background: #ebf3f5;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: 0;
            top: 0;
        }

        .layer-2{
            position: absolute;
            right: 0;
            top: 0;
        }

        .layer-3{
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .layer-4{
            position: absolute;
            right: 0;
            bottom: 0;
        }

    }

    .page-heading{
        margin-bottom: 50px;
    }

    .grid__item{
        margin-bottom: 30px;
        padding: 30px;
        background-color: #fff;
        text-align: center;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out;
        min-height: 346px;

        &:hover{
            background-color: #fff;
            box-shadow: 0 0 30px 0px rgba(0,0,0,0.18);
            -moz-box-shadow: 0 0 30px 0px rgba(0,0,0,0.18);
            -webkit-box-shadow: 0 0 30px 0px rgba(0,0,0,0.18);
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
        }

        .grid__icon{
            width: 100px;
            height: 100px;
            margin: auto auto 10px auto;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            background: url(../images/icons-bg.png) no-repeat center;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;

            svg{
                display: block;
                margin: auto;
            }
        }

        .grid__title {
           font: 20px/24px "SFProDisplay-Bold" !important;
            font-weight: 700;
            padding: 10px 0 20px 0;
            margin: 0px;
            text-transform: uppercase;
        }

        .grid__text {
            padding-bottom: 20px;
            line-height: 26px;
            text-align: center;
        }
    }
}

.logo-design-section-3{
    position: relative;

    .media{
        margin-bottom: 30px;

        .service_icon{
            width: 40px;
            height: 40px;
            background: #04b000;
            border: 1px solid #04b000;
            border-radius: 100px;
            display: block;
            color: #fff;
            line-height: 40px;
            text-align: center;
            margin-right: 10px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    }
}

/*================================ Socila Media Marketing ===============================================*/
.smo-bg{
    position: relative;
    background:#1e88e5;
    padding:30px 0px;
    color: #fff;

    .btn-cmoon-1 {
        border-radius: 50px;
        padding: .375rem 1.6rem;
        color: #000;
        background-color: #ffdd14;
        border-color: #ffdd14;
    }

    .mail-layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .layer-2{
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
    }

    .smo-img{
        position: relative;

        .layers{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;

            .layer-1{
                position: absolute;
                left: 0;
                top: 0;
            }

            .layer-2{
                position: absolute;
                left: 84px;
            }

            .layer-3{
                position: absolute;
                bottom: 26px;
                right: 26px;
            }
            .layer-4{
                position: absolute;
                top: 45px;
                left: 40%;
            }

            .layer-5{
                position: absolute;
                top: 55px;
                left: 37%;
            }

            .layer-6{
                position: absolute;
                bottom: 110px;
                left: 75px;
            }

            .layer-7{
                position: absolute;
                bottom: 100px;
                left: 60px;
            }

            .layer-8{
                position: absolute;
                top: 48%;
                right: 105px;
            }
        }
    }
}

.smo-section-1{
    position: relative;
    background: url(../images/smo-abt-bg.png);
}

.smo-section-2{
    position: relative;
    background: #1e88e5;

    .container{
        padding-top: 200px;
    }

    .smo-top{
        position: absolute;
        top: 0px;
    }

    .smo-bottom{
        position: absolute;
        bottom: 0px;
    }

    .grid__item{
        min-height: 400px;

        .grid__icon{
            background: url(../images/icons-bg2.png) no-repeat center;
        }
    }
}

.smo-section-3{
    position: relative;
    padding:0px 0px !important;
        
        .smo-left-img{
            position: relative;
            left: -205px;
        }
}


/*================================ SEO ===============================================*/

.seo-bg{
    width: 100%;
    height: 100%;
    background-color: #71fff0;
    background: -webkit-linear-gradient(60deg, #71fff0, #c0fdf6);
    background: linear-gradient(60deg, #71fff0, #c0fdf6);
    position: relative;
    overflow: hidden;
    padding:40px 0px;

    svg.svg-intro-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    svg.svg-intro-bottom-2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    svg.svg-intro-bottom-3 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 22;
    }

    .content{
        position: relative;
        z-index: 44;
        .left-titles{
            h1{
                font: 32px/42px "SF Pro Display" !important;
                letter-spacing: 1px;
                text-transform: uppercase;
                color: #004d6b;

                span{
                    color: #004d6b;
                    font: 32px/42px "SFProDisplay-Bold" !important;
                }
            }

            h5{
                margin:0px 0px 20px 0px;
                color: #074d59;
            }

            .btn-cmoon-1 {
                border-radius: 50px;
                padding: .375rem 1.6rem;
                background-color: #ff508b;
                color: #fff;
                border-color: #ff508b;
            }
        }

        .seo-img{
            position: relative;
            margin-bottom: 30px;
            img{
                z-index: 99;
                position: relative;
            }

            .layers{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;

                .layer-1{
                    position: absolute;
                    left: -66px;
                    bottom: 30px;
                }

                .layer-2{
                    position: absolute;
                    left: 20px;
                    top: 140px;
                }

                .layer-3{
                    position: absolute;
                    left: 55px;
                    bottom: 80px;
                }

                .layer-4{
                    position: absolute;
                    right: -60px;
                    bottom: 60px;
                }

                .layer-5{
                    position: absolute;
                    right: 30px;
                    top: 110px;
                }

                .layer-6{
                    position: absolute;
                    right: -30px;
                    top: 85px;
                }

                .layer-7{
                    position: absolute;
                    left: 120px;
                    top: 56px;
                }

                .layer-8{
                    position: absolute;
                    z-index: 100;
                    left: 25px;
                    bottom: 20px;
                }

            }
        }
    }

    
}

.seo-section-1{
    position: relative;

    .abt-content{
        width: 100%;
        color: #000;
        display: flex;
        position: relative;

        .svg-support-bottom {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
            width: 100%;
            height: 100%;
        }

        .abt-row{
            position: relative;
            z-index: 99;
            padding: 100px;
        }
    }

    .page-heading{
        color: #004d6b;
    }
}

.seo-section-2{
    position: relative;
    background-color: #c0fdf6;
    background:url('../images/seo/pattern-bg-grey.jpg');

    .bg-waves{
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 100vw;
        margin: 0 0 0 -50vw;
        overflow: hidden;

        .wave{
            position: absolute;
        }   

        .wave.wave-top-left{
            top: -40px;
            bottom: auto;
            left: 0;
            right: auto;
            width: 421px;

            img.layer{
                top: 0;
                bottom: auto;
                left: 0;
                right: auto;
                position: absolute;
                -webkit-animation: waves 5s infinite ease-in-out;
                animation: waves 5s infinite ease-in-out;

                &+ .layer{
                    -webkit-animation-delay: 1s;
                    animation-delay: 1s;
                }
            }
        }

        .wave.wave-bottom-right{
            top: auto;
            bottom: -40px;
            left: auto;
            right: 0;
            width: 326px;

            img.layer{
                top: auto;
                bottom: 0;
                left: auto;
                right: 0;
                position: absolute;
                -webkit-animation: waves 5s infinite ease-in-out;
                animation: waves 5s infinite ease-in-out;
                -webkit-transition: var(--transition2);
                -ms-transition: var(--transition2);
                -o-transition: var(--transition2);
                transition: var(--transition2);

                &+ .layer{
                    -webkit-animation-delay: 1s;
                    animation-delay: 1s;
                }
            }
        }
    }

    .page-heading{
        color: #004d6b;
    }

    .results-box{
        border-radius: 5px;
        box-shadow: 0 5px 5px #eee;
        margin-bottom: 20px;
        background-color: #fff;

        .list-group{
            padding-left: 0;
            margin-bottom: 20px;

            li{
                &:before{
                    display: none;
                }
            }

            .list-group-item{
                position: relative;
                display: block;
                padding: 10px 15px;
                margin-bottom: -1px;
                background-color: #fff;
                border: 1px solid #ddd;

                &:first-child{
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                }

                .mb10 {
                    margin-bottom: 10px;
                }

                a{
                    color: #333;
                }
            }

            .bg-light-green{
                background: #c0fdf6;
            }
        }
    }
}

.logo-design-section-2.seo-section-3{
    
    // background:#c0fdf6;
    position: relative;
    background: linear-gradient(45deg, #c1eedd 5%, #f4ffff 100%);

    
    .layers{
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;

        .layer-5{
            position: absolute;
            left: 0px;
            top: 0px;
        } 

        .layer-6{
            position: absolute;
            right: 0px;
            top: 0px;
        } 

        .layer-7{
            position: absolute;
            left: 0px;
            bottom: 0px;
        } 
    }

    .page-heading{
        color: #004d6b;
    }

}

.feat.seo-section-4{
    .item{
        .icon{
            background: #ff508b;
        }

        &:hover{
            background: #ff508b;

            span.icon{
                svg{
                    fill: #ff508b;
                }
            }
        }
    }
}

.seo-section-5{
    position: relative;
    background: linear-gradient(45deg, #c1eedd 5%, #f4ffff 100%);

    .page-heading{
        color: #004d6b;
    }
}

/*================================ TAMBOLA GAME DEVELOPMENT ===============================================*/
.tambola-game-bg{
    position: relative;
    //background-image: radial-gradient(#a40a00, #170400);
    //background: url(../images/ludo-bg.png) no-repeat #8a0a01;

    background: #a40a00;
    background-image: url("../images/tambola-bg.png") no-repeat;
    background-image: url("../images/tambola-bg.png"), radial-gradient(#a40a00, #170400); 
    background-position: center center;
    color: #fff;
    padding:200px 0px;

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            top: 15%;
            left: 0;
        }

        .layer-2{
            position: absolute;
            top: 25%;
            right: 0;
        }

        .layer-3{
            position: absolute;
            right: 50px;
            bottom: 100px;
        }

        .layer-4{
            position: absolute;
            right: 50px;
            top: 30px;
        }

        .layer-5{
            position: absolute;
            left: 60%;
            top: 110px;
        }

        .layer-6{
            position: absolute;
            left:-15px;
            bottom: 0px;
        }
        .layer-7{
            position: absolute;
            left:50%;
            bottom: 100px;
        }

        .layer-8{
            position: absolute;
            left:20%;
            top: 100px;
        }

    }
}

.tambola-section-1{
    background-image: radial-gradient(#000000, #000000);
    color: #fff;
    position: relative;
}

.tambola-section-2 {
    background: #333 url(../images/tambola-bg3.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #fff;

    .item{
        background: rgba(88, 12, 0, 0.5);
        text-align: center;
        padding: 30px 25px;
        -webkit-box-shadow: 0 0px 25px rgba(0, 0, 0, 0.07);
        box-shadow: 0 0px 25px rgba(0, 0, 0, 0.07);
        border-radius: 20px;
        border: 5px solid rgba(0, 0, 0, 0.07);
        margin-bottom: 30px;
        -webkit-transition: all .5s ease 0;
        transition: all .5s ease 0;
        transition: all 0.5s ease 0s;
        min-height: 330px;

        .icon{
            font-size: 40px;
            margin-bottom: 25px;
            color: #f91942;
            width: 90px;
            height: 90px;
            display: block;
            text-align: center;
            line-height: 90px;
            border-radius: 50px;
            display: block;
            background: rgba(255, 255, 255, 0.6);
            color: #f91942;
            margin: 0px auto 20px;
        }
    }
}

.tambola-section-3{
    position: relative;
    // background: #6d0e00;
    background: #000000;
    background-image: url("../images/tambola-bg2.png") no-repeat;
    background-image: url("../images/tambola-bg2.png"), radial-gradient(#000000, #000000); 
    background-position: center center;
    color: #fff;
}

.tambola-section-4{
    position: relative;
    background: #a40a00;
    background-image: radial-gradient(#a40a00, #a40a00);

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: 0;
            top: 0;
        }

        .layer-2{
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}


/*================================ LUDO GAME DEVELOPMENT ===============================================*/
.ludo-game-bg{
    position: relative;

    background: #009bda;
    background-image: url("../images/tambola-bg.png") no-repeat;
    background-image: url("../images/tambola-bg.png"), radial-gradient(#009bda, #002fb5, #000636); 
    background-position: center center;
    color: #fff;
    padding:40px 0px;

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            bottom: 20px;
            right: 0;
        }

        .layer-2{
            position: absolute;
            top: 15%;
            left: 10%;
        }

        .layer-3{
            position: absolute;
            right: 50px;
            top: 20%;
        }

        .layer-4{
            position: absolute;
            left: 0px;
            top: 50%;
        }

        .layer-5{
            position: absolute;
            left: 60%;
            top: 110px;
        }

        .layer-6{
            position: absolute;
            left:-15px;
            bottom: 0px;
        }
        .layer-7{
            position: absolute;
            left:50%;
            bottom: 100px;
        }

        .layer-8{
            position: absolute;
            left:20%;
            top: 100px;
        }

    }
}

.ludo-section-1{
    background-image: radial-gradient(#002fb5, #002fb5);
    color: #fff;
    position: relative;
    padding:125px 0px!important;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }
}

.ludo-section-2 {
    background: url(../images/ludo-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #fff;

    &:before{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 9, 84, 0.9);
    }

    .iteam{
        background-color: transparent;
        border: 1px dashed #f1f1f1;
        cursor: default;
        float: left;
        margin: 0;
        padding: 0.625rem 0.625rem 0.625rem 0.625rem;
        position: relative;
        text-align: left;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 4px;

        li{
            display: block;
            padding: 0px 0px 0px 25px;
            font-size: 16px;
            line-height: 30px;
            position: relative;
            text-transform: capitalize;

            &:before{
                content: '';
                background-color: #feb602;
                border-radius: 100%;
                margin-right: 10px;
                width: 1rem;
                height: 1rem;
                position: absolute;
                left: 0;
                top: 7px;
            }


        }

        &:hover{
            background-color: #fff;
            color: #000;
            display: block;
        }
    }
}

.ludo-section-3{
    position: relative;
    // background: #6d0e00;
    background: #002fb5;
    // background-image: url("../images/tambola-bg2.png") no-repeat;
    // background-image: url("../images/tambola-bg2.png"), radial-gradient(#000000, #000000); 
    // background-position: center center;
    color: #fff;
}

.ludo-section-4{
    position: relative;
    background: #000636;
    background-image: radial-gradient(#000636, #000636);

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: 0;
            top: 0;
        }

        .layer-2{
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}


/*================================ Search Engine Marketing ===============================================*/

.sem-bg{
    position: relative;
    padding:100px 0px;
    background: #38a0ff;


    .mail-layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: 14%;
            top:20px;
        }

        .layer-2{
            position: absolute;
            left: 14%;
            bottom:20px;
        }

        .layer-3{
            position: absolute;
            right: 1%;
            top:20px;
        }

        .layer-4{
            position: absolute;
            right: 1%;
            bottom:20px;
        }
    }

    .left-titles{
        h1{
            font: 36px/50px "SF Pro Display" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #140035;
            text-shadow: 2px 1px #fff;

            span{
                display: block;
                color: #140035;
                font: 36px/50px "SFProDisplay-Bold" !important;
            }
        }

        ul{
            margin:0;
            padding:0;
            list-style-type: none;

            li{
                display: block;
                padding: 0px 0px 15px 25px;
                font-size: 16px;
                position: relative;
                color: #fff;

                &:before{
                    font-family: 'Font Awesome 5 Pro';
                    content: "\f0a4";
                    margin-right: 10px;
                    color: #140035;
                    font-weight: bold;
                    position: absolute;
                    left: 0;
                    top: 0;
                    text-shadow: 1px 2px #fff;
                }
            }
        }

        .btn-cmoon-1{
            border-radius: 50px;
            padding: .375rem 1.6rem;
            background-color: #140035;
            color: #fff;
            border-color: #140035;
        }
    }
}

.sem-section-1{
    position: relative;
    background:#e6e8ff;

    .page-heading{
        color: #38267c;
    }
}

.sem-section-2{
    position: relative;
    background: #75a8b3;

    .layers{
        position:absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        .layer-1{
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .layer-2{
            position: absolute;
            bottom: 0px;
            left: 0px;
        }

    }

    .col-md-12{
        margin-bottom: 20px;
    }

    .media{
        .service_icon{
            background: url(../images/icons-bg2.png) no-repeat center;
            width: 100px;
            height: 100px;
            margin: auto auto auto auto;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            margin-right: 20px;

            svg{
                text-align: center;
                margin:auto;
            }
        }
    }


}

.sem-section-3{

    .media{
        .service_icon{
            background: #1631a4;
            border: 1px solid #1631a4;
        }
    }
}


/*================================ Mobile App For Startups Growth ===============================================*/

.mobile-startup-bg{
    position: relative;
    padding:130px 0px;
    background: linear-gradient(to top right, #3b1aaf 35%, #c34acd 100%);

    .mail-layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            top: -50px;
            right: 50px;
            z-index: 1;
        }

        .layer-2{
            position: absolute;
            right: 0px;
            bottom: 0px;
            z-index: 99;
        }

        .layer-3{
            position: absolute;
            right: 310px;
            bottom: 30px;
            z-index: 33;
        }

        .layer-4{
            position: absolute;
            right: 185px;
            bottom: 135px;
        }

        .layer-5{
            position: absolute;
            right: 280px;
            bottom: 150px;
        }

        .layer-6{
            position: absolute;
            right: 490px;
            bottom: 305px;
        }
    }

    .left-titles{
        h1{
            font: 45px/60px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .btn-cmoon-1{
            color: #fff;
            background-color: #d14ed0;
            border-color: #d14ed0;
            border-radius: 50px;
            padding: .375rem 1.6rem;
        }
    }
}

.mobile-startup-1{
    position: relative;

    .item-box{

        text-align: center;
        padding:30px;
        background: #efefef;
        min-height: 500px;

        img{
            width: 200px;
            display: block;
            
            margin:auto;
        }

        h2{
            font: 20px/30px SFProDisplay-Bold!important;
            margin: 20px 0px;
        }

        &:hover{
           background: linear-gradient(to bottom, #3b1aaf 0%, #c34acd 100%); 
            box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.18);
            -moz-box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.18);
            -webkit-box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.18);
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            color: #fff;
        }

    }
}


/*================================ Website For Startups Growth ===============================================*/

.website-startup-bg{
    position: relative;
    padding:50px 0px;
    // background: radial-gradient(#400084, #140152);
    background-image: radial-gradient(closest-side at 70% 50%,#400084,#140152);
    min-height: 500px;

    .mail-layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }
    }

    .web-startup-img{
        position: relative;

        .layers{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right:0;

            .layer-1{
                position: absolute;
                top: 70px;
                left: -40px;
            }
        }
    }
}

.website-startup-sec-1{
    position: relative;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }
}

.logo-design-section-2.website-startup-sec-2{
    position: relative;
    // background-image: radial-gradient(closest-side at 70% 50%, #400084, #140152);
    //background: #4985cb;
    background: linear-gradient(to right, #4985cb 0%, #4985cb 50%, #ffb224 50%, #ffb224 100%);

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-5{
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .layer-6{
            position: absolute;
            right: 0;
            top: 50px;
        }
    }

    .grid__item{
        min-height: 400px;

        .grid__icon{
            background: url(../images/icons-bg2.png) no-repeat center;
        }
    }
}

.website-startup-sec-3{
    position: relative;
    background: #efefef;
    color: #000;

    .page-heading{
        
    }


}


/*================================ website for business growth ===============================================*/

.business-growth-bg{

    // background: url(../images/service-bg.jpg) no-repeat;
    // background-position: center center;
    // background-size: cover;
    background: linear-gradient(to right, #0287bf 20%, #5cefd9 100%);
    padding: 80px 0px;
    width: 100%;
    position: relative;
    color: #fff;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 111;
    }

    .layers{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        .layer-1{
            position: absolute;
            right: 90px;
            bottom: 180px;
        }

        .layer-2{
            position: absolute;
            right: 20%;
            bottom: 70px;
        }

        .layer-3{
            position: absolute;
            left: 47%;
            bottom: 130px;
        }

        .layer-4{
            position: absolute;
            left: 52%;
            top: 100px;
        }
    }

    .left-titles{

        h5{
            margin:0px 0px 15px 0px;
        }
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

        }

        .btn-cmoon-1{
            border-radius: 50px;
            padding: .375rem 1.6rem;
            color: #000;
            background-color: #ffdd14;
            border-color: #ffdd14;
        }
    }

}

.business-growth-sec-1{
    position: relative;
    padding:100px 0px!important;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 111;
    }

    .layers{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        .layer-1{
            position: absolute;
            top: -12px;
            left: 0;
            z-index: 222;
        }

        .layer-2{
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .layer-3{
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }

    .iteam{
        background-color: transparent;
        border: 1px dashed #0287bf;
        cursor: default;
        float: left;
        margin: 0;
        padding: 0.625rem 0.625rem 0.625rem 0.625rem;
        position: relative;
        text-align: left;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 4px;

        li{
            display: block;
            padding: 0px 0px 0px 25px;
            font-size: 16px;
            line-height: 30px;
            position: relative;
            text-transform: capitalize;

            &:before{
                content: '';
                background-color: #0287bf;
                border-radius: 100%;
                margin-right: 10px;
                width: 1rem;
                height: 1rem;
                position: absolute;
                left: 0;
                top: 7px;
            }
        }
    }
}

.business-growth-sec-2{
    position: relative;
    padding:100px 0px 150px!important;
     background: #0287bf;
    // background: linear-gradient(to top, #5cefd9 0%, #0287bf 100%);

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 111;
    }

    .media{
        margin-bottom: 40px;

        .service_icon{
            width: 75px;
            height: 75px;
            background: #ffdd14;
            border: 1px solid #ffdd14;
            border-radius: 100px;
            display: block;
            line-height: 75px;
            text-align: center;
            margin-right: 10px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    }
}

.business-growth-sec-3{
    position: relative;
    overflow: hidden;
    background: #fff url(../images/contact-bg.png) bottom left repeat-x;
    background-size: auto 150px;

    .business-growth-img-2{
        position: relative;
        bottom: -60px;
    }
}


/*=================================== Website For Enterprise ==================================================*/

.website-for-enterprise-bg{
    position: relative;
    padding:60px 0px 120px;
    width: 100%;
    height: 100%;
    background-color: #5e55ee;
    background: -webkit-linear-gradient(60deg, #5e55ee, #4b2fd2);
    background: linear-gradient(60deg, #5e55ee, #4b2fd2);
    overflow: hidden;
    color: #fff;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
        z-index: 333;
    }

    svg.svg-intro-bottom-2{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 65%;
        z-index: 222;
    }

    svg.svg-intro-bottom-3{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
    }

    .left-titles{

        h5{
            margin: 0px 0px 15px 0px;
        }
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .btn-cmoon-1{
            border-radius: 50px;
            padding: .375rem 1.6rem;
            color: #000;
            background-color: #ffdd14;
            border-color: #ffdd14;
        }
    }

    .container{
        z-index: 444;
        position: relative;
    }


}

.website-for-enterprise-1{
    position: relative;
    padding:60px 0px 100px!important;

    .iteam{
        background-color: transparent;
        border: 1px dashed #0287bf;
        cursor: default;
        float: left;
        margin: 0;
        padding: 0.625rem 0.625rem 0.625rem 0.625rem;
        position: relative;
        text-align: left;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 4px;

        li{
            display: block;
            padding: 0px 0px 0px 25px;
            font-size: 16px;
            line-height: 30px;
            position: relative;
            text-transform: capitalize;

            &:before{
                content: '';
                background-color: #0287bf;
                border-radius: 100%;
                margin-right: 10px;
                width: 1rem;
                height: 1rem;
                position: absolute;
                left: 0;
                top: 7px;
            }
        }
    }

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 111;
    }
}

.website-for-enterprise-2{
    position: relative;
    background:#4b2fd2;
    padding:60px 0px 150px!important;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 111;
    }

    .media{
        margin-bottom: 40px;

        .service_icon{
            width: 75px;
            height: 75px;
            background: #ffdd14;
            border: 1px solid #ffdd14;
            border-radius: 100px;
            display: block;
            line-height: 75px;
            text-align: center;
            margin-right: 10px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
     }
}

/*=================================== Digital Marketing Startups ==================================================*/
.dm-startups{
    width: 100%;
    height: 100%;
    background-color: #e8f3ff;
    position: relative;
    overflow: hidden;
    padding:60px 0px;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
    }

    .container{
        position: relative;
        z-index: 222;
    }

    .dm-img{
        position: relative;
        .layers{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;

            .layer-1{
                position: absolute;
                bottom: 90px;
                left: 48%;
                z-index: 11;

            }
        }
    }

    .main-layers{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        .layer-1{
            position: absolute;
            left: 0px;
            top: 0px;
        }
    }

    .left-titles{
        h1{
            
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #2a6eed;
            font: 32px/42px "SF Pro Display" !important;

            span{
                display: block;
                font: 32px/42px "SFProDisplay-Bold" !important;
            }
        }

        h5{
            margin:0px 0px 15px 0px;
        }
    }

    .btn-cmoon-1{
        color: #fff;
        border-radius: 50px;
        padding: .375rem 1.6rem;
        background-color: #2a6eed;
        border-color: #2a6eed;
    }
}


.dm-startups-1{
    position: relative;
    background: #efefef;
    //padding:40px 0px 120px 0px!important;

    .grid__item{
        margin-bottom: 30px;
        padding: 30px;
        background-color: #fff;
        text-align: center;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out;
        min-height: 250px;
        border-radius: 4px;

        .grid__icon{
            width: 100px;
            height: 100px;
            margin: auto auto 10px auto;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            background: url(../images/icons-bg2.png) no-repeat center;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;

            svg{
                display: block;
                margin: auto;
            }
        }

        .grid__title{
            font: 17px/20px "SFProDisplay-Bold" !important;
            font-weight: 700;
            padding: 10px 0 10px 0;
            margin: 0px;
            text-transform: uppercase;
        }

        &:hover{
            background-color: #fff;
            box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.18);
            -moz-box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.18);
            -webkit-box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.18);
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
        }
    }

    .row{
        margin-top: 50px;
    }

    svg.svg-features-bottom{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 120px;
        z-index: 111;
    }
}

.dm-startups-2{
    position: relative;
    background: #fef8f6;
    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            top: 0;
            left: 0;
        }

        .layer-2{
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
}

.dm-startups-3{
    position: relative;

    .dm-iteam{
        margin-top: 40px;

        .page-heading{
            h2{
                font: 26px/26px SF Pro Display!important;
            }
        }
    }
}

/*================================ Digital Marketing For Growing Business ======================================*/

.dm-business-growth{
    width: 100%;
    height: 100%;
    background-color: #190d74;
    position: relative;
    overflow: hidden;
    padding: 50px 0px 180px;
    color: #fff;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 22;
    }

    svg.svg-intro-bottom2{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 33;
    }

    svg.svg-intro-right{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    .container{
        position: relative;
        z-index: 99;
    }

    .left-titles{
        h5{
            margin: 0px 0px 15px 0px;
        }

        h1{
            font: 26px/36px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;

            span{
                display: block;
            }
        }

        .btn-cmoon-1{
            border-radius: 50px;
            padding: .375rem 1.6rem;
            color: #000;
            background-color: #ffac00;
            border-color: #ffac00;
        }
    }

    .dm-business-right-img{
        position: relative;

        .layers{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;

            .layer-1{
                position: absolute;
                top: -30px;
                left: 0;
            }

            .layer-2{
                position: absolute;
                top: 30px;
                left: 37%;
            }

            .layer-3{
                position: absolute;
                top: 0;
                right:0;
            }

            .layer-4{
                position: absolute;
                top: 10px;
                left:25%;
            }

            .layer-5{
                position: absolute;
                top: 135px;
                right: 20%;
                 z-index: 2;
            }

            .layer-6{
                position: absolute;
                top: 100px;
                left: 20px;
            }

            .layer-7{
                position: absolute;
                top: 80px;
                right: 17%;
            }

            .layer-8{
                position: absolute;
                top: 110px;
                right: 60px;
            }
        }

        img{
            position: relative;
            z-index: 1;
        }
    }   
}

.dm-business-growth-1{
    position: relative;
    background: #ebf3f5;
    padding:0px 0px 60px 0px!important;

    .page-heading{
        h1{
            color: #130869;
        }
    }

    .col-md-12{
        margin-bottom: 30px;
    }

    .media{
        margin-bottom: 30px;

        .service_icon{
           background: url(../images/icons-bg2.png) no-repeat center;
            width: 100px;
            height: 100px;
            margin: auto auto auto auto;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            margin-right: 20px;

            svg{
                text-align: center;
                margin: auto;
            }
        }
    }

    .layers{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .layer-2{
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
}

.dm-business-growth-2{
    position: relative;

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}

/*==================================== Mobile App Prototyping =================================================*/

.mob-prototyping{
    position: relative;
    padding:60px 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1875ec;
    color: #fff;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 11;
    }

    .container{
        position: relative;
        z-index: 22;
    }

    .left-titles{
        h1{
            font: 38px/50px "SF Pro Display" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #fff;

            span{
                display: block;
                font: 38px/50px "SFProDisplay-Bold" !important;
                color: #fff;
            }
        }

        .btn-cmoon-1{
            color: #fff;
            border-radius: 50px;
            padding: .375rem 1.6rem;
            background-color: #001b6f;
            border-color: #001b6f;
        }
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .layer-1{
            position: absolute;
            top: 50px;
            left: 0;
        }

        .layer-2{
            position: absolute;
            top: 0;
            left: 200px;

        }

        .layer-3{
            position: absolute;
            top: 0;
            right: 100px;
        }

        .layer-4{
            position: absolute;
            left: 0;
            bottom:40px;
        }

        .layer-5{
            position: absolute;
            right: 0;
            bottom:130px;
        }

        .layer-6{
            position: absolute;
            right: 0;
            top:100px;
        }

        .layer-7{
            position: absolute;
            bottom: 50px;
            left: 50%;
        }
    }

}

.mob-prototyping-1{
    position: relative;
    // background: radial-gradient(#f5f5f5, #f4f4f4, #f3f3f3);
}

.logo-design-section-2.mob-prototyping-2{
    position: relative;

    .page-heading{
        margin-bottom: 20px;
    }

    .grid__item{

        padding: 15px;
        min-height: 220px;

        .grid__title{
            font: 15px/20px "SFProDisplay-Bold" !important;
            padding:20px 0px!important;
            text-transform: capitalize;
        }
    }
}

/*==================================== Content Writing =================================================*/

.content-writing{
    position: relative;
    padding:60px 0px;
    color: #fff;
    background: linear-gradient(to bottom right, #11d6cc 0%, #00a9ce 100%);

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 11;
    }

    .left-titles{
        h1{
            letter-spacing: 1px;
            text-transform: uppercase;
            font: 32px/42px "SF Pro Display" !important;

            span{
                display: block;
                font: 32px/42px "SFProDisplay-Bold" !important;
            }
        }

        .btn-cmoon-1{
            color: #fff;
            background-color: #e83d83;
            border-color: #e83d83;
        }
    }
}

.content-writing-sec-1{
    position: relative;
    padding:60px 0px 120px 0px!important;

    .abt{
        margin-top: 30px;

        .cnt-box{
            padding:20px;
            border: 1px dashed #b6b6b6;
            min-height: 240px;
            background: #fcfcfc;

            &:hover{
                background: #00a9ce;
                color: #fff;
            }
        }
    }

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 111;
    }
}

.content-writing-sec-2.feat{
    position: relative;
    background: #ecf0f1;
    padding:40px 0px 140px 0px!important;

        svg.svg-intro-bottom{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            z-index: 11;
        }

        .services-tems{
            margin-top: 30px;

            .col-lg-3{
               padding-right: 5px;
               padding-left: 0px;
               margin-bottom: 10px;
            }

            .item{
                border-radius: 0px;
                padding: 25px 18px;

                h5{
                    font: 16px/20px SFProDisplay-Bold !important;
                    margin:15px 0px;
                }

                .icon{
                    margin: 0px auto 0px;
                    background: linear-gradient(to bottom right, #11d6cc 0%, #00a9ce 100%);
                }

                &:hover{
                    background: #00a9ce;

                    .icon{
                        background: #fff;
                    }
                }
            }
        }
}

.content-writing-sec-3{
    position: relative;
    bottom: -60px;

}


/*==================================== Digital Cartoon Marking =================================================*/

.digital-cartoon{
    position: relative;
    padding:60px 0px;
    // background: #9cbce5;
    color: #fff;
    background-image: radial-gradient(#435e5f, #435e5f, #293c3d);

    .layers{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            left: 50px;
            top: 5%;
        }

        .layer-2{
            position: absolute;
            right: 10px;
            bottom: -10px;
        }
    }

    .left-titles{
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #ffdb2c;
        }

        .btn-cmoon-1{
            background-color: #d9841a;
            border-color: #d9841a;
            color: #fff;
        }
    }
}

.digital-cartoon-sec-1{
    position: relative;
    background-color: #fff;

    svg.svg-intro-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 55;
    }

    .bottom-video{

        width: 140%;
        height: auto;

    }
}

.clientsays{
    ul{
        li{
            &:before{
                display: none;
            }
        }
    }
}

.digital-cartoon-sec-3{
    position: relative;
    // padding:40px 0px 0px 0px!important;

    .cmoon-cartoon{
        // position: relative;
        // bottom: -60px;
    }
}

/*==================================== Website Revamp =================================================*/

.website-revamp{
    position: relative;
    background: linear-gradient(to top right, #4a5fdc 0%, #4a5fdc 101%);
    //background: #c7ecff;
    // background: -moz-linear-gradient(top, #c7ecff 0%, #f9efff 100%);
    // background: -webkit-linear-gradient(top, #c7ecff 0%,#f9efff 100%);
    // background: linear-gradient(to bottom, #c7ecff 0%,#f9efff 100%);
    overflow: hidden;
    padding: 60px 0px;
    align-items: center;
    display: grid;

    &:before{
        content: "";
        background: url(../images/banner-shap-1.png);
        position: absolute;
        height: 100vh;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        background-position: right 0;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .left-titles{
        color: #fff;
        h1{
            font: 32px/42px "SFProDisplay-Bold" !important;
            letter-spacing: 1px;
            text-transform: uppercase;
            
        }

        .btn-cmoon-1{
            background-color: #ffc107;
            border-color: #ffc107;
            color: #000;
        }
    }
}

.website-revamp-1{
    position: relative;
    background: #fff;
    overflow: hidden;

    &:before{
        content: "";
        background: url(../images/dot-shape.png) #d7f0fd;
        position: absolute;
        height: 400px;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        background-position: center top;
        background-size: contain;
        background-repeat: repeat;
    }

    .upset {
        position: relative;
        z-index: 5;
    }

    .shape-bg2 {
        position: relative;

        &:before{
            content: '';
            background: url(../images/shape-1.svg);
            background-size: auto;
            position: absolute;
            height: 150px;
            width: 150px;
            background-repeat: no-repeat;
            left: -40px;
            bottom: -60px;
            z-index: 0;
        }

        &:after{
            content: '';
            background: url(../images/shape-2.svg);
            background-size: auto;
            position: absolute;
            height: 150px;
            width: 150px;
            background-repeat: no-repeat;
            right: -70px;
            bottom: -50px;
            z-index: -1;
        }
    }

    .link-hover{
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }

    .mt30{
        margin-top: 35px;
    }

    .s-block{
        background: url(../images/shape-7.svg) #fff;
        background-size: 180px;
        background-position: top right;
        background-repeat: no-repeat;
        min-height: 430px;

        .s-card-icon{
            width: 100px;
            height: 100px;
            margin: auto auto 10px auto;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            background: url(../images/icons-bg.png) no-repeat center;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;

            svg{
                display: block;
                margin: auto;
            }
        }

        h4{
            font: 20px/24px "SFProDisplay-Bold" !important;
            padding: 10px 0 10px 0;
            margin:0px;
        }
    }
}

.s-block {
    background: #fff;
    text-align: center;
    background-size: 200%;
    background-position: top right;
    background-repeat: no-repeat;
    text-align: center;
    padding: 50px 20px;
    margin: 0;
    position: relative;
    border: 1px solid #d4f0ff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
}

.various-models.call-to-action{
    p{
        border-left: 0px;
        padding: 0px 0px 0px 0px;
    }
}

.website-revamp-2{
    position: relative;

    .service-reasons-box{
        border: 1px solid #e8e8e8;
        counter-increment: section;
        background: #fff;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
        padding: 30px;
        margin-bottom: 30px;
        position: relative;
        transition: all 0.3s;
        min-height: 300px;

        &:before{
            content: "";
            right: 60px;
            top: 0;
            position: absolute;
            height: 24px;
            width: 1px;
            background: #e5e5e5;
        }

        span{
            position: absolute;
            color: #e5e5e5;
            right: 30px;
            top: 35px;
            font: 60px/35px SF Pro Display !important;
        }

        .service-reasons-icon{
            width: 45px;
            margin-bottom: 25px;
        }

        figure{
            margin:0;
        }

        h6{
            font: 20px/20px SFProDisplay-Bold !important;
            margin:10px 0px 10px 0px;
        }

    }
}


/*================================ Main Service Mobile App Development ===============================================*/

.mobile-app-development{
    background-color: #42387a;
    background: -webkit-linear-gradient(60deg, #42387a, #9d41e0);
    background: linear-gradient(60deg, #42387a, #9d41e0);
    position: relative;
    overflow: hidden;
    padding:60px 0px;

    .container{
        position: relative;
        z-index: 99;
    }

    svg.svg-intro-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
        z-index: 66;
    }

    svg.svg-intro-bottom-2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 65%;
        z-index: 55;
    }

    svg.svg-intro-bottom-3 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    .left-titles{
        color: #fff;
        h1{
            font: 45px/60px "SFProDisplay-Bold"!important;
            text-transform: uppercase;

            span{
                font: 45px/60px "SF Pro Display"!important;
                display: block;
            }
        }
    }

    .layers{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        .layer-1{
            position: absolute;
            right: 0;
            top: 10px;
            z-index: 99;
        }
    }
}

// .web-services{
//     background: #fff;
//     position: relative;
//     overflow: hidden;

//     &:before{
//         content: "";
//         background: url(../images/dot-shape.png) #d7f0fd;
//         position: absolute;
//         height: 400px;
//         right: 0;
//         left: 0;
//         top: 0;
//         width: 100%;
//         background-position: center top;
//         background-size: contain;
//         background-repeat: repeat;
//     }

//     .upset {
//         position: relative;
//         z-index: 5;
//     }

//     .link-hover{
//         -moz-transition: all 0.4s;
//         -o-transition: all 0.4s;
//         -webkit-transition: all 0.4s;
//         transition: all 0.4s;
//     }

//     .mt30 {
//         margin-top: 30px;
//     }

//     .wide-block {
//         padding: 40px 30px;
//         margin: 5px 0;
//         position: relative;
//         border: 0px solid #d4f0ff;
//         -webkit-border-radius: 8px;
//         border-radius: 8px;
//         -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
//         box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);

//         &:after{
//             content: '';
//             position: absolute;
//             right: 0;
//             top: 0;
//             height: 100%;
//             width: 100%;
//             background-size: 280px!important;
//             background-position: right center!important;
//             background-repeat: no-repeat!important;
//         }

//         .block-space- {
//             max-width: 50%;
//             position: relative;
//             z-index: 555;

//             h4{
//                 margin: 20px 0 30px 0;
//             }
//         }
//     }

//     .service-img1 {
//         background: #e9ddff;
//         &:after{
//             background: url(../images/service-img-1.png);
//         }
//     }
// }

// .main-services{
//     &:before{
//         background-color: #f9f9f9;
//     }
// }

/*============================== Technologies Main Page =======================================*/

.technologies-bg-2{
    background: url(../images/technologies-bg-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0px;
    width: 100%;
    position: relative;
    color: #fff;

    .left-titles{
            h1{
                font: 45px/60px "SFProDisplay-Bold" !important;
                text-transform: uppercase;
               letter-spacing:  1px;
            }

            span{
                font: 45px/60px "SF Pro Display" !important;
                display: block;
            }
    }
}

/*============================== Company Main Page =======================================*/

.company-bg{
   background: url(../images/about.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 80px 0px;
    width: 100%;
    position: relative;
    
    
    &:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0 , 0.8);
    }

    .left-titles{
        color: #fff;
        h1{
            font: 45px/60px "SFProDisplay-Bold" !important;
            text-transform: capitalize;
            letter-spacing:  1px;
        }

        h3{
            margin:0 0 10px 0;
            font: 20px/25px SFProDisplay-Bold!important;
        }
    } 
}

.technology-solutions.company-links{
    .iteam{
        cursor: pointer;

        li{
            margin:0;
            padding:0;
            a{
                color: #fff;
                display: block;
                padding: 0px 0px 0px 25px;
                font-size: 16px;
                line-height: 30px;
                position: relative;
                text-transform: capitalize;
            }    
        }

        &:hover{
            a{
                color: #000;
            }
        }
    }
}

/*===============================================RESPONSIVE=====================================================*/ 

@media only screen and (max-width: 1500px){

    .rummy-gaame-dev-bg{
        .layers{
            img{
                width: 200px;
            }

            .layer-1, .layer-2{
                top: -30px;
            }
        }
    }

    .rummy-gaame-dev-1{
        .layers{
           .layer-1{
                img{
                    width:350px; 
                }
           }

           .layer-2{
             img{
                width: 280px;
             }
           }
        }
    }
    
}


@media only screen and (max-width: 1400px){

    .android-app-dev{
        .right-side{
            padding: 0px 120px 0px 50px;
        }
    }

}

@media only screen and (max-width: 1366px){

    .rummy-gaame-dev-1{
        .layers{
          .layer-1{
                img{
                    width: 280px!important;
                }
            }

             .layer-2{
                img{
                    width: 250px!important;
                }
            }
        }
    }

}

@media only screen and (max-width: 1200px){
    .android-app-dev{
        .right-side{
            padding: 0px 50px 0px 50px;
        }
    }

    .android-section-1{
        .aad-serves{
            .media{
                margin-bottom: 15px;
                .icon{
                    width: 70px;
                    height: 70px;
                    line-height: 70px;
                    margin-right: 15px;

                    svg{
                        height: 40px;
                    }
                }
            }

            .media.service-item-1{
                left: -70px;
            }

            .media.service-item-2{
                left: -190px;
            }

            .media.service-item-4{
                left: -150px;
                top: 0px;
            }

            .media.service-item-5{
                left: -50px;
                top: 10px;
            }
        }
    }

    .android-section-3{
        .android-app-development-process{
            .aadp-left, .aadp-right{
                .aadp-content.one{
                    top: -10px;
                    left: 15px;
                }
                .aadp-content.two{
                    top: 60px;
                    right: 15px;
                }
                .aadp-content.three{
                    top: 15px;
                    left: 15px;
                }
                .aadp-content.four{
                    top: 90px;
                    right: 15px;
                }
                .aadp-content.five{
                    top: 60px;
                    left: 15px;
                }
            }
        }
    }

    .uiux-design{
        .container{
            max-width: 1160px;
        }
    }

    .ecommerce-development{
        .row{
            padding-top: 60px;
        }
    }

    .rummy-gaame-dev-3{
       .layers{

        .layer-1{
            top: 0px;

            img{
                width: 65%;
            }
        }
       } 
    }

    .android-section-1.cross-platform-1{

        .aad-serves{
            .media.service-item-1{
            top: -15px;
        }

         .media.service-item-3{
            top: 75px;
        }

         .media.service-item-5{
            top: 135px;
        } 
    }
        
    }  
}

@media only screen and (max-width: 1128px){
    .uiux-design{
        .uiux-items.three{
            top: 45px;
        }
        .uiux-items.four{
            top: 35px;
        }
        .uiux-items.five{
            top: 27px;
        }
    }
}

@media only screen and (max-width: 1100px){
    .uiux-design{
        .uiux-items.one{
            left: -10px;
        }

        .uiux-items.two{
            top: 40px;
            left: 10px;
        }

        .uiux-items.three{
            top: 46px;
            left: -10px;
        }

        .uiux-items.four{
            top: 35px;
            left: 10px;
        }

        .uiux-items.five{
            top: 27px;
            left: -10px;
        }
    }
}




@media only screen and (max-width: 1095px){
    .uiux-design{
         .uiux-items.one{
            top: 12px;
         }

         .uiux-items.two{
             top: 4px;
         }

         .uiux-items.three{
             top: -6px;
         }

         .uiux-items.four{
             top: -15px;
         }
       .uiux-items.five{
            top: -23px;
        } 
    }
}

@media only screen and (max-width: 1060px){
    .android-app-dev{
        .right-side{
            padding: 0px 0px 0px 0px;
        }
    }
}


@media only screen and (max-width: 1042px){
   .uiux-design{

    .uiux-items.one{
        top: 0px;
    }
    .uiux-items.two{
       top: -35px; 
    }

    .uiux-items.three{
        top: -55px; 
    }

    .uiux-items.four{
        top: -75px; 
    }

    .uiux-items.five{
         top: -110px; 
    }
   } 
}

@media only screen and (max-width: 1010px){

    .uiux-design{
    .uiux-items.five{
         top: -120px; 
    }
   } 

}

@media only screen and (max-width: 991px){

    .android-app-dev{
        .right-side{
            padding: 0px 15px 0px 15px;
        }
    }

    .android-section-1{
        .aad-serves{
            .left{
            display: none;
        }

        .col-md-5{
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
        .right{
            width: 100%;
            .service-item-1, .service-item-2, .service-item-3, .service-item-4, .service-item-5{
                    left: 0px;
                }
            }
        }   
    }

    .android-section-2{
        .media{
            .service_icon{
                width: 70px;
                height: 70px;
                line-height: 70px;
            }
        }
    }

    .android-section-3{
        display: none;
    }

    .android-section-4{
        padding:40px 0px!important;
    }

    .uiux-design{
        background: inherit;
        .container{
            max-width: 720px;
        }

        .uiux-items.one, .uiux-items.two, .uiux-items.three, .uiux-items.four, .uiux-items.five{
            position: inherit;
        }

        .uiux-items{
            margin-bottom: 30px;
        }
    }

    .ios-service{
        .content-column{
            .inner-column{
                color: #fff;
            }
        }
    }


    .ecommerce-development{
        .row{
            padding-top: 40px;
        }

        .content{
            h1{
                font: 22px/32px "SFProDisplay-Bold" !important;
            }

            p{
                font: 16px/20px 'SF Pro Display';
            }
        }
    }

    .ecommerce-section-2{

        .container{
            padding-top: 20px;
        }
        padding: 30px 0px 30px 0px !important;
        .ecommers-services{
            .ecom-tabs{
                .title{
                    display: none;
                }
            }

            a.active{
                &:after{
                    bottom: -95px;
                    right: calc(50% - 70px);
                }
            }
        }
    }

    .list-content{
        img{
            margin-top: 30px;
        }
    }

    .ecommerce-section-5{
        .mob-scrollbar{
            max-width: 800px;
            overflow-x: auto;
            overflow-y: hidden;

            ul{
                width: 1000px;
            }
        }
    }

    .hide-tab{
        display: none;
    }

    .rummy-gaame-dev-bg{
        .container{
            padding: 30px 15px;
        }
    }

    .tambola-game-bg{
        padding:100px 0px;
    }

    .logo-design-bg{
        padding: 100px 0px 151px;
    }

    .smo-section-2{
        .container{
            padding-top: 100px;
        }
    } 

    .smo-section-3{
        padding:50px 0px!important;
    }

    .seo-section-1{
        .abt-content{
            .abt-row{
                padding: 100px 50px;
            }
        }
    }

    .mobile-startup-bg{
        padding: 60px 0px;

        .left-titles{
            h1{
                font: 32px/42px "SFProDisplay-Bold" !important;
            }
        }
    }

    .android-section-1.cross-platform-1{

        .aad-serves{
            
            .right{
                .service-item-1, .service-item-3, .service-item-5{
                    left: 0;
                    top: 0;
                    margin-bottom: 25px;
                }
            }
        }
    }

    .website-startup-bg, .business-growth-bg{
        min-height: auto;

        .left-titles{
            h1{
                font: 22px/32px "SFProDisplay-Bold" !important;
            }
        }
    }

    .logo-design-section-2.website-startup-sec-2{
        background: linear-gradient(to right, #4985cb 0%, #4985cb 50%, #4985cb 50%, #4985cb 100%);
    }

}

@media only screen and (max-width: 768px){
    .android-app-dev{
        .right-side{
            h1{
                font: 22px/32px SFProDisplay-Bold !important;
            }
        }
    }

    .ecommerce-development{
        background-position: top -80px center;

        .layers{
            .layer-1{
                left: 3%;
                top: 10%;
            }
        }
    }

    .ecommerce-section-1{
        padding: 40px 0px 40px 0px !important;
    }

    .ecommerce-section-2{
        .ecommers-services{
            .ecom-tabs{
                .icon{
                    width: 40px;
                    height: 40px;
                    line-height: 35px;

                    svg{
                        height: 25px;
                    }
                }
            }

            a.active{
                &:after{
                    bottom: -75px;
                    right: calc(50% - 55px);
                }
            }
        }
    }

    .ecommerce-section-4{
        background: #2c3e50;

        .container{
            padding-top: 0px;
        }
    }

    .rummy-gaame-dev-bg{
        .left-titles{
            h1{
                font:22px/32px "SFProDisplay-Bold" !important;
            }
        }
    }

    .rummy-gaame-dev-2{
        .game-features{
            padding:100px 0px 30px 0px;
        }
    }

    .unit-bg, .tambola-game-bg, .logo-design-bg, .smo-bg, .seo-bg .content, .website-for-enterprise-bg,
    .webapp-bg, .ludo-game-bg, .dm-startups, .dm-business-growth, .website-revamp, .mob-prototyping, .digital-cartoon, .content-writing, .ios-service,
    .mobile-app-development, .technologies-bg-2, .company-bg{
        .left-titles, .inner-column{
            h1{
                font: 22px/32px "SFProDisplay-Bold" !important;

                span{
                   font: 22px/32px "SFProDisplay-Bold" !important; 
                }
            }
        }
    }

    .tambola-game-bg{
        padding:50px 0px;
    }

    .logo-design-bg{
        padding: 50px 0px 152px;
    }

    .smo-section-2{
        .container{
            padding-top: 45px;
        }
    }


    .mobile-startup-bg, .sem-bg{
        padding: 30px 0px;

        .left-titles{
            h1{
                font: 22px/32px "SFProDisplay-Bold" !important;
            }
        }
    }

    .ios-section-1{
        padding: 50px 0px!important;
    }

    .cross-platform{
        height: 50vh;

        .right-side{
            h1{
                font: 22px/32px "SFProDisplay-Bold" !important;
            }
        }
    }

    .cross-platform-2 {
        .layer-one{
            border-bottom: 530px solid #0f5cc3!important;
            border-right: 530px solid transparent!important;
        }
    }

    .business-growth-sec-2{
        padding:60px 0px!important;
    }

    .ecommerce-section-5{
        .list-content{
            padding: 40px 40px 40px 40px;
        }
    }

    .dm-business-growth-1, .sem-section-2{
        .media{
            .service_icon{
                margin-right: 0px;
                width: 75px;
                height: 75px;
                background-size: 75px;

                svg{
                    width: 40px;
                }
            }
        }
    }

    .seo-section-1{

        .abt-content{
            svg.svg-support-bottom{
                display: none;
            }

            .abt-row{
                padding:0px;
            }
        }
    }

    .content-writing-sec-3{
        bottom: inherit;
    }

    .android-app-dev, .cross-platform, .ecommerce-development{
        .col-md-6{
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    .cmoon-ui-ux{
        .col-md-7{
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    section.services .services__block{
        min-height: 400px;
    }

    .mobile-app-development{
        padding: 30px 0px 60px;

        .left-titles{
            h3{
                font: 18px/25px SF Pro Display!important;
            }
        }
    }

   .webapp-section-2{
        background:#234fe8;

        .container{
            padding: 40px 0px;
        }
   }

   .content-writing{
        .container{
            position: relative;
            z-index: 9999;
        }
   }

   .about.product-page-bg{
        .about__inner{
            .row{
                .col-7{
                    .product-main-titles{
                        padding: 15px;
                    }
                }
            }
        }
   }

   .mobile-startup-1{
        .item-box{
            min-height: inherit;
            margin-bottom: 30px;
        }
   }

   .various-models.call-to-action{
        .btn-lg{
            margin-bottom: 20px;
        }
   }


}

@media only screen and (max-width: 640px){

    .uiux-design{
        .media{
            img{
                width: 110px;
                display: block;
                text-align: center;
            }
        }
    }

    .ecommerce-development{
        background-position: top 0px center;
        padding:50px 0px 60px 0px!important;

        .row{
            padding-top: 0px;
        }

    }

    .webapp-section-1{
        padding: 40px 0px 40px 0px !important;
    }

}

@media only screen and (max-width: 604px){
    .inner-banner{
        .inner{
            h1{
                font: 25px/20px 'SF Pro Display'!important;
            }
        }
    }
}

@media only screen and (max-width: 569px){

    .uiux-design{
        .media{
            img{
                display: none;
            }
        }

        .uiux-items{
        .box{
            border-radius: 40px;
            padding: 25px 25px 25px 25px;
        }
    }
    }

    .various-models.call-to-action{
        .btn-lg{
            margin-bottom: 20px;
        }
    }

    .custom-software{
       &:before{
            display: none;
       }

       padding-top: 40px !important;
    }

    .foundation{
        .service_icon{
            display: none;
        }
    }

    

}

@media only screen and (max-width: 420px){
    .android-app-dev{
        .right-side{
            h1{
                font: 20px/20px SFProDisplay-Bold !important;
            }
        }
    }

    .dm-business-growth-1, .sem-section-2{
        .media{
            .service_icon{
                display: none;
            }
        }
    }


    .android-section-2, .technology-solutions, .business-growth-sec-2,
    .website-for-enterprise-2, .ecommerce-section-4, .webapp-section-2{
        .media{
            .service_icon{
                display: none;
            }
        }
    }

    .mobile-startup-1{
        .item-box{
            margin-bottom: 30px;
        }
    }

    .ecommerce-section-2{
        .list-content{
            padding: 30px;
        }
    }

}

@media only screen and (max-width: 360px){
    
    .portfolio{
        .services__filters{
            li.nav-item{
                .nav-link {
                    svg{
                        width: 20px
                    }
                }
            }
        }
    }

}