/* Ensure the page takes the full height */
html, body {
    height: 100%;
    margin: 0;
}

/* The wrapper will take up the full height of the viewport */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Main content will take the remaining space */
main {
    flex: 1;
    background-image: url('/static/images/00058.jpg');
    background-size: cover;  /* Make sure the image covers the entire container */
    background-position: center;  /* Center the image within the container */
    background-repeat: no-repeat;  /* Prevent the image from repeating */
    width: 100%;  /* Optional: Set the container width */
    height: 300px;  /* Optional: Set the container height */
    color: black;  /* Optional: Set the text color to make it readable */
}


/* Style for the hero section */
.hero {
    position: relative;
    background-image: url('/static/images/hero.png');
    background-size: cover;
    background-position: center;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.transparent-background {
    background-color: rgba(255, 255, 255, 0.0); /* White background with 50% transparency */
    padding: 20px;
    border-radius: 8px;
}

.hero_image_container {
    display: flex;
    justify-content: center; /* Centers the hero section horizontally */
    align-items: center;     /* Centers the hero section vertically */
    background-color: rgba(59, 217, 82, 0.5); /* Light green with opacity (RGBA) */
    padding: 0 20px;         /* Optional: adds some padding if needed */
}


.hero-text h1 {
    margin: 0;
    font-size: 5rem;
}

.hero-text p {
    font-size: 1.5rem;
}

.custom-card, .custom-card .card-body, .custom-card .card-img-top, .custom-card .card-title, .custom-card .card-text, .custom-card .image-container {
    margin: 0;        /* Removes any margin */
    padding: 0;       /* Removes any padding */
    border: none;     /* Removes any border that might add space */
}

.container h1 {
    text-align: center;  /* Centers the card title */
    width: 100%;         /* Ensures the card title takes up full width */
    padding: 20px 0;     /* Adds equal padding top and bottom */
    box-sizing: border-box; /* Ensures padding is included in the total width and height */
    background-color: rgba(255, 255, 255, 0.0);
}

.image-container {
    height: 100%;
    display: flex;
}

.card-img-top {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image fits within the container */
}

.custom-card {
    max-width: 250px;  /* Increases the max width of each card */
    margin: auto;      /* Centers the card */
}

.custom-card-body {
    padding: 10px;  /* Adds some padding inside the card body */
}

.custom-card .card-title {
    text-align: center;  /* Centers the card title */
    padding: 10px 0;     /* Adds padding to the title */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.row .col-md-6, .row .col-lg-3 {
    padding: 5px; /* Reduces padding between the columns */
}

.more-link {
    display: block;
    text-align: right;
    margin-top: 10px; /* Adjust this value as needed */
}

.toast-top-custom {
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
}

.profile-container { 
    max-width: 600px; 
    margin: auto; 
    margin-top: 50px; 
    padding: 20px; 
    background-color: rgba(255, 255, 255, 0.0);
} 

.thin-black-border {
    border: 1px solid black; 
    border-radius: 15px; 
    padding: 20px; 
}


.card-container {
    padding: 2.5px;
}


.card-fixed-size {
    width: 100%;
    height: 600px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.card-fixed-size .card-img-top {
    flex: 0 1 auto;
    height: 400px; 
    object-fit: cover; 
}

.card-title-fixed {
    flex: 0 0 auto; /* Prevent the title from stretching */
    margin-bottom: 10px;
}


.card-text-fixed {
    flex: 1 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 60px; 
}

.card-body {
    display: flex;
    flex-direction: column;
}

.card-body .mt-auto {
    margin-top: auto; 
}

.table-warning {
    background-color: #fff3cd; /* Light yellow background for warning */
}

.table-danger {
    background-color: #f8d7da;
}