/*header css start*/
#header.header-scrolled {
    background: #fff;
    padding: 20px 0;
    height: 72px;
    transition: all 0.5s;
}
#header {
    padding: 30px 0;
    height: 92px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: all 0.5s;
    z-index: 997;
    box-shadow: 5px 0px 15px #c3c3c3;
    background-color:rgb(78, 182, 189);;
}
}
#header #logo h1 {
    font-size: 34px;
    margin-top:0;
    padding: 0;
    line-height: 1;
    font-family: "Arial Black", Gadget, sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
}
#header #logo h1 a, #header #logo h1 a:hover {
    color: #fff;
    padding-left: 10px;
    border-left: 4px solid #4cf4ca;
    font-weight:700;
    text-decoration: none;
}
#nav-menu-container {
    float: right;
    margin: 0;
}
.nav-menu > li {
    margin-left: 10px;
}
.nav-menu > li {
    float: left;
}
.nav-menu li {
    position: relative;
    white-space: nowrap;
}
.nav-menu, .nav-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-scrolled .nav-menu li:hover > a, .header-scrolled .nav-menu > .menu-active > a {
    color: #4cf4ca;
}
.header-scrolled .nav-menu a {
    color: black;
}
.nav-menu li:hover > a, .nav-menu > .menu-active > a {
    color:#4cf4ca;
}
.nav-menu a {
    padding: 0 8px 10px 8px;
    text-decoration: none;
    display: inline;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    outline: none;
    letter-spacing:2px;
}
#mobile-nav-toggle {
    display: inline;
}
#mobile-nav-toggle {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    margin: 20px 20px 0 0;
    border: 0;
    background: none;
    font-size: 24px;
    display: none;
    transition: all 0.4s;
    outline: none;
    cursor: pointer;
}
#mobile-body-overly {
    width: 100%;
    height: 100%;
    z-index: 997;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    display: none;
}
body.mobile-nav-active #mobile-nav {
    left: 0;
}
#mobile-nav {
    position: fixed;
    top: 0;
    padding-top: 50px;
    bottom: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.8);
    left: -260px;
    width: 260px;
    overflow-y: auto;
    transition: 0.4s;
}
#mobile-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#mobile-nav ul li {
    position: relative;
}
#mobile-nav ul li a {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    overflow: hidden;
    padding: 10px 22px 10px 15px;
    position: relative;
    text-decoration: none;
    width: 100%;
    display: block;
    outline: none;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
    color: #18d26e;
}
#mobile-nav ul .menu-has-children i {
    position: absolute;
    right: 0;
    z-index: 99;
    padding: 15px;
    cursor: pointer;
    color: #fff;
}
#mobile-nav ul .menu-item-active {
    color: #18d26e;
}
#mobile-nav ul li li {
    padding-left: 30px;
}

.menu-has-children ul
{display: none;}

.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  color:black;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}


.nav-menu li:hover > ul,
.nav-menu li.hover > ul {
  display: block;
}
.nav-menu ul {
    margin: 4px 0 0 0;
    padding: 10px;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    background: #fff;
}
.nav-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
    background-color: rgba(72,182,189,0.9);
}

.sf-arrows .sf-with-ul {
    padding-right: 30px;
}
.nav-menu li {
    position: relative;
    white-space: nowrap;
    margin-bottom:10px;
}


@media (max-width: 768px){
#nav-menu-container {
    display: none;
}

#mobile-nav-toggle {
    display: inline;
}
#mobile-nav-toggle{
    top:7px;
}
}
/*header css end*/
/*slider css start*/
/*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /*jssor slider bullet skin 031 css*/
        .jssorb031 {position:absolute;}
        .jssorb031 .i {position:absolute;cursor:pointer;}
        .jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
        .jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
        .jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
        .jssorb031 .i.idn {opacity:.3;}
/*slider css end*/
/*footer css start*/
.bg-grey {
        background: #1abbb1b0;
     }
     .logo-footer {
        margin-bottom: 40px;
     }
     footer {
            color: #fff;
       
     }
    
footer h6 {
    margin-bottom: 40px;
    position: relative;
}
footer h6:after {
    position: absolute;
    content: "";
    background:#4cf4ca;
    width: 16%;
    height: 1px;
    left: 0;
    bottom: -20px;
}
     .btn-footer {
                 color:#4eb6bd;
              
                text-decoration: none;
                border: 1px solid;
                border-radius: 43px;
                font-size: 13px;
                padding: 7px 30px;
                line-height: 47px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     }
     .btn-footer:hover {
                
                text-decoration: none;
                color:#4cf4ca;
               
     }
    .form-footer input[type="text"], .form-footer input[type="tel"] {
        border: none;
    border-radius: 16px 16px 16px 16px;
    outline: none;
    padding-left: 10px;
    width:100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form-footer input[type="text"]:hover, .form-footer input[type="tel"]:hover{
    border:2px solid #4cf4ca;
}
::placeholder {
    font-size: 15px;
    padding-left: 10px;
    font-style: italic;
}
 .form-footer input[type="button"] {
    border: none;
    background:#232323;
        margin-left: -5px;
    color: #fff;
    outline: none;
    border-radius: 0 16px 16px 0;
    padding: 2px 12px;
}
     .social .fa {
    color: grey;
    font-size: 22px;
    padding: 10px 15px;
    background: #3c3c3c;
}
     footer ul li {
    list-style: none;
    display: block;
}
  footer ul  {
   padding-left: 0;
}
footer ul  li a{
  text-decoration: none;
  color: #fff;
  text-decoration:none;
}
footer ul li a:hover {
    text-decoration: none;
    color: #4cf4ca !important;
    
}
.logo-part {
    border-right: 1px solid #4cf4ca;
    height: 100%;
    }
    .logo-part a{
        color:white;
        font-weight:700;
    }
    .logo-part a:hover{
        text-decoration:none;
        color: #4cf4ca;
    }
    .bg-color{
        background-color:#4eb6bd59;
        padding:20px;
    }
    .copyright{
        background-color:rgb(78, 182, 189);;
        color:white;
        padding-top: 10px;
        padding-bottom: 3px;
    }
    .copyright p a{
        color:white;
        text-decoration: none;
    }
    .copyright p a:hover{
        color:black;
        text-decoration:underline;
    }
/*footer css end*/
/*contact page css start*/
.btn-footer1 {
                 color: #000;
              
                text-decoration: none;
                border: 1px solid;
                border-radius: 43px;
                font-size: 13px;
                padding: 7px 30px;
                line-height: 35px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     }
     .btn-footer1:hover {
                
                text-decoration: none;
                color:#4cf4ca;
               
     }
     .form-footer label{
        text-align:left;
     }
     .phone a:hover,.phone:hover,.phone1 a{
        color:#4cf4ca;
     }
     .phone a{
        color:black;
     }
     .phone1 a{
        color:white;
     }
     .icon i{
        color:#4cf4ca;
     }

@media only screen and (max-width:767px){
  
.show-btn{
   position:relative;
   top:-40px;
} 

.wel-title h2::after{
    margin-left:-35px;
}
.product h2::after{
    margin-left:43px;
}
}
/*contact form page css end*/
/*product-page start*/
.box15{position:relative;}
.box15 img{width:100%;height:400px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.box15 .box-content{width:100%;height:100%;position:absolute;top:0;left:0;transition:all .5s ease 0s}
.box15:hover .box-content{background-color:rgba(25, 28, 27, 0.57);}
.box15 .box-content:after,.box15 .box-content:before{content:"";width:50px;height:50px;position:absolute;opacity:0;transform:scale(1.5);transition:all .6s ease .3s}
.box15 .box-content:before{border-left:1px solid #fff;border-top:1px solid #fff;top:19px;left:19px}
.box15 .box-content:after{border-bottom:1px solid #fff;border-right:1px solid #fff;bottom:19px;right:19px}
.box15:hover .box-content:after,.box15:hover .box-content:before{opacity:1;transform:scale(1)}
.box15 .title{font-size:22px;text-align:center;color:#fff;margin:0;position:relative;top:0;opacity:0;transition:all 1s ease 10ms}
.box15:hover .title{top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms}
.box15 .title:after{content:"";width:0;height:1px;background:#fff;position:absolute;bottom:-8px;left:0;right:0;margin:0 auto;transition:all 1s ease 0s}
.box15:hover .title:after{width:80%;transition:all 1s ease .8s}
.box15 .icon{width:100%;margin:0 auto;position:absolute;bottom:0;opacity:0;transition-duration:.6s;transition-timing-function:cubic-bezier(1,-.53,.405,1.425);transition-delay:.1s}
.box15:hover .icon{bottom:39%;opacity:1}
.box15 .icon li{display:inline-block}
.box15 .icon li a{display: block;
width: 150px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
margin-right: 30px;
transition: all .3s ease-in-out 0s;}
.box15 .icon li a:hover{background:#0c9283d9;color:#fff}
@media only screen and (max-width:990px){.box15{margin-bottom:30px}
}
/*product-page end*/
/*side button*/
#mySidenav a {
transition: 0.3s;
padding: 15px;
width: 165px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
z-index: 999;
margin-top: 115px;
}

#mySidenav a:hover {
  left: 0;
}

#about {
   background-color: #4CAF50;
   position: fixed;
   left: -112px;
   top: 240px;
}

#blog {
  background-color:blue;
   position: fixed;
   left: -112px;
   top: 167px;
}

#projects {
  background-color: red;
   position: fixed;
   left: -112px;
   top: 93px;
}
/*side button css end*/
/*back to top button css*/
.show-btn{
text-align: center;
font-size: 28px;
background-color: #191817;
width: 39px;
color: white;
float: right;
margin-top: -74px;
box-shadow: 2px 2px 3px #999;
}
.show-btn:hover {
    color: #27e7ca;
    text-decoration: underline;
}
/*back to top button css*/
/*about*/
.welcome-sec{
    padding:50px 0;
    background: #F7F7F7;
}

.wel-desc{
    text-align: center;
    border-left: 7px solid #4cf4ca;
    padding: 40px 15px;
    background: white;
}

.wel-title h2::after{
    content: '';
    width: 108px;
    height: 1px;
    background: #149c8e;
    position: absolute;
    left: 47%;
    margin-top: 42px;
}
.wel-title h2::before {
    content: '';
    position: absolute;
    width:108px;
    height: 1px;
    background: #149c8e;
    margin-top: 50px;
}
.apolo h2::after{
    width:88px;
}
.apolo h2::before{
    width:88px;
}
.product h2:before{
    width:218px;
}
.product h2:after{
    width:218px;
    left:6%;
}
.cate h2:before{
    width:145px;
}
.cate h2:after{
    width:145px;
}
.table-bordered th,.table-bordered td,.table-bordered tr {
    border: 2px solid #4cf4ca!important;
}
.icon1 a{
    color: black;
text-decoration: none;
background-color: transparent;
border: 2px solid #4cf4ca;
padding: 10px 20px;
}
.icon1 a:hover{
    color: #4cf4ca;
text-decoration: none;
background-color: transparent;
border: 2px solid #000;
padding: 10px 20px;
transition: all .3s ease-in-out 0s;
}
.modal-header{
    border-bottom:none!important;
    border-top:7px solid #4cf4ca;
}
.carousel-inner img { width: 100%; height: 100%; }
.btn1 {
    transition: all .5s ease;
    color: #000;
    border: 3px solid #4cf4ba;
    font-family:'Montserrat', sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    font-size: 17px;
    background-color : transparent;
    padding: 10px;
    outline: none;
    border-radius: 4px;
}
.btn1:hover {
    color: #fff;
    background-color:#4eb6bd;
    text-decoration:none;
}
.prod{
    width:100%!important;
    height:350px!important;
    border:1px solid #4eb6bd;
    padding:5px;
}
/*about end*/