html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center; /* Centers text in the body */
    text-rendering: optimizeLegibility; /* Improves font rendering */

    -webkit-text-size-adjust: 100%; /* Prevents iOS from changing font size */
    -ms-text-size-adjust: 100%; /* Prevents IE from changing font size */
    -moz-osx-font-smoothing: grayscale; /* Improves font rendering on Mac */
    -webkit-font-smoothing: antialiased; /* Improves font rendering on WebKit browsers */
}

.logo-color-gold {
    color: #cc9933;
}


.logo-color-blue {
    color: #2b3990
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: black;
    color: white;
    margin: 0;
}

main {
    flex: 1;
    overflow-y: auto;
}

/*
    Layout/Navbar    
*/

.navbar-wrapper {
    justify-items: right;
}

.navbar-toggler {
    border-color: white;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-link {
    color: white;
}

    .nav-link.active {
        color: #cc9933;
        font-weight: bold;
    }

.index-body, .about-body, .contact-body, .services-body, .listings-body, .listing-details-body, .create-listing-body, .edit-listing-body, .admin-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 86vh;
}

/*
    Home Page
*/

.index-body {
    background-image: url('../media/home background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

    .index-body h1 {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .index-body p {
        padding-top: 50px;
    }

/*
    Services
*/

.services-body {

}

    .services-body h1 {
        margin: 30px 0px;
    }

.card {
    background-color: #333;
    border: none;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-text {
    font-size: 1rem;
}


/*
    Current Listings
*/

.listings-body {
    background-image: url('../media/listings.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

    .listings-body h1 {
        margin: 0px 0px 20px;
    }

.listings-header {
    font-size: 1.5rem;
    width: 100%;
    margin: 0px;
    padding: 20px;
    background-color: black;
}

    .listings-header p, h3 {
        padding-top: 10px;
    }

    .listings-header h3 {
        margin-bottom: 30px;
    }

    .listings-header a {
        color: #cc9933;
        text-decoration: none;
    }

        .listings-header a:hover {
            color: #2b3990;
        }

/*
    Listing Preview (Partial)
*/

.listing-preview {
    width: 95%;
    margin: auto;
    padding: 15px;
    border: 2px solid #808080;
    border-radius: 10px;
    margin-top: 15px;
    background-color: rgb(0, 0, 0, 0.75);
}

    .listing-preview h5 {
        margin-top: 15px;
        margin-bottom: 15px;
    }

.img-thumbnail {
    height: 200px;
    width: auto;
    margin: 20px;
    background-color: black;
    border-color: black;
}

.listing-preview-details{
    margin-left: 10px;
}

.admin-listing-preview {
    width: 95%;
    margin: auto;
    padding: 15px;
    border: 2px solid #808080;
    border-radius: 10px;
    margin-top: 15px;
}

.admin-listing-preview-btns a, .admin-listing-preview-btns button, .listing-preview a {
    width: 125px;
    max-width: 100%;
    margin: 5px;
}

.listing-preview-btn-margin {
    margin: auto 0px;
}

/*
    View Listing / Listing Details
*/

.listing-details-body .card p {
    margin-bottom: 0px;
}

.carousel-image-wrapper {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 400px; /* Adjust height as needed */
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .carousel-image-wrapper img {
        max-width: 85%;
        max-height: 95%;
        object-fit: contain; /* Prevent stretching */
    }

.thumbnail-image {
    cursor: pointer;
    height: 75px;
    object-fit: cover;
    border: 2px solid transparent;
    margin: auto;
}

    .thumbnail-image:hover {
        border-color: #007bff; /* Highlight on hover */
    }

.carousel-control-prev, .carousel-control-next {
    width: 5%;
}

.image-modal-header {
    border: none;
}

.carousel-image-wrapper-modal {
    position: relative;
    width: 100%;
    height: 88vh; /* Adjust height as needed */
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .carousel-image-wrapper-modal img {
        max-width: 85%;
        max-height: 95%;
        object-fit: contain; /* Prevent stretching */
    }


/*
    Contact
*/
.contact-body {
    background-image: url('../media/contact background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

    .contact-body h1 {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .contact-body p {
        padding-top: 50px;
    }

.contact-info h3 {
    padding-top: 70px;
}


/*
    About
*/

.about-body {
    background-image: url('../media/about.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

    .about-body h1 {
        margin: 30px 0px;
        text-shadow: 3px 3px 3px black;
    }

    .about-body p {
        font-size: 1.5rem;
        width: 50%;
        margin: auto;
        margin-top: 30px;
        background-color: black;
        padding: 20px;
        border-radius: 10px;
    }


/*
    Admin
*/

.admin-body {

}

.admin-btns a, .admin-btns button {
    margin: 5px;
    margin-top: 20px;
}

.login-form-wrapper {
    max-width: 300px;
    margin: auto;
}

.modal-content {
    border: solid 1px white;
    background-color: black;
}

.modal-header {
    background-color: #2b3990;
}

.modal-body p {
    text-align: left;
}


/*
    Create Listing
*/

.create-listing-body {
    margin: auto;
    padding: 0px 20px;
}

    .create-listing-body h1 {
        margin-top: 30px;
        margin-bottom: 30px;
        text-shadow: 3px 3px 3px black;
    }

    .create-listing-body .form-group {
        display: flex;
        align-items: center;
    }

        .create-listing-body .form-group label {
            margin-right: 1rem; /* Adjust spacing between label and input */
            min-width: 100px; /* Set a fixed width for labels if needed */
            text-align: left;
        }

        .create-listing-body .form-group input,
        .create-listing-body .form-group select,
        .create-listing-body .form-group textarea {
            flex-grow: 1; /* Make the input take up the remaining space */
        }

/*
    Edit Listing
*/

.edit-listing-body {
    margin: auto;
    padding: 0px 20px;
}

    .edit-listing-body h1 {
        margin-top: 30px;
        margin-bottom: 30px;
        text-shadow: 3px 3px 3px black;
    }

    .edit-listing-body .form-group {
        display: flex;
        align-items: center;
    }

        .edit-listing-body .form-group label {
            margin-right: 1rem; /* Adjust spacing between label and input */
            min-width: 100px; /* Set a fixed width for labels if needed */
            text-align: left;
        }

        .edit-listing-body .form-group input,
        .edit-listing-body .form-group select,
        .edit-listing-body .form-group textarea {
            flex-grow: 1; /* Make the input take up the remaining space */
        }

/*
    Footer
*/

footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 25px;
    position: relative;
    bottom: 0;
    width: 100%;
    flex-shrink: 0;
    z-index: 10;
}

/*
    ~ Utility ~
*/

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
    }
}

@media (max-width: 767px) {
    
    .about-body p {
        font-size: 1.2rem;
        width: 80%;
    }

    .contact-body h1 {
        margin-bottom: 0px;
    }
}

@media (max-width: 991px) {
    .listing-preview-desc-pad-top {
        display: none;
    }
}