/********************** Customer Style *****************************/
/*====================Start Body Style=====================*/
@font-face {
    font-family: "NotoSansArabicUI";
    src:url("../font/NotoSansArabicUI-Regular.ttf")format('truetype');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
  }
  body {
    background-image: url("../font/NotoSansArabicUI-Regular.ttf");
    text-align: center;
    background-color: #fff;
    overflow: hidden !important;
     margin:0px 0px;
}
  html ,body{
    font-family:"NotoSansArabicUI";
   -ms-text-size-adjust:100%;
   -webkit-text-size-adjust:100%;
   overflow-x: hidden;
   font-size: 1.008rem;
   font-weight: 400;
   line-height: 1.5;
   color: #eee ;
   background: #fff;
}
  body::-webkit-scrollbar {
    width: 0.4em;
  }
  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
  body::-webkit-scrollbar-thumb {
    background-color:rgba(21, 21, 57, 0.6); 
    outline: 1px solid #5ccaf2;
    border-radius:5px;
  }
  .box-explian::-webkit-scrollbar {
    width: 0.4em;
  }
  .box-explian::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
  .box-explian::-webkit-scrollbar-thumb {
    background-color:rgba(21, 21, 57, 0.6); 
    outline: 1px solid #5ccaf2;
    border-radius:5px;
  }
.container{
    left: unset !important;
    top: unset!important;
    position:unset!important;
    transform: none!important;
}
h1, h2 {
   line-height: 1.8;
   color: #495057;
   padding: 0;
}
h3,h4,h5,h6 { 
   font-weight: 300;
   color: #6c757d; 
   line-height: 1.5;
}
h6 {
  line-height: 24px;  
}
.display-5{
    font-size: 2rem;
}
.wrap-content{
    position:relative;
    -webkit-box-flex: 1; 
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    z-index: 2;
    padding: 100vh 0px 100vh 0px;
    margin-bottom: 25%;
}
.form-control::-webkit-input-placeholder { /* Edge */
    color: #9a9ba7;
  }
  
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #9a9ba7;
  }
.form-control::placeholder {
    color: #9a9ba7;
  }
  .select::placeholder {
    color: #9a9ba7;
  }
.color-blue-text{
    color: #5ccaf2;
}
.btn-outline-blue{
   padding: 7px;
   background-color: transparent;
   border-color: #5ccaf2;
   color: #5ccaf2;
}
.btn-outline-blue:hover {
   transition: 0.5s;
   color:#fff ;
   background-color:#5ccaf2;
   border-color: #5ccaf2;
}
.image-overlay {
 width: 100%;
 height: 100%;
 position: absolute;
 background-color: #151539;
 opacity: 0.5;
}
.color-gray ,a{
   color: #eee;
   line-height: 1.5;
}
a:hover,a:focus{
  color:  #5ccaf2;
  text-decoration: none
}
.medium-paragraph { 
   font-size: 17px; 
   line-height: 2;
   color: #6c757d;
   text-align: justify;
}
.section-container { 
   margin: 0 auto; 
   /*padding-bottom: 80px; */
}
.section-description p,.section-description h2 { 
   margin-top: 20px;
  /* padding: 0 120px;*/
}
.section-description p{
font-size: 17px;
 color: #151539;
}
.section-container-image-bg .section-description p { 
   opacity: 0.8; 
}
.section-bottom-button { 
   padding-top: 60px; 
}
.banner-introduction{
    background: -webkit-linear-gradient(90deg, #0a2896 0%,#106bca 15%, #151539 85%);
    color: #fff;
    padding-top: 5%;
    position: relative;
}
.shapes-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .shapes-container .shape {
    position: absolute;
  }
  .shapes-container .shape::before {
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(-35deg);
    position: absolute;
    border-radius: 50px;
  }
  .shapes-container .shape:nth-child(1) {
    top: 2%;
    left: 11%;
    width: 400px;
    height: 70px;
  }
  .shapes-container .shape:nth-child(2) {
    top: 14%;
    left: 18%;
    width: 200px;
    height: 15px;
  }
  .shapes-container .shape:nth-child(3) {
    top: 80%;
    left: 4%;
    width: 300px;
    height: 60px;
  }
  .shapes-container .shape:nth-child(4) {
    top: 85%;
    left: 15%;
    width: 100px;
    height: 10px;
  }
  .shapes-container .shape:nth-child(5) {
    top: 5%;
    left: 50%;
    width: 300px;
    height: 25px;
  }
  .shapes-container .shape:nth-child(6) {
    top: 4%;
    left: 52%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(7) {
    top: 80%;
    left: 70%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(8) {
    top: 55%;
    left: 95%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(9) {
    top: 50%;
    left: 90%;
    width: 300px;
    height: 50px;
  }
  .shapes-container .shape:nth-child(10) {
    top: 30%;
    left: 60%;
    width: 500px;
    height: 55px;
  }
  .shapes-container .shape:nth-child(11) {
    top: 60%;
    left: 60%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(12) {
    top: 35%;
    left: 75%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(13) {
    top: 90%;
    left: 40%;
    width: 300px;
    height: 45px;
  }
  .shapes-container .shape:nth-child(14) {
    top: 54%;
    left: 75%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(15) {
    top: 50%;
    left: 90%;
    width: 200px;
    height: 5px;
  }
  .shapes-container .shape:nth-child(16) {
    top: 50%;
    left: 81%;
    width: 100px;
    height: 5px;
  }
/*animated navbar items */
.snip * ,.snip1 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip li ,.snip1 li {

  list-style: outside none none;
  margin: 0 5px;
  padding: 0;
}
.snip li{
    display: inline-block;  
}
.snip1 li {
    display: block;  
}
.snip a ,.snip1 a,.snip a ,.snip1 .btn-block{

  padding: 0.5em 17px;
  position: relative;
  letter-spacing: 1px;
  text-decoration: none;
}
.snip a,.snip .btn-block{
    display: inline-block;  
}
.snip a:before ,.snip1 a:before ,.navbar-nav .active-item>a:before,.snip a:before ,
.snip .btn-block:before ,.navbar-nav .active-item>.btn-block:before {
  left: 20%;
  right: 20%;
  top: 50%;
  content: '';
  border-left:12px solid #68b3e4 ;
  border-right: 12px solid #68b3e4;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 3px;
  opacity: 0;
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip a:hover,.snip1 a:hover,.snip1 a:focus,
.snip .current a,.snip1 .current a,
.snip .btn-block:hover,.snip .btn-block:hover,.snip .btn-block:focus,
.snip .current .btn-block,.snip .current .btn-block  {
  color: #ffffff;
}
.snip a:hover:before,.snip1 a:hover:before,.navbar-nav .active-item>a:before,.snip1 a:focus:before,
.snip .current a:before ,.snip1 .current a:before,
.snip .btn-block:hover:before,.snip .btn-block:hover:before,.navbar-nav .active-item>.btn-block:before,.snip .btn-block:focus:before,
.snip .current .btn-block:before ,.snip .current .btn-block:before{
  left: 0;
  right: 0;
  opacity: 1;
}
/* navbar style*/
.black{
    background: rgba(21, 21, 57, 1);
    color: #fff;
}
.white-co{
        background-color: #fff;
}
/***** Top menu *****/
.navbar {
    transition: all .6s;
    backface-visibility: hidden;
    background: transparent; 
}
.navbar-expand-lg .navbar-collapse{
    display: inline-block!important;
 }
.navbar-toggler{
    border: 0px solid transparent; 
}
.navbar-brand img{
    margin: 50%;
}
.navbar-dark .navbar-nav { 
    margin: auto;
}
.navbar-dark .navbar-nav .nav-link { 
    color: rgb(21, 21, 57);
}
.navbar-dark .navbar-nav .nav-link:hover {
    color:rgb(21, 21, 57);
}
.navbar-dark .navbar-nav .nav-link:focus {
    outline: 0; 
}
.navbar-expand-md .navbar-nav .nav-link { 
    padding-right: 1rem;
    padding-left: 1rem;
}
.navbar-brand {
    padding: 0;
    margin: 0px;
    width: 3%;
}
.background-slider{
    left: 0;
    right: 0;
    position: absolute;
    margin: 0px auto;
}
.showing{
    opacity: 0; 
}
.slide__img-wrap {
    border-radius: 2px;
    height: 362px;
    margin-left: -39px;
    width: 57%;
    margin-bottom: 117px;
}
li.nav-item {
    display: inline-block;
}
/*==================== drop down menu items =============================*/
.navbar-icon-toggle{
    border: 0px solid transparent;
}
.dropdown-item{
    color: #151539 
}
.dropdown-item:focus, .dropdown-item:hover{
     color: #17a2b8
    }
.slide__title {
    padding: 31px;
    margin: 10% 0px;
    grid-area: 1 / 1 / 1 / 1;
    font-size: 3rem;
    background-color: rgba(21, 21, 57, 0.86);
	color: var(--color-title);
	position: relative;
	margin-bottom: 1.25rem;
	opacity: 0;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
}
.slide--current .slide__img-wrap,
.slide--current .slide__number,
.slide--current .slide__title {
	opacity: 1;
}
.slidenav ,.slidenav__header{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.slidenav__header{
   position: relative
}
.slidenav {
    position: absolute;
}
.slidenav {
    left: 0;
}
.slidenav__item ,.slidenav__item__header{
	pointer-events:auto;
	border: 0;
	background: none;
	text-transform: inherit;
	position: relative;
	line-height: 1;
	color:#5ccaf2;
}
.slidenav__item__header h1{
    line-height: 0;
}
.slidenav__item{
   	padding: 1rem;
}
.slidenav__item::before,
.slidenav__item::after,
.slidenav__item__header::before,
.slidenav__item__header::after
{
	content: '';
	position: absolute;
	background: currentColor;
	top: 50%;
}
.slidenav__item::before,
.slidenav__item::after
{
    	height: 1px;
}
.slidenav__item::before {
	right: 100%;	
    width: 3rem;
}
.slidenav__item::after {
	left: 100%;	
    width: 3rem;
}
.slidenav__item:hover {
	color: var(--color-link-hover);
}
.slidenav__item--prev {
	transform: rotate(-90deg) translateY(-50%);
}
.slidenav__item--next {
	transform: rotate(90deg) translateY(-25%);
}
/* cart box in navbar */
.header-trialbtn-cart{
    display: inline-flex;
    float: left;
    line-height: 1rem;
    width: 20%
}
.show-cart-box-div{
    display:block!important
}
.cart-box-show{
    min-width: 23rem;
    left: 0;
    border: none
}
.cart-box-show:after {
    content: "";
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    left: 1%;
    z-index: 10;
}
.cart-box-div{
    position: relative
    /* display: none */
}
.cart-num{
    background: rgba(92, 202, 242, 0.8);
    padding: 2px 8px;
    color: #fff;
    border-radius: 50%;position: absolute;
    bottom: 40%;
    font-size: 12px;
    left: 0;
    width: 12%
}
.cart-icon{
    width: 15%;
    float: left;
}
.nav-cart-app-list{
    border: 0px solid transparent;
    color: #7c8186;
}
.nav-cart-app-list tr,.nav-cart-app{
    border: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125)!important;
}
.nav-cart-price,.nav-cart-totle-price{
    font-size: 14px
}
.nav-cart-totle-price{
    background-color: #5ccaf2!important;
    color: #fff;
}
.dropdown-toggle::after{
    content:none;
}
.cart-box-div button,.cart-box-div button:focus,.cart-box-div button:hover{
    box-shadow: 0px 0px transparent;
}
.nav-cart-purchase{
    border: 1px solid rgba(255, 255, 255, 0);
}
/* top button */
.top-btn {
    color: #c1c1cb;
    font-size: 1.6rem;
    position: fixed;
    bottom: 60px;
    left: 3%;
    background: #dee2e600;
    z-index: 1000;
    width: 50px;
    height: 50px;
    display: none;
    text-decoration: none;
    border: 3px solid rgba(193, 193, 203, 0.8392156862745098);
    -webkit-border-radius:  50%;
    -moz-border-radius:  50%;
    border-radius: 50%;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.top-btn i {
    color: #c1c1cb;
    margin: 0 auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding-bottom: 4px
}
.top-btn:hover,
.top-btn:active  {
    color: #5ccaf2;
    border: 3px solid rgb(92, 202, 242);
    transition: 0.7s;
}
.top-btn:hover i {
    color: #5ccaf2;
    top: 5px;
}
  /* Start  loading section in home page */
  .loading-section{
    width: 100%;
    height: 100%;
    top: 0px;
    position: fixed;
    z-index: 99999;
    background: #151539;
    opacity: 1 !important;                                           
    overflow-y:hidden !important;
  }
  .img-logo-loading{
      position: absolute;
      left: 28%;
  }
.spinner-box{
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0%;
    right: 0%
}
.circle-border {
    width: 150px;
    height: 150px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #5ccaf2;
    background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, #5ccaf2 100%);
    animation: spin .8s linear 0s infinite;
  }
  .circle-core {
    width: 100%;
    height: 100%;
    background-color: #151539;
    border-radius: 50%;
  }
  @keyframes spin {
    from {
      transform: rotate(0);
    }
    to{
      transform: rotate(359deg);
    }
  }
  .spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
  }
/*==========================Start Main carousal Section===========================*/
.startup_banner_area_three ,.demo_banner_area{
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
}
.startup_banner_area_three {
      background:#5ccaf2;   
}
.startup_banner_area_three:before,.demo_banner_area:before{
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}
.startup_banner_area_three:before {
    width: 100%;
   background: url("../../images/img/main-carousal/startup_shap.png") no-repeat scroll center bottom/cover;
}
.startup_content_three{
    margin: 10% auto;
}
.startup_content_three h2 {
    font-size:24px;
    color:#495057;
}
.slider_btn {
    color: #fff;
}
.btn_six {
    background: #5ccaf2;
    font-size: 15px;
    border: 1px solid #5ccaf2;
    padding: 13px 35px;
    color: #fff;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    display: inline-block;
}
.slider_btn {
    padding: 15px 35px;
}

.btn_six + .btn_six {
    background: transparent;
    color: #5ccaf2;
    margin-left: 20px;
}

.stratup_app_screen {
    left: 0;
    position: absolute;
 
    height: 100%;
    right: 0;
    z-index: -1;
    bottom: 80%;
}
.stratup_app_screen .laptop{  
}
/*===========================End Main carousal Section===========================*/
/*===========================Start Star With Us  Section===========================*/
.animation_application {
    height: 370px;
    position: relative;
}
.animation_application  li {
    display: flex;
	justify-content: center;
	align-items: center;
    width: 8%;
    border-radius: 10px;
    position: absolute;
    -webkit-transform: matrix(0.97029, 0.34192, -0.84486, 0.9425, 0, 0);
    -ms-transform: matrix(0.97029, 0.34192, -0.84486, 0.9425, 0, 0);
    transform: matrix(0.97029, 0.34192, -0.84486, 0.9425, 0, 0);
}
.animation_application li img {
    width: 100%;
    border-radius: 10px;
}
.animation_application li:nth-child(1) {
    top: 0;
    left: 35px;
}
.animation_application li:nth-child(2) {
    top: 55px;
    left: 170px;
}
.animation_application li:nth-child(3) {
    top: 130px;
    left: 270px;
}
.animation_application li:nth-child(4) {
    top: 35px;
    left: 410px;
}
.animation_application li:nth-child(5) {
    top: 109px;
    left: 495px;
}
.animation_application li:nth-child(6) {
    top: 40px;
    left: 700px;
}
.animation_application li:nth-child(7) {
    top: 0;
    left: 890px;
}
.animation_application li:nth-child(8) {
    top: 40%;
    left: 35px;
}
.animation_application li:nth-child(9) {
    top: 182px;
    left: 585px;
}
.animation_application li:nth-child(10) {
    top: 130px;
    left: 780px;
}
.animation_application li:nth-child(11) {
    top: 128px;
    left: 950px;
}
.animation_application li:nth-child(12){
    bottom: 0;
    left: 75%;
}
.animation_application li:nth-child(13) {
    bottom: 0;
    left: 687px;
}

.animation_application li:nth-child(14) {
    bottom: 30px;
    left: 150px;
}
.animation_application li:nth-child(15){
    bottom:20px;
    left:310px;
}
.animation_application li:nth-child(16){
    bottom:-25px;
    left:460px;
}
.animation_application li:nth-child(17){
    bottom:35px;
    left:690px;
}
.animation_application li:nth-child(18) {
    bottom: -30px;
    left: 800px;
}
/*** Parallax animated ***/
#parallax {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

#parallax .img-horzantial1 {
  animation: parallax-horzantial 1s ease-in-out infinite alternate;
}
#parallax .img-horzantial2 {
  animation: parallax-horzantial 1.2s ease-in-out infinite alternate;
}

#parallax .img-vertical1 {
  animation: parallax-vertical 1.1s ease-in-out infinite alternate;
}
#parallax .img-vertical2 {
  animation: parallax-vertical 1.3s ease-in-out infinite alternate;
}

@keyframes  parallax-horzantial {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(20px);
  }
}
@keyframes  parallax-vertical {
  0% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(20px);
  }
}
/*===========================End Star With Us  Section===========================*/
/*=========================== Start Around Section===========================*/

.around-text-form a,
.around-text-form .btn-submit,.around-text-form .btn-block{
    padding: 12px;
    color: #fff;
    background: #5ccaf2;
    border-radius: 0;
    border: 0px ;
    box-shadow: 0px 0px transparent;
}
.around-text-form a:hover,.around-text-form .btn-block:hover{
       color: #151539;
       background: transparent;
       font-weight: bolder
}
/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #151539;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}
/*=========================== End Around Section=============================*/
/*========================= Start Our Advantage Section =======================*/
/***** Divider *****/
.divider-1 span { 
    display: inline-block;
    width: 200px; 
    border-bottom: 1px dotted #aaa;
}
 .section-divider {
    min-width: 100%;
    background: rgba(0,0,0,0);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.04) 100%);
}
.ds-p-t-xxl {
    padding-top: 5.25rem;
}
.vb:nth-child(1),
.vb:nth-child(2),
.vb:nth-child(4), 
.vb:nth-child(5) 
{
  border-left: 1px solid #f7f4e9; 
}
.hb:nth-child(1),
.hb:nth-child(2), 
.hb:nth-child(3) 
{
    border-bottom: 1px  solid #f7f4e9;
}
.service-block  {
    margin-bottom: 5rem;
}
/*========================= End Our Advantage Section ===========================*/                                                                                                                                                         
/*===================== Start Service Section==============================*/
.service_section_area{
    /* background-image: linear-gradient(-140deg, #0a2896 0%, #151539 50%); */
    background-image: -moz-linear-gradient(-140deg, #151539 11%,#106bca 50%, #151539 88%);
    background-image: -webkit-linear-gradient(-140deg, #151539 11%,#106bca 50%, #151539 88%);
    background-image: linear-gradient(-140deg, #151539 11%,#106bca 50%, #151539 88%);
    position: relative;
    z-index: 0;
    overflow: hidden
}
.service-text-form a{
    background: #5ccaf2;
    border-radius: 0;
    color:#f9f9f9;
}
.service-text-form a:hover{
       color: #fff;
       border: 1px solid #fff;
       background: transparent;  
}
/*====================== End Service Section==============================*/
/*========================= Start Solution Section ==============================*/
.Solution_section_area{
    z-index: 0;
}
  .carousel .solution-carousal-img {
    display: hidden; 
    cursor: pointer; 
  }
.section-shap{ 
    padding: 31px;
    grid-area: 1 / 1 / 1 / 1;
    position: relative;
    color:#fff;
    z-index: 0
}
.shap1{
      /*border: 2px solid red;*/
     background-color: #fbfbfb; 
     border-top-right-radius: 25px;
     box-shadow: 1px 2px 11px 1px #e9ecef; 
}

.shap2{
    /* border: 2px solid #0062cc;*/
     background-color: #fbfbfb; 
     border-top-left-radius: 25px;
     box-shadow: 1px 2px 11px 1px #e9ecef; 
}

.shap3{
      /*border: 2px solid #28a745;*/
     background-color: #fbfbfb; 
     border-bottom-right-radius: 25px;
     box-shadow: 1px 2px 11px 1px #e9ecef; 
}
.shap4{
     /*border: 2px solid #ffb100;*/
      background-color:#fbfbfb; 
     border-bottom-left-radius: 25px;
     box-shadow: 1px 2px 11px 1px #e9ecef; 
}

.shap1:hover,.shap2:hover,
.shap3:hover,.shap4:hover
{    z-index: 1;
    -webkit-filter: drop-shadow(4px 4px 6px #ccc);
    filter:drop-shadow(4px 4px 6px #ccc);
   	-webkit-transition: all 0.5s ease-in-out;
  	-moz-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out;
  	transition: all 0.5s ease-in-out; 
}
/*=========================== End Solution Section =============================*/
/*========================= Start Package and Price Section ==============================*/
.app-raduis{
    border-radius: 9px;  
}
.panel-box {
	margin: 0 auto;
	height: 275px;  
	position: relative;
	-webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;

}
.box {
    overflow: hidden;
    background-color: white;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /* color: #4b5259;  */
  	height: 275px;  
	margin: 0 auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
/* Image Zoom #1 */
.box .row-one {
  transition: transform 0.5s ease;
}
.box:hover .row-one {
  transform: scale(1.2);
}
.app-panel-box:nth-child(1) .panel-box{
    background: url("../../images/ico/applcation-icons/sale.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(2) .panel-box{
    background: url("../../images/ico/applcation-icons/purchase.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(3) .panel-box{
    background: url("../../images/ico/applcation-icons/pos.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(4) .panel-box{
    background: url("../../images/ico/applcation-icons/asset.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(5) .panel-box{
    background: url("../../images/ico/applcation-icons/stock.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(6) .panel-box{
    background: url("../../images/ico/applcation-icons/hr.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(7) .panel-box{
    background: url("../../images/ico/applcation-icons/icon1.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.app-panel-box:nth-child(8) .panel-box{
    background: url("../../images/ico/applcation-icons/icon12.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Opacity Fade #2 */
.box .overlay {
  width: 100%;
  height: 100%;
  background-color:rgba(21, 21, 57, 0.78);
  display: flex;
  justify-content:center;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.box:hover .overlay {
  opacity: 1;
}
/* Slide Top #4 */
.box .overlay-3 {
  width: 100%;
  height: 100%;
  background-color: rgba(21, 21, 57, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 275px;
  transition: margin-top 1s ease;
}
.box:hover .overlay-3 {
   margin-top: 0;
}
/*========================= End Package and Price Section ==============================*/
/*========================= Start Partner  Section ================================*/
.mb_70 {
    margin-bottom: 70px;
}
.f_400 {
    font-weight: 400;
}
.f_p {
    font-family: "Poppins", sans-serif;
}
.l_height28 {
    line-height: 28px;
}
.f_size_18 {
    font-size: 18px;
}
.mb_50 {
    margin-bottom: 50px;
}

.f_600 {
    font-weight: 600;
}
.l_height30 {
    line-height: 30px;
}
.f_size_30 {
    font-size: 30px;
}

.mt_40 {
    margin-top: 40px;
}
/* partner area two  */
.partner_area_two {
    padding-top: 60px;
  }
  .partner_area_two h4 {
    color: #8891aa;
  }
  .partner_info {
    text-align: center;
     -webkit-box-pack: center; 
    -ms-flex-pack: center;
    justify-content: center;
  }
  .subscribe_form_info{
    background-color: white;
    padding: 60px 0px;
    margin-bottom: -194px;
    z-index: 2;
    position: relative;
  }
  .security_leaf_right {
       position: absolute;
      top: 40%;
      margin-top: 0px;
      right: -20px;
  }
  .security_leaf_left {
      position: absolute;
      left:-40px;
      top: 40%;
      margin-top: 0px;
  }
   .logo_item {
    width: calc(100% / 5);
    margin-bottom: 60px;
  }
   .logo_item img {
    width: 85%;
    max-width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
    .logo_item:hover img {
    -webkit-filter: drop-shadow(4px 4px 6px #ccc);
   filter:drop-shadow(4px 4px 6px #ccc);
  }
/* Carousal for What Our Client Say */
.carousel-opinion {
    margin: auto;
    width: 70%;
}
.carosal-partner-opinion {
    height: 41%;
    width: 100%;
    margin: auto;
}
.partner-said{
    border-left: none;
    margin: 0;
}
.partner-said h5 {
    font-size: 80%;
    line-height: 1.42857143;
    color: #777;
}
.carosal-indicators-opinion {
    position: relative;
    right: 0%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
}
.carosal-indicators-opinion .active img {
    padding-top: 18px !important;
}
.carosal-indicators-opinion li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
  text-indent: 0;
}
.carosal-indicators-opinion .active {
    width: 85px;
    height: 85px;
    opacity: 1;
    transition: all .2s;
}
a.carousel-control-opinion-prev,
a.carousel-control-opinion-next{
    height: 100%;
    background: #5ccaf2;
    border-radius: 0;
    opacity: 0.7;
}
a.carousel-control-opinion-prev:hover ,
a.carousel-control-opinion-next:hover {
 opacity:.9;
}
/* partner silder*/
.panel-partner{
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.17) !important
}
.flex-direction-nav li {
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
}
.flex-direction-nav li:first-child {
  left: 0;
}
.flex-direction-nav li:last-child {
  right: 0;
}
.flex-direction-nav li a {
  background: rgba(92, 202, 242, 0.6);
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.flex-direction-nav li a :hover{
      background: #151539  
}
.no-touch .flex-direction-nav li a:hover {
  background-color: #fff;
}
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
  /* left and right arrows in css only */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  background-color: #151539;
}
.flex-direction-nav li a::before {
  -webkit-transform: translateY(-35px) rotate(45deg);
  -moz-transform: translateY(-35px) rotate(45deg);
  -ms-transform: translateY(-35px) rotate(45deg);
  -o-transform: translateY(-35px) rotate(45deg);
  transform: translateY(-35px) rotate(45deg);
}
.flex-direction-nav li a::after {
  -webkit-transform: translateY(-27px) rotate(-45deg);
  -moz-transform: translateY(-27px) rotate(-45deg);
  -ms-transform: translateY(-27px) rotate(-45deg);
  -o-transform: translateY(-27px) rotate(-45deg);
  transform: translateY(-27px) rotate(-45deg);
}
.flex-direction-nav li:last-child a::before {
  -webkit-transform: translateY(-35px) rotate(-45deg);
  -moz-transform: translateY(-35px) rotate(-45deg);
  -ms-transform: translateY(-35px) rotate(-45deg);
  -o-transform: translateY(-35px) rotate(-45deg);
  transform: translateY(-35px) rotate(-45deg);
}
.flex-direction-nav li:last-child a::after {
  -webkit-transform: translateY(-27px) rotate(45deg);
  -moz-transform: translateY(-27px) rotate(45deg);
  -ms-transform: translateY(-27px) rotate(45deg);
  -o-transform: translateY(-27px) rotate(45deg);
  transform: translateY(-27px) rotate(45deg);
}


/* Carousal to Dispaly Partner */
.carousel-control-next, 
.carousel-control-prev{
     border-radius: 50%;
    width: 51px;
    height: 51px;     
}
.carousel-control-prev {
    left: -100px;
}
.carousel-control-next {
    right: -100px;
}

 /* Bootstrap Lightbox using Modal */
#profile-grid { 
    overflow: auto;
    white-space: normal;
} 
#profile-grid .profile {
    padding-bottom: 40px;
}
#profile-grid .panel {
    padding: 0 
}
#profile-grid .panel-body { 
    padding: 15px
}
#profile-grid .profile-name { 
    font-weight: bold; 
}
#profile-grid .thumbnail {
    margin-bottom:6px;
}
#profile-grid .panel-thumbnail {
    overflow: hidden; 
}
#profile-grid .img-rounded {
    border-radius: 4px 4px 0 0;
}
/*========================= End Partner  Section =================================*/
/*========================= Start support  Section =================================*/
/* customer style*/
#map-iframe{
    filter:grayscale(0.8);
   }
   
   /* customer style*/
   .pin-wrap {
     position: absolute;
     width: 100px;
     height: 100px;
     margin-top: -120.7106781187px;
     margin-left: -50px;
     transform-origin: 50% 120.7106781187% 0;
   }
   .pin {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100px;
     height: 100px;
     margin-top: -50px;
     margin-left: -50px;
     transform-origin: 50% 120.7106781187% 0;
   }
   .pin::after {
     position: absolute;
     display: block;
     box-sizing: border-box;
       width: 50px;
       height: 50px;
     content: '';
     transform: rotateZ(-45deg);
     border: 20px solid #5ccaf2;
     border-radius: 50% 50% 50% 50%;
     background: #f1f1f1;  
   }
   .pin::before {
        position: absolute;
       display: block;
       box-sizing: border-box;
       width: 50px;
       height: 50px;
       content: '';
       transform: rotateZ(-45deg);
       border: 18px solid rgba(22, 141, 185, 0.9);;
       border-radius: 50% 50% 50% 0;
   }
   
.pulse {
    position: absolute;
    margin-top: -80px;
    margin-left: -50px;
    transform: rotateX(55deg);
  }
  .pulse::after {
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    animation: pulsate 1s ease-out;
    animation-delay: 1.1s;
    animation-iteration-count: infinite;
    opacity: 0;
    border-radius: 50%;
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 6px 3px  #5ccaf2;
  }
  @keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
.support-section-footer{
    z-index: 1;
}
.support-section{
    z-index: 1;
    margin-top: 0%;
}
.support-section h1 {
    position: absolute;
    COLOR: #7171b5;
    z-index: 1;
    right: 0;
    left: 0;
    top:20%;
}
.section-inforamtion{
    text-align: right;
    margin-top: 5rem;
}
.hero {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  position: relative;
  top: 0;
  left: 0;
  background-color: #fff;
  transform: translate3d(0, 0, 0);
}
.layer-support-1 {
  animation: parallax_fg linear 20s infinite both;
  background: url("../../images/img/bike/1.png") 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 136px;
}
.layer-support-2 {
  animation: parallax_fg linear 30s infinite both;
  background: url("../../images/img/bike/2.png") 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 145px;
}
.layer-support-3 {
  animation: parallax_fg linear 55s infinite both;
  background: url("../../images/img/bike/3.png") 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 158px;
}
.layer-support-4 {
  animation: parallax_fg linear 75s infinite both;
  background: url("../../images/img/bike/build.png") 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 468px;
}

.layer-support-5 {
  animation: parallax_fg linear 95s infinite both;
  background: url("../../images/img/bike/build.png") 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:12%;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 311px;
}
.layer-support-6 {
    animation: parallax_fg linear 120s infinite both;
    background: url("../../images/img/bike/build.png") 0 100% repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 12%;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 222px;
  }
  .layer-support-7 {
    background: url("../../images/img/bike/clouds.png") 0 100% repeat-x;
    z-index: 3;
    position: absolute;
    bottom: 35%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-size: auto 75px;
    animation: parallax_bike linear 135s infinite both;
}

.bike-1, .bike-2 {
  background: url("../../images/img/bike/bike.png") 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
  animation: parallax_bike linear 10s infinite both;
}
.bike-2 {
  animation: parallax_bike linear 15s infinite both;
}
@keyframes parallax_fg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
@keyframes parallax_bike {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
/*========================= End support  Section =================================*/
/*=========================== Start  Footer Section=========================== */
.footer-section  {

}
#page-content {
  flex: 1 0 auto;
}
#sticky-footer {
  flex-shrink: none;
}
.section-footer-copyright{
    color: #FFF;
    background-color: #010126;
    height: auto;
    padding: 30px 0px;
}
.section-footer-copyright p{
    font-size: 18px; 
}
.section-footer-links a{
    font-size: 14px
}

.slidenav__item__header{
	margin: auto; 
}
.slidenav__item__header::before,
.slidenav__item__header::after {
    width: 33rem;
    height: 2px;
}
.slidenav__item__header::before {
    right: 100%;
}
.slidenav__item__header::after {
    left: 100%;
}
.slidenav__item__footer__socail{
     transform: rotate(0deg)translatey(25%);
}
#footer-icon-socailmedia {
    margin: 0px 6px;
    transform: rotate(0deg) translateX(0%)!important;
}
/* footer  list */
.footer-list {
        padding: 12px 2px;
}
.footer-list li a:hover 
{
    transition: 0.7s;
    padding-right: 7px ;
    /*text-decoration: underline;*/
}
/*=========================== End Footer Section==========================*/
/*=========================== Start Package Details Page====================*/ 
/* INTRODUCTUONS */
.package-detials-section{
    background-image: url("../../images/img/around-raq/sale.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 100%;
    margin: 0 auto;   
    position: relative; 
}
.fieldset-border{
    border: 1px solid #f7f4e9;
}
.h_head {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.package-nav-link.active{
    border-color: #dee2e6 #dee2e6 #fff !important;
}

.packageTab a img{
    width: 40px !important
}
.apps-list-main-detials{
    color: #6c757d;
    font-size: 15px;
}
.apps-list-main-detials >li{
    line-height: 2.5;
}
.package-subdetials-table{
    color: #6c757d;
}
.package-subdetials-table th >i{
    background: #6c757d;
}
.erp_service_item p {
    font-weight: 400;
    margin-bottom: 0;
    font-size: 16px;
    color:#6c757d;
    line-height: 1.8;
}
/* FAQ */
.myaccordion {
  margin: 40px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}
.myaccordion .card,
.myaccordion .card:last-child .card-header {
  border: none;
}
.card-header{
   padding: .20rem 1.25rem;  
}
.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}
.myaccordion .fa-stack {
  font-size: 9px;
  width: 5.5em;
  margin: 12px;
}
.myaccordion .btn {
  box-shadow: 0px 0px transparent;
  font-size: 16px;  
  width: 100%;
  color: #004987;
  padding: 0;
}
.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
  text-decoration: none;
}
.myaccordion li + li {
  margin-top: 10px;
}
.myaccordion .fa-stack:before {
    content: '\f055';
}
.myaccordion .fa-stack:after {
    content: '\f056';
}
.headng-FAQ{
    text-align: right;
    width: 35%;
    max-width: 35%;  
    margin-bottom: 2.5rem;
}
/* related system */
.section-pricing {
    z-index: 3;
    position: relative;
}
.block {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.block-caption {
    font-weight: 700;
}
.block-plain {
    background: transparent;
    box-shadow: none;
}
.block-background {
    background-position: center center;
    background-size: cover;
    text-align: center;
}
.block-raised {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.block-background .table {
    position: relative;
    z-index: 2;
    min-height: 280px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 440px;
    margin: 0 auto;
}
.block-background .block-caption {
    color: #FFFFFF;
    margin-top: 10px;
}
.block-pricing.block-background:after {
    background-color: rgba(0, 0, 0, 0.7);
}
.block-background:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    background-color: rgba(0, 0, 0, 0.56);
    border-radius: 6px;
}
[class*="pricing-"] {
    padding: 90px 0 60px 0;
}
.block-pricing {
    text-align: center;
}
.block-pricing .table {
    padding: 15px !important;
    margin-bottom: 0px;
}
.block-pricing .icons {
    padding: 10px 0 0px;
}
.block-pricing h1 small {
    font-size: 18px;
}
.block-pricing h1 small:first-child {
    position: relative;
    top: -17px;
    font-size: 26px;
}

.block-pricing ul {
    list-style: none;
    padding: 0;
    max-width: 240px;
    margin: 10px auto;
}
.block-pricing ul li {
    color: #3C4857;
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
}
.block-pricing ul li:last-child {
    border: 0;
}
.block-pricing ul li b {
    color: #3C4857;
}
.block-pricing ul li i {
    top: 6px;
    position: relative;
}
.block-pricing.block-background ul li,
.block-pricing [class*="table-"] ul li {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
}

.block-pricing.block-background ul li b,
.block-pricing [class*="table-"] ul li b {
    color: #FFFFFF;
}

.block-pricing.block-background [class*="text-"],
.block-pricing [class*="table-"] [class*="text-"] {
    color: #FFFFFF;
}
.block-background:not(.block-pricing) .btn {
    margin-bottom: 0;
}
.block [class*="table-"] .block-caption a,
.block [class*="table-"] .block-caption {
    color: #FFFFFF;
}
.block .table-warning {
    background: -webkit-linear-gradient(-140deg, #0a2896 0%, #151539 50%);
    border-radius: 6px;
}
/* btn-warning */
.btn-warning {
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
}
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning:hover {
    color: #ffc107;
    background-color: #fff;
    border:1px solid  #ffc107;
    box-shadow: 0 0px 0px 0px rgba(255, 152, 0, 0.42);
}
.btn.btn-white:focus, .btn.btn-white:active, .btn.btn-white:hover {
    color: #fff;
    font-size: 13px;
    transition: 1.1s;
   
}
/* FontAwesome fa class */
.fa{
    font-size: 12px;
}
/* Bootstrap tab-space class */
.tab-space {
    padding: 20px 0 50px 0px;
}
/* price table */
 div.board-inner {
    background: #fafafa url("../../images/img/package-detials/geometry2.png");
    background-size: 30%;
}
a#nav-mprice-tab,
a#nav-aprice-tab
{
    z-index: 1;
    background: transparent;
    border-color: transparent;; 
    position: relative; 
}
.nav-price a{
        width: 20%;
}
.nav-price{
       position: relative;
}
a#nav-mprice-tab.active:after ,
a#nav-aprice-tab.active:after
{
    content: " ";
    position: absolute;
    left: 48%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #ddd;
}
.nav-price-img {
    padding-bottom: 12px;
}
span.round-tabs.one {
    color:  #53adfc;
    border: 2px solid #53adfc;
}
span.round-tabs.two {
    color: #1d65a2;
    border: 2px solid #1d65a2;
}
span.round-tabs {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: white;
    z-index: 2;
    text-align: center;
    font-size: 25px;
}
.nav-price:before, .nav-price:after {
    display: table;
    content: " ";
}
 .img-package-selected{
        width:12%    
}

.liner {
            height: 2px;
            background: #ddd;
            position: absolute;
            width: 50%;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 50%;
            z-index: 1;
}

.liner::before {
  position: relative;
  bottom: -60px;
  left: -10%;
  border: 15px solid transparent;
  border-top-color: #e74c3c ;
}

/* table */
.table .thead-light th{
      border-color: transparent;  
}
.table thead th, .table td, .table th{
 border-bottom:0px solid #dee2e6; 
}
.table td, .table th{
        border-top: 0px solid #0062cc;
}
.table .thead-light th {
    color: #495057;
    background-color: #fbfdff;
}
.count,.count2 ,.count3,.count4 {
    background: #fbfdff;
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px;
    min-width: 26px;
    text-align: center;
}
.minus ,.minus2 ,.minus3 ,.minus4{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    width: 20px;
    height: 20px;
    font: 20px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
}
 .plus, .plus2,.plus3, .plus4 {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    width: 20px;
    height: 20px;
    font: 20px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    }
.plus:hover,.plus2:hover,
.plus3:hover,.plus4:hover
{
    background-color: #50c6a3 !important;
}
.minus:hover ,.minus2:hover,.minus3:hover ,.minus4:hover{
    background-color: #f2755f !important;
}

/*Prevent text selection*/
span{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.form-button a ,.inverse-form-button a:hover,.inverse-form-button a:focus{
    border-radius: 4px;
    background: #17a2b8;
    color: #fbfbfd;
}
.form-button a{
    border: 2px solid #17a2b8; 
}
.form-button  a:hover,.form-button  a:focus,.inverse-form-button a{
    border-radius: 4px;
    color: #17a2b8 ;
    border: 2px solid  #17a2b8 ;
    background: transparent;  
}
/*===========================end Package Detials==========================*/
/* ========================== start all package type =====================*/
.packages-type-pull{
    margin-top: -12%;
}
.main-package{
  background: #fbfbfd  
}
/* table */
.package-type-table{
    height: 100%;
    border: 1px solid #e7e7e7;
    text-align: center;
    padding: 0 15px 30px;
    transition: all 0.5s ease 0s;
}
 .purple-package-type-table:hover{
    border: 1px solid #735df2;
}
.yellow-package-type:hover{
    border: 1px solid #faac01;
}
.blue-package-type:hover{
    border: 1px solid #0192af;
}
.package-type-table .package-type-table-header{
    width: 210px;
    background: #735df2;
    color: #3b2c94;
    margin: -15px auto 95px;
    padding-top: 35px;
    position: relative;
}
.blue-package-type-header{
    background:#0192af !important;
    color: #065565!important
}
 .yellow-package-type-header{
    background:#faac01 !important;
    color: #8e6100 !important;
}
.package-type-table .package-type-table-header:before{
    content: "";
    border-width: 0 0 15px 10px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #988cde;
    position: absolute;
    top: 0;
    left: -10px;
}
.yellow-package-type-header:before{
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fee3b0 !important;
}
.blue-package-type-header:before{
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #8ae0f1 !important;
}
.package-type-table .package-type-table-header:after{
    content: "";
    border-width: 15px 0 0 10px;
    border-style: solid;
    border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #988cde;
    position: absolute;
    top: 0;
    right: -10px;
}
.yellow-package-type-header:after{
    border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fee3b0 !important;
}
.blue-package-type-header:after{
    border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #8ae0f1 !important;
}
.package-type-table .heading{
    font-size: 1.5rem;
    margin: 5px 0;
    line-height: 1.7;
}
.package-type-table .heading:after{
    content: "";
    border-width: 60px 105px 0;
    border-style: solid;
    border-color:#735df2  rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    position: absolute;
    bottom: -125px;
    left: 0;
}
.yellow-blue-heading:after{
    border-color: #faac01 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important;
}
.package-blue-heading:after{
    border-color:#0192af  rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important;
}
.package-type-tablee .currency,
.package-type-table .month{
    font-size: 20px;
}
.package-type-table .package-type-price-value{
    font-size: 1rem;
}
 .package-type-table-content{
    height: 55%;
   /* overflow-y:scroll;*/
}
.package-type-table .package-type-table-content ul{
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}
.package-type-table .package-type-table-content ul li{
    font-size: 1rem;
    color: #6c757d;
    line-height: 2.5;
}
.package-type-minus-icon{
    color: #735df2
}
.package-type-minus-icon-yellow{
    color:#faac01;
}
.package-type-minus-icon-blue{
    color: #0192af;
}
.package-type-table .package-type-subscribe{
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    background: #735df2;
    color: #eee;
   
}
.package-type-subscribe-yellow{
    background:#faac01 !important
}
.package-type-subscribe-blue{
    background: #0192af !important
}
.package-type-table .package-type-subscribe:hover,.package-type-table.package-type-subscribe:focus{ 
    color:#735df2;
    border: 1px solid #735df2;
    background: transparent;
    transition:1.5 ease-in-out ;
    box-shadow: 0 0px rgba(0, 0, 0, 0);
}
.package-type-subscribe-blue:hover,.package-type-subscribe-blue:focus{
    color: #0192af !important;
    border: 1px solid #0192af !important;
    background: transparent !important;
    transition:1.5 ease-in-out !important;
    box-shadow: 0 0px rgba(0, 0, 0, 0);
}
.package-type-subscribe-yellow:hover,.package-type-subscribe-yellow:focus{
    color:#faac01 !important;
    border: 1px solid #faac01!important;
    background: transparent !important;
    transition:1.5 ease-in-out !important;
    box-shadow: 0 0px rgba(0, 0, 0, 0);
}
/*======================= End all package type =======================*/
/*=========================== Start Validtion Email Payment Page ============*/ 
div.laptop-wrapper {
    padding-bottom: 67.5%;
    height: 0;
}
.validation-account-container{
    box-sizing: border-box;
    background: url("../../images/img/payment/bg.png") center center no-repeat;
    background-size: contain;
    padding: 3% 13% 9%;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto
}
.validation-container {
    margin: auto;
    padding: 20px;
    z-index: 1;
    /* height: 100%   */
}
.socialLogin {
    font-size: 18px;
    margin-top: 20px !important;
    width: 90%;
    padding-right: 3px;
    height: 60px;
    text-align: right;
    border: none;
    padding: 12px;
}
.create-payment-account p{
    font-size: 14px;
    font-style: normal;
    font-weight: unset;
    color: #6c757d;
}
.create-payment-account p a{
    color: #f2755f
}
.leftside {
  box-sizing: border-box;
}
.orbtn {
  position: absolute;
  top: 117px;
  left: 40px;
  width: 40px;
  height: 40px;
  background: #DDD;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 40px;
  text-align: center;
  color: #495057;
  font-weight: bold;
}
.rightside {
  box-sizing: border-box;
  padding: 12px;
  border-left: 2px solid #eee;  
}
button.social-signin {
  margin-bottom: 20px;
  width: 220px;
  height: auto;
  border: none;
  border-radius: 2px;
  color: #FFF;
  font-weight: 500;
  transition: 0.2s ease;
  cursor: pointer;
}
button.social-signin:hover,
button.social-signin:focus {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: 0.2s ease;
}
button.social-signin:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: 0.2s ease;
}
button.social-signin.facebook {
  background: #32508E;
}
button.social-signin.twitter {
  background: #55ACEE;
}
button.social-signin.google {
  background: #DD4B39;
}
.forgetten-password {
    color:#5ccaf2
}
.forgetten-password a:hover{
    text-decoration: underlie 
}

/*================== End  Validtion Email Page==========================*/
#success_message{
    display: none;
}
/*======================== Start  Payment Steps  Page=====================*/ 
/*  style */
    @keyframes slidein {
  0% {
    top: -400px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
@keyframes slideout {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -400px;
    opacity: 0;
  }
}
/* phone country key style and embded */
.iti__flag {background-image: url("../../images/ico/flags-phone-icons/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("../../images/ico/flags-phone-icons/flags@2x.png");}
}
.form-horizontal{
    direction: rtl;
}
#scene {
  display: flex;
  align-items: center;
  justify-content: left;
  width:100%;
  height: 800px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}
 #left-zone {
  background: #fff;
  height: 75%;
  flex-grow: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: left;
}
 #left-zone .list {
  display: flex;
  list-style: none;
  align-content: stretch;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
  padding: 0;
}
 #left-zone .list li.item input[type="radio"] {
  display: none;
}
 #left-zone .list li.item input[type="radio"] ~ label {
  display: block;
  opacity: 0.5;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  z-index: 1
}
 #left-zone .list li.item input[type="radio"] ~ label:hover {
  opacity: 0.75;
  cursor: pointer;
}
 #left-zone .list li.item input[type="radio"] ~ label.label_strawberry:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  width: 61px;
  height: 53px;
  margin-left: 15px;
  background-image: url("../../images/img/payment/1.png");
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}
#left-zone .list li.item input[type="radio"] ~ label.label_banana:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  width: 61px;
  height: 53px;
  margin-left: 15px;
  background-image: url("../../images/img/payment/2.png");
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ label.label_apple:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  width: 61px;
  height: 53px;
  margin-left: 15px;
  background-image: url("../../images/img/payment/3.png");
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ label.label_orange:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  width: 61px;
  height: 53px;
  margin-left: 15px;
  background-image: url("../../images/img/payment/4.png");
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ .content {
    position: absolute;
    top: -800px;
    width: 70%;
    height: 800px;
    animation-duration: 0.75s;
    animation-name: slideout;
    animation-timing-function: ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 0;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_strawberry .picto {
  height: 100px;
  width: 100px;
  background-image: url("../../images/ico/payment-icons/info.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_strawberry h1 {
  color: #735df2;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_banana .picto {
  height: 100px;
  width: 100px;
  background-image: url("../../images/ico/payment-icons/pin.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_banana h1 {
  color: #0192af;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_apple .picto {
  height: 100px;
  width: 100px;
  background-image: url("../../images/ico/payment-icons/urban.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_apple h1 {
  color: #faac01;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_orange .picto {
  height: 100px;
  width: 100px;
  background-image: url("../../images/ico/payment-icons/debit-card.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
 #left-zone .list li.item input[type="radio"] ~ .content.content_orange h1 {
  color: #f2755f;
}
 #left-zone .list li.item input[type="radio"] ~ .content p {
  max-width: 50%;
  text-align: center;
}
 #left-zone .list li.item input[type="radio"]:checked ~ label {
  opacity: 1;
  animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 #left-zone .list li.item input[type="radio"]:checked ~ label.label_strawberry {
  color: #735df2;
  border-right: solid 4px #735df2;
}
 #left-zone .list li.item input[type="radio"]:checked ~ label.label_banana {
  color: #0192af;
  border-right: solid 4px #0192af;
}
 #left-zone .list li.item input[type="radio"]:checked ~ label.label_apple {
  color: #faac01;
  border-right: solid 4px #faac01;
}
 #left-zone .list li.item input[type="radio"]:checked ~ label.label_orange {
  color: #f2755f;
  border-right: solid 4px #f2755f;
}
 #left-zone .list li.item input[type="radio"]:checked ~ .content {
  animation-duration: 0.75s;
  animation-name: slidein;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#left-zone .list li.item input[type="radio"] ~ .content.content_strawberry{
    border-right: 2px solid rgba(194, 185, 249, 0.3);
}
#left-zone .list li.item input[type="radio"] ~ .content.content_banana {
    border-right: 2px solid rgba(1, 146, 175, 0.3);
}
#left-zone .list li.item input[type="radio"] ~ .content.content_apple {
    border-right: 2px solid rgba(252, 196, 75, 0.3);
}
#left-zone .list li.item input[type="radio"] ~ .content.content_orange{
    border-right: 2px solid rgba(242, 118, 96, 0.3);
}
select.form-control:not([size]):not([multiple]) {
    height: calc(3.25rem + 2px);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.domain-form-control::-webkit-input-placeholder { /* Edge */
    color: #727b82;
    text-align: left;
    font-size: 14px;
  }
  
  .domain-form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #727b82;
    text-align: left;
    font-size: 14px;
  }
  
  .domain-form-control::placeholder {
    color: #727b82;
    text-align: left;
    font-size: 14px;
  }
/* file load input */
 .file-btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    background-color: #fab00f;
    border-color:#fab00f;
    color: #fff;
     padding: 6px

}
.file-btn:hover {
  background-color: #f7b82f;
    transition: 1.5s;
}
/* payment radio method style */
#form-id {
     padding: 12px;
    border-bottom: 1px solid #cccccc;   
}
/*----Form of payment method ---*/
.form fieldset {
  border: none;
  padding: 0;
  padding: 10px 0;
  position: relative;
  clear: both;
}
.form fieldset.fieldset-expiration {

  width: 60%;
}
.form fieldset.fieldset-expiration .select {
  width: 100px;
  margin-right: 4px;
}
.form fieldset.fieldset-ccv {
  clear: none;
  float: right;
  width: 86px;
}
.form fieldset label {
  text-align: right;
  display: block;
  color: #6c757d;
}
.form fieldset input, .form fieldset .select {
  width: 100%;
  height: 38px;
  background: #fff;
  color: #6c757d;
  padding: 10px;
  border-radius: 5px;
  font-size: 15px;
  outline: none !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.form fieldset input.input-cart-number, .form fieldset .select.input-cart-number {
  width: 100px;
  display: inline-block;
  margin-right: 0px;
}

.form fieldset .select {
  position: relative;
}
.form fieldset .select select {
  appearance: none;
  position: absolute;
  padding: 0;
  border: none;
  width: 100%;
  outline: none !important;
  top: 6px;
  left: 0px;
  background: none; 
}
.form fieldset .select select :-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.form button .fa {
  margin-right: 6px;
}
/* inpute file load style*/
.input-ghost{
    display: none
}
/* add service div */
.FeatureUserBox ,.FeatureExrtaSpcaeBox ,.FeatureCompanyBox{
    display: none;
    margin-top: 2px;
    padding: 5px; 
}
/* design button style */
.btn-send{
    padding: 0;
    background-color: transparent
}
/* design close service button */
#close-service1{
    color:#cd6161;
}
/*
#close-service2,#close-service3{
    color:#cd6161;
    
}*/
/*========================== End  Payment Steps  Page=====================*/ 
/*=================== Start Create Account Style page ===============*/
.help-block.with-errors{
    top: 37%;
    position: absolute;
    color: #f2755f;
    text-align: right;

}
/*=================== End Create Account Style page ==========*
/*=================== start free demo trial page  Style ===============*/
.free-demo-box{
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);

}
.demo_banner_area:before {
    width: 100%;
    background: url("../../images/img/trydemo/demo.png") no-repeat scroll center bottom/cover;
}
.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
select.form-control.selectpicker{
    height: 40px !important;
}
.service-select{
    border-top-right-radius: 3px!important;
    border-bottom-right-radius: 3px!important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
select::-webkit-scrollbar {
    width: 0.4em !important;
  }
  select::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)!important;
  }
   
  select::-webkit-scrollbar-thumb {
    background-color:rgba(21, 21, 57, 0.6)!important;
    outline: 1px solid #5ccaf2!important;
    border-radius:5px !important;
  }
.iti__country-list::-webkit-scrollbar {
    width: 0.4em !important;
  }
.siti__country-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)!important;
  }
   
 .iti__country-list::-webkit-scrollbar-thumb {
    background-color:rgba(21, 21, 57, 0.6)!important;
    outline: 1px solid #5ccaf2!important;
    border-radius:5px !important;
  }
/* desgin pop up user name and password demo */
.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; 
  left:0;
  right: 0;
  background:rgba(16, 47, 107, 0.55);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.modal-wrapper.open{
  opacity:1;
  visibility:visible;
}
.model-show-info{
  width:100%;
  height:400px;
  display:block;
  margin:auto;
  position:relative;
  top:50%;
  left:50%;
  background:#fff;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal{
  margin-top:-200px;
  opacity:1;
}
.header-demo_user-info{
    position: absolute;
    width: 100%;
    padding: 2em 5%;
    overflow: hidden;
    background: #5ccaf2;
    right: 0;
    left: 0;
}
.content-demo_user-info {
    position: relative;
    top: 25%;
}
.btn-close-demo{
  width:32px;
  height:32px;
  display:block;
  float:left;
}
.btn-close-demo::before, .btn-close-demo::after{
  content:'';
  width:32px;
  height:6px;
display:block;
  background:#fff;
}
.btn-close-demo::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}
.btn-close-demo::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
/*=========================== end free demo trial page  Style ========================*/
/*================================= Start Price and Package Page Style ===============*/
.slider_area {
    background-image: -moz-linear-gradient(90deg, #0a2896 0%, #151539 85%);
    background-image: -webkit-linear-gradient(90deg, #0a2896 0%, #151539 85%);
    background-image: -ms-linear-gradient(90deg, #0a2896 0%, #151539 85%);
    background-size: cover;
    background-position: 50%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    height: auto;
    margin: -1px;
}
 .priceing-introduction .col-md-5{
    margin-top: 28%;
    
}
 .slider_area .bottom_shoape {
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: -1;
    width: 100%;
}
 .justify-content-between {
    justify-content: space-between !important;
}
 .package_pricing_app_name{
    width: 60%
}
.app_name  h6{
     font-size:14px;
    
}
 .app_name p{
     font-size: 0.85em;
    color: #6c757d;
    margin-bottom: 0rem !important;
}
 .package_pricing_app_checkbox{
    width: 16px;
    height: 16px;
    border: 1px solid #dee2e6;
    border-radius: 100%;
    color: transparent;
    font-size: 12px;
    line-height: 1.3;
 }
/*desgin check sign */
.package_pricing_app {
    position: relative;
}
.package_pricing_input {
    position: absolute;
    left: 4px;
    top: 0;
}
.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.15s ease-out 0s;
  background: #fff;
  width: 16px;
  height: 16px;
  border: 1px solid #dee2e6;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}

.option-input:checked {
    background: #5ccaf2;
    border:1px solid #5ccaf2;
}
.option-input:checked::before {
    height: 20px;
    width: 14px;
    color: #fff;
    position: absolute;
    content: '✔';
    display: inline-block;
    font-size: 12px;
    text-align: center;
    line-height: 15px;
}
.option-input.radio ,.option-input.radio::after {
    border-radius: 50%;
}
.package_pricing_related_app{
    bottom: 0;
    left: 4px;
    position: absolute;
}
/* desgin read more button */
.btn-read-app a:hover{
    box-shadow: 1px 2px 3px 0px #ccc;
    transition: 0.5s 
}
/* desgin price board */
.price_board{
    height: 308px;
    overflow-y: scroll;
    max-width: 385px;
    box-shadow: -40px 40px 160px 0 rgba(0, 0, 0, 0.08), 8px 8px 15px 0 rgba(120, 120, 120, 0.04), -3px 3px 30px 0 rgba(0, 0, 0, 0.04)!important;
    z-index: 1;
    color: gray;
    text-align: right;
    border: 1px solid #5ccaf2;
    font-size: 0.9em;
    
}
  /* width */
  .price_board::-webkit-scrollbar {
    width: 5px;
  }
  /* Track */
  .price_board::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #eee; 
    border-radius: 4px;
  }
  /* Handle */
  .price_board::-webkit-scrollbar-thumb {
    background: rgba(21, 21, 57, 0.5); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  .price_board::-webkit-scrollbar-thumb:hover {
    background:  rgba(21, 21, 57, 0.7); 
    transition:0.6s;
  }
.tab-pay{
     margin-bottom: 5px !important;   
}
 .tab-pay a{
     padding: 12px  
}
.tab-pay a:hover{
     color: #151539
}
.tab-yearly {
    border: 0
}
.pay-box{
    color: #fff;
    background-color:#5ccaf2;
    border-bottom: 1px solid #5ccaf2;
    margin-top: -2px;
 
}
.tab-yearly .active{
        border-color: #5ccaf2 #5ccaf2 #fff;
}
.border-top-1{
    border-top: 1px solid #dbdbdb
}
/* */
.selected-trial-app ul {
   padding-right: 0
    
}
.selected-trial-app ul li {
    padding: 12px 0px;
    
}
.selected-trial-app ul li >img{   
    width: 10%;
}
/* desgin add more user button in price & package box */
.add-user-pricing{
    
    color: #5ccaf2;
    padding-left: 10px;
}
.precing-user-account-add{
    width: 40%;
    line-height: 1.2!important;
}
.trial-form-button a{
    border-radius: 4px;
    background: #17a2b8;
    color: #eee;
}
.trial-form-button a:hover,.trial-form-button a:focus{
    border-radius: 4px;
    color: #17a2b8 !important;
    border: 2px solid  #17a2b8 !important;
    background: transparent;  
}
/* End Price and Package Page Style */
/*  start around page */
.slider_area_around{
    background: -moz-linear-gradient(90deg, #0a2896 0%,#106bca 15%, #151539 85%);
    background: -webkit-linear-gradient(90deg, #0a2896 0%,#106bca 15%, #151539 85%);
    background: linear-gradient(90deg, #0a2896 0%,#106bca 15%, #151539 85%);
}
.hidescroll{
    position: fixed
}
.around-card-header{
    color: #495057;
    font-size: 16px;
}
.modal-video-dialog{
      max-width: 60%;
      margin: 30px auto;
  }
 .modal-video-contianer{
  position:relative;
  padding:0px !important;
}
.close-video {
    border: none;
    background: transparent;
    box-shadow: 0px 0px transparent;
    position: absolute;
    right: -30px;
    top: -15px;
    z-index: 999;
    font-size: 3.2rem;
    font-weight: normal;
    color: #f2755f;
    font-weight: bold;
    opacity: 1;
}
.close-video:hover{
    box-shadow: 0px 0px transparent;
}
.card-video{
     box-shadow: 2px 0px 6px 1px rgba(0, 0, 0, 0.2);
}
.card-link-app{
    position: relative;
}
.share-toggle {
    /* padding: 13px; */
    font-size: 18px;
    left: 10px;
    position: absolute;
    top: -20px;
    border-radius: 50%;
    background-color: #5ecaf2;
    border-color: #5ecaf2;
}

/*ZoomIn Hover Effect*/
    .hover-zoomin a {
      display: block;
      position: relative;
      overflow: hidden;
    }
    .hover-zoomin img {
      width: 100%;
      height: auto;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
    .hover-zoomin:hover img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
    }



/* card vedio animated  */


 .box-video::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url("../../images/img/around-raq/youtube-logo.png")  no-repeat center/15% ;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0s;
    opacity: 0.8;
    cursor: pointer;
}
.box12{
    position:relative;
    text-align: center;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    overflow: hidden;
}
.box13{
    height: 275px;
    box-shadow: 0px 2px 4px 0px rgba(12, 0, 46, 0.04)
}
.box12 .box-content,.box12:after{
    position:absolute;
    transition:all .3s ease 0s
}
.box12:after{
    content:"";
    width:65%;
    background:rgba(21, 21, 57, 0.8);
    padding-bottom:65%;opacity:0;
    top:50%;left:50%;
    transform:rotate(0) translate(-50%,-50%);
    transform-origin:0 0 0
}
.box12:hover:after{
    transform:rotate(-45deg) translate(-50%,-50%);
    opacity:1
}
.box12 img{
    width:100%;
    height:auto
}
.box12 .box-content{
    width:100%;
    top:35%;
    left:0;
    opacity:0;
    z-index:1
}
.box12:hover .box-content{
    opacity:1}
.box12 .title{
    padding:10px 0;
    color:#fff;
    margin:0;
    border-top:2px solid #fff;
    border-bottom:2px solid #fff
}
.box12 .icon{
    padding:0;
    margin:12px 0 0;
    list-style:none
}
.box12 .icon li a {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    border: 1px solid #fff;
    font-size: 18px;
    color: #fff;
    margin-right: 10px;
    transition: all .3s ease 0s;
}
.box12 .icon li a:hover{
    border-radius:0
}
 .box12 .icon li, .box12 .title {
    display: inline-block;
}
.icon li, .box12 .title {
    display: inline-block;
}
/*==================  end around page =================*/
/*=================  start advantage page ==============*/
.advantage-introduction{
       background-image: url("../../images/img/advantage/2397.jpg");
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       max-width: 100%;
       margin: 0 auto;    
       position: relative; 
       background-attachment: fixed;
}
.advantage-introduction span ,
.advantage-introduction p {
    padding: 4%;
}
.advantage-introduction p {
    color: #5ccaf2;
}
.feature-area-page {
    margin-top: -62px;
}
.main-feature .title {
    background: rgba(255,255,255,.15);
    padding: 9px 0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.main-feature:hover .title {
    background:#5ccaf2;
}
.main-feature .main-feature-p {
    height: 268px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 10px 30px 0 rgba(153,153,153,.1);
}
.about-us-thumbnail {
    position: relative;
    z-index: 1;
    width: 100%;
   /* padding: 25px;*/
}
.about-us-thumbnail img {
    width: 100%;
}
.uza-about-us-area{
    margin-bottom: 80px
}
.uza-video-area {
    position: absolute;
    top: 50%;
    left: -35px;
    z-index: 99;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.uza-video-area .video-play-btn {
    -webkit-transform: scale(.93);
    -ms-transform: scale(.93);
    transform: scale(.93);
}
.uza-video-area .video-play-btn {
    display: inline-block;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background-color: #5ccaf2;
    color: #fff;
    line-height: 70px;
    text-align: center;
    font-size: 24px;
}
#mona_modelTab {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
}
.about-us-content {
    position: relative;
    z-index: 1;
}
.about-tab-area {
    position: relative;
    z-index: 1;
}
.about-tab-area .nav-tabs .nav-link {
    position: relative;
    z-index: 1;
    padding: 0 0 15px;
    border: none;
    margin-left: 30px;
    background-color: transparent;
}
.about-tab-area .nav-tabs .nav-link.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    background-color:#5ccaf2 ;
    width: 100%;
    height: 2px;
}

.uza-btn:focus, .uza-btn {
    -webkit-box-shadow: 0 6px 50px 8px rgba(21,131,233,.15);
    box-shadow: 0 6px 50px 8px rgba(21,131,233,.15);
    background-color: #1583e9;
    color: #fff;
}
.about-tab-content-list{
    margin-right: 29px;
}
.about-tab-content-list li > i{
        color: #4ec6a3;
}
.what-feature-page{
      background-image: url("../../images/img/advantage/banner-bg.webp");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      max-width: 100%;
      margin: 0 auto;    
      position: relative; 
}
.secondry-feature{
    margin-left: 5%;
    margin-right: 5%;
}
.folded-corner:hover .text{
	visibility: visible;
	color: #151539;
}
.Services-tab{
	margin-top:20px;
}
/*nav link items*/
.folded-corner{
  padding: 25px 25px;
  position: relative;
  font-size: 90%;
  text-decoration: none;
  color: #ccc; 
  background: transparent;
  transition: all ease .5s;
  border: 1px solid #fff ;
}
.folded-corner:hover{
 background-color:  rgba(92, 202, 242,.9);
}
/* paper fold corner */
.folded-corner:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0px 0px 0;
  border-color: #ddd #151539;
  transition: all ease .3s;
}
/*on li hover make paper fold larger*/
.folded-corner:hover:before {
  background-color:#151539;
  border-width: 0 50px 50px 0;
  border-color: #eee #fff;
}
.service_tab_feature{
    height: 100%;
    min-height: 100%;
	background-color:transparent;
}
.service_tab_feature:hover .icon-image{
    transform: rotate(360deg) scale(1.4);
}
.text_service_tab_feature h3{
    font-size: 1.4rem
}
.icon-image{
    width: 40%;
	color: #fff;
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    font-size-adjust: none;
    font-stretch: normal;
    -moz-font-feature-settings: normal;
    font-feature-settings: normal;
    -moz-font-language-override: normal;
    font-language-override: normal;
    text-rendering: auto;
    transition: all .65s linear 0s;
    text-align: center;
    transition: all 1s cubic-bezier(.99,.82,.11,1.41);
}
/* statistics */
.projectFactsWrap{
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  flex-wrap: wrap;
}
#projectFacts .fullWidth{
  padding: 0;
}
.projectFactsWrap .item{
  width: 25%;
  height: 100%;
  padding: 50px 0px;
  text-align: center;
}

.projectFactsWrap .item-statistics p.number{
    color:#735df2;
    font-size: 60px;
    padding:25px 18px;
    font-weight: bold;
    margin: auto;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border: 6px solid #735df2;
    background-repeat: no-repeat;
    background-position: center 25px;
    position: relative;
    text-align: center;
}
.statistics-num-blue{
    color:#17a2b8 !important;
    border: 6px solid #17a2b8 !important;
}
.statistics-num-yellow{
    color:#ffc107 !important;
    border: 6px solid #ffc107  !important;
}
.statistics-num-orange{
    color:#f2755f !important;
    border: 6px solid #f2755f !important;
}
.projectFactsWrap .item-statistics p{
  color: #735df2;
  font-size: 18px;
  margin: 0;
  padding: 10px;
}
.statistics-pargraph-blue{
    color:#17a2b8 !important;  
}
.statistics-pargraph-yellow{
    color:#ffc107 !important;
}
.statistics-pargraph-orange{
    color:#f2755f !important; 
}
#number1{
    background: url(../../images/img/advantage/item-statistics/search.png);
}
.projectFactsWrap .item-statistics span{
  width: 60px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
}
.projectFactsWrap .item-statistics i{
  vertical-align: middle;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
}
.projectFactsWrap .item-statistics p.number:hover i, 
.projectFactsWrap .item-statistics  p.number:hover p{
  color:#5ccaf2;
  border: 6px solid #5ccaf2;
  transition: 2s;
}
.projectFactsWrap .item-statistics :hover span{
  background: white;
}
.tab-content-text ul {
    color: #a0a4a7; 
}
.tab-content-text ul li{
    line-height: 3;
}
/*===============  end advantage  page =================*/

/*=============== start support   page ==================*/
/* introduction*/
.section-heading {
    margin-top: 10%;
}
.support-introduction{
       background-image: url("../../images/img/support/future.PNG");
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       max-width: 100%;
       margin: 0 auto;    
       position: relative; 
       background-attachment: fixed;
}
.support-gradient-overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 47%, #151539 80%); 
  opacity: 0.8;
}
/* guidline user section*/
.bg-holder img{
        animation: pulse 2s linear infinite;
}
.sidebar-item-wrapper{
    border:1px solid #f7f4e9;
}
.sidebar-item-wrapper:hover {
    border: 1px solid #d8cfad;
    transition: 1.5s;
}
/* contact us*/
.about-tab-area .nav-tabs .nav-link h4{
    color: #004987;
} 
.myaccordion .btn-gray{
    color: #6d80a8;
}
.contact-section{
     background-image: url("../../images/img/contact-us/sendmessage.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     background-attachment: fixed;
     max-width: 100%;
     margin: 0 auto; 
     position: relative;
     box-shadow: inset 2px 1px 10px 2px #000;
}
.contact-form-section{ 
    padding: 45px 4% 45px 4%;
    background-color: #ffffff;
    background-position: center center;
    box-shadow: 0 15px 25px -7px rgba(0,0,0,0.09), 0 -12px 10px -10px rgba(0,0,0,0.04);
}
#heading-contact h1{
    margin: 0px 0px 15px 0px;
    color: #ffff
}
#text-contact-block {
    font-size: 14px;
    color: #c6c6c6;
    margin: 0px 0px 40px 0px;
}
.img-contact-block{
    transform: rotate(-100deg);
    width: 8%;
    position: relative;
    top: 14px; 
}
.phone-text-support{
  position: relative;
    color: #ffffff;
    top: 10px;
}
.phone-number-support{
    color: #5dcaf2;
    padding-right: 120px;
}
#divider{
    margin: 25px 0px 25px 0px!important;
}

.divider-content-none .divider-line {
    border-top-width: 1px;
    border-top-color: rgba(198, 198, 198, 0.3);
    border-top-style: solid;
}
/* map*/
.mapouter{
       margin-right: -15px;
    position: relative;
    text-align: right;
    height: 507px;
    width: 100%;
}
.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:507px;
    width: 102%;
}
/* OUR TEAM workers */
.team {
    text-align: center
}
.section-title {
    text-align: center;
    font-size: 40px;
    position: relative;
    margin-bottom: 40px;
    margin-top: 0
}
.team .team-item {
    text-align: left;
    margin-bottom: 30px
}
.team .team-item figure {
    position: relative;
    overflow: hidden
}
.team .team-item figure figcaption {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(21, 21, 57, 0.7);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease
}
.team .team-item figure figcaption .info {
    position: absolute;
    color: #fff;
    float: right;
    bottom: 10px;
    right: 20px;
    margin-left: -80px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease
}
.team .team-item figure:hover figcaption {
    opacity: 1
}
.team .team-item figure:hover figcaption .info {
    margin-left: 0
}
.team .team-item figure figcaption .info h3 {
    font-size: 20px;
    color: #eee;
}
.team .team-item figure figcaption .info p {
    color: #fff
}
.team .team-item figure:hover figcaption .social {
    margin-bottom: 0
}
.team .team-item figure figcaption .social {
    position: absolute;
    float: left;
    bottom: 28px;
    margin-bottom: -80px;
    left: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease
}
.team .team-item figure figcaption .social a {
    color: #fff;
    font-size: 15px;
    width: 36px;
    height: 36px;
    background:#5ccaf2;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    border-radius: 2px
}
.team .team-item figure figcaption .social a:hover {
    transform: scale(1.1);
}
.support-map-poistion{
    position: absolute; 
    cursor: pointer; 
    left: 944px;
    top: 62%;
}
/*================= end support   page ==================*/
/*==============Start user guild line page ===============*/
.introduction-UGL-section{
    position: relative;
    margin-top: 8%;
}
.guildLine-interface{
    /* margin-left: -235px;*/
     margin-left: -45px;
     padding-top: 67px;
     position: relative;
}
.horizon
{  position: absolute;
    bottom: 0;
    left: 0;
    line-height: 0;
    z-index: 0;
    width: 3000px;
}
.middle
{  position:absolute;
    bottom: 0;
    left: 0;
   /* z-index: 1;*/
    line-height: 0;
    width: 4500px;
}
.dot_shap {
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(21, 21, 57, 0.02);
    border-radius: 50%;
    z-index: -1;
}
.dot_shap.one {
    width: 640px;
    height: 640px;
    top: -140px;
    right: 400px;

}
.dot_shap.two {
    width: 670px;
    height: 670px;
    top: -147px;
    right: -64px;
  
}
.dot_shap.three {
    width: 640px;
    height: 640px;
    top:182px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -488px;
}
/* first div */
 /* main header */
.user-guildLine-text{
    white-space: pre-line;
    white-space: -moz-pre-line;
    white-space: -pre-pre-line;
    white-space: -o-pre-line;
    word-wrap: break-word;
    margin-right: 17%;
    }
.main-box-header{
    position: relative;
    padding:  0;
}
.main-box-header .box-header{
    width:145%;
    margin: 0 auto 0px;
    position: relative;
}
.main-box-header.box-header:after{
    content: '';
     background: linear-gradient(-65deg,#0D70B4 40%,#fff 41%,#fff 60%, #0D70B4 61%);
    height: 173px;
    width: 173px;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 88px;
    top: 50%;
    z-index: 0;
}
.main-box-header .box-header-content{
    color: #fff;
    background-color: #0D70B4; 
    padding: 22px 122px 15px 0px;
    margin: 0 auto; 
    border-radius: 40px;
    display: block;
}
.main-box-header .box-header-icon{
    color: #f9f9f9;
    background-color:#5ccaf2;
    height: 110px;
    width: 110px;
    border: 10px solid #f9f9f9;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 37px;
    top: 40%;
    z-index: 1;
}
.main-box-header .box-header-icon i{
   font-size: 3.6rem;
    margin: auto;
    line-height: 1.5;
    padding: 0; 
}
.main-box-header .title{
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: #f9f9f9;
}
 /*  movement btn for steps  */
.at-button {
  z-index: 1;
  position: absolute;
  background: linear-gradient(90deg, #5ccaf2 20%, #08a5ec 80%) !important;
  width: 8px;
  height: 8px;
  padding: 5px;
  border-radius: 100%;
  box-sizing: border-box;
  -webkit-animation: at-ripple 0.6s linear infinite;
  animation: at-ripple 0.6s linear infinite;
    color: red
}
.at-button:hover i {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.at-button i {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: 0.3s ease;
}

.at-UGL-btn1 {
 right: 18%;
    top: 15%;
}
.at-UGL-btn2{
    right: 26%;
    top: 15%;
}
.at-UGL-btn3{
    right: 81%;
    top: 17%;
}
.at-UGL-btn4{
    right: 68%;
      top: 22%;
}
.at-UGL-btn5{
    right: 22%;
    top: 45%;
}

@-webkit-keyframes at-ripple {
  0% {
    box-shadow: 0 4px 10px rgba(92, 202, 242, 0.1), 0 0 0 0 rgba(92, 202, 242, 0.2), 0 0 0 7px rgba(92, 202, 242, 0.1);
  }
  100% {
    box-shadow: 0 4px 10px rgba(92, 202, 242, 0.1), 0 0 0 5px rgba(92, 202, 242, 0.2), 0 0 0 7px rgba(92, 202, 242, 0.1);
  }
}
@keyframes at-ripple {
  0% {
    box-shadow: 0 4px 10px rgba(92, 202, 242, 0.1), 0 0 0 0 rgba(92, 202, 242, 0.2), 0 0 0 7px rgba(92, 202, 242, 0.1);
  }
  100% {
    box-shadow: 0 4px 10px rgba(92, 202, 242, 0.1), 0 0 0 5px rgba(92, 202, 242, 0.2), 0 0 0 7px rgba(92, 202, 242, 0.1);
  }
}
/* steps style */
.main-timeline{
        display: flex;
        margin: 12% 0;
}        
.main-timeline:before,
.main-timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline .timeline{
    padding: 0;
}
.main-timeline .timeline-inner{
    text-align: center;
    margin: 20px 20px 35px 35px;
    position: relative;
}
.main-timeline .timeline-inner:after{
    content: "";
    width: 106%;
    height: 5px;
    background: #555;
    position: absolute;
    bottom: 0;
    right: 100%;
}
.main-timeline .timeline:last-child .timeline-inner:after{
    width: 0;
}
.main-timeline .year{
    background: #735df2;
    padding: 5px 0;
    border-radius: 30px 0 30px 0;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    z-index: 1;
    position: relative;
}
.main-timeline .year:before{
    content: "";
    position: absolute;
    top: -19px;
    right: 0;
    border: 10px solid transparent;
    border-bottom: 10px solid #735df2;
    border-right: 10px solid #735df2;
}
.main-timeline .year:after{
    content: "";
    width: 25px;
    height: 19px;
    border-radius: 0 0 20px 0;
    background: #fff;
    position: absolute;
    right: 1px;
    top: -19px;
}
.main-timeline .timeline-content{
    padding: 20% 10px 25% 10px;
    border-left: 3px solid #735df2;
    position: relative;
     height: 311px;
}
.main-timeline .timeline-content:before{
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    border: 10px solid transparent;
    border-top: 10px solid #735df2;
    border-left: 10px solid #735df2;
}
.main-timeline .timeline-content:after{
    content: "";
    width: 25px;
    height: 19px;
    border-radius: 20px 0 0 0;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
  .main-timeline .timeline-icon {
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #735df2;
    padding: 13px;
    text-align: center;
    position: absolute;
    left: 0%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    /* line-height: 65px; */
    background: #fff;
    font-size: 35px;
    color: #555;
    z-index: 1; 
}
.main-timeline .timeline-icon i {
        font-size: 35px;
        display: block;
        z-index: 1;
}
.main-timeline .description{
    font-size: 14px;
    color: #333;
} 
.main-timeline .timeline:nth-child(2n) .year{
    background:#17a2b8;
}
.main-timeline .timeline:nth-child(2n) .year:before{
    border-bottom-color:#17a2b8;
    border-right-color:#17a2b8;
}
.main-timeline .timeline:nth-child(2n) .timeline-content{
    border-left-color: #17a2b8;
}
.main-timeline .timeline:nth-child(2n) .timeline-content:before{
    border-top-color: #17a2b8;
    border-left-color: #17a2b8;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{
    border-color: #17a2b8;
}
.main-timeline .timeline:nth-child(3n) .year{
    background: #ffc107;
}
.main-timeline .timeline:nth-child(3n) .year:before{
    border-bottom-color: #ffc107;
    border-right-color: #ffc107;
}
.main-timeline .timeline:nth-child(3n) .timeline-content{
    border-left-color: #ffc107;
}
.main-timeline .timeline:nth-child(3n) .timeline-content:before{
    border-top-color: #ffc107;
    border-left-color: #ffc107;
}
.main-timeline .timeline:nth-child(3n) .timeline-icon{
    border-color: #ffc107;
}  
.main-timeline .timeline:nth-child(4n) .year{
    background: #f2755f;
}
.main-timeline .timeline:nth-child(4n) .year:before{
    border-bottom-color: #f2755f;
    border-right-color: #f2755f;
}
.main-timeline .timeline:nth-child(4n) .timeline-content{
    border-left-color: #f2755f;
}
.main-timeline .timeline:nth-child(4n) .timeline-content:before{
    border-top-color: #f2755f;
    border-left-color: #f2755f;
}
.main-timeline .timeline:nth-child(4n) .timeline-icon{
    border-color: #f2755f;
}
/* steps desgin */
   .signle_services {
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 0px 60px 0px rgba(85, 128, 255, 0.05);
    border-radius: 5px;
    padding:55px 15px 55px 15px;
    position: relative;
    margin: 0px 15px 50px;
    background-color: #fff;
}
    .signle_services:hover {
    box-shadow: 5px 9px 60px 0px rgba(85, 128, 255, 0.2);
    }
    .signle_services .services_icon {
    position: absolute;
    right: -32.5px;
    top: 43px;
    height: 65px;
    width: 65px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0px 0px 40px 0px rgba(85, 128, 255, 0.2);
}
    .signle_services .services_icon i{
        margin: 12px auto;
        font-size: 35px;
    }
  .signle_services .services_icon_4 {
    background:#735df2;
}
  .signle_services .services_icon_5 {
    background: #17a2b8;
}
  .signle_services .services_icon_6 {
    background:  #ffc107
}
   .signle_services h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 16px;
}
    .signle_services p {
    font-size: 16px;
    margin: 0;
}
    /* animated style */
.box21{
    text-align:center;
    position:relative;
    overflow: hidden
    }
.box21:after,.box21:before{
    content:"";
    width:2px;
    height:2px;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0)
    }
    .box21:after{
        background:rgba(21,21, 57, 0.3);
    }
   .box21:before{
        background:rgba(21,21, 57, 0.6);
    }
.box21:hover:after,.box21:hover:before{
    -webkit-transform:scale(400);
    -moz-transform:scale(400);
    -ms-transform:scale(400);
    -o-transform:scale(400);
    transform:scale(400)
    }
.box21:before{
    -o-transition:all .5s linear .3s;
    -moz-transition:all .5s linear .3s;
    -ms-transition:all .5s linear .3s;
    -webkit-transition:all .5s linear .3s;
    transition:all .5s linear .3s
    }
.box21:hover:before{
    -moz-transition-delay:0s;
    -webkit-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s
    }
.box21:after{
    -o-transition:all .5s linear .6s;
    -moz-transition:all .5s linear .6s;
    -ms-transition:all .5s linear .6s;
    -webkit-transition:all .5s linear .6s;
    transition:all .5s linear .6s
    }
.box21:hover:after{
    -moz-transition-delay:.2s;
    -webkit-transition-delay:.2s;
    -o-transition-delay:.2s;
    -ms-transition-delay:.2s;
    transition-delay:.2s
    }
.box21 .box-content{
    width:100%;
    height:100%;
    position:absolute;
    top:35%;
    left:0;
    color:#fff;
    font-size: 50px;
    padding-top:25px;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    -ms-transition:all .3s linear 0s;
    -o-transition:all .3s linear 0s;
    -webkit-transition:all .3s linear 0s;
    -moz-transition:all .3s linear 0s;
    transition:all .3s linear 0s;
    z-index:1;
    }
.box21:hover .box-content{

    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    -moz-transition-delay:.4s;
    -webkit-transition-delay:.4s;
    -o-transition-delay:.4s;
    -ms-transition-delay:.4s;
    transition-delay:.4s
    } 
.box21 .box-content i {
    font-size: 1.5rem;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 22px;
    text-rendering: auto;
    transition: all .65s linear 0s;
    text-align: center;
    transition: all 1s cubic-bezier(.99,.82,.11,1.41);

}
.box21 .box-content svg:hover{
     color: #fff;
    transform:rotate(360deg) scale(1.4)

}
 /* device section */
/* steps in mobile section*/
   .device-mockup.iphone6_plus, .device-mockup.iphone6_plus.portrait {
    padding-bottom: 201.76%;
}
   .device-mockup {
    position: relative;
    width: 100%;
    padding-bottom: 61.775701%;
}
   .device-mockup.iphone6_plus.portrait.white>.device, .device-mockup.iphone6_plus.white>.device {
    background-image: url("../../images/img/user-guildLine/iphone_6_plus_white_port.png");       
}
   .device-mockup>.device {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
} 
.device-mockup.iphone6_plus.portrait>.device>.screen, .device-mockup.iphone6_plus>.device>.screen {
    top: 11.58%;
    bottom: 11.58%;
    left: 5.97%;
    right: 5.97%;
}
.device-mockup>.device>.screen {
    position: absolute;
    top: 11.0438729%;
    bottom: 14.6747352%;
    left: 13.364486%;
    right: 13.364486%;
    overflow: hidden;
}
    
.device-mockup.iphone6_plus.portrait>.device>.button, .device-mockup.iphone6_plus>.device>.button {
    display: block;
    top: 89.9%;
    bottom: 3.2%;
    left: 43%;
    right: 43%;
}
.device-mockup>.device>.button {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    cursor: pointer;
}
 section.mobile-userGuildline .feature-item {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}
section.mobile-userGuildline .device-container,
section.mobile-userGuildline .chart-UGL-item {
    max-width: 325px;
    margin: 0 auto;
}
section.mobile-userGuildline .chart-UGL-item i {
    font-size: 30px;
}
section.mobile-userGuildline .chart-UGL-item h3 {
    font-size: 30px;
}
.text-muted {
    color: #6c757d!important;
}
section.mobile-userGuildline .chart-UGL-item {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}
section.mobile-userGuildline .device-container, section.features .feature-item {
    max-width: 325px;
    margin: 0 auto;
}
.icon-screen-smartphone:before {
    content: "\e010";
} 
.real-chart-ugl-section{ 
    padding-top: 8rem;
    padding-bottom: 8rem;
} 
#pie-chart{
    margin: 0 auto;
}
/*==============End user guild line  page ===============*/
/*============== Start all raq explain  video service page  ================*/
.video-service-section .video-service{
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 15px;
    position: relative;
}
.video-service-section .video-service:before{
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    border: 1px dashed #94a2ce;
    position: absolute;
    top: 25px;
    right: 13px;
}
.video-service-section .video-service:last-child:before{ 
    display: none;    
}
.video-service-section .video-service-heading{
    padding: 0;
    border: none;
    border-radius: 0;
    position: relative;
}
.video-service-section .video-service-title a{
    display: block;
    padding: 10px 30px 10px 60px;
    margin: 0;
    background: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1d3557;
    border-radius: 0;
    position: relative;
    
}
.video-service-section .video-service-title a:before,
.video-service-section .video-service-title a.collapsed:before{
    content: "";
    font-weight: 900;
    width: 40px;
    height: 100%;
    line-height: 40px;
    border: 0px solid #8a8ac3;
    border-radius: 3px;
    font-size: 17px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    right: -20px;
    transition: all 0.3s ease 0s;
    background-size: contain;  
    border-radius: 9px;  
    
}
.video-service-section  .crmIcon-video-service a:before,
.video-service-section  .crmIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/icon1.png") ;
    background-repeat: no-repeat;
}
.video-service-section  .salesIcon-video-service a:before,
.video-service-section  .salesIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/sale.svg") ;
    background-repeat: no-repeat; 
}      
.video-service-section  .purchaseIcon-video-service a:before,
.video-service-section  .purchaseIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/purchase.svg") ;
    background-repeat: no-repeat;  
}         
.video-service-section  .InventoryIcon-video-service a:before,
.video-service-section  .InventoryIcon-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/stock.svg") ;
    background-repeat: no-repeat;   
} 
.video-service-section  .posIcon-video-service a:before,
.video-service-section  .posIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/settings.svg") ;
    background-repeat: no-repeat; 
}   
.video-service-section  .accountIcon-video-service a:before,
.video-service-section  .accountIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/icon5.png") ;
    background-repeat: no-repeat; 
}      
.video-service-section  .assetIcon-video-service a:before,
.video-service-section  .assetIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/asset.svg") ;
    background-repeat: no-repeat; 
}
.video-service-section  .categoryIcon-video-service a:before,
.video-service-section  .categoryIcon-video-service a.collapsed:before{  
    background-image: url("../../images/ico/applcation-icons/icon2.png") ;
    background-repeat: no-repeat;
}
.video-service-section  .voucherIcon-video-service a:before,
.video-service-section  .voucherIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/voucher.svg") ;
    background-repeat: no-repeat;  
}      
.video-service-section  .partyIcon-video-service a:before,
.video-service-section  .partyIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/icon3.png") ;
    background-repeat: no-repeat;
}    
 .video-service-section  .hrIcon-video-service a:before,
.video-service-section  .hrIcon-video-service a.collapsed:before{  
    background-image: url("../../images/ico/applcation-icons/hr.svg") ;
    background-repeat: no-repeat; 
}       
 .video-service-section  .invoiceIcon-video-service a:before,
.video-service-section  .invoicetIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/invoice.svg") ;
    background-repeat: no-repeat; 
}       
.video-service-section .payrollIcon-video-service a:before,
.video-service-section .payrollIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/payroll.svg") ;
    background-repeat: no-repeat; 
}      
.video-service-section .holidayIcon-video-service a:before,
.video-service-section .holidayIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/icon22.png") ;
    background-repeat: no-repeat;
}                   
.video-service-section .reportIcon-video-service a:before,
.video-service-section .reportlsIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/settings.svg") ;
    background-repeat: no-repeat;
}  
.video-service-section .lunchIcon-video-service a:before,
.video-service-section .lunchIcon-video-service a.collapsed:before{
    background-image: url("../../images/ico/applcation-icons/lunch.svg") ;
    background-repeat: no-repeat; 
}       
.video-service-section .body-video-service{
    padding: 10px 30px 10px 30px;
    margin-left: 40px;
    background: #fff;
    border-top: none;
    font-size: 15px;
    color: #6f6f6f;
    line-height: 28px;
    letter-spacing: 1px; 
}
.body-video-service .row{
    padding: 18px 0px;
    border-bottom: 1px solid #EDEFF0;
    background: transparent;
}
.btn-cyan ,.btn-blue {
    color: #f9f9f9;
    padding: 6px 12px
}
.btn-cyan i ,.btn-blue i{
    margin: -3px 8px;
    font-size: 22px
}
.btn-cyan{
    background: #5ccaf2;
}
.btn-cyan:hover,.btn-cyan:focus{
    color: #f9f9f9;
}
.btn-blue{
    background: #1ba4d6;
}
.body-video-service a:hover{
     color: #f9f9f9;   
}
/*============== END all raq explain  video service page  ================*/
/*============== Start service and consulting page  =======================*/
.details-section{
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     max-width: 100%;
     margin: 0 auto;    
     position: relative;
     background-attachment: fixed;
}
.background-details-section{
    background-image: url("../../images/ico/around-icons/bg_14.svg");
}
.service_title h2{
    font-size: 40px;
    line-height: 55px;
    font-weight: 600;
    color: #2c2c51;
    margin-bottom: 15px;
}
.service_title span{
    display: block;
    font-weight: 300;
    color: #2c2c51;
}
.service_title p{
    font-weight: 400;
    color: #7b7b93;
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto;
}
.e-marketing-service,.email-service {
    width: auto
}
  .email-service{
    position: relative;
    left: 50%;
    }
.consulting-section{
    background-image: url("../../images/img/services/service-page/bg_10.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 100%;
    margin: 0 auto;    
    position: relative;
    background-attachment: fixed  
}
.consulting-intr{
       background: rgba(7, 3, 42, 0.7);
}
.consulting-need{
    background: rgba(14, 14, 53, 0.7);  
}
/* progress statstaic */
.progress{
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress .progress-left{
    left: 0;
}
.progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 2px;
    border-style: solid;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress .progress-right{
    right: 0;
}
.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 2px solid #ebebeb;
    font-size: 32px;
    line-height: 125px;
    text-align: center;
    position: absolute;
    top: 7.5%;
    left: 7.5%;
}
.progress.purple-pro .progress-bar{
    border-color: #735df2;
}
.progress.purple-pro .progress-value{
    color: #735df2;
}
.progress.purple-pro .progress-left .progress-bar{
    animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.blue-pro .progress-bar{
    border-color: #17a2b8;
}
.progress.blue-pro .progress-value{
    color: #17a2b8;
}
.progress.blue-pro .progress-left .progress-bar{
    animation: loading-3 1s linear forwards 1.8s;
}
.progress.yellow-pro .progress-bar{
    border-color: #ffc107;
}
.progress.yellow-pro .progress-value{
    color: #ffc107;
}
.progress.yellow-pro .progress-left .progress-bar{
    animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.orange-pro .progress-bar{
    border-color: #f2755f;
}
.progress.orange-pro .progress-value{
    color: #f2755f;
}
.progress.orange-pro .progress-left .progress-bar{
    animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
    }
}
@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
    }
}
@keyframes loading-5{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(126deg);
        transform: rotate(126deg);
    }
}
/* style for explain traning */
 .traning_content{
    text-align: right
}
.traning_content h3{
    font-size: 1.5rem;
}
.traning_content h5{
     padding-right: 18px;
    line-height: 1.5;
} 
.traning_content span{
     color:#4a65a3 
    }
.traning_content h4{
     color:  #495057
}
.traning_inner {
    max-width: 830px;
    margin: -30px auto 0px;
}
.traning_inner .traning_item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px 0px;
    position: relative;
}
.traning_inner .traning_item .traning_img {
    text-align: center;
}
.s_number{
         z-index: 1;
     }       
.traning_inner .traning_item .round {
    border-radius: 50%;
    background-color: white;
    -webkit-box-shadow: 0px 10px 30px 0px rgba(1, 1, 64, 0.08);
    box-shadow: 0px 10px 30px 0px rgba(1, 1, 64, 0.08);
    width: 80px;
    height: 80px;
    text-align: center;
    margin: 0 auto;
    font-size: 30px;
    color: #4a65a3;
    font-weight: 700;
    line-height: 80px;
}
.traning_inner .traning_item:first-child .line {
    top: 50%;
    height: 50%;
}
.traning_inner .traning_item .line {
    position: absolute;
    left: 50%;
    top: -55%;
    width: 0;
    height: 100%;
    border-right: 2px dashed #94a2ce;
    opacity: 0.3;
    margin-left: -1px;
    z-index: 0;
}
/* website service desgin */
.adv-website-Table{
    background-color: #fff;
    font-family: 'Lato', sans-serif;
    text-align: center;
    padding: 0 0 30px;
    margin: 25px 15px 0;
    border: 1px solid #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.3s;
}
.adv-website-Table:after{
    content: "";
    background:-webkit-linear-gradient(-140deg, #0a2896 10%, #151539 100%);
    background:linear-gradient(-140deg, #0a2896 10%, #151539 100%);
    height: 20px;
    margin: 0 auto;
    border-radius: 0 0 15px 15px;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0;
}
.adv-website-Table .adv-website-Table-header{
    margin: 0 0 25px;
    position: relative;
    z-index: 1;
}
.adv-website-Table .adv-website-Table-header:after{
    border-radius: 20px 0 0 20px;
    left: auto;
    right: 0;
}
.adv-website-Table .title{
    color: #fff;
    background:-webkit-linear-gradient(-140deg, #0a2896 10%, #151539 100%);
    background:linear-gradient(-140deg, #0a2896 10%, #151539 100%);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    width: 80%;
    padding: 16px 12px;
    margin: -25px auto 0;
    border-radius: 50px;
    position: relative;
}
.adv-website-Table ul li{
    line-height: 3;
}
.adv-website-Table.currency{
    font-size: 40px;
    vertical-align: top;
    margin: -10px 0 0;
    display: inline-block;
}
.adv-website-Table .amount{
    font-size: 50px;
    font-weight: 800;
    display: inline-block;
}
.adv-website-Table .adv-website-content{
    padding: 0 15px;
    margin: 15px 0 15px;
    list-style: none;
}
.adv-website-Table .adv-website-content li{
    color: #6c757d!important;
    font-size: 17px;
    line-height: 2.5;
    padding:0 40px 0 0px;
    margin-bottom: 10px;
    position: relative;
}
.adv-website-Table .adv-website-content li:last-child{ margin: 0; }
.adv-website-Table .adv-website-content li:before,
.adv-website-Table .adv-website-content li:after{
    content: "";
    background: linear-gradient(-140deg, #0a2896 10%, #151539 100%);
    width: 25px;
    height: 12px;
    border-radius: 20px;
    position: absolute;
    top: 15px;
    right: 0;
}
.adv-website-Table .adv-website-content li:after{
    background: #fff;
    width: 7px;
    height: 7px;
    top: 17px;
    right: 4px;
}
/*================= end service and consulting page  =========================*/
/*=============== Start solution page  ==============================*/
.banner-introduction-solution{
    background: -webkit-linear-gradient(90deg, #0a2896 0%, #151539 85%);
    color: #fff;
    padding-top: 5%;
}
.solution-introduction{
    background-image: url("../../images/img/solution/trent-szmolnik-BA50zDj2W98-unsplash.jpg");                  
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 100%;
    margin: 0 auto;    
    position: relative; 
    background-attachment: fixed;
}
.solution-header-introduction{
     font-size: 2.7em;
     margin: 4%;   
    }
.solution-text-introduction{ 
     font-size: 18px;
     color: #5ccaf2;
}
.solution-introduction-circle{
  /* background-image: url("../../images/img/solution/17860.jpg");                   */
  padding: 33%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 100%;
  margin: 2% auto;
  visibility: visible;
  animation-name: fadeInDown;
}
.solution-text{
 margin-top: 5%;
 font-size: 1.2rem;
}
.e-commerce-solution-section{
    background-image: url("../../images/img/solution/ecommerce-solution-bg.jpg");                  
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 100%;
    margin: 0 auto;    
    position: relative;
}
.manufacture-solution-section{
    background-image: url("../../images/img/solution/manufacture-solution-bg.jpg");                  
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 100%;
    margin: 0 auto;    
    position: relative;
}
.miantenace-point{
 color: #798189;
 line-height: 2.1;
     margin-bottom: 23%;
}
/*============= End solution page  ===============================*/
/*================ Start login raq system page ========================*/
.cd-svg-container {
    background-color:#151539;
    width: 100%;
    height: 100vh; 
}
.cd-svg-container svg {
    display: block;
    overflow: hidden;
    max-width: 100%;
    height: 100%;
}
/* Main Elements */
.st1 {
    fill: none;
    stroke: #5ccaf2;
    stroke-width: 5;
    stroke-miterlimit: 10;
}
.st4 {
    fill: none;
    stroke: #f9f9f9;
    stroke-width: 2.9658;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}   
.pathanim {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 3s forwards;
    -webkit-animation: dash 3s forwards;
    animation-timing-function: cubic-bezier(0.195, 0.010, 0.940, 1.030);
    -webkit-animation-timing-function: cubic-bezier(0.195, 0.010, 0.940, 1.030);
}
.pathanim.st4.one {
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.pathanim.st4.two {
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
.pathanim.st4.three {
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.pathanim.st4.four {
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
.pathanim.st4.five {
    animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.pathanim.st1 {
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes animLoadedHeader {
    to {
        transform: translate3d(0, -100%, 0);
    }
}
@-webkit-keyframes animLoadedHeader {
    to {
        transform: translate3d(0, -100%, 0);
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
.header-login{
    color: #585879;

}
.img-system-login{
    width: 8%;
}
.backRight {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background: #03A9F4;
}
.backLeft {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: #673AB7;
}
#back {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -999;
}
.canvas-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
#slideBox {
  width: 50%;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  margin-left: 50%;
  position: absolute;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.topLayer {
  width: 200%;
  height: 100%;
  position: relative;
  left: 0;
  left: -100%;
}
label {
  font-size: 0.8rem;
}
input {
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 1em;
  padding: 8px 1px;
  margin-top: 0.1em;
}
.left {
  width: 50%;
  height: 100%;
  overflow: scroll;
  background: #2C3034;
  left: 0;
  position: absolute;
}
.left label {
  color: #e3e3e3;
}
.left input {
  border-bottom: 1px solid #e3e3e3;
  color: #e3e3e3;
}
.left input:focus, .left input:active {
  border-color: #03A9F4;
  color: #03A9F4;
}
.left input:-webkit-autofill {
   box-shadow: 0 0 0 30px #2C3034 inset;
  -webkit-box-shadow: 0 0 0 30px #2C3034 inset;
  -webkit-text-fill-color: #e3e3e3;
}
.left a {
  color: #03A9F4;
}
.right {
  width: 50%;
  height: 100%;
  overflow: scroll;
  background: #f9f9f9;
  right: 0;
  position: absolute;
}
.right label {
  color: #212121;
}
.right input {
  border-bottom: 1px solid #212121;
}
.right input:focus, .right input:active {
  border-color: #673AB7;
}
.right input:-webkit-autofill {
   box-shadow: 0 0 0 30px #f9f9f9 inset;
  -webkit-box-shadow: 0 0 0 30px #f9f9f9 inset;
  -webkit-text-fill-color: #212121;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.content h2 {
  font-weight: 300;
  font-size: 2.6em;
  margin: 0.2em 0 0.1em;
}
.left .content h2 {
  color: #03A9F4;
}
.right .content h2 {
  color: #673AB7;
}
.form-element {
  margin: 1.6em 0;
}
.form-element.form-submit {
  margin: 1.6em 0 0;
}
.form-stack {
  display: flex;
  flex-direction: column;
}
.checkbox {
  -webkit-appearance: none;
  outline: none;
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
}
.checkbox:focus, .checkbox:checked:focus, .checkbox:active, .checkbox:checked:active {
  border-color: #03A9F4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.checkbox:checked {
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
.checkbox:checked:after {
  outline: none;
  content: '\2713';
  color: #03A9F4;
  font-size: 1.4em;
  font-weight: 900;
  position: absolute;
  top: -4px;
  left: 4px;
}
.form-checkbox {
  display: flex;
  align-items: center;
}
.form-checkbox label {
  margin: 0 6px 0;
  font-size: 0.72em;
}
button {
  padding: 0.8em 1.2em;
  margin: 0 10px 0 0;
  width: auto;
  font-weight: 600;
  font-size: 1em;
  color: #fff;
  line-height: 1em;
  letter-spacing: 0.6px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  transition: all 0.25s;
}
button.signup {
  background: #03A9F4;
}
button.login {
  background: #673AB7;
}
button.off {
  background: none;
  box-shadow: none;
  margin: 0;
}
button.off.signup {
  color: #03A9F4;
}
button.off.login {
  color: #673AB7;
}
button:focus, button:active, button:hover {
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}
button:focus.signup, button:active.signup, button:hover.signup {
  background: #0288D1;
}
button:focus.login, button:active.login, button:hover.login {
  background: #512DA8;
}
button:focus.off, button:active.off, button:hover.off {
  box-shadow: none;
}
button:focus.off.signup, button:active.off.signup, button:hover.off.signup {
  color: #03A9F4;
  background: #212121;
}
button:focus.off.login, button:active.off.login, button:hover.off.login {
  color: #512DA8;
  background: #e3e3e3;
}
/* time */
.login-time{
    position: relative          
} 
.top-time,.bottom-time{
    width: 280px;
    height:20px;
    position: absolute;
    background: #fff;
    left: 0;
    right: 0;
    margin: auto;
}
.bottom-time{
    bottom: -3px;
}
.top-time{
    top: -3px;
}
.TimeDisplay{
    margin: 35px auto;
    color: #ccc;
    width: 45%;
    border: 2px solid #ccc;
    font-size: 22px;
    font-family: 'Nova Slim', cursive;  
    padding: 12px 15px;
    
}
.TimeDisplay a{
	margin: auto 5px;
}
#HoursDisplay , #MinutesDislay , #secondDisplay{
   color:#676c85;
   font-size: 4rem;
   font-family: 'Open Sans', sans-serif;
}
.needs-validation {
        position: relative;
    }
.label-login{
        position: absolute;
        margin-right: 30px;
        background: #fff;
        padding: 5px 23px;
        color: #b3b2b2;
    }
.label1{
     top: -12px;   
    }
.label2{
     margin-top: -9px;   
    }
.forget-password a{
    color: #5ccaf2  
    }
.forget-password a:hover{
    text-decoration: underline
    }
/* ============== End login raq system page ==============================*/

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}
a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}
button:focus,
a:focus {
	outline: none;
}
.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}
.content {
	text-align: center;
}
/* Header */
.codrops-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
}
.codrops-header__title {
	font-size: 1rem;
	line-height: 1;
	font-weight: normal;
	margin: 0 1rem;
}
.info {
	display: block;
	margin: 1rem 0;
}
.github {
	display: block;
}
/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: flex;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	font-size: 0.85rem;
}
/*================ Start company profile page  ======================*/
.profile-page{
    background:linear-gradient(7deg,#010126 12%, #1f2746 75%, rgb(52, 44, 66) 77%);
}
.navbar-profile{
    z-index: 1;
}
.page-profile-header{
    background-image:url('../../images/img/companyprofile/profilebg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    height: 40vh;
    border: 0;
    display: flex;
    align-items: center;
}
.navbar-profile-socail-media {
    padding: 0
}
.navbar-profile-socail-media li> a>img{
  width:7%          
}
.img-raised {
    box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2);
}
.main-raised {
    margin: -60px 30px 0;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
.main-profile {
  
    z-index: 3;
}
.profile-page .profile {
    text-align: center;
}
.profile-page .profile img {
    max-width: 160px;
    width: 100%;
    margin: 0 auto;
    -webkit-transform: translate3d(0,-50%,0);
    -moz-transform: translate3d(0,-50%,0);
    -o-transform: translate3d(0,-50%,0);
    -ms-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}
.profile-page .profile .name-company-profile{
    margin-top: -80px;
}
.title-profile{
    margin-top: 30px;
    margin-bottom: 25px;
    min-height: 32px;
    color: #3C4858;
    font-weight: 700;
}
.profile-page .description {
    margin: 1.071rem auto 0;
    color: #999;
    font-weight: 300;
}
.trial-btn{
    font-size: 19px;
    padding: 4px 12px;
    border: 2px solid #fff;
    border-radius: 4px;
}
.trial-btn a{
    color: #fff
}
.trial-btn img{
    width: 16%;
    margin: 0 10px;
}
.trial-btn a:hover{
    color: #edeeee
}

.trial-btn :hover a{
    transform: scale(1.1)
}
.navbar-profile-socail-media li> a .company-profile-youtube{
    width:9%
}
/*tab */
:root{
    --pricingTable-yellow: #faac01 ;
    --pricingTable-purple: #735df2;
    --pricingTable-blue: #0192af;
}
.profileTable{

    background: #fff;
    border-bottom: 5px solid #faac01;
    text-align: center;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 1px 10px 2px #ccc;
    height: 415px;

}
.profileTable:before{
    content: "";
    width: 100%;
    height: 350px;
    background: #faac01;
    position: absolute;
    top: -150px;
    left: 0;
    transform: skewY(20deg);
}
.profileTable .profileTable-header{
    padding: 20px 40px 77px;
}
.profileTable .title{
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.profileTable .profileTable-value{
    display: inline-block;
    width: 170px;
    height: 110px;
    padding: 15px;
    border: 2px solid var(--pricingTable-yellow);
    border-top: none;
    border-bottom: none;
    position: relative;
    
}
.profileTable .profileTable-value img{
    width: 60%
}
.profileTable .profileTable-value:before,
.profileTable .profileTable-value:after{
    content: "";
    width: 121px;
    height: 121px;
    border: 3px solid var(--pricingTable-yellow);
    border-right: none;
    border-bottom: none;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
}
.profileTable .profileTable-value:after{
    border-top: none;
    border-left: none;
    border-bottom: 3px solid var(--pricingTable-yellow);
    border-right: 3px solid var(--pricingTable-yellow);
    top: auto;
    bottom: -60px;
}
.profileTable .value{
    width: 100%;
    height: 100%;
    background: #fff;
    border: 2px solid var(--pricingTable-yellow);
    border-top: none;
    border-bottom: none;
    color: var(--pricingTable-yellow);
    z-index: 1;
    position: relative;
}
.profileTable .value:before,
.profileTable .value:after{
    content: "";
    width: 97px;
    height: 97px;
    background: #fff;
    border: 3px solid var(--pricingTable-yellow);
    border-bottom: none;
    border-right: none;
    position: absolute;
    top: -48px;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
}
.profileTable .value:after{
    border-right: 3px solid var(--pricingTable-yellow);
    border-bottom: 3px solid var(--pricingTable-yellow);
    border-top: none;
    border-left: none;
    top: auto;
    bottom: -48px;
}
.profileTable .profileTable-content{
    padding: 60px 12px 40px ;
    text-align: center;
    transition: all 0.3s ease 0s;
}
.profileTable.purple{
    border-bottom-color: var(--pricingTable-purple);
}
.profileTable.purple:before{ 
    background: var(--pricingTable-purple);
}
.profileTable.purple .profileTable-value{
    border-left-color: var(--pricingTable-purple);
    border-right-color: var(--pricingTable-purple);
}
.profileTable.purple .profileTable-value:before{
    border-left-color: var(--pricingTable-purple);
    border-top-color: var(--pricingTable-purple);
}
.profileTable.purple .profileTable-value:after{
    border-right-color: var(--pricingTable-purple);
    border-bottom-color: var(--pricingTable-purple);
}
.profileTable.purple .value{
    border-left-color: var(--pricingTable-purple);
    border-right-color: var(--pricingTable-purple);
    color: var(--pricingTable-purple);
}
.profileTable.purple .value:before{
    border-left-color: var(--pricingTable-purple);
    border-top-color: var(--pricingTable-purple);
}
.profileTable.purple .value:after{
    border-right-color: var(--pricingTable-purple);
    border-bottom-color: var(--pricingTable-purple);
}     
.profileTable.blue{
    border-bottom-color: var(--pricingTable-blue);
}
.profileTable.blue:before{ 
    background: var(--pricingTable-blue); 
}
.profileTable.blue .profileTable-value{
    border-left-color: var(--pricingTable-blue);
    border-right-color: var(--pricingTable-blue);
}
.profileTable.blue .profileTable-value:before{
    border-left-color: var(--pricingTable-blue);
    border-top-color: var(--pricingTable-blue);
}
.profileTable.blue .profileTable-value:after{
    border-right-color: var(--pricingTable-blue);
    border-bottom-color: var(--pricingTable-blue);
}
.profileTable.blue .value{
    border-left-color: var(--pricingTable-blue);
    border-right-color: var(--pricingTable-blue);
    color: var(--pricingTable-blue);
}
.profileTable.blue .value:before{
    border-left-color: var(--pricingTable-blue);
    border-top-color: var(--pricingTable-blue);
}
.profileTable.blue .value:after{
    border-right-color: var(--pricingTable-blue);
    border-bottom-color: var(--pricingTable-blue);
}
/*=============== End company profile page  =================================*/
/*================ Start loading  page  =================*/
.prelaoding-section{
    background:radial-gradient(#175fb0, rgba(6, 15, 131, 0.96) 51%, #020213);
}
.start-prelaoding-section{
    background:  url(../../images/img/companyprofile/startnowbg.png) no-repeat scroll center bottom/cover;
    min-height: 100vh;
    max-width: 100%;
    margin: 0 auto;    
    position: relative;
    top: 0;
    left: 0;
}
.container-section {
width: 100%;
height: 100%;
}
.stop-watch-svg{
width: 70%;
height: 70%;
cursor:pointer;
visibility:hidden;
}
.prelaoding-text{
text-anchor: middle;
fill:#fff;
font-size: 50px;
letter-spacing: 0px;
}
/*preloading section Animation */
.startup{
   overflow: hidden;
   height: 100vh;
}
.container-prelaoding-screen {
width: 100%;
height: 100%;
z-index: 0;
}
.content{
  max-width: 100%;
  margin: 0 auto; 
  padding: 0px 35px;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.container-prelaoding-screen h2 {
position: relative;
top: 35%;
height: 100px;
font-size: 100px;
width: 100%;
margin-top: -50px;
text-align: center;
color: transparent;
animation: blurFadeInOut 3s ease-in backwards;
}
.container-prelaoding-screen h2.frame-1 {
animation-delay: 0s;
}
.container-prelaoding-screen h2.frame-2 {
animation-delay: 2.5s;
}
.container-prelaoding-screen h2.frame-3 {
animation-delay: 5s;
}
.container-prelaoding-screen h2.frame-4{
font-size: 200px;
animation-delay: 7.5s;
}
.container-prelaoding-screen h2.frame-5 {
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
margin-top: -18%;
}
.container-prelaoding-screen h2.frame-5 span {
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.container-prelaoding-screen h2.frame-5 span:nth-child(2) {
animation-delay: 13s;
}
.container-prelaoding-screen h2.frame-5 span:nth-child(3) {
animation-delay: 14s;
}
.start-laoding{
 animation: imageFadeInOut 3s ease-in backwards;
}
@keyframes imageFadeInOut{
0%{
    opacity: 0;
    transform: scale(0.9);
}
20%,75%,100%{
    opacity: 1;
    transform: scale(1)    
}
}
@keyframes blurFadeInOut{
0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(0.9);
    color: #fff;
}
20%,75%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
     color: #fff;
}
100%{
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    transform: scale(0);
    color: #fff;
}
}
@keyframes blurFadeIn{
0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
     color: #fff;
}
50%{
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    transform: scale(1.1);
     color: #fff;
}
100%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
    color: #fff;
}
}
@keyframes fadeInBack{
0%{
    opacity: 0;
    transform: scale(0);
     color: #fff;
}
50%{
    opacity: 0.4;
    transform: scale(2);
     color: #fff;
}
100%{
    opacity: 0.2;
    transform: scale(5);
    color: #fff;
}
}
.loading-tablet-img{
margin-top: 8%;
position: relative;
right: 0;

}
.loading-tablet-img img{
width:100%;

}
/*preloading progress Animation */
.loader {
width: 50%;
margin: 0px auto;
position: relative;
}
.loader .loading-1 {
position: relative;
width: 100%;
height: 10px;
border: 1px solid #5ccaf2;
border-radius: 10px;
animation: turn 4s linear 1.75s infinite;
}
.loader .loading-1:before {
content: "";
display: block;
position: absolute;
width: 0%;
height: 100%;
background: #5ccaf2;
box-shadow: 10px 0px 15px 0px #5ccaf2;
animation: load 2s linear infinite;
}
@keyframes load {
0% {
    width: 0%;
}
87.5%, 100% {
    width: 100%;
}
}
@keyframes turn {
0% {
    transform: rotateY(0deg);
}
6.25%, 50% {
    transform: rotateY(180deg);
}
56.25%, 100% {
    transform: rotateY(360deg);
}
}
/* Congratulation screen */
#degas{
opacity: 0;
}
.title{ 
top: 30%; 
right: 0%; 
left: 0%; 
line-height:1.1;
}
.media-done{
display: none;
}
/*=============== End loading  page  ===================*/
/*=================== Start Partners page ==============*/
.partners-details-section{
    background-image: url(../../images/img/partners/elipsebg.png);
    background-size: contain;
}
.partners-box{
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.11);
}
/*================== End Partners page ===============*/
/*========================= start 3th party apps page  ==================*/
.third-party-introduction {
    position: relative;
    overflow: hidden;
    background-size: cover;
    text-align: center;
    padding: 0em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0px;
    border-bottom: none;
    background-color: #106bca;
    background-image: -webkit-radial-gradient(farthest-corner, rgba(1, 1, 38, 0.5), rgba(1, 1, 38, 0.8));
    background-image: radial-gradient(farthest-corner, rgba(1, 1, 38, 0.5), rgba(1, 1, 38, 0.8));
  }
  .third-party-introduction .grid {
    margin: 0em;
    padding: 15rem 0em;
  }
  .following.bar,
  .third-party-introduction {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -ms-transition: background-color 3s ease-in-out 2s;
    -moz-transition: background-color 3s ease-in-out 2s;
    -webkit-transition: background-color 3s ease-in-out 2s;
    transition: background-color 3s ease-in-out 2s;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
  }
  .following.bar iframe.github {
    margin-top: 0px;
  }
  .pushed body,
  .pushed .following.bar {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .colored.following.bar,
  .third-party-introduction.colored {
    -webkit-animation-name: colors;
    -moz-animation-name: colors;
    -o-animation-name: colors;
    animation-name: colors;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 120s;
    -moz-animation-duration: 120s;
    -ms-animation-duration: 120s;
    -o-animation-duration: 120s;
    animation-duration: 120s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

  .third-party-introduction:after {
    position: absolute;
    z-index: 1;
    width: 135%;
    height: 200%;
    top: -27%;
    left: 0px;
    content: '';
    background: url('../../images/img/third-party-apps/bg.png');
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation-name: splash;
    -moz-animation-name: splash;
    -o-animation-name: splash;
    animation-name: splash;
    -ms-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
    -webkit-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
    -moz-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
    transition: opacity 3s ease-in-out, transform 5s ease-in-out;
    opacity: 0.06;
    -webkit-animation-duration: 15s;
    -moz-animation-duration: 15s;
    -ms-animation-duration: 15s;
    -o-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
    -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
    transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
  }
  @keyframes splash {
    0% {
      background-position: 0% 0%;
    }

    100% {
      background-position: 0% -475px;
    }
  }
  @-moz-keyframes splash {
    0% {
      background-position: 0% 0%;
    }

    100% {
      background-position: 0% -475px;
    }
  }
  @-webkit-keyframes splash {
    0% {
      background-position: 0% 0%;
    }

    100% {
      background-position: 0% -475px;
    }
  }
  @-ms-keyframes splash {
    0% {
      background-position: 0% 0%;
    }

    100% {
      background-position: 0% -475px;
    }
  }
  @-o-keyframes splash {
    0% {
      background-position: 0% 0%;
    }

    100% {
      background-position: 0% -475px;
    }
  }
  /* second */
  .btn.btn-lg {
    padding: 6px 30px;
  }
  .thumbnail-title {
    font-size: 20px;
    margin-top: 5px;
  }
  .third-party-app-img {
    padding: 0;
    overflow: hidden;
    min-height: 275px;
    position: relative;
    border-radius: 7px;
  }
  .col-3th-party:nth-child(1) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg1.jpg') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(2) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(3) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg3.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(4) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg4.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(5) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg9.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(6) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg7.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(7) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg5.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .col-3th-party:nth-child(8) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg8.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
  }
  .col-3th-party:nth-child(9) .third-party-app-img{
    background:url('../../images/img/third-party-apps/apps/bg6.jpg') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .third-party-app-img p {
    color: #fff;
    margin-bottom: 0;
    line-height: 16px;
  }
  .third-party-app-img .overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
    background: rgb(1, 1, 38);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) -70%,rgb(1, 1, 38) 60%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) -70%, rgb(1, 1, 38) 60%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) -70%, rgb(1, 1, 38) 60%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) -70%, #010126 60%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) -70%, #010126 60%);
    background: -webkit-linear-gradient(left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
  }
  .third-party-app-img .caption {
    bottom: 0px;
    height: 200px;
    font-size: 1rem;
    position: absolute;
    left: 0%;
    right: 0%;
    padding: 0 20px 50px;
    transition: all 0.3s ease-in-out;
  }
  .third-party-app-img .caption .tag a {
    color: #fff;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 2px;
    display: inline-block;
    background-color: #2980B9;
  }
  .third-party-app-img .caption .title {
    margin-top: 5px;
    font-size: 18px;
    line-height: 20px;
  }
  .third-party-app-img .caption .title a {
    color: #fff;
  }
  .third-party-app-img .caption .title a:hover {
    color: #2980B9;
  }
  .third-party-app-img .caption .meta-data {
    display: none;
    color: #777;
    font-size: 12px;
    line-height: 12px;
    margin-top: 30px;
  }
  .third-party-app-img .caption .meta-data a {
    color: #777;
  }
  .third-party-app-img .caption .meta-data a .fa {
    color: #2980B9;
  }
  .third-party-app-img .caption .meta-data a:hover {
    color: #2980B9;
  }
  .third-party-app-img .caption .content {
    display: none;
  }
  .third-party-app-img:hover .overlay {
    background: rgba(1, 1, 38,0.8);
  }
  .third-party-app-img:hover .caption {
    bottom: 60px;
  }
  .third-party-app-img:hover .caption .meta-data {
    display: block;
  }
  .third-party-app-img:hover .caption .content {
    display: block;
  }
  /* style pagination*/
.pagination-outer{ 
    text-align: center;
 }
.pagination{

    display: inline-flex;
}
.pagination li a.page-link{
    color: #555;
    background-color: #f9f9f9;
    font-size: 24px;
    font-weight: 600;
    padding: 6px 15px;
    margin: 0 7px;
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover{
    color: #fff;
    background-color: transparent;
    text-shadow: 0 0 2px #000;
}
.page-item:first-child .right-link-pagination{
    margin-right: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;

}
.page-item:last-child .left-link-pagination{
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
}
.pagination li a.page-link:before,
.pagination li a.page-link:after{
    content: '';
    background-color: #151539;
    height: 75%;
    width: 75%;
    opacity: 0;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.pagination li.active a.page-link:before,
.pagination li a.page-link:hover:before{
    opacity: 1;
    left: 43%;
    top: 43%;
}
.pagination li.active a.page-link:after,
.pagination li a.page-link:hover:after{
    opacity: 1;
    left: 57%;
    top: 57%;
}
/*========================= End 3th party apps page  =================*/
/*==========================start 3th part apps details ==============*/
.apps-3th-party-section {
    position: relative;
    z-index: 0;
}
.apps-3th-party-section .overlay {
    position:absolute;
    width: 73%;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    opacity: .3;
    background: rgba(169, 212, 236, 0.3);
}
.main-box-header .box-header.box-3th-party-apps-header{
    width: 100% !important;
 }
.left-half{
    z-index: 1;
}
/* box*/
.box-header-content.box-bg-green{
    background-color: #17a2b8
}
.box-header-icon.box-bg-green-icons{
    background-color: #86d4e0;
}
.apps-3th-party-tags span ,.apps-3th-party-details-point{
   font-size: 13px; 
    color:#44586d;
}
.apps-3th-party-details-point{
   font-size: 15px; 
}
.apps-3th-party-tags img {
    width:5%
}
.apps-3th-party-tags-version{
    background-color: #17a2b8 ;
    color:#f9f9f9;
    padding: 0.1em 0.2em;
}
hr.apps-3th-party-details-line {
    width: 100%;
    border: 0.024rem solid #cae3f1;
}
.tabs-3th-party-detials{   
     margin: 8% auto;
}
 /* width */
 .scrollspy-example::-webkit-scrollbar {
    width: 5px;
  }
  /* Track */
  .scrollspy-example::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #eee; 
    border-radius: 4px;
  }
  /* Handle */
  .scrollspy-example::-webkit-scrollbar-thumb {
    background: rgba(92, 202, 242, 0.5); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  .scrollspy-example::-webkit-scrollbar-thumb:hover {
    background:  rgba(92, 202, 242, 0.7); 
    transition:0.6s;
  }

.scrollspy-example {

  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-3th-party-link a{
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #f7fbfe;
    border-left-width: .25rem;
    border-radius: .2rem;
    border-left-color: #5ccaf2;
}
.scroll-3th-party-link a.active,
.scroll-3th-party-link a:hover{
    background: #5ccaf2;
    border-color: #5ccaf2;
    color: #f9f9f9;
    border-radius: 1px;
}
.paragraph-license{
    color: #6c757d;
}
/*========================= End 3th part apps details  =================*/
/*==========================start purchase 3th part apps  ==============*/
.intro-purchase-container{
    margin-top: 6rem;
}
.purchase-container-section{
    background: rgba(242, 245, 249, 0.6);
}
.Total-price-3thparty-apps{
    color: #495057;
}
.box-price-apps-purchase{
    border: 1px solid #5ccaf2;
    border-radius: 4px;
    overflow-y: scroll;
}
.box-price-apps-purchase::-webkit-scrollbar {
    width: 0.2em;
  }
  .box-price-apps-purchase::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
   
  .box-price-apps-purchase::-webkit-scrollbar-thumb {
    background-color:rgba(21, 21, 57, 0.6); 
    outline: 1px solid #5ccaf2;
    border-radius:4px;
  }
.listpurchase-apps{
    border-radius: 0rem !important;
}
.price_currency{
    color: #6c757d;
}
.box-img-apps-purchase{
    height: 100%;
    width: 20%;
}
.step-price-apps-purchase {
    color: #735df2;
    margin-bottom: 20px;
    padding-bottom: 4px;
    border-bottom: 2px solid #735df2;
}
.step-price-apps-purchase >strong{
    display: inline-block;
    background: #735df2;
    padding: 0 10px;
    color: #fff;
}
.step-purchase-blue{
    color: #17a2b8 !important;
    border-bottom: 2px solid #17a2b8!important;
}
.step-purchase-blue >strong{
    background:#17a2b8;
}
.step-purchase-yellow{
    color:#ffc107 !important;
    border-bottom: 2px solid #ffc107 !important;
}
.step-purchase-yellow >strong{
    background:#ffc107 ;
}
/*==========================end purchase 3th part apps  ==============*/

/*  General style*/
.section-1-box {
    /* padding-top: 30px;*/
     padding-bottom: 30px;
     text-align: right; 
 }
 .section-1-box .section-1-box-icon {
     width: 80px;
     height: 80px; 
     margin: 0 auto;
     background: #151539; /* Old browsers */
     background: -moz-linear-gradient(top,  #284086 0%,  #151539 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #284086), color-stop(100%,#151539)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #284086 0%, #151539  100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #284086   0%, #151539 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #284086 0%,   #151539 100%); /* IE10+ */
     background: linear-gradient(to bottom, #284086  0%,  #151539 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284086', endColorstr='  #151539',GradientType=0 ); /* IE6-9 */
     font-size: 40px; color: #fff; line-height: 80px; text-align: center;
     -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
     -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
 }
 .section-1-box h3 { 
     margin-top: 0;
     padding: 0 0 10px 0;
 }
 /***** Section 2 *****/
 .section-2-box {
     margin-top: 30px; 
     text-align: left;
 }
 .section-2-box h3 {
     margin-top: 0;
 }
 .section-2-box-text .medium-paragraph {
     margin-top: 20px; 
     margin-bottom: 20px;
 }
 /***** Section 3 *****/
 .section-3-box .section-3-box-icon {
     width: 60px;
     height: 60px;
     margin: 0 auto;
     background: #151539; /* Old browsers */
     background: -moz-linear-gradient(top,  #284086 0%,  #151539 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #284086), color-stop(100%,#151539)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #284086 0%, #151539  100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #284086   0%, #151539 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #284086 0%,   #151539 100%); /* IE10+ */
     background: linear-gradient(to bottom, #284086  0%,  #151539 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284086', endColorstr='  #151539',GradientType=0 ); /* IE6-9 */
     font-size: 28px; color: #fff; line-height: 60px; text-align: center;
     -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
 }
 .section-3-box h3 { 
     margin-top: 0; 
     padding: 0 0 10px 0; 
 }
 /*==========================end 3th part apps details ==============*/
/*=================== End customer style =================*/
/*  General style*/
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], select {
    padding: 0 20px;
    line-height: 48px!important;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
    display:block;
}

audio:not([controls]){
    display:none;
    height:0;
}

a:focus{
    outline:thin dotted;
}
a:active,a:hover{
    outline:0;
}
h1{

    margin:0.67em 0;
}
abbr[title]{
    border-bottom:1px dotted;
}
hr{
    -moz-box-sizing:content-box;
    box-sizing:content-box;height:0;
}
mark{
    background:#ccc;
    color:#000;
}
code,kbd,pre,samp{

    font-size:1em;
}
pre{white-space:pre-wrap;
}
q{
    quotes:"\201C" "\201D" "\2018" "\2019";
}
small{
    font-size:80%;
}

svg:not(:root){
    overflow:hidden;
}
figure{
    margin:0;
}
fieldset{
    margin:0 2px;
    padding:0.35em 0.625em 0.75em;
}
.form-control{
       line-height: 2.5; 
}
legend{
    border:0;
    padding:0;
}
button,input,select,textarea{
    font-family:inherit;
    font-size:100%;
    margin:0;
}
button,input{
    line-height:normal;
}
button,select{
    text-transform:none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
    -webkit-appearance:button;
    cursor:pointer;
}
button[disabled],html input[disabled]{
    cursor:default;
}
input[type="checkbox"],input[type="radio"]{
    box-sizing:border-box;
    padding:0;
}
input[type="search"]{
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
    -webkit-appearance:none;
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0;
}
textarea{
    overflow:auto;
    vertical-align:top;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
*,
*::after,
*::before {
	box-sizing: border-box;
}

a:hover, a:focus { 
    color: #5ccaf2;
    border: 0;
    text-decoration: none;
    transition: 0.5s;  
}
::-moz-selection { 
    background: #8542a0;
    color: #fff; 
    text-shadow: none;
}
::selection { 
    background: #8542a0;
    color: #fff;
    text-shadow: none;
}

/***** Top content *****/

.top-content { 
    width: 100%;
    padding-top: 100px; 
}

.carousel-control-next, .carousel-control-prev {
    border: 0;
}
/***** Section 1 *****/
.section-1-box {
   /* padding-top: 30px;*/
    padding-bottom: 30px;
    text-align: right; 
}
.section-1-box h3 { 
    margin-top: 0;
    padding: 0 0 10px 0;
}
/***** Section 2 *****/
.section-2-box {
    margin-top: 30px; 
    text-align: left;
}
.section-2-box h3 {
    margin-top: 0;
}
.section-2-box-text .medium-paragraph {
    margin-top: 20px; 
    margin-bottom: 20px;
}
.section-3-box .section-3-box-icon {
	width: 60px;
    height: 60px;
    margin: 0 auto;
	background: #151539; /* Old browsers */
	background: -moz-linear-gradient(top,  #284086 0%,  #151539 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #284086), color-stop(100%,#151539)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #284086 0%, #151539  100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #284086   0%, #151539 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #284086 0%,   #151539 100%); /* IE10+ */
	background: linear-gradient(to bottom, #284086  0%,  #151539 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284086', endColorstr='  #151539',GradientType=0 ); /* IE6-9 */
    font-size: 28px; color: #fff; line-height: 60px; text-align: center;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.section-3-box h3 { 
    margin-top: 0; 
    padding: 0 0 10px 0; 
}
/***** Section0******/
.section-container{
  	background-color: #fff;  
}