/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap');*/

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');*/

body {
    font-family: 'Roboto', sans-serif;
}

*  {
    margin:  0;
    padding:  0;
    box-sizing:  border-box;
    font-size:  16px;
}
::-webkit-scrollbar  {
    width:  0.4em;
    height:  0.2em;
    border-radius:  20px;
}
::-webkit-scrollbar-button  {
    background:  #008def;
}
::-webkit-scrollbar-track-piece  {
    background:  #f8f9fa;
}
::-webkit-scrollbar-thumb  {
    background:  #008def;
}
body.active::-webkit-scrollbar  {
    width:  none !important;
}
body  {
    /*font-family:  'Montserrat',  sans-serif;*/
    font-weight:  400;
}
a  {
    text-decoration:  none;
    color:  black;
}
a:hover  {
    color:  black;
}
h1,  h2,  h3,  h4,  h5,  h6  {
    margin:  0;
}
ul  {
    margin:  0 !important;
}
.font-10  {
    font-size:  10px !important;
}
.font-12  {
    font-size:  12px !important;
}
.font-14  {
    font-size:  14px !important;
}
.font-16  {
    font-size:  16px !important;
}
.font-18  {
    font-size:  18px !important;
}
.font-20  {
    font-size:  20px !important;
}
.font-22  {
    font-size:  22px !important;
}
.font-24  {
    font-size:  24px !important;
}
.font-26  {
    font-size:  26px !important;
}
.font-28  {
    font-size:  28px !important;
}
.font-30  {
    font-size:  30px !important;
}
.font-32  {
    font-size:  32px !important;
}
.font-34  {
    font-size:  34px !important;
}
.font-40  {
    font-size:  40px !important;
}
.font-42  {
    font-size:  42px !important;
}
.dropdown-item  {
    padding:  0;
}
.dropdown-item:hover  {
    background-color:  transparent;
}
.dropdown-item:focus  {
    background-color:  transparent;
}
.dropdown-toggle:after  {
    display:  none;
}
p  {
    margin:  0;
}
.text-color  {
    color:  #008def;
}
.bg-color  {
    background-color:  #008def;
}
.text-grey  {
    color:  #acacac;
}
.btn:focus  {
    box-shadow:  none !important;
}
.auto-container  {
    position:  static;
    max-width:  1100px;
    padding:  0 15px;
    margin:  0 auto;
}
.button-primary  {
    display:  inline-block;
    padding:  6px 4px;
    padding-left:  25px;
    padding-right:  25px;
    border:  2px solid #fff;
    border-radius:  25px;
    font-size:  16px !important;
    text-shadow:  #fff;
    color:  #fff !important;
    position:  relative;
    font-weight:  500;
    overflow:  hidden;
    z-index:  1;
    background:  linear-gradient( to right,  #ffffff 50%,  rgba(255,  255,  255,  0) 50% );
    background-size:  200% 100%;
    background-position:  right bottom;
    transition:  all 0.5s ease-out;
}
.button-primary:hover  {
    background-position:  left bottom;
    color:  #008def !important;
    transition:  0.3s all;
    box-shadow:  0px 8px 15px rgb(0 0 0 / 30%);
}
.button-secondary  {
    display:  inline-block;
    padding:  8px;
    padding-left:  25px;
    padding-right:  25px;
    border:  2px solid #008def;
    border-radius:  25px;
    font-size:  16px !important;
    text-shadow:  #fff;
    color:  #008def !important;
    position:  relative;
    font-weight:  500;
    overflow:  hidden;
    z-index:  1;
    background:  linear-gradient( to right,  #008def 50%,  rgba(255,  255,  255,  0) 50% );
    background-size:  200% 100%;
    background-position:  right bottom;
    transition:  all 0.5s ease-out;
}
.button-secondary:hover  {
    background-position:  left bottom;
    color:  #fff !important;
    transition:  0.3s all;
    box-shadow:  0px 8px 15px rgb(0 0 0 / 30%);
}
.common_heading  {
    position:  relative;
    z-index:  1;
    margin-bottom:  10px;
}
.common_heading::before  {
    content:  '';
    position:  absolute;
    left:  -15px;
    top:  0;
    height:  56px;
    width:  56px;
    border:  6px solid #008def;
    opacity:  0.1;
    z-index:  -1;
    animation:  rotate_heading 3s linear infinite;
}
@keyframes rotate_heading  {
    100%  {
    transform:  rotateZ(360deg);
}
}
.common_heading h3  {
    font-size:  22px;
    font-weight:  600;
}
.common_heading p  {
    color:  #008def;
    font-weight:  500;
}
.animated_delay_button  {
    animation-delay:  1000ms;
}
.animated_delay_desc  {
    animation-delay:  600ms;
}
.animated_delay_title  {
    animation-delay:  200ms;
}
span  {
    font-size:  inherit;
    font-style:  inherit;
}
.custom-section  {
    padding:  40px 0;
}
.overlay  {
    position:  absolute;
    background-color:  rgba(0,  0,  0,  0.4);
    top:  0;
    left:  0;
    height:  100%;
    width:  100%;
}
input:focus,  textarea:focus,  select:focus  {
    box-shadow:  none !important;
}
select  {
    border:  none;
}
select:focus  {
    border:  none;
    outline:  none !important;
    color:  #8ac1ff !important;
}
.nav-pills li  {
    letter-spacing:  2px;
    font-weight:  600;
    position:  relative;
    margin:  0 4px;
}
.nav-pills li:not(:last-child):after  {
    content:  '/';
    position:  absolute;
    color:  black;
    left:  100%;
    top:  50%;
    transform:  translateY(-50%);
}
.nav-pills .nav-link.active  {
    color:  #008def !important;
    background-color:  transparent !important;
}
ul  {
    list-style:  none;
    padding:  0 !important;
}
.owl-nav  {
    display:  none !important;
}
.owl-dots  {
    margin-top:  30px !important;
    display:  flex !important;
    justify-content:  center;
}
.owl-dots button.owl-dot  {
    height:  3px;
    width:  28px;
    margin:  0 6px;
    border-radius:  20px;
    background-color:  #e6e6e6 !important;
    opacity:  1;
}
.owl-dots button.owl-dot.active  {
    background-color:  #008def !important;
}
#clients .item  {
    margin:  0 12px;
}
button  {
    background-color:  transparent;
    border:  none;
}
#mainNav {
    background-color: none;
    z-index: 1050;
    transition: .4s ease;
    padding: 8px;
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    height: 76px;
    box-shadow: 0 10px 20px 0 rgba(135, 135, 135, .1);
    background-color: #fff

    
}

#mainNav.nav-box {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #fff;
    /*padding: 0 !important;*/
    /*height: 65px*/
}
#mainNav .get_quote  {
    border-radius:  50px;
    padding:  8px 20px;
    color:  #fff !important;
    font-weight:  500;
    cursor:  pointer;
    background-color:  #008def !important;
    color:  white !important;
}
/*#mainNav .navbar-brand  {*/
/*    width:  242px;*/
/*    padding-left:  10px;*/
/*}*/
/*#mainNav .navbar-brand img  {*/
/*    margin:  4px 0;*/
/*}*/
.navbar-light .navbar-toggler  {
    border-color:  transparent !important;
    background:  #008def;
    border-radius:  50px;
    height:  40px;
    width:  40px;
    box-shadow:  0px 8px 15px rgb(0 0 0 / 30%);
}
.navbar-toggler-icon  {
    height:  2px;
    right:  -3px;
    width:  11px;
    border-radius:  3px;
    background-color:  white;
    position:  relative;
    background-image:  none !important;
    transition:  0.4s ease;
}
.navbar-toggler-icon::before,  .navbar-toggler-icon::after  {
    content:  '';
    background-color:  white;
    height:  2px;
    width:  17px;
    border-radius:  3px;
    position:  absolute;
    right:  0;
    transform:  rotateZ(0deg);
    transition:  all 0.4s ease;
}
.navbar-toggler-icon::before  {
    top:  -8px;
}
.navbar-toggler-icon::after  {
    top:  8px;
}
.navbar-toggler .navbar-toggler-icon.close  {
    background-color:  transparent;
}
.navbar-toggler .navbar-toggler-icon.close:before  {
    transform:  rotateZ(-45deg);
    top:  0px;
}
.navbar-toggler .navbar-toggler-icon.close:after  {
    transform:  rotateZ(45deg);
    top:  0px;
}
.navbar-toggler:focus  {
    box-shadow:  none !important;
}


#mainNav.nav-box .nav-link  {
    color:  black !important;
    transition:  0.4s ease;
}
#mainNav.nav-box .nav-link.active:after  {
    background-color:  black !important;
}
.navbar-social .list-inline-item a  {
    padding-left:  6px;
}
.navbar .navbar-nav .nav-item  {
    position:  relative;
}
#mainNav.nav-box .nav-item:hover .nav-link  {
    color:  #008def !important;
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu  {
    position:  absolute;
    top:  100%;
    left:  0;
    background-color:  white;
    width:  260px;
    border-radius:  4px;
    padding-top:  5px;
    padding-bottom:  5px;
    opacity:  0;
    max-height:  0;
    transform:  scaleY(0);
    transform-origin:  top !important;
    transition:  0.4s ease !important;
    box-shadow:  6px 6px 41px -10px rgb(0 0 0 / 15%) !important;
}
.navbar .navbar-nav .nav-item:hover .custom-dropdown-menu  {
    transform:  scaleY(1);
    max-height:  calc(100vh - 5em);
    opacity:  1;
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu li  {
    /* padding:  10px 18px; */
    border-bottom:  1px solid #f1f1f1;
    transition:  0.4s all !important;
    position:  relative;
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu li::before  {
    content:  '';
    position:  absolute;
    left:  0;
    top:  0;
    width:  3px;
    height:  100%;
    transform:  scaleY(0);
    transform-origin:  center;
    background-color:  #008def;
    transition:  0.4s ease;
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu li:hover::before  {
    transform:  scaleY(1);
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu li:hover a  {
    margin-left:  4px;
    color:  #008def !important;
    transition:  0.4s all !important;
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu li:hover a  {
    color:  #008def !important;
    transition:  0.4s all !important;
}
.navbar .navbar-nav .nav-item .custom-dropdown-menu li a  {
    color:  black !important;
}
.dropdown_menu.opac  {
    opacity:  1;
}
.navbar .navbar-nav .nav-item .dropdown_item  {
    transition:  0.4s ease;
    font-weight:  500;
}
.navbar-social .list-inline-item a:hover i.fa-facebook-f  {
    color:  #4867aa;
}
.navbar-social .list-inline-item a:hover i.fa-twitter  {
    color:  #50abf1;
}
.navbar-social .list-inline-item a:hover i.fa-instagram  {
    color:  #c435a7;
}
.navbar-social .list-inline-item a:hover i.fa-linkedin-in  {
    color:  #0077b5;
}
.modal .close  {
    position:  absolute;
    right:  -13px;
    top:  -16px;
    background:  #fff;
    padding:  3px 10px;
    border-radius:  150px;
    opacity:  1;
    text-shadow:  none;
    color:  #000 !important;
}
.modal-content  {
    border-radius:  8px;
}
.modal-body  {
    padding:  0;
    position:  relative;
}
#getQuote_form h5  {
    border-top-left-radius:  8px;
    border-top-right-radius:  8px;
    padding:  14px 0;
}
#getQuote_form .inner_content  {
    padding:  20px;
    width:  100%;
    margin:  0;
}
#main-slider  {
    z-index:  200;
    overflow:  hidden;
    position:  relative;
    background-size:  300% 300%;
}
.dot  {
    position:  absolute;
    z-index:  1;
    border-radius:  50px;
    opacity:  1;
}
.dot:first-child  {
    height:  10px;
    width:  10px;
    background-color:  #aaffdc;
    top:  0px;
    left:  0px;
    animation:  move1 20s linear infinite;
}
@keyframes move1  {
    100%  {
    top:  100%;
    left:  60%;
    opacity:  0;
}
}
.dot:nth-child(2)  {
    height:  15px;
    width:  15px;
    background-color:  #afdfff;
    top:  200px;
    left:  0px;
    animation:  move2 20s linear infinite;
}
@keyframes move2  {
    100%  {
    top:  -20%;
    left:  70%;
    opacity:  0;
}
}
.dot:nth-child(3)  {
    height:  20px;
    width:  20px;
    background-color:  #b1bdee;
    right:  0px;
    top:  100px;
    animation:  move3 10s linear infinite;
}
@keyframes move3  {
    100%  {
    top:  80%;
    right:  70%;
    opacity:  0;
}
}
.dot:nth-child(4)  {
    height:  20px;
    width:  20px;
    background-color:  #cdd5f7;
    bottom:  0px;
    left:  45%;
    animation:  move4 10s linear infinite;
}
@keyframes move4  {
    100%  {
    bottom:  50%;
    left:  70%;
    opacity:  0;
}
}
.dot:nth-child(5)  {
    height:  25px;
    width:  25px;
    background-color:  #baaaff;
    bottom:  0%;
    right:  10%;
    animation:  move5 20s linear infinite;
}
@keyframes move5  {
    100%  {
    bottom:  70%;
    right:  80%;
    opacity:  0;
}
}
.dot:nth-child(6)  {
    height:  12px;
    width:  12px;
    background-color:  #66cfff;
    top:  0%;
    right:  20%;
    animation:  move6 20s linear infinite;
}
@keyframes move6  {
    100%  {
    top:  50%;
    right:  90%;
    opacity:  0;
}
}
.dot:nth-child(7)  {
    height:  12px;
    width:  12px;
    background-color:  #66cfff;
    top:  100%;
    left:  20%;
    animation:  move7 20s linear infinite;
}
@keyframes move7  {
    100%  {
    top:  -50%;
    left:  30%;
    opacity:  0;
}
}
.box_sha1,  .box_sha2,  .box_sha3  {
    position:  absolute;
    z-index:  1;
}
.box_sha1  {
    left:  20px;
    top:  80px;
    height:  150px;
    width:  150px;
    box-shadow:  0 4px 20px -10px rgba(0,  0,  0,  0.15);
}
.box_sha2  {
    right:  50px;
    top:  60px;
    height:  80px;
    width:  80px;
    box-shadow:  0 4px 20px -10px rgba(0,  0,  0,  0.25);
}
.box_sha3  {
    left:  50%;
    top:  50%;
    transform:  translate(-50%,  -50%);
    height:  120px;
    width:  120px;
    box-shadow:  0 4px 20px -10px rgba(0,  0,  0,  0.25);
}
#top-slider  {
    padding-top:  1px;
    padding-bottom:  50px;
    background:  linear-gradient(to right,  #f7f8fc,  #d0d6f0);
}
#top-slider img  {
    max-height:  500px;
    width:  auto;
    z-index:  500;
}
#top-slider .slider_col  {
    padding-left:  0;
    padding-right:  0;
    z-index:  500;
}
#top-slider .large_heading  {
    font-size:  46px;
    line-height:  42px;
    margin:  20px 0;
    position:  relative;
    z-index:  500;
}
.carousel  {
    position:  relative;
}
#main-slider .mid-text  {
    position:  relative;
}
#main-slider .slider_images  {
    text-align:  center;
    z-index:  100;
    position:  relative;
}
#main-slider .slider_images::after  {
    content:  '';
    position:  absolute;
    bottom:  -10px;
    right:  -10px;
    height:  180px;
    width:  180px;
    box-shadow:  0 4px 20px -10px rgba(0,  0,  0,  0.3);
}
#main-slider img  {
    height:  auto;
    width:  100%;
    position:  relative;
}
.carousel-item  {
    position:  relative;
}
.carousel-control-prev,  .carousel-control-next  {
    width:  8%;
}
.slider_contact  {
    background-color:  white;
    box-shadow:  0 6px 40px -10px rgba(0,  0,  0,  0.2);
    position:  relative;
    z-index:  500;
    margin:  50px 100px;
    padding:  6px 20px;
    margin-top:  -50px;
}
.phone_icon  {
    width:  90px;
    vertical-align:  middle;
    font-size:  50px;
    align-self:  center;
    text-align:  center !important;
    border-radius:  50%;
    float:  left;
}
.phone_icon i  {
    font-size:  50px;
}
.contact_text  {
    font-size:  18px;
    margin-left:  50px;
}
.about .industries_icon  {
    width:  100px;
    height:  100px;
    line-height:  100px !important;
    vertical-align:  middle !important;
    font-size:  40px;
    text-align:  center;
    background-image:  linear-gradient(to right,  #008def,  #006adb);
    border-radius:  50%;
    color:  #fff;
    transition:  0.2s;
}
.about .solution  {
    border-right:  1px solid #e6e6e6;
}
.about .solution:nth-child(4),  .about .solution:nth-child(8)  {
    border-right:  none;
}
.about .solution:first-child,  .about .solution:nth-child(2),  .about .solution:nth-child(3),  .about .solution:nth-child(4)  {
    border-bottom:  1px solid #e6e6e6;
}
.hire  {
    background-image:  linear-gradient(to right,  #008def,  #fff);
}
.hire img  {
    margin-top:  -40px;
}
.hire h3  {
    font-size:  22px !important;
    font-weight:  600;
    margin-bottom:  25px;
}
.services  {
    background-color:  #f5faff;
    position:  relative;
    overflow:  hidden;
}
.services .cube:first-child  {
    top:  56vw;
    left:  18vh;
}
.services .cube:nth-child(2)  {
    animation-delay:  2s;
    left:  38vw;
    top:  15vh;
}
.services .cube:nth-child(3)  {
    animation-delay:  4s;
    left:  75vw;
    top:  60vh;
}
.services .first-services  {
    border-radius:  10px;
    box-shadow:  0 10px 40px rgb(0 0 0 / 10%);
    padding:  34px 22px;
    text-align:  center;
    position:  relative;
    overflow:  hidden;
    z-index:  1;
    margin:  16px;
    background-color:  #f7fbff;
    min-height:  340px;
}
.services .outer_block:hover a  {
    transition:  0.4s ease;
}
.services .outer_block:hover a  {
    color:  white !important;
}
.services .outer_block  {
    height:  100%;
    width:  100%;
}
.services .outer_block .first-services::before  {
    position:  absolute;
    content:  '';
    background-color:  #008def;
    width:  200%;
    height:  200%;
    right:  80%;
    top:  80%;
    transition:  all 0.3s cubic-bezier(0.905,  0.395,  0.12,  0.55);
    z-index:  -1;
    border-radius:  100%;
}
.services .outer_block:hover .first-services::before  {
    right:  -50%;
    top:  -50%;
}
.services .first-services .service-box  {
    display:  block;
}
.services .first-services .service-box svg  {
    height:  50px;
    width:  auto;
    transition:  0.4s ease;
}
.services .outer_block:hover .service-box svg  {
    fill:  white;
}
.services .first-services .title  {
    font-size:  20px;
    font-weight:  600;
    margin:  20px 0 8px 0;
}
.services .first-services .next  {
    position:  absolute;
    right:  -60px;
    bottom:  -60px;
    width:  50px;
    height:  50px;
    background-color:  #fff;
    border-radius:  100%;
    display:  flex;
    justify-content:  center;
    transition:  all 0.3s ease-in-out;
    align-items:  center;
    z-index:  1;
}
.services .first-services .next img  {
    margin-top:  -6px;
    margin-left:  -10px;
}
.services .outer_block:hover .next  {
    bottom:  -12px;
    right:  -12px;
    transition-delay:  0.2s;
}
.portfolio_sec .item  {
    position:  relative;
    margin:  0 10px 20px 10px;
    box-shadow:  0 5px 20px rgba(0,  0,  0,  0.1);
}
.portfolio_sec .portHover  {
    position:  absolute;
    bottom:  0;
    left:  0;
    background-color:  #008def;
    padding:  6px 0;
    z-index:  2;
    width:  100%;
    transform:  scaleY(0);
    transform-origin:  bottom;
    transition:  transform 0.3s ease-in-out;
}
.portfolio_sec .item:hover .portHover  {
    transform:  scaleY(1);
}
#portfolio .owl-nav  {
    display:  none;
}
#technology  {
    z-index:  10;
}
#technology .item  {
    margin:  10px 10px;
}
#technology .item .tech_circle  {
    border-radius:  50%;
    background-color:  white;
    height:  130px;
    width:  130px;
    padding-top:  25px;
    padding-bottom:  25px;
    box-shadow:  0 10px 20px rgba(0,  0,  0,  0.1);
}
#technology .item .tech_circle:nth-child(2)  {
    margin-top:  20px;
}
#technology .item .tech_circle img  {
    height:  55px;
    width:  auto;
    margin:  0 auto;
}
.title  {
    text-align:  center;
    font-weight:  700;
    margin-top:  4px;
}
.title.html  {
    color:  #e44d26;
}
.title.css  {
    color:  #264de4;
}
.title.js  {
    color:  #f0be25;
}
.title.bootstrap  {
    color:  #8b12fc;
}
.title.jquery  {
    color:  #0867ab;
}
.title.react  {
    color:  #00d8ff;
}
.title.angular  {
    color:  #dd0330;
}
.title.vue  {
    color:  #3fb984;
}
.title.php  {
    color:  #7377ad;
}
.title.node  {
    color:  #4caf50;
}
.title.python  {
    color:  #ffd545;
}
.title.java  {
    color:  #0074bd;
}
.title.codeignitor  {
    color:  #ee4323;
}
.title.laravel  {
    color:  #fb4f37;
}
.title.spring  {
    color:  #6bb445;
}
.title.hibernet  {
    color:  #bcae79;
}
.title.flutter  {
    color:  #54c5f8;
}
.title.ios  {
    color:  #000000;
}
.title.android  {
    color:  #82bc01;
}
.title.sql  {
    color:  #00618a;
}
.title.mongodb  {
    color:  #409f39;
}
.title.firebase  {
    color:  #f58410;
}
.title.postgre  {
    color:  #316192;
}
.title.blender  {
    color:  #fe6d02;
}
.title.c,  .title.cplus  {
    color:  #00589c;
}
.title.chash  {
    color:  #a179dc;
}
.client  {
    position:  relative;
}
.counter_section  {
    box-shadow:  0 0 40px -10px rgba(0,  123,  255,  0.2);
    padding:  30px 0;
}
.counter_box  {
    text-align:  center;
    padding:  10px 10px;
    margin:  10px 5px;
}
.counter_box .img_v  {
    position:  relative;
    height:  70px;
    width:  70px;
    margin:  0 auto;
}
.counter_box .img_v img  {
    position:  absolute;
    top:  50%;
    left:  50%;
    transform:  translate(-50%,  -50%);
    height:  40px;
    width:  auto;
    margin-bottom:  18px;
}
.counter_section .counter_box .img_v::before  {
    content:  '';
    position:  absolute;
    left:  50%;
    top:  50%;
    transform:  translate(-50%,  -50%);
    height:  inherit;
    width:  inherit;
    z-index:  -1;
    background-color:  #c8e3ff;
}
.counter_section .col-6:nth-child(2) .counter_box .img_v::before  {
    border-bottom-left-radius:  130px;
    border-bottom-right-radius:  140px;
    border-top-left-radius:  180px;
    border-top-right-radius:  120px;
}
.counter_section .col-6:first-child .counter_box .img_v::before,  .counter_section .col-6:nth-child(6) .counter_box .img_v::before  {
    border-bottom-left-radius:  230px;
    border-bottom-right-radius:  190px;
    border-top-left-radius:  210px;
    border-top-right-radius:  420px;
}
.counter_section .col-6:nth-child(3) .counter_box .img_v::before,  .counter_section .col-6:nth-child(5) .counter_box .img_v::before  {
    border-bottom-left-radius:  450px;
    border-bottom-right-radius:  120px;
    border-top-left-radius:  500px;
    border-top-right-radius:  120px;
}
.counter_section .col-6:nth-child(4) .counter_box .img_v::before  {
    border-bottom-left-radius:  70px;
    border-bottom-right-radius:  560px;
    border-top-left-radius:  280px;
    border-top-right-radius:  50px;
}
.counter_section .counter_box h3  {
    font-weight:  900;
    font-size:  36px;
    color:  #008def;
}
.img__block  {
    margin-left:  50px;
}
#client-carousel img,  #client-carousel2 img  {
    border-radius:  50%;
    height:  80px;
    width:  auto;
    border:  4px solid white;
    box-shadow:  0 0 26px -10px rgb(0 0 0 / 50%);
}
#client-carousel .author,  #client-carousel2 .author  {
    font-size:  20px;
    font-weight:  600;
    color:  black;
}
#client-carousel .quote-icon,  #client-carousel2 .quote-icon  {
    position:  absolute;
    top:  18px;
    right:  18px;
    z-index:  0;
}
#client-carousel .quote-icon i,  #client-carousel2 .quote-icon i  {
    font-size:  40px;
    color:  rgba(255,  255,  255,  0.4);
    text-shadow:  0px 0 10px rgb(0 0 0 / 15%);
}
#client-carousel .item,  #client-carousel2 .item  {
    padding-bottom:  40px;
}
#client-carousel .outer-box-client,  #client-carousel2 .outer-box-client  {
    margin:  0 14px;
}
#client-carousel .owl-dots,  #client-carousel2 .owl-dots  {
    margin-top:  0px !important;
}
.inner-box-client  {
    background-image:  linear-gradient(to right,  #f7f8fc,  #d0d6f0);
    padding:  20px;
    border-radius:  5px;
    position:  relative;
    box-shadow:  0 0 26px -10px rgb(0 0 0 / 15%);
}
.inner-box-client::before  {
    content:  '';
    position:  absolute;
    top:  100%;
    left:  0;
    height:  50px;
    width:  50px;
    border-top:  40px solid #f7f8fc;
    border-right:  48px solid transparent;
}
.inner-box-client p  {
    position:  relative;
}
.main-footer  {
    background:  #f8f9fa;
}
.main-footer h5  {
    color:  #017cff;
    font-weight:  600;
    margin-bottom:  15px;
}
.main-footer ul li  {
    padding-bottom:  5px;
}
.main-footer h5  {
    color:  #017cff;
    font-weight:  600;
    margin-bottom:  15px;
}
.main-footer h5  {
    color:  #017cff;
    font-weight:  600;
    margin-bottom:  15px;
}
.bottom-footer  {
    background-color:  black;
}
.bottom-footer a  {
    color:  #fff !important;
}
.main-footer .footer-bottom ul li a i  {
    margin-right:  6px;
    height:  42px;
    width:  42px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    border:  2px solid #fff;
    border-radius:  50%;
    transition:  0.4s ease;
}
.footer-bottom a:hover i.fa-twitter  {
    background:  #50abf1;
    border:  none;
}
.footer-bottom a:hover i.fa-facebook-f  {
    background:  #4867aa;
    border:  none;
}
.footer-bottom a:hover i.fa-instagram  {
    background-image:  linear-gradient(-60deg,  #ffca53,  #f9524a,  #ca37ac,  #4763c7);
    border:  none;
}
.footer-bottom a:hover i.fa-pinterest-p  {
    background:  #c61d26;
    border:  none;
}
.footer-bottom a:hover i.fa-linkedin-in  {
    background:  #0077b5;
    border:  none;
}
.scroll-to-top,  .call_button,  .whatsapp_button,  .fb_button  {
    position:  fixed;
    border-radius:  50%;
    box-shadow:  0px 8px 15px rgb(0 0 0 / 30%);
    vertical-align:  middle;
    transition:  all 300ms ease;
    z-index:  600;
    height:  40px;
    width:  40px;
    color:  #fff;
    font-size:  22px;
    text-transform:  uppercase;
    line-height:  40px;
    text-align:  center;
    cursor:  pointer;
}
.scroll-to-top i,  .call_button i,  .whatsapp_button i,  .fb_button i  {
    font-size:  20px;
}
.scroll-to-top  {
    bottom:  15px;
    right:  27px;
    background:  #0a0a0a;
    display:  none;
}
.call_button  {
    bottom:  105px;
    left:  15px;
    background:  #1fa0c8;
}
.whatsapp_button  {
    bottom:  60px;
    left:  15px;
    background:  #2ba63b;
}
.fb_button  {
    bottom:  15px;
    left:  15px;
    background-image:  linear-gradient( rgb(255,  118,  161) 0%,  rgb(126,  103,  255) 50%,  rgb(12,  174,  193) 100% );
}
.bannerHead  {
    height:  350px;
    position:  relative;
    overflow:  hidden;
    background:  linear-gradient(270deg,  #a15bcb,  #2249ce);
    background-size:  300% 300%;
    animation:  AnimationName 10s ease infinite;
}
@keyframes AnimationName  {
    0%  {
    background-position:  0% 53%;
}
50%  {
    background-position:  100% 48%;
}
100%  {
    background-position:  0% 53%;
}
}
.bannerHead img  {
    height:  260px;
    width:  auto;
}
.pages  {
    padding:  50px 0;
    height:  100%;
}
.section-content  {
    position:  relative;
}
.bannerHead .content  {
    padding-top:  148px;
}
.breadcrumb  {
    padding:  6px 0;
    align-items:  center;
}
.breadcrumb li  {
    font-size:  20px;
}
.bannerBoard  {
    color:  white;
    width:  100%;
    bottom:  0;
    background:  linear-gradient( 30deg,  rgba(0,  0,  0,  0.54) 35%,  rgba(255,  255,  255,  0) 35% );
    font-size:  18 !important;
    position:  absolute;
}
.breadcrumb-item.active  {
    color:  #fff !important;
}
#contact-page  {
    background-image:  url('../images/pages_bg/page_bg.jpg');
    background-size:  cover;
    background-position:  bottom;
    background-repeat:  no-repeat;
}
input.form-control::placeholder,  textarea.form-control::placeholder,  select  {
    color:  #8ac1ff !important;
}
.btn-submit  {
    background-color:  #008def;
    padding:  8px;
    padding-left:  25px;
    padding-right:  25px;
    border-radius:  30px;
    transition:  0.5s all;
    box-shadow:  0 8px 15px #999494;
}
.btn-close {
}
.contact-one  {
    border:  6px solid #008def;
    padding:  30px;
    position:  relative;
    max-width:  680px;
    padding-right:  218px;
}
.form-group  {
    margin-bottom:  25px;
}
.form-control  {
    border:  0px;
    border-bottom:  1px solid #008def;
    border-radius:  0;
}
.contact-info  {
    position:  absolute;
    right:  -442px;
    top:  100px;
    width:  620px;
    padding:  40px 30px;
    box-shadow:  0 10px 40px rgb(0 0 0 / 15%);
    background-color:  #008def;
    border-radius:  10px;
}
.contact-info a  {
    color:  white !important;
}
.contact-info > div  {
    position:  relative;
    padding-bottom:  30px;
}
.contact-info > div:last-child  {
    padding-bottom:  0;
}
#contact___form  {
    padding:  0px 40px 40px 40px;
    border-radius:  14px;
    overflow:  hidden;
    background:  #fff;
    box-shadow:  0 10px 40px rgb(0 0 0 / 10%);
    position:  relative;
}
#contact___form::before  {
    content:  '';
    position:  absolute;
    left:  0;
    top:  0;
    border-radius:  20px;
    height:  100%;
    width:  100%;
}
.form__group  {
    position:  relative;
    padding:  15px 0 0;
    margin-top:  10px;
}
.form__field  {
    font-family:  inherit;
    width:  100%;
    border:  0;
    border-bottom:  1px solid #d2d2d2;
    outline:  0;
    font-size:  16px;
    color:  #212121;
    padding:  7px 0;
    background:  transparent;
    transition:  border-color 0.2s;
}
.form__label  {
    position:  absolute;
    left:  0;
    display:  block;
    font-size:  17px;
    cursor:  text;
    top:  20px;
    color:  #9b9b9b;
    transition:  0.2s;
}
.form__field:focus  {
    padding-bottom:  6px;
    border-bottom:  2px solid #008def;
    box-shadow:  none;
}
.form__field:focus ~ .form__label  {
    top:  0 !important;
    transition:  0.2s;
    font-size:  16px;
    color:  #008def;
}
.tech_block  {
    min-height:  162px;
    margin-bottom:  22px;
}
#mob_app .industries_icon,  #fullScreen-industries .industries_icon  {
    width:  90px !important;
    height:  90px !important;
    line-height:  92px !important;
}
.followListing li  {
    padding:  5px 0;
}
.followListing svg  {
    height:  22px;
    width:  auto;
    fill:  #adadad;
}
#mob_app img,  #fullScreen-industries img  {
    height:  100px;
    width:  auto;
}
.work_pro svg  {
    height:  90px;
    width:  auto;
}
.dash_line  {
    letter-spacing:  5px;
    font-weight:  900;
    color:  #008def;
    margin:  0 20px;
    border-top:  2px dashed #008def;
    min-width:  270px;
}
.number  {
    height:  50px;
    width:  50px;
    border-radius:  50%;
    background-color:  #008def;
    color:  white;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    font-size:  18px;
}
.work_pro h3  {
    font-weight:  900;
    letter-spacing:  1px;
    margin-top:  5px;
    font-size:  20px;
}
.design_tech img  {
    height:  80px;
    width:  auto;
}
.web_service svg  {
    height:  58px;
    width:  auto;
    fill:  #008def;
    stroke:  #008def;
}
.digital_marketing svg  {
    height:  80px;
    width:  auto;
    fill:  #008def;
}
ul.benefits li  {
    margin-right:  0 !important;
    margin-top:  20px;
}
ul.benefits li:not(:last-child)  {
    padding-right:  26px;
}
ul.benefits .block  {
    color:  white;
    background:  #008def;
    border-radius:  50px;
}
ul.benefits .number_style  {
    height:  50px;
    width:  50px;
    border-radius:  50%;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    font-size:  22px;
    color:  black;
    border:  3px solid white;
    box-shadow:  0 10px 20px rgba(0,  0,  0,  0.2);
    color:  white;
    position:  relative;
    background:  #008def;
}
ul.benefits .block span  {
    padding-left:  42px;
    padding-right:  22px;
    margin-right:  0 !important;
    border-top-right-radius:  50px;
    border-bottom-right-radius:  50px;
    margin-left:  -25px;
    display:  flex;
    align-items:  center;
}
.web_devleopment .number_box  {
    display:  flex;
    align-items:  center;
    justify-content:  center;
    height:  42px;
    width:  42px;
    margin:  0 auto;
    top:  -25px;
    color:  white;
    position:  relative;
}
.web_devleopment .number_box::before  {
    content:  '';
    position:  absolute;
    left:  0;
    top:  0;
    height:  100%;
    width:  100%;
    background-color:  #008def;
    border:  4px solid #fff;
    z-index:  -1;
    transform:  rotateZ(45deg);
}
.web_devleopment h2  {
    font-size:  16px;
    text-align:  center;
    font-weight:  600;
}
.web_devleopment .box  {
    box-shadow:  0 4px 21px rgb(0 0 0 / 10%);
    margin-bottom:  10px;
    margin:  20px 0;
    min-height:  96px;
    border-radius:  5px;
}
.tech_row h2  {
    font-size:  18px;
    color:  #008def;
    font-weight:  600;
    margin-left:  20px;
    margin-bottom:  5px;
}
.tech_row .grey-bg  {
    background-color:  rgba(0,  123,  255,  0.05);
    padding:  14px;
}
.tech_row ul li  {
    margin:  0 10px !important;
    margin-top:  14px !important;
    background-color:  white;
    border-radius:  50px;
    height:  86px;
    width:  86px;
    box-shadow:  0 4px 24px rgb(0 0 0 / 4%);
}
.tech_row img  {
    max-height:  50px;
    width:  auto;
    display:  block;
    margin:  0 auto;
    margin-top:  18px;
}
.points li  {
    position:  relative;
    margin-bottom:  10px;
    padding-left:  20px;
}
.points li::before  {
    content:  '';
    position:  absolute;
    top:  50%;
    left:  0;
    transform:  translateY(-50%) rotateZ(45deg);
    height:  10px;
    width:  10px;
    background-color:  #008def;
    border:  2px solid white;
}
.portfolio_tabs li.active_item a  {
    background-color:  #008def;
    color:  white !important;
    box-shadow:  0 10px 20px rgb(0 0 0 / 10%);
}
#portfolio_slider img  {
    box-shadow:  0 6px 20px rgba(0,  0,  0,  0.15);
    border-radius:  5px;
}
#portfolio_slider .button-secondary  {
    display:  inline-block;
}
#portfolio_slider .carousel-control-prev,  #portfolio_slider .carousel-control-next  {
    width:  10%;
}
#portfolio_slider .carousel-indicators  {
    align-items:  center;
    margin-bottom:  20px;
}
#portfolio_slider .carousel-indicators [data-bs-target]  {
    background-color:  #008def;
    height:  10px;
    width:  10px;
    border-radius:  50px !important;
    border:  none;
    opacity:  0.2;
}
#portfolio_slider .carousel-indicators button.active  {
    height:  14px;
    width:  14px;
    opacity:  1;
}
.client_btn_box  {
    position:  relative;
}
.client_btn_box::before  {
    content:  '';
    position:  absolute;
    left:  50%;
    top:  50%;
    transform:  translate(-50%,  -50%);
    height:  240px;
    width:  240px;
    z-index:  -1;
    animation:  border_radius_variation 10s linear infinite;
}
.client_btn  {
    position:  absolute;
    top:  50%;
    left:  50%;
    transform:  translate(-50%,  -50%);
    height:  80px;
    width:  80px;
    background-color:  rgba(255,  255,  255,  0.8);
    border-radius:  50%;
}
.client_btn i  {
    color:  rgba(0,  141,  239,  0.5);
    font-size:  38px;
    display:  flex;
    justify-content:  center;
    padding-top:  12px;
}
.client_btn_box img  {
    height:  250px;
    width:  auto;
    margin:  0 auto;
    display:  block;
}
.ficon_head  {
    font-size:  19px;
    font-weight:  500;
    margin-bottom:  4px;
}
.ficon_desc  {
    font-size:  16px !important;
    margin-top:  -3px;
}
.blog_box  {
    display:  block;
    margin:  16px 6px;
}
.blog_box .blog_boxInner  {
    padding:  10px;
}
.blog_heading  {
    font-size:  20px;
    font-weight:  600;
    line-height:  28px;
    margin:  6px 0 10px 0;
}
.tag_line  {
    color:  #008def;
    font-weight:  600;
    margin-bottom:  10px;
}
.author,  .date  {
    color:  #8a8a8a;
}
.author i,  .date i  {
    margin-right:  6px;
}
.singleBlog_page .blog_heading  {
    margin:  0 0 6px 0;
    font-size:  24px;
}
.singleBlog_page .tag_line  {
    margin-top:  10px;
    margin-bottom:  10px;
}
.related_posts a  {
    display:  block;
    margin-bottom:  15px;
}
.singleBlog_page .author,  .singleBlog_page .date  {
    margin-bottom:  10px;
}
.career_box  {
    border:  1px solid #ececec;
    padding:  20px;
    margin-bottom:  20px;
}
.hidden_more  {
    display:  none;
}
.job_des_heading  {
    color:  #00589c;
    font-size:  22px;
    margin-top:  10px;
    margin-bottom:  4px;
}
.hidden_more li  {
    position:  relative;
    margin-left:  25px;
}
.hidden_more li::before  {
    content:  '';
    position:  absolute;
    top:  50%;
    left:  -25px;
    transform:  translateY(-50%);
    height:  10px;
    width:  10px;
    border-top:  6px solid transparent;
    border-bottom:  6px solid transparent;
    border-left:  10px solid #008def;
}
.hidden_more li::after  {
    content:  '';
    position:  absolute;
    top:  50%;
    left:  -20px;
    transform:  translateY(-50%);
    height:  10px;
    width:  10px;
    border-top:  6px solid transparent;
    border-bottom:  6px solid transparent;
    border-left:  10px solid #008def;
    opacity:  0.3;
}
#apply_now_modal .inner_content  {
    padding:  20px;
}
#apply_now_modal select  {
    border-bottom:  1px solid #d2d2d2;
    padding:  7px 0;
    color:  #777777 !important;
}
#apply_now_modal select:focus  {
    border-bottom:  2px solid #008def;
}
.common_banner  {
    position:  relative;
    background:  linear-gradient(to right,  #f7f8fc,  #d0d6f0);
    padding:  40px 0;
}
.common_banner img  {
    width:  100%;
    z-index:  500;
    position:  relative;
}
.common_banner .big_heading  {
    font-size:  30px;
    font-weight:  600;
    color:  #008def;
}
.common_banner .small_heading  {
    font-size:  16px;
    font-weight:  600;
}
.breadcrumb  {
    background-color:  rgb(255,  255,  255,  0.1);
    width:  360px;
    height:  50px;
    padding:  0 20px;
    margin-bottom:  -40px;
    box-shadow:  0 6px 40px -10px rgb(0 0 0 / 20%);
    position:  relative;
    z-index:  200;
    background-color:  white;
    bottom:  -25px;
}
.breadcrumb .breadcrumb-item  {
    position:  relative;
    font-size:  16px;
}
.breadcrumb .breadcrumb-item a  {
    color:  #000 !important;
    padding-right:  26px;
    position:  relative;
    font-size:  inherit;
}
.breadcrumb .breadcrumb-item.active  {
    color:  #008def !important;
}
.breadcrumb-item + .breadcrumb-item::before  {
    display:  none;
}
.breadcrumb .breadcrumb-item a::before,  .breadcrumb .breadcrumb-item a::after  {
    content:  '';
    position:  absolute;
    right:  0;
    height:  1px;
    width:  10px;
    background-color:  #000;
}
.breadcrumb .breadcrumb-item a::before  {
    bottom:  6px;
    transform:  rotateZ(-45deg);
}
.breadcrumb .breadcrumb-item a::after  {
    top:  6px;
    transform:  rotateZ(45deg);
}
.lg-outer.lg-visible  {
    background:  black;
}
.life_img  {
    position:  relative;
}
.life_img_overlay  {
    position:  absolute;
    top:  0;
    left:  0;
    width:  100%;
    height:  100%;
    background-color:  #000;
    visibility:  hidden;
    opacity:  0;
    transition:  0.5s;
}
.life_img:hover .life_img_overlay  {
    visibility:  visible;
    opacity:  0.6;
}
.life_img .outer  {
    text-align:  center;
}
.life_img .txt-icon  {
    position:  absolute;
    top:  50%;
    left:  50%;
    transform:  translate(-50%,  -50%);
    z-index:  200;
    color:  white;
    text-align:  center;
}
.life_img h4  {
    font-weight:  700;
    padding-bottom:  13px;
    margin-bottom:  9px;
    font-size:  22px;
    opacity:  0;
    visibility:  hidden;
    transform:  translateY(-20px);
    text-transform:  uppercase;
    transition:  0.5s;
    position:  relative;
}
.life_img h4::after  {
    background-color:  #2ca9ff;
}
.life_img:hover h4  {
    visibility:  visible;
    opacity:  1;
    -webkit-transform:  translateY(0);
    -ms-transform:  translateY(0);
    transform:  translateY(0);
}
.life_img h4::after  {
    background-color:  #008def;
}
.life_img h4::after  {
    content:  '';
    position:  absolute;
    height:  3px;
    width:  100px;
    bottom:  0;
    background-color:  #0ff;
    left:  50%;
    transform:  translateX(-50px);
}
.life_img:hover a.icon-wrapper  {
    opacity:  1;
    visibility:  visible;
    -webkit-transform:  translateY(0);
    -ms-transform:  translateY(0);
    transform:  translateY(0);
}
.life_img a.icon-wrapper  {
    display:  inline-block;
    color:  #fff;
    font-size:  30px;
    opacity:  0;
    visibility:  hidden;
    transform:  translateY(20px);
    transition:  0.5s;
}
.thank, .error  {
    padding:  40px 200px;
    padding-top:  20px !important;
    margin-top:  20px;
    overflow:  hidden;
    border-radius:  10px;
}
.thank h1, .error h1  {
    font-weight:  800;
    margin:  20px 0;
    font-size:  50px;
}
.loader  {
    position:  fixed;
    left:  0px;
    top:  0px;
    width:  100%;
    height:  100%;
    z-index:  9999;
    background:  url('../images/Proftcode-GIF.gif') 50% 50% no-repeat rgb(249, 249, 249);
}
.inventory-block  {
    text-align:  center;
    color:  #444444;
    margin-top:  30px;
    padding:  0 20px;
}
.inventory-block h6  {
    font-size:  18px;
    font-weight:  600;
    color:  #008def;
    margin:  10px 0 4px 0 !important;
}
.inventory-block svg  {
    max-height:  60px;
    margin:  0 auto;
}
.content-writing-block  {
    border:  1px solid #008def;
    padding:  10px;
    background-color:  #f8f9fa;
    box-shadow:  0 10px 20px -10px rgba(0,  0,  0,  0.1);
    margin-top:  40px;
    min-height:  280px;
}
.content-writing-block hr  {
    background-color:  #008def;
    opacity:  1;
    width:  200px;
    margin:  20px auto;
}
.content-writing-block svg  {
    max-height:  80px;
}
.hrm-solution-list  {
    margin-top:  40px !important;
    display:  grid;
    grid-template-columns:  1fr 1fr 1fr 1fr;
    justify-content:  center;
}
.hrm-solution-list li  {
    margin:  10px;
    text-align:  center;
}
.hrm-solution-list li .hrm--img  {
    background-color:  #ffffff;
    border-radius:  50%;
    height:  82px;
    width:  82px;
    border:  2px solid #008def;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    margin:  0 auto;
    box-shadow:  0 10px 20px -4px rgba(0,  0,  0,  0.15);
    position:  relative;
}
.hrm-solution-list li svg  {
    max-height:  50px;
}
.hrm-solution-list li p  {
    background-color:  #f8f9fa;
    min-height:  232px;
    padding:  62px 10px 26px 10px;
    margin-top:  -41px;
}
.modal-header .btn-close {
    background: none !important;
    opacity: 1 !imporant;
}