#submitButton {
    padding: 14px ;
    border: none ;
    font-family: 'Nunito', sans-serif ;
    font-size: 16px ;
    padding: 16px ;
}



.vs-banner h2{
    font-family: 'ProzaDisplayW03-ExtraBold' !important;
    font-style: normal !important;
    font-weight: 800 !important;
    font-size: 60px !important;
    line-height: 69px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: -0.01em !important;
}

.vs-banner p{
    font-family: Nunito !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 26px !important;
    line-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.005em !important;
    margin-bottom: 16px !important;
}

.vs-banner a, .vs-banner input[type=submit]{
    font-size: 16px  !important;
}
.vs-banner a:first-child{
    margin-right: 16px !important;
}

.vs-banner{
    min-height: 464px !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    display: flex !important;
    align-items: center !important;
}
.vs-banner > div{
    padding: 64px !important;
    width: 50% !important;
}

.vs-banner.bg-black, .vs-banner .bg-black{ background-color: #000000 !important; }
.vs-banner.bg-white, .vs-banner .bg-white{ background-color: #FFFFFF !important; }
.vs-banner.bg-red, .vs-banner .bg-red{  background-color: #AF231C !important; }
.vs-banner.bg-ltred, .vs-banner .bg-ltred{  background-color: #E9BEB0 !important; }
.vs-banner.bg-green, .vs-banner .bg-green{ background-color: #005844 !important; }
.vs-banner.bg-ltgreen, .vs-banner .bg-ltgreen{ background-color: #BFCEC2 !important; }
.vs-banner.bg-blue, .vs-banner .bg-blue{ background-color: #3A445C !important; }
.vs-banner.bg-ltblue, .vs-banner .bg-ltblue{ background-color: #BFCED6 !important; }
.vs-banner.bg-ltblue-border, .vs-banner .bg-ltblue-border { background-color: none !important; border: 1px solid #BFCED6 !important; }

.vs-banner a.button.bg-blue:hover{ background-color: #252C3B !important; }
.vs-banner a.button.bg-red:hover{ background-color: #841A15 !important; }
.vs-banner a.button.bg-green:hover{ background-color: #003D2F !important; }
.vs-banner a.button.bg-ltblue-border:hover{ background-color: #3A445C !important; color: #FFF  !important;}

.vs-banner a.button.bg-ltblue:hover,
.vs-banner a.button.bg-ltred:hover,
.vs-banner button.bg-ltred:hover,
.vs-banner a.button.bg-ltgreen:hover{ background-color: #FFF !important; }

.vs-banner .copy-red,.vs-banner.copy-red { color: #AF231C !important;  }
.vs-banner .copy-ltred, .vs-banner.copy-ltred{ color: #E9BEB0 !important; }
.vs-banner .copy-green, .vs-banner.copy-green{ color: #005844 !important; }
.vs-banner .copy-ltgreen, .vs-banner.copy-ltgreen{ color: #BFCEC2 !important; }
.vs-banner .copy-blue, .vs-banner.copy-blue{ color: #3A445C !important; }
.vs-banner .copy-ltblue, .vs-banner.copy-ltblue{ color: #BFCED6 !important; }


.vs-banner a.button, .vs-banner button.bg-ltred {
    padding: 16px 25px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 18px !important;
}

.vs-banner a.button::after, .vs-banner button.bg-ltred::after {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    margin-left:8px !important;
}

.vs-banner .icon-egg::after{
    content: url('laf/icon-egg.svg');
}
.vs-banner .icon-graph::after{
    content: url('laf/icon-graph.svg');
}
.vs-banner .icon-chart::after{
    content: url('laf/icon-chart.svg');
}
.vs-banner .icon-complete-form::after{
    content: url('laf/icon-complete-form.svg');
}
.vs-banner .icon-arrow::after{
    content: url('laf/icon-arrow-right.svg');
}
.vs-banner .icon-arrow-red::after{
    content: url('laf/icon-arrow-red.svg');
}
.vs-banner .icon-arrow-dark::after{
    content: url('laf/icon-arrow-right-dark.svg');
}

/* FORMS */
.vs-banner.bg-red ::-webkit-input-placeholder { /* Edge */
    color: #AF231C !important;
}
.vs-banner.bg-red :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #AF231C !important;
}
.vs-banner.bg-red ::placeholder {
    color: #AF231C !important;
}
.vs-banner.bg-red input:focus{ outline: none; }
.vs-banner.bg-red input, .vs-banner button.bg-ltred{
    padding: 14px !important;
    border: none !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 16px !important;
}
.vs-banner button.bg-ltred {
    padding: 16px !important;
}
.vs-banner .genericButton {
    color:#3A445C !important;
    background-color:#BFCED6 !important;
}
.vs-banner-smalltext {
    font-family: Nunito;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.005em;
}


/*full web browser only */
@media screen and (min-width: 1025px) {
    .vs-banner-image-STP {
        background-image: url('gwt/laf/award-final.png');
    }
    .vs-banner-image-SW {
        background-image: url('https://www.visionsuper.com.au/wp-content/uploads/sg-final-4.jpg');
    }
}


/*mobile tabled */
@media  screen and (max-width: 1024px) {
    .vs-banner{
        min-height: auto !important;
    }
    .vs-banner > div{
        padding: 32px !important;
        width: 100% !important;
    }
    .vs-banner-image{
        padding-top: 380px !important;
        background-size: auto 360px !important;
    }

    #submitButton:disabled {
        background-color:#000000 !important;
    }

}

/*mobile*/
@media  screen and (max-width: 425px) {
    .vs-banner .bg-red input > div{
        padding: 24px !important;
    }
    .vs-banner a.button, .vs-banner input {
        margin-bottom: 16px !important;
    }
    .vs-banner-image{
        padding-top: 280px !important;
        background-size: auto 260px !important;
        padding-bottom: 16px !important;
    }
    .vs-banner h2{
        font-size: 40px !important;
        line-height: 48px !important;
    }
    .hide-mobile { display: none; }
    .vs-banner p{
        font-size: 18px !important;
        line-height: 24px !important;
    }
}



#headings-white {
	color:#ffffff !important;
}

#text-white {
	color:#ffffff !important;
	font-weight:normal !important;
}


#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.emailEmployer.customTaskComplete.task > ul > li > div.blockUI.blockOverlay.blockOverlay {
    z-index: 994 !important;
}

#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.beneficiaries.customTaskComplete.task > ul > li > div.blockUI.blockOverlay.blockOverlay {
    z-index: 994 !important;
}


#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.contributions.customTaskComplete.task > ul > li > div.blockUI.blockOverlay.blockOverlay {
    z-index: 994 !important;
}


#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.rolloverSuperStream.customTaskComplete.task > ul > li > div.blockUI.blockOverlay.blockOverlay {
    z-index: 994 !important;
}



#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.emailEmployer.customTaskComplete.task > ul > li > div.blockUI.blockMsg.blockElement.blockElement {
    z-index: 995 !important;
}

#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.beneficiaries.customTaskComplete.task > ul > li > div.blockUI.blockMsg.blockElement.blockElement {
    z-index: 995 !important;
}

#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.contributions.customTaskComplete.task > ul > li > div.blockUI.blockMsg.blockElement.blockElement {
    z-index: 995 !important;
}

#page > div > div.contentPanel > div.canvasContentList.clearfix > div.canvasContentList.clearfix.content.narrow > div:nth-child(2) > div >

div.canvasContentList.rolloverSuperStream.customTaskComplete.task > ul > li > div.blockUI.blockMsg.blockElement.blockElement {
    z-index: 995 !important;
}

/* Responsive Background Image Setup */
.vs-banner.has-bg-image {
    /* Replace the URL below with your actual image path */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('laf/beach-lady.png') !important; 
    

    /* These three lines are the magic for responsive background images */
    background-size: cover !important; 
    background-position: center center !important; 
    background-repeat: no-repeat !important;
    
    /* Fallback color while the image loads */
    background-color: #3A445C !important; 
    
    /* Inherited from your original setup */
    min-height: 464px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ensure the inner text container maintains your desired padding and width */
.vs-banner.has-bg-image > div {
    padding: 64px !important;
    width: 50% !important;
    z-index: 1 !important;
}

/* --- Media Queries --- */

/* Tablet */
@media screen and (max-width: 1024px) {
    .vs-banner.has-bg-image {
        min-height: auto !important;
        /* Optional: adjust background position for tablet if needed */
        /* background-position: left center !important; */
    }
    .vs-banner.has-bg-image > div {
        padding: 32px !important;
        width: 100% !important;
    }
}

/* Mobile */
@media screen and (max-width: 425px) {
    .vs-banner.has-bg-image > div {
        padding: 24px !important;
    }
    .vs-banner.has-bg-image {
        min-height: 350px !important; /* Gives the banner breathing room on small screens */
    }
}