:root { --pc-primary: #1f7a4d; --pc-primary-dark: #155c39; --pc-primary-light: #eaf7f0; --pc-dark: #18231d; --pc-text: #4d5b53; --pc-muted: #6d7972; --pc-light: #f7faf8; --pc-white: #ffffff; --pc-border: #e3ebe6; --pc-shadow: 0 12px 35px rgba(24, 35, 29, .08); --pc-shadow-hover: 0 18px 42px rgba(24, 35, 29, .13); --pc-radius: 16px; --pc-max: 1180px; --pc-nav-offset: 130px; /* verify/adjust against real header height */ } html { scroll-behavior: smooth; } .pest-page, .pest-page * { box-sizing: border-box; } .pest-page { width: 100%; margin: 0; padding: 0; overflow: hidden; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; line-height: 1.75; color: var(--pc-text); background: var(--pc-white); } .pest-page img { display: block; width: 100%; max-width: 100%; height: auto; } .pest-page a { color: inherit; text-decoration: none; } /* Intentionally NOT redefining width/max-width/padding here. Bootstrap's own .container class (loaded in before this file) already supplies the correct fixed-width, responsive, padded container used by the navbar and footer. Letting it win the cascade is what keeps every section aligned with the header. */ .pest-page .container { margin-right: auto; margin-left: auto; } .pest-page .content-width { width: min(100%, 900px); margin-right: auto; margin-left: auto; } .pest-page section { width: 100%; padding: 86px 0; background: var(--pc-white); } .pest-page .section-light { background: var(--pc-light); } .pest-page h1, .pest-page h2, .pest-page h3 { margin-top: 0; font-family: "Poppins", Arial, sans-serif; color: var(--pc-dark); line-height: 1.25; } .pest-page h2 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 40px); letter-spacing: -.5px; } .pest-page h3 { margin-bottom: 10px; font-size: 21px; } .pest-page p { margin: 0 0 18px; } .pest-page .eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pc-primary); } .pest-page .section-heading { max-width: 820px; margin: 0 auto 42px; text-align: center; } .pest-page .section-heading p { max-width: 700px; margin: 0 auto; color: var(--pc-muted); font-size: 17px; } /* ========================================================= HERO ========================================================= */ .pest-page .hero { position: relative; min-height: 650px; /* Compensates for navbar-fixed-top pulling #mainNav out of flow. See FIX LOG item 6 above — confirm this value in devtools. */ padding-top: var(--pc-nav-offset); overflow: hidden; color: #ffffff; background: linear-gradient(115deg, #103f2b 0%, #1f7a4d 58%, #3c9569 100%); } .pest-page .hero-inner { position: relative; min-height: 650px; padding: 78px 0 64px; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 72px; align-items: center; direction: ltr !important; } .pest-page .hero-visual { position: relative; min-width: 0; min-height: 500px; display: flex; align-items: center; justify-content: center; grid-column: 1 !important; grid-row: 1 !important; } .pest-page .hero-visual-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 430px; height: 430px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: 0 0 90px rgba(255, 255, 255, .08); } .pest-page .hero-visual-card { position: relative; z-index: 2; width: min(100%, 390px); padding: 34px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 24px; background: rgba(255, 255, 255, .97); color: var(--pc-dark); box-shadow: 0 25px 65px rgba(0, 0, 0, .22); text-align: center; } .pest-page .hero-visual-icon { width: 88px; height: 88px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pc-primary-light); color: var(--pc-primary); font-size: 42px; } .pest-page .hero-visual-title { font-family: "Poppins", Arial, sans-serif; font-size: 25px; font-weight: 800; line-height: 1.25; color: var(--pc-dark); } .pest-page .hero-visual-subtitle { margin-top: 5px; color: var(--pc-muted); font-size: 15px; } .pest-page .hero-pest-grid { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; } .pest-page .hero-pest-grid span { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: #f4f8f5; color: var(--pc-primary-dark); font-size: 12px; font-weight: 700; line-height: 1.4; } .pest-page .hero-pest-grid i { width: 17px; flex: 0 0 17px; text-align: center; color: var(--pc-primary); } .pest-page .hero-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--pc-primary-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap; } .pest-page .hero-badge i { color: var(--pc-primary); } /* Fixed px offsets (not %) so badges stay pinned to the card corners at every viewport width instead of drifting with the column's changing width. */ .pest-page .hero-badge-top { top: 20px; right: 12px; } .pest-page .hero-badge-bottom { bottom: 20px; left: 12px; } .pest-page .hero-copy { position: relative; z-index: 4; min-width: 0; grid-column: 2 !important; grid-row: 1 !important; } .pest-page .hero .breadcrumb { margin: 0 0 20px; padding: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); } .pest-page .hero .breadcrumb a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; } .pest-page .hero h1 { max-width: 760px; margin: 0 0 22px; padding: 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.15; letter-spacing: -1.2px; color: #ffffff; } .pest-page .hero h1 span { display: block; color: #f8d478; } .pest-page .hero-text { max-width: 720px; margin: 0 0 30px; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .92); } .pest-page .hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; } .pest-page .hero .btn { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 24px; border: 2px solid transparent; border-radius: 8px; font-family: "Poppins", Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .pest-page .hero .btn-primary { color: var(--pc-primary-dark); background: #ffffff; } .pest-page .hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); } .pest-page .hero .btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .08); } .pest-page .hero .btn-outline:hover { color: var(--pc-primary-dark); border-color: #ffffff; background: #ffffff; } .pest-page .hero-card { margin-top: 28px; padding: 20px 22px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: rgba(8, 54, 35, .42); color: #ffffff; } .pest-page .hero-card h2 { margin: 0 0 7px; font-size: 20px; line-height: 1.3; color: #ffffff; } .pest-page .hero-card p { margin: 0 0 12px; color: rgba(255, 255, 255, .84); font-size: 13px; line-height: 1.6; } .pest-page .hero-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 15px; margin: 0; padding: 0; list-style: none; } .pest-page .hero-list li { position: relative; padding-left: 20px; font-size: 12px; font-weight: 700; line-height: 1.5; color: rgba(255, 255, 255, .94); } .pest-page .hero-list li::before, .pest-page .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #f8d478; font-weight: 800; } /* ========================================================= TRUST BAR ========================================================= */ .pest-page .trust-bar { position: relative; z-index: 2; width: 100%; border-bottom: 1px solid var(--pc-border); background: #ffffff; } .pest-page .trust-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch; } .pest-page .trust-item { min-width: 0; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 18px; text-align: center; border-right: 1px solid var(--pc-border); } .pest-page .trust-item:last-child { border-right: 0; } .pest-page .trust-number { display: block; margin: 0 0 2px; font-family: "Poppins", Arial, sans-serif; font-size: 38px; font-weight: 800; line-height: 1.15; color: var(--pc-primary); } .pest-page .trust-label { display: block; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--pc-muted); } /* ========================================================= SERVICE CARDS ========================================================= */ .pest-page .services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .pest-page .service-card { min-width: 0; overflow: hidden; border: 1px solid var(--pc-border); border-radius: var(--pc-radius); background: #ffffff; box-shadow: var(--pc-shadow); transition: transform .22s ease, box-shadow .22s ease; } .pest-page .service-card:hover { transform: translateY(-5px); box-shadow: var(--pc-shadow-hover); } .pest-page .service-image { aspect-ratio: 16 / 9; overflow: hidden; background: #edf3ef; } .pest-page .service-image img { width: 100%; height: 100%; object-fit: cover; } .pest-page .service-content { padding: 25px 25px 26px; } .pest-page .service-content h3 { color: var(--pc-dark); } .pest-page .service-content p { min-height: 86px; margin-bottom: 16px; color: var(--pc-muted); font-size: 15px; line-height: 1.65; } .pest-page .service-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--pc-primary); } .pest-page .service-link:hover { color: var(--pc-primary-dark); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================= TWO-COLUMN CONTENT ========================================================= */ .pest-page .two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .pest-page .two-column > div { min-width: 0; } .pest-page .two-column h2 { margin-bottom: 20px; } .pest-page .image-box { overflow: hidden; border-radius: var(--pc-radius); background: #edf3ef; box-shadow: var(--pc-shadow); } .pest-page .image-box img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .pest-page .check-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .pest-page .check-list li { position: relative; padding-left: 28px; color: var(--pc-dark); } /* ========================================================= LOCATIONS ========================================================= */ .pest-page .location-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .pest-page .location-card { min-height: 76px; display: flex; align-items: center; justify-content: center; padding: 15px; text-align: center; border: 1px solid var(--pc-border); border-radius: 12px; background: #ffffff; font-family: "Poppins", Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--pc-primary-dark); box-shadow: 0 5px 18px rgba(24, 35, 29, .05); transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; } .pest-page .location-card:hover { transform: translateY(-3px); border-color: var(--pc-primary); color: #ffffff; background: var(--pc-primary); } .pest-page .location-copy { margin-top: 40px; } /* ========================================================= PROCESS ========================================================= */ .pest-page .process-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .pest-page .process-card { position: relative; padding: 26px 22px; border: 1px solid var(--pc-border); border-radius: var(--pc-radius); background: #ffffff; box-shadow: 0 7px 22px rgba(24, 35, 29, .05); } .pest-page .process-number { width: 42px; height: 42px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pc-primary-light); color: var(--pc-primary); font-family: "Poppins", Arial, sans-serif; font-weight: 800; } .pest-page .process-card h3 { font-size: 19px; } .pest-page .process-card p { margin-bottom: 0; font-size: 14px; line-height: 1.65; color: var(--pc-muted); } /* ========================================================= FAQ ========================================================= */ .pest-page .faq-container { width: min(100%, 900px); margin-right: auto; margin-left: auto; } .pest-page .faq-container details { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--pc-border); border-radius: 12px; background: #ffffff; } .pest-page .faq-container summary { position: relative; padding: 19px 55px 19px 22px; cursor: pointer; list-style: none; font-family: "Poppins", Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--pc-dark); } .pest-page .faq-container summary::-webkit-details-marker { display: none; } .pest-page .faq-container summary::after { content: "+"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 23px; font-weight: 400; color: var(--pc-primary); } .pest-page .faq-container details[open] summary::after { content: "−"; } .pest-page .faq-answer { padding: 0 22px 21px; color: var(--pc-muted); font-size: 15px; line-height: 1.65; } /* ========================================================= CTA ========================================================= */ .pest-page .cta-section { padding: 76px 0; color: #ffffff; background: linear-gradient(105deg, rgba(12, 52, 33, .96), rgba(31, 122, 77, .90)), url("/images/pest-control-hero.jpg") center/cover no-repeat; } .pest-page .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .pest-page .cta-copy { min-width: 0; flex: 1 1 auto; } .pest-page .cta-section h2 { margin-bottom: 10px; color: #ffffff; } .pest-page .cta-section p { max-width: 760px; margin-bottom: 0; color: rgba(255, 255, 255, .9); } .pest-page .cta-inner .hero-buttons { flex: 0 0 auto; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1050px) { .pest-page .hero-inner { grid-template-columns: 1fr !important; min-height: auto; padding: 70px 0; } .pest-page .hero-visual, .pest-page .hero-copy { grid-column: 1 !important; grid-row: auto !important; } .pest-page .hero-visual { min-height: 430px; } .pest-page .hero-card { max-width: 680px; } .pest-page .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pest-page .location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pest-page .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .pest-page section { padding: 62px 0; } .pest-page .hero-inner { padding: 56px 0; gap: 34px; } .pest-page .hero-visual { min-height: 360px; } .pest-page .hero-visual-glow { width: 300px; height: 300px; } .pest-page .hero-badge-top { top: 15px; right: 0; } .pest-page .hero-badge-bottom { bottom: 10px; left: 0; } .pest-page .hero h1 { font-size: clamp(34px, 9vw, 46px); } .pest-page .hero-text { font-size: 16px; } .pest-page .hero-list, .pest-page .hero-pest-grid { grid-template-columns: 1fr; } .pest-page .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pest-page .trust-item { border-right: 1px solid var(--pc-border); border-bottom: 1px solid var(--pc-border); } .pest-page .trust-item:nth-child(2n) { border-right: 0; } .pest-page .trust-item:nth-child(3), .pest-page .trust-item:nth-child(4) { border-bottom: 0; } .pest-page .services-grid, .pest-page .two-column { grid-template-columns: 1fr; } .pest-page .two-column { gap: 36px; } .pest-page .two-column .image-box { order: -1; } .pest-page .location-grid, .pest-page .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pest-page .cta-inner { flex-direction: column; align-items: flex-start; } .pest-page .cta-inner .hero-buttons { width: 100%; } } @media (max-width: 520px) { .pest-page .hero-inner { gap: 26px; padding: 48px 0; } .pest-page .hero-visual { min-height: 320px; } .pest-page .hero-visual-card { width: min(100%, 330px); padding: 25px 20px; } .pest-page .hero-badge { padding: 9px 12px; font-size: 11px; } .pest-page .hero-buttons { align-items: stretch; flex-direction: column; } .pest-page .hero .btn { width: 100%; } .pest-page .services-grid, .pest-page .location-grid, .pest-page .process-grid { grid-template-columns: 1fr; } .pest-page .service-content p { min-height: 0; } .pest-page .trust-number { font-size: 23px; } .pest-page .trust-label { font-size: 13px; } .pest-page .hero-visual[aria-hidden="true"] { display: flex !important; visibility: visible !important; opacity: 1 !important; } }