@font-face {

    font-family: typo-round-regular;

    src: url('../fonts/Typo_Round_Regular_Demo.otf');

  }

  * {

    font-family: typo-round-regular;

    

  }



.navbar{

    position: absolute !important;

    width: 100%;

    z-index: 10;

    max-width: 100%;

}

.navbar img{

    width: 250px;

}

.navbar i{

    color: #fff;

}

.navbar ul li{

    font-size: 22px;

    font-weight: 400;

}

.navbar ul li a{

    color: #fff !important;

}

.navbar ul li a:hover{

   color: #00e8ff !important;

]



}

/* .show{

    background: transparent !important;

} */

.show {

    background: transparent !important;

     /*background-color: black !important;

    opacity: .6 !important;

    width: 23px;

    padding-left: 20px !important;

    margin-left: 50% !important;

    margin-top: -50px !important; */

}

.dropdown-menu{

    border: 1px solid rgba(250, 250, 250, 0.15) !important;

}

.dropdown-item:hover {

    /* color: #16181b; */

    text-decoration: none;

    background: transparent !important;

}

.dropdown-divider {

    border: none !important;

}



/*******************************All line css************************************/

.vl {

    border-left: 2px solid #00e8ff;

    height: 100px;

    margin-left: 50%;

    margin-top: -78px;

  }

  .hl{

    border-top: 2px solid #00e8ff;

    width: 100px;

    margin-left: 100px;

  }

  .hl1{

    border-top: 2px solid #00e8ff;

    width: 74px;

    margin-bottom: 20px;

  }

  @media only screen and (max-device-width:650px){

    .hl{

        margin-left: 10px;

    }

}



/************************Hero Section start*************************/

.mapshadow{ box-shadow: 0 0 10px 0 rgba(0,0,0,.3);

}

 .whatsapp{

         position: fixed;

    display: inline;

    background: #16ea3c;

    color: #fff;

    width: 55px;

    height: 55px;

    text-align: center;

    line-height: 1.2;

    font-size: 22px;

    border-radius: 50%;

    left: 15px;

    bottom: 15px;

    transition: background 0.5s;

    z-index: 11;

       transition: 0.8s ease-out!important;

  }

.whatsapp:hover{ transform: scale(1.2);}

.jumbotron {

    color: white;

    background-image: url("../images/background-home.png");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    height: 80vh;

  }

  .jumbotron .container .row{

    margin-top: 10%;

  }

  .promo-title{

    color: #fff;

    font-size: 84px;

    font-weight: 700;

    line-height: 1.2em;

    letter-spacing: -2px;

  }

  .cta{

    margin-right: 8px;

    font-size: 16px !important;

    font-weight: 700 !important;

    text-transform: uppercase;

    fill: #fff !important;

    color: #fff !important;

    background-color: #00e8ff !important;

    border-style: solid !important;

    border-width: 2px 2px 2px 2px !important;

    border-color: #00e8ff !important;

    border-radius: 0 0 0 0 !important;

    box-shadow: 6px 4px 10px 2px rgba(0,0,0,.17) !important;

    padding: 15px 30px 15px 30px !important;

  }

  .cta:hover{

    color: #40bfef !important;

    background-color: #fff !important;

    border-color: #fff !important;

  }

  .cta1{

    margin-left: 8px;

    font-size: 16px !important;

    font-weight: 700 !important;

    text-transform: uppercase v;

    fill: #fff !important;

    color: #fff !important;

    background-color: rgba(255,255,255,0) !important;

    border-style: solid !important;

    border-width: 2px 2px 2px 2px !important;

    border-color: #00e8ff !important;

    border-radius: 0 0 0 0 !important;

    box-shadow: 4px 6px 10px 0 rgba(0,0,0,.11) !important;

    padding: 15px 40px 15px 40px !important;

  }

  .cta1:hover{

    color: #40bfef !important;

    background-color: #fff !important;

    border-color: #fff !important;

  }

  .cta2{

    /* margin-left: 30% !important; */

    margin-top: 2% !important;

    padding: 10px 30px !important;

    font-family: "Nunito Sans",Sans-serif !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    fill: #40bfef !important;

    color: #40bfef !important;

    background-color: rgba(37,54,122,0) !important;

    border-style: solid !important;

    border-width: 2px 2px 2px 2px !important;

    border-color: #40bfef !important;

    border-radius: 0 0 0 0 !important;

  }

  .cta2:hover{

    color: #fff !important;

    background-color: #40bfef !important;

    border-color: #40bfef !important;

  }

  @media only screen and (max-device-width:650px){

    .promo-title{

        margin-top: 80px;

        margin-bottom: 50px;

        font-size: 43px;

        font-weight: 600;

        line-height: 1.2em;

        letter-spacing: 1px;

      }

      .jumbotron .col-md-6 p{

          font-size: 15px !important;

      }

}







/******************************About Us**********************************/

#about{

    margin-top: 100px;

    background-color: #fff;

    background-image: url("../images/Background-about.svg");

    min-height: 150px;

    width: 100%;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}

.heading{

    color: #000;

   

    margin-top: 15px;

    font-size: 50px;

    font-weight: 700;

    letter-spacing: 0px;

}



.sub-heading{

    color:#595959;

font-family: roboto;

    font-size: 20px;

    font-weight: 400;

   

    letter-spacing: .7px;

}

.con-about{

    margin-top: 100px;

    margin-bottom: 0;

    padding: 0 0 0 0;

}

.extra{



    box-shadow: 0 0 10px 0 rgba(0,0,0,.3);

   transition: 1s ease-out!important;

    padding: 20px 10px 20px 10px;

}

.extra:hover{ transform: scale(1.1);}

.card-heading{

    color: #fff !important;

    font-family: "itc-avant-garde-gothic-pro",Sans-serif !important;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 0;

}

.card-para{

    color: #fff !important;

    font-family: "Nunito Sans",Sans-serif !important;

    font-size: 16px;

    line-height: 1.8em;

}

.fa-add{

    color: #fff;

    margin: auto;

    font-size: 150px !important;

}

.card:hover .fa-add{

    text-shadow: 2px 2px 4px #f1f1f1;

  -ms-transform: rotate(3600deg); /* IE 9 */

  transform: rotate(360deg);

    transition: 1s;

}



.mapis{



    box-shadow: 0 0 10px 0 rgba(0,0,0,.3);

   transition: 1s ease-out!important;

    padding: 20px 10px 20px 10px;

}

.mapis:hover{ transform: scale(1.1);

border-radius: 10px;}

@media only screen and (max-device-width:650px){

    .con-about{

        margin-top: 10px !important;

    }

    #about{

        margin-top: 10px;

    }

    .heading,.sub-heading,.vh{

        margin-left: 10px;

    }

    .vl{

        height: 50px;

        margin-top: -58px;

    }



}

/***********************************Services*****************************/



#services{

    margin-top: 100px;

    background-color: #fff;

    background-image: url("../images/Background-services.svg");

    min-height: 150px;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}

.card2{

    transition: background 0.3s,border-radius 0.3s,opacity 0.3s;

    transition: background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;

    margin: 10px 10px 10px 10px;

    padding: 40px 40px 40px 40px;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    position: relative;

    width: 100%;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -ms-flex-line-pack: start;

    align-content: flex-start;

}



/**************************************************************/

    #portfolio{

    margin-top: 100px;

    min-height: 150px;

    background-color: #fff;

    background-image: url("../images/Background-portfolio.svg");

    background-position: center center;

    background-repeat: no-repeat;

    background-size: contain;



    }

    .preview {

        background-image: url("../images/websites/header-portfolio.png");

        position: relative;

        width: 100%;

        height: 300px;

        overflow: hidden;

        border: 1px solid red;

        background-color: transparent;

        /* margin-bottom: 30px; */

        border-radius: .25rem .25rem 0 0 !important;

        background-repeat: no-repeat;

        background-size: 100% 300px;

        padding-top: 19px;

      }

      

      .preview .previewimg {

        width: 100%;

        height: auto;

        transform: translateY(0px); 

      }

      

      .preview:hover .previewimg {

        cursor: crosshair;

        transform: translateY(calc(-100% + 300px)); 

        transition: 5s;

      }

      .site-name{

        color: #fff !important;

        font-family: "Nunito Sans",Sans-serif !important;

        background-image: linear-gradient(to right,#25367a 5%,#00e8ff 100%);

        border-radius: 0 0 .25rem .25rem;

    margin-bottom: 35px;

      }

      .site-name p{

          text-align: center;

      }



      /***************************Testimonial*************************/

#testimonial{

        margin-top: 100px;

        background-color: #fff;

        background-image: url("../images/Background-about.svg");

        min-height: 150px;

        background-position: center center;

        background-repeat: no-repeat;

        background-size: cover;

    }

    /* Slideshow container */

.slideshow-container {

    position: relative;

    margin: 0px 150px 0px 150px;

    /* background: #f1f1f1f1; */

  }

  .slideshow-container .mySlides p {

    font-size: 20px;

    font-family: "Nunito Sans",Sans-serif !important;

  }

  .img-tag{

    height: 128px;

    border-radius: 50%;

    background-position: top center;

  }

  

  /* Slides */

  .mySlides {

    display: none;

    padding: 80px;

    text-align: center;

  }

  

  /* Next & previous buttons */

  .prev1, .next1 {

    cursor: pointer;

    position: absolute;

    top: 50%;

    width: auto;

    margin-top: -30px;

    padding: 16px;

    color: #888;

    font-weight: bold;

    font-size: 20px;

    border-radius: 0 3px 3px 0;

    user-select: none;

  }

  

  /* Position the "next button" to the right */

  .next1 {

    position: absolute;

    right: 0;

    border-radius: 3px 0 0 3px;

  }

  

  /* On hover, add a black background color with a little bit see-through */

  .prev1:hover, .next1:hover {

    background-image: linear-gradient(180deg,#25367a 0%,#00e8ff 100%);

    color: white;

  }

  

  /* The dot/bullet/indicator container */

  .dot-container {

      text-align: center;

      padding: 20px;

      /* background: #ddd; */

  }

  

  /* The dots/bullets/indicators */

  .dot {

    cursor: pointer;

    height: 15px;

    width: 15px;

    margin: 0 2px;

    background-color: #bbb;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.6s ease;

  }

  

  /* Add a background color to the active dot/circle */

  .active1, .dot:hover {

    background-image: linear-gradient(180deg,#25367a 0%,#00e8ff 100%);

  }

  

 

  /* Add a blue color to the author */

  .author {color: cornflowerblue;}



  @media only screen and (max-device-width:650px){

    .slideshow-container {

        margin: 0px 0px 0px 0px;

      }

      .slideshow-container .mySlides p {

        font-size: 12px;

        font-family: "Nunito Sans",Sans-serif !important;

      }

  }



  /*****************************Footer***********************************/

   #footer{

    background-color: #1b1b1b;

    transition: background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;

    margin-top: 100px;

    margin-bottom: 0;

    padding: 0 0 0 0;

    min-height: 300px;

   } 



   /* footer */

   .vl1{

    border-left: 3px solid #00e8ff;

    height: 100px;

    margin-left: 50%;

    position: absolute;

    margin-top: -44px;

   }

   .back-to-top{

    height: 50px;

    cursor: pointer;

    margin-top: -32px;

    margin-right: 31px;

    float: right;

   }

   .social-media{

     padding-top: 100px !important;

   }

   .social{

    border: 2px solid #00e8ff;

    padding: 11px 17px;

    border-radius: 100%;

    font-size: 30px !important;

    color: #fff;

   }

   .social:hover{

     background-color:  #00e8ff;

     transition: 1s;

     transform: translateY(-10px);

   }

   .social1{

    border: 2px solid #00e8ff;

    padding: 11px 13px;

    border-radius: 100%;

    font-size: 30px !important;

    color: #fff;

   }

   .social1:hover{

     background-color:  #00e8ff;

     transition: 1s;

     transform: translateY(-10px);

   }

   .social2{

    border: 2px solid #00e8ff;

    padding: 11px 10px;

    border-radius: 100%;

    font-size: 30px !important;

    color: #fff;

   }

   .social2:hover{

     background-color:  #00e8ff;

     transition: 1s;

     transform: translateY(-10px);

   }

   .text-foot{

     margin-top: 50px;

   }

   .text-foot h3{

     color:#fff;

     font-family: "Nunito Sans",Sans-serif !important;

     margin-top: 10px !important;

   }

   #footer .hl{    

     margin-left: 0px !important;

   }

  .foot-links .hl{

    width: 50px !important;

  }

  .foot-links h5{

    margin-top: 5px;

    margin-bottom: 15px;

    color: #fff;

    font-size: 20px;

    font-weight: 600;

    font-family: "Nunito Sans",Sans-serif !important;

  }

  .foot-links p{

    font-family: "Nunito Sans",Sans-serif !important;

    color: #fff;

  }

  .callback h5{

    margin-top: 5px;

    margin-bottom: 15px;

    color: #fff;

    font-size: 20px;

    font-weight: 600;

    font-family: "Nunito Sans",Sans-serif !important;

  }

  .callback .from-padd{

    margin-top: 9px;

    margin-bottom: 5px;

    color: #000;

    font-family: "Nunito Sans",Sans-serif !important;

  }

  

  

  

  

  

      



/*****************************Media Query*********************************/

@media only screen and (max-device-width:650px){

    .navbar img{

        width:150px;

    }

    .show {

        /* background: transparent !important; */

        background-color: black !important;

        

        /* width: 23px; */

        padding-left: 20px !important;

        margin-left: 50% !important;

        margin-top: -50px !important;

    }

}