body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f4f4f4;
    color: #333;
}
.container {
    max-width: 1100px;
    margin: 40px auto;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

h1 { margin-bottom: 5px; }
h2 { color: #444; margin-top: 30px; }

/* Tabs styling */
.tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}
.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background: #eee;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}
.tab-button.active {
    background: #fff;
    border-bottom: 2px solid #fff;
}
/* Tab content */
.tab-content { display: none; }
.tab-content.active { display: block; }

.section { margin-top: 20px; }
.contact span { display: block; margin-bottom: 5px; }

.job { margin-bottom: 20px; }
.job h3 { margin: 0; }

.skills-list, .exp-list, .qual-list { list-style: none; padding: 0; }
.skills-list li, .qual-list li { background: #eee; padding: 8px 12px; display: inline-block; margin: 5px; border-radius: 6px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.grid img, .grid video {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a { color: #0077cc; text-decoration: none; }

/* Tooltip container */
.tooltip {
position: relative;
cursor: help;
color: #0077cc;
font-weight: bold;
border-bottom: 1px dotted #0077cc; /* small underline for hint */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%; /* show above the text */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 0.9em;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* arrow at the bottom of tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}