/* Base Styles */
:root {
  --primary-color: #1a2a6c;
  --secondary-color: #2a4858;
  --accent-color: #4e9af1;
  --text-color: #333;
  --light-text: #fff;
  --bg-color: #f8f9fa;
  --border-color: #e1e4e8;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  text-decoration: none;
  color: var(--primary-color);
  transition: var(--transition);
}

a:hover {
  color: var(--accent-color);
}

img {
  max-width: 100%;
}

section {
  padding: 80px 0;
}

.section-title {
  font-size: 32px;
  margin-bottom: 40px;
  position: relative;
  text-align: center;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 3px;
  background-color: var(--accent-color);
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: var(--transition);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-left: 25px;
}

.nav-links a {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  position: relative;
}

.nav-links a:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: var(--transition);
}

.nav-links a:hover:after, 
.nav-links a.active:after {
  width: 100%;
}

.nav-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Header Animation Styles */
.css-lab-header {
  width: 100%;
  height: 50vh; /* Reduced from 100vh to 80vh to make it shorter */
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a2a6c, #2a4858);
  font-family: 'Roboto', sans-serif;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 0;
}
  
.lab-title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
  
.title-first-line {
  margin-bottom: 5px;
}
  
.lab-subtitle {
  font-size: 18px;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
  
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
  
.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}
  
.connection {
  position: absolute;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  transform-origin: left center;
  pointer-events: none;
}
  
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
}
  
.scroll-indicator:hover {
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateX(-50%) scale(1.05);
}
  
.scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  animation: scrollAnim 2s infinite;
}
  
@keyframes scrollAnim {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
  
.data-tag {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-family: monospace;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  opacity: 0;
  animation: fadeInOut 7s infinite;
  animation-delay: var(--delay);
}
  
@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 0.7; }
  30% { opacity: 0.7; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* Quote Section */
.quote-section {
  background-color: #f2f6fc;
  padding: 60px 0;
}

.quote-section blockquote {
  max-width: 800px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.6;
  font-style: italic;
  text-align: center;
  color: #444;
}

.quote-section cite {
  display: block;
  margin-top: 20px;
  font-weight: 500;
  color: #777;
}

/* About Section */
/* --- Updated About Section Styles for Text Wrapping --- */

.about-content {
  /* Remove previous flexbox properties if they existed */
  /* display: flex; flex-wrap: wrap; gap: 40px; */
  
  /* Add clearfix to contain the floated element */
  /* This prevents the container from collapsing */
  overflow: auto; 
}

/* In your main styles for .about-image */
.about-image {
  float: left;
  width: 45%;                /* Increased from 35% - this makes it wider relative to the content area */
  max-width: 350px;          /* Increased from 300px - this is the new absolute maximum width (300 * 1.5 = 450) */
  margin-right: 30px;        /* Slightly increased for better spacing with the larger image */
  margin-bottom: 15px;       /* Slightly increased for better spacing below */
}

.about-image img {
  display: block;            /* Good practice for images */
  width: 100%;             /* Make image fill the floated container */
  height: auto;              /* Maintain aspect ratio */
}

/* Ensure paragraph styling within about-text is preserved */
.about-text p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.7; /* Slightly increased line-height can improve readability with floats */
}

/* --- Responsive Adjustments for Float --- */
@media (max-width: 768px) {
  .about-image {
    float: none;             /* Disable float on smaller screens */
    width: 80%;              /* Adjust width for a centered block layout */
    max-width: 400px;        /* Optional max width */
    margin: 0 auto 30px auto; /* Center the image block, add margin below */
  }
  
  /* Text will automatically flow below the image now */
}

/* --- Remove conflicting old responsive rule --- */
/* Make sure you REMOVE or COMMENT OUT the old rule in your */
/* @media (max-width: 768px) block that set: */
/* .about-content { flex-direction: column; } */
/* as we are no longer using flexbox here. */

/* --- End of Updated About Section Styles --- */

/* Research Focus */
.research-focus {
  background-color: #f2f6fc;
}

.research-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly increased minmax */
  gap: 30px;
  align-items: stretch; /* Ensures cards in a row stretch to the same height if content varies */
}

.research-area {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  text-align: center;
  display: flex; /* Use flexbox for internal alignment */
  flex-direction: column; /* Stack icon, title, text vertically */
  justify-content: flex-start; /* Align content to the top */
  min-height: 380px; /* Example: Adjust as needed to fit your content well */
}

.research-area:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.research-area i {
  font-size: 40px;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.research-area h3 {
  margin-bottom: 15px;
  font-size: 20px;
  min-height: 48px; /* Example: ~2 lines of title text, adjust as needed */
}

.research-area p {
  font-size: 15px; /* Slightly smaller font for brief descriptions if needed */
  line-height: 1.6;
  color: #555; /* Slightly muted text color for description */
  flex-grow: 1; /* Allow paragraph to take up available space, useful if titles vary in lines */
  margin-bottom: 20px; /* Space before a potential 'Read More' if added later */

  /* Optional: Text Truncation (ellipsis) for X lines */
  /*
  display: -webkit-box;
  -webkit-line-clamp: 5; // Adjust number of lines
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 120px; // Approx 5 lines * 24px line-height, adjust based on line-clamp and font-size/line-height
  */
}

/* News Section */
.news-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.news-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.news-date {
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: 10px;
}

.news-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 500;
  color: var(--accent-color);
}

.read-more:hover {
  text-decoration: underline;
}

/* Contact Section */
.contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

.contact-info, .contact-form {
  flex: 1;
  min-width: 300px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
}

.contact-item i {
  font-size: 20px;
  color: var(--accent-color);
  margin-right: 15px;
  margin-top: 3px;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.social-links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  transition: var(--transition);
}

.social-links a:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
}

.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 16px;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent-color);
  outline: none;
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.submit-btn {
  display: inline-block;
  padding: 12px 25px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.submit-btn:hover {
  background-color: var(--accent-color);
}

/* Footer */
.footer {
  background-color: #1a2a6c;
  color: white;
  padding: 60px 0 20px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.footer-links h4 {
  font-size: 18px;
  margin-bottom: 20px;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #ddd;
  transition: var(--transition);
}

.footer-links a:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive Styles */
@media (max-width: 768px) {
  section {
    padding: 60px 0;
  }
  
  .navbar .container {
    padding: 10px 20px;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .nav-links.active {
    max-height: 400px;
  }
  
  .nav-links li {
    margin: 15px 0;
  }
  
  .lab-title {
    font-size: 30px;
  }
  
  .lab-subtitle {
    font-size: 16px;
    max-width: 90%;
  }
  
  .about-content,
  .contact-content {
    flex-direction: column;
  }
  
  .research-areas {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 26px;
  }
  
  .lab-title {
    font-size: 24px;
  }
  
  .lab-subtitle {
    font-size: 14px;
  }
  
  .scroll-indicator {
    height: 40px;
    width: 24px;
  }
  
  .quote-section blockquote {
    font-size: 16px;
  }
  
  .research-area {
    padding: 20px;
  }
}

/* For larger screens, display title on one line */
@media (min-width: 481px) {
  .lab-title {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .title-word {
    margin: 0 5px;
  }
}
/* Add this to your styles.css file */

/* Styling for publication titles with links */
.publication-title a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.publication-title a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Update styles to match the new simplified structure */
.publication-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease;
}

.publication-item:hover {
  background-color: rgba(78, 154, 241, 0.05);
  border-radius: 8px;
}

/* Add this to your css/styles.css or the <style> block in members.html */

.member-bio {
  /* Existing styles may include: */
  /* margin-bottom: 15px; */
  /* font-size: 14px; */
  /* line-height: 1.6; */
  /* flex-grow: 1; */ /* This is important to keep if you want it to fill space up to max-height */

  /* --- New styles to manage height --- */
  max-height: 250px; /* Adjust this value as needed. This is the maximum height before scrolling starts. */
  overflow-y: auto;  /* Adds a vertical scrollbar ONLY if content exceeds max-height */
  padding-right: 10px; /* Adds a little space so the scrollbar doesn't overlap text */
  /* --- End of new styles --- */
}

/* Optional: Styling for the scrollbar (for WebKit browsers like Chrome, Safari, Edge) */
.member-bio::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.member-bio::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the tracking area */
  border-radius: 10px;
}

.member-bio::-webkit-scrollbar-thumb {
  background: #ccc; /* Color of the scroll thumb */
  border-radius: 10px;
}

.member-bio::-webkit-scrollbar-thumb:hover {
  background: #aaa; /* Color of the scroll thumb on hover */
}

.research-hook-image-container {
  text-align: center;
  margin-top: 30px; /* Adjust as needed */
  margin-bottom: 50px; /* Adjust as needed */
}

.research-hook-image {
  max-width: 600px; /* Or your preferred max width */
  width: 100%; /* Makes it responsive within the max-width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* =========================== */
/* Lightbox Styles             */
/* =========================== */
.lightbox-overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width and height */
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85); /* Black background with opacity */
  z-index: 2000; /* Make sure it's on top */
  /* cursor: pointer; /* We'll handle closing via specific elements */
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* Allow scrolling if image is very tall on small screens */
}

.lightbox-content {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: 2% auto; /* Adjust vertical margin */
  border-radius: 5px;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  /* cursor: default; /* Reset cursor for the image itself */
}

.lightbox-close {
  position: absolute;
  top: 15px;
  right: 30px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 2001; /* Above the image */
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
}

/* Make project images indicate they are clickable */
/* This style is already in your research.html <style> block, which is good */
/* You might want to move it to styles.css for consistency */

.project-image img {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.project-image img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
/* === research.html Specific Project Card Styles === */

/* Styles are already in your research.html <style> block.
   I'll suggest modifications. You can update them there or move them to styles.css
   and delete them from the <style> block for better organization.
*/

.project-content {
  display: flex;
  flex-wrap: wrap; /* Good for responsiveness */
  gap: 30px;
  /* align-items: center; /* Original value */
  align-items: flex-start; /* Aligns top of text with top of image container */
}

.project-text {
  flex: 2;
  min-width: 300px;
  /* Add some bottom padding if image container is very short, to balance visually */
  padding-bottom: 20px;
}

.project-image {
  flex: 1;
  min-width: 250px;
  text-align: center; /* Centers the img if its display is inline-block or inline */
  
  /* === ADD/ADJUST THESE FOR FIXED HEIGHT IMAGE CONTAINER === */
  height: 300px; /* Or your desired fixed height for the thumbnail preview area */
  /* max-height: 350px; /* Could also use max-height if you prefer some flexibility */
  overflow: hidden; /* Important to hide parts of image that don't fit due to object-fit */
  border-radius: 4px; /* Optional: if you want the container to have rounded corners */
  /* background-color: #f0f0f0; */ /* Optional: placeholder color if image fails to load */
  display: flex; /* To help center the image if it's smaller after object-fit:contain */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is key: scales image to maintain aspect ratio while filling the element's entire content box.
                        If the image's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. */
  /* object-position: top center; */ /* Optional: to show the top part of the image if 'cover' crops it. Default is '50% 50%' (center) */
  
  /* These existing styles for lightbox trigger are good */
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* Remove display: block and margin: 0 auto; as flex centering on parent is better */
}

.project-image img:hover {
  /* Keep hover effect if desired, or adjust for the new 'cover' style */
  transform: scale(1.05); /* This might look a bit odd with object-fit: cover if parts are already hidden */
  /* opacity: 0.85; /* Alternative hover effect */
}

/* Ensure global img style doesn't conflict too much, but project-image img will override */
/* img {
  max-width: 100%;
  height: auto; /* This 'height: auto' on global img might be overridden by 'height: 100%' above, which is intended for this specific case * /
} */

/* styles.css - in @media (max-width: 768px) */
.nav-toggle {
  display: block;
  font-size: 24px; /* Ensure it's large enough */
  cursor: pointer;
  /* Add some padding if it's too small to tap easily */
  /* padding: 10px; */
  /* Ensure it's not hidden by another element */
  /* z-index: 1001; /* If navbar is 1000, this button should be on top or accessible */
}
/* --- Resources Page Styles --- */

.resources-section {
  padding: 60px 15px;
  background-color: #f4f6f9; /* A slightly cooler, tech-like background */
}

.resources-section .section-title {
  text-align: center;
  margin-bottom: 50px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  color: #1a253c; /* A darker, more serious blue */
  position: relative;
  padding-bottom: 15px;
}

.resources-section .section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background-image: linear-gradient(to right, #007bff, #00c6ff); /* Gradient effect */
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.resource-card {
  font-family: 'Roboto', sans-serif; /* Ensuring font consistency */
  background-color: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 30, 80, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Important for child element styling */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 91, 255, 0.1);
  border-color: #007bff;
}

.resource-card .card-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fcfdff;
  border-bottom: 1px solid #e0e7ff;
}

.resource-card .resource-icon {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  object-fit: contain;
}

.resource-card h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  color: #1a253c;
}

.resource-card .card-body {
  padding: 20px;
  flex-grow: 1;
}

.resource-card .details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-card .details-list li {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 12px;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.resource-card .details-list li::before {
  content: '▶'; /* Data-like arrow */
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff;
  font-size: 0.7rem;
}

.resource-card .details-list li strong {
  color: #333;
  font-weight: 500;
}

.resource-card .card-footer {
  padding: 20px;
  margin-top: auto; /* Pushes footer to the bottom */
  background-color: #fcfdff;
  border-top: 1px solid #e0e7ff;
  text-align: right;
}

.resource-card .btn-details {
  display: inline-block;
  background-image: linear-gradient(to right, #007bff, #0056b3);
  color: #fff;
  padding: 10px 25px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.resource-card .btn-details:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 91, 255, 0.3);
}

/* --- Blog Page Styles --- */
.blog-section {
  padding: 60px 15px;
  background-color: #f4f6f9;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 30, 80, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 91, 255, 0.12);
}

.blog-card .card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card .card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-card .card-content {
  padding: 25px;
  flex-grow: 1;
}

.blog-card .card-date {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 10px;
}

.blog-card .card-title {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #1a253c;
  line-height: 1.4;
}

.blog-card .card-description {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}

.blog-card .card-footer {
  padding: 20px 25px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-card .tag {
  background-color: #e0e7ff;
  color: #007bff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.blog-card .read-more-btn {
  color: #007bff;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.blog-card .read-more-btn:hover {
  color: #0056b3;
}

.blog-card .read-more-btn i {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.blog-card:hover .read-more-btn i {
  transform: translateX(4px);
}