/* =========================================================
   PKS IT SOLUTIONS
   PROFESSIONAL HEADER
========================================================= */

.pks-header {
  position: relative;
  width: 100%;
  z-index: 99999;
}

/* NAVBAR */

.pks-navbar {
  position: relative;
  min-height: 82px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 34, 68, 0.08);
  box-shadow: 0 8px 30px rgba(15, 34, 68, 0.07);
  overflow: visible;
}

/* TOP ANIMATION */

.pks-navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 3px;
  background: #e85d1a;
  animation: pksHeaderLine 5s linear infinite;
}

@keyframes pksHeaderLine {
  0% {
    left: -30%;
  }

  100% {
    left: 100%;
  }
}

/* ================================
   KAUSHAL KUMAR TEXT LOGO
================================ */
.kk-logo-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.kk-logo-name {
  font-size: 28px;
  font-weight: 800;
  color: #e85d1a;
  letter-spacing: -1px;
}

.kk-logo-surname {
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -1px;
}

.kk-logo-text:hover {
  text-decoration: none;
}

@media (max-width: 575px) {
  .kk-logo-name,
  .kk-logo-surname {
    font-size: 23px;
  }
}
/* LOGO */

.pks-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.pks-logo-img {
  display: block;
  width: auto;
  max-width: 210px;
  max-height: 60px;
  object-fit: contain;
  transition: 0.3s ease;
}

.pks-logo:hover .pks-logo-img {
  transform: translateY(-2px);
}

/* NAVIGATION */

.pks-nav-list {
  gap: 3px;
  list-style: none !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

.pks-nav-list > li {
  list-style: none !important;
}

.pks-nav-link {
  position: relative;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 30px 13px !important;

  color: #0f2244 !important;

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

  text-decoration: none;

  transition: 0.3s ease;
}

.pks-nav-link i {
  font-size: 16px;
  transition: 0.3s ease;
}

.pks-nav-link:hover {
  color: #e85d1a !important;
}

.pks-nav-link:hover i {
  transform: translateY(-2px);
}

/* ACTIVE LINE */

.pks-nav-link::after {
  content: "";

  position: absolute;

  left: 13px;
  right: 13px;
  bottom: 17px;

  height: 2px;

  background: #e85d1a;

  transform: scaleX(0);

  transition: 0.3s ease;
}

.pks-nav-link:hover::after,
.pks-nav-link.active::after {
  transform: scaleX(1);
}

/* DROPDOWN */

.pks-dropdown {
  min-width: 280px;

  margin-top: 0 !important;

  padding: 10px;

  border: 0;

  border-radius: 14px;

  background: #ffffff;

  box-shadow: 0 20px 55px rgba(15, 34, 68, 0.15);

  animation: pksDropdown 0.25s ease;
}

@keyframes pksDropdown {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.pks-dropdown li {
  list-style: none !important;
}

.pks-dropdown-item {
  display: flex;

  align-items: center;

  gap: 11px;

  padding: 10px 11px;

  border-radius: 9px;

  color: #0f2244;

  font-size: 14px;

  font-weight: 600;

  transition: 0.25s ease;
}

.pks-dropdown-item:hover {
  color: #e85d1a;

  background: rgba(232, 93, 26, 0.07);

  padding-left: 16px;
}

.pks-menu-icon {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 8px;

  color: #e85d1a;

  background: rgba(232, 93, 26, 0.09);
}

.pks-dropdown-item:hover .pks-menu-icon {
  color: #ffffff;
  background: #e85d1a;
}

.pks-view-all {
  justify-content: space-between;
  color: #e85d1a;
}

/* CTA */

.pks-cta-item {
  margin-left: 10px;
  list-style: none !important;
}

.pks-header-btn {
  position: relative;

  display: inline-flex;

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

  gap: 8px;

  padding: 12px 18px;

  border-radius: 8px;

  background: #e85d1a;

  color: #ffffff !important;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  transition: 0.3s ease;
}

.pks-header-btn:hover {
  color: #ffffff !important;

  background: #0f2244;

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(232, 93, 26, 0.25);
}

.pks-header-btn i {
  transition: 0.3s ease;
}

.pks-header-btn:hover i {
  transform: translate(3px, -3px);
}

/* MOBILE BUTTON */

.pks-toggler {
  width: 44px;
  height: 42px;

  padding: 7px !important;

  border: 1px solid rgba(15, 34, 68, 0.15) !important;

  border-radius: 8px;

  background: #ffffff !important;

  box-shadow: none !important;
}

.pks-toggler:focus {
  box-shadow: 0 0 0 3px rgba(232, 93, 26, 0.12) !important;
}

.pks-toggler-line {
  display: block;

  width: 23px;
  height: 2px;

  margin: 4px auto;

  border-radius: 10px;

  background: #0f2244;

  transition: 0.3s ease;
}

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

.pks-hero {
  position: relative;

  padding: 100px 0;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(232, 93, 26, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff, #f7f9fc);

  overflow: hidden;
}

.pks-hero-content {
  position: relative;
  max-width: 850px;
  z-index: 2;
}

.pks-hero-tag {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 8px 14px;

  margin-bottom: 18px;

  border-radius: 30px;

  color: #e85d1a;

  background: rgba(232, 93, 26, 0.09);

  font-size: 14px;

  font-weight: 700;
}

.pks-hero h1 {
  margin: 0 0 20px;

  color: #0f2244;

  font-size: clamp(38px, 5vw, 64px);

  line-height: 1.12;

  font-weight: 800;
}

.pks-hero h1 span {
  display: block;
  color: #e85d1a;
}

.pks-hero p {
  max-width: 760px;

  margin-bottom: 28px;

  color: #596579;

  font-size: 17px;

  line-height: 1.8;
}

/* BUTTONS */

.pks-hero-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pks-primary-btn,
.pks-secondary-btn {
  display: inline-flex;

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

  gap: 9px;

  min-height: 50px;

  padding: 12px 22px;

  border-radius: 8px;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  transition: 0.3s ease;
}

.pks-primary-btn {
  color: #ffffff;
  background: #e85d1a;
}

.pks-primary-btn:hover {
  color: #ffffff;

  background: #0f2244;

  transform: translateY(-3px);
}

.pks-secondary-btn {
  color: #0f2244;

  border: 1px solid rgba(15, 34, 68, 0.15);

  background: #ffffff;
}

.pks-secondary-btn:hover {
  color: #ffffff;

  background: #0f2244;

  border-color: #0f2244;

  transform: translateY(-3px);
}

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

@media (max-width: 991.98px) {
  .pks-navbar {
    min-height: 70px;
  }

  .pks-logo-img {
    max-width: 180px;
    max-height: 52px;
  }

  .pks-nav-list {
    gap: 0;
    padding: 12px 0 10px !important;
    align-items: stretch !important;
  }

  .pks-nav-link {
    padding: 13px 10px !important;
    border-bottom: 1px solid rgba(15, 34, 68, 0.07);
  }

  .pks-nav-link::after {
    display: none;
  }

  .pks-dropdown {
    width: 100%;
    min-width: 100%;
    margin-top: 5px !important;
    box-shadow: none;
    border: 1px solid rgba(15, 34, 68, 0.08);
    animation: none;
  }

  .pks-cta-item {
    margin: 15px 0 5px;
  }

  .pks-header-btn {
    width: 100%;
  }

  .pks-hero {
    padding: 75px 0;
  }
}

/* SMALL MOBILE */

@media (max-width: 575.98px) {
  .pks-navbar .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .pks-logo-img {
    max-width: 165px;
    max-height: 48px;
  }

  .pks-hero {
    padding: 60px 0;
  }

  .pks-hero h1 {
    font-size: 35px;
  }

  .pks-hero p {
    font-size: 15px;
  }

  .pks-hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .pks-primary-btn,
  .pks-secondary-btn {
    width: 100%;
  }
}
/* =========================================================
   PKS HERO IMAGE
   ONLY HERO IMAGE STYLES
========================================================= */

.pks-hero-image-box {
  position: relative;

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

  min-height: 470px;

  margin-left: auto;

  display: flex;

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

  overflow: visible;
}

/* Main Image */

.pks-hero-image {
  position: relative;

  display: block;

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

  height: 430px;

  object-fit: cover;

  border-radius: 24px;

  border: 8px solid rgba(255, 255, 255, 0.95);

  box-shadow: 0 25px 60px rgba(15, 34, 68, 0.16);

  z-index: 3;

  animation: pksHeroImageFloat 5s ease-in-out infinite;

  transition: all 0.4s ease;
}

.pks-hero-image:hover {
  transform: translateY(-5px);

  box-shadow: 0 30px 70px rgba(15, 34, 68, 0.22);
}

/* Orange Decorative Border */

.pks-hero-image-box::before {
  content: "";

  position: absolute;

  width: 90%;

  height: 90%;

  top: 5%;
  right: -10px;

  border-radius: 28px;

  border: 2px solid rgba(232, 93, 26, 0.2);

  z-index: 1;
}

/* Navy Decorative Circle */

.pks-hero-image-circle {
  position: absolute;

  width: 100px;
  height: 100px;

  top: 5px;
  right: 5px;

  border-radius: 50%;

  border: 14px solid rgba(232, 93, 26, 0.13);

  z-index: 0;

  animation: pksHeroCircleRotate 8s linear infinite;
}

/* Floating Card */

.pks-hero-floating-card {
  position: absolute;

  left: 5px;
  bottom: 35px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 13px 17px;

  min-width: 205px;

  border-radius: 13px;

  background: #ffffff;

  border: 1px solid rgba(15, 34, 68, 0.08);

  box-shadow: 0 15px 40px rgba(15, 34, 68, 0.14);

  z-index: 5;

  animation: pksHeroCardFloat 4s ease-in-out infinite;
}

.pks-hero-floating-icon {
  width: 42px;
  height: 42px;

  min-width: 42px;

  display: flex;

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

  border-radius: 10px;

  color: #ffffff;

  background: #e85d1a;

  font-size: 18px;
}

.pks-hero-floating-card strong {
  display: block;

  color: #0f2244;

  font-size: 13px;

  font-weight: 700;

  line-height: 1.3;
}

.pks-hero-floating-card span {
  display: block;

  margin-top: 3px;

  color: #7a8492;

  font-size: 10px;

  line-height: 1.3;
}

/* =========================================================
   IMAGE ANIMATIONS
========================================================= */

@keyframes pksHeroImageFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes pksHeroCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes pksHeroCircleRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .pks-hero-image-box {
    max-width: 600px;

    min-height: 420px;

    margin: 20px auto 0;
  }

  .pks-hero-image {
    max-width: 100%;

    height: 400px;
  }
}

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

@media (max-width: 575.98px) {
  .pks-hero {
    width: 100%;

    overflow: hidden;
  }

  .pks-hero-image-box {
    width: 100%;

    max-width: 100%;

    min-height: 330px;

    margin: 10px auto 0;

    padding: 0 5px;
  }

  .pks-hero-image {
    width: 100%;

    max-width: 100%;

    height: 285px;

    border-width: 5px;

    border-radius: 18px;

    animation: pksHeroMobileFloat 5s ease-in-out infinite;
  }

  .pks-hero-image-box::before {
    right: 0;

    width: 90%;

    height: 90%;
  }

  .pks-hero-image-circle {
    width: 55px;
    height: 55px;

    top: 0;
    right: 0;

    border-width: 8px;
  }

  /*
       Floating card mobile par image ke bahar
       nahi jayega
    */

  .pks-hero-floating-card {
    left: 15px;
    bottom: 5px;

    min-width: 175px;

    padding: 9px 11px;
  }

  .pks-hero-floating-icon {
    width: 35px;
    height: 35px;

    min-width: 35px;

    font-size: 15px;
  }

  .pks-hero-floating-card strong {
    font-size: 11px;
  }

  .pks-hero-floating-card span {
    font-size: 9px;
  }
}

@keyframes pksHeroMobileFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =========================================================
   PKS IT SOLUTIONS - PREMIUM HERO
   Brand Colors:
   Orange: #e85d1a
   Navy:   #0f2244
========================================================= */

.pks-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 680px;

  display: flex;
  align-items: center;

  padding: 75px 0 65px;

  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(232, 93, 26, 0.09),
      transparent 30%
    ),
    radial-gradient(circle at 10% 80%, rgba(15, 34, 68, 0.25), transparent 30%),
    #07090b;

  color: #fff;

  overflow: hidden;
}

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

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

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

  background-size: 58px 58px;

  opacity: 0.55;

  pointer-events: none;
}

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

.pks-hero-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(10px);
}

.pks-glow-one {
  width: 450px;
  height: 450px;

  left: -250px;
  top: -200px;

  background: radial-gradient(circle, rgba(232, 93, 26, 0.14), transparent 70%);

  animation: pksGlowMove 7s ease-in-out infinite;
}

.pks-glow-two {
  width: 550px;
  height: 550px;

  right: -300px;
  bottom: -300px;

  background: radial-gradient(circle, rgba(232, 93, 26, 0.1), transparent 70%);

  animation: pksGlowMove 9s ease-in-out infinite reverse;
}

@keyframes pksGlowMove {
  0%,
  100% {
    transform: translate(0, 0);
  }

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

/* =========================================================
   BACKGROUND DOTS
========================================================= */

.pks-bg-dot {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #f2c500;

  box-shadow: 0 0 12px rgba(242, 197, 0, 0.8);

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

.pks-dot-1 {
  top: 18%;
  left: 44%;
}

.pks-dot-2 {
  top: 8%;
  right: 18%;

  animation-delay: 1s;
}

.pks-dot-3 {
  bottom: 25%;
  left: 48%;

  animation-delay: 1.5s;
}

.pks-dot-4 {
  bottom: 15%;
  right: 25%;

  animation-delay: 2s;
}

@keyframes pksDotBlink {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/* =========================================================
   ROW
========================================================= */

.pks-hero-row {
  position: relative;
  z-index: 3;

  min-height: 530px;
}

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

.pks-hero-content {
  position: relative;
  z-index: 5;

  max-width: 600px;
}

/* =========================================================
   TRUST BADGE
========================================================= */

.pks-hero-tag {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 8px 15px;

  margin-bottom: 23px;

  border: 1px solid rgba(242, 197, 0, 0.45);

  border-radius: 50px;

  background: rgba(242, 197, 0, 0.035);

  color: #e85d1a;

  font-size: 12px;

  font-weight: 700;

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

.pks-tag-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #f2c500;

  box-shadow: 0 0 10px rgba(242, 197, 0, 0.8);
}

@keyframes pksBadgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(242, 197, 0, 0);
  }

  50% {
    box-shadow: 0 0 18px rgba(242, 197, 0, 0.1);
  }
}

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

.pks-hero-content h1 {
  margin: 0 0 22px;

  color: #ffffff;

  font-size: clamp(44px, 5vw, 66px);

  line-height: 1.01;

  font-weight: 800;

  letter-spacing: -2.5px;
}

.pks-hero-content h1 span {
  display: block;

  color: #e85d1a;

  text-shadow: 0 0 30px rgba(242, 197, 0, 0.08);
}

.pks-hero-content h1 strong {
  display: block;

  color: #ffffff;

  font-weight: 800;
}

/* =========================================================
   SPECIALITY
========================================================= */

.pks-hero-speciality {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 25px;

  font-size: 14px;

  font-weight: 700;
}

.pks-speciality-label {
  color: #666b70;
}

.pks-speciality-animated {
  position: relative;

  min-width: 180px;

  color: #e85d1a;

  overflow: hidden;

  white-space: nowrap;

  animation: pksTextBlink 1s infinite;
}

@keyframes pksTextBlink {
  0%,
  45% {
    border-right: 2px solid #e85d1a;
  }

  46%,
  100% {
    border-right: 2px solid transparent;
  }
}

/* =========================================================
   DESCRIPTION
========================================================= */

.pks-hero-description {
  max-width: 590px;

  margin: 0 0 29px;

  color: #8f949a;

  font-size: 14px;

  line-height: 1.85;

  font-weight: 500;
}

.pks-hero-description strong {
  color: #ffffff;
}

/* =========================================================
   BUTTONS
========================================================= */

.pks-hero-buttons {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 39px;
}

.pks-primary-btn,
.pks-secondary-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 49px;

  padding: 12px 21px;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none !important;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.pks-primary-btn {
  color: #101010 !important;

  background: #e85d1a;

  box-shadow: 0 10px 30px rgba(245, 169, 0, 0.15);
}

.pks-primary-btn:hover {
  color: #fff !important;

  background: #e85d1a;

  transform: translateY(-3px);

  box-shadow: 0 15px 35px rgba(232, 93, 26, 0.25);
}

.pks-secondary-btn {
  color: #ffffff !important;

  border: 1px solid rgba(0, 122, 255, 0.85);

  background: rgba(0, 90, 200, 0.025);
}

.pks-secondary-btn:hover {
  color: #ffffff !important;

  border-color: #e85d1a;

  background: #e85d1a;

  transform: translateY(-3px);
}

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

.pks-hero-stats {
  display: flex;

  align-items: center;
}

.pks-stat {
  min-width: 105px;

  padding-right: 20px;

  margin-right: 20px;

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

.pks-stat:last-child {
  border-right: 0;

  margin-right: 0;

  padding-right: 0;
}

.pks-stat strong {
  display: block;

  color: #e85d1a;

  font-size: 24px;

  line-height: 1;

  font-weight: 800;
}

.pks-stat span {
  display: block;

  margin-top: 7px;

  color: #62676c;

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;
}

/* =========================================================
   RIGHT VISUAL
========================================================= */

.pks-hero-visual {
  position: relative;

  width: 100%;

  min-height: 540px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 4;
}

/* =========================================================
   DASHBOARD
========================================================= */

.pks-dashboard-card {
  position: relative;

  width: min(100%, 475px);

  min-height: 365px;

  padding: 19px;

  border: 1px solid rgba(232, 93, 26, 0.3);

  border-radius: 21px;

  background: linear-gradient(
    145deg,
    rgba(24, 24, 22, 0.96),
    rgba(8, 9, 9, 0.96)
  );

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(232, 93, 26, 0.05);

  backdrop-filter: blur(15px);

  z-index: 5;

  animation: pksDashboardFloat 5s ease-in-out infinite;
}

@keyframes pksDashboardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

.pks-dashboard-top {
  display: grid;

  grid-template-columns: 70px 1fr 50px;

  align-items: center;

  gap: 10px;

  padding-bottom: 15px;

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

.pks-dashboard-dots {
  display: flex;

  gap: 5px;
}

.pks-dashboard-dots span {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #ff5f57;
}

.pks-dashboard-dots span:nth-child(2) {
  background: #e85d1a;
}

.pks-dashboard-dots span:nth-child(3) {
  background: #28c840;
}

.pks-dashboard-top strong {
  text-align: center;

  color: #777b80;

  font-size: 10px;

  letter-spacing: 1px;
}

.pks-dashboard-top small {
  text-align: right;

  color: #e85d1a;

  font-size: 9px;

  font-weight: 700;
}

.pks-dashboard-top small i {
  margin-right: 3px;

  font-size: 6px;
}

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

.pks-dashboard-content {
  display: grid;

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

  gap: 11px;

  margin-top: 15px;
}

.pks-dashboard-stat {
  padding: 15px 8px 12px;

  border: 1px solid rgba(242, 197, 0, 0.12);

  border-radius: 10px;

  background: rgba(242, 197, 0, 0.025);

  text-align: center;
}

.pks-dashboard-stat strong {
  display: block;

  color: #e85d1a;

  font-size: 27px;

  line-height: 1;

  font-weight: 800;
}

.pks-dashboard-stat span {
  display: block;

  margin-top: 5px;

  color: #686c70;

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;
}

.pks-dashboard-stat small {
  display: block;

  margin-top: 6px;

  color: #e85d1a;

  font-size: 8px;

  font-weight: 700;
}

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

.pks-chart-heading {
  margin-top: 19px;

  color: #666a6e;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.6px;
}

/* =========================================================
   CHART
========================================================= */

.pks-mini-chart {
  height: 100px;

  display: flex;

  align-items: flex-end;

  gap: 7px;

  padding: 10px 2px 0;

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

.pks-mini-chart span {
  flex: 1;

  min-width: 7px;

  border-radius: 4px 4px 0 0;

  background: linear-gradient(to top, #e85d1a, #e85d1a);

  transform-origin: bottom;

  animation: pksChartGrow 2.5s ease-in-out infinite alternate;
}

.pks-mini-chart span:nth-child(2) {
  animation-delay: 0.15s;
}

.pks-mini-chart span:nth-child(3) {
  animation-delay: 0.3s;
}

.pks-mini-chart span:nth-child(4) {
  animation-delay: 0.45s;
}

.pks-mini-chart span:nth-child(5) {
  animation-delay: 0.6s;
}

.pks-mini-chart span:nth-child(6) {
  animation-delay: 0.75s;
}

.pks-mini-chart span:nth-child(7) {
  animation-delay: 0.9s;
}

@keyframes pksChartGrow {
  from {
    opacity: 0.55;
    transform: scaleY(0.92);
  }

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

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

.pks-dashboard-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 13px;
}

.pks-dashboard-tags span {
  padding: 5px 9px;

  border: 1px solid rgba(242, 197, 0, 0.2);

  border-radius: 30px;

  color: #e85d1a;

  background: rgba(242, 197, 0, 0.035);

  font-size: 8px;

  font-weight: 700;
}

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

.pks-floating-icon {
  position: absolute;

  width: 49px;
  height: 49px;

  display: flex;

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

  border: 1px solid rgba(242, 197, 0, 0.28);

  border-radius: 50%;

  color: #e85d1a;

  background: rgba(13, 14, 14, 0.9);

  box-shadow: 0 0 25px rgba(242, 197, 0, 0.1);

  z-index: 7;

  animation: pksIconFloat 4s ease-in-out infinite;
}

.pks-float-1 {
  top: 25px;
  left: 10px;
}

.pks-float-2 {
  top: 80px;
  right: 0;

  animation-delay: 0.8s;
}

.pks-float-3 {
  left: 0;
  bottom: 115px;

  animation-delay: 1.4s;
}

.pks-float-4 {
  right: 25px;
  bottom: 65px;

  animation-delay: 2s;
}

@keyframes pksIconFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}

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

.pks-project-card,
.pks-traffic-card,
.pks-review-card {
  position: absolute;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 10px 13px;

  border: 1px solid rgba(242, 197, 0, 0.22);

  border-radius: 12px;

  background: rgba(9, 10, 10, 0.95);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  z-index: 10;
}

.pks-project-card {
  top: 45px;
  right: -15px;

  animation: pksSmallCardFloat 4s ease-in-out infinite;
}

.pks-traffic-card {
  bottom: 40px;
  left: -15px;

  animation: pksSmallCardFloat 4.5s ease-in-out infinite;
}

.pks-review-card {
  right: -45px;
  top: 225px;

  animation: pksSmallCardFloat 5s ease-in-out infinite;
}

@keyframes pksSmallCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* Project icon */

.pks-project-icon {
  width: 35px;
  height: 35px;

  display: flex;

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

  border-radius: 9px;

  color: #111;

  background: #e85d1a;
}

.pks-project-card strong,
.pks-traffic-card strong,
.pks-review-card strong {
  display: block;

  color: #fff;

  font-size: 10px;
}

.pks-project-card span,
.pks-traffic-card span,
.pks-review-card span {
  display: block;

  margin-top: 2px;

  color: #6c7075;

  font-size: 8px;
}

/* Traffic */

.pks-traffic-card > i {
  color: #e85d1a;

  font-size: 20px;
}

/* Review */

.pks-review-star {
  width: 33px;
  height: 33px;

  display: flex;

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

  border-radius: 8px;

  color: #111;

  background: #e85d1a;

  font-size: 14px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {
  .pks-hero-content h1 {
    font-size: 54px;
  }

  .pks-dashboard-card {
    width: 440px;
  }

  .pks-project-card {
    right: -5px;
  }

  .pks-review-card {
    right: -15px;
  }
}

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

@media (max-width: 991.98px) {
  .pks-hero {
    min-height: auto;

    padding: 70px 0 65px;
  }

  .pks-hero-content {
    max-width: 680px;

    margin: 0 auto;

    text-align: center;
  }

  .pks-hero-tag {
    justify-content: center;
  }

  .pks-hero-speciality {
    justify-content: center;
  }

  .pks-hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .pks-hero-buttons {
    justify-content: center;
  }

  .pks-hero-stats {
    justify-content: center;
  }

  .pks-hero-visual {
    min-height: 500px;

    margin-top: 20px;
  }

  .pks-dashboard-card {
    width: min(90%, 475px);
  }
}

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

@media (max-width: 575.98px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
  }

  .pks-hero {
    width: 100%;

    min-height: auto;

    padding: 50px 0 65px;

    overflow: hidden;
  }

  .pks-hero .container {
    width: 100%;

    max-width: 100%;

    padding-left: 15px;
    padding-right: 15px;
  }

  .pks-hero-row {
    min-height: auto;

    margin-left: 0;
    margin-right: 0;
  }

  .pks-hero-content {
    width: 100%;

    max-width: 100%;
  }

  .pks-hero-tag {
    display: inline-flex;

    max-width: 100%;

    padding: 7px 12px;

    font-size: 10px;
  }

  .pks-hero-content h1 {
    font-size: 36px;

    line-height: 1.06;

    letter-spacing: -1.2px;
  }

  .pks-hero-speciality {
    flex-wrap: wrap;

    font-size: 12px;

    gap: 6px;
  }

  .pks-speciality-animated {
    min-width: 160px;
  }

  .pks-hero-description {
    font-size: 13px;

    line-height: 1.75;
  }

  /* Buttons */

  .pks-hero-buttons {
    width: 100%;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;
  }

  .pks-primary-btn,
  .pks-secondary-btn {
    width: 100%;

    min-height: 50px;
  }

  /* Stats */

  .pks-hero-stats {
    display: grid;

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

    width: 100%;

    gap: 20px 0;
  }

  .pks-stat {
    min-width: 0;

    width: 100%;

    margin: 0;

    padding: 0 8px;

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

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

  .pks-stat strong {
    font-size: 22px;
  }

  .pks-stat span {
    font-size: 8px;
  }

  /* =====================================================
       RIGHT DASHBOARD
    ===================================================== */

  .pks-hero-visual {
    width: 100%;

    min-height: 375px;

    margin-top: 25px;
  }

  .pks-dashboard-card {
    width: calc(100% - 10px);

    max-width: 430px;

    min-height: 290px;

    padding: 12px;

    border-radius: 16px;
  }

  .pks-dashboard-top {
    grid-template-columns: 50px 1fr 40px;

    padding-bottom: 10px;
  }

  .pks-dashboard-dots span {
    width: 7px;
    height: 7px;
  }

  .pks-dashboard-top strong {
    font-size: 8px;
  }

  .pks-dashboard-top small {
    font-size: 8px;
  }

  /* Dashboard stat */

  .pks-dashboard-content {
    gap: 6px;

    margin-top: 11px;
  }

  .pks-dashboard-stat {
    padding: 11px 4px 9px;
  }

  .pks-dashboard-stat strong {
    font-size: 19px;
  }

  .pks-dashboard-stat span {
    font-size: 7px;
  }

  .pks-dashboard-stat small {
    font-size: 7px;
  }

  /* Chart */

  .pks-chart-heading {
    margin-top: 13px;

    font-size: 8px;
  }

  .pks-mini-chart {
    height: 70px;

    gap: 4px;
  }

  .pks-mini-chart span {
    min-width: 5px;
  }

  /* Tags */

  .pks-dashboard-tags {
    gap: 4px;

    margin-top: 8px;
  }

  .pks-dashboard-tags span {
    padding: 4px 6px;

    font-size: 6px;
  }

  /* Floating icons */

  .pks-floating-icon {
    width: 35px;
    height: 35px;

    font-size: 12px;
  }

  .pks-float-1 {
    top: 5px;
    left: 0;
  }

  .pks-float-2 {
    top: 20px;
    right: 0;
  }

  .pks-float-3 {
    left: 0;
    bottom: 55px;
  }

  .pks-float-4 {
    right: 0;
    bottom: 30px;
  }

  /* Hide cards that can cause mobile overlap */

  .pks-project-card,
  .pks-traffic-card,
  .pks-review-card {
    display: none !important;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .pks-hero-content h1 {
    font-size: 31px;
  }

  .pks-hero {
    padding-top: 42px;
  }

  .pks-dashboard-card {
    width: 100%;

    padding: 10px;
  }

  .pks-dashboard-stat strong {
    font-size: 17px;
  }

  .pks-hero-visual {
    min-height: 350px;
  }
}

/* =========================================================
   PKS IT SOLUTIONS - ABOUT US MAIN CSS
========================================================= */

.pks-about-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: linear-gradient(
    135deg,
    rgba(200, 164, 74, 0.06),
    #ffffff 48%,
    rgba(200, 164, 74, 0.08)
  );
  isolation: isolate;
}

/* Background Grid */
.pks-about-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(200, 164, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(to bottom, transparent, black, transparent);
}

/* Background Shapes */
.pks-about-bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(5px);
  z-index: -2;
  pointer-events: none;
}

.pks-about-shape-1 {
  width: 300px;
  height: 300px;
  top: -120px;
  left: -100px;
  background: rgba(200, 164, 74, 0.13);
  animation: pksAboutFloatOne 8s ease-in-out infinite;
}

.pks-about-shape-2 {
  width: 350px;
  height: 350px;
  right: -140px;
  bottom: -160px;
  background: rgba(255, 166, 0, 0.1);
  animation: pksAboutFloatTwo 10s ease-in-out infinite;
}

/* =========================================================
   IMAGE AREA
========================================================= */

.pks-about-image-wrap {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
  padding: 15px;
}

.pks-about-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(34, 26, 7, 0.16);
  animation: pksAboutImageFloat 5s ease-in-out infinite;
}

/* Image Glow */
.pks-about-image-glow {
  position: absolute;
  width: 75%;
  height: 75%;
  left: 12%;
  top: 12%;
  border-radius: 50%;
  background: rgba(200, 164, 74, 0.22);
  filter: blur(55px);
  animation: pksAboutGlow 4s ease-in-out infinite alternate;
}

/* =========================================================
   EXPERIENCE BADGE
========================================================= */

.pks-about-experience {
  position: absolute;
  z-index: 4;
  left: -5px;
  bottom: 45px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 25px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(200, 164, 74, 0.25);
  box-shadow: 0 18px 45px rgba(34, 26, 7, 0.16);
}

.pks-about-experience-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #e85d1a, #e85d1a);
  color: #ffffff;
  font-size: 22px;
}

.pks-about-experience strong {
  display: block;
  color: #221a07;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}

.pks-about-experience span {
  display: block;
  margin-top: 5px;
  color: #777;
  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   FLOATING DOTS
========================================================= */

.pks-about-dot {
  position: absolute;
  z-index: 5;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e85d1a;
  box-shadow: 0 0 0 8px rgba(200, 164, 74, 0.12);
}

.pks-about-dot-1 {
  top: 40px;
  right: 5px;
  animation: pksAboutDot 3s ease-in-out infinite;
}

.pks-about-dot-2 {
  right: 35px;
  bottom: 25px;
  animation: pksAboutDot 4s ease-in-out infinite reverse;
}

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

.pks-about-content {
  position: relative;
}

.pks-about-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #e85d1a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.pks-about-label-line {
  width: 38px;
  height: 2px;
  background: #e85d1a;
  display: inline-block;
}

.pks-about-title {
  margin: 0 0 20px;
  color: #221a07;
  font-size: 46px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.pks-about-title span {
  display: block;
  color: #e85d1a;
}

.pks-about-intro {
  margin-bottom: 14px;
  color: #333;
  font-size: 18px;
  line-height: 1.75;
}

.pks-about-intro strong {
  color: #221a07;
}

.pks-about-text {
  margin-bottom: 25px;
  color: #707070;
  font-size: 15px;
  line-height: 1.8;
}

/* =========================================================
   FEATURES
========================================================= */

.pks-about-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 25px;
}

.pks-about-feature {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(200, 164, 74, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  transition: all 0.35s ease;
}

.pks-about-feature:hover {
  transform: translateY(-5px);
  border-color: rgba(#e85d1a);
  box-shadow: 0 15px 35px rgba(34, 26, 7, 0.08);
}

.pks-about-feature-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(200, 164, 74, 0.12);
  color: #e85d1a;
  font-size: 19px;
}

.pks-about-feature h4 {
  margin: 0 0 5px;
  color: #221a07;
  font-size: 15px;
  font-weight: 750;
}

.pks-about-feature p {
  margin: 0;
  color: #777;
  font-size: 12px;
  line-height: 1.5;
}

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

.pks-about-button {
  margin-top: 30px;
}

.pks-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e85d1a, #e85d1a);
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(184, 143, 49, 0.22);
  transition: all 0.35s ease;
}

.pks-about-btn i {
  transition: transform 0.3s ease;
}

.pks-about-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(184, 143, 49, 0.3);
}

.pks-about-btn:hover i {
  transform: translateX(5px);
}

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

.pks-about-stats {
  position: relative;
  margin-top: 80px;
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-radius: 20px;
  background: #221a07;
  box-shadow: 0 20px 50px rgba(34, 26, 7, 0.14);
}

.pks-about-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

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

.pks-about-stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(200, 164, 74, 0.15);
  color: #e85d1a;
  font-size: 20px;
}

.pks-about-stat strong {
  display: block;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
}

.pks-about-stat span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pksAboutImageFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes pksAboutGlow {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

@keyframes pksAboutFloatOne {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(60px, 35px);
  }
}

@keyframes pksAboutFloatTwo {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-50px, -40px);
  }
}

@keyframes pksAboutDot {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =========================================================
   KAUSHAL KUMAR - MISSION & VISION
   Isolated CSS - No effect on other sections
========================================================= */

.kk-mv-section {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  background: linear-gradient(135deg, #ffffff 0%, #fcfaf5 50%, #ffffff 100%);
  isolation: isolate;
}

/* -------------------------
   Animated Background
------------------------- */

.kk-mv-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(200, 164, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
}

.kk-mv-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(200, 164, 74, 0.13);
  filter: blur(70px);
  z-index: -2;
  pointer-events: none;
}

.kk-mv-glow-one {
  top: -100px;
  left: -80px;
  animation: kkMvFloatOne 7s ease-in-out infinite;
}

.kk-mv-glow-two {
  right: -100px;
  bottom: -120px;
  animation: kkMvFloatTwo 8s ease-in-out infinite;
}

@keyframes kkMvFloatOne {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(35px, 25px);
  }
}

@keyframes kkMvFloatTwo {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-30px, -25px);
  }
}

/* -------------------------
   Heading
------------------------- */

.kk-mv-heading {
  max-width: 850px;
  margin: 0 auto 38px;
  text-align: center;
}

.kk-mv-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: #e85d1a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.kk-mv-label-line {
  width: 32px;
  height: 2px;
  background: #e85d1a;
  border-radius: 20px;
}

.kk-mv-heading h2 {
  margin: 0 0 12px;
  color: #171717;
  font-size: 39px;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.7px;
}

.kk-mv-heading h2 span {
  color: #e85d1a;
  font-weight: 700;
}

.kk-mv-heading p {
  max-width: 780px;
  margin: 0 auto;
  color: #626262;
  font-size: 15px;
  line-height: 1.7;
}

/* -------------------------
   Cards
------------------------- */

.kk-mv-row {
  align-items: stretch;
}

.kk-mv-card {
  position: relative;
  height: 100%;
  padding: 30px;
  border: 1px solid rgba(200, 164, 74, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 40px rgba(28, 22, 8, 0.07);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kk-mv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #e85d1a, #e85d1a, #e85d1a);
}

.kk-mv-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -75px;
  bottom: -75px;
  border-radius: 50%;
  background: rgba(200, 164, 74, 0.08);
  transition: transform 0.4s ease;
}

.kk-mv-card:hover {
  transform: translateY(-7px);
  border-color: rgba(200, 164, 74, 0.45);
  box-shadow: 0 20px 50px rgba(28, 22, 8, 0.12);
}

.kk-mv-card:hover::after {
  transform: scale(1.5);
}

/* -------------------------
   Card Top
------------------------- */

.kk-mv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
}

.kk-mv-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #e85d1a, #e85d1a);
  box-shadow: 0 8px 20px rgba(158, 120, 45, 0.22);
  font-size: 23px;
}

.kk-mv-number {
  color: #e85d1a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

/* -------------------------
   Card Content
------------------------- */

.kk-mv-small-title {
  display: block;
  margin-bottom: 5px;
  color: #e85d1a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-mv-card-content h3 {
  margin: 0 0 12px;
  color: #171717;
  font-size: 28px;
  font-weight: 700;
}

.kk-mv-card-content p {
  margin: 0 0 19px;
  color: #626262;
  font-size: 14.5px;
  line-height: 1.72;
}

/* -------------------------
   List
------------------------- */

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

.kk-mv-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: #303030;
  font-size: 14px;
  line-height: 1.45;
}

.kk-mv-list li:last-child {
  margin-bottom: 0;
}

.kk-mv-list li i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #e85d1a;
  font-size: 15px;
}

/* -------------------------
   Quote
------------------------- */

.kk-mv-quote {
  position: relative;
  max-width: 900px;
  margin: 34px auto 0;
  padding: 23px 30px 22px 70px;
  border: 1px solid rgba(200, 164, 74, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 30px rgba(28, 22, 8, 0.04);
}

.kk-mv-quote-icon {
  position: absolute;
  left: 25px;
  top: 22px;
  color: #e85d1a;
  font-size: 30px;
  line-height: 1;
}

.kk-mv-quote p {
  margin: 0 0 7px;
  color: #383838;
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
}

.kk-mv-quote span {
  color: #e85d1a;
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   KAUSHAL KUMAR - WHY WORK WITH ME
   ISOLATED CSS
   Prefix: kk-why-
========================================================= */

.kk-why-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 72px 0;
  background: linear-gradient(135deg, #ffffff 0%, #fbf8ef 52%, #ffffff 100%);
}

/* =========================================================
   BACKGROUND ANIMATION
========================================================= */

.kk-why-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.45;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(200, 164, 74, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.075) 1px, transparent 1px);

  background-size: 52px 52px;

  animation: kkWhyGridMove 18s linear infinite;
}

@keyframes kkWhyGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 52px 52px;
  }
}

.kk-why-orb {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(200, 164, 74, 0.13);
  filter: blur(75px);
  pointer-events: none;
  z-index: -2;
}

.kk-why-orb-one {
  top: -150px;
  left: -100px;
  animation: kkWhyOrbOne 8s ease-in-out infinite;
}

.kk-why-orb-two {
  right: -120px;
  bottom: -150px;
  animation: kkWhyOrbTwo 9s ease-in-out infinite;
}

@keyframes kkWhyOrbOne {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(45px, 35px);
  }
}

@keyframes kkWhyOrbTwo {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-40px, -30px);
  }
}

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

.kk-why-heading {
  max-width: 820px;
  margin: 0 auto 38px;
  text-align: center;
}

.kk-why-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;

  color: #e85d1a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.kk-why-label-line {
  width: 30px;
  height: 2px;
  border-radius: 10px;
  background: #c8a44a;
}

.kk-why-heading h2 {
  margin: 0 0 12px;
  color: #171717;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.6px;
}

.kk-why-heading h2 span {
  color: #e85d1a;
  font-weight: 700;
}

.kk-why-heading p {
  max-width: 760px;
  margin: 0 auto;

  color: #666;
  font-size: 14px;
  line-height: 1.7;
}

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

.kk-why-cards {
  align-items: stretch;
}

.kk-why-card {
  position: relative;
  height: 100%;
  min-height: 220px;

  padding: 25px 23px;

  border: 1px solid rgba(200, 164, 74, 0.22);
  border-radius: 17px;

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

  box-shadow: 0 10px 32px rgba(30, 25, 10, 0.055);

  overflow: hidden;

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

/* Top Gold Line */

.kk-why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 3px;

  background: linear-gradient(90deg, #9d792d, #e1c36d);

  transition: width 0.4s ease;
}

.kk-why-card:hover::before {
  width: 100%;
}

/* Decorative Circle */

.kk-why-card::after {
  content: "";
  position: absolute;

  width: 120px;
  height: 120px;

  right: -60px;
  bottom: -60px;

  border-radius: 50%;

  background: rgba(200, 164, 74, 0.07);

  transition: transform 0.45s ease;
}

.kk-why-card:hover::after {
  transform: scale(1.5);
}

.kk-why-card:hover {
  transform: translateY(-6px);

  border-color: rgba(200, 164, 74, 0.42);

  box-shadow: 0 18px 42px rgba(30, 25, 10, 0.1);
}

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

.kk-why-card-head {
  position: relative;
  z-index: 2;

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

  margin-bottom: 18px;
}

.kk-why-icon {
  width: 45px;
  height: 45px;

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

  border-radius: 12px;

  color: #ffffff;

  background: linear-gradient(135deg, #e85d1a, #e85d1a);

  box-shadow: 0 8px 18px rgba(160, 125, 45, 0.2);

  font-size: 19px;

  transition:
    transform 0.35s ease,
    border-radius 0.35s ease;
}

.kk-why-card:hover .kk-why-icon {
  transform: rotate(-5deg) scale(1.06);
  border-radius: 15px;
}

.kk-why-card-head > span {
  color: #c3a052;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

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

.kk-why-card h3 {
  position: relative;
  z-index: 2;

  margin: 0 0 9px;

  color: #191919;

  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.kk-why-card p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #686868;

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

/* =========================================================
   BOTTOM EXPERIENCE HIGHLIGHT
========================================================= */

.kk-why-highlight {
  display: flex;
  align-items: center;
  gap: 18px;

  max-width: 850px;

  margin: 35px auto 0;
  padding: 19px 24px;

  border: 1px solid rgba(200, 164, 74, 0.22);
  border-radius: 15px;

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

  box-shadow: 0 8px 28px rgba(30, 25, 10, 0.045);
}

.kk-why-highlight-icon {
  flex: 0 0 auto;

  width: 48px;
  height: 48px;

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

  border-radius: 13px;

  color: #ffffff;

  background: #e85d1a;

  font-size: 19px;
}

.kk-why-highlight-content {
  display: flex;
  flex-direction: column;
}

.kk-why-highlight-content span {
  margin-bottom: 2px;

  color: #e85d1a;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.kk-why-highlight-content strong {
  margin-bottom: 2px;

  color: #202020;

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

.kk-why-highlight-content p {
  margin: 0;

  color: #707070;

  font-size: 12.5px;
  line-height: 1.5;
}

/* =========================================================
   KAUSHAL KUMAR - HOW I WORK
   MAIN CSS
   ALL CLASSES ARE ISOLATED WITH kk-process-
========================================================= */

.kk-process-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 75px 0;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(200, 164, 74, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(200, 164, 74, 0.1),
      transparent 32%
    ),
    #fbfaf7;
}

/* =========================================================
   ANIMATED BACKGROUND
========================================================= */

.kk-process-bg {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
  filter: blur(65px);
}

.kk-process-bg-one {
  width: 300px;
  height: 300px;
  top: -130px;
  left: -100px;
  background: rgba(200, 164, 74, 0.15);
  animation: kkProcessFloatOne 8s ease-in-out infinite;
}

.kk-process-bg-two {
  width: 330px;
  height: 330px;
  right: -130px;
  bottom: -160px;
  background: rgba(183, 143, 48, 0.12);
  animation: kkProcessFloatTwo 10s ease-in-out infinite;
}

@keyframes kkProcessFloatOne {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(45px, 30px) scale(1.08);
  }
}

@keyframes kkProcessFloatTwo {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-40px, -35px) scale(1.1);
  }
}

/* Moving tiny grid */

.kk-process-particles {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.35;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(200, 164, 74, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.07) 1px, transparent 1px);

  background-size: 45px 45px;

  animation: kkProcessGridMove 20s linear infinite;
}

@keyframes kkProcessGridMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 45px 45px;
  }
}

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

.kk-process-heading {
  max-width: 800px;
  margin: 0 auto 50px;
  text-align: center;
}

.kk-process-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-bottom: 12px;

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

.kk-process-label span {
  width: 28px;
  height: 2px;
  border-radius: 10px;
  background: #c8a44a;
}

.kk-process-heading h2 {
  margin: 0 0 12px;

  color: #181818;
  font-size: 39px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.6px;
}

.kk-process-heading h2 strong {
  color: #e85d1a;
  font-weight: 750;
}

.kk-process-heading p {
  max-width: 720px;
  margin: 0 auto;

  color: #666;
  font-size: 14px;
  line-height: 1.75;
}

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

.kk-process-wrapper {
  position: relative;
  max-width: 930px;
  margin: 0 auto;
}

/* Connecting line */

.kk-process-wrapper::before {
  content: "";
  position: absolute;

  top: 35px;
  bottom: 35px;
  left: 29px;

  width: 2px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(#e85d1a) 8%,
    rgba(#e85d1a) 92%,
    transparent
  );
}

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

.kk-process-item {
  position: relative;

  display: flex;
  align-items: flex-start;
  gap: 22px;

  margin-bottom: 20px;
}

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

/* =========================================================
   NUMBER
========================================================= */

.kk-process-number {
  position: relative;
  z-index: 3;

  flex: 0 0 60px;

  width: 60px;
  height: 60px;

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

  border: 1px solid rgba(#e85d1a);
  border-radius: 50%;

  background: #ffffff;

  box-shadow: 0 8px 22px rgba(40, 30, 8, 0.08);

  transition: all 0.35s ease;
}

.kk-process-number span {
  color: #e85d1a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.kk-process-item:hover .kk-process-number {
  color: #fff;
  border-color: #e85d1a;
  background: #e85d1a;

  transform: scale(1.08);

  box-shadow: 0 10px 28px rgba(#e85d1a);
}

.kk-process-item:hover .kk-process-number span {
  color: #fff;
}

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

.kk-process-card {
  position: relative;
  flex: 1;

  display: flex;
  align-items: flex-start;
  gap: 19px;

  padding: 21px 24px;

  border: 1px solid rgba(200, 164, 74, 0.2);
  border-radius: 17px;

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

  box-shadow: 0 8px 30px rgba(35, 28, 10, 0.055);

  overflow: hidden;

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

/* Gold side accent */

.kk-process-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 3px;
  height: 0;

  border-radius: 0 0 8px 8px;

  background: linear-gradient(to bottom, #e85d1a, #e85d1a);

  transition: height 0.4s ease;
}

.kk-process-card:hover::before {
  height: 100%;
}

.kk-process-card:hover {
  transform: translateX(7px);

  border-color: rgba(#e85d1a);

  box-shadow: 0 15px 40px rgba(35, 28, 10, 0.1);
}

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

.kk-process-icon {
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

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

  border-radius: 13px;

  color: #fff;

  background: linear-gradient(135deg, #e85d1a, #e85d1a);

  box-shadow: 0 8px 20px rgba(159, 122, 43, 0.2);

  font-size: 19px;

  transition: all 0.35s ease;
}

.kk-process-card:hover .kk-process-icon {
  transform: rotate(-6deg) scale(1.06);
  border-radius: 15px;
}

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

.kk-process-card-content {
  flex: 1;
}

.kk-process-step {
  display: block;
  margin-bottom: 3px;

  color: #e85d1a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-process-card h3 {
  margin: 0 0 7px;

  color: #1c1c1c;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
}

.kk-process-card p {
  margin: 0;

  color: #686868;
  font-size: 13px;
  line-height: 1.65;
}

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

.kk-process-bottom {
  max-width: 700px;

  display: flex;
  align-items: center;
  gap: 15px;

  margin: 32px auto 0;
  padding: 17px 21px;

  border: 1px solid rgba(#e85d1a);
  border-radius: 14px;

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

  box-shadow: 0 8px 28px rgba(35, 28, 10, 0.045);
}

.kk-process-bottom-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

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

  border-radius: 11px;

  color: #fff;
  background: #e85d1a;

  font-size: 17px;
}

.kk-process-bottom span {
  display: block;
  margin-bottom: 2px;

  color: #e85d1a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-process-bottom strong {
  color: #222;
  font-size: 15px;
  font-weight: 700;
}

/* =========================================================
   KAUSHAL KUMAR - SERVICES
   MAIN CSS
   ISOLATED PREFIX: kk-services-
========================================================= */

.kk-services-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 75px 0;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(200, 164, 74, 0.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(200, 164, 74, 0.11),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff 0%, #faf8f1 50%, #ffffff 100%);
}

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

.kk-services-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.38;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(200, 164, 74, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.07) 1px, transparent 1px);

  background-size: 50px 50px;

  animation: kkServicesGridMove 22s linear infinite;
}

@keyframes kkServicesGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 50px 50px;
  }
}

.kk-services-orb {
  position: absolute;
  z-index: -2;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  filter: blur(75px);

  pointer-events: none;
}

.kk-services-orb-one {
  top: -140px;
  left: -100px;

  background: rgba(200, 164, 74, 0.15);

  animation: kkServicesOrbOne 8s ease-in-out infinite;
}

.kk-services-orb-two {
  right: -120px;
  bottom: -150px;

  background: rgba(177, 138, 54, 0.12);

  animation: kkServicesOrbTwo 10s ease-in-out infinite;
}

@keyframes kkServicesOrbOne {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(45px, 35px);
  }
}

@keyframes kkServicesOrbTwo {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-40px, -30px);
  }
}

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

.kk-services-heading {
  max-width: 850px;
  margin: 0 auto 42px;
  text-align: center;
}

.kk-services-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 11px;

  color: #e85d1a;

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

.kk-services-label-line {
  width: 28px;
  height: 2px;

  border-radius: 10px;

  background: #e85d1a;
}

.kk-services-heading h2 {
  margin: 0 0 12px;

  color: #181818;

  font-size: 39px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.7px;
}

.kk-services-heading h2 span {
  display: block;

  color: #e85d1a;
  font-weight: 750;
}

.kk-services-heading p {
  max-width: 750px;
  margin: 0 auto;

  color: #666;

  font-size: 14px;
  line-height: 1.75;
}

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

.kk-services-row {
  align-items: stretch;
}

.kk-services-card {
  position: relative;

  height: 100%;
  min-height: 275px;

  padding: 24px 22px;

  border: 1px solid rgba(200, 164, 74, 0.2);
  border-radius: 17px;

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

  box-shadow: 0 9px 30px rgba(35, 28, 10, 0.055);

  overflow: hidden;

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

/* Top animated line */

.kk-services-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 3px;

  background: linear-gradient(90deg, #a07b30, #e2c66e, #a07b30);

  transition: width 0.4s ease;
}

.kk-services-card:hover::before {
  width: 100%;
}

/* Decorative circle */

.kk-services-card::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: -70px;
  bottom: -70px;

  border-radius: 50%;

  background: rgba(200, 164, 74, 0.07);

  transition: transform 0.45s ease;
}

.kk-services-card:hover::after {
  transform: scale(1.5);
}

.kk-services-card:hover {
  transform: translateY(-7px);

  border-color: rgba(200, 164, 74, 0.42);

  box-shadow: 0 18px 42px rgba(35, 28, 10, 0.11);
}

/* Featured card */

.kk-services-featured {
  border-color: rgba(200, 164, 74, 0.38);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(250, 246, 232, 0.95)
  );
}

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

.kk-services-top {
  position: relative;
  z-index: 2;

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

  margin-bottom: 19px;
}

.kk-services-icon {
  width: 48px;
  height: 48px;

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

  border-radius: 13px;

  color: #fff;

  background: linear-gradient(135deg, #e85d1a, #e85d1a);

  box-shadow: 0 8px 20px rgba(157, 120, 43, 0.2);

  font-size: 20px;

  transition:
    transform 0.35s ease,
    border-radius 0.35s ease;
}

.kk-services-card:hover .kk-services-icon {
  transform: rotate(-5deg) scale(1.07);
  border-radius: 16px;
}

.kk-services-top > span {
  color: #b08b3c;

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

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

.kk-services-card h3 {
  position: relative;
  z-index: 2;

  margin: 0 0 9px;

  color: #191919;

  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

.kk-services-card p {
  position: relative;
  z-index: 2;

  margin: 0 0 18px;

  color: #696969;

  font-size: 12.8px;
  line-height: 1.65;
}

/* =========================================================
   SERVICE LINK
========================================================= */

.kk-services-link {
  position: relative;
  z-index: 3;

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

  color: #e85d1a;

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

  transition:
    gap 0.3s ease,
    color 0.3s ease;
}

.kk-services-link i {
  font-size: 12px;
}

.kk-services-link:hover {
  gap: 11px;
  color: #6e521c;
}

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

.kk-services-bottom {
  max-width: 850px;

  display: flex;
  align-items: center;
  gap: 15px;

  margin: 35px auto 0;
  padding: 17px 20px;

  border: 1px solid rgba(200, 164, 74, 0.25);
  border-radius: 15px;

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

  box-shadow: 0 8px 28px rgba(35, 28, 10, 0.045);
}

.kk-services-bottom-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

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

  border-radius: 11px;

  color: #fff;
  background: #c8a44a;

  font-size: 18px;
}

.kk-services-bottom-content {
  flex: 1;
}

.kk-services-bottom-content span {
  display: block;

  margin-bottom: 2px;

  color: #a07c31;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.kk-services-bottom-content strong {
  color: #222;

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

.kk-services-bottom-btn {
  flex: 0 0 auto;

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

  padding: 10px 16px;

  border-radius: 8px;

  color: #fff;
  background: #1c1c1c;

  font-size: 11px;
  font-weight: 700;
  text-decoration: none;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.kk-services-bottom-btn:hover {
  color: #fff;
  background: #c8a44a;
  transform: translateY(-2px);
}

/* =========================================================
   FEATURED PROJECTS SECTION
   All classes are prefixed with fp-
========================================================= */

.fp-projects-section {
  position: relative;
  padding: 75px 0 85px;
  background: #f8f8f7;
  overflow: hidden;
  isolation: isolate;
}

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

.fp-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(12, 38, 74, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 38, 74, 0.035) 1px, transparent 1px);
  background-size: 45px 45px;
  pointer-events: none;
}

.fp-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -2;
  animation: fpFloat 8s ease-in-out infinite;
}

.fp-bg-orb-1 {
  width: 260px;
  height: 260px;
  top: -100px;
  right: 8%;
  background: rgba(234, 91, 25, 0.08);
}

.fp-bg-orb-2 {
  width: 220px;
  height: 220px;
  bottom: -80px;
  left: 5%;
  background: rgba(15, 45, 84, 0.07);
  animation-delay: 2s;
}

@keyframes fpFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 25px);
  }
}

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

.fp-section-heading {
  text-align: center;
  margin-bottom: 52px;
  position: relative;
  z-index: 2;
}

.fp-heading-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 3px;
}

.fp-heading-line {
  width: 24px;
  height: 2px;
  background: #ed5a1a;
  display: inline-block;
}

.fp-heading-small {
  color: #ed5a1a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.fp-section-heading h2 {
  margin: 0;
  color: #102b50;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.2px;
}

.fp-section-heading h2 span {
  color: #ed5a1a;
}

.fp-heading-underline {
  width: 388px;
  max-width: 90%;
  height: 2px;
  margin: 5px auto 23px;
  background: #ed5a1a;
  position: relative;
}

.fp-heading-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 45px;
  height: 6px;
  border-radius: 10px;
  background: #ed5a1a;
}

.fp-section-heading p {
  margin: 0;
  color: #8a95a3;
  font-size: 16px;
  line-height: 1.7;
}

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

.fp-project-card {
  height: 100%;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(16, 43, 80, 0.06);
  box-shadow: 0 10px 35px rgba(16, 43, 80, 0.07);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.fp-project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(16, 43, 80, 0.13);
}

/* =========================================================
   PROJECT IMAGE
========================================================= */

.fp-project-image {
  height: 200px;
  position: relative;
  overflow: hidden;
  background: #eeeeee;
  cursor: zoom-in;
}

.fp-project-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.4s ease;
}

/* IMAGE ZOOM ON HOVER */

.fp-project-card:hover .fp-project-image img {
  transform: scale(1.08);
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.fp-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 25, 48, 0);
  transition: background 0.35s ease;
  pointer-events: none;
}

.fp-project-card:hover .fp-image-overlay {
  background: rgba(8, 25, 48, 0.25);
}

.fp-zoom-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #ed5a1a;
  font-size: 21px;
  opacity: 0;
  transform: scale(0.65);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
}

.fp-project-card:hover .fp-zoom-icon {
  opacity: 1;
  transform: scale(1);
}

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

.fp-project-content {
  padding: 26px 26px 27px;
}

.fp-project-category {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 30px;
  background: rgba(237, 90, 26, 0.07);
  color: #ed5a1a;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.fp-project-content h3 {
  margin: 13px 0 7px;
  color: #142d51;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.fp-project-content p {
  margin: 0;
  color: #8a95a3;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.fp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px;
  background: rgba(5, 16, 31, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.fp-lightbox-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fp-lightbox-inner {
  max-width: 1200px;
  max-height: 90vh;
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fp-lightbox-show .fp-lightbox-inner {
  transform: scale(1);
}

.fp-lightbox-inner img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.fp-lightbox-close {
  position: fixed;
  top: 22px;
  right: 28px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 35px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;

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

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.fp-lightbox-close:hover {
  background: #ed5a1a;
  transform: rotate(90deg);
}

/* Prevent page scrolling when popup is open */

body.fp-lightbox-active {
  overflow: hidden;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .fp-projects-section {
    padding: 65px 0 70px;
  }

  .fp-section-heading {
    margin-bottom: 40px;
  }

  .fp-section-heading h2 {
    font-size: 42px;
  }

  .fp-project-image {
    height: 210px;
  }
}

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

@media (max-width: 767.98px) {
  .fp-projects-section {
    padding: 55px 15px 60px;
  }

  .fp-section-heading {
    margin-bottom: 32px;
  }

  .fp-heading-top {
    margin-bottom: 5px;
  }

  .fp-heading-small {
    font-size: 10px;
    letter-spacing: 1.7px;
  }

  .fp-heading-line {
    width: 20px;
  }

  .fp-section-heading h2 {
    font-size: 34px;
    letter-spacing: -0.7px;
  }

  .fp-heading-underline {
    margin-bottom: 17px;
  }

  .fp-section-heading p {
    font-size: 14px;
    padding: 0 10px;
  }

  .fp-project-card {
    border-radius: 18px;
  }

  .fp-project-image {
    height: 210px;
  }

  .fp-project-content {
    padding: 22px 21px 24px;
  }

  .fp-project-content h3 {
    font-size: 17px;
  }

  .fp-lightbox {
    padding: 20px;
  }

  .fp-lightbox-inner img {
    max-width: 94vw;
    max-height: 80vh;
    border-radius: 5px;
  }

  .fp-lightbox-close {
    width: 42px;
    height: 42px;
    top: 15px;
    right: 15px;
    font-size: 30px;
  }
}

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

@media (max-width: 480px) {
  .fp-projects-section {
    padding: 48px 12px 55px;
  }

  .fp-section-heading h2 {
    font-size: 30px;
  }

  .fp-section-heading p {
    font-size: 13px;
  }

  .fp-project-image {
    height: 195px;
  }

  .fp-project-content {
    padding: 20px 18px 22px;
  }
}

/* =========================================================
   KAUSHAL KUMAR DIGITAL MARKETING
   PROFESSIONAL CTA SECTION
   PREFIX: kkdm-
========================================================= */

.kkdm-cta-section {
  position: relative;
  width: 100%;
  padding: 78px 20px 82px;
  background: #f9f9f7;
  overflow: hidden;
  isolation: isolate;
}

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

.kkdm-cta-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.45;

  background-image:
    linear-gradient(rgba(17, 42, 78, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 42, 78, 0.025) 1px, transparent 1px);

  background-size: 45px 45px;
}

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

.kkdm-cta-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
  filter: blur(75px);
  animation: kkdmCtaFloat 7s ease-in-out infinite;
}

.kkdm-cta-glow-one {
  width: 330px;
  height: 330px;
  top: -170px;
  right: 12%;
  background: rgba(239, 91, 25, 0.1);
}

.kkdm-cta-glow-two {
  width: 270px;
  height: 270px;
  bottom: -150px;
  left: 10%;
  background: rgba(19, 48, 88, 0.07);
  animation-delay: 2.5s;
}

@keyframes kkdmCtaFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, 22px, 0);
  }
}

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

.kkdm-cta-content {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

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

.kkdm-cta-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-bottom: 17px;

  color: #ef5b19;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.4;
}

.kkdm-cta-label span {
  width: 24px;
  height: 2px;
  background: #ef5b19;
  display: inline-block;
  border-radius: 10px;
}

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

.kkdm-cta-content h2 {
  margin: 0;

  color: #102b50;

  font-size: clamp(38px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.6px;
}

.kkdm-cta-content h2 span {
  color: #ed5a1a;
  display: inline-block;
}

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

.kkdm-cta-line {
  width: 430px;
  max-width: 85%;
  height: 3px;

  margin: 12px auto 22px;

  background: #ed5a1a;
  border-radius: 10px;

  position: relative;
}

.kkdm-cta-line::after {
  content: "";
  position: absolute;

  width: 65px;
  height: 7px;

  left: 50%;
  top: -2px;

  transform: translateX(-50%);

  background: #ed5a1a;
  border-radius: 20px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.kkdm-cta-description {
  max-width: 690px;
  margin: 0 auto;

  color: #7f8c9b;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

/* =========================================================
   BUTTONS
========================================================= */

.kkdm-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  margin-top: 34px;
}

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

.kkdm-cta-primary {
  min-height: 57px;

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

  padding: 0 27px;

  border-radius: 50px;

  background: linear-gradient(135deg, #f05b18, #e94e0d);

  color: #ffffff !important;
  text-decoration: none !important;

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

  box-shadow: 0 12px 28px rgba(237, 90, 26, 0.22);

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

.kkdm-cta-primary i {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.kkdm-cta-primary:hover {
  color: #ffffff !important;

  transform: translateY(-4px);

  box-shadow: 0 17px 35px rgba(237, 90, 26, 0.3);
}

.kkdm-cta-primary:hover i {
  transform: translateX(5px);
}

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

.kkdm-cta-secondary {
  min-height: 57px;

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

  padding: 0 28px;

  border: 2px solid #102b50;
  border-radius: 50px;

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

  color: #102b50 !important;
  text-decoration: none !important;

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

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}

.kkdm-cta-secondary i {
  color: #ef5b19;
  font-size: 15px;

  transition: color 0.3s ease;
}

.kkdm-cta-secondary:hover {
  background: #102b50;
  border-color: #102b50;

  color: #ffffff !important;

  transform: translateY(-4px);
}

.kkdm-cta-secondary:hover i {
  color: #ffffff;
}

/* =========================================================
   TRUST LINE
========================================================= */

.kkdm-cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 24px;

  color: #8a95a3;

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

.kkdm-cta-trust i {
  color: #ed5a1a;
  font-size: 14px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .kkdm-cta-section {
    padding: 68px 20px 72px;
  }

  .kkdm-cta-content h2 {
    font-size: 48px;
  }
}

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

@media (max-width: 767.98px) {
  .kkdm-cta-section {
    padding: 55px 18px 60px;
  }

  .kkdm-cta-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    gap: 7px;
    margin-bottom: 15px;
  }

  .kkdm-cta-label span {
    width: 17px;
    height: 2px;
  }

  .kkdm-cta-content h2 {
    font-size: 35px;
    line-height: 1.15;
    letter-spacing: -0.8px;
  }

  .kkdm-cta-content h2 span {
    display: block;
    margin-top: 3px;
  }

  .kkdm-cta-line {
    width: 270px;
    max-width: 82%;
    height: 2px;
    margin: 10px auto 18px;
  }

  .kkdm-cta-line::after {
    height: 5px;
    width: 42px;
    top: -1px;
  }

  .kkdm-cta-description {
    padding: 0 8px;
    font-size: 14px;
    line-height: 1.7;
  }

  .kkdm-cta-buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 28px;
  }

  .kkdm-cta-primary,
  .kkdm-cta-secondary {
    width: 100%;
    max-width: 330px;
    min-height: 54px;
    padding: 0 20px;
  }

  .kkdm-cta-trust {
    padding: 0 12px;
    margin-top: 20px;
    font-size: 12px;
  }
}

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

@media (max-width: 420px) {
  .kkdm-cta-section {
    padding: 48px 15px 52px;
  }

  .kkdm-cta-content h2 {
    font-size: 30px;
  }

  .kkdm-cta-description {
    font-size: 13px;
  }

  .kkdm-cta-primary,
  .kkdm-cta-secondary {
    max-width: 310px;
    min-height: 52px;
    font-size: 13px;
  }

  .kkdm-cta-trust {
    font-size: 11px;
  }
}

/* =========================================================
   KAUSHAL KUMAR DIGITAL MARKETING - PREMIUM FOOTER
   ALL CLASSES ARE ISOLATED WITH kkdm-footer-
========================================================= */

.kkdm-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(200, 164, 74, 0.13),
      transparent 28%
    ),
    radial-gradient(circle at 85% 75%, rgba(255, 132, 0, 0.1), transparent 30%),
    linear-gradient(135deg, #080808 0%, #11100d 48%, #080808 100%);
  color: #ffffff;
  padding: 0;
  isolation: isolate;
}

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

.kkdm-footer-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(200, 164, 74, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.1) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
  animation: kkdmFooterGridMove 18s linear infinite;
}

@keyframes kkdmFooterGridMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(55px, 55px, 0);
  }
}

/* =========================================================
   FLOATING GLOWS
========================================================= */

.kkdm-footer-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -2;
  opacity: 0.3;
}

.kkdm-footer-glow-one {
  top: -180px;
  left: -130px;
  background: rgba(200, 164, 74, 0.28);
  animation: kkdmFooterGlowOne 9s ease-in-out infinite alternate;
}

.kkdm-footer-glow-two {
  right: -150px;
  bottom: -180px;
  background: rgba(255, 119, 0, 0.22);
  animation: kkdmFooterGlowTwo 11s ease-in-out infinite alternate;
}

@keyframes kkdmFooterGlowOne {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(100px, 70px) scale(1.12);
  }

  100% {
    transform: translate(40px, 150px) scale(0.95);
  }
}

@keyframes kkdmFooterGlowTwo {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-90px, -60px) scale(1.12);
  }

  100% {
    transform: translate(-30px, -130px) scale(0.95);
  }
}

/* =========================================================
   FOOTER TOP CTA
========================================================= */

.kkdm-footer-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 75px 0 65px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.kkdm-footer-top-content {
  max-width: 720px;
}

.kkdm-footer-mini-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #c8a44a;
}

.kkdm-footer-mini-title::before {
  content: "";
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #c8a44a, #ff8500);
  border-radius: 10px;
}

.kkdm-footer-top h2 {
  margin: 0 0 15px;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.kkdm-footer-top h2 span {
  display: inline-block;
  background: linear-gradient(90deg, #c8a44a, #ff8a00, #c8a44a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kkdmFooterTextShine 5s linear infinite;
}

@keyframes kkdmFooterTextShine {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.kkdm-footer-top p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1.8;
}

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

.kkdm-footer-cta {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 180px;
  padding: 15px 23px;
  border: 1px solid rgba(200, 164, 74, 0.45);
  border-radius: 50px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    rgba(200, 164, 74, 0.16),
    rgba(255, 132, 0, 0.1)
  );
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.4s ease;
  overflow: hidden;
}

.kkdm-footer-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}

.kkdm-footer-cta:hover::before {
  left: 140%;
}

.kkdm-footer-cta:hover {
  color: #ffffff;
  border-color: #c8a44a;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(200, 164, 74, 0.18);
}

.kkdm-footer-cta i {
  transition: transform 0.35s ease;
}

.kkdm-footer-cta:hover i {
  transform: translate(4px, -4px);
}

/* =========================================================
   FOOTER MAIN
========================================================= */

.kkdm-footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr 1.25fr;
  gap: 50px;
  padding: 65px 0 55px;
}

/* =========================================================
   BRAND
========================================================= */

.kkdm-footer-brand {
  max-width: 370px;
}

.kkdm-footer-logo {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 18px;
  color: #ffffff;
  text-decoration: none;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.kkdm-footer-logo span {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #c8a44a, #ff8500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kkdm-footer-brand > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.85;
}

/* =========================================================
   SOCIAL ICONS
========================================================= */

.kkdm-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.kkdm-footer-social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.35s ease;
}

.kkdm-footer-social a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(200, 164, 74, 0.28),
    rgba(255, 132, 0, 0.2)
  );
  transform: scale(0);
  transition: transform 0.35s ease;
}

.kkdm-footer-social a:hover::before {
  transform: scale(1);
}

.kkdm-footer-social a i {
  position: relative;
  z-index: 2;
  font-size: 16px;
  transition: transform 0.35s ease;
}

.kkdm-footer-social a:hover {
  color: #ffffff;
  border-color: rgba(200, 164, 74, 0.65);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(200, 164, 74, 0.12);
}

.kkdm-footer-social a:hover i {
  transform: scale(1.15) rotate(5deg);
}

/* =========================================================
   FOOTER COLUMNS
========================================================= */

.kkdm-footer-column h3 {
  position: relative;
  margin: 0 0 23px;
  padding-bottom: 12px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.kkdm-footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(90deg, #c8a44a, #ff8500);
}

.kkdm-footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kkdm-footer-column ul li {
  margin-bottom: 12px;
}

.kkdm-footer-column ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.kkdm-footer-column ul li a i {
  color: #c8a44a;
  font-size: 11px;
  transition: transform 0.3s ease;
}

.kkdm-footer-column ul li a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

.kkdm-footer-column ul li a:hover i {
  transform: translateX(3px);
}

/* =========================================================
   CONTACT
========================================================= */

.kkdm-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 19px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: all 0.35s ease;
}

.kkdm-footer-contact-item:hover {
  border-color: rgba(200, 164, 74, 0.13);
  background: rgba(255, 255, 255, 0.035);
  transform: translateX(4px);
}

.kkdm-footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    rgba(200, 164, 74, 0.2),
    rgba(255, 132, 0, 0.12)
  );
  border: 1px solid rgba(200, 164, 74, 0.2);
}

.kkdm-footer-contact-icon i {
  color: #c8a44a;
  font-size: 14px;
}

.kkdm-footer-contact-item small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kkdm-footer-contact-item a,
.kkdm-footer-contact-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.kkdm-footer-contact-item a:hover {
  color: #c8a44a;
}

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

.kkdm-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.kkdm-footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1.6;
}

.kkdm-footer-bottom p strong {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.kkdm-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kkdm-footer-bottom-links a {
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s ease;
}

.kkdm-footer-bottom-links a:hover {
  color: #c8a44a;
}

.kkdm-footer-bottom-links span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c8a44a;
}

/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991.98px) {
  .kkdm-footer-top {
    padding: 60px 0 50px;
  }

  .kkdm-footer-main {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px 30px;
  }

  .kkdm-footer-brand {
    grid-column: span 3;
    max-width: 600px;
  }

  .kkdm-footer-contact {
    grid-column: span 1;
  }
}

/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .kkdm-footer {
    background:
      radial-gradient(
        circle at 20% 15%,
        rgba(200, 164, 74, 0.11),
        transparent 35%
      ),
      radial-gradient(
        circle at 90% 85%,
        rgba(255, 132, 0, 0.08),
        transparent 35%
      ),
      #090909;
  }

  .kkdm-footer-grid {
    background-size: 38px 38px;
    opacity: 0.12;
  }

  .kkdm-footer-glow {
    width: 250px;
    height: 250px;
    filter: blur(75px);
  }

  .kkdm-footer-top {
    display: block;
    padding: 50px 0 40px;
  }

  .kkdm-footer-top h2 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.8px;
  }

  .kkdm-footer-top p {
    font-size: 14px;
    line-height: 1.75;
  }

  .kkdm-footer-cta {
    margin-top: 25px;
    min-width: 170px;
    padding: 13px 20px;
  }

  .kkdm-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
    padding: 45px 0;
  }

  .kkdm-footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }

  .kkdm-footer-column {
    min-width: 0;
  }

  .kkdm-footer-contact {
    grid-column: span 2;
  }

  .kkdm-footer-bottom {
    display: block;
    text-align: center;
    padding: 20px 0;
  }

  .kkdm-footer-bottom-links {
    justify-content: center;
    margin-top: 10px;
  }
}

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

@media (max-width: 480px) {
  .kkdm-footer-top h2 {
    font-size: 30px;
  }

  .kkdm-footer-mini-title {
    font-size: 10px;
    letter-spacing: 1.8px;
  }

  .kkdm-footer-main {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .kkdm-footer-brand,
  .kkdm-footer-contact {
    grid-column: span 1;
  }

  .kkdm-footer-logo {
    font-size: 25px;
  }

  .kkdm-footer-social a {
    width: 40px;
    height: 40px;
  }

  .kkdm-footer-bottom p {
    font-size: 11px;
  }

  .kkdm-footer-bottom-links a {
    font-size: 11px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kkdm-footer-grid,
  .kkdm-footer-glow-one,
  .kkdm-footer-glow-two,
  .kkdm-footer-top h2 span {
    animation: none !important;
  }

  .kkdm-footer *,
  .kkdm-footer *::before,
  .kkdm-footer *::after {
    transition: none !important;
  }
}
/* =========================================================
   HERO STATS + ESTABLISHED
   ISOLATED STYLING
========================================================= */

.pks-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
}

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

.pks-hero-bottom .pks-hero-stats {
  flex: 1;
  margin-top: 0;
}

.pks-hero-bottom .pks-stat strong {
  display: block;
}

/* =========================================================
   SINCE 2012 BADGE
========================================================= */

.pks-hero-established {
  flex-shrink: 0;

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

  min-width: 145px;
  padding: 13px 16px;

  border: 1px solid rgba(16, 43, 80, 0.12);
  border-radius: 14px;

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

  box-shadow: 0 10px 28px rgba(16, 43, 80, 0.07);

  position: relative;
  overflow: hidden;

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

.pks-hero-established::before {
  content: "";

  position: absolute;
  top: 0;
  left: -100%;

  width: 100%;
  height: 2px;

  background: #ed5a1a;

  animation: pksEstablishedLine 3.5s ease-in-out infinite;
}

@keyframes pksEstablishedLine {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

.pks-hero-established:hover {
  transform: translateY(-4px);

  box-shadow: 0 15px 35px rgba(16, 43, 80, 0.11);
}

/* =========================================================
   2012 NUMBER
========================================================= */

.pks-established-year {
  color: #ed5a1a;

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

  font-weight: 800;
  letter-spacing: -1px;
}

/* =========================================================
   ESTABLISHED TEXT
========================================================= */

.pks-established-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pks-established-content span {
  color: #8b96a5;

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

  font-weight: 800;
  letter-spacing: 1.2px;
}

.pks-established-content strong {
  color: #102b50;

  font-size: 11px;
  line-height: 1.2;

  font-weight: 700;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .pks-hero-bottom {
    gap: 18px;
  }

  .pks-hero-established {
    min-width: 135px;
    padding: 12px;
  }

  .pks-established-year {
    font-size: 24px;
  }
}

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

@media (max-width: 767.98px) {
  .pks-hero-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 25px;
  }

  .pks-hero-bottom .pks-hero-stats {
    width: 100%;
  }

  .pks-hero-established {
    width: fit-content;
    min-width: 0;
    margin: 0 auto;
    padding: 11px 16px;
  }

  .pks-established-year {
    font-size: 25px;
  }
}

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

@media (max-width: 480px) {
  .pks-hero-bottom {
    gap: 15px;
  }

  .pks-hero-established {
    padding: 10px 14px;
  }

  .pks-established-year {
    font-size: 23px;
  }

  .pks-established-content span {
    font-size: 7px;
  }

  .pks-established-content strong {
    font-size: 10px;
  }
}
/* =========================================================
KAUSHAL KUMAR - ABOUT US BANNER
Isolated CSS - Existing sections par effect nahi karega
========================================================= */

.kk-about-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(200, 164, 74, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(255, 180, 50, 0.1),
      transparent 32%
    ),
    #0f0d09;
  color: #ffffff;
}

/* Animated Grid */
.kk-about-banner-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(200, 164, 74, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 74, 0.2) 1px, transparent 1px);
  background-size: 55px 55px;
  animation: kkAboutGridMove 18s linear infinite;
}

/* Glow */
.kk-about-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -2;
}

.kk-about-banner-glow-one {
  width: 260px;
  height: 260px;
  left: -90px;
  top: -100px;
  background: rgba(200, 164, 74, 0.18);
  animation: kkAboutGlowOne 7s ease-in-out infinite alternate;
}

.kk-about-banner-glow-two {
  width: 300px;
  height: 300px;
  right: -120px;
  bottom: -150px;
  background: rgba(255, 173, 51, 0.14);
  animation: kkAboutGlowTwo 8s ease-in-out infinite alternate;
}

/* Content */
.kk-about-banner-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 75px 15px 80px;
}

/* Label */
.kk-about-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  padding: 8px 16px;
  border: 1px solid rgba(200, 164, 74, 0.32);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #d9b866;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.kk-about-banner-label i {
  font-size: 15px;
}

.kk-about-banner-line {
  width: 24px;
  height: 1px;
  display: inline-block;
  background: #c8a44a;
}

/* Heading */
.kk-about-banner-title {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: #ffffff;
}

.kk-about-banner-title span {
  color: #c8a44a;
}

/* Description */
.kk-about-banner-text {
  max-width: 680px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.8;
}

/* Breadcrumb */
.kk-about-banner-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
  font-size: 14px;
}

.kk-about-banner-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.kk-about-banner-breadcrumb a:hover {
  color: #c8a44a;
}

.kk-about-banner-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.kk-about-banner-current {
  color: #c8a44a;
  font-weight: 600;
}

/* Bottom Shape */
.kk-about-banner-bottom {
  position: absolute;
  left: -5%;
  bottom: -42px;
  width: 110%;
  height: 80px;
  background: #ffffff;
  border-radius: 50% 50% 0 0;
  z-index: 2;
}

/* Animations */
@keyframes kkAboutGridMove {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(55px, 55px, 0);
  }
}

@keyframes kkAboutGlowOne {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(80px, 45px) scale(1.18);
  }
}

@keyframes kkAboutGlowTwo {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-70px, -45px) scale(1.12);
  }
}

/* =========================================================
   KAUSHAL KUMAR - WEBSITE DESIGNING BANNER
   PROFESSIONAL ANIMATED BACKGROUND
   PREFIXED CSS - NO GLOBAL EFFECT
========================================================= */

.kk-about-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 430px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(79, 70, 229, 0.38),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(6, 182, 212, 0.32),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(124, 58, 237, 0.28),
      transparent 40%
    ),
    linear-gradient(135deg, #07152f 0%, #0b1d42 45%, #111a3d 100%);
}

/* Animated Color Layer */
.kk-about-banner::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -4;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(37, 99, 235, 0.35),
      transparent 25%
    ),
    radial-gradient(
      circle at 80% 60%,
      rgba(168, 85, 247, 0.3),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 90%,
      rgba(14, 165, 233, 0.25),
      transparent 25%
    );
  filter: blur(35px);
  animation: kkBannerColorMove 12s ease-in-out infinite alternate;
}

/* Second Animated Glow */
.kk-about-banner::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -130px;
  top: -180px;
  z-index: -3;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.18);
  filter: blur(8px);
  animation: kkBannerOrbMove 8s ease-in-out infinite alternate;
}

/* Grid */
.kk-about-banner-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 45px 45px;
  animation: kkBannerGridMove 18s linear infinite;
}

/* Glow 1 */
.kk-about-banner-glow-one {
  position: absolute;
  width: 260px;
  height: 260px;
  left: -80px;
  bottom: -110px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.28);
  filter: blur(45px);
  animation: kkBannerGlowOne 7s ease-in-out infinite alternate;
}

/* Glow 2 */
.kk-about-banner-glow-two {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 8%;
  bottom: -180px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.25);
  filter: blur(50px);
  animation: kkBannerGlowTwo 9s ease-in-out infinite alternate;
}

/* Content */
.kk-about-banner .container {
  position: relative;
  z-index: 5;
}

.kk-about-banner-content {
  padding: 90px 0 105px;
  text-align: center;
}

/* Label */
.kk-about-banner-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #7dd3fc;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.kk-about-banner-line {
  width: 38px;
  height: 2px;
  display: inline-block;
  border-radius: 50px;
  background: linear-gradient(90deg, #38bdf8, #8b5cf6);
}

.kk-about-banner-label i {
  font-size: 17px;
}

/* Heading */
.kk-about-banner-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.kk-about-banner-title span {
  display: inline-block;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc, #38bdf8);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kkBannerTextGradient 5s linear infinite;
}

/* Description */
.kk-about-banner-text {
  max-width: 720px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.8;
}

/* Breadcrumb */
.kk-about-banner-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  font-size: 14px;
}

.kk-about-banner-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  text-decoration: none;
  transition: 0.3s ease;
}

.kk-about-banner-breadcrumb a:hover {
  color: #7dd3fc;
}

.kk-about-banner-arrow {
  color: rgba(255, 255, 255, 0.45);
}

.kk-about-banner-current {
  color: #7dd3fc;
  font-weight: 600;
}

/* Bottom Shape */
.kk-about-banner-bottom {
  position: absolute;
  left: -5%;
  bottom: -70px;
  width: 110%;
  height: 120px;
  z-index: 2;
  background: #ffffff;
  border-radius: 50% 50% 0 0;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes kkBannerColorMove {
  0% {
    transform: translate3d(-5%, -3%, 0) scale(1);
  }

  50% {
    transform: translate3d(5%, 4%, 0) scale(1.08);
  }

  100% {
    transform: translate3d(-2%, 7%, 0) scale(1.12);
  }
}

@keyframes kkBannerOrbMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-180px, 150px) scale(1.35);
  }
}

@keyframes kkBannerGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 45px 45px;
  }
}

@keyframes kkBannerGlowOne {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.45;
  }

  100% {
    transform: translate(120px, -80px) scale(1.25);
    opacity: 0.85;
  }
}

@keyframes kkBannerGlowTwo {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }

  100% {
    transform: translate(-100px, -70px) scale(1.3);
    opacity: 0.8;
  }
}

@keyframes kkBannerTextGradient {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 300% center;
  }
}

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

@media (max-width: 767px) {
  .kk-about-banner {
    min-height: 420px;
  }

  .kk-about-banner-content {
    padding: 75px 15px 95px;
  }

  .kk-about-banner-label {
    font-size: 11px;
    letter-spacing: 1px;
    gap: 7px;
  }

  .kk-about-banner-line {
    width: 25px;
  }

  .kk-about-banner-title {
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -0.8px;
  }

  .kk-about-banner-title span {
    display: block;
    margin-top: 4px;
  }

  .kk-about-banner-text {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.7;
    padding: 0 8px;
  }

  .kk-about-banner-breadcrumb {
    margin-top: 22px;
    gap: 9px;
    font-size: 13px;
  }

  .kk-about-banner-grid {
    background-size: 32px 32px;
  }

  .kk-about-banner-bottom {
    bottom: -55px;
    height: 95px;
  }

  .kk-about-banner-glow-one {
    width: 180px;
    height: 180px;
  }

  .kk-about-banner-glow-two {
    width: 200px;
    height: 200px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .kk-about-banner {
    min-height: 400px;
  }

  .kk-about-banner-content {
    padding: 65px 12px 90px;
  }

  .kk-about-banner-title {
    font-size: 36px;
  }

  .kk-about-banner-text {
    font-size: 13.5px;
  }
}

/* =========================================================
   WEBSITE DESIGNING SECTION - FINAL
   PREMIUM LIGHT GRAY + ORANGE + BLACK
   ========================================================= */

.kk-wd-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 105px 0 110px;

  /* Premium Warm Gray Background */
  background:
    radial-gradient(circle at 8% 15%, rgba(245, 124, 0, 0.08), transparent 30%),
    radial-gradient(
      circle at 92% 80%,
      rgba(200, 164, 74, 0.08),
      transparent 32%
    ),
    linear-gradient(135deg, #f3f4f6 0%, #e9eaec 48%, #f7f7f7 100%);

  color: #222222;
}

/* =========================================================
   SOFT BACKGROUND LIGHT
   ========================================================= */

.kk-wd-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;

  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.75),
    transparent 38%
  );

  animation: kkWdLightMove 8s ease-in-out infinite alternate;
}

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

.kk-wd-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 0.3;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);

  background-size: 50px 50px;
  animation: kkWdGrid 20s linear infinite;
}

/* =========================================================
   BACKGROUND ORBS
   ========================================================= */

.kk-wd-orb {
  position: absolute;
  z-index: -3;
  border-radius: 50%;
  filter: blur(45px);
  pointer-events: none;
}

.kk-wd-orb-one {
  width: 330px;
  height: 330px;
  top: -120px;
  left: -100px;

  background: rgba(245, 124, 0, 0.12);

  animation: kkWdOrbOne 9s ease-in-out infinite alternate;
}

.kk-wd-orb-two {
  width: 400px;
  height: 400px;
  right: -150px;
  top: 25%;

  background: rgba(200, 164, 74, 0.12);

  animation: kkWdOrbTwo 11s ease-in-out infinite alternate;
}

.kk-wd-orb-three {
  width: 240px;
  height: 240px;
  bottom: -100px;
  left: 45%;

  background: rgba(245, 124, 0, 0.07);

  animation: kkWdOrbThree 8s ease-in-out infinite alternate;
}

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

.kk-wd-heading {
  max-width: 850px;
  margin: 0 auto 65px;
  text-align: center;
}

.kk-wd-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;

  color: #e85d1a;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.kk-wd-line {
  width: 38px;
  height: 2px;
  border-radius: 50px;

  background: linear-gradient(90deg, #f57c00, #ffb300);
}

.kk-wd-label i {
  font-size: 17px;
  color: #f57c00;
}

/* Main Heading */
.kk-wd-heading h2 {
  margin: 0;

  color: #222222;

  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -1.5px;
}

/* Orange Heading Highlight */
.kk-wd-heading h2 span {
  display: block;

  background: linear-gradient(90deg, #e85d1a, #e85d1a, #e85d1a, #e85d1a);

  background-size: 300% auto;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: kkWdTextGradient 5s linear infinite;
}

/* Heading Paragraph */
.kk-wd-heading p {
  max-width: 720px;
  margin: 22px auto 0;

  color: #333333;

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

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

.kk-wd-main {
  position: relative;
}

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

.kk-wd-content {
  padding-right: 45px;
}

.kk-wd-mini-icon {
  width: 58px;
  height: 58px;

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

  margin-bottom: 22px;

  border: 1px solid rgba(245, 124, 0, 0.2);
  border-radius: 16px;

  color: #ffffff;

  background: linear-gradient(135deg, #e85d1a, #e85d1a);

  box-shadow:
    0 15px 35px rgba(245, 124, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.kk-wd-mini-icon i {
  font-size: 25px;
}

/* Content Heading */
.kk-wd-content h3 {
  margin: 0 0 20px;

  color: #222222;

  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
}

.kk-wd-content h3 span {
  display: block;
  color: #e85d1a;
}

/* Content Text */
.kk-wd-content > p {
  color: #333333;

  font-size: 15px;
  line-height: 1.85;

  margin-bottom: 15px;
}

/* =========================================================
   FEATURES
   ========================================================= */

.kk-wd-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.kk-wd-feature {
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 15px;

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

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

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

  backdrop-filter: blur(10px);

  transition: 0.35s ease;
}

.kk-wd-feature:hover {
  transform: translateY(-5px);

  border-color: rgba(245, 124, 0, 0.3);

  background: #ffffff;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09);
}

/* Feature Icon */
.kk-wd-feature-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

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

  border-radius: 12px;

  color: #ffffff;

  background: linear-gradient(135deg, #e85d1a, #e85d1a);

  box-shadow: 0 8px 20px rgba(245, 124, 0, 0.18);
}

.kk-wd-feature-icon i {
  font-size: 18px;
}

.kk-wd-feature h4 {
  margin: 0 0 3px;

  color: #222222;

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

.kk-wd-feature p {
  margin: 0;

  color: #555555;

  font-size: 12px;
}

/* =========================================================
   WEBSITE MOCKUP
   ========================================================= */

.kk-wd-visual {
  position: relative;

  min-height: 480px;

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

.kk-wd-browser {
  width: min(100%, 530px);

  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: hidden;

  background: #ffffff;

  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.15),
    0 0 45px rgba(245, 124, 0, 0.08);

  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);

  animation: kkWdBrowser 5s ease-in-out infinite;
}

/* Browser Top */
.kk-wd-browser-top {
  height: 48px;

  display: flex;
  align-items: center;
  gap: 15px;

  padding: 0 15px;

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

  background: #f5f5f5;
}

.kk-wd-dots {
  display: flex;
  gap: 5px;
}

.kk-wd-dots span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #b8b8b8;
}

.kk-wd-address {
  flex: 1;

  height: 25px;

  display: flex;
  align-items: center;

  padding: 0 12px;

  border-radius: 7px;

  color: #777777;

  background: #ffffff;

  font-size: 10px;

  border: 1px solid #e3e3e3;
}

.kk-wd-browser-top > i {
  color: #666666;
}

/* Browser Body */
.kk-wd-browser-body {
  min-height: 390px;
  padding: 22px;

  background: linear-gradient(135deg, #ffffff, #f3f4f6);
}

/* Browser Navigation */
.kk-wd-browser-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.kk-wd-logo-box {
  width: 38px;
  height: 38px;

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

  border-radius: 10px;

  color: #ffffff;

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

  background: linear-gradient(135deg, #f57c00, #ff9800);
}

.kk-wd-nav-lines {
  display: flex;
  gap: 8px;
}

.kk-wd-nav-lines span {
  width: 32px;
  height: 5px;

  border-radius: 20px;

  background: #d5d5d5;
}

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

.kk-wd-hero-design {
  min-height: 240px;

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

  gap: 20px;

  padding: 35px 10px 20px;
}

.kk-wd-design-text {
  max-width: 250px;
}

.kk-wd-design-text small {
  display: block;

  margin-bottom: 12px;

  color: #f57c00;

  font-size: 8px;
  letter-spacing: 1.3px;
}

.kk-wd-design-text strong {
  display: block;

  color: #222222;

  font-size: 29px;
  line-height: 1.12;
}

.kk-wd-design-text strong span {
  color: #f57c00;
}

.kk-wd-design-text em {
  display: block;

  width: 130px;
  height: 5px;

  margin-top: 11px;

  border-radius: 20px;

  background: #dddddd;
}

.kk-wd-design-text em + em {
  width: 90px;
  margin-top: 6px;
}

/* Button */
.kk-wd-design-button {
  width: fit-content;

  margin-top: 20px;

  padding: 8px 15px;

  border-radius: 7px;

  color: #ffffff;

  font-size: 9px;

  background: linear-gradient(90deg, #f57c00, #ff9800);

  box-shadow: 0 7px 18px rgba(245, 124, 0, 0.2);
}

/* Circle */
.kk-wd-design-circle {
  width: 145px;
  height: 145px;

  flex: 0 0 145px;

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

  border-radius: 50%;

  color: #ffffff;

  font-size: 45px;

  background: radial-gradient(
    circle at 30% 25%,
    #ffb74d,
    #f57c00 48%,
    #e65100 85%
  );

  box-shadow: 0 0 55px rgba(245, 124, 0, 0.2);

  animation: kkWdCircle 4s ease-in-out infinite alternate;
}

/* Bottom Cards */
.kk-wd-design-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kk-wd-design-cards span {
  height: 55px;

  border-radius: 9px;

  background: #eeeeee;

  border: 1px solid #e2e2e2;
}

/* =========================================================
   FLOATING BADGES
   ========================================================= */

.kk-wd-floating {
  position: absolute;
  z-index: 4;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 11px 15px;

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

  color: #222222;

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

  backdrop-filter: blur(12px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

  font-size: 11px;
  font-weight: 600;
}

.kk-wd-floating i {
  color: #f57c00;
  font-size: 15px;
}

.kk-wd-floating-one {
  top: 40px;
  left: -10px;

  animation: kkWdFloatOne 4s ease-in-out infinite;
}

.kk-wd-floating-two {
  right: -15px;
  top: 45%;

  animation: kkWdFloatTwo 5s ease-in-out infinite;
}

.kk-wd-floating-three {
  left: 10px;
  bottom: 30px;

  animation: kkWdFloatThree 4.5s ease-in-out infinite;
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */

.kk-wd-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin-top: 75px;
}

.kk-wd-service-card {
  position: relative;

  padding: 28px 23px;

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

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

  backdrop-filter: blur(12px);

  overflow: hidden;

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

  transition: 0.4s ease;
}

.kk-wd-service-card::before {
  content: "";

  position: absolute;

  width: 100px;
  height: 100px;

  top: -50px;
  right: -50px;

  border-radius: 50%;

  background: rgba(245, 124, 0, 0.1);

  filter: blur(15px);
}

.kk-wd-service-card:hover {
  transform: translateY(-9px);

  border-color: rgba(245, 124, 0, 0.25);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.11),
    0 0 25px rgba(245, 124, 0, 0.06);
}

/* Service Icon */
.kk-wd-service-icon {
  width: 52px;
  height: 52px;

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

  margin-bottom: 18px;

  border-radius: 14px;

  color: white;

  background: linear-gradient(135deg, #e85d1a, #e85d1a);

  box-shadow: 0 10px 22px rgba(245, 124, 0, 0.18);
}

.kk-wd-service-icon i {
  font-size: 22px;
}

/* Service Heading */
.kk-wd-service-card h4 {
  margin: 0 0 10px;

  color: #222222;

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

/* Service Text */
.kk-wd-service-card p {
  margin: 0;

  color: #555555;

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

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes kkWdLightMove {
  0% {
    transform: translate3d(-2%, -1%, 0);
    opacity: 0.65;
  }

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

@keyframes kkWdGrid {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 50px 50px;
  }
}

@keyframes kkWdOrbOne {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(150px, 100px) scale(1.3);
  }
}

@keyframes kkWdOrbTwo {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-120px, -100px) scale(1.25);
  }
}

@keyframes kkWdOrbThree {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(80px, -70px);
  }
}

@keyframes kkWdTextGradient {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 300% center;
  }
}

@keyframes kkWdBrowser {
  0%,
  100% {
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(0);
  }

  50% {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-9px);
  }
}

@keyframes kkWdCircle {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(1.07) rotate(8deg);
  }
}

@keyframes kkWdFloatOne {
  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes kkWdFloatTwo {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
  }
}

@keyframes kkWdFloatThree {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .kk-wd-section {
    padding: 85px 0 90px;
  }

  .kk-wd-content {
    padding-right: 0;
    margin-bottom: 50px;
  }

  .kk-wd-visual {
    min-height: 450px;
  }

  .kk-wd-service-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 45px;
  }
}

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

@media (max-width: 767px) {
  .kk-wd-section {
    width: 100%;
    max-width: 100%;

    padding: 70px 0 75px;

    overflow: hidden;

    background:
      radial-gradient(
        circle at 10% 10%,
        rgba(245, 124, 0, 0.07),
        transparent 35%
      ),
      linear-gradient(145deg, #f3f4f6, #ffffff);
  }

  .kk-wd-bg-grid {
    background-size: 38px 38px;
    opacity: 0.16;
  }

  .kk-wd-section .container {
    width: 100%;
    max-width: 100%;

    padding-left: 15px;
    padding-right: 15px;
  }

  .kk-wd-heading {
    margin-bottom: 45px;
  }

  .kk-wd-label {
    gap: 7px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .kk-wd-line {
    width: 24px;
  }

  .kk-wd-heading h2 {
    color: #222222;
    font-size: 34px;
    letter-spacing: -0.7px;
  }

  .kk-wd-heading h2 span {
    margin-top: 4px;
  }

  .kk-wd-heading p {
    margin-top: 17px;
    padding: 0 5px;

    color: #333333;

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

  .kk-wd-content {
    margin-bottom: 30px;
  }

  .kk-wd-content h3 {
    color: #222222;
    font-size: 29px;
  }

  .kk-wd-content h3 span {
    color: #f57c00;
  }

  .kk-wd-content > p {
    color: #333333;

    font-size: 14px;
    line-height: 1.75;
  }

  .kk-wd-features {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 23px;
  }

  .kk-wd-feature {
    padding: 13px;
    background: rgba(255, 255, 255, 0.9);
  }

  .kk-wd-visual {
    width: 100%;
    min-height: 400px;
    margin-top: 15px;
  }

  .kk-wd-browser {
    width: 100%;
    max-width: 100%;

    border-radius: 15px;

    transform: none;

    animation: kkWdMobileBrowser 5s ease-in-out infinite;
  }

  .kk-wd-browser-body {
    min-height: 300px;
    padding: 15px;
  }

  .kk-wd-browser-top {
    height: 42px;
    padding: 0 10px;
    gap: 8px;
  }

  .kk-wd-address {
    font-size: 8px;
  }

  .kk-wd-hero-design {
    min-height: 195px;
    padding: 20px 3px 12px;
  }

  .kk-wd-design-text {
    max-width: 170px;
  }

  .kk-wd-design-text strong {
    color: #222222;
    font-size: 22px;
  }

  .kk-wd-design-text strong span {
    color: #f57c00;
  }

  .kk-wd-design-circle {
    width: 95px;
    height: 95px;
    flex-basis: 95px;
    font-size: 30px;
  }

  .kk-wd-design-cards span {
    height: 42px;
  }

  .kk-wd-floating {
    padding: 9px 11px;
    font-size: 9px;
  }

  .kk-wd-floating-one {
    top: 10px;
    left: -3px;
  }

  .kk-wd-floating-two {
    right: -3px;
    top: 48%;
  }

  .kk-wd-floating-three {
    left: 0;
    bottom: 5px;
  }

  .kk-wd-service-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 35px;
  }

  .kk-wd-service-card {
    padding: 23px 20px;
  }
}

@keyframes kkWdMobileBrowser {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

@media (max-width: 480px) {
  .kk-wd-heading h2 {
    font-size: 30px;
  }

  .kk-wd-content h3 {
    font-size: 26px;
  }

  .kk-wd-mini-icon {
    width: 52px;
    height: 52px;
  }

  .kk-wd-browser-body {
    min-height: 285px;
  }

  .kk-wd-hero-design {
    gap: 10px;
  }

  .kk-wd-design-text {
    max-width: 155px;
  }

  .kk-wd-design-text small {
    font-size: 7px;
  }

  .kk-wd-design-text strong {
    font-size: 20px;
  }

  .kk-wd-design-circle {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    font-size: 25px;
  }

  .kk-wd-floating-two {
    right: 0;
  }
}

/* =========================================================
   EXTRA SAFETY - NO HORIZONTAL OVERFLOW
   ========================================================= */

.kk-wd-section,
.kk-wd-section * {
  box-sizing: border-box;
}

.kk-wd-section img,
.kk-wd-section svg {
  max-width: 100%;
}

/* =========================================================
   KAUSHAL KUMAR - WEB DEVELOPMENT PREMIUM SECTION
   ALL CSS IS FULLY SCOPED WITH kk-wdev-
========================================================= */

.kk-wdev-section {
  --kk-wdev-orange: #e85d1a;
  --kk-wdev-orange-light: #ff7a35;
  --kk-wdev-dark: #111214;
  --kk-wdev-dark-2: #18191c;
  --kk-wdev-text: #24262a;
  --kk-wdev-muted: #70747b;
  --kk-wdev-border: rgba(232, 93, 26, 0.14);

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 105px 0 100px;
  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(232, 93, 26, 0.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 65%,
      rgba(232, 93, 26, 0.07),
      transparent 28%
    ),
    #fafafa;
  isolation: isolate;
}

.kk-wdev-section *,
.kk-wdev-section *::before,
.kk-wdev-section *::after {
  box-sizing: border-box;
}

.kk-wdev-section img {
  max-width: 100%;
  height: auto;
}

.kk-wdev-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(232, 93, 26, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 93, 26, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 12%,
    black 82%,
    transparent
  );
}

.kk-wdev-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.16;
  z-index: -2;
}

.kk-wdev-glow-one {
  top: 100px;
  left: -220px;
  background: var(--kk-wdev-orange);
  animation: kkWdevGlowOne 8s ease-in-out infinite alternate;
}

.kk-wdev-glow-two {
  right: -230px;
  bottom: 180px;
  background: #ff9a68;
  animation: kkWdevGlowTwo 9s ease-in-out infinite alternate;
}

@keyframes kkWdevGlowOne {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(70px, 40px, 0);
  }
}

@keyframes kkWdevGlowTwo {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-60px, -50px, 0);
  }
}

/* =========================================================
   FLOATING CODE ELEMENTS
========================================================= */

.kk-wdev-floating {
  position: absolute;
  z-index: -1;
  color: rgba(232, 93, 26, 0.12);
  font-family: monospace;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
}

.kk-wdev-floating-one {
  top: 18%;
  left: 5%;
  font-size: 70px;
  animation: kkWdevFloatOne 6s ease-in-out infinite;
}

.kk-wdev-floating-two {
  top: 48%;
  right: 4%;
  font-size: 55px;
  animation: kkWdevFloatTwo 7s ease-in-out infinite;
}

.kk-wdev-floating-three {
  bottom: 9%;
  left: 8%;
  font-size: 46px;
  animation: kkWdevFloatThree 5s ease-in-out infinite;
}

@keyframes kkWdevFloatOne {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(4deg);
  }
}

@keyframes kkWdevFloatTwo {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(25px) rotate(-5deg);
  }
}

@keyframes kkWdevFloatThree {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =========================================================
   INTRO
========================================================= */

.kk-wdev-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 75px;
  margin-bottom: 125px;
}

.kk-wdev-intro-content {
  position: relative;
  z-index: 2;
}

.kk-wdev-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 9px 15px;
  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--kk-wdev-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.kk-wdev-label-line {
  width: 24px;
  height: 2px;
  border-radius: 10px;
  background: var(--kk-wdev-orange);
}

.kk-wdev-label i {
  font-size: 15px;
}

.kk-wdev-heading {
  max-width: 700px;
  margin: 0 0 22px;
  color: var(--kk-wdev-dark);
  font-size: clamp(40px, 5vw, 67px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -2.5px;
}

.kk-wdev-heading span {
  display: block;
  color: var(--kk-wdev-orange);
}

.kk-wdev-description {
  max-width: 650px;
  margin: 0 0 30px;
  color: var(--kk-wdev-muted);
  font-size: 16px;
  line-height: 1.85;
}

/* =========================================================
   BUTTONS
========================================================= */

.kk-wdev-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.kk-wdev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 53px;
  padding: 13px 22px;
  border-radius: 9px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.kk-wdev-btn i {
  font-size: 17px;
  transition: transform 0.3s ease;
}

.kk-wdev-btn:hover i {
  transform: translate(3px, -3px);
}

.kk-wdev-btn-primary {
  color: #fff !important;
  background: var(--kk-wdev-orange);
  box-shadow: 0 12px 28px rgba(232, 93, 26, 0.22);
}

.kk-wdev-btn-primary:hover {
  color: #fff !important;
  background: #d94f10;
  transform: translateY(-3px);
  box-shadow: 0 17px 35px rgba(232, 93, 26, 0.28);
}

.kk-wdev-btn-outline {
  color: var(--kk-wdev-dark) !important;
  border: 1px solid rgba(17, 18, 20, 0.12);
  background: #fff;
}

.kk-wdev-btn-outline:hover {
  color: var(--kk-wdev-orange) !important;
  border-color: rgba(232, 93, 26, 0.35);
  transform: translateY(-3px);
}

/* =========================================================
   CODE VISUAL
========================================================= */

.kk-wdev-code-wrap {
  position: relative;
  min-width: 0;
  padding: 25px;
}

.kk-wdev-code-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #111214;
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.18),
    0 0 0 8px rgba(232, 93, 26, 0.035);
  transform: perspective(1000px) rotateY(-3deg);
  transition: transform 0.5s ease;
}

.kk-wdev-code-wrap:hover .kk-wdev-code-card {
  transform: perspective(1000px) rotateY(0deg) translateY(-5px);
}

.kk-wdev-browser-top {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 52px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #191a1d;
}

.kk-wdev-browser-dots {
  display: flex;
  gap: 6px;
}

.kk-wdev-browser-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.kk-wdev-browser-dots span:first-child {
  background: var(--kk-wdev-orange);
}

.kk-wdev-browser-address {
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.45);
  font-family: monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kk-wdev-browser-address i {
  margin-right: 6px;
  color: var(--kk-wdev-orange);
}

.kk-wdev-browser-icon {
  color: rgba(255, 255, 255, 0.35);
}

.kk-wdev-code-area {
  position: relative;
  min-height: 330px;
  padding: 32px 25px;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(232, 93, 26, 0.09),
      transparent 30%
    ),
    #111214;
}

.kk-wdev-code-line {
  display: flex;
  align-items: center;
  min-height: 37px;
  color: rgba(255, 255, 255, 0.65);
  font-family: "Courier New", monospace;
  font-size: 13px;
  white-space: nowrap;
}

.kk-wdev-code-indent {
  padding-left: 25px;
}

.kk-wdev-code-number {
  width: 32px;
  margin-right: 18px;
  color: rgba(255, 255, 255, 0.18);
  user-select: none;
}

.kk-wdev-code-tag {
  color: var(--kk-wdev-orange-light);
}

.kk-wdev-code-key {
  margin-left: 7px;
  color: #fff;
}

.kk-wdev-code-string {
  color: #f0a47d;
}

.kk-wdev-code-white {
  margin: 0 5px;
  color: rgba(255, 255, 255, 0.85);
}

.kk-wdev-code-cursor {
  display: inline-block;
  width: 7px;
  height: 18px;
  margin-left: 77px;
  background: var(--kk-wdev-orange);
  vertical-align: middle;
  animation: kkWdevCursor 1s steps(2, start) infinite;
}

@keyframes kkWdevCursor {
  50% {
    opacity: 0;
  }
}

.kk-wdev-code-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

.kk-wdev-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5fd67a;
  box-shadow: 0 0 10px rgba(95, 214, 122, 0.6);
}

.kk-wdev-status-right {
  margin-left: auto;
  color: var(--kk-wdev-orange-light);
}

.kk-wdev-status-right i {
  margin-right: 4px;
}

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

.kk-wdev-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 1px solid rgba(232, 93, 26, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.kk-wdev-floating-card i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: #fff;
  background: var(--kk-wdev-orange);
  font-size: 16px;
}

.kk-wdev-floating-card strong,
.kk-wdev-floating-card small {
  display: block;
}

.kk-wdev-floating-card strong {
  color: var(--kk-wdev-dark);
  font-size: 12px;
}

.kk-wdev-floating-card small {
  margin-top: 2px;
  color: #8a8d92;
  font-size: 10px;
}

.kk-wdev-floating-card-one {
  top: 4%;
  right: -20px;
  animation: kkWdevBadgeOne 5s ease-in-out infinite;
}

.kk-wdev-floating-card-two {
  right: -15px;
  bottom: 3%;
  animation: kkWdevBadgeTwo 6s ease-in-out infinite;
}

@keyframes kkWdevBadgeOne {
  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes kkWdevBadgeTwo {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

.kk-wdev-section-heading {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}

.kk-wdev-mini-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 15px;
  color: var(--kk-wdev-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-wdev-mini-label span {
  display: block;
  width: 25px;
  height: 1px;
  background: var(--kk-wdev-orange);
}

.kk-wdev-section-heading h3 {
  margin: 0 0 14px;
  color: var(--kk-wdev-dark);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.kk-wdev-section-heading h3 span {
  color: var(--kk-wdev-orange);
}

.kk-wdev-section-heading p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--kk-wdev-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* =========================================================
   FEATURE CARDS
========================================================= */

.kk-wdev-feature-row {
  position: relative;
}

.kk-wdev-feature-card {
  position: relative;
  height: 100%;
  min-height: 285px;
  padding: 29px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(20, 20, 20, 0.045);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kk-wdev-feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--kk-wdev-orange), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.kk-wdev-feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 93, 26, 0.2);
  box-shadow: 0 25px 55px rgba(20, 20, 20, 0.09);
}

.kk-wdev-feature-card:hover::before {
  transform: scaleX(1);
}

.kk-wdev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.kk-wdev-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  color: var(--kk-wdev-orange);
  background: rgba(232, 93, 26, 0.08);
  font-size: 23px;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.kk-wdev-feature-card:hover .kk-wdev-icon {
  color: #fff;
  background: var(--kk-wdev-orange);
  transform: rotate(-5deg) scale(1.05);
}

.kk-wdev-card-number {
  color: rgba(232, 93, 26, 0.28);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.kk-wdev-feature-card h4 {
  margin: 0 0 12px;
  color: var(--kk-wdev-dark);
  font-size: 20px;
  font-weight: 750;
}

.kk-wdev-feature-card p {
  min-height: 70px;
  margin: 0 0 20px;
  color: var(--kk-wdev-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.kk-wdev-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--kk-wdev-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.kk-wdev-card-link i {
  transition: transform 0.3s ease;
}

.kk-wdev-feature-card:hover .kk-wdev-card-link i {
  transform: translate(4px, -4px);
}

/* =========================================================
   TECHNOLOGY SECTION
========================================================= */

.kk-wdev-tech-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 55px;
  margin-top: 115px;
  padding: 48px;
  border: 1px solid rgba(232, 93, 26, 0.12);
  border-radius: 20px;
  background: linear-gradient(120deg, #fff, #fffaf7);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.045);
}

.kk-wdev-tech-small {
  display: block;
  margin-bottom: 10px;
  color: var(--kk-wdev-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-wdev-tech-content h3 {
  margin: 0;
  color: var(--kk-wdev-dark);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
}

.kk-wdev-tech-content h3 span {
  color: var(--kk-wdev-orange);
}

.kk-wdev-tech-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kk-wdev-tech-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background: #fff;
  color: #3e4146;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-wdev-tech-item i {
  color: var(--kk-wdev-orange);
  font-size: 19px;
}

.kk-wdev-tech-item:hover {
  color: var(--kk-wdev-orange);
  border-color: rgba(232, 93, 26, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(232, 93, 26, 0.08);
}

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

.kk-wdev-process {
  margin-top: 125px;
}

.kk-wdev-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.kk-wdev-process-grid::before {
  content: "";
  position: absolute;
  top: 33px;
  left: 9%;
  right: 9%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 93, 26, 0.25),
    transparent
  );
  z-index: 0;
}

.kk-wdev-process-item {
  position: relative;
  z-index: 1;
  text-align: center;
}

.kk-wdev-process-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border: 5px solid #fafafa;
  border-radius: 50%;
  color: #fff;
  background: var(--kk-wdev-orange);
  box-shadow:
    0 0 0 1px rgba(232, 93, 26, 0.15),
    0 12px 25px rgba(232, 93, 26, 0.18);
  font-size: 21px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-wdev-process-item:hover .kk-wdev-process-icon {
  transform: translateY(-6px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(232, 93, 26, 0.25),
    0 18px 35px rgba(232, 93, 26, 0.25);
}

.kk-wdev-process-content span {
  display: block;
  margin-bottom: 7px;
  color: var(--kk-wdev-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.kk-wdev-process-content h4 {
  margin: 0 0 9px;
  color: var(--kk-wdev-dark);
  font-size: 16px;
  font-weight: 800;
}

.kk-wdev-process-content p {
  margin: 0;
  color: var(--kk-wdev-muted);
  font-size: 12px;
  line-height: 1.65;
}

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

.kk-wdev-cta {
  position: relative;
  overflow: hidden;
  margin-top: 120px;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 122, 53, 0.28),
      transparent 28%
    ),
    linear-gradient(125deg, #161719, #252628);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.14);
}

.kk-wdev-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
}

.kk-wdev-cta-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: var(--kk-wdev-orange);
  filter: blur(75px);
  opacity: 0.25;
}

.kk-wdev-cta-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 45px 50px;
}

.kk-wdev-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  background: rgba(232, 93, 26, 0.95);
  box-shadow: 0 12px 30px rgba(232, 93, 26, 0.25);
  font-size: 25px;
}

.kk-wdev-cta-text > span {
  display: block;
  margin-bottom: 7px;
  color: #ff9a68;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.kk-wdev-cta-text h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 800;
}

.kk-wdev-cta-text h3 strong {
  color: var(--kk-wdev-orange-light);
}

.kk-wdev-cta-text p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.7;
}

.kk-wdev-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 145px;
  min-height: 52px;
  padding: 12px 19px;
  border-radius: 9px;
  color: #fff !important;
  background: var(--kk-wdev-orange);
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(232, 93, 26, 0.25);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-wdev-cta-btn:hover {
  color: #fff !important;
  background: var(--kk-wdev-orange-light);
  transform: translateY(-3px);
  box-shadow: 0 17px 35px rgba(232, 93, 26, 0.35);
}

.kk-wdev-cta-btn i {
  transition: transform 0.3s ease;
}

.kk-wdev-cta-btn:hover i {
  transform: translate(3px, -3px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {
  .kk-wdev-section {
    padding: 90px 0 85px;
  }

  .kk-wdev-intro {
    gap: 45px;
  }

  .kk-wdev-heading {
    font-size: clamp(40px, 5vw, 57px);
  }

  .kk-wdev-floating-card-one {
    right: -8px;
  }

  .kk-wdev-floating-card-two {
    right: -8px;
  }

  .kk-wdev-process-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 45px;
  }

  .kk-wdev-process-grid::before {
    display: none;
  }
}

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

@media (max-width: 991px) {
  .kk-wdev-section {
    padding: 75px 0 70px;
  }

  .kk-wdev-intro {
    grid-template-columns: 1fr;
    gap: 65px;
    margin-bottom: 95px;
  }

  .kk-wdev-intro-content {
    text-align: center;
  }

  .kk-wdev-label {
    justify-content: center;
  }

  .kk-wdev-heading {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
  }

  .kk-wdev-description {
    margin-left: auto;
    margin-right: auto;
  }

  .kk-wdev-buttons {
    justify-content: center;
  }

  .kk-wdev-code-wrap {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
  }

  .kk-wdev-tech-section {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .kk-wdev-tech-list {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
  }

  .kk-wdev-process {
    margin-top: 95px;
  }

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

  .kk-wdev-cta {
    margin-top: 90px;
  }

  .kk-wdev-cta-content {
    grid-template-columns: auto 1fr;
  }

  .kk-wdev-cta-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

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

@media (max-width: 767px) {
  .kk-wdev-section {
    padding: 65px 0 60px;
  }

  .kk-wdev-bg-grid {
    background-size: 35px 35px;
  }

  .kk-wdev-floating-one {
    left: -10px;
    font-size: 48px;
  }

  .kk-wdev-floating-two {
    right: -5px;
    font-size: 40px;
  }

  .kk-wdev-floating-three {
    display: none;
  }

  .kk-wdev-intro {
    gap: 45px;
    margin-bottom: 80px;
  }

  .kk-wdev-label {
    max-width: 100%;
    padding: 8px 12px;
    font-size: 9px;
    letter-spacing: 1.2px;
  }

  .kk-wdev-label-line {
    width: 17px;
  }

  .kk-wdev-heading {
    font-size: clamp(35px, 10vw, 48px);
    letter-spacing: -1.5px;
  }

  .kk-wdev-description {
    font-size: 14px;
    line-height: 1.75;
  }

  .kk-wdev-buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: 330px;
    margin: 0 auto;
  }

  .kk-wdev-btn {
    width: 100%;
  }

  .kk-wdev-code-wrap {
    padding: 12px 0;
  }

  .kk-wdev-code-card {
    border-radius: 14px;
    transform: none !important;
  }

  .kk-wdev-browser-top {
    min-height: 45px;
    padding: 0 12px;
    gap: 9px;
  }

  .kk-wdev-browser-dots span {
    width: 7px;
    height: 7px;
  }

  .kk-wdev-browser-address {
    font-size: 9px;
  }

  .kk-wdev-code-area {
    min-height: 275px;
    padding: 25px 12px;
    overflow: hidden;
  }

  .kk-wdev-code-line {
    min-height: 34px;
    font-size: 9px;
  }

  .kk-wdev-code-number {
    width: 22px;
    margin-right: 8px;
  }

  .kk-wdev-code-indent {
    padding-left: 10px;
  }

  .kk-wdev-code-white {
    margin: 0 3px;
  }

  .kk-wdev-code-cursor {
    margin-left: 40px;
  }

  .kk-wdev-code-status {
    min-height: 42px;
    padding: 0 12px;
    font-size: 9px;
  }

  .kk-wdev-floating-card {
    display: none;
  }

  .kk-wdev-section-heading {
    margin-bottom: 38px;
  }

  .kk-wdev-section-heading h3 {
    font-size: 31px;
    letter-spacing: -0.8px;
  }

  .kk-wdev-section-heading p {
    font-size: 13px;
    line-height: 1.7;
  }

  .kk-wdev-feature-card {
    min-height: auto;
    padding: 25px;
  }

  .kk-wdev-feature-card p {
    min-height: auto;
  }

  .kk-wdev-tech-section {
    margin-top: 80px;
    padding: 30px 22px;
    border-radius: 16px;
  }

  .kk-wdev-tech-content h3 {
    font-size: 26px;
  }

  .kk-wdev-tech-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }

  .kk-wdev-tech-item {
    min-height: 50px;
    font-size: 11px;
  }

  .kk-wdev-process {
    margin-top: 80px;
  }

  .kk-wdev-process-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .kk-wdev-process-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 17px;
    text-align: left;
    align-items: start;
  }

  .kk-wdev-process-icon {
    width: 60px;
    height: 60px;
    margin: 0;
  }

  .kk-wdev-process-content p {
    font-size: 12px;
  }

  .kk-wdev-cta {
    margin-top: 75px;
    border-radius: 17px;
  }

  .kk-wdev-cta-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 25px;
  }

  .kk-wdev-cta-icon {
    width: 58px;
    height: 58px;
  }

  .kk-wdev-cta-text h3 {
    font-size: 27px;
  }

  .kk-wdev-cta-text p {
    font-size: 12px;
  }

  .kk-wdev-cta-btn {
    width: 100%;
  }
}

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

@media (max-width: 420px) {
  .kk-wdev-section {
    padding-left: 0;
    padding-right: 0;
  }

  .kk-wdev-heading {
    font-size: 34px;
  }

  .kk-wdev-description {
    font-size: 13px;
  }

  .kk-wdev-tech-list {
    grid-template-columns: 1fr 1fr;
  }

  .kk-wdev-tech-item {
    padding: 9px 6px;
    gap: 6px;
    font-size: 10px;
  }

  .kk-wdev-tech-item i {
    font-size: 16px;
  }

  .kk-wdev-process-item {
    grid-template-columns: 52px 1fr;
    gap: 13px;
  }

  .kk-wdev-process-icon {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }

  .kk-wdev-cta-content {
    padding: 28px 20px;
  }

  .kk-wdev-cta-text h3 {
    font-size: 24px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-wdev-section *,
  .kk-wdev-section *::before,
  .kk-wdev-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   KK DIGITAL MARKETING SECTION
   ALL CSS IS FULLY SCOPED
========================================================= */

.kk-dm-section {
  --kk-dm-orange: #e85d1a;
  --kk-dm-orange-light: #ff8a4c;
  --kk-dm-dark: #111111;
  --kk-dm-text: #222222;
  --kk-dm-muted: #727272;
  --kk-dm-border: rgba(232, 93, 26, 0.14);

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0 100px;
  background:
    radial-gradient(circle at 8% 15%, rgba(232, 93, 26, 0.09), transparent 28%),
    radial-gradient(
      circle at 92% 80%,
      rgba(232, 93, 26, 0.07),
      transparent 28%
    ),
    #faf9f7;
}

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

.kk-dm-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.5;

  background-image:
    linear-gradient(rgba(232, 93, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 93, 26, 0.045) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* =========================================================
   BACKGROUND ORBS
========================================================= */

.kk-dm-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
  filter: blur(3px);
}

.kk-dm-orb-one {
  width: 330px;
  height: 330px;
  left: -170px;
  top: 150px;
  background: rgba(232, 93, 26, 0.08);
  animation: kkDmFloatOne 8s ease-in-out infinite;
}

.kk-dm-orb-two {
  width: 240px;
  height: 240px;
  right: -100px;
  top: 80px;
  background: rgba(232, 93, 26, 0.07);
  animation: kkDmFloatTwo 10s ease-in-out infinite;
}

.kk-dm-orb-three {
  width: 180px;
  height: 180px;
  right: 18%;
  bottom: 80px;
  background: rgba(232, 93, 26, 0.05);
  animation: kkDmFloatThree 7s ease-in-out infinite;
}

@keyframes kkDmFloatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(35px, -25px, 0);
  }
}

@keyframes kkDmFloatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-25px, 30px, 0);
  }
}

@keyframes kkDmFloatThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(15px, -20px, 0) scale(1.08);
  }
}

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

.kk-dm-heading {
  max-width: 850px;
  margin: 0 auto 65px;
  text-align: center;
}

.kk-dm-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 9px 17px;

  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 50px;

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

  color: var(--kk-dm-orange);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;

  box-shadow: 0 8px 30px rgba(232, 93, 26, 0.07);

  margin-bottom: 20px;
}

.kk-dm-label-line {
  width: 25px;
  height: 1px;
  background: var(--kk-dm-orange);
}

.kk-dm-label i {
  font-size: 14px;
}

.kk-dm-heading h2 {
  margin: 0;

  color: var(--kk-dm-dark);

  font-size: clamp(34px, 4vw, 57px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.8px;
}

.kk-dm-heading h2 span {
  display: block;
  color: var(--kk-dm-orange);
}

.kk-dm-heading p {
  max-width: 720px;
  margin: 22px auto 0;

  color: var(--kk-dm-muted);

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

/* =========================================================
   MAIN AREA
========================================================= */

.kk-dm-main {
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: 65px;
  align-items: center;
}

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

.kk-dm-content-top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 25px;
}

.kk-dm-number {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 52px;
  width: 52px;
  height: 52px;

  border-radius: 15px;

  background: var(--kk-dm-orange);
  color: #fff;

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

  box-shadow: 0 12px 30px rgba(232, 93, 26, 0.2);
}

.kk-dm-content-top small {
  display: block;

  margin-bottom: 5px;

  color: var(--kk-dm-orange);

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

.kk-dm-content-top h3 {
  margin: 0;

  color: var(--kk-dm-dark);

  font-size: 29px;
  line-height: 1.2;
  font-weight: 800;
}

.kk-dm-intro {
  max-width: 650px;

  margin: 0 0 32px;

  color: var(--kk-dm-muted);

  font-size: 15px;
  line-height: 1.85;
}

/* =========================================================
   STRATEGY FLOW
========================================================= */

.kk-dm-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.kk-dm-flow-item {
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 135px;

  padding: 12px 13px;

  border: 1px solid var(--kk-dm-border);
  border-radius: 13px;

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

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

.kk-dm-flow-item:hover {
  transform: translateY(-5px);

  border-color: rgba(232, 93, 26, 0.3);

  box-shadow: 0 15px 30px rgba(25, 20, 15, 0.07);
}

.kk-dm-flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border-radius: 9px;

  background: rgba(232, 93, 26, 0.09);
  color: var(--kk-dm-orange);

  font-size: 15px;
}

.kk-dm-flow-item strong {
  display: block;

  color: var(--kk-dm-dark);

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

.kk-dm-flow-item span {
  display: block;

  margin-top: 2px;

  color: #898989;

  font-size: 10px;
}

.kk-dm-flow-arrow {
  color: rgba(232, 93, 26, 0.55);
  font-size: 15px;
}

/* =========================================================
   CHANNEL TAGS
========================================================= */

.kk-dm-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 28px;
}

.kk-dm-channels span {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 12px;

  border-radius: 50px;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);

  color: #555;

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

  transition: 0.3s ease;
}

.kk-dm-channels span:hover {
  color: var(--kk-dm-orange);
  border-color: rgba(232, 93, 26, 0.2);
  transform: translateY(-3px);
}

.kk-dm-channels i {
  color: var(--kk-dm-orange);
  font-size: 13px;
}

/* =========================================================
   DASHBOARD VISUAL
========================================================= */

.kk-dm-visual {
  position: relative;
  min-width: 0;
}

.kk-dm-dashboard {
  position: relative;

  padding: 27px;

  border: 1px solid rgba(232, 93, 26, 0.13);
  border-radius: 25px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(249, 246, 242, 0.93)
  );

  box-shadow:
    0 30px 70px rgba(33, 25, 15, 0.1),
    0 0 0 8px rgba(255, 255, 255, 0.5);

  transform: perspective(1000px) rotateY(-2deg);

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

.kk-dm-dashboard:hover {
  transform: perspective(1000px) rotateY(0deg) translateY(-5px);

  box-shadow:
    0 40px 85px rgba(33, 25, 15, 0.13),
    0 0 0 8px rgba(255, 255, 255, 0.7);
}

/* Dashboard Head */

.kk-dm-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 20px;

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

.kk-dm-dashboard-head span {
  display: block;

  color: #8a8a8a;

  font-size: 10px;
  font-weight: 600;
}

.kk-dm-dashboard-head strong {
  display: block;

  margin-top: 4px;

  color: var(--kk-dm-dark);

  font-size: 17px;
}

.kk-dm-live {
  display: flex !important;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;

  border-radius: 50px;

  background: rgba(42, 180, 104, 0.08);

  color: #299b5d !important;

  font-size: 9px !important;
  font-weight: 800 !important;
}

.kk-dm-live span {
  width: 6px;
  height: 6px;

  padding: 0 !important;

  border-radius: 50%;

  background: #35b96b;

  animation: kkDmPulse 1.8s infinite;
}

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

  50% {
    opacity: 0.45;
    transform: scale(0.75);
  }

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

/* Main Metric */

.kk-dm-main-metric {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  padding: 27px 0 22px;
}

.kk-dm-main-metric small {
  display: block;

  margin-bottom: 5px;

  color: #858585;

  font-size: 11px;
}

.kk-dm-main-metric strong {
  display: block;

  color: var(--kk-dm-dark);

  font-size: 39px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -1px;
}

.kk-dm-main-metric strong span {
  color: var(--kk-dm-orange);
  font-size: 20px;
}

.kk-dm-main-metric em {
  display: flex;
  align-items: center;
  gap: 5px;

  margin-top: 9px;

  color: #31905a;

  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.kk-dm-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;

  width: 105px;
  height: 65px;
}

.kk-dm-mini-chart span {
  flex: 1;

  min-height: 8px;

  border-radius: 5px 5px 2px 2px;

  background: linear-gradient(
    to top,
    var(--kk-dm-orange),
    var(--kk-dm-orange-light)
  );

  opacity: 0.82;

  animation: kkDmChart 2.5s ease-in-out infinite alternate;
}

.kk-dm-mini-chart span:nth-child(2) {
  animation-delay: 0.15s;
}

.kk-dm-mini-chart span:nth-child(3) {
  animation-delay: 0.3s;
}

.kk-dm-mini-chart span:nth-child(4) {
  animation-delay: 0.45s;
}

.kk-dm-mini-chart span:nth-child(5) {
  animation-delay: 0.6s;
}

.kk-dm-mini-chart span:nth-child(6) {
  animation-delay: 0.75s;
}

.kk-dm-mini-chart span:nth-child(7) {
  animation-delay: 0.9s;
}

@keyframes kkDmChart {
  from {
    transform: scaleY(0.82);
    transform-origin: bottom;
  }

  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* =========================================================
   METRICS
========================================================= */

.kk-dm-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.kk-dm-metric {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 13px;

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.kk-dm-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border-radius: 10px;

  background: rgba(232, 93, 26, 0.08);

  color: var(--kk-dm-orange);

  font-size: 14px;
}

.kk-dm-metric small {
  display: block;

  color: #8b8b8b;

  font-size: 9px;
}

.kk-dm-metric strong {
  display: block;

  margin-top: 2px;

  color: var(--kk-dm-dark);

  font-size: 15px;
}

/* =========================================================
   PROGRESS
========================================================= */

.kk-dm-progress-box {
  margin-top: 18px;
}

.kk-dm-progress-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 8px;
}

.kk-dm-progress-title span {
  color: #777;
  font-size: 10px;
  font-weight: 600;
}

.kk-dm-progress-title strong {
  color: var(--kk-dm-orange);
  font-size: 11px;
}

.kk-dm-progress {
  width: 100%;
  height: 7px;

  overflow: hidden;

  border-radius: 20px;

  background: rgba(232, 93, 26, 0.09);
}

.kk-dm-progress span {
  display: block;

  width: 78%;
  height: 100%;

  border-radius: inherit;

  background: linear-gradient(
    90deg,
    var(--kk-dm-orange),
    var(--kk-dm-orange-light)
  );

  animation: kkDmProgress 2s ease-out;
}

@keyframes kkDmProgress {
  from {
    width: 0;
  }

  to {
    width: 78%;
  }
}

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

.kk-dm-floating-card {
  position: absolute;

  right: -28px;
  bottom: 35px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 14px;

  border: 1px solid rgba(232, 93, 26, 0.12);
  border-radius: 13px;

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

  box-shadow: 0 18px 35px rgba(25, 20, 15, 0.1);

  animation: kkDmFloatingCard 4s ease-in-out infinite;
}

.kk-dm-floating-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 9px;

  background: var(--kk-dm-orange);
  color: #fff;

  font-size: 14px;
}

.kk-dm-floating-card strong {
  display: block;

  color: var(--kk-dm-dark);

  font-size: 11px;
}

.kk-dm-floating-card span {
  display: block;

  margin-top: 3px;

  color: #8b8b8b;

  font-size: 9px;
}

@keyframes kkDmFloatingCard {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

.kk-dm-highlight {
  display: flex;
  align-items: center;
  gap: 20px;

  margin-top: 75px;
  padding: 25px 28px;

  border: 1px solid rgba(232, 93, 26, 0.14);
  border-radius: 20px;

  background: linear-gradient(
    100deg,
    rgba(232, 93, 26, 0.08),
    rgba(255, 255, 255, 0.85)
  );
}

.kk-dm-highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  border-radius: 14px;

  background: var(--kk-dm-orange);
  color: #fff;

  font-size: 20px;

  box-shadow: 0 10px 25px rgba(232, 93, 26, 0.2);
}

.kk-dm-highlight-content {
  flex: 1;
}

.kk-dm-highlight-content small {
  color: var(--kk-dm-orange);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.kk-dm-highlight-content h3 {
  margin: 5px 0 0;

  color: var(--kk-dm-dark);

  font-size: 19px;
  line-height: 1.35;
  font-weight: 800;
}

.kk-dm-highlight-content h3 span {
  color: var(--kk-dm-orange);
}

.kk-dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  flex-shrink: 0;

  padding: 13px 20px;

  border-radius: 50px;

  background: var(--kk-dm-dark);
  color: #fff;

  text-decoration: none;

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

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

.kk-dm-btn:hover {
  color: #fff;
  background: var(--kk-dm-orange);

  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(232, 93, 26, 0.2);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .kk-dm-main {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .kk-dm-content {
    max-width: 850px;
    margin: 0 auto;
  }

  .kk-dm-visual {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
  }

  .kk-dm-flow {
    justify-content: center;
  }
}

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

@media (max-width: 767px) {
  .kk-dm-section {
    padding: 75px 0 70px;
  }

  .kk-dm-heading {
    margin-bottom: 45px;
  }

  .kk-dm-heading h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .kk-dm-heading p {
    font-size: 14px;
    line-height: 1.75;
    padding: 0 8px;
  }

  .kk-dm-label {
    font-size: 10px;
    padding: 8px 13px;
  }

  .kk-dm-main {
    gap: 42px;
  }

  .kk-dm-content-top h3 {
    font-size: 24px;
  }

  .kk-dm-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kk-dm-flow-arrow {
    display: none;
  }

  .kk-dm-flow-item {
    min-width: 0;
    width: 100%;
  }

  .kk-dm-channels {
    gap: 7px;
  }

  .kk-dm-dashboard {
    padding: 20px;
    border-radius: 20px;
    transform: none;
  }

  .kk-dm-dashboard:hover {
    transform: none;
  }

  .kk-dm-main-metric {
    padding: 23px 0 19px;
  }

  .kk-dm-main-metric strong {
    font-size: 34px;
  }

  .kk-dm-floating-card {
    right: 10px;
    bottom: -22px;
  }

  .kk-dm-highlight {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 65px;
    padding: 20px;
  }

  .kk-dm-highlight-content {
    min-width: calc(100% - 70px);
  }

  .kk-dm-highlight-content h3 {
    font-size: 17px;
  }

  .kk-dm-btn {
    width: 100%;
    margin-top: 4px;
  }
}

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

@media (max-width: 480px) {
  .kk-dm-section {
    padding: 65px 0 60px;
  }

  .kk-dm-heading h2 {
    font-size: 29px;
  }

  .kk-dm-heading p {
    font-size: 13px;
  }

  .kk-dm-content-top {
    gap: 12px;
  }

  .kk-dm-number {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 12px;
    font-size: 12px;
  }

  .kk-dm-content-top h3 {
    font-size: 21px;
  }

  .kk-dm-content-top small {
    font-size: 9px;
  }

  .kk-dm-intro {
    font-size: 13px;
    line-height: 1.75;
  }

  .kk-dm-flow {
    grid-template-columns: 1fr;
  }

  .kk-dm-flow-item {
    padding: 11px;
  }

  .kk-dm-dashboard {
    padding: 16px;
  }

  .kk-dm-dashboard-head strong {
    font-size: 15px;
  }

  .kk-dm-main-metric strong {
    font-size: 30px;
  }

  .kk-dm-mini-chart {
    width: 85px;
    height: 55px;
  }

  .kk-dm-metrics {
    gap: 7px;
  }

  .kk-dm-metric {
    padding: 10px;
    gap: 8px;
  }

  .kk-dm-metric-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 12px;
  }

  .kk-dm-metric strong {
    font-size: 13px;
  }

  .kk-dm-floating-card {
    position: relative;
    right: auto;
    bottom: auto;

    width: max-content;
    max-width: 100%;

    margin: 15px auto 0;

    animation: none;
  }

  .kk-dm-highlight {
    margin-top: 40px;
  }

  .kk-dm-highlight-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .kk-dm-highlight-content {
    min-width: calc(100% - 60px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-dm-orb,
  .kk-dm-floating-card,
  .kk-dm-live span,
  .kk-dm-mini-chart span,
  .kk-dm-progress span {
    animation: none !important;
  }
}

/* =========================================================
   KAUSHAL KUMAR - SEO SERVICES
   ALL CLASSES ARE PREFIXED WITH kk-seo-
========================================================= */

.kk-seo-section {
  --kk-seo-orange: #e85d1a;
  --kk-seo-orange-light: #ff8a4c;
  --kk-seo-dark: #151515;
  --kk-seo-text: #292929;
  --kk-seo-muted: #737373;
  --kk-seo-border: rgba(232, 93, 26, 0.13);

  position: relative;
  width: 100%;

  overflow: hidden;
  isolation: isolate;

  padding: 115px 0 105px;

  background:
    radial-gradient(circle at 8% 18%, rgba(232, 93, 26, 0.09), transparent 27%),
    radial-gradient(
      circle at 92% 35%,
      rgba(232, 93, 26, 0.07),
      transparent 28%
    ),
    #faf9f7;
}

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

.kk-seo-grid {
  position: absolute;
  inset: 0;

  z-index: -5;

  pointer-events: none;

  opacity: 0.48;

  background-image:
    linear-gradient(rgba(232, 93, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 93, 26, 0.045) 1px, transparent 1px);

  background-size: 58px 58px;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 12%,
    black 88%,
    transparent
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
}

/* =========================================================
   BACKGROUND ORBS
========================================================= */

.kk-seo-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  z-index: -4;

  filter: blur(3px);
}

.kk-seo-orb-one {
  width: 350px;
  height: 350px;

  left: -190px;
  top: 170px;

  background: rgba(232, 93, 26, 0.07);

  animation: kkSeoOrbOne 9s ease-in-out infinite;
}

.kk-seo-orb-two {
  width: 280px;
  height: 280px;

  right: -130px;
  top: 100px;

  background: rgba(232, 93, 26, 0.07);

  animation: kkSeoOrbTwo 11s ease-in-out infinite;
}

.kk-seo-orb-three {
  width: 190px;
  height: 190px;

  right: 25%;
  bottom: 160px;

  background: rgba(232, 93, 26, 0.045);

  animation: kkSeoOrbThree 8s ease-in-out infinite;
}

@keyframes kkSeoOrbOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(45px, -30px, 0);
  }
}

@keyframes kkSeoOrbTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-35px, 35px, 0);
  }
}

@keyframes kkSeoOrbThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(20px, -25px, 0) scale(1.08);
  }
}

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

.kk-seo-heading {
  max-width: 850px;

  margin: 0 auto 70px;

  text-align: center;
}

.kk-seo-label {
  display: inline-flex;

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

  gap: 10px;

  padding: 9px 17px;

  border: 1px solid rgba(232, 93, 26, 0.18);

  border-radius: 50px;

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

  color: var(--kk-seo-orange);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  box-shadow: 0 10px 30px rgba(232, 93, 26, 0.06);

  margin-bottom: 20px;
}

.kk-seo-label-line {
  width: 26px;
  height: 1px;

  background: var(--kk-seo-orange);
}

.kk-seo-label i {
  font-size: 14px;
}

.kk-seo-heading h2 {
  margin: 0;

  color: var(--kk-seo-dark);

  font-size: clamp(36px, 4.4vw, 59px);

  line-height: 1.08;

  font-weight: 850;

  letter-spacing: -2px;
}

.kk-seo-heading h2 span {
  display: block;

  color: var(--kk-seo-orange);
}

.kk-seo-heading > p {
  max-width: 720px;

  margin: 22px auto 0;

  color: var(--kk-seo-muted);

  font-size: 16px;

  line-height: 1.85;
}

/* =========================================================
   MAIN SECTION
========================================================= */

.kk-seo-main {
  display: grid;

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

  gap: 70px;

  align-items: center;
}

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

.kk-seo-number-title {
  display: flex;

  align-items: flex-start;

  gap: 18px;

  margin-bottom: 24px;
}

.kk-seo-number {
  display: flex;

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

  flex: 0 0 54px;

  width: 54px;
  height: 54px;

  border-radius: 15px;

  background: var(--kk-seo-orange);

  color: #fff;

  font-size: 14px;

  font-weight: 850;

  box-shadow: 0 13px 30px rgba(232, 93, 26, 0.2);
}

.kk-seo-number-title > div:last-child > span {
  display: block;

  margin-bottom: 5px;

  color: var(--kk-seo-orange);

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 1.6px;
}

.kk-seo-number-title h3 {
  max-width: 560px;

  margin: 0;

  color: var(--kk-seo-dark);

  font-size: 31px;

  line-height: 1.2;

  font-weight: 850;

  letter-spacing: -0.7px;
}

.kk-seo-main-text {
  max-width: 650px;

  margin: 0 0 34px;

  color: var(--kk-seo-muted);

  font-size: 15px;

  line-height: 1.9;
}

/* =========================================================
   SEO JOURNEY
========================================================= */

.kk-seo-journey {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}

.kk-seo-journey-item {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 15px;

  border: 1px solid var(--kk-seo-border);

  border-radius: 15px;

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

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

.kk-seo-journey-item:hover {
  transform: translateY(-5px);

  border-color: rgba(232, 93, 26, 0.28);

  box-shadow: 0 18px 35px rgba(30, 20, 10, 0.07);
}

.kk-seo-journey-icon {
  display: flex;

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

  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  border-radius: 11px;

  background: rgba(232, 93, 26, 0.09);

  color: var(--kk-seo-orange);

  font-size: 15px;
}

.kk-seo-journey-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;
}

.kk-seo-journey-top strong {
  color: var(--kk-seo-dark);

  font-size: 13px;

  font-weight: 800;
}

.kk-seo-journey-top span {
  color: rgba(232, 93, 26, 0.45);

  font-size: 10px;

  font-weight: 800;
}

.kk-seo-journey-content p {
  margin: 5px 0 0;

  color: #888;

  font-size: 10px;

  line-height: 1.55;
}

/* =========================================================
   SEARCH VISUAL
========================================================= */

.kk-seo-visual {
  position: relative;

  min-width: 0;

  padding: 20px;
}

.kk-seo-search-card {
  position: relative;

  overflow: hidden;

  padding: 20px;

  border: 1px solid rgba(232, 93, 26, 0.13);

  border-radius: 25px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 244, 240, 0.94)
  );

  box-shadow: 0 30px 70px rgba(30, 20, 10, 0.1);

  transform: perspective(1000px) rotateY(-2deg);

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

.kk-seo-search-card:hover {
  transform: perspective(1000px) rotateY(0deg) translateY(-5px);

  box-shadow: 0 40px 80px rgba(30, 20, 10, 0.13);
}

/* Browser */

.kk-seo-search-top {
  display: flex;

  align-items: center;

  gap: 13px;

  padding-bottom: 17px;

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

.kk-seo-search-dots {
  display: flex;

  gap: 5px;
}

.kk-seo-search-dots span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: rgba(232, 93, 26, 0.25);
}

.kk-seo-search-address {
  display: flex;

  align-items: center;

  gap: 6px;

  flex: 1;

  padding: 7px 11px;

  border-radius: 7px;

  background: rgba(0, 0, 0, 0.035);

  color: #888;

  font-size: 9px;
}

.kk-seo-search-address i {
  color: #45a56d;

  font-size: 9px;
}

/* Search Box */

.kk-seo-search-box {
  display: flex;

  align-items: center;

  gap: 10px;

  margin: 22px 0;

  padding: 12px 14px;

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

  border-radius: 50px;

  background: #fff;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.kk-seo-google-symbol {
  display: flex;

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

  width: 28px;
  height: 28px;

  border-radius: 50%;

  background: rgba(232, 93, 26, 0.09);

  color: var(--kk-seo-orange);

  font-size: 14px;

  font-weight: 900;
}

.kk-seo-search-query {
  flex: 1;

  color: #454545;

  font-size: 11px;
}

.kk-seo-search-box > i {
  color: var(--kk-seo-orange);

  font-size: 13px;
}

/* Search Results */

.kk-seo-result {
  padding: 15px;

  border-radius: 13px;

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

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

.kk-seo-result-url {
  margin-bottom: 6px;

  color: #4b9b68;

  font-size: 9px;
}

.kk-seo-result h4 {
  margin: 0;

  color: #222;

  font-size: 17px;

  line-height: 1.25;

  font-weight: 800;
}

.kk-seo-result h4 span {
  color: var(--kk-seo-orange);
}

.kk-seo-result p {
  margin: 7px 0 0;

  color: #888;

  font-size: 9px;

  line-height: 1.6;
}

.kk-seo-result-second {
  margin-top: 10px;

  opacity: 0.76;
}

/* Ranking Card */

.kk-seo-ranking-card {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 18px;

  padding: 12px 14px;

  border-radius: 13px;

  background: rgba(232, 93, 26, 0.065);

  border: 1px solid rgba(232, 93, 26, 0.1);
}

.kk-seo-ranking-icon {
  display: flex;

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

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border-radius: 9px;

  background: var(--kk-seo-orange);

  color: #fff;

  font-size: 13px;
}

.kk-seo-ranking-card small {
  display: block;

  color: #999;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;
}

.kk-seo-ranking-card strong {
  display: block;

  margin-top: 2px;

  color: var(--kk-seo-dark);

  font-size: 12px;
}

.kk-seo-ranking-bars {
  display: flex;

  align-items: flex-end;

  gap: 3px;

  height: 28px;

  margin-left: auto;
}

.kk-seo-ranking-bars span {
  display: block;

  width: 5px;

  border-radius: 4px 4px 2px 2px;

  background: var(--kk-seo-orange);

  animation: kkSeoBars 1.8s ease-in-out infinite alternate;
}

.kk-seo-ranking-bars span:nth-child(1) {
  height: 30%;
}

.kk-seo-ranking-bars span:nth-child(2) {
  height: 48%;
  animation-delay: 0.15s;
}

.kk-seo-ranking-bars span:nth-child(3) {
  height: 40%;
  animation-delay: 0.3s;
}

.kk-seo-ranking-bars span:nth-child(4) {
  height: 68%;
  animation-delay: 0.45s;
}

.kk-seo-ranking-bars span:nth-child(5) {
  height: 92%;
  animation-delay: 0.6s;
}

@keyframes kkSeoBars {
  from {
    opacity: 0.5;
    transform: scaleY(0.8);
    transform-origin: bottom;
  }

  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* Floating Card */

.kk-seo-floating-card {
  position: absolute;

  right: -5px;

  bottom: 5px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 14px;

  border: 1px solid rgba(232, 93, 26, 0.12);

  border-radius: 13px;

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

  box-shadow: 0 18px 38px rgba(25, 20, 15, 0.1);

  animation: kkSeoFloating 4s ease-in-out infinite;
}

.kk-seo-floating-icon {
  display: flex;

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

  width: 34px;
  height: 34px;

  border-radius: 9px;

  background: var(--kk-seo-orange);

  color: #fff;

  font-size: 14px;
}

.kk-seo-floating-card strong {
  display: block;

  color: var(--kk-seo-dark);

  font-size: 10px;
}

.kk-seo-floating-card span {
  display: block;

  margin-top: 3px;

  color: #888;

  font-size: 8px;
}

@keyframes kkSeoFloating {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =========================================================
   FOCUS SECTION
========================================================= */

.kk-seo-focus-section {
  margin-top: 110px;
}

.kk-seo-focus-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 35px;
}

.kk-seo-focus-heading > span {
  color: var(--kk-seo-orange);

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 1.5px;
}

.kk-seo-focus-heading h3 {
  max-width: 600px;

  margin: 0;

  color: var(--kk-seo-dark);

  font-size: 28px;

  line-height: 1.25;

  font-weight: 850;
}

.kk-seo-focus-heading h3 strong {
  color: var(--kk-seo-orange);
}

.kk-seo-focus-grid {
  display: grid;

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

  gap: 15px;
}

.kk-seo-focus-card {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 21px;

  min-height: 145px;

  border: 1px solid rgba(232, 93, 26, 0.1);

  border-radius: 17px;

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

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

.kk-seo-focus-card:hover {
  transform: translateY(-6px);

  border-color: rgba(232, 93, 26, 0.25);

  box-shadow: 0 20px 40px rgba(30, 20, 10, 0.07);
}

.kk-seo-focus-icon {
  display: flex;

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

  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  border-radius: 12px;

  background: rgba(232, 93, 26, 0.09);

  color: var(--kk-seo-orange);

  font-size: 16px;
}

.kk-seo-focus-card small {
  color: rgba(232, 93, 26, 0.55);

  font-size: 9px;

  font-weight: 800;
}

.kk-seo-focus-card h4 {
  margin: 2px 0 5px;

  color: var(--kk-seo-dark);

  font-size: 15px;

  font-weight: 800;
}

.kk-seo-focus-card p {
  margin: 0;

  color: #888;

  font-size: 10px;

  line-height: 1.65;
}

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

.kk-seo-process {
  position: relative;

  margin-top: 105px;

  padding: 55px 45px;

  border: 1px solid rgba(232, 93, 26, 0.11);

  border-radius: 25px;

  background: linear-gradient(
    120deg,
    rgba(232, 93, 26, 0.055),
    rgba(255, 255, 255, 0.72)
  );
}

.kk-seo-process-heading {
  text-align: center;

  margin-bottom: 55px;
}

.kk-seo-process-heading .kk-seo-label {
  margin-bottom: 15px;
}

.kk-seo-process-heading h3 {
  margin: 0;

  color: var(--kk-seo-dark);

  font-size: 31px;

  font-weight: 850;
}

.kk-seo-process-heading h3 span {
  color: var(--kk-seo-orange);
}

.kk-seo-process-grid {
  position: relative;

  display: grid;

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

  gap: 25px;
}

.kk-seo-process-line {
  position: absolute;

  left: 12%;

  right: 12%;

  top: 141px;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 93, 26, 0.25),
    transparent
  );
}

.kk-seo-process-item {
  position: relative;

  z-index: 2;

  text-align: center;
}

.kk-seo-process-number {
  display: flex;

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

  width: 52px;
  height: 52px;

  margin: 0 auto 17px;

  border-radius: 50%;

  background: var(--kk-seo-orange);

  color: #fff;

  font-size: 11px;

  font-weight: 850;

  box-shadow: 0 10px 25px rgba(232, 93, 26, 0.2);
}

.kk-seo-process-icon {
  display: block;

  margin-bottom: 9px;

  color: var(--kk-seo-orange);

  font-size: 21px;
}

.kk-seo-process-item h4 {
  margin: 0 0 7px;

  color: var(--kk-seo-dark);

  font-size: 16px;

  font-weight: 800;
}

.kk-seo-process-item p {
  max-width: 190px;

  margin: auto;

  color: #888;

  font-size: 10px;

  line-height: 1.7;
}

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

.kk-seo-cta {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 70px;

  padding: 27px 30px;

  border: 1px solid rgba(232, 93, 26, 0.13);

  border-radius: 20px;

  background: linear-gradient(
    100deg,
    rgba(232, 93, 26, 0.08),
    rgba(255, 255, 255, 0.9)
  );
}

.kk-seo-cta-icon {
  display: flex;

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

  width: 49px;
  height: 49px;

  flex: 0 0 49px;

  border-radius: 14px;

  background: var(--kk-seo-orange);

  color: #fff;

  font-size: 19px;

  box-shadow: 0 11px 25px rgba(232, 93, 26, 0.2);
}

.kk-seo-cta-content {
  flex: 1;
}

.kk-seo-cta-content small {
  display: block;

  color: var(--kk-seo-orange);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: 1.4px;
}

.kk-seo-cta-content h3 {
  margin: 5px 0 0;

  color: var(--kk-seo-dark);

  font-size: 20px;

  font-weight: 850;
}

.kk-seo-cta-content h3 span {
  color: var(--kk-seo-orange);
}

.kk-seo-cta-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  flex-shrink: 0;

  padding: 13px 20px;

  border-radius: 50px;

  background: var(--kk-seo-dark);

  color: #fff;

  text-decoration: none;

  font-size: 11px;

  font-weight: 750;

  transition: 0.3s ease;
}

.kk-seo-cta-btn:hover {
  color: #fff;

  background: var(--kk-seo-orange);

  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(232, 93, 26, 0.2);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .kk-seo-main {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .kk-seo-main-content {
    max-width: 850px;

    margin: auto;
  }

  .kk-seo-visual {
    width: 100%;

    max-width: 680px;

    margin: auto;
  }

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

  .kk-seo-process-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 40px;
  }

  .kk-seo-process-line {
    display: none;
  }
}

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

@media (max-width: 767px) {
  .kk-seo-section {
    padding: 75px 0 70px;
  }

  .kk-seo-heading {
    margin-bottom: 48px;
  }

  .kk-seo-heading h2 {
    font-size: 35px;

    letter-spacing: -1.2px;
  }

  .kk-seo-heading > p {
    padding: 0 8px;

    font-size: 14px;

    line-height: 1.75;
  }

  .kk-seo-main {
    gap: 42px;
  }

  .kk-seo-number-title {
    gap: 13px;
  }

  .kk-seo-number {
    width: 45px;
    height: 45px;

    flex-basis: 45px;

    border-radius: 12px;
  }

  .kk-seo-number-title h3 {
    font-size: 24px;
  }

  .kk-seo-main-text {
    font-size: 13px;

    line-height: 1.8;
  }

  .kk-seo-journey {
    grid-template-columns: 1fr;
  }

  .kk-seo-search-card {
    transform: none;

    padding: 17px;

    border-radius: 20px;
  }

  .kk-seo-search-card:hover {
    transform: none;
  }

  .kk-seo-floating-card {
    right: 5px;

    bottom: -18px;
  }

  .kk-seo-focus-section {
    margin-top: 80px;
  }

  .kk-seo-focus-heading {
    display: block;

    margin-bottom: 25px;
  }

  .kk-seo-focus-heading h3 {
    margin-top: 8px;

    font-size: 25px;
  }

  .kk-seo-focus-grid {
    grid-template-columns: 1fr;
  }

  .kk-seo-focus-card {
    min-height: auto;
  }

  .kk-seo-process {
    margin-top: 75px;

    padding: 40px 20px;

    border-radius: 20px;
  }

  .kk-seo-process-heading {
    margin-bottom: 40px;
  }

  .kk-seo-process-heading h3 {
    font-size: 25px;
  }

  .kk-seo-process-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .kk-seo-cta {
    align-items: flex-start;

    flex-wrap: wrap;

    margin-top: 55px;

    padding: 20px;
  }

  .kk-seo-cta-content {
    min-width: calc(100% - 70px);
  }

  .kk-seo-cta-content h3 {
    font-size: 18px;
  }

  .kk-seo-cta-btn {
    width: 100%;
  }
}

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

@media (max-width: 480px) {
  .kk-seo-section {
    padding: 62px 0 58px;
  }

  .kk-seo-heading h2 {
    font-size: 29px;
  }

  .kk-seo-heading > p {
    font-size: 13px;
  }

  .kk-seo-label {
    padding: 8px 12px;

    font-size: 9px;

    letter-spacing: 1px;
  }

  .kk-seo-number-title h3 {
    font-size: 21px;
  }

  .kk-seo-number-title > div:last-child > span {
    font-size: 8px;
  }

  .kk-seo-main-text {
    font-size: 12.5px;
  }

  .kk-seo-search-box {
    margin: 17px 0;

    padding: 10px 11px;
  }

  .kk-seo-search-query {
    font-size: 10px;
  }

  .kk-seo-result {
    padding: 12px;
  }

  .kk-seo-result h4 {
    font-size: 15px;
  }

  .kk-seo-ranking-card {
    padding: 10px;
  }

  .kk-seo-floating-card {
    position: relative;

    right: auto;
    bottom: auto;

    width: max-content;

    max-width: 100%;

    margin: 15px auto 0;

    animation: none;
  }

  .kk-seo-focus-heading h3 {
    font-size: 22px;
  }

  .kk-seo-focus-card {
    padding: 17px;
  }

  .kk-seo-process-heading h3 {
    font-size: 22px;
  }

  .kk-seo-cta-icon {
    width: 43px;
    height: 43px;

    flex-basis: 43px;
  }

  .kk-seo-cta-content {
    min-width: calc(100% - 60px);
  }

  .kk-seo-cta-content h3 {
    font-size: 17px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-seo-orb,
  .kk-seo-floating-card,
  .kk-seo-ranking-bars span {
    animation: none !important;
  }
}

/* =====================================================
       MAIN SECTION
    ===================================================== */

.kk-local-seo-section {
  --kk-local-orange: #e85d1a;
  --kk-local-orange-light: #ff8a4c;
  --kk-local-dark: #101722;
  --kk-local-dark-two: #151d2b;
  --kk-local-text: #17202b;
  --kk-local-muted: #687383;
  --kk-local-border: rgba(232, 93, 26, 0.14);

  position: relative;
  width: 100%;
  padding: 115px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 15%, rgba(232, 93, 26, 0.08), transparent 28%),
    radial-gradient(
      circle at 90% 70%,
      rgba(232, 93, 26, 0.06),
      transparent 30%
    ),
    #ffffff;
  isolation: isolate;
}

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

.kk-local-seo-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.45;

  background-image:
    linear-gradient(rgba(232, 93, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 93, 26, 0.045) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}

/* =====================================================
       FLOATING ORBS
    ===================================================== */

.kk-local-seo-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  z-index: -2;
}

.kk-local-seo-orb-one {
  width: 240px;
  height: 240px;
  left: -120px;
  top: 430px;
  background: rgba(232, 93, 26, 0.07);
  animation: kkLocalSeoFloatOne 8s ease-in-out infinite;
}

.kk-local-seo-orb-two {
  width: 300px;
  height: 300px;
  right: -150px;
  top: 100px;
  background: rgba(232, 93, 26, 0.055);
  animation: kkLocalSeoFloatTwo 10s ease-in-out infinite;
}

@keyframes kkLocalSeoFloatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(30px, -35px, 0);
  }
}

@keyframes kkLocalSeoFloatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-30px, 30px, 0);
  }
}

/* =====================================================
       INTRO
    ===================================================== */

.kk-local-seo-intro {
  max-width: 850px;
  margin: 0 auto 75px;
  text-align: center;
}

.kk-local-seo-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 9px 17px;
  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 50px;
  background: rgba(232, 93, 26, 0.055);
  color: var(--kk-local-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.kk-local-seo-label i {
  font-size: 14px;
}

.kk-local-seo-label-line {
  width: 25px;
  height: 1px;
  background: var(--kk-local-orange);
}

.kk-local-seo-title {
  margin: 0;
  color: var(--kk-local-dark);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -2px;
}

.kk-local-seo-title span {
  display: inline-block;
  color: var(--kk-local-orange);
}

.kk-local-seo-intro-text {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--kk-local-muted);
  font-size: 16px;
  line-height: 1.85;
}

/* =====================================================
       MAIN FEATURE
    ===================================================== */

.kk-local-seo-main {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 75px;
  margin-bottom: 125px;
}

/* LEFT */

.kk-local-seo-content {
  position: relative;
}

.kk-local-seo-mini-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: var(--kk-local-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-local-seo-content h3 {
  margin: 0 0 22px;
  color: var(--kk-local-dark);
  font-size: clamp(32px, 4vw, 49px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.kk-local-seo-content h3 strong {
  display: block;
  color: var(--kk-local-orange);
  font-weight: 800;
}

.kk-local-seo-content > p {
  margin: 0 0 16px;
  color: var(--kk-local-muted);
  font-size: 15px;
  line-height: 1.85;
}

/* Highlights */

.kk-local-seo-highlights {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.kk-local-seo-highlight {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(232, 93, 26, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 30px rgba(16, 23, 34, 0.045);
  transition: 0.35s ease;
}

.kk-local-seo-highlight:hover {
  transform: translateX(7px);
  border-color: rgba(232, 93, 26, 0.28);
  box-shadow: 0 14px 35px rgba(232, 93, 26, 0.08);
}

.kk-local-seo-highlight-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--kk-local-orange);
  color: #ffffff;
  font-size: 16px;
}

.kk-local-seo-highlight div {
  min-width: 0;
}

.kk-local-seo-highlight strong {
  display: block;
  color: var(--kk-local-text);
  font-size: 14px;
  font-weight: 800;
}

.kk-local-seo-highlight small {
  display: block;
  margin-top: 3px;
  color: #7b8490;
  font-size: 12px;
  line-height: 1.5;
}

/* =====================================================
       MAP VISUAL
    ===================================================== */

.kk-local-seo-visual {
  position: relative;
  min-width: 0;
}

.kk-local-seo-map-card {
  position: relative;
  min-height: 525px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(232, 93, 26, 0.14);
  border-radius: 28px;
  background: linear-gradient(145deg, #131c28, #0d141e);
  box-shadow: 0 35px 90px rgba(15, 23, 35, 0.18);
}

/* Map */

.kk-local-seo-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.95;
  background:
    radial-gradient(
      circle at 55% 40%,
      rgba(232, 93, 26, 0.13),
      transparent 25%
    ),
    #111a25;
}

.kk-local-seo-map::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(
      25deg,
      transparent 47%,
      rgba(255, 255, 255, 0.035) 48%,
      rgba(255, 255, 255, 0.035) 49%,
      transparent 50%
    ),
    linear-gradient(
      115deg,
      transparent 47%,
      rgba(255, 255, 255, 0.03) 48%,
      rgba(255, 255, 255, 0.03) 49%,
      transparent 50%
    );
  background-size: 90px 90px;
  transform: rotate(-8deg);
}

/* Roads */

.kk-local-seo-road {
  position: absolute;
  display: block;
  height: 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.055);
  transform-origin: left center;
}

.kk-local-seo-road.road-one {
  width: 480px;
  top: 110px;
  left: -80px;
  transform: rotate(25deg);
}

.kk-local-seo-road.road-two {
  width: 520px;
  top: 310px;
  left: 90px;
  transform: rotate(-18deg);
}

.kk-local-seo-road.road-three {
  width: 440px;
  top: 410px;
  left: -30px;
  transform: rotate(32deg);
}

/* Small location dots */

.kk-local-seo-location-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.035);
}

.kk-local-seo-location-dot.dot-one {
  left: 23%;
  top: 25%;
}

.kk-local-seo-location-dot.dot-two {
  right: 21%;
  top: 28%;
}

.kk-local-seo-location-dot.dot-three {
  right: 29%;
  bottom: 23%;
}

/* Main Pin */

.kk-local-seo-main-pin {
  position: absolute;
  left: 51%;
  top: 47%;
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--kk-local-orange);
  color: #ffffff;
  font-size: 25px;
  box-shadow:
    0 0 0 12px rgba(232, 93, 26, 0.1),
    0 0 0 25px rgba(232, 93, 26, 0.045),
    0 15px 45px rgba(232, 93, 26, 0.3);
  z-index: 3;
}

.kk-local-seo-pin-pulse {
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(232, 93, 26, 0.6);
  border-radius: 50%;
  animation: kkLocalSeoPulse 2.4s ease-out infinite;
}

@keyframes kkLocalSeoPulse {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }

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

/* Search */

.kk-local-seo-search {
  position: absolute;
  z-index: 5;
  top: 28px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(13, 20, 30, 0.88);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.kk-local-seo-search i:first-child {
  color: var(--kk-local-orange);
}

.kk-local-seo-search span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Result */

.kk-local-seo-result {
  position: absolute;
  z-index: 6;
  left: 28px;
  right: 28px;
  bottom: 28px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
  background: rgba(13, 20, 30, 0.91);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.kk-local-seo-result-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kk-local-seo-result-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(232, 93, 26, 0.14);
  color: var(--kk-local-orange-light);
  font-size: 20px;
}

.kk-local-seo-result-top strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.kk-local-seo-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  color: #ffb347;
  font-size: 10px;
}

.kk-local-seo-stars span {
  margin-right: 4px;
  color: #ffffff;
  font-size: 11px;
}

.kk-local-seo-result-badge {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(232, 93, 26, 0.12);
  color: var(--kk-local-orange-light);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.kk-local-seo-result-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 17px 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

.kk-local-seo-result-info span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kk-local-seo-result-info i {
  color: var(--kk-local-orange-light);
}

.kk-local-seo-result-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.kk-local-seo-result-buttons button {
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  cursor: default;
}

.kk-local-seo-result-buttons i {
  margin-right: 3px;
  color: var(--kk-local-orange-light);
}

/* =====================================================
       SECTION HEADINGS
    ===================================================== */

.kk-local-seo-section-heading {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}

.kk-local-seo-small-label {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--kk-local-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.kk-local-seo-section-heading h3 {
  margin: 0;
  color: var(--kk-local-dark);
  font-size: clamp(30px, 4vw, 47px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1px;
}

.kk-local-seo-section-heading h3 span {
  color: var(--kk-local-orange);
}

.kk-local-seo-section-heading p {
  max-width: 650px;
  margin: 18px auto 0;
  color: var(--kk-local-muted);
  font-size: 15px;
  line-height: 1.8;
}

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

.kk-local-seo-journey {
  margin-bottom: 125px;
}

.kk-local-seo-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.kk-local-seo-journey-card {
  position: relative;
  min-height: 255px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(20, 28, 40, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 45px rgba(15, 23, 35, 0.055);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kk-local-seo-journey-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -45px;
  bottom: -45px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.055);
  transition: 0.4s ease;
}

.kk-local-seo-journey-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 93, 26, 0.2);
  box-shadow: 0 25px 60px rgba(232, 93, 26, 0.09);
}

.kk-local-seo-journey-card:hover::after {
  transform: scale(1.5);
}

.kk-local-seo-number {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(232, 93, 26, 0.18);
  font-size: 25px;
  font-weight: 900;
}

.kk-local-seo-journey-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 15px;
  background: rgba(232, 93, 26, 0.1);
  color: var(--kk-local-orange);
  font-size: 21px;
  transition: 0.35s ease;
}

.kk-local-seo-journey-card:hover .kk-local-seo-journey-icon {
  background: var(--kk-local-orange);
  color: #ffffff;
  transform: rotate(-5deg);
}

.kk-local-seo-journey-card h4 {
  margin: 0 0 10px;
  color: var(--kk-local-dark);
  font-size: 18px;
  font-weight: 800;
}

.kk-local-seo-journey-card p {
  margin: 0;
  color: var(--kk-local-muted);
  font-size: 13px;
  line-height: 1.75;
}

.kk-local-seo-arrow {
  position: absolute;
  right: 25px;
  bottom: 22px;
  color: rgba(232, 93, 26, 0.45);
  font-size: 17px;
}

/* =====================================================
       SIGNALS
    ===================================================== */

.kk-local-seo-signals {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: center;
  margin-bottom: 125px;
  padding: 65px;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(232, 93, 26, 0.12),
      transparent 28%
    ),
    #121b27;
  box-shadow: 0 30px 80px rgba(15, 23, 35, 0.14);
}

.kk-local-seo-signals-text .kk-local-seo-small-label {
  margin-bottom: 15px;
}

.kk-local-seo-signals-text h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 45px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -1px;
}

.kk-local-seo-signals-text h3 span {
  color: var(--kk-local-orange-light);
}

.kk-local-seo-signals-text p {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.8;
}

/* Signal List */

.kk-local-seo-signal-list {
  display: grid;
  gap: 10px;
}

.kk-local-seo-signal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  transition: 0.3s ease;
}

.kk-local-seo-signal:hover {
  border-color: rgba(232, 93, 26, 0.35);
  background: rgba(232, 93, 26, 0.06);
  transform: translateX(6px);
}

.kk-local-seo-signal-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(232, 93, 26, 0.12);
  color: var(--kk-local-orange-light);
  font-size: 18px;
}

.kk-local-seo-signal div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.kk-local-seo-signal strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.kk-local-seo-signal span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.kk-local-seo-signal b {
  color: rgba(255, 255, 255, 0.18);
  font-size: 13px;
}

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

.kk-local-seo-process {
  margin-bottom: 110px;
}

.kk-local-seo-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.kk-local-seo-process-line {
  position: absolute;
  width: 65%;
  height: 1px;
  margin: 0 auto;
  left: 17.5%;
  background: rgba(232, 93, 26, 0.2);
  transform: translateY(97px);
}

.kk-local-seo-process-item {
  position: relative;
  z-index: 2;
  text-align: center;
}

.kk-local-seo-process-icon {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid rgba(232, 93, 26, 0.22);
  border-radius: 50%;
  background: #ffffff;
  color: var(--kk-local-orange);
  font-size: 23px;
  box-shadow: 0 10px 30px rgba(232, 93, 26, 0.08);
}

.kk-local-seo-process-icon span {
  position: absolute;
  right: -4px;
  top: -5px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kk-local-orange);
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
}

.kk-local-seo-process-item h4 {
  margin: 0 0 9px;
  color: var(--kk-local-dark);
  font-size: 17px;
  font-weight: 800;
}

.kk-local-seo-process-item p {
  max-width: 220px;
  margin: auto;
  color: var(--kk-local-muted);
  font-size: 12px;
  line-height: 1.7;
}

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

.kk-local-seo-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 38px 42px;
  overflow: hidden;
  border-radius: 23px;
  background: var(--kk-local-orange);
  box-shadow: 0 25px 70px rgba(232, 93, 26, 0.2);
}

.kk-local-seo-cta-glow {
  position: absolute;
  width: 350px;
  height: 350px;
  right: -130px;
  top: -170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.kk-local-seo-cta-icon {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 25px;
}

.kk-local-seo-cta-content {
  flex: 1;
  min-width: 0;
}

.kk-local-seo-cta-content > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-local-seo-cta-content h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 800;
}

.kk-local-seo-cta-content h3 strong {
  color: #ffffff;
}

.kk-local-seo-cta-content p {
  max-width: 600px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1.6;
}

.kk-local-seo-cta-button {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: var(--kk-local-orange);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s ease;
}

.kk-local-seo-cta-button:hover {
  transform: translateY(-3px);
  background: #101722;
  color: #ffffff;
}

/* =====================================================
       LARGE TABLET
    ===================================================== */

@media (max-width: 1100px) {
  .kk-local-seo-section {
    padding: 90px 0 80px;
  }

  .kk-local-seo-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .kk-local-seo-signals {
    gap: 45px;
    padding: 45px;
  }

  .kk-local-seo-journey-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kk-local-seo-process-grid {
    gap: 15px;
  }

  .kk-local-seo-cta {
    padding: 30px;
  }
}

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

@media (max-width: 767px) {
  .kk-local-seo-section {
    padding: 70px 0 65px;
  }

  .kk-local-seo-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .kk-local-seo-intro {
    margin-bottom: 55px;
  }

  .kk-local-seo-title {
    font-size: 37px;
    letter-spacing: -1px;
  }

  .kk-local-seo-intro-text {
    font-size: 14px;
    line-height: 1.75;
  }

  /* Main */

  .kk-local-seo-main {
    grid-template-columns: 1fr;
    gap: 45px;
    margin-bottom: 85px;
  }

  .kk-local-seo-content h3 {
    font-size: 33px;
  }

  /* Map */

  .kk-local-seo-map-card {
    min-height: 450px;
    border-radius: 22px;
    padding: 15px;
  }

  .kk-local-seo-search {
    left: 17px;
    right: 17px;
    top: 18px;
  }

  .kk-local-seo-result {
    left: 17px;
    right: 17px;
    bottom: 17px;
    padding: 16px;
  }

  /* Journey */

  .kk-local-seo-journey {
    margin-bottom: 85px;
  }

  .kk-local-seo-section-heading {
    margin-bottom: 38px;
  }

  .kk-local-seo-section-heading h3 {
    font-size: 32px;
  }

  .kk-local-seo-section-heading p {
    font-size: 13px;
  }

  .kk-local-seo-journey-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .kk-local-seo-journey-card {
    min-height: auto;
    padding: 24px;
  }

  /* Signals */

  .kk-local-seo-signals {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 85px;
    padding: 30px 20px;
    border-radius: 22px;
  }

  .kk-local-seo-signals-text h3 {
    font-size: 31px;
  }

  /* Process */

  .kk-local-seo-process {
    margin-bottom: 80px;
  }

  .kk-local-seo-process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px 18px;
  }

  .kk-local-seo-process-line {
    display: none;
  }

  .kk-local-seo-process-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 17px;
  }

  /* CTA */

  .kk-local-seo-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
    border-radius: 20px;
  }

  .kk-local-seo-cta-content h3 {
    font-size: 26px;
  }

  .kk-local-seo-cta-content p {
    font-size: 12px;
  }

  .kk-local-seo-cta-button {
    width: 100%;
    justify-content: center;
  }
}

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

@media (max-width: 480px) {
  .kk-local-seo-section {
    padding: 55px 0;
  }

  .kk-local-seo-section .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .kk-local-seo-label {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 8px 12px;
  }

  .kk-local-seo-title {
    font-size: 32px;
  }

  .kk-local-seo-content h3 {
    font-size: 29px;
  }

  .kk-local-seo-highlight {
    align-items: flex-start;
    padding: 13px;
  }

  .kk-local-seo-map-card {
    min-height: 410px;
    border-radius: 18px;
  }

  .kk-local-seo-result-buttons {
    gap: 5px;
  }

  .kk-local-seo-result-buttons button {
    padding: 8px 4px;
    font-size: 9px;
  }

  .kk-local-seo-result-buttons i {
    display: block;
    margin: 0 0 3px;
  }

  .kk-local-seo-journey-card {
    padding: 21px;
  }

  .kk-local-seo-signals {
    padding: 25px 16px;
  }

  .kk-local-seo-signals-text h3 {
    font-size: 28px;
  }

  .kk-local-seo-process-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kk-local-seo-process-item p {
    max-width: 270px;
  }

  .kk-local-seo-cta {
    padding: 24px 18px;
  }

  .kk-local-seo-cta-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .kk-local-seo-cta-content h3 {
    font-size: 24px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-local-seo-orb-one,
  .kk-local-seo-orb-two,
  .kk-local-seo-pin-pulse {
    animation: none;
  }

  .kk-local-seo-highlight,
  .kk-local-seo-journey-card,
  .kk-local-seo-signal,
  .kk-local-seo-journey-icon,
  .kk-local-seo-cta-button {
    transition: none;
  }
}

/* =====================================================
       ROOT SECTION
    ===================================================== */

.kk-gbp-section {
  --kk-gbp-orange: #e85d1a;
  --kk-gbp-orange-light: #ff8a4c;
  --kk-gbp-dark: #111923;
  --kk-gbp-dark-two: #182230;
  --kk-gbp-text: #1b2530;
  --kk-gbp-muted: #697482;
  --kk-gbp-border: rgba(232, 93, 26, 0.14);

  position: relative;
  width: 100%;
  padding: 115px 0 105px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 7% 12%,
      rgba(232, 93, 26, 0.075),
      transparent 27%
    ),
    radial-gradient(
      circle at 93% 62%,
      rgba(232, 93, 26, 0.055),
      transparent 28%
    ),
    #ffffff;
}

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

.kk-gbp-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  opacity: 0.38;

  background-image:
    linear-gradient(rgba(232, 93, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 93, 26, 0.045) 1px, transparent 1px);

  background-size: 58px 58px;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.kk-gbp-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -4;
  filter: blur(5px);
}

.kk-gbp-glow-one {
  width: 300px;
  height: 300px;
  top: 420px;
  left: -170px;
  background: rgba(232, 93, 26, 0.06);
  animation: kkGbpGlowOne 9s ease-in-out infinite;
}

.kk-gbp-glow-two {
  width: 340px;
  height: 340px;
  top: 80px;
  right: -180px;
  background: rgba(232, 93, 26, 0.055);
  animation: kkGbpGlowTwo 11s ease-in-out infinite;
}

@keyframes kkGbpGlowOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(35px, -30px, 0);
  }
}

@keyframes kkGbpGlowTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-35px, 35px, 0);
  }
}

/* =====================================================
       INTRO
    ===================================================== */

.kk-gbp-intro {
  max-width: 850px;
  margin: 0 auto 75px;
  text-align: center;
}

.kk-gbp-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 9px 17px;
  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 50px;
  background: rgba(232, 93, 26, 0.055);
  color: var(--kk-gbp-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.kk-gbp-label-line {
  width: 24px;
  height: 1px;
  background: var(--kk-gbp-orange);
}

.kk-gbp-label i {
  font-size: 14px;
}

.kk-gbp-main-title {
  margin: 0;
  color: var(--kk-gbp-dark);
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -2px;
}

.kk-gbp-main-title span {
  color: var(--kk-gbp-orange);
}

.kk-gbp-intro-text {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--kk-gbp-muted);
  font-size: 15px;
  line-height: 1.85;
}

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

.kk-gbp-hero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 75px;
  margin-bottom: 125px;
}

.kk-gbp-overline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: var(--kk-gbp-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.kk-gbp-hero-content h3 {
  margin: 0 0 22px;
  color: var(--kk-gbp-dark);
  font-size: clamp(32px, 4vw, 49px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.kk-gbp-hero-content h3 strong {
  display: block;
  color: var(--kk-gbp-orange);
}

.kk-gbp-hero-content > p {
  margin: 0 0 15px;
  color: var(--kk-gbp-muted);
  font-size: 14px;
  line-height: 1.85;
}

/* Hero points */

.kk-gbp-hero-points {
  display: grid;
  gap: 11px;
  margin-top: 27px;
}

.kk-gbp-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(232, 93, 26, 0.1);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 35, 0.04);
  transition: 0.3s ease;
}

.kk-gbp-point:hover {
  transform: translateX(6px);
  border-color: rgba(232, 93, 26, 0.24);
  box-shadow: 0 15px 35px rgba(232, 93, 26, 0.07);
}

.kk-gbp-point > span {
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--kk-gbp-orange);
  color: #ffffff;
  font-size: 15px;
}

.kk-gbp-point strong {
  display: block;
  color: var(--kk-gbp-text);
  font-size: 13px;
  font-weight: 800;
}

.kk-gbp-point small {
  display: block;
  margin-top: 2px;
  color: #7a8490;
  font-size: 11px;
  line-height: 1.45;
}

/* =====================================================
       PROFILE VISUAL
    ===================================================== */

.kk-gbp-visual {
  position: relative;
  min-width: 0;
  min-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-gbp-visual::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.055);
  filter: blur(3px);
}

.kk-gbp-profile-card {
  position: relative;
  z-index: 2;
  width: min(100%, 490px);
  padding: 25px;
  border: 1px solid rgba(232, 93, 26, 0.14);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(17, 25, 35, 0.14);
}

/* Profile top */

.kk-gbp-profile-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.kk-gbp-profile-logo {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--kk-gbp-orange);
  color: #ffffff;
  font-size: 24px;
  box-shadow: 0 10px 25px rgba(232, 93, 26, 0.18);
}

.kk-gbp-profile-name {
  flex: 1;
  min-width: 0;
}

.kk-gbp-profile-name strong {
  display: block;
  color: var(--kk-gbp-dark);
  font-size: 15px;
  font-weight: 800;
}

.kk-gbp-verified {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--kk-gbp-orange);
  font-size: 10px;
  font-weight: 700;
}

.kk-gbp-menu {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #f7f7f7;
  color: #77818c;
  cursor: default;
}

/* Rating */

.kk-gbp-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 23px 0 13px;
}

.kk-gbp-rating-row > strong {
  color: var(--kk-gbp-dark);
  font-size: 19px;
}

.kk-gbp-stars {
  display: flex;
  gap: 2px;
  color: #f6a623;
  font-size: 11px;
}

.kk-gbp-rating-row > span {
  color: #7c8590;
  font-size: 10px;
}

/* Category */

.kk-gbp-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 30px;
  background: rgba(232, 93, 26, 0.07);
  color: var(--kk-gbp-orange);
  font-size: 10px;
  font-weight: 700;
}

/* Info */

.kk-gbp-profile-info {
  display: grid;
  gap: 12px;
  margin: 23px 0;
  padding: 18px 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.kk-gbp-profile-info div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #67717c;
  font-size: 11px;
}

.kk-gbp-profile-info i {
  width: 24px;
  color: var(--kk-gbp-orange);
  font-size: 13px;
  text-align: center;
}

/* Actions */

.kk-gbp-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.kk-gbp-actions div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1px solid rgba(232, 93, 26, 0.12);
  border-radius: 9px;
  background: #ffffff;
  color: var(--kk-gbp-orange);
  font-size: 10px;
  font-weight: 700;
}

/* Status */

.kk-gbp-profile-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  padding: 12px;
  border-radius: 11px;
  background: #f7f8f9;
}

.kk-gbp-status-icon {
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(232, 93, 26, 0.1);
  color: var(--kk-gbp-orange);
}

.kk-gbp-profile-status div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.kk-gbp-profile-status strong {
  display: block;
  color: var(--kk-gbp-text);
  font-size: 11px;
}

.kk-gbp-profile-status span {
  display: block;
  margin-top: 2px;
  color: #8a929b;
  font-size: 9px;
}

.kk-gbp-profile-status b {
  color: #3e9c62;
  font-size: 9px;
}

/* Floating Cards */

.kk-gbp-floating-review,
.kk-gbp-floating-visibility {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 93, 26, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 45px rgba(15, 23, 35, 0.11);
  backdrop-filter: blur(10px);
}

.kk-gbp-floating-review {
  top: 95px;
  right: -10px;
  animation: kkGbpFloat 4.5s ease-in-out infinite;
}

.kk-gbp-floating-visibility {
  bottom: 95px;
  left: -15px;
  animation: kkGbpFloat 5s ease-in-out infinite reverse;
}

@keyframes kkGbpFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

.kk-gbp-review-icon,
.kk-gbp-floating-visibility > i {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(232, 93, 26, 0.1);
  color: var(--kk-gbp-orange);
  font-size: 14px;
}

.kk-gbp-floating-review strong,
.kk-gbp-floating-visibility strong {
  display: block;
  color: var(--kk-gbp-text);
  font-size: 10px;
}

.kk-gbp-floating-review span,
.kk-gbp-floating-visibility span {
  display: block;
  margin-top: 2px;
  color: #8a929b;
  font-size: 8px;
}

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

.kk-gbp-heading {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.kk-gbp-small-label {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--kk-gbp-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.kk-gbp-heading h3 {
  margin: 0;
  color: var(--kk-gbp-dark);
  font-size: clamp(30px, 4vw, 47px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1px;
}

.kk-gbp-heading h3 span {
  color: var(--kk-gbp-orange);
}

.kk-gbp-heading p {
  max-width: 650px;
  margin: 17px auto 0;
  color: var(--kk-gbp-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* =====================================================
       SERVICES
    ===================================================== */

.kk-gbp-services {
  margin-bottom: 125px;
}

.kk-gbp-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.kk-gbp-service-card {
  position: relative;
  min-height: 275px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(20, 28, 40, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(15, 23, 35, 0.045);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kk-gbp-service-card::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -65px;
  bottom: -65px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.055);
  transition: 0.4s ease;
}

.kk-gbp-service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 93, 26, 0.2);
  box-shadow: 0 25px 60px rgba(232, 93, 26, 0.08);
}

.kk-gbp-service-card:hover::before {
  transform: scale(1.5);
}

.kk-gbp-card-number {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(232, 93, 26, 0.17);
  font-size: 25px;
  font-weight: 900;
}

.kk-gbp-service-icon {
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  margin-bottom: 21px;
  border-radius: 15px;
  background: rgba(232, 93, 26, 0.09);
  color: var(--kk-gbp-orange);
  font-size: 21px;
  transition: 0.35s ease;
}

.kk-gbp-service-card:hover .kk-gbp-service-icon {
  background: var(--kk-gbp-orange);
  color: #ffffff;
  transform: rotate(-5deg);
}

.kk-gbp-service-card h4 {
  margin: 0 0 10px;
  color: var(--kk-gbp-dark);
  font-size: 17px;
  font-weight: 800;
}

.kk-gbp-service-card > p {
  margin: 0;
  color: var(--kk-gbp-muted);
  font-size: 12px;
  line-height: 1.75;
}

.kk-gbp-card-bottom {
  position: absolute;
  left: 27px;
  right: 27px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--kk-gbp-orange);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.kk-gbp-card-bottom i {
  font-size: 15px;
}

/* =====================================================
       ECOSYSTEM
    ===================================================== */

.kk-gbp-ecosystem {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
  margin-bottom: 125px;
  padding: 70px;
  overflow: hidden;
  border-radius: 28px;
  background: #121b26;
  box-shadow: 0 30px 80px rgba(15, 23, 35, 0.13);
}

.kk-gbp-ecosystem-content h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 45px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -1px;
}

.kk-gbp-ecosystem-content h3 span {
  color: var(--kk-gbp-orange-light);
}

.kk-gbp-ecosystem-content > p {
  margin: 18px 0 25px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.8;
}

.kk-gbp-ecosystem-list {
  display: grid;
  gap: 11px;
}

.kk-gbp-ecosystem-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kk-gbp-ecosystem-list > div > span {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(232, 93, 26, 0.12);
  color: var(--kk-gbp-orange-light);
}

.kk-gbp-ecosystem-list p {
  margin: 0;
}

.kk-gbp-ecosystem-list strong {
  display: block;
  color: #ffffff;
  font-size: 11px;
}

.kk-gbp-ecosystem-list small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
}

/* Ecosystem visual */

.kk-gbp-ecosystem-visual {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-gbp-ecosystem-circle {
  position: absolute;
  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 50%;
}

.kk-gbp-ecosystem-circle.circle-one {
  width: 150px;
  height: 150px;
}

.kk-gbp-ecosystem-circle.circle-two {
  width: 270px;
  height: 270px;
}

.kk-gbp-ecosystem-circle.circle-three {
  width: 385px;
  height: 385px;
  border-color: rgba(255, 255, 255, 0.055);
}

.kk-gbp-center-icon {
  position: relative;
  z-index: 5;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--kk-gbp-orange);
  color: #ffffff;
  font-size: 34px;
  box-shadow: 0 0 0 15px rgba(232, 93, 26, 0.09);
}

.kk-gbp-eco-node {
  position: absolute;
  z-index: 6;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(232, 93, 26, 0.22);
  border-radius: 15px;
  background: #182331;
  color: var(--kk-gbp-orange-light);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.kk-gbp-eco-node i {
  font-size: 17px;
}

.kk-gbp-eco-node span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 8px;
  font-weight: 700;
}

.kk-gbp-eco-node.eco-search {
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.kk-gbp-eco-node.eco-map {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.kk-gbp-eco-node.eco-review {
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.kk-gbp-eco-node.eco-call {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

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

.kk-gbp-process {
  margin-bottom: 110px;
}

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

.kk-gbp-process-item {
  text-align: center;
}

.kk-gbp-process-icon {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border: 1px solid rgba(232, 93, 26, 0.2);
  border-radius: 50%;
  background: #ffffff;
  color: var(--kk-gbp-orange);
  font-size: 22px;
  box-shadow: 0 10px 30px rgba(232, 93, 26, 0.07);
}

.kk-gbp-process-icon span {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kk-gbp-orange);
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
}

.kk-gbp-process-item h4 {
  margin: 0 0 8px;
  color: var(--kk-gbp-dark);
  font-size: 17px;
  font-weight: 800;
}

.kk-gbp-process-item p {
  max-width: 220px;
  margin: auto;
  color: var(--kk-gbp-muted);
  font-size: 12px;
  line-height: 1.7;
}

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

.kk-gbp-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 38px 42px;
  overflow: hidden;
  border-radius: 23px;
  background: var(--kk-gbp-orange);
  box-shadow: 0 25px 70px rgba(232, 93, 26, 0.19);
}

.kk-gbp-cta-pattern {
  position: absolute;
  width: 360px;
  height: 360px;
  top: -190px;
  right: -110px;
  border: 60px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.kk-gbp-cta-icon {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  font-size: 27px;
}

.kk-gbp-cta-content {
  flex: 1;
  min-width: 0;
}

.kk-gbp-cta-content > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-gbp-cta-content h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 800;
}

.kk-gbp-cta-content h3 strong {
  color: #ffffff;
}

.kk-gbp-cta-content p {
  max-width: 620px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1.65;
}

.kk-gbp-cta-btn {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--kk-gbp-orange);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: 0.3s ease;
}

.kk-gbp-cta-btn:hover {
  transform: translateY(-3px);
  background: #111923;
  color: #ffffff;
}

/* =====================================================
       TABLET
    ===================================================== */

@media (max-width: 1100px) {
  .kk-gbp-section {
    padding: 90px 0 80px;
  }

  .kk-gbp-hero {
    gap: 45px;
  }

  .kk-gbp-ecosystem {
    gap: 40px;
    padding: 48px;
  }

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

  .kk-gbp-process-grid {
    gap: 15px;
  }
}

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

@media (max-width: 767px) {
  .kk-gbp-section {
    padding: 70px 0 65px;
  }

  .kk-gbp-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Intro */

  .kk-gbp-intro {
    margin-bottom: 55px;
  }

  .kk-gbp-main-title {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .kk-gbp-intro-text {
    font-size: 13px;
    line-height: 1.75;
  }

  /* Hero */

  .kk-gbp-hero {
    grid-template-columns: 1fr;
    gap: 45px;
    margin-bottom: 90px;
  }

  .kk-gbp-hero-content h3 {
    font-size: 32px;
  }

  .kk-gbp-hero-content > p {
    font-size: 13px;
  }

  /* Visual */

  .kk-gbp-visual {
    min-height: 500px;
  }

  .kk-gbp-profile-card {
    width: 100%;
    padding: 20px;
  }

  .kk-gbp-floating-review {
    top: 65px;
    right: -2px;
  }

  .kk-gbp-floating-visibility {
    bottom: 65px;
    left: -2px;
  }

  /* Heading */

  .kk-gbp-heading {
    margin-bottom: 38px;
  }

  .kk-gbp-heading h3 {
    font-size: 31px;
  }

  .kk-gbp-heading p {
    font-size: 13px;
  }

  /* Services */

  .kk-gbp-services {
    margin-bottom: 90px;
  }

  .kk-gbp-service-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .kk-gbp-service-card {
    min-height: 250px;
  }

  /* Ecosystem */

  .kk-gbp-ecosystem {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 90px;
    padding: 32px 22px;
    border-radius: 22px;
  }

  .kk-gbp-ecosystem-content h3 {
    font-size: 31px;
  }

  .kk-gbp-ecosystem-content > p {
    font-size: 13px;
  }

  .kk-gbp-ecosystem-visual {
    min-height: 350px;
  }

  .kk-gbp-ecosystem-circle.circle-three {
    width: 330px;
    height: 330px;
  }

  /* Process */

  .kk-gbp-process {
    margin-bottom: 80px;
  }

  .kk-gbp-process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px 15px;
  }

  .kk-gbp-process-icon {
    width: 67px;
    height: 67px;
  }

  /* CTA */

  .kk-gbp-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
    border-radius: 20px;
  }

  .kk-gbp-cta-content h3 {
    font-size: 25px;
  }

  .kk-gbp-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

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

@media (max-width: 480px) {
  .kk-gbp-section {
    padding: 55px 0;
  }

  .kk-gbp-section .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .kk-gbp-label {
    padding: 8px 12px;
    font-size: 8px;
    letter-spacing: 1px;
  }

  .kk-gbp-main-title {
    font-size: 31px;
  }

  .kk-gbp-hero-content h3 {
    font-size: 28px;
  }

  .kk-gbp-point {
    align-items: flex-start;
  }

  .kk-gbp-visual {
    min-height: 440px;
  }

  .kk-gbp-profile-card {
    padding: 17px;
    border-radius: 18px;
  }

  .kk-gbp-profile-logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 20px;
  }

  .kk-gbp-profile-name strong {
    font-size: 12px;
  }

  .kk-gbp-actions div {
    font-size: 9px;
  }

  .kk-gbp-floating-review,
  .kk-gbp-floating-visibility {
    padding: 9px 10px;
  }

  .kk-gbp-floating-review {
    right: -5px;
  }

  .kk-gbp-floating-visibility {
    left: -5px;
  }

  .kk-gbp-heading h3 {
    font-size: 28px;
  }

  .kk-gbp-service-card {
    padding: 23px;
  }

  .kk-gbp-ecosystem {
    padding: 26px 17px;
  }

  .kk-gbp-ecosystem-content h3 {
    font-size: 27px;
  }

  .kk-gbp-ecosystem-visual {
    min-height: 310px;
  }

  .kk-gbp-ecosystem-circle.circle-one {
    width: 125px;
    height: 125px;
  }

  .kk-gbp-ecosystem-circle.circle-two {
    width: 220px;
    height: 220px;
  }

  .kk-gbp-ecosystem-circle.circle-three {
    width: 295px;
    height: 295px;
  }

  .kk-gbp-center-icon {
    width: 67px;
    height: 67px;
    font-size: 27px;
  }

  .kk-gbp-eco-node {
    width: 55px;
    height: 55px;
  }

  .kk-gbp-process-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kk-gbp-process-item p {
    max-width: 270px;
  }

  .kk-gbp-cta {
    padding: 24px 18px;
  }

  .kk-gbp-cta-icon {
    width: 53px;
    height: 53px;
    flex-basis: 53px;
  }

  .kk-gbp-cta-content h3 {
    font-size: 23px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-gbp-glow-one,
  .kk-gbp-glow-two,
  .kk-gbp-floating-review,
  .kk-gbp-floating-visibility {
    animation: none;
  }

  .kk-gbp-point,
  .kk-gbp-service-card,
  .kk-gbp-service-icon,
  .kk-gbp-cta-btn {
    transition: none;
  }
}

/* =========================================================
   GMB OPTIMIZATION
   ALL CSS IS ISOLATED WITH kk-gmb-
========================================================= */

.kk-gmb-section,
.kk-gmb-section * {
  box-sizing: border-box;
}

.kk-gmb-section {
  --kk-gmb-orange: #e85d1a;
  --kk-gmb-orange-dark: #c9470c;
  --kk-gmb-navy: #081a31;
  --kk-gmb-navy-2: #0d2745;
  --kk-gmb-text: #172334;
  --kk-gmb-muted: #687386;
  --kk-gmb-border: rgba(18, 42, 70, 0.1);

  position: relative;
  width: 100%;
  padding: 105px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(232, 93, 26, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 40%,
      rgba(29, 111, 255, 0.07),
      transparent 30%
    ),
    #f8fafc;
}

/* Background Grid */

.kk-gmb-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(8, 26, 49, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 26, 49, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* Background Orbs */

.kk-gmb-bg-orb {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(75px);
  pointer-events: none;
  opacity: 0.15;
  animation: kkGmbOrbMove 8s ease-in-out infinite alternate;
}

.kk-gmb-orb-one {
  top: 7%;
  left: -130px;
  background: var(--kk-gmb-orange);
}

.kk-gmb-orb-two {
  right: -140px;
  top: 48%;
  background: #2877d9;
  animation-delay: 2s;
}

@keyframes kkGmbOrbMove {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(35px, 25px, 0) scale(1.12);
  }
}

/* Container Safety */

.kk-gmb-section .container {
  position: relative;
  z-index: 2;
}

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

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

.kk-gmb-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 19px;
  color: var(--kk-gmb-orange);
  font-size: 12px;
  letter-spacing: 2px;
}

.kk-gmb-eyebrow span {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--kk-gmb-orange);
  border-radius: 20px;
}

.kk-gmb-eyebrow i {
  font-size: 15px;
}

.kk-gmb-heading h2 {
  margin: 0;
  color: var(--kk-gmb-navy);
  font-size: clamp(38px, 5vw, 65px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -2px;
}

.kk-gmb-heading h2 span {
  display: block;
  color: var(--kk-gmb-orange);
}

.kk-gmb-heading p {
  max-width: 720px;
  margin: 23px auto 0;
  color: var(--kk-gmb-muted);
  font-size: 16px;
  line-height: 1.8;
}

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

.kk-gmb-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: center;
  margin-bottom: 110px;
}

/* Left Content */

.kk-gmb-content {
  position: relative;
}

.kk-gmb-mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  margin-bottom: 20px;
  border-radius: 50px;
  background: rgba(232, 93, 26, 0.09);
  color: var(--kk-gmb-orange-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.kk-gmb-mini-tag i {
  font-size: 14px;
}

.kk-gmb-content h3 {
  max-width: 590px;
  margin: 0;
  color: var(--kk-gmb-navy);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  font-weight: 800;
}

.kk-gmb-content h3 span {
  display: block;
  color: var(--kk-gmb-orange);
}

.kk-gmb-description {
  max-width: 600px;
  margin: 23px 0 30px;
  color: var(--kk-gmb-muted);
  font-size: 15px;
  line-height: 1.85;
}

/* =========================================================
   FEATURE LIST
========================================================= */

.kk-gmb-feature-list {
  display: grid;
  gap: 13px;
}

.kk-gmb-feature {
  display: flex;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--kk-gmb-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  transition: all 0.3s ease;
}

.kk-gmb-feature:hover {
  transform: translateX(7px);
  border-color: rgba(232, 93, 26, 0.25);
  box-shadow: 0 15px 35px rgba(8, 26, 49, 0.07);
}

.kk-gmb-feature-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--kk-gmb-orange);
  color: #fff;
  font-size: 18px;
}

.kk-gmb-feature h4 {
  margin: 0 0 4px;
  color: var(--kk-gmb-text);
  font-size: 15px;
  font-weight: 750;
}

.kk-gmb-feature p {
  margin: 0;
  color: var(--kk-gmb-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
   DASHBOARD
========================================================= */

.kk-gmb-dashboard-wrap {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-gmb-dashboard {
  position: relative;
  width: min(100%, 520px);
  padding: 23px;
  border-radius: 25px;
  background: linear-gradient(145deg, #07192e, #103354);
  box-shadow:
    0 35px 80px rgba(7, 25, 46, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: kkGmbDashboardFloat 5s ease-in-out infinite;
}

@keyframes kkGmbDashboardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* Dashboard Top */

.kk-gmb-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}

.kk-gmb-profile-info {
  display: flex;
  align-items: center;
  gap: 11px;
}

.kk-gmb-google-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  font-size: 20px;
  font-weight: 800;
}

.kk-gmb-google-icon span {
  color: #4285f4;
}

.kk-gmb-profile-info strong,
.kk-gmb-profile-info small {
  display: block;
}

.kk-gmb-profile-info strong {
  color: #fff;
  font-size: 14px;
}

.kk-gmb-profile-info small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

.kk-gmb-live-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.07);
  color: #bdeecb;
  font-size: 10px;
}

.kk-gmb-live-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58d47b;
  box-shadow: 0 0 10px rgba(88, 212, 123, 0.7);
}

/* Profile Card */

.kk-gmb-profile-card {
  padding: 20px;
  border-radius: 18px;
  background: #fff;
}

.kk-gmb-profile-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.kk-gmb-business-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(232, 93, 26, 0.1);
  color: var(--kk-gmb-orange);
  font-size: 23px;
}

.kk-gmb-business-name {
  flex: 1;
}

.kk-gmb-business-name h4 {
  margin: 0;
  color: var(--kk-gmb-text);
  font-size: 17px;
}

.kk-gmb-business-name p {
  margin: 3px 0 0;
  color: var(--kk-gmb-muted);
  font-size: 11px;
}

.kk-gmb-verified {
  color: #2877d9;
  font-size: 21px;
}

/* Rating */

.kk-gmb-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 19px 0;
  padding: 12px 13px;
  border-radius: 11px;
  background: #f7f9fc;
}

.kk-gmb-rating-row strong {
  color: var(--kk-gmb-text);
  font-size: 17px;
}

.kk-gmb-stars {
  color: #f6a900;
  font-size: 12px;
}

.kk-gmb-rating-row span {
  color: var(--kk-gmb-muted);
  font-size: 10px;
}

/* Info Grid */

.kk-gmb-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.kk-gmb-info-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
}

.kk-gmb-info-item > i {
  color: var(--kk-gmb-orange);
  font-size: 14px;
}

.kk-gmb-info-item small,
.kk-gmb-info-item strong {
  display: block;
}

.kk-gmb-info-item small {
  margin-bottom: 2px;
  color: #8791a1;
  font-size: 9px;
}

.kk-gmb-info-item strong {
  color: var(--kk-gmb-text);
  font-size: 10px;
}

/* Action Row */

.kk-gmb-action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.kk-gmb-action-row div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px;
  border-radius: 9px;
  background: var(--kk-gmb-navy);
  color: #fff;
  font-size: 10px;
}

.kk-gmb-action-row i {
  color: var(--kk-gmb-orange);
}

/* Dashboard Bottom */

.kk-gmb-dashboard-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.kk-gmb-score,
.kk-gmb-visibility {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
}

.kk-gmb-score-circle {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--kk-gmb-orange);
  border-radius: 50%;
  color: #fff;
}

.kk-gmb-score-circle span {
  font-size: 14px;
  font-weight: 800;
}

.kk-gmb-score-circle small {
  font-size: 8px;
}

.kk-gmb-score strong,
.kk-gmb-score span,
.kk-gmb-visibility strong,
.kk-gmb-visibility span {
  display: block;
}

.kk-gmb-score strong,
.kk-gmb-visibility strong {
  color: #fff;
  font-size: 10px;
}

.kk-gmb-score > div:last-child span,
.kk-gmb-visibility > div:last-child span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
}

/* Bars */

.kk-gmb-bars {
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.kk-gmb-bars span {
  width: 5px;
  display: block;
  border-radius: 5px 5px 0 0;
  background: var(--kk-gmb-orange);
}

/* Floating Cards */

.kk-gmb-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 45px rgba(8, 26, 49, 0.14);
  backdrop-filter: blur(10px);
  animation: kkGmbFloatCard 4s ease-in-out infinite;
}

.kk-gmb-review-card {
  left: -15px;
  top: 15%;
}

.kk-gmb-map-card {
  right: -15px;
  bottom: 14%;
  animation-delay: 1.4s;
}

@keyframes kkGmbFloatCard {
  0%,
  100% {
    transform: translateY(0);
  }

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

.kk-gmb-floating-icon,
.kk-gmb-map-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(232, 93, 26, 0.1);
  color: var(--kk-gmb-orange);
}

.kk-gmb-floating-card strong,
.kk-gmb-floating-card span {
  display: block;
}

.kk-gmb-floating-card strong {
  color: var(--kk-gmb-text);
  font-size: 11px;
}

.kk-gmb-floating-card span {
  margin-top: 2px;
  color: var(--kk-gmb-muted);
  font-size: 8px;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.kk-gmb-section-title,
.kk-gmb-process-heading {
  text-align: center;
  margin-bottom: 45px;
}

.kk-gmb-section-title > span,
.kk-gmb-process-heading > span {
  color: var(--kk-gmb-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-gmb-section-title h3,
.kk-gmb-process-heading h3 {
  margin: 12px 0 0;
  color: var(--kk-gmb-navy);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 800;
}

.kk-gmb-section-title h3 strong,
.kk-gmb-process-heading h3 strong {
  color: var(--kk-gmb-orange);
}

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

.kk-gmb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 110px;
}

.kk-gmb-card {
  position: relative;
  min-height: 255px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid var(--kk-gmb-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  transition: all 0.35s ease;
}

.kk-gmb-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 93, 26, 0.25);
  box-shadow: 0 25px 55px rgba(8, 26, 49, 0.1);
}

.kk-gmb-card-number {
  position: absolute;
  top: 19px;
  right: 22px;
  color: rgba(8, 26, 49, 0.07);
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
}

.kk-gmb-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 23px;
  border-radius: 15px;
  background: var(--kk-gmb-navy);
  color: var(--kk-gmb-orange);
  font-size: 21px;
  transition: 0.3s ease;
}

.kk-gmb-card:hover .kk-gmb-card-icon {
  background: var(--kk-gmb-orange);
  color: #fff;
  transform: rotate(-5deg);
}

.kk-gmb-card h4 {
  margin: 0 0 10px;
  color: var(--kk-gmb-text);
  font-size: 17px;
  font-weight: 800;
}

.kk-gmb-card p {
  margin: 0;
  color: var(--kk-gmb-muted);
  font-size: 13px;
  line-height: 1.75;
}

.kk-gmb-card-line {
  width: 0;
  height: 2px;
  margin-top: 20px;
  background: var(--kk-gmb-orange);
  transition: width 0.35s ease;
}

.kk-gmb-card:hover .kk-gmb-card-line {
  width: 55px;
}

/* =========================================================
   SEARCH FLOW
========================================================= */

.kk-gmb-flow-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
  align-items: center;
  padding: 60px;
  margin-bottom: 105px;
  border-radius: 27px;
  background: var(--kk-gmb-navy);
  box-shadow: 0 30px 65px rgba(8, 26, 49, 0.15);
  overflow: hidden;
}

.kk-gmb-flow-content {
  position: relative;
  z-index: 1;
}

.kk-gmb-flow-label {
  color: var(--kk-gmb-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-gmb-flow-content h3 {
  margin: 13px 0;
  color: #fff;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.12;
  font-weight: 800;
}

.kk-gmb-flow-content h3 span {
  display: block;
  color: var(--kk-gmb-orange);
}

.kk-gmb-flow-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.8;
}

/* Flow */

.kk-gmb-flow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kk-gmb-flow-item {
  flex: 1;
  min-width: 0;
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  text-align: center;
}

.kk-gmb-flow-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  border-radius: 12px;
  background: rgba(232, 93, 26, 0.15);
  color: var(--kk-gmb-orange);
  font-size: 17px;
}

.kk-gmb-flow-item strong,
.kk-gmb-flow-item span {
  display: block;
}

.kk-gmb-flow-item strong {
  color: #fff;
  font-size: 11px;
}

.kk-gmb-flow-item span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 8px;
  line-height: 1.4;
}

.kk-gmb-flow-arrow {
  flex: 0 0 auto;
  color: var(--kk-gmb-orange);
  font-size: 17px;
}

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

.kk-gmb-process {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 95px;
}

.kk-gmb-process-item {
  padding: 26px 20px;
  border: 1px solid var(--kk-gmb-border);
  border-radius: 18px;
  background: #fff;
  text-align: center;
  transition: 0.3s ease;
}

.kk-gmb-process-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(8, 26, 49, 0.08);
}

.kk-gmb-process-icon {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0 auto 17px;
  border-radius: 17px;
  background: rgba(232, 93, 26, 0.09);
  color: var(--kk-gmb-orange);
  font-size: 21px;
}

.kk-gmb-process-icon span {
  position: absolute;
  top: -8px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--kk-gmb-orange);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}

.kk-gmb-process-item h4 {
  margin: 0 0 9px;
  color: var(--kk-gmb-text);
  font-size: 16px;
  font-weight: 800;
}

.kk-gmb-process-item p {
  margin: 0;
  color: var(--kk-gmb-muted);
  font-size: 12px;
  line-height: 1.7;
}

.kk-gmb-process-connector {
  width: 35px;
  height: 1px;
  background: rgba(232, 93, 26, 0.35);
}

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

.kk-gmb-cta {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px 35px;
  border-radius: 22px;
  background: linear-gradient(110deg, #fff, #fff8f3);
  border: 1px solid rgba(232, 93, 26, 0.16);
  box-shadow: 0 20px 55px rgba(8, 26, 49, 0.07);
}

.kk-gmb-cta-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--kk-gmb-orange);
  color: #fff;
  font-size: 23px;
}

.kk-gmb-cta-content {
  flex: 1;
}

.kk-gmb-cta-content > span {
  color: var(--kk-gmb-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.kk-gmb-cta-content h3 {
  margin: 5px 0;
  color: var(--kk-gmb-navy);
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.25;
  font-weight: 800;
}

.kk-gmb-cta-content h3 strong {
  color: var(--kk-gmb-orange);
}

.kk-gmb-cta-content p {
  margin: 0;
  color: var(--kk-gmb-muted);
  font-size: 12px;
}

.kk-gmb-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 19px;
  border-radius: 10px;
  background: var(--kk-gmb-navy);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  transition: 0.3s ease;
}

.kk-gmb-cta-btn:hover {
  background: var(--kk-gmb-orange);
  transform: translateY(-3px);
}

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

@media (max-width: 1100px) {
  .kk-gmb-main-grid {
    gap: 45px;
  }

  .kk-gmb-flow-section {
    grid-template-columns: 1fr;
  }

  .kk-gmb-flow {
    width: 100%;
  }

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

  .kk-gmb-process-connector {
    display: none;
  }
}

@media (max-width: 900px) {
  .kk-gmb-main-grid {
    grid-template-columns: 1fr;
  }

  .kk-gmb-content {
    max-width: 750px;
    margin: auto;
  }

  .kk-gmb-dashboard-wrap {
    max-width: 620px;
    width: 100%;
    margin: auto;
  }

  .kk-gmb-cards {
    grid-template-columns: 1fr 1fr;
  }

  .kk-gmb-flow-section {
    padding: 45px 35px;
  }
}

@media (max-width: 767px) {
  .kk-gmb-section {
    padding: 75px 0 70px;
  }

  .kk-gmb-heading {
    margin-bottom: 50px;
  }

  .kk-gmb-heading h2 {
    letter-spacing: -1px;
  }

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

  .kk-gmb-main-grid {
    margin-bottom: 80px;
  }

  .kk-gmb-content h3 {
    font-size: 35px;
  }

  .kk-gmb-dashboard-wrap {
    min-height: 480px;
  }

  .kk-gmb-dashboard {
    padding: 16px;
  }

  .kk-gmb-review-card {
    left: -5px;
  }

  .kk-gmb-map-card {
    right: -5px;
  }

  .kk-gmb-cards {
    grid-template-columns: 1fr;
    margin-bottom: 80px;
  }

  .kk-gmb-card {
    min-height: auto;
  }

  .kk-gmb-flow-section {
    padding: 38px 22px;
    margin-bottom: 80px;
  }

  .kk-gmb-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .kk-gmb-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .kk-gmb-flow-item {
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
  }

  .kk-gmb-flow-icon {
    flex: 0 0 42px;
    margin: 0;
  }

  .kk-gmb-process {
    grid-template-columns: 1fr;
    margin-bottom: 75px;
  }

  .kk-gmb-process-item {
    width: 100%;
  }

  .kk-gmb-cta {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 25px;
  }

  .kk-gmb-cta-content {
    min-width: calc(100% - 90px);
  }

  .kk-gmb-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kk-gmb-section {
    padding: 60px 0;
  }

  .kk-gmb-heading h2 {
    font-size: 35px;
  }

  .kk-gmb-heading p {
    font-size: 13px;
    line-height: 1.7;
  }

  .kk-gmb-eyebrow span {
    width: 22px;
  }

  .kk-gmb-content h3 {
    font-size: 31px;
  }

  .kk-gmb-feature {
    padding: 13px;
  }

  .kk-gmb-feature-icon {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
    font-size: 15px;
  }

  .kk-gmb-feature h4 {
    font-size: 14px;
  }

  .kk-gmb-feature p {
    font-size: 12px;
  }

  .kk-gmb-dashboard-wrap {
    min-height: 425px;
  }

  .kk-gmb-dashboard {
    padding: 11px;
    border-radius: 18px;
  }

  .kk-gmb-profile-card {
    padding: 13px;
  }

  .kk-gmb-business-avatar {
    width: 43px;
    height: 43px;
    font-size: 18px;
  }

  .kk-gmb-business-name h4 {
    font-size: 14px;
  }

  .kk-gmb-info-grid {
    grid-template-columns: 1fr;
  }

  .kk-gmb-dashboard-bottom {
    grid-template-columns: 1fr;
  }

  .kk-gmb-floating-card {
    padding: 8px 10px;
  }

  .kk-gmb-floating-icon,
  .kk-gmb-map-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .kk-gmb-floating-card strong {
    font-size: 9px;
  }

  .kk-gmb-floating-card span {
    font-size: 7px;
  }

  .kk-gmb-review-card {
    left: -7px;
    top: 11%;
  }

  .kk-gmb-map-card {
    right: -7px;
    bottom: 8%;
  }

  .kk-gmb-section-title h3,
  .kk-gmb-process-heading h3 {
    font-size: 29px;
  }

  .kk-gmb-cta {
    gap: 15px;
    padding: 20px;
  }

  .kk-gmb-cta-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 19px;
  }

  .kk-gmb-cta-content {
    min-width: calc(100% - 65px);
  }

  .kk-gmb-cta-content h3 {
    font-size: 19px;
  }

  .kk-gmb-cta-content p {
    font-size: 11px;
    line-height: 1.6;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-gmb-dashboard,
  .kk-gmb-floating-card,
  .kk-gmb-bg-orb {
    animation: none !important;
  }

  .kk-gmb-card,
  .kk-gmb-feature,
  .kk-gmb-process-item,
  .kk-gmb-cta-btn {
    transition: none !important;
  }
}

/* =========================================================
   MOBILE OVERFLOW SAFETY
========================================================= */

@media (max-width: 767px) {
  .kk-gmb-section {
    max-width: 100%;
    overflow-x: hidden;
  }

  .kk-gmb-section .container {
    max-width: 100%;
  }

  .kk-gmb-dashboard-wrap,
  .kk-gmb-dashboard,
  .kk-gmb-flow-section,
  .kk-gmb-cards,
  .kk-gmb-process,
  .kk-gmb-cta {
    max-width: 100%;
  }
}

/* =========================================================
   KAUSHAL KUMAR - BUSINESS WEBSITE
   ISOLATED CSS
========================================================= */

.kk-bw-section {
  position: relative;
  overflow: hidden;
  padding: 65px 0;
  background: #ffffff;
  isolation: isolate;
}

.kk-bw-section .container {
  position: relative;
  z-index: 2;
}

.kk-bw-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.45;
  animation: kkBwFloat 7s ease-in-out infinite;
}

.kk-bw-bg-shape-one {
  width: 240px;
  height: 240px;
  top: -110px;
  left: -100px;
  background: rgba(200, 164, 74, 0.1);
}

.kk-bw-bg-shape-two {
  width: 280px;
  height: 280px;
  right: -130px;
  bottom: -150px;
  background: rgba(139, 111, 61, 0.09);
  animation-delay: 1.5s;
}

/* Label */

.kk-bw-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: #8b6f3d;
}

.kk-bw-label span {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: #c8a45c;
}

.kk-bw-label i {
  font-size: 16px;
}

.kk-bw-label strong {
  font-weight: 700;
}

/* Heading */

.kk-bw-title {
  max-width: 600px;
  margin: 0 0 17px;
  color: #211b0c;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.7px;
}

.kk-bw-title span {
  display: block;
  color: #e85d1a;
}

/* Text */

.kk-bw-description {
  max-width: 610px;
  margin: 0 0 12px;
  color: #656565;
  font-size: 15.5px;
  line-height: 1.75;
}

.kk-bw-description-small {
  margin-bottom: 21px;
}

/* Points */

.kk-bw-points {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 610px;
}

.kk-bw-point {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid rgba(200, 164, 92, 0.18);
  border-radius: 12px;
  background: rgba(200, 164, 92, 0.055);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-bw-point:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(45, 35, 15, 0.08);
}

.kk-bw-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e85d1a;
  color: #ffffff;
  font-size: 19px;
}

.kk-bw-point h3 {
  margin: 0 0 3px;
  color: #29220f;
  font-size: 15px;
  font-weight: 700;
}

.kk-bw-point p {
  margin: 0;
  color: #777777;
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   BROWSER VISUAL
========================================================= */

.kk-bw-visual {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-bw-glow {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: rgba(200, 164, 92, 0.13);
  filter: blur(35px);
  animation: kkBwGlow 4s ease-in-out infinite;
}

.kk-bw-browser {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  overflow: hidden;
  border: 1px solid rgba(45, 35, 15, 0.1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 25px 60px rgba(35, 28, 12, 0.14);
  transform: perspective(1000px) rotateY(-3deg);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.kk-bw-browser:hover {
  transform: perspective(1000px) rotateY(0deg) translateY(-5px);
  box-shadow: 0 30px 70px rgba(35, 28, 12, 0.18);
}

.kk-bw-browser-top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 9px 14px;
  background: #211b0c;
}

.kk-bw-dots {
  display: flex;
  gap: 5px;
}

.kk-bw-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.kk-bw-address {
  flex: 1;
  padding: 7px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}

.kk-bw-address i {
  margin-right: 5px;
}

.kk-bw-browser-body {
  min-height: 330px;
  padding: 18px;
  background: #f9f7f1;
}

/* Mini Header */

.kk-bw-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.kk-bw-mini-logo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kk-bw-mini-logo span:first-child {
  width: 72px;
  height: 6px;
  border-radius: 5px;
  background: #302716;
}

.kk-bw-mini-logo span:last-child {
  width: 42px;
  height: 4px;
  border-radius: 5px;
  background: #c8a45c;
}

.kk-bw-mini-nav {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kk-bw-mini-nav span {
  width: 30px;
  height: 4px;
  border-radius: 5px;
  background: #d4d0c6;
}

.kk-bw-mini-nav b {
  width: 45px;
  height: 18px;
  border-radius: 5px;
  background: #c8a45c;
}

/* Mini Hero */

.kk-bw-mini-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  min-height: 190px;
  border-radius: 12px;
  background: #211b0c;
}

.kk-bw-mini-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kk-bw-mini-copy small {
  margin-bottom: 8px;
  color: #c8a45c;
  font-size: 8px;
  letter-spacing: 1.2px;
}

.kk-bw-mini-copy strong {
  color: #ffffff;
  font-size: 25px;
  line-height: 1.1;
}

.kk-bw-mini-button {
  width: 70px;
  height: 22px;
  margin-top: 16px;
  border-radius: 5px;
  background: #c8a45c;
}

/* Mini Card */

.kk-bw-mini-card {
  width: 130px;
  min-height: 145px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.kk-bw-mini-card i {
  display: block;
  margin-bottom: 15px;
  color: #c8a45c;
  font-size: 24px;
}

.kk-bw-mini-card strong {
  display: block;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 12px;
}

.kk-bw-mini-card span {
  display: block;
  width: 100%;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
}

.kk-bw-mini-card span:nth-of-type(2) {
  width: 75%;
}

.kk-bw-mini-card span:nth-of-type(3) {
  width: 55%;
}

/* Mini Services */

.kk-bw-mini-services {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.kk-bw-mini-services div {
  flex: 1;
  height: 35px;
  border-radius: 7px;
  background: #e8e3d7;
}

/* Floating Cards */

.kk-bw-float-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid rgba(200, 164, 92, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(35, 28, 12, 0.12);
  animation: kkBwFloat 5s ease-in-out infinite;
}

.kk-bw-float-card i {
  color: #a98235;
  font-size: 19px;
}

.kk-bw-float-card strong,
.kk-bw-float-card small {
  display: block;
}

.kk-bw-float-card strong {
  color: #29220f;
  font-size: 12px;
}

.kk-bw-float-card small {
  margin-top: 2px;
  color: #777;
  font-size: 10px;
}

.kk-bw-float-one {
  top: 12%;
  left: -10px;
}

.kk-bw-float-two {
  right: -5px;
  bottom: 12%;
  animation-delay: 1.2s;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes kkBwFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .kk-bw-section {
    padding: 50px 0;
  }

  .kk-bw-visual {
    min-height: 420px;
    margin-top: 5px;
  }

  .kk-bw-browser {
    transform: none;
  }

  .kk-bw-browser:hover {
    transform: translateY(-3px);
  }

  .kk-bw-float-one {
    left: 2%;
  }

  .kk-bw-float-two {
    right: 2%;
  }
}

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

@media (max-width: 575.98px) {
  .kk-bw-section {
    padding: 38px 0;
  }

  .kk-bw-title {
    margin-bottom: 14px;
    font-size: 31px;
    line-height: 1.15;
  }

  .kk-bw-description {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 10px;
  }

  .kk-bw-description-small {
    margin-bottom: 17px;
  }

  .kk-bw-points {
    gap: 10px;
  }

  .kk-bw-point {
    padding: 11px;
    gap: 10px;
  }

  .kk-bw-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .kk-bw-point h3 {
    font-size: 14px;
  }

  .kk-bw-point p {
    font-size: 12px;
    line-height: 1.45;
  }

  .kk-bw-visual {
    min-height: 300px;
    margin-top: 3px;
  }

  .kk-bw-browser {
    width: 100%;
    border-radius: 12px;
  }

  .kk-bw-browser-top {
    min-height: 40px;
    padding: 7px 10px;
  }

  .kk-bw-address {
    font-size: 9px;
    padding: 6px 8px;
  }

  .kk-bw-browser-body {
    min-height: 245px;
    padding: 11px;
  }

  .kk-bw-mini-header {
    margin-bottom: 17px;
  }

  .kk-bw-mini-nav span {
    width: 18px;
  }

  .kk-bw-mini-nav b {
    width: 30px;
    height: 14px;
  }

  .kk-bw-mini-hero {
    min-height: 145px;
    padding: 13px;
    gap: 10px;
  }

  .kk-bw-mini-copy strong {
    font-size: 17px;
  }

  .kk-bw-mini-copy small {
    font-size: 6px;
  }

  .kk-bw-mini-button {
    width: 52px;
    height: 17px;
    margin-top: 10px;
  }

  .kk-bw-mini-card {
    width: 92px;
    min-height: 105px;
    padding: 10px;
  }

  .kk-bw-mini-card i {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .kk-bw-mini-card strong {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .kk-bw-mini-services {
    margin-top: 10px;
  }

  .kk-bw-mini-services div {
    height: 25px;
  }

  .kk-bw-float-card {
    padding: 8px 10px;
    gap: 6px;
  }

  .kk-bw-float-card i {
    font-size: 15px;
  }

  .kk-bw-float-card strong {
    font-size: 10px;
  }

  .kk-bw-float-card small {
    font-size: 8px;
  }

  .kk-bw-float-one {
    top: 2%;
    left: -2px;
  }

  .kk-bw-float-two {
    right: -2px;
    bottom: 1%;
  }
}

@media (max-width: 380px) {
  .kk-bw-title {
    font-size: 28px;
  }

  .kk-bw-mini-card {
    width: 80px;
  }

  .kk-bw-mini-copy strong {
    font-size: 15px;
  }

  .kk-bw-float-card {
    transform: scale(0.88);
  }
}

/* =========================================================
   GOOGLE MAPS RANKING
   FULLY ISOLATED CSS
   PREFIX: kk-gmaps-
========================================================= */

.kk-gmaps-section,
.kk-gmaps-section * {
  box-sizing: border-box;
}

.kk-gmaps-section {
  --kk-gmaps-orange: #e85d1a;
  --kk-gmaps-orange-dark: #c8470b;
  --kk-gmaps-navy: #081b32;
  --kk-gmaps-blue: #163b60;
  --kk-gmaps-text: #182536;
  --kk-gmaps-muted: #697588;
  --kk-gmaps-border: rgba(8, 27, 50, 0.09);

  position: relative;
  width: 100%;
  padding: 75px 0 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 18%, rgba(232, 93, 26, 0.08), transparent 27%),
    radial-gradient(
      circle at 95% 70%,
      rgba(36, 112, 190, 0.08),
      transparent 28%
    ),
    #f7f9fc;
}

/* Background */

.kk-gmaps-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;

  background-image:
    linear-gradient(rgba(8, 27, 50, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 27, 50, 0.035) 1px, transparent 1px);

  background-size: 40px 40px;
}

.kk-gmaps-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.13;
  pointer-events: none;
  animation: kkGmapsGlow 8s ease-in-out infinite alternate;
}

.kk-gmaps-glow-one {
  left: -120px;
  top: 15%;
  background: var(--kk-gmaps-orange);
}

.kk-gmaps-glow-two {
  right: -120px;
  bottom: 15%;
  background: #277bd1;
  animation-delay: 2s;
}

@keyframes kkGmapsGlow {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(30px, 20px) scale(1.12);
  }
}

/* Container */

.kk-gmaps-section .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   INTRO
========================================================= */

.kk-gmaps-intro {
  max-width: 800px;
  margin: 0 auto 45px;
  text-align: center;
}

.kk-gmaps-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: var(--kk-gmaps-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.kk-gmaps-kicker i {
  font-size: 14px;
}

.kk-gmaps-intro h2 {
  margin: 0;
  color: var(--kk-gmaps-navy);
  font-size: clamp(34px, 4.5vw, 57px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: 850;
}

.kk-gmaps-intro h2 strong {
  display: block;
  color: var(--kk-gmaps-orange);
}

.kk-gmaps-intro p {
  max-width: 690px;
  margin: 16px auto 0;
  color: var(--kk-gmaps-muted);
  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   DASHBOARD
========================================================= */

.kk-gmaps-dashboard {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  min-height: 490px;
  margin-bottom: 60px;
  overflow: hidden;
  border-radius: 23px;
  background: var(--kk-gmaps-navy);
  box-shadow: 0 25px 65px rgba(8, 27, 50, 0.15);
}

/* Map Area */

.kk-gmaps-map-area {
  padding: 27px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.kk-gmaps-map-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}

.kk-gmaps-map-top span {
  color: var(--kk-gmaps-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-gmaps-map-top h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: 750;
}

.kk-gmaps-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  white-space: nowrap;
}

.kk-gmaps-location-pill i {
  color: var(--kk-gmaps-orange);
}

/* Map */

.kk-gmaps-map {
  position: relative;
  height: 355px;
  overflow: hidden;
  border-radius: 17px;
  background:
    linear-gradient(
      35deg,
      transparent 46%,
      rgba(255, 255, 255, 0.35) 47%,
      rgba(255, 255, 255, 0.35) 48%,
      transparent 49%
    ),
    linear-gradient(
      125deg,
      transparent 47%,
      rgba(255, 255, 255, 0.24) 48%,
      rgba(255, 255, 255, 0.24) 49%,
      transparent 50%
    ),
    #dce8df;
}

/* Roads */

.kk-gmaps-road {
  position: absolute;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(100, 120, 105, 0.08);
}

.kk-gmaps-road-one {
  width: 115%;
  height: 21px;
  left: -7%;
  top: 36%;
  transform: rotate(-12deg);
}

.kk-gmaps-road-two {
  width: 115%;
  height: 17px;
  left: -5%;
  top: 67%;
  transform: rotate(17deg);
}

.kk-gmaps-road-three {
  width: 18px;
  height: 120%;
  left: 45%;
  top: -10%;
  transform: rotate(21deg);
}

.kk-gmaps-road-four {
  width: 13px;
  height: 120%;
  right: 21%;
  top: -12%;
  transform: rotate(-33deg);
}

/* Map Blocks */

.kk-gmaps-map-block {
  position: absolute;
  border-radius: 4px;
  background: rgba(111, 156, 119, 0.15);
}

.kk-gmaps-block-one {
  width: 110px;
  height: 65px;
  left: 7%;
  top: 9%;
}

.kk-gmaps-block-two {
  width: 130px;
  height: 80px;
  right: 5%;
  top: 10%;
}

.kk-gmaps-block-three {
  width: 125px;
  height: 80px;
  left: 10%;
  bottom: 7%;
}

.kk-gmaps-block-four {
  width: 100px;
  height: 70px;
  right: 9%;
  bottom: 10%;
}

/* Search */

.kk-gmaps-search-box {
  position: absolute;
  left: 17px;
  top: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 215px;
  padding: 11px 13px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(0, 0, 0, 0.12);
}

.kk-gmaps-search-box i {
  color: var(--kk-gmaps-orange);
  font-size: 12px;
}

.kk-gmaps-search-box span {
  color: #6c7682;
  font-size: 10px;
}

/* Pins */

.kk-gmaps-pin {
  position: absolute;
}

.kk-gmaps-pin-main {
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  text-align: center;
}

.kk-gmaps-pin-icon {
  position: relative;
  z-index: 2;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 8%;
  background: var(--kk-gmaps-orange);
  color: #fff;
  font-size: 18px;
  transform: rotate(-45deg);
  box-shadow: 0 9px 22px rgba(232, 93, 26, 0.35);
}

.kk-gmaps-pin-icon i {
  transform: rotate(45deg);
}

.kk-gmaps-pin-main span {
  display: block;
  width: max-content;
  margin: 10px auto 0;
  padding: 5px 8px;
  border-radius: 5px;
  background: #fff;
  color: var(--kk-gmaps-text);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.kk-gmaps-pin-pulse {
  position: absolute;
  width: 75px;
  height: 75px;
  left: -16px;
  top: -16px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.16);
  animation: kkGmapsPulse 2s infinite;
}

@keyframes kkGmapsPulse {
  0% {
    transform: scale(0.65);
    opacity: 0.8;
  }

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

  100% {
    opacity: 0;
  }
}

.kk-gmaps-pin-small {
  z-index: 2;
  color: #fff;
  font-size: 17px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.18));
}

.pin-a {
  left: 24%;
  top: 30%;
}

.pin-b {
  right: 23%;
  top: 39%;
}

.pin-c {
  right: 32%;
  bottom: 19%;
}

/* Map Footer */

.kk-gmaps-map-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
}

.kk-gmaps-map-footer div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
}

.kk-gmaps-map-footer i {
  color: var(--kk-gmaps-orange);
}

/* =========================================================
   RANKING PANEL
========================================================= */

.kk-gmaps-ranking-panel {
  padding: 27px;
  background: rgba(255, 255, 255, 0.025);
}

.kk-gmaps-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 23px;
}

.kk-gmaps-panel-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(232, 93, 26, 0.14);
  color: var(--kk-gmaps-orange);
}

.kk-gmaps-panel-header span {
  display: block;
  color: var(--kk-gmaps-orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.kk-gmaps-panel-header h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 17px;
}

/* Position */

.kk-gmaps-position {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.kk-gmaps-position-number {
  display: flex;
  align-items: flex-start;
  color: #fff;
}

.kk-gmaps-position-number small {
  margin-top: 7px;
  color: var(--kk-gmaps-orange);
  font-size: 12px;
}

.kk-gmaps-position-number strong {
  font-size: 39px;
  line-height: 1;
}

.kk-gmaps-position-info {
  flex: 1;
}

.kk-gmaps-position-info span,
.kk-gmaps-position-info strong {
  display: block;
}

.kk-gmaps-position-info span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 8px;
}

.kk-gmaps-position-info strong {
  margin-top: 3px;
  color: #fff;
  font-size: 11px;
}

.kk-gmaps-position-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(232, 93, 26, 0.13);
  color: var(--kk-gmaps-orange);
}

/* Metrics */

.kk-gmaps-metrics {
  display: grid;
  gap: 16px;
  margin: 23px 0;
}

.kk-gmaps-metric-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}

.kk-gmaps-metric-head span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
}

.kk-gmaps-metric-head strong {
  color: var(--kk-gmaps-orange);
  font-size: 9px;
}

.kk-gmaps-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
}

.kk-gmaps-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kk-gmaps-orange);
  animation: kkGmapsProgress 1.4s ease both;
}

@keyframes kkGmapsProgress {
  from {
    width: 0 !important;
  }
}

/* Actions */

.kk-gmaps-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.kk-gmaps-action {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}

.kk-gmaps-action > i {
  color: var(--kk-gmaps-orange);
  font-size: 14px;
}

.kk-gmaps-action strong,
.kk-gmaps-action span {
  display: block;
}

.kk-gmaps-action strong {
  color: #fff;
  font-size: 9px;
}

.kk-gmaps-action span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 7px;
}

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

.kk-gmaps-work-heading {
  margin-bottom: 25px;
  text-align: center;
}

.kk-gmaps-work-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--kk-gmaps-orange);
  font-size: 9px;
  letter-spacing: 1.5px;
}

.kk-gmaps-work-label span {
  width: 25px;
  height: 1px;
  background: var(--kk-gmaps-orange);
}

.kk-gmaps-work-heading h3 {
  margin: 0;
  color: var(--kk-gmaps-navy);
  font-size: clamp(29px, 3.5vw, 43px);
  line-height: 1.12;
  font-weight: 800;
}

.kk-gmaps-work-heading em {
  color: var(--kk-gmaps-orange);
  font-style: normal;
}

/* =========================================================
   WORK CARDS
========================================================= */

.kk-gmaps-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 60px;
}

.kk-gmaps-work-card {
  position: relative;
  padding: 21px;
  overflow: hidden;
  border: 1px solid var(--kk-gmaps-border);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.86);
  transition: 0.3s ease;
}

.kk-gmaps-work-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 93, 26, 0.23);
  box-shadow: 0 18px 40px rgba(8, 27, 50, 0.08);
}

.kk-gmaps-work-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.kk-gmaps-work-top > span {
  color: rgba(8, 27, 50, 0.18);
  font-size: 22px;
  font-weight: 900;
}

.kk-gmaps-work-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(232, 93, 26, 0.09);
  color: var(--kk-gmaps-orange);
  transition: 0.3s ease;
}

.kk-gmaps-work-card:hover .kk-gmaps-work-icon {
  background: var(--kk-gmaps-orange);
  color: #fff;
  transform: rotate(-5deg);
}

.kk-gmaps-work-card h4 {
  margin: 0 0 8px;
  color: var(--kk-gmaps-text);
  font-size: 16px;
  font-weight: 800;
}

.kk-gmaps-work-card p {
  min-height: 66px;
  margin: 0;
  color: var(--kk-gmaps-muted);
  font-size: 12px;
  line-height: 1.7;
}

.kk-gmaps-work-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
}

.kk-gmaps-work-bottom span {
  color: var(--kk-gmaps-orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.kk-gmaps-work-bottom i {
  color: #8b95a5;
  font-size: 12px;
}

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

.kk-gmaps-process {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 40px;
  padding: 29px;
  margin-bottom: 60px;
  border-radius: 19px;
  background: #fff;
  border: 1px solid var(--kk-gmaps-border);
}

.kk-gmaps-process-title span {
  color: var(--kk-gmaps-orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-gmaps-process-title h3 {
  margin: 7px 0 0;
  color: var(--kk-gmaps-navy);
  font-size: 22px;
  line-height: 1.2;
}

.kk-gmaps-process-title h3 strong {
  color: var(--kk-gmaps-orange);
}

.kk-gmaps-process-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.kk-gmaps-process-step {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kk-gmaps-process-step div {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kk-gmaps-navy);
  color: var(--kk-gmaps-orange);
  font-size: 8px;
  font-weight: 800;
}

.kk-gmaps-process-step span {
  color: var(--kk-gmaps-text);
  font-size: 10px;
  font-weight: 750;
}

.kk-gmaps-process-list > i {
  color: var(--kk-gmaps-orange);
  font-size: 11px;
}

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

.kk-gmaps-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 29px;
  border-radius: 19px;
  background: linear-gradient(110deg, #fff, #fff8f3);
  border: 1px solid rgba(232, 93, 26, 0.15);
}

.kk-gmaps-bottom-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--kk-gmaps-orange);
  color: #fff;
  font-size: 20px;
}

.kk-gmaps-bottom-content {
  flex: 1;
}

.kk-gmaps-bottom-content > span {
  color: var(--kk-gmaps-orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-gmaps-bottom-content h3 {
  margin: 4px 0 3px;
  color: var(--kk-gmaps-navy);
  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;
}

.kk-gmaps-bottom-content h3 strong {
  color: var(--kk-gmaps-orange);
}

.kk-gmaps-bottom-content p {
  margin: 0;
  color: var(--kk-gmaps-muted);
  font-size: 10px;
}

.kk-gmaps-bottom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 17px;
  border-radius: 9px;
  background: var(--kk-gmaps-navy);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  transition: 0.3s ease;
}

.kk-gmaps-bottom-btn:hover {
  background: var(--kk-gmaps-orange);
  transform: translateY(-2px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {
  .kk-gmaps-dashboard {
    grid-template-columns: 1fr;
  }

  .kk-gmaps-map-area {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .kk-gmaps-ranking-panel {
    padding-top: 23px;
  }

  .kk-gmaps-work-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kk-gmaps-process {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

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

@media (max-width: 767px) {
  .kk-gmaps-section {
    padding: 58px 0 55px;
    overflow-x: hidden;
  }

  .kk-gmaps-intro {
    margin-bottom: 34px;
  }

  .kk-gmaps-intro h2 {
    font-size: 35px;
    letter-spacing: -1px;
  }

  .kk-gmaps-intro p {
    font-size: 13px;
    line-height: 1.7;
  }

  .kk-gmaps-dashboard {
    margin-bottom: 45px;
    border-radius: 18px;
  }

  .kk-gmaps-map-area,
  .kk-gmaps-ranking-panel {
    padding: 18px;
  }

  .kk-gmaps-map-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .kk-gmaps-map-top h3 {
    font-size: 17px;
  }

  .kk-gmaps-map {
    height: 300px;
  }

  .kk-gmaps-map-footer {
    flex-wrap: wrap;
    gap: 10px 15px;
  }

  .kk-gmaps-work-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 45px;
  }

  .kk-gmaps-work-card p {
    min-height: auto;
  }

  .kk-gmaps-process {
    padding: 22px;
    margin-bottom: 45px;
  }

  .kk-gmaps-process-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }

  .kk-gmaps-process-list > i {
    display: none;
  }

  .kk-gmaps-process-step {
    padding: 9px;
    border: 1px solid #edf0f4;
    border-radius: 10px;
  }

  .kk-gmaps-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    padding: 21px;
  }

  .kk-gmaps-bottom-content {
    min-width: calc(100% - 70px);
  }

  .kk-gmaps-bottom-content h3 {
    font-size: 20px;
  }

  .kk-gmaps-bottom-content p {
    line-height: 1.6;
  }

  .kk-gmaps-bottom-btn {
    width: 100%;
    justify-content: center;
  }
}

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

@media (max-width: 480px) {
  .kk-gmaps-section {
    padding: 50px 0;
  }

  .kk-gmaps-intro h2 {
    font-size: 31px;
  }

  .kk-gmaps-intro p {
    font-size: 12px;
  }

  .kk-gmaps-map {
    height: 250px;
  }

  .kk-gmaps-search-box {
    width: 175px;
    left: 10px;
    top: 10px;
  }

  .kk-gmaps-search-box span {
    font-size: 8px;
  }

  .kk-gmaps-pin-icon {
    width: 37px;
    height: 37px;
    font-size: 15px;
  }

  .kk-gmaps-pin-pulse {
    width: 62px;
    height: 62px;
    left: -13px;
    top: -13px;
  }

  .kk-gmaps-actions {
    grid-template-columns: 1fr;
  }

  .kk-gmaps-work-heading h3 {
    font-size: 28px;
  }

  .kk-gmaps-process-list {
    grid-template-columns: 1fr;
  }

  .kk-gmaps-bottom-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-gmaps-glow,
  .kk-gmaps-pin-pulse {
    animation: none !important;
  }

  .kk-gmaps-work-card,
  .kk-gmaps-work-icon,
  .kk-gmaps-bottom-btn {
    transition: none !important;
  }
}

/* =========================================================
   KAUSHAL KUMAR - BUSINESS WEBSITE BENEFITS
   FINAL ORANGE ANIMATED VERSION
   ISOLATED CSS ONLY
========================================================= */

.kk-bw2-section {
  position: relative;
  overflow: hidden;
  padding: 68px 0;
  background: #211a0b;
  isolation: isolate;
}

/* =========================================================
   PROFESSIONAL ORANGE BACKGROUND ANIMATION
========================================================= */

.kk-bw2-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -260px;
  left: -170px;
  border-radius: 50%;
  background: #e85d1a;
  opacity: 0.14;
  filter: blur(80px);
  animation: kkBw2OrangeMove 9s ease-in-out infinite;
  pointer-events: none;
}

.kk-bw2-section::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -180px;
  bottom: -230px;
  border-radius: 50%;
  background: #e85d1a;
  opacity: 0.12;
  filter: blur(75px);
  animation: kkBw2OrangeMoveTwo 11s ease-in-out infinite;
  pointer-events: none;
}

/* Animated Grid */

.kk-bw2-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 45px 45px;
  pointer-events: none;
  animation: kkBw2GridMove 18s linear infinite;
}

/* Orange Orbs */

.kk-bw2-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: #e85d1a;
  filter: blur(8px);
  z-index: 1;
  animation: kkBw2Float 7s ease-in-out infinite;
}

.kk-bw2-orb-one {
  width: 280px;
  height: 280px;
  left: -150px;
  top: -130px;
  opacity: 0.1;
}

.kk-bw2-orb-two {
  width: 300px;
  height: 300px;
  right: -170px;
  bottom: -170px;
  opacity: 0.08;
  animation-delay: 1.5s;
}

.kk-bw2-section .container {
  position: relative;
  z-index: 3;
}

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

.kk-bw2-heading {
  max-width: 760px;
  margin: 0 auto 45px;
  text-align: center;
}

.kk-bw2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: #ff9a63;
  font-size: 11px;
  letter-spacing: 1.8px;
}

.kk-bw2-eyebrow span {
  width: 28px;
  height: 2px;
  background: #e85d1a;
}

.kk-bw2-eyebrow i {
  font-size: 15px;
  color: #e85d1a;
}

.kk-bw2-heading h2 {
  margin: 0 0 13px;
  color: #ffffff;
  font-size: clamp(31px, 4vw, 47px);
  line-height: 1.12;
  letter-spacing: -0.7px;
  font-weight: 700;
}

.kk-bw2-heading h2 span {
  display: block;
  color: #e85d1a;
}

.kk-bw2-heading p {
  max-width: 650px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.7;
}

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

.kk-bw2-visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-bw2-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232, 93, 26, 0.32);
}

.kk-bw2-circle-one {
  width: 390px;
  height: 390px;
  animation: kkBw2Rotate 18s linear infinite;
}

.kk-bw2-circle-two {
  width: 300px;
  height: 300px;
  border-style: dashed;
  border-color: rgba(232, 93, 26, 0.25);
  animation: kkBw2RotateReverse 14s linear infinite;
}

/* =========================================================
   MAIN VISUAL CARD
========================================================= */

.kk-bw2-main-card {
  position: relative;
  z-index: 2;
  width: min(100%, 380px);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(15px);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(232, 93, 26, 0.08);
}

.kk-bw2-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kk-bw2-card-top span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  letter-spacing: 1.5px;
}

.kk-bw2-card-top i {
  color: #e85d1a;
}

.kk-bw2-growth {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 17px;
}

.kk-bw2-growth-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(232, 93, 26, 0.14);
  color: #e85d1a;
  font-size: 21px;
  box-shadow: 0 0 20px rgba(232, 93, 26, 0.1);
}

.kk-bw2-growth small,
.kk-bw2-growth strong {
  display: block;
}

.kk-bw2-growth small {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

.kk-bw2-growth strong {
  color: #ffffff;
  font-size: 21px;
}

/* =========================================================
   CHART
========================================================= */

.kk-bw2-chart {
  height: 125px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 9px;
  padding: 0 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kk-bw2-chart span {
  flex: 1;
  max-width: 32px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, #e85d1a, #ff9a63);
  box-shadow: 0 0 12px rgba(232, 93, 26, 0.14);
  animation: kkBw2Bars 2.5s ease-in-out infinite alternate;
}

.kk-bw2-chart span:nth-child(2) {
  animation-delay: 0.2s;
}

.kk-bw2-chart span:nth-child(3) {
  animation-delay: 0.4s;
}

.kk-bw2-chart span:nth-child(4) {
  animation-delay: 0.6s;
}

.kk-bw2-chart span:nth-child(5) {
  animation-delay: 0.8s;
}

.kk-bw2-chart span:nth-child(6) {
  animation-delay: 1s;
}

.kk-bw2-chart span:nth-child(7) {
  animation-delay: 1.2s;
}

/* Footer */

.kk-bw2-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 15px;
}

.kk-bw2-card-footer div {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 9px;
}

.kk-bw2-card-footer i {
  color: #e85d1a;
}

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

.kk-bw2-floating {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 93, 26, 0.28);
  border-radius: 11px;
  background: rgba(33, 26, 11, 0.94);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.24),
    0 0 25px rgba(232, 93, 26, 0.07);
  animation: kkBw2Float 5s ease-in-out infinite;
}

.kk-bw2-floating i {
  color: #e85d1a;
  font-size: 18px;
}

.kk-bw2-floating strong,
.kk-bw2-floating small {
  display: block;
}

.kk-bw2-floating strong {
  color: #ffffff;
  font-size: 11px;
}

.kk-bw2-floating small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
}

.kk-bw2-floating-one {
  top: 9%;
  left: -2px;
}

.kk-bw2-floating-two {
  right: -2px;
  bottom: 9%;
  animation-delay: 1.2s;
}

/* =========================================================
   BENEFITS
========================================================= */

.kk-bw2-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kk-bw2-benefit {
  display: grid;
  grid-template-columns: 35px 46px 1fr;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-bw2-benefit:hover {
  transform: translateX(5px);
  background: rgba(232, 93, 26, 0.08);
  border-color: rgba(232, 93, 26, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.kk-bw2-number {
  color: rgba(232, 93, 26, 0.65);
  font-size: 11px;
  font-weight: 700;
}

.kk-bw2-benefit-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(232, 93, 26, 0.12);
  color: #e85d1a;
  font-size: 19px;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.kk-bw2-benefit:hover .kk-bw2-benefit-icon {
  transform: rotate(-5deg) scale(1.05);
  background: rgba(232, 93, 26, 0.18);
}

.kk-bw2-benefit-content h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.kk-bw2-benefit-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12.5px;
  line-height: 1.55;
}

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

.kk-bw2-cta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 42px;
  padding: 18px 20px;
  border: 1px solid rgba(232, 93, 26, 0.28);
  border-radius: 14px;
  background: rgba(232, 93, 26, 0.07);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.kk-bw2-cta-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #e85d1a;
  color: #ffffff;
  font-size: 19px;
  box-shadow: 0 8px 22px rgba(232, 93, 26, 0.25);
}

.kk-bw2-cta-text {
  flex: 1;
}

.kk-bw2-cta-text strong,
.kk-bw2-cta-text span {
  display: block;
}

.kk-bw2-cta-text strong {
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 14px;
}

.kk-bw2-cta-text span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
}

.kk-bw2-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border-radius: 8px;
  background: #e85d1a;
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(232, 93, 26, 0.18);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-bw2-cta-btn:hover {
  color: #ffffff;
  background: #f47739;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(232, 93, 26, 0.25);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes kkBw2OrangeMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(180px, 100px) scale(1.18);
  }

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

@keyframes kkBw2OrangeMoveTwo {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-140px, -90px) scale(1.15);
  }

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

@keyframes kkBw2GridMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 45px 45px;
  }
}

@keyframes kkBw2Float {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

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

@keyframes kkBw2RotateReverse {
  from {
    transform: rotate(360deg);
  }

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

@keyframes kkBw2Bars {
  from {
    opacity: 0.65;
    transform: scaleY(0.92);
  }

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

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .kk-bw2-section {
    padding: 55px 0;
  }

  .kk-bw2-heading {
    margin-bottom: 35px;
  }

  .kk-bw2-visual {
    min-height: 410px;
  }

  .kk-bw2-benefits {
    margin-top: 3px;
  }

  .kk-bw2-cta {
    margin-top: 30px;
  }
}

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

@media (max-width: 575.98px) {
  .kk-bw2-section {
    padding: 40px 0;
  }

  .kk-bw2-section::before {
    width: 300px;
    height: 300px;
    left: -150px;
    top: -100px;
    filter: blur(60px);
  }

  .kk-bw2-section::after {
    width: 260px;
    height: 260px;
    right: -140px;
    bottom: -120px;
    filter: blur(55px);
  }

  .kk-bw2-heading {
    margin-bottom: 28px;
    text-align: left;
  }

  .kk-bw2-eyebrow {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  .kk-bw2-heading h2 {
    font-size: 29px;
    line-height: 1.15;
  }

  .kk-bw2-heading p {
    font-size: 13px;
    line-height: 1.6;
  }

  .kk-bw2-visual {
    min-height: 320px;
    margin-bottom: 4px;
  }

  .kk-bw2-circle-one {
    width: 290px;
    height: 290px;
  }

  .kk-bw2-circle-two {
    width: 220px;
    height: 220px;
  }

  .kk-bw2-main-card {
    width: calc(100% - 25px);
    padding: 16px;
    border-radius: 15px;
  }

  .kk-bw2-growth {
    padding: 16px 0 13px;
  }

  .kk-bw2-growth-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .kk-bw2-growth strong {
    font-size: 18px;
  }

  .kk-bw2-chart {
    height: 95px;
    gap: 6px;
  }

  .kk-bw2-card-footer {
    padding-top: 11px;
  }

  .kk-bw2-card-footer div {
    font-size: 7.5px;
  }

  .kk-bw2-floating {
    padding: 8px 10px;
    gap: 6px;
  }

  .kk-bw2-floating i {
    font-size: 14px;
  }

  .kk-bw2-floating strong {
    font-size: 9px;
  }

  .kk-bw2-floating small {
    font-size: 7px;
  }

  .kk-bw2-floating-one {
    top: 3%;
    left: 0;
  }

  .kk-bw2-floating-two {
    right: 0;
    bottom: 2%;
  }

  .kk-bw2-benefits {
    gap: 9px;
  }

  .kk-bw2-benefit {
    grid-template-columns: 28px 39px 1fr;
    gap: 9px;
    padding: 11px;
  }

  .kk-bw2-number {
    font-size: 9px;
  }

  .kk-bw2-benefit-icon {
    width: 39px;
    height: 39px;
    font-size: 16px;
  }

  .kk-bw2-benefit-content h3 {
    margin-bottom: 3px;
    font-size: 13px;
  }

  .kk-bw2-benefit-content p {
    font-size: 10.5px;
    line-height: 1.45;
  }

  .kk-bw2-cta {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 25px;
    padding: 14px;
  }

  .kk-bw2-cta-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 16px;
  }

  .kk-bw2-cta-text {
    width: calc(100% - 50px);
    flex: none;
  }

  .kk-bw2-cta-text strong {
    font-size: 12px;
  }

  .kk-bw2-cta-text span {
    font-size: 9.5px;
    line-height: 1.4;
  }

  .kk-bw2-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 11px;
  }
}

/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {
  .kk-bw2-section {
    padding: 35px 0;
  }

  .kk-bw2-heading h2 {
    font-size: 27px;
  }

  .kk-bw2-visual {
    min-height: 295px;
  }

  .kk-bw2-main-card {
    width: calc(100% - 18px);
  }

  .kk-bw2-floating {
    transform: scale(0.88);
  }

  .kk-bw2-floating-one {
    left: -5px;
  }

  .kk-bw2-floating-two {
    right: -5px;
  }
}

/* =========================================================
   NEW PROFESSIONAL BACKGROUND
   Deep Navy + Orange Glow
========================================================= */

.kk-bw2-section {
  position: relative;
  overflow: hidden;
  padding: 68px 0;
  background: #0b1220;
  isolation: isolate;
}

/* =========================================================
   PROFESSIONAL ORANGE BACKGROUND GLOW
========================================================= */

.kk-bw2-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -260px;
  left: -170px;
  border-radius: 50%;
  background: #e85d1a;
  opacity: 0.13;
  filter: blur(85px);
  animation: kkBw2OrangeMove 9s ease-in-out infinite;
  pointer-events: none;
}

.kk-bw2-section::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -180px;
  bottom: -230px;
  border-radius: 50%;
  background: #e85d1a;
  opacity: 0.1;
  filter: blur(80px);
  animation: kkBw2OrangeMoveTwo 11s ease-in-out infinite;
  pointer-events: none;
}

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

.kk-bw2-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 45px 45px;
  pointer-events: none;
  animation: kkBw2GridMove 18s linear infinite;
}

/* =========================================================
   ORANGE ORBS
========================================================= */

.kk-bw2-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: #e85d1a;
  filter: blur(8px);
  z-index: 1;
  animation: kkBw2Float 7s ease-in-out infinite;
}

.kk-bw2-orb-one {
  width: 280px;
  height: 280px;
  left: -150px;
  top: -130px;
  opacity: 0.08;
}

.kk-bw2-orb-two {
  width: 300px;
  height: 300px;
  right: -170px;
  bottom: -170px;
  opacity: 0.07;
  animation-delay: 1.5s;
}

/* =========================================================
   DARK GLASS FLOATING CARD
========================================================= */

.kk-bw2-floating {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 93, 26, 0.28);
  border-radius: 11px;
  background: rgba(11, 18, 32, 0.94);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.35),
    0 0 25px rgba(232, 93, 26, 0.07);
  animation: kkBw2Float 5s ease-in-out infinite;
}

/* =========================================================
   SOCIAL MEDIA MARKETING
   ISOLATED CSS
   PREFIX: kk-social-
========================================================= */

.kk-social-section,
.kk-social-section * {
  box-sizing: border-box;
}

.kk-social-section {
  --kk-social-orange: #e85d1a;
  --kk-social-orange-light: #fff1e9;
  --kk-social-dark: #101a2a;
  --kk-social-text: #172235;
  --kk-social-muted: #6d7889;
  --kk-social-border: #e9edf2;

  position: relative;
  width: 100%;
  padding: 68px 0 62px;
  overflow: hidden;
  background: #f8fafc;
}

.kk-social-section .container {
  position: relative;
  z-index: 2;
}

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

.kk-social-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;

  background-image:
    linear-gradient(rgba(16, 26, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 26, 42, 0.035) 1px, transparent 1px);

  background-size: 42px 42px;
}

.kk-social-orb {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
  pointer-events: none;
  animation: kkSocialOrb 9s ease-in-out infinite alternate;
}

.kk-social-orb-one {
  left: -130px;
  top: 10%;
  background: var(--kk-social-orange);
}

.kk-social-orb-two {
  right: -130px;
  bottom: 8%;
  background: #5279aa;
  animation-delay: 2s;
}

@keyframes kkSocialOrb {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(30px, 25px, 0) scale(1.12);
  }
}

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

.kk-social-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.kk-social-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--kk-social-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.kk-social-eyebrow span {
  width: 28px;
  height: 1px;
  background: var(--kk-social-orange);
}

.kk-social-head h2 {
  margin: 13px 0 12px;
  color: var(--kk-social-dark);
  font-size: clamp(34px, 4.2vw, 55px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: 850;
}

.kk-social-head h2 strong {
  color: var(--kk-social-orange);
}

.kk-social-head p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--kk-social-muted);
  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   MAIN AREA
========================================================= */

.kk-social-main {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 60px;
  margin-bottom: 62px;
}

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

.kk-social-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-social-visual-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--kk-social-orange);
  opacity: 0.11;
  filter: blur(65px);
}

/* Phone */

.kk-social-phone {
  position: relative;
  z-index: 3;
  width: 275px;
  padding: 11px;
  border: 7px solid #172235;
  border-radius: 36px;
  background: #fff;
  box-shadow:
    0 35px 70px rgba(16, 26, 42, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.7);
  animation: kkSocialPhone 5s ease-in-out infinite;
}

@keyframes kkSocialPhone {
  0%,
  100% {
    transform: translateY(0);
  }

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

.kk-social-phone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 0 0 12px 12px;
  background: #172235;
}

/* Phone top */

.kk-social-phone-top {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px 17px;
  color: #172235;
  font-size: 8px;
  font-weight: 700;
}

.kk-social-phone-top div {
  display: flex;
  gap: 5px;
}

/* Profile */

.kk-social-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 13px;
  border-bottom: 1px solid #edf0f4;
}

.kk-social-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--kk-social-orange);
  color: #fff;
  font-size: 12px;
}

.kk-social-profile strong,
.kk-social-profile span {
  display: block;
}

.kk-social-profile strong {
  color: var(--kk-social-text);
  font-size: 9px;
}

.kk-social-profile span {
  margin-top: 2px;
  color: #8993a1;
  font-size: 7px;
}

.kk-social-profile button {
  margin-left: auto;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: var(--kk-social-orange);
  color: #fff;
  font-size: 7px;
}

/* Post */

.kk-social-post {
  padding-top: 10px;
}

.kk-social-post-image {
  position: relative;
  min-height: 255px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(255, 255, 255, 0.2),
      transparent 20%
    ),
    linear-gradient(145deg, #172235, #253d5b);
  text-align: center;
}

.kk-social-post-image::before,
.kk-social-post-image::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232, 93, 26, 0.35);
}

.kk-social-post-image::before {
  width: 220px;
  height: 220px;
}

.kk-social-post-image::after {
  width: 150px;
  height: 150px;
}

.kk-social-post-circle {
  position: relative;
  z-index: 2;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--kk-social-orange);
  color: #fff;
}

.kk-social-post-image > span,
.kk-social-post-image > strong,
.kk-social-post-image > small {
  position: relative;
  z-index: 2;
}

.kk-social-post-image > span {
  margin-bottom: 6px;
  color: #f2a77e;
  font-size: 7px;
  letter-spacing: 2px;
}

.kk-social-post-image > strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.12;
}

.kk-social-post-image > small {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 7px;
}

/* Post actions */

.kk-social-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 3px 5px;
}

.kk-social-post-actions div {
  display: flex;
  gap: 11px;
}

.kk-social-post-actions i {
  color: var(--kk-social-text);
  font-size: 13px;
}

.kk-social-post-copy {
  padding: 0 3px;
}

.kk-social-post-copy strong {
  color: var(--kk-social-text);
  font-size: 8px;
}

.kk-social-post-copy p {
  margin: 4px 0 0;
  color: #7c8795;
  font-size: 7px;
  line-height: 1.5;
}

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

.kk-social-float {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 35px rgba(16, 26, 42, 0.12);
  backdrop-filter: blur(10px);
}

.kk-social-float strong,
.kk-social-float span {
  display: block;
}

.kk-social-float strong {
  color: var(--kk-social-text);
  font-size: 9px;
}

.kk-social-float span {
  margin-top: 3px;
  color: #8993a0;
  font-size: 7px;
}

.kk-social-float b {
  color: #22a06b;
  font-size: 9px;
}

.kk-social-float-one {
  top: 23%;
  right: -25px;
  animation: kkSocialFloatOne 4s ease-in-out infinite;
}

.kk-social-float-two {
  left: -25px;
  bottom: 20%;
  animation: kkSocialFloatTwo 4.5s ease-in-out infinite;
}

@keyframes kkSocialFloatOne {
  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes kkSocialFloatTwo {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

.kk-social-float-icon,
.kk-social-message-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  border-radius: 9px;
  background: var(--kk-social-orange-light);
  color: var(--kk-social-orange);
  font-size: 12px;
}

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

.kk-social-content {
  max-width: 590px;
}

.kk-social-mini-label {
  color: var(--kk-social-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-social-content h3 {
  margin: 10px 0 12px;
  color: var(--kk-social-dark);
  font-size: clamp(30px, 3.5vw, 45px);
  line-height: 1.08;
  letter-spacing: -1.3px;
  font-weight: 850;
}

.kk-social-content h3 span {
  display: block;
  color: var(--kk-social-orange);
}

.kk-social-description {
  margin: 0 0 24px;
  color: var(--kk-social-muted);
  font-size: 13px;
  line-height: 1.75;
}

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

.kk-social-points {
  display: grid;
  gap: 9px;
}

.kk-social-point {
  display: grid;
  grid-template-columns: 42px 1fr 25px;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--kk-social-border);
  border-radius: 13px;
  background: #fff;
  transition: 0.3s ease;
}

.kk-social-point:hover {
  transform: translateX(5px);
  border-color: rgba(232, 93, 26, 0.25);
  box-shadow: 0 12px 30px rgba(16, 26, 42, 0.07);
}

.kk-social-point-number {
  color: var(--kk-social-orange);
  font-size: 10px;
  font-weight: 900;
}

.kk-social-point h4 {
  margin: 0 0 4px;
  color: var(--kk-social-text);
  font-size: 12px;
  font-weight: 800;
}

.kk-social-point p {
  margin: 0;
  color: #7a8492;
  font-size: 9px;
  line-height: 1.55;
}

.kk-social-point > i {
  color: #a0a9b5;
  font-size: 12px;
  transition: 0.3s ease;
}

.kk-social-point:hover > i {
  color: var(--kk-social-orange);
  transform: translate(2px, -2px);
}

/* =========================================================
   PLATFORM SECTION
========================================================= */

.kk-social-platform-section {
  padding: 25px 0 0;
  margin-bottom: 30px;
  border-top: 1px solid var(--kk-social-border);
}

.kk-social-platform-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}

.kk-social-platform-title > span {
  color: var(--kk-social-orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.kk-social-platform-title h3 {
  margin: 0;
  color: var(--kk-social-dark);
  font-size: 21px;
  font-weight: 800;
}

.kk-social-platform-title h3 strong {
  color: var(--kk-social-orange);
}

/* Platforms */

.kk-social-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.kk-social-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--kk-social-border);
  border-radius: 13px;
  background: #fff;
  transition: 0.3s ease;
}

.kk-social-platform:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 93, 26, 0.22);
  box-shadow: 0 12px 25px rgba(16, 26, 42, 0.06);
}

.kk-social-platform-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  border-radius: 11px;
  background: var(--kk-social-orange-light);
  color: var(--kk-social-orange);
  font-size: 17px;
}

.kk-social-platform strong,
.kk-social-platform span {
  display: block;
}

.kk-social-platform strong {
  color: var(--kk-social-text);
  font-size: 10px;
}

.kk-social-platform span {
  margin-top: 3px;
  color: #8a94a1;
  font-size: 7px;
}

.kk-social-platform > i {
  margin-left: auto;
  color: #a1aab6;
  font-size: 10px;
}

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

.kk-social-highlight {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 21px 24px;
  border-radius: 17px;
  background: var(--kk-social-dark);
  box-shadow: 0 18px 40px rgba(16, 26, 42, 0.12);
}

.kk-social-highlight-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 285px;
}

.kk-social-highlight-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  border-radius: 12px;
  background: var(--kk-social-orange);
  color: #fff;
  font-size: 17px;
}

.kk-social-highlight-left span {
  color: #f08b59;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.kk-social-highlight-left h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.15;
}

.kk-social-highlight-left h3 strong {
  color: var(--kk-social-orange);
}

.kk-social-highlight-text {
  flex: 1;
}

.kk-social-highlight-text p {
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  line-height: 1.6;
}

.kk-social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 9px;
  background: #fff;
  color: var(--kk-social-dark) !important;
  text-decoration: none !important;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  transition: 0.3s ease;
}

.kk-social-button:hover {
  background: var(--kk-social-orange);
  color: #fff !important;
  transform: translateY(-2px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {
  .kk-social-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kk-social-visual {
    min-height: 500px;
  }

  .kk-social-content {
    max-width: 100%;
  }

  .kk-social-platform-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

@media (max-width: 767px) {
  .kk-social-section {
    padding: 52px 0 48px;
    overflow-x: hidden;
  }

  .kk-social-head {
    margin-bottom: 32px;
  }

  .kk-social-eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }

  .kk-social-eyebrow span {
    width: 18px;
  }

  .kk-social-head h2 {
    margin-top: 11px;
    font-size: 34px;
    letter-spacing: -1px;
  }

  .kk-social-head p {
    font-size: 12px;
    line-height: 1.65;
  }

  .kk-social-main {
    gap: 15px;
    margin-bottom: 45px;
  }

  .kk-social-visual {
    min-height: 450px;
  }

  .kk-social-phone {
    width: 245px;
  }

  .kk-social-post-image {
    min-height: 225px;
  }

  .kk-social-float-one {
    right: -5px;
  }

  .kk-social-float-two {
    left: -5px;
  }

  .kk-social-content h3 {
    font-size: 32px;
  }

  .kk-social-description {
    font-size: 12px;
    margin-bottom: 18px;
  }

  .kk-social-point {
    grid-template-columns: 32px 1fr 20px;
    gap: 8px;
    padding: 12px;
  }

  .kk-social-point h4 {
    font-size: 11px;
  }

  .kk-social-point p {
    font-size: 8px;
  }

  .kk-social-platform-section {
    padding-top: 21px;
  }

  .kk-social-platform-title {
    display: block;
    margin-bottom: 14px;
  }

  .kk-social-platform-title h3 {
    margin-top: 6px;
    font-size: 20px;
  }

  .kk-social-platform-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kk-social-highlight {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    padding: 19px;
  }

  .kk-social-highlight-left {
    min-width: 100%;
  }

  .kk-social-highlight-text {
    width: 100%;
    flex: auto;
  }

  .kk-social-highlight-text p {
    max-width: 100%;
  }

  .kk-social-button {
    width: 100%;
  }
}

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

@media (max-width: 480px) {
  .kk-social-section {
    padding: 45px 0;
  }

  .kk-social-head h2 {
    font-size: 30px;
  }

  .kk-social-visual {
    min-height: 405px;
  }

  .kk-social-phone {
    width: 220px;
    border-width: 6px;
    border-radius: 30px;
  }

  .kk-social-post-image {
    min-height: 195px;
  }

  .kk-social-post-image > strong {
    font-size: 14px;
  }

  .kk-social-float {
    padding: 8px 9px;
  }

  .kk-social-float-one {
    right: 0;
  }

  .kk-social-float-two {
    left: 0;
  }

  .kk-social-float-icon,
  .kk-social-message-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    font-size: 10px;
  }

  .kk-social-float strong {
    font-size: 8px;
  }

  .kk-social-float span {
    font-size: 6px;
  }

  .kk-social-platform-grid {
    grid-template-columns: 1fr;
  }

  .kk-social-highlight-left h3 {
    font-size: 18px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-social-orb,
  .kk-social-phone,
  .kk-social-float {
    animation: none !important;
  }

  .kk-social-point,
  .kk-social-platform,
  .kk-social-button {
    transition: none !important;
  }
}

/* =========================================================
   KAUSHAL KUMAR - GRAPHIC DESIGN SERVICES
   ISOLATED CSS
   Prefix: kk-gdesign-
========================================================= */

.kk-gdesign-section,
.kk-gdesign-section * {
  box-sizing: border-box;
}

.kk-gdesign-section {
  --kk-gdesign-orange: #e85d1a;
  --kk-gdesign-orange-dark: #bd4310;
  --kk-gdesign-dark: #10131a;
  --kk-gdesign-dark-two: #171b24;
  --kk-gdesign-text: #252a33;
  --kk-gdesign-muted: #707783;
  --kk-gdesign-border: rgba(16, 19, 26, 0.09);

  position: relative;
  width: 100%;
  padding: 82px 0 70px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 15%, rgba(232, 93, 26, 0.08), transparent 28%),
    radial-gradient(
      circle at 92% 75%,
      rgba(232, 93, 26, 0.07),
      transparent 28%
    ),
    #ffffff;
}

.kk-gdesign-section .container {
  position: relative;
  z-index: 5;
}

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

.kk-gdesign-grid {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 19, 26, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 19, 26, 0.035) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
}

.kk-gdesign-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  animation: kkGdesignFloat 7s ease-in-out infinite;
}

.kk-gdesign-orb-one {
  width: 220px;
  height: 220px;
  top: 90px;
  left: -130px;
  background: rgba(232, 93, 26, 0.1);
}

.kk-gdesign-orb-two {
  width: 280px;
  height: 280px;
  right: -170px;
  bottom: 220px;
  background: rgba(232, 93, 26, 0.08);
  animation-delay: -3s;
}

@keyframes kkGdesignFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -18px, 0);
  }
}

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

.kk-gdesign-heading {
  max-width: 850px;
  margin: 0 auto 48px;
  text-align: center;
}

.kk-gdesign-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--kk-gdesign-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-gdesign-label-line {
  width: 38px;
  height: 2px;
  display: inline-block;
  background: var(--kk-gdesign-orange);
}

.kk-gdesign-label i {
  font-size: 16px;
}

.kk-gdesign-heading h2 {
  margin: 0;
  color: var(--kk-gdesign-dark);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.8px;
}

.kk-gdesign-heading h2 span {
  display: inline-block;
  color: var(--kk-gdesign-orange);
}

.kk-gdesign-heading p {
  max-width: 700px;
  margin: 18px auto 0;
  color: var(--kk-gdesign-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* =========================
   MAIN AREA
========================= */

.kk-gdesign-main {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 70px;
}

/* =========================
   DESIGN VISUAL
========================= */

.kk-gdesign-visual {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-gdesign-visual-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.12);
  filter: blur(55px);
  animation: kkGdesignGlow 5s ease-in-out infinite;
}

@keyframes kkGdesignGlow {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* =========================
   FLOATING ICONS
========================= */

.kk-gdesign-floating {
  position: absolute;
  z-index: 6;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #ffffff;
  background: var(--kk-gdesign-orange);
  box-shadow: 0 18px 35px rgba(232, 93, 26, 0.25);
  font-size: 23px;
  animation: kkGdesignFloatCard 4s ease-in-out infinite;
}

.kk-gdesign-floating-one {
  top: 42px;
  left: 5%;
}

.kk-gdesign-floating-two {
  right: 4%;
  bottom: 42px;
  animation-delay: -2s;
}

@keyframes kkGdesignFloatCard {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}

/* =========================
   DESIGN BOARD
========================= */

.kk-gdesign-board {
  position: relative;
  width: min(100%, 470px);
  padding: 12px;
  border-radius: 22px;
  background: #0d1016;
  box-shadow:
    0 30px 70px rgba(10, 12, 17, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  transform: rotate(-2deg);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.kk-gdesign-board:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow:
    0 38px 80px rgba(10, 12, 17, 0.3),
    0 0 0 1px rgba(232, 93, 26, 0.25);
}

.kk-gdesign-board-top {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
}

.kk-gdesign-dots {
  display: flex;
  gap: 6px;
}

.kk-gdesign-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.25;
}

.kk-gdesign-board-title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.kk-gdesign-canvas {
  position: relative;
  min-height: 330px;
  padding: 42px 35px 25px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(232, 93, 26, 0.1), transparent 55%), #f7f7f6;
}

.kk-gdesign-canvas-small {
  position: relative;
  z-index: 3;
  color: var(--kk-gdesign-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
}

.kk-gdesign-canvas-title {
  position: relative;
  z-index: 3;
  max-width: 300px;
  margin-top: 24px;
  color: #171a20;
  font-size: 35px;
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.kk-gdesign-canvas-title strong {
  display: block;
  color: var(--kk-gdesign-orange);
}

.kk-gdesign-canvas-shape {
  position: absolute;
  transform: rotate(18deg);
}

.kk-gdesign-shape-one {
  width: 145px;
  height: 145px;
  right: -45px;
  top: -35px;
  border-radius: 30px;
  background: var(--kk-gdesign-orange);
  opacity: 0.9;
}

.kk-gdesign-shape-two {
  width: 100px;
  height: 100px;
  right: 55px;
  bottom: -45px;
  border: 18px solid #171a20;
  border-radius: 50%;
  opacity: 0.9;
}

.kk-gdesign-canvas-circle {
  position: absolute;
  right: 92px;
  top: 90px;
  width: 90px;
  height: 90px;
  border: 2px solid rgba(23, 26, 32, 0.16);
  border-radius: 50%;
}

.kk-gdesign-canvas-footer {
  position: absolute;
  z-index: 4;
  left: 35px;
  right: 35px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  color: rgba(23, 26, 32, 0.48);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.kk-gdesign-tools {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kk-gdesign-tools span {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.kk-gdesign-tools .kk-gdesign-tool-active {
  color: #ffffff;
  background: var(--kk-gdesign-orange);
}

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

.kk-gdesign-content-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: var(--kk-gdesign-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-gdesign-content-label span {
  width: 28px;
  height: 2px;
  background: var(--kk-gdesign-orange);
}

.kk-gdesign-content h3 {
  margin: 0;
  color: var(--kk-gdesign-dark);
  font-size: clamp(31px, 3.5vw, 47px);
  line-height: 1.12;
  letter-spacing: -1.4px;
  font-weight: 800;
}

.kk-gdesign-content h3 span {
  color: var(--kk-gdesign-orange);
}

.kk-gdesign-content-text {
  max-width: 650px;
  margin: 17px 0 25px;
  color: var(--kk-gdesign-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* =========================
   FEATURES
========================= */

.kk-gdesign-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

.kk-gdesign-feature {
  display: flex;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--kk-gdesign-border);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-gdesign-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 93, 26, 0.3);
  box-shadow: 0 16px 35px rgba(20, 24, 30, 0.07);
}

.kk-gdesign-feature-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--kk-gdesign-orange);
  background: rgba(232, 93, 26, 0.1);
  font-size: 19px;
}

.kk-gdesign-feature h4 {
  margin: 1px 0 5px;
  color: var(--kk-gdesign-dark);
  font-size: 14px;
  font-weight: 800;
}

.kk-gdesign-feature p {
  margin: 0;
  color: var(--kk-gdesign-muted);
  font-size: 12px;
  line-height: 1.55;
}

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

.kk-gdesign-services-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}

.kk-gdesign-services-heading > div > span {
  display: block;
  margin-bottom: 7px;
  color: var(--kk-gdesign-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-gdesign-services-heading h3 {
  margin: 0;
  color: var(--kk-gdesign-dark);
  font-size: 30px;
  font-weight: 800;
}

.kk-gdesign-services-heading p {
  max-width: 390px;
  margin: 0;
  color: var(--kk-gdesign-muted);
  font-size: 13px;
  line-height: 1.65;
}

/* =========================
   SERVICE CARDS
========================= */

.kk-gdesign-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 70px;
}

.kk-gdesign-service-card {
  position: relative;
  min-height: 245px;
  padding: 27px 25px;
  overflow: hidden;
  border: 1px solid var(--kk-gdesign-border);
  border-radius: 19px;
  background: #ffffff;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kk-gdesign-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--kk-gdesign-orange);
  transition: width 0.4s ease;
}

.kk-gdesign-service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(232, 93, 26, 0.25);
  box-shadow: 0 22px 45px rgba(20, 24, 30, 0.09);
}

.kk-gdesign-service-card:hover::before {
  width: 100%;
}

.kk-gdesign-service-number {
  position: absolute;
  top: 21px;
  right: 23px;
  color: rgba(16, 19, 26, 0.08);
  font-size: 28px;
  font-weight: 900;
}

.kk-gdesign-service-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  border-radius: 14px;
  color: #ffffff;
  background: var(--kk-gdesign-orange);
  box-shadow: 0 12px 25px rgba(232, 93, 26, 0.18);
  font-size: 21px;
}

.kk-gdesign-service-card h4 {
  margin: 0 0 9px;
  color: var(--kk-gdesign-dark);
  font-size: 17px;
  font-weight: 800;
}

.kk-gdesign-service-card p {
  max-width: 310px;
  margin: 0;
  color: var(--kk-gdesign-muted);
  font-size: 13px;
  line-height: 1.7;
}

.kk-gdesign-service-arrow {
  position: absolute;
  right: 23px;
  bottom: 22px;
  color: var(--kk-gdesign-orange);
  font-size: 17px;
  transition: transform 0.3s ease;
}

.kk-gdesign-service-card:hover .kk-gdesign-service-arrow {
  transform: translate(4px, -4px);
}

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

.kk-gdesign-process {
  position: relative;
  padding: 45px;
  margin-bottom: 55px;
  overflow: hidden;
  border-radius: 25px;
  background: var(--kk-gdesign-dark);
}

.kk-gdesign-process::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  top: -160px;
  right: -90px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.16);
  filter: blur(15px);
}

.kk-gdesign-process-head {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

.kk-gdesign-process-head .kk-gdesign-label {
  margin-bottom: 11px;
}

.kk-gdesign-process-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 800;
}

.kk-gdesign-process-head h3 span {
  color: var(--kk-gdesign-orange);
}

.kk-gdesign-process-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kk-gdesign-process-item {
  position: relative;
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.kk-gdesign-process-item:hover {
  transform: translateY(-5px);
  background: rgba(232, 93, 26, 0.09);
}

.kk-gdesign-process-item > span {
  position: absolute;
  top: 17px;
  right: 18px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 20px;
  font-weight: 900;
}

.kk-gdesign-process-item > i {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 12px;
  color: var(--kk-gdesign-orange);
  background: rgba(232, 93, 26, 0.12);
  font-size: 19px;
}

.kk-gdesign-process-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.kk-gdesign-process-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.6;
}

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

.kk-gdesign-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 32px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(110deg, #e85d1a, #d84f10);
  box-shadow: 0 20px 45px rgba(232, 93, 26, 0.16);
}

.kk-gdesign-cta-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    linear-gradient(45deg, transparent 45%, #ffffff 46%, transparent 47%),
    linear-gradient(-45deg, transparent 45%, #ffffff 46%, transparent 47%);
  background-size: 30px 30px;
  pointer-events: none;
}

.kk-gdesign-cta-icon {
  position: relative;
  z-index: 2;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--kk-gdesign-orange);
  background: #ffffff;
  font-size: 24px;
}

.kk-gdesign-cta-content {
  position: relative;
  z-index: 2;
  flex: 1;
}

.kk-gdesign-cta-content > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.kk-gdesign-cta-content h3 {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 25px;
  font-weight: 800;
}

.kk-gdesign-cta-content h3 strong {
  color: #ffffff;
}

.kk-gdesign-cta-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.kk-gdesign-cta-btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 19px;
  border-radius: 10px;
  color: #171a20;
  background: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-gdesign-cta-btn:hover {
  color: #171a20;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {
  .kk-gdesign-section {
    padding: 70px 0 60px;
  }

  .kk-gdesign-main {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .kk-gdesign-visual {
    min-height: 430px;
  }

  .kk-gdesign-content {
    max-width: 850px;
    margin: 0 auto;
  }

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

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

/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {
  .kk-gdesign-section {
    padding: 55px 0 45px;
  }

  .kk-gdesign-heading {
    margin-bottom: 38px;
  }

  .kk-gdesign-heading h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .kk-gdesign-heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .kk-gdesign-main {
    gap: 28px;
    margin-bottom: 52px;
  }

  .kk-gdesign-visual {
    min-height: 365px;
  }

  .kk-gdesign-board {
    width: 92%;
  }

  .kk-gdesign-canvas {
    min-height: 260px;
    padding: 32px 24px 20px;
  }

  .kk-gdesign-canvas-title {
    font-size: 27px;
  }

  .kk-gdesign-canvas-footer {
    left: 24px;
    right: 24px;
  }

  .kk-gdesign-floating {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 18px;
  }

  .kk-gdesign-floating-one {
    top: 15px;
    left: 0;
  }

  .kk-gdesign-floating-two {
    right: 0;
    bottom: 20px;
  }

  .kk-gdesign-content h3 {
    font-size: 32px;
  }

  .kk-gdesign-features {
    grid-template-columns: 1fr;
  }

  .kk-gdesign-services-heading {
    display: block;
    margin-bottom: 20px;
  }

  .kk-gdesign-services-heading h3 {
    font-size: 27px;
  }

  .kk-gdesign-services-heading p {
    margin-top: 10px;
  }

  .kk-gdesign-services-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-bottom: 52px;
  }

  .kk-gdesign-service-card {
    min-height: 220px;
  }

  .kk-gdesign-process {
    padding: 30px 20px;
    margin-bottom: 40px;
    border-radius: 20px;
  }

  .kk-gdesign-process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kk-gdesign-process-item {
    padding: 19px 15px;
  }

  .kk-gdesign-cta {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 23px;
    gap: 15px;
  }

  .kk-gdesign-cta-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .kk-gdesign-cta-content {
    flex: 1 1 calc(100% - 70px);
  }

  .kk-gdesign-cta-content h3 {
    font-size: 21px;
  }

  .kk-gdesign-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kk-gdesign-section {
    padding: 45px 0 38px;
  }

  .kk-gdesign-heading h2 {
    font-size: 29px;
  }

  .kk-gdesign-label {
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  .kk-gdesign-label-line {
    width: 25px;
  }

  .kk-gdesign-visual {
    min-height: 300px;
  }

  .kk-gdesign-board {
    padding: 8px;
    border-radius: 16px;
  }

  .kk-gdesign-board-top {
    height: 30px;
  }

  .kk-gdesign-canvas {
    min-height: 220px;
    padding: 25px 18px 15px;
  }

  .kk-gdesign-canvas-title {
    max-width: 210px;
    font-size: 22px;
  }

  .kk-gdesign-canvas-small {
    font-size: 8px;
  }

  .kk-gdesign-canvas-circle {
    right: 50px;
    top: 72px;
    width: 65px;
    height: 65px;
  }

  .kk-gdesign-shape-one {
    width: 100px;
    height: 100px;
  }

  .kk-gdesign-canvas-footer {
    left: 18px;
    right: 18px;
    bottom: 14px;
    font-size: 7px;
  }

  .kk-gdesign-tools {
    height: 38px;
  }

  .kk-gdesign-tools span {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .kk-gdesign-content h3 {
    font-size: 28px;
  }

  .kk-gdesign-feature {
    padding: 14px;
  }

  .kk-gdesign-service-card {
    padding: 23px 20px;
  }

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

  .kk-gdesign-process-head h3 {
    font-size: 27px;
  }

  .kk-gdesign-cta {
    padding: 20px;
  }

  .kk-gdesign-cta-content {
    flex-basis: calc(100% - 65px);
  }

  .kk-gdesign-cta-content h3 {
    font-size: 19px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-gdesign-orb,
  .kk-gdesign-visual-glow,
  .kk-gdesign-floating {
    animation: none;
  }

  .kk-gdesign-board,
  .kk-gdesign-feature,
  .kk-gdesign-service-card,
  .kk-gdesign-process-item,
  .kk-gdesign-cta-btn {
    transition: none;
  }
}

/* =========================================================
   KAUSHAL KUMAR - DIGITAL GROWTH SOLUTIONS
   ISOLATED CSS ONLY
   Prefix: kk-growth-
========================================================= */

.kk-growth-section,
.kk-growth-section * {
  box-sizing: border-box;
}

.kk-growth-section {
  --kk-growth-orange: #e85d1a;
  --kk-growth-orange-dark: #c94b10;
  --kk-growth-dark: #10141c;
  --kk-growth-text: #252a33;
  --kk-growth-muted: #707783;
  --kk-growth-border: rgba(16, 20, 28, 0.09);

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 78px 0 70px;
  background:
    radial-gradient(circle at 7% 12%, rgba(232, 93, 26, 0.08), transparent 27%),
    radial-gradient(
      circle at 94% 72%,
      rgba(232, 93, 26, 0.07),
      transparent 28%
    ),
    #ffffff;
}

.kk-growth-section .container {
  position: relative;
  z-index: 3;
}

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

.kk-growth-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;

  background-image:
    linear-gradient(rgba(16, 20, 28, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 20, 28, 0.035) 1px, transparent 1px);

  background-size: 44px 44px;

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

.kk-growth-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  animation: kkGrowthFloat 8s ease-in-out infinite;
}

.kk-growth-glow-one {
  width: 240px;
  height: 240px;
  left: -130px;
  top: 170px;
  background: rgba(232, 93, 26, 0.1);
}

.kk-growth-glow-two {
  width: 300px;
  height: 300px;
  right: -170px;
  bottom: 250px;
  background: rgba(232, 93, 26, 0.08);
  animation-delay: -3s;
}

@keyframes kkGrowthFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -18px, 0);
  }
}

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

.kk-growth-heading {
  max-width: 850px;
  margin: 0 auto 52px;
  text-align: center;
}

.kk-growth-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: var(--kk-growth-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-growth-label span:first-child {
  width: 35px;
  height: 2px;
  background: var(--kk-growth-orange);
}

.kk-growth-label i {
  font-size: 16px;
}

.kk-growth-heading h2 {
  margin: 0;
  color: var(--kk-growth-dark);
  font-size: clamp(34px, 4.2vw, 55px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: 800;
}

.kk-growth-heading h2 span {
  display: inline-block;
  color: var(--kk-growth-orange);
}

.kk-growth-heading p {
  max-width: 690px;
  margin: 18px auto 0;
  color: var(--kk-growth-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* =========================================================
   MAIN SECTION
========================================================= */

.kk-growth-main {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 65px;
  margin-bottom: 70px;
}

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

.kk-growth-mini-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: var(--kk-growth-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.kk-growth-mini-title i {
  font-size: 14px;
}

.kk-growth-content h3 {
  max-width: 650px;
  margin: 0;
  color: var(--kk-growth-dark);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-weight: 800;
}

.kk-growth-content h3 span {
  color: var(--kk-growth-orange);
}

.kk-growth-description {
  max-width: 620px;
  margin: 18px 0 26px;
  color: var(--kk-growth-muted);
  font-size: 15px;
  line-height: 1.75;
}

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

.kk-growth-points {
  display: grid;
  gap: 12px;
}

.kk-growth-point {
  display: flex;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--kk-growth-border);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.kk-growth-point:hover {
  transform: translateX(5px);
  border-color: rgba(232, 93, 26, 0.28);
  box-shadow: 0 14px 30px rgba(16, 20, 28, 0.07);
}

.kk-growth-point-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--kk-growth-orange);
  background: rgba(232, 93, 26, 0.1);
  font-size: 18px;
}

.kk-growth-point h4 {
  margin: 1px 0 4px;
  color: var(--kk-growth-dark);
  font-size: 14px;
  font-weight: 800;
}

.kk-growth-point p {
  margin: 0;
  color: var(--kk-growth-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* =========================================================
   DASHBOARD
========================================================= */

.kk-growth-dashboard-wrap {
  position: relative;
  min-height: 475px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-growth-dashboard {
  position: relative;
  width: min(100%, 490px);
  padding: 23px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #171b24, #0d1016);
  box-shadow:
    0 30px 70px rgba(10, 13, 18, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: rotate(1.5deg);
  transition: transform 0.4s ease;
}

.kk-growth-dashboard:hover {
  transform: rotate(0deg) translateY(-5px);
}

.kk-growth-dashboard::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -100px;
  top: -100px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.18);
  filter: blur(25px);
}

/* Dashboard Header */

.kk-growth-dashboard-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kk-growth-dashboard-header span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.kk-growth-dashboard-header strong {
  color: #ffffff;
  font-size: 15px;
}

.kk-growth-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  font-size: 9px;
}

.kk-growth-status i {
  color: var(--kk-growth-orange);
  font-size: 6px;
}

/* Main Number */

.kk-growth-dashboard-number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 0 14px;
}

.kk-growth-dashboard-number small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
  letter-spacing: 1.5px;
}

.kk-growth-dashboard-number strong {
  display: block;
  color: #ffffff;
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
}

.kk-growth-up {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #ffffff;
  background: var(--kk-growth-orange);
  font-size: 18px;
}

/* Chart */

.kk-growth-chart {
  position: relative;
  height: 155px;
  margin: 5px 0 20px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size:
    100% 38px,
    55px 100%;
}

.kk-growth-chart-line {
  position: absolute;
  left: 0;
  bottom: 34px;
  width: 100%;
  height: 90px;
  clip-path: polygon(
    0 76%,
    15% 65%,
    28% 70%,
    40% 45%,
    52% 57%,
    66% 28%,
    78% 39%,
    90% 12%,
    100% 20%,
    100% 24%,
    90% 16%,
    78% 44%,
    66% 33%,
    52% 63%,
    40% 51%,
    28% 76%,
    15% 71%,
    0 82%
  );
  background: rgba(232, 93, 26, 0.9);
  animation: kkGrowthChartPulse 4s ease-in-out infinite;
}

@keyframes kkGrowthChartPulse {
  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

.kk-growth-chart-point {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border: 2px solid #171b24;
  border-radius: 50%;
  background: var(--kk-growth-orange);
}

.kk-growth-chart-point.p1 {
  left: 14%;
  bottom: 94px;
}

.kk-growth-chart-point.p2 {
  left: 28%;
  bottom: 88px;
}

.kk-growth-chart-point.p3 {
  left: 40%;
  bottom: 112px;
}

.kk-growth-chart-point.p4 {
  left: 52%;
  bottom: 99px;
}

.kk-growth-chart-point.p5 {
  left: 66%;
  bottom: 129px;
}

.kk-growth-chart-point.p6 {
  right: 8%;
  bottom: 137px;
}

.kk-growth-chart-months {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
}

/* Stats */

.kk-growth-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.kk-growth-stat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.kk-growth-stat-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--kk-growth-orange);
  background: rgba(232, 93, 26, 0.1);
  font-size: 13px;
}

.kk-growth-stat span {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 8px;
}

.kk-growth-stat strong {
  color: #ffffff;
  font-size: 13px;
}

/* Floating Card */

.kk-growth-floating-card {
  position: absolute;
  right: -12px;
  bottom: 42px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(20, 24, 32, 0.96);
  box-shadow: 0 18px 35px rgba(10, 13, 18, 0.22);
  animation: kkGrowthFloatCard 4s ease-in-out infinite;
}

@keyframes kkGrowthFloatCard {
  0%,
  100% {
    transform: translateY(0);
  }

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

.kk-growth-floating-icon {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ffffff;
  background: var(--kk-growth-orange);
}

.kk-growth-floating-card small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 7px;
  letter-spacing: 1px;
}

.kk-growth-floating-card strong {
  display: block;
  color: #ffffff;
  font-size: 11px;
}

/* =========================================================
   SOLUTIONS
========================================================= */

.kk-growth-solutions {
  margin-bottom: 65px;
}

.kk-growth-solutions-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 25px;
}

.kk-growth-solutions-heading > div > span {
  display: block;
  margin-bottom: 7px;
  color: var(--kk-growth-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.kk-growth-solutions-heading h3 {
  margin: 0;
  color: var(--kk-growth-dark);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
}

.kk-growth-solutions-heading h3 strong {
  color: var(--kk-growth-orange);
}

.kk-growth-solutions-heading p {
  max-width: 390px;
  margin: 0;
  color: var(--kk-growth-muted);
  font-size: 13px;
  line-height: 1.65;
}

/* Cards */

.kk-growth-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.kk-growth-card {
  position: relative;
  min-height: 235px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--kk-growth-border);
  border-radius: 18px;
  background: #ffffff;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kk-growth-card:hover {
  transform: translateY(-7px);
  border-color: rgba(232, 93, 26, 0.25);
  box-shadow: 0 22px 45px rgba(16, 20, 28, 0.09);
}

.kk-growth-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 19px;
}

.kk-growth-card-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #ffffff;
  background: var(--kk-growth-orange);
  box-shadow: 0 10px 24px rgba(232, 93, 26, 0.18);
  font-size: 19px;
}

.kk-growth-card-top > span {
  color: rgba(16, 20, 28, 0.1);
  font-size: 25px;
  font-weight: 900;
}

.kk-growth-card h4 {
  margin: 0 0 9px;
  color: var(--kk-growth-dark);
  font-size: 17px;
  font-weight: 800;
}

.kk-growth-card p {
  max-width: 320px;
  margin: 0;
  color: var(--kk-growth-muted);
  font-size: 12px;
  line-height: 1.7;
}

.kk-growth-card-line {
  position: absolute;
  left: 24px;
  bottom: 20px;
  width: 35px;
  height: 2px;
  background: var(--kk-growth-orange);
  transition: width 0.3s ease;
}

.kk-growth-card:hover .kk-growth-card-line {
  width: 75px;
}

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

.kk-growth-journey {
  position: relative;
  padding: 43px;
  margin-bottom: 55px;
  overflow: hidden;
  border-radius: 25px;
  background: var(--kk-growth-dark);
}

.kk-growth-journey::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -160px;
  top: -170px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.14);
  filter: blur(20px);
}

.kk-growth-journey-heading {
  position: relative;
  z-index: 2;
  margin-bottom: 34px;
}

.kk-growth-journey-heading .kk-growth-label {
  margin-bottom: 10px;
}

.kk-growth-journey-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 39px);
  font-weight: 800;
}

.kk-growth-journey-heading h3 span {
  color: var(--kk-growth-orange);
}

.kk-growth-journey-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}

.kk-growth-journey-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 195px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.kk-growth-step {
  position: relative;
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.kk-growth-step:hover {
  transform: translateY(-5px);
  background: rgba(232, 93, 26, 0.08);
}

.kk-growth-step-number {
  position: absolute;
  top: 16px;
  right: 17px;
  color: rgba(255, 255, 255, 0.16);
  font-size: 19px;
  font-weight: 900;
}

.kk-growth-step-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 12px;
  color: var(--kk-growth-orange);
  background: rgba(232, 93, 26, 0.12);
  font-size: 18px;
}

.kk-growth-step h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.kk-growth-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  line-height: 1.65;
}

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

.kk-growth-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 27px 30px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(110deg, #e85d1a, #d34e10);
  box-shadow: 0 20px 45px rgba(232, 93, 26, 0.15);
}

.kk-growth-cta-shape {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -100px;
  top: -110px;
  border: 35px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.kk-growth-cta-icon {
  position: relative;
  z-index: 2;
  flex: 0 0 57px;
  width: 57px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: var(--kk-growth-orange);
  background: #ffffff;
  font-size: 22px;
}

.kk-growth-cta-content {
  position: relative;
  z-index: 2;
  flex: 1;
}

.kk-growth-cta-content > span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.kk-growth-cta-content h3 {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
}

.kk-growth-cta-content h3 strong {
  color: #ffffff;
}

.kk-growth-cta-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.5;
}

.kk-growth-cta-button {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 19px;
  border-radius: 10px;
  color: #171a20;
  background: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-growth-cta-button:hover {
  color: #171a20;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .kk-growth-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .kk-growth-content {
    max-width: 850px;
    margin: auto;
  }

  .kk-growth-dashboard-wrap {
    max-width: 650px;
    width: 100%;
    margin: auto;
  }

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

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

  .kk-growth-journey-line {
    display: none;
  }
}

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

@media (max-width: 767px) {
  .kk-growth-section {
    padding: 55px 0 45px;
  }

  .kk-growth-heading {
    margin-bottom: 38px;
  }

  .kk-growth-heading h2 {
    font-size: 33px;
    letter-spacing: -1px;
  }

  .kk-growth-heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .kk-growth-main {
    gap: 30px;
    margin-bottom: 55px;
  }

  .kk-growth-content h3 {
    font-size: 31px;
  }

  .kk-growth-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .kk-growth-dashboard-wrap {
    min-height: 400px;
  }

  .kk-growth-dashboard {
    width: 94%;
    padding: 18px;
    border-radius: 20px;
  }

  .kk-growth-dashboard-number strong {
    font-size: 30px;
  }

  .kk-growth-chart {
    height: 135px;
  }

  .kk-growth-chart-point.p1 {
    bottom: 79px;
  }

  .kk-growth-chart-point.p2 {
    bottom: 73px;
  }

  .kk-growth-chart-point.p3 {
    bottom: 96px;
  }

  .kk-growth-chart-point.p4 {
    bottom: 84px;
  }

  .kk-growth-chart-point.p5 {
    bottom: 111px;
  }

  .kk-growth-chart-point.p6 {
    bottom: 119px;
  }

  .kk-growth-floating-card {
    right: 0;
    bottom: 12px;
  }

  .kk-growth-solutions {
    margin-bottom: 50px;
  }

  .kk-growth-solutions-heading {
    display: block;
  }

  .kk-growth-solutions-heading h3 {
    font-size: 27px;
  }

  .kk-growth-solutions-heading p {
    margin-top: 10px;
  }

  .kk-growth-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kk-growth-card {
    min-height: 215px;
  }

  .kk-growth-journey {
    padding: 30px 20px;
    margin-bottom: 40px;
    border-radius: 20px;
  }

  .kk-growth-journey-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kk-growth-step {
    padding: 18px 14px;
  }

  .kk-growth-cta {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 22px;
    gap: 14px;
  }

  .kk-growth-cta-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .kk-growth-cta-content {
    flex: 1 1 calc(100% - 65px);
  }

  .kk-growth-cta-content h3 {
    font-size: 20px;
  }

  .kk-growth-cta-button {
    width: 100%;
  }
}

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

@media (max-width: 480px) {
  .kk-growth-section {
    padding: 45px 0 38px;
  }

  .kk-growth-label {
    font-size: 8px;
    letter-spacing: 1.3px;
  }

  .kk-growth-label span:first-child {
    width: 24px;
  }

  .kk-growth-heading h2 {
    font-size: 29px;
  }

  .kk-growth-content h3 {
    font-size: 28px;
  }

  .kk-growth-point {
    padding: 13px;
  }

  .kk-growth-point-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .kk-growth-point p {
    font-size: 11px;
  }

  .kk-growth-dashboard-wrap {
    min-height: 330px;
  }

  .kk-growth-dashboard {
    width: 100%;
    padding: 15px;
    transform: none;
  }

  .kk-growth-dashboard:hover {
    transform: none;
  }

  .kk-growth-dashboard-header strong {
    font-size: 13px;
  }

  .kk-growth-dashboard-number {
    padding: 18px 0 10px;
  }

  .kk-growth-dashboard-number strong {
    font-size: 27px;
  }

  .kk-growth-up {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .kk-growth-chart {
    height: 115px;
    margin-bottom: 14px;
  }

  .kk-growth-chart-point.p1 {
    bottom: 66px;
  }

  .kk-growth-chart-point.p2 {
    bottom: 61px;
  }

  .kk-growth-chart-point.p3 {
    bottom: 82px;
  }

  .kk-growth-chart-point.p4 {
    bottom: 72px;
  }

  .kk-growth-chart-point.p5 {
    bottom: 96px;
  }

  .kk-growth-chart-point.p6 {
    bottom: 103px;
  }

  .kk-growth-stats {
    gap: 6px;
  }

  .kk-growth-stat {
    padding: 8px;
  }

  .kk-growth-stat-icon {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  .kk-growth-stat span {
    font-size: 7px;
  }

  .kk-growth-stat strong {
    font-size: 11px;
  }

  .kk-growth-floating-card {
    right: 4px;
    bottom: 0;
    padding: 9px 11px;
  }

  .kk-growth-floating-icon {
    width: 31px;
    height: 31px;
  }

  .kk-growth-floating-card strong {
    font-size: 9px;
  }

  .kk-growth-solutions-heading h3 {
    font-size: 25px;
  }

  .kk-growth-card {
    min-height: 205px;
    padding: 21px;
  }

  .kk-growth-card-icon {
    width: 46px;
    height: 46px;
  }

  .kk-growth-journey-grid {
    grid-template-columns: 1fr;
  }

  .kk-growth-journey-heading h3 {
    font-size: 26px;
  }

  .kk-growth-cta {
    padding: 19px;
  }

  .kk-growth-cta-content h3 {
    font-size: 18px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .kk-growth-glow,
  .kk-growth-chart-line,
  .kk-growth-floating-card {
    animation: none;
  }

  .kk-growth-point,
  .kk-growth-card,
  .kk-growth-step,
  .kk-growth-dashboard,
  .kk-growth-cta-button {
    transition: none;
  }
}

/* =========================================================
   KAUSHAL KUMAR - CONTACT SECTION
   ISOLATED CSS ONLY
========================================================= */

.kk-contact-section {
  position: relative;
  width: 100%;
  padding: 80px 0;
  background: linear-gradient(135deg, #ffffff 0%, #fff9f5 48%, #ffffff 100%);
  overflow: hidden;
}

/* Background Glow */

.kk-contact-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(5px);
}

.kk-contact-glow-one {
  width: 320px;
  height: 320px;
  left: -170px;
  top: 100px;
  background: rgba(232, 93, 26, 0.08);
}

.kk-contact-glow-two {
  width: 280px;
  height: 280px;
  right: -130px;
  bottom: 30px;
  background: rgba(232, 93, 26, 0.07);
}

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

.kk-contact-heading {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.kk-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 50px;
  background: rgba(232, 93, 26, 0.06);
  color: #e85d1a;
  font-size: 13px;
  font-weight: 800;
}

.kk-contact-label i {
  font-size: 14px;
}

.kk-contact-heading h2 {
  margin: 17px 0 12px;
  color: #161616;
  font-size: clamp(31px, 4vw, 47px);
  line-height: 1.15;
  font-weight: 800;
}

.kk-contact-heading h2 span {
  color: #e85d1a;
}

.kk-contact-heading p {
  max-width: 650px;
  margin: auto;
  color: #707070;
  font-size: 15px;
  line-height: 1.75;
}

/* =========================================================
   LEFT CONTACT INFO
========================================================= */

.kk-contact-info {
  position: relative;
  height: 100%;
  padding: 34px;
  border-radius: 24px;
  background: linear-gradient(145deg, #21150f, #302016);
  box-shadow: 0 20px 55px rgba(32, 20, 12, 0.16);
  overflow: hidden;
}

.kk-contact-info::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: rgba(232, 93, 26, 0.17);
}

.kk-contact-info::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  left: -75px;
  bottom: -65px;
  border-radius: 50%;
  background: rgba(255, 155, 98, 0.08);
}

/* Info Head */

.kk-contact-info-head {
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
}

.kk-contact-mini-label {
  display: inline-block;
  margin-bottom: 12px;
  color: #ff9b62;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.kk-contact-info-head h3 {
  margin: 0 0 13px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
}

.kk-contact-info-head h3 strong {
  display: inline;
  color: #ff9b62;
}

.kk-contact-info-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.7;
}

/* Contact Item */

.kk-contact-info-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.kk-contact-info-item:hover {
  transform: translateX(5px);
  background: rgba(232, 93, 26, 0.12);
  border-color: rgba(232, 93, 26, 0.3);
}

.kk-contact-info-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(232, 93, 26, 0.16);
  color: #ff9b62;
  font-size: 17px;
}

.kk-contact-info-content {
  min-width: 0;
  flex: 1;
}

.kk-contact-info-content small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.kk-contact-info-content span {
  display: block;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.kk-contact-item-arrow {
  color: rgba(255, 255, 255, 0.38);
  font-size: 14px;
}

/* Address */

.kk-contact-address {
  cursor: default;
  align-items: flex-start;
}

.kk-contact-address:hover {
  transform: none;
}

/* Availability */

.kk-contact-availability {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.kk-contact-status-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: #48c774;
  box-shadow: 0 0 0 5px rgba(72, 199, 116, 0.12);
  animation: kkContactPulse 2s infinite;
}

.kk-contact-availability strong {
  display: block;
  color: #ffffff;
  font-size: 12px;
}

.kk-contact-availability small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

@keyframes kkContactPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(72, 199, 116, 0.12);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(72, 199, 116, 0.04);
  }
}

/* =========================================================
   FORM BOX
========================================================= */

.kk-contact-form-box {
  height: 100%;
  padding: 34px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.07);
}

/* Form Header */

.kk-contact-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 27px;
}

.kk-contact-form-header > div:first-child span {
  color: #e85d1a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.kk-contact-form-header h3 {
  margin: 6px 0 0;
  color: #191919;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
}

.kk-contact-form-header h3 strong {
  color: #e85d1a;
}

.kk-contact-form-symbol {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #fff1e9;
  color: #e85d1a;
  font-size: 19px;
}

/* Field */

.kk-contact-field label {
  display: block;
  margin: 0 0 8px;
  color: #292929;
  font-size: 12px;
  font-weight: 800;
}

.kk-contact-input,
.kk-contact-textarea {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #ffffff;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-contact-input:focus-within,
.kk-contact-textarea:focus-within {
  border-color: rgba(232, 93, 26, 0.55);
  box-shadow: 0 0 0 4px rgba(232, 93, 26, 0.07);
}

.kk-contact-input > i,
.kk-contact-textarea > i {
  flex: 0 0 45px;
  text-align: center;
  color: #e85d1a;
  font-size: 15px;
}

.kk-contact-input input,
.kk-contact-input select {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 13px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #252525;
  font-family: inherit;
  font-size: 13px;
}

.kk-contact-input input::placeholder,
.kk-contact-textarea textarea::placeholder {
  color: #a3a3a3;
}

.kk-contact-select select {
  cursor: pointer;
  appearance: auto;
}

.kk-contact-textarea {
  align-items: flex-start;
}

.kk-contact-textarea > i {
  padding-top: 17px;
}

.kk-contact-textarea textarea {
  width: 100%;
  min-width: 0;
  min-height: 125px;
  padding: 14px 14px 14px 0;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: #252525;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
}

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

.kk-contact-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 3px;
}

.kk-contact-form-bottom p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #858585;
  font-size: 11px;
}

.kk-contact-form-bottom p i {
  color: #e85d1a;
  font-size: 14px;
}

/* Submit */

.kk-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 155px;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #e85d1a, #f47d3d);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(232, 93, 26, 0.2);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kk-contact-submit i {
  transition: transform 0.3s ease;
}

.kk-contact-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(232, 93, 26, 0.27);
}

.kk-contact-submit:hover i {
  transform: translateX(4px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
  .kk-contact-section {
    padding: 65px 0;
  }

  .kk-contact-heading {
    margin-bottom: 38px;
  }

  .kk-contact-info,
  .kk-contact-form-box {
    padding: 28px;
  }
}

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

@media (max-width: 767px) {
  .kk-contact-section {
    padding: 55px 0;
    overflow-x: hidden;
  }

  .kk-contact-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .kk-contact-heading {
    margin-bottom: 30px;
    padding: 0 5px;
  }

  .kk-contact-heading h2 {
    font-size: 31px;
  }

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

  .kk-contact-info {
    padding: 25px;
    border-radius: 20px;
  }

  .kk-contact-info-head h3 {
    font-size: 24px;
  }

  .kk-contact-form-box {
    padding: 25px;
    border-radius: 20px;
  }

  .kk-contact-form-header h3 {
    font-size: 23px;
  }

  .kk-contact-form-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .kk-contact-form-bottom p {
    justify-content: center;
  }

  .kk-contact-submit {
    width: 100%;
  }
}

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

@media (max-width: 480px) {
  .kk-contact-section {
    padding: 48px 0;
  }

  .kk-contact-info,
  .kk-contact-form-box {
    padding: 20px;
    border-radius: 18px;
  }

  .kk-contact-heading h2 {
    font-size: 27px;
  }

  .kk-contact-heading p {
    font-size: 13.5px;
  }

  .kk-contact-info-head h3 {
    font-size: 22px;
  }

  .kk-contact-info-item {
    padding: 12px;
    gap: 10px;
  }

  .kk-contact-info-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .kk-contact-info-content span {
    font-size: 12px;
  }

  .kk-contact-item-arrow {
    display: none;
  }

  .kk-contact-form-header {
    align-items: flex-start;
  }

  .kk-contact-form-header h3 {
    font-size: 21px;
  }

  .kk-contact-form-symbol {
    width: 45px;
    height: 45px;
    min-width: 45px;
  }
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .kk-contact-info-item,
  .kk-contact-submit,
  .kk-contact-submit i {
    transition: none;
  }

  .kk-contact-status-dot {
    animation: none;
  }
}