/* -------------------------
   top-message.css
   - Desktop: EXACT desktop rules restored (inside min-width:769px)
   - Mobile: fix kept (inside max-width:768px)
   ------------------------- */

/* Base / shared styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'poppins', sans-serif;
}

p,a,input,label,textarea,span,ul,li{
    font-family: 'poppins', sans-serif;
}

/* CEO Banner Section (inclued all Business Solutions Pages) */

/* Banner wrapper (container for both banner and blue box) */
.banner-wrapper {
    width: 100%;
    position: relative; /* needed so absolute desktop hero positions relative to this wrapper */
}

/* CEO Banner (background image) - same as before */
.ceo {
    position: relative;
    height: 60vh;
    background: url(../../images/top_messge/ceo-banner-new.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
/* CEO Banner Section End */


/* CHANGE */
/* Blue box on the banner */
/* Baseline blue box styles (these are starter values; desktop/mobile will override) */
.ceo-hero-content {
    background: #005587;
    color: white;
    padding: 2.5rem;
    max-width: 500px;
    margin: 0 auto 40px; /* baseline spacing (mobile will change) */
    box-sizing: border-box;
}

.ceo-hero-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.ceo-hero-content p {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 40px;
}

.ceo-hero-content img {
    width: 360px;
    margin-bottom: 40px;
}
/* Blue box on the banner */



/* Content Placeholder Section */
.ceo-content-container{
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.ceo-content-row h1 {
    font-size: 26px;
    color: #002f5f;
    margin-top: 80px;
    margin-bottom: 20px;
}

.ceo-content-row blockquote {
    border-left: 5px solid #004080;
    background-color: #eeeeee;
    border-radius: 5px;
    margin: 20px 0;
    padding-left: 30px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #004080;
}

.ceo-content-row p {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-top: 20px;
}

/* =========================
   DESKTOP
   =========================
   Recreate the original desktop code exactly so blue box position matches.
*/
@media (min-width: 769px) {
    /* Banner height */
    .ceo {
        height: 60vh;
        margin-bottom: 40px;
    }

    /* blue box is absolutely positioned on top of the banner */
    .ceo-hero-content {
        position: absolute;     /* absolute */
        height: 44vh;           /* height 40vh */
        bottom: 0;              /* bottom 0 */
        left: 15%;              /* left 15% */
        right: 15%;             /* right 15% */
        background: #005587;    /* color */
        padding: 2.5rem;        /* padding */
        max-width: 500px;       /* max width */
        color: white;
        margin: 0;              /* remove auto margins when absolute */
        z-index: 10;
        box-sizing: border-box;
    }

    .ceo-hero-content h1 {
        font-size: 2rem;
    }

    .ceo-hero-content p {
        font-size: 1.6rem;
        margin-bottom: 40px;
    }

    .ceo-hero-content img {
        width: 360px;
        margin-bottom: 40px;
    }
}

/* =========================
   MOBILE
   =========================
   On small screens use the this approach: blue box in normal flow BELOW banner.
*/
@media (max-width: 768px) {
    /* mobile banner height reduced */
    .ceo {
        height: 300px;
        margin-bottom: 0; /* remove bottom margin so box sits directly after banner */
        
        /* CHANGE : call another image jpg for mobile */
        background: url(../../images/top_messge/ceo-banner-mobile.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
    }

    /* blue box sits below banner (static positioning) */
    .ceo-hero-content {
        position: static;           /* IMPORTANT: remove absolute so it flows below banner */
        height: auto;               /* content-driven height */
        left: auto;
        right: auto;
        bottom: auto;
        max-width: none;
        width: calc(100% - 40px);   /* account for side margins */
        margin: 16px 20px;          /* spacing from edges */
        padding: 1.25rem;           /* reduced padding for mobile */
        box-sizing: border-box;
        background: #005587;
        color: white;
    }

    .ceo-hero-content h1 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .ceo-hero-content p {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        line-height: 1.5;
    }

    .ceo-hero-content img {
        width: 100%;
        max-width: 240px;
        margin-bottom: 12px;
    }

    /* slight spacing adjustment so following content doesn't stick */
    .ceo-content-container {
        margin-top: 20px;
    }
}