/*================= Header ==============================================================================================================*/

body{
    overflow-x: hidden;
}

/* Keep sticky navbar reliable with modern overflow behavior */
html, body { overflow-x: clip; }

div, section {
  overflow: visible;
}

.main-header{
    background: black;

   }

.navbar-custom {
    background: #0a0a0c;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

/* =====================================================================
   RJ Premium Navbar (Glass + Pro micro-interactions)
   ===================================================================== */
.rj-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  background: linear-gradient(180deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.60) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,107,0,0.16);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

.rj-nav-spacer{
  height: var(--rj-nav-h, 86px);
}

.rj-navbar::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,107,0,0.65), rgba(255,61,0,0.45), transparent);
  opacity: .9;
  pointer-events: none;
}

.rj-brand img{
  height: 56px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

.navbar-toggler {
  border: 1px solid rgba(255,107,0,0.28) !important;
  box-shadow: 0 0 0 4px rgba(255,107,0,0.08);
  border-radius: 14px !important;
  padding: 10px 12px !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(255,107,0,0.14) !important; }
.rj-toggler{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Nav links: sharp, premium hover (header only) */
.rj-navbar .navbar-nav .nav-link{
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.rj-navbar .nav-link::before{ display:none !important; }
.rj-navbar .nav-link::after{
  display: none !important; /* remove underline under navbar items */
}
.rj-navbar .navbar-nav .nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(0,0,0,0.18);
}
.rj-navbar .nav-link:hover::after,
.rj-navbar .nav-link.active::after{ transform: scaleX(1); }
.rj-navbar .navbar-nav .nav-link.active{
  box-shadow: 0 16px 34px rgba(255,107,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.18);
}

/* CTA: icon + glass pill */
.rj-cta-wrap{ align-items: center; }
.rj-cta-icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,176,0,0.22), rgba(255,107,0,0.14) 40%, rgba(255,61,0,0.06) 70%);
  border: 1px solid rgba(255,107,0,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,107,0,0.08);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.rj-cta-icon::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: rjSpin 1.6s linear infinite;
  opacity:.6;
}
.rj-cta-icon i{ position: relative; z-index: 1; font-size: 18px; }
.rj-cta-icon:hover{ transform: translateY(-1px) scale(1.02); }

.rj-cta{
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,107,0,0.06));
  box-shadow: 0 18px 45px rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.92);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rj-cta:hover{
  transform: translateY(-1px);
  border-color: rgba(255,107,0,0.35);
  box-shadow: 0 22px 55px rgba(0,0,0,0.35), 0 0 25px rgba(255,107,0,0.12);
}
.rj-cta__label{ font-size: 11px; letter-spacing: .04em; opacity: .85; }
.rj-cta__number{ font-size: 13px; font-weight: 700; letter-spacing: .02em; }

@keyframes rjSpin { to { transform: rotate(360deg); } }

/* Dropdown: keep it premium & readable */
.svc-dropdown {
  background: #0d1117 !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  min-width: 300px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,0,0.1) !important;
  animation: dropIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dropIn { from{opacity:0;transform:translateY(-10px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.svc-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #94a3b8 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}
.svc-dd-item i {
  width: 22px;
  text-align: center;
  color: #ff6b00;
  font-size: .95rem;
}
.svc-dd-item:hover, .svc-dd-item:focus {
  background: rgba(255,107,0,0.10) !important;
  color: #ffb000 !important;
  transform: translateX(4px);
}
.svc-dd-item.active {
  background: rgba(255,107,0,0.16) !important;
  color: #ffb000 !important;
  font-weight: 700 !important;
}

/* Glass-shatter page transition (keeps content visible via transparency) */
.rj-page-shatter{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,107,0,0.14), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(255,61,0,0.10), transparent 60%),
              rgba(2, 4, 9, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .16s ease;
}
.rj-page-shatter::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    repeating-conic-gradient(from 200deg, rgba(255,255,255,0.00) 0 10deg, rgba(255,255,255,0.08) 10deg 11deg),
    repeating-linear-gradient(115deg, rgba(255,107,0,0.00) 0 26px, rgba(255,107,0,0.12) 26px 27px);
  opacity: 0;
  transform: scale(1.02);
  filter: blur(0.3px);
}
.rj-page-shatter.is-active{
  opacity: 1;
  pointer-events: all;
}
.rj-page-shatter.is-active::before{
  opacity: .55;
  animation: rjCrack .52s ease forwards;
}
@keyframes rjCrack{
  0%{ transform: scale(1.06); opacity: 0; }
  30%{ opacity: .55; }
  100%{ transform: scale(1.0); opacity: .30; }
}

.rj-piece{
  position:absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translate3d(0,0,0) rotate(0deg);
  transform-origin: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rj-page-shatter.is-active .rj-piece{
  opacity: 1;
  animation: rjShard .52s cubic-bezier(.2,.9,.2,1) forwards;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rz, 0deg)) scale(0.98);
}
@keyframes rjShard{
  0%{ opacity: .0; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  25%{ opacity: .85; }
  100%{ opacity: 0; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rz, 0deg)) scale(1.03); }
}

/* Shard layout (clip-path polygons) */
.rj-piece.p1{ clip-path: polygon(0 0, 36% 0, 24% 42%, 0 34%); --tx:-14vw; --ty:-8vh; --rz:-18deg; }
.rj-piece.p2{ clip-path: polygon(36% 0, 70% 0, 58% 40%, 24% 42%); --tx:6vw; --ty:-14vh; --rz:16deg; }
.rj-piece.p3{ clip-path: polygon(70% 0, 100% 0, 100% 30%, 58% 40%); --tx:18vw; --ty:-4vh; --rz:22deg; }
.rj-piece.p4{ clip-path: polygon(0 34%, 24% 42%, 22% 78%, 0 100%); --tx:-18vw; --ty:12vh; --rz:14deg; }
.rj-piece.p5{ clip-path: polygon(24% 42%, 58% 40%, 54% 78%, 22% 78%); --tx:-6vw; --ty:18vh; --rz:-12deg; }
.rj-piece.p6{ clip-path: polygon(58% 40%, 100% 30%, 100% 62%, 54% 78%); --tx:14vw; --ty:12vh; --rz:-16deg; }
.rj-piece.p7{ clip-path: polygon(0 34%, 0 0, 10% 0, 0 18%); --tx:-22vw; --ty:-10vh; --rz:-26deg; }
.rj-piece.p8{ clip-path: polygon(90% 0, 100% 0, 100% 20%, 96% 34%); --tx:22vw; --ty:-12vh; --rz:28deg; }
.rj-piece.p9{ clip-path: polygon(0 100%, 22% 78%, 40% 100%); --tx:-12vw; --ty:24vh; --rz:20deg; }
.rj-piece.p10{ clip-path: polygon(54% 78%, 100% 62%, 100% 100%, 40% 100%); --tx:12vw; --ty:22vh; --rz:-20deg; }

@media (prefers-reduced-motion: reduce){
  .rj-page-shatter, .rj-piece, .rj-page-shatter::before { animation: none !important; transition: none !important; }
}


.main-header img {
    max-width: 85%;
    height: auto;
}


.logo {
   position: relative;
    display: inline-block;
    overflow-x: hidden;
}


.logo img {
  height: 60px; 
  display: block;
}


.logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transform: skewX(-25deg);
  animation: shine 1.5s infinite;
  pointer-events: none;
}

/* Disable logo shine animation on navbar */
.rj-navbar .logo::before{
  content: none !important;
  animation: none !important;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}


.navbar{
    font-family: 'Manrope', sans-serif;
}


/* Dropdown item base */
.dropdown-menu .dropdown-item {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    color: #000;
    transition: 0.3s ease;
    z-index: 1;
}


/* Background layer */
.dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: #ff6b00;
    border-radius: 8px;
    transition: 0.4s ease;
    z-index: -1;
}

/* Hover animation (LEFT → RIGHT fill) */
.dropdown-menu .dropdown-item:hover::before {
    width: 100%;
}

/* Text color on hover */
.dropdown-menu .dropdown-item:hover {
    color: #fff !important;
}

.nav-link{
    font-family: 'Manrope', sans-serif;
   font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color:#fff !important;
}





.nav-link{
    position: relative;
    padding: 10px 18px !important;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s ease;
}

.nav-link::before{
    content: '';
    position: absolute;

    left: 0;
    top: 0;

    width: 0%;
    height: 100%;

    background: #ff6b00;

    z-index: -1;

    transition: 0.4s ease;
    border-radius: 8px;
}

.nav-link:hover::before,
.nav-link.active::before{
    width: 100%;
}

.nav-link:hover,
.nav-link.active{
    color: #fff !important;
}


.icon-call {
    width: 40px;
    height: 40px;
    background: #ee6e23;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 11px;
}

.icon-call i {
    font-size: 22px;
    color: #fff;
}

.last-content {
    font-size: 11px;
    font-family: 'Manrope', sans-serif;
}

.last-call {
    font-size: 13px;
     font-family: 'Manrope', sans-serif;
}


/*================= Silder ==============================================================================================================*/

.custom-arrow{
    width: 70px;
    opacity: 1;
}

.arrow-icon{
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #fff;
    transition: 0.3s;
}

.arrow-icon:hover{
    background: #fff;
    color: #000;
}


.carousel-caption{
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
}


.carousel-caption h5{
   font-size: 50px;
    color: #ffffff;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}


@media(max-width:768px){

    .carousel-caption h5{
        font-size: 32px;
    }

}



.carousel{
    perspective: 1500px;
}

.carousel-item{
    transition: transform 1s ease;
}

.carousel-item img{
    height: 75vh;
    object-fit: cover;
    transform: scale(1.1) rotateY(10deg);
    transition: 1.2s ease;
    filter: brightness(0.7);
}



.carousel-item.active img{
    transform: scale(1) rotateY(0deg);
    filter: brightness(1);
}


.carousel-caption{
    top: 50%;
    transform: translateY(-50%) translateZ(100px);
    bottom: auto;
    perspective: 1000px;
}

.carousel-caption h5{
    font-size: 70px;
    font-weight: 800;
    text-transform: uppercase;
    transform: rotateX(15deg);
    animation: text3d 1s ease;
    font-family: 'Manrope', sans-serif;
}

.carousel-caption a{
     transform: rotateX(15deg);
    animation: text3d 1s ease;
     font-family: 'Manrope', sans-serif;
}

@keyframes text3d{
    from{
        opacity: 0;
        transform: rotateX(90deg) translateY(80px);
    }

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


.carousel-item::before{
    content:"";
    position:absolute;
    inset:0;
    /*background:rgba(0,0,0,0.45);*/
    z-index:1;
}

.carousel-caption{
    z-index:2;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}


.carousel-caption .btn {
    color: #fff;
    padding: 12px 35px;
    font-size: 15px;
    border-radius: 8px;
    background: #ff6b00;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
}


.carousel-caption .btn,
.carousel-caption .btn-custom {
    color: #fff;
    padding: 14px 40px;
    font-size: 15px;
    border-radius: 50px;
    background: #ff6b00;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    border: none;
    margin-top: 20px;
    display: inline-block;
    transition: 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.5);
}

.carousel-caption .btn:hover,
.carousel-caption .btn-custom:hover {
    background: #e05a00;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 107, 0, 0.7);
    color: #fff;
}


    .carousel-caption{
        bottom: 10%;
        padding: 10px;
    }

    .carousel-caption h5{
        font-size: 30px;

    }

    .carousel-caption .btn{
        font-size: 12px;
        padding: 6px 12px;
    }
}

@media (max-width:576px){
    .arrow-icon{
        margin-top:114px;
    }
}





/*================= services ==============================================================================================================*/



section.services {
    padding: 50px 0px;
    background: #fff;
}


.arrow-flow{
    
    gap:2px;
    align-items:center;
}


.arrow-flow span{
    font-size:22px;
    font-weight:bold;
    color:#2c3e50;
    opacity:0;
    display:inline-block;
    animation: flowRight 1.2s linear infinite;
}


.arrow-flow span:nth-child(1){ animation-delay:0s; }
.arrow-flow span:nth-child(2){ animation-delay:0.2s; }
.arrow-flow span:nth-child(3){ animation-delay:0.4s; }



@keyframes flowRight{
    0%{
        opacity:0;
        transform: translateX(-10px);
    }
    25%{
        opacity:1;
    }
    60%{
        transform: translateX(10px);
    }
    100%{
        opacity:0;
        transform: translateX(20px);
    }
}



.title-box h4 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    margin: 0;
    padding: 0;
    color:#ff6b00;
}


.arrow-flow span {
    color: #000000;
    font-size: 30px;
    margin: 0px;
    padding: 4px;
    align-items: center;
    justify-content: center;
}


h2.services-heading {
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    color: #111;
}

/* ── Section Tag Badge (used across all sections) ── */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ff6b00;
    border: 1px solid rgba(255, 107, 0, 0.35);
    border-radius: 99px;
    padding: 5px 16px;
    margin-bottom: 12px;
}

/* ── Section Title (team section heading) ── */
.section-title {
    font-size: 42px;
    font-weight: 800;
    font-family: 'Manrope', sans-serif;
    color: #111;
    margin-bottom: 30px;
    line-height: 1.15;
}

.section-title span {
    color: #ff6b00;
}



/*================= 3D Services Cards =================================*/

.container.all-card {
    margin-top: 90px;
    perspective: 1200px; /* Enable 3D space */
}

.card.custom-card {
    position: relative;
    padding: 40px 30px;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.custom-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, #ff6b00 0%, #ff3d00 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
    transform: translateZ(-1px); /* keep it behind content */
}

/* 3D Hover Effect */
.custom-card:hover {
    transform: translateY(-15px) rotateX(8deg) rotateY(-8deg) scale(1.02);
    box-shadow: -20px 30px 50px rgba(255, 107, 0, 0.25);
    border-color: transparent;
}

.custom-card:hover::before {
    opacity: 1;
}

/* Icon Box */
.icon-box {
    width: 85px;
    height: 85px;
    background: rgba(255, 107, 0, 0.1);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(20px);
}

.icon-box i {
    font-size: 35px;
    color: #ff3d00;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.custom-card:hover .icon-box {
    transform: translateZ(70px) translateY(-10px);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.custom-card:hover .icon-box i {
    color: #ff3d00;
    transform: scale(1.1);
}

/* Text */
.card.custom-card h3 {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Manrope', sans-serif;
    margin: 0 0 15px 0;
    line-height: 1.3;
    color: #111;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(20px);
}

.card.custom-card p {
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    color: #666;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(15px);
    flex: 1;
}

.custom-card:hover h3,
.custom-card:hover p {
    color: #ffffff !important;
}

.custom-card:hover h3 {
    transform: translateZ(50px);
}

.custom-card:hover p {
    transform: translateZ(30px);
}

.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card-body {
    flex: 1;
}



/*================= About us ==============================================================================================================*/


.bg-dark-theme {
  background-color: #0b0b0b; 
}

.bg-black-card {
  background-color: #121212; 
}

.text-brand-orange {
  color: #fd7e14; 
}

.text-muted-light {
  color: #b5b5b5;
  font-size:14px !important;
}


.border-orange-left {
  border: none;
  border-left: 4px solid #fd7e14 !important;
  border-radius: 0 8px 8px 0;
}

.icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.bg-orange-dim {
  background-color: rgba(253, 126, 20, 0.12);
}

.border-orange-dim {
  border-color: rgba(253, 126, 20, 0.2) !important;
}

.orange-divider {
  width: 60px;
  height: 3px;
  background-color: #fd7e14;
  border-radius: 2px;
}

.tracking-wider {
    color: #ff3d00;
    letter-spacing: 0.05rem;
}

@media (min-width: 992px) {
  .col-lg-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .border-lg-start-orange {
    border-left: 2px solid rgba(253, 126, 20, 0.3);
  }
}


.value-badge {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.value-badge:hover {
  transform: translateY(-3px);
  border-color: #fd7e14 !important;
}




/*================= SUPER PREMIUM ABOUT SECTION =================*/

.About {
    padding: 80px 0px;
    background: #050507;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Background animated glowing blobs */
.About::before, .About::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    animation: floatGlow 15s infinite alternate ease-in-out;
}

.About::before {
    background: rgba(255, 107, 0, 0.15);
    top: -100px;
    left: -200px;
}

.About::after {
    background: rgba(255, 61, 0, 0.15);
    bottom: -100px;
    right: -200px;
    animation-delay: -5s;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.1); }
}

/* LEFT SIDE */
.aboute-right{
    background: transparent !important;
    position: relative;
    perspective: 1000px;
}

/* IMAGE BOX */
.image-box{
    position: relative;
    width: 450px;
    height: 450px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Let glows spill out */
    transform-style: preserve-3d;
}

/* ROTATING RINGS */
.circle-design {
    position: absolute;
    inset: -25px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 107, 0, 0.6);
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.3), inset 0 0 15px rgba(255, 107, 0, 0.1);
    animation: rotateCircle 20s linear infinite;
    z-index: 1;
}

.circle-design::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: rotateCircle3DRev 25s linear infinite;
}

@keyframes rotateCircle3D {
    0% { transform: rotateZ(0deg) rotateX(10deg) rotateY(10deg); }
    100% { transform: rotateZ(360deg) rotateX(10deg) rotateY(10deg); }
}

@keyframes rotateCircle3DRev {
    0% { transform: rotateZ(360deg) rotateX(-10deg) rotateY(-10deg); }
    100% { transform: rotateZ(0deg) rotateX(-10deg) rotateY(-10deg); }
}

/* IMAGE */
.image-box img{
    width: 90%;
    height: 90%;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    background: #111;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    transition: transform 0.5s ease;
}

.image-box:hover img {
    transform: scale(1.05) translateZ(30px);
}

/* EXPERIENCE BOX */
.left-box-design {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.left-box-design::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,107,0,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: 0.5s;
    pointer-events: none;
}

.left-box-design:hover{
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(255, 107, 0, 0.5);
    box-shadow: 0 20px 40px rgba(255, 107, 0, 0.2);
}

.left-box-design:hover::before {
    opacity: 1;
}

.left-box-design h2{
    font-size: 48px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 5px;
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.8);
}

.left-box-design p{
    color: #b0b0b0;
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

/* RIGHT CONTENT AREA */
.col-md-7{
    padding-left: 70px;
    position: relative;
    z-index: 2;
}

/* HEADING */
.about-heading{
    margin-bottom: 30px;
}

.about-heading h2 {
    font-size: 46px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.about-heading h2 span.work-color {
    background: linear-gradient(135deg, #ff6b00, #ffea00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 5s infinite alternate;
}

@keyframes gradientText {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(15deg); }
}

/* PARAGRAPH - MAX READABILITY */
.about-p {
    color: #f0f0f0; /* Super bright white/gray */
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 15px;
    font-weight: 400;
    font-family: 'Manrope', sans-serif;
    text-align: justify !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    letter-spacing: 0.3px;
}

/* CARD AREA */
.about-left-footer{
    margin-top: 50px;
    padding: 0 !important;
    perspective: 1000px;
}

.about-left-footer .row{
    row-gap: 24px;
}

/* CARD - GLASSMORPHISM 3D */
.card-about {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 28px;
    padding: 40px 30px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    width: 100%;
    max-width: 320px;
    margin: 6px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    position: relative;
    transform-style: preserve-3d;
}

.card-about::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(255,107,0,0.5), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: 0.6s;
}

@media (max-width:576px){
    .card-about{
        max-width: 100%;
        padding: 30px 20px;
        margin: 0;
    }
}

@media(max-width:768px){
     .card-about{
        margin: 0 12px;
    }
}

.card-about:hover{
    transform: translateY(-15px) rotateX(5deg) rotateY(-5deg);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: -10px 20px 40px rgba(255, 107, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.card-about:hover::after {
    opacity: 1;
}

/* ICON */
.icon-box-about{
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff6b00, #ff3d00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(20px);
}

.card-about:hover .icon-box-about {
    transform: translateZ(50px) scale(1.1);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.6);
}

/* CARD TITLE */
.card-about h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 12px;
    font-family: 'Manrope', sans-serif;
    transition: 0.6s;
    transform: translateZ(15px);
}

.card-about:hover h3 {
    color: #ff6b00;
    transform: translateZ(40px);
}

/* CARD TEXT */
.card-about p{
    color: #dcdcdc;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
    font-family: 'Manrope', sans-serif;
    transition: 0.6s;
    transform: translateZ(10px);
}

.card-about:hover p {
    color: #fff;
    transform: translateZ(30px);
}


/* MOBILE */

@media(max-width:576px){

    .col-md-7{
        padding-left:12px;
        margin-top:50px;
    }

    .title-box{
        gap:14px;
    }

    .about-heading h2{
        font-size:34px;
        line-height:1.2;
    }

    .about-p{
        font-size:15px;
        line-height:1.9;
        max-width:100%;
    }

    .card-about{
        margin-bottom:20px;
        padding:28px 22px;
        width: 333px;
        height: 280px;
    }

}


.icon-box-about i{
    transition:transform .7s ease;
    display:inline-block;
}

.card-about:hover .icon-box-about i{
    transform:rotate(360deg);
}

.left-box-design{
    animation:floatBox 4s ease-in-out infinite;
}

/* SECOND BOX DELAY */

.right-box-design{
    animation-delay:2s;
     will-change:transform;
}

/* ANIMATION */

@keyframes floatBox{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/*================= Work ==============================================================================================================*/

.work {
    padding: 50px 0px;
    background-image: url(../img/pattern-14.jpg);
    background-position: top;
    overflow: hidden;
      position: relative;
}


.work::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgb(255 107 0 / 47%), transparent 40%), radial-gradient(circle at bottom right, rgb(0 0 0 / 3%), #00000000 50%), #fff;
    z-index: 1;
}

/* Content above overlay */
.work > * {
    position: relative;
    z-index: 2;
}


/**/


/*.work-heading {
    padding: 30px;
    margin-top:60px;

}*/


span.work-color {
    color: #ff3d00;
}


h2.work-h {
    color: #000;
    font-size: 40px;
    font-weight: 700;
    line-height: 37px;
    line-height: 45px;
}



.work-style-design.mt-5 h4 {
    font-size: 30px;
    font-weight: 300;
    font-style: italic;
    font-family: 'Manrope', sans-serif;
    color:#000;

}


span.work-span {
    font-size: 16px;
    font-weight: 300;
    font-style: italic;
    font-family: 'Manrope', sans-serif;
    color:#000;
}



p.work-p {
    font-size: 14px;
    text-align: justify;
    word-spacing: 3px;
    color:#000;
}


.service-card {
    width: 100%;
    background: #111827;
    border: 1px solid #2a3347;
    border-radius: 15px;
    padding: 18px;
    transition: .3s;
   position:relative;
    overflow:hidden;
    gap: 12px;
     
}

/* Fix: keep badge text from cutting on small/long titles */
.service-card > :first-child{
    min-width: 0;
    flex: 1 1 auto;
}
.service-card .service-title{
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Allow badge to wrap below if space is tight */
.service-card.d-flex{
    flex-wrap: wrap;
}
.service-card.d-flex .status{
    margin-left: auto;
}


.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:#ff5b2e;
    transition:.5s;
    
}

.service-card *{
    position:relative;
    z-index:2;
}


.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background:#ff5b2e;
    transition:.5s;
    z-index:1;
}


.icon-box-t{
    transition:.4s;
}

/* Hover pe icon color change */

.service-card:hover .icon-box-t{
    color:#fff;
}


.service-card:hover{
    transform:translateY(-5px);
    border-color:#ff5b2e;
}

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

.service-card:hover::before{
    left:0;
}











.icon-box-t{
    width:30px;
    height:30px;
    background:rgba(255,91,46,.1);
    border-radius:12px;
    color:#ff5b2e;
    font-size:14px;
}

.service-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
}

.service-text {
    color: #7f8aa3;
    font-size: 11px;
}

.status {
    border: 1px solid #ff5b2e;
    color: #ff5b2e;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 10px;
    margin-top: 0;
    white-space: nowrap;
    flex: 0 0 auto;
    align-self: center;
}

.icon-box-t i {
    font-size: 17px;
}


span.work-color.cou {
    font-size: 30px;
    font-weight: 800;
}







.swiper{
    padding:20px 10px 80px;
}

.card-box{
    height:550px;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    transition:.4s;
}

.card-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.card-box:hover img{
    transform:scale(1.08);
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
    z-index:1;
}

.content{
    position:absolute;
    left:20px;
    bottom:20px;
    color:#fff;
    z-index:3;
}


.card-box::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,0,0,.25);
    transition:.5s;
    z-index:2;
}

/* Hover */

.card-box:hover::before{
    left:0;
}

.card-box:hover{
    transform:translateY(-8px);
}

.content h3{
    font-size:24px;
    font-weight:700;
    margin-bottom:5px;
}

.content p{
    margin:0;
    font-size:14px;
}

/* Buttons */

.swiper-button-next,
.swiper-button-prev{
    width:55px;
    height:55px;
    padding:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    color:#fff;
    transition:.4s;
    box-shadow:0 5px 20px rgba(0,0,0,.3);
    
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:18px;
    font-weight:bold;
}



/* Hover Effect */

.swiper-button-next:hover,
.swiper-button-prev:hover{
    background:#ff5b2e;
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 10px 30px rgba(255,91,46,.5);
}

.swiper-button-prev{
    left:45%;
}

.swiper-button-next{
    right:45%;
}

/* Responsive */

@media(max-width:992px){

    .card-box{
        height:400px;
    }

}

@media(max-width:576px){

    .card-box{
        height:280px;
    }

}




/*================= Benifiets ==============================================================================================================*/


.Our-Benefits {
    padding: 50px 0px;
    background-image: url(../img/ben.jpg);
    background-position: bottom;
    overflow: hidden;

}



:root {
    --brand-orange: #f36b21; /* Image ke color se matching */
}

.text-orange { color: var(--brand-orange); }
.btn-orange { 
    background-color: var(--brand-orange); 
    color: white; 
    transition: 0.3s;
}
.btn-orange:hover { background-color: #d45618; color: white; transform: translateY(-2px); }

.ls-2 { letter-spacing: 2px; }

.heading-line {
    width: 60px;
    height: 4px;
    background: var(--brand-orange);
    margin-top: 10px;
}

p.text-secondary.mb-4.lh-lg {
    text-align: justify;
    font-size: 14px;
}

.accent-box {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background: var(--brand-orange);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.2;
}

.accent-box-bottom {
    position: absolute;
    height: 100px;
    width: 100px;
    background: var(--brand-orange);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.2;
    top: 403px;
    left: 443px;
    bottom: -30px;
}

.main-img {
    transition: transform 0.4s ease;
}
.main-img:hover { transform: scale(1.02); }

.icon-box-b {
    background: rgba(243, 107, 33, 0.1);
    color: var(--brand-orange);
    padding: 10px;
    border-radius: 12px;
}

.icon-box-b i { width: 24px; height: 24px; }



.main-img{
    animation: floatImage 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes floatImage{

    0%{
        transform: translateY(0px) rotate(0deg);
    }

    25%{
        transform: translateY(-10px) rotate(1deg);
    }

    50%{
        transform: translateY(-20px) rotate(0deg);
    }

    75%{
        transform: translateY(-10px) rotate(-1deg);
    }

    100%{
        transform: translateY(0px) rotate(0deg);
    }

}




   :root {
      --org: #e8620a;
      --org2: #ff7b22;
      --bg: #0e0e0e;
      --card: #161616;
      --border: rgba(255,255,255,.07);
      --oborder: rgba(232,98,10,.28);
    }

    #Strategy{ background: var(--bg); color: #fff; font-family: 'Outfit', sans-serif; }

    /* ── SECTION ── */
    .ws { position: relative; padding: 80px 0; overflow: hidden; }

    .ws-grid-bg {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 55px 55px;
    }
    .ws-blob {
      position: absolute; width: 450px; height: 450px; border-radius: 50%;
      background: radial-gradient(circle, rgba(232,98,10,.16) 0%, transparent 70%);
      top: -120px; right: -80px; pointer-events: none;
    }

    /* ── BADGE ── */
    .ws-badge { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .ws-badge .line { width: 34px; height: 3px; background: var(--org); border-radius: 2px; }
    .ws-badge span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--org2); }

    /* ── HEADING ── */
    .ws-heading { font-family: 'Bebas Neue', sans-serif; font-size:40px; line-height: 1; color: #fff; margin-bottom: 18px; }
    .ws-heading .outline { -webkit-text-stroke: 2px var(--org); color: transparent; }

    /* ── DESC ── */
    .ws-desc { font-size: 14px; color: #aaa; line-height: 1.8; margin-bottom: 22px; text-align:justify; }

    /* ── CHIPS ── */
    .ws-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .ws-chip { font-size: 11px; font-weight: 500; color: var(--org2); background: rgba(232,98,10,.14); border: 1px solid var(--oborder); padding: 4px 14px; border-radius: 20px; }

    /* ── IMAGE ── */
    .ws-img-wrap { position: relative; }
    .ws-vbar { position: absolute; left: -10px; top: 10%; bottom: 10%; width: 4px; background: linear-gradient(180deg, var(--org), transparent); border-radius: 2px; }
    .ws-img { width: 100%; border-radius: 18px; object-fit: cover; max-height: 400px; filter: brightness(.85); border: 1px solid var(--border); display: block; }
    .ws-corner-tl { position: absolute; top: -5px; left: -5px; width: 22px; height: 22px; border-top: 2px solid var(--org); border-left: 2px solid var(--org); border-radius: 3px 0 0 0; }
    .ws-corner-br { position: absolute; bottom: -5px; right: -5px; width: 22px; height: 22px; border-bottom: 2px solid var(--org); border-right: 2px solid var(--org); border-radius: 0 0 3px 0; }

    /* ── DIVIDER ── */
    .ws-divider { display: flex; align-items: center; gap: 14px; margin: 50px 0 32px; }
    .ws-divider::before, .ws-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .ws-divider span { font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #555; }

    /* ── SERVICE CARDS ── */
    .ws-cards { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }

    .ws-card { background: var(--card); padding: 26px 18px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; cursor: pointer; position: relative; transition: background .25s; }
    .ws-card:last-child { border-right: none; }
    .ws-card:hover { background: #1c1c1c; }
    .ws-card:hover .ws-icon { background: var(--org); color: #fff; border-color: transparent; }
    .ws-card:hover .ws-title { color: var(--org2); }
    .ws-card:hover .ws-arrow { background: var(--org); color: #fff; }

    .ws-num { position: absolute; top: 10px; right: 12px; font-size: 9.5px; font-weight: 700; color: var(--org); opacity: .35; }
    .ws-icon { width: 44px; height: 44px; background: rgba(232,98,10,.15); border: 1px solid var(--oborder); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--org); transition: background .25s, color .25s, border-color .25s; }
    .ws-title { font-size: 12.5px; font-weight: 600; color: #fff; margin: 0; transition: color .25s; }
    .ws-desc-card { font-size: 11px; color: #666; line-height: 1.55; flex: 1; }
    .ws-arrow { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--oborder); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--org); transition: background .25s, color .25s; }

    /* top orange bar on hover */
    .ws-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--org); transform: scaleX(0); transform-origin: left; transition: transform .28s; }
    .ws-card:hover::after { transform: scaleX(1); }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      .ws-cards { grid-template-columns: repeat(3, 1fr); }
      .ws-card:nth-child(3) { border-right: none; }
      .ws-card:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
    }
    @media (max-width: 700px) {
      .ws-cards { grid-template-columns: repeat(2, 1fr); }
      .ws-card { border-bottom: 1px solid var(--border); }
      .ws-card:nth-child(even) { border-right: none; }
      .ws-card:nth-child(3) { border-right: 1px solid var(--border); }
      .ws-card:nth-child(5), .ws-card:nth-child(6) { border-bottom: none; }
      .ws-vbar { display: none; }
    }
    @media (max-width: 480px) {
      .ws-cards { grid-template-columns: 1fr; }
      .ws-card { border-right: none; }
      .ws-card:last-child { border-bottom: none; }
    }











/*================= Team ==============================================================================================================*/


section.team {
    padding: 50px 0px !important;
}



:root {
      --orange: #e55a2b;
      --orange-dark: #c9481e;
      --dark: #1a1a2e;
    }

   

    .sec-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--orange);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .sec-eyebrow::before, .sec-eyebrow::after {
      content: ''; width: 40px; height: 2px;
      background: var(--orange); display: block;
    }
    .sec-title {
      font-size: 40px;
      font-weight: 900;
      text-align: center;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .sec-title span { color: var(--orange); }
    .sec-sub {
      text-align: center;
      font-size: 14px;
      color: #999;
      margin-bottom: 50px;
    }

    .team-card {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      border: 1.5px solid #ebebf0;
      transition: transform 0.4s cubic-bezier(.23,1,.32,1),
                  box-shadow 0.4s cubic-bezier(.23,1,.32,1),
                  border-color 0.3s;
    }
    .team-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 70px rgba(229,90,43,0.15);
      border-color: var(--orange);
    }

    .card-img-wrap {
      position: relative;
      overflow: hidden;
      height: 290px;
    }
    .card-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
      transition: transform 0.6s cubic-bezier(.23,1,.32,1);
    }
    .team-card:hover .card-img-wrap img {
      transform: scale(1.07);
    }

    .img-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.0) 55%);
      transition: opacity 0.4s;
      pointer-events: none;
    }
    .team-card:hover .img-gradient {
      background: linear-gradient(to top, rgba(26,26,46,0.92) 0%, rgba(26,26,46,0.25) 100%);
    }

    .img-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 18px 18px 16px;
      z-index: 2;
    }
    .img-info .m-name {
      font-size: 17px;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 3px;
      letter-spacing: -0.01em;
    }
    .img-info .m-role {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--orange);
      text-transform: uppercase;
    }

    .img-bio {
      position: absolute;
      bottom: 70px; left: 0; right: 56px;
      padding: 0 18px;
      z-index: 2;
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      line-height: 1.7;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.35s ease 0.05s, transform 0.4s cubic-bezier(.23,1,.32,1) 0.05s;
    }
    .team-card:hover .img-bio {
      opacity: 1;
      transform: translateY(0);
    }

    /* Social icons - right se slide in */
    .social-rail {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%) translateX(100%);
      display: flex;
      flex-direction: column;
      z-index: 4;
      transition: transform 0.45s cubic-bezier(.23,1,.32,1);
    }
    .team-card:hover .social-rail {
      transform: translateY(-50%) translateX(0);
    }

    .soc-link {
      width: 42px; height: 42px;
      background: var(--orange);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      transition: background 0.2s, transform 0.2s;
    }
    .soc-link:first-child { border-radius: 6px 0 0 0; }
    .soc-link:last-child  { border-radius: 0 0 0 6px; border-bottom: none; }
    .soc-link:hover { background: var(--dark); color: #fff; transform: translateX(-4px); }

    .soc-link:nth-child(1) { transition-delay: 0s; }
    .soc-link:nth-child(2) { transition-delay: 0.04s; }
    .soc-link:nth-child(3) { transition-delay: 0.08s; }
    .soc-link:nth-child(4) { transition-delay: 0.12s; }

    .card-bar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 4px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(.23,1,.32,1);
      z-index: 3;
    }
    .team-card:hover .card-bar { transform: scaleX(1); }

    .card-footer-strip {
      padding: 16px 18px 14px;
      background: #fff;
      border-top: 1.5px solid #f0f0f5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.3s;
    }
    .team-card:hover .card-footer-strip { background: #f8f3f0; }

    .exp-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(229,90,43,0.09);
      border: 1px solid rgba(229,90,43,0.2);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--orange);
    }
    .connect-btn {
      font-size: 11px;
      font-weight: 700;
      color: var(--dark);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: color 0.2s;
    }
    .connect-btn:hover { color: var(--orange); }

    .team-cta {
      text-align: center;
      margin-top: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }
   .btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: #fff;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    border-radius: 8px !important;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    padding: 12px 35px !important;
}
    .btn-orange:hover { background: var(--orange-dark); color: #fff; transform: translateY(-2px); }
    .btn-border {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; color: var(--dark);
      font-size: 13px; font-weight: 600;
      padding: 12px 24px; border-radius: 6px;
      border: 1.5px solid #ddd;
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-border:hover { border-color: var(--orange); color: var(--orange); }






/*================= Contact-us ==============================================================================================================*/

/*================= SUPER PREMIUM CONTACT US =================*/
.contact-premium {
    padding: 100px 0px;
    background: #000000;
    position: relative;
    overflow: hidden;
}

/* Animated background shapes */
.cp-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    animation: cp-float 15s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.cp-shape-1 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.cp-shape-2 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, rgba(255, 166, 0, 0.1) 0%, transparent 70%);
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
}

.cp-shape-3 {
    width: 25vw;
    height: 25vw;
    background: radial-gradient(circle, rgba(255, 50, 0, 0.12) 0%, transparent 70%);
    top: 40%;
    left: 40%;
    animation-delay: -10s;
}

@keyframes cp-float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -50px) scale(1.1); }
    100% { transform: translate(-30px, 30px) scale(0.9); }
}

/* Headings */
.cp-tag {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 100px;
    color: #ff6b00;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.cp-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}

.cp-heading span {
    background: linear-gradient(135deg, #ff6b00, #ffea00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cp-subheading {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Wrapper Layout */
.cp-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Left Info Side */
.cp-info-side {
    background: linear-gradient(145deg, #111111, #0a0a0a);
    padding: 3.5rem;
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-info-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cp-info-content h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.cp-info-content p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    margin-bottom: 40px;
}

.cp-info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.cp-info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 0.3s;
}

.cp-info-item:hover {
    transform: translateX(10px);
}

.cp-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 107, 0, 0.1);
    color: #ff6b00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s;
}

.cp-info-item:hover .cp-icon {
    background: #ff6b00;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
}

.cp-info-item h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.cp-info-item span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.cp-social-links {
    display: flex;
    gap: 15px;
}

.cp-social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

.cp-social-btn:hover {
    background: #ff6b00;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}

/* Decorative Circles inside left side */
.cp-circle-1 {
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255, 107, 0, 0.1);
    border-radius: 50%;
    bottom: -50px;
    right: -50px;
    z-index: 1;
}

.cp-circle-2 {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 107, 0, 0.05);
    border-radius: 50%;
    bottom: 80px;
    right: 40px;
    z-index: 1;
}

/* Right Form Side */
.cp-form-side {
    padding: 4rem 3.5rem;
    position: relative;
    display: flex;
    align-items: center;
}

.cp-form {
    width: 100%;
}

.cp-input-group {
    position: relative;
}

.cp-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 10px 0 !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    font-family: 'Outfit', sans-serif !important;
    transition: 0.3s !important;
    border-radius: 0 !important;
}

.cp-input:focus {
    outline: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

.cp-label {
    position: absolute;
    top: 10px;
    left: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    pointer-events: none;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.cp-input:focus ~ .cp-label,
.cp-input:valid ~ .cp-label {
    top: -15px;
    font-size: 0.8rem;
    color: #ff6b00;
}

.cp-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff6b00, #ffea00);
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.cp-input:focus ~ .cp-line {
    width: 100%;
}

textarea.cp-input {
    min-height: 100px;
    resize: none;
}

.cp-submit-btn {
    background: #ff6b00;
    color: #fff;
    border: none;
    padding: 16px 36px;
    border-radius: 100px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.2);
}

.cp-submit-btn:hover {
    background: #e05a00;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.4);
}

.cp-submit-btn i {
    transition: 0.3s;
}

.cp-submit-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .cp-info-side {
        padding: 2.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .cp-form-side {
        padding: 2.5rem;
    }
    .cp-heading {
        font-size: 2.5rem;
    }
}
 





 /*================= Testi ==============================================================================================================*/


section.testi {
    padding: 50px 0px;
}


    html,body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

.section-wrap{
    position:relative;
    overflow:hidden;
}

    .section-wrap {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* Section Header */
    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #E8641A;
      margin-bottom: 1rem;
    }
    .section-tag::before,
    .section-tag::after {
      content: '';
      display: block;
      width: 36px;
      height: 2px;
      background: #E8641A;
      border-radius: 2px;
    }

    .section-title {
      font-family: 'Manrope', sans-serif;
      font-size:40px;
      font-weight: 800;
    
      line-height: 1.2;
      margin-bottom: 3rem;
    }
    .section-title span { color: #E8641A; }

    /* Carousel overrides */
    .carousel-inner { overflow: visible; }

    /* Testimonial Card */
    .t-card {
      background: #161616;
      border: 0.5px solid rgba(255,255,255,0.07);
      border-radius: 24px;
      overflow: hidden;
      transition: transform 0.3s;
      width:100%;
      height:100%;
      max-width:500px;
      max-height:500px;
    }

    @media (max-width:576px){

   .t-card{
      max-width:320px;
      max-height:420px;
   }

}
    .t-card:hover { transform: translateY(-6px); }

    .t-card-top {
      display: flex;
      align-items: flex-end;
      gap: 0;
      position: relative;
    }

    .t-img-wrap {
      width: 160px;
      min-width: 160px;
      height: 180px;
      border-radius: 20px 0 0 0;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .t-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }
    .t-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(232,100,26,0.25) 0%, transparent 60%);
    }

    .t-img-border {
      position: absolute;
      left: 0; top: 0;
      width: 160px;
      height: 180px;
      border-radius: 20px 0 0 0;
      border-left: 3px solid #E8641A;
      border-top: 3px solid #E8641A;
      pointer-events: none;
      z-index: 2;
    }

    .quote-icon {
      position: absolute;
      bottom: -14px;
      right: -14px;
      width: 36px;
      height: 36px;
      background: #E8641A;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      z-index: 3;
      box-shadow: 0 4px 14px rgba(232,100,26,0.4);
    }

    .t-info {
      padding: 1.2rem 1.4rem 1rem;
      flex: 1;
    }

    .t-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 10px;
    }
    .t-stars i { color: #E8641A; font-size: 17px; }

    .t-name {
       font-family: 'Manrope', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 2px;
    }

    .t-role {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
    }

    .t-divider {
      height: 0.5px;
      background: rgba(255,255,255,0.07);
      margin: 0 1.4rem;
    }

    .t-body {
      padding: 1.3rem 1.4rem 1.6rem;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.75;
    }
    .t-body::before {
      content: '"';
      font-family: 'Manrope', sans-serif;
      font-size: 2.5rem;
      color: #E8641A;
      line-height: 0;
      vertical-align: -0.6rem;
      margin-right: 4px;
      opacity: 0.7;
    }

    /* Nav buttons */
    .carousel-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 2.5rem;
    }

    .nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 0.5px solid rgba(255,255,255,0.12);
      background: #1f1f1f;
      color: rgba(255,255,255,0.5);
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      text-decoration: none;
    }
    .nav-btn:hover {
      background: #E8641A;
      border-color: #E8641A;
      color: #fff;
    }

    .nav-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .nav-dot {
      width: 7px;
      height: 7px;
      border-radius: 99px;
      background: rgba(255,255,255,0.15);
      cursor: pointer;
      transition: background 0.2s, width 0.3s;
    }
    .nav-dot.active {
      background: #E8641A;
      width: 22px;
    }

    /* Placeholder avatars for fallback */
    .t-img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Manrope', sans-serif;
      font-size: 2.5rem;
      font-weight: 800;
      color: #E8641A;
      background: #1f1f1f;
    }

    @media (max-width: 576px) {
      .section-title { font-size: 2rem; }
      .t-img-wrap { width: 120px; min-width: 120px; height: 150px; }
    }






/*================= footer ==============================================================================================================*/





/*================= why-section ==============================================================================================================*/


 /* ======= SECTION ======= */
    .why-section {
      position: relative;
      padding: 0;
      overflow: hidden;
      min-height: 560px;
      display: flex;
      align-items: stretch;
    }

    /* ---- LEFT PANEL (image side) ---- */
    .left-panel {
      position: relative;
      background: #111827;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      overflow: hidden;
      min-height: 560px;
    }

    /* big circle clip */
    .img-circle {
      position: relative;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      overflow: hidden;
      border: 8px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
      margin: auto;
    }
    .img-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.88);
    }

    /* decorative ring outside circle */
    .ring-outer {
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      border: 1.5px dashed rgba(230,100,30,0.3);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      animation: rotateRing 18s linear infinite;
      pointer-events: none;
    }
    @keyframes rotateRing { to { transform: translate(-50%,-50%) rotate(360deg); } }

    /* dot on the ring */
    .ring-outer::before {
      content: '';
      position: absolute;
      top: 10px; left: 50%;
      width: 10px; height: 10px;
      background: #e6641e;
      border-radius: 50%;
      transform: translateX(-50%);
    }

    /* play button overlay */
    .play-btn {
      position: absolute;
      bottom: 28px;
      right: 28px;
      width: 64px; height: 64px;
      background: #e6641e;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 0 0 10px rgba(230,100,30,0.18);
      transition: transform 0.2s, box-shadow 0.2s;
      z-index: 3;
    }
    .play-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 0 0 16px rgba(230,100,30,0.12);
    }
    .play-btn svg { margin-left: 4px; }

    /* stat badge floating */
    .stat-badge {
      position: absolute;
      background: #e6641e;
      color: #fff;
      border-radius: 14px;
      padding: 12px 20px;
      z-index: 4;
      box-shadow: 0 8px 30px rgba(230,100,30,0.35);
    }
    .stat-badge .num {
     font-family: 'Manrope', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1;
    }
    .stat-badge .lbl {
      font-size: 0.68rem;
      opacity: 0.85;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }
    .badge-top {
      top: 36px; left: 36px;
    }
    .badge-bottom {
      bottom: 36px; left: 50%;
      transform: translateX(-50%);
      text-align: center;
      background: #111827;
      border: 1px solid rgba(230,100,30,0.3);
    }

    /* dark left panel bg pattern */
    .left-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 80%, rgba(230,100,30,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(230,100,30,0.08) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }
    .left-panel > * { position: relative; z-index: 1; }

    /* ---- RIGHT PANEL ---- */
    .right-panel {
      background: #fff;
      padding: 60px 52px 60px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* circuit pattern bg */
    .right-panel::before {
      content: '';
      position: absolute;
      right: -40px; bottom: -40px;
      width: 320px; height: 320px;
      background-image:
        linear-gradient(rgba(230,100,30,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,100,30,0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      border-radius: 50%;
      pointer-events: none;
    }

    /* orange vertical accent line */
    .right-panel::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 4px; height: 100%;
      background: linear-gradient(to bottom, #e6641e 0%, transparent 100%);
    }

    /* label */
    .sec-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.68rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #e6641e;
      font-weight: 600;
      margin-bottom: 14px;
    }
    .sec-label::after {
      content: '';
      display: block;
      width: 40px; height: 2px;
      background: #e6641e;
    }

    /* heading */
    .why-title {
     font-family: 'Manrope', sans-serif;
      font-size:40px;
      font-weight: 800;
      color: #111827;
      line-height: 1.2;
      margin-bottom: 36px;
      letter-spacing: -0.5px;
    }
    .why-title span { color: #e6641e; }

    /* ---- STEP ITEMS ---- */
    .step-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 18px 20px;
      border-radius: 14px;
      border: 1px solid transparent;
      transition: border-color 0.3s, background 0.3s, transform 0.25s;
      cursor: default;
      margin-bottom: 4px;
    }
    .step-item:hover {
      border-color: rgba(230,100,30,0.2);
      background: rgba(230,100,30,0.03);
      transform: translateX(6px);
    }

    /* number circle */
    .step-num {
      width: 50px; height: 50px;
      border-radius: 50%;
      background: #e6641e;
      color: #fff;
     font-family: 'Manrope', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      letter-spacing: 0.5px;
      position: relative;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .step-item:hover .step-num {
      transform: scale(1.12);
      box-shadow: 0 6px 20px rgba(230,100,30,0.4);
    }

    /* connector line between items */
    .step-connector {
      width: 1px;
      height: 20px;
      background: linear-gradient(to bottom, #e6641e, rgba(230,100,30,0.1));
      margin-left: 44px;
    }

    .step-body { flex: 1; padding-top: 2px; }

    .step-title {
      font-family: 'Manrope', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 4px;
      transition: color 0.3s;
    }
    .step-item:hover .step-title { color: #e6641e; }

    .step-desc {
      font-size: 14px;
      color: #6b7280;
      line-height: 1.6;
    }

    /* ---- responsive ---- */
    @media (max-width: 991px) {
      .why-section { flex-direction: column; }
      .left-panel { min-height: 380px; padding: 50px 20px; }
      .img-circle { width: 300px; height: 300px; }
      .ring-outer { width: 360px; height: 360px; }
      .right-panel { padding: 48px 28px; }
      .right-panel::after { display: none; }
      .badge-top { top: 20px; left: 20px; }
    }







      /* ===== SECTION ===== */
    .services-wrap {
      position: relative;
      padding: 80px 0 90px;
      overflow: hidden;
      background: #0b0d14;
    }

    /* dark tech-grid background */
    .services-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(230,100,30,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,100,30,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* big glow blob behind heading */
    .services-wrap::after {
      content: '';
      position: absolute;
      top: -80px; left: 50%;
      transform: translateX(-50%);
      width: 700px; height: 300px;
      background: radial-gradient(ellipse, rgba(230,100,30,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ===== HEADING AREA ===== */
    .sec-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.68rem;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: #e6641e;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      margin-bottom: 18px;
    }
    .sec-label::before, .sec-label::after {
      content: '';
      display: block;
      width: 36px; height: 1.5px;
      background: #e6641e;
    }

    .sec-title {
      font-family: 'Rajdhani', sans-serif;
      font-size:40px;
      font-weight: 700;
      color: #fff;
      line-height: 1.15;
      letter-spacing: 0.5px;
    }
    .sec-title span { color: #e6641e; }

    /* ===== SERVICE CARDS ===== */
    .svc-card {
      position: relative;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 20px;
      padding: 36px 24px 30px;
      text-align: center;
      transition: transform 0.3s, border-color 0.3s, background 0.3s;
      overflow: hidden;
      cursor: default;
      height: 100%;
    }

    /* orange corner accent */
    .svc-card::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 60px; height: 60px;
      background: conic-gradient(from 180deg at 100% 0%, #e6641e 0deg, transparent 90deg);
      opacity: 0;
      border-radius: 0 20px 0 0;
      transition: opacity 0.3s;
    }

    /* bottom glow */
    .svc-card::after {
      content: '';
      position: absolute;
      bottom: -40px; left: 50%;
      transform: translateX(-50%);
      width: 120px; height: 80px;
      background: radial-gradient(ellipse, rgba(230,100,30,0.35) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s;
    }

    .svc-card:hover {
      transform: translateY(-8px);
      border-color: rgba(230,100,30,0.45);
      background: rgba(230,100,30,0.04);
    }
    .svc-card:hover::before { opacity: 1; }
    .svc-card:hover::after  { opacity: 1; }

    /* icon circle */
    .icon-wrap {
      width: 88px; height: 88px;
      border-radius: 50%;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #0b0d14;
      border: 1.5px solid rgba(255,255,255,0.1);
      transition: border-color 0.3s;
    }
    /* spinning dashed ring on hover */
    .icon-wrap::before {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: 50%;
      border: 1.5px dashed rgba(230,100,30,0.5);
      opacity: 0;
      transition: opacity 0.3s;
      animation: spin 6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .svc-card:hover .icon-wrap { border-color: rgba(230,100,30,0.5); }
    .svc-card:hover .icon-wrap::before { opacity: 1; }

    .icon-wrap svg {
      width: 40px; height: 40px;
      stroke: rgba(255,255,255,0.75);
      fill: none;
      stroke-width: 1.4;
      transition: stroke 0.3s;
    }
    .svc-card:hover .icon-wrap svg { stroke: #e6641e; }

    /* title */
    .svc-name {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #e6641e;
      letter-spacing: 0.3px;
      line-height: 1.35;
      transition: color 0.3s;
    }

    /* number badge */
    .svc-num {
      position: absolute;
      top: 14px; left: 18px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(230,100,30,0.35);
      letter-spacing: 1px;
    }

    /* divider line */
    .svc-divider {
      width: 36px; height: 2px;
      background: linear-gradient(90deg, #e6641e, transparent);
      margin: 14px auto 0;
      border-radius: 2px;
      opacity: 0;
      transition: opacity 0.3s, width 0.3s;
    }
    .svc-card:hover .svc-divider { opacity: 1; width: 60px; }




/*================= Breadcrumb ==============================================================================================================*/



section.breadcrumb-area.py-5.bg-light.text-center {
    background-image: url(../img/b.jpg);
    background-position:center;
    overflow: hidden;
     position: relative;
}

/*section.breadcrumb-area.py-5.bg-light.text-center{
position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 155px 0 65px;
    min-height: 250px;
}
*/
section.breadcrumb-area.py-5.bg-light.text-center:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #131313;
    opacity: 0.6;
    content: "";
    z-index:1;
}
section.breadcrumb-area *{
position: relative;
    z-index: 2;
}


section.breadcrumb-area.py-5.bg-light.text-center h2 {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
}

.breadcrumb-item.active {
    color: #fff !important;
    font-weight: 500;
    font-size: 17px;
}



.breadcrumb-area{
    border-bottom: 1px solid #eee;
    

}

.breadcrumb-item a{
    color: #ff6b00;
    font-weight: 600;
}

.breadcrumb-item.active{
    color: #555;
    font-weight: 500;
}

.breadcrumb{
    margin-bottom: 0;
}


.breadcrumb-area {
    margin-top: 0;
}



/*================= Services intuduction ==============================================================================================================*/



.ens3-section{
  background:#f7f6f3;
  font-family:'DM Sans',system-ui,sans-serif
}
.ens3-section *{
  box-sizing:border-box
}

.ens3-wrap { display: block; width: 100%; min-height: 680px; }

/* ── Sidebar ── */
.ens3-sidebar{
  background:#0f0f0f;
  display:flex;
  flex-direction:column
}
.ens3-brand{
  padding:28px 24px 20px;
  border-bottom:1px solid rgba(255,255,255,.06)
}

.ens3-brand-sub{
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#e85d04;
  margin-bottom:5px
}

.ens3-brand-title{
  font-size:14.5px;
  font-weight:600;
  color:#fff;
  line-height:1.3
}

.ens3-nav{
  flex:1;
  padding:14px 0
}

.ens3-nav-item{
  display:flex;
  align-items:center;
  gap:0;
  cursor:pointer;
  position:relative;
  border:none;
  background:transparent;
  width:100%;
  padding:0;
  text-align:left
}

.ens3-nav-item .bar{
  width:3px;
  height:100%;
  position:absolute;
  left:0;top:0;
  background:#e85d04;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1)
}
.ens3-nav-item .inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 24px;
  width:100%;
  transition:background .3s
}

.ens3-nav-item:hover .inner{
  background:rgba(255,255,255,.05)
}
.ens3-nav-item.active .bar{
  /*transform:scaleY(1)*/
}
.ens3-nav-item.active .inner{
  background:rgba(232,93,4,.11)
}

.ens3-nav-item .ico{
  width:32px;
  height:32px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  flex-shrink:0;
  transition:background .3s
}

.ens3-nav-item.active .ico,.ens3-nav-item:hover .ico{
  background:#e85d04
}

.ens3-nav-item .ico i{
  font-size:15px;
  color:rgb(232 93 4);
  transition:color .3s
}

.ens3-nav-item.active .ico i,.ens3-nav-item:hover .ico i{
  color:#fff
}
.ens3-nav-item .lbl{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,255);
  transition:color .3s;
  line-height:1.35
}

.ens3-nav-item.active .lbl,.ens3-nav-item:hover .lbl{
  color:#fff
}
.ens3-nav-item .arr{
  margin-left:auto;
  font-size:12px;
  color:rgba(255,255,255,.12);
  transition:all .3s
}

.ens3-nav-item.active .arr,.ens3-nav-item:hover .arr{
  color:#e85d04;
  transform:translateX(3px)
}


.ens3-sidebar-bottom{
  padding:20px;
  border-top:1px solid rgba(255,255,255,.06)
}

.ens3-cta-card{
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:20px;
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .3s
}

.ens3-cta-card:hover{
  border-color:rgba(232,93,4,.4)
}

.ens3-cta-corner{
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background: #e85d04;
    clip-path: polygon(100% 0%, 100% 100%, 0 0);
}
.ens3-cta-ico{
  width:36px;
  height:36px;
  background:#e85d04;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px
}

.ens3-cta-ico i{
  font-size:18px;
  color:#fff
}

.ens3-cta-title{
  font-size:13px;
  font-weight:700;
  color:#fff;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
  margin-bottom:12px
}


.ens3-contact-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#fff;
  color:#111;
  font-size:11px;
  font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
padding:10px;
border-radius:5px;
border:none;
cursor:pointer;
transition:all .3s
}

.ens3-contact-btn:hover{
  background:#e85d04;
  color:#fff
}


.ens3-profile-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:7px;
  padding:12px 16px;
  cursor:pointer;
  transition:all .3s;
  color:#fff
}

.ens3-profile-btn:hover{
  border-color:#e85d04;
  background:rgba(232,93,4,.08)
}

.ens3-profile-btn i:first-child{
  font-size:16px;
  color:#e85d04
}

.ens3-profile-btn span{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase
}

.ens3-profile-btn i:last-child{
  margin-left:auto;
  font-size:13px;
  color:rgba(255,255,255,.2);
  transition:all .3s
}

.ens3-profile-btn:hover i:last-child{
  color:#e85d04;
  transform:translateX(3px)
}


/* ── Main Right ── */
.ens3-main{
    display: flex;
    flex-direction: column;
}
.ens3-hero{
    position: relative;
    height: 298px;
    overflow: hidden;
}
.ens3-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
    object-position: top;
}
.ens3-hero:hover img{
    transform: scale(1.04);
}
.ens3-hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.65) 0%,
        transparent 52%
    );
}
.ens3-badge{
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #e85d04;
    padding: 7px 14px;
    border-radius: 4px;
}

.ens3-badge i{
  font-size:13px;
  color:#fff
}
.ens3-badge span{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.ens3-stats-row{
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.ens3-stat{
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 10px 14px;
    backdrop-filter: blur(4px);
}

.ens3-stat-n{
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: 'Syne',system-ui,sans-serif;
}

.ens3-stat-l{
    font-size: 11px;
    color: rgba(255,255,255,.6);
    margin-top: 3px;
}


.ens3-content{
  padding:30px 32px 34px;
  flex:1
}
.ens3-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232,93,4,.1);
    border: 1px solid rgba(232,93,4,.2);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.ens3-pill i{
  font-size:11px;
  color:#e85d04
}
.ens3-pill span{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e85d04;
}

.ens3-h2{
    font-family: 'Syne',system-ui,sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #111;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ens3-h2 em{
  font-style:normal;
  color:#e85d04
}
.ens3-rule{
  display:flex;
  gap:4px;
  margin-top:13px
}
.ens3-rule span{
  height:3px;
  border-radius:2px
}
.ens3-rule span:nth-child(1){
  width:36px;
  background:#e85d04
}
.ens3-rule span:nth-child(2){
  width:14px;
  background:rgba(232,93,4,.3)
}

.ens3-rule span:nth-child(3){
  width:6px;
  background:rgba(232,93,4,.12)
}

.ens3-desc {
    font-size: 14px;
    color: #575757;
    line-height: 1.88;
    margin: 18px 0 24px;
    max-width: 580px;
    text-align: justify;
}


.ens3-net-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:26px
}
.ens3-net-card{
  border:1.5px solid #e4e2dc;
  border-radius:8px;
  padding:18px 20px;
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  background:#fff;
  position:relative;
  overflow:hidden
}

.ens3-net-card::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e85d04;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
}

.ens3-net-card:hover::after,.ens3-net-card.active::after{
  transform:scaleX(1)
}

.ens3-net-card:hover{
  border-color:#e85d04;
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(232,93,4,.12)
}

.ens3-net-card.active{
  border-color:#e85d04;
  background:rgba(232,93,4,.03)
}

.ens3-net-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px
}

.ens3-net-ico{
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: rgba(232,93,4,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s;
}

.ens3-net-ico i{
  font-size:18px;
  color:#e85d04;
  transition:color .3s
}
.ens3-net-card.active .ens3-net-ico{
  background:#e85d04
}

.ens3-net-card.active .ens3-net-ico i{
  color:#fff
}

.ens3-net-chk{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d4d1ca;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

.ens3-net-card.active .ens3-net-chk{
  background:#e85d04;
  border-color:#e85d04
}

.ens3-net-chk i{font-size:11px;
  color:transparent;
  transition:color .3s
}

.ens3-net-card.active .ens3-net-chk i{
  color:#fff
}

.ens3-net-title{
  font-size:14px;
  font-weight:700;
  color:#111;
  letter-spacing:.01em
}

.ens3-net-desc{
  font-size:12px;
  color:#888;
  line-height:1.55;
  margin-top:4px
}


.ens3-footer-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #e8e6e1;
}

.ens3-footer-txt{
  font-size:12.5px;
  color:#888
}

.ens3-footer-txt strong{
  color:#111;
  font-weight:600
}

.ens3-learn-btn{
  display:flex;
  align-items:center;
  gap:7px;
  background:#e85d04;
  color:#fff;
  border:none;
  padding:11px 22px;
  border-radius:5px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s;
  text-decoration:none
}

.ens3-learn-btn:hover{
  background:#c94e00;
  color:#fff;
  transform:translateY(-1px)
}

.ens3-learn-btn i{
  font-size:14px;
  transition:transform .3s
}

.ens3-learn-btn:hover i{
  transform:translateX(3px)
}


@media(max-width:900px){
  .ens3-wrap { display: block; width: 100%; min-height: 680px; }
  .ens3-sidebar{display:none}
}
@media(max-width:600px){
  .ens3-net-grid{
    grid-template-columns:1fr
  }
  .ens3-stats-row{
    grid-template-columns:repeat(3,1fr)
  }
  .ens3-h2{
    font-size:22px
  }
  .ens3-content{
    padding:22px 20px 26px
  }
  .ens3-footer-txt{
    display:none
  }
}


.ens3-nav-item{
    position: relative;
    overflow: hidden;
}

.ens3-nav-item .inner{
    position: relative;
    z-index: 2;
}

/* background layer */
.ens3-nav-item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0%;
    height: 100%;
    background: #E85D04;
    transform: translateX(-50%);
    transition: width 0.35s ease;
    z-index: 1;
}

/* hover effect */
.ens3-nav-item:hover::before{
    width: 100%;
}


.ens3-profile-btn{
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 14px 24px;
    border: none;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
}

/* Left Background */
.ens3-profile-btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: #e85d04;
    transition: 0.4s ease;
    z-index: -1;
}

/* Right Background */
.ens3-profile-btn::after{
    content: "";
    position: absolute;
    top: 0;
    right: -30%;
    width: 30%;
    height: 100%;
    background: #e85d04;
    transition: 0.4s ease;
    z-index: -1;
}

/* Hover */
.ens3-profile-btn:hover::before{
    left: 0;
}

.ens3-profile-btn:hover::after{
    right: 0;
}


.ens3-profile-btn:hover i{
    color: #fff;
}



.ens3-nav-item{
    position: relative;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
}

/* Hover line */
.ens3-nav-item::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #e85d04;
    transition: 0.3s ease;
}

.ens3-nav-item:hover::after,
.ens3-nav-item.active::after{
    width: 100%;
}

.ens3-nav-item.active .inner{
    background: #e85d04;
    color: #fff;
}

.ens3-nav-item.active .lbl,
.ens3-nav-item.active .ico i,
.ens3-nav-item.active .arr{
    color: #fff;
}

.ens3-nav-item.active .bar{
    opacity: 1;
    height: 100%;
    background: #e85d04;
}


@media(max-width:768px){

    .ens3-sidebar{
        width: 100%;
        display: block;
        position: relative;
    }

    .ens3-nav-item{
        width: 100%;
    }

    .ens3-nav-item .inner{
        width: 100%;
    }

}





/*================= Services-card ==============================================================================================================*/

.services-card{
   padding:10px;
   margin-bottom:20px;

}

.services-card{
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.3s ease;
}

.services-card::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 100%;
    background: #e85d04;
    transition: all 0.4s ease;
    z-index: -1;
}

.services-card:hover::before{
    bottom: 0;
}

.card.shadow.services-card{
    width: 100%;
    max-width: 250px;
    min-height: 70px;
  
}


@media(max-width:768px){

    .services-card{
        margin: auto;
    }

}

/*================= Redesign Overrides ==============================*/
:root {
  --bg: #070707;
  --surface: rgba(255,255,255,0.05);
  --surface-strong: rgba(255,255,255,0.09);
  --surface-border: rgba(255,255,255,0.08);
  --primary: #ff6b2b;
  --primary-dark: #e74c19;
  --accent: #ffc451;
  --text: #f3f3f3;
  --muted: #b5b5b5;
  --shadow: 0 30px 80px rgba(0,0,0,0.24);
}

body {
  background: radial-gradient(circle at top left, rgba(255,98,19,.12), transparent 20%),
              radial-gradient(circle at bottom right, rgba(255,107,0,.14), transparent 18%),
              #060606;
  color: var(--text);
}

.navbar-custom {
    background: #000000f5 ;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.navbar-custom .nav-link {
  color: rgba(255,255,255,0.78) !important;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  color: #fff !important;
}

.navbar-custom .dropdown-menu {
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
}

.navbar-custom .dropdown-item:hover {
  background: rgba(255,107,0,0.12);
  color: #fff !important;
}

/* Remove Bootstrap blue active state in dropdown; match navbar hover tone */
.navbar-custom .dropdown-item.active,
.navbar-custom .dropdown-item:active{
  background: rgba(255,107,0,0.12) !important;
  color: #fff !important;
}

.btn-custom {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  color: #fff;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(255,107,0,0.28);
  transition: transform .25s ease, background .25s ease;
}

.btn-custom:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff833f, #ff4a0d);
}

.carousel-caption {
  padding: 1.5rem 1.75rem;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.carousel-caption h5 {
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  line-height: 1.05;
  text-shadow: 0 20px 52px rgba(0,0,0,0.5);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.05rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--primary);
}

.heading-line {
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  margin-top: 1rem;
}

.custom-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  padding: 2rem 1.8rem;
  overflow: hidden;
  min-height: 300px;
  transition: transform .35s ease, box-shadow .35s ease;
}

.custom-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 100px rgba(0,0,0,0.24);
}

.icon-box {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  margin-bottom: 1.35rem;
}

.icon-box i {
  font-size: 1.8rem;
  color: var(--primary);
}

.about-heading h2,
.work-h {
  color: #fff;
}

.about-p,
.work-p,
.service-text,
.card-about p {
  color: rgba(255,255,255,0.72);
}

.card-about {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.card-about:hover {
  background: rgba(255,255,255,0.08);
}

.icon-box-about {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.service-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
}

.service-card:hover {
  border-color: rgba(255,107,0,0.45);
}

.icon-box-t {
  width: 46px;
  height: 46px;
  background: rgba(255,107,0,0.14);
  color: var(--primary);
  border-radius: 14px;
}

.service-title {
  font-weight: 700;
  color: #fff;
}

.status {
  color: #ffbf8d;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.card-box {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 320px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}

.card-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.card-box:hover img {
  transform: scale(1.08);
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.78));
  transition: opacity .3s ease;
}

.card-box:hover .overlay {
  opacity: 0.9;
}

.content {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  color: #fff;
}

.main-img {
  border-radius: 32px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.35);
}

.accent-box,
.accent-box-bottom {
  border-radius: 36px;
  position: absolute;
  z-index: -1;
}

.accent-box {
  width: 210px;
  height: 210px;
  top: -20px;
  left: -20px;
  background: linear-gradient(135deg, rgba(255,107,0,0.32), rgba(255,255,255,0.04));
}

.accent-box-bottom {
  width: 200px;
  height: 200px;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,255,255,0.04));
}

.footer-area {
  background: #050505;
  color: rgba(255,255,255,0.75);
}

.footer-area a {
  color: rgba(255,255,255,0.75);
}

.footer-area a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-title {
  color: var(--primary);
}

.social-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 768px) {
  .navbar-custom {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  .navbar-custom .navbar-collapse {
    background: rgba(0,0,0,0.96);
    margin-top: 0.75rem;
    border-radius: 20px;
    padding: 1rem;
  }
  .carousel-caption {
    padding: 1rem;
  }
  .container.all-card {
    margin-top: 60px;
  }
}

/* ==========================================
   PREMIUM CYBER-PROFESSIONAL REDESIGN OVERRIDES
   ========================================== */
:root {
  --primary: #ff6b00;
  --primary-glow: rgba(255, 107, 0, 0.4);
  --primary-gradient: linear-gradient(135deg, #ff6b00 0%, #ff3d00 100%);
  --dark-gradient: linear-gradient(180deg, #09090b 0%, #121215 100%);
  --glass-bg: #0a0a0c;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --neon-shadow: 0 0 25px rgba(255, 107, 0, 0.25);
  --font-manrope: 'Manrope', sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Aesthetics & Typography */
body {
  font-family: var(--font-manrope);
  background-color: #f7f9fc;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-manrope);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Section Tags */
.section-tag {
  background: rgba(255, 107, 0, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.04);
  backdrop-filter: blur(4px);
}

/* Floating Solid Navbar - fully opaque, content behind NEVER shows */
.navbar-custom {
  background: #0a0a0c !important;
  position: sticky !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 107, 0, 0.18) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100%;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 107, 0, 0.08);
  transition: var(--transition-smooth);
}

/* RJ navbar: force sticky behavior via fixed positioning (wins over `.navbar-custom`) */
.navbar-custom.rj-navbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  background: linear-gradient(180deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.60) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,107,0,0.16) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45) !important;
}

.navbar-custom.scrolled {
  margin-top: 0 !important;
  background: #080809 !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 107, 0, 0.1) !important;
}

.navbar-custom .logo img {
  height: 48px;
  transition: var(--transition-smooth);
}

.navbar-custom .logo:hover img {
  transform: scale(1.05);
}

.navbar-custom .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px !important;
  border-radius: 12px;
  transition: var(--transition-smooth) !important;
}

.navbar-custom .nav-link::before {
  display: none; /* remove old slide background */
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  color: #fff !important;
  background: #ff6b00 !important;
  box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4);
}

.navbar-custom .dropdown-menu {
  background: rgba(10, 10, 12, 0.94) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.navbar-custom .dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: var(--transition-smooth);
}

.navbar-custom .dropdown-menu .dropdown-item::before {
  display: none;
}

.navbar-custom .dropdown-menu .dropdown-item:hover {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  transform: translateX(4px);
}

/* Call Anywhere Widget styling */
.icon-call {
  background: var(--primary-gradient) !important;
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
  animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

.last-call {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: var(--transition-smooth);
}

.last-call:hover {
  color: var(--primary) !important;
}

/* Carousel Hero Redesign */
.carousel-item img {
  height: 75vh !important;
  filter: brightness(0.4) saturate(1.1) !important;
}


.carousel-caption {
  max-width: 800px;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center;
}

.carousel-caption h5 {
  font-size: 56px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  line-height: 1.15;
  margin-bottom: 24px;
}

.carousel-caption .btn-custom {
  background: var(--primary-gradient) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 14px 38px !important;
  box-shadow: 0 10px 25px rgba(255, 107, 0, 0.4);
  transition: var(--transition-smooth) !important;
}

.carousel-caption .btn-custom:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 35px rgba(255, 107, 0, 0.6), 0 0 20px rgba(255, 107, 0, 0.3) !important;
}

/* Swiper Slider indicators & arrows */
.swiper-button-next, .swiper-button-prev {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px);
  color: #fff !important;
  transition: var(--transition-smooth) !important;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--primary-gradient) !important;
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.45) !important;
  border-color: transparent !important;
}

/* Premium Services Cards */
.services {
  background: #f8fafc !important;
}

.card.custom-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 24px !important;
  padding: 45px 30px 40px 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: visible !important; /* Allow icon box and glowing elements to pop out */
  z-index: 1 !important;
}

/* Base style for the card pattern overlay - now beautifully fading on hover */
.card.custom-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(11, 11, 15, 0.94), rgba(11, 11, 15, 0.9)), url(../img/card.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 24px !important;
  opacity: 0 !important;
  transform: scale(0.96) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: -1 !important;
}

/* Beautiful illuminated top glowing bar that expands from the center on hover */
.card.custom-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--primary-gradient) !important;
  border-radius: 24px 24px 0 0 !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}

/* Sleek Icon Box Base Style */
.card.custom-card .icon-box {
  width: 75px !important;
  height: 75px !important;
  border-radius: 20px !important;
  background: rgba(255, 107, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 30px !important;
  position: relative !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 107, 0, 0.1) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card.custom-card .icon-box i {
  color: #ff6b00 !important;
  font-size: 28px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sleek Typography Base Style */
.card.custom-card h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 3 !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card.custom-card p {
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  position: relative !important;
  z-index: 3 !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =========================================
   SPECTACULAR CYBER-GLOW HOVER EFFECTS ("TAGADA")
   ========================================= */

.card.custom-card:hover {
  transform: translateY(-15px) !important;
  border-color: rgba(255, 107, 0, 0.4) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 107, 0, 0.25) !important;
  background: #0a0a0c !important;
}

/* Trigger top glowing border */
.card.custom-card:hover::after {
  transform: scaleX(1) !important;
}

/* Fade in the network pattern with a smooth dynamic zoom effect */
.card.custom-card:hover::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* High-tech Floating Icon Box Animation:
   Slides up smoothly to overlap the top border, morphs into a glowing circle,
   and gets a premium cyber-ring border outline with dual glow shadows! */
.card.custom-card:hover .icon-box {
  transform: translateY(-60px) scale(1.05) !important;
  border-radius: 50% !important;
  background: #121217 !important;
  border: 2px solid #ff6b00 !important;
  box-shadow: 0 0 0 6px #0a0a0c, 0 0 25px rgba(255, 107, 0, 0.65) !important;
}

/* Icon rotation and glowing transition */
.card.custom-card:hover .icon-box i {
  color: #ff6b00 !important;
  transform: rotateY(360deg) !important;
  text-shadow: 0 0 15px rgba(255, 107, 0, 0.9) !important;
}

/* Modern clean typography transitions */
.card.custom-card:hover h3 {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

.card.custom-card:hover p {
  color: #94a3b8 !important;
}

/* About Section Orbiting Design */
.About {
  background-color: #0b0b0d !important;
  background-image: radial-gradient(rgba(255, 107, 0, 0.05) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  padding: 100px 0 !important;
}

.left-box-design {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px);
  transition: var(--transition-smooth) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.left-box-design:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 20px 40px rgba(255, 107, 0, 0.15) !important;
  transform: translateY(-8px);
}

.left-box-design h2 {
  font-size: 44px !important;
  font-weight: 800 !important;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Multi Platform Cards inside About us */
.card-about {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px);
  border-radius: 24px !important;
  transition: var(--transition-smooth) !important;
}

.card-about:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
  transform: translateY(-8px) !important;
}

.icon-box-about {
  background: var(--primary-gradient) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.3) !important;
}

/* Completed Work (Stats) section */
.work {
  background-color: #ffffff !important;
  padding: 100px 0 !important;
}

.work-color {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.cou {
  font-size: 48px !important;
  font-weight: 800 !important;
}

.service-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  transition: var(--transition-smooth) !important;
}

.service-card::before {
  display: none; /* remove orange cover hover style */
}

.service-card .service-title {
  color: #0f172a !important;
  font-size: 16px !important;
}

.service-card .service-text {
  color: #64748b !important;
}

.service-card .status {
  background: rgba(255, 107, 0, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
  border-radius: 8px !important;
  margin-top: 0 !important;
}

.service-card:hover {
  background: #0f172a !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.15) !important;
}

.service-card:hover .service-title {
  color: #ffffff !important;
}

.service-card:hover .service-text {
  color: #94a3b8 !important;
}

.service-card:hover .icon-box-t {
  background: var(--primary-gradient) !important;
  color: #fff !important;
}

/* Our Benefits checklist indicators */
.icon-box-b {
  background: var(--primary-gradient) !important;
  color: white !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3) !important;
}

.icon-box-b svg {
  width: 16px !important;
  height: 16px !important;
}

/* Work Strategy card styles */
.ws {
  background-color: #08080a !important;
  padding: 100px 0 !important;
}

.ws-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  padding: 40px 30px !important;
  backdrop-filter: blur(10px) !important;
  transition: var(--transition-smooth) !important;
}

.ws-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 107, 0, 0.4) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(255, 107, 0, 0.12) !important;
}

.ws-card .ws-num {
  font-size: 56px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.03) !important;
  background: linear-gradient(180deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.ws-card .ws-icon {
  background: rgba(255, 107, 0, 0.08) !important;
  color: var(--primary) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  margin-bottom: 24px !important;
  transition: var(--transition-smooth) !important;
}

.ws-card:hover .ws-icon {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  transform: scale(1.05);
}

.ws-card .ws-title {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

.ws-card .ws-desc-card {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px !important;
}

/* Modern Team Cards */
.team {
  background-color: #f8fafc !important;
  padding: 100px 0 !important;
}

.team-card {
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.03) !important;
  background: #ffffff !important;
  transition: var(--transition-smooth) !important;
}

.team-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}

.card-img-wrap img {
  filter: grayscale(0.2) contrast(1.05) !important;
  transition: var(--transition-smooth) !important;
}

.team-card:hover .card-img-wrap img {
  filter: grayscale(0) scale(1.05) !important;
}

.team-card .exp-badge {
  background: rgba(255, 107, 0, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
  font-weight: 700 !important;
}

.team-card .connect-btn {
  color: var(--primary) !important;
  font-weight: 700 !important;
  transition: var(--transition-smooth);
}

.team-card .connect-btn:hover {
  color: #ff3d00 !important;
  transform: translateX(4px);
}

/* Professional Contact Form & Cards */
.contact-us {
  background-color: #0a0a0c !important;
  padding: 100px 0 !important;
}

.form-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(15px);
  border-radius: 28px !important;
  padding: 45px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
}

.form-card .form-control {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  transition: var(--transition-smooth) !important;
}

.form-card .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.form-card .form-control:focus {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.25) !important;
  outline: none !important;
}

.form-card .btn-orange {
  background: var(--primary-gradient) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 30px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.3) !important;
  transition: var(--transition-smooth) !important;
}

.form-card .btn-orange:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 25px rgba(255, 107, 0, 0.45) !important;
}

.qs-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 25px !important;
  transition: var(--transition-smooth) !important;
}

.qs-card:hover {
  border-color: rgba(255, 107, 0, 0.25) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transform: translateY(-5px);
}

/* Testimonials Carousel Feedbacks */
.testi {
  background-color: #08080a !important;
  padding: 100px 0 !important;
}

.t-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  padding: 35px !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
  transition: var(--transition-smooth) !important;
}

.t-card:hover {
  border-color: rgba(255, 107, 0, 0.3) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 25px 50px rgba(255, 107, 0, 0.1) !important;
}

.t-card .t-name {
  color: #ffffff !important;
}

.t-card .t-body {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
}

.t-card .t-stars i {
  color: var(--primary) !important;
}

.carousel-nav .nav-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  transition: var(--transition-smooth) !important;
}

.carousel-nav .nav-btn:hover {
  background: var(--primary-gradient) !important;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.4) !important;
  border-color: transparent !important;
}

.nav-dots .nav-dot.active {
  background: var(--primary) !important;
  box-shadow: 0 0 10px var(--primary) !important;
}

/* Solutions Sub-page list cards */
.bg-dark-the {
  background: #f8fafc !important;
}

.card.bg-black-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  border-radius: 20px !important;
  overflow: hidden;
  transition: var(--transition-smooth) !important;
}

.card.bg-black-card .card-title {
  color: #0f172a !important;
}

.card.bg-black-card .card-text {
  color: #64748b !important;
}

.card.bg-black-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

.btn-outline-orange {
  color: var(--primary) !important;
  border-color: rgba(255, 107, 0, 0.4) !important;
  transition: var(--transition-smooth) !important;
}

.btn-outline-orange:hover {
  background: var(--primary-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(255, 107, 0, 0.3) !important;
}

.orange-divider {
  background-color: var(--primary) !important;
}

.breadcrumb-area {
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 80px 0 !important;
}

.breadcrumb-area h2 {
  color: #ffffff !important;
}

.breadcrumb-area .breadcrumb-item a {
  color: var(--primary) !important;
}

.breadcrumb-area .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Why choose steps timeline */
.why-section {
  background: #ffffff !important;
  padding: 100px 0 !important;
}

.why-section .why-title span {
  color: var(--primary) !important;
}

.why-section .step-num {
  background: rgba(255, 107, 0, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
}

.why-section .step-title {
  color: #0f172a !important;
}

.why-section .step-desc {
  color: #64748b !important;
}

.why-section .step-connector {
  border-left: 2px dashed rgba(255, 107, 0, 0.3) !important;
}

.services-wrap {
  background: #f8fafc !important;
  padding: 100px 0 !important;
}

.svc-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  padding: 30px !important;
  transition: var(--transition-smooth) !important;
}

.svc-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(255, 107, 0, 0.1) !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
}

.svc-card .svc-num {
  color: rgba(255, 107, 0, 0.15) !important;
}

.svc-card .icon-wrap svg {
  stroke: var(--primary) !important;
}

.svc-card .svc-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/*================= SUPER PREMIUM FOOTER =================*/
.footer-premium {
    background: #020202;
    padding: 100px 0 0 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 107, 0, 0.15);
    font-family: 'Outfit', sans-serif;
}

.fp-bg-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 300px;
    background: radial-gradient(ellipse at top, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.fp-cta-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.fp-cta-box::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.3) 0%, transparent 70%);
    filter: blur(30px);
}

.fp-cta-title {
    font-family: 'Manrope', sans-serif;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.fp-cta-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    margin: 0;
}

.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ff6b00;
    color: #fff;
    padding: 15px 35px;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}

.fp-btn:hover {
    background: #e05a00;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.5);
    color: #fff;
}

.fp-btn i {
    transition: 0.3s;
}

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

.fp-main-row {
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fp-brand-logo img {
    margin-bottom: 25px;
}

.fp-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.fp-socials {
    display: flex;
    gap: 15px;
}

.fp-social-link {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.fp-social-link:hover {
    background: #ff6b00;
    border-color: #ff6b00;
    transform: translateY(-8px) rotate(8deg);
    box-shadow: 0 15px 25px rgba(255, 107, 0, 0.4);
    color: #fff;
}

.fp-widget-title {
    font-family: 'Manrope', sans-serif;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.fp-widget-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: #ff6b00;
    border-radius: 5px;
    transition: 0.4s;
}

.fp-widget-title:hover::after {
    width: 100%;
}

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

.fp-links-list li {
    margin-bottom: 15px;
}

.fp-links-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 1.05rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fp-links-list a i {
    font-size: 0.8rem;
    color: #ff6b00;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

.fp-links-list a:hover {
    color: #ff6b00;
    transform: translateX(10px);
}

.fp-links-list a:hover i {
    opacity: 1;
    transform: translateX(0);
}

.fp-contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.fp-contact-item {
    display: flex;
    gap: 15px;
}

.fp-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255, 107, 0, 0.1);
    color: #ff6b00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.fp-contact-item:hover .fp-icon {
    background: #ff6b00;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4);
}

.fp-text span {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.fp-text p {
    color: #fff;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.fp-map-wrapper {
    border-radius: 15px;
    overflow: hidden;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: 0.4s;
}

.fp-map-wrapper:hover {
    border-color: rgba(255, 107, 0, 0.4);
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.2);
    transform: translateY(-5px);
}

.fp-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(90%) hue-rotate(180deg) brightness(80%) contrast(120%);
    transition: filter 0.5s;
}

.fp-map-wrapper:hover iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(100%) contrast(150%);
}

.fp-bottom {
    padding: 30px 0;
}

.fp-copyright {
    transition: 0.3s;
}

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

.fp-main-row {
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fp-brand-logo img {
    margin-bottom: 25px;
}

.fp-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.fp-socials {
    display: flex;
    gap: 15px;
}

.fp-social-link {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.fp-social-link:hover {
    background: #ff6b00;
    border-color: #ff6b00;
    transform: translateY(-8px) rotate(8deg);
    box-shadow: 0 15px 25px rgba(255, 107, 0, 0.4);
    color: #fff;
}

.fp-widget-title {
    font-family: 'Manrope', sans-serif;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.fp-widget-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: #ff6b00;
    border-radius: 5px;
    transition: 0.4s;
}

.fp-widget-title:hover::after {
    width: 100%;
}

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

.fp-links-list li {
    margin-bottom: 15px;
}

.fp-links-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 1.05rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fp-links-list a i {
    font-size: 0.8rem;
    color: #ff6b00;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

.fp-links-list a:hover {
    color: #ff6b00;
    transform: translateX(10px);
}

.fp-links-list a:hover i {
    opacity: 1;
    transform: translateX(0);
}

.fp-contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.fp-contact-item {
    display: flex;
    gap: 15px;
}

.fp-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255, 107, 0, 0.1);
    color: #ff6b00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.fp-contact-item:hover .fp-icon {
    background: #ff6b00;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4);
}

.fp-text span {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.fp-text p {
    color: #fff;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.fp-map-wrapper {
    border-radius: 15px;
    overflow: hidden;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: 0.4s;
}

.fp-map-wrapper:hover {
    border-color: rgba(255, 107, 0, 0.4);
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.2);
    transform: translateY(-5px);
}

.fp-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(90%) hue-rotate(180deg) brightness(80%) contrast(120%);
    transition: filter 0.5s;
}

.fp-map-wrapper:hover iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(100%) contrast(150%);
}

.fp-bottom {
    padding: 30px 0;
}

.fp-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    margin: 0;
}

.fp-copyright span {
    color: #ff6b00;
    font-weight: 600;
}

.fp-bottom-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.95rem;
    transition: 0.3s;
}

.fp-bottom-links a:hover {
    color: #ff6b00;
}

/*================= SUPER PREMIUM TESTIMONIALS =================*/
.testi-premium {
    padding: 120px 0;
    background: #f8f9fa; /* Light background */
    position: relative;
    overflow: hidden;
}

/* Background Animated Elements */
.tp-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.2; /* Slightly more opaque for light mode */
    animation: tp-pulse 10s infinite alternate ease-in-out;
}

.tp-glow-1 {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, rgba(255,107,0,0.6) 0%, transparent 70%);
}

.tp-glow-2 {
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(255,234,0,0.6) 0%, rgba(255,107,0,0.6) 70%, transparent 100%);
    animation-delay: -5s;
}

@keyframes tp-pulse {
    0% { transform: scale(0.8) translate(0, 0); opacity: 0.15; }
    100% { transform: scale(1.2) translate(50px, 50px); opacity: 0.3; }
}

/* Headings */
.tp-tag {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid rgba(255, 107, 0, 0.25);
    border-radius: 100px;
    color: #ff6b00;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.tp-title {
    font-family: 'Manrope', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #000; /* Dark text for light mode */
    margin-bottom: 0;
    line-height: 1.2;
}

.tp-title span {
    background: linear-gradient(135deg, #ff6b00, #ffea00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism Cards */
.tp-card {
    background: rgba(255, 255, 255, 0.95); /* More solid white for better contrast */
    border: none;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* Smoother shadow */
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: default; /* Ensure cursor is visible */
    z-index: 1;
    border-bottom: 4px solid transparent;
}

.tp-card::before {
    content: '\201D'; /* Large quote watermark */
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 150px;
    color: rgba(255, 107, 0, 0.05);
    font-family: serif;
    line-height: 1;
    z-index: -1;
    transition: 0.5s;
}

.tp-card:hover {
    transform: translateY(-15px);
    background: #ffffff;
    box-shadow: 0 30px 60px rgba(255, 107, 0, 0.15);
    border-bottom: 4px solid #ff6b00;
}

.tp-card:hover::before {
    color: rgba(255, 107, 0, 0.15);
    transform: rotate(10deg) scale(1.1);
}

.tp-quote-icon {
    font-size: 2.5rem;
    color: #ff6b00;
    margin-bottom: 25px;
    transition: 0.4s;
    background: rgba(255, 107, 0, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.tp-card:hover .tp-quote-icon {
    background: #ff6b00;
    color: #ffffff;
    transform: scale(1.1) rotate(-10deg);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.2);
}

.tp-body {
    font-size: 1.25rem; /* Larger font */
    color: #222; /* Darker, clearer text */
    line-height: 1.8;
    margin-bottom: 40px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

/* User Info */
.tp-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
    padding-top: 25px;
}

.tp-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #ff6b00, #ffea00);
    position: relative;
}

.tp-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff; /* White border for light mode */
}

.tp-details h4 {
    font-family: 'Manrope', sans-serif;
    color: #000; /* Dark text */
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.tp-details span {
    color: #666; /* Gray text */
    font-size: 0.85rem;
    display: block;
    margin-bottom: 8px;
}

.tp-stars i {
    color: #ff6b00;
    font-size: 0.8rem;
    margin-right: 3px;
}

/* Navigation & Pagination */
.tp-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.tp-nav-btn {
    position: static;
    width: 50px;
    height: 50px;
    background: #fff; /* White bg */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
    border-radius: 50%;
    color: #000; /* Dark icon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transition: all 0.3s;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.tp-nav-btn:hover {
    background: #ff6b00;
    border-color: #ff6b00;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}

.tp-nav-btn::after {
    display: none !important; /* Hide default swiper arrows */
}

.tp-nav-btn i {
    font-size: 1.1rem;
}

.tp-pagination {
    position: static;
    width: auto !important;
}

.tp-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.1); /* Darker bullets for light bg */
    opacity: 1;
    margin: 0 6px;
    transition: 0.3s;
}

.tp-pagination .swiper-pagination-bullet-active {
    background: #ff6b00;
    width: 25px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

@media (max-width: 768px) {
    .tp-title { font-size: 2.5rem; }
    .tp-card { padding: 30px; }
}

/*================= SUPER PREMIUM BENEFITS =================*/
.benefits-premium {
    padding: 120px 0;
    background: #020203;
    position: relative;
    overflow: hidden;
}

.bp-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.15;
    animation: bp-float-orb 15s infinite alternate ease-in-out;
}

.bp-orb-1 {
    width: 500px;
    height: 500px;
    background: #ff6b00;
    top: -100px;
    left: -100px;
}

.bp-orb-2 {
    width: 400px;
    height: 400px;
    background: #ffea00;
    bottom: -50px;
    right: -100px;
    animation-delay: -5s;
}

@keyframes bp-float-orb {
    0% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    100% { transform: translate(50px, 80px) scale(1.2); opacity: 0.2; }
}

/* Image Wrapper */
.bp-img-wrapper {
    position: relative;
    padding: 20px;
}

.bp-img-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 107, 0, 0.4) 0%, transparent 60%);
    filter: blur(40px);
    z-index: 1;
    animation: bp-pulse 4s infinite alternate;
}

@keyframes bp-pulse {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

.bp-img-frame {
    position: relative;
    z-index: 2;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    background: #000;
}

.bp-img-frame img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: 0.5s;
    filter: contrast(1.1) brightness(0.9);
}

.bp-img-wrapper:hover .bp-img-frame img {
    transform: scale(1.05);
    filter: contrast(1.1) brightness(1);
}

/* Floating Info Box */
.bp-floating-box {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 107, 0, 0.3);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 15px 35px rgba(255, 107, 0, 0.2);
    z-index: 3;
    animation: bp-bounce 4s infinite ease-in-out;
}

@keyframes bp-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.bp-icon-pulse {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b00, #ffea00);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
}

.bp-floating-box h5 {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.bp-floating-box span {
    color: #ff6b00;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Content Area */
.bp-tag {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid rgba(255, 107, 0, 0.25);
    border-radius: 100px;
    color: #ff6b00;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

.bp-title {
    font-family: 'Manrope', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.2;
}

.bp-title span {
    background: linear-gradient(135deg, #ff6b00, #ffea00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bp-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Features Grid */
.bp-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
    grid-auto-rows: 1fr; /* keep all boxes same height */
    perspective: 900px;
}

.bp-feature-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    min-height: 92px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.bp-feature-item::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
      radial-gradient(520px 220px at 15% 20%, rgba(255,107,0,0.16), transparent 60%),
      radial-gradient(520px 220px at 85% 10%, rgba(255,180,0,0.10), transparent 62%),
      repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .45s cubic-bezier(0.16,1,0.3,1);
    pointer-events:none;
}

.bp-feature-item::after{
    content:"";
    position:absolute;
    inset:0;
    background: conic-gradient(from 0deg at 50% 50%, rgba(255,107,0,0.0), rgba(255,107,0,0.18), rgba(255,107,0,0.0));
    opacity: 0;
    filter: blur(18px);
    transition: opacity .35s ease;
    pointer-events:none;
}

.bp-feature-item:hover {
    background: linear-gradient(135deg, rgba(13,17,23,0.75), rgba(13,17,23,0.35));
    border-color: rgba(255, 107, 0, 0.38);
    transform: translateY(-7px) rotateX(6deg) rotateY(-6deg);
    box-shadow: 0 24px 55px rgba(0,0,0,0.40), 0 18px 40px rgba(255,107,0,0.12);
}

.bp-f-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 107, 0, 0.1);
    color: #ff6b00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: 0.4s;
    box-shadow: inset 0 0 0 1px rgba(255,107,0,0.20);
    transform: translateZ(22px);
}

.bp-feature-item:hover .bp-f-icon {
    background: #ff6b00;
    color: #fff;
    transform: translateZ(22px) rotate(14deg) scale(1.06);
    box-shadow: 0 18px 45px rgba(255,107,0,0.28);
}

.bp-feature-item h6 {
    color: #fff;
    font-weight: 600;
    margin: 0;
    font-size: 1.05rem;
    transform: translateZ(16px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.bp-feature-item:hover::before{ opacity: 1; transform: translateY(0); }
.bp-feature-item:hover::after{ opacity: .9; }

@media (prefers-reduced-motion: reduce) {
    .bp-feature-item,
    .bp-feature-item::before,
    .bp-feature-item::after,
    .bp-f-icon {
        transition: none !important;
    }
    .bp-feature-item:hover { transform: none !important; }
}

/* Button */
.bp-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ff6b00;
    color: #fff;
    padding: 18px 40px;
    border-radius: 100px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.4s;
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}

.bp-btn:hover {
    background: #e05a00;
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.4);
}

.bp-btn i {
    transition: 0.4s;
}

.bp-btn:hover i {
    transform: translateX(8px);
}

@media (max-width: 991px) {
    .bp-floating-box {
        right: 20px;
        bottom: 20px;
    }
    .bp-title { font-size: 2.8rem; }
    .bp-features-grid { grid-template-columns: 1fr; }
}
/* ========================================================= */
/* ==== CLEAN, SLEEK, APPLE-LIKE PROFESSIONAL DESIGN ==== */
/* ========================================================= */

html {
    scroll-behavior: smooth !important;
}
body {
    background: #ffffff !important;
    color: #333333 !important;
    font-family: 'Manrope', sans-serif !important;
}

/* ==== THE NEW WORK SECTION (Sleek & Light) ==== */
section.work, div.work {
    background: linear-gradient(135deg, #ffffff 0%, #fff5ed 100%) !important;
    position: relative !important;
    padding: 100px 0 !important;
    overflow: hidden !important;
}

/* =====================================================================
   Work Section v2 (work-pro) - cleaner, more premium layout
   (Uses more specific selector + !important to override older rules)
   ===================================================================== */
section.work.work-pro{
  padding: 96px 0 !important;
  background: radial-gradient(1200px 700px at 10% 10%, rgba(255,107,0,0.10), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(255,61,0,0.08), transparent 60%),
              linear-gradient(135deg, #ffffff 0%, #fff7f2 100%) !important;
}

/* =====================================================================
   About Benefits Pro (about.php)
   ===================================================================== */
.about-benefits-pro{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(255,107,0,0.12), transparent 60%),
    radial-gradient(900px 520px at 90% 30%, rgba(255,61,0,0.10), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fff7f2 100%);
}

/* =====================================================================
   Principles Pro (about.php) - animated, high-contrast, premium
   ===================================================================== */
.principles-pro{
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
    radial-gradient(1100px 650px at 15% 20%, rgba(255,107,0,0.10), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(255,61,0,0.08), transparent 60%),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid rgba(15,23,42,0.05);
  border-bottom: 1px solid rgba(15,23,42,0.05);
}
.principles-pro::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    conic-gradient(from 210deg, rgba(255,107,0,0.08), transparent 35%, rgba(255,61,0,0.06), transparent 70%),
    repeating-linear-gradient(90deg, rgba(15,23,42,0.03) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.03) 0 1px, transparent 1px 54px);
  filter: blur(0.2px);
  opacity: .35;
  transform: rotate(2deg);
  animation: ppBg 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ppBg{
  from{ transform: translate3d(-10px,-6px,0) rotate(2deg) scale(1); }
  to{ transform: translate3d(14px,10px,0) rotate(2deg) scale(1.02); }
}

.pp-tag{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,107,0,0.22);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 14px 40px rgba(0,0,0,0.04);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
  font-size: 12px;
  color: #ff6b00;
}
.pp-tag::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b00, #ff3d00);
  box-shadow: 0 0 0 6px rgba(255,107,0,0.12);
}
.pp-title{
  font-size: clamp(2.1rem, 3.1vw, 3.0rem);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
}
.pp-sub{
  max-width: 64ch;
  color: #475569;
  font-weight: 650;
  line-height: 1.7;
}

/* Dark-only variant for this section */
.principles-pro.principles-pro--dark{
  background:
    radial-gradient(1100px 650px at 15% 20%, rgba(255,107,0,0.20), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(255,61,0,0.16), transparent 60%),
    linear-gradient(135deg, #05070c 0%, #0b1220 55%, #05070c 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.principles-pro.principles-pro--dark::before{
  opacity: .22;
  background:
    conic-gradient(from 210deg, rgba(255,107,0,0.10), transparent 35%, rgba(255,61,0,0.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 54px);
}
.principles-pro.principles-pro--dark .pp-title{ color: #ffffff; }
.principles-pro.principles-pro--dark .pp-sub{ color: rgba(148,163,184,0.95); }
.principles-pro.principles-pro--dark .pp-tag{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,107,0,0.28);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.principles-pro.principles-pro--dark .pp-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.06) 100%);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.principles-pro.principles-pro--dark .pp-card::before{
  opacity: .35;
  background:
    radial-gradient(450px 240px at 18% 12%, rgba(255,107,0,0.22), transparent 60%),
    radial-gradient(380px 220px at 85% 82%, rgba(255,61,0,0.16), transparent 60%);
}
.principles-pro.principles-pro--dark .pp-text{
  color: rgba(255,255,255,0.96);
  text-shadow: 0 18px 40px rgba(0,0,0,0.65);
}
.principles-pro.principles-pro--dark .pp-icon{
  background: linear-gradient(135deg, rgba(255,107,0,0.38), rgba(255,61,0,0.18));
  border: 1px solid rgba(255,107,0,0.28);
  color: #ffffff;
  box-shadow: 0 30px 95px rgba(255,107,0,0.16), 0 26px 85px rgba(0,0,0,0.55);
}
.principles-pro.principles-pro--dark .pp-icon i{
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
}
.principles-pro.principles-pro--dark .pp-card:hover{
  background: radial-gradient(450px 240px at 18% 12%, rgba(255,107,0,0.16), transparent 60%),
              linear-gradient(135deg, #0d1117 0%, #0b1220 100%);
  border-color: rgba(255,107,0,0.28);
}
.principles-pro.principles-pro--dark .pp-card:hover .pp-icon{
  background: rgba(255,107,0,0.26);
  color: #ffffff;
}

/* Principles Pro - richer motion + better dark visibility */
.principles-pro .pp-card{
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}
.principles-pro .pp-card::before{
  filter: saturate(1.1);
}
.principles-pro .pp-card{
  animation: ppFloat 6.5s ease-in-out infinite;
}
.principles-pro .col:nth-child(1) .pp-card{ animation-delay: .0s; }
.principles-pro .col:nth-child(2) .pp-card{ animation-delay: .35s; }
.principles-pro .col:nth-child(3) .pp-card{ animation-delay: .7s; }
.principles-pro .col:nth-child(4) .pp-card{ animation-delay: 1.05s; }
.principles-pro .col:nth-child(5) .pp-card{ animation-delay: 1.4s; }
@keyframes ppFloat{
  0%{ transform: translateY(0) translateZ(0); }
  50%{ transform: translateY(-10px) translateZ(0); }
  100%{ transform: translateY(0) translateZ(0); }
}
.principles-pro .pp-icon{
  position: relative;
}
.principles-pro .pp-icon::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius: 30px;
  background: radial-gradient(circle at 30% 20%, rgba(255,107,0,0.30), transparent 55%),
              radial-gradient(circle at 70% 80%, rgba(255,61,0,0.18), transparent 55%);
  filter: blur(10px);
  opacity: .65;
  z-index: -1;
  animation: ppGlow 3.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ppGlow{
  from{ transform: scale(0.95); opacity: .55; }
  to{ transform: scale(1.05); opacity: .85; }
}

@media (prefers-reduced-motion: reduce){
  .principles-pro .pp-card,
  .principles-pro .pp-icon::before{ animation: none !important; }
}

/* =====================================================================
   Culture Pro (about.php) - dark premium, high readability
   ===================================================================== */
.culture-pro{
  position: relative;
  padding: 90px 0 40px;
  background: radial-gradient(1200px 700px at 10% 10%, rgba(255,107,0,0.10), transparent 60%),
              radial-gradient(900px 520px at 90% 30%, rgba(255,61,0,0.08), transparent 60%),
              linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #ffffff 100%);
}
.culture-pro__shell{
  position: relative;
  border-radius: 32px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 30px 120px rgba(15,23,42,0.10);
  overflow: hidden;
  isolation: isolate;
}
.culture-pro__bg{
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 25% 20%, rgba(255,107,0,0.28), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(255,61,0,0.18), transparent 60%);
  filter: blur(55px);
  opacity: .55;
  animation: cultureFloat 8.5s ease-in-out infinite alternate;
  pointer-events:none;
  z-index: 0;
}
.culture-pro__grid{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(15,23,42,0.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.08) 0 1px, transparent 1px 56px);
  opacity: .12;
  mask-image: radial-gradient(circle at 20% 30%, #000 0 45%, transparent 70%);
  pointer-events:none;
  z-index: 0;
}
@keyframes cultureFloat{
  from{ transform: translate3d(-10px,-8px,0) scale(0.98); }
  to{ transform: translate3d(14px,10px,0) scale(1.03); }
}

.culture-pro__tag{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,107,0,0.32);
  background: rgba(255,107,0,0.08);
  color: #ff6b00;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  z-index: 1;
}
.culture-pro__tag::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b00, #ff3d00);
  box-shadow: 0 0 0 6px rgba(255,107,0,0.14);
  display: inline-block;
  margin-right: 10px;
}
.culture-pro__title{
  position: relative;
  z-index: 1;
  font-size: clamp(2.2rem, 3.2vw, 3.1rem);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.08;
}
.culture-pro__line{
  width: 70px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb000, #ff6b00, #ff3d00);
  position: relative;
  z-index: 1;
  box-shadow: 0 14px 40px rgba(255,107,0,0.18);
}
.culture-pro__lead{
  position: relative;
  z-index: 1;
  color: #475569;
  font-weight: 650;
  line-height: 1.8;
  font-size: 1.05rem;
}
.culture-pro__lead strong{
  color: #0f172a;
  font-weight: 900;
}

.culture-pro__stat{
  height: 100%;
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 20px 60px rgba(15,23,42,0.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
  z-index: 1;
  overflow:hidden;
}
.culture-pro__stat::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: conic-gradient(from 180deg, rgba(255,107,0,0.72), rgba(255,61,0,0.55), rgba(255,176,0,0.70), rgba(255,107,0,0.72));
  opacity: 0;
  filter: blur(0.2px);
  pointer-events:none;
}
.culture-pro__stat::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.18) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.culture-pro__stat:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,107,0,0.30);
  box-shadow: 0 26px 80px rgba(255,107,0,0.10), 0 20px 60px rgba(15,23,42,0.10);
}
.culture-pro__stat:hover::before{ opacity: .55; animation: cpSpin 2.4s linear infinite; }
.culture-pro__stat:hover::after{
  opacity: .9;
  animation: cultureShine .95s ease forwards;
}
@keyframes cpSpin{ to{ transform: rotate(360deg); } }
@keyframes cultureShine{
  0%{ transform: translateX(-70%) skewX(-12deg); opacity: 0; }
  15%{ opacity: .9; }
  100%{ transform: translateX(130%) skewX(-12deg); opacity: 0; }
}
.culture-pro__statIco{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,107,0,0.12);
  color: #ff6b00;
  box-shadow: 0 18px 60px rgba(15,23,42,0.08);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.culture-pro__stat:hover .culture-pro__statIco{
  transform: rotate(8deg) scale(1.06);
  background: rgba(255,107,0,0.18);
  box-shadow: 0 26px 75px rgba(255,107,0,0.14);
}
.culture-pro__statK{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 900;
}
.culture-pro__statV{
  font-size: 14px;
  color: #0f172a;
  font-weight: 950;
  margin-top: 1px;
}

.culture-pro__right{ position: relative; z-index: 1; }
.culture-pro__para{
  color: #475569;
  font-weight: 650;
  line-height: 1.85;
}
.culture-pro__panel{
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 24px 75px rgba(15,23,42,0.10);
  position: relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.culture-pro__panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 24px;
  background: conic-gradient(from 180deg, rgba(255,107,0,0.62), rgba(255,61,0,0.46), rgba(255,176,0,0.58), rgba(255,107,0,0.62));
  opacity: 0;
  pointer-events:none;
}
.culture-pro__panel::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(550px 260px at 15% 10%, rgba(255,107,0,0.18), transparent 62%);
  opacity: .55;
  pointer-events:none;
}
.culture-pro__panel:hover{
  transform: translateY(-4px);
  border-color: rgba(255,107,0,0.22);
  box-shadow: 0 34px 90px rgba(255,107,0,0.08), 0 24px 75px rgba(15,23,42,0.10);
}
.culture-pro__panel:hover::before{
  opacity: .55;
  animation: cpSpin 2.8s linear infinite;
}
.culture-pro__panel:hover::after{
  opacity: .75;
}
.culture-pro__panel--alt::after{
  background: radial-gradient(550px 260px at 85% 10%, rgba(255,61,0,0.16), transparent 62%);
}
.culture-pro__panelTop{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.culture-pro__panelTitle{
  color:#0f172a;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.culture-pro__pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,176,0,0.35);
  background: rgba(255,107,0,0.12);
  color: #ffb000;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
}
.culture-pro__pill--soft{
  border-color: rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  color: #334155;
}
.culture-pro__list{
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.culture-pro__list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: #475569;
  font-weight: 650;
}
.culture-pro__list i{
  color: #ffb000;
  margin-top: 2px;
}
.culture-pro__list span{ line-height: 1.45; }

.culture-pro__steps{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.culture-pro__step{
  padding: 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.86);
  text-align:center;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
}
.culture-pro__step::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.55) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.culture-pro__stepN{
  display:block;
  font-weight: 950;
  color: #ffb000;
  letter-spacing: .12em;
}
.culture-pro__step span:last-child{
  display:block;
  margin-top: 2px;
  color: #0f172a;
  font-weight: 850;
}
.culture-pro__step:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255,107,0,0.28);
  background: radial-gradient(420px 200px at 15% 10%, rgba(255,107,0,0.10), transparent 62%),
              linear-gradient(135deg, #0d1117 0%, #0b1220 100%);
}
.culture-pro__step:hover::after{
  opacity: .85;
  animation: cultureShine .95s ease forwards;
}
.culture-pro__step:hover .culture-pro__stepN{ color: #ffb000; }
.culture-pro__step:hover span:last-child{ color: #ffffff; text-shadow: 0 16px 34px rgba(0,0,0,0.35); }

/* Subtle idle motion so section feels alive */
.culture-pro__stat:nth-child(1){ animation: cpFloatA 5.6s ease-in-out infinite alternate; }
.culture-pro__stat:nth-child(2){ animation: cpFloatB 6.2s ease-in-out infinite alternate; }
.culture-pro__stat:nth-child(3){ animation: cpFloatA 6.8s ease-in-out infinite alternate; }
.culture-pro__stat:nth-child(4){ animation: cpFloatB 5.9s ease-in-out infinite alternate; }
@keyframes cpFloatA{ from{ transform: translateY(0); } to{ transform: translateY(-3px); } }
@keyframes cpFloatB{ from{ transform: translateY(0); } to{ transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce){
  .culture-pro__stat:nth-child(1),
  .culture-pro__stat:nth-child(2),
  .culture-pro__stat:nth-child(3),
  .culture-pro__stat:nth-child(4){ animation: none !important; }
}

@media (max-width: 991px){
  .culture-pro{ padding: 70px 0 20px; }
  .culture-pro__steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .culture-pro__bg{ animation: none !important; }
  .culture-pro__stat:hover::after{ animation: none !important; }
}

.pp-card{
  height: 100%;
  border-radius: 22px;
  padding: 26px 18px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 18px 55px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  cursor: default;
  text-align: center;
}
.pp-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(450px 240px at 18% 12%, rgba(255,107,0,0.14), transparent 60%),
    radial-gradient(380px 220px at 85% 82%, rgba(255,61,0,0.10), transparent 60%);
  opacity: .55;
  pointer-events:none;
  transition: opacity .28s ease;
}
.pp-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.55) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.pp-icon{
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 16px auto;
  background: rgba(255,107,0,0.10);
  color: #ff6b00;
  font-size: 26px;
  box-shadow: 0 18px 55px rgba(255,107,0,0.10);
  transition: transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
  position: relative;
  z-index: 2;
}
.pp-icon::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 28px;
  border: 1px dashed rgba(255,107,0,0.35);
  opacity: .0;
  transform: scale(0.96);
}
.pp-text{
  position: relative;
  z-index: 2;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.pp-card:hover{
  transform: translateY(-6px) rotateX(6deg) rotateY(-6deg);
  border-color: rgba(255,107,0,0.22);
  box-shadow: 0 30px 80px rgba(255,107,0,0.08), 0 18px 55px rgba(0,0,0,0.06);
  background: radial-gradient(450px 240px at 18% 12%, rgba(255,107,0,0.10), transparent 60%),
              linear-gradient(135deg, #0d1117 0%, #0b1220 100%);
}
.pp-card:hover::before{ opacity: .9; }
.pp-card:hover::after{
  opacity: .65;
  animation: ppShine .95s ease forwards;
}
@keyframes ppShine{
  0%{ transform: translateX(-70%) skewX(-12deg); opacity: 0; }
  15%{ opacity: .65; }
  100%{ transform: translateX(130%) skewX(-12deg); opacity: 0; }
}
.pp-card:hover .pp-icon{
  background: rgba(255,107,0,0.22);
  color: #ffffff;
  transform: translateZ(18px) rotate(8deg) scale(1.05);
  box-shadow: 0 26px 75px rgba(0,0,0,0.25);
}
.pp-card:hover .pp-icon::after{
  opacity: .85;
  animation: ppRing 2.4s linear infinite;
}
@keyframes ppRing{ to{ transform: rotate(360deg); } }
.pp-card:hover .pp-text{
  color: #ffffff;
  text-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

@media (prefers-reduced-motion: reduce){
  .principles-pro::before,
  .pp-card::after,
  .pp-card:hover .pp-icon::after{ animation: none !important; }
}
.about-benefits-pro::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(90deg, rgba(15,23,42,0.03) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.03) 0 1px, transparent 1px 48px);
  opacity:.25;
  transform: rotate(2deg);
  pointer-events:none;
}

.abp-media{
  position: relative;
  border-radius: 28px;
  padding: 18px;
}
.abp-glow{
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 30% 20%, rgba(255,107,0,0.22), transparent 60%),
              radial-gradient(circle at 80% 60%, rgba(255,61,0,0.12), transparent 55%);
  filter: blur(40px);
  animation: abpFloat 6.5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes abpFloat{
  from{ transform: translate3d(-8px, -6px, 0) scale(0.98); }
  to{ transform: translate3d(10px, 8px, 0) scale(1.02); }
}

.abp-frame{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 28px 80px rgba(0,0,0,0.10);
}
.abp-frame::before{
  content:"";
  position:absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(255,107,0,0.28), rgba(255,255,255,0.0), rgba(255,61,0,0.22));
  opacity: .55;
  pointer-events:none;
}
.abp-img{
  width: 100%;
  height: auto;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}
.abp-scan{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,107,0,0.20) 45%, transparent 70%);
  mix-blend-mode: overlay;
  opacity: .0;
  transform: translateY(-80%);
}
.abp-media:hover .abp-scan{
  opacity: .65;
  animation: abpScan 1.8s ease-in-out infinite;
}
@keyframes abpScan{
  0%{ transform: translateY(-80%); }
  100%{ transform: translateY(80%); }
}

.abp-facts{
  position:absolute;
  right: 16px;
  bottom: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.abp-chip{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,107,0,0.18);
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 45px rgba(0,0,0,0.06);
  min-width: 96px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.abp-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.55) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.abp-chip__k{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}
.abp-chip__v{
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}

.abp-content{ position: relative; }
.abp-tag{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,107,0,0.22);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 14px 40px rgba(0,0,0,0.04);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
  font-size: 12px;
  color: #ff6b00;
}
.abp-tag::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b00, #ff3d00);
  box-shadow: 0 0 0 6px rgba(255,107,0,0.12);
}
.abp-title{
  margin-top: 16px;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #0f172a;
}
.abp-title span{
  background: linear-gradient(90deg, #ff6b00, #ff9e00, #ff3d00);
  -webkit-background-clip: text;
  color: transparent;
}
.abp-lead{
  margin-top: 14px;
  color: #475569;
  font-weight: 650;
  line-height: 1.8;
}

.abp-card{
  height: 100%;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 55px rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
}
.abp-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(450px 220px at 18% 12%, rgba(255,107,0,0.16), transparent 60%),
    radial-gradient(380px 200px at 85% 80%, rgba(255,61,0,0.12), transparent 60%);
  opacity: .55;
  pointer-events:none;
  transition: opacity .25s ease;
}
.abp-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.50) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-60%) skewX(-12deg);
  pointer-events:none;
}
.abp-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,107,0,0.22);
  box-shadow: 0 28px 75px rgba(255,107,0,0.06), 0 18px 55px rgba(0,0,0,0.05);
  background: radial-gradient(450px 220px at 15% 10%, rgba(255,107,0,0.12), transparent 62%),
              linear-gradient(135deg, #0d1117 0%, #0b1220 100%);
}
.abp-card:hover::before{ opacity: .9; }
.abp-card:hover::after{
  opacity: .65;
  animation: abpShine 0.9s ease forwards;
}
@keyframes abpShine{
  0%{ transform: translateX(-70%) skewX(-12deg); opacity: 0; }
  15%{ opacity: .65; }
  100%{ transform: translateX(130%) skewX(-12deg); opacity: 0; }
}
.abp-ico{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,107,0,0.10);
  color: #ff6b00;
  flex: 0 0 auto;
  transition: all .25s ease;
  will-change: transform;
}
.abp-card:hover .abp-ico{
  background: rgba(255,107,0,0.22);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  transform: translateZ(18px) scale(1.06) rotate(6deg);
}
.abp-card__t{
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
}
.abp-card__d{
  margin-top: 4px;
  font-weight: 700;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.abp-card:hover .abp-card__t{ color:#fff; text-shadow: 0 16px 34px rgba(0,0,0,0.35); }
.abp-card:hover .abp-card__d{ color: rgba(148,163,184,0.95); }

.abp-card > div:last-child{
  transform: translateZ(0);
  transition: transform .25s ease;
}
.abp-card:hover > div:last-child{
  transform: translateZ(14px);
}

/* Chips: subtle premium hover */
.abp-chip{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.abp-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(255,107,0,0.26);
  box-shadow: 0 22px 55px rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #0d1117 0%, #0b1220 100%);
}
.abp-chip:hover .abp-chip__k{ color: rgba(148,163,184,0.95); }
.abp-chip:hover .abp-chip__v{ color: #ffffff; }
.abp-chip:hover::after{
  opacity: .75;
  animation: abpShine 0.9s ease forwards;
}

@media (prefers-reduced-motion: reduce){
  .abp-card::after{ animation:none !important; }
}

.abp-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb000, #ff6b00);
  color:#0d1117;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration:none;
  box-shadow: 0 22px 60px rgba(255,107,0,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.abp-btn-primary:hover{
  color: #0d1117;
  background: linear-gradient(90deg, #ffd166, #ff6b00);
}
.abp-btn-primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.55) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.abp-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 70px rgba(255,107,0,0.24);
}
.abp-btn-primary:hover::after{
  opacity: .85;
  animation: abpShine 0.9s ease forwards;
}
.abp-btn-primary:active{ transform: translateY(0); }
.abp-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.08);
  color:#0f172a;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration:none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.abp-btn-ghost::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 180px at 20% 0%, rgba(255,107,0,0.10), transparent 60%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.abp-btn-ghost::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.55) 48%, transparent 52%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.abp-btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,107,0,0.24);
  box-shadow: 0 18px 55px rgba(0,0,0,0.06);
  background: linear-gradient(90deg, rgba(255,107,0,0.10), rgba(255,61,0,0.06));
  color: #0f172a;
}
.abp-btn-ghost:hover::before{ opacity: 1; }
.abp-btn-ghost:hover::after{
  opacity: .75;
  animation: abpShine 0.9s ease forwards;
}
.abp-btn-ghost:active{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .abp-glow, .abp-media:hover .abp-scan{ animation:none !important; }
}
section.work.work-pro::before{
  opacity: 0.55 !important;
  filter: blur(70px) !important;
}

.work-pro__tag{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,107,0,0.22);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 14px 40px rgba(0,0,0,0.04);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  font-size: 12px;
  color: #ff6b00;
}
.work-pro__tag::before{
  content:\"\";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b00, #ff3d00);
  box-shadow: 0 0 0 6px rgba(255,107,0,0.12);
}

.work-pro__title{
  margin-top: 18px;
  font-size: clamp(2.2rem, 3.4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: #0f172a;
}
.work-pro__title span{
  display: inline-block;
  background: linear-gradient(90deg, #ff6b00, #ff9e00, #ff3d00);
  -webkit-background-clip: text;
  color: transparent;
}

.work-pro__stat{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 18px 45px rgba(0,0,0,0.04);
  padding: 16px 16px;
  transition: transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s cubic-bezier(.23,1,.32,1), border-color .28s ease, background .28s ease;
  cursor: pointer;
  transform: translateZ(0);
}
.work-pro__stat::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 260px at 18% 12%, rgba(255,107,0,0.18), transparent 60%),
    radial-gradient(380px 240px at 88% 86%, rgba(255,61,0,0.10), transparent 60%);
  opacity: .0;
  transition: opacity .28s ease;
  pointer-events:none;
}
.work-pro__stat::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,0.70) 50%, transparent 56%);
  opacity: 0;
  transform: translateX(-70%) skewX(-12deg);
  pointer-events:none;
}
.work-pro__stat:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255,107,0,0.26);
  background: radial-gradient(420px 260px at 18% 12%, rgba(255,107,0,0.10), transparent 60%),
              linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(255,247,242,0.92) 100%);
  box-shadow: 0 34px 85px rgba(255,107,0,0.12), 0 18px 40px rgba(0,0,0,0.06);
}
.work-pro__stat:hover::before{ opacity: .95; }
.work-pro__stat:hover::after{
  opacity: .6;
  animation: workStatShine .95s ease forwards;
}
@keyframes workStatShine{
  0%{ transform: translateX(-70%) skewX(-12deg); opacity: 0; }
  15%{ opacity: .6; }
  100%{ transform: translateX(130%) skewX(-12deg); opacity: 0; }
}
.work-pro__statTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.work-pro__statTop i{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,107,0,0.10);
  color: #ff6b00;
  transition: transform .28s cubic-bezier(.23,1,.32,1), background .28s ease, color .28s ease, box-shadow .28s ease;
}
.work-pro__stat:hover .work-pro__statTop i{
  background: linear-gradient(135deg, #ff6b00, #ff3d00);
  color: #ffffff;
  transform: rotate(10deg) scale(1.06);
  box-shadow: 0 16px 40px rgba(255,107,0,0.25);
}
.work-pro__statNum{
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  transition: color .28s ease, transform .28s cubic-bezier(.23,1,.32,1);
}
.work-pro__stat:hover .work-pro__statNum{
  color: #ff6b00;
  transform: translateY(-1px);
}
.work-pro__statLabel{
  margin-top: 6px;
  color: #64748b;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color .28s ease;
}
.work-pro__stat:hover .work-pro__statLabel{ color: #0f172a; }

@media (prefers-reduced-motion: reduce){
  .work-pro__stat::after{ animation: none !important; }
}

.work-pro__quote{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 24px 65px rgba(0,0,0,0.05);
  padding: 18px 18px 18px 18px;
  overflow: hidden;
}
.work-pro__quote::before{
  content:\"\";
  position:absolute;
  inset:-2px;
  background: radial-gradient(400px 200px at 10% 20%, rgba(255,107,0,0.10), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.work-pro__quoteMark{
  position:absolute;
  top: -6px;
  left: 14px;
  font-size: 64px;
  line-height: 1;
  color: rgba(255,107,0,0.16);
  font-family: serif;
  z-index: 1;
}
.work-pro__quoteText{
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
  font-weight: 600;
}
.work-pro__quoteBy{
  position: relative;
  z-index: 2;
  color: #ff6b00;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}

.work-pro__lead{
  color: #475569;
  font-weight: 600;
  line-height: 1.7;
}

.work-pro-card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px;
  min-height: 108px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 50px rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.work-pro-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,107,0,0.22);
  box-shadow: 0 26px 65px rgba(255,107,0,0.06), 0 18px 50px rgba(0,0,0,0.05);
  background: radial-gradient(450px 220px at 15% 10%, rgba(255,107,0,0.14), transparent 62%),
              linear-gradient(135deg, #0d1117 0%, #0b1220 100%);
}
.work-pro-card__left{
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 1 1 auto;
}
.work-pro-card__icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: rgba(255,107,0,0.10);
  color: #ff6b00;
  flex: 0 0 auto;
}
.work-pro-card__txt{ min-width:0; }
.work-pro-card__title{
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(1.15em * 2);
  overflow-wrap: anywhere;
}
.work-pro-card__meta{
  margin-top: 4px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.work-pro-card__badge{
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,107,0,0.32);
  color: #ff6b00;
  background: rgba(255,107,0,0.06);
}

/* Hover color swap (all cards same by default) */
.work-pro-card:hover .work-pro-card__title{ color:#fff; text-shadow: 0 16px 34px rgba(0,0,0,0.35); }
.work-pro-card:hover .work-pro-card__meta{ color: rgba(148,163,184,0.95); }
.work-pro-card:hover .work-pro-card__icon{
  background: rgba(255,107,0,0.22);
  color:#fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}
.work-pro-card:hover .work-pro-card__badge{
  color:#0d1117;
  border-color: rgba(255,176,0,0.55);
  background: linear-gradient(90deg, #ffb000, #ff6b00);
}

/* WS cards: force readability in light theme (home) */
.ws.ws-bottom .ws-cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 2 rows (3x2) for 6 cards */
  gap: 18px !important;
  padding: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
@media (max-width: 992px){
  .ws.ws-bottom .ws-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px){
  .ws.ws-bottom .ws-cards{ grid-template-columns: 1fr !important; }
}

.ws.ws-bottom .ws-card{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(2,6,23,0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 60px rgba(2,6,23,0.10) !important;
  --ws-accent: #ff6b00;
}
.ws.ws-bottom .ws-card > *{ position: relative; z-index: 2; }
.ws.ws-bottom .ws-card{
  padding: 22px 20px 18px !important;
  cursor: default;
}
.ws.ws-bottom .ws-card .ws-arrow{ opacity: 0.9; }
.ws.ws-bottom .ws-card:nth-child(2){ --ws-accent:#ff8c1a; }
.ws.ws-bottom .ws-card:nth-child(3){ --ws-accent:#f59e0b; }
.ws.ws-bottom .ws-card:nth-child(4){ --ws-accent:#fb7185; }
.ws.ws-bottom .ws-card:nth-child(5){ --ws-accent:#22c55e; }
.ws.ws-bottom .ws-card:nth-child(6){ --ws-accent:#60a5fa; }

.ws.ws-bottom .ws-card{
  transition: transform .45s cubic-bezier(0.16,1,0.3,1), box-shadow .45s cubic-bezier(0.16,1,0.3,1), border-color .35s ease, background .35s ease !important;
}
.ws.ws-bottom .ws-card::after{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    conic-gradient(from 210deg at 50% 40%, transparent 0 35%, rgba(255,255,255,0.22) 42%, transparent 48% 100%),
    linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  opacity: 0;
  transform: translate3d(-8%,0,0) rotate(-8deg);
  transition: opacity .25s ease;
  pointer-events:none;
  z-index: 1;
}
.ws.ws-bottom .ws-card .ws-title{
  color: #0f172a !important;
  text-shadow: none !important;
  transition: color .25s ease, transform .45s cubic-bezier(0.16,1,0.3,1);
}
.ws.ws-bottom .ws-card .ws-desc-card{
  color: #475569 !important;
  transition: color .25s ease, transform .45s cubic-bezier(0.16,1,0.3,1);
}
.ws.ws-bottom .ws-card .ws-icon{
  background: rgba(255,107,0,0.10) !important;
  color: var(--ws-accent) !important;
  border-color: color-mix(in srgb, var(--ws-accent) 28%, transparent) !important;
  box-shadow: 0 14px 40px rgba(2,6,23,0.10) !important;
  transition: transform .45s cubic-bezier(0.16,1,0.3,1), box-shadow .45s cubic-bezier(0.16,1,0.3,1), background .35s ease, color .25s ease !important;
}
.ws.ws-bottom .ws-card .ws-num{
  background: linear-gradient(180deg, color-mix(in srgb, var(--ws-accent) 16%, transparent) 0%, rgba(0,0,0,0) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

/* Ambient motion layer (subtle, always moving) */
.ws.ws-bottom .ws-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(520px 260px at 18% 18%, color-mix(in srgb, var(--ws-accent) 14%, transparent), transparent 62%),
    radial-gradient(520px 260px at 86% 12%, rgba(99,102,241,0.10), transparent 62%),
    repeating-linear-gradient(180deg, rgba(2,6,23,0.035) 0 1px, transparent 1px 7px);
  opacity: .55;
  transform: translate3d(0,0,0) rotate(-1deg);
  animation: wsAmbientDrift 10s ease-in-out infinite alternate;
  transition: opacity .35s ease;
  z-index: 1;
  pointer-events:none;
}
@keyframes wsAmbientDrift{
  0%   { transform: translate3d(-1.8%, -1.2%, 0) rotate(-1deg); }
  100% { transform: translate3d(1.6%,  1.2%, 0) rotate(1deg); }
}
.ws.ws-bottom .ws-card:hover{
  --ws-accent: #ff6b00; /* on hover: unified black + orange theme */
  transform: translateY(-10px) scale(1.03) !important;
  background:
    radial-gradient(700px 360px at 18% 22%, rgba(255,107,0,0.20), transparent 62%),
    linear-gradient(135deg, #0b1220 0%, #0d1117 55%, #070a10 100%) !important;
  border-color: color-mix(in srgb, var(--ws-accent) 32%, rgba(2,6,23,0.10)) !important;
  box-shadow: 0 36px 100px rgba(2,6,23,0.45), 0 30px 90px color-mix(in srgb, var(--ws-accent) 18%, transparent) !important;
}
.ws.ws-bottom .ws-card:hover .ws-title{
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 18px 45px rgba(0,0,0,0.55);
}
.ws.ws-bottom .ws-card:hover .ws-desc-card{ color: rgba(226,232,240,0.88) !important; }
.ws.ws-bottom .ws-card:hover .ws-icon{
  background: linear-gradient(135deg, var(--ws-accent), color-mix(in srgb, var(--ws-accent) 45%, #ffffff)) !important;
  color: #0b1220 !important;
  transform: translateY(-4px) rotate(10deg) scale(1.10) !important;
  box-shadow: 0 22px 60px color-mix(in srgb, var(--ws-accent) 22%, transparent), 0 18px 55px rgba(2,6,23,0.18) !important;
}
.ws.ws-bottom .ws-card:hover .ws-title{ transform: translateY(-1px); }
.ws.ws-bottom .ws-card:hover .ws-desc-card{ transform: translateY(-1px); }
.ws.ws-bottom .ws-card:hover::after{
  opacity: .35;
  animation: wsSheen 1.6s ease-in-out infinite;
}

@keyframes wsSheen{
  0%   { transform: translate3d(-10%,0,0) rotate(-8deg); }
  50%  { transform: translate3d(10%,0,0) rotate(8deg); }
  100% { transform: translate3d(-10%,0,0) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce){
  .ws.ws-bottom .ws-card,
  .ws.ws-bottom .ws-card::before{
    transition: none !important;
    animation: none !important;
  }
  .ws.ws-bottom .ws-card::after{
    animation: none !important;
  }
  .ws.ws-bottom .ws-card:hover{
    transform: none !important;
  }
}

/* Elegant background abstract shapes */
section.work::before {
    content: '' !important;
    position: absolute !important;
    top: -10% !important; left: -10% !important;
    width: 50% !important; height: 70% !important;
    background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%) !important;
    filter: blur(60px) !important;
    animation: slowFloat 15s ease-in-out infinite alternate !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

@keyframes slowFloat {
    100% { transform: translate(100px, 50px) scale(1.1); }
}

/* Text and Titles */
.work-heading {
    position: relative !important;
    z-index: 2 !important;
}
.work-heading .work-h {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    letter-spacing: -1px !important;
    margin-bottom: 30px !important;
}
.work-heading .work-color {
    background: linear-gradient(90deg, #ff6b00, #ff8c00) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
}

/* Stats (120+, 98%, 5*) - Clean Glassmorphism */
.work-heading .d-flex {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 107, 0, 0.1) !important;
    border-radius: 24px !important;
    padding: 35px 20px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.04) !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    justify-content: space-around !important;
}
.work-heading .d-flex:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 45px rgba(255,107,0,0.08) !important;
    border-color: rgba(255,107,0,0.3) !important;
}
.work-color.cou {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    color: #ff6b00 !important;
    display: block !important;
    margin-bottom: 5px !important;
    transition: transform 0.4s !important;
}
.work-heading .d-flex:hover .cou {
    transform: scale(1.05) !important;
}
.work-p {
    color: #666666 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Quote Box */
.work-style-design {
    position: relative !important;
    background: #ffffff !important;
    padding: 35px 40px !important;
    border-radius: 20px !important;
    margin-top: 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    transition: all 0.4s ease !important;
}
.work-style-design::before {
    content: '\"' !important;
    position: absolute !important;
    top: -10px !important; left: 20px !important;
    font-size: 80px !important;
    color: rgba(255,107,0,0.1) !important;
    font-family: serif !important;
    line-height: 1 !important;
}
.work-style-design:hover {
    transform: translateX(10px) !important;
    box-shadow: 10px 20px 40px rgba(255,107,0,0.08) !important;
}
.work-style-design h4 {
    color: #333333 !important;
    font-size: 1.3rem !important;
    font-style: italic !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 2 !important;
}
.work-span {
    color: #ff6b00 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-top: 15px !important;
}

/* Sleek Service Cards (Right Side) */
.service-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
    border-radius: 20px !important;
    padding: 25px 20px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 1 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02) !important;
}
.service-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 0; width: 0%; height: 3px !important;
    background: linear-gradient(90deg, #ff6b00, #ff8c00) !important;
    transition: width 0.5s ease !important;
}
.service-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(255,107,0,0.08) !important;
    border-color: rgba(255,107,0,0.2) !important;
}
.service-card:hover::after {
    width: 100% !important;
}

.service-card .icon-box-t {
    width: 55px !important;
    height: 55px !important;
    background: #fff8f3 !important;
    border-radius: 14px !important;
    font-size: 22px !important;
    color: #ff6b00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.service-card:hover .icon-box-t {
    background: #ff6b00 !important;
    color: #fff !important;
    transform: rotate(15deg) scale(1.1) !important;
    box-shadow: 0 10px 20px rgba(255,107,0,0.2) !important;
}
.service-title {
    color: #111111 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    transition: color 0.3s !important;
}
.service-card:hover .service-title {
    color: #ff6b00 !important;
}
.service-text {
    color: #888888 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}
.status {
    background: #fff8f3 !important;
    color: #ff6b00 !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    border: none !important;
}
.service-card:hover .status {
    background: #ff6b00 !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(255,107,0,0.3) !important;
}

/* ==== SWIPER SLIDER (Elegant Presentation) ==== */
.swiper-slide {
    padding: 20px 0 !important;
}
.card-box {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    height: 400px !important;
    background: #fff !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06) !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.card-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.card-box .overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%) !important;
    transition: all 0.6s ease !important;
}
.card-box .content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 40px 30px !important;
    z-index: 2 !important;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.card-box h3 {
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    transition: all 0.4s ease !important;
}
.card-box p {
    color: #ff6b00 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: all 0.5s ease 0.1s !important;
}

/* Hover Effects for Swiper Cards */
.card-box:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 30px 60px rgba(255,107,0,0.15) !important;
}
.card-box:hover img {
    transform: scale(1.1) !important;
}
.card-box:hover .overlay {
    background: linear-gradient(to top, rgba(255,107,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%) !important;
}
.card-box:hover .content {
    transform: translateY(-10px) !important;
}
.card-box:hover p {
    opacity: 1 !important;
    transform: translateY(0) !important;
    color: #ffffff !important;
}

/* Ensure card text stays clear/visible (hover or not) */
.card-box .overlay { z-index: 1 !important; }
.card-box .content { z-index: 2 !important; }
.card-box .content,
.card-box h3,
.card-box p{
  text-shadow: 0 10px 24px rgba(0,0,0,0.55);
}
/* Keep subtitle readable even before hover */
.card-box p{
  opacity: 1 !important;
  transform: none !important;
}
.card-box:hover h3,
.card-box:hover p{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

/* Generic: keep text readable on common cards during hover transforms */
.service-card, .work-pro-card, .neo-card, .feat-card-premium, .stat-card-premium{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.service-card:hover .service-title,
.service-card:hover .service-text,
.work-pro-card:hover .work-pro-card__title,
.work-pro-card:hover .work-pro-card__meta{
  text-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* Swiper navigation buttons */
.swiper-button-next, .swiper-button-prev {
    color: #ff6b00 !important;
    background: #ffffff !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: 900 !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: #ff6b00 !important;
    color: #fff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 15px 30px rgba(255,107,0,0.3) !important;
}
/* ========================================================= */
/* ==== ULTIMATE PREMIUM SERVICES CARDS (LIQUID MORPH) ==== */
/* ========================================================= */

/* Section Background with Fluid Blobs */
.services {
    position: relative !important;
    background: #fcfcfd !important;
    padding: 120px 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.services::before, .services::after {
    content: '' !important;
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(90px) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.services::before {
    width: 700px !important;
    height: 700px !important;
    background: rgba(255, 107, 0, 0.05) !important;
    top: -250px !important;
    left: -250px !important;
    animation: blobAnim1 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.services::after {
    width: 600px !important;
    height: 600px !important;
    background: rgba(255, 179, 71, 0.04) !important;
    bottom: -200px !important;
    right: -200px !important;
    animation: blobAnim2 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes blobAnim1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(200px, 150px) scale(1.1); }
    100% { transform: translate(100px, 300px) scale(0.9); }
}

@keyframes blobAnim2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-200px, -150px) scale(1.2); }
    100% { transform: translate(-300px, 100px) scale(0.8); }
}

/* Tags and Typography */
.section-tag {
    background: #fff8f3 !important;
    color: #ff6b00 !important;
    border: 1px solid rgba(255,107,0,0.15) !important;
    padding: 10px 28px !important;
    border-radius: 40px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 20px rgba(255,107,0,0.06) !important;
    transition: transform 0.4s ease !important;
}
.section-tag:hover {
    transform: translateY(-3px) !important;
}

.services-heading {
    position: relative !important;
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    color: #111111 !important;
    line-height: 1.2 !important;
    margin-bottom: 60px !important;
    letter-spacing: -1px !important;
}

.services-heading .work-color {
    background: linear-gradient(90deg, #ff6b00, #ff8c00, #ff6b00) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    animation: liquidText 4s linear infinite !important;
}

@keyframes liquidText {
    to { background-position: 200% center; }
}

/* ==== THE CARDS (Morphing Glass to Liquid Gradient) ==== */
.all-card {
    perspective: 1500px !important;
}

.custom-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    border-radius: 28px !important;
    padding: 45px 35px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03) !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    height: 100% !important;
}

/* This ::before creates the sweeping liquid gradient background on hover */
.custom-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) !important;
    transform: scale(0.5) translateY(50%) !important;
    border-radius: 50% !important; /* Starts as a circle inside */
}

/* Hovering lifts the card and expands the background */
.custom-card:hover {
    transform: translateY(-20px) !important;
    box-shadow: 0 30px 60px rgba(255, 107, 0, 0.2) !important;
    border-color: transparent !important;
}

.custom-card:hover::before {
    opacity: 1 !important;
    transform: scale(1.5) translateY(0) !important; /* Expands to cover whole card */
    border-radius: 0 !important;
}

/* Icon Box Animation */
.custom-card .icon-box {
    width: 85px !important;
    height: 85px !important;
    background: #fff8f3 !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 36px !important;
    color: #ff6b00 !important;
    margin-bottom: 30px !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 10px 20px rgba(255,107,0,0.05) !important;
}

.custom-card:hover .icon-box {
    background: #ffffff !important;
    color: #ff6b00 !important;
    transform: scale(1.15) rotate(10deg) translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    border-radius: 50% !important; /* Shape Morphs to Circle */
}

/* Card Text Animations */
.custom-card h3 {
    color: #111111 !important;
    font-weight: 800 !important;
    font-size: 1.45rem !important;
    margin-bottom: 15px !important;
    transition: all 0.5s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

.custom-card p {
    color: #666666 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    transition: all 0.5s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Text color changes on hover to contrast with orange background */
.custom-card:hover h3 {
    color: #ffffff !important;
    transform: translateY(-5px) !important;
}

.custom-card:hover p {
    color: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-5px) !important;
}


/* --- PREMIUM LUXURY SERVICES PAGE OVERRIDES --- */
.ens3-wrap { display: block; width: 100%; min-height: auto; padding-bottom: 80px; background-color: #050508; color: #cbd5e1; }
.ens3-main { max-width: 1200px; margin: -50px auto 0; position: relative; z-index: 10; border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,0.5); overflow: hidden; background: #0f172a; border: 1px solid rgba(255,107,0,0.1); }
.ens3-hero { height: 450px; position: relative; overflow: hidden; border-radius: 20px 20px 0 0; }
.ens3-hero img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 10s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.1); } }
.ens3-hero-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(180deg, rgba(5,5,8,0.3) 0%, rgba(15,23,42,1) 100%); }
.ens3-content { padding: 60px 80px; background: #0f172a; position: relative; }
.ens3-h2 { color: #ffffff !important; font-size: 2.8rem; font-weight: 800; letter-spacing: -0.5px; }
.ens3-h2 em { color: #ff6b00; font-style: normal; position: relative; }
.ens3-h2 em::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background: rgba(255,107,0,0.2); z-index: -1; }
.ens3-desc { font-size: 1.15rem; line-height: 1.8; color: #94a3b8; margin-bottom: 25px; }
.ens3-pill { background: rgba(255,107,0,0.1) !important; color: #ff6b00 !important; border: 1px solid rgba(255,107,0,0.3) !important; padding: 8px 20px; border-radius: 50px; display: inline-flex; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; }
.ens3-rule span { background: #ff6b00 !important; }
.services-card, .ens3-net-card { background: #1e293b !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.services-card:hover, .ens3-net-card:hover { transform: translateY(-10px) !important; border-color: rgba(255,107,0,0.5) !important; box-shadow: 0 20px 40px rgba(255,107,0,0.15) !important; }
.services-card h6, .ens3-net-title { color: #ffffff !important; font-size: 1.25rem !important; font-weight: 600 !important; }
.icon-s, .ens3-net-ico { background: rgba(255,107,0,0.1) !important; color: #ff6b00 !important; border-radius: 12px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ens3-stats-row { position: absolute; bottom: 30px; left: 0; width: 100%; display: flex; justify-content: space-evenly; z-index: 10; padding: 20px 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
.ens3-stat { text-align: center; }
.ens3-stat-n { color: #ff6b00 !important; font-size: 2.5rem !important; font-weight: 800 !important; text-shadow: 0 2px 10px rgba(255,107,0,0.3); }
.ens3-stat-l { color: #cbd5e1 !important; font-size: 1rem !important; font-weight: 500 !important; letter-spacing: 1px; text-transform: uppercase; }
.ens3-footer-bar { background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%) !important; border: 1px solid rgba(255,107,0,0.2) !important; padding: 25px 40px !important; border-radius: 16px !important; margin-top: 40px !important; }
.ens3-footer-txt { color: #e2e8f0 !important; font-size: 1.1rem !important; }
.ens3-footer-txt strong { color: #ff6b00 !important; }
.ens3-learn-btn { background: #ff6b00 !important; color: #fff !important; padding: 12px 30px !important; border-radius: 50px !important; font-weight: 600 !important; letter-spacing: 1px !important; transition: all 0.3s ease !important; }
.ens3-learn-btn:hover { background: #e85d04 !important; box-shadow: 0 10px 20px rgba(255,107,0,0.3) !important; transform: translateX(5px) !important; }
.breadcrumb-area {
  background: url('../img/work.jpg') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(255,107,0,0.2);
  position: relative;
  z-index: 1;
  padding: 120px 0 80px 0 !important;
  overflow: hidden;
}

.breadcrumb-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(650px 260px at 18% 35%, rgba(255,107,0,0.22), transparent 60%),
    radial-gradient(720px 320px at 85% 30%, rgba(99,102,241,0.14), transparent 62%),
    linear-gradient(90deg, rgba(2,6,23,0.56), rgba(2,6,23,0.22));
}

.breadcrumb-area > .container {
  position: relative;
  z-index: 2;
}
.breadcrumb-area h2 { color: #ffffff !important; text-shadow: 0 16px 55px rgba(0,0,0,0.45); }
.breadcrumb-item a { color: #94a3b8 !important; }
.breadcrumb-item.active { color: #ff6b00 !important; }
.ens3-badge { position: absolute; top: 30px; left: 30px; background: rgba(15,23,42,0.8); backdrop-filter: blur(5px); border: 1px solid #ff6b00; color: #ff6b00; padding: 8px 16px; border-radius: 50px; font-weight: 600; letter-spacing: 1px; z-index: 10; display: flex; align-items: center; gap: 8px; }
@media(max-width: 768px) { .ens3-content { padding: 40px 20px; } .ens3-h2 { font-size: 2rem; } .ens3-stats-row { flex-direction: column; gap: 20px; position: static; background: #0f172a; padding: 30px 0; border: none; } }


.ens3-section { background: #050508 !important; }
body { background: #050508 !important; }



/* ============================================================
   GLOBAL RESPONSIVE FIX � Perfect on all screen sizes
============================================================ */

/* 1. Fix carousel � remove rotateY that causes clipping */
.carousel { overflow: hidden !important; perspective: none !important; }
.carousel-inner { overflow: hidden !important; }
.carousel-item img {
  height: 88vh !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  width: 100% !important;
}
.carousel-item.active img {
  transform: none !important;
  filter: none !important;
}
.carousel-caption {
  bottom: 18% !important;
  top: auto !important;
  transform: none !important;
  left: 8% !important;
  right: 8% !important;
  text-align: left !important;
}
.carousel-caption h5 {
  font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
  transform: none !important;
  line-height: 1.2 !important;
}

/* 2. Fix neo-cards � prevent overflow & fix 4-col on small screens */
.neo-services { overflow: hidden !important; }
.neo-card-wrapper { perspective: none !important; }
.neo-card {
  transform-style: flat !important;
  padding: 30px 22px !important;
}
.neo-card:hover {
  transform: translateY(-8px) !important;
}
.neo-card:hover::before { opacity: 1 !important; }
.neo-title { font-size: clamp(1.8rem, 3.5vw, 3.5rem) !important; }

/* 3. Fix about section overflow */
.about-premium { overflow: hidden !important; }
.about-img-wrapper {
  width: clamp(260px, 35vw, 420px) !important;
  height: clamp(260px, 35vw, 420px) !important;
}

/* 4. Fix body horizontal overflow */
body { overflow-x: hidden !important; max-width: 100vw !important; }
section { overflow-x: hidden !important; }
.container { max-width: 1200px !important; }

/* 5. Responsive breakpoints */
@media (max-width: 1200px) {
  .col-md-3 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 768px) {
  .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .carousel-item img { height: 60vh !important; }
  .carousel-caption { left: 5% !important; right: 5% !important; bottom: 20% !important; }
  .neo-card { padding: 24px 18px !important; }
}
@media (min-width: 1200px) {
  .col-md-3.neo-card-wrapper { flex: 0 0 25%; max-width: 25%; }
}

/* 6. Fix overflow from 3D transforms globally */
* { backface-visibility: hidden; }
.neo-card, .feat-card-premium, .stat-card-premium {
  will-change: transform;
  isolation: isolate;
}



/* ============================================================
   WORK STRATEGY (ws) ADVANCED LIGHT THEME REDESIGN & NEON GLOW
   ============================================================ */

.ws {
  background-color: #ffffff !important; /* Light background */
  position: relative;
  overflow: hidden;
  padding: 80px 0 !important;
}

.ws.ws-top {
  background-color: #ffffff !important;
  padding-bottom: 40px !important;
}

.ws.ws-bottom {
  background-color: #f8fafc !important;
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

/* Background Grid in Light Mode - Now Animated! */
.ws-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 0, 0, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .02) 1px, transparent 1px) !important;
  background-size: 55px 55px;
  z-index: 1;
  animation: gridLineMove 20s linear infinite !important;
}

@keyframes gridLineMove {
  from { background-position: 0 0; }
  to { background-position: 55px 55px; }
}

/* Background Glowing Blobs (Soft pastels with shifting colors for light mode) */
.ws-blob {
  position: absolute; 
  width: 500px; 
  height: 500px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.07) 0%, transparent 70%) !important;
  top: -100px; 
  right: -50px; 
  pointer-events: none;
  animation: floatBlob 12s ease-in-out infinite alternate !important;
  z-index: 1;
}
.ws-blob-2 {
  position: absolute; 
  width: 600px; 
  height: 600px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.05) 0%, transparent 70%) !important;
  bottom: -150px; 
  left: -100px; 
  pointer-events: none;
  animation: floatBlob2 16s ease-in-out infinite alternate !important;
  z-index: 1;
}

/* Color shifting and floating animations */
@keyframes floatBlob {
  0% { 
    transform: translate(0, 0) scale(1);
    filter: hue-rotate(0deg);
  }
  50% { 
    transform: translate(-80px, 40px) scale(1.1); 
    filter: hue-rotate(25deg);
  }
  100% { 
    transform: translate(40px, -40px) scale(0.95); 
    filter: hue-rotate(-25deg);
  }
}
@keyframes floatBlob2 {
  0% { 
    transform: translate(0, 0) scale(0.95); 
    filter: hue-rotate(0deg);
  }
  50% { 
    transform: translate(60px, -30px) scale(1.1); 
    filter: hue-rotate(-20deg);
  }
  100% { 
    transform: translate(-30px, 50px) scale(1); 
    filter: hue-rotate(30deg);
  }
}

/* Heading in Light Mode */
.ws-heading {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  font-weight: 800;
  color: #0f172a !important; /* Dark text for light mode */
  margin-bottom: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}
.ws-heading .outline {
  -webkit-text-stroke: unset !important;
  background: linear-gradient(90deg, #ff6b00, #e85d04, #ff9e59, #ff6b00);
  background-size: 200% auto;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: shineGradient 3s linear infinite !important;
  font-weight: 800 !important;
  text-shadow: 0 0 20px rgba(255, 107, 0, 0.1) !important;
}

@keyframes shineGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Description Text */
.ws-desc {
  font-size: 1.05rem !important;
  color: #475569 !important; /* Dark grey for readability */
  line-height: 1.85 !important;
  margin-bottom: 28px !important;
  text-align: justify;
}

/* Chip Styling with Wave Pulses */
.ws-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.ws-chip {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ff6b00 !important;
  background: rgba(255, 107, 0, 0.06) !important;
  border: 1px solid rgba(255, 107, 0, 0.2) !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  cursor: default;
  animation: chipPulse 4s ease-in-out infinite alternate !important;
}
.ws-chip:nth-child(1) { animation-delay: 0s !important; }
.ws-chip:nth-child(2) { animation-delay: 0.8s !important; }
.ws-chip:nth-child(3) { animation-delay: 1.6s !important; }

@keyframes chipPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.08);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
  }
}

.ws-chip:hover {
  background: rgba(255, 107, 0, 0.12) !important;
  border-color: #ff6b00 !important;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.2) !important;
  transform: translateY(-3px) scale(1.05) !important;
  animation-play-state: paused !important; /* Stop standard pulse on hover */
}

/* Image Wrap with 3D Tilt & Scanner Bar */
.ws-img-wrap {
  position: relative;
  z-index: 5;
  border-radius: 20px !important;
  overflow: visible !important; /* Allow corners to pop out slightly */
  animation: floatImg 8s ease-in-out infinite alternate !important;
  perspective: 1000px;
  transform-style: preserve-3d;
}

@keyframes floatImg {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.4deg); }
  100% { transform: translateY(5px) rotate(-0.4deg); }
}

.ws-img {
  width: 100% !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  filter: brightness(1) contrast(1) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block;
}

.ws-img-wrap:hover {
  animation: none !important;
  transform: translateY(-8px) scale(1.03) rotateX(3deg) rotateY(-3deg) !important;
}

.ws-img-wrap:hover .ws-img {
  box-shadow: 0 30px 60px rgba(255, 107, 0, 0.15), 0 0 30px rgba(255, 107, 0, 0.08) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

/* Scanning Corners - expand & contract continuously */
.ws-corner-tl, .ws-corner-br {
  border-width: 3px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  z-index: 10;
  transition: all 0.4s ease !important;
}
.ws-corner-tl {
  border-top-color: #ff6b00 !important;
  border-left-color: #ff6b00 !important;
  animation: cornerMoveTL 5s ease-in-out infinite alternate !important;
}
.ws-corner-br {
  border-bottom-color: #ff6b00 !important;
  border-right-color: #ff6b00 !important;
  animation: cornerMoveBR 5s ease-in-out infinite alternate !important;
}

@keyframes cornerMoveTL {
  0% { top: -6px; left: -6px; width: 20px; height: 20px; filter: drop-shadow(0 0 2px rgba(255, 107, 0, 0.4)); }
  50% { top: -12px; left: -12px; width: 35px; height: 35px; filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.8)); }
  100% { top: -3px; left: -3px; width: 15px; height: 15px; filter: drop-shadow(0 0 1px rgba(255, 107, 0, 0.2)); }
}
@keyframes cornerMoveBR {
  0% { bottom: -6px; right: -6px; width: 20px; height: 20px; filter: drop-shadow(0 0 2px rgba(255, 107, 0, 0.4)); }
  50% { bottom: -12px; right: -12px; width: 35px; height: 35px; filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.8)); }
  100% { bottom: -3px; right: -3px; width: 15px; height: 15px; filter: drop-shadow(0 0 1px rgba(255, 107, 0, 0.2)); }
}

.ws-img-wrap:hover .ws-corner-tl {
  top: -14px !important; left: -14px !important;
  width: 40px !important; height: 40px !important;
  filter: drop-shadow(0 0 12px rgba(255, 107, 0, 1)) !important;
  animation: none !important;
}
.ws-img-wrap:hover .ws-corner-br {
  bottom: -14px !important; right: -14px !important;
  width: 40px !important; height: 40px !important;
  filter: drop-shadow(0 0 12px rgba(255, 107, 0, 1)) !important;
  animation: none !important;
}

/* Image Scanner Line Animation */
.ws-vbar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, transparent, #ff6b00, #ffd8ad, #ff6b00, transparent) !important;
  border-radius: 10px;
  z-index: 6;
  opacity: 0.7;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.8), 0 0 25px rgba(255, 107, 0, 0.4) !important;
  animation: scanImage 4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes scanImage {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { left: calc(100% - 4px); opacity: 0; }
}

.ws-img-wrap:hover .ws-vbar {
  animation-duration: 2s !important; /* Speeds up scanner on hover */
  opacity: 1 !important;
}

/* Service Card Container in Light Mode */
.ws-cards {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important;
  border-radius: 20px !important;
  overflow: hidden;
}

/* Staggered Card Floating to make grid look alive */
.ws-card {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 0 !important;
  padding: 26px 20px 18px !important;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow;
}

.ws-card:nth-child(1) { animation: cardFloat1 5s ease-in-out infinite alternate !important; }
.ws-card:nth-child(2) { animation: cardFloat2 5.5s ease-in-out infinite alternate !important; }
.ws-card:nth-child(3) { animation: cardFloat3 6s ease-in-out infinite alternate !important; }
.ws-card:nth-child(4) { animation: cardFloat1 5.2s ease-in-out infinite alternate-reverse !important; }
.ws-card:nth-child(5) { animation: cardFloat2 5.8s ease-in-out infinite alternate-reverse !important; }
.ws-card:nth-child(6) { animation: cardFloat3 6.4s ease-in-out infinite alternate-reverse !important; }

@keyframes cardFloat1 {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}
@keyframes cardFloat2 {
  0% { transform: translateY(-3px); }
  100% { transform: translateY(2px); }
}
@keyframes cardFloat3 {
  0% { transform: translateY(2px); }
  100% { transform: translateY(-4px); }
}

.ws-card:hover {
  animation: none !important; /* Stop floating on hover */
  background: linear-gradient(135deg, #ffffff 0%, #fffbf8 100%) !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 25px 50px rgba(255, 107, 0, 0.12), inset 0 0 20px rgba(255, 107, 0, 0.02) !important;
  z-index: 5;
}

/* Card Number Animations */
.ws-card .ws-num {
  font-size: 56px !important;
  font-weight: 800 !important;
  color: rgba(0, 0, 0, 0.02) !important;
  background: linear-gradient(180deg, rgba(255, 107, 0, 0.06) 0%, rgba(0,0,0,0) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: all 0.5s ease !important;
  top: 8px !important;
  right: 12px !important;
}
.ws-card:hover .ws-num {
  transform: translateY(-5px) scale(1.15) !important;
  background: linear-gradient(180deg, rgba(255, 107, 0, 0.22) 0%, rgba(0,0,0,0) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Card Icon spin and glow */
.ws-card .ws-icon {
  background: rgba(255, 107, 0, 0.05) !important;
  color: #ff6b00 !important;
  border: 1px solid rgba(255, 107, 0, 0.12) !important;
  margin-bottom: 14px !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.ws-card:hover .ws-icon {
  background: linear-gradient(135deg, #ff6b00, #e85d04) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-3px) rotate(360deg) scale(1.1) !important;
  box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3) !important;
}

/* Title colors */
.ws-card .ws-title {
  color: #0f172a !important; /* Dark text for card titles */
  font-family: 'Manrope', sans-serif !important;
  font-size: 17px !important;
  transition: color 0.3s ease !important;
}
.ws-card:hover .ws-title {
  color: #ff6b00 !important;
}

/* Card description text */
.ws-card .ws-desc-card {
  color: #475569 !important; /* Dark grey for card desc */
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Bouncing Hover Arrow */
.ws-card .ws-arrow {
  border-color: rgba(255, 107, 0, 0.12) !important;
  color: #ff6b00 !important;
  transition: all 0.4s ease !important;
}
.ws-card:hover .ws-arrow {
  background: linear-gradient(135deg, #ff6b00, #e85d04) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.15) !important;
  animation: arrowBounce 0.8s infinite alternate !important;
}

@keyframes arrowBounce {
  0% { transform: translateX(0) scale(1.15); }
  100% { transform: translateX(5px) scale(1.15); }
}

/* Card bar border transition on hover */
.ws-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ff6b00, #e85d04) !important;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.ws-card:hover::after {
  transform: scaleX(1);
}

/* Fix grid lines and border alignment across cards on responsive */
@media (max-width: 1100px) {
  .ws-cards { grid-template-columns: repeat(3, 1fr) !important; }
  .ws-card:nth-child(3) { border-right: none !important; }
  .ws-card:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; }
}
@media (max-width: 700px) {
  .ws-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .ws-card { border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; }
  .svc-vbar { display: none !important; }
}
@media (max-width: 480px) {
  .ws-cards { grid-template-columns: 1fr !important; }
  .ws-card { border-right: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; }
  .ws-card:last-child { border-bottom: none !important; }
}


/* Final override: WS bottom grid as separated pro cards (wins over generic `.ws-card` blocks) */
.ws.ws-bottom .ws-card{
  border-right: none !important;
  border-bottom: none !important;
  animation: none !important;
}
/* ── SERVICE SUB-NAVIGATION BANNER ── */
.svc-subnav-banner {
  background: #0b0f17 !important;
  border-bottom: 1px solid rgba(255, 107, 0, 0.25) !important;
  padding: 12px 0 !important;
  position: relative;
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  margin-top: -1px;
}
.svc-subnav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 25px;
}
.svc-subnav-item {
  color: #94a3b8 !important;
  font-family: 'Manrope', sans-serif;
  font-size: 0.90rem;
  font-weight: 700;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}
.svc-subnav-item::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #ff6b00;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.svc-subnav-item:hover {
  color: #ff6b00 !important;
}
.svc-subnav-item:hover::after {
  width: 50%;
}
.svc-subnav-item.active {
  color: #ffffff !important;
  background: rgba(255, 107, 0, 0.16) !important;
  border: 1px solid rgba(255, 107, 0, 0.35) !important;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.1);
}
.svc-subnav-item.active::after {
  width: 0 !important; /* No underline when boxed active */
}

@media (max-width: 991px) {
  .svc-subnav-wrapper {
    gap: 8px 12px;
  }
  .svc-subnav-item {
    font-size: 0.80rem;
    padding: 6px 12px;
  }
}

/* ── SERVICE STATS OVERRIDES ── */
.svc-stats-section {
  background: transparent !important;
  position: relative !important;
  z-index: 25 !important;
  margin-top: 0 !important;
  padding: 35px 0 15px 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.svc-stats-section .container {
  max-width: 1450px !important;
  width: 95% !important;
}
.svc-stats {
  background: #0d1117 !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 107, 0, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  width: 100% !important;
}
.svc-stat {
  padding: 32px 15px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex: 1;
}
.svc-stat:last-child {
  border-right: none !important;
}
.svc-stat__n {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #ff6b00, #ff9e00);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}
.svc-stat__l {
  font-size: 0.85rem !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
}

@media (max-width: 768px) {
  .svc-stats-section {
    margin-top: 0 !important;
    padding: 20px 0 10px 0 !important;
  }
  .svc-stats {
    flex-wrap: wrap !important;
    border-radius: 14px !important;
  }
  .svc-stat {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex: 1 1 50% !important;
    padding: 20px 10px !important;
  }
  .svc-stat:nth-child(even) {
    border-right: none !important;
  }
  .svc-stat:nth-child(3), .svc-stat:nth-child(4) {
    border-bottom: none !important;
  }
}

/* ══════════════════════════════════════════
   PREMIUM STYLISH SERVICE PAGES UPGRADES
   ══════════════════════════════════════════ */

/* Ambient Glowing Background Blobs */
.svc-body {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.svc-body::before,
.svc-body::after {
  content: '' !important;
  position: absolute !important;
  width: 500px !important;
  height: 500px !important;
  border-radius: 50% !important;
  filter: blur(140px) !important;
  z-index: -1 !important;
  opacity: 0.12 !important;
  pointer-events: none !important;
  animation: floatGlow 14s infinite alternate ease-in-out !important;
}
.svc-body::before {
  background: #ff6b00 !important;
  top: 15% !important;
  left: -200px !important;
}
.svc-body::after {
  background: #ff3d00 !important;
  bottom: 25% !important;
  right: -200px !important;
  animation-delay: -7s !important;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 50px) scale(1.25); }
}

/* Glassmorphism Feature Cards with Neon Glow & Shiny Reflection */
.svc-feat-card {
  background: rgba(13, 17, 23, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.svc-feat-card:hover {
  transform: translateY(-12px) scale(1.02) !important;
  border-color: rgba(255, 107, 0, 0.35) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 107, 0, 0.15) !important;
}

/* Diagonal reflection sweep */
.svc-feat-card::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -60% !important;
  width: 30% !important;
  height: 200% !important;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
  transform: rotate(30deg) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: none !important;
  z-index: 5 !important;
}
.svc-feat-card:hover::after {
  opacity: 1 !important;
  left: 150% !important;
  transition: all 0.9s cubic-bezier(0.3, 1, 0.3, 1) !important;
}

/* Feature Icon Spin and Glow */
.svc-feat-icon {
  background: rgba(255, 107, 0, 0.08) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.svc-feat-card:hover .svc-feat-icon {
  background: linear-gradient(135deg, #ff6b00, #ff3d00) !important;
  color: #fff !important;
  transform: rotate(-10deg) scale(1.15) !important;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.4) !important;
}

/* Dynamic Line Animation */
.svc-line span {
  position: relative !important;
  overflow: hidden !important;
}
.svc-line span::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent) !important;
  animation: lineShine 3s infinite linear !important;
}
@keyframes lineShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Why Choose Us Dashboard Card */
.svc-why {
  background: rgba(10, 14, 24, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}
.svc-why:hover {
  border-color: rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 107, 0, 0.03) !important;
}

/* Why Choose items */
.svc-why-item {
  background: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.svc-why-item:hover {
  background: rgba(255, 107, 0, 0.05) !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
  transform: translateY(-5px) translateX(2px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Why Choose Checkmark Spin */
.svc-why-chk {
  background: rgba(255, 107, 0, 0.08) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.svc-why-item:hover .svc-why-chk {
  background: linear-gradient(135deg, #ff6b00, #ff3d00) !important;
  color: #fff !important;
  transform: scale(1.15) rotate(360deg) !important;
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.35) !important;
  border-color: transparent !important;
}

/* CTA Banner Neon Pulse */
.svc-cta {
  background: linear-gradient(135deg, rgba(13, 17, 23, 0.8) 0%, rgba(26, 10, 0, 0.8) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 107, 0, 0.25) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 107, 0, 0.04) !important;
  animation: ctaGlowPulse 4s infinite alternate ease-in-out !important;
}
@keyframes ctaGlowPulse {
  0% { box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 107, 0, 0.03); }
  100% { box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 107, 0, 0.12); }
}

/* CTA Button Pulse Radar */
.svc-cta__btn {
  position: relative !important;
  overflow: visible !important;
  transition: all 0.4s ease !important;
}
.svc-cta__btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 60px !important;
  border: 2px solid #ff6b00 !important;
  opacity: 0 !important;
  transform: scale(1) !important;
  transition: none !important;
  pointer-events: none !important;
}
.svc-cta__btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 15px 35px rgba(255, 107, 0, 0.45) !important;
}
.svc-cta__btn:hover::after {
  animation: ctaRadarPulse 1.4s infinite ease-out !important;
}
@keyframes ctaRadarPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Custom Scrollbar for stylish feel */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #020409;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 5px;
  border: 2px solid #020409;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff6b00;
}

/* ══════════════════════════════════════════
   GLOBAL LIGHT THEME & TOP ANIMATIONS OVERRIDES
   ══════════════════════════════════════════ */

/* Force Light Background globally for service pages */
html body {
  background: #f8fafc !important;
  color: #334155 !important;
}
.svc-body {
  background: #f8fafc !important;
}

/* Ambient Pastel Glowing Blobs (Light mode) */
.svc-body::before {
  background: rgba(255, 107, 0, 0.12) !important;
  filter: blur(100px) !important;
}
.svc-body::after {
  background: rgba(255, 61, 0, 0.1) !important;
  filter: blur(100px) !important;
}

/* Sizing and colors for text */
.svc-title {
  color: #0f172a !important;
}

/* Whychoose.php: dark services grid needs light text */
.premium-services-grid .svc-title{
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.premium-services-grid .premium-glass-svc{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.40) !important;
}
.premium-services-grid .premium-glass-svc:hover{
  border-color: rgba(255,107,0,0.35) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 24px 70px rgba(255,107,0,0.10) !important;
}
.premium-services-grid .svc-icon-box{
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}
.premium-services-grid .premium-glass-svc:hover .svc-icon-box{
  filter: drop-shadow(0 14px 34px rgba(255,107,0,0.30));
}

.premium-services-grid .svc-number{
  color: rgba(255,255,255,0.18) !important;
  text-shadow: 0 18px 40px rgba(0,0,0,0.45);
  letter-spacing: -0.02em;
}
.premium-services-grid .premium-glass-svc:hover .svc-number{
  color: rgba(255,107,0,0.40) !important;
}
.svc-title em {
  background: linear-gradient(90deg, #ff6b00, #ff9e00, #ff3d00, #ff6b00) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: titleShine 3s linear infinite !important;
  font-style: normal !important;
  font-weight: 800 !important;
}
@keyframes titleShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.svc-desc {
  color: #475569 !important;
}

/* Dark Premium cards on Light Background with smooth floating animation */
.svc-feat-card {
  background: #0d1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}
.svc-feat-card:hover {
  background: #070a10 !important;
  border-color: rgba(255, 107, 0, 0.4) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45), 0 0 25px rgba(255, 107, 0, 0.18) !important;
}

/* Floating animation for cards (Best in class 3D floating effect) */
.svc-feat-card:nth-child(3n+1) {
  animation: floatCardSlow 6s infinite alternate ease-in-out;
}
.svc-feat-card:nth-child(3n+2) {
  animation: floatCardMedium 5s infinite alternate ease-in-out;
}
.svc-feat-card:nth-child(3n) {
  animation: floatCardFast 7s infinite alternate ease-in-out;
}

@keyframes floatCardSlow {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
@keyframes floatCardMedium {
  0% { transform: translateY(0); }
  100% { transform: translateY(-9px); }
}
@keyframes floatCardFast {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* Ensure hover overrides floating animation cleanly */
.svc-feat-card:hover {
  animation-play-state: paused !important;
}

.svc-feat-title {
  color: #ffffff !important;
}
.svc-feat-desc {
  color: #94a3b8 !important;
}

/* Why Choose Us Dashboard in Light Mode */
.svc-why {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03) !important;
}
.svc-why .svc-title {
  color: #0f172a !important;
}
.svc-why-item {
  background: rgba(0, 0, 0, 0.01) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}
.svc-why-item:hover {
  background: rgba(255, 107, 0, 0.03) !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
}
.svc-why-text {
  color: #475569 !important;
}
.svc-why-text strong {
  color: #1e293b !important;
}

/* Light theme for CTA banner */
.svc-cta {
  background: linear-gradient(135deg, #ffffff 0%, #fff8f2 100%) !important;
  border: 1px solid rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 20px 45px rgba(255, 107, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.02) !important;
  animation: ctaGlowPulseLight 4s infinite alternate ease-in-out !important;
}
@keyframes ctaGlowPulseLight {
  0% { box-shadow: 0 20px 45px rgba(255, 107, 0, 0.04), 0 0 15px rgba(255, 107, 0, 0.02); }
  100% { box-shadow: 0 20px 45px rgba(255, 107, 0, 0.04), 0 0 35px rgba(255, 107, 0, 0.08); }
}
.svc-cta__title {
  color: #0f172a !important;
}
.svc-cta__sub {
  color: #64748b !important;
}

/* Customized scrollbar for Light Theme */
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff6b00;
}

/* Hide CTA Banner globally across service pages */
.svc-cta {
  display: none !important;
}