/* --- Global Styles for this Page --- */
main {
    padding-top: 70px;
}
.section-heading { text-align: center; margin-bottom: 50px; }
.section-heading h2 { font-size: 2.5rem; font-weight: 700; color: #1E1E3C; margin-bottom: 10px; }
.section-heading p { font-size: 1.1rem; color: #555; max-width: 600px; margin: 0 auto; }

/* --- Page Header Section --- */
.page-header { background: linear-gradient(135deg, #f7f5ff, #e8e6f9); padding: 80px 0; text-align: center; }
.page-header-container { width: 90%; max-width: 1200px; margin: 0 auto; }
.page-header h1 { font-size: 3.5rem; color: #1E1E3C; margin: 0 0 10px 0; }
.page-header h1 span { color: #7553DD; }
.page-header p { font-size: 1.2rem; color: #555; margin: 0; }

/* --- Our Story Section --- */
.story-section { padding: 80px 0; }
.story-container { width: 90%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.story-image img { max-width: 100%; border-radius: 24px; }
.story-content h2 { font-size: 2.5rem; color: #1E1E3C; margin: 0 0 20px 0; }
.story-content p { font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 20px; }
.story-content p:last-child { margin-bottom: 0; }

/* --- Our Values Section --- */
.values-section { padding: 80px 0; background-color: #f8f9fa; }
.values-container { width: 90%; max-width: 1200px; margin: 0 auto; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.value-card {
    background-color: #FFFFFF; padding: 30px; border-radius: 16px; text-align: center; border: 1px solid #f0f0f0;
    /* ADDED: Transition for hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.value-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #f0eefc; border-radius: 50%; margin-bottom: 20px; }
.value-icon i { font-size: 1.8rem; color: #7553DD; }
.value-card h3 { font-size: 1.5rem; color: #1E1E3C; margin: 0 0 10px 0; }
.value-card p { color: #555; line-height: 1.6; margin: 0; }

/* --- ADDED: Social Connect Section --- */
.social-connect-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}
.social-connect-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.social-connect-container h2 {
    font-size: 2.5rem;
    color: #1E1E3C;
    margin-bottom: 10px;
}
.social-connect-container p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
}
.social-icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f0eefc;
    color: #7553DD;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* For ripple effect */
}
.social-icon-link:hover {
    transform: translateY(-5px) scale(1.1);
    background-color: #7553DD;
    color: #FFFFFF;
    box-shadow: 0 10px 20px rgba(117, 83, 221, 0.3);
}


/* --- Responsive --- */
@media (max-width: 992px) {
    .story-container { grid-template-columns: 1fr; }
    .story-content { order: -1; text-align: center; }
    .story-image { margin-top: 40px; }
    .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page-header h1 { font-size: 2.5rem; }
    .story-content h2, .section-heading h2, .social-connect-container h2 { font-size: 2rem; }
}