:root {--white2: #fafafa;}
body.dark-theme {--white2: #1a1a1a;}

.container {max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;}

/* Hero Section */
.hero {background: linear-gradient(145deg, #74b5ff 0%, #0876dd 100%); color: white; padding-top: 130px; padding-bottom: 18px; text-align: center; margin-bottom: -1rem; border-radius: 0 0 20px 20px;}
.hero h1 {padding-top: 70px; font-size: clamp(2.5rem, 4vw, 3.25rem);color: var(--black); margin: 0 auto 1.5rem auto; font-weight: 700; line-height: 1.2; max-width: 1200px;}
.hero p {font-size: clamp(13px, 1.5vw, 16px); max-width: 700px; margin: 0 auto 2rem; color: var(--border-color);}


/* Story */
section {padding: 5rem 30px;}
.section-title {text-align: center; margin-bottom: 4rem; padding-top: 50px;}
.section-title h2 {font-size: clamp(2rem, 4vw, 3rem); color: var(--black); margin-bottom: 1rem; position: relative; display: inline-block; font-weight: 700;}
.section-title h2:after {content: ''; position: absolute; width: 60px; height: 4px; background: linear-gradient(145deg, #3498db80 25%, #ec24aa 75%); bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 2px;}
.section-title p {color: var(--light-text); font-size: clamp(1rem, 2vw, 1.1rem); max-width: 800px; margin: 0 auto;}

.story-content {display: flex; flex-direction: column; gap: 3rem; max-width: 1350px; margin: 0 auto 0 auto;}
.story-text h3 {font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; color: var(--dark);}
.story-text p {text-align: justify;margin-bottom: 1.5rem; font-size: 1rem; color: var(--text-color);}
.story-image {border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-md); transform: perspective(1000px) rotateY(-1deg); transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);}

.story-image:hover {transform: perspective(1000px) rotateY(1deg);}
.story-image img {width: 100%; height: auto; display: block; object-fit: cover;}


/* == Stats Section == */
.stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 60px auto 10px auto; margin-bottom: -15px; max-width: 1300px;}
.stat-card {text-align: center; box-shadow: var(--shadow-light); transition: transform 0.3s, box-shadow 0.3s;}
.stat-card:hover {transform: translateY(-5px); box-shadow: var(--shadow-md);}
.stat-number {font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; color: var(--black); margin-bottom: 0.5rem;}
.stat-label {color: var(--light-text); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(12px, 1.3vw, 14px);}


/* Values Section */
.values-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin: 1rem auto 0 auto; max-width: 1250px;}
.value-card {background: var(--white2); padding: 2.5rem; border-radius: 15px; text-align: center; box-shadow: var(--shadow-light); transition: var(--transition); border: 1px solid #b1afaf34;}
.value-card:hover {transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-md);}
.value h2 {color: var(--dark);}
.value-icon {font-size: 3rem; color: var(--black); margin-bottom: 1.5rem;}
.value-card h3 {font-size: 1.5rem; margin-bottom: 1rem; color: var(--black);line-height: 1.4;}
.value-card p {color: var(--text-color);}

hr {border: none; border-top: 0.5px solid #8d8d8d23; max-width: 1250px; margin: 14px auto 14px auto;}


/*  == Mission Section == */
.mission {background: var(--lighter-gray); border-radius: 20px; padding: 4rem; text-align: center; margin: 90px auto 50px auto; box-shadow: var(--shadow-md); max-width: 1250px;}
.mission-icon {font-size: 4rem; color: var(--accent); margin-bottom: 1.5rem; animation: pulse 2s infinite;}
.mission h3 {font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1rem; color: var(--dark);}
.mission p {font-size: clamp(1rem, 2vw, 1.15rem); max-width: 800px; margin: 0 auto; color: var(--dark);line-height: 1.45;}

@keyframes pulse {0% { transform: scale(1);} 50% { transform: scale(1.1);} 100% { transform: scale(1);}}



/* == Services Section == */
.services {border-radius: 20px; margin: 0 auto 0 auto; box-shadow: var(--shadow-md); max-width: 1250px;}
.services .section-title h2 {color: var(--dark);}
.services .section-title p {color: var(--gray);}
.services-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 2fr)); gap: 20px; margin-top: 3rem;}
.service-card {background: var(--white2); backdrop-filter: blur(5px); padding: 35px; border-radius: 15px; text-align: center; border: 1px solid #b1afaf41; transition: var(--transition);}
.service-card:hover {transform: translateY(-5px);}
.service-icon {font-size: 3rem; margin-bottom: 1.5rem; color: var(--dark);}
.service-card h3 {font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; color: var(--dark);}
.service-card p {opacity: 0.9; color: var(--gray);text-align: center;line-height: 1.5;}


/* == Team Section == */
.team {padding: 5rem 0; margin-top: -30px;}
.team p {color: var(--gray);}
.team h2 {color: var(--black);}
.team-members-container {display: grid; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem;}
.team-member { background: black; padding: 50px; border-radius: 12px; box-shadow: var(--shadow-md); max-width: 550px; margin: 0 auto; text-align: center;}
.team-image {width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin: 40px auto 20px; border: 5px solid var(--border-color); box-shadow: var(--shadow-light); transition: transform 0.3s;}
.team-image:hover {transform: scale(1.05);}
.team-member:hover {transition: transform 0.3s; transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 20px #5a67d880;}
.team-member h3 {font-size: 35px; color: var(--white);padding-top: 22px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
.team-member p {color: var(--gray);text-align: justify;}
.team-role {color: var(--light-text); font-weight: 600; margin-bottom: 1.5rem;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

.social-links {display: flex; justify-content: center; padding-top: 30px; gap: 1.5rem;}
.social-links a {display: flex; align-items: center; justify-content: center; color: white; width: 45px; height: 45px; border-radius: 50%; background: var(--background); text-decoration: none; transition: var(--transition);}
.social-links a:hover {background: var(--primary); color: white; transform: translateY(-2px) scale(1.1);}


/* CTA Section */
.cta {text-align: center; background: var(--lighter-gray); padding: 45px 30px; border-radius: 15px; margin: 5rem auto 5rem auto; box-shadow: var(--shadow-md); max-width: 950px;}

.cta h2 {font-size: 30px; margin-bottom: 1.5rem;margin-top: 10px; color: var(--dark); font-weight: 700;}
.cta p {font-size: 35; max-width: 700px; margin: 0 auto 2rem; color: var(--text-color);padding-bottom: 10px;}
.btn {display: inline-block; background: linear-gradient(45deg, var(--primary), #3182CE); color: white; padding: 1rem 2.5rem; border-radius: 50px;
    text-decoration: none; font-weight: 600; transition: var(--transition); border: none; cursor: pointer; font-size: 1.1rem; box-shadow: 0 5px 15px #5a67d866;}
.btn:hover {transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(90, 103, 216, 0.5);}





@media (max-width: 800px) {
    section {padding: 40px 25px;}
    .section-title {margin-bottom: 3rem;padding-top: 45px;}
    .section-title h2 {font-size: 35px;}
    .section-title p {font-size: clamp(0.9rem, 3vw, 1rem);padding: 0 10px;}
    .story-content {gap: 2rem;}
    .story-text h3 {font-size: clamp(20px, 3vw, 1.5rem);}
    .story-text p {font-size: 15px;}
    .story-image {transform: none;}
    .story-image:hover {transform: none;}


    .stats {gap: 0.65rem;margin: 40px auto 0 auto;margin-bottom: -10px;padding: 0 8px;grid-template-columns: repeat(2, 1fr);}
    .stat-card {padding: 1rem 0.5rem;}
    .stat-label {font-size: 0.8rem;letter-spacing: 0.5px;}

    .values-grid {gap: 17px;padding: 0 5px;}
    .value-card {padding: 2rem 0.8rem;margin: 0 5px;}

    .value-icon {font-size: 2rem;margin-bottom: 1rem;}
    .value-card h3 {font-size: 1.25rem;}
    .value-card:hover {transform: none;}
    hr {margin: 2px auto;max-width: 92%;}


    .mission {margin: 60px 20px 30px 20px;padding: 2.5rem 1.5rem;border-radius: 15px; max-width: 700px;}
    .mission-icon {font-size: 44px;}
    .mission h3 {font-size: clamp(1.5rem, 4vw, 1.75rem);}
    .mission p {font-size: clamp(0.9rem, 3vw, 1rem);}

    .services {margin: 0 -10px;border-radius: 15px;}
    .services-grid {grid-template-columns: 1fr;gap: 20px;margin-top: 2rem;padding: 15px;}
    .service-card {padding: 45px 30px;margin: 0 5px;}
    .service-card p {padding: 0 10px;}
    .service-card:hover {transform: none;}
    .service-icon {font-size: 2rem;margin-bottom: 1rem;}
    .service-card h3 {font-size: 1.25rem;}

    .team {padding: 3rem 0;margin-top: -40px;}
    .team-member {margin: 0 auto;}
    .team-image {width: 140px;height: 140px;}
    .team-member h3 {font-size: 38px;}
    .social-links {padding-top: 25px;gap: 1rem;}

    .cta {padding: 50px 40px; margin: 60px 20px;}
    .cta h2 {font-size: 26px;}
    .cta p {font-size: 15px;margin: 0 auto 1.5rem;}
    .btn:hover {transform: none;}
}






@media (max-width: 550px) {
    .container {padding: 0 14px;}
    .hero {padding: 130px 10px 15px 10px;border-radius: 0 0 18px 18px;}
    .hero h1 {padding-top: 50px;font-size: 27px;margin: 0 auto 1rem auto;}
    .hero p {font-size: 13px;margin: 15px auto 1.5rem;padding-top: 20px;line-height: 1.5;}

    section {padding: 30px 15px;}
    .section-title {margin-bottom: 3rem;padding-top: 45px;}
    .section-title p {margin-bottom: 10px;}

    .stats {gap: 0.4rem;}
    .stat-label {font-size: 12px;}

    .values-grid {gap: 18px;margin: 0;padding: 0;grid-template-columns: 1fr;}
    .value-card {padding: 30px 25px;margin: 0;}
    .value-card p {text-align: justify;line-height: 1.45;}

    .mission {margin: 20px 10px 10px;}
    .mission p {text-align: justify;}
    
    .services {margin: 20px 0;}
    .services-grid {margin-top: 5px; padding: 0;grid-template-columns: 1fr;}
    .service-card {margin: 0; padding: 38px 15px;}
    .service-card P {text-align: justify;}


    .team {padding-top: 30px;padding-bottom: 70px;}
    .team-member {padding: 1px 30px 30px;}
    .team-image {width: 120px;height: 120px;;}
    .team-member h3 {font-size: 24px;padding-top: 0;}
    .team-member p {line-height: 1.4;}

    .cta {display: none;}
}




@media (hover: none) {
    .story-image:hover,
    .value-card:hover,
    .service-card:hover,
    .team-member:hover,
    .team-image:hover,
    .btn:hover,
    .social-links a:hover,
    .stat-card:hover {transform: none;}
    .story-image:hover {transform: none;}
}