/*==========================
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;
text-align: justify;
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-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;
}
/* =========================================================
ELIGIBILITY GRID
========================================================= */
.eligibility-grid {
width: min(1400px, 92%);
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 24px;
}
/* =========================================================
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);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.eligibility-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 800px) {
.eligibility-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.eligibility-section {
padding: 55px 0 65px;
}
.eligibility-section .section-heading h2 {
font-size: 32px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 550px) {
.eligibility-grid {
width: 90%;
grid-template-columns: 1fr;
gap: 18px;
}
.eligibility-card {
min-height: 220px;
padding: 25px 22px;
}
.eligibility-section .section-heading h2 {
font-size: 28px;
}
.eligibility-number {
font-size: 34px;
}
}
/* =========================================================
COURSE MODULES
========================================================= */
.course-section {
width: 100%;
padding: 70px 0;
background: #f5f8fc;
}
/* =========================================================
SECTION HEADING
========================================================= */
.course-section .section-heading {
text-align: center;
margin-bottom: 42px;
}
.course-section .section-label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
color: #0878f9;
}
.course-section .section-heading h2 {
margin: 0;
font-size: 38px;
line-height: 1.2;
font-weight: 700;
color: #063d78;
}
.course-section .heading-line {
position: relative;
width: 82px;
height: 4px;
margin: 14px auto 0;
background: #1479ed;
border-radius: 10px;
}
.course-section .heading-line::before,
.course-section .heading-line::after {
content: "";
position: absolute;
top: 50%;
width: 5px;
height: 5px;
background: #1479ed;
border-radius: 50%;
transform: translateY(-50%);
}
.course-section .heading-line::before {
left: -10px;
}
.course-section .heading-line::after {
right: -10px;
}
/* =========================================================
MAIN COURSE WRAPPER
========================================================= */
.course-module-wrapper {
width: min(1500px, 92%);
min-height: 620px;
margin: 0 auto;
display: grid;
grid-template-columns: 38% 62%;
background: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 18px 45px rgba(16, 70, 120, 0.10);
}
/* =========================================================
LEFT SIDEBAR
========================================================= */
.course-sidebar {
padding: 38px 34px 40px;
background:
linear-gradient(
180deg,
#092e65 0%,
#0b478c 100%
);
}
.course-sidebar-title {
margin-bottom: 28px;
padding-left: 18px;
font-size: 23px;
line-height: 1.2;
font-weight: 700;
color: #ffffff;
}
/* =========================================================
COURSE TAB
========================================================= */
.course-tab {
position: relative;
width: 100%;
min-height: 106px;
margin-bottom: 14px;
padding: 15px 18px;
display: grid;
grid-template-columns:
70px 1fr 45px 20px;
align-items: center;
column-gap: 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
color: #ffffff;
text-align: left;
cursor: pointer;
transition:
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
.course-tab:last-child {
margin-bottom: 0;
}
.course-tab:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(41, 145, 255, 0.8);
transform: translateX(3px);
}
/* =========================================================
ACTIVE TAB
========================================================= */
.course-tab.active {
background:
linear-gradient(
135deg,
#087cf4,
#1173dc
);
border-color: #2694ff;
box-shadow:
0 8px 22px rgba(0, 105, 225, 0.30);
}
/* =========================================================
TAB ICON
========================================================= */
.course-tab-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #1598ff;
border-radius: 12px;
background: rgba(0, 20, 60, 0.35);
color: #19a1ff;
flex-shrink: 0;
}
.course-tab-icon i {
font-size: 25px;
}
.course-tab.active .course-tab-icon {
background: #062e68;
border-color: #0d8df9;
color: #ffffff;
}
/* =========================================================
TAB TEXT
========================================================= */
.course-tab-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.course-tab-text small {
display: block;
font-size: 12px;
line-height: 1.2;
color: #9fc9f4;
}
.course-tab-text strong {
display: block;
font-size: 16px;
line-height: 1.35;
font-weight: 700;
color: #ffffff;
}
/* =========================================================
COURSE NUMBER
========================================================= */
.course-number {
font-size: 20px;
font-weight: 700;
text-align: center;
color: #86bdf0;
}
.course-tab.active .course-number {
color: #67c4ff;
}
/* =========================================================
CHEVRON
========================================================= */
.course-tab > i {
font-size: 20px;
color: #7ab4e9;
}
.course-tab.active > i {
color: #ffffff;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.course-content {
min-width: 0;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
SELECTED PROGRAMME
========================================================= */
.selected-programme {
min-height: 208px;
padding: 42px 54px;
display: flex;
align-items: center;
gap: 28px;
border-bottom: 1px solid #e5edf6;
background:
radial-gradient(
circle at 95% 20%,
#edf7ff 0,
#ffffff 30%
);
}
.selected-icon {
width: 78px;
height: 78px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background:
linear-gradient(
145deg,
#0a78e8,
#1265c8
);
color: #ffffff;
box-shadow:
0 12px 25px rgba(14, 109, 220, 0.25);
}
.selected-icon i {
font-size: 39px;
}
.selected-programme-text > span {
display: block;
margin-bottom: 10px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.8px;
color: #0878f9;
}
.selected-programme-text h3 {
max-width: 720px;
margin: 0;
font-size: 27px;
line-height: 1.25;
font-weight: 700;
color: #063d78;
}
/* =========================================================
MODULE LIST
========================================================= */
.course-modules-list {
padding: 32px 54px 45px;
}
.course-panel {
display: none;
}
.course-panel.active {
display: block;
}
/* =========================================================
YEAR BLOCK
========================================================= */
.year-block {
margin-bottom: 30px;
}
.year-block:last-child {
margin-bottom: 0;
}
.year-title {
position: relative;
margin-bottom: 8px;
padding-left: 18px;
font-size: 22px;
line-height: 1.4;
font-weight: 800;
color: #063d78;
}
.year-title::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 5px;
height: 28px;
background: #1479ed;
border-radius: 5px;
}
/* =========================================================
MODULE ITEM
========================================================= */
.module-item {
min-height: 56px;
padding: 14px 0;
display: flex;
align-items: center;
gap: 15px;
border-bottom: 1px solid #e2eaf3;
}
.module-item:last-child {
border-bottom: none;
}
.module-item i {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 28px;
color: #1479ed;
}
.module-item span {
font-size: 16px;
line-height: 1.45;
font-weight: 600;
color: #1d344e;
}
/* =========================================================
HOVER
========================================================= */
.module-item {
transition:
padding-left 0.25s ease,
background 0.25s ease;
}
.module-item:hover {
padding-left: 8px;
}
.module-item:hover span {
color: #063d78;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1150px) {
.course-module-wrapper {
grid-template-columns: 1fr;
}
.course-sidebar {
padding: 30px;
}
.course-tab {
grid-template-columns:
65px 1fr 45px 20px;
}
.course-content {
min-height: auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.course-section {
padding: 55px 0 65px;
}
.course-section .section-heading h2 {
font-size: 30px;
}
.course-module-wrapper {
width: 94%;
border-radius: 18px;
}
.course-sidebar {
padding: 25px 18px 28px;
}
.course-sidebar-title {
padding-left: 8px;
font-size: 23px;
}
.course-tab {
grid-template-columns:
55px 1fr 35px;
gap: 10px;
min-height: 90px;
padding: 12px;
}
.course-tab-icon {
width: 48px;
height: 48px;
}
.course-tab-icon i {
font-size: 21px;
}
.course-tab-text strong {
font-size: 14px;
}
.course-tab-text small {
font-size: 11px;
}
.course-number {
font-size: 19px;
}
.course-tab > i {
display: none;
}
.selected-programme {
padding: 30px 24px;
gap: 18px;
align-items: flex-start;
}
.selected-icon {
width: 68px;
height: 68px;
}
.selected-icon i {
font-size: 28px;
}
.selected-programme-text h3 {
font-size: 23px;
}
.course-modules-list {
padding: 25px 24px 35px;
}
.year-title {
font-size: 19px;
}
.module-item {
gap: 10px;
}
.module-item span {
font-size: 15px;
}
.module-item i {
font-size: 23px;
}
}
/* ============================================================================
PARAMEDICAL - ADVANCED 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
.eligibility-grid w 1026.7 dL 104.0
.course-section padding 70px / 70px equal
> .section-heading L 0.0 R 1342.0 w 1342.0 dL -53.7 dR -53.7
.course-modules-wrapper L 53.7 R 1288.3 on edges
.odlcf-cta L 53.7 R 1288.3 on edges
THREE FAULTS, THREE DIFFERENT CAUSES
ONE. THE CONTAINER IS BOOTSTRAP'S AGAIN.
.eligibility-section > .container reported width 1140px and max-width
1140px, and this file contains no .container rule - the same framework
default as on the diploma page, the same 47.3px inset.
TWO. THE GRID CARRIES A SECOND LADDER OF ITS OWN.
.eligibility-grid at line 2440 is written
width: min(1400px, 92%);
margin: 0 auto;
92% of the container's 1116px content box is 1026.7px, which is exactly
what it measured. So the grid was centring itself inside a container that
was already too narrow, and the two insets compounded - the grid ended up
104.0px in, the worst of the three. Once the container is on the header's
edge the grid is given the container's full width and the second ladder
goes; there is one ladder per page, not two nested inside each other.
THREE. THE COURSE HEADING IS AT 100%, NOT ON THE LADDER AT ALL.
.course-section > .section-heading measured w 1342.0 on a 1342px viewport,
with max-width none - it is the full bleed of the page and so runs 53.7px
PAST the header's edges on each side. .section-heading is a direct child
of the section rather than sitting inside a .container, which is why it
never picked up anything; the rule at line 107 that shares its name sets
only font-size, line-height, weight and tracking, and no width at all.
Its sibling .course-modules-wrapper is already on the ladder and on the
header's edges, so this is the heading being out of step with its own
section rather than the whole section being wrong.
WHAT IS DONE
.eligibility-section > .container the ladder, padding 0
.eligibility-section .eligibility-grid the container's full width
.course-section > .section-heading the ladder
The ladder is the same one the header and the footer run on, taken from
header.css line 9213: 92% with a 1380px cap, 94% at 1199 and below, 90%
at 767 and below, 92% at 480 and below.
Nothing else is named. The wrapper, the cards, the banners and every
padding value are left exactly as they are.
THE PADDING WAS ALREADY RIGHT
Measured and not written here:
.eligibility-section 70px / 70px equal
.course-section 70px / 70px equal
.odlcf-cta 36px / 36px equal the shared fix
============================================================================ */
/* --------------------------------------------------- 1. the container ladder */
.eligibility-section > .container,
.course-section > .section-heading {
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-section > .section-heading {
width: 94% !important;
}
}
@media screen and (max-width: 767px) {
.eligibility-section > .container,
.course-section > .section-heading {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.eligibility-section > .container,
.course-section > .section-heading {
width: 92% !important;
}
}
/* ------------------------------ 2. the grid's own second ladder, removed */
.eligibility-section .eligibility-grid {
width: 100% !important;
max-width: none !important;
}
/* ============================================================================
PARAMEDICAL - ADVANCED DIPLOMA PROGRAMMES: THE PADDING ABOVE AND BELOW
---------------------------------------------------------------------------
MEASURED, EVERY BREAKPOINT, BEFORE THIS BLOCK
viewport .eligibility-section .course-section
1560, 1182 70px / 70px equal 70px / 70px equal
974 70px / 70px equal 70px / 70px equal
558 55px / 65px OUT -10 55px / 65px OUT -10
504 55px / 65px OUT -10 55px / 65px OUT -10
.odlcf-cta 36px / 36px equal, at every width
WHY
Two rules in this file carry a deeper bottom than top:
line 2755 @media (max-width: 800px) .eligibility-section
padding: 55px 0 65px
line 3375 @media (max-width: 700px) .course-section
padding: 55px 0 65px
Both are 10px out, and in both it is the bottom that is the larger of the
two. The two sections break at different widths, 800 and 700, so each is
corrected at its own.
WHAT IS DONE
The bottom is brought up to the top - 65 becomes 55 in each - 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. Both rules apply at 504 and below, so both sections carry 55 above
and 55 below there.
============================================================================ */
@media screen and (max-width: 800px) {
.eligibility-section {
padding: 55px 0 55px !important;
}
}
@media screen and (max-width: 700px) {
.course-section {
padding: 55px 0 55px !important;
}
}
/* ============================================================================
PARAMEDICAL - ADVANCED DIPLOMA PROGRAMMES: THE SAME TYPE AND THE SAME
BANNER AS THE CERTIFICATE PAGE
---------------------------------------------------------------------------
This page now reads 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.
MEASURED AT A 1342px VIEWPORT BEFORE THIS BLOCK, THIS PAGE AND THE
CERTIFICATE PAGE SIDE BY SIDE
header .container-fluid both L 53.7 logo L 53.7
section background both rgb(6, 36, 77) #06244D
banner text, delta to the logo this +1.3px 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 "Advanced Diploma Programmes - Paramedical" reads as caps
rather than 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 1.3px 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
The section padding, not a margin on the text column, for the reason it was
done that way on the other two pages: the picture here 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. NO BACKGROUND IS CHANGED, AND THAT IS A FINDING NOT AN OMISSION
On the certificate and diploma pages .mpb-visual carries its own navy,
rgb(10,53,105), which did not meet the section's and left a seam. Here it
measures
.mpb-visual background rgba(0, 0, 0, 0) transparent
position relative, L 697.8 w 644.2
so it paints nothing at all and the banner is already one colour. Nothing is
written for it. Setting a background where there is none would have been a
change, not a match.
---------------------------------------------------------------------------
4. THE DASH, KEPT AND PUT BESIDE THE WORDS
The mark-up is
Advanced 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
"Advanced Diploma Programmes -" is a longer first line than the other two
pages carry - it measured 46px tall across three lines before this - so the
title is given room to breathe rather than the other way round. 16em at
40px is 640px, which is wider than this page's own text column of 535px, so
the clamp is not what is holding the line together here; it is there so
that PARAMEDICAL cannot be pulled up onto the first line at wide widths.
---------------------------------------------------------------------------
5. THE ELIGIBILITY CARDS
h3 15px/20.25px -> 20px/1.35 = 27px
the card's own text 13px/20.15px -> 16px/1.6 = 25.6px
The card body here is a holding a and a , so both of
those take the 16px from the by inheritance - measured separately, the
was also 13px.
The label at 12px, the h2 at 30px/36px and the card number at 32px already
agree with the certificate page and are not named.
---------------------------------------------------------------------------
6. THE COURSE SECTION - EVERY PIECE OF IT WAS ON A DIFFERENT SCALE
Measured leaf by leaf. The certificate page's value is the target in each
row, and this page's own value is what it becomes:
COURSES OFFERED 14px/16.1px w700 ls 1px -> 14px/22.4px ls 0.3px
Course Modules 38px/45.6px w700 ls -1px -> 30px/36px ls normal
the panel title 23px/27.6px w700 -> 23px/36.8px
its small line 12px/14.4px w600 -> 12px/14.4px w400
its strong line 16px/21.6px w700 -> 16px/21.6px w700
the tab number 20px/24px w700 -> 20px/24px w700
SELECTED PROGRAMME 14px/22.4px w700 ls 0.8px -> 12px/19.2px ls 0.5px
the selected title 27px/33.75px w700 -> 27px/33.75px w700
YEAR - 1 22px/30.8px w800 -> 20px/24px w700
a module line 16px/23.2px w700 -> 16px/25.6px w600
The section h2 was the outlier: 38px where every other section heading on
the site is 30px, with -1px of tracking, so it read heavier and larger than
the Certificate Criteria heading directly above it in the same page. It is
the one change here that is not a one-pixel adjustment.
.year-title has no counterpart on the certificate page - it is this page's
own component - so its type is brought onto the same scale as the
certificate page's programme number, 20px/24px w700, and nothing else about
it is named.
Colours are deliberately NOT changed here, with one exception noted below.
The instruction was to change the fonts, and these three blues -
rgb(8,120,249) for the two labels, rgb(6,61,120) for the h2 and the
selected title - are this page's own. Changing a colour is not changing a
font. The single exception is .mpb-title span, which is part of the banner
type and is carried by section 1 above.
---------------------------------------------------------------------------
NOT TOUCHED
.odlcf-cta is a shared footer component loaded by thirteen pages from
css/includes/footer.css. It is not named here.
The picture - .mpb-image-wrap, its own para4.png, radius 110px, 644.2 wide,
absolute, object-fit cover, position 50% 50% - is not named here. No
ellipse, no navy overlay and no clip-path is added to it. .mpb-grid
(300 x 220) and .mpb-glow (500 x 500) are not named either.
There are no tables on this page, so the 16px table rule has nothing to
apply to.
============================================================================ */
/* ------------------------------------------------- 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;
}
/* ------------------------------------------------- 5. the eligibility cards */
.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;
}
/* --------------------------------------- 6. the course section, all of it */
.course-section .section-label {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 22.4px !important;
letter-spacing: 0.3px !important;
}
.course-section .section-heading > h2 {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 30px !important;
font-weight: 700 !important;
line-height: 36px !important;
letter-spacing: normal !important;
}
.course-sidebar-title {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 23px !important;
font-weight: 700 !important;
line-height: 36.8px !important;
}
.course-tab-text small {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 14.4px !important;
}
.course-tab-text strong {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 21.6px !important;
}
.course-number {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 24px !important;
}
.course-section .selected-label {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 19.2px !important;
letter-spacing: 0.5px !important;
}
.course-section .selected-title {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 27px !important;
font-weight: 700 !important;
line-height: 33.75px !important;
}
.year-title {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 24px !important;
}
.course-module-list span {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 25.6px !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;
}
}
/* ============================================================================
THE ELIGIBILITY SECTION GOES FULL WIDTH - THIS SECTION ONLY
---------------------------------------------------------------------------
Measured at a 1648px viewport before this block, every container on the
page against the header:
.main-header .container-fluid L 134.0 R 1514.0 w 1380.0
.eligibility-section > .container L 134.0 R 1514.0 w 1380.0
.course-section > .section-heading L 134.0 R 1514.0 w 1380.0
.odlcf-cta-in L 134.0 R 1514.0 w 1380.0
All four identical, all four carrying margin 134px left and right. The
143.2px seen in the browser's box model is that auto margin resolved to
its used value at a 1666.4px viewport - (1666.4 - 1380) / 2 = 143.2 - and
it is the header's own margin, not a fault.
The instruction was to remove it from the eligibility section and let that
section go full width. That is what is done here.
.eligibility-section > .container
width 100%
max-width none
margin-left 0
margin-right 0
THE CONSEQUENCE, STATED PLAINLY SO IT IS NOT A SURPRISE
This section will now be wider than the header, wider than the footer, and
wider than the course section directly below it. Measured after, at 1648px:
eligibility container L 0.0 R 1648.0 w 1648.0
header container L 134.0 R 1514.0 w 1380.0
so the eligibility cards will sit flush against the window edges with no
gutter at all on either side. That is what "full width" means here, and it
is why the four containers above no longer agree. They were put on this
ladder deliberately and this is what undoing it looks like; it is written
as one section so it is one line to reverse.
NOTHING ELSE IS NAMED
.course-section > .section-heading, .course-module-wrapper and .odlcf-cta-in
are not touched - they keep the ladder and keep matching the header. The
eligibility section's own padding is already 70px 0, vertical only, so no
horizontal padding has to be removed and none is removed. The banner is
not touched. No other page is touched.
The width is set at all four of the ladder's breakpoints rather than only
above 1200px, so the section does not jump back to a percentage the moment
the window is narrowed.
============================================================================ */
.eligibility-section > .container {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
@media screen and (max-width: 1199px) {
.eligibility-section > .container {
width: 100% !important;
max-width: none !important;
}
}
@media screen and (max-width: 767px) {
.eligibility-section > .container {
width: 100% !important;
max-width: none !important;
}
}
@media screen and (max-width: 480px) {
.eligibility-section > .container {
width: 100% !important;
max-width: none !important;
}
}
/* ============================================================================
ADVANCED 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;
}
/* ==========================================================================
ELIGIBILITY CRITERIA - CARD WIDTH MADE THE SAME AS THE OTHER TWO
PARAMEDICAL PAGES
-------------------------------------------------------------------------
Measured on all three pages at 1440px, every grid is identical except this
one:
grid cert / diploma advanced diploma
odlcf-ds-grid 4 gap 20 1308.2 4 gap 20 1308.2
odlcf-st-grid 2 gap 30 1308.2 2 gap 30 1308.2
eligibility-grid 4 gap 20 1240 5 gap 24 1422
card width 295.0 265.2
So only this page ran five across with a 24px gap and no width cap, and
its cards came out 30px narrower than the same cards on the pages either
side of it. Four rules were doing that:
.eligibility-grid { width: min(1400px, 92%);
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px; }
@media (max-width: 1100px) { ... repeat(3, ...) gap: 20px }
@media (max-width: 800px) { ... repeat(2, ...) }
@media (max-width: 550px) { ... 1fr, gap: 18px }
.eligibility-section .eligibility-grid { width: 100% !important;
max-width: none !important; }
The values below are copied out of para-certificateprogrammes-6months.css,
which carries the same block, rather than retyped:
.eligibility-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 991px) { .eligibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 575px) { .eligibility-grid { grid-template-columns: 1fr; gap: 15px; }
THE WIDTH, SO A 100% WIDE, 90% WIDE OR UNSET GRID ALL END UP
THE SAME. The page already pins width to 100% with !important at every
width, which is why the max-width: 90% at 550px has never shown up. Only
the cap is missing, and that is the one declaration needing !important,
because the rule above already uses it on this same selector.
FIVE CARDS IN FOUR COLUMNS
This page has five criteria where the other two have four, so the fifth
card wraps onto a second row. That is the price of the same card width -
five cards at 295px with 20px between them need 1555px, and the shared
width is 1240px. Nothing is hidden and no card is removed.
--------------------------------------------------------------------------
NOTHING ELSE IS TOUCHED
Grid columns, gap and the width cap only. No card, no icon, no number, no
heading, no text, no colour, no padding, no min-height, and no rule that
belongs to any other section on the page. The markup is not opened.
========================================================================== */
/* copied from para-certificateprogrammes-6months.css */
.eligibility-section .eligibility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
max-width: 1240px !important;
}
@media (max-width: 991px) {
.eligibility-section .eligibility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media (max-width: 575px) {
.eligibility-section .eligibility-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
/* ==========================================================================
FIVE CARDS IN ONE ROW
-------------------------------------------------------------------------
One declaration: grid-template-columns, from 992px up.
This page has five criteria where the Certificate and Diploma pages have
four, so matching their four-across grid left the fifth alone on a second
row:
1920 4 across, rows of 4 + 1, card 295 wide, heights 214 214 214 214 189
1440 4 across, rows of 4 + 1, card 295 wide, heights 214 214 214 214 189
1024 4 across, rows of 4 + 1, card 241 wide, heights 241 241 241 241 189
Five across inside the same 1240px cap, measured before writing anything:
viewport grid card width card height rows
1920 1240.0 232.0 241.2 1
1440 1240.0 232.0 241.2 1
1200 1200.0 224.0 266.8 1
1024 1024.0 188.8 292.4 1
991 991.0 486.5 188.6 3 (unchanged, 2 across)
All five come out the same height in every row, which the four-across grid
could not do - the orphan card sat at 189 against 214. That is the height
change. The width falls from 295 to 232 because five cards and four 20px
gaps have to share the same 1240px the other two pages use, and that cap is
left alone so the section keeps lining up with its neighbours.
WHY 992px AND NOT LOWER
991px is where the shared grid turns to two across. Below that this section
already matches the Certificate and Diploma pages exactly, and five cards in
one row on a 390px phone would put each one at about 65px. So the band stops
where theirs starts.
It is written as min-width: 992px rather than editing the 4-across block,
because that block also carries gap: 20px and the 1240px cap, and the
991px block below it still has to win from 991 down. Later in the file at the
same specificity, so between 992 and 1199 this is the one that applies.
--------------------------------------------------------------------------
ONE DECLARATION, NOTHING ELSE
No gap, no max-width, no padding, no min-height, no radius, no colour, no
font, no icon, no number, no heading, no body text, and no rule belonging to
any other section. The markup is not opened. The Certificate and Diploma
pages are not touched and keep their four-across grid.
NOTE, PRE-EXISTING, NOT TOUCHED: .eligibility-icon-wrap reports a scroll
width of 77 against a client width of 64 on all three Paramedical pages,
because the ring around the icon is drawn wider than its box on purpose and
the box is overflow: visible. It is the decorative ring, not clipped text,
and the document has no horizontal overflow at any width.
========================================================================== */
@media (min-width: 992px) {
.eligibility-section .eligibility-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* ==========================================================================
ELIGIBILITY CONTAINER WIDTH LADDER RESTORED
-------------------------------------------------------------------------
The section was running full bleed on this page and nowhere else. Measured
.eligibility-section > .container on all three Paramedical pages:
viewport cert / diploma advanced diploma
1920 1380.0 1920.0 no gutter at all
1440 1324.8 1440.0
1280 1177.6 1280.0
1200 1104.0 1200.0
1024 962.5 1024.0
768 721.9 768.0
390 358.8 390.0
Four rules were doing it, each on the same selector as the ladder and each
carrying !important, so they won at every width:
.eligibility-section > .container { width: 100% !important;
max-width: none !important; }
and the same three declarations again inside max-width 1199, 767 and 480
A fifth rule then zeroed the side margins, which is why the section sat hard
against the left edge rather than being centred:
.eligibility-section > .container { margin-left: 0 !important;
margin-right: 0 !important; }
This file already asked for auto margins earlier on the same selector - it
is paired with width: 92% on a rule naming .course-section > .section-heading
- so auto is the page's own intention and the zeroing came after it. Both are
restored below rather than worked around.
The ladder they were overriding was already in this file, on a selector
that also named .course-section > .section-heading:
.eligibility-section > .container, .course-section > .section-heading
{ width: 92% !important; max-width: 1380px !important; }
It could not be revived by editing that rule, because the second half of the
selector belongs to a different section that must not move. So the ladder
is restated here on .eligibility-section > .container alone, copied out of
para-certificateprogrammes-6months.css rather than retyped:
(top level) 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) width: 94% !important;
@media screen and (max-width: 767px) width: 90% !important;
@media screen and (max-width: 480px) width: 92% !important;
!important is used because every rule being beaten already uses it on this
same selector. Later in the file, same specificity, so it takes precedence.
margin-left and margin-right are restored to auto because a rule further
down this same file had zeroed them. The reference rule carries them
too, so this is the reference value, not an addition.
Measured centring after the change, against the reference pages:
1920 left 270.0 right 270.0 on both
1200 left 48.0 right 48.0 on both
768 left 23.0 right 23.0 on both
390 left 15.6 right 15.6 on both
RESULT, MEASURED ACROSS SEVENTEEN WIDTHS
viewport cert / diploma advanced, before -> after
1920 cont 1380.0 1920.0 -> 1380.0
1440 cont 1324.8 1440.0 -> 1324.8
1280 cont 1177.6 1280.0 -> 1177.6
1200 cont 1104.0 1200.0 -> 1104.0
1024 cont 962.5 1024.0 -> 962.5
768 cont 721.9 768.0 -> 721.9
390 cont 358.8 390.0 -> 358.8
The container and the grid inside it now measure the same as the other two
pages at every width, so this section's left and right edges line up with
them. The individual card is still narrower than on those pages, and should
be: there are five of them here and four there, which is the one-row layout
asked for.
--------------------------------------------------------------------------
NOTHING ELSE
Four rules, on .eligibility-section > .container only. .course-section,
.course-modules-section and .section-heading are not named anywhere here and
do not move - measured after the change they still sit at left 270 / width
1380 at 1920, exactly as before. No padding, no colour, no font, no card, no
icon, no heading, no body text. The five-across grid set earlier is untouched
and still caps at 1240px. The markup is not opened.
========================================================================== */
.eligibility-section > .container {
width: 92% !important;
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media screen and (max-width: 1199px) {
.eligibility-section > .container {
width: 94% !important;
}
}
@media screen and (max-width: 767px) {
.eligibility-section > .container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.eligibility-section > .container {
width: 92% !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;
}
}