* {
    margin: 0;
    padding: 0;
    box-sizing   :      border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
   color: #333;
}

.headerContainer {
	  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   position: fixed;
   width: 100%;
    top :       0;
   z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navWrapper {
  max-width: 1200px;
   margin: 0 auto;
          display: flex;
   justify-content  :space-between;
    align-items: center;
   padding: 1rem 2rem;
	}

.brandLogo img {
   height: 45px;
    width: auto;
}

.navigationMenu {
      display: flex;
    list-style: none;
  gap: 2rem;


}

.navigationMenu a {
  color: white;
         text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
}

.navigationMenu a:hover {
   color: #f0f0f0; 

}


.burgerMenuBtn {
               display     :none; 
  background: none; 
    border: none; 
   color: white; 
    font-size: 1.5rem; 
	cursor: pointer;
}@media (max-width: 768px) {
    .navigationMenu {
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        flex-direction: column;
        padding: 2rem;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .navigationMenu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .burgerMenuBtn {
        display: block;
    }
}.pageHeader {
  background: linear-gradient(rgba(102, 126, 234, 0.85), rgba(118, 75, 162, 0.85)), url('../photography/instinctive_leadership_coaching_5.webp');
  background-size: cover;
    background-position: center;
   padding: 8rem 2rem 4rem;
   text-align: center;
   color: white;
    margin-top: 80px;
}

.headerTitle {
         font-size: 3rem;
    font-weight: 700;
	margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}

.headerSubtitle {
   font-size: 1.2rem;
   opacity: 0.9;
   max-width: 600px;
  margin: 0 auto;


}

.aboutMainContent {
	               padding: 5rem 2rem;
   background: white;


}

.contentWrapper {
    max-width: 1200px;
          margin: 0 auto;
}

.storySection {
        display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
    margin-bottom: 5rem;
}

.storyContent h2 {
      font-size: 2.5rem; 
	   color: #667eea; 
	    margin-bottom: 1.5rem;
}

.storyContent p {
    font-size: 1.1rem;
   line-height: 1.8;
   margin-bottom: 1.5rem;
}

.storyImage {
    width  :100%;
   height    :        400px;
    object-fit: cover;
   border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.valuesSection {
  background: #f8f9fa;
                    padding: 5rem 2rem; 
	
}

.valuesGrid {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
	max-width     :        1200px;
     margin: 0 auto;
}

.valueCard {
   background: white;
    padding: 2.5rem;
    border-radius: 15px;
   text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      transition: transform 0.3s ease;
}

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

.valueCard h3 {
    font-size: 1.5rem;
   color  :   #764ba2;
   margin-bottom: 1rem;
}

.methodologySection {
  padding: 5rem 2rem;
               background: white;
}

.methodContent {
   max-width: 800px;
   margin: 0 auto;
    text-align: center;
}

.methodContent h2 {
  font-size :2.5rem;
   color: #667eea;
  margin-bottom     :    2rem;
}


.methodContent p {
   font-size: 1.1rem;
  line-height    :      1.8;
    margin-bottom: 1.5rem;
}

.experienceSection {


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

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


}

.experienceItem {
    text-align: center;
}

.experienceNumber {
                    font-size: 3rem;
    font-weight   :     700;
  display: block;
  margin-bottom    :        0.5rem;
}

.experienceLabel {
    font-size: 1.1rem;
  opacity: 0.9;
}  @media (max-width: 768px) {
    .storySection {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .headerTitle {
        font-size: 2.2rem;
    }

    .navWrapper {
        padding: 1rem;
    }
}