* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }



        :root {
    --primary: #00ADB5;
    --secondary: #7D0A0A;
    --third: #EAD196;
    --bg: #f7f7f7;
    --text: #222831;
    --text-secondary: #393E46;
    --white: #EEEEEE;
   --font-size-h1: 48px;
   --font-size-h2: 36px;
   --font-size-h3: 24px;
 --font-size-p: 14px;
  --font-size-button: 14px;
--font-size-review: 18px;
--font-size-review-sub: 14px;
}



        .wd-hr-hero {
            max-width: 1600px;
            width: 95%;
            min-height: 60vh;
            margin: 0 auto;
            background: linear-gradient(to bottom, #000000, rgb(34, 3, 90));
            border-radius: 15px;
            position: relative;
            margin-top: 120px;
            padding: 40px;
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            z-index: 10;
        }

        .wd-hr-light-rays {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 25%, transparent 50%);
            opacity: 0.9;
            animation: colorShift 20s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes colorShift {
            0%, 100% { background: radial-gradient(circle at top left, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 25%, transparent 50%); }
            25% { background: radial-gradient(circle at top left, rgba(200,220,255,0.0) 0%, rgba(200,220,255,0.55) 25%, transparent 50%); }
            50% { background: radial-gradient(circle at top left, rgba(255,200,220,0.0) 0%, rgba(202, 173, 255, 0.55) 25%, transparent 50%); }
            75% { background: radial-gradient(circle at top left, rgba(200,255,220,0.0) 0%, rgba(200, 213, 255, 0.55) 25%, transparent 50%); }
        }

        .wd-hr-3d-objects {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .wd-hr-3d-object {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transform-style: preserve-3d;
            animation: float 12s ease-in-out infinite, glow 8s ease-in-out infinite;
        }

        @supports not (backdrop-filter: blur(5px)) {
            .wd-hr-3d-object {
                background: rgba(255, 255, 255, 0.2);
            }
        }

        .wd-hr-3d-object.cube1 {
            left: 15%;
            top: 25%;
            width: 60px;
            height: 60px;
            transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
            animation-name: floatCircular, glow;
            animation-duration: 14s, 7s;
        }

        .wd-hr-3d-object.cube2 {
            left: 65%;
            top: 35%;
            width: 50px;
            height: 50px;
            transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
            animation-name: floatVertical, glow;
            animation-duration: 16s, 9s;
            animation-delay: 3s, 2s;
        }

        .wd-hr-3d-object.sphere1 {
            left: 45%;
            top: 15%;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            animation-name: floatCircular, glow;
            animation-duration: 13s, 6s;
            animation-delay: 2s, 1s;
        }

        .wd-hr-3d-object.sphere2 {
            left: 25%;
            top: 65%;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            animation-name: floatVertical, glow;
            animation-duration: 15s, 8s;
            animation-delay: 4s, 3s;
        }

        .wd-hr-3d-object.tetrahedron {
            left: 55%;
            top: 55%;
            width: 50px;
            height: 50px;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
            animation-name: floatCircular, glow;
            animation-duration: 11s, 7s;
            animation-delay: 5s, 4s;
        }

        .wd-hr-crystal-particle {
            position: absolute;
            width: 5px;
            height: 5px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 70%, transparent 100%);
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            animation: particleFade 0.8s ease-out forwards;
        }

        @supports not (backdrop-filter: blur(5px)) {
            .wd-hr-crystal-particle {
                background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
            }
        }

        @keyframes floatCircular {
            0% { transform: translateZ(0) translateX(0) translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
            50% { transform: translateZ(100px) translateX(50px) translateY(-50px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
            100% { transform: translateZ(0) translateX(0) translateY(0) rotateX(720deg) rotateY(720deg) rotateZ(720deg); }
        }

        @keyframes floatVertical {
            0% { transform: translateZ(0) translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
            50% { transform: translateZ(80px) translateY(-40px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
            100% { transform: translateZ(0) translateY(0) rotateX(720deg) rotateY(720deg) rotateZ(720deg); }
        }

        @keyframes glow {
            0%, 100% { box-shadow: 0 0 5px rgba(255,255,255,0.2); }
            50% { box-shadow: 0 0 10px rgba(200,220,255,0.3); }
        }

        @keyframes particleFade {
            0% { opacity: 1; transform: scale(1) translateZ(0) translateX(var(--offset-x)) translateY(var(--offset-y)); }
            100% { opacity: 0; transform: scale(0.5) translateZ(20px) translateX(var(--offset-x)) translateY(var(--offset-y)); }
        }

        .wd-hr-hero-content {
            text-align: center;
            padding: 30px;
            color: var(--white);
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
        }

        .wd-hr-hero h1 {
            font-size: var(--font-size-h1);
            animation: fadeInUp 1s ease;
        }

        .wd-hr-review {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            max-width: 400px;
            animation: fadeInUp 1.2s ease;
        }

        .wd-hr-review img {
            width: 100px;
        }

        .wd-hr-review-text {
            text-align: left;
        }

        .wd-hr-review-text p:first-child {
            font-size: var(--font-size-review);
            font-weight: bold;
        }

        .wd-hr-review-text p:last-child {
            font-size: var(--font-size-review-sub);
            color: #ccc;
        }

.wd-hr-tm-text{
  margin: 10px auto;
}
.wd-hr-tm-text p{
 color: var(--white);
 font-size: var(--font-size-p);
}
.wd-hr-tm-text p i{
color: var(--white);
font-size: 18px;
margin-right: 15px;
}


        .wd-hr-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            /* margin: 15px; */
            gap: 6px;
            animation: fadeInUp 1.4s ease;
        }

        .wd-hr-glassy-button {
            background: transparent;
            border: none;
            outline: none;
            margin: 8px;
            /* overflow: hidden; */
        }

        .wd-hr-glassy-button a {
            background: linear-gradient(to right, #530ac7, #100227);
             background-size: 200% 100%;
             margin: 10px;
            background-position: 0% center;
            padding: 12px 30px;
            color: var(--white);
            border-radius: 8px;
            text-decoration: none;
            cursor: pointer;
            font-size: 16px;
            transition: background-position 0.5s ease, transform 0.3s ease;
            text-align: center;
            display: block;
        }

.wd-hr-glassy-button .btn-2{
  background: transparent;
  border: 1px solid #fff;
}
.wd-hr-glassy-button .btn-2:hover{
  background: #530ac7;
  border: none;
}
.wd-hr-glassy-button .btn-2 i{
  margin-right: 8px;
  font-size: 18px;
}


        .wd-hr-glassy-button .btn-1 {
            background: linear-gradient(to right, #340580, #7537e7);
            color: var(--white);
            border: none;
            transition: 0.3s ease;
            overflow: hidden;

        }

        .wd-hr-glassy-button .btn-1 i{
            color: var(--white);
            margin-left: 8px;
            font-size: 18px;
            transition: 0.6s ease-in-out;
        }

        .wd-hr-glassy-button .btn-1:hover{
            padding-right: 50px;
            background: linear-gradient(to right, #530ac7, #fafafa);
        }

        .wd-hr-glassy-button .btn-1:hover i{
            transform: translateX(50px);
        }

        @supports not (backdrop-filter: blur(10px)) {
            .wd-hr-glassy-button a {
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.5) 100%);
            }
        }


        @keyframes fadeInUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @media (max-width: 768px) {
            .wd-hr-hero h1 {
                font-size: var(--font-size-h1);
            } 
             .wd-hr-hero {
                padding: 15px 25px;
            }

  .wd-hr-hero-content{
                padding: 6px;
            }

            .wd-hr-review {
                max-width: 90%;
            }
        }









.wd-ib-section {
  max-width: 1000px;
  margin: 100px auto;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px;
  font-family: 'Arial', sans-serif;
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  animation: loadSection 1.2s ease-out forwards;
}

@keyframes loadSection {
  0% { opacity: 0; transform: translateY(50px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.wd-ib-image-container {
  flex: 1 1 400px;
  max-width: 500px;
}

.wd-ib-image-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  animation: imagePop 1.4s ease-out forwards;
}

@keyframes imagePop {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.wd-ib-boxes-container {
  flex: 1 1 400px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.wd-ib-box {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  position: relative;
  animation: boxSlide 1s ease-out forwards;
  animation-delay: calc(0.2s * var(--order));
}

.wd-ib-box:nth-child(1) { --order: 1; }
.wd-ib-box:nth-child(2) { --order: 2; }
.wd-ib-box:nth-child(3) { --order: 3; }
.wd-ib-box:nth-child(4) { --order: 4; }

@keyframes boxSlide {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

.wd-ib-box i{
  font-size: 20px;
  position: absolute;
  top: 15px;
  left: 15px;
  color: #161616;
}

.wd-ib-box h3 {
  margin-top: 60px;
  font-size: var(--font-size-h3);
  color: #161616;
}

.wd-ib-box-cta {
  background: linear-gradient(to bottom, #000000, rgb(66, 13, 165));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wd-ib-box-cta h3 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 20px;
  margin-top: 0;
}

.wd-ib-button{
  border: none;
  outline: none;
  background: none;
}

.wd-ib-button a{
  padding: 10px 20px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
}

.wd-ib-button a:hover {
  background: rgba(255,255,255,0.2);
  box-shadow: 0 0 20px rgba(255,255,255,0.5), inset 0 0 10px rgba(255,255,255,0.3);
  transform: translateY(-2px);
}

.wd-ib-button a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.wd-ib-button a:hover::after {
  left: 100%;
}

@media (max-width: 768px) {
  .wd-ib-section {
    flex-direction: column;
    align-items: center;
  }

  .wd-ib-image-container {
    max-width: 100%;
  }

  .wd-ib-boxes-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .wd-ib-button a{
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
}
}







        .wd-hm-srvc-container {
            max-width: 1400px;
            margin: auto;
            padding: 0 16px;
        }

        .wd-hm-srvc-top-section {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 32px;
        }

        .wd-hm-srvc-top-left {
            flex: 1;
            min-width: 280px;
            max-width: 500px;
        }

        .wd-hm-srvc-top-left h2 {
            font-size: var(--font-size-h2);
            margin-bottom: 10px;
            color: #161616;
        }

        .wd-hm-srvc-top-left p {
            font-size: 16px;
            line-height: 1.6;
            color: #2c2c2c;
        }

        .wd-hm-srvc-top-right {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .wd-hm-srvc-dropdown {
            position: relative;
            right: 0;
        }

        .wd-hm-srvc-dropdown-toggle {
            padding: 12px 20px;
            background: transparent;
            color: #161616;
            border: none;
            font-weight: 600;
            font-size: 16px;
            border-radius: 6px;
            border: 1px solid rgba(0, 0, 0, 0.4);
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            text-decoration: none;
            transition: background 0.3s;
        }

        .wd-hm-srvc-dropdown-menu {
            position: absolute;
            right: 0;
            left: auto;
            top: 110%;
            padding: 15px;
            background: #161616;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            display: none;
            flex-direction: column;
            min-width: 200px;
            z-index: 100;
            text-align: left;
            transform: translateX(0);
        }

        .wd-hm-srvc-dropdown-menu a {
            cursor: pointer;
            text-decoration: none;
            font-size: 16px;
            margin-bottom: 12px;
            color: var(--white);
            transition: border-bottom 0.3s;
        }

        .wd-hm-srvc-dropdown-menu a:hover {
            border-bottom: 1px solid #fff;
        }

        .wd-hm-srvc-dropdown.active .wd-hm-srvc-dropdown-menu {
            display: flex;
        }

        .wd-hm-srvc-slider-controls {
            display: flex;
            gap: 10px;
        }

        .wd-hm-srvc-slider-controls button {
            backdrop-filter: blur(10px);
            color: rgb(44, 44, 44);
            width: 40px;
            height: 40px;
            font-size: 16px;
            cursor: pointer;
            box-shadow: rgba(255, 255, 255, 0.6) 0px 5px 8px inset, rgba(0, 0, 0, 0.1) 0px -2px 4px inset, rgba(0, 0, 0, 0.2) 0px 4px 10px;
            background: rgba(255, 255, 255, 0.15);
            border-width: 1px;
            border-style: solid;
            border-color: rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            transition: all 0.3s;
        }

        .wd-hm-srvc-slider-controls button:hover {
            transform: scale(0.9);
            box-shadow: inset 0 2px 2px rgba(94, 94, 94, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .wd-hm-srvc-slider {
            overflow-x: auto;
            scroll-behavior: smooth;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .wd-hm-srvc-slider::-webkit-scrollbar {
            display: none;
        }

        .wd-hm-srvc-slider-track {
            display: flex;
            gap: 20px;
            min-width: max-content;
            padding-bottom: 8px;
        }

        .wd-hm-srvc-card {
            flex: 0 0 auto;
            width: 340px;
            height: 420px;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-color: #ddd;
        }

        .wd-hm-srvc-card h2 {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 2;
            color: white;
            font-size: var(--font-size-h2);
        }

        .wd-hm-srvc-card .wd-hm-srvc-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
            z-index: 1;
            transition: all 0.4s ease;
        }

        .wd-hm-srvc-card .wd-hm-srvc-extra-content {
            position: absolute;
            bottom: -200px;
            left: 0;
            right: 0;
            color: #fff;
            padding: 20px;
            text-align: left;
            transition: all 0.4s ease;
            z-index: 2;
        }

        .wd-hm-srvc-card .wd-hm-srvc-extra-content p {
            font-size: 16px;
            color: #fff;
            line-height: 1.6;
        }

        .wd-hm-srvc-card:hover .wd-hm-srvc-overlay {
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.9));
        }

        .wd-hm-srvc-card:hover .wd-hm-srvc-extra-content {
            bottom: 30px;
        }

        .wd-hm-srvc-extra-content button {
            border: none;
            outline: none;
            background: none;
            margin-top: 10px;
        }

        .wd-hm-srvc-extra-content button a {
            padding: 8px 20px;
            background: white;
            color: black;
            border: none;
            border-radius: 6px;
            text-decoration: none;
            cursor: pointer;
            font-size: 14px;
        }

        @media (max-width: 1024px) {
            .wd-hm-srvc-top-section {
                flex-direction: column;
                align-items: flex-start;
            }
            .wd-hm-srvc-top-right {
                width: 100%;
                justify-content: flex-end;
            }
            .wd-hm-srvc-dropdown {
                right: 0;
            }
            .wd-hm-srvc-dropdown-menu {
                right: 0;
                left: auto;
                transform: translateX(0);
                min-width: 180px;
            }
            .wd-hm-srvc-card {
                width: 300px;
                height: 380px;
            }
            .wd-hm-srvc-card h2 {
                font-size: var(--font-size-h3);
            }
            .wd-hm-srvc-card .wd-hm-srvc-extra-content p {
                font-size: 15px;
            }
        }

        @media (max-width: 768px) {
            .wd-hm-srvc-top-section {
                gap: 15px;
            }
            .wd-hm-srvc-top-left h2 {
                font-size: var(--font-size-h2);
            }
            .wd-hm-srvc-top-left p {
                font-size: 16px;
            }
            .wd-hm-srvc-dropdown-toggle {
                font-size: 16px;
                padding: 12px 20px;
            }
            .wd-hm-srvc-dropdown {
                right: 0;
            }
            .wd-hm-srvc-dropdown-menu {
                right: 0;
                left: auto;
                transform: translateX(0);
                min-width: 180px;
                padding: 12px;
            }
            .wd-hm-srvc-slider-track {
                gap: 12px;
            }
            .wd-hm-srvc-card {
                width: 280px;
                height: 360px;
            }
        }

        @media (max-width: 480px) {
            .wd-hm-srvc-container {
                padding: 0 8px;
            }
            .wd-hm-srvc-top-section {
                gap: 15px;
                margin-bottom: 24px;
            }
            .wd-hm-srvc-top-left h2 {
                font-size: var(--font-size-h2);
            }
            .wd-hm-srvc-top-left p {
                font-size: 16px;
            }
            .wd-hm-srvc-slider-controls button {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
            .wd-hm-srvc-card {
                width: 260px;
                height: 340px;
            }
            .wd-hm-srvc-card h2 {
                font-size: var(--font-size-h3);
            }
            .wd-hm-srvc-card .wd-hm-srvc-extra-content p {
                font-size: 15px;
            }
            .wd-hm-srvc-extra-content button a {
                padding: 8px 20px;
                font-size: 14px;
            }
            .wd-hm-srvc-dropdown {
                right: 0;
            }
            .wd-hm-srvc-dropdown-menu {
                right: 0;
                left: auto;
                transform: translateX(0);
                min-width: 160px;
                padding: 10px;
            }

.wd-ib-image-container {
    flex: 1 1 300px;
    max-width: 500px;
}

        }




/* --------------TOp Icons----------------------------- */

 .wd-bm-image-loop-section {
  position: relative;
  max-width: 800px;
  margin: 10px auto;
  margin-bottom: 40px;
  overflow: hidden;
  padding: 3px 0;
}

.wd-bm-image-row {
  overflow: hidden;
  white-space: nowrap;
  margin: 50px 0;
  position: relative;
}

.wd-bm-image-track {
  display: flex;
  gap: 60px;
  align-items: center;
}

.wd-bm-image-track img {
  max-width: 50px;
  height: auto;
  flex-shrink: 0;
}

/* Left to Right Animation */
.wd-bm-left-to-right .wd-bm-image-track {
  animation: scrollLeftToRight 30s linear infinite;
}

/* Right to Left Animation */
.wd-bm-right-to-left .wd-bm-image-track {
  animation: scrollRightToLeft 30s linear infinite;
}

/* Animations */
@keyframes scrollLeftToRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes scrollRightToLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fade edges */
.wd-bm-fade-left,
.wd-bm-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 10;
}

.wd-bm-fade-left {
  left: 0;
  background: linear-gradient(to right, white 0%, transparent 100%);
}

.wd-bm-fade-right {
  right: 0;
  background: linear-gradient(to left, white 0%, transparent 100%);
}


/* --------------TOp Icons-----------------------------End---------- */



















/* -----------------wd-nw-sec---------------------- */


.wd-nw-sec {
   background-color: #0a0a0a;
   margin: 100px auto;
}

.services-section-wd-nw-sec {
    min-height: 80vh;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    color: white;
}

.services-section-wd-nw-sec h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 30px;
}

.subtext-wd-nw-sec {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 50px;
}

.sub-item-wd-nw-sec {
    flex: 1 1 250px;
    font-size: 15px;
    color: #ccc;
    font-family: 'Roboto', sans-serif;
}

.sub-item-wd-nw-sec b {
    display: block;
    color: white;
    font-weight: 600;
    margin-bottom: 8px;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.card-grid-wd-nw-sec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.card-wd-nw-sec {
    border-radius: 12px;
    padding: 30px 20px;
    color: #000;
    font-weight: 600;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    position: relative;
    cursor: pointer;
}

.card-wd-nw-sec:hover {
    transform: translateY(-10px);
}

.card-wd-nw-sec h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 22px;
    margin: 10px 0;
    color: black;
}

.card-wd-nw-sec small {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #161616;
}

.card-wd-nw-sec i {
    font-size: 30px;
    color: #000;
}

/* Card Colors */
.pink-wd-nw-sec { background-color: #fbd2ec; }
.green-wd-nw-sec { background-color: #d4fbbf; }
.yellow-wd-nw-sec { background-color: #ffd34e; }
.white-wd-nw-sec { background-color: #fff; }

@media (max-width: 600px) {
    .services-section-wd-nw-sec h2 {
        font-size: 32px;
    }
    .services-section-wd-nw-sec {
        padding: 25px;
    }
    .card-wd-nw-sec {
      height: auto;
    }
}

/* ------------------------wd nw sec end------------*/














.wd-cd-hero-section {
    max-width: 1200px;
    margin: 80px auto;
    margin-bottom: 40px;
    padding: 15px;
    font-family: 'Roboto', sans-serif;
    /* background: #161616; */
}

.wd-cd-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: center;
}

.wd-cd-box {
    background: #161616;
    border-radius: 10px;
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9);
    padding: 20px;
    position: relative;
    text-align: center;
    transition: transform 0.3s ease;
}

.wd-cd-box:hover {
    transform: translateY(-5px);
}

.wd-cd-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 24px;
}

.wd-cd-box:nth-child(1) .wd-cd-icon { color: #ff6f61; }
.wd-cd-box:nth-child(2) .wd-cd-icon { color: #4caf50; }
.wd-cd-box:nth-child(3) .wd-cd-icon { color: #2196f3; }
.wd-cd-box:nth-child(4) .wd-cd-icon { color: #ffc107; }

.wd-cd-counter {
    font-family: 'Vietnam Pro', sans-serif;
    font-size: 36px;
    font-weight: 500;
    margin: 20px 0;
    color: var(--white);
}

.wd-cd-counter span {
    display: inline-block;
    transition: all 0.5s ease;
}

.wd-cd-hero-section:hover .wd-cd-number {
    animation: wd-cd-count 2s ease-in-out forwards;
}

.wd-cd-text {
    font-size: 18px;
    color: var(--white);
}

@keyframes wd-cd-count {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
    .wd-cd-container {
        grid-template-columns: repeat(2, 1fr);
    }
}












    .wd-fl-container {
      max-width: 800px;
      width: 100%;
      margin: 70px auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .wd-fl-filter-bar-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
      width: 100%;
    }

    .wd-fl-filter-bar {
      display: flex;
      position: relative;
      border-radius: 999px;
      background: #e9e9e9;
      padding: 6px;
      gap: 8px;
    }

    .wd-fl-filter-button {
      padding: 12px 24px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      font-weight: 500;
      color: #333;
      transition: color 0.3s ease, background 0.3s ease;
      z-index: 1;
      position: relative;
    }

    .wd-fl-filter-button.wd-fl-active {
      background: #fff;
      color: #000;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .wd-fl-highlight {
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 0;
      height: calc(100% - 12px);
      border-radius: 999px;
      background: #fff;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 0;
    }

    .wd-fl-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
    }

    .wd-fl-text-content {
      flex: 1;
      min-width: 320;
      max-width: 350px;
      display: flex;
      flex-direction: column;
    }

    .wd-fl-text-content h2 {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #111;
    }

    .wd-fl-text-content p {
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      margin-bottom: 1.5rem;
      line-height: 1.6;
      color: #444;
    }

    .wd-fl-text-content button {
      padding: 10px 24px;
      background: #000;
      color: #fff;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      font-size: 0.95rem;
      transition: background 0.3s ease, transform 0.2s ease;
      align-self: flex-start;
      display: none;
    }

    /* .wd-fl-text-content button:hover {
      background: #333;
      transform: scale(1.03);
    } */

    .wd-fl-image-content {
      display: flex;
      justify-content: center;
    }

    .wd-fl-image-content img {
      max-width: 320px;
      width: 100%;
      /* border-radius: 20px; */
      /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); */
    }

    .wd-fl-dropdown {
      display: none;
      margin-bottom: 1.5rem;
      width: 100%;
      padding: 12px;
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      border-radius: 8px;
      border: 1px solid #ddd;
      background: #fff;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .wd-fl-filter-bar-wrapper {
        display: none;
      }

      .wd-fl-dropdown {
        display: block;
      }

      .wd-fl-content {
        flex-direction: column;
        align-items: flex-start;
      }
      .wd-hr-hero{
        margin-top: 85px;
      }
    }








  /* Section Styling */
    .wd-prt-section {
      max-width: 1200px;
      width: 99%;
      margin: 70px auto;
      padding: 20px;
      overflow: hidden;
    }

    /* Top Area */
    .wd-prt-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 20px;
    }

    .wd-prt-heading {
      font-size: var(--font-size-h2);
      margin-bottom: 8px;
      font-weight: bold;
      color: #161616;
    }

    .wd-prt-heading span{
      font-size: var(--font-size-h2);
      margin-bottom: 8px;
      font-weight: bold;
      color: #fff;
      background-color: rgb(255, 202, 26);
      padding: 3px 6px;
      border-radius: 4px;
    }

    .wd-prt-desc {
      color: #3f3f3f;
      font-size: 16px;
    }

    .wd-prt-link-btn {
      align-self: flex-start;
      background: #161616;
      color: var(--white);
      padding: 10px 20px;
      border-radius: 12px;
      border: 1px solid #161616;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.3s ease;
    }

    .wd-prt-link-btn:hover {
      background: var(--white);
      color: #161616;
    }

    /* Cards Container */
    .wd-prt-cards {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    @media (min-width: 768px) {
      .wd-prt-cards {
        flex-direction: row;
      }
    }

    /* Card Wrapper */
    .wd-prt-card-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      /* align-items: center; */
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .wd-prt-card-wrapper.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Card Box */
    .wd-prt-card {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      padding: 15px;
      background: rgba(58, 58, 58, 0.178); /* Blue tint */
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(14, 14, 14, 0.4);
    }

    .wd-prt-img {
      width: 100%;
      height: 380px;
      border-radius: 8px;
      object-fit: cover;
      display: block;
    }

    /* Buttons and Text Below */
    .wd-prt-footer {
      margin-top: 16px;
      text-align: left;
    }

    .wd-prt-buttons {
      display: flex;
      gap: 10px;
      justify-content: left;
      margin-bottom: 10px;
    }

    .wd-prt-btn {
      background: transparent;
      color: #161616;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      border: 1px solid #16161688;
      transition: background 0.3s ease;
    }


    .wd-prt-text {
      font-size: 16px;
      color: #3f3f3f;
    }


















.wd-cb-container {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1200px;
    width: 100%;
    margin: 80px auto;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
}

.wd-cb-text-section {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.wd-cb-text-section h2 {
     font-family: 'Be Vietnam Pro', sans-serif;
    font-size: var(--font-size-h2);
    color: #161616;
    margin-bottom: 20px;
}

.wd-cb-text-section p {
    font-family: 'Roboto', sans-serif;
    font-size: var(--font-size-p);
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 30px;
}

.wd-cb-text-section button{
  background: none;
  outline: none;
  border: none;
}

.wd-cb-text-section button a{
    padding: 12px 24px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    background: var(--text);
    text-decoration: none;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
    font-weight: 500;
}

.wd-cb-text-section button a:hover {
    transform: translateY(-2px);
}

.wd-cb-cube-section {
    flex: 1;
    min-width: 300px;
    height: 400px;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.wd-cb-cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

.wd-cb-face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 51, 102, 0.9));
    backdrop-filter: blur(10px);
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    color: #ffffff;
    user-select: none;
    font-weight: 600;
    transition: backdrop-filter 0.3s ease, background 0.3s ease;
}

.wd-cb-face:hover {
    backdrop-filter: blur(0);
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(0, 51, 102, 0.7));
    cursor: pointer;

}

.wd-cb-front  { transform: translateZ(100px); background: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 51, 102, 0.5)); }
.wd-cb-back   { transform: translateZ(-100px) rotateY(180deg); background: linear-gradient(45deg, rgba(0, 51, 102, 0.7), rgba(0, 0, 0, 0.7)); }
.wd-cb-right  { transform: translateX(100px) rotateY(90deg); background: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 102, 204, 0.7)); }
.wd-cb-left   { transform: translateX(-100px) rotateY(-90deg); background: linear-gradient(45deg, rgba(0, 102, 204, 0.7), rgba(0, 0, 0, 0.7)); }
.wd-cb-top    { transform: translateY(-100px) rotateX(90deg); background: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 76, 153, 0.7)); }
.wd-cb-bottom { transform: translateY(100px) rotateX(-90deg); background: linear-gradient(45deg, rgba(0, 76, 153, 0.7), rgba(0, 0, 0, 0.7)); }

.wd-cb-front:hover  { background: linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 51, 102, 0.2)); }
.wd-cb-back:hover   { background: linear-gradient(45deg, rgba(0, 51, 102, 0.7), rgba(0, 0, 0, 0.7)); }
.wd-cb-right:hover  { background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(0, 102, 204, 0.7)); }
.wd-cb-left:hover   { background: linear-gradient(45deg, rgba(0, 102, 204, 0.7), rgba(0, 0, 0, 0.7)); }
.wd-cb-top:hover    { background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(0, 76, 153, 0.7)); }
.wd-cb-bottom:hover { background: linear-gradient(45deg, rgba(0, 76, 153, 0.7), rgba(0, 0, 0, 0.7)); }

@media (max-width: 768px) {
    .wd-cb-container {
        flex-direction: column;
        gap: 20px;
    }

    .wd-cb-text-section {
        text-align: center;
    }

    .wd-cb-cube-section {
        height: 300px;
    }

    .wd-cb-cube {
        width: 150px;
        height: 150px;
        margin-top: 30px;
    }

    .wd-cb-face {
        width: 150px;
        height: 150px;
        font-size: 1rem;
    }

    .wd-cb-front  { transform: translateZ(75px); }
    .wd-cb-back   { transform: translateZ(-75px) rotateY(180deg); }
    .wd-cb-right  { transform: translateX(75px) rotateY(90deg); }
    .wd-cb-left   { transform: translateX(-75px) rotateY(-90deg); }
    .wd-cb-top    { transform: translateY(-75px) rotateX(90deg); }
    .wd-cb-bottom { transform: translateY(75px) rotateX(-90deg); }
}







    .wd-fl-review-section {
  max-width: 1500px;
  margin: 80px auto;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
}

.wd-fl-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.wd-fl-title {
  font-family: 'Be Vietnam Pro', sans-serif;
    font-size: var(--font-size-h2);
  font-weight: bold;
  color: var(--text);
}

.wd-fl-scroll-buttons {
  display: flex;
  gap: 8px;
}

.wd-fl-glass-btn {
   background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #2c2c2c;
      border-radius: 8px;
      width: 40px;
      height: 40px;
      margin-left: 7px;
      font-size: 16px;
      cursor: pointer;
      box-shadow:
        inset 0 5px 8px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
}
.wd-fl-glass-btn:hover {
  transform: scale(0.9);
     box-shadow:
        inset 0 2px 2px rgba(94, 94, 94, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.2);
}

.wd-fl-reviews-container {
  display: flex;
  overflow-x: auto;
  gap: 30px;
  padding: 20px;
  scrollbar-width: none;
}
.wd-fl-reviews-container::-webkit-scrollbar {
  display: none;
}

.wd-fl-review-card {
  position: relative;
  background: white;
  max-width: 300px;
  padding: 20px 20px 80px;
  border-radius: 20px 0 20px 20px;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.1),
    0 10px 25px rgba(0,0,0,0.15);
  border: 2px solid #ccc;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.wd-fl-review-card:hover {
  transform: translateY(-2px);
}

.wd-fl-quote-circle {
  position: absolute;
  top: -16px;
  left: -17px;
  width: 50px;
  height: 50px;
  background: black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.wd-fl-review-text {
  color: #444;
  font-size: 16px;
   font-family: 'Roboto', sans-serif;
  margin-top: 30px;
  line-height: 1.6;
}

.wd-fl-review-user {
  position: absolute;
  bottom: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 20px;
  padding: 8px 12px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),
    0 6px 15px rgba(0,0,0,0.2);
     border: 2px solid #ccc;
}

.wd-fl-review-user img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #333;
}

.wd-fl-user-details {
  display: flex;
  flex-direction: column;
}

.wd-fl-name {
  font-weight: bold;
  color: #222;
  font-size: 14px;
}

.wd-fl-rating {
  color: #fbc02d;
  font-size: 14px;
}

.wd-fl-role {
  color: #666;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .wd-fl-title {
    font-size: 22px;
  }
  .wd-fl-review-card {
    max-width: 60vw;
  }
}











    .wd-bt-discuss-section {
      width: 100%;
      margin: 100px auto;
      overflow: hidden;
      position: relative;
      cursor: none;
    }

    .wd-bt-discuss-section a {
      text-decoration: none;
      color: inherit;
      display: block;
      position: relative;
    }

    .wd-bt-scroll-text {
      white-space: nowrap;
      font-size: 100px;
      font-weight: 900;
      opacity: 0.2;
      transition: opacity 0.3s ease;
      user-select: none;
    }

    .wd-bt-scroll-text:hover {
      opacity: 1;
    }

    .wd-bt-top-row, .wd-bt-bottom-row {
      overflow: hidden;
    }

    .wd-bt-top-row .wd-bt-scroll-text {
      animation: wd-bt-scrollLeft 30s linear infinite;
    }

    .wd-bt-bottom-row .wd-bt-scroll-text {
      animation: wd-bt-scrollRight 30s linear infinite;
    }

    @keyframes wd-bt-scrollLeft {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    @keyframes wd-bt-scrollRight {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

.wd-bt-custom-cursor {
  width: 60px;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.wd-bt-custom-cursor i {
  font-size: 20px;
  color: white;
}

    @media(max-width: 768px) {
      .wd-bt-scroll-text {
        font-size: 50px;
      }
      .wd-bt-custom-cursor {
        display: none;
      }
    }







  .wd-faq-section {
    max-width: 1200px;
    margin: 70px auto;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 15px;
    flex-wrap: wrap;
    font-family: 'Segoe UI', sans-serif;
  }

  .wd-faq-left {
    width: 30%;
    position: relative;
  }

  .wd-faq-left h2 {
    font-size: var(--font-size-h2);
    font-weight: 700;
    margin-bottom: 10px;
  }

  .wd-faq-left h3 {
    font-size: 20px;
    font-weight: 500;
    color: #666;
    margin-bottom: 20px;
  }

  .wd-faq-image-container {
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform 0.4s ease;
  }

  .wd-faq-image-container:hover {
    transform: scale(1.01);
  }

  .wd-faq-image-container img {
    width: 100%;
    display: block;
    border-radius: 0px;
  }

  .wd-faq-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
  }

  .wd-faq-overlay h3 {
    font-size: var(--font-size-h3);
    color: var(--white);
    font-weight: bold;
    margin-bottom: 10px;
  }

  .wd-faq-overlay button {
    background-color: var(--white);
    color: black;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .wd-faq-overlay button:hover {
    background-color: #161616;
    color: var(--white);
  }

  .wd-faq-right {
    width: 65%;
  }

  .wd-faq-accordion-item {
    border-bottom: 1px solid #ddd;
    padding: 18px 0;
    transition: all 0.3s ease;
  }

  .wd-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .wd-faq-answer {
    max-height: 0;
    overflow: hidden;
    font-size: 18px;
    color: #222831;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-left: 0;
  }

  .wd-faq-accordion-item.active .wd-faq-answer {
    max-height: 200px;
    padding-left: 10px;
    padding-top: 10px;
  }

  .wd-faq-question i {
    transition: transform 0.4s ease;
    color: #161616;
    padding: 12px;
    background-color: #f1f1f1;
    border-radius: 50%;
    font-size: 14px;
  }

  .wd-faq-accordion-item.active .wd-faq-question i {
    transform: rotate(180deg);
    color: var(--white);
    background-color: #161616;
  }

  @media (max-width: 768px) {
    .wd-faq-left, .wd-faq-right {
      width: 98%;
    }

      .wd-faq-question {
    font-size: 18px;
    font-weight: 500;
  }

    .wd-faq-section {
      flex-direction: column;
      gap: 30px;
    }
  }











  
h1, h2, h3{
  font-family: 'Vietnam Pro', sans-serif;
}
p, a{
  font-family: 'Roboto', sans-serif;
}