@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap');


html,body{
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #222;
}
.preloader{
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  background: #F8F9FB;
  height: 100%;
  width: 100%;
}
.prelogo{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgprelogo{
  width: 15%;

}
.navbar{
    padding: .10rem !important;
}

.navbar-nav li{
    padding-right: 20px !important;
   
}
.nav-link{
    font-size: 1.1em !important;  
}
div.hdr {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
}
.Ma{
  background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.502);
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
   

}

.carousel-caption{
  position: absolute !important;
  top: 100% !important;
  transform: translate(0%,6rem) !important;
}

.carousel-caption h1 {
  font-size: 72px !important;
  text-transform: uppercase !important;
  text-shadow: 5px 5px 8px #00000052 !important;
  font-weight: bold !important;
}


/*---------------------------------------------------*/
.carousel-caption h3 span.cursor {
    display: inline-block !important;
    background-color:  rgb(56, 54, 54)!important;
    margin-left: 0.1rem!important;
    width: 3px!important;
    animation: blink 1s infinite!important;
  }
  .carousel-caption h3 span.cursor.typing {
    animation: none!important;
  }
  @keyframes blink {
    0%  { background-color:  rgb(56, 54, 54); }
    49% { background-color:  rgb(56, 54, 54); }
    50% { background-color: transparent; }
    99% { background-color: transparent; }
    100%  { background-color: rgb(56, 54, 54); }
  }
  /*---------------------------------------------------------------*/
  .carousel-caption h3 {
      font-size: 21px !important;
      font-weight: 500 !important;
      padding-bottom: 1rem !important;
      overflow: hidden !important;
   }
   .btn-outline-light{
     width: 175px !important;
   }
  
   .btn-primary{
     background-color: #2c9ee0 !important;
   }
   .btn-primary:hover{
    background-color: rgb(0, 0, 0) !important;
    border: none !important;
  }
  .d_arow{
    transform: translateY(-9rem);
  }
  .arrow{
    width: 4%;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transform: translateY(-10rem);
  }
  #arrow{
    margin: auto;
    width: 41px;
    MARGIN-LEFT: -11px;
    position: absolute;
    transform: translate(41rem, 1rem);
  
  
  
  
  }
  
   @keyframes example {
    0%   {top:-10px;}
    50%  {top:20px;}
    100% {top:-10px;}
  } 
  .decover{
    margin-top: 10rem !important;
  }
  
  .apropo{
    
    font-weight: bold !important;
  }
  
  .apropo-p{
    font-size: 15px !important;
  }
  
  

.servicestxt{
    color: #f8f9fa !important;
    font-weight: bold !important;
  }
  .applic{
    color: inherit !important;
    font-weight: bold !important;
  }
  
  .padding{
    padding: 4rem !important;
  }
  
  .welcome{
    width: 75% !important;
    margin:0% auto !important;
    padding: 4rem !important;
  }
  
  
  .welcomes hr{
    border-top: 1px solid rgb(255, 255, 255) !important;
    width: 20% !important;
    margin-top: .3rem !important;
    margin-bottom: 1rem !important;
  }
  .discription{
    text-align: left !important;
    padding: 2rem !important;
    font-size: 16px !important;
    
  }
  .card{
    box-shadow: 0px 0PX 13px 0px #000000b8 !important;
    height: 95%;
  }
  
  .servicesbg{
    background-image: url("../img/m4m4.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 2.3rem;
    
  }
  
  .sbtn{
    width: 15rem !important;
    border-radius: 0% !important;
  }
  
  
section{
    background-image: url("../img/bcont.jpg") !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    padding: 3rem !important;
  
  }
  .f2 hr{
    border-top: 1px solid rgb(26, 26, 26);
    width: 20%;
    margin-top: .3rem;
    margin-bottom: 1rem;
  }
  
  h2{
    color: aliceblue !important;
  }

  .cbtn{
    border-color: blanchedalmond !important;
    color: aliceblue !important;
  }
  .fa-code{
    color: rgb(255, 136, 0) !important;
  }
  .fa-code ,.fa-bullhorn,.fa-edit,.fa-chart-line{
    font-size: 4em !important;
    margin: 1rem !important;
    margin-left: 39% !important;
  
  }
  .fa-bullhorn{
    color:#4c3673 !important;
  }
  .fa-edit{
    color: rgb(139, 8, 47) !important;
  }
  .fa-chart-line{
    color:#1f58ac !important;
  }
  .light{
    transform: translate(-142px, -7px) !important;
    width: 76% !important;
    margin-left: 9rem !important;
    border-color: #0000003d !important;
  }
  
  
  
  li,a{
    list-style-type:none !important;
  }
  .Copy{
    background-color: rgb(36, 36, 36) !important;
    padding: 0rem !important;
  }
  .Copy .copyright{
    color: aliceblue !important;
  }
  .ou{
    background-color: #f8f9fa !important;
    padding-top: 1.5rem !important;
  }
  .p span {
    list-style-type:none !important;
    text-align: right !important;
  }
  
  /*---Firefox Bug Fix --*/
  .carousel-item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  /*--- Fixed Background Image --*/
  figure {
    position: relative !important;
    width: 100% !important;
    height: 60% !important;
    margin: 0!important;
  }
  .fixed-wrap {
    clip: rect(0, auto, auto, 0) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  #fixed {
    background-image: url('../img/mac.png');
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
  }
  /*--- Bootstrap Padding Fix --*/
  [class*="col-"] {
      padding: 1rem;
  }
  
  
.footer {
    background-color: #141414;
    padding: 0px 0;
    text-align: center;
      width: 100%;
  
  }
  
  .footer span.copyright {
    font-size: 90%;
    line-height: 40px;
    text-transform: none;
    color: #ced4da;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
  
  .footer ul.quicklinks {
    font-size: 90%;
    line-height: 40px;
    margin-bottom: 0;
    
    text-transform: none;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
  
  ul.social-buttons {
    margin-bottom: 0;
  }
  .p{
    color: #f8f9fa !important;
  }
  ul.social-buttons li a {
    font-size: 20px;
    line-height: 50px;
    display: block;
    width: 50px;
    height: 50px;
    transition: all 0.3s;
    color: white;
    border-radius: 100%;
    outline: none;
    background-color: #212529;
  }
  
  ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
    background-color: #366bfe;
    text-decoration: none ;
  }
  

/* nos services */


textarea{
  height: 9rem;
}


.con2{


padding-bottom: 6rem !important;

}

p.lead{
  font-size: 0.9rem;
}
.g{
  color: rgba(255, 255, 255, 0.86363);
}
.f{
  color:  rgba(0, 0, 0, 0.989) !important;
}

@media (max-width: 575.98px) { 
  .logo {
    width: 10rem;
    padding-left: 10px;

}

.carousel-caption h1 {
  font-size: 25px !important;
  margin-top: -16% !important;
}
.carousel-caption h3 {
  font-size: 18px !important;
}
.btn-primary {
    margin-top: 10px !important;
}
.arrow {
    width: 10%;
}
#About {
    padding: 15px;
}
.apropo {
    font-size: 29px;
}
.apropo-p {
    font-size: 12px !important;
}

.welcome {
    padding: 0rem !important;
}
.f2 p {
    font-size: 14px !important;
}
.local {
    width: 133% !important;
    margin-left: -11% !important;
}
.foot2 [class*="col-"] {
   padding: 0.1rem;
}

 }

@media (min-width: 576px) and (max-width: 768.98px) { 
.carousel-caption h1 {
    font-size: 50px !important;
}
.carousel-caption {
  padding-top: 0px !important;
}
.carousel-caption h3 {
    font-size: 30px !important;
}
.carousel-caption {
  padding-top: 100px !important;
}
.decover {
    margin-top: 200px !important;
}
.arrow {
    width: 13%;
}
.welcome {
    padding: 1rem !important;
}

.local {
    width: 139% !important;
    margin-left: -10% !important;
}
.foot2 [class*="col-"] {
   padding: 0.1rem;
}

}

@media (min-width: 769.98px) and (max-width: 991.98px) {
.carousel-caption h1 {
    font-size: 63px !important;
}
.carousel-caption {
  padding-top: 160px !important;
}
.carousel-caption h3 {
    font-size: 45px !important;
}
.btn-group-lg>.btn, .btn-lg {
    font-size: 1.85rem !important;

}
.btn-outline-light {
    width: 223px !important;
}
.sbtn{
    width: 22rem !important;
  }
.decover {
    margin-top: 300px !important;
}
.arrow {
    width: 15%;
}
.welcome {
    padding: 2rem !important;
}
.fa-code, .fa-bullhorn, .fa-edit, .fa-chart-line {
    margin-left: 30% !important;
}
.local {
    width: 139% !important;
    margin-left: -10% !important;
}

 }

@media (min-width: 992px) and (max-width: 1199.98px) {
.carousel-caption h1 {
    font-size: 81px !important;
}
.carousel-caption {
  padding-top: 10px !important;
}
.carousel-caption h3 {
    font-size: 45px !important;
}
.btn-group-lg>.btn, .btn-lg {
    font-size: 1.85rem !important;

}
.btn-outline-light {
    width: 223px !important;
}
.sbtn{
    width: 22rem !important;
  }
.decover {
    margin-top: 300px !important;
}
.arrow {
    width: 11%;
}
.welcome {
    padding: 2rem !important;
}
.fa-code, .fa-bullhorn, .fa-edit, .fa-chart-line {
    margin-left: 30% !important;
}
.local {
    width: 139% !important;
}

 }

@media (min-width: 1200px) { 
  .display-2{
    margin-top: 5rem;
  }
  .decover{
    margin-top: 8rem !important;
  }
  .apropo{
    font-size: 3.5rem !important;
  }
  .apropo-p {
    font-size: 16px !important;
}
h3{
  margin-bottom: 0.25rem !important;
  margin-top: 1rem !important;

}
 }