/*
################
               BASICS
################
*/
* {
    margin:0;
    padding:0;
    overflow-x: none;
    position: relative;
    box-sizing: border-box;
}
body {
    font-size: .875rem;
    overflow-x: none;

}
.container{
	margin-right: auto;
	margin-left:auto;
	max-width: 1185px;
}
button:active,
button:focus,
button:hover,
.btn:active,
.btn:focus,
.btn:hover,
.form-control:active,
.form-control:focus,
.form-control:hover{
  outline: none !important;
  box-shadow: none !important; }
  
/*
################
               Carousel 
################
*/

#wrapper {
    position: relative;
    height: 100vh;
}
#slider-area {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left:0;
}
#slider-area .owl-item div {
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
#slider-img1{
background-image: url('../img/fff.jpg');
background-size: cover !important;
background-position: 100% 100%;
}
#slider-img2{
  background-image: url('../img/ccc.jpg');
  background-size: cover !important;
  }


/*
################
               NavBar 
################
*/
.nav {
  bottom: 550px !important;
}

@media screen and (min-width: 1100px) {
  #wrapper .nav {
      top: 0%;
      bottom: 550px !important;
      text-align: center;
      z-index: 10;
  }

  .navbar-brand img {
      left: 50px !important;
      top: 18px !important;
  }
}

.nav-link {
  padding: 0px !important;
  color: #fff;
  font-weight: 300;
  font-size: 0.97rem;
  line-height: 21px;
  font-family: "Roboto", sans-serif;
  transition: all ease-in-out 0.3s;
  display: inline-block !important;
  position: relative !important;
}

.nav-link:hover {
  color: #1C4EAA;
}

.nav-item .active {
  color: #1C4EAA;
  position: relative !important;
}

.nav-item .active:after {
  content: '';
  position: absolute !important;
  left: 0 !important;
  top: 33px !important;
  width: 43px !important;
  height: 2px;
  background-color: #1C4EAA !important;
}

.nav-item {
  padding-left: 2.2rem !important;
  padding: 23px !important;
}

.nav-link:after {
  position: absolute;
  content: '';
  top: 30px;
  left: 0%;
  height: 3px;
  width: 100%;
  background-color: transparent !important;
  border-bottom: 2px solid transparent;
}

.nav-link.effect-underline:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 5px;
  width: 100%;
  border-bottom: 2px solid;
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}

.nav-link.effect-underline:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

@media (min-width: 992px) {
  .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
      transform: translateY(1rem);
      opacity: 0;
  }

  100% {
      transform: translateY(0rem);
      opacity: 1;
  }

  0% {
      transform: translateY(1rem);
      opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
  }

  100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
  }

  0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}
/*
/// Slider arrows */

body .owl-nav{
  position: initial;
}

body .owl-nav div{
position: absolute;
top: 40%;
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}

/*
/// Slider text */
 #wrapper .slider-text{
     position: absolute;
     text-align: center;
     left: 50%;
     top:60%;
     transform: translate(-50%,-50%);
     z-index: 10;
 }
 #wrapper .slider-text h2{
   padding-top: 220px !important;
     font-size: 3rem;
    font-family: "Poppins", sans-serif;
    font-weight: 450;
}
#wrapper .slider-text .btn-text {
    background-color:#f1f1f1;   
    border-radius: 0 !important;
    color: rgb(16, 0, 165);
    padding:30px 40px;
    transition: none 0s ease 0s;
    line-height: 22px;
    padding: 12px 29px;
    font-weight: 400;
    font-size: 1rem;
}
.btn-grup{
  padding-top: 70px !important;
}
.btn-text1{
  line-height: 24px;
  color: #252525;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 14px 48px;
  background-color: #fff;
  text-transform: capitalize;
  text-transform: uppercase;
  border: 2px solid #ffffff;
  font-family: 'Arimo', sans-serif;
  margin-bottom: 150px !important;
}

.btn-text1:hover{
  color: #ffffff;
  background: #55cbe2 !important;
  border-color:#53c4da;
  z-index: 10 !important;
}

.btn-text2{
  line-height: 24px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 14px 50px;
  background-color: transparent !important;
  text-transform: capitalize;
  text-transform: uppercase;
  border: 2px solid #fff;
  font-family: 'Arimo', sans-serif;
  margin-bottom: 150px !important;
}

.btn-text2:hover{
  color: #ffffff;
  background: #53c4da !important;
  border-color: #53c4da !important;
  z-index: 10 !important;
}

/*
################
               About Section 
################
*/
.about-section{
  position: relative;
  min-height: 600px;
  background-color: #fff;
}
.about-section .about-container {
  padding-top: 150px !important;
}
.about-para h1 {
  position: relative;
  margin-bottom: 30px;
  color: #454545;
  font-size: 2.6rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
.about-para h1:after {
  content: '';
  position: absolute;
  left: 0 !important;
  top:53px !important;
  width: 210px !important;
  height: 3px;
  background-color: #454545;
}
.about-para h3 {
  color: #454545;
  font-size: 2rem;
	margin-bottom:20px;
}
.header-para{
  position:relative;
	color:#777777;
	font-size:1.4rem;
	line-height:2em;
  margin-bottom: 40px;
}
.about-img img{
  width: 600px !important;
  margin-bottom: 150px !important;
}
.about-button button{
  position: relative !important;
  line-height: 24px;
  color: #252525;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 11px 40px;
  background-color: #fff;
  text-transform: capitalize;
  border: 2px solid #777777;
  font-family: 'Arimo', sans-serif;
  margin-bottom: 150px !important;
}
.about-button button a{
  color: inherit !important;
}
.about-button button:hover{
  color: #ffffff;
  background: #777777;
}
.about-button button::after{
  content: '';
  position: absolute;
  left: 0 !important;
  top:30px !important;
  width: 110px !important;
  height: 31px;
  z-index: -1;
  background: url(https://i.ibb.co/DKn55Qz/pattern-1.jpg) repeat;
}

/*
################
               Services Section 
################
*/
.services-section{
  position: relative;
  min-height: 1000px !important;
  background-color: #f1f1f1;
}
.services-section .header-title,.reviews-section .header-title,.team-section .header-title{
  padding-top: 100px;
  text-align: center !important;
}
.services-section .header-title h1,.reviews-section .header-title h1,.team-section .header-title h1,.contact-section .header-title h1{
  color: #454545;
  font-family: "Poppins", sans-serif;
  position: relative;
  font-size: 2.3125rem;
  font-weight: 500;
  line-height: 41px;
  margin-bottom: 35px !important;
}
.services-section .header-title h1,.reviews-section .header-title h1,.team-section .header-title h1{
  display: inline-block !important;
}
.services-section .header-title h1::after{
  display: inline-block !important;
  content: '';
  position: absolute;
  left: 0px !important;
  top:45px !important;
  width: 120px !important;
  height: 2px;
  background-color: #454545;
}
.services-section .header-title h3,.reviews-section .header-title h3{
  color: #727272;
  font-size: 0.9375rem;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin: 0 auto;
  max-width: 700px;
;
  position: relative;
  z-index: 2;
  line-height: 25px;
}
.services-container{
  margin-top:110px;
}
 .one-service {
   margin-bottom: 15px;
 }
 .one-service figure{
  overflow: hidden;
  position: relative;
 }

 .one-service figure::before {
   content: '';
   position: absolute;
   left: -60px;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   transition: all ease-in-out 0.5s;
   z-index: 1;
   opacity: 0;
   visibility: hidden;
 }
 .one-service figcaption {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 35%;
  transition: all ease-in-out 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
 }
 .one-service figcaption p {
   padding-right: 42px !important;
   text-align:justify;
    color: #ffffff;
    font-size: .79rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;  
    line-height: 30px;  
}
.one-service figcaption h4 span {
  color: #37b721; 
}
 .one-service figure a {
  display: block;
  position: relative;
 }
 .one-service figure a h3 {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff !important;
  font-family: "Roboto", sans-serif;
  font-size: 1.45rem;
  white-space: nowrap !important;
  transition:all linear 0.3s;
 }
.one-service figure a img {
  filter: brightness(60%);
  position: relative;

}
 .one-service:hover figcaption {
  left: 20px;
  opacity: 1;
  visibility: visible;
 }
 .one-service:hover figure a h3 {
  color: transparent !important;
 }
.one-service:hover figure:before {
  left: 0px;
  opacity: 1;
  visibility: visible;
}

/*
################
               Team Section 
################
*/
.team-section{

  margin-top: 100px;
  min-height:500px;
  background:
  /* top, transparent black, faked with gradient */ 
  linear-gradient(
    rgba(0, 0, 0, 0.5), 
    rgba(0, 0, 0, 0.5)
  ),
  /* bottom, image */
  url(../img/team-banner.jpg);
  background-size: 100% 52% !important;
  background-attachment: fixed !important;
  background-position: center;
  background-repeat: no-repeat;
}
.team-section .header-title h1::after{
  content: '';
  position: absolute;
  left: 0px !important;
  top:45px !important;
  width: 120px !important;
  height: 2px;
  background-color: #ffffff;
}
.team-section .header-title p{
  padding-top: 10px!important;
  text-align: center !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-size: 1.45rem !important;
  width: 75% !important;
}

/*
################
               Contact Section 
################
*/

.contact-section{
  position: relative;
  margin-top: 150px;
  min-height:400px;
  background:
  /* top, transparent black, faked with gradient */ 
  linear-gradient(
    rgba(255, 255, 255, 0), 
    rgba(255, 255, 255, 0)
  ),
  /* bottom, image */
  url(../img/contact-banner.jpg);
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
}
.contact-section .header-title h1{
  padding-top: 100px !important;
}
.contact-section .header-title p{
  padding-top: 10px!important;
  text-align: center !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-size: 1.3rem !important;
  width: 75% !important;
}
.contact-button button{
  position: absolute;
  top:67px;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  line-height: 24px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  background: none;
  padding: 11px 40px;
  background-color: transparent !important;
  text-transform: capitalize;
  border: 2px solid #fff;
  font-family: 'Arimo', sans-serif;
}
.contact-button button:hover{
  color: #fff;
  background: #777777 !important;
  border-color: #777777;
  z-index: 10;
}
/*
################
               footer
################
*/
.page-footer{
  background-color: #454545;
}
.fab{
  font-size: 16px !important;
}


/**/
/*////////////// Responive Mobile View
*//**/

@media (max-width: 992px) {
  .navbar-collapse {
      position: static !important;
      background-color: #f5f5f5 !important;
  }
  .nav-link{
      color: #454545 !important;

  }


}

@media screen and (max-width: 600px) {
       /* Basic */
        html,body{
          overflow-x: hidden !important;
        }
            /* Header */
            .header {
              height: 60vh;
              background-image:
                  linear-gradient(to right bottom,
                      rgba(1, 119, 254, 0.8),
                      rgba(0, 194, 255, 0.8)),
                  url('../img/project-header.jpg');
          
              background-size: 100% 70%;
              background-repeat: no-repeat;
              background-position:top;
              position: relative;
          
              clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100%);
          }
            /* NavBar */
          nav{
              background-color: rgba(255, 255, 255, 0.137);
              padding: 0 !important;
          }
          nav .container{
          width: 100% !important;
          }
          .nav-item{
          padding: 22px !important;
          }
          .fa-bars{
              font-size: 30px !important;
          }
          .navbar-brand{
              margin-right: 0 !important;
              margin-top: 15px;
          }
          .logo-img{
          padding:5px 0 !important;
          margin-left: 15px !important;
          
          }
        /* Carousel */
        #slider-area .owl-item div {
          height: 100vh;
          width: 100%;
          background-repeat: no-repeat;
          background-size: 130% 100%;
          background-position: 50% 50%;
        }
        #wrapper .slider-text{
          position: absolute;
          text-align: center;
          left: 50%;
          top:55%;
          transform: translate(-50%,-50%);
          z-index: 10;
      }

      .btn-grup .btn-text1{
        line-height: 24px;
        color: #252525;
        font-size: 15px;
        font-weight: 700;
        background: none;
        display: inline-block;
        padding: 14px 48px;
        background-color: #fff;
        text-transform: capitalize;
        text-transform: uppercase;
        border: 2px solid #ffffff;
        font-family: 'Arimo', sans-serif;
        margin-bottom: 0px !important;
      }
      
      .btn-grup .btn-text2{
        padding: 14px 58px;
        margin-right: 32px !important;
        margin-top: 30px !important;
        font-family: 'Arimo', sans-serif;
      }

        #slider-img1{
        background-image: url('../img/fff.jpg');
        background-size: 130% 100% !important;
        background-position: 100% 80%;
        }
      #slider-img2{
        background-image: url('../img/ccc.jpg');
        background-size: 130% 100% !important;
        }
        /* About section */
        .about-para .header-title h1{
          margin-bottom: 50px !important;
        }
        .about-para .header-title h3{
          font-size: 1.7rem !important;
        }
      .about-para .header-title,.about-para .header-para,.about-para .about-button{
        padding: 12px 0 !important;
      }
      .about-img img{
        max-width: 100% !important;
        height: auto !important;
      }

      /* Service section */
      .services-section .header-title h1{
        margin-bottom: 50px !important;
      }
      .services-section .header-title h1::after{
       left: 0px !important;
      }
      .services-section .header-title h3{
        padding: 0 30px !important;
       }
      .one-service{
        margin-bottom: 300px !important;
      }
      .last-services{
        width: fit-content !important;
      }
      .one-service figcaption p {
        width: 390px !important;
         font-size: 1rem;
     }
      /* Team Section */
      
      .team-section{
        min-height:700px;
        background-size: 100% 45% !important;
      }
      .team-section .header-title h1::after{
       left: 0px !important;
      }
       /* Contact section */

       .contact-section{
        min-height: 800px !important;
      }
 
      .contact-section .header-title p{
        padding-top: 120px !important;
       font-size: 1.6rem !important;
     }
      .contact-section button{
       margin-top: 140px !important;
 
     }
}
@media screen and (max-width: 600px) {
    /* Footer */
    .footer-section{
      min-height: 1000px;
  }
}
@media screen and (max-width: 400px) {
          /* Carousel */
          #wrapper .slider-text{
            top:50%;
        }
        #wrapper .slider-text h2 {
          font-size: 2.6rem;
          line-height: 55px;
      }
     /* About Section */
     .about-para .header-title h3{
      font-size: 1.7rem !important;
    }
     /* Service section */
     .services-section .header-title h1::after{
      left: 0px !important;
     }
     .one-service figcaption p {
      width: 310px !important;
       font-size: .85rem;
   }
     /* Team Section */
     .team-section .header-title h1::after{
      left: 0px !important;
     }
     /* Contact section */

     .contact-section{
      min-height: 800px !important;
    }

    .contact-section .header-title p{
     font-size: 1.4rem !important;
   }
    .contact-section button{
      padding: 11px 20px !important;

   }
}