body {
    background-color: #3a3a3a; /* Darker grey for the body */
    color: white;
}
.header {
    background-color: #242424; /* Medium grey header */
}
.header .navbar-nav .nav-link {
    color: white; /* White text for the menu */
}
.card {
    background-color: #505050; /* Slightly lighter grey for the cards */
}
.footer {
    background-color: #242424; /* Light grey footer */
}

a {
    color: lightgrey;
}

a:hover {
    color: #d3d3d3; /* Optional: Slightly lighter grey on hover */
}

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

/* Default for larger screens */
.navbar-brand img {
    max-width: 400px; /* Set max-width for desktop */
    height: auto;
}

/* For mobile screens */
@media (max-width: 768px) {
    .navbar-brand img {
        max-width: 300px; /* Smaller logo size for mobile */
        height: auto;
    }
}


/* Container for the flip effect */
.flip-card {
    position: relative;
    width: 100%;
    height: 300px; /* Match the height of the image */
    perspective: 1000px; /* Create the 3D effect */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); /* Rotate on hover */
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front {
    z-index: 2; /* Front of the card, image */
}

.flip-card-back {
    /*background-color: rgba(0, 0, 0, 0.8);*/ /* Dark overlay with transparency */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg); /* Initially rotated for the back */
}

/* Ensure the flip effect is only for the image, keeping the content below */
.card-body {
    padding-top: 20px; /* Add some spacing */
}

.details-container {
    background-color: #505050; /* Slightly lighter grey for the content */
    padding: 20px;
    border-radius: 8px;
    color: white;
}
.offender-photo {
    max-width: 100%;
    height: auto;
}