/*========================== 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 ===================================================== */ .corporate-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 ===================================================== */ .corporate-content { width: 52%; padding: 80px 6% 80px 8%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 5; } /* ===================================================== BADGE ===================================================== */ .corporate-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; } .corporate-badge i { font-size: 15px; } /* ========================================================= LABEL ========================================================= */ .corporate-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; } .corporate-label i { font-size: 13px; } /* ========================================================= HEADING ========================================================= */ .corporate-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; } .corporate-content h1 span { color: #a9c7ff; } /* ===================================================== LINE ===================================================== */ .corporate-line { width: 50px; height: 3px; margin: 25px 0 20px; background: #FFFFFF; border-radius: 5px; } /* ===================================================== DESCRIPTION ===================================================== */ .corporate-content p { max-width: 520px; margin: 0; color: rgba(255,255,255,.90); font-size: 16px; line-height: 1.75; } /* ===================================================== RIGHT IMAGE AREA ===================================================== */ .corporate-image { width: 48%; min-height: 500px; position: relative; overflow: hidden; } /* ===================================================== PHOTO ===================================================== */ .corporate-photo { position: absolute; inset: 0; overflow: hidden; /* Simple professional curved transition */ clip-path: ellipse( 100% 100% at 100% 50% ); background: #AFCBFF; } .corporate-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .7s ease; } /* ===================================================== HOVER ===================================================== */ .corporate-banner:hover .corporate-photo img { transform: scale(1.04); } /* ===================================================== SIMPLE LIGHT BORDER ===================================================== */ /* .corporate-image::before { content: ""; position: absolute; z-index: 3; left: -12px; top: 0; width: 24px; height: 100%; background: #AFCBFF; border-radius: 50%; } */ /* ===================================================== DECORATIVE DOTS ===================================================== */ .corporate-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) { .corporate-banner { min-height: 430px; } .corporate-content { width: 52%; padding: 60px 35px; } .corporate-image { width: 48%; min-height: 430px; } .corporate-content h1 { font-size: 44px; } .corporate-content p { font-size: 14px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { .corporate-banner { display: flex; flex-direction: column; min-height: auto; } .corporate-content { width: 100%; min-height: 360px; padding: 55px 25px 45px; } .corporate-content h1 { font-size: clamp(34px, 9vw, 46px); } .corporate-content p { font-size: 14px; line-height: 1.65; } .corporate-image { width: 100%; height: 300px; min-height: 300px; } .corporate-photo { clip-path: none; border-radius: 0; } .corporate-image::before { display: none; } .corporate-banner::before { top: 20px; left: 20px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 480px) { .corporate-content { min-height: 330px; padding: 45px 20px 40px; } .corporate-badge { font-size: 10px; padding: 7px 13px; } .corporate-content h1 { font-size: 32px; } .corporate-content p { font-size: 13px; } .corporate-image { height: 250px; min-height: 250px; } } /* ========================================================= corporate MEMBERSHIP SECTION PRIMARY COLOR: #00386F ========================================================= */ .corporate-membership { width: 100%; padding: 35px 0; background: #ffffff; box-sizing: border-box; } /* ========================================================= MAIN BOX ========================================================= */ .corporate-membership-box { width: min(1180px, calc(100% - 60px)); height: 390px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 48% 52%; overflow: hidden; background: #00386F; border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 56, 111, 0.12); } /* ========================================================= LEFT CONTENT ========================================================= */ .corporate-membership-content { position: relative; z-index: 5; padding: 40px 45px; display: flex; flex-direction: column; /* justify-content: center; */ color: #ffffff; box-sizing: border-box; } /* ========================================================= HEADING ROW ========================================================= */ .membership-heading-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } /* ========================================================= ROUND USER ICON ========================================================= */ .membership-icon { width: 80px; height: 80px; flex: 0 0 80px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .membership-icon svg { width: 42px; height: 42px; fill: none; stroke: #00386F; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .membership-title-area h2 { margin: 0 0 3px; font-size: 25px; line-height: 1.2; font-weight: 700; color: #ffffff; } /* ========================================================= PRICE ========================================================= */ .membership-price { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; color: #28a9ff; } /* ========================================================= MEMBERSHIP TYPE ========================================================= */ .membership-type { margin-top: 3px; font-size: 14px; line-height: 1.4; color: #ffffff; } /* ========================================================= HORIZONTAL LINE ========================================================= */ .membership-line { width: 72%; height: 1px; margin: 0 0 18px; background: rgba(255, 255, 255, 0.25); } /* ========================================================= DESCRIPTION ========================================================= */ .membership-text { max-width: 520px; margin: 0 0 22px; color: #ffffff; font-size: 16px; line-height: 1.55; font-weight: 400; /* Justified Content */ text-align: justify; } /* ========================================================= APPLY BUTTON ========================================================= */ .membership-apply-btn { width: fit-content; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 11px 20px; background: #147df5; color: #ffffff; border-radius: 7px; text-decoration: none; font-size: 14px; font-weight: 600; transition: background 0.25s ease, transform 0.25s ease; } .membership-apply-btn span { font-size: 20px; line-height: 1; } .membership-apply-btn:hover { background: #2990ff; color: #ffffff; transform: translateY(-2px); } /* ========================================================= RIGHT IMAGE ========================================================= */ .corporate-membership-image { position: relative; height: 100%; overflow: hidden; } /* Create the diagonal division */ .corporate-membership-image::before { content: ""; position: absolute; left: -85px; top: -20px; width: 150px; height: 440px; background: #00386F; transform: skewX(-15deg); z-index: 3; } /* ========================================================= IMAGE ========================================================= */ .corporate-membership-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; position: relative; z-index: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .corporate-membership-box { width: calc(100% - 40px); height: 360px; grid-template-columns: 50% 50%; } .corporate-membership-content { padding: 30px; } .membership-icon { width: 65px; height: 65px; flex-basis: 65px; font-size: 28px; } .membership-heading-row { gap: 15px; } .membership-title-area h2 { font-size: 21px; } .membership-price { font-size: 30px; } .membership-text { font-size: 16px; line-height: 1.5; } .corporate-membership-image::before { left: -75px; width: 130px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .corporate-membership { padding: 25px 0; } .corporate-membership-box { width: calc(100% - 30px); height: auto; display: flex; flex-direction: column; border-radius: 12px; } /* CONTENT FIRST */ .corporate-membership-content { order: 1; padding: 30px 25px; } /* IMAGE SECOND */ .corporate-membership-image { order: 2; width: 100%; height: 280px; } .corporate-membership-image::before { display: none; } .membership-heading-row { align-items: center; gap: 15px; } .membership-icon { width: 62px; height: 62px; flex-basis: 62px; font-size: 26px; } .membership-title-area h2 { font-size: 20px; } .membership-price { font-size: 29px; } .membership-type { font-size: 13px; } .membership-line { width: 100%; margin-bottom: 16px; } .membership-text { font-size: 16px; line-height: 1.6; margin-bottom: 22px; } .membership-apply-btn { font-size: 14px; padding: 11px 18px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 575px) { .corporate-membership-box { width: calc(100% - 20px); } .corporate-membership-content { padding: 25px 20px; } .membership-heading-row { gap: 12px; } .membership-icon { width: 55px; height: 55px; flex-basis: 55px; font-size: 23px; } .membership-title-area h2 { font-size: 18px; } .membership-price { font-size: 27px; } .membership-type { font-size: 12px; } .membership-text { font-size: 16px; line-height: 1.55; } .corporate-membership-image { height: 240px; } } /* ========================================================= corporate MEMBERSHIP BENEFITS ODLC MODERN UI PRIMARY COLOR: #00386F ========================================================= */ .corporate-benefits-section { width: 100%; padding: 55px 0 65px; background: #f7faff; box-sizing: border-box; } .corporate-benefits-container { width: min(1400px, calc(100% - 100px)); margin: 0 auto; box-sizing: border-box; } /* ========================================================= corporate BENEFITS – MODERN HEADING ========================================================= */ .corporate-benefits-header { text-align: center; margin-bottom: 45px; } /* TOP ICON */ .corporate-heading-icon { width: 76px; height: 76px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #d7e4f4; border-radius: 50%; box-shadow: 0 8px 25px rgba(0, 56, 111, 0.10); } .corporate-heading-icon i { font-size: 30px; color: #00386F; } /* SMALL LABEL */ .corporate-heading-label { position: relative; display: inline-block; margin-bottom: 12px; padding: 0 26px; color: #1264c7; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; } /* SMALL LINES BESIDE LABEL */ .corporate-heading-label::before, .corporate-heading-label::after { content: ""; position: absolute; top: 50%; width: 38px; height: 2px; background: #1264c7; } .corporate-heading-label::before { right: 100%; } .corporate-heading-label::after { left: 100%; } /* MAIN HEADING */ .corporate-benefits-header h2 { margin: 0; color: #00386F; font-size: 48px !important; line-height: 1.15; font-weight: 750; letter-spacing: -1px; } @media (max-width: 767px) { .corporate-heading-icon { width: 64px; height: 64px; margin-bottom: 12px; } .corporate-heading-icon i { font-size: 25px; } .corporate-heading-label { font-size: 14px; padding: 0 18px; } .corporate-heading-label::before, .corporate-heading-label::after { width: 25px; } .corporate-benefits-header h2 { font-size: 32px !important; line-height: 1.2; letter-spacing: -0.4px; } } /* ========================================================= GRID ========================================================= */ .corporate-benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; width: 100%; } /* ========================================================= CARD ========================================================= */ .corporate-benefit-card { position: relative; display: flex; align-items: stretch; min-height: 190px; background: #ffffff; border: 1px solid #e1eaf5; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 56, 111, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .corporate-benefit-card:hover { transform: translateY(-4px); border-color: #b9d7f5; box-shadow: 0 14px 32px rgba(0, 56, 111, 0.12); } /* ========================================================= NUMBER PANEL ========================================================= */ .corporate-number { position: relative; flex: 0 0 72px; width: 72px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 180deg, #1268d9 0%, #00386F 100% ); color: #ffffff; font-family: inherit; font-size: 24px !important; line-height: 1; font-weight: 700; } /* SMALL ARROW BETWEEN NUMBER AND CARD */ .corporate-number::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #1268d9; z-index: 3; } /* ========================================================= ICON ========================================================= */ .corporate-icon { flex: 0 0 105px; width: 105px; display: flex; align-items: center; justify-content: center; margin-left: 25px; } .corporate-icon i { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf5ff; color: #1268d9; font-size: 38px !important; box-shadow: inset 0 0 0 1px rgba(20, 120, 212, 0.03); } /* ========================================================= CONTENT ========================================================= */ .corporate-card-content { flex: 1; min-width: 0; padding: 30px 30px 28px 25px; border-left: 1px solid #dce8f5; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } .corporate-card-content h3 { margin: 0 0 10px; color: #00386F; font-family: inherit; font-size: 19px !important; line-height: 1.35; font-weight: 700; } .corporate-card-content p { margin: 0; color: #3A506B; font-family: inherit; font-size: 16px !important; line-height: 1.65; font-weight: 400; /* Justified Content */ text-align: justify; } /* ========================================================= HIGHLIGHT IMPORTANT WORDS ========================================================= */ .corporate-card-content h3 + p { margin-top: 2px; } /* ========================================================= TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { .corporate-benefits-section { padding: 45px 0 55px; } .corporate-benefits-container { width: min(92%, 850px); } .corporate-benefits-header h2 { font-size: 30px !important; } .corporate-benefits-grid { grid-template-columns: 1fr; gap: 22px; } .corporate-benefit-card { min-height: 175px; } .corporate-card-content { padding: 26px 28px 26px 25px; } .corporate-card-content h3 { font-size: 17px !important; } .corporate-card-content p { font-size: 16px !important; } } /* ========================================================= MOBILE 576px - 767px ========================================================= */ @media (max-width: 767px) { .corporate-benefits-section { padding: 38px 0 45px; } .corporate-benefits-container { width: calc(100% - 30px); } .corporate-benefits-header { margin-bottom: 25px; } .corporate-benefits-header h2 { font-size: 30px !important; line-height: 1.3; } .corporate-title-line { width: 80px; height: 3px; margin-top: 11px; } .corporate-benefits-grid { gap: 18px; } .corporate-benefit-card { min-height: auto; } .corporate-number { flex: 0 0 58px; width: 58px; font-size: 20px !important; } .corporate-number::after { right: -9px; border-top-width: 9px; border-bottom-width: 9px; border-left-width: 9px; } .corporate-icon { flex: 0 0 75px; width: 75px; margin-left: 17px; } .corporate-icon i { width: 60px; height: 60px; font-size: 27px !important; } .corporate-card-content { padding: 20px 18px 20px 18px; } .corporate-card-content h3 { font-size: 16px !important; line-height: 1.4; } .corporate-card-content p { font-size: 16px !important; line-height: 1.55; } } /* ========================================================= SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { .corporate-benefits-section { padding: 32px 0 38px; } .corporate-benefits-container { width: calc(100% - 22px); } .corporate-benefits-header h2 { font-size: 29px !important; } .corporate-benefits-grid { gap: 15px; } .corporate-benefit-card { display: grid; grid-template-columns: 52px 68px minmax(0, 1fr); min-height: 0; } .corporate-number { width: 52px; min-height: 150px; font-size: 18px !important; } .corporate-number::after { right: -8px; border-top-width: 8px; border-bottom-width: 8px; border-left-width: 8px; } .corporate-icon { width: 68px; margin-left: 10px; } .corporate-icon i { width: 54px; height: 54px; font-size: 24px !important; } .corporate-card-content { padding: 18px 14px 18px 14px; } .corporate-card-content h3 { font-size: 15px !important; line-height: 1.4; } .corporate-card-content p { font-size: 16px !important; line-height: 1.5; } } /* ========================================================= CORPORATE CTA ========================================================= */ .corporate-cta { width: 90%; max-width: 1400px; min-height: 94px; margin: 35px auto 60px; padding: 16px 64px; display: flex; align-items: center; background: linear-gradient( 135deg, #eef6ff 0%, #e6f1ff 100% ); border: 1px solid #d5e6f8; border-radius: 12px; box-shadow: 0 5px 18px rgba(15, 72, 130, 0.06); } /* ========================================================= ICON ========================================================= */ .corporate-cta-icon { width: 66px; height: 66px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 36px; background: #063f76; border-radius: 50%; color: #ffffff; font-size: 30px; } /* ========================================================= CONTENT ========================================================= */ .corporate-cta-content { flex: 1; } .corporate-cta-content h4 { margin: 0; color: #073b70; font-size: 25px; line-height: 1.3; font-weight: 700; } /* ========================================================= BUTTON ========================================================= */ .corporate-cta-btn { min-width: 155px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #064779; color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 600; transition: all 0.25s ease; } .corporate-cta-btn span { font-size: 20px; line-height: 1; } .corporate-cta-btn:hover { background: #075da0; transform: translateY(-2px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .corporate-cta { width: 92%; padding: 15px 30px; } .corporate-cta-icon { margin-right: 25px; } .corporate-cta-content h2 { font-size: 21px; } .corporate-cta-btn { min-width: 135px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { .corporate-cta { width: 92%; min-height: auto; padding: 20px; display: grid; grid-template-columns: 58px 1fr; gap: 15px 18px; margin: 30px auto 45px; } .corporate-cta-icon { width: 58px; height: 58px; margin: 0; font-size: 25px; } .corporate-cta-content { display: flex; align-items: center; } .corporate-cta-content h2 { font-size: 18px; line-height: 1.35; } .corporate-cta-btn { grid-column: 1 / -1; width: 100%; height: 44px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .corporate-cta { padding: 16px; gap: 12px 14px; } .corporate-cta-icon { width: 52px; height: 52px; font-size: 22px; } .corporate-cta-content h2 { font-size: 16px; } } /* ========================================================= COMMON corporate SECTION WIDTH ========================================================= */ .corporate-hero, .corporate-benefits, .corporate-benefits-section .corporate-cta { width: 100%; box-sizing: border-box; } /* Same inner width */ .corporate-hero-card, .corporate-benefits-container, .corporate-benefits-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* ============================================================================ MEMBERSHIP - CORPORATE: THE INSIDE OF THE SECTIONS ON THE HEADER AND FOOTER LADDER, AND THE BANNER'S DOT GRID HIDDEN --------------------------------------------------------------------------- WIDTHS AND THE BANNER'S DOTS ONLY. NOT ONE FONT IS TOUCHED - no font-family, font-size, font-weight, line-height, letter-spacing or text-transform appears anywhere in this block. Nothing in this page's PHP is touched either, and no other page's stylesheet is written to. MEASURED AT A 1000px VIEWPORT BEFORE THIS BLOCK header .container-fluid L 29.6 R 955.3 w 925.7 logo L 29.6 .corporate-membership-box margin 30px/30px dL 0.4 dR 0.5 .corporate-benefits-container 984.8px / 1200px, margin 0 dL -29.6 dR -29.5 29.6px PAST the header's edge on each side .odlcf-cta-in 925.7px / 1380px dL 0.0 dR 0.0 DELTA banner text to logo: +49.2px --------------------------------------------------------------------------- 1. THE BANNER'S DOTS, HIDDEN .corporate-banner::before paints one decoration and it is a pseudo-element, so there is nothing in the PHP to keep and no class to find it by. It is a square of small dots in the banner's top-left corner, built from a radial-gradient of a 1.5px dot on a transparent one. It is stopped with content:none, which is the only way to stop a pseudo-element painting. .corporate-banner::before content none --------------------------------------------------------------------------- 2. THE BANNER'S GUTTER, banner text to logo: +49.2px OFF THE LOGO'S EDGE The banner's own type is left exactly as it is. What was wrong was where it sat: the content column's left padding is 78.775px at this width, against a logo at 29.6px. .corporate-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 at a 1342px viewport, and 3% of 984.8 is 29.54 against a logo at 29.6 here. The gutter goes on the content column and not on the section, because the picture column beside it is 48% of the section and padding on the section would shrink the photograph. The photograph is not named in this block. --------------------------------------------------------------------------- 3. THE CONTENT CONTAINERS, ONTO THE HEADER'S LADDER Each of these carried its own margin or its own fixed cap rather than the ladder, so each landed somewhere other than the header's edges. They go on the ladder from header.css line 9213 - 92% with a 1380px cap, then 94% at 1199 and below, 90% at 767 and below, 92% at 480 and below - with their padding zeroed and their margins centred: .corporate-membership-box .corporate-benefits-container Their sections give up any horizontal padding they carry, so the container is the only thing that decides the width. 92% of 1342 is 1234.64, which is the header's own width, so all of them land on the header's left and right edges at 0.0 on both sides - the same figure .odlcf-cta-in already measures. --------------------------------------------------------------------------- 4. THE PADDING, AND ONE COMPONENT LEFT ALONE .corporate-benefits-section measures 55px above and 65px below - out by 10px - and the bottom is the larger of the two, so it comes up to 55px. .corporate-membership is 35px/35px and is not touched. This is found rather than asked for, and it is a padding value and not a font. .odlcf-strip measures 14px above and 0px below on every page of the site. It is a shared footer component loaded by thirteen pages from css/includes/footer.css, so it is not named here and not fixed here. It is the one section on these pages still out by 14px, and it needs a site-wide decision rather than four separate ones. --------------------------------------------------------------------------- NOT TOUCHED No font, anywhere. The banner's background is not named. The photograph - corporate - is not named. .corporate-image::before, the navy sweep the photograph sits against, is not named: it is structure, not decoration, and removing it would leave a hard rectangular join where the curve is. .odlcf-cta, .odlcf-strip, .odlcf-ds, .odlcf-st and .odlcf-dc are the shared footer components and are not named. ============================================================================ */ /* ------------------------------------------------ 1. the banner's dots */ .corporate-banner::before { content: none !important; } /* --------------------------------------------- 2. the banner's gutter */ .corporate-content { padding-left: max(4%%, 50%% - 690px) !important; } /* ------------------------------- 3. the sections give up their side padding */ .corporate-membership, .corporate-benefits-section { padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------- 3. the containers onto the header's ladder */ .corporate-membership-box, .corporate-benefits-container { width: 92%% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------------------- 4. equal padding */ .corporate-benefits-section { padding-bottom: 55px !important; } @media screen and (max-width: 1199px) { .corporate-membership, .corporate-benefits-section { padding-left: 0 !important; padding-right: 0 !important; } .corporate-membership-box, .corporate-benefits-container { width: 94% !important; } .corporate-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { .corporate-membership-box, .corporate-benefits-container { width: 90% !important; } .corporate-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { .corporate-membership-box, .corporate-benefits-container { width: 92% !important; } .corporate-content { padding-left: max(4%, 50% - 690px) !important; } } /* ============================================================================ MEMBERSHIP - CORPORATE / INDIVIDUAL / INSTITUTIONAL: THE BASE WIDTH AND GUTTER MY OWN GENERATOR DROPPED, AND THE SECTION PADDING AT EVERY ONE OF THE PAGE'S OWN BREAKPOINTS --------------------------------------------------------------------------- A FAULT OF MY OWN, AND IT IS THE FIRST THING IN THIS BLOCK The block before this one put the containers on the ladder and wrote the base rule as width: 92%% !important; padding-left: max(4%%, 50%% - 690px) !important; with two percent signs. That is not valid CSS, so the browser dropped both declarations and kept the rest of the rule - which is why max-width:1380px took effect while width did not, and why the banner's gutter did not move at all while the dots did disappear. The media queries at 1199, 767 and 480 were written through a different format and came out correct, which is what made it look as though the widths worked below 1200px and not above: at 882px .corporate-membership-box 829.078px / 1380px dL 0.0 ON EDGES .corporate-benefits-container 829.078px / 1380px dL 0.0 ON EDGES at 1342px .corporate-membership-box 1180.0px / 1380px dL 27.3 OFF .corporate-benefits-container 1342.0px / 1380px dL -53.7 OFF Both are restated correctly below, with one percent sign, and the whole ladder is written again so the page does not depend on which half of it happened to survive. THE PADDING, WHICH WAS STILL OUT BELOW 1200px The block before this one fixed .corporate-benefits-section at the base only. The page carries its own value at each of three further breakpoints and each one is out in the same direction, the bottom being the larger of the two: line 2312 base padding 55px 0 65px 55 / 65 out by 10 line 2660 @media 991px padding 45px 0 55px 45 / 55 out by 10 line 2702 @media 767px padding 38px 0 45px 38 / 45 out by 7 line 2785 @media 575px padding 32px 0 38px 32 / 38 out by 6 All four have their bottom brought up to their top. The page's own top values are the ones kept. corporate-membership is 35px/35px at every width and is not named. NO FONT IS TOUCHED, AND NO BACKGROUND Nothing in the rules below sets font-family, font-size, font-weight, line-height, letter-spacing, text-transform, background, colour or border. That is checked on the generated text before it is written - see the last line of this script's output. NOT NAMED: the banner's dots, already content:none from the block before; .corporate-image::before, the navy sweep the photograph sits against, which is structure and not decoration; the photograph itself; and the shared footer components .odlcf-cta, .odlcf-strip, .odlcf-ds, .odlcf-st and .odlcf-dc. ============================================================================ */ /* -------------------------------- the base width, written correctly this time */ .corporate-membership-box, .corporate-benefits-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------ the base gutter, likewise */ .corporate-content { padding-left: max(4%, 50% - 690px) !important; } /* ------------------- the padding above and below, at every one of its steps */ .corporate-benefits-section { padding: 55px 0 55px !important; } @media screen and (max-width: 991px) { .corporate-benefits-section { padding: 45px 0 45px !important; } } @media screen and (max-width: 767px) { .corporate-benefits-section { padding: 38px 0 38px !important; } } @media screen and (max-width: 575px) { .corporate-benefits-section { padding: 32px 0 32px !important; } } @media screen and (max-width: 1199px) { corporate-membership-box, corporate-benefits-container { width: 94% !important; } corporate-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { corporate-membership-box, corporate-benefits-container { width: 90% !important; } corporate-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { corporate-membership-box, corporate-benefits-container { width: 92% !important; } corporate-content { padding-left: max(4%, 50% - 690px) !important; } } /* ============================================================================ MEMBERSHIP - CORPORATE / INDIVIDUAL / INSTITUTIONAL: THE BASE WIDTH AND GUTTER MY OWN GENERATOR DROPPED, AND THE SECTION PADDING AT EVERY ONE OF THE PAGE'S OWN BREAKPOINTS --------------------------------------------------------------------------- A FAULT OF MY OWN, AND IT IS THE FIRST THING IN THIS BLOCK The block before this one put the containers on the ladder and wrote the base rule as width: 92%% !important; padding-left: max(4%%, 50%% - 690px) !important; with two percent signs. That is not valid CSS, so the browser dropped both declarations and kept the rest of the rule - which is why max-width:1380px took effect while width did not, and why the banner's gutter did not move at all while the dots did disappear. The media queries at 1199, 767 and 480 were written through a different format and came out correct, which is what made it look as though the widths worked below 1200px and not above: at 882px .corporate-membership-box 829.078px / 1380px dL 0.0 ON EDGES .corporate-benefits-container 829.078px / 1380px dL 0.0 ON EDGES at 1342px .corporate-membership-box 1180.0px / 1380px dL 27.3 OFF .corporate-benefits-container 1342.0px / 1380px dL -53.7 OFF Both are restated correctly below, with one percent sign, and the whole ladder is written again so the page does not depend on which half of it happened to survive. THE PADDING, WHICH WAS STILL OUT BELOW 1200px The block before this one fixed .corporate-benefits-section at the base only. The page carries its own value at each of three further breakpoints and each one is out in the same direction, the bottom being the larger of the two: line 2312 base padding 55px 0 65px 55 / 65 out by 10 line 2660 @media 991px padding 45px 0 55px 45 / 55 out by 10 line 2702 @media 767px padding 38px 0 45px 38 / 45 out by 7 line 2785 @media 575px padding 32px 0 38px 32 / 38 out by 6 All four have their bottom brought up to their top. The page's own top values are the ones kept. corporate-membership is 35px/35px at every width and is not named. NO FONT IS TOUCHED, AND NO BACKGROUND Nothing in the rules below sets font-family, font-size, font-weight, line-height, letter-spacing, text-transform, background, colour or border. That is checked on the generated text before it is written - see the last line of this script's output. NOT NAMED: the banner's dots, already content:none from the block before; .corporate-image::before, the navy sweep the photograph sits against, which is structure and not decoration; the photograph itself; and the shared footer components .odlcf-cta, .odlcf-strip, .odlcf-ds, .odlcf-st and .odlcf-dc. ============================================================================ */ /* -------------------------------- the base width, written correctly this time */ .corporate-membership-box, .corporate-benefits-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------ the base gutter, likewise */ .corporate-content { padding-left: max(4%, 50% - 690px) !important; } /* ------------------- the padding above and below, at every one of its steps */ .corporate-benefits-section { padding: 55px 0 55px !important; } @media screen and (max-width: 991px) { .corporate-benefits-section { padding: 45px 0 45px !important; } } @media screen and (max-width: 767px) { .corporate-benefits-section { padding: 38px 0 38px !important; } } @media screen and (max-width: 575px) { .corporate-benefits-section { padding: 32px 0 32px !important; } } @media screen and (max-width: 1199px) { .corporate-membership-box, .corporate-benefits-container { width: 94% !important; } .corporate-content { padding-left: max(3%, 50% - 690px) !important; } } @media screen and (max-width: 767px) { .corporate-membership-box, .corporate-benefits-container { width: 90% !important; } .corporate-content { padding-left: max(5%, 50% - 690px) !important; } } @media screen and (max-width: 480px) { .corporate-membership-box, .corporate-benefits-container { width: 92% !important; } .corporate-content { padding-left: max(4%, 50% - 690px) !important; } } /* ========================================================================== CARD GROWS IN THE TABLET BAND SO THE BUTTON KEEPS ITS SPACE ------------------------------------------------------------------------- One declaration: height, between 768px and 991px. The same change already made in css/Membership/individual.css, for the same card and the same button. This page carries its own stylesheet with the same three-step height ladder written into it: .corporate-membership-box { width: min(1180px, calc(100%% - 60px)); height: 390px; overflow: hidden; } @media (max-width: 991px) { height: 360px; } @media (max-width: 767px) { height: auto; } WHAT WAS HAPPENING The text column inside the card is a flex column with 30px of padding all round in that band, and the Apply Now button is its last child, so the padding underneath the button IS the space below the button. Measured against the card's bottom edge - the distance from the button to it, and negative means the button is hanging out of the card: viewport card height space below the button 991 360.0 68.8 900 360.0 44.8 834 360.0 44.8 820 360.0 44.8 800 360.0 44.8 780 360.0 -4.4 CLIPPED 768 360.0 -4.4 CLIPPED At 768px and 780px the text needs 394.4px and the card was given 360px, so the overflow: hidden took the 30px of padding straight off the bottom. What was left was the button sitting on the card's edge with nothing under it. THE FIX, AND WHAT IT MEASURES height: auto lets the card take the height the text actually needs, which is what this stylesheet already does below 767px. Measured with it in place: viewport card height space below the button photograph 991 321.2 30.0 321.2 900 345.2 30.0 345.2 834 345.2 30.0 345.2 820 345.2 30.0 345.2 800 345.2 30.0 345.2 780 394.4 30.0 394.4 768 394.4 30.0 394.4 30px at every width in the band, which is the padding - so the space is now exactly what it was written to be rather than whatever survived the clip. Where a width previously read 44.8 or 68.8 it now reads 30, because the card is no longer standing taller than the text inside it: the gap and the card edge now agree. Where 820px and 800px read 19.6 it now reads 30 for the same reason. Nothing is lost - the card simply stops being a fixed size the text no longer fits inside. The photograph fills the taller card, measured at the row above. -------------------------------------------------------------------------- TABLET ONLY, AND NOTHING ELSE The band stops at 991px, which is this stylesheet's own breakpoint for this card, and starts at 768px, which is where its own auto-height rule already begins one step further down. Measured either side with this block in place, all unchanged: 992 space 22.4 card 390.0 unchanged 1024 space 22.4 card 390.0 unchanged 1100 space 52.4 card 390.0 unchanged 1200 space 52.4 card 390.0 unchanged 1440 space 52.4 card 390.0 unchanged 767 already auto, unchanged 600 already auto, unchanged 390 already auto, unchanged 320 already auto, unchanged No !important, because no height on this card uses it - this simply comes later in the file at the same specificity. The width, the grid columns, the overflow, the padding, the border radius, the shadow, the button, its arrow, its colour, the photograph and its href are not touched, and no other section on the page is named. corporate.php is not opened. ========================================================================== */ @media screen and (min-width: 768px) and (max-width: 991px) { .corporate-membership-box { height: auto; } }