.rel .carousel .carousel-inner {
    overflow: visible;
}
.animate-fade-in-bg {
    z-index: 1;
    position: absolute;
    top: 0;
    animation: 2200ms fadeIn1;
    animation-fill-mode: forwards;
    visibility: hidden;
}
@keyframes fadeIn1 {
    99% {
	visibility: hidden;
    }
    100% {
	visibility: visible;
    }
}
.designer-click {
    z-index: 9;
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: design-click;
    animation-delay: 3.5s;
    animation-duration: 1.65s;
    visibility: hidden;
}
@-webkit-keyframes design-click {
    30% {
	transform: scale(1);
	visibility: visible;
    }
    50% {
	transform: scale(0.7);
    }
    95% {
	transform: scale(1);
    }
    100% {
	visibility: hidden;
    }
}

.center-point {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 0px;
    width: 0px;
    transform-origin:center;
}



/* Hero Animation Start */

.rel .carousel .carousel-inner {
    overflow: visible;
}
.hero-bg-image {
    width: var(--hero-bg-width);
    height: var(--hero-bg-height);
    text-align: center;
}
.rounded-image img {
    border-radius: 10px;
}
.hero-fade-in-bg {
    z-index: 1;
    position: absolute;
    top: 0;
    animation: 2200ms fadeIn1;
    animation-fill-mode: forwards;
    visibility: hidden;
}
@keyframes fadeIn1 {
    99% {
	visibility: hidden;
    }
    100% {
	visibility: visible;
    }
}
.hero-designer-1 {
    z-index: 8;
    top: var(--hero-designer-1-top);
    left: var(--hero-designer-1-left); 
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: hero-design-run-1;
    animation-delay: 850ms;
    animation-duration: 1400ms;
    visibility: hidden;
}
@-webkit-keyframes hero-design-run-1 {
    0% {
	visibility: visible;
    }
    95% {
	top: var(--hero-designer-1-r-top);
	left: var(--hero-designer-1-r-left);
    }
    100% {
	top: var(--hero-designer-1-r-top);
	left: var(--hero-designer-1-r-left);
	visibility: hidden;
    }
}
.hero-designer-2 {
    z-index: 8;
    top: var(--hero-designer-1-r-top);
    left: var(--hero-designer-1-r-left); 
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: hero-design-run-2;
    animation-delay: 3800ms;
    animation-duration: 950ms;
    visibility: hidden;
}
@-webkit-keyframes hero-design-run-2 {
    0% {
	visibility: visible;
    }
    95% {
	top: var(--hero-designer-2-r-top);
	left: var(--hero-designer-2-r-left);
    }
    100% {
	top: var(--hero-designer-2-r-top);
	left: var(--hero-designer-2-r-left);
	visibility: hidden;
    }
}
.hero-designer-3 {
    z-index: 8;
    top: var(--hero-designer-2-r-top);
    left: var(--hero-designer-2-r-left); 
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: hero-design-run-3;
    animation-delay: 6100ms;
    animation-duration: 450ms;
    visibility: hidden;
}
@-webkit-keyframes hero-design-run-3 {
    0% {
	visibility: visible;
    }
    95% {
	top: var(--hero-designer-3-r-top);
	left: var(--hero-designer-3-r-left);
    }
    100% {
	top: var(--hero-designer-3-r-top);
	left: var(--hero-designer-3-r-left);
	visibility: hidden;
    }
}
.hero-designer-4 {
    z-index: 8;
    top: var(--hero-designer-3-r-top);
    left: var(--hero-designer-3-r-left); 
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: hero-design-run-4;
    animation-delay: 8100ms;
    animation-duration: 1050ms;
    visibility: hidden;
}
@-webkit-keyframes hero-design-run-4 {
    0% {
	visibility: visible;
    }
    95% {
	top: var(--hero-designer-4-r-top);
	left: var(--hero-designer-4-r-left);
    }
    100% {
	top: var(--hero-designer-4-r-top);
	left: var(--hero-designer-4-r-left);
	visibility: hidden;
    }
}
.hero-designer-5 {
    z-index: 8;
    top: var(--hero-designer-4-r-top);
    left: var(--hero-designer-4-r-left); 
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: hero-design-run-5;
    animation-delay: 100ms;
    animation-duration: 1000ms;
    visibility: hidden;
}
@-webkit-keyframes hero-design-run-5 {
    0% {
	visibility: visible;
    }
    95% {
	top: var(--hero-designer-5-r-top);
	left: var(--hero-designer-5-r-left);
    }
    100% {
	top: var(--hero-designer-5-r-top);
	left: var(--hero-designer-5-r-left);
	visibility: hidden;
    }
}
.hero-designer-6 {
    z-index: 8;
    top: var(--hero-designer-5-r-top);
    left: var(--hero-designer-5-r-left); 
    display: block;
    position: absolute;
    animation: forwards;
    animation-name: hero-design-run-6;
    animation-delay: 2800ms;
    animation-duration: 1100ms;
    visibility: hidden;
}
@-webkit-keyframes hero-design-run-6 {
    0% {
	visibility: visible;
    }
    95% {
	top: var(--hero-designer-6-r-top);
	left: var(--hero-designer-6-r-left);
    }
    100% {
	top: var(--hero-designer-6-r-top);
	left: var(--hero-designer-6-r-left);
	visibility: hidden;
    }
}

/* Hero Animation End */


/* Slider start */

.card, .countdown-item {
    box-shadow: none;
}
.card-text {
    width: 500px;
    word-break: break-all;
    white-space: normal;
}
.card-body {
    margin: 10px;
}

#slider-container{
    width:100%;
    top:5vw;
    left:0;
    bottom:5vw;
}
#slider-scroll{
    overflow-x:hidden;
    white-space:nowrap;
}
.slider-pic_wrap{
    height:98%;
    white-space:nowrap;
    display:inline-block;
}
.slider-pic{
    height: 65vw;
    width: 55vw !important;
    padding:0px;
    margin:0px;
    object-fit:cover;
    object-position: top left;
}

/* Slider end*/
/* microservices start*/

.micro-services-clip {
    container-type:size;
    width:100%;
    height:80vw;
    max-height:40vw;
    position:relative;
    overflow:hidden;
}
.ms-logo-dim {
    width: var(--ms-logo-width);
}

.container-k {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container-k .logo {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -1vw;
}
.container-k .background {
    width: 100%;
}


/* microservices end*/

/* Ring CSS start */
@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

.ring {
    border: 1px solid #363636;
    border-radius: 50%;
    position: absolute;
    width: min(calc(var(--ring-diameter) * 1cqh), calc(var(--ring-diameter) / 2 * 1cqw));
    height: min(calc(var(--ring-diameter) * 1cqh), calc(var(--ring-diameter) / 2 * 1cqw));
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none

}

.rotator{
    width:100%;
    height:100%;
    margin:0px;
    animation: circle 90s linear infinite;
    animation-delay: calc(var(--rotator-delay) * 1s) !important;
    transform-origin: 50% 50%;
    position: absolute;
    pointer-events: none
}

.orbit-item{
    animation: inner-circle 90s linear infinite;
    animation-delay: calc(var(--rotator-delay) * 1s) !important;
    background-size: cover;
    background-color: white;
    border: 1px solid #0088ff;
    width:5vw;
    height:5vw;
    position: absolute;
    border-radius: 50%;
    top:-2.5vw;
    left:calc(50% - 2.5vw);	 
}

.orbit-item-link{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: auto
}
/* Ring CSS end */

/* Luke CSS Start */


.viz-it-img-left {
   left:0%;
}
.viz-it-img-right {
   right:-5%;
}

@media (min-width: 768px) {
    .slider-pic{
	height: 40vw;
	width: 35vw !important;
    }
   .micro-services-clip {
       height:50vh;
   }
}

@media (min-width: 1200px) {
    div[class^="orbit-item"] {
	border-width:3px;
	width: 3vw;
	height:3vw;
        top:-1.5vw;
        left:calc(50% - 1.5vw);	 
    }
    
    div[class^="ring"] {
	border-width:3px;
    }
    
    .slider-pic{
	height: 35vw;
	width: 30vw !important;
    }
    .i-container {
	margin-left: 15vw;
	margin-right: 15vw;
    } 
    .navbar .inetsoft-nav-container {
	margin-left: 15vw;
	margin-right: 15vw;
    }
    .hero-text-bg {
	max-width: 55%;
	min-height: 70vh;
    }
    .hero-title {
	font-size: 4vw;
	font-weight:900;
	line-height: normal
    }
    .slider-pic{
 	height: 35vw;
	width: 30vw !important;
    }
}
@media (min-width: 1400px) {
    .slider-pic{
	height: 25vw;
	width: 20vw !important;
    }

}

@media (min-width: 3000px) {
    .viz-it-img-left {
	left:5%;
    }
    .viz-it-img-right {
	right:10%;
    }
}

.wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
}
.wrapper div {
    height: 60px;
    width: 60px;
    border: 3px solid rgba(100, 100, 100, 1);
    border-radius: 50px;
    position: absolute;
    top: 10%;
    left: 10%;
    animation: 10s linear infinite;
}
div .dot {
    color: #aaa;
    height: 10px;
    width: 10px;
    border-radius: 50px;
    background: deepskyblue;
    position: absolute;
    top: 20%;
    right: 20%;
    z-index: 10000;
}
.wrapper div:nth-child(1) {
    top: 30%;
    left: 85%;
    animation: animate 90s linear infinite;
}
.wrapper div:nth-child(2) {
    top: 75%;
    left: 10%;
    animation: animate 10s linear infinite;
}
.wrapper div:nth-child(3) {
    top: 20%;
    left: 65%;
    animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
    top: 90%;
    left: 5%;
    animation: animate 7s linear infinite;
}
.wrapper div:nth-child(5) {
    top: 90%;
    left: 40%;
    animation: animate 90s linear infinite;
}
.wrapper div:nth-child(6) {
    top: 30%;
    left: 60%;
    animation: animate 5s linear infinite;
}
.wrapper div:nth-child(7) {
    top: 70%;
    left: 555%;
    animation: animate 90s linear infinite;
}
.wrapper div:nth-child(8) {
    top: 75%;
    left: 75%;
    animation: animate 10s linear infinite;
}
.wrapper div:nth-child(9) {
    top: 50%;
    left: 55%;
    animation: animate 6s linear infinite;
}
.wrapper div:nth-child(10) {
    top: 45%;
    left: 30%;
    animation: animate 10s linear infinite;
}
.wrapper div:nth-child(11) {
    top: 10%;
    left: 95%;
    animation: animate 9s linear infinite;
}
.wrapper div:nth-child(12) {
    top: 20%;
    left: 65%;
    animation: animate 7s linear infinite;
}
.wrapper div:nth-child(13) {
    top: 55%;
    left: 30%;
    animation: animate 8s linear infinite;
}
.wrapper div:nth-child(14) {
    top: 60%;
    left: 70%;
    animation: animate 6s linear infinite;
}
.wrapper div:nth-child(15) {
    top: 90%;
    left: 75%;
    animation: animate 90s linear infinite;
}
@keyframes animate {
    0% {
	transform: scale(0) translateY(0) rotate(70deg);
    }
    100% {
	transform: scale(0.5) translateY(-100px) rotate(360deg);
    }
}


@media(min-width: 1400px) {
    .container-xxl,.container-xl,.container-lg,.container-md,.container-sm,.container {
	max-width:1600px
    }
}

/* Luke CSS End */
/* Carousel CSS Start */
:root {
    --no-of-slides: 13;
    --slide-width: 22vw;
}
@keyframes scrollingImages {
    0% {
	transform: translateX(0);
    }
    100% {
	transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
    }
}

.carousel_wrapper {
    display: flex;
    align-items: center;
    height: 12vh;
    width: calc(var(--slides-in-view) * var(--slide-width));
    overflow: hidden;
    margin: 0 auto;
    background-color: white;
    min-height: 100px;
    filter: grayscale(100%);
    opacity: 1;
}

.carousel_wrapper_no_color {
    display: flex;
    align-items: center;
    height: 1.2rem;
    width: calc(var(--slides-in-view) * var(--slide-width));
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.logo_carousel {
    overflow: hidden;
    width: calc(2 * var(--no-of-slides));
}

.carousel_slide {
    animation: scrollingImages 120s linear infinite;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: var(--slide-width);
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items:center;
    min-width: 210px;
    padding-right: 10px;
    padding-left: 10px;
}

.carousel_image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%
}

.carousel_image img {
    max-width: 100%;
    max-height: 100%;
}
/* Carousel CSS End */

/* cookie CSS Start */
@media (max-width: 450px){:root{
			      .hidden-xs, .side-nav, body.about-page .stripe-after:after, .blog-content:before {
				  display: none !important;
			      }
			  }}
@media (max-width: 480px) {
    .counter-item {
	width: 100%;
    }
}
.feature-icon>i {
    display: table-cell;
    padding-top: 30%;
}
.inside-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.face-homepage {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 350px;
    align-items: center;
}
#cookiesdirective {
    padding: 0 6%;
    position: fixed;
    bottom: -300px;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(51, 51, 51, .9);
    color: #fff;
    font-family: lato, sans-serif;
    font-size: 13px;
    text-align: left;
    z-index: 1050;
}
.cookiesdirective-wrapper {
    position: relative;
    height: auto;
    width: 100%;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
}
.siteTitle {
    padding-right: 10px;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 600;
}
.closeBtn,
.siteTitle {
    display: inline;
}
.closeBtn a {
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
}
/* cookie CSS end*/