/* Custom styles for contact form background and text */
.contact-background {
    background-image: linear-gradient(rgba(128, 128, 128, 0.4), rgba(128, 128, 128, 0.4)), url('../Images/Gallery/DSCN9994.JPG');
    background-size: cover;
    background-position: center;
    color: #000000; /* Set default text color to black */
}

.contact-background h2,
.contact-background label,
.contact-background .small-teaser .media-body {
    color: #000000; /* Ensure headings, labels, and info text are black */
}

.contact-background input[type="text"],
.contact-background input[type="email"],
.contact-background input[type="phone"],
.contact-background textarea {
    color: #000000; /* Set input and textarea text color to black */
    border-color: #464646; /* Adjust border color for better contrast */
    background-color: rgba(255, 255, 255, 0.7); /* Slightly opaque white background for inputs */
}

/* Styles for Review Cards */
.review-card {
    background-color: #333333; /* Dark background for the card */
    color: #ffffff; /* White text */
    padding: 20px;
    margin-bottom: 20px; /* Space between cards if stacked, or from map */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    min-height: 450px; /* Set a minimum height for review cards to match larger map and accommodate photos */
}

.review-card .review-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.review-card .review-stars {
    margin-bottom: 10px;
}

.review-card .star-gold {
    color: #FFD700; /* Gold color for stars */
    font-size: 1.2em;
    margin-right: 2px;
}

.review-card .review-text {
    font-size: 0.95em;
    line-height: 1.5;
}

.review-card .review-image {
    width: 100px; /* Adjust image width as needed */
    height: 100px; /* Adjust image height as needed */
    border-radius: 50%; /* Make images circular */
    object-fit: cover; /* Ensure images cover the area without distortion */
    margin: 0 auto 15px auto; /* Center image and add some bottom margin */
    display: block; /* Make it a block element to apply margin auto */
}

.page_google_reviews .row {
    display: flex;
    align-items: center; /* Vertically align items in the middle */
    justify-content: center; /* Horizontally center items */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.page_google_reviews .col-sm-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Ensure columns take full height for alignment */
}

.page_google_reviews #google-reviews-widget-container iframe {
    /* Removed max-width and height auto as height is set directly in HTML */
}

/* Hover effect for service teasers */
.teaser {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 10px; /* Rounded edges for stone-like appearance */
}

.teaser.service-teaser-hover {
    transform: translateY(-5px) scale(1.02); /* Slightly lift and enlarge */
    box-shadow: 0 8px 16px rgba(187, 19, 254, 0.7); /* Purple shadow with transparency */
    background-color: #222222; /* Dark background on hover */
    color: #ffffff; /* White text on hover */
}

.teaser.service-teaser-hover h4 a {
    color: #ffffff; /* Ensure title link is white on hover */
}

.contact-background .small-teaser .media-body {
    font-size: 1.2em; /* Make text larger */
    font-weight: bold; /* Make text bold */
}

/* Responsive Video Background Styles */
.intro_section.page_mainslider.ds {
    min-height: 500px; /* Adjust default height for responsiveness */
}

.video-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .intro_section.page_mainslider.ds {
        min-height: 300px; /* Further reduce height on small screens */
        background-image: url('images/Justin working/Taylors-Hauling-2.mp4'); /* Fallback image for mobile */
        background-size: cover;
        background-position: center;
    }

}