/* Container adjustments for responsiveness */
.tractorhouse_container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

/* Ensure slideshow images are responsive and maintain aspect ratio */
.tractorhouse_mySlides {
    display: none;
}
.tractorhouse_mySlides img {
    max-width: 100%;
    height: auto;
}

/* Styling adjustments for cursors on thumbnails */
.tractorhouse_cursor {
    cursor: pointer;
}

/* Styling for the image container */
.tractorhouse_image-container {
    position: relative;
    margin-bottom: 15px;
}

/* Styling for next and previous buttons, with responsive sizing */
.tractorhouse_prev, .tractorhouse_next { 
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    text-decoration: none !important;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}
.tractorhouse_next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.tractorhouse_prev:hover, .tractorhouse_next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Styling for the number text (e.g., 1/3) on images */
.tractorhouse_numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Flexbox layout for thumbnails row */
.tractorhouse_row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.tractorhouse_row:after {
    content: "";
    display: table;
    clear: both; 
}

/* Responsive columns for thumbnails */
.tractorhouse_column {
    float: left;
    width: 16.66%;
    margin: 0 5px;
}
.tractorhouse_column img {
    width: 100%;
    height: auto;
}

/* Style adjustments for thumbnail hover and active states */
.tractorhouse_demo {
    opacity: 0.6;
}
.tractorhouse_active, .tractorhouse_demo:hover {
    opacity: 1;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .tractorhouse_prev, .tractorhouse_next {
        font-size: 20px;
        padding: 8px;
    }
    .tractorhouse_column {
        width: 25%; /* Adjust thumbnail column width on smaller screens */
    }
}

/* ---------------- Thumbnail Styles ---------------- */

/* Thumbnail container */
.tractorhouse_thumbnail-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.tractorhouse_thumbnail-container img {
    max-width: 100%;
    height: auto;
    max-height: 150px; /* Set the maximum height of the thumbnail images */
    padding: 0 5px; /* Add padding to the thumbnail images */
}

/* Thumbnail row */
.tractorhouse_thumbnail-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

/* Thumbnail column */
.tractorhouse_thumbnail-column {
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 16.66%; /* Set the width of the thumbnail column */
}

/* Thumbnail images */
.tractorhouse_thumbnail-column img {
    width: 100%;
    height: auto;
}

/* Thumbnail navigation buttons */
.tractorhouse_thumbnail-prev, .tractorhouse_thumbnail-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.5); // Add a background color to make the arrows visible
}

/* Position the "next button" to the right */
.tractorhouse_thumbnail-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Position the magnifying glass icon in the top-right corner of the slide */
.tractorhouse_lightbox {
    position: absolute;
    top: 10px;
    right: 10px;
    text-decoration: none;
    color: white;
    font-size: 24px;
}

a.tractorhouse_lightbox {
    text-decoration: none !important;
}

/* ---------------- Text Us Button ---------------- */
.tractorhouse-text a {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0 20px 0;
    background-color: #007bff; /* Bootstrap blue */
    color: white;
    text-decoration: none !important;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
}

.tractorhouse-text a:hover {
    background-color: #0056b3; /* A darker shade of blue */
    transform: scale(1.05); /* Slightly increase size */