/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure footer or similar sections do not cause overflow */
.footer, .section, .container {
    max-width: 100vw;
    overflow-x: hidden;
}

    /* Ensure all child elements respect the container's width */
    .footer *, .section *, .container * {
        max-width: 100%;
        box-sizing: border-box; /* Ensures padding/margins don't cause overflow */
    }

/* Handle images and other media that might cause overflow */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevent inline elements from causing issues */
}

/* Specific elements that might cause overflow, like wide buttons */
.btn, .link {
    max-width: 100%;
    white-space: nowrap; /* Prevent text from overflowing */
}

.footer-container {
    padding-left: 0; /* If padding is causing overflow */
    padding-right: 0;
}

.footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Ensures content stays within the viewport */
}


.multi-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    column-gap: 1rem; /* Adjust gap between columns */
}

.lg\:col-span-10 {
    grid-column: span 10 / span 10;
}

.lg\:col-span-11 {
    grid-column: span 11 / span 11;
}

.lg\:col-span-12 {
    grid-column: span 12 / span 12;
}

.md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.h-21 {
    height: 5.25rem;
}

.h-22 {
    height: 5.5rem;
}

.h-23 {
    height: 5.75rem;
}

.h-24 {
    height: 6rem;
}

.h-25 {
    height: 6.25rem;
}

.h-26 {
    height: 6.5rem;
}

.h-27 {
    height: 6.75rem;
}

.h-29 {
    height: 7rem;
}

.h-30 {
    height: 7.25rem;
}

.h-31 {
    height: 7.5rem;
}


.w-96 {
    width: 24rem;
}

.w-128 {
    width: 32rem;
}

.left-64 {
    left: 16rem;
}


.lg\:col-span-1 {
    grid-column: span 1 / span 1;
}

.btn:hover {
    cursor: pointer; /* Change cursor to hand pointer */
}

.error-message {
    color: red;
    margin-top: 5px;
    display: block; /* Ensure it displays as a block to appear on a new line */
}

.validation-summary {
    color: red;
    margin: 5px;
    display: block;
}

input.input-validation-error {
    border: 1px solid red;
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px; /* Adjust based on your needs */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.alert {
    padding: 2px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .alert h4 {
        margin-top: 0;
        color: inherit;
    }

    .alert .alert-link {
        font-weight: bold;
    }

    .alert > p,
    .alert > ul {
        margin-bottom: 0;
    }

        .alert > p + p {
            margin-top: 5px;
        }

.alert-dismissable,
.alert-dismissible {
    padding-right: 35px;
}

    .alert-dismissable .close,
    .alert-dismissible .close {
        position: relative;
        top: -2px;
        right: -21px;
        color: inherit;
    }

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

    .alert-success hr {
        border-top-color: #c9e2b3;
    }

    .alert-success .alert-link {
        color: #2b542c;
    }

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

    .alert-info hr {
        border-top-color: #a6e1ec;
    }

    .alert-info .alert-link {
        color: #245269;
    }

.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

    .alert-warning hr {
        border-top-color: #f7e1b5;
    }

    .alert-warning .alert-link {
        color: #66512c;
    }

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

    .alert-danger hr {
        border-top-color: #e4b9c0;
    }

    .alert-danger .alert-link {
        color: #843534;
    }

.bg-DSgreen {
    background-color: #023331;
}

.arrow.gold {
    border-color: rgb(178 147 65 / var(--tw-bg-opacity)) transparent transparent transparent;
}

/* Ensure the "Upcoming Auctions" section does not cause overflow */
.upcoming-auctions-container {
    max-width: 100vw; /* Prevent the container from exceeding the viewport width */
    overflow-x: hidden; /* Prevent horizontal scrolling within this section */
}

    /* Ensure that the inner elements do not exceed their parent's width */
    .upcoming-auctions-container .auction-item {
        max-width: 100%; /* Ensure individual auction items don't overflow */
        box-sizing: border-box; /* Consider padding/border in width calculations */
    }

    /* Handle the images within the upcoming auctions section */
    .upcoming-auctions-container img {
        max-width: 100%; /* Ensure images scale properly */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Ensure no extra space around images */
    }

    /* Handle any buttons or text that might cause overflow */
    .upcoming-auctions-container .btn,
    .upcoming-auctions-container .text-content {
        max-width: 100%; /* Ensure buttons or text blocks don’t overflow */
        white-space: normal; /* Allow text to wrap if necessary */
        overflow: hidden; /* Prevent any hidden overflow */
        text-overflow: ellipsis; /* Optionally handle overflow text with an ellipsis */
    }

/* Ensure swiper controls don't cause overflow */
.swiper-button-prev, .swiper-button-next {
    max-width: 100vw;
}

.swiper-container {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Ensure no overflow issues */
    position: relative; /* Ensure positioning for navigation buttons */
    visibility: visible; /* Ensure the container is visible */
    opacity: 1; /* Ensure the container is fully opaque */
}

/* Swiper Wrapper and Slides */
.recent-swiper-wrapper {
    display: flex;
    align-items: center; /* Center content vertically if needed */
}

.recent-swiper-slide {
    width: 100%; /* Ensure each slide takes full width */
    box-sizing: border-box; /* Include padding/border in the element's width and height */
}

    /* Swiper Slide Images */
    .recent-swiper-slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Ensure images cover the slide area without stretching */
    }

/* Navigation Buttons */
.recent-swiper-slide,
.recent-swiper-slide {
    width: auto;
    color: rgba(26, 40, 72, 1); /* Customize color if needed */
    top: 50%; /* Vertically center the buttons */
    transform: translateY(-50%); /* Correct centering */
    z-index: 10; /* Ensure buttons are above other elements */
}

/* Adjust button size based on screen width */
.recent-swiper-button-next:after,
.recent-swiper-button-prev:after {
    font-size: 1.5rem; /* Default size */
    line-height: 2rem;
}

@media (min-width: 768px) {
    .recent-swiper-button-next:after,
    .recent-swiper-button-prev:after {
        font-size: 1.875rem; /* Medium screen size */
        line-height: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .recent-swiper-button-next:after,
    .recent-swiper-button-prev:after {
        font-size: 2.25rem; /* Large screen size */
        line-height: 2.5rem;
    }
}

.recent-swiper-button-next,
.recent-swiper-button-prev {
    position: absolute;
    width: auto;
    color: rgba(26, 40, 72, 1);
    /*    top: 50%;*/
    transform: translateY(-50%);
    z-index: 10;
    /*  margin: 0 10px;*/ /* Adds some space around the buttons */
}

/* Positioning of Navigation Buttons */
.recent-swiper-button-prev {
    left: 10px; /* Adjust to avoid cutting off content */
}

.recent-swiper-button-next {
    right: 10px; /* Adjust to avoid cutting off content */
}