@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
  --ink: #090909;
  --ink-2: #171717;
  --paper: #fff;
  --soft: #f5f5f2;
  --line: #deded8;
  --muted: #70706b;
  --accent: #b7ff3c;
  --accent-2: #d8ff9b;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
  
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, sans-serif;
  overflow-x: hidden;
}
.font-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}
.selection\:bg-\[\#F1966E\]::selection {
  background: var(--accent);
  color: var(--ink);
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
::selection {
  background: var(--accent);
  color: var(--ink);
}
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #eee;
}
::-webkit-scrollbar-thumb {
  background: #111;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  z-index: 100001;
  transform-origin: left;
}
#cursor-dot,
#cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 100000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
@media (min-width: 992px) {
  #cursor-dot {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--ink);
  }
  #cursor-ring {
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(9, 9, 9, 0.45);
    transition:
      width 0.25s var(--ease),
      height 0.25s var(--ease),
      background 0.25s,
      border 0.25s;
  }
  .cursor-hover #cursor-ring {
    width: 62px;
    height: 62px;
    background: rgba(183, 255, 60, 0.16);
    border-color: var(--ink);
  }
}
#page-preloader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: #fff;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#page-preloader:after {
  content: "";
  position: absolute;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(100px);
  opacity: 0.18;
  animation: loaderGlow 2.5s ease-in-out infinite alternate;
}


.loader-core {
  position: relative;
  z-index: 2;
  text-align: center;
}
.loader-spinner {
  width: 74px;
  height: 74px;
  margin-left: 85px;
}
.loader-spinner .path {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 90 150;
  animation: dash 1.2s ease-in-out infinite;
}
.loader-brand {
  font: 700 22px "Space Grotesk";
  letter-spacing: 0.14em;
  margin-top: 20px;
}
.loader-sub {
  font: 500 10px "DM Mono";
  letter-spacing: 0.18em;
  color: #aaa;
  margin-top: 8px;
}
@keyframes dash {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: -55;
  }
  100% {
    stroke-dashoffset: -190;
  }
}
@keyframes loaderGlow {
  to {
    transform: scale(1.3);
    opacity: 0.3;
  }
}











.topbar {
  background: var(--ink);
  color: #aaa;
  border-bottom: 1px solid #272727;
  font: 500 11px "DM Mono";
  letter-spacing: 0.04em;
}
.topbar a {
  color: #ddd;
}
.topbar a:hover {
  color: var(--accent);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: 0.45s var(--ease) !important;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}
.site-header img {
  filter: grayscale(1);
  transition: 0.3s;
}
.site-header img:hover {
  filter: grayscale(0);
}
.site-header .nav-link {
  position: relative;
  color: var(--ink) !important;
  font: 700 13px Manrope !important;
  letter-spacing: -0.01em;
}
.site-header .nav-link:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--accent);
  transition: right 0.35s var(--ease);
}
.site-header .nav-link:hover:after,
.site-header .nav-link.active:after {
  right: 0;
}
.site-header .nav-link.active {
  font-weight: 800 !important;
}
.nav-cta,
.btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  position: relative;
  overflow: hidden;
}
.nav-cta:before,
.btn-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(105%);
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.nav-cta:hover:before,
.btn-primary:hover:before {
  transform: translateY(0);
}
.nav-cta > *,
.btn-primary > * {
  position: relative;
  z-index: 1;
}
.nav-cta:hover,
.btn-primary:hover {
  color: var(--ink) !important;
}
.mobile-menu {
  background: rgba(9, 9, 9, 0.97) !important;
}
.mobile-menu a {
  font-family: "Space Grotesk" !important;
}
.mobile-menu a:hover {
  color: var(--accent) !important;
  transform: translateX(8px);
}
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink) !important;
  color: #fff !important;
  padding: clamp(80px, 11vw, 150px) 0 !important;
}
.page-hero:before {
  content: "";
  position: absolute;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(100px);
  opacity: 0.11;
  right: -12vw;
  top: -20vw;
}
.page-hero .hero-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.page-hero h1 {
  font-size: clamp(42px, 6vw, 84px);
  line-height: 0.94;
  max-width: 900px;
}
.page-hero nav {
  font: 500 11px "DM Mono";
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.eyebrow,
.section-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  color: var(--ink) !important;
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font: 800 10px "DM Mono" !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
.section-title {
  font-size: clamp(34px, 4.5vw, 64px) !important;
  line-height: 0.98 !important;
  color: var(--ink) !important;
}
.section-copy {
  color: var(--muted) !important;
}
.hero-swiper {
  height: min(850px, calc(100vh - 70px)) !important;
  min-height: 640px;
}
.hero-swiper .swiper-slide {
  overflow: hidden;
}
.hero-swiper .swiper-slide > img {
  opacity: 0.5 !important;
  transform: scale(1.06);
  transition: transform 8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-swiper .swiper-slide-active > img {
  transform: scale(1);
}
.hero-swiper .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 9, 9, 0.96),
    rgba(9, 9, 9, 0.55),
    rgba(9, 9, 9, 0.12)
  );
}
.hero-swiper h1 {
  font-size: clamp(48px, 7vw, 92px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.055em;
}
.hero-swiper p {
  color: #c7c7c7 !important;
}
.hero-swiper .hero-accent {
  color: var(--accent) !important;
}
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(5px);
  width: 45px !important;
  height: 54px !important;
  color: white !important;
}
.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
  background: var(--accent) !important;
  color: var(--ink) !important;
  transform: scale(1.08);
}
.hero-swiper .swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.35;
}
.hero-swiper .swiper-pagination-bullet-active {
  background: var(--accent) !important;
  opacity: 1 !important;
  width: 36px;
  border-radius: 20px;
}
.reveal,
.reveal-up,
.reveal-left,
.reveal-right {
  will-change: transform, opacity;
}
.split-line {
  overflow: hidden;
}
.split-line > span {
  display: inline-block;
}
.img-reveal {
  overflow: hidden;
  position: relative;
}
.img-reveal img {
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.img-reveal:hover img {
  transform: scale(1.06);
}
.img-reveal:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(1);
  transform-origin: bottom;
  z-index: 2;
}
.img-reveal.revealed:after {
  animation: wipe 0.9s var(--ease) forwards;
}
@keyframes wipe {
  to {
    transform: scaleY(0);
  }
}
.card-modern,
.hover-lift {
  position: relative;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease),
    border-color 0.4s;
}
.card-modern:hover,
.hover-lift:hover {
  transform: translateY(-10px);
  border-color: #aaa !important;
  box-shadow: var(--shadow) !important;
}
.card-modern:before,
.hover-lift:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(183, 255, 60, 0.15),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.card-modern:hover:before,
.hover-lift:hover:before {
  opacity: 1;
}
.icon-modern {
  background: var(--ink) !important;
  color: var(--accent) !important;
  border-radius: 16px !important;
  transition: 0.45s var(--ease) !important;
}
.card-modern:hover .icon-modern,
.hover-lift:hover .icon-modern {
  background: var(--accent) !important;
  color: var(--ink) !important;
  transform: rotate(-6deg) scale(1.08);
}
.metric {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.metric strong {
  font: 700 clamp(32px, 4vw, 54px) "Space Grotesk";
  display: block;
  line-height: 1;
}
.metric span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  background: var(--ink);
  color: #fff;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-item {
  font: 700 24px "Space Grotesk";
  white-space: nowrap;
  padding: 0 30px;
}
.marquee-item b {
  color: var(--accent);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.portfolio-item {
  transition:
    opacity 0.4s,
    transform 0.7s var(--ease);
}
.portfolio-filter-btn {
  background: #f0f0ec !important;
  color: #222 !important;
  border: 1px solid #ddd !important;
  border-radius: 999px !important;
}
.portfolio-filter-btn.is-active,
.portfolio-filter-btn:hover {
  background: var(--ink) !important;
  color: var(--accent) !important;
  border-color: var(--ink) !important;
}
.portfolio-item.is-hidden {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
  display: none !important;
}
.portfolio-media {
  position: relative;
  overflow: hidden;
}
.portfolio-media img {
  transition: transform 1s var(--ease);
}
.portfolio-item:hover .portfolio-media img {
  transform: scale(1.1);
}
.blog-card img {
  transition: transform 1s var(--ease);
}
.blog-card:hover img {
  transform: scale(1.08);
}
.blog-search {
  background: #fff;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
.blog-search:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 4px rgba(183, 255, 60, 0.35) !important;
}
input,
textarea,
select {
  border-color: var(--line) !important;
  background: #fff !important;
  transition: 0.3s var(--ease) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 4px rgba(183, 255, 60, 0.35) !important;
  transform: translateY(-2px);
}
label {
  font: 800 10px "DM Mono" !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-shell {
  background: #f7f7f3 !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.form-shell-dark {
  background: var(--ink) !important;
  border: 1px solid #2a2a2a !important;
}
/* .faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-header {
  cursor: pointer;
} */
/* .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.55s var(--ease),
    opacity 0.35s;
}
.faq-item.open .faq-answer {
  max-height: 500px;
} */


/* .faq-icon {
  transition: 0.4s var(--ease);
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--ink) !important;
} */
.whatsapp-sticky {
  right: 24px !important;
  bottom: 24px !important;
}
.whatsapp-btn {
  background: var(--accent) !important;
  color: var(--ink) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18) !important;
}
.whatsapp-pulse {
  background: var(--accent) !important;
}
.whatsapp-chat-box {
  border: 1px solid var(--line) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18) !important;
}
#toast-container {
  top: 22px !important;
  right: 22px !important;
}
.toast {
  background: var(--ink) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 14px !important;
}
.toast svg {
  color: var(--accent) !important;
}
.article-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  z-index: 100002;
}
.article-content h2 {
  font-size: clamp(28px, 3vw, 44px) !important;
}
.article-content p {
  font-size: 17px;
  line-height: 1.9;
}
.article-content blockquote {
  border-left: 4px solid var(--accent);
  background: var(--soft);
  padding: 25px 30px;
  font: 600 22px "Space Grotesk";
  border-radius: 0 18px 18px 0;
}
footer {
  background: var(--ink) !important;
  color: #fff !important;
  border-top: 1px solid #2b2b2b;
}
.footer-link {
  color: #aaa !important;
  transition: 0.3s;
}
.footer-link:hover {
  color: var(--accent) !important;
  transform: translateX(4px);
}
footer .text-slate-400 {
  color: #8f8f8f !important;
}
[data-magnetic] {
  will-change: transform;
}
.magnetic {
  transition: transform 0.25s var(--ease);
}
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt > * {
  transform: translateZ(12px);
}
@media (max-width: 991px) {
  .hero-swiper {
    min-height: 600px;
    height: 78vh !important;
  }
  .hero-swiper h1 {
    font-size: clamp(44px, 10vw, 68px) !important;
  }
  .page-hero h1 {
    font-size: clamp(42px, 11vw, 66px);
  }
  .site-header {
    position: sticky !important;
  }
  .topbar {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track {
    animation: none;
  }
  .tilt {
    transform: none !important;
  }
}


/* =========================================================
   PREMIUM WHATSAPP WIDGET
========================================================= */

.wa-widget {
    position: fixed;
    right: 28px;
    bottom: 28px; 
    z-index: 99999;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Floating Button ---------- */

.wa-float {
    position: relative;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 12px 35px rgba(37, 211, 102, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15);
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease;
}

.wa-float:hover {
    transform: translateY(-6px) scale(1.06);
    box-shadow:
        0 20px 45px rgba(37, 211, 102, 0.45),
        0 8px 20px rgba(0, 0, 0, 0.18);
}

.wa-icon {
    position: relative;
    z-index: 3;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Pulse Ring ---------- */

.wa-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .65);
    animation: waPulse 2.2s infinite;
}

@keyframes waPulse {

    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.55);
        opacity: 0;
    }

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

/* ---------- Notification ---------- */

.wa-notification {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 5;
}

/* ---------- Popup ---------- */

.wa-popup {
    position: absolute;
    right: 0;
    bottom: 82px;
    width: 350px;
    max-width: calc(100vw - 30px);

    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        0 8px 25px rgba(0,0,0,.08);

    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.94);
    transform-origin: bottom right;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .4s cubic-bezier(.16,1,.3,1);
}

.wa-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ---------- Popup Header ---------- */

.wa-popup-header {
    background: #111;
    color: #fff;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wa-agent {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-agent-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.wa-agent strong {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}

.wa-agent span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 10px;
}

.wa-online-dot {
    width: 7px !important;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
    display: inline-block !important;
}

/* Close button */

#wa-close {
    width: 34px;
    height: 34px;
    border: 0;
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: .25s ease;
}

#wa-close:hover {
    background: rgba(255,255,255,.18);
    transform: rotate(90deg);
}

/* ---------- Message ---------- */

.wa-popup-body {
    padding: 18px;
    background: #f5f5f5;
}

.wa-message {
    max-width: 88%;
    background: #fff;
    padding: 14px 15px;
    border-radius: 4px 16px 16px 16px;
    color: #333;
    font-size: 12px;
    line-height: 1.7;
    box-shadow: 0 4px 15px rgba(0,0,0,.05);
}

/* ---------- Footer ---------- */

.wa-popup-footer {
    padding: 14px;
    background: #fff;
    border-top: 1px solid #eee;
}

.wa-start-chat {
    width: 100%;
    min-height: 46px;
    padding: 12px 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 12px;
    background: #25D366;
    color: #fff;

    font-size: 12px;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.wa-start-chat:hover {
    background: #1ebe5d;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37,211,102,.25);
}

.wa-start-chat i:first-child {
    font-size: 19px;
}

.wa-start-chat i:last-child {
    font-size: 11px;
    margin-left: auto;
    transition: transform .3s ease;
}

.wa-start-chat:hover i:last-child {
    transform: translateX(4px);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .wa-widget {
        right: 16px;
        bottom: 16px;
    }

    .wa-float {
        width: 58px;
        height: 58px;
    }

    .wa-icon {
        font-size: 27px;
    }

    .wa-popup {
        right: 0;
        bottom: 72px;
        width: min(350px, calc(100vw - 24px));
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wa-ring {
        animation: none;
    }

    .wa-float,
    .wa-popup,
    .wa-start-chat {
        transition: none;
    }
}


/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background: #f7f7f4;
}


/* Background */

.faq-bg-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(17, 20, 29, .06);
    pointer-events: none;
}

.faq-bg-circle-1 {
    width: 500px;
    height: 500px;
    top: -220px;
    right: -180px;
    animation: faqOrbit 18s linear infinite;
}

.faq-bg-circle-2 {
    width: 350px;
    height: 350px;
    bottom: -180px;
    left: -150px;
    animation: faqOrbit 25s linear infinite reverse;
}

@keyframes faqOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Heading */

.faq-heading {
    max-width: 850px;
    margin: 0 auto 75px;
    text-align: center;
}

.faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;

    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);

    color: #b7ff3c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.faq-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b7ff3c;

    animation: faqDotPulse 1.6s infinite;
}

@keyframes faqDotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.7);
        opacity: .4;
    }
}

.faq-heading h2 {
    margin-top: 25px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(45px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 700;

    color: #11141d;
}

.faq-heading h2 span {
    display: block;
    color: #b7ff3c;
}

.faq-heading p {
    max-width: 680px;
    margin: 22px auto 0;

    color: #696d75;

    font-size: 16px;
    line-height: 1.7;
}


/* Layout */

.faq-layout {
    display: grid;
    grid-template-columns: 320px 1fr;

    gap: 80px;
    max-width: 1180px;
    margin: auto;

    align-items: start;
}


/* Left */

.faq-intro {
    position: sticky;
    top: 120px;

    padding: 35px;

    border-radius: 28px;

    background: #11141d;
    color: #fff;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .13);
}

.faq-intro::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    border: 1px solid rgba(139, 255, 37, .35);
}

.faq-intro::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    top: -40px;

    border-radius: 50%;

    background: rgba(186, 255, 37, .08);
}

.faq-intro-number {
    position: relative;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    margin-bottom: 40px;
}

.faq-intro-number span {
    margin-bottom: 7px;

    color: #b7ff3c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.faq-intro-number strong {
    font-family: 'Outfit', sans-serif;

    font-size: 60px;
    line-height: .8;

    color: #fff;
}

.faq-intro h3 {
    position: relative;

    margin-bottom: 18px;

    font-family: 'Outfit', sans-serif;

    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.faq-intro h3 span {
    color: #b7ff3c;
}

.faq-intro p {
    position: relative;

    margin-bottom: 30px;

    color: #aeb1b8;

    font-size: 13px;
    line-height: 1.7;
}


/* Contact */

.faq-contact-btn {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 7px 7px 20px;

    border-radius: 50px;

    background: #b7ff3c;
    color: #11141d;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.faq-contact-btn span {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #11141d;
    color: #fff;

    border-radius: 50%;

    transition: transform .35s ease;
}

.faq-contact-btn:hover {
    color: #11141d;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(139, 255, 37, .25);
}

.faq-contact-btn:hover span {
    transform: rotate(-45deg);
}


/* FAQ list */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    position: relative;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, .07);

    border-radius: 20px;

    overflow: hidden;

    transition:
        border-color .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

.faq-item:hover {
    transform: translateX(5px);

    border-color: rgba(183, 255, 60, .5);

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.faq-item.open {
    border-color: rgba(183, 255, 60, .6);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);
}


/* Header */

.faq-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 25px 28px;

    background: transparent;

    border: 0;

    cursor: pointer;

    text-align: left;

    outline: none;
}

.faq-header:focus {
    outline: none;
}

.faq-question {
    display: flex;
    align-items: center;

    gap: 18px;

    min-width: 0;
}

.faq-number {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f1f1ee;
    color: #777b83;

    font-size: 10px;
    font-weight: 800;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;
}

.faq-question > span:last-child {
    color: #161922;

    font-family: 'Outfit', sans-serif;

    font-size: 17px;
    font-weight: 600;

    line-height: 1.35;

    transition: color .3s ease;
}


/* Icon */

.faq-icon {
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f1ee;
    color: #161922;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        color .35s ease;
}

.faq-icon i {
    font-size: 13px;

    transition:
        transform .35s ease;
}


/* Open state */

.faq-item.open .faq-number {
    background: #b7ff3c;
    color: #11141d;

    transform: rotate(360deg);
}

.faq-item.open .faq-question > span:last-child {
    color: #11141d;
}

.faq-item.open .faq-icon {
    background: #b7ff3c;
    color: #11141d;

    transform: rotate(180deg);
}

.faq-item.open .faq-icon i {
    transform: rotate(45deg);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
    display: block;

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .55s cubic-bezier(.16, 1, .3, 1);
}

.faq-item.open .faq-answer {
    max-height: 1000px;
}

.faq-answer-inner {
    padding: 0 85px 28px;
}

.faq-answer p {
    position: relative;

    margin: 0;

    padding-left: 20px;

    color: #70747c;

    font-size: 14px;

    line-height: 1.8;
}

.faq-answer p::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 2px;
    height: calc(100% - 10px);

    border-radius: 5px;

    background: #b7ff3c;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .faq-section {
        padding: 90px 0;
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .faq-intro {
        position: relative;
        top: auto;

        max-width: 600px;
        width: 100%;

        margin: auto;
    }
}


@media (max-width: 600px) {

    .faq-heading {
        margin-bottom: 45px;
    }

    .faq-heading h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .faq-heading p {
        font-size: 14px;
    }

    .faq-header {
        padding: 20px 18px;
    }

    .faq-question {
        gap: 11px;
    }

    .faq-number {
        width: 31px;
        height: 31px;
        font-size: 9px;
    }

    .faq-question > span:last-child {
        font-size: 14px;
    }

    .faq-icon {
        width: 34px;
        height: 34px;
    }

    .faq-answer-inner {
        padding: 0 25px 23px 60px;
    }

    .faq-answer p {
        font-size: 13px;
    }

    .faq-item:hover {
        transform: none;
    }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .faq-bg-circle,
    .faq-kicker-dot {
        animation: none;
    }

    .faq-item,
    .faq-icon,
    .faq-number,
    .faq-answer {
        transition: none;
    }
}

   /* =========================================
   WHY AKSHAT FEATURE LIST
========================================= */

        .why-feature {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 48px;
            padding: 10px 0;

            color: #171717;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;

            border-bottom: 1px solid rgba(0, 0, 0, 0.08);

            transition:
                transform 0.35s cubic-bezier(.16, 1, .3, 1),
                color 0.3s ease;
        }

        .why-feature:hover {
            transform: translateX(7px);
            color: #000;
        }

        .why-feature-icon {
            flex: 0 0 38px;

            width: 38px;
            height: 38px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 12px;

            background: #fff;

            transition:
                background 0.35s ease,
                border-color 0.35s ease,
                transform 0.35s cubic-bezier(.16, 1, .3, 1);
        }

        .why-feature-icon svg {
            width: 18px;
            height: 18px;
            transition: transform 0.35s cubic-bezier(.16, 1, .3, 1);
        }

        .why-feature:hover .why-feature-icon {
            background: #111;
            border-color: #111;
            color: #fff;
            transform: rotate(-5deg) scale(1.08);
        }

        .why-feature:hover .why-feature-icon svg {
            transform: scale(1.12);
        }


        /* =========================================
   MOBILE
========================================= */

        @media (max-width: 640px) {

            .why-feature {
                font-size: 12px;
            }

            .why-feature-icon {
                width: 34px;
                height: 34px;
                flex-basis: 34px;
            }

            .why-feature-icon svg {
                width: 16px;
                height: 16px;
            }

        }


        /* =========================================================
   BUSINESS OUTCOMES
========================================================= */

        .outcomes-section {
            position: relative;
            overflow: hidden;
            padding: 120px 0;
            background: #ffffff;
        }

        .outcomes-container {
            width: min(1200px, calc(100% - 40px));
            margin: 0 auto;
        }


        /* =========================
   HEADING
========================= */

        .outcomes-heading {
            max-width: 900px;
            margin: 0 auto 80px;
            text-align: center;
        }

        .outcomes-heading h2 {
            margin: 18px 0 14px;
            font-family: 'Outfit', sans-serif;
            font-size: clamp(42px, 5vw, 68px);
            line-height: .98;
            letter-spacing: -2.5px;
            font-weight: 700;
            color: #303858;
        }

        .outcomes-heading p {
            margin: 0 auto;
            max-width: 720px;
            font-size: 18px;
            line-height: 1.7;
            font-weight: 600;
            color: #071c52;
        }


        /* =========================
   MAIN GRID
========================= */

        .outcomes-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            gap: 80px;
        }


        /* =========================
   VISUAL AREA
========================= */

        .outcomes-visual {
            position: relative;
            min-height: 560px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        /* Background shapes */

        .outcomes-shape {
            position: absolute;
            width: 280px;
            height: 170px;
            background: #31578f;
            border-radius: 25px;
            z-index: 0;
        }

        .outcomes-shape-left {
            left: 5%;
            top: 38%;
        }

        .outcomes-shape-right {
            right: 8%;
            bottom: 15%;
        }


        /* =========================
   PHONE
========================= */

        .outcomes-phone-wrap {
            position: relative;
            z-index: 2;
            transform: translateY(0);
            transition: transform .7s cubic-bezier(.16, 1, .3, 1);
        }

        .outcomes-visual:hover .outcomes-phone-wrap {
            transform: translateY(-10px);
        }

        .outcomes-phone {
            width: 270px;
            height: 520px;
            border: 7px solid #080808;
            border-radius: 38px;
            overflow: hidden;
            background: #111;
            box-shadow:
                0 30px 70px rgba(0, 0, 0, .18),
                0 10px 30px rgba(0, 0, 0, .12);
            position: relative;
        }

        .outcomes-phone::before {
            content: "";
            position: absolute;
            width: 110px;
            height: 25px;
            background: #080808;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0 0 16px 16px;
            z-index: 5;
        }

        .outcomes-phone-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 1s cubic-bezier(.16, 1, .3, 1);
        }

        .outcomes-visual:hover .outcomes-phone-image {
            transform: scale(1.05);
        }


        /* =========================
   FLOATING CARDS
========================= */

        .outcome-floating-card {
            position: absolute;
            z-index: 5;
            background: #fff;
            border-radius: 14px;
            box-shadow:
                0 20px 45px rgba(0, 0, 0, .14),
                0 5px 15px rgba(0, 0, 0, .08);
            transition:
                transform .5s cubic-bezier(.16, 1, .3, 1),
                box-shadow .5s ease;
        }

        .outcome-floating-card:hover {
            box-shadow:
                0 30px 65px rgba(0, 0, 0, .2);
        }


        /* Top card */

        .outcome-card-top {
            top: 90px;
            right: 2%;
            width: 235px;
            padding: 20px;
            text-align: center;
        }

        .outcome-card-top .outcome-card-title {
            display: block;
            font-size: 12px;
            font-weight: 800;
            color: #111;
        }

        .outcome-card-top strong {
            display: block;
            font-size: 15px;
            color: #111;
        }

        .outcome-card-top b {
            display: block;
            margin: 4px 0;
            font-family: 'Outfit', sans-serif;
            font-size: 54px;
            line-height: 1;
            color: #b7ff3c;
        }

        .outcome-card-top>span:last-of-type {
            display: block;
            font-size: 12px;
            font-weight: 800;
            color: #111;
        }

        .google-mark {
            margin: 8px auto 2px;
            font-family: Arial, sans-serif;
            font-size: 48px;
            font-weight: 700;
            line-height: 1;
        }

        .outcome-card-top small {
            display: block;
            font-size: 8px;
            font-weight: 800;
            color: #111;
        }


        /* Bottom card */

        .outcome-card-bottom {
            left: 2%;
            bottom: 75px;
            width: 230px;
            padding: 22px 18px;
            text-align: center;
        }

        .outcome-card-bottom span {
            display: block;
            font-size: 14px;
            font-weight: 800;
            color: #111;
        }

        .outcome-card-bottom strong {
            display: block;
            margin: 4px 0;
            font-family: 'Outfit', sans-serif;
            font-size: 35px;
            color: #b7ff3c;
        }


        /* =========================
   CONTENT
========================= */

        .outcomes-content {
            padding-left: 20px;
        }

        .outcomes-content h3 {
            margin: 0 0 22px;
            font-family: 'Outfit', sans-serif;
            font-size: 25px;
            font-weight: 700;
            color: #071c52;
        }

        .outcome-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .outcome-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 0;
            font-size: 17px;
            line-height: 1.5;
            color: #3e4a65;
            transition:
                transform .3s ease,
                color .3s ease;
        }

        .outcome-list li:hover {
            transform: translateX(8px);
            color: #071c52;
        }

        .outcome-check {
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            border: solid #b7ff3c;
            font-size: 21px;
            font-weight: 900;
            transition: transform .3s ease;
        }

        .outcome-list li:hover .outcome-check {
            transform: scale(1.25) rotate(-5deg);
        }


        /* =========================
   RESPONSIVE
========================= */

        @media (max-width: 991px) {

            .outcomes-section {
                padding: 90px 0;
            }

            .outcomes-heading {
                margin-bottom: 55px;
            }

            .outcomes-grid {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .outcomes-content {
                padding-left: 0;
                max-width: 600px;
                margin: auto;
            }

        }


        @media (max-width: 600px) {

            .outcomes-section {
                padding: 70px 0;
            }

            .outcomes-container {
                width: min(100% - 28px, 1200px);
            }

            .outcomes-heading h2 {
                font-size: 40px;
                letter-spacing: -1.5px;
            }

            .outcomes-heading p {
                font-size: 15px;
            }

            .outcomes-visual {
                min-height: 500px;
            }

            .outcomes-phone {
                width: 230px;
                height: 450px;
            }

            .outcome-card-top {
                top: 60px;
                right: -5px;
                width: 180px;
                padding: 14px;
            }

            .outcome-card-top b {
                font-size: 40px;
            }

            .outcome-card-top strong {
                font-size: 11px;
            }

            .outcome-card-top .outcome-card-title,
            .outcome-card-top>span:last-of-type {
                font-size: 9px;
            }

            .outcome-card-bottom {
                left: -5px;
                bottom: 55px;
                width: 180px;
                padding: 15px;
            }

            .outcome-card-bottom span {
                font-size: 10px;
            }

            .outcome-card-bottom strong {
                font-size: 28px;
            }

            .outcome-list li {
                font-size: 14px;
            }

        }

        /* =========================================================
   OUR CLIENTS — PREMIUM SHOWCASE
========================================================= */

        .clients-showcase {
            position: relative;
            overflow: hidden;
            padding: 130px 0 90px;
            background:
                radial-gradient(circle at 50% 48%,
                    rgba(154, 255, 38, 0.08),
                    transparent 30%),
                #fff;
        }

        .clients-container {
            width: min(1400px, calc(100% - 40px));
            margin: auto;
            position: relative;
            z-index: 2;
        }


        /* =========================================================
   ORBIT DECORATION
========================================================= */

        .clients-orbit {
            position: absolute;
            left: 50%;
            top: 53%;
            width: 1180px;
            height: 470px;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(7, 28, 82, .08);
            border-radius: 50%;
            pointer-events: none;
        }

        .clients-orbit::before,
        .clients-orbit::after {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #b7ff3c;
        }

        .clients-orbit::before {
            top: 64px;
            left: 12%;
        }

        .clients-orbit::after {
            right: 12%;
            bottom: 60px;
        }

        .clients-orbit-two {
            width: 1000px;
            height: 390px;
            opacity: .5;
        }


        /* =========================================================
   HEADING
========================================================= */

        .clients-heading {
            max-width: 850px;
            margin: 0 auto 70px;
            text-align: center;
        }

        .clients-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            padding: 10px 20px;

            border-radius: 50px;

            background: #fff;

            border: 1px solid rgba(0, 0, 0, 0.08);

            box-shadow:
                0 10px 30px rgba(0, 0, 0, .07);

            color: #b7ff3c;

            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2px;
        }

        .clients-kicker span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #b7ff3c;

            animation: clientsDotPulse 1.8s infinite;
        }

        @keyframes clientsDotPulse {

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

            50% {
                transform: scale(1.7);
                opacity: .5;
            }

        }

        .clients-heading h2 {
            margin: 25px 0 18px;

            font-family: 'Outfit', sans-serif;

            font-size: clamp(44px, 6vw, 76px);

            line-height: .98;

            letter-spacing: -3px;

            font-weight: 700;

            color: #10141d;
        }

        .clients-heading h2 span {
            color: #b7ff3c;
        }

        .clients-heading p {
            max-width: 720px;
            margin: auto;

            color: #646973;

            font-size: 17px;
            line-height: 1.7;
        }

        .clients-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;

            margin-top: 28px;
        }

        .clients-divider i {
            width: 80px;
            height: 1px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(131, 255, 37, 0.5));
        }

        .clients-divider i:last-child {
            transform: rotate(180deg);
        }

        .clients-divider span {
            color: #b7ff3c;
            font-size: 20px;
        }


        /* =========================================================
   CAROUSEL
========================================================= */

        .clients-carousel-wrap {
            position: relative;

            width: 100%;

            padding: 10px 0 30px;
        }

        .clients-swiper {
            width: 100%;
            padding: 40px 0 55px;
            overflow: visible;
        }

        .clients-swiper .swiper-slide {
            width: 230px;

            display: flex;
            justify-content: center;

            transition:
                transform .6s cubic-bezier(.16, 1, .3, 1),
                opacity .6s ease;
        }


        /* =========================================================
   CLIENT CARD
========================================================= */

        .client-card {
            position: relative;

            width: 220px;
            height: 225px;

            padding: 30px 20px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background: rgba(255, 255, 255, 0.92);

            border: 1px solid rgba(0, 0, 0, .07);

            border-radius: 25px;

            box-shadow:
                0 15px 45px rgba(0, 0, 0, .07);

            transition:
                transform .55s cubic-bezier(.16, 1, .3, 1),
                box-shadow .55s ease,
                border-color .4s ease;
        }

        .client-card:hover {
            transform: translateY(-12px) scale(1.03);

            border-color: rgba(157, 255, 37, 0.3);

            box-shadow:
                0 30px 70px rgba(0, 0, 0, .13);
        }


        /* Active center */

        .clients-swiper .swiper-slide-active {
            z-index: 10;
        }

        .clients-swiper .swiper-slide-active .client-card {
            width: 270px;
            height: 300px;

            transform: translateY(-25px) scale(1.05);

            border-color: rgba(37, 255, 52, 0.18);

            box-shadow:
                0 35px 90px rgba(131, 255, 37, 0.13),
                0 20px 50px rgba(0, 0, 0, 0.09);
        }


        /* =========================================================
   LOGO
========================================================= */

        .client-logo {
            width: 145px;
            height: 105px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-bottom: 15px;
        }

        .client-logo img {
            max-width: 100%;
            max-height: 80px;

            object-fit: contain;

            filter: grayscale(100%);

            opacity: .8;

            transition:
                filter .5s ease,
                opacity .5s ease,
                transform .5s cubic-bezier(.16, 1, .3, 1);
        }

        .client-card:hover .client-logo img,
        .clients-swiper .swiper-slide-active .client-logo img {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.08);
        }


        /* =========================================================
   CLIENT NAME
========================================================= */

        .client-name {
            font-family: 'Outfit', sans-serif;

            font-size: 12px;
            font-weight: 800;

            color: #171b23;

            letter-spacing: .5px;
        }

        .client-line {
            width: 38px;
            height: 2px;

            margin-top: 10px;

            background: #b7ff3c;

            transform: scaleX(.5);

            transition: transform .4s ease;
        }

        .client-card:hover .client-line {
            transform: scaleX(1);
        }


        /* =========================================================
   FEATURED CROWN
========================================================= */

        .client-card-featured {
            overflow: visible;
        }

        .client-crown {
            position: absolute;

            top: -28px;

            left: 50%;

            transform: translateX(-50%);

            width: 56px;
            height: 56px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background: #fff;

            color: #b7ff3c;

            font-size: 19px;

            box-shadow:
                0 12px 30px rgba(0, 0, 0, 0.12);

            border: 1px solid rgba(0, 0, 0, 0.05);

            animation: crownFloat 3s ease-in-out infinite;
        }

        @keyframes crownFloat {

            0%,
            100% {
                transform: translateX(-50%) translateY(0);
            }

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

        }


        /* =========================================================
   NAVIGATION
========================================================= */

        .clients-nav {
            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            width: 52px;
            height: 52px;

            z-index: 20;

            border: 1px solid rgba(0, 0, 0, .08);

            border-radius: 50%;

            background: #fff;

            color: #111;

            display: flex;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            box-shadow:
                0 12px 30px rgba(0, 0, 0, .1);

            transition:
                transform .3s ease,
                background .3s ease,
                color .3s ease;
        }

        .clients-prev {
            left: -10px;
        }

        .clients-next {
            right: -10px;
        }

        .clients-nav:hover {
            background: #111;
            color: #fff;

            transform:
                translateY(-50%) scale(1.1);
        }


        /* =========================================================
   PAGINATION
========================================================= */

        .clients-pagination {
            display: flex;
            justify-content: center;
            gap: 7px;

            margin-top: 5px;
        }

        .clients-pagination .swiper-pagination-bullet {
            width: 7px;
            height: 7px;

            margin: 0 !important;

            background: #c9c9c9;

            opacity: 1;

            transition:
                width .3s ease,
                background .3s ease;
        }

        .clients-pagination .swiper-pagination-bullet-active {
            width: 28px;

            border-radius: 10px;

            background: #b7ff3c;
        }


        /* =========================================================
   STATS
========================================================= */

        .clients-stats {
            position: relative;

            display: grid;
            grid-template-columns: repeat(4, 1fr);

            margin-top: 65px;

            padding: 32px 40px;

            border-radius: 25px;

            background:
                linear-gradient(135deg,
                    #11151b,
                    #181c22);

            box-shadow:
                0 30px 70px rgba(0, 0, 0, .16);
        }

        .client-stat {
            display: flex;
            align-items: center;
            gap: 16px;

            padding: 0 25px;

            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .client-stat:last-child {
            border-right: 0;
        }

        .client-stat-icon {
            flex: 0 0 54px;

            width: 54px;
            height: 54px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid rgba(157, 255, 37, 0.5);

            border-radius: 50%;

            color: #b7ff3c;

            font-size: 18px;

            transition:
                transform .4s ease,
                background .4s ease;
        }

        .client-stat:hover .client-stat-icon {
            background: #b7ff3c;
            color: #111;

            transform:
                rotate(-8deg) scale(1.08);
        }

        .client-stat strong {
            display: block;

            color: #fff;

            font-family: 'Outfit', sans-serif;

            font-size: 35px;
            line-height: 1;

            margin-bottom: 4px;
        }

        .client-stat span {
            display: block;

            color: #fff;

            font-size: 13px;
            font-weight: 700;
        }

        .client-stat small {
            display: block;

            margin-top: 3px;

            color: #8e949d;

            font-size: 10px;
        }


        /* =========================================================
   RESPONSIVE
========================================================= */

        @media (max-width: 1100px) {

            .clients-swiper .swiper-slide {
                width: 210px;
            }

            .client-card {
                width: 200px;
            }

            .clients-swiper .swiper-slide-active .client-card {
                width: 240px;
            }

            .clients-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .client-stat:nth-child(2) {
                border-right: 0;
            }

        }


        @media (max-width: 767px) {

            .clients-showcase {
                padding: 90px 0 70px;
            }

            .clients-container {
                width: min(100% - 28px, 1400px);
            }

            .clients-heading {
                margin-bottom: 40px;
            }

            .clients-heading h2 {
                font-size: 43px;
                letter-spacing: -1.5px;
            }

            .clients-heading p {
                font-size: 14px;
            }

            .clients-orbit {
                display: none;
            }

            .clients-swiper {
                padding-top: 30px;
            }

            .clients-swiper .swiper-slide {
                width: 230px;
            }

            .client-card {
                width: 210px;
                height: 220px;
            }

            .clients-swiper .swiper-slide-active .client-card {
                width: 240px;
                height: 270px;
            }

            .clients-nav {
                width: 44px;
                height: 44px;
            }

            .clients-prev {
                left: -3px;
            }

            .clients-next {
                right: -3px;
            }

            .clients-stats {
                grid-template-columns: 1fr;
                padding: 25px;
            }

            .client-stat {
                border-right: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding: 18px 0;
            }

            .client-stat:last-child {
                border-bottom: 0;
            }

        }


        /* =========================================================
   REDUCED MOTION
========================================================= */

        @media (prefers-reduced-motion: reduce) {

            .clients-kicker span,
            .client-crown {
                animation: none;
            }

            .client-card,
            .client-logo img,
            .clients-nav {
                transition: none;
            }

        }



        /* ABout page */

        /* =========================================================
   ABOUT JOURNEY
   STORY • MISSION • VISION
========================================================= */

.about-journey-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(135, 255, 37, 0.07),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(7,28,82,.05),
            transparent 25%
        ),
        #f7f7f4;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.about-journey-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    border: 1px solid rgba(255,111,37,.08);

    pointer-events: none;

    animation: aboutGlowFloat 12s ease-in-out infinite;
}

.about-glow-one {
    top: -200px;
    left: -180px;
}

.about-glow-two {
    bottom: -220px;
    right: -180px;

    animation-delay: -5s;
}

@keyframes aboutGlowFloat {

    0%,
    100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(25px,-20px,0) rotate(8deg);
    }

}


/* =========================================================
   HEADING
========================================================= */

.about-journey-heading {
    max-width: 850px;

    margin: 0 auto 110px;

    text-align: center;
}

.about-journey-kicker {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 18px;

    border-radius: 50px;

    background: #fff;

    border: 1px solid rgba(0,0,0,.07);

    color: #b7ff3c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

.about-journey-kicker span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #b7ff3c;

    animation: aboutDotPulse 1.7s infinite;
}

@keyframes aboutDotPulse {

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

    50% {
        transform: scale(1.8);
        opacity: .5;
    }

}

.about-journey-heading h2 {
    margin: 25px 0 20px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(45px, 6vw, 75px);

    line-height: .96;

    letter-spacing: -3px;

    font-weight: 700;

    color: #11141d;
}

.about-journey-heading h2 span {
    display: block;

    color: #b7ff3c;
}

.about-journey-heading p {
    max-width: 720px;

    margin: auto;

    color: #686d76;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   TIMELINE
========================================================= */

.about-journey {
    position: relative;

    max-width: 1050px;

    margin: auto;
}


/* Center vertical line */

.journey-line {
    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            #b7ff3c 10%,
            #b7ff3c 90%,
            transparent
        );

    opacity: .45;
}

.journey-line span {
    position: absolute;

    top: 15%;

    left: 50%;

    width: 9px;
    height: 9px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #b7ff3c;

    box-shadow:
        0 0 0 7px rgba(157, 255, 37, 0.1),
        0 0 30px rgba(139, 255, 37, 0.5);

    animation: timelinePulse 2s infinite;
}

@keyframes timelinePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 7px rgba(95, 255, 37, 0.1),
            0 0 20px rgba(157, 255, 37, 0.3);
    }

    50% {
        box-shadow:
            0 0 0 14px rgba(124, 255, 37, 0.03),
            0 0 35px rgba(146, 255, 37, 0.55);
    }

}


/* =========================================================
   JOURNEY ITEMS
========================================================= */

.journey-item {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    margin-bottom: 90px;
}

.journey-item:last-child {
    margin-bottom: 0;
}


/* Alternate layout */

.journey-mission .journey-content {
    grid-column: 2;
}

.journey-mission .journey-marker {
    left: 50%;
}


/* =========================================================
   MARKER
========================================================= */

.journey-marker {
    position: absolute;

    left: 50%;

    top: 35px;

    transform: translateX(-50%);

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #11141d;

    border: 5px solid #f7f7f4;

    color: #b7ff3c;

    z-index: 5;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        background .4s ease;
}

.journey-item:hover .journey-marker {
    background: #b7ff3c;

    color: #11141d;

    transform:
        translateX(-50%)
        rotate(360deg)
        scale(1.12);
}

.journey-marker span {
    font-family: 'Outfit', sans-serif;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.journey-content {
    position: relative;

    padding: 40px;

    background:
        rgba(255,255,255,.9);

    border: 1px solid rgba(0,0,0,.07);

    border-radius: 28px;

    box-shadow:
        0 15px 50px rgba(0,0,0,.055);

    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        box-shadow .55s ease,
        border-color .4s ease;

    overflow: hidden;
}

.journey-content::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -65px;
    top: -65px;

    border-radius: 50%;

    border: 1px solid rgba(121, 255, 37, 0.15);

    transition:
        transform .8s ease;
}

.journey-content:hover {
    transform: translateY(-10px);

    border-color: rgba(124, 255, 37, 0.25);

    box-shadow:
        0 30px 80px rgba(0,0,0,.1);
}

.journey-content:hover::before {
    transform: scale(2);
}


/* =========================================================
   LABEL
========================================================= */

.journey-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #b7ff3c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.journey-label i {
    font-size: 13px;
}


/* =========================================================
   TITLES
========================================================= */

.journey-content h3 {
    position: relative;

    margin: 0 0 20px;

    font-family: 'Outfit', sans-serif;

    font-size: 34px;

    line-height: 1.08;

    letter-spacing: -1px;

    color: #11141d;

    font-weight: 700;
}

.journey-content h3 span {
    color: #b7ff3c;
}

.journey-content > p {
    color: #686d76;

    font-size: 14px;

    line-height: 1.85;

    margin-bottom: 15px;
}


/* =========================================================
   STORY STATS
========================================================= */

.journey-mini-stats {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 15px;

    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid rgba(0,0,0,.07);
}

.journey-mini-stats div {
    padding-right: 15px;

    border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.journey-mini-stats div:last-child {
    border-right: 0;
}

.journey-mini-stats strong {
    display: block;

    font-family: 'Outfit', sans-serif;

    color: #11141d;

    font-size: 27px;

    line-height: 1;

    margin-bottom: 5px;
}

.journey-mini-stats span {
    color: #8a8e95;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   MISSION POINTS
========================================================= */

.mission-points {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 28px;
}

.mission-point {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 13px;

    border-radius: 15px;

    background: #f7f7f4;

    transition:
        transform .35s ease,
        background .35s ease;
}

.mission-point:hover {
    transform: translateX(8px);

    background: #fff2ea;
}

.mission-point > span {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #11141d;

    color: #b7ff3c;

    font-size: 14px;

    transition:
        transform .4s ease;
}

.mission-point:hover > span {
    transform: rotate(-8deg) scale(1.1);

    background: #b7ff3c;

    color: #11141d;
}

.mission-point strong {
    display: block;

    color: #171a22;

    font-family: 'Outfit', sans-serif;

    font-size: 14px;

    margin-bottom: 3px;
}

.mission-point small {
    display: block;

    color: #777b83;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   VISION STATEMENT
========================================================= */

.vision-statement {
    display: flex;

    gap: 18px;

    align-items: flex-start;

    margin-top: 30px;

    padding: 23px;

    background: #11141d;

    color: #fff;

    border-radius: 20px;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.vision-statement:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.15);
}

.vision-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #b7ff3c;

    color: #11141d;

    font-size: 15px;
}

.vision-statement strong {
    display: block;

    font-family: 'Outfit', sans-serif;

    font-size: 19px;

    margin-bottom: 5px;
}

.vision-statement p {
    margin: 0;

    color: #aeb1b8;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   VISION TAGS
========================================================= */

.vision-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}

.vision-tags span {
    padding: 7px 12px;

    border: 1px solid rgba(150, 255, 37, 0.25);

    border-radius: 50px;

    color: #777b83;

    background: #ffffff;

    font-size: 10px;

    font-weight: 700;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.vision-tags span:hover {
    background: #b7ff3c;

    color: #11141d;

    transform: translateY(-3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .about-journey-section {
        padding: 90px 0;
    }

    .about-journey-heading {
        margin-bottom: 60px;
    }

    .journey-line {
        left: 30px;
    }

    .journey-item {
        display: block;

        padding-left: 75px;

        margin-bottom: 50px;
    }

    .journey-marker {
        left: 30px;

        top: 30px;
    }

    .journey-mission .journey-content {
        grid-column: auto;
    }

    .journey-content {
        padding: 30px;
    }

}


@media (max-width: 600px) {

    .about-journey-section {
        padding: 75px 0;
    }

    .about-journey-heading h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .about-journey-heading p {
        font-size: 14px;
    }

    .journey-line {
        left: 20px;
    }

    .journey-item {
        padding-left: 52px;
    }

    .journey-marker {
        left: 20px;

        width: 44px;
        height: 44px;

        border-width: 3px;
    }

    .journey-marker span {
        font-size: 10px;
    }

    .journey-content {
        padding: 24px;

        border-radius: 22px;
    }

    .journey-content h3 {
        font-size: 27px;
    }

    .journey-content > p {
        font-size: 13px;
    }

    .journey-mini-stats {
        gap: 8px;
    }

    .journey-mini-stats strong {
        font-size: 22px;
    }

    .journey-mini-stats span {
        font-size: 9px;
    }

    .mission-point small {
        font-size: 10px;
    }

    .vision-statement {
        padding: 18px;
    }

}


/* =========================================================
   SERVICE CARD — READ MORE BUTTON
========================================================= */

.service-read-more {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;

    padding: 10px 16px 10px 18px;

    border: 1px solid rgba(17, 20, 29, 0.12);
    border-radius: 50px;

    background: #fff;

    color: #11141d;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    overflow: hidden;

    transition:
        color .4s ease,
        border-color .4s ease,
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}


/* Orange background animation */

.service-read-more::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: #b7ff3c;

    border-radius: 50px;

    transition:
        width .45s cubic-bezier(.16,1,.3,1);

    z-index: 0;
}


/* Text + icon above background */

.service-read-more span,
.service-read-more i {
    position: relative;
    z-index: 1;
}


/* Arrow circle */

.service-read-more i {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #11141d;

    color: #fff;

    font-size: 10px;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        color .35s ease;
}


/* Hover */

.service-read-more:hover {
    color: #11141d;

    border-color: #b7ff3c;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(131, 255, 37, 0.18);
}

.service-read-more:hover::before {
    width: 100%;
}

.service-read-more:hover i {
    background: #11141d;

    transform:
        translateX(5px)
        rotate(-45deg);
}


/* Card hover also activates button */

.card-modern:hover .service-read-more {
    border-color: rgba(128, 255, 37, 0.4);
}

.card-modern:hover .service-read-more i {
    transform: translateX(4px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .service-read-more {
        margin-top: 22px;

        font-size: 10px;

        padding: 9px 13px 9px 15px;
    }

}




/* training design css */

/* =========================================================
   TRAINING MODULES
========================================================= */

.training-modules-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background: #f5f5f2;
}

.training-module-bg {
    position: absolute;

    width: 600px;
    height: 600px;

    top: -250px;
    right: -220px;

    border-radius: 50%;

    border: 1px solid rgba(190, 255, 37, 0.12);

    pointer-events: none;

    animation:
        trainingOrb 18s linear infinite;
}

.training-module-bg::before {
    content: "";

    position: absolute;

    inset: 55px;

    border-radius: 50%;

    border: 1px solid rgba(17,20,29,.06);
}

@keyframes trainingOrb {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   HEADING
========================================================= */

.training-module-heading {
    max-width: 760px;

    margin-bottom: 70px;
}

.training-module-heading .section-title span {
    display: block;

    color: #b7ff3c;
}


/* =========================================================
   GRID
========================================================= */

.training-modules-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.training-module-card {
    position: relative;

    min-height: 360px;

    display: flex;

    flex-direction: column;

    padding: 30px;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, 0.07);

    border-radius: 26px;

    overflow: hidden;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease,
        border-color .4s ease;
}


/* Big background number */

.training-module-number {
    position: absolute;

    right: 17px;
    top: 60px;

    font-family: 'Outfit', sans-serif;

    font-size: 100px;

    font-weight: 800;

    line-height: 1;

    color: rgba(0,0,0,.035);

    pointer-events: none;

    transition:
        transform .7s cubic-bezier(.16,1,.3,1),
        color .5s ease;
}

.training-module-card:hover .training-module-number {
    transform:
        translateY(-10px)
        scale(1.12);

    color: rgba(182, 255, 37, 0.08);
}


/* =========================================================
   TOP
========================================================= */

.training-module-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 2;
}

.training-module-badge {
    display: inline-flex;

    align-items: center;

    padding: 7px 11px;

    border-radius: 50px;

    background: #11141d;

    color: #fff;

    font-family: monospace;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        background .3s ease,
        color .3s ease;
}

.training-module-card:hover .training-module-badge {
    background: #b7ff3c;

    color: #11141d;
}


/* =========================================================
   ICON
========================================================= */

.training-module-icon {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: #f4f5f2;

    color: #11141d;

    font-size: 17px;

    transition:
        background .4s ease,
        color .4s ease,
        transform .5s cubic-bezier(.16,1,.3,1);
}

.training-module-card:hover .training-module-icon {
    background: #b7ff3c;

    color: #11141d;

    transform:
        rotate(-8deg)
        scale(1.1);
}


/* =========================================================
   CONTENT
========================================================= */

.training-module-card h3 {
    position: relative;

    z-index: 2;

    margin-top: 40px;

    max-width: 270px;

    font-family: 'Outfit', sans-serif;

    font-size: 25px;

    line-height: 1.05;

    letter-spacing: -.7px;

    font-weight: 700;

    color: #11141d;
}

.training-module-card p {
    position: relative;

    z-index: 2;

    max-width: 300px;

    margin-top: 15px;

    color: #777b83;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   BOTTOM
========================================================= */

.training-module-bottom {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: auto;

    padding-top: 25px;

    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.training-module-bottom > span {
    color: #999da4;

    font-family: monospace;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


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

.training-details-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 10px 9px 15px;

    border-radius: 50px;

    background: #11141d;

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.training-details-btn i {
    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #b7ff3c;

    color: #11141d;

    font-size: 9px;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);
}

.training-details-btn:hover {
    background: #b7ff3c;

    color: #11141d;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(208, 255, 37, 0.2);
}

.training-details-btn:hover i {
    transform:
        translateX(4px)
        rotate(-45deg);
}


/* =========================================================
   CARD HOVER
========================================================= */

.training-module-card:hover {
    border-color: rgba(182, 255, 37, 0.2);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.09);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

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

}

@media (max-width: 650px) {

    .training-modules-section {
        padding: 80px 0;
    }

    .training-module-heading {
        margin-bottom: 45px;
    }

    .training-modules-grid {
        grid-template-columns: 1fr;
    }

    .training-module-card {
        min-height: 330px;

        padding: 25px;
    }

    .training-module-card h3 {
        font-size: 23px;
    }

    .training-module-bottom {
        align-items: flex-end;
    }

}


/* training details css */
/* =========================================================
   TRAINING DETAILS PAGE
========================================================= */

.training-details-hero {
    position: relative;

    overflow: hidden;

    padding: 120px 0 90px;

    background: #11141d;

    color: #fff;
}

.training-details-grid {
    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}

.training-details-hero::after {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -180px;
    top: -220px;

    border-radius: 50%;

    border: 1px solid rgba(171, 255, 37, 0.25);

    animation:
        trainingDetailsOrb 12s ease-in-out infinite;
}

@keyframes trainingDetailsOrb {

    0%,100% {
        transform: translate(0,0) rotate(0);
    }

    50% {
        transform: translate(-30px,30px) rotate(12deg);
    }

}


/* Back */

.training-back-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 45px;

    color: #9da1a8;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition:
        color .3s ease,
        transform .3s ease;
}

.training-back-link:hover {
    color: #b7ff3c;

    transform: translateX(-5px);
}


/* Badge */

.training-detail-badge {
    display: inline-flex;

    padding: 8px 13px;

    border-radius: 50px;

    background: #b7ff3c;

    color: #11141d;

    font-family: monospace;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* Title */

.training-detail-title {
    max-width: 900px;

    margin-top: 25px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(52px, 7vw, 88px);

    line-height: .95;

    letter-spacing: -4px;
}

.training-detail-intro {
    max-width: 680px;

    margin-top: 25px;

    color: #aeb1b8;

    font-size: 16px;

    line-height: 1.8;
}


/* Meta */

.training-detail-meta {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    max-width: 850px;

    margin-top: 50px;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 20px;

    overflow: hidden;
}

.training-detail-meta > div {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 20px;

    border-right: 1px solid rgba(255,255,255,.1);
}

.training-detail-meta > div:last-child {
    border-right: 0;
}

.training-detail-meta > div > i {
    color: #b7ff3c;

    font-size: 17px;
}

.training-detail-meta small {
    display: block;

    color: #777d87;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.training-detail-meta strong {
    display: block;

    margin-top: 4px;

    font-size: 12px;
}


/* =========================================================
   CONTENT
========================================================= */

.training-details-section {
    padding: 110px 0;

    background: #f5f5f2;
}

.training-details-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        280px;

    gap: 35px;

    align-items: start;
}

.training-details-main {
    display: flex;

    flex-direction: column;

    gap: 22px;
}

.training-content-card {
    padding: 38px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid rgba(0,0,0,.07);

    box-shadow:
        0 15px 40px rgba(0,0,0,.04);
}

.training-content-kicker {
    color: #b7ff3c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.training-content-card h2 {
    margin-top: 10px;

    font-family: 'Outfit', sans-serif;

    font-size: 32px;

    line-height: 1.05;

    letter-spacing: -1px;
}

.training-content-card p {
    margin-top: 18px;

    color: #70747b;

    font-size: 13px;

    line-height: 1.85;
}


/* Topics */

.training-topic-grid {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 10px;

    margin-top: 25px;
}

.training-topic-grid div {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    border-radius: 12px;

    background: #f7f7f4;

    color: #555a63;

    font-size: 12px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.training-topic-grid div:hover {
    transform: translateX(5px);

    background: #f9ffe8;
}

.training-topic-grid i {
    color: #b7ff3c;
}


/* Practical */

.training-practical-list {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 25px;

    list-style: none;

    padding: 0;
}

.training-practical-list li {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    color: #62666f;

    font-size: 13px;
}

.training-practical-list span {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #11141d;

    color: #b7ff3c;

    font-family: monospace;

    font-size: 9px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.training-details-sidebar {
    position: sticky;

    top: 110px;

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.training-enroll-card {
    padding: 30px;

    border-radius: 25px;

    background: #11141d;

    color: #fff;
}

.training-enroll-card > span {
    color: #b7ff3c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.training-enroll-card h3 {
    margin-top: 14px;

    font-family: 'Outfit', sans-serif;

    font-size: 27px;

    line-height: 1.05;
}

.training-enroll-card p {
    margin-top: 15px;

    color: #9da1a8;

    font-size: 11px;

    line-height: 1.7;
}

.training-enroll-button {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

    padding: 7px 8px 7px 18px;

    background: #b7ff3c;

    color: #11141d;

    border-radius: 50px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;
}

.training-enroll-button i {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #11141d;

    color: #fff;
}


/* Tools */

.training-tools-card {
    padding: 25px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, 0.07);
}

.training-tools-card > span {
    color: #b7ff3c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.training-tools {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}

.training-tools span {
    padding: 7px 10px;

    border-radius: 50px;

    background: #f4f4f1;

    color: #6a6d74;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   APPLICATION
========================================================= */

.training-apply-section {
    padding: 120px 0;

    background: #11141d;
}

.training-apply-heading {
    max-width: 680px;

    margin: 0 auto 45px;

    text-align: center;
}

.training-apply-heading .section-title {
    color: #fff;
}

.training-apply-heading .section-copy {
    color: #999ea7;
}

.training-form-card {
    padding: 45px;

    border-radius: 30px;

    background: #fff;
}

.training-application-form {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 20px;
}

.training-form-field {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.training-form-field label {
    color: #252932;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.training-form-field input,
.training-form-field select,
.training-form-field textarea {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #dedfdb;

    border-radius: 13px;

    background: #f8f8f6;

    color: #171a21;

    outline: none;

    font-size: 12px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.training-form-field textarea {
    resize: vertical;
}

.training-form-field input:focus,
.training-form-field select:focus,
.training-form-field textarea:focus {
    border-color: #b7ff3c;

    box-shadow:
        0 0 0 4px rgba(171, 255, 37, 0.08);
}

.training-form-full {
    grid-column: 1 / -1;
}

.training-submit {
    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 16px;

    border: 0;

    border-radius: 14px;

    background: #b7ff3c;

    color: #11141d;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.training-submit i {
    transition: transform .4s ease;
}

.training-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(222, 255, 37, 0.22);
}

.training-submit:hover i {
    transform:
        translateX(5px)
        rotate(-45deg);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .training-details-layout {
        grid-template-columns: 1fr;
    }

    .training-details-sidebar {
        position: static;
    }

    .training-detail-meta {
        grid-template-columns: 1fr;
    }

    .training-detail-meta > div {
        border-right: 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .training-detail-meta > div:last-child {
        border-bottom: 0;
    }

}

@media (max-width: 650px) {

    .training-details-hero {
        padding: 95px 0 75px;
    }

    .training-detail-title {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .training-detail-intro {
        font-size: 14px;
    }

    .training-content-card,
    .training-form-card {
        padding: 25px;
    }

    .training-topic-grid {
        grid-template-columns: 1fr;
    }

    .training-application-form {
        grid-template-columns: 1fr;
    }

    .training-form-full,
    .training-submit {
        grid-column: auto;
    }

}


/* Service page css */
/* =========================================================
   SERVICE PAGE
========================================================= */

.service-hero {
    position: relative;
    overflow: hidden;

    padding: 155px 0 125px;

    background: #11141d;
    color: #fff;
}

.service-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .2;

    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );
}

.service-hero-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    border: 1px solid rgba(183,255,60,.15);
}

.service-orb-1 {
    width: 500px;
    height: 500px;

    right: -200px;
    top: -200px;

    animation: serviceOrb 14s ease-in-out infinite;
}

.service-orb-2 {
    width: 260px;
    height: 260px;

    right: 15%;
    bottom: -180px;

    border-color: rgba(255,255,255,.06);

    animation:
        serviceOrb 18s ease-in-out infinite reverse;
}

@keyframes serviceOrb {

    0%,100% {
        transform: translate(0,0) rotate(0);
    }

    50% {
        transform: translate(-25px,30px) rotate(10deg);
    }
}


/* =========================================================
   HERO CONTENT
========================================================= */

.service-hero-kicker {
    display: inline-flex;

    padding: 9px 15px;

    border: 1px solid rgba(183,255,60,.2);

    border-radius: 50px;

    color: #b7ff3c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.service-hero-title {
    max-width: 950px;

    margin-top: 25px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(55px, 8vw, 100px);

    line-height: .92;

    letter-spacing: -5px;
}

.service-hero-title span {
    display: block;

    color: #b7ff3c;
}

.service-hero-copy {
    max-width: 650px;

    margin-top: 30px;

    color: #aeb1b8;

    font-size: 17px;

    line-height: 1.8;
}

.service-hero-points {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;
}

.service-hero-points span {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 50px;

    color: #d7d9de;

    font-size: 10px;

    font-weight: 700;
}

.service-hero-points i {
    color: #b7ff3c;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.service-list-section {
    position: relative;

    padding: 130px 0;

    background: #fff;
}

.service-list-heading {
    max-width: 760px;

    margin-bottom: 65px;
}

.service-list-heading .section-title span {
    display: block;

    color: #737780;
}


/* GRID */

.service-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 20px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    min-height: 400px;

    display: flex;

    flex-direction: column;

    padding: 30px;

    border-radius: 26px;

    background: #f7f7f4;

    border: 1px solid rgba(0,0,0,.06);

    overflow: hidden;

    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        box-shadow .55s ease,
        border-color .4s ease,
        background .4s ease;
}

.service-card:hover {
    background: #11141d;

    color: #fff;

    border-color: rgba(183,255,60,.22);

    box-shadow:
        0 35px 80px rgba(0,0,0,.12);
}


/* Background glow */

.service-card-glow {
    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background: rgba(183,255,60,.08);

    filter: blur(15px);

    opacity: 0;

    transition:
        opacity .5s ease,
        transform .7s ease;
}

.service-card:hover .service-card-glow {
    opacity: 1;

    transform: scale(1.5);
}


/* Top */

.service-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 2;
}

.service-index {
    font-family: monospace;

    color: #999da4;

    font-size: 10px;

    letter-spacing: 1px;
}

.service-icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: #11141d;

    color: #b7ff3c;

    font-size: 17px;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .4s ease,
        color .4s ease;
}

.service-card:hover .service-icon {
    background: #b7ff3c;

    color: #11141d;

    transform:
        rotate(-8deg)
        scale(1.1);
}


/* Body */

.service-card-body {
    position: relative;

    z-index: 2;

    margin-top: 55px;
}

.service-card-body h3 {
    max-width: 300px;

    font-family: 'Outfit', sans-serif;

    font-size: 28px;

    line-height: 1.02;

    letter-spacing: -1px;
}

.service-card-body p {
    max-width: 310px;

    margin-top: 16px;

    color: #737780;

    font-size: 12px;

    line-height: 1.8;

    transition:
        color .3s ease;
}

.service-card:hover .service-card-body p {
    color: #aeb1b8;
}


/* Footer */

.service-card-footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 25px;

    border-top: 1px solid rgba(0,0,0,.08);

    transition:
        border-color .3s ease;
}

.service-card:hover .service-card-footer {
    border-color: rgba(255,255,255,.1);
}

.service-card-footer > span {
    color: #9a9ea5;

    font-family: monospace;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* Details button */

.service-details-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 10px 9px 15px;

    border-radius: 50px;

    background: #11141d;

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.service-details-button i {
    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #b7ff3c;

    color: #11141d;

    transition:
        transform .4s ease;
}

.service-card:hover .service-details-button {
    background: #b7ff3c;

    color: #11141d;
}

.service-details-button:hover {
    transform: translateY(-3px);
}

.service-details-button:hover i {
    transform:
        translateX(4px)
        rotate(-45deg);
}


/* =========================================================
   PROCESS
========================================================= */

.service-process-section {
    padding: 125px 0;

    background: #f5f5f2;
}

.service-process-heading {
    max-width: 760px;

    margin-bottom: 60px;
}

.service-process-heading .section-title span {
    display: block;

    color: #7a7d84;
}

.service-process-grid {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 20px;
}

.service-process-card {
    position: relative;

    padding: 32px;

    min-height: 280px;

    border-radius: 25px;

    background: #fff;

    border: 1px solid rgba(0,0,0,.07);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.service-process-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.08);
}

.service-process-card > span {
    font-family: monospace;

    color: #9b9ea5;

    font-size: 10px;

    letter-spacing: 1px;
}

.service-process-card > i {
    display: block;

    margin-top: 35px;

    color: #11141d;

    font-size: 24px;

    transition:
        transform .4s ease,
        color .3s ease;
}

.service-process-card:hover > i {
    color: #b7ff3c;

    transform:
        scale(1.1)
        rotate(-6deg);
}

.service-process-card h3 {
    margin-top: 18px;

    font-family: 'Outfit', sans-serif;

    font-size: 24px;
}

.service-process-card p {
    margin-top: 10px;

    max-width: 300px;

    color: #737780;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.service-cta-section {
    padding: 140px 0;

    background: #11141d;

    color: #fff;
}

.service-cta-section h2 {
    margin-top: 24px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(48px, 7vw, 80px);

    line-height: .96;

    letter-spacing: -3px;
}

.service-cta-section h2 span {
    display: block;

    color: #b7ff3c;
}

.service-cta-section p {
    max-width: 630px;

    margin: 25px auto 35px;

    color: #a4a8b0;

    font-size: 15px;

    line-height: 1.8;
}

.service-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 7px 8px 7px 22px;

    border-radius: 50px;

    background: #b7ff3c;

    color: #11141d;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.service-cta-button span {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #11141d;

    color: #fff;

    transition:
        transform .4s ease;
}

.service-cta-button:hover {
    color: #11141d;

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(183,255,60,.18);
}

.service-cta-button:hover span {
    transform:
        rotate(-45deg);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

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

    .service-process-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .service-hero {
        padding: 105px 0 80px;
    }

    .service-hero-title {
        font-size: 50px;
        letter-spacing: -2px;
    }

    .service-hero-copy {
        font-size: 14px;
    }

    .service-list-section,
    .service-process-section,
    .service-cta-section {
        padding: 80px 0;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 340px;
    }

    .service-card-body {
        margin-top: 40px;
    }

    .service-card-body h3 {
        font-size: 24px;
    }

}


/* Service details page css */
/* =========================================================
   SERVICE DETAILS
========================================================= */

.service-details-hero {
    position: relative;

    overflow: hidden;

    padding: 110px 0 100px;

    background: #11141d;

    color: #fff;
}

.service-details-grid {
    position: absolute;

    inset: 0;

    opacity: .2;

    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size: 70px 70px;
}

.service-details-orbit {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -220px;

    border-radius: 50%;

    border: 1px solid rgba(183,255,60,.15);

    animation:
        serviceDetailsOrbit 15s linear infinite;
}

@keyframes serviceDetailsOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   BACK
========================================================= */

.service-back-link {
    position: relative;
    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 50px;

    color: #9da1a8;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition:
        color .3s ease,
        transform .3s ease;
}

.service-back-link:hover {
    color: #b7ff3c;

    transform: translateX(-5px);
}


/* =========================================================
   HERO
========================================================= */

.service-detail-number {
    position: absolute;

    right: 7%;

    bottom: -50px;

    font-family: 'Outfit', sans-serif;

    font-size: 240px;

    line-height: .8;

    font-weight: 800;

    color: rgba(255,255,255,.025);

    pointer-events: none;
}

.service-detail-category {
    position: relative;

    z-index: 2;

    color: #b7ff3c;

    font-family: monospace;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.service-detail-icon {
    position: relative;

    z-index: 2;

    width: 65px;
    height: 65px;

    display: grid;

    place-items: center;

    margin-top: 25px;

    border-radius: 19px;

    background: #b7ff3c;

    color: #11141d;

    font-size: 22px;

    box-shadow:
        0 15px 45px rgba(183,255,60,.15);

    transition:
        transform .5s cubic-bezier(.16,1,.3,1);
}

.service-detail-icon:hover {
    transform:
        rotate(-8deg)
        scale(1.08);
}

.service-detail-title {
    position: relative;

    z-index: 2;

    max-width: 950px;

    margin-top: 30px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(55px, 7vw, 92px);

    line-height: .92;

    letter-spacing: -4px;
}

.service-detail-intro {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin-top: 27px;

    color: #aeb1b8;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   CONTENT
========================================================= */

.service-details-content {
    padding: 110px 0;

    background: #f5f5f2;
}

.service-details-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        280px;

    gap: 35px;

    align-items: start;
}

.service-details-main {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   CONTENT CARDS
========================================================= */

.service-overview-card,
.service-deliverables-card,
.service-process-detail-card {
    padding: 40px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid rgba(0,0,0,.07);

    box-shadow:
        0 15px 40px rgba(0,0,0,.04);
}

.service-content-kicker {
    color: #b7ff3c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.service-overview-card h2,
.service-deliverables-card h2,
.service-process-detail-card h2 {
    margin-top: 10px;

    font-family: 'Outfit', sans-serif;

    font-size: 34px;

    line-height: 1.05;

    letter-spacing: -1px;
}

.service-overview-card p {
    margin-top: 22px;

    color: #70747c;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   DELIVERABLES
========================================================= */

.service-deliverables-grid {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 10px;

    margin-top: 30px;
}

.service-deliverable {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px;

    border-radius: 14px;

    background: #f7f7f4;

    transition:
        transform .3s ease,
        background .3s ease;
}

.service-deliverable:hover {
    transform: translateX(6px);

    background: #f9ffe8;
}

.service-deliverable > span {
    font-family: monospace;

    color: #9b9ea5;

    font-size: 9px;
}

.service-deliverable > i {
    color: #b7ff3c;

    font-size: 10px;
}

.service-deliverable strong {
    color: #464a52;

    font-size: 11px;
}


/* =========================================================
   PROCESS
========================================================= */

.service-detail-process {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 10px;

    margin-top: 30px;
}

.service-detail-process > div {
    padding: 18px;

    border-radius: 16px;

    background: #f7f7f4;
}

.service-detail-process span {
    font-family: monospace;

    color: #b7ff3c;

    font-size: 10px;
}

.service-detail-process h3 {
    margin-top: 14px;

    font-family: 'Outfit', sans-serif;

    font-size: 18px;
}

.service-detail-process p {
    margin-top: 8px;

    color: #7b7f87;

    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   SIDEBAR
========================================================= */

.service-details-sidebar {
    position: sticky;

    top: 110px;

    display: flex;

    flex-direction: column;

    gap: 15px;
}

.service-contact-card {
    padding: 30px;

    border-radius: 25px;

    background: #11141d;

    color: #fff;
}

.service-contact-card > span {
    color: #b7ff3c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.service-contact-card h3 {
    margin-top: 15px;

    font-family: 'Outfit', sans-serif;

    font-size: 28px;

    line-height: 1.05;
}

.service-contact-card p {
    margin-top: 15px;

    color: #9fa3aa;

    font-size: 11px;

    line-height: 1.7;
}

.service-sidebar-button {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 25px;

    padding: 8px 8px 8px 16px;

    background: #b7ff3c;

    color: #11141d;

    border-radius: 50px;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;
}

.service-sidebar-button i {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #11141d;

    color: #fff;

    transition:
        transform .35s ease;
}

.service-sidebar-button:hover {
    color: #11141d;
}

.service-sidebar-button:hover i {
    transform:
        translateX(4px)
        rotate(-45deg);
}


/* Sidebar stats */

.service-sidebar-stats {
    padding: 20px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid rgba(0,0,0,.07);
}

.service-sidebar-stats div {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.service-sidebar-stats div:last-child {
    border-bottom: 0;
}

.service-sidebar-stats strong {
    color: #b7ff3c;

    font-family: monospace;

    font-size: 10px;
}

.service-sidebar-stats span {
    color: #72767e;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   CTA
========================================================= */

.service-details-cta {
    padding: 120px 0;

    background: #11141d;

    color: #fff;
}

.service-details-cta h2 {
    margin-top: 24px;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(45px,6vw,70px);

    line-height: 1;

    letter-spacing: -2px;
}

.service-details-cta h2 span {
    display: block;

    color: #b7ff3c;
}

.service-details-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 30px;

    padding: 13px 18px 13px 22px;

    border-radius: 50px;

    background: #b7ff3c;

    color: #11141d;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.service-details-cta-button i {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #11141d;

    color: #fff;

    transition:
        transform .4s ease;
}

.service-details-cta-button:hover {
    color: #11141d;

    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(183,255,60,.18);
}

.service-details-cta-button:hover i {
    transform:
        translateX(5px)
        rotate(-45deg);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .service-details-layout {
        grid-template-columns: 1fr;
    }

    .service-details-sidebar {
        position: static;
    }

    .service-detail-number {
        font-size: 170px;
    }
}


@media (max-width: 650px) {

    .service-details-hero {
        padding: 95px 0 75px;
    }

    .service-detail-title {
        font-size: 50px;

        letter-spacing: -2px;
    }

    .service-detail-intro {
        font-size: 14px;
    }

    .service-details-content,
    .service-details-cta {
        padding: 80px 0;
    }

    .service-overview-card,
    .service-deliverables-card,
    .service-process-detail-card {
        padding: 25px;
    }

    .service-overview-card h2,
    .service-deliverables-card h2,
    .service-process-detail-card h2 {
        font-size: 28px;
    }

    .service-deliverables-grid,
    .service-detail-process {
        grid-template-columns: 1fr;
    }

}


/* Read MOre Button */
/* =========================================
   READ MORE BUTTON
========================================= */

.read-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 14px 28px;

    background: #111;
    color: #fff;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* Animated background */

.read-more-btn::before {
    content: "";
    position: absolute;

    width: 0;
    height: 0;

    background: #b7ff3c;

    border-radius: 50%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    transition:
        width 0.5s ease,
        height 0.5s ease;
}


/* Text */

.read-more-btn span {
    position: relative;
    z-index: 2;

    transition: color 0.35s ease;
}


/* Arrow */

.read-more-arrow {
    font-size: 20px;
    line-height: 1;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


/* Hover */

.read-more-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.15);
}


.read-more-btn:hover::before {
    width: 350px;
    height: 350px;
}


.read-more-btn:hover span {
    color: #111;
}


.read-more-btn:hover .read-more-arrow {
    color: #111;
    transform: translateX(7px);
}


/* Click */

.read-more-btn:active {
    transform: translateY(-1px) scale(0.97);
}