/* Size for brand */
nav .navbar-brand
{
    font-size: xx-large;
}

/* Colors for brand */
nav .navbar-brand .blue
{
    color: #537fbe;
}
nav .navbar-brand .red
{
    color: #ea433b;
}
nav .navbar-brand .yellow
{
    color: #f5b82e;
}
nav .navbar-brand .green
{
    color: #2e944b;
}
@media screen and (max-width: 600px) {
    .door-fault-select {
        font-size: 12px; /* Reduced font size */
    }
    .modal-dialog {
        max-width: 80%; /* Reduced modal width */
    }
}
@media screen and (max-width: 600px) {
    .main-heading {
        font-size: 14px;
    }
}
.content-box {
    border: 1px solid #000;  /* Add a border */
    padding: 20px;  /* Add some padding */
    margin-bottom: 20px;  /* Add some margin at the bottom */
    background-color: #f9f9f9;  /* Add a background color */
    text-align: left;  /* Align the text to the left */
}
.content-box img {
    max-width: 100%;  /* Limit the maximum width of the image to the width of the .content-box */
    height: auto;  /* Set the height to auto to maintain the aspect ratio of the image */
}
.custom-file-upload {
    padding: 10px;
    cursor: pointer;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
}
.custom-file-upload:hover {
    background-color: #45a049;
}

.image-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: min-content; /* add this line */
    gap: 10px; /* adjust this value to add space between images */
}

.image-container img {
    width: 100%;
    height: auto; /* maintain aspect ratio */
}

@media (min-width: 600px) {
    .image-container img {
        width: 90%; /* smaller width on large screens */
    }
}

/* Add styles for media-container */
.media-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 10px;
}

.media-container img,
.media-container video {
    width: 100%;
    height: auto;
}