.innerpage_intro:before { content: ''; position: absolute; width: 100%; display: block; background: -webkit-linear-gradient(left, #7c003f , #fe1188); background: -o-linear-gradient(right, #7c003f, #fe1188); background: -moz-linear-gradient(right, #7c003f, #fe1188); background: linear-gradient(to right, #7c003f , #fe1188); opacity: .8; height: 100%;} .innerpage_intro:before,.page-id-300 .innerpage_intro:before,.page-id-372 .innerpage_intro:before,.page-id-372 .Webdesign_services:before,.page-id-334 .Webdesign_services:before,.page-id-300 .Webdesign_services:before,.page-id-357 .Webdesign_services:before{ background: -webkit-linear-gradient(left, rgba(1,34,176,0.8) 0%,rgba(1,35,176,0.8) 1%,rgba(1,171,211,0.8) 100%); background: linear-gradient(to right, rgba(1,34,176,0.8) 0%,rgba(1,35,176,0.8) 1%,rgba(1,171,211,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0122b0', endColorstr='#cc01abd3',GradientType=1 ); } .innerpage_intro { position: relative;clear: both;} .innerpage_intro>.container { z-index: 9; position: relative;} .inner_service_icon_section { position: absolute; top: 0; left: 0; width: 491px; float: left; height: 100%; background: url(../images/sphareimage.png) no-repeat scroll center center / 90% auto rgba(0, 0, 0, 0);} .inner_service_desc { float: left; padding-top: 85px; padding-left: 511px; text-align: left; width: 100%; height: 515px; padding-bottom: 85px;} .inner_ser_title h1 { color: #fff; font-weight: 700;} .inner_ser_desc p { color: #fff; font-weight: 300; line-height: 30px;} .inner_ser_button a.inner_all_button.getintouchbutton { display: inline-block; margin-right: 40px;} .inner_ser_button { margin-top: 30px;} .inner_ser_button a.call { color: #fff; font-size: 19px; font-weight: 900;} .inner_ser_button a.call:hover { color: #000;} .in_service_icon.wordpressicon { background: url(../images/wpicon.png) center center no-repeat;} .in_service_icon { position: absolute; width: 110px; height: 110px; right: 0; margin: 0 auto; bottom: 50%; left: 34.7%;} .innerpage_service .show_button { margin-top: 40px;} .inner_service_desc .formdata { display: none; position: absolute; bottom: 0;} .closeme { position: absolute; width: 40px; height: 40px; background: #000; color: #fff; font-size: 12px; border-radius: 100%; z-index: 2; text-align: center; line-height: 40px; top: 0; right: 0;} .formdata { position: relative;} .field.halffield { width: 50%;} .field.halffield input { background-color: transparent; border-bottom: 0px solid #f7f7f7; color: #fff; box-shadow: 0px 0px 1px 1px #fff;} .field.halffield { margin-bottom: 10px;} .field.fullfield textarea:focus,.field.fullfield input:focus{background-color: #fff;color:#ff0080;} .field.fullfield textarea { background-color: transparent; border-bottom: 0px solid #f7f7f7; color: #fff; box-shadow: 0px 0px 1px 1px #fff; height: 60px; padding: 5px;} .formdata input::-webkit-input-placeholder { color: #fff !important;font-weight: 300;} .formdata input::-moz-placeholder { color: #fff !important;font-weight: 300;} .formdata input:-ms-input-placeholder { color: #fff !important;font-weight: 300;} .formdata input:-moz-placeholder { color: #fff !important;font-weight: 300;} .field.fullfield textarea::-webkit-input-placeholder { color: #fff;font-weight: 300;} .field.fullfield textarea::-moz-placeholder { color: #fff;font-weight: 300;} .field.fullfield textarea:-ms-input-placeholder { color: #fff;font-weight: 300;} .field.fullfield textarea:-moz-placeholder { color: #fff;font-weight: 300;} .field.fullfield input[type=submit] { border: 1px solid #fff; color: #fff; background-color: transparent;} .field.fullfield input[type=submit]:hover { color: #ff0080; background-color: #fff;} .formdata input:focus::-webkit-input-placeholder { color: #000 !important;font-weight: 300;} .formdata input:focus::-moz-placeholder { color: #000 !important;font-weight: 300;} .formdata input:focus:-ms-input-placeholder { color: #000 !important;font-weight: 300;} .formdata input:focus:-moz-placeholder { color: #000 !important;font-weight: 300;} .field.fullfield textarea:focus::-webkit-input-placeholder { color: #000;font-weight: 300;} .field.fullfield textarea:focus::-moz-placeholder { color: #000;font-weight: 300;} .field.fullfield textarea:focus:-ms-input-placeholder { color: #000;font-weight: 300;} .field.fullfield textarea:focus:-moz-placeholder { color: #000;font-weight: 300;} .inner_service_desc .formdata .contact_form { margin-top: 0;} .inner_service_desc .formdata .contact_form p { margin-bottom: 20px; padding-left: 15px; color: #f3e9e9; font-weight: 300; font-size: 18px;} .innerpage_intro span.wpcf7-not-valid-tip { color: #000;} .innerpage_intro div.wpcf7-validation-errors { clear: both; margin: 0;} .innerpage_intro div.wpcf7-mail-sent-ok { clear: both; background: #fff; border: none; text-align: center; color: #ff0080; margin: 0; margin-bottom: 2px;} .innerpage_service_features { position: relative;} .features_top_left { width: 50%; float: left;} .page-id-300 .features_top_right{height: 500px;} .features_top_right { width: 50%; float: left; height: 400px; background-repeat: no-repeat; background-position: center; background-size: contain;} .featured_list_icon { width: 60px; float: left; height: 60px; background: #fff; border-radius: 100%; text-align: center; position: relative; top: 8px;} .featured_list_item { float: left; width: calc(100% - 60px); padding-left: 10px;} .featured_list_icon i { font-size: 30px; line-height: 60px; /* text-align: center; */ color: #0ea6d5;} .featured_list_icon i#myid1:before{content: "\f0f6";} .featured_list_icon i#myid2:before{content: "\f06e";} .featured_list_icon i#myid3:before{content: "\f0ad";} .featured_list_icon i#myid4:before{content: "\f013";} .featured_list_icon i:before {content: "\f0f6";font-family:fontawesome;font-style:normal} .page-id-300 .featured_list_icon i{color: #202020;} .page-id-372 .featured_list_icon i{color: #95be46;} .page-id-357 .featured_list_icon i{color: #ec4918;} .service_inner_wrap { float: left; margin-bottom: 25px; /* width: 80%; */} .featured_service_icon {display: none;} .top_features { float: left;padding-top: 0px;} .middle_features_image { float: left; width: 100%; text-align: center; margin: 50px auto;} .bottom_features { width: 100%;} .featured_service_icon { width: 120px; height: 120px; background: white; border-radius: 100%; margin: auto; position: absolute; top: -85px; left: 0; right: 0; margin: auto;} .featured_service_icon img { width: 80px; position: relative; top: 20px; margin: auto;} .featured_list_item h4 { color: #fff; margin-bottom: 3px; font-size: 20px; font-weight: 400; text-transform: uppercase;} .featured_list_item p { padding-top: 0; color: #fff; font-weight: 300; max-width: 90%; font-size: 14px;} /************************************************/ .type2pagebanner:before { left: -10%; max-width: 65%; content: ""; display: block; height: 100%; position: absolute; -ms-transform: skewX(-15deg) skewY(0); transform: skewX(-20deg) skewY(0); width: 100%; z-index: 1; background: linear-gradient(to right, #0126b1 , #5cc8e2);} .type2headerbanner .container { position: relative;} .inner_abs_baner_content { width: 47%; position: relative; z-index: 2;} .abs_icon { width: 100px; height: 100px; background-color: #fff; border-radius: 100%; text-align: center; margin-bottom: 20px;} .abs_icon img { margin: auto; position: relative; top: 26px; width: 50px; height: 50px;} .inner_abs_baner_content h1 { color: #fff; margin-bottom: 20px; font-size: 50px;} .inner_abs_baner_content p { padding-top: 0; color: #fff; font-weight: 300; margin-bottom: 25px; font-size: 20px; line-height: 30px;} .inner_abs_baner_content .getintouchbutton { margin-left: 0; font-size: 20px; margin-bottom: 30px;} .inner_abs_baner_content a.getintouchbutton:hover{color:#000;} .type2pagebanner { position: relative; -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; min-height: 60rem; width: 100%; overflow: hidden;} .absolute_image { background: #fff no-repeat top; background-size: cover; height: 100%; position: absolute; right: 0; top: 0; width: 55%; transition: all .5s cubic-bezier(.7,.01,.3,1); -ms-transform: translateY(0rem); transform: translateY(0rem);} .type2headerbanner { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; /* justify-content: center; */ margin: 0 auto; /* max-width: 190rem; */ clear: both;} .type2headerbanner { position: relative; overflow: hidden;} .innerformwraper { /* height: 100%; */ position: relative; top: 50%; transform: translateY(-50%); /* float: none; */ max-width: 80%; width: 100%; margin: auto; display: inline-block; text-align: center;} .type2headerbanner div.wpcf7-validation-errors { clear: both; color: #f00;} .type2headerbanner .contactform.showform p { color: #fff; text-align: center; font-size: 18px; line-height: 30px; margin-bottom: 30px;} .type2headerbanner .contactform { transform: translateY(100%); /* display: none; */ top: 0; position: absolute; opacity: 0; transition: 0.5s;} .type2headerbanner .contactform.showform { transform: translateY(0%); /* display: block; */ opacity: 1;} .contactform.showform .closeme{background: red;color: #fff;width: 50px;height: 50px;line-height: 50px;} .contactform.showform { position: absolute; top: 0; height: 100%; background-color: #202020; z-index: 2; /* transform: translateY(0); */ text-align: center;} .type2headerbanner .contactform input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff;} .type2headerbanner .contactform input::-moz-placeholder { /* Firefox 19+ */ color: #fff;} .type2headerbanner .contactform input:-ms-input-placeholder { /* IE 10+ */ color: #fff;} .type2headerbanner .contactform input:-moz-placeholder { /* Firefox 18- */ color: #fff;} .type2headerbanner div.wpcf7-mail-sent-ok { clear: both; color: green; border: navajowhite;} /**************cta*************/ .cta { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; align-items: center; justify-content: center;} .ctawrapper p { display: inline-block; padding-top: 0; font-size: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; float: left; line-height: 50px;} .cta a.getintouchbutton { display: inline-block; background: -moz-linear-gradient(left, rgb(1,34,176) 0%, rgb(1,35,176) 1%, rgb(1,171,211) 100%); background: -webkit-linear-gradient(left, rgb(1,34,176) 0%,rgb(1,35,176) 1%,rgb(1,171,211) 100%); background: linear-gradient(to right, rgb(1,34,176) 0%,rgb(1,35,176) 1%,rgb(1,171,211) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0122b0', endColorstr='#cc01abd3',GradientType=1 ); float: right;} .ctawrapper { padding: 30px 0; text-align: center; float: left; width: 100%;} /**************************slider section*******************/ .sliderimage { height: 350px; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 100%;} .fullsizerow .featured_service_icon { position: relative;} .fullsizerow .owl-pagination{display: none;} .fullsizerow .owl-theme .owl-controls .owl-buttons div.owl-prev:before { content: "\f104"; font-family: Fontawesome; font-size: 25px; color: #0533a3; opacity: 1; background: #fff; width: 30px; height: 30px; display: block; line-height: 29px;} .fullsizerow .owl-theme .owl-controls .owl-buttons div:hover{ opacity: 1;} .fullsizerow .owl-theme .owl-controls .owl-buttons div { padding: 0; margin: 0; background: transparent; opacity: 0.5; position: absolute; top: 50%; transform: translateY(-50%);} .fullsizerow .owl-theme .owl-controls .owl-buttons div.owl-next:before { content: "\f105"; font-family: Fontawesome; font-size: 25px; color: #0533a3; opacity: 1; background: #fff; width: 30px; height: 30px; display: block; line-height: 29px;} .fullsizerow .owl-theme .owl-controls .owl-buttons div.owl-next { /* top: 50%; */ right: 0;} .fullsizerow .owl-theme .owl-controls .owl-buttons div.owl-prev { left: 0;} .fullsizerow .featured_list_icon { top: 0; float: right;} .fullsizerow .featured_list_item { width: 100%; padding-left: 0;} .fullsizerow .service_inner_wrap { text-align: right; float: right;} .fullsizerow .featured_list_item p { max-width: 100%;} .fullsizerow .icons_right_way { float: left;} .fullsizerow .icons_right_way .service_inner_wrap { float: left; text-align: left;} .fullsizerow .icons_right_way .featured_list_icon { float: left;} /*promo_area css =================================================================*/ .promo_area {padding: 150px 0px 150px; position: relative; background: fixed; background-repeat: repeat; background-size: contain;} .promo_area .round-planet.planet2 { width: 550px; height: 550px;} .promo_area .round-planet { width: 662px; height: 662px; border: 2px solid rgba(229, 227, 253, 0.502); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; background-image: -moz-linear-gradient(0deg, rgba(134, 117, 255, 0.02) 0%, rgba(255, 255, 255, 0.502) 100%); background-image: -webkit-linear-gradient(0deg, rgba(134, 117, 255, 0.02) 0%, rgba(255, 255, 255, 0.502) 100%); background-image: -ms-linear-gradient(0deg, rgba(134, 117, 255, 0.02) 0%, rgba(255, 255, 255, 0.502) 100%);} .promo_area .round-planet.planet { top: 51%;} .promo_area .round-planet.planet2 {} .promo_area .round-planet.planet3 { width: 442px; height: 442px;} .promo_area .round-p {width: 650px; height: 650px;lanet} .star.star1 { margin-top: -15px; margin-left: -15px; width: 30px; height: 30px; background: #006cbe; animation: spinnerRotate 20s linear infinite;} .promo_area .round-planet .star { border-radius: 50%; top: 50%; left: 50%; position: absolute;} .promo_area .round-planet .star.star1 { margin-top: -15px; margin-left: -15px; width: 30px; height: 30px; background: #006cbe; animation: spinnerRotate 20s linear infinite;} .promo_area .round-planet .star.star2 { animation: spinnerRotateone 20s linear infinite; width: 18px; height: 18px; background: #8675ff; margin-top: -9px; margin-left: -9px;} .promo_area .round-planet .star.star3 { width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; animation: spinnerRotatetwo 20s linear infinite; background: #d90f5b;} .promo_area .round-planet .star.star4 { width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; animation: spinnerRotatethree 20s linear infinite; background: #ffb633;} .promo_area .round-planet .star.star5 { animation: spinnerRotatefour 25s linear infinite;} .promo_area .round-planet .star.star6 { animation: spinnerRotatefive 25s linear infinite;} .promo_area .round-planet .star.star7 { animation: spinnerRotatesix 25s linear infinite;} .promo_area .round-planet .star.star8 { animation: spinnerRotateseven 25s linear infinite;} .promo_area:before {content=""; background: -webkit-linear-gradient(left, rgba(1,34,176,0.8) 0%,rgba(1,35,176,0.8) 1%,rgba(1,171,211,0.8) 100%); background: linear-gradient(to right, rgba(1,34,176,0.8) 0%,rgba(1,35,176,0.8) 1%,rgba(1,171,211,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0122b0', endColorstr='#cc01abd3',GradientType=1 );} .promo_area:before { background: -webkit-linear-gradient(left, rgba(1,34,176,0.8) 0%,rgba(1,35,176,0.8) 1%,rgba(1,171,211,0.8) 100%); background: linear-gradient(to right, rgba(1,34,176,0.8) 0%,rgba(1,35,176,0.8) 1%,rgba(1,171,211,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0122b0', endColorstr='#cc01abd3',GradientType=1 ); content: ""; height: 100%; width: 100%; left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1;} .promo-content { position: relative; z-index: 2;} .promo-content h2 { color: #fff; font-size: 60px; line-height: 90px;} .promo-content h5 { color: #fff; font-size: 30px; line-height: 45px; margin-bottom: 15px;} .promo-content ul { list-style: none; margin-bottom: 20px;} .promo-content ul li { color: #fff; font-size: 18px; line-height: 30px; font-weight: 300;} .promo-content p { color: #fff; padding-top: 0; font-size: 18px; line-height: 30px; margin-bottom: 15px;} .promo-content a.getintouchbutton { float: left;} .righthalfimg{ height: 400px; background-repeat: no-repeat; background-size: contain; background-position: bottom;} /*spinner keyframe =======================================================*/ @keyframes spinnerRotate { 0% { transform: rotate(0deg) translateX(320px); } 100% { transform: rotate(360deg) translateX(320px); } } @keyframes spinnerRotateone { 0% { transform: rotate(0deg) translateY(320px); } 100% { transform: rotate(360deg) translateY(320px); } } @keyframes spinnerRotatetwo { 0% { transform: rotate(0deg) translateY(-320px); } 100% { transform: rotate(360deg) translateY(-320px); } } @keyframes spinnerRotatethree { 0% { transform: rotate(0deg) translateX(-320px); } 100% { transform: rotate(360deg) translateX(-320px); } } @keyframes spinnerRotatefour { 0% { transform: rotate(0deg) translateX(375px); } 100% { transform: rotate(360deg) translateX(375px); } } @keyframes spinnerRotatefive { 0% { transform: rotate(0deg) translateY(375px); } 100% { transform: rotate(360deg) translateY(375px); } } @keyframes spinnerRotatesix { 0% { transform: rotate(0deg) translateY(-375px); } 100% { transform: rotate(360deg) translateY(-375px); } } @keyframes spinnerRotateseven { 0% { transform: rotate(0deg) translateX(-375px); } 100% { transform: rotate(360deg) translateX(-375px); } } /*spinner keyframe =======================================================*/ @media(max-width: 767px){ .inner_service_icon_section { width: 100%;} .inner_service_desc { padding-left: 0; text-align: center; padding-top: 100px; position: relative; z-index: 8; padding-right: 0;} .in_service_icon { position: relative; bottom: 0; left: 0; width: 80px; height: 80px; top: 10px; background-size: cover;} .inner_ser_button a.call { width: 100%; font-size: 16px; line-height: 25px;} .inner_ser_button a.inner_all_button.getintouchbutton { width: 100%; display: block; float: none; margin: auto;} .inner_service_desc .formdata { left: 0; right: 0;} .inner_ser_title h1 { font-size: 20px; line-height: 30px;} .inner_ser_desc p { font-size: 16px; line-height: 25px;} .inner_ser_button { margin-top: 15px;} .inner_ser_button a.call {} .featured_service_icon { width: 80px; height: 80px; top: -45px;} .featured_service_icon img { width: 40px; height: 40px;} .features_top_left { width: 100%;} .features_top_right { height: 250px; width: 100%;} .closeme { top: -21px;} .type2pagebanner:before { max-width: 100%; transform: skewX(0deg) skewY(0); -ms-transform: skewX(0deg) skewY(0); left: 0;} .absolute_image { width: 100%;} .inner_abs_baner_content { width: 100%; padding-left: 15px; padding-right: 15px;} .ctawrapper p { display: block; text-align: center; width: 100%;} .cta a.getintouchbutton { float: none; text-align: center;} .promo_area { padding: 50px 0px 50px;} .righthalfimg { height: 250px;} .promo-content h2 { font-size: 23px; line-height: 35px;} .promo-content h5 { font-size: 18px; line-height: 28px;} .promo-content p { font-size: 16px; line-height: 25px;} .promo-content ul li { font-size: 14px; line-height: 20px;} .fullsizerow .service_inner_wrap { float: left; text-align: center;} .fullsizerow .featured_list_icon { float: none; margin: auto; position: relative;} .fullsizerow .icons_right_way .featured_list_icon { float: none;} .fullsizerow .featured_list_item { text-align: center;} .sliderimage { border-radius: 0;} .inner_abs_baner_content h1 { font-size: 25px; line-height: 35px; margin-bottom: 10px;} .inner_abs_baner_content p { font-size: 16px; line-height: 25px; margin-bottom: 10px;} .ctawrapper p { font-size: 16px; line-height: 25px;} }