/*
Theme Name: Zotech
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: IT Solutions & Technology HTML Template
Version: 1.0.0
*/

/* Romex Ai logo lockup: image mark + wordmark */
.romex-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.romex-logo-mark {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

/* Romex Ai text logo mark */
.romex-logo-text {
  font-family: "Montserrat", serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: #000D27;
  letter-spacing: -0.5px;
  display: inline-block;
  white-space: nowrap;
}
.romex-logo-text .accent {
  color: #3FB5FD;
  margin-left: 5px;
}
.footer-wrapper .romex-logo-text {
  color: #000D27;
}

/* Why-choose animation: 96 transparent PNG frames played as a flipbook. Real
   alpha means the subject is opaque and IN FRONT, the tech circle shows through
   the transparent gaps behind him, and the full frame can be scaled up without
   a white box, bleed-through, holes or flicker. Scaled past the column width so
   he's large; the transparent side-margins spill harmlessly and never cover
   the text (his own pixels stay within the column). */
.choose-us-1 .choose-us-images {
  height: auto;
  min-height: auto;
  display: flex;
  /* anchor the subject to the bottom so his feet meet the section edge
     (the section drops its bottom padding on xl via pb-xl-0) instead of
     floating centered with a gap below */
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  /* hidden + shifted left until scrolled into view, then slides in */
  opacity: 0;
  transform: translateX(-140px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: opacity, transform;
}
.choose-us-1 .choose-us-images.in-view {
  opacity: 1;
  transform: translateX(0);
}
.choose-us-1 .choose-us-images .why-choose-gif {
  position: relative;
  z-index: 2;
  /* larger so he's taller; the extra height grows upward since the image is
     bottom-anchored, keeping his feet on the section's bottom edge */
  width: 380%;
  max-width: none;
  height: auto;
  object-fit: contain;
  mix-blend-mode: normal;
  transform: translateX(50px);
}
@media (max-width: 991px) {
  .choose-us-1 .choose-us-images .why-choose-gif {
    transform: translate(0, 0);
  }
}
@media (max-width: 991px) {
  .choose-us-1 .choose-us-images .why-choose-gif {
    width: 130%;
  }
}
/* The image column and the content column are equal-height in the flex row,
   but .choose-us-images is only as tall as the image, so it sits at the TOP of
   its column while the right-hand content runs lower. Make the image column a
   bottom-aligned flex container so the subject drops down and his feet line up
   with the bottom of the right-hand content. */
@media (min-width: 1200px) {
  .choose-us-1 .row > div:first-child {
    display: flex;
    align-items: flex-end;
  }
}

/* Why-choose flip cards: heading on the front, details on hover-flip */
.choose-us-1 .why-flip-grid {
  align-items: stretch;
}
.choose-us-1 .why-flip-grid .flip-card {
  position: relative;
  width: 100%;
  height: 240px;
  perspective: 1400px;
}
.choose-us-1 .why-flip-grid .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.choose-us-1 .why-flip-grid .flip-card:hover .flip-card-inner,
.choose-us-1 .why-flip-grid .flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}
.choose-us-1 .why-flip-grid .flip-card-front,
.choose-us-1 .why-flip-grid .flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.choose-us-1 .why-flip-grid .flip-card-front {
  background: var(--white);
  border: 1px solid rgba(63, 181, 253, 0.14);
  box-shadow: 0 18px 44px rgba(10, 6, 68, 0.07);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.choose-us-1 .why-flip-grid .flip-card:hover .flip-card-front {
  box-shadow: 0 26px 60px rgba(11, 110, 218, 0.18);
}
.choose-us-1 .why-flip-grid .flip-card-front .icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 20px;
  background: linear-gradient(84deg, #3fb5fd 0%, #0b6eda 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.choose-us-1 .why-flip-grid .flip-card-front h4 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  color: var(--header);
}
.choose-us-1 .why-flip-grid .flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  box-shadow: 0 26px 60px rgba(11, 110, 218, 0.22);
}
.choose-us-1 .why-flip-grid .flip-card-back h5 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
}
.choose-us-1 .why-flip-grid .flip-card-back p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
  line-height: 1.55;
}

/* guard against a horizontal scrollbar from the transparent overflow
   (clip, not hidden, so it doesn't become a scroll container) */
.choose-us-wrapper {
  overflow-x: clip;
}

/* choose-us feature titles: larger, bolder, with a brand gradient wordmark
   treatment so the headings read as attractive, eye-catching feature titles.
   (Selector matches the theme's depth so font-size/display actually win; it's
   forced to block so the title always sits BELOW the icon, never inline.) */
.choose-us-1 .choose-us-content .icon-box .single-icon-box h4 {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  background: linear-gradient(84deg, #3fb5fd 0%, #0b6eda 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* icon sits on its own line above the title, a touch larger and evenly spaced */
.choose-us-1 .choose-us-content .icon-box .single-icon-box .icon {
  display: block;
  font-size: 48px;
  margin-bottom: 22px;
  line-height: 1;
}
/* breathing room between the two rows of feature boxes */
.choose-us-1 .choose-us-content .icon-box .single-icon-box {
  margin-bottom: 12px;
}

/* blog turned into a one-card-at-a-time slider. Lay each card out horizontally
   with the text on the LEFT and the image on the RIGHT (row-reverse), drop the
   theme's notch mask + hover zoom, and add depth with a soft shadow and a
   subtle hover lift so it feels more polished. */
.blog-1 .blog-coming-soon {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, #3fb5fd 0%, #0b6eda 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 575px) {
  .blog-1 .blog-coming-soon { font-size: 34px; margin-bottom: 14px; }
}
.blog-1 .blog-slider {
  overflow: hidden;
}
/* widen the blog section's container so the slider card can grow past the
   default ~1140px grid width */
@media (min-width: 1200px) {
  .blog-1 .container {
    max-width: 1360px;
  }
}
.blog-1 .blog-slider .single-blog-item {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 50px;
  padding: 35px;
  box-shadow: 0 20px 50px rgba(0, 13, 39, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.blog-1 .blog-slider .single-blog-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 13, 39, 0.13);
}
.blog-1 .blog-slider .single-blog-item .image {
  -webkit-mask: none;
  mask: none;
  flex: 0 0 45%;
  max-width: 45%;
  height: 320px;
  overflow: hidden;
  border-radius: 16px;
}
.blog-1 .blog-slider .single-blog-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.blog-1 .blog-slider .single-blog-item:hover .image img {
  transform: none;
}
.blog-1 .blog-slider .single-blog-item .content {
  flex: 1;
  margin-top: 0;
  padding-left: 10px;
}
@media (max-width: 767px) {
  .blog-1 .blog-slider .single-blog-item {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }
  .blog-1 .blog-slider .single-blog-item .image {
    flex: 1 1 auto;
    max-width: 100%;
    height: 220px;
  }
  .blog-1 .blog-slider .single-blog-item .content {
    padding-left: 0;
  }
}
.blog-1 .blog-slider-arrows {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 45px;
}
.blog-1 .blog-slider-arrows button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #d9e1ec;
  background: #fff;
  color: #000d27;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.blog-1 .blog-slider-arrows button:hover {
  background: #3fb5fd;
  border-color: #3fb5fd;
  color: #fff;
}

/* Working process: a DARK, blue-themed centred timeline that sits on the navy
   process background. A blue gradient line runs down the middle with a navy
   circular marker on it at each step; the step cards alternate sides (01 left,
   02 right, 03 left) and use translucent navy backgrounds with light text so
   every element stays in the same blue family as the background. */
.process-1 .ai-timeline {
  position: relative;
  max-width: 860px;
  margin: 55px auto 0;
  display: flex;
  flex-direction: column;
  gap: 55px;
}
/* central blue gradient line */
.process-1 .ai-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #3fb5fd 0%, #1e8fe1 50%, #0b6eda 100%);
  z-index: 0;
}
/* small dots that cap the ends of the line */
.process-1 .ai-line-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 2;
}
.process-1 .ai-line-dot-top {
  top: -6px;
  background: #3fb5fd;
}
.process-1 .ai-line-dot-bottom {
  bottom: -6px;
  background: #0b6eda;
}
.process-1 .ai-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 130px;
}
/* navy circular marker, absolutely pinned to the TOP-CENTRE of each step so it
   always lines up with the top of that step's card (independent of card
   height). Transitions let it glow when active. */
.process-1 .ai-step .ai-step-icon {
  position: absolute;
  left: 50%;
  margin-left: -46px;
  top: 8px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #122a63;
  border: 1px solid rgba(120, 160, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  transition: box-shadow 0.45s ease, transform 0.45s ease,
    border-color 0.45s ease;
}
/* scroll glow: the step currently in the middle of the viewport lights up */
.process-1 .ai-step.active .ai-step-icon {
  transform: scale(1.1);
  border-color: rgba(120, 160, 255, 0.65);
}
.process-1 .ai-step.active:nth-child(2) .ai-step-icon {
  box-shadow: 0 0 0 10px rgba(63, 181, 253, 0.16),
    0 0 45px rgba(63, 181, 253, 0.8);
}
.process-1 .ai-step.active:nth-child(3) .ai-step-icon {
  box-shadow: 0 0 0 10px rgba(30, 143, 225, 0.16),
    0 0 45px rgba(30, 143, 225, 0.8);
}
.process-1 .ai-step.active:nth-child(4) .ai-step-icon {
  box-shadow: 0 0 0 10px rgba(11, 110, 218, 0.16),
    0 0 45px rgba(11, 110, 218, 0.8);
}
/* CARD: translucent navy panel (blue family) with light text; photo on top
   with the number badge, then the body with title + description */
.process-1 .ai-step .ai-step-card {
  max-width: 360px;
  background: rgba(18, 37, 92, 0.55);
  border: 1px solid rgba(120, 160, 255, 0.16);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
  text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.process-1 .ai-step .ai-step-card:hover {
  transform: translateY(-5px);
  border-color: rgba(120, 160, 255, 0.4);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45);
}
.process-1 .ai-step.left .ai-step-card {
  grid-column: 1;
  justify-self: end;
}
.process-1 .ai-step.right .ai-step-card {
  grid-column: 2;
  justify-self: start;
}
.process-1 .ai-step .ai-card-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.process-1 .ai-step .ai-card-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.process-1 .ai-step .ai-step-num {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}
.process-1 .ai-step .ai-card-body {
  padding: 18px 8px 8px;
}
.process-1 .ai-step .ai-step-card h4 {
  margin-bottom: 10px;
  font-weight: 800;
}
.process-1 .ai-step .ai-step-card p {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}
/* per-step accents, all within the blue family (light -> mid -> deep blue) */
.process-1 .ai-step:nth-child(2) .ai-step-icon i,
.process-1 .ai-step:nth-child(2) h4 {
  color: #3fb5fd;
}
.process-1 .ai-step:nth-child(2) .ai-step-icon {
  box-shadow: 0 0 0 8px rgba(63, 181, 253, 0.08),
    0 12px 30px rgba(63, 181, 253, 0.25);
}
.process-1 .ai-step:nth-child(2) .ai-step-num {
  background: #3fb5fd;
}
.process-1 .ai-step:nth-child(3) .ai-step-icon i,
.process-1 .ai-step:nth-child(3) h4 {
  color: #4aa3ff;
}
.process-1 .ai-step:nth-child(3) .ai-step-icon {
  box-shadow: 0 0 0 8px rgba(30, 143, 225, 0.08),
    0 12px 30px rgba(30, 143, 225, 0.25);
}
.process-1 .ai-step:nth-child(3) .ai-step-num {
  background: #1e8fe1;
}
.process-1 .ai-step:nth-child(4) .ai-step-icon i,
.process-1 .ai-step:nth-child(4) h4 {
  color: #5aa0ff;
}
.process-1 .ai-step:nth-child(4) .ai-step-icon {
  box-shadow: 0 0 0 8px rgba(11, 110, 218, 0.08),
    0 12px 30px rgba(11, 110, 218, 0.25);
}
.process-1 .ai-step:nth-child(4) .ai-step-num {
  background: #0b6eda;
}
@media (max-width: 767px) {
  .process-1 .ai-timeline::before,
  .process-1 .ai-line-dot {
    left: 48px;
  }
  .process-1 .ai-step {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-left: 96px;
  }
  .process-1 .ai-step .ai-step-icon {
    left: 10px;
    margin-left: 0;
    width: 76px;
    height: 76px;
    font-size: 30px;
  }
  .process-1 .ai-step.left .ai-step-card,
  .process-1 .ai-step.right .ai-step-card {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

/* features-1: cards now hold variable-length bullet lists, so replace the
   theme's fixed 373px height with an auto height. Stretch every card in a row
   to match the tallest one via flex so they stay visually aligned. */
.features-1 .row {
  display: flex;
  flex-wrap: wrap;
}
.features-1 .row > [class*="col-"] {
  display: flex;
}
.features-1 .single-feature-item {
  height: auto;
  width: 100%;
}

/* footer contact: the theme styles EVERY .contact a as a 55px round icon
   button, which also caught the email text link and rendered it as a broken
   circle. Match the theme's specificity and reset only the email link inside
   h5 back to plain inline text (the leading envelope icon keeps its circle). */
.footer-widgets-1
  .single-footer-widget
  .footer-content
  .contact-info-area
  .contact
  .contact-infu
  h5
  a {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: inline;
  align-items: initial;
  justify-content: initial;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  word-break: break-word;
  transition: color 0.3s ease;
}
.footer-widgets-1
  .single-footer-widget
  .footer-content
  .contact-info-area
  .contact
  .contact-infu
  h5
  a:hover {
  color: #05f;
}

/* ===== Service detail pages ===== */
@keyframes svcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}
@keyframes svcSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.svc-float {
  animation: svcFloat 4s ease-in-out infinite;
}

.svc-detail-overview {
  position: relative;
  overflow: hidden;
}
.svc-detail-overview .svc-float-shapes .sh {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.svc-detail-overview .svc-float-shapes .sh-1 {
  top: -60px; right: -80px; width: 320px; opacity: 0.06;
  animation: svcSpin 60s linear infinite;
}
.svc-detail-overview .svc-float-shapes .sh-2 {
  bottom: 40px; left: -40px; width: 120px; opacity: 0.5;
  animation: svcFloat 6s ease-in-out infinite;
}
.svc-detail-overview .svc-float-shapes .sh-3 {
  top: 80px; left: 45%; width: 90px; opacity: 0.35;
  animation: svcFloat 5s ease-in-out infinite;
}
.svc-detail-overview .container { position: relative; z-index: 2; }
.svc-detail-overview .svc-intro {
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 18px;
}
.svc-highlights {
  margin-top: 10px;
}
.svc-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--header);
  font-weight: 500;
}
.svc-highlights li i {
  color: var(--theme);
  font-size: 18px;
  margin-top: 3px;
}

/* floating hero with orbiting icons */
.svc-hero {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-hero-ring {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 2px dashed rgba(63, 181, 253, 0.35);
  animation: svcSpin 40s linear infinite;
}
.svc-hero-ring::after {
  content: "";
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1px solid rgba(11, 110, 218, 0.18);
}
.svc-hero-icon {
  position: relative;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 78px;
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  box-shadow: 0 30px 70px rgba(11, 110, 218, 0.35);
}
.svc-hero .svc-orbit {
  position: absolute;
  z-index: 3;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--theme);
  box-shadow: 0 12px 30px rgba(10, 6, 68, 0.12);
}
.svc-hero .svc-orbit-1 { top: 20px; right: 60px; animation: svcFloat 4s ease-in-out infinite; }
.svc-hero .svc-orbit-2 { bottom: 40px; right: 30px; animation: svcFloat 5s ease-in-out infinite 0.5s; }
.svc-hero .svc-orbit-3 { bottom: 60px; left: 40px; animation: svcFloat 4.5s ease-in-out infinite 1s; }

/* coming soon */
.svc-coming .svc-coming-inner .icon {
  font-size: 70px;
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 20px;
}
.svc-coming .svc-coming-inner p {
  max-width: 560px;
  margin: 14px auto 28px;
  color: var(--text);
}

/* service-detail flip cards */
/* centre an incomplete last row (e.g. 5 cards -> bottom 2 sit centred) */
.svc-flip-grid {
  justify-content: center;
}
.svc-flip-grid .flip-card {
  position: relative;
  width: 100%;
  height: 260px;
  perspective: 1400px;
}
.svc-flip-grid .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.svc-flip-grid .flip-card:hover .flip-card-inner,
.svc-flip-grid .flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}
.svc-flip-grid .flip-card-front,
.svc-flip-grid .flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.svc-flip-grid .flip-card-front {
  background: #fff;
  border: 1px solid rgba(63, 181, 253, 0.14);
  box-shadow: 0 18px 44px rgba(10, 6, 68, 0.07);
  transition: box-shadow 0.4s ease;
}
.svc-flip-grid .flip-card:hover .flip-card-front {
  box-shadow: 0 26px 60px rgba(11, 110, 218, 0.18);
}
.svc-flip-grid .flip-card-front .icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(84deg, #3fb5fd 0%, #0b6eda 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.svc-flip-grid .flip-card-front h4 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  color: var(--header);
}
.svc-flip-grid .flip-card-front .flip-hint {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--theme);
  opacity: 0.7;
}
.svc-flip-grid .flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  box-shadow: 0 26px 60px rgba(11, 110, 218, 0.22);
}
.svc-flip-grid .flip-card-back h5 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
}
.svc-flip-grid .flip-card-back p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .svc-hero { height: 320px; }
  .svc-detail-overview .svc-float-shapes .sh-3 { display: none; }
}

/* --- per-page accent applied to shared service-detail elements --- */
.svc-page .svc-hero-icon {
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
}
.svc-page .svc-hero-ring {
  border-color: var(--acc1);
  opacity: 0.9;
}
.svc-page .svc-highlights li i {
  color: var(--acc1);
}
.svc-page .svc-flip-grid .flip-card-front .icon {
  background: linear-gradient(84deg, var(--acc1), var(--acc2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.svc-page .svc-flip-grid .flip-card-back {
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
}

/* --- variant: timeline (AI Sales Automation) --- */
.svc-hero-stat {
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: auto;
}
.svc-stat-main {
  width: 150px;
  height: 150px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: #fff;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}
.svc-stat-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 50px;
  padding: 14px 26px;
  box-shadow: 0 14px 34px rgba(10, 6, 68, 0.08);
  font-weight: 600;
  color: var(--header);
  max-width: 380px;
}
.svc-stat-pill i {
  color: var(--acc1);
  font-size: 20px;
}
.svc-stat-pill.sp-0 { align-self: flex-start; }
.svc-stat-pill.sp-2 { align-self: flex-end; }

.svc-timeline {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.svc-timeline::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--acc1), var(--acc2));
  opacity: 0.35;
}
.svc-tl-item {
  position: relative;
  padding-left: 96px;
  margin-bottom: 26px;
}
.svc-tl-num {
  position: absolute;
  left: 0;
  top: 6px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.svc-tl-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 14px 40px rgba(10, 6, 68, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.svc-tl-item:hover .svc-tl-card {
  transform: translateX(8px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.12);
}
.svc-tl-icon { font-size: 34px; color: var(--acc1); line-height: 1; }
.svc-tl-card h4 { font-size: 19px; margin: 0 0 6px; color: var(--header); }
.svc-tl-card p { margin: 0; color: var(--text); }

/* --- variant: zigzag (Marketing) --- */
.svc-hero-media .svc-media-card {
  width: 230px;
  height: 230px;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 88px;
  color: #fff;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
  transform: rotate(-6deg);
}
.svc-hero-media .svc-chip {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--acc1);
  box-shadow: 0 14px 34px rgba(10, 6, 68, 0.14);
}
.svc-hero-media .ch-1 { top: 30px; right: 70px; animation: svcFloat 4s ease-in-out infinite; }
.svc-hero-media .ch-2 { bottom: 60px; right: 40px; animation: svcFloat 5s ease-in-out infinite 0.5s; }
.svc-hero-media .ch-3 { bottom: 40px; left: 60px; animation: svcFloat 4.5s ease-in-out infinite 1s; }

.svc-zigzag { display: flex; flex-direction: column; gap: 26px; }
.svc-zz-row {
  display: flex;
  align-items: center;
  gap: 34px;
  background: #fff;
  border-radius: 20px;
  padding: 26px 34px;
  box-shadow: 0 14px 40px rgba(10, 6, 68, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.svc-zz-row.reverse { flex-direction: row-reverse; }
.svc-zz-row:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(10, 6, 68, 0.12); }
.svc-zz-visual {
  position: relative;
  flex: 0 0 130px;
  width: 130px;
  height: 130px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  color: #fff;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
}
.svc-zz-num {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--acc1);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.svc-zz-text h4 { font-size: 22px; margin: 0 0 8px; color: var(--header); }
.svc-zz-text p { margin: 0; color: var(--text); }
@media (max-width: 767px) {
  .svc-zz-row, .svc-zz-row.reverse { flex-direction: column; text-align: center; }
}

/* --- variant: chat (Voice Agent / Chatbot) --- */
.svc-hero-chat .svc-chatwin {
  width: 330px;
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}
.svc-chatwin-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 14px;
  color: var(--header);
}
.svc-chatwin-head .d { width: 10px; height: 10px; border-radius: 50%; background: #e2e2e2; }
.svc-chatwin-head b { margin-left: 8px; font-size: 14px; }
.svc-msg { max-width: 75%; padding: 10px 15px; border-radius: 16px; margin-bottom: 10px; font-size: 14px; }
.svc-msg.in { background: #f1f3f7; color: var(--header); border-bottom-left-radius: 4px; }
.svc-msg.out {
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.svc-msg.typing { display: flex; gap: 5px; width: auto; max-width: 70px; }
.svc-msg.typing span { width: 8px; height: 8px; border-radius: 50%; background: #c3c8d2; animation: svcTyping 1.2s infinite; }
.svc-msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.svc-msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes svcTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
.svc-chatlist { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.svc-chat-row { display: flex; align-items: flex-end; gap: 16px; max-width: 82%; }
.svc-chat-row.left { align-self: flex-start; }
.svc-chat-row.right { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.svc-chat-avatar {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
}
.svc-chat-bubble { background: #fff; border-radius: 20px; padding: 20px 24px; box-shadow: 0 14px 40px rgba(10, 6, 68, 0.07); }
.svc-chat-row.left .svc-chat-bubble { border-bottom-left-radius: 4px; }
.svc-chat-row.right .svc-chat-bubble { border-bottom-right-radius: 4px; }
.svc-chat-bubble h5 { margin: 0 0 6px; color: var(--header); font-size: 17px; }
.svc-chat-bubble p { margin: 0; color: var(--text); font-size: 14.5px; }

/* --- variant: dark (Infrastructure) --- */
.svc-dark-overview { background: #050b26; }
.svc-dark-overview .sub-title span,
.svc-dark-overview .svc-intro { color: rgba(255, 255, 255, 0.72); }
.svc-dark-overview h2,
.svc-dark-overview .svc-highlights li { color: #fff; }
.svc-dark-overview .svc-float-shapes .sh { opacity: 0.07 !important; }
.svc-hero-shield .svc-shield-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.28);
  animation: svcSpin 30s linear infinite;
}
.svc-hero-shield .svc-shield-ring::after {
  content: "";
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  border: 1px dashed rgba(56, 189, 248, 0.35);
}
.svc-hero-shield .svc-shield {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 170px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  color: #fff;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  box-shadow: 0 30px 70px rgba(30, 64, 175, 0.45);
}
.svc-sec-dark { background: #050b26; }
.svc-sec-dark .section-title h2 { color: #fff; }
.svc-dark-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 34px 28px;
  height: 100%;
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.svc-dark-card:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-8px);
  border-color: var(--acc1);
}
.svc-dark-card .icon {
  font-size: 44px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.svc-dark-card h4 { color: #fff; font-size: 19px; margin: 0 0 10px; }
.svc-dark-card p { color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* smaller font for the services / dropdown links */
.header-main .main-menu ul li .submenu li a {
  font-size: 12px;
}
.header-main .main-menu ul li .submenu li .submenu.re-submenu li a {
  font-size: 11px;
}

/* home case-study cards: consistent image + content-box sizing */
.case-study-1 .single-case-item .image {
  height: 400px;
}
.case-study-1 .single-case-item .content .title h4 {
  min-height: 58px;
  display: flex;
  align-items: center;
}

/* ===== Projects showcase page ===== */
.projects-page [id^="project-"] { scroll-margin-top: 110px; }
.projects-page .pj-wrap { position: relative; overflow: hidden; }
.projects-page .pj-bg-shapes .sh-1 {
  position: absolute;
  top: 60px;
  right: -110px;
  width: 340px;
  opacity: 0.05;
  animation: svcSpin 70s linear infinite;
  pointer-events: none;
}
.projects-page .pj-wrap .container { position: relative; z-index: 2; }
.projects-page .pj-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 20px;
}
.projects-page .pj-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(10, 6, 68, 0.06);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(10, 6, 68, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.projects-page .pj-row:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px color-mix(in srgb, var(--acc2) 22%, rgba(10, 6, 68, 0.1));
}
.projects-page .pj-row.reverse { grid-template-columns: 1fr 340px; }
.projects-page .pj-row.reverse .pj-visual { order: 2; }

/* visual panel */
.projects-page .pj-visual {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--acc1) 0%, var(--acc2) 100%);
}
.projects-page .pj-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  z-index: 0;
}
/* image card: show the image in its natural colors (no overlay, no dots/number) */
.projects-page .pj-visual.has-img {
  background: none;
}
.projects-page .pj-visual.has-img .pj-bignum,
.projects-page .pj-visual.has-img .pj-dot {
  display: none;
}
.projects-page .pj-bignum {
  position: absolute;
  top: 6px;
  left: 22px;
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
}
.projects-page .pj-visual-icon {
  width: 130px;
  height: 130px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 62px;
  color: var(--acc2);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.projects-page .pj-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.projects-page .pj-dot-1 { width: 90px; height: 90px; bottom: -20px; right: -10px; }
.projects-page .pj-dot-2 { width: 46px; height: 46px; top: 40px; right: 40px; background: rgba(255, 255, 255, 0.14); }

/* content */
.projects-page .pj-content { padding: 16px 20px 16px 4px; }
.projects-page .pj-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--acc2);
  background: color-mix(in srgb, var(--acc1) 14%, #fff);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.projects-page .pj-content h3 {
  font-size: 26px;
  color: var(--header);
  margin: 0 0 16px;
}
.projects-page .pj-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.projects-page .pj-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: #4a5568;
  background: #f2f5fa;
  border: 1px solid #e6ebf3;
  padding: 6px 14px;
  border-radius: 8px;
}
.projects-page .pj-desc {
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 22px;
}
.projects-page .pj-results {
  border-top: 1px dashed rgba(10, 6, 68, 0.12);
  padding-top: 20px;
}
.projects-page .pj-results h6 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc2);
  margin-bottom: 14px;
}
.projects-page .pj-results ul { margin: 0; }
.projects-page .pj-results li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--header);
  font-weight: 500;
  margin-bottom: 10px;
}
.projects-page .pj-results li i {
  color: var(--acc1);
  font-size: 16px;
  margin-top: 4px;
}
@media (max-width: 991px) {
  .projects-page .pj-row,
  .projects-page .pj-row.reverse {
    grid-template-columns: 1fr;
  }
  .projects-page .pj-row.reverse .pj-visual { order: 0; }
  .projects-page .pj-visual { min-height: 220px; }
}

/* ===== About page (immersive redesign) ===== */
.about-page .ab-text { color: var(--text); line-height: 1.85; margin-bottom: 22px; }

/* --- immersive dark hero --- */
.about-page .ab-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #e9f2ff 0%, #f4f8ff 58%);
  padding: 190px 0 110px;
}
.about-page .ab-hero .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
}
.about-page .ab-hero .orb-1 {
  width: 460px; height: 460px; top: -160px; left: -120px; opacity: 0.28;
  background: radial-gradient(circle, #3fb5fd 0%, transparent 70%);
  animation: svcFloat 9s ease-in-out infinite;
}
.about-page .ab-hero .orb-2 {
  width: 400px; height: 400px; bottom: -170px; right: -90px; opacity: 0.22;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  animation: svcFloat 11s ease-in-out infinite 0.6s;
}
.about-page .ab-hero .orb-3 {
  width: 300px; height: 300px; top: 30%; left: 55%; opacity: 0.16;
  background: radial-gradient(circle, #0b6eda 0%, transparent 70%);
  animation: svcFloat 8s ease-in-out infinite 1s;
}
.about-page .ab-hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(11,18,51,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,51,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  opacity: 0.6;
}
.about-page .ab-hero .container { position: relative; z-index: 2; }
.about-page .ab-hero-inner { max-width: 900px; margin: 0 auto; }
.about-page .ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--theme);
  background: rgba(63, 181, 253, 0.1);
  border: 1px solid rgba(63, 181, 253, 0.35);
  margin-bottom: 26px;
}
.about-page .ab-hero h1 {
  color: var(--header);
  font-size: 58px;
  line-height: 1.1;
  margin-bottom: 24px;
}
.about-page .ab-hero h1 .grad {
  background: linear-gradient(90deg, #3fb5fd 0%, #7c3aed 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.about-page .ab-hero-lead {
  color: var(--text);
  font-size: 17px;
  line-height: 1.85;
  max-width: 760px;
  margin: 0 auto;
}
.about-page .ab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.about-page .ab-stat {
  padding: 28px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(63, 181, 253, 0.16);
  box-shadow: 0 16px 40px rgba(10, 6, 68, 0.06);
}
.about-page .ab-stat h2 {
  font-size: 46px;
  margin: 0 0 6px;
  background: linear-gradient(90deg, #3fb5fd, #0b6eda);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.about-page .ab-stat p { margin: 0; color: var(--text); font-size: 14px; }
@media (max-width: 767px) {
  .about-page .ab-hero h1 { font-size: 38px; }
  .about-page .ab-stats { grid-template-columns: repeat(2, 1fr); }
}

/* --- who we are + what sets us apart --- */
.about-page .ab-usp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.about-page .usp-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(63, 181, 253, 0.14);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 14px 40px rgba(10, 6, 68, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.about-page .usp-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(11, 110, 218, 0.16);
  border-color: var(--theme);
}
.about-page .usp-num {
  position: absolute;
  top: 16px;
  right: 22px;
  font-size: 34px;
  font-weight: 800;
  color: rgba(63, 181, 253, 0.14);
}
.about-page .usp-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  box-shadow: 0 14px 30px rgba(11, 110, 218, 0.26);
}
.about-page .usp-card p { margin: 0; color: var(--text); font-weight: 500; line-height: 1.65; }
@media (max-width: 575px) { .about-page .ab-usp-grid { grid-template-columns: 1fr; } }

/* --- mission / vision contrasting panels --- */
.about-page .mv-panel {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 26px;
  padding: 50px 46px;
}
.about-page .mv-panel.mission { background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%); }
.about-page .mv-panel.vision {
  background: #050b26;
  border: 1px solid rgba(63, 181, 253, 0.22);
}
.about-page .mv-panel .watermark {
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 180px;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}
.about-page .mv-panel .mv-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.about-page .mv-panel h3 { color: #fff; font-size: 30px; margin: 0 0 16px; }
.about-page .mv-panel p { color: rgba(255, 255, 255, 0.85); line-height: 1.8; margin-bottom: 22px; position: relative; z-index: 2; }
.about-page .mv-panel ul { position: relative; z-index: 2; }
.about-page .mv-panel ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 12px;
}
.about-page .mv-panel ul li i {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

/* --- collaboration nodes --- */
.about-page .ab-nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}
.about-page .ab-node {
  background: #fff;
  border-radius: 22px;
  padding: 34px 40px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(10, 6, 68, 0.08);
  border: 1px solid rgba(63, 181, 253, 0.14);
  min-width: 230px;
}
.about-page .ab-node-logo {
  height: 80px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-page .ab-node-logo img {
  max-height: 80px;
  max-width: 170px;
  object-fit: contain;
}
.about-page .ab-node h4 { margin: 0; color: var(--header); font-size: 20px; }
.about-page .ab-node-link {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #3fb5fd, #7c3aed);
  box-shadow: 0 12px 30px rgba(63, 181, 253, 0.4);
  animation: svcFloat 3.5s ease-in-out infinite;
}
.about-page .ab-collab2-text { max-width: 860px; margin: 34px auto 0; color: var(--text); line-height: 1.85; }
.about-page .ab-collab2-card {
  height: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 12px 34px rgba(10, 6, 68, 0.06);
  transition: transform 0.35s ease;
}
.about-page .ab-collab2-card:hover { transform: translateY(-6px); }
.about-page .ab-collab2-card i { color: var(--theme); font-size: 18px; margin-top: 3px; }
.about-page .ab-collab2-card p { margin: 0; color: var(--header); font-weight: 500; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 575px) { .about-page .ab-nodes { flex-direction: column; } }

/* --- team dark section --- */
.about-page .ab-team2 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, #0b1440 0%, #050b26 60%);
  padding: 120px 0;
}
.about-page .ab-team2 .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
}
.about-page .ab-team2 .orb-1 { width: 360px; height: 360px; top: -120px; right: -80px; opacity: 0.4; background: radial-gradient(circle, #0b6eda, transparent 70%); }
.about-page .ab-team2 .orb-2 { width: 300px; height: 300px; bottom: -120px; left: -70px; opacity: 0.3; background: radial-gradient(circle, #7c3aed, transparent 70%); }
.about-page .ab-team2 .container { position: relative; z-index: 2; }
.about-page .ab-team2 h2 { margin-bottom: 18px; }
.about-page .ab-team2-text { color: rgba(255, 255, 255, 0.7); line-height: 1.85; margin-bottom: 26px; }
.about-page .ab-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-page .ab-team-img {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  animation: svcFloat 6s ease-in-out infinite;
}
.about-page .ab-team-img-1 { animation-delay: 0.4s; margin-top: 34px; }
.about-page .ab-team-img-2 { animation-delay: 0.8s; }
.about-page .ab-team-img-3 { animation-delay: 1.2s; margin-top: 34px; }
.about-page .ab-team-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-page .ab-quote2 {
  position: relative;
  padding: 28px 30px 28px 76px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(63, 181, 253, 0.25);
  box-shadow: 0 0 40px rgba(63, 181, 253, 0.12);
}
.about-page .ab-quote2 i { position: absolute; left: 26px; top: 24px; font-size: 34px; color: var(--theme); }
.about-page .ab-quote2 p { margin: 0; color: #fff; font-weight: 600; font-style: italic; }


/* ===== Contact page ===== */
.contact-page .c-info {
  position: relative;
  overflow: hidden;
}
.contact-page .c-shapes .sh {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.contact-page .c-shapes .sh-1 {
  top: -70px;
  right: -90px;
  width: 320px;
  opacity: 0.06;
  animation: svcSpin 60s linear infinite;
}
.contact-page .c-shapes .sh-2 {
  bottom: 30px;
  left: -30px;
  width: 110px;
  opacity: 0.45;
  animation: svcFloat 6s ease-in-out infinite;
}
.contact-page .c-shapes .sh-3 {
  top: 120px;
  right: 8%;
  width: 80px;
  opacity: 0.3;
  animation: svcFloat 5s ease-in-out infinite;
}
.contact-page .c-info .container { position: relative; z-index: 2; }

/* floating info cards */
.contact-page .c-info-card {
  position: relative;
  height: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(63, 181, 253, 0.14);
  border-radius: 18px;
  padding: 38px 24px 30px;
  box-shadow: 0 14px 40px rgba(10, 6, 68, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.contact-page .c-info-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(11, 110, 218, 0.16);
  border-color: var(--theme);
}
.contact-page .c-info-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  box-shadow: 0 16px 34px rgba(11, 110, 218, 0.28);
}
.contact-page .c-info-card h5 {
  font-size: 18px;
  font-weight: 700;
  color: var(--header);
  margin: 0 0 8px;
}
.contact-page .c-info-card a,
.contact-page .c-info-card p {
  color: var(--text);
  margin: 0;
  font-weight: 500;
  transition: color 0.3s ease;
}
.contact-page .c-info-card a:hover { color: var(--theme); }

/* form card + map */
.contact-page .c-form-card {
  background: #fff;
  border-radius: 22px;
  padding: 44px;
  height: 100%;
  box-shadow: 0 24px 60px rgba(10, 6, 68, 0.08);
  border: 1px solid rgba(63, 181, 253, 0.1);
}
@media (max-width: 575px) {
  .contact-page .c-form-card { padding: 28px; }
}
.contact-page .c-form-card .form-clt {
  position: relative;
}
.contact-page .c-form-card .form-clt input,
.contact-page .c-form-card .form-clt select,
.contact-page .c-form-card .form-clt textarea {
  width: 100%;
  background: #f5f8fd;
  border: 1.5px solid #e6ebf3;
  border-radius: 14px;
  padding: 17px 20px;
  color: var(--header);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
/* leading icons */
.contact-page .c-form-card .form-clt.has-icon input,
.contact-page .c-form-card .form-clt.has-icon select,
.contact-page .c-form-card .form-clt.has-icon textarea {
  padding-left: 52px;
}
.contact-page .c-form-card .form-clt .field-icon {
  position: absolute;
  left: 20px;
  top: 19px;
  font-size: 18px;
  color: #9aa6bd;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 2;
}
.contact-page .c-form-card .form-clt.has-icon-top .field-icon {
  top: 20px;
}
.contact-page .c-form-card .form-clt select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233FB5FD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
}
/* the theme runs jQuery niceSelect() on every <select>, replacing it with a
   .nice-select div — style that div so it matches the other fields */
.contact-page .c-form-card .form-clt .nice-select {
  width: 100%;
  height: auto;
  line-height: 1.4;
  background: #f5f8fd;
  border: 1.5px solid #e6ebf3;
  border-radius: 14px;
  padding: 17px 44px 17px 52px;
  color: var(--header);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.contact-page .c-form-card .form-clt .nice-select .current {
  color: var(--header);
  font-weight: 500;
}
.contact-page .c-form-card .form-clt .nice-select::after {
  right: 22px;
  width: 8px;
  height: 8px;
  border-color: var(--theme);
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.contact-page .c-form-card .form-clt .nice-select.open,
.contact-page .c-form-card .form-clt .nice-select:focus {
  border-color: var(--theme);
  background: #fff;
  box-shadow: 0 8px 26px rgba(63, 181, 253, 0.18);
}
.contact-page .c-form-card .form-clt .nice-select .list {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e6ebf3;
  box-shadow: 0 20px 50px rgba(10, 6, 68, 0.12);
  padding: 6px;
  margin-top: 8px;
}
.contact-page .c-form-card .form-clt .nice-select .option {
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  min-height: 40px;
}
.contact-page .c-form-card .form-clt .nice-select .option.selected {
  font-weight: 600;
}
.contact-page .c-form-card .form-clt .nice-select .option:hover,
.contact-page .c-form-card .form-clt .nice-select .option.focus,
.contact-page .c-form-card .form-clt .nice-select .option.selected.focus {
  background: rgba(63, 181, 253, 0.12);
  color: var(--theme);
}
.contact-page .c-form-card .form-clt:focus-within .field-icon,
.contact-page .c-form-card .form-clt.has-select-open .field-icon {
  color: var(--theme);
}

.contact-page .c-form-card .form-clt textarea {
  min-height: 170px;
  resize: vertical;
}
.contact-page .c-form-card .form-clt input::placeholder,
.contact-page .c-form-card .form-clt textarea::placeholder {
  color: #9aa6bd;
  font-weight: 400;
}
.contact-page .c-form-card .form-clt input:focus,
.contact-page .c-form-card .form-clt select:focus,
.contact-page .c-form-card .form-clt textarea:focus {
  border-color: var(--theme);
  background: #fff;
  box-shadow: 0 8px 26px rgba(63, 181, 253, 0.18);
}
.contact-page .c-form-card .form-clt:focus-within .field-icon {
  color: var(--theme);
}
.contact-page .c-form-card .theme-btn {
  width: 100%;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

/* ===== Real-estate page ===== */
/* nested 12-module submenu: cap height + open to the left so it never overflows */
.header-main .main-menu ul li .submenu li .submenu.re-submenu {
  inset-inline-start: auto;
  inset-inline-end: 100%;
  width: 330px;
  max-height: 78vh;
  overflow-y: auto;
}

.re-page [id^="module-"] {
  scroll-margin-top: 110px;
}
.re-intro {
  position: relative;
  overflow: hidden;
}
.re-intro .re-shapes .sh-1 {
  position: absolute;
  top: -70px;
  right: -90px;
  width: 320px;
  opacity: 0.06;
  animation: svcSpin 60s linear infinite;
}
.re-intro .container {
  position: relative;
  z-index: 2;
}
.re-lead {
  max-width: 900px;
  margin: 0 auto;
  color: var(--text);
  line-height: 1.85;
}

/* overview grid of 12 module cards */
.re-grid .re-card {
  position: relative;
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(63, 181, 253, 0.14);
  border-radius: 18px;
  padding: 34px 26px 26px;
  box-shadow: 0 14px 40px rgba(10, 6, 68, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}
.re-grid .re-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(84deg, var(--theme) 0%, var(--theme-2, #0b6eda) 100%);
  transition: transform 0.4s ease;
}
.re-grid .re-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(11, 110, 218, 0.16);
  border-color: var(--theme);
}
.re-grid .re-card:hover::before {
  transform: scaleX(1);
}
.re-grid .re-card-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: rgba(63, 181, 253, 0.16);
}
.re-grid .re-card-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(84deg, #3fb5fd 0%, #0b6eda 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.re-grid .re-card h5 {
  font-size: 18px;
  font-weight: 700;
  color: var(--header);
  margin: 0 0 16px;
  line-height: 1.4;
}
.re-grid .re-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--theme);
  font-size: 15px;
}
.re-grid .re-card-link i {
  transition: transform 0.35s ease;
}
.re-grid .re-card:hover .re-card-link i {
  transform: translateX(6px);
}

/* module detail sections */
.re-module-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.re-module-num {
  position: absolute;
  font-size: 180px;
  font-weight: 800;
  line-height: 1;
  color: rgba(63, 181, 253, 0.08);
  z-index: 0;
}
.re-module-icon {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 170px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 74px;
  color: #fff;
  background: linear-gradient(135deg, #3fb5fd 0%, #0b6eda 100%);
  box-shadow: 0 30px 70px rgba(11, 110, 218, 0.3);
}
.re-module-content .sub-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.re-badge {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(84deg, #f59e0b, #f97316);
  padding: 4px 10px;
  border-radius: 20px;
}
.re-module-content h3 {
  font-size: 32px;
  margin: 8px 0 6px;
  color: var(--header);
}
.re-module-tagline {
  color: var(--theme);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 22px;
}
.re-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 500;
}
.re-points li i {
  color: var(--theme);
  font-size: 18px;
  margin-top: 3px;
}
@media (max-width: 991px) {
  .re-module-num { font-size: 120px; }
  .re-module-content h3 { font-size: 26px; }
}

/* ===== Tools / Technologies logo bubbles (connected honeycomb w/ cutout) ===== */
.tools-panel {
  --seam: var(--bg); /* cutout seams = section background so nothing looks like a card */
  max-width: 760px;
  margin: 10px auto 20px; /* lift bubbles up, keep clear of the dark section below */
  background: none;
  border: none;
  padding: 24px;
}
.tools-hive {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hive-row {
  display: flex;
  justify-content: center;
}
.hive-row + .hive-row {
  margin-top: -34px; /* nestle the second row up into the first row's gaps */
}
.tool-badge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -4px; /* attach bubbles horizontally */
  position: relative;
  box-shadow: 0 0 0 8px var(--seam), 0 14px 30px rgba(10, 6, 68, 0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tool-badge:hover {
  transform: translateY(-6px);
  z-index: 5;
  box-shadow: 0 0 0 8px var(--seam), 0 20px 44px rgba(11, 110, 218, 0.2);
}
.tool-badge img {
  max-width: 60px;
  max-height: 46px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .tools-panel { padding: 34px 14px; border-radius: 26px; }
  .tool-badge {
    width: 84px;
    height: 84px;
    margin: 0 -3px;
    box-shadow: 0 0 0 6px var(--seam), 0 10px 24px rgba(10, 6, 68, 0.1);
  }
  .tool-badge:hover { box-shadow: 0 0 0 6px var(--seam), 0 14px 30px rgba(11, 110, 218, 0.2); }
  .hive-row + .hive-row { margin-top: -22px; }
  .tool-badge img { max-width: 44px; max-height: 36px; }
}

/* ===== Mobile-only sliders (Features, Service cards, Why-choose flip cards) ===== */
@media (max-width: 767px) {
  /* hide the why-choose subject animation on mobile */
  .choose-us-1 .choose-us-images {
    display: none;
  }
  /* Features: single centred column on mobile (no slider) */
  .features-1 .row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .features-1 .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
  }
  .features-1 .single-feature-item {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .service-1 .service-inner .row.mt-4,
  .choose-us-1 .why-flip-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .service-1 .service-inner .row.mt-4::-webkit-scrollbar,
  .choose-us-1 .why-flip-grid::-webkit-scrollbar {
    display: none;
  }
  .service-1 .service-inner .row.mt-4 > [class*="col-"] {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  .choose-us-1 .why-flip-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }
  /* hint that there is more to swipe */
  .service-1 .service-inner,
  .choose-us-1 .choose-us-content {
    position: relative;
  }
}

/* Services-page "Let's Talk" marquee band (CTA box overlaps its top) */
.lets-talk-section {
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: 55px;
}
.lets-talk-section .marquee-section .cmn-textslide img,
.lets-talk-section .scrolling-wrap img {
  max-width: none;
}

/* Services-page testimonial: distinct quote-card grid (different from home) */
.service-testimonial {
  background: var(--bg);
}
.service-testimonial .st-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 32px;
  height: 100%;
  box-shadow: 0 18px 44px rgba(10, 6, 68, 0.06);
  border: 1px solid rgba(63, 181, 253, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.service-testimonial .st-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(84deg, #3fb5fd 0%, #0b6eda 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.service-testimonial .st-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(11, 110, 218, 0.16);
}
.service-testimonial .st-card:hover::before {
  transform: scaleX(1);
}
.service-testimonial .st-quote {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(84deg, #3fb5fd 0%, #0b6eda 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.9;
}
.service-testimonial .st-stars {
  color: var(--ratting);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.service-testimonial .st-text {
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 26px;
}
.service-testimonial .st-author {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 22px;
  border-top: 1px solid rgba(10, 6, 68, 0.08);
}
.service-testimonial .st-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.service-testimonial .st-meta h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--header);
}
.service-testimonial .st-meta span {
  color: var(--theme);
  font-size: 14px;
  font-weight: 500;
}

/* services breadcrumb: show the banner image in its natural colors (no tint) */
.breadcrumb-wrapper::before {
  background: none !important;
}

/* about-2: keep the circle only on the icon link, not the email text link
   (the theme's .contact-us a rule was turning the email into a stray circle) */
.about-2 .about-content .infu .contact-us .text a {
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline;
  font-size: inherit;
  color: var(--white);
}

/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/main.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Colors 
@import 'colors';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // Content Block - Section 
 @import 'contentblock';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // Download - Section 
 @import 'carousel';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer';n facts */