:root {
    /* Default to engineering colors - using Bootstrap secondary */
    --tree-primary-color: rgba(235,7,141,1);
    --tree-primary-color-shadow: rgba(235,7,141,0.5);
    --tree-primary-color-light: rgba(235,7,141,.1);
    --tree-badge-color: #22203b; /* Engineering dark purple/navy */
}

/* Tree-specific color overrides */
:root[data-tree="digital"] {
    --tree-primary-color: rgba(21,102,175,1);
    --tree-primary-color-shadow: rgba(21,102,175,0.5);
    --tree-primary-color-light: rgba(21,102,175,.1);
    --tree-badge-color: #00aeef; /* Digital badge color */
}

:root[data-tree="engineering"] {
    --tree-primary-color: rgba(235,7,141,1);
    --tree-primary-color-shadow: rgba(235,7,141,0.5);
    --tree-primary-color-light: rgba(235,7,141,.1);
    --tree-badge-color: #22203b; /* Engineering dark purple/navy */
}

.break-spaces {
    white-space: break-spaces;
}

.badge {
    line-height: 0.9;
    color: inherit;
}

.btn-prime:hover, .btn-prime:focus {
    background-color: var(--tree-primary-color) !important;
    border-color: var(--tree-primary-color) !important;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--tree-primary-color);
    border-color: var(--tree-primary-color);
}

.writing-pink {
    color: rgba(235,7,141,1);
}

.card-footer {

    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-header{
    min-height:200px;
}
.btn-container {
    justify-content: flex-end;
    display: flex;
}

.navbar-expand-lg .navbar-brand {
    width: 18.5rem;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.timeline-card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.bg-engineering {
   
    background-color: rgba(235,7,141,1);
}

@media (min-width: 768px){
    .list-timeline-v li:not(:last-child):after {
        content: "";
        display: block;
        width: 1px;
        height: calc(100% - 2rem);
        border-left: 1px solid var(--tree-primary-color);
        position: absolute;
        top: 4rem;
    }
}

.bg-engineering-blue {
    background-color: rgba(21,102,175,1);
}

.text-engineering-blue {
    color: rgba(21,102,175,1);
}

.text-engineering-pink {
    color: rgba(235,7,141,1);
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) -(var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid rgba(126,154,206,1);
    border-radius: var(--bs-card-border-radius);
}

.here:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 75%;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--tree-primary-color);
    transform: translate(-50%);
}

svg :hover {
    fill: var(--tree-primary-color);
}



.emphasis {
    border-color: var(--tree-primary-color-shadow);
    border-width: thick;
    box-shadow: 0 30px 40px var(--tree-primary-color-light);
}

.emphasis2 {
    border-color: var(--tree-primary-color-shadow);
    border-width: thick;
    box-shadow: 0 30px 40px inset var(--tree-primary-color-light);
}


.icon-left {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns content to the left */
    text-align: left; /* Ensures text is aligned to the left */
    font-family: inherit;
}

.icon-left i {
    margin-right: 6px; /* Adjust the spacing as needed */
  }
    .icon-left .job-name {
        word-break: break-word; /* Ensures long words break correctly */
    }
.btn {
    text-transform: none;
    letter-spacing: -.011rem;
    font-weight: 500;
    --bs-btn-focus-box-shadow: 0 6px 30px -3px rgba(var(--bs-btn-focus-shadow-rgb), .325);
}

/* Tree-specific badge styling */
.tree-badge.btn-prime {
    background-color: var(--tree-badge-color) !important;
    border-color: var(--tree-badge-color) !important;
    color: white;
    border-width: 1px;
    border-style: solid;
}

.tree-badge.btn-prime:hover,
.tree-badge.btn-prime:focus {
    background-color: var(--tree-primary-color) !important;
    border-color: var(--tree-primary-color) !important;
    color: white;
}

.tree-badge.btn-prime:active {
    background-color: var(--tree-primary-color) !important;
    border-color: var(--tree-primary-color) !important;
    opacity: 0.9;
    color: white;
}

/* Tree-specific button styling */
.tree-button {
    background-color: var(--tree-badge-color) !important;
    border-color: var(--tree-badge-color) !important;
    color: white !important;
    border-width: 1px;
    border-style: solid;
}

.tree-button:hover,
.tree-button:focus {
    background-color: var(--tree-primary-color) !important;
    border-color: var(--tree-primary-color) !important;
    color: white !important;
}

.tree-button:active {
    background-color: var(--tree-primary-color) !important;
    border-color: var(--tree-primary-color) !important;
    opacity: 0.9;
    color: white !important;
}