/*********************************************
  1) DEFINE COLOR PALETTE (CSS VARIABLES)
*********************************************/
:root {
  /** Base colors */
  --clr-dark-a0: #000000;
  --clr-light-a0: #ffffff;

  /** Dark Reddish primary colors */
  --clr-primary-a40: #b52424; /* Bright Red */
  --clr-primary-a50: #8d0303; /* Darker Red */

  /** Dark theme surface colors */
  --clr-surface-a0: #121212;
  --clr-surface-a10: #282828;
  --clr-surface-a20: #3f3f3f;
  --clr-surface-a30: #575757;
  --clr-surface-a40: #717171;
  --clr-surface-a50: #8b8b8b;

  /** Dark theme tonal surface colors */
  --clr-surface-tonal-a0: #252525;
  --clr-surface-tonal-a10: #393939;
  --clr-surface-tonal-a20: #4f4f4f;
  --clr-surface-tonal-a30: #666666;
  --clr-surface-tonal-a40: #7d7d7d;
  --clr-surface-tonal-a50: #969696;

  /** Chatbot specific colors */
  --clr-chat-background: #1e1e1e;
  --clr-chat-input: #2c2c2c;
  --clr-user-message: #a51f1f; /* Bright Red for User */
  --clr-bot-message: #3a3a3a;
  --clr-spinner: #ff4d4d; /* Bright Red Spinner */
}

/*********************************************
2) GLOBAL RESET & BASE STYLES
*********************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
}

/* Use Inter if loaded; otherwise fallback to sans-serif */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--clr-surface-a0);
  color: var(--clr-light-a0);
  line-height: 1.6;
}

/*********************************************
3) NAVBAR
*********************************************/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--clr-surface-a0);
  padding: 1em 2em;
  z-index: 999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.nav-logo {
  color: var(--clr-primary-a40);
  font-size: 1.5rem;
  font-weight: 600;
}

.nav-links {
  list-style-type: none;
  display: flex;
  gap: 1.5em;
}

.nav-links li a {
  color: var(--clr-light-a0);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.nav-links li a:hover {
  color: var(--clr-primary-a40);
}

/* Hamburger Menu (Hidden by Default) */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  background: None;
  color: var(--clr-primary-a40);
  border: none; /* Removes any default browser borders */
  outline: none; /* Removes focus outline */
  box-shadow: none;
}

/* Responsive Navbar */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: var(--clr-surface-a0);
    padding: 1em;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    text-align: center;
    padding: 10px 0;
  }
}

/*********************************************
4) HERO SECTION
*********************************************/
.hero-section {
  position: relative; /* needed for absolutely positioned children */
  overflow: hidden;   /* ensures particles don't spill outside the hero */
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Overlay + background image */
  background:
    linear-gradient(
      rgba(18, 18, 18, 0.6),
      rgba(18, 18, 18, 0.6)
    ),
    url('https://via.placeholder.com/1500x800.png?text=Machine+Learning+Hero+Image')
      center/cover no-repeat;
  color: var(--clr-primary-a10);
}

/* The tsParticles container behind hero content */
#ml-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* behind hero-content */
}

/* Ensure hero-content is above the particle animation */
.hero-content {
  position: relative;
  z-index: 1; /* sits above #ml-particles */
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5em;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 1.5em;
}

/* Button style */
.btn {
  padding: 0.8em 1.5em;
  background-color: var(--clr-primary-a40);
  color: var(--clr-light-a0);
  text-decoration: none;
  border-radius: 5px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: var(--clr-primary-a50);
}

/*********************************************
5) ABOUT SECTION
*********************************************/
.about-section {
  background-color: var(--clr-surface-a10);
  padding: 4em 2em;
  text-align: center;
  color: var(--clr-light-a0);
}

.about-section h2 {
  margin-bottom: 1.5em;
  font-size: 2rem;
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em; /* Space between text and image */
  max-width: 1200px;
  margin: 0 auto; /* Center the content */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.about-text {
  flex: 1;
  min-width: 280px; /* Ensure minimum width for text */
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: left; /* Align text to the left */
}

/* About Image Styling */
.about-image {
  flex: 1;
  min-width: 280px; /* Ensure minimum width for image */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image img {
  width: 100%;
  max-width: 400px; /* Adjust as needed */
  height: auto;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.about-image img:hover {
  transform: scale(1.05);
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    text-align: center;
  }
}

/*********************************************
6) SKILLS SECTION
*********************************************/
.skills-section {
  background-color: var(--clr-surface-a20);
  padding: 4em 2em;
  text-align: center;
  color: var(--clr-light-a0);
}

.skills-section h2 {
  margin-bottom: 1em;
  font-size: 2rem;
}

/* Updated grid container */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
  max-width: 1000px;
  margin: 0 auto;
  justify-items: center; /* Centers items within each grid cell */
}

.skill {
  /* Initially hidden & slightly moved down */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When in view, fade + slide up */
.skill.show {
  opacity: 1;
  transform: translateY(0);
}

.skill h3 {
  margin-bottom: 0.1em;
  font-size: 1.3rem;
}

/* Container for skill buttons (replaces old UL) */
.skill-buttons {
  display: flex;
  flex-wrap: wrap; /* wrap on smaller screens */
  gap: 0.5em;
  justify-content: center;
  margin-top: 0.5em;
}

/* Each skill "button" (pills) */
.skill-btn {
  background-color: var(--clr-surface-a0);
  color: var(--clr-light-a0);
  border: none;
  border-radius: 4px;
  padding: 0.5em 1em;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em; /* space between icon and text */
  transition: background-color 0.2s, transform 0.2s;

  /* Slight shadow for effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Hover effect for skill buttons */
.skill-btn:hover {
  background-color: var(--clr-surface-a10);
  transform: translateY(-2px);
}

/* Icon sizing if needed */
.skill-btn i {
  font-size: 1.2rem;
}


/*********************************************
7) TIMELINE (TREE) SECTION
*********************************************/
.tree-section {
  position: relative;
  overflow: hidden;
  background-color: var(--clr-surface-a0);
  text-align: center;
  color: var(--clr-light-a0);
  padding: 4em 2em;
}

/* Particle Container */
#timeline-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Ensure timeline content is above particles */
.tree-container,
.tree-section h2 {
  position: relative;
  z-index: 1;
}

.tree-section h2 {
  margin-bottom: 1em;
  font-size: 2rem;
}

.tree-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
  padding: 2rem 0;
}

.tree-container .tree {
  position: relative;
}

/* Timeline vertical line */
.tree-container .tree::after {
  content: "";
  position: absolute;
  width: 2px;
  background-color: var(--clr-surface-a50);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

/* Branches Styling */
.tree .branch {
  position: relative;
  width: 50%;
  padding: 1.5rem 2rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.tree .branch.show {
  opacity: 1;
  transform: translateY(0);
}

/* Content Box */
.tree .branch .content {
  background-color: var(--clr-surface-tonal-a10);
  padding: 1.5em;
  border-radius: 8px;
  position: relative;
  color: var(--clr-light-a0);
}

.tree .branch .content h3 {
  margin-bottom: 0.5em;
  font-size: 1.2rem;
}

.tree .branch .content span {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 1em;
  color: var(--clr-primary-a20);
}

/* Left & Right Branch Alignment */
.branch.left {
  left: 0;
  text-align: right;
}

.branch.right {
  left: 50%;
  text-align: left;
}

/* Connector Lines */
.branch.left::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: var(--clr-surface-a50);
  top: 20px;
  right: -25px;
}

.branch.right::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: var(--clr-surface-a50);
  top: 20px;
  left: -25px;
}

/* Responsive Timeline for Mobile */
@media screen and (max-width: 768px) {
  .tree-container .tree::after {
    left: 10px;
  }

  .tree .branch {
    width: 100%;
    padding-left: 2.5rem;
    margin-bottom: 2rem;
  }

  .tree .branch.left,
  .tree .branch.right {
    left: 0;
    text-align: left;
  }

  .branch.left::before,
  .branch.right::before {
    left: 0;
    right: auto;
  }

  .branch.left::before {
    top: 20px;
  }

  .branch.right::before {
    top: 20px;
  }
}

/* ============================
   PROJECTS SECTION STYLING
=============================== */

.projects-section {
  background-color: var(--clr-surface-a10);
  padding: 4em 2em;
  text-align: center;
  color: var(--clr-light-a0);
}

.projects-section h2 {
  margin-bottom: 1em;
  font-size: 2rem;
}

/* Grid layout for projects */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
}

/* Alternating project cards */
.project-card {
  display: flex;
  align-items: center;
  gap: 2em;
  background-color: var(--clr-surface-a20);
  border-radius: 10px;
  overflow: hidden;
  padding: 1.5em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  color: var(--clr-light-a0);

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fade-in effect */
.project-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Image section (for single images) */
.project-image {
  flex: 1;
  max-width: 50%;
}

.project-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Project text content */
.project-info {
  flex: 1;
  text-align: left;
}

.project-info h3 {
  margin-bottom: 0.5em;
  font-size: 1.3rem;
}

.project-info p {
  margin-bottom: 1em;
}

.project-link {
  text-decoration: none;
  color: var(--clr-primary-a40);
  font-weight: 500;
}

.project-link:hover {
  text-decoration: underline;
}

/* Alternating left/right layout */
.project-card:nth-child(even) {
  flex-direction: row-reverse;
}

/* ============================
   PROJECT IMAGE CAROUSEL
=============================== */

.project-carousel {
  flex: 1;
  max-width: 50%;
  position: relative;
  overflow: hidden;
}

.carousel-container {
  width: 100%;
  height: 400px; /* Set a fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Make sure the images don't overflow */
.carousel-slide {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* Style for the audio player */
.carousel-audio {
  width: 100%;
  text-align: center;
  padding: 10px;
}

/* Ensure the audio player doesn't stretch too much */
.carousel-audio audio {
  width: 80%; /* Adjust width */
  max-width: 300px;
}

.carousel-slide img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* Navigation arrows */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  padding: 0.5em;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 10;
  transition: background 0.3s, transform 0.2s;
}

.carousel-button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* Dots below the carousel */
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-dot.active {
  background: var(--clr-primary-a40);
}

/* Responsive layout for mobile */
@media screen and (max-width: 768px) {
  .project-card {
    flex-direction: column;
    text-align: center;
  }

  .carousel-container {
    height: 250px; /* Adjusts height for smaller screens */
  }

  .carousel-slide img {
    max-height: 100%;
  }

  .project-card:nth-child(even) {
    flex-direction: column;
  }

  .project-image,
  .project-carousel,
  .project-info {
    max-width: 100%;
  }

  .carousel-button {
    font-size: 1.2rem;
    padding: 0.3em;
  }
}


/*********************************************
9) CONTACT SECTION
*********************************************/
.contact-section {
  background-color: var(--clr-surface-a0);
  padding: 4em 2em;
  text-align: center;
  color: var(--clr-light-a0);
}

.contact-section h2 {
  margin-bottom: 1em;
  font-size: 2rem;
}

.contact-links {
  display: flex;
  justify-content: center;
  color: var(--clr-primary-a40);
  gap: 2em;
  margin-top: 1em;
}


.contact-links a {
  text-decoration: none;
  color: var(--clr-primary-a30);
  font-weight: 500;
  transition: color 0.3s;
}

.contact-links a:hover {
  color: var(--clr-primary-a50);
}

/*********************************************
10) FOOTER
*********************************************/
.footer {
  background-color: var(--clr-surface-a0);
  color: var(--clr-light-a0);
  text-align: center;
  padding: 1em 2em;
  font-size: 0.9rem;
}

/*********************************************
11) CHAT SECTION STYLES
*********************************************/

/* Chat Icon Button */
.chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--clr-primary-a40);
  color: var(--clr-light-a0);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, transform 0.3s;
  z-index: 1000;
  animation: pulse 2s infinite;
}

.chat-icon.animate {
  animation: pulse 2s;
}

.chat-icon:hover {
  background-color: var(--clr-primary-a50);
  transform: scale(1.1);
}

.chat-icon i {
  font-size: 1.5rem;
}

/* Chatbot Modal */
.chat-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1001; /* Above the chat icon */
  right: 20px; /* Position from the right */
  bottom: 90px; /* Position from the bottom */
  width: 350px; /* Increased width for better appearance */
  max-width: 90%; /* Ensure responsiveness on smaller screens */
  background-color: var(--clr-chat-background);
  border: 1px solid var(--clr-surface-a50);
  border-radius: 15px; /* Rounded corners for a modern look */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* Clip any overflow */
  display: flex;
  flex-direction: column;
  height: 500px; /* Increased height for better usability */
}

.chat-icon.no-pulse {
  animation: none !important;
}

/* Modal Header */
.chat-modal-header {
  background-color: var(--clr-primary-a0);
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--clr-light-a0);
}

.chat-close {
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--clr-light-a0);
}

.chat-close:hover {
  color: var(--clr-primary-a50);
}

/* Chatbox */
.chat-box {
  flex: 1; /* Allows the chat-box to expand and fill available space */
  padding: 0.5em;
  overflow-y: auto; /* Enables vertical scrolling */
  background-color: var(--clr-chat-background);

  /* Scrollbar Styling for Webkit Browsers */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: var(--clr-primary-a40) var(--clr-surface-a10); /* For Firefox */
}

.chat-box::-webkit-scrollbar {
  width: 8px; /* Increased width for better visibility */
}

.chat-box::-webkit-scrollbar-track {
  background: var(--clr-surface-a10);
  border-radius: 4px;
}

.chat-box::-webkit-scrollbar-thumb {
  background-color: var(--clr-primary-a40);
  border-radius: 4px;
  border: 2px solid var(--clr-surface-a10); /* Adds space around thumb */
}

/* Messages */
.message {
  width: 100%; /* Make messages take full width */
  margin-bottom: 0.5em;
  padding: 0.8em 1.2em;
  border-radius: 20px;
  position: relative;
  word-wrap: break-word;
  display: flex;
  align-items: center;
}

/* User Messages - Aligned Right with Left Padding */
.message.user {
  background-color: var(--clr-user-message);
  color: var(--clr-light-a0);
  align-self: flex-end;
  justify-content: flex-end;
  padding-left: 20px; /* Padding on the left */
  padding-right: 10px; /* Slight padding on the right for spacing */
}

/* Bot Messages - Aligned Left with Right Padding */
.message.bot {
  background-color: var(--clr-bot-message);
  color: var(--clr-light-a0);
  align-self: flex-start;
  justify-content: flex-start;
  padding-left: 10px; /* Slight padding on the left for spacing */
  padding-right: 20px; /* Padding on the right */
}


/* Spinner Styles */
.spinner {
  border: 4px solid var(--clr-surface-a20);
  border-top: 4px solid var(--clr-spinner);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Chat Controls */
.chat-controls {
  padding: 0.5em;
  display: flex;
  gap: 0.5em;
  border-top: 1px solid var(--clr-surface-a40);
  background-color: var(--clr-chat-input);
}

/* Chat Input */
#chat-input {
  flex: 1;
  padding: 0.8em;
  border-radius: 20px;
  border: none;
  font-size: 0.95rem;
  background-color: var(--clr-surface-a10);
  color: var(--clr-light-a0);
}

#chat-input:focus {
  outline: none;
  box-shadow: 0 0 5px var(--clr-primary-a40);
}

/* Send Button */
#chat-send {
  padding: 0.8em 1.2em;
  background-color: var(--clr-primary-a40);
  color: var(--clr-light-a0);
  border: none;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

#chat-send:hover {
  background-color: var(--clr-primary-a50);
}

/* Scrollbar Styling for Chatbox - Ensured no duplicates */
.chat-box::-webkit-scrollbar {
  width: 8px; /* Increased width for better visibility */
}

.chat-box::-webkit-scrollbar-track {
  background: var(--clr-surface-a10);
  border-radius: 4px;
}

.chat-box::-webkit-scrollbar-thumb {
  background-color: var(--clr-primary-a40);
  border-radius: 4px;
  border: 2px solid var(--clr-surface-a10); /* Adds space around thumb */
}

/* Scrollbar Styling for Firefox */
.chat-box {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: var(--clr-primary-a40) var(--clr-surface-a10);
}

/* Responsive Adjustments */
@media screen and (max-width: 480px) {
  .chat-modal {
    width: 90%;
    right: 5%;
    bottom: 80px;
    height: 450px;
  }
  
  .chat-modal-header h3 {
    font-size: 1rem;
  }
  
  #chat-send {
    padding: 0.6em 1em;
    font-size: 0.9rem;
  }
  
  #chat-input {
    font-size: 0.9rem;
  }

  .message {
    width: 100%; /* Ensure messages still take full width */
  }
}

/*********************************************
  12) CERTIFICATIONS SECTION
*********************************************/

/* Certifications Section Styling */
.certifications-section {
  background-color: var(--clr-surface-a20);
  padding: 4em 2em;
  text-align: center;
  color: var(--clr-light-a0);
}

/* Section Title */
.certifications-section h2 {
  margin-bottom: 1.5em;
  font-size: 2rem;
}

/* Certifications Grid Layout */
.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual Certification Card */
.certification-card {
  background-color: var(--clr-surface-a10);
  border-radius: 10px;
  padding: 1.5em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1em;
  
  /* Fade-in default state */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease, transform 0.3s ease;
  
  /* Ensure smooth transform transitions */
  will-change: transform, box-shadow;
}

.certification-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Certification Card Hover Effects */
.certification-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Certification Logo/Image */
.certification-card img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 5px;
}

/* Certification Info */
.certification-info {
  text-align: left;
}

.certification-info h3 {
  margin-bottom: 0.5em;
  font-size: 1.1rem;
}

.certification-info p {
  margin-bottom: 0.3em;
  font-size: 0.95rem;
  color: var(--clr-primary-a20);
}

.certification-info span {
  font-size: 0.85rem;
  color: var(--clr-surface-tonal-a50);
}

/* Certification Link Styling */
.certification-info a.certification-link {
  display: inline-block;
  margin-top: 0.5em;
  color: var(--clr-primary-a40);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s, text-decoration 0.2s;
}

.certification-info a.certification-link:hover {
  color: var(--clr-primary-a50);
  text-decoration: underline;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  .certification-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .certification-info {
    text-align: center;
  }
}

/* Pulse Animation for Chat Icon */

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
  }
}