/* Base Styles for Desktop (Large Screens) */
.curriculum-section {
    width: 100%;
}
.curriculum-intro {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}
.curriculum-intro-text {
    /* Keep flex-direction: column for vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    padding: 50px;
    color: black;
}
.curriculum-intro-text h5 {
    color: #7D1135;
    padding: 10px;
}
.curriculum-intro-text h3,
.curriculum-intro-text p {
    padding: 10px;
}

.curriculum-intro-image-holder {
    height: 450px; /* Kept for desktop visual balance */
    width: 50%;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.curriculum-intro-image-holder img {
    height: 350px; /* Kept for desktop visual balance */
    max-width: 100%; /* Ensures it doesn't break parent container */
}

/* Container Two - Yellow Strips (Desktop Layout) */
.container-two .row {
    padding: 10px;
    background-color: #EEB100;
}
.container-two .row-two {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
.container-two .row-two .strip {
    border: 2px dashed;
    padding: 20px;
    display: flex;
    justify-content: center;
    column-gap: 50px;
}
.container-two .row-two .strip .icon {
    display: flex;
    justify-content: flex-end;
    width: 300px; /* Fixed width, okay for large screens but requires a media query for small screens */
}
.container-two .row-two .strip .title {
    text-align: center;
    width: 300px; /* Fixed width, okay for large screens but requires a media query for small screens */
}
.container-two .row-two .strip .title h4 {
    font-size: 30px;
    text-align: left;
}
.container-two .row-two .strip .para {
    display: flex;
    justify-content: flex-start;
    width: 400px; /* Fixed width, okay for large screens but requires a media query for small screens */
    color: black;
}

/* Container Three - Way Forward (Desktop Layout) */
.container-three {
    padding: 20px;
    background-color: #0B467A;
    display: flex;
    justify-content: space-around;
    align-items: center;
    column-gap: 150px;
}
.container-three .title {
    width: 50%;
}
.container-three .title h3 {
    color: #FBB21C;
    display: flex;
    justify-self: flex-end;
}
.container-three .para {
    width: 50%;
}
.container-three .para p {
    color: white;
    display: flex;
    justify-self: flex-start;
    width: 360px;
}

/* Container Four & Five (Basic Display) */
.container-four {
    place-items: center;
}
.container-four .row-two {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
    padding: 20px;
}
.container-four .row-two img {
    width: 35%;
}
.container-five {
    padding: 10px;
    place-items: center;
}


/* ======================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS (Mobile/Tablet Fixes) */
/* ======================================================= */

/* Styles for devices up to 991px wide (Tablets and Smaller) */
@media (max-width: 991px) {
    body{
        max-width: 991px;
        overflow-x: hidden;
    }
    /* Fix: Force Intro Text and Image to stack vertically */
    .curriculum-intro {
        flex-direction: column;
        padding: 0;
    }
    .curriculum-intro-text,
    .curriculum-intro-image-holder {
        width: 100%; /* Take full width */
        padding: 20px;
        height: auto;
    }
    .curriculum-intro-image-holder img {
        height: auto;
    }
    .curriculum-intro-text p {
        /* Reduce padding for tighter mobile text */
        padding: 5px 10px;
    }

    /* Fix: Force Container Three (Way Forward) to stack */
    .container-three {
        flex-direction: column;
        column-gap: 0;
        row-gap: 15px;
        padding: 30px 20px;
    }
    .container-three .title,
    .container-three .para {
        width: 100%;
        text-align: center;
    }
    .container-three .title h3,
    .container-three .para p {
        justify-content: center;
        width: auto;
        text-align: center;
        margin: 0 auto;
    }
}

/* Styles for devices up to 767px wide (Small Tablets and Phones) */
@media (max-width: 767px) {
    body{
        max-width: 767px;
        overflow-x: hidden;
    }
    /* Fix: Break the Yellow Strips to stack content and remove fixed widths */
    .container-two .row-two .strip {
        flex-direction: column;
        column-gap: 0;
        row-gap: 10px;
        text-align: center;
    }
    .container-two .row-two .strip .icon,
    .container-two .row-two .strip .title,
    .container-two .row-two .strip .para {
        width: 100%; /* Important: Overrides the fixed 300px/400px widths */
        justify-content: center;
        text-align: center;
    }
    .container-two .row-two .strip .title h4 {
        text-align: center; /* Center the strip title */
        font-size: 24px; /* Adjust font size for mobile readability */
    }
    .container-two .row-two .strip .para {
        justify-content: center;
        text-align: center;
    }

    /* Fix: Break the image row in container four */
    .container-four .row-two {
        flex-direction: column;
        column-gap: 0;
        row-gap: 20px;
    }
    .container-four .row-two img {
        width: 80%; /* Make images larger for better visibility on mobile */
    }
    .container-five img{
        width: 100%;
    }
    .header-bottom{
        max-width: 100vw;
    }
}