/* Fonts: includes/head_fonts.php (via resources.php). Bootstrap Icons: resources.php or head_bootstrap_icons_async.php on home. */
/* Root Variables */
:root {
--color-background: #faf9f6;
--color-blog-surface: #faf9f6;
--color-black: #000000;
--color-white: #ffffff;
--color-grey-light: #e0e0e0;  
--color-grey-dark: #242323;
--color-grey-medium: #605E5E;
--color-secondary-text: #28282B;
--color-cta: #b9a0c9;
--color-lilac-text: #6b5380;
--color-home1: #2b3a67;
--color-home2: #2b3a67;
--color-home3: #5c5470; 
--color-home4: #dbd8e3; 
--color-home5: #2b314c;
--color-ochre: #e8b05a;
--color-ochre2:#f5debd;
--color-blue: #2b345d;
--color-lilac: #b9a0c9;
--color-lilac2: #bfaece;
--color-lilac3: #cabbd6;
--color-lilac4: #d4cbde;
--color-pink: #dfafb1;
--color-light-pink: #f5eaeb;
--font-primary: "Poppins", sans-serif;
--font-secondary: "Domine", serif;
--fs-base: 1rem;
--fs-h1: 6rem;
--fs-h2: 4rem;
--fs-h3: 3.4rem;
--fs-lg: 2.5rem;
}
/* SITE DEFAULTS */
body {
background-color: var(--color-white);
overflow-x: hidden;
font-family: var(--font-primary);
font-size: var(--fs-base);
font-weight: 400;
line-height: 1.5;
color: var(--color-secondary-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: var(--color-black);
}
.btn-outline {
border-color: var(--color-lilac-text);
color: var(--color-lilac-text);
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
}
.btn-outline:hover {
background-color: var(--color-cta);
border-color: var(--color-cta);
color: var(--color-white);
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
}
.bg-image {
position: relative;
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
background-color: var(--color-home1);
}
.container {
position: relative;
z-index: 1;
}
#h1-image {
font-family: var(--font-primary);
font-weight: 300;
font-size: var(--fs-h1);
color: var(--color-white);
padding-top: 6rem;
margin-bottom: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
}
#p-image {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
font-size: var(--fs-lg);
margin-right: 5rem;
color: var(--color-white);
}
#h1-image-black {
font-family: var(--font-primary);
font-size: var(--fs-h2);
font-style: normal;
font-weight: 100;
color: var(--color-black);
margin-top: 4rem;
}
#h1-image-black-mobile {
font-family: var(--font-secondary);
font-size: 3rem;
font-style: normal;
font-weight: 100;
color: var(--color-black);
margin-top: 4rem;
padding-left: 1rem;
padding-bottom: 2rem;
}
#p-image-black {
display: inline-block;
font-family: var(--font-primary);
font-size: 1.8rem;
font-style: normal;
font-weight: 200;
text-transform: none;
color: var(--color-black);
}
#p-image-black-mobile {
display: inline-block;
font-family: var(--font-primary);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.65;
text-transform: none;
color: #5a5a5a;
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 1.5rem;
}
/* HEADER */
.navbar-nav:first-child {
margin-left: 5rem;
}
.navbar-nav .nav-link {
font-family: var(--font-primary);
font-size: var(--fs-base);
font-style: normal;
font-weight: 500;
text-align: left;
color: var(--color-black);
margin-right: 1rem;
}
ul.dropdown-menu.show {
margin-top: 1.625rem;
}
.dropdown-menu .dropdown-item {
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
text-align: left;
color: var(--color-secondary-text);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
background-color: var(--color-lilac);
color: var(--color-white);
}
/* SEARCH FUNCTION */
.custom-input-group {
padding-top: 6.25rem;
width: 50%;
}
.custom-input {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
height: 3.75rem;
font-size: 2rem;
}
.custom-button {
height: 3.75rem;
font-size: 1.125rem;
background-color: var(--color-lilac);
border: 0;
}
.custom-button2 {
height: 1.75rem;
font-size: 0.9rem;
background-color: var(--color-lilac);
border: 0;
color: var(--color-white);
}
.custom-button2:hover {
height: 1.75rem;
font-size: 0.9rem;
background-color: var(--color-lilac);
border: 0;
color: var(--color-white);
}
.search-results-container {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
border: 1px solid #ccc;
border-radius: 0.25rem;
display: none;
}
#searchResults {
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
}
#searchResults .result-item {
cursor: pointer;
padding: 8px 10px;
}
#searchResults .result-item:hover {
background-color: #d3c6e6;
color: #000;
}
@media (max-width: 576px) {
.custom-input {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
height: 2.5rem;
font-size: 1.5rem;
}
.custom-button {
height: 2.5rem;
font-size: 1rem;
background-color: var(--color-lilac);
border: 0;
}
.custom-button2 {
height: 2.5rem;
font-size: 1rem;
background-color: var(--color-lilac);
border: 0;
color: var(--color-white);
}
.custom-button2:hover {
height: 2.5rem;
font-size: 1rem;
background-color: var(--color-lilac);
border: 0;
color: var(--color-white);
}
}
@media (min-width: 577px) and (max-width: 768px) {
.custom-input {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
height: 3.75rem;
font-size: 1.5rem;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.custom-input {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
height: 3.75rem;
font-size: 2rem;
}
}
/* SPACE TO LEARN */
#space-to-learn {
background-color: var(--color-grey-dark);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
#space-to-learn.col-xl-5,
#course-hero.col-xl-5,
#space-to-learn.d-xl-block,
#space-to-learn .d-xl-block {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
min-height: 0;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
box-sizing: border-box;
overflow: visible;
}
#space-to-learn .d-xl-block .course-hero__title,
#space-to-learn .d-xl-block > h1,
#space-to-learn.col-xl-5 > h1,
#space-to-learn.col-xl-5 > .course-hero__title,
#course-hero.col-xl-5 > h1,
#course-hero.col-xl-5 > .course-hero__title {
max-width: min(85%, calc(100% - 6rem));
font-size: 2.85rem;
line-height: 1.25;
padding-top: 0;
margin-left: 3rem;
margin-right: 3rem;
margin-bottom: 1.5rem;
padding-right: 0;
box-sizing: border-box;
flex-shrink: 0;
}
#course-hero.col-5 .course-hero__title,
#course-hero.col-xl-5 .course-hero__title {
max-width: min(85%, calc(100% - 6rem));
font-size: 2.85rem;
line-height: 1.25;
padding-top: 0;
margin-left: 3rem;
margin-right: 3rem;
margin-bottom: 1.5rem;
padding-right: 0;
box-sizing: border-box;
flex-shrink: 0;
}
/* Keep hero copy from collapsing when the column matches carousel height */
#space-to-learn.col-xl-5 > *,
#course-hero.col-xl-5 > * {
flex-shrink: 0;
}
}
/* Hero titles on dark panels only — do not set white on bare .course-hero__title (reviews mobile h2, etc.) */
#space-to-learn h1,
#space-to-learn h2,
#space-to-learn .course-hero__title,
#course-hero h1,
#course-hero h2,
#course-hero .course-hero__title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.5rem;
line-height: 1.15;
color: var(--color-white);
padding-top: 4rem;
margin-bottom: 2rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: auto;
max-width: 26rem;
}
#space-to-learn p:not(.display-6):not(.card-title) {
font-family: var(--font-primary);
font-style: normal;
font-weight: 300;
font-size: 1.15rem;
line-height: 1.6;
margin-left: 3rem;
margin-right: 5rem;
margin-bottom: 2.5rem;
color: var(--color-white);
}
#space-to-learn .hero-liner-lead,
#course-hero .hero-liner-lead {
font-family: var(--font-primary);
font-size: 1.05rem;
font-weight: 400;
line-height: 1.45;
margin-left: 3rem;
margin-right: 3rem;
margin-bottom: 0.65rem;
color: var(--color-white);
opacity: 1;
}
#space-to-learn .hero-liner-body,
#course-hero .hero-liner-body {
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 300;
line-height: 1.65;
margin-left: 3rem;
margin-right: 3rem;
margin-bottom: 2.5rem;
color: #d8d8d8;
}
/* COURSE CARDS */
h2.course-title-course-card {
font-family: var(--font-secondary);
font-size: 2.1rem;
font-style: normal;
font-weight: 500;
text-transform: none;
text-align: left;
color: var(--color-black);
margin-bottom: 0.625rem;
}
p.two-liner-course-card {
font-family: var(--font-primary);
font-size: 1rem;
font-style: normal;
font-weight: 400;
text-transform: none;
text-align: left;
line-height: 2rem;
color: var(--color-black);
max-width: 95%;
padding-top: 0.9375rem;
}
p.price-course-card {
display: inline-block;
font-family: var(--font-primary);
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
text-transform: capitalize;
text-align: left;
line-height: 1.4rem;
color: var(--color-black);
background-clip: text;
}
p.logistics-course-card {
font-family: var(--font-primary);
font-size: 0.70rem;
font-style: normal;
font-weight: 600;
text-transform: capitalize;
text-align: left;
line-height: 1rem;
color: var(--color-secondary-text);
}
p.overview-course-card {
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 300;
text-align: left;
color: var(--color-secondary-text);
}
ul.takeaways-course-card {
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 300;
text-align: left;
color: var(--color-secondary-text);
}
p.review-quote-course-card {
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 300;
text-align: left;
color: var(--color-secondary-text);
}
p.review-company-course-card {
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 600;
text-align: left;
color: var(--color-black);
}
.adobe-authorised {
display: inline-block;
max-width: 12.5rem;
}
button.accordion-button {
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
text-align: left;
color: var(--color-black);
}
.accordion-item .accordion-button {
padding-left: 1rem; /* already in rem */
border-color: var(--color-lilac);
}
.accordion-item .accordion-button:not(.collapsed) {
background-color: var(--color-lilac);
color: var(--color-white);
}
.accordion-button:not(.collapsed)::after {
color: var(--color-white);
}
#call-to-action {
background-color: var(--color-lilac);
border-color: var(--color-lilac);
color: var(--color-white);
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
}
#call-to-action:hover {
color: var(--color-lilac);
border-color: var(--color-lilac);
background-color: var(--color-white);
font-family: var(--font-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
}
/* SUBJECT FAQS */
#questions {
font-family: var(--font-primary);
font-size: 1.2rem;
font-style: normal;
font-weight: 200;
text-align: left;
color: var(--color-secondary-text);
}
#p-questions {
display: inline-block;
font-family: var(--font-primary);
font-size: 2.2rem;
font-style: normal;
font-weight: 200;
text-transform: none;
color: var(--color-black);
margin-left: 0;
}
#questions .accordion-item .accordion-button {
padding-left: 1rem;
border-color: var(--color-lilac);
}
#questions .accordion-item .accordion-button:not(.collapsed) {
background-color: var(--color-lilac);
color: var(--color-white);
}
#questions .accordion-button:not(.collapsed)::after {
color: var(--color-white);
}
/* CAREERS CONTAINERS */
.careers-container1 {
background-color: var(--color-home1);
}
.careers-container1 p {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
font-size: 1.8rem;
margin-right: 5rem;
padding-top: 5rem;
padding-bottom: 5rem;
color: var(--color-white);
}
.careers-container2 {
background-color: var(--color-background);
}
.careers-container2 p {
display: inline-block;
font-family: var(--font-primary);
font-size: 3rem;
font-style: normal;
font-weight: 200;
text-transform: none;
color: var(--color-black);
text-align: left;
margin-left: 2rem;
margin-bottom: 1rem;
}
table.table {
margin-left: 0rem;
margin-right: 0rem;
}
table.table thead th {
font-family: var(--font-primary);
font-size: 1.1rem;
font-style: normal;
font-weight: 500;
text-align: left;
color: var(--color-black);
padding-bottom: 1.2rem;
}
table.table tbody tr {
font-family: var(--font-primary);
font-size: 1rem;
font-style: normal;
font-weight: 400;
text-align: left;
color: var(--color-black);
background-color: var(--color-white);
}
.career-job {
display: inline-block;
font-family: var(--font-primary);
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-transform: none;
color: var(--color-black);
text-align: left;
margin-left: 2rem;
margin-bottom: 3rem;
}
.career-attributes-list li {
font-family: var(--font-primary);
font-size: 1.2rem;
font-style: normal;
font-weight: 300;
text-align: left;
color: var(--color-black);
margin-left: 2rem;
padding-bottom: 0.5rem;
}
.custom-row-padding [class^="col-"] + [class^="col-"] {
padding-left: 0;
}
.result-item {
cursor: pointer;
}
.mt-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.tab-content {
padding-left: 0 !important;
}
/* OUR COURSES */
#our-courses {
background-color: var(--color-white);
margin-bottom: 3rem;
}
#our-courses-cards {
margin-bottom: 6rem;
}
#our-courses-cards a.our-course-card {
border: 1px solid rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
color: inherit;
}
#our-courses-cards a.our-course-card:hover,
#our-courses-cards a.our-course-card:focus-visible {
box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.14);
color: inherit;
}
#our-courses-cards .card-body {
padding: 1rem 1rem 1.75rem;
}
#our-courses-cards .card-title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.3rem;
color: var(--color-black);
padding-top: 0.3rem;
margin: 0 0 1rem;
text-transform: none;
letter-spacing: -0.1rem;
line-height: 1.15;
}
#our-courses-cards .card-text {
font-family: var(--font-primary);
font-style: normal;
font-weight: 300;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
padding-bottom: 0;
color: var(--color-black);
}
#our-courses h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 3.4rem;
color: var(--color-black);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
#our-courses p {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
font-size: 1.4rem;
margin-left: 3rem;
margin-right: 5rem;
color: var(--color-black);
}
#our-courses-cards {
padding: 1rem;
}
@media (min-width: 768px) and (max-width: 991.98px) {
#our-courses-cards {
padding-left: 2rem;
padding-right: 2rem;
}
#our-courses-cards .card-title {
font-size: 1.6rem;
}
}
@media (min-width: 992px) {
#our-courses-cards {
padding-left: 3rem;
padding-right: 3rem;
}
}
.green-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%238DD3C7' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
/* Blog card title fix: the *-cap-line classes forced .card-body to a fixed 10px,
   so multi-line titles overflowed and overlapped the row below. Each blog section
   uses a different colour cap-line, so match any of them. Keep the coloured stripe
   pinned to the top of the body but let the body grow with the title. */
.blog-card .card-body[class*="cap-line"] {
height: auto;
background-position: left top;
background-size: auto 0.625rem;
background-repeat: repeat-x;
padding-top: 1.25rem;
}
.purple-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23BEBADA' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.orange1-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23FB8072' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.blue-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%2380B1D3' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.orange2-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23FDB462' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.green2-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23B3DE69' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.pink-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23FCCDE5' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.grey1-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23D9D9D9' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.yellow-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%23FFFFB3' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
.grey2-cap-line {
height: 0.625rem;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%236C757D' stroke-width='15' vector-effect='non-scaling-stroke'%3E%3C/line%3E%3C/svg%3E");
background-repeat: repeat-x;
}
/* STATS */
.stats {
width: 100%;
}
.home-stats-band {
background: linear-gradient(135deg, var(--color-grey-dark) 0%, #2a2a2a 100%);
padding: 2.25rem 0 2rem;
margin: 0;
}
.home-stats-band__grid {
max-width: 960px;
margin: 0 auto;
}
.home-stat-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.25rem 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.75rem;
height: 100%;
}
.home-stat-tile__icon {
font-size: 1.5rem;
color: var(--color-ochre);
margin-bottom: 0.5rem;
}
.home-stat-tile__value {
font-family: var(--font-secondary);
font-weight: 300;
font-size: clamp(2.25rem, 5vw, 3.25rem);
line-height: 1;
color: var(--color-ochre);
margin: 0 0 0.35rem;
letter-spacing: -0.06rem;
}
.home-stat-tile__suffix {
font-size: 0.55em;
font-weight: 400;
color: #e8e8e8;
}
.home-stat-tile__label {
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.95rem;
color: var(--color-white);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
#stats {
padding-left: 15rem;
padding-right: 15rem;
margin-bottom: 2rem;
}
#stats.home-stats-band {
padding-left: 0;
padding-right: 0;
margin: 0;
}
#stats h3 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 4.5rem;
color: var(--color-white);
padding-top: 1rem;
margin-bottom: 0;
margin-left: 1rem;
text-transform: none;
letter-spacing: -0.1rem;
text-align: left;
}
#stats p {
font-family: var(--font-primary);
font-style: normal;
font-weight: 500;
font-size: 1.2rem;
margin-left: 1rem;
margin-right: 1rem;
padding-bottom: 1.5rem;
color: var(--color-white);
text-align: left;
}
@media (max-width: 576px) {
#stats {
padding-left: 1rem;
padding-right: 1rem;
}
#stats h3 {
font-size: 3rem;
margin-left: 0.5rem;
}
#stats p {
font-size: 1rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
@media (min-width: 577px) and (max-width: 768px) {
#stats {
padding-left: 2rem;
padding-right: 2rem;
}
#stats h3 {
font-size: 4rem;
margin-left: 0.75rem;
}
#stats p {
font-size: 1.1rem;
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
@media (min-width: 769px) and (max-width: 992px) {
#stats {
padding-left: 4rem;
padding-right: 4rem;
}
#stats h3 {
font-size: 2rem;
margin-left: 0.75rem;
}
#stats p {
font-size: 1.1rem;
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
#statscourse {
margin-left: 1.75rem;
}
#statscourse .card {
border: none;
background-color: transparent;
box-shadow: none;
text-align: left;
}
#statscourse .card-body {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.2rem;
background-color: var(--color-grey-dark);
text-align: left;
min-height: 6.5rem;
}
#statscourse .stats-card .card-body {
display: flex;
flex-direction: column;
justify-content: center;
}
#statscourse .card-title {
font-family: var(--font-primary);
font-weight: 200;
font-size: 1.2rem;
color: var(--color-white);
text-align: center;
margin-top: 0.5rem;
}
#statscourse .display-6 {
font-family: var(--font-secondary);
font-weight: 200;
font-size: 3.5rem;
color: var(--color-ochre);
letter-spacing: -0.1rem;
text-align: center;
margin: 0;
}
#statscourse .btn {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1rem;
background-color: var(--color-ochre);
border: none;
color: var(--color-grey-dark);
padding: 0.6rem 1.2rem;
border-radius: 0.3rem;
text-transform: uppercase;
margin-bottom:3rem;
}
#statscourse .btn:hover {
background-color: var(--color-white);
color: var(--color-grey-dark);
border: 1px solid var(--color-ochre);
}
@media (min-width: 768px) {
#statscourse .col-md-4:first-of-type {
margin-left: 2rem;
}
}
/* LEARNER REVIEWS — full-width ochre quote band (home, category, course pages) */
.home-reviews-section {
width: 100vw;
max-width: 100vw;
margin: 0;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
height: calc(40rem + 60px);
background-color: var(--color-ochre);
padding: 0;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.home-reviews-stars {
position: absolute;
top: calc(1.75rem + 30px);
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 0.55rem;
margin: 0;
font-size: 3.705rem;
line-height: 1;
color: var(--color-secondary-text);
letter-spacing: 0.08em;
z-index: 2;
}
.home-reviews-carousel {
position: absolute;
top: calc(6.25rem + 30px);
left: 5.5rem;
right: 5.5rem;
height: 22rem;
margin: 0;
padding: 0 3.25rem;
box-sizing: border-box;
z-index: 1;
}
.home-reviews-carousel .carousel-inner {
position: relative;
width: 100%;
height: 22rem;
}
.home-reviews-carousel .carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
float: none;
}
.home-reviews-carousel .carousel-item.active {
display: flex;
z-index: 1;
}
.home-reviews-carousel.carousel-fade .carousel-item {
opacity: 0;
transition: opacity 0.18s ease-out;
}
.home-reviews-carousel.carousel-fade .carousel-item.active {
opacity: 1;
}
.home-reviews-carousel .review-slide-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-review-slide {
width: 100%;
max-width: 52rem;
height: 17.5rem;
margin: 0 auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
box-sizing: border-box;
}
.home-reviews-section .review-text {
font-family: var(--font-secondary);
font-weight: 400;
font-style: normal;
font-size: clamp(1.35rem, 2vw, 1.75rem);
line-height: 1.55;
letter-spacing: 0;
color: var(--color-secondary-text);
margin: 0 auto;
padding: 0;
border: none;
max-width: 52rem;
width: 100%;
height: 8.5rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.home-reviews-section .review-text__inner::before {
content: '\201C';
margin-right: 0.1em;
}
.home-reviews-section .review-text__inner::after {
content: '\201D';
margin-left: 0.1em;
}
.home-reviews-section .review-text__inner {
display: inline;
text-align: center;
font-family: inherit;
}
.home-reviews-section .review-footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
flex-shrink: 0;
height: 5.75rem;
margin: 1.25rem 0 0;
padding: 0;
}
.home-reviews-section .review-footer::before {
content: '';
display: block;
width: 3.5rem;
height: 2px;
background: rgba(255, 255, 255, 0.65);
margin: 0 auto 1.35rem;
}
.home-reviews-section .review-company {
font-family: var(--font-secondary);
font-style: normal;
font-weight: 400;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
line-height: 1.3;
letter-spacing: -0.01em;
text-transform: none;
color: var(--color-secondary-text);
margin: 0;
}
.home-reviews-section .review-date-course {
font-family: var(--font-primary);
font-weight: 400;
font-size: 0.88rem;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #3d3d40;
margin: 0;
}
.home-reviews-cta {
position: absolute;
bottom: calc(2.25rem + 30px);
left: 50%;
transform: translateX(-50%);
z-index: 3;
margin: 0;
text-align: center;
width: auto;
}
.home-reviews-btn {
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.95rem;
background-color: var(--color-grey-dark);
border: none;
color: var(--color-white);
padding: 0.65rem 1.5rem;
border-radius: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.home-reviews-btn:hover,
.home-reviews-btn:focus {
background-color: var(--color-white);
color: var(--color-grey-dark);
}
.home-reviews-section .review-carousel-prev,
.home-reviews-section .review-carousel-next {
border: none;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3.25rem;
height: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.35);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 50%;
opacity: 1;
z-index: 2;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.home-reviews-section .review-carousel-prev:hover,
.home-reviews-section .review-carousel-next:hover {
background: rgba(255, 255, 255, 0.55);
border-color: rgba(0, 0, 0, 0.2);
}
.home-reviews-section .review-carousel-prev {
left: 2.5rem;
}
.home-reviews-section .review-carousel-next {
right: 2.5rem;
}
.home-reviews-section .review-carousel-prev .carousel-control-prev-icon,
.home-reviews-section .review-carousel-next .carousel-control-next-icon {
width: 1.35rem;
height: 1.35rem;
background-size: contain;
filter: invert(1) grayscale(1) brightness(0.15);
}
/* WHO ATTENDS OUR COURSES — band height aligned with .home-reviews-section (~40rem) */
#who-attends-our-courses {
background-color: var(--color-blue);
padding-top: 4.5rem;
padding-bottom: 4.5rem;
display: flex;
flex-wrap: wrap;
}
#who-attends-our-courses .intro {
flex: 1 0 25%;
color: var(--color-white);
padding-left: 3rem;
}
#who-attends-our-courses h2 {
font-family: var(--font-secondary);
color: var(--color-white);
font-weight: 300;
font-size: 4rem;
letter-spacing: -0.1rem;
padding-bottom: 2rem;
}
#who-attends-our-courses .who-attends-block {
flex: 1 0 25%;
box-sizing: border-box;
padding: 1.25rem;
text-align: center;
color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
#who-attends-our-courses .who-attends-icon {
width: 7.5rem;
height: 7.5rem;
max-width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
margin-bottom: 1rem;
}
#who-attends-our-courses .who-attends-block h3,
#who-attends-our-courses .who-attends-block h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.7rem;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: -0.1rem;
padding-bottom: 0.75rem;
padding-top: 1rem;
}
#who-attends-our-courses .who-attends-block p {
font-weight: 200;
font-size: 1.1rem;
line-height: 1.4;
padding-left: 20%;
padding-right: 18%;
}
.who-attends-btn {
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid var(--color-white);
color: var(--color-white);
background-color: transparent;
text-decoration: none;
font-weight: 400;
border-radius: 4px;
transition: all 0.3s ease;
margin-top: 1.25rem;
}
.who-attends-btn:hover {
background-color: var(--color-ochre);
color: #fff;
text-decoration: none;
}
@media (max-width: 767.98px) {
#who-attends-our-courses h2 {
font-family: var(--font-secondary);
color: var(--color-white);
font-weight: 300;
font-size: 3rem;
letter-spacing: -0.1rem;
padding-bottom: 2rem;
}
}
/* THREE WAYS TO LEARN — band height aligned with .home-reviews-section (~40rem) */
#three-ways-to-learn {
background-color: var(--color-background);
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
#three-ways-to-learn h2 {
font-family: var(--font-secondary);
color: var(--color-black);
font-weight: 300;
font-size: 4rem;
letter-spacing: -0.1rem;
padding-bottom: 2rem;
}
#three-ways-to-learn h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.7rem;
color: var(--color-black);
text-transform: uppercase;
letter-spacing: -0.1rem;
padding-bottom: 0.75rem;
padding-top: 1rem;
}
#three-ways-to-learn p {
font-weight: 200;
font-size: 1.1rem;
line-height: 1.4;
padding-left: 20%;
padding-right: 18%;
}
.learn-way-icon {
width: 7rem;
height: 7rem;
aspect-ratio: 1 / 1;
object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;
}
.learn-way-btn {
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid var(--color-black);
color: var(--color-black);
background-color: transparent;
text-decoration: none;
font-weight: 400;
border-radius: 4px;
transition: all 0.3s ease;
margin-top: 1.25rem;
}
.learn-way-btn:hover {
background-color: var(--color-black);
color: #fff;
text-decoration: none;
}
@media (max-width: 767.98px) {
#three-ways-to-learn h2 {
font-family: var(--font-secondary);
color: var(--color-black);
font-weight: 300;
font-size: 3rem;
letter-spacing: -0.1rem;
padding-bottom: 2rem;
}
#three-ways-to-learn p {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
#certify-your-skills .container-fluid,
#certify-your-skills .row {
margin: 0;
padding: 0;
overflow: visible;
}
#certify-your-skills {
min-height: 700px;
height: 700px;
overflow: hidden;
}
.skill-panel {
height: 700px;
color: var(--color-grey-dark);
position: relative;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: visible;
}
.panel-1 {
font-family: var(--font-secondary);
background-color: var(--color-lilac);
text-align: left;
align-items: flex-start;
}
.panel-1 .section-title {
font-size: 3.4rem; /* your big size */
font-weight: 300;
text-transform: none;
letter-spacing: -0.1rem;
padding-left: 40px;
}
.panel-2 {
font-family: var(--font-primary);
background-color: var(--color-lilac2);
}
.panel-3 {
font-family: var(--font-primary);
background-color: var(--color-lilac3);
}
.panel-4 {
font-family: var(--font-primary);
background-color: var(--color-lilac4);
}
.panel-1::after{
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: 175px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid var(--color-lilac);
z-index: 5;    
}
.panel-2::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: 0px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid var(--color-lilac2);
z-index: 5;
}
.panel-3::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -175px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid var(--color-lilac3);
z-index: 5;
}
.panel-4::after {
display: none;
}
.step-content {
padding: 20px;
text-align: center;
z-index: 10;
}
.big-number {
font-family: var(--font-primary);
font-size: 5.5rem;
font-weight: 600;
border: 6px solid white;
border-radius: 10px;
padding: 5px 40px;
margin: 0 auto 10px;
display: inline-block;
}
.step-title,
h3.step-title {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.7rem;
color: var(--color-lilac-text);
text-transform: uppercase;
letter-spacing: -0.1rem;
padding-bottom: 1rem;
padding-top: 2rem;
}
.step-description {
font-weight: 200;
font-size: 1.1rem;
line-height: 1.4;
padding-left: 20%;
padding-right: 18%;
color: var(--color-grey-dark);
}
.section-title {
font-family: var(--font-secondary);
color: var(--color-grey-dark);
font-weight: 300;
font-size: 4rem;
letter-spacing: -0.1rem;
padding-bottom:4rem;
}
/* OUR EXPERTS */
#our-experts {
display: flex;
align-items: stretch;
min-height: 800px;
}
#our-experts .expert-info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
}
#our-experts iframe {
height: 100%;
border: 0;
}
/* FOLLOW-ON COURSES */
#follow-on-courses {
padding-top: 3rem;
padding-bottom: 3rem!important;
}
#follow-on-courses h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 3.4rem;
color: var(--color-black);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
#follow-on-courses p.para {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
font-size: 1.4rem;
margin-left: 3rem;
margin-right: 5rem;
color: var(--color-black);
}
#follow-on-courses h4 {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1.4rem;
color: var(--color-black);
text-align: left;
}
#follow-on-courses h5 {
font-family: var(--font-primary);
font-weight: 300;
font-size: 0.9rem;
color: var(--color-black);
text-align: left;
}
#follow-on-courses p {
font-family: var(--font-primary);
font-weight: 400;
font-size: 1.1rem;
color: var(--color-black);
text-align: left;
}
/* RELATED COURSES */
.related-courses-section {
  padding: 6.25rem 0;
}
.related-courses-section .card-text {
  font-weight: 400;
  font-size: 1.1rem;
}
.related-courses-section .btn-outline-primary {
  color: var(--color-lilac);
  border-color: var(--color-lilac);
}
.related-courses-section .btn-outline-primary:hover {
  background-color: var(--color-lilac);
  color: var(--color-white);
  border-color: var(--color-lilac);
}
/* FURTHER READING */
.further-reading-section {
  padding: 4rem 0;
  background-color: var(--color-light-grey, #f8f9fa);
}
/* Course detail — career paths feature */
.course-careers-feature {
  background-color: var(--color-background);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: none;
  padding: 3rem 0 0;
  margin: 2rem 0 0;
}
.course-careers-feature__header {
  margin-bottom: 1.5rem;
  max-width: 44rem;
}
.course-careers-feature__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lilac-text);
  margin: 0 0 0.5rem;
}
.course-careers-feature__title {
  font-family: var(--font-secondary);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.05rem;
  color: var(--color-black);
  margin: 0 0 0.85rem;
}
.course-careers-feature__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-grey-medium);
  margin: 0;
}
.course-careers-feature__lead strong {
  font-weight: 500;
  color: var(--color-grey-dark);
}
.course-careers-feature__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
}
.course-careers-feature__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-grey-dark);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.course-careers-feature__pill:hover,
.course-careers-feature__pill:focus-visible {
  border-color: var(--color-lilac3);
  background-color: rgba(200, 181, 246, 0.18);
  color: var(--color-black);
  text-decoration: none;
}
.course-careers-feature__footer {
  margin-top: 1.5rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.course-careers-feature__hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-primary);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}
.course-careers-feature__hub-link:hover,
.course-careers-feature__hub-link:focus-visible {
  color: var(--color-lilac-text);
  gap: 0.6rem;
}
@media (max-width: 767.98px) {
  .course-careers-feature {
    padding-top: 2.5rem;
    margin-top: 1.5rem;
  }
  .course-careers-feature__header {
    margin-bottom: 1.5rem;
  }
}
/* Career detail page */
body.career-detail-page {
  background-color: var(--color-background);
}
.career-detail-hero-row .course-hero__image {
  object-fit: cover;
  min-height: 100%;
}
@media (min-width: 1200px) {
.career-detail-hero-row,
.careers-hub-hero-row {
  align-items: stretch;
  min-height: 26rem;
}
.career-detail-hero-row #course-hero,
.career-detail-hero-row #space-to-learn,
.careers-hub-hero-row #course-hero,
.careers-hub-hero-row #space-to-learn {
  min-height: 26rem;
}
.career-detail-hero-row .course-hero__image-col,
.careers-hub-hero-row .course-hero__image-col {
  display: flex;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  min-height: 26rem;
}
.career-detail-hero-row .course-hero__image,
.careers-hub-hero-row .course-hero__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  flex: 1 1 auto;
}
}
.career-detail {
  padding: 1.5rem 0 0;
}
.career-detail .breadcrumb-nav {
  margin-bottom: 2rem;
}
.career-detail-section {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.career-detail-section--courses {
  border-bottom: none;
  padding-bottom: 0.5rem;
}
.career-detail-section__title {
  font-family: var(--font-secondary);
  font-weight: 300;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.04rem;
  color: var(--color-black);
  margin: 0 0 1rem;
}
.career-detail-section__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-grey-medium);
  max-width: 42rem;
  margin: 0 0 1.5rem;
}
.career-detail-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.75rem;
}
.career-detail-skills__item {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-white);
  color: var(--color-grey-dark);
  border: 1.5px solid var(--color-lilac3);
  border-radius: 2rem;
  padding: 0.5em 1.15em;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
}
.career-detail-job-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  max-width: 40rem;
}
.career-detail-job-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-lilac);
  border-radius: 1rem;
  color: var(--color-grey-dark);
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.career-detail-job-link:hover,
.career-detail-job-link:focus-visible {
  background-color: var(--color-lilac);
  border-color: var(--color-lilac);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.career-detail-job-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-light-pink);
  color: var(--color-lilac-text);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.career-detail-job-link:hover .career-detail-job-link__icon,
.career-detail-job-link:focus-visible .career-detail-job-link__icon {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}
body.career-detail-page .career-detail-section--courses + .container.mt-5,
body.career-detail-page main > .container.mt-5 {
  margin-top: 0.5rem !important;
  padding-top: 0;
}
@media (max-width: 767.98px) {
  .career-detail-section {
    padding: 2rem 0;
  }
  .career-detail-job-links {
    grid-template-columns: 1fr;
  }
}
/* Careers hub (listing) page */
body.careers-hub-page {
  background-color: var(--color-background);
}
.careers-hub-hero-row .course-hero__image {
  object-fit: cover;
  min-height: 100%;
}
.careers-hub {
  padding: 1.5rem 0 3.5rem;
}
.careers-hub .breadcrumb-nav {
  margin-bottom: 2rem;
}
.careers-hub-list__header {
  margin-bottom: 2rem;
}
.careers-hub-list__title {
  font-family: var(--font-secondary);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.05rem;
  color: var(--color-black);
  margin: 0 0 0.75rem;
}
.careers-hub-list__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-grey-medium);
  max-width: 44rem;
  margin: 0;
}
.careers-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  margin-bottom: 2rem;
}
.careers-hub-search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
}
.careers-hub-search__icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-lilac-text);
  font-size: 1rem;
  pointer-events: none;
}
.careers-hub-search__input {
  width: 100%;
  padding: 0.85rem 1.15rem 0.85rem 2.85rem;
  border: 1.5px solid var(--color-lilac3);
  border-radius: 999px;
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-grey-dark);
  box-shadow: 0 2px 12px rgba(43, 52, 93, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.careers-hub-search__input::placeholder {
  color: var(--color-grey-medium);
}
.careers-hub-search__input:hover {
  border-color: var(--color-lilac2);
}
.careers-hub-search__input:focus {
  outline: none;
  border-color: var(--color-lilac);
  box-shadow: 0 0 0 3px rgba(185, 160, 201, 0.28);
}
.careers-hub-search__status {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-lilac-text);
}
.careers-hub-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px dashed var(--color-lilac3);
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.7);
}
.careers-hub-empty__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-secondary);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--color-black);
}
.careers-hub-empty__text {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.98rem;
  color: var(--color-grey-medium);
}
.careers-hub-card-wrap.is-hidden {
  display: none !important;
}
.careers-hub-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.25rem;
  box-shadow: 0 4px 18px rgba(43, 52, 93, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.careers-hub-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-lilac), var(--color-lilac3));
}
.careers-hub-card-wrap:nth-child(3n + 2) .careers-hub-card::before {
  background: linear-gradient(90deg, var(--color-ochre), #f0cf98);
}
.careers-hub-card-wrap:nth-child(3n) .careers-hub-card::before {
  background: linear-gradient(90deg, var(--color-blue), #4a5588);
}
.careers-hub-card:hover,
.careers-hub-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(185, 160, 201, 0.45);
  box-shadow: 0 18px 42px rgba(43, 52, 93, 0.14);
}
.careers-hub-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.4rem 1.35rem;
  color: inherit;
  text-decoration: none;
}
.careers-hub-card__link:hover,
.careers-hub-card__link:focus-visible {
  color: inherit;
  text-decoration: none;
}
.careers-hub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--color-lilac4), rgba(255, 255, 255, 0.9));
  color: var(--color-lilac-text);
  font-size: 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(185, 160, 201, 0.35);
}
.careers-hub-card-wrap:nth-child(3n + 2) .careers-hub-card__icon {
  background: linear-gradient(135deg, var(--color-ochre2), rgba(255, 255, 255, 0.95));
  color: #8a5f12;
  box-shadow: inset 0 0 0 1px rgba(232, 176, 90, 0.45);
}
.careers-hub-card-wrap:nth-child(3n) .careers-hub-card__icon {
  background: linear-gradient(135deg, #e8eaf3, rgba(255, 255, 255, 0.95));
  color: var(--color-blue);
  box-shadow: inset 0 0 0 1px rgba(43, 52, 93, 0.12);
}
.careers-hub-card__title {
  font-family: var(--font-secondary);
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: 0 0 1rem;
}
.careers-hub-card__salary-box {
  flex-grow: 1;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(185, 160, 201, 0.14), rgba(250, 249, 246, 0.95));
  border: 1px solid rgba(185, 160, 201, 0.22);
}
.careers-hub-card-wrap:nth-child(3n + 2) .careers-hub-card__salary-box {
  background: linear-gradient(135deg, rgba(232, 176, 90, 0.16), rgba(250, 249, 246, 0.95));
  border-color: rgba(232, 176, 90, 0.28);
}
.careers-hub-card-wrap:nth-child(3n) .careers-hub-card__salary-box {
  background: linear-gradient(135deg, rgba(43, 52, 93, 0.08), rgba(250, 249, 246, 0.95));
  border-color: rgba(43, 52, 93, 0.12);
}
.careers-hub-card__salary-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-lilac-text);
  margin-bottom: 0.3rem;
}
.careers-hub-card__salary-value {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-blue);
}
.careers-hub-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.15rem;
}
.careers-hub-card__cta {
  font-family: var(--font-primary);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-lilac-text);
  transition: color 0.15s ease;
}
.careers-hub-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background-color: var(--color-lilac);
  color: var(--color-white);
  font-size: 0.95rem;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.careers-hub-card:hover .careers-hub-card__cta,
.careers-hub-card:focus-within .careers-hub-card__cta {
  color: var(--color-lilac);
}
.careers-hub-card:hover .careers-hub-card__arrow,
.careers-hub-card:focus-within .careers-hub-card__arrow {
  transform: translateX(2px);
  background-color: var(--color-lilac-text);
}
@media (max-width: 767.98px) {
  .careers-hub {
    padding-bottom: 2.5rem;
  }
  .careers-hub-list__header {
    margin-bottom: 1.5rem;
  }
  .careers-hub-toolbar {
    margin-bottom: 1.5rem;
  }
  .careers-hub-search {
    max-width: none;
    flex-basis: 100%;
  }
  .careers-hub-search__status {
    width: 100%;
  }
}
/* CENTRE VIDEO */
#our-training-centre {
background-color: var(--color-pink);
}
#our-training-centre h1,
#our-training-centre h2,
#our-training-centre .course-hero__title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.5rem;
line-height: 1.15;
color: var(--color-white);
padding-top: 4rem;
margin-bottom: 2rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: auto;
max-width: 26rem;
}
#our-training-centre p.para {
font-family: var(--font-primary);
font-style: normal;
font-weight: 300;
font-size: 1.15rem;
line-height: 1.6;
margin-left: 3rem;
margin-right: 5rem;
margin-bottom: 2.5rem;
color: var(--color-white);
}
/* NEW & TRENDING COURSES */
.course-carousel-section {
padding: 6.25rem 0;
}
.course-carousel-section--home {
padding: 2.5rem 0 4rem;
}
.course-carousel-section h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 3.4rem;
color: var(--color-black);
padding-top: 6rem;
margin: 0 0 3rem 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
.course-carousel-section p.para {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
font-size: 1.4rem;
margin: 0 5rem 0 3rem;
color: var(--color-black);
}
.course-carousel-section p,
.course-carousel-section h4,
.course-carousel-section h5 {
font-family: var(--font-primary);
color: var(--color-black);
text-align: left;
}
.course-carousel-section p {
font-weight: 400;
font-size: 1.1rem;
}
.course-carousel-section h4 {
font-weight: 500;
font-size: 1.4rem;
}
.course-carousel-section h5 {
font-weight: 300;
font-size: 0.9rem;
}
.course-carousel-section .carousel-inner {
transition: height 0.3s ease;
}
.course-carousel-section .carousel-inner .card .card-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.course-carousel-section .carousel-inner .card .card-body {
padding: 0.65rem 0.85rem 0.25rem;
}
.course-carousel-section .carousel-inner .card .card-body h3.card-title,
.course-carousel-section .carousel-inner .card .card-body h4.card-title,
.course-carousel-section .carousel-inner .card .card-body p.card-title {
margin-bottom: 0.25rem;
font-size: 1.2rem;
line-height: 1.25;
}
.course-carousel-section .carousel-inner .card .card-body p.card-title a {
color: inherit;
text-decoration: none;
}
.course-carousel-section .carousel-inner .card .card-body p.card-title a:hover,
.course-carousel-section .carousel-inner .card .card-body p.card-title a:focus {
color: var(--color-lilac-text);
}
.course-carousel-section .carousel-inner .card .card-body p.card-text {
margin-bottom: 0.35rem;
font-size: 1rem;
}
.course-carousel-section .carousel-inner .card .card-body p.card-liner,
.course-carousel-section .carousel-inner .card .card-body h5.card-title {
margin-bottom: 0;
line-height: 1.4;
font-size: 0.85rem;
font-weight: 300;
}
.course-carousel-section .carousel-inner .card .card-footer {
padding: 0.35rem 0.85rem 0.6rem;
}
.course-carousel-section .carousel-control-prev-icon,
.course-carousel-section .carousel-control-next-icon {
filter: invert(1) grayscale(1) brightness(0.3);
}
.course-carousel-section .carousel-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(185, 160, 201, 0.45);
color: var(--color-grey-dark);
padding: 5px;
font-weight: bold;
text-align: left;
z-index: 1;
font-family: var(--font-primary);
font-weight: 200;
font-size: 1.2rem;
}
.course-carousel-section .card {
position: relative;
}
.no-bg-no-border {
background-color: transparent !important;
border-top: none !important;
}
#new-courses .btn-outline-primary {
color: var(--color-lilac-text);
border-color: var(--color-lilac-text);
}
#new-courses .btn-outline-primary:hover {
background-color: var(--color-lilac);
color: var(--color-white);
border-color: var(--color-lilac);
}
/* OUR EXPERTS */
#our-experts {
background-color: var(--color-grey-medium);
padding-top: 0;
padding-bottom: 0;
}
#our-experts h1,
#our-experts .course-hero__title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.5rem;
line-height: 1.15;
color: var(--color-white);
padding-top: 4rem;
margin-bottom: 2rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: auto;
max-width: 26rem;
}
#our-experts p.para,
#our-experts p {
font-family: var(--font-primary);
font-style: normal;
font-weight: 300;
font-size: 1.15rem;
line-height: 1.6;
margin-left: 3rem;
margin-right: 5rem;
margin-bottom: 2.5rem;
color: var(--color-white);
}
/* OUR CLIENTS */
#our-clients {
background-color: var(--color-white);
padding-top: 6.25rem;
padding-bottom: 6.25rem;
}
#our-clients #clientCarousel {
background-color: var(--color-white);
width: 90%;
margin-left: auto;
margin-right: auto;
}
#our-clients #clientCarousel .carousel-item img {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#our-clients #clientCarousel .carousel-control-prev,
#our-clients #clientCarousel .carousel-control-next {
width: 1%;
opacity: 1;
}
#our-clients #clientCarousel .carousel-control-prev-icon,
#our-clients #clientCarousel .carousel-control-next-icon {
filter: invert(100%);
}
@media (max-width: 1200px) {
#clientCarouselWrapper {
display: none;
}
}
@media (min-width: 1201px) {
#clientCarouselWrapper {
display: block;
}
}
#our-clients.our-clients--compact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
body.home-page #our-courses-cards {
margin-bottom: 2.75rem;
}
body.home-page #our-clients.our-clients--compact {
padding-top: 2.75rem;
padding-bottom: 5.5rem;
}
/* HOME — LATEST BLOG POSTS */
.home-latest-blog {
padding: 3rem 0 4rem;
background-color: var(--color-light-grey, #f8f9fa);
}
.home-latest-blog__header {
margin-bottom: 2rem;
}
.home-latest-blog h2 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--color-grey-dark, #242323);
margin: 0 0 0.75rem;
letter-spacing: -0.04rem;
}
.home-latest-blog__intro {
font-family: var(--font-primary);
font-size: 1.05rem;
font-weight: 300;
color: var(--color-grey-dark, #242323);
max-width: 40rem;
margin: 0 auto;
}
.home-latest-blog__card {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.75rem;
overflow: hidden;
background-color: var(--color-white);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.home-latest-blog__thumb {
overflow: hidden;
aspect-ratio: 16 / 10;
}
.home-latest-blog__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.home-latest-blog__card:hover .home-latest-blog__img {
transform: scale(1.03);
}
.home-latest-blog__card .card-body {
padding: 0.85rem 1rem 0.35rem;
}
.home-latest-blog__meta {
font-family: var(--font-primary);
font-size: 0.78rem;
font-weight: 400;
color: #5a5a5a;
margin: 0 0 0.45rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.home-latest-blog__meta span + time::before {
content: " · ";
}
.home-latest-blog__title {
font-family: var(--font-primary);
font-size: 1.05rem;
font-weight: 500;
line-height: 1.35;
margin: 0 0 0.4rem;
}
.home-latest-blog__title a {
color: var(--color-grey-dark, #242323);
text-decoration: none;
}
.home-latest-blog__title a:hover,
.home-latest-blog__title a:focus {
color: var(--color-lilac-text);
}
.home-latest-blog__excerpt {
font-family: var(--font-primary);
font-size: 0.9rem;
font-weight: 300;
line-height: 1.45;
color: #4a4a4a;
margin: 0;
}
.home-latest-blog__footer {
padding: 0.35rem 1rem 0.85rem;
background: transparent;
border-top: none;
}
.home-latest-blog__read-btn {
font-family: var(--font-primary);
font-size: 0.85rem;
font-weight: 500;
color: var(--color-lilac-text);
border-color: var(--color-lilac-text);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.home-latest-blog__read-btn:hover,
.home-latest-blog__read-btn:focus {
background-color: var(--color-lilac, #b9a0c9);
border-color: var(--color-lilac, #b9a0c9);
color: var(--color-white);
}
.home-latest-blog__cta {
margin-top: 2rem;
}
.home-latest-blog__hub-btn {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 500;
background-color: var(--color-grey-dark, #242323);
border: none;
color: var(--color-white);
padding: 0.65rem 1.5rem;
border-radius: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.home-latest-blog__hub-btn:hover,
.home-latest-blog__hub-btn:focus {
background-color: var(--color-lilac, #b9a0c9);
color: var(--color-white);
}
#our-clients.our-clients--compact #clientCarousel {
width: 72%;
max-width: 1080px;
}
#our-clients.our-clients--compact #clientCarousel .carousel-item img {
max-width: 75%;
width: 75%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#our-clients h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 3.4rem;
color: var(--color-black);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
#our-clients p {
font-family: var(--font-primary);
font-style: normal;
font-weight: 200;
font-size: 1.4rem;
margin-left: 3rem;
margin-right: 5rem;
color: var(--color-black);
}
/* COURSE LIST */
#course-list {
margin-top: 4.7rem;
margin-bottom: 9.4rem;
}
#course-list a {
font-family: var(--font-primary);
font-style: normal;
font-weight: 400;
font-size: 1.1rem;
color: var(--color-black);
}
#course-list td {
padding-top: 1rem;
padding-bottom: 1rem;
}
.software-index .breadcrumb-nav {
margin-bottom: 2.5rem;
}
body.software-index-page #course-list {
margin-top: 3.5rem;
margin-bottom: 7rem;
}
.software-index-categories {
background-color: var(--color-background);
border-radius: 0.25rem;
padding: 2.5rem 1.75rem 2.75rem;
margin-bottom: 3.5rem;
}
.software-index-categories .software-index-section-title {
margin-bottom: 2rem;
}
.software-index-related-link {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 300;
color: var(--color-grey-medium);
margin: 1.75rem 0 0;
}
.software-index-related-link a {
color: var(--color-blue);
text-decoration: none;
}
.software-index-related-link a:hover,
.software-index-related-link a:focus {
text-decoration: underline;
}
.software-index-subjects {
padding: 0 0.25rem;
}
.software-index-section-title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.35rem;
line-height: 1.15;
letter-spacing: -0.06rem;
color: var(--color-black);
margin: 0 0 1rem;
}
.software-index-section-lead {
font-family: var(--font-primary);
font-weight: 300;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-grey-medium);
max-width: 42rem;
margin: 0 0 2rem;
}
.software-index-hub-cards {
margin-bottom: 0;
}
.software-index-hub-cards a.our-course-card {
border: 1px solid rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
color: inherit;
}
.software-index-hub-cards a.our-course-card:hover,
.software-index-hub-cards a.our-course-card:focus-visible {
box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.14);
color: inherit;
}
.software-index-hub-cards .card-body {
padding: 1rem 1rem 1.25rem;
}
.software-index-hub-card .card-title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 1.45rem;
line-height: 1.15;
letter-spacing: -0.05rem;
color: var(--color-black);
margin: 0 0 0.65rem;
padding-top: 0.15rem;
}
.software-index-hub-card .card-text {
font-family: var(--font-primary);
font-weight: 300;
font-size: 0.85rem;
line-height: 1.5;
color: var(--color-black);
}
@media (min-width: 992px) {
.software-index-categories {
padding: 3rem 2.5rem 3.25rem;
}
.software-index-section-title {
font-size: 2.75rem;
}
}
.software-index-group {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
margin-bottom: 1.75rem;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.software-index-group:hover {
box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.12);
}
.software-index-group .card-body {
padding: 1.35rem 1.5rem 1.5rem;
}
.software-index-group__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 1.15rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--color-grey-light);
}
.software-index-group__title {
font-family: var(--font-secondary);
font-size: 1.55rem;
font-weight: 400;
line-height: 1.2;
margin: 0;
color: var(--color-black);
}
.software-index-group__title a {
color: inherit;
text-decoration: none;
}
.software-index-group__title a:hover,
.software-index-group__title a:focus {
color: var(--color-lilac-text);
text-decoration: none;
}
.software-index-group__count {
font-family: var(--font-primary);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-grey-medium);
}
.software-index-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 576px) {
.software-index-list {
grid-template-columns: repeat(2, 1fr);
column-gap: 1.5rem;
}
}
@media (min-width: 992px) {
.software-index-list {
grid-template-columns: repeat(3, 1fr);
}
}
.software-index-list li {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.software-index-list a {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 400;
color: var(--color-black);
text-decoration: none;
padding: 0.65rem 0;
transition: color 0.15s ease;
}
.software-index-list a:hover,
.software-index-list a:focus {
color: var(--color-lilac-text);
text-decoration: none;
}
.software-index-list a:hover .software-index-list__icon,
.software-index-list a:focus .software-index-list__icon {
color: var(--color-lilac);
}
.software-index-list__icon {
font-size: 0.7rem;
color: var(--color-grey-medium);
flex-shrink: 0;
transition: color 0.15s ease;
}
/* COURSE HERO */
#course-hero {
background-color: var(--color-grey-dark);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Course detail hero — reserve desktop height before paint to prevent CLS
   (PSI: entire main hero block was shifting when image/stats styles applied) */
@media (min-width: 1200px) {
.course-detail-hero-row {
align-items: stretch;
min-height: 26rem;
}
.course-detail-hero-row.course-detail-hero-row--with-stats,
.course-detail-hero-row:has(#course-hero.course-hero--with-stats) {
min-height: 32rem;
}
.course-detail-hero-row #course-hero {
min-height: 26rem;
}
.course-detail-hero-row #course-hero.course-hero--with-stats {
min-height: 32rem;
}
.course-detail-hero-row .course-hero__image-col {
display: flex;
overflow: hidden;
padding-left: 0;
padding-right: 0;
min-height: 26rem;
}
.course-detail-hero-row:has(#course-hero.course-hero--with-stats) .course-hero__image-col {
min-height: 32rem;
}
.course-detail-hero-row .course-hero__image {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
flex: 1 1 auto;
aspect-ratio: auto;
}
}
#course-hero p:not(.hero-liner-lead):not(.hero-liner-body):not(.display-6):not(.card-title) {
font-family: var(--font-primary);
font-style: normal;
font-weight: 300;
font-size: 1.15rem;
line-height: 1.6;
margin-left: 3rem;
margin-right: 5rem;
margin-bottom: 2.5rem;
color: var(--color-white);
}
#course-hero #statscourse p.card-title,
#space-to-learn #statscourse p.card-title {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 0.5rem;
font-weight: 200;
font-size: 1.2rem;
line-height: 1.3;
min-height: 1.3em;
color: var(--color-white);
text-align: center;
}
#course-hero #statscourse .display-6,
#space-to-learn #statscourse .display-6 {
font-family: var(--font-secondary);
font-weight: 200;
font-size: 3.5rem;
line-height: 1.1;
color: var(--color-ochre);
letter-spacing: -0.1rem;
text-align: center;
margin: 0;
opacity: 1;
}
.category-description p {
display: inline-block;
font-family: var(--font-primary);
font-size: 1.2rem;
font-style: normal;
font-weight: 300;
text-transform: none;
color: var(--color-black);
text-align: left;
padding: 2rem;
}
#CategoryExplainer .accordion-header#headingOne {
font-family: var(--font-primary);
font-size: 1.2rem;
font-style: normal;
text-transform: none;
color: var(--color-black);
text-align: left;
}
.custom-card-title {
font-family: var(--font-primary);
font-size: 1.4rem;
font-weight: 200;
}
.course-overview {
display: inline-block;
font-family: var(--font-primary);
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-transform: none;
color: var(--color-black);
padding-right:3.7rem;
}
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.row.no-gutters > [class^="col-"] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.square-card {
width: 75%;
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0.5rem auto;
background: var(--color-grey-dark);
}
.square-card .card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100%;
padding: 0.5rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: invert(1) grayscale(1) brightness(0.3);
}
.approach {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
}
.approach-heading {
font-size: 2.8rem;
margin-bottom: 3.5rem;
font-weight: 200;
text-align: center;
font-family: var(--font-secondary);
}
.approach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.approach-item {
display: flex;
flex-direction: column;
}
.approach-item .room-outline-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.approach-item .room-outline-number {
font-family: var(--font-secondary);
font-size: 2.4rem;
line-height: 1;
margin-right: 0.5rem;
}
.approach-item .room-outline-title {
font-family: var(--font-secondary);
font-size: 1.5rem;
font-weight: 600;
}
.approach-item .p {
font-family: var(--font-secondary);
font-size: 1.5rem;
font-weight: 600;
}
.item-header {
display: flex;
align-items: flex-start;
margin-bottom: 0rem;
}
.item-number {
font-family: var(--font-secondary);
font-size: 3rem;
font-weight: 200;
line-height: 1;
margin-right: 1rem;
color: var(--color-grey);
}
.item-line {
flex: 1;
margin-top: 0.5rem;
border-top: 3px solid #000;
}
.item-title {
font-family: var(--font-secondary);
font-size: 1.5rem;
font-weight: 200;
margin: 0 0 2rem;
padding-left: calc(3rem + 1rem);
color: var(--color-grey);
}
.item-body {
font-family: var(--font-primary);
font-size: 0.9rem;
margin: 0 0 0.3rem;
line-height: 1.5;
padding-left: calc(3rem + 1rem);
}
/* Course outline bullets (Quill <ul>/<ol> or parsed outline lists) */
.approach-item .course-outline-list,
.approach-item .item-outline-content ul,
.approach-item .item-outline-content ol {
list-style-position: outside;
margin: 0 0 0.75rem;
padding-left: calc(3rem + 1rem + 1.1rem);
}
.approach-item .course-outline-list,
.approach-item .item-outline-content ul {
list-style-type: disc;
}
.approach-item .item-outline-content ol {
list-style-type: decimal;
}
.approach-item .course-outline-list > li,
.approach-item .item-outline-content li {
font-family: var(--font-primary);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.35rem;
}
.approach-item .course-outline-list > li:last-child,
.approach-item .item-outline-content li:last-child {
margin-bottom: 0;
}
.approach-item .item-outline-content ul ul,
.approach-item .item-outline-content ol ol {
margin-top: 0.35rem;
margin-bottom: 0;
padding-left: 1.25rem;
}
.list-pill {
list-style: none;
padding: 0;
margin: 0;
}
.list-pill.list-group .list-group-item:first-child {
  background-color: var(--color-ochre);  /* ← change to your desired color */
}
.list-pill .list-group-item {
background-color: var(--color-ochre2);
border: 2px solid var(--color-ochre); /* fixed line */
border-color: var(--color-ochre);
border-radius: 999px;
color: var(--color-black);
padding: .50rem 1rem;
margin-bottom: .5rem;
font-family: var(--font-primary);
font-size: 1rem;
}
.list-pill .list-group-item.advice {
background-color: #c8b5f6;
color: #2c0252;
}
.course-info-card {
background-color: var(--color-background);
border:0;
}
.course-info-card .card-body {
padding: 1rem;
}
.course-info-card .card-title {
color: #fff;
margin-bottom: .5rem;
}
.bottom-cards .card-body {
background-color: var(--color-blue);
color: #fff;
text-align: center;
margin-top:0;
}
.bottom-cards .card-body .card-title {
font-size: .9rem;
margin-bottom: .25rem;
}
.bottom-cards .card-body .card-text {
font-size: .875rem;
}
.team-card {
border-radius: 0.5rem;   
overflow: hidden;       
}
.team-card__image-wrapper {
background-color: var(--color-blue);       
display: flex;       
align-items: center;
justify-content: center;
padding-top:10px;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
overflow: hidden; 
}
.team-card__image {
width: 75px;
height: 75px;
object-fit: cover;
object-position: center;
display: block;
margin: 0 auto;
background-color: var(--color-blue);
}
.card.advice {
background-color: var(--color-lilac4);
border: none;
padding: .75rem 1rem;
margin-bottom: .5rem;
font-family: var(--font-primary);
font-size: 1rem;
}
.card.advice .card-body {
padding: 0;
}
.card.advice .card-title,
.card.advice .card-text {              
}
.custom-more-info {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 0.875rem;     
font-weight: 400;
text-align: center;
text-decoration: none;
color: var(--color-grey-dark);
background-color: #ffffff;
border: 2px solid var(--color-grey-light);
border-radius: 0.25rem;
margin-top: auto;
}
.custom-more-info:hover {
background-color: var(--color-grey-medium);
border-color: var(--color-grey-medium);
text-decoration: none;
color: #ffffff;
}
ul.advice-links li:hover span {
color: #007bff;
}
.table-success > td,
.table-success > th {
background-color: #f5debd;  
color: #000000;             
}
.table-danger > td,
.table-danger > th {
background-color: #fff5f5; 
color: #721c24;
}
.table-warning > td,
.table-warning > th {
background-color: #fffbea;
color: #856404;
}
.custom-offer-btn {
padding:        0.6rem 1.2rem;
font-size:      1rem;
font-weight:    400;
color:          var(--color-grey-dark);
background-color: var(--color-ochre);
border:         2px solid transparent;
transition:     background-color .1s ease-in-out, color .1s ease-in-out;
}
.custom-offer-btn:not(:disabled):hover {
background-color: var(--color-white);
border:         2px solid var(--color-ochre);
color:          var(--color-grey-dark);
cursor:           pointer;
}
.custom-offer-btn:disabled {
background-color: #ccc;
border-color:     #ccc;
cursor:           not-allowed;
}
.custom-standard-btn {
padding:        0.6rem 1.2rem;
font-size:      1rem;
font-weight:    400;
color:          var(--color-white);
border:         2px solid transparent;
background-color: var(--color-lilac-text);
transition:     background-color .1s ease-in-out, color .1s ease-in-out;
}
.custom-standard-btn:not(:disabled):hover {
background-color: var(--color-white);
border:         2px solid var(--color-lilac-text);
color:          var(--color-lilac-text);
cursor:           pointer;
}
.custom-standard-btn:disabled {
background-color: #ccc;
border-color:     #ccc;
cursor:           not-allowed;
}
/* Course dates — prevent booking column reflow from button label changes */
.course-dates-section .table td.text-end,
.course-dates-section .table th:last-child {
white-space: nowrap;
width: 1%;
}
.course-dates-section .table .btn {
white-space: nowrap;
}
.course-dates-section .course-dates-tab-content {
min-height: 18rem;
}
.carousel-fade .carousel-item.active {
opacity: 1;
transform: scale(1);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-size: 2.5rem 2.5rem;
filter: invert(1);
}
.faq-list {
margin: 0;
padding: 0;
}
.faq-list dt {
font-weight: bold;
margin-top: 1.5rem;
}
.faq-list dd {
margin: 0.5rem 0 0 1.5rem;
line-height: 1.6;
}
.section-icon {
max-width: 60px;
height: auto;
}
.course-info-card .card-body {
padding-top: 0;
}
.course-info-card .card-title {
margin-top: 0;
margin-bottom: .75rem;
}
.navbar-brand-logo {
display: block;
width: auto;
height: 2.5rem;
max-width: 12.5rem;
object-fit: contain;
}
footer.text-muted,
footer.text-muted .text-reset:not(:hover):not(:focus) {
color: #595959;
}
footer .text-center.p-4 {
color: #595959;
}
.icon-img {
width: 20px;
height: 20px;
object-fit: contain;
}
#trending-courses .btn-outline-primary {
color: var(--color-lilac-text);
border-color: var(--color-lilac-text);
}
#trending-courses .btn-outline-primary:hover{
background-color: var(--color-lilac);
color: var(--color-white);
border-color: var(--color-lilac);
}
/* REVIEWS PAGE */
.reviews-course-filter__select {
display: block;
width: 100%;
max-width: 28rem;
margin: 0 auto;
font-family: var(--font-primary);
font-size: 0.95rem;
border-color: var(--color-grey-light);
}
.background-cards .card {
border: 3px;
border-radius: 1rem;
border-style: solid; 
border-color: var(--color-lilac4);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background-color: var(--color-white);
}
.background-cards .card .card-body {
padding: 1.5rem;
}
.background-cards .card .card-footer {
background: transparent;
border-top: none;
font-size: 0.85rem;
}
.background-cards .card .card-body p.card-text {
font-family: var(--font-primary), sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: #333;
margin-bottom: 1.8rem;
}
.background-cards .card .card-body p.card-text:first-of-type {
font-size: 1.1rem;
font-weight: 600;
color: #222;
}
.background-cards .card .card-body p.company {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-black);
text-transform: uppercase;
letter-spacing: 0.2px;
margin-top: 1rem;
}
.background-cards .card .card-footer small {
display: block;
font-size: 0.8rem;
color: #777;
}
.background-cards .card .card-footer small.text-right a {
color: #0056b3;
text-decoration: none;
}
.background-cards .card .card-footer small.text-right a:hover {
text-decoration: underline;
}
.background-cards .stars .bi-star-fill,
.background-cards .stars .bi-star-half {
color: #f5c518;
font-size: 1.6rem;
margin-right: 0.25rem;
transition: color 0.2s ease;
}
.background-cards .stars .bi-star {
color: #ddd;
font-size: 1.6rem;
margin-right: 0.25rem;
}
.background-cards .card:hover .stars .bi-star-fill,
.background-cards .card:hover .stars .bi-star-half {
color: #ffda44;
}
/* Team Training */
.feature-cards-wrapper {
background-color: var(--color-lilac4);
}
.feature-cards {
background-color: var(--color-lilac4);
padding: 2rem;
padding-top: 6rem;
padding-bottom: 6rem;
margin-bottom: 7rem;
}
.feature-cards .feature-card {
border: none;
border-radius: 0.75rem;
border-radius: 1rem;
border-width: 5px;
border-color:var(--color-lilac);
border-style:solid;
}
.feature-cards .feature-card-title {
font-family: var(--font-secondary);
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--color_black);
}
.feature-cards .feature-card-text {
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 300;
color: var(--color_black);
line-height: 1.2;
}
.feature-cards .feature-benefits li {
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.2;
font-weight: 300;
font-family: var(--font-primary);
}
.feature-cards .feature-benefits i {
vertical-align: middle;
color: var(--color-lilac);
font-weight: 300;
}
.room-carousel img {
margin-bottom: 2rem;
overflow: hidden;
object-fit: cover;
height: 400px;
border: 2px solid #000;
border-radius: 8px;
margin-bottom: 2rem;
}
.room-text {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0rem 1rem;
margin-top:-1.5rem;
}
.room-text h2 {
font-family: var(--font-secondary);
font-size: 2.2rem;
font-weight: 600;
color: #333;
}
.room-text p {
font-family: var(--font-primary);
font-size: 1rem;
color: #555;
margin-bottom: 1rem;
}
.room-text ul li {
font-size: 0.95rem;
color: #444;
}
.room-listing .row {
margin-bottom: 3rem;
}
.room-listing .card {
padding: 1.5rem;
}
.map {
filter: grayscale(100%);
}
.room-listing .row.align-items-center {
margin-bottom: 5rem !important;   /* or whatever you want */
}
.room-details-list {
list-style: none;
padding-left: 0;
margin-bottom: 1rem;
}
.room-details-list li {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
color: var(--color-black);
}
.room-details-list li:last-child {
border-bottom: none;
}
.room-details-list strong {
min-width: 140px;
font-weight: 600;
color: #000;
}
/* Hero titles outside dark panels (e.g. legacy reviews mobile block) */
.course-hero__title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.5rem;
line-height: 1.15;
color: var(--color-black);
margin: 1rem 0 2rem 1rem;
}
/* Legacy promo mobile section: title sits on white below carousel */
.d-block.d-xl-none .container > .course-hero__title,
.d-block.d-xl-none .container > h2.course-hero__title {
color: var(--color-black);
margin-left: 1rem;
margin-right: 1rem;
padding-top: 1.5rem;
}
/* Dark hero panels — must follow the black fallback .course-hero__title rule above */
#space-to-learn > h1.course-hero__title,
#space-to-learn > .course-hero__title,
#course-hero > h1.course-hero__title,
#course-hero > .course-hero__title {
color: var(--color-white);
}
#space-to-learn .d-xl-none .course-hero__title,
#space-to-learn .d-xl-none h1,
#space-to-learn .d-xl-none h2,
#space-to-learn.d-xl-none .course-hero__title,
#space-to-learn.d-xl-none h1,
#space-to-learn.d-xl-none h2 {
margin-left: 3rem;
margin-right: 3rem;
padding-top: 0;
margin-bottom: 1.5rem;
max-width: 26rem;
}
/* Breadcrumb: link-style for items, distinct current page, chevron separators */
.breadcrumb-nav {
  margin-bottom: 0.5rem;
}
.breadcrumb--page {
  font-size: 0.875rem;
  background: transparent;
  padding: 0;
  margin: 0;
  --breadcrumb-link: var(--color-blue, #2b345d);
  --breadcrumb-current: #212529;
  --breadcrumb-sep: #6c757d;
}
.breadcrumb--page .breadcrumb-item a {
  color: var(--breadcrumb-link);
  text-decoration: none;
}
.breadcrumb--page .breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb--page .breadcrumb-item.active .breadcrumb-item__current {
  color: var(--breadcrumb-current);
  font-weight: 500;
}
.breadcrumb--page .breadcrumb-item + .breadcrumb-item::before {
  content: "\203a";
  color: var(--breadcrumb-sep);
  font-weight: 600;
  padding: 0 0.35rem;
}
.course-hero__breadcrumb {
  margin-left: 0;
}
#course-hero .course-hero__breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
}
#course-hero .course-hero__breadcrumb .breadcrumb-item a,
#course-hero .course-hero__breadcrumb .breadcrumb-item {
  color: #e6e6e6;
}
#course-hero .course-hero__breadcrumb .breadcrumb-item.active {
  color: var(--color-white);
}
#course-hero .course-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #b3b3b3;
}
@media (max-width: 576px) {
#space-to-learn .course-hero__title,
#space-to-learn h1,
#course-hero .course-hero__title,
#course-hero h1 {
font-size: 2.1rem;
padding-left: 1rem;
padding-bottom: 2rem;
margin: 2rem 0 0 0;
color: var(--color-white);
}
.d-block.d-xl-none .container > .course-hero__title,
.d-block.d-xl-none .container > h2.course-hero__title {
font-size: 2.1rem;
color: var(--color-black);
}
}
/* single, responsive H1 for “AI Courses” */
.course-hero__title2 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 4rem;           /* desktop size */
color: var(--color-white); /* or black, depending on background */
margin: 6rem 0 4rem 1rem;   /* adjust to taste */
}
@media (max-width: 576px) {
.course-hero__title2 {
font-family: var(--font-secondary);
font-size: 2.5rem;       /* mobile size */
padding-left: 1rem;
padding-bottom: 2rem;
margin: 2rem 0 0rem 0;    /* tweak your spacing */
color: var(--color-black);
}
}
/* single, responsive H1 for “AI Courses” */
.course-hero__title3 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.5rem;           /* desktop size */
color: var(--color-black); /* or black, depending on background */
margin-top:1.3rem;
margin-bottom:3rem;
}
@media (max-width: 576px) {
.course-hero__title3 {
font-family: var(--font-secondary);
font-size: 2.5rem;       /* mobile size */
padding-left: 1rem;
padding-bottom: 2rem;
margin: 2rem 0 0rem 0;    /* tweak your spacing */
color: var(--color-black);
}
}
/* Key Learning Points — H2 section label in course sidebar */
h2.course-hero__title4,
.course-hero__title4 {
font-family: var(--font-primary);
font-weight: 300;
font-size: 1.4rem;
color: var(--color-black);
margin-left: 1.8rem;
margin-top: 0.5rem;
margin-bottom: 0;
}
@media (max-width: 576px) {
h2.course-hero__title4,
.course-hero__title4 {
font-family: var(--font-primary);
font-size: 1.25rem;
padding-left: 0;
margin: 0 0 0.5rem 0;
color: var(--color-black);
}
}
.tab-card {
background-color: #f8f9fa;
border: 2px solid transparent;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
min-width: 180px;
text-align: left;
transition: all 0.2s ease-in-out;
}
.tab-card:hover {
border-color: #ced4da;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.tab-card.active,
.tab-card:focus,
.tab-card:active {
border-color: #0d6efd;
background-color: #e7f1ff;
color: #0d6efd;
font-weight: 600;
}
/* in your custom CSS, loaded after Bootstrap */
.container.no-padding {
padding-top:    0 !important;
padding-left:   0 !important;
padding-right:  0 !important;
/* margin on .container is already zero */
}
.icon-img {
width: 20px;
height: 30px;
object-fit: contain;
}
/* Attendee FAQs — typography-first, scoped to this page */
.attendee-faqs {
padding-top: 3rem;
}
.attendee-faqs-header h1 {
font-family: var(--font-secondary);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.attendee-faqs-header .lead {
font-family: var(--font-primary);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.6;
color: var(--color-grey-medium);
max-width: 36rem;
margin: 1.25rem auto 0;
}
.attendee-faqs-layout {
align-items: stretch;
}
.attendee-faqs-aside {
position: relative;
align-self: stretch;
}
.attendee-faqs-nav {
position: absolute;
left: 0;
right: 0;
top: 0;
padding-left: 0.25rem;
border-left: 2px solid var(--color-lilac4);
will-change: top;
}
.attendee-faqs-nav-label {
font-family: var(--font-primary);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-grey-medium);
margin-bottom: 0.75rem;
padding-left: 0.85rem;
}
.attendee-faqs-nav-track {
position: relative;
}
.attendee-faqs-nav-marker {
position: absolute;
left: -2px;
width: 2px;
background: var(--color-lilac);
border-radius: 1px;
transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.attendee-faqs-nav-links {
position: relative;
}
.attendee-faqs-nav .nav-link {
font-family: var(--font-primary);
font-size: 0.92rem;
font-weight: 400;
line-height: 1.35;
color: var(--color-grey-medium);
padding: 0.45rem 0 0.45rem 0.85rem;
border-radius: 0;
transition: color 0.15s ease;
}
.attendee-faqs-nav .nav-link:hover,
.attendee-faqs-nav .nav-link:focus {
color: var(--color-home1);
}
.attendee-faqs-nav .nav-link.active {
color: var(--color-home1);
font-weight: 500;
background: transparent;
}
.attendee-faqs-toc {
margin-bottom: 0.5rem;
}
.attendee-faqs-toc ul {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
list-style: none;
padding: 0;
margin: 0;
}
.attendee-faqs-toc a {
font-family: var(--font-primary);
font-size: 0.9rem;
font-weight: 400;
color: var(--color-home1);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-color: var(--color-lilac3);
}
.attendee-faqs-toc a:hover,
.attendee-faqs-toc a:focus {
color: var(--color-lilac);
text-decoration-color: var(--color-lilac);
}
.attendee-faqs-body {
max-width: none;
margin: 0;
}
.attendee-faqs-group {
scroll-margin-top: 6rem;
}
.attendee-faqs-group + .attendee-faqs-group {
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--color-grey-light);
}
.attendee-faqs-group h2 {
font-family: var(--font-secondary);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-home1);
margin-bottom: 1.75rem;
}
.attendee-faqs-entry {
margin-bottom: 2rem;
}
.attendee-faqs-entry:last-child {
margin-bottom: 0;
}
.attendee-faqs-entry h3 {
font-family: var(--font-secondary);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.45;
color: var(--color-secondary-text);
margin-bottom: 0.5rem;
}
.attendee-faqs-answer {
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 300;
line-height: 1.75;
color: #4a4a4a;
}
.attendee-faqs-answer p {
margin-bottom: 0.85rem;
}
.attendee-faqs-answer p:last-child {
margin-bottom: 0;
}
.attendee-faqs-answer a {
color: var(--color-home1);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.attendee-faqs-answer a:hover,
.attendee-faqs-answer a:focus {
color: var(--color-lilac);
}
@media (max-width: 991.98px) {
.attendee-faqs {
padding-top: 2rem;
}
.attendee-faqs-group h2 {
font-size: 1.35rem;
}
}

/* ---------- Blog (Knowledge) — cream surface + site typography ---------- */
body.blog-article-page,
body.blog-page {
font-family: var(--font-primary) !important;
background-color: var(--color-blog-surface);
color: var(--color-black);
}
body.blog-article-page footer,
body.blog-page footer {
background-color: var(--color-blog-surface) !important;
}
body.blog-article-page footer .border-bottom,
body.blog-page footer .border-bottom {
border-color: var(--color-grey-light) !important;
}
body.blog-article-page footer > .text-center.p-4,
body.blog-page footer > .text-center.p-4 {
background-color: var(--color-blog-surface) !important;
}
body.blog-article-page .blog-article__header {
margin-bottom: 0;
}
body.blog-article-page .blog-article__masthead {
text-align: left;
width: 100%;
}
body.blog-article-page h1.blog-article__title {
font-family: var(--font-secondary);
font-weight: 400;
font-size: clamp(1.85rem, 4vw, 2.65rem);
line-height: 1.18;
letter-spacing: -0.03rem;
color: var(--color-black);
margin-top: 0;
margin-bottom: 0.85rem;
text-transform: none;
}
body.blog-article-page .blog-article__author {
display: block;
width: 100%;
text-align: left !important;
font-family: var(--font-primary);
font-style: normal;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
color: var(--color-grey-medium);
margin: 0 0 1.35rem;
padding: 0;
}
body.blog-article-page .blog-article__author-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-grey-dark);
margin-right: 0.35rem;
}
body.blog-article-page .blog-article__lead {
font-family: var(--font-primary);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.65;
color: var(--color-grey-medium);
margin-top: 0;
margin-bottom: 1.5rem;
max-width: 52rem;
}
body.blog-article-page .blog-article__header-rule {
display: block;
width: 100%;
height: 0;
margin: 0 0 2rem;
padding: 0;
border: 0;
border-top: 1px solid var(--color-grey-light);
opacity: 1;
}
body.blog-article-page .blog-article__body,
body.blog-article-page .article-container {
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 300;
line-height: 1.75;
color: var(--color-secondary-text);
max-width: 900px;
}
body.blog-article-page .blog-article__body > :first-child,
body.blog-article-page .article-container > :first-child {
margin-top: 0 !important;
}
body.blog-article-page .blog-article__body p,
body.blog-article-page .article-container p {
margin-top: 0;
margin-bottom: 1.25rem;
}
body.blog-article-page .blog-article__body p:empty,
body.blog-article-page .article-container p:empty {
display: none;
margin: 0 !important;
padding: 0 !important;
}
body.blog-article-page .blog-article__body h2,
body.blog-article-page .article-container h2,
body.blog-article-page .blog-article__body .article-card h2,
body.blog-article-page .article-container .article-card h2 {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.75rem;
line-height: 1.35;
color: var(--color-black);
margin-top: 2.5rem !important;
margin-bottom: 1.15rem;
padding-bottom: 0.55rem;
border-bottom: 2px solid var(--color-grey-light);
}
body.blog-article-page .blog-article__body h2:first-child,
body.blog-article-page .article-container h2:first-child {
margin-top: 0 !important;
}
body.blog-article-page .blog-article__body h3,
body.blog-article-page .article-container h3 {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.35rem;
line-height: 1.4;
color: var(--color-black);
margin-top: 1.85rem !important;
margin-bottom: 0.85rem;
}
body.blog-article-page .blog-article__body h4,
body.blog-article-page .article-container h4 {
font-family: var(--font-primary);
font-weight: 600;
font-size: 1.125rem;
margin-top: 1.5rem !important;
margin-bottom: 0.65rem;
}
body.blog-article-page .blog-article__body hr,
body.blog-article-page .article-container hr {
margin: 1.75rem 0;
border: 0;
border-top: 1px solid var(--color-grey-light);
opacity: 1;
}
body.blog-article-page .blog-article__body hr:has(+ h2),
body.blog-article-page .blog-article__body hr:has(+ h3),
body.blog-article-page .article-container hr:has(+ h2),
body.blog-article-page .article-container hr:has(+ h3) {
display: none;
margin: 0;
}
body.blog-article-page .blog-article__sidebar .sidebar-article-card h2,
body.blog-article-page .blog-article__sidebar .sidebar-article-card h3 {
margin-top: 0;
}
body.blog-article-page .blog-sidebar-courses {
margin-top: 2.25rem;
}
body.blog-article-page .blog-sidebar-courses h3 {
margin-bottom: 1.25rem !important;
}
body.blog-article-page .blog-sidebar-courses__stack {
gap: 1.35rem;
}
body.blog-article-page .blog-article__body ul,
body.blog-article-page .blog-article__body ol,
body.blog-article-page .article-container ul,
body.blog-article-page .article-container ol {
margin-top: 0;
margin-bottom: 1.35rem;
padding-left: 1.5rem;
}
body.blog-article-page .blog-article__body ul,
body.blog-article-page .article-container ul {
list-style: none;
}
body.blog-article-page .blog-article__body ul li,
body.blog-article-page .article-container ul li {
position: relative;
padding-left: 1.25rem;
margin-bottom: 0.65rem;
}
body.blog-article-page .blog-article__body ul li::before,
body.blog-article-page .article-container ul li::before {
content: '•';
position: absolute;
left: 0;
top: 0;
color: var(--color-lilac);
font-weight: 700;
}
body.blog-article-page .blog-article__body ol,
body.blog-article-page .article-container ol {
list-style-position: outside;
}
body.blog-article-page .blog-article__body ol li,
body.blog-article-page .article-container ol li {
margin-bottom: 0.65rem;
}
body.blog-article-page .blog-article__body a,
body.blog-article-page .article-container a {
color: var(--color-black);
text-decoration: underline;
text-underline-offset: 0.12em;
}
body.blog-article-page .blog-article__body a:hover,
body.blog-article-page .blog-article__body a:focus,
body.blog-article-page .article-container a:hover,
body.blog-article-page .article-container a:focus {
color: var(--color-lilac);
text-decoration: underline;
}
body.blog-article-page .blog-article__body table,
body.blog-article-page .article-container table {
width: 100%;
border-collapse: collapse;
margin: 1.75rem 0;
font-size: 0.95rem;
}
body.blog-article-page .blog-article__body th,
body.blog-article-page .blog-article__body td,
body.blog-article-page .article-container th,
body.blog-article-page .article-container td {
border: 1px solid var(--color-grey-light);
padding: 0.75rem;
text-align: left;
}
body.blog-article-page .blog-article__body th,
body.blog-article-page .article-container th {
background-color: var(--color-blog-surface);
font-weight: 600;
}
body.blog-article-page .blog-article__body tr:nth-child(even),
body.blog-article-page .article-container tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.02);
}
body.blog-article-page .blog-article__body img,
body.blog-article-page .article-container img {
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body.blog-article-page .article-container .author {
text-align: left;
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-grey-medium);
margin-top: 1.5rem;
margin-bottom: 0;
}
body.blog-article-page .blog-article__sidebar h3,
body.blog-article-page .sidebar-article-card h3 {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.25rem;
color: var(--color-black);
}
body.blog-article-page .sidebar-article-card .card-body h6,
body.blog-article-page .sidebar-article-card .card-link {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1rem;
color: var(--color-black);
}
body.blog-page .card-body h6,
body.blog-page .card-body .card-link {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1rem;
}
@media (max-width: 576px) {
body.blog-article-page h1.blog-article__title {
font-size: 1.85rem;
margin-bottom: 0.75rem;
}
body.blog-article-page .blog-article__header-rule {
margin-bottom: 1.5rem;
}
}

/* Hero promo carousel — shared by home, reviews, team training, etc. */
.custom-row-padding .hero-promo-carousel__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1000 / 563;
object-fit: cover;
object-position: center;
}
@media (max-width: 1199.98px) {
.custom-row-padding .hero-promo-carousel__img {
max-height: 18rem;
}
}
@media (min-width: 1200px) {
.custom-row-padding {
align-items: flex-start;
}
.custom-row-padding > .col-xl-5,
.custom-row-padding > #space-to-learn.col-xl-5,
.custom-row-padding > #course-hero.col-xl-5 {
align-self: stretch;
}
.custom-row-padding > .col-xl-7 {
display: flex;
overflow: hidden;
align-self: stretch;
}
.custom-row-padding > .col-xl-7 .carousel,
.custom-row-padding > .col-xl-7 .carousel-inner,
.custom-row-padding > .col-xl-7 .carousel-item {
height: 100%;
min-height: 100%;
width: 100%;
}
.custom-row-padding > .col-xl-7 .hero-promo-carousel__img {
aspect-ratio: auto;
height: 100%;
max-height: none;
}
}
/* Reviews course page — hero layout + liner copy (match course.php) */
@media (min-width: 1200px) {
body.reviews-course-page .custom-row-padding {
align-items: stretch;
}
body.reviews-course-page .custom-row-padding > .col-7 {
display: flex;
overflow: hidden;
}
body.reviews-course-page .custom-row-padding > .col-7 .carousel,
body.reviews-course-page .custom-row-padding > .col-7 .carousel-inner,
body.reviews-course-page .custom-row-padding > .col-7 .carousel-item {
height: 100%;
min-height: 100%;
}
body.reviews-course-page .custom-row-padding > .col-7 .carousel-item img {
height: 100%;
object-fit: cover;
}
}
body.reviews-course-page #space-to-learn h1,
body.reviews-course-page #space-to-learn .course-hero__title {
width: auto;
max-width: 26rem;
font-size: 3rem;
line-height: 1.12;
padding-top: 5rem;
margin-bottom: 1.25rem;
}
body.reviews-course-page #space-to-learn .hero-liner-lead,
body.reviews-course-page #space-to-learn .hero-liner-body {
margin-left: 3rem;
margin-right: 3rem;
color: var(--color-white);
opacity: 1;
}
body.reviews-course-page #space-to-learn .hero-liner-lead {
font-size: 1.2rem;
font-weight: 400;
line-height: 1.45;
margin-bottom: 0.65rem;
}
body.reviews-course-page #space-to-learn .hero-liner-body {
font-size: 1rem;
font-weight: 300;
line-height: 1.65;
margin-bottom: 2.5rem;
color: #d8d8d8;
}
/* Reviews course page — hero stats tweaks */
@media (min-width: 1200px) {
body.reviews-course-page #space-to-learn #statscourse {
margin-left: 3rem;
margin-right: 1rem;
flex-wrap: wrap;
}
body.reviews-course-page #space-to-learn #statscourse .display-6 {
font-size: 2.75rem;
}
body.reviews-course-page #space-to-learn #statscourse .card-title {
font-size: 1rem;
}
body.reviews-course-page #space-to-learn #statscourse .btn {
font-size: 0.85rem;
padding: 0.5rem 0.9rem;
margin-bottom: 0;
}
}
.reviews-hero-stats--mobile {
margin-top: 0.5rem;
margin-bottom: 1.25rem;
}
.reviews-hero-stats--mobile #reviews-hero-stats-mobile {
margin-left: 1rem;
margin-right: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.reviews-hero-stats--mobile #reviews-hero-stats-mobile .card {
border: none;
background-color: transparent;
box-shadow: none;
text-align: left;
}
.reviews-hero-stats--mobile #reviews-hero-stats-mobile .card-body {
background-color: var(--color-grey-dark);
border-radius: 0.25rem;
padding: 0.75rem 1rem;
}
.reviews-hero-stats--mobile #reviews-hero-stats-mobile .card-title {
font-family: var(--font-primary);
font-weight: 200;
font-size: 1rem;
color: var(--color-white);
text-align: center;
margin-top: 0.5rem;
}
.reviews-hero-stats--mobile #reviews-hero-stats-mobile .display-6 {
font-family: var(--font-secondary);
font-weight: 200;
font-size: 2.25rem;
line-height: 1.1;
color: var(--color-ochre);
letter-spacing: -0.1rem;
text-align: center;
margin: 0;
opacity: 1;
}
.reviews-hero-stats--mobile #reviews-hero-stats-mobile .btn {
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.85rem;
background-color: var(--color-ochre);
border: none;
color: var(--color-white);
padding: 0.5rem 0.9rem;
border-radius: 0.3rem;
text-transform: uppercase;
}
/* Hero intro below mobile carousel (reviews course pages) */
.reviews-page-intro--mobile .hero-liner-lead {
font-family: var(--font-primary);
font-size: 1.15rem;
font-weight: 500;
line-height: 1.45;
color: var(--color-black);
margin: 0 0 0.6rem;
opacity: 1;
}
.reviews-page-intro--mobile .hero-liner-body {
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: var(--color-grey-medium, #605e5e);
margin: 0 0 1.5rem;
opacity: 1;
}
.reviews-page-intro--mobile {
padding: 0 1rem 1.25rem;
max-width: 44rem;
}

/* Reviews course page — sidebar stats (BEM classes are reviews-only) */
.reviews-sidebar-stats {
border: 1px solid var(--color-grey-light, #e0e0e0);
border-radius: 0.85rem;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 1.35rem 1.15rem 1.25rem;
text-align: center;
}
.reviews-sidebar-stats__course {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.3rem;
line-height: 1.25;
color: var(--color-black);
margin: 0 0 1.15rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-grey-light, #e0e0e0);
}
.reviews-sidebar-stats__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.65rem;
align-items: start;
}
.reviews-sidebar-stats__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.reviews-sidebar-stats__value {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.35rem;
line-height: 1.1;
color: var(--color-black);
letter-spacing: -0.02em;
}
.reviews-sidebar-stats__stat--rating .reviews-sidebar-stats__value {
font-size: 1.85rem;
}
.reviews-sidebar-stats__label {
font-family: var(--font-primary);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.3;
color: var(--color-grey-medium, #605e5e);
text-transform: lowercase;
letter-spacing: 0.02em;
}

/* Reviews course page — reuse blog sidebar card typography */
body.reviews-course-page .blog-article__sidebar .sidebar-article-card h3,
body.reviews-course-page .blog-article__sidebar .blog-sidebar-courses h3 {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.25rem;
color: var(--color-black);
margin-top: 0;
}
body.reviews-course-page .blog-article__sidebar .sidebar-article-card .card-body h6,
body.reviews-course-page .blog-article__sidebar .sidebar-article-card .card-link {
font-family: var(--font-primary);
font-weight: 500;
font-size: 1rem;
color: var(--color-black);
}
body.reviews-course-page .blog-article__sidebar .reviews-sidebar-course-card {
margin-top: 0;
}
body.reviews-course-page .blog-article__sidebar .blog-sidebar-courses__stack {
display: flex;
flex-direction: column;
gap: 1.35rem;
}
body.reviews-course-page .blog-sidebar-courses .course-event-card {
border: 1px solid var(--color-grey-light, #e0e0e0);
border-radius: 0.85rem;
padding: 0;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
overflow: hidden;
}
body.reviews-course-page .blog-sidebar-courses .course-event-card__media {
display: block;
aspect-ratio: 1;
background: #faf9f6;
border-bottom: 1px solid var(--color-grey-light, #e0e0e0);
}
body.reviews-course-page .blog-sidebar-courses .course-event-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.reviews-course-page .blog-sidebar-courses .course-event-card__body {
padding: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
body.reviews-course-page .blog-sidebar-courses .course-title {
font-family: var(--font-secondary);
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
margin: 0;
padding-bottom: 0.35rem;
border-bottom: 1px solid #e0e0e0;
}
body.reviews-course-page .blog-sidebar-courses .course-title a {
color: inherit;
text-decoration: none;
}
body.reviews-course-page .blog-sidebar-courses .course-title a:hover {
text-decoration: underline;
}
body.reviews-course-page .blog-sidebar-courses .event-meta.date-line {
margin: 0;
font-size: 0.8rem;
font-weight: 500;
color: #605e5e;
line-height: 1.3;
}
body.reviews-course-page .blog-sidebar-courses .price-row {
margin: 0;
padding-top: 0.35rem;
border-top: 1px solid #e0e0e0;
}
body.reviews-course-page .blog-sidebar-courses .price-line-now {
background: linear-gradient(135deg, #d4cbde 0%, #faf9f6 100%);
border: 1px solid #cabbd6;
border-radius: 0.45rem;
padding: 0.3rem 0.45rem;
}
body.reviews-course-page .blog-sidebar-courses .price-value {
font-weight: 600;
font-size: 0.82rem;
color: #000;
}
body.reviews-course-page .blog-sidebar-courses .calendar-btn {
font-size: 0.82rem;
padding: 0.4rem 0.65rem;
border-radius: 0.45rem;
text-align: center;
}
body.reviews-course-page .blog-sidebar-courses .calendar-btn-info {
background: #fff;
border: 1px solid #b9a0c9;
color: #28282b;
}
body.reviews-course-page .blog-sidebar-courses .calendar-btn-info:hover {
background: #b9a0c9;
border-color: #b9a0c9;
color: #fff;
}