:root {
    --primary-color: #41ff12; /* A rich teal color */
--secondary-color: #FBBF24; /* A warm accent color */
--dark-text: #1F2937;
--body-text: #4B5563;
--light-bg: #F9FAFB;
--white: #FFFFFF;
--border-color: #E5E7EB;
}

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

body {
font-family: 'Poppins', sans-serif;
color: var(--body-text);
line-height: 1.7;
}

.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}

/* removed generic button styles (handled by main site styles) */

/* --- Hero Section --- */
.hero {
padding: 50px 0;
background-color: var(--white);
}

.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
}

.hero-text h1 {
font-size: 2.5rem;
color: var(--dark-text);
line-height: 1.2;
margin-bottom: 20px;
}

.hero-text p {
font-size: 1.1rem;
max-width: 500px;
}

.hero-image img {
width: 100%;
height: auto;
/*border-radius: 20px;*/
/*box-shadow: 0 10px 25px rgba(0,0,0,0.1);*/
}

/* --- Founder's Story Section --- */
.story-section {
padding: 10px 0;
/* background-color: var(--light-bg); */
}

.story-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
align-items: center;
gap: 60px;
}

/* removed unused .story-image wrapper */

.story-text h2 {
font-size: 1.5rem;
color: var(--dark-text);
margin-bottom: 20px;
}

.story-text h2 span {
color: var(--primary-color);
}

.story-text p {
margin-bottom: 15px;
}

.signature {
font-family: 'Dancing Script', cursive; /* A placeholder cursive font would be ideal here */
font-style: italic;
font-weight: 700;
font-size: 1.5rem;
color: var(--dark-text);
margin-top: 20px;
}

/* --- Guiding Principles Section --- */
.principles-section {
padding: 20px 0;
}

.principles-intro {
text-align: left;
max-width: 100%;
/* margin: 0 auto 50px auto; */
}

.principles-intro h2 {
font-size: 1.5rem;
color: var(--dark-text);
margin-bottom: 15px;
}

.principles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
padding: 20px;
}

.principle-card {
border: 1px solid var(--border-color);
padding: 30px;
border-radius: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.principle-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.principle-card h3 {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 15px;
}

.principle-card ul {
list-style-position: inside;
padding-left: 5px;
}

.principle-card ul li {
margin-bottom: 5px;
}

/* removed unused Projects section grid wrappers for About page */

.projects-text h2 {
font-size: 1.5rem;
color: var(--dark-text);
margin-bottom: 15px;
}

.projects-list {
list-style: none;
margin-top: 20px;
}

.projects-list li {
padding-left: 25px;
position: relative;
margin-bottom: 10px;
font-weight: 500;
}

.projects-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: 700;
}

.projects-text .appreciation {
margin-top: 25px;
font-style: italic;
}

/* removed unused .projects-image styles */

 

/* --- Responsive Design --- */
@media (max-width: 992px) {
.hero-content, .story-content {
    grid-template-columns: 1fr;
    text-align: center;
}
.hero-text, .story-text, .projects-text {
    order: 2;
}
.hero-image {
    order: 1;
    margin-bottom: 40px;
}
.hero-text p {
    margin: 0 auto;
}
.story-content {
    gap: 40px;
}
.principles-grid {
    grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.hero-text h1 {
    font-size: 1rem;
}
.story-text h2, .principles-intro h2, .projects-text h2 {
    font-size: 1rem;
}
}

.about__image {
    position: relative;
    isolation: isolate;
    max-width: 450px;
    margin-inline: auto;
  }
  
  .about__image img {
    border: 0.75rem solid var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  .about__image::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    transform: rotate(8deg);
    z-index: -1;
  }