*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  font-family: -apple-system,BlinkMacSystemFont,Roboto,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.containerh1{
  text-align:center;
  padding: 3%;
  color: #0492c2;
  font-weight: 700;
  font-size: 50px;
}
.containerh1 hr{
  border: 3px solid;
  border-radius: 3px;
  width: 11%;
  margin-left: 45%;
}

/* Top Area */

.top-container{
  background-color:#fff;
  min-height: 100vh;
  width:100%;
  background-image:url("./indexpageimages/robotfrontpage.gif");
  background-position: right;
  background-repeat: no-repeat;
  background-size: 70%;
  padding-bottom:5%;
  background-attachment: fixed;
}

.products{
  position: relative;
  margin-top: 15%;
  display: inline-block;
}
.mvp{
  position:relative;
  margin-left:15%;
  display: inline-block;
}
.awards{
  position:relative;
  margin-left:15%;
  display: inline-block;
}
.products, .mvp, .awards, h4{
  font-weight:700;
   font-size: 40px;
   color:black;
}
.products, .mvp, .awards, h5{
font-weight:900;
color: #0492c2;
}

.navbar{
  padding:2% ;
  font-weight: bolder;
}

.navbar-brand{
  color: #0492c2;
  opacity:0.8;
  font-size: 25px;
  font-weight: bolder;
}
.content-top{
  position:absolute;
  margin-top: 5%;
  padding-left:8%;
  color:black;
  font-weight:600;
  font-weight: bolder;
  font-family: -apple-system,BlinkMacSystemFont,Roboto,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

}
.content-top h1{
  font-weight: 900;
  font-size: 70px;
}
/*anime js*/
.ml4 {
  position: relative;
  font-weight: 900;
  font-size: 70px;
}
.ml4 .letters {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0.3em;
  right: 0;
  opacity: 0;
  color: #0492c2;
}
/***************************************************************************************/

/* media query */
@media screen and (max-width:600px){

  .navbar{
    padding:2% ;
    font-weight: bolder;
    font-size:12px;
  }
  .navbar-brand{
    color: #0492c2;
    opacity:0.8;
    padding-left:3%;
    font-size: 18px;
    font-weight: bolder;
  }
  .top-container{
    background-color:#fff;
    min-height: 100vh;
    width:100%;
    background-image:url("./indexpageimages/robotfrontpage.gif");
    background-position: right;
    background-repeat: no-repeat;
    background-size: 70%;
    padding-bottom:5%;
    background-attachment: fixed;
  }
  .content-top h1{
    font-weight: 600;
    font-size: 40px;
  }

  /*anime js*/
  .ml4 {
    position: relative;
    font-weight: 600;
    font-size: 40px;
  }


  .products, .mvp, .awards, h4{
    font-weight:500;
     font-size: 25px;
     color:black;
  }
  .products, .mvp, .awards, h5{
  font-weight:500;
  color: #0492c2;
  }

  #aboutus{
    padding:0% 8%;
    padding-bottom: 3%;
    background-color: #38acec;
    color:#fff;
    font-weight: bolder;
    position: relative;

  }
  #aboutus h1{
    margin-right: 10%;
    color: #fff;
  }
  .approach img{
    padding-right:6%;
  }

  .containerh1{
    text-align:center;
    padding: 3%;
    color: #0492c2;
    font-weight: 600;
    font-size: 40px;
  }
  .containerh1 hr{
    border: 2px solid;
    border-radius: 2px;
    width: 9%;
    margin-left: 45%;
  }

}



/*****************************************************************************************************/
/* Domain section */
.domain-section{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:100vh;
  background-color:#fff;
  padding-bottom:3%;
}


.domain-container{
  position: relative;
  width:1300px;
  display:flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  flex-wrap: wrap;
}
.domain-container .grid-box{
  position: relative;
  width:350px;
  height:280px;
  background-color: #0492c2;
  border-radius: 20px;
  overflow:hidden;
}

.domain-container .grid-box .icon{
  position: absolute;
  top:0px;
  left:0;
  width: 100%;
  height: 100%;
  background-color: var(--i);
  transition: 0.5s;
  display:flex;
  justify-content: center;
  align-items: center;
  color:white;
  font-size:30px;
  z-index: 2;
  transition-delay: 0.25s;
}
.domain-container .grid-box .icon .aiml{
  /* width: fit-content;
  height: fit-content; */
  top:30px;
  left:calc(50% - 40px);
  width:100px;
  height:80px;
  border-radius: 50%;
  transition-delay: 0s;
  
}
.domain-container .grid-box:hover .icon{
  top:30px;
  left:calc(50% - 40px);
  width:100px;
  height:80px;
  border-radius: 50%;
  transition-delay: 0s;
}

.domain-container .grid-box .content{
  position:relative;
  padding: 20px;
  color:white;
  text-align: center;
  margin-top: 100px;
  z-index: 1;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
}
.domain-container .grid-box:hover .content{
  transform: scale(1);
  transition-delay: 0.25s;
}

.domain-container .grid-box .content p{
  font-size: 14px;
  font-weight: bolder;
  line-height: 1.5em;
}

.domain-container .grid-box .content h3{
margin-top: 10px;
margin-bottom: 5px;
font-size: 2rem;
}



/* About us Area */
#aboutus{
  padding:0% 8%;
  padding-bottom: 3%;
  background-color: #38acec;
  color:#fff;
  font-weight: bolder;
  position: relative;
}

#aboutus h1{
  margin-right: 10%;
  color: #fff;
}



/* APPROACH AREA */
.approach{
  background-color: #38acec;
  padding: 3%;
}
.approach h1{
  color: #fff;
}
.approach img{
  display: flex;
  width:100%;

}

#ourpartners{
  padding: 5% 8%;
  position: relative;
  text-align: center;
  background-color: #fff;
}
#ourpartners p{
  margin-left: -20px;
  font-weight: bolder;
  font-size:18px;
}

.footer{
  padding:5% 8%;
  position: relative;
  font-weight: bolder;

}

/* chatbot*/
#box{
width: 400px;
height: auto;
box-shadow: 5px 5px 20px #000;
position: fixed;
top: 65%;
left: 75%;
transform: translate(-50%, -50%);
z-index: 3;
display: none;
}
.top{
width: 100%;
height: auto;
z-index: 3;
background: #2a2f32;
}
.top h1{
margin: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
text-align: center;
font-family: monospace;
}
.mid{
width: 100%;
height: auto;
background: white;
}
.mid .chat{
width: 100%;
background: white;
}
.mid .chat h2{
margin: 0;
font-size: 20px;
color: #000;
background: white;
padding: 30px 20px;

}
.mid .chat p{
margin: 0;
font-size: 20px;
background: white;
padding: 50px 20px;
color: black;
font-weight: 600;
letter-spacing: 0.04;
}
.input{
width: 100%;
height:auto;
overflow: hidden;
}
.input input{
width: 80%;
height: auto;
outline: none;
border: none;
padding-top: 0;
font-family: cursive;
color: black;
font-size: 20px;
background: white;
padding: 25px;
}
.button{
float: right;
width: 20%;
height: 79px;
background: white;
color: #2a2f32;
padding: 20px;
font-size: 15px;
cursor: pointer;
border: none;
outline: none;

}
.chat{
  float:right;
  margin-top:17px;
  background-color: white;
}
.button1{
height: auto;
float: right;
background: #2a2f32;
color: white;
}
/*.btn{
color: deeppink;
background: black;
border-radius: 25px;
font-weight: 900;
box-shadow: 5px 5px 20px #000;
}*/


/* count 300 */
.no_count{
  color: #000000a2;
}
.num:after{
  content: "+";
  display: inline;
}