/* * compact.css — Catfin Professional Scale Override * Place in css/ folder. Link LAST in of every HTML page: * * * IMPORTANT: The header is position:absolute (menu-overlay), sitting ON TOP * of the hero section. Total header height ≈ 120px (top bar ~42px + nav ~60px + borders). * So hero top padding must stay above 130px to keep content visible below the header. */ /* ══════ 1. BASE TYPOGRAPHY ══════ */ body { font-size: 15px; } p { font-size: 15px; line-height: 1.65em; } /* ══════ 2. HEADINGS ══════ */ .h1, h1 { font-size: 38px !important; line-height: 1.15em; } .h2, h2 { font-size: 30px !important; line-height: 1.2em; } .h3, h3 { font-size: 22px !important; } .h4, h4 { font-size: 16px !important; } .text-xl { font-size: 17px !important; } .text-lg { font-size: 16px !important; } .text-md { font-size: 15px !important; } /* ══════ 3. HERO BANNER TWO — homepage main hero ══════ Header is ~120px tall and overlays this section. pt-200 was original → we use 140px (safe clearance + some breathing room). The heading font is reduced from 100px → 38px so total height is much smaller. */ .hero-banner-two { padding-top: 140px !important; padding-bottom: 40px !important; } .hero-banner-two .hero-heading { font-size: 38px !important; line-height: 1.2em !important; } .hero-banner-two form { height: 52px !important; max-width: 480px !important; } .hero-banner-two form input { font-size: 14px !important; padding: 0 120px 0 22px !important; } .hero-banner-two form button { font-size: 14px !important; } /* ══════ 4. ALL OTHER HERO BANNERS ══════ */ .hero-banner-one .hero-heading, .hero-banner-three .hero-heading, .hero-banner-four .hero-heading, .hero-banner-five .hero-heading, .hero-banner-six .hero-heading, .hero-banner-seven .hero-heading, .hero-banner-eight .hero-heading { font-size: 40px !important; line-height: 1.15em !important; } /* ══════ 5. PARTNER LOGO ROW ══════ */ .partner-logo-one { padding-top: 28px !important; padding-bottom: 10px !important; } /* ══════ 6. DARK "TRUSTED BY" SECTION ══════ */ .text-feature-two { padding-top: 44px !important; padding-bottom: 44px !important; } .text-feature-two h2 { font-size: 28px !important; } /* ══════ 7. CONTENT BLOCKS ══════ */ .block-feature-four { margin-top: 50px !important; padding-bottom: 50px !important; } .block-feature-five { margin-top: 36px !important; padding-top: 48px !important; padding-bottom: 50px !important; } .text-feature-three { margin-top: 14px !important; padding-bottom: 50px !important; } /* ══════ 8. SECTION TITLES ══════ */ .title-one h2, .title-two h2, .title-three h2, .title-four h2 { font-size: 28px !important; } /* ══════ 9. SPACING UTILITIES ══════ Large values (≥150px) reduced ~40%; medium values reduced ~30% Note: pt-200 on hero-banner-two is already handled above via section rule */ .pt-350{padding-top:130px!important}.pt-300{padding-top:115px!important}.pt-250{padding-top:100px!important} .pt-225{padding-top:90px!important}.pt-200{padding-top:80px!important}.pt-190{padding-top:76px!important} .pt-180{padding-top:70px!important}.pt-170{padding-top:66px!important}.pt-160{padding-top:62px!important} .pt-150{padding-top:58px!important}.pt-140{padding-top:54px!important}.pt-130{padding-top:50px!important} .pt-120{padding-top:46px!important}.pt-110{padding-top:42px!important}.pt-100{padding-top:40px!important} .pt-90{padding-top:36px!important}.pt-80{padding-top:32px!important}.pt-70{padding-top:28px!important} .pt-60{padding-top:24px!important}.pt-50{padding-top:20px!important}.pt-45{padding-top:18px!important} .pt-40{padding-top:16px!important}.pt-35{padding-top:14px!important}.pt-30{padding-top:12px!important} .pt-25{padding-top:10px!important} .pb-350{padding-bottom:130px!important}.pb-300{padding-bottom:115px!important}.pb-250{padding-bottom:100px!important} .pb-225{padding-bottom:90px!important}.pb-200{padding-bottom:80px!important}.pb-190{padding-bottom:76px!important} .pb-180{padding-bottom:70px!important}.pb-170{padding-bottom:66px!important}.pb-160{padding-bottom:62px!important} .pb-150{padding-bottom:58px!important}.pb-140{padding-bottom:54px!important}.pb-130{padding-bottom:50px!important} .pb-120{padding-bottom:46px!important}.pb-110{padding-bottom:42px!important}.pb-100{padding-bottom:40px!important} .pb-90{padding-bottom:36px!important}.pb-85{padding-bottom:32px!important}.pb-80{padding-bottom:30px!important} .pb-70{padding-bottom:28px!important}.pb-60{padding-bottom:24px!important}.pb-50{padding-bottom:20px!important} .pb-45{padding-bottom:18px!important}.pb-40{padding-bottom:16px!important}.pb-35{padding-bottom:14px!important} .pb-30{padding-bottom:12px!important}.pb-25{padding-bottom:10px!important} .mt-150{margin-top:55px!important}.mt-130{margin-top:48px!important}.mt-120{margin-top:44px!important} .mt-110{margin-top:40px!important}.mt-100{margin-top:36px!important}.mt-80{margin-top:30px!important} .mt-70{margin-top:26px!important}.mt-60{margin-top:22px!important}.mt-50{margin-top:18px!important} /* ══════ 10. NAVIGATION (top info bar + nav) ══════ */ .theme-main-menu.menu-style-two .info-row { padding-top: 8px !important; padding-bottom: 8px !important; } .theme-main-menu.menu-style-two .greetings { font-size: 13px !important; } .theme-main-menu.menu-style-two .contact-info li a { font-size: 13px !important; } .theme-main-menu.menu-style-two .inner-content { padding-top: 6px !important; padding-bottom: 6px !important; } /* ══════ 11. CARDS & BUTTONS ══════ */ .card-style-one,.card-style-two,.card-style-three,.card-style-seven { padding: 22px 18px !important; } .btn-one,.btn-two,.btn-three,.btn-four,.btn-five,.btn-six { font-size: 13px !important; padding: 8px 20px !important; } /* ══════ 12. INNER PAGE BANNERS ══════ */ .inner-banner-one .hero-heading, .inner-banner-two .hero-heading { font-size: 32px !important; } /* ══════ 13. FOOTER ══════ */ .footer-five h2 { font-size: 44px !important; } /* ══════ 14. RESPONSIVE ══════ */ @media (max-width: 991px) { .h1, h1 { font-size: 28px !important; } .h2, h2 { font-size: 22px !important; } .hero-banner-two .hero-heading { font-size: 26px !important; } .hero-banner-two { padding-top: 120px !important; } .title-one h2, .title-two h2, .title-three h2, .title-four h2 { font-size: 20px !important; } .text-feature-two h2 { font-size: 22px !important; } } @media (max-width: 575px) { body { font-size: 14px; } .h1, h1 { font-size: 22px !important; } .h2, h2 { font-size: 18px !important; } .hero-banner-two .hero-heading { font-size: 20px !important; } .hero-banner-two { padding-top: 110px !important; } }