/* =========================================================
CANADA SKILLPATH — MAIN STYLESHEET
Clean responsive layout, typography, components and motion
Shared header and footer are managed separately.
========================================================= */

/* =========================================================

DESIGN TOKENS
========================================================= */

:root {
--blue: #23558c;
--blue2: #3978b7;
--navy: #111e3b;
--red: #d3141b;
--light: #f4f7fc;
--text: #1f2937;
--muted: #667085;
--white: #ffffff;
--border: #e7ebf2;

--shadow: 0 18px 55px rgba(17, 30, 59, .10);
--shadow-lg: 0 25px 70px rgba(17, 30, 59, .17);

--radius: 18px;
--radius-lg: 26px;

--transition: all .35s cubic-bezier(.4, 0, .2, 1);

--container-width: 1180px;
--container-gutter: 48px;


}

/* =========================================================
2. RESET AND BASE
========================================================= */

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

html {
scroll-behavior: smooth;
scroll-padding-top: 110px;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}

body {
width: 100%;
min-width: 320px;
margin: 0;
overflow-x: clip;
font-family: "Inter", Arial, sans-serif;
color: var(--text);
background: var(--white);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}

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

img {
height: auto;
}

button,
input,
select,
textarea {
max-width: 100%;
font: inherit;
}

button {
color: inherit;
}

a {
color: inherit;
text-decoration: none;
overflow-wrap: anywhere;
transition: var(--transition);
}

ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
max-width: 100%;
line-height: 1.2;
overflow-wrap: anywhere;
}

p,
li,
span,
strong,
label {
overflow-wrap: break-word;
}

input,
select,
textarea {
min-width: 0;
}

button,
input,
select,
textarea,
a {
-webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(57, 120, 183, .65);
outline-offset: 4px;
}

section,
header,
footer,
main {
min-width: 0;
}

/* Main content container */

.container {
width: min(var(--container-width), calc(100% - var(--container-gutter)));
margin-inline: auto;
}

/* Prevent grid and flex children from forcing overflow */

.hero-grid > *,
.split-grid > *,
.contact-grid > *,
.final-cta-inner > *,
.footer-grid > *,
.cards-3 > *,
.cards-4 > *,
.program-grid > *,
.timeline > * {
min-width: 0;
}

/* =========================================================
3. SHARED TYPOGRAPHY
========================================================= */

.eyebrow {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
color: var(--red);
font-size: 12px;
font-weight: 900;
letter-spacing: .13em;
text-transform: uppercase;
}

.eyebrow::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 3px;
border-radius: 10px;
background: currentColor;
}

.section {
padding: clamp(70px, 8vw, 105px) 0;
}

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

.section-title {
width: 100%;
max-width: 740px;
margin: 0 auto 55px;
padding-inline: 8px;
text-align: center;
}

.section-title .eyebrow {
justify-content: center;
}

.section-title h2 {
margin: 8px 0 15px;
color: var(--navy);
font-size: clamp(30px, 4vw, 46px);
line-height: 1.15;
letter-spacing: -.035em;
font-weight: 900;
}

.section-title h2 span {
color: var(--blue);
}

.section-title p {
color: var(--muted);
font-size: 16px;
line-height: 1.8;
}

/* =========================================================
4. HOMEPAGE HERO & OVERLAY FIX
========================================================= */

.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(75px, 8vw, 105px) 0 clamp(85px, 9vw, 110px);
color: #fff;
background: var(--navy);
}

.hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
90deg,
rgba(7, 24, 51, 0.78) 0%,
rgba(12, 43, 81, 0.55) 50%,
rgba(13, 48, 87, 0.25) 100%
);
pointer-events: none;
}

.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: radial-gradient(
circle at 82% 20%,
rgba(57, 120, 183, .20),
transparent 30%
);
pointer-events: none;
}

.hero::after {
content: "";
position: absolute;
top: -170px;
right: -170px;
z-index: 2;
width: 420px;
height: 420px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 50%;
box-shadow:
0 0 0 60px rgba(255, 255, 255, .025),
0 0 0 120px rgba(255, 255, 255, .018);
pointer-events: none;
}

/* Hero background slider */

.hero-bg,
.hero-slides {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}

.hero-bg-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1);
transition: opacity 1.4s ease-in-out, transform 6s ease-in-out;
will-change: opacity, transform;
}

.hero-bg-slide.active {
opacity: 1;
animation: heroZoom 7s ease-in-out forwards;
}

@keyframes heroZoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}

/* Hero content layout */

.hero .hero-grid {
position: relative;
z-index: 3;
width: 100%;
}

.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(30px, 5vw, 70px);
align-items: center;
}

.hero-grid > div:first-child {
min-width: 0;
padding-left: 0;
}

.hero .eyebrow,
.dark .eyebrow,
.video-showcase .eyebrow {
color: #ffccd0;
}

.hero h1 {
max-width: 760px;
margin: 10px 0 22px;
color: #fff;
font-size: clamp(36px, 5.2vw, 68px);
line-height: 1.12;
letter-spacing: -.04em;
font-weight: 900;
}

.hero h1 span {
color: #79a9dc;
}

.hero-text {
max-width: 660px;
margin-bottom: 32px;
color: rgba(237, 244, 255, .90);
font-size: 18px;
line-height: 1.8;
}

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

/* =========================================================
5. BUTTONS
========================================================= */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
min-width: 0;
min-height: 52px;
padding: 13px 25px;
border: 2px solid transparent;
border-radius: 999px;
font-size: 15px;
font-weight: 850;
line-height: 1.4;
text-align: center;
overflow-wrap: anywhere;
cursor: pointer;
transition: var(--transition);
}

.btn-primary {
color: #fff;
background: var(--red);
box-shadow: 0 10px 25px rgba(211, 20, 27, .20);
}

.btn-primary:hover {
color: var(--navy);
background: #fff;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(211, 20, 27, .25);
}

.btn-outline {
color: #fff;
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(8px);
}

.btn-outline:hover {
color: var(--navy);
background: #fff;
transform: translateY(-3px);
}

/* =========================================================
6. HERO TRUST CARDS AND IMAGE
========================================================= */

.trust-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.trust-row div {
flex: 1 1 140px;
min-width: 0;
padding: 14px 17px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 15px;
background: rgba(255, 255, 255, .07);
backdrop-filter: blur(12px);
transition: var(--transition);
}

.trust-row div:hover {
background: rgba(255, 255, 255, .12);
transform: translateY(-4px);
}

.trust-row strong {
display: block;
color: #fff;
font-size: 22px;
line-height: 1.3;
}

.trust-row span {
display: block;
margin-top: 3px;
color: #d7e4f4;
font-size: 11px;
}

.hero-card {
position: relative;
min-width: 0;
}

.hero-photo {
position: relative;
min-height: 500px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--radius-lg);
background: url("assets/hero-new.png") center / cover no-repeat;
box-shadow: var(--shadow-lg);
filter: brightness(1.04) contrast(1.02);
transition: transform .5s ease, box-shadow .5s ease;
}

.hero-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 55%,
rgba(17, 30, 59, .40)
);
pointer-events: none;
}

.hero-card:hover .hero-photo {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0, 0, 0, .30);
}

.floating-box {
position: absolute;
bottom: 30px;
left: -15px;
z-index: 5;
width: min(360px, calc(100% - 20px));
padding: 23px 24px;
border-left: 5px solid var(--red);
border-radius: 17px;
color: var(--navy);
background: #fff;
box-shadow: var(--shadow-lg);
}

.floating-box strong {
display: block;
margin-bottom: 5px;
font-size: 18px;
}

.floating-box span {
display: block;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}

/* =========================================================
7. QUICK SERVICES AND GENERAL CARDS
========================================================= */

.quick-services {
position: relative;
z-index: 10;
margin-top: -48px;
}

.cards-3,
.cards-4,
.program-grid {
display: grid;
gap: 24px;
}

.cards-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card {
position: relative;
min-width: 0;
overflow: hidden;
padding: 32px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
transition: var(--transition);
}

.info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--red), var(--blue));
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}

.info-card:hover {
transform: translateY(-7px);
box-shadow: var(--shadow-lg);
}

.info-card:hover::before {
transform: scaleX(1);
}

.info-card > span {
display: inline-grid;
place-items: center;
width: 58px;
height: 58px;
margin-bottom: 18px;
border-radius: 17px;
color: #fff;
background: linear-gradient(135deg, var(--blue), var(--blue2));
font-size: 21px;
box-shadow: 0 10px 25px rgba(35, 85, 140, .20);
}

.info-card h3 {
margin-bottom: 9px;
color: var(--navy);
font-size: 20px;
}

.info-card p {
color: var(--muted);
}

.card-link {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
color: var(--blue);
font-weight: 850;
}

.card-link:hover {
color: var(--red);
transform: translateX(4px);
}

/* =========================================================
8. ABOUT / SPLIT CONTENT
========================================================= */

.split-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(35px, 5vw, 70px);
align-items: center;
}

.split-content {
min-width: 0;
}

.split-content .eyebrow {
color: var(--red);
}

.split-content h2 {
margin: 8px 0 20px;
color: var(--navy);
font-size: clamp(30px, 4vw, 46px);
line-height: 1.15;
letter-spacing: -.035em;
}

.split-content h2 span {
color: var(--blue);
}

.split-content p {
margin-bottom: 17px;
color: var(--muted);
line-height: 1.8;
}

.styled-list {
display: grid;
gap: 12px;
margin-top: 25px;
}

.styled-list li {
position: relative;
padding-left: 31px;
color: var(--text);
font-weight: 650;
}

.styled-list li::before {
content: "✓";
position: absolute;
top: 3px;
left: 0;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: #fff;
background: var(--red);
font-size: 12px;
font-weight: 900;
}

/* Feature panel */

.feature-panel {
position: relative;
min-width: 0;
overflow: hidden;
padding: 40px;
border-radius: var(--radius-lg);
color: #fff;
background: linear-gradient(145deg, #111e3b, #183d68 60%, #23558c);
box-shadow: var(--shadow-lg);
}

.feature-panel::after {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 230px;
height: 230px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 50%;
box-shadow:
0 0 0 35px rgba(255, 255, 255, .025),
0 0 0 70px rgba(255, 255, 255, .02);
pointer-events: none;
}

.feature-panel h3,
.feature-panel p,
.feature-panel ul {
position: relative;
z-index: 2;
}

.feature-panel h3 {
margin-bottom: 17px;
color: #fff;
font-size: 27px;
}

.feature-panel p {
color: #d5e1ef;
}

.feature-panel ul {
margin-top: 22px;
}

.feature-panel li {
position: relative;
margin: 15px 0;
padding-left: 25px;
color: #e6eef8;
}

.feature-panel li::before {
content: "✓";
position: absolute;
left: 0;
color: #ff7a80;
font-weight: 900;
}

/* =========================================================
9. PROGRAM CARDS
========================================================= */

.program-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.program {
position: relative;
min-width: 0;
overflow: hidden;
padding: 30px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
transition: var(--transition);
}

.program::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--red), var(--blue));
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}

.program:hover {
transform: translateY(-7px);
border-color: rgba(35, 85, 140, .18);
box-shadow: var(--shadow-lg);
}

.program:hover::before {
transform: scaleX(1);
}

.program-tag {
display: inline-flex;
max-width: 100%;
padding: 5px 10px;
border-radius: 999px;
color: var(--blue);
background: rgba(35, 85, 140, .09);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
}

.icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin: 17px 0 13px;
border-radius: 16px;
color: var(--blue);
background: linear-gradient(
135deg,
rgba(35, 85, 140, .12),
rgba(57, 120, 183, .08)
);
font-size: 27px;
}

.program h3 {
margin-bottom: 9px;
color: var(--navy);
font-size: 20px;
line-height: 1.4;
}

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

.section-action {
margin-top: 38px;
text-align: center;
}

/* =========================================================
10. PROCESS TIMELINE
========================================================= */

.timeline {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 40px;
}

.timeline-step {
position: relative;
min-width: 0;
padding: 31px;
border: 1px solid var(--border);
border-left: 5px solid var(--blue);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
cursor: pointer;
transition: var(--transition);
}

.timeline-step:hover {
transform: translateY(-7px);
border-left-color: var(--red);
background: linear-gradient(135deg, #fff, #fef4f4);
box-shadow: var(--shadow-lg);
}

.timeline-step > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 17px;
border-radius: 50%;
color: #fff;
background: linear-gradient(135deg, var(--blue), var(--blue2));
font-weight: 900;
transition: var(--transition);
}

.timeline-step:hover > span {
background: var(--red);
transform: scale(1.08);
}

.timeline-step h3 {
margin-bottom: 9px;
color: var(--navy);
font-size: 19px;
}

.timeline-step:hover h3 {
color: var(--red);
}

.timeline-step p {
color: var(--muted);
}

/* =========================================================
11. DARK SECTIONS
========================================================= */

.dark {
position: relative;
overflow: hidden;
color: #fff;
background: var(--navy);
}

.dark::before {
content: "";
position: absolute;
top: -200px;
right: -200px;
width: 420px;
height: 420px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 50%;
box-shadow:
0 0 0 70px rgba(255, 255, 255, .018),
0 0 0 140px rgba(255, 255, 255, .012);
pointer-events: none;
}

.dark h2 {
color: #fff;
}

.dark p {
color: #d0e0f5;
}

.checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 25px;
}

.checklist div {
min-width: 0;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, .08);
border-left: 3px solid var(--red);
border-radius: 12px;
color: #e9f0f8;
background: rgba(255, 255, 255, .045);
transition: var(--transition);
}

.checklist div:hover {
background: rgba(255, 255, 255, .08);
transform: translateX(4px);
}

/* =========================================================
12. PLANE ANIMATION
========================================================= */

.partner-left {
position: relative;
min-width: 0;
}

.plane-wrapper {
position: relative;
width: min(180px, 100%);
height: 140px;
margin-top: 30px;
}

.plane-img {
position: absolute;
top: 10px;
left: 0;
z-index: 2;
width: min(160px, 100%);
height: auto;
filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(35, 85, 140, 1));
transform: rotate(-25deg);
animation: planeFly 3s ease-in-out infinite;
}

.plane-glow {
position: absolute;
top: 20px;
left: 10px;
width: 140px;
height: 100px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(35, 85, 140, .7),
transparent 70%
);
animation: planePulse 2s ease-in-out infinite;
}

@keyframes planePulse {
0%, 100% {
transform: scale(1);
opacity: .6;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}

@keyframes planeFly {
0%, 100% {
transform: rotate(-25deg) translateY(0);
}
50% {
transform: rotate(-20deg) translateY(-10px);
}
}

/* =========================================================
13. TRAINING SECTORS SCROLLER
========================================================= */

.sectors-scroller-section {
padding: 85px 0;
background: var(--light);
}

.sectors-scroller-wrapper {
position: relative;
width: 100%;
min-width: 0;
overflow: hidden;
padding: 20px 0;
}

.sectors-scroller-track {
display: flex;
gap: 24px;
padding: 0 45px;
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.sector-slide {
position: relative;
display: block;
flex: 0 0 320px;
min-width: 0;
height: 380px;
overflow: hidden;
border-radius: 22px;
color: inherit;
background: #ddd;
box-shadow: var(--shadow);
cursor: grab;
transition: var(--transition);
}

.sector-slide:hover {
transform: translateY(-7px);
box-shadow: var(--shadow-lg);
}

.sector-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}

.sector-slide:hover img {
transform: scale(1.07);
}

.sector-overlay {
position: absolute;
inset: auto 0 0;
padding: 55px 22px 22px;
color: #fff;
background: linear-gradient(
180deg,
transparent,
rgba(17, 30, 59, .97)
);
}

.sector-overlay h3 {
color: #fff;
font-size: 20px;
font-weight: 850;
}

.sector-overlay p {
display: inline-block;
max-width: 100%;
margin-top: 9px;
padding: 4px 10px;
border-radius: 999px;
color: #fff;
background: var(--red);
font-size: 12px;
font-weight: 800;
}

.sector-emoji {
display: block;
margin-bottom: 8px;
font-size: 28px;
}

/* Scroller navigation */

.scroller-btn {
position: absolute;
top: 50%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 2px solid rgba(255, 255, 255, .8);
border-radius: 50%;
color: #fff;
background: rgba(17, 30, 59, .88);
font-size: 21px;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
transform: translateY(-50%);
transition: var(--transition);
}

.scroller-btn:hover {
border-color: var(--red);
background: var(--red);
transform: translateY(-50%) scale(1.06);
}

.scroller-btn.prev {
left: 18px;
}

.scroller-btn.next {
right: 18px;
}

/* =========================================================
14. CONTACT SECTION
========================================================= */

.contact-section {
padding: clamp(70px, 8vw, 100px) 0;
background: linear-gradient(135deg, var(--light), #fff);
}

.contact-grid {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 40px;
align-items: start;
}

.contact-info {
min-width: 0;
padding: 36px;
border: 1px solid var(--border);
border-left: 5px solid var(--blue);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
transition: var(--transition);
}

.contact-info:hover {
transform: translateY(-4px);
border-left-color: var(--red);
box-shadow: var(--shadow-lg);
}

.contact-info .eyebrow {
color: var(--red);
}

.contact-info h2 {
margin-bottom: 17px;
color: var(--navy);
font-size: clamp(29px, 3vw, 40px);
line-height: 1.15;
font-weight: 900;
}

.contact-info p {
margin-bottom: 16px;
color: var(--muted);
line-height: 1.8;
}

.contact-email {
display: inline-block;
max-width: 100%;
margin: 20px 0;
color: var(--blue);
font-size: clamp(14px, 1.5vw, 17px);
font-weight: 850;
overflow-wrap: anywhere;
}

.contact-email:hover {
color: var(--red);
}

.contact-highlights {
display: grid;
gap: 11px;
margin-top: 25px;
}

.contact-highlights div {
min-width: 0;
padding: 14px 16px;
border-left: 3px solid var(--blue);
border-radius: 11px;
background: var(--light);
font-weight: 650;
}

.notice {
margin-top: 24px;
padding: 18px 20px;
border-left: 4px solid var(--red);
border-radius: 12px;
color: #4b5563;
background: #fff5f5;
font-size: 13px;
line-height: 1.7;
}

/* Contact form */

.form-wrapper {
min-width: 0;
padding: 36px;
border: 1px solid var(--border);
border-top: 5px solid var(--blue);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
transition: var(--transition);
}

.form-wrapper:hover {
transform: translateY(-4px);
border-top-color: var(--red);
box-shadow: var(--shadow-lg);
}

.contact-form {
display: grid;
gap: 17px;
}

.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.form-group {
display: flex;
flex-direction: column;
min-width: 0;
gap: 7px;
}

.form-group label,
.file-upload label {
color: var(--navy);
font-size: 13px;
font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
min-width: 0;
padding: 14px 16px;
border: 1px solid #d1d5db;
border-radius: 11px;
outline: none;
color: var(--text);
background: #fafafa;
transition: var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #9ca3af;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--blue);
background: #fff;
box-shadow: 0 0 0 4px rgba(35, 85, 140, .10);
}

.contact-form textarea {
min-height: 140px;
resize: vertical;
}

.file-upload {
margin-bottom: 3px;
}

.file-upload input[type="file"] {
display: block;
width: 100%;
max-width: 100%;
padding: 11px;
border: 2px dashed #d1d5db;
border-radius: 11px;
background: #fafafa;
cursor: pointer;
transition: var(--transition);
}

.file-upload input[type="file"]:hover {
border-color: var(--blue);
background: var(--light);
}

.form-submit {
width: 100%;
margin-top: 5px;
}

/* =========================================================
15. VIDEO SHOWCASE
========================================================= */

.video-showcase {
padding: 85px 0;
color: #fff;
background: linear-gradient(135deg, #b80f16, var(--red));
}

.video-showcase .section-title h2 {
color: #fff;
font-size: clamp(27px, 3vw, 36px);
}

.video-showcase .section-title p {
color: #f0f5ff;
}

.video-wrapper {
width: 100%;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 25px 70px rgba(0, 0, 0, .30);
}

.video-wrapper video {
display: block;
width: 100%;
height: auto;
}

/* =========================================================
16. INNER PAGE HEADER
========================================================= */

.page-header {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(75px, 10vw, 120px) 0;
color: #fff;
text-align: center;
background: var(--navy);
}

.page-header::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(
circle at 80% 20%,
rgba(57, 120, 183, .25),
transparent 35%
),
linear-gradient(
90deg,
rgba(17, 30, 59, .96),
rgba(35, 85, 140, .88)
);
pointer-events: none;
}

.page-header-bg {
position: absolute;
inset: 0;
z-index: 0;
}

.page-header-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.4s ease-in-out;
}

.page-header-slide.active {
opacity: 1;
animation: pageHeaderZoom 7s ease-in-out forwards;
}

@keyframes pageHeaderZoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}

.page-header .container {
position: relative;
z-index: 2;
}

.page-header .eyebrow {
justify-content: center;
color: #ffccd0;
}

.page-header h1 {
max-width: 900px;
margin: 0 auto 15px;
padding-inline: 12px;
color: #fff;
font-size: clamp(34px, 5vw, 52px);
font-weight: 900;
line-height: 1.15;
letter-spacing: -.025em;
}

.page-header p {
max-width: 680px;
margin: 0 auto;
padding-inline: 8px;
color: #d0e0f5;
font-size: 17px;
line-height: 1.8;
}

/* =========================================================
17. COURSE CATALOG
========================================================= */

.catalog-section {
padding: 85px 0;
background: var(--light);
}

.sector-block {
min-width: 0;
padding: 32px;
margin-bottom: 30px;
border: 1px solid var(--border);
border-left: 5px solid var(--blue);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
transition: var(--transition);
}

.sector-block:hover {
transform: translateY(-4px);
border-left-color: var(--red);
box-shadow: var(--shadow-lg);
}

.sector-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 13px;
border-bottom: 2px solid var(--light);
color: var(--navy);
font-size: 24px;
font-weight: 850;
}

.course-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 15px;
margin-top: 20px;
}

.course-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
min-width: 0;
padding: 16px;
border-left: 4px solid var(--blue);
border-radius: 10px;
color: inherit;
background: var(--light);
font-weight: 650;
transition: var(--transition);
}

.course-item:hover {
border-left-color: var(--red);
background: #fff;
transform: translateX(3px);
}

.course-duration {
flex-shrink: 0;
color: var(--muted);
font-size: 14px;
font-weight: 750;
}

/* =========================================================
18. PARTNERS
========================================================= */

.partners-section {
padding: 85px 0;
border-top: 1px solid var(--border);
background: #fff;
}

.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
align-items: center;
justify-items: center;
gap: 25px;
margin-top: 40px;
}

.partner-logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
height: 100px;
padding: 20px;
border-radius: 13px;
background: var(--light);
filter: grayscale(100%);
transition: var(--transition);
}

.partner-logo:hover {
filter: grayscale(0);
background: #fff;
transform: translateY(-4px);
box-shadow: var(--shadow);
}

.partner-logo img {
width: auto;
max-width: 100%;
max-height: 60px;
object-fit: contain;
}

/* =========================================================
19. FINAL CALL TO ACTION
========================================================= */

.final-cta {
position: relative;
overflow: hidden;
padding: 85px 0;
color: #fff;
background: linear-gradient(135deg, var(--navy), var(--blue));
}

.final-cta::after {
content: "";
position: absolute;
top: -190px;
right: -180px;
width: 400px;
height: 400px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 50%;
box-shadow:
0 0 0 55px rgba(255, 255, 255, .02),
0 0 0 110px rgba(255, 255, 255, .015);
pointer-events: none;
}

.final-cta-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
}

.final-cta h2 {
margin-bottom: 10px;
color: #fff;
font-size: clamp(29px, 4vw, 44px);
line-height: 1.15;
}

.final-cta p {
max-width: 650px;
color: #dce8f5;
}

/* =========================================================
20. WHATSAPP AND COURSE BUTTONS
========================================================= */

.search-with-whatsapp {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
}

.whatsapp-cta,
.all-courses-cta {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
min-height: 54px;
padding: 11px 20px;
border-radius: 13px;
font-size: 16px;
font-weight: 850;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
transition: var(--transition);
}

.whatsapp-cta {
border: 2px solid rgba(37, 211, 102, .25);
color: #128c7e;
background: rgba(37, 211, 102, .08);
}

.whatsapp-cta img {
flex: 0 0 auto;
width: 38px;
height: 38px;
object-fit: contain;
}

.whatsapp-cta:hover {
border-color: #25d366;
color: #128c7e;
background: rgba(37, 211, 102, .14);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(37, 211, 102, .22);
}

.all-courses-cta {
border: 2px solid rgba(35, 85, 140, .20);
color: var(--navy);
background: rgba(35, 85, 140, .08);
}

.all-courses-cta:hover {
border-color: var(--blue);
color: var(--blue);
background: rgba(35, 85, 140, .14);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(35, 85, 140, .18);
}

/* =========================================================
21. LEGACY FOOTER
========================================================= */

.footer {
padding: 70px 0 25px;
color: #fff;
background: #0b1325;
font-size: 14px;
}

.footer-grid {
display: grid;
grid-template-columns: 1.3fr .9fr .9fr 1.1fr;
gap: 35px;
}

.footer-grid > * {
min-width: 0;
}

.footer-logo-box {
display: inline-block;
max-width: 100%;
margin-bottom: 17px;
padding: 10px 14px;
border-radius: 14px;
background: #fff;
box-shadow: 0 7px 20px rgba(0, 0, 0, .25);
}

.footer-logo-box img {
width: auto;
max-width: 100%;
height: 64px;
object-fit: contain;
}

.footer h4 {
margin-bottom: 15px;
color: #fff;
font-size: 16px;
}

.footer-description {
max-width: 330px;
color: #9ca3af;
line-height: 1.8;
}

.footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.footer-links a {
position: relative;
width: fit-content;
max-width: 100%;
padding-bottom: 2px;
margin: 6px 0;
color: #9ca3af;
overflow-wrap: anywhere;
}

.footer-links a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--red);
transition: width .3s ease;
}

.footer-links a:hover {
color: #fff;
}

.footer-links a:hover::after {
width: 100%;
}

.social-icons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 17px;
}

.social-icons a {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: var(--blue);
font-size: 17px;
transition: var(--transition);
}

.social-icons a:hover {
background: var(--red);
transform: translateY(-3px);
}

.copyright {
padding-top: 24px;
margin-top: 48px;
border-top: 1px solid rgba(255, 255, 255, .08);
color: #9ca3af;
font-size: 12px;
text-align: center;
}

/* =========================================================
22. SCROLL REVEAL ANIMATIONS (MATCHING ABOUT.HTML)
========================================================= */

.js .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .65s cubic-bezier(.4, 0, .2, 1), transform .65s cubic-bezier(.4, 0, .2, 1);
}

.js .reveal.visible {
opacity: 1;
transform: translateY(0);
}

.timeline-step.reveal:nth-child(1),
.sector-block.reveal:nth-child(1),
.value-card.reveal:nth-child(1) {
transition-delay: .1s;
}

.timeline-step.reveal:nth-child(2),
.sector-block.reveal:nth-child(2),
.value-card.reveal:nth-child(2) {
transition-delay: .2s;
}

.timeline-step.reveal:nth-child(3),
.sector-block.reveal:nth-child(3),
.value-card.reveal:nth-child(3) {
transition-delay: .3s;
}

.timeline-step.reveal:nth-child(4),
.sector-block.reveal:nth-child(4) {
transition-delay: .4s;
}

/* =========================================================
23. SEARCH BAR
========================================================= */

.course-search {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
max-width: 580px;
min-height: 66px;
padding: 0 22px;
background: #fff;
border: 1px solid #bdc5cf;
border-radius: 19px;
box-sizing: border-box;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.course-search:focus-within {
border-color: #23558c;
box-shadow: 0 0 0 3px rgba(35, 85, 140, 0.1);
}

.course-search .search-icon {
display: flex;
align-items: center;
justify-content: center;
color: #929daa;
font-size: 19px;
flex-shrink: 0;
}

.course-search input {
width: 100%;
min-width: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
color: #1f2937;
font-family: inherit;
font-size: 21px;
}

.course-search input::placeholder {
color: #929baa;
opacity: 1;
}

/* =========================================================
24. TABLET — 1100px
========================================================= */

@media (max-width: 1100px) {
.hero-grid,
.split-grid {
gap: 35px;
}

.program-grid,
.cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.hero-photo {
    min-height: 440px;
}

.floating-box {
    left: -10px;
}


}

/* =========================================================
25. TABLET AND MOBILE — 900px
========================================================= */

@media (max-width: 900px) {
.container {
width: calc(100% - 40px);
}

.hero {
    padding: 75px 0 95px;
}

.hero-grid,
.split-grid,
.contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
}

.hero-grid > div:first-child {
    padding-inline: 0;
}

.hero-photo {
    min-height: 430px;
}

.floating-box {
    right: 15px;
    bottom: -22px;
    left: 15px;
    width: auto;
    max-width: none;
}

.quick-services {
    margin-top: 40px;
}

.cards-3,
.cards-4,
.program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sector-slide {
    flex-basis: 280px;
    height: 330px;
}

.scroller-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.scroller-btn.prev {
    left: 8px;
}

.scroller-btn.next {
    right: 8px;
}

.final-cta-inner {
    flex-direction: column;
    align-items: flex-start;
}

.contact-info,
.form-wrapper {
    width: 100%;
}


}

/* =========================================================
26. MOBILE — 600px
========================================================= */

@media (max-width: 600px) {
html {
scroll-padding-top: 85px;
}

body {
    font-size: 15px;
}

.container {
    width: calc(100% - 36px);
}

.section {
    padding: 62px 0;
}

.section-title {
    margin-bottom: 36px;
    padding-inline: 2px;
}

.section-title h2 {
    font-size: clamp(27px, 7.5vw, 36px);
    letter-spacing: -.025em;
}

.section-title p {
    font-size: 15px;
    line-height: 1.75;
}

.eyebrow {
    gap: 8px;
    font-size: 10px;
    letter-spacing: .09em;
}

.eyebrow::before {
    flex-basis: 23px;
    width: 23px;
}

/* Homepage hero */

.hero {
    padding: 56px 0 78px;
}

.hero-grid {
    gap: 34px;
}

.hero-grid > div:first-child {
    padding: 0;
}

.hero h1 {
    max-width: 100%;
    margin-top: 10px;
    font-size: clamp(32px, 8.5vw, 46px);
    line-height: 1.13;
    letter-spacing: -.03em;
}

.hero-text {
    max-width: 100%;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.75;
}

.hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 26px;
}

.hero-actions .btn {
    width: 100%;
}

.btn {
    min-height: 49px;
    padding: 12px 18px;
    font-size: 14px;
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.trust-row div {
    min-width: 0;
    padding: 12px;
}

.trust-row strong {
    font-size: 18px;
}

.trust-row span {
    font-size: 11px;
    line-height: 1.5;
}

.hero-photo {
    min-height: 310px;
    border-radius: 19px;
}

.floating-box {
    right: 10px;
    bottom: -22px;
    left: 10px;
    padding: 16px;
}

.floating-box strong {
    font-size: 16px;
}

.floating-box span {
    font-size: 12px;
}

/* Responsive cards */

.cards-3,
.cards-4,
.program-grid,
.timeline,
.footer-grid,
.checklist {
    grid-template-columns: minmax(0, 1fr);
}

.info-card,
.program,
.timeline-step,
.feature-panel,
.contact-info,
.form-wrapper {
    padding: 23px;
}

.info-card h3,
.program h3 {
    font-size: 19px;
}

.feature-panel h3 {
    font-size: 24px;
}

/* Contact form */

.contact-grid {
    gap: 25px;
}

.form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 13px;
    font-size: 16px;
}

.contact-email {
    font-size: 15px;
}

/* Sectors scroller */

.sectors-scroller-section {
    padding: 60px 0;
}

.sectors-scroller-wrapper {
    padding: 12px 0;
}

.sector-slide {
    flex-basis: min(260px, 80vw);
    height: 310px;
}

.sectors-scroller-track {
    gap: 15px;
    padding: 0 30px;
}

.sector-overlay {
    padding: 45px 17px 18px;
}

.sector-overlay h3 {
    font-size: 18px;
}

.scroller-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
}

.scroller-btn.prev {
    left: 2px;
}

.scroller-btn.next {
    right: 2px;
}

/* WhatsApp and course buttons */

.search-with-whatsapp {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.whatsapp-cta,
.all-courses-cta {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
}

/* Inner page headings */

.page-header {
    padding: 65px 0;
}

.page-header h1 {
    padding-inline: 0;
    font-size: clamp(29px, 8vw, 39px);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.page-header p {
    padding-inline: 0;
    font-size: 15px;
    line-height: 1.75;
}

/* Course catalog */

.catalog-section,
.partners-section {
    padding: 60px 0;
}

.sector-block {
    padding: 21px;
}

.sector-title {
    align-items: flex-start;
    gap: 9px;
    font-size: 19px;
}

.course-list {
    grid-template-columns: minmax(0, 1fr);
}

.course-item {
    flex-direction: column;
    gap: 5px;
    padding: 14px;
}

.course-duration {
    font-size: 13px;
}

/* Partner logos */

.partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.partner-logo {
    height: 82px;
    padding: 12px;
}

/* Final call to action */

.final-cta {
    padding: 60px 0;
}

.final-cta-inner {
    gap: 23px;
}

.final-cta h2 {
    font-size: clamp(27px, 7vw, 36px);
}

/* Legacy footer */

.footer {
    padding: 50px 0 22px;
}

.footer-grid {
    gap: 28px;
}

.footer-logo-box img {
    height: 54px;
}

.copyright {
    margin-top: 30px;
    line-height: 1.7;
}

.course-search {
    min-height: 56px;
    padding: 0 16px;
    gap: 13px;
    border-radius: 15px;
}

.course-search input {
    font-size: 16px;
}


}

/* =========================================================
27. EXTRA SMALL SCREENS — 380px
========================================================= */

@media (max-width: 380px) {
.container {
width: calc(100% - 30px);
}

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

.hero-text {
    font-size: 15px;
}

.trust-row {
    grid-template-columns: minmax(0, 1fr);
}

.hero-photo {
    min-height: 275px;
}

.info-card,
.program,
.timeline-step,
.feature-panel,
.contact-info,
.form-wrapper {
    padding: 19px;
}

.sector-slide {
    flex-basis: 76vw;
}

.whatsapp-cta,
.all-courses-cta {
    padding-inline: 10px;
    font-size: 13px;
}

.page-header h1 {
    font-size: 28px;
}

.section-title h2 {
    font-size: 27px;
}


}

/* =========================================================
28. ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}

.js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


}
/* HERO ENTRANCE ANIMATION */
.js .hero-content.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 1s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.4, 0, .2, 1);
}

.js .hero-content.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* HERO IMMEDIATE ENTRANCE ANIMATION */
    .hero-inner-load {
      opacity: 0;
      transform: translateY(25px);
      animation: heroLoadIn 0.8s cubic-bezier(.4, 0, .2, 1) 0.15s forwards;
    }

    @keyframes heroLoadIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }