/* Hero Section */
.jumbotron {
    background-color: #00509E; /* Primary Blue */
    background-image: url('../TMDlogo.png'); /* Adjust path */
    background-repeat: no-repeat;
    background-position: center bottom; /* Logo stays at the bottom */
    background-size: 30%; /* Adjust logo size */
    color: #FFFFFF; /* White text */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* Subtle shadow for contrast */
    padding: 5rem 2rem; /* Ensure some padding for the text */
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column; /* Stack items */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align text to the top */
    min-height: 450px; /* Maintain height */
    position: relative;
}

/* Text Section */
.jumbotron .text-section {
    text-align: center; /* Centers the text horizontally */
    margin-bottom: auto; /* Ensures it does not overlap the logo */
    width: 100%; /* Full width text alignment */
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .jumbotron {
        flex-direction: column; /* Stack on smaller screens */
        text-align: center;
    }

    .jumbotron .logo-section {
        margin-bottom: 1rem; /* Reduce margin below logo */
    }
}

/* CSS for making Card 1 taller */
.custom-card-tall {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* Let the height adapt naturally */
    padding: 1rem; /* Optional: Add padding for spacing */
    text-align: center; /* Ensure text inside is centered */
}

/* Optional: If you want the images to fill the space properly */
.custom-card-tall .card-img {
    height: 450px; /* Adjust this value based on how tall you want the images */
    object-fit: cover; /* This ensures the image fills the space without distortion */
    margin: 0 auto; /* Center the images horizontally */
}

.custom-card-tall .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card-text {
    color: #2d2d2d;
}

.card-title {
    text-align: center; /* Centers the title */
    color: #2d2d2d;
}

body {
    /*background-image: url('../back2.webp'); */
    background-color: #2d2d2d;
    color: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; /* Optional for a parallax effect */
}

section {
    background-color: #23395d;
    color: white;
}

/* Background Logo styling */
.background-logo {
    max-width: 500px; /* Ensures the logo doesn't exceed 600px on larger screens */
    height: auto; /* Maintain the aspect ratio */
    margin: 0 auto; /* Center the logo */
    display: block; /* Ensure proper alignment */
}

@media (max-width: 768px) {
    .background-logo {
        max-width: 100%; /* Make the logo responsive to screen size */
        height: auto; /* Maintain aspect ratio */
    }
}