*{

    margin: 0px;

    font-family: verdana, Arial, Helvetica, sans-serif;

}



.nav{

  width: auto;

  margin-left: 35px;

  margin-right:35px;

  height: 15vh;

  margin-bottom:4%;
}

.logo{

  width: 13%;

  height: 100%;

  float: left;

}

.logo img{

  width: 100%;

  padding-top: 27px;

}

.icon{

  float: right;

  width: 20px;

  height: 100%;

}

.icon img{

  width: 100%;

  padding-top: 20px;

  display: none;

}

.menu{

  width: 780px;

  height: 100%;

  float: right;

}

.line{

  display: none;

}

.menu ul{

  list-style-type: none;

  margin-top: 48px;

}

.menu ul li{

  margin-left: 35px;

  display: inline-block;

  list-style:none;    

  position: relative;

}

.menu ul li a{

  font-size: 16px;

  color: black;

  text-decoration: none;

  display: block;

  text-transform: uppercase;

  line-height: 30px;

}



.menu ul li a:hover{

  color: #5385bc;

}



.menu ul ul{

  position: absolute;

  display: none;

  margin-top: 20px;

  margin-left:0px;

  background-color: #ffffff;

  margin-left: -30px;

}



.menu ul li:hover > ul{

  display: block;

}



.menu ul ul li{   

  width: 150px;

  display:list-item;

  position: relative;

  float:none;

  text-align: left;

}



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



  .nav{

      max-width: auto;

      margin-left: 100px;

      margin-right: 100px;

      height: 11vh;

      display: flex;

  }

  .logo{

      max-width: 90px;

      height: 100%;

      float: left;

  }

  .logo img{

      width: 100%;

      padding-top: 10px;

  }

  .icon{

      float: right;

      min-width: 25px;

      height: 100%;

      margin-left: 118px;

  }

  .icon img{

      width: 100%;

      padding-top: 20px;

      display: block;

  }

  .line{

      border-top: 4px solid red;

  }

  .menu ul{

      width: 80%;

      position: absolute;

      top: 35px;

      z-index: 2;

      left: 10%;

      right: 10%;

      background-color: white;

  }

  .menu ul li{

      text-align:left;

      display: block;

      margin-top: 20px;

      margin-bottom: 20px;

      border-bottom: 1px solid rgb(235, 230, 230);

      margin-left: 5%;

      margin-right: 5%;

  }

  .menu ul li a{

      color:black;

      font-size: 17px;

      padding-bottom: 10px;

  }

  .active{

      padding-bottom: 1px;

      border-bottom: 2px solid white;

  }

  #menulist{

      overflow: hidden;

      transition: 0.5s;

  }

  .content{

      width: 800px;

      margin-left: auto;

      margin-right:auto;

      display: flex;

  }
  .mini{

      width:100%;

      height: 100%;

      position: absolute;

      display: flex;

      flex-direction: row;

  }

  .left{

      width: 60%;

      float: left;

      position: relative;

  }

  .main{

      width: 470px;

      height: 100%;

  }

  

}



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

  .nav{

      max-width: auto;

      margin-left: 100px;

      margin-right: 100px;

      height: 11vh;

      display: flex;

  }

  .logo{

      max-width: 90px;

      height: 100%;

      float: left;

  }

  .logo img{

      width: 100%;

      padding-top: 25px;

  }

  .icon{

      float: right;

      min-width: 25px;

      height: 100%;

      margin-left: 118px;

  }

  .icon img{

      width: 100%;

      padding-top: 20px;

      display: block;

  }

  .menu ul{

      width: 80%;

      position: absolute;

      top: 35px;

      z-index: 2;

      left: 10%;

      right: 10%;

      background-color: white;

  }

  .menu ul li{

      text-align:left;

      display: block;

      margin-top: 20px;

      margin-bottom: 20px;

      border-bottom: 1px solid rgb(235, 230, 230);

      margin-left: 5%;

      margin-right: 5%;

  }

  .menu ul li a{

      color:black;

      font-size: 17px;

      padding-bottom: 10px;

  }

  .active{

      padding-bottom: 1px;

      border-bottom: 2px solid white;

  }

  #menulist{

      overflow: hidden;

      transition: 0.5s;

  }

  

}

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

  .nav{

      max-width: auto;

      margin-left: 35px;

      margin-right: 50px;

      height: 11vh;

      display: flex;

  }

  .logo{

      min-width: 85px;

      height: 100%;

      float: left;

  }

  .logo img{

      width: 100%;

      padding-top: 10px;

  }

  .icon{

      float: right;

      min-width: 20px;

      height: 100%;

      margin-left: 118px;

  }

  .icon img{

      width: 100%;

      padding-top: 20px;

      display: block;

  }

  .menu ul{

      width: 80%;

      position: absolute;

      top: 35px;

      z-index: 2;

      left: 10%;

      right: 10%;

      background-color: white;

  }

  .menu ul li{

      text-align:left;

      display: block;

      margin-top: 20px;

      margin-bottom: 20px;

      border-bottom: 1px solid rgb(235, 230, 230);

      margin-left: 5%;

      margin-right: 5%;

  }

  .menu ul li a{

      color:black;

      font-size: 17px;

      padding-bottom: 10px;

  }

  .active{

      padding-bottom: 1px;

      border-bottom: 2px solid white;

  }

  #menulist{

      overflow: hidden;

      transition: 0.5s;

  }

  

}





/*Homepage*/

.section-1 {

    overflow-x: hidden;

    overflow-y: hidden;

    background-repeat: no-repeat;

    float: left;

    width: 98%;

}



.first-heading{

    font-size: 50px;

    font-family: Georgia, 'Times New Roman', Times, serif;

    margin-bottom: 2.5%;

}





.inner-section-1 {

    margin-left:20px;

   

    margin-right:20px;

    margin-bottom:25px;

    padding-top:8%;

    padding-left:50px;

    width: 56%;

    float:left;

}



.inner-section-2 {

    margin-top: 3%s;

    

}



h1 {

    font-size: 58px; 

    font-family: Georgia, 'Times New Roman', Times, serif; 

    color: black; 

    font-weight: 900;

    letter-spacing: 0px;

}



.H{

    font-size:38px;

    font-weight: 300;

    color: #000000; 

    font-family: Georgia, 'Times New Roman', Times, serif;

    margin-bottom:30px;

    letter-spacing: 0.8; 

    text-transform: capitalize;

}

h3{

  font-family: Georgia, 'Times New Roman', Times, serif;

  padding-top:2%;

  padding-bottom:1%;

}



.P{

    color: #000000; 

    padding-top: 15px; 

    line-height: 1.4; 

    padding-bottom: 40px; 

    font-size:16px;

    font-family: verdana, Arial, Helvetica, sans-serif;

}



.button {

    border: none;

    color: white;

    padding: 16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    transition-duration: 0.4s;

    cursor: pointer;

    font-family: verdana, Arial, Helvetica, sans-serif;

    letter-spacing: 0.5px;

}

  

.button1 {

    background-color:#5385bc; 

    color: white; 

    border: 2px solid #5385bc;;

    border-radius:5px;

}

  

.button1:hover {

    background-color: white;

    color: #000;

    border: 2px solid #000000;

}



.butto{

    border: none;

    color: white;

    padding: 5px 5px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    transition-duration: 0.4s;

    cursor: pointer;

    font-family: verdana, Arial, Helvetica, sans-serif;

    letter-spacing: 0.5px;

    background-color: #fff;

}



/*

.section-2{

    height: auto;

    text-align: center;

    padding: 13%;

    overflow-x: 0;



}*/



.section-3{

    height:500px;

    margin-bottom: 30%;

    background-color: #eeeefc;

    padding-top: 5%;

    padding-right: 12%;

    padding-left: 12%;

    text-align: center;

}

 

.section-3-inner-section{

  

   max-width: 1540px;

}



.section-3-inner-section-row:after {

    content: "";

    display: table;

    clear: both;

}



* {     box-sizing: border-box;   }



.section-3-inner-section-column {

    float: left;

    width: 31%;

    padding: 10px 0px 10px 0px;

    margin: 75px 16px 50px 0px;

    height: auto; /* Should be removed. Only for demonstration */

    box-shadow: 0px 0px 22px 0px rgb(0 0 0 / 12%);

    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;

    border-radius: 6px;

}

.section-4{

    background-color: #eeeefc;

    height: 500px;

    margin-top:40% ;

}

.inner-1{

    float: left;

    background-color: #eeeefc;

    margin: 0px 0px 0px 0px;

    width: 50%;

    padding-top:7%;

    padding-right: 5%;

    padding-left: 5%;

    

    

}

.inner-2{

    float: right;

    width: 50%;

    overflow-x: hidden;

}

.footer{

    overflow-x: hidden;

  }

  .footer-top-bar{

    width: 100%;

    height: 5vh;

    background-color: #1d1d1d;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

 }



 .footer-bottom-bar{

  height: 50px;

  width: 100%;

  background-color: #000;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  color: #cacaca;

  font-size: 12px;

  letter-spacing: 0.8px;

  font-weight: 200;

  padding-top: 1.3%;

  padding-left: 4%;

 }



 .footer-inner-section-row:after {

  content: "";

  display: table;

  clear: both;

}



.footer-inner-section-column {

  float: left;

  width: 33.33%;

  padding-left: 8%;

  padding-bottom: 8%;

  /*padding: 30px 50px 50px 50px;*/ 

  color: #fff;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  height: 45vh;

}



/*About page*/



.About-section-1{

    width: 100%;

}



.span-1{

    float: right;

    width: 50%;

    padding-right: 5%;

    padding-left: 5%;

    padding-top: 10%;

}



.span-2{

    float: right;

    width: 50%;  

}



/*History*/

.history-section-1{

    height: auto;

    text-align: center;

    padding-top: 0.5%;

    padding-left: 13%;

    padding-right: 13%;

    overflow-x: 0;

  }

  

  .info{

    font-size: 16px;

    font-family: verdana, Arial, Helvetica, sans-serif;

    letter-spacing: 0.7px;

    line-height: 1.5;

    margin-bottom: 30px;

    padding-top: 4%;

    padding-right:4%;

    padding-left:4%;

    padding-bottom: 8%;

    text-align: justify;

    text-justify: inter-word;

  }

  

  .points{

    font-size: 16px;

    font-family: verdana, Arial, Helvetica, sans-serif;

    letter-spacing: 0.7px;

    line-height: 1.5;

    margin-bottom: 30px;

    padding-top: 4%;

    padding-right:4%;

    padding-left:4%;

    padding-bottom: 8%;

    text-align: left;

  }





/*Thin Film*/

.graph{

    float:left;

    justify-content: center;

    width:50%;

  }

  .tf-section-1{

    height: auto;

    text-align: center;

    padding-top: 0%;

    padding-left: 5%;

    padding-right: 5%;

    overflow-x: 0;

  }

  

  .tf-section-1 .info{

    padding-top:5px;

    padding-bottom: 10px;

  }

  .tf-section-1 h2{

    font-family: verdana, Arial, Helvetica, sans-serif;

    padding-left: 4%;

  }

  

  .tf-section-1 h3{

    font-family: verdana, Arial, Helvetica, sans-serif;

    padding-left: 4%;

  }

  .graph2 h3{

    padding-left:12% !important;

  }

  

  .graph2 h4{

    font-family: verdana, Arial, Helvetica, sans-serif;

    padding-left:12% !important;

  }

  

  .graph2 img{

    width:80%;

    padding-left:2%;

  }

  

  .graph2{

    float:left;

    justify-content: center;

    width:33.3%;

    padding-bottom:4%;

  }

  

  .graph3{

   float: left;

   width:50% !important;

   padding-left:2%;

   padding-top:3%;

  }

  

  .graph3 img{

    width:55%;

    padding-bottom: 6%;

  }





  /*Gallery*/

  .gallery-section-1{

    padding-top: 1%;

  }

  

  .main .gallery{

    position:relative;

    height:100%;

    width:90%;

    margin:Auto;

    padding: 45px 0;

    display:grid;

    grid-template-columns: auto auto auto;

    grid-gap:2vmin;

    grid-auto-flow:dense;

    

  }

  

  .main .gallery .img{

    position:relative;

    height: 100%;

    width:100%;

    overflow:hidden;

  }



  @media(max-width:998px)

{

  html{

    font-size: 55%;  

    overflow-x:hidden;}



    .main .gallery{

      position:relative;

      grid-template-columns: auto;

      grid-gap:2vmin;

      grid-auto-flow:dense;    

    }

    .first-heading{

      font-size: 40px;

      font-family: verdana, Arial, Helvetica, sans-serif;

      margin-bottom: 2.5%;

     }

     .inner-section-1{

       width:100%;

       padding-left:1%;

     }

     .inner-section-2 img{

      width:100%;

      padding-left:3.5%;

     }

     .section-2{

       width:100%;

     }

     .section-3-inner-section-column{

        width:auto;

        padding: 10px 10px 10px 10px;

        margin: 25px 0px 25px 0px;

     }

     .section-3{

      padding-left:3.5%;

     }    

     .span-1{

       width:100%;

     }

     .span-2{

      width:100%;

      padding-bottom: 80px;

     }

}





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



      



    .footer-inner-section-column {

      float: left;

      width: 100%;

      padding: 15px 10px 15px 10px; /* Should be removed. Only for demonstration */

      padding-left: 30px;

      color: #fff;

      font-family: Verdana, Geneva, Tahoma, sans-serif;

      height: auto;

      }  

    .footer-bottom-bar{

        height: 40px;

        width: 100%;

        background-color: #000;

        font-family: Verdana, Geneva, Tahoma, sans-serif;

        color: #cacaca;

        font-size: 10px;

        letter-spacing: 0.8px;

        font-weight: 200;

        padding-top: 3.2%;

        padding-left: 7.5%;

        }



    .contact-section-2-inner-section-column {

        float: left;

         width: 100%;}



    .title{

        font-size:28px; }

    

    .history-section-1{

        padding-right: 4%;

        padding-left: 4%;}

    }





















































































































































































































































































































































/*Lenses*/

.lenses-section-1{

    margin-left: 3%;

    margin-right: 4%;

    width: 92%;

}

.lenses-inner-1{

    float: left;

    width: 45%;

    background-color: #ffffff;

    padding: 3% 3% 0% 2%;

    box-shadow: 2px 3px 5px 2px #aaaaaa;

    margin-left: 3.4%;

}

.lenses-inner-1-1{

    width: 35%;

    float: left;

    margin-left: 0.5%;

}



.lenses-section-8{

    margin-left: 5%;

    margin-right: 5%;

    width: 90%;

}



.lenses-inner-8-1{

    float: left;

    width: 100%;

    background-color: #ffffff;

    margin-bottom: 5%;

    padding: 3% 5% 3% 5%;

    box-shadow: 2px 3px 5px 2px #aaaaaa;

}



.lenses-inner-8-2{

    

    vertical-align: middle;

}

















































/*contact page*/

.contact-section-1{

    height: auto;

    text-align: center;

    padding-top: 1%;

    padding-left: 13%;

    padding-right: 13%;

    overflow-x: 0;

  }

  .title{

    font-size:38px; 

    font-weight: 300; 

    color: #000000; 

    font-family: Georgia, 'Times New Roman', Times, serif;

    margin-bottom:30px; 

    letter-spacing: 0.8; 

    text-transform: capitalize; 

    text-align: center;

  }

  .contact-info{

    font-size: 16px;

    font-family: verdana, Arial, Helvetica, sans-serif;

    letter-spacing: 0.7px;

    line-height: 1.5;

    margin-bottom: 30px;

  }

  .contact-section-2{

    width: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    padding:2% 5% 5% 5%;

  }

  

  .contact-section-2-inner-section-row:after {

    content: "";

    display: table;

    clear: both;

    }

    

    .contact-section-2-inner-section-column {

    float: left;

    width: 31.3%;

    padding: 30px 20px 20px 20px; /* Should be removed. Only for demonstration */

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    height: auto;

    text-align:center;

    }

  

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

      .footer-inner-section-column {

        float: left;

        width: 100%;

        padding: 15px 10px 15px 10px; /* Should be removed. Only for demonstration */

        padding-left: 30px;

        color: #fff;

        font-family: Verdana, Geneva, Tahoma, sans-serif;

        height: auto;

        }  

        .footer-bottom-bar{

          height: 40px;

          width: 100%;

          background-color: #000;

          font-family: Verdana, Geneva, Tahoma, sans-serif;

          color: #cacaca;

          font-size: 10px;

          letter-spacing: 0.8px;

          font-weight: 200;

          padding-top: 3.2%;

          padding-left: 7.5%;

          }

        .contact-section-2-inner-section-column {

          float: left;

           width: 100%;}

        .title{

          font-size:28px; }

    }







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

        .nav ul{

            width: 100%;

            background: linear-gradient(#5385bc, #a9a9f1);

            position: absolute;

            top: 20px;

            right: 0;
	    
	    left: 0;

            z-index: 2;

        }

    

        .nav ul li {

            display: block;

            margin-top: 10px;

            margin-bottom: 10px;

        }

    

        .nav ul li a{

            color: #ffffff;

        }

    

        .menu-icon{

            display: block;

        }

    

        #menuList{

            overflow: hidden;

            transition: 0.5s;

        }

    }