* {
     font-family: "Lato", sans-serif;
     font-size: 16px;
 }

 body {
     /* font-family: ; */
     background: #fff;
     padding-top: 80px;
     font-size: 18px;
     color: #050512;
 }

 @media (min-width: 1400px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
         max-width: 1400px !important;
     }
 }

 /* ===== FULLSCREEN LOADER ===== */
 .loader-screen-sk {
     position: fixed;
     inset: 0;
     background: linear-gradient(135deg,
             rgba(138, 138, 138, 0.13),
             rgba(148, 148, 148, 0.14));

     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);

     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     transition: transform 0.9s cubic-bezier(.22, .61, .36, 1);
 }

 .loader-screen-sk.slide-down-sk {
     transform: translateY(-100%);

 }

 /* ===== MAIN CONTENT ===== */
 .main-content-sk {
     opacity: 0;
     transition: opacity 0.8s ease;
     padding: 100px;
     text-align: center;
 }

 .main-content-sk.show-sk {
     opacity: 1;
 }

 /* ===== LOADER ===== */
 .loader-sk {
     position: relative;
     width: 200px;
     height: 200px;
 }

 .ring-wrapper-sk {
     position: absolute;
     inset: 0;
     transform: rotate(-90deg);
     animation: spin-sk 1.5s cubic-bezier(.22, .21, .16, 1) forwards;
 }

 .sk-loader-img {
     position: absolute;
     left: 140px;
     top: 87px;
     width: 95px;
     opacity: 0;

     /* Start slightly lower */
     transform: translateY(-40%) scale(.92) rotate(3deg);

     /* Smoother transition */
     transition:
         opacity .6s cubic-bezier(.22, .61, .36, 1),
         transform .6s cubic-bezier(.22, .61, .36, 1);
 }

 .ring-sk {
     rotate: 180deg;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: conic-gradient(from 0deg,
             #231e72 0deg 120deg,
             #ffffff 120deg 140deg,
             #f58220 140deg 245deg,
             #ffffff 235deg 270deg,
             #231e72 270deg 360deg);


     -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), black 0);
     mask: radial-gradient(farthest-side, transparent calc(100% - 20px), black 0);

     clip-path: inset(0 100% 0 0);
     animation: reveal-sk 1.2s cubic-bezier(.22, .61, .36, 1) forwards;
 }

 @keyframes reveal-sk {
     to {
         clip-path: inset(0 0 0 0);
     }
 }

 @keyframes spin-sk {
     from {
         transform: rotate(-90deg);
     }

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

 .cart-svg-sk {
     position: absolute;
     left: 45px;
     top: 47%;
     transform: translateY(-50%) scale(.85);
     opacity: 0;
     transition: all .4s cubic-bezier(.22, .61, .36, 1);
 }

 .wheel-sk {
     fill: #f58220;
     opacity: 0;
     transform: scale(.85);
     transition: all .4s cubic-bezier(.22, .61, .36, 1);
 }


 /* NAVBAR */
 .salary-navbar {
     /* background: #ffffff; */
     /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); */
     border-bottom: 2px solid #1b1b3a43;
     backdrop-filter: blur(7px);
     padding: 15px 0px;
 }

 .nav-logo {
     height: 40px;
 }

 .nav-link {
     font-weight: 500;
     color: #4f4f4f;
 }

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link.show {
     color: #F77F00;
 }

 .apply-btn {
     background: #F77F00;
     color: #fff !important;
     width: 179px;
     height: 51px;
     padding: 11px 30px;
     border-radius: 30px;
 }

 .sub-menue {
     gap: 1rem !important;
 }

 .section-top {
     font-size: 18px;
 }

 /* HERO */
 .hero-section {
     padding: 75px 0;
     overflow: hidden;
 }

 .hero-section h1 {
     font-size: 48px;
     font-weight: 700;
     color: #1B1464;
     line-height: 1.3;
 }

 .hero-section h1 span {
     color: #F77F00;
     font-size: 48px;
 }

 .hero-sec-cont h1 {
     font-size: 48px;
     font-weight: 700;
     color: #1B1464;
     line-height: 1.3;
 }

 .hero-sec-cont h1 span {
     color: #F77F00;
     font-size: 48px;
 }

 .hero-section p {
     font-size: 16px;
     color: #666;
     margin: 20px auto 30px;
     max-width: 520px;
 }

 .hero-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
 }


 /* ===============================
   PRIMARY BUTTON – PERFECT SMOOTH IN / OUT
================================ */

 .primary-btn {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;

     width: 179px;
     height: 51px;

     border-radius: 30px;
     font-weight: 600;
     text-decoration: none;

     background: #F77F00;
     /* base orange */
     color: #ffffff;
     /* base text */
     border: 1.5px solid #F77F00;

     overflow: hidden;
     white-space: nowrap;
 }

 /* WHITE FILL */
 .primary-btn::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;

     background: #ffffff;

     transform: scaleX(0);
     transform-origin: left;

     transition: transform 0.55s ease;
     /* SAME BOTH WAYS */
     z-index: 0;
 }

 /* TEXT */
 .primary-btn span {
     position: relative;
     z-index: 1;
     padding: 11px 30px;

     transition: color 0.25s ease 0.1s;
     /* tiny delay = smooth */
 }

 /* HOVER IN */
 .primary-btn:hover::after {
     transform: scaleX(1);
 }

 .primary-btn:hover span {
     color: #F77F00;
     transition: color 0.25s ease 0.1s;
     /* tiny delay = smooth */
 }

 .btn:hover {
     background-color: #fff;
     border-color: #F77F00;

 }



 .btn_theme {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px;
     border-radius: 30px;
     font-weight: 600;
     width: 179px;
     height: 51px;
     border: 1.5px solid #1B1464;
     background: #ffffff;
     color: #1B1464;
     text-decoration: none;
     overflow: hidden;
     transition: color 0.35s ease;
 }

 /* blue fill layer */
 .btn_theme::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 50px;
     background: #1B1464;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
     z-index: 0;
 }

 /* text stays above fill */
 .btn_theme .btn_text {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* hover effect */
 .btn_theme:hover::after {
     transform: scaleX(1);
 }

 .btn_theme:hover {
     color: #ffffff;
 }

 /* icon smoothness */
 .btn_theme i {
     transition: transform 0.35s ease;
 }

 .btn_theme:hover i {
     transform: translateX(2px);
 }




 .coin-img {
     width: 90px;
 }

 .hero-sec-cont {
     margin: 0px auto;
 }

 .hero-img-cont {
     height: 170px;
     width: 100%;
     position: relative;
 }

 /* Common coin style */
 .coin-img {
     position: absolute;
     width: 70px;
     opacity: 0.9;
     animation: floatCoin 4s ease-in-out infinite;
 }

 @keyframes floatCoin {
     0% {
         transform: translateY(0) rotate(var(--r));
     }

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

     100% {
         transform: translateY(0) rotate(var(--r));
     }
 }

 /* ARC POSITIONS */
 .herohome {
     position: relative;
     left: -5%;
     top: 240px;
 }

 .coin-img:nth-child(2) {
     left: 12%;
     top: 220px;
     opacity: 0.7;
     transform: rotate(-25deg);
 }

 .coin-img:nth-child(3) {
     left: 20%;
     top: 95px;
     opacity: 0.7;
     transform: rotate(-15deg);
 }

 .coin-img:nth-child(4) {
     left: 28%;
     top: 0px;
     opacity: 0.7;
     transform: rotate(-5deg);
 }

 .coin-img:nth-child(5) {
     left: 39%;
     top: -60px;
     opacity: 0.7;
     transform: rotate(0deg);
 }

 .coin-img:nth-child(6) {
     left: 51%;
     top: -56px;
     opacity: 0.7;
     transform: rotate(5deg);
 }

 .coin-img:nth-child(7) {
     left: 63%;
     top: -5px;
     opacity: 0.7;
     transform: rotate(15deg);
 }

 .coin-img:nth-child(8) {
     left: 71%;
     top: 78px;
     opacity: 0.7;
     transform: rotate(25deg);
 }


 .coin-img:nth-child(9) {
     left: 80%;
     top: 195px;
     opacity: 0.7;
     transform: rotate(25deg);
 }

 .herohand {
     width: 255px;
     position: relative;
     left: 58%;
     top: 205px;
     transform: rotate(-10deg);
 }

 .navbar-toggler-btn {
     display: none;
 }

 .about-section {
     position: relative;
     padding: 50px 0px 50px;
 }

 /* TITLE */
 .about-title {
     font-size: 48px;
     font-weight: 700;
     color: #1B1464;
     line-height: 1.3;
 }

 .about-title span {
     color: #ff8a00;
     font-size: 48px;
 }

 .about-subtitle {
     font-size: 15px;
     color: #666;
     margin: 15px auto 0;
     line-height: 1.6;
 }

 /* IMAGE CARD */
 .about-img-box {
     position: relative;
     padding: 18px;
     border-radius: 14px;
     text-align: center;
 }

 .about-img-box::before {
     content: "";
     position: absolute;
     left: -190px;
     top: -70px;
     width: 280px;
     height: 570px;
     /* background: url(../images/dotted-img.png); */
     background: url(../img/sk-images/dotted-img.png);
     z-index: -1;
     /* transform: rotate(45deg); */
 }

 .about-img-box img {
     width: 100%;
     border-radius: 12px;
     object-fit: cover;

     width: 500px;
 }

 /* RIGHT CONTENT */
 .about-right-title {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 18px;
     color: #1b1b3a;
 }

 .about-list {
     list-style: none;
     padding: 0;
 }

 .about-list li {
     font-size: 16px;
     color: #444;
     margin-bottom: 35px;
     position: relative;
     line-height: 1.6;
 }


 .front-page-hero {
     position: relative;
     overflow: hidden;
 }

 /* Canvas stays in background */
 .front-page-hero canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: -10;
     opacity: 0.3;
     /* subtle & premium */
     pointer-events: none;
 }

 /* Hero content always above */
 .front-page-hero .container {
     position: relative;
     z-index: 2;
 }



 /* ============================== how salary cart works   ================ */

 .how-it-works {
     background: #f2f2f2;
     border-radius: 50px;
     padding: 40px 20px;
 }

 .how-left {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 30px;
 }

 .how-img-stack {
     position: relative;
     width: 320px;
     height: 420px;
     overflow: hidden;
 }

 .how-img {
     position: absolute;
     inset: 0;
     width: 100%;
     opacity: 0;
     transform: translateY(24px) scale(0.985);
     transition:
         transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
         opacity 0.55s ease;
 }

 .how-img.active {
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 .how-img.exit {
     opacity: 0;
     transform: translateY(-24px) scale(0.985);
 }

 .step-indicators {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .indicator {
     width: 10px;
     height: 34px;
     border-radius: 10px;
     border: 1.5px solid #F77F00;
     cursor: pointer;
     transition: background .3s ease;
 }

 .indicator.active {
     background: #F77F00;
 }

 .steps-wrapper {
     position: relative;
     height: 420px;
     overflow: hidden;
 }

 .steps-scroll {
     width: 85%;
     align-items: flex-end;
     display: flex;
     flex-direction: column;
     will-change: transform;
 }

 .step-card {
     width: 90%;
     background: #fff;
     border: 1px solid #F77F00;
     border-radius: 16px;
     padding: 14px 28px;
     margin-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;

     /* 🔥 PRO MOTION */
     transform: translateZ(0);
     will-change: transform, background-color, color;
     transition:
         transform 0.9s cubic-bezier(0.19, 1, 0.22, 1),
         background-color 0.55s ease,
         color 0.45s ease;
 }

 .step-card.active {
     background: #F77F00;
     transform: translateY(-2px) scale(1.01);
 }

 .step-card.active h5,
 .step-card.active p {
     color: #fff;
 }

 .step-content h5 {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 6px;
     color: #1b1b3a;
 }

 /* LEFT SCROLL BAR */
 .steps-wrapper::before {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     width: 1px;
     background: #ff8400;
     height: 300px;
     margin: auto;
     border-radius: 4px;
 }

 .steps-wrapper::after {
     transform: translateY(calc(var(--scroll-pos, 0%) * 1));
 }

 .step-content p {
     font-size: 14px;
     color: #555;
     margin: 0;
     max-width: 420px;
 }

 .step-number {
     font-size: 70px;
     position: relative;
     bottom: 30px;
     left: 20px;
     font-weight: 700;
     color: transparent;
     -webkit-text-stroke: 1px #F77F00;
 }

 .step-card.active .step-number {
     -webkit-text-stroke: 1px #fff;
 }

 /* =======================
          TABLET & BELOW
        ======================= */
 @media (max-width: 991px) {
     .how-it-works {
         padding: 50px 20px !important;
         border-radius: 30px;
     }

     .step-number {
         font-size: 46px;
     }

     .steps-scroll {
         width: 100%;
     }
 }

 /* =======================
          TABLET (STACK IMAGE)
        ======================= */
 @media (max-width: 768px) {
     .how-left {
         flex-direction: column;
         gap: 24px;
         padding: 20px 10px;
     }

     .how-img-stack {
         width: 230px;
         height: 230px;
     }

     .step-indicators {
         flex-direction: row;
         gap: 10px;
     }

     .indicator {
         width: 34px;
         height: 10px;
     }

     .steps-wrapper::before {
         display: none;
     }

     .steps-wrapper {
         margin-top: 30px;
     }

     .step-card {
         width: 100%;
         padding: 18px;
         flex-direction: row;
         align-items: center;
     }

     .step-number {
         font-size: 44px;
     }

     .hero-section p {
         font-size: 14px;
     }
 }

 /* =======================
          MOBILE
        ======================= */
 @media (max-width: 576px) {
     .about-title {
         font-size: 28px;
         line-height: 1.3;
     }

     .about-subtitle {
         font-size: 14px;
     }

     .step-card {
         flex-direction: column;
         align-items: flex-start;
         gap: 0px;
         padding: 16px;
     }

     .step-number {
         align-self: flex-end;
         font-size: 30px;
     }
 }








 /* ================= PERFECTLY SMOOTH INFINITE SLIDER ================= */
 .why-salarykart-section {
     background: #fff;
     padding: 40px 0;
     overflow-x: hidden;
 }

 .why-card-bg-shadow {
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-radius: 24px;
     padding: 40px;
     background: #fff;
 }

 .why-slider-wrapper {
     background: #fff;
     position: relative;
 }

 .why-slider-viewport {
     overflow: hidden;
     width: 100%;
     height: 450px;
     cursor: grab;
     -webkit-overflow-scrolling: touch;
 }

 .why-slider-viewport:active {
     cursor: grabbing;
 }

 .why-top-controls {
     position: absolute;
     top: -5px;
     right: 30px;
     display: flex;
     align-items: center;
     gap: 12px;
     z-index: 5;
 }

 .why-arrow {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     border: 1.5px solid #F77F00;
     background: #fff;
     color: #F77F00;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .why-arrow i {
     font-size: 25px;
 }

 .why-count {
     font-size: 18px;
     font-weight: 600;
     color: #333;
 }

 .why-arrow:hover {
     background: #F77F00;
     color: #fff;
     transform: scale(1.05);
 }

 .why-slider-track {
     display: flex;
     gap: 30px;
     align-items: flex-end;
     will-change: transform;
     transform: translateZ(0);
     transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
     transform-style: preserve-3d;
 }

 .why-slider-track.no-transition {
     transition: none !important;
 }

 .why-card {
     flex: 0 0 calc((100% - 60px) / 3);
     height: 350px;
     border-radius: 20px;
     border: 1.5px solid #F77F00;
     background: #fff;
     will-change: transform, height;
     transform: translateZ(0);
     transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
     opacity: 0.85;
 }

 .why-card.active {
     height: 430px;
     opacity: 1;
     border-width: 2.5px;
     box-shadow: 0 22px 50px rgba(0, 0, 0, 0.09);
 }

 .why-card-inner {
     height: 100%;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     text-align: center;
 }

 .why-card-inner img {
     /* max-width: 120px; */
     height: auto;
     transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .why-card.active .why-card-inner img {
     transform: scale(1.15);
 }

 /* Card title - VISIBLE ON ALL CARDS */
 .card-title {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     opacity: 1;
     transform: translateY(0);
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .card-title span {
     font-size: 18px;
     font-weight: 500;
     width: 100%;
     text-align: center;
     color: #333;
     line-height: 1.3;
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
 }

 /* Arrow hidden by default */
 .card-arrow {
     color: #F77F00;
     font-size: 16px;
     text-decoration: none;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.8);
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 }

 /* Active card styling */
 .why-card.active .card-title span {
     font-size: 18px;
     font-weight: 600;
     width: 70%;
     text-align: left;
     color: #0a0a20;
 }

 .why-card.active .card-arrow {
     opacity: 1;
     visibility: visible;
     transform: scale(1);
 }

 .why-card.active .card-title a i {
     font-size: 40px;
 }

 .why-card.active .card-title a:hover i {
     transform: translateX(5px);
 }

 /* INDICATORS */
 .why-indicators {
     margin-top: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 14px;
 }

 .why-indicator {
     width: 28px;
     height: 13px;
     border-radius: 20px;
     border: 1.5px solid #F77F00;
     background: transparent;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .why-indicator:hover {
     background: rgba(247, 127, 0, 0.3);
 }

 .why-indicator.active {
     width: 42px;
     background: #F77F00;
     box-shadow: 0 6px 18px rgba(247, 127, 0, 0.45);
 }

 /* ================= RESPONSIVE ================= */
 @media (max-width: 992px) {
     .why-card-bg-shadow {
         padding: 30px 20px;
     }

     .why-slider-viewport {
         height: 420px;
     }

     .why-card {
         flex: 0 0 calc((100% - 30px) / 2);
         height: 320px;
     }


     .card-title span {
         font-size: 16px;
     }

     .why-card.active .card-title span {
         font-size: 24px;
     }

     .why-card.active .card-title a i {
         font-size: 44px;
     }

     .why-arrow {
         width: 48px;
         height: 48px;
     }

     .why-arrow i {
         font-size: 22px;
     }

     .why-top-controls {
         right: 15px;
         top: -10px;
     }
 }

 @media (max-width: 768px) {
     .why-salarykart-section {
         padding: 30px 0;
     }

     .why-card-bg-shadow {
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
         border-radius: 20px;
         padding: 30px 20px;
     }

     .why-top-controls {
         display: none;
     }

     .why-slider-viewport {
         height: 435px;
         touch-action: pan-y pinch-zoom;
     }

     .why-slider-track {
         gap: 20px;
     }

     .why-card {
         flex: 0 0 85%;
         min-width: 85%;
         max-width: 85%;
         height: 300px;
     }

     .why-card-inner {
        justify-content: center;
     }

     .why-card.active .why-card-inner img {
         transition: none;
         padding: 10px;
     }

     .card-title span {
         font-size: 16px;
     }

     .why-card.active .card-title span {
         font-size: 22px;
         width: 65%;
     }

     .why-card.active .card-title a i {
         font-size: 38px;
     }

     .why-indicators {
         margin-top: 25px;
         gap: 10px;
     }

     .why-indicator {
         width: 24px;
         height: 11px;
     }

     .why-indicator.active {
         width: 36px;
     }
 }

 @media (max-width: 480px) {
     .why-card {
         flex: 0 0 90%;
         min-width: 90%;
         max-width: 90%;
     }

     .card-title span {
         font-size: 15px;
     }

     .why-card.active .card-title span {
         font-size: 15px;
     }

     .why-card.active .card-title a i {
         font-size: 32px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     * {
         transition: none !important;
     }
 }










 /* <========================== salarykart testimonial ===================================> */
 /* SECTION */

 .quote-new {
     font-size: 80px;
     position: relative;
     top: 65px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .quote-new span {
     font-size: 80px;
     color: #3e3e3e;
 }

 .testimonial-text {
     text-align: center;
     font-size: 18px;
     line-height: 1.6;
     margin: 0px 0;
     transition: opacity 0.35s ease, transform 0.35s ease;
 }

 .testimonial-text.hide {
     opacity: 0;
     transform: translateY(10px);
 }

 .testimonials-section {
     padding: 40px 0;
     background: #fff;
 }

 /* LAYOUT */
 .testimonial-wrapper {
     display: flex;
     align-items: center;
     gap: 90px;
 }

 /* LEFT WRAPPER */
 .clients-stack-wrapper {
     position: relative;
     width: 420px;
     height: 420px;
     right: 300px;
 }

 /* SPINNING DECOR */
 .orbit-ring {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 2px dotted #F77F00;
     animation: slowSpin 28s linear infinite;
 }

 /* STACK */
 .clients-stack {
     position: absolute;
     inset: 0;
 }

 /* ================================
          STACK
        ================================ */
 .clients-stack {
     position: absolute;
     inset: 0;
     transform: translateZ(0);
     /* GPU anchor */
 }

 /* ================================
        BASE CLIENT CARD
      ================================ */
 .client-card {
     position: absolute;
     right: -310px;
     width: 100%;
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 12px;
     justify-content: flex-start;

     opacity: 0;
     transform: scale(0.92) translateZ(0);

     will-change: transform, opacity;

     /* 🔥 layered smoothness */
     transition:
         transform 0.9s cubic-bezier(0.19, 1, 0.22, 1),
         opacity 0.55s ease-out;
 }

 /* ================================
        EXITING CARD – ORBIT EXIT
      ================================ */
 .client-card.exit {
     opacity: 0;

     transform:
         translateX(-290px) translateY(390px) rotate(0deg) scale(0.75) translateZ(0);

     transition:
         transform 1.1s cubic-bezier(0.19, 1, 0.22, 1),
         opacity 0.45s ease-out;
 }

 /* ================================
        STACK POSITIONS
      ================================ */

 /* TOP */
 .client-card.top {
     top: -40px;
     right: -270px;

     opacity: 0.75;

     transform:
         translateY(40px) scale(0.86) translateZ(0);
 }

 /* MIDDLE (ACTIVE) */
 .client-card.middle {
     right: -390px;

     opacity: 1;

     transform:
         translateY(170px) scale(1.08) translateZ(0);

     transition:
         transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
         opacity 0.6s ease-out;
 }

 /* BOTTOM */
 .client-card.bottom {
     top: 20px;
     right: -280px;

     opacity: 0.75;

     transform:
         translateY(300px) scale(0.86) translateZ(0);
 }


 /* IMAGE */
 .client-card img {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: #fff;
     border: 1px solid #F77F00;
     object-fit: cover;
 }

 /* INFO */
 .client-card strong {
     font-size: 15px;
     color: #1b1b3a;
 }

 .client-card span {
     font-size: 13px;
     color: #666;
 }

 .clients-rating {
     display: flex;
     align-items: center;
     gap: 12px;
     width: fit-content;
     margin: 15px auto;
     font-family: inherit;
 }

 /* CLIENT IMAGES */
 .clients-rating .clients-imgs {
     display: flex;
     align-items: center;
 }

 .clients-rating .clients-imgs img {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #fff;
     margin-left: -10px;
     background: #fff;
 }

 .clients-rating .clients-imgs img:first-child {
     margin-left: 0;
 }

 /* RATING TEXT */
 .clients-rating .rating-text {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 500;
     color: #222;
 }

 /* STARS */
 .clients-rating .stars {
     color: #f7b417;
     font-size: 16px;
     letter-spacing: 1px;
 }

 /* OPTIONAL: make it slightly compact on mobile */
 @media (max-width: 576px) {
     .clients-rating .clients-imgs img {
         width: 30px;
         height: 30px;
     }
 }



 /* ACTIVE */
 .client-card.middle img {
     border: 2px solid #F77F00;
     box-shadow: 0 0 0 6px rgba(247, 127, 0, 0.15);
 }

 /* ================================
        RIGHT CONTENT – PREMIUM MOTION
      ================================ */
 .testimonial-content {
     max-width: 720px;
     transform: translateZ(0);
     /* GPU anchor */
 }

 /* Decorative quote */
 .quote {
     font-size: 80px;
     color: #110c06;
     line-height: 1;
     transform: translateZ(0);
 }

 /* Text */
 .testimonial-text {
     text-align: center;
     font-size: 18px;
     line-height: 1.6;
     margin: 0px 0;

     will-change: opacity, transform;

     transform: translateY(0) translateZ(0);
     opacity: 1;

     transition:
         opacity 0.45s ease-out,
         transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
 }

 /* Hidden state */
 .testimonial-text.hide {
     opacity: 0;
     transform: translateY(14px) translateZ(0);
 }

 .rating {
     margin: 20px 0px;
     text-align: center;
     font-size: 14px;
     color: #444;
 }

 .clients-rating {
     margin: 15px auto;
 }

 .clients-rating .stars {
     font-size: 30px;
     color: #f7b417;
 }

 .clients-rating .clients-imgs img {}


 /* SPIN */
 @keyframes slowSpin {
     from {
         transform: rotate(0deg);
     }

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

 /* =====================================================
          TESTIMONIALS – RESPONSIVE (TABLET + MOBILE)
        ===================================================== */

 /* ---------- TABLET & BELOW ---------- */
 @media (max-width: 992px) {

     .testimonial-wrapper {
         flex-direction: column;
         gap: 40px;
     }

     .testimonial-content {
         max-width: 100%;
         text-align: center;
         position: static !important;
     }

     .clients-rating {
         width: 100%;
         justify-content: center;
     }
 }

 /* ---------- MOBILE & SMALL TABLET ---------- */
 @media (max-width: 768px) {

     /* Prevent horizontal scroll */
     .testimonials-section {
         overflow-x: hidden;
     }

     /* Hide decorative elements */
     .quote,
     .orbit-ring {
         display: none;
     }

     /* Stack wrapper reset */
     .clients-stack-wrapper {
         position: relative;
         width: 100%;
         max-width: 320px;
         height: 150px !important;
         margin: 0 auto;
         right: 0;
         top: 0;
         overflow: hidden;
     }

     .clients-stack {
         position: relative;
         width: 100%;
         height: 100%;
     }

     /* Base card (mobile behavior) */
     .client-card {
         position: absolute;
         inset: 0;
         display: flex;
         align-items: center;
         flex-direction: column;
         gap: 16px;
         opacity: 0;
         transform: scale(0.96);
         transition:
             opacity 0.35s ease,
             transform 0.35s ease;
         pointer-events: none;
     }

     /* Only active card visible */
     .client-card.middle {
         opacity: 1;
         transform: scale(1);
         pointer-events: auto;
         z-index: 2;
     }

     /* Disable orbit positions */
     .client-card.top,
     .client-card.bottom {
         opacity: 0;
         transform: scale(0.96);
     }

     /* Disable orbit exit animation on mobile */
     .client-card.exit {
         opacity: 0;
         transform: scale(0.96);
         transition:
             opacity 0.3s ease,
             transform 0.3s ease;
     }

     /* Image scaling */
     .client-card img {
         width: 80px;
         height: 80px;
     }

     /* Active image highlight stays */
     .client-card.middle img {
         border: 2px solid #F77F00;
         box-shadow: 0 0 0 6px rgba(247, 127, 0, 0.15);
     }

     /* Content box */
     .testimonial-content {
         background: #ffffff;
         padding: 12px 20px;
         border-radius: 14px;
         width: 100%;
     }

     .testimonial-text {
         font-size: 16px;
         line-height: 1.5;
     }

     .clients-rating {
         width: 100%;
         justify-content: center;
     }

     .my-5 {
         margin: 1rem auto !important;
     }
 }

 /* ---------- VERY SMALL DEVICES ---------- */
 @media (max-width: 480px) {

     .testimonial-text {
         font-size: 15px;
     }

     .client-card img {
         width: 72px;
         height: 72px;
     }

     .clients-stack-wrapper {
         max-width: 280px;
         height: 140px !important;
     }
 }




 /* ===============================
          FAQ SECTION (SCOPED)
        ================================ */
 .salary-faq-section {
     background: #ffffff;
     position: relative;
     overflow: hidden;
 }

 /* TITLE */
 .faq-title {
     font-size: 42px;
     font-weight: 700;
     color: #1B1464;
     line-height: 1.3;
 }

 .faq-title span {
     color: #F77F00;
 }

 .faq-subtitle {
     font-size: 15px;
     color: #555;
     margin-top: 12px;
     line-height: 1.6;
 }

 /* ACCORDION */
 .salary-faq-accordion .faq-item {
     border: 1.5px solid #F77F00;
     border-radius: 14px;
     margin-bottom: 18px;
     overflow: hidden;
     padding: 10px 30px;
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
 }

 .accordion-header {
     padding: 20px 0px;
 }

 /* BUTTON */
 .salary-faq-accordion .faq-btn {
     background: #fff;
     font-weight: 600;
     font-size: 16px;
     color: #1b1b3a;
     padding: 0;

 }

 /* ===============================
          ULTRA SMOOTH FAQ ANIMATION
        ================================ */

 /* collapse container */
 .salary-faq-accordion .accordion-collapse {
     transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
 }

 /* body animation base */
 .salary-faq-accordion .accordion-body {
     padding: 20px 0px;
     border-top: 2px solid #959595;

     opacity: 0;
     transform: translateY(-12px) scale(0.98);

     transition:
         opacity 0.45s ease,
         transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

     will-change: transform, opacity;
 }

 /* when open */
 .salary-faq-accordion .accordion-collapse.show .accordion-body {
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 .salary-faq-accordion .faq-item {
     transition: box-shadow 0.3s ease, transform 0.3s ease;
 }

 .salary-faq-accordion .accordion-button:not(.collapsed) {
     color: #1B1464;
 }

 /* active card lift */
 .salary-faq-accordion .faq-item {
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }

 .salary-faq-accordion .accordion-collapse.show .faq-item {
     transform: translateY(-2px);
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
 }

 /* plus to cross easing */
 .salary-faq-accordion .accordion-button::after {
     transition:
         transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
         opacity 0.3s ease;
 }



 /* =====================================
          FAQ – REMOVE BOOTSTRAP DEFAULT CARET
        ===================================== */
 .salary-faq-accordion .accordion-button::before,
 .salary-faq-accordion .accordion-button::after {
     background-image: none !important;
 }

 .salary-faq-accordion .accordion-button::after {
     content: "+";
     font-size: 22px;
     font-weight: 400;
     color: #333;
     transform: rotate(0deg);
     transition:
         transform 0.35s ease,
         color 0.35s ease;
 }

 .salary-faq-accordion .accordion-button:not(.collapsed)::after {
     content: "×";
     transform: rotate(180deg);
     /* color: #F77F00; */
     position: relative;
     top: 10px;
 }



 .card-arrow i {
     rotate: -90deg;
     font-size: 30px;
 }



 /* BODY */
 .faq-body {
     font-size: 15px;
     color: #555;
     line-height: 1.7;
     padding: 0px;
 }

 /* DECOR PLACEHOLDERS */
 .faq-decor {
     position: absolute;
     width: 190px;
     height: 180px;
     background: #f4f4f4;
     border-radius: 12px;
     opacity: 1;
 }

 /* LEFT */
 .faq-decor-left {
     /* background: url(../images/Untitled-2\ 1.png); */
     background: url(../img/sk-images/Untitled-2-1.png) no-repeat top;
     left: -105px;
     top: 30%;
 }

 /* RIGHT */
 .faq-decor-right {
     background: url(../img/sk-images/Untitled-2-1.png);
     right: -110px;
     bottom: -5%;
 }


 /* ===============================
       CONTACT CTA SECTION
    ================================ */

 .salary-contact-cta {
     background: transparent;
     padding: 60px 0;
 }

 .salary-cta-box {
     background: #f2f2f2;
     border-radius: 26px;
     padding: 55px 20px 60px;
     text-align: center;
 }

 /* AVATARS */
 .cta-avatars {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 22px;
 }


 .cta-avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     background: #fff;

     border: 3px solid #F77F00;
     margin-left: -16px;
 }

 .cta-avatars .cta-avatar:nth-child(1) {
     border-color: #F77F00;
 }

 .cta-avatars .cta-avatar:nth-child(2) {
     border-color: #F77F00;
     position: relative;
     bottom: 5px;
 }

 .cta-avatars .cta-avatar:nth-child(3) {
     border-color: #F77F00;
     position: relative;
     bottom: 10px;
     z-index: 3;
 }

 .cta-avatars .cta-avatar:nth-child(4) {
     border-color: #F77F00;
     position: relative;
     bottom: 5px;
     z-index: 1;
 }

 .cta-avatars .cta-avatar:nth-child(5) {
     border-color: #F77F00;
     position: relative;

 }


 @media (max-width: 768px) {
     .s-l-mid-img {
         z-index: 1;
     }
 }

 #mid-img {
     z-index: 2;
 }

 /* TEXT */
 .cta-title {
     font-size: 24px;
     font-weight: 600;
     color: #111;
     margin-bottom: 10px;
 }

 .cta-subtitle {
     font-size: 15px;
     color: #555;
     max-width: 520px;
     margin: 0 auto 28px;
     line-height: 1.6;
 }

 /* BUTTON */
 .cta-apply-btn {
     background: #F77F00;
     color: #fff;
     font-size: 16px;
     font-weight: 600;

     padding: 14px 46px;
     border-radius: 999px;
     border: none;

     transition: all 0.3s ease;
 }

 .cta-apply-btn:hover {
     background: #e96f00;
     color: #fff;
     transform: translateY(-1px);
 }

 /* RESPONSIVE */
 @media (max-width: 576px) {
     .cta-avatar {
         width: 58px;
         height: 58px;
         margin-left: -14px;
     }

     .cta-title {
         font-size: 20px;
     }

     .cta-subtitle {
         font-size: 14px;
     }
 }

 /* CARD ARROW */
 /* =====================================
   WHY CARD ARROW – FORCE SINGLE RIGHT ARROW
===================================== */
 .card-arrow {
     position: absolute;
     /* bottom: 12px; */
     right: 24px;

     /* lock to text arrow only */
     font-family: inherit !important;
     font-size: 26px;
     font-weight: 600;
     line-height: 1;
     color: #F77F00;

     background: none !important;
     border: none !important;
     text-decoration: none;

     /* prevent icon fonts / ligatures */
     font-variant-ligatures: none;
 }

 /* KILL anything injected */
 .card-arrow::before,
 .card-arrow::after {
     content: none !important;
     background: none !important;
 }




 /* =====================================
   WHY CHOOSE – UNIFY ALL ARROWS
===================================== */
 .why-arrow,
 .card-arrow {
     font-family: inherit !important;
     font-size: 25px;
     font-weight: 100 !important;
     line-height: 1;
     color: #F77F00;
 }

 .why-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .card-arrow i {
     rotate: -90deg;
     font-size: 30px;
 }





 /* ===============================
   SALARYKART FOOTER (PIXEL STYLE)
================================ */
 .sk-footer {
     background: #2d296b;
     color: #ffffff;
     padding: 50px 0 35px;
     position: relative;
     overflow: hidden;
     font-size: 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 /* Right geometric background (placeholder) */
 .sk-footer::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 500px;
     height: 600px;
     /* background: url(../img/sk-images/footer-bc-img.png); */
     background: url(../img/sk-images/footer-bc-img.png);
     /* background:
                    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
                    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); */
     /* background-size: 60px 60px; */
     opacity: 0.6;
     pointer-events: none;
 }

 /* LOGO */
 .sk-footer-logo img {
     max-width: 200px;
     margin-bottom: 25px;
     filter: brightness(0) invert(1);
 }

 /* DESCRIPTION */
 .sk-footer-desc {
     /* max-width: 980px; */
     margin: 0 auto 35px;
     line-height: 1.8;
     color: #e7e6f3;
 }

 /* NAV WITH LINES */
 .sk-footer-nav-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 25px;
     margin-bottom: 40px;
 }

 .line {
     position: absolute;
     top: 250px;
     width: 100%;
     height: 2px;
     margin: 0px auto;
     background: rgba(255, 255, 255, 0.606);
 }

 .sk-footer-nav {
     background: #2d296b;
     z-index: 1;
 }

 .sk-footer-nav a {
     color: #ffffff;
     text-decoration: none;
     font-weight: 500;
     margin: 0 6px;
 }

 .sk-footer-nav span {
     margin: 0 6px;
     color: rgba(255, 255, 255, 0.5);
 }

 /* MID SECTION */
 .sk-footer-mid p {
     color: #e7e6f3;
     line-height: 1.6;
     margin: 30px 0px;
 }

 /* SOCIAL ICONS */
 .sk-footer-social {
     display: flex;
     justify-content: center;
     gap: 22px;
 }

 .sk-footer-social a {
     width: 44px;
     height: 44px;
     background: #ffffff;
     color: #332f78;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 6px;
     font-size: 20px;
     transition: all 0.3s ease;
 }

 .sk-footer-social a:hover {
     background: #f77f00;
     color: #ffffff;
 }

 /* BOTTOM */
 .sk-footer-bottom {
     margin-top: 45px;
     color: #e7e6f3;
 }

 .sk-footer-policy {
     margin-top: 10px;
 }

 .sk-footer-policy a {
     color: #ffffff;
     text-decoration: underline;
     font-size: 13px;
     margin: 0 5px;
 }

 .sk-footer-policy span {
     color: rgba(255, 255, 255, 0.5);
 }

 .sk-footer-social a i {
     font-size: 30px;
 }






 /* SECTION */
 .testimonials-section {
     padding: 40px 0;
     background: #fff;
 }

 /* LAYOUT */
 .testimonial-wrapper {
     display: flex;
     align-items: center;
     gap: 90px;
 }

 /* LEFT WRAPPER */
 .clients-stack-wrapper {
     position: relative;
     width: 420px;
     height: 420px;
     right: 300px;
 }

 /* SPINNING DECOR */
 .orbit-ring {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 2px dotted #F77F00;
     animation: slowSpin 28s linear infinite;
 }

 /* STACK */
 .clients-stack {
     position: absolute;
     inset: 0;
 }

 /* CLIENT CARD */
 .client-card {
     position: absolute;
     right: -310px;
     width: 100%;
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 12px;
     opacity: 0;
     transform: scale(0.9);
     transition: all 0.45s ease;
     justify-content: flex-start;
 }

 /* IMAGE */
 .client-card img {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: #fff;
     border: 1px solid #F77F00;
     object-fit: cover;
 }

 /* INFO */
 .client-card strong {
     font-size: 15px;
     color: #1b1b3a;
 }

 .client-card span {
     font-size: 13px;
     color: #666;
 }

 .clients-rating {
     display: flex;
     align-items: center;
     gap: 12px;
     width: fit-content;
     margin: 15px auto;
     font-family: inherit;
 }

 /* CLIENT IMAGES */
 .clients-rating .clients-imgs {
     display: flex;
     align-items: center;
 }

 .clients-rating .clients-imgs img {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #fff;
     margin-left: -10px;
     background: #fff;
 }

 .clients-rating .clients-imgs img:first-child {
     margin-left: 0;
 }

 /* RATING TEXT */
 .clients-rating .rating-text {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 500;
     color: #222;
 }

 /* STARS */
 .clients-rating .stars {
     color: #f7b417;
     font-size: 16px;
     letter-spacing: 1px;
 }

 /* OPTIONAL: make it slightly compact on mobile */
 @media (max-width: 576px) {
     .clients-rating .clients-imgs img {
         width: 30px;
         height: 30px;
     }
 }

 /* STACK POSITIONS */
 .client-card.top {
     top: -40px;
     right: -270px;
     opacity: 0.8;
     transform: translateY(40px) scale(0.85);
 }

 .client-card.middle {
     right: -390px;
     opacity: 1;
     transform: translateY(170px) scale(1.08);
 }

 .client-card.bottom {
     top: 20px;
     right: -280px;
     opacity: 0.8;
     transform: translateY(300px) scale(0.85);
 }

 /* ACTIVE */
 .client-card.middle img {
     border: 2px solid #F77F00;
     box-shadow: 0 0 0 6px rgba(247, 127, 0, 0.15);
 }

 /* RIGHT CONTENT */
 .testimonial-content {
     max-width: 720px;
 }

 .navbar .nav-link .active {
     color: #F77F00 !important;
 }

 .rating {
     margin: 20px 0px;
     text-align: center;
     font-size: 14px;
     color: #444;
 }

 .clients-rating {
     position: relative;
     bottom: 100px;
     margin: 15px auto;
 }

 .clients-rating .stars {
     font-size: 30px;
     color: #f7b417;
 }

 .clients-rating .clients-imgs img {}


 /* SPIN */
 @keyframes slowSpin {
     from {
         transform: rotate(0deg);
     }

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


 /* responsive css */





 /* RESPONSIVE */
 @media (max-width: 991px) {
     .hero-section h1 {
         font-size: 32px;
     }

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

     .mobile-img {
         position: static;
         margin-top: 20px;
     }

     .navbar-toggler-btn {
         display: block;
     }
 }

 @media (max-width: 768px) {
     .hero-img-cont {
         height: 160px;
         display: none;
     }

     .coin-img {
         width: 50px;
     }

     .about-title {
         font-size: 28px;
     }

     .process {
         margin-bottom: 0px !important;
     }

     .about-right-title {
         margin-top: 20px;
     }
 }





 /* RESPONSIVE */
 @media (max-width: 768px) {
     .why-slider-wrapper {
         padding: 24px;
     }

     .why-card {
         min-width: 260px;
     }
 }

 /* Large mobiles */
 @media (max-width: 767.98px) {

     .faq-title {
         font-size: 28px;
         line-height: 1.25;
     }

     .faq-subtitle {
         font-size: 14px;
         margin-top: 10px;
     }

     .salary-faq-accordion .faq-item {
         border-radius: 12px;
         margin-bottom: 14px;
     }

     .salary-faq-accordion .faq-btn {
         padding: 16px 18px;
         font-size: 14px;
     }

     .faq-body {
         padding: 16px 18px;
     }

     /* Hide decor on mobile (clean look) */
     .faq-decor {
         display: none;
     }
 }








 /* Small mobiles */
 @media (max-width: 575.98px) {

     .faq-title {
         font-size: 24px;
     }

     .faq-subtitle {
         font-size: 13px;
     }

     .salary-faq-accordion .faq-btn {
         font-size: 13.5px;
     }

     .faq-body {
         font-size: 13.5px;
         line-height: 1.6;
     }

     /* Make plus icon smaller */
     .salary-faq-accordion .accordion-button::after {
         font-size: 22px;
     }
 }


 /* ===============================
   CTA RESPONSIVE
================================ */
 @media (max-width: 991.98px) {
     .salary-cta-box {
         padding: 50px 20px;
     }

     .cta-title {
         font-size: 20px;
     }
 }

 @media (max-width: 767.98px) {
     .cta-avatar {
         width: 46px;
         height: 46px;
     }

     .cta-subtitle {
         font-size: 14px;
         padding: 0 15px;
     }

     .cta-btn {
         padding: 12px 36px;
     }
 }

 @media (max-width: 575.98px) {
     .salary-cta-box {
         border-radius: 20px;
     }

     .cta-title {
         font-size: 18px;
     }

     .cta-avatar {
         width: 42px;
         height: 42px;
     }
 }




 /* RESPONSIVE */
 @media (max-width: 768px) {
     .sk-footer::after {
         display: none;
     }

     .sk-footer-nav-wrap .line {
         display: none;
     }

     .sk-footer-desc {
         padding: 0 10px;
         text-align: justify !important;
     }
 }



 /* RESPONSIVE */
 @media (max-width: 992px) {
     .testimonial-wrapper {
         /* background-color: red; */
         flex-direction: column;
         gap: 0px;
         border-radius: 24px;
         box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
         margin: 30px 0px;
         padding: 20px 0px 5px;
     }
 }


 /* =====================================
   GLOBAL MOBILE OVERFLOW FIX
===================================== */
 @media (max-width: 768px) {

     html,
     body {
         max-width: 100%;
         overflow-x: hidden;
     }

     * {
         box-sizing: border-box;
     }
 }


 /* =====================================
   TESTIMONIALS – STOP X OVERFLOW
===================================== */
 @media (max-width: 768px) {

     .testimonials-section {
         overflow-x: hidden;
     }

     .clients-stack-wrapper {
         max-width: 100%;
         overflow: hidden;
         right: 0 !;
     }

     .client-card {
         right: 0 !important;
         left: auto !important;
         max-width: 100%;
     }
 }

 /* =====================================
   HERO & GENERAL ABSOLUTE ELEMENT SAFETY
===================================== */
 @media (max-width: 768px) {


     .how-it-works {
         width: 85%;
     }
 }




 /* RESPONSIVE */
 @media (max-width: 991px) {
     .hero-section h1 {
         font-size: 32px;
     }

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

     .mobile-img {
         position: static;
         margin-top: 20px;
     }

     .navbar-toggler-btn {
         display: block;
     }

     img {
         width: 100%;
     }
 }



 /* RESPONSIVE */
 @media (max-width: 991px) {
     .how-it-works {
         padding: 50px 20px;
         border-radius: 30px;
     }

     .step-number {
         font-size: 46px;
     }
 }

 @media (max-width: 576px) {
     .how-title {
         font-size: 28px;
     }

     .step-card {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
     }

     .step-number {
         align-self: flex-end;
     }
 }


 /* RESPONSIVE */
 @media (max-width: 768px) {
     .how-left {
         flex-direction: column;
         padding: 40px 10px;
     }

     .step-indicators {
         flex-direction: row;
         order: 2;
     }

     .indicator {
         width: 34px;
         height: 10px;
     }

     .step-card {
         flex-direction: row;
         align-items: center;
         padding: 20px;
         gap: 12px;
     }

     .step-number {
         left: 13px;
         align-self: flex-end;
         font-size: 46px;
     }
 }




 /* ===============================
   FAQ RESPONSIVE FIXES
================================ */

 /* Tablets & small laptops */
 @media (max-width: 991.98px) {

     .faq-title {
         font-size: 34px;
     }

     .faq-subtitle {
         font-size: 14px;
         padding: 0 20px;
     }

     .salary-faq-accordion .faq-btn {
         font-size: 15px;
         padding: 18px 20px;
     }

     .faq-body {
         font-size: 14px;
     }

     /* Soften decor visuals */
     .faq-decor {
         width: 120px;
         height: 120px;
         opacity: 0.25;
     }

     .faq-decor-left {
         left: -115px;
     }

     .faq-decor-right {
         right: -115px;
     }
 }







 /* SECTION */
 .connect-section {
     position: relative;
     padding: 40px 20px;
     background: #fff;
     overflow: hidden;
     text-align: center;
 }

 /* HEADING */
 .connect-heading h2 {
     font-size: 36px;
     font-weight: 700;
     margin-bottom: 40px;
 }

 .connect-heading span {
     color: #ff8a00;
 }

 /* DECORATIVE BACKGROUNDS */
 .bg-decor {
     position: absolute;
     width: 400px;
     height: 340px;
     /* opacity: 0.35; */
     z-index: 0;

     /* placeholder look */
     background: url(../img/sk-images/contact-corner.png) no-repeat center / contain;
     border: none;

 }

 /* TOP RIGHT IMAGE */
 .bg-top-right {
     top: 0;
     right: 0;
 }

 /* BOTTOM LEFT IMAGE */
 .bg-bottom-left {
     bottom: 0;
     left: -200px;
 }

 /* FORM CARD */
 .credentials-card {
     position: relative;
     z-index: 2;
     margin: auto;
     max-width: 650px;
     background: #fff;
     border-radius: 28px;
     border: 2px solid #ff8a00;
     padding: 25px 34px;
     box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
 }

 .credentials-card h3 {
     font-size: 26px;
     font-weight: 700;
 }

 .subtitle {
     font-size: 14px;
     margin-top: 6px;
     color: #444;
 }

 /* FORM */
 .credentials-form {
     margin-top: 30px;
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .credentials-form input,
 .credentials-form textarea {
     width: 100%;
     padding: 14px 18px;
     border-radius: 18px;
     border: 2px solid #ff8a00;
     font-size: 14px;
     outline: none;
 }

 .credentials-form input,
 select {
     width: 100%;
     padding: 14px 18px;
     border-radius: 18px;
     border: 2px solid #ff8a00;
     font-size: 14px;
     outline: none;
 }


 .credentials-form input,
 select,
 option {
     width: 100%;
     padding: 14px 18px;
     border-radius: 18px;
     border: 2px solid #ff8a00;
     font-size: 14px;
     outline: none;
 }


 .credentials-form textarea {
     resize: none;
     height: 90px;
 }

 /* PHONE ROW */
 .phone-row {
     display: flex;
     gap: 12px;
 }

 .country-box {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 0 14px;
     border-radius: 18px;
     border: 2px solid #ff8a00;
 }



 /* TEXTS */
 .otp-text {
     font-size: 13px;
     color: #333;
 }

 .policy-text {
     font-size: 16px;
     color: #333;
 }



 @media (max-width: 768px) {

     .bg-decor {
         width: 160px;
         height: 160px;
         opacity: 0.25;
     }

     .credentials-card {
         padding: 32px 22px;
     }

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

     .connect-section {
         width: 90%;
     }
 }

 /* MAP CONTAINER */
 .map-box {
     position: relative;
     width: 100%;
     height: 365px;
     /* matches iframe height */
     border-radius: 26px;
     overflow: hidden;

     /* premium frame look */
     /* border: 2px solid #ff8a00; */
     /* box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); */

     background: #fff;
 }

 /* IFRAME RESET */
 .map-box iframe {
     width: 100%;
     height: 100%;
     border: 0 !important;
     /* override inline border */
     border-radius: 22px;
 }

 /* OPTIONAL: soft overlay polish (can remove if not needed) */
 .map-box::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 26px;
     pointer-events: none;
     /* box-shadow: inset 0 0 0 1px rgba(255, 138, 0, 0.25); */
 }

 @media (max-width: 768px) {
     .map-box {
         height: 260px;
         border-radius: 18px;
     }

     .map-box iframe {
         border-radius: 16px;
     }
 }

 .enquiry-section {
     padding: 80px 20px;
     background: #fff;
 }

 .enquiry-title {
     text-align: center;
     font-size: 38px;
     font-weight: 700;
     margin-bottom: 50px;
 }

 .enquiry-title span {
     color: #ff8a00;
 }

 .enquiry-wrapper {
     /* max-width: 1100px; */
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;

 }

 .enquiry-info {
     display: flex;
     flex-direction: column;
     gap: 36px;
 }

 .info-row {
     display: flex;
     gap: 20px;
     padding-bottom: 20px;
     border-bottom: 2px solid #2f2f85;
 }



 .info-row h4 {
     font-size: 18px;
     margin-bottom: 6px;
 }

 .info-row p {
     font-size: 14px;
     color: #333;
 }



 @media (max-width: 768px) {
     .enquiry-wrapper {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .map-box {
         height: 220px;
     }
 }



 @media (max-width: 768px) {
     .hero-img-cont {
         height: 160px;
         display: none;
     }

     .coin-img {
         width: 50px;
     }

     .about-title {
         font-size: 28px;
     }

     .process {
         margin-bottom: 0px !important;
     }

     .about-right-title {
         margin-top: 20px;
     }


 }




 /* =========================================
   MOBILE OFFCANVAS NAV – PREMIUM UI
========================================= */

 @media (max-width: 1003px) {
     .navbar-toggler-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 44px;
         height: 44px;
         border-radius: 10px;
         background: rgba(0, 0, 0, 0.05);
     }

     .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27,27,58,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     }

     .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     }

     /* Offcanvas panel */
     .offcanvas#offcanvasNavbar {
         background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
         width: 50%;
         /* max-width: 320px; */
         /* padding: 24px 18px; */
         border-left: none;
         box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
         height: 100vh !important;
     }

     .navigations-list {
         /* background-color: #ffffff; */
         margin-left: unset !important;
         padding: 0px;
         width: 100% !important;
         height: 100vh !important;
     }

     .navigations-list .apply-res {
         display: none;
     }

     .navigations-list li a {
         border-bottom: 1px solid #0a0a20c5;
     }

     /* Remove default ul look */
     .offcanvas#offcanvasNavbar .navbar-nav {
         align-items: stretch !important;
         gap: 0px !important;
         margin-top: 0px;
         border-radius: 0px !important;
     }

     .offcanvas#offcanvasNavbar .nav-link {
         border-radius: 0px !important;
     }

     .offcanvas#offcanvasNavbar .nav-link:hover {
         border-bottom: 1px solid #0a0a2074;
     }

     /* Nav items */
     .offcanvas#offcanvasNavbar .nav-item {
         width: 100%;
     }

     /* Links */
     .offcanvas#offcanvasNavbar .nav-link {
         width: 100%;
         padding: 14px 16px;
         border-radius: 10px;
         font-size: 16px;
         font-weight: 500;
         color: #1b1b3a;
         display: flex;
         align-items: center;
         justify-content: space-between;
         transition: all 0.3s ease;
     }

     /* Right arrow indicator */
     .offcanvas#offcanvasNavbar .nav-link::after {
         content: "›";
         font-size: 20px;
         opacity: 0.4;
         transition: transform 0.3s ease;
     }

     /* Hover & active */
     .offcanvas#offcanvasNavbar .nav-link:hover,
     .offcanvas#offcanvasNavbar .nav-link.active {
         background: rgba(247, 127, 0, 0.1);
         color: #f77f00;
     }

     .offcanvas#offcanvasNavbar .nav-link:hover::after,
     .offcanvas#offcanvasNavbar .nav-link.active::after {
         transform: translateX(4px);
         opacity: 1;
     }

     /* CTA button wrapper */
     .offcanvas#offcanvasNavbar .apply-btn {
         width: 100%;
         margin-top: 14px;
         padding: 14px 18px;
         font-size: 16px;
         font-weight: 600;
         border-radius: 12px;
         background: linear-gradient(135deg, #f77f00, #ff9f1c);
         color: #ffffff;
         text-align: center;
         box-shadow: 0 10px 25px rgba(247, 127, 0, 0.35);
         transition: transform 0.25s ease, box-shadow 0.25s ease;
     }

     .offcanvas#offcanvasNavbar .apply-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 14px 30px rgba(247, 127, 0, 0.45);
     }

     /* Toggler button (hamburger) */
     .navbar-toggler-btn {
         border: none;
         background: transparent;
         padding: 6px;
     }

     .navbar-toggler-icon {
         filter: invert(0.2);
     }

     .hero-img-cont {
         height: 100px;
     }

     .hero-img-cont img {
         width: 45px;
     }

     .herohome {
         width: 150px !important;
         left: -16%;
         top: 115px;
     }

     .bg-decor {
         width: 230px;
         height: 200px;
     }


     .front-page-hero canvas {
         opacity: 0.45;
     }

     .salary-faq-accordion .faq-item {
         padding: 5px 10px;
     }

     .accordion-header {
         padding: 5px 0px;
     }

     .testimonial-wrapper {
         overflow: hidden;
     }

     .testimonial-content {
         margin-top: 150px;
         padding: 30px 15px;
     }

     .steps-wrapper::before {
         display: none;
     }

     .step-card {
         width: 100%;
     }

     .about-us-list {
         width: 50%;
         text-align: center;
     }

     .about-us-list li {
         line-height: 1;
         margin-bottom: 15px;
         font-size: 13px;
     }

     .quote-new span {
         display: none;
     }

     .clients-stack-wrapper {
         right: 0px;
         rotate: 90deg;
         margin-top: -300px;
     }

     .client-card img {
         rotate: -90deg;
     }

     .client-card .info {
         rotate: -90deg;
         position: relative;
         right: 50px;
         text-align: center;
     }

     .clients-stack {
         rotate: 360deg;
     }

     .salary-faq-accordion .faq-btn {
         padding: 8px 20px;
     }

     .coin-img:nth-child(2) {
         left: 1%;
         top: 110px;
     }

     .coin-img:nth-child(3) {
         left: 13%;
         top: 31px;
     }

     .coin-img:nth-child(4) {
         left: 27%;
         top: -27px;
     }

     .coin-img:nth-child(5) {
         left: 43%;
         top: -40px;
     }

     .coin-img:nth-child(7) {
         top: 20px;
         left: 75%;
     }

     .coin-img:nth-child(8) {
         top: 95px;
         left: 91%;
     }

     .coin-img:nth-child(9) {
         display: none;
     }


     .herohand {
         width: 150px !important;
         left: 73%;
         top: 115px;
     }

     .hero-sec-cont {
         width: 85%;
     }

     .hero-sec-cont h1 {
         font-size: 30px;
     }
     .about-img-box img{
        width: 100%;
     }

     .hero-sec-cont h1 span {
         font-size: 35px;
     }

     .repay-bg {
         width: 300px !important;
         height: 200px !important;
     }

  

     .repay-hero-left .col-md-6 {
         width: 35%;
     }

     .repay-hero-left .col-md-6 .repay-step {
         text-align: center;
     }

     .repay-hero-left .col-md-6 .repay-step p {
         text-align: center;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
     }

     .repay-hero-left .col-md-6 .repay-step {
         display: flex;
         justify-content: space-between;
         flex-direction: column;
         align-items: center;
         height: 250px;
         box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
         border-radius: 12px;
         border: 2px solid #ff8a0057;
     }

     .repay-hero-left .col-md-6 .repay-step p {
         padding: 20px 0px;
     }

     .line {
         top: 305px;
     }

     .step-icon img {
         width: 90px;
     }

 }


 @media (max-width: 768px) {
     section {
         padding: 30px 0px !important;
         margin: 0px auto !important;
     }

     .navbar-toggler-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 44px;
         height: 44px;
         border-radius: 10px;
         background: rgba(0, 0, 0, 0.05);
     }

     .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27,27,58,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     }

     .about-us-list {
         width: 100%;
     }

     .about-us-list li {
         line-height: 1;
         margin-bottom: 15px;
         font-size: 13px;
     }

     .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     }

     /* Offcanvas panel */
     .offcanvas#offcanvasNavbar {
         background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
         width: 50%;
         /* max-width: 320px; */
         /* padding: 24px 18px; */
         border-left: none;
         box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
         height: 100vh !important;
     }

     .navigations-list {
         /* background-color: #ffffff; */
         margin-left: unset !important;
         padding: 0px;
         width: 100% !important;
         height: 100vh !important;
     }

     .navigations-list .apply-res {
         display: none;
     }

     .navigations-list li a {
         border-bottom: 1px solid #0a0a20c5;
     }

     /* Remove default ul look */
     .offcanvas#offcanvasNavbar .navbar-nav {
         align-items: stretch !important;
         gap: 0px !important;
         margin-top: 0px;
         border-radius: 0px !important;
     }

     .offcanvas#offcanvasNavbar .nav-link {
         border-radius: 0px !important;
     }

     .offcanvas#offcanvasNavbar .nav-link:hover {
         border-bottom: 1px solid #0a0a2074;
     }

     /* Nav items */
     .offcanvas#offcanvasNavbar .nav-item {
         width: 100%;
     }

     /* Links */
     .offcanvas#offcanvasNavbar .nav-link {
         width: 100%;
         padding: 14px 16px;
         border-radius: 10px;
         font-size: 16px;
         font-weight: 500;
         color: #1b1b3a;
         display: flex;
         align-items: center;
         justify-content: space-between;
         transition: all 0.3s ease;
     }

     /* Right arrow indicator */
     .offcanvas#offcanvasNavbar .nav-link::after {
         content: "›";
         font-size: 20px;
         opacity: 0.4;
         transition: transform 0.3s ease;
     }

     /* Hover & active */
     .offcanvas#offcanvasNavbar .nav-link:hover,
     .offcanvas#offcanvasNavbar .nav-link.active {
         background: rgba(247, 127, 0, 0.1);
         color: #f77f00;
     }

     .offcanvas#offcanvasNavbar .nav-link:hover::after,
     .offcanvas#offcanvasNavbar .nav-link.active::after {
         transform: translateX(4px);
         opacity: 1;
     }

     /* CTA button wrapper */
     .offcanvas#offcanvasNavbar .apply-btn {
         width: 100%;
         margin-top: 14px;
         padding: 14px 18px;
         font-size: 16px;
         font-weight: 600;
         border-radius: 12px;
         background: linear-gradient(135deg, #f77f00, #ff9f1c);
         color: #ffffff;
         text-align: center;
         box-shadow: 0 10px 25px rgba(247, 127, 0, 0.35);
         transition: transform 0.25s ease, box-shadow 0.25s ease;
     }

     .offcanvas#offcanvasNavbar .apply-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 14px 30px rgba(247, 127, 0, 0.45);
     }

     /* Toggler button (hamburger) */
     .navbar-toggler-btn {
         border: none;
         background: transparent;
         padding: 6px;
     }

     .navbar-toggler-icon {
         filter: invert(0.2);
     }



     .line {
         display: none;
     }

     .how-img {
         max-width: 220px;
     }

     .user-inf-details {
         align-items: center;
     }

     .testimonials-hdr {
         margin-bottom: 0px !important;
     }

     .hero-section {
         padding: 40px 0px 0px 0px;
         height: 90vh;
     }

     .about-section {
         padding: 0px;
         width: 90%;
         margin: 0px auto;
     }

     .offcanvas#offcanvasNavbar .nav-link:hover::after,
     .offcanvas#offcanvasNavbar .nav-link.active::after:hover {
         position: relative;
         left: 5px;
     }
 }


 /* COLORS */
 .text-orange {
     color: #ff8a00;
 }

 /* SECTION */
 .repay-section {
     position: relative;
     padding: 40px 0;
     background: #fff;
     overflow: hidden;
 }

 /* HEADING */
 .repay-title {
     font-size: 42px;
     font-weight: 700;
 }

 .repay-subtitle {
     font-size: 18px;
     color: #111;
     margin-top: 10px;
 }

 /* LEFT STEPS */
 .repay-step {
     padding: 10px 20px;
 }



 /* RIGHT CARD */
 .repay-card {
     background: #fff;
     border-radius: 30px;
     border: 2px solid #ff8a00;
     padding: 40px 32px;
     box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
 }

 .repay-card-title {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 28px;
 }

 /* FORM */
 .repay-form {
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .phone-row {
     display: flex;
     gap: 12px;
 }

 .country-box {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 0 14px;
     border-radius: 18px;
     border: 2px solid #ff8a00;
 }



 .repay-form input {
     flex: 1;
     padding: 14px 18px;
     border-radius: 18px;
     border: 2px solid #ff8a00;
     outline: none;
 }

 .otp-text {
     font-size: 14px;
     color: #333;
 }

 /* BUTTON */
 .repay-btn {
     padding: 14px;
     border-radius: 40px;
     border: none;
     background: #ff8a00;
     color: #fff;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
 }

 /* PAYMENT ICONS */
 .payment-icons {
     margin-top: 16px;
     display: flex;
     justify-content: space-between;
     gap: 10px;
 }


 /* DECORATIVE BACKGROUND */
 .repay-bg {
     position: absolute;
     width: 500px;
     height: 340px;
     /* opacity: 0.35; */
     z-index: 0;

     /* placeholder look */
     background: url(../img/sk-images/contact-corner.png) no-repeat center / contain;
     border: none;
 }

 .repay-bg-top {
     top: 0;
     right: -110px;
 }

 .repay-bg-bottom {
     bottom: 0;
     left: -250px;
     opacity: 0.15;
 }

 @media (max-width: 992px) {
     .repay-title {
         font-size: 34px;
     }

     .repay-card {
         margin-top: 20px;
     }
 }

 @media (max-width: 576px) {
     .repay-title {
         font-size: 28px;
     }

     .step-icon {
         width: 60px;
         height: 60px;
     }

     .repay-bg {
         width: 160px;
         height: 160px;
     }
 }





 @media (max-width: 768px) {
     .quote-new span {
         display: none;
     }

     .about-right-title {
         text-align: center;
     }

     .about-list {
         text-align: center;
     }

     .about-list li {
         line-height: 1.5;
         font-size: 15px;
     }

     .repay-hero-left .col-md-6 {
         width: 50%;
     }

     .repay-hero-left .col-md-6 .repay-step {
         text-align: center;
     }

     .repay-hero-left .col-md-6 .repay-step p {
         text-align: center;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .repay-hero-left .col-md-6 .repay-step {
         display: flex;
         justify-content: space-between;
         flex-direction: column;
         align-items: center;
         height: 255px;
         box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
         border-radius: 12px;
         border: 2px solid #ff8a0057;
     }

     .resp-m-center {
         margin: 0px auto;
     }
     .repay-btn{
        padding: 8px;
     }
 }

 @media (max-width: 1399px) {
     .line {
         top: 308px;
     }

     .orbit-ring {
         width: 420px;
         height: 420px;
     }

     .clients-stack-wrapper {
         width: 500px;
         height: 500px;
         right: 400px;
     }

     .testimonial-content {
         position: relative;
         right: 80px;
     }

     .aboutus-img {
         width: 100%;
     }

     .resp-m-center .col-lg-7,
     .col-lg-5 {
         width: 100%;
     }

     .repay-card {
         padding: 100px 70px;
     }

     .steps-wrapper {
         width: 100%;
     }

     .steps-scroll {
         margin: 0px auto;
     }

     .steps-wrapper::before {
         display: none;
     }

     .step-indicators {
         flex-direction: row;
         gap: 45px;
     }

     .how-left {
         flex-direction: column;
     }

     .indicator {
         width: 30px;
         height: 12px;

     }
 }