body {
    font-family: 'Nunito', sans-serif;
    /* BACKGROUND CHANGE 
    background-image: 
        radial-gradient(100% 50% at 100% 100%, #ffffff,5% ,transparent);*/
    background-color:#c7edcc; 
    /* GENERAL TEXT COLOR CHANGE */
    color: #06330c;
    font-weight: 100;
}

hr {
    width: 100%;
    background-color: #06330c; /* Changed from #ccc to general text color */
    align-self: center;
}

a,
a:visited {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}
a:hover {
    /* Interaction Color */
    color: #DF52FF
}

a.call-to-action {
  border-radius: 10px;
  background-color: #0B8043;
  padding-inline: 5px;
  color: white
}

.name {
    margin: min(2vw,20px) auto min(5vw,100px) min(2vw,20px);
    font-size: max(4vw,40px);
    color: #06330c;
    font-weight:bold;
}

.highlight {
    font-weight: bold;
}

.thesis {
    max-width: 80vw;
    margin: 3vh auto 3vh auto;
}

.thesis .vision {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .valueprop {
        display: flex;
        gap: 3vw;
        font-size: max(3vw,20px);
    }
    .current {
        color: #5f9867;
        font-size: max(2vw,14px);
        text-align:right;
        justify-content: end;
    }
}

.comments {
    color: #5f9867;
    font-size: max(2vw,20px);
    margin: 5vh 0 5vh 0;
}

.contact {
    max-width: 80vw;
    font-size: 3vw;
    margin: 3vh auto 0 auto;
    color: #5f9867;
    font-size: max(2vw,20px);
}

.past {
    max-width: max(60vw, 600px);
    margin: 10vh auto 10vh auto;
    display: flex;
    flex-flow: column;
}
.past h2 {
    color: #5f9867   
}

.experience {
    margin-top: 2vh;
    display:flex;
}

.logo {
    width: max(5vw,50px);
    height: max(5vw,50px);
    flex:0 1 auto;
    align-self: center;
}

.round {
    border-radius: 50%;
}

.description {
    /* Border color changed */
    border-left: 1px solid #06330c;
    width:100%;
    margin-left: max(2vw,20px);
    padding-left: max(2vw,20px);
    display: flex;
    flex-flow: column;
}

.institute {
    margin: max(0.5vw,5px);
    font-size: max(1.6vw, 16px);
    font-weight: bold;
    /* Secondary Highlight/Interaction Color */
    color: #FFa600;
    opacity: 0.75;
    text-align: left;
}

.position {
    display:flex;
    width: 100%;
    justify-content: space-between;
}

.title{
    margin: max(0.5vw,5px);
    font-size: max(2vw,20px);
    /* Changed from #aaa to general text color */
    color:#06330c;
    font-weight: bold;
    flex: 0 1 auto;
    align-self: flex-end;
}

.title small {
    font-size:0.5em;
    color:#5f9867
}

.time {
    font-size: max(1vw,10px);
    text-align: right;
    opacity: 0.5;
    font-weight: bold;
    flex: 0 2 auto;
    align-self: flex-end;
}

/* Style the clickable keyword */
.pop-up-trigger {
    cursor: help; /* Change cursor to indicate interaction */
    /*border-bottom: 2px dashed #06330c;  Dotted line under the word */
    padding-bottom: 2px;
}
.pop-up-trigger:hover {
    color: var(--color-interaction, #DF52FF); /* Use the hover color for interaction */
}

/* Base style for the card container */
.pop-up-card {
    /* Style consistency */
    background-color: #f7fff8; /* A slightly lighter background for the card */
    border: 1px solid #06330c; 
    border-radius: 5px;
    padding: 1.5vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* Positioning */
    position: absolute; /* Essential for positioning relative to the trigger */
    z-index: 100; /* Ensure it appears above other content */
    max-width: 25vw;
    min-width: 250px;
    
    /* Initial state: Hidden */
    display: none;    
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when hidden */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px); /* Small translation for a subtle pop-in effect */
}

/* Style for the card's text */
.pop-up-title {
    font-weight: bold;
    font-size: 1.2em;
    color: #06330c; /* Secondary Highlight/Accent Color */
    margin-bottom: 0.5em;
}

.pop-up-content {
    font-size: 1em;
    line-height: 1.4;
    color: #06330c;
}

.pop-up-content .social-logo {
    width: 30px;
    height: 30px;
}

/* State for when the card is active (shown by JavaScript) */
.pop-up-card.active {
    display: inline;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tooltip-container {
  position: relative;
  /* Make sure the container is an inline-block to apply padding correctly */
  display: inline-block; 
  font-weight: bold;
}
.tooltip-container:hover {
  color: #DF52FF
}

.tooltip-text {
  visibility: hidden; 
  opacity: 0; 
  background-color: rgba(0, 0, 0, 0.95); 
  color: white;
  padding: 10px;
  border-radius: 5px;
  
  position: absolute;
  z-index: 10; 
  
  /* KEY FIX 2: Position the tooltip to start exactly where the text ends */
  bottom: 100%; 
  left: 50%;
  
  /* KEY FIX 3: Push the tooltip down 8px to meet the padding-bottom area */
  transform: translateX(-50%) translateY(8px); 
  
  max-width: 250px;
  width: max-content;
  white-space: normal;
  font-weight: normal;
  
  pointer-events: none; 
  transition: opacity 0.3s ease;
}

/* Visibility trigger remains the same */
.tooltip-container:hover .tooltip-text {
  visibility: visible; 
  opacity: 1; 
  pointer-events: auto; 
}
/* index.css (New Additions) */

#scroll-hint-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* Style the banner to match the theme */
    background-color: #5f9867; /* Muted medium green */
    color: #ffffff;            /* White text for contrast */
    opacity: 0.5;
    text-align: center;
    font-size: 2vh;
    font-weight: bold;
    z-index: 999; /* Ensure it stays above everything except the pop-up card */
    
    /* Transition for smooth hiding/showing */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Class to hide the banner (used by JavaScript) */
#scroll-hint-banner.hidden {
    transform: translateY(100%); /* Slide completely off the bottom */
    opacity: 0;
}

/* Ensure body padding accounts for the banner on small screens if necessary.
   Since the banner is fixed and short, this may not be strictly needed, 
   but is good practice if its height were variable. */