:root {
      --blue-start: #355ca7;
      --blue-end: #0183d0;
      --text-main: #f9fafb;
      --text-muted: #cbd5f5;
      --e-global-color-primary: #6EC1E4;
      --e-global-color-secondary: #54595F;
      --e-global-color-text: #7A7A7A;
      --e-global-color-accent: #61CE70;
      --e-global-color-6e19eea: #186BCC;
      --e-global-color-42f8459: #1DC1E6;
      --e-global-color-ee26253: #F4FAFF;
      --e-global-color-89ca1e7: #F3F5F7;
      --e-global-color-7bd5bb5: #00CAE0;
      --e-global-color-47897d4: #DBEFFA;
    }

    .demo-shell a { color: inherit; text-decoration: none; }
    .demo-shell .content-wrapper {
      margin-left: 0 !important;
      padding: 0 !important;
      min-height: 100vh;
    }

    .demo-footer-top {
      display:grid; grid-template-columns:1fr 1fr; background:linear-gradient(to right, var(--blue-start) 0%, var(--blue-end) 100%);
      align-items:center;
      padding:2%;
    }
    .demo-footer-form-col {
      padding: 4% 10% 5% 15%;
      color: #fff;
      gap: 15px;
      display: flex;
      flex-direction: column;
    }
    .demo-footer-social { display:flex; justify-content:center; gap:40px; padding:6px 0; margin-bottom:3%; }
    .demo-footer-social a { font-size:28px; color:#fff; }
    .demo-footer-social a:hover { color:#1DC1E6; }
    .demo-footer-title { text-align:center; font-family:Georgia,serif; font-size:50px; font-weight:700; line-height:1.2; color:#1DC1E6; margin-top:-2%; margin-bottom:12px; }
    .demo-footer-subtitle { text-align:center; font-family:Montserrat,sans-serif; font-size:18px; font-weight:500; line-height:1.3em; color:#fff; margin:0 7% 18px; }
    .footer-contact-form { display:flex; flex-direction:column; gap:15px; margin:0; padding:0 2px; }
    .footer-contact-form input[type="text"], .footer-contact-form input[type="email"], .footer-contact-form input[type="tel"], .footer-contact-form textarea {
      width:100%; border:1px solid #D7EFFF; border-radius:4px; font-family:'Poppins',sans-serif; font-size:14px; color:#000; padding:10px 12px;
    }
    .footer-contact-form textarea { height:10em; resize:vertical; }
    .footer-contact-form button[type="submit"] {
      width:100%; padding:12px; margin-top:4px; border:none; border-radius:4px; background:linear-gradient(150deg,#186BCC 0%,#19A7C8 100%);
      color:#fff; font-family:'Racing Sans One',sans-serif; font-size:16px; letter-spacing:.5px; cursor:pointer;
    }
    .footer-form-status { text-align:center; font-family:'Poppins',sans-serif; font-size:14px; margin-top:8px; min-height:1.4em; }
    .footer-form-status.success { color:#2ecc71; }
    .footer-form-status.error { color:#e74c3c; }
    .demo-footer-image-col img { width:100%; height:auto; object-fit:contain; display:block; margin:-20% 0 35%; }
    .demo-footer-bottom {
      min-height:350px; display:grid; grid-template-columns:1fr 1fr; align-items:center; border-top:5px solid #66B6D7;
      background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('/images/uploads/2024/10/home-1.jpg') center top/cover no-repeat;
      color:#fff;
    }
    .demo-footer-logo { display:flex; justify-content:center; align-items:center; height:100%; }
    .demo-footer-logo img { width:65%; }
    .demo-footer-links { display:grid; grid-template-columns:1fr 1fr; justify-content:center; align-items:start; }
    .demo-footer-links > div { text-align:left; }
    .demo-footer-links h4 { font-family:Montserrat,sans-serif; font-size:22px; font-weight:700; color:#1DC1E6; margin:0 0 12px 0; }
    .demo-footer-links ul { list-style:none; margin:0; padding:0; }
    .demo-footer-links li { margin:14px 0; font-family:Montserrat,sans-serif; font-size:16px; color:#fff; }
    .demo-footer-links li:hover { color:#1DC1E6; }

    @media (max-width: 767px) {
      .demo-footer-top { grid-template-columns:1fr; padding:10% 0; }
      .demo-footer-form-col {
        padding: 5% 5%;
        gap: 30px;
        display: flex;
        flex-direction: column;
      }
      .demo-footer-title { font-size:30px; margin:0; }
      .demo-footer-subtitle { line-height:1.8; margin-top:20px; margin-bottom:0; }
      .demo-footer-social { margin:0; padding:0; }
      .footer-contact-form { margin:0; padding:0; gap:15px; }
      .demo-footer-image-col { padding:5% 5% 15% 8%; }
      .demo-footer-image-col img { margin:0; }
      .demo-footer-bottom { min-height:250px; grid-template-columns:1fr; background-position:top center; background-size:cover; }
      .demo-footer-logo { min-height:220px; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .9)); }
      .demo-footer-logo img { width:81%; max-width:85%; height:90px; }
      .demo-footer-links { display:none; }
    }

:root {
      --hero-bg: url('/images/uploads/2021/02/Depositphotos_10581059_l-2015-1.jpg');
      --hero-primary: #ffffff;
      --hero-secondary: #7A7A7A;
      --hero-top-overlay: rgba(84, 89, 95, 0.72);
      --hero-bottom-overlay: rgba(255, 255, 255, 0.75);
      --shape-color: #ffffff;
    }

    * {
      box-sizing: border-box;
    }

    .hero-content,
    .services-inner,
    .ai-inner,
    .blog-grid-inner,
    .mockup-demo-inner {
      width: 100%;
      margin: 0 auto;
      padding: 0 6.5% 0 11%;
    }

    .testimonials-demo-inner {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 6% !important;
      padding-right: 7.5% !important;
      overflow: hidden;
    }

    .about-inner {
      width: 100%;
      margin: 0 auto;
      padding: 0 11% 0 6%;
    }

    html,
    html, body {
      width: 100%;
      max-width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f3f5f7;
      color: #222;
    }

    .hero-demo {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-image: var(--hero-bg);
      background-position: center center;
      background-size: cover;
      padding: 0;
    }

    .hero-demo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.08);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
    }

    .hero-title-wrap,
    .hero-subtitle-wrap {
      text-align: center;
      margin-left: 15%;
      margin-right: 15%;
      padding: 1.5%;
    }

    .hero-title-wrap {
      background: var(--hero-top-overlay);
      margin-bottom: 18px;
    }

    .hero-subtitle-wrap {
      background: var(--hero-bottom-overlay);
    }

    .hero-title,
    .hero-subtitle {
      margin: 0;
      font-family: 'Racing Sans One', sans-serif;
      font-weight: 600;
    }

    .hero-title {
      color: var(--hero-primary);
      font-size: 50px;
      line-height: 1.6em;
      letter-spacing: 5px;
      text-transform: uppercase;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .hero-subtitle {
      position: relative;
      z-index: 1;
      color: var(--hero-secondary);
      font-size: 44px;
      line-height: 1.6em;
      text-shadow: 0 1px 4px rgba(255, 255, 255, 0.35);
    }

    @media (max-width: 1024px) {
      .hero-title-wrap,
      .hero-subtitle-wrap {
        margin-left: 10%;
        margin-right: 10%;
      }

      .hero-title {
        font-size: 42px;
        line-height: 1.6em;
        padding: 10px 16px;
      }

      .hero-title-wrap {
        margin-bottom: 16px;
      }

      .hero-subtitle {
        font-size: 34px;
        line-height: 1.6em;
        padding: 10px 16px;
      }

    }

    .services-demo {
      padding: 84px 0 96px;
      background: #f3f5f7;
    }

    .services-heading {
      margin: 0 0 56px;
      text-align: center;
      font-family: 'Racing Sans One', sans-serif;
      font-size: 44px;
      font-weight: 800;
      line-height: 1.6em;
      letter-spacing: 3px;
      color: #19A7C8;
      text-transform: none;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 40px;
      margin: 5% 0 0;
    }

    .service-card {
      position: relative;
      min-height: 400px;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .service-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(2, 1, 1, 0.55);
      z-index: 0;
    }

    .service-title {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      padding: 15px 5%;
      text-align: center;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      transform: translateY(-50%);
      z-index: 2;
      transition: opacity 0.1s ease, transform 0.1s ease;
    }

    .service-title h3 {
      margin: 0;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.6em;
      letter-spacing: 1.5px;
      color: #fff;
    }

    .service-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 28px 0;
      text-align: center;
      background: #19A7C8;
      opacity: 0;
      transform: translate(-50%, -50%) translateY(300px);
      z-index: 3;
      transition: opacity 0.4s ease, transform 0.7s ease;
    }

    .service-card:hover .service-title {
      opacity: 0;
      transform: translateY(calc(-50% - 50px));
    }

    .service-card:hover .service-overlay {
      opacity: 1;
      transform: translate(-50%, -50%) translateY(0);
      transition: opacity 0.4s ease 0.1s, transform 0.7s ease 0.1s;
    }

    .service-overlay p {
      margin: 0 8% 40px;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.7;
      color: #fff;
      text-align: center;
    }

    .service-overlay a {
      display: inline-block;
      background: #2F66A9;
      color: #fff;
      text-decoration: none;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 4px;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .service-overlay a:hover {
      background: #255489;
      transform: scale(1.05);
    }

    .mask-container {
      container-type: inline-size;
      --mask-head-size: calc(0.057 * 100cqw);
    }

    .mask-box {
      margin-top: calc(-1 * var(--mask-head-size) - 1px);
      padding-top: calc(var(--mask-head-size) + 1px);
      mask-image:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="57"><g transform="scale(1,-1)" transform-origin="50%"><path d="M1000 0H0v52C62.49 28.01 125.02 4 250 4c250.03 0 249.97 96 500 96 124.98 0 187.51-24.01 250-48V0Z"/></g></svg>'),
        linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px));
      mask-repeat: no-repeat;
      mask-position: top, center;
      mask-size: 100%;
      background-color: #ffffff;
      position: relative;
      z-index: 10;
    }

    .testimonials-demo {
      position: relative;
      background: #f3f5f7;
      padding: 84px 0 0;
      max-width: 100%;
      margin: 0;
      overflow: hidden;
    }

    .testimonials-heading {
      text-align: center;
      font-family: 'Racing Sans One', sans-serif;
      font-size: 44px;
      font-weight: 900;
      letter-spacing: 6px;
      line-height: 1.6em;
      color: #1DC1E6;
      text-transform: none;
      margin: 0;
    }

    .testimonials-wave {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      z-index: 2;
    }

    .testimonials-wave svg {
      display: block;
      width: 100%;
      height: 120px;
    }

    .testimonials-inner {
      position: relative;
      z-index: 1;
      padding: 0 5.5% 0 3%;
      margin: 0;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
      gap: 18px;
      align-items: end;
      min-width: 0;
    }

    .scroll-fade-element {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      will-change: opacity, transform;
    }

    .scroll-fade-element.is-visible {
      opacity: 1;
      transform: translateY(0);
      padding: 0 !important;
    }

    .testimonials-visual {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      align-self: end;
      min-height: 100%;
      margin: 0;
      padding: 0;
      overflow: visible;
    }

    .testimonials-visual img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center bottom;
      align-self: end;
      margin-left: auto;
      transform-origin: bottom right;
      transform: none;
    }

    @media (max-width: 1350px) {
      .testimonials-visual img {
        transform: none;
      }
    }

    .testimonials-content {
      width: 100%;
      padding: 0 0 14% 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      align-self: end;
      min-height: 88%;
      margin: -8px auto 0;
      min-width: 0;
      overflow: hidden;
    }

    .testimonials-content h2 {
      margin: 0 0 40px;
      padding: 0;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 31px;
      font-weight: 700;
      line-height: 1.2;
      color: #222;
      text-align: center;
    }

    .testimonial-logo {
      text-align: center;
      margin-bottom: -26px;
      position: relative;
      z-index: 5;
    }

    .testimonial-logo img {
      width: 44px;
      border: 3px solid #00CAE0;
      border-radius: 999px;
      background: #fff;
    }

    .testimonial-slider {
      position: relative;
      overflow: hidden;
      z-index: 1;
      margin-top: 8px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .testimonial-slider::before,
    .testimonial-slider::after {
      content: none !important;
      display: none !important;
    }

    .testimonial-viewport {
      overflow: hidden;
      border-radius: 20px;
      position: relative;
    }

    .testimonial-track {
      display: flex;
      align-items: stretch;
      transition: transform 0.75s ease;
      will-change: transform;
      touch-action: pan-y;
    }

    .testimonial-slide {
      min-width: 100%;
      width: 100%;
      flex: 0 0 100%;
      display: flex;
      flex-direction: column;
    }

    .testimonial-slide.is-active {
      z-index: 1;
    }

    .testimonial-slide .testimonial-card {
      flex: 1;
    }

    .testimonial-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 44px 28px 44px;
      position: relative;
      margin: 0;
    }

    @media (min-width: 1100px) {
      .testimonial-card {
        padding-bottom: 24px;
      }
    }

    .testimonial-rating {
      text-align: center;
      color: #00CAE0;
      font-size: 18px;
      letter-spacing: 2px;
      margin-bottom: 12px;
    }

    .testimonial-text {
      margin: 0 0 20px;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.8;
      color: #7594A5;
      text-align: left;
    }

    .testimonial-name {
      text-align: center;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: #222;
      margin-bottom: 2px;
    }

    .testimonial-job {
      text-align: center;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 10px;
      font-weight: 500;
      color: #00CAE0;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }


    .blog-grid-demo {
      background: #f3f5f7;
      padding: 96px 0 120px;
    }

    .blog-grid-heading {
      margin: 0 0 56px;
      text-align: center;
      font-family: 'Racing Sans One', sans-serif;
      font-size: 44px;
      font-weight: 800;
      line-height: 1.6em;
      letter-spacing: 3px;
      color: #19A7C8;
      text-transform: none;
    }

    .blog-view-all {
      text-align: center;
      margin-top: 40px;
    }

    .blog-view-all a {
      display: inline-block;
      background: linear-gradient(to left, #186BCC 50%, #1FD1F9 50%) right;
      background-size: 200%;
      color: #fff;
      text-decoration: none;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 11px 28px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.35);
      transition: background-position 0.15s ease-out, transform 0.15s ease-out;
    }

    .blog-view-all a:hover {
      background-position: left;
      transform: scale(1.05);
    }

    .blog-grid-wrap {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 28px;
      align-items: stretch;
      margin-top: 5%;
    }

    .blog-grid-main,
    .blog-grid-side-top,
    .blog-grid-side-bottom {
      position: relative;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .blog-grid-main:hover,
    .blog-grid-side-top:hover,
    .blog-grid-side-bottom:hover,
    .blog-grid-main:active,
    .blog-grid-side-top:active,
    .blog-grid-side-bottom:active {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
    }

    .blog-grid-main img,
    .blog-grid-side-top img,
    .blog-grid-side-bottom img {
      display: block;
      width: 100%;
      object-fit: cover;
    }

    .blog-grid-main img {
      height: 432px;
    }

    .blog-grid-side {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 28px;
    }

    .blog-grid-side-top img,
    .blog-grid-side-bottom img {
      height: 210px;
    }

    .blog-grid-side-bottom img.blog-grid-ecommerce-img {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      object-fit: cover;
      object-position: center center;
    }

    .blog-grid-main-content,
    .blog-grid-side-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      flex: 1;
    }

    .blog-grid-main-content {
      padding: 10px 20px;
    }

    .blog-grid-main-content h3,
    .blog-grid-side-content h3 {
      margin: 0 0 16px;
      font-family: 'Racing Sans One', sans-serif;
      font-weight: 900;
      color: #19A7C8;
    }

    .blog-grid-main-content h3 {
      font-size: 26px;
    }

    .blog-grid-side-content h3 {
      font-size: 26px;
    }

    .blog-grid-main-content p,
    .blog-grid-side-content p {
      margin: 0;
      font-family: 'Inter', Arial, sans-serif;
      color: #5d666f;
      line-height: 1.6;
    }

    .blog-grid-main-content p {
      font-size: 20px;
    }

    .blog-grid-side-content p {
      font-size: 18px;
    }

    .about-demo {
      position: relative;
      padding: 96px 0;
      background-color: #381D1D;
      background-image: url('/images/uploads/2022/02/Depositphotos_482961672_L-1.jpg');
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: scroll;
      overflow: hidden;
    }

    @supports (-webkit-touch-callout: none) {
      .about-demo {
        background-attachment: scroll;
      }
    }

    .about-demo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.2);
      pointer-events: none;
      z-index: 0;
    }

    .about-inner {
      position: relative;
      z-index: 1;
    }

    .about-heading {
      position: relative;
      z-index: 1;
      margin: 0 0 40px;
      text-align: center;
      font-family: 'Racing Sans One', sans-serif;
      font-size: 44px;
      font-weight: 900;
      letter-spacing: 6px;
      line-height: 1.6em;
      color: #1DC1E6;
      text-transform: none;
    }

    .about-paragraph-block {
      --about-left-col: 200px;
      --about-col-gap: 8px;
      margin-left: 6%;
      margin-right: 35%;
    }

    .about-top {
      display: grid;
      grid-template-columns: var(--about-left-col) minmax(0, 1fr);
      gap: var(--about-col-gap);
      margin-top: 5%;
      margin-left: 0;
      align-items: center;
    }

    .about-identity {
      text-align: left;
      padding-top: 28px;
      will-change: transform;
      transition: transform 0.05s linear;
    }

    .about-identity h3 {
      margin: 14px 0 0;
      font-family: 'Philosopher', serif;
      font-size: 20px;
      font-weight: 900;
      color: #ffffff;
    }

    .about-identity img {
      display: block;
      width: 110px;
      height: 110px;
      margin: 0;
      border-radius: 80%;
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
      object-fit: cover;
    }

    .about-copy {
      display: flex;
      align-items: center;
      font-family: 'Philosopher', serif;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.7;
      color: #ffffff;
      margin: 0;
    }

    .about-copy p {
      margin: 0;
    }

    .about-bottom {
      font-family: 'Philosopher', serif;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.7;
      color: #ffffff;
      margin: 18px 0 32px;
      margin-left: 0;
    }

    .about-button-wrap {
      margin-top: 42px;
      text-align: center;
    }

    .about-button {
      display: inline-block;
      background-color: #1DC1E6;
      color: #fff;
      text-decoration: none;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      padding: 11px 22px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
      transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    }

    .about-button:hover {
      opacity: 0.85;
      transform: scale(1.05);
    }

    .ai-demo {
      background-color: #0d1117;
      padding: 96px 0;
      color: #fff;
      position: relative;
      overflow: hidden;
      margin-top: 0;
    }

    .ai-demo::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg,
        transparent 0%,
        #00cae0 20%,
        #0070f3 50%,
        #7c3aed 80%,
        transparent 100%
      );
      z-index: 2;
    }

    .ai-demo::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg,
        transparent 0%,
        #00cae0 20%,
        #0070f3 50%,
        #7c3aed 80%,
        transparent 100%
      );
      z-index: 2;
    }

    .mockup-demo-section {
      position: relative;
      width: 100%;
      margin: 0 auto 0;
      box-sizing: border-box;
      padding: 0 0 120px;
      background: #fff;
    }

    .mockup-demo-container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 7%;
    }

    .mockup-demo-column,
    .mockup-demo-content {
      display: flex;
      flex: 1 1 0;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      min-width: 380px;
    }

    .mockup-demo-column {
      padding-top: 40px;
      margin-top: 48px;
      padding-bottom: 80px;
      gap: 28px;
      order: 2;
    }

    .mockup-demo-content {
      order: 1;
      padding-top: 40px;
    }

    .mockup-demo-content > * {
      margin: 10px 0;
    }

    .mockup-demo-headline {
      font-family: 'Racing Sans One', sans-serif;
      font-size: 32px;
      color: #19A7C8;
      text-align: left;
      font-style: italic;
      font-weight: 900;
      line-height: 1.6em;
      width: 100%;
    }

    .mockup-demo-secondary,
    .mockup-demo-arrow {
      display: none;
    }

    @keyframes arrowBounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-10px); }
    }

    .mockup-demo-description {
      font-family: 'Inter', sans-serif;
      font-size: 17px;
      font-weight: 400;
      color: #7A7A7A;
      line-height: 1.5;
      margin: 0 0 24px;
    }

    .mockup-demo-btn {
      display: inline-block;
      background: linear-gradient(to left, #186BCC 50%, #1FD1F9 50%) right;
      background-size: 200%;
      transition: 0.1s ease-out;
      color: #ffffff !important;
      padding: 10px 22px;
      font-size: 13px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      margin-top: 30px;
      font-weight: 700;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      border-radius: 5px;
    }

    .mockup-demo-btn:hover {
      background-position: left;
      transform: scale(1.1);
    }

    .mockup-demo-video {
      position: relative;
      width: 100%;
      max-width: 100%;
      padding-top: 58%;
      border-radius: 10px 10px 0 0;
      margin-bottom: 0;
    }

    .mockup-demo-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      object-fit: contain;
      z-index: 0;
    }

    .mockup-demo-active-video {
      position: absolute;
      top: 0;
      margin-top: 0;
      height: 102%;
      width: 100%;
      object-fit: contain;
      z-index: 1;
      border-radius: 20px 20px 0 0;
      transition: opacity 0.5s;
    }

    .ai-heading-wrap {
      margin: 0 0 48px;
      text-align: center;
    }

    .ai-heading-wrap .ai-intro-1,
    .ai-heading-wrap .ai-intro-2 {
      text-align: left;
    }

    .ai-heading {
      margin: 0 0 56px;
      font-family: 'Racing Sans One', sans-serif;
      font-size: 40px;
      font-weight: 600;
      line-height: 1.6em;
      letter-spacing: 2px;
      color: #19A7C8;
      text-transform: none;
    }

    .ai-intro-1,
    .ai-intro-2 {
      margin: 0 0 18px;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.8;
      color: #fff;
    }

    .ai-section {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px;
      align-items: center;
      margin-bottom: 72px;
    }

    .ai-section.reverse .ai-image-col {
      order: 1;
    }

    .ai-section.reverse .ai-text-col {
      order: 2;
    }

    .ai-image {
      width: 100%;
      height: 360px;
      object-fit: cover;
      border-radius: 6% 28% 6% 28% / 6% 6% 28% 28%;
      display: block;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.55), 0 40px 80px rgba(0,0,0,0.4), 0 0 60px rgba(0,112,243,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
      will-change: transform;
      transition: transform 0.12s linear;
    }

    .ai-text-col {
      position: relative;
    }

    .ai-number {
      position: absolute;
      top: -1.2rem;
      left: -0.8rem;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 8rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -4px;
      color: rgba(255,255,255,0.04);
      pointer-events: none;
      user-select: none;
    }

    .ai-subheading {
      position: relative;
      margin: 0 0 20px;
      padding-bottom: 14px;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.9rem;
      font-weight: 700;
      line-height: 1.6em;
      color: #fff;
    }

    .ai-subheading::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 44px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, #00cae0, #0070f3);
    }

    .ai-body {
      margin: 0 0 18px;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.8;
      color: #fff;
    }

    .ai-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ai-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.55;
      color: #fff;
    }

    .ai-check {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, #00cae0 0%, #0070f3 100%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .ai-outro {
      margin: 0 auto;
    }

    .ai-outro p {
      margin: 0 0 18px;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.85;
      color: #fff;
    }

    @media (max-width: 1100px) {
      .testimonials-inner {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .testimonials-content {
        max-width: 100%;
        width: 100%;
      }

      .testimonials-visual {
        display: none;
      }

      .testimonials-visual img {
        margin: 0 auto;
        max-width: none;
        height: auto;
        min-height: 0;
        transform: none;
      }
      .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .about-top {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 5%;
      }

      .about-paragraph-block {
        margin-right: 0;
      }

      .about-copy,
      .about-bottom {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }

      .ai-section {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .ai-section.reverse .ai-image-col,
      .ai-section.reverse .ai-text-col {
        order: initial;
      }

      .ai-image {
        height: 420px;
      }
    }

    @media (max-width: 1024px) {
      .testimonials-demo {
        padding: 72px 0 0;
        box-sizing: border-box;
      }

      .testimonials-demo-inner {
        padding: 0 5% 0 7% !important;
      }

      .testimonials-inner {
        padding: 0 5.5% 0 3%;
        box-sizing: border-box;
      }
    }

    @media (min-width: 767px) and (max-width: 1100px) {
      .testimonials-demo {
        padding: 84px 0 0 84px;
      }
    }

    @media (max-width: 767px) {
      .hero-title-wrap,
      .hero-subtitle-wrap {
        margin-left: 0;
        margin-right: 0;
        padding: 10px 16px;
      }

      .hero-title-wrap {
        margin-bottom: 18px;
        transform: none;
      }

      .hero-title {
        font-size: 36px;
        line-height: 1.6em;
        letter-spacing: 3px;
        padding: 0;
      }

      .hero-subtitle {
        font-size: 28px;
        line-height: 1.6em;
        padding: 0;
        transform: none;
      }

      .services-demo {
        padding: 64px 0;
      }

      .mockup-demo-column,
      .mockup-demo-content {
        min-width: 0;
      }

      .services-heading {
        font-size: 36px;
        margin-bottom: calc(28px + 5%);
      }

      .services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 5%;
      }

      .service-card {
        min-height: 430px;
      }

      .testimonials-demo {
        padding: 56px 0 12%;
        box-sizing: border-box;
      }

      .testimonials-heading {
        font-size: 40px;
        letter-spacing: 0;
        margin-bottom: 10%;
      }

      .testimonials-demo-inner {
        padding: 0 4.5% 0 8% !important;
      }

      .mockup-demo-inner {
        padding-left: 7.5%;
      }

      .testimonials-inner {
        padding: 0 5.5%;
        margin-top: 5%;
      }

      .testimonials-content {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .testimonial-slider,
      .testimonial-viewport,
      .testimonial-track,
      .testimonial-slide,
      .testimonial-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .testimonials-inner {
        max-width: 100%;
        box-sizing: border-box;
      }

      .testimonials-content h2,
      .testimonial-text {
        overflow-wrap: anywhere;
      }

      .testimonials-content h2 {
        display: none;
      }

      .testimonials-content {
        padding-bottom: 10%;
      }

      .testimonial-card {
        padding: 38px 22px 38px;
      }

      .testimonial-logo img {
        width: 48px;
      }

      .blog-grid-demo {
        padding: 72px 0 96px;
      }

      .blog-grid-heading {
        margin-bottom: calc(28px + 5%);
      }

      .blog-grid-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 5%;
      }

      .blog-grid-side {
        gap: 24px;
      }

      .blog-grid-main img,
      .blog-grid-side-top img,
      .blog-grid-side-bottom img {
        height: auto;
        max-height: 260px;
      }

      .blog-grid-main-content h3,
      .blog-grid-side-content h3 {
        font-size: 24px;
        margin-bottom: 24px;
      }

      .blog-grid-main-content p,
      .blog-grid-side-content p {
        font-size: 18px;
        line-height: 1.8;
      }

      .blog-grid-main-content,
      .blog-grid-side-content {
        padding: 16px 22px;
      }

      .about-demo {
        padding: 64px 0;
        background-color: #381D1D;
        background-attachment: scroll;
        background-position: center center;
        background-size: cover;
      }

      .about-heading,
      .ai-heading {
        font-size: 34px;
        margin-bottom: calc(28px + 5%);
      }

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

      .about-identity {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        margin-left: 0;
        padding-left: 0;
        transform: none !important;
      }

      .about-identity h3 {
        margin-left: 0;
      }

      .about-copy,
      .about-bottom {
        text-align: left;
      }

      .about-copy {
        margin-top: 5%;
      }


      .about-copy,
      .about-bottom,
      .ai-intro-1,
      .ai-intro-2,
      .ai-outro p {
        font-size: 18px;
      }

      .ai-demo {
        padding: 64px 0;
      }

      .mockup-demo-section {
        max-width: 100%;
        margin-top: 0;
        padding: 0 0 96px;
      }

      .mockup-demo-container {
        flex-direction: column-reverse;
        padding: 0;
        gap: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
      }

      .mockup-demo-column,
      .mockup-demo-content {
        width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .mockup-demo-column {
        max-width: 550px;
        margin: 24px 0 0 0;
        padding-top: 0;
        padding-bottom: 48px;
        gap: 0;
      }

      .mockup-demo-content {
        max-width: 600px;
        margin: 48px 0 0 0;
        padding-left: 0;
      }

      .mockup-demo-content > * {
        margin-top: 14px;
        margin-bottom: 14px;
      }

      .mockup-demo-arrow {
        width: 50px;
        height: 50px;
        background-color: #19A7C8;
        border-radius: 50%;
        margin-left: 0;
        margin-bottom: 40px;
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: arrowBounce 2s ease-in-out infinite;
      }

      .mockup-demo-secondary {
        display: block !important;
        font-family: 'Racing Sans One', sans-serif !important;
        font-size: 40px !important;
        font-style: italic !important;
        font-weight: 900 !important;
        line-height: 1.6em !important;
        color: #19A7C8 !important;
        margin-top: 20px;
        margin-bottom: 52px;
        align-self: center;
        text-align: center !important;
        width: 100%;
        background: none !important;
      }

      .mockup-demo-headline {
        font-size: 34px;
        text-align: center;
      }

      .demo-footer-social {
        margin-bottom: 0;
      }

      .mockup-demo-description {
        max-width: 100%;
        margin-top: 5%;
        margin-left: 0;
        font-size: 19px;
      }

      .mockup-demo-video {
        width: 100%;
      }

      .ai-heading-wrap {
        margin-bottom: 34px;
      }

      .ai-heading-wrap .ai-intro-1,
      .ai-heading-wrap .ai-intro-2 {
        padding: 0;
      }

      .ai-image {
        height: 200px;
        border-radius: 14px;
      }

      .ai-number {
        display: none;
      }

      .ai-subheading {
        font-size: 1.5rem;
        margin-bottom: 40px;
      }

      .ai-body,
      .ai-list li {
        font-size: 16px;
      }

      .ai-body {
        margin-bottom: 40px;
        font-weight: 500;
        color: #fff;
      }

      .ai-outro p {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
      }

      .ai-heading-wrap .ai-intro-1,
      .ai-heading-wrap .ai-intro-2 {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
      }

      .ai-section {
        gap: 40px;
        margin-bottom: 52px;
      }

      .ai-section.reverse {
        gap: 0;
        margin-bottom: 40px;
      }

      .ai-section.reverse .ai-text-col > .ai-body:last-child {
        margin-bottom: 40px;
      }
    }

    @media (max-width: 600px) {
      .hero-demo {
        min-height: 100vh;
      }

      .hero-content {
        min-height: 100vh;
        padding-top: 20px;
        padding-bottom: 0;
        align-items: center;
        justify-content: center;
      }

      .hero-title-wrap,
      .hero-subtitle-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .hero-title,
      .hero-subtitle {
        text-align: center;
        width: 100%;
      }

      .hero-title-wrap,
      .hero-subtitle-wrap {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 16px !important;
      }

      .hero-title-wrap {
        margin-bottom: 18px;
      }

      .hero-content,
      .services-inner,
      .ai-inner,
      .blog-grid-inner,
      .mockup-demo-inner {
        padding-left: 6.5%;
        padding-right: 6.5%;
      }

      .ai-inner {
        margin-left: 2%;
        padding-right: 10%;
      }

      .about-copy,
      .about-bottom {
        margin-right: 20px;
      }

      .about-inner {
        padding-left: 5%;
        padding-right: 6.5%;
      }
    }

    .services-view-all {
      text-align: center;
      margin: 40px auto 0;
    }

    .mockup-view-all {
      text-align: center;
      background: #fff;
      padding: 0 0 24px;
    }

    .blog-view-all a,
    .services-view-all-btn,
    .about-button,
    .mockup-demo-btn,
    .mockup-view-all-btn,
    .footer-contact-form button[type="submit"] {
      display: inline-block;
      background: linear-gradient(to left, #186BCC 50%, #1FD1F9 50%) right;
      background-size: 200%;
      color: #fff !important;
      text-decoration: none;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1px;
      border: none;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.35);
      transition: background-position 0.15s ease-out, transform 0.15s ease-out;
      cursor: pointer;
      margin: 1%;
      padding: calc(11px + 1%) calc(.8em + 9px);
    }

    .blog-view-all a:hover,
    .services-view-all-btn:hover,
    .about-button:hover,
    .mockup-demo-btn:hover,
    .mockup-view-all-btn:hover,
    .footer-contact-form button[type="submit"]:hover {
      background-position: left;
      transform: scale(1.05);
    }

    .blog-view-all a {
      font-size: 14px;
    }

    /* Universal section-heading rhythm rule (first visible heading per section) */
    .services-heading,
    .about-heading,
    .ai-heading-wrap,
    .testimonials-heading,
    .blog-grid-heading,
    .mockup-demo-secondary,
    .mockup-demo-headline {
      margin-bottom: 40px !important;
    }

    @media (max-width: 1024px) {
      .services-heading,
      .about-heading,
      .ai-heading-wrap,
      .testimonials-heading,
      .blog-grid-heading,
      .mockup-demo-secondary,
      .mockup-demo-headline {
        margin-bottom: 35px !important;
      }
    }

    @media (max-width: 767px) {
      .services-heading,
      .about-heading,
      .ai-heading-wrap,
      .testimonials-heading,
      .blog-grid-heading,
      .mockup-demo-secondary,
      .mockup-demo-headline {
        margin-bottom: calc(35px + 5%) !important;
      }
    }

    .content-wrapper h1,
    .content-wrapper h2,
    .content-wrapper h3 {
      line-height: 1.3em;
    }

    /* Universal heading line-height rule: every heading level */
    .demo-shell h1,
    .demo-shell h2,
    .demo-shell h3,
    .demo-shell h4,
    .demo-shell h5,
    .demo-shell h6 {
      line-height: 1.3em;
    }

    /* Universal button vertical rhythm */
    .demo-shell .elementor-button,
    .demo-shell button,
    .blog-view-all a,
    .services-view-all-btn,
    .about-button,
    .mockup-demo-btn,
    .mockup-view-all-btn,
    .footer-contact-form button[type="submit"] {
      font-size: 14px !important;
      padding-top: calc(9px + 1%) !important;
      padding-bottom: calc(9px + 1%) !important;
    }

    .services-view-all-btn,
    .mockup-demo-btn {
      margin-top: 3%;
    }

    @media (max-width: 767px) {
      .services-view-all { display: none; }
    }

    .mockup-view-all-btn {
      margin-top: 0;
      margin-bottom: 7%;
      padding-top: calc(7px + 1%) !important;
      padding-bottom: calc(7px + 1%) !important;
    }

    @media (max-width: 767px) {
      .blog-view-all a,
      .services-view-all-btn,
      .about-button,
      .mockup-demo-btn,
      .mockup-view-all-btn,
      .footer-contact-form button[type="submit"] {
        font-size: 14px;
        padding-top: calc(9px + 1%);
        padding-bottom: calc(9px + 1%);
        margin-top: 6%;
      }
    }

    @media (max-width: 900px) {
      .mockup-view-all { display: none; }
    }