*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    
    list-style: none;
    text-decoration: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;; 

}


/*                                                      navbar ---------------------------------------------*/
input{
    display: none;
}
nav{
    display: flex;
    justify-content: space-between;
    padding: 0 2.5%;
    height: 90px;
    line-height: 75px;
    background: blue;
    position: relative;
    
}
nav a.navbar-brand h1{
    color: white;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: bold;
    
    
}
nav a{
    display: flex;
}
nav .navbar-brand img{
    height:40px ;
    width:40px;
    margin-top: 18px;
    margin-right: 5px;
}
nav .nav-list{
    display: flex;
  
   
    
}
nav .nav-item{
    cursor: pointer;
    height: 100%;
    padding: 0 30px;
    transition: .4s;
}
nav .nav-item .nav-link:hover{
    margin-top: 10px;

}
nav .nav-list .nav-link{
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    
}
body{
    display: flex;
    flex-direction: column;
}

/*-----------navbar end-------------------------------------------------*/
#hr1{
    margin-top: 10%;
    background-color: black;
    height: 30px;
    border: none;
}

/*-------------------------------------------------Body---------------------------------------------------------*/


.contain0{
    
    text-align: center;
    padding-top: 5%;;
}
.contain0 #ourproducts{
   text-align: center;
   
   

}

.contain0 #ourproducts p{
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: bold;
    color: blue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-bottom: 35px;

}


.top0{
    
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 30px;
    padding-top: 30px;
}

.top0 .box0{
    position: relative;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    /* width: 37rem; */
    border-radius: 5px;
    background-color:whitesmoke;
    box-shadow: 0 6px 20px grey;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 40px;
    max-width: 30%;
    flex:0 0 30%;
    height: 480px;

}
.top0 .box0:hover{
    transform: translateY(20px);

}
.box0 img{
    width:300px ;
    height: 300px;
}
.box0 .m-body-name{
       font-size: 20px;
       padding-top: 10px;
       text-transform: capitalize;
}
.box0 button{
    margin: 12px 18px;
   padding: 12px 18px;
   text-align: center;
   font-size: 15px;
   color:rgb(255, 255, 255);
  border: none;
   border-radius: 25px;
   background:blue;
   font-weight: bold;
   cursor: pointer;
   
}
.box0 button:hover{
    transform: translateX(5px);
}
/*------------------------------------------------------End-----------------------------------------------------*/
@media(max-width:1300px){
   
    #hr1{
        margin-top: none;
        background-color: black;
        height: 30px;
        border: none;
    }
    .top0 .box0{
        position: relative;
        padding-left: 30px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        /* width: 37rem; */
        border-radius: 5px;
        background-color:whitesmoke;
        box-shadow: 0 6px 20px grey;
        box-sizing: border-box;
        overflow: hidden;
        padding-top: 40px;
        max-width: 30%;
        flex:0 0 30%;
        height: 400px;
    
    }
    .top0 .box0:hover{
        transform: translateY(20px);
    
    }
    .box0 img{
        width:250px ;
        height: 250px;
    }
    .box0 .m-body-name{
        font-size: 16px;
        padding-top: 10px;
        text-transform: capitalize;
    }
    .box0 button{
        margin: 11px 17px;
       padding: 11px 17px;
       text-align: center;
       font-size: 14px;
       color:rgb(255, 255, 255);
      border: none;
       border-radius: 25px;
       background:blue;
       font-weight: bold;
       
    }
    
  
   
}
@media(max-width:1120px){
    nav{
        padding: 0 2.5%;
    }
    nav .navbar-brand{
        color: white;
        font-size: 28px;
        text-transform: uppercase;
        font-weight: bold;
        
        
    }
    nav .nav-list .nav-link{
        color: white;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        
    }
    .contain0 #ourproducts p{
        text-align: center;
        font-size: 25px;
        text-transform: uppercase;
        font-weight: bold;
        color: blue;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        padding-bottom: 35px;
    
    }
    .top0 .box0{
        position: relative;
        padding-left: 30px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        /* width: 37rem; */
        border-radius: 5px;
        background-color:whitesmoke;
        box-shadow: 0 6px 20px grey;
        box-sizing: border-box;
        overflow: hidden;
        padding-top: 40px;
        max-width: 30%;
        flex:0 0 30%;
        height: 370px;
    
    }
    .top0 .box0:hover{
        transform: translateY(20px);
    
    }
    .box0 img{
        width:200px ;
        height: 210px;
    }
    .box0 .m-body-name{
        font-size: 13.5px;
        padding-top: 10px;
        text-transform: capitalize;
    }
    .box0 button{
        margin: 10px 16px;
       padding: 10px 16px;
       text-align: center;
       font-size: 12px;
       color:rgb(255, 255, 255);
      border: none;
       border-radius: 25px;
       background:blue;
       font-weight: bold;
       
    }
    
    
    
}
@media(max-width:1010px){
    nav a.navbar-brand h1{
        color: white;
        font-size: 35px;
        text-transform: uppercase;
        font-weight: bold;
        
        
    }
    nav .navbar-brand img{
        height:35px ;
        width:35px;
        margin-top: 20px;
        margin-right: 5px;
    }
    
}  
@media(max-width:960px){
    nav a.navbar-brand h1{
        color: white;
        font-size: 32px;
        text-transform: uppercase;
        font-weight: bold;
        
        
    }
    nav .navbar-brand img{
        height:32px ;
        width:32px;
        margin-top: 22px;
        margin-right: 5px;
    }
}
@media(max-width:940px){
    nav .nav-item .nav-link:hover{
        margin-top:0px;
    
    }
    nav .nav-item:hover{
        
     background: rgb(191, 0, 255);
     }
     
     nav .nav-item .nav-link:hover{
        border:none;
        
     
     }
   nav .nav-list{
    display: grid;
    position: absolute;
    background: blue;
    width: 100%;
    top:75px;
    left:0;
    z-index: 1;
    display: none;
    transition: 0.6s;
    
   }
   nav .nav-list .nav-item{
    padding-left: 2.5%;
   
    
   }
  
   nav .nav-list .nav-link{
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    
  }
  input{
    display: none;
  }
  input:checked ~ .nav-list{
    display: flex;
   

   }
   nav .navbar-toggler{
    display: grid !important;
    display: none;
    height: min-content;
    margin: 19px -8px 0 0;
    cursor: pointer;
    
   }
nav .navbar-toggler .bar{
    width:35px;
    height: 5px;
    margin-bottom: 10px;
    background: white;
    border-radius: 10%;
    transition: 0;
   
}



input:checked ~ .navbar-toggler .bar{
    
    height: 5px;
    margin-bottom: -30px;
    width:35px;
    margin-top: 15px;
    
          
          
       
}
input:checked ~ .navbar-toggler .bar:nth-child(1){
  transform: rotate(45deg);
  
   

}
input:checked ~ .navbar-toggler .bar:nth-child(2){
   display: none;
    
    
   

}
input:checked ~ .navbar-toggler .bar:nth-child(3){
    transform: rotate(-45deg);
   

}

.contain0{
    
    text-align: center;
    padding-top: 8%;;
}
.top0{
    
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 30px;
    padding-top: 25px;
}

.top0 .box0{
    position: relative;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    /* width: 37rem; */
    border-radius: 5px;
    background-color:whitesmoke;
    box-shadow: 0 6px 20px grey;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 40px;
    max-width: 30%;
    flex:0 0 30%;
    height: 330px;

}
.top0 .box0:hover{
    transform: translateY(20px);

}
.box0 img{
    width:180px ;
    height: 190px;
}
.box0 .m-body-name{
    font-size: 11px;
    padding-top: 10px;
    text-transform: capitalize;
}
.box0 button{
    margin: 8px 14px;
   padding: 8px 14px;
   text-align: center;
   font-size: 10px;
   color:rgb(255, 255, 255);
  border: none;
   border-radius: 25px;
   background:blue;
   font-weight: bold;
   
}


}
@media(max-width:815px)
{
    
    .contain0{
    
        text-align: center;
        padding-top: 11%;;
    }
    
.top0 .box0{
    position: relative;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    /* width: 37rem; */
    border-radius: 5px;
    background-color:whitesmoke;
    box-shadow: 0 6px 20px grey;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 40px;
    max-width: 30%;
    flex:0 0 30%;
    height: 260px;

}
.top0 .box0:hover{
    transform: translateY(20px);

}
.box0 img{
    width:140px ;
    height: 150px;
}
.box0 .m-body-name{
    font-size: 9px;
    padding-top: 10px;
    text-transform: capitalize;
}
.box0 button{
    margin: 7px 13px;
   padding: 7px 13px;
   text-align: center;
   font-size: 8px;
   color:rgb(255, 255, 255);
  border: none;
   border-radius: 20px;
   background:blue;
   font-weight: bold;
   
}

}

@media(max-width:660px){
    nav .nav-item:hover{
        
     background: rgb(191, 0, 255);
     }
     nav .nav-item .nav-link:hover{
        border:none;
        
     
     }
   nav .nav-list{
    display: grid;
    position: absolute;
    background: blue;
    width: 100%;
    top:75px;
    left:0;
    display: none;
    z-index: 1;
    transition: .6s;
   }
   nav .nav-list .nav-item{
    padding-left: 2.5%;
   }
   
   nav .nav-list .nav-link{
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    
}
  input{
    display: none;
}

input:checked ~ .nav-list{
   display: flex;
    
}
nav .navbar-toggler{
    
    display: none;
    height: min-content;
    margin: 20px -6px 0 0;
    cursor: pointer;
  
}
nav .navbar-toggler .bar{
width:35px;
height: 5px;
margin-bottom: 8px;
background: white;
border-radius: 10%;
transition: 0;
}
input:checked ~ .navbar-toggler .bar{
    
    height: 5px;
    margin-bottom: -30px;
    width:28px;
    margin-top: 12px;
          
          
       
}


.contain0{
    
    text-align: center;
    padding-top: 14%;;
}

.top0{
    
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 30px;
    padding-top: 20px;
}
   
.top0 .box0{
    position: relative;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    /* width: 37rem; */
    border-radius: 5px;
    background-color:whitesmoke;
    box-shadow: 0 6px 20px grey;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 40px;
    max-width: 30%;
    flex:0 0 30%;
    height: 220px;

}
.top0 .box0:hover{
    transform: translateY(20px);

}
.box0 img{
    width:105px ;
    height: 110px;
}
.box0 .m-body-name{
    font-size: 7px;
    padding-top: 10px;
    text-transform: capitalize;
}
.box0 button{
    margin: 5px 10px;
   padding: 5px 10px;
   text-align: center;
   font-size: 6.5px;
   color:rgb(255, 255, 255);
  border: none;
   border-radius: 15px;
   background:blue;
   font-weight: bold;
   
}


}
@media(max-width:550px)
{
    .contain0{
    
        text-align: center;
        padding-top: 16%;;
    }
      
.top0 .box0{
    position: relative;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    /* width: 37rem; */
    border-radius: 5px;
    background-color:whitesmoke;
    box-shadow: 0 6px 20px grey;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 40px;
    max-width: 30%;
    flex:0 0 30%;
    height: 200px;

}
.top0 .box0:hover{
    transform: translateY(20px);

}
.box0 img{
    width:90px ;
    height: 100px;
}
.box0 .m-body-name{
    font-size: 6px;
    padding-top: 10px;
    text-transform: capitalize;
}
.box0 button{
    margin: 5px 8px;
   padding: 5px 8px;
   text-align: center;
   font-size: 5.5px;
   color:rgb(255, 255, 255);
  border: none;
   border-radius: 15px;
   background:blue;
   font-weight: bold;
   
}
}
@media(max-width:490px)
{
    .contain0{
    
        text-align: center;
        padding-top: 16%;;
    }
}

@media(max-width:440px){
    nav .nav-item:hover{
        
     background: rgb(191, 0, 255);
     }
     nav .nav-item .nav-link:hover{
        border:none;
        
     
     }
   nav .nav-list{
    display: grid;
    position: absolute;
    background: blue;
    width: 100%;
    top:75px;
    left:0;
    display: none;
    z-index: 1;
    transition: .6s;
   }
   input{
    display: none;
}
   nav .nav-list .nav-link{
    color: white;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    
   }
   nav .nav-list .nav-item{
    padding-left: 2.5%;
    padding-bottom: none;
   }
   
   input:checked ~ .nav-list{
    display: flex;
     }
     nav .navbar-toggler{
        display: grid !important;
        display: none;
        height: min-content;
        margin: 23.5px -10px 0 0;
        cursor: pointer;
        }
      nav .navbar-toggler .bar{
        width:32px;
        height: 5px;
        margin-bottom: 7px;
        background: white;
        border-radius: 10%;
        margin-right: 10px;
        transition: 0;
       }
    
    
    
    input:checked ~ .navbar-toggler .bar{
        
        height: 5px;
        margin-bottom: -18px;
        width:30px;
        margin-top: 10px;
              
           
    }
.contain0{
    
    text-align: center;
    padding-top: 18%;
    padding-bottom: 45px;
}
    .top0{
        padding-bottom: 0px;
    }
.top0 .box0{
    position: relative;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    /* width: 37rem; */
    border-radius: 5px;
    background-color:whitesmoke;
    box-shadow: 0 6px 20px grey;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 40px;
    max-width: 30%;
    flex:0 0 30%;
    height: 170px;

}
.top0 .box0:hover{
    transform: translateY(20px);

}
.box0 img{
    width:70px ;
    height: 80px;
}
.box0 .m-body-name{
    font-size: 4.3px;
    padding-top: 6px;
    text-transform: capitalize;
}
.box0 button{
    margin: 5px 8px;
   padding: 5px 8px;
   text-align: center;
   font-size: 4.5px;
   color:rgb(255, 255, 255);
  border: none;
   border-radius: 15px;
   background:blue;
   font-weight: bold;
   
}

}
@media(max-width:400px){
    .contain0{
    
        text-align: center;
        padding-top: 20%;;
    }
}
@media(max-width:360px){
    .contain0{
    
        text-align: center;
        padding-top: 22%;;
    }
}