/* Miller Heating & Air Conditioning - Custom Styles */

:root {
    --primary-color: #020972;
    --primary-dark: #010551;
    --secondary-color: #c41e3a;
    --text-dark: #333;
    --text-muted: #6c757d;
    --bg-light: #f8f9fa;

    /* Bootstrap overrides */
    --bs-primary: #020972;
    --bs-primary-rgb: 2, 9, 114;
}

/* General Styles */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* Top Bar */
.top-bar {
    font-size: 0.875rem;
}

.top-bar a:hover {
    color: var(--secondary-color) !important;
}

/* Navigation */
.navbar {
    padding: 0.75rem 0;
}

.logo {
    max-height: 60px;
    width: auto;
}

.navbar-nav .nav-link {
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
}

/* Primary Button */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-outline-light:hover {
    transform: translateY(-2px);
}

/* Page Header (for inner pages) */
.page-header {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10 L40 70 M10 40 L70 40 M18 18 L62 62 M62 18 L18 62' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.06'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23ffffff' opacity='0.08'/%3E%3Cpath d='M40 14 L37 18 M40 14 L43 18 M40 66 L37 62 M40 66 L43 62 M14 40 L18 37 M14 40 L18 43 M66 40 L62 37 M66 40 L62 43 M21 21 L18 25 M21 21 L25 18 M59 59 L62 55 M59 59 L55 62 M59 21 L62 25 M59 21 L55 18 M21 59 L18 55 M21 59 L25 62' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E") repeat,
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.page-header h1 {
    font-size: 2.5rem;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('../images/group-photo.jpg?v=12') center/cover no-repeat;
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: center;
}

.hero-section h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section .lead {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Features Bar */
.features-bar {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10 L40 70 M10 40 L70 40 M18 18 L62 62 M62 18 L18 62' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.06'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23ffffff' opacity='0.08'/%3E%3Cpath d='M40 14 L37 18 M40 14 L43 18 M40 66 L37 62 M40 66 L43 62 M14 40 L18 37 M14 40 L18 43 M66 40 L62 37 M66 40 L62 43 M21 21 L18 25 M21 21 L25 18 M59 59 L62 55 M59 59 L55 62 M59 21 L62 25 M59 21 L55 18 M21 59 L18 55 M21 59 L25 62' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E") repeat,
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.features-bar i {
    display: block;
}

.features-bar h6 {
    margin-bottom: 0;
    font-weight: 600;
}

/* Section Titles */
.section-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
    margin-top: 0.5rem;
}

.text-center .section-title::after,
.section-title.text-center::after {
    margin-left: auto;
    margin-right: auto;
}

/* Service Cards */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.service-icon {
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.service-icon i {
    font-size: 2rem;
    color: white;
}

/* Brand Logos */
.brand-logo {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo:hover {
    transform: scale(1.05);
}

.brand-logo img {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Tips Section */
.tip-item {
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.tip-item:hover {
    transform: translateX(5px);
}

.tip-number {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}

.tip-item h5 {
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

/* CTA Section */
.cta-section {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10 L40 70 M10 40 L70 40 M18 18 L62 62 M62 18 L18 62' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.06'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23ffffff' opacity='0.08'/%3E%3Cpath d='M40 14 L37 18 M40 14 L43 18 M40 66 L37 62 M40 66 L43 62 M14 40 L18 37 M14 40 L18 43 M66 40 L62 37 M66 40 L62 43 M21 21 L18 25 M21 21 L25 18 M59 59 L62 55 M59 59 L55 62 M59 21 L62 25 M59 21 L55 18 M21 59 L18 55 M21 59 L25 62' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E") repeat,
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* Contact Section */
.contact-card {
    background-color: white;
    border-radius: 10px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.contact-card:hover {
    transform: translateY(-5px);
}

.contact-card a {
    color: var(--text-dark);
}

.contact-card a:hover {
    color: var(--primary-color);
}

/* Form Styles */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(2, 9, 114, 0.25);
}

#contact .card {
    border-top: 4px solid var(--primary-color);
    background: white;
}

#contact .card h4 {
    color: var(--primary-color);
}

/* Footer */
.footer {
    background: linear-gradient(180deg, #212529 0%, #1a1d20 100%);
}

.footer-logo {
    max-height: 90px;
    border-radius: 5px;
}

.footer a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--secondary-color);
}

.affiliation-logo {
    max-height: 60px;
    transition: transform 0.3s ease;
    background: white;
    padding: 8px;
    border-radius: 5px;
}

.affiliation-logo:hover {
    transform: scale(1.1);
}

.affiliation-logo.no-bg {
    background: none !important;
    padding: 0 !important;
}

.affiliation-badge {
    text-align: center;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background-color: var(--primary-dark);
    color: white;
    transform: translateY(-3px);
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .hero-section {
        min-height: 500px;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .navbar-nav {
        padding-top: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        min-height: 450px;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .top-bar .col-md-6 {
        text-align: center !important;
        margin-bottom: 0.25rem;
    }

    .top-bar small {
        word-break: break-word;
    }

    .features-bar .col-md-3 {
        margin-bottom: 1rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .cta-section .btn-lg {
        display: block;
        width: 100%;
        margin-right: 0 !important;
    }

    .page-header h1 {
        font-size: 1.75rem;
    }
}

/* Photo Gallery */
.gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 9, 114, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    font-size: 2rem;
    color: white;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 2;
}

.gallery-nav:hover {
    background: rgba(255, 255, 255, 0.4);
}

.gallery-prev {
    left: 1rem;
}

.gallery-next {
    right: 1rem;
}

.gallery-counter {
    font-size: 0.875rem;
    opacity: 0.8;
}

#galleryModal .modal-content {
    background: transparent;
}

#galleryModal .modal-backdrop {
    opacity: 0.9;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}