/* Import Fonts */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@200;300;400;500;600;700;800&display=swap');
/* Root Variables */
:root {
--color-background: #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-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-background);
overflow-x: hidden;
}
a {
text-decoration: none;
color: var(--color-black);
}
.btn-outline {
border-color: var(--color-cta);
color: var(--color-cta);
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: 1.3rem;
font-style: normal;
font-weight: 200;
text-transform: none;
color: var(--color-black);
padding-left: 1rem;
padding-right: 1rem;
}
/* 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);
}
#space-to-learn h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 4rem;
color: var(--color-white);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
#space-to-learn 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-white);
}
/* 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;
}
@media (min-width: 1200px) and (max-width: 1560px) {
.hide-between-1200-and-1560 {
display: none !important;
}
}
.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 h3 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 2.3rem;
color: var(--color-black);
padding-top: 0.3rem;
margin-bottom: 1.7rem;
margin-left: 1rem;
text-transform: none;
letter-spacing: -0.1rem;
}
#our-courses-cards p {
font-family: var(--font-primary);
font-style: normal;
font-weight: 300;
font-size: 0.9rem;
margin-left: 1rem;
margin-right: 1rem;
padding-bottom: 3rem;
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 h3 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 1.6rem;
color: var(--color-black);
padding-top: 0.3rem;
margin-bottom: 1.7rem;
margin-left: 1rem;
text-transform: none;
letter-spacing: -0.1rem;
}
}
@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;
}
.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%;
}
#stats {
padding-left: 15rem;
padding-right: 15rem;
margin-bottom: 2rem;
}
#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;
}
#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-white);
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-ochre);
}
@media (min-width: 768px) {
#statscourse .col-md-4:first-of-type {
margin-left: 2rem;
}
}
/* LEARNER REVIEWS LARGE*/
#learner-reviews {
background-image: url('https://projectx.mediatraining.ltd.uk/images/reviews.png');
background-position: center;
background-repeat: no-repeat;
background-size: 100;
height: 750px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#reviewCarousel {
width: 100%;
max-width: 600px;
margin: 0 auto;
position: relative;
}
#reviewCarousel .carousel-inner {
display: block;
height: 100%;
min-height: 400px;
}
#reviewCarousel .carousel-item {
display: none;
width: 100%;
height: 100%;
}
.review-slide-inner {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
#reviewCarousel .carousel-item.active {
display: flex !important;
justify-content: center;
align-items: center;
}
.quote-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.quote-content {
max-width: 700px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.star-container {
font-size: 3rem;
color: #ffffff;
margin-bottom: 1.5rem;
}
.review-text {
font-family: var(--font-primary);
font-weight: 300;
font-size: 1.6rem;
color: var(--color-black);
margin-bottom: 2rem;
}
.review-company {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.5rem;
color: var(--color-white);
}
.review-date-course {
font-family: var(--font-primary);
font-weight: 400;
font-size: 1rem;
color: var(--color-white);
}
.review-carousel-prev,
.review-carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 5%;
opacity: 0.8;
z-index: 10;
}
.review-slide-inner {
animation: fadeInUp 0.6s ease-out;
}
.review-carousel-prev {
left: -250px;
}
.review-carousel-next {
right: -250px;
}
.review-carousel-prev,
.review-carousel-next {
width: 60px;
height: 60px;
}
.review-carousel-prev .carousel-control-prev-icon,
.review-carousel-next .carousel-control-next-icon {
width: 2.5rem;
height: 2.5rem;
background-size: contain;
}
.review-slide-inner {
animation: fadeInUp 0.6s ease-out;
}
/* WHO ATTENDS OUR COURSES */
#who-attends-our-courses {
background-color: var(--color-blue);
padding-top: 9rem;
padding-bottom: 9rem;
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:4rem;
}
#who-attends-our-courses .who-attends-block {
flex: 1 0 25%;
box-sizing: border-box;
padding: 2rem;
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: 200px;
height: auto;
margin-bottom: 1.5rem;
}
#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: 1rem;
padding-top: 2rem;
}
#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:30px;
}
.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:4rem;
}
}
/* THREE WAYS TO LEARN */
#three-ways-to-learn {
background-color: var(--color-background);
padding-top: 9.4rem;
padding-bottom: 9.4rem;
}
#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:4rem;
}
#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: 1rem;
padding-top: 2rem;
}
#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: 10rem;
height: 10rem;
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:30px;
}
.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:4rem;
}
#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: white;
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 {
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: 1rem;
padding-top: 2rem;
}
.step-description {
font-weight: 200;
font-size: 1.1rem;
line-height: 1.4;
padding-left: 20%;
padding-right: 18%;
}
.section-title {
font-family: var(--font-secondary);
color: var(--color-white);
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;
}
#FollowOnCoursesCarousel .btn-outline-primary {
color: var(--color-lilac);
border-color: var(--color-lilac);
}
#FollowOnCoursesCarousel .btn-outline-primary:hover{
background-color: var(--color-lilac);
color: var(--color-white);
border-color: rgb(var(--color-lilac));
}
/* CENTRE VIDEO */
#our-training-centre {
background-color: var(--color-pink);
}
#our-training-centre h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 3.4rem;
color: var(--color-white);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
#our-training-centre 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-white);
}
/* NEW & TRENDING COURSES */
.course-carousel-section {
padding: 6.25rem 0;
}
.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 {
min-height: 720px;
}
.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.3);
color: var(--color-white);
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);
border-color: var(--color-lilac);
}
#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 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 3.4rem;
color: var(--color-white);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
width: 20rem;
}
#our-experts p.para,
#our-experts 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-white);
}
/* OUR CLIENTS */
#our-clients {
background-color: var(--color-white);
padding-top: 6.25rem;
padding-bottom: 6.25rem;
}
#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;
}
/* COURSE HERO */
#course-hero {
background-color: var(--color-grey-dark);
}
#course-hero h1 {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 4rem;
color: var(--color-white);
padding-top: 6rem;
margin-bottom: 3rem;
margin-left: 3rem;
text-transform: none;
letter-spacing: -0.1rem;
}
#course-hero 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-white);
}
.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);
}
.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: .8rem;
}
.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:          #fff;                   
background-color: var(--color-ochre);
border:         2px solid transparent;
transition:     background-color .1s ease-in-out;
}
.custom-offer-btn:not(:disabled):hover {
background-color: var(--color-white);
border:         2px solid var(--color-ochre);
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);
transition:     background-color .1s ease-in-out;
}
.custom-standard-btn:not(:disabled):hover {
background-color: var(--color-white);
border:         2px solid var(--color-lilac);
cursor:           pointer;
}
.custom-standard-btn:disabled {
background-color: #ccc;
border-color:     #ccc;
cursor:           not-allowed;
}
.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;
}
.icon-img {
width: 20px;
height: 20px;
object-fit: contain;
}
#trending-courses .btn-outline-primary {
color: var(--color-lilac);
border-color: var(--color-lilac);
}
#trending-courses .btn-outline-primary:hover{
background-color: var(--color-lilac);
color: var(--color-white);
border-color: var(--color-lilac);
}
/* REVIEWS PAGE */
.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;
}
/* single, responsive H1 for “AI Courses” */
.course-hero__title {
font-family: var(--font-secondary);
font-weight: 300;
font-size: 4rem;           /* desktop size */
color: var(--color-white); /* or black, depending on background */
margin: 1rem 0 1rem 1rem;   /* adjust to taste */
}
@media (max-width: 576px) {
.course-hero__title {
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__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);
}
}
/* single, responsive H1 for “AI Courses” */
.course-hero__title4 {
font-family: var(--font-primary);
font-weight: 300;
font-size: 1.4rem;           /* desktop size */
color: var(--color-black); /* or black, depending on background */
margin-left:1.8rem;  
margin-top:0.5rem;
}
@media (max-width: 576px) {
.course-hero__title4 {
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);
}
}
.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;
}
:root{
  /* Adjust to your exact brand if different */
  --brand: #0d6efd;
  --brand-ink: #111;
  --brand-soft: rgba(13,110,253,0.08);
}

/* Spacing & colours stay close to your current look */
.mt-hero { background: #fff; }
.course-hero__title {
  line-height: 1.1;
  /* Smoothly scale on viewport */
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  color: var(--brand-ink);
}
.white-line {
  width: 80px;
  height: 4px;
  background: var(--brand);
  border-radius: 2px;
}

/* Consistent image frame for the carousel */
.mt-hero__frame {
  aspect-ratio: 16 / 9;       /* keeps height stable across images */
  background: #f6f7f9;        /* subtle skeleton colour before image paints */
}
.mt-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Buttons to match brand tone */
.btn-primary { box-shadow: 0 .25rem .75rem rgba(13,110,253,0.15); }
.btn-outline-dark { border-width: 2px; }

/* Tidy carousel indicators on light background */
.carousel-indicators [data-bs-target] {
  width: .75rem; height: .75rem; border-radius: 50%;
  background-color: rgba(0,0,0,.25);
}
.carousel-indicators .activ