/*==========================
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;
text-align: justify;
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 - DIPLOMA PROGRAMMES: THE SECTION WIDTHS
---------------------------------------------------------------------------
MEASURED AT A 1342px VIEWPORT BEFORE THIS BLOCK
header .container-fluid L 53.7 R 1288.3 w 1234.6
.eligibility-section padding 70px / 70px equal
> .container L 101.0 R 1241.0 w 1140.0 dL 47.3 dR 47.3
.eligibility-heading w 1116.0 dL 59.3
.course-modules-section padding 70px / 70px equal
> .container L 101.0 R 1241.0 w 1140.0 dL 47.3 dR 47.3
.course-modules-wrapper w 1116.0 dL 59.3
.odlcf-cta L 53.7 R 1288.3 on edges
WHY IT WAS 47.3px IN
Both .container elements were reporting
width 1140px max-width 1140px padding 12px / 12px
and neither of those numbers is written anywhere in this file - a search
of it returns no .container rule at all. They are Bootstrap's. The page
loads bootstrap.min.css as its first stylesheet, and Bootstrap's
.container steps through 540, 720, 960, 1140 and 1320 as the viewport
grows; at 1342px it is on 1140. 1342 - 1140 = 202, and half of that is
the 101.0 the container's left edge was measured at.
So the two sections were being sized by a framework default that has
nothing to do with this site's own width ladder. The 12px of padding
came from the same rule and is why the contents sat 59.3px in rather
than 47.3px.
WHAT IS DONE
Both containers go on the ladder the header and the footer already run
on, taken from header.css line 9213 - 92% with a 1380px cap, then 94%
at 1199 and below, 90% at 767 and below, 92% at 480 and below. Padding
goes to zero for the same reason as on the certificate page: once the
container is on the header's edge, padding on it only pushes the
contents back off that edge.
.eligibility-section > .container
.course-modules-section > .container
Nothing else is named. The heading, the grid, the cards, the wrapper and
every padding value are left exactly as they are.
THE PADDING WAS ALREADY RIGHT
Measured and not written here, because restating a value that already
matches would change nothing:
.eligibility-section 70px / 70px equal
.course-modules-section 70px / 70px equal
.odlcf-cta 36px / 36px equal the shared fix
============================================================================ */
/* --------------------------------------------------- 1. the container ladder */
.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;
}
@media screen and (max-width: 1199px) {
.eligibility-section > .container,
.course-modules-section > .container {
width: 94% !important;
}
}
@media screen and (max-width: 767px) {
.eligibility-section > .container,
.course-modules-section > .container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.eligibility-section > .container,
.course-modules-section > .container {
width: 92% !important;
}
}
/* ============================================================================
PARAMEDICAL - DIPLOMA PROGRAMMES: THE PADDING ABOVE AND BELOW
---------------------------------------------------------------------------
MEASURED, EVERY BREAKPOINT, BEFORE THIS BLOCK
viewport .eligibility-section .course-modules-section
1560, 1182 70px / 70px equal 70px / 70px equal
974 55px / 60px OUT -5 60px / 60px equal
750 55px / 60px OUT -5 60px / 60px equal
558 45px / 50px OUT -5 60px / 60px equal
504 45px / 50px OUT -5 60px / 60px equal
.odlcf-cta 36px / 36px equal, at every width
WHY
Two rules in this file carry a deeper bottom than top:
line 2745 @media (max-width: 991px) .eligibility-section
padding: 55px 0 60px
line 2768 @media (max-width: 575px) .eligibility-section
padding: 45px 0 50px
Both are 5px out, and in both it is the bottom that is the larger of the
two. .course-modules-section at line 3312 is already padding: 60px 0 and is
left alone.
WHAT IS DONE
The bottom is brought up to the top - 60 becomes 55, 50 becomes 45 - and
nothing else is named. The top padding, the left and right, and every
width are untouched.
Below 504px these are the same numbers by arithmetic rather than by
measurement, because headless Chrome will not open a window narrower than
504px: the 991 rule covers 576 to 991, the 575 rule covers everything
below 576, and neither one overrides the other because the 575 rule comes
after it and both are written here in that order.
============================================================================ */
@media screen and (max-width: 991px) {
.eligibility-section {
padding: 55px 0 55px !important;
}
}
@media screen and (max-width: 575px) {
.eligibility-section {
padding: 45px 0 45px !important;
}
}
/* ============================================================================
PARAMEDICAL - DIPLOMA PROGRAMMES: THE SAME TYPE AND THE SAME BANNER AS
THE CERTIFICATE PAGE
---------------------------------------------------------------------------
This page now reads exactly as the certificate page reads. Nothing on any
other page is touched by this block, and nothing on this page's PHP is
touched at all - the mark-up, the words, the hrefs and the picture all stay
as they are.
MEASURED AT A 1262px VIEWPORT BEFORE THIS BLOCK, THIS PAGE AND THE
CERTIFICATE PAGE SIDE BY SIDE
header .container-fluid both L 50.5 logo L 50.5
section background both rgb(6, 36, 77) #06244D
banner text, delta to the logo this +4.5px certificate -0.0px
The banner's own background is left exactly as it is. It is the same
#06244D the certificate page already uses, and it is not changed here.
---------------------------------------------------------------------------
1. THE BANNER'S TYPE - THE CERTIFICATE PAGE'S SCALE
this page, before the certificate page
------------------------------------------------------------------------
badge 14px/22.4px w700 ls 0.15px 16px/1.3 w700 ls 0.3px
pad 9px 17px, radius 50px pad 11px 20px, radius 30px
border 1px rgba(76,171,255,.25) border 1px rgba(255,255,255,.35)
fill rgba(8,78,157,.95) fill rgba(255,255,255,.1)
margin-bottom 23px margin-bottom 25px
title Arial 46px/51.52px Roboto, Arial 40px/1.08
w700 ls -1px mixed case w800 ls -1px UPPERCASE
its span 46px, rgb(21,148,255) 40px, #A9C7FF
duration 14px/22.4px w700 15px w700 ls 0.3px
its icon 14px/22.4px w400 15px/1.3 w700 ls 0.3px
the text 15px/24.75px w400 16px/1.75 w400 ls 0.2px
ls normal rgba(255,255,255,.9)
rgba(255,255,255,.86)
The title is the largest single change: 46px becomes 40px and it is
uppercased, so "Diploma 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.
---------------------------------------------------------------------------
2. THE BANNER'S GUTTER
The text sat 4.5px right of the header logo's left edge. It goes on it.
.modern-paramedical-banner padding-left max(4%, 50% - 690px)
.mpb-content padding-left 0, padding-right 0
4% of 1262 is 50.5, which is the logo's edge exactly. The padding on
.mpb-content goes to zero for the same reason it did on the certificate
page: once the section carries the gutter, padding on the content column
only pushes the text back off it.
The section padding, not a margin on the text column, because the picture
here - like the picture there - is an absolutely positioned child, and an
absolutely positioned child is placed against the padding box, so the
gutter does not move it and no navy strip is left down its side.
---------------------------------------------------------------------------
3. ONE NAVY ACROSS THE BANNER
Two panels were painting and they did not meet at the same colour:
.modern-paramedical-banner rgb(6, 36, 77) #06244D
.mpb-visual rgb(10, 53, 105) #0A3569
.mpb-visual is the darker of the two and sits under the dotted grid, so it
is taken to the section's own colour. The join disappears because both
sides are then the same colour. This is the same single value the
certificate page carries.
---------------------------------------------------------------------------
4. THE DASH, KEPT AND PUT BESIDE THE WORDS
The mark-up is
Diploma Programmes -
Paramedical
and .mpb-title span was display:block with max-width 620px, so the
en-dash was left stranded on a line of its own between the two halves of
the title. There is no CSS property that can style a bare text node, so it
is fixed by changing how the heading flows rather than by touching the
character - the dash stays, and it stays in the words.
.mpb-title max-width 16em
.mpb-title span display inline
16em rather than a fixed number, because a fixed number is right at one
font size and wrong at every other. "Diploma Programmes -" on one line is
about 15.97px wide for each pixel of type, so 16em is 640px at 40px where
it needs 638.9, and it holds that margin at 36, 34, 30 and 29px too.
---------------------------------------------------------------------------
5. THE TWO PIECES OF SECTION COPY THAT WERE SMALLER
Measured on both pages, everything else in the sections already agrees -
the label at 12px, both h2 at 30px/36px, the card number at 32px, the
selected title at 27px/33.75px, the 16px/25.6px w600 body of the course
list - so only these two are named:
h3 .eligibility-title 15px/20.25px -> 20px/1.35 = 27px
the card's own text 13px/20.15px -> 16px/1.6 = 25.6px
which is the certificate page's pair, 20 and 16.
---------------------------------------------------------------------------
NOT TOUCHED
.odlcf-cta is a shared footer component loaded by thirteen pages from
css/includes/footer.css. It is not named here and it measures the same on
both pages already.
The picture - .mpb-image-wrap and its file - is not named here. No ellipse,
no navy overlay and no clip-path is added to it. The dotted grid and the
glow are not named here either.
============================================================================ */
/* ------------------------------------------------- 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;
max-width: 16em !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;
display: inline !important;
color: #a9c7ff !important;
}
.mpb-description {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
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;
}
.mpb-duration-icon {
font-size: 15px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
}
/* --------------------------------------------- 2. the banner's gutter */
.modern-paramedical-banner {
padding-left: max(4%, 50% - 690px) !important;
box-sizing: border-box !important;
}
.mpb-content {
padding-left: 0 !important;
/* padding-right: 0 !important; */
margin-left: 0 !important;
}
/* ------------------------------------------- 3. one navy, and the gutter */
/* .mpb-visual {
background: #06244d !important;
} */
/* --------------------------------------- 5. the two smaller pieces of copy */
.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;
}
/* ============================================================================
THE SAME LADDER THE CERTIFICATE PAGE RUNS ON
============================================================================ */
@media screen and (max-width: 1399px) {
.mpb-description {
font-size: 16px !important;
line-height: 1.75 !important;
}
}
@media screen and (max-width: 1199px) {
.modern-paramedical-banner {
padding-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-description {
font-size: 16px !important;
line-height: 1.65 !important;
}
}
@media screen and (max-width: 767px) {
.modern-paramedical-banner {
padding-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-description {
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-description {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
@media screen and (max-width: 480px) {
.modern-paramedical-banner {
padding-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;
}
}
/* ============================================================================
DIPLOMA PROGRAMMES - PARAMEDICAL: THE BANNER CARDS AND THE IMAGE CORNER
---------------------------------------------------------------------------
The same two declarations, the same two selectors and the same two
breakpoints already carried by para-certificateprogrammes-6months.css, so
all three Paramedical banners now read the same. Written here rather than
moved into a shared file because each page loads only its own stylesheet.
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
Three cards sit over the photograph - "Healthcare Skill Development",
"Certification Programme" and "Practical Training". Measured on the
certificate page before the same change, and identical here line for line:
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
There is exactly one rule that ever hides them and it is at line 2307,
inside max-width: 480px. The whole tablet band is unaccounted for, which
is why they were still there at 991px and 768px - and at 991px the
photograph has already flattened to a plain rectangle 961.3 x 380.0, so
they sit 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, and 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
Two rules in this file 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 corner is 110px from 992px upward and 0px below it - measured 110px
at both 1440px and 1100px, 0px at 991px, 768px, 600px and 500px. Taking
it off completely is one declaration with no media query around it, which
sits above both of them and settles it at every width instead of 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 and not on the image.
Every other section of the page, and every other page.
============================================================================ */
/* ---- the three cards off the photograph on a tablet, and its corners off everywhere ---- */
/* The same block as on para-certificateprogrammes-6months.css, which carries it at
the same two line numbers with the same values. The cards are only ever hidden
at max-width:480px (line 2307), so they were painted across the whole tablet
band - measured 3 of 3 at 991px and at 768px, where the image has already gone
square-cornered. 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;
}
}