navbar.css

*{
   font-family: 'Lato', sans-serif;
   margin: 0%;
   padding: 0%;
}

.navBar {
   width: 100%;
   display: flex;
   height: 50px;
   align-items: center;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   display: flex;
   justify-content: space-between;
 }
  
 .logo {
   font-size: 26px;
   margin: 20px;
   display: flex;
   justify-content: flex-start;
 }
  
 .menu {
   display: flex;
   justify-content: center;
   font-size: 12px;
   font-weight: bold;
 }
 
 .menu:hover {
   text-decoration: underline;
 }
  
 .material-icons {
   display: flex;
   justify-content: space-around;
 }
  
 .tool {
   width: 100%;
   display: flex;
   margin: 20px 20px;
 }
  
 a,
 a:hover,
 a:focus,
 a:active {
   text-decoration: none;
   color: inherit;
 }
 




/* end of navbar style */

/* START OF INSTALLATION */


#install{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: auto;
/* gap: 20px; */
/* border: 1px solid #f8f7f6; */
background-color: #f8f7f6;;
width: 100%;
margin: auto;
/* margin-bottom: 60px;
margin-top: 20px; */
margin: 20px 0px 60px 0px;

}
#install>div{
/* border: 1px solid black; */
text-align: center;
margin-top: 20px;
background-color: #f8f7f6 ;
}
.download{
height: 400px;
}
#mobile{
height: 500px;
margin-top: 20px;
width: 250px;
}
.imo{
   width: 500px;
}
.btn{
background-color: black;
color: white;
height: 30px;
width: 180px;
}
/* end of installation */
#line{
text-align: center;
font-size: x-large;
font-weight: bold;
}
/* start of footer */
#footer{
height: 400px;
display: grid;
grid-template-columns: repeat(5,1fr);
grid-template-rows: auto;
gap: 20px;
margin-top: 50px;
margin-bottom: 0%;
}

#footer>div{
/* border: 1px solid violet; */
text-align: center;
}
#footer>div>p{
font-size: larger;
font-weight: bold;
/* line-height: 40px; */
}
#footer>div>p:hover{
color: red;
}
#input{
height: 20px;
width: 90%;
}
/* endlogos */
#endlogos{
   width: 10%;
display: grid;
grid-template-columns: repeat(5,25px);
grid-template-rows: auto;
gap: 10px;
height: 40px;
margin: auto;
margin-top: 30px;
/* border: 1px solid green; */
margin-left: 1600px;

}
.endlogo{
height: 30px;

}
.endlogo>div{
  
   display: inline-block;
  margin: auto;
  margin-right: 40px;

}

 /* start of first slide show-1  */
 .caruser{
    height: 400px;
    width: 90%;
    margin: auto;
  /* border: 1px solid coral; */
  position:relative;
  margin-top: 20px;
  margin-bottom: 40px;
}

.caruser>img{
   width: 100%;
   /* height: 500px; */
}
.caruser>button{
   position: absolute;
   top:50%;
   border-radius: 100%;
   font-size: 20px;
   color: black;
   width: 50px;
   height: 50px;
   background-color: transparent;
   border:3px solid burlywood
}
.caruser>button:hover{
   background-color: rgba(57, 92, 156,.5);
}

.caruser>button:nth-child(2){

left:1%;

}

.caruser>button:nth-child(3){

  right: 2%;
   }

/* css for second slide */
 
.parent{
   display: flex;
justify-content: center;
align-items: center;
height: 400px;
/* border: 1px solid red; */
margin-top:100px;
margin-bottom: 150px;
}
.child{
   height: 500px;
width: 33%;
margin-left: 10px;
margin-right: 10px;
display: none;
/* border: 1px solid green; */
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
/* background: linear-gradient(#e66465, #9198e5); */
}
.child img {
height: 200px;
width: 100%;
}

#leftarrow , #rightarrow  {
margin: 13px;
width: 3%;
display: inline-block;
}
#leftarrow button , #rightarrow  button{
font-weight: bold;
cursor: pointer;
font-size: 15px;
border-radius: 100%;
height: 40px;
width: 40px;
border: 4px solid black;
}

.child>button{
color: white;
background-color: black;
height: 50px;
margin-left: 65px;
cursor:pointer;
margin-bottom: 30px;
}
.child>h2{
text-align: center;
margin-top: 20px;
}

.views{
   height: 50px;
   width: 80%;
margin: auto;
display: block;
font-size: large;
font-weight: bold ;
background-color: white;
color: white;
border-color: white;
border: none;
cursor:pointer;
}

.views:hover{
   background-color:transparent;
   color: black;
   border: 1px solid black;
}


#heading{
   
   color: black;
  
  text-align: center;
  
   
} 
#heading>h2{
   font-size:xx-small;
   
}


#h{
   text-align: center;
}
#bttn{
  margin-left: 50%;
  margin-top: 40px;

}


#bttn>button{
   height: 40px;
   width: 100px;
   font-size: 15px;
}

#bttn>button:hover{
   background-color: black;
   color: white;
}



/* start of slide 3 */
.splide__arrow--next svg{
   position: relative;
   top: 0;
   left: 35px;
}
.splide__arrow--prev svg{
   position: relative;
   top: 0;
   right: 35px;
}
.box{
width: 350px;
height: 650px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
margin: auto;
margin-bottom: 50px;
}
.product-img{
width: 340px;
height: 400px;
}
img{
width: 80%;
margin-left: 5px;

}
.product-info{
width: 300px;
height: 250px;
margin-top: 70px;
margin-left: 20px;
text-align: center;
}
.container{
width: 93%;
margin: auto;
}

.splide__arrow svg {
fill: black;
}

/* for mediam screeen */


@media all and (min-width:480px) and (max-width : 720px)
{
   #crowimg{
      margin: auto;
      margin-top: 120px;
     
   }
   .caruser > img {
      width: 100%;
      margin: auto;
  }
.caruser>button{
   top:172px;
   height: 35px;
width: 35px;
}
.caruser>button:nth-child(3) {
  right:60px
}



   #navbar{
      height: 60px;
      width: 50%;
      /* border: 1px solid black; */
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-template-rows: repeat(4,1fr);
    
   font-size: medium;
   padding:30px ;
       margin-right: -200px;
       margin-top: - 40px ;
      }











}