/* ============================================= Main CSS - Import All Stylesheets ============================================= */ /* Bootstrap 5 is loaded via CDN in the HTML This file imports all custom styles AFTER Bootstrap to enable overrides when necessary. */ /* Base Styles */ @import url('./base/variables.css'); @import url('./base/typography.css'); /* Layout Styles */ @import url('./layout/header.css'); @import url('./layout/footer.css'); /* Component Styles */ @import url('./components/hero.css'); @import url('./components/service-card.css'); @import url('./components/product-column.css'); @import url('./components/title-icon.css'); @import url('./components/contact-form.css'); @import url('./components/toast.css'); /* Page-Specific Styles */ @import url('./pages/home.css'); /* ============================================= Global Overrides & Utilities ============================================= */ /* Smooth Scroll */ html { scroll-behavior: smooth; } /* Background Colors - Custom */ .bg-sp-dark { background-color: var(--sp-dark) !important; } .bg-sp-light { background-color: var(--sp-light) !important; } .bg-sp-red { background-color: var(--sp-red) !important; } /* Text Colors - Custom */ .text-sp-dark { color: var(--sp-dark) !important; } .text-sp-light { color: var(--sp-light) !important; } .text-sp-red { color: var(--sp-red) !important; } /* Hero Image */ .hero-image { max-width: 100%; height: auto; } /* Section Padding */ .section-padding { padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 992px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }