/*-------------common-------------------*/

body
{
    width: 100%;
    margin: 0;
    padding: 0;
}
.main
{
    width:100%;
    margin-top:-1%;
}

.head
{
    display:flex;
    width:100%;
    position: fixed;
    z-index: 7;
   background-color: white;
   
}
.logo
{
    width:23%;
    margin-top:2%;
    margin-left:2%;
   
  

}

.logo img
{
    width: 200px;
   height: 120px;
  }


@media screen and (max-width:800px)
{


 

    .logo img
    {
        width:120px;
        height:70px;
    }
}




nav
{
    width: 75%;
    float: right;
    margin-top: 2%;
}

nav ul {
    display: flex;
    float: right;
}

nav ul li {
    padding: 18px;
    list-style: none;
}

nav ul li a 
{
    text-decoration:none;
    color:black;
    font-size:20px;
}

nav ul li a.active
{
    color: rgb(3 155 209);
   
}

nav ul li a:hover
{
 border-bottom: 1px solid  rgb(3 155 209);
}




nav ul li ul
{
    display: none;
    position: absolute;
     width: auto;
    margin-left: -5%;
    

}
nav ul li:hover ul
{
    display:block;
 
   

}
nav ul li ul li 
{

 width:100%;
 padding:5%;
 border-bottom:1px solid #00b8e6;
 background-color:rgb(3 155 209);
 
  
 }


nav ul li ul li a
{
   font-size:15px;
   color:white;
   background-color: transparent;
   font-size:18px;
   
}

nav ul li ul li:hover
{ 
   background-color:grey;
 
}
nav ul li ul li a:hover
{
    border-bottom: none;
}



.middle
{
    background-color: rgb(216 38 28);
      color:white;
      padding:8%;
      border-radius:4%;
    
}


@media screen and (max-width:800px)
{

    .logo
    {
        width: 33%;
        margin-left: 2%;
    }
nav 
{
    width: 55.5%;
    margin-top:0%;
    margin-left:0%;
}
  nav ul
    {
   display:grid;
    }

    nav ul li
    {
     padding:5px;
    }

    nav ul li a
    {
        font-size:15px;
    }

    .middle
    {
        margin-left:-3%;
    }
}
footer
 {
     width:100%;
     margin-top:10%;
     border-top:1px solid grey;
     
 }
.foot
{
display:flex;
width:100%;
}


.feet1
{
    display:flex;
    width:33%;
  

}

.abt2
{
    margin-left:12%;
}


.abt4
{
    margin-left:5%;
}
.feet2
{
    display:flex;
    width:40%;
   
}


.foot nav
{
    width:20%;
    margin-left:3%;
    
}

.foot ul
{
    list-style-type:none;
    margin-left:-13%;
margin-top:-5%;
font-size:18px;
}

.foot ul li 
{
    margin-top:1%;
}

.foot ul li a 
{
    color:black;
    text-decoration:none;
}

.foot ul li a:hover
{
    color:lightgrey;
}

.abt 
{
    width:18.8%;
}

.abt h1
{
    margin-top:10%;
    font-size:35px;
}



@media screen and (max-width:800px)
{
  .foot
    {
  display:grid;
    }

    .feet1
    {
       margin-left:3%;
        width:97%;
    }
   
    .feet2
    {
        margin-left:3%;
        width:97%; 
    }

    .foot ul
    {
        margin-left:-21%;
    }

    .foot ul li a 
    {
        font-size:15px;
    }
  .foot h1
  {
      font-size:25px;
  }

}


.foot2
{
    background-color:black;
    width:100%;
    height:350px;
    color:white;
    display:flex;
}

.ull
{
    width:20%;
    margin-left:10%;
   
}

.ull h1
{
   margin-left:0%;
}

.ull a
{
text-decoration:none;
margin-top:2%;
color:rgb(19, 119, 233);
}


.btn
{
    width:30%;
    margin-left:5%;
   
}

.btn a
{
color:white;
margin-left:2%;
font-size:25px;


}

.btn a:hover
{
    color:lightgrey;
}

@media screen and (max-width:800px)
{
 .foot2
    {
  display:grid;
  height:800px;
  
    }

 .ull
 {
     width:100%;
     text-align:center;
     margin-left:0%;
 }

 .ull h1
 {
     font-size:30px;
 }
 .btn
 {
    width:100%;
    text-align:center;
    margin-left:0%; 
   
 }

 .btn h1
 {
     font-size:30px;
 }

 .btn a 
 {
     font-size:20px;
     
 }

}




form
{
  width:100%;
  
}
.form
{
    width:25%;
   
}
.form h1
{
    margin-top:5%;
    font-size:35px;
}

.form input[type=text]
  {
      width:90%;
      padding:3%;
      margin-top:-5%;
}
   
.form textarea
{
    margin-top:0%;
    width:90%;
    height:40%;
}

.form input[type=button]
{
   width:90%;
   background-color:rgb(216 38 28);
   border:1px solid rgb(216 38 28);
   margin-top:1%;
   padding:3%;
   font-size:20px;
   color:white;
}

.form input[type=button]:hover
{
  
    color:black;
}

@media screen and (max-width:800px)
{
    .form
    {
   width:100%;
   margin-left:0%;
   text-align:center;

  
    }

    .form h1
    {
        font-size:30px;
    }
}


/*-----------------------------Home.html-------------------------*/



.background{

    background-image:url(/Images/banner.jpg);
    background-size:cover;
    height:600px;

   
}

.section

{
    width: 100%;
    margin-top:5%;
    text-align:center;
  

}
.section h1
{
   font-size:40px;
   color:grey;
   width:60%;
   margin-left:20%;
}

.section p
{
font-size:25px;
letter-spacing:0.02em;
width: 75%;
margin-left:13%;

}

@media screen and (max-width:800px)
{

    .background
    {
   background-image:url(/Images/456.png);
    height:395px;
    }


 .section h1
    {
    font-size:25px;
    width:100%;
    margin-left:0%;

    }

    .section p
    {
        font-size:20px;
        width:100%;
        margin-left:0%;
    }
}




.container
{
width:100%;  
margin-top:10%; 


}

.container h1
{
    text-align:center;
 color:rgb(3 155 209);

    
}

.index
{
    width: 100%;
    display:flex;
    margin-top:5%;
 
}
.services
{
    width:15%;
    margin-left:14%;
   
  
 
}
.services h2
{
text-align:center;
font-size:15px;
width:100%;
    
}

.services p
{
   text-align:center;
    font-size:20px;
   
}

.services img
{
    width:170px;
    height:160px;
    border-radius: 20%;
    border:1px solid #d5d5d5;
    margin-left:10%;
 
  -webkit-transition: 1.8s all;
}

.services img:hover
{
    transform: scale(1.04);

}

.btn2
{
  width:100%;
  background-color:rgb(3 155 209);
  border:rgb(3 155 209);
  padding:4%;


}
.btn2 a
{
 text-decoration:none;
 color:white;
 font-size:18px;

 
}

.btn2:hover
{
 background-color:rgb(216 38 28);
}

@media screen and (max-width:800px)
{
.index
{
 display:grid;
 width:99.5%;
}

.services
{
    width:80%;
    margin-top:10%;
}

.services img
{
    margin-left: 0%;
    margin-top: 0%;
   
}
.container h1
{
    font-size:28px;
}


}


.marquee1
{
    width: 80%;
    margin-left:10%;
    margin-right:10%;
    margin-top:10%;
   
}
.marquee1 h1
{
    color:rgb(3 155 209);
    text-align:center;
}

.marquee1 img
{
    width:200px;
    height:150px;
    margin-left:5%;
    margin-top:5%;
}

.heading
{
    width:100%;
    margin-top:5%;
}
.heading h1
{
    text-align:center;
    color:rgb(3 155 209);
    
}
.pictures
{
    width: 95%;
    display:flex;
    margin-left:5%;
}

.img1
{
  width:25%;
  margin-top:3%;
 
}


.img1 img
{
    width:250px;
    height:200px;
}

.img1 img:hover
{
    -webkit-filter: drop-shadow(0 0 50px rgb(3 155 209));
-webkit-transition: 1.2s;

}

h2
{
    font-size:20px;
    text-align:center;
    width:250px;
}
 

@media screen and (max-width:800px)
{

    .marquee1 h1
{
    font-size:28px; 
}


.heading h1
    {
 font-size:25px;
 width:100%;
    }

    .pictures
    {
        display:grid;
        margin-left:15%;
        width:85%;
       
    }

   .img1
   {
       width:100%;
   }
}

/*-------------------About.html----------------------*/
.background2
{
background-image:url(/Images/about-us.jpg );
background-size:cover;
height:800px;

}

.content
{
    width:100%;
    margin-top:10%;
    display:flex;

}

.left
{
    width: 30%;
    margin-left:10%;
    border:1px solid grey;
-webkit-transition: 1.8s;

}
.left img
{
    width:95.5%;
    height:250px;
    margin:2%;
}

.left:hover
{
    transform: scaleX(1.1);
    background-color:bisque;
}
.right
{
    width:45%;
   margin-left:5%;
    margin-right:10%;
    margin-top:-2%;
}

.right h1
{
    border-bottom:4px solid rgb(3 155 209);
    width:25%;
    font-size:35px;

}

.right p
{
        font-size:18px;
}

.about
{
   
    width:20%;
    height:35px;
    background-color:rgb(3 155 209);
    border:1px solid rgb(3 155 209);
    padding:1px;
    border-radius:3%;
}

.about a
{
    text-decoration:none;
    color:white;
    font-size:17px;
  

  
}

.about:hover
{
    background-color:rgb(216 38 28);
    border:1px solid rgb(216 38 28);

}

@media screen and (max-width:800px)
{
  .background2
    {
        background-image:url(/Images/about-us\ -1.jpg);
        height:390px;
    }
    .content
    {
        display:grid;
       
    }

    .left
    {
        width:90%;
        margin-left:5%;
    }

    .right
    {
        width:100%;
        text-align:center;
        margin-top:5%;
        margin-left:0%;
    }
    .right h1
    {
        margin-left:0%;
        width:90%;
        margin-left:5%;
    }

    .right p{
        margin-left:0%;
        width:90%;
        margin-left:5%;
    }

    .about
    {
        width: 50%;
        margin-left:0%; 
        text-align:center;
    }
}





.para
{
    width: 85%;
    margin-top:5%;
    display:flex;
    margin-left:15%;
}

.para1
{
    width:50%;
  
}

.para1 h1
{
    border-bottom:4px solid rgb(3 155 209);
    width:90%;
    font-size:35px;
}

.para1 p
{
    font-size:20px;
    width:90%;
}

.para2
{
    width:50%;
    
   
 
}

.para2 h1
{
    border-bottom:4px solid rgb(3 155 209);
    width:90%;
    font-size:35px;
 
  
}

.para2 p
{
    font-size:20px;
    width:90%;
  

}
.picture
{
    width:50%;
    margin-top:2%;
}

.picture img
{
    width:400px;
    height:300px;
    border:1px solid grey;  
}
.picture1
{
    width:42%;
    margin-top:2%;
   
   
}

.tdd
{
    width:100%;
   
    margin-top:10%;
}

.tdd p
{
    text-align:Center;
    font-size:20px;
    width:70%;
    margin-left:15%;
}
.picture1 img
{
    width:400px;
    height:300px;
    border:1px solid grey;  
}


@media screen and (max-width:800px)
{

    .tdd 
{
    margin-top:20%;
}

    .tdd h1
{
    font-size:30px;
}
  .para
    {
   display:grid;
    width:100%;
    text-align:center;
    margin-left:0%;
 
    }

     .para1
     {
         width:100%;
     }
    .para1 h1
    {
     
        width:95%;
        margin-left:3%;
        font-size:23px;
    }
    .para1 p
    {
        width:90%;
        font-size:18px;
    margin-left:5%;
    }

    .picture
    {
   width:100%;
   margin-top:10%;
    }
    .picture img
    {
        width:300px;
        height:300px;
    }
    .para2
    {
        width:100%;
    }
   .para2 h1
   {
    
       width:94%;
       margin-left:3%;
       font-size:23px;
   }

   .para2 p
   {
    font-size:18px;
    margin-left:5%;
   }
   .picture1
   {
  width:100%;
  margin-top:10%;
   }
   .picture1 img
   {
       width:300px;
       height:300px;
   }

}
/*------------------contact.html-------------------*/

.background1
{
    background-image:url(/Images/2.png);
    background-size:cover;
    height:500px;
}


.toop
{
    width:100%;
    margin-top:5%;

}

.toop h1
{
    text-align:center;
    width:100%;
    font-size:30px;
}

.toop p
{
    text-align:center;
    width: 100%;
    font-size:20px;
    margin-top:-1%;
}

.boxes
{
    width:100%;
    margin-top:5%;
    display:flex;
    
}

.box1
{
    width:20%;
   border: 1px solid rgb(233, 211, 211);
    margin-left:10%;
    height: 180px;
    text-align:center;


}

.btt i
{
  
    width: 100%;
    margin-top:-9%;
    font-size:50px;
    color:rgb(3 155 209);
    margin-bottom:5%;
}

.bt
{
font-size:30px; 
}


.bt1 a
{
  
    color:black;
    text-decoration:none;
}

.butt button

{
  margin-top:6%;
  color:white;
  background-color:rgb(3 155 209);
  border:1px solid rgb(3 155 209);
  font-size: 20px;
  padding:2%;
}

.butt button:hover
{
    color:white;
    background-color:rgb(216 38 28);
    border:1px solid rgb(216 38 28);
}


@media screen and (max-width:800px)
{
 .background1
    {
   background-image:url(/Images/2231.png);
   height:375px;
    }

    .boxes
    {
        display:grid;
        width:100%;
    }

    .box1
    {
        margin-top:10%;
        width:85%;
        margin-left:7%;
    }
}

.oip
{
    width: 80%;
    display:flex;
    margin-top:5%;
    margin-left:20%;
}

.location
{
    width:44.2%;
  
}

.location img
{
    width:500px;
    height:450px;
    border:1px solid red;
}



.form2
{
width:30%;
box-shadow: 0 0 10px 2px rgb(0 0 0 );
}

.form2 input
{


 width:30%;
 padding:2%;
 border:1px solid #d9d9d9;
 margin-bottom:5%;
}
.form2 input[type=text]
{
    width:95%;
    color:#6a6a6a;
    
}

.label
{
   font-size:20px;
   margin:7%;
   
}

.form2 input[type=button]
{
  margin-top:8%;
  background-color:rgb(3 155 209);  
  border-radius:5%;
  font-size:17px;
  border:1px solid rgb(3 155 209);
  color:white;

 
}
.form2 input[type=button]:hover
{
  color:white;
  background-color:rgb(216 38 28);
  border:rgb(216 38 28);
}




   
.form2 textarea
{
    width:95%;
    
}

@media screen and (max-width:800px)
{
    .oip
    {
   display:grid;
   width:100%;
   margin-left:0%;
    }

    .location
    {
    margin-left:2.5%;
    }

    .location img
    {
        width:340px;

    }

    .form2
    {
        margin-top:10%;
        width: 90%;
        margin-left:5%;
    }
}


/*----------------product.html--------------*/

.services1
{
    display:flex;
    width:80%;
    margin-top:5%;
    margin-left:15%;
}




.img2
{
 margin-left:5%;
}

.img2 img
{
    width:170px;
    height:160px;
    border-radius: 20%;
    border:1px solid #d5d5d5;
   
 
  -webkit-transition: 1.8s all;
}

.img2 img:hover
{
    transform: scale(1.2);

}

.container p
{
 width:60%;
margin-left:19%;
margin-top:2%;
font-size:18px;
background: #EBE8E8;
padding:1%;
border-radius:2.5%;
letter-spacing: 0.01em;
}



/*---------------------labels.html-------------------------*/
.labels
{
width:85%;
display:flex;
margin-top:4%;
margin-left:15%;
}

.data
{
 margin-left:10%;
}

.data img
{
    width:170px;
    height:160px;
    border-radius: 20%;
    border:1px solid #d5d5d5;
   
 
  -webkit-transition: 1.8s all;
}

.data img:hover
{
    transform: scale(1.2);

}

/*---------------website.html--------------*/
.web_name
{
    margin-top:10%;
    width:85%;
    margin-left:15%;
    
}
.web_banner
{
    margin-top:1%;


}
.web_name p
{
    width:75%;
  
    margin-top:2%;
    font-size:18px;
    background: #EBE8E8;
    padding:1.5%;
    border-radius:2.5%; 
    letter-spacing: 0.01em;
}

.web_name a
{
    text-decoration:none;
}

.web_name a:hover
{
    color:rgb(216 38 28);
}