/* Logo Styles for Experience and Certification Sections */

/* Remove old company-logo styling */
.timeline-item .company-logo {
  display: none; /* Hide the old logo style */
}

/* Common Logo Container Styles */
.logo-container {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #333; /* Reduced border thickness */
  flex-shrink: 0;
}

.certification .logo-container {
  height: 100%; /* Height matches full content height */
  width: 40px;
}

/* Logo Image Styles */
.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dark Theme Adjustments */
body.dark-theme .logo-container {
  border: 1px solid #fff; /* Reduced border thickness */
}

/* Flex Container for Logo and Title */
.title-with-logo {
  display: flex;
  align-items: center; /* Center align text with logo */
  margin-bottom: 5px;
}

/* Work experience specific alignments */
.timeline-item .title-with-logo h3 {
  display: flex;
  align-items: center; /* Center text vertically with logo */
  margin: 0;
}

/* Certification specific layout adjustments */
.certification {
  display: flex;
  align-items: center; /* Center align by default for desktop */
  margin-bottom: 15px;
}

/* .certification-text {
  margin-left: 15px;
} */

.certification-text h3 {
  margin-top: 0;
}

/* Make sure the text doesn't wrap around the logo */
.title-with-logo h3 {
  flex: 1;
}

/* Certification text container for vertical stacking */
.certification-text {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically for desktop */
  flex: 1;
}

/* Make the logo container height match the certification text content */
.certification .logo-container {
  align-items: center;
  /* Desktop: vertically centered */
}

/* Ensure paragraph in certification has no bottom margin */
.certification-text p {
  margin-bottom: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .logo-container {
    width: 36px;
    height: 36px;
    margin-right: 12px;
  }
  
  .certification .logo-container {
    width: 36px;
    height: auto;
    min-height: 36px;
    align-self: flex-start; /* Align to top in mobile view */
    margin-top: 4px; /* Small top margin to align with h3 text */
  }
  
  /* Make certification a vertical flex container in mobile view */
  .certification {
    align-items: flex-start; /* Align items at the top */
  }
  
  /* Adjust text spacing in mobile */
  .certification-text {
    justify-content: flex-start; /* Align content at the top */
  }
  
  .certification-text h3 {
    margin-top: 0;
  }
}