.header-area.header-sticky{background: #27378f;}
.header-area{top: 0px;}
.main-nav .btn i { color: #fff;}
div#offcanvasTop { background: rgba(255,255,255,0.9);}
.offcanvas-top{left: auto; width: 400px;}
.offcanvas-backdrop{left: auto; right: 0; width: 100%;}
.offcanvas-header{right: 20px; top: 20px;}
.header-area .main-nav .nav li{width: 100%; margin: 0;}
.sub-menu1.social-lks { display: flex; justify-content: center; align-items: center;  margin: 0!important;}
.sub-menu1.social-lks li { text-align: center;}
.header-area .main-nav .nav li:last-child { padding-right: 15px;}

.sub-menu1 .menu-link i{font-weight: 900; font-size: 14px; margin-left: 0;}
a.ftr-logo { display: inline-block; width: 170px; margin-bottom: 30px;}
.ftr-logo img {width: 100%;}
footer{background: url(../images/ftb-bg1.jpg); padding:40px 0 20px 0; margin-top: 50px;}
.ft-btm { text-align: center; margin: 20px 0 0 0; border-top: 1px solid #6a6464; padding: 20px 0 0 0;}
.ft-btm p { color: #fff;}
.address li p, .address li span{color:#fff; font-size: 14px;}
.address li p i {font-size: 16px; margin-right: 10px;}
.flw-hding{display: block!important; margin-bottom: 15px;}
.flw-hding h4{ font-size: 16px; border-bottom: 2px solid #fff; display: inline-block;}
footer p{font-size: 14px;}
.portfolio-item{box-shadow: none;}

.dropdown-menu.show{position: static!important; transform: none!important;}
.header-area .main-nav .nav li a#dropdownMenuLink { background: none; text-align: left; font-size: 14px; margin: 0!important;
    padding: 0 0 0 15px; transition: all ease-in 0.4s;}
.header-area .main-nav .nav li a#dropdownMenuLink i {color: #000;}
.header-area .main-nav .nav li a#dropdownMenuLink:focus {outline: none; box-shadow: none;}
.nav .dropdown .dropdown-menu a.dropdown-item{height: auto; line-height: normal; white-space: normal; position: relative;}
.nav .dropdown .dropdown-menu a.dropdown-item:active{background: none;}
.nav .dropdown .dropdown-menu a.dropdown-item:active{background: none;}
.nav .dropdown .dropdown-menu{background-color: transparent; border: none; padding: 0; height: 190px;  overflow: hidden;
    overflow-y: auto;}
.header-area .main-nav .nav .nav-level1 .sub-menu1 li:hover a {color: #000!important;}
.header-area .main-nav .nav .nav-level1 .sub-menu1 li a:hover{color: #6190bb!important;}
.header-area .main-nav .nav li a#dropdownMenuLink.show i {transform: rotate(-90deg); transition: all ease-in 0.3s;}


.nav .dropdown .dropdown-menu a.dropdown-item:before { content: ''; background: #000; height: 2px; width: 6px; display: inline-block;
    position: absolute; top: 11px; left: 0;}

.nav-level1 .sub-menu1{margin-right: 0;}
.header-area .main-nav .nav li:last-child { padding-right: 0;}
.sub-menu1.social-lks li i {font-size: 18px;}
.background-header .nav {margin-top: 30px !important; margin-bottom: 30px;} 

.staticBnr {
    margin-top: 100px;
    position: relative; overflow: hidden;
}
.statOverlay {
    position: absolute;
    top: 30%;
    left: 120px;
    width: 60%;
}
.statOverlay h1 {
    color: #fff;
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 20px;
}
.statOverlay p {
    color: #fff;
}

section.IT-form {
    background: #f6f7f9;
    padding: 60px 0 60px 0;
}
#client-form h4.jobs-info {
    margin-bottom: 25px;
    font-size: 30px;
    color: #283891;
}
#client-form.form-horizontal .form-group{margin-bottom: 20px;}
#client-form.form-horizontal .form-group input, #client-form.form-horizontal .form-group select {height: 45px;}
input.btn.btn-warning { background: none;border: 2px solid #283891; color: #283891; padding: 0px 40px;
    border-radius: 32px;}

.cia-desc h6 { font-weight: bold;}
.cia-desc ol li {list-style-type: disclosure-closed;  margin-bottom: 15px;}
.our-portfolio{display: none;}

.xs-hide{display: block;}
.xs-show{display: none;}


.navbar{padding-top: 16px; padding-bottom: 16px;}
.navbar-expand-lg .navbar-collapse{justify-content: flex-end;}
.navbar-light .navbar-nav .nav-link { color: #fff; position: relative;}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link { color: #fff; font-weight: 500;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #ccc;}
.navbar-nav .dropdown-menu.show {position: absolute!important; transform: none!important; display: flex; margin: 0 auto;
    max-width: 1600px;}
.navbar-nav .nav-item { margin-right: 10px; position: static;}
.navbar-nav .dropdown-menu.show { position: absolute!important; transform: none!important; width: 100%; left: 0;
    right: 0; padding: 0px;}

.menu-desc {background: #e9e7e7 url(../images/grey-lines2.png);background-size: contain; padding: 80px 20px; width: 340px;     align-items: center;
    justify-content: center;  display: flex;}
.menu-desc-links { padding: 80px 15px; width: 24%;}  
.menu-desc-links li { margin: 10px 0;}  
.dropdown-menu[data-bs-popper]{margin-top: 0; border-radius: 0; border-radius: 0; border: none; box-shadow: 0px 0px 5px #000;}



.nav-item a.nav-link::before {content: "";position: absolute; z-index: 2; left: 0; right: 0;}


.nav-item a.nav-link:before { content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 50%;
 background: #3042a5;  height: 99px;  -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.nav-item a.nav-link:hover { opacity: 1 !important;}
.nav-item a.nav-link:hover:before { right: 0;}
.nav-item a.nav-link:before { bottom: -28px;}
.nav-link.dropdown-toggle.show { font-weight: 600;}
.dropdown-toggle::after{transition: all ease-in 0.2s;}
.dropdown-toggle.show::after { content: ''; transform: rotate(180deg);}

/*.navbar-light .navbar-nav .nav-link.active:before{content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 50%;
 background: #a7bdff;  height: 3px;  -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}

*/

.nav-item a.nav-link.active:before{content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    right: 0;
    bottom: -29px;
    background: #3042a5;
    height: 99px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;}


.ppp{position:absolute; top: 100px;  right: 50px;}
.element {text-align: center; animation: rotate 4s infinite; background-color:#eee; width: 90px;
  height: 90px; border-radius:30%; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0;}
.element a {height: 50px; width: 50px; line-height: 50px;}
.element a img { max-width: 30px;}

.elem1 {text-align: center; background-color:#8a9bf5; width: 50px; height: 50px; border-radius:30%; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0;}

.elem1 a {
    height: 80px;
    width: 80px;
    line-height: 80px; position: relative;
}
.elem1 a img {
    z-index: 9; width: 75px;
}

.elem1 a span {
    position: absolute;
    right: -90px;
    width: 80px;
    text-align: left;
    line-height: normal;
    top: 24px; color:#fff; font-size: 12px; z-index: 1; display:none;
}
.elem1 a span.lh3{ top: 5px;}
.elem1 a span.lh2{ top: 11px;}


.first{top: 0px; left:80px}
.sec{top: 10px; left:195px}
.third{top: 65px; left:245px}
.fourth{top: 130px; left:260px}


.fifth{top: 190px; left:225px}
.sixth{top:235px; left:165px}
.seventh{top: 230px; left:100px}
.eighth{top: 190px; left:-60px}


.nineth{top: 130px; left:-90px}
.tenth{top: 65px; left:-90px}
.elevent{top: 15px; left:65px}


@keyframes rotate {
  0% {
    transform: rotate(-360deg)
  }
  100% {
    transform: rotate(0deg)
  }
}


@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

/*@keyframes inner-circle1 {
    from { transform:rotate(0deg); }
    to { transform:rotate(-90deg); }
}*/

@keyframes inner-circle2 {
  /*0%   {transform:rotate(0deg); background: orange;}
  5%  {transform:rotate(20deg); background: blue;}
  10%  {transform:rotate(-50deg); background: red;}
  20%  {transform:rotate(-100deg); background: white;}
  30%  {transform:rotate(-120deg); background: yellow;}
  40%  {transform:rotate(-180deg); background: purple;}
  40%  {transform:rotate(60deg); background: green;}
  60%  {transform:rotate(180deg); background: brown;}
  100%  {transform:rotate(0deg); background: black;}
  100% {transform:rotate(-360deg); background: green;}*/

/*  0%   {transform:rotate(0deg); background: red;}
  30%  {transform:rotate(-60deg); background: yellow;}
  60%  {transform:rotate(-90deg); background: blue;}
  100%  {transform:rotate(-120deg); background: green;}*/
}

.ppp1 {
    width:750px;
    height:750px;
    margin:20px auto;
    font-size:10px;
    line-height:1;
    animation: circle 60s linear infinite;
    transform-origin: 50% 50%; position: absolute; top:60px; right:-450px; overflow: hidden;
}

.ppp1 > .elem1 {
    animation: inner-circle 60s linear infinite;
    /*background-color:#8a9bf5;*/
	background:linear-gradient(#2039c1, #2143ff);
 width:75px;
 height:75px;
}

.ppp1:hover {
    -webkit-animation-play-state: paused; animation-play-state: paused;
}
.ppp1 .elem1:hover {
    background:linear-gradient(#3a7fd5, #3ad5cd);
}




.ppp2 {
    width:440px;
    height:440px;
    margin:20px auto;
    font-size:10px;
    line-height:1;
    animation: circle 25s linear infinite;
    transform-origin: 50% 50%; position: absolute; top:0px; right:-280px; overflow: hidden;
}

.ppp2 > .elem1 {
    animation: inner-circle 25s linear infinite;
    /*background-color:#8a9bf5;*/
    background:linear-gradient(#27378f, #070c44);
 width:75px;
 height:75px;
}

.ppp2:hover {
    -webkit-animation-play-state: paused; animation-play-state: paused;
}
.ppp2 .elem1:hover {
    background: #27378f;
}



/*new animation*/
.animCrds { position: absolute; right:-35px; top: 240px; width: 260px;}

.animCrds .wrapper .outer{display: flex;align-items: center;justify-content: center;}
.animCrds .wrapper .card{background: #fff;width: 310px; display: flex;align-items: flex-start;padding: 20px;  opacity: 0;
  pointer-events: none;  position: absolute;  justify-content: space-between;  border-radius: 100px 20px 20px 100px;
  box-shadow: 0px 0px 5px #242020;  animation: animate 15s linear infinite;  animation-delay: calc(3s * var(--delay));
}
.animCrds .outer:hover .card{  animation-play-state: paused;}
.animCrds .wrapper .card:last-child{  animation-delay: calc(-3s * var(--delay));}

@keyframes animate {
  0%{
    opacity: 0;
    transform: translateY(100%) scale(0.8);
  }
  5%, 20%{
    opacity: 1;
    transform: translateY(100%) scale(0.8);
  }
  25%, 40%{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0%) scale(1);
  }
  45%, 60%{
    opacity: 1;
    transform: translateY(-100%) scale(0.8);
  }
  65%, 100%{
    opacity: 0;
    transform: translateY(-100%) scale(0.8);
  }
}

.animCrds .card .content{ display: flex;  align-items: center;}
.animCrds .wrapper .card .img{ height: 66px;width: 66px; position: absolute;left: 1px; top: 1px; background: #27378f;
  border-radius: 50%; padding: 5px;box-shadow: 0px 0px 5px rgba(0,0,0,0.2);}
.animCrds .card .img img{  height: 100%; width: 100%; border-radius: 50%; object-fit: cover;}
.animCrds .card .details{ margin-left: 80px;}
.animCrds .details span{font-weight: 600; font-size: 18px;}
.animCrds .card a{ text-decoration: none; padding: 7px 18px; border-radius: 25px; color: #fff; background: linear-gradient(to bottom, #23064e 0%, #6b9ac9 100%);
  transition: all 0.3s ease; font-size: 16px;}
.animCrds .card a:hover{ transform: scale(0.94);}











:root{
  --tooltip-color: #000;
}

.color-tooltip > .tooltip-inner {background-color: var(--tooltip-color);}

.color-tooltip.bs-tooltip-bottom > .tooltip-arrow::before, .color-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] > .tooltip-arrow::before {border-bottom-color: var(--tooltip-color);}

.color-tooltip.bs-tooltip-top > .tooltip-arrow::before, .color-tooltip.bs-tooltip-auto[data-popper-placement^=top] > .tooltip-arrow::before {border-top-color: var(--tooltip-color);}

.color-tooltip.bs-tooltip-start > .tooltip-arrow::before, .color-tooltip.bs-tooltip-auto[data-popper-placement^=left] > .tooltip-arrow::before {border-left-color: var(--tooltip-color);}

.color-tooltip.bs-tooltip-end > .tooltip-arrow::before, .color-tooltip.bs-tooltip-auto[data-popper-placement^=right] > .tooltip-arrow::before {border-right-color: var(--tooltip-color);}

#contact_us .form-group.has-feedback.has-success { position: relative;}
#contact_us .form-group.has-feedback.has-success i { position: absolute; right: 10px; top: 13px!important; color: green;}
#contact_us .form-group.has-feedback.has-error i {position: absolute; right: 5px; top: 12px!important; color: #f03;} 
#contact_us .form-group.has-feedback.has-error small {color: #f03;} 
#contact_us .form-group.has-feedback {margin-bottom: 10px;}  
#contact_us .form-group.has-feedback.has-error .form-control { margin-bottom: 0px;}

#contact_us .alert{padding: 4rem 1rem 4rem 1rem; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: #fff; z-index: 99; box-shadow: 0px 0px 5px #000; text-align: center;}
#contact_us .alert .close {position: absolute; left: 50%; bottom: 50px; z-index: 99999; transform: translate(-50%, 30px);
    background: #64635f; border: none; padding: 5px 10px; color: #fff; display: none;}

.messagestyle{margin: -33% 0 0 0%;}

.contct-numbrs a {
    color: #27378f;
}

.menu-desc-links .dropdown-item.active, .menu-desc-links .dropdown-item:active{background-color: #27378f;}


.navbar-nav .menu-desc-links li .dropdown-item{white-space: normal;}



@media screen and (min-width:2501px){
    .statOverlay{left: 26%; width: 900px }
	.ppp1{top: 26%;}
}

@media screen and (min-width:3501px){
    .statOverlay{left: 34%; width: 900px }
}

@media screen and (min-width:5001px){
    .statOverlay{left: 38%; width: 900px }
}

@media screen and (min-width:1901px) and (max-width:2100px){
    .statOverlay{left: 18%; width: 900px }
	.ppp1{top: 18%;}
}

@media screen and (min-width:1601px) and (max-width:1900px){
    .statOverlay{left: 12%; width: 900px }
	 .ppp1{top: 12%;}
}

@media screen and (min-width:1501px) and (max-width:1600px){
    .ppp1{top: 7%;}
}






/*mobile styles starts*/
@media screen and (max-width:767px){
    .header-area.header-sticky{position: fixed; top: 0; left: 0; right: 0;}
   .header-area.header-sticky .nav{margin-top: 10px !important; margin-bottom: 25px;}
   .nav .dropdown .dropdown-menu a.dropdown-item:before{top: 9px;}  
   .nav .dropdown .dropdown-menu a.dropdown-item{padding-left: 15px!important;}  
   .header-area .main-nav .nav{width: 100%;} 
   .header-area .main-nav .nav li .dropdown-menu li{margin: 15px 0!important;}
   .header-area .main-nav .nav li a{height: auto !important; line-height: normal !important;}
   .nav-level1 .sub-menu1{display: block;}
   .bdr:after{content: none;}
   .nav-level1 .sub-menu1 li.menu-item.sub-menu-item { margin-bottom: 15px;}
   .nav-level1 .sub-menu1 li .dropdown { margin-bottom: 15px;}
   .sub-menu1.social-lks li {width: 40px!important; display: inline-block;}
   .header-area.header-sticky .logoWh {display: inline-block; width: 150px;}
   .header-area.header-sticky .logoColor { display: none;}
   .header-area.header-sticky.background-header .logoColor { display: inline-block;}
   .header-area.header-sticky.background-header .logoWh { display: none;}
   .header-area.header-sticky button.btn i { color: #fff!important;}
   .header-area.header-sticky.background-header button.btn i { color: #283891!important;}
   .nav .dropdown .dropdown-menu{height: 200px;}
   .offcanvas-body{padding: 2.5rem 1rem 1rem 1rem;}
   .main-banner {padding: 100px 0px 20px 0px!important;}
   .staticBnr { margin-top: 69px;}
   .statOverlay{position: static; width: 100%; padding: 15px }
   .statOverlay h1{color: #000;  font-size: 25px;}
   .statOverlay p { color: #000;}
   .xs-hide{display: none;}
   .xs-show{display: block;}
   .statImg { position: relative;}
   .statImg h1 { position: absolute;color: #fff; font-size: 25px; left: 20px; bottom: 30px; width: 70%;}
   .main-banner.hlthCare.homeIT{padding: 20px 0px 20px 0px!important}

   .navbar { padding-top: 0; padding-bottom: 0;}
   .navbar-brand {padding-top: 0; padding-bottom: 0;}
   .navbar-light .navbar-toggler-icon { background-image: none;}
   .navbar-light .navbar-toggler-icon i { color: #fff; font-size: 30px;}
   .navbar-light .navbar-toggler{border: none;}
   .navbar-light .navbar-toggler:focus{outline: none; box-shadow: none;}
   .navbar-expand-lg .navbar-collapse{background: #f6f7f9; box-shadow: 0px 2px 6px #000; width: 100%; position: fixed; top: 70px; right: 0; left: 0; padding: 10px 0 0 0; height: 90vh; overflow: hidden; overflow-y: auto;}
   .navbar-nav .nav-item{margin-right: 0; margin-bottom: 10px;}
   .navbar-light .navbar-nav .nav-link {color: #000; text-align: left; padding-left: 20px;}
   .menu-desc{display: none;}
   .navbar-nav .dropdown-menu.show{position: static!important; flex-direction: column; box-shadow: none;}
   .menu-desc-links { padding: 0 0 0 15px;width: 100%;}
   .menu-desc-links .dropdown-item{white-space: normal;}
   .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{color: #27378f;}

   .nav-item a.nav-link::before {content: none;}
    .nav-item a.nav-link:before {content: none;}
    .ppp1{position: static; display: none!important;}
    .ppp1 > .elem1{background-color: #dbdbdb;}
    .elem1 a span{color: #000;}
    .nav-item a.nav-link.active:before{background: none;}
    .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{color: #3042a5;}
    footer .col-lg-4.ps-5 { padding: 12px!important;  margin-bottom: 20px;}

}
/*mobile styles ends*/