body {
    padding:0px;
    margin:0px;
}


header {
    background: #0f88cd;
    color: #fff;
    height:auto;
    float:left;
    width:100%;
    margin-bottom:1rem;
}

.eka-buttons {
    background-color: #0f88cd;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}


.eka-buttons-red {
    background-color: #ec0000;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}





nav a {

    color:#000;
    font-weight:500;
}

.ekaboxbanner {
    background: url(../images/eka-box-banner.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    height:586px;
    width:100%;
    border-top-left-radius:1rem;
    border-top-right-radius:1rem;
}



.ekavideotutorial{


   background: url(../images/videotutorial.jpg);
   background-repeat:no-repeat;
   background-size:cover;
padding-bottom: 5rem;
padding-top: 5rem;
   width:100%;
   border-radius:1rem;
  
}

.videotutotial-vt-text{

font-size: .8rem;
font-weight: 500;

}

.packagebanner {
  
   border-top-left-radius:1rem;
   border-top-right-radius:1rem;
}

.border-radius-big{

   border-radius: 1rem;
}

.border-bottom-radius-big{

   border-bottom-left-radius: 1rem;
   border-bottom-right-radius: 1rem;
}

.package-card{

   border: 1px solid #c6c6c6;
   box-shadow: 0 0 10px #ccc;
}

.package-card-text{

   font-size: .8rem;
   font-weight: 500;
}

.bg-yellow{

background: #f3c120;
color: #fff;

}


.bg-blue{

background: #0000FF;
color: #fff;

}



.bg-off-blue{

   background: #00bad1;
   color: #fff;
   
   }


   .bg-purple{

      background: #673bb6;
      color: #fff;
      
      }


      .bg-green{

         background: #00963f;
         color: #fff;
         
         }


         .bg-pink{

            background: #c316d8;
            color: #fff;
            
            }

         

.bg-light-grey{

   background: #f2f2f2;
}

.bg-white{

   background: #fff;
   color:#212529;
   
   
   }


   .eka-buttons-pink {
      background-color: #c316d8;
      color: #fff;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: .9rem;
      font-weight: 400;
   }


   .eka-buttons-green {
      background-color: #00963f;
      color: #fff;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: .9rem;
      font-weight: 400;
   }


   .eka-buttons-yellow {
      background-color: #f3c120;
      color: #fff;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: .9rem;
      font-weight: 400;
   }


   .eka-buttons-off-blue {
      background-color: #00bad1;
      color: #fff;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: .9rem;
      font-weight: 400;
   }


   .eka-buttons-purple{
      background-color: #673bb6;
      color: #fff;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: .9rem;
      font-weight: 400;
   }


   .eka-buttons-white{
      background-color: #fff;
      color: #673bb6;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: 1rem;
      font-weight: 400;
   }


   .eka-buttons-white-withborder{
      background-color: #fff;
      color: #673bb6;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      font-size: 1rem;
      font-weight: 400;
      border:1px solid #673bb6 ;
   }

.ekaboxbanner-whatis {
 
   height:585px;
   width:100%;
   border-radius:1rem;
  
}

.ekaboxbanner-whatis img {

border-radius: 1rem;


}

.active-link{

   color: #0f88cd!important;
}



.ekaboxbanner-font{
font-size:1.2rem ;
font-weight: 400;

}

.no-background{

background: transparent!important;

}

.scroll-bg{

background:#3962a9 url(../images/scroll-bg-img.jpg) no-repeat top right;
height: 148px;

}

.middle-bg{

background:url(../images/middlebg.jpg) repeat top right;

border-radius:1rem;
padding-bottom: 3rem;

}



.compatible-device-bg {
   background: url(../images/cd-bg.jpg);
   background-repeat:no-repeat;
   background-size:cover;
   height:586px;
   width:100%;
   border-top-left-radius:1rem;
   border-top-right-radius:1rem;
   padding-top: 4rem;
   padding-bottom: 4rem;
}

.text-blue{

   color: #2e458a;

}


.compatible-device-font{
   font-size:1.2rem ;
   font-weight: 400;
   color: #2e458a;
   
   }



.middle-bg-compatible-device{

   background:url(../images/middlebg.jpg) repeat top right;
   
 
   padding-bottom: 3rem;
   
   }

.footer-bg {
    background:url(../images/footer-bg.jpg) repeat top right;

border-top-left-radius:1rem;
border-top-right-radius:1rem;
}

.fontsize {
    font-size:1.1rem;
}

.footer-links{

   font-size: .9rem;
   color:#fff;
}

.footer-links:hover{

   font-size: .9rem;
   color:#ccc;
}

.image-slider img{

border-radius: 1rem;

}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 30px;
  width: 30px;
  outline: #fff;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 2px solid #fff;

  /* background-color: #fff; */
  
}


.carousel-control-next, .carousel-control-prev{

width: 7%;

}

.blue-heading{

color: #2e458a;
text-transform: uppercase;

}

.dtp {
    display:none;
}

.copyright{

   font-size: .8rem;
   color:#fff;
}









/*-------------------------------*/
    /*Navigation Starts */
/*-------------------------------*/
.navbar {
   padding-bottom: 0;
   padding-top: 0;
   z-index: 1000;
}
.center-brand {
   padding-top: 1rem;
   padding-bottom: 1rem;
}
.center-brand, .transparent-bg {
	left: 0;
	top: 0;
}
.center-brand, .transparent-bg, 
.fixed-bottom, .bg-transparent-light,
.bg-transparent-white,
.bg-invisible, .boxed-nav {
   /*position: absolute;
   width: 100%;*/
}
.bg-invisible .container {
   opacity: 0;
   visibility: hidden;
}
.fixed-bottom {
   bottom: 0;
}
.bg-white {
   position: relative;
}
.bg-white,
.boxed-nav .container {
   background: #fff;
}
.boxed-nav {
   /*top: 20px;*/
   
}
.fixedmenu {
   top: 0;
   left: 0;
   right: 0;
   position: fixed;
   margin: 0;
   padding-bottom: 0;
   padding-top: 0;
   z-index: 1002;
   -webkit-animation-name: animationFade;
   -o-animation-name: animationFade;
   animation-name: animationFade;
   -webkit-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;

   -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35);
   box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35);
   background: -webkit-linear-gradient(90deg, #423f9c 31%, #862359 69%);
   background: -webkit-gradient(linear, left top, right top, color-stop(31%, #423f9c), color-stop(69%, #862359));
   background: -webkit-linear-gradient(left, #423f9c 31%, #862359 69%);
   background: -o-linear-gradient(left, #423f9c 31%, #862359 69%);
   background: linear-gradient(90deg, #423f9c 31%, #862359 69%);
}
.center-brand.fixedmenu,
.bg-white.fixedmenu,
.bg-transparent-light.fixedmenu,
.bg-transparent-white.fixedmenu,
.bg-invisible.fixedmenu,
.boxed-nav.fixedmenu {
   background: #fff;
}
.fixed-bottom.fixedmenu{
   bottom: auto;
   -webkit-animation: none;
   -o-animation: none;
   animation: none;
}
.bg-invisible.fixedmenu .container {
   opacity: 1;
   visibility: visible;
}
@-webkit-keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-o-keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
    }
}
@keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
    }
}
.nav-whitebg {
   background: #fff;
   -webkit-transition: all .9s ease;
   -o-transition: all .9s ease;
   transition: all .9s ease;
}
.navbar.sidebar-nav {
	background: #fff;
	border: none;
	display: inline-table;
	width: 290px;
	-webkit-border-radius: 0;
	border-radius: 0;
	position: fixed;
	top: 0;
	z-index: 110;
	height: 100%;
	padding: 3rem 2rem;
	border-right: 1px solid rgba(0,0,0,.07);
	left: 0;
	overflow-x: hidden;
}

.navbar-brand  {
   /*margin: 16px 0;*/
   padding: 0;
   width: 220px;
   position: relative;
}
.center-brand .navbar-brand {
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto;
   text-align: center;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   padding: 0;
}
.navbar-brand > img {
   width:100%;
   
    /*background:#fbf7f7;*/
    
}

.navbar.fixedmenu .logo-default,
.navbar  .logo-scrolled{
	display: none;
}
.navbar.fixedmenu .logo-scrolled,
.navbar .logo-default{
   display: inline-block;
}

.navbar.sidebar-nav .navbar-nav {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
}
.navbar-nav .nav-item {
	margin: 16px 5px;
   position: relative; 
}
.navbar.sidebar-nav .navbar-nav .nav-item {
   margin: 10px 0;
}
.navbar-nav .nav-item:first-child {
   margin-left: 0;
}
.navbar-nav .nav-item:last-child {
   margin-right: 0;
}
.navbar-nav .nav-link {
   padding: 8px 1.25rem !important;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 14px;
   color: #212331;
   position: relative;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   overflow: hidden;
}
.sidebar-nav .navbar-nav .nav-link {
   padding-left: 0 !important;
   padding-right: 0 !important;
}
.square-layout .navbar-nav .nav-link {
   -webkit-border-radius: 0;
   border-radius: 0;
   border: 1px solid transparent;
}
.center-brand .navbar-nav .nav-link,
.transparent-bg .navbar-nav .nav-link,
.fixed-bottom .navbar-nav .nav-link{
   color: #fff;
}
.center-brand.fixedmenu .navbar-nav .nav-link {
   color: #212331;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.sidebar-nav .navbar-nav .nav-link.active{
   color: #00bcd4;
}
.fixedmenu .navbar-nav .nav-link.active,
.fixedmenu .navbar-nav .nav-link.active:hover,
.fixedmenu .navbar-nav .nav-link.active:focus,
.center-brand.fixedmenu .navbar-nav .nav-link.active{
   background: #00bcd4;
   color: #fff;
}
.square-layout .navbar-nav .nav-link.active,
.square-layout .navbar-nav .nav-link:hover,
.square-layout .navbar-nav .nav-link:focus{
   border: 1px solid #c1c1c1;
   background: transparent !important;
}
.square-layout .fixedmenu .navbar-nav .nav-link.active,
.square-layout .fixedmenu .navbar-nav .nav-link:hover,
.square-layout .fixedmenu .navbar-nav .nav-link:focus{
   border: 1px solid #c1c1c1;
   background: transparent !important;
   color: #212331 !important;
}

.center-brand .navbar-nav .nav-link:first-of-type {
   background: rgba(0,0,0,0);
}

  
/*toggle responsive*/
.navbar-toggler {
   position: relative;
   border: none;
   -webkit-border-radius: 0;
   border-radius: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active {
   outline: 0;
}
.navbar-toggler span {
   display: block;
   background: #fff;
   height: 2px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}
.bg-white .navbar-toggler span,
.bg-transparent-light .navbar-toggler span,
.bg-invisible .navbar-toggler span,
.navbar.sidebar-nav .navbar-toggler span,
.boxed-nav .navbar-toggler span {
   background: #212331;
}
.center-brand.fixedmenu .navbar-toggler span {
   background: -webkit-linear-gradient(90deg, #643094, #00bcd4);
   background: -webkit-gradient(linear, left top, right top, color-stop(#643094), color-stop(#00bcd4));
   background: -webkit-linear-gradient(left, #643094, #00bcd4);
   background: -o-linear-gradient(left, #643094, #00bcd4);
   background: -webkit-gradient(linear, left top, right top, from(#643094), to(#00bcd4));
   background: linear-gradient(90deg, #643094, #00bcd4);
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   -webkit-transition: -webkit-transform .35s ease-in-out;
   transition: -webkit-transform .35s ease-in-out;
   -o-transition: -o-transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out, -o-transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
   position: absolute;
   left: 12px;
   top: 10px;
   -webkit-transform: rotate(135deg);
   -o-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
   transform: rotate(135deg);
   opacity: 0.9;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 3px;
    visibility: hidden;
    background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}

.flogo {
    height:200px;
    line-height:200px;
    
}

@media (max-width: 992px) {
    .scroll-bg {
        height: auto;
    }
    .middle-bg{

height: auto;

}
    .footer-bg {
    
height: auto;
}
}