/* about.css */

.about-banner {
    width: 100%; /* Full width */
    position: relative; /* For potential future content overlay if needed, not strictly necessary for just text */
    text-align: center;
    /* --- Background Image --- */
    /* IMPORTANT: Replace with your actual image path */
    background-image: url('../Images/about-us/hero-image.png'); /* <<< SET YOUR IMAGE */
    background-color: #9889C2; /* Fallback color (the purple from your example) */
    background-size: cover;    /* Ensure image covers the section, may crop */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;

    /* --- Centering Text --- */
    display: flex;
    align-items: center;    /* Vertical centering */
    justify-content: center; /* Horizontal centering */

    /* --- Responsive Height via Aspect Ratio (1920x720) --- */
    aspect-ratio: 1920 / 400;
    /* This makes the section height scale with its width, maintaining image proportions. */

    /* --- Minimum Height --- */
    /* Prevents the banner from becoming too squished on very narrow screens */
    min-height: 200px; /* Adjust as needed for phones */
    /* max-height: 720px; /* Optional: if you never want it taller than original image height */
}

.about-banner-title {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif; /* Your serif font */
    color: #ffffff; /* Black text */
    font-weight: 700; /* Bold */
    text-align: center; /* Ensure text itself is centered if it wraps */
    padding: 10px 20px; /* Add some padding around text, especially for small screens */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    /* --- Responsive Font Size --- */
    /* clamp(MINIMUM_SIZE, PREFERRED_SCALING_SIZE, MAXIMUM_SIZE) */
    font-size: clamp(2em, 7vw, 5.5em); /* Adjust these values to taste */
    margin: 0; /* Remove default h1 margin */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) { /* Tablets */
    .about-banner {
        min-height: 180px; /* Slightly adjust min-height */
    }
    .about-banner-title {
        font-size: clamp(1.8em, 8vw, 4.5em); /* Adjust responsive font range */
    }
}

@media (max-width: 480px) { /* Phones */
    .about-banner {
        min-height: 150px; /* Further adjust min-height */
    }
    .about-banner-title {
        font-size: clamp(1.5em, 9vw, 3.5em); /* Further adjust responsive font range */
        padding: 10px 15px;
    }
}

/* Mission Vision Section */
.mission-vision-section {
    padding: 80px 15px;
    background-color: #e9e9e9; /* Light grey background */
    overflow-x: hidden;
}

.mission-vision-grid {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* Text Column */
.mission-vision-text-column {
    flex: 1 1 480px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.content-card {
    background-color: #fff;
    padding: 35px 40px;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.content-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.content-card-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: clamp(1.5em, 2.5vw, 2em);
    color: #1D2D44;
    margin-top: 0;
    margin-bottom: 18px;
    font-weight: 700;
}

.content-card-description {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: clamp(0.9em, 1.8vw, 1.05em);
    line-height: 1.75;
    color: #555;
    margin-bottom: 0;
}

/* Image Column */
.mission-vision-image-column {
    flex: 1 1 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 520px;
}

.image-overlap-wrapper {
    position: relative;
    width: clamp(300px, 85%, 480px);
}

.image-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    background-color: #fff;
    aspect-ratio: 10 / 11;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-card:hover {
    transform: scale(1.05) translateY(-6px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.13);
    z-index: 5;
}

.image-mv-1 {
    width: 90%;
    transform: rotate(-7deg) translateX(-10%);
    position: relative;
    z-index: 1;
}

.image-mv-2 {
    width: 85%;
    position: absolute;
    bottom: -15%;
    right: -15%;
    transform: rotate(8deg);
    z-index: 2;
}
.image-mv-2:hover {
    transform: scale(1.08) rotate(5deg) translateY(-10px);
    z-index: 6;
}

/* Responsive Adjustments for Mission/Vision */
@media (max-width: 1024px) {
    .mission-vision-grid {
        max-width: 95%;
        gap: 35px;
    }
    .mission-vision-text-column {
        flex-basis: 450px;
    }
    .mission-vision-image-column {
        flex-basis: 400px;
    }
}

@media (max-width: 860px) {
    .mission-vision-grid {
        max-width: 100%;
        gap: 0;
    }
    .mission-vision-text-column,
    .mission-vision-image-column {
        flex-basis: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .mission-vision-text-column {
        margin-bottom: 40px;
    }
    .mission-vision-image-column {
        min-height: auto;
    }
    .image-overlap-wrapper {
         width: clamp(280px, 70%, 450px);
    }
}

@media (max-width: 576px) {
    .mission-vision-section {
        padding: 60px 15px;
    }
    .mission-vision-text-column {
        gap: 30px;
        margin-bottom: 50px;
    }
    .content-card {
        padding: 25px 30px;
    }
    .content-card-title {
        font-size: clamp(1.4em, 5vw, 1.7em);
    }
    .content-card-description {
        font-size: clamp(0.9em, 4vw, 1em);
    }

    .image-overlap-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .image-mv-1,
    .image-mv-2 {
        position: relative;
        width: clamp(260px, 85%, 350px);
        transform: none;
        bottom: auto;
        right: auto;
    }
}

/* Experience Hero Section */
.experience-hero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.experience-content-wrapper {
    width: 100%;
    position: relative;
    background-image: url('../Images/about-us/my-experience-image.png');
    background-color: #e0e0e0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    aspect-ratio: 1920 / 1000;
    min-height: 400px;
    display: flex;
    padding: clamp(30px, 6vw, 80px) clamp(30px, 8vw, 120px);
}

.experience-text-block {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

/* ---- THIS IS THE CORRECTED HEADING RULE ---- */
.experience-title {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    color: #000000;
    font-weight: 700;
    font-size: clamp(1.6em, 3.5vw, 2.4em); /* Diminished font size */
    margin-top: 0;
    margin-bottom: clamp(20px, 3vh, 35px);
    line-height: 1.2;
}

.experience-description {
    font-family: 'Roboto', Arial, sans-serif;
    color: #333;
    font-size: clamp(0.9em, 1.8vw, 1.1em);
    line-height: 1.7;
    margin-bottom: clamp(15px, 2.5vh, 25px);
}
.experience-description:last-of-type {
    margin-bottom: clamp(25px, 4vh, 40px);
}

.experience-social-links {
    display: flex;
    gap: 15px;
}

.experience-social-links .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.experience-social-links .social-icon:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.experience-social-links .facebook-icon {
    background-color: #1877F2;
}

.experience-social-links .whatsapp-icon {
    background-color: #25D366;
}

.experience-dude-image-container {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 30%;
    max-width: 380px;
    z-index: 1;
}

.experience-dude-actual-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive Adjustments for Experience Section */
@media (max-width: 1200px) {
    .experience-content-wrapper {
        padding: clamp(30px, 5vw, 60px) clamp(30px, 6vw, 80px);
    }
}

@media (max-width: 992px) { /* Tablet */
    .experience-text-block {
        max-width: 500px;
    }
    /* ---- THIS IS THE CORRECTED HEADING RULE FOR TABLETS ---- */
    .experience-title {
        font-size: clamp(1.5em, 4vw, 2.2em); /* Diminished font size */
    }
    .experience-dude-image-container {
        width: 35%;
        right: 2%;
        max-width: 300px;
    }
}

@media (max-width: 768px) { /* Mobile */
    .experience-content-wrapper {
        display: block;
        padding: 40px 20px;
        aspect-ratio: auto;
        min-height: auto;
    }
    .experience-text-block {
        max-width: 100%;
        margin-bottom: 40px;
    }
    /* ---- THIS IS THE CORRECTED HEADING RULE FOR MOBILE ---- */
    .experience-title {
        font-size: clamp(1.5em, 5vw, 2em); /* Diminished font size */
    }
    .experience-description {
        font-size: clamp(0.85em, 2.5vw, 1em);
    }

    .experience-dude-image-container {
        position: relative;
        width: 70%;
        max-width: 300px;
        margin: 40px auto 0 auto;
        bottom: auto;
        right: auto;
        z-index: auto;
    }
}