/*========================== 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; } } /* ========================================================= INSTITUTIONAL FRAMEWORK SECTION ========================================================= */ .framework-section { width: 100%; background: #ffffff; padding: 70px 20px; box-sizing: border-box; } .framework-container { width: min(1320px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 70px; } /* ========================================================= LEFT CONTENT ========================================================= */ .framework-content { width: 100%; } .framework-label { display: inline-block; margin-bottom: 10px; color: #146fe8; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* MAIN HEADING */ .framework-content h2 { margin: 0 0 22px; color: #062d5c; font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -0.4px; } /* PARAGRAPHS */ .framework-content p { margin: 0 0 17px; color: #4b5563; font-size: 16px; line-height: 1.65; font-weight: 400; } .framework-content p:last-child { margin-bottom: 0; } /* IMPORTANT WORDS */ .framework-content strong { color: #243b53; font-weight: 700; } /* ========================================================= RIGHT IMAGE ========================================================= */ .framework-image { width: 100%; position: relative; } .framework-image img { display: block; width: 100%; height: 100%; min-height: 310px; max-height: 360px; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 35px rgba(6, 45, 92, 0.10); } /* ========================================================= SUBTLE IMAGE EFFECT ========================================================= */ .framework-image::after { content: ""; position: absolute; left: 18px; bottom: -10px; width: 90px; height: 5px; background: #146fe8; border-radius: 10px; opacity: 0.9; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 992px) { .framework-section { padding: 55px 24px; } .framework-container { grid-template-columns: 1fr 1fr; gap: 40px; } .framework-content h2 { font-size: 27px; } .framework-content p { font-size: 16px; line-height: 1.6; } .framework-image img { min-height: 300px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .framework-section { padding: 45px 18px; } .framework-container { display: flex; flex-direction: column; gap: 30px; align-items: stretch; } .framework-content { width: 100%; } .framework-label { font-size: 12px; margin-bottom: 8px; } .framework-content h2 { font-size: 25px; line-height: 1.3; margin-bottom: 18px; } .framework-content p { font-size: 16px; line-height: 1.65; margin-bottom: 15px; } .framework-image { width: 100%; } .framework-image img { width: 100%; height: 260px; min-height: 0; max-height: none; border-radius: 14px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .framework-section { padding: 35px 15px; } .framework-container { gap: 25px; } .framework-content h2 { font-size: 23px; line-height: 1.3; } .framework-content p { font-size: 16px; line-height: 1.6; } .framework-image img { height: 220px; border-radius: 12px; } .framework-image::after { left: 12px; bottom: -7px; width: 65px; height: 4px; } } /* ========================================================= GOVERNANCE STRUCTURE ========================================================= */ .governance-section { width: 100%; padding: 70px 20px; background: #ffffff; box-sizing: border-box; } .governance-container { width: min(1320px, 100%); margin: 0 auto; } /* ========================================================= HEADING ========================================================= */ .governance-heading { text-align: center; margin-bottom: 42px; } .governance-label { display: block; margin-bottom: 7px; color: #146fe8; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .governance-heading h2 { margin: 0; color: #062d5c; font-size: 30px; line-height: 1.25; font-weight: 700; } .governance-heading-line { position: relative; width: 70px; height: 4px; margin: 14px auto 0; background: #146fe8; border-radius: 10px; } .governance-heading-line::before, .governance-heading-line::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; background: #146fe8; border-radius: 50%; transform: translateY(-50%); } .governance-heading-line::before { left: -10px; } .governance-heading-line::after { right: -10px; } /* ========================================================= CARD GRID ========================================================= */ .governance-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } /* ========================================================= CARD ========================================================= */ .governance-card { position: relative; min-height: 275px; padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; background: #ffffff; border: 1px solid #e7eef7; border-radius: 16px; box-shadow: 0 8px 24px rgba(6, 45, 92, 0.08); box-sizing: border-box; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* TOP ACCENT */ .governance-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #062d5c; transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; } /* HOVER */ .governance-card:hover { transform: translateY(-8px); border-color: #d4e4f7; box-shadow: 0 18px 40px rgba(6, 45, 92, 0.14); } .governance-card:hover::before { transform: scaleX(1); } /* ========================================================= ICON ========================================================= */ .governance-icon { width: 62px; height: 62px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: #edf4ff; border-radius: 50%; color: #062d5c; font-size: 25px; box-shadow: inset 0 0 0 1px #dce9fa; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .governance-card:hover .governance-icon { background: #062d5c; color: #ffffff; transform: scale(1.06); } /* ========================================================= CARD TITLE ========================================================= */ .governance-card h4 { margin: 0 0 12px; color: #062d5c; font-size: 17px; line-height: 1.35; font-weight: 700; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .governance-card p { margin: 0; color: #5b6777; font-size: 14px; line-height: 1.55; } /* ========================================================= ARROW ========================================================= */ .governance-arrow { margin-top: auto; padding-top: 18px; color: #146fe8; font-size: 18px; transition: transform 0.3s ease, color 0.3s ease; } .governance-card:hover .governance-arrow { color: #062d5c; transform: translateX(6px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .governance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .governance-card { min-height: 260px; } } /* ========================================================= SMALL TABLET ========================================================= */ @media (max-width: 768px) { .governance-section { padding: 50px 18px; } .governance-heading { margin-bottom: 30px; } .governance-heading h2 { font-size: 26px; } .governance-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .governance-card { min-height: 245px; padding: 24px 17px 20px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 520px) { .governance-section { padding: 40px 15px; } .governance-label { font-size: 12px; } .governance-heading h2 { font-size: 24px; line-height: 1.3; } .governance-grid { grid-template-columns: 1fr; gap: 14px; } .governance-card { min-height: auto; padding: 25px 22px; align-items: flex-start; text-align: left; } .governance-icon { width: 55px; height: 55px; margin-bottom: 16px; font-size: 22px; } .governance-card h3 { font-size: 17px; } .governance-card p { font-size: 14px; } .governance-arrow { position: absolute; right: 22px; bottom: 22px; padding: 0; } } /* ========================================================= CENTRE PROCESSING FEE POLICY Primary Blue: #062d5c ========================================================= */ .processing-policy-section { width: 100%; padding: 45px 0; background: #f5f8fc; } .processing-policy-container { width: calc(100% - 120px); max-width: 1500px; margin: 0 auto; background: #ffffff; border: 1px solid #e5edf6; border-radius: 24px; padding: 42px 48px; box-shadow: 0 15px 45px rgba(6, 45, 92, 0.08); position: relative; overflow: hidden; } /* TOP BLUE ACCENT */ .processing-policy-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #062d5c; } /* ========================================================= HEADER ========================================================= */ .processing-policy-header { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; } .processing-policy-icon { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #062d5c; color: #ffffff; border-radius: 16px; font-size: 25px; box-shadow: 0 8px 20px rgba(6, 45, 92, 0.18); } .processing-policy-label { display: block; color: #1976d2; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; margin-bottom: 5px; } .processing-policy-heading h2 { margin: 0; color: #062d5c; font-size: 32px; font-weight: 750; line-height: 1.25; } .processing-policy-heading h2 span { color: #1976d2; } /* ========================================================= INTRODUCTION ========================================================= */ .processing-policy-intro { display: flex; align-items: flex-start; gap: 15px; padding: 21px 24px; background: #f3f8fe; border: 1px solid #dce9f7; border-radius: 15px; margin-bottom: 32px; } .processing-policy-intro-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #1268d8; border-radius: 50%; font-size: 17px; box-shadow: 0 3px 10px rgba(6, 45, 92, 0.08); } .processing-policy-intro p { margin: 0; color: #405875; font-size: 16px; line-height: 1.75; } .processing-policy-intro strong { color: #062d5c; font-weight: 700; } /* ========================================================= NATURE OF PROCESSING FEE ========================================================= */ .processing-fee-nature { border: 1px solid #e3ebf5; border-radius: 18px; overflow: hidden; background: #ffffff; } .processing-fee-nature-heading { display: flex; align-items: center; gap: 15px; padding: 22px 25px; background: linear-gradient( 90deg, #f1f7fd 0%, #ffffff 100% ); border-bottom: 1px solid #e5edf6; } .processing-fee-nature-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #062d5c; color: #ffffff; border-radius: 13px; font-size: 20px; } .processing-fee-nature-heading span { display: block; color: #1976d2; font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; } .processing-fee-nature-heading h3 { margin: 0; color: #062d5c; font-size: 23px; font-weight: 700; } /* ========================================================= POLICY POINTS ========================================================= */ .processing-fee-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 8px 22px 12px; } .processing-fee-point { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 14px 12px; border-bottom: 1px solid #edf2f7; transition: background 0.25s ease, transform 0.25s ease; } .processing-fee-point:nth-child(odd) { border-right: 1px solid #edf2f7; padding-right: 25px; } .processing-fee-point:nth-child(even) { padding-left: 25px; } .processing-fee-point:nth-child(3), .processing-fee-point:nth-child(4) { border-bottom: none; } .processing-fee-point:hover { background: #f7faff; } .processing-fee-check { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #e8f2ff; color: #062d5c; border-radius: 50%; font-size: 15px; border: 1px solid #cfe0f3; } .processing-fee-point p { margin: 0; color: #405875; font-size: 15px; line-height: 1.55; } /* ========================================================= IMPORTANT NOTICE ========================================================= */ .processing-policy-notice { display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 17px 20px; background: #062d5c; border-radius: 14px; color: #ffffff; } .processing-policy-notice-icon { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.13); border-radius: 50%; font-size: 18px; } .processing-policy-notice strong { display: block; font-size: 15px; margin-bottom: 2px; } .processing-policy-notice p { margin: 0; color: #dcecff; font-size: 13px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .processing-policy-container { width: calc(100% - 50px); padding: 35px; } .processing-policy-heading h2 { font-size: 28px; } .processing-fee-points { grid-template-columns: 1fr; } .processing-fee-point:nth-child(odd) { border-right: none; padding-right: 12px; } .processing-fee-point:nth-child(even) { padding-left: 12px; } .processing-fee-point:nth-child(3) { border-bottom: 1px solid #edf2f7; } .processing-fee-point:nth-child(4) { border-bottom: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .processing-policy-section { padding: 25px 0; } .processing-policy-container { width: calc(100% - 28px); padding: 25px 18px; border-radius: 18px; } .processing-policy-header { align-items: flex-start; gap: 13px; margin-bottom: 23px; } .processing-policy-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; } .processing-policy-label { font-size: 10px; letter-spacing: 1px; } .processing-policy-heading h2 { font-size: 22px; line-height: 1.35; } /* INTRO */ .processing-policy-intro { padding: 17px; gap: 11px; margin-bottom: 22px; border-radius: 13px; } .processing-policy-intro-icon { width: 29px; height: 29px; font-size: 14px; } .processing-policy-intro p { font-size: 14px; line-height: 1.65; } /* FEE NATURE */ .processing-fee-nature { border-radius: 14px; } .processing-fee-nature-heading { padding: 18px; gap: 12px; } .processing-fee-nature-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; } .processing-fee-nature-heading h3 { font-size: 19px; } .processing-fee-nature-heading span { font-size: 9px; } /* POINTS */ .processing-fee-points { padding: 5px 15px 8px; } .processing-fee-point { min-height: auto; padding: 15px 5px; gap: 11px; } .processing-fee-point:nth-child(odd), .processing-fee-point:nth-child(even) { padding-left: 5px; padding-right: 5px; border-right: none; } .processing-fee-point p { font-size: 14px; } .processing-fee-check { width: 27px; height: 27px; font-size: 13px; } /* NOTICE */ .processing-policy-notice { align-items: flex-start; margin-top: 18px; padding: 15px; border-radius: 12px; } .processing-policy-notice-icon { width: 34px; height: 34px; font-size: 16px; } .processing-policy-notice strong { font-size: 14px; } .processing-policy-notice p { font-size: 12px; line-height: 1.5; } } /* ========================================================= PROCESSING FEE STRUCTURE ========================================================= */ .processing-fee-structure { width: 100%; padding: 45px 0; background: #f5f8fc; } .processing-fee-structure-container { width: calc(100% - 120px); max-width: 1500px; margin: 0 auto; position: relative; } /* ========================================================= SECTION HEADER ========================================================= */ .processing-fee-structure-header { text-align: center; margin-bottom: 32px; } .processing-fee-structure-label { display: block; color: #1976d2; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; margin-bottom: 6px; } .processing-fee-structure-header h2 { margin: 0; color: #062d5c; font-size: 30px; font-weight: 750; line-height: 1.25; } .processing-fee-structure-line { width: 70px; height: 3px; background: #1976d2; margin: 12px auto 10px; border-radius: 10px; } .processing-fee-structure-header p { margin: 0; color: #60748c; font-size: 16px; } /* ========================================================= CATEGORY CARD ========================================================= */ .fee-category-card { background: #ffffff; border: 1px solid #e3ebf5; border-radius: 20px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 10px 30px rgba(6, 45, 92, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease; } .fee-category-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(6, 45, 92, 0.11); } /* ========================================================= CATEGORY HEADER ========================================================= */ .fee-category-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 27px; background: linear-gradient( 100deg, #f0f6fc 0%, #ffffff 70% ); border-bottom: 1px solid #e4edf6; } .fee-category-title { display: flex; align-items: center; gap: 15px; } .fee-category-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #062d5c; color: #ffffff; border-radius: 14px; font-size: 21px; box-shadow: 0 7px 18px rgba(6, 45, 92, 0.18); } .international-icon { background: #062d5c; } .fee-country-label { display: block; color: #1976d2; font-size: 10px; font-weight: 750; letter-spacing: 1.2px; margin-bottom: 3px; } .fee-category-header h3 { margin: 0; color: #1d3046; font-size: 22px; font-weight: 700; } .fee-category-header h3 span { color: #60748c; font-weight: 600; } .fee-currency-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 30px; padding: 0 12px; background: #e6f1ff; color: #062d5c; border: 1px solid #c9def5; border-radius: 30px; font-size: 12px; font-weight: 750; letter-spacing: .5px; } /* ========================================================= TABLE ========================================================= */ .fee-table-wrapper { padding: 22px 25px 25px; } .processing-fee-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #d5e2f0; border-radius: 15px; } .processing-fee-table thead th { background: #062d5c; color: #ffffff; padding: 15px 18px; font-size: 15px; font-weight: 650; text-align: left; } .processing-fee-table thead th:first-child { width: 32%; } .processing-fee-table thead th span { font-weight: 500; opacity: .9; } .processing-fee-table tbody td { padding: 16px 18px; color: #405875; font-size: 16px; line-height: 1.55; border-bottom: 1px solid #e0e9f3; background: #ffffff; vertical-align: middle; } .processing-fee-table tbody tr:last-child td { border-bottom: none; } .processing-fee-table tbody tr:hover td { background: #f7faff; } .processing-fee-table tbody td:first-child { border-right: 1px solid #e0e9f3; } .fee-category-name { color: #294766; font-weight: 550; } .fee-detail { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .fee-amount { color: #062d5c; font-size: 17px; font-weight: 750; white-space: nowrap; } .fee-description { color: #60748c; font-size: 15px; } /* ========================================================= MOBILE LIST ========================================================= */ .fee-mobile-list { display: none; } /* ========================================================= POLICY NOTICE ========================================================= */ .fee-policy-note { display: flex; align-items: center; gap: 14px; padding: 17px 20px; margin-top: 4px; background: #062d5c; color: #ffffff; border-radius: 15px; box-shadow: 0 8px 22px rgba(6, 45, 92, 0.12); } .fee-policy-note-icon { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.13); font-size: 17px; } .fee-policy-note strong { display: block; font-size: 15px; margin-bottom: 2px; } .fee-policy-note p { margin: 0; color: #dcecff; font-size: 13px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .processing-fee-structure-container { width: calc(100% - 60px); } .fee-category-header h3 { font-size: 20px; } .processing-fee-table thead th:first-child { width: 35%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .processing-fee-structure { padding: 30px 0; } .processing-fee-structure-container { width: calc(100% - 28px); } /* HEADER */ .processing-fee-structure-header { margin-bottom: 22px; } .processing-fee-structure-label { font-size: 10px; } .processing-fee-structure-header h2 { font-size: 24px; } .processing-fee-structure-header p { font-size: 14px; line-height: 1.5; } /* CARD */ .fee-category-card { border-radius: 16px; margin-bottom: 18px; } /* CARD HEADER */ .fee-category-header { padding: 18px; align-items: flex-start; } .fee-category-title { gap: 11px; } .fee-category-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; } .fee-country-label { font-size: 9px; } .fee-category-header h3 { font-size: 17px; line-height: 1.35; } .fee-currency-badge { min-width: 45px; height: 27px; padding: 0 9px; font-size: 10px; } /* HIDE TABLE */ .fee-table-wrapper { display: none; } /* SHOW MOBILE CARDS */ .fee-mobile-list { display: block; padding: 10px 14px 14px; } .fee-mobile-item { padding: 17px 5px; border-bottom: 1px solid #e7eef6; } .fee-mobile-item:last-child { border-bottom: none; } .fee-mobile-category { display: block; color: #294766; font-size: 14px; font-weight: 650; line-height: 1.45; margin-bottom: 10px; } .fee-mobile-price { display: flex; align-items: center; gap: 9px; color: #062d5c; font-size: 19px; font-weight: 750; margin-bottom: 6px; } .fee-mobile-price span { display: inline-flex; align-items: center; padding: 4px 8px; background: #e8f3ff; color: #1765a8; border-radius: 20px; font-size: 9px; font-weight: 700; text-transform: uppercase; } .fee-mobile-item p { margin: 0; color: #60748c; font-size: 13px; line-height: 1.6; } /* NOTICE */ .fee-policy-note { align-items: flex-start; padding: 15px; border-radius: 13px; } .fee-policy-note-icon { width: 34px; height: 34px; font-size: 15px; } .fee-policy-note strong { font-size: 14px; } .fee-policy-note p { font-size: 12px; line-height: 1.5; } } /* ========================================================= ODLC MODERN POLICY SECTIONS Primary Color: #062d5c ========================================================= */ .odlc-policy-sections { width: 100%; padding: 45px 0; background: #f5f8fc; } .odlc-policy-container { width: calc(100% - 120px); max-width: 1500px; margin: 0 auto; } /* ========================================================= MAIN CARD ========================================================= */ .policy-modern-card { position: relative; background: #ffffff; border: 1px solid #e4edf6; border-radius: 20px; padding: 34px 38px; margin-bottom: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(6, 45, 92, 0.07); transition: transform .25s ease, box-shadow .25s ease; } .policy-modern-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, #062d5c, #1976d2, transparent ); } .policy-modern-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(6, 45, 92, 0.11); } /* ========================================================= CARD HEADER ========================================================= */ .policy-card-header { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; } .policy-icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #062d5c; color: #ffffff; font-size: 23px; box-shadow: 0 8px 20px rgba(6, 45, 92, .18); } .policy-card-header h2 { margin: 0; color: #062d5c; font-size: 30px; font-weight: 750; line-height: 1.25; } .policy-title-line { width: 62px; height: 3px; margin-top: 9px; background: #1976d2; border-radius: 10px; } /* ========================================================= PROCESSING FEE TERMS ========================================================= */ .policy-fee-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 35px; align-items: center; } .policy-points { display: flex; flex-direction: column; gap: 9px; } .policy-point { display: flex; align-items: center; gap: 12px; min-height: 49px; padding: 9px 14px; background: #f5f9fd; border: 1px solid #edf3f9; border-radius: 10px; transition: .2s ease; } .policy-point:hover { background: #edf6ff; border-color: #d6e8fa; transform: translateX(3px); } .check-icon { width: 29px; height: 29px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #146bc1; color: #ffffff; font-size: 14px; } .policy-point p { margin: 0; color: #405875; font-size: 16px; line-height: 1.5; } .policy-point strong { color: #294766; } /* ========================================================= FEE VISUAL ========================================================= */ .policy-visual { position: relative; width: 220px; height: 210px; margin: auto; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle, #edf6ff 0%, #f8fbff 58%, transparent 70% ); } .visual-document { position: relative; width: 105px; height: 130px; padding: 35px 18px 15px; background: #ffffff; border: 2px solid #c8ddf4; border-radius: 8px; box-shadow: 0 12px 25px rgba(6, 45, 92, .10); color: #1976d2; font-size: 40px; text-align: center; } .visual-document span { display: block; width: 65px; height: 5px; margin: 6px auto; border-radius: 5px; background: #b9d6f5; } .visual-rupee { position: absolute; left: 24px; bottom: 28px; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1976d2; color: #ffffff; font-size: 20px; font-weight: 700; box-shadow: 0 7px 15px rgba(25,118,210,.25); } .visual-shield { position: absolute; right: 23px; bottom: 17px; width: 57px; height: 65px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 28px; background: #1266bb; clip-path: polygon( 50% 0, 91% 15%, 91% 53%, 75% 79%, 50% 100%, 25% 79%, 9% 53%, 9% 15% ); } /* ========================================================= RESPONSIBILITY FRAMEWORK ========================================================= */ .responsibility-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; } .responsibility-list { position: relative; padding-left: 12px; } .responsibility-list::before { content: ""; position: absolute; left: 27px; top: 18px; bottom: 18px; width: 2px; background: #d5e6f8; } .responsibility-item { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 9px 0; } .responsibility-number { position: relative; z-index: 2; width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1976d2; color: #ffffff; font-size: 12px; font-weight: 750; box-shadow: 0 5px 12px rgba(25,118,210,.18); } .responsibility-item p { margin: 8px 0 0; color: #405875; font-size: 16px; line-height: 1.5; } .responsibility-item strong { color: #294766; } .framework-visual { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; } .institution-icon { width: 135px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: #edf6ff; color: #1976d2; font-size: 65px; } .visual-shield-large { position: absolute; right: 20px; bottom: 22px; width: 65px; height: 75px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 30px; background: #1266bb; clip-path: polygon( 50% 0, 91% 15%, 91% 53%, 75% 79%, 50% 100%, 25% 79%, 9% 53%, 9% 15% ); } /* ========================================================= ODLC MODEL ========================================================= */ .model-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: center; } .model-content { display: flex; flex-direction: column; gap: 20px; } .model-info { display: flex; align-items: flex-start; gap: 15px; } .model-info-icon { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #eaf4ff; border-radius: 10px; color: #1976d2; font-size: 22px; } .model-info p { margin: 3px 0 0; color: #405875; font-size: 16px; line-height: 1.65; } .model-info strong { color: #294766; } /* ========================================================= MODEL DIAGRAM ========================================================= */ .odlc-model-diagram { width: 290px; height: 260px; display: flex; align-items: center; justify-content: center; margin: auto; } .model-circle { position: relative; width: 205px; height: 205px; border: 3px solid #1976d2; border-radius: 50%; } .model-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf4ff; color: #1976d2; font-size: 29px; box-shadow: 0 5px 18px rgba(25,118,210,.12); } .model-node { position: absolute; width: 75px; height: 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ffffff; border: 2px solid #b9d7f5; border-radius: 50%; color: #062d5c; box-shadow: 0 7px 18px rgba(6,45,92,.08); } .model-node span { font-size: 11px; font-weight: 750; } .node-icon { color: #1976d2; font-size: 20px; margin-bottom: 2px; } .model-node-top { top: -39px; left: 50%; transform: translateX(-50%); } .model-node-left { bottom: -25px; left: -35px; } .model-node-right { bottom: -25px; right: -35px; } /* ========================================================= FINAL STATEMENT ========================================================= */ .final-statement-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 35px; align-items: center; } .statement-box { position: relative; padding: 25px 30px 25px 55px; background: #f5f9fd; border: 1px solid #cfe3f7; border-radius: 15px; } .quote-icon { position: absolute; left: 18px; top: 20px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1976d2; color: #ffffff; font-size: 16px; } .statement-box p { margin: 0; color: #405875; font-size: 16px; line-height: 1.7; } .statement-box strong { color: #294766; } .final-badge { position: relative; width: 165px; height: 160px; margin: auto; display: flex; align-items: center; justify-content: center; } .badge-shield { width: 100px; height: 115px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 42px; background: #1266bb; clip-path: polygon( 50% 0, 91% 15%, 91% 53%, 75% 79%, 50% 100%, 25% 79%, 9% 53%, 9% 15% ); } .badge-stars { position: absolute; top: 4px; color: #062d5c; font-size: 14px; letter-spacing: 5px; } /* ========================================================= BOTTOM NOTE ========================================================= */ .policy-bottom-note { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border: 1px solid #cfe2f6; background: #eef6ff; border-radius: 12px; } .bottom-note-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1976d2; color: #ffffff; font-size: 15px; } .policy-bottom-note p { margin: 0; color: #405875; font-size: 14px; line-height: 1.5; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .odlc-policy-container { width: calc(100% - 60px); } .policy-modern-card { padding: 30px; } .policy-fee-layout, .responsibility-layout { grid-template-columns: 1fr; } .policy-visual, .framework-visual { display: none; } .model-layout { grid-template-columns: 1fr; } .odlc-model-diagram { margin-top: 15px; } .final-statement-layout { grid-template-columns: 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .odlc-policy-sections { padding: 28px 0; } .odlc-policy-container { width: calc(100% - 28px); } .policy-modern-card { padding: 23px 18px; margin-bottom: 17px; border-radius: 16px; } /* HEADER */ .policy-card-header { gap: 12px; margin-bottom: 20px; } .policy-icon { width: 44px; height: 44px; font-size: 18px; } .policy-card-header h2 { font-size: 22px; line-height: 1.3; } .policy-title-line { width: 45px; height: 3px; margin-top: 7px; } /* PROCESSING TERMS */ .policy-fee-layout { display: block; } .policy-points { gap: 7px; } .policy-point { align-items: flex-start; padding: 11px 10px; } .check-icon { width: 27px; height: 27px; margin-top: 1px; } .policy-point p { font-size: 15px; line-height: 1.5; } /* RESPONSIBILITY */ .responsibility-layout { display: block; } .responsibility-list { padding-left: 0; } .responsibility-list::before { left: 20px; } .responsibility-item { gap: 12px; padding: 7px 0; } .responsibility-number { width: 40px; height: 40px; font-size: 11px; } .responsibility-item p { margin-top: 5px; font-size: 15px; line-height: 1.5; } /* MODEL */ .model-layout { display: block; } .model-content { gap: 16px; } .model-info { gap: 11px; } .model-info-icon { width: 43px; height: 43px; font-size: 18px; } .model-info p { font-size: 15px; line-height: 1.6; } .odlc-model-diagram { width: 230px; height: 230px; margin: 28px auto 5px; } .model-circle { width: 175px; height: 175px; } .model-node { width: 65px; height: 65px; } .model-node-top { top: -33px; } .model-node-left { left: -30px; bottom: -22px; } .model-node-right { right: -30px; bottom: -22px; } .model-center { width: 65px; height: 65px; } /* FINAL STATEMENT */ .final-statement-layout { display: block; } .statement-box { padding: 20px 17px 20px 48px; } .statement-box p { font-size: 15px; line-height: 1.65; } .quote-icon { left: 12px; top: 17px; } .final-badge { display: none; } /* NOTE */ .policy-bottom-note { align-items: flex-start; padding: 12px; } .bottom-note-icon { width: 29px; height: 29px; } .policy-bottom-note p { font-size: 13px; } } /* ============================================================================ CENTRE PROCESSING FEE POLICY: THE SAME TYPE AND THE SAME WIDTHS AS THE CERTIFICATE PAGE --------------------------------------------------------------------------- This page now reads as the certificate page reads. No other page is touched by this block and nothing in this page's PHP is touched at all - the mark-up, the words, the hrefs and the picture all stay as they are. MEASURED AT A 1342px VIEWPORT BEFORE THIS BLOCK header .container-fluid L 53.7 R 1288.3 w 1234.6 logo L 53.7 --------------------------------------------------------------------------- 1. THE BANNER'S TYPE - THE CERTIFICATE PAGE'S SCALE this page, before the certificate page ------------------------------------------------------------------------ the label 12px/20.8px w700 ls 0.5px 16px/1.3 w700 ls 0.3px pad 9px 18px, radius 30px pad 11px 20px, radius 30px 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 ls -1.5px w800 ls -1px UPPERCASE max-width 600px max-width 16em 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) The title is by far the largest change: 60.39px becomes 40px and it is uppercased, so it stops being nearly half again as large as every other heading on the site. It was the only heading on this page not on the 30px scale. The label is the certificate page's badge. It was 12px where the badge is 16px, on a solid blue fill with no border; it goes on the same scale, the same translucent fill and the same white border. Its height follows its type - 54.0px against the badge's own 54.0px - so it does not change the banner's height. --------------------------------------------------------------------------- 2. THE BANNER'S GUTTER Measured at 1342px, the label sat at L 93.9 against a logo at L 53.7 - a DELTA of +40.2. The cause is the content column's own left padding: 7% of the section at wide widths and 6% at 1199 and below, which at 1342 came to 93.94px and at 1000px to 59.09px against a logo at 29.6. .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, and 3% of 984.8 is 29.54 against a logo at 29.6. The percentage resolves against the flex container's content box - the section, which is full bleed - and not against the 52% column, which is why the same expression used here lands the same pixels it lands on the certificate page. THE PICTURE IS NOT MOVED AND IS NOT RESIZED .processing-fee-inner is display:flex with the content column at 52% and the picture column at 58% - 110% between them, so flex-shrink is already active. Putting the gutter on .processing-fee-inner as padding would have shrunk both columns and made the picture smaller, which is why it goes on the content column alone. .processing-fee-image, its ellipse clip-path, and images/portal1.png are not named anywhere in this block. --------------------------------------------------------------------------- 3. EVERY HEADING ON THE PAGE, AND WHERE IT WAS The certificate page's h2 is 30px/36px w700. Four h2s here were already 30px but on a 37.5px line, and two of those four were w750 rather than w700, so they did not match even in weight: .framework-section h2 30px/37.5px w700 ls -0.4px .governance-section h2 30px/37.5px w700 .processing-policy-section h2 32px/40px w750 32px becomes 30 .processing-fee-structure h2 30px/37.5px w750 w750 becomes w700 .odlc-policy-sections h2 x4 30px/37.5px w750 w750 becomes w700 all five become 30px/36px w700 with normal tracking. The card headings become 20px/27px w700, the certificate page's card heading: .processing-policy-section h3 23px/27.6px -> 20px/27px .processing-fee-structure h3 22px/26.4px -> 20px/27px .odlc-app-title 22px/25.5px w800 -> 20px/27px w700 The section eyebrows become 12px, the certificate page's label size. Two were 13px: .framework-label 13px -> 12px .governance-label 13px -> 12px The other two, .processing-policy-label and .processing-fee-structure-label, were already 12px and are not named. --------------------------------------------------------------------------- 4. THE BODY COPY, PINNED AT 16px The certificate page's rule is that body copy is 16px at every width with no step-down on a phone. Three paragraphs here were under it: .governance-section p 14px/21.7px -> 16px/1.6 .processing-policy-section p 15px/23.25px -> 16px/1.6 .fee-description 15px/23.25px -> 16px/1.6 and three were already 16px but not on the 1.6 line: .framework-section p 16px/26.4px -> 16px/1.6 .processing-fee-structure p 16px/27.2px -> 16px/1.6 .odlc-policy-sections p 16px/24px -> 16px/1.6 The 16px body inside the policy cards - .policy-point, .responsibility-item and .model-info - was already 16px/25.6px w600 and is not named. THE BADGES ARE LEFT AT THEIR OWN SIZES .fee-country-label at 10px, .fee-currency-badge at 12px and .responsibility-number at 12px are badges whose boxes are sized around their type. They are not body copy and they are not named. If they are wanted on the 16px rule as well, say so and they will be measured for overflow first. --------------------------------------------------------------------------- 5. THE TABLES ARE ALREADY AT 16px Two tables, six cells each, every td measured 16px/24.8px w400 at both widths. Nothing to do. The th cells measure 15px/24px w650 and are left alone - the rule on this site is that table headers are not restyled. --------------------------------------------------------------------------- 6. THREE DIFFERENT WIDTH LADDERS, NONE OF THEM THE HEADER'S Measured at 1342px, every container on the page against the header: .framework-container 1302.0 dL -33.7 dR -33.7 .governance-container 1302.0 dL -33.7 dR -33.7 .processing-policy-container 1222.0 dL 6.3 dR 6.3 .processing-fee-structure-container 1222.0 dL 6.3 dR 6.3 .odlc-policy-container 1222.0 dL 6.3 dR 6.3 .odlcf-cta-in 1234.6 dL 0.0 dR 0.0 Three ladders: two containers pinned at a fixed 1302px with no max-width, which puts them 33.7px OUTSIDE the header's edges on each side; three at 1222px inside a 1500px cap, which leaves them 6.3px short of the header's edges; and the footer, which is the only one on the ladder at all. All five 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 - and their padding is zeroed, all five measuring 0 on both sides already. --------------------------------------------------------------------------- 7. THE PADDING WAS ALREADY RIGHT, AND IS NOT WRITTEN HERE Measured and not touched, because restating a value that already matches would change nothing: .processing-fee 0px / 0px .framework-section 70px / 70px .governance-section 70px / 70px .processing-policy-section 45px / 45px .processing-fee-structure 45px / 45px .odlc-policy-sections 45px / 45px .odlcf-cta 36px / 36px Every section is already equal above and below. --------------------------------------------------------------------------- NOT TOUCHED The banner's background is left exactly as it is, rgb(6, 45, 92). It is not changed here and nothing in this block is a background. .processing-fee-image and images/portal1.png, with its ellipse clip-path, are not named. .category-panel is the header's mega menu, not this page's content, and is not named. .odlcf-cta is the shared footer component loaded by thirteen pages from css/includes/footer.css, and is not named. ============================================================================ */ /* ------------------------------------------------- 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. every heading on the page */ .framework-section h2, .governance-section h2, .processing-policy-section h2, .processing-fee-structure h2, .odlc-policy-sections h2 { font-family: Arial, Helvetica, sans-serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 36px !important; letter-spacing: normal !important; } .processing-policy-section h3, .processing-fee-structure h3, .odlc-policy-sections h2.odlc-app-title { font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 27px !important; } .framework-label, .governance-label { font-size: 12px !important; line-height: 19.2px !important; font-weight: 700 !important; } /* ------------------------------------- 4. the body copy, pinned at 16px */ .framework-section p, .governance-section p, .processing-policy-section p, .processing-fee-structure p, .odlc-policy-sections p, .fee-description { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; } /* ----------------------- 6. the five containers onto the header's ladder */ .framework-container, .governance-container, .processing-policy-container, .processing-fee-structure-container, .odlc-policy-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================ THE SAME LADDER THE CERTIFICATE PAGE 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; } .framework-container, .governance-container, .processing-policy-container, .processing-fee-structure-container, .odlc-policy-container { width: 94% !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; } .framework-container, .governance-container, .processing-policy-container, .processing-fee-structure-container, .odlc-policy-container { width: 90% !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; } .framework-container, .governance-container, .processing-policy-container, .processing-fee-structure-container, .odlc-policy-container { width: 92% !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 LAST 18.4px: TWO SECTIONS CARRY 20px OF THEIR OWN PADDING --------------------------------------------------------------------------- Measured at a 1342px viewport after the block before this one: .processing-policy-container 1234.62px dL 0.0 dR 0.0 .processing-fee-structure-container 1234.62px dL 0.0 dR 0.0 .odlc-policy-container 1234.62px dL 0.0 dR 0.0 .framework-container 1197.83px dL 18.4 dR 18.4 .governance-container 1197.83px dL 18.4 dR 18.4 Three reached zero and two did not, and the arithmetic says why. The ladder is a percentage, and a percentage of what? .framework-section padding 70px 20px <- 20px each side .governance-section padding 70px 20px <- 20px each side .processing-policy-section padding 45px 0 .processing-fee-structure padding 45px 0 .odlc-policy-sections padding 45px 0 The first two sections take 20px off each side before their container is even measured, so 92% of the remaining 1302px is 1197.83px rather than 92% of 1342px, which is 1234.62px. The difference is 18.4px - the 20px the section ate, less the 1.6px that a slightly narrower percentage makes back. So the containers were on the ladder correctly and the sections above them were the thing standing outside it. WHAT IS DONE .framework-section padding-left 0 .governance-section padding-right 0 Their 70px above and 70px below are left exactly as they are, and so is everything else about them. On the other three sections the container is the only thing that carries the gutter, which is what those two now do too. --------------------------------------------------------------------------- THE ONE THING THAT MOVED BESIDE THIS .processing-fee-image measures L 639.2 w 702.8 after the gutter went onto the content column, against L 641.5 w 700.5 before. The content column's left padding came down by 40px and flex-shrink gave roughly 2px of it back to the picture column. The picture is not named in this block or in the one before it; the movement is the flexbox redistributing a box it was already redistributing, not a change to the image, its radius or its ellipse clip-path. ============================================================================ */ .framework-section, .governance-section { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================ THE BANNER'S DECORATION HIDDEN, AND THE PHOTOGRAPH TAKEN TO THE TOP AND BOTTOM EDGES --------------------------------------------------------------------------- Two things, both on the banner of this page only. --------------------------------------------------------------------------- 1. THE DOTS AND THE RINGS Four elements paint decoration and nothing else: .processing-fee-dots top 20px left 28px 75 x 75 a 12px dot grid, opacity .55 .processing-fee-ring-top top -45px left 47% 125 x 125 and two more rings inside it at inset 15px and inset 30px .processing-fee-ring-bottom bottom -80px left -70px 150 x 150 3px solid, and one more inside at inset 15px .processing-fee-ring the 1px base both of them inherit from They are hidden rather than deleted - display:none and nothing else, so the elements stay in the PHP and can be brought back by one line: .processing-fee-dots, .processing-fee-ring, .processing-fee-ring-top, .processing-fee-ring-bottom display none THE NAVY CURVE IS NOT TOUCHED .processing-fee-image::before 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 background colour - and removing it would leave a hard rectangular join where the curve is. It stays. --------------------------------------------------------------------------- 2. THE PHOTOGRAPH TOUCHES THE TOP AND THE BOTTOM Measured at a 1342px viewport before this block: .processing-fee-inner h 455.0 .processing-fee-image h 356.4 a static flex item .processing-fee-image-circle h 356.4 So the photograph was 98.6px short of the banner's height - roughly 49px of navy above it and 49px below. The cause is one line: .processing-fee-inner is display:flex with align-items:center, so the picture column is centred and sized to its own content rather than stretched, and .processing-fee-image-circle is height:100% of a box that was already too short. So the column is stretched instead of being centred: .processing-fee-image align-self stretch which makes it the full height of the flex container, and the circle's own height:100% then takes the photograph to the top and the bottom edges with nothing more to write. THE ELLIPSE IS KEPT, AND IT IS WHAT MAKES THE CURVE .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 in the first place, and it is the reason the photograph reaches the top and bottom edges across the right-hand part of its own column rather than as a plain rectangle - the same shape it had before, at full height. images/portal1.png is not named here. object-fit:cover and object-position:center are not named here either. Only the column's alignment changes, so the picture is scaled by its own rules exactly as it was, and the banner's height is unaffected - the inner is still 455.0px from its own min-height and the text column, which is what sets it. ============================================================================ */ /* ------------------------------------------------------- 1. the decoration */ .processing-fee-dots, .processing-fee-ring, .processing-fee-ring-top, .processing-fee-ring-bottom { display: none !important; } /* --------------------------------------- 2. the photograph to both edges */ .processing-fee-image { align-self: stretch !important; } /* ========================================================================== THE CHECK LIST IN 'NATURE OF THE PROCESSING FEE' - EVEN SPACING ------------------------------------------------------------------------- The four check-marked points sit in a two-column grid, and each one was padded unevenly on purpose. It was a middle gutter: .processing-fee-points gap: 0; padding: 8px 22px 12px .processing-fee-point padding: 14px 12px; gap: 13px .processing-fee-point:nth-child(odd) padding-right: 25px .processing-fee-point:nth-child(even) padding-left: 25px With no gap on the grid, an odd cell pads its right side and an even cell pads its left, so the space between the two columns becomes 25 + 25 = 50px while the outside edges keep 12px. That is a deliberate divider - but it is a divider expressed as 50px against 12px, and on a card this wide it reads as a big hole down the middle with the two check marks jammed against the outer edge. Measured before this change at 1440px: point 1 (odd) 638.4 x 70.0 padding 14px 25px 14px 12px the grid 1322.8 x 160.0 -------------------------------------------------------------------------- WHAT IT IS NOW Both sides of every point are the same, and the space is shared out rather than all spent in the middle: padding: 14px 20px outside edge 12px -> 20px (+8 between the columns 50px -> 40px (-10 ratio 4.2 : 1 -> 2 : 1 Twenty pixels is one number. If the middle still reads as too open, take it down to 16 and the outside and the divider both close with it. The check circle is 30px and the gap between the circle and the text is 13px, both untouched - only the box the two sit in changed. -------------------------------------------------------------------------- WHY min-width: 901px, AND WHY ALL THREE SELECTORS ARE RESTATED information2.css:2979 collapses the grid to a single column at 900px, and :2983 and :2988 then put both sides back to 12px, so the single-column bands are already even and are left alone. Below 600px the padding is 15px 5px with a 15px container - also already even. The two-column band is the only one that is uneven, so the rule is scoped to it. All three selectors are named because .processing-fee-point on its own is (0,1,0) and would lose to the :nth-child(odd) and :nth-child(even) rules at (0,2,0) that are being replaced. Restating them at the same specificity, in a later block, is what settles it - no !important is needed. -------------------------------------------------------------------------- NOT TOUCHED The grid, the container padding, the check circle, the type, the fee tables further down the page, and every other rule in this file. ========================================================================== */ @media screen and (min-width: 901px) { .processing-fee-point, .processing-fee-point:nth-child(odd), .processing-fee-point:nth-child(even) { padding: 14px 20px; } } /* ========================================================================== THE POLICY CONTAINER - THE SAME PADDING AS THE FEE TABLE ------------------------------------------------------------------------- padding: 22px 25px 25px - the value this file already uses for .fee-table-wrapper, which sits inside this same section, so the card and the fee tables below it now line up on the same 25px either side. -------------------------------------------------------------------------- WHY IT HAS TO CARRY !important A blanket rule elsewhere in this file sets, on a group that includes .processing-policy-container: padding-left: 0 !important; padding-right: 0 !important That is why the container rendered with 42px top and bottom and nothing at either side, and it is why the intended `padding: 42px 48px` on the container itself never took effect - an !important longhand is only beaten by another !important. Anything written without it loses here. The grouped rule names four other containers - .framework-container, .governance-container, .processing-fee-structure-container and .odlc-policy-container. None of them is named here, so all four keep their 0px exactly as they are. Specificity is unchanged at (0,1,0); with both declarations carrying !important, being later in the file is what settles it. -------------------------------------------------------------------------- ONE THING TO FLAG This is the shorthand, so it sets all three sides, not just the two asked for. The container's vertical padding therefore changes as well: top 42px -> 22px left 48px -> 25px (was computing to 0) bottom 42px -> 25px If the 42px top and bottom should stay and only the sides should move, say so and it becomes the two longhands alone: padding-left: 25px !important; padding-right: 25px !important; -------------------------------------------------------------------------- NOT TOUCHED The width, the max-width, the centring, the border, the radius, the check list, the fee tables themselves, and every other rule in this file. ========================================================================== */ .processing-policy-container { padding: 22px 25px 25px !important; } /* ========================================================================== THE RULE IS PUT ON THE CENTRE OF THE CIRCLES ------------------------------------------------------------------------- Legal and Technical Responsibility Framework. The 2px rule that runs down the list was not on the middle of the four numbered circles - measured off the rendered pixels: 900px rule x 58..59 centre 58.5 circles centre 63.5 5px left 600px rule x 39..40 centre 39.5 circles centre 38.5 1px right Out in two directions by two different amounts, which is why it did not read as one consistent slip. getComputedStyle on the pseudo reported left 0 and the full width of the list, which matches neither declaration - so the numbers above come from the pixels, not from the style engine. Only `left` moves, to put the middle of the 2px rule on the middle of the circle: wide 27px -> 32px centre 28 -> 33, on the circle <=700px 20px -> 19px centre 21 -> 20, on the circle The rule's width, its #d5e6f8, its 18px inset top and bottom, the 42px and 40px circles and all four rows of text are untouched. information2.css is loaded by information2.php alone - one page references it - and .responsibility-list appears once in that page, so this reaches nothing else. ========================================================================== */ .responsibility-list::before { left: 32px; } @media (max-width: 700px) { .responsibility-list::before { left: 19px; } }