@font-face {
  font-family: 'Bradley Hand ITC';
  src: url('../fonts/BradleyHandITC.woff2') format('woff2'),
    url('../fonts/BradleyHandITC.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 
.cardmain .card p a {
  color: white;
  cursor: pointer;
  font-size: 17px;
}

.section-4cols .content h1 {
  font-weight: 300;
}

/*.links {
  display: flex;
  justify-content: normal;
  width: 100%;
  gap: 20%;
  margin-top: 10px;
}

.content .abc {
  padding: 3rem 1.5rem;
}

.content .abc.is-active {
  background-color: rgb(0 0 0 / 66%);
  -webkit-transition: background-color var(--base-transition) ease-out;
  transition: background-color var(--base-transition) ease-out;
  position: relative;
  height: 100%;
  display: flex;
  padding: 3rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 2;
}

.slider1 .swiper-pagination-bullet {
  border: 1.5px solid white;
  width: 26px;
  height: 7px;
  display: inline-block;
  border-radius: 35%;
}

.links a {
  background: #4FBEED !important;
  color: white !important;
  border-radius: 63px;
  padding: 5px 10px;
}
*/
@media (max-width: 767px) {
  .cardmain .card p a {
    color: white;
    cursor: pointer;
    font-size: 15px;
  }
  
  p {
    font-size: 18px;
  }

}

/*
.ser {
  text-align: center;
  box-shadow: -2px 8px 12px 2px #0000002b;
  padding: 24px;
  position: relative;
  top: -20px;
  z-index: 999;
  background: white;
  border-radius: 9px;
}

.ser a {
  color: #009ADB;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
}

.ser a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #009ADB;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.ser a:hover:before {
  width: 100%;
}

.ser a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.upk-salf-slider-wrapper .upk-salf-item .upk-salf-image-wrap {
  height: 100%;
  width: 100%;
}

.bdt-timeline-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  margin-top: 0;
}

.upk-salf-slider-wrapper .upk-salf-item .upk-xanc-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.shapes {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  background: url(../images/banner-bg-shape-2.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 145px;
  z-index: 9;
}

.links {
  display: flex;
  justify-content: normal;
  width: 100%;
  gap: 16%;
  margin-top: 10px;
}

.slide-title .blk {
  background: #0000008f;
  padding: 10px 30px;
  margin-left: 15px;
  border-radius: 10px;
  width: auto;
}

.ser p {
  color: #5F5F61
}

@media (max-width: 767px) {
  .ser {
    top: 22px;
  }

}
*/
/* --------------- */

/* Page Zoom Effect 23-08-2023 */
/*.scrool-nav {
  position: relative;
}

.bottom-0 {
  bottom: 0px;
}

.inner {
  min-height: 25vh;
  margin-left: 10vw;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

#img {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0.8;
  z-index: -1;
}

.content {
  background: linear-gradient(0deg, #000000ad, transparent);
  left: 0;
  right: 0;
  position: absolute;
}

#img-fixed {
  position: relative;
  left: 0px;
  width: 100% !important;
  opacity: 0;
  z-index: -1;
  right: 0px;
  bottom: 0px;
}

#img-fixed::before {
  content: "";
  background: #000;
}


#circle {
  background: url(../../assets/images/FS-Icon-logo.png) #fff;
  background-repeat: no-repeat;
  background-position: top;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  mix-blend-mode: screen;
  background-size: 35%;
}


#knowmore {
  position: relative;
  left: 0px;
  right: 0px;
  top: 65%;
}

.aboutsection {
  background: #E0E8FF;
  padding: 80px 0px;
}

.aboutPic img {
  width: 100%;
}

.aboutsection p {
  margin-top: 20px;
  line-height: 34px;
}

.abouttext h3 {
  font-size: 50px;
  color: #152C72;
  line-height: 40px;
  position: relative;
  margin-top: 40px;
  padding-bottom: 15px;
}

.abouttext p {
  color: #3E4D68;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

.zoomabout {
  padding-bottom: 80px;
}

.zoomabout .leftheading span {
  color: #ffffff;
}

.zoomabout .leftheading h2 {
  color: #ffffff;
}

.zoomabout .leftheading strong {
  color: #ffffff;
  margin-bottom: 10px;
}

.zoomabout .leftheading strong b {
  color: #ffffff;
}

.zoomabout ul {
  padding: 0;
  margin: 30px 0px 0px;
}

.zoomabout .leftheading p {
  color: #ffffff;
}


.fs-text {
  text-align: center;
}

.fs-text h3 {
  font-size: 50px;
}

.fs-text a {
  text-decoration: none;
  background: #219AD6;
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  display: inline-block;
  font-size: 16px;
  box-shadow: 0px 3px 4px #0000004f;
  position: relative;
}

.fs-zoomcontent strong {
  font-size: 20px;
  color: #fff;
  font-weight: 100;
}

.fs-zoomcontent h3 {
  font-size: 40px;
  color: #fff;
}

.fs-zoomcontent a {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  padding: 10px 20px 10px 35px;
  display: inline-block;
  line-height: 26px;
}

.fs-zoomcontent a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #ffffff;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.fs-zoomcontent a:hover:before {
  width: 100%;
}

.fs-zoomcontent a iconify-icon {
  font-size: 25px;
  position: absolute;
  top: 12px;
  left: 32px;
}

.fs-zoomcontent p.text-bold {
  font-size: 18px;
  color: #fff;
}

.fs-zoomcontent p {
  font-size: 16px;
  color: #fff;
}

.counter {
  text-align: center;
  color: #fff;
}

.counter ul {
  padding: 0;
  margin: 0;
}

.counter ul li {
  list-style: none;
  font-size: 40px;
  width: 40%;
  margin: 0px auto;
  padding: 10px 0;
}

.counter ul li span {
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  margin-right: 2px;
}

.counter ul li p {
  color: #ebebeb;
  text-transform: uppercase;
  font-size: 16px;
  margin: 5px 0px 0px;
  border-top: 1px solid #4FBEED;
  padding-top: 10px;
}

.partnerlogo {
  padding: 0px;
  margin: 0px;
}

.partnerlogo li {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}

.mobileabout {
  background: url(../../assets/images/who-we-are.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 50px 20px;
  position: relative;
  z-index: 9;
}

.mobileabout:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000cf;
  content: '';
  z-index: -1;
}

.mobileabout .fs-zoomcontent h3 {
  font-size: 25px;
  color: #fff;
}

.mobileabout .partnerlogo li img {
  width: 108px;
}

.mobileabout .partnerlogo {
  padding: 0px;
  margin: 20px 0px 0px;
}

.mobileabout .counter ul {
  padding: 0;
  margin: 10px 0px 0px;
  display: flex;
  gap: 10px;
}

.mobileabout .counter ul li {
  font-size: 15px;
  width: auto;
  display: inline-block;
  vertical-align: top;
  background: #000000c2;
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #a7a6a6;
}

.mobileabout .counter ul li span {
  font-size: 15px;
}

.mobileabout .counter ul li p {
  font-size: 8px;
}
*/
/* -----------explore----------------------- */
/*
.explore p {
  color: #5F5F61
}


.slider2>.swiper-pagination-bullets .swiper-pagination-bullet::before,
.slider2>.swiper-pagination-bullets .swiper-pagination-bullet,
[class^=swiper-button-] {
  transition: all 0.3s ease;
}


.slider2 {
  width: 100%;
  height: auto;
  transition: opacity 0.6s ease;
}

.slider2.slider2-coverflow {
  padding: 1% 0;
}

.slider2.loading {
  opacity: 0;
  visibility: hidden;
}

.slider2:hover .swiper-button-prev,
.slider2:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.slider2 .swiper-slide {
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  height: 68vh;
  border-radius: 28px;
  background-color: white;
  box-shadow: 5px 6px 12px #00000038;
}

.slider2 .swiper-slide .entity-img {
  display: none;
  border-radius: 30px;
}

.slider2 .swiper-slide .content p {
  height: 100%;
  margin-bottom: 1rem;
  display: flex;
  opacity: 1;
  min-height: 94px;
}

.slider2 .swiper-slide-active .content .para {
  height: 100%;
  margin-bottom: 1rem;
  display: flex;
  opacity: 1;
  min-height: 94px;
}

.slider2 .swiper-slide-active .content p {
  height: auto;
  margin-bottom: 1rem;
  display: flex;
  opacity: 1;
}

.slider2 .swiper-slide .content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7px 13px;
  color: #000000;
  background: #ededed;
  margin: 0 auto;
  transform: translate(0%, 0%);
  border-radius: 0;
}

.slider2-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -4px !important;
}

.slider2 .swiper-slide .content .title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 30px;
  text-align: center;
  padding-top: 11px;
  position: relative;
  color: black;
}

.slider2 .swiper-slide-active {
  height: 34vw
}

.slider2 .swiper-slide .content .caption {
  display: block;
  font-size: 12px;
  line-height: 1.4;
}


.slider2 .swiper-button-prev {
  transform: translateX(50px);
  --swiper-navigation-color: #4fbeed;
}

.slider2 .swiper-button-next {
  transform: translateX(-50px);
  --swiper-navigation-color: #4fbeed;
}


.slider-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #03A9F4;
  opacity: 0.4;
}

.slider-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}

.slider-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,
.slider2-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.slider2-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}

.slider2 a {
  color: #009ADB;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
}

.slider2 a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #009ADB;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.slider2 a:hover:before {
  width: 100%;
}

.slider2 a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.slider2 p {
  color: #5F5F61
}

.slider2 [class^=swiper-button-] {
  width: 44px;
  opacity: 1;
  visibility: visible;
}

.slider2 .swiper-button-next.swiper-button-disabled,
.slider2 .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  cursor: auto;
  pointer-events: none;
}

.slider2 .swiper-button-next,
.slider2 .swiper-button-prev {
  bottom: 50%;
  top: unset;
}

.slider2 .swiper-button-prev {
  left: -58px;
  top: unset;
}

.slider2 .swiper-button-next {
  right: -9%;
  top: unset;
}

.slider2 .swiper-pagination-bullets {
  bottom: 0px;
  left: 0;
  width: 100%;
}

@media (max-width: 767px) {

  .swiper-container .swiper-slide .entity-img {
    display: block;
    width: 100%;
  }

  .swiper-container .swiper-slide-active {
    height: 100%;
  
  }

  .swiper-container .swiper-slide .content {
    position: relative;
  }

  .slider2 .swiper-button-prev,
  .slider2 .swiper-button-next {
    display: none
  }

}

.upk-salf-slider-wrapper .upk-salf-item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.text-bg {
  bottom: 24%;
  position: absolute;
  z-index: 99;
  color: white;
  height: 100%;
  display: flex;
  white-space: nowrap;
  justify-content: start;
  align-items: end;
  width: 100%;
}

.upk-salf-slider-wrapper .upk-salf-item .upk-salf-image-wrap {
  height: 100%;
  width: 100%;
}
*/
/* -----------------solution------------------------------------------------------ */

.slider3 .swiper-scrollbar {

  background: #ccc;
  height: 7px !important;
  width: 94%;
}


/*
.slider3 .swiper-scrollbar::-webkit-scrollbar-track {
  background: #FF9800;
}

.slider3 .swiper-scrollbar::-webkit-scrollbar {
  height: 12px;
}

.upk-salf-slider-wrapper .upk-salf-item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}
*/

.slider3 .swiper-container-horizontal>.slider3 .swiper-scrollbar {
  border-radius: 2px;
  height: 5px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

}

.cards {
  display: flex;
  padding: 25px 0px;
  list-style: none;
  /* overflow-x: scroll; */
  scroll-snap-type: x mandatory;
}

.sliderr {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.slider3 .swiper-scrollbar-drag {
  background: #009ADB;
}



.container_foto {
  background-color: rgba(57, 62, 93, 0.7);
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0px;
  position: relative;
  border-radius: 6px;
}

.container_foto article {
  padding: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 2.8s ease;
  display: flex;
  width: 100%;

}

.container_foto h2 {
  color: #fff;
  font-size: 17px;

}

.container_foto h4 {
  font-weight: 300;
  color: #fff;
  font-size: 16px;
}

.container_foto:hover h2 {
  color: white;
  font-size: 25px;
}

.container_foto img {
  width: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -o-transition: all 4s ease;
  -ms-transition: all 4s ease;
  transition: all 9s ease;
}

.ver_mas {

  opacity: 0;
  transform: translate(0px, 70px);
  -webkit-transform: translate(0px, 70px);
  -moz-transform: translate(0px, 70px);
  -o-transform: translate(0px, 70px);
  -ms-transform: translate(0px, 70px);
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 1.6s ease-in-out;
  display: none;
}

.ver_mas a {
  font-size: 18px;
  color: #fff;
  position: relative;
  margin: 10px auto;
  width: 100%;
  padding: 10px 10px 10px 68px;
  transition: all 8s ease;
  cursor: pointer;
  border-bottom: 0;
  text-decoration: none;
}


/*hovers*/

.container_foto:hover {
  cursor: pointer;
}

.container_foto:hover img {
  opacity: 0.6;
  transform: scale(1.5);
  filter: grayscale(1);
}

.container_foto:hover article {
  height: 100%;
  transform: translate(10px, -3px);
  -webkit-transform: translate(0px, -3px);
  -moz-transform: translate(2px, -69px);
  -o-transform: translate(2px, -69px);
  -ms-transform: translate(2px, -69px);

}

.container_foto:hover .ver_mas {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0, 20px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  opacity: 1;
  display: block;
}

.container_foto:hover .divi {
  top: 0;
  background: #000000ba;
}

.divi {
  width: 100%;
  align-items: center;
  display: flex;
  padding: 20px;
  position: relative;
  top: calc(100% - 12px);
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.8s ease;
  box-shadow: inset 0px -48px 20px 6px black;
}

.container_foto:hover h2 {
  font-size: 17px;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0, 15px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
}

.container_foto:hover .red1 {
  color: #FF4300;
}

.ver_mas p {
  color: white;
  font-weight: 300;
  font-size: 14px;
}



.read:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #ffffff;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.read:hover:before {
  width: 92%;
}

.container_foto:hover .brd {
  padding: 10px;
}

.read svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.container_foto:hover .divi .brd:before {
  content: "";
  display: block;
  width: 91%;
  background-color: #ffffff;
  height: 0.5px;
  margin-bottom: 12px;
  position: absolute;
  left: 0;
  top: 22px;
}

.container_foto:hover .divi .brd:after {
  content: "";
  display: block;
  height: 95%;
  margin-bottom: 12px;
  position: absolute;
  left: 16px;
  border-left: 0.3px solid #bfb8b8;
  top: 0;
}

.swiper-container-horizontal>.swiper-scrollbar {
  border-radius: 2px;
  height: 5px;
  width: 200px;
  bottom: 0;
  left: 49%;
  transform: translateX(-51%);

}

.slider3 .swiper-scrollbar {

  background: #ccc;
  height: 7px !important;
  width: 94%;
}



.slider3 .swiper-scrollbar::-webkit-scrollbar-track {}

.slider3 .swiper-scrollbar::-webkit-scrollbar {
  height: 12px;
}

.cards::-webkit-scrollbar-thumb,
.cards::-webkit-scrollbar-track {
  border-radius: 92px;
}

.slider3 .swiper-button-next:after,
.slider3 .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: 17px;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  font-weight: bolder;
  color: #2196F3;
}

.slider3 .swiper-scrollbar-drag {}

.slider3 .swiper-button-prev {
  bottom: -6px;
  top: unset;
  right: 20px;
  left: unset;
  height: unset;
}

.slider3 .swiper-button-next {
  bottom: -6px;
  top: unset;
  right: 0;
  left: unset;
  height: unset;
}

.phsolutions {
  padding: 10px
}

/*  
.desk .phsolutions ul {
  padding: 0;
  width: 100%;
  position: relative;
  display: flex;
  height: 100%;
  grid-template-rows: 353px;
  justify-content: center;
}

.desk .phsolutions ul li {
  list-style: none;
  max-width: 100%;
  max-height: 253px;
  border-radius: 80%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 16px;
  gap: 7px;
  position: relative;
  height: 212px;
  width: 100%;
  min-height: 200px;
}

.desk .phsolutions ul li:nth-child(1) {
  background-image: linear-gradient(83deg, #308fe1, #527485);
  z-index: 9;
  animation: scrolldown 10s ease infinite;
}


@keyframes scrolldown {
  0% {
    transform: translateY(20%);
    opacity: 1;
  }

  50% {
    transform: translateY(0%);
    opacity: 1;
  }

  100% {
    transform: translateY(20%);
    opacity: 1;
  }
}

@keyframes scrollup {
  0% {
    transform: translateY(-30%);
    opacity: 1;
  }

  50% {
    transform: translateY(10%);
    opacity: 1;
  }

  100% {
    transform: translateY(-30%);
    opacity: 1;
  }
}*/

.phsolutions .expbtn {
  width: 23px !important;
  height: 23px !important;
  color: #1153FF !important;
  animation: unset;
  align-items: center;
  display: flex !important;
  bottom: -2px;
}

@media (max-width: 767px) {
  .mob .phsolutions ul {
    padding: 0;
    width: 100%;
    position: relative;
    display: grid;
    /* height: 33vh; */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 353px;
  }

  .mob .phsolutions ul li {
    list-style: none;
    max-width: 135px;
    max-height: 135px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .mob .phsolutions ul li:nth-child(1) {
    background-image: linear-gradient(83deg, #308fe1, #527485);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
  }

  .texttrans h3 {
    font-family: 'Bradley Hand ITC';
    font-weight: bolder;
    text-align: center;
    font-size: 29px;
    margin-top: 43px;
    margin-bottom: 0;
  }

  .texttrans h3 span {
    color: #EF7F1A;
  }

/*  @keyframes scrolldown {
    0% {
      transform: translateY(20%);
      opacity: 1;
    }

    50% {
      transform: translateY(0%);
      opacity: 1;
    }

    100% {
      transform: translateY(20%);
      opacity: 1;
    }
  }

  @keyframes scrollup {
    0% {
      transform: translateY(-30%);
      opacity: 1;
    }

    50% {
      transform: translateY(10%);
      opacity: 1;
    }

    100% {
      transform: translateY(-30%);
      opacity: 1;
    }
  }
*/
  .mob .phsolutions ul li:nth-child(2) {
    background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(3) {
    background-image: linear-gradient(86deg, #0077B9, #013162);
    left: 63%;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(4) {
    background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul li:nth-child(5) {
    background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
    z-index: 9;
    left: 31%;
    top: 58%;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(6) {
    background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
    left: 63%;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul.three li:nth-child(1) {
    background-image: linear-gradient(86deg, #06B6D4, #a77f53);
    z-index: 9;
    animation: scrolldown 15s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(2) {
    background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(3) {
    background-image: linear-gradient(45deg, #31160e, #0dcaf0);
    left: 63%;
    animation: scrolldown 13s ease infinite;
  }

  .mob .phsolutions ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 18px;
    font-size: 12px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .mob .phsolutions ul li a.expbtn {
    width: 23px !important;
    height: 23px !important;
    color: #1153FF;
    animation: unset;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: -2px;
  }

  .slider3 .swiper-scrollbar {
    background: #ccc;
    height: 7px !important;
    width: 76%;
    display: flex;

    position: relative;
  }

  .phsolutions ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .phsolutions ul li {
    list-style: none;
    max-width: 135px;
    max-height: 135px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

/* ------------------------------------ add banner close--------------------------------- */
/* ----------------------------achhivements------------------------------------- */

.achive {
  position: relative;
}

.scroll-animation-all-wrapper {
  position: relative;
  padding: 30px 0;
}

.scroll-animation-all-wrapper::before {
  top: 0;
  left: 0;
}

.scroll-animation-all-wrapper::before,
.scroll-animation-all-wrapper::after {
  position: absolute;
  height: 100%;
  width: 300px;
  background: linear-gradient(90deg, #fff 100px, rgba(255, 255, 255, 0));
  z-index: 2;
  content: "";
}

.scroll-animation-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.scroll-animation.scroll-right-left {
  -webkit-animation: scroll 80s linear infinite;
  -moz-animation: scroll 80s linear infinite;
  animation: scroll 80s linear infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.scroll-animation {
  display: flex;
  width: -webkit-calc((420px * 16) + (30px * 16));
  width: -moz-calc((420px * 16) + (30px * 16));
  width: 7200px;
  position: relative;
}

.rbt-categori-list {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}

.rbt-categori-list a {
  border: 0 none;
  padding: 10px 15px;
  text-transform: capitalize;
  background: white;
  color: #6b7385;
  box-shadow: 0px 6px 34px rgb(215 216 222);
  height: 120px;
  border-radius: 9px;
  letter-spacing: inherit;
  transition: 0.4s;
  display: inline-block;
  min-width: 100px;
  transition: 0.4s;
  text-align: center;
}

.mt--30 {
  margin-top: 30px
}

.scroll-animation-all-wrapper::after {
  top: 0;
  right: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.scroll-animation-all-wrapper::before,
.scroll-animation-all-wrapper::after {
  position: absolute;
  height: 100%;
  width: 300px;
  background: linear-gradient(90deg, #fff 100px, rgba(255, 255, 255, 0));
  z-index: 2;
  content: "";
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

@-moz-keyframes scroll {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

.scroll-left-right {
  -webkit-animation: scrollLeft 80s linear infinite;
  -moz-animation: scrollLeft 80s linear infinite;
  animation: scrollLeft 80s linear infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes scrollLeft {
  0% {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }

  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes scrollLeft {
  0% {
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }

  to {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes scrollLeft {
  0% {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }

  to {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

.rbt-categori-list a img {
  height: 102px;
}


/* Let's */
.subs {
  background-color: #141414;
  padding: 20px 0;
}

.subs h3 {
  color: white
}

.subs p {
  color: white
}

.subs-row .end {
  text-align: right;
}


@media screen and (min-width:300px) and (max-width:766px) and (-webkit-min-device-pixel-ratio:1.50) {

  .ser {
    z-index: 9 !important
  }
}

/* ----------------------------------------------------------------------------------------------------------- */
.explore {
  background: url(../images/bulb/bga.png);
  background-position: right bottom;
  background-size: cover;

}

.contnt p {
  text-align: justify;
}

/*.two-part-title h2 {
  font-size: 32px;
  font-family: 'General Sans';
  font-weight: 600;
}

.two-part-title h2 .highlighterbg1 {
  color: #1153FF;
}

.two-part-title-wrapper .two-part-title {
  position: relative;
}*/

span.highlighterbg {
  background: url(../images/bulb/highlighter.png);
  background-size: 54%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 9;
  display: inline-block;
  background-position: 101%;
  padding: 0px 3px;
  font-size: 20px;
  font-weight: 800;
}

.buttonall a {
  color: #1153FF;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
  font-weight: 700;
}

.buttonall a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 3px solid #1153FF;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  background: #1153ff38;
}

.buttonall a:hover:before {
  width: 100%;
  z-index: -1;
}

.buttonall a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.btnal {
  display: flex;
  gap: 20px;
}

.buttonall2 a {
  color: #EF7F1A;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
}

.buttonall2 a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 3px solid #ef7f1a8c;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  background: #fbeee2;
}

.buttonall2 a:hover:before {
  width: 100%;
  z-index: -1;
}

.buttonall2 a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

/* ---------------enterprise----------------- */

.animation-container {
  width: 100%;
  height: 100%;
  margin: 18px auto;
  position: relative;
  -webkit-animation: fadeIn 0.2s ease-out both;
  animation: fadeIn 0.2s ease-out both;
  overflow: hidden;
}

.animation-container:after,
.animation-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://unitienda.net/demo/finalis/wp-content/uploads/2021/06/dots.png") 30% 0 no-repeat;
  background-size: 18%;
  z-index: -1;
}

.animation-container:before {
  background-position: 80% 100%;
}

.animation-container img {

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

  object-fit: cover;

  max-height: 180px;
}

.animation-container .circle {
  border-radius: 100%;
  position: absolute;
}

.animation-container .circle:nth-child(1) {
  border: 2px dashed transparent;
  background: #d6d3f8;
  left: 10%;
  top: 1%;
  width: 10vw;
  height: 10vw;
  -webkit-animation: bg-pulse 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-pulse 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(2) {
  border: 2px dashed #ef7f1a2b;
  background: transparent;
  left: 0%;
  top: 67%;
  width: 10vw;
  height: 10vw;
  -webkit-animation: bg-rotation 22s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-rotation 22s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  border-radius: 0;
}

.animation-container .circle:nth-child(3) {
  border: 2px dashed transparent;
  background: #cccedd;
  left: 52%;
  top: 0%;
  width: 5vw;
  height: 5vw;
  -webkit-animation: bg-pulse 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-pulse 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(4) {
  border: 2px dashed #d6d3f8;
  background: transparent;
  left: 1%;
  top: 1%;
  width: 46vw;
  height: 46vw;
  -webkit-animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(6) {
  border: 2px dashed #d6d3f8;
  background: transparent;
  left: 54%;
  top: 65%;
  width: 45vw;
  height: 45vw;
  -webkit-animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(5) {
  border: 2px dashed transparent;
  background: #ccecfc;
  left: 97%;
  top: 20%;
  width: 6vw;
  height: 6vw;
  -webkit-animation: bg-pulse 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-pulse 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .cursor {
  -webkit-animation: scaleInUp 0.7s ease-in-out 5.5s both;
  animation: scaleInUp 0.7s ease-in-out 1.5s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  right: -15px;
  position: relative;
  width: 50%;
}

.animation-container .cursor .rotateCursor {
  transform: rotateY(180deg);
  transform-origin: center center;
}

.animation-container .dashboard {

  -webkit-animation: scaleInCenter 1s ease-in-out;

  animation: scaleInCenter 1s ease-in-out;

  width: 46%;

  position: relative;

  overflow: hidden;

  border-radius: 100px;
}

.animation-container .dashboard img {

  border-radius: 113px;

  height: 180px;
}

.animation-container .dashboard1 {

  -webkit-animation: scaleInCenter 1s ease-in-out;

  animation: scaleInCenter 1s ease-in-out;

  position: relative;

  width: 51%;

  left: -10px;

  top: -20px;

  overflow: hidden;
}

.animation-container .dashboard1 img {}

.animation-container .activity {

  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;

  animation: scaleInUp 0.7s ease-in-out 0.7s both;

  left: -10px;

  position: relative;

  top: -15px;

  width: 50%;

  overflow: hidden;
}


.animation-container .compliance {

  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;

  animation: scaleInUp 0.7s ease-in-out 1.5s both;

  -webkit-animation-direction: alternate;

  animation-direction: alternate;

  width: 52%;

  overflow: hidden;

  right: -10px;

  position: relative;
}

.animation-container .compliance1 {

  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;

  animation: scaleInUp 0.7s ease-in-out 1.5s both;

  -webkit-animation-direction: alternate;

  animation-direction: alternate;

  width: 44%;

  border-radius: 138px;

  overflow: hidden;

  right: -8px;

  position: relative;

  top: -12px;
}

.animation-container .compliance1 img {}

.animation-container .compliance .bottom-link,
.animation-container .compliance .title {
  -webkit-animation: fadeInRight 0.3s ease-in-out 1.5s both;
  animation: fadeInRight 0.3s ease-in-out 1.5s both;
}

.animation-container .compliance .text-step {
  -webkit-animation: fadeInUp 0.3s ease-in-out 4.7s both;
  animation: fadeInUp 0.3s ease-in-out 4.7s both;
}

.animation-container .compliance .progress-bar {
  -webkit-animation: fadeInUp 0.3s ease-in-out 4.9s both;
  animation: fadeInUp 0.3s ease-in-out 4.9s both;
}

.animation-container .compliance .progress-bar .bar {
  width: 0;
  -webkit-animation: progressBar 1s ease-in 5.3s both;
  animation: progressBar 1s ease-in 5.3s both;
}

.animation-container .compliance .button-blue {
  -webkit-animation: fadeInUp 0.3s ease-in-out 5.1s both;
  animation: fadeInUp 0.3s ease-in-out 5.1s both;
}

@-webkit-keyframes bg-pulse {
  50% {
    transform: scale(0.7) translatey(5%);
  }
}

@keyframes bg-pulse {
  50% {
    transform: scale(0.7) translatey(2%);
  }
}

@-webkit-keyframes bg-rotation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bg-rotation {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes progressBar {
  to {
    width: 177px;
  }
}

@keyframes progressBar {
  to {
    width: 177px;
  }
}

@-webkit-keyframes flipVertical {
  from {
    transform: rotateY(90deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

@keyframes flipVertical {
  from {
    transform: rotateY(90deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

@-webkit-keyframes showBubble {
  from {
    transform: rotate(15deg) translatey(10px);
    opacity: 0;
  }
}

@keyframes showBubble {
  from {
    transform: rotate(15deg) translatey(10px);
    opacity: 0;
  }
}

@-webkit-keyframes scaleInCenter {
  0% {
    transform: translate(00%, -00%) scale(0.8);
    opacity: 0.2;
  }

  100% {
    transform: translate(-0%, -00%) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes scaleInUp {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleInUp {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translatey(10px);
  }

  to {
    opacity: 1;
    transform: translatey(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translatey(10px);
  }

  to {
    opacity: 1;
    transform: translatey(0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translatex(-10px);
  }

  to {
    opacity: 1;
    transform: translatex(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translatex(-10px);
  }

  to {
    opacity: 1;
    transform: translatex(0);
  }
}

@-webkit-keyframes cursor {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  10%,
  20% {
    left: 23%;
  }

  50%,
  90% {
    top: 45%;
    left: 33%;
  }

  100% {
    opacity: 1;
    left: 33%;
  }
}

.black {
  text-align: center;
  background: #000;
  background-blend-mode: multiply;
  color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
  z-index: 1;
  top: 0;
}

.imgtitle {
  color: #fff;
  font-size: 20px;
  align-self: center;
  position: absolute;
  z-index: 10;
  display: flex;
  top: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  padding: 10px;
  text-align: center;
  align-items: center;
  flex-flow: column;
  gap: 28px;
}

/*.expbtn {
  background: white;
  border-radius: 55%;
  transform: rotate(45deg);
  color: #1153FF;
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  position: absolute;
  bottom: 8px;
}*/

.imgtitle p {
  color: white;
  margin-bottom: -15px;
  font-weight: 300;
}

.black,
.imgtitle {
  transition: opacity .3s;
}

.thumbnails img:hover {
  cursor: pointer;
  z-index: 1;
}

.thumbnails img:hover .black,
.thumbnails img:hover .imgtitle {
  opacity: 0;
}

.thumb {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
}

/* -----------------------------ecom--------------- */

body {
  /* background: url('../images/bulb/bulb1.png'); */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right;
}

/* ----------------------------ecom-------------------------------- */
/*
.cardmain {
  height: 100%;
  width: 100%;
  padding: 0rem 0;
  display: grid;
  place-content: flex-start;

}

.touc {
  font-size: 24px;
}

.expor .texttrans h3 {
  margin-top: 10px;
}

.touc span {
  color: #EF7F1A
}

.cardmain .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  pointer-events: none;
}

.cardmain .card {
  max-width: 18rem;
  color: #ffffffda;
  padding: 1.5rem;
  background-color: #202022;
  pointer-events: auto;
  transform: scale(1);
  opacity: 1;
  transition: all 150ms ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 19px;
  gap: 10px;
  transform-origin: top center;
  animation: swing 7s ease-in-out infinite;
  position: relative;
  max-height: 81vh;
  overflow: hidden;
}

.cardmain .card div {
  margin-bottom: 10px;
}

@keyframes swing {
  20% {
    transform: rotate(2deg);
  }

  40% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(-2deg);
  }

  80% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}

.cardmain .card .card-title {
  position: relative;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.cardmain .card p {
  color: white;
  font-size: 16px;
  margin-bottom: 4px;
  text-align: center;
}



.cardmain .expbtn {}

.cardmain .card .card-title::before {
  content: "";
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 3px #bb86fc;
  background-color: transparent;
  position: absolute;
  right: 0;
}

.cardmain .card .description {
  font-size: 0.9rem;
}

.cardmain .card:nth-child(even) {
  transform: translateY(16px);
}

.cardmain .card:nth-child(n) {
  transform: rotate(-3deg);
}*/
.block-4 .textone .expbtn {
  font-size: 12px;
  left: 4px;
  bottom: 6px;
}
/* 
.cardmain .cards:hover > .card:nth-child(n):hover {
  transform: scale(1.45);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transform: translate(27%) scale(1.5);
    
}
.cardmain .cards:hover > .card:nth-child(even):hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transform: translate(-27%) scale(1.5);
}
.cardmain .cards:hover > .card:not(:hover) {
  opacity: 0.5;
} */
.cardmain .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: -1;
  border-radius: 14px;
}

.cardmain .card-one::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
}

.card-two::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
}

.card-three::before {
  background: url(../images/bulb/cms-bg-home.png);
  background-position: center;
  background-size: contain;
}

.card-four::before {
  background: url(../images/bulb/digital-marketing-bg-home.webp);
}

.card-five::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
  background-size: contain;
}

.card-six::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
  background-size: contain;
}

.subhead {
  color: #01376c;
  margin-top: 8px;
  letter-spacing: 2px;
}

.subhead h3 {
  font-size: 16px;
}

/* --------------------------------- */
:root {
  --background-color: white;
  --gap: 0.5rem;
  --hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.mood-board {
  aspect-ratio: 2/1;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(14, 1fr);
  grid-template-areas: "b1 b1 b1 b1 b1 b1 b1 tx tx tx tx tx tx tx" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b6 b6 b6 b6 b6 b6 b6";
  grid-gap: var(--gap);
}

.mood-board .block-1 .textone .expbtn {
  margin-top: 10px;
}

[class^=block-]>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.block-1 {
  grid-area: b1;
  border-radius: 10px;
  background-image: url(../images/bulb/vc.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
  animation: scaleInUp 0.4s ease-in-out 0.5s both;
  background-size: 100%;
  background-color: #cee8f7;
  background-position: top;
}

.block-1 .textone {
  justify-content: flex-start;
  padding-bottom: 30px;
  text-align: center;
  align-items: flex-start;
}

.block-1 .textone h3 {
  color: black;
  font-weight: 700;
}

.block-2 {
  grid-area: b2;
  background: #ccff9d;
  border-radius: 10px;
  border-radius: 10px;
  background-image: url(../images/bulb/shopify-home.gif);
  background-repeat: no-repeat;
  background-size: 109%;
  -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
  animation: scaleInUp 0.4s ease-in-out 0.5s both;
  /* -webkit-animation-direction: alternate; */
  /* animation-direction: alternate; */
  background-position: 27%;
}

.block-2 .textone {
  align-items: end;
  justify-content: space-between;
}

.block-3 {
  grid-area: b3;
  border-radius: 10px;
  background-image: url(../images/bulb/Magento-Commerce.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
  animation: scaleInUp 0.3s ease-in-out 1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-size: 68%;
  background-position: right;
  background-color: #f0eacc;
}

.block-3 .textone {
  align-items: end;
}

.block-4 {
  grid-area: b4;
  border-radius: 10px;
  background: url(../images/bulb/headless-eCommerce.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
  animation: scaleInUp 0.3s ease-in-out 1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-position: top;
  background-size: 100%;
}

.block-4 .textone {
  padding-top: 53px;
  /* background-image: linear-gradient(194deg, #45737c 0%, rgb(255 255 255 / 84%) 35%, #5ed6ef 100%); */
  border-radius: 10px;
}

.block-4 .textone h3 {
  color: black;
  font-weight: bold;
}

.block-6 {
  grid-area: b6;
  border-radius: 10px;
  /* background: url(../images/bulb/bigcommerce.png); */
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.4s ease-in-out 1.1s both;
  animation: scaleInUp 0.4s ease-in-out 1.1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-color: #ecf1f7;
  background-position: center 15%;
  background-size: 23%;
}

.block-6 img {
  width: 100%;
  margin: 0 auto;
  /* height: 150px; */
  border-radius: 10px;
}

.block-6 .textone {
  align-items: end;
  height: 183px;
  justify-content: start;
  padding: 0;
}

.block-6 .textone h3 {}

.color-1 {
  grid-area: c1;
  border-radius: 10px;
  background-image: url(../images/bulb/ONDC.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.5s ease-in-out 1.2s both;
  animation: scaleInUp 0.5s ease-in-out 1.2s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-color: black;
  background-position: center;
  background-size: cover;
}

.color-1 .textone {
  /* background-image: linear-gradient(194deg, rgb(174 169 255) 0%, rgb(252 252 255 / 0%) 35%, rgb(0 212 255 / 14%) 100%); */
  border-radius: 10px;
}

.color-1 .textone h3 {
  position: absolute;
  top: 20px;
  color: black;
  font-weight: 600;
}

.block-5 {
  grid-area: tx;
  border-radius: 10px;
  -webkit-animation: scaleInUp 0.6s ease-in-out 1.3s both;
  animation: scaleInUp 0.6s ease-in-out 1.3s both;
  /* -webkit-animation-direction: alternate; */
  /* animation-direction: alternate; */
  background-image: url(../images/bulb/WooCommerce.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #150d1f;
  background-position: 0% 0%;
  position: relative;
}

.block-5 .textone {
  align-items: end;
  height: 167px;
  justify-content: unset;
  position: relative;
}

.block-5 .textone h3 {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translate(-40%, 42%);
  font-weight: bolder;
  font-size: 32px;
}

/*.textone {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  padding: 10px;
  gap: 4px;
  text-align: center;
}

.textone h3 {
  color: white;
  font-size: 24px;
  font-weight: 600 !important;
}*/

.text {
  overflow: hidden;
  background-color: black;
  grid-area: tx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  color: white;
  text-transform: uppercase;
  font-size: 5vw;
  letter-spacing: 0.125em;
}

.hexagon {
  background-color: var(--background-color);
  grid-column: 7 / span 2;
  grid-row: 3 / span 2;
  clip-path: var(--hexagon);
  padding: var(--gap);
  border-radius: 10px;
  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;
  animation: scaleInUp 0.7s ease-in-out 1.5s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  width: 300px;
  height: 300px;
}

.hexagon .textone {
  padding: 0;
  background-image: linear-gradient(174deg, #181818d9 -13%, rgb(30 30 30 / 16%) 25%, #0a0a0a05 100%);
  border-radius: 10px;
  justify-content: flex-end;
  padding-bottom: 24px;
}

.hexagon__interior {
  height: 100%;
  background-color: #383837;
  clip-path: var(--hexagon);
  padding: 0;
  background-image: url(../images/bulb/virtual-tryon.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.hexagon .textone h3 {
  font-weight: 800;
}

/* --------------------------wfm--------------- */

.contnt p.make {
  font-family: 'Bradley Hand ITC';
  font-weight: bolder;
  text-align: center;
  font-size: 25px;
  margin-top: 43px;
  margin-bottom: 15px;
  text-align: center;
}

.contnt p.make span {
  color: #EF7F1A
}

.d-fleximg {
  display: flex;
  justify-content: space-between;
}

/* --------risk------------------------- */

.card-stack {
  width: 92%;
  height: 91vh;
  position: relative;
  margin: 20px auto;
  margin-bottom: 271px;
  max-height: 100vh;
}

.card-stack .buttons {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.46);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  left: 0;
  top: 55%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 35px;
  text-decoration: none;
  font-size: 22px;
  z-index: 100;
  outline: none;
  transition: all 0.2s ease;
}

.card-stack .buttons:hover {
  transform: scale(1.3, 1.3);
}

.card-stack .prev {
  left: 15px;
  right: auto;
}

.card-stack .next {
  left: auto;
  right: 15px;
}

.card-stack .carousel .buttons:hover {
  color: #C01313;
  background: #fff;
}

.card-stack .riskcard-list {
  width: 100%;
}

.card-stack .riskcard-list li img {
    padding-top: 22px;
}

.card-stack .riskcard-list li p {
  color: black;
  font-weight: 600;
  margin-top: 20px;
}
.hexagon .textone .expbtn {
  margin-top: 10px;
  bottom: 2px;
  left: 50%;
  font-size: 12px;
  transform: translate(-50%, -50%);
}
.card-stack .riskcard-list li {
  transition: all 86ms ease-in-out;
  border-radius: 2px;
  position: absolute;
  list-style: none;
  height: 100%;
  -webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px 25px;
  text-align: left;
  background-size: cover;
  border-radius: 22px;
  animation-name: slideFromBottom;
  -webkit-animation-name: slideFromBottom;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes slideFromBottom {
  0% {
    opacity: 1;
    -webkit-transform: translateY(6%);
    -moz-transform: translateY(6%);
    -ms-transform: translateY(6%);
    -o-transform: translateY(6%);
    transform: translateY(6%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    display: block;
  }
}


.card-stack .riskcard-list li:nth-child(1) {
  top: 0;
  /* width: 92%; */
  /* animation: scaleCard 100ms; */
}

.onen {
  background-image: linear-gradient(175deg, #0A85ED, #E4F2FF);
  border: 1px solid #fff;
}

.card-stack .riskcard-list li:nth-child(2) {
  top: 60px;
  /* width: 70%; */
}

.twon {
  border: 1px solid white;
  background-image: linear-gradient(175deg, #0C63E7, #E4EFFF);
}

.titlerisk {
  display: flex;
  justify-content: space-between;
  font-size: 23px;
  font-weight: 600;
  color: white;
}

.titlerisk span {
  font-size: 16px;
  font-weight: 500;
}

.card-stack .riskcard-list li:nth-child(3) {
  top: 120px;
  /* width: 80%; */
}

.threen {
  border: 1px solid #fff;
  background-image: linear-gradient(175deg, #0D41E1, #E6ECFE);
}

.card-stack .riskcard-list li:nth-child(4) {
  top: 180px;
  /* width: 90%; */
}

.fourn {
  border: 1px solid #fff;
  background-image: linear-gradient(175deg, #002DB6, #E4EFFF);
}

.card-stack .riskcard-list li:nth-child(5) {
  top: 240px;
  width: 100%;
}

.card-stack .riskcard-list li:nth-child(5) .titlerisk span {
  display: none;
}

.fiven {
  background-image: linear-gradient(175deg, #00238E, #CDD8F7);
  border: 1px solid #fff;
}

.card-stack:hover>.buttons.prev {
  display: block;
  animation: bounceInLeft 200ms;
}

.card-stack:hover>.buttons.next {
  display: block;
  animation: bounceInRight 200ms;
}

.transformThis {
  animation: scaleDown 500ms;
}

.transformPrev {
  animation: scaleUp 100ms;
  display: none;
}

.riskcard .buttonall a {
  color: #1153FF;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
  font-weight: 700;
}

.riskcard .buttonall a:before {
  border: 3px solid #1153FF;
  background: #1153ff38;
}

@keyframes scaleUp {
  0% {
    transform: scale(1.2) translateY(50px);
    opacity: 0;
  }

  20% {
    transform: scale(1.15) translateY(40px);
    opacity: 0.1;
  }

  40% {
    transform: scale(1.1) translateY(30px);
    opacity: 0.2;
  }

  60% {
    transform: scale(1.05) translateY(20px);
    opacity: 0.4;
  }

  80% {
    transform: scale(1.01) translateY(10px);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  20% {
    transform: scale(1.01) translateY(20px);
    opacity: 0.8;
  }

  40% {
    transform: scale(1.05) translateY(40px);
    opacity: 0.4;
  }

  60% {
    transform: scale(1.1) translateY(60px);
    opacity: 0.2;
  }

  80% {
    transform: scale(1.15) translateY(80px);
    opacity: 0.1;
  }

  100% {
    transform: scale(1.2) translateY(100px);
    opacity: 0;
  }
}

@keyframes scaleCard {
  0% {
    top: 5px;
  }

  100% {
    top: 24px;
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    transform: translateX(0);
  }
}

/* -----------------------------risk desktiop---------- */
.dp-wrap {
  margin: 24px auto;
  position: relative;
  perspective: 1000px;
  height: 100%;
}

.dp-slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.dp-slider div {
  transform-style: preserve-3d;
}

.dp_item {
  display: block;
  position: absolute;
  text-align: center;
  color: #FFF;
  border-radius: 10px;
  transition: transform 1.2s;
  right: 0;
}

.dp-img img {
  border-left: 1px solid #fff;
}

#dp-slider .dp_item:first-child {
  z-index: 11 !important;
  transform: rotateY(0deg) translateX(0px) !important;
  border: 1px solid #fff;

  border: 1px solid #fff;
}

#dp-slider .dp_item:nth-child(2) {}

#dp-slider .dp_item:nth-child(3) {}

#dp-slider .dp_item:nth-child(4) {}

#dp-slider .dp_item:nth-child(5) {}

.dp_item[data-position="1"] {
  z-index: 10;
  transform: rotateY(0deg) translateX(-36%) scale(1);
}

.dp_item[data-class="1"] {
  background-image: linear-gradient(175deg, #002DB6, #E4EFFF);
}

.dp_item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(-75%) scale(1);
}

.dp_item[data-class="2"] {
  background-image: linear-gradient(175deg, #0D41E1, #E6ECFE);
}

.dp_item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(-114%) scale(1);
}

.dp_item[data-class="3"] {
  background-image: linear-gradient(175deg, #0C63E7, #E4EFFF);
}

.dp_item[data-position="4"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(-154%) scale(1);
}

.dp_item[data-class="4"] {
  background-image: linear-gradient(175deg, #0A85ED, #E4F2FF);
}

.dp_item[data-position="5"] {
  z-index: 6;
  transform: rotateY(0deg) translateX(-154%) scale(1);
}

.dp_item[data-position="0"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(-154%) scale(1);
}

.dp_item[data-class="0"] {
  background-image: linear-gradient(175deg, #00238E, #CDD8F7);
}

#dp-next,
#dp-prev {
  position: absolute;
  top: 50%;
  right: 16%;
  height: 33px;
  width: 33px;
  z-index: 10;
  cursor: pointer;
}

#dp-prev {
  left: 15px;
  transform: rotate(180deg);
}

#dp-dots {
  position: absolute;
  bottom: 25px;
  z-index: 12;
  left: 38%;
  cursor: default;
}

#dp-dots li {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

#dp-dots li:hover {
  cursor: pointer;
  background: #FA8C8C;
  transition: background .3s;
}

#dp-dots li.active {
  background: #FA8C8C;
}

.dp_item {
  width: 39%;
}

.dp-content,
.dp-img {
  text-align: left;
}

.dp_item {
  display: flex;
  align-items: self-start;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #ffffff;
  height: 87vh;
  box-shadow: -3px 2px 15px 4px #ffffff3d;
}

.dp-content {
  padding: 20px;
  display: inline-block;
  width: 100%;
  color: white;
  height: 100%;
}

.dp-content h2 {
  color: #41414B;
  font-family: Circular Std Bold;
  font-size: 48px;
  max-width: 460px;
  margin-top: 8px;
  margin-bottom: 0px;
}

.dp-content p {
  color: #000000;
  max-width: 490px;
  margin-top: 15px;
  font-size: 21px;
}

.dp-content .buttonall {
  margin-top: 15px;
  font-size: 20px;
  padding: 0;
  text-align: right;
}

.dp-content img {
  object-fit: contain;
  object-position: center;
  height: 38vh;
  margin: 0 auto;
  width: 100%;
}

.dp-content .contdiv {
  height: 35vh;
  overflow: hidden;
}

#dp-slider,
.dp-img img {
  height: 91vh;
}

#dp-slider .dp_item:hover:not(:first-child) {
  cursor: pointer;
}

.site-btn {
  color: #fff;
  font-size: 18px;
  font-family: "Circular Std Medium";
  background: #FA8282;
  padding: 14px 43px;
  display: inline-block;
  border-radius: 2px;
  position: relative;
  top: -12px;
  text-decoration: none;
}

.site-btn:hover {
  text-decoration: none;
  color: #fff;
}

/* ----------------------------------------------------- */
.message,
.message2,
.message3,
.message4,
.message6{
  display: none;
}

.message:first-child,
.message2:first-child,
.message3:first-child,
.message4:first-child,
.message6:first-child{
  display: block;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


@media only screen and (max-width: 767px) {
  .d-fleximg {
    display: block;
    justify-content: space-between;
  }

  .mood-board {
    aspect-ratio: 1/1;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(14, 1fr);
    grid-template-areas: "b1 b1 b1 b1 b1 b1 b1 tx tx tx tx tx tx tx" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b6 b6 b6 b6 b6 b6 b6";
    grid-gap: var(--gap);
  }

  .mood-board .expbtn {
    margin-top: 10px;
    bottom: 2px;
  }

  [class^=block-]>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  .block-1 {
    grid-area: b1;
    border-radius: 10px;
    background-image: url(../images/bulb/vc.gif);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
    animation: scaleInUp 0.4s ease-in-out 0.5s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-size: 191%;
    background-color: #cee8f7;
    background-position: 38%;
  }

  .block-1 .textone {
    justify-content: flex-start;
    padding-bottom: 3px;
    align-items: flex-start;
  }

  .block-1 .textone h3 {
    color: black;
    font-weight: 700 !important;
    text-align: left;
    font-size: 14px;
  }

  .block-2 {
    grid-area: b2;
    background: #ccff9d;
    border-radius: 10px;
    border-radius: 10px;
    background-image: url(../images/bulb/shopify-home.gif);
    background-repeat: no-repeat;
    background-size: 157%;
    -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
    animation: scaleInUp 0.4s ease-in-out 0.5s both;
    /* -webkit-animation-direction: alternate; */
    /* animation-direction: alternate; */
    background-position: 27%;
  }

  .block-2 .textone {
    align-items: end;
    justify-content: space-between;
  }

  .block-3 {
    grid-area: b3;
    border-radius: 10px;
    background-image: url(../images/bulb/magento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
    animation: scaleInUp 0.3s ease-in-out 1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-size: 72%;
    background-position: right;
  }

  .block-3 .textone {
    align-items: end;
  }

  .block-4 {
    grid-area: b4;
    border-radius: 10px;
    background: url(../images/bulb/headless-eCommerce.gif);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
    animation: scaleInUp 0.3s ease-in-out 1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-position: top;
    background-size: 122%;
  }

  .block-4 .textone {
    padding-top: 53px;
    background-image: linear-gradient(194deg, #004c5b 0%, rgb(255 255 255 / 57%) 35%, #00a8cb 100%);
    border-radius: 10px;
  }

  .block-4 .textone h3 {
    color: black;
    font-weight: bold;
    white-space: break-spaces;
  }

  .block-6 {
    grid-area: b6;
    border-radius: 10px;
    /* background: url(../images/bulb/bigcommerce.png); */
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.4s ease-in-out 1.1s both;
    animation: scaleInUp 0.4s ease-in-out 1.1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-color: #ceddeb;
    background-position: center 42%;
    background-size: 90%;
  }

  .block-6 img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .block-6 .textone {
    align-items: end;
    height: 71px;
    justify-content: start;
    padding: 0;
  }

  .block-6 .textone h3 {}

  .color-1 {
    grid-area: c1;
    border-radius: 10px;
    background-image: url(../images/bulb/on.gif);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.5s ease-in-out 1.2s both;
    animation: scaleInUp 0.5s ease-in-out 1.2s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-color: black;
    background-position: center;
    background-size: 800%;

  }

  .color-1 .textone {
    /* background-image: linear-gradient(194deg, #ffc10782 0%, rgb(252 252 255 / 0%) 35%, #0d6efd5c 100%); */
    border-radius: 10px;
  }

  .color-1 .textone h3 {
    position: absolute;
    top: 20px;
    color: black;
    font-weight: 600;
  }

  .block-5 {
    background-size: 104%;
    background-position: 62% 83%;
    background-color: #e9defb;
  }

  .block-5 .textone {
    align-items: end;
    height: 62px;
    justify-content: unset;
    position: relative;
  }

  .block-5 .textone h3 {
    position: absolute;
    bottom: 11px;
    left: 50%;
    transform: translate(-50%, 50%);
    font-weight: bolder;
    font-size: 16px;
  }

  .textone {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 10px;
    gap: 4px;
    text-align: center;
  }

  .textone h3 {
    color: white;
    font-size: 14px;
    font-weight: 400;
  }

  .text {
    overflow: hidden;
    background-color: black;
    grid-area: tx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 5vw;
    letter-spacing: 0.125em;
  }

  .hexagon {
    background-color: var(--background-color);
    grid-column: 6/span 4;
    grid-row: 3/span 2;
    clip-path: var(--hexagon);
    padding: var(--gap);
    border-radius: 10px;
    -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;
    animation: scaleInUp 0.7s ease-in-out 1.5s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    width: 126px;
    height: 126px;
  }

  .hexagon .textone {
    padding: 0;
    border-radius: 10px;
    position: relative;
    padding-bottom: 20px;
  }

  .hexagon__interior {
    height: 100%;
    background-color: #383837;
    clip-path: var(--hexagon);
    padding: 0;
    background-image: url(../images/bulb/virtual-tryon.gif);
    background-repeat: no-repeat;
    background-size: 124%;
    background-position: center;
  }

  .hexagon .textone h3 {
    font-weight: 800;
  }

  .rbt-categori-list {
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .rbt-categori-list a {
    padding: 10px 10px;
    font-size: 14px;
    height: auto;
    min-width: max-content;
  }

  .scroll-animation-all-wrapper::before,
  .scroll-animation-all-wrapper::after {
    width: 100px;
    background: linear-gradient(90deg, #fff 10px, rgba(255, 255, 255, 0));
  }

  /*.cardmain .card .card-title {
    position: relative;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
  }

  .cardmain .card p {
    color: white;
    font-size: 12px;
    margin-bottom: 0px;
    text-align: center;
  }

  .cardmain .card {
    max-width: 12rem;
  }

  .cardmain {
    overflow: hidden;
  }
*/
  .divi {
    width: 100%;
    align-items: center;
    display: flex;
    padding: 9px;
    position: relative;
    top: calc(100% - 6px);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.8s ease;
    box-shadow: none;
    background: #ffffffbf;
  }

  .container_foto h2 {
    color: #000;
    font-size: 20px;
  }

}

@media only screen and (max-width: 395px) {

  .block-5 {
    background-size: 38%;
    background-position: 46% -265%;
    position: relative;
  }

}

@media screen and (min-width:320px) and (max-width:935px) and (orientation:landscape) {

  .card-stack {
    width: 100%;
    height: 156vh;
    max-height: 200vh;
  }

  .card-stack .riskcard-list li img {
    width: 100%;
    height: 360px;
    object-fit: contain;
  }

  .main-title h1 {
    font-family: 'General Sans';
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
  }

  .main-title h2 {
    font-family: 'General Sans';
    margin-top: -7px;
    font-size: 25px;
    margin-bottom: 0;
  }

  .mob .phsolutions ul {
    padding: 0;
    width: 100%;
    position: relative;
    display: grid;
    /* height: 33vh; */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 425px;
  }

  .mob .phsolutions ul li {
    list-style: none;
    max-width: 194px;
    max-height: 194px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .mob .phsolutions ul li:nth-child(1) {
    background-image: linear-gradient(83deg, #308fe1, #527485);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(2) {
    background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(3) {
    background-image: linear-gradient(86deg, #0077B9, #013162);
    left: 63%;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(4) {
    background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul li:nth-child(5) {
    background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
    z-index: 9;
    left: 31%;
    top: 58%;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(6) {
    background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
    left: 63%;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul.three li:nth-child(1) {
    background-image: linear-gradient(86deg, #06B6D4, #a77f53);
    z-index: 9;
    animation: scrolldown 15s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(2) {
    background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(3) {
    background-image: linear-gradient(45deg, #31160e, #0dcaf0);
    left: 63%;
    animation: scrolldown 13s ease infinite;
  }

  .mob .phsolutions ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 22px;
    font-size: 19px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .mob .phsolutions ul li a.expbtn {
    width: 23px !important;
    height: 23px !important;
    color: #1153FF;
    animation: unset;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: -2px;
  }

  .block-1 {
    grid-area: b1;

    background-size: cover;
    background-color: #cee8f7;
    background-position: right;
  }
}

@media screen and (min-width:320px) and (max-width:845px) and (orientation:landscape) {

  .card-stack {
    width: 100%;
    height: 167vh;
    max-height: 200vh;
  }

  .card-stack .riskcard-list li img {
    width: 100%;
    height: 360px;
    object-fit: contain;
  }

  .main-title h1 {
    font-family: 'General Sans';
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
  }

  .main-title h2 {
    font-family: 'General Sans';
    margin-top: -7px;
    font-size: 25px;
    margin-bottom: 0;
  }

}

@media screen and (min-width:767px) and (max-width:845px) and (orientation:portrait) {
  .title {
    color: white;
    margin-top: 15px !important;
    position: relative;
    font-size: 24px;
    text-align: left;
    padding: 0px 31px !important;
    text-transform: uppercase;
    opacity: 0.8;
    transform: unset;
  }

  .banner,
  .mainbnr {
    height: 54vh;
  }

  #mob .balloon:nth-child(1) svg {
    width: 202px !important;
    height: 433px;
    left: 5px;
  }

  .mob .phsolutions ul {
    padding: 0;
    width: 100%;
    position: relative;
    display: grid;
    /* height: 33vh; */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 491px;
  }

  .mob .phsolutions ul li {
    list-style: none;
    max-width: 223px;
    max-height: 223px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .mob .phsolutions ul li:nth-child(1) {
    background-image: linear-gradient(83deg, #308fe1, #527485);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
  }

  .texttrans h3 {
    font-family: 'Bradley Hand ITC';
    font-weight: bolder;
    text-align: center;
    font-size: 29px;
    margin-top: 43px;
    margin-bottom: 0;
  }

  .texttrans h3 span {
    color: #EF7F1A;
  }

  .mob .phsolutions ul li:nth-child(2) {
    background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(3) {
    background-image: linear-gradient(86deg, #0077B9, #013162);
    left: 63%;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(4) {
    background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul li:nth-child(5) {
    background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
    z-index: 9;
    left: 31%;
    top: 58%;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(6) {
    background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
    left: 63%;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul.three li:nth-child(1) {
    background-image: linear-gradient(86deg, #06B6D4, #a77f53);
    z-index: 9;
    animation: scrolldown 15s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(2) {
    background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(3) {
    background-image: linear-gradient(45deg, #31160e, #0dcaf0);
    left: 63%;
    animation: scrolldown 13s ease infinite;
  }

  .mob .phsolutions ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 18px;
    font-size: 12px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .mob .phsolutions ul li a.expbtn {
    width: 23px !important;
    height: 23px !important;
    color: #1153FF;
    animation: unset;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: -2px;
  }
}

/* ----------125%------------------------------------------------ */
@media only screen and (min-width:1020px) and (max-width:2048px) and (-webkit-min-device-pixel-ratio: 1.25) {
  #desk .balloon:nth-child(1) {
    width: 232px;
    height: 100%;
  }

  #desk .balloon:nth-child(2) {
    animation-duration: 2.5s;
    animation: balloons1 2.5s ease-in-out;
    width: 161px;
  }

  #desk .balloon:nth-child(4) {
    animation-duration: 4.5s;
    animation: balloons1 2.5s ease-in-out;
    width: 225px;
  }

  #desk .balloon:nth-child(5) svg {
    left: -56%;
    width: 185px;
  }

  #desk .balloon:nth-child(3) {
    width: 178px;
  }

  .all {
    height: 92%;
  }

  /*.main-title h1 {
    font-family: 'General Sans';
    font-size: 49px;
  }*/

  #dp-slider,
  .dp-img img {
    height: 98vh;
  }

  .dp_item {
    height: 97vh;
  }
}

@media screen and (min-width:320px) and (max-width:940px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.25) {}

.section-4cols .swiper-container-horizontal>.swiper-pagination-bullets,
.section-4cols .swiper-pagination-custom,
.section-4cols .swiper-pagination-fraction {
  bottom: 14px !important;
}

.section-4cols {
  position: relative;
}

.section-4cols .slider1 {
  width: 100%;
  height: 75vh;
  background: url(../images/solutons-banner.jpg);
  background-size: cover;
  background-position: center;
}

.section-4cols .swiper-slide.no-remove {
  overflow: visible !important;
  z-index: 1;
}

.offcanvas.show,
.offcanvas.showing {
  visibility: visible;
  z-index: 1000;
}

@font-face {
  font-family: 'Bradley Hand ITC';
  src: url('../fonts/BradleyHandITC.woff2') format('woff2'),
    url('../fonts/BradleyHandITC.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 800px) {
  .section-4cols .swiper-slide {
    position: unset;
    width: 25%;
    overflow: hidden;
    transform: scale(1);
    transition: 0.35s overflow;
    z-index: 2;
  }

  .section-4cols .swiper-slide:hover {
    overflow: visible;
    z-index: 1;
  }

  .section-4cols .swiper-slide:nth-child(1) {
    overflow: visible;
    z-index: 1;

  }

  /* .section-4cols .swiper-slide:nth-child(2) {
  overflow: visible; z-index: 2;
 
}
.section-4cols .swiper-slide:nth-child(3) {
  overflow: visible; z-index: 2;
 
}
.section-4cols .swiper-slide:nth-child(4) {
  overflow: visible; z-index: 2;
 
} */
  /* .section-4cols .background-image:has(.first).section-4cols .swiper-slide{
  overflow: hidden; z-index: 2;
} */

  .section-4cols .swiper-slide:not(:hover).swiper-slide {
    overflow: hidden;
    z-index: 3;
  }

  .section-4cols .swiper-slide:not(:hover).background-image {
    opacity: 0;
  }

  .section-4cols .swiper-slide:not(:hover).swiper-slide.first {
    overflow: visible;
    z-index: 2;
  }

  /* .section-4cols .swiper-slide:not(:hover).vis{opacity:1 !important} */
  .section-4cols .swiper-slide:nth-child(1) .background-image {
    opacity: 1
  }

  .section-4cols .swiper-slide:nth-child(2) .background-image {
    opacity: 0;
  }

  .section-4cols .swiper-slide:nth-child(3) .background-image {
    opacity: 0;
  }

  .section-4cols .swiper-slide:nth-child(4) .background-image {
    opacity: 0;
  }

  .section-4cols .swiper-slide:hover i {
    opacity: 0;
  }
}

@media (min-width: 800px) and (min-width: 800px) {

  .section-4cols .swiper-slide:hover p,
  .section-4cols .swiper-slide:hover a {
    height: auto;
    margin-bottom: 1rem;
    display: flex;
    opacity: 1;
  }
}

@media (min-width: 800px) {
  .section-4cols .swiper-slide:nth-child(1) .background-image {
    left: 0;
  }
}

@media (min-width: 800px) {
  .section-4cols .swiper-slide:nth-child(2) .background-image {
    left: -25vw;
  }
}

@media (min-width: 800px) {
  .section-4cols .swiper-slide:nth-child(3) .background-image {
    left: -50vw;
  }
}

@media (min-width: 800px) {
  .section-4cols .swiper-slide:nth-child(4) .background-image {
    left: -75vw;
  }
}

.section-4cols .background-image {
  position: absolute;
  height: 100%;
  width: 100vw;
  left: 0;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

@media (min-width: 800px) {
  .section-4cols .background-image {
    background-position: 0 50%;
    z-index: 1;
  }
}

.section-4cols .content {
  position: relative;
  height: 100%;
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 2;
  border-right: 1px solid #ffffff66;

}

.section-4cols .content h1 {
  font-weight: 300;
}

/*.links {
  display: flex;
  justify-content: normal;
  width: 100%;
  gap: 20%;
  margin-top: 10px;
}*/

.content .abc {
  padding: 3rem 1.5rem;
}

.content .abc.is-active {
  background-color: rgb(0 0 0 / 66%);
  -webkit-transition: background-color var(--base-transition) ease-out;
  transition: background-color var(--base-transition) ease-out;
  position: relative;
  height: 100%;
  display: flex;
  padding: 3rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 2;
}

@media (min-width: 800px) {
  .section-4cols .content {
    padding: 0;
  }
}

.section-4cols .content>i {
  flex: 2;
  display: flex;
  align-items: flex-end;
  font-size: 32px;
  opacity: 0;
  transition: 0.7s opacity;
}

.slider1 .swiper-pagination-bullet {
  border: 1.5px solid white;
  width: 26px;
  height: 7px;
  display: inline-block;
  border-radius: 35%;
}

@media (min-width: 800px) {
  .section-4cols .content>i {
    opacity: 1;
  }
}

.section-4cols .content>h2 {
  display: flex;
  align-items: flex-end;
}

.section-4cols .content p,
.section-4cols .content a {
  transition: 0.7s all;
  font-weight: 300;
  color: white;
}

.section-4cols .content a {
  font-weight: 400;
  color: white !important;
  text-decoration: none;
}

.links a {
  background: #4FBEED !important;
  color: white !important;
  border-radius: 63px;
  padding: 5px 10px;
}

@media (min-width: 800px) {

  .section-4cols .content p,
  .section-4cols .content a {
    height: 0;
    margin: 0;
    display: flex;
    opacity: 0;
    overflow: hidden;
    color: white
  }


}

@media (min-width: 800px) {
  .section-4cols.js-has-1-cols .swiper-slide {
    width: 100%;
  }
}

@media (min-width: 800px) {
  .section-4cols.js-has-2-cols .swiper-slide {
    width: 50%;
  }

  .section-4cols.js-has-2-cols .swiper-slide:nth-child(1) .background-image {
    left: 0;
  }

  .section-4cols.js-has-2-cols .swiper-slide:nth-child(2) .background-image {
    left: -50vw;
  }
}

@media (min-width: 800px) {
  .section-4cols.js-has-3-cols .swiper-slide {
    width: calc(100% / 3);
  }

  .section-4cols.js-has-3-cols .swiper-slide:nth-child(1) .background-image {
    left: 0;
  }

  .section-4cols.js-has-3-cols .swiper-slide:nth-child(2) .background-image {
    left: -33.33vw;
  }

  .section-4cols.js-has-3-cols .swiper-slide:nth-child(3) .background-image {
    left: -66.66vw;
  }
}

@media (max-width: 767px) {

  p {
    font-size: 18px;
  }

  .section-4cols .content h1 {
    display: none;
  }

  .section-4cols .background-image {
    display: none;
  }

  .section-4cols .background-image1 {
    position: absolute;
    height: 100%;
    width: 100vw;
    left: 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
  }

  .section-4cols .content {
    background: #0000008f;
  }

}

/* ----------------------- */
/* -----------servvice----------------------- */
.ser {
  text-align: center;
  box-shadow: -2px 8px 12px 2px #0000002b;
  padding: 24px;
  position: relative;
  top: -20px;
  z-index: 999;
  background: white;
  border-radius: 9px;
}

.ser a {
  color: #009ADB;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
}

.ser a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #009ADB;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.ser a:hover:before {
  width: 100%;
}

.ser a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

/*.upk-salf-slider-wrapper .upk-salf-item .upk-salf-image-wrap {
  height: 100%;
  width: 100%;
}*/

.bdt-timeline-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  margin-top: 0;
}

.upk-salf-slider-wrapper .upk-salf-item .upk-xanc-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.shapes {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  background: url(../images/banner-bg-shape-2.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 145px;
  z-index: 9;
}

.links {
  display: flex;
  justify-content: normal;
  width: 100%;
  gap: 16%;
  margin-top: 10px;
}

.slide-title .blk {
  background: #0000008f;
  padding: 10px 30px;
  margin-left: 15px;
  border-radius: 10px;
  width: auto;
}

.ser p {
  color: #5F5F61
}

@media (max-width: 767px) {
  .ser {
    top: 22px;
  }

}

/* --------------- */

/* Page Zoom Effect 23-08-2023 */
.scrool-nav {
  position: relative;
}

.bottom-0 {
  bottom: 0px;
}

.inner {
  min-height: 25vh;
  margin-left: 10vw;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

#img {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0.8;
  z-index: -1;
}

.content {
  background: linear-gradient(0deg, #000000ad, transparent);
  left: 0;
  right: 0;
  position: absolute;
}

#img-fixed {
  position: relative;
  left: 0px;
  width: 100% !important;
  opacity: 0;
  z-index: -1;
  right: 0px;
  bottom: 0px;
}

#img-fixed::before {
  content: "";
  background: #000;
}

/*#circle {background: url(../../assets/images/FS-Icon-logo.png) #fff;background-repeat: no-repeat;background-position: top; position: absolute;left: 0;right: 0;top: 0;bottom: 0;mix-blend-mode: screen;}*/


#circle {
  background: url(../../assets/images/FS-Icon-logo.png) #fff;
  background-repeat: no-repeat;
  background-position: top;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  mix-blend-mode: screen;
  background-size: 35%;
}


#knowmore {
  position: relative;
  left: 0px;
  right: 0px;
  top: 65%;
}

.aboutsection {
  background: #E0E8FF;
  padding: 80px 0px;
}

.aboutPic img {
  width: 100%;
}

.aboutsection p {
  margin-top: 20px;
  line-height: 34px;
}

.abouttext h3 {
  font-size: 50px;
  color: #152C72;
  line-height: 40px;
  position: relative;
  margin-top: 40px;
  padding-bottom: 15px;
}

.abouttext p {
  color: #3E4D68;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

.zoomabout {
  padding-bottom: 80px;
}

.zoomabout .leftheading span {
  color: #ffffff;
}

.zoomabout .leftheading h2 {
  color: #ffffff;
}

.zoomabout .leftheading strong {
  color: #ffffff;
  margin-bottom: 10px;
}

.zoomabout .leftheading strong b {
  color: #ffffff;
}

.zoomabout ul {
  padding: 0;
  margin: 30px 0px 0px;
}

.zoomabout .leftheading p {
  color: #ffffff;
}

/*.zoomabout ul li {list-style: none;display: inline-block;margin-right: 15px;padding-right: 15px;border-right: 1px solid #cdcccc;}
.zoomabout ul li:last-child{border-right: none;}
.zoomabout ul li span {display: block;margin: 0;padding: 0;color: #ffffff;font-size: 44px;line-height: 38px;font-weight: 500;}
.zoomabout ul li label {display: block;margin: 0;padding: 0;font-size: 20px;font-weight: 300;color: #ffffff;}
.zoomabout ul li span iconify-icon {color: #ffffff;font-size: 45px;vertical-align: top;margin-right: 5px;}*/

.fs-text {
  text-align: center;
}

.fs-text h3 {
  font-size: 50px;
}

.fs-text a {
  text-decoration: none;
  background: #219AD6;
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  display: inline-block;
  font-size: 16px;
  box-shadow: 0px 3px 4px #0000004f;
  position: relative;
}

.fs-zoomcontent strong {
  font-size: 20px;
  color: #fff;
  font-weight: 100;
}

.fs-zoomcontent h3 {
  font-size: 40px;
  color: #fff;
}

.fs-zoomcontent a {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  padding: 10px 20px 10px 35px;
  display: inline-block;
  line-height: 26px;
}

.fs-zoomcontent a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #ffffff;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.fs-zoomcontent a:hover:before {
  width: 100%;
}

.fs-zoomcontent a iconify-icon {
  font-size: 25px;
  position: absolute;
  top: 12px;
  left: 32px;
}

.fs-zoomcontent p.text-bold {
  font-size: 18px;
  color: #fff;
}

.fs-zoomcontent p {
  font-size: 16px;
  color: #fff;
}

.counter {
  text-align: center;
  color: #fff;
}

.counter ul {
  padding: 0;
  margin: 0;
}

.counter ul li {
  list-style: none;
  font-size: 40px;
  width: 40%;
  margin: 0px auto;
  padding: 10px 0;
}

.counter ul li span {
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  margin-right: 2px;
}

.counter ul li p {
  color: #ebebeb;
  text-transform: uppercase;
  font-size: 16px;
  margin: 5px 0px 0px;
  border-top: 1px solid #4FBEED;
  padding-top: 10px;
}

.partnerlogo {
  padding: 0px;
  margin: 0px;
}

.partnerlogo li {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}

.mobileabout {
  background: url(../../assets/images/who-we-are.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 50px 20px;
  position: relative;
  z-index: 9;
}

.mobileabout:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000cf;
  content: '';
  z-index: -1;
}

.mobileabout .fs-zoomcontent h3 {
  font-size: 25px;
  color: #fff;
}

.mobileabout .partnerlogo li img {
  width: 108px;
}

.mobileabout .partnerlogo {
  padding: 0px;
  margin: 20px 0px 0px;
}

.mobileabout .counter ul {
  padding: 0;
  margin: 10px 0px 0px;
  display: flex;
  gap: 10px;
}

.mobileabout .counter ul li {
  font-size: 15px;
  width: auto;
  display: inline-block;
  vertical-align: top;
  background: #000000c2;
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #a7a6a6;
}

.mobileabout .counter ul li span {
  font-size: 15px;
}

.mobileabout .counter ul li p {
  font-size: 8px;
}

/* -----------explore----------------------- */

.explore p {
  color: #5F5F61
}


.slider2>.swiper-pagination-bullets .swiper-pagination-bullet::before,
.slider2>.swiper-pagination-bullets .swiper-pagination-bullet,
[class^=swiper-button-] {
  transition: all 0.3s ease;
}


.slider2 {
  width: 100%;
  height: auto;
  transition: opacity 0.6s ease;
}

.slider2.slider2-coverflow {
  padding: 1% 0;
}

.slider2.loading {
  opacity: 0;
  visibility: hidden;
}

.slider2:hover .swiper-button-prev,
.slider2:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.slider2 .swiper-slide {
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  height: 68vh;
  border-radius: 28px;
  background-color: white;
  box-shadow: 5px 6px 12px #00000038;
}

.slider2 .swiper-slide .entity-img {
  display: none;
  border-radius: 30px;
}

.slider2 .swiper-slide .content p {
  height: 100%;
  margin-bottom: 1rem;
  display: flex;
  opacity: 1;
  min-height: 94px;
}

.slider2 .swiper-slide-active .content .para {
  height: 100%;
  margin-bottom: 1rem;
  display: flex;
  opacity: 1;
  min-height: 94px;
}

.slider2 .swiper-slide-active .content p {
  height: auto;
  margin-bottom: 1rem;
  display: flex;
  opacity: 1;
}

.slider2 .swiper-slide .content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7px 13px;
  color: #000000;
  background: #ededed;
  margin: 0 auto;
  transform: translate(0%, 0%);
  border-radius: 0;
}

.slider2-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -4px !important;
}

.slider2 .swiper-slide .content .title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 30px;
  text-align: center;
  padding-top: 11px;
  position: relative;
  color: black;
}

.slider2 .swiper-slide-active {
  height: 34vw
}

.slider2 .swiper-slide .content .caption {
  display: block;
  font-size: 12px;
  line-height: 1.4;
}


.slider2 .swiper-button-prev {
  transform: translateX(50px);
  --swiper-navigation-color: #4fbeed;
}

.slider2 .swiper-button-next {
  transform: translateX(-50px);
  --swiper-navigation-color: #4fbeed;
}


.slider-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #03A9F4;
  opacity: 0.4;
}

.slider-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}

.slider-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,
.slider2-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.slider2-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}

.slider2 a {
  color: #009ADB;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
}

.slider2 a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #009ADB;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.slider2 a:hover:before {
  width: 100%;
}

.slider2 a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.slider2 p {
  color: #5F5F61
}

.slider2 [class^=swiper-button-] {
  width: 44px;
  opacity: 1;
  visibility: visible;
}

.slider2 .swiper-button-next.swiper-button-disabled,
.slider2 .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  cursor: auto;
  pointer-events: none;
}

.slider2 .swiper-button-next,
.slider2 .swiper-button-prev {
  bottom: 50%;
  top: unset;
}

.slider2 .swiper-button-prev {
  left: -58px;
  top: unset;
}

.slider2 .swiper-button-next {
  right: -9%;
  top: unset;
}

.slider2 .swiper-pagination-bullets {
  bottom: 0px;
  left: 0;
  width: 100%;
}

@media (max-width: 767px) {

  .swiper-container .swiper-slide .entity-img {
    display: block;
    width: 100%;
  }

  .swiper-container .swiper-slide-active {
    height: 100%;
    /* margin-left: 10px; */
  }

  .swiper-container .swiper-slide .content {
    position: relative;
  }

  .slider2 .swiper-button-prev,
  .slider2 .swiper-button-next {
    display: none
  }

}

.upk-salf-slider-wrapper .upk-salf-item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.text-bg {
  bottom: 24%;
  position: absolute;
  z-index: 99;
  color: white;
  height: 100%;
  display: flex;
  white-space: nowrap;
  justify-content: start;
  align-items: end;
  width: 100%;
}

/*.upk-salf-slider-wrapper .upk-salf-item .upk-salf-image-wrap {
  height: 100%;
  width: 100%;
}*/

/* -----------------solution------------------------------------------------------ */

.slider3 .swiper-scrollbar {

  background: #ccc;
  height: 7px !important;
  width: 94%;
}

/*.cards::-webkit-scrollbar-thumb {
background: #FF9800;
}*/

.slider3 .swiper-scrollbar::-webkit-scrollbar-track {
  background: #FF9800;
}

.slider3 .swiper-scrollbar::-webkit-scrollbar {
  height: 12px;
}
/*
.upk-salf-slider-wrapper .upk-salf-item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.cards::-webkit-scrollbar-thumb,
.cards::-webkit-scrollbar-track {
border-radius: 92px;
}*/
.slider3 .swiper-container-horizontal>.slider3 .swiper-scrollbar {
  border-radius: 2px;
  height: 5px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

}

.cards {
  display: flex;
  padding: 25px 0px;
  list-style: none;
  /* overflow-x: scroll; */
  scroll-snap-type: x mandatory;
}

.sliderr {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.slider3 .swiper-scrollbar-drag {
  background: #009ADB;
}



.container_foto {
  background-color: rgba(57, 62, 93, 0.7);
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0px;
  position: relative;
  border-radius: 6px;
}

.container_foto article {
  padding: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 2.8s ease;
  display: flex;
  width: 100%;

}

.container_foto h2 {
  color: #fff;
  font-size: 17px;

}

.container_foto h4 {
  font-weight: 300;
  color: #fff;
  font-size: 16px;
}

.container_foto:hover h2 {
  color: white;
  font-size: 25px;
}

.container_foto img {
  width: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -o-transition: all 4s ease;
  -ms-transition: all 4s ease;
  transition: all 9s ease;
}

.ver_mas {

  opacity: 0;
  transform: translate(0px, 70px);
  -webkit-transform: translate(0px, 70px);
  -moz-transform: translate(0px, 70px);
  -o-transform: translate(0px, 70px);
  -ms-transform: translate(0px, 70px);
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 1.6s ease-in-out;
  display: none;
}

.ver_mas a {
  font-size: 18px;
  color: #fff;
  position: relative;
  margin: 10px auto;
  width: 100%;
  padding: 10px 10px 10px 68px;
  transition: all 8s ease;
  cursor: pointer;
  border-bottom: 0;
  text-decoration: none;
}


/*hovers*/

.container_foto:hover {
  cursor: pointer;
}

.container_foto:hover img {
  opacity: 0.6;
  transform: scale(1.5);
  filter: grayscale(1);
}

.container_foto:hover article {
  height: 100%;
  transform: translate(10px, -3px);
  -webkit-transform: translate(0px, -3px);
  -moz-transform: translate(2px, -69px);
  -o-transform: translate(2px, -69px);
  -ms-transform: translate(2px, -69px);

}

.container_foto:hover .ver_mas {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0, 20px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  opacity: 1;
  display: block;
}

.container_foto:hover .divi {
  top: 0;
  background: #000000ba;
}

.divi {
  width: 100%;
  align-items: center;
  display: flex;
  padding: 20px;
  position: relative;
  top: calc(100% - 12px);
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.8s ease;
  box-shadow: inset 0px -48px 20px 6px black;
}

.container_foto:hover h2 {
  font-size: 17px;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0, 15px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
}

.container_foto:hover .red1 {
  color: #FF4300;
}

.ver_mas p {
  color: white;
  font-weight: 300;
  font-size: 14px;
}

a {
  color: #1153FF;
  text-decoration: none;
 /* position: relative;
  display: inline-block;
  line-height: 26px;*/
}

.read:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 1px solid #ffffff;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.read:hover:before {
  width: 92%;
}

.container_foto:hover .brd {
  padding: 10px;
}

.read svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.container_foto:hover .divi .brd:before {
  content: "";
  display: block;
  width: 91%;
  background-color: #ffffff;
  height: 0.5px;
  margin-bottom: 12px;
  position: absolute;
  left: 0;
  top: 22px;
}

.container_foto:hover .divi .brd:after {
  content: "";
  display: block;
  height: 95%;
  margin-bottom: 12px;
  position: absolute;
  left: 16px;
  border-left: 0.3px solid #bfb8b8;
  top: 0;
}

.swiper-container-horizontal>.swiper-scrollbar {
  border-radius: 2px;
  height: 5px;
  width: 200px;
  bottom: 0;
  left: 49%;
  transform: translateX(-51%);

}

.slider3 .swiper-scrollbar {

  background: #ccc;
  height: 7px !important;
  width: 94%;
}

/*.cards::-webkit-scrollbar-thumb {
background: #FF9800;
}*/

.slider3 .swiper-scrollbar::-webkit-scrollbar-track {}

.slider3 .swiper-scrollbar::-webkit-scrollbar {
  height: 12px;
}

.cards::-webkit-scrollbar-thumb,
.cards::-webkit-scrollbar-track {
  border-radius: 92px;
}

.slider3 .swiper-button-next:after,
.slider3 .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: 17px;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  font-weight: bolder;
  color: #2196F3;
}

.slider3 .swiper-scrollbar-drag {}

.slider3 .swiper-button-prev {
  bottom: -6px;
  top: unset;
  right: 20px;
  left: unset;
  height: unset;
}

.slider3 .swiper-button-next {
  bottom: -6px;
  top: unset;
  right: 0;
  left: unset;
  height: unset;
}

.phsolutions {
  padding: 10px
}

/*  */
.desk .phsolutions ul {
  padding: 0;
  width: 100%;
  position: relative;
  display: flex;
  height: 100%;
  grid-template-rows: 353px;
  justify-content: center;
}

.desk .phsolutions ul li {
  list-style: none;
  max-width: 100%;
  max-height: 253px;
  border-radius: 80%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 16px;
  gap: 7px;
  position: relative;
  height: 212px;
  width: 100%;
  min-height: 200px;
}

.desk .phsolutions ul li:nth-child(1) {
  background-image: linear-gradient(83deg, #308fe1, #527485);
  z-index: 9;
  animation: scrolldown 10s ease infinite;
}

.texttrans h3 {
  font-family: 'Bradley Hand ITC';
  font-weight: bolder;
  text-align: center;
  font-size: 29px;
  margin-top: 43px;
  margin-bottom: 0;
}

.texttrans h3 span {
  color: #EF7F1A;
}

.texttrans h6 {
  font-family: 'Bradley Hand ITC';
  font-weight: bolder;
  text-align: center;
  font-size: 29px;
  margin-top: 43px;
  margin-bottom: 0;
}

.texttrans h6 span {
  color: #EF7F1A;
}
/*@keyframes scrolldown {
  0% {
    transform: translateY(20%);
    opacity: 1;
  }

  50% {
    transform: translateY(0%);
    opacity: 1;
  }

  100% {
    transform: translateY(20%);
    opacity: 1;
  }
}

@keyframes scrollup {
  0% {
    transform: translateY(-30%);
    opacity: 1;
  }

  50% {
    transform: translateY(10%);
    opacity: 1;
  }

  100% {
    transform: translateY(-30%);
    opacity: 1;
  }
}
*/
.desk .phsolutions ul li:nth-child(2) {
  background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
  z-index: 9;
  left: -2%;
  top: 47px;
  animation: scrollup 13s ease infinite;
}

.desk .phsolutions ul li:nth-child(3) {
  background-image: linear-gradient(86deg, #0077B9, #013162);
  left: -3%;
  animation: scrolldown 10s ease infinite;
}

.desk .phsolutions ul li:nth-child(4) {
  background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
  z-index: 9;
  animation: scrollup 13s ease infinite;
  left: -4%;
  top: 47px;
}

.desk .phsolutions ul li:nth-child(5) {
  background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
  z-index: 9;
  left: -5%;
  animation: scrolldown 10s ease infinite;
}

.desk .phsolutions ul li:nth-child(6) {
  background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
  left: -6%;
  animation: scrollup 13s ease infinite;
  top: 47px;
}

.desk .phsolutions ul.three li:nth-child(1) {
  background-image: linear-gradient(86deg, #06B6D4, #a77f53);
  z-index: 9;
  animation: scrolldown 15s ease infinite;
}

.desk .phsolutions ul.three li:nth-child(2) {
  background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
  z-index: 9;
  left: 31%;
  top: 24px;
  animation: scrollup 13s ease infinite;
}

.desk .phsolutions ul.three li:nth-child(3) {
  background-image: linear-gradient(45deg, #31160e, #0dcaf0);
  left: 63%;
  animation: scrolldown 13s ease infinite;
}

.desk .phsolutions ul li a {
  color: white;
  text-decoration: none;
  position: relative;
  display: inline-block;
  line-height: 25px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
  font-weight: 500;
  margin-bottom: 10px;
}
.desk .phsolutions ul li a h3{
  color: white;
  text-decoration: none;
  position: relative;
  display: inline-block;
  line-height: 25px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
  font-weight: 500;
  margin-bottom: 10px;
}
/* ----- */
.phsolutions .expbtn {
  width: 23px !important;
  height: 23px !important;
  color: #1153FF !important;
  animation: unset;
  align-items: center;
  display: flex !important;
  bottom: -2px;
}

@media (max-width: 767px) {
  .mob .phsolutions ul {
    padding: 0;
    width: 100%;
    position: relative;
    display: grid;
    /* height: 33vh; */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 353px;
  }

  .mob .phsolutions ul li {
    list-style: none;
    max-width: 127px;
    max-height: 127px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .mob .phsolutions ul li:nth-child(1) {
    background-image: linear-gradient(83deg, #308fe1, #527485);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
  }

  .texttrans h3 {
    font-family: 'Bradley Hand ITC';
    font-weight: bolder;
    text-align: center;
    font-size: 29px;
    margin-top: 0px;
    margin-bottom: 0;
  }

  .texttrans h3 span {
    color: #EF7F1A;
  }

  @keyframes scrolldown {
    0% {
      transform: translateY(20%);
      opacity: 1;
    }

    50% {
      transform: translateY(0%);
      opacity: 1;
    }

    100% {
      transform: translateY(20%);
      opacity: 1;
    }
  }

  @keyframes scrollup {
    0% {
      transform: translateY(-30%);
      opacity: 1;
    }

    50% {
      transform: translateY(10%);
      opacity: 1;
    }

    100% {
      transform: translateY(-30%);
      opacity: 1;
    }
  }

  .mob .phsolutions ul li:nth-child(2) {
    background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(3) {
    background-image: linear-gradient(86deg, #0077B9, #013162);
    left: 63%;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(4) {
    background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul li:nth-child(5) {
    background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
    z-index: 9;
    left: 31%;
    top: 58%;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(6) {
    background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
    left: 63%;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul.three li:nth-child(1) {
    background-image: linear-gradient(86deg, #06B6D4, #a77f53);
    z-index: 9;
    animation: scrolldown 15s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(2) {
    background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(3) {
    background-image: linear-gradient(45deg, #31160e, #0dcaf0);
    left: 63%;
    animation: scrolldown 13s ease infinite;
  }

  .mob .phsolutions ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }
	  .mob .phsolutions ul li a h3 {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .mob .phsolutions ul li a.expbtn {
    width: 23px !important;
    height: 23px !important;
    color: #1153FF;
    animation: unset;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: -2px;
  }

  .slider3 .swiper-scrollbar {
    background: #ccc;
    height: 7px !important;
    width: 76%;
    display: flex;

    position: relative;
  }

  .phsolutions ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .phsolutions ul li {
    list-style: none;
    max-width: 135px;
    max-height: 135px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

/* ------------------------------------ add banner close--------------------------------- */
/* ----------------------------achhivements------------------------------------- */

.achive {
  position: relative;
}

.scroll-animation-all-wrapper {
  position: relative;
  padding: 30px 0;
}

.scroll-animation-all-wrapper::before {
  top: 0;
  left: 0;
}

.scroll-animation-all-wrapper::before,
.scroll-animation-all-wrapper::after {
  position: absolute;
  height: 100%;
  width: 300px;
  background: linear-gradient(90deg, #fff 100px, rgba(255, 255, 255, 0));
  z-index: 2;
  content: "";
}

.scroll-animation-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.scroll-animation.scroll-right-left {
  -webkit-animation: scroll 80s linear infinite;
  -moz-animation: scroll 80s linear infinite;
  animation: scroll 80s linear infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.scroll-animation {
  display: flex;
  width: -webkit-calc((420px * 16) + (30px * 16));
  width: -moz-calc((420px * 16) + (30px * 16));
  width: 7200px;
  position: relative;
}

.rbt-categori-list {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}

.rbt-categori-list a {
  border: 0 none;
  padding: 10px 15px;
  text-transform: capitalize;
  background: white;
  color: #6b7385;
  box-shadow: 0px 6px 34px rgb(215 216 222);
  height: 120px;
  border-radius: 9px;
  letter-spacing: inherit;
  transition: 0.4s;
  display: inline-block;
  min-width: 100px;
  transition: 0.4s;
  text-align: center;
}

.mt--30 {
  margin-top: 30px
}

.scroll-animation-all-wrapper::after {
  top: 0;
  right: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.scroll-animation-all-wrapper::before,
.scroll-animation-all-wrapper::after {
  position: absolute;
  height: 100%;
  width: 300px;
  background: linear-gradient(90deg, #fff 100px, rgba(255, 255, 255, 0));
  z-index: 2;
  content: "";
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

@-moz-keyframes scroll {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

.scroll-left-right {
  -webkit-animation: scrollLeft 80s linear infinite;
  -moz-animation: scrollLeft 80s linear infinite;
  animation: scrollLeft 80s linear infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes scrollLeft {
  0% {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }

  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes scrollLeft {
  0% {
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }

  to {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes scrollLeft {
  0% {
    -webkit-transform: translateX(-webkit-calc(-250px * 7));
    -moz-transform: translateX(-moz-calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }

  to {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

.rbt-categori-list a img {
  height: 102px;
}


/* Let's */
.subs {
  background-color: #141414;
  padding: 20px 0;
}

.subs h3 {
  color: white
}

.subs p {
  color: white
}

.subs-row .end {
  text-align: right;
}


@media screen and (min-width:300px) and (max-width:766px) and (-webkit-min-device-pixel-ratio:1.50) {

  .ser {
    z-index: 9 !important
  }
}

/* ----------------------------------------------------------------------------------------------------------- */
.explore {
  background: url(../images/bulb/bga.png);
  background-position: right bottom;
  background-size: cover;

}

.contnt p {
  text-align: justify;
}

.two-part-title h2 {
  font-size: 32px;
  font-family: 'General Sans';
  font-weight: 600;
}

.two-part-title h2 .highlighterbg1 {
  color: #1153FF;
}
.two-part-title h1.enterpriseheading {
  font-size: 32px;
  font-family: 'General Sans';
  font-weight: 600;
}

.two-part-title h1.enterpriseheading .highlighterbg1 {
  color: #1153FF;
}
.two-part-title-wrapper .two-part-title {
  position: relative;
}

span.highlighterbg {
  background: url(../images/bulb/highlighter.png);
  background-size: 54%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 9;
  display: inline-block;
  background-position: 101%;
  padding: 0px 3px;
  font-size: 20px;
  font-weight: 800;
}

.buttonall a {
  color: #1153FF;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
  font-weight: 700;
}

.buttonall a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 3px solid #1153FF;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  background: #1153ff38;
}

.buttonall a:hover:before {
  width: 100%;
  z-index: -1;
}

.buttonall a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

.btnal {
  display: flex;
  gap: 20px;
}

.buttonall2 a {
  color: #EF7F1A;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
}

.buttonall2 a:before {
  content: "";
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 3px solid #ef7f1a8c;
  border-radius: 50px;
  position: absolute;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  background: #fbeee2;
}

.buttonall2 a:hover:before {
  width: 100%;
  z-index: -1;
}

.buttonall2 a svg {
  font-size: 21px;
  position: absolute;
  left: 34px;
}

/* ---------------enterprise----------------- */

.animation-container {
  width: 100%;
  height: 100%;
  margin: 18px auto;
  position: relative;
  -webkit-animation: fadeIn 0.2s ease-out both;
  animation: fadeIn 0.2s ease-out both;
  overflow: hidden;
}

.animation-container:after,
.animation-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://unitienda.net/demo/finalis/wp-content/uploads/2021/06/dots.png") 30% 0 no-repeat;
  background-size: 18%;
  z-index: -1;
}

.animation-container:before {
  background-position: 80% 100%;
}

.animation-container img {

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

  object-fit: cover;

  max-height: 180px;
}

.animation-container .circle {
  border-radius: 100%;
  position: absolute;
}

.animation-container .circle:nth-child(1) {
  border: 2px dashed transparent;
  background: #d6d3f8;
  left: 10%;
  top: 1%;
  width: 10vw;
  height: 10vw;
  -webkit-animation: bg-pulse 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-pulse 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(2) {
  border: 2px dashed #ef7f1a2b;
  background: transparent;
  left: 0%;
  top: 67%;
  width: 10vw;
  height: 10vw;
  -webkit-animation: bg-rotation 22s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-rotation 22s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  border-radius: 0;
}

.animation-container .circle:nth-child(3) {
  border: 2px dashed transparent;
  background: #cccedd;
  left: 52%;
  top: 0%;
  width: 5vw;
  height: 5vw;
  -webkit-animation: bg-pulse 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-pulse 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(4) {
  border: 2px dashed #d6d3f8;
  background: transparent;
  left: 1%;
  top: 1%;
  width: 46vw;
  height: 46vw;
  -webkit-animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(6) {
  border: 2px dashed #d6d3f8;
  background: transparent;
  left: 54%;
  top: 65%;
  width: 45vw;
  height: 45vw;
  -webkit-animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-rotation 23s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .circle:nth-child(5) {
  border: 2px dashed transparent;
  background: #ccecfc;
  left: 97%;
  top: 20%;
  width: 6vw;
  height: 6vw;
  -webkit-animation: bg-pulse 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
  animation: bg-pulse 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) both infinite;
}

.animation-container .cursor {
  -webkit-animation: scaleInUp 0.7s ease-in-out 5.5s both;
  animation: scaleInUp 0.7s ease-in-out 1.5s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  right: -15px;
  position: relative;
  width: 50%;
}

.animation-container .cursor .rotateCursor {
  transform: rotateY(180deg);
  transform-origin: center center;
}

.animation-container .dashboard {

  -webkit-animation: scaleInCenter 1s ease-in-out;

  animation: scaleInCenter 1s ease-in-out;

  width: 46%;

  position: relative;

  overflow: hidden;

  border-radius: 100px;
}

.animation-container .dashboard img {

  border-radius: 113px;

  height: 180px;
}

.animation-container .dashboard1 {

  -webkit-animation: scaleInCenter 1s ease-in-out;

  animation: scaleInCenter 1s ease-in-out;

  position: relative;

  width: 51%;

  left: -10px;

  top: -20px;

  overflow: hidden;
}

.animation-container .dashboard1 img {}

.animation-container .activity {

  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;

  animation: scaleInUp 0.7s ease-in-out 0.7s both;

  left: -10px;

  position: relative;

  top: -15px;

  width: 50%;

  overflow: hidden;
}


.animation-container .compliance {

  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;

  animation: scaleInUp 0.7s ease-in-out 1.5s both;

  -webkit-animation-direction: alternate;

  animation-direction: alternate;

  width: 52%;

  overflow: hidden;

  right: -10px;

  position: relative;
}

.animation-container .compliance1 {

  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;

  animation: scaleInUp 0.7s ease-in-out 1.5s both;

  -webkit-animation-direction: alternate;

  animation-direction: alternate;

  width: 44%;

  border-radius: 138px;

  overflow: hidden;

  right: -8px;

  position: relative;

  top: -12px;
}

.animation-container .compliance1 img {}

.animation-container .compliance .bottom-link,
.animation-container .compliance .title {
  -webkit-animation: fadeInRight 0.3s ease-in-out 1.5s both;
  animation: fadeInRight 0.3s ease-in-out 1.5s both;
}

.animation-container .compliance .text-step {
  -webkit-animation: fadeInUp 0.3s ease-in-out 4.7s both;
  animation: fadeInUp 0.3s ease-in-out 4.7s both;
}

.animation-container .compliance .progress-bar {
  -webkit-animation: fadeInUp 0.3s ease-in-out 4.9s both;
  animation: fadeInUp 0.3s ease-in-out 4.9s both;
}

.animation-container .compliance .progress-bar .bar {
  width: 0;
  -webkit-animation: progressBar 1s ease-in 5.3s both;
  animation: progressBar 1s ease-in 5.3s both;
}

.animation-container .compliance .button-blue {
  -webkit-animation: fadeInUp 0.3s ease-in-out 5.1s both;
  animation: fadeInUp 0.3s ease-in-out 5.1s both;
}

@-webkit-keyframes bg-pulse {
  50% {
    transform: scale(0.7) translatey(5%);
  }
}

@keyframes bg-pulse {
  50% {
    transform: scale(0.7) translatey(2%);
  }
}

@-webkit-keyframes bg-rotation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bg-rotation {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes progressBar {
  to {
    width: 177px;
  }
}

@keyframes progressBar {
  to {
    width: 177px;
  }
}

@-webkit-keyframes flipVertical {
  from {
    transform: rotateY(90deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

@keyframes flipVertical {
  from {
    transform: rotateY(90deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

@-webkit-keyframes showBubble {
  from {
    transform: rotate(15deg) translatey(10px);
    opacity: 0;
  }
}

@keyframes showBubble {
  from {
    transform: rotate(15deg) translatey(10px);
    opacity: 0;
  }
}

@-webkit-keyframes scaleInCenter {
  0% {
    transform: translate(00%, -00%) scale(0.8);
    opacity: 0.2;
  }

  100% {
    transform: translate(-0%, -00%) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes scaleInUp {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleInUp {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translatey(10px);
  }

  to {
    opacity: 1;
    transform: translatey(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translatey(10px);
  }

  to {
    opacity: 1;
    transform: translatey(0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translatex(-10px);
  }

  to {
    opacity: 1;
    transform: translatex(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translatex(-10px);
  }

  to {
    opacity: 1;
    transform: translatex(0);
  }
}

@-webkit-keyframes cursor {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  10%,
  20% {
    left: 23%;
  }

  50%,
  90% {
    top: 45%;
    left: 33%;
  }

  100% {
    opacity: 1;
    left: 33%;
  }
}

.black {
  text-align: center;
  background: #000;
  background-blend-mode: multiply;
  color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
  z-index: 1;
  top: 0;
}

.imgtitle {
  color: #fff;
  font-size: 20px;
  align-self: center;
  position: absolute;
  z-index: 10;
  display: flex;
  top: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  padding: 10px;
  text-align: center;
  align-items: center;
  flex-flow: column;
  gap: 28px;
}

.expbtn {
  background: white;
  border-radius: 55%;
  transform: rotate(45deg);
  color: #1153FF;
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  position: absolute;
  bottom: 8px;
}

.imgtitle p {
  color: white;
  margin-bottom: -15px;
  font-weight: 300;
}

.black,
.imgtitle {
  transition: opacity .3s;
}

.thumbnails img:hover {
  cursor: pointer;
  z-index: 1;
}

.thumbnails img:hover .black,
.thumbnails img:hover .imgtitle {
  opacity: 0;
}

.thumb {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
}

/* -----------------------------ecom--------------- */

body {
  /* background: url('../images/bulb/bulb1.png'); */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right;
}

/* ----------------------------ecom-------------------------------- */

.cardmain {
  height: 100%;
  width: 100%;
  padding: 0rem 0;
  display: grid;
  place-content: flex-start;

}

.touc {
  font-size: 24px;
}

.expor .texttrans h3 {
  margin-top: 10px;
}

.touc span {
  color: #EF7F1A
}

.cardmain .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  pointer-events: none;
}

.cardmain .card {
  max-width: 18rem;
  color: #ffffffda;
  padding: 1.5rem;
  background-color: #202022;
  pointer-events: auto;
  transform: scale(1);
  opacity: 1;
  transition: all 150ms ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 19px;
  gap: 10px;
  transform-origin: top center;
  animation: swing 7s ease-in-out infinite;
  position: relative;
  max-height: 81vh;
  overflow: hidden;
}

.cardmain .card div {
  margin-bottom: 10px;
}

@keyframes swing {
  20% {
    transform: rotate(2deg);
  }

  40% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(-2deg);
  }

  80% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}

.cardmain .card .card-title {
  position: relative;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.cardmain .card p {
  color: white;
  font-size: 16px;
  margin-bottom: 4px;
  text-align: center;
}


.cardmain .expbtn {}

.cardmain .card .card-title::before {
  content: "";
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 3px #bb86fc;
  background-color: transparent;
  position: absolute;
  right: 0;
}

.cardmain .card .description {
  font-size: 0.9rem;
}

.cardmain .card:nth-child(even) {
  transform: translateY(16px);
}

.cardmain .card:nth-child(n) {
  transform: rotate(-3deg);
}

/* 
.cardmain .cards:hover > .card:nth-child(n):hover {
  transform: scale(1.45);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transform: translate(27%) scale(1.5);
    
}
.cardmain .cards:hover > .card:nth-child(even):hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
    transform: translate(-27%) scale(1.5);
}
.cardmain .cards:hover > .card:not(:hover) {
  opacity: 0.5;
} */
.cardmain .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: -1;
  border-radius: 14px;
}

.cardmain .card-one::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
}

.card-two::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
}

.card-three::before {
  background: url(../images/bulb/cms-bg-home.webp);
  background-position: center;
  background-size: contain;
}

.card-four::before {
  background: url(../images/bulb/digital-marketing-bg-home.webp);
}

.card-five::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
  background-size: contain;
}

.card-six::before {
  background: url(../images/bulb/enterprise-solution-bg-home.webp);
  background-size: contain;
}

.subhead {
  color: #01376c;
  margin-top: 8px;
  letter-spacing: 2px;
}

.subhead h3 {
  font-size: 16px;
}

/* --------------------------------- */
:root {
  --background-color: white;
  --gap: 0.5rem;
  --hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.mood-board {
  aspect-ratio: 2/1;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(14, 1fr);
  grid-template-areas: "b1 b1 b1 b1 b1 b1 b1 tx tx tx tx tx tx tx" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b6 b6 b6 b6 b6 b6 b6";
  grid-gap: var(--gap);
}

.mood-board .block-1 .textone .expbtn {
  margin-top: 10px;
  top: unset;
}

[class^=block-]>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.block-1 {
  grid-area: b1;
  border-radius: 10px;
  background-image: url(../images/bulb/Visual-Commerce.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
  animation: scaleInUp 0.4s ease-in-out 0.5s both;
  background-size: cover;
  background-color: #cee8f7;
  background-position: top;
}

.block-1 .textone {
  justify-content: flex-start;
  padding-bottom: 30px;
  text-align: center;
  align-items: flex-start;
}

.block-1 .textone h3 {
  color: black;
  font-weight: 700;
}

.block-2 {
  grid-area: b2;
  background: #ccff9d;
  border-radius: 10px;
  border-radius: 10px;
  background-image: url(../images/bulb/shopify-home.gif);
  background-repeat: no-repeat;
  background-size: 109%;
  -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
  animation: scaleInUp 0.4s ease-in-out 0.5s both;
  /* -webkit-animation-direction: alternate; */
  /* animation-direction: alternate; */
  background-position: 27%;
}

.block-2 .textone {
  align-items: end;
  justify-content: space-between;
}

.block-3 {
  grid-area: b3;
  border-radius: 10px;
  background-image: url(../images/bulb/Magento-Commerce.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
  animation: scaleInUp 0.3s ease-in-out 1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-size: 68%;
  background-position: right;
  background-color: #f0eacc;
}

.block-3 .textone {
  align-items: end;
}

.block-4 {
  grid-area: b4;
  border-radius: 10px;
  background-image: linear-gradient(179deg, #b3e4f9 0%, rgb(252 253 254) 35%, #f2ebcd 50%);
  /* background: url(../images/bulb/headless-eCommerce.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
  animation: scaleInUp 0.3s ease-in-out 1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-position: top;*/
  background-size: 100%;
}

.block-4 .textone {
  /* background-image: linear-gradient(194deg, #45737c 0%, rgb(255 255 255 / 84%) 35%, #5ed6ef 100%); */
  border-radius: 10px;
  background: url(../images/bulb/headless-eCommerce.gif);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
  animation: scaleInUp 0.3s ease-in-out 1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-position: -158% 75%;
  background-size: 98%;
  justify-content: end;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
  animation: scaleInUp 0.3s ease-in-out 1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-position: -158% 75%;
  background-size: 98%;
  justify-content: end;
}

.block-4 .textone h3 {
  color: black;
  font-weight: bold;
  font-size: 19px;
  margin-bottom: -3px;
  text-align: center;
}

.block-6 {
  grid-area: b6;
  border-radius: 10px;
  /* background: url(../images/bulb/bigcommerce.png); */
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: scaleInUp 0.4s ease-in-out 1.1s both;
  animation: scaleInUp 0.4s ease-in-out 1.1s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-color: #ecf1f7;
  background-position: center 15%;
  background-size: 23%;
}

.block-6 img {
  width: 100%;
  margin: 0 auto;
  /* height: 150px; */
  border-radius: 10px;
}

.block-6 .textone {
  align-items: end;
  height: 183px;
  justify-content: start;
  padding: 0;
}

.block-6 .textone h3 {}


.color-1 .textone {
  /* background-image: linear-gradient(194deg, rgb(174 169 255) 0%, rgb(252 252 255 / 0%) 35%, rgb(0 212 255 / 14%) 100%); */
  border-radius: 10px;
}

.color-1 .textone h3 {
  position: absolute;
  top: 20px;
  color: black;
  font-weight: 600;
}

.block-5 {
  grid-area: tx;
  border-radius: 10px;
  -webkit-animation: scaleInUp 0.6s ease-in-out 1.3s both;
  animation: scaleInUp 0.6s ease-in-out 1.3s both;
  /* -webkit-animation-direction: alternate; */
  /* animation-direction: alternate; */
  background-image: url(../images/bulb/WooCommerce.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #150d1f;
  background-position: 0% 0%;
  position: relative;
}

.block-5 .textone {
  align-items: end;
  height: 167px;
  justify-content: unset;
  position: relative;
}

.block-5 .textone h3 {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translate(-40%, 42%);
  font-weight: bolder;
  font-size: 32px;
}

.textone {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  padding: 10px;
  gap: 4px;
  text-align: center;
}

.textone h3 {
  color: white;
  font-size: 22px;
  font-weight: 600 !important;
}
.textone .ecom-heading {
  color: #000;
  font-size: 22px;
  font-weight: 600 !important;
}

.text {
  overflow: hidden;
  background-color: black;
  grid-area: tx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  color: white;
  text-transform: uppercase;
  font-size: 5vw;
  letter-spacing: 0.125em;
}

.hexagon {
  background-color: var(--background-color);
  grid-column: 7 / span 2;
  grid-row: 3 / span 2;
  clip-path: var(--hexagon);
  padding: var(--gap);
  border-radius: 10px;
  -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;
  animation: scaleInUp 0.7s ease-in-out 1.5s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  width: 300px;
  height: 300px;
}

.hexagon .textone {
  padding: 0;
  border-radius: 10px;
  justify-content: flex-end;
  padding-bottom: 24px;
}

.hexagon__interior {
  height: 100%;
  background-color: #000000;
  clip-path: var(--hexagon);
  padding: 0;
  background-image: url(../images/bulb/virtual-tryon.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.hexagon .textone h3 {
  font-weight: 800;
  /* display: none; */
}

/* --------------------------wfm--------------- */

.contnt p.make {
  font-family: 'Bradley Hand ITC';
  font-weight: bolder;
  text-align: center;
  font-size: 25px;
  margin-top: 43px;
  margin-bottom: 15px;
  text-align: center;
}

.contnt p.make span {
  color: #EF7F1A
}

.d-fleximg {
  display: flex;
  justify-content: space-between;
}

/* --------risk------------------------- */

.card-stack {
  width: 92%;
  min-height: max-content;
  position: relative;
  margin: 20px auto;
  margin-bottom: 271px;
  max-height: 112vh;
/*  height: 97vh;*/
	 height: 84vh;
}

.card-stack .buttons {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.46);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  left: 0;
  top: 55%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 35px;
  text-decoration: none;
  font-size: 22px;
  z-index: 100;
  outline: none;
  transition: all 0.2s ease;
}

.card-stack .buttons:hover {
  transform: scale(1.3, 1.3);
}

.card-stack .prev {
  left: 15px;
  right: auto;
}

.card-stack .next {
  left: auto;
  right: 15px;
}

.card-stack .carousel .buttons:hover {
  color: #C01313;
  background: #fff;
}

.card-stack .riskcard-list {
  width: 100%;
}

.card-stack .riskcard-list li img {}

.card-stack .riskcard-list li p {
  color: black;
  font-weight: 600;
  margin-top: 20px;
}

.card-stack .riskcard-list li {
  transition: all 86ms ease-in-out;
  border-radius: 2px;
  position: absolute;
  list-style: none;
  height: 100%;
  -webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px 25px;
  text-align: left;
  background-size: cover;
  border-radius: 22px;
  animation-name: slideFromBottom;
  -webkit-animation-name: slideFromBottom;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes slideFromBottom {
  0% {
    opacity: 1;
    -webkit-transform: translateY(6%);
    -moz-transform: translateY(6%);
    -ms-transform: translateY(6%);
    -o-transform: translateY(6%);
    transform: translateY(6%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    display: block;
  }
}


.card-stack .riskcard-list li:nth-child(1) {
  top: 0;
  /* width: 92%; */
  /* animation: scaleCard 100ms; */
}

.onen {
  background-image: linear-gradient(175deg, #0A85ED, #E4F2FF);
  border: 1px solid #fff;
}

.card-stack .riskcard-list li:nth-child(2) {
  top: 60px;
  /* width: 70%; */
}

.twon {
  border: 1px solid white;
  background-image: linear-gradient(175deg, #0C63E7, #E4EFFF);
}

.titlerisk {
  display: flex;
  justify-content: space-between;
  font-size: 19px;
  font-weight: 600;
  color: white;
  padding-bottom: 15px;
}

.titlerisk span {
  font-size: 16px;
  font-weight: 500;
}

.card-stack .riskcard-list li:nth-child(3) {
  top: 120px;
  /* width: 80%; */
}

.threen {
  border: 1px solid #fff;
  background-image: linear-gradient(175deg, #0D41E1, #E6ECFE);
}

.card-stack .riskcard-list li:nth-child(4) {
  top: 180px;
  /* width: 90%; */
}

.fourn {
  border: 1px solid #fff;
  background-image: linear-gradient(175deg, #002DB6, #E4EFFF);
}

.card-stack .riskcard-list li:nth-child(5) {
  top: 240px;
  width: 100%;
}

.card-stack .riskcard-list li:nth-child(5) .titlerisk span {
  display: none;
}

.fiven {
  background-image: linear-gradient(175deg, #00238E, #CDD8F7);
  border: 1px solid #fff;
}

.card-stack:hover>.buttons.prev {
  display: block;
  animation: bounceInLeft 200ms;
}

.card-stack:hover>.buttons.next {
  display: block;
  animation: bounceInRight 200ms;
}

.transformThis {
  animation: scaleDown 500ms;
}

.transformPrev {
  animation: scaleUp 100ms;
  display: none;
}

.riskcard .buttonall a {
  color: #1153FF;
  text-decoration: none;
  position: relative;
  padding: 10px 10px 10px 68px;
  display: inline-block;
  line-height: 26px;
  font-weight: 700;
}

.riskcard .buttonall a:before {
  border: 3px solid #1153FF;
  background: #1153ff38;
}

@keyframes scaleUp {
  0% {
    transform: scale(1.2) translateY(50px);
    opacity: 0;
  }

  20% {
    transform: scale(1.15) translateY(40px);
    opacity: 0.1;
  }

  40% {
    transform: scale(1.1) translateY(30px);
    opacity: 0.2;
  }

  60% {
    transform: scale(1.05) translateY(20px);
    opacity: 0.4;
  }

  80% {
    transform: scale(1.01) translateY(10px);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  20% {
    transform: scale(1.01) translateY(20px);
    opacity: 0.8;
  }

  40% {
    transform: scale(1.05) translateY(40px);
    opacity: 0.4;
  }

  60% {
    transform: scale(1.1) translateY(60px);
    opacity: 0.2;
  }

  80% {
    transform: scale(1.15) translateY(80px);
    opacity: 0.1;
  }

  100% {
    transform: scale(1.2) translateY(100px);
    opacity: 0;
  }
}

@keyframes scaleCard {
  0% {
    top: 5px;
  }

  100% {
    top: 24px;
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    transform: translateX(0);
  }
}

/* -----------------------------risk desktiop---------- */
.dp-wrap {
  margin: 24px auto;
  position: relative;
  perspective: 1000px;
  height: 100%;
}

.dp-slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.dp-slider div {
  transform-style: preserve-3d;
}

.dp_item {
  display: block;
  position: absolute;
  text-align: center;
  color: #FFF;
  border-radius: 10px;
  transition: transform 1.2s;
  right: 0;
}

.dp-img img {
  border-left: 1px solid #fff;
}

#dp-slider .dp_item:first-child {
  z-index: 11 !important;
  transform: rotateY(0deg) translateX(0px) !important;
  border: 1px solid #fff;

  border: 1px solid #fff;
}

#dp-slider .dp_item:nth-child(2) {}

#dp-slider .dp_item:nth-child(3) {}

#dp-slider .dp_item:nth-child(4) {}

#dp-slider .dp_item:nth-child(5) {}

.dp_item[data-position="1"] {
  z-index: 10;
  transform: rotateY(0deg) translateX(-36%) scale(1);
}

.dp_item[data-class="1"] {
  background-image: linear-gradient(175deg, #002DB6, #E4EFFF);
}

.dp_item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(-75%) scale(1);
}

.dp_item[data-class="2"] {
  background-image: linear-gradient(175deg, #0D41E1, #E6ECFE);
}

.dp_item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(-114%) scale(1);
}

.dp_item[data-class="3"] {
  background-image: linear-gradient(175deg, #0C63E7, #E4EFFF);
}

.dp_item[data-position="4"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(-154%) scale(1);
}

.dp_item[data-class="4"] {
  background-image: linear-gradient(175deg, #0A85ED, #E4F2FF);
}

.dp_item[data-position="5"] {
  z-index: 6;
  transform: rotateY(0deg) translateX(-154%) scale(1);
}

.dp_item[data-position="0"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(-154%) scale(1);
}

.dp_item[data-class="0"] {
  background-image: linear-gradient(175deg, #00238E, #CDD8F7);
}

#dp-next,
#dp-prev {
  position: absolute;
  top: 50%;
  right: 16%;
  height: 33px;
  width: 33px;
  z-index: 10;
  cursor: pointer;
}

#dp-prev {
  left: 15px;
  transform: rotate(180deg);
}

#dp-dots {
  position: absolute;
  bottom: 25px;
  z-index: 12;
  left: 38%;
  cursor: default;
}

#dp-dots li {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

#dp-dots li:hover {
  cursor: pointer;
  background: #FA8C8C;
  transition: background .3s;
}

#dp-dots li.active {
  background: #FA8C8C;
}

.dp_item {
  width: 39%;
}

.dp-content,
.dp-img {
  text-align: left;
}

.dp_item {
  display: flex;
  align-items: self-start;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #ffffff;
  height: 87vh;
  box-shadow: -3px 2px 15px 4px #ffffff3d;
}

.dp-content {
  padding: 20px;
  display: inline-block;
  width: 100%;
  color: white;
  height: 100%;
}

.dp-content h2 {
  color: #41414B;
  font-family: Circular Std Bold;
  font-size: 48px;
  max-width: 460px;
  margin-top: 8px;
  margin-bottom: 0px;
}

.dp-content p {
  color: #000000;
  max-width: 490px;
  margin-top: 15px;
  font-size: 21px;
}

.dp-content .buttonall {
  margin-top: 0px;
  font-size: 20px;
  padding: 0;
  text-align: right;
}

.dp-content img {
  object-fit: contain;
  object-position: center;
  height: 38vh;
  margin: 0 auto;
  width: 100%;
}

.dp-content .contdiv {
  height: 25vh;
  overflow: hidden;
}

#dp-slider,
.dp-img img {
  height: 91vh;
}

#dp-slider .dp_item:hover:not(:first-child) {
  cursor: pointer;
}

.site-btn {
  color: #fff;
  font-size: 18px;
  font-family: "Circular Std Medium";
  background: #FA8282;
  padding: 14px 43px;
  display: inline-block;
  border-radius: 2px;
  position: relative;
  top: -12px;
  text-decoration: none;
}

.site-btn:hover {
  text-decoration: none;
  color: #fff;
}

/* ----------------------------------------------------- */
.message,
.message2,
.message3,.message3d,
.message4,
.message6{
  display: none;
}

.message:first-child,
.message2:first-child,
.message3:first-child,.message3d:first-child,
.message4:first-child,
.message6:first-child{
  display: block;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


@media only screen and (max-width: 767px) {
  .d-fleximg {
    display: block;
    justify-content: space-between;
  }
.title1{
  display: none;
}
footer.nb-footer .footer-info-single{
  margin: 0;
}
footer.nb-footer .footer-info-single ul {
  margin-top: 0;
}
  .mood-board {
    aspect-ratio: 1/1;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(14, 1fr);
    grid-template-areas: "b1 b1 b1 b1 b1 b1 b1 tx tx tx tx tx tx tx" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c1 c1 c1 b4 b4 b4 b4 b6 b6 b6 b6 b6 b6 b6";
    grid-gap: var(--gap);
  }

  .mood-board .expbtn {
    margin-top: 10px;
    bottom: 2px;
    top: -5px;
  }
  .hexagon .textone .expbtn {
     transform: translate(-50%, -18%);
     top: unset;
}
  [class^=block-]>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  .block-1 {
    grid-area: b1;
    border-radius: 10px;
    background-image: url(../images/bulb/Visual-Commerce.gif);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
    animation: scaleInUp 0.4s ease-in-out 0.5s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-size: cover;
    background-color: #cee8f7;
    background-position: 38%;
  }

  .block-1 .textone {
    justify-content: flex-start;
    padding-bottom: 3px;
    align-items: flex-start;
  }

  .block-1 .textone h3 {
    color: black;
    font-weight: 700 !important;
    text-align: left;
    font-size: 14px;
  }

  .block-2 {
    grid-area: b2;
    background: #ccff9d;
    border-radius: 10px;
    border-radius: 10px;
    background-image: url(../images/bulb/shopify-home.gif);
    background-repeat: no-repeat;
    background-size: 157%;
    -webkit-animation: scaleInUp 0.4s ease-in-out 0.5s both;
    animation: scaleInUp 0.4s ease-in-out 0.5s both;
    /* -webkit-animation-direction: alternate; */
    /* animation-direction: alternate; */
    background-position: 27%;
  }

  .block-2 .textone {
    align-items: end;
    justify-content: space-between;
  }

  .block-3 {
    grid-area: b3;
    border-radius: 10px;
    background-image: url(../images/bulb/magento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
    animation: scaleInUp 0.3s ease-in-out 1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-size: 93%;
    background-position: right;
  }

  .block-3 .textone {
    align-items: end;
  }

  .block-4 {
    grid-area: b4;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
    animation: scaleInUp 0.3s ease-in-out 1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-position: top;
    background-size: 122%;
  }

  .block-4 .textone {
    padding-top: 53px;
    background-image: linear-gradient(194deg, #004c5b 0%, rgb(255 255 255 / 57%) 35%, #00a8cb 100%);
    border-radius: 10px;
    background: url(../images/bulb/Headless-eCommerce-mobile.gif);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.3s ease-in-out 1s both;
    animation: scaleInUp 0.3s ease-in-out 1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-position: 50% 55%;
    background-size: 75%;
    justify-content: end;
    padding: 8px 5px;
  }

  .block-4 .textone h3 {
    color: black;
    font-weight: bold;
    white-space: break-spaces;
    font-size: 9px;
  }

  .block-6 {
    grid-area: b6;
    border-radius: 10px;
    /* background: url(../images/bulb/bigcommerce.png); */
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.4s ease-in-out 1.1s both;
    animation: scaleInUp 0.4s ease-in-out 1.1s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-color: #ceddeb;
    background-position: center 42%;
    background-size: 90%;
  }

  .block-6 img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .block-6 .textone {
    align-items: end;
    height: 71px;
    justify-content: start;
    padding: 0;
  }

  .block-6 .textone h3 {}

  .color-1 {
    grid-area: c1;
    border-radius: 10px;
    background-image: url(../images/bulb/ONDC-Mobile.gif);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: scaleInUp 0.5s ease-in-out 1.2s both;
    animation: scaleInUp 0.5s ease-in-out 1.2s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-color: #deebf7;
    background-position: center;
    background-size: 100%;
  }

  .color-1 .textone {
    /* background-image: linear-gradient(194deg, #ffc10782 0%, rgb(252 252 255 / 0%) 35%, #0d6efd5c 100%); */
    border-radius: 10px;
  }

  .color-1 .textone h3 {
    position: absolute;
    top: 20px;
    color: black;
    font-weight: 600;
  }

  .block-5 {
    background-size: 104%;
    background-position: 62% 83%;
    background-color: #e9defb;
  }

  .block-5 .textone {
    align-items: end;
    height: 62px;
    justify-content: unset;
    position: relative;
  }

  .block-5 .textone h3 {
    position: absolute;
    bottom: 11px;
    left: 50%;
    transform: translate(-50%, 50%);
    font-weight: bolder;
    font-size: 16px;
  }

  .textone {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 10px;
    gap: 4px;
    text-align: center;
  }

  .textone h3 {
    color: white;
    font-size: 14px;
    font-weight: 400;
  }

  .text {
    overflow: hidden;
    background-color: black;
    grid-area: tx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 5vw;
    letter-spacing: 0.125em;
  }

  .hexagon {
    background-color: var(--background-color);
    grid-column: 6/span 4;
    grid-row: 3/span 2;
    clip-path: var(--hexagon);
    padding: var(--gap);
    border-radius: 10px;
    -webkit-animation: scaleInUp 0.7s ease-in-out 1.5s both;
    animation: scaleInUp 0.7s ease-in-out 1.5s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    width: 126px;
    height: 126px;
  }

  .hexagon .textone {
    padding: 0;
    border-radius: 10px;
    position: relative;
    padding-top: 9px;
    justify-content: flex-start;
  }

  .hexagon__interior {
    height: 100%;
    background-color: #383837;
    clip-path: var(--hexagon);
    padding: 0;
    background-image: url(../images/bulb/virtual-tryon.gif);
    background-repeat: no-repeat;
    background-size: 106%;
    background-position: -21% -79%;
  }

  .hexagon .textone h3 {
    font-weight: 800;
    font-size: 11px;
  }

  .rbt-categori-list {
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .rbt-categori-list a {
    padding: 10px 10px;
    font-size: 14px;
    height: auto;
    min-width: max-content;
  }

  .scroll-animation-all-wrapper::before,
  .scroll-animation-all-wrapper::after {
    width: 100px;
    background: linear-gradient(90deg, #fff 10px, rgba(255, 255, 255, 0));
  }
	.cardmain .card{padding: 0.75rem;}
  .cardmain .card .card-title {
    position: relative;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
  }

  .cardmain .card p {
    color: white;
    font-size: 12px;
    margin-bottom: 0px;
    text-align: center;
  }

  .cardmain .card {
    max-width: 12rem;
  }
.cardmain .card div {
    margin-bottom: 20px;
}
  .cardmain {
    overflow: hidden;
  }

  .divi {
    width: 100%;
    align-items: center;
    display: flex;
    padding: 9px;
    position: relative;
    top: calc(100% - 6px);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.8s ease;
    box-shadow: none;
    background: #ffffffbf;
  }

  .container_foto h2 {
    color: #000;
    font-size: 20px;
  }

}

@media only screen and (max-width: 395px) {

  

}

@media screen and (min-width:320px) and (max-width:935px) and (orientation:landscape) {

  .card-stack {
    width: 100%;
    height: 156vh;
    max-height: 200vh;
  }

  .card-stack .riskcard-list li img {
    width: 100%;
    height: 360px;
    object-fit: contain;
  }

  .main-title h1 {
    font-family: 'General Sans';
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
  }

  .main-title h2 {
    font-family: 'General Sans';
    margin-top: -7px;
    font-size: 25px;
    margin-bottom: 0;
  }

  .mob .phsolutions ul {
    padding: 0;
    width: 100%;
    position: relative;
    display: grid;
    /* height: 33vh; */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 425px;
  }

  .mob .phsolutions ul li {
    list-style: none;
    max-width: 194px;
    max-height: 194px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .mob .phsolutions ul li:nth-child(1) {
    background-image: linear-gradient(83deg, #308fe1, #527485);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(2) {
    background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(3) {
    background-image: linear-gradient(86deg, #0077B9, #013162);
    left: 63%;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(4) {
    background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul li:nth-child(5) {
    background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
    z-index: 9;
    left: 31%;
    top: 58%;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(6) {
    background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
    left: 63%;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul.three li:nth-child(1) {
    background-image: linear-gradient(86deg, #06B6D4, #a77f53);
    z-index: 9;
    animation: scrolldown 15s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(2) {
    background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(3) {
    background-image: linear-gradient(45deg, #31160e, #0dcaf0);
    left: 63%;
    animation: scrolldown 13s ease infinite;
  }

  .mob .phsolutions ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 22px;
    font-size: 19px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .mob .phsolutions ul li a.expbtn {
    width: 23px !important;
    height: 23px !important;
    color: #1153FF;
    animation: unset;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: -2px;
  }

  .block-1 {
    grid-area: b1;

    background-size: cover;
    background-color: #cee8f7;
  }
  .color-1 {
   /* background-image: url(../images/bulb/ONDC-Mobile.gif); */
   background-size: cover;
  }
  .block-6 .textone {
    height: 100px;
  }
  .block-5 .textone {
    align-items: end;
    height: 97px;
  }
  .hexagon {
    width: 235px;
    height: 235px;
}
}

@media screen and (min-width:320px) and (max-width:845px) and (orientation:landscape) {

  .card-stack {
    width: 100%;
    height: 167vh;
    max-height: 200vh;
  }

  .card-stack .riskcard-list li img {
    width: 100%;
    height: 360px;
    object-fit: contain;
  }

  .main-title h1 {
    font-family: 'General Sans';
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
  }

  .main-title h2 {
    font-family: 'General Sans';
    margin-top: -7px;
    font-size: 25px;
    margin-bottom: 0;
  }

}

@media screen and (min-width:767px) and (max-width:845px) and (orientation:portrait) {
  .title {
    color: white;
    margin-top: 15px !important;
    position: relative;
    font-size: 24px;
    text-align: left;
    padding: 0px 31px !important;
    text-transform: uppercase;
    opacity: 0.8;
    transform: unset;
  }

  .banner,
  .mainbnr {
    height: 63vh;
  }

  #mob .balloon:nth-child(1) svg {
    width: 254px !important;
    height: 546px;
    left: 102px;
  }

  .mob .phsolutions ul {
    padding: 0;
    width: 100%;
    position: relative;
    display: grid;
    /* height: 33vh; */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 491px;
  }

  .mob .phsolutions ul li {
    list-style: none;
    max-width: 223px;
    max-height: 223px;
    border-radius: 80%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    gap: 7px;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .mob .phsolutions ul li:nth-child(1) {
    background-image: linear-gradient(83deg, #308fe1, #527485);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
  }

  .texttrans h3 {
    font-family: 'Bradley Hand ITC';
    font-weight: bolder;
    text-align: center;
    font-size: 29px;
    margin-top: 43px;
    margin-bottom: 0;
  }

  .texttrans h3 span {
    color: #EF7F1A;
  }

  .mob .phsolutions ul li:nth-child(2) {
    background-image: linear-gradient(77deg, #0D41E1, #47a2ef);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(3) {
    background-image: linear-gradient(86deg, #0077B9, #013162);
    left: 63%;
    animation: scrolldown 10s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(4) {
    background-image: linear-gradient(86deg, #5D6FF2, #b7899b);
    z-index: 9;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul li:nth-child(5) {
    background-image: linear-gradient(85deg, #52b5d9, #0B90F4);
    z-index: 9;
    left: 31%;
    top: 58%;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul li:nth-child(6) {
    background-image: linear-gradient(45deg, #2F38E9, #FCAAD5);
    left: 63%;
    animation: scrolldown 10s ease infinite;
    top: 53%;
  }

  .mob .phsolutions ul.three li:nth-child(1) {
    background-image: linear-gradient(86deg, #06B6D4, #a77f53);
    z-index: 9;
    animation: scrolldown 15s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(2) {
    background-image: linear-gradient(45deg, #1fcd90, #1A8FE9);
    z-index: 9;
    left: 31%;
    top: 24px;
    animation: scrollup 13s ease infinite;
  }

  .mob .phsolutions ul.three li:nth-child(3) {
    background-image: linear-gradient(45deg, #31160e, #0dcaf0);
    left: 63%;
    animation: scrolldown 13s ease infinite;
  }

  .mob .phsolutions ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 26px;
    font-size: 26px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .mob .phsolutions ul li a.expbtn {
    width: 23px !important;
    height: 23px !important;
    color: #1153FF;
    animation: unset;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: -2px;
  }

  .block-5 .textone {
    align-items: end;
    height: 98px;
  }

  .block-6 .textone {
    align-items: end;
    height: 104px;
  }

  .color-1 {
    background-size: 109%;
    background-image: url(../images/bulb/ONDC-Mobile.gif);
  }

  .balloon:nth-child(5) svg {
    left: -100%;
    width: 193px !important;
    height: 442px;
  }

  .balloon:nth-child(4) svg {
    left: -56%;
    width: 203px !important;
    height: 561px;
  }

  .balloon:nth-child(3) svg {
    left: -33%;
    width: 147px !important;
    height: 524px;
  }

  .balloon:nth-child(2) svg {
    left: 10%;
    width: 222px !important;
    height: 473px;
  }

  .cardmain .card {
      max-width: 20rem;
      width: 100%;
      padding: 36px;

  }



  .cardmain .card .card-title {
    position: relative;
    font-size: 22px;
  }

  .cardmain {
    place-content: unset;
  }

  .block-1 {
    background-size: cover;
  }
}

@media screen and (min-width:876px) and (max-width:1026px) and (orientation:portrait) {
  .nav-link {
    padding: 20px 7px !important;
    font-size: 14px !important;
}
.menubar {
  gap: 6px;
}
.get-btb {
  font-size: 14px !important;
  padding: 10px 6px !important;
}
.desk .phsolutions ul li {
  max-height: 214px;
   height: 153px;
  width: 100%;
  min-height: 152px;
}
.desk .phsolutions ul li a {
  line-height: 18px;
  font-size: 14px;
}
.block-5 .textone {
  align-items: end;
  height: 130px;
}
.block-6 .textone {
  align-items: end;
  height: 132px;
}
.dp_item {
  height: 83vh;
}
}
/* ----------125%------------------------------------------------ */
@media only screen and (min-width:1020px) and (max-width:2048px) and (-webkit-min-device-pixel-ratio: 1.25) {
  #desk .balloon:nth-child(1) {
    width: 232px;
    height: 100%;
  }

  #desk .balloon:nth-child(2) {
    animation-duration: 2.5s;
    animation: balloons1 2.5s ease-in-out;
    width: 161px;
  }

  #desk .balloon:nth-child(4) {
    animation-duration: 4.5s;
    animation: balloons1 2.5s ease-in-out;
    width: 225px;
  }

  #desk .balloon:nth-child(5) svg {
    left: -56%;
    width: 185px;
  }

  #desk .balloon:nth-child(3) {
    width: 178px;
  }

  .all {
    height: 92%;
  }



  #dp-slider,
  .dp-img img {
    height: 80vh;
  }

  .dp_item {
   /* height: 97vh;*/
	   height: 80vh;
  }
}
.block-5 .textone .expbtn, .block-2 .textone .expbtn, .block-3 .textone .expbtn, .block-6 .textone .expbtn {
  font-size: 12px;
  right: 3px;
  bottom: 3px;
  top: unset;
}


.cardmain .card .card-title a{
  color: #FFF;
}
.color-1 .textone .expbtn,  .block-1 .textone .expbtn {
  left:3px;
  bottom: 3px;
  font-size: 12px;
  top: unset;
}
@media screen and (min-width:320px) and (max-width:940px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.25) {}

@media screen and (min-width:320px) and (max-width:378px) and (orientation:portrait)  {
  .cardmain .card p a {
    color: white;
    cursor: pointer;
    font-size: 13px;
}
  .card-stack {
    width: 100%;
    min-height: max-content;
    position: relative;
    margin: 20px auto;
    margin-bottom: 271px;
    max-height: 114vh;
    height: 112vh;
}
.card-stack .riskcard-list li p {
  font-size: 16px;
}
.hexagon .textone .expbtn {
  transform: translate(-50%, -11%);
}
.two-part-title h2 {
  font-size: 28px;
}
.mob .phsolutions ul li {
  list-style: none;
  max-width: 120px;
  max-height: 120px;
}
}

@media only screen and (min-width:1300px) and (max-width:1367px)  {

  .main-title h1 {
    font-family: 'General Sans';
    font-size: 40px;
}
.mainbnr, .banner{
  height:100vh
}
.desk .phsolutions ul li {
  max-height: 220px;
 
  height: 181px;
  width: 100%;
  min-height: 159px;
}
.dp_item, .dp-slider {
  height: 100vh;
}
.dp-content p {
  font-size: 15px;
}
}