/*========================== 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; } } /* ===================================================== ACADEMIC COUNCIL BANNER ===================================================== */ .recognition-and-validity-banner { width: 100%; min-height: 300px; display: flex; align-items: stretch; position: relative; overflow: hidden; background: #083C7C; font-family: Arial, Helvetica, sans-serif; } /* ===================================================== LEFT CONTENT ===================================================== */ .recognition-and-validity-content { width: 52%; padding: 80px 6% 80px 8%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 5; } /* ===================================================== BADGE ===================================================== */ .recognition-and-validity-badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.20); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: .4px; } .recognition-and-validity-badge i { font-size: 15px; } /* ========================================================= LABEL ========================================================= */ .recognition-and-validity-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; } .recognition-and-validity-label i { font-size: 13px; } /* ========================================================= HEADING ========================================================= */ .recognition-and-validity-content h1 { 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; } .recognition-and-validity-content h1 span { color: #a9c7ff; } /* ===================================================== LINE ===================================================== */ .recognition-and-validity-line { width: 50px; height: 3px; margin: 25px 0 20px; background: #FFFFFF; border-radius: 5px; } /* ===================================================== DESCRIPTION ===================================================== */ .recognition-and-validity-content p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .90); font-size: 16px; line-height: 1.75; } /* ===================================================== RIGHT IMAGE AREA ===================================================== */ .recognition-and-validity-image { width: 48%; min-height: 500px; position: relative; overflow: hidden; } /* ===================================================== PHOTO ===================================================== */ .recognition-and-validity-photo { position: absolute; inset: 0; overflow: hidden; /* Simple professional curved transition */ clip-path: ellipse(100% 100% at 100% 50%); background: #AFCBFF; } .recognition-and-validity-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .7s ease; } /* ===================================================== HOVER ===================================================== */ .recognition-and-validity-banner:hover .recognition-and-validity-photo img { transform: scale(1.04); } /* ===================================================== SIMPLE LIGHT BORDER ===================================================== */ /* .recognition-and-validity-image::before { content: ""; position: absolute; z-index: 3; left: -12px; top: 0; width: 24px; height: 100%; background: #AFCBFF; border-radius: 50%; } */ /* ===================================================== DECORATIVE DOTS ===================================================== */ .recognition-and-validity-banner::before { content: ""; position: absolute; left: 35px; top: 35px; width: 60px; height: 60px; background-image: radial-gradient(rgba(255, 255, 255, .45) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: .7; z-index: 2; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991px) { .recognition-and-validity-banner { min-height: 430px; } .recognition-and-validity-content { width: 52%; padding: 60px 35px; } .recognition-and-validity-image { width: 48%; min-height: 430px; } .recognition-and-validity-content h1 { font-size: 44px; } .recognition-and-validity-content p { font-size: 14px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { .recognition-and-validity-banner { display: flex; flex-direction: column; min-height: auto; } .recognition-and-validity-content { width: 100%; min-height: 360px; padding: 55px 25px 45px; } .recognition-and-validity-content h1 { font-size: clamp(34px, 9vw, 46px); } .recognition-and-validity-content p { font-size: 14px; line-height: 1.65; } .recognition-and-validity-image { width: 100%; height: 300px; min-height: 300px; } .recognition-and-validity-photo { clip-path: none; border-radius: 0; } .recognition-and-validity-image::before { display: none; } .recognition-and-validity-banner::before { top: 20px; left: 20px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 480px) { .recognition-and-validity-content { min-height: 330px; padding: 45px 20px 40px; } .recognition-and-validity-badge { font-size: 10px; padding: 7px 13px; } .recognition-and-validity-content h1 { font-size: 32px; } .recognition-and-validity-content p { font-size: 13px; } .recognition-and-validity-image { height: 250px; min-height: 250px; } } /* ========================================= ODL MODEL MODERN SECTION ========================================= */ .odl-model-section { width: 100%; max-width: 1450px; min-height: 720px; margin: 60px auto; /* TOP + BOTTOM SPACE */ display: grid; grid-template-columns: 50% 50%; background: #00386F; border-radius: 32px; overflow: hidden; box-shadow: 0 20px 55px rgba(0, 56, 111, 0.18); } /* ========================================= LEFT IMAGE ========================================= */ .odl-image-panel { position: relative; width: 100%; height: 100%; min-height: 720px; overflow: hidden; } .odl-image-panel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transform: scale(1.01); } /* Image subtle overlay */ .odl-image-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 56, 111, 0.02) 0%, rgba(0, 56, 111, 0.08) 100%); pointer-events: none; } /* ========================================= IMAGE LABEL ========================================= */ .odl-image-label { position: absolute; left: 34px; bottom: 32px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(255, 255, 255, 0.96); color: #00386F; border-radius: 50px; font-size: 15px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20); backdrop-filter: blur(10px); } /* ========================================= ICON ========================================= */ .label-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #eaf3ff; color: #0969e8; border-radius: 50%; } .label-icon svg { width: 20px; height: 20px; } /* ========================================= RIGHT CONTENT ========================================= */ .odl-content-panel { position: relative; padding: 76px 74px 70px; background: radial-gradient(circle at 100% 0%, rgba(72, 145, 255, 0.16), transparent 34%), #00386F; color: #ffffff; display: flex; flex-direction: column; justify-content: center; } /* Decorative circle */ .odl-content-panel::before { content: ""; position: absolute; width: 170px; height: 170px; right: -75px; top: -75px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; pointer-events: none; } .odl-content-panel::after { content: ""; position: absolute; width: 115px; height: 115px; right: -48px; top: -48px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 50%; pointer-events: none; } /* ========================================= TAG ========================================= */ .odl-tag { width: fit-content; display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; margin-bottom: 28px; border: 1px solid rgba(125, 181, 255, 0.45); background: rgba(255, 255, 255, 0.07); border-radius: 50px; color: #dbeaff; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; } .odl-tag span { width: 7px; height: 7px; background: #59a0ff; border-radius: 50%; } /* ========================================= HEADING ========================================= */ .odl-content-panel h2 { margin: 0; max-width: 650px; font-size: clamp(42px, 4vw, 64px); line-height: 1.08; font-weight: 700; letter-spacing: -1.8px; color: #ffffff; } .odl-content-panel h2 strong { color: #62a8ff; } /* ========================================= HEADING LINE ========================================= */ .odl-heading-line { width: 74px; height: 4px; margin: 28px 0 52px; background: #3291ff; border-radius: 10px; } /* ========================================= CONTENT ITEMS ========================================= */ .odl-content-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .odl-content-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* ========================================= ICON BOX ========================================= */ .odl-icon { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #69adff; background: linear-gradient(145deg, rgba(80, 157, 255, 0.22), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(107, 177, 255, 0.35); border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* IMPORTANT: SVG is explicitly sized and visible */ .odl-icon svg { width: 29px; height: 29px; display: block; color: #ffffff; } /* ========================================= CONTENT TEXT ========================================= */ .odl-content-item p { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 17px; line-height: 1.85; font-weight: 400; text-align: justify; } .odl-content-item b { color: #ffffff; font-weight: 700; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .odl-model-section { grid-template-columns: 45% 55%; min-height: 650px; } .odl-image-panel { min-height: 650px; } .odl-content-panel { padding: 55px 45px; } .odl-content-panel h2 { font-size: 44px; } .odl-content-item p { font-size: 15px; line-height: 1.7; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .odl-model-section { width: calc(100% - 30px); margin: 15px auto; display: flex; flex-direction: column; border-radius: 24px; min-height: auto; } /* Image becomes full width */ .odl-image-panel { width: 100%; height: 380px; min-height: 380px; position: relative; } .odl-image-panel img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } .odl-image-label { left: 20px; bottom: 20px; padding: 9px 16px; font-size: 13px; } /* Content */ .odl-content-panel { padding: 45px 25px 50px; display: block; } .odl-tag { margin-bottom: 22px; } .odl-content-panel h2 { font-size: 38px; line-height: 1.1; letter-spacing: -1px; } .odl-heading-line { margin: 22px 0 35px; } .odl-content-item { grid-template-columns: 48px 1fr; gap: 15px; padding-bottom: 28px; margin-bottom: 28px; } .odl-icon { width: 48px; height: 48px; border-radius: 13px; } .odl-icon svg { width: 25px; height: 25px; } .odl-content-item p { font-size: 15px; line-height: 1.7; text-align: justify; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .odl-model-section { width: calc(100% - 20px); border-radius: 20px; } .odl-image-panel { height: 300px; min-height: 300px; } .odl-content-panel { padding: 35px 20px 40px; } .odl-content-panel h2 { font-size: 32px; } .odl-content-item { grid-template-columns: 44px 1fr; gap: 12px; } .odl-icon { width: 44px; height: 44px; } .odl-content-item p { font-size: 14px; } } /* ========================================================= MINISTRY / UGC COMMON SECTION ========================================================= */ .moe-section { width: 100%; padding: 60px 32px; background: #f6f9fd; box-sizing: border-box; } .moe-container { width: min(1400px, 100%); min-height: 390px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.95fr; background: #ffffff; border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 12px 35px rgba(0, 56, 111, 0.08); } /* ========================================================= UGC SECTION ========================================================= */ .ugc-container { /* Image LEFT / Content RIGHT */ grid-template-columns: 0.95fr 1fr; align-items: stretch; } /* ========================================================= IMAGE ========================================================= */ .ugc-image { position: relative; min-height: 390px; overflow: hidden; background: #edf4fb; } .ugc-image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; z-index: 1; } /* ========================================================= IMAGE BLUE EDGE ========================================================= */ .ugc-image::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 7px; background: #075fd8; z-index: 3; } /* ========================================================= CONTENT ========================================================= */ .ugc-content { padding: 42px 48px 38px 42px; box-sizing: border-box; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; } /* ========================================================= HEADING ========================================================= */ .ugc-heading { display: flex; align-items: center; gap: 20px; } .ugc-icon { width: 60px; height: 60px; min-width: 60px; display: flex; align-items: center; justify-content: center; background: #edf5ff; color: #0867e8; border-radius: 50%; box-shadow: 0 5px 15px rgba(8, 103, 232, 0.08); } .ugc-icon svg { width: 31px; height: 31px; } .ugc-heading h3 { margin: 0; font-family: Arial, sans-serif; font-size: clamp(27px, 2.4vw, 34px); line-height: 1.15; font-weight: 800; color: #1b3047; } /* ========================================================= BLUE UNDERLINE ========================================================= */ .ugc-line { width: 70px; height: 4px; margin-top: 18px; margin-bottom: 25px; background: #1769e8; border-radius: 20px; } /* ========================================================= QUOTE ========================================================= */ .ugc-quote { display: flex; gap: 16px; position: relative; } .ugc-quote-mark { width: 32px; min-width: 32px; font-family: Georgia, serif; font-size: 56px; line-height: 0.8; font-weight: 700; color: #1769e8; } .ugc-quote-content { position: relative; padding-left: 15px; } .ugc-quote-content::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, #1769e8, #75aaff); border-radius: 10px; } .ugc-quote-content p { margin: 0; font-family: Arial, sans-serif; font-size: 17px; line-height: 1.65; font-weight: 400; color: #415a73; text-align: left; } /* ========================================================= SOURCE ========================================================= */ .ugc-source { margin-top: 13px; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.5; font-weight: 600; color: #1769e8; } /* ========================================================= APPROVED BOX ========================================================= */ .ugc-status { width: 290px; min-height: 68px; margin-top: 28px; padding: 10px 20px; box-sizing: border-box; display: flex; align-items: center; gap: 15px; background: #eaf3ff; border-radius: 10px; } .ugc-status-icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #075fd8; border: 2px solid #c9ddfa; border-radius: 50%; } .ugc-status-icon svg { width: 25px; height: 25px; } .ugc-status-text strong { font-family: Arial, sans-serif; font-size: 18px; font-weight: 800; color: #073f75; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .moe-section { padding: 50px 25px; } .ugc-content { padding: 38px 35px 35px 35px; } .ugc-heading { gap: 16px; } .ugc-icon { width: 54px; height: 54px; min-width: 54px; } .ugc-heading h3 { font-size: 28px; } .ugc-quote-content p { font-size: 15px; line-height: 1.6; } .ugc-source { font-size: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .ugc-container { grid-template-columns: 1fr; } .ugc-image { min-height: 360px; height: 360px; order: -1; } .ugc-content { padding: 35px; } .ugc-heading h3 { font-size: 28px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .moe-section { padding: 30px 15px; } .moe-container { border-radius: 16px; } .ugc-image { min-height: 280px; height: 280px; } .ugc-content { padding: 28px 22px 30px; } .ugc-heading { gap: 13px; } .ugc-icon { width: 48px; height: 48px; min-width: 48px; } .ugc-icon svg { width: 25px; height: 25px; } .ugc-heading h3 { font-size: 23px; line-height: 1.2; } .ugc-line { width: 55px; height: 3px; margin-top: 16px; margin-bottom: 20px; } .ugc-quote { gap: 8px; } .ugc-quote-mark { width: 20px; min-width: 20px; font-size: 43px; } .ugc-quote-content { padding-left: 12px; } .ugc-quote-content p { font-size: 14px; line-height: 1.65; } .ugc-source { font-size: 12px; line-height: 1.45; } .ugc-status { width: 100%; min-height: 64px; margin-top: 22px; padding: 8px 13px; } .ugc-status-icon { width: 42px; height: 42px; min-width: 42px; } .ugc-status-text strong { font-size: 16px; } } /* ========================================= MINISTRY OF EDUCATION SECTION ========================================= */ .moe-section { width: 100%; padding: 60px 32px; background: #f6f9fd; box-sizing: border-box; } .moe-container { width: min(1400px, 100%); min-height: 390px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.95fr; background: #ffffff; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 35px rgba(0, 56, 111, 0.08); position: relative; } /* ========================================= LEFT CONTENT ========================================= */ .moe-content { padding: 42px 48px 38px 30px; position: relative; z-index: 3; box-sizing: border-box; } /* Heading */ .moe-heading { display: flex; align-items: flex-start; gap: 22px; } .moe-icon { width: 60px; height: 60px; min-width: 60px; display: flex; align-items: center; justify-content: center; background: #edf5ff; color: #0867e8; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 103, 232, 0.05); } .moe-icon svg { width: 32px; height: 32px; } .moe-heading h2 { margin: 5px 0 0; font-family: Arial, sans-serif; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.08; font-weight: 800; color: #1b3047; } .moe-heading h2 span { color: #1769e8; } /* Small blue line */ .moe-line { width: 52px; height: 3px; margin: 20px 0 25px; background: #1769e8; border-radius: 20px; } /* ========================================= QUOTE AREA ========================================= */ .moe-quote { display: flex; gap: 12px; position: relative; padding-left: 0; } .quote-mark { width: 25px; min-width: 45px; color: #1769e8; font-family: Georgia, serif; font-size: 55px; line-height: 0.8; font-weight: 700; } .quote-content { position: relative; padding-left: 0; } .quote-content::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #1769e8, #75aaff); } .quote-content p { margin: 0; padding-left: 10px; font-family: Arial, sans-serif; font-size: 17px; line-height: 1.65; color: #415a73; text-align: left; } .quote-source { margin-top: 4px; padding-left: 10px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1769e8; } /* ========================================= STATUS BOX ========================================= */ .moe-status { margin-top: 25px; width: min(100%, 415px); min-height: 74px; padding: 10px 20px; display: flex; align-items: center; gap: 15px; box-sizing: border-box; background: linear-gradient(135deg, #edf5ff, #e7f0fc); border-radius: 10px; } /* Status icon */ .status-icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #1769e8; border: 2px solid #c9ddfa; border-radius: 50%; } .status-icon svg { width: 28px; height: 28px; } /* Status text */ .status-text { display: flex; flex-direction: column; gap: 3px; } .status-text strong { font-family: Arial, sans-serif; font-size: 18px; font-weight: 800; color: #073f75; } .status-text span { font-family: Arial, sans-serif; font-size: 13px; color: #36577a; } /* ========================================= IMAGE ========================================= */ .moe-image { position: relative; min-height: 390px; overflow: hidden; background: #0a315a; } .moe-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; position: absolute; inset: 0; z-index: 1; } /* Blue divider */ .moe-image::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #075fd8; z-index: 4; } /* Decorative blue shape */ .image-blue-shape { position: absolute; left: -22px; top: 42%; width: 55px; height: 105px; background: #075fd8; border-radius: 0 45px 45px 0; z-index: 3; } /* ========================================= LAPTOP ========================================= */ @media (max-width: 1200px) { .moe-section { padding: 50px 25px; } .moe-content { padding: 38px 35px 35px 28px; } .moe-heading { gap: 16px; } .moe-icon { width: 54px; height: 54px; min-width: 54px; } .moe-heading h2 { font-size: 27px; } .quote-content p { font-size: 15px; line-height: 1.6; } .moe-status { margin-top: 20px; } } /* ========================================= TABLET ========================================= */ @media (max-width: 900px) { .moe-container { grid-template-columns: 1fr; } .moe-image { min-height: 360px; height: 360px; order: -1; } .moe-content { padding: 35px; } .moe-heading h2 { font-size: 28px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 600px) { .moe-section { padding: 30px 15px; } .moe-container { border-radius: 16px; } .moe-image { min-height: 280px; height: 280px; } .moe-content { padding: 28px 22px 30px; } .moe-heading { gap: 13px; } .moe-icon { width: 48px; height: 48px; min-width: 48px; } .moe-icon svg { width: 26px; height: 26px; } .moe-heading h2 { font-size: 23px; line-height: 1.15; } .moe-line { margin: 17px 0 22px; } .moe-quote { gap: 8px; } .quote-mark { width: 20px; min-width: 30px; font-size: 42px; } .quote-content p { font-size: 14px; line-height: 1.65; } .quote-source { font-size: 12px; line-height: 1.4; } .moe-status { width: 100%; min-height: 68px; padding: 9px 13px; } .status-icon { width: 43px; height: 43px; min-width: 43px; } .status-icon svg { width: 24px; height: 24px; } .status-text strong { font-size: 16px; } .status-text span { font-size: 11px; } } /* ========================================================= MINISTRY / UGC COMMON SECTION ========================================================= */ .moe-section { width: 100%; padding: 60px 32px; background: #f6f9fd; box-sizing: border-box; } .moe-container { width: min(1400px, 100%); min-height: 390px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.95fr; background: #ffffff; border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 12px 35px rgba(0, 56, 111, 0.08); } /* ========================================================= UGC SECTION ========================================================= */ .ugc-container { /* Image LEFT / Content RIGHT */ grid-template-columns: 0.95fr 1fr; align-items: stretch; } /* ========================================================= IMAGE ========================================================= */ .ugc-image { position: relative; min-height: 390px; overflow: hidden; background: #edf4fb; } .ugc-image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; z-index: 1; } /* ========================================================= IMAGE BLUE EDGE ========================================================= */ .ugc-image::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 7px; background: #075fd8; z-index: 3; } /* ========================================================= CONTENT ========================================================= */ .ugc-content { padding: 42px 48px 38px 42px; box-sizing: border-box; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; } /* ========================================================= HEADING ========================================================= */ .ugc-heading { display: flex; align-items: center; gap: 20px; } .ugc-icon { width: 60px; height: 60px; min-width: 60px; display: flex; align-items: center; justify-content: center; background: #edf5ff; color: #0867e8; border-radius: 50%; box-shadow: 0 5px 15px rgba(8, 103, 232, 0.08); } .ugc-icon svg { width: 31px; height: 31px; } .ugc-heading h3 { margin: 0; font-family: Arial, sans-serif; font-size: clamp(27px, 2.4vw, 34px); line-height: 1.15; font-weight: 800; color: #1b3047; } /* ========================================================= BLUE UNDERLINE ========================================================= */ .ugc-line { width: 70px; height: 4px; margin-top: 18px; margin-bottom: 25px; background: #1769e8; border-radius: 20px; } /* ========================================================= QUOTE ========================================================= */ .ugc-quote { display: flex; gap: 16px; position: relative; } .ugc-quote-mark { width: 32px; min-width: 32px; font-family: Georgia, serif; font-size: 56px; line-height: 0.8; font-weight: 700; color: #1769e8; } .ugc-quote-content { position: relative; padding-left: 15px; } .ugc-quote-content::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, #1769e8, #75aaff); border-radius: 10px; } .ugc-quote-content p { margin: 0; font-family: Arial, sans-serif; font-size: 17px; line-height: 1.65; font-weight: 400; color: #415a73; text-align: left; } /* ========================================================= SOURCE ========================================================= */ .ugc-source { margin-top: 13px; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.5; font-weight: 600; color: #1769e8; } /* ========================================================= APPROVED BOX ========================================================= */ .ugc-status { width: 290px; min-height: 68px; margin-top: 28px; padding: 10px 20px; box-sizing: border-box; display: flex; align-items: center; gap: 15px; background: #eaf3ff; border-radius: 10px; } .ugc-status-icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #075fd8; border: 2px solid #c9ddfa; border-radius: 50%; } .ugc-status-icon svg { width: 25px; height: 25px; } .ugc-status-text strong { font-family: Arial, sans-serif; font-size: 18px; font-weight: 800; color: #073f75; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .moe-section { padding: 50px 25px; } .ugc-content { padding: 38px 35px 35px 35px; } .ugc-heading { gap: 16px; } .ugc-icon { width: 54px; height: 54px; min-width: 54px; } .ugc-heading h3 { font-size: 28px; } .ugc-quote-content p { font-size: 15px; line-height: 1.6; } .ugc-source { font-size: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .ugc-container { grid-template-columns: 1fr; } .ugc-image { min-height: 360px; height: 360px; order: -1; } .ugc-content { padding: 35px; } .ugc-heading h3 { font-size: 28px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .moe-section { padding: 30px 15px; } .moe-container { border-radius: 16px; } .ugc-image { min-height: 280px; height: 280px; } .ugc-content { padding: 28px 22px 30px; } .ugc-heading { gap: 13px; } .ugc-icon { width: 48px; height: 48px; min-width: 48px; } .ugc-icon svg { width: 25px; height: 25px; } .ugc-heading h3 { font-size: 23px; line-height: 1.2; } .ugc-line { width: 55px; height: 3px; margin-top: 16px; margin-bottom: 20px; } .ugc-quote { gap: 8px; } .ugc-quote-mark { width: 20px; min-width: 20px; font-size: 43px; } .ugc-quote-content { padding-left: 12px; } .ugc-quote-content p { font-size: 14px; line-height: 1.65; } .ugc-source { font-size: 12px; line-height: 1.45; } .ugc-status { width: 100%; min-height: 64px; margin-top: 22px; padding: 8px 13px; } .ugc-status-icon { width: 42px; height: 42px; min-width: 42px; } .ugc-status-text strong { font-size: 16px; } } /* ================================ ODLC QUALIFICATIONS SECTION ================================ */ .odlc-validity-section { width: 100%; padding: 70px 0; background: #ffffff; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .validity-container { width: min(92%, 1380px); margin: 0 auto; box-sizing: border-box; } /* ================================ HEADING ================================ */ .validity-heading { text-align: center; margin-bottom: 48px; } .validity-heading h2 { margin: 0; color: #00386F; font-size: 38px; font-weight: 750; line-height: 1.2; letter-spacing: -0.6px; } .validity-heading p { margin: 14px auto 0; max-width: 700px; color: #60748b; font-size: 16px; line-height: 1.7; } .heading-line { display: block; width: 55px; height: 4px; margin: 0 auto 18px; background: #1475df; border-radius: 20px; } /* ================================ CARD GRID ================================ */ .validity-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; } /* ================================ CARD ================================ */ .validity-card { position: relative; min-height: 345px; padding: 30px 26px 32px; background: #ffffff; border: 1px solid #e5edf6; border-radius: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 8px 25px rgba(0, 56, 111, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Top accent */ .validity-card::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 3px; border-radius: 0 0 10px 10px; background: #1475df; } /* Hover */ .validity-card:hover { transform: translateY(-7px); border-color: #c8ddf4; box-shadow: 0 18px 45px rgba(0, 56, 111, 0.12); } /* ================================ ICON ================================ */ .icon-wrapper { width: 78px; height: 78px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; background: #eef6ff; border: 1px solid #d9eaff; border-radius: 50%; transition: background 0.3s ease, transform 0.3s ease; } .icon-wrapper svg { width: 38px; height: 38px; fill: none; stroke: #00386F; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; } /* Icon hover */ .validity-card:hover .icon-wrapper { background: #00386F; transform: scale(1.06); } .validity-card:hover .icon-wrapper svg { stroke: #ffffff; } /* ================================ CONTENT ================================ */ .card-content { display: flex; flex-direction: column; height: 100%; } .card-content h4 { margin: 0 0 18px; color: #172b42; font-size: 23px; font-weight: 700; line-height: 1.3; } .card-content p { margin: 0; color: #4b627b; font-size: 17px; line-height: 1.7; text-align: center; } /* ================================ RESPONSIVE ================================ */ @media (max-width: 1400px) { .validity-grid { grid-template-columns: repeat(3, 1fr); } .validity-card { min-height: 320px; } } @media (max-width: 900px) { .odlc-validity-section { padding: 60px 0; } .validity-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .validity-heading h2 { font-size: 32px; } } @media (max-width: 600px) { .odlc-validity-section { padding: 45px 0; } .validity-container { width: 92%; } .validity-heading { margin-bottom: 32px; } .validity-heading h2 { font-size: 27px; } .validity-heading p { font-size: 15px; } .validity-grid { grid-template-columns: 1fr; gap: 16px; } .validity-card { min-height: auto; padding: 28px 22px 30px; } .icon-wrapper { width: 70px; height: 70px; margin-bottom: 20px; } .icon-wrapper svg { width: 34px; height: 34px; } .card-content h3 { font-size: 21px; } .card-content p { font-size: 16px; } } /* ========================================= ODLC QUALITY & COMPLIANCE SECTION ========================================= */ .odlc-quality-section { width: 100%; padding: 70px 20px; background: #f7faff; box-sizing: border-box; } .odlc-quality-card { width: min(1380px, 100%); margin: 0 auto; padding: 58px 70px 62px; background: #ffffff; border: 1px solid rgba(0, 56, 111, 0.07); border-radius: 30px; box-shadow: 0 15px 45px rgba(0, 56, 111, 0.07), 0 3px 12px rgba(0, 56, 111, 0.04); box-sizing: border-box; position: relative; overflow: hidden; } /* ----------------------------------------- Subtle decorative background ----------------------------------------- */ .odlc-quality-card::before { content: ""; position: absolute; width: 220px; height: 220px; top: -130px; right: -80px; border-radius: 50%; background: rgba(0, 56, 111, 0.035); pointer-events: none; } .odlc-quality-card::after { content: ""; position: absolute; width: 180px; height: 180px; bottom: -120px; left: -80px; border-radius: 50%; background: rgba(0, 56, 111, 0.025); pointer-events: none; } /* ----------------------------------------- Heading ----------------------------------------- */ .odlc-quality-heading { display: flex; align-items: center; justify-content: center; gap: 22px; position: relative; z-index: 2; } .odlc-quality-heading h3 { margin: 0; color: #00386F; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: 38px; font-weight: 700; line-height: 1.25; text-align: center; letter-spacing: -0.5px; } .odlc-heading-line { width: 42px; height: 3px; border-radius: 20px; background: #1677d2; flex-shrink: 0; } /* ----------------------------------------- Divider ----------------------------------------- */ .odlc-quality-divider { width: 100%; height: 1px; margin: 42px 0 42px; background: linear-gradient(to right, transparent, rgba(0, 56, 111, 0.20), transparent); } /* ----------------------------------------- Content ----------------------------------------- */ .odlc-quality-content { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 28px; position: relative; z-index: 2; } /* ----------------------------------------- Icon ----------------------------------------- */ .odlc-quality-icon { width: 62px; height: 62px; min-width: 62px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #eef6ff; border: 1px solid rgba(0, 56, 111, 0.08); color: #00386F; font-size: 25px; box-shadow: 0 8px 20px rgba(0, 56, 111, 0.08); } /* ----------------------------------------- Paragraph ----------------------------------------- */ .odlc-quality-content p { margin: 0; color: #405875; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.8; text-align: justify; } /* ========================================= LAPTOP ========================================= */ @media (max-width: 1200px) { .odlc-quality-section { padding: 60px 20px; } .odlc-quality-card { padding: 50px 55px; } .odlc-quality-heading h2 { font-size: 34px; } .odlc-quality-content p { font-size: 18px; line-height: 1.75; } } /* ========================================= TABLET ========================================= */ @media (max-width: 768px) { .odlc-quality-section { padding: 45px 16px; } .odlc-quality-card { padding: 40px 28px 45px; border-radius: 24px; } .odlc-quality-heading { gap: 14px; } .odlc-heading-line { width: 28px; height: 3px; } .odlc-quality-heading h2 { font-size: 28px; line-height: 1.3; } .odlc-quality-divider { margin: 32px 0; } .odlc-quality-content { gap: 20px; align-items: flex-start; } .odlc-quality-icon { width: 54px; height: 54px; min-width: 54px; border-radius: 15px; font-size: 21px; } .odlc-quality-content p { font-size: 17px; line-height: 1.7; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 576px) { .odlc-quality-section { padding: 35px 12px; } .odlc-quality-card { padding: 32px 20px 36px; border-radius: 20px; } .odlc-quality-heading { display: block; text-align: center; } .odlc-heading-line { display: none; } .odlc-quality-heading h2 { font-size: 25px; line-height: 1.35; } .odlc-quality-divider { margin: 25px 0 28px; } .odlc-quality-content { display: block; } .odlc-quality-icon { width: 52px; height: 52px; min-width: 52px; margin-bottom: 18px; border-radius: 14px; } .odlc-quality-content p { font-size: 16px; line-height: 1.75; text-align: justify; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 380px) { .odlc-quality-card { padding: 28px 17px 32px; } .odlc-quality-heading h2 { font-size: 22px; } .odlc-quality-content p { font-size: 15px; line-height: 1.7; } } /* ========================================================= ODL MODEL - WHITE SECTION HEADING ========================================================= */ .odlcpage-section-title { font-family: Roboto, Arial, sans-serif !important; font-size: 38px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; color: #ffffff !important; margin: 0 !important; } .odlcpage-section-title strong { color: #ffffff !important; font-weight: 700 !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1199px) { .odlcpage-section-title { font-size: 36px !important; } } @media (max-width: 991px) { .odlcpage-section-title { font-size: 34px !important; line-height: 1.15 !important; } } @media (max-width: 767px) { .odlcpage-section-title { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -0.4px !important; } } @media (max-width: 575px) { .odlcpage-section-title { font-size: 29px !important; line-height: 1.15 !important; letter-spacing: -0.3px !important; } } /* ========================================================= ODL MODEL - WHITE BODY TEXT ========================================================= */ /* ========================================================= ODL MODEL - WHITE BODY TEXT ========================================================= */ .odl-model-body { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: 0.1px !important; color: #ffffff !important; margin: 0 0 15px 0 !important; } .odl-model-body strong { color: #ffffff !important; font-weight: 700 !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1199px) { .odl-model-body { font-size: 16px !important; line-height: 1.7 !important; } } @media (max-width: 991px) { .odl-model-body { font-size: 15px !important; line-height: 1.65 !important; } } @media (max-width: 767px) { .odl-model-body { font-size: 15px !important; line-height: 1.65 !important; } } @media (max-width: 575px) { .odl-model-body { font-size: 14px !important; line-height: 1.65 !important; } } /* ============================================================================ RECOGNITION AND VALIDITY: THE INSIDE OF THE SECTIONS ON THE HEADER AND FOOTER LADDER, AND THE BANNER'S DOT GRID HIDDEN --------------------------------------------------------------------------- Nothing on any other page is touched by this block and nothing in this page's PHP is touched at all. MEASURED BEFORE THIS BLOCK at 1342px header L 53.7 R 1288.3 w 1234.6 .moe-container x3 L 32.0 R 1310.0 w 1278.0 dL -21.7 dR -21.7 21.7px PAST the header's edge on each side .validity-container L 53.7 R 1288.3 dL 0.0 dR 0.0 .odlcf-cta-in L 53.7 R 1288.3 dL 0.0 dR 0.0 at 1000px header L 29.6 R 955.3 w 925.7 .moe-container x3 L 25.0 R 959.8 w 934.8 dL -4.6 dR -4.5 --------------------------------------------------------------------------- 1. THE THREE CONTENT CONTAINERS, 21.7px PAST THE HEADER'S EDGES .moe-container carries no width and no max-width of its own - it is width:none and fills whatever its section gives it - so the section decides. And the section does give it too much: .moe-section padding 50px / 25px / 50px / 25px at 1000px padding 32px each side at 1342px 25px on each side of a 984.8px section, and 32px on each side of a 1342px one, is not the header's 4% gutter, so at every width the containers start outside the header's edges rather than on them. At 1342px they overshoot by 21.7px on each side; at 1000px, where the header's own gutter steps down to 3% while this padding does not, the overshoot shrinks to 4.6px but is still outside. The other two containers on the page, .validity-container and .odlcf-cta-in, both measure dL 0.0 and dR 0.0 already and are not named. WHAT IS DONE .moe-section padding-left 0 padding-right 0 .moe-container the header's ladder width 92% max-width 1380px margin-left auto margin-right auto with 94% at 1199 and below, 90% at 767 and below, 92% at 480 and below - the ladder from header.css line 9213, which is what .validity-container and .odlcf-cta-in are already on. 92% of 1342 is 1234.64, which is the header's own width, so all three land on the header's left and right edges. Their vertical padding, 60px above and 60px below, is not touched. --------------------------------------------------------------------------- 2. THE BANNER'S DOT GRID, HIDDEN The banner paints one decoration and it is a pseudo-element rather than an element, so there is nothing in the PHP to keep and no selector to find by class: .recognition-and-validity-banner::before left 35px top 35px 60 x 60 background-image radial-gradient(rgba(255,255,255,.45) 1.5px, transparent 1.5px) background-size 12px 12px opacity .7 A 60px square of white dots at 12px pitch in the banner's top-left corner. It is removed with content:none, which is the only way to stop a pseudo-element painting - display:none on ::before would not do it, and there is no element of its own to hide. .recognition-and-validity-banner::before content none --------------------------------------------------------------------------- 3. THE BANNER'S GUTTER, WHICH WAS 49.2px OUT The banner's type is already on the reference scale and is not touched by this block: the badge Arial 15px/19.5px w700 ls 0.3px the reference's 15px at 1199px and below, 16px above it at the same widths the title Roboto 40px/43.2px w800 ls -1px the reference exactly UPPERCASE the text Arial 16px/28px w400 ls 0.2px the reference exactly rgba(255,255,255,.9) What was wrong was where it sat. Measured: at 1342px the badge at L 107.4 the logo at L 53.7 DELTA +53.7 at 1000px the badge at L 78.8 the logo at L 29.6 DELTA +49.2 The cause is the content column's own left padding - 9% at 1342px and 8% at 1000px - which is the banner's gutter arriving by a different road from the one every other banner uses. .recognition-and-validity-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 GUTTER GOES ON THE CONTENT COLUMN, NOT THE SECTION .recognition-and-validity-photo is position:absolute and pinned to the right, so it would not have moved either way - but its column is 48% of the section, and padding on the section would shrink it. Putting the gutter on the content column alone moves the text and nothing else. THE PHOTOGRAPH IS NOT NAMED .recognition-and-validity-photo keeps its position:absolute, its radius of 0, its clip-path of ellipse(100% 100% at 100% 50%), and images/gov31.png with its object-fit:cover and object-position 50% 50%. The photo column is 472.7 x 500.0 and stays that size. --------------------------------------------------------------------------- 4. THE PADDING WAS ALREADY RIGHT, AND IS NOT WRITTEN HERE Measured and not touched, because restating a value that already matches would change nothing: .recognition-and-validity-banner 0px / 0px .odl-model-section 0px / 0px .moe-section x3 60px / 60px .collab-validity-section 70px / 70px .odlcf-cta 36px / 36px Every section is already equal above and below. --------------------------------------------------------------------------- NOT TOUCHED .odl-image-panel and .odl-content-panel are the two halves of a full-bleed navy section with a full-bleed photograph in the left half. They are a deliberate edge-to-edge composition rather than a container, and they are not named. The title's span, "and Validity", is white where the reference banners colour their second half #A9C7FF. That is a colour and not a font, it is the one thing on this banner still differing from the reference, and it is not named here. Say so and it will be changed. ============================================================================ */ /* ---------------------------------- 1. the three content containers */ .moe-section { padding-left: 0 !important; padding-right: 0 !important; } .moe-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* --------------------------------------------------- 2. the banner's dots */ .recognition-and-validity-banner::before { content: none !important; } /* ---------------------------------------------------- 3. the banner's gutter */ .recognition-and-validity-content { padding-left: max(4%, 50% - 690px) !important; } /* ------------------------------------------ the same ladder as the header's */ @media screen and (max-width: 1199px) { .moe-container { width: 94% !important; } .recognition-and-validity-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { .moe-container { width: 90% !important; } .recognition-and-validity-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { .moe-container { width: 92% !important; } .recognition-and-validity-content { padding-left: max(4%, 50% - 690px) !important; } } /* ============================================================================ .validity-container WAS A HAND-WRITTEN 92% THAT DID NOT STEP WITH THE HEADER --------------------------------------------------------------------------- Measured after the block before this one: at 1342 .validity-container 1234.64 dL 0.0 dR 0.0 ON EDGES .moe-container x3 1234.62 dL 0.0 dR 0.0 ON EDGES at 1000 .validity-container 906.013 dL 9.8 dR 9.9 .moe-container x3 925.7 dL 0.0 dR 0.0 at 882 .validity-container 811.438 dL 8.8 dR 8.8 .moe-container x3 829.078 dL 0.0 dR 0.0 I reported .validity-container as already on the edges. That was true at 1342px and false at every width below 1200px, and I had measured only the one width - the same mistake as the two sections on the student page. WHY It is not on a ladder at all. It is a single 92% with no max-width and no breakpoints: .validity-container width 92% margin 0 4% 1342 x 92% = 1234.64 and the header at that width is also 92%, so 1234.64 -> they coincide 984.8 x 92% = 906.01 the header is 94% here, 925.7 -> 9.8 in 882 x 92% = 811.44 the header is 94% here, 829.1 -> 8.8 in Above 1199px the header is 92% too, so the hand-written figure happens to be right. Below it the header steps to 94%, and this container does not step at all - which is precisely the condition where the two drift apart. WHAT IS DONE .validity-container the header's real ladder width 92% max-width 1380px margin-left auto margin-right auto with 94% at 1199 and below, 90% at 767 and below, 92% at 480 and below. Its section, .odlc-validity-section, already measures padding 70px 0px 70px 0px - no side padding at any width - so unlike the three sections on the student page there is nothing to strip here and only the container is named. Its 70px above and 70px below are not touched. --------------------------------------------------------------------------- NOTHING ELSE IS NAMED, AND NO FONT IS TOUCHED The instruction was widths and the banner's dots. This block is width, and this paragraph is the record of what was left alone: the badge Arial 16px/20.8px w700 ls 0.3px unchanged the title Roboto 40px/43.2px w800 ls -1px unchanged UPPERCASE the text Arial 16px/28px w400 ls 0.2px unchanged re-measured after every block on this page and identical each time, and no font-family, font-size, font-weight, line-height, letter-spacing or text-transform appears anywhere in any of them. The photograph - .recognition-and-validity-photo at 644.2 x 500.0, position:absolute, radius 0, clip-path ellipse(100% 100% at 100% 50%), images/gov31.png at object-fit cover and object-position 50% 50% - is not named. The banner's background is not named. .odl-image-panel and .odl-content-panel, the deliberate full-bleed halves of the navy section, are not named. .odlcf-cta is not named. ============================================================================ */ .validity-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) { .validity-container { width: 94% !important; } } @media screen and (max-width: 767px) { .validity-container { width: 90% !important; } } @media screen and (max-width: 480px) { .validity-container { width: 92% !important; } } /* ========================================================================== LEFT AND RIGHT EDGES NOW MATCH THE HEADER AND THE FOOTER ------------------------------------------------------------------------- The banner above this section already lines up with the header. This one did not, because it was sized on its own scale: .odl-model-section { width: 100%; max-width: 1450px; margin: 60px auto } @media (max-width: 768px) { .odl-model-section { width: calc(100% - 30px) } } @media (max-width: 480px) { .odl-model-section { width: calc(100% - 20px) } } Measured left and right against the header container on the same page: viewport header width section width overhang each side 1920 1380.0 1450.0 35.0 1440 1308.2 1422.0 56.9 1366 1240.2 1348.0 53.9 1280 1161.0 1262.0 50.5 1200 1111.1 1182.0 35.5 1100 1017.1 1082.0 32.5 991 914.6 973.0 29.2 834 767.0 816.0 24.5 768 675.0 720.0 22.5 600 523.8 552.0 14.1 The header and the footer already run the same ladder, copied here rather than retyped, both from css/includes/header.css and css/includes/footer.css: width: 92%, max-width: 1380px, margin-left: auto, margin-right: auto, padding-left: 0, padding-right: 0 { @media (max-width: 1199px) { width: 94% } @media (max-width: 767px) { width: 90% } @media (max-width: 480px) { width: 92% } The same four conditions are used here, so the three edges stay together at every width by construction rather than by coincidence. NO !important, because no rule on this selector uses it. These come later in the file at the same specificity, so they win on order. The header and footer rules do carry !important; that is their business, not copied. WHAT THIS DOES NOT TOUCH Width only - width and max-width. The 60px margin, the 32px radius, the 720px minimum height, the 50/50 split, the image, the label, the icon, the heading, the rule under it, the body copy, the two colours and every media query that sets border-radius, min-height, font-size, padding or flex are left exactly as they are. The two dead width declarations at 768px and 480px are superseded by these, not deleted. The banner above is untouched, and so is every other section on the page. ========================================================================== */ .odl-model-section { width: 92%; max-width: 1380px; margin-left: auto; margin-right: auto; } @media (max-width: 1199px) { .odl-model-section { width: 94%; } } @media (max-width: 767px) { .odl-model-section { width: 90%; } } @media (max-width: 480px) { .odl-model-section { width: 92%; } } /* ========================================================================== ICON BADGE MADE ROUND AND CARD CONTENTS CENTRED ------------------------------------------------------------------------- Four declarations across three rules, in the five 'ODLC Qualifications Are Valid For' cards. No breakpoint - this holds everywhere. 1. THE BADGE WAS AN ELLIPSE, NOT A CIRCLE The stylesheet already asked for a circle: .icon-wrapper { width: 78px; height: 78px; border-radius: 50% } It was not delivering one. Measured live, the box rendered 78.0 x 56.1 at 1920 and 1440, 78.0 x 54.4 from 1200 down to 601, and 70.0 x 42.8 at 600 and below where the rule already asks for 70px. border-radius: 50% on a box that is not square does not give a circle, it gives an ellipse - which is the wide pale oval in the screenshot. The height was being taken away by flexbox, not by the stylesheet. The card is a column flex container and the badge is a flex item in it, so it came in with the default flex: 0 1 auto - grow 0, shrink 1. Measured computed flex on the badge: 0 1 auto, flex-shrink 1. When the column ran short, the badge was shrinkable and the other item was not, so the badge absorbed the whole shortfall and lost its height. Its own height declaration was never in dispute - it was simply outvoted by the flex algorithm. .icon-wrapper { flex: 0 0 auto } basis stays auto, so the badge still takes the height this stylesheet gives it - 78px, or the 70px the 600px band already asks for - and shrink is turned off so nothing can take it away again. Nothing about the size or the radius is changed; the badge simply gets to be the size it was already written to be. Measured, all five cards: badge before badge after 78.0 x 56.1 78.0 x 78.0 1920 / 1600 / 1440 / 1401 78.0 x 54.4 78.0 x 78.0 1400 down to 601 70.0 x 42.8 70.0 x 70.0 600 down to 320 2. THE CONTENTS SAT AT THE TOP OF THE CARD The card is 345px tall, and holds 320px at 1400 and below, but its content sat at the top with the dead space all underneath. Measured as the distance from the card's border edge to the badge above, and from the paragraph's last line to the border edge below: viewport above the badge below the text 1920 30.0 113.4 1200 30.0 134.9 900 30.0 136.8 768 30.0 136.8 Two hundred and eighty pixels of card, and between them a 30px band at the top and a 113 to 137px band at the bottom. The padding is 30px top and 32px bottom, so neither end was even using the space it had. Two declarations, and they only work together: .card-content { height: auto } .validity-card { justify-content: center } .card-content carried height: 100%, which claims the whole height of the card for itself. While it does that there is no slack for justify-content to distribute - centring is a no-op on a box that already fills its container. Taking it back to its natural height is what creates the slack; centring is what spends it. This was measured, not assumed. Centring on its own, with height: 100% left in place, changed nothing at all - still 30.0 above and 91.5 below at 1440, identical to before. Only the pair produces the centred result. Measured with both in place: viewport above the badge below the text 1920 59.8 61.8 1200 69.6 71.6 1024 60.2 62.2 900 70.6 72.6 768 70.6 72.6 601 52.7 54.7 Even to within 2px, which is the padding - 30px top against 32px bottom. The contents now sit in the middle of the card instead of hanging from the top of it. Card heights are unchanged at 345px and 320px, and the section keeps its height, because nothing was added or removed, only moved. 3. THE TEXT WAS LEFT-ALIGNED Every one of these five cards reads left, in both the heading and the paragraph, even though this stylesheet asks for centre in three places: .validity-card { text-align: center } .card-content p { text-align: center } Neither was reaching the screen. Both heading and paragraph carry classes of their own - .odlc-small-card-title and .odlc-small-card-text - and css/global-typography.css sets, on both of them: text-align: left !important An !important beats any amount of specificity, so the page's centre rule lost before it was ever compared. Measured computed text-align on all five cards at every width: left. global-typography.css is loaded by 45 pages and is not this page's to change, so the answer is written here, scoped to this section and answered in the same terms: .validity-card .card-content .odlc-small-card-title, .validity-card .card-content .odlc-small-card-text { text-align: center !important } The !important is there because the rule being answered already uses one on that same property on that same element - there is no other way to win it. The scoping keeps it to these ten elements: both classes occur five times in this page and nowhere outside the validity grid, and neither class appears in any other stylesheet in the project. The other 44 pages that load global-typography.css are untouched by this rule. -------------------------------------------------------------------------- NOTHING ELSE Four declarations: flex on the badge, height on the content block, justify-content on the card, text-align on the heading and the paragraph. The badge's 78px and 70px sizes, its background, its border, its radius and its 38px icon are not touched. The card's width, padding, radius, shadow, min-heights, hover lift and the blue rule across the top are not touched. The heading and paragraph keep the 17px and 14px and the colours they had - those come from global-typography.css with !important and are left exactly as they are. The grid, the container ladder, the section padding and the five SVGs are not touched. recognition-and-validity.php is not opened. ========================================================================== */ .icon-wrapper { flex: 0 0 auto; } .card-content { height: auto; } .validity-card { justify-content: center; } .validity-card .card-content .odlc-small-card-title, .validity-card .card-content .odlc-small-card-text { text-align: center !important; }