body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  font-size: 16px;
  color: #131628;
  background-color: #eff4fd;
      overflow-x: hidden;
}
h1 {
  font-size: 45px;
  color: #01010E;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 15px;
}
h2 {
  font-size: 32px;
  color: #01010E;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 15px;
  letter-spacing: 1px;
}
h3 {
  font-size: 20px;
  color: #01010E;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}
h4 {
  font-size: 18px;
  color: #01010E;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 15px;
}
h5 {
  font-size: 2.5em;
  color: #01010E;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 15px;
}
h6 {
  font-size: 13px;
  color: #01010E;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 15px;
  text-transform: uppercase;
}
p {
  line-height: 1.6;
}
a{
text-decoration: none !important;
}

.navbar {
padding: 1rem 0;
position: relative;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.navbar-brand {
font-weight: bold;
color: #000;
}

.navbar-nav .nav-link {
color: #000;
font-weight: 600;
margin: 0 1rem;
position: relative;
}

.nav-item.has-mega-menu {
position: static;
}

.mega-menu {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
background-color: #eff4fd;
padding: 2rem 5%;
display: none;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.mega-menu .row > div {
margin-bottom: 1.5rem;
}

.mega-menu h5 {
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.25rem;
color: #111;
position: relative;
}

.mega-menu ul {
list-style: none;
padding-left: 0;
}

.mega-menu ul li {
margin-bottom: 0.75rem;
}

.mega-menu ul li a {
color: #111;
font-weight: 600;
text-decoration: none;
}

.mega-menu p {
font-size: 0.875rem;
color: #555;
margin-bottom: 0.5rem;
}

.platform-links a {
display: block;
color: #0137a2;
text-decoration: none;
font-weight: 600;
margin-bottom: 0.5rem;
}


.navbar-brand img.setlogo {
height: 60px;
width: auto;
}
button.cta.button {
background-color: #0137a2;
border-radius: 99px;
border: 1px solid #0137a2;
color: white;
padding-top: 16px;
padding-right: 32px;
padding-bottom: 16px;
padding-left: 32px;
}
button.cta.button:hover {
background-color: white;
border-radius: 99px;
border-width: 1px;
border-style: solid;
color:  #0137a2;
padding-top: 16px;
padding-right: 32px;
padding-bottom: 16px;
padding-left: 32px;
}

.container-fluid.back {
  background: linear-gradient(180deg, #ffe6df 0%, #eeeaff 50.52%, #c8eeff 100%);
  padding: 50px;
  margin-bottom: 50px;
}
.row.start {
  display: flex;
  flex-direction: column;
  text-align: center;
}
span {
  color: #0137a2;
}
.container-fluid.back p {
  color: #212728;
}
button.cta.button.decor {
  margin-top: 15px;
  box-shadow: 0px 32px 40px 0px rgba(1, 55, 162, 0.24);
}
button.cta.button.decor:hover{
  box-shadow: none;
}
button.cta.button.decoration{
  background-color: white;
  color:#0137a2 ;
}
button.cta.button.decoration:hover{
  background-color: #0137a2;
  color:white ;
  box-shadow: 0px 32px 40px 0px rgba(1, 55, 162, 0.24);
}

.animation-wrapper {
  position: relative;
  overflow: hidden;
  height: 700px; 
   z-index: 0;
}

.animation-container {
  width: 100%;
  height: 100%;
  position: absolute;
}
  .black-circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #262626f2;
  border-radius: 50%;
  transform: translateY(-50%) scale(12);
  top: 50%;
  z-index: 1;
}

.black-circle.left { left: 45%; }
.black-circle.right { right: 45%; }

.circle-text, .intersection {
  position: absolute;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  transition: all 1s ease;
}

#circle-text1 { top: 50%; left: 40%; }
#circle-text2 { top: 50%; right: 40%; }

.intersection {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.dotted-line {
  position: absolute;
  top: 50%;
  left: 9%;
  width: 82%;
  height: 1px;
  transform: translateY(-50%);
  opacity: 0.7;
  z-index: 0;
}

.dotted-line::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #919191, #919191 2px, transparent 2px, transparent);
  background-size: 5px 1px;
}

.animation-container::before,
.animation-container::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px dashed #919191;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.animation-container::before {
  width: 362px;
  height: 362px;
  transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.animation-container::after {
  width: 626px;
  height: 626px;
  transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.animation-container.animated::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(720deg) scale(1);
}

.animation-container.animated::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-720deg) scale(1);
}
.dotted-line {
opacity: 0;
transition: opacity 0.8s ease;
}

.animation-container::before,
.animation-container::after {
opacity: 0;
transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.animation-container.animated .dotted-line {
opacity: 0.7;
}

.animation-container.animated::before,
.animation-container.animated::after {
opacity: 1;
}

.container-change {
  position: relative;
  min-height: 628px;
  display: flex;
  align-items: center;
  overflow: visible;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  z-index: 2;
}

.services-grid {
  display: flex;
  flex-flow: row;
  align-items: center;
  max-width: 100%;
  position: absolute;
  top: 232px;
  width: 100%;
}
  .brand-col, .mastery-col, .product-col {
  display: grid;
  position: relative;
}

.brand-col {
  width: 25%;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 30px 0;
  left: 30px;
}

.mastery-col {
  width: 50%;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  gap: 30px 0;
}

.product-col {
  width: 25%;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 30px 0;
  left: -100px;
}

.brand-col .grid-item:nth-child(4n + 1) {
  grid-column: 4 / span 1;
  grid-row: 1;
}

.brand-col .grid-item:nth-child(4n + 2) {
  grid-column: 3 / span 1;
  grid-row: 2;
}

.brand-col .grid-item:nth-child(4n + 3) {
  grid-column: 2 / span 1;
  grid-row: 3;
}

.brand-col .grid-item:nth-child(4n + 4) {
  grid-column: 3 / span 1;
  grid-row: 4;
}

.mastery-col .grid-item:nth-child(7n + 1) {
  grid-column: 3 / span 1;
  left: 10px;
}

.mastery-col .grid-item:nth-child(7n + 2) {
  grid-column: 2 / span 1;
}

.mastery-col .grid-item:nth-child(7n + 3) {
  grid-column: 5 / span 1;
}

.mastery-col .grid-item:nth-child(7n + 4) {
  grid-column: 1 / span 1;
}

.mastery-col .grid-item:nth-child(7n + 5) {
  grid-column: 3 / span 1;
  left: 30px;
}

.mastery-col .grid-item:nth-child(7n + 6) {
  grid-column: 2 / span 1;
}

.mastery-col .grid-item:nth-child(7n + 7) {
  grid-column: 4 / span 1;
}

.product-col .grid-item:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1;
}

.product-col .grid-item:nth-child(2) {
  grid-column: 2 / span 1;
  grid-row: 2;
}

.product-col .grid-item:nth-child(3) {
  grid-column: 1 / span 1;
  grid-row: 3;
}

.product-col .grid-item:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 3;
  left: -30px;
}

.product-col .grid-item:nth-child(5) {
  grid-column: 3 / span 1;
  grid-row: 4;
}

.service {
  display: inline-block;
  margin: 0;
  position: relative;
}
  .service.not-provide {
  opacity: 0;
}

.service.not-provide.left {
  transform: translateX(100px);
}

.service.not-provide.right {
  transform: translateX(-100px);
}

.service.not-provide.animated {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(0);
  opacity: 1;
}

.service.not-provide .title {
  background: #fafafa;
  border: 1px solid #ccc;
  opacity: 1 !important;
  padding: 8px 12px;
  transform: translateY(0);
}

.service.not-provide .title strong {
  color: #ccc;
  font-size: 16px;
}
  .service.provide .title {
  width: 40px;
  transform: scale(0);
}

.service.provide.scaled .title {
  transform: scale(1);
  top: 0;
}

.service.animated .title {
  width: 100%;
  left: 10%;
}

.service.animated .title strong {
  transform: translateX(0);
}

.service .title {
  background: #262626;
  border: 1px solid #262626;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  height: 40px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
  left: 100px;
}

.service .title a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 32px;
  border-radius: 20px;
  box-shadow: none;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin: 0;
  border: none;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.service .title .icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 10px;
  left: 11px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service .title strong {
  font-size: 20px;
  font-weight: 500;
  text-transform: lowercase;
  white-space: nowrap;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  display: inline-block;
}

.service .title .arrow {
  position: absolute;
  right: -8px;
  top: 13px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(5px);
}

.service.scaled.animated:hover {
  z-index: 10;
}

.service.scaled.animated:hover .title {
  opacity: 0.8;
}

.service.scaled.animated:hover .title a {
  transform: translateX(-20px);
}

.service.scaled.animated:hover .title a .icon {
  transform: translateX(-20px);
}

.service.scaled.animated:hover .title a .arrow {
  transform: translateX(0);
}

.service .content {
  position: absolute;
  left: 50%;
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              visibility 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(-50%);
  padding-bottom: 20px;
}

.service.scaled.animated:hover .content {
  opacity: 1;
  visibility: visible;
}

.service .content .asset {
  position: relative;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service .content .asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service .content .asset1 {
  width: 220px;
  height: 165px;
  transform: translate(-40px, 20px) scale(0.6) rotateZ(-24deg);
  z-index: 1;
}

.service .content .asset2 {
  width: 180px;
  height: 135px;
  position: absolute;
  left: 110px;
  top: -10px;
  transform: translate(-20px, 20px) scale(0.5) rotateZ(-8deg);
  z-index: 0;
  opacity: 0;
}

.service.scaled.animated:hover .content .asset1 {
  transform: scale(1) rotateZ(-4deg) !important;
}

.service.scaled.animated:hover .content .asset2 {
  transform: rotateZ(8deg);
  opacity: 1 !important;
}

.service.scaled.animated:hover .content .asset2:hover {
  z-index: 2;
  transform: scale(1.2) rotateZ(8deg) !important;
}


.services-block .service .content {
position: absolute;
left: 50%;
bottom: 100%;
opacity: 0;
visibility: hidden;
z-index: -1;
}
.services-block .service .content .asset.asset1 {
width: 220px;
height: 165px;
transform: translate(-40px,20px) scale(0.6) rotateZ(-24deg);
z-index: 1;
transition: transform 0.3s ease;
}
.services-block .service .content .asset {
position: relative;
border-radius: 8px;
background: #fff;
}
.services-block .service .content .asset video {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
}
.services-block .service .content .asset {
position: relative;
border-radius: 8px;
background: #fff;
}
.services-block .service .content .asset.asset2 {
width: 180px;
height: 135px;
position: absolute;
left: 110px;
top: -10px;
transform: translate(-20px,20px) scale(0.5) rotateZ(-8deg);
z-index: 0;
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.services-block .service .content .asset {
position: relative;
border-radius: 8px;
background: #fff;
}
.service[style*="color: #FDFF99"] .title {
  background-color: #262626;
}

.service[style*="color: #7ACFFF"] .title {
  background-color: #262626;
}

.service[style*="color: #C9BBFF"] .title {
  background-color: #262626;
}

.service[style*="color: #FF8BA0"] .title {
  background-color: #262626;
}

.service[style*="color: #68FFC9"] .title {
  background-color: #262626;
}

.service[style*="color: #A8FF92"] .title {
  background-color: #262626;
}

.service[style*="color: #F19DFF"] .title {
  background-color: #262626;
}

#black-circle {
width: 200px;
height: 200px;
background-color: black;
border-radius: 50%;
margin: 0 auto;
opacity: 1;
transition: opacity 1s ease;
}

#dotted-circle,
.main-container {
opacity: 0;
transition: opacity 1s ease;
}


.background {
    background: linear-gradient(180deg, #ffe6df 0%, #eeeaff 50.52%, #c8eeff 100%);
}
.let-get {
    margin-left: 69%;
    background-color: #0137a2;
    border-radius: 99px;
    box-shadow: 0px 32px 40px 0px rgba(1, 55, 162, 0.24);
}
a.maw_advanced_btn.hvr-fade:hover {
    background-color: #0137a2;
    border-radius: 99px;
    box-shadow: 0px 32px 40px 0px rgba(1, 55, 162, 0.24);
}
.let-get {
    margin-left: 69%;
}
.line {
    position: relative;
    margin-left: 70px;
}
.line:after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 50px;
    background-color: black;
    position: absolute;
    left: -10px;
    right: 0px;
    border: 0px;
    transform: rotate(90deg);
    transform-origin: left top;
    top: 7px;
}
.wpb_single_image img {
    max-width: 90%;
}
.img-backlink {
    position: relative;
    width: 100%;
    bottom: 56px;
}
.plan {
  background-color: #c2f0c2; width: 15px; height: 15px; display: inline-block; border-radius: 3px; margin-right: 5px;
}
.innovation {
background-color: #9999ff; width: 15px; height: 15px; display: inline-block; border-radius: 3px; margin-right: 5px;
}
.effort{
background-color: #fff2b2; width: 15px; height: 15px; display: inline-block; border-radius: 3px; margin-right: 5px;
}
.guide{
background-color: #ffd966; width: 15px; height: 15px; display: inline-block; border-radius: 3px; margin-right: 5px;
}
.quality{
background-color: #f799c6; width: 15px; height: 15px; display: inline-block; border-radius: 3px; margin-right: 5px;
}
.vc_row.wpb_row.vc_inner.vc_row-fluid.colourset {
    white-space: nowrap;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 200px;
    /* font-size: 13px; */
    margin-left: -190px;
}
.legend-label {
    margin-left: 10px;
}

.swiper {
    width: 100%;
    height: auto;
    padding: 30px 0;
}
.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.swiper-button-next,
.swiper-button-prev {
    color: #000;
}
.swiper-pagination-bullet-active {
    background: #000;
}

.slick-slide img {
    width: 100% !important;
}
button.slick-prev.slick-arrow{
    display: none !important;
}
button.slick-next.slick-arrow {
    display: none !important;
}
.gradient-banner-wrapper{
    background: linear-gradient(180deg, #ffe6df 0%, #eeeaff 50.52%, #c8eeff 100%);
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1320px !important;
   left: 0px !important;
   border-radius: 32px;
   padding: 50px;
}
h2.vc_custom_heading.white-space {
    white-space: nowrap;
}
.top-bottom {
    margin-top: 70px;
}
.footer_bottom .row {
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #424b5c;
}.footer_bottom .row {
    justify-content: space-between;
    align-items: center;
}.footer_widget {
    font-size: 14px;
}.footer_bottom .footer_widget ul {
    display: flex;
    gap: 30px;
}.footer_widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer_widget p {
    margin-bottom: 0px !important;
}
section.footer_top {
    margin-bottom: 50px;
}
section.footer_top p {
    padding: 8px 0;
}
.vc_row.wpb_row.vc_row-fluid.About-back {
  background: linear-gradient(180deg, #ffe6df 0%, #eeeaff 50.52%, #c8eeff 100%);
}
.contact-ga {
    margin-bottom: 0px !important;
}
.contact-ga-one{
      margin-bottom: -15px !important;
}
.contact-line-one:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 45px;
    background-color: black;
    position: absolute;
    left: 77%;
    transform: rotate(0deg);
    transform-origin: left top;
    top: 0px;
}
.contact-line-two:after{
   content: '';
    display: inline-block;
    width: 3px;
    height: 45px;
    background-color: black;
    position: absolute;
    left: -20%;
    transform: rotate(0deg);
    transform-origin: left top;
    top: 0px; 
}
.contactform {
    padding: 40px 30px;
    align-items: center;
  background: linear-gradient(180deg, #ffe6df 0%, #eeeaff 50.52%, #c8eeff 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
    position: relative;
}
.contactform:after {
    content: " ";
    width: 30px;
    border-width: 0 32px 32px 0;
    border-color: #C4C4C4;
    border-style: solid;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media only screen and (max-width: 1400px) {
  a.maw_advanced_btn.hvr-fade{
    padding: 17px 20px !important; 
  }
}
@media only screen and (max-width: 1200px) {
  a.maw_advanced_btn.hvr-fade {
    font-size: 14px !important;
}
a.maw_advanced_btn.hvr-fade {
    padding: 10px 20px !important;
}
.brand-col {
    left: 0;
}
.mastery-col {
    grid-template-columns: repeat(4, minmax(80px, 1fr));
}
.product-col {
    grid-template-columns: repeat(5, minmax(70px, 1fr));
    gap: 32px 0;
}
}