.page {
  max-width: 600px !important; }
  .page a:hover {
    border: none !important; }

/* Flex container for the layout */
.profile-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  padding: 20px; }

/* Left column: Circular photo */
.photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ddd; }
  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

/* Right column: Name, Bio, and Social Icons */
.details {
  max-width: 600px; }
  .details h1 {
    font-size: 2rem;
    margin: 0;
    color: #333; }
  .details .bio {
    font-size: 1rem;
    color: #666;
    margin: 10px 0; }

/* Links! */
.links-banners {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px; }

/* Default link-banner (with image) */
.link-banner {
  display: flex;
  align-items: center;
  border-radius: 3px;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.2s ease, filter 0.2s ease, color 0.2s ease;
  /* Image inside link-banner */
  /* Title text */
  /* Hover effect for image banners */ }
  .link-banner img {
    width: auto;
    transition: filter 0.2s ease; }
  .link-banner .link-title {
    font-size: 1.1rem;
    font-weight: 400; }
  .link-banner :hover {
    filter: brightness(70%); }

.link-banner.icon {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 10px 15px;
  background-color: #242424;
  color: #58576d; }
  .link-banner.icon img {
    height: 70px;
    margin-right: 15px;
    border-radius: 8px; }
  .link-banner.icon .link-title {
    display: block;
    flex: 1;
    align-items: center;
    text-align: center; }
    .link-banner.icon .link-title:hover {
      color: #ffffff !important;
      filter: none !important; }
  .link-banner.icon:hover {
    color: #ffffff !important;
    filter: none !important;
    background-color: #6e6e6e !important; }

.collapsible-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* text left, chevron right */
  cursor: pointer; }
  .collapsible-btn .chevron i {
    transition: transform 0.3s ease; }

.collapsible-btn.active .chevron i {
  transform: rotate(180deg); }

.link-banner.no-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #242424;
  height: 80px;
  padding: 0 20px; }
  .link-banner.no-image .link-title {
    width: 100%;
    text-align: center;
    color: #58576d; }
    .link-banner.no-image .link-title:hover {
      color: #ffffff !important;
      /* hover text color */
      filter: none !important; }
  .link-banner.no-image:hover {
    filter: none !important;
    background-color: #6e6e6e; }

/* APPS SECTION */
.links-showcase {
  text-align: center;
  margin: 1rem 0; }
  .links-showcase + .links-showcase {
    margin-top: 7rem; }

.showcase-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem; }

.showcase-description {
  font-size: 1rem;
  margin-bottom: 1.5rem; }

.showcase-items {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start; }
  .showcase-items .showcase-item {
    flex: 0 1 200px;
    display: inline-block; }
    .showcase-items .showcase-item img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      transition: transform 0.2s ease;
      display: block; }

.showcase-images {
  margin-top: 2rem; }

.showcase-details {
  display: flex;
  flex-direction: column;
  align-items: center; }

.detail-image {
  max-width: 80%; }

/* Responsive tweak: stack vertically below 500px */
@media (max-width: 500px) {
  .showcase-items {
    flex-direction: column;
    align-items: center;
    gap: 1rem; }
  .showcase-item {
    flex: none !important;
    max-width: 70%; }
  .showcase-item img {
    width: 100%;
    height: auto; } }

.link-divider {
  margin: 1em auto !important; }

.logo {
  justify-content: center;
  max-width: 150px;
  margin: 5em auto; }

/* Responsive design: Stack columns on small screens */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    text-align: center; }
  .photo {
    margin-bottom: 20px; } }