body{
    background-color: #212529 !important;
  }
  ::-webkit-scrollbar {
      width: 10px;  
  }
    ::-webkit-scrollbar-track {
      background: #f1f1f1; 
    }
    ::-webkit-scrollbar-thumb {
      background: #36c4e6; 
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #3c9cc3; 
    }
  html{
      scroll-behavior: smooth;
  }
  /* Slider */
  .carousel-indicators [data-bs-target] {
      box-sizing: content-box;
      flex: 0 1 auto;
      width: 180px !important;
      height: 5px !important;
      padding: 0;
      margin-right: 3px;
      margin-left: 3px;
      text-indent: -999px;
      cursor: pointer;
      background-color: #fff;
      background-clip: padding-box;
      border: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      opacity: .5;
      transition: opacity .6s ease;
  }
  .slider_text{
      position: absolute;
      z-index: 1;
      top: 50px;
  }
  .companylogo{
      float: left;
      position:relative;
      top: -5px;
  }
  .companylogo span{
    font-size: 40px;
  }
  .social_list ul{
      float: right;
      display: flex;
  }
  .social_list ul li{
     margin: 5px;
     border: 2px solid #fff;
     padding: 10px;
     list-style: none;
  }
  .social_list ul li:hover{
      border: 2px solid rgb(167, 162, 162);
   }
  .social_list ul li a{
      color: #fff;
   }
  .box{
      margin-top: 28%;
     /*  border: 8px solid #ccc; */
      padding: 50px;
  /*     box-shadow: -2px 0px 10px -1px #000; */
  }
  /* .box:hover{
      border: 8px solid rgb(167, 162, 162);
  } */
  .box a{
      text-decoration: none;
  }
  .box h1{
      color: #fff;
      font-size: 58px;
      text-shadow: 3px 5px 3px #000;
  }
  .box h5{
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      position: relative;
      top: 10px;
      text-shadow: 2px 2px 2px #000;
  }
  /* Slider End */
  /* NAVIGATION */
  #navbar {
      overflow: hidden;
  }
  .sticky {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10000;
    }
    .sticky{
      padding-top: 60px;
    }
  .bg-nav{
      background-color: #36c4e6;
      padding: 5px 0;
      box-shadow: 2px 2px 10px #000;
  }
  nav {
      width: 80%;
      margin: 0 auto;
      background: #fff;
      padding: 50px 0;
      background-color: #36c4e6!important;
    }
    nav ul {
      list-style: none;
      text-align: center;
    }
    nav ul li {
      display: inline-block;
    }
    nav ul li a {
      display: block;
      padding: 5px !important;
      font-size: 16px !important;
      text-decoration: none;
      color: #fff !important;
      font-weight: 500;
      text-transform: uppercase;
      margin: 0 10px;
    }
    nav ul li a,
    nav ul li a:after,
    nav ul li a:before {
      transition: all .5s;
    }
    nav ul li a:hover {
      color: #555;
    }
    .dropdownnav-menulist{
      display: none;
    }
    .select-dropdown{
      padding: 0.375rem 15.25rem .375rem .75rem !important;
      color: #888888 !important;
      text-transform: uppercase;
    }
    /* stroke */
    nav.stroke ul li a,
    nav.fill ul li a {
      position: relative;
    }
    nav.stroke ul li a:after,
    nav.fill ul li a:after {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 0%;
      content: '.';
      color: transparent;
      background: #3c9cc3 !important;
      height: 2px;
    }
    nav.stroke ul li a:hover:after {
      width: 100%;
    }
    /* End Navigation */
    /* About us */
    .underline {
      padding: 80px 0 80px 0 ;
      font-size: 60px;
      font-weight: 200;
      color: #fff;
    }
    .underline:after {
      position: absolute;
      content: '';
      height: 4px;
      width: 100px;
      margin: 10px -30px 0;
      background: #36c4e6;
  }
  /* About text */
  .about-text{
      margin-top: 25px;
  }
  .about-text h3{
      font-size: 42px;
      font-weight: 300;
      color: #fff;
  }
  .about-text h6{
      font-size: 16px;
      font-style: italic;
      color: #b9b8b7;
  }
  .about-text p{
      font-size: 16px;
     padding: 30px 0;
      color: #cfc4c4;
      line-height: 150%;
      font-weight: 500;
      max-width: 474px;
  }
  .about-text ul{
      list-style: none;
      margin-left: -30px;
  }
  .about-text ul li span{
      padding-left: 30px;
      color: #cfc4c4;
      font-size: 16px;
  }
  /* End About text */
  /* Features on background with image */
  .features-bg{
      background: url('pexels-photo-31831755.jpg') no-repeat center;
      background-size: cover;
      width: 100%;
      height: auto;
      margin-top: 80px;
      padding: 15px;
  }
  .features-container{
      margin: 50px 0 !important;
      cursor: all-scroll;
  }
  .features-text h4{
      color: #fff;
      margin-top: 15px;
  }
  .features-text p{
      color: #fff;
      width: 95%;
  }
  .features-stepsn{
      display: none;
  }
  .features-steptd{
      display: none;
  }
  /* End Features on background with image */
  /* Our Services */
  .subheader h4{
      font-size: 25px;
      font-style: italic;
      color: #b9b8b7;
      padding: 10px 0 30px;
  }
  .feature-icon{
      position: absolute;
      display: inline-block;
      padding: 15px;
      background-color: #36c4e6;
  }
  .feature-icon1{
     
      position: absolute;
      display: inline-block;
      padding: 15px;
      background-color: #36c4e6;
  }
  .feature-icon2{
      position: absolute;
      display: inline-block;
      padding: 10px;
      background-color: #36c4e6;
  }
  .feature-icon3{
      position: absolute;
      display: inline-block;
      padding: 15px;
      background-color: #36c4e6;
  }
  .feature-icon4{
      position: absolute;
      display: inline-block;
      padding: 15px;
      background-color: #36c4e6;
  }
  .feature-icon5{ 
      position: absolute;
      display: inline-block;
      padding: 20px;
      background-color: #36c4e6;
  }
  .feature-list-box-text p{
      color: #cfc4c4;
  }
  .feature-list-box-text h4{
      color: #fff;
  }
  .feature-list-box-text{
      margin-left: 100px;
  }
  
   
  /* End Our Services */
  /* Info-list & progress-bars  */
  .info-listandprogress-bars-bg{
      background: url('photo-1517245386807-bb43f82c33c4.png') no-repeat center;
      background-size: cover;
      width: 100%;
      height: auto;
      margin-top: 80px;
      padding: 35px;
  }
  #counter{
      background: rgba(black, .05);
      padding: 25px;
      width: 800px;
      max-width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
  }
  .counter-number{
      flex: 1;
      text-align: center;
      font-size: 110px;
      font-weight: 700;
      color: #fff;
  }
  span.percent:after {
      content: "%";
      display: inline-block;
  }
  .info-listandprogress-bars-head{
      text-align: center;
      color: #fff;
  }
  .info-listandprogress-bars-text{
      text-align: center;
      color: #fff;
      font-weight: 500;
  }
  /* progress-bars */
  .percentage{
      padding:20px 0;
      opacity:0;
    }
    .animation{
      height:20px;
      border:1px solid transparent;
      background: #aaaaaa;
      opacity: 0.8;
    }
    .animation-bar{
      height:20px;
      width:0;
      background:#fff;
      position:relative;
      -webkit-transition: all 0.9s ease-out;
      transition: all 0.9s ease-out;
    } 
    .show{
      opacity:1;
      transform: translateY(100px);
      animation: come-in 0.8s ease forwards;
      -webkit-transition: all 0.9s ease-out;
      transition: all 0.9s ease-out;
    }
    .come-in:nth-child(odd) {
      animation-duration: 0.6s; /* So they look staggered */
    }
    @keyframes come-in {
      to { transform: translateY(0px); }
    }
    .p50{
      width:67%;
    }
    .p25{
      width:86%;
    }
    .p36{
      width:34%;
    }
    .info-listandprogress-offon{
      display: none;
    }
  /* End Info-list & progress-bars  */
  /* Expolre our work  */
  .work-list{
      margin-bottom: 20px;
  }
  .work-list ul{
      list-style: none;
      text-align: center;
  }
  .work-list ul li{
      margin: 5px 2px;
      border: 2px solid #ccc;
      padding: 5px 10px;
      text-transform: uppercase;
      font-weight: 700;
      color: #ccc;
      font-size: 14px;
      display: inline-block;
      box-shadow: 1px 1px 5px #fff;
      cursor: pointer;
  }
  .work-list ul li:hover{
      border: 2px solid #36c4e6;
      color: #fff;
  }
  .service-active{
    border: 2px solid #36c4e6 !important;
    color: #fff !important;
    background-color: #36c4e6;
  }
  .image-description{
    background-color: #36c4e6;
    width: 80%;
    padding: 14px 20px 22px;
    color: #fff;
  }
  .image-description:hover{
     background-color: #2c343d;
  }
  /* End Expolre our work  */
  /* quotation-list  */
  .quotation-list-wrapper{
    background: url('photo-1450101499163-c8848c66ca85_1.jpg') no-repeat center;
    background-size: cover;
    width: 100%;
    height: auto;
    margin-top: 80px;
    padding: 150px;
  }
  .img-right{
    float: right;
    display: block;
  }
  .quotation-text{
    color: #fff;
    padding: 40px;
    margin-right: -25px !important;
  }
  .quotation-text-bottom{
    color: #fff;
    margin-top: 20px;
    margin-left: 35px !important;
  }
  /* End quotation-list  */
  /* Meet Our Team */
  .employee-profile img{
    width: 70%;
    float: right;
  }
  .employee-profile .image-description{
    float: right;
    width: 70%;
  }
  .employee-profile ul{
    float: right;
    width: 70%;
  }
  .employee-profile ul{
    float: right;
    width: 77%;
    list-style: none;
  }
  .employee-profile ul li{
   display: inline-block;
   margin: 25px 5px;
   padding: 15px 20px;
   background-color: #36c4e6;
  }
  .employee-profile ul li:hover{
    background-color: #2c343d;
   }
  .skillbar {
      position:relative;
      display:block;
      margin-bottom:15px;
      width:100%;
      background:#eee;
      height:20px;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      -webkit-transition:0.4s linear;
      -moz-transition:0.4s linear;
      -ms-transition:0.4s linear;
      -o-transition:0.4s linear;
      transition:0.4s linear;
      -webkit-transition-property:width, background-color;
      -moz-transition-property:width, background-color;
      -ms-transition-property:width, background-color;
      -o-transition-property:width, background-color;
      transition-property:width, background-color;
  }
  .skillbar-bar {
      height:20px;
      width:0px;
      background:#6adcfa;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
  }
  .skill-bar-percent {
      position:absolute;
      right:10px;
      top:0;
      font-size:11px;
      height:20px;
      line-height:20px;
      color:#ffffff;
      color:rgba(0, 0, 0, 0.4);
  }
  /* End Meet Our Team */
  /* News */
  .newsandcontact{
   /*  margin-top: 50px; */
    background-color: #2c343d;
  }
  .newsdate p{
    text-align: center;
    padding: 10px 18px 10px 18px;
    font-size: 20px;
    background-color: #fff;
    display: inline-block;
    color: #484C54;
  }
  .newsdate p span{
    font-size: 25px;
  }
  .newsdate p:first-child{
    padding: 10px 25px 10px 25px !important;
    background-color: #36c4e6;
    color: #fff;
  }
  .newstext{
    margin-left: 65px;
    padding-bottom: 27px;
    background-color: #3b444e;
  }
  .newstext h4{
    padding: 15px;
  }
  .newstext h4 a{
    color: #fff;
    text-decoration: none;
  }
  .newstext h4 a:hover{
    text-decoration: underline;
  }
  .newstext p{
   color: #C2C7CC;
   padding: 20px 15px;
  }
  .newsicon{
    padding: 15px;
  }
  .newsicon i{
    margin: 5px;
  }
  .newsimg{
    width: 450px;
    position: relative;
    top: -104px;
    left: 92px;
  }
  .newsviews{
    position: absolute;
    z-index: 100;
  }
  .news-img-side{
    float: right;
  }
  .allposts{
    border: 3px solid #3b444e;
    padding: 30px;
    margin: 40px 0 20px;
    cursor: pointer;
  }
  .allposts a{
    color: #fff;
    text-decoration: none;
  }
  .allposts:hover{
    border: 3px solid #3c9cc3;
  }
  .allposts a:hover{
    color: #fff;
  }
  /* End News */
  /* twitter */
  .twitter-bg{
    background-color: #3b444e;
  }
  .twitter-img{
    background-image: url('twitter_background.png');
    background-position: 0px 0px;
    background-repeat: no-repeat;
    height: 230px;
    width: 400px;
    position: relative;
    left: -120px;
  }
  .twitter-padding{
    padding: 25px 0px 0 10px;
  }
  /* End twitter */
  /* plan */
  .planbox{
    border: 5px solid #E9E9E3;
    padding: 25px 45px;
    cursor: all-scroll;
  }
  .planbox:hover{
    border: 5px solid #3c9cc3;
  }
  .planbox h1{
    font-size: 60px;
    color: #36c4e6;
  }
  .planbox h4{
    color: #fff;
  }
  .planbox h6{
    color: #cfc4c4;
  }
  .planbox p{
    color: #fff;
    font-weight: 500;
    padding: 20px 0px 20px 0px;
  }
  .planbox ul{
    list-style: none;
    color: #fff;
    padding: 5px 0;
  }
  .planbox a{
    background-color: #36c4e6;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    padding: 12px 20px;
  }
  .planbox a:hover{
    color: #fff;
    background-color: #2c343d;
  }
  .tool {
    position: relative;
  }
  .tool::before,
  .tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
  }
  .tool:hover::before,
  .tool:focus::before,
  .tool:hover::after,
  .tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
  }
  .tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #3c9cc3 transparent transparent transparent;
    bottom: 100%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .10s .5s;
    transform:  scale(.6) translateY(-90%);
  } 
  .tool:hover::before,
  .tool:focus::before {
    transition: all .65s cubic-bezier(.64,-0.18,.31,1.26) .2s;
  }
  .tool::after {
    background: #3c9cc3;
    border-radius: .25em;
    bottom: 102%;
    text-align: center;
    color: #EDEFF0;
    content: attr(data-tip);
    font-weight: bold;
    text-transform: uppercase;
    margin-left: -8.75em;
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);  
    width: 17.5em;
  }
  .tool:hover::after,
  .tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
  }
  .planoffon{
    display: none;
  }
  /* End plan */
  /* Our Pricing Plans & Questions and Answers */
  .plan-qu-an-bg{
    background-color: #2c343d;
    padding-bottom: 20px;
  }
  .underlineplan{
    margin-top: 50px;
    font-size: 24px;
    color: #fff;
  }
  .underlineplan:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 125px;
    margin: 10px 0px 0;
    background: #36c4e6;
  }
  .icon-plan{
    display: inline-block;
    background-color: #36c4e6;
    padding: 15px;
    color: #fff;
  }
  .plan-text{
    position: relative;
    top: -60px;
    left: 60px;
    max-width: 250px;
    color: #fff;
  }
  .plan-text p{
    color: #cfc4c4;
  }
  .plan-top-margin{
    margin-top: 100px;
  }
  .plan-top-margin-snd{
    margin-top: 180px;
  }
  .accordion-button:not(.collapsed) {
    color: #fff !important;
    background-color: #36c4e6 !important;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
  }
  .accordion-body {
    background-color: #F7F7F2 !important;
  }
  .accordion-button {
    background-color: #F7F7F2 !important;
  }
  .accordion-item {
    border: 2px solid #E9E9E3 !important;
    margin: 10px 0;
  }
  .accordion-item:hover{
   border-color: #36c4e6 !important;
  }
  .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem #36c4e6 !important;
  }
  /* End Our Pricing Plans & Questions and Answers */
  /*  Contact Us */
  .form-floating>.form-control {
    background-color: #139641;
  }
  .form-floating>label {
    color: #fff;
    font-weight: 500;
  }
  .form-floating>.form-control, .form-floating>.form-select {
    background-color: #3c9cc3 !important;
  }
  .form-control {
    border: 1px solid transparent !important;
    color: #fff !important;
    font-weight: 500 !important;
  }
  .form-floating>.form-control, .form-floating>.form-select {
    box-shadow: none !important;
  }
  .form-tabel{
    background-color: #36c4e6;
    padding: 30px 40px;
  }
  .submit-btn{
    background-color:#3c9cc3 !important;
    padding: 10px 0 !important;
    color: #fff !important;
    font-weight: 500 !important;
  }
  .submit-btn:hover{
    background-color: #2c343d !important;
  }
  [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { 
    box-shadow: none !important;
  }
  .contact-text{
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    font-style: italic;
    line-height: 30px;
  }
  .contact-other-text{
    position: relative;
    top: -60px;
    left: 60px;
    max-width: 250px;
    color: #C2C7CC;
  }
  .contact-page-icon{
    display: inline-block;
    background-color: #3B444E;
    padding: 15px;
    color: #fff;
  }
  .icon-list li{
    margin: 0 5px;
  }
  .icon-list li:hover{
    background-color: #36c4e6;
  }
  .icon-list li a{
    color: #fff;
  }
  .icon-list{
    margin-left: -35px;
  }
  /* End Contact Us */
  /* footer */
  .footer{
    background-color: #1A1F25;
    padding: 30px;
  }
  .info{
    color: #59626D;
  }
  .logo-img{
    width: 55px;
    position: relative;top: -10px;
  }
  /* end footer */