/* NBSense base styles: copied from the inline <style> block of blog.html
   so the Scope of Work pages look exactly like the rest of the site. */
.light-background,
      :root {
         --surface-color: #ffffff
      }

      .dark-background,
      :root {
         --contrast-color: #ffffff
      }

      .php-email-form .error-message,
      .php-email-form .loading,
      .php-email-form .sent-message {
         padding: 15px;
         margin-bottom: 24px;
         display: none
      }

      .header,
      body {
         color: var(--default-color);
         background-color: var(--background-color)
      }

      .footer,
      .header,
      body {
         background-color: var(--background-color)
      }

      .iot,
      .iot .box,
      .iot .box .solutions-name {
         transform-style: preserve-3d
      }

      .hero .btn-link,
      .iot .box .buy,
      a,
      a:hover {
         text-decoration: none
      }

      :root {
         --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         --heading-font: "Nunito", sans-serif;
         --nav-font: "Inter", sans-serif;
         --background-color: #ffffff;
         --default-color: #212529;
         --heading-color: #2d465e;
         --accent-color: #075ebb;
         --nav-color: #212529;
         --nav-hover-color: #075ebb;
         --nav-mobile-background-color: #ffffff;
         --nav-dropdown-background-color: #ffffff;
         --nav-dropdown-color: #212529;
         --nav-dropdown-hover-color: #075ebb;
         scroll-behavior: smooth;
         --name-color: #ffffff;
         --card-bg-text: #ffffff
      }

      .light-background {
         --background-color: #f3f9ff
      }

      .dark-background {
         --background-color: #075ebb;
         --default-color: #ffffff;
         --heading-color: #ffffff;
         --surface-color: #409dfd
      }

      body {
         font-family: var(--default-font)
      }

      a {
         color: var(--accent-color);
         transition: .3s
      }

      a:hover {
         color: color-mix(in srgb, var(--accent-color), transparent 25%)
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
         color: var(--heading-color);
         font-family: var(--heading-font)
      }

      .php-email-form .error-message {
         background: #df1529;
         color: #fff;
         text-align: left;
         font-weight: 600
      }

      .php-email-form .sent-message {
         color: #fff;
         background: #059652;
         text-align: center;
         font-weight: 600
      }

      .php-email-form .loading {
         background: var(--surface-color);
         text-align: center
      }

      .php-email-form .loading:before {
         content: "";
         display: inline-block;
         border-radius: 50%;
         width: 24px;
         height: 24px;
         margin: 0 10px -6px 0;
         border: 3px solid var(--accent-color);
         border-top-color: var(--surface-color);
         animation: 1s linear infinite php-email-form-loading
      }

      @keyframes php-email-form-loading {
         0% {
            transform: rotate(0)
         }

         100% {
            transform: rotate(360deg)
         }
      }

      .header {
         --background-color: rgba(255, 255, 255, 0);
         padding: 20px 0;
         transition: .5s;
         z-index: 997
      }

      .header .header-container {
         background: var(--surface-color);
         border-radius: 50px;
         padding: 5px 25px;
         box-shadow: 0 2px 15px rgba(0, 0, 0, .1)
      }

      .scrolled .header .header-container {
         background: color-mix(in srgb, var(--surface-color), transparent 5%)
      }

      .header .logo {
         line-height: 1;
         padding-left: 5px
      }

      .header .logo img {
         max-height: 36px;
         margin-right: 8px
      }

      .header .logo h1 {
         font-size: 24px;
         margin: 0;
         font-weight: 500;
         color: var(--heading-color)
      }

      .header .btn-getstarted,
      .header .btn-getstarted:focus {
         color: var(--contrast-color);
         background: var(--accent-color);
         font-size: 14px;
         padding: 8px 20px;
         margin: 0 0 0 30px;
         border-radius: 50px;
         transition: .3s
      }

      .header .btn-getstarted:focus:hover,
      .header .btn-getstarted:hover {
         color: var(--contrast-color);
         background: color-mix(in srgb, var(--accent-color), transparent 15%)
      }

      @media (max-width:1200px) {
         .header {
            padding-top: 10px
         }

         .header .header-container {
            margin-left: 10px;
            margin-right: 10px;
            padding: 10px 5px 10px 15px
         }

         .header .logo {
            order: 1
         }

         .header .btn-getstarted {
            order: 2;
            margin: 0 10px 0 0;
            padding: 6px 15px
         }

         .header .navmenu {
            order: 3
         }
      }

      @media (min-width:1200px) {
         .navmenu {
            padding: 0
         }

         .navmenu ul {
            margin: 0;
            padding: 0;
            display: flex;
            list-style: none;
            align-items: center
         }

         .navmenu li {
            position: relative
         }

         .navmenu a,
         .navmenu a:focus {
            color: var(--nav-color);
            padding: 18px 15px;
            font-size: 16px;
            font-family: var(--nav-font);
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: .3s
         }

         .navmenu a i,
         .navmenu a:focus i {
            font-size: 12px;
            line-height: 0;
            margin-left: 5px;
            transition: .3s
         }

         .navmenu li:last-child a {
            padding-right: 0
         }

         .navmenu .active,
         .navmenu .active:focus,
         .navmenu li:hover>a {
            color: var(--nav-hover-color)
         }

         .navmenu .dropdown ul {
            margin: 0;
            padding: 10px 0;
            background: var(--nav-dropdown-background-color);
            display: block;
            position: absolute;
            visibility: hidden;
            left: 14px;
            top: 130%;
            opacity: 0;
            transition: .3s;
            border-radius: 4px;
            z-index: 99;
            box-shadow: 0 0 30px rgba(0, 0, 0, .1)
         }

         .navmenu .dropdown ul li {
            min-width: 200px
         }

         .navmenu .dropdown ul a {
            padding: 10px 20px;
            font-size: 15px;
            text-transform: none;
            color: var(--nav-dropdown-color)
         }

         .navmenu .dropdown ul a i {
            font-size: 12px
         }

         .navmenu .dropdown ul .active:hover,
         .navmenu .dropdown ul a:hover,
         .navmenu .dropdown ul li:hover>a {
            color: var(--nav-dropdown-hover-color)
         }

         .navmenu .dropdown:hover>ul {
            opacity: 1;
            top: 100%;
            visibility: visible
         }

         .navmenu .dropdown .dropdown ul {
            top: 0;
            left: -90%;
            visibility: hidden
         }

         .navmenu .dropdown .dropdown:hover>ul {
            opacity: 1;
            top: 0;
            left: -100%;
            visibility: visible
         }
      }

      .nav-product-link {
         display: none
      }

      @media (min-width:1000px) {
         .nav-product-link {
            display: list-item
         }
      }

      .footer {
         color: var(--default-color);
         font-size: 14px;
         position: relative
      }

      .footer .footer-top {
         padding-top: 50px
      }

      .footer .footer-about .logo {
         line-height: 1;
         margin-bottom: 25px
      }

      .footer .footer-about .logo img {
         max-height: 40px;
         margin-right: 6px
      }

      .footer .footer-about .logo span {
         color: var(--heading-color);
         font-family: var(--heading-font);
         font-size: 26px;
         font-weight: 700;
         letter-spacing: 1px
      }

      .footer .footer-about p {
         font-size: 14px;
         font-family: var(--heading-font)
      }

      .footer .social-links a {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
         font-size: 16px;
         color: color-mix(in srgb, var(--default-color), transparent 20%);
         margin-right: 10px;
         transition: .3s
      }

      .footer .social-links a:hover {
         color: var(--accent-color);
         border-color: var(--accent-color)
      }

      .footer h4 {
         font-size: 16px;
         font-weight: 700;
         position: relative;
         padding-bottom: 12px
      }

      .footer .footer-links {
         margin-bottom: 30px
      }

      .about .feature-list,
      .footer .footer-links ul {
         list-style: none;
         padding: 0;
         margin: 0
      }

      .footer .footer-links ul i {
         padding-right: 2px;
         font-size: 12px;
         line-height: 0
      }

      .footer .footer-links ul li {
         padding: 10px 0;
         display: flex;
         align-items: center
      }

      .footer .footer-links ul li:first-child {
         padding-top: 0
      }

      .footer .footer-links ul a {
         color: color-mix(in srgb, var(--default-color), transparent 30%);
         display: inline-block;
         line-height: 1
      }

      .faq .faq-arrow,
      .faq .faq-container .faq-active h3,
      .faq .faq-container .faq-item .faq-toggle:hover,
      .faq .faq-container .faq-item h3:hover,
      .features .nav-link:hover h4,
      .footer .footer-links ul a:hover,
      .hero .btn-link:hover,
      .hero .hero-content h1 .accent-text,
      .service-details .download-catalog a:hover {
         color: var(--accent-color)
      }

      .footer .footer-contact p {
         margin-bottom: 5px
      }

      .footer .copyright {
         padding: 25px 0;
         border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%)
      }

      .contact .info-item .content p:last-child,
      .contact .info-item:last-child,
      .faq .faq-container .faq-item:last-child,
      .features .tab-pane p:last-child,
      .footer .copyright p,
      .section-title p {
         margin-bottom: 0
      }

      .footer .credits {
         margin-top: 8px;
         font-size: 13px
      }

      .scroll-top {
         position: fixed;
         visibility: hidden;
         opacity: 0;
         right: 15px;
         bottom: -15px;
         z-index: 99999;
         background-color: var(--accent-color);
         width: 44px;
         height: 44px;
         border-radius: 50px;
         transition: .4s
      }

      .hero,
      .page-title,
      .section-title,
      .section-title h2 {
         position: relative
      }

      .page-title,
      .section,
      section {
         color: var(--default-color);
         background-color: var(--background-color)
      }

      .btn-5,
      .custom-btn {
         width: 130px;
         height: 40px
      }

      .scroll-top i {
         font-size: 24px;
         color: var(--contrast-color);
         line-height: 0
      }

      .scroll-top:hover {
         background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
         color: var(--contrast-color)
      }

      .scroll-top.active {
         visibility: visible;
         opacity: 1;
         bottom: 15px
      }

      @media screen and (max-width:768px) {
         [data-aos-delay] {
            transition-delay: 0 !important
         }
      }

      .page-title {
         padding: 170px 0 80px;
         text-align: center
      }

      .page-title h1 {
         font-size: 42px;
         font-weight: 700;
         margin-bottom: 10px
      }

      .page-title .breadcrumbs ol {
         display: flex;
         flex-wrap: wrap;
         list-style: none;
         justify-content: center;
         padding: 0;
         margin: 0;
         font-size: 16px;
         font-weight: 400
      }

      .features .tab-pane h3:after,
      .section-title h2:after {
         display: block;
         background: var(--accent-color);
         content: "";
         height: 3px
      }

      .page-title .breadcrumbs ol li+li {
         padding-left: 10px
      }

      .page-title .breadcrumbs ol li+li::before {
         content: "/";
         display: inline-block;
         padding-right: 10px;
         color: color-mix(in srgb, var(--default-color), transparent 70%)
      }

      .section,
      section {
         padding: 60px 0;
         scroll-margin-top: 90px;
         overflow: clip
      }

      @media (max-width:1199px) {
         .mobile-nav-toggle {
            color: var(--nav-color);
            font-size: 28px;
            line-height: 0;
            margin-right: 10px;
            cursor: pointer;
            transition: color .3s
         }

         .navmenu {
            padding: 0;
            z-index: 9997
         }

         .navmenu ul {
            display: none;
            list-style: none;
            position: absolute;
            inset: 60px 20px 20px 20px;
            padding: 10px 0;
            margin: 0;
            border-radius: 6px;
            background-color: var(--nav-mobile-background-color);
            overflow-y: auto;
            transition: .3s;
            z-index: 9998;
            box-shadow: 0 0 30px rgba(0, 0, 0, .1)
         }

         .navmenu a,
         .navmenu a:focus {
            color: var(--nav-dropdown-color);
            padding: 10px 20px;
            font-family: var(--nav-font);
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: .3s
         }

         .navmenu a i,
         .navmenu a:focus i {
            font-size: 12px;
            line-height: 0;
            margin-left: 5px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: .3s;
            background-color: color-mix(in srgb, var(--accent-color), transparent 90%)
         }

         .navmenu a i:hover,
         .navmenu a:focus i:hover {
            background-color: var(--accent-color);
            color: var(--contrast-color)
         }

         .navmenu .active,
         .navmenu .active:focus,
         .navmenu a:hover {
            color: var(--nav-dropdown-hover-color)
         }

         .navmenu .active i,
         .navmenu .active:focus i {
            background-color: var(--accent-color);
            color: var(--contrast-color);
            transform: rotate(180deg)
         }

         .navmenu .dropdown ul {
            position: static;
            display: none;
            z-index: 99;
            padding: 10px 0;
            margin: 10px 20px;
            background-color: var(--nav-dropdown-background-color);
            border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
            box-shadow: none;
            transition: .5s ease-in-out
         }

         .navmenu .dropdown ul ul {
            background-color: rgba(33, 37, 41, .1)
         }

         .navmenu .dropdown>.dropdown-active {
            display: block;
            background-color: rgba(33, 37, 41, .03)
         }

         .mobile-nav-active {
            overflow: hidden
         }

         .mobile-nav-active .mobile-nav-toggle {
            color: #fff;
            position: absolute;
            font-size: 32px;
            top: 15px;
            right: 15px;
            margin-right: 0;
            z-index: 9999
         }

         .mobile-nav-active .navmenu {
            position: fixed;
            overflow: hidden;
            inset: 0;
            background: rgba(33, 37, 41, .8);
            transition: .3s
         }

         .mobile-nav-active .navmenu>ul {
            display: block
         }

         .section,
         section {
            scroll-margin-top: 66px
         }
      }

      .section-title {
         text-align: center;
         padding-bottom: 60px
      }

      .section-title h2 {
         font-size: 32px;
         font-weight: 700;
         margin-bottom: 20px;
         padding-bottom: 20px
      }

      .section-title h2:after {
         position: absolute;
         width: 50px;
         left: 0;
         right: 0;
         bottom: 0;
         margin: auto
      }

      .hero {
         padding-top: 120px;
         background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 50%, color-mix(in srgb, var(--accent-color), transparent 98%) 25%, transparent 50%)
      }

      .hero::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-color), transparent 92%), transparent 40%);
         pointer-events: none
      }

      .hero .hero-content,
      .hero .hero-image {
         position: relative;
         z-index: 1
      }

      .hero .hero-content h1 {
         font-size: 3.5rem;
         font-weight: 700;
         line-height: 1.2;
         margin-bottom: 1.5rem
      }

      @media (max-width:992px) {
         .hero .hero-content {
            text-align: center;
            margin-bottom: 3rem
         }

         .hero .hero-content h1 {
            font-size: 2.5rem
         }

         .hero .hero-content .hero-buttons {
            justify-content: center
         }
      }

      .hero .company-badge {
         display: inline-flex;
         align-items: center;
         padding: .5rem 1rem;
         background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
         border-radius: 50px;
         color: var(--accent-color);
         font-weight: 500
      }

      .hero .btn-primary,
      .hero .customers-badge .avatar.more {
         background-color: var(--accent-color);
         color: var(--contrast-color)
      }

      .contact .contact-form .btn i,
      .hero .company-badge i {
         font-size: 1.25rem
      }

      .hero .btn-primary {
         border-color: var(--accent-color);
         padding: .75rem 2.5rem;
         border-radius: 50px;
         font-weight: 500;
         transition: .3s
      }

      .about .contact-info,
      .hero .customers-badge,
      .hero .stats-row {
         background-color: var(--surface-color)
      }

      .hero .btn-primary:hover {
         background-color: color-mix(in srgb, var(--accent-color), #000 20%);
         border-color: color-mix(in srgb, var(--accent-color), #000 20%)
      }

      .hero .btn-link {
         color: var(--heading-color);
         font-weight: 500;
         transition: .3s
      }

      .hero .btn-link i {
         font-size: 1.5rem;
         vertical-align: middle
      }

      .hero .hero-image {
         text-align: center
      }

      .hero .hero-image img {
         max-width: 100%;
         height: auto
      }

      .hero .customers-badge {
         position: absolute;
         bottom: 10px;
         right: 30px;
         padding: 1rem;
         border-radius: 10px;
         box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
         max-width: 300px;
         animation: 3s ease-in-out infinite float-badge;
         will-change: transform
      }

      .hero .customers-badge .customer-avatars {
         display: flex;
         align-items: center;
         margin-bottom: .5rem
      }

      .hero .customers-badge .avatar {
         width: 35px;
         height: 35px;
         border-radius: 50%;
         border: 2px solid var(--surface-color);
         margin-left: -8px
      }

      .hero .customers-badge .avatar:first-child {
         margin-left: 0
      }

      .hero .customers-badge .avatar.more {
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: .75rem;
         font-weight: 600
      }

      .hero .customers-badge p {
         font-size: .875rem;
         color: color-mix(in srgb, var(--default-color), transparent 40%)
      }

      .about .image-wrapper,
      .custom-btn,
      .hero .stats-row,
      .iot,
      .iot .box {
         position: relative
      }

      .hero .stats-row {
         z-index: 1;
         margin-top: 5rem;
         border-radius: 20px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
         padding-bottom: 2rem
      }

      .hero .stat-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 2rem
      }

      .hero .stat-item .stat-icon {
         flex-shrink: 0;
         width: 64px;
         height: 64px;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
         border-radius: 50px;
         transition: .3s
      }

      .hero .stat-item .stat-icon i {
         font-size: 1.5rem;
         color: var(--accent-color)
      }

      .hero .stat-item:hover .stat-icon {
         background-color: var(--accent-color)
      }

      .contact .info-box a,
      .features .nav-link.active h4,
      .hero .stat-item:hover .stat-icon i,
      .pricing .pricing-card.popular .features-list li,
      .pricing .pricing-card.popular .features-list li i,
      .pricing .pricing-card.popular .price .amount,
      .pricing .pricing-card.popular .price .currency,
      .pricing .pricing-card.popular .price .period,
      .pricing .pricing-card.popular h3,
      .pricing .pricing-card.popular h4,
      .service-details .help-box a,
      .service-details .help-box h4,
      .service-details .services-list a.active i {
         color: var(--contrast-color)
      }

      .hero .stat-item .stat-content {
         flex-grow: 1
      }

      .hero .stat-item .stat-content h4 {
         font-size: 1.25rem;
         margin-bottom: .25rem;
         font-weight: 600
      }

      .hero .stat-item .stat-content p {
         font-size: .875rem;
         color: color-mix(in srgb, var(--default-color), transparent 40%);
         margin: 0
      }

      @keyframes float-badge {

         0%,
         100% {
            transform: translateY(0)
         }

         50% {
            transform: translateY(-10px)
         }
      }

      .about .about-meta {
         color: var(--accent-color);
         font-weight: 600;
         margin-bottom: 1rem;
         display: inline-block
      }

      .about .about-title {
         font-size: 1.75rem;
         margin-bottom: 1rem;
         line-height: 1.2;
         font-weight: 700
      }

      .about .about-description {
         margin-bottom: 2rem;
         color: color-mix(in srgb, var(--default-color), transparent 20%)
      }

      .about .feature-list-wrapper {
         margin-bottom: 2rem
      }

      .about .feature-list li {
         display: flex;
         align-items: center;
         gap: .75rem;
         margin-bottom: 1rem;
         font-size: 1rem
      }

      .about .feature-list li i {
         color: var(--accent-color);
         font-size: 1.25rem
      }

      .about .profile .profile-image {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         object-fit: cover
      }

      .about .profile .profile-name {
         font-size: 1.125rem;
         margin: 0
      }

      .about .profile .profile-position {
         color: var(--accent-color);
         margin: 0;
         font-size: .875rem
      }

      .about .contact-info {
         padding: 1rem 1.5rem;
         border-radius: .5rem;
         box-shadow: 0 0 15px rgba(0, 0, 0, .06)
      }

      .about .contact-info i {
         color: var(--accent-color);
         font-size: 1.5rem
      }

      .about .contact-info .contact-label {
         color: color-mix(in srgb, var(--default-color), transparent 30%);
         font-size: .875rem;
         margin: 0
      }

      .about .contact-info .contact-number {
         font-weight: 600;
         margin: 0
      }

      .about .image-wrapper .small-image {
         position: absolute;
         top: 20%;
         left: -10%;
         width: 45%;
         border: 8px solid var(--surface-color)
      }

      .about .image-wrapper .experience-badge {
         position: absolute;
         bottom: 45%;
         right: 28%;
         background-color: var(--accent-color);
         color: var(--contrast-color);
         padding: 1.5rem;
         border-radius: .5rem;
         text-align: center;
         min-width: 200px;
         animation: 3s ease-in-out infinite experience-float
      }

      .about .image-wrapper .experience-badge h3 {
         color: var(--contrast-color);
         font-size: 2.5rem;
         margin: 0;
         line-height: .5
      }

      .about .image-wrapper .experience-badge h3 span {
         font-size: 1rem;
         display: inline-block;
         margin-left: .25rem
      }

      .about .image-wrapper .experience-badge p {
         margin: .5rem 0 0;
         font-size: .875rem
      }

      @keyframes experience-float {

         0%,
         100% {
            transform: translateY(0)
         }

         50% {
            transform: translateY(-10px)
         }
      }

      .iot {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-wrap: wrap;
         top: -50px
      }

      .iot .box {
         width: 300px;
         height: 400px;
         margin: 40px;
         border-radius: 20px;
         background-color: #232323;
         transition: .5s
      }

      .iot .box:hover {
         box-shadow: 10px -10px 20px rgba(155, 220, 40, .8)
      }

      .iot .box:hover:nth-child(2) {
         box-shadow: 10px -10px 20px rgba(29, 163, 195, .8)
      }

      .iot .box:hover:nth-child(3) {
         box-shadow: 10px -10px 20px rgba(235, 14, 47, .8)
      }

      .iot .box::after,
      .iot .box::before {
         content: "";
         position: absolute;
         top: 20px;
         left: 20px;
         font-size: 6em;
         font-weight: 900;
         color: var(--card-bg-text);
         font-style: italic;
         opacity: 0;
         transition: .5s
      }

      .iot .box:hover::after,
      .iot .box:hover::before {
         opacity: .04
      }

      .iot .box .solutions-name {
         position: absolute;
         top: 40px;
         left: 0;
         text-align: center;
         color: var(--name-color);
         width: 100%;
         transform: translate3d(0, 0, 75px);
         transition: .5s;
         opacity: 1;
         z-index: 10
      }

      .iot .box .buy,
      .iot .box .circle {
         position: absolute;
         left: 50%;
         transition: .5s;
         transform-style: preserve-3d
      }

      .iot .box:hover .solutions-name {
         top: 30px;
         opacity: 1
      }

      .iot .box .buy {
         bottom: 0;
         transform: translate3d(0, 0, 75px);
         color: #fff;
         background: #545454;
         padding: 10px 25px;
         border-radius: 30px;
         opacity: 1;
         z-index: 10
      }

      .iot .box .circle,
      .iot .box:hover .circle {
         width: 200px;
         height: 200px;
         border-radius: 50%;
         background: #fff;
         z-index: 10;
         opacity: 1
      }

      .iot .box:hover .buy {
         bottom: 30px;
         opacity: 1
      }

      .iot .box .circle {
         top: 50%;
         transform: translate3d(-50%, -50%, 0)
      }

      .iot .box .iot-product,
      .iot .box:hover .circle {
         top: 50%;
         transition: .5s;
         transform-style: preserve-3d;
         position: absolute;
         left: 50%
      }

      .iot .box:hover .circle {
         box-shadow: none;
         transform: translate3d(-50%, -50%, 35px)
      }

      .iot .box .iot-product {
         max-width: 300px;
         z-index: 11;
         transform: translate3d(-50%, -50%, 0) rotate(0)
      }

      .iot .box:hover .iot-product {
         transform: translate3d(-50%, -50%, 100px) rotate(0)
      }

      .iot .box:first-child .buy,
      .iot .box:first-child .circle {
         background: #85be23
      }

      .iot .box:nth-child(2) .buy,
      .iot .box:nth-child(2) .circle {
         background: #075ebb
      }

      .iot .box:nth-child(3) .buy,
      .iot .box:nth-child(3) .circle {
         background: #eb0e2f
      }

      .mode-switch {
         background-color: transparent;
         border: none;
         padding: 0;
         color: var(--name-color);
         display: flex;
         justify-content: center;
         align-items: center
      }

      .mode-switch.active .moon {
         fill: var(--name-color)
      }

      .box::before {
         position: absolute;
         content: "";
         top: 0;
         width: 100%;
         height: 100%;
         border-radius: 2.25rem;
         z-index: -1;
         border: .155rem solid transparent;
         -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
         -webkit-mask-composite: destination-out;
         mask-composite: exclude
      }

      .blue {
         background: radial-gradient(ellipse at right top, #1da3c3ed 0, var(--box-bg) 47%, var(--box-bg) 100%)
      }

      .blue:before {
         background: linear-gradient(45deg, var(--box-bg), var(--box-bg), var(--box-bg), var(--box-bg), #1da3c3) border-box
      }

      .red {
         background: radial-gradient(ellipse at right top, #eb0e2fed 0, var(--box-bg) 47%, var(--box-bg) 100%)
      }

      .red:before {
         background: linear-gradient(45deg, var(--box-bg), var(--box-bg), var(--box-bg), var(--box-bg), #eb0e2f) border-box
      }

      .green {
         background: radial-gradient(ellipse at right top, #9bdc28ed 0, var(--box-bg) 47%, var(--box-bg) 100%)
      }

      .green:before {
         background: linear-gradient(45deg, var(--box-bg), var(--box-bg), var(--box-bg), var(--box-bg), #9bdc28) border-box
      }

      .features .nav-tabs,
      .service-details .services-list a {
         background-color: color-mix(in srgb, var(--default-color), transparent 96%)
      }

      .features .nav-tabs {
         border: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border-radius: 50px;
         padding: 6px;
         width: auto
      }

      .features .nav-item {
         margin: 0;
         padding: 0 5px 0 0
      }

      .features .nav-item:last-child {
         padding-right: 0
      }

      .features .nav-link {
         background-color: none;
         color: var(--heading-color);
         padding: 10px 30px;
         transition: .3s;
         border-radius: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         height: 100%;
         border: 0;
         margin: 0
      }

      @media (max-width:468px) {
         .features .nav-link {
            padding: 8px 20px
         }
      }

      .features .nav-link i {
         padding-right: 15px;
         font-size: 48px
      }

      .features .nav-link h4 {
         font-size: 14px;
         font-weight: 500;
         margin: 0
      }

      .features .nav-link:hover {
         border-color: color-mix(in srgb, var(--default-color), transparent 80%)
      }

      .features .nav-link.active {
         background-color: var(--accent-color);
         border-color: var(--accent-color)
      }

      .features .tab-content,
      .service-details .service-box+.service-box {
         margin-top: 30px
      }

      .features .tab-pane h3 {
         color: var(--heading-color);
         font-weight: 700;
         font-size: 32px;
         position: relative;
         margin-bottom: 20px;
         padding-bottom: 20px
      }

      .features .tab-pane h3:after {
         position: absolute;
         width: 60px;
         left: 0;
         bottom: 0
      }

      .features .tab-pane ul {
         list-style: none;
         padding: 0
      }

      .features .tab-pane ul li {
         padding-top: 10px
      }

      .features .tab-pane ul i {
         font-size: 20px;
         padding-right: 4px;
         color: var(--accent-color)
      }

      .custom-btn {
         color: #fff;
         border-radius: 5px;
         padding: 10px 25px;
         font-family: Lato, sans-serif;
         font-weight: 500;
         background: 0 0;
         cursor: pointer;
         transition: .3s;
         display: inline-block;
         box-shadow: inset 2px 2px 2px 0 rgba(255, 255, 255, .5), 7px 7px 20px 0 rgba(0, 0, 0, .1), 4px 4px 5px 0 rgba(0, 0, 0, .1);
         outline: 0;
         text-align: center
      }

      .btn-5 {
         line-height: 42px;
         padding: 0;
         border: none;
         background: #e75444;
         background: linear-gradient(0deg, #e95646 0, #f35d1c 100%);
         float: right
      }

      .btn-5:hover {
         color: #f0094a;
         background: 0 0;
         box-shadow: none
      }

      .btn-5:after,
      .btn-5:before {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         height: 2px;
         width: 0;
         background: #f0094a;
         box-shadow: -1px -1px 5px 0 #fff, 7px 7px 20px 0 #0003, 4px 4px 5px 0 #0002;
         transition: .4s
      }

      .btn-5:after {
         right: inherit;
         top: inherit;
         left: 0;
         bottom: 0
      }

      .btn-5:hover:after,
      .btn-5:hover:before {
         width: 100%;
         transition: .8s
      }

      .features-cards-services {
         --default-color: #555;
         --heading-color: #333
      }

      .features-cards-services .feature-box {
         height: 100%;
         padding: 10px 30px;
         border-radius: 20px
      }

      .features-cards-services .feature-box i {
         font-size: 44px;
         display: inline-block;
         line-height: 0;
         color: var(--accent-color);
         margin-bottom: 20px
      }

      .call-to-action .btn-cta,
      .call-to-action .container,
      .call-to-action .dots {
         color: var(--contrast-color)
      }

      .features-cards-services .feature-box h4 {
         font-size: 20px;
         font-weight: 700;
         margin: 0 0 10px
      }

      .features-cards-services .feature-box p {
         font-size: 15px;
         margin-bottom: 0
      }

      .features-cards-services .feature-box.orange {
         background-color: #fff3e2
      }

      .features-cards-services .feature-box.orange i {
         color: #edb86e
      }

      .features-cards-services .feature-box.blue {
         background-color: #deedfd
      }

      .features-cards-services .feature-box.blue i {
         color: #20a5f8
      }

      .features-cards-services .feature-box.green {
         background-color: #d5f1e4
      }

      .features-cards-services .feature-box.green i {
         color: #48c88a
      }

      .features-cards-services .feature-box.red {
         background-color: #fdeded
      }

      .features-cards-services .feature-box.red i {
         color: #f28484
      }

      .features-2 .feature-item .feature-icon {
         width: 60px;
         height: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background-color: color-mix(in srgb, var(--accent-color), transparent 92%)
      }

      .features-2 .feature-item .feature-icon i {
         font-size: 24px;
         color: var(--accent-color)
      }

      .features-2 .feature-item .feature-content h3 {
         font-size: 20px;
         font-weight: 600;
         margin-bottom: 10px
      }

      .features-2 .feature-item .feature-content p {
         color: color-mix(in srgb, var(--default-color), transparent 25%);
         font-size: 15px;
         margin-bottom: 0
      }

      .features-2 .phone-mockup {
         position: relative;
         padding: 30px 0
      }

      .features-2 .phone-mockup img {
         max-width: 300px;
         height: auto;
         filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .1))
      }

      @media (max-width:991.98px) {
         .features-2 .feature-item {
            text-align: center !important;
            margin-bottom: 2rem
         }

         .features-2 .feature-item .d-flex {
            flex-direction: column;
            text-align: center;
            justify-content: center !important
         }

         .features-2 .phone-mockup {
            margin: 3rem 0
         }
      }

      .call-to-action .container {
         background: var(--accent-color);
         position: relative;
         overflow: hidden;
         border-radius: 1rem;
         padding: 4rem 2rem
      }

      .call-to-action .content h2,
      .call-to-action .content p {
         color: var(--contrast-color);
         position: relative;
         z-index: 2
      }

      .call-to-action .btn-cta {
         background-color: color-mix(in srgb, var(--contrast-color) 15%, transparent);
         padding: 12px 40px;
         border-radius: 50px;
         transition: .3s;
         border: 2px solid var(--contrast-color);
         position: relative;
         z-index: 2
      }

      .call-to-action .dots,
      .call-to-action .shape {
         pointer-events: none;
         z-index: 1;
         position: absolute
      }

      .call-to-action .btn-cta:hover {
         background-color: var(--contrast-color);
         color: var(--accent-color)
      }

      .call-to-action .dots svg,
      .call-to-action .shape svg {
         width: 100%;
         height: 100%
      }

      .call-to-action .shape svg path {
         fill: color-mix(in srgb, var(--contrast-color) 50%, transparent)
      }

      .call-to-action .shape-1 {
         width: 300px;
         height: 300px;
         top: -100px;
         right: -50px;
         opacity: .1;
         transform: rotate(45deg);
         animation: 3s ease-in-out infinite shapes-float
      }

      .call-to-action .shape-2 {
         width: 200px;
         height: 200px;
         bottom: -50px;
         left: -50px;
         opacity: .15;
         transform: rotate(-15deg);
         animation: 4s ease-in-out infinite shapes-float
      }

      .call-to-action .shape-3 {
         width: 150px;
         height: 150px;
         top: 20%;
         right: 15%;
         opacity: .08;
         transform: rotate(15deg)
      }

      .call-to-action .dots-1 {
         width: 200px;
         height: 200px;
         top: -30px;
         left: 10%;
         opacity: .1;
         transform: rotate(15deg);
         animation: 4s ease-in-out infinite shapes-float
      }

      .call-to-action .dots-2 {
         width: 150px;
         height: 150px;
         bottom: 20px;
         right: 15%;
         opacity: .15;
         transform: rotate(-10deg)
      }

      @keyframes shapes-float {

         0%,
         100% {
            transform: scale(.8) rotate(45deg) translateY(0)
         }

         50% {
            transform: scale(.8) rotate(45deg) translateY(-20px)
         }
      }

      @media (max-width:575px) {
         .hero .hero-content h1 {
            font-size: 2rem
         }

         .hero .stat-item {
            padding: 1.5rem
         }

         .call-to-action .container {
            border-radius: 0
         }
      }

      .clients .swiper-pagination {
         margin-top: 20px;
         position: relative
      }

      .clients .swiper-slide img {
         opacity: 1;
         transition: .3s;
         animation: ease-in-out
      }

      .clients-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 10px;
         justify-items: center;
         align-items: center
      }

      .clients-grid .client img {
         max-width: 60%;
         height: auto
      }

      .testimonials .testimonial-item {
         background-color: var(--surface-color);
         box-shadow: 0 2px 30px rgba(0, 0, 0, .08);
         padding: 30px;
         position: relative;
         height: 100%
      }

      .testimonials-container1 {
         display: flex;
         gap: 32px;
         max-width: 1200px;
         margin-inline: auto;
         height: 500px;
         width: 100%;
         padding: 24px
      }

      .test {
         height: 100%;
         overflow: hidden;
         mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)
      }

      .testimonials {
         display: flex;
         flex-direction: column;
         gap: 24px;
         animation-timing-function: linear;
         animation-iteration-count: infinite
      }

      .test:hover .testimonials {
         animation-play-state: paused
      }

      .cardT {
         background: #fff;
         padding: 24px;
         border-radius: 16px;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1)
      }

      .list-items,
      .select-btn {
         background-color: #fff;
         box-shadow: 0 5px 10px rgba(0, 0, 0, .1)
      }

      .cardT .profile img {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         object-fit: cove
      }

      .cardT .profile {
         display: flex;
         align-items: center;
         gap: 16px;
         margin-bottom: 16px
      }

      .cardT .profile .name {
         font-weight: 600;
         color: #1a1a1a
      }

      .cardT .profile .role {
         font-size: 14px;
         color: #666
      }

      .cardT .contentT {
         color: #444;
         line-height: 1.5
      }

      .test:first-child .testimonials {
         animation-name: scrollUp;
         animation-duration: 23s
      }

      .test:nth-child(2) .testimonials {
         animation-name: scrollDown;
         animation-duration: 50s
      }

      .test:nth-child(3) .testimonials {
         animation-name: scrollUp;
         animation-duration: 30s
      }

      @keyframes scrollUp {
         from {
            transform: translateY(0)
         }

         to {
            transform: translateY(-50%)
         }
      }

      @keyframes scrollDown {
         from {
            transform: translateY(-50%)
         }

         to {
            transform: translateY(0)
         }
      }

      @media (max-width:640px) {
         .test {
            display: none
         }

         .test:first-child {
            display: block
         }
      }

      .stats .stats-item {
         padding: 30px;
         width: 100%
      }

      .stats .stats-item span {
         color: var(--heading-color);
         font-size: 48px;
         display: block;
         font-weight: 700;
         margin-bottom: 20px;
         padding-bottom: 20px;
         position: relative
      }

      .stats .stats-item span:after {
         content: "";
         position: absolute;
         display: block;
         width: 25px;
         height: 3px;
         background: var(--accent-color);
         left: 0;
         right: 0;
         bottom: 0;
         margin: auto
      }

      .stats .stats-item p {
         color: color-mix(in srgb, var(--default-color), transparent 40%);
         padding: 0;
         margin: 0;
         font-family: var(--heading-font);
         font-weight: 500
      }

      .services .service-card {
         height: 100%;
         padding: 30px;
         background: var(--surface-color);
         border-radius: 10px;
         transition: .3s
      }

      .services .service-card:hover {
         box-shadow: 0 0 15px rgba(0, 0, 0, .08)
      }

      .pricing .pricing-card.popular,
      .services .service-card:hover .icon {
         background: var(--accent-color);
         color: var(--contrast-color)
      }

      .services .service-card:hover .read-more {
         color: color-mix(in srgb, var(--accent-color), transparent 25%)
      }

      .services .service-card .icon {
         width: 60px;
         height: 60px;
         margin-right: 30px;
         background: color-mix(in srgb, var(--accent-color), transparent 90%);
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 8px;
         color: var(--accent-color);
         font-size: 28px;
         transition: .3s;
         line-height: 1
      }

      .pricing .pricing-card .popular-badge,
      .pricing .pricing-card.popular .btn-light {
         background: var(--contrast-color);
         color: var(--accent-color)
      }

      .services .service-card h3 {
         font-size: 22px;
         font-weight: 700;
         margin-bottom: 15px
      }

      .services .service-card p {
         margin-bottom: 25px;
         color: color-mix(in srgb, var(--default-color), transparent 25%);
         font-size: 15px;
         line-height: 1.6
      }

      .services .service-card .read-more {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         color: var(--accent-color);
         font-weight: 500;
         transition: .3s
      }

      .services .service-card .read-more i {
         font-size: 14px;
         transition: transform .3s
      }

      .services .service-card .read-more:hover i {
         transform: translateX(5px)
      }

      .pricing .pricing-card {
         height: 100%;
         padding: 2rem;
         background: var(--surface-color);
         border-radius: 1rem;
         transition: .3s;
         position: relative
      }

      .pricing .pricing-card:hover {
         box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
      }

      .pricing .pricing-card.popular .btn-light:hover {
         background: color-mix(in srgb, var(--contrast-color), transparent 10%)
      }

      .pricing .pricing-card .popular-badge {
         position: absolute;
         top: -12px;
         left: 50%;
         transform: translateX(-50%);
         padding: .5rem 1rem;
         border-radius: 2rem;
         font-size: .875rem;
         font-weight: 600;
         box-shadow: 0 -2px 10px rgba(0, 0, 0, .08)
      }

      .pricing .pricing-card h3 {
         font-size: 1.5rem;
         margin-bottom: 1rem
      }

      .pricing .pricing-card .price {
         margin-bottom: 1.5rem
      }

      .pricing .pricing-card .price .currency {
         font-size: 1.5rem;
         font-weight: 600;
         vertical-align: top;
         line-height: 1
      }

      .pricing .pricing-card .price .amount {
         font-size: 3.5rem;
         font-weight: 700;
         line-height: 1
      }

      .pricing .pricing-card .price .period {
         font-size: 1rem;
         color: color-mix(in srgb, var(--default-color), transparent 40%)
      }

      .pricing .pricing-card .description {
         margin-bottom: 2rem;
         font-size: .975rem
      }

      .pricing .pricing-card h4 {
         font-size: 1.125rem;
         margin-bottom: 1rem
      }

      .pricing .pricing-card .features-list {
         list-style: none;
         padding: 0;
         margin: 0 0 2rem
      }

      .pricing .pricing-card .features-list li {
         display: flex;
         align-items: center;
         margin-bottom: 1rem
      }

      .pricing .pricing-card .features-list li i {
         color: var(--accent-color);
         margin-right: .75rem;
         font-size: 1.25rem
      }

      .pricing .pricing-card .btn {
         width: 100%;
         padding: .75rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: .5rem;
         font-weight: 500;
         border-radius: 50px
      }

      .pricing .pricing-card .btn.btn-primary {
         background: var(--accent-color);
         border: none;
         color: var(--contrast-color)
      }

      .pricing .pricing-card .btn.btn-primary:hover {
         background: color-mix(in srgb, var(--accent-color), transparent 15%)
      }

      .faq .faq-title {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 1rem;
         color: var(--heading-color)
      }

      .call-to-action-2 h3,
      .call-to-action-2 p,
      .faq .faq-description {
         color: var(--default-color)
      }

      .faq .faq-description {
         font-size: 1rem;
         margin-bottom: 2rem
      }

      .faq .faq-container .faq-item {
         background-color: var(--surface-color);
         position: relative;
         padding: 20px;
         margin-bottom: 15px;
         border-radius: 10px;
         overflow: hidden
      }

      .faq .faq-container .faq-item h3 {
         font-weight: 600;
         font-size: 16px;
         line-height: 24px;
         margin: 0 30px 0 0;
         transition: .3s;
         cursor: pointer;
         display: flex;
         align-items: center
      }

      .faq .faq-container .faq-item h3 .num {
         color: var(--accent-color);
         padding-right: 5px
      }

      .faq .faq-container .faq-item .faq-content {
         display: grid;
         grid-template-rows: 0fr;
         transition: .3s ease-in-out;
         visibility: hidden;
         opacity: 0
      }

      .faq .faq-container .faq-item .faq-content p {
         margin-bottom: 0;
         overflow: hidden
      }

      .faq .faq-container .faq-item .faq-toggle {
         position: absolute;
         top: 20px;
         right: 20px;
         font-size: 16px;
         line-height: 0;
         transition: .3s;
         cursor: pointer
      }

      .faq .faq-container .faq-active .faq-content {
         grid-template-rows: 1fr;
         visibility: visible;
         opacity: 1;
         padding-top: 10px
      }

      .faq .faq-container .faq-active .faq-toggle {
         transform: rotate(90deg);
         color: var(--accent-color)
      }

      .call-to-action-2 {
         padding: 80px 0
      }

      .call-to-action-2 .container {
         position: relative;
         z-index: 3
      }

      .call-to-action-2 h3 {
         font-size: 28px;
         font-weight: 700
      }

      .call-to-action-2 .cta-btn {
         font-family: var(--heading-font);
         font-weight: 500;
         font-size: 16px;
         letter-spacing: 1px;
         display: inline-block;
         padding: 12px 40px;
         border-radius: 50px;
         transition: .5s;
         margin: 10px;
         border: 2px solid color-mix(in srgb, var(--contrast-color), transparent 30%);
         color: var(--contrast-color)
      }

      .call-to-action-2 .cta-btn:hover {
         border-color: var(--contrast-color)
      }

      .contact .info-box {
         background-color: var(--accent-color);
         color: var(--contrast-color);
         padding: 3rem;
         border-radius: 1rem;
         height: 100%
      }

      .contact .contact-form,
      .service-details .service-box,
      .service-details .services-list {
         background-color: var(--surface-color)
      }

      .contact .info-box h3 {
         color: var(--contrast-color);
         font-size: 2rem;
         margin-bottom: 1rem
      }

      @media (max-width:767.98px) {
         .contact .info-box h3 {
            font-size: 1.75rem
         }
      }

      .contact .info-box p {
         opacity: .8;
         margin-bottom: 2rem
      }

      .contact .info-item {
         display: flex;
         gap: 1.5rem;
         margin-bottom: 2rem
      }

      .contact .info-item .icon-box {
         width: 3.5rem;
         height: 3.5rem;
         background-color: color-mix(in srgb, var(--contrast-color), transparent 85%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         transition: .3s
      }

      .contact .info-item .icon-box i {
         font-size: 1.5rem;
         color: var(--contrast-color)
      }

      .contact .info-item:hover .icon-box {
         background-color: color-mix(in srgb, var(--contrast-color), transparent 70%)
      }

      .contact .info-item .content h4 {
         color: var(--contrast-color);
         font-size: 1.25rem;
         margin-bottom: .5rem;
         font-weight: 700
      }

      .contact .info-item .content p {
         margin-bottom: .25rem;
         font-size: .95rem
      }

      .contact .contact-form {
         padding: 3rem;
         border-radius: 1rem;
         height: 100%;
         box-shadow: 0 0 25px rgba(0, 0, 0, .05)
      }

      @media (max-width:992px) {
         .hero .customers-badge {
            position: static;
            margin: 1rem auto;
            max-width: 250px
         }

         .about .about-title {
            font-size: 2rem
         }

         .about .image-wrapper {
            padding-left: 0;
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            gap: 2rem
         }

         .about .image-wrapper .images {
            display: flex;
            flex-direction: column;
            gap: 1.5rem
         }

         .about .image-wrapper .main-image {
            margin-left: 0
         }

         .about .image-wrapper .small-image {
            position: static;
            width: 100%;
            margin: 0 auto;
            border: 0
         }

         .about .image-wrapper .experience-badge {
            position: static;
            width: fit-content;
            margin: 0 auto
         }

         .call-to-action .container {
            padding: 3rem 1.5rem
         }

         .call-to-action .shape-1 {
            width: 200px;
            height: 200px
         }

         .call-to-action .dots-1,
         .call-to-action .shape-2 {
            width: 150px;
            height: 150px
         }

         .call-to-action .shape-3 {
            width: 100px;
            height: 100px
         }

         .call-to-action .dots-2 {
            width: 120px;
            height: 120px
         }

         .call-to-action .dots-3 {
            width: 80px;
            height: 80px
         }

         .contact .contact-form,
         .contact .info-box {
            padding: 1.5rem
         }
      }

      .contact .contact-form h3 {
         font-size: 2rem;
         margin-bottom: 1rem
      }

      @media (max-width:768px) {
         .testimonials-container1 {
            gap: 16px;
            padding: 16px
         }

         .test:nth-child(3) {
            display: none
         }

         .test:hover .testimonials {
            animation-play-state: running
         }

         .contact .contact-form h3 {
            font-size: 1.75rem
         }
      }

      .contact .contact-form p {
         color: color-mix(in srgb, var(--default-color), transparent 25%);
         margin-bottom: 2rem
      }

      .contact .contact-form .form-control,
      .contact .contact-form .form-select {
         padding: .875rem 1.25rem;
         border-color: color-mix(in srgb, var(--default-color), transparent 90%);
         border-radius: .5rem;
         background-color: color-mix(in srgb, var(--surface-color) 90%, #fff 5%);
         color: var(--default-color)
      }

      .contact .contact-form .form-control:focus,
      .contact .contact-form .form-select:focus {
         box-shadow: none;
         border-color: var(--accent-color)
      }

      .contact .contact-form .form-control::placeholder,
      .contact .contact-form .form-select::placeholder {
         color: color-mix(in srgb, var(--default-color), transparent 50%)
      }

      .contact .contact-form .btn {
         background-color: var(--accent-color);
         color: var(--contrast-color);
         padding: 1rem 2rem;
         border-radius: 2rem;
         display: inline-flex;
         align-items: center;
         gap: .5rem;
         transition: .3s
      }

      .contact .contact-form .btn:hover {
         background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 20%)
      }

      .service-details .service-box {
         padding: 20px;
         box-shadow: 0 2px 20px rgba(0, 0, 0, .1)
      }

      .service-details .service-box h4 {
         font-size: 20px;
         font-weight: 700;
         border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
         padding-bottom: 15px;
         margin-bottom: 15px
      }

      .service-details .help-box,
      .service-details .services-list a.active {
         background-color: var(--accent-color);
         color: var(--contrast-color)
      }

      .service-details .services-list a {
         color: color-mix(in srgb, var(--default-color), transparent 20%);
         display: flex;
         align-items: center;
         padding: 12px 15px;
         margin-top: 15px;
         transition: .3s
      }

      .service-details .services-list a:first-child {
         margin-top: 0
      }

      .service-details .services-list a i {
         font-size: 16px;
         margin-right: 8px;
         color: var(--accent-color)
      }

      .service-details .services-list a:hover {
         background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
         color: var(--accent-color)
      }

      .service-details .download-catalog a {
         color: var(--default-color);
         display: flex;
         align-items: center;
         padding: 10px 0;
         transition: .3s;
         border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%)
      }

      .service-details .download-catalog a:first-child {
         border-top: 0;
         padding-top: 0
      }

      .service-details .download-catalog a:last-child {
         padding-bottom: 0
      }

      .service-details .download-catalog a i {
         font-size: 24px;
         margin-right: 8px;
         color: var(--accent-color)
      }

      .service-details .help-box {
         margin-top: 30px;
         padding: 30px 15px
      }

      .service-details .help-box .help-icon {
         font-size: 48px
      }

      .service-details .services-img {
         margin-bottom: 20px
      }

      .service-details h3 {
         font-size: 26px;
         font-weight: 700
      }

      .service-details p {
         font-size: 15px
      }

      .service-details ul {
         list-style: none;
         padding: 0;
         font-size: 15px
      }

      .info-box ul li,
      .service-details ul li {
         padding: 5px 0;
         display: flex;
         align-items: center
      }

      .service-details ul i {
         font-size: 20px;
         margin-right: 8px;
         color: var(--accent-color)
      }

      .info-box ul {
         list-style: none;
         padding: 0;
         font-size: 18px
      }

      .info-box ul i {
         font-size: 20px;
         margin-right: 8px;
         color: #232323
      }

      .select-btn {
         display: flex;
         height: 50px;
         align-items: center;
         justify-content: space-between;
         padding: 0 16px;
         border-radius: 8px;
         cursor: pointer
      }

      .list-items .item,
      .select-btn .arrow-dwn {
         align-items: center;
         transition: .3s;
         display: flex
      }

      .select-btn .btn-text {
         font-size: 17px;
         font-weight: 400;
         color: #333
      }

      .select-btn .arrow-dwn {
         height: 21px;
         width: 21px;
         color: #fff;
         font-size: 14px;
         border-radius: 50%;
         background: #f3f3fa;
         justify-content: center
      }

      .select-btn.open .arrow-dwn {
         transform: rotate(-180deg)
      }

      .list-items {
         position: relative;
         margin-top: 15px;
         border-radius: 8px;
         padding: 16px;
         max-height: 220px;
         overflow-y: scroll;
         overflow-x: hidden;
         display: none
      }

      .select-btn.open~.list-items {
         display: block
      }

      .select-btn.open~.list-items::-webkit-scrollbar {
         width: 8px;
         height: 0
      }

      .select-btn.open~.list-items::-webkit-scrollbar-thumb {
         background-color: rgba(0, 0, 0, .2);
         border-radius: 8px
      }

      .select-btn.open~.list-items::-webkit-scrollbar-thumb:hover {
         background-color: rgba(0, 0, 0, .3)
      }

      .list-items .item {
         list-style: none;
         height: 50px;
         cursor: pointer;
         padding: 0 15px;
         border-radius: 8px
      }

      .list-items .item:hover {
         background-color: #e7edfe
      }

      .item .item-text {
         font-size: 16px;
         font-weight: 400;
         color: #333
      }

      .item .checkbox {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 16px;
         width: 16px;
         border-radius: 4px;
         margin-right: 12px;
         border: 1.5px solid silver;
         transition: .3s ease-in-out
      }

      .item.checked .checkbox {
         background-color: #5b49ff;
         border-color: #5b49ff
      }

      .checkbox .check-icon {
         color: #fff;
         font-size: 11px;
         transform: scale(0);
         transition: .2s ease-in-out
      }

      .item.checked .check-icon {
         transform: scale(1)
      }