/*
 ======================================================================================================
 
    @VERSION			: 1.2.5
    @CREATED			: 20 AUG 2019
    @MODIFIED			: 30 JUL 2025
    @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
	   
 ======================================================================================================
 
	CONTENT
	------------------------------------------------------------------------------------------------------
	#00 ROOT STYLES
	#01 BASE STYLES
	#02 LAYOUT STYLES
    #03 CUSTOM SITE/COMPONENT STYLES 
 
  ======================================================================================================
*/

/* ----------------------------------------------------------------------------------------------------
   #00 ROOT 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
/* ---------------------------------------------------------------------------------------------------- */
body {    
	background-color: var(--brand-doc-background-color);
	color: var(--brand-doc-font-color);
	font-family: var(--font-family-body);	
	font-weight: var(--font-weight-regular);
}


/* Link Styles
/* ---------------------------------------------------------------------------------------------------- */
a { color: var(--brand-doc-link-color); font-weight: var(--font-weight-semibold); text-decoration: none; transition: all .2s ease-in-out; }
a:hover, a:focus, a:active, a.active { color: var(--brand-doc-link-hover-color); font-weight: var(--font-weight-semibold); text-decoration: none; outline: 0; }


/* Headings Styles
/* ---------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-heading); color: var(--brand-col-primary-dark); letter-spacing: -0.3px; }

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); font-weight: var(--font-weight-light); }


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



/* ----------------------------------------------------------------------------------------------------
   #02 LAYOUT STYLES 
/* ---------------------------------------------------------------------------------------------------- */

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

#mainNav.navbar-scrolled { background-color: var(--brand-col-primary); }

#mainNav .nav-item .nav-link  { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); }
#mainNav .dropdown-menu li .dropdown-item { font-family: var(--font-family-body); font-weight: var(--font-weight-regular); }

@media (max-width: 1199px) {
	/* On Mobile Devices */	
	#mainNav .dropdown-menu li .dropdown-item,
	#mainNav .dropdown-menu li .dropdown-item:active,
	#mainNav .dropdown-menu li .dropdown-item:hover,
	#mainNav .dropdown-menu li .dropdown-item:focus { color: #fff; }
}

@media (min-width: 1200px) {
	/* On Desktop Devices */
	#mainNav .dropdown-menu li .dropdown-item:hover,
	#mainNav .dropdown-menu li .dropdown-item:focus { color: #ff6600; }

    [data-bs-theme=dark] #mainNav .dropdown-menu li .dropdown-item:hover,
	[data-bs-theme=dark] #mainNav .dropdown-menu li .dropdown-item:focus { color: var(--base-col-yellow-500); }
}


/* Section General Styles
/* ---------------------------------------------------------------------------------------------------- */
section { padding-top: calc(3rem + 5px); padding-bottom: calc(3rem + 5px); }
section .page-section-heading { color: #0079c4; }

section.highlights, section.start, section.mission-vision-values { background-color: #e5f2fb; }

section.featured {
	background-color: #555;
	background-image: url("../images/bkg-home-featured.jpg"); 
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	background-attachment: fixed;
}

section.featured .featuredTitle { color: #ccff00; text-shadow: 0px 0px 8px #333; }

section.featured .featuredSubTitle { color: #fff; font-size: 1.25rem; font-weight: 700; text-transform: capitalize; text-align: left; text-shadow: 0px 0px 8px #333; }

section.featured,
section.featured p,
section.featured p.lead { color: #fff; text-shadow: 0px 0px 8px #333; text-align: left; }

section.featured img.featured-img { width: 192px; height: 192px; }
img.belief-img { width: 256px; height: 256px; }

@media (max-width: 640px) {
	section.featured img.featured-img { width: 80%; height: 80%; margin-bottom: 25px; }
	section.featured .featuredTitle,
	section.featured .featuredSubTitle,
	section.featured p,
	section.featured p.lead { text-align: center; }
}

section.start { 
	background-color: #fff;
	background-image: url("../images/bkg-home-start.jpg"); 
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	padding-bottom: 400px;
}


/* Section: Map Styles
/* ---------------------------------------------------------------------------------------------------- */
section.map { width: 100%; position: relative; padding-top: 0; padding-bottom: 0; }
section.map .maps { height: 25rem; position: relative; }
section.map .maps iframe { height: 100%; width: 100%; }


/* 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); }


/* Footnotes Styles
/* ----------------------------------------------------------------------------------------------------*/
.footnotes {  margin-top: 50px; border-top: 1px solid silver; font-size: 0.85em; color: #5e5e5e; }
.footnotes::before {
    content: "Footnotes";
    text-transform: uppercase;
    color: #909090;
    font-size: .7rem;
    letter-spacing: .1rem;
    display: block;
    margin: 2rem 0 .5rem;
}


.pls-address div[class|="col"], .pls-transport div[class|="col"] { margin-top: 1rem !important; margin-bottom: 0 !important; }
.pls-address address { margin-bottom: 0.2rem }


/* Footer Styles
/* ---------------------------------------------------------------------------------------------------- */
footer { color: #fff; text-align: center; }
footer .footer-brand { text-decoration: none; }
footer .footer-brand img { max-width: 150px; width: 150px; transition: all .2s ease-in-out; }
footer p { color: #fff; }

footer .nav.footer .nav-item .nav-link,
footer .nav.footer .nav-item .nav-link:link,
footer .nav.footer .nav-item .nav-link:active,
footer .nav.footer .nav-item .nav-link:visited,
footer .nav.footer .nav-item .nav-link:hover { color: #fff !important; }


/* 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: #ff6600; } 


/* Back to Top Styles
/* ---------------------------------------------------------------------------------------------------- */
#toTop { background: var(--brand-col-primary); }



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

/* Parallax Styles
/* ---------------------------------------------------------------------------------------------------- */
#parallax { 
	background: url(../images/parallax.jpg) no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	min-height: 350px;
	margin: 0;
}


/* Spotlight Section Styles
/* ---------------------------------------------------------------------------------------------------- */
section.spotlight { background-color: var(--base-col-light-100); border-top: 5px solid var(--brand-col-primary); }
[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 { border-left: 5px solid #FF6600; text-transform: uppercase; padding-left: 10px; margin-bottom: 1.6rem; }
section.spotlight p,
section.spotlight a,
section.spotlight ul li,
section.spotlight ol li { font-size: 0.95rem; }

.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 { font-size: 0.8em; text-align: center; }
.supporting-logos ul { text-align: center !important; }

.supporting-logos ul.logo-list li img { width: auto; height: 90px; transition: all .2s ease-in-out;  }
.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] .supporting-logos ul.logo-list li img.enabling-mark { width: auto; height: 90px; transition: all .2s ease-in-out;  background-blend-mode: multiply; -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); }

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


/* Card Module List Icon onHover Styles
/* ---------------------------------------------------------------------------------------------------- */
.card-module .mod-list.list-group .list-group-item::after {
	content: "\f061";
	color: var(--base-col-gray-300);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	float: right;
  }

.card-module .mod-list.list-group .list-group-item:hover::after {
	content: "\f061";
	color: var(--base-col-primary);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	float: right;
  }


.card-partner-schools .card-body .card-title { font-size: 1.25em; text-align: center; }


/* Homepage Title Styles
/* ---------------------------------------------------------------------------------------------------- */
.spotlightTitle {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 40px;
}

.highlightsTitle,
.featuredTitle,
.socialTitle {
    font-size: 1.95em;
    font-weight: 300;
    line-height: 40px;
}

.highlightsTitle span,
.featuredTitle span,
.socialTitle span,
.startTitle span { font-weight: 700; }

.startTitle {
    color: var(--base-col-dark-600);
	font-size: 1.8em;
    font-weight: 300;
    line-height: 40px;
}

[data-bs-theme=dark] .spotlightTitle,
[data-bs-theme=dark] .highlightsTitle,
[data-bs-theme=dark] .socialTitle { color: var(--base-col-light-500); }

.startTitle span.underline {
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: rgba(232,54,0,1);
	text-decoration-thickness: 8px;
}


/* Homepage Statistic Tiles Styles
/* ---------------------------------------------------------------------------------------------------- */
.tile {
	background: #666;
	color: white;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;

	position: relative;
	overflow: hidden;

	transition: all 0.6s ease-in-out;
}

.tile img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1; /* lower layer */
	pointer-events: none;
	user-select: none;
}

.tile .stats {
	position: relative;
	z-index: 2; /* sits above image */
	color: #fff;
	text-align: center;
	padding: 0.5em 1em;
	border-radius: 8px;
}

.tile.tile-1 small,
	.tile.tile-2 small,
	.tile.tile-6 small { display: block; }

.tile .count,
.tile p.desc { text-shadow: 0px 0px 8px #333; }

.tile .count {
	line-height: 1.2;
	font-size: 3.5rem;
	font-weight: 700;
}

.tile.tile-1 .count {
	line-height: 1.2;
	font-size: 6rem;
	font-weight: 700;
}

.tile p.desc {
	line-height: 1.2;
	font-size: 0.95rem;
	font-weight: 500;
	color: inherit;
	text-align: inherit;
}

.tile.tile-1 p.desc {
	line-height: 1.2;
	font-size: 1.85rem;
	font-weight: 500;
	color: inherit;
	text-align: inherit;
}

.tile.tile-1 small {
	line-height: 1.5;
	font-size: 1.35rem;
	font-weight: 300;
	color: inherit;
	text-align: inherit;
}

.tile small {
	line-height: 1.5;
	font-size: 0.95rem;
	font-weight: 300;
	color: inherit;
	text-align: inherit;
}

/* Mobile: Small Screens */
@media (max-width: 480px) {
	.tile .count { font-size: 3rem; }
	.tile.tile-4 .count { font-size: 3rem; }
	.tile p.desc { font-size: 0.85rem; margin-bottom: 0.5rem; }
}

.grid-container {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 10px;
	height: 500px;
}

/* Desktop: Large and xLarge Screens */
.tile-1 {
	grid-row: 1 / span 2;
	grid-column: 1 / 2;
}

.tile-2 {
	grid-column: 2 / 3;
}

.tile-3 {
	grid-column: 3 / 4;
}

.tile-4 {
	grid-column: 2 / span 2;
	grid-row: 2 / 3;
}

.tile-5 {
	grid-column: 4 / 5;
}

.tile-6 {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}

/* Tablet: Medium Screens */
@media (max-width: 991px) {
	.grid-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, 1fr);
		gap: 10px;
		height: auto;
	}

	.tile-1 {
		grid-column: 1 / span 2; /* spans 2 columns */
		grid-row: 1 / span 2; /* spans 2 rows */
	}

	.tile-2 {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}

	.tile-3 {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}

	.tile-4 {
		grid-column: 1 / span 2; /* full width */
		grid-row: 4 / 5; /* rectangle shape */
	}

	.tile-5 {
		grid-column: 1 / 2;
		grid-row: 5 / 6;
	}

	.tile-6 {
		grid-column: 2 / 3;
		grid-row: 5 / 6;
	}

	.tile {
		aspect-ratio: unset; /* Remove square enforcement for this layout */
	}

	.tile-1 {
		aspect-ratio: 2 / 2; /* Keep it square over 2 rows and 2 columns */
	}

	.tile-4 {
		aspect-ratio: 2 / 1; /* Rectangle: 2x width of height */
	}

	.tile-2,
	.tile-3,
	.tile-5,
	.tile-6 {
		aspect-ratio: 1 / 1; /* Small squares */
	}
}

/* Mobile: Small Screens 
@media (max-width: 480px) {
	section.highlights,
	.grid-container {
		display: none;
	}
	/*
	.grid-container {
		grid-template-columns: 1fr;
		gap: 10px;
		height: auto;
	}

	.tile {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 1 / 1;
	}
	
}*/


/* Get in Touch Module Accordion Styles
/* ---------------------------------------------------------------------------------------------------- */
#accordionCampus .accordion-item .accordion-body p,
#accordionCampus .accordion-item .accordion-body p a { font-size: .85rem !important; }


.text-muted { --bs-text-opacity: 1; color: rgba(33,37,41,0.5) !important; }