body {
    padding: 0;
    margin: 0;
}



@font-face {
    font-family:RobotoSlab-Black;
    src: url(../fonts/RobotoSlab-Black.ttf);
  }
  
  @font-face {
    font-family: RobotoSlab-Bold;
    src: url(../fonts/RobotoSlab-Bold.ttf);
  }
  
  @font-face {
    font-family: Roboto-Medium;
    src: url(../fonts/RobotoSlab-Medium.ttf);
  }
  
  @font-face {
    font-family:RobotoSlab-Thin;
    src: url(../fonts/RobotoSlab-Thin.ttf);
  }
  
  @font-face {
    font-family:RobotoSlab-Regular;
    src: url(../fonts/RobotoSlab-Regular.ttf);
  }
  @font-face {
    font-family:RobotoSlab-Light;
    src: url(../fonts/RobotoSlab-Light.ttf);
  }
  @media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm  .container-xl {
        max-width:85%;
  
    }
    .modal-lg, .modal-xl {
      max-width: 60%;
    }
  }
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family:'RobotoSlab-Regular', Arial, sans-serif;;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    /* color: #000000; */
    font-weight: 400;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    line-height: 25px;
  }
  /* 2) Heading */
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 15px;
    font-weight: normal;
    /* color: #000; */
    font-weight: 800;
    font-family: 'RobotoSlab-Bold', sans-serif;
    ;
  }
  
  h1 {
    font-size: 2.5em;
    line-height: 1.25em;
    /*24px, 30px*/
  }
  h2 {
    font-size: 1.6667em;
    line-height: 1.25em;
    
    /*20px, 35px*/
  }
  h3 {
    font-size: 1.5em;
    line-height: 1.2222em;
    /*18px, 22px*/
  }
  
  h4 {
    font-size: 1.3333em;
    line-height: 1.25em;
    /*16px, 20px*/
  }
  
  h5 {
    font-size: 1.1666em;
    line-height: 1.1428em;
    /*14px, 16px*/
  }
  
  h6 {
    font-size: 1em;
  }
  .margin-top-lg
  {
    margin-top:70px;
  }
  p {
    font-size: 17px;
    line-height: 1.1428em;
    font-family:'RobotoSlab-Regular', Arial, sans-serif;;
    /* color: #000; */
    font-weight: 400;
    line-height: 25px;
    
  }
  p,ul,li{
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height:1.9;
  }
  tr,td,th,tbody,thead{
    font-size: calc(14px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));
  }
   img {
    width: 100%;
    vertical-align: middle;
    border-style: none;
  }
   .row
  {
    vertical-align: middle;
    align-items: center;
  }
/* .ms-left,
.ms-right
{
    overflow-x: hidden;
} */








.slider_icon 
{
    font-size: 65px;
}
nav.navbar.navbar-expand-lg {
    /* width: 100%; */
    background: white;
    /* position: sticky; */
    padding: 0 5px;
}
#button  {
    display: inline-block;
    width:50px;
    height:50px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 29px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    vertical-align: middle;
    align-items: center;
    color: white;
    background-color: #6712A8;
    font-size: 52px;
}
#button.show {
    opacity: 1;
    visibility: visible;
}
/* .ms-tableCell {
    height: 759px !important;
} */

.ms-table.active .Automated_text p {
    animation: fadeInUp 1s ease-in-out 0.2s forwards;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.ms-table.active .color-overlay {
    background-color: #ffffff;
    height: 50px;
    opacity: 0;
    top: -2%;
    right: 10px;
    position: absolute;
    animation: move-highlight 2s linear;
}
.ms-table.active .row .col-lg-10 {
    overflow: hidden;
}
@keyframes move-highlight {
    0% {
        right: 100%;
        left: 0;
        width: 5%;
        opacity: 1;
    }
    100% {
        right: 0;
        opacity: 0;
        left: 50%;
        width: 100%;
    }
}
/* #right2 , #right4 ,#left3 ,#left5
.Automated_text h2 , p
{
    color: black !important;
} */
/* #left3 
.Automated_text p{
    color: black !important;
} */
/* #left3 h2
{
    color: black;
} */
.ms-table.active .Automated_text h2 {
    position: relative;
    top: 20px;
    font-size:50px;
    animation: learn 1s ease alternate, nudge 1s linear alternate;
}
@keyframes learn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes nudge {
    0% {
        transform: translate(150px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
/* .navbar-brand img {
    width: 27%;
} */
.Automated_img,
.reporting2_img,
.damege_img,
.heeldamege_img {
    height: 100%;
    text-align: center;
}
.reporting2_img
{
    position: relative;
}
#right7 .reporting3_img img
{
    width:70% !important ;
}
#left0 .reporting2_img img
{
    top:40%;
}
.reporting2_img img {
    width: 80%;
    width: 59%;
    right: 22%;
    top:19%;
    margin: 0 auto;
    position: absolute;
    /* transform: rotateY(45deg);
	animation: rotateAnimation 3s linear infinite; */
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
    -webkit-animation-timing-function: cubic-bezier(.54, .085, .5, .92);
    animation-timing-function: cubic-bezier(.54, .085, .5, .92);
    -webkit-animation-name: animateUpDown;
    animation-name: animateUpDown;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes animateUpDown {
    0%,
    100% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
.cube {
    position: absolute;
    top: 10%;
    left: 15%;
    overflow: hidden !important;
    width: 15px;
    height: 15px;
    border: solid 1px rgba(255, 255, 255, .05);
    /* border-radius: 100%; */
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 12s ease-in forwards infinite;
}
.cube:nth-child(2n) {
    border-color:rgba(255, 255, 255, .05);
}
.cube:nth-child(2) {
    animation-delay: 2s;
    left: 65%;
    top: 40%;
}
.cube:nth-child(3) {
    animation-delay: 3s;
    left: 45%;
    top: 65%;
}
.cube:nth-child(4) {
    border-color: rgba(255, 255, 255, .05);
    animation-delay: 4s;
    left: 55%;
    top: 21%;
}
.cube:nth-child(5) {
    border-color: rgba(255, 255, 255, .05);
    animation-delay: 5s;
    left: 10%;
    top: 55%;
}
.cube:nth-child(6) {
    border-color: rgba(255, 255, 255, .05);
    animation-delay: 6s;
    left: 70%;
    top: 38%;
}
.cube2 {
    position: absolute;
    top: 17%;
    left: 28%;
    overflow: hidden !important;
    width: 15px;
    height: 15px;
    border: solid 1px rgba(255, 255, 255, .05);
    /* border-radius: 100%; */
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 12s ease-in forwards infinite;
}
.cube2:nth-child(2n) {
    border-color: rgba(255, 255, 255, .05);
}
.cube2:nth-child(2) {
    animation-delay: 2s;
    left: 65%;
    top: 40%;
}
.cube2:nth-child(3) {
    animation-delay: 3s;
    left: 45%;
    top: 65%;
}
.cube2:nth-child(4) {
    border-color: rgba(255, 255, 255, .05);
    animation-delay: 4s;
    left: 82%;
    top: 17%;
}
.cube2:nth-child(5) {
    border-color: rgba(255, 255, 255, .05);
    animation-delay: 5s;
    left: 39%;
    top: 70%;
}
.cube2:nth-child(6) {
    border-color:rgba(255, 255, 255, .05);
    animation-delay: 6s;
    left: 69%;
    top: 44%;
}
@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}
.reporting3_img {
    text-align: center;
}
#left6 .reporting3_img img, #right5 .reporting3_img img{
    width: 70% !important;
}
.reporting3_img img {
    width: 100%;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: cubic-bezier(.54, .085, .5, .92);
    animation-timing-function: cubic-bezier(.54, .085, .5, .92);
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes bounceInRight {
    0%,
    100% {
        -webkit-transform: translateX(15px);
        transform: translateX(15px);
        /* opacity: 0; */
    }
    50% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px);
        /* opacity: 1; */
    }
}
.square.new {
    height: 102px;
    /* background: rgba(255, 255, 255, 0.438); */
    width: 102px;
    top: 67%;
    left: 64px;
    bottom: -10%;
    -webkit-animation: spin1 3s infinite alternate;
    animation: spin1 3s infinite alternate;
    position: absolute;
}
.square.five {
    top: 2%;
    position: absolute;
    left: 48%;
    -webkit-animation: spin2 2s infinite alternate;
    animation: spin2 2s infinite alternate;
}
.square.six {
    height: 200px;
    /* background: rgba(255, 255, 255, 0.438); */
    width: 200px;
    top: 24%;
    left: 50%;
    bottom: -10%;
    -webkit-animation: spin5 3s infinite alternate;
    animation: spin5 3s infinite alternate;
    position: absolute;
}
.br_shap2 {
    position: absolute;
    height: 50% !important;
    left: 28px;
    top: 25%;
    width: 300px;
    border: 10px solid #8906129c;
    height: 100%;
    z-index: 0;
}
.Automated_img
{
    position: relative;
}
.Automated_img img {
    width: 80%;
}

.Automated_img img {
    position: absolute;
    width: 59%;
    right: 22%;
    top: 36%;
    /* -webkit-animation: run 5s infinite alternate;
    animation: run 5s infinite alternate; */
    -webkit-animation: zoomeffect 5s infinite alternate;
    -moz-animation: zoomeffect 5s infinite alternate;
    animation: zoomeffect 5s infinite alternate;
 
}

/* @keyframes run {
    100% {
        -webkit-transform: perspective(1910px) translate3d(0px, 25px, 401px) scale3d(1.05, 1.05, 1.05);
    }
} */
@-webkit-keyframes zoomeffect{
    0%{
        background-position:center;
      transform:scale(0.1,0.1);
    }
    /* 50%{
        background-position:center;
      transform:scale(0.5,0.5);
    } */
    100%{
        background-position:center;
      transform:scale(0.8,0.8);
    }
}
@keyframes zoomeffect{
    0%{
        background-position:center;
      transform:scale(0.5,0.5);
    }
    100%{
        background-position:center;
      transform:scale(1.5 ,1.5);
    }
}
#left1
{
    background-image: -webkit-linear-gradient(40deg,#6712a8 0,#5f28fb 100%);
}
#right0,
#left5,
#right2,
#left3,
#right4,#right6,#left7{
    
    background: -webkit-linear-gradient(40deg,#6712a8 0,#5f28fb 100%);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    color: white;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* .main-nav-section {
    height: 120px;
    width: 100%;
    z-index: 99999;
    position: fixed;
    background: transparent;
} */

.btn-main button {
    /* margin: 20px; */
    margin-left: 60px;
    background-color: #6714AF;
    color: white;
    padding: 3px;
    width: 100%;
    border-radius: 10px;
    border: none;
}

.btn-main a {
    color: #631DD1;
    margin: 5px;
    text-decoration: none;
    font-size: 18px;
}
.main-nav-section .nav-link
{
    white-space: nowrap !important;
}
.header-text a {
    white-space: nowrap !important;
    /* color: black; */
    margin: 5px;
    font-size: 16px !important;
}
#left1 .btn-blue
{
    color: white !important;
}
#left1
.btn-blue:hover {
    color: #9F2B2F !important;
    /* text-shadow: 1px 1px 2px #111111; */
}
.btn-blue {
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, .5);
    outline-offset: 0px;
    padding: 8px;
    width: max-content;
    background-color: transparent;
    color: #f8f6f6;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 27px;
    /* background-color: #ed9330; */
    margin: 35px 0px 5px 5px;
    border-radius: 0;
    position: relative;
    border: none;
    z-index: 1;
    transition: all 0.4s ease-in-out 0s;
    overflow: hidden;
    letter-spacing: 1px;
}

.btn-blue::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    margin: -15px 0 0 1px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    /* color: black !important; */
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale3d(1, 2, 1);
    transform: scale3d(1, 2, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
    right: 100%;
}

.btn-blue:hover::before {
    -webkit-transform: scale3d(9, 9, 1);
    transform: scale3d(9, 9, 1);
    background: white;
}

.btn-blue:hover {
    color: #9F2B2F !important;
    /* text-shadow: 1px 1px 2px #111111; */
}
.br_shap {
    position: absolute;
    height: 150% !important;
    left: 30px;
    top: -63px;
    width: 50%;
    border: 10px solid #83100c;
    height: 100%;
    z-index: 0;
}

.intro {
    position: relative;
}

.square  {
    width: 40px;
    height: 40px;
    position: absolute;
    background: rgba(255, 255, 255, .05);
}

.square.one img{
    top: 150px;
    left: 50px;
    -webkit-animation: spin2 2s infinite alternate;
    animation: spin2 2s infinite alternate;
}

.square.two {
    top: 200px;
    left: 70px;
    -webkit-animation: spin2 2.5s infinite alternate;
    animation: spin2 2.5s infinite alternate;
}

.square.three {
    height: 102px;
    /* background: rgba(255, 255, 255, 0.438); */
    width: 102px;
    top: 105%;
    left: 64px;
    bottom: -10%;
    -webkit-animation: spin1 3s infinite alternate;
    animation: spin1 3s infinite alternate;
    position: absolute;
}

.square.four {
    height: 102px;
    /* background: rgba(255, 255, 255, 0.438); */
    width: 102px;
    top: 59%;
    left: 50px;
    bottom: -10%;
    -webkit-animation: spin1 3s infinite alternate;
    animation: spin1 3s infinite alternate;
    position: absolute;
}

.square.seven {
    height: 200px;
    /* background: rgba(255, 255, 255, 0.438); */
    width: 200px;
    top: 65%;
    left: 23%;
    bottom: -10%;
    -webkit-animation: spin5 3s infinite alternate;
    animation: spin5 3s infinite alternate;
    position: absolute;
}

.square.eight {
    height: 200px;
    /* background: rgba(255, 255, 255, 0.438); */
    width: 200px;
    top: 50%;
    left: 122px;
    bottom: -10%;
    -webkit-animation: spin1 3s infinite alternate;
    animation: spin1 3s infinite alternate;
    position: absolute;
}

@keyframes spin1 {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}

@keyframes spin2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
}

@keyframes spin5 {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(2.5);
    }
}
 /* form .form-group 
{
    background: #f7f8fb;
    box-shadow: none;
    transition: all 0.2s linear;
    border-radius: 20px;
    border:3px solid red;
 } */
 form
 {
     margin-top:5%;
 }
 .form-control {
    display: block;
    width: 100%;
    /* height: calc(2.1em + .75rem + 2px); */
    padding:8px 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #F7F8FB;
    background-clip: padding-box;
    /* border: 3px solid #ced4da; */
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.area
{
    /* border: 3px solid #ced4da; */
    border-radius: .25rem;
}

.form-control:focus
{
    box-shadow: 0px 20px 20px 0px rgb(0 11 40 / 10%);
    background: #fff;
    border: 3px solid rgba(34, 4, 116, 0.4);
}
.mdi-arrow-up-bold:before {
    content: "\F736";
    font-size: 25px;
    color: white;
}
#right6 .slider_select .form-control
{
    color: rgb(107, 107, 107);
}
#medium_device_slider .slider_select .form-control
{
    color: rgb(107, 107, 107);
}