:root {
   --navy: #071b43;
   --navy-2: #0a2855;
   --blue: #0799f4;
   --blue-dark: #0879d4;
   --ink: #0c1e43;
   --muted: #64728b;
   --pale: #f2f8ff;
   --line: #e6edf6;
 }


 body {
   font-family: 'Inter', sans-serif;
 }

 h1,
 h2,
 h3,
 button {
   font-family: 'Inter', sans-serif;
   letter-spacing: -0.035em;
 }

 * {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
 }

 body {
   font-family: Inter, Arial, sans-serif;
   color: var(--ink);
   font-size: 13px;
   line-height: 1.6;
   background: #fff
 }

 a {
   text-decoration: none
 }

 img {
   max-width: 100%;
   display: block
 }

 .topbar {
   background: #071b43;
   color: #dbeaff;
   font-size: 12px;
   padding: 8px 0
 }

 .main-nav {
   background: rgba(255, 255, 255, .97);
   box-shadow: 0 3px 18px rgba(10, 35, 70, .08);
   padding: 10px 0;
   z-index: 1000;
    display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
 }
  
 .header-logo {

   display: inline-flex;

   align-items: center;

   flex-shrink: 0;
 }

 .header-logo img {

   width: auto;

   height: 42px;

   display: block;

   object-fit: contain;
 }

 .navbar-nav {
  
   gap: 6px
 }

 /* Main navbar layout */
 .main-nav>.container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 /* Logo */
 .header-logo {
   flex-shrink: 0;
   margin-right: 25px;
 }

 /* Navigation menu */
 #mainNav {
   flex-grow: 1;
   justify-content: center;
 }

 #mainNav .navbar-nav {
   gap: 12px;
 }

 /* Phone and CTA */
 .nav-actions {
   gap: 18px;
   flex-shrink: 0;
   margin-left: 25px;
 }

 /* Prevent phone number wrapping */
 .nav-phone {
   white-space: nowrap;
 }

 /* Mobile adjustments */
 @media (max-width: 991.98px) {
   .main-nav>.container {
     flex-wrap: wrap;
   }

   #mainNav {
     flex-basis: 100%;
   }

   #mainNav .navbar-nav {
     gap: 0;
     align-items: stretch !important;
   }
 }

 .nav-link {
   font-size: 13px;
   font-weight: 600;
   color: #34415a !important;
   padding: 10px 8px !important
 }

 .nav-link.active,
 .nav-link:hover {
   color: var(--blue-dark) !important
 }

 .nav-phone .nav-link {
   white-space: nowrap;
   color: #172b4f !important
 }

 .nav-cta {
   font-size: 10px;
   font-weight: 700;
   padding: 10px 13px;
   border-radius: 4px;
   white-space: nowrap
 }

 .btn-primary {
   background: var(--blue);
   border-color: var(--blue);
   font-weight: 700;
   font-size: 12px;
   padding: 11px 17px;
   border-radius: 4px;
   box-shadow: 0 6px 14px rgba(0, 144, 245, .18)
 }

 .btn-primary:hover {
   background: var(--blue-dark);
   border-color: var(--blue-dark)
 }

 .hero-section {
   position: relative;
   overflow: hidden;
   background: #071b43 url('../images/heroi.webp') center right/cover no-repeat;
   color: white;
   min-height: 75vh;
 }

 .hero-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(4, 19, 48, .98) 0%, rgba(4, 23, 54, .94) 35%, rgba(5, 28, 60, .68) 65%, rgba(4, 18, 43, .48) 100%)
 }

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


 .eyebrow {
   font-size: 12px;
   letter-spacing: 2.4px;
   font-weight: 600;
   color: #0b8ee5;
   margin-bottom: 7px
 }

 .eyebrow span {
   opacity: .7;
   padding: 0 3px
 }

 .eyebrow-light {
   color: #7bcaff
 }

 .hero-copy{
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
 .hero-copy h1 {
   font-size: clamp(36px, 3.3vw, 46px);
   line-height: 1.08;
   font-weight: 600;
   letter-spacing: -1.5px;
   max-width: 520px;
   margin: 8px 0 13px
 }

 .hero-copy h1 span {
   display: block;
   color: #159ef6
 }

 .hero-copy p {
   font-size: 12px;
   color: #e2eaf7;
   max-width: 440px;
   line-height: 1.75;
   margin-bottom: 18px
 }

 .hero-actions {
   display: flex;
   align-items: center;
   gap: 18px
 }

 .video-btn {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   border: 0;
   background: none;
   font-size: 11px;
   font-weight: 600
 }

 .video-btn span {
   height: 30px;
   width: 30px;
   display: grid;
   place-items: center;
   background: #fff;
   color: #0a2752;
   border-radius: 50%;
   font-size: 18px
 }

 .hero-benefits {
   display: flex;
   flex-wrap: wrap;
   gap: 13px;
   margin-top: 27px;
   color: #e1e9f6;
   font-size: 12px;
   font-weight: 500
 }

 .hero-benefits i {
   color: #72caff;
   margin-right: 4px
 }

 .hero-visual-wrap {
   padding: 20px 10px 15px 0
 }
 .stats-strip {
   background: #f7fbff;
   border-bottom: 1px solid #e7f0fa
 }

 .stat-item {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 13px;
   padding: 16px 8px;
   border-right: 1px solid #e5edf6
 }

 .stat-item:last-child {
   border: 0
 }

 .stat-item>i {
   font-size: 42px;
   color: #078fe9
 }

 .stat-item strong {
   display: block;
   font-size: 28px;
   line-height: 1.2;
   color: #11254b;
   font-weight: 800
 }

 .stat-item small {
   display: block;
   color: #22262e;
   font-size: 12px
 }

 .section-pad {
   padding: 90px 0 80px
 }

 .section-heading {
   margin-bottom: 48px
 }

 .split-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 30px
 }

 .section-heading h2 {
   font-size: clamp(22px, 2.5vw, 56px);
   font-weight: 800;
   letter-spacing: -.8px;
   line-height: 1.15;
   margin: 0;
   color: #10234a
 }

 .heading-side {
   display: flex;
   align-items: flex-end;
   gap: 24px;
   max-width: 52%;
   padding-bottom: 2px
 }

 .heading-side p {
   font-size: 16px;
   color: #61708a;
   line-height: 1.7;
   margin: 0;
   max-width: 340px
 }

 .text-link {
   font-size: 16px;
   font-weight: 700;
   color: #0789e4;
   white-space: nowrap
 }

 .text-link i {
   margin-left: 5px
 }

 .services-section {
   background: linear-gradient(180deg, #fff, #f9fcff);
 }

 .service-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
 }

 .service-card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   position: relative;
   min-height: 156px;
   padding: 14px 13px 12px;
   background: #fff;
   border: 1px solid #e9eef6;
   border-radius: 7px;
   box-shadow: 0 4px 15px rgba(14, 47, 88, .035);
   color: #13264c;
   transition: .2s
 }

 .service-card:hover,
 .website-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 25px rgba(14, 47, 88, .1);
   border-color: #cfe7ff
 }

 .service-card b {
   font-size: 16px;
   line-height: 1.35;
   margin-top: 9px;
   margin-bottom: 6px;
 }

 .service-card small {
   font-size: 12px;
   color: #71809a;
   margin-top: 3px
 }

 .card-arrow {
   margin-top: auto;
   padding-top: 8px;
   color: #000102;
   font-size: 16px
 }

 .icon-bubble {
   width: 54px;
   height: 54px;
   display: grid;
   place-items: center;
   border-radius: 11px;
   font-size: 24px
 }

 .blue {
   color: #078eea;
   background: #e8f5ff
 }

 .orange {
   color: #f39431;
   background: #fff3e5
 }

 .purple {
   color: #8b57e8;
   background: #f3eaff
 }

 .pink {
   color: #ed5d83;
   background: #ffedf2
 }

 .mint {
   color: #1ab59b;
   background: #e6faf5
 }

 .sky {
   color: #178de4;
   background: #e9f6ff
 }

 .industries-section {
   background: linear-gradient(110deg, #f1f8ff, #eaf5ff);
   padding-top: 34px;
   padding-bottom: 35px
 }

 .industry-grid {
   display: grid;
  grid-template-columns: repeat(5,1fr);
   row-gap: 10px !important
 }
.industry-grid>div {
  display: flex;
}

.industry-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;

  width: 100%;
  min-height: 240px;
  padding: 22px;

  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  background: #182233;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Background image */
.industry-card .industry-bg {
  position: absolute;
  inset: 0;
  z-index: -2;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transition: transform 0.5s ease;
}

/* Dark gradient overlay */
.industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(180deg,
      rgba(10, 15, 25, 0.05) 0%,
      rgba(10, 15, 25, 0.3) 40%,
      rgba(10, 15, 25, 0.88) 100%);
}

/* Icon */
.industry-card .industry-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  margin-bottom: 14px;

  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(8px);

  font-size: 20px;
}

/* Title */
.industry-card b {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

/* Hover */
.industry-card:hover {
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.industry-card:hover .industry-bg {
  transform: scale(1.08);
}

@media (max-width: 991.98px) {
  .industry-card {
    min-height: 220px;
    padding: 18px;
  }
}

@media (max-width: 575.98px) {
  .industry-card {
    min-height: 190px;
    padding: 14px;
    border-radius: 12px;
  }

  .industry-card .industry-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    font-size: 18px;
  }

  .industry-card b {
    font-size: 14px;
  }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

        .industry-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
}

 .industry-solutions {
   background: #fff
 }

 .industry-icons-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 24px 14px;
   padding: 6px 0 0
 }

 .industry-icons-grid>div,
 .custom-grid>div {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 7px
 }

 .round-icon {
   height: 75px;
   width: 75px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 26px;
   border: 1px solid #e8edf4;
   box-shadow: 0 0 0 5px #f8fbff
 }

 .industry-icons-grid b,
 .custom-grid b {
   font-size: 12px;
   line-height: 1.4;
   font-weight: 700;
   color: #243656
 }

 .technologies-section {
   background: #f1f8ff;
   padding-bottom: 30px
 }

 .tech-tabs {
   display: flex;
   gap: 4px;
   overflow-x: auto;
   padding: 0 4px;
   scrollbar-width: thin
 }

 .tech-tab {
   flex: 1 0 auto;
   min-width: 70px;
   background: #fff;
   border: 1px solid #e5edf7;
   padding: 9px 12px;
   border-radius: 5px 5px 0 0;
   color: #4b5b75;
   font-size: 9px;
   font-weight: 600
 }

 .tech-tab.active {
   background: #0b8fe9;
   color: #fff;
   border-color: #0b8fe9;
   box-shadow: 0 4px 10px #078eea38
 }

 .tech-panel {
   background: #fff;
   border: 1px solid #e5edf7;
   border-radius: 0 0 7px 7px;
   padding: 17px 14px;
   display: grid;
   grid-template-columns: repeat(5, 2fr);
   gap: 10px
 }

 .tech-item {
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 8px;
   color: #506079;
   font-size: 8px
 }

 .tech-logo {
   height: 84px;
   width: 84px;
   display: grid;
   place-items: center;
   font-size: 22px;
   font-weight: 800;
   color: #fff;
   border-radius: 4px
 }

 .tech-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

 .tech-logo.html {
   background: #e95420
 }

 .tech-logo.css {
   background: #2276bc
 }

 .tech-logo.js {
   color: #242424;
   font-size: 15px
 }

 .tech-logo.bootstrap {
   background: #7952b3
 }

 .tech-logo.tw {
   background: #24b8d7
 }

 .tech-logo.react {
   background: #eafaff;
   color: #23b8d2;
   font-size: 28px
 }

 .tech-logo.vue {
   background: #e7f9f0;
   color: #42b883
 }

 .tech-logo.jquery {
   background: #f0f5ff;
   color: #1769aa;
   font-size: 13px
 }

 .tech-logo.ts {
   background: #3178c6;
   font-size: 15px
 }

 .tech-logo.next {
   background: #151515
 }

 .stack-section {
   background: radial-gradient(ellipse at 85% 0%, #1a367b 0%, transparent 40%), linear-gradient(120deg, #07183f, #0b2b61);
   padding: 30px 0 34px;
   color: #fff
 }

 .stack-heading h2 {
   color: #fff
 }

 .stack-heading .heading-side p {
   color: #cbd8ed
 }

 .stack-heading .text-link {
   color: #4db6ff
 }


 /* Technology Stack Image Slider */
 .stack-slider {
   position: relative;
   padding: 0 22px;
 }

 .stack-viewport {
   overflow: hidden;
   width: 100%;
 }

 .stack-track {
   display: flex;
   transition: transform 0.55s ease;
   will-change: transform;
 }

 .stack-slide {
   flex: 0 0 16.666667%;
   min-width: 0;
   padding: 0 5px;
 }

 .stack-card {
   height: 100%;
   min-height: 145px;
   padding: 16px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   text-align: center;
   background: #fff;
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 9px;
   color: #17294c;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .stack-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
 }

 .stack-logo {
   width: 62px;
   height: 55px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 9px;
 }

 .stack-logo img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .stack-card b {
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 5px;
 }

 .stack-card small {
   font-size: 10px;
   line-height: 1.5;
   color: #687690;
   max-width: 150px;
 }

 .stack-arrow {
   position: absolute;
   top: 50%;
   z-index: 5;
   transform: translateY(-50%);
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.16);
   color: #fff;
   cursor: pointer;
   transition: background 0.2s ease;
 }

 .stack-arrow:hover {
   background: #0799f4;
   border-color: #0799f4;
 }

 .stack-prev {
   left: -1px;
 }

 .stack-next {
   right: -1px;
 }

 .stack-arrow:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }

 .stack-pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 7px;
   margin-top: 18px;
 }

 .stack-dot {
   width: 7px;
   height: 7px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.35);
   cursor: pointer;
   transition: width 0.25s ease, background 0.25s ease;
 }

 .stack-dot.active {
   width: 20px;
   border-radius: 5px;
   background: #0799f4;
 }

 /* Tablets */
 @media (max-width: 991.98px) {
   .stack-slide {
     flex-basis: 25%;
   }

   .stack-card {
     min-height: 150px;
   }
 }

 /* Small tablets */
 @media (max-width: 767.98px) {
   .stack-slide {
     flex-basis: 33.333333%;
   }

   .stack-logo {
     width: 55px;
     height: 48px;
   }

   .stack-slider {
     padding: 0 18px;
   }
 }

 /* Mobile */
 @media (max-width: 575.98px) {
   .stack-slide {
     flex-basis: 50%;
   }

   .stack-card {
     min-height: 145px;
     padding: 14px 8px;
   }

   .stack-card small {
     font-size: 8px;
   }

   .stack-arrow {
     width: 28px;
     height: 28px;
   }

   .stack-slider {
     padding: 0 15px;
   }
 }

 .website-types {
   background: #f8fbff
 }


/* Website Card */
.website-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;

  width: 100%;
  min-height: 240px;
  padding: 22px;

  border: 1px solid #e5edf6;
  border-radius: 16px;

  color: #fff;
  text-decoration: none;
  background: #071b43;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Background image */
.website-card .website-bg {
  position: absolute;
  inset: 0;
  z-index: -2;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transition: transform 0.5s ease;
}

/* Dark gradient overlay */
.website-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(180deg,
      rgba(7, 27, 67, 0.05) 0%,
      rgba(7, 27, 67, 0.35) 40%,
      rgba(7, 27, 67, 0.94) 100%);
}

/* Title */
.website-card b {
  position: relative;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding: 0;
  margin-bottom: 7px;
}

/* Description */
.website-card p {
  position: relative;
  color: #e1eaf7;
  font-size: 13px;
  line-height: 1.6;
  padding: 0;
  margin: 0 0 12px;
  flex: 1;
}

/* Arrow icon */
.website-card>i {
  position: relative;
  font-size: 18px;
  color: #0799f4;
  padding: 0;
  margin-top: auto;
}

/* Hover */
.website-card:hover {
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(7, 27, 67, 0.22);
}

.website-card:hover .website-bg {
  transform: scale(1.08);
}

/* Keyboard accessibility */
.website-card:focus-visible {
  outline: 3px solid #0799f4;
  outline-offset: 3px;
}



 .custom-solutions {
   background: #fff;
   padding-top: 32px;
   padding-bottom: 40px
 }

 .custom-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 15px
 }

 .hex-icon {
   width: 56px;
   height: 56px;
   display: grid;
   place-items: center;
   clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
   border: 0;
   font-size: 21px;
   position: relative
 }

 .hex-icon:before {
   content: "";
   position: absolute;
   inset: 3px;
   border: 1px solid currentColor;
   clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
   opacity: .25
 }

 .contact-section {
   background: #f0f7ff;
   padding: 20px 0 35px
 }

 .contact-box {
   border-radius: 12px;
   padding: 28px 34px;
   background: linear-gradient(110deg, #071a43, #0b4e91);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px;
   color: #fff
 }

 .contact-box h2 {
   font-size: 25px;
   font-weight: 800;
   margin: 0 0 7px
 }

 .contact-box p {
   margin: 0;
   color: #d0e0f5;
   font-size: 11px
 }

 .site-footer {
   background: #061533;
   color: #c3d0e5;
   padding: 17px 0;
   font-size: 10px
 }

 .toast-message {
   position: fixed;
   bottom: 25px;
   left: 50%;
   transform: translate(-50%, 20px);
   background: #10234a;
   color: #fff;
   border-radius: 7px;
   padding: 12px 18px;
   font-size: 12px;
   box-shadow: 0 10px 30px #0003;
   opacity: 0;
   pointer-events: none;
   transition: .25s;
   z-index: 2000
 }

 .toast-message.show {
   opacity: 1;
   transform: translate(-50%, 0)
 }

 .back-to-top {
   position: fixed;
   right: 18px;
   bottom: 18px;
   width: 38px;
   height: 38px;
   border: 0;
   border-radius: 50%;
   background: #078fe9;
   color: #fff;
   box-shadow: 0 6px 20px #078fe94a;
   display: none;
   z-index: 900
 }

 .back-to-top.show {
   display: grid;
   place-items: center
 }

 @media (min-width:1200px) {
   .container {
     max-width: 1280px
   }
 }

 @media (max-width:991.98px) {
   .navbar-collapse {
     padding: 12px 0
   }

   .navbar-nav {
     align-items: stretch !important
   }

   .nav-link {
     font-size: 12px;
     padding: 8px 4px !important
   }

   .nav-phone {
     margin-top: 5px
   }

   .nav-cta {
     display: inline-block;
     margin-top: 8px
   }


   .hero-copy {
     padding-right: 12px
   }

   .hero-visual-wrap {
     padding: 15px 10px 20px
   }

   .hero-visual {
     height: 300px;
     max-width: 520px
   }

   .heading-side {
     max-width: 48%;
     display: block
   }

   .heading-side .text-link {
     display: inline-block;
     margin-top: 8px
   }

   .industry-card {
     height: 135px
   }

   .stack-grid {
     grid-template-columns: repeat(3, 1fr)
   }

   .tech-panel {
     grid-template-columns: repeat(5, 1fr)
   }

   .industry-icons-grid {
     grid-template-columns: repeat(4, 1fr)
   }
 }

 @media (max-width:575.98px) {
   .topbar {
     display: none
   }

   .main-nav {
     padding: 7px 0
   }

   .brand-mark {
     font-size: 26px
   }

   .brand-word {
     font-size: 16px
   }

   .navbar-togg :root {
     --navy: #071b43;
     --navy-2: #0a2855;
     --blue: #0799f4;
     --blue-dark: #0879d4;
     --ink: #0c1e43;
     --muted: #64728b;
     --pale: #f2f8ff;
     --line: #e6edf6;
   }

   * {
     box-sizing: border-box
   }

   html {
     scroll-behavior: smooth;
     scroll-padding-top: 90px
   }

   body {
     font-family: Inter, Arial, sans-serif;
     color: var(--ink);
     font-size: 13px;
     line-height: 1.6;
     background: #fff
   }

   a {
     text-decoration: none
   }

   img {
     max-width: 100%;
     display: block
   }

   .topbar {
     background: #071b43;
     color: #dbeaff;
     font-size: 10px;
     padding: 6px 0
   }

   .main-nav {
     background: rgba(255, 255, 255, .97);
     box-shadow: 0 3px 18px rgba(10, 35, 70, .08);
     padding: 9px 0;
     z-index: 1000
   }

   .brand {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--navy);
     line-height: 1
   }

   .brand-mark {
     font-size: 29px;
     color: #0b8fe7;
     transform: rotate(-18deg)
   }

   .brand-word {
     display: flex;
     flex-direction: column;
     font-size: 18px;
     letter-spacing: -1px;
     font-weight: 800
   }

   .brand-word b {
     line-height: 1
   }

   .brand-word small {
     font-size: 8px;
     letter-spacing: 2px;
     text-align: center;
     font-weight: 700;
     margin-top: 4px
   }

   .navbar-nav {
     gap: 3px
   }

   .nav-link {
     font-size: 10px;
     font-weight: 600;
     color: #34415a !important;
     padding: 10px 8px !important
   }

   .nav-link.active,
   .nav-link:hover {
     color: var(--blue-dark) !important
   }

   .nav-phone .nav-link {
     white-space: nowrap;
     color: #172b4f !important
   }

   .nav-cta {
     font-size: 10px;
     font-weight: 700;
     padding: 10px 13px;
     border-radius: 4px;
     white-space: nowrap
   }

   .btn-primary {
     background: var(--blue);
     border-color: var(--blue);
     font-weight: 700;
     font-size: 12px;
     padding: 11px 17px;
     border-radius: 4px;
     box-shadow: 0 6px 14px rgba(0, 144, 245, .18)
   }

   .btn-primary:hover {
     background: var(--blue-dark);
     border-color: var(--blue-dark)
   }

   .hero-section {
     position: relative;
     overflow: hidden;
     background: #071b43 url('../images/heroi.webp') center/cover no-repeat;
     color: white;
     min-height: 600px;
   }

   .hero-shade {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(4, 19, 48, .98) 0%, rgba(4, 23, 54, .94) 35%, rgba(5, 28, 60, .68) 65%, rgba(4, 18, 43, .48) 100%)
   }

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

   .eyebrow {
     font-size: 9px;
     letter-spacing: 2.4px;
     font-weight: 800;
     color: #0b8ee5;
     margin-bottom: 7px
   }

   .eyebrow span {
     opacity: .7;
     padding: 0 3px
   }

   .eyebrow-light {
     color: #7bcaff
   }

   .hero-copy {
     padding: 12px 25px 10px 8px;
    
   }

   .hero-copy h1 {
     font-size: clamp(29px, 3.3vw, 45px);
     line-height: 1.08;
     font-weight: 800;
     letter-spacing: -1.5px;
     max-width: 520px;
     margin: 8px 0 13px
   }

   .hero-copy h1 span {
     display: block;
     color: #159ef6
   }

   .hero-copy p {
     font-size: 12px;
     color: #e2eaf7;
     max-width: 440px;
     line-height: 1.75;
     margin-bottom: 18px
   }

   .hero-actions {
     display: flex;
     align-items: center;
     gap: 18px
   }

   .video-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #fff;
     border: 0;
     background: none;
     font-size: 11px;
     font-weight: 600
   }

   .video-btn span {
     height: 30px;
     width: 30px;
     display: grid;
     place-items: center;
     background: #fff;
     color: #0a2752;
     border-radius: 50%;
     font-size: 18px
   }

   .hero-benefits {
     display: flex;
     flex-wrap: wrap;
     gap: 13px;
     margin-top: 27px;
     color: #e1e9f6;
     font-size: 9px;
     font-weight: 500
   }

   .hero-benefits i {
     color: #72caff;
     margin-right: 4px
   }

   .hero-visual-wrap {
     padding: 20px 10px 15px 0
   }

   .hero-visual {
     height: 310px;
     position: relative;
     max-width: 550px;
     margin: auto
   }

   .hero-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
     opacity: .46;
     filter: saturate(.75)
   }

   .screen-card {
     position: absolute;
     top: 12%;
     left: 17%;
     width: 64%;
     height: 68%;
     background: #fff;
     border: 5px solid #17263d;
     border-radius: 9px;
     box-shadow: 0 16px 30px #0008;
     transform: perspective(800px) rotateY(-5deg) rotateZ(-1deg);
     overflow: hidden;
     color: #152848
   }

   .screen-top {
     height: 19px;
     background: #f2f5f8;
     border-bottom: 1px solid #e1e7ee;
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 0 7px
   }

   .screen-top span {
     height: 5px;
     width: 5px;
     border-radius: 50%;
     background: #ef6a68
   }

   .screen-top span:nth-child(2) {
     background: #f3bf4f
   }

   .screen-top span:nth-child(3) {
     background: #52c77d
   }

   .screen-top small {
     font-size: 6px;
     color: #8a95a8;
     margin-left: 8px
   }

   .screen-content {
     padding: 16px 19px;
     position: relative;
     height: 100%;
     background: linear-gradient(110deg, #fff, #e9f6ff)
   }

   .screen-mini-brand {
     font-size: 9px;
     font-weight: 800;
     color: #0d8fe9
   }

   .screen-mini-brand small {
     font-size: 5px;
     display: block;
     letter-spacing: 1px
   }

   .screen-title {
     font-size: clamp(12px, 1.7vw, 21px);
     line-height: 1.1;
     margin-top: 14px;
     font-weight: 500
   }

   .screen-title b {
     color: #098fe7
   }

   .screen-lines {
     margin-top: 12px
   }

   .screen-lines i {
     display: block;
     height: 4px;
     width: 58%;
     background: #c8d7e8;
     border-radius: 3px;
     margin: 5px 0
   }

   .screen-lines i:nth-child(2) {
     width: 44%
   }

   .screen-lines i:nth-child(3) {
     width: 52%
   }

   .screen-tiles {
     display: flex;
     gap: 8px;
     margin-top: 13px
   }

   .screen-tiles span {
     display: grid;
     place-items: center;
     width: 29px;
     height: 25px;
     background: #dff2ff;
     color: #0788df;
     border-radius: 4px;
     font-size: 12px
   }

   .screen-cta {
     height: 9px;
     width: 58px;
     background: #0799f4;
     border-radius: 3px;
     margin-top: 11px
   }

   .floating-note {
     position: absolute;
     right: -3%;
     top: 12%;
     font-size: 13px;
     line-height: 1.4;
     color: #fff;
     font-style: italic;
     text-shadow: 0 2px 8px #000;
     max-width: 115px
   }

   .floating-note b {
     font-size: 14px
   }

   .floating-note i {
     display: block;
     font-size: 23px;
     margin: 5px 0 0 -5px;
     transform: rotate(25deg)
   }

   .device-card {
     position: absolute;
     right: 13%;
     bottom: 4%;
     height: 105px;
     width: 54px;
     background: #111c2e;
     border: 3px solid #25364d;
     border-radius: 9px;
     box-shadow: 0 10px 18px #0008;
     color: #fff;
     text-align: center;
     padding: 12px 5px 5px
   }

   .device-card>i {
     font-size: 17px;
     color: #0b9df5
   }

   .device-lines {
     height: 3px;
     background: #a7c9e0;
     margin: 8px 2px 0;
     border-radius: 3px
   }

   .device-lines.short {
     width: 60%;
     margin-top: 4px
   }

   .device-button {
     height: 13px;
     background: #078fe9;
     border-radius: 2px;
     margin: 9px 2px
   }

   .stats-strip {
     background: #f7fbff;
     border-bottom: 1px solid #e7f0fa;
     padding: 10px;
   }

   .stat-item {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 13px;
     padding: 16px 8px;
     border-right: 1px solid #e5edf6
   }

   .stat-item:last-child {
     border: 0
   }

   .stat-item>i {
     font-size: 23px;
     color: #078fe9
   }

   .stat-item strong {
     display: block;
     font-size: 17px;
     line-height: 1.2;
     color: #11254b;
     font-weight: 800
   }

   .stat-item small {
     display: block;
     color: #697790;
     font-size: 9px
   }

   .section-pad {
     padding: 33px 0 38px
   }

   .section-heading {
     margin-bottom: 18px
   }

   .split-heading {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 30px
   }

   .section-heading h2 {
     font-size: clamp(22px, 2.5vw, 30px);
     font-weight: 800;
     letter-spacing: -.8px;
     line-height: 1.15;
     margin: 0;
     color: #10234a
   }

   .heading-side {
     display: flex;
     align-items: flex-end;
     gap: 24px;
     max-width: 52%;
     padding-bottom: 2px
   }

   .heading-side p {
     font-size: 10px;
     color: #61708a;
     line-height: 1.7;
     margin: 0;
     max-width: 340px
   }

   .text-link {
     font-size: 10px;
     font-weight: 700;
     color: #0789e4;
     white-space: nowrap
   }

   .text-link i {
     margin-left: 5px
   }

   .services-section {
     background: linear-gradient(180deg, #fff, #f9fcff)
   }

   .service-card {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
     min-height: 116px;
     padding: 14px 13px 12px;
     background: #fff;
     border: 1px solid #e9eef6;
     border-radius: 7px;
     box-shadow: 0 4px 15px rgba(14, 47, 88, .035);
     color: #13264c;
     transition: .2s
   }

   .service-card:hover,
   .website-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 25px rgba(14, 47, 88, .1);
     border-color: #cfe7ff
   }

   .service-card b {
     font-size: 10px;
     line-height: 1.35;
     margin-top: 9px;
   }

   .service-card small {
     font-size: 8px;
     color: #71809a;
     margin-top: 3px
   }

   .card-arrow {
     margin-top: auto;
     padding-top: 8px;
     color: #0b8fe8;
     font-size: 12px
   }

   .icon-bubble {
     width: 54px;
     height: 54px;
     display: grid;
     place-items: center;
     border-radius: 11px;
     font-size: 24px;
   }

   .blue {
     color: #078eea;
     background: #e8f5ff
   }

   .orange {
     color: #f39431;
     background: #fff3e5
   }

   .purple {
     color: #8b57e8;
     background: #f3eaff
   }

   .pink {
     color: #ed5d83;
     background: #ffedf2
   }

   .mint {
     color: #1ab59b;
     background: #e6faf5
   }

   .sky {
     color: #178de4;
     background: #e9f6ff
   }

   .industries-section {
     background: linear-gradient(110deg, #f1f8ff, #eaf5ff);
     padding-top: 34px;
     padding-bottom: 35px
   }

   .industry-grid {
     row-gap: 10px !important
   }

   .industry-card {
     height: 120px;
     display: flex;
     align-items: flex-end;
     position: relative;
     overflow: hidden;
     border-radius: 7px;
     background-image: linear-gradient(0deg, rgba(2, 16, 39, .93), rgba(3, 19, 45, .04) 76%), var(--bg);
     background-size: cover;
     background-position: center;
     color: #fff;
     padding: 12px 10px;
     box-shadow: 0 4px 12px #0a28551c;
     transition: .25s
   }

   .industry-card:hover {
     transform: translateY(-3px);
     filter: saturate(1.1)
   }

   .industry-card b {
     font-size: 10px;
     line-height: 1.3;
     position: relative;
     z-index: 1
   }

   .industry-icon {
     position: absolute;
     top: 10px;
     left: 10px;
     height: 27px;
     width: 27px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #ffffffdb;
     color: #0b8de5;
     font-size: 14px
   }

   .industry-solutions {
     background: #fff
   }

   .industry-icons-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 24px 14px;
     padding: 6px 0 0
   }

   .industry-icons-grid>div,
   .custom-grid>div {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 7px
   }

   .round-icon {
     height: 55px;
     width: 55px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 22px;
     border: 1px solid #e8edf4;
     box-shadow: 0 0 0 5px #f8fbff
   }

   .industry-icons-grid b,
   .custom-grid b {
     font-size: 9px;
     line-height: 1.4;
     font-weight: 700;
     color: #243656
   }

   .technologies-section {
     background: #f1f8ff;
     padding-bottom: 30px
   }

   .tech-tabs {
     display: flex;
     gap: 4px;
     overflow-x: auto;
     padding: 0 4px;
     scrollbar-width: thin
   }

   .tech-tab {
     flex: 1 0 auto;
     min-width: 70px;
     background: #fff;
     border: 1px solid #e5edf7;
     padding: 9px 12px;
     border-radius: 5px 5px 0 0;
     color: #4b5b75;
     font-size: 9px;
     font-weight: 600
   }

   .tech-tab.active {
     background: #0b8fe9;
     color: #fff;
     border-color: #0b8fe9;
     box-shadow: 0 4px 10px #078eea38
   }

   .tech-panel {
     background: #fff;
     border: 1px solid #e5edf7;
     border-radius: 0 0 7px 7px;
     padding: 17px 14px;
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     gap: 10px
   }

   .tech-item {
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 8px;
     color: #506079;
     font-size: 8px
   }

   .tech-logo {
     height: 34px;
     width: 34px;
     display: grid;
     place-items: center;
     font-size: 22px;
     font-weight: 800;
     color: #fff;
     border-radius: 4px
   }

   .tech-logo.html {
     background: #e95420
   }

   .tech-logo.css {
     background: #2276bc
   }

   .tech-logo.js {
     background: #f4d13d;
     color: #242424;
     font-size: 15px
   }

   .tech-logo.bootstrap {
     background: #7952b3
   }

   .tech-logo.tw {
     background: #24b8d7
   }

   .tech-logo.react {
     background: #eafaff;
     color: #23b8d2;
     font-size: 28px
   }

   .tech-logo.vue {
     background: #e7f9f0;
     color: #42b883
   }

   .tech-logo.jquery {
     background: #f0f5ff;
     color: #1769aa;
     font-size: 13px
   }

   .tech-logo.ts {
     background: #3178c6;
     font-size: 15px
   }

   .tech-logo.next {
     background: #151515
   }

   .stack-section {
     background: radial-gradient(ellipse at 85% 0%, #1a367b 0%, transparent 40%), linear-gradient(120deg, #07183f, #0b2b61);
     padding: 30px 0 34px;
     color: #fff
   }

   .stack-heading h2 {
     color: #fff
   }

   .stack-heading .heading-side p {
     color: #cbd8ed
   }

   .stack-heading .text-link {
     color: #4db6ff
   }

   .stack-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 10px;
     padding: 0 15px
   }

   .stack-card {
     background: #fff;
     border-radius: 7px;
     color: #17294c;
     min-height: 120px;
     text-align: center;
     padding: 13px 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     box-shadow: 0 8px 20px #0002
   }

   .stack-logo {
     height: 37px;
     min-width: 37px;
     display: grid;
     place-items: center;
     font-size: 28px;
     font-weight: 800;
     margin-bottom: 4px
   }

   .stack-logo.laravel {
     color: #f05252
   }

   .stack-logo.php {
     color: #777bb3;
     font-size: 15px;
     font-style: italic
   }

   .stack-logo.wordpress {
     color: #21759b
   }

   .stack-logo.shopify {
     color: #75a843
   }

   .stack-logo.react {
     color: #26b7cf
   }

   .stack-logo.aws {
     color: #ef9b22;
     font-size: 24px
   }

   .stack-card b {
     padding-top: 20px;
     font-size: 12px
   }

   .stack-card small {
     font-size: 8px;
     line-height: 1.45;
     color: #687690;
     margin-top: 5px;
     max-width: 130px
   }

   .website-types {
     background: #f8fbff
   }

   .website-card {
     height: 100%;
     display: flex;
     flex-direction: column;
     background: #fff;
     border: 1px solid #e5edf6;
     border-radius: 7px;
     overflow: hidden;
     padding-bottom: 10px;
     color: #10234a;
     transition: .2s;
     box-shadow: 0 4px 12px #0c28500a
   }

   .website-card img {
     width: 100%;
     height: 74px;
     object-fit: cover
   }

   .website-card b {
     font-size: 9px;
     line-height: 1.3;
     padding: 10px 9px 0
   }

   .website-card p {
     font-size: 8px;
     color: #687690;
     line-height: 1.5;
     padding: 0 9px;
     margin: 5px 0 8px;
     flex: 1
   }

   .website-card>i {
     font-size: 12px;
     color: #078fe9;
     padding: 0 9px
   }

   .custom-solutions {
     background: #fff;
     padding-top: 32px;
     padding-bottom: 40px
   }

   .custom-grid {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 15px
   }

   .hex-icon {
     width: 56px;
     height: 56px;
     display: grid;
     place-items: center;
     clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
     border: 0;
     font-size: 21px;
     position: relative
   }

   .hex-icon:before {
     content: "";
     position: absolute;
     inset: 3px;
     border: 1px solid currentColor;
     clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
     opacity: .25
   }

   .contact-section {
     background: #f0f7ff;
     padding: 20px 0 35px
   }

   .contact-box {
     border-radius: 12px;
     padding: 28px 34px;
     background: linear-gradient(110deg, #071a43, #0b4e91);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px;
     color: #fff
   }

   .contact-box h2 {
     font-size: 25px;
     font-weight: 800;
     margin: 0 0 7px
   }

   .contact-box p {
     margin: 0;
     color: #d0e0f5;
     font-size: 11px
   }

   .site-footer {
     background: #061533;
     color: #c3d0e5;
     padding: 17px 0;
     font-size: 10px
   }

   .toast-message {
     position: fixed;
     bottom: 25px;
     left: 50%;
     transform: translate(-50%, 20px);
     background: #10234a;
     color: #fff;
     border-radius: 7px;
     padding: 12px 18px;
     font-size: 12px;
     box-shadow: 0 10px 30px #0003;
     opacity: 0;
     pointer-events: none;
     transition: .25s;
     z-index: 2000
   }

   .toast-message.show {
     opacity: 1;
     transform: translate(-50%, 0)
   }

   .back-to-top {
     position: fixed;
     right: 18px;
     bottom: 18px;
     width: 38px;
     height: 38px;
     border: 0;
     border-radius: 50%;
     background: #078fe9;
     color: #fff;
     box-shadow: 0 6px 20px #078fe94a;
     display: none;
     z-index: 900
   }

   .back-to-top.show {
     display: grid;
     place-items: center
   }

   @media (min-width:1200px) {
     .container {
       max-width: 1280px
     }
   }

   @media (max-width:991.98px) {
     .navbar-collapse {
       padding: 12px 0
     }

     .navbar-nav {
       align-items: stretch !important
     }

     .nav-link {
       font-size: 12px;
       padding: 8px 4px !important
     }

     .nav-phone {
       margin-top: 5px
     }

     .nav-cta {
       display: inline-block;
       margin-top: 8px
     }

     .min-vh-hero {
      height: 500px;
       padding-top: 35px;
       padding-bottom: 30px
     }

     .hero-copy {
      min-height: 500px;
       padding: 12px
     }

     .hero-visual-wrap {
       padding: 15px 10px 20px
     }

     .hero-visual {
       height: 300px;
       max-width: 520px
     }

     .heading-side {
       max-width: 48%;
       display: block
     }

     .heading-side .text-link {
       display: inline-block;
       margin-top: 8px
     }

     .industry-card {
       height: 135px
     }

     .stack-grid {
       grid-template-columns: repeat(3, 1fr)
     }

     .tech-panel {
       grid-template-columns: repeat(5, 1fr)
     }

     .industry-icons-grid {
       grid-template-columns: repeat(4, 1fr)
     }
   }

   @media (max-width:575.98px) {
     .topbar {
       display: none
     }

     .main-nav {
       padding: 7px 0
     }

     .brand-mark {
       font-size: 26px
     }

     .brand-word {
       font-size: 16px
     }

     .navbar-toggler {
       padding: 5px 8px
     }

     .hero-copy {
       padding: 18px 10px 10px
     }

     .hero-copy h1 {
       font-size: 35px
     }

     .hero-copy p {
       font-size: 12px
     }

     .hero-benefits {
       gap: 10px;
       margin-top: 22px
     }

     .hero-benefits span {
       width: calc(50% - 6px)
     }

     .hero-visual-wrap {
       padding: 10px 0 20px
     }

     .hero-visual {
       height: 230px
     }

     .screen-card {
       left: 9%;
       width: 72%;
       height: 72%
     }

     .floating-note {
       right: 0;
       font-size: 10px;
       max-width: 78px
     }

     .floating-note b {
       font-size: 11px
     }

     .device-card {
       right: 10%;
       height: 83px;
       width: 43px;
       bottom: 0
     }

     .stat-item {
       justify-content: flex-start;
       padding: 12px 14px;
       gap: 9px
     }

     .stat-item>i {
       font-size: 20px
     }

     .stat-item strong {
       font-size: 15px
     }

     .stat-item small {
       font-size: 8px
     }

     .section-pad {
       padding: 27px 0 30px
     }

     .split-heading {
       display: block
     }

     .section-heading h2 {
       font-size: 25px
     }

     .heading-side {
       max-width: none;
       margin-top: 12px
     }

     .heading-side p {
       font-size: 10px
     }

     .heading-side .text-link {
       margin-top: 7px
     }

     .service-card {
       min-height: 125px;
       padding: 12px 10px
     }

     .service-card b {
       font-size: 10px
     }

     .industry-card {
       height: 125px;
       padding: 10px
     }

     .industry-card b {
       font-size: 9px
     }

     .industry-icons-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 23px 8px
     }

     .round-icon {
       height: 48px;
       width: 48px;
       font-size: 19px
     }

     .industry-icons-grid b {
       font-size: 8px
     }

     .tech-tabs {
       margin: 0 -12px
     }

     .tech-tab {
       padding: 9px 10px
     }

     .tech-panel {
       grid-template-columns: repeat(3, 1fr);
       padding: 15px 8px
     }

     .stack-grid {
       grid-template-columns: repeat(2, 1fr);
       padding: 0
     }

     .stack-card {
       min-height: 115px
     }

     .website-card img {
       height: 80px
     }

     .website-card b {
       font-size: 9px
     }

     .website-card p {
       font-size: 8px
     }

     .custom-grid {
       grid-template-columns: repeat(4, 1fr);
       gap: 22px 8px
     }

     .hex-icon {
       height: 50px;
       width: 50px;
       font-size: 19px
     }

     .custom-grid b {
       font-size: 8px
     }

     .contact-box {
       padding: 24px 20px;
       display: block
     }

     .contact-box h2 {
       font-size: 23px
     }

     .contact-box .btn {
       margin-top: 18px
     }
   }

   .screen-card {
     left: 9%;
     width: 72%;
     height: 72%
   }

   .floating-note {
     right: 0;
     font-size: 10px;
     max-width: 78px
   }

   .floating-note b {
     font-size: 11px
   }

   .device-card {
     right: 10%;
     height: 83px;
     width: 43px;
     bottom: 0
   }

   .stat-item {
     justify-content: flex-start;
     padding: 12px 14px;
     gap: 9px
   }

   .stat-item>i {
     font-size: 20px
   }

   .stat-item strong {
     font-size: 15px
   }

   .stat-item small {
     font-size: 12px
   }

   .section-pad {
     padding: 27px 0 30px
   }

   .split-heading {
     display: block
   }

   .section-heading h2 {
     font-size: 25px
   }

   .heading-side {
     max-width: none;
     margin-top: 12px
   }

   .heading-side p {
    padding: 5px 0;
     font-size: 12px;
     color: #000000;
   }

   .heading-side .text-link {
     margin-top: 7px
   }

   .service-card {
     min-height: 125px;
     padding: 12px 10px
   }

   .service-card b {
     font-size: 14px;
     width: 100%;
   }

   .industry-card {
     height: 125px;
     padding: 10px
   }

   .industry-card b {
     font-size: 14px;
   }

   .industry-icons-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 23px 8px
   }

   .round-icon {
     height: 48px;
     width: 48px;
     font-size: 19px
   }

   .industry-icons-grid b {
     font-size: 8px
   }

   .tech-tabs {
     margin: 0 -12px
   }

   .tech-tab {
     padding: 9px 10px
   }

   .tech-panel {
     grid-template-columns: repeat(3, 1fr);
     padding: 15px 8px
   }

   .stack-grid {
     grid-template-columns: repeat(2, 1fr);
     padding: 0
   }

   .stack-card {
     min-height: 145px;
    
   }

   .website-card img {
     height: 80px
   }

   .website-card b {
     font-size: 13px;
     padding: 5px 0 0;
   }

   .website-card p {
     font-size: 8px
   }

   .custom-grid {
     grid-template-columns: repeat(4, 1fr);
     gap: 22px 8px
   }

   .hex-icon {
     height: 50px;
     width: 50px;
     font-size: 19px
   }

   .custom-grid b {
     font-size: 8px
   }

   .contact-box {
     padding: 24px 20px;
     display: block
   }

   .contact-box h2 {
     font-size: 23px
   }

   .contact-box .btn {
     margin-top: 18px
   }
 }
/* =========================================================
   INFRA WEB TECH — PORTFOLIO SECTION
   Clean CSS | Swiper | Responsive Cards | Screenshot Hover
========================================================= */

.portfolio-section {
  --portfolio-blue: #174f91;
  --portfolio-blue-dark: #0b376b;
  --portfolio-text: #172033;
  --portfolio-muted: #788397;
  --portfolio-border: #e5eaf1;

  position: relative;
  padding: 65px 0 80px;
  overflow: hidden;
  background: #fff;
}

.portfolio-section,
.portfolio-section *,
.portfolio-section *::before,
.portfolio-section *::after {
  box-sizing: border-box;
}

/* ---------- Heading ---------- */

.portfolio-section .portfolio-heading,
.portfolio-section .row.justify-content-between {
  align-items: center;
  margin-bottom: 36px;
}

.portfolio-section .title-area {
  margin: 0;
}

.portfolio-section .sec-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: var(--portfolio-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.portfolio-section .port-title {
  margin: 0;
  color: #10234a;
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -1.2px;
}

/* ---------- Navigation buttons ---------- */

.portfolio-section .sec-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portfolio-section .portfolio-prev,
.portfolio-section .portfolio-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 120px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid #e5eaf1;
  border-radius: 7px;
  background: #eff1f5;
  color: var(--portfolio-blue);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.portfolio-section .portfolio-prev:hover,
.portfolio-section .portfolio-next:hover {
  border-color: var(--portfolio-blue);
  background: var(--portfolio-blue);
  color: #fff;
}

.portfolio-section .portfolio-prev:focus-visible,
.portfolio-section .portfolio-next:focus-visible {
  outline: 3px solid rgba(23, 79, 145, 0.25);
  outline-offset: 3px;
}

/* ---------- Swiper viewport ---------- */

.portfolio-section .portfolioSwiper {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 2px 14px;
}

.portfolio-section .portfolioSwiper .swiper-wrapper {
  align-items: stretch;
}

.portfolio-section .portfolioSwiper .swiper-slide {
  display: flex;
  align-items: stretch;
  height: auto;
  min-width: 0;
  /* Let Swiper calculate slide widths from slidesPerView. */
}

/* ---------- Project card ---------- */

.portfolio-section .project-style3 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--portfolio-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(15, 30, 55, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.portfolio-section .project-style3:hover {
  border-color: #c8d8ed;
  box-shadow: 0 12px 28px rgba(15, 30, 55, 0.09);
}

/* ---------- Website screenshot viewport ---------- */

.portfolio-section .project-img {
  position: relative;
  display: block;
  flex: 0 0 400px;
  width: 100%;
  height: 400px;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #f0f2f5;
  cursor: pointer;
}

/* Full-page screenshot: JavaScript moves this image on hover. */
.portfolio-section .project-img img {
  position: relative;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: initial !important;
  object-position: top center;
  transform: translate3d(0, 0, 0);
  transition: none !important;
  will-change: transform;
}

/* Bottom gradient */

.portfolio-section .project-img::before {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  background: linear-gradient(to bottom,
      transparent,
      rgba(9, 22, 42, 0.15));
  content: "";
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.portfolio-section .project-style3:hover .project-img::before {
  opacity: 0;
}

/* Hover hint */

.portfolio-section .project-img::after {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 50%;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  background: rgba(15, 23, 42, 0.86);
  color: #fff;
  content: "Hover to explore";
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.portfolio-section .project-img:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Project details ---------- */

.portfolio-section .project-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 0 auto;
  min-height: 88px;
  padding: 18px 20px;
  border-top: 1px solid #edf0f4;
  background: #fff;
}

.portfolio-section .project-bottom .media-body {
  min-width: 0;
}

.portfolio-section .project-title {
  margin: 0 0 6px;
  color: var(--portfolio-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.portfolio-section .project-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.portfolio-section .project-title a:hover {
  color: var(--portfolio-blue);
}

.portfolio-section .project-category {
  color: var(--portfolio-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Mobile navigation ---------- */

.portfolio-section .mobile-arrows {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.portfolio-section .mobile-arrows .portfolio-prev,
.portfolio-section .mobile-arrows .portfolio-next {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
}

/* ---------- Tablet ---------- */

@media (max-width: 991.98px) {
  .portfolio-section {
    padding: 55px 10px 65px;
  }

  .portfolio-section .portfolio-heading,
  .portfolio-section .row.justify-content-between {
    margin-bottom: 28px;
  }

  .portfolio-section .project-img {
    height: 360px;
    flex-basis: 360px;
  }

  .portfolio-section .project-bottom {
    min-height: 84px;
    padding: 16px;
  }

  .portfolio-section .mobile-arrows {
    display: flex;
  }
  .project-style3{
    padding: 0 10px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 575.98px) {
  .portfolio-section {
    padding: 42px 10px 50px;
  }

  .portfolio-section .port-title {
    font-size: clamp(29px, 7vw, 34px);
    letter-spacing: -0.8px;
  }

  .portfolio-section .sec-subtitle {
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.2px;
  }

  .portfolio-section .project-img {
    height: 330px;
    flex-basis: 330px;
  }

  .portfolio-section .project-bottom {
    min-height: 80px;
    padding: 15px;
  }

  .portfolio-section .project-title {
    font-size: 15px;
  }

  .portfolio-section .portfolio-prev,
  .portfolio-section .portfolio-next {
    min-width: 46px;
    width: 46px;
    min-height: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }
}

/* ---------- Touch devices ---------- */

@media (hover: none) {
  .portfolio-section .project-img::after {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */


.portfolio-section .portfolioSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

 /* ==================================================
   INFRA WEB TECH - WHY CHOOSE US
   Premium Dark Section
================================================== */

 .why-infra-section {
   --why-bg: #081321;
   --why-card: #101e30;
   --why-white: #ffffff;
   --why-muted: #a6b5c8;
   --why-blue: #3287ff;
   --why-border: rgba(255, 255, 255, 0.09);

   position: relative;
   padding: 85px 0;
   overflow: hidden;
   isolation: isolate;
   background:
     radial-gradient(ellipse at 80% 45%,
       rgba(31, 105, 202, 0.15),
       transparent 38%),
     var(--why-bg);
   color: var(--why-white);
 }

 .why-infra-section *,
 .why-infra-section *::before,
 .why-infra-section *::after {
   box-sizing: border-box;
 }

 /* Subtle background decoration */
 .why-infra-section::before {
   position: absolute;
   top: -150px;
   right: -150px;
   z-index: -1;
   width: 420px;
   height: 420px;
   border: 1px solid rgba(83, 156, 255, 0.08);
   border-radius: 50%;
   content: "";
   box-shadow:
     0 0 0 45px rgba(83, 156, 255, 0.025),
     0 0 0 90px rgba(83, 156, 255, 0.02);
   pointer-events: none;
 }

 /* Left content */
 .why-infra-content {
   position: relative;
   z-index: 1;
 }

 .why-infra-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 22px;
   color: #72b1ff;
   font-size: 12px;
   font-weight: 750;
   letter-spacing: 2px;
   line-height: 1.5;
   text-transform: uppercase;
 }

 .why-infra-section .eyebrow-line {
   display: inline-block;
   width: 24px;
   height: 2px;
   border-radius: 5px;
   background: var(--why-blue);
 }

 /* Heading and intro */
 .why-infra-section .why-infra-intro {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   align-items: start;
   gap: 30px;
   margin-bottom: 34px;
 }

 .why-infra-section .why-infra-intro h2 {
   margin: 0;
   color: #fff;
   font-size: clamp(30px, 3vw, 36px);
   font-weight: 750;
   line-height: 1.18;
   letter-spacing: -1.3px;
 }

 .why-infra-section .why-infra-intro h2 span,
 .why-infra-section .why-infra-visual-content h3 span {
   display: block;
 }

 .why-infra-section .why-infra-intro p {
   margin: 5px 0 0;
   color: var(--why-muted);
   font-size: 13px;
   font-weight: 400;
   line-height: 1.9;
 }

 /* Feature cards */
 .why-infra-section .why-feature-card {
   position: relative;
   height: 100%;
   min-height: 195px;
   padding: 20px 15px;
   overflow: hidden;
   border: 1px solid var(--why-border);
   border-radius: 12px;
   background: linear-gradient(145deg,
       rgba(255, 255, 255, 0.055),
       rgba(255, 255, 255, 0.018));
   transition:
     border-color 0.3s ease,
     background 0.3s ease,
     transform 0.3s ease;
 }

 .why-infra-section .why-feature-card:hover {
   transform: translateY(-5px);
   border-color: rgba(80, 155, 255, 0.4);
   background: linear-gradient(145deg,
       rgba(49, 124, 224, 0.15),
       rgba(255, 255, 255, 0.025));
 }

 /* Feature icons */
 .why-infra-section .why-feature-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 43px;
   height: 43px;
   margin-bottom: 17px;
   border: 1px solid transparent;
   border-radius: 11px;
   font-size: 20px;
 }

 .why-infra-section .icon-blue {
   color: #70b4ff;
   background: rgba(57, 139, 255, 0.16);
   border-color: rgba(57, 139, 255, 0.18);
 }

 .why-infra-section .icon-purple {
   color: #c2a1ff;
   background: rgba(153, 103, 255, 0.16);
   border-color: rgba(153, 103, 255, 0.18);
 }

 .why-infra-section .icon-cyan {
   color: #63e1e8;
   background: rgba(30, 207, 215, 0.13);
   border-color: rgba(30, 207, 215, 0.18);
 }

 .why-infra-section .icon-orange {
   color: #ffc276;
   background: rgba(255, 168, 66, 0.14);
   border-color: rgba(255, 168, 66, 0.18);
 }

 /* Feature typography */
 .why-infra-section .why-feature-card h3 {
   margin: 0 0 9px;
   color: #f5f8ff;
   font-size: 14px;
   font-weight: 700;
   line-height: 1.5;
 }

 .why-infra-section .why-feature-card p {
   margin: 0;
   color: #a6b5c8;
   font-size: 11.5px;
   line-height: 1.8;
 }

 /* Right image panel */
 .why-infra-section .why-infra-visual {
   position: relative;
   min-height: 440px;
   height: 100%;
   overflow: hidden;
   isolation: isolate;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 18px;
   background: #15273c;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
 }

 /* Actual image */
 .why-infra-section .why-infra-visual>img {
   position: absolute;
   inset: 0;
   z-index: -2;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 /* Image overlay */
 .why-infra-section .why-infra-visual::after {
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg,
       rgba(6, 18, 34, 0.02) 15%,
       rgba(6, 18, 34, 0.28) 45%,
       rgba(6, 18, 34, 0.96) 100%);
   content: "";
 }

 /* Decorative blue ring */
 .why-infra-section .why-visual-decoration {
   position: absolute;
   top: 25px;
   right: 25px;
   width: 70px;
   height: 70px;
   border: 1px solid rgba(114, 177, 255, 0.6);
   border-radius: 50%;
   box-shadow: 0 0 35px rgba(50, 135, 255, 0.18);
   pointer-events: none;
 }

 /* CTA content */
 .why-infra-section .why-infra-visual-content {
   position: absolute;
   right: 24px;
   bottom: 25px;
   left: 24px;
 }

 .why-infra-section .visual-label {
   display: block;
   margin-bottom: 12px;
   color: #82baff;
   font-size: 10px;
   font-weight: 750;
   letter-spacing: 1.8px;
   line-height: 1.6;
 }

 .why-infra-section .why-infra-visual-content h3 {
   margin: 0 0 12px;
   color: #fff;
   font-size: clamp(23px, 2.1vw, 29px);
   font-weight: 750;
   line-height: 1.3;
   letter-spacing: -0.5px;
 }

 .why-infra-section .why-infra-visual-content p {
   max-width: 320px;
   margin: 0 0 20px;
   color: #d0d9e6;
   font-size: 12px;
   line-height: 1.8;
 }

 /* CTA button */
 .why-infra-section .why-infra-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   min-height: 47px;
   padding: 0 19px;
   border: 1px solid #438fff;
   border-radius: 8px;
   background: #1875ee;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 8px 24px rgba(24, 117, 238, 0.24);
   transition:
     background 0.25s ease,
     box-shadow 0.25s ease,
     transform 0.25s ease;
 }

 .why-infra-section .why-infra-cta:hover {
   transform: translateY(-2px);
   background: #0863d6;
   color: #fff;
   box-shadow: 0 12px 28px rgba(24, 117, 238, 0.32);
 }

 .why-infra-section .why-infra-cta i {
   font-size: 15px;
 }

 /* ==========================================
   RESPONSIVE DESIGN
========================================== */

 @media (max-width: 1199px) {
   .why-infra-section {
     padding: 70px 0;
   }

   .why-infra-section .why-infra-intro {
     grid-template-columns: 1fr;
     gap: 14px;
   }

   .why-infra-section .why-infra-intro p {
     max-width: 580px;
   }

   .why-infra-section .why-feature-card {
     min-height: 185px;
   }

   .why-infra-section .why-infra-visual {
     min-height: 410px;
   }
 }

 @media (max-width: 991.98px) {
   .why-infra-section {
     padding: 60px 0;
   }

   .why-infra-section .why-infra-intro h2 {
     font-size: clamp(30px, 5vw, 42px);
   }

   .why-infra-section .why-feature-card {
     min-height: 175px;
   }

   .why-infra-section .why-infra-visual {
     min-height: 390px;
   }

   .why-infra-section .why-infra-visual-content h3 {
     font-size: 28px;
   }
 }

 @media (max-width: 575.98px) {
   .why-infra-section {
     padding: 48px 0;
   }

   .why-infra-section .why-infra-eyebrow {
     font-size: 10px;
     letter-spacing: 1.4px;
   }

   .why-infra-section .why-infra-intro {
     margin-bottom: 25px;
   }

   .why-infra-section .why-infra-intro h2 {
     font-size: 31px;
     letter-spacing: -0.8px;
   }

   .why-infra-section .why-infra-intro p {
     font-size: 13px;
   }

   .why-infra-section .why-feature-card {
     min-height: 190px;
     padding: 17px 13px;
   }

   .why-infra-section .why-feature-icon {
     width: 39px;
     height: 39px;
     margin-bottom: 13px;
     font-size: 18px;
   }

   .why-infra-section .why-feature-card h3 {
     font-size: 13px;
   }

   .why-infra-section .why-feature-card p {
     font-size: 11px;
     line-height: 1.7;
   }

   .why-infra-section .why-infra-visual {
     min-height: 390px;
     border-radius: 14px;
   }

   .why-infra-section .why-infra-visual-content {
     right: 19px;
     bottom: 21px;
     left: 19px;
   }

   .why-infra-section .why-infra-visual-content h3 {
     font-size: 25px;
   }
 }

 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {

   .why-infra-section .why-feature-card,
   .why-infra-section .why-infra-cta {
     transition: none;
   }
 }



 /* ================================================
   INFRA WEB TECH — CLIENTS CAROUSEL
================================================ */

 .iw-clients-section {
   --iw-blue: #3287ff;
   --iw-heading: #142338;
   --iw-muted: #69788c;
   --iw-border: #e6ebf2;

   position: relative;
   padding: 80px 0;
   overflow: hidden;
   background: #f6f8fc;
 }

 /* Heading */
 .iw-clients-heading {
   max-width: 740px;
   margin: 0 auto 42px;
   text-align: center;
 }

 .iw-clients-eyebrow {
   display: flex;
   align-items: start;
   justify-content: start;
   gap: 10px;
   margin-bottom: 16px;
   color: #286dc4;
   font-size: 12px;
   font-weight: 750;
   letter-spacing: 2px;
 }

 .iw-eyebrow-line {
   display: inline-block;
   width: 24px;
   height: 2px;
   border-radius: 3px;
   background: var(--iw-blue);
 }

 .iw-clients-heading h2 {
   margin: 0 0 16px;
   color: var(--iw-heading);
   font-size: clamp(30px, 3.5vw, 45px);
   font-weight: 750;
   line-height: 1.2;
   letter-spacing: -1.2px;
 }

 .iw-clients-heading h2 span {
   color: #367ed4;
 }

 .iw-clients-heading p {
   max-width: 590px;
   margin: 0 auto;
   color: var(--iw-muted);
   font-size: 14px;
   line-height: 1.85;
 }

 /* Carousel viewport */
 .iw-clients-carousel {
   position: relative;
   width: 100%;
   overflow: hidden;
   padding: 8px 0 18px;

   /* Soft fade at the edges */
   -webkit-mask-image: linear-gradient(to right,
       transparent,
       #000 5%,
       #000 95%,
       transparent);
   mask-image: linear-gradient(to right,
       transparent,
       #000 5%,
       #000 95%,
       transparent);
 }

 /* Moving track */
 .iw-clients-track {
   display: flex;
   align-items: center;
   gap: 24px;
   width: max-content;
   animation: iw-client-marquee 32s linear infinite;
   will-change: transform;
 }

 /* Logo card */
 .iw-client-logo {
   display: flex;
   flex: 0 0 190px;
   width: 190px;
   height: 110px;
   align-items: center;
   justify-content: center;
   padding: 20px;
   overflow: hidden;
   border: 1px solid var(--iw-border);
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 5px 18px rgba(20, 35, 56, 0.035);
   transition:
     border-color 0.25s ease,
     box-shadow 0.25s ease,
     transform 0.25s ease;
 }

 .iw-client-logo img {
   display: block;
   width: 100%;
   height: 100%;
   max-width: 150px;
   max-height: 65px;
   object-fit: contain;
   object-position: center;
   opacity: 0.82;
   transition: opacity 0.25s ease;
 }

 .iw-client-logo:hover {
   transform: translateY(-3px);
   border-color: #c8dcf8;
   box-shadow: 0 10px 26px rgba(20, 70, 130, 0.09);
 }

 .iw-client-logo:hover img {
   opacity: 1;
 }

 /* Seamless loop: move exactly one logo set */
 @keyframes iw-client-marquee {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(calc(-50% - 12px));
   }
 }


 /* Bottom CTA */
 .iw-clients-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 30px;
   text-align: center;
 }

 .iw-clients-cta p {
   margin: 0;
   color: #43536a;
   font-size: 14px;
   font-weight: 600;
 }

 .iw-clients-cta-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 44px;
   padding: 0 19px;
   border: 1px solid var(--iw-blue);
   border-radius: 7px;
   background: var(--iw-blue);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   text-decoration: none;
   transition:
     background 0.25s ease,
     transform 0.25s ease;
 }

 .iw-clients-cta-btn:hover {
   transform: translateY(-2px);
   background: #176bd8;
   color: #fff;
 }

 .iw-clients-cta-btn span {
   font-size: 16px;
 }

 /* Tablet */
 @media (max-width: 991px) {
   .iw-clients-section {
     padding: 65px 0;
   }

   .iw-clients-track {
     gap: 18px;
     animation-duration: 28s;
   }

   .iw-client-logo {
     flex-basis: 170px;
     width: 170px;
     height: 100px;
   }
 }

 /* Mobile */
 @media (max-width: 575px) {
   .iw-clients-section {
     padding: 48px 0;
   }

   .iw-clients-heading {
     margin-bottom: 28px;
   }

   .iw-clients-heading h2 {
     font-size: 31px;
     letter-spacing: -0.7px;
   }

   .iw-clients-heading p {
     font-size: 13px;
   }

   .iw-clients-track {
     gap: 14px;
     animation-duration: 24s;
   }

   .iw-client-logo {
     flex-basis: 145px;
     width: 145px;
     height: 88px;
     padding: 15px;
     border-radius: 10px;
   }

   .iw-client-logo img {
     max-width: 120px;
     max-height: 55px;
   }

   .iw-clients-cta {
     flex-direction: column;
     gap: 14px;
     margin-top: 24px;
   }
 }

 .iw-growth-cta-content {
   max-width: 610px;
 }

 .iw-cta-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 22px;
   color: #b8e4ff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.6px;
 }

 .iw-cta-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--blue);
   box-shadow: 0 0 12px rgba(7, 153, 244, 0.8);
 }

 .iw-growth-cta h2 {
   margin: 0 0 20px;
   color: #fff;
   font-size: clamp(36px, 4.2vw, 54px);
   font-weight: 750;
   line-height: 1.15;
   letter-spacing: -0.045em;
 }

 .iw-growth-cta h2 span {
   display: block;
   color: var(--blue);
 }

 .iw-growth-cta-content>p {
   max-width: 550px;
   margin: 0 0 28px;
   color: #d0dced;
   font-size: 15px;
   line-height: 1.85;
 }

 .iw-cta-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 13px;
 }

 .iw-cta-btn {
   min-height: 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px 21px;
   border: 1px solid transparent;
   border-radius: 7px;
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 650;
   letter-spacing: -0.02em;
   text-decoration: none;
   transition: all 0.25s ease;
 }

 .iw-cta-primary {
   color: #fff;
   background: var(--blue);
   box-shadow: 0 8px 24px rgba(7, 153, 244, 0.2);
 }

 .iw-cta-primary:hover {
   color: #fff;
   background: var(--blue-dark);
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(7, 153, 244, 0.3);
 }

 .iw-cta-secondary {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.35);
   background: rgba(7, 27, 67, 0.4);
 }

 .iw-cta-secondary:hover {
   color: #fff;
   border-color: var(--blue);
   background: rgba(7, 153, 244, 0.15);
   transform: translateY(-2px);
 }

 .iw-cta-note {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-top: 22px;
   color: #bdcde2;
   font-size: 12px;
 }

 .iw-cta-note i {
   color: #54c3ff;
   font-size: 15px;
 }

 /* Tablet */
 @media (max-width: 991px) {
   .iw-growth-cta {
     min-height: 420px;
     padding: 65px 0;
     background-position: 62% center;
   }

   .iw-growth-cta-overlay {
     background: linear-gradient(90deg,
         rgba(7, 27, 67, 0.98) 0%,
         rgba(7, 27, 67, 0.9) 50%,
         rgba(7, 27, 67, 0.55) 100%);
   }

   .iw-growth-cta-content {
     max-width: 570px;
   }
 }

 /* Mobile */
 @media (max-width: 575px) {
   .iw-growth-cta {
     min-height: auto;
     padding: 60px 0;
     background-position: 68% center;
   }

   .iw-growth-cta-overlay {
     background: rgba(7, 27, 67, 0.88);
   }

   .iw-growth-cta h2 {
     font-size: 35px;
   }

   .iw-growth-cta-content>p {
     font-size: 14px;
     line-height: 1.8;
   }

   .iw-cta-actions {
     flex-direction: column;
   }

   .iw-cta-btn {
     width: 100%;
   }

   .iw-cta-note {
     align-items: flex-start;
     line-height: 1.6;
   }
 }

 
 /* Outer section */
 .iw-growth-cta-section {
   padding: 80px 24px;
   background: white;
 }

 /* 1280px CTA card */
 .iw-growth-cta-section .iw-growth-cta {
   position: relative;
   isolation: isolate;
   overflow: hidden;

   width: 100%;
   max-width: 1280px;
   min-height: 430px;
   margin: 0 auto;
   padding: 70px 75px;

   display: flex;
   align-items: center;

   border-radius: 20px;

   background-color: var(--navy);
   background-image: url("../images/cta-growth-bg.webp");
   background-repeat: no-repeat;
   background-position: center right;
   background-size: cover;

   box-shadow: 0 20px 55px rgba(7, 27, 67, 0.12);
 }

 /* Image overlay */
 .iw-growth-cta-section .iw-growth-cta-overlay {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;

 }

 /* Content */
 .iw-growth-cta-section .iw-growth-cta-content {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 610px;
 }

 /* Tablet */
 @media (max-width: 991px) {
   .iw-growth-cta-section {
     padding: 60px 24px;
   }

   .iw-growth-cta-section .iw-growth-cta {
     min-height: 420px;
     padding: 55px 40px;
     background-position: 62% center;
   }
 }

 /* Mobile */
 @media (max-width: 575px) {
   .iw-growth-cta-section {
     padding: 40px 16px;
   }

   .iw-growth-cta-section .iw-growth-cta {
     min-height: auto;
     padding: 42px 22px;
     border-radius: 14px;
     background-position: 68% center;
   }

   .iw-growth-cta-section .iw-growth-cta-overlay {
     background: rgba(7, 27, 67, 0.87);
   }

   .iw-growth-cta-section .iw-growth-cta-content {
     max-width: 100%;
   }

   .iw-growth-cta-section .iw-growth-cta h2 {
     font-size: 32px;
   }
 }


/* =========================
   INFRAWEBTECH MODERN FOOTER
========================= */

.iw-footer {
  --footer-bg: rgb(21, 43, 84);
  --footer-bg-light: #0a2855;
  --footer-blue: #0799f4;
  --footer-text: #b9c8df;
  --footer-border: rgba(255, 255, 255, 0.11);

  color: #fff;
  background: var(--footer-bg);
  font-family: 'Inter', sans-serif;
}

.iw-footer *,
.iw-footer *::before,
.iw-footer *::after {
  box-sizing: border-box;
}

.iw-footer-main {
  position: relative;
  overflow: hidden;
  padding: 75px 24px 65px;
  background:
    radial-gradient(circle at 10% 100%,
      rgba(7, 153, 244, 0.09),
      transparent 32%),
    linear-gradient(135deg,
      var(--footer-bg),
      var(--footer-bg-light));
}

.iw-footer-container {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 1.15fr 1fr;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Brand */

.iw-footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  padding: 10px;
  border-radius: 10px;
  background-color: white;
}

.iw-footer-logo img {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 60px;
  object-fit: contain;
}

.iw-footer-description {
  max-width: 310px;
  margin: 0 0 25px;
  color: var(--footer-text);
  font-size: 13px;
  line-height: 1.9;
}

/* Social icons */

.iw-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.iw-footer-socials a {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--footer-border);
  border-radius: 9px;
  color: #d7e7fa;
  background: rgba(255, 255, 255, 0.035);
  font-size: 16px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.iw-footer-socials a:hover {
  color: #fff;
  border-color: var(--footer-blue);
  background: var(--footer-blue);
  transform: translateY(-3px);
}

/* Footer columns */

.iw-footer-column h3 {
  margin: 5px 0 13px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.iw-footer-heading-line {
  display: block;
  width: 35px;
  height: 3px;
  margin-bottom: 23px;
  border-radius: 5px;
  background: var(--footer-blue);
}

.iw-footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iw-footer-column ul li {
  margin: 0;
  padding: 0;
}

.iw-footer-column ul a {
  display: inline-block;
  color: var(--footer-text);
  font-size: 12.5px;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.iw-footer-column ul a:hover {
  color: #65c5ff;
  transform: translateX(4px);
}

/* Contact */

.iw-footer-contact-intro {
  margin: 0 0 20px;
  color: var(--footer-text);
  font-size: 12.5px;
  line-height: 1.8;
}

.iw-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: #e0eafa;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.iw-footer-contact-item:hover {
  color: #65c5ff;
}

.iw-footer-contact-icon {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 153, 244, 0.25);
  border-radius: 9px;
  color: #55bdff;
  background: rgba(7, 153, 244, 0.1);
  font-size: 15px;
}

.iw-footer-contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1px solid rgba(7, 153, 244, 0.5);
  border-radius: 7px;
  color: #fff;
  background: rgba(7, 153, 244, 0.12);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: all 0.25s ease;
}

.iw-footer-contact-cta:hover {
  color: #fff;
  border-color: var(--footer-blue);
  background: var(--footer-blue);
}

/* Bottom bar */

.iw-footer-bottom {
  padding: 22px 24px;
  border-top: 1px solid var(--footer-border);
  background: rgba(0, 0, 0, 0.12);
}

.iw-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.iw-footer-bottom p {
  margin: 0;
  color: #9fb1cb;
  font-size: 11.5px;
  line-height: 1.8;
}

.iw-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.iw-footer-legal a {
  color: #aebed5;
  font-size: 11.5px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.iw-footer-legal a:hover {
  color: #65c5ff;
}

.iw-footer-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--footer-blue);
}

.iw-footer-top {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--footer-border);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: all 0.25s ease;
}

.iw-footer-top:hover {
  color: #fff;
  border-color: var(--footer-blue);
  background: var(--footer-blue);
}

/* Tablet */

@media (max-width: 1050px) {
  .iw-footer-container {
    grid-template-columns: 1.2fr 1fr;
    gap: 45px 55px;
  }

  .iw-footer-description {
    max-width: 380px;
  }
}

/* Mobile */

@media (max-width: 575px) {
  .iw-footer-main {
    padding: 55px 22px 45px;
  }

  .iw-footer-container {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .iw-footer-logo img {
    max-width: 175px;
    max-height: 55px;
  }

  .iw-footer-description {
    max-width: 100%;
  }

  .iw-footer-bottom {
    padding: 23px 20px;
  }

  .iw-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .iw-footer-legal {
    justify-content: flex-start;
    gap: 12px;
  }

  .iw-footer-top {
    position: absolute;
    right: 20px;
  }

  .iw-footer-bottom-inner {
    position: relative;
    padding-right: 45px;
  }
}