/*
 ======================================================================================================
 
    @VERSION			: 1.2.5
    @CREATED			: 20 AUG 2019
    @MODIFIED			: 6 NOV 2024
    @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-size: var(--base-font-size-body);
  font-weight: var(--font-weight-regular);
}

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

/* 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-light);
  letter-spacing: -0.3px;
}

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

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

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

/* 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 0.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 
/* ---------------------------------------------------------------------------------------------------- */

/* 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 0.2s ease-in-out;
}
[data-bs-theme="dark"] .supporting-logos ul.logo-list li img {
  width: auto;
  height: 90px;
  transition: all 0.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;
  }
}

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

/* President Message Section Styles
/* ---------------------------------------------------------------------------------------------------- */
section.president-msg {
  background-attachment: fixed;
  background-color: #fff;
  background-image: url("../images/bg-president-msg.jpg");
  background-position: right top;
}

section.president-msg .president-msg-content {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 35px;
}

/* What We Value Section Styles
/* ---------------------------------------------------------------------------------------------------- */
section.what-we-value {
  padding-bottom: 0 !important;
}

/* What We  Section Styles
/* ---------------------------------------------------------------------------------------------------- */
section.what-we-do {
  background-color: #fff;
  background-size: cover;
  background-image: url("../images/what-we-do.jpg");
  background-position: top right;
  min-height: 550px;
  padding-top: 250px;
}

@media (max-width: 1024px) {
  section.what-we-do {
    background-color: #c1ddeb;
    background-image: none;
  }
}

section.what-we-do h3 {
  color: #00395e;
}

/* Leadership Section Styles
/* ---------------------------------------------------------------------------------------------------- */
section.leadership-5-pillars {
  background-color: #eddcc3;
}
/* section.leadership-5-values { background-color: #a8dbf0; } */
section.leadership-5-values {
  background-color: #c8eacf;
}

/* Highlighted Courses Section Styles
/* ---------------------------------------------------------------------------------------------------- */
.card.course-tile {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.card.course-tile:hover {
  transform: scale(1.025);
  transition: all 1s ease;
  z-index: 999;
}

.card.course-tile .card-footer {
  padding: 0;
}
.card.course-tile .card-title {
  line-height: 1.3;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 5px;
  min-height: 60px;
}
.card.course-tile .card-text {
  color: #5a5a5a;
  font-size: 0.875rem;
  line-height: 1.8;
  font-weight: 400;
  min-height: 150px;
}
.card.course-tile .card-footer .btn-card {
  border-radius: 0px 0px 0.375rem 0.375rem;
  padding: 1rem 0.5rem;
}

/* Course List Accordion Styles
/* ---------------------------------------------------------------------------------------------------- */
.accordion-header-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
}

.accordion-header-title {
  font-size: 1.15rem;
  font-weight: 600;
}

.accordion-header-desc {
  color: var(--base-col-gray-700);
  font-weight: 400;
  font-size: 0.95rem;
  margin-top: 5px;
}


/* Course List Table Section Styles
/* ---------------------------------------------------------------------------------------------------- */
.table-courseList th {
  background-color: var(--base-col-primary-dark);
  color: #fff;
}

.table p {
  text-align: left;
}

.table-equal-col {
  width: 100%;
  table-layout: auto; /* Default behavior for responsive resizing */
}

@media (min-width: 1024px) {
  .table-equal-col {
    table-layout: fixed; /* Apply fixed layout for larger screens */
  }
  .table-equal-col th,
  .table-equal-col td {
    width: 1%; /* Equal width columns for larger screens */
  }
}


/* Parallax Effect Styles
/* ---------------------------------------------------------------------------------------------------- */
.parallax {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* Course Details - At a Glance Styles
/* ---------------------------------------------------------------------------------------------------- */
.at-a-glance {
    background: #fff;
    box-shadow: none;
    border-radius: 0;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    transform: none;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .at-a-glance {
        box-shadow: 0 8px 16px rgb(0 0 0 / 16%);
        border-radius: 8px;
        padding: 1rem 0.5rem;
        margin-top: 1.5rem;
        transform: translateY(-50%) translateY(calc(2.5rem * -1));
    }
}

.at-a-glance [class|="col"] {
  margin-bottom: 0 !important;
}

.at-a-glance-icon {
    min-width: 40px;
    text-align: center;
}

.at-a-glance .detail {
  border-right: 2px solid #e8eef7;
  padding: 0 1.2rem;
}

.at-a-glance > :last-of-type {
  border-right: none;
}

.at-a-glance-list-item {
  gap: 1rem;
  padding: 0.25rem;
}

.at-a-glance-list-item i {
  display: inline-block;
  vertical-align: middle; /* Ensure vertical alignment of icon */
}

.at-a-glance-list-item-title {
  color: rgba(0, 0, 0, 0.5) !important;
  font-size: 0.875em;
}
.at-a-glance-list-item-desc {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}


/* Course Details - Course Objectives List Styles
/* ---------------------------------------------------------------------------------------------------- */
ul.course-objectives {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Optional: Remove default padding */
}

ul.course-objectives li {
  position: relative;
  padding-left: 2rem; /* Space for the icon */
}

ul.course-objectives li::before {
  content: "\f058"; /* Unicode for Font Awesome icon (example: checkmark) */
  font-family: "Font Awesome 6 Free"; /* Use Font Awesome */
  font-weight: 900; /* Ensure solid icons are used */
  position: absolute;
  left: 0;
  top: 0.2rem; /* Adjust the vertical position as needed */
  color: #669933; /* Set the icon color */
}


/* Course Details - Course Enquiry Styles
/* ---------------------------------------------------------------------------------------------------- */
section.course-enquiry {
  background-color: #ffcc33;
}

section.course-enquiry h3,
section.course-enquiry p {
    text-align: center;
}

section.course-enquiry [class|="col"] {
  margin-bottom: 0 !important;
}