/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.6;
  color: #1a202c;
  background-color: #ffffff;
  overflow-x: hidden;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Responsive Utilities */
.md-visible {
  display: none;
}

.lg-visible {
  display: none;
}

.lg-hidden {
  display: block;
}

@media (min-width: 768px) {
  .md-visible {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .lg-visible {
    display: flex;
  }
  .lg-hidden {
    display: none;
  }
}

/* Navigation */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  position: relative;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(255, 94, 20, 0.3);
}

.logo-icon .icon {
  width: 28px;
  height: 28px;
  color: white;
}

.logo-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: #ffdd00;
  border-radius: 50%;
  border: 2px solid white;
}

.logo-text .company-name {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #1a202c, #4a5568);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tagline {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  position: relative;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  color: #ff5e14;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff5e14, #e54a0a);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(255, 94, 20, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(255, 94, 20, 0.4);
}

.cta-btn .icon {
  width: 16px;
  height: 16px;
}

.mobile-menu-btn {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.mobile-menu-btn:hover {
  background: #f3f4f6;
}

.mobile-menu {
  margin-top: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid #f3f4f6;
  display: none;
}

.mobile-menu.active {
  display: block;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-link {
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 0;
  transition: color 0.15s;
}

.mobile-nav-link:hover {
  color: #ff5e14;
}

.mobile-cta-btn {
  width: 100%;
  margin-top: 16px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  padding-top: 80px;
}

.hero-slider {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide.active {
  opacity: 1;
}

.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(255, 94, 20, 0.1) 100%
  );
}

.slide-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
  color: white;
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 48rem;
  line-height: 1.6;
  animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeInUp 1s ease-out 0.4s both;
}

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  color: white;
  border: none;
  padding: 24px 40px;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 25px 50px rgba(255, 94, 20, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 35px 70px rgba(255, 94, 20, 0.5);
}

.btn-primary .icon {
  width: 20px;
  height: 20px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid white;
  padding: 22px 40px;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  background: white;
  color: #1a202c;
}

/* Slider Controls */
.slider-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-control:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.slider-control.prev {
  left: 32px;
}

.slider-control.next {
  right: 32px;
}

.slider-control .icon {
  width: 28px;
  height: 28px;
}

.slider-indicators {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 20%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator.active {
  width: 48px;
  background: #ff5e14;
  transform: scale(1.25);
}

.indicator:hover:not(.active) {
  background: rgba(255, 255, 255, 0.75);
}

/* Floating Stats */
.floating-stats {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0 32px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: default;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.stat-number {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: #ff5e14;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* Section Styles */
.services-section,
.testimonials-section,
.blog-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.services-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 25px 25px,
    #f3f4f6 2px,
    transparent 2px
  );
  background-size: 50px 50px;
  opacity: 0.3;
  z-index: 1;
}

.projects-section,
.about-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #1a202c 0%, #000000 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.projects-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 50px 50px,
    #ffffff 1px,
    transparent 1px
  );
  background-size: 100px 100px;
  opacity: 0.05;
}

.contact-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  color: white;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 50px 50px,
    #ffffff 1px,
    transparent 1px
  );
  background-size: 100px 100px;
  opacity: 0.2;
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  color: white;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.badge.light {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-title {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 32px;
  color: #1a202c;
}

.section-title.light {
  color: white;
}

.gradient-text {
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-light {
  background: linear-gradient(135deg, #ff5e14, #ffdd00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.highlight {
  color: #ffdd00;
}

.section-description {
  font-size: 20px;
  line-height: 1.6;
  color: #6b7280;
  max-width: 64rem;
  margin: 0 auto;
}

.section-description.light {
  color: rgba(255, 255, 255, 0.9);
}

/* Services Grid */
.services-grid {
  display: grid;
  gap: 32px;
  position: relative;
  /* Add these properties for centering its child .section-cta */
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* Example for responsive grid items */
  justify-items: center; /* Centers grid items horizontally within their cell */
  align-items: start; /* Align items to the start of their cell vertically */

  /* If .section-cta is a direct child and you want it on its own row,
     you might need to span columns or place it specifically. */
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background: white;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: default;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  opacity: 0.5;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 70px rgba(255, 94, 20, 0.15);
}

.service-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10;
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(6deg);
}

.service-icon.blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.service-icon.orange {
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
}

.service-icon.emerald {
  background: linear-gradient(135deg, #10b981, #047857);
}

.service-icon.purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.service-icon.amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.service-icon.rose {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
}

.service-icon .icon {
  width: 40px;
  height: 40px;
  color: white;
}

.service-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #1a202c;
  transition: color 0.3s;
  position: relative;
  z-index: 10;
}

.service-card:hover .service-title {
  color: #ff5e14;
}

.service-description {
  color: #6b7280;
  margin-bottom: 32px;
  line-height: 1.6;
  position: relative;
  z-index: 10;
}

.service-features {
  list-style: none;
  margin-bottom: 32px;
  position: relative;
  z-index: 10;
}

.service-features li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #374151;
  font-weight: 500;
  transition: all 0.3s;
}

.service-card:hover .service-features li {
  color: #1a202c;
}

.service-features li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #ff5e14;
  border-radius: 50%;
  margin-right: 16px;
  transition: all 0.3s;
}

.service-card:hover .service-features li::before {
  transform: scale(1.5);
}

.service-link {
  background: none;
  border: none;
  color: #ff5e14;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  position: relative;
  z-index: 10;
}

.service-link:hover {
  color: #e54a0a;
}

.service-link .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.service-link:hover .icon {
  transform: translateX(4px);
}

/* Projects Grid */
.projects-grid {
  display: grid;
  gap: 32px;
  position: relative;
}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(255, 94, 20, 0.2);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-16px);
  box-shadow: 0 35px 70px rgba(255, 94, 20, 0.3);
}

.project-image {
  position: relative;
  overflow: hidden;
  height: 288px;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-image img {
  transform: scale(1.1);
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.project-category {
  background: #ff5e14;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.project-value {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.project-stats {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(32px);
  transition: all 0.5s;
}

.project-card:hover .project-stats {
  opacity: 1;
  transform: translateY(0);
}

.stat {
  text-align: center;
  color: white;
}

.stat-value {
  font-weight: 700;
  font-size: 14px;
}

.stat-label {
  font-size: 10px;
  text-transform: capitalize;
  opacity: 0.8;
}

.project-content {
  padding: 32px;
}

.project-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a202c;
  transition: color 0.3s;
  cursor: pointer;
}

.project-card:hover .project-title {
  color: #ff5e14;
}

.project-description {
  color: #6b7280;
  margin-bottom: 24px;
  line-height: 1.6;
}

.project-link {
  background: none;
  border: none;
  color: #ff5e14;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.project-link:hover {
  color: #e54a0a;
}

.project-link .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.project-link:hover .icon {
  transform: translateX(4px);
}

/* Testimonials Slider */
.testimonials-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 20px 20px,
    #f3f4f6 1px,
    transparent 1px
  );
  background-size: 40px 40px;
  opacity: 0.3;
}

.testimonial-slider {
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.testimonial-track {
  display: flex;
  transition: transform 0.7s ease-in-out;
}

.testimonial-slide {
  width: 100%;
  flex-shrink: 0;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 32px;
  margin: 0 24px;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media (min-width: 1024px) {
  .testimonial-card {
    grid-template-columns: 1fr 3fr;
  }
}

.testimonial-client {
  text-align: center;
}

@media (min-width: 1024px) {
  .testimonial-client {
    text-align: left;
  }
}

.client-image {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.client-image img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 94, 20, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.quote-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 94, 20, 0.3);
}

.quote-icon .icon {
  width: 16px;
  height: 16px;
  color: white;
}

.client-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 4px;
}

.client-role {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.client-company {
  font-size: 12px;
  color: #ff5e14;
  font-weight: 600;
  margin-bottom: 12px;
}

.rating {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .rating {
    justify-content: flex-start;
  }
}

.star {
  width: 16px;
  height: 16px;
  color: #fbbf24;
  margin-right: 2px;
}

.project-details {
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
}

.detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.detail:last-child {
  margin-bottom: 0;
}

.detail .label {
  color: #6b7280;
}

.detail .value {
  font-weight: 700;
  color: #ff5e14;
}

.testimonial-content {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .testimonial-content {
    padding-left: 24px;
  }
}

.testimonial-text {
  font-size: 18px;
  line-height: 1.6;
  color: #374151;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 16px;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trust-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.trust-badge.green {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.trust-badge.blue {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.trust-badge.purple {
  background: #ede9fe;
  color: #6b21a8;
  border: 1px solid #ddd6fe;
}

.trust-badge.gray {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  gap: 24px;
}

.testimonial-control {
  width: 56px;
  height: 56px;
  background: white;
  border: 2px solid rgba(255, 94, 20, 0.2);
  border-radius: 50%;
  color: #ff5e14;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-control:hover {
  background: #ff5e14;
  color: white;
  border-color: #ff5e14;
  box-shadow: 0 15px 35px rgba(255, 94, 20, 0.3);
  transform: scale(1.1);
}

.testimonial-control .icon {
  width: 24px;
  height: 24px;
}

.testimonial-autoplay {
  width: 48px;
  height: 48px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-autoplay:hover {
  background: #ff5e14;
  color: white;
  box-shadow: 0 10px 25px rgba(255, 94, 20, 0.3);
}

.testimonial-autoplay .icon {
  width: 20px;
  height: 20px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  gap: 12px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot.active {
  width: 48px;
  background: #ff5e14;
}

.dot:hover:not(.active) {
  background: #9ca3af;
}

.section-cta {
  text-align: center; /* Ensures text/inline-block children are centered */
  margin-top: 64px; /* Adjust as needed */
  /* display: flex;  -- Not strictly necessary if using text-align: center on its parent */
  /* justify-content: center; -- Not strictly necessary */
  /* align-items: center; -- Not strictly necessary */
  /* margin-left: auto; margin-right: auto; -- Not strictly necessary if width is not fixed */
}

/* If the .btn-outline is itself a flex item that you want to center within .section-cta,
 and .section-cta needs to be full width, then flex properties are good: */
.section-cta {
  /* আগের ইনলাইন স্টাইল বা পূর্ববর্তী CSS স্টাইলগুলো সরিয়ে এটি যোগ করুন */
  display: flex; /* এটি একটি ফ্লেক্স কন্টেইনার হিসেবে আচরণ করবে */
  justify-content: center; /* এর ভেতরের আইটেমগুলোকে (বাটন) মাঝখানে নিয়ে আসবে */
  align-items: center; /* উল্লম্বভাবে মাঝখানে আনার জন্য, যদি উচ্চতা থাকে */
  width: 100%; /* MOST IMPORTANT: এটি নিশ্চিত করবে যে .section-cta তার প্যারেন্ট .container এর সম্পূর্ণ প্রস্থ নেবে */
  margin-top: 64px; /* বা আপনার পছন্দের কোনো মার্জিন */
  /* অন্যান্য স্টাইল, যেমন text-align: center, এখানে প্রয়োজন নাও হতে পারে যদি display: flex ব্যবহার করেন। */
}

/* Blog Grid */
.blog-grid {
  display: grid;
  gap: 32px;
  position: relative;
}

@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.15);
}

.blog-image {
  position: relative;
  overflow: hidden;
  height: 256px;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-image img {
  transform: scale(1.1);
}

.blog-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.blog-category {
  background: #ff5e14;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.trending-badge {
  background: #ef4444;
  color: white;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trending-badge .icon {
  width: 12px;
  height: 12px;
}

.blog-content {
  padding: 32px;
}

.blog-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a202c;
  line-height: 1.3;
  transition: color 0.3s;
}

.blog-card:hover .blog-title {
  color: #ff5e14;
}

.blog-excerpt {
  color: #6b7280;
  margin-bottom: 24px;
  line-height: 1.6;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 14px;
  color: #6b7280;
  flex-wrap: wrap;
  gap: 16px;
}

.author,
.date,
.read-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-meta .icon {
  width: 16px;
  height: 16px;
}

.blog-link {
  background: none;
  border: none;
  color: #ff5e14;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.blog-link:hover {
  color: #e54a0a;
}

.blog-link .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.blog-link:hover .icon {
  transform: translateX(4px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: #ff5e14;
  border: 2px solid #ff5e14;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  position: relative; /* z-index কাজ করার জন্য position সেট করতে হবে */
  z-index: 2;
}

.btn-outline:hover {
  background: #ff5e14;
  color: white;
}

.btn-outline .icon {
  width: 20px;
  height: 20px;
}

/* About Section */
.about-grid {
  display: grid;
  gap: 80px;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about-content {
  position: relative;
}

.features-list {
  margin-top: 48px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  transition: all 0.3s;
}

.feature-item:hover {
  transform: translateX(8px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 25px rgba(255, 94, 20, 0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:hover .feature-icon {
  transform: scale(1.1) rotate(6deg);
}

.feature-icon .icon {
  width: 32px;
  height: 32px;
  color: white;
}

.feature-content {
  flex: 1;
}

.feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.feature-title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  transition: color 0.3s;
}

.feature-item:hover .feature-title {
  color: #ff5e14;
}

.feature-badge {
  background: rgba(255, 94, 20, 0.2);
  color: #ff5e14;
  border: 1px solid rgba(255, 94, 20, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.feature-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.stat-overlay {
  position: absolute;
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  color: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(255, 94, 20, 0.4);
  text-align: center;
}

.stat-overlay.bottom-left {
  bottom: -32px;
  left: -32px;
}

.stat-overlay.top-right {
  top: -32px;
  right: -32px;
  background: white;
  color: #1a202c;
}

.stat-overlay .stat-number {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ff5e14;
}

.stat-overlay.bottom-left .stat-number {
  color: white;
}

.stat-overlay .stat-label {
  font-size: 14px;
  font-weight: 500;
}

/* Contact Section */
.contact-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 64px;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.contact-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.contact-icon {
  width: 64px;
  height: 64px;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: all 0.3s;
}

.contact-card:hover .contact-icon {
  transform: scale(1.1);
}

.contact-icon .icon {
  width: 32px;
  height: 32px;
  color: #ff5e14;
}

.contact-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.contact-info {
  color: #ffdd00;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}

.contact-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-bottom: 24px;
}

.contact-btn {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s;
}

.contact-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 640px) {
  .contact-actions {
    flex-direction: row;
    justify-content: center;
  }
}

.btn-primary-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: white;
  color: #ff5e14;
  border: none;
  padding: 24px 40px;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 25px 50px rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary-light:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  box-shadow: 0 35px 70px rgba(255, 255, 255, 0.3);
}

.btn-primary-light .icon {
  width: 20px;
  height: 20px;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid white;
  padding: 22px 40px;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-light:hover {
  background: white;
  color: #ff5e14;
}

.contact-footer {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.footer {
  background: linear-gradient(135deg, #1a202c, #000000);
  color: white;
  padding: 80px 0 32px;
  position: relative;
}

.footer-content {
  display: grid;
  gap: 48px;
  margin-bottom: 64px;
}

@media (min-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-brand {
  max-width: 400px;
}

.footer-description {
  color: #9ca3af;
  margin: 32px 0;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.social-link {
  width: 48px;
  height: 48px;
  background: #374151;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.social-link:hover {
  background: #ff5e14;
}

.social-icon {
  width: 20px;
  height: 20px;
  background: currentColor;
}

.footer-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ff5e14;
}

.link-list {
  list-style: none;
}

.link-list li {
  margin-bottom: 12px;
}

.link-list a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.3s;
}

.link-list a:hover {
  color: #ff5e14;
}

.footer-bottom {
  border-top: 1px solid #374151;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.copyright {
  color: #9ca3af;
  margin: 0;
}

.legal-links {
  display: flex;
  gap: 24px;
}

.legal-links a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.legal-links a:hover {
  color: #ff5e14;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseSubtle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

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

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out;
}

.animate-pulse-subtle {
  animation: pulseSubtle 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .hero-section {
    padding-top: 80px;
  }

  .floating-stats {
    bottom: 40px;
    padding: 0 16px;
  }

  .slider-control {
    width: 44px;
    height: 44px;
  }

  .slider-control.prev {
    left: 16px;
  }

  .slider-control.next {
    right: 16px;
  }

  .slider-indicators {
    bottom: 24px;
  }

  .services-section,
  .testimonials-section,
  .blog-section,
  .projects-section,
  .about-section,
  .contact-section {
    padding: 80px 0;
  }

  .section-header {
    margin-bottom: 48px;
  }

  .about-grid {
    gap: 48px;
  }

  .features-list {
    margin-top: 32px;
  }

  .feature-item {
    margin-bottom: 24px;
  }

  .testimonial-card {
    padding: 24px;
    margin: 0 16px;
  }

  .testimonial-controls {
    margin-top: 32px;
    gap: 16px;
  }

  .testimonial-control {
    width: 48px;
    height: 48px;
  }
}

/* About Page Specific Styles */

/* About Hero Section - reusing hero-section base */
.about-hero-section {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(255, 94, 20, 0.2) 100%
    ),
    url("image/jambo.png"); /* একটি নতুন ব্যাকগ্রাউন্ড ইমেজ যোগ করা হয়েছে */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 180px 0 100px; /* Adjust padding-top to ensure content is below fixed nav */
  position: relative;
  overflow: hidden;
}

.about-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(255, 94, 20, 0.1) 100%
  );
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.about-hero-section .hero-title {
  font-size: clamp(3rem, 7vw, 5rem);
  margin-bottom: 24px;
}

.about-hero-section .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 0;
  opacity: 0.9;
}

/* Mission & Vision Section (mv-grid) */
.mv-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mv-card {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); /* হালকা শ্যাডো */
}

/* Core Values Section (values-grid) */
.values-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.value-item {
  padding: 32px; /* feature-item এ অতিরিক্ত প্যাডিং যোগ করা হলো */
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05); /* হালকা কালো ব্যাকগ্রাউন্ড */
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column; /* আইটেমগুলিকে উল্লম্বভাবে সাজানোর জন্য */
  align-items: center; /* কেন্দ্রে সারিবদ্ধ করার জন্য */
  text-align: center; /* টেক্সট কেন্দ্রে সারিবদ্ধ করার জন্য */
}

.value-item .feature-icon {
  margin-bottom: 16px; /* আইকন এবং শিরোনামের মধ্যে গ্যাপ */
}

.value-item .feature-header {
  flex-direction: column; /* শিরোনাম এবং ব্যাজ উল্লম্বভাবে সাজানোর জন্য */
  gap: 8px; /* শিরোনাম এবং ব্যাজের মধ্যে গ্যাপ */
  margin-bottom: 12px;
}

.value-item .feature-title {
  font-size: 20px;
  margin-bottom: 0; /* অতিরিক্ত মার্জিন সরান */
}

.value-item .feature-badge {
  background: rgba(255, 221, 0, 0.2); /* হলুদ শেডের ব্যাজ */
  color: #ffdd00;
  border: 1px solid rgba(255, 221, 0, 0.3);
}

/* Leadership Team Section */
.leadership-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.team-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-member {
  background: white;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(255, 94, 20, 0.1);
}

.member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 24px;
  border: 4px solid #ff5e14;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.member-name {
  font-size: 22px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
}

.member-title {
  font-size: 16px;
  color: #ff5e14;
  font-weight: 600;
  margin-bottom: 16px;
}

.member-description {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 24px;
}

.social-links-member {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.social-links-member .social-btn {
  background: #e5e7eb; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
  color: #6b7280;
  width: 36px;
  height: 36px;
  font-size: 14px;
  border-radius: 50%;
}

.social-links-member .social-btn:hover {
  background: #ff5e14;
  color: white;
}

/* Responsive adjustments for about page */
@media (max-width: 767px) {
  .about-hero-section {
    padding: 120px 0 60px; /* Mobile adjust padding */
  }

  .about-hero-section .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  .about-hero-section .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* About Section (Light Theme) */
.about-section.light-about-section {
  /* নতুন ক্লাস .light-about-section যোগ করা হয়েছে */
  background: linear-gradient(
    135deg,
    #f9fafb 0%,
    #ffffff 100%
  ); /* হালকা ব্যাকগ্রাউন্ড */
  color: #1a202c; /* ডিফল্ট টেক্সট কালার কালো */
}

.about-section.light-about-section .section-header .badge {
  background: linear-gradient(
    135deg,
    #ff5e14,
    #e54a0a
  ); /* ব্যাজের ব্যাকগ্রাউন্ড কমলা থাকবে */
  color: white;
}

.about-section.light-about-section .section-title {
  color: #1a202c; /* শিরোনামের টেক্সট কালার কালো */
}

.about-section.light-about-section .section-description {
  color: #6b7280; /* বর্ণনার টেক্সট কালার ধূসর */
}

/* Feature Item Colors for Light Theme */
.about-section.light-about-section .feature-item .feature-icon {
  /* ডিফল্ট কমলা গ্রেডিয়েন্ট, বা নতুন কালার থিম অনুযায়ী */
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  box-shadow: 0 10px 25px rgba(255, 94, 20, 0.3);
}

.about-section.light-about-section .feature-item:hover .feature-icon {
  transform: scale(1.1) rotate(6deg); /* অ্যানিমেশন ঠিক থাকবে */
}

.about-section.light-about-section .feature-item .feature-icon .icon {
  color: white; /* আইকনের কালার সাদা থাকবে */
}

.about-section.light-about-section
  .feature-item
  .feature-content
  .feature-title {
  color: #1a202c; /* ফিচার শিরোনামের কালার কালো */
}

.about-section.light-about-section
  .feature-item:hover
  .feature-content
  .feature-title {
  color: #ff5e14; /* হোভারে কমলা */
}

.about-section.light-about-section
  .feature-item
  .feature-content
  .feature-badge {
  background: rgba(255, 94, 20, 0.1); /* হালকা কমলা ব্যাকগ্রাউন্ড */
  color: #ff5e14; /* কমলাই টেক্সট */
  border: 1px solid rgba(255, 94, 20, 0.2);
}

.about-section.light-about-section
  .feature-item
  .feature-content
  .feature-description {
  color: #6b7280; /* বর্ণনা টেক্সট ধূসর */
}

/* Specific Feature Icon Backgrounds (যদি আপনি বিভিন্ন আইকনের জন্য বিভিন্ন কালার চান) */
/* আপনি যদি icon color theme হিসেবে blue, success, warning, info ব্যবহার করে থাকেন,
 তাহলে তাদের ব্যাকগ্রাউন্ড এবং টেক্সট কালার নিচের মত করে সেট করতে পারেন: */

.about-section.light-about-section .feature-icon.primary {
  /* কমলা কালার থিম */
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
}
.about-section.light-about-section .feature-badge.light-primary {
  background: rgba(255, 94, 20, 0.1);
  color: #ff5e14;
  border: 1px solid rgba(255, 94, 20, 0.2);
}

.about-section.light-about-section .feature-icon.success {
  /* সবুজ কালার থিম */
  background: linear-gradient(135deg, #10b981, #047857);
}
.about-section.light-about-section .feature-badge.light-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.about-section.light-about-section .feature-icon.warning {
  /* হলুদ/কমলা কালার থিম */
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.about-section.light-about-section .feature-badge.light-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.about-section.light-about-section .feature-icon.info {
  /* নীল কালার থিম */
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.about-section.light-about-section .feature-badge.light-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Stat Overlay Colors for Light Theme */
.about-section.light-about-section .stat-overlay {
  background: rgba(255, 255, 255, 0.8); /* হালকা সাদা ব্যাকগ্রাউন্ড */
  backdrop-filter: blur(8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05); /* হালকা বর্ডার */
}

.about-section.light-about-section .stat-overlay .stat-number {
  color: #1a202c; /* স্ট্যাট নাম্বার কালো */
}
.about-section.light-about-section .stat-overlay .stat-label {
  color: #4a5568; /* স্ট্যাট লেবেল ধূসর */
}

/* Specific Stat Overlay for Light Theme */
.about-section.light-about-section .stat-overlay.light-stat-overlay {
  /* এখানে নতুন ক্লাস নাম ব্যবহার করা হচ্ছে */
  background: rgba(255, 255, 255, 0.9);
  color: #1a202c; /* টেক্সট কালো */
}

.about-section.light-about-section .stat-overlay.primary-stat-overlay {
  /* এখানে নতুন ক্লাস নাম ব্যবহার করা হচ্ছে */
  background: linear-gradient(
    135deg,
    #ff5e14,
    #e54a0a
  ); /* কমলা ব্যাকগ্রাউন্ড */
  color: white; /* টেক্সট সাদা */
}

.about-section.light-about-section
  .stat-overlay.light-stat-overlay
  .stat-number {
  color: #ff5e14; /* স্ট্যাট নাম্বার কমলা */
}
.about-section.light-about-section
  .stat-overlay.primary-stat-overlay
  .stat-number {
  color: white; /* স্ট্যাট নাম্বার সাদা */
}

/* Service Detail Page Specific Styles */

/* Service Detail Hero Section */
.service-detail-hero-section {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(255, 94, 20, 0.2) 100%
    ),
    url("https://images.pexels.com/photos/1105766/pexels-photo-1105766.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"); /* একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করা হয়েছে */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 180px 0 100px; /* ফিক্সড নেভিগেশন বারের নিচে কন্টেন্ট শুরু হওয়ার জন্য প্যাডিং */
  position: relative;
  overflow: hidden;
}

.service-detail-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(255, 94, 20, 0.1) 100%
  );
  z-index: 1;
}

.service-detail-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.service-detail-hero-content .breadcrumbs {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.service-detail-hero-section .hero-title {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  animation: fadeInUp 1s ease-out; /* Reusing existing animation */
}

.service-detail-hero-section .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 32px;
  opacity: 0.9;
  animation: fadeInUp 1s ease-out 0.2s both; /* Reusing existing animation */
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  animation: fadeInUp 1s ease-out 0.4s both; /* Reusing existing animation */
}

@media (min-width: 640px) {
  .hero-cta-group {
    flex-direction: row;
  }
}

/* Service Overview Section */
.service-overview-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.service-overview-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 25px 25px,
    #f3f4f6 2px,
    transparent 2px
  );
  background-size: 50px 50px;
  opacity: 0.3;
}

.service-overview-grid {
  display: grid;
  gap: 64px;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .service-overview-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.overview-text .section-title {
  text-align: left; /* শিরোনাম বামে সারিবদ্ধ */
  margin-bottom: 32px;
}

.overview-text .section-description {
  text-align: left; /* বর্ণনা বামে সারিবদ্ধ */
  margin: 0 auto 24px 0; /* বামে মার্জিন 0 */
}

.overview-text .features-list {
  margin-top: 32px;
}

.overview-text .feature-item {
  margin-bottom: 24px;
}

.overview-text .feature-item .feature-icon {
  /* Reuse existing feature-icon styles */
  width: 60px;
  height: 60px;
  border-radius: 12px;
}
.overview-text .feature-item .feature-icon .icon {
  width: 28px;
  height: 28px;
}
.overview-text .feature-item .feature-title {
  color: #1a202c; /* Text black */
  font-size: 20px;
}
.overview-text .feature-item .feature-description {
  color: #6b7280; /* Text gray */
  font-size: 16px;
  margin-bottom: 0;
}

.overview-image {
  position: sticky; /* স্ক্রল করার সাথে ইমেজ স্টিকি থাকবে */
  top: 100px; /* আপনার ফিক্সড হেডার উচ্চতা অনুযায়ী অ্যাডজাস্ট করুন */
  padding: 20px; /* চারপাশে হালকা প্যাডিং */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.overview-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.image-caption {
  font-style: italic;
  color: #6b7280;
  font-size: 14px;
}

/* Key Benefits Section (Reusing projects-section styles) */
.key-benefits-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #1a202c 0%, #000000 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.key-benefits-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 50px 50px,
    #ffffff 1px,
    transparent 1px
  );
  background-size: 100px 100px;
  opacity: 0.05;
}

.benefits-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit-card {
  background: rgba(255, 255, 255, 0.05); /* হালকা কালো ব্যাকগ্রাউন্ড */
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(255, 94, 20, 0.2);
}

.benefit-card .feature-icon {
  /* Reusing feature-icon styling */
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #ff5e14, #e54a0a); /* কমলা আইকন */
  color: white;
  margin-bottom: 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 5px 15px rgba(255, 94, 20, 0.3);
}
.benefit-card .feature-icon .icon {
  width: 32px;
  height: 32px;
}

.benefit-card .feature-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
}

.benefit-card .feature-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 15px;
}

/* Responsive adjustments for service detail page */
@media (max-width: 767px) {
  .service-detail-hero-section {
    padding: 120px 0 60px; /* Mobile adjust padding */
  }

  .service-detail-hero-section .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  .service-detail-hero-section .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }

  .service-overview-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .overview-text .section-title {
    text-align: center;
  }
  .overview-text .section-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .overview-text .features-list {
    margin-top: 24px;
  }
  .overview-image {
    position: relative;
    top: 0;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* Project Detail Page Specific Styles */

/* Project Detail Hero Section */
.project-detail-hero-section {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(255, 94, 20, 0.2) 100%
    ),
    url("https://images.pexels.com/photos/14484386/pexels-photo-14484386.jpeg"); /* প্রজেক্টের সাথে সামঞ্জস্যপূর্ণ ইমেজ */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 180px 0 100px; /* ফিক্সড নেভিগেশন বারের নিচে কন্টেন্ট শুরু হওয়ার জন্য প্যাডিং */
  position: relative;
  overflow: hidden;
}

.project-detail-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(255, 94, 20, 0.1) 100%
  );
  z-index: 1;
}

.project-detail-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.project-detail-hero-content .breadcrumbs {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.project-detail-hero-section .hero-title {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  animation: fadeInUp 1s ease-out; /* Reusing existing animation */
}

.project-detail-hero-section .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 32px;
  opacity: 0.9;
  animation: fadeInUp 1s ease-out 0.2s both; /* Reusing existing animation */
}

.project-meta-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 1s ease-out 0.6s both;
}

.project-meta-details .detail-item {
  text-align: center;
}

.project-meta-details .label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 4px;
}

.project-meta-details .value {
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.project-meta-details .project-category {
  background: #ff5e14;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.project-meta-details .project-value.light {
  color: #ffdd00; /* হালকা হলুদ কালার, যেমনটি আপনার থিমে আছে */
}

/* Project Overview & Challenges Section */
.project-overview-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.project-overview-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 25px 25px,
    #f3f4f6 2px,
    transparent 2px
  );
  background-size: 50px 50px;
  opacity: 0.3;
}

.overview-grid {
  display: grid;
  gap: 64px;
  align-items: flex-start; /* image stickiness এর জন্য */
}

@media (min-width: 1024px) {
  .overview-grid {
    grid-template-columns: 2fr 1fr; /* বামে বর্ণনা, ডানে ইমেজ/ফ্যাক্টস */
  }
}

.overview-content .section-title {
  text-align: left;
  margin-bottom: 32px;
}

.overview-content .section-description {
  text-align: left;
  margin: 0 auto 24px 0;
}

.subsection-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  margin-top: 48px;
  margin-bottom: 24px;
}

.challenges-list {
  list-style: none;
  padding-left: 0;
}

.challenges-list li {
  font-size: 16px;
  color: #374151;
  margin-bottom: 16px;
  line-height: 1.6;
  position: relative;
  padding-left: 28px;
}

.challenges-list li::before {
  content: "✓"; /* Checkmark icon */
  color: #ff5e14; /* Orange color */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.challenges-list li strong {
  color: #1a202c; /* Strong text black */
}

.overview-image-sticky {
  position: sticky; /* স্ক্রল করার সাথে ইমেজ স্টিকি থাকবে */
  top: 100px; /* আপনার ফিক্সড হেডার উচ্চতা অনুযায়ী অ্যাডজাস্ট করুন (nav + top bar) */
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.overview-image-sticky .main-project-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.overview-image-sticky .image-caption {
  font-style: italic;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 24px;
}

.project-facts-card {
  width: 100%;
  padding: 24px;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.project-facts-card .facts-title {
  font-size: 20px;
  font-weight: 700;
  color: #ff5e14;
  margin-bottom: 20px;
  text-align: center;
}

.project-facts-card .fact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e5e7eb;
}
.project-facts-card .fact-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.project-facts-card .fact-label {
  font-size: 15px;
  color: #6b7280;
  font-weight: 500;
}

.project-facts-card .fact-value {
  font-size: 16px;
  color: #1a202c;
  font-weight: 600;
}

/* Project Gallery Section */
.project-gallery-section {
  padding: 128px 0;
  background: linear-gradient(135deg, #1a202c 0%, #000000 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.project-gallery-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 50px 50px,
    #ffffff 1px,
    transparent 1px
  );
  background-size: 100px 100px;
  opacity: 0.05;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-item {
  width: 100%;
  height: 280px; /* Consistent height for gallery images */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.gallery-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(255, 94, 20, 0.3);
}

/* Responsive adjustments for project detail page */
@media (max-width: 767px) {
  .project-detail-hero-section {
    padding: 120px 0 60px; /* Mobile adjust padding */
  }

  .project-detail-hero-section .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  .project-detail-hero-section .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }
  .project-meta-details {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  .project-meta-details .detail-item {
    width: 100%; /* Take full width on small screens */
  }
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .overview-content .section-title {
    text-align: center;
  }
  .overview-content .section-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .overview-image-sticky {
    position: relative; /* Remove sticky on mobile */
    top: 0;
  }
  .subsection-title {
    font-size: 24px;
  }
  .challenges-list li {
    font-size: 15px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item {
    height: 200px;
  }
}

/* Blog Detail Page Specific Styles */

/* Blog Detail Hero Section */
.blog-detail-hero-section {
  background: #ffffff; /* হালকা সাদা ব্যাকগ্রাউন্ড */
  padding: 100px 0 60px; /* ফিক্সড নেভিগেশন বারের নিচে কন্টেন্ট শুরু হওয়ার জন্য প্যাডিং */
  text-align: center;
  color: #1a202c; /* টেক্সট কালার কালো */
  position: relative;
  overflow: hidden;
}

.blog-detail-hero-section .breadcrumbs {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 16px;
}

.blog-post-title {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 32px;
  color: #1a202c;
}

.blog-meta-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  font-size: 15px;
  color: #6b7280;
  margin-top: 24px;
}

.blog-meta-header .author,
.blog-meta-header .date,
.blog-meta-header .read-time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-meta-header .icon {
  width: 20px;
  height: 20px;
  color: #ff5e14; /* কমলা কালার */
}

/* Blog Content Section */
.blog-content-section {
  padding: 80px 0; /* কম প্যাডিং */
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.blog-content-section .container {
  max-width: 900px; /* ব্লগের কন্টেন্ট সংকীর্ণ করে পড়া সহজ করার জন্য */
}

.featured-image {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 48px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.blog-article h2,
.blog-article h3,
.blog-article h4 {
  font-weight: 700;
  color: #1a202c;
  margin-top: 48px;
  margin-bottom: 24px;
  line-height: 1.3;
}
.blog-article h2 {
  font-size: 32px;
}
.blog-article h3 {
  font-size: 28px;
}

.blog-article p {
  font-size: 17px;
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 24px;
}

.blog-article blockquote {
  font-size: 20px;
  font-style: italic;
  color: #ff5e14; /* কমলা কালার */
  border-left: 5px solid #ff5e14;
  padding-left: 20px;
  margin: 40px 0;
  line-height: 1.6;
}
.blog-article blockquote footer {
  font-size: 14px;
  font-style: normal;
  color: #6b7280;
  margin-top: 10px;
}

.blog-article figure {
  margin: 40px 0;
  text-align: center;
}
.blog-article figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.blog-article figure figcaption {
  font-size: 14px;
  color: #6b7280;
  margin-top: 12px;
  font-style: italic;
}

/* Author Box */
.author-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f3f4f6;
  border-radius: 16px;
  padding: 32px;
  margin-top: 60px;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .author-box {
    flex-direction: row;
    text-align: left;
  }
  .author-box .author-photo {
    margin-right: 24px;
    margin-bottom: 0;
  }
}

.author-box .author-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ff5e14;
  margin-bottom: 24px;
}

.author-box .author-name {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
}

.author-box .author-bio {
  font-size: 15px;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 24px;
}

.author-box .social-links-member {
  display: flex;
  gap: 12px;
  justify-content: center; /* মোবাইল ভিউতে সেন্টারে */
}
@media (min-width: 768px) {
  .author-box .social-links-member {
    justify-content: flex-start; /* ডেস্কটপে বামে */
  }
}
.author-box .social-btn {
  background: #d1d5db; /* হালকা ধূসর */
  color: #4a5568;
  width: 36px;
  height: 36px;
  font-size: 14px;
  border-radius: 50%;
}
.author-box .social-btn:hover {
  background: #ff5e14;
  color: white;
}

/* Social Share Buttons */
.social-share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px dashed #e5e7eb;
}

.social-share-buttons h4 {
  font-size: 16px;
  color: #4a5568;
  margin-right: 16px;
}

.social-share-buttons .social-link {
  width: 48px;
  height: 48px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  font-weight: 600; /* For F, T, L, P text */
  color: #6b7280;
}

.social-share-buttons .social-link:hover {
  background: #ff5e14;
  color: white;
}

/* Related Posts Section (Reusing existing blog-grid and blog-card styles) */
.related-posts {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px dashed #e5e7eb;
}

.related-posts .section-title {
  text-align: center;
  margin-bottom: 40px;
}

.related-posts .blog-grid.related-grid {
  grid-template-columns: repeat(1, 1fr);
  gap: 32px;
}

@media (min-width: 768px) {
  .related-posts .blog-grid.related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive adjustments for blog detail page */
@media (max-width: 767px) {
  .blog-detail-hero-section {
    padding: 90px 0 40px;
  }
  .blog-post-title {
    font-size: clamp(2rem, 7vw, 3rem);
    margin-bottom: 24px;
  }
  .blog-meta-header {
    flex-direction: column;
    gap: 12px;
  }
  .featured-image {
    margin-bottom: 32px;
  }
  .blog-article h2,
  .blog-article h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: clamp(24px, 5vw, 28px);
  }
  .blog-article p {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .blog-article blockquote {
    font-size: 18px;
    margin: 30px 0;
  }
  .author-box {
    padding: 24px;
    margin-top: 40px;
  }
  .author-box .author-photo {
    width: 80px;
    height: 80px;
  }
  .author-box .author-name {
    font-size: 20px;
  }
  .author-box .author-bio {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .social-share-buttons {
    margin-top: 40px;
    padding-top: 20px;
    flex-direction: column;
    gap: 12px;
  }
  .social-share-buttons h4 {
    margin-right: 0;
    margin-bottom: 8px;
  }
  .related-posts {
    margin-top: 60px;
    padding-top: 40px;
  }
}

/* Contact Page Specific Styles */

/* Contact Page Hero Section */
.contact-page-hero-section {
  background: linear-gradient(
      135deg,
      rgba(255, 94, 20, 0.8) 0%,
      rgba(229, 74, 10, 0.6) 100%
    ),
    url("https://images.pexels.com/photos/17260596/pexels-photo-17260596/free-photo-of-concrete-building.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"); /* কমলা ওভারলে সহ একটি ব্যাকগ্রাউন্ড ইমেজ */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 180px 0 100px; /* ফিক্সড নেভিগেশন বারের নিচে কন্টেন্ট শুরু হওয়ার জন্য প্যাডিং */
  position: relative;
  overflow: hidden;
}

.contact-page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.contact-page-hero-section .hero-title {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
}

.contact-page-hero-section .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 0;
  opacity: 0.9;
}

/* Light Contact Info Section - for the contact cards */
.contact-section.light-contact-info {
  background: linear-gradient(
    135deg,
    #f9fafb 0%,
    #ffffff 100%
  ); /* হালকা সাদা ব্যাকগ্রাউন্ড */
  padding: 100px 0; /* প্যাডিং অ্যাডজাস্ট করা হলো */
}

.contact-section.light-contact-info .contact-card {
  background: rgba(255, 255, 255, 0.9); /* হালকা সাদা ব্যাকগ্রাউন্ড */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); /* হালকা শ্যাডো */
  border: 1px solid #e5e7eb; /* হালকা বর্ডার */
}
.contact-section.light-contact-info .contact-card:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(255, 94, 20, 0.1);
}

.contact-section.light-contact-info .contact-icon {
  background: #ff5e14; /* আইকনের ব্যাকগ্রাউন্ড কমলা */
  color: white; /* আইকনের কালার সাদা */
  box-shadow: 0 5px 15px rgba(255, 94, 20, 0.3);
}
.contact-section.light-contact-info .contact-icon .icon {
  color: white; /* আইকনের কালার সাদা */
}

.contact-section.light-contact-info .contact-title.light-text-primary {
  color: #1a202c; /* শিরোনামের কালার কালো */
}

.contact-section.light-contact-info .contact-info.dark-text-info {
  color: #ff5e14; /* ইনফো টেক্সট কমলা */
}

.contact-section.light-contact-info .contact-subtitle.light-text-secondary {
  color: #6b7280; /* সাবটাইটেল ধূসর */
}

.contact-section.light-contact-info .contact-btn.light-btn-outline {
  background: transparent;
  color: #ff5e14; /* বাটন টেক্সট কমলা */
  border: 2px solid #ff5e14; /* বাটন বর্ডার কমলা */
}
.contact-section.light-contact-info .contact-btn.light-btn-outline:hover {
  background: #ff5e14;
  color: white;
}

/* Google Map Section */
.google-map-section {
  padding: 80px 0;
  background-color: #f0f2f5; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
  text-align: center;
}

.google-map-section .map-title {
  margin-bottom: 40px;
  color: #1a202c; /* শিরোনাম কালো */
}

.map-embed {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}
.map-embed iframe {
  border-radius: 16px; /* iframe এর ভেতরের বর্ডার-রেডিয়াস নিশ্চিত করতে */
}

/* Responsive adjustments for contact page */
@media (max-width: 767px) {
  .contact-page-hero-section {
    padding: 120px 0 60px;
  }
  .contact-page-hero-section .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }
  .contact-page-hero-section .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }
  .google-map-section {
    padding: 60px 0;
  }
  .google-map-section .map-title {
    margin-bottom: 30px;
  }
}

/* Projects Section (Light Theme) */
.projects-section.light-projects-section {
  /* নতুন ক্লাস .light-projects-section যোগ করা হয়েছে */
  background: linear-gradient(
    135deg,
    #f9fafb 0%,
    #ffffff 100%
  ); /* হালকা ব্যাকগ্রাউন্ড */
  color: #1a202c; /* ডিফল্ট টেক্সট কালার কালো */
}

.projects-section.light-projects-section::before {
  /* ব্যাকগ্রাউন্ড প্যাটার্ন লাইট থিমের জন্য অ্যাডজাস্ট করা */
  background-image: radial-gradient(
    circle at 25px 25px,
    #f3f4f6 2px,
    transparent 2px
  );
  background-size: 50px 50px;
  opacity: 0.3;
}

.projects-section.light-projects-section .section-header .badge {
  background: linear-gradient(
    135deg,
    #ff5e14,
    #e54a0a
  ); /* ব্যাজের ব্যাকগ্রাউন্ড কমলা থাকবে */
  color: white;
}

.projects-section.light-projects-section .section-title {
  color: #1a202c; /* শিরোনামের টেক্সট কালার কালো */
}

.projects-section.light-projects-section .gradient-text-light {
  /* gradient-text-light পরিবর্তন করা হচ্ছে */
  background: linear-gradient(135deg, #ff5e14, #e54a0a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.projects-section.light-projects-section .section-description {
  color: #6b7280; /* বর্ণনার টেক্সট কালার ধূসর */
}

.projects-section.light-projects-section .project-card {
  background: white; /* প্রজেক্ট কার্ডের ব্যাকগ্রাউন্ড সাদা */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); /* হালকা শ্যাডো */
}

.projects-section.light-projects-section .project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 94, 20, 0.15); /* হোভার শ্যাডো */
}

.projects-section.light-projects-section .project-title {
  color: #1a202c; /* প্রজেক্ট টাইটেল কালো */
}

.projects-section.light-projects-section .project-card:hover .project-title {
  color: #ff5e14; /* হোভারে কমলা */
}

.projects-section.light-projects-section .project-description {
  color: #6b7280; /* প্রজেক্ট বর্ণনা ধূসর */
}

.projects-section.light-projects-section .project-link {
  color: #ff5e14; /* লিংক টেক্সট কমলা */
}

.projects-section.light-projects-section .project-link:hover {
  color: #e54a0a; /* হোভারে গাঢ় কমলা */
}

/* Project Badge Colors (যদি project-category এবং project-value জন্য নির্দিষ্ট রং চান) */
.projects-section.light-projects-section .project-category {
  background: #ff5e14; /* কমলা ব্যাকগ্রাউন্ড */
  color: white;
}

.projects-section.light-projects-section .project-value {
  background: rgba(255, 94, 20, 0.1); /* হালকা কমলা ব্যাকগ্রাউন্ড */
  color: #ff5e14;
  border: 1px solid rgba(255, 94, 20, 0.2);
}

.projects-section.light-projects-section .project-stats .stat-value {
  color: #ff5e14; /* স্ট্যাট ভ্যালু কমলা */
}

.projects-section.light-projects-section .project-stats .stat-label {
  color: #6b7280; /* স্ট্যাট লেবেল ধূসর */
}

/* --- New Compact Testimonials Section Styles --- */
.compact-testimonials-section {
  padding: 100px 0;
  background: linear-gradient(
    135deg,
    #f0f2f5 0%,
    #e0e2e5 100%
  ); /* Lighter, subtle background */
  position: relative;
  overflow: hidden;
}

.compact-testimonials-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 15px 15px,
    #d1d5db 1px,
    transparent 1px
  );
  background-size: 30px 30px;
  opacity: 0.2;
}

.compact-testimonial-carousel {
  max-width: 1000px; /* Wider carousel */
  margin: 0 auto;
  position: relative;
  /* overflow: hidden; */
}

.compact-testimonial-track {
  display: flex;
  transition: transform 0.6s ease-in-out;

  box-sizing: border-box; /* Include padding in width calculations */
  width: 100%;
}

.compact-testimonial-track.dragging {
  cursor: grabbing;
}

.compact-testimonial-slide {
  /* flex: 0 0 100%;  Default to full width on small screens */
  /* Remove the fixed flex-basis values. Let JS handle the width calculation for proper translation */
  /* width: 100%;  -- This specific value will be overridden by JS */

  flex-shrink: 0; /* Prevents individual slides from shrinking */
  box-sizing: border-box;
  padding: 0 10px; /* This is now the gap between cards */

  /* The actual width of each slide needs to be set by JS
     based on compactSlidesInView to make dragging precise.
     However, for CSS layout, we can still define the base.
  */
  /* For JS-based dragging, we set width on the track, and individual slide widths */
}

@media (min-width: 768px) {
  /* .compact-testimonial-slide { flex: 0 0 50%; } */
}

@media (min-width: 1024px) {
  /* .compact-testimonial-slide { flex: 0 0 33.33%; } */
}
.compact-testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 25px; /* Smaller padding */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Lighter shadow */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%; /* Ensure cards are same height */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Push quote down, header up */
}

.compact-testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(255, 94, 20, 0.15); /* Orange tint on hover */
}

.compact-client-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.compact-client-image {
  width: 60px; /* Smaller image */
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff5e14; /* Orange border */
  flex-shrink: 0; /* Prevent shrinking */
}

.compact-client-info {
  text-align: left;
}

.compact-client-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 4px;
}

.compact-client-designation {
  font-size: 14px;
  color: #6b7280;
}

.compact-testimonial-quote {
  font-size: 16px;
  line-height: 1.7;
  color: #4a5568;
  font-style: italic;
  margin-top: auto; /* Push quote to bottom if card height varies */
}

/* Carousel Controls */
.compact-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  gap: 20px;
}

.compact-nav-btn {
  width: 45px;
  height: 45px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  color: #ff5e14; /* Orange icon */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.compact-nav-btn:hover {
  background: #ff5e14;
  color: white;
  border-color: #ff5e14;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 94, 20, 0.2);
}

.compact-nav-btn .icon {
  width: 20px;
  height: 20px;
}

.compact-nav-dots {
  display: flex;
  gap: 10px;
}

.compact-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a0aec0; /* Gray dot */
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-dot.active {
  width: 30px; /* Wider active dot */
  border-radius: 5px;
  background: #ff5e14; /* Orange active dot */
}

.compact-dot:hover:not(.active) {
  background: #ff8c4a; /* Lighter orange on hover */
}