/* Software development page */
.software-development-banner {
  background-image: url('../images/nwdco/slide-4.jpg');
}

.mb-30{margin-bottom:30px;}
.mb-50{margin-bottom:50px;}

/*--APROACH SECTION - NWDCo Navy Theme--*/

:root {
  --nwdco-navy: #1e3a5f;
  --nwdco-navy-light: #2c5282;
  --nwdco-navy-medium: #234876;
  --nwdco-slate: #475569;
}

.approach-section {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(30, 58, 95, 0.05), transparent);
}

.approach-flow {
  display: flex;
  gap: 0;
  position: relative;
}

/* Connecting line - NWDCo navy gradient */
.approach-flow::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
      var(--nwdco-navy),
      var(--nwdco-navy-medium),
      var(--nwdco-navy-light),
      var(--nwdco-navy-medium),
      var(--nwdco-navy));
  opacity: 0.6;
  z-index: 0;
}

.approach-step {
  flex: 1;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

/* Step Orbs - NWDCo Navy Colors */
.step-orb {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--nwdco-navy), var(--nwdco-navy-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.step-orb::after {
  content: attr(data-step);
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

/* Subtle variation across steps using NWDCo palette */
.approach-step:nth-child(2) .step-orb {
  background: linear-gradient(135deg, var(--nwdco-navy-medium), var(--nwdco-navy-light));
  box-shadow: 0 8px 32px rgba(35, 72, 118, 0.4);
}

.approach-step:nth-child(3) .step-orb {
  background: linear-gradient(135deg, var(--nwdco-navy), var(--nwdco-navy-medium));
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.5);
}

.approach-step:nth-child(4) .step-orb {
  background: linear-gradient(135deg, var(--nwdco-navy-medium), var(--nwdco-navy));
  box-shadow: 0 8px 32px rgba(35, 72, 118, 0.4);
}

.approach-step:nth-child(5) .step-orb {
  background: linear-gradient(135deg, var(--nwdco-navy-light), var(--nwdco-navy));
  box-shadow: 0 8px 32px rgba(44, 82, 130, 0.4);
}

/* Inner ring detail */
.step-orb::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.step-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-desc {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  max-width: 220px;
  margin: 0 auto;
  text-align:left;
}


/* Subtle pulse animation */
@keyframes pulse-navy {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 32px rgba(30, 58, 95, 0.4);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 8px 40px rgba(30, 58, 95, 0.6);
  }
}

.step-orb {
  animation: pulse-navy 4s ease-in-out infinite;
}

.approach-step:nth-child(2) .step-orb {
  animation-delay: 0.6s;
}

.approach-step:nth-child(3) .step-orb {
  animation-delay: 1.2s;
}

.approach-step:nth-child(4) .step-orb {
  animation-delay: 1.8s;
}

.approach-step:nth-child(5) .step-orb {
  animation-delay: 2.4s;
}

/* ============================================
           RESPONSIVE
           ============================================ */
@media (max-width: 968px) {
  .approach-flow {
    flex-direction: column;
    gap: 40px;
  }

  .approach-flow::before {
    display: none;
  }

  .approach-step {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 24px;
    padding: 0;
  }

  .step-orb {
    margin: 0;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
  }

  .step-orb::after {
    font-size: 1.25rem;
  }

  .step-desc {
    margin: 0;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .section-header h2 {
    font-size: 2rem;
  }

  .approach-step {
    flex-direction: column;
    text-align: center;
  }

  .step-orb {
    margin: 0 auto 16px;
  }

  .step-desc {
    max-width: 300px;
  }
}

/* Hover effects for feature boxes */
.builtpartnership .feature-box:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(15, 32, 75, 0.15) !important;
    border-left-color: #2f528a !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf9 100%) !important;
}

.builtpartnership .feature-box:hover .icon-wrapper {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, #2f528a 0%, #2f528a 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 52, 255, 0.3) !important;
}

.builtpartnership .feature-box:hover .icon-wrapper i {
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.builtpartnership .feature-box:hover h4 {
    color: #0f204b !important;
}

.builtpartnership .feature-box:hover .hover-line {
    width: 100% !important;
}

.section-padding-f9.pt-0{padding-top:0px;}
.section-padding-f9.pb-0{padding-bottom:0px;}
/* Custom CSS extracted from inline styles */
.mt-30 { margin-top: 30px; }
.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }
.mt-0 { margin-top: 0px; }
.mb-20 { margin-bottom: 20px; }
.mb-15 { margin-bottom: 15px; }
.mb-0 { margin-bottom: 0; }
.section-padding-f9 { padding: 80px 0; background-color: #f9f9f9; }
.flex-row-center { display: flex; flex-wrap: wrap; justify-content: center; }

.builtpartnership .feature-box {
    background: #fff; padding: 35px 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: 100%; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer; border-left: 4px solid transparent;
}
.builtpartnership .feature-box .icon-wrapper {
    width: 70px; height: 70px; background: linear-gradient(135deg, #e0ecff 0%, #d7e1f0 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.builtpartnership .feature-box .icon-wrapper i {
    color: #2f528a; font-size: 28px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.builtpartnership .feature-box h4 {
    font-weight: 700; color: #000; margin-bottom: 15px; font-size: 18px; transition: color 0.3s ease;
}
.builtpartnership .feature-box p {
    color: #666; line-height: 1.6; font-size: 16px; margin: 0; text-align: left;
}
.builtpartnership .feature-box p.mt-10 { margin-top: 10px; }
.builtpartnership .feature-box ul {
    color: #666; line-height: 1.6; font-size: 16px; margin: 10px 0 0; padding-left: 0; list-style: none; text-align: left;
}
.builtpartnership .feature-box ul li { margin-bottom: 5px; display: flex; align-items: flex-start; }
.builtpartnership .feature-box ul li i.fa-check { color: #2f528a; margin-right: 8px; margin-top: 4px; }
.builtpartnership .feature-box .hover-line {
    position: absolute; bottom: 0; left: 0; width: 0; height: 3px;
    background: linear-gradient(90deg, #2f528a, #2f528a); transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.why-choose-box { background:#f4f6f9; padding:20px; border-radius:5px; border-left: 4px solid #2f528a; }
.why-choose-box h4 { font-weight:700; margin-top:0; color:#333; margin-bottom:15px; }
.why-choose-box ul { list-style:none; padding:0; margin:0; line-height:1.5; }
.why-choose-box li { margin-bottom:8px; display:flex; }
.why-choose-box li:last-child { margin-bottom:0; }
.why-choose-box li i.fa-check { color:#2f528a; margin-right:8px; margin-top:2px; }

.faq-panel-default { border-radius:5px; box-shadow:0 2px 10px rgba(0,0,0,0.03); margin-bottom:15px; border:1px solid #eee; overflow: hidden; }
.faq-panel-heading { background:#fff; padding:0; border-bottom:none; }
.faq-panel-title a { font-weight:600; color:#0f204b; display:block; padding:15px 25px; transition: all 0.3s ease; }
.faq-panel-title a:not(.collapsed) { background-color: #2f528a; color: #ffffff; }
.faq-accordion-arrow { color:#2f528a; font-size:20px; margin-top:2px; transition: color 0.3s ease; }
.faq-panel-title a:not(.collapsed) .faq-accordion-arrow { color: #ffffff; }
.faq-panel-body { color:#555; line-height:1.6; border-top:1px solid #f9f9f9; padding:20px 25px; background:#fafafa; }

.faq-panel-heading.active,
.panel-default>.panel-heading.active{background-color: #2f528a;color:#fff;}
.panel-title {font-size: 20px;}
.get-started-box h3 { font-weight:700; color:#fff; margin-bottom:20px; }
.get-started-box p { color:#fff; text-align:center; line-height:1.6; }



.bg-navy-padding-60 { padding: 60px 0; background-color: #0f204b; }
.btn-shutter-transparent { background:transparent; color:#fff; border-color:#fff; }
.footer-contact-info { border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; }
.footer-contact-text { color:#fff; margin:0; text-align: center; }
.footer-contact-link { color:#fff; text-decoration:none; margin:0 10px; }
.footer-contact-span { margin: 0 10px; }