@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Questrial&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {
    --ink: #0a0a0a;
    --bg1: #f0eeee;
    --bg2: #fcfcfc;
    /* --default-color: #6ea84c; */
    --button-bg: #34355;
    --cont-bg: #0955;
    --color: #f39224;
    /* --font-family:"Questrial", sans-serif !important; */
    --font-family: "Outfit", sans-serif;
    --color1: #797979;
    /* --color1: #797979; */

    --font-family-num: "Google Sans", sans-serif;
}

html {
    scroll-behavior: smooth !important;
}
@media (max-width:992px) {
    body{
        padding: 0px 10px !important;
    }
}

body {
    text-transform: capitalize;
    font-family: var(--font-family) !important;
    scroll-behavior: smooth !important;
    /* max-width: 1400px !important; */
    /* margin: 0 auto !important; */
    background-color: var(--bg1) !important;

    /* margin: 0% 1% !important; */
    transition: scroll-behavior 2.6s ease-in-out !important;


}

/* Active sidebar navigation link */
#navpills .navbar-nav .nav-link.active {
    background-color: var(--color) !important;
    color: #ffffff !important;
    border-radius: 10px;
}

/* Active icon */
#navpills .navbar-nav .nav-link.active i {
    color: #ffffff !important;
}.wcc-stat span{
    margin-top: 5px !important;
    display: block;
    color: var(--tp-muted);
    font-size: 16px !important;
}
.wcc-stat i{  display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 17px;
    margin-bottom: 15px;
       background: var(--tp-orange) !important;
color: white !important;
}.modal_cv_bank{
    backdrop-filter: blur(6px) !important;
    background-color: rgba(85, 85, 85, 0.171) !important;
}

/* Smooth hover effect */
#navpills .navbar-nav .nav-link {
    transition: background-color .25s ease, color .25s ease;
}

/* Hover on inactive links */
#navpills .navbar-nav .nav-link:not(.active):hover {
    background-color: var(--bg2) !important;
    color: #ff0000;
    border-radius: 10px;
}

.round_10 {
    border-radius: 10px !important;
}

.web_main {
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-shadow: none !important;

}

body.white {
    font-family: "Urbanist", sans-serif;
    --bg1: #f5f5f5;
    --bg2: #fcfcfc;

    --color1: #1a1a1a;
    --color2: #000000;

    background-color: var(--bg1) !important;
}

body.black {


    --bg1: #1b1b1b;
    --bg2: #131212;
    --color1: #f5f5f5;
    --color2: #fcfcfc;

    background-color: var(--bg1) !important;

}

body.black h1 {

    color: var(--color1) !important;

}
.mod_T{
    color: white;
    background-color: var(--color) !important;
}
body.modal-open {
    overflow-y: scroll !important;
}
.modal-backdrop {
    height: 0% !important;
}
.meeting_pop{
    z-index: 92929292929 !important;
}
.bg_white {
    background-color: var(--bg2) !important;
}

.bg_dark1 {
    background-color: var(--bg1) !important;
}

.bg_dark2 {
    background-color: var(--bg2) !important;
}

.bg {
    background-color: var(--default-color) !important;
}

.text_dark1 {
    color: var(--color1) !important;
}

.text_dark2 {
    color: var(--color2) !important;
}

/* =========================================================
   MODERN HR HERO BANNER
   ========================================================= */

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

.carousel-item {
    overflow: hidden;
}

.carousel-item>img {
    object-fit: cover;

    transform: scale(1.01);
}


/* Dark cinematic overlay */

.carousel-item::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .62) 0%,
            rgba(0, 0, 0, .40) 45%,
            rgba(0, 0, 0, .20) 100%);
}


/* Keep banner content above overlay */

.hr-hero-content {
    z-index: 5;
}


/* Keep your existing bottom circle above overlay */

.round_car_Div {
    z-index: 20;
}


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

.hr-hero-eyebrow {
    animation: hrFadeDown .8s ease both;
}

.hr-hero-title {
    animation: hrFadeUp .9s ease .1s both;
}

.hr-hero-description {
    animation: hrFadeUp .9s ease .2s both;
}

.hr-hero-actions {
    animation: hrFadeUp .9s ease .3s both;
}

.hr-hero-highlights {
    animation: hrFadeUp .9s ease .4s both;
}


@keyframes hrFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}


@keyframes hrFadeDown {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

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

}


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

@media (max-width: 991px) {

    .hr-hero-content {
        padding-bottom: 100px;
    }

    .hr-hero-title {
        font-size: clamp(42px, 7vw, 65px);
        letter-spacing: -2.5px;
    }

    .hr-hero-description {
        font-size: 14px;
        max-width: 600px;
    }

    .hr-highlight {
        padding: 0 15px;
    }

}


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

@media (max-width: 767px) {

    .hr-hero-content {
        padding: 25px 12px 90px;
    }

    .hr-hero-eyebrow {
        font-size: 8px;

        letter-spacing: 1.8px;

        margin-bottom: 16px;
    }

    .hr-eyebrow-line {
        width: 22px;
    }

    .hr-hero-title {
        width: 96%;

        font-size: clamp(36px, 10vw, 50px);

        line-height: 1.04;

        letter-spacing: -1.8px;
    }

    .hr-hero-title span {
        white-space: normal;
    }

    .hr-hero-title span::after {
        bottom: -4px;
        height: 2px;
    }

    .hr-hero-description {
        width: 92%;

        margin-top: 20px;

        font-size: 12px;

        line-height: 1.65;
    }

    .hr-hero-actions {
        margin-top: 23px;

        gap: 9px;
    }

    .hr-primary-btn,
    .hr-secondary-btn {
        min-height: 48px;

        font-size: 11px;
    }

    .hr-primary-btn {
        padding-left: 17px;
        gap: 12px;
    }

    .hr-primary-btn i {
        width: 32px;
        height: 32px;
    }

    .hr-secondary-btn {
        padding: 0 15px;
    }

    .hr-hero-highlights {
        margin-top: 25px;

        padding-top: 15px;

        gap: 10px;
    }

    .hr-highlight {
        padding: 0 8px;

        gap: 7px;
    }

    .hr-highlight>i {
        width: 27px;
        height: 27px;

        font-size: 10px;
    }

    .hr-highlight strong {
        font-size: 8px;
    }

    .hr-highlight small {
        font-size: 7px;
    }

    .hr-highlight+.hr-highlight {
        border-left: none;
    }

}


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

@media (max-width: 480px) {

    .hr-hero-title {
        font-size: 34px;
    }

    .hr-hero-description {
        font-size: 11px;
    }

    .hr-hero-actions {
        width: 100%;
    }

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

    .hr-hero-highlights {
        display: none;
    }

}


/* loader */
#loader {
    z-index: 1115000 !important;
    display: block;
    position: fixed;
    width: 100%;
    top: 0px !important;
    background-color: rgb(255, 255, 255);
    height: 100vh !important;
}

/* Loader animation */
.ad {
    animation: fadeIn 1.2s ease-in-out !important;
    /* animation-duration: 0.2s !important; */
}

/* FadeIn animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* From Uiverse.io by Shoh2008 */
.loader {
    position: relative;
    border-style: solid;
    box-sizing: border-box;
    border-width: 40px 60px 30px 60px;
    border-color: var(--color) #ffa640 #f39224 #f39224c7;
    animation: envFloating 1s ease-in infinite alternate;
}

.loader:after {
    content: "";
    position: absolute;
    right: 62px;
    top: -40px;
    height: 70px;
    width: 50px;
    background-image: linear-gradient(#bdbdbd 45px, transparent 0),
        linear-gradient(#bdbdbd 45px, transparent 0),
        linear-gradient(#bdbdbd 45px, transparent 0);
    background-repeat: no-repeat;
    background-size: 30px 4px;
    background-position: 0px 11px, 8px 35px, 0px 60px;
    animation: envDropping 0.75s linear infinite;
}

@keyframes envFloating {
    0% {
        transform: translate(-2px, -5px)
    }

    100% {
        transform: translate(0, 5px)
    }
}

@keyframes envDropping {
    0% {
        background-position: 100px 11px, 115px 35px, 105px 60px;
        opacity: 1;
    }

    50% {
        background-position: 0px 11px, 20px 35px, 5px 60px;
    }

    60% {
        background-position: -30px 11px, 0px 35px, -10px 60px;
    }

    75%,
    100% {
        background-position: -30px 11px, -30px 35px, -30px 60px;
        opacity: 0;
    }
}

/* loader */
.card-title {
    transition: 2s ease-in-out !important;
}

.stats_cont .card {
    background-color: var(--bg2) !important;
}

body {
    font-family: "Outfit", sans-serif !important;
}

.bg-d {
    background-color: rgb(233, 233, 233);
    border-radius: 2px;
}

.bg-d>i {
    font-size: 12px;
}

.span-head {
    font-size: 13px;
    color: var(--color1) !important;
}


.carousel {
    box-shadow: none !important;
}

.carousel-item>img {
    border-radius: 10px !important;
    background-position: center !important;
    background-size: cover !important;
    object-fit: cover !important;
    max-height: 800px !important;
}

.circle {
    width: 160px !important;
    height: 140px !important;
    background-color: var(--bg1);
    /* display: inline-flex; */
    justify-content: center;
    border-radius: 250px 250px 0 0 !important;
    /* position: relative; */
}

.shape svg {
    box-shadow: none !important;
    fill: var(--bg1) !important;
}

.shape svg {
    height: 100px !important;
    width: 50px !important;

}

.shape-left {
    /* height: 40px !important; */
    /* background-color: rebeccapurple !important; */
    position: absolute !important;
    bottom: -25.9px !important;
    left: -30.1% !important;
    transform: rotate(180deg) !important;
    z-index: 10100101 !important;


}

.shape-right {
    /* height: 40px !important; */
    z-index: 10100101 !important;

    /* background-color: rgb(87, 230, 51) !important; */
    position: absolute !important;
    bottom: -25.9px !important;

    right: -30.9% !important;
    transform: rotate(-90deg) !important;
}

/* Rotating text */
.circle-text {
    position: absolute;
    inset: 0;
    padding: 10px !important;
    width: 100%;
    height: 100%;

    animation: rotateCircleText 12s linear infinite;
}

.circle-text svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.circle-text text {
    /* padding: 15px !important;  */
    fill: var(--color1);
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* Center image */
.circle-icon-img {
    width: 85px;
    height: 85px;

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

    border-radius: 50%;

    background: var(--bg2) !important;

    position: relative;
    z-index: 2;
}

.carousel-control-next {
    display: none !important;
    /* background-color: red !important; */
}

.circle-icon-img img {
    width:
        55px;
    height:
        55px;
    object-fit: contain;
}


/* Rotation */
@keyframes rotateCircleText {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* =================== NAVBAR CSS OF SERVICE DROPDOWN CODE START ===================== */
.mega {

    position: relative
        /* ba */
}
/* =============== SCROLL BAR CSS CODE START ================ */
#scrollProgressBar {
    position: fixed !important;
    top: 0px !important
    ;
    left: 0;
    width: 30%;
    height: 4px;
    background: var(--color, #f39224);
    z-index: 99999999999999999 !important;
    transition: width 0.08s linear;
    pointer-events: none;
}
/* =============== SCROLL BAR CSS CODE END ================== */
/* WI CAREER DROPDOWN */
.navbar .career_dropdown {
    background-color: var(--bg2) !important;
    min-width: 220px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
.navbar .career_dropdown .career_item {
    font-weight: 300 !important;
    font-size: 13.5px !important;
    color: var(--color2) !important;
}
.navbar .career_dropdown li:hover .career_item {
    color: var(--color) !important;
    background-color: transparent !important;
    /* background-color: var(--color) !important; */
}
/* =================== NAV-LINK ACTIVR CODE START ==================== */

/* =========================================
   WI HR NAVBAR — MODERN ACTIVE LINK ANIMATION
   Only CSS | Existing HTML & JS unchanged
========================================= */

.navbar-nav.nav_lg > .nav-item > .nav-link {
    position: relative;
    transition:
        color 0.35s ease,
        transform 0.35s cubic-bezier(.2, .8, .2, 1);
}

/* Animated underline */
.navbar-nav.nav_lg > .nav-item > .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 20px;
    background: var(--color, #f39224);
    transform: translateX(-50%);
    transition:
        width 0.4s cubic-bezier(.16, 1, .3, 1),
        opacity 0.3s ease;
    opacity: 0;
}

/* Hover */
.navbar-nav.nav_lg > .nav-item > .nav-link:hover {
    color: var(--color, #f39224) !important;
    transform: translateY(-2px);
}

.navbar-nav.nav_lg > .nav-item > .nav-link:hover::after {
    width: 65%;
    opacity: 1;
}

/* Active page */
.navbar-nav.nav_lg > .nav-item > .nav-link.active,
.navbar-nav.nav_lg > .nav-item > .nav-link[aria-current="page"],
.navbar-nav.nav_lg > .nav-item > .nav-link.wi-nav-active {
    color: var(--color, #f39224) !important;
}

.navbar-nav.nav_lg > .nav-item > .nav-link.active::after,
.navbar-nav.nav_lg > .nav-item > .nav-link[aria-current="page"]::after,
.navbar-nav.nav_lg > .nav-item > .nav-link.wi-nav-active::after {
    width: 65%;
    opacity: 1;
}

/* Services & Career dropdown links */
.navbar-nav.nav_lg .panel a,
.navbar-nav.nav_lg .career_dropdown .dropdown-item {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        padding-left 0.3s ease;
}

.navbar-nav.nav_lg .panel a:hover,
.navbar-nav.nav_lg .career_dropdown .dropdown-item:hover {
    color: var(--color, #f39224) !important;
    padding-left: 1.2rem;
}

.navbar-nav.nav_lg .panel a i,
.navbar-nav.nav_lg .career_dropdown .dropdown-item i {
    transition: transform 0.3s ease;
}

.navbar-nav.nav_lg .panel a:hover i,
.navbar-nav.nav_lg .career_dropdown .dropdown-item:hover i {
    transform: translateX(3px);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav.nav_lg *,
    .navbar-nav.nav_lg *::before,
    .navbar-nav.nav_lg *::after {
        transition: none !important;
        animation: none !important;
    }
}
.navbar .fa-bars{
    color: var(--color1) !important;
}
/* =================== NAV-LINK ACTIVR CODE END ================================ */

.navbar .career_dropdown i{
    
    border-radius: 20px !important;
    padding: 8px !important;
    color: var(--color) !important;
    background-color: var(--bg1) !important;
    font-size: 12px !important;
    margin-right: 5px !important;
    /* margin: 0px 4px !important; */

}

/* SHOW DROPDOWN ON HOVER — DESKTOP */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover > .career_dropdown,
    .navbar .nav-item.dropdown:focus-within > .career_dropdown {
        display: block !important;
        margin-top: 0;
    }
}

/* DROPDOWN ITEMS */
.navbar .career_item {
    display: block;
    padding: 12px 14px;
    border-radius: 9px;
    font-family: var(--font-family, "Outfit", sans-serif);
    color: var(--ink, #0a0a0a);
    transition: background-color 0.25s ease,
                color 0.25s ease,
                transform 0.25s ease;
}

.navbar .career_item:hover,
.navbar .career_item:focus {
    background: rgba(243, 146, 36, 0.12);
    color: var(--color, #f39224);
    transform: translateX(3px);
}
.panel {
    z-index: 929292992 !important;
    position: absolute;
    right: 50% !important;
    transform: translateX(50%) !important;

    top: 140%;
    width: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 14px;
    background-color: var(--bg2);
    /* border: 1px solid var(--line); */
    /* border-radius: 20px; */
    /* box-shadow: 0 30px 60px rgba(0, 0, 0, .15); */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: .3s
}
 .on{color:var(--color2) !important}

.mega:hover .panel {
    opacity: 1;
    visibility: visible;
    transform: none
}

.panel a {
    text-decoration:none !important;
    color: var(--color2) !important;
    display: flex;
    gap: 12px;
    opacity: .9 ;
    /* letter-spacing: -0.9px !important; */
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 400 !important;
    font-size: 14px !important ;
}

.panel a:hover {
    /* background: var(--color) !important; */
    color: white !important;
}

.panel i {
    border-radius: 50px !important;
    padding: 8px !important;
    background-color: var(--bg1) !important;
    color: var(--color) !important;
    font-size: 12px !important;
}

/* =================== NAVBAR CSS OF SERVICE DROPDOWN CODE END ========================== */
.circle-icon {
    padding: 15px !important;
    border-radius: 56% !important;
    height: 80% !important;
    width: 70% !important;
    background-color: var(--bg1);
    /* margin-top: 150px !important; */
}

/*  */
.nav_lg .nav-item  {
  
    margin: 0% 2.5% !important;

}

.nav_lg .nav-item .nav-link {
    /* background-color: red !important; */
    font-size: 17px;
    margin: 0% 12% !important;
    font-weight: 100px !important;
    color: var(--color1);
}

@media (max-width:992px) {
    .fixtop {
        padding: 14px 0px !important;
    }
}

nav {
    background-color: white !important;
}

/* ==================== MOBILE SCREEN CODE START ==================== */

/* ==========================================
   WI HR — MOBILE OFFCANVAS NAVBAR
========================================== */

.mobile-menu {
  --mobile-accent: #f39224;
  --mobile-text: #252525;
  --mobile-muted: #797979;
  --mobile-border: rgba(0, 0, 0, 0.08);

  width: min(420px, 90vw) !important;
  max-width: 100%;
  border: 0;
  z-index: 9999999999292929292 !important;
  background: var(--bg2, #fcfcfc);
  color: var(--mobile-text);
  box-shadow: -15px 0 60px rgba(0, 0, 0, 0.12);
}

.mobile-menu .offcanvas-header {
  z-index: 9999999999292929292 !important;
  padding: 22px 24px;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--mobile-border);
}

.mobile-menu-logo {
  display: inline-flex;
  align-items: center;
  width: 175px;
  max-width: 72%;
}

.mobile-menu-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.mobile-menu-close {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--mobile-border);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 19px;
  transition: 0.3s ease;
}

.mobile-menu-close:hover {
  background: var(--mobile-accent);
  color: #fff;
  transform: rotate(90deg);
}

.mobile-menu-body {
  display: flex;
  flex-direction: column;
  padding: 25px 24px 18px;
  overflow-x: hidden;
}

.mobile-menu-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: var(--mobile-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.mobile-menu-label span {
  width: 20px;
  height: 2px;
  background: var(--mobile-accent);
}

.mobile-nav-list {
  width: 100%;
  gap: 5px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 53px;
  padding: 11px 12px !important;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--mobile-text) !important;
  text-align: left;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: rgba(243, 146, 36, 0.09);
  border-color: rgba(243, 146, 36, 0.15);
}

.mobile-nav-link:hover {
  transform: translateX(3px);
}

.mobile-nav-icon {
  display: none !important;
  justify-content: center;
  align-items: center;
  /* width: 35px; */
  /* height: 35px; */
  flex: 0 0 35px;
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.09);
  color: var(--mobile-accent);
  font-size: 1px !important;
}

.mobile-nav-arrow {
  margin-left: auto;
  color: var(--mobile-muted);
  font-size: 11px;
  opacity: 0.65;
}

.mobile-service-toggle {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.mobile-service-chevron {
  margin-left: auto;
  color: var(--mobile-muted);
  font-size: 12px;
  transition: transform 0.3s ease;
}

.mobile-service-toggle[aria-expanded="true"]
.mobile-service-chevron {
  transform: rotate(180deg);
  color: var(--mobile-accent);
}

.mobile-services-collapse {
  padding-left: 19px;
}

.mobile-services-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 10px 0;
  padding: 10px 0 5px 14px;
  border-left: 1px solid rgba(243, 146, 36, 0.4);
}

.mobile-service-link,
.mobile-service-overview {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 10px;
  border-radius: 9px;
  color: var(--mobile-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: 0.25s ease;
}

.mobile-service-link i,
.mobile-service-overview i {
  width: 17px;
  font-size: 12px !important;
  flex-shrink: 0;
  color: var(--mobile-accent);
  text-align: center;
}

.mobile-service-link:hover,
.mobile-service-overview:hover {
  background: rgba(243, 146, 36, 0.09);
  color: var(--mobile-text);
  padding-left: 15px;
}

.mobile-service-overview {
  margin-bottom: 4px;
  color: var(--mobile-text);
  font-weight: 700;
}

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 23px;
}

.mobile-theme-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--mobile-border);
  border-radius: 15px;
}

.mobile-theme-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-theme-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(243, 146, 36, 0.1);
  color: var(--mobile-accent);
}

.mobile-theme-info strong,
.mobile-theme-info small {
  display: block;
}

.mobile-theme-info strong {
  font-size: 12px;
  font-weight: 700;
}

.mobile-theme-info small {
  margin-top: 3px;
  color: var(--mobile-muted);
  font-size: 10px;
}

.mobile-theme-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 39px;
  height: 39px;
  border: 0;
  border-radius: 50%;
  background: var(--bg_dark1, #252525);
  color: var(--bg_dark2, #ffffff);
  transition: transform 0.3s ease;
}

.mobile-theme-btn:hover {
  transform: rotate(-15deg) scale(1.06);
}

.mobile-contact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-radius: 13px;
  background: var(--mobile-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.mobile-contact-cta:hover {
  background: #db7b10;
  color: #fff;
  transform: translateY(-2px);
}

.mobile-contact-cta i {
  transition: transform 0.3s ease;
}

.mobile-contact-cta:hover i {
  transform: translateX(4px);
}

.mobile-menu-copyright {
  margin: 17px 0 0;
  color: var(--mobile-muted);
  font-size: 10px;
  text-align: center;
}

/* DARK THEME */
html.dark .mobile-menu,
body.dark .mobile-menu,
body.black .mobile-menu {
  --mobile-text: #f4f4f4;
  --mobile-muted: #a6a6a6;
  --mobile-border: rgba(255, 255, 255, 0.1);

  background: #17191c;
  color: #f4f4f4;
}

html.dark .mobile-nav-icon,
body.dark .mobile-nav-icon,
body.black .mobile-nav-icon {
  background: rgba(255, 255, 255, 0.07);
}

html.dark .mobile-theme-btn,
body.dark .mobile-theme-btn,
body.black .mobile-theme-btn {
  background: #f3f3f3;
  color: #252525;
}

/* SMALL SCREENS */
@media (max-width: 380px) {
  .mobile-menu {
    width: 92vw !important;
  }

  .mobile-menu .offcanvas-header {
    padding: 18px 16px;
  }

  .mobile-menu-body {
    padding: 20px 16px 15px;
  }

  .mobile-nav-link {
    gap: 10px;
    font-size: 13px;
  }

  .mobile-service-link {
    font-size: 11px;
  }
}

/* ==================== MOBILE SCREEN CODE END ========================== */
.max_width {
    max-width: 1400px !important;
    margin: 0% auto !important;
}

.navfix {
    position: fixed !important;
    top: 0% !important;
    z-index: 9292992 !important;
    width: 100% !important;

}

.carousel>.carousel-inner {
    width: 100%;
    /* min-height: 100vh !important; */
}

/* background-color: rgb(255, 255, 255);
  transition: 0.6s ease-in-out !important;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
  rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
  rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
  rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
  rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
  rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
} */



/* swiper */
/* swiper */
.org {
    background-color: var(--color);
    color: white !important;
}


/*  */
/* From Uiverse.io by vinodjangid07 */
.bookmarkBtn {
    width: 150px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.349);
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 0.3s;
    overflow: hidden;
}

.bookmarkBtn1 {
    width: 150px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid var(--color);
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 0.3s;
    overflow: hidden;
}

.active {
    font-weight: 500 !important;
    color: var(--color) !important;
}

.IconContainer {
    width: 30px;
    height: 30px;
    color: white !important;
    background-color: var(--color);
    /* background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255)); */
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    transition-duration: 0.3s;
}

.nav-items {
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 15px 16px !important;
    border-bottom: none !important;
    border-top: none !important;
    /* margin: 0px 6px !important; */
    border: 1px solid rgba(223, 223, 223, 0.276);
}

.icon {
    color: white !important;
    border-radius: 1px;
}

.text1 {
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color) !important;
    z-index: 1;
    transition-duration: 0.3s;
    font-size: 1.04em;
}

.text {
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
    transition-duration: 0.3s;
    font-size: 1.04em;
}

.bookmarkBtn:hover .IconContainer {
    width: 90px;
    transition-duration: 0.3s;
}

.bookmarkBtn:hover .text {
    transform: translate(10px);
    width: 0;
    font-size: 0;
    transition-duration: 0.3s;
}

.bookmarkBtn:active {
    transform: scale(0.95);
    transition-duration: 0.3s;
}

/*  */

/* ABOUT */
.about {
    /* height: 0vh; */
    object-fit: cover;
    background-size: cover;
    /* background-image: url("../images/paper.jpg"); */
}

.ab-img2 {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    object-fit: cover;
    background-size: cover;
    height: 400px;
    border-radius: 24px;
    background-image: url("../images/ab2.jpg");
}

.ab-img1 {
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    object-fit: cover;
    background-size: cover;
    height: 400px;
    background-image: url("../images/ab1.jpg");
}

.col-org {
    color: var(--color) !important;
}

.col-grey {
    color: var(--color1);
}

/* ABOUT */

/* SERVICE */

body.white .dhru {
    background-image: url("../images/service_img_light.jpg");

}

body.black .dhru {
    background-image: url("../images/service_img_dark.png");

}

.dhru {
    transition: 0.9s ease-in-out !important;
    background-size: cover;
    background-position: left center !important;
    /* object-fit: contain; */
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
}

#serv {
    background-color: var(--bg2) !important;
    margin: 0px !important;
    padding: 0px !important;
    background-position: center;
    margin: 0px;
    background-size: cover;
    object-fit: cover;
    /* padding: 60px 0px; */
}

.sercoll>i {
    background-color: white !important;
    color: var(--color) !important;
    /* font-size: 28px; */
}

#sercol {
    margin: 0px;
    padding: 0px;
}

.sercoll>h6 {
    padding-top: 10px;
    color: white;
    font-family: var(--font);
    text-align: center;
}

.sercoll {
    margin: 0px;
    /* padding-top: 60px !important; */
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color) !important;
    flex-direction: column;
    border: 1px solid #ffb04946;
    height: 250px;
    position: relative;
}

.seri {
    /* border: 2px solid red; */
    /* width: 100%; */
    object-fit: cover;
    background-position: right;
    background-size: cover;
    height: 250px;
    width: 100%;

    opacity: 0;
    transition: 0.5s ease;
    /* display: none; */
    position: absolute;
    background-image: url("../images/Untitled7.png");

}

.serj {
    /* border: 2px solid red; */
    /* padding: 50px 0px !important; */
    font-family: var(--font);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute;
    /* top: 0px; */
    color: white;
    text-align: center;
    height: 250px;
    /* border: 2px solid red; */
}

.sercoll:hover .seri {
    /* display: block; */
    opacity: 1;
    background-position: top;
}

.sercoll:hover .fa-arrow-right {
    /* visibility: visible; */
    display: block !important;
}

#ope {

    transition: 0.9s ease;
}

.sercoll:hover #ope {
    transform: translateY(-20px);
    /* border: 2px solid red; */
    /* background-color: transparent !important; */
    /* color: white !; */
}

.serj>i {
    padding: 10px 10px !important;
    border-radius: 50px;
    font-size: 34px;

}

.serj>h4 {
    padding: 15px 0px;

}

.serj>p {

    padding: 20px 0px;
    text-align: center;
    color: rgba(255, 255, 255, 0.755);
}

.serj>i {
    background-color: white !important;
    color: var(--color) !important;
    /* margin-bottom: 20px; */
    /* border: 2px solid green; */
}

.sercoll:hover .serj>i {
    background-color: transparent !important;
    color: white !important;
}

#ur {
    padding: 0px 50px;
}

/* SERVICE */

/* STATS */
.card {
    border-radius: 6px !important;
    border: none !important;
    /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
}

@media (max-width:992px) {

    .ft {
        font-size: 34px;
    }
}

/* STATS */
/* FAQS */
.panehead {
    background-color: var(--color);
}

.panehead>p {
    color: white !important;

}

.accordion-button {
    outline: 1px solid white !important;
    /* color: white !important; */
    /* background-color: var(--color) !important; */
}

.accordion-header {

    outline: none !important;
    border: none !important;
}

/* Style for the accordion button when expanded */
.accordion-button:not(.collapsed) {
    background-color: var(--color) !important;
    /* Dark background when expanded */
    color: white !important;
    letter-spacing: 0.3px;
    outline: none !important;
    border: none !important;
    text-transform: capitalize;
    /* White text when expanded */
}

/* Optional: style for the collapsed state if needed */
.accordion-button.collapsed {
    background-color: #ffffff;
    /* Lighter background when collapsed */
    color: #000;
    /* Black text when collapsed */
}

.accordion-body {
    margin: 4px 0px !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;
}

/* FAQS */



.car-img-2 {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    height: 85vh;
    border-radius: 32px;
    background-position: center;
    object-fit: cover;
    background-size: cover;
    /* height: 60vh; */
    background-image: url("../images/car2.png");
}

/* SERVICE-PAGE */
.ser-page {
    object-fit: cover;
    background-size: cover;
    background-position: center;
    height: 80vh !important;
    background-image: url("../images/Untitled7.png");

}

.cont-page {
    object-fit: cover;
    background-size: cover;
    background-position: center;
    height: 80vh !important;
    background-image: url("../images/Untitled8.png");

}

/* SERVICE-PAGE */

.btn-warnin {
    background-color: var(--color) !important;
    color: white !important;
}

.ab-cri-img {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

    border-radius: 10%;
    background-size: cover;
    object-fit: cover !important;
    height: 400px !important;
}

/* SWIPER */

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px !important;
    height: 300px !important;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

/* SWIPER */

input,
textarea {
    border-bottom: 1px solid rgb(187, 187, 187) !important;
    border: none;
    /* text-transform: capitalize !important; */
    /* border-radius: 7px; */

    transition: 0.9s ease-in-out;
    outline: none !important;
    font-size: 15px !important;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important; */
}

input::placeholder {
    font-style: 10px !important;
    transition: 0.9s ease-in-out;
    outline: none !important;


    color: var(--color1) !important;

}

.org1 {
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
    background-color: rgb(255, 254, 254);
}

a>i {
    font-size: 24px;
}

@media (max-width:992px) {
    .offcanvas {

        border: none !important;
        z-index: 111111 !important;
        width: 75% !important;
    }

    .nav-items {
        border: none !important;
    }
}

.offcanvas {
    transition: 1.2s ease-in-out !important;
}

input:focus {

    outline: none !important;
    /* background-color: #6c0e0e; */
    transition: 0.9s ease-in-out;
    border-bottom: 1.2px solid var(--color) !important;
}

/* postjobbg */
.postjobbg {
    height: 300px;
    background-color: var(--color);
}

label {
    font-family: var(--font-family) !important;

}

Input,
TextArea {
    font-family: var(--font-family) !important;
    padding: 10px 10px !important;
}

Input::placeholder {
    color: var(--color1) !important;
}

.form {
    font-family: var(--font) !important;
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; */
    padding: 35px;
    background-color: rgb(249, 249, 249);
}

.bfg {
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; */

    background-color: rgb(249, 249, 249) !important;

}

/* postjobbg */


.jobcard {
    border: 9px solid white;
}

.jobcont {
    background-image: url("../images/jobbanner.png");
    height: 90vh;
    object-fit: cover;
    background-size: cover;
}

.ino {
    color: #000 !important;
    border: none !important;
}

.custom-select {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
    /* Custom width */
    /* border: 1px solid #eeeeee; */
    /* border-radius: 150px !important; */
    /* border: 2px solid #4caf50 !important; Custom border color */
    border-radius: 28px !important;
    /* Rounded corners */
    background-color: #f9f9f9;
    /* Light background color */
    color: black !important;
    /* Text color */
}

.custom-select .ant-select-selector {
    /* border-color: #4caf50 !important; Apply border color to the selector */
    height: 45px;
    /* Adjust height */
    display: flex;
    align-items: center;
}

.custom-select .ant-select-arrow {
    color: black !important;
    padding: 6px;
    font-size: 9px;
    border-radius: 60px;
    /* background-color: var(--color); */
}

.custom-select .ant-select-selection-placeholder {
    /* color:var(--color) !important; Custom placeholder color */
    color: rgb(72, 72, 72) !important;
    text-transform: capitalize;
    font-weight: 300;
    font-family: var(--font-family) !important;
}



.col-grey1 {
    color: #747474cb;
}

.i0 {
    /* background-color: red !important; */
    color: #747474cb;
    font-weight: 400;
    border-radius: 50px;
    font-size: 14px;
}

@media (max-width:992px) {
    .i0 {
        border-radius: 10px !important;
    }
}

.bref {
    border-radius: 10px;
    color: white;
    background-color: var(--color) !important;
}

.fb1 {
    font-size: 30px;
}

.h-0 {
    height: 60vh !important;
}

/*  */
/* From Uiverse.io by PriyanshuGupta28 */
.spinner {
    position: absolute;
    width: 9px;
    height: 9px;
}

.spinner div {
    position: absolute;
    width: 50%;
    height: 150%;
    background: var(--color);
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner div:nth-child(1) {
    --delay: 0.1;
    --rotation: 36;
    --translation: 150;
}

.spinner div:nth-child(2) {
    --delay: 0.2;
    --rotation: 72;
    --translation: 150;
}

.spinner div:nth-child(3) {
    --delay: 0.3;
    --rotation: 108;
    --translation: 150;
}

.spinner div:nth-child(4) {
    --delay: 0.4;
    --rotation: 144;
    --translation: 150;
}

.spinner div:nth-child(5) {
    --delay: 0.5;
    --rotation: 180;
    --translation: 150;
}

.spinner div:nth-child(6) {
    --delay: 0.6;
    --rotation: 216;
    --translation: 150;
}

.spinner div:nth-child(7) {
    --delay: 0.7;
    --rotation: 252;
    --translation: 150;
}

.spinner div:nth-child(8) {
    --delay: 0.8;
    --rotation: 288;
    --translation: 150;
}

.spinner div:nth-child(9) {
    --delay: 0.9;
    --rotation: 324;
    --translation: 150;
}

.spinner div:nth-child(10) {
    --delay: 1;
    --rotation: 360;
    --translation: 150;
}

@keyframes spinner-fzua35 {

    0%,
    10%,
    20%,
    30%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    }

    50% {
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
    }
}

.divf {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    width: 92% !important;
    margin: auto !important;
    bottom: -30px !important;
    border-radius: 10px;
    width: 90% !important;
    position: absolute !important;
}

/* testimg */
.testimg {
    object-fit: cover !important;
    background-size: cover !important;
    height: 100vh;
    background-position: center !important;
    background-image: url("../images/people-taking-part-high-protocol-event.jpg");
}

/* .testimg1{
  background-color: white;
} */

.carslider {
    background-color: rgb(255, 255, 255) !important;
}

.imgc {
    transition: 0.9s ease-in-out !important;
    border-radius: 150px !important;
}

.tras {
    /* background-image: url("../images/test\ \(1\).jpg"); */
    transition: 0.9s ease-in-out !important;
}

.testimg1 {
    /* height: 100%; */
    background-color: rgba(255, 255, 255, 0.386) !important;
}

.c11 {
    background-color: var(--color) !important;
}

.testimg1 {
    transition: 0.9s ease-in-out !important;
}

/* testimg */

/* =========================
   EYEBROW
   ========================= */

.hr-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

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

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.8px;
    text-transform: uppercase;

    margin-bottom: 22px;
}

.hr-eyebrow-line {
    width: 34px;
    height: 2px;

    background: var(--color);

    display: inline-block;
}


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

.hr-hero-title {
    /* width: min(900px, 90%); */

    margin: 0;

    color: #ffffff;

    font-family: var(--font-family) !important;

    font-size: clamp(45px, 6vw, 82px);
    font-weight: 700;

    line-height: 1.02;
    letter-spacing: -3.5px;

    text-align: center;
    /* 
    text-shadow:
        0 8px 30px rgba(0, 0, 0, .28); */
}

.hr-hero-title span {
    color: var(--color);

    position: relative;

    white-space: nowrap;
}


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

.hr-hero-description {
    /* width: min(700px, 90%); */

    margin: 27px 0 0;

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

    font-size: 20px;
    font-weight: 400;

    line-height: 1.75;

    text-align: center;

    text-transform: none;
    /* 
    text-shadow:
        0 3px 15px rgba(0, 0, 0, .35); */
}

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

.hr-hero-actions {
    display: flex;

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

    gap: 14px;

    margin-top: 30px;

    flex-wrap: wrap;
}


/* Primary */

.hr-primary-btn {
    min-height: 54px;

    display: inline-flex;

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

    gap: 18px;

    padding: 0 8px 0 22px;

    background: var(--color);

    color: #ffffff;

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

    border-radius: 8px;

    text-decoration: none;

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

    letter-spacing: .2px;

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

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

.hr-primary-btn i {
    width: 38px;
    height: 38px;

    display: flex;

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

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

    border-radius: 6px;

    transition: transform .3s ease;
}

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

    transform: translateY(-3px);

    background: #e98418;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .25);
}

.hr-primary-btn:hover i {
    transform: translateX(3px);
}


/* Secondary */

.hr-secondary-btn {
    min-height: 54px;

    display: inline-flex;

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

    gap: 10px;

    padding: 0 22px;

    color: #ffffff;

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

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

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    backdrop-filter: blur(8px);

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

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

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

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

    transform: translateY(-3px);
}


/* =========================
   HR SERVICE HIGHLIGHTS
   ========================= */

.hr-hero-highlights {
    display: flex;

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

    flex-wrap: wrap;

    gap: 0;

    margin-top: 38px;

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

    padding-top: 20px;
}


/* Individual highlight */

.hr-highlight {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 0 25px;

    color: #ffffff;
}

.hr-highlight+.hr-highlight {
    border-left: 1px solid rgba(255, 255, 255, .20);
}


/* Icon */

.hr-highlight>i {
    width: 34px;
    height: 34px;

    display: flex;

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

    color: var(--color);

    font-size: 14px;

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

    border-radius: 50%;
}


/* Text */

.hr-highlight div {
    display: flex;

    flex-direction: column;

    text-align: left;
}

.hr-highlight strong {
    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    white-space: nowrap;
}

.hr-highlight small {
    margin-top: 3px;

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

    font-size: 9px;

    line-height: 1.3;

    white-space: nowrap;
}



/* ======================= ABOUT SECTION CODE START ======================= */
/* ==========================================
   ABOUT SECTION
========================================== */

.outsourcing-about-section {
    /* width: 100%; */
    color: var(--color1) !important;
    background-color: var(--bg1) !important;
    overflow: hidden;
}

.outsourcing-about-section .circle-icon {
    padding: 15px !important;
    border-radius: 56% !important;
    height: 80% !important;
    width: 80% !important;
    background-color: var(--bg1);
    /* margin-top: 150px !important; */
}

/* ==========================================
   LEFT CONTENT
========================================== */
.outsourcing-about-section .circle {
    width: 140px !important;
    height: 140px !important;
    background-color: var(--bg1);
    /* display: inline-flex; */
    justify-content: center;
    border-radius: 250px !important;

}

.about-subtitle {
    display: inline-block;

    margin-bottom: 15px;

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

    color: var(--color);

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


.about-title {
    margin: 0 0 20px;

    font-size: 48px;
    line-height: 1.15;

    font-weight: 500;

}


.about-description {
    margin: 0 0 30px;
    color: var(--color1) !important;
    font-weight: 300 !important;
    font-size: 17px;
    line-height: 1.8;

}


/* ==========================================
   MAIN IMAGE
========================================== */

.about-main-image {
    width: 100%;
    overflow: hidden;

    border-radius: 20px;
    margin-top: 60px !important;
}

.about-main-image img {
    width: 100%;
    display: block;

    border-radius: 20px;

    transition: transform 0.5s ease;
}

.about-main-image:hover img {
    transform: scale(1.04);
}


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

.outsourcing-about-inner-content {
    position: relative;
    padding-left: 15px;
}


/* ==========================================
   MISSION / VISION BOX
========================================== */

.about-box {
    height: 100%;
}

.about-box h3 {
    margin: 0 0 15px;

    font-size: 25px;
    line-height: 1.3;

    font-weight: 700;


}

.about-box p {
    margin: 0 0 25px;

    font-size: 15px;
    line-height: 1.8;

}


/* ==========================================
   BOX IMAGES
========================================== */

.about-box-image {
    /* margin-top: 120px !important; */
    width: 100%;
    overflow: hidden;

    border-radius: 20px;
}

.about-box-image img {
    width: 100%;
    display: block;

    border-radius: 20px;

    transition: transform 0.5s ease;
}

.about-box-image:hover img {
    transform: scale(1.04);
}


/* ==========================================
   VISION SPACING
========================================== */


.about-box-right .about-box-image {
    margin-bottom: 25px;
}


/* ==========================================
   CIRCLE WRAP
========================================== */


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

@media (max-width: 1199.98px) {

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

    .outsourcing-about-content {
        padding-right: 0;
    }

    .outsourcing-about-inner-content {
        padding-left: 0;
    }

}


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

@media (max-width: 767.98px) {

    .outsourcing-about-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

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

    .about-description {
        font-size: 15px;
    }

    .about-box-right {
        padding-top: 0;
    }

    .circle-wrap {
        justify-content: center;

        margin-top: 30px;
    }

    .circle-image {
        width: 130px;
        height: 130px;
    }

}


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

@media (max-width: 575.98px) {

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

    .about-box h3 {
        font-size: 22px;
    }

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

}

/* ======================= ABOUT SECTION CODE END =========================== */


/* <!-- ================== CORE IDEA CODE  START =================== --> */
/* =========================================================
   WI HR — VALUES & COMMITMENTS
   THEME-MATCHED CSS
   Uses your existing root variables
   ========================================================= */

.wi-values-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    /* padding: 110px 35px; */

    /* background:
        radial-gradient(
            circle at 90% 10%,
            rgba(243, 146, 36, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 85%,
            rgba(243, 146, 36, 0.07),
            transparent 30%
        ),
        var(--bg1); */

    color: var(--color1);

    font-family: var(--font-family) !important;
}


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

.wi-values-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;
}


.wi-orb {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    opacity: .55;

    filter: blur(2px);

    animation:
        wiOrbFloat 9s ease-in-out infinite;
}


.wi-orb-1 {
    width: 300px;
    height: 300px;

    top: 8%;
    right: -130px;

    background:
        radial-gradient(circle,
            rgba(243, 146, 36, .12),
            transparent 70%);
}


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

    left: -130px;
    bottom: 5%;

    background:
        radial-gradient(circle,
            rgba(121, 121, 121, .09),
            transparent 70%);

    animation-delay: -4s;
}


/* subtle grid */



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

.wi-values-header {
    position: relative;
}


.wi-values-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: var(--color);

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

    letter-spacing: 3px;

    text-transform: uppercase;
}


.wi-label-line {
    display: inline-block;

    width: 42px;
    height: 2px;

    background:
        linear-gradient(90deg,
            var(--color),
            rgba(243, 146, 36, .25));
}


.wi-values-title {
    margin: 0;


    color: var(--color1);


    font-size: 36px !important;

    font-weight: 600;

    line-height: .95;

    text-transform: none;
}


.wi-values-title span {
    display: block;

    color: var(--color);

    background:
        linear-gradient(90deg,
            var(--color),
            #ffb35c);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.wi-values-intro {
    max-width: 450px;

    margin: 0 0 8px auto;

    color: var(--color1);

    opacity: .72;

    font-size: 16px;

    line-height: 1.8;

    text-transform: none;
}


/* =========================================================
   STICKY IMAGE
   ========================================================= */

.wi-values-sticky {
    position: sticky !important;

    top: 10px;

    width: 100%;
}


.wi-values-image-wrap {
    position: relative;

    width: 100%;
    min-height: 630px;

    overflow: hidden;

    border-radius: 28px;

    background: var(--bg2);

    border: 1px solid rgba(121, 121, 121, .12);

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

    transform: translateZ(0);
}


.wi-values-image {
    display: block;

    width: 100%;
    height: 630px !important;

    object-fit: cover !important;

    transition:
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter .8s ease;
}


.wi-values-image-wrap:hover .wi-values-image {
    transform: scale(1.07);

    filter:
        saturate(1.08) contrast(1.02);
}


/* image overlay */

.wi-image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(180deg,
            transparent 35%,
            rgba(0, 0, 0, .05) 55%,
            rgba(0, 0, 0, .55) 100%);

    z-index: 1;
}


/* image glow */

.wi-image-glow {
    position: absolute;

    width: 190px;
    height: 190px;

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

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(243, 146, 36, .30),
            transparent 70%);

    filter: blur(30px);

    z-index: 2;

    pointer-events: none;
}


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

.wi-values-badge {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 13px 18px;

    color: #fff;

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

    border-radius: 15px;

    background:
        rgba(0, 0, 0, .20);

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

    z-index: 5;

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


.wi-values-image-wrap:hover .wi-values-badge {
    transform: translateY(-8px);

    background:
        rgba(243, 146, 36, .82);
}


.wi-badge-number {
    font-size: 23px;

    font-weight: 700;

    line-height: 1;
}


.wi-values-badge small {
    display: block;

    margin-bottom: 2px;

    font-size: 9px;

    letter-spacing: 2px;

    opacity: .75;

    text-transform: uppercase;
}


.wi-values-badge strong {
    display: block;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   IMAGE CORNER
   ========================================================= */

.wi-image-corner {
    position: absolute;

    top: 22px;
    right: 22px;

    width: 52px;
    height: 52px;

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

    color: #fff;

    border-radius: 50%;

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

    background:
        rgba(0, 0, 0, .18);

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

    z-index: 5;

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


.wi-values-image-wrap:hover .wi-image-corner {
    transform: rotate(45deg);

    background: var(--color);

    border-color: var(--color);
}


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

.wi-values-statement {
    position: absolute !important;
    bottom: 0% !important;
    width: 80% !important;
    margin-bottom: 15px !important;
    display: flex;
    align-items: flex-start;

    gap: 17px;

    margin-top: 18px;

    padding: 24px;

    border-radius: 20px;
    color: white !important;

    border: 1px solid rgba(255, 255, 255, 0.26) !important;

    background: rgba(255, 255, 255, 0.096) !important;

    border: 1px solid rgba(121, 121, 121, .12);

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

    backdrop-filter: blur(12px);
}


.wi-statement-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

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

    color: #fff;

    border-radius: 50%;

    background: var(--color);

    box-shadow:
        0 8px 20px rgba(243, 146, 36, .20);
}


.wi-values-statement p {
    margin: 0;

    color: white !important;


    font-size: 15.5px !important;

    line-height: 1.75;

    text-transform: none;
}


/* =========================================================
   VALUES LIST
   ========================================================= */

.wi-values-list {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


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

.wi-value-card {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 24px;

    min-height: 145px;

    padding: 7px 30px;

    overflow: hidden;

    border-radius: 22px;

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

    border: 1px solid rgba(121, 121, 121, .12);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .035);

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

    transform: translateZ(0);

    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease,
        border-color .45s ease,
        background .45s ease;
}


/* left animated line */

.wi-value-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(180deg,
            var(--color),
            #ffbf78);

    transform:
        scaleY(0);

    transform-origin: bottom;

    transition:
        transform .45s ease;
}


.wi-value-card:hover::before {
    transform: scaleY(1);
}


/* hover light */

.wi-value-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(243, 146, 36, .11),
            transparent 70%);

    transition:
        transform .65s ease;
}


.wi-value-card:hover::after {
    transform: scale(2.1);
}


.wi-value-card:hover {
    transform: translateX(8px);

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

    border-color:
        rgba(243, 146, 36, .22);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, .08);
}


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

.wi-value-top {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;
}


.wi-value-number {
    color: var(--color1);

    opacity: .45;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


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

.wi-value-icon {
    width: 57px;
    height: 57px;

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

    color: var(--color);

    border-radius: 16px;

    background:
        rgba(243, 146, 36, .08);

    border: 1px solid rgba(243, 146, 36, .12);

    font-size: 19px;

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


.wi-value-card:hover .wi-value-icon {
    transform:
        rotate(-7deg) scale(1.08);

    color: #fff;

    background:
        var(--color);

    border-color:
        var(--color);

    box-shadow:
        0 10px 25px rgba(243, 146, 36, .20);
}


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

.wi-value-content {
    position: relative;

    z-index: 2;
}


.wi-value-content h3 {
    margin: 0 0 11px;

    color: var(--color1);

    font-family: var(--font-family) !important;

    font-size: 21px;

    font-weight: 500;

    line-height: 1.25;

    /* letter-spacing: -.4px; */

    text-transform: none;

    transition:
        color .35s ease;
}


.wi-value-card:hover .wi-value-content h3 {
    color: var(--color);
}


.wi-value-content p {
    max-width: 700px;

    margin: 0;

    color: var(--color1);

    /* opacity: .68; */

    font-size: 16px;

    font-weight: 300 !important;

    line-height: 1.75;

    text-transform: none;
}


/* =========================================================
   ARROW
   ========================================================= */

.wi-card-arrow {
    position: relative;

    z-index: 3;

    width: 42px;
    height: 42px;

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

    color: var(--color1);

    border-radius: 50%;

    border: 1px solid rgba(121, 121, 121, .14);

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

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


.wi-value-card:hover .wi-card-arrow {
    transform: rotate(45deg);

    color: #fff;

    border-color: var(--color);

    background: var(--color);
}


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

.wi-value-final {
    background:
        linear-gradient(135deg,
            rgba(243, 146, 36, .055),
            rgba(255, 255, 255, .65));
}


.wi-value-final .wi-value-icon {
    background:
        rgba(243, 146, 36, .10);

    color: var(--color);
}


/* =========================================================
   FLOAT ANIMATION
   ========================================================= */

@keyframes wiOrbFloat {

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

    50% {
        transform:
            translate3d(0, -25px, 0) scale(1.05);
    }

}


/* =========================================================
   RESPONSIVE — 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .wi-values-section {
        padding: 95px 25px;
    }

    .wi-values-title {
        font-size: 65px;
    }

    .wi-values-image-wrap {
        min-height: 550px;
    }

    .wi-values-image {
        height: 550px;
    }

    .wi-value-card {
        grid-template-columns:
            72px minmax(0, 1fr) 40px;

        gap: 18px;

        padding: 24px;
    }

}


/* =========================================================
   RESPONSIVE — 991px
   ========================================================= */

@media (max-width: 991px) {

    .wi-values-section {
        padding: 80px 20px;
    }

    .wi-values-header {
        margin-bottom: 50px;
    }

    .wi-values-title {
        font-size: 55px;
        letter-spacing: -2px;
    }

    .wi-values-intro {
        margin: 0;
        max-width: 600px;
    }

    .wi-values-sticky {
        position: relative;
        top: auto;
    }

    .wi-values-image-wrap {
        min-height: 500px;
    }

    .wi-values-image {
        height: 500px;
    }

}


/* =========================================================
   RESPONSIVE — 767px
   ========================================================= */

@media (max-width: 767px) {

    .wi-values-section {
        padding: 65px 15px;
    }

    .wi-values-title {
        font-size: 43px;
        line-height: 1;
    }

    .wi-values-intro {
        font-size: 15px;
        line-height: 1.7;
    }

    .wi-values-image-wrap {
        min-height: 430px;
        border-radius: 22px;
    }

    .wi-values-image {
        height: 430px;
    }

    .wi-value-card {
        grid-template-columns:
            55px minmax(0, 1fr) 35px;

        gap: 15px;

        min-height: auto;

        padding: 22px 18px;

        border-radius: 19px;
    }

    .wi-value-icon {
        width: 48px;
        height: 48px;

        border-radius: 13px;

        font-size: 17px;
    }

    .wi-value-content h3 {
        font-size: 18px;
    }

    .wi-value-content p {
        font-size: 13px;
        line-height: 1.7;
    }

    .wi-card-arrow {
        width: 35px;
        height: 35px;

        font-size: 12px;
    }

    .wi-values-statement {
        padding: 20px;
    }

}


/* =========================================================
   RESPONSIVE — 480px
   ========================================================= */

@media (max-width: 480px) {

    .wi-values-section {
        padding: 55px 12px;
    }

    .wi-values-title {
        font-size: 36px;
    }

    .wi-values-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .wi-values-image-wrap {
        min-height: 370px;
    }

    .wi-values-image {
        height: 370px;
    }

    .wi-value-card {
        grid-template-columns: 1fr 35px;
    }

    .wi-value-top {
        grid-column: 1 / -1;

        flex-direction: row;

        align-items: center;

        gap: 12px;
    }

    .wi-value-content {
        grid-column: 1;
    }

    .wi-card-arrow {
        grid-column: 2;
        grid-row: 2;
    }

    .wi-values-badge {
        left: 15px;
        bottom: 15px;

        padding: 11px 14px;
    }

}


/* =========================================================
   DARK MODE — YOUR EXISTING body.black
   ========================================================= */
/* 
body.black .wi-values-section {

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(243,146,36,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 80%,
            rgba(255,255,255,.025),
            transparent 30%
        ),
        var(--bg1);

} */


body.black .wi-value-card {

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

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

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


body.black .wi-value-card:hover {

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

    border-color:
        rgba(243, 146, 36, .25);
}


body.black .wi-values-statement {

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

    border-color:
        rgba(255, 255, 255, .08);
}


body.black .wi-values-image-wrap {

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


}


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

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

    .wi-orb,
    .wi-values-image,
    .wi-value-card,
    .wi-value-icon,
    .wi-card-arrow,
    .wi-image-corner,
    .wi-values-badge {

        animation: none !important;

        transition: none !important;
    }

}

/* <!-- ================== CORE IDEA CODE  END =================== --> */

/* <!-- =================== SERVICE CODE START    ===================== --> */



/* =========================================================
           PAGE
        ========================================================= */

.wi-services-page {
    width: 100%;
    padding: 100px 0 140px;

    overflow: visible !important;
}




/* =========================================================
           SECTION HEADER
        ========================================================= */

.wi-section-heading {
    max-width: 900px;
    margin: 0 auto 80px;

    text-align: center;
}

.wi-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--color);

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

    letter-spacing: 1.5px;
    text-transform: uppercase;

    margin-bottom: 18px;
}

.wi-section-label::before {
    content: "";

    width: 35px;
    height: 2px;

    background: var(--color);
}

.wi-section-heading h1 {
    margin: 0 0 20px;

    font-size: clamp(36px, 5vw, 62px);

    line-height: 1.08;

    font-weight: 700;

    color: var(--color2) !important;
}

.wi-section-heading p {
    max-width: 760px;

    margin: 0 auto;

    color: var(--color1) !important;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
           SERVICE STACK
        ========================================================= */

.wi-service-stack {
    position: relative;

    width: 100%;

    perspective: 1400px;
    perspective-origin: 50% 50%;

    overflow: visible !important;
}


/* =========================================================
           STICKY ITEM
        ========================================================= */

.wi-service-item {
    position: sticky;

    top: 120px !important;

    width: 100%;

    height: 650px;

    margin-bottom: 130px;

    z-index: 1;

    overflow: visible !important;

    isolation: isolate;
}

.wi-service-item:nth-child(1) {
    z-index: 10;
}

.wi-service-item:nth-child(2) {
    z-index: 20;
}

.wi-service-item:nth-child(3) {
    z-index: 30;
}

.wi-service-item:nth-child(4) {
    z-index: 40;
}

.wi-service-item:nth-child(5) {
    z-index: 50;
}

.wi-service-item:nth-child(6) {
    z-index: 60;
}

.wi-service-item:nth-child(7) {
    z-index: 70;
}

.wi-service-item:nth-child(8) {
    z-index: 80;
}


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

.wi-service-card {
    position: relative;

    width: 100%;
    height: 100%;

    background: var(--white);

    border-radius: 28px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transform-style: preserve-3d;

    transform-origin: center bottom;

    backface-visibility: hidden;

    will-change: transform;

    transition:
        box-shadow 0.35s ease;
}

.wi-service-card:hover {
    box-shadow: var(--shadow-hover);
}


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

.wi-service-row {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: stretch;

    margin: 0;
}


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

.wi-service-content {
    background-color: var(--bg2) !important;
    width: 50%;

    padding: 20px 40px !important;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    z-index: 3;

    transform: translateZ(35px);
}

.wi-service-number {
    font-family: var(--font-family-num) !important;
    margin-bottom: 20px !important;
    font-size: 72px;
    font-weight: 1000 !important;

    color: transparent;
    -webkit-text-stroke: 0.5px var(--color2);
    text-stroke: 1.5px var(--color2);

    line-height: 1;
}

/* .wi-service-number {
            font-size: 18px;

            color: var(--color1) !important;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 22px;
        }

        .wi-service-number::after {
            content: "";

            display: inline-block;

            width: 45px;
            height: 2px;

            margin-left: 15px;

            vertical-align: middle;

            background: var(--color);
        } */

.wi-service-content h2 {
    margin: 0 0 20px;

    font-size: clamp(30px, 3vw, 42px);

    line-height: 1.1;

    font-weight: 400;

    color: var(--color2) !important;
}

.wi-service-content p {
    /* margin: 0 0 28px; */
    opacity: 0.8 !important;
    color: var(--color1) !important;
    font-weight: 100px !important;

    font-size: 17px;

    line-height: 1.8;

    max-width: 580px;
}


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

.wi-service-list {
    padding: 0;
    margin: 0 0 30px;

    list-style: none;
}

.wi-service-list li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 12px;

    color: var(--color1) !important;
    font-weight: 300px !important;
    font-size: 15px;

    line-height: 1.5;
}

.wi-service-list li i {
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(243, 146, 36, 0.12);

    color: var(--color) !important;

    font-size: 11px;

    margin-top: 1px;
}


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

.wi-service-btn {
    margin-top: 5px;
}

.wi-service-btn a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 23px;

    border-radius: 50px;

    background: var(--color2) !important;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

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

.wi-service-btn a i {
    color: var(--color);

    transition: transform 0.3s ease;
}

.wi-service-btn a:hover {
    background: var(--color);

    transform: translateY(-3px);

    gap: 16px;
}

.wi-service-btn a:hover i {
    color: #fff;

    transform: translateX(3px);
}


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

.wi-service-image {
    width: 50%;

    position: relative;

    overflow: hidden;

    transform: translateZ(20px);
}

.wi-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.15),
            transparent 45%);

    pointer-events: none;

    padding: 5px !important;
    z-index: 2;
}

.wi-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.wi-service-card:hover .wi-service-image img {
    transform: scale(1.06);
}


/* =========================================================
           IMAGE NUMBER / BADGE
        ========================================================= */

.wi-service-image-badge {
    position: absolute;
    display: none !important;
    left: 30px;
    bottom: 30px;

    z-index: 5;

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;

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

    backdrop-filter: blur(12px);

    color: var(--color2) !important;

    font-size: 18px;

    font-weight: 700;

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


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

.wi-service-item:nth-child(even) .wi-service-row {
    flex-direction: row-reverse;
}

.wi-service-item:nth-child(even) .wi-service-image::after {
    background:
        linear-gradient(-90deg,
            rgba(0, 0, 0, 0.15),
            transparent 45%);
}


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

.wi-services-page::before {
    content: "";

    position: fixed;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 20%;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(243, 146, 36, .10),
            transparent 70%);

    pointer-events: none;

    z-index: -1;
}

.wi-services-page::after {
    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    right: -280px;
    bottom: 5%;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(243, 146, 36, .07),
            transparent 70%);

    pointer-events: none;

    z-index: -1;
}


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

@media (max-width: 991px) {

    .wi-services-page {
        padding: 80px 0 80px;
    }

    .wi-section-heading {
        margin-bottom: 50px;
    }

    .wi-section-heading h1 {
        font-size: 40px;
    }

    .wi-service-stack {
        perspective: none;
    }

    .wi-service-item {
        position: relative;

        top: auto;

        height: auto;

        margin-bottom: 35px;

        z-index: auto !important;
    }

    .wi-service-card {
        height: auto;

        min-height: 0;

        transform: none !important;

        overflow: hidden;
    }

    .wi-service-row,
    .wi-service-item:nth-child(even) .wi-service-row {
        flex-direction: column;
    }

    .wi-service-content {
        width: 100%;

        padding: 45px 35px;

        transform: none;
    }

    .wi-service-image {
        width: 100%;

        height: 400px;

        transform: none;
    }

    .wi-service-item:nth-child(even) .wi-service-image::after {
        background:
            linear-gradient(90deg,
                rgba(0, 0, 0, .15),
                transparent 45%);
    }
}


@media (max-width: 575px) {

    .wi-services-container {
        padding: 0 15px;
    }

    .wi-services-page {
        padding: 60px 0;
    }

    .wi-section-heading h1 {
        font-size: 32px;
    }

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

    .wi-service-card {
        border-radius: 20px;
    }

    .wi-service-content {
        padding: 35px 25px;
    }

    .wi-service-content h2 {
        font-size: 30px;
    }

    .wi-service-content p {
        font-size: 15px;
    }

    .wi-service-image {
        height: 300px;
    }

    .wi-service-image-badge {
        width: 52px;
        height: 52px;

        left: 20px;
        bottom: 20px;
    }
}

/* =========================================
   MODERN WI SECTION HEADING
========================================= */
/* 
.wi-section-heading {
    position: relative;
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
    padding: 20px 20px 10px;
} */

/* Small decorative line */
.wi-section-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 55px;
    height: 4px;
    border-radius: 50px;
    background: var(--color);
    transform: translateX(-50%);
}

/* Label */
.wi-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 15px;
    margin-bottom: 18px;

    padding: 8px 16px;

    border: 1px solid rgba(243, 146, 36, 0.20);
    border-radius: 100px;

    background: rgba(243, 146, 36, 0.07);

    color: var(--color);

    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    transition: all 0.3s ease;
}

/* Dot inside label */
.wi-section-label::before {
    content: "";
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color);

    box-shadow: 0 0 0 5px rgba(243, 146, 36, 0.10);
}

/* Heading */
.wi-section-heading h1 {
    margin: 0 auto;

    max-width: 800px;

    color: #171717;

    font-family: var(--font-family);

    font-size: clamp(42px, 5vw, 72px);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -2.5px;

    text-transform: none;
}

/* Gradient emphasis */
.wi-section-heading h1::first-line {
    color: #171717;
}

/* Description */
.wi-section-heading p {
    max-width: 680px;

    margin: 25px auto 0;

    color: var(--color1);

    font-family: var(--font-family);

    font-size: 17px;

    font-weight: 400;

    line-height: 1.8;

    letter-spacing: 0.1px;

    text-transform: none;
}


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

.wi-section-heading:hover .wi-section-label {
    background: rgba(243, 146, 36, 0.12);

    border-color: rgba(243, 146, 36, 0.35);

    transform: translateY(-2px);
}


/* =========================================
   DARK MODE
========================================= */

body.black .wi-section-heading h1 {
    color: #f7f7f7;
}

body.black .wi-section-heading p {
    color: #a9a9a9;
}


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

@media (max-width: 991px) {

    .wi-section-heading {
        margin-bottom: 55px;
    }

    .wi-section-heading h1 {
        font-size: clamp(40px, 7vw, 58px);
        letter-spacing: -1.8px;
    }

    .wi-section-heading p {
        font-size: 16px;
        line-height: 1.7;
    }
}


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

@media (max-width: 575px) {

    .wi-section-heading {
        padding: 15px 15px 5px;
        margin-bottom: 45px;
    }

    .wi-section-heading::before {
        width: 45px;
        height: 3px;
    }

    .wi-section-label {
        margin-top: 12px;
        margin-bottom: 16px;

        padding: 7px 13px;

        font-size: 11px;

        letter-spacing: 1.2px;
    }

    .wi-section-heading h1 {
        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1.5px;
    }

    .wi-section-heading p {
        margin-top: 20px;

        font-size: 15px;

        line-height: 1.7;
    }
}

/* <!-- =================== SERVICE CODE END    ===================== --> */


/* <!-- ==================== WHY CHOSE US CODE START =================== --> */


/* =========================================================
           YOUR ROOT
        ========================================================== */




html {

    scroll-behavior: smooth !important;

}


body {

    margin: 0;

    text-transform: capitalize;

    font-family: var(--font-family) !important;

    background-color: var(--bg1) !important;

}


/* =========================================================
           MAIN SECTION
        ========================================================== */

.tm-ai-workflow {
    margin-bottom: 40px !important;
    --color: #f39224;
    --color-light: #ffb866;

    --dark: #151515;

    --muted: #777;

    position: relative;


    overflow: hidden;


}


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


/* =========================================================
           FLOATING ORBS
        ========================================================== */

.tm-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

    filter: blur(2px);

}




.tm-orb-2 {

    width: 360px;
    height: 360px;

    right: -170px;
    bottom: 0;

    /* background:
                radial-gradient(
                    circle,
                    rgba(243,146,36,.09),
                    transparent 68%
                ); */

}


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

.tm-header {

    max-width: 950px;

    margin:
        0 auto 90px;

    text-align: center;

    padding:
        0 20px;

}


.tm-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 18px;

    border-radius: 100px;

    color: var(--color);

    background: var(--bg2);

    border:
        1px solid rgba(243, 146, 36, .22);

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

    backdrop-filter: blur(15px);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0;

}


.tm-eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color);

    box-shadow:
        0 0 0 5px rgba(243, 146, 36, .10),
        0 0 18px rgba(243, 146, 36, .5);

    animation:
        tmDotPulse 2s infinite;

}


@keyframes tmDotPulse {

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

    50% {
        transform: scale(.55);
    }

}


.tm-title {

    margin:
        25px auto 20px;

    max-width: 900px;

    color:
        var(--color1);

    font-size: 36px !important;

    font-weight:
        300;

    line-height:
        .98;

    letter-spacing:
        -1px;

    opacity: 0;

}


.tm-title .highlight {

    color:
        var(--color);

    position:
        relative;

}




@keyframes tmUnderline {

    0%,
    100% {
        transform: scaleX(.2);
        opacity: .4;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }

}


.tm-description {

    max-width:
        650px;

    margin:
        auto;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.8;

    opacity:
        0;

}


/* =========================================================
           WORKFLOW WRAPPER
        ========================================================== */

.tm-workflow {

    position: relative;

    margin: 20px 0px !important;
}


/* =========================================================
           CONNECTING LINE
        ========================================================== */

.tm-line {

    position: absolute;

    top: 76px;

    left: 12.5%;
    right: 12.5%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(243, 146, 36, .22),
            rgba(243, 146, 36, .22),
            transparent);

}





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

.tm-cards {

    display:
        grid;

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

    gap:
        22px;

    perspective:
        1400px;

}


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

.tm-card {

    --mx: 50%;
    --my: 50%;

    position:
        relative;

    min-height:
        445px;

    padding:
        34px;

    border-radius:
        30px;

    overflow:
        hidden;

    isolation:
        isolate;

    cursor:
        pointer;


    background:
        linear-gradient(145deg,
            var(--bg1),
            var(--bg2));


    border:
        0px solid var(--color2) !important;


    /* box-shadow:
                0 25px 70px rgba(20,20,20,.055); */


    backdrop-filter:
        blur(20px);


    transform-style:
        preserve-3d;


    opacity:
        0;

    transform:
        translateY(70px) scale(.96);


    transition:
        box-shadow .55s ease,
        border-color .55s ease,
        filter .5s ease;

}


/* =========================================================
           CURSOR SPOTLIGHT
        ========================================================== */

.tm-card::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;


    background:
        radial-gradient(circle 180px at var(--mx) var(--my),
            rgba(243, 146, 36, .16),
            rgba(243, 146, 36, .055) 35%,
            transparent 72%);


    opacity:
        0;

    transition:
        opacity .35s ease;

}


.tm-card:hover::before {

    opacity:
        1;

}


/* =========================================================
           MOVING LIGHT SWEEP
        ========================================================== */

.tm-card::after {

    content: "";

    position:
        absolute;

    width:
        150%;

    height:
        100%;

    left:
        -150%;

    top:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:
        linear-gradient(105deg,
            transparent 35%,
            rgba(255, 255, 255, .55) 50%,
            transparent 65%);

    transform:
        skewX(-18deg);

}


.tm-card:hover::after {

    animation:
        tmLightSweep .9s ease forwards;

}


@keyframes tmLightSweep {

    from {
        left: -150%;
    }

    to {
        left: 120%;
    }

}


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

.tm-card:hover {

    border-color:
        rgba(243, 146, 36, .30);

    box-shadow:

        0 45px 90px rgba(20, 20, 20, .11),

        0 0 0 1px rgba(243, 146, 36, .04);

}


/* =========================================================
           WHEN ONE CARD IS ACTIVE
        ========================================================== */

.tm-cards.has-hover .tm-card:not(:hover) {

    filter:
        saturate(.65) brightness(.97);

    opacity:
        .72;

    transform:
        scale(.985);

}


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

.tm-card-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    margin-bottom:
        63px;

    transform:
        translateZ(35px);

}


.tm-step {

    font-family:
        var(--font-family-num);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    color:
        var(--color);

    padding:
        8px 13px;

    border-radius:
        100px;

    background:
        rgba(243, 146, 36, .075);

    border:
        1px solid rgba(243, 146, 36, .12);

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

}


.tm-card:hover .tm-step {

    background:
        var(--color);

    color:
        white;

    transform:
        translateY(-2px);

}


/* =========================================================
           ARROW
        ========================================================== */

.tm-arrow {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #aaa;

    background: var(--bg1) !important;

    border:
        1px solid var(--bg2) !important;

    transition:
        .5s cubic-bezier(.2, .8, .2, 1);

}


.tm-card:hover .tm-arrow {

    color:
        #fff;

    background:
        var(--color);

    border-color:
        var(--color);

    transform:
        translate(5px, -5px) rotate(45deg);

    box-shadow:
        0 10px 25px rgba(243, 146, 36, .25);

}


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

.tm-icon {

    position:
        relative;

    width:
        84px;

    height:
        84px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        25px;

    margin-bottom:
        31px;

    color:
        var(--color);

    background:
        linear-gradient(145deg,
            var(--bg1),
            var(--bg2));

    border:
        1px solid rgba(243, 146, 36, .13);

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

    transform:
        translateZ(45px);

    transition:
        .6s cubic-bezier(.2, .8, .2, 1);

}


.tm-icon::before {

    content: "";

    position:
        absolute;

    inset:
        -7px;

    border-radius:
        31px;

    border:
        1px dashed rgba(243, 146, 36, .25);

    transition:
        .7s ease;

}


.tm-icon::after {

    content: "";

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    top:
        6px;

    right:
        7px;

    border-radius:
        50%;

    background:
        var(--color);

    box-shadow:
        0 0 15px rgba(243, 146, 36, .7);

    opacity:
        .3;

    transition:
        .5s ease;

}


.tm-icon i {

    font-size:
        28px;

    transition:
        .55s cubic-bezier(.2, .8, .2, 1);

}


.tm-card:hover .tm-icon {

    color:
        white !important;

    background:
        linear-gradient(145deg,
            var(--color),
            #e67d08);

    transform:
        translateZ(65px) rotate(-5deg) scale(1.08);

    box-shadow:
        0 22px 45px rgba(243, 146, 36, .28);

}


.tm-card:hover .tm-icon::before {

    transform:
        rotate(18deg) scale(1.08);

}


.tm-card:hover .tm-icon::after {

    opacity:
        1;

    transform:
        scale(1.7);

    background:
        white;

}


.tm-card:hover .tm-icon i {

    transform:
        scale(1.17) rotate(8deg);

}


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

.tm-card h3 {

    position:
        relative;

    margin:
        0 0 15px;

    color:
        var(--color1) !important;

    font-size:
        24px;

    line-height:
        1.15;

    font-weight:
        450;

    letter-spacing:
        -.6px;

    transform:
        translateZ(40px);

    transition:
        color .4s ease,
        transform .5s ease;

}


.tm-card:hover h3 {

    color:
        var(--color);

    transform:
        translateZ(55px) translateX(3px);

}


.tm-card p {

    margin:
        0;

    max-width:
        285px;

    color:
        #777;

    font-size:
        14px;

    line-height:
        1.8;

    transform:
        translateZ(25px);

    transition:
        color .4s ease,
        transform .5s ease;

}


.tm-card:hover p {

    color:
        #666;

    transform:
        translateZ(35px) translateX(3px);

}


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

.tm-number {

    position:
        absolute;

    right:
        -8px;

    bottom:
        -26px;

    font-family:
        var(--font-family-num);

    font-size:
        140px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        -10px;

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

    pointer-events:
        none;

    transition:
        .7s cubic-bezier(.2, .8, .2, 1);

}


.tm-card:hover .tm-number {

    color:
        rgba(243, 146, 36, .065);

    transform:
        translateY(-15px) translateX(-5px) scale(1.08);

}


/* =========================================================
           ACTIVE BOTTOM LINE
        ========================================================== */

.tm-active-line {

    position:
        absolute;

    bottom:
        0;

    left:
        50%;

    width:
        0;

    height:
        3px;

    border-radius:
        100px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(90deg,
            transparent,
            var(--color),
            transparent);

    transition:
        width .6s cubic-bezier(.2, .8, .2, 1);

}


.tm-card:hover .tm-active-line {

    width:
        100%;

}


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

.tm-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin-top:
        75px;

    color:
        #888;

    font-size:
        13px;

    opacity:
        0;

}


.tm-bottom i {

    color:
        var(--color);

}


/* =========================================================
           MOUSE FOLLOW GLOW
        ========================================================== */

.tm-cursor-glow {

    position:
        fixed;

    width:
        230px;

    height:
        230px;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        1000;

    opacity:
        0;

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

    background:
        radial-gradient(circle,
            rgba(243, 146, 36, .075),
            transparent 68%);

}


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

@media(max-width:1199px) {

    .tm-cards {

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

    }

    .tm-line,
    .tm-line-progress {

        display:
            none;

    }

}


@media(max-width:767px) {

    .tm-ai-workflow {

        padding:
            90px 0 100px;

    }


    .tm-header {

        margin-bottom:
            60px;

    }


    .tm-title {

        font-size:
            43px;

        letter-spacing:
            -2px;

    }


    .tm-description {

        font-size:
            14px;

    }


    .tm-workflow {

        padding:
            0 18px;

    }


    .tm-cards {

        grid-template-columns:
            1fr;

    }


    .tm-card {

        min-height:
            390px;

    }


    /* Disable aggressive effects on touch */

    .tm-cards.has-hover .tm-card:not(:hover) {

        opacity:
            1;

        filter:
            none;

    }

}


@media(max-width:450px) {

    .tm-title {

        font-size:
            36px;

    }


    .tm-card {

        padding:
            28px;

    }


    .tm-icon {

        width:
            74px;

        height:
            74px;

    }

}


/* <!-- ==================== WHY CHOSE US CODE END =================== --> */



/* <!-- ==================== HR CANDICATE CODE START =================== --> */


/* =========================================================
           MAIN SECTION
        ========================================================= */

.tcandidates-section {

    position: relative;

    width: 100%;

    padding: 30px 0px !important;



    overflow: hidden;


}



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

.tcandidates-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .35;

}



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



@keyframes glowPulse {

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

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



/* =========================================================
           CONTAINER
        ========================================================= */




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

.tcandidates-topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 45px;
}


.tcandidates-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 10px 17px;

    border: 1px solid rgba(243, 146, 36, .25);

    border-radius: 100px;

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

    backdrop-filter: blur(15px);

    color: var(--color) !important;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .03);
}


.tcandidates-label-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--color);

    box-shadow:
        0 0 0 5px rgba(243, 146, 36, .12),
        0 0 18px rgba(243, 146, 36, .7);

    animation: liveDot 1.7s ease-in-out infinite;
}


@keyframes liveDot {

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

    50% {
        transform: scale(.65);
    }
}


.tcandidates-index {

    font-family: var(--font-family-num);

    font-size: 12px;

    color: #999;

    letter-spacing: 2px;
}



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




.tcandidates-mini-heading {

    margin-bottom: 20px;

    color: var(--color1) !important;

    font-size: 13px;

    font-weight: 300;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.tcandidates-heading {

    /* margin: 25px auto 20px; */
    /* max-width: 900px; */
    color: var(--color1);
    font-size: 36px !important;
    font-weight: 300;
    line-height: .98;
    letter-spacing: -1px;
    /* opacity: 0; */
}


.tcandidates-heading strong {

    position: relative;

    color: var(--color);

    font-weight: 600;

    display: inline-block;
}


.tcandidates-heading strong::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 100%;
    height: 6px;

    border-radius: 50%;

    background: rgba(243, 146, 36, .18);

    transform: rotate(-1deg);
}



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

.tcandidates-main-grid {

    display: grid;

    grid-template-columns:
        minmax(350px, .85fr) minmax(600px, 1.15fr);

    gap: 90px;

    align-items: center;
}



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

.tcandidates-copy {

    position: relative;

    z-index: 5;
}


.tcandidates-copy-tag {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #888;

    font-size: 12px;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.tcandidates-copy-tag i {

    color: var(--color);

    font-size: 14px;
}


.tcandidates-title {

    margin: 0 0 20px;

    font-size: clamp(32px,
            3vw,
            48px);

    line-height: 1.02;

    font-weight: 300 !important;

    letter-spacing: -1.5px;

    color: var(--color1) !important;
}


.tcandidates-description {

    /* max-width: 560px; */

    margin-bottom: 35px;

    color: var(--color1) !important;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 200 !important;
}



/* =========================================================
           FEATURE LIST
        ========================================================= */

.tcandidates-features {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 38px;
}


.tcandidate-feature {

    position: relative;

    display: grid;

    grid-template-columns: 45px 1fr 30px;

    align-items: center;

    gap: 15px;

    padding: 16px 18px;

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

    border-radius: 18px;

    background: var(--bg2) !important;

    backdrop-filter: blur(15px);

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


.tcandidate-feature::before {

    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 3px;

    border-radius: 10px;

    background: var(--color);

    transform: scaleY(0);

    transition: transform .35s ease;
}


.tcandidate-feature:hover {

    transform: translateX(10px);

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

    border-color: rgba(243, 146, 36, .2);

    box-shadow:
        0 18px 45px rgba(31, 31, 31, .07);
}


.tcandidate-feature:hover::before {

    transform: scaleY(1);
}


.tcandidate-feature-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 14px;

    background-color: var(--color) !important;

    color: white !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .06);

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


.tcandidate-feature:hover .tcandidate-feature-icon {

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

    background: var(--color);

    color: white;
}


.tcandidate-feature-title {

    display: block;

    margin-bottom: 3px;

    color: var(--color1) !important;

    font-size: 16px !important;

    font-weight: 300 !important;
}

.tcandidates-section .circle {
    width: 140px !important;
    height: 140px !important;
    background-color: var(--bg1);
    /* display: inline-flex; */
    justify-content: center;
    border-radius: 250px !important;
}

.tcandidates-section .circle-icon {
    padding: 15px !important;
    border-radius: 56% !important;
    height: 80% !important;
    width: 80% !important;
    background-color: var(--bg1);
    /* margin-top: 150px !important; */
}

.tcandidate-feature-text {

    color: #858585;

    font-size: 13px;

    line-height: 1.5;
}


.tcandidate-feature-arrow {

    color: #bbb;

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


.tcandidate-feature:hover .tcandidate-feature-arrow {

    color: var(--color);

    transform: translateX(5px);
}



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

.tcandidates-cta {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 6px 7px 6px 22px;

    border: 1px solid rgba(243, 146, 36, .25);

    border-radius: 100px;

    color: #fff;

    text-decoration: none;

    background: var(--color);

    box-shadow:
        0 12px 35px rgba(243, 146, 36, .25);

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


.tcandidates-cta:hover {

    color: #fff;

    transform: translateY(-5px);

    box-shadow:
        0 22px 50px rgba(243, 146, 36, .35);
}


.tcandidates-cta-text {

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .3px;
}


.tcandidates-cta-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: white;

    color: var(--color);

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


.tcandidates-cta:hover .tcandidates-cta-icon {

    transform: rotate(45deg);
}



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

.tcandidates-visual {

    position: relative;

    min-height: 650px;

    display: flex;

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

    perspective: 1200px;
}



/* =========================================================
           MAIN AI HUB
        ========================================================= */

.tcandidates-ai-hub {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 270px;
    height: 270px;

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

    border-radius: 50%;

    border: 1px solid rgba(243, 146, 36, .22);

    background:
        radial-gradient(circle,
            var(--bg1) 0%,
            var(--bg2) 48%,
            rgba(243, 146, 36, .06) 70%,
            transparent 71%);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .08),
        inset 0 0 60px rgba(243, 146, 36, .08);

    z-index: 1;
}


/* =========================================================
           ORBIT RINGS
        ========================================================= */

.tcandidates-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;

    border: 1px dashed rgba(243, 146, 36, .22);

    z-index: 2;
}


.tcandidates-orbit::before {

    content: "";

    position: absolute;

    inset: 42px;

    border-radius: 50%;

    border: 1px solid rgba(243, 146, 36, .12);
}


.tcandidates-orbit-inner {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 310px;
    height: 310px;

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

    border-radius: 50%;

    border: 1px dashed rgba(32, 32, 32, .09);
}



/* =========================================================
           EXACT ORBIT SYSTEM
        ========================================================= */

.orbit-system {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 470px;
    height: 470px;

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

    border-radius: 50%;

    z-index: 6;

    pointer-events: none;

    animation:
        orbitRotate 18s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }
}


/* BALLS ARE POSITIONED MATHEMATICALLY
           ON THE CIRCLE */

.orbit-ball {

    position: absolute;

    width: 15px;
    height: 15px;

    left: 50%;
    top: 50%;

    margin-left: -7.5px;
    margin-top: -7.5px;

    border-radius: 50%;

    background: var(--color);

    box-shadow:
        0 0 0 6px rgba(243, 146, 36, .12),
        0 0 25px rgba(243, 146, 36, .55);
}


.orbit-ball:nth-child(1) {

    transform:
        rotate(0deg) translateY(-235px);
}


.orbit-ball:nth-child(2) {

    transform:
        rotate(90deg) translateY(-235px);
}


.orbit-ball:nth-child(3) {

    transform:
        rotate(180deg) translateY(-235px);
}


.orbit-ball:nth-child(4) {

    transform:
        rotate(270deg) translateY(-235px);
}


/* SMALL DOTS */

.orbit-small {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    margin-left: -3.5px;
    margin-top: -3.5px;

    border-radius: 50%;

    background: #555;

    opacity: .35;
}


.orbit-small:nth-child(5) {

    transform:
        rotate(45deg) translateY(-155px);
}


.orbit-small:nth-child(6) {

    transform:
        rotate(135deg) translateY(-155px);
}


.orbit-small:nth-child(7) {

    transform:
        rotate(225deg) translateY(-155px);
}


.orbit-small:nth-child(8) {

    transform:
        rotate(315deg) translateY(-155px);
}



/* =========================================================
           CENTER AI
        ========================================================= */

.ai-center {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 125px;
    height: 125px;

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

    border-radius: 50%;

    display: flex;

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

    background:
        linear-gradient(145deg,
            #ffffff,
            #f8f6f2);

    border: 1px solid rgba(243, 146, 36, .2);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .1),
        inset 0 0 25px rgba(243, 146, 36, .08);

    z-index: 8;

    overflow: hidden;
}


.ai-center::before {

    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    border-radius: 50%;

    border: 1px solid rgba(243, 146, 36, .25);

    animation:
        centerPulse 2.4s ease-in-out infinite;
}


@keyframes centerPulse {

    0%,
    100% {
        transform: scale(.9);
        opacity: .5;
    }

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


.ai-center-content {

    position: relative;

    text-align: center;

    z-index: 2;
}


.ai-center-icon {

    color: var(--color);

    font-size: 25px;

    margin-bottom: 4px;
}


.ai-center-title {

    color: #222;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;
}


.ai-center-sub {

    color: #999;

    font-size: 8px;

    letter-spacing: 1.5px;
}



/* =========================================================
           SCANNER
        ========================================================= */

.ai-scanner {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 470px;
    height: 2px;

    transform:
        translate(-50%, -50%) rotate(-38deg);

    transform-origin: center;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(243, 146, 36, .55),
            transparent);

    filter:
        drop-shadow(0 0 8px rgba(243, 146, 36, .5));

    z-index: 4;

    animation:
        scannerMove 3.5s ease-in-out infinite;
}


@keyframes scannerMove {

    0%,
    100% {
        opacity: .2;
        transform:
            translate(-50%, -50%) rotate(-38deg) scaleX(.6);
    }

    50% {
        opacity: .8;
        transform:
            translate(-50%, -50%) rotate(38deg) scaleX(1);
    }
}



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

.candidate-card {

    position: absolute;

    width: 300px;

    padding: 12px;

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

    border-radius: 28px;
    color: var(--color1) !important;

    background: var(--bg2) !important;

    /* backdrop-filter:
                blur(22px); */

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

    z-index: 10;

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


.candidate-card:hover {

    box-shadow:
        0 35px 90px rgba(31, 31, 31, .16);

    z-index: 20;
}


.candidate-card-one {

    left: 2%;

    top: 8%;

    transform:
        rotate(-5deg);
}


.candidate-card-two {

    right: 0%;

    bottom: 8%;

    transform:
        rotate(5deg);
}


.candidate-card-one:hover {

    transform:
        translateY(-12px) rotate(-1deg) scale(1.025);
}


.candidate-card-two:hover {

    transform:
        translateY(-12px) rotate(1deg) scale(1.025);
}



/* =========================================================
           PROFILE IMAGE
        ========================================================= */

.candidate-image {

    position: relative;

    width: 100%;
    height: 220px;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(145deg,
            #f5f2ee,
            #e8e5e0);
}


.candidate-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

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


.candidate-card:hover .candidate-image img {

    transform: scale(1.08);
}


.candidate-status {

    position: absolute;

    top: 12px;
    left: 12px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 100px;

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

    backdrop-filter: blur(10px);

    color: #3c9b38;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .7px;

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


.candidate-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #42bd3b;

    box-shadow:
        0 0 0 4px rgba(66, 189, 59, .12);
}



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

.candidate-body {

    padding: 18px 7px 6px;
}


.candidate-role {

    margin-bottom: 4px;

    color: var(--color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.candidate-name {

    margin-bottom: 3px;

    color: var(--color1) !important;

    font-size: 20px;

    font-weight: 650;
}


.candidate-company {

    color: var(--color1) !important;

    font-size: 12px;
}



/* =========================================================
           MATCH FOOTER
        ========================================================= */

.candidate-match {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 15px;

    padding-top: 13px;

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


.candidate-match-label {

    color: #999;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.candidate-match-score {

    display: flex;

    align-items: center;

    gap: 8px;
}


.match-ring {

    width: 34px;
    height: 34px;

    position: relative;
}


.match-ring svg {

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}


.match-ring circle {

    fill: none;

    stroke-width: 4;
}


.match-ring .track {

    stroke: #ece9e5;
}


.match-ring .value {

    stroke: var(--color);

    stroke-linecap: round;

    stroke-dasharray: 100;

    stroke-dashoffset: 5;

    transition:
        stroke-dashoffset 1s ease;
}


.candidate-card-two .match-ring .value {

    stroke-dashoffset: 2;
}


.match-number {

    position: absolute;

    inset: 0;

    display: flex;

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

    color: var(--color1);

    font-family:
        var(--font-family-num);

    font-size: 10px;

    font-weight: 700;
}



/* =========================================================
           FLOATING DATA LABELS
        ========================================================= */

.data-pill {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    border-radius: 100px;

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

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

    backdrop-filter: blur(16px);

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

    color: #666;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    z-index: 14;
}


.data-pill i {

    color: var(--color);
}


.data-pill-one {

    top: 22%;

    right: 10%;

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


.data-pill-two {

    bottom: 22%;

    left: 7%;

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


@keyframes dataFloatOne {

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

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


@keyframes dataFloatTwo {

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

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



/* =========================================================
           DECORATIVE WRAP IMAGE
        ========================================================= */

.tcandidates-wrap {

    position: absolute;

    right: -20px;

    bottom: -35px;

    width: 220px;

    opacity: .12;

    z-index: 0;

    pointer-events: none;

    transform:
        rotate(-8deg);

    filter:
        saturate(.7);
}



/* =========================================================
           SMALL ORANGE DOTS
        ========================================================= */

.decor-dot {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color);

    box-shadow:
        0 0 15px rgba(243, 146, 36, .6);

    z-index: 2;
}


.decor-dot-one {

    left: 12%;
    top: 18%;
}


.decor-dot-two {

    right: 18%;
    top: 45%;
}


.decor-dot-three {

    left: 28%;
    bottom: 12%;
}



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

@media (max-width: 1200px) {

    .tcandidates-main-grid {

        grid-template-columns:
            minmax(320px, .8fr) minmax(500px, 1.2fr);

        gap: 40px;
    }


    .candidate-card {

        width: 270px;
    }


    .tcandidates-orbit,
    .orbit-system {

        transform:
            translate(-50%, -50%) scale(.85);
    }


    .tcandidates-ai-hub {

        transform:
            translate(-50%, -50%) scale(.9);
    }
}



@media (max-width: 991px) {

    .tcandidates-section {

        padding: 90px 0;
    }


    .tcandidates-container {

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


    .tcandidates-heading-wrap {

        margin-bottom: 60px;
    }


    .tcandidates-main-grid {

        grid-template-columns: 1fr;

        gap: 70px;
    }


    .tcandidates-visual {

        min-height: 650px;

        max-width: 700px;

        width: 100%;

        margin: auto;
    }
}



@media (max-width: 700px) {

    .tcandidates-section {

        padding: 70px 0;
    }


    .tcandidates-heading {

        font-size: 43px;

        letter-spacing: -2px;
    }


    .tcandidates-main-grid {

        gap: 30px;
    }


    .tcandidates-visual {

        min-height: 580px;
    }


    .tcandidates-orbit,
    .orbit-system {

        width: 340px;
        height: 340px;

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


    .tcandidates-orbit::before {

        inset: 32px;
    }


    .orbit-small:nth-child(5) {

        transform:
            rotate(45deg) translateY(-112px);
    }


    .orbit-small:nth-child(6) {

        transform:
            rotate(135deg) translateY(-112px);
    }


    .orbit-small:nth-child(7) {

        transform:
            rotate(225deg) translateY(-112px);
    }


    .orbit-small:nth-child(8) {

        transform:
            rotate(315deg) translateY(-112px);
    }


    .orbit-ball:nth-child(1) {

        transform:
            rotate(0deg) translateY(-170px);
    }


    .orbit-ball:nth-child(2) {

        transform:
            rotate(90deg) translateY(-170px);
    }


    .orbit-ball:nth-child(3) {

        transform:
            rotate(180deg) translateY(-170px);
    }


    .orbit-ball:nth-child(4) {

        transform:
            rotate(270deg) translateY(-170px);
    }


    .tcandidates-ai-hub {

        width: 210px;
        height: 210px;
    }


    .ai-center {

        width: 100px;
        height: 100px;
    }


    .candidate-card {

        width: 235px;

        padding: 9px;

        border-radius: 22px;
    }


    .candidate-image {

        height: 165px;

        border-radius: 16px;
    }


    .candidate-card-one {

        left: 0;

        top: 8%;
    }


    .candidate-card-two {

        right: 0;

        bottom: 5%;
    }


    .candidate-name {

        font-size: 17px;
    }


    .data-pill {

        display: none;
    }


    .ai-scanner {

        width: 350px;
    }
}



@media (max-width: 480px) {

    .tcandidates-topline {

        margin-bottom: 30px;
    }


    .tcandidates-index {

        display: none;
    }


    .tcandidates-heading {

        font-size: 38px;
    }


    .tcandidates-description {

        font-size: 15px;
    }


    .tcandidates-visual {

        min-height: 510px;
    }


    .tcandidates-orbit,
    .orbit-system {

        width: 290px;
        height: 290px;
    }


    .orbit-ball:nth-child(1) {

        transform:
            rotate(0deg) translateY(-145px);
    }


    .orbit-ball:nth-child(2) {

        transform:
            rotate(90deg) translateY(-145px);
    }


    .orbit-ball:nth-child(3) {

        transform:
            rotate(180deg) translateY(-145px);
    }


    .orbit-ball:nth-child(4) {

        transform:
            rotate(270deg) translateY(-145px);
    }


    .tcandidates-ai-hub {

        width: 180px;
        height: 180px;
    }


    .ai-center {

        width: 88px;
        height: 88px;
    }


    .ai-center-title {

        font-size: 11px;
    }


    .candidate-card {

        width: 200px;
    }


    .candidate-image {

        height: 135px;
    }


    .candidate-body {

        padding-top: 12px;
    }


    .candidate-name {

        font-size: 15px;
    }


    .candidate-company,
    .candidate-match-label {

        font-size: 9px;
    }


    .candidate-card-one {

        left: -3%;
    }


    .candidate-card-two {

        right: -3%;
    }
}



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

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }
}

/* <!-- ==================== HR CANDICATE CODE END =================== --> */


/* // ================== TESTIMONIAL CODE START   ========================== */

/* =========================
   WI TESTIMONIAL UNIVERSE
   Fully scoped component CSS
========================= */

#wiTestimonialUniverse {
    --wtu-bg: var(--bg1, #f0eeee);
    --wtu-surface: var(--bg2, #fcfcfc);
    --wtu-accent: var(--color, #f39224);
    --wtu-muted: var(--color1, #797979);
    --wtu-ink: #172333;
    --wtu-line: rgba(23, 35, 51, .12);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 70px 10px !important;
    /* padding: clamp(65px, 8vw, 120px) clamp(18px, 5vw, 76px); */
    /* background:
        radial-gradient(ellipse at 82% 43%, rgba(243, 146, 36, .105), transparent 34%),
        radial-gradient(ellipse at 9% 90%, rgba(12, 98, 173, .075), transparent 35%),
        var(--wtu-bg); */
    color: var(--color1);
    text-transform: none;
}

#wiTestimonialUniverse *,
#wiTestimonialUniverse *::before,
#wiTestimonialUniverse *::after {
    box-sizing: border-box;
}

#wiTestimonialUniverse button {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

#wiTestimonialUniverse .wtu-shell {
    position: relative;
    z-index: 2;
    /* width: min(1380px, 100%); */
    /* margin-inline: auto; */
    /* display: grid; */
    /* grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr); */
    /* gap: clamp(35px, 7vw, 115px); */
    align-items: center;
}

#wiTestimonialUniverse .wtu-intro {
    position: relative;
    z-index: 3;
}

#wiTestimonialUniverse .wtu-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--wtu-muted);
}

#wiTestimonialUniverse .wtu-live-dot,
#wiTestimonialUniverse .wtu-caption-pulse {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wtu-accent);
    box-shadow: 0 0 0 5px rgba(243, 146, 36, .13);
    animation: wtuPulse 2s ease-in-out infinite;
}

#wiTestimonialUniverse .wtu-intro h2 {
    margin: 27px 0 22px;
    font-size: clamp(42px, 5vw, 76px);
    line-height: .99;
    letter-spacing: -3.8px;
    font-weight: 750;
    color: var(--color1);
}

#wiTestimonialUniverse .wtu-heading-accent {
    color: var(--wtu-accent);
    position: relative;
    display: inline-block;
}

#wiTestimonialUniverse .wtu-heading-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 3px;
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, var(--wtu-accent), transparent);
    transform-origin: left;
    animation: wtuUnderline 3.2s ease-in-out infinite;
}

#wiTestimonialUniverse .wtu-description {
    max-width: 410px;
    margin: 0;
    color: var(--wtu-muted);
    font-size: 15px;
    line-height: 1.95;
}

#wiTestimonialUniverse .wtu-proof {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
}

#wiTestimonialUniverse .wtu-proof-stars {
    color: var(--wtu-accent);
    letter-spacing: 4px;
    font-size: 17px;
}

#wiTestimonialUniverse .wtu-proof>span {
    color: var(--wtu-muted);
    font-size: 12px;
}

#wiTestimonialUniverse .wtu-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 55px;
}

#wiTestimonialUniverse .wtu-progress-label {
    color: var(--wtu-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

#wiTestimonialUniverse .wtu-counter {
    color: var(--color1);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#wiTestimonialUniverse .wtu-counter i {
    color: var(--wtu-muted);
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
}

#wiTestimonialUniverse .wtu-progress-track {
    height: 3px;
    overflow: hidden;
    margin-top: 13px;
    border-radius: 9px;
    background: rgba(100, 100, 100, .15);
}

#wiTestimonialUniverse #wtuProgress {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: var(--wtu-accent);
    box-shadow: 0 0 15px rgba(243, 146, 36, .55);
    transition: width .65s cubic-bezier(.2, .8, .2, 1);
}

/* Decorative background elements */

#wiTestimonialUniverse .wtu-orbit {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(243, 146, 36, .15);
    border-radius: 50%;
}

#wiTestimonialUniverse .wtu-orbit-one {
    width: 520px;
    height: 520px;
    right: -210px;
    top: -230px;
    animation: wtuOrbit 35s linear infinite;
}

#wiTestimonialUniverse .wtu-orbit-two {
    width: 350px;
    height: 350px;
    left: -240px;
    bottom: -160px;
    border-color: rgba(12, 98, 173, .12);
    animation: wtuOrbit 28s linear infinite reverse;
}

#wiTestimonialUniverse .wtu-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(85px);
    opacity: .18;
    animation: wtuGlowDrift 9s ease-in-out infinite alternate;
}

#wiTestimonialUniverse .wtu-glow-one {
    top: 36%;
    right: 6%;
    background: var(--wtu-accent);
}

#wiTestimonialUniverse .wtu-glow-two {
    left: 28%;
    bottom: -100px;
    animation-delay: -4s;
}

/* Stage */

#wiTestimonialUniverse .wtu-experience {
    min-width: 0;
    perspective: 1400px;
}

#wiTestimonialUniverse .wtu-stage {
    position: relative;
    min-width: 0;
    height: clamp(385px, 39vw, 500px);
    perspective: 1400px;
    transform-style: preserve-3d;
}

#wiTestimonialUniverse .wtu-stage-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--wtu-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

#wiTestimonialUniverse .wtu-stage-caption>span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

#wiTestimonialUniverse .wtu-caption-pulse {
    width: 6px;
    height: 6px;
}

#wiTestimonialUniverse .wtu-stage-index {
    font-size: 8px;
    opacity: .75;
}

/* Animated card deck */
@media (min-width:992px) {
#wiTestimonialUniverse .wtu-card {
    left: 20% !important;

}
}
#wiTestimonialUniverse .wtu-card {
    --wtu-rx: 0deg;
    --wtu-ry: 0deg;

    position: absolute;
    top: 44px;
    /* left: 20% !important; */
    width: min(100%, 560px);
    min-height: 345px;
    padding: clamp(25px, 3.4vw, 43px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 27px;
    /* background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .79)),
        var(--wtu-surface); */
        background-color: var(--bg1) !important;
    box-shadow:
        0 28px 65px rgba(28, 39, 55, .11),
        0 8px 20px rgba(28, 39, 55, .06),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    transition:
        transform 950ms cubic-bezier(.18, .78, .22, 1),
        opacity 750ms ease,
        filter 750ms ease,
        box-shadow 750ms ease,
        border-color 750ms ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    filter: blur(3px);
}

#wiTestimonialUniverse .wtu-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -2px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--wtu-angle, 0deg),
            transparent 0deg,
            rgba(243, 146, 36, .08) 65deg,
            rgba(243, 146, 36, .9) 120deg,
            rgba(12, 98, 173, .25) 180deg,
            transparent 240deg,
            transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

#wiTestimonialUniverse .wtu-card.is-active {
    z-index: 5;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    filter: blur(0);
    border-color: rgba(243, 146, 36, .25);
    box-shadow:
        0 35px 85px rgba(28, 39, 55, .14),
        0 12px 30px rgba(243, 146, 36, .12),
        0 0 55px rgba(243, 146, 36, .08),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    transform:
        translate3d(0, 0, 60px) rotateX(var(--wtu-rx)) rotateY(var(--wtu-ry));
    animation: wtuActiveShadow 4.5s ease-in-out infinite;
}

#wiTestimonialUniverse .wtu-card.is-active::before {
    opacity: 1;
    animation: wtuBorderRotate 7s linear infinite;
}

#wiTestimonialUniverse .wtu-card.is-next {
    z-index: 4;
    opacity: .68;
    visibility: visible;
    transform: translate3d(35px, 14px, -85px) rotateY(-9deg) rotateZ(2deg) scale(.94);
    filter: blur(.5px);
}

#wiTestimonialUniverse .wtu-card.is-next-next {
    z-index: 3;
    opacity: .34;
    visibility: visible;
    transform: translate3d(62px, 28px, -170px) rotateY(-13deg) rotateZ(4deg) scale(.87);
    filter: blur(1.5px);
}

#wiTestimonialUniverse .wtu-card.is-last {
    z-index: 2;
    opacity: .16;
    visibility: visible;
    transform: translate3d(-24px, 12px, -220px) rotateY(8deg) rotateZ(-2deg) scale(.81);
    filter: blur(2px);
}

#wiTestimonialUniverse .wtu-card-top,
#wiTestimonialUniverse .wtu-card-bottom,
#wiTestimonialUniverse .wtu-person,
#wiTestimonialUniverse .wtu-person>div {
    position: relative;
    z-index: 1;
}

#wiTestimonialUniverse .wtu-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#wiTestimonialUniverse .wtu-card-number {
    color: var(--wtu-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

#wiTestimonialUniverse .wtu-card-mark {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 13px;
    background: rgba(243, 146, 36, .1);
    color: var(--wtu-accent);
    font-size: 29px;
    line-height: 1;
}

#wiTestimonialUniverse .wtu-quote-symbol {
    height: 42px;
    margin-top: 17px;
    color: var(--wtu-accent);
    font-size: 65px;
    line-height: 1;
    font-family: Georgia, serif;
    opacity: .88;
    transform: translateZ(22px);
}

#wiTestimonialUniverse .wtu-card blockquote {
    position: relative;
    z-index: 1;
    max-width: 490px;
    min-height: 105px;
    margin: 8px 0 25px;
    color: var(--color1);
    font-size: clamp(16px, 1.7vw, 21px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: -.35px;
    transform: translateZ(35px);
}

#wiTestimonialUniverse .wtu-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-top: 21px;
    border-top: 1px solid var(--wtu-line);
    transform: translateZ(26px);
}

#wiTestimonialUniverse .wtu-person {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}

#wiTestimonialUniverse .wtu-person img {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid rgba(243, 146, 36, .48);
    box-shadow: 0 5px 16px rgba(23, 35, 51, .13);
    transition: transform .5s ease, border-radius .5s ease;
}

#wiTestimonialUniverse .wtu-card.is-active:hover .wtu-person img {
    transform: rotate(-5deg) scale(1.08);
    border-radius: 50%;
}

#wiTestimonialUniverse .wtu-person h3 {
    margin: 0 0 5px;
    color: var(--color1);
    font-size: 13px;
    font-weight: 800;
}

#wiTestimonialUniverse .wtu-person p {
    margin: 0;
    color: var(--wtu-muted);
    font-size: 11px;
    line-height: 1.5;
}

#wiTestimonialUniverse .wtu-rating {
    flex: 0 0 auto;
    color: var(--wtu-accent);
    font-size: 12px;
    letter-spacing: 2px;
}

#wiTestimonialUniverse .wtu-card-watermark {
    position: absolute;
    right: 17px;
    bottom: 58px;
    color: rgba(23, 35, 51, .035);
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Orbiting decorative spheres */

#wiTestimonialUniverse .wtu-stage-orb {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    border: 1px solid rgba(243, 146, 36, .35);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff, rgba(243, 146, 36, .15) 45%, rgba(243, 146, 36, .025));
    box-shadow: 0 0 28px rgba(243, 146, 36, .12), inset 0 0 15px rgba(243, 146, 36, .15);
}

#wiTestimonialUniverse .wtu-stage-orb-a {
    top: 75px;
    right: -6px;
    width: 28px;
    height: 28px;
    animation: wtuFloatA 5s ease-in-out infinite;
}

#wiTestimonialUniverse .wtu-stage-orb-b {
    left: -18px;
    bottom: 40px;
    width: 17px;
    height: 17px;
    animation: wtuFloatA 6s ease-in-out -2s infinite;
}

/* Controls */

#wiTestimonialUniverse .wtu-controls {
    position: relative;
    z-index: 7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    width: 85% !important;
    margin-top: 9px;
}

#wiTestimonialUniverse .wtu-dots,
#wiTestimonialUniverse .wtu-control-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

#wiTestimonialUniverse .wtu-dot {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(100, 100, 100, .28);
    cursor: pointer;
    transition: width .45s ease, background .45s ease, box-shadow .45s ease;
}

#wiTestimonialUniverse .wtu-dot.is-active {
    width: 30px;
    border-radius: 10px;
    background: var(--wtu-accent);
    box-shadow: 0 0 14px rgba(243, 146, 36, .32);
}

#wiTestimonialUniverse .wtu-control-actions {
    gap: 8px;
}

#wiTestimonialUniverse .wtu-arrow,
#wiTestimonialUniverse .wtu-play {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid var(--wtu-line);
    border-radius: 50%;
    background: var(--bg2) !important;
    color: var(--color1);
    cursor: pointer;
    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

#wiTestimonialUniverse .wtu-play {
    width: 34px;
    height: 34px;
    font-size: 11px;
    margin-right: 6px;
}

#wiTestimonialUniverse .wtu-arrow {
    font-size: 21px;
}

#wiTestimonialUniverse .wtu-arrow-next {
    color: var(--color1);
    background: var(--color1);
    border-color: var(--color1);
}

#wiTestimonialUniverse .wtu-arrow:hover,
#wiTestimonialUniverse .wtu-play:hover {
    transform: translateY(-4px);
    color: var(--color1);
    background: var(--wtu-accent);
    border-color: var(--wtu-accent);
    box-shadow: 0 10px 25px rgba(243, 146, 36, .24);
}

#wiTestimonialUniverse .wtu-arrow-next:hover {
    background: var(--wtu-accent);
    border-color: var(--wtu-accent);
}

#wiTestimonialUniverse .wtu-bottom-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 0;
    color: var(--wtu-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

#wiTestimonialUniverse .wtu-bottom-line {
    display: inline-block;
    width: 25px;
    height: 1px;
    background: var(--wtu-accent);
}

/* Dark mode support: body.dark or html.dark */

body.dark #wiTestimonialUniverse,
html.dark #wiTestimonialUniverse {
    --wtu-bg: #111720;
    --wtu-surface: #1b2430;
    --wtu-ink: #f1f4f8;
    --wtu-muted: #a4afbd;
    --wtu-line: rgba(255, 255, 255, .12);
    background:
        radial-gradient(ellipse at 82% 43%, rgba(243, 146, 36, .1), transparent 34%),
        radial-gradient(ellipse at 9% 90%, rgba(12, 98, 173, .12), transparent 35%),
        var(--wtu-bg);
}

body.dark #wiTestimonialUniverse .wtu-card,
html.dark #wiTestimonialUniverse .wtu-card {
    background: linear-gradient(145deg, rgba(34, 44, 57, .98), rgba(23, 31, 42, .96));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.dark #wiTestimonialUniverse .wtu-card.is-active,
html.dark #wiTestimonialUniverse .wtu-card.is-active {
    box-shadow:
        0 35px 85px rgba(0, 0, 0, .4),
        0 12px 35px rgba(243, 146, 36, .12),
        0 0 55px rgba(243, 146, 36, .07);
}

body.dark #wiTestimonialUniverse .wtu-card-watermark,
html.dark #wiTestimonialUniverse .wtu-card-watermark {
    color: rgba(255, 255, 255, .035);
}

body.dark #wiTestimonialUniverse .wtu-arrow,
body.dark #wiTestimonialUniverse .wtu-play,
html.dark #wiTestimonialUniverse .wtu-arrow,
html.dark #wiTestimonialUniverse .wtu-play {
    background: rgba(255, 255, 255, .05);
    color: var(--color1);
    border-color: rgba(255, 255, 255, .13);
}

body.dark #wiTestimonialUniverse .wtu-arrow-next,
html.dark #wiTestimonialUniverse .wtu-arrow-next {
    color: white;
    background: var(--wtu-accent);
    border-color: var(--wtu-accent);
}

/* Keyframes */

@keyframes wtuPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(243, 146, 36, .1);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(243, 146, 36, .02);
    }
}

@keyframes wtuUnderline {

    0%,
    100% {
        transform: scaleX(.35);
        opacity: .55;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes wtuOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wtuGlowDrift {
    from {
        transform: translate3d(-15px, -12px, 0) scale(.92);
    }

    to {
        transform: translate3d(20px, 15px, 0) scale(1.12);
    }
}

@keyframes wtuFloatA {

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

    50% {
        transform: translate3d(-9px, -15px, 0);
    }
}

@keyframes wtuBorderRotate {
    to {
        --wtu-angle: 360deg;
    }
}

@keyframes wtuActiveShadow {

    0%,
    100% {
        box-shadow: 0 35px 80px rgba(28, 39, 55, .12), 0 10px 30px rgba(243, 146, 36, .08), 0 0 28px rgba(243, 146, 36, .04), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    50% {
        box-shadow: 0 42px 95px rgba(28, 39, 55, .17), 0 15px 42px rgba(243, 146, 36, .17), 0 0 65px rgba(243, 146, 36, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
    }
}

/* Responsive */

@media (max-width: 900px) {
    #wiTestimonialUniverse .wtu-shell {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    #wiTestimonialUniverse .wtu-intro h2 {
        font-size: clamp(43px, 8vw, 67px);
    }

    #wiTestimonialUniverse .wtu-description {
        max-width: 560px;
    }

    #wiTestimonialUniverse .wtu-progress-info {
        margin-top: 28px;
    }

    #wiTestimonialUniverse .wtu-stage {
        height: clamp(390px, 65vw, 480px);
    }

    #wiTestimonialUniverse .wtu-card {
        width: calc(100% - 18px);
        min-height: 335px;
    }
}

@media (max-width: 520px) {
    #wiTestimonialUniverse {
        padding: 62px 17px;
    }

    #wiTestimonialUniverse .wtu-intro h2 {
        letter-spacing: -2.5px;
    }

    #wiTestimonialUniverse .wtu-eyebrow {
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    #wiTestimonialUniverse .wtu-stage {
        height: 430px;
    }

    #wiTestimonialUniverse .wtu-card {
        top: 42px;
        width: 100%;
        min-height: 355px;
        padding: 24px 21px;
        border-radius: 23px;
    }

    #wiTestimonialUniverse .wtu-card blockquote {
        font-size: 16px;
        line-height: 1.72;
        min-height: 132px;
        margin-bottom: 22px;
    }

    #wiTestimonialUniverse .wtu-person img {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    #wiTestimonialUniverse .wtu-person h3 {
        font-size: 12px;
    }

    #wiTestimonialUniverse .wtu-person p {
        max-width: 135px;
        font-size: 10px;
    }

    #wiTestimonialUniverse .wtu-rating {
        font-size: 10px;
        letter-spacing: 1px;
    }

    #wiTestimonialUniverse .wtu-card.is-next {
        transform: translate3d(8px, 11px, -85px) rotateY(-5deg) rotateZ(1deg) scale(.96);
    }

    #wiTestimonialUniverse .wtu-card.is-next-next {
        transform: translate3d(13px, 19px, -170px) rotateY(-7deg) rotateZ(2deg) scale(.91);
    }

    #wiTestimonialUniverse .wtu-card.is-last {
        transform: translate3d(-6px, 10px, -220px) rotateY(4deg) scale(.86);
    }

    #wiTestimonialUniverse .wtu-stage-index {
        font-size: 7px;
        letter-spacing: .8px;
    }

    #wiTestimonialUniverse .wtu-arrow {
        width: 39px;
        height: 39px;
    }

    #wiTestimonialUniverse .wtu-controls {
        margin-top: 0;
    }

    #wiTestimonialUniverse .wtu-bottom-note {
        font-size: 8px;
        letter-spacing: 1.1px;
    }
}

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

    #wiTestimonialUniverse *,
    #wiTestimonialUniverse *::before,
    #wiTestimonialUniverse *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* // ================== TESTIMONIAL CODE END   ========================== */


/* =================== CLIENTAL CODE START =========================== */

/* ==================================================
   CLIENTELE CSS — ALL STYLES ARE SCOPED TO #ptClientele
================================================== */

#ptClientele {
    --pt-bg: var(--bg1, #f0eeee);
    --pt-surface: var(--bg2, #fcfcfc);
    --pt-accent: var(--color, #f39224);
    --pt-muted: var(--color1, #79797900);
    --pt-ink: #172333;
    --pt-border: rgba(23, 35, 51, .10);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    /* padding: clamp(65px, 8vw, 115px) 0 35px; */
    /* background:
        radial-gradient(ellipse at 90% 25%, rgba(243, 146, 36, .09), transparent 31%),
        radial-gradient(ellipse at 5% 80%, rgba(12, 98, 173, .055), transparent 30%),
        var(--pt-bg); */
    color: var(--color1) !important;
    font-family: var(--font-family, "Outfit", sans-serif);
    text-transform: none;
}

#ptClientele *,
#ptClientele *::before,
#ptClientele *::after {
    box-sizing: border-box;
}

#ptClientele img {
    max-width: 100%;
}

#ptClientele .pt-client-container {
    position: relative;
    z-index: 2;
    width: 100%;
    /* padding-inline: clamp(18px, 5.2vw, 88px); */
    margin: 0 auto;
}

/* Background decoration */

#ptClientele .pt-client-noise {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .15;
    background-image: radial-gradient(rgba(23, 35, 51, .19) .65px, transparent .65px);
    background-size: 19px 19px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

#ptClientele .pt-client-glow {
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: .14;
    animation: ptGlowFloat 10s ease-in-out infinite alternate;
}

#ptClientele .pt-glow-left {
    left: -120px;
    top: 10%;
}

#ptClientele .pt-glow-right {
    right: -100px;
    bottom: 8%;
    background: var(--pt-accent);
    animation-delay: -4s;
}

/* Header */

#ptClientele .pt-client-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    width: 100%;
    max-width: 1550px;
    margin: 0 auto clamp(45px, 6vw, 76px);
}

#ptClientele .pt-client-heading {
    max-width: 770px;
}

#ptClientele .pt-client-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 23px;
    color: var(--pt-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

#ptClientele .pt-eyebrow-line {
    display: inline-block;
    width: 30px;
    height: 2px;
    background: var(--pt-accent);
}

#ptClientele .pt-eyebrow-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pt-accent);
    animation: ptDotPulse 2s ease-in-out infinite;
}

#ptClientele .pt-client-heading h2 {
    margin: 0;
    color: var(--color1);
    font-size: clamp(39px, 5.6vw, 78px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -.065em;
}

#ptClientele .pt-client-heading h2>span {
    display: inline-block;
    color: var(--pt-accent);
    background: linear-gradient(100deg, var(--pt-accent), #d97815 50%, #e5a44e);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ptClientele .pt-client-heading>p {
    max-width: 590px;
    margin: 23px 0 0;
    color: var(--pt-muted);
    font-size: 15px;
    line-height: 1.95;
}

/* Header orbit */

#ptClientele .pt-client-header-side {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    padding-bottom: 6px;
}

#ptClientele .pt-client-orbit-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
}

#ptClientele .pt-orbit-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(243, 146, 36, .30);
    border-radius: 50%;
}

#ptClientele .pt-orbit-ring-1 {
    animation: ptOrbitSpin 14s linear infinite;
}

#ptClientele .pt-orbit-ring-1::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pt-accent);
    box-shadow: 0 0 13px rgba(243, 146, 36, .55);
}

#ptClientele .pt-orbit-ring-2 {
    inset: 10px;
    border-style: dashed;
    border-color: rgba(12, 98, 173, .27);
    animation: ptOrbitSpin 20s linear infinite reverse;
}

#ptClientele .pt-orbit-core {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid var(--pt-border);
    border-radius: 15px;
    background: var(--pt-surface);
    box-shadow: 0 7px 22px rgba(23, 35, 51, .07);
}

#ptClientele .pt-orbit-core svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: var(--pt-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#ptClientele .pt-client-side-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#ptClientele .pt-client-side-copy>span {
    color: var(--pt-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

#ptClientele .pt-client-side-copy strong {
    color: var(--color1);
    font-size: 14px;
    font-weight: 700;
}

/* Marquee label */

#ptClientele .pt-client-marquee-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
    color: var(--pt-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

#ptClientele .pt-client-marquee-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 8px;
    letter-spacing: 1.2px;
}

#ptClientele .pt-client-marquee-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #39aa68;
    box-shadow: 0 0 0 4px rgba(57, 170, 104, .10);
    animation: ptDotPulse 1.8s ease-in-out infinite;
}

/* Marquee stage */

#ptClientele .pt-marquee-window {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 18px 0 35px;
    perspective: 1200px;
    touch-action: pan-y;
}

#ptClientele .pt-marquee-window::before,
#ptClientele .pt-marquee-window::after {
    content: "";
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    width: clamp(25px, 7vw, 105px);
    pointer-events: none;
}

#ptClientele .pt-marquee-window::before {
    left: 0;
    background: linear-gradient(90deg, var(--pt-bg), transparent);
}

#ptClientele .pt-marquee-window::after {
    right: 0;
    background: linear-gradient(270deg, var(--pt-bg), transparent);
}

#ptClientele .pt-marquee-track {
    display: flex;
    width: max-content;
    gap: 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

#ptClientele .pt-marquee-group {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: clamp(13px, 1.8vw, 25px);
    padding: 0 clamp(7px, .9vw, 13px);
}

/* Individual client cards */

#ptClientele .pt-logo-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 0 0 clamp(220px, 23vw, 285px);
    flex-direction: column;
    align-items: flex-start;
    min-height: 255px;
    padding: 25px 24px 22px;
    overflow: hidden;
    border: 1px solid var(--pt-border);
    /* background-color: red !impi; */
  
    border-radius: 21px;
    /* background: color-mix(in srgb, var(--pt-surface) 88%, transparent); */
  
    box-shadow:
        0 8px 25px rgba(23, 35, 51, .035),
        inset 0 1px 0 rgba(255, 255, 255, .8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        border-color .45s ease,
        background .45s ease,
        box-shadow .55s ease;
}

#ptClientele .pt-logo-card::before {
    /* background-color: red !important; */
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -100%;
    width: 65%;
    height: 240%;
    transform: rotate(23deg);
    /* background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .75),
            transparent); */
    transition: left .8s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

#ptClientele .pt-logo-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -50px;
    bottom: -75px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: red !important;
    /* background: var(--pt-accent); */
    opacity: 0;
    filter: blur(65px);
    transition: opacity .5s ease;
    pointer-events: none;
}

#ptClientele .pt-logo-card:hover {
    z-index: 4;
    transform: translateY(-9px) rotateX(2deg);
    border-color: rgba(243, 146, 36, .48);
    background: var(--pt-surface);
    box-shadow:
        0 24px 45px rgba(23, 35, 51, .10),
        0 6px 25px rgba(243, 146, 36, .08),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

#ptClientele .pt-logo-card:hover::before {
    left: 150%;
}

#ptClientele .pt-logo-card:hover::after {
    opacity: .12;
}

#ptClientele .pt-logo-number {
    color: var(--pt-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: .75;
}

#ptClientele .pt-logo-image {
    /* background-color: red !important; */
    display: grid;
    place-items: center;
    width: 100%;
    height: 76px !important;
    margin: 11px 0 14px;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

#ptClientele .pt-logo-image img {
    display: block;
    width: auto;
    max-width: 145px;
    /* height: auto; */
    height: 80px !important;
    object-fit: contain;
    /* filter: grayscale(1); */
    /* opacity: .7; */
    transform: scale(.96);
    transition:
        filter .5s ease,
        opacity .5s ease,
        transform .5s cubic-bezier(.2, .8, .2, 1);
}

#ptClientele .pt-logo-card:hover .pt-logo-image {
    transform: translateY(-3px);
}

#ptClientele .pt-logo-card:hover .pt-logo-image img {
    /* filter: grayscale(0); */
    opacity: 1;
    transform: scale(1.06);
}

#ptClientele .pt-logo-caption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid var(--pt-border);
}

#ptClientele .pt-logo-caption strong {
    color: var(--color1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.2px;
}

#ptClientele .pt-logo-caption>span {
    color: var(--pt-muted);
    font-size: 10px;
    font-weight: 400;
}

#ptClientele .pt-logo-arrow {
    position: absolute;
    top: 19px;
    right: 20px;
    color: var(--pt-muted);
    font-size: 14px;
    opacity: .6;
    transform: translate(-3px, 3px);
    transition: color .3s ease, opacity .3s ease, transform .3s ease;
}

#ptClientele .pt-logo-card:hover .pt-logo-arrow {
    color: var(--pt-accent);
    opacity: 1;
    transform: translate(0, 0);
}

/* Marquee footer */

#ptClientele .pt-client-marquee-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-top: 0;
    color: var(--pt-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-align: center;
}

#ptClientele .pt-footer-decoration {
    display: inline-block;
    width: clamp(18px, 4vw, 60px);
    height: 1px;
    background: var(--pt-border);
}

/* Bottom statement */

#ptClientele .pt-client-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1550px;
    margin: clamp(45px, 6vw, 78px) auto 0;
    padding-top: 25px;
    border-top: 1px solid var(--pt-border);
}

#ptClientele .pt-client-bottom-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
}

#ptClientele .pt-bottom-index {
    color: var(--pt-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

#ptClientele .pt-client-bottom-copy p {
    margin: 0;
    color: var(--pt-muted);
    font-size: 12px;
}

#ptClientele .pt-client-bottom-copy strong {
    color: var(--color1);
    font-weight: 700;
}

#ptClientele .pt-client-bottom-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--pt-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

#ptClientele .pt-badge-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(243, 146, 36, .35);
    border-radius: 50%;
    color: var(--pt-accent);
    font-size: 14px;
}

/* Dark theme support */

body.dark #ptClientele,
html.dark #ptClientele {
    --pt-bg: #111720;
    --pt-surface: #1b2430;
    --pt-ink: #f1f4f8;
    --pt-muted: #a6b0bd;
    --pt-border: rgba(255, 255, 255, .12);
}

body.dark #ptClientele .pt-logo-card,
html.dark #ptClientele .pt-logo-card {
    background: rgba(27, 36, 48, .83);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.dark #ptClientele .pt-logo-card:hover,
html.dark #ptClientele .pt-logo-card:hover {
    background: #202c3a;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .28), 0 6px 24px rgba(243, 146, 36, .09);
}

body.dark #ptClientele .pt-logo-card::before,
html.dark #ptClientele .pt-logo-card::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
}

/* body.dark #ptClientele .pt-logo-image img,
html.dark #ptClientele .pt-logo-image img {
    opacity: .82;
} */

body.dark #ptClientele .pt-logo-card:hover .pt-logo-image img,
html.dark #ptClientele .pt-logo-card:hover .pt-logo-image img {
    opacity: 1;
}

/* Animations */

@keyframes ptOrbitSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ptDotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(243, 146, 36, .08);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(243, 146, 36, .015);
    }
}

@keyframes ptGlowFloat {
    from {
        transform: translate3d(0, -10px, 0) scale(.95);
    }

    to {
        transform: translate3d(20px, 20px, 0) scale(1.1);
    }
}

/* Responsive */

@media (max-width: 900px) {
    #ptClientele .pt-client-header {
        align-items: flex-start;
    }

    #ptClientele .pt-client-header-side {
        gap: 12px;
    }

    #ptClientele .pt-client-orbit-mark {
        width: 65px;
        height: 65px;
    }

    #ptClientele .pt-client-side-copy {
        display: none;
    }

    #ptClientele .pt-logo-card {
        flex-basis: 235px;
    }
}

@media (max-width: 600px) {
    #ptClientele {
        padding-top: 65px;
        padding-bottom: 25px;
    }

    #ptClientele .pt-client-container {
        padding-inline: 17px;
    }

    #ptClientele .pt-client-header {
        margin-bottom: 38px;
    }

    #ptClientele .pt-client-heading h2 {
        font-size: clamp(39px, 10vw, 57px);
        letter-spacing: -.055em;
    }

    #ptClientele .pt-client-heading>p {
        font-size: 13px;
        line-height: 1.85;
    }

    #ptClientele .pt-client-orbit-mark {
        width: 49px;
        height: 49px;
    }

    #ptClientele .pt-orbit-core {
        width: 29px;
        height: 29px;
        border-radius: 10px;
    }

    #ptClientele .pt-orbit-core svg {
        width: 19px;
        height: 19px;
    }

    #ptClientele .pt-client-marquee-label {
        align-items: flex-start;
        font-size: 8px;
        letter-spacing: 1px;
    }

    #ptClientele .pt-client-marquee-status {
        font-size: 7px;
        letter-spacing: .5px;
    }

    #ptClientele .pt-logo-card {
        flex-basis: 215px;
        min-height: 195px;
        padding: 22px 20px 19px;
    }

    #ptClientele .pt-logo-image {
        height: 69px;
    }

    #ptClientele .pt-client-bottom {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 40px;
    }

    #ptClientele .pt-client-bottom-copy {
        gap: 10px;
    }

    #ptClientele .pt-client-marquee-footer {
        gap: 9px;
        font-size: 7px;
        letter-spacing: .8px;
    }
}

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

    #ptClientele *,
    #ptClientele *::before,
    #ptClientele *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* =================== CLIENTAL CODE END =========================== */



/* ===================== ABOUT CSS CODE START ============================== */



::selection {
    background: var(--color);
    color: #fff
}

.about-page {
    position: relative;
    isolation: isolate;
    background: var(--bg1)
}

.about-page:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: radial-gradient(rgba(32, 35, 38, .12) .65px, transparent .65px);
    background-size: 19px 19px;
    opacity: .25
}



.about-nav {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 5
}

.about-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: -.04em;
    font-size: 21px
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--ink);
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    overflow: hidden
}

.brand-mark:before,
.brand-mark:after {
    content: "";
    position: absolute;
    width: 23px;
    height: 23px;
    border: 2px solid var(--color);
    border-radius: 50%;
    transform: translate(-5px, 5px)
}

.brand-mark:after {
    transform: translate(5px, -5px);
    border-color: #fff
}

.brand-mark span {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 900
}

.nav-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase
}

.nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #54b76a;
    box-shadow: 0 0 0 5px rgba(84, 183, 106, .12)
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--line);
    padding: 10px 14px 10px 17px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    transition: background .3s, color .3s, transform .3s
}

.nav-cta:hover {
    background: var(--ink);
    color: #fff;
    transform: translateY(-2px)
}

.nav-cta b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color);
    color: #fff;
    font-size: 16px
}

.hero {
    min-height: 690px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 44px;
    padding: 76px 0 86px;
    position: relative
}

.eyebrow {
    color: var(--color1) !important;
    display: flex;
    align-items: center;
    gap: 11px;
    text-transform: uppercase;
    letter-spacing: .19em;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted)
}

.eyebrow-line {
    height: 1px;
    width: 32px;
    background: var(--color)
}

.hero h1 {
    font-size: clamp(60px, 8.1vw, 92px) !important;
    line-height: .88;
    letter-spacing: -.071em;
    font-weight: 600;
    margin: 29px 0 28px;
    /* max-width: 720px */
}

.hero h1 .outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink)
}

.hero h1 .orange {
    color: var(--color)
}

.hero-copy {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.8;
    color:var(--color2) !important;
    max-width: 535px;
    margin: 0;font-weight: 300 !important;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 32px
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 19px;
    padding: 8px 9px 8px 22px;
    background: var(--ink);
    color: white;
    border-radius: 99px;
    font-weight: 600;
    font-size: 14px;
    transition: transform .35s var(--ease), box-shadow .35s;
    box-shadow: 0 9px 22px #20232618
}

.primary-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 17px 30px #20232625
}

.primary-btn i {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--color);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 20px;
    transition: transform .35s
}

.primary-btn:hover i {
    transform: rotate(45deg)
}

.text-link {
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #b6b6b6;
    padding: 0 0 5px;
    transition: color .3s, border .3s
}

.text-link:hover {
    color: var(--color);
    border-color: var(--color)
}

.hero-art {
    position: relative;
    min-height: 595px;
    display: grid;
    place-items: center;
    perspective: 1000px
}

.art-halo {
    height: 620px !important;
    position: absolute;
    width: min(100%, 620px);
    /* aspect-ratio: 1; */
    opacity: 0.3 !important;
    border: 1px solid var(--color1) !important;
    border-radius: 50%;
    animation: haloRotate 35s linear infinite
}

.art-halo:before,
.art-halo:after {
    content: "";
    position: absolute;
    border: 1px dashed rgba(32, 35, 38, .16);
    border-radius: 50%;
    inset: 30px
}

.art-halo:after {
    inset: 67px;
    border-style: solid;
    border-color: var(--color) !important
}

.orbit-node {
    position: absolute;
    top: 8%;
    left: 18%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 0 8px #f392241a
}

.orbit-node.two {
    top: auto;
    left: auto;
    right: 11%;
    bottom: 19%;
    width: 10px;
    height: 10px;
    background: var(--ink);
    box-shadow: 0 0 0 7px #20232612
}

.hero-image-wrap {
    width: min(78%, 350px);
    aspect-ratio: 3/5;
    border-radius: 180px 180px 35px 35px;
    overflow: hidden;
    position: relative;
    transform: rotate(3deg);
    box-shadow: var(--shadow);
    transition: transform .8s var(--ease), border-radius .8s var(--ease);
    z-index: 1;
    background: #ded8cf
}

.hero-image-wrap:hover {
    transform: rotate(0) translateY(-8px);
    border-radius: 170px 170px 22px 22px
}

.hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.78);
    transition: transform 1s var(--ease), filter .5s
}

.hero-image-wrap:hover img {
    transform: scale(1.06);
    filter: saturate(1)
}

.image-shade {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, rgba(20, 22, 24, .72))
}

.image-caption {
    position: absolute;
    bottom: 22px;
    left: 24px;
    right: 24px;
    color: white;
    z-index: 2
}

.image-caption small {
    display: block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 9px;
    opacity: .8;
    margin-bottom: 7px
}

.image-caption strong {
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.04em
}

.floating-chip {
    position: absolute;
    z-index: 3;
    color: var(--color1) !important;
    background: var(--bg2) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--bg1) !important;
    padding: 15px 17px;
    border-radius: 17px;
    box-shadow: 0 14px 40px #28231e14;
    animation: float 5s ease-in-out infinite
}

.chip-one {
    left: -2%;
    top: 25%
}

.chip-two {
    right: -1%;
    bottom: 22%;
    animation-delay: -2.5s
}

.chip-number {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: 1
}

.chip-number em {
    font-size: 15px;
    color: var(--color);
    font-style: normal
}

.chip-label {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 7px
}

.hero-index {
    position: absolute;
    right: 0;
    bottom: 35px;
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--color) !important;
    display: flex;
    gap: 13px;
    align-items: center
}

.hero-index span {
    display: block;
    width: 46px;
    height: 1px;
    background: var(--color)
}

.ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 18px 0;
    color: white !important;
    background:var(--bg2) !important;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 28s linear infinite
}

.ticker:hover .ticker-track {
    animation-play-state: paused
}

.ticker-item {
    /* background-color: var(--color) !important; */
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 28px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color1) !important;
}

.ticker-item b {
    color: var(--color);
    font-size: 18px
}

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

.section-kicker {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color);
    display: flex;
    gap: 10px;
    align-items: center
}

.section-kicker:before {
    content: "";
    height: 1px;
    width: 24px;
    background: var(--color)
}

.section-heading {
color: var(--color1) !important;
    font-size: clamp(39px, 5.3vw, 70px);
    line-height: .99;
    letter-spacing: -0.21px !important;
    font-weight: 550;
    margin: 21px 0 0;
    max-width: 780px
}

.section-heading .soft {
    color: #9b9b9b
}

.vision-grid {
    /* padding: 0% 15px !important;  */
    /* display: grid; */
    /* grid-template-columns: .82fr 1.18fr; */
    /* gap: 90px; */
    /* margin-top: 62px; */
    align-items: start
}
.vision-copy p{
    opacity: .7 !important;
    color: var(--color1) !important;
    font-size: 16px !important;
}

@media (min-width:992px) {
    .vision-aside {
    position: sticky !important;
    height: max-content !important;
    top: 105px !important;
}
}

.vision-aside p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--color1) !important;
    max-width: 320px;
    margin: 22px 0 30px
}

.circle-stamp {
    width: 150px;
    height: 150px;
    border: 1px solid rgba(32, 35, 38, .2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    margin-top: 42px
}

.circle-stamp svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: haloRotate 18s linear infinite
}

.circle-stamp .stamp-center {
    width: 74px;
    height: 74px;
    background: var(--color);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 27px;
    box-shadow: 0 0 0 9px #f3922418
}

.vision-copy {
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.85;
    color: #55595e
}

.vision-copy p {
    font-size: 20px !important;
    margin: 0 0 17px
}

.vision-copy strong {    color: var(--color1) !important;

    font-weight: 600
}

.vision-copy .big-quote {
    font-size: clamp(27px, 3.2vw, 43px);
    line-height: 1.22;
    letter-spacing: -.055em;
    color: var(--color1) !important;
    padding: 31px 0 31px 27px;
    border-left: 3px solid var(--color);
    margin: 42px 0
}

.vision-copy .big-quote span {
    color: var(--color)
}

.objectives {
    color: var(--color1) !important;
    position: relative;
    overflow: hidden
}

/* .objectives:before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    right: -160px;
    top: -180px;
    box-shadow: 0 0 0 50px #ffffff05, 0 0 0 100px #ffffff03
} */

.objectives .section-kicker {
    color: #f8b365
}

.objectives .section-heading {
    max-width: 850px
}

.objectives .section-heading .soft {
    color: #9b9b9b!important;
}

.objective-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    position: relative;
    z-index: 1
}

.objective-top p {
    max-width: 330px;
    color: var(--color1) !important;
    font-size: 16px;
    font-weight: 300 !important;
    line-height: 1.8;
    margin: 0 0 4px
}

.objective-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 64px;
    position: relative;
    z-index: 1
}

.objective-card {
    min-height: 265px;
    border: 1px solid #ffffff20;
    border-radius: 20px;
    padding: 27px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--bg2),var(--bg1)) !important;
    transition: 0.9s ease-in-out !important;
    transform-style: preserve-3d
}

.objective-card:hover {
    transform: translateY(-9px) rotateX(2deg);
    background: var(--bg2);
    border-color: #f3922480
}

.objective-card .card-no {
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--color) !important;
}

.objective-card .card-icon {
    width: 53px;
    height: 53px;
    border: 1px solid #ffffff26;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin: 28px 0 22px;
    background-color: var(--bg1) !important;
    color: #f8b365;
    font-size: 23px;
    transition: .3s ease-in-out !important;
}

.objective-card:hover .card-icon {
    transform: rotate(-9deg) scale(1.08);
    background:var(--color);
}

.objective-card h3 {
    font-size: 23px;
    letter-spacing: -.04em;
    font-weight: 500;
    margin: 0 0 11px
}

.objective-card p {
    font-size: 14px;
    line-height: 1.8;
    opacity: .8 !important;
    color: var(--color1) !important;
    margin: 0;
    max-width: 320px
}

.objective-card .card-arrow {
    position: absolute;
    right: 24px;
    top: 23px;
    color: #f39224;
    font-size: 19px;
    transition: transform .3s
}


.specialties {
    color: var(--color1) !important;
    padding-bottom: 135px
}

.specialty-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px
}

.specialty-intro p {
    max-width: 365px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 5px
}

.specialty-list {
    margin-top: 58px;
    border-top: 1px solid var(--line)
}

.specialty-row {
    display: grid;
    grid-template-columns: 70px 1fr 1.05fr 42px;
    align-items: center;
    gap: 24px;
    padding: 27px 10px;
    border-bottom: 1px solid var(--line);
    transition: padding .4s var(--ease), background .4s;
    position: relative;
    overflow: hidden
}

.specialty-row:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--orange-soft);
    transform: translateX(-102%);
    transition: transform .5s var(--ease);
    z-index: -1
}

.specialty-row:hover {
    padding-left: 22px;
    padding-right: 22px
}

.specialty-row:hover:before {
    transform: translateX(0)
}

.specialty-number {
    font-size: 12px;
    color: var(--color);
    font-weight: 700
}

.specialty-row h3 {
    font-size: clamp(19px, 2vw, 26px);
    letter-spacing: -.045em;
    font-weight: 500;
    margin: 0;
    transition: transform .35s
}

.specialty-row p {
    font-size: 13px;
    line-height: 1.75;
    color: var(--muted);
    margin: 0;
    max-width: 480px
}

.specialty-row:hover h3 {
    transform: translateX(4px)
}

.specialty-arrow {
    width: 39px;
    height: 39px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .3s, color .3s, transform .3s
}

.specialty-row:hover .specialty-arrow {
    background: var(--ink);
    color: white;
    transform: rotate(45deg)
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch
}

.story-card {
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    min-height: 520px;
    background: #d8d2c9;
    isolation: isolate
}

.story-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease), filter .6s;
    z-index: -2;
    filter: saturate(.72)
}

.story-card:hover img {
    transform: scale(1.055);
    filter: saturate(1)
}

.story-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #15151500 20%, #151515b8 100%);
    z-index: -1;
    transition: opacity .4s
}

.story-card:hover:after {
    opacity: .88
}

.story-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px;
    color: #fff;
    transform: translateY(8px);
    transition: transform .5s var(--ease)
}

.story-card:hover .story-content {
    transform: translateY(0)
}

.story-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .18em;
    border: 1px solid #ffffff72;
    border-radius: 99px;
    padding: 8px 12px;
    background: #ffffff16;
    backdrop-filter: blur(8px)
}

.story-content h3 {
    font-size: clamp(29px, 3.5vw, 43px);
    line-height: 1;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 440px;
    margin: 20px 0 12px
}

.story-content p {
    max-width: 470px;
    font-size: 14px;
    line-height: 1.8;
    color: #f0eeee;
    margin: 0
}

.story-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.story-more span:last-child {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--color);
    font-size: 19px;
    transition: transform .3s
}

.story-card:hover .story-more span:last-child {
    transform: rotate(45deg)
}

.proof {
    padding: 0 0 125px
}

.proof-panel {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 20px;
    align-items: center;
    background: rgba(252, 252, 252, .58)
}

.proof-intro {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 220px
}

.proof-intro strong {
    display: block;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--ink);
    margin-bottom: 9px
}

.proof-stat {
    border-left: 1px solid var(--line);
    padding-left: 25px
}

.proof-stat strong {
    display: block;
    font-size: 35px;
    letter-spacing: -.07em;
    font-weight: 600
}

.proof-stat span {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 7px
}

.closing {
    background: var(--color);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 90px 0
}

.closing:after {
    content: "WI";
    position: absolute;
    right: 3%;
    bottom: -28%;
    font-size: clamp(180px, 32vw, 430px);
    font-weight: 900;
    letter-spacing: -.12em;
    line-height: 1;
    color: #ffffff15;
    pointer-events: none
}

.closing-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1
}

.closing .section-kicker {
    color: #fff
}

.closing .section-kicker:before {
    background: #fff
}

.closing h2 {
    font-size: clamp(43px, 6.7vw, 84px);
    line-height: .93;
    letter-spacing: -.08em;
    font-weight: 550;
    max-width: 750px;
    margin: 22px 0 0
}

.closing h2 span {
    color: #4a3a2a
}

.closing p {
    max-width: 440px;
    color: #fff4e9;
    font-size: 15px;
    line-height: 1.8;
    margin: 20px 0 0
}

.closing-btn {
    flex-shrink: 0;
    background: #fff;
    color: var(--ink);
    padding: 10px 10px 10px 23px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 600;
    font-size: 14px;
    transition: transform .35s, box-shadow .35s
}

.closing-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px #572e151e
}

.closing-btn span {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 21px;
    transition: transform .35s
}

.closing-btn:hover span {
    transform: rotate(45deg)
}

.about-footer {
    padding: 26px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 11px;
    color: var(--muted)
}

.footer-mark {
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink);
    font-size: 15px
}

.back-top {
    width: 35px;
    height: 35px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: background .3s, color .3s
}

.back-top:hover {
    background: var(--ink);
    color: white
}

/* .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .85s var(--ease), transform .85s var(--ease)
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) */
/* } */

.reveal-left {
    opacity: 0;
    transform: translateX(-35px);
    transition: opacity .85s var(--ease), transform .85s var(--ease)
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0)
}

.reveal-right {
    opacity: 0;
    transform: translateX(35px);
    transition: opacity .85s var(--ease), transform .85s var(--ease)
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0)
}

.delay-1 {
    transition-delay: .1s
}

.delay-2 {
    transition-delay: .2s
}

.delay-3 {
    transition-delay: .3s
}

.pointer-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, #f3922411, transparent 68%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s
}

.about-page:hover .pointer-glow {
    opacity: 1
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color);
    z-index: 20;
    box-shadow: 0 0 12px #f3922480
}

@keyframes haloRotate {
    to {
        transform: rotate(360deg)
    }
}

@keyframes float {

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

    50% {
        transform: translateY(-11px)
    }
}

@keyframes ticker {
    to {
        transform: translateX(-50%)
    }
}

@media(max-width:900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 70px
    }

    .hero-art {
        min-height: 470px;
        max-width: 600px;
        width: 100%;
        margin: 0 auto
    }

    .hero-copy {
        max-width: 650px
    }

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .vision-aside {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center
    }

    .vision-aside p {
        max-width: 490px
    }

    .circle-stamp {
        margin: 0 15px 0 0
    }

    .objective-top,
    .specialty-intro {
        align-items: start;
        flex-direction: column
    }

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

    .objective-card:last-child {
        grid-column: span 2;
        min-height: 220px
    }

    .proof-panel {
        grid-template-columns: repeat(3, 1fr)
    }

    .proof-intro {
        grid-column: span 3;
        max-width: 520px
    }

    .proof-stat:first-of-type {
        border-left: 0;
        padding-left: 0
    }

    .closing-inner {
        align-items: flex-start;
        flex-direction: column
    }

    .closing-btn {
        margin-top: 10px
    }
}

@media(max-width:600px) {


    .about-nav {
        height: 70px
    }

    .nav-meta {
        display: none
    }

    .about-brand {
        font-size: 18px
    }

    .brand-mark {
        width: 34px;
        height: 34px
    }

    .nav-cta {
        font-size: 11px;
        padding: 7px 8px 7px 12px;
        gap: 7px
    }

    .nav-cta b {
        width: 23px;
        height: 23px
    }

    .hero {
        padding: 61px 0 70px;
        min-height: 0
    }

    .hero h1 {
        font-size: clamp(57px, 16vw, 88px);
        margin-top: 25px
    }

    .hero-copy {
        font-size: 16px
    }

    .hero-art {
        min-height: 390px;
        margin-top: 15px
    }

    .art-halo {
        width: 94%
    }

    .hero-image-wrap {
        width: 70%;
        max-width: 280px
    }

    .floating-chip {
        padding: 12px;
        border-radius: 13px
    }

    .chip-one {
        left: 0;
        top: 21%
    }

    .chip-two {
        right: 0;
        bottom: 15%
    }

    .chip-number {
        font-size: 24px
    }

    .chip-label {
        font-size: 9px
    }

    .hero-index {
        bottom: 4px
    }

    .section {
        padding: 82px 0
    }

    .section-heading {
        font-size: clamp(39px, 11vw, 58px)
    }

    .vision-grid {
        margin-top: 38px
    }

    .vision-aside {
        display: block
    }

    .vision-aside p {
        margin: 17px 0
    }

    .circle-stamp {
        width: 112px;
        height: 112px;
        margin-top: 26px
    }

    .circle-stamp .stamp-center {
        width: 58px;
        height: 58px;
        font-size: 22px
    }

    .vision-copy {
        font-size: 16px
    }

    .vision-copy .big-quote {
        padding: 22px 0 22px 19px;
        margin: 30px 0;
        font-size: 29px
    }

    .objective-grid {
        grid-template-columns: 1fr;
        margin-top: 38px
    }

    .objective-card,
    .objective-card:last-child {
        grid-column: auto;
        min-height: 225px;
        padding: 23px
    }

    .objective-card .card-icon {
        margin: 22px 0 17px
    }

    .specialty-list {
        margin-top: 35px
    }

    .specialty-row {
        grid-template-columns: 35px 1fr 35px;
        gap: 10px;
        padding: 23px 2px
    }

    .specialty-row p {
        grid-column: 2;
        grid-row: 2;
        margin-top: 4px
    }

    .specialty-arrow {
        grid-column: 3;
        grid-row: 1;
        width: 33px;
        height: 33px
    }

    .specialty-row:hover {
        padding-left: 10px;
        padding-right: 10px
    }

    .story-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .story-card {
        min-height: 460px
    }

    .story-content {
        padding: 25px
    }

    .story-content h3 {
        font-size: 34px
    }

    .proof {
        padding-bottom: 82px
    }

    .proof-panel {
        grid-template-columns: 1fr 1fr;
        padding: 25px 20px;
        gap: 26px 12px
    }

    .proof-intro {
        grid-column: span 2
    }

    .proof-stat {
        padding-left: 14px
    }

    .proof-stat:nth-of-type(2) {
        border-left: 0;
        padding-left: 0
    }

    .proof-stat strong {
        font-size: 30px
    }

    .proof-stat span {
        font-size: 9px
    }

    .closing {
        padding: 72px 0
    }

    .closing h2 {
        font-size: clamp(44px, 12vw, 67px)
    }

    .about-footer {
        flex-wrap: wrap
    }

    .pointer-glow {
        display: none
    }
}

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

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none
    }
}

/* ===================== ABOUT CSS CODE END ================================= *//* ==========================================================
   WI HR CONSULTING — FOOTER DESIGN SYSTEM
   Accent: #f39224
   Font: Outfit
========================================================== */

#wiFooter {
  --wif-accent: #f39224;
  --wif-accent-dark: #df7f14;

  --wif-bg: #151719;
  --wif-surface: #1d2023;
  --wif-text: #f5f5f5;
  --wif-muted: #a3a6aa;
  --wif-line: rgba(255, 255, 255, 0.11);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 70px;

  background: var(--wif-bg);
  color: var(--wif-text);

  font-family: var(--font-family, "Outfit", sans-serif);
  text-transform: none;
}

/* CONTAINER */

#wiFooter .wi-footer-container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  padding-right: clamp(18px, 4vw, 60px);
  padding-left: clamp(18px, 4vw, 60px);
  margin-right: auto;
  margin-left: auto;
}


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

#wiFooter .wi-footer-cta {
  position: relative;
  overflow: hidden;
  background: var(--wif-accent);
  color: #fff;
}

#wiFooter .wi-footer-cta > .wi-footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  min-height: 265px;
  padding-top: 48px;
  padding-bottom: 48px;
}

#wiFooter .wi-footer-cta-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

#wiFooter .wi-footer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 18px;

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

#wiFooter .wi-footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
}

#wiFooter .wi-footer-cta h2 {
  margin: 0;
  max-width: 720px;

  font-size: clamp(30px, 4vw, 51px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1.8px;

  color: #fff;
}

#wiFooter .wi-footer-cta h2 span {
  display: block;
  color: rgba(255, 255, 255, 0.77);
}

#wiFooter .wi-footer-cta-content > p {
  max-width: 520px;
  margin: 17px 0 0;

  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.8;
}

#wiFooter .wi-footer-cta-btn {
  position: relative;
  z-index: 2;

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

  flex-shrink: 0;
  padding: 18px 23px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;

  background: #fff;
  color: #202020;

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

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

#wiFooter .wi-footer-cta-btn:hover {
  background: #191b1d;
  color: #fff;
  transform: translateY(-4px);
}

#wiFooter .wi-footer-cta-btn i {
  transition: transform 0.3s ease;
}

#wiFooter .wi-footer-cta-btn:hover i {
  transform: translate(3px, -3px);
}

/* Decorative lettering */

#wiFooter .wi-footer-cta-decoration {
  position: absolute;
  right: 16%;
  bottom: -95px;

  pointer-events: none;
  user-select: none;

  font-size: clamp(180px, 25vw, 340px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -25px;

  color: rgba(255, 255, 255, 0.09);
}


/* ==========================================================
   MAIN FOOTER
========================================================== */

#wiFooter .wi-footer-main {
  position: relative;
  padding-top: 75px;
  padding-bottom: 25px;

  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(243, 146, 36, 0.065),
      transparent 38%
    ),
    var(--wif-bg);
}

#wiFooter .wi-footer-main > .wi-footer-container {
  z-index: 1;
}

#wiFooter .wi-footer-brand,
#wiFooter .wi-footer-column {
  position: relative;
  height: 100%;
}


.wi-footer-logo {
    display: inline-block;
    line-height: 0;
}


 body.black .foot_logo {
/* background-color: red !important; */
    width: 250px !important;
    height: 100px !important;
    background-image: url("../images/logo-light.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
 body.white .foot_logo {
/* background-color: red !important; */
    width: 250px !important;
    height: 100px !important;
    background-image: url("../images/logo-light.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


#wiFooter .wi-footer-logo {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  margin-bottom: 22px;
  text-decoration: none;
}

#wiFooter .wi-footer-logo img {

  display: block;
  width: 100%;
  max-height: 85px;
  object-fit: contain;
  object-position: left center;
}

#wiFooter .wi-footer-description {
  max-width: 360px;
  margin: 0 0 19px;

  color: var(--wif-muted);
  font-size: 13px;
  line-height: 1.95;
}

#wiFooter .wi-footer-about-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--wif-accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;

  transition: gap 0.3s ease;
}

#wiFooter .wi-footer-about-link:hover {
  gap: 16px;
}


/* ==========================================================
   CONTACT ITEMS
========================================================== */

#wiFooter .wi-footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;

  margin-top: 27px;
}

#wiFooter .wi-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 13px 12px;

  border: 1px solid var(--wif-line);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.018);
  color: var(--wif-text);

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

#wiFooter .wi-footer-contact-item:hover {
  border-color: rgba(243, 146, 36, 0.45);
  background: rgba(243, 146, 36, 0.055);
  transform: translateX(4px);
}

#wiFooter .wi-footer-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 40px;
  width: 40px;
  height: 40px;

  border-radius: 11px;

  background: rgba(243, 146, 36, 0.12);
  color: var(--wif-accent);
  font-size: 15px;
}

#wiFooter .wi-footer-contact-item > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

#wiFooter .wi-footer-contact-item small {
  display: block;
  margin-bottom: 5px;

  color: var(--wif-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

#wiFooter .wi-footer-contact-item strong {
  display: block;
  overflow-wrap: anywhere;

  color: var(--wif-text);
  font-size: 11px;
  line-height: 1.65;
  font-weight: 600;
}

#wiFooter .wi-footer-contact-arrow {
  flex-shrink: 0;
  color: var(--wif-muted);
  font-size: 10px;
  transition: color 0.3s ease;
}

#wiFooter .wi-footer-contact-item:hover .wi-footer-contact-arrow {
  color: var(--wif-accent);
}


/* ==========================================================
   FOOTER HEADINGS
========================================================== */

#wiFooter .wi-footer-heading {
  margin: 6px 0 14px;

  color: var(--wif-text);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.2px;
}

#wiFooter .wi-footer-heading-line {
  display: block;
  width: 37px;
  height: 3px;

  margin-bottom: 26px;
  border-radius: 10px;

  background: var(--wif-accent);
}


/* ==========================================================
   FOOTER LINKS
========================================================== */

#wiFooter .wi-footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;

  margin: 0;
  padding: 0;
  list-style: none;
}

#wiFooter .wi-footer-links li {
  margin: 0;
  padding: 0;
}

#wiFooter .wi-footer-links a {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;

  color: var(--wif-muted);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 500;

  text-decoration: none;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

#wiFooter .wi-footer-links a > i {
  flex-shrink: 0;
  margin-top: 4px;

  color: var(--wif-accent);
  font-size: 9px;

  opacity: 0.8;
  transition: transform 0.25s ease;
}

#wiFooter .wi-footer-links a:hover {
  color: var(--wif-text);
  transform: translateX(3px);
}

#wiFooter .wi-footer-links a:hover > i {
  transform: translateX(3px);
}


/* ==========================================================
   CONNECT CTA CARD
========================================================== */

#wiFooter .wi-footer-connect-text {
  margin: 0 0 20px;

  color: var(--wif-muted);
  font-size: 12px;
  line-height: 1.9;
}

#wiFooter .wi-footer-contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 15px 13px;

  border: 1px solid var(--wif-line);
  border-radius: 13px;

  background: var(--wif-surface);
  color: var(--wif-text);
  text-decoration: none;

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

#wiFooter .wi-footer-contact-btn:hover {
  border-color: var(--wif-accent);
  transform: translateY(-3px);
  background: rgba(243, 146, 36, 0.06);
}

#wiFooter .wi-footer-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;
  width: 42px;
  height: 42px;

  border-radius: 12px;

  background: var(--wif-accent);
  color: #fff;
  font-size: 16px;
}

#wiFooter .wi-footer-btn-text {
  min-width: 0;
  flex: 1;
}

#wiFooter .wi-footer-btn-text small {
  display: block;
  margin-bottom: 5px;

  color: var(--wif-muted);
  font-size: 8px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.6px;
}

#wiFooter .wi-footer-btn-text strong {
  display: block;

  color: var(--wif-text);
  font-size: 13px;
  font-weight: 800;
}

#wiFooter .wi-footer-btn-arrow {
  flex-shrink: 0;
  color: var(--wif-accent);
  font-size: 13px;

  transition: transform 0.3s ease;
}

#wiFooter .wi-footer-contact-btn:hover .wi-footer-btn-arrow {
  transform: translateX(4px);
}

#wiFooter .wi-footer-trust-note {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 18px;

  color: var(--wif-muted);
  font-size: 10px;
}

#wiFooter .wi-footer-trust-note i {
  color: var(--wif-accent);
  font-size: 12px;
}


/* ==========================================================
   FOOTER DIVIDER
========================================================== */

#wiFooter .wi-footer-divider {
  width: 100%;
  height: 1px;
  margin-top: 65px;
  margin-bottom: 22px;

  background: var(--wif-line);
}


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

#wiFooter .wi-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#wiFooter .wi-footer-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;

  color: var(--wif-muted);
  font-size: 10px;
  line-height: 1.8;
}

#wiFooter .wi-footer-copyright-symbol {
  color: var(--wif-accent);
  font-size: 14px;
}

#wiFooter .wi-footer-copyright strong {
  color: var(--wif-text);
  font-weight: 700;
}

#wiFooter .wi-footer-bottom-center {
  color: var(--wif-muted);
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
}

#wiFooter .wi-footer-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;

  flex-shrink: 0;
}

#wiFooter .wi-footer-bottom-actions > a {
  color: var(--wif-muted);
  text-decoration: none;
  font-size: 10px;
  transition: color 0.25s ease;
}

#wiFooter .wi-footer-bottom-actions > a:hover {
  color: var(--wif-accent);
}

#wiFooter .wi-footer-bottom-separator {
  width: 1px;
  height: 17px;
  background: var(--wif-line);
}

#wiFooter .wi-footer-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 10px 12px;

  border: 1px solid var(--wif-line);
  border-radius: 9px;

  background: transparent;
  color: var(--wif-text);

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;

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

#wiFooter .wi-footer-top-btn i {
  color: var(--wif-accent);
  transition: transform 0.3s ease;
}

#wiFooter .wi-footer-top-btn:hover {
  border-color: var(--wif-accent);
  background: rgba(243, 146, 36, 0.07);
  transform: translateY(-2px);
}

#wiFooter .wi-footer-top-btn:hover i {
  transform: translateY(-3px);
}


/* ==========================================================
   DARK THEME COMPATIBILITY
   Footer already uses a dark surface by design.
   These selectors support your existing theme classes.
========================================================== */

html.dark #wiFooter,
body.dark #wiFooter,
body.black #wiFooter {
  --wif-bg: #111315;
  --wif-surface: #1b1e21;
  --wif-text: #f5f5f5;
  --wif-muted: #a5a8ad;
  --wif-line: rgba(255, 255, 255, 0.12);
}


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

@media (max-width: 991.98px) {

  #wiFooter {
    margin-top: 50px;
  }

  #wiFooter .wi-footer-cta > .wi-footer-container {
    min-height: auto;
    gap: 25px;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  #wiFooter .wi-footer-cta h2 {
    font-size: clamp(29px, 4.6vw, 42px);
    letter-spacing: -1px;
  }

  #wiFooter .wi-footer-main {
    padding-top: 55px;
  }

  #wiFooter .wi-footer-divider {
    margin-top: 45px;
  }

  #wiFooter .wi-footer-bottom {
    flex-wrap: wrap;
  }

  #wiFooter .wi-footer-bottom-center {
    display: none;
  }

  #wiFooter .wi-footer-last-column {
    height: auto;
  }
}


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

@media (max-width: 767.98px) {

  #wiFooter {
    margin-top: 40px;
  }

  #wiFooter .wi-footer-container {
    padding-right: 20px;
    padding-left: 20px;
  }

  #wiFooter .wi-footer-cta > .wi-footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;

    padding-top: 42px;
    padding-bottom: 42px;
  }

  #wiFooter .wi-footer-cta-content {
    max-width: 100%;
  }

  #wiFooter .wi-footer-eyebrow {
    margin-bottom: 15px;
    font-size: 9px;
    letter-spacing: 1.6px;
  }

  #wiFooter .wi-footer-cta h2 {
    font-size: clamp(30px, 7.8vw, 42px);
    line-height: 1.16;
    letter-spacing: -1px;
  }

  #wiFooter .wi-footer-cta-content > p {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.85;
  }

  #wiFooter .wi-footer-cta-btn {
    width: 100%;
    justify-content: space-between;
    padding: 16px 18px;
  }

  #wiFooter .wi-footer-cta-decoration {
    right: -5px;
    bottom: -30px;
    font-size: 180px;
    letter-spacing: -15px;
  }

  #wiFooter .wi-footer-main {
    padding-top: 42px;
    padding-bottom: 22px;
  }

  #wiFooter .wi-footer-logo {
    max-width: 190px;
    margin-bottom: 18px;
  }

  #wiFooter .wi-footer-description {
    font-size: 12px;
    line-height: 1.9;
  }

  #wiFooter .wi-footer-contact-list {
    margin-top: 22px;
  }

  #wiFooter .wi-footer-heading {
    margin-top: 4px;
    font-size: 14px;
  }

  #wiFooter .wi-footer-heading-line {
    margin-bottom: 19px;
  }

  #wiFooter .wi-footer-links {
    gap: 13px;
  }

  #wiFooter .wi-footer-links a {
    gap: 7px;
    font-size: 11px;
  }

  #wiFooter .wi-footer-service-links a {
    font-size: 10.5px;
  }

  #wiFooter .wi-footer-connect-text {
    font-size: 12px;
  }

  #wiFooter .wi-footer-divider {
    margin-top: 35px;
    margin-bottom: 20px;
  }

  #wiFooter .wi-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
  }

  #wiFooter .wi-footer-copyright {
    font-size: 10px;
  }

  #wiFooter .wi-footer-bottom-actions {
    width: 100%;
    justify-content: space-between;
  }

}


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

@media (max-width: 380px) {

  #wiFooter .wi-footer-container {
    padding-right: 15px;
    padding-left: 15px;
  }

  #wiFooter .wi-footer-cta h2 {
    font-size: 29px;
  }

  #wiFooter .wi-footer-contact-item {
    gap: 9px;
    padding: 10px 8px;
  }

  #wiFooter .wi-footer-contact-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  #wiFooter .wi-footer-contact-item strong {
    font-size: 10px;
  }

  #wiFooter .wi-footer-service-links a {
    font-size: 10px;
  }

  #wiFooter .wi-footer-bottom-actions {
    gap: 9px;
  }

}


/* REDUCED MOTION ACCESSIBILITY */

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

  #wiFooter *,
  #wiFooter *::before,
  #wiFooter *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}


/* ================== BOOKING CODE START ====================== */

/* ================== BOOKING CODE END ================================== */