/**
 * CFI Notebook main.css
 * Organized/beautified version
 * Notes:
 * - No selectors, declarations, or values were intentionally changed.
 * - Cascade order was preserved to avoid behavior changes.
 * - This pass focused on structure, spacing, readability, and future maintainability.
 *
 * SECTION INDEX
 * 01. Template Header
 * 02. Design Tokens / Root Variables
 * 03. Global Base / Shared Elements
 * 04. Forms / Messaging
 * 05. Global Header
 * 06. Navigation
 * 07. Global Footer
 * 08. Preloader
 * 09. Scroll Top
 * 10. Global Page / Section Structure
 * 11. Global Headings / Section Titles
 * 12. Hero
 * 13. Notebook Home
 * 14. Notebook TOC
 * 15. Trivia
 * 16. Lesson Plans
 * 17. Contact
 * 18. Iframes
 * 19. Figures / Images
 * 20. Tables
 * 21. Trivia Details
 * 22. Body / Counters
 * 23. Recent Site-Specific Additions
 */

/**
* Template Name: eStartup
* Template URL: https://bootstrapmade.com/estartup-bootstrap-landing-page-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/


/* Smooth scroll */
:root {

	scroll-behavior: smooth;

}


/*--------------------------------------------------------------
# Global Header - Above fold
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {color: var(--default-color);background-color: var(--background-color);font-size: 14px;padding: 40px 0;position: relative;}
.footer .copyright p {margin-bottom: 0;}
.footer .social-links {margin-top: 20px;}
.footer .social-links a {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);font-size: 16px;color: color-mix(in srgb, var(--default-color), transparent 50%);margin: 0 5px;transition: 0.3s;}
.footer .social-links a:hover {color: var(--accent-color);border-color: var(--accent-color);}
.footer .credits {margin-top: 10px;font-size: 13px;text-align: center;}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {position: fixed;inset: 0;z-index: 9999;overflow: hidden;background-color: var(--background-color);transition: all 0.6s ease-out;}
#preloader:before {content: "";position: fixed;top: calc(50% - 30px);left: calc(50% - 30px);border: 6px solid var(--accent-color);border-top-color: color-mix(in srgb, var(--accent-color), transparent 90%);border-radius: 50%;width: 60px;height: 60px;animation: animate-preloader 1s linear infinite;}
@keyframes animate-preloader {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {

	position: fixed;

	visibility: hidden;

	opacity: 0;

	right: 15px;

	bottom: -15px;

	z-index: 99999;

	background-color: var(--accent-color);

	width: 44px;

	height: 44px;

	border-radius: 50px;

	transition: all 0.4s;

}

.scroll-top i {

	font-size: 24px;

	color: var(--contrast-color);

	line-height: 0;

}

.scroll-top:hover {

	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);

	color: var(--contrast-color);

}

.scroll-top.active {

	visibility: visible;

	opacity: 1;

	bottom: 15px;

}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {

	[data-aos-delay] {

		transition-delay: 0 !important;

	}

}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/


.acs-tables {display:table;width:65%;border-collapse:collapse;margin:auto;border:2px solid #000;margin-top:25px;}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
	width: 100%;
	position: relative;
	padding: 5px 0 5px 0;

}
/* Pads between header and top of first section on the homepage */
.hero .container {
	position: relative;
	z-index: 3;

}

.hero h2 {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 20px;

}

.hero h2 .accent {
	color: var(--accent-color);

}

.hero p {
	color: color-mix(in srgb, var(--default-color), transparent 40%);
	font-weight: 400;
	margin-bottom: 30px;

}

.hero .btn-get-started {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 12px 36px;
	border-radius: 50px;
	transition: 0.5s;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

}

.hero .btn-get-started:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 15%);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

}

.hero .btn-watch-video {
	font-size: 16px;
	transition: 0.5s;
	margin-left: 25px;
	font-weight: 600;

}

.hero .btn-watch-video i {

	color: var(--accent-color);

	font-size: 32px;

	transition: 0.3s;

	line-height: 0;

	margin-right: 8px;

}

.hero .btn-watch-video:hover {

	color: var(--accent-color);

}

.hero .btn-watch-video:hover i {

	color: color-mix(in srgb, var(--accent-color), transparent 15%);

}

@media (max-width: 640px) {

	.hero h2 {

		font-size: 36px;

	}

	.hero .btn-get-started,
	.hero .btn-watch-video {

		font-size: 14px;

	}

}

.hero .icon-boxes {

	padding-bottom: 60px;

	z-index: 4;

}

.hero .icon-box {

	background: var(--surface-color);

	padding: 60px 30px;

	position: relative;

	overflow: hidden;

	box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);

	transition: all 0.3s ease-in-out;

	border-radius: 8px;

	z-index: 1;

	height: 100%;

	width: 100%;

	text-align: center;

}

.hero .icon-box .title {

	font-weight: 700;

	margin-bottom: 15px;

	font-size: 24px;

}

.hero .icon-box .title a {

	color: color-mix(in srgb, var(--default-color), transparent 20%);

	transition: 0.3s;

}

.hero .icon-box .icon {

	margin-bottom: 20px;

	padding-top: 10px;

	display: inline-block;

	transition: all 0.3s ease-in-out;

	font-size: 48px;

	line-height: 1;

	color: var(--accent-color);

}

.hero .icon-box:hover {

	background-color: var(--accent-color);

}

.hero .icon-box:hover .title a,
.hero .icon-box:hover .icon {

	color: var(--contrast-color);

}

/*--------------------------------------------------------------
# Notebook Home Section
--------------------------------------------------------------*/
.notebook-home .content .who-we-are {
	text-transform: uppercase;
	margin-bottom: 15px;
	color: color-mix(in srgb, var(--default-color), transparent 40%);

}

.notebook-home .content h3 {
	font-size: 2rem;
	font-weight: 700;

}

.notebook-home .content ul {
	list-style: none;
	padding: 0;

}

.notebook-home .content ul li {
	padding-bottom: 10px;

}

.notebook-home .content ul i {
	font-size: 1.25rem;
	margin-right: 4px;
	color: var(--accent-color);

}

.notebook-home .content p:last-child {
	margin-bottom: 0;

}

.notebook-home .content .read-more {
	background: var(--accent-color);
	color: var(--contrast-color);
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 12px 24px;
	border-radius: 5px;
	transition: 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;

}

.notebook-home .content .read-more i {
	font-size: 18px;
	margin-left: 5px;
	line-height: 0;
	transition: 0.3s;

}

.notebook-home .content .read-more:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
	padding-right: 19px;

}

.notebook-home .content .read-more:hover i {
	margin-left: 10px;

}

.notebook-home .notebook-images img {
	border-radius: 10px;

}

/*--------------------------------------------------------------
# Notebook TOC Section
--------------------------------------------------------------*/

.notebook-toc .content .read-more {
	background: var(--accent-color);
	color: var(--contrast-color);
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 12px 24px;
	border-radius: 5px;
	transition: 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;

}

.notebook-toc .content .read-more i {
	font-size: 18px;
	margin-left: 5px;
	line-height: 0;
	transition: 0.3s;

}

.notebook-toc .content .read-more:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
	padding-right: 19px;

}

.notebook-toc .content .read-more:hover i {
	margin-left: 10px;

}







/*--------------------------------------------------------------
# lesson-plans Section
--------------------------------------------------------------*/
.lesson-plan .lesson-plan-box {
	background-color: var(--surface-color);
	padding: 24px 20px;
	box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
	transition: 0.3s;
	height: 100%;

}

.lesson-plan .lesson-plan-box h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;

}

.lesson-plan .lesson-plan-box i {
	background: color-mix(in srgb, var(--accent-color), transparent 92%);
	color: var(--accent-color);
	line-height: 0;
	padding: 4px;
	margin-right: 10px;
	font-size: 24px;
	border-radius: 3px;
	transition: 0.3s;

}

.lesson-plan .lesson-plan-box:hover i {
	background: var(--accent-color);
	color: var(--contrast-color);

}

/* IFRAMES */
@media screen and (min-width: 721px) {
	iframe.frameBorder0 {border:0;}
	#iframe-center {text-align:center;}
	#iframe-right {float:right;position:relative;margin-right:1%;}
	#iframe-mobile {display:none}
}

@media screen and (max-width: 720px) {
	#iframe-mobile {text-align:left;}
	#iframe-center {display:none;}
	#iframe-right {display:none;}
	iframe.curved {clear:right;border-radius: 25px;margin:10px;}
}

@media screen and (max-width: 721px) {

	iframe.mobile-resize90 {width:90%;height:90%;}
	iframe.mobile-resize80 {width:80%;height:100%;}
	iframe.mobile-resize75 {width:75%;height:75%;}
	iframe.mobile-resize50 {max-width:50%;max-height:50%;}
	iframe.mobile-resize25 {max-width:25%;max-height:25%;}
	iframe.mobile-hide721px {display:none;}
	iframe.mobile-center {text-align:center;margin: 0 auto;display:block;}
}

/* Images */
li.hide-image-bullet {
	list-style: none;
}

li.hide-image-bullet::marker {
	content: "";
}


/* Fonts */
:root {--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--heading-font: "Raleway", sans-serif;--nav-font: "Poppins", sans-serif;}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {--background-color: #ffffff;/* Background color for the entire website, including individual sections */--default-color: #212529;/* Default color used for the majority of the text content across the entire website */--heading-color: #101f0c;/* Color for headings, subheadings and title throughout the website */--accent-color: #71c55d;/* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */--surface-color: #ffffff;/* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */--contrast-color: #ffffff;/* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */}



/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
	--background-color: #f1f6f1;
	--surface-color: #ffffff;
}

.dark-background {

	--background-color: #060606;

	--default-color: #ffffff;

	--heading-color: #ffffff;

	--surface-color: #252525;

	--contrast-color: #ffffff;

}
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #212529;  /* The default color of the main navmenu links */
  --nav-hover-color: #71c55d; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #71c55d; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}




.notebook-toc .content .who-we-are {
	text-transform: uppercase;
	margin-bottom: 15px;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.notebook-toc .content h3 {
	font-size: 2rem;
	font-weight: 700;
}

.notebook-toc .content ul {
	padding: 5px 40px 40px 40px;
}

.notebook-toc .content ul li {
	padding-bottom: 0px;
}

.notebook-toc .content ul i {
	font-size: 1.25rem;
	margin-right: 4px;
	color: var(--accent-color);
}

.notebook-toc .content p:last-child {
	margin-bottom: 0;
}
			/*--------------------------------------------------------------
			# General Styling and Shared Classes
			--------------------------------------------------------------*/
			body {color: var(--default-color);background-color: var(--background-color);font-family: var(--default-font);}
			a {color: var(--accent-color);text-decoration: none;transition: 0.3s;}
			a:hover {color: color-mix(in srgb, var(--accent-color), transparent 25%);text-decoration: none;}
			h1,h2,h3,h4,h5,h6 {color: var(--heading-color);font-family: var(--heading-font);}

/* TABLES */
table.right {
	margin-left:auto;
	margin-right:auto;
	padding:0;
	font-weight:700;
	float:right
}

.table-row {
	display:table-row
}

.acs-container {
	display:table;
	width:65%;
	border-collapse:collapse;
	margin:auto;
	border:2px solid #000;

}

.acs-heading {
	font-weight:700;
	display:table-row;
	line-height:25px;
	font-size:14px;
	font-family:georgia;
	background-color:#64dd45;

}

.col {
	display:table-cell;
	border:2px solid #000;
	width:80%;

}

.col-information {
	display:table-cell;
	border:2px solid #000;
	width:15%;

}

.col-lesson-plan {
	display:table-cell;
	border:2px solid #000;
	width:15%;

}

.col-left {
	display:table-cell;
	border:2px solid #000;
	font-weight:700;
	width:50%
}

/*--------------------------------------------------------------
# Trivia Details Section
--------------------------------------------------------------*/
.trivia-details .trivia-box {

	background-color: var(--surface-color);

	padding: 20px;

	box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);

}

.trivia-details .trivia-box+.trivia-box {

	margin-top: 30px;

}

.trivia-details .trivia-box h4 {

	font-size: 20px;

	font-weight: 700;

	border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);

	padding-bottom: 15px;

	margin-bottom: 15px;

}

.trivia-details .trivia-list {

	background-color: var(--surface-color);

}

.trivia-details .trivia-list a {

	color: color-mix(in srgb, var(--default-color), transparent 20%);

	background-color: color-mix(in srgb, var(--default-color), transparent 96%);

	display: flex;

	align-items: center;

	padding: 12px 15px;

	margin-top: 15px;

	transition: 0.3s;

}

.trivia-details .trivia-list a:first-child {
	margin-top: 0;

}

.trivia-details .trivia-list a i {
	font-size: 16px;
	margin-right: 8px;
	color: var(--accent-color);

}

.trivia-details .trivia-list a.active {

	color: var(--contrast-color);

	background-color: var(--accent-color);

}

.trivia-details .trivia-list a.active i {

	color: var(--contrast-color);

}

.trivia-details .trivia-list a:hover {

	background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

	color: var(--accent-color);

}

.trivia-details .download-catalog a {

	color: var(--default-color);

	display: flex;

	align-items: center;

	padding: 10px 0;

	transition: 0.3s;

	border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}

.trivia-details .download-catalog a:first-child {

	border-top: 0;

	padding-top: 0;

}

.trivia-details .download-catalog a:last-child {

	padding-bottom: 0;

}

.trivia-details .download-catalog a i {

	font-size: 24px;

	margin-right: 8px;

	color: var(--accent-color);

}

.trivia-details .download-catalog a:hover {

	color: var(--accent-color);

}

.trivia-details .help-box {

	background-color: var(--accent-color);

	color: var(--contrast-color);

	margin-top: 30px;

	padding: 30px 15px;

}

.trivia-details .help-box .help-icon {
	font-size: 48px;

}

.trivia-details .help-box h4,.trivia-details .help-box a {
	color: var(--contrast-color);

}

.trivia-details .trivia-img {
	margin-bottom: 20px;

}

.trivia-details h3 {
	font-size: 26px;
	font-weight: 700;

}

.trivia-details p {
	font-size: 15px;

}

.trivia-details ul {
	list-style: none;
	padding: 0;
	font-size: 15px;

}

.trivia-details ul li {
	padding: 5px 0;
	display: flex;
	align-items: center;

}

.trivia-details ul i {
	font-size: 20px;
	margin-right: 8px;
	color: var(--accent-color);

}

/* BODY BACKGROUND START */



/* Homepage: prevent stretched-link overlay from blocking sections below */
body.home .stretched-link::after {pointer-events: none !important;}



/*4 March 2026*/
/* Regulation Callout Box */
.regulation-box {

	float:right;

	width:500px;

	max-width:100%;

	margin:0 0 18px 18px;

	background:#ffffff;

	border:1.5px solid #111;

	border-radius:12px;

	box-shadow:0 10px 24px rgba(0,0,0,.08);

	overflow:hidden;

	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

}

/* Header */
.regulation-header {

	display:flex;

	align-items:center;

	gap:10px;

	padding:12px 14px;

	background:linear-gradient(90deg,#0b2a4a,#163b63);

	color:#ffffff;

}

.reg-symbol {

	width:28px;

	height:28px;

	border-radius:8px;

	background:rgba(255,255,255,.14);

	display:flex;

	align-items:center;

	justify-content:center;

	font-weight:800;

}

.reg-main {

	font-weight:800;

	font-size:0.75rem;
	/*95 original*/
}

.reg-sub {

	font-size:0.60rem;
	/*82 original*/
	opacity:.9;

}

/* Body */
.regulation-body {

	padding:12px 14px 10px;

	line-height:1.35;

	font-size:0.75rem;
	/*95 original*/
	color:#111;

}

.reg-label {

	display:inline-block;

	padding:3px 8px;

	margin:0 0 10px 0;

	font-size:0.50rem;
	/*78 original*/
	font-weight:700;

	letter-spacing:.3px;

	border:1px solid rgba(0,0,0,.18);

	border-radius:999px;

	background:#f6f8fb;

	color:#0b2a4a;

}

/* Footer */
.regulation-footer {

	margin-top:10px;

	padding-top:10px;

	border-top:1px dashed rgba(0,0,0,.22);

	display:flex;

	justify-content:space-between;

	align-items:flex-start;

	gap:10px;

	font-size:0.60rem;
	/*82 original*/
	color:rgba(0,0,0,.75);

}

.reg-brand {

	padding:4px 8px;

	border-radius:8px;

	background:#f1f5ff;

	border:1px solid rgba(11,42,74,.18);

	color:#0b2a4a;

	font-weight:700;

}

/* Float helper */
.float-clear {

	clear:both;

}

/* Mobile layout */
@media (max-width:720px) {

	.regulation-box {

		float:none;

		width:100%;

		margin:14px 0;

	}

}