:root {
--primary: #073eb5;
--primary-light: #1555d4;
--primary-dark: #052873;
--primary-deep: #031b51;
--yellow: #f7ca24;
--yellow-dark: #d8a900;
--white: #ffffff;
--background: #f4f7fc;
--surface: #ffffff;
--text: #14213d;
--muted: #64748b;
--border: #dce5f2;
--shadow: 0 20px 50px rgba(7, 62, 181, 0.14);
--small-shadow: 0 10px 28px rgba(7, 62, 181, 0.08);
--radius: 20px;
--container: 1180px;
}

/* =========================
RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family: Inter, Arial, Helvetica, sans-serif;
background: var(--background);
color: var(--text);
line-height: 1.65;
}

body.menu-open {
overflow: hidden;
}

a {
color: inherit;
text-decoration: none;
}

img {
display: block;
max-width: 100%;
}

button {
font: inherit;
}

.container {
width: min(92%, var(--container));
margin: 0 auto;
}

/* =========================
HEADER
========================= */

.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.97);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(14px);
}

.navbar {
min-height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}

.brand {
display: flex;
align-items: center;
gap: 13px;
flex-shrink: 0;
}

.brand-logo {
width: 58px;
height: 58px;
object-fit: cover;
object-position: center;
border-radius: 12px;
border: 2px solid var(--primary);
box-shadow: 0 5px 15px rgba(7, 62, 181, 0.16);
}

.brand-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}

.brand-text strong {
color: var(--primary);
font-size: 19px;
font-weight: 800;
}

.brand-text span {
color: var(--muted);
font-size: 12px;
margin-top: 3px;
}

.main-navigation {
display: flex;
align-items: center;
gap: 22px;
}

.main-navigation a {
position: relative;
color: #334155;
font-size: 13px;
font-weight: 700;
padding: 31px 0 27px;
transition: color 0.2s ease;
}

.main-navigation a::after {
content: "";
position: absolute;
left: 0;
bottom: 19px;
width: 0;
height: 3px;
border-radius: 20px;
background: var(--yellow);
transition: width 0.25s ease;
}

.main-navigation a:hover,
.main-navigation a.active {
color: var(--primary);
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
width: 100%;
}

.menu-button {
width: 46px;
height: 42px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 0;
border-radius: 10px;
background: var(--primary);
cursor: pointer;
}

.menu-button span {
width: 22px;
height: 2px;
background: var(--white);
border-radius: 10px;
transition: 0.25s ease;
}

.menu-button.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.menu-button.open span:nth-child(2) {
opacity: 0;
}

.menu-button.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

/* =========================
HERO
========================= */

.hero {
position: relative;
overflow: hidden;
padding: 96px 0;
color: var(--white);
background:
radial-gradient(
circle at 88% 16%,
rgba(247, 202, 36, 0.22),
transparent 22%
),
linear-gradient(
135deg,
var(--primary-dark) 0%,
var(--primary) 52%,
var(--primary-light) 100%
);
}

.hero-decoration {
position: absolute;
border-radius: 50%;
pointer-events: none;
}

.hero-decoration-one {
width: 360px;
height: 360px;
left: -180px;
bottom: -180px;
border: 70px solid rgba(255, 255, 255, 0.04);
}

.hero-decoration-two {
width: 180px;
height: 180px;
right: 40%;
top: -100px;
border: 38px solid rgba(247, 202, 36, 0.08);
}

.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
gap: 64px;
align-items: center;
}

.hero-label {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 15px;
margin-bottom: 23px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 100px;
background: rgba(255, 255, 255, 0.09);
color: var(--yellow);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}

.hero h1 {
max-width: 780px;
margin-bottom: 24px;
font-size: clamp(44px, 6vw, 74px);
line-height: 1.06;
letter-spacing: -2px;
}

.hero-description {
max-width: 720px;
color: rgba(255, 255, 255, 0.81);
font-size: 18px;
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 35px;
}

.button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 24px;
border-radius: 11px;
font-size: 14px;
font-weight: 800;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}

.button:hover {
transform: translateY(-2px);
}

.button-yellow {
background: var(--yellow);
color: var(--primary-deep);
box-shadow: 0 12px 24px rgba(247, 202, 36, 0.2);
}

.button-yellow:hover {
background: #ffd83f;
box-shadow: 0 15px 30px rgba(247, 202, 36, 0.27);
}

.button-outline {
border: 1px solid rgba(255, 255, 255, 0.48);
color: var(--white);
}

.button-outline:hover {
background: var(--white);
color: var(--primary);
}

.button-blue {
background: var(--primary);
color: var(--white);
}

.button-blue:hover {
background: var(--primary-dark);
box-shadow: 0 12px 25px rgba(7, 62, 181, 0.22);
}

.hero-highlights {
display: flex;
flex-wrap: wrap;
gap: 27px;
margin-top: 48px;
}

.hero-highlight {
min-width: 140px;
padding-left: 13px;
border-left: 3px solid var(--yellow);
}

.hero-highlight strong {
display: block;
color: var(--white);
font-size: 14px;
}

.hero-highlight span {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.68);
font-size: 12px;
}

.hero-logo-panel {
padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 26px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 30px 60px rgba(2, 24, 74, 0.3);
backdrop-filter: blur(12px);
}

.logo-frame {
overflow: hidden;
border-radius: 18px;
background: var(--primary);
}

.hero-logo {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}

.verified-information {
display: flex;
align-items: center;
gap: 13px;
margin-top: 14px;
padding: 14px 12px 6px;
}

.verified-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 50%;
background: var(--yellow);
color: var(--primary-deep);
font-weight: 900;
}

.verified-information strong {
display: block;
font-size: 13px;
}

.verified-information p {
margin-top: 2px;
color: rgba(255, 255, 255, 0.68);
font-size: 11px;
}

/* =========================
GENERAL SECTIONS
========================= */

.section {
padding: 92px 0;
}

.section-label {
margin-bottom: 13px;
color: var(--primary);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.7px;
text-transform: uppercase;
}

.yellow-label {
color: var(--yellow);
}

.section-heading {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
gap: 60px;
align-items: end;
margin-bottom: 45px;
}

.section-heading h2,
.testing-content h2,
.contact-card h2,
.about-content h2,
.contact-information h2 {
color: var(--primary-dark);
font-size: clamp(31px, 4vw, 47px);
line-height: 1.16;
letter-spacing: -1px;
}

.section-introduction {
color: var(--muted);
font-size: 16px;
}

/* =========================
FEATURE CARDS
========================= */

.institution-section {
background: var(--background);
}

.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.feature-card {
min-height: 310px;
display: flex;
flex-direction: column;
padding: 31px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--small-shadow);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}

.feature-card:hover {
transform: translateY(-6px);
border-color: rgba(7, 62, 181, 0.25);
box-shadow: var(--shadow);
}

.feature-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
margin-bottom: 24px;
border-radius: 14px;
background: rgba(7, 62, 181, 0.09);
color: var(--primary);
font-weight: 900;
}

.feature-card:nth-child(2) .feature-icon {
background: rgba(247, 202, 36, 0.19);
color: #987400;
}

.feature-card h3 {
margin-bottom: 13px;
color: var(--primary-dark);
font-size: 22px;
}

.feature-card p {
color: var(--muted);
font-size: 15px;
}

.feature-card a {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
padding-top: 23px;
color: var(--primary);
font-size: 14px;
font-weight: 800;
}

.feature-card a span {
transition: transform 0.2s ease;
}

.feature-card a:hover span {
transform: translateX(4px);
}

/* =========================
FEATURED COURSES
========================= */

.featured-courses-section {
background: var(--white);
}

.featured-courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.featured-course-card {
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 20px;
background: var(--white);
box-shadow: var(--small-shadow);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}

.featured-course-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}

.featured-course-image {
position: relative;
height: 220px;
overflow: hidden;
background: #e9eff8;
}

.featured-course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.featured-course-card:hover .featured-course-image img {
transform: scale(1.05);
}

.featured-course-image span {
position: absolute;
left: 17px;
bottom: 16px;
padding: 7px 12px;
border-radius: 100px;
background: var(--yellow);
color: var(--primary-deep);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.6px;
text-transform: uppercase;
}

.featured-course-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 25px;
}

.featured-course-content h3 {
margin-bottom: 11px;
color: var(--primary-dark);
font-size: 22px;
}

.featured-course-content p {
color: var(--muted);
font-size: 14px;
}

.featured-course-content a {
display: inline-flex;
margin-top: auto;
padding-top: 22px;
color: var(--primary);
font-size: 13px;
font-weight: 900;
}

.center-button {
display: flex;
justify-content: center;
margin-top: 38px;
}

/* =========================
TESTING SECTION
========================= */

.testing-section {
position: relative;
overflow: hidden;
color: var(--white);
background:
linear-gradient(
135deg,
var(--primary-deep),
var(--primary-dark)
);
}

.testing-section::after {
content: "";
position: absolute;
right: -170px;
top: -170px;
width: 420px;
height: 420px;
border: 75px solid rgba(247, 202, 36, 0.06);
border-radius: 50%;
}

.testing-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
gap: 64px;
align-items: center;
}

.testing-content h2 {
margin-bottom: 22px;
color: var(--white);
}

.testing-content > p {
max-width: 720px;
color: rgba(255, 255, 255, 0.73);
}

.testing-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
margin: 31px 0 34px;
}

.testing-list-item {
display: flex;
align-items: center;
gap: 11px;
}

.testing-list-item span {
width: 25px;
height: 25px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 50%;
background: var(--yellow);
color: var(--primary-deep);
font-size: 12px;
font-weight: 900;
}

.testing-list-item p {
color: rgba(255, 255, 255, 0.83);
font-size: 14px;
}

.light-list .testing-list-item p {
color: var(--muted);
}

.institution-card {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: var(--radius);
background: var(--white);
color: var(--text);
box-shadow: 0 30px 60px rgba(1, 16, 49, 0.3);
}

.institution-card-header {
padding: 27px 28px;
background: var(--primary);
color: var(--white);
}

.institution-card-header span {
display: block;
color: var(--yellow);
font-size: 11px;
font-weight: 900;
letter-spacing: 1.3px;
text-transform: uppercase;
}

.institution-card-header strong {
display: block;
margin-top: 6px;
font-size: 25px;
}

.institution-row {
display: flex;
justify-content: space-between;
gap: 25px;
padding: 17px 28px;
border-bottom: 1px solid var(--border);
}

.institution-row span {
color: var(--muted);
font-size: 13px;
}

.institution-row strong {
color: var(--primary-dark);
font-size: 13px;
text-align: right;
overflow-wrap: anywhere;
}

.institution-card-footer {
padding: 16px 28px;
background: #f7f9fd;
color: var(--muted);
font-size: 12px;
text-align: center;
}

/* =========================
CONTACT BANNER
========================= */

.contact-section {
background: var(--background);
}

.contact-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 48px;
border: 1px solid var(--border);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(7, 62, 181, 0.05),
rgba(247, 202, 36, 0.06)
),
var(--white);
box-shadow: var(--small-shadow);
}

.contact-card > div {
max-width: 760px;
}

.contact-card h2 {
margin-bottom: 14px;
}

.contact-card p:last-child {
color: var(--muted);
}

/* =========================
PAGE HERO
========================= */

.page-hero {
position: relative;
overflow: hidden;
padding: 85px 0;
color: var(--white);
background:
radial-gradient(
circle at 85% 20%,
rgba(247, 202, 36, 0.2),
transparent 24%
),
linear-gradient(
135deg,
var(--primary-deep),
var(--primary)
);
}

.page-hero::after {
content: "";
position: absolute;
right: -120px;
bottom: -180px;
width: 360px;
height: 360px;
border: 65px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
}

.page-hero-content {
position: relative;
z-index: 2;
max-width: 820px;
}

.page-label {
margin-bottom: 14px;
color: var(--yellow);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.7px;
text-transform: uppercase;
}

.page-hero h1 {
margin-bottom: 18px;
font-size: clamp(42px, 6vw, 67px);
line-height: 1.08;
letter-spacing: -1.5px;
}

.page-hero p:last-child {
max-width: 700px;
color: rgba(255, 255, 255, 0.78);
font-size: 17px;
}

/* =========================
ABOUT PAGE
========================= */

.about-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
gap: 60px;
align-items: start;
}

.about-content h2 {
margin-bottom: 22px;
}

.about-content p {
margin-bottom: 18px;
color: var(--muted);
}

.about-profile-card {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 22px;
background: var(--white);
box-shadow: var(--shadow);
}

.about-profile-header {
display: flex;
align-items: center;
gap: 16px;
padding: 26px;
background: var(--primary);
color: var(--white);
}

.about-profile-header img {
width: 70px;
height: 70px;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}

.about-profile-header span {
display: block;
color: var(--yellow);
font-size: 11px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
}

.about-profile-header strong {
display: block;
margin-top: 4px;
font-size: 24px;
}

.about-profile-body {
padding: 10px 26px;
}

.values-section {
background: var(--white);
}

.about-highlight-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.about-highlight-card {
display: flex;
gap: 20px;
padding: 28px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--white);
box-shadow: var(--small-shadow);
}

.about-highlight-card > span {
width: 48px;
height: 48px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 14px;
background: rgba(7, 62, 181, 0.09);
color: var(--primary);
font-weight: 900;
}

.about-highlight-card h3 {
margin-bottom: 8px;
color: var(--primary-dark);
}

.about-highlight-card p {
color: var(--muted);
font-size: 14px;
}

/* =========================
COURSES PAGE
========================= */

.course-filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-bottom: 35px;
}

.course-filter-button {
min-height: 43px;
padding: 0 19px;
border: 1px solid var(--border);
border-radius: 100px;
background: var(--white);
color: var(--primary-dark);
font-weight: 800;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}

.course-filter-button:hover,
.course-filter-button.active {
border-color: var(--primary);
background: var(--primary);
color: var(--white);
}

.courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.course-card {
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 19px;
background: var(--white);
box-shadow: var(--small-shadow);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}

.course-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}

.course-card.hidden {
display: none;
}

.course-image-wrapper {
position: relative;
overflow: hidden;
height: 220px;
background: #e9eff8;
}

.course-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.course-card:hover .course-image {
transform: scale(1.05);
}

.course-category {
position: absolute;
left: 17px;
bottom: 16px;
padding: 7px 12px;
border-radius: 100px;
background: var(--yellow);
color: var(--primary-deep);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.7px;
text-transform: uppercase;
}

.course-card-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 25px;
}

.course-card-content h3 {
margin-bottom: 11px;
color: var(--primary-dark);
font-size: 22px;
}

.course-card-content p {
color: var(--muted);
font-size: 14px;
}

.course-card-content a {
display: inline-flex;
margin-top: auto;
padding-top: 22px;
color: var(--primary);
font-size: 13px;
font-weight: 900;
}

/* =========================
STAFF PAGE
========================= */

.staff-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.staff-card {
padding: 30px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--white);
box-shadow: var(--small-shadow);
}

.staff-avatar {
width: 68px;
height: 68px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 50%;
background: var(--primary);
color: var(--white);
font-weight: 900;
}

.staff-card h3 {
color: var(--primary-dark);
}

.staff-role {
color: var(--muted);
margin: 4px 0 10px;
}

.staff-card a {
color: var(--primary);
font-size: 14px;
overflow-wrap: anywhere;
}

.staff-card p:last-child {
color: var(--muted);
margin-top: 12px;
}

/* =========================
CONTACT PAGE
========================= */

.contact-page-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
gap: 60px;
align-items: start;
}

.contact-information h2 {
max-width: 700px;
}

.contact-introduction {
max-width: 690px;
margin-top: 18px;
color: var(--muted);
}

.contact-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 38px;
}

.contact-detail-card {
display: flex;
align-items: center;
gap: 16px;
min-height: 115px;
padding: 22px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--white);
box-shadow: var(--small-shadow);
}

.contact-detail-icon {
width: 45px;
height: 45px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 12px;
background: rgba(7, 62, 181, 0.1);
color: var(--primary);
font-size: 16px;
font-weight: 900;
}

.contact-detail-card span {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 12px;
}

.contact-detail-card strong,
.contact-detail-card a {
color: var(--primary-dark);
font-size: 14px;
overflow-wrap: anywhere;
}

.official-contact-card {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 22px;
background: var(--white);
box-shadow: var(--shadow);
}

.official-contact-header {
display: flex;
align-items: center;
gap: 16px;
padding: 26px;
background: var(--primary);
color: var(--white);
}

.official-contact-header img {
width: 70px;
height: 70px;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
}

.official-contact-header span {
display: block;
color: var(--yellow);
font-size: 11px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
}

.official-contact-header strong {
display: block;
margin-top: 4px;
font-size: 24px;
}

.official-contact-body {
padding: 10px 26px;
}

.official-contact-row {
display: flex;
justify-content: space-between;
gap: 25px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}

.official-contact-row:last-child {
border-bottom: 0;
}

.official-contact-row span {
color: var(--muted);
font-size: 12px;
}

.official-contact-row strong,
.official-contact-row a {
color: var(--primary-dark);
font-size: 13px;
text-align: right;
overflow-wrap: anywhere;
}

.contact-email-button {
width: calc(100% - 52px);
margin: 15px 26px 26px;
}

/* =========================
SOCIAL CARDS
========================= */

.social-section {
background: var(--white);
}

.social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.social-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 17px;
align-items: center;
padding: 25px;
border: 1px solid var(--border);
border-radius: 17px;
background: var(--background);
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.social-card:hover {
transform: translateY(-4px);
border-color: rgba(7, 62, 181, 0.25);
box-shadow: var(--small-shadow);
}

.social-icon {
width: 49px;
height: 49px;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--primary);
color: var(--white);
font-size: 13px;
font-weight: 900;
}

.social-card strong {
display: block;
color: var(--primary-dark);
}

.social-card div span {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 12px;
}

.social-arrow {
color: var(--primary);
font-size: 22px;
font-weight: 900;
}

.social-card-disabled {
cursor: default;
opacity: 0.72;
}

.social-card-disabled:hover {
transform: none;
box-shadow: none;
border-color: var(--border);
}

/* =========================
COMMUNICATION NOTICE
========================= */

.communication-notice {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 38px;
border: 1px solid rgba(7, 62, 181, 0.2);
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(7, 62, 181, 0.06),
rgba(247, 202, 36, 0.1)
),
var(--white);
}

.communication-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 50%;
background: var(--yellow);
color: var(--primary-deep);
font-weight: 900;
}

.communication-notice h2 {
margin-bottom: 8px;
color: var(--primary-dark);
font-size: 25px;
}

.communication-notice p {
color: var(--muted);
}

.communication-notice strong {
color: var(--primary);
}

/* =========================
FOOTER
========================= */

.site-footer {
background: var(--primary-deep);
color: var(--white);
}

.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 0.8fr;
gap: 60px;
padding: 52px 0 37px;
}

.footer-brand {
display: flex;
align-items: center;
gap: 14px;
}

.footer-brand img {
width: 66px;
height: 66px;
object-fit: cover;
border-radius: 13px;
border: 2px solid rgba(255, 255, 255, 0.24);
}

.footer-brand strong {
display: block;
font-size: 19px;
}

.footer-brand p,
.footer-location p {
margin-top: 4px;
color: rgba(255, 255, 255, 0.61);
font-size: 13px;
}

.footer-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 25px;
}

.footer-links a {
color: rgba(255, 255, 255, 0.69);
font-size: 13px;
}

.footer-links a:hover {
color: var(--yellow);
}

.footer-location strong {
color: var(--yellow);
font-size: 13px;
}

.footer-location a:hover {
color: var(--yellow);
}

.footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.52);
font-size: 12px;
}

/* =========================
TABLET
========================= */

@media (max-width: 980px) {
.menu-button {
display: flex;
}

.main-navigation {
position: absolute;
top: 84px;
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0 4%;
background: var(--white);
border-bottom: 1px solid transparent;
opacity: 0;
pointer-events: none;
transition:
max-height 0.35s ease,
padding 0.35s ease,
opacity 0.25s ease;
}

.main-navigation.open {
max-height: 520px;
padding-top: 12px;
padding-bottom: 17px;
border-bottom-color: var(--border);
opacity: 1;
pointer-events: auto;
}

.main-navigation a {
width: 100%;
padding: 13px 0;
border-bottom: 1px solid #edf1f7;
}

.main-navigation a::after {
display: none;
}

.hero-grid,
.testing-grid,
.about-grid,
.contact-page-grid {
grid-template-columns: 1fr;
}

.hero-logo-panel {
max-width: 560px;
}

.section-heading {
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
}

.feature-grid,
.featured-courses-grid,
.courses-grid {
grid-template-columns: repeat(2, 1fr);
}

.footer-grid {
grid-template-columns: 1fr 1fr;
}

.footer-location {
grid-column: 1 / -1;
}
}

/* =========================
MOBILE
========================= */

@media (max-width: 700px) {
.brand-text span {
display: none;
}

.brand-logo {
width: 51px;
height: 51px;
}

.hero {
padding: 72px 0;
}

.hero h1 {
font-size: 43px;
letter-spacing: -1.3px;
}

.hero-description {
font-size: 16px;
}

.hero-highlights {
display: grid;
grid-template-columns: 1fr;
gap: 13px;
}

.section {
padding: 70px 0;
}

.feature-grid,
.featured-courses-grid,
.courses-grid,
.contact-details,
.social-grid,
.staff-grid,
.about-highlight-grid {
grid-template-columns: 1fr;
}

.testing-list {
grid-template-columns: 1fr;
}

.contact-card {
flex-direction: column;
align-items: flex-start;
padding: 30px;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}

.footer-location {
grid-column: auto;
}

.footer-bottom {
flex-direction: column;
}

.official-contact-row,
.institution-row {
flex-direction: column;
gap: 4px;
}

.official-contact-row strong,
.official-contact-row a,
.institution-row strong {
text-align: left;
}

.communication-notice {
flex-direction: column;
padding: 28px;
}
}

/* =========================
SMALL MOBILE
========================= */

@media (max-width: 480px) {
.navbar {
min-height: 76px;
}

.brand-text strong {
font-size: 16px;
}

.main-navigation {
top: 76px;
}

.hero h1 {
font-size: 37px;
}

.hero-actions {
flex-direction: column;
}

.button {
width: 100%;
}

.hero-logo-panel {
padding: 10px;
}

.feature-card,
.contact-card,
.staff-card {
padding: 24px;
}

.course-image-wrapper,
.featured-course-image {
height: 210px;
}
}
.staff-contact-list {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 18px;
  border-radius: 14px;
  background: var(--background);
}

.staff-contact-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.staff-contact-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.staff-contact-item strong,
.staff-contact-item a {
  color: var(--primary-dark);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.staff-contact-item a:hover {
  color: var(--primary);
}
/* =========================
   TESTING FACILITIES PAGE
========================= */

.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.facility-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.facility-number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(7, 62, 181, 0.09);
  color: var(--primary);
  font-weight: 900;
}

.facility-card h3 {
  margin-bottom: 10px;
  color: var(--primary-dark);
  font-size: 20px;
}

.facility-card p {
  color: var(--muted);
  font-size: 14px;
}

.facility-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.facility-photo-placeholder {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border: 2px dashed #b9c8dd;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(7, 62, 181, 0.04),
      rgba(247, 202, 36, 0.08)
    ),
    var(--white);
  text-align: center;
}

.facility-photo-placeholder span {
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.facility-photo-placeholder strong {
  color: var(--primary-dark);
  font-size: 18px;
}

.facility-photo-placeholder p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .facility-grid,
  .facility-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .facility-grid,
  .facility-photo-grid {
    grid-template-columns: 1fr;
  }
}
/* LANGUAGE SWITCHER */

.language-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.language-link {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 900;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.language-link:hover,
.language-link.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

@media (max-width: 980px) {
  .language-switcher {
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .language-link {
    min-width: 29px;
    height: 29px;
    font-size: 9px;
  }
}