*                                                        
body {                                                   
margin: 0;  
font-family: Arial, Helvetica, sans-serif;
background-color:#edeeef;
}                                                        
                                                         
/*for navigation bar*/                                   
.logo{   
margin: 0;   
height: 65px;    
width: 250px;
display: block;        
overflow: hidden;
margin-left: auto;
margin-right: auto;
}        

                                                         
.topnav {                                                      
    background-color: #213dde;
    color: white;
    overflow: hidden;
    position: fixed;
    margin-left: 0;
    top: 0;
    width: 100%;                                   
}                                                        
.topnav a{ 
    float:left;
    display:inline-block;                                       
    color: white;                                      
    text-align: center;                                  
    padding: 10px 10px;  
    font-size: 20px;
    text-decoration: none;
    
}                                                        
.topnav a:hover{                                              
  opacity: 0.20;
  color:black;
  
}

.topnav a.active {
  background-color: #0c1464;
  color: white;
}
@media screen and (max-width: 500px) {
    .logo {
    margin-left: auto;
    margin-right: auto;
    top: 0;
    padding: 5px;
    }
    .topnav a{
    padding: 5px;
    font-size: 15px;
    }
    }

@media screen and (max-width: 500px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;

  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
   ;
  }
}



/*end of navbar css */


/*css for footer from */
footer{
	position: inherit;
	bottom: 0;

}
 
@media (max-height:800px){
	footer { position: static; }
	header { padding-top:10px; }
        
}
 
 
.footer-distributed{
    /*whole footer bg*/
	background-color: #0c1464;
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 50px 50px 60px 50px;
	margin-top: 80px;
}
 
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right,
.section .about,
.section .store
{
	display: inline-block;
	vertical-align: top;
}
 
/* Footer left */
 
.footer-distributed .footer-left{
	width: 30%;
}
 
.footer-distributed h3{
	color:  black;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}
 
/* The company logo */
 
.footer-distributed .footer-left img{
	width: 65%;
}
 
.footer-distributed h3 span{
	color: blue;
}
 
/* Footer links */
 
.footer-distributed .footer-links{
    font-size: 13px;
	color:  white;
	margin: 20px 0 12px;
}
 
.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}
 
.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}
 
/* Footer Center */
 
.footer-distributed .footer-center{
	width: 35%;
}
 
 
.footer-distributed .footer-center i{
    /*circle bg*/
	background-color:  #213dde;
	color: white;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}
 
.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}
 
.footer-distributed .footer-center p{
	display: inline-block;
	color: white;
	vertical-align: middle;
	margin:0;
}
 
.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}
 
.footer-distributed .footer-center p a{
	color:  blueviolet;
	text-decoration: none;;
}
 
 
/* Footer Right */
 
.footer-distributed .footer-right{
	width: 30%;
}
 
.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  white;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}
 
.footer-distributed .footer-company-about span{
	display: block;
	color:  white;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
 
.footer-distributed .footer-icons{
	margin-top: 25px;
}
 
.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	
 
	font-size: 20px;
	color: white;
	text-align: center;
	line-height: 35px;
 
	margin-right: 3px;
	margin-bottom: 5px;
}
 
/* Here is the code for Responsive Footer */
/* You can remove below code if you don't want Footer to be responsive */
 
 
@media (max-width: 880px) {
 
	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right,
        .section .about,
        .section .store,
        .homeImage .navigationbar{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}
 
	.footer-distributed .footer-center i{
		margin-left: 0;
	}
        
}

.fa {
  padding: 10px;
  font-size: 50px;
  width: 13px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}

.fa:hover {
    opacity: 0.10;
}

.fa-facebook {
    background-color:  #213dde;
  color: white;
  
}

.fa-twitter {
    background-color:  #185cfa;
  color: white;
}

.fa-google {
    background-color:  #fa031b;
  color: white;
}

.fa-youtube {
    background-color:  #f40818;
  color: white;
}

.fa-instagram {
    background-color:  #C13584;
  color: white;
}
article{
       float: right;   
       width: 20%;
       min-height: 400px;
       margin-top:-420px;
       border-color: #080808;
       text-align: center;
}

article{
       float: right;   
       width: 20%;
       min-height: 400px;
       margin-top:-420px;
       border-color: #080808;
       text-align: center;
}
/* end of footer css*/

/* about us css */

.about {
    width: 50%;
    height: 70%;
    border-color: black;
    margin-right: auto;
    margin-left: auto;
    font:  19px Arial;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: justify;
    letter-spacing: 3px;
    line-height: 2.5;
    font-style: normal;
}


@media screen and (max-width: 500px) {
.about{
    width: 95%;
    margin: 15px; 
    text-align: center;
    
}
}

.iziphome {
    width: 25%;
    height: 230px;
    margin-left: 60px;
    float: left;
    overflow: auto;
    
}

@media screen and (max-width: 500px){
.iframeh {
    width: 100%;
}
.iziphome{
    width: 30%;
    height: 30%;
    margin-left: 10px;
    
}
}
.pichome {
    width: 500px;
    height: 700px;
}
.divHome{
    width:100%; height:600px; background-color:white; margin-left: auto; margin-right: auto;
    text-align: center; color:#282828;
    overflow: static;
}
.iframe1 {
    float: left;
}
.iframe2 {
    float: right;
}

/*product page css*/
.prodcontainer{
    width:100%;
    height:600px;
    background: white;
}
.prodname{

    height:25px;
    width:96.75%;
    border: none transparent;
    outline:none;
    background : #213dde;
    text-align:center;
    font:40px;
    padding:30px;
    font-weight: bold;
}
.prodnimage {
    display:block;
    margin-left: 50px;
    margin-top:30px;
    width:200px;
    height:201px;
    align:center;
    
    
}
.prodecs{
    display:block;
    margin-left: 350px; 
    margin-top:-200px;
    width:605px;
    height:299px;
    background : white;
    text-align:justify;
    padding: px;
    text-justify:auto;
}

@media screen and (max-width: 500px){
.prodcontainer {
    width: 100%;
    height:950px;
    background: white;
}

.prodname{
   width: 90%; 
   text-align:center;
    font:30px;
    overflow: static;
}

.prodnimage {
    width:200px; 
    height:200px;
    margin-top:5px;
    margin-left: auto; 
    margin-right: auto;

}

.prodecs{
    width:90%;
    margin-top:15px;
    margin-left: auto; 
    margin-right: auto;
    padding: 10px;

    
}

}
/*end of products css*/

@media screen and (max-width: 500px) {
.order{
    width: 90%;
    margin: 15px; 
    
    
}
}