, propagate the spacing intent to the
tag itself using :has(). NOTE: The direct-child combinator (>) is intentionally NOT used here because AEM RTE nests spans arbitrarily deep (e.g.
margins and any framework overrides. */ p:has(.mt-0) { margin-top: 0 !important; } p:has(.mt-24) { margin-top: 24px !important; } p:has(.mb-0) { margin-bottom: 0 !important; } p:has(.mb-8) { margin-bottom: 8px !important; } p:has(.mb-16) { margin-bottom: 16px !important; } p:has(.mb-24) { margin-bottom: 24px !important; } p:has(.ml-0) { margin-left: 0 !important; } p:has(.mr-0) { margin-right: 0 !important; } p:has(.pl-20) { padding-left: 20px !important; } p:has(.pr-20) { padding-right: 20px !important; } /* NOTE: p:has(.gothammedium) and p:has(.gothammedium-fw) were intentionally removed. Unlike margin/padding (which must bubble to the block-level
because inline s can't carry them), font-family inherits naturally.
The .gothammedium / .gothammedium-fw classes on the already style
that span's text; propagating font-family to the whole via :has()
was incorrectly overriding sibling text that should keep its default font. */
/* ── Anti-double-spacing overrides ─────────────────────────────────────────────
Problem: AEM RTE places utility classes on elements inside tags.
When the utility class already carries its own margin/padding (e.g. .mt-24
has margin-top:24px), AND its p:has() rule also adds the same value to the
parent , both fire simultaneously — effectively doubling the spacing.
Affected classes and why they double:
.mt-24 → display:inline-block + margin-top:24px on span + p:has(.mt-24)
.mb-8 → display:inline-block + margin-bottom:8px on span + p:has(.mb-8)
.mb-16 → display:inline-block + margin-bottom:16px + p:has(.mb-16)
.mb-24 → display:inline-block + margin-bottom:24px + p:has(.mb-24)
.pl-20 → padding-left:20px on span + p:has(.pl-20)
.pr-20 → padding-right:20px on span + p:has(.pr-20)
Fix: when these spans live inside a , cancel their own spacing so that
ONLY the p:has() rule on the takes effect. The original utility class
declarations are NOT modified — they still work correctly on block elements
outside of a (e.g. a div.mt-24). */
p .mt-24 {
margin-top: 0 !important;
display: inline !important;
}
p .mb-8 {
margin-bottom: 0 !important;
display: inline !important;
}
p .mb-16 {
margin-bottom: 0 !important;
display: inline !important;
}
p .mb-24 {
margin-bottom: 0 !important;
display: inline !important;
}
p .pl-20 {
padding-left: 0 !important;
}
p .pr-20 {
padding-right: 0 !important;
}
.primary-button, .primary-button-transparent {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 768px) {
.primary-button, .primary-button-transparent {
width: 100%;
}
}
.primary-button a, .primary-button-transparent a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.primary-button a::after, .primary-button-transparent a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.primary-button a::after, .primary-button-transparent a::after {
display: none;
}
}
.primary-button:hover, .primary-button-transparent:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
}
.primary-button-large {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
}
.primary-button-large a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
padding: 15px 30px;
}
.primary-button-with-border {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
background-color: #fff;
border: 1px solid #9d7d4c;
/* Ensure arrow icon is hidden on small screens for accessibility/space */
}
@media (max-width: 768px) {
.primary-button-with-border {
width: 100%;
}
}
.primary-button-with-border a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
color: #9d7d4c;
}
.primary-button-with-border a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.primary-button-with-border a::after {
display: none !important;
content: none !important;
}
}
.primary-button-with-border:hover {
background: rgba(157, 125, 76, 0.1);
color: #9d7d4c;
border: 1px solid #9d7d4c;
}
.primary-button-without-border {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
background-color: #fff;
border: none;
padding-right: 0;
}
@media (max-width: 768px) {
.primary-button-without-border {
width: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.primary-button-without-border a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
color: #9d7d4c;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-right: 0;
}
.primary-button-without-border a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.primary-button-without-border a::after {
display: none;
}
}
.primary-button-without-border:hover {
text-decoration: underline;
color: #9d7d4c;
}
.seemore-button {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 0px;
margin-top: 20px;
}
.seemore-button a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
padding: 0;
}
.seemore-button:hover {
background-color: #003494;
}
@media (min-width: 769px) {
.align-bottom .primary-button-without-border, .align-bottom .primary-button-with-border,
.align-bottom .primary-button,
.align-bottom .primary-button-transparent {
position: absolute;
bottom: 20px;
}
}
.primary-button-transparent {
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
.primary-button-transparent:hover {
background: rgba(0, 0, 0, 0.04) !important;
background-color: rgba(0, 0, 0, 0.04) !important;
}
.primary-button-transparent .primary-button-with-border {
background: transparent !important;
background-color: transparent !important;
border: 1px solid #9d7d4c !important;
}
.primary-button-transparent .primary-button-with-border:hover {
background: rgba(0, 0, 0, 0.04) !important;
background-color: rgba(0, 0, 0, 0.04) !important;
}
.primary-button-transparent .primary-button-with-border a {
color: #9d7d4c !important;
}
.primary-button-transparent .primary-button-with-border a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg") !important;
}
.primary-button-transparent > a {
color: #9d7d4c !important;
}
.primary-button-transparent > a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg") !important;
}
.primary-button-transparent.align-center {
margin-left: auto !important;
margin-right: auto !important;
letter-spacing: -0.011em !important;
line-height: 27px !important;
}
.primary-button-transparent.align-center a {
line-height: 27px !important;
}
.primary-button-transparent.align-center .primary-button-with-border a {
line-height: 27px !important;
}
.primary-button-transparent.align-center .primary-button-without-border a {
line-height: 27px !important;
}
.primary-button-transparent.align-center > a {
line-height: 27px !important;
}
.heroimage {
position: relative;
height: 100vh;
/* Apply the constrained max-width only between desktop breakpoints
(>=992px and <1200px). For screens >=1200px we intentionally do not
constrain the hero h1 so it can span the full available width. */
/* === Policy-Based Custom Styling === */
}
@media (max-width: 1200px) {
.heroimage {
height: 674px;
}
}
.heroimage .ico-point-r {
font-size: 8px;
margin-left: 10px;
margin-right: 10px;
vertical-align: unset;
}
.heroimage.gradient-overlay-1 .gradient {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.1803921569)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1803921569) 0%, rgba(0, 0, 0, 0) 100%);
padding-top: 40px;
height: 20%;
left: 0;
bottom: 0;
position: absolute;
width: 100%;
-webkit-animation: slideInUp 2s ease;
animation: slideInUp 2s ease;
}
.heroimage.gradient-overlay-1 .content {
-webkit-animation: slideInUp 1s ease;
animation: slideInUp 1s ease;
}
.heroimage.gradient-overlay-2 .gradient {
position: absolute;
top: 96px;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(97deg, rgba(41, 41, 41, 0.8) 24.04%, rgba(41, 41, 41, 0) 69.12%);
}
.heroimage.gradient-overlay-3 .gradient {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(266.55deg, rgba(140, 144, 153, 0) 0.79%, #686e7a 40.96%, #4c535c 79.5%);
}
.heroimage.gradient-overlay-4 .gradient {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(266.55deg, rgba(0, 0, 0, 0) 0.79%, rgba(0, 0, 0, 0.5) 40.96%, rgba(0, 0, 0, 0.5) 79.5%);
}
.heroimage h1, .heroimage .h1 {
font-size: 48px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 15px;
color: #fff;
}
.heroimage p {
margin-bottom: 32px;
font-family: "gothambook";
font-size: 20px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
text-align: left;
color: #fff;
}
.heroimage .full-width-banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: top;
}
.heroimage .content {
position: absolute;
top: 50%;
color: #fff;
text-align: left;
width: 630px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: fadeIn 3s ease;
animation: fadeIn 3s ease;
}
.heroimage .content .button {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 27px;
}
.heroimage .content .button::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.heroimage .content .button:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
}
.heroimage .full-width-banner-wrapper {
margin: 0 auto;
/* Bootstrap-style responsive container constraints for desktop only (≥992px) */
/* These max-widths ensure content alignment with nav/sub-nav classes */
}
@media (min-width: 992px) {
.heroimage .full-width-banner-wrapper {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.heroimage .full-width-banner-wrapper {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.heroimage .full-width-banner-wrapper {
max-width: 1320px !important;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.heroimage {
/* Target all h1 variants - base, nav-page, and sub-nav */
}
.heroimage .hero-banner__title {
max-width: 70% !important;
}
.heroimage h1, .heroimage .h1 {
max-width: 70% !important;
}
.heroimage.nav-page h1, .heroimage.nav-page .h1 {
max-width: 70% !important;
}
.heroimage.sub-nav h1, .heroimage.sub-nav .h1 {
max-width: 70% !important;
}
}
.heroimage .full-width-banner-breadcrumb {
font-family: "gothambook";
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
position: relative;
z-index: 1;
color: #fff;
padding-top: 30px;
}
.heroimage .full-width-banner-breadcrumb a {
color: #fff;
text-decoration: underline;
}
.heroimage .full-width-banner-breadcrumb a .ico-point-r {
margin: 0 10px 0 10px;
}
@media screen and (max-width: 768px) {
.heroimage {
position: relative;
height: 422px;
}
.heroimage .content {
padding: 0 20px;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.heroimage .content .button {
padding: 12px 20px;
width: auto;
position: absolute;
bottom: 30px;
width: calc(100% - 40px);
margin: 0;
}
.heroimage .content .button:after {
content: none !important;
}
}
@media screen and (max-width: 768px) {
.heroimage h1, .heroimage .h1 {
font-size: 32px;
line-height: 38px;
}
.heroimage p {
font-size: 16px;
line-height: 22px;
}
}
@media screen and (max-width: 768px) and (max-width: 320px) {
.heroimage p {
margin-bottom: 32px;
}
}
@media screen and (max-width: 768px) {
.heroimage .full-width-banner-breadcrumb {
padding-top: 20px;
}
.heroimage .full-width-banner-breadcrumb a {
display: none;
}
.heroimage .full-width-banner-breadcrumb :nth-last-child(-n+2) {
display: inline-block;
}
.heroimage .full-width-banner-wrapper {
max-width: 100%;
height: 100%;
}
.heroimage.gradient-overlay-1 .gradient {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.1803921569)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1803921569) 0%, rgba(0, 0, 0, 0) 100%);
padding-top: 40px;
}
.heroimage.gradient-overlay-2 .gradient {
background: linear-gradient(97deg, rgba(41, 41, 41, 0.6) 24.04%, rgba(41, 41, 41, 0) 69.12%);
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.heroimage .full-width-banner-wrapper {
margin: 0 20px;
}
}
.heroimage.nav-page .content {
position: absolute;
top: auto;
bottom: 0;
color: #fff;
text-align: left;
width: 100% !important;
-webkit-transform: none;
transform: none;
left: 0 !important;
right: 0 !important;
padding: 0 15px 48px 15px !important;
height: auto;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.heroimage.nav-page .content {
bottom: 20px;
top: auto;
padding: 0 12px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 0 !important;
margin-left: auto !important;
}
}
@media (min-width: 576px) {
.heroimage.nav-page .content {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.heroimage.nav-page .content {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.heroimage.nav-page .content {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.heroimage.nav-page .content {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.heroimage.nav-page .content {
max-width: 1320px !important;
}
}
.heroimage.nav-page h1, .heroimage.nav-page .h1 {
font-size: 40px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 0px;
color: #fff;
}
@media (max-width: 768px) {
.heroimage.nav-page h1, .heroimage.nav-page .h1 {
font-size: 32px;
line-height: 38px;
}
}
.heroimage.sub-nav .content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
bottom: 0;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
padding: 0 15px 48px 15px !important;
position: absolute;
-webkit-transform: none;
transform: none;
left: 0 !important;
right: 0 !important;
text-align: left;
top: auto;
width: 100% !important;
height: auto;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.heroimage.sub-nav .content {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
bottom: 20px;
top: auto;
left: 0 !important;
right: 0 !important;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
width: 100% !important;
padding: 0 12px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 0 !important;
margin-left: auto !important;
}
}
@media (min-width: 576px) {
.heroimage.sub-nav .content {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.heroimage.sub-nav .content {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.heroimage.sub-nav .content {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.heroimage.sub-nav .content {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.heroimage.sub-nav .content {
max-width: 1320px !important;
}
}
.heroimage.sub-nav h1, .heroimage.sub-nav .h1 {
font-size: 40px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 0px;
color: #fff;
}
@media (max-width: 768px) {
.heroimage.sub-nav h1, .heroimage.sub-nav .h1 {
font-size: 32px;
line-height: 38px;
}
}
.heroimage .btn.active {
border-color: transparent;
padding: 0 24px 0 0;
}
@media (max-width: 768px) {
.heroimage .btn.active {
padding: 0;
}
}
.heroimage .btn.btn-back:hover {
color: #9d7d4c;
background: 0 0;
}
.heroimage .btn.btn-back {
display: none;
}
.heroimage.sub-nav .btn.btn-back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* === Hero when rendered inside a carousel === */
.heroimage--in-carousel {
height: 100dvh !important;
min-height: 100dvh !important;
width: 100%;
}
.cmp-carousel.hero-only-carousel {
max-height: none !important;
}
.cmp-carousel.hero-only-carousel .cmp-carousel__container,
.cmp-carousel.hero-only-carousel .cmp-carousel__content {
max-height: none !important;
}
.cmp-carousel.hero-only-carousel .cmp-carousel__item {
height: auto !important;
overflow: visible;
}
.cmp-carousel.hero-only-carousel .heroimage--in-carousel .full-width-banner {
height: 100% !important;
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.heroimage--in-carousel {
height: 100dvh !important;
min-height: 100dvh !important;
}
}
.header {
z-index: 2;
margin-bottom: -104px;
-webkit-animation: fadeInDown 2s ease;
animation: fadeInDown 2s ease;
/* Ensure container widths match Bootstrap's small container breakpoint when >=576px */
/* Strong override to ensure mobile offcanvas nav list items use sigvar-light
even when other styles (bootstrap utilities or component rules) try to
override them. This mirrors the h4 pattern: increased specificity + !important. */
}
@media (max-width: 992px) {
.header {
margin-bottom: -91px;
}
}
.header#sticky-header:not(.sticky) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(32.29%, rgba(0, 0, 0, 0.18)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 32.29%, rgba(0, 0, 0, 0) 100%);
}
.header.sticky {
position: fixed !important;
top: 0;
width: 100%;
z-index: 100;
}
.header.sticky, .header.has-dropdown {
background: #fff !important;
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.header.sticky img, .header.has-dropdown img {
display: none;
}
.header.sticky img.logo-sticky, .header.has-dropdown img.logo-sticky {
display: block;
}
.header.sticky .header__content, .header.has-dropdown .header__content {
height: auto;
padding: 24px 0;
/* Remove left/right padding on mobile for sticky state */
}
@media (max-width: 992px) {
.header.sticky .header__content, .header.has-dropdown .header__content {
padding: 24px 0;
}
}
.header.sticky .header__content .navbar .nav-link, .header.has-dropdown .header__content .navbar .nav-link {
color: #333;
}
.header.sticky .header__content .navbar .nav-link:hover, .header.sticky .header__content .navbar .nav-link.active, .header.has-dropdown .header__content .navbar .nav-link:hover, .header.has-dropdown .header__content .navbar .nav-link.active {
color: #9d7d4c;
}
.header.sticky .navbar .nav-item.dropdown .btn.dropdown-toggle::after, .header.has-dropdown .navbar .nav-item.dropdown .btn.dropdown-toggle::after {
border-color: #333;
}
.header.sticky .navbar .nav-item.dropdown .btn.dropdown-toggle:hover::after, .header.has-dropdown .navbar .nav-item.dropdown .btn.dropdown-toggle:hover::after {
border-color: #9d7d4c;
}
.header.sticky .navbar-toggler, .header.has-dropdown .navbar-toggler {
color: #0e1c42;
}
.header .logo {
max-width: 169px;
}
@media (max-width: 992px) {
.header .logo {
max-width: 120px;
}
}
.header .logo.logo-sticky {
display: none;
}
.header__content {
height: 104px;
padding-left: 0;
padding-right: 0;
/* Bootstrap-style responsive container constraints for desktop only (≥992px) */
/* These max-widths ensure content stays readable and properly contained on large screens */
/* Mobile: remove left/right padding, keep only top/bottom */
/* (Removed small-screen left/right padding overrides) */
}
@media (min-width: 992px) {
.header__content {
max-width: 960px !important;
margin: 0 auto; /* Center the content */
}
}
@media (min-width: 1200px) {
.header__content {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.header__content {
max-width: 1320px !important;
}
}
@media (max-width: 992px) {
.header__content {
height: auto;
padding: 24px 0;
}
}
@media (min-width: 576px) {
.header .container-sm,
.header .container {
max-width: 540px !important;
}
}
.header .navbar {
background: none;
padding: 0;
position: unset;
}
.header .navbar .navbar-nav {
gap: 40px;
}
.header .navbar .nav-item.dropdown {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: unset;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle {
width: 26px;
padding: 0;
border: none; /* Remove border */
background: transparent; /* Remove background color */
-webkit-box-shadow: none;
box-shadow: none;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle::after {
color: #fff;
border: solid #fff;
border-width: 0 2px 2px 0;
padding: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 0 5px;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle:hover::after {
border-color: #fff;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle.show::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin: 2px 0 0;
}
.header .navbar .nav-link {
color: rgba(255, 255, 255, 0.95);
padding: 0;
font-size: 20px;
line-height: 24px;
text-transform: none !important;
font-family: "sigvar-light";
text-transform: none !important;
}
.header .navbar .nav-link.active {
color: #fff;
font-family: "sigvar-medium";
}
.header .navbar .dropdown-menu {
border: none;
background: #ffffff;
-webkit-box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.08);
box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.08);
border-radius: 0;
padding: 0;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-top: 0;
min-width: 100%;
background: linear-gradient(100deg, #fff 70%, #fafafa 30%);
/* Ensure the dropdown menu spans full viewport width so inner container centers */
/* Align dropdown inner container with header__content so the
dropdown content left/right edges match the main navigation.
The OUTER .header-container (wrapping header__content) uses
width: 90% + margin: 5% from _global.scss. header__content
then adds max-width breakpoints + margin: 0 auto inside it.
This dropdown .header-container must replicate that combined
effect. Using width: 90% + margin: 0 auto achieves it:
– When 90% < max-width → element is 90% wide, auto-margin
gives 5% each side (matches the outer container).
– When 90% ≥ max-width → element is capped at max-width and
centered (matches header__content centering). */
}
.header .navbar .dropdown-menu.show {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
right: 0;
}
.header .navbar .dropdown-menu li {
padding: 16px 0;
border-bottom: 1px solid #f2f2f2;
}
.header .navbar .dropdown-menu li:first-child, .header .navbar .dropdown-menu li:last-child {
border-bottom: none;
}
.header .navbar .dropdown-menu li:first-child {
color: #9d7d4c;
text-transform: none !important;
font-family: "sigvar-medium";
font-size: 18px;
line-height: 24px;
}
.header .navbar .dropdown-menu li:first-child a {
color: #9d7d4c;
font-size: 18px;
}
.header .navbar .dropdown-menu li .dropdown-item {
padding: 0;
text-transform: none !important;
color: #666666;
font-size: 15px;
white-space: normal;
}
.header .navbar .dropdown-menu li .dropdown-item:hover {
background: none;
color: #9d7d4c;
}
.header .navbar .dropdown-menu {
left: 0 !important;
right: 0 !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.header .navbar .dropdown-menu .header-container {
/* Align header-container inside header dropdown with
global container behavior used by .cmp-container--body */
width: 100% !important;
padding-right: 12px !important;
padding-left: 12px !important;
margin-right: auto !important;
margin-left: auto !important;
}
@media (min-width: 576px) {
.header .navbar .dropdown-menu .header-container {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.header .navbar .dropdown-menu .header-container {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.header .navbar .dropdown-menu .header-container {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.header .navbar .dropdown-menu .header-container {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.header .navbar .dropdown-menu .header-container {
max-width: 1320px !important;
}
}
.header .navbar .dropdown-menu .dropdown-tabs {
margin: 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .col-parent {
margin-top: 0;
padding: 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .col-parent.has-bg {
background-color: #fafafa;
border-left: 1px solid #f2f2f2;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs {
border: none;
padding: 48px 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item {
border: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item:first-child {
padding-top: 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link {
font-size: 18px;
color: #666;
border: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link:hover {
text-decoration: underline;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link.active {
font-weight: normal;
color: #9d7d4c;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link.active:hover {
text-decoration: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link.active svg {
display: inline-block;
margin-left: 20px;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link svg {
display: none;
}
@media (max-width: 1199px) {
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link {
font-size: 15px;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link svg {
width: 16px;
}
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane {
padding: 48px;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane .main-link-tab {
font-size: 18px;
font-family: sigvar-medium;
line-height: 24px;
display: block;
padding-bottom: 16px;
color: #9d7d4c;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0 16px;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul li {
width: calc(50% - 8px);
font-family: gothambook;
font-size: 15px;
line-height: 21px;
color: #666;
border: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul li a {
font-family: gothambook;
font-size: 15px;
line-height: 21px;
color: #666;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul li a:hover {
color: #9d7d4c;
}
.header .navbar-toggler {
color: #fff;
}
.header .navbar-mobile {
height: 100vh;
display: none;
}
.header .navbar-mobile.show {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header .navbar-mobile .offcanvas-header {
background: #0e1c42;
padding: 24px 20px;
}
.header .navbar-mobile .offcanvas-header .logo {
max-width: 120px;
display: block;
}
.header .navbar-mobile .offcanvas-header .btn-close {
opacity: 1;
-webkit-box-shadow: none;
box-shadow: none;
}
.header .navbar-mobile .offcanvas-body {
padding: 0;
overflow-x: hidden;
}
.header .navbar-mobile .offcanvas-body ul {
padding: 0 20px;
border-bottom: 1px solid #f2f2f2;
}
.header .navbar-mobile .offcanvas-body ul li {
padding: 24px 0;
font-family: "sigvar-light";
font-size: 20px;
}
.header .navbar-mobile .offcanvas-body ul li a {
color: #333;
}
.header .navbar-mobile .offcanvas-body ul li a:hover, .header .navbar-mobile .offcanvas-body ul li a.active {
color: #9d7d4c;
}
.header .navbar-mobile .offcanvas-body ul li.has-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
width: 100%;
top: 0;
left: 100%;
z-index: 1;
height: calc(100vh + 100px);
background-color: #fff;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li {
font-size: 16px;
padding: 16px 0;
font-family: "gothambook";
border: none;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li a {
color: #4d4d4d;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li a:hover, .header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li a.active {
color: #9d7d4c;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav {
width: 100%;
background-color: #fff;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-color: #f2f2f2;
color: #333;
border-width: 0 0 1px 0;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav[aria-expanded=true] {
color: #9d7d4c;
background-color: #fafafa;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav[aria-expanded=true] .caret {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav .caret {
color: #333;
border: 2px solid #333;
border-width: 0 2px 2px 0;
margin: 0 0 5px;
padding: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .accordion-header {
margin: 0;
}
.header .navbar-mobile .offcanvas-body ul li,
.header .navbar-mobile .offcanvas-body ul li * {
font-family: "sigvar-light" !important;
}
.header .btn-sub-navs {
padding: 0 7px;
cursor: pointer;
}
.header .btn-sub-navs span {
border: solid #333;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.header .btn-back-main-navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
background-color: #0e1c42;
padding: 20px;
font-family: "sigvar-light";
gap: 10px;
cursor: pointer;
border-top: 1px solid #333;
}
.header .btn-back-main-navs span {
color: #fff;
}
.header .btn-back-main-navs span.arrow-left {
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.header .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
font-size: 18px;
height: auto;
padding: 12px 20px;
font-family: "sigvar-medium";
text-transform: capitalize;
color: #9d7d4c;
border-radius: 2px;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
.footer {
padding: 100px 0;
background: #fff var(--footer-bg) no-repeat bottom left;
}
@media (max-width: 768px) {
.footer {
padding: 48px 12px 48px 12px;
background-size: 350px auto;
}
}
@media (width >= 576px) {
.footer {
margin: 0 auto;
}
}
.footer__wrap {
max-width: 816px;
}
@media (width >= 576px) {
.footer__wrap {
max-width: 540px;
margin: 0 auto;
}
}
.footer__nav ul {
margin: 48px 0 32px;
gap: 24px;
}
.footer__nav ul li a {
color: #333333;
line-height: 19px;
}
.footer__nav ul li a:hover {
color: #9d7d4c;
}
.footer__nav ul li a:hover::after {
border-color: #9d7d4c;
}
.footer__nav ul li a.active {
color: #9d7d4c;
}
@media (max-width: 768px) {
.footer__nav ul li a {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer__nav ul li a::after {
content: "" !important;
display: inline-block !important;
border: solid #1a1a1a;
border-width: 0 2px 2px 0;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.footer__nav ul li::after {
content: "|";
color: #e6e6e6;
font-size: 14px;
display: inline-block;
margin-left: 24px;
}
@media (max-width: 768px) {
.footer__nav ul li::after {
content: none;
}
}
.footer__nav ul li:last-child {
border-bottom: none !important;
}
.footer__nav ul li:last-child::after {
content: none;
}
@media (max-width: 768px) {
.footer__nav ul li {
width: 100%;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 24px;
}
}
.footer .desc {
font-size: 14px;
line-height: 20px;
margin-bottom: 48px;
color: #666666;
}
.footer .social ul {
gap: 32px;
margin-bottom: 48px;
}
.footer .social ul li a {
color: #4d4d4d;
}
.footer .social ul li a:hover em:before {
color: #9d7d4c;
}
.footer .airline ul {
gap: 20px 32px;
margin-bottom: 48px;
}
.footer .copyright {
font-size: 16px;
line-height: 19px;
letter-spacing: -0.011em;
font-family: "gothambook";
font-weight: 400;
}
body {
background-color: #fff;
margin: 0;
padding: 0;
font-size: 18px;
line-height: 24px;
font-weight: 400;
font-family: "gothambook";
letter-spacing: -0.011em;
width: 100%;
}
@media (max-width: 768px) {
body {
font-size: 16px;
line-height: 22px;
}
}
h1, .h1 {
font-size: 40px;
font-style: normal;
font-weight: normal;
font-family: "sigvar-medium";
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
h1, .h1 {
font-size: 32px;
}
}
h2, .h2 {
font-size: 32px;
line-height: 38px;
font-style: normal;
font-weight: normal;
font-family: "sigvar-medium";
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
h2, .h2 {
font-size: 24px;
line-height: 29px;
}
}
h3, .h3 {
font-size: 26px;
font-style: normal;
font-weight: normal;
font-family: "sigvar-medium";
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
h3, .h3 {
font-size: 22px;
}
}
h4, .h4 {
font-size: 22px;
font-style: normal;
font-weight: normal;
font-family: "sigvar-medium";
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
h4, .h4 {
font-size: 20px;
}
}
/* New utility: l1 - same as h4 but smaller (18px) and forces font when wrapped inside links */
.l1 {
font-family: "sigvar-medium";
font-size: 18px;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
.l1 {
font-size: 16px;
}
}
/* Ensure any anchors inside .l1 keep the l1 font-family and size (important to prevent overrides) */
.l1 a,
.l1 .cmp-title__text a,
.cmp-title__text .l1 a,
.l1 .cmp-title__link,
.l1 .cmp-title__link {
font-family: "sigvar-medium" !important;
font-size: 18px !important;
}
h5, .h5 {
font-size: 20px;
font-style: normal;
font-weight: normal;
font-family: "sigvar-medium";
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
h5, .h5 {
font-size: 18px;
}
}
h6, .h6 {
font-size: 18px;
font-style: normal;
font-weight: normal;
font-family: "sigvar-medium";
line-height: 1;
color: #9d7d4c;
}
@media (max-width: 992px) {
h6, .h6 {
font-size: 16px;
}
}
a {
text-decoration: none;
margin: 0;
padding: 0;
color: #9d7d4c;
font-family: "gothambook";
}
li {
font-family: "gothambook";
letter-spacing: -0.011em;
}
.cmp-title a:hover,
h1 a:hover,
.h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover {
color: inherit !important;
text-decoration: underline;
}
/* Ensure any H4 that contains a link (title link) uses sigvar-medium explicitly. */
h4 a, .h4 a,
h4.cmp-title__text a,
.cmp-title__text h4 a,
.cmp-title .cmp-title__link,
.cmp-title__link {
font-family: "sigvar-medium" !important;
}
p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
font-family: "gothambook";
letter-spacing: -0.011em;
width: 100%;
}
@media (max-width: 768px) {
p {
font-size: 16px;
line-height: 22px;
}
}
strong {
font-family: "gothammedium";
font-weight: 400;
}
.text li, .text p {
word-break: break-word;
overflow-wrap: break-word;
}
.text a {
display: inline-block; /* Prevents text from stretching */
}
.animate__delay__custom-1 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.animate__delay__custom-2 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.animate__delay__custom-3 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.animate__delay__custom-4 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.animate__delay__custom-5 {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.animate__delay__custom-6 {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.animate__delay__custom-7 {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.animate__delay__custom-8 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@media (max-width: 767px) {
*[class*=animate__delay__custom] {
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
}
}
.brown-button {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
}
.brown-button-small {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.brown-button-small::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.brown-border-button {
font-size: 18px;
font-family: sigvar-medium;
font-weight: 400;
letter-spacing: 0px;
text-transform: capitalize;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 2px;
border: 1px solid #9d7d4c;
margin: 10px 0;
padding: 12px 20px;
width: 100%;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
}
.brown-border-button-small {
font-size: 18px;
font-family: sigvar-medium;
font-weight: 400;
letter-spacing: 0px;
text-transform: capitalize;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 2px;
border: 1px solid #9d7d4c;
margin: 10px 0;
padding: 12px 20px;
width: 100%;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.brown-border-button-small::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
@media screen and (max-width: 991px) {
.hidden-mobile {
display: none !important;
}
}
/* Global: hide arrow pseudo-elements on small screens to avoid overflow */
@media (max-width: 768px) {
a::after, button::after {
display: none !important;
content: none !important;
}
}
@media screen and (min-width: 992px) {
.hidden-desktop {
display: none !important;
}
}
.header-container {
/* Make header-container match cmp-container--body for consistent
container widths and horizontal padding across components. */
width: 100% !important;
padding-right: 12px !important;
padding-left: 12px !important;
margin-right: auto !important;
margin-left: auto !important;
}
@media (min-width: 576px) {
.header-container {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.header-container {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.header-container {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.header-container {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.header-container {
max-width: 1320px !important;
}
}
.animate__slideInUp__slow {
-webkit-animation: slideInUp 1s ease;
animation: slideInUp 1s ease;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animate__slideInUp {
-webkit-animation: slideInUp 1s ease;
animation: slideInUp 1s ease;
}
@keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 600px, 0);
transform: translate3d(0, 600px, 0);
visibility: visible;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInLight {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation: fadeIn 3s ease;
animation: fadeIn 3s ease;
}
.align-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Position utilities (Bootstrap-like helpers) */
.position-absolute {
position: absolute !important;
}
.start-50 {
left: 50% !important;
}
.top-50 {
top: 50% !important;
}
.translate-middle {
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
}
@media (min-width: 769px) {
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
}
}
.font-size-10 {
font-size: 10px;
}
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
.font-size-16 {
font-size: 16px;
}
.font-size-18 {
font-size: 18px;
}
.font-size-20 {
font-size: 20px;
}
.font-size-22 {
font-size: 22px;
}
.font-size-24 {
font-size: 24px;
}
.font-size-26 {
font-size: 26px;
}
.font-size-28 {
font-size: 28px;
}
.mt-24 {
display: inline-block;
margin-top: 24px;
}
.mb-8 {
display: inline-block;
margin-bottom: 8px;
}
.mb-16 {
display: inline-block;
margin-bottom: 16px;
}
.mb-24 {
display: inline-block;
margin-bottom: 24px;
}
.pt-16 {
padding-top: 16px;
}
.pt-24 {
padding-top: 24px;
}
.pt-32 {
padding-top: 32px;
}
.pb-8 {
padding-bottom: 8px;
}
.pb-16 {
padding-bottom: 16px;
}
.pb-24 {
padding-bottom: 24px;
}
.pl-24 {
padding-left: 24px;
}
.pr-24 {
padding-right: 24px;
}
.black-color {
color: #333;
}
.brown-color {
color: #9d7d4c;
line-height: 29px;
}
.brown-list .cmp-text ol li::marker {
color: #9d7d4c;
font-weight: bold;
}
.gothammedium {
font-family: gothammedium;
}
.card-text-height h1 a, .card-text-height .h1 a, .card-text-height h2 a, .card-text-height .h2 a, .card-text-height h3 a, .card-text-height .h3 a, .card-text-height h4 a, .card-text-height .h4 a, .card-text-height h5 a, .card-text-height .h5 a, .card-text-height h6 a, .card-text-height .h6 a {
line-height: 28px;
}
@media (max-width: 768px) {
.mobile-center-text .cmp-text p {
text-align: center;
}
}
@media (max-width: 768px) {
.mobile-center-title .cmp-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
/* ── Text-component RTE utility classes (missing styles) ── */
.gothammedium-fw {
font-family: "gothammedium";
font-weight: 400;
}
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mr-0 {
margin-right: 0 !important;
}
.pl-20 {
padding-left: 20px;
}
.pr-20 {
padding-right: 20px;
}
/* When RTE wraps text in a span with these utility classes inside a ,
propagate the spacing intent to the tag itself using :has().
NOTE: The direct-child combinator (>) is intentionally NOT used here because
AEM RTE nests spans arbitrarily deep (e.g.
margins and any framework overrides. */ p:has(.mt-0) { margin-top: 0 !important; } p:has(.mt-24) { margin-top: 24px !important; } p:has(.mb-0) { margin-bottom: 0 !important; } p:has(.mb-8) { margin-bottom: 8px !important; } p:has(.mb-16) { margin-bottom: 16px !important; } p:has(.mb-24) { margin-bottom: 24px !important; } p:has(.ml-0) { margin-left: 0 !important; } p:has(.mr-0) { margin-right: 0 !important; } p:has(.pl-20) { padding-left: 20px !important; } p:has(.pr-20) { padding-right: 20px !important; } /* NOTE: p:has(.gothammedium) and p:has(.gothammedium-fw) were intentionally removed. Unlike margin/padding (which must bubble to the block-level
because inline s can't carry them), font-family inherits naturally.
The .gothammedium / .gothammedium-fw classes on the already style
that span's text; propagating font-family to the whole via :has()
was incorrectly overriding sibling text that should keep its default font. */
/* ── Anti-double-spacing overrides ─────────────────────────────────────────────
Problem: AEM RTE places utility classes on elements inside tags.
When the utility class already carries its own margin/padding (e.g. .mt-24
has margin-top:24px), AND its p:has() rule also adds the same value to the
parent , both fire simultaneously — effectively doubling the spacing.
Affected classes and why they double:
.mt-24 → display:inline-block + margin-top:24px on span + p:has(.mt-24)
.mb-8 → display:inline-block + margin-bottom:8px on span + p:has(.mb-8)
.mb-16 → display:inline-block + margin-bottom:16px + p:has(.mb-16)
.mb-24 → display:inline-block + margin-bottom:24px + p:has(.mb-24)
.pl-20 → padding-left:20px on span + p:has(.pl-20)
.pr-20 → padding-right:20px on span + p:has(.pr-20)
Fix: when these spans live inside a , cancel their own spacing so that
ONLY the p:has() rule on the takes effect. The original utility class
declarations are NOT modified — they still work correctly on block elements
outside of a (e.g. a div.mt-24). */
p .mt-24 {
margin-top: 0 !important;
display: inline !important;
}
p .mb-8 {
margin-bottom: 0 !important;
display: inline !important;
}
p .mb-16 {
margin-bottom: 0 !important;
display: inline !important;
}
p .mb-24 {
margin-bottom: 0 !important;
display: inline !important;
}
p .pl-20 {
padding-left: 0 !important;
}
p .pr-20 {
padding-right: 0 !important;
}
[class^=icon-]:before,
[class*=icon-]:before {
font-size: 23px;
color: #4d4d4d;
}
.icon-insta:before {
content: "\e900";
}
.icon-ytb:before {
content: "\e901";
}
.icon-tw:before {
content: "\e902";
}
.icon-linkedin:before {
content: "\e903";
}
.icon-fb:before {
content: "\e904";
}
@font-face {
font-family: "gothambook";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/gotham-book-webfont.woff2") format("woff2"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/gotham-book-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "gothammedium";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/gotham-medium-webfont.woff2") format("woff2"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/gotham-medium-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "gothambold";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/gotham-bold-webfont.woff2") format("woff2"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/gotham-bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "sigvar-bold";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/sigvar_serial-bold-webfont.woff2") format("woff2"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/sigvar_serial-bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "sigvar-light";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/sigvar-serial-light-regular-webfont.woff2") format("woff2"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/sigvar-serial-light-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "sigvar-medium";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/sigvar-serial-medium-regular-webfont.woff2") format("woff2"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/sigvar-serial-medium-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "icomoon";
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/icomoon/icomoon.eot");
src: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/icomoon/icomoon.eot?#iefix") format("embedded-opentype"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/icomoon/icomoon.woff") format("woff"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/icomoon/icomoon.ttf") format("truetype"), url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/fonts/icomoon/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.content-text h2, .content-text .h2 {
color: #9d7d4c;
}
.content-text a {
text-decoration: underline;
font-family: "sigvar-medium";
}
.content-text p a {
font-family: "gothammedium";
}
/* Custom h4 variant: identical to global h4 but with line-height: 28px */
.h4-custom h4, .h4-custom .h4 {
line-height: 28px !important;
}
.master-column-container {
display: grid;
gap: 20px;
-webkit-transition: grid-template-columns 0.5s ease;
transition: grid-template-columns 0.5s ease;
transition: grid-template-columns 0.5s ease, -ms-grid-columns 0.5s ease;
}
.master-column-container .card {
border-radius: 4px;
background-color: #fff;
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0509803922);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0509803922);
gap: 20px;
}
.master-column-container .card .card-image {
font-size: 0px;
}
@media only screen and (max-width: 480px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container .icon-cards.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-card.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-gallery.span-2 {
grid-column: auto/span 2;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(3, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container .icon-cards.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-card.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-gallery.span-2 {
grid-column: auto/span 2;
}
}
@media only screen and (min-width: 1200px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(3, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(3, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(4, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(5, 1fr);
}
.master-column-container .icon-cards.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-card.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-gallery.span-2 {
grid-column: auto/span 2;
}
}
@media only screen and (max-width: 480px) {
.master-column-container.mobile-scroll {
grid-template-columns: none !important;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
grid-auto-flow: column;
grid-auto-columns: minmax(80%, 1fr);
overflow-x: scroll;
scrollbar-width: none;
}
.master-column-container.mobile-scroll .image-card, .master-column-container.mobile-scroll .icon-cards, .master-column-container.mobile-scroll .image-gallery {
scroll-snap-align: center;
scroll-snap-stop: always;
}
}
.content-top {
padding: 120px 0;
}
@media (max-width: 768px) {
.content-top {
padding: 56px 0;
}
}
.content-top a {
cursor: pointer;
}
.text-640 {
max-width: 640px;
width: 100%;
margin: 0 auto; /* center block horizontally */
}
.top-desc {
max-width: 520px;
margin: 0 auto 24px;
}
@media (max-width: 767px) {
.top-desc {
margin: 0px;
}
}
/* New utility: text-960 */
.text-960 {
max-width: 960px;
width: 100%;
margin: 0 auto; /* center block horizontally */
}
/* If authors add both the body container and the text-960 class to the same element
(or nest them), the body utility can force width:100% via !important and prevent
the 960px constraint. Provide a stronger, targeted override so text stays
constrained and centered in those cases. */
.cmp-container--body.text-960,
.cmp-container--body .text-960,
.cmp-container--body.text-960 > .cmp-container {
width: auto !important;
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* If authors add both the body container and the text-640 class to the same element
(or nest them), the body utility can force width:100% via !important and prevent
the 640px constraint. Provide a stronger, targeted override so text stays
constrained and centered in those cases. */
.cmp-container--body.text-640,
.cmp-container--body .text-640,
.cmp-container--body.text-640 > .cmp-container {
width: auto !important;
max-width: 640px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.text-720A {
max-width: 720px !important;
width: auto !important;
margin: 0 auto !important; /* center block horizontally */
}
/* CRITICAL: When .cmp-container--body and .text-720A are on the SAME element,
we need to override .cmp-container--body's responsive max-widths at ALL breakpoints.
This selector has higher specificity and appears later in cascade. */
.cmp-container--body.text-720A {
width: auto !important;
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
/* Override ALL responsive breakpoints from .cmp-container--body */
}
@media (min-width: 576px) {
.cmp-container--body.text-720A {
max-width: 720px !important;
}
}
@media (min-width: 768px) {
.cmp-container--body.text-720A {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.cmp-container--body.text-720A {
max-width: 720px !important;
}
}
@media (min-width: 1200px) {
.cmp-container--body.text-720A {
max-width: 720px !important;
}
}
@media (min-width: 1400px) {
.cmp-container--body.text-720A {
max-width: 720px !important;
}
}
/* If .text-720A is nested inside .cmp-container--body */
.cmp-container--body .text-720A {
width: auto !important;
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ensure .cmp-container inside .text-720A respects the constraint */
.text-720A > .cmp-container {
max-width: 720px !important;
width: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Icon-card (CSS-only): scope title font to the course-content structure so
no HTL/HTML changes are required. We target the specific component markup
hierarchy `.course-content__target > .course-content__target__items >
.course-content__target__item .title` which is unique to the Icon-card
component in this codebase. We also force the font on children so nested
tags like or keep the same font.
*/
.Icon-card .course-content__target > .course-content__target__items > .course-content__target__item .title,
.Icon-card .course-content__target > .course-content__target__items > .course-content__target__item .title * {
font-family: "gothambook" !important;
}
/* Icon-card-coursepage variant: Uses sigvar-medium font instead of gothambook.
This variant also does NOT have mobile centering (no justify-content: center on mobile).
To use this variant, replace class="Icon-card" with class="Icon-card-coursepage" in the markup.
*/
.Icon-card-coursepage .course-content__target > .course-content__target__items > .course-content__target__item .title,
.Icon-card-coursepage .course-content__target > .course-content__target__items > .course-content__target__item .title * {
font-family: "sigvar-medium" !important;
}
.service-excellence {
background: #fafafa;
padding: 80px 0 32px;
}
@media (max-width: 768px) {
.service-excellence {
padding: 56px 0 24px;
}
}
@media (max-width: 768px) {
.service-excellence.our-courses {
padding: 56px 0;
}
}
.service-excellence.operational {
background: #fff;
}
.service-excellence .text-640 p {
margin-bottom: 32px;
}
.service-excellence__cards {
padding: 48px 0;
-webkit-filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.05));
filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.05));
}
@media (max-width: 768px) {
.service-excellence__cards {
padding: 32px 0;
}
}
.service-excellence__cards .row {
gap: 32px 0;
}
@media (max-width: 768px) {
.service-excellence__cards .row {
margin: 0;
}
}
.service-excellence__cards .row .slick-list {
padding: 0;
}
.service-excellence__cards .row .slick-dots {
position: static;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.service-excellence__cards .card .card-body {
padding: 48px 48px 36px;
}
.service-excellence__cards .card .card-footer {
padding: 0 48px 36px;
}
.card {
border: none;
height: 100%;
}
@media (max-width: 768px) {
.card {
-webkit-filter: none;
filter: none;
}
}
.card .card-body h4, .card .card-body .h4 {
color: #9d7d4c;
margin-bottom: 16px;
line-height: 28px;
}
.card .card-body h4 a, .card .card-body .h4 a {
color: #9d7d4c;
}
.card .card-body h4 a:hover, .card .card-body .h4 a:hover {
color: #9d7d4c;
text-decoration: underline;
}
.card .card-footer {
background: none;
border: none;
}
.discover-courses {
background: #fafafa;
padding: 120px 0;
}
@media (max-width: 768px) {
.discover-courses {
padding: 56px 0;
}
}
.discover-courses__cates {
max-width: 768px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 24px;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: 40px;
}
@media (max-width: 768px) {
.discover-courses__cates {
gap: 8px;
}
}
.discover-courses__cates__item {
width: calc((100% - 96px) / 5);
border: 1px solid #9d7d4c;
border-radius: 4px;
font-size: 14px;
font-family: "sigvar-medium";
line-height: 1;
}
@media (max-width: 768px) {
.discover-courses__cates__item {
width: calc((100% - 16px) / 3);
}
}
.discover-courses__cates__item a {
padding: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
color: #333;
height: 100%;
}
.discover-courses__cates__item a:hover {
background: rgba(157, 125, 76, 0.1);
}
.our-courses .service-excellence__cards .card .card-body {
padding: 32px 24px 20px;
}
.our-courses .service-excellence__cards .card .card-body .cates-tag {
font-size: 14px;
margin-bottom: 12px;
font-family: "gothammedium";
gap: 5px;
}
.our-courses .service-excellence__cards .card .card-body .cates-tag .tag {
font-size: 12px;
color: #9d7d4c;
border: 1px solid #9d7d4c;
border-radius: 23px;
padding: 2px 10px;
font-family: "gothambook";
}
.our-courses .service-excellence__cards .card .card-body .card-text {
margin-bottom: 24px;
}
.our-courses .service-excellence__cards .card .card-body .achieve {
font-size: 14px;
}
.our-courses .service-excellence__cards .card .card-body .achieve__title {
color: #9d7d4c;
font-family: "gothammedium";
}
.our-courses .service-excellence__cards .card .card-body .achieve__item {
-webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
border-radius: 2px;
padding: 12px;
margin-top: 8px;
}
.our-courses .service-excellence__cards .card .card-body .achieve__item img {
margin-right: 12px;
}
.our-courses .service-excellence__cards .card .card-footer {
padding: 20px 24px 20px;
}
.our-courses .service-excellence__cards .card .card-footer .btn {
padding-right: 0;
}
.our-courses #courses-pagination {
padding: 0 12px;
margin-top: 32px;
}
.sia-pagination ul {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 400px;
margin: auto;
}
.sia-pagination ul li.first, .sia-pagination ul li.last {
display: none;
}
.sia-pagination ul li a {
border: none;
background: none;
color: #333;
font-size: 14px;
}
.sia-pagination ul li a:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.sia-pagination ul li a:hover {
background: none;
color: #9d7d4c;
}
.sia-pagination ul li.active a {
color: #9d7d4c;
background: none;
}
.sia-pagination ul li.prev, .sia-pagination ul li.next {
padding: 0 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.sia-pagination ul li.prev a, .sia-pagination ul li.next a {
font-size: 0;
border: solid #333;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 10px;
height: 10px;
}
.sia-pagination ul li.prev:not(.disabled) a:hover, .sia-pagination ul li.next:not(.disabled) a:hover {
border-color: #9d7d4c;
}
.sia-pagination ul li.prev a {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.dont-find {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #0e1c42), to(#0e1c42));
background: linear-gradient(to bottom, transparent, transparent 50%, #0e1c42 50%, #0e1c42);
color: #fff;
z-index: 100;
}
.dont-find.show {
background: #0e1c42;
}
.dont-find .collapse {
width: calc(100% - 68px);
}
@media (max-width: 768px) {
.dont-find .collapse {
width: 100%;
}
}
.dont-find__content {
padding: 20px 0;
}
.dont-find__content p {
margin-bottom: 0;
}
.dont-find a.btn {
border-color: #fff;
color: #fff;
background: none;
}
@media (max-width: 768px) {
.dont-find a.btn {
margin-bottom: 20px;
}
}
.dont-find a.btn.btn-dont-find {
font-size: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #0e1c42;
padding: 0;
margin-right: 24px;
}
.dont-find a.btn.btn-dont-find::after {
content: "";
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
width: 10px;
height: 10px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin-top: 3px;
}
.dont-find a.btn.btn-dont-find.active::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 0;
margin-bottom: 3px;
}
.course-content {
padding: 80px 0;
}
@media (max-width: 768px) {
.course-content {
padding: 56px 0 0;
}
}
.course-content--customize {
background: #fafafa;
}
.course-content--customize a.btn-primary {
margin-top: 40px;
}
.course-content h2, .course-content .h2 {
color: #9d7d4c;
}
.course-content ul,
.course-content ol {
padding-left: 20px;
}
.course-content ul li,
.course-content ol li {
color: #9d7d4c;
font-family: "gothammedium";
line-height: 29px;
}
.course-content .course-time {
font-family: "sigvar-medium";
font-size: 20px;
margin: 24px 0;
}
.course-content__what-learn {
margin: 24px 0;
}
.course-content__target {
margin-bottom: 5px;
}
.course-content__target__item {
-webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
border-radius: 2px;
padding: 16px;
margin-top: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
font-family: "sigvar-medium";
}
.course-content__target__item img {
margin-right: 10px;
}
.course-content__target__item p {
margin-bottom: 0;
}
@media (max-width: 992px) {
.course-content .col:last-child {
padding: 0;
margin-top: 40px;
}
.course-content .col:first-child {
margin-top: 0;
}
}
.course-content__target-block {
background: #fafafa;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 48px 40px;
text-align: center;
margin-top: 48px;
}
@media (max-width: 992px) {
.course-content__target-block {
padding: 48px 20px;
}
}
@media (max-width: 576px) {
.course-content__target-block {
margin-top: 0;
}
}
.course-content__target-block .course-content__target__items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 16px;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* Icon-card (CSS-only): ensure title uses sigvar-medium for the component
without editing the HTL template. Uses the specific course-content
markup hierarchy which is unique to this component. */
}
@media (max-width: 992px) {
.course-content__target-block .course-content__target__items {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.course-content__target-block .course-content__target__items .course-content__target__item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (max-width: 992px) {
.course-content__target-block .course-content__target__items .course-content__target__item {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
}
.course-content__target-block .course-content__target__items .course-content__target > .course-content__target__items > .course-content__target__item .title,
.course-content__target-block .course-content__target__items .course-content__target > .course-content__target__items > .course-content__target__item .title * {
font-family: sigvar-medium !important;
}
.course-content__target-block .btn {
margin-top: 32px;
}
.course-content--small .course-content__target .course-content__target__items .course-content__target__item {
font-family: "gothambook";
padding: 12px;
margin-top: 8px;
}
.course-content--big .course-content__target .course-content__target__items .course-content__target__item {
padding: 16px;
margin-top: 16px;
}
/* Mobile: center course-content items horizontally on small screens
This targets the item container so images + title inside the item are centered
without affecting desktop/tablet layouts. */
@media (max-width: 768px) {
.Icon-card .course-content__target__items .course-content__target__item {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Override: Icon-card-coursepage variant should NOT center on mobile,
even if both Icon-card and Icon-card-coursepage classes are present */
.Icon-card-coursepage .course-content__target__items .course-content__target__item {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
}
.date-available {
background: #fafafa;
padding: 120px 0;
}
@media (max-width: 768px) {
.date-available {
padding: 56px 0;
}
}
.date-available__wrap {
max-width: 590px;
}
.date-available #datepicker .datepicker-inline {
width: 100%;
}
.date-available #datepicker .datepicker-inline .table-condensed {
width: 100%;
}
.date-available h2, .date-available .h2 {
color: #9d7d4c;
margin-bottom: 12px;
}
.date-available__calendar__month {
margin-bottom: 24px;
}
.date-available__calendar__month h3, .date-available__calendar__month .h3 {
margin: 0;
}
.date-available__calendar__dates ul {
gap: 12px;
}
@media (max-width: 768px) {
.date-available__calendar__dates ul {
gap: 8px;
}
}
.date-available__calendar__dates ul li {
width: calc((100% - 72px) / 7);
border-radius: 2px;
border: 1px solid #9d7d4c;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.date-available__calendar__dates ul li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 15px 0;
width: 100%;
}
.date-available__calendar__dates ul li span:first-child {
font-family: "sigvar-medium";
}
@media (max-width: 768px) {
.date-available__calendar__dates ul li span:first-child {
font-size: 14px;
}
}
.date-available__calendar__dates ul li span:last-child {
font-size: 14px;
}
@media (max-width: 768px) {
.date-available__calendar__dates ul li span:last-child {
font-size: 12px;
}
}
.date-available__calendar__dates ul li.disabled {
opacity: 0.3;
cursor: default;
}
.date-available__calendar__dates ul li.disabled:hover {
background: none;
color: #9d7d4c;
}
.date-available__calendar__dates ul li.disabled:hover a {
background: none;
color: #9d7d4c;
}
.date-available__calendar__dates ul li.disabled a {
pointer-events: none;
cursor: default;
}
.date-available__calendar__dates ul li:hover, .date-available__calendar__dates ul li.active {
background-color: #9d7d4c;
color: #fff;
}
.date-available__calendar__dates ul li:hover a, .date-available__calendar__dates ul li.active a {
background-color: #9d7d4c;
color: #fff;
}
@media (max-width: 768px) {
.date-available__calendar__dates ul li {
width: calc((100% - 48px) / 7);
}
.date-available__calendar__dates ul li a {
padding: 8px 0;
}
}
.open-run {
background: #0e1c42;
padding: 120px 0;
color: #fff;
}
@media (max-width: 768px) {
.open-run {
padding: 80px 0;
}
}
.open-run__content {
max-width: 716px;
}
.open-run__content h2, .open-run__content .h2 {
margin-bottom: 16px;
}
.open-run__content a.btn {
margin-top: 32px;
}
.enquiry-content {
padding: 164px 0 64px;
}
@media (max-width: 768px) {
.enquiry-content {
padding: 120px 0 32px;
}
}
.enquiry-content__item {
margin-bottom: 64px;
}
@media (max-width: 768px) {
.enquiry-content__item {
margin-bottom: 40px;
}
}
.enquiry-content__item h2, .enquiry-content__item .h2 {
color: #9d7d4c;
margin-bottom: 24px;
text-transform: capitalize;
}
.enquiry-content__item--contact p,
.enquiry-content__item--contact a {
font-family: "gothammedium";
color: #4d4d4d;
}
@media (max-width: 768px) {
.enquiry-content__item--follow {
margin-bottom: 40px;
}
}
.enquiry-content__item--follow .social ul {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: start !important;
gap: 32px;
}
.enquiry-content__item--follow .social ul li a {
color: #333;
}
.enquiry-content__item a:hover {
color: #9d7d4c !important;
}
.enquiry-content .enquiry-form .form-control,
.enquiry-content .enquiry-form .form-select {
border-width: 0 0 1px;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding-left: 5px;
}
.enquiry-content .enquiry-form label {
color: #84888c;
opacity: 1;
text-transform: capitalize;
padding-left: 0;
}
.enquiry-content .enquiry-form .btn-primary {
margin-left: 32px;
}
@media (max-width: 768px) {
.enquiry-content .enquiry-form .btn-primary {
margin: 32px 0 0;
}
}
.enquiry-content .enquiry-form .form-check label {
font-size: 14px;
padding-left: 16px;
}
@media (max-width: 768px) {
.enquiry-content .enquiry-form .form-check label {
padding-left: 8px;
}
}
.enquiry-content .enquiry-form .form-check .form-check-input {
width: 24px;
height: 24px;
border-width: 2px;
border-radius: 0;
}
@media (max-width: 768px) {
.enquiry-content .enquiry-form .form-check .form-check-input {
width: 20px;
height: 20px;
}
}
.enquiry-content .enquiry-form .form-floating {
overflow: hidden;
}
.enquiry-content .enquiry-form .form-floating.required label::after {
content: "*";
color: #cc0000;
}
.media-page {
background: #fafafa;
padding: 80px 0;
}
@media (max-width: 992px) {
.media-page {
padding: 56px 0;
}
}
.media-page h2, .media-page .h2,
.media-page h4,
.media-page .h4 {
color: #9d7d4c;
}
.media-page h2, .media-page .h2 {
margin-bottom: 40px;
}
@media (max-width: 992px) {
.media-page h2, .media-page .h2 {
margin-bottom: 24px;
}
}
.media-page form {
max-width: 420px;
}
@media (max-width: 992px) {
.media-page form {
max-width: none;
}
}
.media-page form .input-group {
border-bottom: 1px solid #84888c;
}
.media-page form .input-group input {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
background: none;
padding-left: 0;
}
.media-page form .input-group input:focus {
-webkit-box-shadow: none;
box-shadow: none;
background: none;
}
.media-page form .input-group label {
padding-left: 0;
color: #84888c;
}
.media-page form .input-group button,
.media-page form .input-group a {
border: none;
color: #84888c;
padding-right: 5px;
}
.media-page form .input-group button:hover,
.media-page form .input-group a:hover {
background: none;
border: none;
color: #9d7d4c;
}
.media-page .form-select {
border: none;
border-bottom: 1px solid #84888c;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
color: #84888c;
border-radius: 0;
padding-left: 0;
padding-right: 0;
height: 100%;
background-position: right center;
}
.media-page__articles {
gap: 40px;
margin-top: 40px;
}
@media (max-width: 768px) {
.media-page__articles {
gap: 24px;
}
}
.media-page__articles__item {
width: calc((100% - 40px) / 2);
}
@media (max-width: 992px) {
.media-page__articles__item {
width: 100%;
}
}
@media (max-width: 768px) {
.media-page__articles__item {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 24px;
}
}
.media-page__articles__item:last-child {
border-bottom: none;
}
.media-page__articles__item__img {
max-width: 132px;
margin-right: 24px;
}
@media (max-width: 768px) {
.media-page__articles__item__img {
margin-right: 0;
margin-left: 24px;
max-width: 80px;
}
}
.media-page__articles__item__img img {
width: 100%;
}
.media-page__articles__item .cate {
font-size: 14px;
color: #84888c;
font-family: "gothammedium";
margin-bottom: 8px;
}
.media-page__articles__item h4, .media-page__articles__item .h4 {
margin-bottom: 12px;
}
@media (max-width: 768px) {
.media-page__articles__item h4, .media-page__articles__item .h4 {
margin-bottom: 8px;
}
}
@media (max-width: 768px) {
.media-page__articles__item p {
font-size: 14px;
}
}
.media-page__articles__pagination {
margin-top: 56px;
}
@media (max-width: 768px) {
.media-page__articles__pagination {
margin-top: 40px;
}
}
.date-read {
color: #84888c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
@media (max-width: 768px) {
.date-read {
font-size: 14px;
margin-bottom: 8px;
}
}
.date-read span:first-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
.date-read span:first-child::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #84888c;
display: inline-block;
}
.tags {
gap: 12px;
}
.tags .tag a {
border: 1px solid #9d7d4c;
color: #9d7d4c;
font-size: 14px;
padding: 4px 10px;
border-radius: 23px;
display: inline-block;
}
@media (max-width: 768px) {
.tags .tag a {
font-size: 12px;
}
}
.tags .tag a:hover {
background-color: #9d7d4c;
color: #fff;
}
.our-clients {
padding: 160px 0;
}
@media (max-width: 992px) {
.our-clients {
padding: 80px 0;
}
}
.our-clients .content-text {
max-width: 708px;
margin-bottom: 40px;
}
@media (max-width: 992px) {
.our-clients .content-text {
margin-bottom: 32px;
}
}
.our-clients__logos {
max-width: 836px;
gap: 40px;
}
@media (max-width: 992px) {
.our-clients__logos {
gap: 20px;
}
}
@media (max-width: 768px) {
.our-clients__logos {
gap: 10px;
}
}
.our-clients__logo {
width: calc((100% - 120px) / 4);
}
@media (max-width: 992px) {
.our-clients__logo {
width: calc((100% - 60px) / 4);
}
}
@media (max-width: 768px) {
.our-clients__logo {
width: calc((100% - 30px) / 4);
}
}
.our-awards {
padding: 120px 0;
background: #fafafa;
}
@media (max-width: 768px) {
.our-awards {
padding: 56px 0;
}
}
.our-awards .content-text {
max-width: 720px;
}
.our-awards .content-text h2, .our-awards .content-text .h2 {
margin-bottom: 16px;
}
.our-awards .content-text p.top-desc {
max-width: 520px;
margin: 0 auto 24px;
}
.our-awards .content-text p.last-desc {
margin: 0;
}
.our-awards .content-text .special {
margin-bottom: 24px;
}
.our-awards .content-text .special p {
margin-bottom: 0;
}
.our-awards .content-text .special p:first-child {
margin-bottom: 5px;
}
.our-awards .content-text .special p:last-child {
color: #9d7d4c;
font-family: "gothammedium";
font-size: 18px;
}
.our-awards .content-text .special strong {
font-size: 18px;
font-family: "gothammedium";
margin-bottom: 10px;
display: block;
margin-bottom: 12px;
}
.our-awards .content-text .special img {
margin-top: 12px;
}
@media (max-width: 767px) {
.our-awards .content-text .special img {
margin-top: 0;
}
}
@media (max-width: 767px) {
.our-awards .content-text .special .awards {
gap: 24px;
margin-top: 24px;
}
}
.contact-us-page .enquiry-content {
padding: 0;
}
.contact-us-page .find-us h2, .contact-us-page .find-us .h2 {
margin-bottom: 32px;
}
.contact-us-page .find-us__item {
margin-bottom: 32px;
}
.contact-us-page .find-us__item h3, .contact-us-page .find-us__item .h3 {
margin-bottom: 16px;
}
.contact-us-page .find-us__item p {
margin: 0;
}
.contact-us-page .find-us .where {
background: #0e1c42;
padding-top: 120px;
padding-bottom: 120px;
color: #fff;
}
@media (max-width: 1200px) {
.contact-us-page .find-us .where {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (max-width: 768px) {
.contact-us-page .find-us .where {
padding-top: 56px;
padding-bottom: 56px;
}
}
.contact-us-page .find-us iframe {
width: 100% !important;
height: 100% !important;
}
@media (max-width: 768px) {
.contact-us-page .find-us iframe {
height: 460px !important;
}
}
/* Add sliding animation for images */
@-webkit-keyframes slideImage {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideImage {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes fadeTextIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeTextIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeTextOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeTextOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Apply the sliding animation to images */
.cmp-carousel__item img {
-webkit-animation: slideImage 1s ease-in-out forwards;
animation: slideImage 1s ease-in-out forwards;
}
/* Apply fade-in and fade-out animations to the text */
.cmp-carousel__item .description {
-webkit-animation: fadeTextIn 1s ease-in-out forwards;
animation: fadeTextIn 1s ease-in-out forwards;
}
/* Adding a class for the text fade-out effect */
.cmp-carousel__item.fadeOut .description {
-webkit-animation: fadeTextOut 1s ease-in-out forwards;
animation: fadeTextOut 1s ease-in-out forwards;
}
.article-content {
padding: 80px 0;
}
@media (max-width: 768px) {
.article-content {
padding: 56px 0;
}
}
@media (max-width: 768px) {
.article-content .sidebar {
margin-top: 40px;
padding-top: 40px;
padding-bottom: 40px;
background-color: #fafafa;
}
}
.article-content .sidebar__item {
margin-bottom: 80px;
}
@media (max-width: 992px) {
.article-content .sidebar__item {
margin-bottom: 40px;
}
}
.article-content .sidebar__item:last-child {
margin-bottom: 0;
}
.article-content .sidebar__item h2, .article-content .sidebar__item .h2 {
color: #9d7d4c;
margin-bottom: 24px;
}
.article-content .sidebar__item .social ul {
gap: 32px;
}
.article-content .sidebar__item .social ul li a {
color: #333;
}
.article-content .sidebar__item .social ul li a:hover {
color: #9d7d4c;
}
.article-content .sidebar__item .related-articles__item {
border-bottom: 1px solid #e6e6e6;
padding-bottom: 20px;
margin-bottom: 20px;
}
.article-content .sidebar__item .related-articles__item:last-child {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
.article-content .sidebar__item .related-articles__item h4 a, .article-content .sidebar__item .related-articles__item .h4 a {
color: #333;
}
.article-content .sidebar__item .related-articles__item h4 a:hover, .article-content .sidebar__item .related-articles__item .h4 a:hover {
color: #9d7d4c;
}
.privacy-content__wrap {
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ensure any nested container utilities don't force full width */
.privacy-content__wrap > .cmp-container,
.cmp-container--body .privacy-content__wrap,
.privacy-content__wrap.cmp-container--body,
.privacy-content__wrap > .cmp-container--body {
width: auto !important;
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
Article Image Card
Matches the reference .article-slide / .article styling from sia2810 prototype.
Two layout variants controlled by Bootstrap flex utilities in the HTL:
IMAGE-LEFT → flex-column flex-lg-row
DOM order: image (--left) first, content (--right) second
Ref: home.html "Explore Our Learning Solutions"
IMAGE-RIGHT (default) → flex-column-reverse flex-lg-row
DOM order: content (--left) first, image (--right) second
Ref: learning-solution.html "Solutions Tailored for Your Business"
========================================================================== */
/* --------------------------------------------------------------------------
Outer wrapper (matches reference .article { padding: 80px 0 })
-------------------------------------------------------------------------- */
.article-image-card {
padding: 0 0;
overflow: visible;
/* Ensure .container allows bleed outside its bounds */
/* ------------------------------------------------------------------
Shared content block
Matches reference .article-slide__item__content
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
IMAGE-LEFT variant
Matches reference .article-slide__item__img (with --left)
and .article-slide__item__content (with --right)
------------------------------------------------------------------ */
/* Image with --left modifier: 65%/55% width, left bleed via JS */
/* Content with --right modifier: 45% width, padding-left for gap */
/* ------------------------------------------------------------------
IMAGE-RIGHT variant (default)
Matches reference .article-slide__item__content (with --left)
and .article-slide__item__img (with --right)
------------------------------------------------------------------ */
/* Content with --left modifier: 45% width, padding-right for gap */
/* Image with --right modifier: 65%/55% width, right bleed via JS */
/* ------------------------------------------------------------------
Legacy selectors (backward-compat for carousel-based instances)
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
Button styles
Matches reference .btn.btn-icon-right.btn-fwm
------------------------------------------------------------------ */
/* ---- Clickable image cursor ---- */
/* ---- Chevron icon inside button ---- */
/* ------------------------------------------------------------------
Style pass-throughs for existing style system classes
------------------------------------------------------------------ */
/* ---- Brown filled button variant ---- */
/* ---- Brown border button variant ---- */
/* ------------------------------------------------------------------
Mobile overrides (matches reference mobile resets)
------------------------------------------------------------------ */
}
@media (max-width: 991px) {
.article-image-card {
padding: 0 0 56px;
}
}
.article-image-card > .container {
overflow: visible;
}
@media (max-width: 991px) {
.article-image-card .article-image-card__item__content {
padding: 56px 6px 0;
}
}
.article-image-card .article-image-card__item__content h2, .article-image-card .article-image-card__item__content .h2 {
color: #9d7d4c;
margin-bottom: 16px;
}
.article-image-card .article-image-card__item__content h6, .article-image-card .article-image-card__item__content .h6 {
color: #9d7d4c;
font-weight: 600;
margin-bottom: 5px;
}
.article-image-card .article-image-card__item__content h6 p, .article-image-card .article-image-card__item__content .h6 p {
font-family: "proxima-nova-semibold";
margin-bottom: 0;
}
.article-image-card .article-image-card__item__content p {
margin-bottom: 32px;
}
.article-image-card .article-image-card__item__img--left {
width: 65%;
}
@media (max-width: 1600px) {
.article-image-card .article-image-card__item__img--left {
width: 55%;
}
}
@media (max-width: 991px) {
.article-image-card .article-image-card__item__img--left {
width: 100%;
}
}
.article-image-card .article-image-card__item__img--left img {
width: 100%;
height: auto;
display: block;
}
.article-image-card .article-image-card__item__content--right {
padding-right: 0;
padding-left: 56px;
width: 45%;
}
@media (max-width: 991px) {
.article-image-card .article-image-card__item__content--right {
width: 100%;
padding: 56px 0 0;
}
}
.article-image-card .article-image-card__item__content--left {
padding-left: 0;
padding-right: 0 !important;
width: 45%;
}
@media (max-width: 991px) {
.article-image-card .article-image-card__item__content--left {
width: 100%;
padding: 56px 0 0;
}
}
.article-image-card .article-image-card__item__img--right {
width: 65%;
}
@media (max-width: 1600px) {
.article-image-card .article-image-card__item__img--right {
width: 55%;
}
}
@media (max-width: 991px) {
.article-image-card .article-image-card__item__img--right {
width: 100%;
}
}
.article-image-card .article-image-card__item__img--right img {
width: 100%;
height: auto;
display: block;
}
.article-image-card .article-image-card__items {
width: 40%;
}
@media (max-width: 991px) {
.article-image-card .article-image-card__items {
width: 100%;
}
}
.article-image-card .article-image-card__imgs {
width: 70%;
}
@media (max-width: 1600px) {
.article-image-card .article-image-card__imgs {
width: 60%;
}
}
@media (max-width: 991px) {
.article-image-card .article-image-card__imgs {
margin-right: 0;
width: 100%;
}
}
.article-image-card .article-image-card__imgs img {
width: 100%;
height: auto;
display: block;
}
.article-image-card .article-image-card__item__content .btn {
font-size: 18px;
font-family: sigvar-medium;
font-weight: 400;
letter-spacing: 0px;
text-transform: capitalize;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 2px;
border: 1px solid #9d7d4c;
margin: 10px 0;
padding: 12px 20px;
width: 100%;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: fit-content;
line-height: 27px;
}
.article-image-card .article-image-card__item__content .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
.article-image-card .article-image-card__item__content .btn:hover {
background: rgba(157, 125, 76, 0.1);
text-decoration: none;
color: #9d7d4c;
}
@media (max-width: 991px) {
.article-image-card .article-image-card__item__content .btn {
width: 100%;
}
.article-image-card .article-image-card__item__content .btn::after {
display: none;
}
.article-image-card .article-image-card__item__content .btn:hover {
background: rgba(157, 125, 76, 0.1);
color: #9d7d4c;
border: 1px solid #9d7d4c;
}
}
.article-image-card .article-image-card__imgs img[data-card-id]:hover,
.article-image-card .article-image-card__item__img--left img[data-card-id]:hover,
.article-image-card .article-image-card__item__img--right img[data-card-id]:hover {
cursor: pointer;
}
.article-image-card .ico-point-r.arrow:before {
font-size: 8px;
margin-right: 4px;
}
.article-image-card .ico-point-r.text {
font-family: "proxima-nova-regular";
font-size: 10px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
margin-right: 5px;
}
.article-image-card.transparent .article-image-card__wrap {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.article-image-card.blue-heading .article-image-card__item__content h6, .article-image-card.blue-heading .article-image-card__item__content .h6 {
color: #9d7d4c;
}
.article-image-card.blue-description .article-image-card__item__content p {
color: #9d7d4c;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
text-decoration: none;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn {
font-size: 18px;
font-family: sigvar-medium;
font-weight: 400;
letter-spacing: 0px;
text-transform: capitalize;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 2px;
border: 1px solid #9d7d4c;
margin: 10px 0;
padding: 12px 20px;
width: 100%;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn:hover {
background: rgba(157, 125, 76, 0.1);
text-decoration: none;
color: #9d7d4c;
}
@media only screen and (max-width: 991px) {
.article-image-card .article-image-card__imgs {
width: 100% !important;
margin-right: 0;
margin-left: 0;
}
.article-image-card .article-image-card__imgs img {
width: 100% !important;
height: auto;
display: block;
}
.article-image-card .article-image-card__item__img--left,
.article-image-card .article-image-card__item__img--right {
width: 100% !important;
margin-left: 0;
margin-right: 0;
}
.article-image-card .article-image-card__item__img--left img,
.article-image-card .article-image-card__item__img--right img {
width: 100% !important;
height: auto;
display: block;
}
.article-image-card .article-image-card__items {
width: 100% !important;
}
.article-image-card .article-image-card__item__content {
padding: 56px 6px 0 !important;
}
.article-image-card .article-image-card__item__content--right,
.article-image-card .article-image-card__item__content--left {
padding: 56px 0 0;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: 100%;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn::after {
display: none;
}
.article-image-card.article-image-brown-button .article-image-card__item__content .btn:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn {
font-size: 18px;
font-family: sigvar-medium;
font-weight: 400;
letter-spacing: 0px;
text-transform: capitalize;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 2px;
border: 1px solid #9d7d4c;
margin: 10px 0;
padding: 12px 20px;
width: 100%;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: 100%;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn::after {
display: none;
}
.article-image-card.article-image-button-border .article-image-card__item__content .btn:hover {
background: rgba(157, 125, 76, 0.1);
color: #9d7d4c;
border: 1px solid #9d7d4c;
}
}
@media (min-width: 992px) {
.article-image-card .article-image-card__item__content--right {
padding-left: 0 !important;
}
}
.article-tagline {
background-color: #e5e9f0 !important;
font-family: "proxima-nova-regular";
font-weight: 600;
margin-left: 10px;
padding: 5px;
color: #00266b;
}
.primary-button, .primary-button-transparent {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 768px) {
.primary-button, .primary-button-transparent {
width: 100%;
}
}
.primary-button a, .primary-button-transparent a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.primary-button a::after, .primary-button-transparent a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.primary-button a::after, .primary-button-transparent a::after {
display: none;
}
}
.primary-button:hover, .primary-button-transparent:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
}
.primary-button-large {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
}
.primary-button-large a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
padding: 15px 30px;
}
.primary-button-with-border {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
background-color: #fff;
border: 1px solid #9d7d4c;
/* Ensure arrow icon is hidden on small screens for accessibility/space */
}
@media (max-width: 768px) {
.primary-button-with-border {
width: 100%;
}
}
.primary-button-with-border a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
color: #9d7d4c;
}
.primary-button-with-border a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.primary-button-with-border a::after {
display: none !important;
content: none !important;
}
}
.primary-button-with-border:hover {
background: rgba(157, 125, 76, 0.1);
color: #9d7d4c;
border: 1px solid #9d7d4c;
}
.primary-button-without-border {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
background-color: #fff;
border: none;
padding-right: 0;
}
@media (max-width: 768px) {
.primary-button-without-border {
width: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.primary-button-without-border a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
color: #9d7d4c;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-right: 0;
}
.primary-button-without-border a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.primary-button-without-border a::after {
display: none;
}
}
.primary-button-without-border:hover {
text-decoration: underline;
color: #9d7d4c;
}
.seemore-button {
border-radius: 2px;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
text-align: center;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 0px;
margin-top: 20px;
}
.seemore-button a {
font-size: 18px;
font-weight: 400;
line-height: 19px;
color: #fff;
font-family: "sigvar-medium";
text-transform: capitalize;
padding: 12px 20px;
display: inline-block;
text-align: center;
padding: 0;
}
.seemore-button:hover {
background-color: #003494;
}
@media (min-width: 769px) {
.align-bottom .primary-button-without-border, .align-bottom .primary-button-with-border,
.align-bottom .primary-button,
.align-bottom .primary-button-transparent {
position: absolute;
bottom: 20px;
}
}
.primary-button-transparent {
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
.primary-button-transparent:hover {
background: rgba(0, 0, 0, 0.04) !important;
background-color: rgba(0, 0, 0, 0.04) !important;
}
.primary-button-transparent .primary-button-with-border {
background: transparent !important;
background-color: transparent !important;
border: 1px solid #9d7d4c !important;
}
.primary-button-transparent .primary-button-with-border:hover {
background: rgba(0, 0, 0, 0.04) !important;
background-color: rgba(0, 0, 0, 0.04) !important;
}
.primary-button-transparent .primary-button-with-border a {
color: #9d7d4c !important;
}
.primary-button-transparent .primary-button-with-border a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg") !important;
}
.primary-button-transparent > a {
color: #9d7d4c !important;
}
.primary-button-transparent > a::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg") !important;
}
.primary-button-transparent.align-center {
margin-left: auto !important;
margin-right: auto !important;
letter-spacing: -0.011em !important;
line-height: 27px !important;
}
.primary-button-transparent.align-center a {
line-height: 27px !important;
}
.primary-button-transparent.align-center .primary-button-with-border a {
line-height: 27px !important;
}
.primary-button-transparent.align-center .primary-button-without-border a {
line-height: 27px !important;
}
.primary-button-transparent.align-center > a {
line-height: 27px !important;
}
/* Carousel Container */
.cmp-carousel {
position: relative;
width: 100%;
height: auto; /* Adjust height as needed */
max-height: 600px;
overflow: hidden;
background-color: transparent; /* Inherit parent container color */
}
/* Position context for indicators on smaller screens - article carousels only */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__container {
position: relative;
}
}
/* Allow overflow for article carousels to preserve negative margins */
.cmp-carousel.article-with-carousel {
overflow: visible;
max-height: none; /* Remove height restriction for article cards */
background-color: transparent; /* Remove background for article cards */
/* Fix: Contain overflow on smaller screens to prevent slides from being "all over" */
}
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel {
/* Allow overflow (do not force hide) so controls/indicators can display correctly */
position: relative;
/* CRITICAL: Add extra bottom margin on mobile to create space for pinned controls */
/* This prevents the pinned controls from overlapping the next component */
margin-bottom: 68px !important;
}
}
.cmp-carousel.article-with-carousel .card-content {
margin-bottom: 90px;
}
/* Article carousel container should allow overflow */
.cmp-carousel.article-with-carousel .carousel-article-container {
overflow: visible;
/* ensure bottom-positioning on controls is relative to this container */
position: relative;
/* Match .article-container width constraints across all screen sizes */
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
/* CRITICAL: Ensure container has defined height on mobile for absolute positioning */
/* Bootstrap 5 responsive max-widths (same as .article-container) */
}
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .carousel-article-container {
position: relative;
min-height: 100%; /* Ensure container encompasses all content */
}
}
@media (min-width: 576px) {
.cmp-carousel.article-with-carousel .carousel-article-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.cmp-carousel.article-with-carousel .carousel-article-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.cmp-carousel.article-with-carousel .carousel-article-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.cmp-carousel.article-with-carousel .carousel-article-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.cmp-carousel.article-with-carousel .carousel-article-container {
max-width: 1320px;
}
}
/* Article carousel content should allow overflow */
.cmp-carousel.article-with-carousel .cmp-carousel__content {
overflow: visible;
/* Fix: Properly contain content on smaller screens */
}
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__content {
overflow: hidden !important;
position: relative;
width: 100%;
}
}
/* Controls for carousels with ONLY Hero Image */
.cmp-carousel.hero-only-carousel .cmp-carousel__top-controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
left: 49.5%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 135px;
width: 630px;
z-index: 1;
-webkit-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
}
@media (max-width: 768px) {
.cmp-carousel.hero-only-carousel .cmp-carousel__top-controls {
left: 53%;
width: 100%;
}
}
/* Controls for carousels with Article Image Cards */
.cmp-carousel.article-with-carousel .cmp-carousel__top-controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
/* align to the left edge of the carousel-article-container */
left: 0 !important;
/* apply a left offset to visually align controls with article content */
margin-left: -7px !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
bottom: 25px;
width: 450px;
z-index: 1;
/* remove centering transform so it aligns with container */
-webkit-transform: none !important;
transform: none !important;
right: auto !important;
}
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__top-controls {
/* CRITICAL: When JS moves controls to bottom, use relative positioning */
/* This allows natural bottom placement after content */
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
-webkit-transform: none !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 56px 0 56px 0 !important; /* Top and bottom margin of 56px */
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 12px; /* Match height of indicators */
z-index: 100 !important; /* Ensure controls stay above next component */
}
}
/* Stronger override for cases where panelcontainer or other rules center controls */
.panelcontainer.carousel-primary-indicator .cmp-carousel.article-with-carousel .cmp-carousel__top-controls,
.cmp-carousel.article-with-carousel.panelcontainer.carousel-primary-indicator .cmp-carousel__top-controls {
left: 0 !important;
margin-left: -7px !important;
-webkit-transform: none !important;
transform: none !important;
right: auto !important;
}
/* Variant: about-us-carousel - position controls 32px from bottom */
.cmp-carousel.article-with-carousel.about-us-carousel .cmp-carousel__top-controls {
bottom: 32px !important;
}
/* Variant override for about-us-carousel inside panelcontainer */
.panelcontainer.carousel-primary-indicator .cmp-carousel.article-with-carousel.about-us-carousel .cmp-carousel__top-controls {
bottom: 32px !important;
}
/* Variant: about-us article cards - position controls right below card-content on mobile */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel.about-us-variant .cmp-carousel__top-controls {
/* CRITICAL: When positioned below card-content, use 0 margins */
margin: 0 !important;
padding: 0;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
-webkit-transform: none !important;
transform: none !important;
width: 100% !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 12px; /* Match height of indicators */
z-index: 100 !important; /* Ensure controls stay above next component */
}
}
/* Variant override for about-us-variant inside panelcontainer */
@media (max-width: 991px) {
.panelcontainer.carousel-primary-indicator .cmp-carousel.article-with-carousel.about-us-variant .cmp-carousel__top-controls {
margin: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 100 !important; /* Ensure controls stay above next component */
}
}
/* Variant: when about-us article cards are used in carousel - increase bottom spacing */
@media (min-width: 992px) {
.cmp-carousel.article-with-carousel:has(.article-image-card.about-us) .cmp-carousel__top-controls {
bottom: 50px !important;
}
}
/* Variant: about-us article cards in panelcontainer on mobile - set bottom position */
@media (max-width: 991px) {
.panelcontainer.carousel-primary-indicator .cmp-carousel.article-with-carousel:has(.article-image-card.about-us) .cmp-carousel__top-controls {
bottom: 50px !important;
}
}
/* Indicators (Dots) */
.cmp-carousel__indicators {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px; /* Space between dots */
list-style: none;
}
/* Individual Indicator (Dot) */
.cmp-carousel__indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5019607843); /* Inactive dot color */
cursor: pointer;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
/* Hide text content visually while keeping it for accessibility */
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
overflow: hidden;
text-indent: -9999px;
}
/* CRITICAL FIX: Ensure indicators are clickable on mobile for article carousels */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__indicator {
pointer-events: auto !important;
cursor: pointer !important;
z-index: 10 !important;
position: relative !important;
}
}
/* Position indicators at bottom of container for article carousels on smaller screens */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__indicators {
/* When controls are moved to bottom by JS, use relative positioning */
position: relative;
left: auto;
-webkit-transform: none;
transform: none;
z-index: 10;
width: auto !important; /* Natural content width to match spacing */
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; /* Center within parent flex container */
}
}
/* Active Indicator (Dot) */
.cmp-carousel__indicator--active {
background-color: #fff; /* Active dot color */
}
.panelcontainer.carousel-primary-indicator {
/* Override for article carousels with panelcontainer on mobile */
}
@media (max-width: 768px) {
.panelcontainer.carousel-primary-indicator .cmp-carousel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__top-controls {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
left: 23%;
}
@media (max-width: 768px) {
.panelcontainer.carousel-primary-indicator .cmp-carousel__top-controls {
/* Only apply to non-article carousels (hero-only) */
/* Article carousels are handled by .article-with-carousel rules */
left: auto;
top: 380px;
width: auto;
}
}
@media (max-width: 991px) {
.panelcontainer.carousel-primary-indicator .cmp-carousel.article-with-carousel .cmp-carousel__top-controls {
/* Use relative positioning when moved to bottom by JS */
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
margin: 56px 0 56px 0 !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 100 !important; /* Ensure controls stay above next component */
}
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__indicators {
margin-bottom: 56px;
margin-top: 56px;
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__indicator {
background-color: #cdbda4;
/* Default color for primary indicators */
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__indicator.cmp-carousel__indicator--active {
background-color: #9d7d4c;
/* Active state color */
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__item {
-webkit-animation-name: none !important;
animation-name: none !important;
opacity: 1 !important;
visibility: visible !important;
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__item--active {
visibility: visible; /* Show active item */
opacity: 1; /* Make sure it's visible */
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__action {
height: 40px;
width: 40px;
cursor: pointer;
z-index: 1;
background: none;
border: 1px solid #9d7d4c;
outline: none;
display: block;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__arrow path {
fill: #9d7d4c;
}
.panelcontainer.carousel-primary-indicator .cmp-carousel__actions {
gap: 15px;
}
/* Carousel Actions (Arrows) */
.cmp-carousel__actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* Ensures horizontal alignment */
gap: 35px; /* Adjust this value for a larger gap */
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /* Centers buttons */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 991px) {
.cmp-carousel__actions {
display: none !important;
}
}
/* Arrow Buttons */
.cmp-carousel__action {
background: none; /* Removes background */
border: none; /* Removes any border */
padding: 0; /* Removes extra spacing */
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* Ensures proper alignment */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Arrow Button Colour */
.cmp-carousel__arrow path {
fill: white;
}
/* Individual Slide - Ensures Full Width */
.cmp-carousel__item {
opacity: 1 !important;
visibility: visible !important;
-webkit-animation-name: none !important;
animation-name: none !important;
-webkit-animation: fadeInLight 1s ease;
animation: fadeInLight 1s ease;
}
/* Fix: Ensure article carousel slides are properly positioned on smaller screens */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__item {
position: relative !important;
width: 100% !important;
display: block !important;
}
}
/* CRITICAL FIX: Hide inactive slides on mobile for article carousels */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__item:not(.cmp-carousel__item--active) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
}
/* CRITICAL FIX: Show ONLY the active slide on mobile for article carousels */
@media (max-width: 991px) {
.cmp-carousel.article-with-carousel .cmp-carousel__item--active {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
width: 100% !important;
pointer-events: auto !important;
}
}
.cmp-carousel__item--active {
visibility: visible; /* Show active item */
opacity: 1; /* Make sure it's visible */
}
/* Draggable cursor for hero images and article images */
.cmp-carousel .heroimage,
.cmp-carousel .article-image-card img {
cursor: default; /* Keep normal cursor when interacting/dragging */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; /* Prevent text selection during drag */
}
.cmp-carousel .heroimage:active,
.cmp-carousel .article-image-card img:active {
cursor: default;
}
/* Keep normal cursor for all content inside hero */
.cmp-carousel .heroimage .content,
.cmp-carousel .heroimage .content *,
.cmp-carousel .heroimage a,
.cmp-carousel .heroimage button {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* But allow pointer cursor on actual interactive elements */
.cmp-carousel .heroimage a,
.cmp-carousel .heroimage button,
.cmp-carousel .heroimage input {
cursor: pointer;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.cmp-container--body {
width: auto !important;
float: none !important;
clear: both !important;
position: relative;
width: 100% !important;
padding-right: 12px !important;
padding-left: 12px !important;
margin-right: auto !important;
margin-left: auto !important;
}
@media (min-width: 576px) {
.cmp-container--body {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.cmp-container--body {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.cmp-container--body {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.cmp-container--body {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.cmp-container--body {
max-width: 1320px !important;
}
}
/*Margins and Padding*/
.cmp-container--margin-top-xs {
margin-top: 10px;
}
.cmp-container--margin-top-sm {
margin-top: 20px;
}
.cmp-container--margin-top-med {
margin-top: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-top-med {
margin-top: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-top-med {
margin-top: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-top-med {
margin-top: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-top-med {
margin-top: 30px;
}
}
.cmp-container--margin-top-lg {
margin-top: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-top-lg {
margin-top: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-top-lg {
margin-top: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-top-lg {
margin-top: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-top-lg {
margin-top: 40px;
}
}
.cmp-container--margin-top-xl {
margin-top: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-top-xl {
margin-top: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-top-xl {
margin-top: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-top-xl {
margin-top: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-top-xl {
margin-top: 60px;
}
}
.cmp-container--margin-bottom-xs {
margin-bottom: 10px;
}
.cmp-container--margin-bottom-sm {
margin-bottom: 20px;
}
.cmp-container--margin-bottom-med {
margin-bottom: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-bottom-med {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-bottom-med {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-bottom-med {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-bottom-med {
margin-bottom: 30px;
}
}
.cmp-container--margin-bottom-lg {
margin-bottom: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-bottom-lg {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-bottom-lg {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-bottom-lg {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-bottom-lg {
margin-bottom: 40px;
}
}
.cmp-container--margin-bottom-xl {
margin-bottom: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-bottom-xl {
margin-bottom: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-bottom-xl {
margin-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-bottom-xl {
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-bottom-xl {
margin-bottom: 0px;
}
}
.cmp-container--margin-left-xs {
margin-left: 10px;
}
.cmp-container--margin-left-sm {
margin-left: 20px;
}
.cmp-container--margin-left-med {
margin-left: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-left-med {
margin-left: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-left-med {
margin-left: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-left-med {
margin-left: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-left-med {
margin-left: 30px;
}
}
.cmp-container--margin-left-lg {
margin-left: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-left-lg {
margin-left: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-left-lg {
margin-left: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-left-lg {
margin-left: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-left-lg {
margin-left: 40px;
}
}
.cmp-container--margin-left-xl {
margin-left: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-left-xl {
margin-left: 30px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-left-xl {
margin-left: 30px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-left-xl {
margin-left: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-left-xl {
margin-left: 60px;
}
}
.cmp-container--margin-right-xs {
margin-right: 10px;
}
.cmp-container--margin-right-sm {
margin-right: 20px;
}
.cmp-container--margin-right-med {
margin-right: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-right-med {
margin-right: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-right-med {
margin-right: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-right-med {
margin-right: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-right-med {
margin-right: 30px;
}
}
.cmp-container--margin-right-lg {
margin-right: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-right-lg {
margin-right: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-right-lg {
margin-right: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-right-lg {
margin-right: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-right-lg {
margin-right: 40px;
}
}
.cmp-container--margin-right-xl {
margin-right: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--margin-right-xl {
margin-right: 30px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--margin-right-xl {
margin-right: 30px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--margin-right-xl {
margin-right: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--margin-right-xl {
margin-right: 60px;
}
}
.cmp-container--padding-top-xs > .cmp-container {
padding-top: 12px;
}
.cmp-container--padding-top-8 > .cmp-container {
padding-top: 8px;
}
.cmp-container--padding-top-sm > .cmp-container {
padding-top: 20px;
}
.cmp-container--padding-top-med > .cmp-container {
padding-top: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-med > .cmp-container {
padding-top: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-med > .cmp-container {
padding-top: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-med > .cmp-container {
padding-top: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-med > .cmp-container {
padding-top: 30px;
}
}
.cmp-container--padding-top-32 > .cmp-container {
padding-top: 32px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-32 > .cmp-container {
padding-top: 32px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-32 > .cmp-container {
padding-top: 32px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-32 > .cmp-container {
padding-top: 32px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-32 > .cmp-container {
padding-top: 32px;
}
}
/* Explicit 24px top padding utility (non-responsive - same across all breakpoints) */
.cmp-container--padding-top-24 > .cmp-container {
padding-top: 24px;
}
.cmp-container--padding-top-lg > .cmp-container {
padding-top: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-lg > .cmp-container {
padding-top: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-lg > .cmp-container {
padding-top: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-lg > .cmp-container {
padding-top: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-lg > .cmp-container {
padding-top: 40px;
}
}
.cmp-container--padding-top-xl > .cmp-container {
padding-top: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-xl > .cmp-container {
padding-top: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-xl > .cmp-container {
padding-top: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-xl > .cmp-container {
padding-top: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-xl > .cmp-container {
padding-top: 60px;
}
}
/* New utility: same as xl but mobile/sm-tablet use 56px padding-top */
.cmp-container--padding-top-xl56s > .cmp-container {
padding-top: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-xl56s > .cmp-container {
padding-top: 56px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-xl56s > .cmp-container {
padding-top: 56px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-xl56s > .cmp-container {
padding-top: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-xl56s > .cmp-container {
padding-top: 60px;
}
}
.cmp-container--padding-top-48 > .cmp-container {
padding-top: 48px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-48 > .cmp-container {
padding-top: 32px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-48 > .cmp-container {
padding-top: 32px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-48 > .cmp-container {
padding-top: 48px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-48 > .cmp-container {
padding-top: 48px;
}
}
.cmp-container--padding-top-2xl > .cmp-container {
padding-top: 80px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-2xl > .cmp-container {
padding-top: 56px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-2xl > .cmp-container {
padding-top: 56px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-2xl > .cmp-container {
padding-top: 80px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-2xl > .cmp-container {
padding-top: 80px;
}
}
/* New utility: same as 2xl but removes mobile/tablet padding (keeps desktop 80px) */
.cmp-container--padding-top-2xl-no-mobile > .cmp-container {
padding-top: 80px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-2xl-no-mobile > .cmp-container {
padding-top: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-2xl-no-mobile > .cmp-container {
padding-top: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-2xl-no-mobile > .cmp-container {
padding-top: 0px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-2xl-no-mobile > .cmp-container {
padding-top: 80px;
}
}
.cmp-container--padding-top-3xl > .cmp-container {
padding-top: 120px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-top-3xl > .cmp-container {
padding-top: 56px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-top-3xl > .cmp-container {
padding-top: 56px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-top-3xl > .cmp-container {
padding-top: 120px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-top-3xl > .cmp-container {
padding-top: 120px;
}
}
.cmp-container--padding-bottom-xs > .cmp-container {
padding-bottom: 12px;
}
.cmp-container--padding-bottom-sm > .cmp-container {
padding-bottom: 20px;
}
/* Explicit 20px bottom padding utility (non-responsive - same across all breakpoints) */
.cmp-container--padding-bottom-20 > .cmp-container {
padding-bottom: 20px;
}
/* Constrain child .cmp-container to 640px and center it */
.cmp-container--constrain-640 > .cmp-container {
max-width: 640px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.cmp-container--padding-bottom-24 > .cmp-container {
padding-bottom: 24px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-24 > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-24 > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-24 > .cmp-container {
padding-bottom: 24px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-24 > .cmp-container {
padding-bottom: 24px;
}
}
.cmp-container--padding-bottom-med > .cmp-container {
padding-bottom: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-med > .cmp-container {
padding-bottom: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-med > .cmp-container {
padding-bottom: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-med > .cmp-container {
padding-bottom: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-med > .cmp-container {
padding-bottom: 30px;
}
}
.cmp-container--padding-bottom-lg > .cmp-container {
padding-bottom: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-lg > .cmp-container {
padding-bottom: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-lg > .cmp-container {
padding-bottom: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-lg > .cmp-container {
padding-bottom: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-lg > .cmp-container {
padding-bottom: 40px;
}
}
.cmp-container--padding-bottom-48 > .cmp-container {
padding-bottom: 48px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-48 > .cmp-container {
padding-bottom: 32px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-48 > .cmp-container {
padding-bottom: 32px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-48 > .cmp-container {
padding-bottom: 48px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-48 > .cmp-container {
padding-bottom: 48px;
}
}
.cmp-container--padding-bottom-xl > .cmp-container {
padding-bottom: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-xl > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-xl > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-xl > .cmp-container {
padding-bottom: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-xl > .cmp-container {
padding-bottom: 60px;
}
}
.cmp-container--padding-bottom-2xl > .cmp-container {
padding-bottom: 80px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-2xl > .cmp-container {
padding-bottom: 56px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-2xl > .cmp-container {
padding-bottom: 56px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-2xl > .cmp-container {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-2xl > .cmp-container {
padding-bottom: 80px;
}
}
/* New utility: same as 2xl but removes mobile/tablet/tablet padding (keeps desktop 80px) */
.cmp-container--padding-bottom-2xl-no-mobile > .cmp-container {
padding-bottom: 80px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-2xl-no-mobile > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-2xl-no-mobile > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-2xl-no-mobile > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-2xl-no-mobile > .cmp-container {
padding-bottom: 80px;
}
}
.cmp-container--padding-bottom-3xl > .cmp-container {
padding-bottom: 120px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-bottom-3xl > .cmp-container {
padding-bottom: 56px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-bottom-3xl > .cmp-container {
padding-bottom: 56px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-bottom-3xl > .cmp-container {
padding-bottom: 120px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-bottom-3xl > .cmp-container {
padding-bottom: 120px;
}
}
.cmp-container--padding-left-xs > .cmp-container {
padding-left: 12px;
}
.cmp-container--padding-left-sm > .cmp-container {
padding-left: 20px;
}
.cmp-container--padding-left-24 > .cmp-container {
padding-left: 24px;
}
.cmp-container--padding-left-med > .cmp-container {
padding-left: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-left-med > .cmp-container {
padding-left: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-left-med > .cmp-container {
padding-left: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-left-med > .cmp-container {
padding-left: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-left-med > .cmp-container {
padding-left: 30px;
}
}
.cmp-container--padding-left-lg > .cmp-container {
padding-left: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-left-lg > .cmp-container {
padding-left: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-left-lg > .cmp-container {
padding-left: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-left-lg > .cmp-container {
padding-left: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-left-lg > .cmp-container {
padding-left: 40px;
}
}
.cmp-container--padding-left-xl > .cmp-container {
padding-left: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-left-xl > .cmp-container {
padding-left: 24px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-left-xl > .cmp-container {
padding-left: 24px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-left-xl > .cmp-container {
padding-left: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-left-xl > .cmp-container {
padding-left: 60px;
}
}
.cmp-container--padding-left-78 > .cmp-container {
padding-left: 78px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-left-78 > .cmp-container {
padding-left: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-left-78 > .cmp-container {
padding-left: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-left-78 > .cmp-container {
padding-left: 78px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-left-78 > .cmp-container {
padding-left: 78px;
}
}
.cmp-container--padding-left-5xl > .cmp-container {
padding-left: 238px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-left-5xl > .cmp-container {
padding-left: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-left-5xl > .cmp-container {
padding-left: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-left-5xl > .cmp-container {
padding-left: 0px;
}
}
.cmp-container--padding-right-xs > .cmp-container {
padding-right: 12px;
}
.cmp-container--padding-right-sm > .cmp-container {
padding-right: 20px;
}
.cmp-container--padding-right-24 > .cmp-container {
padding-right: 24px;
}
.cmp-container--padding-right-med > .cmp-container {
padding-right: 30px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-right-med > .cmp-container {
padding-right: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-right-med > .cmp-container {
padding-right: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-right-med > .cmp-container {
padding-right: 30px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-right-med > .cmp-container {
padding-right: 30px;
}
}
.cmp-container--padding-right-lg > .cmp-container {
padding-right: 40px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-right-lg > .cmp-container {
padding-right: 20px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-right-lg > .cmp-container {
padding-right: 20px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-right-lg > .cmp-container {
padding-right: 40px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-right-lg > .cmp-container {
padding-right: 40px;
}
}
.cmp-container--padding-right-xl > .cmp-container {
padding-right: 60px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-right-xl > .cmp-container {
padding-right: 24px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-right-xl > .cmp-container {
padding-right: 24px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-right-xl > .cmp-container {
padding-right: 60px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-right-xl > .cmp-container {
padding-right: 60px;
}
}
.cmp-container--padding-right-78 > .cmp-container {
padding-right: 78px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-right-78 > .cmp-container {
padding-right: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-right-78 > .cmp-container {
padding-right: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-right-78 > .cmp-container {
padding-right: 78px;
}
}
@media only screen and (min-width: 1200px) {
.cmp-container--padding-right-78 > .cmp-container {
padding-right: 78px;
}
}
.cmp-container--padding-right-5xl > .cmp-container {
padding-right: 238px;
}
@media only screen and (max-width: 480px) {
.cmp-container--padding-right-5xl > .cmp-container {
padding-right: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.cmp-container--padding-right-5xl > .cmp-container {
padding-right: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.cmp-container--padding-right-5xl > .cmp-container {
padding-right: 0px;
}
}
/* New responsive utilities: apply 12px left/right padding only on viewports < 768px */
@media only screen and (max-width: 767.98px) {
.cmp-container--padding-left-12-mobile > .cmp-container {
padding-left: 12px;
}
.cmp-container--padding-right-12-mobile > .cmp-container {
padding-right: 12px;
}
}
.cmp-container--bg-white {
position: relative;
}
.cmp-container--bg-white:before {
background-color: #ffffff;
content: "";
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 100%;
width: calc(100vw - var(--scrollbar-width));
z-index: -1;
}
.cmp-container--bg-grey {
position: relative;
}
.cmp-container--bg-grey:before {
background-color: #fafafa;
content: "";
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 100%;
width: calc(100vw - var(--scrollbar-width));
z-index: -1;
}
.cmp-container-only-bg-white {
background-color: #ffffff;
}
.cmp-container-only-bg-gray {
background-color: #fafafa;
}
.cmp-container-shadow {
-webkit-filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.0509803922));
filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.0509803922));
}
@media only screen and (max-width: 767px) {
.cmp-container--bg-white:before {
width: 100vw;
}
}
.rte.text a:hover {
text-decoration: underline;
}
.rte.text p {
overflow-wrap: break-word;
word-wrap: break-word;
}
.rte.text li {
overflow-wrap: break-word;
word-wrap: break-word;
}
.remove-20 {
display: block;
margin-bottom: -20px;
}
.card-popup .cmp-image {
font-size: 0;
}
.card-text-bottom-padding > .cmp-container {
padding-bottom: 48px;
}
@media only screen and (max-width: 480px) {
.card-text-bottom-padding > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.card-text-bottom-padding > .cmp-container {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.card-text-bottom-padding > .cmp-container {
padding-bottom: 48px;
}
}
@media only screen and (min-width: 1200px) {
.card-text-bottom-padding > .cmp-container {
padding-bottom: 48px;
}
}
.cmp-container--padding-top-48card > .cmp-container {
padding-top: 48px;
}
.cmp-container--padding-bottom-36card > .cmp-container {
padding-bottom: 36px;
}
.cmp-container--padding-left-48card > .cmp-container {
padding-left: 48px;
}
.cmp-container--padding-right-48card > .cmp-container {
padding-right: 48px;
}
@media only screen and (max-width: 575.98px) {
.cmp-image--full-bleed-mobile {
position: relative;
left: 50%;
margin-left: -50vw;
width: 100vw;
}
.cmp-image--full-bleed-mobile img {
width: 100%;
display: block;
}
}
.footer {
padding: 100px 0;
background: #fff var(--footer-bg) no-repeat bottom left;
}
@media (max-width: 768px) {
.footer {
padding: 48px 12px 48px 12px;
background-size: 350px auto;
}
}
@media (width >= 576px) {
.footer {
margin: 0 auto;
}
}
.footer__wrap {
max-width: 816px;
}
@media (width >= 576px) {
.footer__wrap {
max-width: 540px;
margin: 0 auto;
}
}
.footer__nav ul {
margin: 48px 0 32px;
gap: 24px;
}
.footer__nav ul li a {
color: #333333;
line-height: 19px;
}
.footer__nav ul li a:hover {
color: #9d7d4c;
}
.footer__nav ul li a:hover::after {
border-color: #9d7d4c;
}
.footer__nav ul li a.active {
color: #9d7d4c;
}
@media (max-width: 768px) {
.footer__nav ul li a {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer__nav ul li a::after {
content: "" !important;
display: inline-block !important;
border: solid #1a1a1a;
border-width: 0 2px 2px 0;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.footer__nav ul li::after {
content: "|";
color: #e6e6e6;
font-size: 14px;
display: inline-block;
margin-left: 24px;
}
@media (max-width: 768px) {
.footer__nav ul li::after {
content: none;
}
}
.footer__nav ul li:last-child {
border-bottom: none !important;
}
.footer__nav ul li:last-child::after {
content: none;
}
@media (max-width: 768px) {
.footer__nav ul li {
width: 100%;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 24px;
}
}
.footer .desc {
font-size: 14px;
line-height: 20px;
margin-bottom: 48px;
color: #666666;
}
.footer .social ul {
gap: 32px;
margin-bottom: 48px;
}
.footer .social ul li a {
color: #4d4d4d;
}
.footer .social ul li a:hover em:before {
color: #9d7d4c;
}
.footer .airline ul {
gap: 20px 32px;
margin-bottom: 48px;
}
.footer .copyright {
font-size: 16px;
line-height: 19px;
letter-spacing: -0.011em;
font-family: "gothambook";
font-weight: 400;
}
.header {
z-index: 2;
margin-bottom: -104px;
-webkit-animation: fadeInDown 2s ease;
animation: fadeInDown 2s ease;
/* Ensure container widths match Bootstrap's small container breakpoint when >=576px */
/* Strong override to ensure mobile offcanvas nav list items use sigvar-light
even when other styles (bootstrap utilities or component rules) try to
override them. This mirrors the h4 pattern: increased specificity + !important. */
}
@media (max-width: 992px) {
.header {
margin-bottom: -91px;
}
}
.header#sticky-header:not(.sticky) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(32.29%, rgba(0, 0, 0, 0.18)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 32.29%, rgba(0, 0, 0, 0) 100%);
}
.header.sticky {
position: fixed !important;
top: 0;
width: 100%;
z-index: 100;
}
.header.sticky, .header.has-dropdown {
background: #fff !important;
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.header.sticky img, .header.has-dropdown img {
display: none;
}
.header.sticky img.logo-sticky, .header.has-dropdown img.logo-sticky {
display: block;
}
.header.sticky .header__content, .header.has-dropdown .header__content {
height: auto;
padding: 24px 0;
/* Remove left/right padding on mobile for sticky state */
}
@media (max-width: 992px) {
.header.sticky .header__content, .header.has-dropdown .header__content {
padding: 24px 0;
}
}
.header.sticky .header__content .navbar .nav-link, .header.has-dropdown .header__content .navbar .nav-link {
color: #333;
}
.header.sticky .header__content .navbar .nav-link:hover, .header.sticky .header__content .navbar .nav-link.active, .header.has-dropdown .header__content .navbar .nav-link:hover, .header.has-dropdown .header__content .navbar .nav-link.active {
color: #9d7d4c;
}
.header.sticky .navbar .nav-item.dropdown .btn.dropdown-toggle::after, .header.has-dropdown .navbar .nav-item.dropdown .btn.dropdown-toggle::after {
border-color: #333;
}
.header.sticky .navbar .nav-item.dropdown .btn.dropdown-toggle:hover::after, .header.has-dropdown .navbar .nav-item.dropdown .btn.dropdown-toggle:hover::after {
border-color: #9d7d4c;
}
.header.sticky .navbar-toggler, .header.has-dropdown .navbar-toggler {
color: #0e1c42;
}
.header .logo {
max-width: 169px;
}
@media (max-width: 992px) {
.header .logo {
max-width: 120px;
}
}
.header .logo.logo-sticky {
display: none;
}
.header__content {
height: 104px;
padding-left: 0;
padding-right: 0;
/* Bootstrap-style responsive container constraints for desktop only (≥992px) */
/* These max-widths ensure content stays readable and properly contained on large screens */
/* Mobile: remove left/right padding, keep only top/bottom */
/* (Removed small-screen left/right padding overrides) */
}
@media (min-width: 992px) {
.header__content {
max-width: 960px !important;
margin: 0 auto; /* Center the content */
}
}
@media (min-width: 1200px) {
.header__content {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.header__content {
max-width: 1320px !important;
}
}
@media (max-width: 992px) {
.header__content {
height: auto;
padding: 24px 0;
}
}
@media (min-width: 576px) {
.header .container-sm,
.header .container {
max-width: 540px !important;
}
}
.header .navbar {
background: none;
padding: 0;
position: unset;
}
.header .navbar .navbar-nav {
gap: 40px;
}
.header .navbar .nav-item.dropdown {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: unset;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle {
width: 26px;
padding: 0;
border: none; /* Remove border */
background: transparent; /* Remove background color */
-webkit-box-shadow: none;
box-shadow: none;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle::after {
color: #fff;
border: solid #fff;
border-width: 0 2px 2px 0;
padding: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 0 5px;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle:hover::after {
border-color: #fff;
}
.header .navbar .nav-item.dropdown .btn.dropdown-toggle.show::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin: 2px 0 0;
}
.header .navbar .nav-link {
color: rgba(255, 255, 255, 0.95);
padding: 0;
font-size: 20px;
line-height: 24px;
text-transform: none !important;
font-family: "sigvar-light";
text-transform: none !important;
}
.header .navbar .nav-link.active {
color: #fff;
font-family: "sigvar-medium";
}
.header .navbar .dropdown-menu {
border: none;
background: #ffffff;
-webkit-box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.08);
box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.08);
border-radius: 0;
padding: 0;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-top: 0;
min-width: 100%;
background: linear-gradient(100deg, #fff 70%, #fafafa 30%);
/* Ensure the dropdown menu spans full viewport width so inner container centers */
/* Align dropdown inner container with header__content so the
dropdown content left/right edges match the main navigation.
The OUTER .header-container (wrapping header__content) uses
width: 90% + margin: 5% from _global.scss. header__content
then adds max-width breakpoints + margin: 0 auto inside it.
This dropdown .header-container must replicate that combined
effect. Using width: 90% + margin: 0 auto achieves it:
– When 90% < max-width → element is 90% wide, auto-margin
gives 5% each side (matches the outer container).
– When 90% ≥ max-width → element is capped at max-width and
centered (matches header__content centering). */
}
.header .navbar .dropdown-menu.show {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
right: 0;
}
.header .navbar .dropdown-menu li {
padding: 16px 0;
border-bottom: 1px solid #f2f2f2;
}
.header .navbar .dropdown-menu li:first-child, .header .navbar .dropdown-menu li:last-child {
border-bottom: none;
}
.header .navbar .dropdown-menu li:first-child {
color: #9d7d4c;
text-transform: none !important;
font-family: "sigvar-medium";
font-size: 18px;
line-height: 24px;
}
.header .navbar .dropdown-menu li:first-child a {
color: #9d7d4c;
font-size: 18px;
}
.header .navbar .dropdown-menu li .dropdown-item {
padding: 0;
text-transform: none !important;
color: #666666;
font-size: 15px;
white-space: normal;
}
.header .navbar .dropdown-menu li .dropdown-item:hover {
background: none;
color: #9d7d4c;
}
.header .navbar .dropdown-menu {
left: 0 !important;
right: 0 !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.header .navbar .dropdown-menu .header-container {
/* Align header-container inside header dropdown with
global container behavior used by .cmp-container--body */
width: 100% !important;
padding-right: 12px !important;
padding-left: 12px !important;
margin-right: auto !important;
margin-left: auto !important;
}
@media (min-width: 576px) {
.header .navbar .dropdown-menu .header-container {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.header .navbar .dropdown-menu .header-container {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.header .navbar .dropdown-menu .header-container {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.header .navbar .dropdown-menu .header-container {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.header .navbar .dropdown-menu .header-container {
max-width: 1320px !important;
}
}
.header .navbar .dropdown-menu .dropdown-tabs {
margin: 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .col-parent {
margin-top: 0;
padding: 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .col-parent.has-bg {
background-color: #fafafa;
border-left: 1px solid #f2f2f2;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs {
border: none;
padding: 48px 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item {
border: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item:first-child {
padding-top: 0;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link {
font-size: 18px;
color: #666;
border: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link:hover {
text-decoration: underline;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link.active {
font-weight: normal;
color: #9d7d4c;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link.active:hover {
text-decoration: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link.active svg {
display: inline-block;
margin-left: 20px;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link svg {
display: none;
}
@media (max-width: 1199px) {
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link {
font-size: 15px;
}
.header .navbar .dropdown-menu .dropdown-tabs .nav-tabs .nav-item .nav-link svg {
width: 16px;
}
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane {
padding: 48px;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane .main-link-tab {
font-size: 18px;
font-family: sigvar-medium;
line-height: 24px;
display: block;
padding-bottom: 16px;
color: #9d7d4c;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0 16px;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul li {
width: calc(50% - 8px);
font-family: gothambook;
font-size: 15px;
line-height: 21px;
color: #666;
border: none;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul li a {
font-family: gothambook;
font-size: 15px;
line-height: 21px;
color: #666;
}
.header .navbar .dropdown-menu .dropdown-tabs .tab-content .tab-pane ul li a:hover {
color: #9d7d4c;
}
.header .navbar-toggler {
color: #fff;
}
.header .navbar-mobile {
height: 100vh;
display: none;
}
.header .navbar-mobile.show {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header .navbar-mobile .offcanvas-header {
background: #0e1c42;
padding: 24px 20px;
}
.header .navbar-mobile .offcanvas-header .logo {
max-width: 120px;
display: block;
}
.header .navbar-mobile .offcanvas-header .btn-close {
opacity: 1;
-webkit-box-shadow: none;
box-shadow: none;
}
.header .navbar-mobile .offcanvas-body {
padding: 0;
overflow-x: hidden;
}
.header .navbar-mobile .offcanvas-body ul {
padding: 0 20px;
border-bottom: 1px solid #f2f2f2;
}
.header .navbar-mobile .offcanvas-body ul li {
padding: 24px 0;
font-family: "sigvar-light";
font-size: 20px;
}
.header .navbar-mobile .offcanvas-body ul li a {
color: #333;
}
.header .navbar-mobile .offcanvas-body ul li a:hover, .header .navbar-mobile .offcanvas-body ul li a.active {
color: #9d7d4c;
}
.header .navbar-mobile .offcanvas-body ul li.has-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
width: 100%;
top: 0;
left: 100%;
z-index: 1;
height: calc(100vh + 100px);
background-color: #fff;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li {
font-size: 16px;
padding: 16px 0;
font-family: "gothambook";
border: none;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li a {
color: #4d4d4d;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li a:hover, .header .navbar-mobile .offcanvas-body .sub-nav-mobile ul li a.active {
color: #9d7d4c;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav {
width: 100%;
background-color: #fff;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-color: #f2f2f2;
color: #333;
border-width: 0 0 1px 0;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav[aria-expanded=true] {
color: #9d7d4c;
background-color: #fafafa;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav[aria-expanded=true] .caret {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .btn-collapse-nav .caret {
color: #333;
border: 2px solid #333;
border-width: 0 2px 2px 0;
margin: 0 0 5px;
padding: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.header .navbar-mobile .offcanvas-body .sub-nav-mobile .accordion-header {
margin: 0;
}
.header .navbar-mobile .offcanvas-body ul li,
.header .navbar-mobile .offcanvas-body ul li * {
font-family: "sigvar-light" !important;
}
.header .btn-sub-navs {
padding: 0 7px;
cursor: pointer;
}
.header .btn-sub-navs span {
border: solid #333;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.header .btn-back-main-navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
background-color: #0e1c42;
padding: 20px;
font-family: "sigvar-light";
gap: 10px;
cursor: pointer;
border-top: 1px solid #333;
}
.header .btn-back-main-navs span {
color: #fff;
}
.header .btn-back-main-navs span.arrow-left {
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.header .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
font-size: 18px;
height: auto;
padding: 12px 20px;
font-family: "sigvar-medium";
text-transform: capitalize;
color: #9d7d4c;
border-radius: 2px;
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
.heroimage {
position: relative;
height: 100vh;
/* Apply the constrained max-width only between desktop breakpoints
(>=992px and <1200px). For screens >=1200px we intentionally do not
constrain the hero h1 so it can span the full available width. */
/* === Policy-Based Custom Styling === */
}
@media (max-width: 1200px) {
.heroimage {
height: 674px;
}
}
.heroimage .ico-point-r {
font-size: 8px;
margin-left: 10px;
margin-right: 10px;
vertical-align: unset;
}
.heroimage.gradient-overlay-1 .gradient {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.1803921569)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1803921569) 0%, rgba(0, 0, 0, 0) 100%);
padding-top: 40px;
height: 20%;
left: 0;
bottom: 0;
position: absolute;
width: 100%;
-webkit-animation: slideInUp 2s ease;
animation: slideInUp 2s ease;
}
.heroimage.gradient-overlay-1 .content {
-webkit-animation: slideInUp 1s ease;
animation: slideInUp 1s ease;
}
.heroimage.gradient-overlay-2 .gradient {
position: absolute;
top: 96px;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(97deg, rgba(41, 41, 41, 0.8) 24.04%, rgba(41, 41, 41, 0) 69.12%);
}
.heroimage.gradient-overlay-3 .gradient {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(266.55deg, rgba(140, 144, 153, 0) 0.79%, #686e7a 40.96%, #4c535c 79.5%);
}
.heroimage.gradient-overlay-4 .gradient {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(266.55deg, rgba(0, 0, 0, 0) 0.79%, rgba(0, 0, 0, 0.5) 40.96%, rgba(0, 0, 0, 0.5) 79.5%);
}
.heroimage h1, .heroimage .h1 {
font-size: 48px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 15px;
color: #fff;
}
.heroimage p {
margin-bottom: 32px;
font-family: "gothambook";
font-size: 20px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
text-align: left;
color: #fff;
}
.heroimage .full-width-banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: top;
}
.heroimage .content {
position: absolute;
top: 50%;
color: #fff;
text-align: left;
width: 630px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: fadeIn 3s ease;
animation: fadeIn 3s ease;
}
.heroimage .content .button {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 27px;
}
.heroimage .content .button::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.heroimage .content .button:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
}
.heroimage .full-width-banner-wrapper {
margin: 0 auto;
/* Bootstrap-style responsive container constraints for desktop only (≥992px) */
/* These max-widths ensure content alignment with nav/sub-nav classes */
}
@media (min-width: 992px) {
.heroimage .full-width-banner-wrapper {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.heroimage .full-width-banner-wrapper {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.heroimage .full-width-banner-wrapper {
max-width: 1320px !important;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.heroimage {
/* Target all h1 variants - base, nav-page, and sub-nav */
}
.heroimage .hero-banner__title {
max-width: 70% !important;
}
.heroimage h1, .heroimage .h1 {
max-width: 70% !important;
}
.heroimage.nav-page h1, .heroimage.nav-page .h1 {
max-width: 70% !important;
}
.heroimage.sub-nav h1, .heroimage.sub-nav .h1 {
max-width: 70% !important;
}
}
.heroimage .full-width-banner-breadcrumb {
font-family: "gothambook";
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
position: relative;
z-index: 1;
color: #fff;
padding-top: 30px;
}
.heroimage .full-width-banner-breadcrumb a {
color: #fff;
text-decoration: underline;
}
.heroimage .full-width-banner-breadcrumb a .ico-point-r {
margin: 0 10px 0 10px;
}
@media screen and (max-width: 768px) {
.heroimage {
position: relative;
height: 422px;
}
.heroimage .content {
padding: 0 20px;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.heroimage .content .button {
padding: 12px 20px;
width: auto;
position: absolute;
bottom: 30px;
width: calc(100% - 40px);
margin: 0;
}
.heroimage .content .button:after {
content: none !important;
}
}
@media screen and (max-width: 768px) {
.heroimage h1, .heroimage .h1 {
font-size: 32px;
line-height: 38px;
}
.heroimage p {
font-size: 16px;
line-height: 22px;
}
}
@media screen and (max-width: 768px) and (max-width: 320px) {
.heroimage p {
margin-bottom: 32px;
}
}
@media screen and (max-width: 768px) {
.heroimage .full-width-banner-breadcrumb {
padding-top: 20px;
}
.heroimage .full-width-banner-breadcrumb a {
display: none;
}
.heroimage .full-width-banner-breadcrumb :nth-last-child(-n+2) {
display: inline-block;
}
.heroimage .full-width-banner-wrapper {
max-width: 100%;
height: 100%;
}
.heroimage.gradient-overlay-1 .gradient {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.1803921569)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1803921569) 0%, rgba(0, 0, 0, 0) 100%);
padding-top: 40px;
}
.heroimage.gradient-overlay-2 .gradient {
background: linear-gradient(97deg, rgba(41, 41, 41, 0.6) 24.04%, rgba(41, 41, 41, 0) 69.12%);
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.heroimage .full-width-banner-wrapper {
margin: 0 20px;
}
}
.heroimage.nav-page .content {
position: absolute;
top: auto;
bottom: 0;
color: #fff;
text-align: left;
width: 100% !important;
-webkit-transform: none;
transform: none;
left: 0 !important;
right: 0 !important;
padding: 0 15px 48px 15px !important;
height: auto;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.heroimage.nav-page .content {
bottom: 20px;
top: auto;
padding: 0 12px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 0 !important;
margin-left: auto !important;
}
}
@media (min-width: 576px) {
.heroimage.nav-page .content {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.heroimage.nav-page .content {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.heroimage.nav-page .content {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.heroimage.nav-page .content {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.heroimage.nav-page .content {
max-width: 1320px !important;
}
}
.heroimage.nav-page h1, .heroimage.nav-page .h1 {
font-size: 40px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 0px;
color: #fff;
}
@media (max-width: 768px) {
.heroimage.nav-page h1, .heroimage.nav-page .h1 {
font-size: 32px;
line-height: 38px;
}
}
.heroimage.sub-nav .content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
bottom: 0;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
padding: 0 15px 48px 15px !important;
position: absolute;
-webkit-transform: none;
transform: none;
left: 0 !important;
right: 0 !important;
text-align: left;
top: auto;
width: 100% !important;
height: auto;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.heroimage.sub-nav .content {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
bottom: 20px;
top: auto;
left: 0 !important;
right: 0 !important;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
width: 100% !important;
padding: 0 12px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 0 !important;
margin-left: auto !important;
}
}
@media (min-width: 576px) {
.heroimage.sub-nav .content {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.heroimage.sub-nav .content {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.heroimage.sub-nav .content {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.heroimage.sub-nav .content {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.heroimage.sub-nav .content {
max-width: 1320px !important;
}
}
.heroimage.sub-nav h1, .heroimage.sub-nav .h1 {
font-size: 40px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 0px;
color: #fff;
}
@media (max-width: 768px) {
.heroimage.sub-nav h1, .heroimage.sub-nav .h1 {
font-size: 32px;
line-height: 38px;
}
}
.heroimage .btn.active {
border-color: transparent;
padding: 0 24px 0 0;
}
@media (max-width: 768px) {
.heroimage .btn.active {
padding: 0;
}
}
.heroimage .btn.btn-back:hover {
color: #9d7d4c;
background: 0 0;
}
.heroimage .btn.btn-back {
display: none;
}
.heroimage.sub-nav .btn.btn-back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* === Hero when rendered inside a carousel === */
.heroimage--in-carousel {
height: 100dvh !important;
min-height: 100dvh !important;
width: 100%;
}
.cmp-carousel.hero-only-carousel {
max-height: none !important;
}
.cmp-carousel.hero-only-carousel .cmp-carousel__container,
.cmp-carousel.hero-only-carousel .cmp-carousel__content {
max-height: none !important;
}
.cmp-carousel.hero-only-carousel .cmp-carousel__item {
height: auto !important;
overflow: visible;
}
.cmp-carousel.hero-only-carousel .heroimage--in-carousel .full-width-banner {
height: 100% !important;
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.heroimage--in-carousel {
height: 100dvh !important;
min-height: 100dvh !important;
}
}
.master-column-container {
display: grid;
gap: 20px;
-webkit-transition: grid-template-columns 0.5s ease;
transition: grid-template-columns 0.5s ease;
transition: grid-template-columns 0.5s ease, -ms-grid-columns 0.5s ease;
}
.master-column-container .card {
border-radius: 4px;
background-color: #fff;
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0509803922);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0509803922);
gap: 20px;
}
.master-column-container .card .card-image {
font-size: 0px;
}
/* Pagination-specific responsive utility: hide pagination on tablets and desktop (show only on phones ≤480px) */
@media screen and (min-width: 481px) {
#academy-pagination.hidden-desktop {
display: none !important;
}
}
@media only screen and (max-width: 480px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container .icon-cards.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-card.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-gallery.span-2 {
grid-column: auto/span 2;
}
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(1, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(3, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container .icon-cards.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-card.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-gallery.span-2 {
grid-column: auto/span 2;
}
}
@media only screen and (min-width: 992px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 1200px) {
.master-column-container[data-columns="2"] {
grid-template-columns: repeat(2, 1fr);
}
.master-column-container[data-columns="3"] {
grid-template-columns: repeat(3, 1fr);
}
.master-column-container[data-columns="3-2"] {
grid-template-columns: repeat(3, 1fr);
}
.master-column-container[data-columns="4"] {
grid-template-columns: repeat(4, 1fr);
}
.master-column-container[data-columns="5"] {
grid-template-columns: repeat(5, 1fr);
}
.master-column-container .icon-cards.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-card.span-2 {
grid-column: auto/span 2;
}
.master-column-container .image-gallery.span-2 {
grid-column: auto/span 2;
}
}
@media only screen and (max-width: 480px) {
.master-column-container.mobile-scroll {
grid-template-columns: none !important;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
grid-auto-flow: column;
grid-auto-columns: minmax(80%, 1fr);
overflow-x: scroll;
scrollbar-width: none;
}
.master-column-container.mobile-scroll .image-card, .master-column-container.mobile-scroll .icon-cards, .master-column-container.mobile-scroll .image-gallery {
scroll-snap-align: center;
scroll-snap-stop: always;
}
#academy-pagination {
padding: 32px 0 0;
display: block;
}
#academy-pagination ul {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 400px;
margin: auto;
}
#academy-pagination ul li.first, #academy-pagination ul li.last {
display: none;
}
#academy-pagination ul li a {
border: none;
background: none;
color: #333;
font-size: 14px;
}
#academy-pagination ul li a:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
#academy-pagination ul li a:hover {
background: none;
color: #9d7d4c;
}
#academy-pagination ul li.active a {
color: #9d7d4c;
background: none;
}
#academy-pagination ul li.prev, #academy-pagination ul li.next {
padding: 0 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#academy-pagination ul li.prev a, #academy-pagination ul li.next a {
font-size: 0;
border: solid #333;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 10px;
height: 10px;
}
#academy-pagination ul li.prev:not(.disabled) a:hover, #academy-pagination ul li.next:not(.disabled) a:hover {
border-color: #9d7d4c;
}
#academy-pagination ul li.prev a {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
.promo-banner.blue-background .promo-banner-wrapper {
background-color: #0e1c42;
}
.promo-banner .promo-banner-wrapper {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100vw - var(--scrollbar-width));
padding: 120px 0;
background-position: right 0 top 0;
background-repeat: no-repeat;
background-size: cover;
}
.promo-banner .promo-banner-wrapper .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 768px) {
.promo-banner .promo-banner-wrapper .content {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
}
}
.promo-banner .promo-banner-wrapper .content h2, .promo-banner .promo-banner-wrapper .content .h2,
.promo-banner .promo-banner-wrapper .content span {
color: #fff;
margin: 0;
max-width: 780px;
}
.promo-banner .promo-banner-wrapper .content h2, .promo-banner .promo-banner-wrapper .content .h2 {
margin-bottom: 16px;
}
.promo-banner .promo-banner-wrapper .content span {
font-size: 18px;
}
@media (max-width: 768px) {
.promo-banner .promo-banner-wrapper .content span {
font-size: 16px;
}
}
.promo-banner .promo-banner-wrapper .content .button {
border: 1px solid #fff;
background: transparent;
color: #fff;
font-size: 18px;
padding: 12px 20px;
font-weight: 400;
font-family: "sigvar-medium";
text-transform: capitalize;
border-radius: 2px;
margin-top: 32px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.promo-banner .promo-banner-wrapper .content .button::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
@media (max-width: 768px) {
.promo-banner .promo-banner-wrapper .content .button {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.promo-banner .promo-banner-wrapper .content .button::after {
display: none !important;
}
}
.promo-banner .promo-banner-wrapper .orange-line {
border: 2px solid #ff9f00;
width: 50px;
background-color: #ff9f00;
height: 3px;
margin-bottom: 20px;
}
.promo-banner .promo-banner-wrapper p {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.promo-banner .promo-banner-wrapper {
text-align: left;
padding: 80px 12px;
}
}
@media screen and (max-width: 768px) {
.promo-banner #promo-banner-img {
background-image: var(--promo-bg-mobile);
}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
.promo-banner #promo-banner-img {
background-image: var(--promo-bg-tablet);
}
}
@media screen and (min-width: 981px) {
.promo-banner #promo-banner-img {
background-image: var(--promo-bg-desktop);
}
}
.sia-equaltwocolumns .promo-banner .promo-banner-wrapper {
width: auto;
border-radius: 5px;
}
.promo-banner.highflyer-card .promo-banner-wrapper h2, .promo-banner.highflyer-card .promo-banner-wrapper .h2 {
width: 100%;
}
.promo-banner.highflyer-card .promo-banner-wrapper span {
width: 100%;
}
.promo-banner.highflyer-card {
display: grid;
}
@media screen and (max-width: 768px) {
.promo-banner.highflyer-card .promo-banner-wrapper {
padding: 40px 20px !important;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.promo-banner .promo-banner-wrapper .content,
.promo-banner .promo-banner-wrapper .animate__slideInUp {
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.promo-banner.highflyer-card .promo-banner-wrapper {
text-align: left;
}
.promo-banner .content span p,
.promo-banner .animate__slideInUp span p {
text-align: left !important;
}
}
@media screen and (min-width: 768px) and (max-width: 990px) {
.promo-banner .promo-banner-wrapper .content,
.promo-banner .promo-banner-wrapper .animate__slideInUp {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
}
/* ==========================================================================
Slick Article Carousel
All classes scoped under .slick-article-carousel to avoid conflicts.
Default (article-slide): image on right with negative margin bleed.
========================================================================== */
/* --------------------------------------------------------------------------
Shared nav bar (dots + arrows) — mirrors reference .slide-res-nav
-------------------------------------------------------------------------- */
.slick-article-carousel {
/* ---- Navigation bar ---- */
/* ---- Arrow buttons ---- */
}
.slick-article-carousel__nav {
width: 100%;
margin-top: 40px;
}
@media (max-width: 991px) {
.slick-article-carousel__nav {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
position: static !important;
margin-bottom: 56px;
}
}
.slick-article-carousel__nav .slick-article-carousel__dots .slick-dots {
position: static;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.slick-article-carousel__nav .slick-article-carousel__dots .slick-dots li {
margin: 0 4px;
}
.slick-article-carousel__nav .slick-article-carousel__dots .slick-dots li button {
font-size: 0;
width: 11px;
height: 11px;
border-radius: 50%;
border: none;
padding: 0;
background: #cdbda4;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.slick-article-carousel__nav .slick-article-carousel__dots .slick-dots li button:hover {
background: #9d7d4c;
}
.slick-article-carousel__nav .slick-article-carousel__dots .slick-dots li button::before {
display: none;
}
.slick-article-carousel__nav .slick-article-carousel__dots .slick-dots li.slick-active button {
background: #9d7d4c;
}
.slick-article-carousel__nav .slick-article-carousel__arrows {
gap: 15px !important;
}
@media (max-width: 991px) {
.slick-article-carousel__nav .slick-article-carousel__arrows {
display: none !important;
}
}
.slick-article-carousel__nav .slick-article-carousel__arrows .slick-arrow {
-webkit-transform: none;
transform: none;
}
.slick-article-carousel__prev, .slick-article-carousel__next {
width: 40px;
height: 40px;
border: 1px solid #9d7d4c;
background: transparent;
cursor: pointer;
position: relative;
padding: 0;
font-size: 0;
}
.slick-article-carousel__prev::before, .slick-article-carousel__next::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border: solid #9d7d4c;
border-width: 0 2px 2px 0;
position: absolute;
top: 50%;
left: 50%;
}
.slick-article-carousel__prev:hover, .slick-article-carousel__next:hover {
background: rgba(157, 125, 76, 0.1);
}
.slick-article-carousel__prev::before {
-webkit-transform: translate(-30%, -50%) rotate(135deg);
transform: translate(-30%, -50%) rotate(135deg);
}
.slick-article-carousel__next::before {
-webkit-transform: translate(-70%, -50%) rotate(-45deg);
transform: translate(-70%, -50%) rotate(-45deg);
}
/* ==========================================================================
Default / Normal Article Carousel
Matches reference .article-slide layout
- Image column on the right (70%, 60% on <1600px)
- Text column on the left (40%)
- flex-column-reverse on mobile (image shows on top, text below)
========================================================================== */
.slick-article-carousel {
padding-top: 80px;
/* ---- Text items column ---- */
/* ---- Slick text slider ---- */
/* ---- Image column ---- */
/* ---- Nav ---- */
/* ---- Button ---- */
}
@media (max-width: 991px) {
.slick-article-carousel {
padding-top: 0;
}
}
.slick-article-carousel .slick-article-carousel__wrap {
/* Already has flex utilities from HTL, but reinforce for safety */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 991px) {
.slick-article-carousel .slick-article-carousel__wrap {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.slick-article-carousel .slick-article-carousel__items {
width: 40%;
}
@media (max-width: 991px) {
.slick-article-carousel .slick-article-carousel__items {
width: 100%;
}
}
.slick-article-carousel .slick-article-carousel__item.slick-dotted.slick-slider {
margin-bottom: 40px;
}
@media (max-width: 991px) {
.slick-article-carousel .slick-article-carousel__item__content {
padding: 56px 6px 0;
}
}
.slick-article-carousel .slick-article-carousel__item__content h2, .slick-article-carousel .slick-article-carousel__item__content .h2 {
color: #9d7d4c;
margin-bottom: 16px;
}
.slick-article-carousel .slick-article-carousel__item__content p {
margin-bottom: 32px;
}
.slick-article-carousel .slick-article-carousel__imgs {
width: 70%;
}
@media (max-width: 1600px) {
.slick-article-carousel .slick-article-carousel__imgs {
width: 60%;
}
}
@media (max-width: 991px) {
.slick-article-carousel .slick-article-carousel__imgs {
margin-right: 0;
width: 100%;
}
}
.slick-article-carousel .slick-article-carousel__imgs img {
width: 100%;
height: auto;
display: block;
}
.slick-article-carousel .slick-article-carousel__nav {
width: 100%;
}
@media (max-width: 991px) {
.slick-article-carousel .slick-article-carousel__nav {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
position: static !important;
margin-bottom: 56px;
}
}
.slick-article-carousel .slick-article-carousel__item__content .btn {
font-size: 18px;
font-family: sigvar-medium;
font-weight: 400;
letter-spacing: 0px;
text-transform: capitalize;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 2px;
border: 1px solid #9d7d4c;
margin: 10px 0;
padding: 12px 20px;
width: 100%;
color: #9d7d4c;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: fit-content;
line-height: 27px;
}
.slick-article-carousel .slick-article-carousel__item__content .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn.svg");
margin-left: 15px;
height: 20px;
}
.slick-article-carousel .slick-article-carousel__item__content .btn:hover {
background: rgba(157, 125, 76, 0.1);
text-decoration: none;
color: #9d7d4c;
}
@media (max-width: 991px) {
.slick-article-carousel .slick-article-carousel__item__content .btn {
width: 100%;
}
.slick-article-carousel .slick-article-carousel__item__content .btn::after {
display: none;
}
.slick-article-carousel .slick-article-carousel__item__content .btn:hover {
background: rgba(157, 125, 76, 0.1);
color: #9d7d4c;
border: 1px solid #9d7d4c;
}
}
/* --------------------------------------------------------------------------
Slick internal overrides — scoped to component
-------------------------------------------------------------------------- */
.slick-article-carousel {
padding-top: 0 !important;
/* Strong override to ensure arrows gap isn't overridden elsewhere */
/* Layout fixes: ensure vendor slick absolute positioning doesn't place
arrows/dots outside the nav for this component. Make nav a flex
container and scope resets to this component only. */
/* Override slick vendor absolute arrows for this component */
/* Ensure dots are centered on small screens */
/* Hide non-active content slides when using fade */
}
.slick-article-carousel .slick-article-carousel__nav .slick-article-carousel__arrows {
gap: 15px !important;
}
.slick-article-carousel .slick-list {
overflow: hidden;
}
.slick-article-carousel .slick-article-carousel__nav {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
gap: 12px;
}
.slick-article-carousel .slick-article-carousel__nav .slick-article-carousel__dots {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.slick-article-carousel .slick-article-carousel__nav .slick-article-carousel__arrows {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.slick-article-carousel .slick-article-carousel .slick-prev,
.slick-article-carousel .slick-article-carousel .slick-next {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
-webkit-transform: none !important;
transform: none !important;
margin: 0 !important;
display: -webkit-inline-box !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.slick-article-carousel .slick-track {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 991px) {
.slick-article-carousel {
/* Also ensure the dots container itself doesn't get pushed by arrows */
}
.slick-article-carousel .slick-article-carousel__nav .slick-article-carousel__dots .slick-dots {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.slick-article-carousel .slick-article-carousel__nav {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
gap: 8px;
}
}
.slick-article-carousel .slick-slide {
height: auto;
}
.slick-article-carousel .slick-slide > div {
height: 100%;
}
.slick-article-carousel .slick-article-carousel__item .slick-slide:not(.slick-active) {
opacity: 0;
pointer-events: none;
}
/* ==========================================================================
FOUC Prevention
Hide carousel content until Slick is initialized to prevent
visual stacking of slides on initial page load.
========================================================================== */
.slick-article-carousel__imgs {
visibility: hidden;
opacity: 0;
}
.slick-article-carousel__imgs.slick-initialized {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.slick-article-carousel__item {
visibility: hidden;
opacity: 0;
}
.slick-article-carousel__item.slick-initialized {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
/* ==========================================================================
Slick Events Carousel
All classes scoped under .slick-events-carousel to avoid conflicts.
About (--about): text left, image right, #fafafa bg (matches reference .about-slide)
========================================================================== */
/* --------------------------------------------------------------------------
Shared nav bar (dots + arrows) — mirrors reference .slide-res-nav
-------------------------------------------------------------------------- */
.slick-events-carousel {
/* ---- Navigation bar ---- */
/* ---- Arrow buttons ---- */
}
.slick-events-carousel__nav {
width: 100%;
margin-top: 24px;
}
@media (max-width: 991px) {
.slick-events-carousel__nav {
margin: 32px 0 0;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
}
.slick-events-carousel__nav .slick-events-carousel__dots .slick-dots {
position: static;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.slick-events-carousel__nav .slick-events-carousel__dots .slick-dots li {
margin: 0 4px;
}
.slick-events-carousel__nav .slick-events-carousel__dots .slick-dots li button {
font-size: 0;
width: 11px;
height: 11px;
border-radius: 50%;
border: none;
padding: 0;
background: #cdbda4;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.slick-events-carousel__nav .slick-events-carousel__dots .slick-dots li button:hover {
background: #9d7d4c;
}
.slick-events-carousel__nav .slick-events-carousel__dots .slick-dots li button::before {
display: none;
}
.slick-events-carousel__nav .slick-events-carousel__dots .slick-dots li.slick-active button {
background: #9d7d4c;
}
.slick-events-carousel__nav .slick-events-carousel__arrows {
gap: 16px !important;
}
@media (max-width: 991px) {
.slick-events-carousel__nav .slick-events-carousel__arrows {
display: none !important;
}
}
.slick-events-carousel__prev, .slick-events-carousel__next {
width: 40px;
height: 40px;
border: 1px solid #9d7d4c;
background: transparent;
cursor: pointer;
position: relative;
padding: 0;
font-size: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.slick-events-carousel__prev::before, .slick-events-carousel__next::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border: solid #9d7d4c;
border-width: 0 2px 2px 0;
position: absolute;
top: 50%;
left: 50%;
}
.slick-events-carousel__prev:hover, .slick-events-carousel__next:hover {
background: rgba(157, 125, 76, 0.1);
}
.slick-events-carousel__prev::before {
-webkit-transform: translate(-30%, -50%) rotate(135deg);
transform: translate(-30%, -50%) rotate(135deg);
}
.slick-events-carousel__next::before {
-webkit-transform: translate(-70%, -50%) rotate(-45deg);
transform: translate(-70%, -50%) rotate(-45deg);
}
/* ==========================================================================
About — Text Left, Image Right
Matches reference .events-slide.about-slide layout (about-us page)
- #fafafa background
- 50/50 split with 56px gap
- flex-column-reverse on mobile (image on top, text below)
- No gradient overlay on mobile images
- Title/text colours stay $primary / #333 on all breakpoints
========================================================================== */
.slick-events-carousel--about {
background: #fafafa;
/* remove top padding; keep bottom spacing */
padding: 0 0 80px 0;
/* Container max-widths to match article-container breakpoints (desktop only) */
/* ---- Text items column (left side in about variant) ---- */
/* ---- Image column (right side in about variant) ---- */
/* ---- No gradient overlay for about variant ---- */
/* ---- Slick text slider (about variant) ---- */
/* About variant typically has no button, but if author adds one: */
}
@media (max-width: 991px) {
.slick-events-carousel--about {
padding: 0 0 56px;
background: #fafafa;
}
}
.slick-events-carousel--about .slick-events-carousel__wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
/* Override Bootstrap's justify-content-between !important class.
Our selector (2 classes) has higher specificity than Bootstrap's
utility (1 class), so our !important wins.
Using flex-start: children pack left-to-right; the gap between
them comes ONLY from the hard-coded gap:56px below — not from
Bootstrap's flexible space distribution. */
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
position: relative;
/* Hard-coded 56px gap between text column and image column.
Not Bootstrap-driven — purely from CSS gap property. */
gap: 56px !important;
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__wrap {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 0 !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.slick-events-carousel--about .container {
max-width: 936px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.slick-events-carousel--about .container {
max-width: 1116px;
}
}
@media (min-width: 1400px) {
.slick-events-carousel--about .container {
max-width: 1296px;
}
}
.slick-events-carousel--about .slick-events-carousel__wrap-items--about {
padding: 32px 0;
width: calc((100% - 56px) / 2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
/* Mobile: matches article carousel aboutus — static, left-aligned, padded from top */
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.slick-events-carousel--about .slick-events-carousel__wrap-items--about {
padding-top: 0;
}
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__wrap-items--about {
position: static !important;
text-align: left;
width: 100% !important;
/* Align with article carousel __item__content padding: 56px 6px 0 */
padding: 56px 6px 0;
}
}
.slick-events-carousel--about .slick-events-carousel__wrap-items--about .slick-events-carousel__nav {
margin: 0;
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__wrap-items--about .slick-events-carousel__nav {
position: static !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
margin-top: 0;
margin-bottom: 0;
}
.slick-events-carousel--about .slick-events-carousel__wrap-items--about .slick-events-carousel__nav .slick-events-carousel__arrows {
display: none !important;
}
}
.slick-events-carousel--about .slick-events-carousel__imgs {
width: calc((100% - 56px) / 2);
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__imgs {
width: 100% !important;
}
}
.slick-events-carousel--about .slick-events-carousel__imgs img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__imgs img {
height: auto;
}
}
.slick-events-carousel--about .slick-events-carousel__img {
min-height: auto;
}
.slick-events-carousel--about .slick-events-carousel__img::before {
content: none;
}
.slick-events-carousel--about .slick-events-carousel__items {
margin-bottom: 0 !important;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
}
.slick-events-carousel--about .slick-events-carousel__item h2, .slick-events-carousel--about .slick-events-carousel__item .h2,
.slick-events-carousel--about .slick-events-carousel__item h3,
.slick-events-carousel--about .slick-events-carousel__item .h3,
.slick-events-carousel--about .slick-events-carousel__item a {
color: #9d7d4c;
}
.slick-events-carousel--about .slick-events-carousel__item h2, .slick-events-carousel--about .slick-events-carousel__item .h2 {
margin-bottom: 16px;
line-height: 38px;
}
.slick-events-carousel--about .slick-events-carousel__item h2 a, .slick-events-carousel--about .slick-events-carousel__item .h2 a {
color: #9d7d4c;
text-decoration: none;
}
.slick-events-carousel--about .slick-events-carousel__item h2 a:hover, .slick-events-carousel--about .slick-events-carousel__item .h2 a:hover {
text-decoration: underline;
}
.slick-events-carousel--about .slick-events-carousel__item h3, .slick-events-carousel--about .slick-events-carousel__item .h3 {
margin-bottom: 12px;
color: #9d7d4c;
}
.slick-events-carousel--about .slick-events-carousel__item p {
color: #333;
margin-bottom: 24px;
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__item h2, .slick-events-carousel--about .slick-events-carousel__item .h2,
.slick-events-carousel--about .slick-events-carousel__item h2 a,
.slick-events-carousel--about .slick-events-carousel__item h3,
.slick-events-carousel--about .slick-events-carousel__item .h3,
.slick-events-carousel--about .slick-events-carousel__item a {
color: #9d7d4c;
}
.slick-events-carousel--about .slick-events-carousel__item p {
color: #333;
}
}
.slick-events-carousel--about .slick-events-carousel__item .btn {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: fit-content;
line-height: 27px;
}
.slick-events-carousel--about .slick-events-carousel__item .btn::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.slick-events-carousel--about .slick-events-carousel__item .btn:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
text-decoration: none;
}
@media (max-width: 991px) {
.slick-events-carousel--about .slick-events-carousel__item .btn {
width: 100%;
}
.slick-events-carousel--about .slick-events-carousel__item .btn::after {
display: none;
}
}
/* --------------------------------------------------------------------------
Slick internal overrides — scoped to component
-------------------------------------------------------------------------- */
.slick-events-carousel {
/* Strong override to ensure arrows gap isn't overridden elsewhere */
/* Layout fixes: ensure vendor slick absolute positioning doesn't place
arrows/dots outside the nav for this component. */
/* Override slick vendor absolute arrows for this component */
/* Only apply display:flex to the IMAGE slider track.
Applying it to the text (fade) slider breaks Slick's
internal fade-mode height calculation. */
/* Ensure dots are centered on small screens */
/* Hide non-active content slides when using fade */
/* Ensure the text slider list has proper overflow and height */
}
.slick-events-carousel .slick-events-carousel__nav .slick-events-carousel__arrows {
gap: 16px !important;
}
.slick-events-carousel .slick-list {
overflow: hidden;
}
.slick-events-carousel .slick-events-carousel__nav {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
gap: 12px;
}
.slick-events-carousel .slick-events-carousel__nav .slick-events-carousel__dots {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.slick-events-carousel .slick-events-carousel__nav .slick-events-carousel__arrows {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.slick-events-carousel .slick-events-carousel .slick-prev,
.slick-events-carousel .slick-events-carousel .slick-next {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
-webkit-transform: none !important;
transform: none !important;
margin: 0 !important;
display: -webkit-inline-box !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.slick-events-carousel .slick-events-carousel__imgs .slick-track {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 991px) {
.slick-events-carousel .slick-events-carousel__nav .slick-events-carousel__dots .slick-dots {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.slick-events-carousel .slick-events-carousel__nav {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
gap: 8px;
}
}
.slick-events-carousel .slick-slide {
height: auto;
}
.slick-events-carousel .slick-slide > div {
height: 100%;
}
.slick-events-carousel .slick-events-carousel__items .slick-slide:not(.slick-active) {
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 500ms linear;
transition: opacity 500ms linear;
}
.slick-events-carousel .slick-events-carousel__items .slick-slide.slick-active {
opacity: 1;
z-index: 999;
}
.slick-events-carousel .slick-events-carousel__items .slick-list {
overflow: hidden;
}
/* ==========================================================================
FOUC Prevention
Hide carousel content until Slick is initialized to prevent
visual stacking of slides on initial page load.
========================================================================== */
.slick-events-carousel__imgs {
visibility: hidden;
opacity: 0;
}
.slick-events-carousel__imgs.slick-initialized {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.slick-events-carousel__items {
visibility: hidden;
opacity: 0;
}
.slick-events-carousel__items.slick-initialized {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
/* ==========================================================================
Slick Hero Image Carousel
All classes scoped under .slick-hero-carousel to avoid conflicts.
========================================================================== */
.slick-hero-carousel {
position: relative;
color: #fff;
/* ---- Slide item ---- */
/* ---- Text content per slide ---- */
/* ---- Navigation bar (dots + arrows) ---- */
/* ---- Slick dots override ---- */
/* ---- Arrows ---- */
/* ---- Slick internal overrides (scoped) ---- */
}
.slick-hero-carousel__item {
height: 100vh;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
@media (max-width: 1200px) {
.slick-hero-carousel__item {
height: 674px;
}
}
@media (max-width: 768px) {
.slick-hero-carousel__item {
height: 422px;
}
}
.slick-hero-carousel__item__content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 630px;
z-index: 2;
text-align: left;
-webkit-animation: slickHeroFadeIn 1s ease forwards;
animation: slickHeroFadeIn 1s ease forwards;
}
@media (max-width: 768px) {
.slick-hero-carousel__item__content {
width: 100%;
padding: 0 20px;
height: 100%;
position: relative !important;
top: auto;
left: auto;
-webkit-transform: none;
transform: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* Ensure animated variant gets full height on small screens (higher specificity) */
}
.slick-hero-carousel__item__content.animate__fadeIn {
height: 100% !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
position: relative !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.slick-hero-carousel__item__content h1, .slick-hero-carousel__item__content .h1 {
font-size: 40px;
line-height: 1.1;
font-family: "sigvar-medium";
font-weight: normal;
color: #fff;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.slick-hero-carousel__item__content h1, .slick-hero-carousel__item__content .h1 {
font-size: 32px;
line-height: 38px;
}
}
.slick-hero-carousel__item__content p {
font-size: 20px;
line-height: 28px;
font-family: "gothambook";
color: #fff;
margin-bottom: 32px;
}
@media (max-width: 768px) {
.slick-hero-carousel__item__content p {
font-size: 16px;
line-height: 22px;
}
}
.slick-hero-carousel__item__content .btn, .slick-hero-carousel__item__content .button {
font-size: 18px;
font-family: "sigvar-medium";
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
letter-spacing: 0px;
border-radius: 2px;
padding: 12px 20px;
margin: 10px 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: capitalize;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-line-pack: center;
align-content: center;
background-color: #9d7d4c;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 27px;
}
.slick-hero-carousel__item__content .btn::after, .slick-hero-carousel__item__content .button::after {
content: url("../../../etc.clientlibs/singaporeairlinesacademy/clientlibs/clientlib-site/resources/images/arrow-btn-white.svg");
margin-left: 15px;
height: 20px;
}
.slick-hero-carousel__item__content .btn:hover, .slick-hero-carousel__item__content .button:hover {
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), #9d7d4c;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9d7d4c;
}
@media (max-width: 768px) {
.slick-hero-carousel__item__content .btn, .slick-hero-carousel__item__content .button {
padding: 12px 20px;
width: auto;
position: absolute;
bottom: 30px;
width: calc(100% - 40px);
margin: 0;
}
.slick-hero-carousel__item__content .btn::after, .slick-hero-carousel__item__content .button::after {
content: none !important;
}
}
.slick-hero-carousel__nav {
position: absolute;
bottom: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 630px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
z-index: 3;
}
@media (max-width: 768px) {
.slick-hero-carousel__nav {
width: 100%;
padding: 0 20px;
}
}
.slick-hero-carousel__dots .slick-dots {
position: static;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.slick-hero-carousel__dots .slick-dots li {
margin: 0 4px;
}
.slick-hero-carousel__dots .slick-dots li button {
font-size: 0;
width: 11px;
height: 11px;
border-radius: 50%;
border: none;
padding: 0;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.slick-hero-carousel__dots .slick-dots li button:hover {
background: #fff;
}
.slick-hero-carousel__dots .slick-dots li button::before {
display: none; /* hide default slick dot icon */
}
.slick-hero-carousel__dots .slick-dots li.slick-active button {
background: #fff;
}
.slick-hero-carousel__arrows {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 16px;
}
@media (max-width: 768px) {
.slick-hero-carousel__arrows {
display: none;
}
}
.slick-hero-carousel__prev, .slick-hero-carousel__next {
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
position: relative;
padding: 0;
}
.slick-hero-carousel__prev::before, .slick-hero-carousel__next::before {
content: "";
display: inline-block;
width: 9px !important;
height: 9px !important;
border: solid #fff;
border-width: 0 2px 2px 0;
position: absolute;
top: 50%;
left: 50%;
}
.slick-hero-carousel__prev:hover::before, .slick-hero-carousel__next:hover::before {
border-color: #9d7d4c;
}
.slick-hero-carousel__prev::before {
-webkit-transform: translate(-30%, -50%) rotate(135deg);
transform: translate(-30%, -50%) rotate(135deg);
}
.slick-hero-carousel__next::before {
-webkit-transform: translate(-70%, -50%) rotate(-45deg);
transform: translate(-70%, -50%) rotate(-45deg);
}
@media (min-width: 769px) {
.slick-hero-carousel .slick-list,
.slick-hero-carousel .slick-track {
height: auto;
}
.slick-hero-carousel .slick-slide > div {
height: auto;
}
}
/* ---- Fade-in keyframe (scoped name) ---- */
@-webkit-keyframes slickHeroFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slickHeroFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Override vendor slick-theme default which adds 30px bottom margin
Apply to hero carousel only (all screens) */
.slick-hero-carousel .slick-dotted.slick-slider,
.slick-hero-carousel__wrap.slick-dotted.slick-slider {
margin-bottom: 0 !important;
}
/* ==========================================================================
AEM Edit Mode Overrides
Remove full viewport height when editing in AEM so authors can
click and edit content inline without horizontal scrolling/overflow
========================================================================== */
.cq-Editable-dom .slick-hero-carousel__item {
height: auto !important;
min-height: 400px;
overflow: visible;
/* Override media query heights in edit mode for consistency */
}
@media (max-width: 1200px) {
.cq-Editable-dom .slick-hero-carousel__item {
height: auto !important;
min-height: 400px;
}
}
@media (max-width: 768px) {
.cq-Editable-dom .slick-hero-carousel__item {
height: auto !important;
min-height: 300px;
}
}
/* ==========================================================================
FOUC Prevention
Hide carousel content until Slick is initialized to prevent
visual stacking of slides on initial page load.
========================================================================== */
.slick-hero-carousel__wrap {
visibility: hidden;
opacity: 0;
}
.slick-hero-carousel__wrap.slick-initialized {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.back-button-black {
pointer-events: auto !important;
position: relative;
z-index: 10;
}
.btn.btn-back-black {
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
height: auto;
color: #333;
background: transparent;
border: none;
margin-bottom: 24px;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
text-transform: none;
border-radius: 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
text-decoration: none;
-webkit-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
.btn.btn-back-black svg {
width: 24px;
height: 40px;
fill: currentColor;
vertical-align: middle;
outline: none;
}
.btn.btn-back-black:hover {
color: #9d7d4c;
background: transparent;
text-decoration: none;
opacity: 0.8;
}
.btn.btn-back-black:focus {
outline: none !important;
}
.btn.btn-back-black:focus-visible {
outline: 2px solid #9d7d4c;
outline-offset: 2px;
}
.btn.btn-back-black:active {
color: #7e643d;
outline: none !important;
}
@media (max-width: 768px) {
.btn.btn-back-black {
margin-bottom: 16px;
}
}
.black-back-button {
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
height: auto;
color: #333;
background: transparent;
border: none;
margin-bottom: 24px;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
text-transform: none;
border-radius: 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
text-decoration: none;
-webkit-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
.black-back-button svg {
width: 24px;
height: 40px;
fill: currentColor;
vertical-align: middle;
outline: none;
}
.black-back-button:hover {
color: #9d7d4c;
background: transparent;
text-decoration: none;
opacity: 0.8;
}
.black-back-button:focus {
outline: none;
}
.black-back-button:focus-visible {
outline: 2px solid #9d7d4c;
outline-offset: 2px;
}
.black-back-button:active {
color: #7e643d;
outline: none !important;
}
@media (max-width: 768px) {
.black-back-button {
margin-bottom: 16px;
}
}
.contact_us_enquiry-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.contact_us_enquiry-form .contact-us-form-label-required {
color: #cc0000 !important;
font-weight: bold;
margin-left: 2px;
font-size: 1em;
}
.contact_us_enquiry-form .form-control,
.contact_us_enquiry-form .form-select {
border-width: 0 0 1px;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding-left: 5px;
}
.contact_us_enquiry-form label {
color: #84888c;
opacity: 1;
text-transform: capitalize;
padding-left: 0;
font-weight: 500;
}
.contact_us_enquiry-form .btn-primary {
margin-left: 32px;
}
@media (max-width: 768px) {
.contact_us_enquiry-form .btn-primary {
margin: 32px 0 0;
}
}
.contact_us_enquiry-form .form-check label {
font-size: 14px;
padding-left: 16px;
}
@media (max-width: 768px) {
.contact_us_enquiry-form .form-check label {
padding-left: 8px;
}
}
.contact_us_enquiry-form .form-check .form-check-input {
width: 24px;
height: 24px;
border-width: 2px;
border-radius: 0;
}
@media (max-width: 768px) {
.contact_us_enquiry-form .form-check .form-check-input {
width: 20px;
height: 20px;
}
}
.contact_us_enquiry-form .form-floating {
overflow: hidden;
}
.contact_us_enquiry-form .captcha-image {
height: 50px;
border: 1px solid #ccc;
}
.contact_us_enquiry-form .loading--hide {
display: none;
}
.contact_us_enquiry-form .loading--show {
display: inline-block;
}
/* Contact Form Component-Specific Button Styles */
/* Base Contact Form Button Styles */
.contact-form-btn {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: auto;
-webkit-box-shadow: none;
box-shadow: none;
text-transform: capitalize;
color: #9d7d4c;
border: 1px solid #9d7d4c;
border-radius: 2px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 12px 20px;
font-family: sigvar-medium;
font-size: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-decoration: none;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Primary Button Styles for Contact Form */
.contact-form-btn-primary {
color: #fff !important;
background: #9d7d4c !important;
border: none !important;
border-radius: 2px;
padding: 12px 20px;
margin-left: 32px;
font-family: sigvar-medium;
font-size: 18px;
text-transform: capitalize;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: auto;
-webkit-box-shadow: none;
box-shadow: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.contact-form-btn-primary {
margin: 32px 0 0;
}
}
/* Primary Button Hover Effects */
.contact-form-btn-primary:hover {
background: #8a6a42 !important;
color: #fff !important;
border: none !important;
}
/* Primary Button Focus/Active States */
.contact-form-btn-primary:focus,
.contact-form-btn-primary:active {
background: #8a6a42 !important;
color: #fff !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline: none;
}
/* Full Width Modifier for Contact Form Buttons */
.contact-form-btn-fwm {
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
/* Ensure primary button with full width maintains styling */
.contact-form-btn-primary.contact-form-btn-fwm {
color: #fff !important;
background: #9d7d4c !important;
border: none !important;
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
}
.contact-form-btn-primary.contact-form-btn-fwm:hover {
background: #8a6a42 !important;
color: #fff !important;
}
/* Responsive Design for Contact Form Buttons */
@media (max-width: 768px) {
.contact-form-btn,
.contact-form-btn-primary {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 0.5rem;
}
/* Specific styling for submit button - override fit-content with full width (mobile only) */
.contact-us-page .enquiry-content #submitButton.contact-form-btn-primary,
.contact-us-page .enquiry-content button[type=submit].contact-form-btn-primary,
.contact-us-page .enquiry-content .contact-form-btn-primary.contact-form-btn-fwm,
.contact-us-page .enquiry-content #submitButton.contact-form-btn-fwm {
margin-top: 32px !important;
width: 100% !important;
max-width: 100% !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
/* Full width buttons for academybutton component */
.academybutton .btn.btn-full-width-mobile,
.academybutton .btn.btn-fwm {
width: 100% !important;
}
}
/* High specificity override to ensure brown background */
.contact-us-page .enquiry-content .contact-form-btn-primary,
.contact-us-page .enquiry-content .contact-form-btn-primary.contact-form-btn-fwm {
color: #fff !important;
background: #9d7d4c !important;
border: none !important;
font-family: sigvar-medium !important;
}
.contact-us-page .enquiry-content .contact-form-btn-primary:hover,
.contact-us-page .enquiry-content .contact-form-btn-primary.contact-form-btn-fwm:hover {
background: #8a6a42 !important;
color: #fff !important;
}
/* Force Bootstrap utility classes for contact form only - scoped to prevent affecting other components */
.contact-us-page .enquiry-content .d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.contact-us-page .enquiry-content .align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.contact-us-page .enquiry-content .justify-content-between {
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
}
.contact-us-page .enquiry-content .flex-column {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
@media (min-width: 768px) {
.contact-us-page .enquiry-content .flex-md-row {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
}
.contact-us-page .enquiry-content .mt-3 {
margin-top: 1rem !important;
}
.contact-us-page .enquiry-content .mb-3 {
margin-bottom: 1rem !important;
}
.contact-us-page .enquiry-content .w-100 {
width: 100% !important;
}
/* Contact Us Layout Container - Functions like master column container but with 5:7 ratio */
.contact-us-layout-container[data-columns="2"] {
display: grid;
gap: 20px;
-webkit-transition: grid-template-columns 0.5s ease;
transition: grid-template-columns 0.5s ease;
transition: grid-template-columns 0.5s ease, -ms-grid-columns 0.5s ease;
/* 5:7 ratio = 5fr 7fr (fractional units) */
grid-template-columns: 5fr 7fr;
/* Add right padding to left side container (first column) */
/* Mobile responsive - single column like master column container */
}
.contact-us-layout-container[data-columns="2"] > *:first-child {
padding-right: 24px;
}
@media (max-width: 991px) {
.contact-us-layout-container[data-columns="2"] {
grid-template-columns: 1fr;
/* Apply the same width constraints as .header-container */
width: 90%;
margin-left: 5%;
margin-right: 5%;
/* Remove right padding on mobile since it's single column */
}
}
@media (max-width: 991px) and (max-width: 768px) {
.contact-us-layout-container[data-columns="2"] {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media (max-width: 991px) {
.contact-us-layout-container[data-columns="2"] > *:first-child {
padding-right: 0;
}
}
/* Animation support for Contact Us Layout Container - matches live site */
.contact-us-layout-container.animate__animated.animate__slow.animate__slideInUp {
-webkit-animation: slideInUp 2s ease !important;
animation: slideInUp 2s ease !important;
-webkit-animation-duration: 2s !important;
animation-duration: 2s !important;
-webkit-animation-timing-function: ease !important;
animation-timing-function: ease !important;
}
/* Prevent ALL child components in Contact Us Layout Container from animating individually */
.contact-us-layout-container {
/* Disable animations on all direct and nested child components */
/* Force disable any animate.css classes */
/* Disable animations on any component containers */
}
.contact-us-layout-container .title .cmp-title,
.contact-us-layout-container .text .cmp-text,
.contact-us-layout-container .academybutton [class^=primary-button-],
.contact-us-layout-container .image .cmp-image__image,
.contact-us-layout-container .article-image-card .container,
.contact-us-layout-container .cmp-carousel .cmp-carousel,
.contact-us-layout-container .mastercolumncontainer .container,
.contact-us-layout-container .container {
-webkit-animation: none !important;
animation: none !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-transform: none !important;
transform: none !important;
}
.contact-us-layout-container .animate__animated,
.contact-us-layout-container .animate__slideInUp,
.contact-us-layout-container .animate__slideInUp__slow,
.contact-us-layout-container .animate__slow,
.contact-us-layout-container .animate__fadeIn,
.contact-us-layout-container .animate__fadeInUp,
.contact-us-layout-container .animate__zoomIn {
-webkit-animation: none !important;
animation: none !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-transform: none !important;
transform: none !important;
}
.contact-us-layout-container .title > *,
.contact-us-layout-container .text > *,
.contact-us-layout-container .academybutton > *,
.contact-us-layout-container .image > *,
.contact-us-layout-container .article-image-card > *,
.contact-us-layout-container .mastercolumncontainer > * {
-webkit-animation: none !important;
animation: none !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-transform: none !important;
transform: none !important;
}
/* Bootstrap gap classes support for Contact Us Layout Container */
.contact-us-layout-container.g-lg-5 {
gap: 0; /* No gap between columns */
}
@media (max-width: 991px) {
.contact-us-layout-container.g-lg-5 {
gap: 0; /* No gap on mobile */
}
}
/* Force full-bleed layout inside .enquiry-content for screens < 992px */
@media (max-width: 991px) {
.contact-us-page .enquiry-content {
/* Ensure the enquiry-content itself occupies full width of its parent */
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* target the specific row/container classes requested: remove padding/margins and gaps */
.contact-us-page .enquiry-content .contact-us-layout-container,
.contact-us-page .enquiry-content .contact-us-layout-container.g-lg-5,
.contact-us-page .enquiry-content .row.contact-us-layout-container,
.contact-us-page .enquiry-content .row.contact-us-layout-container.g-lg-5,
.contact-us-page .enquiry-content .container.responsivegrid,
.contact-us-page .enquiry-content .container.responsivegrid .container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
--bs-gutter-x: 0 !important; /* if using Bootstrap gutters */
}
/* Remove padding on direct children (columns, mastercolumncontainer, etc.) */
.contact-us-page .enquiry-content .contact-us-layout-container > *,
.contact-us-page .enquiry-content .container.responsivegrid > *,
.contact-us-page .enquiry-content .row > * {
margin: 0 !important;
padding: 0 !important;
}
/* If there are utility padding/margin classes applied, force them off here */
.contact-us-page .enquiry-content [class*=p-] {
padding: 0 !important;
}
.contact-us-page .enquiry-content [class*=m-] {
margin-bottom: 0.125rem;
}
/* Ensure inner components expand to fill the container */
.contact-us-page .enquiry-content .contact-us-layout-container .mastercolumncontainer,
.contact-us-page .enquiry-content .contact-us-layout-container .container,
.contact-us-page .enquiry-content .container.responsivegrid .mastercolumncontainer,
.contact-us-page .enquiry-content .container.responsivegrid .container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
}
/* If the row has animate classes, still remove spacing but keep animation if desired elsewhere */
.contact-us-page .enquiry-content .row.animate__animated.animate__slow.animate__slideInUp {
margin: 0 !important;
padding: 0 !important;
}
}
/* Extra high-specificity overrides to remove Bootstrap gutters and column padding on mobile */
@media (max-width: 991px) {
/* Target contact-us layout variants including attribute selector used earlier */
.contact-us-page .enquiry-content .contact-us-layout-container,
.contact-us-page .enquiry-content .contact-us-layout-container[data-columns="2"],
.contact-us-page .enquiry-content .contact-us-layout-container.g-lg-5,
.contact-us-page .enquiry-content .row.contact-us-layout-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
--bs-gutter-x: 0 !important;
}
/* Remove any row negative margins and column padding that create gutters */
.contact-us-page .enquiry-content .row {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
--bs-gutter-x: 0 !important;
}
/* Remove padding on all column elements inside enquiry-content */
.contact-us-page .enquiry-content [class*=col-] {
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Specific container.responsivegrid handling (some markup shows nested containers) */
.contact-us-page .enquiry-content .container.responsivegrid,
.contact-us-page .enquiry-content .container.responsivegrid .container,
.contact-us-page .enquiry-content .container.responsivegrid > .container {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Force any mastercolumncontainer inner containers to be full-bleed */
.contact-us-page .enquiry-content .mastercolumncontainer,
.contact-us-page .enquiry-content .mastercolumncontainer > .container,
.contact-us-page .enquiry-content .mastercolumncontainer .container {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Remove utility padding/margin classes persisting (extra selector for common variants) */
.contact-us-page .enquiry-content .p-0,
.contact-us-page .enquiry-content .px-0,
.contact-us-page .enquiry-content .py-0,
.contact-us-page .enquiry-content .m-0,
.contact-us-page .enquiry-content .mx-0,
.contact-us-page .enquiry-content .my-0 {
padding: 0 !important;
margin: 0 !important;
}
}
a.email-hover {
color: rgb(77, 77, 77);
font-family: gothammedium;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
text-decoration: none;
}
a.email-hover:hover {
color: #9d7d4c; /* change to whatever hover color you want */
}
.dont-find {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #0e1c42), to(#0e1c42));
background: linear-gradient(to bottom, transparent, transparent 50%, #0e1c42 50%, #0e1c42);
color: #fff;
z-index: 100;
}
.dont-find.show {
background: #0e1c42;
}
.dont-find__inner {
width: 100% !important;
padding: 0 15px !important;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.dont-find__inner {
padding: 0 12px !important;
}
}
@media (min-width: 576px) {
.dont-find__inner {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.dont-find__inner {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.dont-find__inner {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.dont-find__inner {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.dont-find__inner {
max-width: 1320px !important;
}
}
.dont-find .collapse {
width: calc(100% - 68px);
}
@media (max-width: 768px) {
.dont-find .collapse {
width: 100%;
}
}
.dont-find__content {
padding: 20px 0;
}
.dont-find__content h3, .dont-find__content .h3 {
font-size: 26px;
font-family: sigvar-medium;
color: #fff;
}
@media (max-width: 992px) {
.dont-find__content h3, .dont-find__content .h3 {
font-size: 22px;
}
}
.dont-find__content p {
margin-bottom: 0;
}
.dont-find a.btn {
border-color: #fff;
color: #fff;
background: none;
}
@media (max-width: 768px) {
.dont-find a.btn {
margin-bottom: 20px;
}
}
.dont-find a.btn.btn-fwm {
padding: 12px 20px;
font-family: sigvar-medium;
font-size: 18px;
border-radius: 2px;
}
@media (max-width: 768px) {
.dont-find a.btn.btn-fwm {
width: 100%;
}
}
.dont-find a.btn.btn-dont-find {
font-size: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #0e1c42;
padding: 0;
margin-right: 24px;
}
.dont-find a.btn.btn-dont-find::after {
content: "";
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
width: 10px;
height: 10px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin-top: 3px;
}
.dont-find a.btn.btn-dont-find.active::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 0;
margin-bottom: 3px;
}
/* Find Us Component Styles */
/* Body styles for contact us page */
.contact-us-page body {
letter-spacing: -0.011em;
text-align: var(--bs-body-text-align);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.contact-us-page .find-us .where {
color: #fff !important;
background: #0e1c42;
padding-top: 120px;
padding-bottom: 120px;
opacity: 0;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.contact-us-page .find-us .where * {
color: #fff !important;
}
.contact-us-page .find-us .find-us__item {
margin-bottom: 2rem;
}
.contact-us-page .find-us .find-us__item h3, .contact-us-page .find-us .find-us__item .h3 {
color: #fff !important;
font-weight: normal;
margin-bottom: 1rem;
font-family: sigvar-medium !important;
}
.contact-us-page .find-us .find-us__item p {
color: #fff !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
line-height: 1.6;
}
.contact-us-page .find-us h2, .contact-us-page .find-us .h2 {
color: #fff !important;
font-size: 32px;
font-weight: normal;
margin-bottom: 2rem;
font-family: sigvar-medium !important;
}
.contact-us-page .find-us .where h2, .contact-us-page .find-us .where .h2 {
color: #fff !important;
font-family: sigvar-medium !important;
}
.contact-us-page .find-us .where h3, .contact-us-page .find-us .where .h3 {
color: #fff !important;
font-weight: normal;
margin-bottom: 1rem;
font-family: sigvar-medium !important;
}
/* Find Us Component Button Styles */
.find-us-btn-white,
.find-us-btn-white.find-us-btn-icon-right,
.find-us-btn-white.find-us-btn-icon-right.find-us-btn-fwm,
.contact-us-page .find-us .where .find-us-btn-white,
.contact-us-page .find-us .where .find-us-btn-icon-right,
.contact-us-page .find-us .where .find-us-btn-fwm {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-transform: capitalize !important;
color: #fff !important;
border: 1px solid #fff !important;
border-radius: 2px !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
padding: 12px 20px !important;
font-family: sigvar-medium !important;
font-size: 18px !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
background: transparent !important;
text-decoration: none !important;
-webkit-transition: all 0.3s ease !important;
transition: all 0.3s ease !important;
position: relative !important;
}
/* Arrow icon for find-us button */
.find-us-btn-white::after,
.find-us-btn-white.find-us-btn-icon-right::after,
.find-us-btn-white.find-us-btn-icon-right.find-us-btn-fwm::after {
content: "→" !important;
font-size: 18px !important;
font-weight: bold !important;
margin-left: 8px !important;
color: #fff !important;
display: inline-block !important;
}
/* Find Us Button hover effects */
.find-us-btn-white:hover,
.find-us-btn-white.find-us-btn-icon-right:hover,
.find-us-btn-white.find-us-btn-icon-right.find-us-btn-fwm:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
border-color: #fff !important;
text-decoration: none !important;
}
/* Map Container */
.contact-us-page .find-us iframe {
width: 100%;
height: 100%;
min-height: 640px;
border: 0;
}
/* Find Us Content Padding - Component Specific */
/* Desktop padding is applied via JS (find-us-padding.js) */
/* Mobile fallback only */
.find-us-content-padding {
padding-left: 20px;
padding-right: 20px;
opacity: 0;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-us-page .find-us .where {
padding-top: 60px;
padding-bottom: 60px;
}
.contact-us-page .find-us h2, .contact-us-page .find-us .h2 {
font-size: 2rem;
}
/* Make the find-us component's button full-width on small screens and
hide its arrow pseudo-element. Scope the selectors to the component so
other buttons elsewhere are not affected. */
.contact-us-page .find-us .find-us-btn-white,
.contact-us-page .find-us .find-us-btn-white.find-us-btn-icon-right,
.contact-us-page .find-us .find-us-btn-white.find-us-btn-icon-right.find-us-btn-fwm {
width: 100% !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 1rem;
}
/* Remove the arrow (::after) on small screens for the find-us button only */
.contact-us-page .find-us .find-us-btn-white::after,
.contact-us-page .find-us .find-us-btn-white.find-us-btn-icon-right::after,
.contact-us-page .find-us .find-us-btn-white.find-us-btn-icon-right.find-us-btn-fwm::after {
display: none !important;
content: none !important;
}
.contact-us-page .find-us iframe {
min-height: 400px;
}
}
/* Helper container used only for padding calculations in JS. Mirrors .cmp-container--body */
.finduscalc {
width: 100% !important;
padding-right: 12px !important;
padding-left: 12px !important;
margin-right: auto !important;
margin-left: auto !important;
}
@media (min-width: 576px) {
.finduscalc {
max-width: 540px !important;
}
}
@media (min-width: 768px) {
.finduscalc {
max-width: 720px !important;
}
}
@media (min-width: 992px) {
.finduscalc {
max-width: 960px !important;
}
}
@media (min-width: 1200px) {
.finduscalc {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.finduscalc {
max-width: 1320px !important;
}
}
/* Target find-us h2 at tablet and smaller widths (<= 992px) */
@media (max-width: 992px) {
.contact-us-page .find-us h2,
.contact-us-page .find-us .h2 {
font-size: 24px;
line-height: 29px;
}
}
/* Three Column Layout Component - Flexbox layout with evenly distributed spacing */
/* Three Column Layout Container - Flexbox with justify-content-evenly */
.three-column-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0; /* No gap - space-evenly handles spacing */
/* Horizontal layouts: remove top/bottom padding; keep side padding */
padding: 0 20px;
max-width: 1320px;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
/* Each column wrapper - NOT equal width, content-based */
}
.three-column-container .three-column-item {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto; /* Don't grow or shrink, use content width */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* Parsys within each column */
}
.three-column-container .three-column-item > .parsys {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* Responsive breakpoints */
/* Mobile (max-width: 768px) - Stack vertically */
@media only screen and (max-width: 768px) {
.three-column-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.three-column-container .three-column-item {
width: 100%;
max-width: 320px; /* allow slightly larger for uniform images */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* Force images to a uniform size and vertical layout on small screens */
/* Column-specific image widths for mobile - overrides the uniform 180px above */
}
.three-column-container .three-column-item img {
width: 180px; /* uniform image width on mobile */
height: auto;
display: block;
margin: 0 auto;
margin-top: 0; /* ensure no unexpected top spacing */
-o-object-fit: contain;
object-fit: contain;
}
.three-column-container .three-column-item.column-1 img {
width: 210px;
}
.three-column-container .three-column-item.column-2 img {
width: 150px;
}
.three-column-container .three-column-item.column-3 img {
width: 180px;
}
/* Additional selector to match your example and remove top margin if present */
.our-awards .content-text .special img {
margin-top: 0;
}
}
/* Tablet and Desktop (768px+) - Horizontal with space-evenly */
@media only screen and (min-width: 768px) {
.three-column-container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* Horizontal layouts: remove top/bottom padding; keep side padding */
padding: 0 25px;
}
/* Fixed column widths matching requested sizes (content-based widths) */
.three-column-container .three-column-item.column-1 {
width: 210px; /* first column */
-webkit-box-flex: 0;
-ms-flex: 0 0 210px;
flex: 0 0 210px;
}
.three-column-container .three-column-item.column-2 {
width: 150px; /* second column */
-webkit-box-flex: 0;
-ms-flex: 0 0 150px;
flex: 0 0 150px;
}
.three-column-container .three-column-item.column-3 {
width: 180px; /* third column */
-webkit-box-flex: 0;
-ms-flex: 0 0 180px;
flex: 0 0 180px;
}
/* Ensure images and parsys content fit the fixed column widths */
.three-column-container .three-column-item > .parsys,
.three-column-container .three-column-item img {
width: 100%;
height: auto;
max-width: 100%;
display: block;
}
}
/* Desktop (992px+) */
@media only screen and (min-width: 992px) {
.three-column-container {
/* Remove top/bottom padding for hero at desktop and larger */
padding: 0 30px;
}
}
/* Large Desktop (1200px+) */
@media only screen and (min-width: 1200px) {
.three-column-container {
max-width: 1140px;
}
}
/* XL Desktop (1400px+) */
@media only screen and (min-width: 1400px) {
.three-column-container {
max-width: 1320px;
}
}
/* Animation support for Three Column Layout Container */
.three-column-container.animate__animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.three-column-container.animate__slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.three-column-container.animate__slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation: slideInUp 2s ease !important;
animation: slideInUp 2s ease !important;
-webkit-animation-duration: 2s !important;
animation-duration: 2s !important;
-webkit-animation-timing-function: ease !important;
animation-timing-function: ease !important;
visibility: visible;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/* Remove all padding when the container is animated (explicit override) */
/* Base: remove all padding when the container is animated (explicit override) */
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Width rules scoped by breakpoint */
/* Big screens: fixed width 720px (>= 992px) */
@media only screen and (min-width: 992px) {
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: 720px !important;
max-width: 720px !important;
}
}
/* Intermediate screens: fixed width 696px (>=768px and <992px) */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: 696px !important;
max-width: 696px !important;
}
}
/* Small screens: fixed width 516px (<= 767.98px) */
@media only screen and (max-width: 767.98px) {
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: 516px !important;
max-width: 516px !important;
}
}
/* User-requested precise breakpoint rules */
/* Below 576px: no fixed width, full width inside container, remove extra side padding/margin */
@media only screen and (max-width: 575.98px) {
.three-column-layout-page,
.three-column-content,
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: auto !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure the individual items fill the available space */
.three-column-container .three-column-item {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* From 576px up to 767px: fixed component width 516px (inclusive 576, upto 767) */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
.three-column-layout-page,
.three-column-content,
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: 516px !important;
max-width: 516px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.three-column-container .three-column-item {
/* allow items to size within the 516px container */
max-width: 100% !important;
}
}
/* From 768px up to 991.98px (>=768 and <992): fixed component width 696px */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.three-column-layout-page,
.three-column-content,
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: 696px !important;
max-width: 696px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.three-column-container .three-column-item {
max-width: 100% !important;
}
}
/* From 992px and above: fixed component width 720px */
@media only screen and (min-width: 992px) {
.three-column-layout-page,
.three-column-content,
.three-column-container.animate__animated.animate__slow.animate__slideInUp {
width: 720px !important;
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.three-column-container .three-column-item {
max-width: 100% !important;
}
}
/* Prevent ALL child components in Three Column Layout Container from animating individually */
.three-column-container {
/* Disable animations on all direct and nested child components */
/* Force disable any animate.css classes */
/* Disable animations on any component containers */
}
.three-column-container .title .cmp-title,
.three-column-container .text .cmp-text,
.three-column-container .academybutton [class^=primary-button-],
.three-column-container .image .cmp-image__image,
.three-column-container .article-image-card .container,
.three-column-container .cmp-carousel .cmp-carousel,
.three-column-container .mastercolumncontainer .container,
.three-column-container .container {
-webkit-animation: none !important;
animation: none !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-transform: none !important;
transform: none !important;
}
.three-column-container .animate__animated,
.three-column-container .animate__slideInUp,
.three-column-container .animate__slideInUp__slow,
.three-column-container .animate__slow,
.three-column-container .animate__fadeIn,
.three-column-container .animate__fadeInUp,
.three-column-container .animate__zoomIn {
-webkit-animation: none !important;
animation: none !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-transform: none !important;
transform: none !important;
}
.three-column-container .title > *,
.three-column-container .text > *,
.three-column-container .academybutton > *,
.three-column-container .image > *,
.three-column-container .article-image-card > *,
.three-column-container .mastercolumncontainer > * {
-webkit-animation: none !important;
animation: none !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-transform: none !important;
transform: none !important;
}
/* Image styling within columns */
.three-column-container .three-column-item {
/* Center images within each column */
}
.three-column-container .three-column-item img {
max-width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.three-column-container .three-column-item img:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.three-column-container .three-column-item .image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* Specific styling for award images or logos - center and scale */
.three-column-container.awards .three-column-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.three-column-container.awards .three-column-item img {
display: block;
margin: 0 auto;
}
/* Additional utility for content alignment */
.three-column-layout-page .content-text {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 40px;
}
@media (max-width: 767px) {
.three-column-layout-page .content-text {
max-width: 90%;
margin-bottom: 30px;
}
}
/*
//== Container main content style, used on page template
main.container {
padding: .5em 1em;
}
*/
/*
//== XF Footer style, used on page template
footer.experiencefragment {
padding: .5em 1em;
border-top: 1px solid $color-foreground;
@media (prefers-color-scheme: dark) {
border-color: $color-foreground-dark;
}
.cmp-separator__horizontal-rule {
margin: 0;
border: 0;
}
} */
/*
//== XF Header style, used on page template
header.experiencefragment {
padding: .5em 1em;
border-bottom: 1px solid $color-foreground;
@media (prefers-color-scheme: dark) {
border-bottom-color: $color-foreground-dark;
}
a {
color: $color-foreground;
text-decoration: none;
@media (prefers-color-scheme: dark) {
color: $color-foreground-dark;
}
&:hover,
&:focus {
color: $color-link;
text-decoration: underline;
@media (prefers-color-scheme: dark) {
color: $color-link-dark;
}
}
}
//== Grid layout
.cmp-container {
display: grid;
grid-template-columns: 4fr 1fr 1fr;
}
//== Navigation
.cmp-navigation__group {
margin: 0;
padding: 0;
list-style: none;
}
.cmp-navigation__item--level-0 {
display: grid;
grid-template-columns: 1fr 3fr;
& > .cmp-navigation__group {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
.cmp-navigation__item-link {
display: block;
}
.cmp-navigation__item--active > .cmp-navigation__item-link {
font-weight: bold;
}
//== Language Navigation
.cmp-languagenavigation {
position: relative;
&::before {
content: " ";
display: block;
height: 1.5em;
$color-foreground-rgb: 'rgb('+red($color-foreground)+','+green($color-foreground)+','+blue($color-foreground)+')';
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
@media (prefers-color-scheme: dark) {
$color-background-rgb: 'rgb('+red($color-foreground-dark)+','+green($color-foreground-dark)+','+blue($color-foreground-dark)+')';
background-image: url('data:image/svg+xml;utf8,');
}
}
& > .cmp-languagenavigation__group {
visibility: hidden;
transition-delay: .5s;
position: absolute;
top: 34px;
width: 20em;
padding: 0 8px;
border: 1px solid $color-foreground;
border-top: 0;
background: $color-background;
@media (prefers-color-scheme: dark) {
border-color: $color-foreground-dark;
background: $color-background-dark;
}
}
&:hover > .cmp-languagenavigation__group {
visibility: visible;
transition-delay: 0s;
}
}
.cmp-languagenavigation__group {
margin: 0;
padding: 0;
list-style: none;
}
.cmp-languagenavigation__item-title {
font-size: x-small;
text-transform: uppercase;
}
.cmp-languagenavigation__item--level-0 {
margin-bottom: .5em;
}
.cmp-languagenavigation__item--level-1 {
display: inline;
}
.cmp-languagenavigation__item--level-1:not(:first-child)::before {
content: " | ";
}
.cmp-languagenavigation__item--active > .cmp-languagenavigation__item-link {
font-weight: bold;
}
//== Search
.cmp-search__field {
display: flex;
margin: -3px 0;
}
.cmp-search__input {
height: 26px;
}
}
*/