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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}  
html,
  body {
      position: relative;
      height: 100%;
  }

  body {
      background: #000;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
  }
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


.icons{
    margin: 30px 0;
}
.icon-tab{
 display: none;
    margin: 30px 0;
}

.icon-tab a{
   
  text-align: center;
  padding: 16px;
 
  color: white;
  font-size: 12px;
}
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
    z-index: 3;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}


body p{
    font-family: 'Mali', cursive;
}
#loading{
    width: 100%;
    height: 100vh;
    
}
  nav {
      display: block;
      top: 0;
      left: 0;
      box-sizing: border-box;
      padding: 10px 20px;
      background-color: rgba(0, 0, 0,0.9);
      color: white;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      position: fixed;
      width: 100%;
      z-index: 99;
    
  }

       
        nav li a {
            transition: 0.2s;
        }
        
        nav li a::after {
            content: '';
            display: block;
            width: 0px;
            background: #fec400;
            transition: 0.7s;
        }
        
       nav li a:hover::after {
            width: 100%;
        }
            
nav .dropdown-content a:hover{
    color: #333;
}

  nav ul {
      padding-top: 25px;
      list-style: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      float: right;
      margin-left: -900px;
  }

  nav.white {
      background-color:#34495E;
      padding: 15px 0 15px 0;
      color: white;
      box-shadow:0 5px 5px rgba(0,0,0,0.3);
      border-bottom: 1px solid lightgray;
  }

  nav.white a {
      color: #fff;
      font-weight: bold;
  }
nav.white a:hover{
    color: ;
}


  nav .logo {
      font-size: 20px;
      padding: 0px 20px 20px 20px;
      height: 30px;
      float: left;
     font-weight: 900;
      margin: 0 350px;
       margin-top: -6px;
     font-family: 'Monoton', cursive;
  }
nav.white .logo{
    font-weight: 900;
    font-size: 40px;
    margin-top: -6px;
   
}


  nav.ul {
      list-style-type: none;
      border: 1px solid red;
      width: 100%;
  }


  nav ul li a {
      color: white;
      padding: 12px 30px;
      text-decoration: none;
      transition: 0.3s;
  }

  li {
      display: inline-block;
      text-align: center;
  }


  nav a:hover {
      text-decoration: none;
      color: white;
  }


  nav i {
      opacity: 1; 
      
  }

#active i{
    opacity: 1;
    background-color:  #007FFF;
}
  nav li:hover i {
      opacity: 1;
      -webkit-animation: 1s linear anim;
      animation: 1s linear anim;
  }

nav ul li .active{
    color: #17a2b8;
    font-weight: 900;
}
nav.white ul li .active{
    color: orange;
}

/* for dropdown   */
.dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
    margin-left: -60px;
  background-color: #333;
    color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd; color:#333;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: transparent;}



/* for doepdown inside a dropdown  */
.dropbtn1 {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown1 {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #333;
    color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content1 a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content1 a:hover {background-color: #ddd; color:#333;}

/* Show the dropdown menu on hover */
.dropdown1:hover .dropdown-content1 {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown1:hover .dropbtn1 {background-color: transparent;}


nav.white  .dropdown-content {
  display: none;
  position: absolute;
  background-color: #34495E;
    color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/**/
nav.white  .dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #34495E;
    color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.head  {
    position: relative;
}
/*.head::after {
    content: "";
    width: 100%;
    height: 220px;
    background: #fff;
    z-index: 1;
    bottom: -220px;
  
    left: 0;
    position: absolute;
    -webkit-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
    transform: skewY(-3deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
*/
.header{
    background-image: url(../images/ggg.jpg);
    background-attachment: fixed;
    background-size: cover;
 
    padding: 200px 60px 100px 60px;
    color: #fff;
}
.head .fa-chevron-down{
    margin-top: 80px;
    border: 2px solid white;
    color: white;
    padding: 40px 10px 10px 10px;
    border-radius: 18px;
}
.layer {
   background: rgba(0, 0, 0, 0.45);
   
}
.separator::after,
.separator::before{
    display: block;
    width: 47%;
    content: " ";
    margin-top: 10px;
    border: 1px solid #d3d3d3 ;
}

.separator:after {
    float: right;
}
.separator:before {
    float: left;
}
.separator b{
    font-size: 20px;
}
.about{
     z-index: 2;  
       padding-top: 60px; 
    padding-bottom: 40px;
}
.home-service{
text-align: center;
    padding: 100px;
    position: relative;
        background-color: #f8f9fa;
}


.home-service h2{
       font-weight: 900;
}
.home-service a{
    color: #17a2b8;
}

.home-service img{
   position: absolute;
    width: 70px;
    height: 70px;
    z-index: -;
    margin-top: -30px;
    margin-left: -30px;
}
 #r2{
    padding-top: 60px;
    text-align: left;

}
.home-service .row h1{
background: #17a2b8;
    border-right: 50%;
    color: #fff;
}
.home-service .col-lg-3, .home-service .col-lg-4{
    margin-top: 30px;
}
.timeline{
    background:#222;
  font-family: Georgia, serif;
  color: #fff;
  font-size: 14px;
}
.info{
    position: relative;
    background-attachment: fixed;
    background-image: url(../images/about-bg.jpg);
background-size: cover;
    background-position: center;
    
    color: #fff;
}
.info .col-lg-4{
  
}
.info .overlay{
padding-top: 80px;
    padding-bottom: 50px;
    background: rgba(195,195,195,0.9);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
     width: 100%;
  height: 100%;
    
}

.info button{
    padding: 8px 15px;
    border: 1px solid #17a2b8;
    color: #17a2b8;
    border-radius: 6px;
    background:transparent;
}
.info button:hover{
   background-color: #17a2b8;
    color: #fff;
}

.info .r2{
    padding-top: 60px;
}
.info span{
    font-weight: 900;
}
.service {
    padding: 50px;
    text-align: center;
   
}
.service h1, .service h5{
color: ;
}
.service i{
    font-size: 3em;
  
 
}
@media only screen and (max-width: 800px) {
 
}
 .card{
    text-align: center;
    box-shadow: 0 5px 8px rgba(0,0,0,0.5);
    padding: 20px;
    margin-top: 30px;
}
.subscribe .subsdiv{
     position: relative;
     padding-bottom: 90px; 
    padding-top: 50px;
}
.subs-box{
    margin-top: 30px;
    position: absolute;
    border-radius: 40px;
    background-color: black;
    padding: 10px;
    text-align: center;
    left: 50%;
    top: 0%;
    transform: translate(-50%,-50%);
}
.subs-box:hover > .subs-email{
     width: 200px;
    padding: 0 6px;
}
.subs-box:hover > .subs-btn{
    color: black;
    background-color: white;
    text-decoration: none;
    
}
.subs-btn{
    color: white;
    float: right;
    font-weight: 900;
    padding: 12px 30px;
    border-radius: 30px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items:  center;
}
.subs-email{
    border: none;
    background: none;
    outline: none;
    float: left;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
  width: 0px;
    
}

.subscribe form {
    display: none;
    border: 1px solid 
#808080;
width: ;
margin-top: 10px;
}
.subscribe .subs-email2 {
    outline: none;
    padding: 14px 15px;
    color: 
    #fff;
    font-size: 15px;
    width: ;
    border: none;
    background: none;
    letter-spacing: 1px;
}
.subscribe .subs-email2 .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
        font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
}
.btn1 {
    color: 
    #808080;
    border: none;
    padding: 13px 0;
    outline: none;
    text-align: center;
    text-decoration: none;
    background: none;
    cursor: pointer;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
 
}

/* habout page starts here */
.thead{
      background-image: url(../images/ggg.jpg);
    background-attachment: fixed;
    background-size: cover;
   background-position: center;
    height: 300px;
}
.aboutcom img{
width: 100%;
    height: 300px;
}
.bg-light .container{
    padding: 20px;
}
.aboutcom, .portfolio, .subscribe, .marketing, .contact, .business, .blog, .blogpage, .products, .clients, .company-overview, .newsletter{
    padding-top: 30px;
    padding-bottom: 30px;
}
.portfolio .card {
    position: relative;
}
.portfolio .card img{
    border-radius: 50%;
    left: 50%;
}
.portfolio h3{
    padding: 10px;
}
.portfolio p{
    padding-top: 30px;
}
.wrap{
    display: flex;
    flex-wrap: wrap;
}
.grid{
  -webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;  
}
.gridimg{
  -webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;  
}
.gridimg img{
    width: 100%;
}
.grid2{
  -webkit-box-flex: 0;
-ms-flex: 0 0 65%;
flex: 0 0 65%;
max-width: 65%;  
}
.gridicn{
     -webkit-box-flex: 0;
-ms-flex: 0 0 35%;
flex: 0 0 35%;
max-width: 35%; 
}
.gridicn img{
    
}
.products .gridimg i{
    font-size: 2em;
   height: 50px;
    width: 50px;
    padding: 10px;
    border: 1px solid orange;
    border-radius: 50%;
    color: orange;
}
.marketing i{
    font-size: 3em;
    color: orange;
}
.marketing .card{
    transform: scale(1);
    transition:.5s;
}

.marketing .card:hover{
    transform: scale(1.);
    cursor: pointer;
    box-shadow: 8px 14px 15px 15px rgba(80,80,80,0.4);
}
.contact i{
    font-size: 3em;
}
.contact{
    margin-bottom: 50px;
}
.contact .card{
    box-shadow: 6px 10px 15px rgba(0,0,0,0.5);
}
.contact .cardhr{
    background: #fff;
}
 .clientcol1{
    background-image: url(../images/Thinking-Man-PNG-Free-Download.png);
    background-size: cover;
}
 
.clientcol2{
    position: relative;
}
.clientcol2 .card{
    height: 200px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: px solid #ccc;
  background-color: none;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #34495E;
    color: #fff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
    margin: 5px 0;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #34495E;
    color: #fff;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #34495E;
    color: orange;
    box-shadow: 2px 3px 10px rgba(0,0,0,.5);
  
    
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: 1px solid #ccc;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.newsletter form{
    position: relative;
    z-index: 1;
}
.newsletter input{
    width: 100%;
    height: 50px;
    border-radius: 50px;
    background-color: #e7f2fd;
    border: none;
    font-size: 16px;
    padding: 0 30px;
}

.newsletter button{
    webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    position: absolute;
    padding: 0 30px;
    border-radius: 0 50px 50px 0;
    background-color: #1583e9;
    font-size: 16px;
    color: #ffffff;
    height: 50px;
    top: 0;
    right: 0;
    border: none;
    cursor: pointer;
}
.newsletter .form:focus{
    box-shadow: none;
}

.about-company , .company-profile , .our-team{
    padding: 40px;
}
.blinking{
    animation:blinkingText 2s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: transparent; }
    50%{    color:#000;}
    99%{    color:transparent;  }
    100%{   color: #000;    }
}

.list-category li{
    width: 100%;
    list-style: none;
    padding: 10px;
    margin-top: 6px;
    text-align: left;
}
.list-category li a{
    color: black;
}
.list-category i{
    display: none;
}
.list-category a:hover i{
    display: inline;
}
.footer{
background-color: #34495E;
    color: white;
    padding: 40px;
}
.footer a{
    color: #fff;
}
.foot2{
      -webkit-column-count: 2; 
  -moz-column-count: 2; 
  column-count: 2;
}
.footer span{
    font-weight: 800;
    color:orange;
}
@media only screen and (max-width: 800px) {
        .header{
   height: 700px;
    padding: 200px 60px 10px 60px;
  
}
        .dropbtn{
        padding-left: 31px;
    }
     nav.white {
  
      padding: 13px 8px 13px 8px;
    
  }
  .subs-btn {
   padding: 7px 6px;
  }
     .subs-box:hover > .subs-email {
  width: 130px;

  }
       .service img{
        display: none;
    }
      .aboutus{
        padding: 0 85px;
        
    }
}

@media only screen and (max-width: 500px) {
    .header{
   height: 700px;
    padding: 200px 60px 10px 60px;
  
}
         nav.white {
  
      padding: 13px 8px 13px 8px;
    
  }
    .dropbtn{
        padding-left: 31px;
    }
    .subscribe form {
        display: block;
    }
    .subs-box{
        display: none;
    }
    .left{
        float: left;
        text-align: left;
    }
    .right{
        float: right;
        text-align: right;
    }
  
}

@media only screen and (max-width: 700px){
        .header{
   height: 700px;
    padding: 200px 60px 10px 60px;
  
}
         nav.white {
  
      padding: 13px 8px 13px 8px;
    
  }
        .dropbtn{
        padding-left: 31px;
    }
      .icon-bar{
      display: none;
    }
    .icon-tab{
        display:block;
    }

}
@media only screen and (max-width: 1000px) and (min-width:550px){
        .header{
   height: 700px;
    padding: 200px 60px 10px 60px;
  
}
         nav.white {
  
      padding: 13px 8px 13px 8px;
    
  }
    
    nav ul li a, nav ul li div a.dropbtn, nav ul li div a.dropbtn1{
        font-size: 11px;
        padding: 12px 10px;
    }
}
@media only screen and (max-width: 1000px){
    
 .clientcol1{
    background-image: url(../images/3a986c15bd5cb66e0bbe6dad05558b3d.jpg);
    background-size: 100% 500px;

       
}
     .clientcol2{
        margin-top: -110px;
    }
}