.about-hero   {
   padding: 120px 2rem 60px;
  background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
  color: white;
    text-align: center;

}

.about-hero-content h1 
 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.about-hero-content p {
    max-width: 800px;
  line-height: 1.7;
  opacity: 0.9;
   font-size: 1.3rem;
   margin: 0 auto;
}

.mission-section {
   padding: 80px 2rem;
    background:   white;
}

.mission-content {
   display: grid;
   grid-template-columns     :  1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mission-text h2 {
    font-size: 2.5rem;
    margin-bottom :2rem;
   color: #2c3e50;

}

.mission-text p {
    margin-bottom: 1.5rem;
  color  : #7f8c8d;
  line-height: 1.7;
	 font-size: 1.1rem;
}

.mission-image img {
    width: 100%;
    border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
     }

.approach-section {
    padding: 80px 2rem; 
		background   :        #f8f9fa;
}

.approach-section h2


{
   text-align: center;
   font-size: 2.8rem;
	 margin-bottom: 3rem;
		 color: #2c3e50;
}  

.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2.5rem;
}

.approach-item   {
  text-align: center;
    padding :      2.5rem 1.5rem;
    background: white;
   border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.approach-icon {
    width: 80px;
          height    :       80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color    :white;
    border-radius: 50%;
   display: flex;
 align-items: center;
  justify-content: center;
    font-size: 1.5rem;
  font-weight     :   bold;
    margin: 0 auto 1.5rem;
}

.approach-item h3 {
  margin-bottom     : 1rem;
  font-size: 1.4rem;
  color     :#2c3e50;
}

.approach-item p {
    color: #7f8c8d;
   line-height: 1.6;
}

.expertise-section {
  padding: 80px 2rem;
  background: white;
}

.expertise-content    {
       display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
 align-items: start;
}

.expertise-image img {
  width :        100%;
    border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.expertise-text h2 {
  color: #2c3e50;
  font-size: 2.5rem;
   margin-bottom: 2rem; 
	
}

.expertise-item {
   margin-bottom: 2rem;
  padding: 1.5rem;
  border-left    :  4px solid #667eea;
         background: #f8f9fa;
   border-radius: 0 8px 8px 0;
}

.expertise-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  color: #667eea;
}

.expertise-item p {
  color     :        #7f8c8d;
  line-height: 1.6;
}

.results-section {
  padding: 80px 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
   text-align: center;}

.results-section h2 {
    font-size  :   2.8rem;
          margin-bottom: 3rem;
}

.results-stats {

    display  :   grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem;
  max-width: 800px;
   margin: 0 auto;
	}

.stat-item {
    padding: 1.5rem;
}

.stat-number {
   font-size: 3rem;

  font-weight: bold;

    color: #f39c12;

    margin-bottom   :    0.5rem;
}

.stat-label {
  opacity: 0.9;
   font-size: 1.1rem;
}

.values-section  
  {
    padding: 80px 2rem;
	background: #f8f9fa;


}

.values-section h2     {
    text-align: center;
  font-size: 2.8rem;
   margin-bottom: 3rem;
	color: #2c3e50;
}  

.values-grid {
	display: grid; 
	  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
		 gap: 2.5rem;
}

.value-card {
    background: white;
   border-radius: 12px;
	overflow: hidden;
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;


}

.value-card:hover{
  transform: translateY(-5px);
}

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

.value-card h3 {
	font-size: 1.5rem;
  color: #667eea;
   margin: 1.5rem 1.5rem 1rem;
}

.value-card p {
   padding: 0 1.5rem 2rem;
  color: #7f8c8d;
  line-height: 1.6;
}

.contact-cta {
   padding: 80px 2rem;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	 color: white;
  text-align: center;
}

.contact-cta .cta-content h2 {
	font-size: 2.5rem;
   margin-bottom: 1.5rem;
}

.contact-cta .cta-content p {
  font-size: 1.2rem;
      max-width    :   700px;
       margin: 0 auto 2rem;
       opacity: 0.9;
       line-height: 1.7;
}@media screen and (max-width: 768px) {
    .about-hero-content h1 {
        font-size: 2.5rem;
    }

    .mission-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .expertise-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

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

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

@media screen and (max-width: 480px) {
    .about-hero-content h1 {
        font-size: 2rem;
    }

    .results-stats {
        grid-template-columns: 1fr;
    }

    .stat-number {
        font-size: 2.5rem;
    }
}