@import url('https://fonts.googleapis.com/css?family=Assistant|Kite+One|Montserrat');

*
{
    box-sizing: border-box;
}
html, body 
{
    
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position:relative;
    overflow-x: hidden;
    background: #55c1FA;
}
html
{
 user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/*---------------scroll-bar------------*/
body::-webkit-scrollbar 
{
    width: 1em;
    border-radius: 5px;
}
 
body::-webkit-scrollbar-track 
{
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    -webkit-box-shadow: inset 0 0 6px black;
}
 
body::-webkit-scrollbar-thumb
{
    background-color: #eee;
    box-shadow: 0px 0px 139px 20px rgb(0, 0, 0);
    border-radius: 5px;
    
}
/*---------------scroll-bar------------*/
/*---------------loader------------*/
#loader-wrapper {
  width: 148px;
  height: 100px;
  position: absolute;
  margin: -50px 0 0 -74px;
  left: 50%;
  top: 60%;
}

.loader {
  width: 148px;
  height: 100px;
  top: 0;
  left: 0;
  position: absolute;
}
.loader:after {
  content: "";
  top: auto;
  position: absolute;
  display: block;
  animation: shadow 1.2s infinite linear;
  -moz-animation: shadow 1.2s infinite linear;
  bottom: 0em;
  left: 0;
  height: .25em;
  width: 1em;
  border-radius: 50%;
  background-color: #034466;
  opacity: 0.3;
}

.roller,
.roller:last-child {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: rollercoaster 1.2s infinite linear;
  -webkit-transform: rotate(135deg);
  -moz-animation: rollercoaster 1.2s infinite linear;
  -moz-transform: rotate(135deg);
  animation: rollercoaster 1.2s infinite linear;
  transform: rotate(135deg);
}

.roller:last-child {
  left: auto;
  right: 0;
  -webkit-transform: rotate(-45deg);
  -webkit-animation: rollercoaster2 1.2s infinite linear;
  -moz-transform: rotate(-45deg);
  -moz-animation: rollercoaster2 1.2s infinite linear;
  transform: rotate(-45deg);
  animation: rollercoaster2 1.2s infinite linear;
}

.roller:before,
.roller:last-child:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
}

@-webkit-keyframes rollercoaster {
  0% {
    -webkit-transform: rotate(135deg);
  }
  8% {
    -webkit-transform: rotate(240deg);
  }
  20% {
    -webkit-transform: rotate(300deg);
  }
  40% {
    -webkit-transform: rotate(380deg);
  }
  45% {
    -webkit-transform: rotate(440deg);
  }
  50% {
    -webkit-transform: rotate(495deg);
    opacity: 1;
  }
  50.1% {
    -webkit-transform: rotate(495deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(495deg);
    opacity: 0;
  }
}
@-webkit-keyframes rollercoaster2 {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: rotate(-45deg);
  }
  58% {
    -webkit-transform: rotate(-160deg);
  }
  70% {
    -webkit-transform: rotate(-240deg);
  }
  80% {
    -webkit-transform: rotate(-300deg);
  }
  90% {
    -webkit-transform: rotate(-340deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
  }
}
@-webkit-keyframes shadow {
  0% {
    opacity: .3;
    -webkit-transform: translateX(65px) scale(0.5, 0.5);
  }
  8% {
    -webkit-transform: translateX(30px) scale(2, 2);
  }
  13% {
    -webkit-transform: translateX(0px) scale(1.3, 1.3);
  }
  30% {
    -webkit-transform: translateX(-15px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: translateX(60px) scale(1.2, 1.2);
    opacity: 0.3;
  }
  60% {
    -webkit-transform: translateX(130px) scale(2, 2);
    opacity: 0.05;
  }
  65% {
    -webkit-transform: translateX(145px) scale(1.2, 1.2);
  }
  80% {
    -webkit-transform: translateX(120px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  90% {
    -webkit-transform: translateX(80px) scale(0.8, 0.8);
  }
  100% {
    -webkit-transform: translateX(60px);
    opacity: 0.3;
  }
}
/* Moz */
@-moz-keyframes rollercoaster {
  0% {
    -moz-transform: rotate(135deg);
  }
  8% {
    -moz-transform: rotate(240deg);
  }
  20% {
    -moz-transform: rotate(300deg);
  }
  40% {
    -moz-transform: rotate(380deg);
  }
  45% {
    -moz-transform: rotate(440deg);
  }
  50% {
    -moz-transform: rotate(495deg);
    opacity: 1;
  }
  50.1% {
    -moz-transform: rotate(495deg);
    opacity: 0;
  }
  100% {
    -moz-transform: rotate(495deg);
    opacity: 0;
  }
}
@-moz-keyframes rollercoaster2 {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    -moz-transform: rotate(-45deg);
  }
  58% {
    -moz-transform: rotate(-160deg);
  }
  70% {
    -moz-transform: rotate(-240deg);
  }
  80% {
    -moz-transform: rotate(-300deg);
  }
  90% {
    -moz-transform: rotate(-340deg);
  }
  100% {
    -moz-transform: rotate(-405deg);
  }
}
@-moz-keyframes shadow {
  0% {
    opacity: .3;
    -moz-transform: translateX(65px) scale(0.5, 0.5);
  }
  8% {
    -moz-transform: translateX(30px) scale(2, 2);
  }
  13% {
    -moz-transform: translateX(0px) scale(1.3, 1.3);
  }
  30% {
    -moz-transform: translateX(-15px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  50% {
    -moz-transform: translateX(60px) scale(1.2, 1.2);
    opacity: 0.3;
  }
  60% {
    -moz-transform: translateX(130px) scale(2, 2);
    opacity: 0.05;
  }
  65% {
    -moz-transform: translateX(145px) scale(1.2, 1.2);
  }
  80% {
    -moz-transform: translateX(120px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  90% {
    -moz-transform: translateX(80px) scale(0.8, 0.8);
  }
  100% {
    -moz-transform: translateX(60px);
    opacity: 0.3;
  }
}
/* No-prefix */
@keyframes rollercoaster {
  0% {
    transform: rotate(135deg);
  }
  8% {
    transform: rotate(240deg);
  }
  20% {
    transform: rotate(300deg);
  }
  40% {
    transform: rotate(380deg);
  }
  45% {
    transform: rotate(440deg);
  }
  50% {
    transform: rotate(495deg);
    opacity: 1;
  }
  50.1% {
    transform: rotate(495deg);
    opacity: 0;
  }
  100% {
    transform: rotate(495deg);
    opacity: 0;
  }
}
@keyframes rollercoaster2 {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: rotate(-45deg);
  }
  58% {
    transform: rotate(-160deg);
  }
  70% {
    transform: rotate(-240deg);
  }
  80% {
    transform: rotate(-300deg);
  }
  90% {
    transform: rotate(-340deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes shadow {
  0% {
    opacity: .3;
    transform: translateX(65px) scale(0.5, 0.5);
  }
  8% {
    transform: translateX(30px) scale(2, 2);
  }
  13% {
    transform: translateX(0px) scale(1.3, 1.3);
  }
  30% {
    transform: translateX(-15px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  50% {
    transform: translateX(60px) scale(1.2, 1.2);
    opacity: 0.3;
  }
  60% {
    transform: translateX(130px) scale(2, 2);
    opacity: 0.05;
  }
  65% {
    transform: translateX(145px) scale(1.2, 1.2);
  }
  80% {
    transform: translateX(120px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  90% {
    transform: translateX(80px) scale(0.8, 0.8);
  }
  100% {
    transform: translateX(60px);
    opacity: 0.3;
  }
}
#loader2:after {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
#loader2 .roller {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

#loader3:after {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#loader3 .roller {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#myDiv {
  display: none;
  text-align: center;
 
}

/*---------------loader------------*/

.container-fluid
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0!important;
    margin: 0;
}
.wrapper
{
    width: 100%;
    height: 894px;
    float: left;
    background-image: url(../images/blackbricks.jpg);
    background-image: url(../images/wrapper-background1.jpg);
}
.wrapper-inside
{
    width: 100%;
    height: 894px;
    float: left;
    /*background: rgba(0, 0, 0, 0.43);*/
    background: radial-gradient(rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.04) 15%, rgba(0, 0, 0, 0.6) 60%);
}
.col-sm-12, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col-sm-6, .row
{
    padding: 0!important;
    margin: 0!important;
    
}
.title-name
{
    width: 100%;
    height: auto;
    float: left;
    padding: 2%;
    margin: 0;
    color: #fff;
    text-shadow: 0px 0px 20px #fff;
    text-align: center;
    font-size: 5em;
    margin: -32% 0% 0% 0%;
    font-family: 'Dancing Script', cursive;
    font-family: 'Karla', sans-serif;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}
.aaradhya-logo
{
    width: 30%;
    height: auto;
    float: left;
    padding: 2%;
    margin: 2% 10%;
}
.more
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0% 10%;
    margin: -23% 0% 0% 0%;
    font-weight: 600;
    color: lightyellow;
    font-size: 2em;
    cursor: pointer;
    text-align: right;
    font-family: 'Dancing Script', cursive;
    animation-name: light;
    animation-duration: 3s;
    animation-delay: 0s;
    
    animation-iteration-count: infinite;
    transition: all ease;
}
@keyframes light 
{
    0%   {text-shadow: 0px 0px 8px #fff;}
    25%  {text-shadow: 0px 0px 15px #fff;}
    50%  {text-shadow: 0px 0px 20px #fff;}
    75%  {text-shadow: 0px 0px 15px #fff;}
    0% {text-shadow: 0px 0px 8px #fff;}
}
.more>a
{
    color: lightyellow;
    text-decoration: none;
    list-style: none;
}
.menu
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
}
.menu-sub
{
    width: 100%;
    height: auto;
    float: left;
    padding: 3% 2% 2% 10%;
    margin: 0% 0%;
    background: #4c5e6e;
}
.menu-sub>li
{
    width: auto;
    height: auto;
    float: left;
    padding: 0% 1.5%;
    margin: 0;
    cursor: pointer;
    text-align: center;
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    font-family: 'Karla', sans-serif;
    font-family: 'Nunito', sans-serif;
    
}
.menu-sub>li>a
{
    color: #fff;
    text-decoration: none;
    list-style: none;
}
.menu-sub>li:nth-child(1)
{
    width: auto;
}
.menu-sub>li:nth-child(2)
{
    width: auto;
    cursor: none;
}
.menu-sub>li:nth-child(3)
{
    width: auto;
}
.menu-sub>li:nth-child(4)
{
    width: auto;
    cursor: none;
}
.menu-sub>li:nth-child(5)
{
    width: auto;
}
.menu-sub>li:nth-child(6)
{
    width: auto;
    cursor: none;
}
.menu-sub>li:nth-child(7)
{
    width: auto;
}
.menu-sub>li:nth-child(8)
{
    width: auto;
    cursor: none;
}
.menu-sub>li:nth-child(9)
{
    width: auto;
}
.menu-sub>li:hover
{
    animation-name: lighthover;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    transition: all ease;
    cursor: pointer;
}
@keyframes lighthover 
{
    /*0%   {text-shadow: 0px 0px 0px #fff;}
    10%  {text-shadow: 0px 0px 8px #fff;}
    20%  {text-shadow: 0px 0px 0px #fff;}
    30%  {text-shadow: 0px 0px 8px #fff;}
    40%  {text-shadow: 0px 0px 20px #fff;}
    50% {text-shadow: 0px 0px 0px #fff;}
    60% {text-shadow: 0px 0px 20px #fff;}
    70% {text-shadow: 0px 0px 20px #fff;}
    80% {text-shadow: 0px 0px 20px #fff;}
    90% {text-shadow: 0px 0px 20px #fff;}
    0% {text-shadow: 0px 0px 0px #fff;}*/
    10%  {text-shadow: 0px 0px 0px #fff;}
    20%  {text-shadow: 0px 0px 8px #fff;}
    30%  {text-shadow: 0px 0px 0px #fff;}
    40%  {text-shadow: 0px 0px 15px #fff;}
    50% {text-shadow: 0px 0px 8px #fff;}
    60% {text-shadow: 0px 0px 20px #fff;}
    70% {text-shadow: 0px 0px 20px #fff;}
    80% {text-shadow: 0px 0px 20px #fff;}
    90% {text-shadow: 0px 0px 20px #fff;}
    0% {text-shadow: 0px 0px 0px #fff;}
    
}
.wallmountedlights
{
    width: 100%;
    height: auto;
    float: left;
    padding: 12% 12% 0% 12%;
    margin: -12% 0% 0% 0%;
}
.animation-img
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0%;
    margin: 0%;
    background: white;
}
.animation-img:hover
{
    background-image: url(../images/websitebackgroundlighton.PNG);
    background-size: cover;
    background-repeat: no-repeat;
}
/*----------home-page-css----------------*/
.header
{
    width: 100%;
    height: 410px;
    float: left;
    padding: 0;
    margin: 0% 0% 0% 0%;
    background-image: url(../images/ledlight2.jpg);
    background-size: cover;
    background-position-y: -205px;
}
.header1
{
   width: 100%;
    height: 350px;
    float: left;
    padding: 0;
    margin: 0% 0% 0% 0%;
    background-image: url(../images/industrial-automation-banner.jpg);
    background-size: cover;
    background-position-y: -410px; 
    box-shadow: inset 25px 100px 250px black;
}
.fix-menu, .fix-menu-sub
{
    width: 100%;
    height: auto;
    float: left;
    padding: 2% 1%;
    margin: 0;
}
.fix-menu-sub>li
{
    width: 11%;
    height: auto;
    float: left;
    padding: 2% 1%;
    margin: 0;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    font-family: 'Karla', sans-serif;
    font-family: 'Nunito', sans-serif;
}
.fix-menu-sub>li:hover
{
    content: " ";
    top: 35%;
    left: 4%;
    margin-top: -2px;
    margin-left: 0px;
    border-width: 2px;
    border-style: solid;
    border-color: white transparent transparent transparent;
    /*box-shadow: inset 0px 15px 25px -17px #fff;
    box-shadow: inset 0px 25px 40px -17px rgba(255, 255, 255, 0.71);*/
    animation-name: tubelight;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    transition: all ease;
    cursor: pointer;
}
@keyframes tubelight 
{
    0%  {box-shadow: inset 0px 10px 40px -17px rgba(255, 255, 255, 0.71);}
    10%  {box-shadow: inset 0px 18px 40px -17px rgba(255, 255, 255, 0.71);}
    20%  {box-shadow: inset 0px 22px 40px -17px rgba(255, 255, 255, 0.71);}
    40%  {box-shadow: inset 0px 24px 40px -17px rgba(255, 255, 255, 0.71);}
    60%  {box-shadow: inset 0px 25px 40px -17px rgba(255, 255, 255, 0.71);}
    80%  {box-shadow: inset 0px 25px 40px -17px rgba(255, 255, 255, 0.71);}
    0% {box-shadow: inset 0px 10px 40px -17px rgba(255, 255, 255, 0.71);}
    
}
/*.fix-menu-sub>li
{
  width: auto;
  height: auto;
  padding: 1% 2%;
  margin: 0%;
  float: left;
}*/
.fix-menu-sub>li>a
{
    text-decoration:none;
    list-style: none;
    color: #fff;
    width: 100%;
    float: left;
}
.content-block1
{
   width: 100%;
    height: auto;
    float: left;
    padding: 2% 5%;
    margin: 0; 
    background: #eee;
}
.content-inner
{
    width: 100%;
    height: auto;
    float: left;
    padding: 1% 2%;
    margin: 0;
    background: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.54);
}
.content-innder-sub {
    padding: 1% 5%;
}

.content-innder-sub:after
{
    content: " ";
    position: absolute;
    top: 35%;
    left: -4%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform: rotateZ(90deg);    
}
.title
{
    width: 100%;
    height: auto;
    float: left;
    padding: 1% 0%;
    margin: 0;
    color: #ec3452;
    font-size: 20px;
    border-bottom: 1px solid lightgrey;
    font-family: 'Nunito', sans-serif;
    font-family: 'Karla', sans-serif;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}
.title-home1
{
    text-align: center;
    font-size: 30px;
}
.content
{
    width: 100%;
    height: auto;
    float: left;
    padding: 1% 0%;
    margin: 0;
    font-size: 16px;
    color: darkslategrey;
    font-family: 'Nunito', sans-serif;
    font-family: 'Karla', sans-serif;
    word-spacing: 2px;
    text-align: justify;
}
.picture1
{
    width: 96%;
    height: 370px;
    float: left;
    padding: 4% 0%;
    margin: 0% 5%;
}
.picture2
{
    width: 35%;
    height: auto;
    float: left;
    padding: 5% 0%;
    margin: 0% 35%;
}
.picture3
{
    width: 75%;
    height: auto;
    float: left;
    padding: 5% 0%;
    margin: 0% 5%;
}
.picture4
{
    width: 50%;
    height: auto;
    float: left;
    padding: 5% 0%;
    margin: 0% 25%;
    border-radius: 50px;
    animation-name: led;
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    transition: all ease;
}
@keyframes led 
{
    /*0%  {transform: rotateZ(0deg);}
    25%  {transform: rotateZ(90deg);}
    50%  {transform: rotateZ(180deg);}
    75%  {transform: rotateZ(260deg);}
    100%  {transform: rotateZ(360deg);}*/
    0%  {transform: rotateZ(0deg);}
    10%  {transform: rotateZ(36deg);}
    20%  {transform: rotateZ(73deg);}
    30%  {transform: rotateZ(108deg);}
    40%  {transform: rotateZ(144deg);}
    50%  {transform: rotateZ(180deg);}
    60%  {transform: rotateZ(216deg);}
    70%  {transform: rotateZ(252deg);}
    80%  {transform: rotateZ(288deg);}
    90%  {transform: rotateZ(324deg);}
    100%  {transform: rotateZ(360deg);}
    
}
.picture5
{
    width: 50%;
    height: auto;
    float: left;
    padding: 8% 0% 5% 0%;
    margin: 0% 10%;
}
.picture6-pre
{
    width: 80%;
    height: auto;
    float: left;
    padding: 0% 0% ;
    margin: 15% 10%;
}
.picture6
{
    width: 80%;
    height: auto;
    float: left;
    padding: 5%;
    margin: 10% 15%;
}
.picture7
{
    width: 50%;
    height: auto;
    float: left;
    padding: 8% 0% 5% 0%;
    margin: 50% 10%;
}
.picture8
{
    width: 75%;
    height: 200px;
    float: left;
    padding: 0% 0% 0% 0%;
    margin: 2% 0% 5% 0%;
}
.color2
{
    color: #36a5b3;
    border-bottom: 1px solid lightgrey;
}
.color3
{
    color: #f19924;
    text-align: center;
    padding: 5% 1%;
    border: 0;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}
.color4
{
    color: #36a5b3;
    text-align: right;
    border-bottom: 1px solid lightgrey;
}
.color5
{
    padding: 5% 0% 1% 0%;
    border-bottom: 1px solid lightgrey;
}
.color6
{
    color: #6aa330;
    text-align: right;
    padding: 5% 0% 1% 0%;
    border-bottom: 1px solid lightgrey;
}
.color7
{
    color: #f19924;
    text-align: left;
    padding: 2% 2%;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}
.color7-sub
{
    color: #36a5ba;
    text-align: left;
    padding: 5% 0% 1% 0%;
    border-bottom: 1px solid lightgrey;
}
.color8
{
    color: #f19924;
    text-align: left;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
    font-size: 17px;
    padding: 0% 0%;
    font-weight: 600;
}
.color9
{
    color: cadetblue;
    text-align: left;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
    font-size: 16px; 
    border: 0;
}
.color9-sub
{
    color: #f19924;
    border: 0;
    font-size: 16px;
}

.blog-title {
    color: #f19924;
    font-size: 20px;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
	margin-bottom: 5px;
}

.title1
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0% 0%;
    margin: 0;
}
ul.mid-ul-list 
{
    width: 90%;
    float: left;
    margin: 2% 0%;
}
.mid-ul-list>li
{
    width: 100%;
    height: auto;
    float: left;
    list-style: disc;
    padding: 1% 2%;
    margin: 0% 0%;
    color: darkslategrey;
    font-size: 16px;
    font-family: 'Karla', sans-serif;
}
.divide-line
{
    width: 100%;
    height: auto;
    float: left;
    padding: 1% 1%;
    margin: 0;
    border-bottom: 1px solid #eee;
}
.marq
{
    width: 100%;
    height: auto;
    float: left;
    padding: 2% 0%;
    margin: 0;
}
marquee
{   
    width: 100%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
}
.client-logo
{
    width: 25%;
    height: auto;
    padding: 1% 0%;
    margin: 0;
}
.smc
{
    width: 15%;
    height: 100px;
    margin: 0% 2%;
}
.niacl
{
    width: 12%;
    height: 100px;
    margin: 0% 2%; 
}
.prog
{
    width: 8%;
    height: 90px;
    margin: 0% 2%;  
}
.shraddha
{
    width: 15%;
    height: 85px;
}
.paradigm
{
    width: auto;
    height: 90px;
    padding: 2% 0%;
}
.dcepl
{
    width: auto;
    height: 90px;
}
.client-name
{
    width: 100%;
    height: auto;
    float: left;
    padding: 1% 0%;
    margin: 0;
    font-size: 20px;
    font-family: 'Karla', sans-serif;
}
/*-------------------about-tabs----------------*/
div.tab
{
    width: 100%;
    height: auto;
    float: left;
    padding: 2% 0% 3% 0%;
    margin: 0;
    border-bottom: 1px solid #eee;
}
div.tab button 
{
    display: block;
    background-color: inherit;
    color: black;
    width: auto;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    padding: 0% 0%;
    transition: 0.3s;
    margin: 0;
    float: left;
}
#middle-tab
{
    border-left: 2px solid gainsboro;
    border-right: 2px solid gainsboro;
    margin: 0% 2%;
    padding: 0% 2%;
}
div.tab button:hover
{
    background-color: #fff;
}
div.tab button.active
{
    background-color: #fff;
}
.tabcontent 
{
    float: left;
    padding: 0px 12px;
    width: 100%;
    border-left: none;
    height: auto;
}
/*-------------------about-tabs----------------*/
/*-------------------contact-tabs----------------*/
.contact-title
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0% 0% 2% 0%;
    margin: 0;
    color: slategray;
    text-align: center;
    font-size: 20px;
    font-family: 'Karla', sans-serif;
}
.contact-details
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0% 0%;
    margin: 0;
}
.contact-list
{
    width: 100%;
    height: auto;
    float: left;
    padding: 5%;
    border: 1px solid #36a5b3;
    margin: 0% 0% 5% 0%;
    border-radius: 10px;
    text-decoration: none;
    list-style: none;
}
.contact-list>li
{
    width: 100%;
    height: auto;
    float: left;
    padding: 5% 0%;
    margin: 0;
    color: darkslategrey;
    font-family: 'Karla', sans-serif;
    word-spacing: 2px;
    font-size: 15px;
    text-align: justify;
}
.icon
{
    width: 15%;
    height: auto;
    float: left;
    padding: 0% 1%;
    margin: 0;
    font-size: 20px;
}
.color-i1
{
    color: #f19924;
}
.color-i2
{
    color: #6aa330;
}
.color-i3
{
    color: #ec3452;
}
.color-i4
{
    color: #36a5b3;;
}
.c-data
{
   width: 80%;
    height: auto;
    float: left;
    padding: 1%;
    margin: 0; 
}
.form-block
{
    width: 100%;
    height: auto;
    float: left;
    padding: 5%;
    margin: 0;
    border: 1px solid #f19924;
    border-radius: 10px;
}
.about-per
{
    width: 50%;
    height: auto;
    float: left;
    padding: 5% 0%;
    margin: 0; 
}
.person-details
{
    width: 100%;
    height: auto;
    float: left;
    padding: 0% 0%;
    margin: 0;
}
.about-content
{
   width: 100%;
    height: auto;
    float: left;
    padding: 0% 0%;
    margin: 0;  
    font-family: 'Nunito', sans-serif;
}
.about-para
{
    width: 100%;
    float: left;
    padding: 2% 0%;
}
/*-------------------contact-tabs----------------*/
/*-------------------product-tabs----------------*/
.product-title
{
    text-align: center;
    padding: 0% 0% 2% 0%;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}
.product1
{
    width: 40%;
    height: auto;
    float: left;
    padding: 5% 0%;
    margin: 0% 30%;
}
.product2
{
    width: 95%;
    height: 350px;
    float: left;
    padding: 8%;
    margin: 0% 0%;
}
.product3
{
    width: 70%;
    height: auto;
    float: left;
    padding: 8%;
    margin: 0% 15%;  
}
.product-details
{
    width: 100%;
    height: auto;
    float: left;
    padding: 5% 1%;
    margin: 0%;
    font-size: 16px;
    text-align: center;
    color: darkslategrey;
    font-family: 'Karla', sans-serif;
}

.blog-details
{
    width: 100%;
    height: auto;
    float: left;
    padding: 1%;
    margin: 0%;
    font-size: 16px;
	text-align: justify;
    color: darkslategrey;
    font-family: 'Karla', sans-serif;
}

.product8
{
    padding: 1% 7%;
}
.part1
{
    width: 30%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
}
.part2
{
    width: 70%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
}
.col-left
{
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
}
.col-right
{
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.products-part
{
    float: left;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.project_img {
    width: 98%;
    height: auto;
    float: left;
    margin: 1%;
}

.certi_img {
    width: 98%;
    height: auto;
    float: left;
    padding: 5%;
}

/*-------------------about-tabs----------------*/
.aboutcolor
{
    border: 0;
    padding: 1% 1%;
    color: #f19924;
    text-align: center;
    border-bottom: 1px solid lightgrey;
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}
.about-image
{
    width: 40%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0% 30%;
}
.color-a
{
    color: #36a5b3;
    padding: 1% 2%;
}
.about-sub
{
  padding: 4%;
  float: left;
}
/*-------------------about-tabs----------------*/
/*-------------------gallery-page----------------*/
.point1
{
    width: 25%;
    height: 45px;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    top: -570px;
    left: 0.7%;
    background-image: url(../images/point1.png);
    background-size: 10%;
    background-repeat: no-repeat;
    cursor: pointer;
}
.point2
{
    width: 25%;
    height: 45px;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    top: -435px;
    left: -8.5%;
    background-image: url(../images/point2.png);
    background-size: 10%;
    background-repeat: no-repeat;
    cursor: pointer;
}
.point3
{
    width: 25%;
    height: 45px;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    top: -715px;
    left: 1%;
    background-image: url(../images/point3.png);
    background-size: 10%;
    background-repeat: no-repeat;
    cursor: pointer;
}
.point4
{
    width: 25%;
    height: 45px;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    top: -150px;
    left: -25%;
    background-image: url(../images/point4.png);
    background-size: 10%;
    background-repeat: no-repeat;
    cursor: pointer;
}
.map-responsive, .responsive-menu
    {
        display: none;
    }
.map, .responive
    {
        display: block;
    }
/*-------------------gallery-page----------------*/
/*-------------------product-tabs----------------*/
/*-----------------responsive-------------------*/
@media screen and (max-width: 480px) 
{
    body::-webkit-scrollbar 
    {
         width: 0em;
    	border-radius: 5px;
    }

    body::-webkit-scrollbar-track 
    {
        /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
        -webkit-box-shadow: inset 0 0 6px black;
        display:none;
    }

    body::-webkit-scrollbar-thumb
    {
        background-color: #eee;
        box-shadow: 0px 0px 139px 20px rgb(0, 0, 0);
        border-radius: 0;
        display:none;

    }
    .title-name 
    {
        font-size: 3em;
    }
    .more
    {
        padding: 15% 0%;
        text-align: center;
    }
    .menu-sub>li 
    {
        padding: 2% 2%;
    }
    .menu-sub>li:nth-child(1), .menu-sub>li:nth-child(3),.menu-sub>li:nth-child(5), .menu-sub>li:nth-child(7),.menu-sub>li:nth-child(9)
    {
        width: 100%;
    }
    .menu-sub>li:nth-child(2), .menu-sub>li:nth-child(4), .menu-sub>li:nth-child(6), .menu-sub>li:nth-child(8) 
    {
        width: auto;
        cursor: none;
        display: none;
    }
    .menu-sub 
    {
        padding: 5% 8% 50% 12%;
    }
    .picture1 
    {
        height: 250px;
        margin: 0% 2%;
    }
    .about-sub 
    {
        padding: 4% 0%;
        float: left;
    }
    ul.mid-ul-list 
    {
        padding: 0% 8%;
    }
    .about-per 
    {
        width: 100%;
        padding: 5%;
    }
    .title-home1 
    {
        font-size: 20px;
    }
    .about-image 
    {
        width: 100%;
        margin: 0;
    }
    .picture3
    {
        margin: 10% 12% 0% 12%;
    }
    .content 
    {
        padding: 1% 0% 10% 1%;
    }
    .color4 
    {
        text-align: left;
    }
    .picture5 
    {
        margin: 0% 25%;
    }
    .color6 
    {
        text-align: left;
    }
    .product2 
    {
        height: 200px;
    }
    .product3 
    {
        width: 100%;
        margin: 15% 0%;
    }
    #middle-tab
    {
        border-left:0;
        border-right: 0;
        margin: 0%;
        padding: 0% ;
    }
    div.tab button
    {
        padding: 5% 0%;
    }
    .picture8
    {
        width: 100%;
    }
    .map, .responive
    {
        display: none;
    }
    .map-responsive, .responsive-menu
    {
        display: block;
    }
    .c-data
    {
      width: 100%;  
    }
    /*---------------------responsive-menu-------------*/
    .dropbtn {
        width: 100%;
    background-color: #fff;
    color: white;
    padding: 5% 0%;
    font-size: 16px;
    border: none;
    cursor: pointer;
    color: darkslategrey;
        font-family: 'Encode Sans Semi Expanded', sans-serif;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #fff;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        margin: 5% 0%;
         width: 50%;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 173px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: center;
		border-bottom: 1px solid gainsboro;
        font-family: 'Encode Sans Semi Expanded', sans-serif;
    }

    .dropdown a:hover {background-color: #f1f1f1}

    .show {display:block;}
    /*---------------------responsive-menu-------------*/
    .header 
    {
        background-position-y: -410px;
    }
    .container-fluid 
    {
        padding: 0!important;
    }
    marquee 
    {
        width: 100%;
        height: auto;
        float: left;
        padding: 10% 0%;
        margin: 0;
        display: none;
    }
    .client-logo 
    {
        width: 50%;
        height: auto;
        float: left;
    }
    .niacl 
    {
        width: 30%!important;
        margin: 0;
    }
    .part1 
    {
        width: 100%;
        height: auto;
        float: left;
        padding: 0;
        margin: 0;
    }
    .part2 
    {
        width: 100%;
        height: auto;
        float: left;
        padding: 0;
        margin: 0;
    }
}