@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Quicksand&family=Libre+Barcode+39&display=swap');

/* #region 📦 GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* #endregion */

/* #region Fonts */

@font-face {
    font-family: 'Tangerine';
    src: url('../fonts/Tangerine-Regular.woff2') format('woff2'), url('/_content/imsuShared/fonts/Tangerine-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tangerine';
    src: url('../fonts/Tangerine-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BarCode';
    src: url('../fonts/CodeLogitogo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
/* #endregion */

/* #region HTML / Body */
html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 400;
}
/* #endregion */

/* #region Accordion */
.accordion-button {
    background-color: #003300;
    color: white;
}

    .accordion-button.collapsed {
        background-color: #f8f9fa;
        color: #003300;
    }

.accordion-body a {
    display: block;
}
/* #endregion */

/* #region Forms */
#formContent {
    background-color: #B8E3E9;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    position: relative;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formFooter {
    background-color: #B8E3E9;
    border-top: 1px solid #dce8f1;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

/* Form Elements Styles*/
.simple-form {
    margin: auto;
}

    .simple-form input {
        width: 90%;
        border: 1px solid #eee;
        border-left: 0.2vw solid;
        border-radius: 0.4vw;
        transition: border-color .5s ease-out;
        box-shadow: 0px 0px 0.50em #d9d9d9;
        -moz-border-radius: 0.125em;
        -webkit-border-radius: 0.125em;
        -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
        -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
    }

        .simple-form input:optional {
            border-left-color: #999;
        }

        .simple-form input:required {
            border-left-color: palegreen;
        }

        .simple-form input:invalid {
            border-left-color: salmon;
        }

        .simple-form input[type=button], .simple-form input[type="file"], .simple-form input[type=reset], .simple-form input[type=submit] {
            border: none;
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.25vh;
            margin: 2px;
            cursor: pointer;
            display: inline;
            width: 90%;
            box-shadow: 0px 0px 0.50em #d9d9d9;
            -moz-border-radius: 0.125em;
            -webkit-border-radius: 0.125em;
            -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
            -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
        }

            .simple-form input[type="radio"], .simple-form input[type=submit]:hover {
                background-color: palegoldenrod;
                color: #454141;
            }

        .simple-form input::-webkit-input-placeholder {
            color: #454141;
            padding: 1vw;
            font-size: 1vw;
        }

    .simple-form hr {
        margin: 2px;
        border-color: powderblue;
        width: 90%;
    }

    .simple-form table, .simple-form th, .simple-form td {
        border: 0.1vw dotted powderblue;
    }

    .simple-form select {
        color: #454141;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.25vh;
        margin: 2px;
        width: 90%;
        border-left: 0.2vw solid;
        border-color: salmon;
        border-radius: 0.1vw;
    }

        .simple-form select:optional {
            border-left-color: #999;
        }

        .simple-form select:required {
            border-left-color: palegreen;
        }

        .simple-form select:invalid {
            border-left-color: salmon;
        }

    .simple-form label {
        color: #9B9B9B;
        padding-left: 1vw;
        font-size: 1.25vh;
    }

    /* Image Styles*/
    .simple-form img {
        margin: 0px auto;
    }

        .simple-form img.Layout {
            height: 95%;
            width: 95%;
        }

    .simple-form img_header {
        width: 80%;
        height: auto
    }

    /* Better style on light background */
    .simple-form imgshadow {
        padding: 0.250em;
        border: 1px solid #777777;
        margin-top: 0.313em;
        -moz-box-shadow: 0px 0px 0.188em #666666;
        -webkit-box-shadow: 0px 0px 0.188em #666666;
        box-shadow: 0px 0px 0.313em #666666;
    }

    .simple-form img_left { /* Image sticks to the left */
        width: auto;
        float: left;
        margin: 0.313em 0.938em 0.313em 0.313em;
    }

    .simple-form img-circle {
        border-radius: 50%;
    }

    .simple-form centerIt {
        vertical-align: middle;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        display: flex;
    }
/* #endregion */

/* #region Objects */
/* Style Button*/
.style_Btn {
    background-color: #56baed;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    -webkit-box-shadow: 0 10px 15px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 15px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 2px 2px 2px 2px;
    margin: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* SideBar Styles*/
.sidebar {
    height: 35vh;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #002b5c 0%, #003b7a 100%);
    color: white;
    padding-top: 0.5rem;
    overflow-y: auto;
}

    .sidebar .nav-link {
        color: #e0e0e0;
        font-weight: 500;
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            border-radius: 8px;
        }

.sidebar-content {
    background-color: #f8f9fa;
    color: #222;
}

.sidebar .sidebar-header {
    text-align: center;
    margin-bottom: 1rem;
}

    .sidebar .sidebar-header img {
        width: 60px;
    }

    .sidebar .sidebar-header h5 {
        font-size: 1vh;
        margin-top: 0.25rem;
    }

/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset] {
    background-color: #56baed;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -o-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
    }

input[type=text], input[type=password] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 2px solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

/* #endregion */

/* #region Boxes */
.shadow_Box {
    text-align: center;
    box-shadow: 0px 0px 0.50em #d9d9d9;
    -moz-border-radius: 0.125em;
    -webkit-border-radius: 0.125em;
    -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
    -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
}

.box_Div {
    text-align: center;
    background-color: ghostwhite;
    border: 0.1vw solid powderblue;
    border-radius: 0.2vw;
    box-shadow: 0px 0px 0.50em #d9d9d9;
    -moz-border-radius: 0.125em;
    -webkit-border-radius: 0.125em;
    -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
    -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
}

.div_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.div_Header {
    /* Content Section */
    text-align: center;
    color: ghostwhite;
    /* Border Section */
    border: 0.1vw solid powderblue;
    padding: 0.5vw;
    margin: auto;
    border-radius: 0.5vw;
    /* Shadow Section */
    box-shadow: 0px 0px 0.50em #d9d9d9;
    -moz-border-radius: 0.125em;
    -webkit-border-radius: 0.125em;
    -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
    -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
}

.div_Panel {
    /* Content Section */
    text-align: center;
    background-color: white;
    overflow: auto;
    /* Border Section */
    border: 0.1vw solid darkkhaki;
    padding: 0.4vw;
    margin: auto;
    border-radius: 0.4vw;
    /* Shadow Section */
    box-shadow: 0px 0px 0.50em #d9d9d9;
    -moz-border-radius: 0.125em;
    -webkit-border-radius: 0.125em;
    -moz-box-shadow: 0px 0px 0.50em #d9d9d9;
    -webkit-box-shadow: 0px 0px 0.50em #d9d9d9
}

div.container4 {
    position: relative
}

    div.container4 p {
        background: yellow;
        position: absolute;
        transform: translate(-50%, -50%)
    }

.centerIt {
    vertical-align: middle;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: block;
}

/* The alert message box */
.failed {
    background-color: #f44336; /* Red */
    color: white;
}

/* The alert message box */
.success {
    background-color: #006600; /* Green */
    color: white;
}

/* Label Alert Options*/
.alertData {
    color: ghostwhite;
    letter-spacing: 0.03em;
}

/* Box Wrapper - Div or Panel*/
.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

/* The close button */
.closebtn {
    color: white;
    float: right;
    cursor: pointer;
    transition: 0.3s;
}

    /* When moving the mouse over the close button */
    .closebtn:hover {
        color: black;
    }

.mod_Label {
    text-align: center
}
/* #endregion */

/* #region Effects */
/* ---------------------- Effects Declarations --------------------- */

/*==================================================
* Effect 1
* ===============================================*/
.effect1 {
    -webkit-box-shadow: 0 0.625em 0.375em -0.375em #777;
    -moz-box-shadow: 0 0.625em 0.375em -0.375em #777;
    box-shadow: 0 0.625em 0.375em -0.375em #777;
}

/*==================================================
* Effect 2
* ===============================================*/
.effect2 {
    position: relative;
}

    .effect2:before, .effect2:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 10.313em;
        left: 0.625em;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 10.313em 0.625em #777;
        -moz-box-shadow: 0 10.313em 0.625em #777;
        box-shadow: 0 10.313em 0.625em #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }

    .effect2:after {
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
        right: 0.625em;
        left: auto;
    }

/*==================================================
* Effect 3
* ===============================================*/
.effect3 {
    position: relative;
}

    .effect3:before {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 10.313em;
        left: 0.625em;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 10.313em 0.625em #777;
        -moz-box-shadow: 0 10.313em 0.625em #777;
        box-shadow: 0 10.313em 0.625em #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }

/*==================================================
* Effect 4
* ===============================================*/
.effect4 {
    position: relative;
}

    .effect4:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 0.938em;
        right: 0.625em;
        left: auto;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 0.938em 0.625em #777;
        -moz-box-shadow: 0 0.938em 0.625em #777;
        box-shadow: 0 0.938em 0.625em #777;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
    }

/*==================================================
* Effect 5
* ===============================================*/
.effect5 {
    position: relative;
}

    .effect5:before, .effect5:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 1.565em;
        left: 0.625em;
        width: 50%;
        top: 80%;
        max-width: 18.75em;
        background: #777;
        -webkit-box-shadow: 0 2.191em 1.25em #777;
        -moz-box-shadow: 0 2.191em 1.25em #777;
        box-shadow: 0 2.191em 1.25em #777;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -o-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }

    .effect5:after {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -o-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
        right: 0.625em;
        left: auto;
    }

/*==================================================
* Effect 6
* ===============================================*/
.effect6 {
    position: relative;
    -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

    .effect6:before, .effect6:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        top: 50%;
        bottom: 0;
        left: 0.625em;
        right: 0.625em;
        -moz-border-radius: 100px / 0.625em;
        border-radius: 100px / 0.625em;
    }

    .effect6:after {
        right: 0.625em;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }

/*==================================================
* Effect 7
* ===============================================*/
.effect7 {
    position: relative;
    -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

    .effect7:before, .effect7:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        top: 0;
        bottom: 0;
        left: 0.625em;
        right: 0.625em;
        -moz-border-radius: 6.25em / 0.625em;
        border-radius: 6.25em / 0.625em;
    }

    .effect7:after {
        right: 0.625em;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }

/*==================================================
* Effect 8
* ===============================================*/
.effect8 {
    position: relative;
    -webkit-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 0.250em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

    .effect8:before, .effect8:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        box-shadow: 0 0 1.25em rgba(0,0,0,0.8);
        top: 0.625em;
        bottom: 0.625em;
        left: 0;
        right: 0;
        -moz-border-radius: 100px / 0.625em;
        border-radius: 100px / 0.625em;
    }

    .effect8:after {
        right: 0.625em;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }

/* ------------------ End of Effects Declarations ------------------ */

/* ------------------ Begin of ANIMATIONS Declarations ------------------ */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

    .fadeIn.first {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .fadeIn.second {
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .fadeIn.third {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }

    .fadeIn.fourth {
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        animation-delay: 1s;
    }

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover {
    color: #0d0d0d;
}

    .underlineHover:hover:after {
        width: 100%;
    }

/* ------------------ End of ANIMATIONS Declarations ------------------ */
/* #endregion */

/* #region Paper Sizes */
/* A4 Portrait View */
.a4-portrait {
    width: 210mm;
    height: 297mm;
    background: white;
    margin: auto;
    padding: 20mm;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* A4 Landscape View */
.a4-landscape {
    width: 297mm;
    height: 210mm;
    background: white;
    margin: auto;
    padding: 20mm;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* Print - handle both */
@media print {
    .a4-portrait {
        box-shadow: none;
    }

    .a4-landscape {
        box-shadow: none;
    }

    @page {
        size: A4 portrait; /* This is global and will affect the full document */
        margin: 20mm;
    }

    .landscape-mode {
        page: landscapePage;
    }
}

/* Define named page setup (for multi-page print targets) */
@page landscapePage {
    size: A4 landscape;
    margin: 20mm;
}

/* #endregion */

/* #region Media Sizes */
@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}
/* #endregion */

.scrollable-content {
    max-height: 50vh; /* or whatever height you want */
    overflow-y: auto; /* enables vertical scroll */
    overflow-x: hidden; /* optional: hides horizontal scroll */
}

/* Make the main viewport split scroll smoothly */
.vh-100-minus-nav {
    min-height: calc(100vh - 0px);
}
/* adjust if you have a fixed navbar height */

.btn-outline-white {
    color: white;
    border-color: white;
}

    .btn-outline-white:hover {
        color: #000;
        background-color: white;
        border-color: white;
    }

:root {
    --imo-green: #1c7c3a; /* primary */
    --imo-green-2: #155f2d; /* darker accent */
}

.payslip-header .brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain
}

.payslip-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 4px solid #e8f1ec
}

    .payslip-brand .brand-title {
        font-weight: 800;
        letter-spacing: .02em
    }

.payslip-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--imo-green);
    color: #fff;
    font-weight: 600;
    padding: .5rem 1rem
}

    .payslip-strip .year-badge {
        background: #fff;
        color: var(--imo-green-2);
        padding: .15rem .6rem;
        border-radius: 999px;
        font-weight: 700
    }

.payslip-card {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: 260px 1fr 140px;
    padding: 1rem
}

    .payslip-card .profile {
        display: flex;
        gap: .75rem;
        align-items: center
    }

        .payslip-card .profile img {
            width: 72px;
            height: 72px;
            border-radius: .5rem;
            object-fit: cover;
            border: 2px solid #e8f1ec
        }

    .payslip-card .info th {
        width: 160px
    }

    .payslip-card .info th, .payslip-card .info td {
        padding: .35rem .5rem;
        vertical-align: top
    }

    .payslip-card .qr {
        display: flex;
        justify-content: flex-start
    }

        .payslip-card .qr .qrbox {
            width: 112px;
            height: 112px;
            border: 1px dashed #cfe6d7;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: .5rem;
            background: #fafdfb
        }

/* #region Resize all Elements */

/* -------------------- Apply to Desktop --------------------- */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    html {
        font-size: 14px;
    }

    body {
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 5vh;
        padding-bottom: 5vh
    }

    .text_padding {
        padding-left: 0.75vw;
        padding-right: 0.75vw;
        padding-top: 0.15vh;
        padding-bottom: 0.15vh
    }

    .container_padding {
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 2.5vh;
        padding-bottom: 2.5vh
    }

    .scroll {
        max-height: 30vh;
        overflow-y: auto;
        padding-bottom: 15px
    }

    .label {
        top: 19vmin;
        left: 46%;
        font-size: 1.25vh;
    }

    .th_text {
        padding: 0.05in;
        font-size: 14px;
    }

    .td_text {
        padding: 0.01in;
        font-size: 12px;
    }

    .style_Link {
        font-size: 0.8vh;
    }

    .qck_Links {
        font-size: 14px;
    }

    a {
        font-size: 0.8vh;
        padding-right: 0.1vh !important;
        padding-left: 0.1vh !important;
    }

    .my_Watermark {
        width: 50vh;
        height: 50vh;
        top: 50%;
        left: 55%;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 0.2fr 0.8fr;
        grid-gap: 2px;
        width: 100%;
    }

    .float-container {
        padding: 4vw;
    }

    .float-child {
        float: left;
        padding: 4vw;
    }

    /* Slideshow container */
    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
    }

    /* Caption text */
    .text {
        font-size: 1.25vh;
        padding: 8px 12px;
        bottom: 8px;
        width: 100%;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        font-size: 12px;
        padding: 8px 12px;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .pay_Naira {
        width: 1vh;
        height: 1vh;
    }

    .input, .btn {
        font-size: 1.25vh;
        min-height: 3.17vh;
        max-height: 4.44vh;
        padding: 0.25vh 0.64vh;
        border-radius: 0.64vh 0.64vh 0.64vh 0.64vh;
        margin: 0.25vh;
    }

    input[type=button], input[type=submit], input[type=reset] {
        padding: 0.64vh 1vh;
        margin: 0.64vh 1.25vh 0.64vh 1.25vh;
        min-width: 85%;
    }

    input[type=text], input[type=password] {
        padding: 0.64vh 1vh;
        margin: 0.64vh 1.25vh 0.64vh 1.25vh;
        min-width: 85%;
    }

    /* Box Wrapper - Div or Panel*/
    .wrapper {
        width: 100%;
        min-height: 100%;
        padding: 2.53vh;
    }

    .closebtn {
        margin-left: 15px;
    }

    /* Style Button*/
    .style_Btn {
        border: none;
        padding: 0.25vh;
        width: 8vw;
    }

    .mod_Label {
        margin: 0px auto;
    }

    /* The alert message box - success */
    .failed {
        padding: 0.64vh;
        margin-bottom: 0.64vh;
        border-radius: 0.64vh;
    }

    /* The alert message box - failed */
    .success {
        padding: 0.64vh;
        margin-bottom: 0.64vh;
        border-radius: 0.64vh;
    }

    div.container4 {
        height: 20.3vh;
    }

        div.container4 p {
            margin: 0;
            top: 50%;
            left: 50%;
            margin-right: -50%;
        }

    .box_Div {
        width: 95%;
        padding: 0.4vw;
        margin: auto;
    }

    #formContent {
        width: 90%;
        max-width: 57vh;
        padding: 0px;
    }

    #formFooter {
        padding: 3.17vh;
    }

    .shadow_Box {
        margin: auto;
        padding-top: 1.27vh;
        padding-bottom: 1.27vh;
    }

    .circular--portrait {
        position: relative;
        width: 10vh;
        height: 10vh;
        overflow: hidden;
        border-radius: 50%;
    }

        .circular--portrait img {
            width: 100%;
            height: auto;
        }

    .circular--landscape {
        display: inline-block;
        position: relative;
        width: 10vh;
        height: 10vh;
        overflow: hidden;
        border-radius: 50%;
    }

        .circular--landscape img {
            width: auto;
            height: 100%;
            margin-left: -50px;
        }

    /* Fading animation */

    /* -------------------- Sizer for IMSG CSS --------------------- */

    .div_About {
        height: 160px;
        width: 95%;
    }

    .div_Government {
        height: 160px;
        padding: 0.2vw;
    }

    .div_Citizens {
        height: 160px;
        width: 95%;
    }

    .div_Instagram {
        max-height: 360px;
        width: 95%;
    }

    .div_Businesses {
        height: 80px;
        padding: 0.4vw;
    }

    .div_Location {
        height: 160px;
        width: 95%;
    }

    .div_Help {
        height: 160px;
        width: 95%;
    }

    .hd_Government {
        min-height: 20px;
        width: 100%;
    }

    .hd_About {
        min-height: 30px;
        width: 95%;
    }

    .hd_Citizens {
        min-height: 30px;
        width: 95%;
    }

    .hd_Instagram {
        min-height: 30px;
        width: 95%;
    }

    .hd_Facebook {
        min-height: 30px;
        width: 95%;
    }

    .div_Facebook {
        height: 220px;
        width: 95%;
    }

    .div_News {
        height: 100px;
        width: 98%;
    }

    .div_Online {
        height: auto;
        padding: 0.4vw;
    }

    .div_Residents {
        height: 80px;
        padding: 0.4vw;
    }

    .div_Services {
        height: 120px;
        padding: 0.1vw;
    }

    .div_Twitter {
        height: 220px;
        width: 95%;
    }

    .hd_Businesses {
        min-height: 20px;
        width: 100%;
    }

    .hd_Location {
        min-height: 30px;
        width: 95%;
    }

    .hd_Help {
        min-height: 30px;
        width: 95%;
    }

    .hd_News {
        min-height: 20px;
        width: 98%;
    }

    .hd_Online {
        min-height: 20px;
        width: 100%;
    }

    .hd_Residents {
        min-height: 20px;
        width: 100%;
    }

    .hd_Services {
        min-height: 20px;
        width: 100%;
    }

    .hd_Twitter {
        min-height: 20px;
        width: 100%;
    }

    .mapouter {
        height: 200px;
        width: 100%;
    }

    .gmap_canvas {
        height: 200px;
        width: 100%;
    }
}

/* #endregion */

/* #region Carousel */
.carousel-description {
    height: 7vh;
    margin-top: 3vh;
    background-color: rgba(0, 0, 0, 0.75); /* 75% opacity black */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.25vh;
}
/* #endregion */

/* #region tabs */
.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #333;
    font-weight: 500;
    border-radius: 0;
}

    .nav-tabs .nav-link:hover {
        color: #0d6efd;
    }

    .nav-tabs .nav-link.active {
        border-bottom: 3px solid #0d6efd;
        color: #0d6efd;
        font-weight: 600;
    }
/* #endregion */

/* #region Drop_Down */
/* Fix dropdowns rendering horizontally */
/* Keep navbar link spacing sane */
.navbar .nav-link {
    padding: .5rem 1rem; /* restore Bootstrap defaults */
}

/* Ensure dropdown items stack and have normal padding */
.dropdown-menu .dropdown-item {
    display: block;
    padding: .25rem 1rem !important;
    white-space: nowrap;
}

.navbar.navbar-dark .nav-link {
    color: #fff;
}

    .navbar.navbar-dark .nav-link:hover,
    .navbar.navbar-dark .nav-link:focus {
        color: #fff;
        opacity: .85;
    }
/* #endregion */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (max-width: 576px) {
    .cart-panel {
        width: 100vw;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* #region Scrollable Content Box */
.content-box {
    width: 100%;
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #f8f9fa;
}
/* #endregion */

/* #region Contact Tabs */

#contactTabs {
    gap: 0.25rem;
}

    #contactTabs .nav-link {
        color: #333;
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid transparent;
        white-space: nowrap;
    }

        #contactTabs .nav-link:hover {
            color: #0d6efd;
            background-color: #f8f9fa;
        }

        #contactTabs .nav-link.active {
            color: #0d6efd;
            font-weight: 600;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
            border-bottom: 3px solid #0d6efd;
        }

/* #endregion */

/* =====================================================
IMSG CITIZENS' FEEDBACK - ACKNOWLEDGEMENT
===================================================== */

.imsg-acknowledgement {
    max-width: 850px;
    margin: 0 auto 1.5rem;
    background: #ffffff;
    border: 1px solid #e4e9e6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
    color: #25352e;
}

/* HEADER */

.imsg-ack-header {
    background: linear-gradient( 135deg, #126a47 0%, #0c4e35 100% );
    color: #ffffff;
    padding: 32px 20px;
}

.imsg-ack-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .6);
    font-size: 2.3rem;
}

.imsg-ack-subtitle {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    opacity: .85;
}

/* BODY */

.imsg-ack-body {
    padding: 32px;
}

.imsg-ack-greeting {
    color: #126a47;
    margin-bottom: 18px;
}

.imsg-ack-message {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #45534c;
}

/* REFERENCE */

.imsg-ack-reference {
    margin: 24px 0;
    padding: 15px 20px;
    border: 1px dashed #b5cfc1;
    border-radius: 10px;
    background: #f3faf6;
    text-align: center;
}

    .imsg-ack-reference span {
        display: block;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 1px;
        color: #647a6d;
        margin-bottom: 5px;
    }

    .imsg-ack-reference strong {
        font-size: 1.15rem;
        color: #126a47;
        overflow-wrap: anywhere;
    }

/* CONTACT PANEL */

.imsg-ack-contact {
    margin-top: 25px;
    padding: 22px;
    background: #f7f9f8;
    border: 1px solid #e6eeea;
    border-radius: 12px;
}

.imsg-ack-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #126a47;
    margin-bottom: 10px;
}

.imsg-ack-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid #e5ebe7;
    border-radius: 9px;
    min-height: 80px;
}

.imsg-ack-contact-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #e5f2ea;
    color: #126a47;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.imsg-ack-contact-item small {
    display: block;
    color: #75837a;
    font-size: .75rem;
    margin-bottom: 3px;
}

/* NEXT STEPS */

.imsg-ack-next {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #eef5fb;
    border-left: 4px solid #4087bd;
    padding: 18px;
    border-radius: 8px;
    margin-top: 24px;
    color: #314b60;
    line-height: 1.7;
}

    .imsg-ack-next > i {
        color: #4087bd;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

/* DATE */

.imsg-ack-date {
    text-align: center;
    font-size: .8rem;
    color: #7a8680;
    margin-top: 25px;
}

/* CLOSING */

.imsg-ack-closing {
    margin-top: 28px;
    padding: 22px 18px;
    text-align: center;
    border-top: 1px solid #e7ece9;
    color: #637168;
}

    .imsg-ack-closing > i {
        display: block;
        font-size: 1.5rem;
        color: #b2c7ba;
        margin-bottom: 8px;
    }

    .imsg-ack-closing p {
        font-style: italic;
        line-height: 1.7;
        margin-bottom: 12px;
    }

    .imsg-ack-closing strong {
        color: #126a47;
        font-size: .9rem;
    }

/* RESPONSIVE */

@media (max-width: 576px) {
    .imsg-ack-body {
        padding: 20px 16px;
    }

    .imsg-ack-header {
        padding: 25px 15px;
    }

    .imsg-ack-contact {
        padding: 15px;
    }
}

/* PRINT */

@media print {
    .imsg-acknowledgement {
        box-shadow: none;
        border: 1px solid #ccc;
        max-width: 100%;
    }

    .imsg-ack-header {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .imsg-ack-body .btn {
        display: none !important;
    }
}

#map {
    height: 600px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.church-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .church-card:hover,
    .church-card:focus-within {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }

    .church-card:focus-within {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    .church-card.active {
        border: 2px solid #0d6efd;
        background-color: #e7f3ff;
    }

.results-container {
    max-height: 600px;
    overflow-y: auto;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

    /* WebKit scrollbar (Chrome, Safari, Edge) */
    .results-container::-webkit-scrollbar {
        width: 8px;
    }

    .results-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .results-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

        .results-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.filter-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.stats-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.guide-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

.header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

.content {
    padding: 40px;
}

.settings-box {
    background: #f8f9fa;
    border-left: 4px solid #28a745;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

    .settings-box h5 {
        color: #28a745;
        margin-bottom: 15px;
    }

.setting-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}

    .setting-item:last-child {
        border-bottom: none;
    }

.setting-label {
    font-weight: 600;
    color: #495057;
}

.setting-value {
    color: #212529;
    font-family: 'Courier New', monospace;
    background: white;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.important-note {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
}

.step-number {
    background: #667eea;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 25px 0 15px 0;
    display: flex;
    align-items: center;
}

.credential-box {
    background: white;
    border: 2px dashed #667eea;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.btn-print {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 20px;
}

    .btn-print:hover {
        background: #218838;
    }



.eshop-card {
    height: 18vh;
    transition: all 0.3s ease;
}

    .eshop-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
        transform: translateY(-2px);
    }

.eshop-card-img {
    height: 10vh;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 0.5rem;
    cursor: zoom-in;
}

    .eshop-card-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

.eshop-card:hover .eshop-card-img img {
    transform: scale(1.1);
}

/* Image Zoom Viewer */
.image-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}

.image-zoom-container {
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: zoomIn 0.3s ease;
}

    .image-zoom-container img {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
        display: block;
    }

.image-zoom-title {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
    color: #495057;
    font-weight: 600;
}

.zoom-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

    .zoom-close-btn:hover {
        transform: scale(1.1);
        background: #f8f9fa;
    }



.eshop-card-body {
    height: 8vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.eshop-header {
    background: linear-gradient(to right, #1976d2, #1565c0);
    color: white;
    border-bottom: 3px solid #0d47a1;
}

.eshop-footer {
    background: linear-gradient(to right, #1565c0, #0d47a1);
    color: white;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    font-size: 0.7rem;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-btn {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: white;
    border-radius: 50%;
    padding: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

    .favorite-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    }

.featured-badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    background: #1976d2;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.zoom-indicator {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.eshop-card-img:hover .zoom-indicator {
    opacity: 1;
}

.product-title {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1976d2;
}

.add-cart-btn {
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

/* Shopping Cart Panel */
.cart-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

.cart-header {
    background: linear-gradient(to right, #1976d2, #1565c0);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #0d47a1;
}

.cart-close-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s;
}

    .cart-close-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s;
}

    .cart-item:hover {
        background: #f5f5f5;
    }

.cart-item-image {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .cart-item-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #212529;
    line-height: 1.3;
}

.cart-item-price {
    color: #1976d2;
    font-weight: 700;
    font-size: 1rem;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-qty-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .cart-qty-btn:hover:not(:disabled) {
        background: #1976d2;
        color: white;
        border-color: #1976d2;
    }

    .cart-qty-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.cart-qty {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
}

.cart-remove-btn {
    background: transparent;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.2s;
}

    .cart-remove-btn:hover {
        background: #fee;
    }

.cart-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.cart-empty-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.cart-footer {
    border-top: 2px solid #e0e0e0;
    padding: 1.5rem;
    background: #f8f9fa;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.cart-total-label {
    font-weight: 600;
    color: #495057;
}

.cart-total-amount {
    font-weight: 700;
    color: #1976d2;
    font-size: 1.5rem;
}

.cart-checkout-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(to right, #1976d2, #1565c0);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

    .cart-checkout-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
    }

    .cart-checkout-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }



.eshop-card {
    height: 18vh;
    transition: all 0.3s ease;
}

    .eshop-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
        transform: translateY(-2px);
    }

.eshop-card-img {
    height: 10vh;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 0.5rem;
    cursor: zoom-in;
}

    .eshop-card-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

.eshop-card:hover .eshop-card-img img {
    transform: scale(1.1);
}

/* Image Zoom Viewer */
.image-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}

.image-zoom-container {
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: zoomIn 0.3s ease;
}

    .image-zoom-container img {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
        display: block;
    }

.image-zoom-title {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
    color: #495057;
    font-weight: 600;
}

.zoom-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

    .zoom-close-btn:hover {
        transform: scale(1.1);
        background: #f8f9fa;
    }



.eshop-card-body {
    height: 8vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.eshop-header {
    background: linear-gradient(to right, #1976d2, #1565c0);
    color: white;
    border-bottom: 3px solid #0d47a1;
}

.eshop-footer {
    background: linear-gradient(to right, #1565c0, #0d47a1);
    color: white;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    font-size: 0.7rem;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-btn {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: white;
    border-radius: 50%;
    padding: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

    .favorite-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    }

.featured-badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    background: #1976d2;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.zoom-indicator {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.eshop-card-img:hover .zoom-indicator {
    opacity: 1;
}

.product-title {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1976d2;
}

.add-cart-btn {
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

/* BEGIN IMSG GOVERNOR CINEMATIC PAGE — append to RCL wwwroot/css/imsg.css */
#imsg-governor {
    --gov-navy: #09172a;
    --gov-gold: #c6a15b;
    --gov-ivory: #f6f3eb;
    font-family: inherit;
    color: #1c2b3a;
    isolation: isolate
}

    #imsg-governor * {
        box-sizing: border-box
    }

    #imsg-governor .imsg-gov-nav {
        background: #10233b;
        color: white;
        position: relative;
        z-index: 2
    }

    #imsg-governor .imsg-gov-nav-inner {
        max-width: 1320px;
        margin: auto;
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem
    }

    #imsg-governor .imsg-gov-nav strong {
        font-size: .8rem;
        letter-spacing: .16em;
        color: #e0c48b
    }

    #imsg-governor .imsg-gov-menu {
        display: flex;
        gap: 1.2rem;
        flex-wrap: wrap
    }

        #imsg-governor .imsg-gov-menu a {
            color: #f7f6f2;
            text-decoration: none;
            font-size: .9rem;
            border-bottom: 2px solid transparent;
            padding: .35rem 0
        }

            #imsg-governor .imsg-gov-menu a:hover, #imsg-governor .imsg-gov-menu a[aria-current="page"] {
                color: #e0c48b;
                border-color: #c6a15b
            }

    #imsg-governor .imsg-gov-menu-toggle {
        display: none;
        background: transparent;
        border: 1px solid #bba572;
        color: white;
        padding: .5rem .8rem
    }

    #imsg-governor .imsg-gov-panel[hidden] {
        display: none !important
    }

    /* Two equally sized panes; photograph occupies its entire pane. */
    #imsg-governor .imsg-gov-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        min-height: 700px;
        position: relative;
        overflow: hidden;
        background: #09172a;
        color: #fff;
    }

    #imsg-governor .imsg-gov-hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: clamp(2rem, 5vw, 5.625rem);
        background: linear-gradient(120deg, #09172a 0%, #152d49 100%);
    }

    #imsg-governor .imsg-gov-eyebrow {
        color: #c6a15b;
        font-size: .75rem;
        letter-spacing: .19em;
        text-transform: uppercase;
        font-weight: 700
    }

    #imsg-governor .imsg-gov-hero h1 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3.25rem, 5.5vw, 7rem);
        font-weight: 400;
        line-height: 1.02;
        letter-spacing: -.045em;
        margin: 1.5rem 0 1.875rem;
        color: #fff;
    }

        #imsg-governor .imsg-gov-hero h1 em {
            color: #d8b879;
            font-weight: 400;
        }

    #imsg-governor .imsg-gov-lead {
        font-size: clamp(1.05rem, 1.6vw, 1.45rem);
        line-height: 1.5;
        margin-bottom: .75rem;
    }

    #imsg-governor .imsg-gov-hero-copy > p:not(.imsg-gov-eyebrow) {
        max-width: 560px;
    }

    #imsg-governor .imsg-gov-description {
        font-size: .95rem;
        line-height: 1.8;
        color: #d9e0e8;
    }

    #imsg-governor .imsg-gov-hero-visual {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 700px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #152d49;
    }

        #imsg-governor .imsg-gov-hero-visual img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            object-fit: cover;
            object-position: center center;
            filter: none;
        }

    #imsg-governor .imsg-gov-photo-note {
        display: none;
    }

    #imsg-governor .imsg-gov-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 30px;
    }

    #imsg-governor .imsg-gov-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .85rem 1.4rem;
        border: 1px solid #c6a15b;
        text-decoration: none;
        font-weight: 600;
        transition: transform .2s ease,background-color .2s ease
    }

        #imsg-governor .imsg-gov-btn:hover {
            transform: translateY(-2px)
        }

    #imsg-governor .imsg-gov-btn-gold {
        background: #c6a15b;
        color: #09172a
    }

    #imsg-governor .imsg-gov-btn-outline {
        color: #f9f6ee;
        background: transparent
    }

    #imsg-governor .imsg-gov-editorial {
        padding: clamp(3rem,7vw,7rem);
        background: #f6f3eb;
        min-height: 430px
    }

        #imsg-governor .imsg-gov-editorial h1, #imsg-governor .imsg-gov-editorial h2, #imsg-governor .imsg-gov-footer h2 {
            font-family: Georgia,serif;
            font-weight: 400
        }

        #imsg-governor .imsg-gov-editorial h1 {
            font-size: clamp(3rem,6vw,6rem);
            color: #142e4b
        }

        #imsg-governor .imsg-gov-editorial h2 {
            font-size: clamp(1.6rem,3vw,2.5rem)
        }

    #imsg-governor .imsg-gov-content-card {
        background: white;
        padding: 2rem;
        margin-top: 2rem;
        border-left: 4px solid #c6a15b;
        max-width: 850px;
        box-shadow: 0 12px 35px #09172a12
    }

    #imsg-governor .imsg-gov-disclaimer {
        color: #687481;
        font-size: .8rem;
        margin-top: 2rem
    }

    #imsg-governor .imsg-gov-footer {
        background: #09172a;
        color: white;
        padding: 3rem clamp(2rem,6vw,6rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem
    }

        #imsg-governor .imsg-gov-footer h2 {
            font-size: 2.5rem
        }

@media(max-width:900px) {
    #imsg-governor .imsg-gov-nav-inner {
        flex-wrap: wrap;
        padding: 1rem
    }

    #imsg-governor .imsg-gov-menu-toggle {
        display: block
    }

    #imsg-governor .imsg-gov-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: .5rem
    }

        #imsg-governor .imsg-gov-menu.is-open {
            display: flex
        }

    #imsg-governor .imsg-gov-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    #imsg-governor .imsg-gov-hero-copy {
        padding: 55px 30px;
    }

    #imsg-governor .imsg-gov-hero h1 {
        font-size: clamp(3.5rem, 10vw, 5.5rem);
    }

    #imsg-governor .imsg-gov-hero-visual {
        height: 520px;
        min-height: 0;
    }

    #imsg-governor .imsg-gov-footer {
        flex-direction: column;
        align-items: flex-start
    }
}


@media (max-width: 480px) {
    #imsg-governor .imsg-gov-hero-copy {
        padding: 40px 22px;
    }

    #imsg-governor .imsg-gov-hero-visual {
        height: 420px;
    }

    #imsg-governor .imsg-gov-actions {
        gap: 10px;
    }
}

@media(prefers-reduced-motion:reduce) {
    #imsg-governor .imsg-gov-btn {
        transition: none
    }

        #imsg-governor .imsg-gov-btn:hover {
            transform: none
        }
}
/* END IMSG GOVERNOR CINEMATIC PAGE */

.info-card {
    min-height: 20vh;
    background-color: darkslategray;
}

    .info-card h6 {
        background-color: #25383C;
        color: white;
        text-align: center;
        padding: 0.3rem;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .info-card a {
        display: block;
        color: white;
        text-decoration: none;
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }

        .info-card a:hover {
            text-decoration: underline;
        }

/* BEGIN IMSG DEPUTY DEPUTY GOVERNOR CINEMATIC PAGE — append to RCL wwwroot/css/imsg.css */
#imsg-deputy-governor {
    --gov-navy: #09172a;
    --gov-gold: #c6a15b;
    --gov-ivory: #f6f3eb;
    font-family: inherit;
    color: #1c2b3a;
    isolation: isolate
}

    #imsg-deputy-governor * {
        box-sizing: border-box
    }

    #imsg-deputy-governor .imsg-dgov-nav {
        background: #10233b;
        color: white;
        position: relative;
        z-index: 2
    }

    #imsg-deputy-governor .imsg-dgov-nav-inner {
        max-width: 1320px;
        margin: auto;
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem
    }

    #imsg-deputy-governor .imsg-dgov-nav strong {
        font-size: .8rem;
        letter-spacing: .16em;
        color: #e0c48b
    }

    #imsg-deputy-governor .imsg-dgov-menu {
        display: flex;
        gap: 1.2rem;
        flex-wrap: wrap
    }

        #imsg-deputy-governor .imsg-dgov-menu a {
            color: #f7f6f2;
            text-decoration: none;
            font-size: .9rem;
            border-bottom: 2px solid transparent;
            padding: .35rem 0
        }

            #imsg-deputy-governor .imsg-dgov-menu a:hover, #imsg-deputy-governor .imsg-dgov-menu a[aria-current="page"] {
                color: #e0c48b;
                border-color: #c6a15b
            }

    #imsg-deputy-governor .imsg-dgov-menu-toggle {
        display: none;
        background: transparent;
        border: 1px solid #bba572;
        color: white;
        padding: .5rem .8rem
    }

    #imsg-deputy-governor .imsg-dgov-panel[hidden] {
        display: none !important
    }

    #imsg-deputy-governor .imsg-dgov-hero {
        background: radial-gradient(ellipse at 80% 30%,#244365 0%,#09172a 62%);
        color: white;
        min-height: 600px;
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        align-items: center;
        position: relative;
        overflow: hidden
    }

    #imsg-deputy-governor .imsg-dgov-hero-copy {
        padding: clamp(2rem,6vw,7rem);
        position: relative;
        z-index: 1
    }

    #imsg-deputy-governor .imsg-dgov-eyebrow {
        color: #c6a15b;
        font-size: .75rem;
        letter-spacing: .19em;
        text-transform: uppercase;
        font-weight: 700
    }

    #imsg-deputy-governor .imsg-dgov-hero h1 {
        font-family: Georgia,serif;
        font-size: clamp(3.6rem,7vw,8rem);
        line-height: .99;
        letter-spacing: -.045em;
        margin: 1.5rem 0
    }

        #imsg-deputy-governor .imsg-dgov-hero h1 em {
            color: #d8b879;
            font-weight: 400
        }

    #imsg-deputy-governor .imsg-dgov-lead {
        font-size: clamp(1.15rem,2vw,1.65rem);
        line-height: 1.5
    }

    #imsg-deputy-governor .imsg-dgov-hero-copy > p:not(.imsg-dgov-eyebrow) {
        max-width: 560px
    }

    #imsg-deputy-governor .imsg-dgov-hero-visual {
        min-height: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem
    }

        #imsg-deputy-governor .imsg-dgov-hero-visual img {
            width: min(80%,420px);
            max-height: 460px;
            object-fit: contain;
            filter: drop-shadow(0 25px 50px #0005)
        }

    #imsg-deputy-governor .imsg-dgov-photo-note {
        max-width: 350px;
        text-align: center;
        font-size: .75rem;
        color: #cad2db
    }

    #imsg-deputy-governor .imsg-dgov-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 2rem
    }

    #imsg-deputy-governor .imsg-dgov-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .85rem 1.4rem;
        border: 1px solid #c6a15b;
        text-decoration: none;
        font-weight: 600;
        transition: transform .2s ease,background-color .2s ease
    }

        #imsg-deputy-governor .imsg-dgov-btn:hover {
            transform: translateY(-2px)
        }

    #imsg-deputy-governor .imsg-dgov-btn-gold {
        background: #c6a15b;
        color: #09172a
    }

    #imsg-deputy-governor .imsg-dgov-btn-outline {
        color: #f9f6ee;
        background: transparent
    }

    #imsg-deputy-governor .imsg-dgov-editorial {
        padding: clamp(3rem,7vw,7rem);
        background: #f6f3eb;
        min-height: 430px
    }

        #imsg-deputy-governor .imsg-dgov-editorial h1, #imsg-deputy-governor .imsg-dgov-editorial h2, #imsg-deputy-governor .imsg-dgov-footer h2 {
            font-family: Georgia,serif;
            font-weight: 400
        }

        #imsg-deputy-governor .imsg-dgov-editorial h1 {
            font-size: clamp(3rem,6vw,6rem);
            color: #142e4b
        }

        #imsg-deputy-governor .imsg-dgov-editorial h2 {
            font-size: clamp(1.6rem,3vw,2.5rem)
        }

    #imsg-deputy-governor .imsg-dgov-content-card {
        background: white;
        padding: 2rem;
        margin-top: 2rem;
        border-left: 4px solid #c6a15b;
        max-width: 850px;
        box-shadow: 0 12px 35px #09172a12
    }

    #imsg-deputy-governor .imsg-dgov-disclaimer {
        color: #687481;
        font-size: .8rem;
        margin-top: 2rem
    }

    #imsg-deputy-governor .imsg-dgov-footer {
        background: #09172a;
        color: white;
        padding: 3rem clamp(2rem,6vw,6rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem
    }

        #imsg-deputy-governor .imsg-dgov-footer h2 {
            font-size: 2.5rem
        }

@media(max-width:900px) {
    #imsg-deputy-governor .imsg-dgov-nav-inner {
        flex-wrap: wrap;
        padding: 1rem
    }

    #imsg-deputy-governor .imsg-dgov-menu-toggle {
        display: block
    }

    #imsg-deputy-governor .imsg-dgov-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: .5rem
    }

        #imsg-deputy-governor .imsg-dgov-menu.is-open {
            display: flex
        }

    #imsg-deputy-governor .imsg-dgov-hero {
        grid-template-columns: 1fr
    }

    #imsg-deputy-governor .imsg-dgov-hero-copy {
        padding: 3rem 1.5rem 1rem
    }

    #imsg-deputy-governor .imsg-dgov-hero-visual {
        min-height: 300px
    }

    #imsg-deputy-governor .imsg-dgov-footer {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(prefers-reduced-motion:reduce) {
    #imsg-deputy-governor .imsg-dgov-btn {
        transition: none
    }

        #imsg-deputy-governor .imsg-dgov-btn:hover {
            transform: none
        }
}
/* END IMSG DEPUTY DEPUTY GOVERNOR CINEMATIC PAGE */

/* ============================================================
   IMSG DEPUTY GOVERNOR - CINEMATIC SPLIT-SCREEN HERO
   ============================================================ */

/* TWO EXACTLY EQUAL PANES */

#imsg-deputy-governor .imsg-dgov-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-height: 700px;
    background: #09172a;
    overflow: hidden;
    position: relative;
    align-items: stretch;
}

/* ============================================================
   PANE A - TEXT CONTENT
   ============================================================ */

#imsg-deputy-governor .imsg-dgov-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(40px, 5vw, 90px);
    background: linear-gradient( 120deg, #09172a 0%, #152d49 100% );
    color: #ffffff;
}

#imsg-deputy-governor .imsg-dgov-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.5rem, 6vw, 7rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 400;
    margin: 25px 0 30px;
    color: #ffffff;
}

    #imsg-deputy-governor .imsg-dgov-hero h1 em {
        color: #d8b879;
        font-weight: 400;
    }

#imsg-deputy-governor .imsg-dgov-hero-copy .imsg-dgov-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
    line-height: 1.5;
    margin-bottom: 12px;
}

#imsg-deputy-governor .imsg-dgov-description {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #d9e0e8;
    max-width: 540px;
}

#imsg-deputy-governor .imsg-dgov-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* ============================================================
   PANE B - FULL-BLEED GOVERNOR PORTRAIT
   ============================================================ */

#imsg-deputy-governor .imsg-dgov-hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 700px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #152d49;
}

    #imsg-deputy-governor .imsg-dgov-hero-visual img {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: center center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        filter: none;
    }

/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 900px) {

    #imsg-deputy-governor .imsg-dgov-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    #imsg-deputy-governor .imsg-dgov-hero-copy {
        padding: 55px 30px;
    }

    #imsg-deputy-governor .imsg-dgov-hero h1 {
        font-size: clamp(3.5rem, 10vw, 5.5rem);
    }

    #imsg-deputy-governor .imsg-dgov-hero-visual {
        height: 520px;
        min-height: 0;
    }
}

@media (max-width: 480px) {

    #imsg-deputy-governor .imsg-dgov-hero-copy {
        padding: 40px 22px;
    }

    #imsg-deputy-governor .imsg-dgov-hero-visual {
        height: 420px;
    }

    #imsg-deputy-governor .imsg-dgov-actions {
        gap: 10px;
    }
}


/* Deputy Governor portrait placeholder; remove when an approved image is supplied. */
#imsg-deputy-governor .imsg-dgov-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    padding: 2rem;
    background: linear-gradient(145deg, #274564, #10233b);
    color: #e0c48b;
    text-align: center;
    letter-spacing: .08em;
}