/*========================== 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; } } *{ margin:0; padding:0px; box-sizing:border-box; } body{ font-family:'Roboto',Arial; background:#ffffff; overflow-x:hidden; } img{ max-width:100%; } a{ text-decoration:none; } /* ===================================================== ADMINISTRATIVE STRUCTURE BANNER ===================================================== */ .admin-banner { width: 100%; min-height: 300px; overflow: hidden; background: #083C7C; font-family: Arial, Helvetica, sans-serif; } /* ===================================================== MAIN BANNER ===================================================== */ .admin-banner-inner { width: 100%; min-height: 500px; display: flex; align-items: stretch; position: relative; overflow: hidden; background: #083C7C; } /* ===================================================== LEFT CONTENT ===================================================== */ .admin-banner-content { width: 52%; padding: 80px 7%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 5; } /* ===================================================== BADGE ===================================================== */ .admin-badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; margin-bottom: 24px; border-radius: 30px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.20); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: .4px; } .admin-badge i { font-size: 15px; } /* ===================================================== HEADING ===================================================== */ .admin-banner-content h1 { margin: 0; color: #FFFFFF; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.08; letter-spacing: -1px; } .admin-banner-content h1 span { display: block; color: #AFCBFF; } /* ===================================================== LINE ===================================================== */ .admin-line { width: 48px; height: 3px; margin: 24px 0 20px; background: #FFFFFF; border-radius: 5px; } /* ===================================================== DESCRIPTION ===================================================== */ .admin-banner-content p { max-width: 560px; margin: 0; color: rgba(255,255,255,.90); font-size: 16px; line-height: 1.75; } /* ===================================================== RIGHT IMAGE ===================================================== */ .admin-banner-image { width: 48%; min-height: 500px; position: relative; overflow: hidden; } /* ===================================================== IMAGE SHAPE ===================================================== */ .admin-image-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #AFCBFF; clip-path: ellipse( 100% 100% at 100% 50% ); } /* ===================================================== IMAGE ===================================================== */ .admin-image-shape img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .8s ease; } .admin-banner:hover .admin-image-shape img { transform: scale(1.035); } /* ===================================================== CURVED BLUE TRANSITION ===================================================== */ /* .admin-banner-image::before { content: ""; position: absolute; left: -15px; top: 0; width: 18%; height: 100%; z-index: 3; background: #083C7C; clip-path: ellipse( 100% 100% at 0% 50% ); } */ /* ===================================================== LIGHT CURVE ===================================================== */ /* .admin-banner-image::after { content: ""; position: absolute; left: 0; top: 0; width: 25px; height: 100%; z-index: 4; background: #AFCBFF; border-radius: 50%; } */ /* ===================================================== DECORATIVE DOTS ===================================================== */ .admin-banner-inner::before { content: ""; position: absolute; left: 35px; top: 35px; width: 60px; height: 60px; background-image: radial-gradient( rgba(255,255,255,.45) 1.6px, transparent 1.6px ); background-size: 12px 12px; z-index: 2; } /* ===================================================== DECORATIVE CIRCLES ===================================================== */ .admin-banner-inner::after { content: ""; position: absolute; right: 45%; top: 25px; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,255,255,.03), 0 0 0 28px rgba(255,255,255,.025); z-index: 2; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991.98px) { .admin-banner-inner { min-height: 430px; } .admin-banner-content { width: 52%; padding: 60px 35px; } .admin-banner-image { width: 48%; min-height: 430px; } .admin-banner-content h1 { font-size: 43px; } .admin-banner-content p { font-size: 14px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767.98px) { .admin-banner-inner { display: flex; flex-direction: column; min-height: auto; } .admin-banner-content { width: 100%; min-height: 360px; padding: 55px 25px 45px; } .admin-banner-content h1 { font-size: clamp(34px, 9vw, 44px); } .admin-banner-content p { font-size: 14px; line-height: 1.65; } .admin-banner-image { width: 100%; height: 300px; min-height: 300px; } .admin-image-shape { clip-path: none; border-radius: 0; } .admin-banner-image::before, .admin-banner-image::after { display: none; } .admin-banner-inner::after { display: none; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 480px) { .admin-banner-content { min-height: 340px; padding: 45px 20px; } .admin-badge { font-size: 10px; padding: 7px 12px; } .admin-banner-content h1 { font-size: 32px; } .admin-banner-content p { font-size: 13px; } .admin-banner-image { height: 250px; min-height: 250px; } } /* ========================================================= GOVERNANCE AND INSTITUTIONAL FRAMEWORK MODERN UI ========================================================= */ .governance-framework-section { position: relative; width: 100%; padding: 75px 3.7% 80px; background: #F4F7FB; overflow: hidden; } /* ========================================================= SUBTLE BACKGROUND DECORATION ========================================================= */ .governance-framework-section::before { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; top: -130px; border: 1px solid rgba(8, 60, 124, 0.08); border-radius: 50%; box-shadow: 0 0 0 35px rgba(8, 60, 124, 0.025), 0 0 0 70px rgba(8, 60, 124, 0.018); pointer-events: none; } /* ========================================================= CONTENT CONTAINER ========================================================= */ .governance-framework-container { position: relative; z-index: 2; width: 100%; max-width: 1500px; margin: 0 auto; text-align: center; } /* ========================================================= LABEL ========================================================= */ .governance-framework-label { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 15px; color: #286ED1; font-size: 13px; font-weight: 700; letter-spacing: 1px; } .governance-framework-label span { width: 35px; height: 2px; background: #286ED1; border-radius: 10px; } /* ========================================================= MAIN HEADING ========================================================= */ .governance-framework-container h2 { margin: 0; color: #083C7C; font-family: Arial, Helvetica, sans-serif; font-size: 45px; font-weight: 700; line-height: 1.2; letter-spacing: -0.6px; } /* ========================================================= HEADING LINE ========================================================= */ .governance-framework-line { width: 55px; height: 3px; margin: 20px auto 22px; background: #083C7C; border-radius: 10px; } /* ========================================================= DESCRIPTION ========================================================= */ .governance-framework-container p { max-width: 1450px; margin: 0 auto; color: #294B72; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.75; font-weight: 400; text-align: justify; } /* ========================================================= STRONG TEXT ========================================================= */ .governance-framework-container p strong { color: #083C7C; font-weight: 700; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .governance-framework-section { padding: 60px 4% 65px; } .governance-framework-container h2 { font-size: 38px; } .governance-framework-container p { font-size: 16px; line-height: 1.7; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .governance-framework-section { padding: 50px 5% 55px; } .governance-framework-label { font-size: 11px; gap: 8px; } .governance-framework-label span { width: 24px; } .governance-framework-container h2 { font-size: 30px; line-height: 1.25; } .governance-framework-line { margin: 16px auto 18px; } .governance-framework-container p { font-size: 15px; line-height: 1.65; text-align: justify; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .governance-framework-section { padding: 45px 5% 50px; } .governance-framework-container h2 { font-size: 27px; } .governance-framework-container p { font-size: 14px; } } /* ========================================================= ADMINISTRATIVE TOPICS ========================================================= */ .admin-details-section { width: 100%; padding: 60px 0 80px; background: #f4f8fc; font-family: Arial, Helvetica, sans-serif; color: #083C7C; } .admin-details-section .container { max-width: 1440px; } /* ========================================================= TOPIC NAVIGATION ========================================================= */ .admin-topic-nav { display: flex; align-items: stretch; justify-content: center; gap: 18px; margin-bottom: 30px; } .admin-topic-btn { flex: 1; min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid #dce8f5; border-radius: 10px; background: #ffffff; color: #083C7C; text-align: left; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; } .admin-topic-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(8, 60, 124, 0.12); } .admin-topic-btn.active { background: #083C7C; color: #ffffff; border-color: #083C7C; box-shadow: 0 10px 25px rgba(8, 60, 124, 0.18); } .topic-number { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4fc; color: #083C7C; font-size: 13px; font-weight: 700; } .admin-topic-btn.active .topic-number { background: #ffffff; color: #083C7C; } .admin-topic-btn strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; } .admin-topic-btn small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; opacity: 0.75; } /* ========================================================= CONTENT CARD ========================================================= */ .admin-topic-content { width: 100%; background: #ffffff; border: 1px solid #dce8f5; border-radius: 18px; box-shadow: 0 8px 30px rgba(8, 60, 124, 0.07); overflow: hidden; } /* ========================================================= INDIVIDUAL PANEL ========================================================= */ .topic-panel { display: none; grid-template-columns: 130px 1fr; gap: 40px; padding: 55px 60px; min-height: 430px; } .topic-panel.active { display: grid; animation: topicFade 0.45s ease; } @keyframes topicFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= ICON ========================================================= */ .topic-icon { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4fc; color: #083C7C; font-size: 46px; box-shadow: inset 0 0 0 1px #d7e5f5; } .topic-icon i { line-height: 1; } /* ========================================================= CONTENT ========================================================= */ .topic-content { max-width: 900px; } .topic-label { display: block; margin-bottom: 10px; color: #083C7C; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; } .topic-content h2 { margin: 0 0 20px; color: #083C7C; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.15; } .topic-content h2::after { content: ""; display: block; width: 50px; height: 3px; margin-top: 14px; background: #083C7C; border-radius: 10px; } .topic-content > p { margin: 0 0 28px; color: #405875; font-size: 17px; line-height: 1.8; } .topic-content h4 { margin: 0 0 15px; color: #083C7C; font-size: 18px; font-weight: 700; } .topic-content ul { margin: 0; padding-left: 22px; } .topic-content li { margin-bottom: 10px; color: #405875; font-size: 16px; line-height: 1.6; } .topic-content li::marker { color: #083C7C; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .admin-topic-nav { flex-wrap: wrap; } .admin-topic-btn { flex: 0 0 calc(50% - 9px); } } @media (max-width: 768px) { .admin-details-section { padding: 40px 0 60px; } .admin-topic-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .admin-topic-btn { width: 100%; min-height: 72px; padding: 12px; } .admin-topic-btn strong { font-size: 12px; } .admin-topic-btn small { font-size: 10px; } .topic-panel { grid-template-columns: 1fr; gap: 25px; padding: 35px 25px; min-height: auto; } .topic-icon { width: 75px; height: 75px; font-size: 30px; } .topic-content h2 { font-size: 30px; } .topic-content > p { font-size: 15px; } .topic-content li { font-size: 14px; } } @media (max-width: 480px) { .admin-topic-nav { grid-template-columns: 1fr; } .admin-topic-btn { min-height: 65px; } .topic-panel { padding: 28px 20px; } } /* SAME ODLC SECTION WIDTH & PADDING */ .admin-details-section { width: 100%; padding: 60px 0 80px; } .admin-details-section .container { max-width: 1440px; width: 100%; margin: 0 auto; padding-left: 50px; padding-right: 50px; } @media (max-width: 992px) { .admin-details-section .container { padding-left: 35px; padding-right: 35px; } } @media (max-width: 768px) { .admin-details-section .container { padding-left: 25px; padding-right: 25px; } } @media (max-width: 480px) { .admin-details-section .container { padding-left: 18px; padding-right: 18px; } } .admin-topic-nav { margin-bottom: 30px; } .admin-topic-content { width: 100%; } .topic-panel { padding: 55px 60px; } /* ========================================================= STATUTORY COMMITTEES - BLUE MODERN UI ========================================================= */ .statutory-committees-section { width: 100%; padding: 60px 0 80px; background: #083C7C; font-family: Arial, Helvetica, sans-serif; } /* SAME ODLC WIDTH */ .statutory-committees-section .container { max-width: 1440px; width: 100%; margin: 0 auto; padding-left: 50px; padding-right: 50px; } /* ========================================================= MAIN CARD ========================================================= */ .statutory-committees-card { width: 100%; padding: 32px 36px 35px; background: linear-gradient( 135deg, #0b478d, #083C7C 55%, #062f63 ); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18); overflow: hidden; } /* ========================================================= HEADER ========================================================= */ .statutory-header { display: flex; align-items: center; gap: 25px; } .statutory-main-icon { width: 74px; height: 74px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; color: #083C7C; font-size: 31px; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08); } /* ========================================================= HEADING ========================================================= */ .statutory-heading h2 { margin: 0; color: #ffffff; font-size: 25px; font-weight: 700; text-transform: uppercase; line-height: 1.2; } .statutory-line { width: 45px; height: 3px; margin: 10px 0 11px; background: #8fc4ff; border-radius: 5px; } .statutory-heading p { max-width: 650px; margin: 0; color: #dceeff; font-size: 15px; line-height: 1.6; } /* ========================================================= DIVIDER ========================================================= */ .statutory-divider { width: 100%; margin: 24px 0 25px; border-top: 1px dashed rgba(255, 255, 255, 0.30); } /* ========================================================= COMMITTEE LIST ========================================================= */ .statutory-list { display: grid; grid-template-columns: repeat(6, 1fr) !important; align-items: stretch; } /* ========================================================= COMMITTEE ITEM ========================================================= */ .statutory-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 135px; padding: 0 18px; text-align: center; text-decoration: none; color: #ffffff; border-right: 1px solid rgba(255, 255, 255, 0.22); transition: transform 0.35s ease, background 0.35s ease; } .statutory-item:last-child { border-right: none; } .statutory-item:hover { transform: translateY(-7px); } /* ========================================================= ICONS ========================================================= */ .statutory-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; border-radius: 50%; background: #e8f3ff; color: #083C7C; font-size: 28px; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12); transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease; } /* DIFFERENT ACCENT SHADES */ .statutory-item:nth-child(1) .statutory-icon { background: #dff1ff; } .statutory-item:nth-child(2) .statutory-icon { background: #e7e1ff; } .statutory-item:nth-child(3) .statutory-icon { background: #dff8f1; } .statutory-item:nth-child(4) .statutory-icon { background: #fff0d9; } .statutory-item:nth-child(5) .statutory-icon { background: #e5e9ff; } .statutory-item:hover .statutory-icon { background: #ffffff; color: #083C7C; transform: scale(1.12) rotate(3deg); } /* ========================================================= TITLES ========================================================= */ .statutory-item h6 { margin: 0; color: #ffffff; font-size: 15px; font-weight: 600; line-height: 1.45; } /* ========================================================= SMALL HOVER UNDERLINE ========================================================= */ .statutory-item h6::after { content: ""; display: block; width: 0; height: 2px; margin: 7px auto 0; background: #8fc4ff; border-radius: 5px; transition: width 0.3s ease; } .statutory-item:hover h6::after { width: 30px; } /* ========================================================= LARGE DESKTOP 1400px+ ========================================================= */ @media (min-width: 1400px) { .statutory-committees-section .container { padding-left: 50px; padding-right: 50px; } .statutory-committees-section .statutory-item { min-height: 150px; padding-left: 15px; padding-right: 15px; } } /* ========================================================= LAPTOP 1200px - 1399px STILL 6 IN ONE ROW ========================================================= */ @media (min-width: 1200px) and (max-width: 1399px) { .statutory-committees-section .container { padding-left: 35px; padding-right: 35px; } .statutory-committees-card { padding-left: 28px; padding-right: 28px; } .statutory-committees-section .statutory-item { padding-left: 8px; padding-right: 8px; min-height: 145px; } .statutory-committees-section .statutory-icon { width: 58px; height: 58px; min-width: 58px; min-height: 58px; font-size: 25px; } .statutory-committees-section .statutory-item h6 { font-size: 14px; } } /* ========================================================= STATUTORY COMMITTEES TABLET - 2 CARDS PER ROW ========================================================= */ @media (min-width: 768px) and (max-width: 1199px) { .statutory-committees-section { padding: 55px 0 65px; } .statutory-committees-section .container { width: 100%; padding-left: 30px !important; padding-right: 30px !important; } /* =============================== MAIN CARD =============================== */ .statutory-committees-card { padding: 30px 25px 32px; border-radius: 17px; } /* =============================== HEADER =============================== */ .statutory-header { align-items: flex-start; gap: 20px; } .statutory-main-icon { width: 65px; height: 65px; min-width: 65px; min-height: 65px; font-size: 27px; } .statutory-heading h2 { font-size: 25px; line-height: 1.25; } .statutory-heading p { max-width: 750px; font-size: 15px; line-height: 1.65; text-align: justify; } /* =============================== DIVIDER =============================== */ .statutory-divider { margin: 25px 0; } /* =============================== 2 CARDS PER ROW =============================== */ .statutory-committees-section .statutory-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; width: 100%; } /* =============================== COMMITTEE CARD =============================== */ .statutory-committees-section .statutory-item { width: 100%; min-height: 120px; margin: 0 !important; padding: 18px !important; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; text-align: left; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 14px; box-sizing: border-box; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; } /* Remove old borders */ .statutory-committees-section .statutory-item:nth-child(n) { border-top: none !important; border-right: none !important; border-bottom: none !important; } /* Hover */ .statutory-committees-section .statutory-item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32) !important; } /* =============================== ICON =============================== */ .statutory-committees-section .statutory-icon { width: 58px; height: 58px; min-width: 58px; min-height: 58px; margin: 0; flex-shrink: 0; font-size: 25px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.10); } /* =============================== TITLE =============================== */ .statutory-committees-section .statutory-item h6 { margin: 0; color: #FFFFFF; font-size: 15px; line-height: 1.45; font-weight: 600; text-align: left; } /* Remove old underline */ .statutory-committees-section .statutory-item h6::after { display: none; } } /* ========================================================= STATUTORY COMMITTEES MOBILE - SINGLE MODERN CARDS ========================================================= */ @media (max-width: 767px) { /* Section spacing */ .statutory-committees-section { padding: 45px 0 55px; } /* Main container */ .statutory-committees-section .container { width: 100%; padding-left: 18px !important; padding-right: 18px !important; } /* Main blue card */ .statutory-committees-card { padding: 25px 18px 28px; border-radius: 16px; } /* ===================================================== HEADER ===================================================== */ .statutory-header { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .statutory-main-icon { width: 60px; height: 60px; min-width: 60px; min-height: 60px; font-size: 25px; } .statutory-heading h2 { font-size: 24px; line-height: 1.2; } .statutory-heading p { max-width: 100%; font-size: 14px; line-height: 1.65; text-align: justify; } /* ===================================================== DIVIDER ===================================================== */ .statutory-divider { margin: 25px 0 20px; } /* ===================================================== SINGLE COLUMN ===================================================== */ .statutory-committees-section .statutory-list { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100%; margin: 0; } /* ===================================================== INDIVIDUAL COMMITTEE CARD ===================================================== */ .statutory-committees-section .statutory-item { width: 100% !important; min-height: 82px; margin: 0 !important; padding: 14px 16px !important; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; text-align: left; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 14px; box-sizing: border-box; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; } /* Remove old borders */ .statutory-committees-section .statutory-item:nth-child(n) { border-top: none !important; border-right: none !important; border-bottom: none !important; } /* Hover / touch effect */ .statutory-committees-section .statutory-item:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.30) !important; } /* ===================================================== ICON ===================================================== */ .statutory-committees-section .statutory-icon { width: 52px; height: 52px; min-width: 52px; min-height: 52px; margin: 0; flex-shrink: 0; font-size: 22px; box-shadow: none; } /* ===================================================== TITLE ===================================================== */ .statutory-committees-section .statutory-item h6 { margin: 0; color: #FFFFFF; font-size: 15px; line-height: 1.4; font-weight: 600; text-align: left; } /* Remove underline effect */ .statutory-committees-section .statutory-item h6::after { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .statutory-committees-section .container { padding-left: 15px !important; padding-right: 15px !important; } .statutory-committees-card { padding: 22px 15px 25px; } .statutory-main-icon { width: 56px; height: 56px; min-width: 56px; min-height: 56px; font-size: 23px; } .statutory-heading h2 { font-size: 22px; } .statutory-heading p { font-size: 13px; line-height: 1.6; } .statutory-committees-section .statutory-item { min-height: 76px; padding: 12px 14px !important; gap: 13px; border-radius: 13px; } .statutory-committees-section .statutory-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 20px; } .statutory-committees-section .statutory-item h6 { font-size: 14px; line-height: 1.35; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .statutory-committees-section .container { padding-left: 12px !important; padding-right: 12px !important; } .statutory-committees-card { padding-left: 12px; padding-right: 12px; } .statutory-committees-section .statutory-item { min-height: 72px; padding: 11px 12px !important; gap: 12px; } .statutory-committees-section .statutory-icon { width: 45px; height: 45px; min-width: 45px; min-height: 45px; font-size: 19px; } .statutory-committees-section .statutory-item h6 { font-size: 13px; } } /* ========================================================= LEGAL STATUS — MODERN UI ========================================================= */ .legal-status-section { width: 100%; padding: 50px 0 70px; background: #f5f8fc; font-family: Arial, Helvetica, sans-serif; } .legal-status-section .container { max-width: 1440px; width: 100%; margin: 0 auto; padding-left: 50px; padding-right: 50px; } /* MAIN CARD */ .legal-status-card { position: relative; display: flex; align-items: center; min-height: 210px; padding: 35px 50px; background: #ffffff; border: 1px solid #dce7f3; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(8, 60, 124, 0.08); transition: transform 0.35s ease, box-shadow 0.35s ease; } .legal-status-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(8, 60, 124, 0.13); } /* BLUE LEFT ACCENT */ .legal-status-card::before { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 100%; background: #083C7C; } /* ICON */ .legal-icon-wrap { position: relative; flex-shrink: 0; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; margin-right: 32px; border-radius: 50%; background: #083C7C; color: #ffffff; font-size: 39px; box-shadow: 0 0 0 9px #eaf2fa; } /* CONTENT */ .legal-content { position: relative; z-index: 2; } .legal-label { display: block; margin-bottom: 7px; color: #4778ad; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; } .legal-content h2 { margin: 0; color: #083C7C; font-size: 34px; font-weight: 700; line-height: 1.15; } /* UNDERLINE */ .legal-line { width: 50px; height: 3px; margin: 12px 0 13px; background: #083C7C; border-radius: 10px; } /* DESCRIPTION */ .legal-content p { max-width: 650px; margin: 0; color: #405875; font-size: 16px; line-height: 1.7; } /* RIGHT DECORATIVE ICON */ .legal-accent { position: absolute; right: 40px; top: 50%; width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; background: #f2f7fc; color: #c4d8ed; font-size: 42px; } .legal-accent::before { content: ""; position: absolute; inset: 12px; border: 1px solid #d9e6f3; border-radius: 50%; } .legal-accent i { position: relative; z-index: 2; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 992px) { .legal-status-section .container { padding-left: 35px; padding-right: 35px; } .legal-status-card { padding: 32px 40px; } .legal-accent { right: 25px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .legal-status-section { padding: 40px 0 55px; } .legal-status-section .container { padding-left: 25px; padding-right: 25px; } .legal-status-card { min-height: auto; padding: 30px 25px; flex-direction: column; align-items: flex-start; } .legal-icon-wrap { width: 75px; height: 75px; margin-right: 0; margin-bottom: 25px; font-size: 31px; } .legal-content h2 { font-size: 28px; } .legal-content p { font-size: 15px; } .legal-accent { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .legal-status-section .container { padding-left: 18px; padding-right: 18px; } .legal-status-card { padding: 25px 20px; } .legal-content h2 { font-size: 25px; } } /* ========================================================= ADMINISTRATIVE STRUCTURE BANNER = ACADEMIC COUNCIL BANNER ------------------------------------------------------------ Same markup shape as the Academic Council banner - left content with the badge, title, rule and paragraph, right image in a curved shape, same photograph (gov31.png) - but styled with its own admin-* classes, which came out quite differently: Academic Council Administrative Structure banner min-height 430px 300px (+ 500px inner) content pad 80px 50px.. 80px 7% content z-index 3 5 line 55px, radius 10px 48px, radius 5px photo curve 105% x 100% 100% x 100% photo tint #dce9f7 #AFCBFF no seam, no dot motif seam + dot + ring motifs no fade-in none text on the logo's edge 7% of the banner This is the Academic Council banner's rule set, mapped onto the admin-* class names, with the same breakpoints (1200 / 991 / 767 / 480 / 360 and the reduced-motion guard), so both banners are now identical on every device view. Because this page wraps the two halves in .admin-banner-inner, that wrapper takes the role the section plays on the Academic Council page - the flex row that holds content and image. Nothing is deleted. No markup and no content is touched. These rules sit at the end of the file, so they take precedence over the older admin banner rules above. ========================================================= */ .admin-banner, .admin-banner-inner { position: relative; width: 100%; min-height: 430px; display: flex; align-items: stretch; overflow: hidden; background: #083C7C; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } /* the Academic Council banner shows neither decoration */ .admin-banner::before, .admin-banner::after, .admin-banner-inner::before, .admin-banner-inner::after, .admin-banner-content::after { display: none !important; content: none !important; } .admin-banner-content { width: 52%; padding: 80px 50px 80px 8%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; } .admin-banner-content h1 { margin: 0; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(42px, 5vw, 68px); font-weight: 700; line-height: 1.08; letter-spacing: -1px; } .admin-line { width: 55px; height: 3px; margin: 22px 0 18px; background: #ffffff; border-radius: 10px; transition: width 0.35s ease; } .admin-banner-content p { max-width: 540px; margin: 0; color: rgba(255, 255, 255, 0.90); font-size: 16px; font-weight: 400; line-height: 1.75; } .admin-banner-image { position: relative; width: 48%; min-height: 430px; overflow: hidden; z-index: 2; } /* the curved photo edge, and no seam strip */ .admin-banner-image::before, .admin-banner-image::after { display: none !important; content: none !important; } .admin-image-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #dce9f7; clip-path: ellipse(105% 100% at 100% 50%); } .admin-image-shape img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transform: scale(1.04); } .admin-banner:hover .admin-image-shape img { transform: scale(1.04); } /* the same fade-in the Academic Council banner uses */ .admin-banner-content { animation: adminCouncilContentIn 0.8s ease-out both; } .admin-image-shape { animation: adminCouncilImageIn 1s ease-out both; } @keyframes adminCouncilContentIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes adminCouncilImageIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } } /* ---------- 1200px ---------- */ @media (max-width: 1200px) { .admin-banner-content { padding-left: 6%; padding-right: 35px; } } /* ---------- 991px ---------- */ @media (max-width: 991px) { .admin-banner, .admin-banner-inner { min-height: 400px; } .admin-banner-content { width: 52%; padding: 60px 30px 60px 5%; } .admin-banner-content h1 { font-size: 44px; } .admin-banner-content p { font-size: 14px; line-height: 1.7; } .admin-banner-image { width: 48%; min-height: 400px; } } /* ---------- 767px ---------- */ @media (max-width: 767px) { .admin-banner-inner { display: flex; flex-direction: column; min-height: auto; } .admin-banner-content { width: 100%; min-height: 340px; padding: 55px 25px 45px; } .admin-banner-content h1 { font-size: clamp(34px, 9vw, 46px); line-height: 1.12; } .admin-banner-content p { max-width: 100%; font-size: 14px; line-height: 1.7; } .admin-line { width: 45px; margin: 20px 0 16px; } .admin-banner-image { width: 100%; height: 300px; min-height: 300px; } .admin-image-shape { position: relative; inset: auto; width: 100%; height: 100%; clip-path: none; border-radius: 0; } .admin-image-shape img { object-position: center; } } /* ---------- 480px ---------- */ @media (max-width: 480px) { .admin-banner-content { min-height: 320px; padding: 45px 20px 38px; } .admin-banner-content h1 { font-size: 32px; letter-spacing: -0.5px; } .admin-banner-content p { font-size: 13px; line-height: 1.65; } .admin-line { width: 42px; height: 3px; margin: 18px 0 15px; } .admin-banner-image { height: 250px; min-height: 250px; } } /* ---------- 360px ---------- */ @media (max-width: 360px) { .admin-banner-content { padding: 40px 18px 35px; } .admin-banner-content h1 { font-size: 29px; } .admin-banner-content p { font-size: 12px; } .admin-banner-image { height: 220px; min-height: 220px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .admin-banner-content, .admin-image-shape, .admin-image-shape img { animation: none !important; transition: none !important; } } /* ---------- the later 991px override on the council page ---------- */ @media (max-width: 991px) { .admin-banner-image { width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } .admin-image-shape { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; clip-path: none !important; } .admin-image-shape img { width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; } } /* ---------- align the banner text to the header logo ---------- */ .admin-banner-content { padding-left: max(4%, calc((100% - 1380px) / 2)) !important; } @media (max-width: 1199px) { .admin-banner-content { padding-left: 3% !important; } } @media (max-width: 767px) { .admin-banner-content { padding-left: 5% !important; } } /* ========================================================= GOVERNANCE AND INSTITUTIONAL FRAMEWORK CARD THE PARAGRAPH RUNS THE FULL WIDTH UNDER THE HEADING ------------------------------------------------------------ .legal-content p is capped at max-width 650px (administrativestructure.css:3579) while the heading above it fills the whole .legal-content column. On a wide screen the heading reaches the right edge and the text stops short of it, leaving a band of empty space to the right of every line. Removing the cap lets the paragraph span the same width the heading uses, so the copy runs to the end of the column. The card, the icon, the heading, the rule and the accent are untouched - only the paragraph's max-width changes. ========================================================= */ .legal-content p { max-width: 100% !important; } /* ========================================================= GOVERNANCE AND INSTITUTIONAL FRAMEWORK CARD THE PARAGRAPH STOPS BEFORE THE FAINT BUILDING ICON ------------------------------------------------------------ Widening the paragraph to the full column let it run under the faint circle on the right, because the icon is not in the text flow - .legal-accent is absolutely positioned: accent width 105px, right 40px (25px on tablet) card padding-right 50px (40px on tablet) So the circle reaches 145px in from the card's right edge while the text column ends only 50px in - the text column runs 95px underneath the icon. Measured: 95px at 1422px wide, 90px at 982px. These margins stop the copy just short of the circle, leaving a 30px gap. They are margins rather than a max-width so the text keeps filling whatever width the column has, at any screen size. Below 768px the icon is display:none, so the copy goes back to the full width there. The card, the icon, the heading and the rule are untouched. ========================================================= */ .legal-content p { margin-right: 125px !important; } @media (max-width: 992px) { .legal-content p { margin-right: 120px !important; } } @media (max-width: 768px) { .legal-content p { margin-right: 0 !important; } } /* ========================================================= ALL FOUR SECTIONS = THE HEADER AND FOOTER COLUMN ------------------------------------------------------------ The header and the footer sit in one column, defined once in header.css:9213-9273 and repeated in footer.css:7755-7804: width 92% (default) max-width 1380px centred width 94% (<= 1199px) width 90% (<= 767px) width 92% (<= 480px) This page's four sections used a different box - full width with fixed side padding, capped at 1440px - so their content never landed on the header's edges. Measured before, against the header on the same screen: viewport header column section content drift 1902px 261 .. 1641 281 .. 1621 20px in 1422px 57 .. 1365 50 .. 1372 6.9px out 1082px 33 .. 1050 50 .. 1032 17.5px in - and the drift changed sign and size at each breakpoint, because the sections stepped their padding 50 / 35 / 30 / 25 / 18 / 15 / 12px while the header stepped its percentage. These rules give all four containers the header's own column: the same percentage ladder, the same 1380px cap, centred, and no side padding. The left and right edges now line up with the header above and the footer below at every width. There are no Bootstrap .row elements on this page, so no negative-gutter reset is needed here. The banner needs nothing - its text already starts at max(4%, (100% - 1380px)/2), which measures identical to the header's logo edge at every width (261 at 1902, 57 at 1422). No markup, no content, no other rule is touched. ========================================================= */ .legal-status-section > .container, .admin-details-section > .container, .statutory-committees-section > .container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 1199px) { .legal-status-section > .container, .admin-details-section > .container, .statutory-committees-section > .container { width: 94% !important; } } @media (max-width: 767px) { .legal-status-section > .container, .admin-details-section > .container, .statutory-committees-section > .container { width: 90% !important; } } @media (max-width: 480px) { .legal-status-section > .container, .admin-details-section > .container, .statutory-committees-section > .container { width: 92% !important; } } /* ========================================================= THE SPACE BELOW THE FIRST CARD = THE SPACE ABOVE IT ------------------------------------------------------------ The visible gap between two stacked blocks is the bottom padding of the one above plus the top padding of the one below. Measured on this page, before this change: banner -> card 50px card -> topic buttons 130px topic buttons -> committees card 140px committees card -> card 130px card -> footer CTA 106px The first card has 50px of air above it and 130px below it, which is what leaves the band of empty white under it. These two rules give it the same 50px underneath that it already has on top: .legal-status-section padding-bottom 70px -> 0 .admin-details-section padding-top 60px -> 50px The first rule is written as .admin-banner + .legal-status- section so that only the card under the banner changes. The second .legal-status-section on the page - the one above the footer CTA - keeps its own 70px and is not touched. No markup, no content, no width, no other padding is changed. The other three gaps on the page are as they were. ========================================================= */ .admin-banner + .legal-status-section { padding-bottom: 0 !important; } .admin-details-section { padding-top: 50px !important; } /* ========================================================= STATUTORY COMMITTEES CARD - HEADER CONTENT CENTRED ------------------------------------------------------------ The six committee tiles below the dashed rule were already centred - .statutory-item is align-items:center with text-align:center (administrativestructure.css:2679). The block above them was not: .statutory-header is a flex row with align-items:center and no justify-content, so the icon and the heading sat hard against the left edge, and the heading, the short rule and the sentence inside .statutory-heading all inherited left alignment. .statutory-header justify-content: center (new) align-items: center (held) .statutory-heading h2 text-align: center .statutory-line margin-inline: auto .statutory-heading p text-align: center margin-inline: auto The single align-items rule does both jobs: on the desktop row it keeps the icon level with the text, and below 768px where .statutory-header switches to flex-direction:column with align-items:flex-start (line 3136) it is what centres the stacked icon and heading. The paragraph's text-align has to be set with !important because two of the existing breakpoints give it text-align:justify (lines 2955 and 3165), and justify would otherwise win on source order at those widths. Widths, colours, type, the dashed divider and the six tiles are untouched - only the alignment changes. ========================================================= */ .statutory-header { justify-content: center !important; align-items: center !important; } .statutory-heading, .statutory-heading h2, .statutory-heading p { text-align: center !important; } .statutory-heading p, .statutory-line { margin-left: auto !important; margin-right: auto !important; } /* ========================================================= STATUTORY COMMITTEES CARD - THE HEADER STACKS ------------------------------------------------------------ Centring the row as it stood left the heading 49.5px right of the card's centre line, because a 74px icon plus a 25px gap always sits to the left of the text it belongs to - measured at 1564px: the group as a whole was centred on the card, but the heading sat at +49.5px from it. The six tiles under the dashed rule are all centred on their own column centres, so the block above them should sit on the card's centre line too. Stacking the icon above the heading puts the heading, the rule and the sentence on that line. This is also what the block already does below 768px, where .statutory-header switches to flex-direction:column with align-items:flex-start (administrativestructure.css:3136) - the desktop row was the odd one out. Nothing else changes: the icon, its 25px gap, the heading, the 45px rule, the sentence, the dashed divider and the six tiles all keep the sizes, colours and spacing they had. ========================================================= */ .statutory-header { flex-direction: column !important; } /* ========================================================= STATUTORY COMMITTEES - THE SIX LABELS CENTRE UNDER THEIR ICONS ------------------------------------------------------------ The icons were already centred and the six label boxes were too - .statutory-item is align-items:center, so each h6 box sat on its own column's centre line. The text inside those boxes was not centred, though, because global-typography.css:791 pins it left: .odlc-custom-card-text-white { text-align: left !important; } Every label carries that class, and it beat the text-align:center inherited from .statutory-item. Each label was therefore flush left inside its own box, and because the six boxes are six different widths the six text blocks began at six different places. Measured at 1348px, the offset of each line from its column's centre line: Academic -0.5 Council -8.4 Finance -10.1 Committee -0.5 Examination -0.5 Committee -5.5 Grievance -38.4 Redressal Committee -0.5 Affiliation and -37.3 Accreditation Committee -0.5 Internal Quality -25.4 Assurance Cell (IQAC) 0.0 Only the longer line of each pair sat on the centre - the shorter one was 8px to 38px left of it. Two classes are needed in the selector, not one. Both this rule and the one it replaces carry !important, and global-typography.css is loaded after this file (administrativestructure.php:5-8), so on source order alone this file would lose. Specificity is decided before document order, and .statutory-item h6.odlc-custom-card-text-white is (0,2,1) against the (0,1,0) it has to beat. The rule is held to the six-across tier, min-width 1200px. Between 768px and 1199px the tiles are a two-column row layout and at 767px and below a single-column row layout (administrativestructure.css:2972 and :3182), and there the labels are meant to read left against their icons - both of those tiers set text-align:left deliberately at lines 3091 and 3297 and neither is touched. The icon, its 64px circle, the coloured backgrounds, the 15px type, the hover underline and the grid borders are all untouched. ========================================================= */ @media (min-width: 1200px) { .statutory-item h6.odlc-custom-card-text-white { text-align: center !important; } } /* ========================================================================== ADMINISTRATIVE STRUCTURE: THE BANNER PHOTOGRAPH TAKES THE CLASS X SHAPE ------------------------------------------------------------------------- THE BANNER PHOTOGRAPH IS CUT TO THE SAME SHAPE AS THE SECONDARY LEVEL CLASS X PAGE, AT EVERY WIDTH. The model is .secondary-banner-image in css/Programmes/Academic/secondarylevel-classx.css - the Secondary Level - Class X (Grade 10) page named as the reference. Its two declarations: .secondary-banner-image { clip-path: ellipse(70% 90% at 72% 50%); } .secondary-banner-image::before { content: ""; position: absolute; top: -10%; left: -32%; width: 58%; height: 120%; z-index: 3; border-radius: 50%; background: #062d5c; } An ellipse anchored at 72% 50% cuts a real curve out of the photograph's left side, so the blue field bulges over it. The oval on ::before is what draws that bulge. Both are copied here, not re-derived. -------------------------------------------------------------------------- ONE COLOUR DELIBERATELY NOT COPIED The reference oval is #062d5c. This banner's own field is #083C7C, and #062d5c is never to be used as a banner background on this site, so the oval below is #083C7C. The two are both navy and the oval sits on a navy field either way, so the shape and the sweep are the same to the eye; what changes is only that this file does not introduce a colour it is not allowed to use. Change this one line if you want the exact reference value. -------------------------------------------------------------------------- WHAT ELSE IS DIFFERENT, AND WHY IT IS LEFT ALONE No PHP is touched on any of these pages. Every one of them already has the wrapper and the inside it, so the shape is a styling question alone: governance.php .gd-banner-photo had no curve Governance/academiccouncil.php .academic-council-photo 105% curve Governance/administrativestructure.php .admin-image-shape 105% curve Governance/governingcouncil.php .academic-council-photo 105% curve The three council pages were not flat - they had the other ellipse, a much gentler left curve. Only the value changes on those. The decorative dot grid, the rings, the 12px strip on .academic-council-image::before, the entrance animations, the padding ladder and every other declaration in these files are all left exactly as they are. The oval is placed on the element that holds the photograph, not on the outer .academic-council-image - that ::before is already in use on those two pages for the 12px strip, and two rules cannot share one pseudo. -------------------------------------------------------------------------- THE BANDS Where this file already forces clip-path: none with !important, that !important still wins and the shape is simply absent below that width, which is the existing behaviour of the page and is not overridden here. Only the oval needs a matching display:none, because nothing else was hiding it and it would otherwise sit over the square photograph on a phone. ========================================================================== */ /* ---------- the clip ---------- */ .admin-image-shape { clip-path: ellipse(70% 90% at 72% 50%); } /* ---------- the navy oval that draws the bulge ---------- */ .admin-image-shape::before { content: ""; position: absolute; top: -10%; left: -62%; width: 58%; height: 120%; z-index: 3; border-radius: 50%; background: #083C7C; } @media screen and (max-width: 991px) { .admin-image-shape::before { display: none; } } /* ---------- why these widths ---------- */ /* This file already carries clip-path: none !important at 991px, which wins over the rule above and is left in charge. Only the oval needed matching. The decorative ::after ring on .admin-banner-image is a different pseudo and is untouched. */