/* Container for all cards */
.card-container {
  display: flex;
  justify-content: center; /* Centers the cards horizontally */
  gap: 20px; /* Adds space between the cards */
  padding: 20px;

/* Individual card styling */
.card {
  width: 250px; /* Adjust as needed */
  background-color: #e2e5e9e6;
  border-radius: 15px; /* Creates the rounded corners */
  overflow: hidden; /* Important to make the image corners rounded */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  text-align: center;
  border: 1px solid #ddd; /* Adds the border visible in the image */
}

/* Image styling */
.card img {
  width: 100%; /* Makes the image fill the width of the card */
  height: 250px; /* Adjust height to maintain aspect ratio */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  border-top-left-radius: 15px; /* Rounded corners for the image */
  border-top-right-radius: 15px;
}

/* Content styling (name and title) */
.card-content {
  padding: 15px;
}

.card-content h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.card-content p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.3;
}
}
/* ==========================================
   1. BASE / MOBILE STYLES (Default)
   Targets: All devices, specifically Small Smartphones
   ========================================== */
body {
    font-size: 16px;
    line-height: 1.6;
}

/* ==========================================
   2. SMALL DEVICES / LARGE PHONES
   Targets: Devices wider than 576px (Landscape phones)
   ========================================== */
@media screen and (min-width: 576px) {
    /* Your code for large phones here */
}

/* ==========================================
   3. TABLETS
   Targets: Devices wider than 768px (iPads, Tablets)
   ========================================== */
@media screen and (min-width: 768px) {
    /* Your code for tablets here */
}

/* ==========================================
   4. LAPTOPS & DESKTOPS
   Targets: Devices wider than 1024px (Laptops, Small Monitors)
   ========================================== */
@media screen and (min-width: 1024px) {
    /* Your code for computers here */
}

/* ==========================================
   5. LARGE SCREENS
   Targets: Devices wider than 1200px (Large Desktop Monitors)
   ========================================== */
@media screen and (min-width: 1200px) {
    /* Your code for extra wide screens here */
}