/*
Custom CSS for Printing Service Website
Based on CSS Grid Framework
Yellow (#ddca63) background with black text theme
*/

/* Force light mode - prevent browser dark mode */
:root {
    color-scheme: light only;
}

/* Font Integration with Fallbacks */
html, body {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 400;
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force white background on all elements */
body, .wrapper, .wrapper-padding, .max-width {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Font weight variations */
h1, h2, h3, h4, h5, h6, .service-name, strong {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 700;
}

/* Regular text elements */
p, div, span, td, th, li, a {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

/* Override existing framework colors */
.wrapper {
    background-color: #ffffff;
}

/* Override styled grid elements from framework */
.styled .f1 div, .styled .p1 div, .styled .f2 div, .styled .p2 div, 
.styled .f3 div, .styled .p3 div, .styled .f4 div, .styled .p4 div, 
.styled .f5 div, .styled .p5 div, .styled .f6 div, .styled .p6 div, 
.styled .f7 div, .styled .p7 div, .styled .f8 div, .styled .p8 div {
    background-color: white;
    color: #000000;
    border-right-color: #ddca63;
}

/* Text color overrides */
h1, h2, h3, h4, h5, h6, p, div, span, a {
    color: #000000;
}

/* Link styling */
a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: #333333;
}

/* Service Cards Styling */
.services-grid {
    margin-top: 40px;
}

.service-card {
    display: block;
    text-decoration: none;
    color: #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    text-decoration: none;
    color: #000000;
}

.service-card .service-image {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Makes it a square (1:1 aspect ratio) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No overlay background */
.service-card .service-image::before {
    display: none;
}

/* Text overlay on images - at top */
.service-card .service-image .service-name {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    color: #000000;
    background-color: transparent;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    text-shadow: none;
    padding: 10px 5%;
    z-index: 2;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Placeholder styling for services without images */
.service-card .service-placeholder {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Makes it a square (1:1 aspect ratio) */
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card .service-placeholder .placeholder-icon {
    font-size: 48px;
    color: #666666;
    margin-bottom: 10px;
}

/* No overlay background for placeholders */
.service-card .service-placeholder::before {
    display: none;
}

.service-card .service-placeholder .service-name {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    color: #000000;
    background-color: transparent;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    text-shadow: none;
    padding: 10px 5%;
    z-index: 2;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Header and Navigation */
.header-fixed {
    background-color: #ffffff;
    border-bottom-color: #000000;
    max-width: 1200px;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.logo {
    flex: 0 0 auto;
}

.logo a {
    color: #000000;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.header-contact {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    padding: 0 20px;
    font-size: 15px;
    line-height: 1.8;
}

.contact-line {
    color: #333333;
    margin: 3px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Desktop: first line full width, second and third inline */
.header-contact .contact-line:first-child {
    width: 100%;
}

.header-contact .contact-line:nth-child(2),
.header-contact .contact-line:nth-child(3) {
    width: auto;
    display: inline-flex;
}

.contact-email {
    display: inline-flex;
    margin-left: 0;
}

.contact-email::before {
    content: '|';
    color: #cccccc;
    margin: 0 8px;
}

.contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.contact-separator {
    color: #cccccc;
    margin: 0 5px;
}

.contact-line a {
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    margin: 0 2px;
}

.contact-line a:hover {
    color: #666666;
    text-decoration: underline;
}

.messenger-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
}

.messenger-icon img {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.messenger-icon:hover img {
    transform: scale(1.15);
}

.header-fixed {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-image {
    width: 100px;
    height: auto;
    display: block;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.logo-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}

.logo-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #666666;
}

.nav-buttons li a {
    color: #000000;
    font-size: 18px;
    font-weight: 400;
}

.nav-buttons li:hover a {
    background-color: rgba(255,255,255,0.2);
}

/* Submenu styling - 3 columns on desktop */
.nav-buttons li ul {
    background-color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    display: none !important;
    flex-wrap: wrap !important;
    width: 800px !important;
    min-width: 800px !important;
    padding: 15px !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    opacity: 1 !important;
    border: 3px solid #ffdc30 !important;
    border-radius: 4px !important;
}

.nav-buttons li:hover ul {
    display: flex !important;
    opacity: 1 !important;
}

.nav-buttons li ul li {
    width: 33.333% !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    padding: 0 5px !important;
}

.nav-buttons li ul li a {
    font-size: 15px !important;
    padding: 12px 15px !important;
    white-space: nowrap !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nav-buttons li ul li a:hover,
.nav-buttons li ul li:hover a {
    background-color: #ffdc30 !important;
}

ul.nav-buttons li ul li a:hover {
    background-color: #ffdc30 !important;
}

/* Mobile: single column */
@media screen and (max-width: 973px) {
    .nav-buttons li {
        position: relative !important;
    }
    
    .nav-buttons li > a {
        font-size: 18px !important;
    }
    
    .nav-buttons li ul {
        position: relative !important;
        width: 100% !important;
        min-width: auto !important;
        flex-direction: column !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        border: none !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        z-index: auto !important;
        display: none !important;
        background-color: transparent !important;
    }
    
    .nav-buttons li.submenu-open ul {
        display: flex !important;
    }
    
    .nav-buttons li:hover ul {
        display: none !important;
    }
    
    .nav-buttons li.submenu-open:hover ul {
        display: flex !important;
    }
    
    .nav-buttons li ul li {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        background-color: transparent !important;
    }
    
    .nav-buttons li ul li:last-child {
        margin-bottom: 0 !important;
    }
    
    .nav-buttons li ul li:last-child a {
        border-bottom: none !important;
    }
    
    .nav-buttons li ul li a {
        white-space: normal !important;
        padding: 2px 10px !important;
        font-size: 16px !important;
        border: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #000000 !important;
        background-color: #ffffff !important;
        display: block !important;
    }
}

/* Footer */
.footer {
    background-color: #f8f8f8 !important;
    color: #000000;
    border-top: 1px solid #e0e0e0;
}

/* Force footer background color to override dark mode prevention */
.footer, .footer .max-width {
    background-color: #f8f8f8 !important;
}

@media screen and (max-width: 973px) {
    .footer.footer-hidden {
        display: none !important;
    }
    
    /* Always show footer when scrolled to bottom sections */
    body:not(.menu-open) .footer {
        display: block !important;
    }
}

.footer .logo {
    color: #000000;
}

.footer a {
    color: #333333;
}

.footer a:hover {
    color: #000000;
}

/* Welcome Section */
.welcome {
    text-align: center;
    padding: 40px 0;
}

.welcome h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000000;
}

.welcome p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Section Headings */
h2 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000000;
}

/* Responsive adjustments */
@media screen and (max-width: 973px) {
    .service-card {
        margin-bottom: 15px;
    }
    
    .welcome h1 {
        font-size: 24px;
    }
    
    .welcome p {
        font-size: 16px;
    }
}
/* Service rows styling */
.services-row {
    margin-bottom: 15px;
}

.services-row:last-child {
    margin-bottom: 0;
}

/* Override CSS Grid framework spacing for consistent 15px gaps */
.services-row.p3 .one {
    width: calc(33.3333% - 10px) !important;
    margin-left: 0 !important;
    float: left;
}

.services-row.p3 .two {
    width: calc(33.3333% - 10px) !important;
    margin-left: 15px !important;
    float: left;
}

.services-row.p3 .three {
    width: calc(33.3333% - 10px) !important;
    margin-left: 15px !important;
    float: left;
}

/* Override CSS Grid framework spacing for 4 columns with consistent 15px gaps */
.services-row.p4 .one {
    width: calc(25% - 11.25px) !important;
    margin-left: 0 !important;
    float: left;
}

.services-row.p4 .two {
    width: calc(25% - 11.25px) !important;
    margin-left: 15px !important;
    float: left;
}

.services-row.p4 .three {
    width: calc(25% - 11.25px) !important;
    margin-left: 15px !important;
    float: left;
}

.services-row.p4 .four {
    width: calc(25% - 11.25px) !important;
    margin-left: 15px !important;
    float: left;
}

/* Ensure service cards within grid columns work properly */
.services-row .one .service-card,
.services-row .two .service-card,
.services-row .three .service-card,
.services-row .four .service-card,
.services-row .five .service-card,
.services-row .six .service-card {
    height: 100%;
    margin-bottom: 0;
}

/* Contact section styling */
#contact {
    margin-top: 60px;
    padding: 40px 0;
    text-align: center;
}

#contact h2 {
    margin-bottom: 20px;
}

.contact-info {
    font-size: 18px;
    line-height: 1.6;
}

.contact-info p {
    margin: 10px 0;
}

/* Ensur
e consistent text positioning for all service names */
.service-card .service-name,
.service-card .service-placeholder .service-name {
    max-width: 90%;
    margin: auto;
}

/* Force consistent minimum height for text container */
.service-card .service-image,
.service-card .service-placeholder {
    position: relative;
}


/* Show/hide desktop and mobile versions */
.services-mobile {
    display: none;
}

.services-desktop {
    display: block;
}

/* Desktop footer - spans display inline */
.footer-line {
    display: inline;
}

.footer-line::after {
    content: "\A";
    white-space: pre;
}

.footer-last-line {
    display: inline;
}

.footer-last-line::before {
    content: "\A";
    white-space: pre;
}

.footer p,
.footer p span,
.footer-line,
.footer-last-line {
    color: #333333 !important;
}

/* Mobile responsive - show mobile version, hide desktop version */
@media screen and (max-width: 973px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .wrapper, .wrapper-padding {
        overflow-x: hidden !important;
    }
    
    .services-desktop {
        display: none !important;
    }
    
    .services-mobile {
        display: block !important;
    }
    
    .services-mobile {
        margin-top: 15px;
    }
    
    .services-row {
        margin-bottom: 0px !important;
    }
    
    .services-row > div {
        margin-bottom: 15px;
    }
    
    .services-row {
        margin-bottom: 0;
    }
    
    .services-row > div {
        margin-bottom: 0px;
        border: none !important;
        border-bottom: none !important;
    }
    
    .service-card {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        border: none;
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .service-card:hover {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .service-card:active {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .service-card:focus {
        text-decoration: none !important;
        border-bottom: none !important;
        outline: none;
    }
    
    a.service-card {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    a.service-card:hover,
    a.service-card:active,
    a.service-card:focus {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    /* Title section - now a direct child of service-card */
    .service-card > .service-name {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        background-color: transparent !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 2px 0 0 0 !important;
        text-shadow: none !important;
        width: 100% !important;
        box-sizing: border-box;
        border: none;
        text-align: center;
        font-weight: 700;
        line-height: 1.2;
        min-height: 44px;
        order: 2;
    }
    
    /* Image section - card with border and shadow */
    .service-card > .service-image,
    .service-card > .service-placeholder {
        padding-bottom: 100% !important;
        position: relative;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        margin-top: 0;
        margin-bottom: 0;
        background-size: cover;
        background-position: center;
        order: 1;
    }
    
    /* Ensure no extra borders or lines */
    .service-card > .service-image::after,
    .service-card > .service-placeholder::after {
        display: none !important;
    }
    
    .welcome h1 {
        font-size: 20px !important;
    }
    
    .welcome p {
        font-size: 16px;
    }
    
    /* Make all h1 and h2 headings 20px on mobile */
    h1, h2 {
        font-size: 20px !important;
    }
    
    h2 {
        padding-top: 10px !important;
    }
    
    #map-section {
        margin-bottom: 0 !important;
    }
    
    #faq-section {
        margin-bottom: 10px !important;
    }
    
    /* Reduce space after services section */
    .services-mobile {
        margin-bottom: 0;
    }
    
    /* Reduce space before map section on mobile - half of 30px = 15px */
    .map-section-wrapper {
        margin-top: 15px !important;
    }
    
    /* Add padding to footer on mobile */
    .footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 20px !important;
    }
    
    .footer .max-width {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add space after FAQ section */
    .faq-container {
        margin-bottom: 20px !important;
    }
    
    /* Add padding-bottom to wrapper */
    .wrapper-padding.max-width {
        padding-bottom: 20px !important;
    }
    
    /* Adjust footer text spacing on mobile */
    .footer p {
        line-height: 1.6 !important;
    }
    
    .footer-line {
        display: block;
        margin-bottom: 8px;
    }
    
    .footer-last-line {
        display: block;
        margin-top: 4px;
    }
    
    /* Adjust scroll offset for mobile - account for sticky header */
    #map-section, #faq-section {
        scroll-margin-top: 175px !important;
    }
    
    /* Fix footer text wrapping on mobile */
    .footer p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    
    .footer > div {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .footer .max-width > div {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    /* Reduce copyright margin on mobile */
    .footer .max-width[style*="margin-top"] {
        margin-top: 20px !important;
    }
}

/* Mobile header layout */
@media screen and (max-width: 973px) {
    .service-card .service-image .service-name,
    .service-card .service-placeholder .service-name {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        text-align: center !important;
        padding: 10px 5% !important;
        width: auto !important;
        max-width: 100% !important;
        word-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
    
    .header-fixed {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px;
    }
    
    .logo {
        width: 100%;
        margin-bottom: 10px;
        position: relative;
        z-index: 60;
    }
    
    .logo a {
        position: relative;
        z-index: 60;
        pointer-events: auto;
    }
    
    .header-contact {
        position: relative;
        z-index: 60;
    }
    
    .header-contact a {
        position: relative;
        z-index: 60;
        pointer-events: auto;
    }
    
    .navclosed {
        z-index: 100 !important;
    }
    
    .nav {
        z-index: 50 !important;
    }
    
    ul.nav-buttons.nav-on {
        background-color: #f2f3f3 !important;
        z-index: 50 !important;
    }
    
    ul.nav-buttons.nav-off {
        z-index: 50 !important;
    }
    
    .nav-buttons {
        background-color: #f2f3f3 !important;
    }
    
    .nav-buttons li {
        background-color: #f2f3f3 !important;
    }
    
    .nav-buttons li a {
        position: relative !important;
        background-color: #f2f3f3 !important;
    }
    
    .logo a {
        gap: 10px;
    }
    
    .logo-image {
        width: 60px;
    }
    
    .logo-title {
        font-size: 16px;
    }
    
    .logo-subtitle {
        font-size: 12px;
    }
    
    .header-contact {
        width: 100%;
        padding: 0;
        font-size: 12px;
        line-height: 1.6;
    }
    
    .contact-line {
        flex-wrap: wrap;
        gap: 5px;
        margin: 3px 0;
    }
    
    .contact-line:first-child .contact-separator {
        display: inline;
    }
    
    .contact-phones {
        flex-wrap: nowrap;
    }
    
    .contact-phones .contact-separator {
        display: inline;
        margin: 0 3px;
    }
    
    .contact-phones .contact-item {
        white-space: nowrap;
    }
    
    .contact-email {
        display: flex;
        margin-top: 3px;
        margin-left: 0;
    }
    
    .contact-email::before {
        content: '|';
        color: #cccccc;
        margin: 0 8px;
    }
    
    .contact-email .contact-separator {
        display: none;
    }
    
    .messenger-icon img {
        width: 16px;
        height: 16px;
    }
    
    .welcome {
        padding: 15px 0 7px 0;
    }
    
    .welcome h1 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 15px !important;
        padding-bottom: 0 !important;
    }
    
    .welcome p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .wrapper {
        padding-top: 155px;
    }
    
    .wrapper-padding {
        padding-top: 15px;
    }
    
    .mobile-break {
        display: inline;
    }
}

/* Hide mobile break on desktop */
@media screen and (min-width: 974px) {
    .mobile-break {
        display: none;
    }
}

/* Scroll offset for anchor links to account for fixed header */
#map-section, #faq-section {
    scroll-margin-top: 100px;
}

/* Google Review Buttons Hover Effects */
.google-review-btn-view,
.google-review-btn-write {
    transition: all 0.3s ease;
}

.google-review-btn-view {
    border: 1px solid #e0e0e0 !important;
}

.google-review-btn-write {
    border: 1px solid transparent !important;
}

.google-review-btn-view:hover {
    background-color: #fec412 !important;
    border-color: #fec412 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 196, 18, 0.4);
}

.google-review-btn-write:hover {
    background-color: #f8f8f8 !important;
    border-color: #e0e0e0 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(232, 232, 232, 0.4);
}
/* Wide Format Print Paper Table - prevent word wrap and center price columns */
.price-section.paper-table .price-table th:nth-child(2),
.price-section.paper-table .price-table th:nth-child(3),
.price-section.paper-table .price-table th:nth-child(4),
.price-section.paper-table .price-table td:nth-child(2),
.price-section.paper-table .price-table td:nth-child(3),
.price-section.paper-table .price-table td:nth-child(4) {
    white-space: nowrap;
    text-align: center;
}/
/* Wide Format Print - set 50% width for full-width tables on desktop */
@media screen and (min-width: 974px) {
    .price-section.full-width .price-table {
        width: 50% !important;
    }
}/* Price N
otes Section - consistent across all service pages */
.price-notes {
    margin-top: -15px;
    padding: 10px;
    background-color: transparent;
}

.price-notes p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.6;
}

.price-notes ul {
    margin: 10px 0 10px 20px;
    list-style-type: disc;
}

.price-notes li {
    margin: 5px 0;
    font-size: 16px;
    line-height: 1.6;
}/*
 Service Pages - Common Styles */
.service-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 20px;
}

.service-image-container {
    flex: 0 0 300px;
}

.service-image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.service-intro {
    flex: 1;
}

.service-intro h1 {
    font-size: 32px;
    margin-bottom: 10px;
    padding: 0 0 10px;
    color: #000000;
}

.service-intro p {
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
}

.price-section {
    margin-bottom: 20px;
}

.price-section h2 {
    font-size: 24px;
    margin-bottom: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000000;
    text-align: left;
}

.price-section h3 {
    font-size: 20px;
    margin: 20px 0 10px 0;
    color: #333333;
    text-align: left;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Make price tables 50% width on desktop for better readability */
@media screen and (min-width: 974px) {
    .price-table {
        width: 50%;
    }
}

.price-table th,
.price-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.price-table th {
    background-color: #f8f8f8;
    font-weight: 700;
    color: #000000;
}

.price-table td {
    background-color: #ffffff;
    color: #333333;
}

/* Mobile responsive styles for service pages */
@media screen and (max-width: 973px) {
    .service-header {
        display: block;
        margin-bottom: 20px;
    }
    
    .service-header::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .service-image-container {
        display: block;
        float: right;
        width: 100px;
        margin-left: 15px;
        margin-bottom: 10px;
    }
    
    .service-image-container img {
        width: 100%;
        height: auto;
    }
    
    .service-intro {
        display: block;
    }
    
    .service-intro h1 {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 0;
    }
    
    .service-intro p {
        font-size: 16px;
        margin-top: 0;
    }
    
    .price-section h2 {
        font-size: 20px;
    }
    
    .price-table th,
    .price-table td {
        padding: 10px 5px;
        font-size: 14px;
    }
}/* Auto-gene
rated content blocks styling */
.raspechatka-auto-content {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    line-height: 1.6;
    margin: 20px 0;
}

.raspechatka-auto-content p {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    line-height: 1.6;
    margin: 15px 0;
}

.raspechatka-auto-content strong {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
}

.raspechatka-auto-content ul {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    margin: 15px 0;
    padding-left: 20px;
}

.raspechatka-auto-content li {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    line-height: 1.6;
    margin: 8px 0;
}

/* Mobile responsive for auto-content */
@media screen and (max-width: 973px) {
    .raspechatka-auto-content p {
        font-size: 16px;
    }
    
    .raspechatka-auto-content li {
        font-size: 16px;
    }
}/* P
ower Outage Notice Block */
.power-notice {
    background-color: #f5f5dc;
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 20px 30px;
    margin: 20px 0 30px 0;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.power-notice p {
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 18px;
    line-height: 1.6;
    margin: 10px 0;
}

.power-notice p:first-child {
    font-size: 20px;
    margin-bottom: 10px;
}

.power-notice strong {
    color: #000000;
    font-weight: 700;
}

@media screen and (max-width: 973px) {
    .power-notice {
        padding: 15px 20px;
        margin: 15px 20px 20px 20px;
        text-align: center;
    }
    
    .power-notice p {
        font-size: 16px;
        text-align: center;
    }
    
    .power-notice p:first-child {
        font-size: 18px;
        text-align: center;
    }
}