@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300&family=Raleway:wght@400;500;600;700;800;900&display=swap');
h1:focus { outline: none; }
.page-hero--about, .page-hero--services, .page-hero--products, .page-hero--reviews, .page-hero--contact { background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; }
.page-hero--about { background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url('/images/banners/about-us.jpg') !important; }
.page-hero--services { background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url('/images/banners/services.jpg') !important; }
.page-hero--products { background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url('/images/banners/products.jpg') !important; }
.page-hero--reviews { background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url('/images/banners/reviews.jpg') !important; }
.page-hero--contact { background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url('/images/banners/contact.jpg') !important; }
.about-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); gap: 34px; }.about-contact { padding-left: 30px; border-left: 1px solid #eee; }.about-contact h3 { margin: 0 0 22px; color: #333; font: 700 14px/1.3 Raleway,sans-serif; letter-spacing: 1px; text-transform: uppercase; }.about-contact .contact-form__name { gap: 8px; }.about-contact .contact-form input, .about-contact .contact-form textarea { margin-bottom: 16px; padding: 9px 10px; }.about-contact .contact-form textarea { min-height: 105px; }.about-contact .contact-form button { padding: 10px 20px; font-size: 12px; }
@media (max-width: 850px) { .about-layout { grid-template-columns: 1fr; }.about-contact { padding: 30px 0 0; border-top: 1px solid #eee; border-left: 0; } }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: #555; background: #fff; font-family: 'Open Sans', Arial, sans-serif; } h1, h2, h3, p { max-width: 100%; } .page-hero { min-height: 250px; display: grid; place-items: center; padding: 42px 24px; background: #b9bcbc; color: #fff; text-align: center; } .page-hero h1 { margin: 0; font: 800 clamp(34px,4vw,48px)/1.1 Raleway,sans-serif; letter-spacing: 2px; text-transform: uppercase; } .breadcrumbs { max-width: 1110px; margin: auto; padding: 20px 24px; color: #777; border-bottom: 1px solid #eee; font-size: 13px; } .breadcrumbs a { color: #777; text-decoration: none; } .content-section { max-width: 1110px; margin: auto; padding: 66px 24px 80px; font: 400 15px/1.85 'Open Sans',sans-serif; } .content-section h2 { margin: 0 0 24px; color: #333; font: 800 32px/1.3 Raleway,sans-serif; } .content-section h3 { margin: 34px 0 12px; color: #333; font: 700 22px/1.4 Raleway,sans-serif; } .content-section p { margin: 0 0 20px; } .content-section a { color: #d32323; } .content-section ul { padding-left: 22px; margin: 0 0 20px; } .content-section li { margin-bottom: 5px; } .content-section--narrow { max-width: 960px; } .review { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid #eee; } .review__date { color: #999; font-size: 13px; } .review__name { margin: 12px 0 0; color: #333; font-weight: 700; } .contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; } .contact-form label { display: block; margin: 0 0 7px; color: #555; font: 600 12px/1.2 Raleway,sans-serif; letter-spacing: 1px; text-transform: uppercase; }.contact-form input, .contact-form textarea { width: 100%; margin: 0 0 22px; padding: 13px 14px; border: 1px solid #dedede; background: #f7f7f7; font: inherit; }.contact-form textarea { min-height: 140px; resize: vertical; }.contact-form__name { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.contact-form button { border: 0; padding: 13px 28px; background: #d32323; color: #fff; font: 600 14px Open Sans,sans-serif; text-transform: uppercase; cursor: pointer; } @media (max-width: 700px) { .page-hero { min-height: 190px; }.content-section { padding: 45px 18px 56px; }.content-section h2 { font-size: 28px; }.contact-layout { grid-template-columns: 1fr; gap: 28px; }.contact-form__name { grid-template-columns: 1fr; gap: 0; } }