.About {
    background-color: black;
    height: 500px;
    width: 100%;
    margin-top: 5%;
    display: flex; /* Flexbox for centering the grid */
    justify-content: center; /* Center grid horizontally */
    align-items: center; /* Center grid vertically */
    text-align: center; /* Ensure all text aligns properly */
}

.grid {
    display: grid;
    grid-template-rows: auto auto; /* Two rows: one for h1 and one for breadcrumb */
    gap: 20px; /* Add spacing between rows */
}

.About h1 {
    color: white;
    font-size: 50px;
    margin: 0; /* Remove extra margin */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.breadcrumb {
    display: flex; /* Use Flexbox for inline arrangement */
    gap: 5px; /* Add spacing between Home and > */
    font-size: 18px;
    align-items: center; /* Align vertically */
}

.About a {
    color: white;
    text-decoration: none;
}


.About p {
    color: #BFF747;
    margin: 0; /* Remove extra margin */
}

.Story {
    background-color: #f4f4f4; /* Light background for contrast */
    padding: 50px; /* Add space around the content */
    text-align: center; /* Center-align all text */
}



.Story .star-icon {
    width: 30px; /* Size of the star icon */
    vertical-align: middle; /* Align the icon with the text */
}
.Story h1 {
    font-size: 50px; /* Larger font size for the main headline */
    color: #333; /* Darker color for readability */
    line-height: 1.5; /* Proper line spacing */
    margin-bottom: 20px; /* Spacing below the h1 */
    font-family:  sans-serif;
}

.Story h3 {
    font-size: 18px; /* Subheadline size */
    color: #555; /* Softer color for the text */
    line-height: 1.8; /* Comfortable spacing for readability */
    max-width: 800px; /* Limit the text width */
    margin: 0 auto; /* Center the text block */
}

/* Main container styles */
.story-img {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    gap: 20px; /* Space between rows */
    width: 80%;
    margin: 0 auto; /* Center the container */
}

/* Flexbox container for images in rows */
.story-img-first,
.story-img-second {
    display: flex; /* Flexbox for alignment */
    width: 100%; /* Ensure rows take the full width */
    gap: 10px; /* Space between images */
    box-sizing: border-box; /* Include padding and borders in width */
    border-radius: 20px; /* Optional: rounding corners */
}

/* Individual image styles */
.story-img-first img:first-child {
    width: 70%; /* Set first image to 70% width */
    height: auto; /* Maintain aspect ratio */
    animation: fadeInLeft 1s ease-out; /* Animation for fade and slide */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Simple transition for scale and opacity */
}

.story-img-first img:last-child {
    width: 30%; /* Set second image to 30% width */
    height: auto; /* Maintain aspect ratio */
    animation: fadeInRight 1s ease-out; /* Animation for fade and slide */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Simple transition for scale and opacity */
}

.story-img-second img:first-child {
    width: 30%; /* Set first image to 30% width */
    height: auto; /* Maintain aspect ratio */
    animation: fadeInLeft 1s ease-out; /* Animation for fade and slide */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Simple transition for scale and opacity */
}

.story-img-second img:last-child {
    width: 70%; /* Set second image to 70% width */
    height: auto; /* Maintain aspect ratio */
    animation: fadeInRight 1s ease-out; /* Animation for fade and slide */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Simple transition for scale and opacity */
}

/* Hover effect: Simple scale and opacity change */
.story-img-first img:hover, 
.story-img-second img:hover {
    transform: scale(1.05); /* Slight scaling effect */
    opacity: 0.9; /* Slight opacity change */
    cursor: pointer; /* Change cursor to indicate interactivity */
}

/* Add a black border and cover the images within their space */
.story-img-first img, 
.story-img-second img {
    border: 2px solid black; /* Add black border */
    object-fit: cover; /* Ensure images fit nicely within the set width */
    border-radius: 10px; /* Optional: rounding image borders */
}

/* Animation keyframes */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .story-img {
        width: 80%; /* Ensure full width on smaller screens */
    }
    .Story h1{
        font-size: 20px;
    }
}

/* Animation for stacking images on mobile */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Container for the two sections */
.vision-mission-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Space between columns */
    margin: 40px 0;
    flex-wrap: wrap; /* Ensures the layout is responsive */
    width: 80%;
    margin-left: 10%;
}

/* Core Vision Section */
.core-vision, .main-mission {
    flex: 1; /* Ensures both divs take equal width */
    padding: 20px;
    border-radius: 8px;
    text-align: left; /* Align text to the left */
}

/* Heading styles (highlighted with black) */
.core-vision h2, .main-mission h2 {
    font-family: 'Arial', sans-serif; /* Custom font family */
    font-size: 28px;
    color: black;
    font-weight: bold; /* Make the title bold */
    text-transform: uppercase; /* Uppercase for emphasis */
    margin-bottom: 10px;
    border-bottom: 2px solid black; /* Black border below the title */
    padding-bottom: 5px;
}

/* Paragraph styles */
.core-vision p, .main-mission p {
    font-family: 'Georgia', serif; /* Good serif font family */
    font-size: 18px;
    color: #333; /* Dark text color for readability */
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Hover Effect for Mission Section */
.main-mission {
    border-left: 4px solid black; /* Add black left border on hover */
    transition: border-left 0.3s ease;
}
.core-vision{
    border-left: 4px solid black; /* Add black left border on hover */
    transition: border-left 0.3s ease;
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .vision-mission-container {
        flex-direction: column; /* Stack sections vertically */
    }

    .core-vision, .main-mission {
        flex: 1 1 100%; /* Make each section take full width on small screens */
        margin-bottom: 20px; /* Space between the sections */
    }
}