{"id":5374,"date":"2026-04-30T12:59:23","date_gmt":"2026-04-30T12:59:23","guid":{"rendered":"https:\/\/webnsofts.com\/?page_id=5374"},"modified":"2026-08-22T10:22:54","modified_gmt":"2026-08-22T10:22:54","slug":"home","status":"publish","type":"page","link":"https:\/\/webnsofts.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5374\" class=\"elementor elementor-5374\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-107d513 e-flex e-con-boxed e-con e-parent\" data-id=\"107d513\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2b6133 elementor-widget elementor-widget-html\" data-id=\"c2b6133\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n*{\r\n  margin:0;\r\n  padding:0;\r\n  box-sizing:border-box;\r\n}\r\n\r\n.hero-wrapper{\r\n  background:#0b0b0b;\r\n  width:100%;\r\n  display:flex;\r\n  justify-content:center;\r\n}\r\n\r\n.webnsoft-hero{\r\n  font-family:'Poppins',sans-serif;\r\n  min-height:auto;\r\n  padding:55px 5%;\r\n  color:#fff;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  flex-wrap:wrap;\r\n  position:relative;\r\n  overflow:hidden;\r\n  max-width:1250px;\r\n  width:100%;\r\n}\r\n\r\n\/* Animated Grid *\/\r\n.webnsoft-hero::before{\r\n  content:'';\r\n  position:absolute;\r\n  width:100%;\r\n  height:100%;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);\r\n  background-size:50px 50px;\r\n  top:0;\r\n  left:0;\r\n  z-index:1;\r\n  animation:gridMove 12s linear infinite;\r\n}\r\n\r\n\/* LEFT *\/\r\n.hero-left{\r\n  max-width:600px;\r\n  z-index:2;\r\n  animation:fadeUp 1s ease-out forwards;\r\n}\r\n\r\n.tag{\r\n  display:inline-block;\r\n  padding:8px 18px;\r\n  border:1px solid rgba(244,176,29,0.5);\r\n  border-radius:30px;\r\n  font-size:14px;\r\n  margin-bottom:20px;\r\n  color:#f4b01d;\r\n  animation:fadeUp 0.8s ease-out forwards;\r\n  transition:all 0.3s ease;\r\n}\r\n\r\n.tag:hover{\r\n  background:rgba(244,176,29,0.1);\r\n  box-shadow:0 0 20px rgba(244,176,29,0.25);\r\n  transform:translateY(-2px);\r\n}\r\n\r\n.hero-left h1{\r\n  font-size:48px;\r\n  line-height:1.2;\r\n  margin-bottom:20px;\r\n  animation:fadeUp 1s ease-out 0.15s both;\r\n}\r\n\r\n.hero-left h1 span{\r\n  color:#f4b01d;\r\n  display:inline-block;\r\n  animation:goldPulse 3s ease-in-out infinite;\r\n}\r\n\r\n.hero-left p{\r\n  color:#bbb;\r\n  margin-bottom:30px;\r\n  line-height:1.6;\r\n  animation:fadeUp 1s ease-out 0.3s both;\r\n}\r\n\r\n\/* BUTTONS *\/\r\n.btns{\r\n  display:flex;\r\n  gap:15px;\r\n  flex-wrap:wrap;\r\n  animation:fadeUp 1s ease-out 0.45s both;\r\n}\r\n\r\n.btn{\r\n  padding:14px 26px;\r\n  border-radius:8px;\r\n  font-size:14px;\r\n  cursor:pointer;\r\n  transition:all 0.35s ease;\r\n  text-decoration:none;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n.btn::before{\r\n  content:'';\r\n  position:absolute;\r\n  top:0;\r\n  left:-100%;\r\n  width:100%;\r\n  height:100%;\r\n  background:linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(255,255,255,0.35),\r\n    transparent\r\n  );\r\n  transition:0.5s;\r\n}\r\n\r\n.btn:hover::before{\r\n  left:100%;\r\n}\r\n\r\n.btn-primary{\r\n  background:#f4b01d;\r\n  color:#000;\r\n  box-shadow:0 5px 20px rgba(244,176,29,0.15);\r\n}\r\n\r\n.btn-primary:hover{\r\n  transform:translateY(-4px);\r\n  box-shadow:0 10px 30px rgba(244,176,29,0.35);\r\n}\r\n\r\n.btn-outline{\r\n  border:1px solid #f4b01d;\r\n  color:#f4b01d;\r\n}\r\n\r\n.btn-outline:hover{\r\n  background:#f4b01d;\r\n  color:#000;\r\n  transform:translateY(-4px);\r\n  box-shadow:0 10px 30px rgba(244,176,29,0.25);\r\n}\r\n\r\n\/* BOTTOM COUNTERS *\/\r\n.bottom-stats{\r\n  display:flex;\r\n  gap:40px;\r\n  margin-top:50px;\r\n  flex-wrap:wrap;\r\n  animation:fadeUp 1s ease-out 0.6s both;\r\n}\r\n\r\n.bottom-stats div{\r\n  font-size:14px;\r\n  transition:transform 0.3s ease;\r\n}\r\n\r\n.bottom-stats div:hover{\r\n  transform:translateY(-5px);\r\n}\r\n\r\n.bottom-stats strong{\r\n  display:block;\r\n  font-size:22px;\r\n  color:#f4b01d;\r\n  min-width:55px;\r\n}\r\n\r\n.counter{\r\n  display:inline-block;\r\n}\r\n\r\n\/* RIGHT CARD *\/\r\n.hero-right{\r\n  width:420px;\r\n  background:rgba(17,17,17,0.92);\r\n  border-radius:20px;\r\n  padding:25px;\r\n  margin-top:30px;\r\n  z-index:2;\r\n\r\n  box-shadow:\r\n    0 0 30px rgba(0,0,0,0.6),\r\n    inset 0 0 0 1px rgba(255,255,255,0.04);\r\n\r\n  animation:\r\n    cardEntrance 1s ease-out 0.3s both,\r\n    cardFloat 5s ease-in-out 1.3s infinite;\r\n}\r\n\r\n\/* Dashboard *\/\r\n.dashboard-title{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  margin-bottom:20px;\r\n  font-size:14px;\r\n  color:#aaa;\r\n}\r\n\r\n.dashboard-title span:last-child{\r\n  animation:activePulse 2s ease-in-out infinite;\r\n}\r\n\r\n\/* Services *\/\r\n.services{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:10px;\r\n  margin-bottom:20px;\r\n}\r\n\r\n.service{\r\n  padding:8px 12px;\r\n  font-size:12px;\r\n  border-radius:6px;\r\n  background:#1a1a1a;\r\n  border:1px solid rgba(255,255,255,0.1);\r\n\r\n  transition:\r\n    transform 0.3s ease,\r\n    color 0.3s ease,\r\n    border-color 0.3s ease,\r\n    background 0.3s ease,\r\n    box-shadow 0.3s ease;\r\n\r\n  animation:serviceAppear 0.6s ease-out both;\r\n\r\n  position:relative;\r\n  z-index:1;\r\n}\r\n\r\n.service:nth-child(1){animation-delay:0.6s;}\r\n.service:nth-child(2){animation-delay:0.7s;}\r\n.service:nth-child(3){animation-delay:0.8s;}\r\n.service:nth-child(4){animation-delay:0.9s;}\r\n.service:nth-child(5){animation-delay:1s;}\r\n.service:nth-child(6){animation-delay:1.1s;}\r\n.service:nth-child(7){animation-delay:1.2s;}\r\n.service:nth-child(8){animation-delay:1.3s;}\r\n\r\n\/* Service Hover Glow *\/\r\n.service:hover{\r\n  transform:translateY(-4px) scale(1.03);\r\n  color:#f4b01d;\r\n  background:rgba(244,176,29,0.08);\r\n  border-color:#f4b01d;\r\n\r\n  box-shadow:\r\n    0 0 8px rgba(244,176,29,0.45),\r\n    0 0 20px rgba(244,176,29,0.25),\r\n    0 0 35px rgba(244,176,29,0.12);\r\n\r\n  text-shadow:0 0 8px rgba(244,176,29,0.5);\r\n}\r\n\r\n.service.active{\r\n  border-color:#f4b01d;\r\n  color:#f4b01d;\r\n}\r\n\r\n.service.active:hover{\r\n  background:rgba(244,176,29,0.12);\r\n\r\n  box-shadow:\r\n    0 0 10px rgba(244,176,29,0.6),\r\n    0 0 25px rgba(244,176,29,0.35),\r\n    0 0 45px rgba(244,176,29,0.15);\r\n}\r\n\r\n\/* RIGHT COUNTERS *\/\r\n.stats{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  text-align:center;\r\n  padding-top:5px;\r\n}\r\n\r\n.stat{\r\n  animation:fadeUp 0.7s ease-out both;\r\n}\r\n\r\n.stat:nth-child(1){animation-delay:1s;}\r\n.stat:nth-child(2){animation-delay:1.15s;}\r\n.stat:nth-child(3){animation-delay:1.3s;}\r\n\r\n.stat h3{\r\n  color:#f4b01d;\r\n  font-size:22px;\r\n  min-width:55px;\r\n}\r\n\r\n.stat p{\r\n  font-size:12px;\r\n  color:#aaa;\r\n}\r\n\r\n.service-counter{\r\n  display:inline-block;\r\n}\r\n\r\n\/* ========================= *\/\r\n\/* ANIMATIONS *\/\r\n\/* ========================= *\/\r\n\r\n@keyframes fadeUp{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(25px);\r\n  }\r\n\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes cardEntrance{\r\n  from{\r\n    opacity:0;\r\n    transform:translateX(50px) scale(0.96);\r\n  }\r\n\r\n  to{\r\n    opacity:1;\r\n    transform:translateX(0) scale(1);\r\n  }\r\n}\r\n\r\n@keyframes cardFloat{\r\n  0%,100%{\r\n    transform:translateY(0);\r\n  }\r\n\r\n  50%{\r\n    transform:translateY(-8px);\r\n  }\r\n}\r\n\r\n@keyframes gridMove{\r\n  0%{\r\n    background-position:0 0;\r\n  }\r\n\r\n  100%{\r\n    background-position:50px 50px;\r\n  }\r\n}\r\n\r\n@keyframes goldPulse{\r\n  0%,100%{\r\n    text-shadow:0 0 0 rgba(244,176,29,0);\r\n  }\r\n\r\n  50%{\r\n    text-shadow:0 0 18px rgba(244,176,29,0.3);\r\n  }\r\n}\r\n\r\n@keyframes activePulse{\r\n  0%,100%{\r\n    opacity:1;\r\n  }\r\n\r\n  50%{\r\n    opacity:0.55;\r\n  }\r\n}\r\n\r\n@keyframes serviceAppear{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(10px);\r\n  }\r\n\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n  }\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:900px){\r\n\r\n  .webnsoft-hero{\r\n    flex-direction:column;\r\n    text-align:center;\r\n    padding:35px 5%;\r\n  }\r\n\r\n  .hero-left h1{\r\n    font-size:34px;\r\n  }\r\n\r\n  .hero-right{\r\n    width:100%;\r\n  }\r\n\r\n  .btns{\r\n    justify-content:center;\r\n  }\r\n\r\n  .bottom-stats{\r\n    justify-content:center;\r\n  }\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"hero-wrapper\">\r\n\r\n  <section class=\"webnsoft-hero\">\r\n\r\n    <!-- LEFT CONTENT -->\r\n\r\n    <div class=\"hero-left\">\r\n\r\n      <div class=\"tag\">\r\n        Trusted Design Partner\r\n      <\/div>\r\n\r\n      <h1>\r\n        Your Creative <span>Design Agency<\/span> \u2014 Built for Growth\r\n      <\/h1>\r\n\r\n      <p>\r\n        We are a digital agency focused on building modern, fast, and conversion-driven websites. Along with development, we support brands with SEO, marketing, and design to ensure long-term growth.\r\n      <\/p>\r\n\r\n      <div class=\"btns\">\r\n\r\n        <a href=\"#\" class=\"btn btn-primary\">\r\n          Get Started\r\n        <\/a>\r\n\r\n        <a href=\"#\" class=\"btn btn-outline\">\r\n          View Portfolio\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- LEFT ANIMATED COUNTERS -->\r\n\r\n      <div class=\"bottom-stats\">\r\n\r\n        <div>\r\n          <strong>\r\n            <span class=\"counter\" data-target=\"300\" data-suffix=\"+\">0<\/span>\r\n          <\/strong>\r\n          Projects\r\n        <\/div>\r\n\r\n        <div>\r\n          <strong>\r\n            <span class=\"counter\" data-target=\"95\" data-suffix=\"%\">0<\/span>\r\n          <\/strong>\r\n          Client Satisfaction\r\n        <\/div>\r\n\r\n        <div>\r\n          <strong>\r\n            <span class=\"counter\" data-target=\"50\" data-suffix=\"+\">0<\/span>\r\n          <\/strong>\r\n          Brands Built\r\n        <\/div>\r\n\r\n        <div>\r\n          <strong>\r\n            <span class=\"counter\" data-target=\"48\" data-suffix=\"h\">0<\/span>\r\n          <\/strong>\r\n          Avg Delivery\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- RIGHT CARD -->\r\n\r\n    <div class=\"hero-right\">\r\n\r\n      <div class=\"dashboard-title\">\r\n\r\n        <span>Services<\/span>\r\n\r\n        <span style=\"color:#f4b01d;\">\r\n          \u25cf Active\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"services\">\r\n\r\n        <div class=\"service active\">\r\n          Website Development\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          SEO\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          Digital Marketing\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          Design & Branding\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          Social Media Posts\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          Logo Design\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          Website Audit\r\n        <\/div>\r\n\r\n        <div class=\"service\">\r\n          Banners\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- RIGHT ANIMATED COUNTERS -->\r\n\r\n      <div class=\"stats\">\r\n\r\n        <div class=\"stat\">\r\n\r\n          <h3>\r\n            <span class=\"service-counter\" data-target=\"100\">0<\/span>+\r\n          <\/h3>\r\n\r\n          <p>Logos<\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"stat\">\r\n\r\n          <h3>\r\n            <span class=\"service-counter\" data-target=\"80\">0<\/span>+\r\n          <\/h3>\r\n\r\n          <p>Websites<\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"stat\">\r\n\r\n          <h3>\r\n            <span class=\"service-counter\" data-target=\"150\">0<\/span>+\r\n          <\/h3>\r\n\r\n          <p>Designs<\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function(){\r\n\r\n  \/* LEFT COUNTERS *\/\r\n\r\n  const counters =\r\n    document.querySelectorAll(\".counter\");\r\n\r\n  counters.forEach((counter, index) => {\r\n\r\n    const target =\r\n      parseInt(\r\n        counter.getAttribute(\"data-target\")\r\n      );\r\n\r\n    const suffix =\r\n      counter.getAttribute(\"data-suffix\") || \"\";\r\n\r\n    const delay = index * 180;\r\n\r\n    setTimeout(() => {\r\n\r\n      let startTime = null;\r\n\r\n      function animateCounter(timestamp){\r\n\r\n        if(!startTime){\r\n          startTime = timestamp;\r\n        }\r\n\r\n        const progress = Math.min(\r\n          (timestamp - startTime) \/ 1800,\r\n          1\r\n        );\r\n\r\n        const easeOut =\r\n          1 - Math.pow(1 - progress, 3);\r\n\r\n        const currentValue =\r\n          Math.floor(easeOut * target);\r\n\r\n        counter.textContent =\r\n          currentValue + suffix;\r\n\r\n        if(progress < 1){\r\n\r\n          requestAnimationFrame(\r\n            animateCounter\r\n          );\r\n\r\n        }else{\r\n\r\n          counter.textContent =\r\n            target + suffix;\r\n\r\n        }\r\n\r\n      }\r\n\r\n      requestAnimationFrame(\r\n        animateCounter\r\n      );\r\n\r\n    }, delay);\r\n\r\n  });\r\n\r\n\r\n  \/* RIGHT SERVICE COUNTERS *\/\r\n\r\n  const serviceCounters =\r\n    document.querySelectorAll(\".service-counter\");\r\n\r\n  serviceCounters.forEach((counter, index) => {\r\n\r\n    const target =\r\n      parseInt(\r\n        counter.getAttribute(\"data-target\")\r\n      );\r\n\r\n    const delay =\r\n      1300 + (index * 180);\r\n\r\n    setTimeout(() => {\r\n\r\n      let startTime = null;\r\n\r\n      function animateServiceCounter(timestamp){\r\n\r\n        if(!startTime){\r\n          startTime = timestamp;\r\n        }\r\n\r\n        const progress = Math.min(\r\n          (timestamp - startTime) \/ 1600,\r\n          1\r\n        );\r\n\r\n        const easeOut =\r\n          1 - Math.pow(1 - progress, 3);\r\n\r\n        const currentValue =\r\n          Math.floor(easeOut * target);\r\n\r\n        counter.textContent =\r\n          currentValue;\r\n\r\n        if(progress < 1){\r\n\r\n          requestAnimationFrame(\r\n            animateServiceCounter\r\n          );\r\n\r\n        }else{\r\n\r\n          counter.textContent =\r\n            target;\r\n\r\n        }\r\n\r\n      }\r\n\r\n      requestAnimationFrame(\r\n        animateServiceCounter\r\n      );\r\n\r\n    }, delay);\r\n\r\n  });\r\n\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a0bfb3 e-flex e-con-boxed e-con e-parent\" data-id=\"6a0bfb3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9613ad elementor-widget elementor-widget-html\" data-id=\"b9613ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n\/* =========================================\r\n   WEBNSOFT \u2014 TRUSTED BRANDS\r\n========================================= *\/\r\n\r\n.ws-client-section{\r\n    width:100%;\r\n    background:transparent;\r\n    padding:45px 0 60px;\r\n    overflow:hidden;\r\n    font-family:'Poppins',sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   HEADING\r\n========================================= *\/\r\n\r\n.ws-client-heading{\r\n    text-align:center;\r\n    padding:0 20px;\r\n    margin-bottom:30px;\r\n}\r\n\r\n.ws-client-heading h2{\r\n    margin:0;\r\n    color:#ffffff;\r\n    font-size:29px;\r\n    font-weight:600;\r\n    line-height:1.3;\r\n}\r\n\r\n.ws-client-heading h2 span{\r\n    color:#F4B01D;\r\n}\r\n\r\n.ws-client-line{\r\n    width:55px;\r\n    height:2px;\r\n    background:#F4B01D;\r\n    margin:12px auto 0;\r\n    border-radius:20px;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   SLIDER\r\n========================================= *\/\r\n\r\n.ws-client-slider{\r\n    width:100%;\r\n    overflow:hidden;\r\n\r\n    \/* Space for subtle hover scale *\/\r\n    padding:15px 0 20px;\r\n}\r\n\r\n.ws-client-track{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:25px;\r\n    width:max-content;\r\n\r\n    animation:wsBrandSlider 28s linear infinite;\r\n\r\n    will-change:transform;\r\n}\r\n\r\n.ws-client-track:hover{\r\n    animation-play-state:paused;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LOGO CARD\r\n========================================= *\/\r\n\r\n.ws-client-logo{\r\n    width:175px;\r\n    height:82px;\r\n\r\n    flex:0 0 175px;\r\n\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    position:relative;\r\n\r\n    background:#ffffff;\r\n\r\n    border:1px solid rgba(0,0,0,0.07);\r\n    border-radius:12px;\r\n\r\n    padding:14px;\r\n\r\n    box-shadow:\r\n        0 5px 18px rgba(0,0,0,0.08);\r\n\r\n    transition:\r\n        transform 0.35s ease,\r\n        box-shadow 0.35s ease,\r\n        border-color 0.35s ease;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   SMALL YELLOW BOTTOM ACCENT\r\n========================================= *\/\r\n\r\n.ws-client-logo::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:50%;\r\n    bottom:0;\r\n\r\n    width:0;\r\n    height:2px;\r\n\r\n    background:#F4B01D;\r\n\r\n    transform:translateX(-50%);\r\n\r\n    transition:width 0.35s ease;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CLEAN HOVER\r\n========================================= *\/\r\n\r\n.ws-client-logo:hover{\r\n    transform:scale(1.035);\r\n\r\n    border-color:rgba(244,176,29,0.45);\r\n\r\n    box-shadow:\r\n        0 8px 25px rgba(0,0,0,0.12),\r\n        0 0 18px rgba(244,176,29,0.10);\r\n}\r\n\r\n.ws-client-logo:hover::after{\r\n    width:45%;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LOGO IMAGE\r\n========================================= *\/\r\n\r\n.ws-client-logo img{\r\n    width:135px;\r\n    height:55px;\r\n\r\n    max-width:100%;\r\n    max-height:100%;\r\n\r\n    object-fit:contain;\r\n\r\n    display:block;\r\n\r\n    transition:transform 0.35s ease;\r\n}\r\n\r\n.ws-client-logo:hover img{\r\n    transform:scale(1.045);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   INFINITE SLIDER\r\n========================================= *\/\r\n\r\n@keyframes wsBrandSlider{\r\n\r\n    0%{\r\n        transform:translateX(0);\r\n    }\r\n\r\n    100%{\r\n        transform:translateX(calc(-50% - 12.5px));\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TABLET\r\n========================================= *\/\r\n\r\n@media(max-width:900px){\r\n\r\n    .ws-client-heading h2{\r\n        font-size:26px;\r\n    }\r\n\r\n    .ws-client-track{\r\n        gap:20px;\r\n        animation-duration:24s;\r\n    }\r\n\r\n    .ws-client-logo{\r\n        width:150px;\r\n        height:72px;\r\n        flex-basis:150px;\r\n    }\r\n\r\n    .ws-client-logo img{\r\n        width:115px;\r\n        height:48px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   MOBILE\r\n========================================= *\/\r\n\r\n@media(max-width:600px){\r\n\r\n    .ws-client-section{\r\n        padding:35px 0 45px;\r\n    }\r\n\r\n    .ws-client-heading{\r\n        margin-bottom:22px;\r\n    }\r\n\r\n    .ws-client-heading h2{\r\n        font-size:22px;\r\n    }\r\n\r\n    .ws-client-slider{\r\n        padding:12px 0 18px;\r\n    }\r\n\r\n    .ws-client-track{\r\n        gap:15px;\r\n        animation-duration:20s;\r\n    }\r\n\r\n    .ws-client-logo{\r\n        width:135px;\r\n        height:65px;\r\n        flex-basis:135px;\r\n\r\n        padding:10px;\r\n        border-radius:10px;\r\n    }\r\n\r\n    .ws-client-logo img{\r\n        width:105px;\r\n        height:43px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   SMALL MOBILE\r\n========================================= *\/\r\n\r\n@media(max-width:400px){\r\n\r\n    .ws-client-heading h2{\r\n        font-size:20px;\r\n    }\r\n\r\n    .ws-client-logo{\r\n        width:125px;\r\n        height:62px;\r\n        flex-basis:125px;\r\n    }\r\n\r\n    .ws-client-logo img{\r\n        width:98px;\r\n        height:40px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================\r\n     TRUSTED BY SECTION\r\n========================================= -->\r\n\r\n<section class=\"ws-client-section\">\r\n\r\n    <!-- HEADING -->\r\n\r\n    <div class=\"ws-client-heading\">\r\n\r\n        <h2>\r\n            Trusted <span>By<\/span> Leading Businesses\r\n        <\/h2>\r\n\r\n        <div class=\"ws-client-line\"><\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         INFINITE LOGO SLIDER\r\n    ====================================== -->\r\n\r\n    <div class=\"ws-client-slider\">\r\n\r\n        <div class=\"ws-client-track\">\r\n\r\n\r\n            <!-- SHOPIFY -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/shopify\/95BF47\"\r\n                    alt=\"Shopify\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- META -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/meta\/0866FF\"\r\n                    alt=\"Meta\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- WORDPRESS -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/wordpress\/21759B\"\r\n                    alt=\"WordPress\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- FIGMA -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/figma\/F24E1E\"\r\n                    alt=\"Figma\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- NIKE -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/nike\/111111\"\r\n                    alt=\"Nike\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- GOOGLE -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/google\/4285F4\"\r\n                    alt=\"Google\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- APPLE -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/apple\/111111\"\r\n                    alt=\"Apple\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================\r\n                 DUPLICATE SET\r\n                 FOR SEAMLESS INFINITE LOOP\r\n            ================================== -->\r\n\r\n\r\n            <!-- SHOPIFY -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/shopify\/95BF47\"\r\n                    alt=\"Shopify\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- META -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/meta\/0866FF\"\r\n                    alt=\"Meta\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- WORDPRESS -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/wordpress\/21759B\"\r\n                    alt=\"WordPress\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- FIGMA -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/figma\/F24E1E\"\r\n                    alt=\"Figma\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- NIKE -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/nike\/111111\"\r\n                    alt=\"Nike\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- GOOGLE -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/google\/4285F4\"\r\n                    alt=\"Google\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- APPLE -->\r\n\r\n            <div class=\"ws-client-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/cdn.simpleicons.org\/apple\/111111\"\r\n                    alt=\"Apple\"\r\n                    loading=\"lazy\">\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8c8ec2 elementor-widget elementor-widget-html\" data-id=\"a8c8ec2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\r\n\r\n\/* =========================================================\r\n   UIXPERTS ABOUT SECTION\r\n========================================================= *\/\r\n\r\n.uix-about {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 90px 5%;\r\n    overflow: hidden;\r\n    background: transparent;\r\n    color: #fff;\r\n    font-family: 'Manrope', sans-serif;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.uix-about-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n========================================================= *\/\r\n\r\n.uix-about-label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n\r\n    color: #F4B01D;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n\r\n    border: 1px solid rgba(244,176,29,.3);\r\n    background: rgba(244,176,29,.05);\r\n\r\n    padding: 9px 18px;\r\n    border-radius: 50px;\r\n\r\n    animation: uixFadeDown .8s ease both;\r\n}\r\n\r\n.uix-about-label span {\r\n    width: 7px;\r\n    height: 7px;\r\n    flex-shrink: 0;\r\n    border-radius: 50%;\r\n\r\n    background: #F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 10px #F4B01D,\r\n        0 0 20px rgba(244,176,29,.5);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n.uix-about-main {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0, 1fr)\r\n        minmax(450px, .95fr);\r\n\r\n    gap: 45px;\r\n    align-items: center;\r\n\r\n    margin-top: 30px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT CONTENT\r\n========================================================= *\/\r\n\r\n.uix-about-left {\r\n    position: relative;\r\n    min-width: 0;\r\n}\r\n\r\n.uix-about-left h2 {\r\n    margin: 0;\r\n\r\n    font-size: clamp(48px, 5.5vw, 78px);\r\n    line-height: .98;\r\n    letter-spacing: -4px;\r\n    font-weight: 800;\r\n\r\n    animation:\r\n        uixFadeUp .9s ease .15s both;\r\n}\r\n\r\n.uix-about-left h2 span {\r\n    display: block;\r\n\r\n    color: #F4B01D;\r\n\r\n    animation:\r\n        uixGoldGlow 4s ease-in-out 1s infinite;\r\n}\r\n\r\n.uix-about-text {\r\n    max-width: 590px;\r\n\r\n    color: #999;\r\n\r\n    font-size: 16px;\r\n    line-height: 1.9;\r\n\r\n    margin: 30px 0;\r\n\r\n    animation:\r\n        uixFadeUp .9s ease .3s both;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SERVICE TAGS\r\n========================================================= *\/\r\n\r\n.uix-about-services {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n\r\n    gap: 9px;\r\n    margin-bottom: 32px;\r\n\r\n    animation:\r\n        uixFadeUp .9s ease .4s both;\r\n}\r\n\r\n.uix-service {\r\n    padding: 9px 15px;\r\n\r\n    border: 1px solid #292929;\r\n    border-radius: 5px;\r\n\r\n    color: #c7c7c7;\r\n    background: transparent;\r\n\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n\r\n    transition:\r\n        color .35s ease,\r\n        border-color .35s ease,\r\n        transform .35s ease,\r\n        box-shadow .35s ease;\r\n}\r\n\r\n.uix-service:hover {\r\n    color: #F4B01D;\r\n\r\n    border-color:\r\n        rgba(244,176,29,.5);\r\n\r\n    transform:\r\n        translateY(-4px);\r\n\r\n    box-shadow:\r\n        0 0 20px\r\n        rgba(244,176,29,.08);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTON\r\n========================================================= *\/\r\n\r\n.uix-about-btn {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    gap: 14px;\r\n\r\n    padding: 15px 25px;\r\n\r\n    text-decoration: none;\r\n\r\n    color: #080808;\r\n    background: #F4B01D;\r\n\r\n    border-radius: 7px;\r\n\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n\r\n    position: relative;\r\n    overflow: hidden;\r\n\r\n    animation:\r\n        uixFadeUp .9s ease .5s both;\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        box-shadow .35s ease;\r\n}\r\n\r\n.uix-about-btn::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: -130%;\r\n\r\n    width: 80%;\r\n    height: 100%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            rgba(255,255,255,.5),\r\n            transparent\r\n        );\r\n\r\n    transform: skewX(-20deg);\r\n\r\n    transition: .7s;\r\n}\r\n\r\n.uix-about-btn:hover {\r\n    transform:\r\n        translateY(-5px);\r\n\r\n    box-shadow:\r\n        0 10px 30px\r\n        rgba(244,176,29,.2),\r\n\r\n        0 0 40px\r\n        rgba(244,176,29,.1);\r\n}\r\n\r\n.uix-about-btn:hover::before {\r\n    left: 150%;\r\n}\r\n\r\n.uix-about-btn i {\r\n    font-style: normal;\r\n    transition: .3s;\r\n}\r\n\r\n.uix-about-btn:hover i {\r\n    transform:\r\n        translateX(6px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT ORBIT AREA\r\n========================================================= *\/\r\n\r\n.uix-orbit-area {\r\n    width: 100%;\r\n    height: 500px;\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    animation:\r\n        uixVisualIn 1.1s ease .25s both;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORBIT RINGS\r\n========================================================= *\/\r\n\r\n.uix-orbit-ring {\r\n    position: absolute;\r\n\r\n    border-radius: 50%;\r\n\r\n    pointer-events: none;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(244,176,29,.18);\r\n}\r\n\r\n.uix-orbit-ring.one {\r\n    width: 450px;\r\n    height: 450px;\r\n\r\n    animation:\r\n        uixRotate 20s linear infinite;\r\n}\r\n\r\n.uix-orbit-ring.two {\r\n    width: 340px;\r\n    height: 340px;\r\n\r\n    border-color:\r\n        rgba(244,176,29,.3);\r\n\r\n    animation:\r\n        uixRotateReverse\r\n        14s linear infinite;\r\n}\r\n\r\n.uix-orbit-ring.three {\r\n    width: 230px;\r\n    height: 230px;\r\n\r\n    border-color:\r\n        rgba(244,176,29,.45);\r\n\r\n    animation:\r\n        uixRotate\r\n        9s linear infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DASHED ORBIT\r\n========================================================= *\/\r\n\r\n.uix-orbit-dashed {\r\n    position: absolute;\r\n\r\n    width: 405px;\r\n    height: 405px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border:\r\n        1px dashed\r\n        rgba(255,255,255,.14);\r\n\r\n    animation:\r\n        uixRotateReverse\r\n        25s linear infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CENTER ORB\r\n========================================================= *\/\r\n\r\n.uix-orb {\r\n    width: 170px;\r\n    height: 170px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    border-radius: 50%;\r\n\r\n    position: relative;\r\n    z-index: 5;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 35% 25%,\r\n            #fff3c8 0%,\r\n            #F4B01D 10%,\r\n            #9c6700 38%,\r\n            #151515 70%,\r\n            #050505 100%\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        rgba(244,176,29,.8);\r\n\r\n    box-shadow:\r\n\r\n        0 0 30px\r\n        rgba(244,176,29,.3),\r\n\r\n        0 0 90px\r\n        rgba(244,176,29,.12),\r\n\r\n        inset 0 0 35px\r\n        rgba(0,0,0,.8);\r\n\r\n    animation:\r\n        uixOrbFloat\r\n        4s ease-in-out infinite;\r\n}\r\n\r\n.uix-orb-inner {\r\n    width: 108px;\r\n    height: 108px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #090909;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(244,176,29,.45);\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    box-shadow:\r\n        inset 0 0 30px\r\n        rgba(244,176,29,.08);\r\n}\r\n\r\n.uix-orb-360 {\r\n    color: #F4B01D;\r\n\r\n    font-size: 32px;\r\n    font-weight: 800;\r\n\r\n    line-height: 1;\r\n}\r\n\r\n.uix-orb-text {\r\n    margin-top: 7px;\r\n\r\n    color: #888;\r\n\r\n    font-size: 8px;\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORBIT DOTS\r\n========================================================= *\/\r\n\r\n.uix-orbit-dots {\r\n    position: absolute;\r\n\r\n    width: 450px;\r\n    height: 450px;\r\n\r\n    border-radius: 50%;\r\n\r\n    animation:\r\n        uixRotate\r\n        11s linear infinite;\r\n}\r\n\r\n.uix-dot {\r\n    position: absolute;\r\n\r\n    width: 10px;\r\n    height: 10px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #F4B01D;\r\n\r\n    box-shadow:\r\n\r\n        0 0 10px #F4B01D,\r\n\r\n        0 0 25px\r\n        rgba(244,176,29,.5);\r\n}\r\n\r\n.uix-dot:nth-child(1) {\r\n    top: 0;\r\n    left: 50%;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n}\r\n\r\n.uix-dot:nth-child(2) {\r\n    right: 0;\r\n    top: 50%;\r\n\r\n    transform:\r\n        translateY(-50%);\r\n}\r\n\r\n.uix-dot:nth-child(3) {\r\n    bottom: 0;\r\n    left: 50%;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n}\r\n\r\n.uix-dot:nth-child(4) {\r\n    left: 0;\r\n    top: 50%;\r\n\r\n    transform:\r\n        translateY(-50%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORBIT LABELS\r\n========================================================= *\/\r\n\r\n.uix-orbit-label {\r\n    position: absolute;\r\n\r\n    padding: 10px 15px;\r\n\r\n    background:\r\n        rgba(8,8,8,.9);\r\n\r\n    backdrop-filter:\r\n        blur(10px);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(244,176,29,.25);\r\n\r\n    border-radius: 7px;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 1px;\r\n\r\n    color: #fff;\r\n\r\n    z-index: 8;\r\n\r\n    box-shadow:\r\n        0 10px 30px\r\n        rgba(0,0,0,.4);\r\n\r\n    white-space: nowrap;\r\n\r\n    transition:\r\n        .35s ease;\r\n}\r\n\r\n.uix-orbit-label strong {\r\n    color: #F4B01D;\r\n\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n}\r\n\r\n.uix-orbit-label:hover {\r\n    transform:\r\n        translateY(-5px)\r\n        scale(1.04);\r\n\r\n    border-color:\r\n        #F4B01D;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL POSITIONS\r\n========================================================= *\/\r\n\r\n.uix-label-design {\r\n    top: 35px;\r\n    left: 5px;\r\n\r\n    animation:\r\n        uixFloat1\r\n        4s ease-in-out infinite;\r\n}\r\n\r\n.uix-label-dev {\r\n    top: 90px;\r\n    right: 0;\r\n\r\n    animation:\r\n        uixFloat2\r\n        5s ease-in-out infinite;\r\n}\r\n\r\n.uix-label-strategy {\r\n    bottom: 65px;\r\n    left: 0;\r\n\r\n    animation:\r\n        uixFloat2\r\n        4.5s ease-in-out infinite;\r\n}\r\n\r\n.uix-label-growth {\r\n    bottom: 35px;\r\n    right: 5px;\r\n\r\n    animation:\r\n        uixFloat1\r\n        5s ease-in-out infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATS\r\n========================================================= *\/\r\n\r\n.uix-stats {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        repeat(4, 1fr);\r\n\r\n    gap: 15px;\r\n\r\n    margin-top: 45px;\r\n\r\n    animation:\r\n        uixFadeUp\r\n        1s ease .65s both;\r\n}\r\n\r\n.uix-stat {\r\n    position: relative;\r\n\r\n    padding: 22px 24px;\r\n\r\n    background:\r\n        rgba(255,255,255,.025);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.12);\r\n\r\n    border-radius: 10px;\r\n\r\n    overflow: hidden;\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        border-color .35s ease,\r\n        background .35s ease;\r\n}\r\n\r\n.uix-stat::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: -100%;\r\n    top: 0;\r\n\r\n    width: 100%;\r\n    height: 1px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            #F4B01D,\r\n            transparent\r\n        );\r\n\r\n    transition: .7s;\r\n}\r\n\r\n.uix-stat:hover {\r\n    transform:\r\n        translateY(-7px);\r\n\r\n    border-color:\r\n        rgba(244,176,29,.45);\r\n\r\n    background:\r\n        rgba(244,176,29,.035);\r\n}\r\n\r\n.uix-stat:hover::before {\r\n    left: 100%;\r\n}\r\n\r\n.uix-stat-number {\r\n    color: #F4B01D;\r\n\r\n    font-size: 34px;\r\n    font-weight: 800;\r\n\r\n    line-height: 1;\r\n}\r\n\r\n.uix-stat-label {\r\n    margin-top: 9px;\r\n\r\n    color: #858585;\r\n\r\n    font-size: 11px;\r\n    line-height: 1.5;\r\n\r\n    text-transform: uppercase;\r\n\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes uixFadeDown {\r\n    from {\r\n        opacity: 0;\r\n        transform:\r\n            translateY(-20px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform:\r\n            translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes uixFadeUp {\r\n    from {\r\n        opacity: 0;\r\n        transform:\r\n            translateY(30px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform:\r\n            translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes uixVisualIn {\r\n    from {\r\n        opacity: 0;\r\n        transform:\r\n            scale(.75);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform:\r\n            scale(1);\r\n    }\r\n}\r\n\r\n@keyframes uixGoldGlow {\r\n    0%,100% {\r\n        text-shadow:\r\n            none;\r\n    }\r\n\r\n    50% {\r\n        text-shadow:\r\n\r\n            0 0 15px\r\n            rgba(244,176,29,.35),\r\n\r\n            0 0 40px\r\n            rgba(244,176,29,.12);\r\n    }\r\n}\r\n\r\n@keyframes uixRotate {\r\n    from {\r\n        transform:\r\n            rotate(0deg);\r\n    }\r\n\r\n    to {\r\n        transform:\r\n            rotate(360deg);\r\n    }\r\n}\r\n\r\n@keyframes uixRotateReverse {\r\n    from {\r\n        transform:\r\n            rotate(360deg);\r\n    }\r\n\r\n    to {\r\n        transform:\r\n            rotate(0deg);\r\n    }\r\n}\r\n\r\n@keyframes uixOrbFloat {\r\n    0%,100% {\r\n        transform:\r\n            translateY(0);\r\n    }\r\n\r\n    50% {\r\n        transform:\r\n            translateY(-12px);\r\n    }\r\n}\r\n\r\n@keyframes uixFloat1 {\r\n    0%,100% {\r\n        transform:\r\n            translateY(0);\r\n    }\r\n\r\n    50% {\r\n        transform:\r\n            translateY(-9px);\r\n    }\r\n}\r\n\r\n@keyframes uixFloat2 {\r\n    0%,100% {\r\n        transform:\r\n            translateY(0);\r\n    }\r\n\r\n    50% {\r\n        transform:\r\n            translateY(9px);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .uix-about {\r\n        padding:\r\n            80px 4%;\r\n    }\r\n\r\n    .uix-about-main {\r\n        grid-template-columns:\r\n            1fr 1fr;\r\n\r\n        gap: 20px;\r\n    }\r\n\r\n    .uix-about-left h2 {\r\n        font-size:\r\n            clamp(45px, 5vw, 65px);\r\n    }\r\n\r\n    .uix-orbit-area {\r\n        transform:\r\n            scale(.88);\r\n\r\n        transform-origin:\r\n            center center;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET \/ MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 850px) {\r\n\r\n    .uix-about {\r\n        padding:\r\n            70px 25px;\r\n    }\r\n\r\n    .uix-about-main {\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n        gap: 20px;\r\n    }\r\n\r\n    .uix-about-left h2 {\r\n        font-size:\r\n            clamp(45px, 9vw, 65px);\r\n    }\r\n\r\n    .uix-about-text {\r\n        max-width: 700px;\r\n    }\r\n\r\n    .uix-orbit-area {\r\n        width: 100%;\r\n        height: 470px;\r\n\r\n        transform:\r\n            scale(.85);\r\n\r\n        margin:\r\n            -15px auto\r\n            -20px;\r\n    }\r\n\r\n    .uix-stats {\r\n        grid-template-columns:\r\n            repeat(2, 1fr);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .uix-about {\r\n        width: 100%;\r\n\r\n        padding:\r\n            60px 18px;\r\n\r\n        overflow: hidden;\r\n    }\r\n\r\n    .uix-about-main {\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        gap: 0;\r\n\r\n        margin-top: 25px;\r\n    }\r\n\r\n    .uix-about-left {\r\n        width: 100%;\r\n    }\r\n\r\n    .uix-about-left h2 {\r\n        font-size:\r\n            clamp(38px, 11vw, 50px);\r\n\r\n        line-height:\r\n            1.02;\r\n\r\n        letter-spacing:\r\n            -2.5px;\r\n    }\r\n\r\n    .uix-about-text {\r\n        font-size: 14px;\r\n\r\n        line-height: 1.75;\r\n\r\n        margin:\r\n            22px 0;\r\n    }\r\n\r\n    .uix-about-services {\r\n        gap: 7px;\r\n\r\n        margin-bottom:\r\n            25px;\r\n    }\r\n\r\n    .uix-service {\r\n        font-size: 9px;\r\n\r\n        padding:\r\n            7px 10px;\r\n    }\r\n\r\n    .uix-about-btn {\r\n        padding:\r\n            13px 20px;\r\n\r\n        font-size:\r\n            12px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE ORBIT\r\n    ===================================================== *\/\r\n\r\n    .uix-orbit-area {\r\n        width: 100%;\r\n\r\n        height: 350px;\r\n\r\n        margin:\r\n            10px auto\r\n            0;\r\n\r\n        transform:\r\n            none;\r\n\r\n        overflow: visible;\r\n    }\r\n\r\n    .uix-orbit-ring.one {\r\n        width: min(310px, 82vw);\r\n        height: min(310px, 82vw);\r\n    }\r\n\r\n    .uix-orbit-ring.two {\r\n        width: min(235px, 63vw);\r\n        height: min(235px, 63vw);\r\n    }\r\n\r\n    .uix-orbit-ring.three {\r\n        width: min(160px, 43vw);\r\n        height: min(160px, 43vw);\r\n    }\r\n\r\n    .uix-orbit-dashed {\r\n        width: min(280px, 75vw);\r\n        height: min(280px, 75vw);\r\n    }\r\n\r\n    .uix-orbit-dots {\r\n        width: min(310px, 82vw);\r\n        height: min(310px, 82vw);\r\n    }\r\n\r\n    .uix-dot {\r\n        width: 7px;\r\n        height: 7px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE ORB\r\n    ===================================================== *\/\r\n\r\n    .uix-orb {\r\n        width: 125px;\r\n        height: 125px;\r\n    }\r\n\r\n    .uix-orb-inner {\r\n        width: 82px;\r\n        height: 82px;\r\n    }\r\n\r\n    .uix-orb-360 {\r\n        font-size: 23px;\r\n    }\r\n\r\n    .uix-orb-text {\r\n        font-size: 6px;\r\n\r\n        letter-spacing:\r\n            1.5px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE LABELS\r\n    ===================================================== *\/\r\n\r\n    .uix-orbit-label {\r\n        padding:\r\n            7px 10px;\r\n\r\n        font-size: 7px;\r\n\r\n        letter-spacing:\r\n            .7px;\r\n    }\r\n\r\n    .uix-orbit-label strong {\r\n        margin-bottom:\r\n            2px;\r\n\r\n        font-size: 8px;\r\n    }\r\n\r\n    .uix-label-design {\r\n        top: 25px;\r\n        left: 2%;\r\n    }\r\n\r\n    .uix-label-dev {\r\n        top: 55px;\r\n        right: 2%;\r\n    }\r\n\r\n    .uix-label-strategy {\r\n        bottom: 45px;\r\n        left: 1%;\r\n    }\r\n\r\n    .uix-label-growth {\r\n        bottom: 25px;\r\n        right: 2%;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE STATS\r\n    ===================================================== *\/\r\n\r\n    .uix-stats {\r\n        width: 100%;\r\n\r\n        grid-template-columns:\r\n            1fr 1fr;\r\n\r\n        gap: 9px;\r\n\r\n        margin-top:\r\n            20px;\r\n    }\r\n\r\n    .uix-stat {\r\n        padding:\r\n            17px 15px;\r\n\r\n        border-radius:\r\n            9px;\r\n    }\r\n\r\n    .uix-stat-number {\r\n        font-size:\r\n            25px;\r\n    }\r\n\r\n    .uix-stat-label {\r\n        font-size:\r\n            8px;\r\n\r\n        letter-spacing:\r\n            .7px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .uix-about {\r\n        padding:\r\n            50px 14px;\r\n    }\r\n\r\n    .uix-about-left h2 {\r\n        font-size:\r\n            36px;\r\n\r\n        letter-spacing:\r\n            -2px;\r\n    }\r\n\r\n    .uix-about-text {\r\n        font-size:\r\n            13px;\r\n    }\r\n\r\n    .uix-orbit-area {\r\n        height:\r\n            320px;\r\n    }\r\n\r\n    .uix-orbit-label {\r\n        padding:\r\n            6px 8px;\r\n\r\n        font-size:\r\n            6.5px;\r\n    }\r\n\r\n    .uix-orbit-label strong {\r\n        font-size:\r\n            7px;\r\n    }\r\n\r\n    .uix-orb {\r\n        width:\r\n            110px;\r\n\r\n        height:\r\n            110px;\r\n    }\r\n\r\n    .uix-orb-inner {\r\n        width:\r\n            72px;\r\n\r\n        height:\r\n            72px;\r\n    }\r\n\r\n    .uix-orb-360 {\r\n        font-size:\r\n            20px;\r\n    }\r\n\r\n    .uix-stat {\r\n        padding:\r\n            15px 12px;\r\n    }\r\n\r\n    .uix-stat-number {\r\n        font-size:\r\n            22px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     UIXPERTS ABOUT\r\n========================================================= -->\r\n\r\n<section class=\"uix-about\">\r\n\r\n    <div class=\"uix-about-container\">\r\n\r\n\r\n        <!-- LABEL -->\r\n\r\n        <div class=\"uix-about-label\">\r\n\r\n            <span><\/span>\r\n\r\n            ABOUT WEBNSOFTS\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- MAIN -->\r\n\r\n        <div class=\"uix-about-main\">\r\n\r\n\r\n            <!-- LEFT -->\r\n\r\n            <div class=\"uix-about-left\">\r\n\r\n                <h2>\r\n\r\n                    We Don't Just\r\n\r\n                    <span>\r\n                        Build Websites.\r\n                    <\/span>\r\n\r\n                <\/h2>\r\n\r\n\r\n                <p class=\"uix-about-text\">\r\n\r\n                    We build digital experiences that move brands forward.\r\n                    From high-performance websites and premium UI\/UX design\r\n                    to powerful digital marketing strategies, we combine\r\n                    creativity, technology, and strategy to create digital\r\n                    solutions that deliver real business growth.\r\n\r\n                <\/p>\r\n\r\n\r\n                <!-- SERVICES -->\r\n\r\n                <div class=\"uix-about-services\">\r\n\r\n                    <div class=\"uix-service\">\r\n                        WORDPRESS\r\n                    <\/div>\r\n\r\n                    <div class=\"uix-service\">\r\n                        SHOPIFY\r\n                    <\/div>\r\n\r\n                    <div class=\"uix-service\">\r\n                        UI\/UX\r\n                    <\/div>\r\n\r\n                    <div class=\"uix-service\">\r\n                        GRAPHIC DESIGN\r\n                    <\/div>\r\n\r\n                    <div class=\"uix-service\">\r\n                        SEO\r\n                    <\/div>\r\n\r\n                    <div class=\"uix-service\">\r\n                        DIGITAL MARKETING\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- BUTTON -->\r\n\r\n                <a\r\n                    href=\"#services\"\r\n                    class=\"uix-about-btn\">\r\n\r\n                    Explore Our Work\r\n\r\n                    <i>\r\n                        \u2192\r\n                    <\/i>\r\n\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 RIGHT ORBIT\r\n            ================================================= -->\r\n\r\n            <div class=\"uix-orbit-area\">\r\n\r\n\r\n                <!-- RINGS -->\r\n\r\n                <div\r\n                    class=\"uix-orbit-ring one\">\r\n                <\/div>\r\n\r\n                <div\r\n                    class=\"uix-orbit-ring two\">\r\n                <\/div>\r\n\r\n                <div\r\n                    class=\"uix-orbit-ring three\">\r\n                <\/div>\r\n\r\n                <div\r\n                    class=\"uix-orbit-dashed\">\r\n                <\/div>\r\n\r\n\r\n                <!-- DOTS -->\r\n\r\n                <div class=\"uix-orbit-dots\">\r\n\r\n                    <div class=\"uix-dot\"><\/div>\r\n\r\n                    <div class=\"uix-dot\"><\/div>\r\n\r\n                    <div class=\"uix-dot\"><\/div>\r\n\r\n                    <div class=\"uix-dot\"><\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- CENTER -->\r\n\r\n                <div class=\"uix-orb\">\r\n\r\n                    <div class=\"uix-orb-inner\">\r\n\r\n                        <div class=\"uix-orb-360\">\r\n                            360\u00b0\r\n                        <\/div>\r\n\r\n                        <div class=\"uix-orb-text\">\r\n                            Digital Growth\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- LABELS -->\r\n\r\n                <div\r\n                    class=\"uix-orbit-label\r\n                           uix-label-design\">\r\n\r\n                    <strong>\r\n                        DESIGN\r\n                    <\/strong>\r\n\r\n                    Creative Identity\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"uix-orbit-label\r\n                           uix-label-dev\">\r\n\r\n                    <strong>\r\n                        DEVELOPMENT\r\n                    <\/strong>\r\n\r\n                    Digital Experience\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"uix-orbit-label\r\n                           uix-label-strategy\">\r\n\r\n                    <strong>\r\n                        STRATEGY\r\n                    <\/strong>\r\n\r\n                    Smart Solutions\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"uix-orbit-label\r\n                           uix-label-growth\">\r\n\r\n                    <strong>\r\n                        GROWTH\r\n                    <\/strong>\r\n\r\n                    Real Results\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             STATS\r\n        ================================================= -->\r\n\r\n        <div class=\"uix-stats\">\r\n\r\n\r\n            <div class=\"uix-stat\">\r\n\r\n                <div class=\"uix-stat-number\">\r\n                    04+\r\n                <\/div>\r\n\r\n                <div class=\"uix-stat-label\">\r\n                    Years Experience\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"uix-stat\">\r\n\r\n                <div class=\"uix-stat-number\">\r\n                    999+\r\n                <\/div>\r\n\r\n                <div class=\"uix-stat-label\">\r\n                    Projects Delivered\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"uix-stat\">\r\n\r\n                <div class=\"uix-stat-number\">\r\n                    1000+\r\n                <\/div>\r\n\r\n                <div class=\"uix-stat-label\">\r\n                    Happy Clients\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"uix-stat\">\r\n\r\n                <div class=\"uix-stat-number\">\r\n                    4.9\u2605\r\n                <\/div>\r\n\r\n                <div class=\"uix-stat-label\">\r\n                    Client Rating\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d41e7fb elementor-widget elementor-widget-html\" data-id=\"d41e7fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n\/* =========================================================\r\n   WEBNSOFT SERVICES SECTION\r\n========================================================= *\/\r\n\r\n.webnsoft-section{\r\n    background:#0B0B0B;\r\n    color:#ffffff;\r\n    font-family:'Poppins',sans-serif;\r\n    padding:80px 20px;\r\n    text-align:center;\r\n    position:relative;\r\n    overflow:hidden;\r\n}\r\n\r\n\/* YELLOW BACKGROUND GLOW REMOVED *\/\r\n\r\n.webnsoft-container{\r\n    max-width:1100px;\r\n    margin:0 auto;\r\n    position:relative;\r\n    z-index:2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAG\r\n========================================================= *\/\r\n\r\n.tagline{\r\n    color:#F4B01D;\r\n    background:rgba(244,176,29,.1);\r\n    padding:8px 20px;\r\n    border-radius:50px;\r\n    font-size:13px;\r\n    font-weight:600;\r\n    display:inline-block;\r\n    margin-bottom:20px;\r\n    border:1px solid rgba(244,176,29,.3);\r\n\r\n    animation:\r\n        fadeDown .8s ease-out both,\r\n        tagPulse 3s ease-in-out 1s infinite;\r\n\r\n    transition:all .3s ease;\r\n}\r\n\r\n.tagline:hover{\r\n    background:rgba(244,176,29,.18);\r\n    border-color:#F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 10px rgba(244,176,29,.4),\r\n        0 0 25px rgba(244,176,29,.15);\r\n\r\n    transform:translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADING\r\n========================================================= *\/\r\n\r\n.webnsoft-section h2{\r\n    font-size:42px;\r\n    font-weight:700;\r\n    margin:0 0 15px;\r\n    line-height:1.2;\r\n\r\n    animation:\r\n        fadeUp .9s ease-out .15s both;\r\n}\r\n\r\n.webnsoft-section h2 span{\r\n    color:#F4B01D;\r\n    display:inline-block;\r\n    animation:titleGlow 3s ease-in-out 1s infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUB TEXT\r\n========================================================= *\/\r\n\r\n.sub-text{\r\n    color:#A0A0A0;\r\n    font-size:16px;\r\n    max-width:700px;\r\n    margin:0 auto 50px;\r\n\r\n    animation:\r\n        fadeUp .9s ease-out .3s both;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.grid-container{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:25px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SERVICE CARD\r\n========================================================= *\/\r\n\r\n.service-card{\r\n    background:linear-gradient(\r\n        145deg,\r\n        #131313,\r\n        #0f0f0f\r\n    );\r\n\r\n    border:1px solid #222;\r\n    border-radius:20px;\r\n    padding:40px;\r\n    text-align:left;\r\n\r\n    position:relative;\r\n    overflow:hidden;\r\n\r\n    transition:\r\n        transform .4s ease,\r\n        border-color .4s ease,\r\n        box-shadow .4s ease,\r\n        background .4s ease;\r\n\r\n    animation:cardReveal .9s ease-out both;\r\n}\r\n\r\n.service-card:nth-child(1){\r\n    animation-delay:.35s;\r\n}\r\n\r\n.service-card:nth-child(2){\r\n    animation-delay:.5s;\r\n}\r\n\r\n.service-card:nth-child(3){\r\n    animation-delay:.65s;\r\n}\r\n\r\n.service-card:nth-child(4){\r\n    animation-delay:.8s;\r\n}\r\n\r\n\r\n\/* CARD SHINE *\/\r\n\r\n.service-card::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    top:0;\r\n    left:-120%;\r\n    width:80%;\r\n    height:100%;\r\n\r\n    background:linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(244,176,29,.08),\r\n        transparent\r\n    );\r\n\r\n    transform:skewX(-20deg);\r\n    transition:.8s;\r\n    pointer-events:none;\r\n}\r\n\r\n\r\n\/* CORNER GLOW *\/\r\n\r\n.service-card::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:120px;\r\n    height:120px;\r\n    right:-60px;\r\n    top:-60px;\r\n\r\n    background:radial-gradient(\r\n        circle,\r\n        rgba(244,176,29,.18),\r\n        transparent 70%\r\n    );\r\n\r\n    opacity:0;\r\n    transition:.5s;\r\n}\r\n\r\n\r\n\/* HOVER *\/\r\n\r\n.service-card:hover{\r\n    transform:translateY(-8px) scale(1.01);\r\n    border-color:#F4B01D;\r\n\r\n    background:linear-gradient(\r\n        145deg,\r\n        #171717,\r\n        #111111\r\n    );\r\n\r\n    box-shadow:\r\n        0 10px 30px rgba(0,0,0,.6),\r\n        0 0 10px rgba(244,176,29,.4),\r\n        0 0 25px rgba(244,176,29,.2),\r\n        0 0 50px rgba(244,176,29,.08);\r\n}\r\n\r\n.service-card:hover::before{\r\n    left:130%;\r\n}\r\n\r\n.service-card:hover::after{\r\n    opacity:1;\r\n}\r\n\r\n\r\n\/* CARD NUMBER *\/\r\n\r\n.card-icon{\r\n    font-size:24px;\r\n    color:#F4B01D;\r\n    font-weight:bold;\r\n    margin-bottom:20px;\r\n    display:block;\r\n    transition:all .3s ease;\r\n}\r\n\r\n.service-card:hover .card-icon{\r\n    transform:translateX(5px);\r\n\r\n    text-shadow:\r\n        0 0 8px rgba(244,176,29,.7),\r\n        0 0 20px rgba(244,176,29,.3);\r\n}\r\n\r\n\r\n\/* CARD HEADING *\/\r\n\r\n.service-card h3{\r\n    font-size:28px;\r\n    margin:0 0 15px;\r\n    transition:all .3s ease;\r\n}\r\n\r\n.service-card:hover h3{\r\n    color:#F4B01D;\r\n\r\n    text-shadow:\r\n        0 0 15px rgba(244,176,29,.2);\r\n}\r\n\r\n\r\n\/* CARD PARAGRAPH *\/\r\n\r\n.service-card p{\r\n    color:#A0A0A0;\r\n    font-size:14px;\r\n    line-height:1.6;\r\n    margin:0 0 25px;\r\n    transition:color .3s ease;\r\n}\r\n\r\n.service-card:hover p{\r\n    color:#c4c4c4;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAGS\r\n========================================================= *\/\r\n\r\n.tags-wrapper{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:10px;\r\n    margin-bottom:30px;\r\n}\r\n\r\n.service-tag{\r\n    background:#1A1A1A;\r\n    border:1px solid #333;\r\n    padding:6px 14px;\r\n    border-radius:6px;\r\n    font-size:12px;\r\n    color:#D1D1D1;\r\n\r\n    transition:\r\n        color .3s ease,\r\n        border-color .3s ease,\r\n        background .3s ease,\r\n        box-shadow .3s ease,\r\n        transform .3s ease;\r\n}\r\n\r\n.service-tag:hover{\r\n    color:#F4B01D;\r\n    background:rgba(244,176,29,.08);\r\n    border-color:#F4B01D;\r\n    transform:translateY(-3px);\r\n\r\n    box-shadow:\r\n        0 0 7px rgba(244,176,29,.4),\r\n        0 0 18px rgba(244,176,29,.15);\r\n\r\n    text-shadow:\r\n        0 0 8px rgba(244,176,29,.4);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTON\r\n========================================================= *\/\r\n\r\n.explore-btn{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    text-decoration:none;\r\n    color:#F4B01D;\r\n    font-weight:600;\r\n    font-size:15px;\r\n\r\n    border:1px solid rgba(244,176,29,.4);\r\n    padding:12px 25px;\r\n    border-radius:8px;\r\n\r\n    transition:\r\n        background .35s ease,\r\n        color .35s ease,\r\n        transform .35s ease,\r\n        box-shadow .35s ease;\r\n\r\n    position:relative;\r\n    overflow:hidden;\r\n}\r\n\r\n.explore-btn::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    top:0;\r\n    left:-120%;\r\n    width:100%;\r\n    height:100%;\r\n\r\n    background:linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(255,255,255,.35),\r\n        transparent\r\n    );\r\n\r\n    transition:.6s;\r\n}\r\n\r\n.explore-btn:hover::before{\r\n    left:120%;\r\n}\r\n\r\n.explore-btn:hover{\r\n    background:#F4B01D;\r\n    color:#0B0B0B;\r\n    transform:translateY(-4px);\r\n\r\n    box-shadow:\r\n        0 5px 15px rgba(244,176,29,.35),\r\n        0 0 25px rgba(244,176,29,.2);\r\n}\r\n\r\n.explore-btn span{\r\n    margin-left:10px;\r\n    transition:transform .3s ease;\r\n}\r\n\r\n.explore-btn:hover span{\r\n    transform:translateX(6px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes fadeDown{\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(-20px);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes fadeUp{\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(25px);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes cardReveal{\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(45px) scale(.96);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0) scale(1);\r\n    }\r\n}\r\n\r\n@keyframes tagPulse{\r\n    0%,100%{\r\n        box-shadow:0 0 0 rgba(244,176,29,0);\r\n    }\r\n\r\n    50%{\r\n        box-shadow:0 0 20px rgba(244,176,29,.12);\r\n    }\r\n}\r\n\r\n@keyframes titleGlow{\r\n    0%,100%{\r\n        text-shadow:0 0 0 rgba(244,176,29,0);\r\n    }\r\n\r\n    50%{\r\n        text-shadow:\r\n            0 0 10px rgba(244,176,29,.35),\r\n            0 0 25px rgba(244,176,29,.12);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:850px){\r\n\r\n    .webnsoft-section{\r\n        padding:60px 20px;\r\n    }\r\n\r\n    .grid-container{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .webnsoft-section h2{\r\n        font-size:32px;\r\n    }\r\n\r\n    .service-card{\r\n        padding:30px;\r\n    }\r\n\r\n}\r\n\r\n\r\n@media(max-width:600px){\r\n\r\n    .webnsoft-section h2{\r\n        font-size:28px;\r\n    }\r\n\r\n    .sub-text{\r\n        font-size:14px;\r\n        margin-bottom:35px;\r\n    }\r\n\r\n    .service-card{\r\n        padding:25px;\r\n        border-radius:16px;\r\n    }\r\n\r\n    .service-card h3{\r\n        font-size:24px;\r\n    }\r\n\r\n    .explore-btn{\r\n        font-size:13px;\r\n        padding:11px 18px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     WEBNSOFT SERVICES\r\n========================================================= -->\r\n\r\n<section class=\"webnsoft-section\">\r\n\r\n    <div class=\"webnsoft-container\">\r\n\r\n        <span class=\"tagline\">\r\n            CHOOSE YOUR SOLUTIONS\r\n        <\/span>\r\n\r\n        <h2>\r\n            Webnsoft \u2014 <span>Creative Agency<\/span> For Your Brand\r\n        <\/h2>\r\n\r\n        <p class=\"sub-text\">\r\n            We provide end-to-end design and development solutions\r\n            tailored to elevate your business presence in the digital world.\r\n        <\/p>\r\n\r\n\r\n        <div class=\"grid-container\">\r\n\r\n\r\n            <!-- 01 -->\r\n\r\n            <div class=\"service-card\">\r\n\r\n                <span class=\"card-icon\">\r\n                    01.\r\n                <\/span>\r\n\r\n                <h3>\r\n                    Website Development\r\n                <\/h3>\r\n\r\n                <p>\r\n                    We build fast, secure, and scalable websites designed\r\n                    to convert visitors into customers.\r\n                <\/p>\r\n\r\n                <div class=\"tags-wrapper\">\r\n\r\n                    <span class=\"service-tag\">\r\n                        Business Websites\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        E-commerce Stores\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        WordPress Development\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        UI\/UX Design\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Speed Optimization\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Mobile Responsive\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n                <a href=\"#\" class=\"explore-btn\">\r\n                    Explore Web Services\r\n                    <span>\u2192<\/span>\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- 02 -->\r\n\r\n            <div class=\"service-card\">\r\n\r\n                <span class=\"card-icon\">\r\n                    02.\r\n                <\/span>\r\n\r\n                <h3>\r\n                    SEO Optimization\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Get your website ranked and bring organic traffic\r\n                    that actually converts.\r\n                <\/p>\r\n\r\n                <div class=\"tags-wrapper\">\r\n\r\n                    <span class=\"service-tag\">\r\n                        On-Page SEO\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Technical SEO\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Keyword Research\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Website Audit\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Local SEO\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n                <a href=\"#\" class=\"explore-btn\">\r\n                    Explore SEO Services\r\n                    <span>\u2192<\/span>\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- 03 -->\r\n\r\n            <div class=\"service-card\">\r\n\r\n                <span class=\"card-icon\">\r\n                    03.\r\n                <\/span>\r\n\r\n                <h3>\r\n                    Digital Marketing\r\n                <\/h3>\r\n\r\n                <p>\r\n                    We don\u2019t just bring traffic, we bring the right audience.\r\n                <\/p>\r\n\r\n                <div class=\"tags-wrapper\">\r\n\r\n                    <span class=\"service-tag\">\r\n                        Social Media Marketing\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Paid Ads\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Lead Generation\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Content Strategy\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n                <a href=\"#\" class=\"explore-btn\">\r\n                    Explore Marketing\r\n                    <span>\u2192<\/span>\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- 04 -->\r\n\r\n            <div class=\"service-card\">\r\n\r\n                <span class=\"card-icon\">\r\n                    04.\r\n                <\/span>\r\n\r\n                <h3>\r\n                    Design & Branding\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Clean and modern designs that make your brand look\r\n                    professional.\r\n                <\/p>\r\n\r\n                <div class=\"tags-wrapper\">\r\n\r\n                    <span class=\"service-tag\">\r\n                        Logo Design\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Brand Identity\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Social Media Posts\r\n                    <\/span>\r\n\r\n                    <span class=\"service-tag\">\r\n                        Banners & Creatives\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n                <a href=\"#\" class=\"explore-btn\">\r\n                    Explore Design\r\n                    <span>\u2192<\/span>\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a2ecf7a elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"a2ecf7a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72eafb7 elementor-widget elementor-widget-html\" data-id=\"72eafb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n    .ws-services-section {\r\n        background-color: #0B0B0B;\r\n        color: #ffffff;\r\n        font-family: 'Poppins', sans-serif;\r\n        padding: 100px 5%;\r\n        text-align: left;\r\n    }\r\n\r\n    .ws-container {\r\n        max-width: 1250px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .ws-tag {\r\n        color: #F4B01D;\r\n        background: rgba(244, 176, 29, 0.1);\r\n        padding: 6px 18px;\r\n        border-radius: 50px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        border: 1px solid rgba(244, 176, 29, 0.3);\r\n        display: inline-block;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .ws-title {\r\n        font-size: 48px;\r\n        font-weight: 700;\r\n        margin-bottom: 15px;\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .ws-subtitle {\r\n        color: #888;\r\n        font-size: 16px;\r\n        max-width: 600px;\r\n        margin-bottom: 60px;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .ws-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 25px;\r\n    }\r\n\r\n    .ws-card {\r\n        background: #111111;\r\n        border: 1px solid #222;\r\n        padding: 40px 30px;\r\n        border-radius: 15px;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        cursor: pointer;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* Hover Animation *\/\r\n    .ws-card:hover {\r\n        border-color: #F4B01D;\r\n        transform: translateY(-10px);\r\n        background: #161616;\r\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    .ws-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: radial-gradient(circle at top right, rgba(244,176,29,0.05), transparent);\r\n        opacity: 0;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .ws-card:hover::before {\r\n        opacity: 1;\r\n    }\r\n\r\n    .ws-icon {\r\n        font-size: 30px;\r\n        margin-bottom: 25px;\r\n        display: block;\r\n    }\r\n\r\n    .ws-card h3 {\r\n        font-size: 22px;\r\n        font-weight: 600;\r\n        margin-bottom: 15px;\r\n        color: #fff;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .ws-card:hover h3 {\r\n        color: #F4B01D;\r\n    }\r\n\r\n    .ws-card p {\r\n        color: #777;\r\n        font-size: 14px;\r\n        line-height: 1.7;\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    \/* Status Tags Style from SS *\/\r\n    .ws-status-tags {\r\n        display: flex;\r\n        gap: 10px;\r\n    }\r\n\r\n    .ws-status {\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        padding: 4px 10px;\r\n        border-radius: 4px;\r\n        background: rgba(255,255,255,0.05);\r\n        color: #555;\r\n        border: 1px solid #222;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .ws-status.active {\r\n        color: #F4B01D;\r\n        border-color: rgba(244,176,29,0.3);\r\n    }\r\n\r\n    \/* Responsive Design *\/\r\n    @media (max-width: 1024px) {\r\n        .ws-grid { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .ws-grid { grid-template-columns: 1fr; }\r\n        .ws-title { font-size: 36px; }\r\n        .ws-services-section { padding: 60px 5%; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"ws-services-section\">\r\n    <div class=\"ws-container\">\r\n        <span class=\"ws-tag\">Our Expertise<\/span>\r\n        <h2 class=\"ws-title\">Everything Your Brand Needs<\/h2>\r\n        <p class=\"ws-subtitle\">A full suite of creative and technical services designed to scale your business and dominate the market.<\/p>\r\n\r\n        <div class=\"ws-grid\">\r\n            <!-- Service 1 -->\r\n            <div class=\"ws-card\">\r\n                <span class=\"ws-icon\">\ud83c\udfa8<\/span>\r\n                <h3>Logo Design<\/h3>\r\n                <p>Crafting memorable visual identities that capture your brand's essence and leave a lasting impression.<\/p>\r\n                <div class=\"ws-status-tags\">\r\n                    <span class=\"ws-status active\">Premium<\/span>\r\n                    <span class=\"ws-status\">Vector<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Service 2 -->\r\n            <div class=\"ws-card\">\r\n                <span class=\"ws-icon\">\ud83d\udc8e<\/span>\r\n                <h3>Branding Design<\/h3>\r\n                <p>Complete brand guidelines, color palettes, and typography that ensure consistency across all platforms.<\/p>\r\n                <div class=\"ws-status-tags\">\r\n                    <span class=\"ws-status active\">Identity<\/span>\r\n                    <span class=\"ws-status\">Strategy<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Service 3 -->\r\n            <div class=\"ws-card\">\r\n                <span class=\"ws-icon\">\ud83d\udcbb<\/span>\r\n                <h3>Website Dev<\/h3>\r\n                <p>High-performance, responsive websites built with the latest technologies to convert visitors into customers.<\/p>\r\n                <div class=\"ws-status-tags\">\r\n                    <span class=\"ws-status active\">MERN<\/span>\r\n                    <span class=\"ws-status\">WordPress<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Service 4 -->\r\n            <div class=\"ws-card\">\r\n                <span class=\"ws-icon\">\ud83d\udcc4<\/span>\r\n                <h3>Company Profile<\/h3>\r\n                <p>Professional business profiles that showcase your story, values, and services to potential investors and clients.<\/p>\r\n                <div class=\"ws-status-tags\">\r\n                    <span class=\"ws-status active\">Corporate<\/span>\r\n                    <span class=\"ws-status\">Design<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Service 5 -->\r\n            <div class=\"ws-card\">\r\n                <span class=\"ws-icon\">\ud83d\ude80<\/span>\r\n                <h3>Social Media<\/h3>\r\n                <p>Strategic social media marketing and management to grow your community and increase engagement.<\/p>\r\n                <div class=\"ws-status-tags\">\r\n                    <span class=\"ws-status active\">Growth<\/span>\r\n                    <span class=\"ws-status\">Ads<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Service 6 -->\r\n            <div class=\"ws-card\">\r\n                <span class=\"ws-icon\">\ud83d\udce2<\/span>\r\n                <h3>Flyer | Banner<\/h3>\r\n                <p>Eye-catching print and digital marketing materials including flyers, posters, and web banners.<\/p>\r\n                <div class=\"ws-status-tags\">\r\n                    <span class=\"ws-status active\">Print<\/span>\r\n                    <span class=\"ws-status\">Digital<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ec0f595 e-flex e-con-boxed e-con e-parent\" data-id=\"ec0f595\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb9b54c elementor-widget elementor-widget-html\" data-id=\"cb9b54c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n\/* =========================================\r\n   GLOBAL FIX - REMOVE HORIZONTAL WHITE SPACE\r\n========================================= *\/\r\n\r\nhtml,\r\nbody {\r\n    max-width: 100%;\r\n    overflow-x: hidden !important;\r\n}\r\n\r\n.ws-pricing-section,\r\n.ws-pricing-section *,\r\n.ws-pricing-section *::before,\r\n.ws-pricing-section *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* =========================================\r\n   PRICING SECTION\r\n========================================= *\/\r\n\r\n.ws-pricing-section {\r\n    background: #0B0B0B;\r\n    color: #ffffff;\r\n    font-family: 'Poppins', sans-serif;\r\n\r\n    width: 100%;\r\n    max-width: 100%;\r\n\r\n    margin: 0;\r\n    padding: 110px 30px 120px;\r\n\r\n    text-align: center;\r\n    position: relative;\r\n\r\n    overflow: hidden !important;\r\n}\r\n\r\n\/* =========================================\r\n   BACKGROUND GLOW\r\n========================================= *\/\r\n\r\n.ws-pricing-section::before {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    width: 600px;\r\n    height: 600px;\r\n\r\n    left: 50%;\r\n    top: 45%;\r\n\r\n    transform: translate(-50%, -50%);\r\n\r\n    background: radial-gradient(\r\n        circle,\r\n        rgba(244,176,29,0.07) 0%,\r\n        rgba(244,176,29,0.025) 35%,\r\n        transparent 70%\r\n    );\r\n\r\n    pointer-events: none;\r\n    z-index: 0;\r\n}\r\n\r\n\/* =========================================\r\n   CONTAINER\r\n========================================= *\/\r\n\r\n.ws-pricing-container {\r\n    width: 100%;\r\n    max-width: 1250px;\r\n\r\n    margin: 0 auto;\r\n\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n\/* =========================================\r\n   HEADER\r\n========================================= *\/\r\n\r\n.ws-pricing-header {\r\n    text-align: center;\r\n    margin-bottom: 65px;\r\n}\r\n\r\n.ws-pricing-tag {\r\n    display: inline-block;\r\n\r\n    color: #F4B01D;\r\n\r\n    background: rgba(244,176,29,0.06);\r\n\r\n    border: 1px solid rgba(244,176,29,0.35);\r\n\r\n    padding: 7px 18px;\r\n\r\n    border-radius: 50px;\r\n\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.ws-pricing-tag:hover {\r\n    background: rgba(244,176,29,0.12);\r\n\r\n    box-shadow:\r\n        0 0 15px rgba(244,176,29,0.15);\r\n}\r\n\r\n.ws-pricing-title {\r\n    font-size: clamp(34px, 5vw, 52px);\r\n\r\n    line-height: 1.15;\r\n\r\n    font-weight: 700;\r\n\r\n    margin: 0 0 18px;\r\n\r\n    letter-spacing: -1px;\r\n}\r\n\r\n.ws-pricing-title span {\r\n    color: #F4B01D;\r\n\r\n    text-shadow:\r\n        0 0 20px rgba(244,176,29,0.18);\r\n}\r\n\r\n.ws-pricing-description {\r\n    max-width: 650px;\r\n\r\n    margin: 0 auto;\r\n\r\n    color: #888;\r\n\r\n    font-size: 15px;\r\n\r\n    line-height: 1.7;\r\n}\r\n\r\n\/* =========================================\r\n   PRICING GRID\r\n========================================= *\/\r\n\r\n.ws-pricing-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        repeat(3, minmax(0, 1fr));\r\n\r\n    gap: 25px;\r\n\r\n    align-items: stretch;\r\n\r\n    width: 100%;\r\n}\r\n\r\n\/* =========================================\r\n   PRICE CARD\r\n========================================= *\/\r\n\r\n.ws-price-card {\r\n    position: relative;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #151515 0%,\r\n            #111111 100%\r\n        );\r\n\r\n    border: 1px solid #252525;\r\n\r\n    border-radius: 18px;\r\n\r\n    padding: 42px 35px 35px;\r\n\r\n    text-align: left;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    min-width: 0;\r\n    width: 100%;\r\n\r\n    transition:\r\n        transform 0.4s ease,\r\n        border-color 0.4s ease,\r\n        box-shadow 0.4s ease,\r\n        background 0.4s ease;\r\n\r\n    animation: pricingFadeUp 0.8s ease both;\r\n}\r\n\r\n\/* =========================================\r\n   CARD ENTRANCE ANIMATION\r\n========================================= *\/\r\n\r\n.ws-price-card:nth-child(1) {\r\n    animation-delay: 0.1s;\r\n}\r\n\r\n.ws-price-card:nth-child(2) {\r\n    animation-delay: 0.2s;\r\n}\r\n\r\n.ws-price-card:nth-child(3) {\r\n    animation-delay: 0.3s;\r\n}\r\n\r\n@keyframes pricingFadeUp {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(25px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\/* =========================================\r\n   CARD HOVER\r\n========================================= *\/\r\n\r\n.ws-price-card:hover {\r\n\r\n    transform: translateY(-8px);\r\n\r\n    border-color:\r\n        rgba(244,176,29,0.45);\r\n\r\n    box-shadow:\r\n        0 18px 45px rgba(0,0,0,0.45),\r\n        0 0 25px rgba(244,176,29,0.05);\r\n}\r\n\r\n\/* =========================================\r\n   FEATURED CARD\r\n========================================= *\/\r\n\r\n.ws-price-card.featured {\r\n\r\n    border-color:\r\n        rgba(244,176,29,0.55);\r\n\r\n    box-shadow:\r\n        0 15px 40px rgba(0,0,0,0.45);\r\n}\r\n\r\n.ws-price-card.featured:hover {\r\n\r\n    border-color: #F4B01D;\r\n\r\n    box-shadow:\r\n        0 20px 55px rgba(0,0,0,0.55),\r\n        0 0 30px rgba(244,176,29,0.08);\r\n}\r\n\r\n\/* =========================================\r\n   MOST POPULAR BADGE\r\n========================================= *\/\r\n\r\n.ws-badge {\r\n\r\n    position: absolute;\r\n\r\n    top: -14px;\r\n    left: 50%;\r\n\r\n    transform: translateX(-50%);\r\n\r\n    background: #F4B01D;\r\n\r\n    color: #0B0B0B;\r\n\r\n    padding: 6px 20px;\r\n\r\n    border-radius: 50px;\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1px;\r\n\r\n    white-space: nowrap;\r\n\r\n    box-shadow:\r\n        0 0 18px rgba(244,176,29,0.18);\r\n\r\n    z-index: 10;\r\n}\r\n\r\n\/* =========================================\r\n   PLAN NAME\r\n========================================= *\/\r\n\r\n.ws-plan-name {\r\n\r\n    color: #F4B01D;\r\n\r\n    font-size: 12px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.8px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    margin-bottom: 20px;\r\n}\r\n\r\n\/* =========================================\r\n   PRICE\r\n========================================= *\/\r\n\r\n.ws-price {\r\n\r\n    font-size: 50px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 700;\r\n\r\n    color: #fff;\r\n\r\n    margin-bottom: 18px;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n.ws-price span {\r\n\r\n    font-size: 14px;\r\n\r\n    color: #666;\r\n\r\n    font-weight: 400;\r\n\r\n    margin-left: 3px;\r\n}\r\n\r\n\/* =========================================\r\n   DESCRIPTION\r\n========================================= *\/\r\n\r\n.ws-plan-desc {\r\n\r\n    color: #888;\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.7;\r\n\r\n    margin: 0 0 30px;\r\n\r\n    min-height: 50px;\r\n}\r\n\r\n\/* =========================================\r\n   FEATURES\r\n========================================= *\/\r\n\r\n.ws-features-list {\r\n\r\n    list-style: none;\r\n\r\n    padding: 0;\r\n\r\n    margin: 0 0 35px;\r\n\r\n    flex-grow: 1;\r\n}\r\n\r\n.ws-features-list li {\r\n\r\n    position: relative;\r\n\r\n    color: #C4C4C4;\r\n\r\n    font-size: 13px;\r\n\r\n    padding:\r\n        13px 0 13px 22px;\r\n\r\n    border-bottom:\r\n        1px solid rgba(255,255,255,0.055);\r\n\r\n    line-height: 1.4;\r\n\r\n    transition:\r\n        color 0.3s ease,\r\n        padding-left 0.3s ease;\r\n}\r\n\r\n.ws-features-list li::before {\r\n\r\n    content: \"\u2713\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    top: 12px;\r\n\r\n    color: #F4B01D;\r\n\r\n    font-weight: 700;\r\n\r\n    font-size: 14px;\r\n\r\n    transition: text-shadow 0.3s ease;\r\n}\r\n\r\n.ws-features-list li:hover {\r\n\r\n    color: #fff;\r\n\r\n    padding-left: 26px;\r\n}\r\n\r\n.ws-features-list li:hover::before {\r\n\r\n    text-shadow:\r\n        0 0 10px rgba(244,176,29,0.6);\r\n}\r\n\r\n\/* =========================================\r\n   BUTTON\r\n========================================= *\/\r\n\r\n.ws-btn {\r\n\r\n    display: block;\r\n\r\n    width: 100%;\r\n\r\n    text-align: center;\r\n\r\n    padding: 14px 18px;\r\n\r\n    border-radius: 8px;\r\n\r\n    text-decoration: none;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 600;\r\n\r\n    color: #F4B01D;\r\n\r\n    background: transparent;\r\n\r\n    border:\r\n        1px solid rgba(244,176,29,0.4);\r\n\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.ws-btn:hover {\r\n\r\n    background: #F4B01D;\r\n\r\n    color: #0B0B0B;\r\n\r\n    border-color: #F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 18px rgba(244,176,29,0.15);\r\n\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\/* =========================================\r\n   FEATURED BUTTON\r\n========================================= *\/\r\n\r\n.ws-btn-featured {\r\n\r\n    background: #F4B01D;\r\n\r\n    color: #0B0B0B;\r\n\r\n    border-color: #F4B01D;\r\n\r\n    box-shadow:\r\n        0 5px 20px rgba(244,176,29,0.08);\r\n}\r\n\r\n.ws-btn-featured:hover {\r\n\r\n    background: transparent;\r\n\r\n    color: #F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 18px rgba(244,176,29,0.12);\r\n}\r\n\r\n\/* =========================================\r\n   TABLET\r\n========================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    .ws-pricing-section {\r\n\r\n        padding:\r\n            90px 25px 100px;\r\n    }\r\n\r\n    .ws-pricing-grid {\r\n\r\n        grid-template-columns:\r\n            repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .ws-price-card:last-child {\r\n\r\n        grid-column: 1 \/ -1;\r\n\r\n        max-width: 500px;\r\n\r\n        width: 100%;\r\n\r\n        margin: 0 auto;\r\n    }\r\n}\r\n\r\n\/* =========================================\r\n   MOBILE\r\n========================================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .ws-pricing-section {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 100%;\r\n\r\n        margin: 0;\r\n\r\n        padding:\r\n            80px 18px 90px;\r\n    }\r\n\r\n    .ws-pricing-header {\r\n\r\n        margin-bottom: 50px;\r\n    }\r\n\r\n    .ws-pricing-title {\r\n\r\n        font-size: 32px;\r\n    }\r\n\r\n    .ws-pricing-description {\r\n\r\n        font-size: 14px;\r\n\r\n        padding:\r\n            0 10px;\r\n    }\r\n\r\n    .ws-pricing-grid {\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        gap: 22px;\r\n\r\n        width: 100%;\r\n    }\r\n\r\n    .ws-price-card {\r\n\r\n        width: 100%;\r\n\r\n        padding:\r\n            38px 25px 30px;\r\n    }\r\n\r\n    .ws-price-card:last-child {\r\n\r\n        max-width: none;\r\n    }\r\n\r\n    .ws-price {\r\n\r\n        font-size: 44px;\r\n    }\r\n}\r\n\r\n\/* =========================================\r\n   SMALL MOBILE\r\n========================================= *\/\r\n\r\n@media (max-width: 400px) {\r\n\r\n    .ws-pricing-section {\r\n\r\n        padding-left: 14px;\r\n        padding-right: 14px;\r\n    }\r\n\r\n    .ws-price-card {\r\n\r\n        padding-left: 20px;\r\n        padding-right: 20px;\r\n    }\r\n\r\n    .ws-pricing-title {\r\n\r\n        font-size: 28px;\r\n    }\r\n\r\n    .ws-price {\r\n\r\n        font-size: 40px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"ws-pricing-section\">\r\n\r\n    <div class=\"ws-pricing-container\">\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div class=\"ws-pricing-header\">\r\n\r\n            <span class=\"ws-pricing-tag\">\r\n                Pricing Plans\r\n            <\/span>\r\n\r\n            <h2 class=\"ws-pricing-title\">\r\n                Choose The Right <span>Package<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"ws-pricing-description\">\r\n                Flexible plans designed to help your brand grow with professional\r\n                design, development and digital solutions.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- PRICING CARDS -->\r\n\r\n        <div class=\"ws-pricing-grid\">\r\n\r\n\r\n            <!-- STARTER -->\r\n\r\n            <div class=\"ws-price-card\">\r\n\r\n                <div class=\"ws-plan-name\">\r\n                    Starter\r\n                <\/div>\r\n\r\n                <div class=\"ws-price\">\r\n                    $99<span>\/mo<\/span>\r\n                <\/div>\r\n\r\n                <p class=\"ws-plan-desc\">\r\n                    Perfect for individuals and new startups looking for\r\n                    a professional start.\r\n                <\/p>\r\n\r\n                <ul class=\"ws-features-list\">\r\n\r\n                    <li>Single Logo Concept<\/li>\r\n                    <li>Social Media Banners<\/li>\r\n                    <li>Basic Brand Guidelines<\/li>\r\n                    <li>Email Support<\/li>\r\n                    <li>5 Days Delivery<\/li>\r\n\r\n                <\/ul>\r\n\r\n                <a href=\"#\" class=\"ws-btn\">\r\n                    Get Started \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- GROWTH -->\r\n\r\n            <div class=\"ws-price-card featured\">\r\n\r\n                <div class=\"ws-badge\">\r\n                    MOST POPULAR\r\n                <\/div>\r\n\r\n                <div class=\"ws-plan-name\">\r\n                    Growth\r\n                <\/div>\r\n\r\n                <div class=\"ws-price\">\r\n                    $249<span>\/mo<\/span>\r\n                <\/div>\r\n\r\n                <p class=\"ws-plan-desc\">\r\n                    The ultimate solution for growing businesses\r\n                    needing consistent design.\r\n                <\/p>\r\n\r\n                <ul class=\"ws-features-list\">\r\n\r\n                    <li>Unlimited Logo Revisions<\/li>\r\n                    <li>Full Brand Identity<\/li>\r\n                    <li>Premium Website Layout<\/li>\r\n                    <li>Priority Support<\/li>\r\n                    <li>3 Days Delivery<\/li>\r\n                    <li>Source Files Included<\/li>\r\n\r\n                <\/ul>\r\n\r\n                <a href=\"#\" class=\"ws-btn ws-btn-featured\">\r\n                    Get Started \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- SCALE -->\r\n\r\n            <div class=\"ws-price-card\">\r\n\r\n                <div class=\"ws-plan-name\">\r\n                    Scale\r\n                <\/div>\r\n\r\n                <div class=\"ws-price\">\r\n                    Custom\r\n                <\/div>\r\n\r\n                <p class=\"ws-plan-desc\">\r\n                    Enterprise-grade creative partnership for\r\n                    large-scale operations.\r\n                <\/p>\r\n\r\n                <ul class=\"ws-features-list\">\r\n\r\n                    <li>Everything in Growth<\/li>\r\n                    <li>Dedicated Creative Team<\/li>\r\n                    <li>Custom Web Application<\/li>\r\n                    <li>24\/7 VIP Access<\/li>\r\n                    <li>Instant Delivery<\/li>\r\n                    <li>Marketing Consultation<\/li>\r\n\r\n                <\/ul>\r\n\r\n                <a href=\"#\" class=\"ws-btn\">\r\n                    Book a Call \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-789f794 e-flex e-con-boxed e-con e-parent\" data-id=\"789f794\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f79c9a3 elementor-widget elementor-widget-html\" data-id=\"f79c9a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n\/* =========================================================\r\n   GLOBAL\r\n========================================================= *\/\r\n\r\n.ws-process-section,\r\n.ws-why-section,\r\n.ws-client-stories,\r\n.ws-faq-section{\r\n    background:#0B0B0B;\r\n    color:#fff;\r\n    font-family:'Poppins',sans-serif;\r\n    overflow:hidden;\r\n    position:relative;\r\n}\r\n\r\n\/* =========================================================\r\n   PROCESS SECTION\r\n========================================================= *\/\r\n\r\n.ws-process-section{\r\n    padding:100px 5%;\r\n}\r\n\r\n.ws-process-container{\r\n    max-width:1250px;\r\n    margin:0 auto;\r\n    position:relative;\r\n    z-index:2;\r\n}\r\n\r\n.ws-process-header{\r\n    margin-bottom:80px;\r\n    animation:headerReveal 1s ease-out both;\r\n}\r\n\r\n.ws-process-tag{\r\n    color:#F4B01D;\r\n    background:rgba(244,176,29,0.08);\r\n    padding:8px 20px;\r\n    border-radius:50px;\r\n    font-size:12px;\r\n    font-weight:600;\r\n    text-transform:uppercase;\r\n    letter-spacing:1.5px;\r\n    border:1px solid rgba(244,176,29,0.3);\r\n    display:inline-block;\r\n    margin-bottom:25px;\r\n    transition:all .35s ease;\r\n}\r\n\r\n.ws-process-tag:hover{\r\n    background:rgba(244,176,29,0.15);\r\n    border-color:#F4B01D;\r\n    box-shadow:\r\n        0 0 10px rgba(244,176,29,.4),\r\n        0 0 25px rgba(244,176,29,.12);\r\n    transform:translateY(-3px);\r\n}\r\n\r\n.ws-process-title{\r\n    font-size:clamp(32px,5vw,48px);\r\n    font-weight:700;\r\n    line-height:1.2;\r\n    margin-bottom:20px;\r\n    letter-spacing:-1px;\r\n}\r\n\r\n.ws-process-title span{\r\n    color:#F4B01D;\r\n    animation:titleGlow 3s ease-in-out infinite;\r\n}\r\n\r\n.ws-process-desc{\r\n    color:#999;\r\n    font-size:16px;\r\n    max-width:600px;\r\n    line-height:1.6;\r\n}\r\n\r\n\/* TIMELINE *\/\r\n\r\n.ws-timeline{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    position:relative;\r\n    margin-top:50px;\r\n    gap:30px;\r\n}\r\n\r\n.ws-timeline::before{\r\n    content:'';\r\n    position:absolute;\r\n    top:25px;\r\n    left:0;\r\n    width:100%;\r\n    height:2px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent 0%,\r\n            rgba(244,176,29,.2) 10%,\r\n            #F4B01D 50%,\r\n            rgba(244,176,29,.2) 90%,\r\n            transparent 100%\r\n        );\r\n\r\n    background-size:200% 100%;\r\n    animation:lineMove 4s linear infinite;\r\n    z-index:1;\r\n}\r\n\r\n.ws-timeline::after{\r\n    content:'';\r\n    position:absolute;\r\n    top:21px;\r\n    left:-10%;\r\n    width:100px;\r\n    height:10px;\r\n\r\n    background:radial-gradient(\r\n        ellipse,\r\n        rgba(244,176,29,.8),\r\n        transparent 70%\r\n    );\r\n\r\n    filter:blur(4px);\r\n    animation:lineLight 5s linear infinite;\r\n    z-index:1;\r\n}\r\n\r\n\/* STEP *\/\r\n\r\n.ws-step{\r\n    flex:1;\r\n    position:relative;\r\n    z-index:2;\r\n    transition:transform .4s ease;\r\n    animation:stepReveal .8s ease-out both;\r\n}\r\n\r\n.ws-step:nth-child(1){\r\n    animation-delay:.2s;\r\n}\r\n\r\n.ws-step:nth-child(2){\r\n    animation-delay:.4s;\r\n}\r\n\r\n.ws-step:nth-child(3){\r\n    animation-delay:.6s;\r\n}\r\n\r\n.ws-step:nth-child(4){\r\n    animation-delay:.8s;\r\n}\r\n\r\n.ws-step:hover{\r\n    transform:translateY(-8px);\r\n}\r\n\r\n\/* NUMBER *\/\r\n\r\n.ws-number{\r\n    width:50px;\r\n    height:50px;\r\n\r\n    background:#111;\r\n    border:2px solid #F4B01D;\r\n    color:#F4B01D;\r\n\r\n    border-radius:50%;\r\n\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    font-weight:700;\r\n    font-size:18px;\r\n\r\n    margin-bottom:30px;\r\n\r\n    transition:\r\n        background .4s ease,\r\n        color .4s ease,\r\n        transform .4s ease,\r\n        box-shadow .4s ease;\r\n\r\n    box-shadow:\r\n        0 0 10px rgba(244,176,29,.15),\r\n        inset 0 0 10px rgba(244,176,29,.05);\r\n\r\n    position:relative;\r\n}\r\n\r\n.ws-number::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:-7px;\r\n\r\n    border:1px solid rgba(244,176,29,.2);\r\n    border-radius:50%;\r\n\r\n    transition:.4s ease;\r\n}\r\n\r\n.ws-number::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:-2px;\r\n\r\n    border-radius:50%;\r\n    border:1px solid rgba(244,176,29,.4);\r\n\r\n    opacity:0;\r\n    animation:numberPulse 2.5s ease-out infinite;\r\n}\r\n\r\n.ws-step:hover .ws-number{\r\n    background:#F4B01D;\r\n    color:#000;\r\n\r\n    transform:\r\n        scale(1.12)\r\n        rotate(5deg);\r\n\r\n    box-shadow:\r\n        0 0 15px rgba(244,176,29,.7),\r\n        0 0 35px rgba(244,176,29,.35),\r\n        0 0 60px rgba(244,176,29,.12);\r\n}\r\n\r\n.ws-step:hover .ws-number::before{\r\n    border-color:rgba(244,176,29,.7);\r\n    transform:scale(1.15);\r\n}\r\n\r\n\/* CONTENT *\/\r\n\r\n.ws-content{\r\n    max-width:250px;\r\n}\r\n\r\n.ws-step h3{\r\n    font-size:20px;\r\n    font-weight:600;\r\n    margin-bottom:15px;\r\n    color:#fff;\r\n\r\n    transition:\r\n        color .3s ease,\r\n        transform .3s ease;\r\n}\r\n\r\n.ws-step:hover h3{\r\n    color:#F4B01D;\r\n    transform:translateX(4px);\r\n\r\n    text-shadow:\r\n        0 0 12px rgba(244,176,29,.2);\r\n}\r\n\r\n.ws-step p{\r\n    font-size:14px;\r\n    color:#888;\r\n    line-height:1.7;\r\n\r\n    transition:color .3s ease;\r\n}\r\n\r\n.ws-step:hover p{\r\n    color:#aaa;\r\n}\r\n\r\n.ws-step:not(:last-child)::after{\r\n    content:\"\u2192\";\r\n\r\n    position:absolute;\r\n    right:5px;\r\n    top:80px;\r\n\r\n    color:rgba(244,176,29,.35);\r\n    font-size:20px;\r\n\r\n    transition:\r\n        color .3s ease,\r\n        transform .3s ease;\r\n}\r\n\r\n.ws-step:hover::after{\r\n    color:#F4B01D;\r\n    transform:translateX(5px);\r\n}\r\n\r\n\/* =========================================================\r\n   WHY WEBNSOFT\r\n========================================================= *\/\r\n\r\n.ws-why-section{\r\n    padding:100px 5%;\r\n}\r\n\r\n.ws-why-container{\r\n    max-width:1250px;\r\n    margin:0 auto;\r\n    position:relative;\r\n    z-index:2;\r\n}\r\n\r\n.ws-why-tag{\r\n    color:#F4B01D;\r\n    background:rgba(244,176,29,.06);\r\n\r\n    padding:7px 18px;\r\n    border-radius:50px;\r\n\r\n    font-size:11px;\r\n    font-weight:600;\r\n\r\n    text-transform:uppercase;\r\n    letter-spacing:1.5px;\r\n\r\n    border:1px solid rgba(244,176,29,.25);\r\n\r\n    display:inline-block;\r\n    margin-bottom:25px;\r\n\r\n    animation:tagReveal .8s ease-out both;\r\n    transition:.35s ease;\r\n}\r\n\r\n.ws-why-tag:hover{\r\n    background:rgba(244,176,29,.12);\r\n    border-color:#F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 12px rgba(244,176,29,.3),\r\n        0 0 25px rgba(244,176,29,.08);\r\n\r\n    transform:translateY(-3px);\r\n}\r\n\r\n.ws-why-title{\r\n    font-size:clamp(32px,5vw,42px);\r\n    font-weight:700;\r\n    margin-bottom:60px;\r\n    line-height:1.2;\r\n    letter-spacing:-.5px;\r\n\r\n    animation:titleReveal .9s ease-out .1s both;\r\n}\r\n\r\n.ws-why-title span{\r\n    color:#F4B01D;\r\n    animation:titleGlow 3s ease-in-out infinite;\r\n}\r\n\r\n\/* GRID *\/\r\n\r\n.ws-why-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(4,1fr);\r\n    gap:20px;\r\n}\r\n\r\n\/* CARD *\/\r\n\r\n.ws-why-card{\r\n    background:linear-gradient(\r\n        145deg,\r\n        #151515,\r\n        #101010\r\n    );\r\n\r\n    border:1px solid #222;\r\n\r\n    padding:40px 25px;\r\n    border-radius:16px;\r\n\r\n    position:relative;\r\n    overflow:hidden;\r\n\r\n    transition:\r\n        transform .45s ease,\r\n        border-color .45s ease,\r\n        box-shadow .45s ease,\r\n        background .45s ease;\r\n\r\n    animation:cardReveal .8s ease-out both;\r\n}\r\n\r\n.ws-why-card:nth-child(1){\r\n    animation-delay:.2s;\r\n}\r\n\r\n.ws-why-card:nth-child(2){\r\n    animation-delay:.35s;\r\n}\r\n\r\n.ws-why-card:nth-child(3){\r\n    animation-delay:.5s;\r\n}\r\n\r\n.ws-why-card:nth-child(4){\r\n    animation-delay:.65s;\r\n}\r\n\r\n.ws-why-card::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    top:0;\r\n    left:-130%;\r\n\r\n    width:90%;\r\n    height:100%;\r\n\r\n    background:linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(244,176,29,.08),\r\n        transparent\r\n    );\r\n\r\n    transform:skewX(-20deg);\r\n    transition:.9s;\r\n\r\n    pointer-events:none;\r\n}\r\n\r\n.ws-why-card::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    top:0;\r\n    left:0;\r\n\r\n    width:0;\r\n    height:2px;\r\n\r\n    background:#F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 10px rgba(244,176,29,.8);\r\n\r\n    transition:.5s ease;\r\n}\r\n\r\n.ws-why-card:hover{\r\n    transform:translateY(-10px);\r\n\r\n    border-color:rgba(244,176,29,.55);\r\n    background:#161616;\r\n\r\n    box-shadow:\r\n        0 15px 35px rgba(0,0,0,.55),\r\n        0 0 15px rgba(244,176,29,.20),\r\n        0 0 35px rgba(244,176,29,.07);\r\n}\r\n\r\n.ws-why-card:hover::before{\r\n    left:130%;\r\n}\r\n\r\n.ws-why-card:hover::after{\r\n    width:100%;\r\n}\r\n\r\n\/* ICON *\/\r\n\r\n.ws-why-icon{\r\n    width:50px;\r\n    height:50px;\r\n\r\n    margin-bottom:22px;\r\n\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    border-radius:12px;\r\n\r\n    background:#1A1A1A;\r\n\r\n    color:#F4B01D;\r\n\r\n    font-size:22px;\r\n\r\n    border:1px solid rgba(255,255,255,.05);\r\n\r\n    transition:\r\n        transform .4s ease,\r\n        background .4s ease,\r\n        border-color .4s ease,\r\n        box-shadow .4s ease;\r\n}\r\n\r\n.ws-why-card:hover .ws-why-icon{\r\n    background:rgba(244,176,29,.10);\r\n\r\n    border-color:rgba(244,176,29,.35);\r\n\r\n    transform:\r\n        scale(1.1)\r\n        rotate(-4deg);\r\n\r\n    box-shadow:\r\n        0 0 12px rgba(244,176,29,.35),\r\n        0 0 25px rgba(244,176,29,.10);\r\n}\r\n\r\n.ws-why-card h3{\r\n    font-size:19px;\r\n    font-weight:600;\r\n    margin-bottom:12px;\r\n    color:#fff;\r\n\r\n    transition:\r\n        color .3s ease,\r\n        transform .3s ease;\r\n}\r\n\r\n.ws-why-card:hover h3{\r\n    color:#F4B01D;\r\n    transform:translateX(3px);\r\n\r\n    text-shadow:\r\n        0 0 10px rgba(244,176,29,.20);\r\n}\r\n\r\n.ws-why-card p{\r\n    font-size:14px;\r\n    color:#888;\r\n    line-height:1.7;\r\n    margin:0;\r\n\r\n    transition:color .3s ease;\r\n}\r\n\r\n.ws-why-card:hover p{\r\n    color:#aaa;\r\n}\r\n\r\n\/* =========================================================\r\n   CLIENT STORIES\r\n========================================================= *\/\r\n\r\n.ws-client-stories{\r\n    padding:100px 5%;\r\n}\r\n\r\n.ws-story-container{\r\n    max-width:1200px;\r\n    margin:auto;\r\n    position:relative;\r\n    z-index:2;\r\n}\r\n\r\n.ws-story-header{\r\n    text-align:center;\r\n    margin-bottom:55px;\r\n}\r\n\r\n.ws-story-tag{\r\n    display:inline-block;\r\n    color:#F4B01D !important;\r\n\r\n    background:rgba(244,176,29,.055);\r\n    border:1px solid rgba(244,176,29,.22);\r\n\r\n    padding:7px 18px;\r\n    border-radius:50px;\r\n\r\n    font-size:11px;\r\n    font-weight:600;\r\n\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n\r\n    margin-bottom:18px;\r\n\r\n    transition:\r\n        color .35s ease,\r\n        background .35s ease,\r\n        border-color .35s ease,\r\n        box-shadow .35s ease,\r\n        transform .35s ease;\r\n}\r\n\r\n.ws-story-tag:hover{\r\n    color:#F4B01D !important;\r\n    background:rgba(244,176,29,.10);\r\n    border-color:rgba(244,176,29,.65);\r\n\r\n    transform:translateY(-2px);\r\n\r\n    box-shadow:\r\n        0 0 8px rgba(244,176,29,.18),\r\n        0 0 22px rgba(244,176,29,.10),\r\n        inset 0 0 12px rgba(244,176,29,.04);\r\n}\r\n\r\n.ws-story-title{\r\n    margin:0;\r\n\r\n    font-size:clamp(32px,5vw,48px);\r\n    line-height:1.15;\r\n    font-weight:700;\r\n\r\n    color:#fff !important;\r\n\r\n    transition:\r\n        text-shadow .35s ease,\r\n        transform .35s ease;\r\n}\r\n\r\n.ws-story-title:hover{\r\n    text-shadow:\r\n        0 0 12px rgba(244,176,29,.10);\r\n}\r\n\r\n.ws-story-title span{\r\n    color:#F4B01D !important;\r\n}\r\n\r\n\/* =========================================================\r\n   TESTIMONIALS - DUAL MARQUEE\r\n========================================================= *\/\r\n.ws-client-stories{overflow:hidden;position:relative}\r\n.ws-story-container{max-width:1400px;margin:0 auto}\r\n.ws-story-header{text-align:center;margin-bottom:42px}\r\n.ws-story-tag{color:#F4B01D !important;font-size:11px;letter-spacing:3px;text-transform:uppercase}\r\n.ws-story-title{color:#fff !important;font-size:42px;line-height:1.15;margin:14px 0 0;font-weight:700}\r\n.ws-story-title span{color:#F4B01D !important}\r\n\r\n.ws-stack-area{position:relative;width:100%;max-width:1500px;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;gap:20px;padding:8px 0 12px}\r\n.ws-stack-area::before,.ws-stack-area::after{content:\"\";position:absolute;top:0;bottom:0;width:110px;z-index:20;pointer-events:none}\r\n.ws-stack-area::before{left:0;background:linear-gradient(90deg,#0b0b0b,transparent)}\r\n.ws-stack-area::after{right:0;background:linear-gradient(-90deg,#0b0b0b,transparent)}\r\n\r\n.ws-review-row{width:max-content;display:flex;gap:20px;will-change:transform}\r\n.ws-review-row.top-row{animation:wsReviewsLeft 34s linear infinite}\r\n.ws-review-row.bottom-row{animation:wsReviewsRight 34s linear infinite;transform:translateX(-350px)}\r\n.ws-review-row:hover{animation-play-state:paused}\r\n\r\n.ws-stack-card{position:relative;flex:0 0 350px;width:350px;min-height:235px;box-sizing:border-box;background:linear-gradient(145deg,#171717,#101010) !important;border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:27px 24px;display:flex;flex-direction:column;justify-content:space-between;opacity:1 !important;filter:none !important;transform:none !important;z-index:2 !important;box-shadow:0 18px 45px rgba(0,0,0,.32);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease}\r\n.ws-stack-card:hover{transform:translateY(-6px) !important;border-color:#F4B01D !important;box-shadow:0 25px 60px rgba(0,0,0,.55),0 0 0 1px rgba(244,176,29,.35),0 0 30px rgba(244,176,29,.10);background:linear-gradient(145deg,#1b1b1b,#111111) !important}\r\n.ws-stack-card::before{content:\"\";position:absolute;top:-1px;left:12%;width:76%;height:1px;background:linear-gradient(90deg,transparent,rgba(244,176,29,.7),transparent);transition:opacity .3s ease,width .3s ease,left .3s ease}\r\n.ws-stack-card:hover::before{width:88%;left:6%;opacity:1}\r\n.ws-stack-top{display:flex;justify-content:space-between;align-items:flex-start}\r\n.ws-quote{display:none}\r\n.ws-stars{color:#F4B01D !important;font-size:12px;letter-spacing:2px;margin:0}\r\n.ws-story-content{color:#d0d0d0 !important;font-size:13.5px;line-height:1.65;max-width:none;margin:14px 0 20px}\r\n.ws-divider{height:1px;background:linear-gradient(90deg,rgba(244,176,29,.22),rgba(255,255,255,.06),transparent);margin-bottom:17px}\r\n.ws-client-info{display:flex;align-items:center;gap:12px}\r\n.ws-client-avatar{width:40px;height:40px;min-width:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(244,176,29,.07) !important;border:1px solid rgba(244,176,29,.45) !important;color:#F4B01D !important;font-size:11px;font-weight:700;transition:box-shadow .3s ease,background .3s ease}\r\n.ws-stack-card:hover .ws-client-avatar{background:rgba(244,176,29,.13) !important;box-shadow:0 0 18px rgba(244,176,29,.15)}\r\n.ws-client-name h4{margin:0;color:#fff !important;font-size:14px;font-weight:600}\r\n.ws-client-name span{display:block;margin-top:3px;color:#777 !important;font-size:10.5px}\r\n\r\n@keyframes wsReviewsLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n@keyframes wsReviewsRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}\r\n.ws-story-controls,.ws-story-dots,.ws-story-progress{display:none !important}\r\n\r\n@media(max-width:1100px){\r\n .ws-stack-card{flex-basis:310px;width:310px;min-height:225px;padding:24px 21px}\r\n .ws-review-row{gap:16px}\r\n .ws-stack-area::before,.ws-stack-area::after{width:70px}\r\n}\r\n@media(max-width:700px){\r\n .ws-story-title{font-size:30px}\r\n .ws-story-header{margin-bottom:30px}\r\n .ws-stack-area{gap:14px;padding:5px 0 10px}\r\n .ws-review-row{gap:14px}\r\n .ws-stack-card{flex-basis:285px;width:285px;min-height:225px;padding:23px 20px}\r\n .ws-story-content{font-size:13px}\r\n .ws-stack-area::before,.ws-stack-area::after{width:35px}\r\n}\r\n\r\n\/* =========================================================\r\n   FAQ\r\n========================================================= *\/\r\n\r\n.ws-faq-section{\r\n    padding:110px 5%;\r\n}\r\n\r\n.ws-faq-container{\r\n    max-width:950px;\r\n    margin:auto;\r\n    position:relative;\r\n    z-index:2;\r\n}\r\n\r\n.ws-faq-header{\r\n    text-align:center;\r\n    margin-bottom:55px;\r\n}\r\n\r\n.ws-faq-tag{\r\n    display:inline-block;\r\n\r\n    color:#F4B01D !important;\r\n\r\n    background:rgba(244,176,29,.055);\r\n\r\n    border:1px solid rgba(244,176,29,.22);\r\n\r\n    padding:7px 18px;\r\n\r\n    border-radius:50px;\r\n\r\n    font-size:11px;\r\n    font-weight:600;\r\n\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n\r\n    margin-bottom:18px;\r\n\r\n    transition:all .35s ease;\r\n}\r\n\r\n.ws-faq-tag:hover{\r\n    background:rgba(244,176,29,.10);\r\n\r\n    border-color:rgba(244,176,29,.65);\r\n\r\n    transform:translateY(-2px);\r\n\r\n    box-shadow:\r\n        0 0 8px rgba(244,176,29,.18),\r\n        0 0 22px rgba(244,176,29,.10);\r\n}\r\n\r\n.ws-faq-title{\r\n    margin:0;\r\n\r\n    font-size:clamp(32px,5vw,48px);\r\n\r\n    line-height:1.15;\r\n\r\n    font-weight:700;\r\n\r\n    color:#fff !important;\r\n\r\n    transition:text-shadow .35s ease;\r\n}\r\n\r\n.ws-faq-title:hover{\r\n    text-shadow:\r\n        0 0 15px rgba(244,176,29,.10);\r\n}\r\n\r\n.ws-faq-title span{\r\n    color:#F4B01D !important;\r\n}\r\n\r\n.ws-faq-subtitle{\r\n    max-width:650px;\r\n\r\n    margin:18px auto 0;\r\n\r\n    color:#888 !important;\r\n\r\n    font-size:14px;\r\n\r\n    line-height:1.8;\r\n}\r\n\r\n\/* FAQ LIST *\/\r\n\r\n.ws-faq-list{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:14px;\r\n}\r\n\r\n\/* FAQ CARD *\/\r\n\r\n.ws-faq-item{\r\n    position:relative;\r\n\r\n    background:linear-gradient(\r\n        145deg,\r\n        #171717,\r\n        #101010\r\n    ) !important;\r\n\r\n    border:1px solid rgba(255,255,255,.075);\r\n\r\n    border-radius:18px;\r\n\r\n    overflow:hidden;\r\n\r\n    transition:\r\n        border-color .4s ease,\r\n        box-shadow .4s ease,\r\n        transform .4s ease;\r\n}\r\n\r\n.ws-faq-item::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    top:0;\r\n    left:10%;\r\n\r\n    width:80%;\r\n    height:1px;\r\n\r\n    background:linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(244,176,29,.55),\r\n        transparent\r\n    );\r\n\r\n    opacity:0;\r\n\r\n    transition:opacity .4s ease;\r\n}\r\n\r\n.ws-faq-item:hover{\r\n    border-color:rgba(244,176,29,.22);\r\n\r\n    transform:translateY(-2px);\r\n\r\n    box-shadow:\r\n        0 18px 45px rgba(0,0,0,.45),\r\n        0 0 25px rgba(244,176,29,.035);\r\n}\r\n\r\n.ws-faq-item:hover::before{\r\n    opacity:1;\r\n}\r\n\r\n\/* QUESTION *\/\r\n\r\n.ws-faq-question{\r\n    width:100%;\r\n\r\n    border:0 !important;\r\n    outline:none !important;\r\n\r\n    background:transparent !important;\r\n\r\n    color:#fff !important;\r\n\r\n    padding:24px 28px;\r\n\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n\r\n    gap:20px;\r\n\r\n    text-align:left;\r\n\r\n    cursor:pointer;\r\n\r\n    font-family:'Poppins',sans-serif;\r\n\r\n    font-size:15px;\r\n    font-weight:500;\r\n\r\n    transition:color .3s ease;\r\n}\r\n\r\n.ws-faq-question:hover{\r\n    color:#F4B01D !important;\r\n}\r\n\r\n.ws-faq-number{\r\n    color:#F4B01D !important;\r\n\r\n    font-size:11px;\r\n    font-weight:600;\r\n\r\n    letter-spacing:1px;\r\n\r\n    margin-right:12px;\r\n\r\n    opacity:.7;\r\n}\r\n\r\n\/* PLUS *\/\r\n\r\n.ws-faq-icon{\r\n    width:34px;\r\n    height:34px;\r\n\r\n    min-width:34px;\r\n\r\n    border-radius:50%;\r\n\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    border:1px solid rgba(244,176,29,.25);\r\n\r\n    color:#F4B01D !important;\r\n\r\n    font-size:20px;\r\n    font-weight:300;\r\n    line-height:1;\r\n\r\n    transition:\r\n        transform .45s cubic-bezier(.22,.61,.36,1),\r\n        background .35s ease,\r\n        color .35s ease,\r\n        border-color .35s ease,\r\n        box-shadow .35s ease;\r\n}\r\n\r\n\/* ANSWER *\/\r\n\r\n.ws-faq-answer{\r\n    display:grid;\r\n\r\n    grid-template-rows:0fr;\r\n\r\n    transition:\r\n        grid-template-rows .55s cubic-bezier(.22,.61,.36,1);\r\n}\r\n\r\n.ws-faq-answer-inner{\r\n    overflow:hidden;\r\n}\r\n\r\n.ws-faq-answer p{\r\n    margin:0;\r\n\r\n    padding:0 28px 24px;\r\n\r\n    color:#999 !important;\r\n\r\n    font-size:14px;\r\n\r\n    line-height:1.9;\r\n}\r\n\r\n\/* ACTIVE *\/\r\n\r\n.ws-faq-item.active{\r\n    border-color:rgba(244,176,29,.30);\r\n\r\n    box-shadow:\r\n        0 20px 55px rgba(0,0,0,.5),\r\n        0 0 30px rgba(244,176,29,.045);\r\n}\r\n\r\n.ws-faq-item.active::before{\r\n    opacity:1;\r\n}\r\n\r\n.ws-faq-item.active .ws-faq-answer{\r\n    grid-template-rows:1fr;\r\n}\r\n\r\n.ws-faq-item.active .ws-faq-icon{\r\n    transform:rotate(45deg);\r\n\r\n    background:#F4B01D;\r\n\r\n    color:#0B0B0B !important;\r\n\r\n    border-color:#F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 18px rgba(244,176,29,.15);\r\n}\r\n\r\n\/* BOTTOM LINE *\/\r\n\r\n.ws-faq-bottom-line{\r\n    width:60px;\r\n    height:2px;\r\n\r\n    margin:45px auto 0;\r\n\r\n    background:#F4B01D;\r\n\r\n    box-shadow:\r\n        0 0 10px rgba(244,176,29,.25);\r\n\r\n    animation:\r\n        faqPulse 2.5s ease-in-out infinite;\r\n}\r\n\r\n@keyframes faqPulse{\r\n\r\n    0%,100%{\r\n        width:60px;\r\n        opacity:.45;\r\n    }\r\n\r\n    50%{\r\n        width:100px;\r\n        opacity:1;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes headerReveal{\r\n\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(30px);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes stepReveal{\r\n\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(40px) scale(.96);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0) scale(1);\r\n    }\r\n}\r\n\r\n@keyframes lineMove{\r\n\r\n    0%{\r\n        background-position:200% 0;\r\n    }\r\n\r\n    100%{\r\n        background-position:-200% 0;\r\n    }\r\n}\r\n\r\n@keyframes lineLight{\r\n\r\n    0%{\r\n        left:-10%;\r\n    }\r\n\r\n    100%{\r\n        left:110%;\r\n    }\r\n}\r\n\r\n@keyframes numberPulse{\r\n\r\n    0%{\r\n        opacity:.7;\r\n        transform:scale(.95);\r\n    }\r\n\r\n    70%,100%{\r\n        opacity:0;\r\n        transform:scale(1.5);\r\n    }\r\n}\r\n\r\n@keyframes titleGlow{\r\n\r\n    0%,100%{\r\n        text-shadow:0 0 0 rgba(244,176,29,0);\r\n    }\r\n\r\n    50%{\r\n        text-shadow:\r\n            0 0 12px rgba(244,176,29,.3),\r\n            0 0 25px rgba(244,176,29,.1);\r\n    }\r\n}\r\n\r\n@keyframes cardReveal{\r\n\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(45px) scale(.96);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0) scale(1);\r\n    }\r\n}\r\n\r\n@keyframes titleReveal{\r\n\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(25px);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes tagReveal{\r\n\r\n    from{\r\n        opacity:0;\r\n        transform:translateY(15px);\r\n    }\r\n\r\n    to{\r\n        opacity:1;\r\n        transform:translateY(0);\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1024px){\r\n\r\n    .ws-why-grid{\r\n        grid-template-columns:repeat(2,1fr);\r\n    }\r\n}\r\n\r\n@media(max-width:991px){\r\n\r\n    .ws-process-section{\r\n        padding:80px 6%;\r\n    }\r\n\r\n    .ws-process-header{\r\n        margin-bottom:60px;\r\n    }\r\n\r\n    .ws-timeline{\r\n        flex-direction:column;\r\n        gap:45px;\r\n    }\r\n\r\n    .ws-timeline::before{\r\n        width:2px;\r\n        height:100%;\r\n\r\n        left:24px;\r\n        top:0;\r\n\r\n        background:\r\n            linear-gradient(\r\n                180deg,\r\n                transparent,\r\n                rgba(244,176,29,.6),\r\n                transparent\r\n            );\r\n\r\n        background-size:100% 200%;\r\n\r\n        animation:\r\n            verticalLineMove 4s linear infinite;\r\n    }\r\n\r\n    .ws-timeline::after{\r\n        top:-10px;\r\n        left:20px;\r\n\r\n        width:10px;\r\n        height:100px;\r\n\r\n        background:\r\n            radial-gradient(\r\n                ellipse,\r\n                rgba(244,176,29,.8),\r\n                transparent 70%\r\n            );\r\n\r\n        animation:\r\n            verticalLight 5s linear infinite;\r\n    }\r\n\r\n    .ws-step{\r\n        display:flex;\r\n        gap:25px;\r\n        text-align:left;\r\n    }\r\n\r\n    .ws-number{\r\n        flex-shrink:0;\r\n        margin-bottom:0;\r\n    }\r\n\r\n    .ws-content{\r\n        max-width:600px;\r\n        padding-top:2px;\r\n    }\r\n\r\n    .ws-step:not(:last-child)::after{\r\n        display:none;\r\n    }\r\n\r\n    .ws-stack-area{\r\n        height:470px;\r\n    }\r\n\r\n    .ws-stack-card{\r\n        padding:42px;\r\n    }\r\n\r\n    .ws-story-content{\r\n        font-size:16px;\r\n    }\r\n\r\n    .ws-faq-section{\r\n        padding:90px 5%;\r\n    }\r\n}\r\n\r\n@keyframes verticalLineMove{\r\n\r\n    0%{\r\n        background-position:0 200%;\r\n    }\r\n\r\n    100%{\r\n        background-position:0 -200%;\r\n    }\r\n}\r\n\r\n@keyframes verticalLight{\r\n\r\n    0%{\r\n        top:-10%;\r\n    }\r\n\r\n    100%{\r\n        top:110%;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:600px){\r\n\r\n    .ws-why-section{\r\n        padding:75px 20px;\r\n    }\r\n\r\n    .ws-why-title{\r\n        font-size:28px;\r\n        margin-bottom:40px;\r\n    }\r\n\r\n    .ws-why-grid{\r\n        display:flex;\r\n\r\n        overflow-x:auto;\r\n\r\n        scroll-snap-type:x mandatory;\r\n\r\n        gap:15px;\r\n\r\n        padding:10px 0 35px;\r\n\r\n        scrollbar-width:none;\r\n    }\r\n\r\n    .ws-why-grid::-webkit-scrollbar{\r\n        display:none;\r\n    }\r\n\r\n    .ws-why-card{\r\n        min-width:82%;\r\n\r\n        scroll-snap-align:center;\r\n\r\n        padding:35px 25px;\r\n    }\r\n\r\n    .ws-client-stories{\r\n        padding:80px 18px;\r\n    }\r\n\r\n    .ws-story-header{\r\n        text-align:left;\r\n        margin-bottom:40px;\r\n    }\r\n\r\n    .ws-story-title{\r\n        font-size:30px;\r\n    }\r\n\r\n    .ws-stack-area{\r\n        height:535px;\r\n    }\r\n\r\n    .ws-stack-card{\r\n        padding:32px 25px;\r\n        border-radius:20px;\r\n    }\r\n\r\n    .ws-story-content{\r\n        font-size:14px;\r\n        line-height:1.8;\r\n    }\r\n\r\n    .ws-quote{\r\n        font-size:63px;\r\n    }\r\n\r\n    .ws-faq-section{\r\n        padding:75px 18px;\r\n    }\r\n\r\n    .ws-faq-header{\r\n        text-align:left;\r\n        margin-bottom:40px;\r\n    }\r\n\r\n    .ws-faq-title{\r\n        font-size:30px;\r\n    }\r\n\r\n    .ws-faq-subtitle{\r\n        font-size:13px;\r\n        margin-left:0;\r\n    }\r\n\r\n    .ws-faq-question{\r\n        padding:20px 18px;\r\n        font-size:14px;\r\n    }\r\n\r\n    .ws-faq-icon{\r\n        width:30px;\r\n        height:30px;\r\n        min-width:30px;\r\n        font-size:18px;\r\n    }\r\n\r\n    .ws-faq-answer p{\r\n        padding:0 18px 20px;\r\n        font-size:13px;\r\n    }\r\n\r\n    .ws-faq-number{\r\n        display:none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:550px){\r\n\r\n    .ws-process-section{\r\n        padding:65px 20px;\r\n    }\r\n\r\n    .ws-process-title{\r\n        font-size:32px;\r\n    }\r\n\r\n    .ws-process-desc{\r\n        font-size:14px;\r\n    }\r\n\r\n    .ws-step{\r\n        gap:20px;\r\n    }\r\n\r\n    .ws-number{\r\n        width:45px;\r\n        height:45px;\r\n        font-size:16px;\r\n    }\r\n\r\n    .ws-step h3{\r\n        font-size:18px;\r\n    }\r\n\r\n    .ws-step p{\r\n        font-size:13px;\r\n    }\r\n}\r\n\r\n@media(max-width:400px){\r\n\r\n    .ws-why-card{\r\n        min-width:88%;\r\n    }\r\n\r\n    .ws-why-card p{\r\n        font-size:13px;\r\n    }\r\n\r\n    .ws-stack-area{\r\n        height:560px;\r\n    }\r\n\r\n    .ws-stack-card{\r\n        padding:28px 21px;\r\n    }\r\n\r\n    .ws-story-content{\r\n        font-size:13.5px;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   FINAL MOBILE TESTIMONIAL FIX\r\n   Keeps dual marquee but makes cards fit mobile cleanly\r\n========================================================= *\/\r\n@media (max-width: 600px){\r\n    .ws-client-stories{\r\n        width:100%;\r\n        overflow:hidden !important;\r\n        padding:70px 0 75px !important;\r\n    }\r\n\r\n    .ws-story-container{\r\n        width:100%;\r\n        max-width:none;\r\n        margin:0;\r\n    }\r\n\r\n    .ws-story-header{\r\n        width:100%;\r\n        box-sizing:border-box;\r\n        padding:0 20px;\r\n        text-align:left;\r\n        margin-bottom:28px !important;\r\n    }\r\n\r\n    .ws-story-tag{\r\n        display:inline-block;\r\n        padding:8px 17px;\r\n        border:1px solid rgba(244,176,29,.28);\r\n        border-radius:999px;\r\n        background:rgba(244,176,29,.035);\r\n        font-size:10px;\r\n        letter-spacing:3px;\r\n    }\r\n\r\n    .ws-story-title{\r\n        font-size:30px !important;\r\n        line-height:1.12 !important;\r\n        margin-top:18px !important;\r\n    }\r\n\r\n    .ws-stack-area{\r\n        width:100% !important;\r\n        max-width:none !important;\r\n        height:auto !important;\r\n        min-height:0 !important;\r\n        box-sizing:border-box;\r\n        display:flex !important;\r\n        flex-direction:column !important;\r\n        gap:14px !important;\r\n        padding:6px 0 10px !important;\r\n        overflow:hidden !important;\r\n    }\r\n\r\n    .ws-stack-area::before,\r\n    .ws-stack-area::after{\r\n        width:28px !important;\r\n        z-index:20;\r\n    }\r\n\r\n    .ws-review-row{\r\n        width:max-content !important;\r\n        display:flex !important;\r\n        flex-wrap:nowrap !important;\r\n        gap:12px !important;\r\n    }\r\n\r\n    .ws-review-row.top-row{\r\n        animation-duration:30s !important;\r\n    }\r\n\r\n    .ws-review-row.bottom-row{\r\n        animation-duration:30s !important;\r\n        transform:translateX(-70px);\r\n    }\r\n\r\n    .ws-stack-card{\r\n        flex:0 0 82vw !important;\r\n        width:82vw !important;\r\n        max-width:320px !important;\r\n        min-height:220px !important;\r\n        height:auto !important;\r\n        padding:22px 20px !important;\r\n        border-radius:16px !important;\r\n        box-sizing:border-box !important;\r\n    }\r\n\r\n    .ws-stars{\r\n        font-size:11px !important;\r\n        letter-spacing:1.5px !important;\r\n    }\r\n\r\n    .ws-story-content{\r\n        font-size:13px !important;\r\n        line-height:1.65 !important;\r\n        margin:14px 0 18px !important;\r\n    }\r\n\r\n    .ws-client-avatar{\r\n        width:38px !important;\r\n        height:38px !important;\r\n        min-width:38px !important;\r\n    }\r\n\r\n    .ws-client-name h4{\r\n        font-size:13px !important;\r\n    }\r\n\r\n    .ws-client-name span{\r\n        font-size:10px !important;\r\n    }\r\n}\r\n\r\n@media (max-width:400px){\r\n    .ws-story-header{\r\n        padding:0 18px;\r\n    }\r\n\r\n    .ws-story-title{\r\n        font-size:28px !important;\r\n    }\r\n\r\n    .ws-stack-card{\r\n        flex-basis:84vw !important;\r\n        width:84vw !important;\r\n        padding:21px 18px !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     PROCESS SECTION\r\n========================================================= -->\r\n\r\n<section class=\"ws-process-section\">\r\n\r\n    <div class=\"ws-process-container\">\r\n\r\n        <div class=\"ws-process-header\">\r\n\r\n            <span class=\"ws-process-tag\">\r\n                The Process\r\n            <\/span>\r\n\r\n            <h2 class=\"ws-process-title\">\r\n                How <span>Webnsoft<\/span> Delivers Success\r\n            <\/h2>\r\n\r\n            <p class=\"ws-process-desc\">\r\n                A systematic 4-step approach designed to take your idea\r\n                from concept to a high-converting reality.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"ws-timeline\">\r\n\r\n            <div class=\"ws-step\">\r\n\r\n                <div class=\"ws-number\">\r\n                    1\r\n                <\/div>\r\n\r\n                <div class=\"ws-content\">\r\n\r\n                    <h3>\r\n                        Discovery Call\r\n                    <\/h3>\r\n\r\n                    <p>\r\n                        We start with a 30-min consultation to understand\r\n                        your brand goals and specific design requirements.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-step\">\r\n\r\n                <div class=\"ws-number\">\r\n                    2\r\n                <\/div>\r\n\r\n                <div class=\"ws-content\">\r\n\r\n                    <h3>\r\n                        Strategic Plan\r\n                    <\/h3>\r\n\r\n                    <p>\r\n                        Our team creates a custom roadmap and moodboard\r\n                        tailored to your industry and target audience.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-step\">\r\n\r\n                <div class=\"ws-number\">\r\n                    3\r\n                <\/div>\r\n\r\n                <div class=\"ws-content\">\r\n\r\n                    <h3>\r\n                        Design & Dev\r\n                    <\/h3>\r\n\r\n                    <p>\r\n                        The magic happens here. We build your assets with\r\n                        pixel-perfect precision and modern aesthetics.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-step\">\r\n\r\n                <div class=\"ws-number\">\r\n                    4\r\n                <\/div>\r\n\r\n                <div class=\"ws-content\">\r\n\r\n                    <h3>\r\n                        Final Launch\r\n                    <\/h3>\r\n\r\n                    <p>\r\n                        After your feedback and final polish, we deliver\r\n                        your high-quality assets ready for growth.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n     WHY WEBNSOFT\r\n========================================================= -->\r\n\r\n<section class=\"ws-why-section\">\r\n\r\n    <div class=\"ws-why-container\">\r\n\r\n        <span class=\"ws-why-tag\">\r\n            Why Webnsoft\r\n        <\/span>\r\n\r\n        <h2 class=\"ws-why-title\">\r\n            The <span>Webnsoft<\/span> Advantage\r\n        <\/h2>\r\n\r\n\r\n        <div class=\"ws-why-grid\">\r\n\r\n            <div class=\"ws-why-card\">\r\n\r\n                <div class=\"ws-why-icon\">\r\n                    \ud83c\udfaf\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Strategic Design\r\n                <\/h3>\r\n\r\n                <p>\r\n                    We build data-driven strategies that help your brand\r\n                    convert leads into loyal customers.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-why-card\">\r\n\r\n                <div class=\"ws-why-icon\">\r\n                    \u26a1\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Quick Delivery\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Speed meets quality. Most creative assets are delivered\r\n                    within 48 hours with perfection.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-why-card\">\r\n\r\n                <div class=\"ws-why-icon\">\r\n                    \ud83d\udee1\ufe0f\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Full Ownership\r\n                <\/h3>\r\n\r\n                <p>\r\n                    You own 100% of the copyrights and source files.\r\n                    No hidden strings or recurring fees.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-why-card\">\r\n\r\n                <div class=\"ws-why-icon\">\r\n                    \ud83d\udc68\u200d\ud83d\udcbb\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Expert Support\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Direct access to senior designers. No bots, just real\r\n                    human experts helping you grow.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n     CLIENT STORIES\r\n========================================================= -->\r\n\r\n<section class=\"ws-client-stories\">\r\n\r\n    <div class=\"ws-story-container\">\r\n\r\n        <div class=\"ws-story-header\">\r\n\r\n            <span class=\"ws-story-tag\">\r\n                TESTIMONIALS\r\n            <\/span>\r\n\r\n            <h2 class=\"ws-story-title\">\r\n                Loved by <span>Growth-Minded Brands<\/span>\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div\r\n            class=\"ws-stack-area\"\r\n            id=\"wsStackArea\">\r\n        <\/div>\r\n\r\n\r\n        <div class=\"ws-story-controls\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"ws-story-arrow\"\r\n                id=\"wsStoryPrev\"\r\n                aria-label=\"Previous testimonial\">\r\n                \u2190\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"ws-story-arrow\"\r\n                id=\"wsStoryNext\"\r\n                aria-label=\"Next testimonial\">\r\n                \u2192\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div\r\n            class=\"ws-story-dots\"\r\n            id=\"wsStoryDots\">\r\n        <\/div>\r\n\r\n\r\n        <div class=\"ws-story-progress\">\r\n\r\n            <div\r\n                class=\"ws-story-progress-bar\"\r\n                id=\"wsStoryProgress\">\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n     FAQ\r\n========================================================= -->\r\n\r\n<section class=\"ws-faq-section\">\r\n\r\n    <div class=\"ws-faq-container\">\r\n\r\n        <div class=\"ws-faq-header\">\r\n\r\n            <span class=\"ws-faq-tag\">\r\n                FAQ\r\n            <\/span>\r\n\r\n            <h2 class=\"ws-faq-title\">\r\n                Frequently Asked <span>Questions<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"ws-faq-subtitle\">\r\n                Everything you need to know about our services,\r\n                process, pricing and website development.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"ws-faq-list\">\r\n\r\n\r\n            <div class=\"ws-faq-item active\">\r\n\r\n                <button\r\n                    class=\"ws-faq-question\"\r\n                    type=\"button\">\r\n\r\n                    <span>\r\n\r\n                        <span class=\"ws-faq-number\">\r\n                            01\r\n                        <\/span>\r\n\r\n                        What services does Webnsoft provide?\r\n\r\n                    <\/span>\r\n\r\n                    <span class=\"ws-faq-icon\">\r\n                        +\r\n                    <\/span>\r\n\r\n                <\/button>\r\n\r\n\r\n                <div class=\"ws-faq-answer\">\r\n\r\n                    <div class=\"ws-faq-answer-inner\">\r\n\r\n                        <p>\r\n                            Webnsoft provides professional website development,\r\n                            WordPress, Shopify, UI\/UX design, graphic design,\r\n                            SEO and digital marketing solutions tailored to\r\n                            your business needs.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-faq-item\">\r\n\r\n                <button\r\n                    class=\"ws-faq-question\"\r\n                    type=\"button\">\r\n\r\n                    <span>\r\n\r\n                        <span class=\"ws-faq-number\">\r\n                            02\r\n                        <\/span>\r\n\r\n                        Do you build custom WordPress websites?\r\n\r\n                    <\/span>\r\n\r\n                    <span class=\"ws-faq-icon\">\r\n                        +\r\n                    <\/span>\r\n\r\n                <\/button>\r\n\r\n\r\n                <div class=\"ws-faq-answer\">\r\n\r\n                    <div class=\"ws-faq-answer-inner\">\r\n\r\n                        <p>\r\n                            Yes. We create custom WordPress websites with\r\n                            modern UI, responsive layouts, optimized\r\n                            performance and functionality based on your\r\n                            specific requirements.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-faq-item\">\r\n\r\n                <button\r\n                    class=\"ws-faq-question\"\r\n                    type=\"button\">\r\n\r\n                    <span>\r\n\r\n                        <span class=\"ws-faq-number\">\r\n                            03\r\n                        <\/span>\r\n\r\n                        Can you develop Shopify stores?\r\n\r\n                    <\/span>\r\n\r\n                    <span class=\"ws-faq-icon\">\r\n                        +\r\n                    <\/span>\r\n\r\n                <\/button>\r\n\r\n\r\n                <div class=\"ws-faq-answer\">\r\n\r\n                    <div class=\"ws-faq-answer-inner\">\r\n\r\n                        <p>\r\n                            Absolutely. We build professional Shopify stores\r\n                            focused on clean design, mobile responsiveness,\r\n                            user experience, speed and conversions.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-faq-item\">\r\n\r\n                <button\r\n                    class=\"ws-faq-question\"\r\n                    type=\"button\">\r\n\r\n                    <span>\r\n\r\n                        <span class=\"ws-faq-number\">\r\n                            04\r\n                        <\/span>\r\n\r\n                        How long does website development take?\r\n\r\n                    <\/span>\r\n\r\n                    <span class=\"ws-faq-icon\">\r\n                        +\r\n                    <\/span>\r\n\r\n                <\/button>\r\n\r\n\r\n                <div class=\"ws-faq-answer\">\r\n\r\n                    <div class=\"ws-faq-answer-inner\">\r\n\r\n                        <p>\r\n                            The timeline depends on the project's size and\r\n                            functionality. A standard business website can\r\n                            usually be completed much faster than a large\r\n                            eCommerce or custom development project.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-faq-item\">\r\n\r\n                <button\r\n                    class=\"ws-faq-question\"\r\n                    type=\"button\">\r\n\r\n                    <span>\r\n\r\n                        <span class=\"ws-faq-number\">\r\n                            05\r\n                        <\/span>\r\n\r\n                        Will my website be mobile responsive?\r\n\r\n                    <\/span>\r\n\r\n                    <span class=\"ws-faq-icon\">\r\n                        +\r\n                    <\/span>\r\n\r\n                <\/button>\r\n\r\n\r\n                <div class=\"ws-faq-answer\">\r\n\r\n                    <div class=\"ws-faq-answer-inner\">\r\n\r\n                        <p>\r\n                            Yes. Every website is designed to provide a\r\n                            smooth experience across desktop, tablet and\r\n                            mobile devices.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ws-faq-item\">\r\n\r\n                <button\r\n                    class=\"ws-faq-question\"\r\n                    type=\"button\">\r\n\r\n                    <span>\r\n\r\n                        <span class=\"ws-faq-number\">\r\n                            06\r\n                        <\/span>\r\n\r\n                        Can you help with SEO after development?\r\n\r\n                    <\/span>\r\n\r\n                    <span class=\"ws-faq-icon\">\r\n                        +\r\n                    <\/span>\r\n\r\n                <\/button>\r\n\r\n\r\n                <div class=\"ws-faq-answer\">\r\n\r\n                    <div class=\"ws-faq-answer-inner\">\r\n\r\n                        <p>\r\n                            Yes. We can provide SEO services including\r\n                            on-page optimization, technical SEO, content\r\n                            strategy and other digital marketing solutions\r\n                            to help improve your online visibility.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"ws-faq-bottom-line\"><\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n     JAVASCRIPT\r\n========================================================= -->\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n    const testimonials = [\r\n        {text:\"Webnsoft transformed our digital presence. Their Senior WordPress expertise helped us build a modern UI that actually converts. A total game-changer for our international growth.\",initials:\"SK\",name:\"Sameer Khan\",role:\"Tech Startup \u00b7 London, UK\"},\r\n        {text:\"Finally found a development team that understands both high-end UI\/UX and professional branding. They delivered the project ahead of schedule with premium quality.\",initials:\"SR\",name:\"Sarah Rodriguez\",role:\"Marketing Director\"},\r\n        {text:\"As a professional agency, we outsource our premium design tasks to Webnsoft. The quality is excellent, turnaround is fast, and it has freed up our team to focus on core work.\",initials:\"AP\",name:\"Alistair Park\",role:\"Marketing Agency \u00b7 USA\"},\r\n        {text:\"Webnsoft delivered exactly what we needed. The website looks premium, loads fast, and the entire process was smooth from start to finish.\",initials:\"JM\",name:\"Jason Miller\",role:\"Operations Head\"},\r\n        {text:\"Securing a mortgage framework for my property was seamless. Their financial team guided me through every hassle.\",initials:\"ER\",name:\"Elena Rostova\",role:\"Real Estate Investor\"},\r\n        {text:\"Managing auto insurance for a corporate fleet is challenging, but they structured a highly cost-effective policy.\",initials:\"MB\",name:\"Marcus Brody\",role:\"Logistics Manager\"},\r\n        {text:\"Their team handled our brand SEO and also helped us set up our entire business framework smoothly.\",initials:\"RK\",name:\"Robert Khan\",role:\"Business Owner\"},\r\n        {text:\"The website development team built a lightning-fast site and completely transformed our online store.\",initials:\"RV\",name:\"Robert Vance\",role:\"E-commerce Founder\"}\r\n    ];\r\n\r\n    const stack=document.getElementById(\"wsStackArea\");\r\n    if(!stack) return;\r\n\r\n    function createCard(item){\r\n        const card=document.createElement(\"div\");\r\n        card.className=\"ws-stack-card\";\r\n        card.innerHTML=`\r\n            <div class=\"ws-stack-top\">\r\n                <div><\/div>\r\n                <div class=\"ws-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n            <\/div>\r\n            <p class=\"ws-story-content\">\"${item.text}\"<\/p>\r\n            <div>\r\n                <div class=\"ws-divider\"><\/div>\r\n                <div class=\"ws-client-info\">\r\n                    <div class=\"ws-client-avatar\">${item.initials}<\/div>\r\n                    <div class=\"ws-client-name\">\r\n                        <h4>${item.name}<\/h4>\r\n                        <span>${item.role}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n        return card;\r\n    }\r\n\r\n    const topRow=document.createElement(\"div\");\r\n    topRow.className=\"ws-review-row top-row\";\r\n\r\n    const bottomRow=document.createElement(\"div\");\r\n    bottomRow.className=\"ws-review-row bottom-row\";\r\n\r\n    testimonials.forEach(function(item,index){\r\n        topRow.appendChild(createCard(item));\r\n        if(index % 2 === 0){\r\n            bottomRow.appendChild(createCard(item));\r\n        }\r\n    });\r\n\r\n    const topCards=Array.from(topRow.children);\r\n    topCards.forEach(function(card){\r\n        topRow.appendChild(card.cloneNode(true));\r\n    });\r\n\r\n    const bottomCards=Array.from(bottomRow.children);\r\n    bottomCards.forEach(function(card){\r\n        bottomRow.appendChild(card.cloneNode(true));\r\n    });\r\n\r\n    stack.appendChild(topRow);\r\n    stack.appendChild(bottomRow);\r\n\r\n    \/* =====================================================\r\n       FAQ ACCORDION\r\n    ===================================================== *\/\r\n\r\n    const faqItems =\r\n        document.querySelectorAll(\r\n            \".ws-faq-item\"\r\n        );\r\n\r\n\r\n    faqItems.forEach(function(item){\r\n\r\n        const button =\r\n            item.querySelector(\r\n                \".ws-faq-question\"\r\n            );\r\n\r\n\r\n        button.addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n                const isActive =\r\n                    item.classList.contains(\r\n                        \"active\"\r\n                    );\r\n\r\n\r\n                faqItems.forEach(\r\n                    function(otherItem){\r\n\r\n                        otherItem.classList.remove(\r\n                            \"active\"\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                if(!isActive){\r\n\r\n                    item.classList.add(\r\n                        \"active\"\r\n                    );\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n    });\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n<style>\r\n\/* =========================================================\r\n   FAQ MOBILE FIX\r\n========================================================= *\/\r\n.ws-faq-section,\r\n.ws-faq-container,\r\n.ws-faq-list,\r\n.ws-faq-item{\r\n    width:100%;\r\n    max-width:100%;\r\n    box-sizing:border-box;\r\n}\r\n\r\n.ws-faq-question{\r\n    box-sizing:border-box;\r\n}\r\n\r\n.ws-faq-question > span:first-child{\r\n    flex:1 1 auto;\r\n    min-width:0;\r\n    max-width:100%;\r\n    overflow-wrap:anywhere;\r\n    word-break:normal;\r\n    white-space:normal;\r\n}\r\n\r\n.ws-faq-question > .ws-faq-icon{\r\n    flex:0 0 34px;\r\n}\r\n\r\n@media(max-width:600px){\r\n    .ws-faq-section{\r\n        width:100%;\r\n        max-width:100%;\r\n        padding:70px 18px 75px !important;\r\n        box-sizing:border-box;\r\n        overflow:hidden;\r\n    }\r\n\r\n    .ws-faq-container{\r\n        width:100%;\r\n        max-width:100%;\r\n        margin:0;\r\n        box-sizing:border-box;\r\n    }\r\n\r\n    .ws-faq-header{\r\n        width:100%;\r\n        max-width:100%;\r\n        box-sizing:border-box;\r\n    }\r\n\r\n    .ws-faq-title{\r\n        font-size:30px !important;\r\n        line-height:1.12;\r\n        overflow-wrap:normal;\r\n        word-break:normal;\r\n    }\r\n\r\n    .ws-faq-subtitle{\r\n        width:100%;\r\n        max-width:100%;\r\n        box-sizing:border-box;\r\n        font-size:13px;\r\n        line-height:1.8;\r\n    }\r\n\r\n    .ws-faq-list{\r\n        width:100%;\r\n        gap:14px;\r\n    }\r\n\r\n    .ws-faq-item{\r\n        width:100%;\r\n        min-width:0;\r\n        max-width:100%;\r\n        border-radius:17px;\r\n    }\r\n\r\n    .ws-faq-question{\r\n        width:100%;\r\n        min-width:0;\r\n        padding:20px 18px !important;\r\n        gap:12px;\r\n        font-size:14px !important;\r\n        line-height:1.45;\r\n    }\r\n\r\n    .ws-faq-question > span:first-child{\r\n        min-width:0;\r\n        flex:1 1 0;\r\n        overflow-wrap:break-word;\r\n    }\r\n\r\n    .ws-faq-question > .ws-faq-icon{\r\n        width:30px;\r\n        height:30px;\r\n        min-width:30px;\r\n        flex:0 0 30px;\r\n        font-size:18px;\r\n    }\r\n\r\n    .ws-faq-answer{\r\n        width:100%;\r\n        max-width:100%;\r\n    }\r\n\r\n    .ws-faq-answer-inner{\r\n        width:100%;\r\n        max-width:100%;\r\n        box-sizing:border-box;\r\n    }\r\n\r\n    .ws-faq-answer p{\r\n        width:100%;\r\n        max-width:100%;\r\n        box-sizing:border-box;\r\n        padding:0 18px 20px !important;\r\n        margin:0;\r\n        font-size:13px !important;\r\n        line-height:1.8;\r\n        overflow-wrap:break-word;\r\n    }\r\n}\r\n\r\n@media(max-width:400px){\r\n    .ws-faq-section{\r\n        padding-left:16px !important;\r\n        padding-right:16px !important;\r\n    }\r\n\r\n    .ws-faq-title{\r\n        font-size:28px !important;\r\n    }\r\n\r\n    .ws-faq-question{\r\n        padding:18px 16px !important;\r\n        font-size:13.5px !important;\r\n    }\r\n\r\n    .ws-faq-answer p{\r\n        padding-left:16px !important;\r\n        padding-right:16px !important;\r\n    }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trusted Design Partner Your Creative Design Agency \u2014 Built for Growth We are a digital agency focused on building modern, fast, and conversion-driven websites. Along with development, we support brands with SEO, marketing, and design to ensure long-term growth. Get Started View Portfolio 0 Projects 0 Client Satisfaction 0 Brands Built 0 Avg Delivery Services [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5374","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webnsofts.com\/index.php?rest_route=\/wp\/v2\/pages\/5374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnsofts.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webnsofts.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webnsofts.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webnsofts.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5374"}],"version-history":[{"count":226,"href":"https:\/\/webnsofts.com\/index.php?rest_route=\/wp\/v2\/pages\/5374\/revisions"}],"predecessor-version":[{"id":5674,"href":"https:\/\/webnsofts.com\/index.php?rest_route=\/wp\/v2\/pages\/5374\/revisions\/5674"}],"wp:attachment":[{"href":"https:\/\/webnsofts.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}