/*
    ======================================================================================================

    @VERSION            : 1.2.8
    @CREATED            : 20 AUG 2019
    @MODIFIED           : 18 AUG 2026
    @DESIGNER           : Daniel C. K. Tan (danielcktan[at]gmail.com)
    @DESIGNER URI       : <https://www.danielcktan.sg>

    @FILE               : ~/css/user.css
    @TYPE               : Style Sheet
    @DESCRIPTION        : Custom Stylesheet for CMS Template

    @LICENSE            : Proprietary Internal Use License
    @LICENSE NOTE     	: Authorised use only. See LICENSE.md
    @COPYRIGHT        	: Copyright © Daniel C K Tan. All rights reserved.

    ======================================================================================================

    CONTENT
    ------------------------------------------------------------------------------------------------------
    #00 TOKEN STYLES
    #01 BASE STYLES
    #02 LAYOUT STYLES
    #03 CUSTOM SITE/COMPONENT STYLES 

    ======================================================================================================
*/

/* ----------------------------------------------------------------------------------------------------
   #00 TOKEN STYLES 
/* ---------------------------------------------------------------------------------------------------- */
:root {
	/* BRANDING COLOURS */
	--brand-col-primary				: var(--base-col-primary);
	--brand-col-primary-light		: var(--base-col-primary-light);
	--brand-col-primary-dark		: var(--base-col-primary-dark);
	--brand-col-primary-darker		: var(--base-col-primary-darker);
	--brand-col-secondary			: var(--base-col-secondary);
	--brand-doc-background-color	: var(--base-col-body-background);
	--brand-doc-link-color			: var(--base-col-link);
	--brand-doc-link-hover-color	: var(--base-col-link-hover);
	--brand-doc-select-background	: var(--base-col-primary-light);
	--brand-doc-select-text			: var(--base-col-body-text);
	--brand-doc-font-color			: var(--base-col-body-text);
	
	/* HEADER */
	--brand-header-bkg	: var(--base-col-secondary);
	--brand-header-text	: var(--base-col-white);
	
	/* BUTTONS */
	--brand-btn-primary				    : var(--base-col-primary);
	--brand-btn-primary-hover		    : var(--base-col-primary-light);
	--brand-btn-primary-disabled	    : var(--base-col-primary-dark);
	--brand-btn-primary-txt-col		    : var(--base-col-white);
	--brand-btn-primary-txt-col-hvr	    : var(--base-col-white);
	--brand-btn-primary-txt-col-dis	    : var(--base-col-gray-300);

	--brand-btn-secondary			    : var(--base-col-secondary);
	--brand-btn-secondary-hover		    : var(--base-col-secondary-light);
	--brand-btn-secondary-disabled	    : var(--base-col-secondary-dark);
	--brand-btn-secondary-txt-col		: var(--base-col-white);
	--brand-btn-secondary-txt-col-hvr	: var(--base-col-white);
	--brand-btn-secondary-txt-col-dis	: var(--base-col-gray-300);
}

[data-bs-theme=dark] { 
    --brand-doc-background-color	: var(--base-col-dark-400);
    --brand-doc-font-color			: var(--base-col-light-500);
    --brand-col-primary-light       : var(--base-col-light-900);
    --base-col-link	                : var(--base-col-light-500);
    --base-col-link-hover           : var(--base-col-light-500);
}


/* ----------------------------------------------------------------------------------------------------
   #01 BASE STYLES 
/* ---------------------------------------------------------------------------------------------------- */

/* Document Styles
/* ---------------------------------------------------------------------------------------------------- */
html { font-size: 18px; }
body {    
	background-color: var(--brand-doc-background-color);
	color: var(--brand-doc-font-color);
	font-family: var(--font-family-body);	
	font-size: var(--font-size-body);
    line-height: var(--line-height-body);
	font-weight: var(--font-weight-medium);
}


/* Link Styles
/* ---------------------------------------------------------------------------------------------------- */
a { color: var(--base-col-primary); transition: all .2s ease-in-out; text-decoration: none; }
/* Standard text links only */
a:not([role="button"]):not(.btn):hover,
a:not([role="button"]):not(.btn):focus,
a:not([role="button"]):not(.btn):active,
a:not([role="button"]):not(.btn).active { color: var(--base-col-link-hover	); font-weight: bold; outline: 0; text-decoration: underline; }


/* Headings Styles
/* ---------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); color: var(--base-col-black); letter-spacing: -0.3px; line-height: var(--line-height-heading); }

h1, h2, h3,
.h1, .h2, .h3 { text-transform: var(--base-text-transform-uppercase); }

h4, h5, h6,
.h4, .h5, .h6 { text-transform: var(--base-text-transform-capitalize); }


/* Paragraph Styles
/* ---------------------------------------------------------------------------------------------------- */
p { font-family: var(--font-family-body); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); text-align: justify; margin-top: 0; margin-bottom: 1rem; }
.lead { font-weight: var(--font-weight-medium); }


/* Buttom Styles
/* ---------------------------------------------------------------------------------------------------- */
.btn { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); }

.btn-primary {
	--bs-btn-bg: var(--brand-btn-primary);
	--bs-btn-border-color: var(--brand-btn-primary);
	--bs-btn-hover-bg: var(--brand-btn-primary-hover);
	--bs-btn-hover-border-color: var(--brand-btn-primary-hover);
	--bs-btn-active-bg: var(--brand-btn-primary);
	--bs-btn-active-border-color: var(--brand-btn-primary);
}

.btn-secondary {
	--bs-btn-bg: var(--brand-btn-secondary);
	--bs-btn-border-color: var(--brand-btn-secondary);
	--bs-btn-hover-bg: var(--brand-btn-secondary-hover);
	--bs-btn-hover-border-color: var(--brand-btn-secondary-hover);
	--bs-btn-active-bg: var(--brand-btn-secondary);
	--bs-btn-active-border-color: var(--brand-btn-secondary);
}


/* ----------------------------------------------------------------------------------------------------
   #02 LAYOUT STYLES 
/* ---------------------------------------------------------------------------------------------------- */
#globalNav .nav-link,
#globalNav .nav-link.active,
#globalNav .nav-link:hover { font-family: var(--font-family-body); font-weight: var(--font-weight-medium); text-decoration: none; }


/* Main Navbar Styles
/* ---------------------------------------------------------------------------------------------------- */
#mainNav { background-color: var(--brand-col-primary); }
#mainNav.navbar-scrolled { background-color: var(--brand-col-primary); }

[data-bs-theme=dark] #mainNav { background: var(--bs-body-bg); }

#mainNav .nav-item .nav-link,
#mainNav .nav-item .nav-link.active { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); text-decoration: none; }
#mainNav .dropdown-menu .dropdown-item { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); }


/* Section: Commitment Hero Banner Styles
/* ---------------------------------------------------------------------------------------------------- */
.hero-banner-commitment {
    background-image: url("../images/bkg-commitment.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: clamp(350px, 45vw, 620px);
}

.hero-banner-content {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
}

@media (max-width: 992px) {
    .hero-banner-commitment { background-image: none; background-color: #fee7d5; }
}


/* Section: Supporting Logos Styles
/* ---------------------------------------------------------------------------------------------------- */
.section.logos { 
    background-image: url("../images/bkg-supporting-logos.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    min-height: clamp(950px, 50vw, 1100px);
}


/* Page Header Styles (Background Image: Article Image)
/* ---------------------------------------------------------------------------------------------------- */
.page-header {
	background-attachment: fixed;
    background-color: var(--brand-header-bkg);
	background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
	color: var(--brand-header-text);
    min-height: 350px;
}

.page-header::after {
    background: rgba(0,0,0,0.5);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.page-header > * { z-index: 99; }


/* Page Header Styles (Background Image: Specified Image)
/* ---------------------------------------------------------------------------------------------------- 
.page-header {
	background-color: #333;
    background-image: url('../images/xxx.png'), url('../images/bkg-page-header.jpg');
	background-position: top right, center center;
	background-repeat: no-repeat, no-repeat;
    background-size: 500px, auto;
	color: var(--brand-header-text);
}

@media (max-width: 992px) {
	.page-header {
        background-color: #333;
        background-image:  url('../images/bkg-page-header.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto;
    }
}
*/


/* Page Title Styles
/* ---------------------------------------------------------------------------------------------------- */
.page-header h1 { text-transform: var(--base-text-transform-uppercase); }


/* Footer Styles
/* ---------------------------------------------------------------------------------------------------- */
footer { color: var(--base-col-white); }
footer p { color: var(--base-col-white); }

footer .nav.footer .nav-link,
footer .nav.footer .nav-link:active,
footer .nav.footer .nav-link:visited,
footer .nav.footer .nav-link:hover { color: var(--base-col-white); }


/* Preloader Styles
/* ---------------------------------------------------------------------------------------------------- */
#preloader { background: var(--brand-col-primary) !important; }
#preloader:before { border: 6px solid var(--brand-col-primary) !important; }


/* Scroll Progress Bar Styles
/* ---------------------------------------------------------------------------------------------------- */
/* The progress bar (scroll indicator) */
.page-scroll-progress-bar { background: var(--base-col-orange-500); } 


/* Back to Top Styles
/* ---------------------------------------------------------------------------------------------------- */
.back-to-top,
.back-to-top:hover { background: var(--brand-col-primary); }


/* ----------------------------------------------------------------------------------------------------
   #03 CUSTOM SITE/COMPONENT STYLES 
/* ---------------------------------------------------------------------------------------------------- */

/* Spotlight Section Styles
/* ---------------------------------------------------------------------------------------------------- */
section.spotlight { background-color: var(--brand-col-primary); color: var(--base-col-white); }

[data-bs-theme=dark] .section.spotlight { background-color: var(--base-col-dark-600); border-top: 5px solid var(--base-col-dark-800); color: var(--base-col-light-500); }
[data-bs-theme=dark] .section.spotlight a:not(.btn) { color: var(--base-col-light-600); }

section.spotlight h5 { color: var(--base-col-white); font-weight: var(--font-weight-bold); text-transform: uppercase; padding-left: 0; margin-bottom: 1.6rem; line-height: var(--line-height-heading); }

section.spotlight a { color: var(--base-col-white); font-weight: var(--font-weight-medium); text-decoration: none !important; }
section.spotlight a:hover { color: var(--base-col-white) !important; text-decoration: underline; transition: all .2s ease-in-out; }

.btn-facebook,
.btn-facebook:hover,
.btn-instagram,
.btn-instagram:hover,
.btn-linkedin,
.btn-linkedin:hover { background-color: var(--base-col-white); }

.btn-facebook span::before { color: #3b5998; }
.btn-instagram span::before { color: #e1306c; }
.btn-linkedin span::before { color: #0976b4; }

.spotlight .mod-custom { min-height: 510px;}
.mod-list.list-group .list-group-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Supporting Logos Styles
/* ---------------------------------------------------------------------------------------------------- */
section.logos {  padding-top: 2.5rem; padding-bottom: 1rem; }
.supporting-logos { margin-top: 15px; text-align: center; }

.supporting-logos p.support-logo,
.accreditation-logos p.accreditation-logo { font-size: 0.8em; text-align: center; }
.supporting-logos ul,
.accreditation-logos ul { text-align: center !important; }

.supporting-logos ul.logo-list li img,
.accreditation-logos ul.logo-list li img { width: auto; height: 90px; }
.supporting-logos ul.logo-list li img.enabling-mark  { width: auto; height: 120px; transition: all .2s ease-in-out;  }

[data-bs-theme=dark] .supporting-logos ul.logo-list li img,
[data-bs-theme=dark] .accreditation-logos ul.logo-list li img,
[data-bs-theme=dark] .supporting-logos ul.logo-list li img.enabling-mark { width: auto; height: 90px; background-blend-mode: multiply; -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); }

@media (max-width: 992px) {
    .supporting-logos,
    .accreditation-logos,
    .supporting-logos ul,
    .supporting-logos p.support-logo,
    .accreditation-logos p.accreditation-logo,
    .supporting-logos ul.logo-list li img,
    .accreditation-logos ul.logo-list li img,
    .supporting-logos ul.logo-list li img.enabling-mark { text-align: center; }
}


/* Timeline
/* ---------------------------------------------------------------------------------------------------- */
.timeline-centered { position: relative; margin-bottom: 30px; }

.timeline-centered:before, 
.timeline-centered:after { content: " "; display: table; }
.timeline-centered:after { clear: both; }

.timeline-centered:before { content: ''; position: absolute; display: block; width: 4px; background: #ddd; top: 20px; bottom: 20px; margin-left: 30px; }

.timeline-centered .timeline-entry { position:relative; margin-top:5px; margin-left:30px; margin-bottom:10px; clear:both; }

.timeline-centered .timeline-entry:before,
.timeline-centered .timeline-entry:after { content:" "; display:table; }
.timeline-centered .timeline-entry:after { clear: both; }

.timeline-centered .timeline-entry.begin { margin-bottom: 0; }

.timeline-centered .timeline-entry.left-aligned { float: left; }
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner { margin-left: 0; margin-right: -18px; }
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time { left: auto; right: -100px; text-align: left; }

.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon { float: right; }

.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label { margin-left: 0; margin-right: 70px; }
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after{ left:auto; right:0; margin-left:0; margin-right:-9px; -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }

.timeline-centered .timeline-entry .timeline-entry-inner { position: relative; margin-left: -20px; }

.timeline-centered .timeline-entry .timeline-entry-inner:before, 
.timeline-centered .timeline-entry .timeline-entry-inner:after { content: " "; display: table; }
.timeline-centered .timeline-entry .timeline-entry-inner:after { clear: both; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time { position:absolute; left:-100px; text-align:right; padding:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span { display: block; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child { font-size: 15px; font-weight: bold; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child { font-size: 12px; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon { background:#fff; color:var(--base-col-black); display:block; width:40px; height:40px; -webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-align:center; -moz-box-shadow:0 0 0 5px #ddd; -webkit-box-shadow:0 0 0 5px #ddd; box-shadow:0 0 0 5px #ddd; line-height:40px; font-size:15px; float:left; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary { background-color: #303641; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary { background-color: #ee4749; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-tertiary { background-color: #A0F; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success { background-color: #00a651; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info { background-color: #21a9e1; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning { background-color: #fad839; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger { background-color: #cc2424; color: #fff; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-e2c { background-color: #609; color: #fff; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label { position:relative; background:#eee; border:#eee 1px solid; padding:1em; margin-left:60px; -webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after { content:''; display:block; position:absolute; width:0;height:0; border-style:solid; border-width:9px 9px 9px 0; border-color:transparent #eee transparent transparent; left:0; top:10px; margin-left:-9px; }

[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label { position:relative; background: var(--base-col-dark-500); border: var(--base-col-dark-500) 1px solid; padding:1em; margin-left:60px; -webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after { content:''; display:block; position:absolute; width:0;height:0; border-style:solid; border-width:9px 9px 9px 0; border-color:transparent var(--base-col-dark-500) transparent transparent; left:0; top:10px; margin-left:-9px; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2, 
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h3, 
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h4,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ul li,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ol li { color: var(--base-col-black); margin: 0; line-height: 1.428571429; }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p { margin-bottom: 1rem; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ol li,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ul li { margin-bottom:0.85rem; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 { font-size: 1.75rem; font-weight: bold; margin-bottom: 10px; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a { color: var(--base-col-black); }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span { -webkit-opacity:.6; -moz-opacity:.6; opacity:.6; -ms-filter:alpha(opacity=60); filter:alpha(opacity=60); }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h3.panel-title { font-size:1rem; font-weight:bold; margin-top:0; margin-bottom:0; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h3 { font-size: 1.45rem; font-weight: bold; }
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h4 { font-size: 1.25rem; font-weight: bold; }

[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p,
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ol li,
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ul li,
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2,
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a,
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h3,
[data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h4 { color: var(--base-col-light-500); }

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2.accordion-header { margin-bottom: 0; }


/* Footnotes and References Styles
/* ----------------------------------------------------------------------------------------------------*/
.footnotes, .references {  margin-top: 50px; border-top: 1px solid silver; color: #5e5e5e; }
.footnotes::before, .references::before { 
    text-transform: uppercase;
    color: #909090;
    font-size: .95rem;
    letter-spacing: .1rem;
    display: block;
    margin: 2rem 0 .5rem;
 }
.footnotes::before { content: "Footnotes"; }
.references::before { content: "References"; }
.footnotes ol, .references ol { padding-left: 20px; }
.footnotes ol li, .references ol li { font-size: .85em; }

a[aria-describedby="footnote-label"] { text-decoration: none; outline: none; cursor: pointer; }
a[aria-label="Back to Content"] { font-size: .85em; }

/* Highlight targeted footnote */
#footnotes :target { background-color: #ffa; transition: all 1s linear; }