/*==========================
GLOBAL
===========================*/
:root {
/* =========================
ODLC GLOBAL COLORS
========================= */
--navy: #083C7C;
--navy2: #083C7C;
--blue: #083C7C;
--cyan: #00a8ff;
--purple: #6335e8;
--yellow: #ffc400;
--white: #ffffff;
--muted: #899abd;
--border: rgba(0, 168, 255, .30);
--section-max-width: 1500px;
/* Main Typography */
--font-main: "Inter", "Segoe UI", Arial, sans-serif;
/* Main Colors */
--text-dark: #0b1f4d;
--text-primary: #17203d;
--text-body: #667085;
--text-light: #ffffff;
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
}
/* =========================================================
2. GLOBAL BODY
========================================================= */
html,
body {
font-family: var(--font-main);
color: var(--text-primary);
font-size: 16px;
line-height: 1.6;
}
/* =========================================================
3. GLOBAL PARAGRAPHS
========================================================= */
p {
font-size: 16px;
line-height: 1.7;
font-weight: 400;
}
/* =========================================================
4. MAIN SECTION HEADINGS
========================================================= */
.section-title,
.programmes-title {
font-size: 52px;
line-height: 1.12;
font-weight: 800;
letter-spacing: -1.2px;
}
/* =========================================================
5. OTHER MAIN SECTION HEADINGS
========================================================= */
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -1px;
}
/* =========================================================
6. SPECIAL LARGE HERO HEADINGS
========================================================= */
.hero-section h1,
.hero-section h2 {
font-size: 54px;
line-height: 1.1;
font-weight: 800;
}
/* =========================================================
7. SECTION DESCRIPTION
========================================================= */
.section-desc,
.programmes-description,
.testimonial-section > p,
.blog-section > p,
.section-description {
font-size: 18px;
line-height: 1.7;
font-weight: 400;
color: var(--text-body);
}
/* =========================================================
8. SECTION BADGES
========================================================= */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge,
.hero-badge {
font-size: 14px;
line-height: 1.2;
font-weight: 700;
letter-spacing: .5px;
}
/* =========================================================
9. CARD HEADINGS
========================================================= */
.feature-card h4,
.blog-card h4,
.review-card h5,
.info-content h5,
.info-card h3,
.impact-title {
font-weight: 700;
}
/* =========================================================
10. FEATURE CARD HEADING
========================================================= */
.feature-card h4 {
font-size: 19px;
line-height: 1.3;
}
/* =========================================================
11. FEATURE CARD DESCRIPTION
========================================================= */
.feature-card p {
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
12. IMPACT CARD
========================================================= */
.impact-subtitle {
font-size: 13px;
font-weight: 700;
letter-spacing: .7px;
}
.impact-title {
font-size: 30px;
line-height: 1.25;
}
.impact-item h3 {
font-size: 28px;
line-height: 1.1;
font-weight: 800;
}
.impact-item p {
font-size: 14px;
line-height: 1.4;
}
/* =========================================================
13. INFORMATION STRIP
========================================================= */
.info-content h5 {
font-size: 18px;
line-height: 1.3;
font-weight: 700;
}
.info-content p {
font-size: 13px;
line-height: 1.5;
}
/* =========================================================
14. PROGRAMME CARDS
========================================================= */
.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
}
.program-card p,
.programme-card p {
font-size: 13px;
line-height: 1.55;
}
/* =========================================================
15. PROGRAMME COUNTER
========================================================= */
.program-count-card h3 {
font-size: 26px;
line-height: 1.2;
font-weight: 800;
}
.program-count-card p {
font-size: 14px;
line-height: 1.5;
}
/* =========================================================
16. APPLICATION / GATEWAY SECTION
========================================================= */
.application-section h2,
.gateway-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.application-section h4,
.gateway-section h4 {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
}
.application-section p,
.gateway-section p {
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
17. COMPARISON / WHY ODLC
========================================================= */
.comparison-section h2,
.why-odlc-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.comparison-card h3,
.stat-card h3 {
font-size: 30px;
line-height: 1.1;
font-weight: 800;
}
.comparison-card p,
.stat-card p {
font-size: 13px;
line-height: 1.4;
font-weight: 500;
}
/* =========================================================
18. CERTIFICATION CTA
========================================================= */
.certification-section h2,
.skills-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.certification-section p,
.skills-section p {
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
19. BOTTOM FEATURE STRIPS
========================================================= */
.feature-strip h4,
.bottom-feature h4 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
.feature-strip p,
.bottom-feature p {
font-size: 13px;
line-height: 1.45;
}
/* =========================================================
20. TESTIMONIALS
========================================================= */
.review-card h5 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
.review-card small {
font-size: 12px;
}
.review-card p {
font-size: 14px;
line-height: 1.65;
}
.review-card a {
font-size: 13px;
font-weight: 600;
}
/* =========================================================
21. BLOG
========================================================= */
.blog-card h4 {
font-size: 18px;
line-height: 1.4;
font-weight: 700;
}
.blog-card p {
font-size: 14px;
line-height: 1.6;
}
.blog-category {
font-size: 12px;
font-weight: 600;
}
.blog-footer a {
font-size: 13px;
font-weight: 600;
}
.date-box h4 {
font-size: 18px;
line-height: 1;
}
.date-box span {
font-size: 11px;
}
/* =========================================================
22. FAQ
========================================================= */
.faq-section h2 {
font-size: 46px;
line-height: 1.15;
font-weight: 800;
}
.faq-question,
.accordion-button {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
.faq-answer,
.accordion-body {
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
23. BUTTONS
========================================================= */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 14px;
line-height: 1.2;
font-weight: 600;
}
/* =========================================================
24. HEADER / NAVIGATION
========================================================= */
.navbar-nav .nav-link {
font-size: 14px;
font-weight: 600;
}
.navbar-brand {
font-size: 18px;
font-weight: 700;
}
/* =========================================================
25. FOOTER
========================================================= */
footer h4,
footer h5 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
footer p,
footer li,
footer a {
font-size: 13px;
line-height: 1.6;
}
footer .footer-title {
font-size: 17px;
font-weight: 700;
}
/* =========================================================
26. LAPTOP
992px - 1199px
========================================================= */
@media (max-width: 1199px) {
.section-title,
.programmes-title {
font-size: 46px;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 42px;
}
.hero-section h1,
.hero-section h2 {
font-size: 48px;
}
.section-desc,
.programmes-description {
font-size: 17px;
}
.feature-card h4 {
font-size: 18px;
}
.feature-card p {
font-size: 13px;
}
.blog-card h4 {
font-size: 17px;
}
}
/* =========================================================
27. TABLET
768px - 991px
========================================================= */
@media (max-width: 991px) {
body {
font-size: 15px;
}
p {
font-size: 15px;
line-height: 1.65;
}
/* Main headings */
.section-title,
.programmes-title {
font-size: 40px;
line-height: 1.15;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 38px;
}
.hero-section h1,
.hero-section h2 {
font-size: 42px;
}
/* Description */
.section-desc,
.programmes-description {
font-size: 16px;
line-height: 1.7;
}
/* Badge */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge {
font-size: 13px;
}
/* Cards */
.feature-card h4 {
font-size: 17px;
}
.feature-card p {
font-size: 13px;
}
.impact-title {
font-size: 26px;
}
.impact-item h3 {
font-size: 25px;
}
.impact-item p {
font-size: 13px;
}
.blog-card h4 {
font-size: 17px;
}
.blog-card p {
font-size: 13px;
}
.review-card p {
font-size: 13px;
}
/* FAQ */
.faq-question,
.accordion-button {
font-size: 15px;
}
.faq-answer,
.accordion-body {
font-size: 13px;
}
/* Buttons */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 13px;
}
}
/* =========================================================
28. MOBILE
576px - 767px
========================================================= */
@media (max-width: 767px) {
body {
font-size: 15px;
}
p {
font-size: 14px;
line-height: 1.65;
}
/* Main section headings */
.section-title,
.programmes-title {
font-size: 32px;
line-height: 1.18;
letter-spacing: -.5px;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 32px;
line-height: 1.2;
}
.hero-section h1,
.hero-section h2 {
font-size: 34px;
line-height: 1.15;
}
/* Description */
.section-desc,
.programmes-description {
font-size: 15px;
line-height: 1.65;
}
/* Badges */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge {
font-size: 12px;
}
/* Feature cards */
.feature-card h4 {
font-size: 16px;
}
.feature-card p {
font-size: 12px;
line-height: 1.5;
}
/* Impact */
.impact-title {
font-size: 24px;
}
.impact-item h3 {
font-size: 23px;
}
.impact-item p {
font-size: 12px;
}
/* Programme cards */
.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {
font-size: 16px;
}
.program-card p,
.programme-card p {
font-size: 12px;
}
/* Testimonials */
.review-card h5 {
font-size: 15px;
}
.review-card small {
font-size: 11px;
}
.review-card p {
font-size: 13px;
line-height: 1.6;
}
/* Blogs */
.blog-card h4 {
font-size: 16px;
}
.blog-card p {
font-size: 13px;
}
/* FAQ */
.faq-question,
.accordion-button {
font-size: 14px;
}
.faq-answer,
.accordion-body {
font-size: 13px;
}
/* Buttons */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 13px;
}
/* Footer */
footer h4,
footer h5 {
font-size: 15px;
}
footer p,
footer li,
footer a {
font-size: 12px;
}
}
/* =========================================================
29. SMALL MOBILE
BELOW 576px
========================================================= */
@media (max-width: 575px) {
body {
font-size: 14px;
}
p {
font-size: 14px;
line-height: 1.65;
}
/* Main headings */
.section-title,
.programmes-title {
font-size: 29px;
line-height: 1.2;
}
.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {
font-size: 29px;
line-height: 1.2;
}
.hero-section h1,
.hero-section h2 {
font-size: 30px;
}
/* Description */
.section-desc,
.programmes-description {
font-size: 14px;
line-height: 1.65;
}
/* Badge */
.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge {
font-size: 11px;
}
/* Cards */
.feature-card h4 {
font-size: 15px;
}
.feature-card p {
font-size: 12px;
}
.impact-title {
font-size: 22px;
}
.impact-item h3 {
font-size: 21px;
}
.impact-item p {
font-size: 11px;
}
.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {
font-size: 15px;
}
.program-card p,
.programme-card p {
font-size: 12px;
}
/* Blog */
.blog-card h4 {
font-size: 15px;
}
.blog-card p {
font-size: 12px;
}
/* Testimonials */
.review-card h5 {
font-size: 14px;
}
.review-card p {
font-size: 12px;
}
/* FAQ */
.faq-question,
.accordion-button {
font-size: 13px;
}
.faq-answer,
.accordion-body {
font-size: 12px;
}
/* Buttons */
button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {
font-size: 12px;
}
/* Footer */
footer h4,
footer h5 {
font-size: 14px;
}
footer p,
footer li,
footer a {
font-size: 11px;
}
}
.section-container {
width: 100%;
max-width: 1320px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
/* =========================
DESKTOP
========================= */
.section-container {
width: 100%;
max-width: var(--section-max-width);
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* =========================
LAPTOP
========================= */
@media (max-width: 1399px) {
.section-container {
max-width: 1300px;
padding-left: 20px;
padding-right: 20px;
}
}
/* =========================
TABLET
========================= */
@media (max-width: 991px) {
.section-container {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.section-container {
padding-left: 10px;
padding-right: 10px;
}
}
/* =========================================================
MODERN PARAMEDICAL BANNER
========================================================= */
.modern-paramedical-banner {
position: relative;
width: 100%;
min-height: 430px;
display: grid;
grid-template-columns: 52% 48%;
overflow: hidden;
background: #06244d;
border-radius: 0;
font-family: Arial, Helvetica, sans-serif;
isolation: isolate;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mpb-content {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: center;
padding: 52px 55px 48px;
/* background:
radial-gradient(
circle at 90% 10%,
rgba(19, 125, 225, 0.20),
transparent 28%
), */
linear-gradient(
135deg,
#061b39 0%,
#062b5c 100%
);
}
/* =========================================================
GRID BACKGROUND
========================================================= */
.mpb-grid {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 220px;
z-index: 1;
opacity: 0.35;
background-image:
radial-gradient(
rgba(21, 148, 255, 0.7) 1px,
transparent 1px
);
background-size: 14px 14px;
mask-image:
linear-gradient(
to bottom right,
black,
transparent
);
pointer-events: none;
}
/* =========================================================
BLUE GLOW
========================================================= */
.mpb-glow {
position: absolute;
left: 42%;
top: -180px;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(10, 126, 230, 0.12);
filter: blur(60px);
z-index: 1;
pointer-events: none;
}
/* =========================================================
BADGE
========================================================= */
.mpb-badge {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 17px 9px 9px;
margin-bottom: 23px;
border-radius: 10px;
background: rgba(8, 78, 157, 0.95);
border: 1px solid rgba(76, 171, 255, 0.25);
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.15px;
}
.mpb-badge-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: rgba(255,255,255,0.12);
color: #ffffff;
font-size: 14px;
}
/* =========================================================
TITLE
========================================================= */
.mpb-title {
max-width: 620px;
margin: 0;
color: #ffffff;
font-size: 46px;
line-height: 1.12;
font-weight: 700;
letter-spacing: -1px;
}
.mpb-title span {
display: block;
color: #1594ff;
}
/* =========================================================
ACCENT LINE
========================================================= */
.mpb-accent {
display: flex;
align-items: center;
gap: 5px;
margin: 18px 0 16px;
}
.mpb-accent span {
width: 45px;
height: 3px;
border-radius: 10px;
background: #1594ff;
}
.mpb-accent i {
display: block;
width: 4px;
height: 3px;
border-radius: 10px;
background: #1594ff;
}
/* =========================================================
DURATION
========================================================= */
.mpb-duration {
width: fit-content;
display: flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 8px;
margin-bottom: 13px;
border-radius: 24px;
border: 1px solid rgba(21,148,255,0.55);
background: rgba(2, 31, 65, 0.5);
color: #ffffff;
font-size: 14px;
}
.mpb-duration-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0758aa;
color: #ffffff;
}
.mpb-duration strong {
color: #1594ff;
font-weight: 700;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mpb-description {
max-width: 590px;
margin: 0 0 24px;
color: rgba(255,255,255,0.86);
font-size: 15px;
line-height: 1.65;
font-weight: 400;
}
/* =========================================================
FEATURES
========================================================= */
.mpb-features {
width: fit-content;
display: flex;
align-items: center;
padding: 10px 13px;
border-radius: 12px;
background: rgba(1, 23, 49, 0.62);
border: 1px solid rgba(63,158,242,0.20);
backdrop-filter: blur(5px);
}
/* =========================================================
FEATURE ITEM
========================================================= */
.mpb-feature {
display: flex;
align-items: center;
gap: 10px;
min-width: 145px;
}
.mpb-feature-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0758aa;
border: 1px solid rgba(57,165,255,0.35);
color: #ffffff;
font-size: 16px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.mpb-feature:hover .mpb-feature-icon {
transform: translateY(-3px);
background: #087de1;
}
.mpb-feature-text strong,
.mpb-feature-text span {
display: block;
line-height: 1.3;
}
.mpb-feature-text strong {
color: #ffffff;
font-size: 12px;
font-weight: 700;
}
.mpb-feature-text span {
color: rgba(255,255,255,0.80);
font-size: 12px;
}
/* Divider */
.mpb-feature-line {
width: 1px;
height: 38px;
margin: 0 14px;
background: rgba(68,159,235,0.35);
}
/* =========================================================
RIGHT VISUAL
========================================================= */
.mpb-visual {
position: relative;
min-height: 430px;
overflow: hidden;
background: #0a3569;
z-index: 3;
}
/* =========================================================
IMAGE
========================================================= */
.mpb-image-wrap {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 110px;
}
.mpb-image-wrap img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.8s ease;
}
/* Gentle zoom */
.modern-paramedical-banner:hover
.mpb-image-wrap img {
transform: scale(1.035);
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
.mpb-image-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(4,35,73,0.48) 0%,
rgba(4,35,73,0.10) 30%,
rgba(4,35,73,0) 65%
);
}
/* =========================================================
FLOATING INFO CARDS
========================================================= */
.mpb-info-card {
position: absolute;
right: 22px;
z-index: 10;
width: 158px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 13px;
background: rgba(5, 38, 77, 0.72);
border: 1px solid rgba(61,168,255,0.30);
box-shadow:
0 12px 30px rgba(0,0,0,0.20);
backdrop-filter: blur(10px);
color: #ffffff;
animation: mpbFloat 4s ease-in-out infinite;
}
.mpb-card-one {
top: 58px;
animation-delay: 0s;
}
.mpb-card-two {
top: 170px;
animation-delay: 0.7s;
}
.mpb-card-three {
top: 282px;
animation-delay: 1.4s;
}
/* =========================================================
INFO ICON
========================================================= */
.mpb-info-icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #087de1;
color: #ffffff;
font-size: 15px;
box-shadow:
0 0 18px rgba(8,125,225,0.25);
}
/* =========================================================
INFO TEXT
========================================================= */
.mpb-info-card strong,
.mpb-info-card span {
display: block;
}
.mpb-info-card strong {
margin-bottom: 3px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
}
.mpb-info-card span {
color: rgba(255,255,255,0.78);
font-size: 11px;
line-height: 1.3;
}
/* =========================================================
FLOAT ANIMATION
========================================================= */
@keyframes mpbFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
/* =========================================================
VISUAL MARKER
========================================================= */
.mpb-visual-marker {
position: absolute;
right: 25px;
bottom: 22px;
z-index: 8;
display: flex;
gap: 5px;
}
.mpb-visual-marker span {
width: 4px;
height: 4px;
border-radius: 50%;
background: #1594ff;
opacity: 0.7;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.modern-paramedical-banner {
grid-template-columns: 1fr;
}
.mpb-content {
padding: 45px 40px;
}
.mpb-visual {
min-height: 380px;
}
.mpb-image-wrap {
border-radius: 0;
}
.mpb-visual::before,
.mpb-visual::after {
display: none;
}
.mpb-title {
font-size: 40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.modern-paramedical-banner {
border-radius: 0;
}
.mpb-content {
padding: 35px 25px;
}
.mpb-badge {
font-size: 12px;
}
.mpb-title {
font-size: 33px;
letter-spacing: -0.5px;
}
.mpb-description {
font-size: 14px;
line-height: 1.6;
}
.mpb-features {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 11px;
}
.mpb-feature {
min-width: 0;
}
.mpb-feature-line {
width: 100%;
height: 1px;
margin: 0;
}
.mpb-visual {
min-height: 310px;
}
.mpb-info-card {
right: 12px;
width: 145px;
}
.mpb-card-one {
top: 25px;
}
.mpb-card-two {
top: 120px;
}
.mpb-card-three {
top: 215px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mpb-content {
padding: 30px 20px;
}
.mpb-title {
font-size: 29px;
}
.mpb-duration {
font-size: 13px;
}
.mpb-visual {
min-height: 260px;
}
.mpb-info-card {
display: none;
}
}
/* =========================================================
ELIGIBILITY CRITERIA
========================================================= */
.eligibility-section {
width: 100%;
padding: 70px 0;
background: #f5f8fc;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
HEADING
========================================================= */
.eligibility-heading {
text-align: center;
margin-bottom: 30px;
}
.eligibility-label {
display: block;
margin-bottom: 4px;
color: #1675e8;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.8px;
}
/* Small dots */
.eligibility-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
margin-bottom: 3px;
}
.eligibility-dots span {
width: 3px;
height: 3px;
border-radius: 50%;
background: #1675e8;
}
.eligibility-heading h2 {
margin: 0;
color: #092f68;
font-size: 30px;
line-height: 1.2;
font-weight: 700;
}
/* Heading underline */
.eligibility-heading-line {
width: 65px;
height: 3px;
margin: 10px auto 0;
border-radius: 10px;
background: #1675e8;
position: relative;
}
.eligibility-heading-line::after {
content: "";
position: absolute;
right: -12px;
top: 0;
width: 6px;
height: 3px;
border-radius: 10px;
background: #1675e8;
}
/* =========================================================
GRID
========================================================= */
.eligibility-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
max-width: 1240px;
margin: 0 auto;
}
/* =========================================================
CARD
========================================================= */
.eligibility-card {
position: relative;
min-height: 170px;
padding: 18px 21px 20px;
overflow: hidden;
background: #ffffff;
border: 1px solid #e0e9f5;
border-radius: 14px;
box-shadow:
0 8px 24px rgba(20, 65, 115, 0.07);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
/* Hover */
.eligibility-card:hover {
transform: translateY(-6px);
border-color: #bcd8fa;
box-shadow:
0 16px 35px rgba(20, 65, 115, 0.13);
}
/* =========================================================
NUMBER
========================================================= */
.eligibility-number {
position: absolute;
top: 14px;
right: 17px;
color: #d9e7fa;
font-size: 32px;
line-height: 1;
font-weight: 700;
z-index: 1;
transition:
color 0.35s ease;
}
.eligibility-card:hover
.eligibility-number {
color: #c5dcfa;
}
/* =========================================================
ICON OUTER CIRCLE
========================================================= */
.eligibility-icon-wrap {
position: relative;
width: 64px;
height: 64px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf4ff;
}
/* Animated circular border */
.eligibility-icon-wrap::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border:
2px solid transparent;
border-top-color: #2f8cff;
border-right-color: #8fc1ff;
transform: rotate(-25deg);
transition:
transform 0.5s ease;
}
.eligibility-card:hover
.eligibility-icon-wrap::before {
transform: rotate(155deg);
}
/* =========================================================
ICON
========================================================= */
.eligibility-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
145deg,
#084ca0,
#073478
);
color: #ffffff;
font-size: 21px;
box-shadow:
0 6px 14px rgba(5, 60, 130, 0.20);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.eligibility-card:hover
.eligibility-icon {
transform: scale(1.08) rotate(3deg);
box-shadow:
0 8px 20px rgba(5, 60, 130, 0.30);
}
/* =========================================================
CONTENT
========================================================= */
.eligibility-content {
position: relative;
z-index: 2;
padding-right: 5px;
}
.eligibility-content h3 {
margin: 0 0 7px;
color: #092f68;
font-size: 15px;
line-height: 1.35;
font-weight: 700;
}
.eligibility-content p {
margin: 0;
color: #435875;
font-size: 13px;
line-height: 1.55;
}
/* =========================================================
CARD BOTTOM LINE
========================================================= */
.eligibility-card-line {
width: 29px;
height: 3px;
margin-top: 12px;
border-radius: 10px;
background: #1675e8;
transition:
width 0.35s ease;
}
.eligibility-card:hover
.eligibility-card-line {
width: 50px;
}
/* =========================================================
DECORATIVE CARD GLOW
========================================================= */
.eligibility-card::after {
content: "";
position: absolute;
width: 90px;
height: 90px;
right: -45px;
bottom: -45px;
border-radius: 50%;
background: rgba(22,117,232,0.04);
transition:
transform 0.4s ease;
}
.eligibility-card:hover::after {
transform: scale(1.8);
}
/* =========================================================
RESPONSIVE — TABLET
========================================================= */
@media (max-width: 991px) {
.eligibility-section {
padding: 55px 0 60px;
}
.eligibility-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
/* =========================================================
RESPONSIVE — MOBILE
========================================================= */
@media (max-width: 575px) {
.eligibility-section {
padding: 45px 0 50px;
}
.eligibility-heading {
margin-bottom: 25px;
}
.eligibility-heading h2 {
font-size: 26px;
}
.eligibility-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.eligibility-card {
min-height: 160px;
padding: 18px;
}
}
/* =========================================================
COURSE MODULES SECTION
========================================================= */
.course-modules-section {
width: 100%;
padding: 70px 0;
background: #f4f8fd;
font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
SECTION HEADING
========================================================= */
.course-modules-heading {
text-align: center;
margin-bottom: 35px;
}
.course-modules-heading span {
display: block;
margin-bottom: 8px;
color: #0b72e7;
font-size: 14px;
font-weight: 700;
letter-spacing: .3px;
}
.course-modules-heading h2 {
margin: 0;
color: #0a2d63;
font-size: 30px;
font-weight: 700;
}
.course-heading-line {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
margin-top: 12px;
}
.course-heading-line i {
width: 5px;
height: 5px;
border-radius: 50%;
background: #0b72e7;
}
.course-heading-line b {
width: 58px;
height: 4px;
border-radius: 10px;
background: #0b72e7;
}
/* =========================================================
MAIN WRAPPER
========================================================= */
.course-modules-wrapper {
display: grid;
grid-template-columns: 38% 62%;
width: 100%;
min-height: 600px;
overflow: hidden;
border-radius: 22px;
background: #ffffff;
box-shadow:
0 15px 45px rgba(8, 60, 124, 0.10);
}
/* =========================================================
LEFT PROGRAMMES
========================================================= */
.course-programmes {
padding: 25px 22px 25px 25px;
background:
linear-gradient(
145deg,
#061c46 0%,
#083c7c 55%,
#06234f 100%
);
}
.course-programmes-header {
padding: 5px 18px 20px;
color: #ffffff;
font-size: 23px;
font-weight: 700;
}
/* =========================================================
PROGRAMME BUTTON
========================================================= */
.course-programme {
position: relative;
width: 100%;
min-height: 82px;
display: flex;
align-items: center;
margin-bottom: 12px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 15px;
background: rgba(255, 255, 255, 0.035);
color: #ffffff;
text-align: left;
cursor: pointer;
pointer-events: auto;
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.course-programme:hover {
transform: translateX(4px);
border-color: rgba(37, 145, 255, .7);
background: rgba(21, 107, 216, .18);
}
.course-programme.active {
background:
linear-gradient(
100deg,
#0754d9,
#0a7cf2
);
border-color: #168cff;
box-shadow:
0 8px 25px rgba(0, 102, 255, .25);
}
/* =========================================================
PROGRAMME ICON
========================================================= */
.programme-icon {
width: 58px;
height: 58px;
flex: 0 0 58px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
border-radius: 12px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(35, 151, 255, .8);
color: #4eb4ff;
font-size: 25px;
transition: .3s ease;
}
.course-programme.active .programme-icon {
background: #071e4a;
color: #ffffff;
}
.programme-icon svg {
width: 34px;
height: 34px;
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.course-main-icon svg {
width: 42px;
height: 42px;
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
PROGRAMME TEXT
========================================================= */
.programme-name {
flex: 1;
min-width: 0;
}
.programme-name small {
display: block;
margin-bottom: 3px;
color: rgba(255,255,255,.72);
font-size: 12px;
font-weight: 400;
}
.programme-name strong {
display: block;
color: #ffffff;
font-size: 16px;
line-height: 1.35;
font-weight: 700;
}
/* =========================================================
NUMBER
========================================================= */
.programme-number {
margin-left: 10px;
color: #8faed9;
font-size: 20px;
font-weight: 700;
}
.course-programme.active .programme-number {
color: #5ed0ff;
}
/* =========================================================
ARROW
========================================================= */
.programme-arrow {
margin-left: 12px;
color: #9ab5db;
font-size: 19px;
transition: transform .3s ease;
}
.course-programme:hover .programme-arrow {
transform: translateX(4px);
}
.course-programme.active .programme-arrow {
color: #ffffff;
}
/* =========================================================
RIGHT DETAILS
========================================================= */
.course-details {
position: relative;
background: #ffffff;
overflow: hidden;
}
/* subtle decorative background */
.course-details::after {
content: "";
position: absolute;
right: -100px;
top: -80px;
width: 360px;
height: 360px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(55, 157, 255, .14),
rgba(55, 157, 255, 0) 70%
);
pointer-events: none;
}
/* =========================================================
TOP COURSE TITLE
========================================================= */
.course-details-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 25px;
padding: 42px 45px 35px;
border-bottom: 1px solid #e5edf7;
}
.course-main-icon {
width: 78px;
height: 78px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(145deg, #0b72e7, #0750bd);
color: #ffffff;
font-size: 32px;
}
.selected-label {
display: block;
margin-bottom: 6px;
color: #0b72e7;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.course-details-top h3 {
margin: 0;
color: #082f69;
font-size: 27px;
line-height: 1.25;
font-weight: 700;
}
/* =========================================================
MODULE CONTENT
========================================================= */
.course-module-content {
position: relative;
z-index: 2;
padding: 30px 45px 40px;
}
.course-module-content h4 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
color: #0a2f68;
font-size: 20px;
font-weight: 700;
}
.course-module-content h4 span {
width: 4px;
height: 25px;
display: block;
border-radius: 10px;
background: #0b72e7;
}
/* =========================================================
PANELS
========================================================= */
.course-panel {
display: none;
}
.course-panel.active {
display: block;
animation:
courseFade .35s ease;
}
@keyframes courseFade {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
MODULE ITEM
========================================================= */
.module-item {
display: flex;
align-items: center;
gap: 14px;
min-height: 58px;
padding: 10px 4px;
border-bottom: 1px solid #e5edf6;
color: #17345a;
font-size: 16px;
font-weight: 600;
transition:
padding-left .25s ease,
color .25s ease;
}
.module-item:hover {
padding-left: 8px;
color: #0758b9;
}
.module-check {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #1681ed;
color: #ffffff;
font-size: 13px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.course-modules-section {
padding: 60px 0;
}
.course-modules-wrapper {
grid-template-columns: 1fr;
}
.course-programmes {
padding: 20px;
}
.course-programmes-header {
padding-left: 5px;
}
.course-details-top {
padding: 35px 30px;
}
.course-module-content {
padding: 25px 30px 35px;
}
}
@media (max-width: 575px) {
.course-modules-heading h2 {
font-size: 26px;
}
.course-programme {
min-height: 76px;
}
.programme-icon {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 21px;
}
.programme-name strong {
font-size: 14px;
}
.programme-number {
display: none;
}
.course-details-top {
align-items: flex-start;
gap: 15px;
padding: 28px 20px;
}
.course-main-icon {
width: 60px;
height: 60px;
flex-basis: 60px;
font-size: 25px;
}
.course-details-top h3 {
font-size: 21px;
}
.course-module-content {
padding: 25px 20px 30px;
}
.module-item {
font-size: 15px;
}
}
.course-main-icon {
width: 68px !important;
height: 68px !important;
min-width: 68px !important;
min-height: 68px !important;
flex: 0 0 68px !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
}
/* ============================================================================
PARAMEDICAL - CERTIFICATE PROGRAMMES: THE SECTIONS AND THE CARDS
----------------------------------------------------------------------------
Same standard as the Skill & Vocational pages: section widths on the header
and footer ladder, padding the same above and below on every section, and
the eligibility cards' type brought onto the site's scale.
NOTHING IN THE MARKUP WAS TOUCHED. Same words, same order, same elements.
---------------------------------------------------------------------------
THE BANNER AND ITS PHOTOGRAPH ARE NOT TOUCHED AT ALL
This page's banner is its own design - .modern-paramedical-banner, with the
.mpb-* grid, glow, title and duration classes and a different picture,
images/para2.png, not gov31.png. None of it is restyled, and the photograph
is not given the ellipse, the navy overlay, the gutter or anything else that
was done to the other banners. Its image stays as it is:
the photograph and its wrapper are not named anywhere in this block.
---------------------------------------------------------------------------
1. THE TWO SECTIONS ON THE HEADER AND FOOTER WIDTHS
Measured at a 1000px viewport before this block:
header and footer content 50.5 .... 1211.5 1161.0 wide
.eligibility-section > .container 61.0 dL 10.5 dR 10.5
.course-modules-section > .container 61.0 dL 10.5 dR 10.5
Both were sitting 10.5px inside the header on each side - closer than most
pages, but not on it - and each carries 12px of its own left and right
padding, which is a further 12px of inset on everything inside it. The
padding is taken to zero for the same reason it was on the Skill &
Vocational pages: once the container is on the header edge, container
padding only pushes the contents back off it.
width 92%, max-width 1380px, margin-left and margin-right auto
94% 1199px and below
90% 767px and below
92% 480px and below
padding-left 0, padding-right 0
The vertical padding on both sections is left exactly as it was.
---------------------------------------------------------------------------
2. PADDING THE SAME ABOVE AND BELOW
Two sections were out, and both had more room underneath than above:
.eligibility-section 70px / 0px at 991px and below 55/60
.course-modules-section 70px / 70px already equal
Measured at a 1000px viewport before this block:
.eligibility-section 70px top, 0px bottom *** OUT by 70px ***
.course-modules-section 70px / 70px equal already
The bottom is brought up to the top, 70px, so nothing grows and nothing is
cut. Only the bottom value is written - the top is already right.
.course-modules-section is measured and reported but not written, because it
already carries the same value on both sides and restating it would change
nothing.
---------------------------------------------------------------------------
3. THE FOUR ELIGIBILITY CARDS
THE HEADING IS SET TO 20px, AS ASKED
It was 15px on a 20.25px line - the same size as the body copy underneath it,
so the two were the same weight of type and only the bold told them apart.
It is now 20px on a 1.35 line, weight 700.
The line-height is not made larger to match: 15 x 1.35 was 20.25px and
20 x 1.35 is 27px, which is the same proportion the heading already had.
THE BODY COPY IS SET TO 16px
It was 13px on a 1.55 line - the smallest type on the page. 16px is the size
the rest of the site's body copy is held at, and it is pinned: no smaller
step at 767px or below.
LEFT EDGES
The cards on this page are a different construction from the Skill &
Vocational ones - there is an .eligibility-icon-wrap between the card and the
icon, and a rule under the card - but the reading of the measurement is the
same, and the icon, the heading and the copy already share the card's own
left edge here: 103.0, 95.0, 95.0 on the first card. Nothing is named for
that here, and nothing is changed by it.
The heading's own margin is left alone - 0 above and 7px below, from the
page's own rule - and so is the rule's 12px margin above it.
============================================================================ */
.eligibility-section > .container,
.course-modules-section > .container {
width: 92% !important;
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.eligibility-section {
padding-bottom: 70px !important;
}
.eligibility-section .eligibility-content h3 {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.eligibility-section .eligibility-content p {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
@media screen and (max-width: 1199px) {
.eligibility-section > .container,
.course-modules-section > .container {
width: 94% !important;
}
}
@media screen and (max-width: 991px) {
.eligibility-section {
padding-bottom: 55px !important;
}
}
@media screen and (max-width: 767px) {
.eligibility-section > .container,
.course-modules-section > .container {
width: 90% !important;
}
}
@media screen and (max-width: 575px) {
.eligibility-section {
padding-bottom: 45px !important;
}
}
@media screen and (max-width: 480px) {
.eligibility-section > .container,
.course-modules-section > .container {
width: 92% !important;
}
}
/* ============================================================================
PARAMEDICAL - CERTIFICATE PROGRAMMES: THE INSIDE OF THE BANNER, THE INSIDE
OF THE SECTIONS, AND THE PADDING
----------------------------------------------------------------------------
Four things, in that order. Source of the type: the Grade 10 banner, and the
site ladder the header and the footer run on.
---------------------------------------------------------------------------
1. THE BANNER'S TEXT - THE SAME SCALE AS THE OTHER BANNERS
MEASURED AT A 1000px VIEWPORT BEFORE THIS BLOCK
header L 29.6 R 955.3 logo left 29.6
.mpb-content L 0.0 width 656.2 padding 55px left and right
.mpb-badge L 55.0
DELTA badge-left to the logo: 4.5px
THE TYPE
.mpb-badge 14px/22.4px w700 ls 0.15px 9px 17px padding,
radius 10px, 1px rgba(76,171,255,.25) border,
fill rgba(8,78,157,.95)
.mpb-badge-icon 14px/22.4px, in a 30px circle
.mpb-title 46px/51.52px w700 ls -1px mixed case
its span 46px, in rgb(21,148,255)
.mpb-accent 16px/25.6px
.mpb-duration 18px/18px w700
the paragraph 16px
ALL OF IT NOW ON THE GRADE 10 SCALE
.mpb-badge 16px/1.3 w700 ls 0.3px 11px 20px padding, gap 10,
radius 30px, margin-bottom 25px,
fill rgba(255,255,255,.1), border 1px rgba(255,255,255,.35)
.mpb-badge-icon 16px/1.3
.mpb-title Roboto, Arial 40px/1.08 w800 ls -1px UPPERCASE
its span 40px, in #A9C7FF
the paragraph Arial 17px/1.75 ls 0.2px rgba(255,255,255,.9)
.mpb-duration the pill's type - 15px, w700, ls 0.3px
The title is the largest single change: 46px becomes 40px, and it is
uppercased, so "Certificate Programmes — Paramedical" reads as one line of
caps rather than two of mixed case. Its span, "Paramedical", was
rgb(21,148,255) - a brighter blue than anything else on the site - and
becomes #A9C7FF, the same colour the other banners give their second half.
The badge was on its own scale at 14px on a 22.4px line with 0.15px
tracking and a 1px blue border on a solid blue fill; it is now on the same
scale as every other badge in the site, with the translucent white fill and
the white border.
The full ladder - 16px down to 11px at 480px, the title 40 down to 29 - is
the same one already written out on the other pages and is not repeated.
2. THE BANNER'S GUTTER
The banner text sat 4.5px right of the header logo's left edge - close, but
not on it, and it is the same gutter that was wrong by 27px and by 59px on
the pages already done. .mpb-content carries 55px of left and right padding,
so the same treatment applies: padding to 0 on the content column, and the
gutter as a margin on that column.
max(4%, 50% - 690px) default
max(3%, 50% - 690px) 1199px and below
max(5%, 50% - 690px) 767px and below
max(4%, 50% - 690px) 480px and below
THE PHOTOGRAPH AND THE LAYOUT ARE NOT TOUCHED
.modern-paramedical-banner keeps its own background, its min-height of 430px,
its rounded photograph, its three feature pills on the right - "Healthcare
Skill Development", "Certification Programme", "Practical Training" - and its
picture, images/para2.png. None of those is named anywhere in this block, and
no ellipse, navy overlay or clip-path is added to the picture. It is left
exactly as it is, as asked on the previous turn.
The gutter is a margin on the text column, not padding on the section, for
the reason it was done that way elsewhere: the picture here is a normal
element of the section rather than a right-anchored one, so padding on the
section would have pushed it in and left a navy strip down its side.
---------------------------------------------------------------------------
3. THE INSIDE OF THE TWO SECTIONS
The section widths were put on the header and footer ladder in the block
before this one, and both containers now measure dL 0.0 and dR 0.0. That was
the outside of the box again. The inside was still in, because the container
carries 12px of left and right padding:
.eligibility-section > .container 1161.0 the header edges
its contents, before 1137.0 12.0 in each side
The two horizontal padding values go to zero, for the same reason as on the
Skill & Vocational pages: once the container is on the header edge,
container padding only pushes the contents back off it. The grids then share
the extra 24px between them.
.eligibility-section > .container,
.course-modules-section > .container padding-left 0
padding-right 0
The vertical padding on both is left exactly as it was.
---------------------------------------------------------------------------
4. PADDING THE SAME ABOVE AND BELOW, EVERY SECTION
Measured at a 1000px viewport before this block, every section on the page:
modern-paramedical-banner 0px / 0px equal already
eligibility-section 70px / 70px equal - fixed last turn
course-modules-section 70px / 70px equal already
odlcf-cta 36px / 36px equal - the shared fix
Every section on this page is now equal above and below. Nothing is written
here for the padding, because there is nothing left out - restating a value
that already matches would change nothing and would only make the next
reader doubt the measurement. The numbers are recorded here so the claim can
be checked rather than taken on trust.
============================================================================ */
/* ------------------------------------------------- 1. the banner's type */
.mpb-badge {
width: fit-content !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 11px 20px !important;
margin-bottom: 25px !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 30px !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
backdrop-filter: blur(5px) !important;
}
.mpb-badge-icon {
font-size: 16px !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
}
.mpb-title {
font-family: Roboto, Arial, sans-serif !important;
font-size: 40px !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -1px !important;
text-transform: uppercase !important;
color: #ffffff !important;
}
.mpb-title span {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
color: #a9c7ff !important;
}
.mpb-content p {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
text-align: justify;
letter-spacing: 0.2px !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.mpb-duration {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.3px !important;
}
/* --------------------------------------- 2. the banner's gutter */
.mpb-content {
padding-left: 0 !important;
margin-left: max(4%, 50% - 690px) !important;
}
/* --------------------------------- 3. the inside of the two sections */
.eligibility-section > .container,
.course-modules-section > .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ============================================================================
THE SAME LADDER THE OTHER PAGES USE
============================================================================ */
@media screen and (max-width: 1399px) {
.mpb-content p {
font-size: 16px !important;
line-height: 1.75 !important;
}
}
@media screen and (max-width: 1199px) {
.mpb-content {
margin-left: max(3%, 50% - 690px) !important;
}
.mpb-badge {
gap: 9px !important;
padding: 10px 18px !important;
margin-bottom: 22px !important;
font-size: 15px !important;
}
.mpb-badge-icon {
font-size: 15px !important;
}
.mpb-title {
font-size: 40px !important;
line-height: 1.08 !important;
letter-spacing: -1px !important;
}
}
@media screen and (max-width: 991px) {
.mpb-badge {
gap: 8px !important;
padding: 9px 17px !important;
margin-bottom: 20px !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
.mpb-badge-icon {
font-size: 14px !important;
}
.mpb-title {
font-size: 36px !important;
line-height: 1.1 !important;
letter-spacing: -0.8px !important;
}
.mpb-content p {
font-size: 16px !important;
line-height: 1.65 !important;
}
}
@media screen and (max-width: 767px) {
.mpb-content {
margin-left: max(5%, 50% - 690px) !important;
}
.mpb-badge {
gap: 8px !important;
padding: 8px 15px !important;
margin-bottom: 18px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.mpb-badge-icon {
font-size: 13px !important;
}
.mpb-title {
font-size: 34px !important;
line-height: 1.08 !important;
letter-spacing: -0.8px !important;
}
.mpb-content p {
font-size: 15px !important;
line-height: 1.6 !important;
}
}
@media screen and (max-width: 575px) {
.mpb-badge {
gap: 7px !important;
padding: 7px 13px !important;
margin-bottom: 16px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.mpb-badge-icon {
font-size: 12px !important;
}
.mpb-title {
font-size: 30px !important;
line-height: 1.1 !important;
letter-spacing: -0.6px !important;
}
.mpb-content p {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
@media screen and (max-width: 480px) {
.mpb-content {
margin-left: max(4%, 50% - 690px) !important;
}
.mpb-badge {
gap: 6px !important;
padding: 6px 12px !important;
margin-bottom: 14px !important;
font-size: 11px !important;
line-height: 1.4 !important;
}
.mpb-badge-icon {
font-size: 11px !important;
}
.mpb-title {
font-size: 29px !important;
}
}
@media screen and (max-width: 400px) {
.mpb-title {
font-size: 29px !important;
line-height: 1.1 !important;
letter-spacing: -0.4px !important;
}
}
/* ============================================================================
THE BANNER GUTTER - THE MARGIN WAS THE WRONG TOOL HERE, AND THE BANNER HAD
TWO NAVIES DOWN ITS LEFT SIDE
----------------------------------------------------------------------------
Two faults, both in the banner, both found by measuring what the block above
it actually produced rather than trusting it.
---------------------------------------------------------------------------
FAULT ONE: THE GUTTER DID NOT LAND ON THE LOGO
The block above put the gutter on .mpb-content as a margin:
.mpb-content { padding-left: 0; margin-left: max(4%, 50% - 690px); }
Measured at a 1262px viewport after that block:
header L 50.5 logo L 50.5
.mpb-content L 26.2 .mpb-badge L 26.2
DELTA badge-left to the logo: -24.3px
The text was 24.3px to the LEFT of the logo edge, and the arithmetic does not
add up: max(4%, 50% - 690px) of 1262 is max(50.5, -59) = 50.5px, and the
badge measured 26.2. The percentage resolves against the CONTAINING BLOCK,
not the viewport, and the containing block here is 656.2px wide - not 1262 -
so 4% came out as 26.2px. The same expression on the other pages resolved
against a full-width parent and came out right; here it does not.
So the margin was the wrong tool. It is moved to the section, which is
full width, and .mpb-content goes back to padding 0 - the Grade 10 method,
and the reason it was used there in the first place.
.modern-paramedical-banner padding-left max(4%, 50% - 690px)
.mpb-content padding-left 0, margin-left 0
4% of 1262 is 50.5, which is the logo's edge exactly.
---------------------------------------------------------------------------
FAULT TWO: TWO NAVIES DOWN THE LEFT SIDE OF THE BANNER
This is the two-tone in the screenshot - a darker strip down the left of the
banner, from the page edge to about x=300, where it meets the lighter navy
that continues to the right edge. Measured:
section background rgb(6, 36, 77) #06244D the lighter
.mpb-grid background transparent
background-image radial-gradient(rgba(21,148,255,.7) 1px,
rgba(0,0,0,0) 1px),
radial-gradient(rgba(0,0,0,0) 10px,
rgba(19,125,225,.2))
.mpb-grid box x 0.0 to 300.0 width 300.0
.mpb-glow background rgba(10,126,230,.12)
.mpb-visual background rgb(10,53,105) #0A3569 the darker
Two things are painting, and they do not meet at the same colour:
x 0 to 300 .mpb-visual, behind the grid - rgb(10,53,105)
x 300 to 1262 the section's own background - rgb(6,36,77)
So the left third of the banner is a different navy from the right two
thirds, and the join at x=300 is a hard vertical edge. That is the seam.
WHAT IS DONE
The two panels are made one. .mpb-visual is the darker of the two and sits
under the dotted grid, so it is taken to the section's own colour:
.mpb-visual background #06244D the section's colour
One navy across the whole banner, the dotted grid still on top of it, and
the join at x=300 disappears because both sides are now the same colour.
Nothing else about the picture is touched. .mpb-image-wrap keeps its radius
of 110px, its 605.8 x 629.6 box, its object-fit cover and its object-position
of 50% 50%, and images/para2.png is still the file being shown. No ellipse,
no navy overlay and no clip-path is added to it.
---------------------------------------------------------------------------
THE GLOW IS LEFT ALONE
.mpb-glow is a soft radial of rgba(10,126,230,.12) at 500px opacity, sitting
over the join. It is a highlight rather than a second colour, and it is left
as it is. If the join is still visible once the two panels match, that is
what would be looked at next.
============================================================================ */
.modern-paramedical-banner {
padding-left: max(4%, 50% - 690px) !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.mpb-content {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* the two navy panels of the banner made one */
.mpb-visual {
background: #06244d !important;
}
@media screen and (max-width: 1199px) {
.modern-paramedical-banner {
padding-left: max(3%, 50% - 690px) !important;
}
}
@media screen and (max-width: 767px) {
.modern-paramedical-banner {
padding-left: max(5%, 50% - 690px) !important;
}
}
@media screen and (max-width: 480px) {
.modern-paramedical-banner {
padding-left: max(4%, 50% - 690px) !important;
}
}
/* ============================================================================
THE DOTTED GRID AND THE GLOW PUT BACK TO FULL BLEED
----------------------------------------------------------------------------
A side effect of moving the gutter onto the section.
The section now carries padding-left, which is what puts the banner text on
the header logo's left edge. But the banner also holds two decorative layers
that were meant to reach the page edges, and padding on the parent pushes
every child in with it. Measured at a 504px viewport after that change:
.mpb-grid x 25.2 to 504.0 500.0 wide dL 25.2 dR 235.3
.mpb-glow x 25.2 to 504.0
.mpb-content x 25.2 dL -0.0 dR 25.3
The dotted pattern used to start at the page edge, x 0. It now starts 25.2px
in - exactly the gutter - so the leftmost quarter-inch of the banner has no
dots on it, and at 504 the pattern also falls 235px short of the right edge.
.mpb-content being at the gutter is correct and is what was asked for; that
one is left where it is. These two are decoration and belong to the edges.
WHAT IS DONE
Each is given a negative left margin of the same size as the gutter, so it
starts back at the page edge, and its width is given the gutter back so the
right edge is reached too. The gutter is written as the same max() expression
it is on the section, at each of the same four widths, so the two cannot
drift apart - there is one number per width and it is written twice.
Nothing about the pattern itself is changed: the two radial gradients, the
11px dot size, the colours, the 300px width on a desktop and the 500px on a
phone are all left as they were.
============================================================================ */
.mpb-grid,
.mpb-glow {
margin-left: calc(-1 * max(4%, 50% - 690px)) !important;
width: auto !important;
}
@media screen and (max-width: 1199px) {
.mpb-grid,
.mpb-glow {
margin-left: calc(-1 * max(3%, 50% - 690px)) !important;
}
}
@media screen and (max-width: 767px) {
.mpb-grid,
.mpb-glow {
margin-left: calc(-1 * max(5%, 50% - 690px)) !important;
}
}
@media screen and (max-width: 480px) {
.mpb-grid,
.mpb-glow {
margin-left: calc(-1 * max(4%, 50% - 690px)) !important;
}
}
/* ============================================================================
THREE THINGS, TWO OF THEM FAULTS OF MINE, AND THE ANSWER ON ELIGIBILITY
---------------------------------------------------------------------------
1. THE DOTTED GRID AND THE GLOW HAD COLLAPSED TO NOTHING - MY FAULT
The block before last gave them
margin-left calc(-1 * max(4%, 50% - 690px))
width auto
and both halves of that were wrong. Measured after it:
.mpb-grid x -53.7 width 0.0 height 220.0
.mpb-glow x 510.3 width 0.0 height 500.0
width:auto on an absolutely positioned box that has left set but not right
is shrink-to-fit, and these have no content, so it came out as zero. Both
decorations were simply gone from the banner.
The negative margin was never needed either. An absolutely positioned child
is placed against the PADDING box of its containing block, not the content
box, so the gutter this project put on the section never moved these two in
the first place. left:0 was already the page edge.
So both are put back exactly as they were written, and only that:
.mpb-grid left 0 width 300px height 220px
.mpb-glow left 42% width 500px height 500px
There is no media query for either - a search of this file returns one rule
each - so 300px and 500px are the widths at every screen size, phone
included. The comment in the earlier block claimed 500px on a phone; that
claim was wrong and is corrected here.
2. THE STRAY DASH BESIDE "CERTIFICATE PROGRAMMES"
Measured at a 1342px viewport, before this block:
.mpb-content padding-left 0 padding-right 55px
.mpb-title 40px ls -1px max-width 620px
the title box 615.0px wide
"CERTIFICATE PROGRAMMES -" on one line needs 638.9px
-> short by 23.9px
At 1182px it was short by 97.9px. So the en-dash had nowhere to go but onto a
line of its own, which is the stray mark that was reported.
There is no CSS property that can style or hide a bare text node, so this is
done by changing how the heading flows rather than by touching the character.
The mark-up is
Certificate Programmes -
Paramedical
and .mpb-title span was display:block, so the dash was left stranded at the
end of the first line with the word it belongs to pushed away from it.
THREE THINGS CHANGE
.mpb-content padding-right 0
.mpb-title span display inline
.mpb-title max-width 16em
The padding goes for the same reason the section containers' padding went
earlier: once the column is on the header's left edge, padding on it only
pushes the contents back off it. It is worth 55px, which is more than the
23.9px the dash was short by.
The span goes inline so the dash is part of the sentence rather than a
stranded fragment. It now reads
wide screens CERTIFICATE PROGRAMMES -
PARAMEDICAL
narrower screens CERTIFICATE PROGRAMMES
- PARAMEDICAL
and it is never on a line by itself at any width.
The max-width was 620px, which is a fixed number that is right at one font
size and wrong at every other, and it is what re-clamped the column back
below the width the dash needs. It becomes 16em, which scales with the type.
Checked against the measured width of "CERTIFICATE PROGRAMMES -", which is
638.9px at 40px and so about 15.97px for each pixel of font size:
40px 16em = 640px the dash needs 638.9px fits, by 1.1px
36px 16em = 576px the dash needs 575.0px fits
34px 16em = 544px the dash needs 543.0px fits
30px 16em = 480px the dash needs 479.1px fits
29px 16em = 464px the dash needs 463.1px fits
and at every one of those sizes the whole two-part title is far wider than
16em, so PARAMEDICAL always goes to the second line and the heading never
collapses onto one.
Between about 1150px and 1200px the two-column layout gives the text a
596px column at 40px, which is narrower than "CERTIFICATE PROGRAMMES" on its
own. There the heading breaks into three lines with PROGRAMMES carrying the
dash onto line two. That is the price of the dash being kept, and it was the
trade the instruction chose; the alternative was deleting the character.
3. THE ELIGIBILITY SECTION - ASKED FOR, AND ALREADY TRUE
Measured at four widths, header against section, after all of the above:
1342 header L 53.7 R 1288.3 w 1234.6
section L 53.7 R 1288.3 w 1234.6 dL 0.0 dR 0.0
882 header L 26.5 R 855.5 w 829.1
section L 26.5 R 855.5 w 829.1 dL 0.0 dR 0.0
504 header L 25.2 R 478.8 w 453.6
section L 25.2 R 478.8 w 453.6 dL 0.0 dR 0.0
1182 the 92% / max-width 1380px ladder, both on the same edges
The container, the heading and the grid all start and end on the header's
left and right edges, and so do all four cards, at every width measured.
Nothing is written for it here. A rule that restates a value which already
matches would change nothing and would only make the next reader doubt the
measurement. If it looks narrower in a browser, that browser is holding a
cached copy of this stylesheet; the ladder was put in place earlier and the
numbers above can be checked against it.
============================================================================ */
/* ------------------------------- 1. the decoration, put back as it was */
.mpb-grid {
margin-left: 0 !important;
left: 0 !important;
width: 300px !important;
height: 220px !important;
}
.mpb-glow {
margin-left: 0 !important;
left: 42% !important;
width: 500px !important;
height: 500px !important;
}
/* ------------------- 2. the dash, kept but no longer on a line of its own */
/* .mpb-content {
padding-right: 0 !important;
} */
.mpb-title {
max-width: 16em !important;
}
.mpb-title span {
display: inline !important;
}
/* ============================================================================
CERTIFICATE PROGRAMMES - PARAMEDICAL: THE BANNER CARDS AND THE IMAGE CORNER
---------------------------------------------------------------------------
TWO DECLARATIONS, TWO SELECTORS. display inside a tablet query, and
border-radius outside every query. No font, no colour, no background, no
border, no width, no height, no margin, no gap, no position, no inset, no
opacity, no visibility, no transform. The photograph, its src and its alt are
not touched. No markup is touched.
--------------------------------------------------------------------------
ONE: THE FLOATING CARDS, IN TABLET VIEW
Measured live, the three cards that sit over the photograph - "Healthcare
Skill Development", "Certification Programme" and "Practical Training" -
were painted at every width tested:
vw cards painted card size
1440 3 of 3 158.0 x 82.6
1100 3 of 3 158.0 x 82.6
991 3 of 3 158.0 x 82.6 <- tablet
768 3 of 3 158.0 x 82.6 <- tablet
600 3 of 3 145.0 x 82.6
500 3 of 3 145.0 x 82.6
They are only ever switched off by one rule, at line 2307, inside
max-width: 480px. There is no rule for the whole tablet band, which is why
they are still there at 991px and 768px - and at 991px the photograph has
already flattened to a plain rectangle 961.3 x 380.0, so the cards are left
floating over a square-cornered picture.
Hidden between 768px and 991px, which is the tablet tier this stylesheet
already uses: .mpb-visual drops to min-height:380px at line 2127 and the
image loses its radius at line 2134, both inside max-width:991px.
The elements are switched off, not removed. All three keep their markup,
their text and their place in the column; they come straight back if the
one declaration below is taken away. Nothing below 768px and nothing above
991px is touched, so the phone tier and the desktop banner are as they are.
--------------------------------------------------------------------------
TWO: THE BORDER RADIUS AROUND THE IMAGE, ON EVERY DEVICE
vw .mpb-image-wrap corner
1440 663.5 x 595.1 110px rounded
1100 512.2 x 624.6 110px rounded
991 961.3 x 380.0 0px
768 745.0 x 380.0 0px
600 570.0 x 310.0 0px
500 475.0 x 310.0 0px
Two rules, and they disagree about where the rounding stops:
line 1861 .mpb-image-wrap { border-radius: 110px; } no query
line 2134 @media (max-width: 991px)
.mpb-image-wrap { border-radius: 0; }
So the radius is 110px from 992px upward and 0 below it. Taking it off
completely is one declaration with no media query around it, which sits
above both of them and settles the question at every width rather than
extending the 991px tier.
It is written on the wrapper, not the ![]()
inside it, because the wrapper
is what carries overflow:hidden and what the radius was on to begin with -
so the corner of the clipped picture and the corner of the box are the same
thing. The img's own transform: scale(1.035) at line 1892 is untouched.
--------------------------------------------------------------------------
WHAT IS NOT TOUCHED
The photograph, its src and its alt. .mpb-image-wrap's position:absolute,
overflow:hidden and its size. The overlay at line 1902. The four-dot marker
at line 2079. .mpb-visual and its min-height ladder. The banner's own
background and gradient. The badge, the h1 and its coloured span, the
rule, the duration chip, the paragraph and the three feature lines. The
card's own 13px corner radius, which is on the card, not the image, and is
left alone. Every other section of the page, and the other two Paramedical
pages - diploma and advanced - which carry the same component and were not
touched here.
============================================================================ */
/* ---- the three cards off the photograph on a tablet, and its corners off everywhere ---- */
/* The cards are only ever hidden at max-width:480px (line 2307), so they were
still painted across the whole tablet band - measured 3 of 3 at 991px and at
768px, where the image has already gone square-cornered. Hidden between 768px
and 991px, the tablet tier this stylesheet already uses for .mpb-visual and
for the image. display:none, not a removal: the markup and the text stay.
The image corner is 110px at line 1861 with no query and 0 at line 2134
inside max-width:991px, so it is rounded above 992px and square below.
Settled at 0 for every width, on the wrapper that carries the radius and
the clipping. */
@media screen and (min-width: 768px) and (max-width: 991px) {
.mpb-info-card {
display: none !important;
}
}
.mpb-image-wrap {
border-radius: 0 !important;
}
/* ============================================================================
THE BANNER PHOTOGRAPH RUNS THE FULL WIDTH WHERE THE BANNER IS STACKED
.modern-paramedical-banner carries the header gutter ladder on padding-left -
max(3%...) under 1199, max(5%...) under 767, max(4%...) under 480 - with
padding-right: 0. While the banner is two columns that is right: the gutter
sits on the left of the text and the photograph runs to the right edge.
The banner becomes one column under 991 (grid-template-columns: 1fr) and the
photograph moves underneath the text. That same gutter is then the strip down
the left of the photograph, with nothing balancing it on the right because
padding-right is 0. Measured at 463px: photograph 444 wide inside a 463 card,
19px in from the left and flush right. 17px at 414, 16 at 390, 14 at 360,
13 at 320 - identical on all three Paramedical pages.
Under 991 the gutter moves off the banner and onto .mpb-content, as a margin
instead of a padding. The badge, the heading, the duration chip and the three
information cards all live inside .mpb-content, so they keep the inset they
have now. The photograph is the next grid row, so with the padding gone it
runs edge to edge.
The three steps of the ladder are restated one for one, so the inset tracks
exactly as before: 3% from 768 to 991, 5% from 481 to 767, 4% at 480 and under.
50% - 690px is negative at every one of those widths, so it is the percentage
branch that applies, and it resolves against the same width - the banner is
full bleed, so its content box is the card.
The two column layout at 992 and above is untouched, and so is everything else
on the page. These rules only ever match the banner's own classes.
!important on both, because what is replaced already carries it on the same
property and the same selector: the banner's padding-left, and .mpb-content's
margin-left: 0 !important.
============================================================================ */
@media (max-width: 991px) {
.modern-paramedical-banner {
padding-left: 0 !important;
}
.modern-paramedical-banner .mpb-content {
margin-left: max(3%, 50% - 690px) !important;
}
}
@media (max-width: 767px) {
.modern-paramedical-banner .mpb-content {
margin-left: max(5%, 50% - 690px) !important;
}
}
@media (max-width: 480px) {
.modern-paramedical-banner .mpb-content {
margin-left: max(4%, 50% - 690px) !important;
}
}