/* =========================================================
GOOGLE FONTS
========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap");
/* =========================================================
ROOT VARIABLES
========================================================= */
:root {
--saacademy-navy: #082b5c;
--saacademy-blue: #1769c2;
--saacademy-pink: #e91e73;
--saacademy-white: #ffffff;
--saacademy-text: #102d52;
--saacademy-muted: #6d7e94;
--saacademy-border: #e6edf5;
--saacademy-pink-light: #fff1f7;
--saacademy-header-shadow:
0 12px 35px rgba(8, 43, 92, 0.13);
}
html {
scroll-behavior: smooth;
}
/* =========================================================
BODY
========================================================= */
body {
margin: 0;
padding: 0;
font-family: "Manrope", sans-serif;
color: var(--sk-header-text);
background: var(--sk-header-white);
overflow-x: hidden;
}
@media(max-width:993px)
{
body{text-align: center;}
}
a{text-decoration: none;}
img { display: block; max-width: 100%;}
h1, h2, h3, h4, h5, h6 {
font-family: "Manrope", sans-serif;
font-weight:500;
margin: 0;
}
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 80%; max-width: 100%; }
@media (max-width: 1401px) {
.container {
width: 80%;
}
}
@media (max-width: 1204px) {
.container {
width: 95%;
}
}
figcaption, figure{margin: 0; padding: 0;}
.cr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* =========================================================
BODY
========================================================= */
body {
margin: 0;
font-family:
"Manrope",
sans-serif;
color:
var(--saacademy-text);
}
/* =========================================================
HEADER
========================================================= */
.saacademy-header {
position: relative;
width: 100%;
z-index: 1050;
background:
var(--saacademy-white);
transition:
box-shadow 0.45s ease,
transform 0.45s ease;
}
/* =========================================================
HEADER CONTAINER
========================================================= */
.saacademy-header-container {
width: 100%;
max-width: 1450px;
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
}
/* =========================================================
TOP BAR
========================================================= */
.saacademy-topbar {
height: 36px;
background:
linear-gradient(
90deg,
var(--saacademy-navy),
#0b4b91
);
transition:
height 0.4s ease;
}
.saacademy-topbar-content {
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
transition:
height 0.4s ease;
}
/* =========================================================
TOP BAR LEFT
========================================================= */
.saacademy-topbar-left {
display: flex;
align-items: center;
gap: 18px;
}
.saacademy-topbar-link {
display: inline-flex;
align-items: center;
gap: 7px;
color:
#ffffff;
text-decoration: none;
font-family:
"Manrope",
sans-serif;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
transition:
color 0.25s ease;
}
.saacademy-topbar-link:hover {
color:
#ffb2d2;
}
.saacademy-topbar-link i {
font-size: 11px;
}
.saacademy-topbar-separator {
color:
rgba(255,255,255,0.35);
}
/* =========================================================
TOP BAR SOCIAL
========================================================= */
.saacademy-topbar-social {
display: flex;
align-items: center;
gap: 8px;
}
.saacademy-topbar-social a {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color:
#ffffff;
text-decoration: none;
font-size: 11px;
transition:
transform 0.3s ease,
background-color 0.3s ease;
}
.saacademy-topbar-social a:hover {
background:
var(--saacademy-pink);
transform:
translateY(-2px);
}
/* =========================================================
MAIN NAVBAR
========================================================= */
.saacademy-navbar {
min-height: 88px;
padding:10px 0 !important;
background:
#ffffff;
transition:
min-height 0.45s ease;
}
/* =========================================================
LOGO
========================================================= */
.saacademy-brand {
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.saacademy-logo {
/* width: 255px; */
height: auto;
display: block;
transition:
width 0.45s ease;
}
/* =========================================================
SINGLE MENU
========================================================= */
.saacademy-single-menu {
display: flex;
align-items: center;
margin-left: auto;
}
/* =========================================================
NAVIGATION LIST
========================================================= */
.saacademy-navigation-list {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* =========================================================
NAVIGATION ITEM
========================================================= */
.saacademy-navigation-list .nav-item {
position: relative;
}
/* =========================================================
NAVIGATION LINK
========================================================= */
.saacademy-navigation-list .nav-link {
position: relative;
min-height: 88px;
padding:
0 14px !important;
display: flex !important;
align-items: center;
gap: 7px;
color:
var(--saacademy-text) !important;
font-family:
"Manrope",
sans-serif;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
transition:
color 0.3s ease,
min-height 0.45s ease;
}
/* =========================================================
NAVIGATION UNDERLINE
========================================================= */
.saacademy-navigation-list .nav-link::before {
content: "";
position: absolute;
left: 13px;
right: 13px;
bottom: 18px;
height: 3px;
border-radius: 20px;
background:
var(--saacademy-pink);
transform:
scaleX(0);
transform-origin:
center;
transition:
transform 0.3s ease;
}
.saacademy-navigation-list .nav-link:hover,
.saacademy-navigation-list .nav-link.active {
color:
var(--saacademy-pink) !important;
}
.saacademy-navigation-list .nav-link:hover::before,
.saacademy-navigation-list .nav-link.active::before {
transform:
scaleX(1);
}
/* =========================================================
BOOTSTRAP DROPDOWN
DESKTOP
========================================================= */
@media (min-width: 992px) {
.saacademy-navigation-list
.dropdown {
position: relative;
}
/* ---------------------------------------------
BOOTSTRAP DROPDOWN MENU
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-menu {
min-width: 245px;
margin-top: 0;
padding: 10px;
border: 0;
border-radius: 15px;
background:
#ffffff;
box-shadow:
0 20px 50px
rgba(8, 43, 92, 0.17);
}
/* ---------------------------------------------
BOOTSTRAP DROPDOWN ITEMS
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-item {
min-height: 48px;
padding:
8px 12px !important;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 11px;
border-radius: 9px;
color:
var(--saacademy-text);
font-family:
"Manrope",
sans-serif;
font-size: 14px;
font-weight: 600;
transition:
color 0.25s ease,
background-color 0.25s ease,
padding-left 0.25s ease;
}
/* ---------------------------------------------
DROPDOWN ITEM ICON
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-item i {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
background:
var(--saacademy-pink-light);
color:
var(--saacademy-pink);
font-size: 14px;
}
/* ---------------------------------------------
DROPDOWN ITEM HOVER
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-item:hover {
color:
var(--saacademy-pink);
background:
#fff3f8;
padding-left:
17px !important;
}
/* ---------------------------------------------
BOOTSTRAP DEFAULT ARROW
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-toggle::after {
display: inline-block;
margin-left: 6px;
vertical-align: middle;
content: "";
border-top:
0.35em solid currentColor;
border-right:
0.35em solid transparent;
border-bottom:
0;
border-left:
0.35em solid transparent;
transition:
transform 0.3s ease;
}
/* ---------------------------------------------
ARROW WHEN BOOTSTRAP DROPDOWN IS OPEN
--------------------------------------------- */
.saacademy-navigation-list
.dropdown.show
.dropdown-toggle::after {
transform:
rotate(180deg);
}
/* ---------------------------------------------
DESKTOP HOVER SUPPORT
Bootstrap dropdown remains the component
--------------------------------------------- */
/* .saacademy-navigation-list
.dropdown:hover
> .dropdown-menu {
display: block;
} */
.saacademy-navigation-list
.dropdown:hover
> .dropdown-toggle {
color:
var(--saacademy-pink) !important;
}
.saacademy-navigation-list
.dropdown:hover
> .dropdown-toggle::after {
transform:
rotate(180deg);
}
}
/* =========================================================
ENQUIRE BUTTON
========================================================= */
.saacademy-enquire-item {
margin-left:
12px;
}
.saacademy-enquire-button {
min-height:
46px;
padding:
0 21px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
10px;
border-radius:
50px;
color:
#ffffff;
background:
var(--saacademy-pink);
text-decoration:
none;
font-family:
"Manrope",
sans-serif;
font-size:
13px;
font-weight:
700;
box-shadow:
0 8px 20px
rgba(233, 30, 115, 0.22);
transition:
background-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-enquire-button:hover {
color:
#ffffff;
background:
var(--saacademy-navy);
transform:
translateY(-2px);
box-shadow:
0 10px 25px
rgba(8, 43, 92, 0.22);
}
.saacademy-enquire-button i {
transition:
transform 0.3s ease;
}
.saacademy-enquire-button:hover i {
transform:
translateX(4px);
}
/* =========================================================
MOBILE TOGGLER
========================================================= */
.saacademy-toggler {
width:
50px;
height:
46px;
padding:
0 !important;
border:
0 !important;
border-radius:
12px;
background:
var(--saacademy-navy);
display:
none;
align-items:
center;
justify-content:
center;
flex-direction:
column;
gap:
5px;
box-shadow:
0 7px 20px
rgba(8, 43, 92, 0.18);
transition:
background-color 0.3s ease,
transform 0.3s ease;
}
.saacademy-toggler:hover {
background:
var(--saacademy-pink);
transform:
translateY(-2px);
}
.saacademy-toggler-line {
width:
23px;
height:
2px;
border-radius:
20px;
background:
#ffffff;
transition:
width 0.3s ease,
transform 0.3s ease;
}
.saacademy-toggler-line:nth-child(2) {
width:
17px;
}
.saacademy-toggler:hover
.saacademy-toggler-line:nth-child(2) {
width:
23px;
}
/* =========================================================
MOBILE MENU HEADER
========================================================= */
.saacademy-mobile-menu-header {
display:
none;
}
.saacademy-mobile-logo img {
width:
190px;
height:
auto;
display:
block;
}
.saacademy-mobile-close {
width:
43px;
height:
43px;
padding:
0;
border:
0;
border-radius:
50%;
display:
flex;
align-items:
center;
justify-content:
center;
background:
var(--saacademy-navy);
color:
#ffffff;
font-size:
17px;
transition:
background-color 0.3s ease,
transform 0.3s ease;
}
.saacademy-mobile-close:hover {
background:
var(--saacademy-pink);
transform:
rotate(90deg);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991.98px) {
/* ---------------------------------------------
HEADER CONTAINER
--------------------------------------------- */
.saacademy-header-container {
padding-left:
18px;
padding-right:
18px;
}
/* ---------------------------------------------
HIDE TOP BAR
--------------------------------------------- */
.saacademy-topbar {
display:
none;
}
/* ---------------------------------------------
MAIN NAVBAR
--------------------------------------------- */
.saacademy-navbar {
min-height:
76px;
}
/* ---------------------------------------------
LOGO
--------------------------------------------- */
.saacademy-logo {
width:
205px;
}
/* ---------------------------------------------
TOGGLER
--------------------------------------------- */
.saacademy-toggler {
display:
flex;
}
/* ---------------------------------------------
SAME MENU BECOMES TOP OFFCANVAS
--------------------------------------------- */
.saacademy-single-menu {
position:
fixed;
top:
0;
left:
0;
right:
0;
width:
100%;
max-height:
100vh;
overflow-y:
auto;
display:
block;
margin:
0;
padding:
0;
background:
#ffffff;
border-radius:
0 0 28px 28px;
box-shadow:
0 20px 60px
rgba(8, 43, 92, 0.20);
transform:
translateY(-105%);
visibility:
hidden;
opacity:
0;
transition:
transform 0.45s
cubic-bezier(0.77, 0, 0.175, 1),
opacity 0.3s ease,
visibility 0.45s ease;
z-index:
2000;
}
/* ---------------------------------------------
MOBILE MENU OPEN
--------------------------------------------- */
.saacademy-single-menu.saacademy-mobile-open {
transform:
translateY(0);
visibility:
visible;
opacity:
1;
}
/* ---------------------------------------------
MOBILE MENU HEADER
--------------------------------------------- */
.saacademy-mobile-menu-header {
min-height:
80px;
padding:
14px 20px;
display:
flex;
align-items:
center;
justify-content:
space-between;
border-bottom:
1px solid
var(--saacademy-border);
}
/* ---------------------------------------------
SAME NAVIGATION LIST
--------------------------------------------- */
.saacademy-navigation-list {
display:
block;
padding:
12px 20px 25px;
}
/* ---------------------------------------------
NAVIGATION ITEM
--------------------------------------------- */
.saacademy-navigation-item {
border-bottom:
1px solid
var(--saacademy-border);
}
/* ---------------------------------------------
NAVIGATION LINK
--------------------------------------------- */
.saacademy-navigation-list .nav-link {
min-height:
58px;
padding:
0 !important;
display:
flex !important;
align-items:
center;
justify-content:
space-between;
font-size:
16px;
}
/* Remove desktop underline */
.saacademy-navigation-list .nav-link::before {
display:
none;
}
.saacademy-navigation-list .nav-link.active {
color:
var(--saacademy-pink) !important;
}
/* ---------------------------------------------
BOOTSTRAP MOBILE DROPDOWN
--------------------------------------------- */
.saacademy-navigation-list
.dropdown {
position:
static;
}
.saacademy-navigation-list
.dropdown-menu {
position:
static !important;
width:
100%;
min-width:
0;
margin:
0 0 12px !important;
padding:
5px 0 5px 15px;
border:
0;
border-left:
2px solid
var(--saacademy-pink);
border-radius:
0;
box-shadow:
none;
background:
transparent;
}
/* ---------------------------------------------
BOOTSTRAP MOBILE DROPDOWN ITEM
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-item {
min-height:
47px;
padding:
7px 10px !important;
display:
flex;
align-items:
center;
gap:
11px;
border-radius:
8px;
color:
var(--saacademy-text);
font-family:
"Manrope",
sans-serif;
font-size:
14px;
font-weight:
600;
}
/* ---------------------------------------------
MOBILE DROPDOWN ICON
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-item i {
width:
29px;
height:
29px;
display:
flex;
align-items:
center;
justify-content:
center;
flex-shrink:
0;
border-radius:
8px;
background:
var(--saacademy-pink-light);
color:
var(--saacademy-pink);
font-size:
13px;
}
/* ---------------------------------------------
MOBILE DROPDOWN HOVER
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-item:hover {
color:
var(--saacademy-pink);
background:
#fff3f8;
}
/* ---------------------------------------------
BOOTSTRAP ARROW MOBILE
--------------------------------------------- */
.saacademy-navigation-list
.dropdown-toggle::after {
margin-left:
auto;
transition:
transform 0.3s ease;
}
.saacademy-navigation-list
.dropdown.show
.dropdown-toggle::after {
transform:
rotate(180deg);
}
/* ---------------------------------------------
ENQUIRE BUTTON
--------------------------------------------- */
.saacademy-enquire-item {
margin:
22px 0 0;
border:
0;
}
.saacademy-enquire-button {
width:
100%;
min-height:
54px;
font-size:
15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.saacademy-navbar {
min-height:
70px;
}
.saacademy-logo {
width:
185px;
}
.saacademy-toggler {
width:
46px;
height:
43px;
}
.saacademy-mobile-logo img {
width:
175px;
}
.saacademy-mobile-menu-header {
min-height:
73px;
padding:
12px 18px;
}
.saacademy-navigation-list {
padding-left:
18px;
padding-right:
18px;
}
}
/* =========================================================
BODY LOCK WHEN MOBILE MENU OPEN
========================================================= */
body.saacademy-menu-active {
overflow:
hidden;
}
/* =========================================================
SCROLLED HEADER
========================================================= */
.saacademy-header.saacademy-header-scrolled {
position:
fixed;
top:
0;
left:
0;
right:
0;
box-shadow:
var(--saacademy-header-shadow);
animation:
saacademyHeaderAppear
0.4s ease forwards;
}
/* =========================================================
HEADER APPEAR ANIMATION
========================================================= */
@keyframes saacademyHeaderAppear {
from {
transform:
translateY(-100%);
}
to {
transform:
translateY(0);
}
}
/* =========================================================
SCROLLED TOP BAR
========================================================= */
.saacademy-header-scrolled
.saacademy-topbar {
height:
28px;
display:
none;
}
.saacademy-header-scrolled
.saacademy-topbar-content {
height:
28px;
}
.saacademy-header-scrolled
.saacademy-topbar-link {
font-size:
10px;
}
/* =========================================================
SCROLLED MAIN NAVBAR
========================================================= */
.saacademy-header-scrolled
.saacademy-navbar {
min-height:
66px;
padding: 0 !important;
}
/* =========================================================
SCROLLED LOGO
========================================================= */
.saacademy-header-scrolled
.saacademy-logo {
width:
195px;
}
/* =========================================================
SCROLLED NAVIGATION
========================================================= */
.saacademy-header-scrolled
.saacademy-navigation-list .nav-link {
min-height:
66px;
}
/* =========================================================
SCROLLED UNDERLINE
========================================================= */
.saacademy-header-scrolled
.saacademy-navigation-list .nav-link::before {
bottom:
10px;
}
/* =========================================================
MOBILE SCROLLED HEADER
========================================================= */
@media (max-width: 991.98px) {
.saacademy-header-scrolled
.saacademy-navbar {
min-height:
70px;
}
.saacademy-header-scrolled
.saacademy-logo {
width:
185px;
}
}
/* =========================================================
SA ACADEMY HERO
========================================================= */
.saacademy-hero {
width: 100%;
overflow: hidden;
background: #ffffff;
}
/* =========================================================
SLIDE
========================================================= */
.saacademy-hero-slide {
position: relative;
width: 100%;
overflow: hidden;
background: #ffffff;
}
/* =========================================================
IMAGE
IMPORTANT:
NATURAL RATIO - NEVER CROP
========================================================= */
.saacademy-hero-bg {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
object-position: center;
margin: 0;
padding: 0;
}
/* =========================================================
OVERLAY COMPLETELY REMOVED
========================================================= */
.saacademy-hero-overlay {
display: none !important;
}
/* =========================================================
CONTENT CONTAINER
========================================================= */
.saacademy-hero-container {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-left: clamp(45px, 6vw, 110px);
padding-right: clamp(45px, 6vw, 110px);
z-index: 5;
}
/* =========================================================
CONTENT
========================================================= */
.saacademy-hero-content {
width: min(47%, 620px);
padding: 0;
margin: 0;
}
/* =========================================================
EYEBROW
========================================================= */
.saacademy-hero-eyebrow {
margin-bottom: clamp(10px, 1.2vw, 20px);
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: clamp(10px, 0.85vw, 15px);
font-weight: 800;
letter-spacing: clamp(2px, 0.28vw, 5px);
line-height: 1.4;
}
.saacademy-hero-eyebrow span {
margin-left: 6px;
margin-right: 6px;
color: #ed176b;
}
/* =========================================================
PINK LINE
========================================================= */
.saacademy-hero-line {
width: clamp(38px, 3.5vw, 55px);
height: 4px;
margin-bottom: clamp(12px, 1.5vw, 22px);
border-radius: 20px;
background: #ed176b;
}
/* =========================================================
TITLE
========================================================= */
.saacademy-hero-title {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(42px, 4.5vw, 76px);
font-weight: 700;
line-height: 0.98;
letter-spacing: clamp(-1px, -0.18vw, -3px);
}
.saacademy-hero-title em {
color: #ed176b;
font-style: normal;
}
/* =========================================================
DESCRIPTION
========================================================= */
.saacademy-hero-description {
max-width: 500px;
margin-top: clamp(14px, 1.6vw, 25px);
margin-bottom: clamp(14px, 1.6vw, 25px);
color: #294b72;
font-family: "Manrope", sans-serif;
font-size: clamp(12px, 1vw, 16px);
font-weight: 500;
line-height: 1.5;
}
.saacademy-hero-description strong {
color: #082b5c;
font-weight: 800;
}
/* =========================================================
BUTTON
========================================================= */
.saacademy-hero-button {
min-height: clamp(44px, 3.5vw, 58px);
padding-left: clamp(22px, 2.2vw, 35px);
padding-right: clamp(22px, 2.2vw, 35px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 50px;
color: #ffffff;
background: #ed176b;
font-family: "Manrope", sans-serif;
font-size: clamp(11px, 0.9vw, 15px);
font-weight: 800;
text-decoration: none;
box-shadow:
0 10px 25px rgba(233, 30, 115, 0.22);
transition:
background-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-hero-button:hover {
color: #ffffff;
background: #082b5c;
transform: translateY(-2px);
box-shadow:
0 12px 28px rgba(8, 43, 92, 0.24);
}
.saacademy-hero-button i {
font-size: 17px;
transition: transform 0.3s ease;
}
.saacademy-hero-button:hover i {
transform: translateX(5px);
}
/* =========================================================
FEATURES
========================================================= */
.saacademy-hero-features {
width: min(100%, 550px);
margin-top: clamp(18px, 2vw, 30px);
display: flex;
align-items: stretch;
display: none;
}
/* =========================================================
FEATURE
========================================================= */
.saacademy-hero-feature {
width: 33.333%;
min-height: clamp(65px, 6vw, 95px);
padding-left: clamp(10px, 1.4vw, 22px);
padding-right: clamp(10px, 1.4vw, 22px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
border-right:
1px solid rgba(8, 43, 92, 0.25);
}
.saacademy-hero-feature:first-child {
padding-left: 0;
}
.saacademy-hero-feature:last-child {
border-right: 0;
padding-right: 0;
}
/* =========================================================
FEATURE ICON
========================================================= */
.saacademy-hero-feature-icon {
width: clamp(42px, 4vw, 65px);
height: clamp(42px, 4vw, 65px);
margin-bottom: 7px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #082b5c;
background: #e7f3ff;
font-size: clamp(16px, 1.6vw, 26px);
}
.saacademy-hero-feature:first-child
.saacademy-hero-feature-icon {
background: #fff0f7;
}
.saacademy-hero-feature:last-child
.saacademy-hero-feature-icon {
background: #fff0f7;
color: #ed176b;
}
/* =========================================================
FEATURE TEXT
========================================================= */
.saacademy-hero-feature span {
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: clamp(9px, 0.85vw, 14px);
font-weight: 800;
line-height: 1.3;
}
/* =========================================================
SLIDER ARROWS
========================================================= */
.saacademy-hero-prev,
.saacademy-hero-next {
position: absolute;
top: 50%;
width: 52px;
height: 52px;
margin: 0;
padding: 0;
transform: translateY(-50%);
opacity: 1;
z-index: 30;
}
.saacademy-hero-prev {
left: 20px;
}
.saacademy-hero-next {
right: 20px;
}
/* =========================================================
CONTROL CIRCLE
========================================================= */
.saacademy-hero-control-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #082b5c;
background: rgba(255, 255, 255, 0.96);
box-shadow:
0 7px 22px rgba(8, 43, 92, 0.15);
transition:
background-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.saacademy-hero-control-icon i {
font-size: 16px;
}
.saacademy-hero-prev:hover
.saacademy-hero-control-icon,
.saacademy-hero-next:hover
.saacademy-hero-control-icon {
color: #ffffff;
background: #ed176b;
transform: scale(1.08);
}
/* =========================================================
CONTENT ANIMATION
========================================================= */
.carousel-item
.saacademy-hero-content {
opacity: 0;
transform: translateY(20px);
}
.carousel-item.active
.saacademy-hero-content {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
/* =========================================================
IMPORTANT:
BELOW 1200PX
CONTENT IS MOVED ABOVE IMAGE.
This guarantees:
- NO CONTENT CUT
- NO IMAGE CUT
- NO OVERLAP
========================================================= */
@media (max-width:991.8px) {
.saacademy-hero-slide {
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
}
/* IMAGE */
.saacademy-hero-bg {
order: 2;
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
object-position: center;
transform: none !important;
}
/* CONTENT */
.saacademy-hero-container {
order: 1;
position: relative;
top: auto;
left: auto;
right: auto;
width: 100%;
height: auto;
padding-top: 45px;
padding-bottom: 40px;
padding-left: clamp(25px, 7vw, 100px);
padding-right: clamp(25px, 7vw, 100px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #ffffff;
}
.saacademy-hero-content {
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.saacademy-hero-eyebrow {
font-size: 11px;
letter-spacing: 3px;
}
.saacademy-hero-line {
margin-left: auto;
margin-right: auto;
}
.saacademy-hero-title {
font-size: clamp(44px, 7vw, 65px);
}
.saacademy-hero-description {
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
.saacademy-hero-features {
margin-left: auto;
margin-right: auto;
}
/* ARROWS MOVE TO IMAGE AREA */
.saacademy-hero-prev,
.saacademy-hero-next {
top: auto;
bottom: 20px;
transform: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.saacademy-hero-container {
padding-top: 35px;
padding-bottom: 30px;
padding-left: 22px;
padding-right: 22px;
}
.saacademy-hero-eyebrow {
font-size: 9px;
letter-spacing: 2px;
}
.saacademy-hero-line {
width: 38px;
height: 3px;
margin-bottom: 14px;
}
.saacademy-hero-title {
font-size: clamp(38px, 10vw, 54px);
line-height: 1;
}
.saacademy-hero-description {
max-width: 430px;
margin-top: 14px;
margin-bottom: 18px;
font-size: 12px;
line-height: 1.5;
}
.saacademy-hero-button {
min-height: 46px;
padding-left: 22px;
padding-right: 22px;
font-size: 11px;
}
.saacademy-hero-features {
width: 100%;
margin-top: 20px;
}
.saacademy-hero-feature {
min-height: 70px;
padding-left: 7px;
padding-right: 7px;
}
.saacademy-hero-feature-icon {
width: 42px;
height: 42px;
font-size: 17px;
}
.saacademy-hero-feature span {
font-size: 8px;
}
/* IMAGE */
.saacademy-hero-bg {
width: 100%;
height: auto;
object-fit: contain;
}
/* ARROWS */
.saacademy-hero-prev,
.saacademy-hero-next {
bottom: 12px;
width: 36px;
height: 36px;
}
.saacademy-hero-prev {
left: 8px;
}
.saacademy-hero-next {
right: 8px;
}
.saacademy-hero-control-icon {
width: 34px;
height: 34px;
}
.saacademy-hero-control-icon i {
font-size: 12px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.saacademy-hero-container {
padding-top: 28px;
padding-bottom: 25px;
padding-left: 18px;
padding-right: 18px;
}
.saacademy-hero-eyebrow {
font-size: 8px;
letter-spacing: 1.7px;
}
.saacademy-hero-title {
font-size: 37px;
letter-spacing: -1px;
}
.saacademy-hero-description {
max-width: 340px;
font-size: 11px;
}
.saacademy-hero-features {
margin-top: 17px;
}
.saacademy-hero-feature {
min-height: 62px;
padding-left: 4px;
padding-right: 4px;
}
.saacademy-hero-feature-icon {
width: 36px;
height: 36px;
margin-bottom: 5px;
font-size: 14px;
}
.saacademy-hero-feature span {
font-size: 7px;
}
}
/* ==========================================
S.A. ACADEMY - WELCOME
========================================== */
.saacademy-welcome {
--saacademy-navy: #082b5c;
--saacademy-blue: #1769c2;
--saacademy-pink: #e91e73;
--saacademy-green: #65a96b;
position: relative;
width: 100%;
padding: 105px 0 115px;
background: #ffffff;
overflow: hidden;
}
/* ==========================================
BACKGROUND SHAPES
========================================== */
.saacademy-welcome-pink-shape {
position: absolute;
width: 180px;
height: 180px;
left: -85px;
top: -55px;
border-radius: 50%;
background: rgba(233, 30, 115, 0.075);
}
.saacademy-welcome-pink-shape::after {
content: "";
position: absolute;
width: 95px;
height: 95px;
right: -55px;
bottom: -20px;
border-radius: 50%;
background: rgba(233, 30, 115, 0.055);
}
.saacademy-welcome-blue-shape {
position: absolute;
width: 430px;
height: 190px;
right: -130px;
bottom: -100px;
border-radius: 50%;
background: rgba(23, 105, 194, 0.075);
transform: rotate(-12deg);
}
/* ==========================================
ROW
========================================== */
.saacademy-welcome-row {
min-height: 590px;
}
/* ==========================================
CONTENT
========================================== */
.saacademy-welcome-content {
position: relative;
z-index: 10;
max-width: 690px;
padding-left: 20px;
}
/* ==========================================
WELCOME LABEL
========================================== */
.saacademy-welcome-label {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.saacademy-welcome-label span {
width: 52px;
height: 2px;
background: var(--saacademy-blue);
}
.saacademy-welcome-label strong {
color: #61728a;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 4px;
}
/* ==========================================
TITLE
========================================== */
.saacademy-welcome-title {
margin: 0;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: clamp(46px, 5vw, 65px);
font-weight: 800;
line-height: 1.04;
letter-spacing: -3.5px;
}
.saacademy-blue-text {
color: var(--saacademy-blue);
}
.saacademy-pink-text {
color: var(--saacademy-pink);
}
/* ==========================================
DESCRIPTION
========================================== */
.saacademy-welcome-description {
max-width: 610px;
margin: 25px 0 0;
color: #617189;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.8;
}
/* ==========================================
LANGUAGE LIST
========================================== */
.saacademy-language-list {
display: flex;
align-items: center;
gap: 14px;
margin-top: 31px;
}
/* ==========================================
LANGUAGE
========================================== */
.saacademy-language {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 7px;
background: rgba(255,255,255,0.9);
border: 1px solid #edf1f5;
border-radius: 50px;
box-shadow:
0 8px 25px rgba(8,43,92,0.055);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-language:hover {
transform: translateY(-4px);
box-shadow:
0 14px 30px rgba(8,43,92,0.10);
}
/* ==========================================
LANGUAGE ICON
========================================== */
.saacademy-language-icon {
display: flex;
align-items: center;
justify-content: center;
width: 39px;
height: 39px;
border-radius: 50%;
font-size: 15px;
}
.saacademy-german-icon {
color: var(--saacademy-blue);
background: rgba(23,105,194,0.10);
}
.saacademy-italian-icon {
color: var(--saacademy-pink);
background: rgba(233,30,115,0.10);
}
.saacademy-spanish-icon {
color: var(--saacademy-green);
background: rgba(101,169,107,0.12);
}
/* ==========================================
LANGUAGE TEXT
========================================== */
.saacademy-language-text strong {
display: block;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 800;
}
.saacademy-language-text span {
display: block;
margin-top: 1px;
color: #97a2af;
font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 600;
}
/* ==========================================
ACTION
========================================== */
.saacademy-welcome-action {
margin-top: 32px;
}
.saacademy-welcome-button {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 8px 8px 8px 23px;
border-radius: 50px;
background: var(--saacademy-blue);
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 800;
text-decoration: none;
box-shadow:
0 12px 28px rgba(23,105,194,0.22);
transition:
transform 0.3s ease,
background 0.3s ease;
}
.saacademy-welcome-button i {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #ffffff;
color: var(--saacademy-blue);
transition: transform 0.3s ease;
}
.saacademy-welcome-button:hover {
color: #ffffff;
background: var(--saacademy-navy);
transform: translateY(-3px);
}
.saacademy-welcome-button:hover i {
transform: translateX(4px);
}
/* ==========================================
STATEMENT
========================================== */
.saacademy-welcome-statement {
display: flex;
align-items: center;
gap: 9px;
margin-top: 27px;
color: #8895a5;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 700;
}
.saacademy-statement-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--saacademy-pink);
}
.saacademy-welcome-statement i {
color: #b0b9c4;
font-size: 7px;
}
/* ==========================================
VISUAL
========================================== */
.saacademy-welcome-visual {
position: relative;
width: 100%;
min-height: 560px;
}
/* ==========================================
IMAGE HOLDER
========================================== */
.saacademy-image-holder {
position: absolute;
z-index: 3;
top: 48px;
right: 7%;
width: 83%;
height: 445px;
overflow: hidden;
border-radius:
145px
22px
145px
22px;
background: #edf3f8;
box-shadow:
0 25px 60px rgba(8,43,92,0.16);
}
.saacademy-welcome-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s ease;
}
.saacademy-image-holder:hover
.saacademy-welcome-image {
transform: scale(1.04);
}
/* Figure wrapper */
.saacademy-welcome-figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* Hidden caption */
.saacademy-welcome-figure .seo-hidden1 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* .saacademy-welcome-image figure {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.saacademy-welcome-image figure > img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
} */
/* ==========================================
PINK ACCENT
========================================== */
.saacademy-image-pink-accent {
position: absolute;
z-index: 5;
top: 76px;
left: 2%;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(233,30,115,0.12);
}
.saacademy-image-pink-accent::after {
content: "";
position: absolute;
width: 19px;
height: 19px;
left: 15px;
top: 15px;
border-radius: 50%;
background: var(--saacademy-pink);
}
/* ==========================================
BLUE CURVE
========================================== */
.saacademy-image-blue-curve {
position: absolute;
z-index: 1;
left: 0;
bottom: 25px;
width: 240px;
height: 150px;
border-radius: 0 100% 0 0;
background: rgba(23,105,194,0.11);
}
/* ==========================================
ROUTE
========================================== */
.saacademy-route {
position: absolute;
z-index: 8;
top: 5px;
right: 5%;
width: 135px;
height: 90px;
}
.saacademy-route-line {
position: absolute;
left: 15px;
top: 30px;
width: 92px;
height: 47px;
border-top: 2px dashed rgba(23,105,194,0.35);
border-radius: 50%;
transform: rotate(-15deg);
}
.saacademy-route-dot {
position: absolute;
left: 11px;
top: 28px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--saacademy-blue);
}
.saacademy-route i {
position: absolute;
right: 4px;
top: 5px;
color: var(--saacademy-blue);
font-size: 29px;
transform: rotate(-14deg);
}
/* ==========================================
IMAGE CAPTION
========================================== */
.saacademy-image-caption {
position: absolute;
z-index: 8;
left: 3%;
bottom: 43px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 17px;
background: #ffffff;
box-shadow:
0 12px 30px rgba(8,43,92,0.12);
}
.saacademy-image-caption > span {
width: 3px;
height: 35px;
background: var(--saacademy-pink);
}
.saacademy-image-caption strong {
display: block;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 800;
}
.saacademy-image-caption small {
display: block;
margin-top: 2px;
color: #8b97a6;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 600;
}
/* ==========================================
LARGE TABLET
========================================== */
@media (max-width: 1199.98px) {
.saacademy-welcome {
padding: 90px 0 100px;
}
.saacademy-welcome-content {
padding-left: 5px;
}
.saacademy-welcome-title {
font-size: 55px;
}
.saacademy-language-list {
gap: 8px;
}
.saacademy-language {
padding-right: 10px;
}
.saacademy-image-holder {
width: 85%;
height: 405px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991.98px) {
.saacademy-welcome {
padding: 80px 0 90px;
}
.saacademy-welcome-content {
max-width: 720px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.saacademy-welcome-label {
justify-content: center;
}
.saacademy-welcome-description {
margin-left: auto;
margin-right: auto;
}
.saacademy-language-list {
justify-content: center;
}
.saacademy-welcome-action {
text-align: center;
}
.saacademy-welcome-statement {
justify-content: center;
}
.saacademy-welcome-visual {
max-width: 620px;
margin: 35px auto 0;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 575.98px) {
.saacademy-welcome {
padding: 65px 0 75px;
}
.saacademy-welcome-label {
gap: 9px;
margin-bottom: 17px;
}
.saacademy-welcome-label span {
width: 30px;
}
.saacademy-welcome-label strong {
font-size: 8px;
letter-spacing: 2px;
}
.saacademy-welcome-title {
font-size: 38px;
line-height: 1.05;
letter-spacing: -1.8px;
}
.saacademy-welcome-description {
margin-top: 19px;
font-size: 11px;
line-height: 1.7;
}
/* LANGUAGE */
.saacademy-language-list {
gap: 6px;
margin-top: 24px;
}
.saacademy-language {
gap: 5px;
padding: 5px 8px 5px 5px;
}
.saacademy-language-icon {
width: 30px;
height: 30px;
font-size: 11px;
}
.saacademy-language-text strong {
font-size: 7px;
}
.saacademy-language-text span {
font-size: 6px;
}
/* BUTTON */
.saacademy-welcome-action {
margin-top: 26px;
}
.saacademy-welcome-button {
gap: 8px;
padding: 6px 6px 6px 16px;
font-size: 8px;
}
.saacademy-welcome-button i {
width: 30px;
height: 30px;
font-size: 10px;
}
.saacademy-welcome-statement {
gap: 6px;
margin-top: 21px;
font-size: 6px;
}
.saacademy-statement-dot {
width: 4px;
height: 4px;
}
/* VISUAL */
.saacademy-welcome-visual {
min-height: 405px;
margin-top: 10px;
}
.saacademy-image-holder {
top: 50px;
right: 5%;
width: 83%;
height: 300px;
border-radius:
90px
16px
90px
16px;
}
.saacademy-image-pink-accent {
top: 65px;
left: 1%;
width: 35px;
height: 35px;
}
.saacademy-image-pink-accent::after {
width: 13px;
height: 13px;
left: 11px;
top: 11px;
}
.saacademy-route {
top: 2px;
right: 2%;
width: 90px;
height: 60px;
}
.saacademy-route-line {
left: 8px;
top: 23px;
width: 65px;
height: 32px;
}
.saacademy-route-dot {
left: 5px;
top: 21px;
width: 5px;
height: 5px;
}
.saacademy-route i {
right: 0;
top: 0;
font-size: 20px;
}
.saacademy-image-blue-curve {
width: 150px;
height: 90px;
bottom: 17px;
}
.saacademy-image-caption {
left: 0;
bottom: 25px;
padding: 9px 12px;
gap: 7px;
}
.saacademy-image-caption > span {
width: 2px;
height: 29px;
}
.saacademy-image-caption strong {
font-size: 7px;
}
.saacademy-image-caption small {
font-size: 5px;
}
}
/* ==========================================
S.A. ACADEMY - OUR COURSES
========================================== */
.saacademy-courses {
--saacademy-navy: #082b5c;
--saacademy-blue: #1769c2;
--saacademy-pink: #e91e73;
position: relative;
padding: 100px 0 95px;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f8fbff 55%,
#ffffff 100%
);
overflow: hidden;
}
/* TOP BRAND LINE */
.saacademy-courses::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background:
linear-gradient(
90deg,
#1769c2 0%,
#1769c2 50%,
#e91e73 100%
);
}
/* ==========================================
BACKGROUND SHAPES
========================================== */
.saacademy-courses::after {
content: "";
position: absolute;
right: -180px;
top: 140px;
width: 550px;
height: 550px;
border-radius: 50%;
border: 90px solid rgba(23,105,194,.035);
pointer-events: none;
}
.saacademy-courses-shape {
position: absolute;
pointer-events: none;
}
.saacademy-shape-one {
left: -180px;
bottom: -170px;
width: 430px;
height: 430px;
border-radius: 50%;
border: 75px solid rgba(233,30,115,.035);
}
.saacademy-shape-two {
right: 38%;
top: 80px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(23,105,194,.025);
}
/* ==========================================
HEADER
========================================== */
.saacademy-courses-header {
position: relative;
z-index: 2;
max-width: 950px;
margin: 0 auto 55px;
text-align: center;
}
/* ==========================================
SECTION LABEL
========================================== */
.saacademy-courses-label {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
color: var(--saacademy-blue);
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
}
.saacademy-courses-label span {
width: 45px;
height: 2px;
background: var(--saacademy-pink);
}
/* ==========================================
HEADING
========================================== */
.saacademy-courses-header h2 {
margin: 0;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: clamp(48px, 5.2vw, 65px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -2.5px;
}
.saacademy-courses-header h2 strong {
color: var(--saacademy-blue);
font-weight: 800;
}
/* ==========================================
DESCRIPTION
========================================== */
.saacademy-courses-header p {
max-width: 860px;
margin: 24px auto 0;
color: #5e7189;
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 1.8;
}
.saacademy-courses-header p b {
color: var(--saacademy-navy);
font-weight: 800;
}
/* ==========================================
EXPLORE OUR COURSES BUTTON
========================================== */
.saacademy-explore-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
min-height: 54px;
margin-top: 27px;
padding: 0 28px;
border-radius: 8px;
background: var(--saacademy-navy);
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
text-decoration: none;
box-shadow:
0 10px 25px rgba(8,43,92,.15);
transition:
transform .3s ease,
background .3s ease,
box-shadow .3s ease;
}
.saacademy-explore-button i {
font-size: 17px;
transition: transform .3s ease;
}
.saacademy-explore-button:hover {
color: #ffffff;
background: var(--saacademy-blue);
transform: translateY(-3px);
box-shadow:
0 14px 30px rgba(23,105,194,.22);
}
.saacademy-explore-button:hover i {
transform: translateX(5px);
}
/* ==========================================
COURSE CARD
========================================== */
.saacademy-course-card {
position: relative;
z-index: 2;
height: 100%;
overflow: hidden;
border: 1px solid #e2e9f1;
border-radius: 20px;
background: #ffffff;
box-shadow:
0 12px 38px rgba(8,43,92,.07);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.saacademy-course-card:hover {
transform: translateY(-8px);
box-shadow:
0 24px 55px rgba(8,43,92,.14);
}
.saacademy-course-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
z-index: 5;
}
.saacademy-italian::before {
background: #16864c;
}
.saacademy-german::before {
background: #1769c2;
}
.saacademy-spanish::before {
background: #d7193f;
}
/* ==========================================
IMAGE
========================================== */
.saacademy-course-image {
position: relative;
height: 285px;
overflow: hidden;
}
.saacademy-course-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.saacademy-course-image figure {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.saacademy-course-image figure > img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.saacademy-course-card:hover
.saacademy-course-image img {
transform: scale(1.04);
}
/* IMAGE TAG */
.saacademy-course-tag {
position: absolute;
left: 20px;
bottom: 18px;
padding: 10px 22px;
border-radius: 8px;
background: #ffffff;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
box-shadow:
0 7px 20px rgba(0,0,0,.13);
}
/* ==========================================
BODY
========================================== */
.saacademy-course-body {
padding: 28px 28px 30px;
}
/* ==========================================
TITLE
========================================== */
.saacademy-course-title-row {
display: flex;
align-items: center;
gap: 15px;
}
.saacademy-flag {
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ffffff;
box-shadow:
0 5px 18px rgba(8,43,92,.14);
}
.saacademy-course-title-row h3 {
margin: 0;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: 33px;
font-weight: 800;
line-height: 1.1;
}
.saacademy-course-title-row p {
margin: 6px 0 0;
color: #7c8da2;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 700;
}
/* ==========================================
COURSE TEXT
========================================== */
.saacademy-course-text {
min-height: 58px;
margin: 21px 0 19px;
color: #61748b;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.65;
}
/* ==========================================
LEVELS
========================================== */
.saacademy-level-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.saacademy-level-list span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 34px;
padding: 0 13px;
border-radius: 7px;
background: #edf5ff;
color: var(--saacademy-blue);
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 800;
}
/* Italian */
.saacademy-italian
.saacademy-level-list span {
background: #edf8f2;
color: #16864c;
}
/* Spanish */
.saacademy-spanish
.saacademy-level-list span {
background: #fff0f3;
color: #d7193f;
}
/* ==========================================
LEARNING MODE
========================================== */
.saacademy-learning-mode {
display: flex;
align-items: center;
gap: 18px;
margin-top: 21px;
padding: 15px 0;
border-top: 1px solid #edf0f4;
border-bottom: 1px solid #edf0f4;
}
.saacademy-learning-mode > div {
display: flex;
align-items: center;
gap: 8px;
color: #53677f;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 700;
}
.saacademy-learning-mode i {
display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 31px;
border-radius: 7px;
background: #edf5ff;
color: var(--saacademy-blue);
font-size: 14px;
}
/* ==========================================
COURSE BUTTON
========================================== */
.saacademy-course-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 52px;
margin-top: 19px;
padding: 0 21px;
border-radius: 8px;
background: var(--saacademy-blue);
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: background .3s ease;
}
.saacademy-course-link i {
font-size: 18px;
transition: transform .3s ease;
}
.saacademy-course-link:hover {
color: #ffffff;
background: var(--saacademy-navy);
}
.saacademy-course-link:hover i {
transform: translateX(5px);
}
.saacademy-italian
.saacademy-course-link {
background: #16864c;
}
.saacademy-spanish
.saacademy-course-link {
background: #d7193f;
}
/* ==========================================
BOTTOM HIGHLIGHTS
========================================== */
.saacademy-course-highlights {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 58px;
padding: 25px 0;
border-top: 1px solid #dce5ef;
border-bottom: 1px solid #dce5ef;
}
.saacademy-highlight {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 58px;
padding: 0 18px;
border-right: 1px solid #dce5ef;
}
.saacademy-highlight:last-child {
border-right: none;
}
/* ICON */
.saacademy-highlight-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: #edf5ff;
color: var(--saacademy-blue);
font-size: 18px;
}
/* TEXT */
.saacademy-highlight strong {
display: block;
color: var(--saacademy-navy);
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 800;
line-height: 1.4;
}
.saacademy-highlight span {
display: block;
margin-top: 4px;
color: #7e8fa3;
font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 600;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991.98px) {
.saacademy-courses {
padding: 80px 0;
}
.saacademy-courses-header {
margin-bottom: 45px;
}
.saacademy-courses-header h2 {
font-size: 52px;
}
.saacademy-courses-header p {
font-size: 15px;
}
.saacademy-course-image {
height: 260px;
}
.saacademy-course-highlights {
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
}
.saacademy-highlight {
justify-content: flex-start;
border-right: 1px solid #dce5ef;
}
.saacademy-highlight:nth-child(2n) {
border-right: none;
}
}
@media (max-width: 767px) {
.saacademy-level-list {
justify-content: center;
align-items: center;
width: 100%;
}
.saacademy-learning-mode {
justify-content: center;
align-items: center;
gap: 12px;
width: 100%;
}
.saacademy-learning-mode > div {
flex: 0 1 auto;
justify-content: center;
align-items: center;
text-align: center;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 575.98px) {
.saacademy-courses {
padding: 65px 0;
}
.saacademy-courses-header {
margin-bottom: 35px;
}
.saacademy-courses-label {
gap: 8px;
font-size: 10px;
letter-spacing: 2px;
}
.saacademy-courses-label span {
width: 25px;
}
.saacademy-courses-header h2 {
font-size: 39px;
letter-spacing: -1.2px;
}
.saacademy-courses-header p {
margin-top: 18px;
font-size: 12px;
line-height: 1.7;
}
.saacademy-explore-button {
min-height: 49px;
margin-top: 21px;
padding: 0 22px;
font-size: 11px;
}
.saacademy-course-image {
height: 230px;
}
.saacademy-course-body {
padding: 22px 19px 23px;
}
.saacademy-course-title-row h3 {
font-size: 28px;
}
.saacademy-course-title-row p {
font-size: 9px;
}
.saacademy-flag {
width: 53px;
height: 53px;
}
.saacademy-course-text {
min-height: auto;
font-size: 11px;
line-height: 1.65;
}
.saacademy-level-list span {
min-width: 46px;
height: 30px;
font-size: 9px;
}
.saacademy-learning-mode {
gap: 12px;
}
.saacademy-learning-mode > div {
font-size: 9px;
}
.saacademy-learning-mode i {
width: 28px;
height: 28px;
font-size: 12px;
}
.saacademy-course-link {
min-height: 48px;
font-size: 10px;
}
.saacademy-course-highlights {
grid-template-columns: 1fr;
margin-top: 38px;
padding: 12px 0;
}
.saacademy-highlight {
min-height: 58px;
padding: 7px 12px;
border-right: none;
border-bottom: 1px solid #dce5ef;
}
.saacademy-highlight:last-child {
border-bottom: none;
}
.saacademy-highlight-icon {
width: 42px;
height: 42px;
font-size: 16px;
}
.saacademy-highlight strong {
font-size: 10px;
}
.saacademy-highlight span {
font-size: 8px;
}
}
/* =========================================================
SA ACADEMY - ACHIEVEMENTS / STATUS SECTION
========================================================= */
.saacademy-achievements {
position: relative;
width: 100%;
overflow: hidden;
padding: 90px 0 85px;
background: url(../images/sa-academy-achievements-bg.jpg) no-repeat,#082b5c;
background-size: cover;
}
/* =========================================================
BACKGROUND IMAGE
========================================================= */
.saacademy-achievements-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.35;
pointer-events: none;
z-index: 2;
}
/* =========================================================
DARK OVERLAY
========================================================= */
.saacademy-achievements-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(8, 43, 92, 0.97) 0%,
rgba(8, 43, 92, 0.91) 45%,
rgba(8, 43, 92, 0.94) 100%
);
pointer-events: none;
}
/* =========================================================
DECORATIVE CIRCLES
========================================================= */
/* .saacademy-achievement-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
} */
/* Left Circle */
/* .saacademy-achievement-circle-left {
width: 330px;
height: 330px;
left: -165px;
top: -110px;
border: 70px solid rgba(233, 30, 115, 0.13);
}
/* Right Circle */
.saacademy-achievement-circle-right {
width: 320px;
height: 320px;
right: -165px;
bottom: -175px;
border: 70px solid rgba(23, 105, 194, 0.20);
} */
/* =========================================================
CONTAINER
========================================================= */
.saacademy-achievements .container {
position: relative;
z-index: 3;
}
/* =========================================================
SECTION HEADING
========================================================= */
.saacademy-achievement-heading {
position: relative;
margin-bottom: 60px;
}
/* Small Label */
.saacademy-achievement-label {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 22px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 5px;
text-transform: uppercase;
}
/* Label Lines */
.saacademy-achievement-label span {
display: block;
width: 80px;
height: 3px;
border-radius: 20px;
background: #e91e73;
}
/* Main Heading */
.saacademy-achievement-heading h2 {
margin: 0;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: clamp(42px, 4.5vw, 66px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -2px;
}
/* Pink Heading Word */
.saacademy-achievement-heading h2 strong {
color: #e91e73;
font-weight: 700;
}
/* Subtitle */
.saacademy-achievement-heading p {
max-width: 850px;
margin: 20px auto 0;
color: rgba(255, 255, 255, 0.8);
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.6;
}
/* =========================================================
STATISTICS ROW
========================================================= */
.saacademy-achievement-row {
position: relative;
margin: 0;
z-index: 3;
}
/* =========================================================
EACH COLUMN
========================================================= */
.saacademy-achievement-column {
position: relative;
padding: 0;
}
/* =========================================================
VERTICAL DIVIDERS
========================================================= */
.saacademy-achievement-column:not(:last-child)::after {
content: "";
position: absolute;
top: 12px;
right: 0;
width: 1px;
height: 180px;
background: rgba(116, 176, 235, 0.55);
}
/* =========================================================
STATISTIC ITEM
========================================================= */
.saacademy-achievement-item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 215px;
padding: 0 20px;
text-align: center;
transition:
transform 0.35s ease;
}
/* Hover */
.saacademy-achievement-item:hover {
transform: translateY(-6px);
}
/* =========================================================
ICON CIRCLE
========================================================= */
.saacademy-achievement-icon {
display: flex;
align-items: center;
justify-content: center;
width: 125px;
height: 125px;
margin-bottom: 17px;
border-radius: 50%;
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* Icon Hover */
.saacademy-achievement-item:hover
.saacademy-achievement-icon {
transform: scale(1.06);
}
/* Icon */
.saacademy-achievement-icon i {
color: #ffffff;
font-size: 45px;
line-height: 1;
}
/* =========================================================
PINK ICON
========================================================= */
.saacademy-pink-icon {
background:
linear-gradient(
145deg,
#ed2380 0%,
#e91e73 45%,
#c90065 100%
);
box-shadow:
0 12px 35px rgba(233, 30, 115, 0.20);
}
/* =========================================================
BLUE ICON
========================================================= */
.saacademy-blue-icon {
background:
linear-gradient(
145deg,
#1976d2 0%,
#1769c2 45%,
#075bb7 100%
);
box-shadow:
0 12px 35px rgba(23, 105, 194, 0.20);
}
/* =========================================================
STATISTIC NUMBER
========================================================= */
.saacademy-achievement-number {
margin-bottom: 9px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: clamp(45px, 4vw, 65px);
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
}
/* =========================================================
STATISTIC TITLE
========================================================= */
.saacademy-achievement-title {
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 1.4;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (max-width: 1199.98px) {
.saacademy-achievements {
padding: 80px 0;
}
.saacademy-achievement-heading {
margin-bottom: 52px;
}
.saacademy-achievement-icon {
width: 105px;
height: 105px;
}
.saacademy-achievement-icon i {
font-size: 38px;
}
.saacademy-achievement-number {
font-size: 48px;
}
.saacademy-achievement-title {
font-size: 14px;
}
.saacademy-achievement-column:not(:last-child)::after {
height: 165px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.saacademy-achievements {
padding: 75px 0;
}
/* Heading */
.saacademy-achievement-heading {
margin-bottom: 48px;
}
.saacademy-achievement-label {
font-size: 10px;
letter-spacing: 4px;
gap: 14px;
}
.saacademy-achievement-label span {
width: 55px;
height: 2px;
}
.saacademy-achievement-heading h2 {
font-size: 44px;
letter-spacing: -1px;
}
.saacademy-achievement-heading p {
max-width: 650px;
font-size: 14px;
}
/* Items */
.saacademy-achievement-item {
min-height: 200px;
padding: 0 15px;
}
/* Icons */
.saacademy-achievement-icon {
width: 90px;
height: 90px;
}
.saacademy-achievement-icon i {
font-size: 32px;
}
/* Numbers */
.saacademy-achievement-number {
font-size: 42px;
}
/* Titles */
.saacademy-achievement-title {
font-size: 13px;
}
/* Tablet Dividers */
.saacademy-achievement-column:nth-child(2)::after,
.saacademy-achievement-column:nth-child(4)::after {
display: none;
}
.saacademy-achievement-column:nth-child(1)::after,
.saacademy-achievement-column:nth-child(3)::after {
display: block;
}
.saacademy-achievement-column:nth-child(3)::after {
height: 165px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.saacademy-achievements {
padding: 60px 0;
}
/* Background */
.saacademy-achievements-bg {
object-position: center center;
opacity: 0.28;
}
.saacademy-achievements-overlay {
background:
linear-gradient(
180deg,
rgba(8, 43, 92, 0.97),
rgba(8, 43, 92, 0.94)
);
}
/* Decorative Circles */
.saacademy-achievement-circle-left {
width: 200px;
height: 200px;
left: -125px;
top: -80px;
border-width: 45px;
}
.saacademy-achievement-circle-right {
width: 200px;
height: 200px;
right: -120px;
bottom: -120px;
border-width: 45px;
}
/* Heading */
.saacademy-achievement-heading {
margin-bottom: 38px;
}
.saacademy-achievement-label {
gap: 10px;
margin-bottom: 17px;
font-size: 8px;
letter-spacing: 2.5px;
}
.saacademy-achievement-label span {
width: 35px;
height: 2px;
}
.saacademy-achievement-heading h2 {
font-size: 34px;
line-height: 1.15;
letter-spacing: -1px;
}
.saacademy-achievement-heading p {
margin-top: 14px;
padding: 0 15px;
font-size: 11px;
line-height: 1.6;
}
/* Statistics */
.saacademy-achievement-item {
min-height: 175px;
padding: 0 8px;
}
/* Icons */
.saacademy-achievement-icon {
width: 72px;
height: 72px;
margin-bottom: 13px;
}
.saacademy-achievement-icon i {
font-size: 26px;
}
/* Numbers */
.saacademy-achievement-number {
margin-bottom: 7px;
font-size: 34px;
letter-spacing: -1px;
}
/* Titles */
.saacademy-achievement-title {
font-size: 11px;
line-height: 1.35;
}
/* Mobile Dividers */
.saacademy-achievement-column:not(:last-child)::after {
top: 5px;
height: 145px;
}
.saacademy-achievement-column:nth-child(2)::after,
.saacademy-achievement-column:nth-child(4)::after {
display: none;
}
}
/* =========================================================
EXTRA SMALL DEVICES
========================================================= */
@media (max-width: 380px) {
.saacademy-achievements {
padding: 50px 0;
}
.saacademy-achievement-heading h2 {
font-size: 30px;
}
.saacademy-achievement-heading p {
font-size: 10px;
}
.saacademy-achievement-item {
min-height: 160px;
}
.saacademy-achievement-icon {
width: 64px;
height: 64px;
}
.saacademy-achievement-icon i {
font-size: 23px;
}
.saacademy-achievement-number {
font-size: 30px;
}
.saacademy-achievement-title {
font-size: 10px;
}
.saacademy-achievement-column:not(:last-child)::after {
height: 130px;
}
}
/* =========================================================
TESTIMONIAL SECTION
========================================================= */
.saacademy-testimonials {
position: relative;
overflow: hidden;
padding: 95px 0 90px;
background: #ffffff;
}
/* =========================================================
BACKGROUND SHAPES
========================================================= */
.saacademy-testimonial-bg {
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.saacademy-testimonial-bg-top {
width: 420px;
height: 420px;
top: -300px;
right: -180px;
background: #edf6ff;
}
.saacademy-testimonial-bg-bottom {
width: 430px;
height: 430px;
bottom: -300px;
left: -190px;
background: #eef9f6;
}
/* =========================================================
HEADING
========================================================= */
.saacademy-testimonial-heading {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto 55px;
text-align: center;
}
.saacademy-testimonial-label {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 4px;
}
.saacademy-testimonial-label span {
width: 55px;
height: 3px;
border-radius: 20px;
background: #a9cdef;
}
.saacademy-testimonial-heading h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(44px, 5vw, 64px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -1.5px;
}
.saacademy-testimonial-heading h2 strong {
color: #e91e73;
font-weight: 600;
}
.saacademy-testimonial-heading p {
max-width: 750px;
margin: 18px auto 0;
color: #64748b;
font-family: "Manrope", sans-serif;
font-size: 15px;
line-height: 1.7;
}
/* =========================================================
CAROUSEL
========================================================= */
.saacademy-testimonial-carousel {
position: relative;
z-index: 3;
padding: 10px 0 15px;
}
.saacademy-testimonial-carousel .owl-stage {
display: flex;
align-items: center;
}
.saacademy-testimonial-carousel .owl-item {
display: flex;
align-items: center;
}
/* =========================================================
SLIDE
========================================================= */
.saacademy-testimonial-slide {
width: 100%;
padding: 10px;
}
/* =========================================================
CARD
========================================================= */
.saacademy-testimonial-card {
position: relative;
width: 100%;
min-height: 405px;
padding: 30px;
background: #ffffff;
border: 1px solid #edf1f5;
border-radius: 6px;
box-shadow:
0 15px 40px rgba(8, 43, 92, 0.06);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.saacademy-testimonial-card:hover {
transform: translateY(-5px);
box-shadow:
0 22px 50px rgba(8, 43, 92, 0.10);
}
/* =========================================================
FEATURED CENTER CARD
========================================================= */
.saacademy-testimonial-card {
transition:
transform 0.7s ease,
box-shadow 0.7s ease,
border-color 0.7s ease;
}
.saacademy-testimonial-featured {
transform: translateY(-8px);
}
.saacademy-testimonial-featured {
border-left: 5px solid #e91e73;
box-shadow:
0 20px 50px rgba(8, 43, 92, 0.10);
}
/* =========================================================
USER
========================================================= */
.saacademy-testimonial-user {
display: flex;
align-items: center;
}
.saacademy-testimonial-avatar {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 74px;
height: 74px;
border-radius: 50%;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 25px;
font-weight: 600;
}
.saacademy-avatar-pink {
background: #f45b78;
}
.saacademy-avatar-blue {
background: #2f80d9;
}
.saacademy-avatar-green {
background: #35a56d;
}
.saacademy-avatar-purple {
background: #8b68c7;
}
.saacademy-avatar-orange {
background: #dc9850;
}
/* =========================================================
USER INFO
========================================================= */
.saacademy-testimonial-user-info {
padding-left: 17px;
}
.saacademy-testimonial-user-info h3 {
margin: 0 0 5px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 800;
}
.saacademy-testimonial-user-info span {
color: #71809a;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 500;
}
/* =========================================================
STARS
========================================================= */
.saacademy-testimonial-stars {
margin-top: 20px;
color: #f4b400;
font-size: 14px;
letter-spacing: 2px;
}
/* =========================================================
QUOTE
========================================================= */
.saacademy-testimonial-quote {
position: absolute;
top: 28px;
right: 30px;
color: #edbfd2;;
font-size: 62px;
line-height: 1;
}
.saacademy-testimonial-quote i {
font-size: inherit;
}
/* =========================================================
TEXT
========================================================= */
.saacademy-testimonial-text {
min-height: 135px;
margin: 22px 0 0;
color: #425673;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-style: italic;
line-height: 1.85;
}
/* =========================================================
DIVIDER
========================================================= */
.saacademy-testimonial-divider {
width: 100%;
height: 1px;
margin: 10px 0 18px;
background: #e6edf4;
}
/* =========================================================
LANGUAGE
========================================================= */
.saacademy-testimonial-language {
display: flex;
align-items: center;
gap: 10px;
color: #71809a;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 600;
}
.saacademy-language-flag {
display: inline-block;
width: 31px;
height: 31px;
overflow: hidden;
border-radius: 50%;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.12);
}
/* German */
.saacademy-german-flag {
background:
linear-gradient(
to bottom,
#000000 0 33.33%,
#dd0000 33.33% 66.66%,
#ffce00 66.66% 100%
);
}
/* Italian */
.saacademy-italian-flag {
background:
linear-gradient(
to right,
#009246 0 33.33%,
#ffffff 33.33% 66.66%,
#ce2b37 66.66% 100%
);
}
/* Spanish */
.saacademy-spanish-flag {
background:
linear-gradient(
to bottom,
#aa151b 0 25%,
#f1bf00 25% 75%,
#aa151b 75% 100%
);
}
/* =========================================================
CONTROLS
========================================================= */
.saacademy-testimonial-controls {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 25px;
}
.saacademy-testimonial-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 0;
border: 1px solid #dce5ee;
border-radius: 50%;
background: #ffffff;
color: #082b5c;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.saacademy-testimonial-arrow:hover {
background: #e91e73;
border-color: #e91e73;
color: #ffffff;
}
/* =========================================================
CUSTOM DOTS
========================================================= */
.saacademy-testimonial-dots {
display: flex;
align-items: center;
gap: 7px;
}
.saacademy-testimonial-dots .owl-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: #cfdae5;
transition:
all 0.3s ease;
}
.saacademy-testimonial-dots .owl-dot.active {
width: 18px;
border-radius: 20px;
background: #e91e73;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.saacademy-testimonials {
padding: 75px 0;
}
.saacademy-testimonial-heading {
margin-bottom: 40px;
}
.saacademy-testimonial-heading h2 {
font-size: 46px;
}
.saacademy-testimonial-card {
min-height: 390px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.saacademy-testimonials {
padding: 60px 0;
}
.saacademy-testimonial-heading {
margin-bottom: 30px;
}
.saacademy-testimonial-label {
gap: 9px;
font-size: 8px;
letter-spacing: 2.5px;
}
.saacademy-testimonial-label span {
width: 30px;
height: 2px;
}
.saacademy-testimonial-heading h2 {
font-size: 36px;
line-height: 1.12;
}
.saacademy-testimonial-heading p {
margin-top: 13px;
padding: 0 8px;
font-size: 11px;
line-height: 1.6;
}
.saacademy-testimonial-slide {
padding: 5px;
}
.saacademy-testimonial-card {
min-height: 370px;
padding: 24px;
}
.saacademy-testimonial-avatar {
width: 62px;
height: 62px;
font-size: 20px;
}
.saacademy-testimonial-user-info {
padding-left: 13px;
}
.saacademy-testimonial-user-info h3 {
font-size: 14px;
}
.saacademy-testimonial-user-info span {
font-size: 10px;
}
.saacademy-testimonial-stars {
margin-top: 17px;
font-size: 12px;
}
.saacademy-testimonial-quote {
top: 23px;
right: 22px;
font-size: 52px;
}
.saacademy-testimonial-text {
min-height: 135px;
font-size: 11px;
line-height: 1.75;
}
.saacademy-testimonial-language {
font-size: 10px;
}
.saacademy-language-flag {
width: 27px;
height: 18px;
}
.saacademy-testimonial-arrow {
width: 38px;
height: 38px;
font-size: 13px;
}
}
/* =========================================================
S.A. ACADEMY - CREATIVE CTA
========================================================= */
.saacademy-creative-cta {
--saacademy-navy: #082b5c;
--saacademy-blue: #1769c2;
--saacademy-pink: #e91e73;
width: 100%;
padding: 90px 0;
overflow: hidden;
background: #edf5fa;
font-family: "Manrope", sans-serif;
}
/* =========================================================
MAIN CTA BOX
========================================================= */
.saacademy-creative-cta-wrapper {
position: relative;
overflow: hidden;
max-width: 1250px;
margin: 0 auto;
border-radius: 34px;
background:
linear-gradient(
135deg,
#dcecf8 0%,
#e7f2f9 100%
);
box-shadow:
0 25px 65px rgba(8, 43, 92, 0.10);
}
/* =========================================================
CONTENT
========================================================= */
.saacademy-creative-cta-content {
position: relative;
z-index: 5;
padding: 75px 45px 75px 80px;
}
/* =========================================================
LABEL
========================================================= */
.saacademy-creative-cta-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
color: var(--saacademy-navy);
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
}
.saacademy-creative-cta-label span {
width: 38px;
height: 2px;
background: var(--saacademy-pink);
}
/* =========================================================
HEADING
========================================================= */
.saacademy-creative-cta-content h2 {
max-width: 560px;
margin: 0 auto;
color: var(--saacademy-navy);
font-size: clamp(48px, 5vw, 70px);
font-weight: 800;
line-height: 1.03;
letter-spacing: -2.8px;
}
.saacademy-creative-cta-content h2 strong {
color: var(--saacademy-pink);
font-weight: 800;
}
/* =========================================================
DESCRIPTION
========================================================= */
.saacademy-creative-cta-content p {
max-width: 470px;
margin: 25px auto 32px;
color: #5d7188;
font-size: 15px;
font-weight: 500;
line-height: 1.7;
}
/* =========================================================
BUTTON
========================================================= */
.saacademy-creative-cta-button {
display: inline-flex;
align-items: center;
gap: 18px;
min-height: 52px;
padding: 0 26px;
border-radius: 50px;
background: var(--saacademy-navy);
color: #ffffff;
justify-content: center;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition:
background 0.35s ease,
transform 0.35s ease,
box-shadow 0.35s ease;
}
.saacademy-creative-cta-button i {
font-size: 17px;
transition:
transform 0.35s ease;
}
.saacademy-creative-cta-button:hover {
background: var(--saacademy-pink);
color: #ffffff;
transform: translateY(-3px);
box-shadow:
0 12px 28px rgba(233, 30, 115, 0.22);
}
.saacademy-creative-cta-button:hover i {
transform: translateX(5px);
}
/* =========================================================
IMAGE AREA
========================================================= */
.saacademy-creative-cta-visual {
position: relative;
height: 520px;
padding: 30px;
}
/* =========================================================
IMAGE
========================================================= */
.saacademy-creative-cta-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 140px 30px 30px 30px;
box-shadow:
0 20px 50px rgba(8, 43, 92, 0.15);
}
.saacademy-creative-cta-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.8s ease;
}
.saacademy-creative-cta-wrapper:hover
.saacademy-creative-cta-image img {
transform: scale(1.04);
}
/* ==========================================
CREATIVE CTA FIGURE
========================================== */
.saacademy-creative-cta-figure {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* ==========================================
CTA IMAGE
========================================== */
.saacademy-creative-cta-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.8s ease;
}
/* ==========================================
HOVER EFFECT
========================================== */
.saacademy-creative-cta-wrapper:hover
.saacademy-creative-cta-image img {
transform: scale(1.04);
}
/* ==========================================
HIDDEN FIGCAPTION
========================================== */
.saacademy-creative-cta-figure .seo-hidden1 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
/*
.saacademy-creative-cta-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 55%,
rgba(8, 43, 92, 0.45) 100%
);
pointer-events: none;
} */
/* =========================================================
PINK ACCENT BUTTON
========================================================= */
.saacademy-creative-cta-accent {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 10;
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--saacademy-pink);
color: #ffffff;
box-shadow:
0 12px 28px rgba(233, 30, 115, 0.25);
transition:
transform 0.35s ease;
}
.saacademy-creative-cta-accent i {
font-size: 24px;
}
.saacademy-creative-cta-wrapper:hover
.saacademy-creative-cta-accent {
transform: rotate(8deg) scale(1.05);
}
/* =========================================================
LANGUAGE CAPTION
========================================================= */
.saacademy-creative-cta-caption {
position: absolute;
z-index: 10;
left: 55px;
bottom: 55px;
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.saacademy-creative-cta-caption span {
padding: 7px 12px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.90);
color: var(--saacademy-navy);
font-size: 8px;
font-weight: 800;
letter-spacing: 1.5px;
backdrop-filter: blur(5px);
}
/* =========================================================
DECORATIVE SHAPE
========================================================= */
.saacademy-creative-cta-wrapper::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -90px;
top: -90px;
border-radius: 50%;
border: 30px solid rgba(23, 105, 194, 0.08);
pointer-events: none;
}
.saacademy-creative-cta-wrapper::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
left: 45%;
bottom: -60px;
border-radius: 50%;
background: rgba(233, 30, 115, 0.06);
pointer-events: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1199.98px) {
.saacademy-creative-cta-content {
padding-left: 55px;
}
.saacademy-creative-cta-content h2 {
font-size: 52px;
}
.saacademy-creative-cta-visual {
height: 460px;
padding: 25px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991.98px) {
.saacademy-creative-cta {
padding: 65px 0;
}
.saacademy-creative-cta-wrapper {
border-radius: 26px;
}
.saacademy-creative-cta-content {
padding: 55px 35px 45px;
}
.saacademy-creative-cta-content h2 {
font-size: 48px;
letter-spacing: -2px;
text-align: center;
}
.saacademy-creative-cta-visual {
height: 430px;
padding: 20px;
}
}
/* ==========================================
CREATIVE CTA - MOBILE CENTER ALIGNMENT
========================================== */
@media (max-width: 767px) {
.saacademy-creative-cta-content {
text-align: center;
}
.saacademy-creative-cta-label {
justify-content: center;
align-items: center;
margin-bottom: 22px;
text-align: center;
}
.saacademy-creative-cta-content h2 {
max-width: 100%;
margin-left: auto;
margin-right: auto;
font-size: clamp(38px, 10vw, 52px);
line-height: 1.08;
letter-spacing: -1.8px;
}
.saacademy-creative-cta-content p {
max-width: 100%;
margin: 20px auto 28px;
text-align: center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.saacademy-creative-cta {
padding: 45px 0;
}
.saacademy-creative-cta-wrapper {
border-radius: 20px;
}
.saacademy-creative-cta-content {
padding: 40px 23px 35px;
}
.saacademy-creative-cta-label {
margin-bottom: 22px;
font-size: 9px;
letter-spacing: 2px;
}
.saacademy-creative-cta-label span {
width: 28px;
}
.saacademy-creative-cta-content h2 {
font-size: 39px;
line-height: 1.04;
letter-spacing: -1.5px;
}
.saacademy-creative-cta-content p {
margin: 18px 0 25px;
font-size: 12px;
line-height: 1.6;
}
.saacademy-creative-cta-button {
width: 100%;
min-height: 50px;
}
.saacademy-creative-cta-visual {
height: 340px;
padding: 14px;
}
.saacademy-creative-cta-image {
border-radius: 90px 20px 20px 20px;
}
.saacademy-creative-cta-accent {
width: 52px;
height: 52px;
right: 5px;
bottom: 5px;
}
.saacademy-creative-cta-accent i {
font-size: 18px;
}
.saacademy-creative-cta-caption {
left: 30px;
bottom: 28px;
}
.saacademy-creative-cta-caption span {
padding: 6px 8px;
font-size: 6px;
}
}
/* =========================================
SA ACADEMY CREATIVE FOOTER
========================================= */
.saacademy-footer {
--saacademy-navy: #082b5c;
--saacademy-blue: #1769c2;
--saacademy-pink: #e91e73;
position: relative;
width: 100%;
overflow: hidden;
background:
linear-gradient(
135deg,
#061f43 0%,
#082b5c 48%,
#0a3c79 100%
);
color: #ffffff;
font-family: "Manrope", sans-serif;
}
/* =========================================
DECORATIVE GLOW
========================================= */
.saacademy-footer-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(10px);
}
.saacademy-footer-glow-one {
width: 420px;
height: 420px;
left: -220px;
top: -250px;
background:
radial-gradient(
circle,
rgba(23,105,194,.30) 0%,
rgba(23,105,194,0) 70%
);
}
.saacademy-footer-glow-two {
width: 380px;
height: 380px;
right: -190px;
bottom: -220px;
background:
radial-gradient(
circle,
rgba(233,30,115,.18) 0%,
rgba(233,30,115,0) 70%
);
}
/* =========================================
CIRCLES
========================================= */
.saacademy-footer-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.saacademy-footer-circle-one {
width: 230px;
height: 230px;
left: -150px;
bottom: 80px;
border: 42px solid rgba(255,255,255,.025);
}
.saacademy-footer-circle-two {
width: 190px;
height: 190px;
right: -100px;
top: 90px;
border: 35px solid rgba(255,255,255,.025);
}
/* =========================================
MAIN FOOTER
========================================= */
.saacademy-footer-main {
position: relative;
z-index: 2;
padding: 85px 0 65px;
}
/* =========================================
BRAND
========================================= */
.saacademy-footer-brand {
max-width: 390px;
}
.saacademy-footer-logo {
display: inline-flex;
align-items: center;
margin-bottom: 22px;
text-decoration: none;
}
.saacademy-footer-logo img {
display: block;
width: auto;
max-width: 220px;
max-height: 75px;
object-fit: contain;
}
.saacademy-footer-brand-line {
width: 45px;
height: 3px;
margin-bottom: 22px;
border-radius: 10px;
background: var(--saacademy-pink);
}
.saacademy-footer-brand h3 {
margin: 0;
color: #ffffff;
font-size: 28px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.8px;
}
.saacademy-footer-brand h3 span {
display: block;
color: var(--saacademy-pink);
}
.saacademy-footer-brand p {
max-width: 350px;
margin: 20px 0 28px;
color: rgba(255,255,255,.68);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
}
/* =========================================
FOOTER BUTTON
========================================= */
.saacademy-footer-button {
display: inline-flex;
align-items: center;
gap: 18px;
min-height: 51px;
padding: 0 23px;
border-radius: 50px;
background: var(--saacademy-pink);
color: #ffffff;
text-decoration: none;
font-size: 13px;
font-weight: 800;
transition:
transform .35s ease,
background .35s ease,
box-shadow .35s ease;
}
.saacademy-footer-button i {
font-size: 16px;
transition: transform .35s ease;
}
.saacademy-footer-button:hover {
color: #ffffff;
background: var(--saacademy-blue);
transform: translateY(-3px);
box-shadow:
0 12px 30px rgba(23,105,194,.25);
}
.saacademy-footer-button:hover i {
transform: translateX(5px);
}
/* =========================================
COLUMN HEADING
========================================= */
.saacademy-footer-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 26px;
justify-content: center;
}
.saacademy-footer-heading span {
width: 28px;
height: 2px;
border-radius: 5px;
background: var(--saacademy-pink);
}
.saacademy-footer-heading h4 {
margin: 0;
color: #ffffff;
font-size: 17px;
font-weight: 800;
}
/* =========================================
FOOTER LINKS
========================================= */
.saacademy-footer-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.saacademy-footer-column ul li {
margin-bottom: 14px;
}
.saacademy-footer-column ul li a {
display: inline-flex;
align-items: center;
gap: 9px;
color: rgba(255, 255, 255, 0.68);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.saacademy-footer-column ul li a i {
flex: 0 0 auto;
color: var(--saacademy-pink);
font-size: 9px;
transition:
transform 0.3s ease,
color 0.3s ease;
}
.saacademy-footer-column ul li a:hover {
color: #ffffff;
transform: translateX(4px);
}
.saacademy-footer-column ul li a:hover i {
color: #ffffff;
transform: translateX(3px);
}
/* =========================================
CONTACT LIST
========================================= */
.saacademy-footer-contact-list {
display: flex;
flex-direction: column;
gap: 11px;
}
.saacademy-footer-contact {
display: flex;
align-items: center;
gap: 13px;
min-height: 60px;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,.07);
border-radius: 13px;
background: rgba(255,255,255,.035);
color: #ffffff;
text-decoration: none;
transition:
background .35s ease,
border-color .35s ease,
transform .35s ease;
}
.saacademy-footer-contact:hover {
color: #ffffff;
border-color:
rgba(233,30,115,.35);
background:
rgba(255,255,255,.07);
transform: translateX(4px);
}
.saacademy-footer-contact-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: rgba(233,30,115,.13);
color: var(--saacademy-white);
font-size: 15px;
}
.saacademy-footer-contact div:nth-child(2) {
flex: 1;
}
.saacademy-footer-contact small {
display: block;
margin-bottom: 3px;
color: rgba(255,255,255,.42);
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.saacademy-footer-contact strong {
display: block;
color: rgba(255,255,255,.88);
font-size: 12px;
font-weight: 700;
}
.saacademy-footer-contact > i {
color: rgba(255,255,255,.35);
font-size: 13px;
transition:
color .3s ease,
transform .3s ease;
}
.saacademy-footer-contact:hover > i {
color: var(--saacademy-white);
transform: translate(2px,-2px);
}
/* =========================================
SOCIAL
========================================= */
.saacademy-footer-social-title {
margin-top: 27px;
margin-bottom: 11px;
color: rgba(255,255,255,.45);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
}
.saacademy-footer-social {
display: flex;
align-items: center;
gap: 9px;
justify-content: center;
}
.saacademy-footer-social a {
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
background: rgba(255,255,255,.035);
color: rgba(255,255,255,.75);
text-decoration: none;
font-size: 14px;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.saacademy-footer-social a:hover {
border-color: var(--saacademy-pink);
background: var(--saacademy-pink);
color: #ffffff;
transform: translateY(-4px);
}
/* =========================================
BOTTOM
========================================= */
.saacademy-footer-bottom {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
min-height: 75px;
border-top: 1px solid rgba(255,255,255,.10);
}
/* LEFT */
.saacademy-footer-copyright {
justify-self: start;
color: rgba(255,255,255,.48);
font-size: 11px;
font-weight: 500;
}
.saacademy-footer-copyright strong {
color: rgba(255,255,255,.82);
font-weight: 700;
}
.saacademy-footer-copyright a {
color: rgba(255,255,255,.82);
text-decoration: none;
font-weight: 700;
transition: color .3s ease;
}
.saacademy-footer-copyright a:hover {
color: var(--saacademy-pink);
}
/* CENTER */
.saacademy-footer-bottom-links {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.saacademy-footer-bottom-links a {
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: 11px;
font-weight: 500;
transition: color .3s ease;
}
.saacademy-footer-bottom-links a:hover {
color: var(--saacademy-pink);
}
.saacademy-footer-bottom-links span {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--saacademy-pink);
}
/* RIGHT */
.saacademy-footer-powered {
justify-self: end;
color: rgba(255,255,255,.42);
font-size: 11px;
font-weight: 500;
}
.saacademy-footer-powered a {
color: rgba(255,255,255,.78);
text-decoration: none;
font-weight: 700;
transition: color .3s ease;
}
.saacademy-footer-powered a:hover {
color: var(--saacademy-pink);
}
.saacademy-footer-copyright strong {
margin-left: 5px;
margin-right: 5px;
}
.saacademy-footer-powered a {
margin-left: 7px;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991.98px) {
.saacademy-footer-main {
padding: 65px 0 50px;
}
.saacademy-footer-brand h3 {
font-size: 27px;
}
.saacademy-footer-column {
margin-top: 8px;
}
}
/* =========================================================
SA ACADEMY FOOTER - MOBILE CENTER ALIGNMENT
========================================================= */
@media (max-width: 767.98px) {
/* Main footer */
.saacademy-footer-main {
text-align: center !important;
}
/* Bootstrap columns */
.saacademy-footer-main .row {
justify-content: center !important;
text-align: center !important;
}
.saacademy-footer-main .row > div {
text-align: center !important;
}
/* =========================================
BRAND
========================================= */
.saacademy-footer-brand {
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center !important;
}
.saacademy-footer-logo {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100%;
}
.saacademy-footer-logo img {
margin: 0 auto !important;
}
.saacademy-footer-brand-line {
margin: 0 auto 22px !important;
}
.saacademy-footer-brand h3 {
text-align: center !important;
}
.saacademy-footer-brand p {
max-width: 350px;
margin: 20px auto 28px !important;
text-align: center !important;
}
.saacademy-footer-button {
display: inline-flex !important;
margin: 0 auto !important;
}
/* =========================================
FOOTER COLUMN
========================================= */
.saacademy-footer-column {
width: 100%;
margin: 0 auto;
text-align: center !important;
}
/* =========================================
HEADING
========================================= */
.saacademy-footer-heading {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100%;
text-align: center !important;
}
/* =========================================
LINKS
========================================= */
.saacademy-footer-column ul {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center !important;
}
.saacademy-footer-column ul li {
text-align: center !important;
width: 100%;
}
.saacademy-footer-column ul li a {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
/* =========================================
CONTACT
========================================= */
.saacademy-footer-contact-list {
width: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.saacademy-footer-contact {
width: 100%;
max-width: 350px;
margin-left: auto !important;
margin-right: auto !important;
/* Keep the contact box itself readable */
text-align: left !important;
}
/* =========================================
SOCIAL
========================================= */
.saacademy-footer-social-title {
width: 100%;
text-align: center !important;
}
.saacademy-footer-social {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100%;
}
/* =========================================
FOOTER BOTTOM
========================================= */
.saacademy-footer-bottom {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
text-align: center !important;
gap: 12px;
padding: 20px 15px !important;
}
.saacademy-footer-copyright {
width: 100%;
text-align: center !important;
justify-self: center !important;
}
.saacademy-footer-bottom-links {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100%;
text-align: center !important;
}
.saacademy-footer-powered {
width: 100%;
text-align: center !important;
justify-self: center !important;
}
/* Footer columns */
.saacademy-footer-column {
width: 100%;
text-align: center !important;
}
/* Heading */
.saacademy-footer-heading {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 10px;
margin-bottom: 20px !important;
}
.saacademy-footer-heading span {
width: 28px;
height: 2px;
}
.saacademy-footer-heading h4 {
margin: 0;
}
/* Make footer links inline */
/* .saacademy-footer-column ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
width: 100%;
padding: 0 !important;
margin: 0 auto !important;
list-style: none;
} */
/* .saacademy-footer-column ul li {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center;
} */
/* Links */
/* .saacademy-footer-column ul li a {
display: none !important;
align-items: center !important;
justify-content: center !important;
padding: 5px 10px !important;
color: rgba(255,255,255,.72) !important;
text-decoration: none;
white-space: nowrap;
transform: none !important;
} */
/* Hide original chevron icons */
/* .saacademy-footer-column ul li a i {
display: none !important;
} */
/* Diamond separator */
/* .saacademy-footer-column ul li:not(:last-child)::after {
content: "â—†";
display: inline-block;
color: rgba(255,255,255,.65);
font-size: 7px;
margin: 0 2px;
} */
/* Hover */
.saacademy-footer-column ul li a:hover {
color: #ffffff;
transform: translateX(4px);
}
.saacademy-footer-column ul li a:hover i {
color: #ffffff;
transform: translateX(3px);
}
}
/* =========================================
MOBILE
========================================= */
/* =========================================
MOBILE FOOTER - CENTER EVERYTHING
========================================= */
@media (max-width: 575.98px) {
.saacademy-footer-main {
text-align: center;
}
/* Brand section */
.saacademy-footer-brand {
max-width: 100%;
margin: 0 auto;
}
.saacademy-footer-logo {
justify-content: center;
}
.saacademy-footer-brand-line {
margin-left: auto;
margin-right: auto;
}
.saacademy-footer-brand p {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Button */
.saacademy-footer-button {
justify-content: center;
}
/* Footer columns */
.saacademy-footer-column {
width: 100%;
margin-top: 30px;
text-align: center;
}
/* Column headings */
.saacademy-footer-heading {
justify-content: center;
}
/* Footer links */
.saacademy-footer-column ul {
text-align: center;
}
.saacademy-footer-column ul li {
text-align: center;
}
.saacademy-footer-column ul li a {
justify-content: center;
}
/* Contact section */
.saacademy-footer-contact-list {
align-items: center;
}
.saacademy-footer-contact {
width: 100%;
max-width: 340px;
justify-content: center;
text-align: left;
}
/* Social section */
.saacademy-footer-social-title {
text-align: center;
}
.saacademy-footer-social {
justify-content: center;
}
/* Bottom footer */
.saacademy-footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
padding: 20px 15px;
}
.saacademy-footer-copyright {
width: 100%;
text-align: center;
}
.saacademy-footer-bottom-links {
width: 100%;
justify-content: center;
text-align: center;
}
.saacademy-footer-powered {
width: 100%;
text-align: center;
}
.saacademy-footer-main {
padding: 55px 0 40px;
}
.saacademy-footer-logo img {
max-width: 190px;
}
.saacademy-footer-brand h3 {
font-size: 25px;
}
.saacademy-footer-brand p {
font-size: 13px;
}
.saacademy-footer-heading h4 {
font-size: 16px;
}
.saacademy-footer-column ul li a {
font-size: 13px;
}
.saacademy-footer-contact strong {
font-size: 11px;
}
.saacademy-footer-bottom {
flex-direction: column;
justify-content: center;
padding: 18px 0;
text-align: center;
}
.saacademy-footer-bottom-links {
flex-wrap: wrap;
justify-content: center;
}
.saacademy-footer-circle-one {
width: 180px;
height: 180px;
left: -130px;
bottom: 30px;
}
.saacademy-footer-circle-two {
width: 150px;
height: 150px;
right: -90px;
top: 40px;
}
}
/* ==========================================
FOOTER NAVIGATION
3 - 3 CENTER ALIGNMENT
========================================== */
@media (max-width: 575.98px) {
.saacademy-footer-column {
text-align: center !important;
}
.saacademy-footer-heading {
justify-content: center !important;
text-align: center !important;
}
.saacademy-footer-column ul {
display: grid !important;
/* 3 items in each row */
grid-template-columns: repeat(3, 1fr) !important;
width: 100% !important;
max-width: 330px !important;
margin: 0 auto !important;
padding: 0 !important;
gap: 12px 5px !important;
list-style: none !important;
}
.saacademy-footer-column ul li {
/* IMPORTANT: remove the old span-2 positioning */
grid-column: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.saacademy-footer-column ul li a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 11px !important;
white-space: nowrap !important;
text-align: center !important;
}
}
/* =====================================================
SA ACADEMY FOOTER - MOBILE FULL CENTER ALIGNMENT
===================================================== */
@media (max-width: 575.98px) {
/* Main footer */
.saacademy-footer-main {
text-align: center !important;
}
/* Every footer column */
.saacademy-footer-main .row > [class*="col-"],
.saacademy-footer-column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Brand */
.saacademy-footer-brand {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
.saacademy-footer-logo {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
.saacademy-footer-logo img {
margin: 0 auto !important;
}
.saacademy-footer-brand-line {
margin: 0 auto 22px !important;
}
.saacademy-footer-brand p {
width: 100% !important;
max-width: 360px !important;
margin: 20px auto 28px !important;
text-align: center !important;
}
/* Button */
.saacademy-footer-button {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 auto !important;
}
/* Column headings */
.saacademy-footer-heading {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
text-align: center !important;
}
/* Links */
.saacademy-footer-column ul {
width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
text-align: center !important;
}
.saacademy-footer-column ul li {
width: 100% !important;
text-align: center !important;
}
.saacademy-footer-column ul li a {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
/* Contact */
.saacademy-footer-contact-list {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.saacademy-footer-contact {
width: 100% !important;
max-width: 350px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: left !important;
}
/* Social title */
.saacademy-footer-social-title {
width: 100% !important;
text-align: center !important;
}
/* Social icons */
.saacademy-footer-social {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* Bottom footer */
.saacademy-footer-bottom {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 12px !important;
padding: 20px 15px !important;
}
.saacademy-footer-copyright,
.saacademy-footer-bottom-links,
.saacademy-footer-powered {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.saacademy-footer-bottom-links {
flex-wrap: wrap !important;
}
}
/* =====================================================
EXPLORE + LANGUAGE SIDE BY SIDE
ONLY BETWEEN 580px AND 765px
===================================================== */
@media (min-width: 576px) and (max-width: 765px) {
/* Keep footer columns in normal layout */
.saacademy-footer-main .row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
/* Brand - full width */
.saacademy-footer-main .row > div:first-child {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* Explore */
.saacademy-footer-main .row > div:nth-child(2) {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
margin-top: 30px !important;
text-align: center !important;
}
/* Language */
.saacademy-footer-main .row > div:nth-child(3) {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
margin-top: 30px !important;
text-align: center !important;
}
/* Contact - full width below */
.saacademy-footer-main .row > div:nth-child(4) {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
margin-top: 35px !important;
}
/* Center headings */
.saacademy-footer-main .row > div:nth-child(2) .saacademy-footer-heading,
.saacademy-footer-main .row > div:nth-child(3) .saacademy-footer-heading {
justify-content: center !important;
}
/* Center links */
.saacademy-footer-main .row > div:nth-child(2) ul,
.saacademy-footer-main .row > div:nth-child(3) ul {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
.saacademy-footer-main .row > div:nth-child(2) ul li,
.saacademy-footer-main .row > div:nth-child(3) ul li {
width: 100% !important;
text-align: center !important;
}
.saacademy-footer-main .row > div:nth-child(2) ul li a,
.saacademy-footer-main .row > div:nth-child(3) ul li a {
justify-content: center !important;
}
}
/* about us */
/* tutor's profile */
/* =========================================================
SAINT ANTHONY ACADEMY
TUTOR'S PROFILE
========================================================= */
/* =========================================================
PAGE HERO
========================================================= */
.sa-tutor-hero {
position: relative;
overflow: hidden;
padding: 95px 0;
background:
linear-gradient(
135deg,
#f7faff 0%,
#ffffff 60%,
#fff5f9 100%
);
}
.sa-tutor-hero-shape {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.sa-tutor-hero-shape-one {
width: 480px;
height: 480px;
top: -300px;
right: -180px;
border: 90px solid rgba(23, 105, 194, 0.045);
}
.sa-tutor-hero-shape-two {
width: 260px;
height: 260px;
bottom: -180px;
left: -120px;
border: 55px solid rgba(233, 30, 115, 0.045);
}
.sa-tutor-hero-content {
position: relative;
z-index: 2;
}
.sa-tutor-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 20px;
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.4px;
}
.sa-tutor-eyebrow span {
width: 38px;
height: 2px;
background: #e91e73;
}
.sa-tutor-hero h1 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(50px, 6vw, 76px);
font-weight: 700;
line-height: 1;
letter-spacing: -2px;
}
.sa-tutor-hero h1 em {
color: #e91e73;
font-style: italic;
}
.sa-tutor-hero-content > p {
max-width: 650px;
margin: 27px 0 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.9;
}
.sa-tutor-breadcrumb {
display: flex;
align-items: center;
gap: 9px;
margin-top: 26px;
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 700;
}
.sa-tutor-breadcrumb a {
color: #1769c2;
}
.sa-tutor-breadcrumb span {
color: #6d7e94;
}
.sa-tutor-breadcrumb i {
color: #e91e73;
}
/* =========================================================
HERO PROFILE CIRCLE
========================================================= */
.sa-tutor-profile-circle {
position: relative;
width: 295px;
height: 295px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 30px 80px rgba(8, 43, 92, 0.13);
}
.sa-tutor-profile-circle::before {
content: "";
position: absolute;
inset: -15px;
border: 1px solid rgba(23, 105, 194, 0.18);
border-radius: 50%;
}
.sa-tutor-profile-circle::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
top: 25px;
right: -15px;
border-radius: 50%;
background: rgba(233, 30, 115, 0.08);
}
.sa-tutor-monogram {
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
145deg,
#082b5c,
#1769c2
);
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 50px;
font-weight: 700;
box-shadow:
0 15px 35px rgba(8, 43, 92, 0.22);
}
.sa-tutor-circle-name {
margin-top: 20px;
text-align: center;
}
.sa-tutor-circle-name strong {
display: block;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 800;
}
.sa-tutor-circle-name span {
display: block;
margin-top: 5px;
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.sa-tutor-circle-line {
width: 35px;
height: 3px;
margin-top: 20px;
border-radius: 10px;
background: #e91e73;
}
/* =========================================================
PROFILE INTRO
========================================================= */
.sa-tutor-profile-intro {
padding: 110px 0;
background: #ffffff;
}
.sa-tutor-name-card {
position: relative;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 55px;
overflow: hidden;
border-radius: 18px;
background:
linear-gradient(
145deg,
#082b5c 0%,
#1769c2 100%
);
box-shadow:
0 25px 65px rgba(8, 43, 92, 0.15);
}
.sa-tutor-name-card::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -120px;
top: -120px;
border: 55px solid rgba(255, 255, 255, 0.045);
border-radius: 50%;
}
.sa-tutor-name-card-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
.sa-tutor-name-card-top span {
color: rgba(255, 255, 255, 0.62);
font-family: "Manrope", sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-tutor-name-card-top i {
color: #ffffff;
font-size: 21px;
}
.sa-tutor-large-name {
position: relative;
z-index: 2;
margin-top: 42px;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(42px, 5vw, 61px);
line-height: 0.98;
}
.sa-tutor-large-name em {
color: #ffffff;
font-style: italic;
}
.sa-tutor-name-line {
position: relative;
z-index: 2;
width: 45px;
height: 3px;
margin-top: 32px;
background: #e91e73;
}
.sa-tutor-name-card p {
position: relative;
z-index: 2;
margin: 16px 0 0;
color: rgba(255, 255, 255, 0.72);
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.7;
}
.sa-tutor-profile-content {
padding-left: 25px;
}
.sa-tutor-section-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 17px;
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-tutor-section-label span {
width: 32px;
height: 2px;
background: #e91e73;
}
.sa-tutor-profile-content h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(40px, 4vw, 55px);
line-height: 1.08;
}
.sa-tutor-profile-content h2 span {
color: #1769c2;
}
.sa-tutor-profile-content > p {
margin: 21px 0 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.9;
}
.sa-tutor-language-box {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
padding: 16px;
border: 1px solid #e6edf5;
border-radius: 14px;
background: #ffffff;
box-shadow:
0 10px 30px rgba(8, 43, 92, 0.05);
}
.sa-tutor-language-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #fff1f7;
color: #e91e73;
font-size: 18px;
}
.sa-tutor-language-box small {
display: block;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.5px;
}
.sa-tutor-language-box strong {
display: block;
margin-top: 4px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 800;
}
/* =========================================================
QUALIFICATION
========================================================= */
.sa-tutor-qualification {
padding: 100px 0;
background:
linear-gradient(
135deg,
#f8fbff,
#ffffff
);
}
.sa-tutor-heading-center {
max-width: 680px;
margin: 0 auto 50px;
text-align: center;
}
.sa-tutor-heading-center h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(40px, 4vw, 55px);
line-height: 1.1;
}
.sa-tutor-heading-center h2 em {
color: #e91e73;
font-style: italic;
}
.sa-tutor-heading-center p {
max-width: 570px;
margin: 15px auto 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.8;
}
.sa-tutor-qualification-card {
position: relative;
display: flex;
align-items: center;
gap: 24px;
padding: 28px 35px;
overflow: hidden;
border: 1px solid #e6edf5;
border-radius: 17px;
background: #ffffff;
box-shadow:
0 20px 50px rgba(8, 43, 92, 0.07);
}
.sa-tutor-qualification-icon {
width: 63px;
height: 63px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background: #082b5c;
color: #ffffff;
font-size: 21px;
}
.sa-tutor-qualification-content small {
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.7px;
}
.sa-tutor-qualification-content h3 {
margin: 7px 0 0;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 19px;
font-weight: 800;
}
.sa-tutor-qualification-number {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
color: rgba(23, 105, 194, 0.055);
font-family: "Playfair Display", serif;
font-size: 80px;
font-weight: 700;
}
/* =========================================================
AWARDS
========================================================= */
.sa-tutor-awards {
position: relative;
overflow: hidden;
padding: 110px 0;
background:
linear-gradient(
135deg,
#061f43 0%,
#082b5c 55%,
#1769c2 100%
);
}
.sa-tutor-awards-circle {
position: absolute;
width: 500px;
height: 500px;
right: -230px;
top: -260px;
border: 90px solid rgba(255, 255, 255, 0.035);
border-radius: 50%;
}
.sa-tutor-light-label {
color: #ffffff;
}
.sa-tutor-light-label span {
background: #e91e73;
}
.sa-tutor-awards h2 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(42px, 5vw, 62px);
line-height: 1.05;
}
.sa-tutor-awards h2 em {
color: #ffffff;
font-style: italic;
}
.sa-tutor-awards-description {
margin: 0;
color: rgba(255, 255, 255, 0.65);
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.8;
}
.sa-tutor-award-card {
position: relative;
min-height: 220px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 15px;
background: rgba(255, 255, 255, 0.055);
transition:
transform 0.35s ease,
background 0.35s ease,
border-color 0.35s ease;
}
.sa-tutor-award-card:hover {
transform: translateY(-7px);
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.20);
}
.sa-tutor-award-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.sa-tutor-award-top span {
color: rgba(255, 255, 255, 0.32);
font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 800;
}
.sa-tutor-award-top i {
color: #e91e73;
font-size: 21px;
}
.sa-tutor-award-card h3 {
margin: 28px 0 16px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 800;
line-height: 1.5;
}
.sa-tutor-award-country {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.62);
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 600;
}
.sa-tutor-award-country i {
color: #e91e73;
}
/* =========================================================
EXPERIENCE
========================================================= */
/* .sa-tutor-experience {
padding: 110px 0;
background: #ffffff;
}
.sa-tutor-experience-intro {
max-width: 470px;
}
.sa-tutor-experience-intro h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(42px, 4vw, 56px);
line-height: 1.08;
}
.sa-tutor-experience-intro h2 em {
color: #1769c2;
font-style: italic;
}
.sa-tutor-experience-intro > p {
margin-top: 19px;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.8;
}
.sa-tutor-timeline {
position: relative;
padding-left: 35px;
}
.sa-tutor-timeline::before {
content: "";
position: absolute;
left: 7px;
top: 7px;
bottom: 7px;
width: 1px;
background: #e6edf5;
}
.sa-tutor-timeline-item {
position: relative;
padding-bottom: 42px;
}
.sa-tutor-timeline-item:last-child {
padding-bottom: 0;
}
.sa-tutor-timeline-dot {
position: absolute;
left: -35px;
top: 2px;
width: 15px;
height: 15px;
border: 4px solid #ffffff;
border-radius: 50%;
background: #e91e73;
box-shadow:
0 0 0 1px #e91e73;
}
.sa-tutor-timeline-item:nth-child(2)
.sa-tutor-timeline-dot {
background: #1769c2;
box-shadow:
0 0 0 1px #1769c2;
}
.sa-tutor-timeline-item:nth-child(3)
.sa-tutor-timeline-dot {
background: #082b5c;
box-shadow:
0 0 0 1px #082b5c;
}
.sa-tutor-timeline-item small {
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.5px;
}
.sa-tutor-timeline-item h3 {
margin: 7px 0 8px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 18px;
font-weight: 800;
}
.sa-tutor-timeline-item p {
margin: 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.8;
} */
/* =========================================================
PROFESSIONAL EXPERIENCE
========================================================= */
.sa-tutor-experience {
position: relative;
padding: 115px 0;
overflow: hidden;
background: #f7faff;
}
/* =========================================================
SECTION HEADER
========================================================= */
.sa-tutor-experience-header {
position: relative;
margin-bottom: 55px;
}
.sa-tutor-experience-header .sa-tutor-section-label {
margin-bottom: 20px;
}
.sa-tutor-experience-header h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(42px, 5vw, 62px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -1.5px;
}
.sa-tutor-experience-header h2 em {
color: #1769c2;
font-style: italic;
}
.sa-tutor-experience-header p {
margin: 0 auto 4px;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.9;
text-align: center;
}
/* =========================================================
EXPERIENCE GRID
========================================================= */
.sa-tutor-experience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* =========================================================
EXPERIENCE CARD
========================================================= */
.sa-tutor-experience-card {
position: relative;
min-height: 390px;
display: flex;
flex-direction: column;
padding: 30px;
overflow: hidden;
border: 1px solid #e6edf5;
border-radius: 20px;
background: #ffffff;
box-shadow:
0 15px 45px rgba(8, 43, 92, 0.055);
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
border-color 0.4s ease;
}
/* Top accent */
.sa-tutor-experience-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #e91e73;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
/* Decorative circle */
.sa-tutor-experience-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -100px;
bottom: -100px;
border: 35px solid rgba(23, 105, 194, 0.045);
border-radius: 50%;
pointer-events: none;
}
/* Hover */
.sa-tutor-experience-card:hover {
transform: translateY(-8px);
border-color: rgba(23, 105, 194, 0.18);
box-shadow:
0 25px 60px rgba(8, 43, 92, 0.11);
}
.sa-tutor-experience-card:hover::before {
transform: scaleX(1);
}
/* =========================================================
CARD TOP
========================================================= */
.sa-tutor-experience-card-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.sa-tutor-experience-number {
color: #dce5f0;
font-family: "Playfair Display", serif;
font-size: 27px;
font-weight: 700;
}
.sa-tutor-experience-status {
padding: 7px 10px;
border-radius: 30px;
background: #fff1f7;
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.3px;
}
/* =========================================================
ICON
========================================================= */
.sa-tutor-experience-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 42px;
border-radius: 15px;
background: #082b5c;
color: #ffffff;
font-size: 21px;
box-shadow:
0 12px 25px rgba(8, 43, 92, 0.15);
}
/* Card 01 - Navy */
.sa-tutor-experience-card:nth-child(1)
.sa-tutor-experience-icon {
background: #082b5c;
box-shadow:
0 12px 25px rgba(8, 43, 92, 0.15);
}
/* Card 02 - Blue */
.sa-tutor-experience-card:nth-child(2)
.sa-tutor-experience-icon {
background: #1769c2;
box-shadow:
0 12px 25px rgba(23, 105, 194, 0.16);
}
/* Card 03 - Pink */
.sa-tutor-experience-card:nth-child(3)
.sa-tutor-experience-icon {
background: #e91e73;
box-shadow:
0 12px 25px rgba(233, 30, 115, 0.15);
}
/* =========================================================
CARD CONTENT
========================================================= */
.sa-tutor-experience-card h3 {
position: relative;
z-index: 2;
margin: 25px 0 12px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 21px;
font-weight: 800;
line-height: 1.25;
}
.sa-tutor-experience-card h3 span {
display: block;
color: #1769c2;
}
.sa-tutor-experience-card p {
position: relative;
z-index: 2;
max-width: 310px;
margin: 0 auto;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.85;
text-align: center;
}
/* =========================================================
CARD BOTTOM LINE
========================================================= */
.sa-tutor-experience-line {
width: 42px;
height: 3px;
margin-top: auto;
border-radius: 20px;
background: #e91e73;
transition: width 0.4s ease;
}
.sa-tutor-experience-card:hover
.sa-tutor-experience-line {
width: 75px;
}
/* =========================================================
ENSURE THIRD CARD IS ALSO WHITE
========================================================= */
.sa-tutor-experience-card-featured {
background: #ffffff;
border-color: #e6edf5;
box-shadow:
0 15px 45px rgba(8, 43, 92, 0.055);
}
.sa-tutor-experience-card-featured:hover {
transform: translateY(-8px);
border-color: rgba(23, 105, 194, 0.18);
box-shadow:
0 25px 60px rgba(8, 43, 92, 0.11);
}
.sa-tutor-experience-card-featured
.sa-tutor-experience-number {
color: #dce5f0;
}
.sa-tutor-experience-card-featured
.sa-tutor-experience-status {
background: #fff1f7;
color: #e91e73;
}
.sa-tutor-experience-card-featured
.sa-tutor-experience-icon {
background: #e91e73;
color: #ffffff;
box-shadow:
0 12px 25px rgba(233, 30, 115, 0.15);
}
.sa-tutor-experience-card-featured h3 {
color: #082b5c;
}
.sa-tutor-experience-card-featured h3 span {
color: #1769c2;
}
.sa-tutor-experience-card-featured p {
color: #6d7e94;
}
.sa-tutor-experience-card-featured
.sa-tutor-experience-line {
background: #e91e73;
}
/* =========================================================
BOTTOM STATEMENT
========================================================= */
.sa-tutor-experience-footer {
display: flex;
align-items: center;
gap: 20px;
max-width: 850px;
margin: 55px auto 0;
padding-top: 28px;
border-top: 1px solid #e2eaf3;
}
.sa-tutor-experience-footer-mark {
width: 45px;
height: 45px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff1f7;
color: #e91e73;
font-size: 16px;
}
.sa-tutor-experience-footer p {
margin: 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.8;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.sa-tutor-experience {
padding: 90px 0;
}
.sa-tutor-experience-header p {
margin: 25px 0 0;
}
.sa-tutor-experience-grid {
grid-template-columns: 1fr 1fr;
}
.sa-tutor-experience-card:last-child {
grid-column: 1 / -1;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.sa-tutor-experience {
padding: 75px 0;
}
.sa-tutor-experience-header {
margin-bottom: 40px;
}
.sa-tutor-experience-header h2 {
font-size: 42px;
}
.sa-tutor-experience-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.sa-tutor-experience-card {
min-height: 350px;
}
.sa-tutor-experience-card:last-child {
grid-column: auto;
}
.sa-tutor-experience-footer {
align-items: flex-start;
margin-top: 40px;
}
.sa-tutor-experience-card p{
text-align: center;
justify-content: center;
align-items: center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sa-tutor-experience-header h2 {
font-size: 38px;
letter-spacing: -0.8px;
}
.sa-tutor-experience-card {
min-height: 330px;
padding: 25px;
border-radius: 17px;
}
.sa-tutor-experience-icon {
margin-top: 35px;
}
.sa-tutor-experience-card h3 {
font-size: 19px;
}
.sa-tutor-experience-footer {
gap: 14px;
}
.sa-tutor-experience-card p{
text-align: center;
justify-content: center;
align-items: center;
}
}
/* =========================================================
MOBILE RESPONSIVE - EXPERIENCE CARDS
========================================================= */
@media (max-width: 767px) {
.sa-tutor-experience-grid {
grid-template-columns: 1fr;
}
.sa-tutor-experience-card {
text-align: center;
align-items: center;
}
.sa-tutor-experience-card-top {
width: 100%;
}
.sa-tutor-experience-icon {
margin-left: auto;
margin-right: auto;
}
.sa-tutor-experience-card h3 {
text-align: center;
}
.sa-tutor-experience-card p {
max-width: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sa-tutor-experience-line {
margin-left: auto;
margin-right: auto;
}
.sa-tutor-contact-intro p {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
/* =========================================================
BALI AWARD
========================================================= */
.sa-tutor-bali {
padding: 100px 0;
background:
linear-gradient(
135deg,
#f8fbff,
#ffffff
);
}
.sa-tutor-bali-card {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
min-height: 390px;
overflow: hidden;
border-radius: 20px;
background: #ffffff;
box-shadow:
0 25px 65px rgba(8, 43, 92, 0.09);
}
.sa-tutor-bali-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 55px;
}
.sa-tutor-bali-content h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(36px, 4vw, 50px);
line-height: 1.1;
}
.sa-tutor-bali-content h2 em {
color: #e91e73;
font-style: italic;
}
.sa-tutor-bali-content p {
max-width: 420px;
margin: 18px 0 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.8;
}
.sa-tutor-bali-visual {
min-height: 390px;
background:
linear-gradient(
145deg,
#082b5c,
#1769c2
);
}
/* PLACEHOLDER UNTIL ACTUAL PHOTO IS AVAILABLE */
.sa-tutor-image-placeholder {
width: 100%;
height: 100%;
min-height: 390px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: rgba(255, 255, 255, 0.55);
}
.sa-tutor-image-placeholder i {
font-size: 42px;
}
.sa-tutor-image-placeholder span {
margin-top: 12px;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 700;
}
.sa-tutor-image-placeholder small {
margin-top: 5px;
color: rgba(255, 255, 255, 0.4);
font-family: "Manrope", sans-serif;
font-size: 8px;
}
/*
WHEN YOU HAVE THE REAL PHOTO:
Replace the placeholder with:
Then use:
.sa-tutor-bali-visual img {
width: 100%;
height: 100%;
min-height: 390px;
display: block;
object-fit: cover;
}
*/
/* =========================================================
CONTACT
========================================================= */
.sa-tutor-contact {
padding: 100px 0;
background: #ffffff;
}
.sa-tutor-contact-box {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 60px;
align-items: center;
padding: 55px;
border: 1px solid #e6edf5;
border-radius: 20px;
background:
linear-gradient(
135deg,
#f8fbff,
#ffffff
);
}
.sa-tutor-contact-intro h2 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(40px, 4vw, 54px);
}
.sa-tutor-contact-intro h2 em {
color: #e91e73;
font-style: italic;
}
.sa-tutor-contact-intro p {
max-width: 390px;
margin: 17px auto 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.8;
text-align: center;
}
.sa-tutor-contact-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.sa-tutor-contact-link {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid #e6edf5;
border-radius: 14px;
background: #ffffff;
text-decoration: none;
transition: 0.35s ease;
}
.sa-tutor-contact-link:hover {
transform: translateX(6px);
border-color: rgba(23, 105, 194, 0.25);
box-shadow:
0 12px 30px rgba(8, 43, 92, 0.07);
}
.sa-tutor-contact-icon {
width: 47px;
height: 47px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #082b5c;
color: #ffffff;
}
.sa-tutor-contact-link:nth-child(2)
.sa-tutor-contact-icon {
background: #e91e73;
}
.sa-tutor-contact-text {
flex: 1;
}
.sa-tutor-contact-text small {
display: block;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.4px;
}
.sa-tutor-contact-text strong {
display: block;
margin-top: 4px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
}
.sa-tutor-contact-link > i {
color: #1769c2;
}
/* =========================================================
GOOGLE REVIEWS
========================================================= */
.sa-tutor-reviews {
padding: 90px 0;
background: #1f539d;
}
.sa-tutor-reviews-content {
text-align: center;
}
.sa-tutor-stars {
display: flex;
justify-content: center;
gap: 5px;
margin-bottom: 17px;
}
.sa-tutor-stars i {
color: #ffffff;
font-size: 13px;
}
.sa-tutor-reviews h2 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(38px, 4vw, 53px);
}
.sa-tutor-reviews h2 em {
color: #ffffff;
font-style: italic;
}
.sa-tutor-reviews p {
margin: 13px 0 24px;
color: rgba(255, 255, 255, 0.68);
font-family: "Manrope", sans-serif;
font-size: 11px;
}
.sa-tutor-reviews-button {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 13px 20px 13px 23px;
border-radius: 50px;
background: #ffffff;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 800;
text-decoration: none;
transition: 0.35s ease;
}
.sa-tutor-reviews-button i {
color: #e91e73;
}
.sa-tutor-reviews-button:hover {
color: #082b5c;
transform: translateY(-3px);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.18);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.sa-tutor-hero {
padding: 75px 0;
text-align: center;
}
.sa-tutor-eyebrow {
justify-content: center;
}
.sa-tutor-hero-content > p {
margin-left: auto;
margin-right: auto;
}
.sa-tutor-breadcrumb {
justify-content: center;
}
.sa-tutor-profile-circle {
width: 265px;
height: 265px;
margin-top: 30px;
}
.sa-tutor-profile-intro {
padding: 85px 0;
}
.sa-tutor-profile-content {
padding-left: 0;
}
.sa-tutor-name-card {
max-width: 550px;
margin: 0 auto;
}
.sa-tutor-awards {
padding: 85px 0;
}
.sa-tutor-experience {
padding: 85px 0;
}
.sa-tutor-bali {
padding: 85px 0;
}
.sa-tutor-contact {
padding: 85px 0;
}
.sa-tutor-contact-box {
grid-template-columns: 1fr;
gap: 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.sa-tutor-hero {
padding: 60px 0;
}
.sa-tutor-hero h1 {
font-size: 48px;
letter-spacing: -1px;
}
.sa-tutor-hero-content > p {
font-size: 12px;
line-height: 1.8;
}
.sa-tutor-profile-circle {
width: 235px;
height: 235px;
margin-top: 30px;
}
.sa-tutor-monogram {
width: 75px;
height: 75px;
font-size: 40px;
}
.sa-tutor-circle-name strong {
font-size: 14px;
}
.sa-tutor-circle-name span {
font-size: 7px;
}
.sa-tutor-profile-intro {
padding: 70px 0;
}
.sa-tutor-name-card {
min-height: 350px;
padding: 38px;
}
.sa-tutor-large-name {
font-size: 47px;
}
.sa-tutor-profile-content {
margin-top: 5px;
}
.sa-tutor-profile-content h2 {
font-size: 40px;
}
.sa-tutor-profile-content > p {
font-size: 11px;
}
.sa-tutor-qualification {
padding: 70px 0;
}
.sa-tutor-heading-center h2 {
font-size: 40px;
}
.sa-tutor-qualification-card {
padding: 22px;
gap: 16px;
}
.sa-tutor-qualification-icon {
width: 52px;
height: 52px;
font-size: 18px;
}
.sa-tutor-qualification-content h3 {
font-size: 14px;
line-height: 1.5;
}
.sa-tutor-qualification-number {
display: none;
}
.sa-tutor-awards {
padding: 70px 0;
}
.sa-tutor-awards h2 {
font-size: 40px;
}
.sa-tutor-awards-description {
margin-top: 15px;
}
.sa-tutor-award-card {
min-height: 205px;
}
.sa-tutor-experience {
padding: 70px 0;
}
.sa-tutor-experience-intro h2 {
font-size: 40px;
}
.sa-tutor-timeline {
margin-top: 25px;
}
.sa-tutor-bali {
padding: 70px 0;
}
.sa-tutor-bali-card {
grid-template-columns: 1fr;
}
.sa-tutor-bali-content {
padding: 38px;
}
.sa-tutor-bali-content h2 {
font-size: 38px;
}
.sa-tutor-bali-visual {
min-height: 239px;
}
.sa-tutor-image-placeholder {
min-height: 300px;
}
.sa-tutor-contact {
padding: 70px 0;
}
.sa-tutor-contact-box {
padding: 35px 25px;
}
.sa-tutor-contact-intro h2 {
font-size: 40px;
}
.sa-tutor-reviews {
padding: 70px 0;
}
.sa-tutor-reviews h2 {
font-size: 39px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sa-tutor-hero {
padding: 50px 0;
}
.sa-tutor-eyebrow {
font-size: 8px;
letter-spacing: 1.6px;
}
.sa-tutor-eyebrow span {
width: 27px;
}
.sa-tutor-hero h1 {
font-size: 40px;
}
.sa-tutor-hero-content > p {
font-size: 11px;
}
.sa-tutor-breadcrumb {
font-size: 8px;
}
.sa-tutor-profile-circle {
width: 205px;
height: 205px;
}
.sa-tutor-monogram {
width: 65px;
height: 65px;
font-size: 34px;
}
.sa-tutor-circle-name strong {
font-size: 12px;
}
.sa-tutor-circle-name span {
font-size: 6px;
}
.sa-tutor-profile-intro {
padding: 55px 0;
}
.sa-tutor-name-card {
min-height: 315px;
padding: 28px;
}
.sa-tutor-large-name {
font-size: 39px;
}
.sa-tutor-name-card-top span {
font-size: 7px;
}
.sa-tutor-profile-content h2 {
font-size: 34px;
}
.sa-tutor-section-label {
font-size: 8px;
letter-spacing: 1.5px;
justify-content: center;
}
.sa-tutor-section-label span {
width: 25px;
}
.sa-tutor-profile-content > p {
font-size: 10px;
}
.sa-tutor-language-box {
padding: 13px;
}
.sa-tutor-language-icon {
width: 40px;
height: 40px;
}
.sa-tutor-language-box strong {
font-size: 11px;
}
.sa-tutor-qualification {
padding: 55px 0;
}
.sa-tutor-heading-center h2 {
font-size: 34px;
}
.sa-tutor-heading-center p {
font-size: 10px;
}
.sa-tutor-qualification-card {
padding: 18px;
}
.sa-tutor-qualification-icon {
width: 45px;
height: 45px;
font-size: 15px;
}
.sa-tutor-qualification-content small {
font-size: 7px;
}
.sa-tutor-qualification-content h3 {
font-size: 11px;
}
.sa-tutor-awards {
padding: 55px 0;
}
.sa-tutor-awards h2 {
font-size: 34px;
}
.sa-tutor-award-card {
min-height: 185px;
padding: 21px;
}
.sa-tutor-award-card h3 {
font-size: 13px;
}
.sa-tutor-experience {
padding: 55px 0;
}
.sa-tutor-experience-intro h2 {
font-size: 34px;
}
.sa-tutor-timeline-item h3 {
font-size: 15px;
}
.sa-tutor-timeline-item p {
font-size: 10px;
}
.sa-tutor-bali {
padding: 55px 0;
}
.sa-tutor-bali-content {
padding: 30px 24px;
}
.sa-tutor-bali-content h2 {
font-size: 32px;
}
.sa-tutor-bali-content p {
font-size: 10px;
}
.sa-tutor-contact {
padding: 55px 0;
}
.sa-tutor-contact-box {
padding: 28px 20px;
}
.sa-tutor-contact-intro h2 {
font-size: 34px;
}
.sa-tutor-contact-link {
padding: 13px;
gap: 10px;
}
.sa-tutor-contact-icon {
width: 40px;
height: 40px;
}
.sa-tutor-contact-text strong {
font-size: 10px;
}
.sa-tutor-reviews {
padding: 55px 0;
}
.sa-tutor-reviews h2 {
font-size: 32px;
}
.sa-tutor-reviews p {
font-size: 10px;
}
.sa-tutor-reviews-button {
font-size: 9px;
padding: 11px 16px;
}
}
/* figure caption css */
/* =========================================================
FIGURE IMAGE FIX
Keeps images at their original size when using
========================================================= */
figure {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
figure > img {
display: block;
width: 100%;
max-width: 100%;
}
figure > figcaption {
margin: 0;
padding: 0;
}
/* SEO HIDDEN CAPTION */
.seo-hidden1 {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* dropdown awards page css code */
/* =========================================================
SA ACADEMY
AWARDS PAGE
========================================================= */
:root {
--sa-navy: #082b5c;
--sa-blue: #1769c2;
--sa-pink: #e91e73;
--sa-white: #ffffff;
--sa-text: #102d52;
--sa-muted: #6d7e94;
--sa-border: #e6edf5;
--sa-pink-light: #fff1f7;
--sa-soft-blue: #f4f8fd;
--sa-green: #49d7ad;
}
/* =========================================================
GLOBAL
========================================================= */
.sa-awards-page {
overflow: hidden;
background: #ffffff;
color: var(--sa-text);
font-family: "Manrope", sans-serif;
}
.sa-awards-page *,
.sa-awards-page *::before,
.sa-awards-page *::after {
box-sizing: border-box;
}
.sa-awards-page button {
font-family: inherit;
}
.sa-awards-page img {
max-width: 100%;
}
/* =========================================================
HERO
========================================================= */
.sa-awards-hero {
position: relative;
min-height: 550px;
display: flex;
align-items: center;
overflow: hidden;
background:
radial-gradient(
circle at 82% 20%,
rgba(23,105,194,.30),
transparent 32%
),
radial-gradient(
circle at 12% 90%,
rgba(233,30,115,.13),
transparent 30%
),
linear-gradient(
135deg,
#061f43 0%,
#082b5c 55%,
#0a3d79 100%
);
}
.sa-awards-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size: 70px 70px;
mask-image: linear-gradient(
to bottom,
black,
transparent
);
}
.sa-awards-hero-content {
position: relative;
z-index: 3;
max-width: 820px;
padding: 100px 0 90px;
}
.sa-awards-eyebrow {
display: flex;
align-items: center;
/* justify-content: center; */
gap: 13px;
margin-bottom: 25px;
color: #e91e73;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
}
.sa-awards-eyebrow span {
width: 35px;
height: 2px;
background: #e91e73;
}
.sa-awards-hero h1 {
max-width: 780px;
margin: 0 auto;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(48px, 6vw, 78px);
font-weight: 600;
line-height: 1.03;
letter-spacing: -2.5px;
}
.sa-awards-hero h1 strong {
display: inline-block;
color: #ffffff;
font-weight: 600;
}
.sa-awards-hero h1 strong::after {
content: "";
display: block;
width: 110px;
height: 5px;
margin-top: 14px;
border-radius: 20px;
background: var(--sa-pink);
}
.sa-awards-hero p {
max-width: 787px;
margin: 38px auto 0;
color: rgba(255,255,255,.72);
font-size: 15px;
line-height: 1.9;
}
.sa-awards-hero-meta {
display: flex;
align-items: center;
gap: 28px;
margin-top: 42px;
}
.sa-awards-hero-meta div:not(.sa-awards-meta-line) {
display: flex;
align-items: center;
gap: 12px;
}
.sa-awards-hero-meta strong {
color: #ffffff;
font-size: 26px;
font-weight: 800;
text-align: center;
}
.sa-awards-hero-meta span {
color: rgba(255,255,255,.50);
font-size: 9px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 1px;
text-transform: uppercase;
}
.sa-awards-meta-line {
width: 1px;
height: 34px;
background: rgba(255,255,255,.18);
}
/* =========================================================
HERO DECORATIONS
========================================================= */
.sa-awards-hero-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(8px);
}
.sa-awards-hero-glow-one {
width: 520px;
height: 520px;
right: -200px;
top: -220px;
background:
radial-gradient(
circle,
rgba(23,105,194,.28),
transparent 70%
);
}
.sa-awards-hero-glow-two {
width: 350px;
height: 350px;
left: -180px;
bottom: -220px;
background:
radial-gradient(
circle,
rgba(233,30,115,.16),
transparent 70%
);
}
.sa-awards-hero-ring {
position: absolute;
border: 1px solid rgba(255,255,255,.07);
border-radius: 50%;
}
.sa-awards-hero-ring-one {
width: 430px;
height: 430px;
right: -180px;
bottom: -250px;
}
.sa-awards-hero-ring-two {
width: 260px;
height: 260px;
right: 40px;
top: 70px;
}
/* =========================================================
AWARDS HERO CONTENT + IMAGE
========================================================= */
.sa-awards-hero {
position: relative;
overflow: hidden;
}
.sa-awards-hero .container {
position: relative;
}
.sa-awards-hero-content {
position: relative;
z-index: 5;
width: 56%;
max-width: 720px;
padding: 110px 0 100px;
}
/* =========================================================
HERO IMAGE
========================================================= */
.sa-awards-hero-image-wrap {
position: absolute;
top: 0;
right: -10vw;
width: 60%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
pointer-events: none;
}
.sa-awards-hero-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.sa-awards-hero-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: scale(1.04);
}
/* =========================================================
LEFT SIDE BLENDING
THIS MAKES THE IMAGE MERGE INTO THE NAVY
========================================================= */
.sa-awards-hero-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
#082b5c 0%,
rgba(8,43,92,.98) 8%,
rgba(8,43,92,.90) 17%,
rgba(8,43,92,.68) 28%,
rgba(8,43,92,.38) 42%,
rgba(8,43,92,.12) 58%,
transparent 72%
);
}
/* =========================================================
TOP + BOTTOM BLENDING
========================================================= */
.sa-awards-hero-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(8,43,92,.30) 0%,
transparent 24%,
transparent 70%,
rgba(8,43,92,.60) 100%
);
}
/* =========================================================
SOFT BLUE GLOW BEHIND IMAGE
========================================================= */
.sa-awards-hero-image-wrap::after {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: 4%;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(23,105,194,.20);
filter: blur(90px);
z-index: -1;
pointer-events: none;
}
/* =========================================================
INTRO
========================================================= */
.sa-awards-intro {
padding: 105px 0 70px;
background: #ffffff;
}
.sa-awards-section-label {
display: flex;
align-items: center;
/* justify-content: center; */
gap: 10px;
margin-bottom: 20px;
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-align: center;
}
.sa-awards-section-label span {
width: 30px;
height: 2px;
background: var(--sa-pink);
}
.sa-awards-intro h2 {
max-width: 700px;
margin: 0 auto;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(38px, 4.5vw, 58px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -1.5px;
}
.sa-awards-intro h2 em {
color: var(--sa-blue);
font-style: normal;
}
.sa-awards-intro-text {
max-width: 470px;
margin: 0 auto 5px;
color: var(--sa-muted);
font-size: 14px;
line-height: 1.9;
/* text-align: center; */
}
/* =========================================================
GALLERY SECTION
========================================================= */
.sa-awards-gallery-section {
padding: 30px 0 115px;
background: #ffffff;
}
.sa-awards-gallery-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
margin-bottom: 25px;
border-top: 1px solid var(--sa-border);
border-bottom: 1px solid var(--sa-border);
}
.sa-awards-gallery-count {
margin-right: 15px;
color: var(--sa-navy);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
.sa-awards-gallery-caption {
color: var(--sa-muted);
font-size: 11px;
font-weight: 600;
}
.sa-awards-gallery-note {
display: flex;
align-items: center;
gap: 8px;
color: var(--sa-muted);
font-size: 10px;
font-weight: 600;
}
.sa-awards-gallery-note i {
color: var(--sa-pink);
}
/* =========================================================
AWARD CARD
========================================================= */
.sa-award-card {
height: 100%;
background: #ffffff;
border: 1px solid var(--sa-border);
transition:
transform .45s ease,
box-shadow .45s ease,
border-color .45s ease;
}
.sa-award-card:hover {
transform: translateY(-8px);
border-color: rgba(23,105,194,.20);
box-shadow:
0 25px 60px rgba(8,43,92,.12);
}
.sa-award-image-wrap {
position: relative;
display: block;
width: 100%;
height: 330px;
padding: 0;
overflow: hidden;
border: 0;
background: #f5f7fa;
cursor: pointer;
}
.sa-award-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background:
linear-gradient(
135deg,
#f8fafc,
#eef3f9
);
}
.sa-award-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition:
transform .6s ease;
}
.sa-award-card:hover .sa-award-image img {
transform: scale(1.035);
}
/* =========================================================
VIEW BUTTON
========================================================= */
.sa-award-view {
position: absolute;
right: 17px;
bottom: 17px;
width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--sa-navy);
color: #ffffff;
font-size: 15px;
box-shadow:
0 8px 25px rgba(8,43,92,.25);
transition:
background .3s ease,
transform .3s ease;
}
.sa-award-card:hover .sa-award-view {
background: var(--sa-pink);
transform: rotate(90deg);
}
/* =========================================================
CARD CONTENT
========================================================= */
.sa-award-card-content {
display: flex;
gap: 14px;
min-height: 105px;
padding: 21px 20px;
}
.sa-award-number {
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}
.sa-award-card-content h3 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 17px;
font-weight: 600;
line-height: 1.35;
}
.sa-award-card-content p {
margin: 7px 0 0;
color: var(--sa-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* =========================================================
STATEMENT
========================================================= */
.sa-awards-statement {
padding: 0 0 110px;
background: #ffffff;
}
.sa-awards-statement-box {
position: relative;
display: flex;
align-items: center;
gap: 55px;
min-height: 340px;
padding: 70px 75px;
overflow: hidden;
background: var(--sa-pink-light);
}
.sa-awards-statement-mark {
color: rgba(233,30,115,.14);
font-family: Georgia, serif;
font-size: 150px;
line-height: .6;
}
.sa-awards-statement-content {
position: relative;
z-index: 2;
max-width: 760px;
}
.sa-awards-statement-content h2 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 600;
line-height: 1.15;
}
.sa-awards-statement-content h2 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
.sa-awards-statement-content p {
max-width: 580px;
margin: 20px 0 0;
color: var(--sa-muted);
font-size: 14px;
line-height: 1.85;
}
.sa-awards-statement-line {
position: absolute;
right: -100px;
bottom: -180px;
width: 420px;
height: 420px;
border: 70px solid rgba(23,105,194,.05);
border-radius: 50%;
}
/* =========================================================
CTA
========================================================= */
.sa-awards-cta {
padding: 0 0 110px;
background: #ffffff;
}
.sa-awards-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 55px 65px;
background: var(--sa-navy);
}
.sa-awards-cta-label {
display: block;
margin-bottom: 13px;
color: #e91e73;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-awards-cta h2 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(30px, 3.5vw, 45px);
font-weight: 600;
line-height: 1.15;
}
.sa-awards-cta-button {
display: inline-flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
padding: 16px 21px;
border: 1px solid rgba(255,255,255,.18);
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease;
}
.sa-awards-cta-button i {
font-size: 17px;
transition: transform .3s ease;
}
.sa-awards-cta-button:hover {
border-color: var(--sa-pink);
background: var(--sa-pink);
color: #ffffff;
transform: translateY(-3px);
}
.sa-awards-cta-button:hover i {
transform: translate(3px,-3px);
}
/* =========================================================
MODAL
========================================================= */
.sa-awards-modal .modal-dialog {
max-width: 1080px;
}
.sa-awards-modal .modal-content {
position: relative;
overflow: hidden;
border: 0;
border-radius: 0;
background: #071f43;
}
.sa-awards-modal .modal-body {
padding: 45px 50px 40px;
}
.sa-awards-modal-close {
position: absolute;
z-index: 20;
top: 17px;
right: 17px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
background: rgba(255,255,255,.07);
color: #ffffff;
font-size: 14px;
cursor: pointer;
transition:
background .3s ease,
transform .3s ease;
}
.sa-awards-modal-close:hover {
background: var(--sa-pink);
transform: rotate(90deg);
}
/* =========================================================
MODAL COUNTER
========================================================= */
.sa-modal-counter {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
color: rgba(255,255,255,.5);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-modal-counter #saCurrentAward {
color: #ffffff;
}
.sa-modal-counter-line {
width: 35px;
height: 1px;
background: var(--sa-pink);
}
/* =========================================================
MODAL IMAGE
========================================================= */
.sa-awards-modal .carousel-inner {
background: rgba(255,255,255,.035);
}
.sa-awards-modal .carousel-item {
height: 65vh;
min-height: 450px;
max-height: 700px;
}
.sa-modal-award-image {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
padding: 20px 70px;
}
/* =========================================================
MODAL NAVIGATION
========================================================= */
.sa-awards-modal .carousel-control-prev,
.sa-awards-modal .carousel-control-next {
width: 70px;
opacity: 1;
}
.sa-modal-nav {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
background: rgba(8,43,92,.8);
color: #ffffff;
transition:
background .3s ease,
transform .3s ease;
}
.carousel-control-prev:hover .sa-modal-nav {
background: var(--sa-pink);
transform: translateX(-3px);
}
.carousel-control-next:hover .sa-modal-nav {
background: var(--sa-pink);
transform: translateX(3px);
}
/* =========================================================
MODAL INFORMATION
========================================================= */
.sa-modal-information {
padding: 25px 10px 0;
text-align: center;
}
.sa-modal-information > span {
color: #e91e73;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-modal-information h3 {
margin: 7px 0 3px;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 25px;
font-weight: 600;
}
.sa-modal-information p {
margin: 0;
color: rgba(255,255,255,.50);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.reveal-award {
opacity: 0;
transform: translateY(25px);
transition:
opacity .8s ease,
transform .8s ease;
}
.reveal-award.award-visible {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.sa-awards-hero {
min-height: 500px;
}
.sa-awards-intro {
padding-top: 80px;
}
.sa-awards-intro-text {
margin-left: 0;
}
.sa-award-image-wrap {
height: 320px;
}
.sa-awards-statement-box {
padding: 55px;
gap: 30px;
}
.sa-awards-cta-inner {
padding: 45px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.sa-awards-hero {
min-height: auto;
}
.sa-awards-hero-content {
padding: 85px 20px 75px;
text-align: center;
}
.sa-awards-eyebrow {
justify-content: center;
font-size: 9px;
letter-spacing: 1.8px;
}
.sa-awards-hero h1 {
font-size: clamp(40px, 12vw, 58px);
letter-spacing: -1.5px;
}
.sa-awards-hero h1 strong::after {
margin-left: auto;
margin-right: auto;
}
.sa-awards-hero p {
margin-left: auto;
margin-right: auto;
font-size: 13px;
}
.sa-awards-hero-meta {
justify-content: center;
}
.sa-awards-hero {
min-height: auto;
}
.sa-awards-hero .container {
position: relative;
}
/* TEXT FIRST */
.sa-awards-hero-content {
width: 100%;
max-width: none;
padding: 75px 0 45px;
position: relative;
z-index: 5;
}
/* IMAGE BELOW CONTENT */
.sa-awards-hero-image-wrap {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
height: 380px;
margin: 0;
padding: 0 20px 60px;
box-sizing: border-box;
display: block;
z-index: 2;
pointer-events: none;
}
.sa-awards-hero-image {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
border-radius: 20px;
}
.sa-awards-hero-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: none;
}
/* REMOVE DESKTOP SIDE BLEND */
.sa-awards-hero-image::before {
background:
linear-gradient(
180deg,
rgba(8,43,92,.12) 0%,
transparent 25%,
transparent 78%,
rgba(8,43,92,.38) 100%
);
}
.sa-awards-hero-image::after {
background: none;
}
/* SOFT GLOW */
.sa-awards-hero-image-wrap::after {
width: 280px;
height: 280px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
filter: blur(70px);
opacity: .5;
}
/* INTRO */
.sa-awards-intro {
padding: 70px 20px 45px;
text-align: center;
}
.sa-awards-section-label {
justify-content: center;
}
.sa-awards-intro h2 {
font-size: 38px;
}
.sa-awards-intro-text {
margin: 25px auto 0;
}
/* GALLERY */
.sa-awards-gallery-section {
padding: 25px 15px 75px;
}
.sa-awards-gallery-top {
display: block;
text-align: center;
}
.sa-awards-gallery-note {
justify-content: center;
margin-top: 10px;
}
.sa-award-image-wrap {
height: 360px;
}
/* STATEMENT */
.sa-awards-statement {
padding: 0 15px 75px;
}
.sa-awards-statement-box {
display: block;
padding: 45px 30px;
text-align: center;
}
.sa-awards-statement-mark {
font-size: 90px;
margin-bottom: 15px;
}
.sa-awards-section-label {
justify-content: center;
}
.sa-awards-statement-content p {
margin-left: auto;
margin-right: auto;
}
/* CTA */
.sa-awards-cta {
padding: 0 15px 75px;
}
.sa-awards-cta-inner {
display: block;
padding: 40px 28px;
text-align: center;
}
.sa-awards-cta-button {
margin-top: 30px;
}
/* MODAL */
.sa-awards-modal .modal-body {
padding: 55px 10px 30px;
}
.sa-awards-modal .carousel-item {
height: 58vh;
min-height: 350px;
}
.sa-modal-award-image {
padding: 15px 45px;
}
.sa-awards-modal .carousel-control-prev,
.sa-awards-modal .carousel-control-next {
width: 48px;
}
.sa-modal-nav {
width: 38px;
height: 38px;
font-size: 12px;
}
.sa-modal-information {
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
.sa-modal-information h3 {
font-size: 20px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sa-awards-hero-content {
padding-left: 15px;
padding-right: 15px;
}
.sa-awards-hero-meta {
gap: 17px;
}
.sa-awards-hero-meta strong {
font-size: 21px;
}
.sa-awards-hero-meta span {
font-size: 8px;
}
.sa-awards-hero-content {
padding: 65px 20px 40px;
}
.sa-awards-hero-image-wrap {
width: 100%;
height: 330px;
margin: 0;
padding: 0 20px 65px;
box-sizing: border-box;
}
.sa-awards-hero-image {
width: 100%;
height: 100%;
border-radius: 18px;
}
.sa-awards-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.sa-awards-intro h2 {
font-size: 34px;
}
.sa-award-image-wrap {
height: 330px;
}
.sa-award-card-content {
min-height: 95px;
padding: 18px 16px;
}
.sa-award-card-content h3 {
font-size: 16px;
}
.sa-awards-statement-content h2 {
font-size: 31px;
}
}
/* course page css code */
/* =========================================================
SA ACADEMY - COURSES PAGE
========================================================= */
.saacademy-course-banner {
position: relative;
padding: 145px 0 110px;
background:
linear-gradient(
135deg,
#082b5c 0%,
#0b3b78 60%,
#1769c2 100%
);
overflow: hidden;
}
.saacademy-course-banner::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
top: -220px;
right: -120px;
}
.saacademy-course-banner::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border: 1px solid rgba(233,30,115,0.25);
border-radius: 50%;
bottom: -160px;
left: -80px;
}
.saacademy-course-banner-content {
position: relative;
z-index: 2;
max-width: 850px;
margin: auto;
text-align: center;
}
.saacademy-course-banner-label,
.saacademy-course-section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #e91e73;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-course-banner-label span,
.saacademy-course-section-label span {
width: 28px;
height: 1px;
background: currentColor;
}
.saacademy-course-banner h1 {
margin: 22px 0 20px;
color: #ffffff;
font-size: clamp(42px, 5vw, 70px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -2px;
}
.saacademy-course-banner h1 strong {
display: block;
color: #ffffff;
}
.saacademy-course-banner p {
max-width: 700px;
margin: 0 auto;
color: rgba(255,255,255,0.82);
font-size: 16px;
line-height: 1.8;
}
.saacademy-course-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 30px;
font-size: 13px;
}
.saacademy-course-breadcrumb a {
color: #ffffff;
text-decoration: none;
}
.saacademy-course-breadcrumb i {
color: #e91e73;
}
.saacademy-course-breadcrumb span {
color: rgba(255,255,255,0.65);
}
/* =========================================================
COURSE INTRO
========================================================= */
.saacademy-course-intro {
padding: 100px 0 70px;
background: #ffffff;
}
.saacademy-course-intro-content {
max-width: 780px;
margin: 0 auto 50px;
text-align: center;
}
.saacademy-course-intro-content h2,
.saacademy-course-benefits-header h2 {
margin: 20px 0;
color: #102d52;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.15;
font-weight: 700;
letter-spacing: -1.5px;
}
.saacademy-course-intro-content h2 strong,
.saacademy-course-benefits-header h2 strong {
color: #1769c2;
}
.saacademy-course-intro-content p {
max-width: 680px;
margin: auto;
color: #6d7e94;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
LANGUAGE NAVIGATION
========================================================= */
.saacademy-language-navigation {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 900px;
margin: 0 auto;
gap: 18px;
}
.saacademy-language-navigation a {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: #ffffff;
border: 1px solid rgba(8,43,92,0.09);
border-radius: 16px;
color: #102d52;
text-decoration: none;
box-shadow: 0 12px 35px rgba(8,43,92,0.07);
transition: all 0.3s ease;
}
.saacademy-language-navigation a:hover {
transform: translateY(-5px);
border-color: rgba(233,30,115,0.25);
box-shadow: 0 18px 40px rgba(8,43,92,0.11);
}
.saacademy-language-navigation img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
}
.saacademy-language-navigation span {
flex: 1;
font-size: 15px;
font-weight: 700;
}
.saacademy-language-navigation i {
color: #e91e73;
}
/* =========================================================
LANGUAGE COURSE SECTIONS
========================================================= */
.saacademy-language-course {
position: relative;
padding: 110px 0;
overflow: hidden;
}
.saacademy-italian-course {
background: #f8fbff;
}
.saacademy-german-course {
background: #ffffff;
}
.saacademy-spanish-course {
background: #fff8fb;
}
.saacademy-language-course-image {
position: relative;
}
.saacademy-language-course-image figure {
margin: 0;
position: relative;
overflow: hidden;
border-radius: 120px 28px 28px 28px;
box-shadow:
0 25px 60px rgba(8,43,92,0.13);
}
.saacademy-language-course-image img {
display: block;
width: 100%;
height: 520px;
object-fit: cover;
transition: transform 0.6s ease;
}
.saacademy-language-course-image:hover img {
transform: scale(1.04);
}
.saacademy-language-course-badge {
position: absolute;
right: 25px;
bottom: 25px;
display: flex;
flex-direction: column;
padding: 17px 22px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 15px 35px rgba(8,43,92,0.15);
}
.saacademy-language-course-badge strong {
color: #102d52;
font-size: 17px;
font-weight: 800;
}
.saacademy-language-course-badge span {
margin-top: 4px;
color: #6d7e94;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
.saacademy-language-course-content {
max-width: 570px;
}
.saacademy-language-course-label {
display: flex;
align-items: center;
gap: 10px;
color: #e91e73;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-language-course-label span {
width: 28px;
height: 1px;
background: currentColor;
}
.saacademy-language-course-content h2 {
margin: 20px 0;
color: #102d52;
font-size: clamp(36px, 4vw, 54px);
line-height: 1.12;
font-weight: 700;
letter-spacing: -1.5px;
}
.saacademy-language-course-content h2 strong {
display: block;
color: #1769c2;
}
.saacademy-language-course-content p {
color: #6d7e94;
font-size: 15px;
line-height: 1.85;
}
.saacademy-language-course-intro {
font-size: 16px !important;
color: #4f627a !important;
}
/* =========================================================
COURSE LEVELS
========================================================= */
.saacademy-course-levels {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 25px 0;
}
.saacademy-course-levels span {
min-width: 44px;
padding: 8px 12px;
border-radius: 8px;
background: #eaf3ff;
color: #1769c2;
font-size: 12px;
font-weight: 800;
text-align: center;
}
/* =========================================================
COURSE FEATURES
========================================================= */
.saacademy-language-features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.saacademy-language-features > div {
display: flex;
align-items: center;
gap: 8px;
color: #102d52;
font-size: 12px;
font-weight: 700;
}
.saacademy-language-features i {
color: #e91e73;
font-size: 17px;
}
/* =========================================================
COURSE BUTTON
========================================================= */
.saacademy-language-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: #082b5c;
border-radius: 9px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.saacademy-language-button i {
transition: transform 0.3s ease;
}
.saacademy-language-button:hover {
background: #1769c2;
color: #ffffff;
transform: translateY(-2px);
}
.saacademy-language-button:hover i {
transform: translateX(4px);
}
/* =========================================================
BENEFITS
========================================================= */
.saacademy-course-benefits {
padding: 110px 0;
background: #f7faff;
}
.saacademy-course-benefits-header {
max-width: 700px;
margin: 0 auto 50px;
text-align: center;
}
.saacademy-course-benefits-header p {
color: #6d7e94;
font-size: 15px;
}
.saacademy-benefit-card {
height: 100%;
padding: 35px 30px;
background: #ffffff;
border: 1px solid rgba(8,43,92,0.07);
border-radius: 18px;
text-align: center;
box-shadow: 0 12px 35px rgba(8,43,92,0.05);
transition: all 0.3s ease;
}
.saacademy-benefit-card:hover {
transform: translateY(-7px);
box-shadow: 0 20px 45px rgba(8,43,92,0.10);
}
.saacademy-benefit-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border-radius: 14px;
background: #fff1f7;
color: #e91e73;
font-size: 24px;
}
.saacademy-benefit-card h3 {
margin-bottom: 12px;
color: #102d52;
font-size: 18px;
font-weight: 800;
}
.saacademy-benefit-card p {
margin: 0;
color: #6d7e94;
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
CTA
========================================================= */
.saacademy-course-cta {
padding: 80px 0;
background: #1f539d;
}
.saacademy-course-cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 45px 50px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 24px;
background: rgba(255,255,255,0.04);
}
.saacademy-course-cta-content > div {
max-width: 650px;
}
.saacademy-course-cta-content span {
color: #082b5c;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-course-cta-content h2 {
margin: 12px 0;
color: #ffffff;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.15;
}
.saacademy-course-cta-content h2 strong {
color: #ffffff;
}
.saacademy-course-cta-content p {
margin: 0;
color: rgba(255,255,255,0.70);
font-size: 14px;
}
.saacademy-course-cta-button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 22px;
background: #e91e73;
border-radius: 9px;
color: #ffffff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: all 0.3s ease;
}
.saacademy-course-cta-button:hover {
background: #ffffff;
color: #082b5c;
transform: translateY(-3px);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991.98px) {
.saacademy-language-course {
padding: 80px 0;
}
.saacademy-language-course-content {
max-width: 100%;
}
.saacademy-language-course-image img {
height: 450px;
}
.saacademy-course-cta-content {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 767.98px) {
.saacademy-course-banner {
padding: 110px 0 80px;
}
.saacademy-course-intro {
padding: 75px 0 50px;
}
.saacademy-language-navigation {
grid-template-columns: 1fr;
max-width: 500px;
}
.saacademy-language-course {
padding: 70px 0;
}
.saacademy-language-course-image {
margin-bottom: 10px;
}
.saacademy-language-course-image figure {
border-radius: 70px 22px 22px 22px;
}
.saacademy-language-course-image img {
height: 380px;
}
.saacademy-language-course-content {
text-align: center;
}
.saacademy-language-course-label {
justify-content: center;
}
.saacademy-language-course-content h2 strong {
display: inline;
}
.saacademy-course-levels {
justify-content: center;
}
.saacademy-language-features {
justify-content: center;
}
.saacademy-language-button {
justify-content: center;
}
.saacademy-course-benefits {
padding: 75px 0;
}
.saacademy-course-cta {
padding: 60px 0;
}
.saacademy-course-cta-content {
align-items: center;
padding: 35px 25px;
text-align: center;
}
}
@media (max-width: 575.98px) {
.saacademy-course-banner h1 {
font-size: 40px;
letter-spacing: -1px;
}
.saacademy-course-banner p {
font-size: 14px;
}
.saacademy-language-course-image img {
height: 320px;
}
.saacademy-language-course-badge {
right: 15px;
bottom: 15px;
}
.saacademy-language-course-content h2 {
font-size: 34px;
}
.saacademy-language-features {
flex-direction: column;
align-items: center;
}
.saacademy-course-cta-content h2 {
font-size: 32px;
}
}
.saacademy-language-course {
scroll-margin-top: 100px;
}
/* css for testimony page */
/* =========================================================
SA ACADEMY - TESTIMONIALS PAGE
Existing Brand Colors Only
========================================================= */
.saacademy-testimonials-page {
background: #ffffff;
color: #102d52;
overflow: hidden;
}
/* =========================================================
BANNER
========================================================= */
.saacademy-testimonials-banner {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
background:
linear-gradient(
135deg,
#061f43 0%,
#082b5c 55%,
#0a3d79 100%
);
overflow: hidden;
}
.saacademy-testimonials-banner::before {
content: "";
position: absolute;
width: 430px;
height: 430px;
right: -140px;
top: -170px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 50%;
}
.saacademy-testimonials-banner::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
left: -130px;
bottom: -150px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
}
.saacademy-testimonials-banner-shape {
position: absolute;
width: 180px;
height: 180px;
right: 17%;
bottom: -110px;
background: rgba(233, 30, 115, 0.14);
border-radius: 50%;
}
.saacademy-testimonials-banner-content {
position: relative;
z-index: 2;
max-width: 760px;
padding: 100px 0 80px;
}
.saacademy-testimonials-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.5px;
margin-bottom: 20px;
}
.saacademy-testimonials-eyebrow::before {
content: "";
width: 32px;
height: 2px;
background: #e91e73;
}
.saacademy-testimonials-banner h1 {
margin: 0 0 20px;
color: #ffffff;
font-size: clamp(42px, 5vw, 68px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1.5px;
}
.saacademy-testimonials-banner p {
max-width: 650px;
margin: 0;
color: rgba(255,255,255,0.82);
font-size: 17px;
line-height: 1.8;
}
/* =========================================================
TESTIMONIALS BANNER IMAGE
========================================================= */
.saacademy-testimonials-banner-image-wrap {
position: absolute;
top: 0;
right: -8vw;
width: 57%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
pointer-events: none;
}
.saacademy-testimonials-banner-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.saacademy-testimonials-banner-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: scale(1.04);
}
/* =========================================================
IMAGE → BLUE BLENDING
========================================================= */
.saacademy-testimonials-banner-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
#082b5c 0%,
rgba(8,43,92,.98) 8%,
rgba(8,43,92,.88) 18%,
rgba(8,43,92,.65) 30%,
rgba(8,43,92,.35) 43%,
rgba(8,43,92,.10) 58%,
transparent 72%
);
}
/* =========================================================
TOP + BOTTOM BLEND
========================================================= */
.saacademy-testimonials-banner-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(8,43,92,.30) 0%,
transparent 25%,
transparent 70%,
rgba(8,43,92,.55) 100%
);
}
/* =========================================================
SOFT BLUE GLOW BEHIND IMAGE
========================================================= */
.saacademy-testimonials-banner-image-wrap::after {
content: "";
position: absolute;
width: 480px;
height: 480px;
right: 5%;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(23,105,194,.20);
filter: blur(90px);
z-index: -1;
pointer-events: none;
}
/* =========================================================
INTRO
========================================================= */
.saacademy-testimonials-intro {
padding: 100px 0 70px;
background: #ffffff;
}
.saacademy-testimonials-intro-inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.saacademy-section-label {
display: inline-block;
margin-bottom: 14px;
color: #e91e73;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.saacademy-testimonials-intro h2,
.saacademy-testimonials-heading h2 {
margin: 0 0 18px;
color: #082b5c;
font-size: clamp(30px, 4vw, 46px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.8px;
}
.saacademy-testimonials-intro p,
.saacademy-testimonials-heading p {
max-width: 720px;
margin: 0 auto;
color: #6d7e94;
font-size: 16px;
line-height: 1.85;
}
/* =========================================================
SECTION HEADING
========================================================= */
.saacademy-testimonials-heading {
text-align: center;
margin-bottom: 55px;
}
/* =========================================================
FEATURED TESTIMONIALS
========================================================= */
.saacademy-featured-testimonials {
padding: 80px 0 110px;
background: #fff1f7;
}
.saacademy-featured-testimonial {
position: relative;
height: 100%;
padding: 48px 45px 42px;
background: #ffffff;
border: 1px solid rgba(8, 43, 92, 0.08);
border-radius: 28px;
box-shadow:
0 20px 55px rgba(8, 43, 92, 0.09);
overflow: hidden;
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.saacademy-featured-testimonial::before {
content: "";
position: absolute;
width: 150px;
height: 150px;
right: -60px;
top: -60px;
background: #fff1f7;
border-radius: 50%;
}
.saacademy-featured-testimonial:hover {
transform: translateY(-8px);
box-shadow:
0 28px 65px rgba(8, 43, 92, 0.14);
}
.saacademy-featured-testimonial-blue {
background: #082b5c;
}
.saacademy-featured-testimonial-blue::before {
background: rgba(23, 105, 194, 0.25);
}
.saacademy-quote-icon {
position: absolute;
top: 28px;
right: 35px;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: #fff1f7;
color: #e91e73;
font-size: 30px;
}
.saacademy-featured-testimonial-blue .saacademy-quote-icon {
background: rgba(255,255,255,0.1);
}
.saacademy-featured-stars,
.saacademy-testimonial-stars {
display: flex;
gap: 4px;
margin-bottom: 24px;
color: #e91e73;
font-size: 13px;
}
.saacademy-featured-testimonial p {
position: relative;
z-index: 2;
margin-bottom: 17px;
color: #6d7e94;
font-size: 15px;
line-height: 1.85;
}
.saacademy-featured-testimonial-blue p {
color: rgba(255,255,255,0.78);
}
.saacademy-testimonial-author {
display: flex;
align-items: center;
gap: 14px;
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid rgba(8,43,92,0.09);
}
.saacademy-featured-testimonial-blue .saacademy-testimonial-author {
border-color: rgba(255,255,255,0.12);
}
.saacademy-author-avatar,
.saacademy-testimonial-avatar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #082b5c;
color: #ffffff;
font-weight: 800;
}
.saacademy-author-avatar {
width: 50px;
height: 50px;
border-radius: 16px;
background:
linear-gradient(
135deg,
#082b5c,
#1769c2
);
}
.saacademy-featured-testimonial-blue .saacademy-author-avatar {
background: #e91e73;
}
.saacademy-testimonial-author h4 {
margin: 0 0 3px;
color: #082b5c;
font-size: 15px;
font-weight: 800;
}
.saacademy-featured-testimonial-blue .saacademy-testimonial-author h4 {
color: #ffffff;
}
.saacademy-testimonial-author span {
color: #6d7e94;
font-size: 12px;
}
.saacademy-featured-testimonial-blue .saacademy-testimonial-author span {
color: rgba(255,255,255,0.65);
}
/* =========================================================
ALL TESTIMONIALS
========================================================= */
.saacademy-all-testimonials {
padding: 110px 0 120px;
background: #ffffff;
}
.saacademy-testimonial-card {
position: relative;
height: 100%;
padding: 32px 30px;
background: #ffffff;
border: 1px solid rgba(8,43,92,0.09);
border-radius: 22px;
box-shadow:
0 12px 38px rgba(8,43,92,0.055);
transition:
transform 0.4s ease,
border-color 0.4s ease,
box-shadow 0.4s ease;
}
.saacademy-testimonial-card::before {
content: "";
position: absolute;
top: 0;
left: 28px;
width: 42px;
height: 3px;
background: #e91e73;
border-radius: 0 0 5px 5px;
}
.saacademy-testimonial-card:hover {
transform: translateY(-8px);
border-color: rgba(23,105,194,0.18);
box-shadow:
0 22px 50px rgba(8,43,92,0.11);
}
.saacademy-testimonial-top {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.saacademy-testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 15px;
background:
linear-gradient(
135deg,
#082b5c,
#1769c2
);
font-size: 17px;
}
.saacademy-testimonial-person {
flex: 1;
}
.saacademy-testimonial-person h3 {
margin: 0 0 3px;
color: #082b5c;
font-size: 15px;
font-weight: 800;
line-height: 1.35;
}
.saacademy-testimonial-person span {
display: block;
color: #6d7e94;
font-size: 11px;
line-height: 1.45;
}
.saacademy-testimonial-icon {
color: #e91e73;
font-size: 27px;
opacity: 0.7;
}
.saacademy-testimonial-stars {
margin-bottom: 18px;
}
.saacademy-testimonial-card p {
margin-bottom: 14px;
color: #6d7e94;
font-size: 14px;
line-height: 1.8;
}
.saacademy-testimonial-card p:last-child {
margin-bottom: 0;
}
.saacademy-testimonial-highlight {
margin: 0 0 15px;
color: #082b5c;
font-size: 16px;
font-weight: 800;
line-height: 1.45;
}
/* =========================================================
CTA
========================================================= */
.saacademy-testimonials-cta {
padding: 100px 0;
background: #1f539d;
}
.saacademy-testimonials-cta-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 55px 60px;
border-radius: 30px;
background:
linear-gradient(
135deg,
#0b376f,
#1769c2
);
overflow: hidden;
}
.saacademy-testimonials-cta-inner::after {
content: "";
position: absolute;
width: 230px;
height: 230px;
right: -90px;
top: -100px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
}
.saacademy-cta-content {
position: relative;
z-index: 2;
}
.saacademy-cta-content .saacademy-section-label {
color: #ffffff;
}
.saacademy-cta-content h2 {
margin: 0 0 12px;
color: #ffffff;
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
line-height: 1.2;
}
.saacademy-cta-content p {
margin: 0;
color: rgba(255,255,255,0.75);
font-size: 15px;
}
.saacademy-testimonials-cta-btn {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-shrink: 0;
padding: 15px 24px;
border-radius: 50px;
background: #e91e73;
color: #ffffff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
box-shadow:
0 12px 30px rgba(233,30,115,0.25);
transition:
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-testimonials-cta-btn:hover {
color: #ffffff;
transform: translateY(-3px);
background: #d81768;
box-shadow:
0 18px 38px rgba(233,30,115,0.32);
}
.saacademy-testimonials-cta-btn i {
transition: transform 0.3s ease;
}
.saacademy-testimonials-cta-btn:hover i {
transform: translateX(5px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
.saacademy-testimonials-banner {
min-height: 380px;
}
.saacademy-testimonials-banner-content {
padding: 90px 0 70px;
}
.saacademy-featured-testimonial {
padding: 40px 32px;
}
.saacademy-testimonials-cta-inner {
padding: 45px;
}
}
@media (max-width: 767.98px) {
.saacademy-testimonials-banner {
min-height: 350px;
}
.saacademy-testimonials-banner-content {
padding: 80px 20px 60px;
text-align: center;
}
.saacademy-testimonials-eyebrow {
justify-content: center;
}
.saacademy-testimonials-banner h1 {
font-size: 40px;
}
.saacademy-testimonials-banner p {
font-size: 15px;
}
.saacademy-testimonials-banner {
min-height: auto;
}
.saacademy-testimonials-banner .container {
position: relative;
}
/* TEXT */
.saacademy-testimonials-banner-content {
max-width: none;
padding: 75px 0 45px;
position: relative;
z-index: 5;
}
/* IMAGE BELOW TEXT */
.saacademy-testimonials-banner-image-wrap {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
height: 380px;
margin: 0;
padding: 0 20px 60px;
box-sizing: border-box;
display: block;
z-index: 2;
}
.saacademy-testimonials-banner-image {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
}
.saacademy-testimonials-banner-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: none;
}
/* REMOVE DESKTOP SIDE FADE */
.saacademy-testimonials-banner-image::before {
background:
linear-gradient(
180deg,
rgba(8,43,92,.12) 0%,
transparent 25%,
transparent 78%,
rgba(8,43,92,.40) 100%
);
}
.saacademy-testimonials-banner-image::after {
background: none;
}
/* SOFT MOBILE GLOW */
.saacademy-testimonials-banner-image-wrap::after {
width: 280px;
height: 280px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
filter: blur(70px);
opacity: .5;
}
.saacademy-testimonials-intro {
padding: 75px 20px 50px;
}
.saacademy-featured-testimonials {
padding: 65px 20px 80px;
}
.saacademy-all-testimonials {
padding: 75px 20px 85px;
}
.saacademy-testimonials-cta {
padding: 70px 20px;
}
.saacademy-testimonials-cta-inner {
flex-direction: column;
text-align: center;
padding: 40px 25px;
gap: 25px;
}
.saacademy-cta-content p {
max-width: 480px;
margin: 0 auto;
}
}
@media (max-width: 575.98px) {
.saacademy-testimonials-banner-content {
padding: 75px 15px 55px;
}
.saacademy-testimonials-banner h1 {
font-size: 34px;
letter-spacing: -0.8px;
}
.saacademy-testimonials-banner p {
font-size: 14px;
line-height: 1.7;
}
.saacademy-testimonials-banner-content {
padding: 65px 20px 40px;
}
.saacademy-testimonials-banner-image-wrap {
width: 100%;
height: 330px;
margin: 0;
padding: 0 20px 65px;
box-sizing: border-box;
}
.saacademy-testimonials-banner-image {
width: 100%;
height: 100%;
border-radius: 18px;
}
.saacademy-testimonials-banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.saacademy-featured-testimonial {
padding: 38px 24px 30px;
border-radius: 22px;
}
.saacademy-quote-icon {
width: 48px;
height: 48px;
right: 20px;
top: 20px;
border-radius: 14px;
font-size: 25px;
}
.saacademy-featured-testimonial p {
font-size: 14px;
line-height: 1.75;
}
.saacademy-testimonial-card {
padding: 28px 23px;
border-radius: 20px;
}
.saacademy-testimonial-card p {
font-size: 13.5px;
line-height: 1.75;
}
.saacademy-testimonial-person h3 {
font-size: 14px;
}
.saacademy-testimonial-person span {
font-size: 10px;
}
.saacademy-testimonials-heading {
margin-bottom: 40px;
}
.saacademy-testimonials-intro h2,
.saacademy-testimonials-heading h2 {
font-size: 29px;
}
.saacademy-testimonials-intro p,
.saacademy-testimonials-heading p {
font-size: 14px;
line-height: 1.75;
}
.saacademy-testimonials-cta-btn {
width: 100%;
max-width: 250px;
}
}
.saacademy-testimonial-photo {
overflow: hidden;
}
.saacademy-testimonial-photo img {
width: 100%;
height: 116%;
object-fit: cover;
display: block;
}
/* =========================================================
TESTIMONIAL MASONRY LAYOUT
HTML REMAINS UNCHANGED
========================================================= */
.saacademy-all-testimonials .row {
display: block;
column-count: 3;
column-gap: 24px;
margin: 0;
}
/* Bootstrap columns */
.saacademy-all-testimonials .row > [class*="col-"] {
width: 100% !important;
display: inline-block;
padding: 0 !important;
margin: 0 0 24px;
vertical-align: top;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
/* Testimonial card */
.saacademy-all-testimonials .saacademy-testimonial-card {
width: 100%;
height: auto !important;
margin: 0;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.saacademy-all-testimonials .row {
column-count: 2;
column-gap: 20px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.saacademy-all-testimonials .row {
column-count: 1;
}
}
/* =========================================================
PREMIUM FLOATING WHATSAPP BUTTON
========================================================= */
.sa-whatsapp-button {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 9999;
display: flex;
align-items: center;
gap: 11px;
min-width: 58px;
height: 58px;
padding: 6px 18px 6px 6px;
border-radius: 50px;
background: #ffffff;
border: 1px solid rgba(8, 43, 92, 0.10);
box-shadow:
0 12px 35px rgba(8, 43, 92, 0.16),
0 4px 12px rgba(8, 43, 92, 0.08);
text-decoration: none;
overflow: visible;
animation:
saWhatsappFloat 3.5s ease-in-out infinite;
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
/* =========================================================
FLOATING ANIMATION
========================================================= */
@keyframes saWhatsappFloat {
0% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-4px) rotate(0.4deg);
}
50% {
transform: translateY(-8px) rotate(0deg);
}
75% {
transform: translateY(-4px) rotate(-0.4deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
/* =========================================
SAACADEMY SCROLL TO TOP BUTTON
========================================= */
.sa-scroll-top {
position: fixed;
right: 25px;
bottom: 95px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #082b5c;
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
box-shadow: 0 10px 25px rgba(8, 43, 92, 0.22);
transition:
opacity 0.35s ease,
visibility 0.35s ease,
transform 0.35s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
/* Show Button */
.sa-scroll-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Hover Effect */
.sa-scroll-top:hover {
background: #e91e73;
color: #ffffff;
transform: translateY(-5px);
box-shadow: 0 14px 30px rgba(233, 30, 115, 0.30);
}
/* Arrow Animation */
.sa-scroll-top i {
transition: transform 0.3s ease;
}
.sa-scroll-top:hover i {
transform: translateY(-3px);
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.sa-scroll-top {
right: 18px;
bottom: 85px;
width: 44px;
height: 44px;
font-size: 14px;
}
}
/* =========================================================
WHATSAPP ICON
========================================================= */
.sa-whatsapp-icon {
position: relative;
width: 46px;
height: 46px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
145deg,
#25d366,
#128c7e
);
color: #ffffff;
font-size: 23px;
box-shadow:
0 7px 18px rgba(18, 140, 126, 0.25);
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
/* =========================================================
BUTTON TEXT
========================================================= */
.sa-whatsapp-text {
display: flex;
flex-direction: column;
white-space: nowrap;
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.sa-whatsapp-text small {
display: block;
margin-bottom: 3px;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.3px;
line-height: 1;
}
.sa-whatsapp-text strong {
display: block;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
}
/* =========================================================
PULSE RING
========================================================= */
.sa-whatsapp-pulse {
position: absolute;
left: 29px;
top: 29px;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(37, 211, 102, 0.50);
transform: translate(-50%, -50%);
pointer-events: none;
animation:
saWhatsappPulse 2.5s ease-out infinite;
}
@keyframes saWhatsappPulse {
0% {
width: 46px;
height: 46px;
opacity: 0.75;
}
70% {
width: 76px;
height: 76px;
opacity: 0;
}
100% {
width: 76px;
height: 76px;
opacity: 0;
}
}
/* =========================================================
HOVER EFFECT
========================================================= */
.sa-whatsapp-button:hover {
animation-play-state: paused;
transform: translateY(-6px);
text-decoration: none;
box-shadow:
0 20px 48px rgba(8, 43, 92, 0.22),
0 6px 18px rgba(8, 43, 92, 0.10);
}
.sa-whatsapp-button:hover
.sa-whatsapp-icon {
transform:
rotate(-8deg)
scale(1.07);
box-shadow:
0 10px 25px rgba(18, 140, 126, 0.32);
}
/* =========================================================
TEXT HOVER
========================================================= */
.sa-whatsapp-button:hover
.sa-whatsapp-text {
transform: translateX(2px);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sa-whatsapp-button {
right: 16px;
bottom: 16px;
width: 56px;
min-width: 56px;
height: 56px;
padding: 5px;
justify-content: center;
border-radius: 50%;
}
.sa-whatsapp-icon {
width: 46px;
height: 46px;
font-size: 22px;
}
.sa-whatsapp-text {
display: none;
}
.sa-whatsapp-pulse {
left: 28px;
top: 28px;
}
}
/* =========================================================
REDUCED MOTION ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sa-whatsapp-button,
.sa-whatsapp-pulse {
animation: none;
}
}
/* overview page css */
/* =========================================================
SAINT ANTHONY ACADEMY
OVERVIEW PAGE
========================================================= */
:root {
--sa-navy: #082b5c;
--sa-blue: #1769c2;
--sa-pink: #e91e73;
--sa-white: #ffffff;
--sa-text: #102d52;
--sa-muted: #6d7e94;
--sa-border: #e6edf5;
--sa-pink-light: #fff1f7;
--sa-soft-blue: #f5f8fc;
}
/* =========================================================
GLOBAL
========================================================= */
.sa-overview-page {
overflow: hidden;
background: #ffffff;
color: var(--sa-text);
font-family: "Manrope", sans-serif;
}
.sa-overview-page *,
.sa-overview-page *::before,
.sa-overview-page *::after {
box-sizing: border-box;
}
.sa-overview-page a {
text-decoration: none;
display: block;
width: fit-content;
text-align: center;
}
.sa-overview-page p {
text-align: left;
}
/* =========================================================
HERO
========================================================= */
.sa-overview-hero {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
overflow: hidden;
background:
radial-gradient(
circle at 80% 25%,
rgba(23,105,194,.32),
transparent 32%
),
radial-gradient(
circle at 15% 90%,
rgba(233,30,115,.15),
transparent 28%
),
linear-gradient(
135deg,
#061f43 0%,
#082b5c 55%,
#0a3d79 100%
);
}
.sa-overview-hero-grid {
position: absolute;
inset: 0;
opacity: .45;
background-image:
linear-gradient(
rgba(255,255,255,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.035) 1px,
transparent 1px
);
background-size: 80px 80px;
mask-image: linear-gradient(
to bottom,
black,
transparent
);
}
/* .sa-overview-hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 110px 0 100px;
} */
/* =========================================================
HERO CONTENT + IMAGE LAYOUT
========================================================= */
.sa-overview-hero-layout {
position: relative;
z-index: 3;
min-height: 650px;
display: flex;
align-items: center;
}
.sa-overview-hero-content {
position: relative;
z-index: 5;
width: 55%;
max-width: 720px;
padding: 100px 0;
}
.sa-overview-hero-image-wrap {
position: absolute;
top: 0;
right: -12vw;
width: 62%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
}
.sa-overview-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
color: #e91e73;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
}
.sa-overview-eyebrow span {
width: 32px;
height: 2px;
background: #e91e73;
}
.sa-overview-hero h1 {
max-width: 850px;
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(52px, 7vw, 90px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -3px;
}
.sa-overview-hero h1 span {
display: block;
color: #ffffff;
}
/* .sa-overview-hero h1 span::after {
content: "";
display: block;
width: 115px;
height: 5px;
margin: 17px auto 0;
border-radius: 20px;
background: var(--sa-pink);
} */
.sa-overview-hero h1 span::after {
content: "";
display: block;
width: 115px;
height: 5px;
margin: 17px 0 0;
border-radius: 20px;
background: var(--sa-pink);
}
.sa-overview-hero-content > p {
margin: 42px auto 0;
color: rgba(255,255,255,.70);
font-size: 15px;
line-height: 1.9;
text-align: left;
}
.sa-overview-hero-bottom {
display: flex;
align-items: center;
gap: 35px;
margin-top: 42px;
}
.sa-overview-primary-btn {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 16px 22px;
background: var(--sa-pink);
color: #ffffff;
font-size: 11px;
font-weight: 800;
transition:
transform .35s ease,
background .35s ease,
box-shadow .35s ease;
}
.sa-overview-primary-btn i {
font-size: 15px;
}
.sa-overview-primary-btn:hover {
color: #ffffff;
background: var(--sa-blue);
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(23,105,194,.25);
}
.sa-overview-scroll {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
color: rgba(255,255,255,.45);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.sa-overview-scroll-line {
width: 35px;
height: 1px;
background: var(--sa-pink);
}
.sa-overview-hero-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Actual image */
.sa-overview-hero-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: scale(1.02);
}
/* =========================================================
DESKTOP IMAGE BLENDING
========================================================= */
.sa-overview-hero-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
#082b5c 0%,
rgba(8,43,92,.96) 8%,
rgba(8,43,92,.78) 18%,
rgba(8,43,92,.42) 32%,
rgba(8,43,92,.12) 48%,
transparent 65%
);
}
.sa-overview-hero-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(8,43,92,.20) 0%,
transparent 25%,
transparent 72%,
rgba(8,43,92,.45) 100%
);
}
/* =========================================================
HERO IMAGE
========================================================= */
.sa-overview-hero-visual {
position: relative;
z-index: 3;
width: 43%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.sa-overview-image-frame {
position: relative;
width: 100%;
max-width: 520px;
height: 500px;
overflow: hidden;
border-radius: 28px;
background: #ffffff;
border: 1px solid rgba(255,255,255,.18);
box-shadow:
0 30px 70px rgba(0,0,0,.28),
0 10px 30px rgba(0,0,0,.15);
}
.sa-overview-image-frame img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .8s ease;
}
.sa-overview-image-frame:hover img {
transform: scale(1.04);
}
.sa-overview-image-glow {
position: absolute;
width: 430px;
height: 430px;
right: -90px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(23,105,194,.42) 0%,
rgba(23,105,194,.18) 38%,
rgba(23,105,194,.05) 65%,
transparent 75%
);
filter: blur(10px);
pointer-events: none;
}
.sa-overview-hero-visual::after {
content: "";
position: absolute;
width: 90px;
height: 90px;
right: -18px;
bottom: -18px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(233,30,115,.55),
transparent 70%
);
filter: blur(12px);
z-index: -1;
}
/* =========================================================
HERO DECORATION
========================================================= */
.sa-overview-hero-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.sa-overview-glow-one {
width: 500px;
height: 500px;
right: -230px;
top: -190px;
background:
radial-gradient(
circle,
rgba(23,105,194,.28),
transparent 70%
);
}
.sa-overview-glow-two {
width: 350px;
height: 350px;
left: -180px;
bottom: -220px;
background:
radial-gradient(
circle,
rgba(233,30,115,.14),
transparent 70%
);
}
/* =========================================================
INTRODUCTION
========================================================= */
.sa-overview-introduction {
padding: 115px 0;
background: #ffffff;
}
.sa-overview-side-label {
position: sticky;
top: 120px;
display: flex;
align-items: center;
gap: 13px;
color: var(--sa-muted);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-overview-side-number {
color: var(--sa-pink);
}
.sa-overview-side-line {
width: 35px;
height: 1px;
background: var(--sa-border);
}
.sa-overview-section-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-align: center;
}
.sa-overview-section-label > span {
width: 30px;
height: 2px;
background: var(--sa-pink);
}
.sa-overview-intro-content h2 {
max-width: 800px;
margin: 0 auto;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(40px, 5vw, 62px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -1.7px;
}
.sa-overview-intro-content h2 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
.sa-overview-lead {
max-width: 720px;
margin: 32px auto 0;
color: var(--sa-text);
font-size: 17px;
font-weight: 500;
line-height: 1.9;
text-align: center;
}
.sa-overview-divider {
width: 100%;
height: 1px;
margin: 40px 0 30px;
background: var(--sa-border);
}
.sa-overview-intro-content .row p {
color: var(--sa-muted);
font-size: 13px;
line-height: 1.9;
}
/* =========================================
INTRODUCTION IMAGE
========================================= */
.sa-overview-intro-image {
position: sticky;
top: 120px;
width: 100%;
max-width: 390px;
margin: 0 auto;
overflow: hidden;
border-radius: 170px 24px 24px 24px;
background: #f4f8fc;
box-shadow:
0 25px 60px rgba(8, 43, 92, 0.12);
}
.sa-overview-intro-figure {
position: sticky;
top: 120px;
width: 100%;
max-width: 390px;
margin: 0 auto;
overflow: hidden;
border-radius: 170px 24px 24px 24px;
background: #f4f8fc;
box-shadow:
0 25px 60px rgba(8, 43, 92, 0.12);
}
/* IMAGE */
.sa-overview-intro-image img {
display: block;
width: 100%;
height: 470px;
object-fit: cover;
object-position: center;
transition: transform .7s ease;
}
.sa-overview-intro-image:hover img {
transform: scale(1.04);
}
.sa-overview-intro-figure:hover img {
transform: scale(1.04);
}
.sa-overview-intro-figure figcaption {
position: absolute;
left: 22px;
bottom: 22px;
display: flex;
align-items: center;
gap: 9px;
padding: 11px 16px;
border-radius: 30px;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--sa-navy);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
line-height: 1;
box-shadow:
0 10px 25px rgba(8, 43, 92, .12);
}
.sa-overview-intro-figure figcaption span {
width: 20px;
height: 2px;
flex: 0 0 20px;
border-radius: 5px;
background: var(--sa-pink);
}
/* IMAGE LABEL */
.sa-overview-image-label {
position: absolute;
left: 22px;
bottom: 22px;
display: flex;
align-items: center;
gap: 9px;
padding: 11px 16px;
border-radius: 30px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--sa-navy);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
box-shadow:
0 10px 25px rgba(8,43,92,.12);
}
.sa-overview-image-label span {
width: 20px;
height: 2px;
border-radius: 5px;
background: var(--sa-pink);
}
/* =========================================================
PHILOSOPHY
========================================================= */
.sa-overview-philosophy {
padding: 115px 0;
background: var(--sa-soft-blue);
}
.sa-overview-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
margin-bottom: 55px;
}
.sa-overview-section-heading h2 {
max-width: 720px;
margin: 0 auto;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(38px, 4.5vw, 58px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -1.5px;
}
.sa-overview-section-heading h2 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
.sa-overview-section-heading > p {
max-width: 350px;
margin: 0 auto 5px;
color: var(--sa-muted);
font-size: 13px;
line-height: 1.85;
text-align: center;
}
.sa-overview-hero-image-wrap::after {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: 5%;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(23,105,194,.18);
filter: blur(80px);
z-index: -1;
pointer-events: none;
}
/* =========================================================
VALUE CARDS
========================================================= */
.sa-overview-value-card {
position: relative;
height: 100%;
min-height: 300px;
padding: 30px;
overflow: hidden;
border: 1px solid var(--sa-border);
background: #ffffff;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
.sa-overview-value-card:hover {
transform: translateY(-8px);
border-color: rgba(23,105,194,.18);
box-shadow:
0 25px 55px rgba(8,43,92,.10);
}
.sa-overview-card-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.sa-overview-card-top span {
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.sa-overview-card-top i {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--sa-pink-light);
color: var(--sa-pink);
font-size: 19px;
}
.sa-overview-value-card h3 {
margin: 60px 0 15px;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 25px;
font-weight: 600;
text-align: center;
}
.sa-overview-value-card p {
max-width: 310px;
margin: 0 auto;
color: var(--sa-muted);
font-size: 13px;
line-height: 1.85;
text-align: center;
}
.sa-overview-card-line {
position: absolute;
left: 30px;
bottom: 25px;
width: 35px;
height: 2px;
background: var(--sa-pink);
transition: width .4s ease;
}
.sa-overview-value-card:hover .sa-overview-card-line {
width: 70px;
}
/* =========================================================
LANGUAGES
========================================================= */
.sa-overview-languages {
padding: 120px 0;
background: #ffffff;
}
.sa-overview-language-intro h2 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(40px, 5vw, 60px);
font-weight: 600;
line-height: 1.08;
}
.sa-overview-language-intro h2 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
.sa-overview-language-intro p {
max-width: 440px;
margin: 28px 0 0;
color: var(--sa-muted);
font-size: 14px;
line-height: 1.9;
}
.sa-overview-language-list {
border-top: 1px solid var(--sa-border);
}
.sa-overview-language {
display: grid;
grid-template-columns: 70px 1fr 50px;
align-items: center;
min-height: 105px;
border-bottom: 1px solid var(--sa-border);
color: var(--sa-navy);
transition:
padding .4s ease,
background .4s ease;
}
.sa-overview-language:hover {
padding-left: 18px;
padding-right: 18px;
background: var(--sa-pink-light);
color: var(--sa-navy);
}
.sa-overview-language-number {
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.sa-overview-language-name {
font-family: "Playfair Display", serif;
font-size: 30px;
font-weight: 600;
}
.sa-overview-language-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--sa-border);
border-radius: 50%;
color: var(--sa-blue);
transition:
background .3s ease,
color .3s ease;
}
.sa-overview-language:hover .sa-overview-language-icon {
border-color: var(--sa-pink);
background: var(--sa-pink);
color: #ffffff;
}
/* =========================================================
EXPERIENCE
========================================================= */
.sa-overview-experience {
padding: 120px 0;
background: var(--sa-navy);
}
.sa-overview-experience-heading {
max-width: 850px;
margin-bottom: 65px;
}
.sa-overview-experience-heading .sa-overview-section-label {
color: #e91e73;
}
.sa-overview-experience-heading .sa-overview-section-label > span {
background: #e91e73;
}
.sa-overview-experience-heading h2 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(40px, 5vw, 62px);
font-weight: 600;
line-height: 1.08;
}
.sa-overview-experience-heading h2 em {
color: #e91e73;
font-style: normal;
}
.sa-overview-process {
border-top: 1px solid rgba(255,255,255,.12);
}
.sa-overview-process-item {
display: grid;
grid-template-columns: 120px 1fr;
gap: 40px;
padding: 35px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
transition:
padding .35s ease;
}
.sa-overview-process-item:hover {
padding-left: 15px;
}
.sa-overview-process-number {
color: var(--sa-pink);
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-overview-process-content {
display: grid;
grid-template-columns: 250px 1fr;
gap: 30px;
}
.sa-overview-process-content h3 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 27px;
font-weight: 600;
}
.sa-overview-process-content p {
max-width: 500px;
margin: 0;
color: rgba(255,255,255,.58);
font-size: 13px;
line-height: 1.85;
}
/* =========================================================
GLOBAL SECTION
========================================================= */
.sa-overview-global {
padding: 110px 0;
background: #ffffff;
}
.sa-overview-global-box {
position: relative;
display: flex;
align-items: center;
gap: 70px;
min-height: 430px;
padding: 55px 65px;
overflow: hidden;
background: var(--sa-pink-light);
}
/* =========================================================
LEFT IMAGE
========================================================= */
.sa-overview-global-image {
position: relative;
z-index: 2;
flex: 0 0 46%;
width: 46%;
height: 330px;
overflow: hidden;
border-radius: 24px;
box-shadow:
0 20px 45px rgba(8, 43, 92, 0.14);
}
.sa-overview-global-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .6s ease;
}
.sa-overview-global-image:hover img {
transform: scale(1.04);
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.sa-overview-global-content {
position: relative;
z-index: 3;
flex: 1;
min-width: 0;
max-width: 650px;
}
/* =========================================================
GLOBE ICON
========================================================= */
.sa-overview-global-mark {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
border-radius: 50%;
background: var(--sa-navy);
color: #e91e73;
font-size: 27px;
box-shadow:
0 15px 35px rgba(8,43,92,.15);
}
/* =========================================================
SECTION LABEL
========================================================= */
.sa-overview-section-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: #e91e73;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-overview-section-label span {
width: 30px;
height: 2px;
background: #e91e73;
}
/* =========================================================
HEADING
========================================================= */
.sa-overview-global-content h2 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(34px, 4vw, 52px);
font-weight: 600;
line-height: 1.08;
}
.sa-overview-global-content h2 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
/* =========================================================
PARAGRAPH
========================================================= */
.sa-overview-global-content p {
max-width: 580px;
margin: 23px 0 0;
color: var(--sa-muted);
font-size: 14px;
line-height: 1.9;
}
/* =========================================================
DECORATIVE ORBIT
========================================================= */
.sa-overview-global-orbit {
position: absolute;
right: -160px;
bottom: -210px;
width: 430px;
height: 430px;
border: 65px solid rgba(23,105,194,.06);
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
/* =========================================================
NUMBERS
========================================================= */
.sa-overview-numbers {
background: var(--sa-soft-blue);
}
.sa-overview-number-box {
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 1px solid var(--sa-border);
text-align: center;
}
.sa-overview-number-box:last-child {
border-right: 0;
}
.sa-overview-number-box strong {
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 42px;
font-weight: 600;
}
.sa-overview-number-box span {
margin-top: 5px;
color: var(--sa-muted);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* =========================================================
FINAL CTA
========================================================= */
.sa-overview-final {
position: relative;
overflow: hidden;
padding: 120px 0;
background:
#1f539d;
}
.sa-overview-final-content {
position: relative;
z-index: 2;
max-width: 850px;
text-align: center;
margin: 0 auto;
}
.sa-overview-final-content .sa-overview-section-label {
justify-content: center;
color: #e91e73;
}
.sa-overview-final-content .sa-overview-section-label > span {
background: #e91e73;
}
.sa-overview-final-content h2 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(42px, 6vw, 70px);
font-weight: 600;
line-height: 1.05;
}
.sa-overview-final-content p {
max-width: 520px;
margin: 25px auto 0;
color: rgba(255,255,255,.60);
font-size: 14px;
line-height: 1.8;
}
.sa-overview-final-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 35px;
}
.sa-overview-final-primary,
.sa-overview-final-secondary {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 15px 21px;
font-size: 11px;
font-weight: 800;
transition:
transform .3s ease,
background .3s ease;
}
.sa-overview-final-primary {
background: var(--sa-pink);
color: #ffffff;
}
.sa-overview-final-primary:hover {
background: var(--sa-blue);
color: #ffffff;
transform: translateY(-3px);
}
.sa-overview-final-secondary {
border: 1px solid rgba(255,255,255,.20);
color: #ffffff;
}
.sa-overview-final-secondary:hover {
background: #ffffff;
color: var(--sa-navy);
transform: translateY(-3px);
}
/* =========================================================
REVEAL
========================================================= */
.reveal-overview {
opacity: 0;
transform: translateY(25px);
transition:
opacity .8s ease,
transform .8s ease;
}
.reveal-overview.overview-visible {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.sa-overview-hero {
min-height: 570px;
}
.sa-overview-hero-layout {
gap: 35px;
}
.sa-overview-hero-content {
width: 52%;
}
.sa-overview-hero-visual {
width: 48%;
}
.sa-overview-image-frame {
height: 430px;
border-radius: 24px;
}
.sa-overview-image-glow {
width: 350px;
height: 350px;
right: -100px;
}
.sa-overview-introduction,
.sa-overview-philosophy,
.sa-overview-languages,
.sa-overview-experience {
padding: 90px 0;
}
.sa-overview-section-heading {
display: block;
}
.sa-overview-section-heading > p {
margin-top: 25px;
}
.sa-overview-global {
padding: 80px 0;
}
.sa-overview-global-box {
gap: 45px;
padding: 45px;
}
.sa-overview-global-image {
flex: 0 0 43%;
width: 43%;
height: 300px;
}
.sa-overview-global-content h2 {
font-size: 40px;
}
.sa-overview-process-content {
grid-template-columns: 190px 1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
/* HERO */
.sa-overview-hero {
min-height: auto;
}
.sa-overview-hero-layout {
min-height: auto;
display: flex;
flex-direction: column;
align-items: stretch;
}
.sa-overview-hero-content {
width: 100%;
max-width: none;
padding: 80px 0 45px;
}
/* IMAGE MOVES BELOW TEXT */
/* .sa-overview-hero-image-wrap {
position: relative;
top: auto;
right: auto;
width: 100%;
height: 400px;
display: block;
margin-top: 0;
overflow: hidden;
} */
.sa-overview-hero-image-wrap {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
height: 380px;
margin: 0;
padding: 0 20px 70px;
box-sizing: border-box;
display: block;
align-self: stretch;
}
/* .sa-overview-hero-image {
width: 100%;
height: 100%;
border-radius: 22px;
overflow: hidden;
} */
.sa-overview-hero-image {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 18px;
overflow: hidden;
}
/* .sa-overview-hero-image img {
object-fit: cover;
object-position: center;
transform: none;
} */
.sa-overview-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: none;
}
/* Remove desktop side fade */
.sa-overview-hero-image::before {
background:
linear-gradient(
180deg,
rgba(8,43,92,.20) 0%,
transparent 25%,
transparent 80%,
rgba(8,43,92,.35) 100%
);
}
.sa-overview-hero-image::after {
background: none;
}
.sa-overview-hero-image-wrap::after {
width: 280px;
height: 280px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
filter: blur(70px);
opacity: .5;
}
/* INTRO */
.sa-overview-introduction {
padding: 75px 20px;
}
.sa-overview-side-label {
position: static;
justify-content: center;
margin-bottom: 35px;
}
.sa-overview-intro-content {
text-align: center;
}
.sa-overview-section-label {
justify-content: center;
}
.sa-overview-intro-content h2 {
font-size: 39px;
}
.sa-overview-lead {
font-size: 15px;
}
/* .sa-overview-page p{
text-align: center;
} */
/* PHILOSOPHY */
.sa-overview-philosophy {
padding: 75px 20px;
}
.sa-overview-section-heading {
text-align: center;
}
.sa-overview-section-heading .sa-overview-section-label {
justify-content: center;
}
.sa-overview-section-heading h2 {
font-size: 39px;
}
.sa-overview-section-heading > p {
margin-left: auto;
margin-right: auto;
}
.sa-overview-value-card {
min-height: 280px;
text-align: center;
}
.sa-overview-card-top {
justify-content: center;
gap: 25px;
}
.sa-overview-value-card h3 {
margin-top: 45px;
}
.sa-overview-value-card p {
margin-left: auto;
margin-right: auto;
}
.sa-overview-card-line {
left: 50%;
transform: translateX(-50%);
}
/* LANGUAGES */
.sa-overview-languages {
padding: 80px 20px;
}
.sa-overview-language-intro {
text-align: center;
}
.sa-overview-language-intro .sa-overview-section-label {
justify-content: center;
}
.sa-overview-language-intro h2 {
font-size: 40px;
}
.sa-overview-language-intro p {
margin-left: auto;
margin-right: auto;
}
.sa-overview-language {
grid-template-columns: 50px 1fr 45px;
min-height: 90px;
}
.sa-overview-language-name {
font-size: 25px;
}
/* EXPERIENCE */
.sa-overview-experience {
padding: 80px 20px;
}
.sa-overview-experience-heading {
text-align: center;
}
.sa-overview-experience-heading .sa-overview-section-label {
justify-content: center;
}
.sa-overview-experience-heading h2 {
font-size: 39px;
}
.sa-overview-process-item {
grid-template-columns: 45px 1fr;
gap: 20px;
text-align: left;
}
.sa-overview-process-content {
display: block;
}
.sa-overview-process-content h3 {
font-size: 23px;
}
.sa-overview-process-content p {
margin-top: 10px;
}
/* GLOBAL */
.sa-overview-global {
padding: 70px 0;
}
.sa-overview-global-box {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 35px;
min-height: auto;
padding: 35px 25px 40px;
}
/* CONTENT FIRST */
.sa-overview-global-content {
order: 1;
max-width: none;
}
/* IMAGE SECOND */
.sa-overview-global-image {
order: 2;
flex: none;
width: 100%;
height: 300px;
border-radius: 20px;
}
.sa-overview-global-mark {
width: 65px;
height: 65px;
margin-bottom: 22px;
font-size: 24px;
}
.sa-overview-section-label {
font-size: 10px;
letter-spacing: 1.7px;
}
.sa-overview-global-content h2 {
font-size: 36px;
}
.sa-overview-global-content p {
margin-top: 20px;
font-size: 13px;
text-align: center;
}
.sa-overview-global-orbit {
right: -180px;
bottom: -200px;
width: 380px;
height: 380px;
}
/* NUMBERS */
.sa-overview-number-box {
min-height: 145px;
border-bottom: 1px solid var(--sa-border);
}
.sa-overview-number-box:nth-child(2n) {
border-right: 0;
}
.sa-overview-number-box strong {
font-size: 34px;
}
/* FINAL */
.sa-overview-final {
padding: 85px 20px;
}
.sa-overview-final-content h2 {
font-size: 44px;
}
.sa-overview-final-buttons {
flex-direction: column;
}
.sa-overview-final-primary,
.sa-overview-final-secondary {
width: 100%;
justify-content: center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sa-overview-hero-content {
padding: 70px 20px 40px;
}
/* .sa-overview-hero-image-wrap {
height: 330px;
padding: 0 20px 55px;
box-sizing: content-box;
} */
.sa-overview-hero-image-wrap {
width: 100%;
height: 330px;
margin: 0;
padding: 0 20px 60px;
}
/* .sa-overview-hero-image {
border-radius: 18px;
} */
.sa-overview-hero-image {
width: 100%;
height: 100%;
border-radius: 0;
}
.sa-overview-intro-content h2,
.sa-overview-section-heading h2,
.sa-overview-language-intro h2,
.sa-overview-experience-heading h2 {
font-size: 34px;
}
.sa-overview-language {
grid-template-columns: 40px 1fr 40px;
}
.sa-overview-language-name {
font-size: 22px;
}
.sa-overview-process-item {
gap: 14px;
}
.sa-overview-global {
padding: 60px 0;
}
.sa-overview-global-box {
padding: 30px 20px 35px;
gap: 30px;
}
.sa-overview-global-image {
width: 100%;
height: 260px;
border-radius: 18px;
}
.sa-overview-global-content h2 {
font-size: 32px;
}
.sa-overview-global-content p {
font-size: 13px;
line-height: 1.85;
}
.sa-overview-final-content h2 {
font-size: 38px;
}
}
/* =========================================================
VISION & MISSION
========================================================= */
.sa-overview-vision-mission {
position: relative;
padding: 73px 0;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
HEADING
========================================================= */
.sa-vm-heading {
max-width: 850px;
margin: 0 auto 60px;
text-align: center;
}
.sa-vm-heading h2 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(40px, 5vw, 60px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -1.5px;
text-align: left;
}
.sa-vm-heading h2 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
.sa-vm-heading > p {
max-width: 840px;
margin: 25px auto 0;
color: var(--sa-muted);
font-size: 14px;
line-height: 1.9;
}
/* =========================================================
CARDS
========================================================= */
.sa-vm-grid {
position: relative;
}
.sa-vm-card {
position: relative;
min-height: 430px;
height: 100%;
padding: 40px;
overflow: hidden;
border: 1px solid var(--sa-border);
background: #ffffff;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
.sa-vm-card:hover {
transform: translateY(-8px);
border-color: rgba(23,105,194,.20);
box-shadow:
0 25px 60px rgba(8,43,92,.11);
}
/* =========================================================
CARD TOP
========================================================= */
.sa-vm-card-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.sa-vm-card-top > span {
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-vm-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--sa-pink-light);
color: var(--sa-pink);
font-size: 23px;
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.sa-vm-card:hover .sa-vm-icon {
background: var(--sa-navy);
color: #ffffff;
transform: rotate(-5deg);
}
/* =========================================================
CARD CONTENT
========================================================= */
.sa-vm-card-content {
max-width: 500px;
margin-top: 65px;
}
.sa-vm-small-title {
display: block;
width: 100%;
margin-bottom: 15px;
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-align: center !important;
}
.sa-vm-card h3 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: clamp(29px, 3vw, 39px);
font-weight: 600;
line-height: 1.12;
text-align: center;
width: 100%;
}
.sa-vm-card h3 em {
display: block;
color: var(--sa-blue);
font-style: normal;
}
.sa-vm-card p {
max-width: 470px;
margin: 25px 0 0;
color: var(--sa-muted);
font-size: 13px;
line-height: 1.9;
text-align: center;
}
/* =========================================================
CARD BOTTOM LINE
========================================================= */
.sa-vm-card-line {
position: absolute;
left: 40px;
bottom: 32px;
width: 45px;
height: 2px;
background: var(--sa-pink);
transition: width .4s ease;
}
.sa-vm-card:hover .sa-vm-card-line {
width: 90px;
}
/* =========================================================
MISSION DIFFERENT ACCENT
========================================================= */
.sa-vm-mission {
background:
linear-gradient(
145deg,
#ffffff 0%,
#ffffff 70%,
#f7faff 100%
);
}
.sa-vm-mission .sa-vm-icon {
background: rgba(23,105,194,.08);
color: var(--sa-blue);
}
.sa-vm-mission:hover .sa-vm-icon {
background: var(--sa-blue);
color: #ffffff;
}
.sa-vm-mission .sa-vm-card-line {
background: var(--sa-blue);
}
/* =========================================================
BOTTOM STATEMENT
========================================================= */
.sa-vm-statement {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 55px;
padding: 25px 30px;
border-top: 1px solid var(--sa-border);
border-bottom: 1px solid var(--sa-border);
}
.sa-vm-statement-mark {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: var(--sa-navy);
color: #e91e73;
font-size: 18px;
}
.sa-vm-statement p {
margin: 0;
color: var(--sa-muted);
font-family: "Playfair Display", serif;
font-size: 19px;
}
.sa-vm-statement strong {
color: var(--sa-pink);
font-weight: 600;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.sa-overview-vision-mission {
padding: 80px 20px;
}
.sa-vm-heading {
margin-bottom: 40px;
}
.sa-vm-heading .sa-overview-section-label {
justify-content: center;
}
.sa-vm-heading h2 {
font-size: 37px;
text-align: center;
}
.sa-vm-heading > p {
font-size: 13px;
text-align: center;
}
.sa-vm-card {
min-height: 390px;
padding: 30px;
text-align: center;
}
.sa-vm-card-top {
justify-content: center;
gap: 25px;
}
.sa-vm-card-content {
margin-top: 45px;
margin-left: auto;
margin-right: auto;
}
.sa-vm-small-title {
margin-bottom: 13px;
}
.sa-vm-card h3 {
font-size: 29px;
}
.sa-vm-card p {
margin-left: auto;
margin-right: auto;
font-size: 13px;
}
.sa-vm-card-line {
left: 50%;
transform: translateX(-50%);
}
.sa-vm-card:hover .sa-vm-card-line {
width: 75px;
}
.sa-vm-statement {
flex-direction: column;
gap: 12px;
padding: 25px 15px;
text-align: center;
}
.sa-vm-statement p {
font-size: 17px;
text-align: center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.sa-vm-heading h2 {
font-size: 33px;
}
.sa-vm-card {
min-height: 400px;
padding: 27px 22px;
}
.sa-vm-card h3 {
font-size: 27px;
}
.sa-vm-card-content {
margin-top: 40px;
}
.sa-vm-card p {
font-size: 12.5px;
}
}
/* =========================================================
SA ACADEMY
VIDEO GALLERY PAGE
========================================================= */
/* =========================================================
PAGE BANNER
========================================================= */
.saacademy-gallery-banner {
position: relative;
padding: 145px 0 110px;
background:
linear-gradient(
135deg,
#082b5c 0%,
#0d477f 55%,
#1769c2 100%
);
overflow: hidden;
}
.saacademy-gallery-banner-shape {
position: absolute;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 50%;
pointer-events: none;
}
.saacademy-gallery-shape-one {
width: 430px;
height: 430px;
top: -250px;
right: -100px;
}
.saacademy-gallery-shape-two {
width: 280px;
height: 280px;
bottom: -190px;
left: -100px;
border-color: rgba(233,30,115,0.25);
}
.saacademy-gallery-banner-content {
position: relative;
z-index: 2;
max-width: 850px;
margin: auto;
text-align: center;
}
.saacademy-gallery-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #e91e73;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-gallery-label span {
width: 28px;
height: 1px;
background: currentColor;
}
.saacademy-gallery-banner h1 {
margin: 22px 0;
color: #ffffff;
font-size: clamp(42px, 5vw, 68px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -2px;
}
.saacademy-gallery-banner h1 strong {
color: #ffffff;
}
.saacademy-gallery-banner-content > p {
max-width: 700px;
margin: auto;
color: rgba(255,255,255,0.80);
font-size: 15px;
line-height: 1.8;
}
.saacademy-gallery-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 30px;
font-size: 13px;
}
.saacademy-gallery-breadcrumb a {
color: #ffffff;
text-decoration: none;
}
.saacademy-gallery-breadcrumb i {
color: #e91e73;
}
.saacademy-gallery-breadcrumb span {
color: rgba(255,255,255,0.60);
}
/* =========================================================
INTRO
========================================================= */
.saacademy-gallery-intro {
padding: 100px 0 55px;
background: #ffffff;
}
.saacademy-gallery-intro-content {
max-width: 780px;
margin: auto;
text-align: center;
}
.saacademy-gallery-section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #e91e73;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-gallery-section-label span {
width: 28px;
height: 1px;
background: currentColor;
}
.saacademy-gallery-intro h2 {
margin: 20px 0;
color: #102d52;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.15;
font-weight: 700;
letter-spacing: -1.5px;
}
.saacademy-gallery-intro h2 strong {
color: #1769c2;
}
.saacademy-gallery-intro p {
max-width: 700px;
margin: auto;
color: #6d7e94;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
VIDEO GALLERY
========================================================= */
.saacademy-video-gallery {
padding: 55px 0 110px;
background: #f7faff;
}
.saacademy-video-card {
height: 100%;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(8,43,92,0.07);
border-radius: 20px;
box-shadow:
0 12px 35px rgba(8,43,92,0.06);
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.saacademy-video-card:hover {
transform: translateY(-8px);
box-shadow:
0 22px 50px rgba(8,43,92,0.12);
}
/* =========================================================
VIDEO
========================================================= */
.saacademy-video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #082b5c;
}
.saacademy-video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* =========================================================
PLAY OVERLAY
========================================================= */
.saacademy-video-play {
position: absolute;
left: 50%;
top: 50%;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #e91e73;
color: #ffffff;
font-size: 25px;
box-shadow:
0 10px 30px rgba(233,30,115,0.35);
pointer-events: none;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-video-card:hover .saacademy-video-play {
transform: translate(-50%, -50%) scale(1.1);
box-shadow:
0 15px 40px rgba(233,30,115,0.45);
}
.saacademy-video-play i {
margin-left: 3px;
}
/* =========================================================
VIDEO PLACEHOLDER
========================================================= */
.saacademy-video-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#082b5c,
#1769c2
);
}
.saacademy-video-placeholder-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.80);
}
.saacademy-video-placeholder-content i {
color: #e91e73;
font-size: 42px;
}
.saacademy-video-placeholder-content span {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
/* =========================================================
VIDEO CONTENT
========================================================= */
.saacademy-video-content {
position: relative;
padding: 28px 28px 30px;
}
.saacademy-video-number {
margin-bottom: 10px;
color: #e91e73;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-video-content h3 {
margin-bottom: 12px;
color: #102d52;
font-size: 19px;
line-height: 1.4;
font-weight: 800;
}
.saacademy-video-content p {
margin-bottom: 15px;
color: #6d7e94;
font-size: 13px;
line-height: 1.75;
}
.saacademy-video-description {
padding-top: 15px;
border-top: 1px solid rgba(8,43,92,0.08);
color: #6d7e94;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
CTA
========================================================= */
.saacademy-gallery-cta {
padding: 80px 0;
background: #1f539d;
}
.saacademy-gallery-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 45px 50px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 24px;
}
.saacademy-gallery-cta-content {
max-width: 650px;
}
.saacademy-gallery-cta-content > span {
color: #e91e73;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.saacademy-gallery-cta-content h2 {
margin: 12px 0;
color: #ffffff;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.15;
}
.saacademy-gallery-cta-content h2 strong {
color: #ffffff;
}
.saacademy-gallery-cta-content p {
margin: 0;
color: rgba(255,255,255,0.68);
font-size: 14px;
}
.saacademy-gallery-cta-button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 15px 23px;
background: #e91e73;
border-radius: 9px;
color: #ffffff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: all 0.3s ease;
}
.saacademy-gallery-cta-button:hover {
background: #ffffff;
color: #082b5c;
transform: translateY(-3px);
}
.saacademy-gallery-cta-button i {
transition: transform 0.3s ease;
}
.saacademy-gallery-cta-button:hover i {
transform: translateX(5px);
}
.saacademy-video-thumbnail {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #082b5c;
text-decoration: none;
}
/* Thumbnail image */
.saacademy-video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 0.7s ease,
filter 0.7s ease;
}
/* Dark overlay */
.saacademy-video-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(8, 43, 92, 0.15),
rgba(8, 43, 92, 0.65)
);
transition: background 0.4s ease;
}
/* Play button */
.saacademy-video-play {
position: absolute;
top: 50%;
left: 50%;
width: 72px;
height: 72px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
background: #e91e73;
color: #ffffff;
border-radius: 50%;
box-shadow:
0 12px 30px rgba(233, 30, 115, 0.35);
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
background 0.4s ease;
z-index: 3;
}
.saacademy-video-play i {
font-size: 30px;
margin-left: 4px;
}
/* YouTube label */
.saacademy-youtube-label {
position: absolute;
left: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
background: rgba(255, 255, 255, 0.95);
color: #082b5c;
border-radius: 30px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
z-index: 3;
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease;
}
.saacademy-youtube-label i {
color: #e91e73;
font-size: 16px;
}
/* Hover */
.saacademy-video-thumbnail:hover img {
transform: scale(1.06);
filter: brightness(0.82);
}
.saacademy-video-thumbnail:hover .saacademy-video-overlay {
background:
linear-gradient(
135deg,
rgba(8, 43, 92, 0.35),
rgba(8, 43, 92, 0.78)
);
}
.saacademy-video-thumbnail:hover .saacademy-video-play {
transform: translate(-50%, -50%) scale(1.12);
background: #1769c2;
box-shadow:
0 16px 40px rgba(23, 105, 194, 0.4);
}
.saacademy-video-thumbnail:hover .saacademy-youtube-label {
transform: translateY(-3px);
background: #e91e73;
color: #ffffff;
}
.saacademy-video-thumbnail:hover
.saacademy-youtube-label i {
color: #ffffff;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991.98px) {
.saacademy-gallery-banner {
padding: 120px 0 90px;
}
.saacademy-gallery-intro {
padding: 80px 0 45px;
}
.saacademy-video-gallery {
padding: 45px 0 80px;
}
.saacademy-gallery-cta-inner {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 767.98px) {
.saacademy-gallery-banner {
padding: 105px 0 75px;
}
.saacademy-gallery-banner h1 {
font-size: 42px;
letter-spacing: -1px;
}
.saacademy-gallery-intro {
padding: 70px 0 35px;
}
.saacademy-gallery-intro h2 {
font-size: 36px;
}
.saacademy-video-gallery {
padding: 35px 0 70px;
}
.saacademy-video-content {
padding: 24px;
}
.saacademy-gallery-cta {
padding: 60px 0;
}
.saacademy-gallery-cta-inner {
align-items: center;
padding: 35px 25px;
text-align: center;
}
.saacademy-gallery-cta-content {
max-width: 100%;
}
}
@media (max-width: 575.98px) {
.saacademy-gallery-banner h1 {
font-size: 37px;
}
.saacademy-gallery-banner-content > p {
font-size: 14px;
}
.saacademy-video-card {
border-radius: 16px;
}
.saacademy-video-content h3 {
font-size: 18px;
}
.saacademy-video-play {
width: 50px;
height: 50px;
font-size: 22px;
}
.saacademy-gallery-cta-content h2 {
font-size: 31px;
}
}
@media (max-width: 575.98px) {
.saacademy-video-play {
width: 58px;
height: 58px;
}
.saacademy-video-play i {
font-size: 24px;
}
.saacademy-youtube-label {
left: 12px;
bottom: 12px;
padding: 7px 10px;
font-size: 10px;
}
}
/* dropdown events page css code */
/* =========================================================
SAINT ANTHONY ACADEMY
EVENTS & ACHIEVEMENTS
========================================================= */
:root {
--sa-navy: #082b5c;
--sa-blue: #1769c2;
--sa-pink: #e91e73;
--sa-white: #ffffff;
--sa-text: #102d52;
--sa-muted: #6d7e94;
--sa-border: #e6edf5;
--sa-pink-light: #fff1f7;
}
/* =========================================================
GENERAL
========================================================= */
.sa-events-hero,
.sa-events-congratulations,
.sa-events-students,
.sa-events-journey,
.sa-events-history,
.sa-events-cta {
font-family: "Manrope", sans-serif;
}
.sa-events-hero h1,
.sa-events-congratulations h2,
.sa-events-students h2,
.sa-events-journey h2,
.sa-events-history h2,
.sa-events-cta h2 {
font-family: "Playfair Display", serif;
}
/* =========================================================
HERO
========================================================= */
.sa-events-hero {
position: relative;
min-height: 590px;
display: flex;
align-items: center;
overflow: hidden;
background:
radial-gradient(
circle at 85% 20%,
rgba(23,105,194,.20),
transparent 35%
),
radial-gradient(
circle at 10% 90%,
rgba(233,30,115,.10),
transparent 30%
),
var(--sa-navy);
}
.sa-events-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: auto;
padding: 100px 20px 120px;
text-align: center;
}
.sa-events-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 25px;
color: #b8cae0;
font-size: 10px;
font-weight: 800;
letter-spacing: 3px;
}
.sa-events-eyebrow span {
width: 35px;
height: 1px;
background: var(--sa-pink);
}
.sa-events-hero h1 {
margin: 0;
color: var(--sa-white);
font-size: clamp(52px, 7vw, 88px);
line-height: .98;
font-weight: 600;
letter-spacing: -2px;
}
.sa-events-hero h1 em {
display: block;
color: #dceaff;
font-style: italic;
}
.sa-events-hero-content > p {
max-width: 650px;
margin: 30px auto 0;
color: #aebfd5;
font-size: 14px;
line-height: 1.9;
}
.sa-events-hero-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 35px;
}
.sa-events-hero-line span {
width: 55px;
height: 1px;
background: rgba(255,255,255,.22);
}
.sa-events-hero-line i {
color: var(--sa-pink);
font-size: 11px;
}
.sa-events-hero-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
gap: 45px;
padding: 18px;
border-top: 1px solid rgba(255,255,255,.08);
color: #8da5c0;
font-size: 9px;
font-weight: 800;
letter-spacing: 3px;
}
.sa-events-hero-orbit {
position: absolute;
border: 1px solid rgba(255,255,255,.05);
border-radius: 50%;
}
.sa-events-orbit-one {
width: 500px;
height: 500px;
right: -180px;
top: -180px;
}
.sa-events-orbit-two {
width: 350px;
height: 350px;
left: -150px;
bottom: -180px;
}
/* =========================================================
SECTION COMMON
========================================================= */
.sa-events-congratulations {
padding: 125px 0 110px;
background: #ffffff;
}
.sa-events-section-heading {
max-width: 760px;
margin: 0 auto 65px;
text-align: center;
}
.sa-events-section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 18px;
color: var(--sa-pink);
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
}
.sa-events-section-label span {
width: 25px;
height: 2px;
background: var(--sa-pink);
}
.sa-events-section-heading h2 {
margin: 0;
color: var(--sa-navy);
font-size: clamp(40px, 5vw, 62px);
line-height: 1.05;
font-weight: 600;
}
.sa-events-section-heading h2 em {
color: var(--sa-blue);
font-style: italic;
}
.sa-events-section-heading p {
max-width: 620px;
margin: 24px auto 0;
color: var(--sa-muted);
font-size: 13px;
line-height: 1.9;
}
/* =========================================================
FEATURED
========================================================= */
.sa-events-featured {
display: grid;
grid-template-columns: 1.1fr .9fr;
min-height: 570px;
margin-bottom: 85px;
overflow: hidden;
background: var(--sa-navy);
}
.sa-events-featured-image {
position: relative;
min-height: 570px;
overflow: hidden;
background: #edf2f8;
}
.sa-events-featured-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition: transform .7s ease;
}
.sa-events-featured:hover
.sa-events-featured-image img {
transform: scale(1.025);
}
.sa-events-featured-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 65px;
overflow: hidden;
}
.sa-events-number {
margin-bottom: 35px;
color: var(--sa-pink);
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
}
.sa-events-mini-label {
margin-bottom: 18px;
color: #92a8c1;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-events-featured-content h3 {
max-width: 400px;
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(35px, 4vw, 53px);
line-height: 1.08;
font-weight: 600;
}
.sa-events-featured-content h3 em {
display: block;
color: #b9d5f4;
font-style: italic;
}
.sa-events-featured-content p {
max-width: 420px;
margin: 25px 0 0;
color: #9eb2c9;
font-size: 13px;
line-height: 1.9;
}
.sa-events-featured-mark {
position: absolute;
right: 35px;
bottom: 25px;
color: rgba(255,255,255,.04);
font-size: 120px;
}
/* =========================================================
GALLERY HEAD
========================================================= */
.sa-events-gallery-head {
display: flex;
align-items: end;
justify-content: space-between;
margin-bottom: 35px;
}
.sa-events-gallery-head span {
color: var(--sa-pink);
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-events-gallery-head h3 {
margin: 8px 0 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 28px;
font-weight: 600;
}
/* =========================================================
EVENT CARDS
========================================================= */
.sa-event-card {
height: 100%;
border: 1px solid var(--sa-border);
background: #ffffff;
transition:
transform .4s ease,
box-shadow .4s ease;
}
.sa-event-card:hover {
transform: translateY(-7px);
box-shadow:
0 25px 55px rgba(8,43,92,.10);
}
.sa-event-image {
position: relative;
height: 360px;
overflow: hidden;
background: #f5f7fa;
}
.sa-event-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition: transform .6s ease;
}
.sa-event-card:hover .sa-event-image img {
transform: scale(1.035);
}
.sa-events-view {
position: absolute;
right: 18px;
bottom: 18px;
z-index: 4;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(8,43,92,.94);
color: #ffffff;
cursor: pointer;
opacity: 0;
transform: translateY(8px);
transition:
opacity .3s ease,
transform .3s ease,
background .3s ease;
}
.sa-event-card:hover .sa-events-view,
.sa-student-card:hover .sa-events-view,
.sa-journey-item:hover .sa-events-view,
.sa-events-featured:hover .sa-events-view {
opacity: 1;
transform: translateY(0);
}
.sa-events-view:hover {
background: var(--sa-pink);
}
.sa-event-card-content {
padding: 25px 27px 28px;
}
.sa-event-card-content span {
color: var(--sa-pink);
font-size: 8px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-event-card-content h4 {
margin: 9px 0 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 22px;
font-weight: 600;
}
.sa-event-card-content p {
margin: 8px 0 0;
color: var(--sa-muted);
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
STUDENTS
========================================================= */
.sa-events-students {
padding: 125px 0;
background: #f8faff;
}
.sa-events-students-heading {
margin-bottom: 65px;
}
.sa-student-card {
height: 100%;
background: #ffffff;
border: 1px solid var(--sa-border);
transition:
transform .4s ease,
box-shadow .4s ease;
}
.sa-student-card:hover {
transform: translateY(-7px);
box-shadow:
0 25px 55px rgba(8,43,92,.10);
}
.sa-student-image {
position: relative;
height: 390px;
overflow: hidden;
background: #eef2f7;
}
.sa-student-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .7s ease;
}
.sa-student-card:hover .sa-student-image img {
transform: scale(1.04);
}
.sa-student-info {
padding: 25px 28px 30px;
}
.sa-student-info span {
color: var(--sa-pink);
font-size: 8px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-student-info h3 {
margin: 9px 0 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 25px;
font-weight: 600;
}
.sa-student-info p {
margin: 8px 0 0;
color: var(--sa-muted);
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
JOURNEY
========================================================= */
.sa-events-journey {
padding: 125px 0;
background: #ffffff;
}
.sa-events-journey-header {
max-width: 780px;
margin: 0 auto 65px;
text-align: center;
}
.sa-events-journey-header h2 {
margin: 0;
color: var(--sa-navy);
font-size: clamp(40px, 5vw, 60px);
line-height: 1.05;
}
.sa-events-journey-header h2 em {
color: var(--sa-blue);
font-style: italic;
}
.sa-events-journey-header p {
max-width: 620px;
margin: 24px auto 0;
color: var(--sa-muted);
font-size: 13px;
line-height: 1.9;
}
/* =========================================================
MASONRY
========================================================= */
.sa-events-masonry {
column-count: 3;
column-gap: 14px;
width: 100%;
}
.sa-journey-item {
position: relative;
display: inline-block;
width: 100%;
height: auto;
margin: 0 0 14px;
padding: 0;
overflow: hidden;
background: transparent;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
.sa-journey-item img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
margin: 0;
padding: 0;
object-fit: contain;
transition: transform .7s ease;
}
.sa-journey-item:hover img {
transform: scale(1.025);
}
.sa-journey-item .sa-events-view {
opacity: 0;
}
.sa-journey-tall {
grid-row: auto;
}
.sa-journey-wide {
grid-column: auto;
}
.sa-journey-item .sa-events-view {
position: absolute;
right: 18px;
bottom: 18px;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 43, 92, .88);
color: #ffffff;
font-size: 16px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity .3s ease,
visibility .3s ease,
transform .3s ease,
background .3s ease;
z-index: 5;
}
.sa-journey-item:hover .sa-events-view {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sa-journey-item .sa-events-view:hover {
background: var(--sa-pink);
}
@media (max-width: 1199px) {
.sa-events-masonry {
column-count: 3;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 991px) {
.sa-events-masonry {
column-count: 2;
column-gap: 14px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.sa-events-masonry {
column-count: 1;
column-gap: 0;
}
.sa-journey-item {
margin-bottom: 16px;
}
.sa-journey-item .sa-events-view {
width: 42px;
height: 42px;
right: 14px;
bottom: 14px;
opacity: 1;
visibility: visible;
transform: none;
background: rgba(8, 43, 92, .82);
}
}
/* =========================================================
HISTORY
========================================================= */
.sa-events-history {
padding: 115px 0;
background: #f8faff;
}
.sa-events-history-header {
max-width: 700px;
margin: 0 auto 55px;
text-align: center;
}
.sa-events-history-header h2 {
margin: 0;
color: var(--sa-navy);
font-size: clamp(40px, 5vw, 57px);
line-height: 1.05;
}
.sa-events-history-header h2 em {
color: var(--sa-pink);
font-style: italic;
}
.sa-history-card {
height: 100%;
padding: 40px;
border: 1px solid var(--sa-border);
background: #ffffff;
}
.sa-history-year {
margin-bottom: 35px;
color: var(--sa-pink);
font-family: "Playfair Display", serif;
font-size: 48px;
line-height: 1;
}
.sa-history-content h3 {
margin: 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 25px;
}
.sa-history-content p {
margin: 15px 0 0;
color: var(--sa-muted);
font-size: 12px;
line-height: 1.8;
}
/* =========================================================
CTA
========================================================= */
.sa-events-cta {
padding: 100px 0;
background: #ffffff;
}
.sa-events-cta-inner {
display: flex;
align-items: center;
gap: 35px;
padding: 55px 60px;
background: var(--sa-navy);
}
.sa-events-cta-symbol {
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
color: var(--sa-pink);
font-size: 25px;
}
.sa-events-cta-content {
flex: 1;
}
.sa-events-cta-content > span {
color: #91a7c0;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-events-cta-content h2 {
margin: 8px 0 0;
color: #ffffff;
font-size: 40px;
line-height: 1.05;
}
.sa-events-cta-content h2 em {
color: #bcd5f2;
font-style: italic;
}
.sa-events-cta-button {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 16px 23px;
background: #ffffff;
color: var(--sa-navy);
text-decoration: none;
font-size: 11px;
font-weight: 800;
transition:
background .3s ease,
color .3s ease;
}
.sa-events-cta-button i {
color: var(--sa-pink);
}
.sa-events-cta-button:hover {
background: var(--sa-pink);
color: #ffffff;
}
.sa-events-cta-button:hover i {
color: #ffffff;
}
/* =========================================================
MODAL
========================================================= */
.sa-events-modal .modal-dialog {
max-width: 1100px;
}
.sa-events-modal .modal-content {
position: relative;
overflow: hidden;
border: 0;
border-radius: 0;
background: #071f42;
}
.sa-events-modal-image-wrap {
height: 75vh;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
padding: 35px;
background: #071f42;
}
.sa-events-modal-image-wrap img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.sa-events-modal-close {
position: absolute;
top: 18px;
right: 18px;
z-index: 10;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.2);
border-radius: 50%;
background: rgba(8,43,92,.85);
color: #ffffff;
}
.sa-events-modal-caption {
padding: 22px 30px 27px;
background: #ffffff;
}
.sa-events-modal-caption span {
color: var(--sa-pink);
font-size: 8px;
font-weight: 800;
letter-spacing: 2px;
}
.sa-events-modal-caption h3 {
margin: 6px 0 0;
color: var(--sa-navy);
font-family: "Playfair Display", serif;
font-size: 25px;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991.98px) {
.sa-events-featured {
grid-template-columns: 1fr;
}
.sa-events-featured-image {
min-height: 500px;
}
.sa-events-featured-content {
min-height: 400px;
}
.sa-events-masonry {
grid-template-columns:
repeat(2, 1fr);
}
.sa-events-cta-inner {
flex-wrap: wrap;
}
}
@media (max-width: 767.98px) {
.sa-events-hero {
min-height: 520px;
}
.sa-events-hero-content {
padding: 80px 20px 100px;
}
.sa-events-hero h1 {
font-size: 52px;
}
.sa-events-hero-content > p {
font-size: 12px;
}
.sa-events-hero-bottom {
gap: 15px;
justify-content: space-around;
font-size: 7px;
letter-spacing: 1.5px;
}
.sa-events-congratulations,
.sa-events-students,
.sa-events-journey {
padding: 85px 20px;
}
.sa-events-history {
padding: 85px 20px;
}
.sa-events-section-heading {
margin-bottom: 45px;
}
.sa-events-section-heading h2,
.sa-events-journey-header h2 {
font-size: 39px;
}
.sa-events-featured {
margin-bottom: 65px;
}
.sa-events-featured-image {
min-height: 420px;
}
.sa-events-featured-content {
min-height: 390px;
padding: 40px 30px;
}
.sa-events-featured-content h3 {
font-size: 38px;
}
.sa-event-image {
height: 330px;
}
.sa-student-image {
height: 350px;
}
.sa-events-masonry {
grid-template-columns: 1fr;
grid-auto-rows: 330px;
}
.sa-journey-tall {
grid-row: span 1;
}
.sa-journey-wide {
grid-column: span 1;
}
.sa-events-cta {
padding: 70px 20px;
}
.sa-events-cta-inner {
padding: 40px 28px;
text-align: center;
justify-content: center;
}
.sa-events-cta-symbol {
margin: auto;
}
.sa-events-cta-content {
flex-basis: 100%;
}
.sa-events-cta-content h2 {
font-size: 34px;
}
.sa-events-cta-button {
margin: auto;
}
.sa-events-modal-image-wrap {
height: 65vh;
min-height: 350px;
padding: 20px;
}
}
@media (max-width: 575.98px) {
.sa-events-hero h1 {
font-size: 44px;
letter-spacing: -1px;
}
.sa-events-hero-bottom {
display: none;
}
.sa-events-section-heading h2,
.sa-events-journey-header h2 {
font-size: 35px;
}
.sa-events-featured-image {
min-height: 350px;
}
.sa-event-image {
height: 300px;
}
.sa-student-image {
height: 330px;
}
.sa-events-cta-content h2 {
font-size: 30px;
}
}
/* =========================================
EVENT JOURNEY - IMAGE SIZE LAYOUT
========================================= */
.sa-event-journey-section {
width: 100%;
height: auto;
}
.sa-event-journey-section .container {
height: auto;
}
.sa-event-journey-section .row {
align-items: flex-start;
}
/* Event card */
.sa-event-journey-card {
position: relative;
width: 100%;
height: auto;
min-height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
/* Image wrapper */
.sa-event-journey-image {
position: relative;
width: 100%;
height: auto;
min-height: 0;
overflow: hidden;
padding: 0;
margin: 0;
}
/* Actual event image */
.sa-event-journey-image img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
min-height: 0;
object-fit: contain;
object-position: center;
margin: 0;
padding: 0;
}
/* Remove forced card heights */
.sa-event-journey-card,
.sa-event-journey-image,
.sa-event-journey-image img {
max-height: none;
}
/* If there is an overlay */
.sa-event-journey-image::before {
height: auto;
}
/* =========================================
DESKTOP
========================================= */
@media (min-width: 992px) {
.sa-event-journey-card {
height: auto;
}
.sa-event-journey-image {
height: auto;
}
.sa-event-journey-image img {
height: auto;
width: 100%;
object-fit: contain;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.sa-event-journey-card {
height: auto;
}
.sa-event-journey-image {
height: auto;
}
.sa-event-journey-image img {
width: 100%;
height: auto;
object-fit: contain;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.sa-event-journey-section {
height: auto;
}
.sa-event-journey-card {
width: 100%;
height: auto;
min-height: 0;
}
.sa-event-journey-image {
width: 100%;
height: auto;
min-height: 0;
}
.sa-event-journey-image img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
}
}
/* =========================================================
MOBILE - FEATURED ACHIEVEMENT
========================================================= */
@media (max-width: 767px) {
.sa-events-featured {
grid-template-columns: 1fr;
}
.sa-events-featured-content {
align-items: center;
text-align: center;
padding: 50px 25px 60px;
}
.sa-events-featured-content h3 {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sa-events-featured-content p {
width: 100%;
max-width: 100%;
margin: 25px auto 0;
text-align: center;
}
.sa-events-number,
.sa-events-mini-label {
text-align: center;
}
}
@media (max-width: 767px) {
.sa-events-gallery-head {
text-align: center;
}
.sa-events-gallery-head > div {
width: 100%;
}
.sa-events-gallery-head span,
.sa-events-gallery-head h3 {
text-align: center;
}
}
/* =========================================================
SA ACADEMY - CONTACT PAGE
========================================================= */
.saacademy-contact-page {
background: #ffffff;
color: #102d52;
overflow: hidden;
}
/* =========================================================
CONTACT BANNER
========================================================= */
.saacademy-contact-banner {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
background:
#102d52;
overflow: hidden;
}
.saacademy-contact-banner-shape {
position: absolute;
width: 520px;
height: 520px;
right: -180px;
top: -220px;
border-radius: 50%;
border: 70px solid rgba(255, 255, 255, 0.06);
}
.saacademy-contact-banner-shape::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
left: -500px;
top: 350px;
border-radius: 50%;
background: rgba(233, 30, 115, 0.12);
}
.saacademy-contact-banner-content {
position: relative;
z-index: 2;
max-width: 760px;
padding: 90px 0;
}
.saacademy-contact-eyebrow {
display: inline-flex;
align-items: center;
padding: 8px 18px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50px;
background: rgba(255, 255, 255, 0.09);
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.7px;
}
.saacademy-contact-banner h1 {
margin: 0 0 18px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: clamp(42px, 5vw, 68px);
font-weight: 800;
line-height: 1.08;
}
.saacademy-contact-banner p {
max-width: 746px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.85);
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.8;
/* text-align: center; */
}
/* =========================================================
CONTACT BANNER IMAGE - DESKTOP
========================================================= */
.saacademy-contact-banner-image-wrap {
position: absolute;
top: 50%;
right: 5%;
width: 45%;
height: 340px;
transform: translateY(-50%);
z-index: 3;
display: block;
}
.saacademy-contact-banner-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 24px;
background: #ffffff;
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.12);
}
.saacademy-contact-banner-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .6s ease;
}
.saacademy-contact-banner-image:hover img {
transform: scale(1.04);
}
/* SOFT GLOW BEHIND IMAGE */
.saacademy-contact-banner-image-wrap::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
right: 5%;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(23, 105, 194, 0.20);
filter: blur(80px);
z-index: -1;
pointer-events: none;
}
/* =========================================================
SOFT BLUE GLOW
========================================================= */
.saacademy-contact-banner-image-wrap::after {
content: "";
position: absolute;
width: 480px;
height: 480px;
right: 5%;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(23,105,194,.16);
filter: blur(90px);
z-index: -1;
pointer-events: none;
}
/* =========================================================
INTRO
========================================================= */
.saacademy-contact-intro {
padding: 100px 0 70px;
background: #ffffff;
}
.saacademy-contact-intro-content {
max-width: 780px;
margin: 0 auto;
text-align: center;
}
.saacademy-section-label {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 15px;
}
.saacademy-section-label::before {
content: "";
width: 28px;
height: 2px;
margin-right: 10px;
background: #e91e73;
}
.saacademy-contact-intro-content h2 {
margin: 0 0 18px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: clamp(30px, 4vw, 46px);
font-weight: 800;
line-height: 1.2;
}
.saacademy-contact-intro-content p {
max-width: 700px;
margin: 0 auto;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 15px;
line-height: 1.9;
}
/* =========================================================
MAIN CONTACT AREA
========================================================= */
.saacademy-contact-main {
padding: 30px 0 110px;
background: #f8fbff;
}
/* =========================================================
CONTACT INFORMATION
========================================================= */
.saacademy-contact-info {
height: 100%;
padding: 45px 40px;
border-radius: 28px;
background:
linear-gradient(
150deg,
#082b5c 0%,
#1769c2 100%
);
box-shadow:
0 25px 60px rgba(8, 43, 92, 0.16);
overflow: hidden;
position: relative;
}
.saacademy-contact-info::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -110px;
top: -110px;
border-radius: 50%;
border: 45px solid rgba(255, 255, 255, 0.06);
}
.saacademy-contact-info-heading {
position: relative;
z-index: 2;
margin-bottom: 38px;
}
.saacademy-contact-info-heading .saacademy-section-label {
color: #ffffff;
}
.saacademy-contact-info-heading .saacademy-section-label::before {
background: #e91e73;
}
.saacademy-contact-info-heading h2 {
margin: 0 0 14px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 30px;
font-weight: 800;
line-height: 1.25;
}
.saacademy-contact-info-heading p {
margin: 0;
color: rgba(255, 255, 255, 0.76);
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
CONTACT INFO ITEM
========================================================= */
.saacademy-contact-info-item {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 17px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.saacademy-contact-info-item:first-of-type {
border-top: 0;
}
.saacademy-contact-info-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(255, 255, 255, 0.11);
color: #ffffff;
font-size: 20px;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.saacademy-contact-info-item:hover
.saacademy-contact-info-icon {
background: #e91e73;
transform: translateY(-3px);
}
.saacademy-contact-info-text {
min-width: 0;
}
.saacademy-contact-info-text > span {
display: block;
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.55);
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.saacademy-contact-info-text h3 {
margin: 0 0 4px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
word-break: break-word;
}
.saacademy-contact-info-text p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.65;
}
/* =========================================================
CONTACT FORM CARD
========================================================= */
.saacademy-contact-form-card {
height: 100%;
padding: 45px;
background: #ffffff;
border: 1px solid #e8eef5;
border-radius: 28px;
box-shadow:
0 25px 60px rgba(8, 43, 92, 0.09);
}
.saacademy-contact-form-heading {
margin-bottom: 32px;
}
.saacademy-contact-form-heading > span {
display: block;
margin-bottom: 8px;
color: #e91e73;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
.saacademy-contact-form-heading h2 {
margin: 0 0 10px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 30px;
font-weight: 800;
line-height: 1.25;
}
.saacademy-contact-form-heading p {
max-width: 600px;
margin: 0 auto;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.8;
text-align: center;
}
/* =========================================================
FORM GROUP
========================================================= */
.saacademy-form-group label {
display: block;
margin-bottom: 9px;
color: #102d52;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 700;
}
.saacademy-input-wrapper {
position: relative;
}
.saacademy-input-wrapper > i {
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
color: #1769c2;
font-size: 16px;
pointer-events: none;
z-index: 2;
}
.saacademy-input-wrapper input,
.saacademy-input-wrapper select,
.saacademy-input-wrapper textarea {
width: 100%;
border: 1px solid #dce5ef;
border-radius: 13px;
background: #fbfdff;
color: #102d52;
font-family: "Manrope", sans-serif;
font-size: 13px;
outline: none;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
.saacademy-input-wrapper input,
.saacademy-input-wrapper select {
height: 53px;
padding: 0 17px 0 48px;
}
.saacademy-input-wrapper textarea {
min-height: 135px;
padding: 16px 17px 16px 48px;
resize: vertical;
}
.saacademy-input-wrapper select {
appearance: none;
cursor: pointer;
}
.saacademy-input-wrapper input::placeholder,
.saacademy-input-wrapper textarea::placeholder {
color: #9aa9b9;
}
.saacademy-input-wrapper input:focus,
.saacademy-input-wrapper select:focus,
.saacademy-input-wrapper textarea:focus {
border-color: #1769c2;
background: #ffffff;
box-shadow:
0 0 0 4px rgba(23, 105, 194, 0.08);
}
/* textarea icon */
.saacademy-textarea-wrapper > i {
top: 21px;
transform: none;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
.saacademy-contact-submit {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 0;
border-radius: 13px;
background:
linear-gradient(
100deg,
#082b5c,
#1769c2
);
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.3px;
cursor: pointer;
box-shadow:
0 12px 28px rgba(8, 43, 92, 0.18);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-contact-submit i {
font-size: 17px;
transition: transform 0.3s ease;
}
.saacademy-contact-submit:hover {
transform: translateY(-3px);
box-shadow:
0 18px 35px rgba(8, 43, 92, 0.24);
}
.saacademy-contact-submit:hover i {
transform: translateX(5px);
}
/* =========================================================
BENEFITS SECTION
========================================================= */
.saacademy-contact-benefits {
padding: 110px 0;
background: #ffffff;
}
.saacademy-contact-benefits-heading {
max-width: 720px;
margin: 0 auto 55px;
}
.saacademy-contact-benefits-heading h2 {
margin: 0 0 13px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: clamp(30px, 4vw, 43px);
font-weight: 800;
}
.saacademy-contact-benefits-heading p {
max-width: 650px;
margin: 0 auto;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
BENEFIT CARD
========================================================= */
.saacademy-contact-benefit-card {
height: 100%;
padding: 35px 30px;
text-align: center;
border: 1px solid #e7edf4;
border-radius: 22px;
background: #ffffff;
box-shadow:
0 12px 35px rgba(8, 43, 92, 0.055);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.saacademy-contact-benefit-card:hover {
transform: translateY(-8px);
border-color: rgba(23, 105, 194, 0.18);
box-shadow:
0 22px 45px rgba(8, 43, 92, 0.11);
}
.saacademy-contact-benefit-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
border-radius: 18px;
background: #fff1f7;
color: #e91e73;
font-size: 25px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.saacademy-contact-benefit-card:hover
.saacademy-contact-benefit-icon {
transform: translateY(-4px);
background: #e91e73;
color: #ffffff;
}
.saacademy-contact-benefit-card h3 {
margin: 0 0 12px;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 800;
}
.saacademy-contact-benefit-card p {
margin: 0;
color: #6d7e94;
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
FINAL CTA
========================================================= */
.saacademy-contact-cta {
padding: 0 0 110px;
background: #ffffff;
}
.saacademy-contact-cta-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 50px 55px;
border-radius: 28px;
background:
linear-gradient(
135deg,
#082b5c 0%,
#1769c2 100%
);
overflow: hidden;
box-shadow:
0 25px 55px rgba(8, 43, 92, 0.15);
}
.saacademy-contact-cta-inner::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -100px;
top: -130px;
border-radius: 50%;
border: 45px solid rgba(255, 255, 255, 0.06);
}
.saacademy-contact-cta-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.saacademy-contact-cta-content > span {
display: block;
margin-bottom: 10px;
color: #ffb2d0;
font-family: "Manrope", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
.saacademy-contact-cta-content h2 {
margin: 0 0 12px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: clamp(27px, 3vw, 38px);
font-weight: 800;
line-height: 1.2;
}
.saacademy-contact-cta-content p {
margin: 0;
color: rgba(255, 255, 255, 0.75);
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.8;
}
.saacademy-contact-cta-action {
position: relative;
z-index: 2;
flex-shrink: 0;
}
.saacademy-contact-cta-button {
min-width: 160px;
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 23px;
border-radius: 12px;
background: #ffffff;
color: #082b5c;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.saacademy-contact-cta-button i {
transition: transform 0.3s ease;
}
.saacademy-contact-cta-button:hover {
color: #082b5c;
transform: translateY(-3px);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.16);
}
.saacademy-contact-cta-button:hover i {
transform: translate(3px, -3px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.saacademy-contact-banner {
min-height: 380px;
}
.saacademy-contact-intro {
padding: 80px 0 55px;
}
.saacademy-contact-main {
padding-bottom: 85px;
}
.saacademy-contact-info {
padding: 38px 32px;
}
.saacademy-contact-form-card {
padding: 38px 32px;
}
.saacademy-contact-benefits {
padding: 85px 0;
}
.saacademy-contact-cta {
padding-bottom: 85px;
}
.saacademy-contact-cta-inner {
padding: 42px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.saacademy-contact-banner {
min-height: auto;
}
.saacademy-contact-banner-content {
max-width: none;
padding: 70px 0 45px;
position: relative;
z-index: 5;
}
/* IMAGE BECOMES NORMAL BLOCK */
.saacademy-contact-banner-image-wrap {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
height: 380px;
transform: none;
margin: 0;
padding: 0 20px 60px;
box-sizing: border-box;
display: block;
z-index: 3;
}
.saacademy-contact-banner-image {
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.20),
0 0 0 1px rgba(255, 255, 255, 0.10);
}
.saacademy-contact-banner-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: none;
}
/* MOBILE OVERLAY */
.saacademy-contact-banner-image-wrap::before {
width: 240px;
height: 240px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
filter: blur(65px);
opacity: .5;
}
.saacademy-contact-banner-image::after {
background: none;
}
.saacademy-contact-banner p {
margin: 0 auto;
font-size: 14px;
}
.saacademy-contact-banner {
min-height: auto;
}
.saacademy-contact-banner .container {
position: relative;
}
/* TEXT */
.saacademy-contact-banner-content {
max-width: none;
padding: 70px 0 45px;
position: relative;
z-index: 5;
}
/* IMAGE BELOW TEXT */
.saacademy-contact-banner-image-wrap {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
height: 380px;
margin: 0;
padding: 0 20px 60px;
box-sizing: border-box;
display: block;
z-index: 2;
}
.saacademy-contact-banner-image {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
}
.saacademy-contact-banner-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: none;
}
/* REMOVE DESKTOP SIDE FADE */
.saacademy-contact-banner-image::before {
background:
linear-gradient(
180deg,
rgba(16,45,82,.10) 0%,
transparent 25%,
transparent 78%,
rgba(16,45,82,.40) 100%
);
}
.saacademy-contact-banner-image::after {
background: none;
}
/* MOBILE GLOW */
.saacademy-contact-banner-image-wrap::after {
width: 280px;
height: 280px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
filter: blur(70px);
opacity: .45;
}
.saacademy-contact-intro {
padding: 65px 0 45px;
}
.saacademy-contact-intro-content h2 {
font-size: 30px;
}
.saacademy-contact-main {
padding: 20px 0 70px;
}
.saacademy-contact-info {
padding: 32px 25px;
border-radius: 22px;
}
.saacademy-contact-info-heading h2 {
font-size: 27px;
}
.saacademy-contact-form-card {
padding: 30px 22px;
border-radius: 22px;
}
.saacademy-contact-form-heading h2 {
font-size: 27px;
}
.saacademy-contact-benefits {
padding: 70px 0;
}
.saacademy-contact-benefits-heading {
margin-bottom: 40px;
}
.saacademy-contact-benefits-heading h2 {
font-size: 30px;
}
.saacademy-contact-benefit-card {
padding: 30px 25px;
}
.saacademy-contact-cta {
padding-bottom: 70px;
}
.saacademy-contact-cta-inner {
flex-direction: column;
align-items: flex-start;
padding: 35px 27px;
border-radius: 22px;
}
.saacademy-contact-cta-action {
width: 100%;
}
.saacademy-contact-cta-button {
width: 100%;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.saacademy-contact-banner h1 {
font-size: 38px;
}
.saacademy-contact-banner p {
font-size: 13px;
}
.saacademy-contact-info-item {
gap: 12px;
}
.saacademy-contact-info-icon {
width: 43px;
height: 43px;
flex: 0 0 43px;
font-size: 17px;
}
.saacademy-contact-info-text h3 {
font-size: 13px;
}
.saacademy-contact-form-card {
padding: 27px 18px;
}
.saacademy-input-wrapper input,
.saacademy-input-wrapper select {
height: 50px;
}
}
.saacademy-contact-info-text {
min-width: 0;
text-align: left;
}
.saacademy-contact-info-text > span {
display: block;
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.55);
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
text-align: left;
}
.saacademy-contact-info-text h3 {
margin: 0 0 4px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
word-break: break-word;
text-align: left;
}
.saacademy-contact-info-text p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-family: "Manrope", sans-serif;
font-size: 12px;
line-height: 1.65;
text-align: left;
}
/* =========================================
EXAM DATE SECTION
========================================= */
.saacademy-exam-date {
min-height: 65vh;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 20px;
background: #ffffff;
text-align: center;
}
.saacademy-exam-date-content {
max-width: 850px;
margin: 0 auto;
padding: 70px 40px;
background: #fff1f7;
border: 1px solid rgba(8, 43, 92, 0.08);
border-radius: 25px;
box-shadow:
0 20px 50px rgba(8, 43, 92, 0.08);
}
/* SECTION LABEL */
.saacademy-exam-date-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 18px;
color: #e91e73;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.saacademy-exam-date-label span {
width: 35px;
height: 2px;
display: inline-block;
background: #e91e73;
}
/* MAIN HEADING */
.saacademy-exam-date h1 {
margin: 0;
color: #082b5c;
font-family: "Playfair Display", serif;
font-size: clamp(36px, 5vw, 60px);
font-weight: 700;
line-height: 1.2;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.saacademy-exam-date {
min-height: 55vh;
padding: 70px 15px;
}
.saacademy-exam-date-content {
padding: 50px 22px;
border-radius: 20px;
}
.saacademy-exam-date h1 {
font-size: 36px;
line-height: 1.25;
}
.saacademy-exam-date-label {
font-size: 10px;
letter-spacing: 1.5px;
}
}