/*========================== 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; } } /* ========================================================= PROCESSING FEE HERO ========================================================= */ .processing-fee { width: 100%; min-height: 455px; position: relative; overflow: hidden; background: #062d5c; font-family: Arial, Helvetica, sans-serif; } /* ========================================================= MAIN BANNER ========================================================= */ .processing-fee-inner { width: 100%; min-height: 455px; position: relative; overflow: hidden; display: flex; align-items: center; } /* ========================================================= LEFT CONTENT ========================================================= */ .processing-fee-content { width: 52%; position: relative; z-index: 5; padding: 65px 40px 65px 7%; color: #ffffff; } /* ========================================================= LABEL ========================================================= */ .processing-fee-label { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(83, 119, 205, 0.35); border: 1px solid rgba(180, 204, 255, 0.35); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .processing-fee-label i { font-size: 13px; } /* ========================================================= HEADING ========================================================= */ .processing-fee-content h3 { margin: 0; max-width: 600px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; font-weight: 700; letter-spacing: -1.5px; } .processing-fee-content h3 span { color: #a9c7ff; } /* ========================================================= SMALL LINE ========================================================= */ .processing-fee-line { width: 36px; height: 3px; margin: 24px 0 20px; background: #ffffff; border-radius: 10px; } /* ========================================================= DESCRIPTION ========================================================= */ .processing-fee-content p { max-width: 480px; margin: 0; color: #e5edfb; font-size: 16px; line-height: 1.75; text-align: justify; } /* ========================================================= RIGHT IMAGE AREA ========================================================= */ .processing-fee-image { width: 58%; right: 0; clip-path: ellipse(70% 90% at 72% 50%); } .processing-fee-image::before { left: -32%; width: 58%; } /* ========================================================= IMAGE ========================================================= */ .processing-fee-image-circle { width: 100%; height: 100%; position: relative; overflow: hidden; border-left: none; background: #dce9fa; } .processing-fee-image-circle img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.7s ease; } /* ========================================================= DARK BLUE CURVE ========================================================= */ .processing-fee-image::before { content: ""; position: absolute; top: -10%; left: -28%; width: 55%; height: 120%; z-index: 3; border-radius: 50%; background: #062d5c; } /* ========================================================= TOP DECORATIVE DOTS ========================================================= */ .processing-fee-dots { position: absolute; top: 20px; left: 28px; width: 75px; height: 75px; z-index: 6; background-image: radial-gradient( circle, rgba(155, 190, 255, 0.75) 1.5px, transparent 1.5px ); background-size: 12px 12px; opacity: 0.55; } /* ========================================================= DECORATIVE RINGS ========================================================= */ .processing-fee-ring { position: absolute; z-index: 4; border: 1px solid rgba(155, 190, 255, 0.28); border-radius: 50%; pointer-events: none; } .processing-fee-ring-top { width: 125px; height: 125px; top: -45px; left: 47%; } .processing-fee-ring-top::before, .processing-fee-ring-top::after { content: ""; position: absolute; border: 1px solid rgba(155, 190, 255, 0.22); border-radius: 50%; } .processing-fee-ring-top::before { inset: 15px; } .processing-fee-ring-top::after { inset: 30px; } /* ========================================================= BOTTOM RING ========================================================= */ .processing-fee-ring-bottom { width: 150px; height: 150px; bottom: -80px; left: -70px; border: 3px solid rgba(155, 190, 255, 0.75); } .processing-fee-ring-bottom::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(155, 190, 255, 0.25); border-radius: 50%; } /* ========================================================= RESPONSIVE - LARGE TABLET ========================================================= */ @media (max-width: 1199px) { .processing-fee, .processing-fee-inner { min-height: 430px; } .processing-fee-content { padding-left: 6%; } .processing-fee-content h1 { font-size: 50px; } .processing-fee-content p { max-width: 430px; font-size: 14px; } } /* ========================================================= RESPONSIVE - TABLET ========================================================= */ @media (max-width: 991px) { .processing-fee, .processing-fee-inner { min-height: 390px; } .processing-fee-content { width: 55%; padding: 50px 25px 50px 5%; } .processing-fee-content h1 { font-size: 42px; } .processing-fee-label { margin-bottom: 18px; padding: 8px 15px; font-size: 10px; } .processing-fee-line { margin: 18px 0 15px; } .processing-fee-content p { max-width: 360px; font-size: 12px; line-height: 1.65; } .processing-fee-image { width: 57%; } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 767px) { .processing-fee { min-height: auto; background: #062d5c; } .processing-fee-inner { min-height: auto; display: flex; flex-direction: column; align-items: stretch; } /* IMAGE */ .processing-fee-image { position: relative; top: auto; right: auto; order: 1; width: 100%; height: 260px; clip-path: none; } .processing-fee-image-circle { border-left: none; border-bottom: 6px solid #a9c7ff; } .processing-fee-image::before { display: none; } /* CONTENT */ .processing-fee-content { order: 2; width: 100%; padding: 38px 25px 50px; } .processing-fee-content h1 { font-size: 34px; line-height: 1.12; letter-spacing: -0.5px; } .processing-fee-content p { max-width: 100%; font-size: 13px; } /* LABEL */ .processing-fee-label { margin-bottom: 17px; padding: 8px 14px; font-size: 10px; } /* DECORATIONS */ .processing-fee-dots { top: 15px; left: 18px; width: 55px; height: 55px; background-size: 9px 9px; } .processing-fee-ring-top { top: 15px; right: 20px; left: auto; width: 85px; height: 85px; } .processing-fee-ring-bottom { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .processing-fee-image { height: 220px; } .processing-fee-content { padding: 32px 20px 42px; } .processing-fee-content h1 { font-size: 29px; } .processing-fee-content p { font-size: 12px; line-height: 1.7; } .processing-fee-line { width: 30px; height: 3px; margin: 16px 0; } } /* ========================================================= PURPOSE OF PROCESSING FEE ========================================================= */ .processing-purpose { width: 100%; max-width: 1440px; margin: 0 auto; padding: 70px 0; background: #f7faff; box-sizing: border-box; } /* ========================================================= MAIN WRAPPER ========================================================= */ .processing-purpose-inner { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: stretch; } /* ========================================================= LEFT IMAGE ========================================================= */ .processing-purpose-image { position: relative; min-height: 290px; border-radius: 18px; overflow: hidden; background: #eaf2fa; box-shadow: 0 8px 25px rgba(6, 45, 92, 0.08); } .processing-purpose-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.4s ease; } .processing-purpose-image:hover img { transform: scale(1.03); } /* Image bottom label */ .processing-purpose-image-label { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; color: #ffffff; background: rgba(6, 45, 92, 0.92); border-radius: 8px; font-size: 13px; font-weight: 600; backdrop-filter: blur(5px); } .processing-purpose-image-label i { font-size: 15px; } /* ========================================================= RIGHT CONTENT CARD ========================================================= */ .processing-purpose-card { position: relative; padding: 28px 32px; background: #ffffff; border: 1px solid #e4edf7; border-radius: 18px; box-shadow: 0 8px 25px rgba(6, 45, 92, 0.07); box-sizing: border-box; overflow: hidden; } /* Small decorative circle */ .processing-purpose-card::after { content: ""; position: absolute; right: -60px; bottom: -65px; width: 170px; height: 170px; background: rgba(6, 45, 92, 0.035); border-radius: 50%; pointer-events: none; } /* ========================================================= HEADING ========================================================= */ .processing-purpose-heading { position: relative; z-index: 2; margin-bottom: 20px; } .processing-purpose-label { display: block; margin-bottom: 5px; color: #1677e8; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; } .processing-purpose-heading h2 { margin: 0; color: #062d5c; font-size: 27px; line-height: 1.25; font-weight: 700; } .processing-purpose-line { width: 55px; height: 3px; margin-top: 10px; background: #1677e8; border-radius: 10px; } /* ========================================================= PURPOSE LIST ========================================================= */ .processing-purpose-list { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 9px; } /* ========================================================= PURPOSE ITEM ========================================================= */ .processing-purpose-item { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 7px 10px; border-radius: 8px; transition: background 0.25s ease, transform 0.25s ease; } .processing-purpose-item:hover { background: #f3f7fc; transform: translateX(3px); } /* ========================================================= ICON ========================================================= */ .processing-purpose-icon { flex: 0 0 27px; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #062d5c; border-radius: 50%; } .processing-purpose-icon i { font-size: 13px; } /* ========================================================= TEXT ========================================================= */ .processing-purpose-item span { color: #273d55; font-size: 15px; line-height: 1.45; font-weight: 500; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .processing-purpose { padding: 40px 4% 50px; } .processing-purpose-inner { grid-template-columns: 1fr; max-width: 700px; } .processing-purpose-image { min-height: 250px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .processing-purpose { padding: 35px 20px 45px; } .processing-purpose-inner { gap: 18px; } .processing-purpose-image { min-height: 210px; border-radius: 14px; } .processing-purpose-card { padding: 23px 18px; border-radius: 14px; } .processing-purpose-heading { margin-bottom: 17px; } .processing-purpose-heading h2 { font-size: 23px; } .processing-purpose-list { gap: 7px; } .processing-purpose-item { gap: 10px; padding: 6px 4px; } .processing-purpose-icon { flex: 0 0 25px; width: 25px; height: 25px; } .processing-purpose-icon i { font-size: 12px; } .processing-purpose-item span { font-size: 14px; } .processing-purpose-image-label { left: 12px; bottom: 12px; padding: 7px 11px; font-size: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .processing-purpose { padding-left: 15px; padding-right: 15px; } .processing-purpose-card { padding: 20px 15px; } .processing-purpose-heading h2 { font-size: 21px; } .processing-purpose-item span { font-size: 13px; } } /* ========================================================= PROCESSING FEE STRUCTURE ========================================================= */ .processing-fee-structure { width: 100%; padding: 70px 0; background: #f7faff; box-sizing: border-box; } /* ========================================================= SECTION HEADING ========================================================= */ .processing-fee-heading { text-align: center; margin-bottom: 42px; } .processing-fee-heading > span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: #1677e8; } .processing-fee-heading h2 { margin: 0; color: #062d5c; font-size: 32px; line-height: 1.2; font-weight: 700; } .processing-fee-heading-line { position: relative; width: 100px; height: 4px; margin: 15px auto 0; background: #1677e8; border-radius: 10px; } .processing-fee-heading-line::before, .processing-fee-heading-line::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; background: #1677e8; border-radius: 50%; transform: translateY(-50%); } .processing-fee-heading-line::before { left: -12px; } .processing-fee-heading-line::after { right: -12px; } /* ========================================================= CARDS WRAPPER ========================================================= */ .processing-fee-cards { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* ========================================================= FEE CARD ========================================================= */ .processing-fee-card { position: relative; display: flex; align-items: center; min-height: 165px; padding: 28px 34px; background: #ffffff; border: 1px solid #e4edf7; border-radius: 18px; box-shadow: 0 8px 25px rgba(6, 45, 92, 0.08); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .processing-fee-card::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; background: rgba(22, 119, 232, 0.05); border-radius: 50%; } .processing-fee-card:hover { transform: translateY(-5px); box-shadow: 0 14px 35px rgba(6, 45, 92, 0.13); } /* ========================================================= ICON ========================================================= */ .processing-fee-icon { flex: 0 0 78px; width: 78px; height: 78px; margin-right: 25px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #062d5c; border-radius: 50%; box-shadow: 0 8px 18px rgba(6, 45, 92, 0.20); } .processing-fee-icon i { font-size: 35px; } /* ========================================================= CARD CONTENT ========================================================= */ .processing-fee-card-content { position: relative; z-index: 2; } .processing-fee-card-content h3 { margin: 0 0 8px; color: #062d5c; font-size: 21px; line-height: 1.2; font-weight: 700; } .processing-fee-card-content h3 span { display: block; margin-top: 2px; font-size: 18px; } .processing-fee-card-content p { margin: 0 0 12px; color: #34495e; font-size: 16px; line-height: 1.5; font-weight: 600; } /* ========================================================= FEE AMOUNT ========================================================= */ .processing-fee-amount { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; color: #ffffff; background: #062d5c; border-radius: 5px; font-size: 16px; line-height: 1; font-weight: 700; } .processing-fee-amount span { font-size: 13px; font-weight: 600; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .processing-fee-structure { padding: 55px 5%; } .processing-fee-cards { grid-template-columns: 1fr; max-width: 700px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .processing-fee-structure { padding: 45px 20px; } .processing-fee-heading { margin-bottom: 30px; } .processing-fee-heading h2 { font-size: 27px; } .processing-fee-heading > span { font-size: 12px; } .processing-fee-card { min-height: auto; padding: 25px 20px; align-items: flex-start; } .processing-fee-icon { flex: 0 0 60px; width: 60px; height: 60px; margin-right: 17px; } .processing-fee-icon i { font-size: 27px; } .processing-fee-card-content h3 { font-size: 18px; } .processing-fee-card-content h3 span { font-size: 16px; } .processing-fee-card-content p { font-size: 14px; } .processing-fee-amount { font-size: 14px; padding: 7px 10px; } .processing-fee-amount span { font-size: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .processing-fee-card { padding: 22px 16px; } .processing-fee-icon { flex: 0 0 52px; width: 52px; height: 52px; margin-right: 13px; } .processing-fee-icon i { font-size: 23px; } .processing-fee-card-content h3 { font-size: 17px; } .processing-fee-card-content h3 span { font-size: 15px; } } /* ========================================================= TERMS & CONDITIONS ========================================================= */ .terms-section { width: 100%; max-width: 1440px; margin: 0 auto; padding: 50px 4% 60px; background: #f7faff; box-sizing: border-box; } /* ========================================================= CONTAINER ========================================================= */ .terms-container { width: 100%; max-width: 1180px; margin: 0 auto; } /* ========================================================= HEADING ========================================================= */ .terms-heading { text-align: center; margin-bottom: 30px; } .terms-heading > span { display: block; margin-bottom: 5px; color: #1677e8; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; } .terms-heading h2 { margin: 0; color: #062d5c; font-size: 30px; line-height: 1.25; font-weight: 700; } /* Heading line */ .terms-heading-line { position: relative; width: 90px; height: 3px; margin: 11px auto 0; background: #1677e8; border-radius: 10px; } .terms-heading-line::before, .terms-heading-line::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; background: #1677e8; border-radius: 50%; transform: translateY(-50%); } .terms-heading-line::before { left: -11px; } .terms-heading-line::after { right: -11px; } /* ========================================================= TERMS GRID ========================================================= */ .terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* ========================================================= TERMS CARD ========================================================= */ .terms-card { position: relative; display: flex; align-items: flex-start; gap: 18px; min-height: 185px; padding: 20px 22px; background: #ffffff; border: 1px solid #e5edf6; border-radius: 15px; box-shadow: 0 6px 20px rgba(6, 45, 92, 0.07); box-sizing: border-box; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Decorative bottom circle */ .terms-card::after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 125px; height: 125px; background: rgba(6, 45, 92, 0.035); border-radius: 50%; pointer-events: none; } .terms-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(6, 45, 92, 0.11); } /* ========================================================= ICON ========================================================= */ .terms-icon { position: relative; z-index: 2; flex: 0 0 70px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; color: #062d5c; background: #edf4ff; border-radius: 50%; } .terms-icon i { font-size: 31px; } /* ========================================================= CONTENT ========================================================= */ .terms-content { position: relative; z-index: 2; flex: 1; } .terms-content h3 { margin: 0 0 10px; color: #062d5c; font-size: 19px; line-height: 1.25; font-weight: 700; } .terms-intro { margin: -3px 0 7px; color: #34495e; font-size: 14px; line-height: 1.45; } /* ========================================================= LIST ========================================================= */ .terms-content ul { list-style: none; margin: 0; padding: 0; } .terms-content li { position: relative; margin-bottom: 7px; padding-left: 20px; color: #34495e; font-size: 14px; line-height: 1.5; } .terms-content li:last-child { margin-bottom: 0; } /* Check icon */ .terms-content li::before { content: "\f26a"; position: absolute; left: 0; top: 2px; font-family: "bootstrap-icons"; color: #062d5c; font-size: 13px; font-weight: 700; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .terms-section { padding: 45px 4% 50px; } .terms-grid { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .terms-section { padding: 40px 20px 45px; } .terms-heading { margin-bottom: 25px; } .terms-heading h2 { font-size: 25px; } .terms-grid { gap: 14px; } .terms-card { min-height: auto; padding: 18px; gap: 14px; border-radius: 13px; } .terms-icon { flex: 0 0 55px; width: 55px; height: 55px; } .terms-icon i { font-size: 25px; } .terms-content h3 { font-size: 17px; margin-bottom: 8px; } .terms-content li { font-size: 13px; padding-left: 18px; margin-bottom: 6px; } .terms-intro { font-size: 13px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .terms-section { padding-left: 15px; padding-right: 15px; } .terms-card { padding: 16px; gap: 12px; } .terms-icon { flex: 0 0 48px; width: 48px; height: 48px; } .terms-icon i { font-size: 22px; } .terms-content h3 { font-size: 16px; } .terms-content li { font-size: 12.5px; } } /* ========================================================= COMMON INFORMATION SECTIONS ========================================================= */ .info-section { width: 100%; padding: 45px 4%; background: #f7faff; box-sizing: border-box; } .info-container { width: 100%; max-width: 1180px; margin: 0 auto; } /* ========================================================= SECTION HEADING ========================================================= */ .info-heading { text-align: center; margin-bottom: 28px; } .info-heading > span { display: block; margin-bottom: 5px; color: #1677e8; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; } .info-heading h2 { margin: 0; color: #062d5c; font-size: 30px; line-height: 1.25; font-weight: 700; } /* ========================================================= HEADING LINE ========================================================= */ .info-heading-line { position: relative; width: 90px; height: 3px; margin: 11px auto 0; background: #1677e8; border-radius: 10px; } .info-heading-line::before, .info-heading-line::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; background: #1677e8; border-radius: 50%; transform: translateY(-50%); } .info-heading-line::before { left: -11px; } .info-heading-line::after { right: -11px; } /* ========================================================= MAIN INFORMATION CARD ========================================================= */ .info-card { position: relative; display: flex; align-items: flex-start; gap: 22px; width: 100%; padding: 26px 30px; background: #ffffff; border: 1px solid #e4edf7; border-radius: 16px; box-shadow: 0 7px 24px rgba(6, 45, 92, 0.07); box-sizing: border-box; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .info-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6, 45, 92, 0.11); } /* ========================================================= DECORATIVE CIRCLE ========================================================= */ .info-card::after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 130px; height: 130px; background: rgba(6, 45, 92, 0.035); border-radius: 50%; pointer-events: none; } /* ========================================================= ICON ========================================================= */ .info-card-icon { position: relative; z-index: 2; flex: 0 0 70px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #062d5c; border-radius: 50%; box-shadow: 0 7px 18px rgba(6, 45, 92, 0.18); } .info-card-icon i { font-size: 29px; } /* ========================================================= CONTENT ========================================================= */ .info-card-content { position: relative; z-index: 2; flex: 1; } .info-card-content p { margin: 0; } .info-intro { margin-bottom: 12px !important; color: #405a76; font-size: 16px; line-height: 1.6; } .info-note { margin-top: 12px !important; color: #405a76; font-size: 16px; line-height: 1.6; } /* ========================================================= CHECK LIST ========================================================= */ .info-card-content ul { list-style: none; margin: 0; padding: 0; } .info-card-content ul li { position: relative; margin-bottom: 10px; padding-left: 25px; color: #405a76; font-size: 16px; line-height: 1.55; } .info-card-content ul li:last-child { margin-bottom: 0; } .info-card-content ul li::before { content: "\f26a"; position: absolute; left: 0; top: 3px; font-family: "bootstrap-icons"; color: #062d5c; font-size: 14px; font-weight: 700; } /* ========================================================= NUMBERED LIST ========================================================= */ .number-list { margin: 0; padding-left: 25px; color: #405a76; font-size: 16px; line-height: 1.6; } .number-list li { padding-left: 5px; margin-bottom: 9px; } .number-list li:last-child { margin-bottom: 0; } .number-list strong, .info-card-content strong { color: #344d68; font-weight: 700; } /* ========================================================= VALIDITY CARD ========================================================= */ .validity-card { padding-top: 25px; padding-bottom: 25px; } /* ========================================================= DECLARATION ========================================================= */ .declaration-section { padding-bottom: 60px; } .declaration-card { background: #eef8fc; border-color: #dcecf4; box-shadow: none; } .declaration-card::after { background: rgba(6, 45, 92, 0.025); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .info-section { padding: 40px 4%; } .info-card { padding: 24px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .info-section { padding: 35px 20px; } .info-heading { margin-bottom: 22px; } .info-heading > span { font-size: 11px; } .info-heading h2 { font-size: 25px; line-height: 1.3; } .info-heading-line { width: 75px; margin-top: 9px; } .info-card { flex-direction: column; gap: 16px; padding: 20px; border-radius: 14px; } .info-card-icon { flex: 0 0 58px; width: 58px; height: 58px; } .info-card-icon i { font-size: 24px; } .info-intro { font-size: 15px; } .info-note { font-size: 15px; } .info-card-content ul li { font-size: 15px; padding-left: 22px; margin-bottom: 9px; } .number-list { font-size: 15px; padding-left: 22px; } .number-list li { margin-bottom: 9px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .info-section { padding-left: 15px; padding-right: 15px; } .info-card { padding: 17px; } .info-heading h2 { font-size: 23px; } .info-card-content ul li, .number-list, .info-intro, .info-note { font-size: 14px; } } /* ============================================================================ STUDENT PROCESSING FEE POLICY: THE BANNER, EXACTLY AS THE CENTRE PROCESSING FEE POLICY BANNER NOW READS --------------------------------------------------------------------------- This page's banner carries the same class names as the centre processing fee policy banner, at the same line numbers in this file, so it is the same set of rules. Nothing on any other page is touched by this block and nothing in this page's PHP is touched at all. MEASURED AT A 1342px VIEWPORT BEFORE THIS BLOCK header .container-fluid L 53.7 R 1288.3 w 1234.6 logo L 53.7 banner h 634.5 bg rgb(6, 45, 92) The banner is 634.5 tall rather than the 455.0 the centre processing page carries, because this one holds two paragraphs instead of one. That is the page's own content and it is not touched; it is recorded here because the photograph below is measured against it. --------------------------------------------------------------------------- 1. THE BANNER'S TYPE this page, before the centre processing page, now ------------------------------------------------------------------------ the label 12px/20.8px w700 ls 0.5px 16px/1.3 w700 ls 0.3px fill rgba(83,119,205,.35) fill rgba(255,255,255,.1) no border border 1px rgba(255,255,255,.35) the title Arial 60.39px/65.22px Roboto, Arial 40px/1.08 w700, not uppercased w800 ls -1px UPPERCASE its span already rgb(169,199,255) #A9C7FF - unchanged the text 16px/28px w400 16px/1.75 w400 ls normal ls 0.2px rgb(229,237,251) rgba(255,255,255,.9) --------------------------------------------------------------------------- 2. THE BANNER'S GUTTER The label sat at L 93.9 against a logo at L 53.7 - a DELTA of +40.3 - for the same reason as on the other page: the content column's own left padding, 7% of the section here, which at 1342 is 93.94px. .processing-fee-content padding-left max(4%, 50% - 690px) 3% at 1199 and below, 5% at 767, 4% at 480 4% of 1342 is 53.68, which is the logo's edge exactly. The gutter goes on the content column and not on .processing-fee-inner, because the inner is display:flex with the picture at 58% and padding there would shrink the picture rather than move the text. --------------------------------------------------------------------------- 3. THE DECORATION, HIDDEN .processing-fee-dots 75 x 75 dot grid, top left .processing-fee-ring-top 125 x 125, with two more rings inside it .processing-fee-ring-bottom 150 x 150, with one more inside it .processing-fee-ring the 1px base both inherit from All four were display:block and visible. They are hidden rather than deleted - display:none and nothing else - so they stay in the PHP and can be brought back by one line. .processing-fee-image::before is NOT hidden. It is not decoration: it is the navy sweep the photograph sits against, a 50% border-radius oval at top -10% and height 120% of the picture column in the banner's own colour, and removing it would leave a hard rectangular join where the curve is. --------------------------------------------------------------------------- 4. THE PHOTOGRAPH TO THE TOP AND THE BOTTOM EDGES Measured at 1342px before this block: .processing-fee-inner h 634.5 .processing-fee-image h 355.2 a static flex item .processing-fee-image-circle h 355.2 The photograph was 279.3px short of the banner's height - 139.6px of navy above it and 139.6px below. The cause is that .processing-fee-inner is display:flex with align-items:center, so the picture column is centred and sized to its own content instead of stretched, and the circle is height:100% of a box that was already too short. .processing-fee-image align-self stretch which takes it to the full 634.5px, and the circle's own height:100% then carries the photograph to both edges. THE IMAGE SHAPE IS KEPT EXACTLY .processing-fee-image carries clip-path: ellipse(70% 90% at 72% 50%) and it is not changed - that clip is what gives the photograph its curved left side, and stretched to the full height it carries that same curve up to the top and the bottom edges rather than becoming a plain rectangle. images/portal1.png is not named, and neither are its object-fit:cover or its object-position:center. Only the column's alignment changes, so the picture is scaled by its own rules exactly as it was. Below 991px this page's layout stacks and the photograph becomes a full-width band at the top of the banner, where align-self controls the cross axis and so cannot stretch it vertically. That is the same on the centre processing page and is left as it is. --------------------------------------------------------------------------- 5. TWO SECTIONS CARRY A DEEPER BOTTOM THAN TOP Measured at 1342px, and found while checking the page rather than asked for. Both are the standing rule that a section's padding is the same above and below; the bottoms are brought up to the tops and nothing else moves. .terms-section line 2712 padding 50px 4% 60px 50 / 60 out by 10 line 3013 @media 900px, 45px 4% 50px 45 / 50 out by 5 line 3034 @media 600px, 40px 20px 45px 40 / 45 out by 5 .declaration-section line 3504 padding-bottom 60px .info-section is padding 45px 4%, so the 60 wins and the section measures 45 / 60 - out by 15. This is the fifth .info-section on the page; the other four are 45 / 45 and are not named. Every other section on this page is already equal: .processing-fee 0px / 0px .processing-purpose 70px / 70px .processing-fee-structure 70px / 70px .info-section x4 45px / 45px .odlcf-cta 36px / 36px --------------------------------------------------------------------------- NOT TOUCHED The banner's background is left exactly as it is, rgb(6, 45, 92). Nothing in this block is a background. ============================================================================ */ /* ------------------------------------------------------ 1. the banner's type */ .processing-fee-label { display: inline-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-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } .processing-fee-label i { font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } .processing-fee-content h3 { 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; } .processing-fee-content h3 span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #a9c7ff !important; } .processing-fee-content p { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0.2px !important; color: rgba(255, 255, 255, 0.9) !important; } /* ----------------------------------------------------- 2. the banner's gutter */ .processing-fee-content { padding-left: max(4%, 50% - 690px) !important; } /* --------------------------------------------------- 3. the decoration, hidden */ .processing-fee-dots, .processing-fee-ring, .processing-fee-ring-top, .processing-fee-ring-bottom { display: none !important; } /* ------------------------------------------- 4. the photograph to both edges */ .processing-fee-image { align-self: stretch !important; } /* -------------------------------------- 5. the same padding above and below */ .terms-section { padding: 50px 4% 50px !important; } .declaration-section { padding-bottom: 70px !important; } @media screen and (max-width: 900px) { .terms-section { padding: 45px 4% 45px !important; } .declaration-section { padding-bottom: 40px !important; } } @media screen and (max-width: 600px) { .terms-section { padding: 40px 20px 40px !important; } .declaration-section { padding-bottom: 35px !important; } } /* ============================================================================ THE SAME LADDER THE OTHER BANNER RUNS ON ============================================================================ */ @media screen and (max-width: 1199px) { .processing-fee-content { padding-left: max(3%, 50% - 690px) !important; } .processing-fee-label { gap: 9px !important; padding: 10px 18px !important; margin-bottom: 22px !important; font-size: 15px !important; } .processing-fee-label i { font-size: 15px !important; } .processing-fee-content h3 { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } } @media screen and (max-width: 991px) { .processing-fee-label { gap: 8px !important; padding: 9px 17px !important; margin-bottom: 20px !important; font-size: 14px !important; line-height: 1.35 !important; } .processing-fee-label i { font-size: 14px !important; } .processing-fee-content h3 { font-size: 36px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; } } @media screen and (max-width: 767px) { .processing-fee-content { padding-left: max(5%, 50% - 690px) !important; } .processing-fee-label { gap: 8px !important; padding: 8px 15px !important; margin-bottom: 18px !important; font-size: 13px !important; line-height: 1.35 !important; } .processing-fee-label i { font-size: 13px !important; } .processing-fee-content h3 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; } } @media screen and (max-width: 575px) { .processing-fee-label { gap: 7px !important; padding: 7px 13px !important; margin-bottom: 16px !important; font-size: 12px !important; line-height: 1.4 !important; } .processing-fee-label i { font-size: 12px !important; } .processing-fee-content h3 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -0.6px !important; } } @media screen and (max-width: 480px) { .processing-fee-content { padding-left: max(4%, 50% - 690px) !important; } .processing-fee-label { gap: 6px !important; padding: 6px 12px !important; margin-bottom: 14px !important; font-size: 11px !important; line-height: 1.4 !important; } .processing-fee-label i { font-size: 11px !important; } .processing-fee-content h3 { font-size: 29px !important; } } @media screen and (max-width: 400px) { .processing-fee-content h3 { font-size: 29px !important; line-height: 1.1 !important; letter-spacing: -0.4px !important; } } /* ============================================================================ THE INSIDE OF EVERY SECTION PUT ON THE HEADER AND FOOTER LADDER --------------------------------------------------------------------------- MEASURED AT A 1342px VIEWPORT BEFORE THIS BLOCK, against the header .main-header .container-fluid L 53.7 R 1288.3 w 1234.6 .odlcf-cta-in L 53.7 R 1288.3 w 1234.6 and every wide element inside the sections: .processing-purpose-inner 1180px / 1180px dL 27.3 dR 27.3 .processing-fee-heading 1342px / none dL -53.7 dR -53.7 .processing-fee-cards 1200px / 1200px dL 17.3 dR 17.3 .terms-container 1180px / 1180px dL 27.3 dR 27.3 .info-container x5 1180px / 1180px dL 27.3 dR 27.3 THREE DIFFERENT MECHANISMS, AND ONLY THE HEADER AND THE FOOTER ON THE LADDER ONE. .processing-purpose-inner is capped at 1180px and centred, so it sits 27.3px inside the header's edges. TWO. .processing-fee-heading has no cap at all. At 1342px it is the full 1342px, which puts it 53.7px PAST the header's edges on each side, while the cards beneath it are on a 1200px cap and sit 17.3px inside. So the heading and the cards it introduces do not even share an edge. THREE. .terms-container and .info-container are capped at 1180px, but their sections carry padding: 50px 4% and 45px 4% respectively, so they are additionally inset by 4% of the section. At 1342px that 4% is 53.68px - which happens to be exactly the header's own 4% gutter - so above 1199px the two almost coincide by accident, and below 1199px they do not, because the header's ladder steps to 3% while these sections stay on 4%. WHAT IS DONE The two sections give up their horizontal padding, and all five containers go on the header's ladder, 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 - with their padding zeroed and their margins centred: .processing-purpose-inner .processing-fee-heading .processing-fee-cards .terms-container .info-container .terms-section padding-left 0 padding-right 0 .info-section padding-left 0 padding-right 0 92% of 1342 is 1234.64, which is the header's own width, so every one of them lands on the header's left and right edges at 0.0 on both sides, and so does .odlcf-cta-in, which was already there. THE VERTICAL PADDING IS NOT TOUCHED The 50px of .terms-section and the 45px of .info-section above and below are left exactly as they are. Only the left and the right go. --------------------------------------------------------------------------- WHAT IS DELIBERATELY NOT NAMED .info-card keeps its own 30px of padding. It is a card sitting inside the container, and the container is what has to reach the header's edges, not the card. .info-card-content measures 131.8px in from the header's left edge. That is the card's own icon column beside its text - the card is 825px of container with 30px of padding and an icon to one side of the text - and it is the card's layout, not the section's width. The same applies to .processing-purpose-image, which sits beside .processing-purpose-card on a two-column grid inside the container. The banner is not named. The fee cards' own widths, the terms grid and the number lists inside the cards are not named. ============================================================================ */ /* ------------------------------ 1. the sections give up their side padding */ .terms-section, .info-section { padding-left: 0 !important; padding-right: 0 !important; } /* --------------------------- 2. the five containers onto the header's ladder */ .processing-purpose-inner, .processing-fee-heading, .processing-fee-cards, .terms-container, .info-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) { .processing-purpose-inner, .processing-fee-heading, .processing-fee-cards, .terms-container, .info-container { width: 94% !important; } } @media screen and (max-width: 767px) { .processing-purpose-inner, .processing-fee-heading, .processing-fee-cards, .terms-container, .info-container { width: 90% !important; } } @media screen and (max-width: 480px) { .processing-purpose-inner, .processing-fee-heading, .processing-fee-cards, .terms-container, .info-container { width: 92% !important; } } /* ============================================================================ THE LAST TWO SECTIONS GIVE UP THEIR SIDE PADDING TOO --------------------------------------------------------------------------- Measured at a 1342px viewport after the block before this one, everything was on the header's edges: .processing-purpose-inner 1234.62 dL 0.0 dR 0.0 .processing-fee-heading 1234.6 dL 0.0 dR 0.0 .processing-fee-cards 1234.6 dL 0.0 dR 0.0 .terms-container 1234.62 dL 0.0 dR 0.0 .info-container x5 1234.62 dL 0.0 dR 0.0 .odlcf-cta-in 1234.6 dL 0.0 dR 0.0 Measured at an 882px viewport, four of the six still were, and two were not: .terms-container 829.078 dL 0.0 dR 0.0 .info-container x5 829.078 dL 0.0 dR 0.0 .odlcf-cta-in 829.1 dL 0.0 dR 0.0 .processing-purpose-inner 762.766 dL 33.2 dR 33.2 .processing-fee-heading 746.172 dL 41.5 dR 41.5 .processing-fee-cards 746.172 dL 41.5 dR 41.5 WHY ONLY BELOW 1200px The two containers are on the ladder - 94% at 882, which is 829.08 - and they measure 762.77 and 746.17, which are not that. Their sections take their own horizontal padding first, and the percentage then resolves against what is left: 882 x 4% = 35.28 each side, leaving 811.45 811.45 x 94% = 762.77 <- .processing-purpose-inner 882 x 5% = 44.10 each side, leaving 793.80 793.80 x 94% = 746.17 <- .processing-fee-heading and -cards So the two effects compound: the section's percentage and the container's percentage, both taken out of the same width. Above 1199px these two sections have no side padding at all, which is why 1342px came out at 0.0 and only the narrow widths showed it. My own reporting said all six were on the edges, and that was true only of the width I had measured. WHAT IS DONE .processing-purpose padding-left 0 padding-right 0 .processing-fee-structure padding-left 0 padding-right 0 written once, at the base level with !important. Because this block is last in the file and the declaration carries !important, it beats the file's own 991px, 767px, 600px and 400px rules at every width rather than needing one copy per breakpoint - which is what the two sections already had, and what let the two percentages stack up in the first place. Their vertical padding is not touched: 70px/70px and 40px/50px at this width, exactly as the page's own rules leave them. The same four media-query widths the page already uses - 900px and 600px for .terms-section, 900px and 600px for .info-section - are already handled the same way in the block before this one, which is why those two came out at 0.0 at 882. ============================================================================ */ .processing-purpose, .processing-fee-structure { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================================== BANNER PARAGRAPH UN-JUSTIFIED ON A TABLET ------------------------------------------------------------------------- One declaration: text-align, between 768px and 991px. WHAT WAS WRONG The banner holds a row of the text block and the photograph until 767px: .processing-fee-inner { display: flex; align-items: center } .processing-fee-content { width: 52% } .processing-fee-image { width: 58% } and at 991px down { width: 55% } and { width: 57% } The paragraph inside it is justified and capped at max-width: 360px from 991px down. That leaves a measure of roughly 332px at 768px carrying 16px type. Justified text in a measure that narrow cannot fit its words evenly, so the browser opens up the word spacing to push each line flush to both edges. On this copy it does it very visibly - at 768px the line came out as: is NOT tuition fee, enrolment fee, four short words spread across the full width of the column, while the lines above it sit tight. That is the thing that reads as broken in a screenshot of the banner at a tablet width. MEASURED viewport measure words per line line count banner height 768 331.9 4 4 566 834 362.4 4 4 566 900 393.0 4 4 566 991 435.1 4 4 566 Justifying at that measure gains nothing: the paragraph already breaks to four ragged lines either way, so there is no even edge for justify to produce. It only adds the gaps. Left aligned the same four lines carry normal spacing and the banner stays exactly 566px tall - measured the same before and after, because the line count does not move. -------------------------------------------------------------------------- TABLET ONLY, AND NOTHING ELSE The band is 768px to 991px, which is the same 991px the stylesheet already uses to narrow the text column and the same 767px where the banner stacks. Measured either side of it with this block in place: 1100 justify unchanged 1200 justify unchanged 1440 justify unchanged 1920 justify unchanged 991 left the top of the band 768 left the bottom of the band 767 justify unchanged, banner stacked as before 600 justify unchanged 390 justify unchanged No !important, because the rule being superseded does not use it - this simply comes later in the file at the same specificity. Nothing about the font, size, weight, tracking, line height, padding, width, colour, the photograph, its clip, the badge, the heading or the white rule is touched. information1.php is not opened. ========================================================================== */ @media screen and (min-width: 768px) and (max-width: 991px) { .processing-fee-content p { text-align: left; } }