/* --- Main Wrapper --- */
.story-details-wrapper {
    position: relative;
}

/* --- Background Area (Holds BG Image AND ALL Content) --- */
.story-background-area {
    position: relative;
    padding: 60px 0 80px 0;
    overflow: hidden;
    z-index: 1;
    background: none; /* Remove the default background-image here */
    color: black;
}


/* Main full background - covering 80% of height */
.story-background-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: 
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 85%, rgba(255, 255, 255, 0.9) 100%),
    url('../../images/story-details-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Top-left decorative background */
.story-background-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px; /* Adjust as needed */
    height: 1000px; /* Adjust as needed */
    background-image: url('../../images/top-left.webp'); /* Your top-left image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: -1;
}

.background-content-container {
    position: relative;
}

/* --- General Story Section Styling --- */
.story-section {
    position: relative;
    margin-bottom: 80px; /* Increased spacing between sections */
}
.story-section:last-of-type {
     margin-bottom: 0; /* Remove margin from last section */
}

/* --- Company Origin Section (Logo + Content Wrapper) --- */
.company-origin-section {
    display: flex;
    align-items: center;
    gap: 40px;
}

.story-logo-container {
    flex: 0 0 30%;
    max-width: 350px;
    position: relative;
    margin-top: 50px; /* Push logo down */
    z-index: 10; /* Logo above shell */
}

.story-logo {
    max-width: 120%;
    height: auto;
    display: block;
margin-left: 20px;
}

.origin-content-wrapper {
    flex: 1;
    position: relative;
}

/* --- Mission & Vision Section (No Logo) --- */
.mission-vision-section {
    /* No special layout needed, shell takes full width relative to container */
    /* Optional: Limit width if desired */
     /* max-width: 90%; */
     /* margin-left: auto; */
     /* margin-right: auto; */
}


/* --- Story Box Shell (Border + Heading + Text Area) --- */
.story-box-shell {
    border-radius: 10px;
    position: relative;
    margin-top: 40px;
    padding: 60px 40px 40px 40px; /* Padding INSIDE the border, creates space for heading and text */
    min-height: 100px;
    background: transparent; /* ENSURE TRANSPARENCY */
}

.blue-border{
    border: 5px solid #2D88C3;
}
.yellow-border{
    border: 5px solid #EBA219;
}

/* Specific padding for mission shell might need adjustment */
.mission-shell {
     max-width: 75%;
}


/* --- Heading Styling --- */
.section-heading {
    position: absolute;
    top: -30px;
    padding: 12px 30px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 15; /* Above shell and logo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.blue-heading { background-color: #2D88C3; }
.yellow-heading { background-color: #EBA219; }
.heading-align-left { left: -40px; }
.heading-align-right { right: -20px; text-align: right; }


/* --- Content Text Wrapper (Common) --- */
.content-text-wrapper {
    position: relative;
    background: transparent; /* ENSURE TRANSPARENCY */
    margin-top: 10px; /* Space below heading area, inside the shell */
    z-index: 5; /* Below potential logo overlap */
}

/* --- REMOVE or COMMENT OUT the ::before overlay --- */
/*
.origin-text::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    right: -15px;
    bottom: -10px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
    border-radius: 5px;
}
*/

/* --- Actual Text Styling --- */
.content-text {
    font-family: 'Montserrat', sans-serif; /* ADD THIS LINE */
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
    color: #000000; /* Light color for BOTH sections, as they are on the BG image */
    /* Padding is now handled by the parent .story-box-shell */
}

.content-text p {
    margin-bottom: 1rem;
}
.content-text p:last-child {
    margin-bottom: 0;
}



/* --- REMOVE styles for .story-content-area --- */
/* --- REMOVE color override for .mission-text .content-text --- */


/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {   
    /* Top-left decorative background */
    .story-background-area::after {
        width: 900px;
        height: 900px; 
    }
    
    .story-logo {
        max-width: 110%;
        margin-left: 35px;
    }
    
    .origin-shell{
        right: 20px;
    }
    
    .mission-shell {
        left: 40px;
    }
    
}
@media (max-width: 992px) {
    .story-background-area::after {
        width: 800px;
        height: 800px; 
    }
    
    .section-heading { font-size: 1.4rem; padding: 10px 25px; top: -25px; }
    .story-box-shell { padding: 50px 30px 30px 30px; }
    .story-logo-container { margin-top: 40px; }
    .story-logo {
        margin-left: 30px;
    }
}

@media (max-width: 768px) {
    .story-background-area { padding: 40px 0 60px 0; }

    .company-origin-section {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-bottom: 40px; /* Keep spacing */
    }
     .mission-vision-section {
        /* Center the whole section if needed */
        /* width: 95%; */
        /* margin: 0 auto 60px auto; */
     }


    .story-logo-container {
        flex-basis: auto;
        width: 50%;
        max-width: 250px;
        margin-top: 0;
        margin-bottom: 10px;
        z-index: 10;
    }
    
    .story-logo{
        max-width: 100%;
    }

    .origin-content-wrapper { width: 95%; }

    .story-box-shell {
        width: 100%; /* Shell takes full width of its wrapper */
        margin-top: 0;
        padding: 30px 20px 20px 20px;
    }
     /* Ensure enough top padding inside shells to clear headings */
     .origin-shell { right: 0; }
     .mission-shell { margin: 0 auto; left: 0; max-width: 95%;} /* Center mission shell */


    .section-heading {
        position: relative; /* Still relative for mobile */
        display: block;
        width: calc(100% - 40px);
        margin: 0 auto;
        text-align: center !important;
        font-size: 1.2rem;
        padding: 8px 15px;
        transform: translateY(-50%);
        top: 0; left: auto; right: auto;
    }
    .blue-heading { margin-top: 20px; }
    .yellow-heading { margin-top: 20px; }

    .content-text-wrapper { margin-top: -15px; } /* Adjust space below heading */

    .content-text { font-size: 0.95rem; text-align: left; padding: 10px; } /* Add padding back for mobile */
}

@media (max-width: 480px) {
    .story-background-area::after {
        width: 700px;
        height: 700px; 
    }
    
    .story-background-area { padding: 40px 0; }
    
    .company-origin-section {
        margin-bottom: 20px; /* Keep spacing */
    }
    .story-logo {
        margin-left: 10px;
    }
    
    .story-box-shell {
        width: 100%; /* Shell takes full width of its wrapper */
        margin-top: 0;
        padding: 20px 10px 10px 10px;
    }
}

@media (max-width: 411px) {
    .story-details-heading{
        font-size: 1.4rem;
    }
    
    .content-text p {
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
    }  
}

@media (max-width: 321px) {
    .story-details-heading{
        font-size: 1.2rem;
    }
    
    .content-text p {
        font-size: 0.8rem;
    }  
}