@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
    font-family: 'Lora', serif;
    /* background-image: url(../images/bg.jpg); */
    background-repeat: repeat-x;
    font-family: 'Lato', sans-serif;
    background-color: #26a9bc; 
display: flex; height: 100vh; margin: 0; } 
.navbar img {
    width: 80%;
}
.navbar-dark .navbar-nav .active>.nav-link {
    color: #000;
    background-color: #fff;
    border-bottom: 4px solid #d6e4e6;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    border-bottom: 4px solid #d6e4e6;
    color: #000;
}
 .active > a  {
    color:#27a9bc;
}
.navbar-nav 
{width:300px}
.navbar-nav .nav-link {
  
    font-weight: 600;
    font-size: 1.2rem;}

    ul.nav.navbar-nav.nav-flex-icons.ml-auto {
        margin: 0;
        flex-direction: column;
    }
    .navbar-expand-md .navbar-collapse{
        display:block !important;
        width: 100px;
    }
.wraper {
    margin: 0 auto;
    width: 80%;
    height: 450px;
    box-shadow: 0px 0px 50px #999;
    /* border:1px solid #999; */
    border-radius: 10px;
    margin-top: 2%;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 50px;
}
ul.navbar li {
    width: 100%;
    height: 7vh;
}
.subHead {
    font-style: italic;
}

.banImg {
    float: left;
    overflow: hidden;
    width: 35%;
}

.content {
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    width: 56%;
}

.content h3 {
    font-weight: 600;
    font-style: italic;
    margin-bottom: 20px;
    font-size: 30px;
}

.content p {
    font-size: 17px;
}


    .topBg {
        height: 100%;
        background-color: #fff;
        position: fixed;
        z-index: 1;
       width: 18%;
       box-shadow: 5px -5px 35px #000000bd;
    
}
a.navbar-brand img {
    width: 25vh;
}
.navbar-brand{padding:20px;}
.abtImg img{width:100%}
.abtImg {height:300px;overflow: hidden;}
.imgTtl {padding-top:10px; text-align: center;}
.footer {
    /* background: url("../images/bg_02.gif"); */
  
    color: #fff;
    /* height: 40px; */
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    text-align: center;
    
    z-index: 1;
}
.footerHdr{
    background-color: #2f7742;    height: 7vh;padding: 10px;
}

.footer h3 {
    font-size: 1.2rem;
    float: left;
}

.footer p {
    margin: 0;
    font-size: 2vh;

    
}
.fl{float: left}
.fr{float: right;}
.clr {
    clear: both;
}
.home.bg {
    text-align: center;
}
.homeBgImg{ position: absolute;
    transform-style: preserve-3d;
    animation: rotation 80s infinite linear;}

    #carousel {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        animation: rotation 80s infinite linear;
    }

.homeBgImg img{
height:70vh;

transition: all .5s ease;}
#loading {
    /* -webkit-animation: rotation 2s infinite linear; */
    transform: rotate3d(1, 1, 1, 45deg);
}

@-webkit-keyframes rotation {
    from {
            -webkit-transform: rotate(0deg);
    }
    to {
            -webkit-transform: rotate(359deg);
    }
}
.cmpName {
    
    padding: 3vh 0px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 4vh;
}
.logoFt{position: relative;     width: 10vh;
    height: 10vh;float: right;background-color: #fff;}
.logoFt #carousel img {
    width: 100%;
    height: 100%;
}
#pageCont {
    width: 100%;
}
.bg {
    padding: 0 5vh;
    width: 81.9%;
    float: right;
    min-height: 700px;
    background-size: cover;
    position: relative;
    background: #27a9bc;
    background-repeat: no-repeat;
}
ul.navbar{margin:0; }
.nav-item {
    list-style: none;
}
a.nav-link {
    text-align: left;
    display: block;
    color:#000;
    font-size: 3vh;
}
a.nav-link.active {
    font-size: 3vh;
    color:#27a9bc;
}
.nav {
    margin: 0 auto;
}

.navbar-dark .navbar-nav .nav-link {
    color: #000
}

.prodImgHdr {
    margin-bottom: 20px;
}

.prodImgHdr img {
    width: 100%;
}

.logoEarth {
    position: absolute;
    /* left: 50%; */
    /* right: 50%; */
    width: 100%;
    bottom: 180px;
}

a.contMail {
    text-decoration: none;
}

.contOvrlay {
    background-color: #26a9bc;
    padding: 20px;
    display: block;
    color: #ffffff;
    text-align: center;
    width: 100%;

    right: 0;
    font-size: 1rem;
}

.contOvrlay h1 {
    text-transform: uppercase;
    font-size: 3.5rem;
    font-weight: bold;
}
.home .contOvrlay {
    top:40%;
    width:30%;
}


.knowus .contOvrlay {
    text-align: justify;
  
}

.contactus .contOvrlay {
    text-align: justify;
    padding: 30px 70px;
    width: 45%;
    top: 10%;
    left: 0;
    position: absolute;
}

.products .contOvrlay {
    top: 10%;
    margin: 0 auto;
    text-align: center;
    /* padding: 30px 70px; */
    width: 45%;
    left: 0;
}

.prodImg img {
    width: 33%;
}

.prodImg {
    position: relative;
    margin-bottom: 50px;
    /* overflow: hidden; */
    height: 500px;
}
.proImgWrap img {width:100%}
.proImgWrap p {
    text-align: center;
    margin: 10px;
}
.proImgWrap .proTitl{
    font-weight: bold;
    font-size: 16px;
}
.prodImg .proImgWrap {
    float: left;
    width: 25%;
    position: relative;
}
.imgHov {
    background: #ffffffd9;
    position: absolute;
    top: 50%;
    height: 140px;
}
.knowCont p {
    margin: 10px 0;
    font-size: 2.3vh;
    /* font-size: 22px; */
}
.knowCont span{
    font-weight: bold;font-size: 3vh;
}
.proImgWrap {
    width: 33%;
    display: inline-block;
}
.proTitle{
    color:#fff;
    padding: 10px 0;
    font-size: 4vh;
    text-align: center;
}
.knowCont strong{
    font-size: 1.2em;
    color:#fff;
}
.knowCont a{color:#fff}

@media only screen and (max-width: 1024px) {
    .topBg{
        position: relative;
        width: 100%;
        height: 180px;
        box-shadow: none; 
    }
    ul.navbar li {
        width: auto;
        height: 7vh;
    }
    .bg{width:100%;
        padding-bottom: 100px;
    float: none;
}
.proTitle{
    font-size: 3vh;
}
.contactus .contOvrlay{
    width:75%;
}
ul.navbar {
    margin: 0;
    padding: 10px 0px;
}
    .banImg {
        width: 100%;
    }
    .banImg img {
        width: 100%;
    }
    .navbar-brand {
        padding: 0 10px;
        margin:0;
        text-align: center;
        width: 100%;
    }
    .homeBgImg img {

        width: 60%;}
    .content {
        width: 95%;
        padding-bottom: 20px;
        padding-right: 20px;
    }
    .navbar{
        margin:0;
        padding:0;
        justify-content: stretch;
    /* justify-content: flex-start; */
    }
    .navbar li{
        padding:0
    }
    a.nav-link{font-size: 3vw;
        padding: 0px 10px;}
    a.nav-link.active {
        font-size: 2.3vh;}
    .wraper {
        height: auto;
        margin-bottom: 100px;
        padding-bottom: 30px;
    }
    .prodImgHdr img {
        width: 90%;
        height: auto;
    }
    a.nav-link {
        width: 100%;
    }
    .homeImg img {
        position: relative;
        /* top: -50px; */
        width: 100%;
    }
    .wraper {
        width: 90%;
    }
    .navbar-dark .navbar-toggler {
        color: #000;
        /* border-color: #000; */
        background-color: #64b1b3;
    }
    .navbar-dark .navbar-brand {
        color: #fff;
        float: left;
        width: 70%;
    }
    .navbar-dark .navbar-brand img {
        width: 80%;
    }
    .navbar-collapse {
        margin-top: 0px;
    }
    .navbar-nav{
        display: block;
        
    }
   
    .logoEarth img {
        width: 60%;
    }
    .navbar-expand-md>.container, .navbar-expand-md>.container-fluid {
        padding-right: 0;
        padding-left: 0px;
    }
    .knowus .contOvrlay {
        width:100%;
        padding: 0px 20px;
}
.knowCont {
    font-size: 2.4vh;
}
.home .contOvrlay {
    width: 100%;
}
.knowus .contOvrlay {
padding: 15px 30px;
width: 100%;
}
}

@media only screen and (max-width: 465px) {
    .proImgWrap {
        width: 100%;}
       .contactus.bg{ background-position-x: 25%;background-repeat: no-repeat;
        background-size: 255%;}
    .contOvrlay h1 {
        font-size: 3.5rem;
    }
    .contOvrlay {
        width: 100% !important;
    }
    .knowus .contOvrlay {
        font-size: 1rem;
        padding: 20px;
    }
    .knowCont p {
        font-size: 0.9rem;
        margin: 0;
    }
    
    .prodImg img {
        width: 100%;
    }
    .prodImg .proImgWrap {
       
        width: 100%;}
        .prodImg{
           overflow: inherit;
        }
        .footer{
            /* height:60px */
        }
        .footer .fl, .footer .fr{
            float:none;
        }
        .contactus .contOvrlay {
          
            padding: 10px 20px;}
            .abtImg {
                height: 105px;}
                .knowCont {
                    padding-bottom: 70px;
                }
                .footerHdr {
                    height: 60px;}
                    ul.navbar li{
                        width:inherit;
                        height:inherit;
                    }
                    .topBg{height: auto;}
}