.container {
margin-left: auto;
margin-right: auto;
align-content: center;
}
.resume-section {
margin-bottom: 2rem;
}
/* Right sidebar for social links */
.sidebar {
position: fixed;
top: 50%;
right: 5px;
width: 280px;
transform: translateY(-50%);
}

/* Left sidebar for navigation */
.left-sidebar {
position: fixed;
top: 50%;
left: 20px;
width: 280px;
transform: translateY(-50%);
}

.left-sidebar ul.example-2 {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}

.left-sidebar ul.example-2 li {
margin-bottom: 10px;
list-style: none;
}

.left-sidebar .icon-content {
display: flex;
align-items: center;
justify-content: center;
}

.left-sidebar .tooltip {
margin-left: 10px;
}

.sidebar ul.example-2 {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}

.sidebar ul.example-2 li {
margin-bottom: 10px;
list-style: none;
}

.sidebar .icon-content {
display: flex;
align-items: center;
justify-content: center;
}

.sidebar .tooltip {
margin-left: 10px;
}
.tag.skill-tag {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.tech-tag {
background-color: #3e8ed0;
color: white;
}
.timeline-item {
padding-bottom: 2rem;
}
.job-period, .edu-period {
font-style: italic;
color: #7a7a7a;
}
.cs-skill {
background-color: #fbfb3f
}
.lab-skill {
background-color: #fb3f3f;
color: white;
}
.skill-category {
margin-bottom: 1.5rem;
}
.box .columns {
margin: auto;
}
.rounded {
    border-radius: 300px !important;
}
.custom-background {
    background: linear-gradient(
        30deg,
        #3ffafbed 0%,
        #fb6e3fed 100%
    );
    background-attachment: fixed;
}
.section-title {
    color: #3f9dfb;
}
footer.footer {
    background-color: transparent !important;
}
.project-year {
font-size: 0.9em;
color: #888;
text-align: right;
}

.vert-centre {
    vertical-align: center;
}
/* From Uiverse.io by Zameerahmad01 */ 
ul {
list-style: none;
}

.example-2 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 0.5rem;
}
.example-2 .icon-content {
margin: 0 10px;
position: relative;
}
.example-2 .icon-content .tooltip {
position: absolute;
top: 20px;
left: 40%;
transform: translateX(30px);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
opacity: 0;
visibility: hidden;
font-size: 14px;
transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
opacity: 1;
visibility: visible;
top: 5px;
}
.example-2 .icon-content a {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: #4d4d4d;
background-color: transparent;
transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
position: relative;
z-index: 1;
width: 30px;
height: 30px;
}
.example-2 .icon-content a:hover {
color: white;
}
.example-2 .icon-content a .filled {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #000;
transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
height: 100%;
}

.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
background-color: #0274b3;
}

.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
background-color: #24262a;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
);
}
.example-2 .icon-content a[data-social="email"] .filled,
.example-2 .icon-content a[data-social="email"] ~ .tooltip {
background: linear-gradient(
    45deg,
    #EF8314,
    #FACD08
);
}

.example-2 .icon-content a[data-social="orcid"] .filled,
.example-2 .icon-content a[data-social="orcid"] ~ .tooltip {
background-color: #a6ce39;
}

.example-2 .icon-content a[data-social="researchgate"] .filled,
.example-2 .icon-content a[data-social="researchgate"] ~ .tooltip {
background-color: #011716;
}

.example-2 .icon-content a[data-social="messenger"] .filled,
.example-2 .icon-content a[data-social="messenger"] ~ .tooltip {
background: linear-gradient(
    45deg,
    #168AFF,
    #9F33FF,
    #FF6070
);
}

.left-sidebar .example-2 .icon-content .tooltip {
position: absolute;
top: 20px;
left: 40%;
transform: translateX(30px);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
opacity: 0;
visibility: hidden;
font-size: 14px;
transition: all 0.3s ease;
}
.left-sidebar .example-2 .icon-content:hover .tooltip {
opacity: 1;
visibility: visible;
top: 5px;
}
.left-sidebar .example-2 .icon-content a[data-nav="me"] .filled,
.left-sidebar .example-2 .icon-content a[data-nav="me"] ~ .tooltip {
    background: linear-gradient(
    45deg,
    #EF8314,
    #FACD08
);
}

.button-container {
display: flex;
flex-direction: row;
gap: 10px; /* Space between buttons */
align-items: center;
}

/* Fix for hover state - ensure buttons don't overlap when expanded */
.button-container .Btn:hover {
z-index: 2; /* Ensure hovered button appears above others */
}


/* From Uiverse.io by vinodjangid07 */ 
.Btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
transition-duration: 1s !important;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
background-color: #24262a;
}
.Btn.link {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
transition-duration: .5s !important;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
background-color: #3e8ed0;
}

/* plus sign */
.sign {
width: 100%;
transition-duration: .3s !important;
display: flex;
align-items: center;
justify-content: center;
}

.sign svg {
width: 17px;
}

.sign svg path {
fill: white;
}
/* text */
.text {
position: absolute;
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1em;
font-weight: 600;
transition-duration: .3s !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* button click effect*/
.Btn:active {
transform: translate(2px ,2px);
}

@media screen and (max-width: 1200px) {
    .sidebar, .left-sidebar {
        position: static;
        width: 100%;
        transform: none;
        margin-bottom: 20px;
    }
    .container {
        margin-left: auto;
        margin-right: auto;
    }
    .left-sidebar {
        margin-bottom: 20px;
    }
}