body { color: #292b2d; background: #fff; font-family: roboto, 'Maven Pro', sans-serif; padding: 0px !important; margin: 0px !important; font-size:18px; text-rendering: optimizeLegibility; }
a, a:hover, a:focus {outline:none;}
.bannerbox { float: left; width: 100%; background: url(../images/banner.svg) no-repeat right top; }
.navbar-brand { height: auto; padding:5px 5px 6px 5px; }
.navbar { background:#0898e7; padding: 8px 0px!important;}
.menu { margin-top: 15px; }
.menu li { margin: 0px 15px; }
.menu li a { color:#fff; font-size: 16px; padding: 15px 10px; outline:none; }
.menu li:hover { border-bottom:0px solid #fff; background: none; }
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { border-bottom: 0px;}
.logo { font-size:24px; color:#38424d; font-weight:400; }
.logo span {color:#0898e7; font-weight:600; }
.nav > li > a:focus, .nav > li > a:hover { border-bottom: 2px solid #fff; background: none; }
.menu li:hover a { background: none; }
.smalltitle { float: left; width: 100%; text-transform: uppercase; font-weight: 600; color: #0898e7; font-size: 14px; margin-bottom: 30px; background: url(../images/w_line.jpg) no-repeat left center; padding-left: 35px; }
.bannertext { float: left; width: 100%; padding-top:20%; padding-bottom:50px; }
.bannermaintext { float: left; font-size:45px; color: #38424d; width: 100%; line-height: 54px; font-weight: 500; }
.bannernormaltext { float: left; font-size:18px; color: #38424d; width: 100%; margin:0px 0px 10px; }
.btnbox { margin: 15px 0px;}
.bluebtn {float: left; width: 100%; background: #6e45e2; padding: 12px 0px; border-radius: 30px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; }
.whitebtn { float: left; width: 100%; background: #fff; padding: 12px 0px; border-radius: 30px; text-align: center; color: #c2c9db; font-size: 12px; font-weight: 700; }
.bluebtn:hover { color: #fff; text-decoration: none; }
.whitebtn:hover { color: #6e45e2; text-decoration: none; }
.box1 { float: left; width: 100%; padding:2% 0px; }
.box1text { font-size: 24px; color: #4f4f6f; width: 100%; float: left; }
.box2 { float: left; width: 100%; background: #f1f4f7; padding:3% 0px 0px; }
.box2smalltitle { float: left; width: 100%; text-transform: uppercase; font-weight: 600; color: #9fa4af; font-size: 14px; margin-bottom:0px; background: url(../images/line.png) no-repeat left center; padding-left: 35px; }
.box2text { float: left; width: 100%; padding-bottom: 0px; }
.box2maintext { float: left; font-size:40px; color: #38424d; width: 100%; line-height:50px; font-weight: 500; }
.box2ultext { float: left; width: 100%; padding-top:10px; }
.box2ultext ul { float: left; width: 100%; list-style: none; padding: 0px; margin: 0px; }
.box2ultext ul li { color: #000; font-size: 16px; background: url(../images/ul_tick.png) no-repeat left 5px; padding: 0px 0px 20px 25px; }
.box2whitebtns { float: left; width: 100%; background: #fff; padding: 12px 0px; border-radius: 30px; text-align: center; color: #c2c9db; font-size: 12px; font-weight: 700; box-shadow: 0px 0px 15px #d7dbe8 }
.box3 { float: left; width: 100%; }
.box3text { float: left; width: 100%; padding-top:18%; }
.box3smalltitle { float: left; width: 100%; text-transform: uppercase; font-weight: 600; color: #fff; font-size: 14px; margin-bottom: 30px; background: url(../images/w_line.jpg) no-repeat left center; padding-left: 35px; }
.box3normaltext { float: left; font-size: 16px; color: #000; width: 100%; margin: 10px 0px; }
.box4normaltext { float: left; width: 100%; color: #000; font-size: 16px; margin: 10px 0px; margin-top: 20px }
.box4text { float: left; width: 100%; padding-bottom:40px; }
.formbox { float: left; width: 100%; padding: 10% 0px 70px; }
.fromBox .form-group { margin-bottom: 25px; }
.fromBox .form-control { font-size: 14px; padding: 12px 15px; height: auto; }
.frombtn { float: left; width: 100%; padding: 10px 0px; }
.sendBtn { font-size: 12px; font-weight: 700; color: #fff; padding: 15px 60px; border: 0px; text-transform: uppercase; background: #6e45e2; border-radius: 30px; text-align: center; margin-bottom: 30px; }
.footer { background: #f1f4f7; float: left; width: 100%; padding: 30px 0px; margin-top:0px }
.footerlink { text-align: center; display: inline-block; width: 100%; padding: 15px 0px 20px; }
.footerlink a { text-align: center; margin-right: 15px; border-radius: 50%; display: inline-block; color: #fff; font-size: 18px; padding-top: 5px; }
.footertext { display: inline-block; text-align: center; color: #6a6a77; width: 100%; }
.inputbox { padding-left: 45px!important; color: #000; }
.name { background: url(../images/name.png) no-repeat 10px 8px; }
.mail { background: url(../images/mail.png) no-repeat 10px 8px; }
.phone { background: url(../images/phone.png) no-repeat 10px 8px; }
.services { background: url(../images/services.png) no-repeat 10px 8px; }
.message { background: url(../images/message.png) no-repeat 10px 8px; }
.bluelaptop { float:left; width:90%; padding:0% 5% 0px;}
.affix { background:#0898e7; box-shadow: 0px 0px 6px rgba(0,0,0,0.5); }
.bannerdownarrow { position: absolute; bottom: 30px; left: 0px; right: 0px; text-align: center; }
/*update for price page*/
.Pricebox { float: left; width: 100%; background: url(../images/Price_banner.jpg) no-repeat left top; background-size: cover; }
.Pricebanner { float: left; width: 100%; padding-top: 45%; padding-bottom: 45%; }
.smalltitlePrice { float: left; width: 100%; text-transform: uppercase; font-weight: 600; color: #fff; font-size: 14px; margin-bottom: 30px; padding-left: 0px; }
.pricebox2 { float: left; width: 100%; background: #f1f4f7; border-top: 2px solid #dbe1e9; padding: 100px 0px 100px; }
.smallBluePrice { float: left; width: 100%; text-transform: uppercase; font-weight: 600; color: #9fa4af; font-size: 14px; margin-bottom: 30px; padding-left: 0px; }
.pricenormaltext { float: left; font-size: 16px; color: #9fa4af; width: 100%; margin: 10px 0px; margin-top: 20px; }
.PriceBox { float: left; width: 100%; border: 5px solid #fff; box-shadow: 0 0 0px 1px #d7dbe8; padding: 40px 30px 60px; background: #fff; border-radius: 50px; }
.spacer { float: left; width: 100%; padding:30px 0px; }
.spacer_h { float: left; width: 100%; padding: 20px 0px; }
.Pricetextbox { float: left; width: 100%; padding: 0px 0px 10px; font-size: 18px; color: #4f4f6f; }
.Pricelisttext { float: left; width: 100%; font-weight: 500; }
.Pricelisttext h2 { padding: 0px; font-size: 14px; color: #9fa4af; text-transform: uppercase; font-weight: 700; }
.Pricetextbox span { font-size: 55px; font-weight: 500; }
.Pricetextbox span sup { font-size: 18px; position: relative; top: -30px; }
.Pricelistnormal { float: left; width: 100%; font-size: 16px; color: #9fa4af; line-height: 28px; }
.btnshadow { box-shadow: 0px 0px 22px 0px #d7dbe8 }
.PriceBox:hover { border: 5px solid #766edc; }
.PriceBox:hover .whitebtn { background: #766edc; color: #fff; }
.Blueultext { float: left; width: 100%; padding: 50px 0px 20px 40px; }
.Blueultext ul { float: left; width: 100%; list-style: none; padding: 0px; margin: 0px; }
.Blueultext ul li { color: #9fa4af; font-size: 16px; background: url(../images/ul_tick_blue.png) no-repeat left 5px; padding: 0px 0px 10px 25px; }
.readMore { float: left; width: 100%; padding: 20px 0px; }
.readMore a { color: #9fa4af; font-size: 14px; }
.Pricebox3 { float: left; width: 100%; background: url(../images/blue_bg.jpg) no-repeat left top; background-size: 100%; }
.Pricebox3_box { float: left; width: 100%; padding-top: 20%; padding-bottom: 20%; }
.nav > li.active { border-bottom: 2px solid #fff; }
#box2 { position: absolute; top: -100px; }
#box3 { position: absolute; top: -0px; }
#box4 { position: absolute; top: -110px; }
#box5 { position: absolute; top: -0px; }
.faqbox { float: left; width: 100%; }
.circleOut { width:100px; height:100px; border:1px solid #dcdedf; padding:5px; border-radius:50%; position:relative; margin-bottom:15px; background:#fff; }
.circleInner { width:100%; height:100%;  border-radius:50%; background:#0898e7; }
.circleInner span { font-size:45px; text-align:center; width:100%; line-height:75px; color:#fff; float:left;}
.workBorder { position:absolute; border-bottom:1px solid #e0e2e3; height:0px; float:left; width:66%; top:102px; left:15%;}
.WorkBox { float:left; width:100%; position:relative; padding:50px 0px 10px;}
.workBoxtext { width:100%; float:left; text-align:center;}
.workBoxtext h2 { width:100%; float:left; font-size:18px; color:#000; margin:0px; margin-bottom:10px; font-weight:600; }
.workBoxtext p { width:80%; margin-left:10%; float:left; font-size:16px; color:#000; line-height: 24px; }
.workBoxtext a { width:100%; float:left; font-size:12px; color:#6d787b; margin:0px; font-style:italic; }
.workBorder { position:absolute; border-bottom:1px solid #e0e2e3; height:0px; float:left; width:66%; top:102px; left:15%;}
.white { color:#fff!important;}
.countli ul li { float:left; display: inline-block;width:30%; margin-right:25px; color: #000;}
.ProductText a { text-align:center; padding-top:10px; display: flex; }
.ProductText a span {font-size:18px;}

/*update for new work*/
.header-hero .shape { position: absolute}
.header-hero .shape.shape-1 {width: 75px;height: 75px;background: -webkit-linear-gradient(rgba(254, 132, 100, 0.5) 0%, rgba(254, 110, 154, 0.5) 100%);  background: -o-linear-gradient(rgba(254, 132, 100, 0.5) 0%, rgba(254, 110, 154, 0.5) 100%);background: linear-gradient(rgba(254, 132, 100, 0.5) 0%, rgba(254, 110, 154, 0.5) 100%); border-radius: 50%; left: 130px; top: 25%; -webkit-animation: animation1 2s linear infinite; -moz-animation: animation1 2s linear infinite; -o-animation: animation1 2s linear infinite; animation: animation1 2s linear infinite; opacity:0.2; }
.header-hero .shape.shape-2 { width: 39px;height: 39px; background: -webkit-linear-gradient(rgba(51, 200, 193, 0.5) 0%, rgba(17, 155, 210, 0.5) 100%);
  background: -o-linear-gradient(rgba(51, 200, 193, 0.5) 0%, rgba(17, 155, 210, 0.5) 100%); background: linear-gradient(rgba(51, 200, 193, 0.5) 0%, rgba(17, 155, 210, 0.5) 100%); left: 150px; bottom: 40px; border-radius: 50%; -webkit-animation: animation1 2s linear infinite;
  -moz-animation: animation1 2s linear infinite; -o-animation: animation1 2s linear infinite; animation: animation1 2s linear infinite; opacity:0.2;}
.header-hero .shape.shape-3 { width: 19px; height: 19px; background: -webkit-linear-gradient(rgba(54, 28, 193, 0.5) 0%, rgba(46, 130, 239, 0.5) 100%);  background: -o-linear-gradient(rgba(54, 28, 193, 0.5) 0%, rgba(46, 130, 239, 0.5) 100%); background: linear-gradient(rgba(54, 28, 193, 0.5) 0%, rgba(46, 130, 239, 0.5) 100%);bottom: 25%; left: 26%; border-radius: 50%; -webkit-animation: animation1 2s linear infinite; -moz-animation: animation1 2s linear infinite; -o-animation: animation1 2s linear infinite; animation: animation1 2s linear infinite; opacity:0.2;}
.header-hero .shape.shape-4 { background-color: rgba(226, 158, 25, .55); width: 39px; height: 39px; border-radius: 50%; top: 175px; left: 40%;
  -webkit-animation: animation1 2s linear infinite; -moz-animation: animation1 2s linear infinite; -o-animation: animation1 2s linear infinite;
  animation: animation1 2s linear infinite; opacity:0.2;}
.header-hero .shape.shape-5 { width: 19px; height: 19px; background-color: rgba(108, 99, 255, .55); left: 50%;  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 20%;  border-radius: 50%; -webkit-animation: animation1 2s linear infinite; -moz-animation: animation1 2s linear infinite; -o-animation: animation1 2s linear infinite; animation: animation1 2s linear infinite; opacity:0.2;}
.header-hero .shape.shape-6 { width: 14px; height: 14px; background-color: rgba(235, 163, 26, .55); border-radius: 50%; left: 45%; bottom: 70px;  -webkit-animation: animation1 2s linear infinite; -moz-animation: animation1 2s linear infinite; -o-animation: animation1 2s linear infinite;  animation: animation1 2s linear infinite; opacity:0.2;}
.header-shape-1 { position: absolute; top: 0; width: 50%; height: 100%; right: 0; z-index: -1; background-image: url(../images/header-shape-1.svg);
  background-position: left center; background-repeat: no-repeat; background-size: cover}
.banner_img {width:100%; margin: auto;}
.header-image .image-shape {position: absolute; bottom: -150px; left: -35px; z-index: -1}
.swiper-container { position: relative}
.screenshot-frame { position: absolute;top: 12px;left: 50%;-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%);-o-transform: translateX(-50%); transform: translateX(-50%); width: 342px; height: 100%; z-index: 5}
.screenshot-frame img { border-radius: 10px}
.swiper-slide { width: 310px; height: auto; -webkit-box-shadow: 4px 5px 18px 0 rgba(110, 112, 113, .32); -moz-box-shadow: 4px 5px 18px 0 rgba(110, 112, 113, .32); box-shadow: 4px 5px 18px 0 rgba(110, 112, 113, .32); margin-top: 45px; margin-bottom: 30px; border-radius: 20px; overflow: hidden;}
.swiper-slide img { width: 100%;}
.swiper-slide-active.swiper-slide { border-radius: 10px; overflow: hidden}
.swiper-pagination { bottom: 0 !important; padding-top: 42px; position: relative; z-index: 99}
.swiper-pagination .swiper-pagination-bullet { width: 16px; height: 16px; border: 2px solid #0898e7;  background: 0 0; opacity: 1}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #0898e7}
.phoneTab .workBoxtext { margin-top:50px;}
.redbg { background: url(../images/red_bg.png) no-repeat center center; background-size:cover;  padding: 40px 0px;}
.loader { position:fixed; top:45%;  left:48%; text-align: center; z-index: 9999; }
.BannerIner { width:100%; background:#0485cb; padding: 40px 0px;margin-top:94px;  }
.InnerBannertext { font-size: 44px; color: #fff; float: left; width: 100%; font-weight:400;}
.ProductTab {float: left; border:2px solid #bdbdbd; border-radius: 20px; width: 100%; margin-top:40px; padding:0px 0px; overflow: hidden;}
.Product_tads { text-align: center; }
.Product_tads span { width: 100%; float: left; font-size:16px; color: #000;}
.ProductItembox { width: 100%; float:left; margin-top: 30px;}
.ProductTab li { display:inline-block; width: 33.33%; float: left;}
.ProductTab > li.active {border:0px;}
.ProductTab > li a { float:left; width: 100%; border-left:0px!important; border-bottom:0px!important;border-top:0px!important; border-right: 2px solid #bdbdbd!important; padding: 10px 0px; border-radius:0px!important; }
.ProductTab > li:last-child a { border-right:0px!important;}
.ProductTab > li.active a { background:#e1f4ff!important; outline: none;}
.Productbox { border:1px solid #bdbdbd; float: left; width: 100%; border-radius:10px; position: relative; margin-bottom:50px; min-height:455px;}
.ProductLogo { float:left; width: 100%; text-align: center; margin-top: -30px; margin-bottom:20px;}
.ProductText { font-size: 24px; font-weight:500; text-align: center; color: #000; float: left; width: 100%; padding: 5px 20px;}
.ProductText span { font-weight: 300; font-size: 16px; width: 100%; float: left;}
.Productdownload {float:left; width: 100%; text-align: center; padding:20px 0px;}
.Productdownload a {width: 100%; float: left;}
.Productdownload a span { font-size: 12px; color: #000; padding-top: 5px; width: 100%; float: left; }
.navbar-header { max-width: 340px; position: relative; z-index: 99;}
.navbar-header span.tag { color:#fff; font-size:15px; display: inline-block; margin-top:-10px;float: left; margin-left:-5px; text-transform: uppercase; letter-spacing:2.5px;}
.career_box_1 {border-top:10px solid #0898e7; border-radius:5px 5px 0px 0px; padding:6px 15px 15px; background:#fff; box-shadow:0px 0px 6px #ccc; min-height: 340px;   }
.job_opening_box .outer {border-width: 1px; border-color: rgb(231, 231, 231); border-style: dashed; border-radius: 10px;background-color: rgb(255, 255, 255); box-shadow: 0px 0px 20px 0px rgba(57, 73, 99, 0.5);margin-bottom: 35px; padding: 16px 35px;display: flex; align-items: center;}
.job_opening_box .outer h5 { color: #38424d;font-size: 20px; margin-bottom: 10px;}
.job_opening_box .outer p { margin: 0; color: #38424d;font-size: 18px;}
.job_opening_box .outer a.btn { margin-left: auto; display: flex;align-items: center;border-radius: 10px; background-color: #f28243;color: #fff;font-size:18px;font-weight:500; padding: 12px 20px}
.menu li { position:unset;}
.navbar-nav li:hover > .dropdown-menu {display: block;}
.dropdown-submenu { position:relative;}
.dropdown-submenu>.dropdown-menu {top: 0;left: 100%;margin-top:-6px;}
.dropdown-menu > li > a:hover:after {text-decoration: underline;transform: rotate(-90deg);} 
.dropdown-menu {left:30%!important; padding: 20px; top:76%; border: none; border-radius:15px!important; }
.dropdown-menu ul { padding:10px 0px; margin: 0px; list-style: none;}
.dropdown-menu li { color:#000!important; margin-left:5px; border-bottom: 1px solid #D4D4D4; padding: 0px!important; float: left; width: 100%;}
.dropdown-menu li:last-child {border-color:transparent;}
.dropdown-menu li:hover {border-bottom: 1px solid #D4D4D4; background: #E9E9E9; }
.dropdown-menu li a { color:#646464;font-weight:500; padding:5px 2px 9px 6px!important; float: left;}
.dropdown-menu li a:hover { text-decoration:none; color: #000;}
.dropdown-menu li a span { width:26px; float: left; margin-right: 10px;}
.submenu_title_head { border-bottom: 2px solid #ccc; font-size: 24px;}
.noeffect { font-size:inherit!important; padding:0px 0px 8px 0px!important; margin: 0px!important; color: inherit!important; font-weight: inherit!important;}

.ramal_banner { background:url(../images/ramal_banner_bg.png) no-repeat; background-size:cover; }
.wish_banner { background:url(../images/wish_banner_bg.png) no-repeat; background-size:cover; }
.mp3_banner { background:url(../images/mp3_banner_bg.png) no-repeat; background-size:cover; }
.soulmate_banner { background:url(../images/soulmate_banner_bg.png) no-repeat; background-size:cover; }

.cube_banner { background:url(../images/cube_banner_bg.png) no-repeat; background-size:cover; }
.Productdownload span { font-size:14px; position: relative; top: -8px;}
.bannermaintext h1 { margin-bottom: 0px;}
.Productdownload a img { width: 100%;} 
.Productbox .Productdownload a img { width:auto;} 
.box3text .countli ul li, .box4text .countli ul li { width:100%;}

/*udpate for Scroll Nav*/

 @media(min-width:767px) {.navbar {padding: 20px 0;-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;transition: background .5s ease-in-out,padding .5s ease-in-out;}.top-nav-collapse {padding: 0;}}.intro-section {height: 100%;padding-top: 150px;text-align: center;background: #fff;}.about-section {height: 100%;padding-top: 150px;text-align: center;background: #eee;}.services-section {height: 100%;padding-top: 150px;text-align: center;background: #fff;}.contact-section {height: 100%;padding-top: 150px;text-align: center;background: #eee;}