/*//for bigger pc screens*/
@media (min-width: 1422px) {
        .modal-image {
        height: 500px; /* Adjust the height as needed */
    }

    .mt-lg-5 {
        margin-top: 3rem; /* This is equivalent to mt-5 in Bootstrap */
    }

    .modal-custom {
        max-width: 100%; /* Adjust as needed */
        width: 700px; /* Custom width */
    }

    #mobileBannerTop {
        display: none; /* Hide mobile banner for larger screens */
    }

    #mobileBannerBottom {
        display: none; /* Hide mobile banner for larger screens */
    }

    #pcBanner {
        display: none; /* Show PC banner */
    }

    /*#content-wrap {*/
    /*    !*background-color: #F6F7F7;*!*/
    /*    background-image: url("/images/coverPhoto/pc background.png");*/
    /*    background-size: cover;*/
    /*    background-position: center top;*/
    /*}*/
    body {
        background: url('/images/coverPhoto/Lauryna test pc-top.png1.2.png')  no-repeat top,
        url('/images/coverPhoto/Lauryna test pc-bottom.png.1.2.png') no-repeat bottom;
        /*background-size: cover;*/
        background-size: 100%, 100%; /* Ensure each image covers half of the element */
    }

    #carousel-wrap {
        width: 50%;
        margin: 0 auto;
    }

    #selectedTrampolinesSection {
        width: 51%;
    }
}

 /*for smaller pc screens*/
@media (min-width: 1025px) and (max-width: 1421px) {

    body {
        background: url('/images/coverPhoto/pc_top_smaller_screen.png')  no-repeat top,
        url('/images/coverPhoto/pc_bottom_smaller_screen.png') no-repeat bottom;
        /*background-size: cover;*/
        background-size: 100%, 100%; /* Ensure each image covers half of the element */
    }

    .modal-image {
        height: 350px; /* Adjust the height as needed */
    }

    #mobileBannerTop {
        display: none; /* Hide mobile banner for larger screens */
    }

    #mobileBannerBottom {
        display: none; /* Hide mobile banner for larger screens */
    }

    #pcBanner {
        display: none; /* Show PC banner */
    }

    #carousel-wrap {
        width: 40%;
        margin: 0 auto;
    }

    #logoNavbar {
        height: 30px;
    }

    #footer {
        height: 3rem;
    }

    #selectedTrampolinesSection {
        width: 41%;
    }
}

/* for mobile */
@media (max-width: 767px) {
    .modal-image {
        height: 300px; /* Adjust the height as needed */
    }

    .mt-lg-5 {
        margin-top: 0;
    }

    #mobileBannerTop {
        display: block; /* Hide mobile banner for larger screens */
    }

    #mobileBannerBottom {
        display: block; /* Hide mobile banner for larger screens */
    }

    #pcBanner {
        display: none; /* Show PC banner */
    }
}

/* For tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Your CSS rules here */
    .modal-image {
        height: 500px; /* Adjust the height as needed */
    }

    .mt-lg-5 {
        margin-top: 0;
    }

    #mobileBannerTop {
        display: block; /* Hide mobile banner for larger screens */
    }

    #mobileBannerBottom {
        display: block; /* Hide mobile banner for larger screens */
    }

    #pcBanner {
        display: none; /* Show PC banner */
    }

    #carousel-wrap {
        width: 80%;
        margin: 0 auto;
    }

}

/* Ensure consistent styling for list items */
.list-group-item, .trampoline-item {
    padding: 20px; /* Padding inside the item */
    border: 1px solid #ddd; /* Border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for depth */
}

/* Make the title stand out */
.list-group-item .fw-bold, .trampoline-item .fw-bold {
    font-size: 1.2rem; /* Larger font size for bold title */
}

/* Adjust badge styling */
.price-badge {
    font-size: 1rem; /* Normal font size */
    padding: 0.5rem 1rem; /* Padding around badge */
    margin-left: 1rem; /* Margin from the left */
}

/* Style the remove button */
.btn-outline-danger {
    display: flex; /* Flex display for alignment */
    align-items: center; /* Center align items */
    padding: 0.25rem 0.5rem; /* Padding inside button */
    font-size: 0.875rem; /* Font size */
    border: 1px solid #dc3545; /* Red border */
}

.btn-outline-danger:hover {
    background-color: #dc3545; /* Red background on hover */
    color: #fff; /* White text on hover */
}

/* Adjust SVG icon size */
.bi-trash3 {
    width: 16px; /* Icon width */
    height: 16px; /* Icon height */
}

/* Style disabled state of the order button */
#sendToOrderButton:disabled {
    background-color: #cccccc; /* Light gray background */
    cursor: not-allowed; /* Not-allowed cursor */
    opacity: 0.6; /* Reduced opacity */
}

/* Additional styling for the selected trampolines section */



#sendToOrderButton {
    margin-top: 20px; /* Margin from the top */
}

#SelectedTrampolines h3 {
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold; /* Bold font weight */
    margin-bottom: 20px; /* Space at the bottom */
    color: #343a40; /* Dark text color */
}

.trampoline-name {
    text-align: center;
    margin: 0 auto 10px; /* Center horizontally and add margin below */
    width: 50%; /* Adjust the width as needed */
    max-width: 600px; /* Optional: Set a maximum width for larger screens */
}

.trampoline-name h3 {
    font-size: 1.5rem;
    color: white; /* White text color for visibility */
    background-color: #4E91FD; /* Optional: dark background for readability */
    padding: 10px;
    border-radius: 15px;
    margin: 0; /* Remove default margin */
}

.trampoline-sizes {
    text-align: center;
    /*margin-top: 10px; !* Adjust spacing as needed *!*/
}

.trampoline-sizes p {
    font-size: 1rem;
    color: black; /* White text color for visibility */
    /*background-color: rgba(0, 0, 0, 0.3); !* Optional: dark background for readability *!*/
    padding: 10px;
    /*border-radius: 5px;*/
}

.carousel-caption h5 {
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: dark background for readability */
    color: #ffffff; /* White text color */
    padding: 10px;
    border-radius: 5px;
}

/* Base styles for the container */
.containerModal {
    max-width: 800px; /* Maximum width of the container */
    margin: 20px auto; /* Center the container and add margins */
    padding: 20px; /* Internal padding for spacing */
    background-color: #f8f9fa; /* Light background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Heading styles */
#showTrampolineModal h2 {
    font-size: 1.8em; /* Larger font size for main heading */
    color: #0a58ca; /* Primary color for heading */
    margin-bottom: 15px; /* Space below the heading */
}

#showTrampolineModal h5 {
    font-size: 1.2em; /* Font size for subheadings */
    color: #333; /* Dark gray color for text */
    margin: 5px 0; /* Vertical space between h5 elements */
}

/* Styling for the h6 element */
#showTrampolineModal h6 {
    background-color: #e9ecef; /* Light gray background for the paragraph */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Padding around the text */
    border: 1px solid #0a58ca; /* Border color to match the theme */
    color: #555; /* Slightly lighter text color for contrast */
    line-height: 1.5; /* Improved readability with line height */
    margin-top: 20px; /* Space above the h6 element */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .containerModal {
        padding: 15px; /* Less padding on smaller screens */
    }

    #showTrampolineModal h2 {
        font-size: 1.5em; /* Smaller heading on mobile */
    }

    #showTrampolineModal h5 {
        font-size: 1em; /* Smaller subheading on mobile */
    }

    #showTrampolineModal h6 {
        font-size: 0.9em; /* Smaller text for the paragraph on mobile */
    }
}


/*.custom-container {*/
/*    background-color: #F6F7F7;*/
/*}*/


#selectTrampoline {
    background-color: #4E91FD;
    color: white;
    font-weight: 500;
}

#sendToOrderButton {
    background-color: #F4AA90;
    font-weight: 500;
}