html body {
    font-family: "Open Sans", sans-serif;
}

body a {
    outline: none;
}

body button {
    border-radius: 0;
}

body .small_container {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 30px 0;
}

body .container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

body .container-fluid {
    padding: 0;
}

body h1,
body h3,
body h4,
body h5,
body h6 {
    color: #444;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 30px 0;
    font-family: 'Raleway', sans-serif;
}

body h2 {
    color: #ffffff;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 30px 0;
    font-family: 'Raleway', sans-serif;
}

body h1 {
    color: #000;
    font-size: 36px;
}

#contact {
    color: #000;
}

/*-----------------------*/
/*----- H E A D E R -----*/
/*-----------------------*/
#header-wrap {
    padding: 0 30px;
}

#logo {
    position: relative;
    float: left;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    line-height: 100%;
    margin-right: 40px;
}

#primary-menu {
    position: relative;
    float: right;
    height: 100px;
    transition: height .4s ease, opacity .3s ease;
}

#primary-menu ul {
    list-style: none;
    height: 100px;
    margin: 0;
    transition: height 0.4s ease;
}

.sticky #logo img,
.sticky #primary-menu,
.sticky #primary-menu ul,
.sticky #primary-menu .social_media {
    height: 60px;
}

#primary-menu>ul {
    float: left;
}

#primary-menu ul li:first-child {
    margin-left: 0;
}

#primary-menu ul li {
    position: relative;
    float: left;
    top: 50%;
    transform: translateY(-50%);
}

#primary-menu ul li:hover a {
    text-decoration: none;
    color: #1d2a78;
}

#primary-menu ul li a {
    text-transform: capitalize;
    color: #717171;
    font-size: 15px;
    font-weight: 400;
    display: block;
    height: 100px;
    line-height: 100px;
    padding: 0 15px;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
    transition: height .4s ease, line-height .4s ease, margin .4s ease, padding .4s ease;
}

.enquire .form-control {
    padding: 8px 14px;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
}

.social_media {
    float: right;
    height: 100px;
    position: relative;
    margin-left: 20px;
    transition: height 0.4s ease;
}

.social_media .social_icon {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    margin: 0 3px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
    color: #fff;
    margin-right: 5px;
    background-color:#1c2c7c;
}

nav.navbar {
    display: none;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: inset;
    height: 60px;
    z-index: 199;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#header-wrap.sticky,
#header-wrap.sticky #logo a img,
#header-wrap.sticky #primary-menu ul,
#header-wrap.sticky #primary-menu .social_media {
    height: 60px;
}



/*------------------------*/
/*----- C O N T A I N ----*/
/*------------------------*/
.carousel .carousel-inner {
    padding-left: 0;
    margin-bottom: 0;
}

.carousel .carousel-inner .carousel-item img {
    width: 100%;
}

.blue_bg {
    background: #1d2a78;
    color: #fff;
    padding: 10px 30px 0;
}

.five_components {
}

.five_components>* {
    flex: 1;
}

.academy_grid {
    float: left;
    width: 20%;
    margin-bottom: 30px;
}

.academy_grid p {
    font-size: 14px;
    line-height: 1.8;
}

.academy_grid .academy_left {
    float: left;
    width: 75px;
    margin-right: 15px;
    text-align: center;
    height: 75px;
    position: relative;
}

.academy_grid .academy_left img {
    max-width: 75px;
    max-height: 75px;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.academy_grid .academy_right {
    float: left;
    width: calc(100% - 90px);
    height: 75px;
    position: relative;
}

.academy_grid .academy_right p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #111667;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.8;
}

ul.tab-nav:not(.tab-nav-lg) {
    border: none;
    text-align: center;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
}

ul.tab-nav:not(.tab-nav-lg) li:first-child {
    margin: 0;
    border: none;
}

ul.tab-nav:not(.tab-nav-lg) li {
    height: auto;
    border: none;
    display: inline-grid;
    float: none;
    width: 224px;
}

ul.tab-nav:not(.tab-nav-lg) li a {
    display: block;
    height: auto;
    background-color: #f8fafc;
    color: #444444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a {
    top: 0;
}

.noticeDiv_wrapper {
    margin: 10px 0;
}

/* Programme sharing keeps feedback non-blocking with one Bootstrap toast. */
.programme-share-button {
    color: var(--family-accent, #1d2a78);
    background-color: #fff3db;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.programme-share-button:hover,
.programme-share-button:focus {
    color: var(--family-accent, #1d2a78);
    background-color: #fff;
}

.programme-share-button:focus-visible {
    outline: 3px solid var(--family-accent, #1d2a78);
    outline-offset: 3px;
}

.programme-share-notice {
    position: fixed;
    z-index: 1090;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
    width: 24rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.programme-share-notice .toast {
    max-width: none;
    margin-bottom: .75rem;
    padding: .875rem 1rem;
    color: #212529;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-left: .25rem solid #17a2b8;
    border-radius: .25rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
    font-size: 14px;
    pointer-events: auto;
}

.programme-share-notice .programme-share-success {
    border-left-color: #28a745;
}

.programme-share-notice .programme-share-error {
    border-left-color: #dc3545;
}

.programme-share-notice .d-flex {
    justify-content: space-between;
    gap: 1rem;
}

.programme-share-toast-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.programme-share-toast-title {
    margin-bottom: .125rem;
    font-weight: 600;
}

.programme-share-toast-description {
    color: #495057;
    white-space: pre-line;
}

.programme-share-dismiss {
    flex: 0 0 auto;
    margin: -.25rem -.375rem 0 0;
    padding: 0 .375rem;
    color: #6c757d;
    background: transparent;
    border: 0;
    border-radius: .2rem;
    font-size: 1.5rem;
    line-height: 1.25;
    cursor: pointer;
}

.programme-share-dismiss:hover {
    color: #343a40;
}

.programme-share-dismiss:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .programme-share-notice {
        right: calc(.5rem + env(safe-area-inset-right, 0px));
        left: calc(.5rem + env(safe-area-inset-left, 0px));
        width: auto;
        max-width: none;
    }
}

/* Programme selection */
.programme-choice-junior,
.programme-junior {
    --family-accent: #42671d;
    --family-tint: #edf4e5;
}

.programme-choice-kids,
.programme-kids {
    --family-accent: #9b275e;
    --family-tint: #fbeef4;
}

.programme-choice-jsp,
.programme-jsp {
    --family-accent: #145a94;
    --family-tint: #edf4fb;
    --programme-heading-colour: #FF9900;
}

.programme-choice-wholebrain,
.programme-wholebrain {
    --family-accent: #775419;
    --family-tint: #f8f0e4;
}

.programme-card,
.programme-picker-toggle,
.programme-picker-row {
    --choice-accent: var(--family-accent);
    --choice-tint: var(--family-tint);
}

.programme-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.programme-cards li {
    min-width: 0;
}

.programme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 164px;
    padding: 14px 12px;
    border: 2px solid #dce2ea;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.programme-card img {
    width: 194px;
    height: 65px;
    max-width: 100%;
    object-fit: contain;
}

.programme-card:hover,
.programme-card[aria-current="true"] {
    background: var(--choice-tint);
    border-color: var(--choice-accent);
    text-decoration: none;
}

.programme-choice-name {
    color: #1d2a78;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.programme-choice-age {
    display: block;
    color: #465164;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.programme-picker-mobile .programme-picker-label {
    color: #1d2a78;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

.programme-picker-toggle,
.programme-picker-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    background: #fff;
    color: #1d2a78;
    text-align: left;
    cursor: pointer;
}

.programme-picker-toggle {
    border: 1px solid #1d2a78;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(29, 42, 120, 0.08);
}

.programme-choice-dot {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--choice-accent);
}

.programme-picker-summary {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

#programme-picker-selected-name,
.programme-picker-row-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

#programme-picker-selected-age {
    display: block;
    color: #465164;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 3px;
}

.programme-picker-modal .modal-dialog {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
}

.programme-picker-modal.fade .modal-dialog {
    transform: translateY(100%);
}

.programme-picker-modal.show .modal-dialog {
    transform: translateY(0);
}

.programme-picker-modal .modal-content {
    max-height: 88vh;
    max-height: 88dvh;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: #fff;
    overflow: hidden;
}

.programme-picker-handle {
    width: 44px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 3px;
    background: #c8ced8;
    flex-shrink: 0;
}

.programme-picker-modal .modal-header {
    align-items: center;
    padding: 12px 16px;
    flex-shrink: 0;
}

.programme-picker-modal .modal-title {
    color: #1d2a78;
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
}

.programme-picker-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #243044;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.programme-picker-modal .modal-body {
    min-height: 0;
    padding: 0 8px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.programme-picker-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.programme-picker-row {
    border: 0;
    border-bottom: 1px solid #e6e9ef;
    border-radius: 0;
}

.programme-picker-row:hover {
    background: #f3f5f8;
    border-radius: 8px;
}

.programme-picker-row[aria-current="true"] {
    background: var(--choice-tint);
    border-radius: 8px;
}

.programme-picker-check {
    color: var(--choice-accent);
    visibility: hidden;
}

.programme-picker-row[aria-current="true"] .programme-picker-check {
    visibility: visible;
}

.programme-picker-holiday {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #ffe28a;
    color: #4b3900;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.programme-card:focus-visible,
.programme-picker-toggle:focus-visible,
.programme-picker-row:focus-visible,
.programme-picker-close:focus-visible {
    outline: 3px solid #1d2a78;
    outline-offset: 2px;
}

h2.tab_title {
    -webkit-text-stroke: 1px white;
    color: #61bb46;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    margin: 0;
    font-size: 35px;
}

h3.tab_title {
    color: #6b4215;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

h2.threeq_title {
    color: #FFFF33;
}

h3.threeq_subtitle {
}

h2.kids_title {
    color: #6666FF;
}

h3.kids_subtitle {
}

h2.jsp_title, .wb .program_title {
    color: #FFFF33;
}

h3.jsp_subtitle, .wb .program_subtitle {
    color: #FF9900;
}

h4.jsp_subtitle {
    color: #FF9900;
}

.programme-wbhc.programme-junior {
    --wbhc-theme-colour: #2d5018;
}

.programme-wbhc.programme-kids {
    --wbhc-theme-colour: #4b286d;
}

.programme-wbhc.programme-jsp {
    --wbhc-theme-colour: #123e73;
}

.programme-wbhc .wbhc-camp-theme {
    color: #fff;
    font-family: 'Nunito', 'Arial Rounded MT Bold', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 12px;
    overflow-wrap: break-word;
}

.programme-wbhc .wbhc-meta {
    gap: 8px;
}

.programme-wbhc .wbhc-meta .badge {
    color: var(--wbhc-theme-colour);
    background-color: rgba(255, 243, 219, 0.8);
    border: 1px solid rgba(255, 243, 219, 0.5);
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}

.tab-content h1, .tab-content .wb h4 {
    color: #eb8d00;
}

.tab-content .wb .header, .tab-content .jsp h4{
    color: #eb8d00;
}

.tab-content .wb .header{
    font-size: 16px;
}

.tab-content h4 {
    color: #6b4215;
    margin-bottom: 15px;
    font-size: 15px;
    background-color: #ffffff;
    padding: 5px 20px;
    border-radius: 30px;
}

.programme-junior .programme-description h4,
.programme-kids .programme-description h4,
.programme-jsp .programme-description h4 {
    color: var(--programme-heading-colour, var(--family-accent));
}

.tab-content p {
    color: #fff;
    margin-bottom: 15px;
}

.tab-content ul {
    padding-left: 30px;
}

.tab-content ul li {
    color: #fff;
}

ul.tab-nav:not(.tab-nav-lg) li a.tab_padding {
    padding: 0 15px 26px;
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab1,
ul.tab-nav:not(.tab-nav-lg) li#tab-1.ui-tabs-active a {
    background: url('/img/tab1.png') no-repeat bottom center;
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab2,
ul.tab-nav:not(.tab-nav-lg) li#tab-2.ui-tabs-active a,
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab5,
ul.tab-nav:not(.tab-nav-lg) li#tab-5.ui-tabs-active a,
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab9,
ul.tab-nav:not(.tab-nav-lg) li#tab-9.ui-tabs-active a {
    background: url('/img/tab2.png') no-repeat bottom center;
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab3,
ul.tab-nav:not(.tab-nav-lg) li#tab-3.ui-tabs-active a,
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab6,
ul.tab-nav:not(.tab-nav-lg) li#tab-6.ui-tabs-active a,
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab10,
ul.tab-nav:not(.tab-nav-lg) li#tab-10.ui-tabs-active a,
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab11,
ul.tab-nav:not(.tab-nav-lg) li#tab-11.ui-tabs-active a {
    background: url('/img/tab3.png') no-repeat bottom center;
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab4,
ul.tab-nav:not(.tab-nav-lg) li#tab-4.ui-tabs-active a,
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab7,
ul.tab-nav:not(.tab-nav-lg) li#tab-7.ui-tabs-active a{
    background: url('/img/tab4.png') no-repeat bottom center;
}

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab8,
ul.tab-nav:not(.tab-nav-lg) li#tab-8.ui-tabs-active a{
    background: url('/img/tab5.png') no-repeat bottom center;
}

.tab-container {
    padding: 0;
}

.tab-content ul.pin {
    list-style: none;
    padding: 0;
}

.tab-content ul.pin li {
    padding-left: 30px;
    background: url('/img/optimized/pin-7219228e4fcb7ed99953.webp') no-repeat 10px 5px;
    font-size: 14px;
}

.tab-content .table{
    color: #fff;
}

.programme-description .table {
    width: auto;
    max-width: 100%;
    min-width: 50%;
}

.bg {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 30px;
    min-height: 441px;
}

.bg1,
#tab1 .bg {
    background: url('/img/optimized/bg1-0f205dab49be424f85e4.webp') no-repeat top center;
    background-size: cover;
    padding: 30px;
    min-height: 441px;
    display: none;
}

.bg2,
#tab2 .bg,
#tab5 .bg,
#tab9 .bg {
    background: url('/img/optimized/bg2-43303f19d0077030b146.webp') no-repeat top center;
    background-size: cover;
    padding: 30px;
    min-height: 441px;
    display: none;
}

.bg3,
#tab3 .bg,
#tab6 .bg,
#tab10 .bg,
#tab11 .bg {
    background: url('/img/optimized/bg3-69b67c60160bc678807f.webp') no-repeat top center;
    background-size: cover;
    padding: 30px;
    min-height: 441px;
    display: none;
}

.bg4,
#tab4 .bg,
#tab7 .bg{
    background: url('/img/optimized/bg4-2d105bfe524c027c8ec6.webp') no-repeat top center;
    background-size: cover;
    padding: 30px;
    min-height: 441px;
    display: none;
}

#tab8 .bg{
    background: url('/img/optimized/bg5-dac5242738082a01e1ae.webp') no-repeat top center;
    background-size: cover;
    padding: 30px;
    min-height: 441px;
    display: none;
}


label {
    font-size: 13px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    cursor: pointer;
}

.row .form-control {
    border-radius: 0;
    font-size: 15px;
    margin-bottom: 30px;
}

.form-control:focus {
    box-shadow: none;
}

.btn.button-3d {
    background-color: #f0a110;
    border: none;
    border-radius: 8px;
    display: inline-block;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 22px;
    line-height: 40px;
    font-weight: 600;
    font-size: 14px;
}

.btn.button-3d:hover {
    color: white;
    background-color: #f0a110 !important;
    opacity: 0.9;
}

.btn.btn-learn-more, .btn.btn-learn-more:hover{
    background-color: #ed361c !important;
}

.loadingDiv {
    display: none;
}

.address_container {
    margin: 0 auto;
    text-align: center;
}

.display_left {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
    text-align: center;
}

.display_right {
    display: inline-block;
    font-size: 15px;
}

.contact_container {
    margin: 0 auto;
    max-width: 700px;
}

.contact_container .contact_display {
    float: left;
    margin: 0 1% 30px;
    width: 31.33%;
    text-align: center;
}

.float_left {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
    margin-top: 3px;
    text-align: center;
    vertical-align: top;
}

.float_right {
    display: inline-block;
    font-size: 15px;
    vertical-align: top;
}


.wbhc-3q::after {
    background: url('/img/optimized/3q-wbhc2022-character-adf42941938995dd4f59.webp') bottom right no-repeat;
    max-width: 505px;
    max-height: 623px;
}

.edu-bg {
    background: url('/img/eduverse-cta-grey.jpg') no-repeat;
    /*background-position: bottom;*/
    width: 100%;
    height: 40vh;
}

.wbhc-kids::after {
    background: url('/img/optimized/kids-wbhc2022-character-9d9ede94ae36d3264761.webp') bottom right no-repeat;
    max-width: 532px;
    max-height: 692px;
}

.wbhc-jsp::after {
    background: url('/img/optimized/jsp-wbhc2022-character-501b94b7ef794fa94785.webp') bottom right no-repeat;
    max-width: 402px;
    max-height: 658px;
}

.wbhc-block::after {
    content: ' ';
    position: absolute;
    bottom: -2rem;
    right: 10rem;
    min-width: 200px;
    min-height: 200px;
    background-size: contain;
    z-index: 10;
}

.wbhc-block {
    margin-top: 1.5rem;
    padding: 3rem 20px;
    position: relative;
    color: #fff;
    font-weight: bolder;
    font-size: 1.5rem;
    z-index: 99;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.58);
}

.wbhc-3q::before {
    content: ' ';
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0;
    top: 0;
    margin-left: 10%;
    border: solid 2px #ffffff;
    background-color: rgb(170, 204, 112);
    border-radius: 30px;
    z-index: -1;
}

.wbhc-kids::before {
    content: ' ';
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0;
    top: 0;
    margin-left: 10%;
    border: solid 2px #ffffff;
    background-color: #FFAEBC;
    border-radius: 30px;
    z-index: -1;
}

.wbhc-jsp::before {
    content: ' ';
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0;
    top: 0;
    margin-left: 10%;
    border: solid 2px #ffffff;
    background-color: #7EC8E3;
    border-radius: 30px;
    z-index: -1;
}


/*-----------------------*/
/*----- F O O T E R -----*/
/*-----------------------*/
.dark #copyrights {
    background-color: #fff;
    border-top: 1px solid #d6d6d6;
    color: #696969;
    padding: 30px;
    font-size: 14px;
}

#gotoTop {
    display: none;
    z-index: 299;
    position: fixed;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    color: #FFF;
    top: auto;
    left: auto;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    padding: 3px;
}

#gotoTop:hover {
    background-color: #1d2a78;
    transition: background-color .2s linear;
    -webkit-transition: background-color .2s linear;
}

#gotoEnquiry {
    z-index: 299;
    position: fixed;
    background: red;
    color: white;
    top: 50%;
    right: 0;
    cursor: pointer;
}

.gotoEnquiry_text {
    background-color: yellow;
    color: #333;
    display: block;
    font-weight: 900;
    overflow: hidden;
    position: absolute;
    padding-left: 0.5rem;
    top: 0.2rem;
    left: 270px;
    animation: openclose 5s ease-in-out infinite;
}

@keyframes openclose {
    0% {
        top: 0.2rem;
        width: 0;
    }

    5% {
        width: 0;
    }

    15% {
        width: 230px;
    }

    30% {
        top: 0.2rem;
        width: 230px;
    }

    33% {
        top: 0.2rem;
        width: 0;
    }

    35% {
        top: 0.2rem;
        width: 0;
    }

    38% {
        top: -4.5rem;

    }

    48% {
        top: -4.5rem;
        width: 190px;
    }

    62% {
        top: -4.5rem;
        width: 190px;
    }

    66% {
        top: -4.5rem;
        width: 0;
        text-indent: 0;
    }

    71% {
        top: -9rem;
        width: 0;
        text-indent: 5px;
    }

    86% {
        top: -9rem;
        width: 285px;
    }

    95% {
        top: -9rem;
        width: 285px;
    }

    98% {
        top: -9rem;
        width: 0;
        text-indent: 5px;
    }

    100% {
        top: 0;
        width: 0;
        text-indent: 0;
    }
}

.word-wrapper {
    position: fixed;
    width: 180px;
    height: 50px;
    background: rgb(255, 0, 0);
    background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(205, 0, 0, 1) 100%);
    color: #ffffff;
    z-index: 9999;
    top: 50%;
    right: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 3px 20px rgb(0 0 0 / 50%);
    cursor: pointer;
}

.float {
    position: fixed;
    width: 40px;
    height: 40px;
    /*background-color:#25d366;*/
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    /*box-shadow: 2px 2px 3px #999;*/
    z-index: 100;
    bottom: 35px;
    left: 30px;
}

.my-float {
    margin-top: 16px;
}


/*-----------------------*/
/*------ O T H E R ------*/
/*-----------------------*/
.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mobile-banner {
    display: none;
  }

/*-----------------------*/
/*------ M E D I A ------*/
/*-----------------------*/
@media screen and (min-width: 1200px) {
    .programme-cards {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .programme-picker-modal.fade .modal-dialog {
        transition: none;
    }
}

@media screen and (max-width: 979px) {
    body h1 {
        font-size: 24px;
    }

    /*#header {
        padding: 30px 30px 0;
    }*/

    #logo {
        display: none;
    }

    #primary-menu {
        display: none;
    }

    nav.navbar {
        display: block;
        padding: 0;
    }

    .navbar .navbar-toggler {
        background-color: #f0a110;
        padding: 10px;
        float: right;
        margin-top: 25px;
        border-radius: 0;
        outline: none;
    }

    .navbar .navbar-toggler:focus {
        border-radius: 0;
    }

    .navbar .menuicon {
        width: 28px;
        height: 4px;
        background-color: white;
        margin: 4px 0;
    }

    .navbar .social_media {
        float: none;
        margin: 5px 0 30px;
        height: auto;
    }

    .navbar .social_media .social_icon {
        transform: unset;
    }

    .navbar-collapse .navbar-nav .navbar-item:first-child {
        border-top: none;
    }

    .navbar-collapse .navbar-nav .navbar-item {
        padding: 13px 5px;
        border-top: 1px solid #EEE;
    }

    .navbar-collapse .navbar-nav .navbar-item a {
        text-transform: capitalize;
        color: #717171;
        font-size: 15px;
        font-weight: 400;
    }

    .navbar-collapse .navbar-nav .navbar-item:hover a {
        text-decoration: none;
        color: #1d2a78;
    }

    ul.tab-nav:not(.tab-nav-lg) li a.tab_padding {
        padding-bottom: 0;
    }

    ul.tab-nav:not(.tab-nav-lg) li {
        width: calc(50% - 4px);
        margin-bottom: 15px;
        display: inline-block;
    }

    .tab-content h4 {
        height: auto;
    }

    ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab1,
    ul.tab-nav:not(.tab-nav-lg) li#tab-1.ui-tabs-active a {
        background: none;
    }

    ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab2,
    ul.tab-nav:not(.tab-nav-lg) li#tab-2.ui-tabs-active a {
        background: none;
    }

    ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab3,
    ul.tab-nav:not(.tab-nav-lg) li#tab-3.ui-tabs-active a {
        background: none;
    }

    ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a#tab4,
    ul.tab-nav:not(.tab-nav-lg) li#tab-4.ui-tabs-active a {
        background: none;
    }

    .wbhc-block::after {
        min-width: 100px;
        right: 0;
    }

    .wbhc-block::before {
        margin-left: 0;
        width: 100%;
    }

    .wbhc-block {
        padding: 2rem 20px;
    }

    .banner-web {
        display: none;
      }

    .mobile-banner {
        display: block;
      }
}

@media screen and (max-width: 767px) {
    .academy_grid {
        float: left;
        width: 48%;
        margin-bottom: 30px;
    }

    .academy_grid .academy_left {
        float: none;
        width: 100%;
        text-align: center;
    }

    .academy_grid .academy_right {
        float: none;
        width: 100%;
        text-align: center;
        height: 50px;
    }

    .academy_grid .academy_left img {
        display: inline-block;
    }

    .address_container {
        text-align: left;
    }

    .display_left {
        display: block;
        float: left;
        width: 20px;
        margin-right: 5px;
        text-align: center;
    }

    .display_right {
        display: block;
        float: left;
        width: calc(100% - 25px);
        text-align: left;
    }

    .contact_container {
        max-width: 100%;
    }

    .contact_container .contact_display {
        width: 100%;
        margin: 0 0 30px;
        float: none;
        text-align: left;
    }

    #service-grid{
        display: none;
    }

    #components-grid{
        display: none;
    }

    body h1,
    body h3,
    body h4,
    body h5,
    body h6 {
    margin: 0 0 0 0;
}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .word-wrapper {
        left: 10px;
        top: unset;
        bottom: 25px;
    }
    body .small_container{
        padding: unset;
        font-size: 0.9rem;
    }
    .carousel-item{ 
        height: 50vh; 
        justify-content: center;
        align-items: center;
    }
    .carousel-item-next, .carousel-item-prev, .carousel-item.active { display: flex; }
    .carousel .carousel-inner .carousel-item img {
        height: 100%;
        width: unset;
        max-width: unset;
    }

    body h1,
    body h3,
    body h4,
    body h5,
    body h6 {
    margin: 0 0 0 0;
    }
}

/* Current camp content uses its supplied closing messages without legacy artwork. */
.programme-promotion::before,
.programme-promotion::after {
    display: none;
}

.programme-promotion p {
    max-width: 800px;
    margin: 0 auto;
}

.programme-promotion p + p {
    margin-top: 12px;
}

.tab-content .bg a:focus-visible {
    outline: 3px solid var(--family-accent);
    outline-offset: 4px;
}

.mobile-banner .carousel-item.wbhc-2026-slide {
    height: auto;
}

#carouselExampleSlidesOnly .wbhc-2026-slide img {
    height: auto;
    max-width: 100%;
}

[id^="enquiry-wbhc-"] {
    scroll-margin-top: 100px;
}
