:root {
  --brand: #ed194e;
  --dark: #202647;
  --neutral-0: rgb(255 255 255 / 0%);
  --primary-50: rgb(63 186 23 / 10%);
  --accent-info-50: rgba(63 138 255 / 10%);
  --secondary-25: rgba(51, 51, 51, 0.25);
}

.navbar-area .sticky-logo {
  display: none;
}

.navbar-area.is-sticky .default-logo {
  display: none;
}

.navbar-area.is-sticky .sticky-logo {
  display: block;
}

.home-nav .nav-item a {
  color: #202647 !important;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
}

.navbar-brand {
  padding: 0 !important;
}

.webase-responsive-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-toggler {
  cursor: pointer;
  display: flex;
  margin-top: -20px;
}

.nav-toggler svg {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.active svg {
  transform: rotate(90deg);
}

.nav-toggler path {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggler .svg-stroke {
  stroke: #fff;
  /* change to any color you want */
}

.home-svg-toggler .svg-stroke,
.navbar-area.is-sticky .nav-toggler .svg-stroke {
  stroke: #131313;
  /* change to any color you want */
}

.nav-toggler path:nth-child(1) {
  transform-origin: 36% 40%;
}

.nav-toggler path:nth-child(2) {
  stroke-dasharray: 29 299;
}

.nav-toggler path:nth-child(3) {
  transform-origin: 35% 63%;
}

.nav-toggler path:nth-child(4) {
  stroke-dasharray: 29 299;
}

.nav-toggler path:nth-child(5) {
  transform-origin: 61% 52%;
}

.nav-toggler path:nth-child(6) {
  transform-origin: 62% 52%;
}

.nav-toggler.active path:nth-child(1) {
  transform: translateX(9px) translateY(1px) rotate(45deg);
}

.nav-toggler.active path:nth-child(2) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}

.nav-toggler.active path:nth-child(3) {
  transform: translateX(9px) translateY(1px) rotate(-45deg);
}

.nav-toggler.active path:nth-child(4) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}

.nav-toggler.active path:nth-child(5) {
  transform: translateX(9px) translateY(1px) rotate(-45deg);
}

.nav-toggler.active path:nth-child(6) {
  transform: translateX(9px) translateY(1px) rotate(45deg);
}

/* Animate images  */
.hero-animate {
  position: absolute;
}

.hero-animate .animate_img {
  border: 1px solid #F2F2F2;
  background: rgb(255 255 255 / 38%);
  box-shadow: 0 1006.686px 281.314px 0 rgba(0, 0, 0, 0.00), 0 644px 258.065px 0 rgba(0, 0, 0, 0.01), 0 362.686px 218.542px 0 rgba(0, 0, 0, 0.05), 0 160.419px 160.419px 0 rgba(0, 0, 0, 0.09), 0 39.523px 88.347px 0 rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(20px);
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  animation: SlideUpDown 3s infinite;
}

.hero-animate .animate_img svg {
  width: 22px;
  height: 22px;
}

@keyframes SlideUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

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

.animate_wrapper {
  position: relative;
}

.hero-animate .animate_content {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}

/* Start positions by direction */
.hero-animate[data-anim="right"] .animate_content {
  transform: translateX(220%);
  top: 50%;
  right: 0;
  translate: 0 -50%;
}

.hero-animate[data-anim="left"] .animate_content {
  transform: translateX(-220%);
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

.hero-animate[data-anim="up"] .animate_content {
  transform: translateY(-350%);
  left: 50%;
  bottom: 0;
  translate: -50% 0;
}

.hero-animate[data-anim="down"] .animate_content {
  transform: translateY(200%);
  left: 100%;
  top: 0;
}

/* Hover reveal */
.hero-animate .animate_img:hover .animate_content {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

/* Optional: icon image sizing */
.hero-animate .mini-icon {
  display: inline-block;
  width: var(--icon-size, 30px);
  height: var(--icon-size, 30px);
  object-fit: contain;
}


.hero-animate .animate_content {
  display: block;
  width: 200px;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.hero-animate .animate_content h4 {
  color: #202647;
  text-align: left;
  font-size: 18px;
  margin-top: 15px;
}

.hero-animate .animate_content p {
  color: rgb(106, 108, 114);
  text-align: left;
  font-size: 12px;
}

.hero-animate .animate_content img {
  border-radius: 8px;
}


/* mega menu css  */
.webase-nav .nav-item .additional-links a {
  position: relative;
  display: flex;
  align-items: start;
  gap: 5px;
  color: #242a4abf !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  padding: 7px 8px !important;
  margin-left: -8px !important;
  border-radius: 6px;
}

.webase-nav .nav-item .additional-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
  border-radius: 6px;
  transition: all .3s ease-in-out;
}

.webase-nav .nav-item .additional-links a:hover::before {
  background: #f6f5fb;
}

.additional-links a {
  color: #7d7d7d !important;
  font-weight: 400;
  padding: 8px !important;
  transition: all .3s ease-in-out;
}

/* client page css start */

.client-card {
  padding: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: auto;
  height: 240px;
}

.client-info {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  padding: 20px;
}

.client-img {
  height: 120px;
  width: 150px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  transition: all .3s ease-in-out;
}


.client-background {
  position: absolute;
  background-color: #202647;
  height: 100%;
  width: 100%;
  transform: translateX(-115%);
  transition: all .3s ease-in-out;
  top: 0px;
}

.client-card:hover .client-background {
  display: block;
  transform: translateX(0);
  left: 0px;
}

.client-card:hover .client-img {
  transform: translateX(190%);
}

.client-card .client-txt {
  position: absolute;
  transform: translate(calc(-100% - 20px), -50%);
  transition: all .3s ease-in-out;
  top: 50%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
  -webkit-line-clamp: 3;

}

.client-card:hover .card-text {
  color: white;
}

.client-card .client-case-study {
  position: absolute;
  bottom: 15px;
  transform: translateX(-80%);
  transition: all .3s ease-in-out;
  color: white;
}

.client-card:hover .client-txt {
  transform: translate(0, -50%);
}

.client-card:hover .client-case-study {
  transform: translateX(0);
}

.client-card:hover .card-text {
  position: relative;
  z-index: 10;
}

.client-card:hover .card-logo {
  border-color: white;
  position: relative;
  z-index: 10;
}

.client-card:hover .link-text {
  color: white;
}

.client-card:hover .arrow-logo path {
  stroke: white;
}

.client-card:hover .client-txt {
  color: white;

}

.span-logo {
  height: 12px;
  width: 12px;
  border: 1px solid #202647;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

.filter_area :is(input, select) {
  background: inherit;
  appearance: auto;
  border: 0px solid transparent;
  border-bottom: 1px solid #c9c9c9;
  border-radius: 0;
  padding-left: 0px;
  padding-right: 0px;
}

.filter_area :is(select) {
  margin-top: 3px;
}

.filter_area :is(input, select):focus {
  background: inherit;
  appearance: auto;
  box-shadow: none !important;
  border-bottom: 1px solid #c9c9c9;
}

/* client page css end */

/* Home page service section style  */
.service_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.service_card {
  color: inherit;
  padding: 15px;
  height: 450px;
  position: relative;
  border-radius: 10px;
  background-color: #f6f5fb;
  border: 1px solid #e7e7e7cc;
}

.service_card:hover {
  color: inherit;
}

.service_card .card_conent {
  transition: all .3s ease-in-out;
}

.service_card:hover .card_conent {
  position: relative;
  z-index: 999;
}

.service_card .icon {
  display: inline-block;
  padding: 12px;
  border-radius: 10px;
  background: #F6F5FB;
}

.service_card .service_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(330px 15px 15px 15px round 10px);
  transition: all .3s ease-in-out;
}

.service_card:hover .service_img {
  clip-path: inset(0px round 10px);
}

.service_card .card_conent h3 {
  font-size: 20px;
}

.service_card:hover .card_conent :is(h3, p, span) {
  color: #fff;
}

.service_card .card_conent p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.service_card:hover .card_conent svg path {
  stroke: #fff;
}

.service_card:hover .card_conent .icon svg {
  fill: #fff;
}

.overlay_card {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  opacity: 0;
  background-color: #00000063;
  transition-duration: .7s;
  transition-property: clip-path, opacity;
  transition-timing-function: ease-out;
  border-radius: 10px;
}

.service_card:hover .overlay_card {
  opacity: 1;
}

/* Home page service section style  */
/* Home page Product section style  */
.product_section {
  padding: 70px 0 35px;
}

.product_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.product_card_wrapper {
  display: flex;
  padding: 30px 0px 0px 30px;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.product_card_wrapper:hover {
  color: inherit;
}

.product_card_wrapper h3 {
  font-size: 30px;
  color: var(--dark);
}

.product_card_wrapper p {
  color: var(--dark);
}

.product_card_wrapper.election-app {
  background: linear-gradient(180deg, #C1EFFD 0%, #347A8E 100%);
}

.product_card_wrapper.nextra {
  background: linear-gradient(180deg, #C1EDEF 0%, #6F8889 100%);
}

.product_card_wrapper.everpos {
  background: linear-gradient(180deg, #F4E1D7 0%, #94857C 100%);
}

.product_card_wrapper.erp {
  background: linear-gradient(180deg, #DED5F5 0%, #8B8799 100%);
}

/* Home page Product section style  */
/* Home Features section style  */
.home-features {
  padding: 70px 0;
  background-color: var(--dark);
}

.home-features .features-content-area :is(h3, p) {
  color: #fff;
}

.home-features .features-content-area p {
  font-weight: 300;
}

.home-features .feature_left {
  padding-right: 10%;
}

.home-features .single-fun-facts h3 {
  color: #fff;
  font-size: 45px;
  font-weight: 700;
}

.home-features .single-fun-facts p {
  color: #fff;
  font-weight: 300;
}

.home-features .single-fun-facts h3 .sign-icon {
  color: #fff;
}

/* Start Case Study style */
.case_study_section {
  padding: 35px 0 70px;
}

.blog_home_slide .owl-nav,
.case_slide .owl-nav {
  position: absolute;
  right: 0;
  top: -120px;
  display: inline-flex;
}

.blog_home_slide .owl-nav :is(.prev, .next),
.case_slide .owl-nav :is(.prev, .next) {
  border: 1px solid var(--brand);
  background-color: #fff;
  padding: 5px;
  border-radius: 50%;
}

.blog_home_slide .owl-nav :is(.prev, .next):hover,
.case_slide .owl-nav :is(.prev, .next):hover {
  background-color: var(--brand);
}

.blog_home_slide .owl-nav :is(.prev, .next) path,
.case_slide .owl-nav :is(.prev, .next) path {
  stroke: var(--brand)
}

.blog_home_slide .owl-nav :is(.prev, .next):hover path,
.case_slide .owl-nav :is(.prev, .next):hover path {
  stroke: #fff;
}

/* //button  */
.blog_home_slide .owl-nav button:hover,
.case_slide .owl-nav button:hover {
  background-color: transparent !important;
}

.case_section_title {
  text-align: start;
  margin-bottom: 25px;
}

.case_section_title h3::before {
  margin: 0;
}

.case_section_title h3::after {
  margin: 0;
}

.testimonial-slides .owl-stage,
.case_slide .owl-stage {
  display: flex;
}

.testimonial-slides .owl-item,
.case_slide .owl-item {
  display: flex;
}

.testimonial-slides .testimonial-single-item,
.case_slide .testimonial-single-item {
  display: flex;
}

.testimonial-slides .testimonial-content-text,
.case_slide .testimonial-content-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Home Blog section style  */
.testimonial-single-item .testi_wrapper {
  background-color: #fff;
  padding: 25px;
  position: relative;
  margin-top: 25px;
  border-radius: 12px;
  border: 1px solid #E0E0E0;
  transition: all .3s ease-in-out;
}

.owl-stage {
  margin-bottom: 30px;
}

.testimonial-single-item .testi_wrapper:hover {
  border-radius: 12px;
  background: radial-gradient(80.35% 80.71% at 50.72% 50.67%, var(--neutral-0, rgba(255, 255, 255, 0.00)) 0%, rgb(63 186 23 / 10%) 100%),
    radial-gradient(115.3% 69.23% at 49.84% 50%, var(--neutral-0, rgba(255, 255, 255, 0.00)) 0%, rgb(63 138 255 / 10%) 100%),
    var(--neutral-0, #FFF);

  box-shadow: 0 15px 40px -12px var(--secondary-25, rgba(51, 51, 51, 0.25));
}

.testimonial-single-item .testimonial-content-text .testi_info {
  gap: 10px;
}

.testimonial-single-item .testimonial-image img {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.testimonial-single-item .testimonial-content-text h3 {
  font-size: 15px;
  color: #202647;
  font-weight: 500;
  margin-bottom: 0px;
}



.testimonial-single-item .testimonial-content-text span {
  font-size: 13px;
  color: #a0a1a3;
  font-weight: 400;
}

.testimonial-single-item .testimonial-content-text .icon {
  margin-top: 8px;
  margin-bottom: 8px;
}

.testimonial-single-item .testimonial-content-text p {
  font-size: 14px;
  color: #6a6c72;
  font-weight: 400;
  margin: 0;
}

.testimonial-single-item .testimonial-content-text .icon i {
  color: #848281;
}

/* Home Features section style  */


/* Glass Button Design style  */

/* Defs */
@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

:root {
  --global--size: clamp(2rem, 4vw, 5rem);
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ========== BUTTON ========== */

/* Button Wrap Container */
.glass_box {
  display: inline-block;
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

/* Button Shadow Container */
.button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

/* Shadow */
.button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.1));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  opacity: 1;
}

/* ========== BUTTON BASE STYLES ========== */

.glass_wrapper {
  /* Basic Styling */
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  background: linear-gradient(-75deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.05));
  border-radius: 999vw;
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

.glass_wrapper:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1);
}

/* Button Text */
.glass_wrapper .glass_btn {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.05em;
  font-weight: 500;
  font-size: 1em;
  color: rgba(50, 50, 50, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding-inline: 1.5em;
  padding-block: 0.875em;
}

.glass_wrapper:hover .glass_btn {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}

/* Text */
.glass_wrapper .glass_btn::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width));
  /* Prevent overlapping border */
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(var(--angle-2),
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 40% 50%,
      rgba(255, 255, 255, 0) 55%);
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),
    --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}

.glass_wrapper:hover .glass_btn::after {
  background-position: 25% 50%;
}

.glass_wrapper:active .glass_btn::after {
  background-position: 50% 15%;
  --angle-2: -15deg;
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {

  .glass_wrapper .glass_btn::after,
  .glass_wrapper:active .glass_btn::after {
    --angle-2: -45deg;
  }
}

/* ========== BUTTON OUTLINE ========== */

/* Outline */
.glass_wrapper::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5));
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease),
    --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}

.glass_wrapper:hover::after {
  --angle-1: -125deg;
}

.glass_wrapper:active::after {
  --angle-1: -75deg;
}

@media (hover: none) and (pointer: coarse) {

  .glass_wrapper::after,
  .glass_wrapper:hover::after,
  .glass_wrapper:active::after {
    --angle-1: -75deg;
  }
}

/* Shadow Hover */
.glass_box:has(.glass_wrapper:hover) .button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

.glass_box:has(.glass_wrapper:hover) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

/* Rotation */
.glass_box:has(.glass_wrapper:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}

.glass_box:has(.glass_wrapper:active) .glass_wrapper {
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}

.glass_box:has(.glass_wrapper:active) .button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}

.glass_box:has(.glass_wrapper:active) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.glass_box:has(.glass_wrapper:active) .glass_btn {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}

/* Glass Button Design style  */

.client_section {
  padding: 20px 0 50px;
  background-color: #f6f5fb;
}

/* Footer design start  */
.pre-footer {
  padding-top: 30px;
  background-color: #fff;
}

.footer_top_section {
  background-image: url('../img/footer-top-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 130px 0;
}

.footer_top_section h3 {
  font-size: 45px;
  color: #202647;
  font-weight: 700;
  margin: 10px 0 34px 0;
  position: relative;
  padding-bottom: 20px;
}

/* Footer design end  */
/* About page at a glance start  */
.at_a_glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.glance_item {
  background-color: #EEEEEE;
  border-radius: 12px;
  border: 1px solid #EEE;
  padding: 65px 20px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  transition: all .3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glance_item:hover {
  position: relative;
  z-index: 99;
  background: rgba(250, 250, 250, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), 0 12px 96px 0 rgba(51, 51, 51, 0.1);
}

.glance_item .single-fun-facts {
  margin-top: 0px;
  text-align: center;
}

.glance_item .single-fun-facts h3 .sign-icon {
  color: var(--dark);
}

.glance_item.it5 {
  transform: scale(1.3);
  border-radius: 12px;
  background: rgba(250, 250, 250, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), 0 12px 96px 0 rgba(51, 51, 51, 0.1);
  padding: 32px 20px;
}

/* About page at a glance end  */

/* Blog page style start  */
.blogs_page {
  padding: 50px 0;
}

.blogs_page .case-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.blog_page_title.page-title-area {
  padding-top: 180px;
  padding-bottom: 100px;
}

.blogs_page .blog_thubmnail {
  border-radius: 10px;
}

.blog_sidebar .sidebar_title {
  font-size: 22px;
  color: var(--dark);
  font-weight: 500;
}

.sidebar_posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lt_post {
  gap: 10px;
}

.lt_post img {
  width: 100px;
  height: 65px;
  aspect-ratio: 3/2;
  border-radius: 10px;
}

.lt_post .lt_title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 2px;
}

.lt_post .lt_date {
  font-size: 15px;
  color: rgb(125 134 159);
}

.blog_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.blog_card {
  position: relative;
  padding: 20px;
  border: 1px solid #E2E3F4;
  border-radius: 10px;
  height: 400px;
}

.blog_content {
  position: relative;
  z-index: 44;
}

.blog_card_wrapper:hover {
  color: inherit;
}

.blog_card_wrapper :is(span, svg) {
  font-size: 15px;
}

.blog_card_wrapper p {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog_card_wrapper .blog_title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.blog_card:hover :is(span, p, h3) {
  color: #fff;
}

.blog_card_wrapper .blog_thumb {
  position: absolute;
  inset: 0;
  object-fit: cover;
  border-radius: 10px;
  clip-path: inset(220px 10px 10px 10px round 10px);
  transition: all .3s ease-in-out;
}

.blog_overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-color: rgb(27 30 55 / 53%);
  clip-path: inset(220px 10px 10px 10px round 10px);
  z-index: 33;
  transition: all .3s ease-in-out;
}

.blog_card:hover .blog_thumb,
.blog_card:hover .blog_overlay {
  clip-path: inset(0px 0px 0px 0px round 10px);
}

.blog_card_wrapper .bottom_info {
  position: relative;
  z-index: 55;
}

.blog_card_wrapper .bottom_info span {
  color: #fff;
  background-color: rgb(27 34 79 / 58%);
  padding: 3px 6px;
  border-radius: 5px;
}

/* Blog page style end  */
/* Career page style end  */
.career_card {
  background-color: #fff;
  border: 1px solid #E2E3F4;
  border-radius: 10px;
}

.career_card .card_body {
  padding: 10px;
}

.career_card img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.case_services li {
  background-color: #a2adf72f;
  padding: 2px 8px;
  border-radius: 4px;
}

.case_service_tt {
  font-weight: 500;
}

.case_service_tt span {
  font-weight: 400;
}

.case_company_logo {
  width: 70px;
  height: 40px;
  object-fit: contain;
}

.case_desc :is(.container-fluid, .container) {
  padding: 0px;
}

/* Career page style end  */
.cta-section {
  display: none;
}
.sdt-sidebar a:nth-child(4) {
  display: none;
}
.sdt-sidebar a:nth-child(5) {
  display: none;
}

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

  .web-dev,
  .soft-dev {
    top: -8%;
  }

  .art-int,
  .mob-dev {
    top: 50%;
  }

  .ux-eng {
    left: -40%;
    bottom: -24%;
  }

  .it-staff {
    right: -40%;
    bottom: -24%;
  }



}


@media screen and (max-width: 1024px) {
  .hero-animate {
    display: none;
  }

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

  .product_cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
  }

  .footer_top_section {
    padding: 90px 0;
  }

  .blogs_page .case-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .blog_page_title.page-title-area {
    padding-top: 120px;
    padding-bottom: 50px;
  }

  .blog_grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media screen and (max-width: 767px) {
  .client-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
  }

  .service_cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .product_cards {
    grid-template-columns: repeat(1, 1fr);
  }

  .product_card h3 {
    font-size: 25px;
  }

  .home-features .feature_left {
    padding-right: 15px;
  }

  .case_study_section {
    padding: 35px 0 30px;
  }

  .product_section {
    padding: 40px 0 15px;
  }

  .footer_top_section {
    padding: 60px 0;
  }

  .at_a_glance .it1 {
    order: 1;
  }

  .at_a_glance .it2 {
    order: 2;
  }

  .at_a_glance .it3 {
    order: 3;
  }

  .at_a_glance .it4 {
    order: 4;
  }

  .at_a_glance .it7 {
    order: 5;
  }

  .at_a_glance .it8 {
    order: 6;
  }

  .at_a_glance .it5 {
    transform: scale(1);
    background: #EEEEEE;
    box-shadow: none;
    padding: 17px 20px;
    order: 7;
    grid-column: 1 / span 2;
    grid-row: 3 / span 4;
    height: auto;
    margin-bottom: 16px;
  }

  .at_a_glance .it5:hover {
    position: relative;
    z-index: 99;
    background: rgba(250, 250, 250, 1);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), 0 12px 96px 0 rgba(51, 51, 51, 0.1);
  }

  .at_a_glance .it6 {
    order: 8;
  }

  .at_a_glance .it9 {
    order: 9;
  }

  .glance_item {
    padding: 32px 15px;
    height: 122px;
  }

  .blogs_page {
    padding: 35px 0;
  }

  .blogs_page .case-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .case-info h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .blog_page_title.page-title-area {
    padding-top: 100px;
    padding-bottom: 35px;
  }

  .blogs_page .case-terms span {
    font-size: 12px;
  }

  .blogs_page .case-btn svg {
    height: 45px;
    width: 45px;
  }

  .client_section {
    padding: 40px 0;
  }

  .blogs_page .case-info img {
    width: 80px !important;
  }

  .blogs_page .case-cats span {
    font-size: 12px;
  }

  .blog_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .blog_card {
    height: 350px;
  }

  .blog_card_wrapper :is(.blog_thumb, .blog_overlay) {
    clip-path: inset(250px 10px 10px 10px round 10px);
  }

  .blog_card {
    padding: 12px;
  }

  .blog_card_wrapper :is(span, svg) {
    font-size: 10px;
  }

  .blog_card_wrapper .blog_title {
    font-size: 15px;
    line-height: 20px;
  }

  .client-card {
    height: 190px;
  }

  .client-img {
    height: 90px;
    width: 140px;
  }
}

.contact-us {
  padding-bottom: 40px;
  text-align: center;
  font-size: 55px;
  justify-content: center;
}

.contact-container {
  /* display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin: auto; */
}

/* Left Contact Form */
.contact-form {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
  margin-bottom: 20px;
  font-size: 24px;
}



.contact-info {
  gap: 25px !important;
}

.contact-info .info-dv {
  padding-bottom: 12px;
}

.form-row {
  margin-bottom: 15px;
}

.contact-form label {
  padding-bottom: 6px;
}

.contact-form textarea {
  height: 65px;
}

.contact-form .form-row .form-col-div {
  width: 100%;
}

.form-row input,
.form-row select,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  background-color: #F3F3F5;
  color: #7B7B7C;
  outline: none;
}

.form-row .form-select:focus {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

textarea {
  resize: none;
  height: 100px;
}

.form-check {
  margin: 15px 0;
  font-size: 14px;
}

.form-check input {
  margin-top: 4px;
}

.contact-form button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 6px;
  background: #0d6efd;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.contact-form button:hover {
  background: #0b5ed7;
}

/* Right Contact Info */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info .info-h6 {
  margin-bottom: 0px;
}

.info-box {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.info-box h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.info-box p {
  margin: 0px;
  font-size: 14px;
  color: #333;
}

.info-box i {
  margin-right: 6px;
  color: #0d6efd;
}

.contact-map {
  padding: 10px 0 50px;
  border-radius: 12px;
}

/* Career details page style start */
.career_details_section {
  padding-bottom: 50px;
}

.career_wrapper {
  background-color: #fff;
  padding: 50px 20px;
  margin-top: -50px;
  position: relative;
  z-index: 99;
  border-radius: 12px;
}

.career_wrapper img {
  border-radius: 8px;
}

.job_sidebar {
  position: sticky;
  top: 100px;
}

.job_sidebar h4 {
  font-size: 18px;
}

.job_info svg {
  height: 18px;
  width: 18px;
  margin-top: 4px;
  color: #999496;
}

.job_info strong {
  text-transform: capitalize;
  font-size: 16px;
}

.job_info span {
  font-size: 16px;
}

/* Career details page style end */
.blgo_author {
  font-size: 16px;
}

.blog_date_read {
  font-size: 16px;
}

.blog_social_share a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  border: 1px solid #cdd6f1;
}

.blog_social_share a svg {
  height: 18px;
  width: 18px;
  transition: all .3s ease-in-out;
}

.comment_section form {
  border-bottom: 1px solid #e5e8f5;
}

.comment_section .cmnt-btn {
  font-size: 16px;
  color: #f0f0f0;
  border: none;
  outline: none;
  background-image: linear-gradient(43deg, #202647 0%, #ed194e 46%, #ffa670 100%);
  padding: 10px 20px;
  border-radius: 10px;
}

.theme_btn {
  font-size: 16px;
  color: #f0f0f0;
  border: none;
  outline: none;
  background-image: linear-gradient(43deg, #202647 0%, #ed194e 46%, #ffa670 100%);
  padding: 10px 20px;
  border-radius: 10px;
}
.theme_btn:hover {
  color: #f0f0f0 !important;
}

.comment_section h4 {
  font-size: 22px;
}

.comment_section .cmnt_avatar {
  font-size: 30px;
}

.comment_section .cmnt_content {
  font-size: 18px;
  font-weight: 600;
}

.comments_card .comment {
  padding-left: 45px;
}

.comments_card .comment p {
  font-size: 16px;
  margin-bottom: 10px;
}

.comments_card .comment svg {
  font-size: 16px;
  cursor: pointer;
}

.comments_card .comment span {
  font-size: 16px;
}

@media screen and (max-width: 512px) {
  .navbar-brand img {
    max-width: 100px;
  }

  .service_cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 390px) {
  .blog_card_wrapper :is(span, svg) {
    font-size: 9px;
  }
}