body {
    font-family: sans-serif;
    transition: all 0.2s; /* Smooth transitions for color changes */
    display: flex;
    flex-direction: column; /* Make sure the content is organized in a column */
}

body {
  --c: rgba(255,255,255,0.7); /* Light color for the pattern */
  --t: transparent;
  background-image:
    repeating-linear-gradient(45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0),
    repeating-linear-gradient(-45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0),
    linear-gradient(to bottom right, #6dd5ed, #2193b0); /* The vibrant background gradient */
}

header {
    color: #37b4d4;
    padding: 30px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    /* background: linear-gradient(180deg, #ffffff80, #6dd5ed5e); */
}

.container {
  max-width: 1200px;
  margin: auto;
  background: rgba(255, 255, 255, 0.60); /* Semi-transparent background for the content container */
  border-radius: 15px; /* Match the card style */
  overflow: hidden; /* Ensures no spillover */
  padding: 1rem; /* Add some padding */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.row {
	justify-content: center;
}

.featured .card {
}

.gpt-card {
    margin-top: 30px;
	height: 500px;
}

.card {
    border: none;
    transition: transform .2s;
	text-align: center;
	border: 1px solid #6dd5ed;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	height: inherit;
    background: linear-gradient(145deg, #ffffff80, #6dd5ed5e);
    border-radius: 15px; /* Rounded corners for modern look */
    overflow: hidden; /* Makes sure nothing spills out of the card border */
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover for a 'lifting' effect */

}

.card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-title {
    color: #007bff;
}

.card-img-top {
    width: 150px; /* Adjust size as needed */
    height: 150px; /* Adjust size as needed */
    background-color: #ffffff; /* Placeholder color if no image */
    border-radius: 50%; /* Makes the image round */
    margin: 20px auto; /* Centers the image */
    display: block;
    object-fit: cover; /* Ensures the image covers the area well */
	border: 5px #2193b0 solid;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */

}

.btn-primary {
    display: block;
    width: 80%; /* Adjust width as needed */
    margin: 20px auto; /* Centers the button */
    background-color: #2193b0; /* Default state */
    border-color: #2193b0; /* Make sure the border is the same */
    transition: background-color 0.3s ease; /* Smooth transition for background color */

}

.btn-primary:hover {
    background-color: #6dd5ed; /* Lighter shade on hover */
    border-color: #6dd5ed; /* Border color to match */
}

footer {
    margin-top: 40px;
    padding: 20px;
    background: #333;
    color: black;
    background: #c7dde79e;
    position: relative;
    bottom: 0;
    width: 100%;
}

footer a {
    color: #2193b0;
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth transition for color */

}

footer a:hover {
    text-decoration: underline;
    color: #6dd5ed; /* Lighter color on hover for interactivity */
}

/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
    .gpt-card {
        margin-top: 20px;
        height: auto; /* Adjust height on smaller screens for better flexibility */
    }

    .card-img-top {
        width: 120px;
        height: 120px;
    }

    .btn-primary {
        width: 90%; /* More width for easier clicking on smaller devices */
    }
}