/* ================= BASE ================= */
html{scroll-behavior:smooth;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:#ffffff;
  color:#1f2937;
}

/* ================= NAVBAR ================= */
.navbar{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  
}
.navbar-brand{
  font-weight:900;
  font-size: 25px;
  color:#0b2d4a!important;
}
.nav-link{
  color:#2F6FA3!important;
  font-weight:500;
}
.nav-link:hover,
.nav-link.active{
  color:#0b2d4a!important;
}
.brand-sub{
  font-size:15px;
  font-weight:600;
  letter-spacing:1px;
  color:#439121;
  line-height:1;
}
.navbar-toggler{
  border:none;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  padding:120px 0;
  background:
    url("3hero.jpg") center/cover no-repeat;
}

/* BLACK OVERLAY */
.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

/* KEEP CONTENT ABOVE OVERLAY */
.hero .container{
  position:relative;
  z-index:1;
}

/* TIMELINE COLOR FIX */
.hero .timeline::before{
  background:rgba(255,255,255,.25);
}
.hero .timeline::after{
  background:#7ED957;
}
.hero .timeline-item::before{
  background:#7ED957;
}

.hero{
  padding:110px 0;
}
.hero-title{
  font-size:3.2rem;
  font-weight:800;
  line-height:1.1;
  color:#0b2d4a;
}
.hero-sub{
  font-size:1.15rem;
  color:#4b5563;
}

/* HERO ANIMATION */
.hero-title,
.hero-sub,
.hero .btn,
.hero p.text-uppercase{
  opacity:0;
  transform:translateY(25px);
  animation:heroFadeUp .9s ease forwards;
}
.hero p.text-uppercase{animation-delay:.1s}
.hero-title{animation-delay:.25s}
.hero-sub{animation-delay:.45s}
.hero .btn{animation-delay:.65s}

@keyframes heroFadeUp{
  to{opacity:1;transform:none}
}

/* ================= TIMELINE ================= */
.timeline{
  position:relative;
  padding-left:30px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:100%;
  background:#e5e7eb;
}
.timeline::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:0;
  background:#7ED957;
  transition:height 1.5s ease;
}
.timeline.fill::after{
  height:100%;
}

.timeline-item{
  margin-bottom:35px;
  position:relative;
  opacity:0;
  transform:translateX(30px);
  transition:.7s ease;
}
.timeline-item.show{
  opacity:1;
  transform:none;
}
.timeline-item::before{
  content:'';
  position:absolute;
  left:-42px;
  top:6px;
  width:18px;
  height:18px;
  background:#7ED957;
  border-radius:50%;
  animation:pulseFloat 2.3s ease-in-out infinite;
}
@keyframes pulseFloat{
  0%{box-shadow:0 0 0 0 rgba(126,217,87,.6)}
  50%{box-shadow:0 0 0 12px rgba(126,217,87,0)}
  100%{box-shadow:0 0 0 0 rgba(126,217,87,0)}
}
.timeline-item h6{
  font-weight:700;
  color:#0b2d4a;
}

/* ================= SERVICES ================= */
.services-wrap{
  padding:90px 0;
  background:#f8f9fa;
}
.services-nav{
  position:sticky;
  top:110px;
  border-left:3px solid #e5e7eb;
}
.services-nav a{
  display:block;
  padding:14px 20px;
  color:#2F6FA3;
  font-weight:600;
  text-decoration:none;
}
.services-nav a.active{
  background:#ffffff;
  color:#0b2d4a;
  border-left:3px solid #7ED957;
}

/* ================= SERVICE PANEL ================= */
.service-panel{
  padding:30px;
  margin-bottom:40px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#ffffff;
  opacity:0;
  transform:translateY(30px);
  transition:.6s ease;
}
.service-panel.show{
  opacity:1;
  transform:none;
}
.service-panel:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 45px rgba(11,45,74,.12);
}
.service-panel h4{
  font-weight:700;
  color:#0b2d4a;
}

/* FOOTER BASE */
.footer{
  position:relative;
  background:#0b2d4a;
  color:#e5e7eb;
  margin:0;
  padding:40px 0 0;
}

/* OVERLAY */
.footer .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}

/* CONTENT LAYER */
.footer .container{
  position:relative;
  z-index:1;
}

/* ROW FIX */
.footer-row{
  margin:0;
}

/* WIDGET */
.footer-widget{
  margin-bottom:0;
}
.footer-widget h4{
  color:#ffffff;
  font-weight:700;
  margin-bottom:6px;
}

/* LINE */
.line-footer{
  width:40px;
  height:3px;
  background:#7ED957;
  margin-bottom:12px;
}

/* TEXT FIX */
.footer p{
  margin-bottom:8px;
  font-size:14px;
  line-height:1.6;
}

/* LINKS */
.footer-link{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-link li{
  margin-bottom:6px;
}
.footer-link a{
  color:#e5e7eb;
  text-decoration:none;
}
.footer-link a:hover{
  color:#7ED957;
}

/* CONTACT */
.contact-info .single-contact{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.contact-info span{
  font-size:16px;
  color:#7ED957;
}

/* MAP */
.footer iframe{
  display:block;
  margin:0 auto;
}

/* FOOTER BAR */
.footer-bar{
  background:#081f33;
  padding:12px 0;
  margin-top:20px;
}
.footer-bar p{
  margin:0;
  font-size:13px;
}

.why-us{
  background:#ffffff;
}
.why-card{
  padding:30px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  height:100%;
  transition:.4s ease;
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.why-card h5{
  font-weight:700;
  color:#0b2d4a;
}
.process-step{
  border:1px solid #e5e7eb;
  padding:25px;
  border-radius:14px;
  height:100%;
}
.process-step span{
  font-size:1.6rem;
  font-weight:800;
  color:#7ED957;
}
.process-step h6{
  font-weight:700;
  color:#0b2d4a;
  margin-top:10px;
}

/* ================= TEAM DIV ================= */
.team-profile{
  background:#ffffff;
  border:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  cursor:pointer;
}

/* IMAGE */
.team-profile img{
  width:100%;
  height:280px;
  object-fit:cover;
  display:block;
}

/* NAME SECTION */
.team-name{
  padding:12px 15px;
  text-align:center;
}

/* DETAILS */
.team-details{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-top:none;
  padding:15px;
}

/* FOOTER HIDE */
.footer.hide-footer{
  display:none;
}

/* RESPONSIVE */
@media(max-width:768px){
  .team-profile img{
    height:240px;
  }
}
.service-top {
  display: flex;
}

.align-left {
  justify-content: flex-start;
}

.align-right {
  justify-content: flex-end;
}

.service-top img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Mobile Fix */
@media (max-width: 576px) {
  .align-left,
  .align-right {
    justify-content: center;
  }

  h6 {
    text-align: center !important;
  }
}
/* Main service box */
.service-box {
  width: 100%;               /* div same as column */
  max-width: 300px;          /* optional: control box size */
  margin: auto;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  overflow: hidden;          /* 🔥 important */
}

/* Image exactly fits div */
.service-img {
  display: block;            /* remove white gap */
  width: 100%;
  height: 160px;             /* same controlled height */
  object-fit: cover;
}

/* Content stays inside div */
.service-content {
  padding: 12px;
  text-align: center;
}
.read-more {
  color: #000;              /* black text */
  font-size: 20px;          /* normal font size */
  font-weight: 500;
  text-decoration: none;    /* no underline */
  display: inline-block;
  margin-top: 8px;
}

.read-more:hover {
  text-decoration: underline;
  color: #000;              /* stay black on hover */
}
.about-section {
  background: #f8f9fa;
  overflow: hidden;
}

/* Image Animation */
.about-img {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideLeft 1s ease forwards;
}

/* Content Animation */
.about-content {
  opacity: 0;
  transform: translateX(50px);
  animation: slideRight 1s ease forwards;
  animation-delay: 0.3s;
}

@keyframes slideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.btn-more {
  background-color: #7ED957;
  color: #fff;
  padding: 10px 28px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-more:hover {
  background-color: #218838;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
}
.review-avatar {
  width: 48px;
  height: 48px;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
}
.testimonial-slider {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  width: 100%;
}

.testimonial-slide {
  flex: 0 0 33.333%;
}

@media (max-width: 767px) {
  .testimonial-slide {
    flex: 0 0 100%;
  }
}