/* ------------------------------
   home.css
   Home Page(Index) Styles
------------------------------ */
/* -----Home Video Style------ */
Home Video Style 

.home-hero {
  margin: 60px auto;
  max-width: 1100px;
  padding: 50px 20px;
  background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.home-hero .flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: center;
}

.home-hero .text-side {
  flex: 1;
  min-width: 300px;
}

.home-hero .video-side {
  flex: 1;
  min-width: 300px;
}

.home-hero .video-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* ------------------------------
   Donut our Value Style
------------------------------ */
.donut-section {
	  max-width: 1100px;
	  margin: 10px auto;
	  padding: 0 24px;
	}

	.donut-section h2 {
	  border-left: 10px solid var(--primary);
	  padding-left: 10px;
	  font-size: 1.5rem;
	  margin-bottom: 30px;
	}

	.donut-container {
	  display: flex;
	  gap: 30px;
	  justify-content: center;
	  flex-wrap: wrap;
	}

	.donut-wheel {
	  position: relative;
	  width: 300px;
	  height: 300px;
	}

	.donut-wheel svg {
	  width: 100%;
	  height: 100%;
	  transform: rotate(-90deg);
	}

	.donut-segment {
	  cursor: pointer;
	  transition: transform 0.3s, opacity 0.3s;
	  opacity: 0.8;
	}

	.donut-segment.active {
	  opacity: 1;
	  transform: scale(1.04);
	}

	.donut-segment textPath {
	  font-size: 10px;
	  fill: #fff;
	  text-anchor: middle;
	  pointer-events: none;
	  transition: fill 0.4s;
	}

	.donut-segment.active textPath {
	  fill: var(--dark);
	}

	.donut-center-label {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  font-weight: bold;
	  font-size: 1rem;
	  text-align: center;
	  pointer-events: none;
	}

	.donut-content-panel {
	  flex: 1;
	}

	.donut-content-panel h3 {
	  font-size: 1.2rem;
	  color: var(--primary);
	  margin-bottom: 10px;
	  font-weight: 600;
	}

	.donut-content-panel p.static-content {
	  font-size: 1rem;
	  color: var(--dark);
	  line-height: 1.5;
	  margin-bottom: 20px;
	}

	.donut-content-panel h2 {
	  font-size: 1.5rem;
	  color: var(--primary);
	  margin-top: 0;
	}

	.donut-content-panel p {
	  line-height: 1.6;
	  color: var(--dark);
	}
	

/* ------------------------------
   Product Tree Style
------------------------------ */
	.products-container {
	  max-width: 1100px;
	  margin: 0 auto;
	  text-align: center;
	  color: #0f172a;
	  position: relative;
	  padding: 0 12px;
	}

	.section-title {
	  font-size: 1.5rem;
	  margin-bottom: 30px;
	  font-weight: 700;
	  color: #0f172a;
	  text-align: left;
	  border-left: 10px solid var(--primary);
	  padding-left: 10px;
	}

	/* Main card */
	.main-card {
	  background: #f9fafb;
	  border-radius: 20px;
	  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
	  padding: 10px 20px;
	  max-width: 400px;
	  margin: 0 auto;
	  position: relative;
	  z-index: 2;
	}
	.main-card h3 {
	  font-size: 1.5rem;
	  color: #0096ff;
	  margin-bottom: 10px;

	}

	/* Connector wrapper */
	.connector-wrapper {
	  display: flex;
	  justify-content: center;
	  position: relative;
	}

	/* Vertical line from main card */
	.vertical-line {
	  width: 4px;
	  height: 40px;
	  background: #0096ff;
	  margin: 0 auto;
	  border-radius: 2px;
	}

	/* Horizontal line connecting to sub-cards (only spans under first and last card) */
	.horizontal-line-wrapper {
	  position: absolute;
	  top: 40px; /* align with bottom of vertical line */
	  left: 50%;
	  transform: translateX(-50%);
	  width: calc(100% - 80px); /* will adjust based on sub-card widths */
	  max-width: 825px; /* 4 cards * ~220px */
	  height: 4px;
	  background: #0096ff;
	  z-index: 1;
	  border-radius: 2px;
	}

	/* Sub cards container */
	.sub-cards {
	  display: flex;
	  justify-content: space-between;
	  position: relative;
	  margin-top: 0; /* arrows start from horizontal line */
	  gap: 20px;
	  z-index: 2;
	}

	/* Each sub-card wrapper (arrow + card) */
	.sub-card-wrapper {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  flex: 1;
	}

	/* Arrow connecting to horizontal line */
	.arrow-down {
	  width: 4px;
	  height: 40px;
	  background: #0096ff;
	  position: relative;
	  border-radius: 2px;
	  margin-bottom: 15px; /* smaller gap */
	  z-index: 2;
	}
	.arrow-down::after {
	  content: "";
	  position: absolute;
	  bottom: -8px;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 0;
	  height: 0;
	  border-left: 6px solid transparent;
	  border-right: 6px solid transparent;
	  border-top: 10px solid #0096ff;
	}

	/* Sub-card */
	.sub-card {
	  background: #f9fafb;
	  border-radius: 16px;
	  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	  padding: 5px 20px;
	  max-width: 220px;
	  text-align: center;
	  min-height: 200px;
	  transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.sub-card:hover {
	  transform: translateY(-6px);
	  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	}

	/* Sub-card headings */
	.sub-card h4 {
	  color: #0096ff;
	  font-size: 1.2rem;
	  margin-bottom: 10px;
	}
	.sub-card p {
	  font-size: 0.95rem;
	  color: #334155;
	}

	/* Responsive */
	@media (max-width: 900px) {
	  .sub-cards {
		flex-wrap: wrap;
	  }
	  .horizontal-line-wrapper {
		display: none;
	  }
	}
	@media (max-width: 600px) {
	  .connector-wrapper, .horizontal-line-wrapper, .vertical-line, .arrow-down {
		display: none;
	  }
	  .sub-cards {
		flex-direction: column;
		gap: 20px;
		margin-top: 20px;
	  }
	}

/* ------------------------------
   Why Choose Maseke
------------------------------ */
	.whychoose-section {
      max-width: 1100px;
      margin: 60px auto;
	  background:#f8fafc;
	  padding: 0 12px;
    }
    .whychoose-section h2 {
      border-left: 10px solid var(--primary);
      padding-left: 10px;
      font-size: 1.5rem;
    }
	.whychoose-section p {
      display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    }
	.whychoose-section .container {
	  max-width: 1100px;
	  width: 100%;
	  margin: 0 auto;
	}

	.features-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	  gap: 30px;
	  justify-content: center;
	}

	.feature-item {
	  background: white;
	  border-radius: 16px;
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	  padding: 10px 20px;
	  transition: all 0.3s ease;
	}

	.feature-item:hover {
	  transform: translateY(-6px);
	  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
	}

	.feature-item h3 {
	  color: var(--primary);
	  margin-bottom: 10px;
	  font-size: 1.2rem;
	}

	.feature-item p {
	  color: var(--gray);
	  font-size: 0.95rem;
	  line-height: 1.5;
	}

/* ======= Responsive Fix Why Choose======= */
	@media (max-width: 1024px) {
	  .slide img { max-width: 110px; }
	}

	@media (max-width: 768px) {
	  .clients-section { padding: 60px 0; }
	  .slide { min-width: 140px; }
	  .slide img { max-width: 90px; }
	}

	@media (max-width: 480px) {
	  .clients-section h2 { font-size: 1.5rem; }
	  .slide { min-width: 120px; }
	  .slide img { max-width: 70px; }
	}
	
    
	
	
/* ------------------------------
   Client logo scrool style
------------------------------ */	

	
	.clients-section {
	  background: #f9fafb;
	  padding: 30px 0;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}

	.clients-section .container {
	  max-width: 1100px;
	  width: 100%;
	  margin: 0 auto;
	  padding: 0 12px;
	}

	.clients-section h2 {
	  font-size: 1.5rem;
	  color: #0f172a;
	  margin-bottom: 30px;
	  padding-left: 10px;
	  font-weight: 700;
	  border-left: 10px solid var(--primary);
	}

	/* ======= Logo Slider (Centered + Aligned Fix) ======= */
	.logo-slider {
	  overflow: hidden;
	  position: relative;
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.logo-slide-track {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 60px; /* even spacing between logos */
	  animation: scroll 90s linear infinite;
	}

	.slide {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  min-width: 180px;
	  height: 100px;
	}

	.slide img {
	  max-width: 140px;
	  height: auto;
	  filter: none; /* ✅ ensures original color logos */
	  opacity: 1;
	  transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.slide img:hover {
	  transform: scale(1.05);
	  opacity: 0.9;
	}

	/* Smooth infinite scrolling */
	@keyframes scroll {
	  0% { transform: translateX(0); }
	  100% { transform: translateX(-50%); }
	}
	/* ======= Responsive Fix ======= */
	@media (max-width: 1024px) {
	  .slide img { max-width: 110px; }
	}

	@media (max-width: 768px) {
	  .clients-section { padding: 60px 0; }
	  .slide { min-width: 140px; }
	  .slide img { max-width: 90px; }
	}

	@media (max-width: 480px) {
	  .clients-section h2 { font-size: 1.5rem; }
	  .slide { min-width: 120px; }
	  .slide img { max-width: 70px; }
	}
	
	
	/* ------------------------------
   Achivements and Service style
------------------------------ */	

	.section {
	  max-width: 1100px;
	  margin: 60px auto;
	  padding: 0 12px;
	}
	
	.section h2 {
	  border-left: 10px solid var(--primary);
      padding-left: 10px;
      font-size: 1.5rem;
	  margin-bottom:20px;	  
	}

	.section p {
      display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    }
	.grid {
      display: grid;
      gap: 15px;
    }
    .products-grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .card { 
		background: #fff; 
		border-radius: var(--radius); 
		padding: 20px; 
		box-shadow: 0 4px 14px rgba(0,0,0,0.05); 
	}
    .card h3 {
      margin-top: 0;
      color: var(--primary);
    }
	.card h4 {
      margin-top: 0;
	  font-size: 25px;
      color: var(--primary);
	  
    }
	.card h4 {
      margin-top: 0;
	  font-size: 25px;
      color: var(--primary);
    }