/* Importing Google Fonts for better typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* Custom CSS for styling */
body {
    background: linear-gradient(120deg, #fdd835, #f57c00, #d32f2f, #303f9f); /* Yellow, orange, red, and blue */
    color: #fff; /* White text for better contrast on the background */
    font-family: 'Poppins', sans-serif; /* Using Poppins font */
    margin: 0;
    padding: 0;
}

h1 {
    color: #fff;
    text-align: center;
    margin-top: 20px;
    font-weight: 600; /* Bold heading */
    font-size: 2.5em; /* Larger size for the heading */
}

.content {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* Slight transparency for content */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    color: #333; /* Dark text inside content for readability */
}

.table-dark {
    background-color: #6d4c41; /* Dark brown background for table */
    color: white; /* White text for table cells */
    border-collapse: collapse; /* Ensure borders do not overlap */
}

.table-dark th, .table-dark td {
    padding: 10px;
    text-align: center; /* Center align table cells */
    border-bottom: 2px solid #fff; /* White divider line between rows */
}

.table-dark th {
    background-color: #5d4037; /* Slightly darker background for headers */
    font-weight: 600; /* Bold header text */
}

.link {
    color: #d32f2f; /* Red links */
    text-decoration: none; /* Remove underline */
}

.link:hover {
    text-decoration: underline; /* Underline on hover for links */
}

h2 {
    font-size: 1.8em; /* Larger subheading */
    margin-top: 30px;
    font-weight: 600; /* Bold subheading */
}

p {
    font-size: 1.1em; /* Slightly larger text for readability */
    line-height: 1.6; /* Increase line height for better readability */
}

/* Custom CSS for image size and transition effect */
.img-fluid {
    max-width: 100%; /* Ensure images do not overflow their container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
    border-radius: 8px; /* Add rounded corners to images */
}

.img-fluid:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

table td {
    text-align: center; /* Center align images and text */
    padding: 10px; /* Optional: Add padding for spacing */
}

.img-fluid {
    max-width: 100%; /* Ensure images do not overflow their container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
    border-radius: 8px; /* Add rounded corners to images */
}

.img-fluid:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

table td {
    text-align: center; 
    padding: 10px; 

td img {
    width: 200px;
    height: 200px; 
    object-fit: cover; 
}

h3 {
    font-family: 'Poppins', sans-serif; 
    font-size: 0.5em; 
    font-weight: 600; 
    margin-top: 20px; 
    margin-bottom: 10px; 
    text-align: center; 
}