.card {
    /* Fixed height to ensure the card size doesn't change */
    height: 300px; 
  }
  @media (min-width: 576px) {
    .card {
      /* Minimum width to ensure the card doesn't get too small */
      min-width: 250px;
    }
  }
  .icon-title img {
    width: 50px; /* Set the icon size */
  }
  

.Selected-teams .card-title {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.75rem;

}

.Selected-teams .card-text {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    font-weight: 600;

}

.component-style {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-feature-settings: 'normal';
    font-variation-settings: 'normal';
    line-height: inherit;
    text-align: left;
    font-family: 'Fira Code', monospace;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    margin-left: 1rem;
    font-weight: 200;
    font-size: 10px; /* Start with the smallest size */
}

@media (min-width: 768px) { /* This corresponds to Bootstrap's 'md' breakpoint */
    .component-style {
        font-size: 14px; /* Larger size for md screens and up */
    }
}

/* Additional styles for the children elements within your component */
.component-style #leadDeets,
.component-style #collegeDeets {
    display: flex;
    gap: 0.5rem; /* 2px converted to rem */
    margin: 0.25rem 0; /* 'my-1' converted to rem */
}

.component-style #leadIcon,
.component-style #collegeIcon {
    padding-left: 0.125rem; /* 'pl-[2px]' converted to rem */
}

.component-style #leadName,
.component-style #collegeName {
    /* Add any specific styles for these elements if needed */
}

/* If you want to add the custom properties for gradients, shadows, etc., you can define them here */
:root {
    --bg-color: rgba(20, 20, 20, 0);
    --card-color: rgba(24, 27, 35, 1);
    --animation-duration: 0.6s;
    --animation-timing-function: ease-in-out;
    --border-color: rgb(3, 169, 244);
    --gradient-color-start: rgba(9, 175, 0, 0.3);
    --gradient-color-mid: rgba(29, 183, 21, 0.6);
    --gradient-color-end: rgb(0, 0, 0, 0);
}


.card {
    /* Added shadow for depth */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Smooth transition for hover effects */
    transition: transform 0.2s ease-in-out;
}

.card-title {
    color: #f71212;
    margin-bottom: 1rem;
}

.card-text {
    color: #e0e0e0; /* Lighter text color for less important text */
}

.card:hover {
    /* Slightly raise the card on hover for interaction feedback */
    transform: translateY(-5px);
}

.component-style #leadName,
.component-style #collegeName {
    color: #e2e7ee; /* Softer white for details inside the card */
}

.component-style {
    margin-left: 0; /* Adjusted for better alignment */
}

/* Icons8 icons credits */
.component-style img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(200%);
}

#leadIcon, #collegeIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f71212; /* A shade of purple */
    border-radius: 50%;
    padding: 0.25rem;
}

#leadDeets, #collegeDeets {
    gap: 0.5rem; /* Adjusted spacing between icon and text */
}