:root {
  --bg-color: #fdfdfd;
  --text-color: #000000; /* Ensure black for visibility */
  --main-color: #FF9800;
  --white-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.2);
}

/* General Styles */
.education {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--main-color), var(--shadow-color));
color: var(--text-color);
height: 100vh;
overflow: hidden;
transition: background 0.5s ease, color 0.5s ease;
}

.dark-mode .education {
background: linear-gradient(135deg, var(--main-color), var(--shadow-color));
color: var(--white-color);
}

/* Education Section */
.education {
text-align: center;
padding-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
height: calc(100vh - 80px);
justify-content: flex-start;
}

/* Heading */
.education .heading {
font-size: 45px;
font-weight: 800;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 3px;
background: linear-gradient(90deg, var(--main-color), var(--shadow-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glowText 1.5s ease-in-out infinite alternate;
transition: all 0.5s ease;
}

/* Timeline Container */
.timeline {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
width: 100%;
transition: all 0.5s ease;
}

/* Timeline Item */
.timeline-item {
position: relative;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 33.33%;
transition: all 0.3s ease;
cursor: pointer;
}

/* Hover Effect on Timeline Item */
.timeline-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 30px var(--shadow-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item .circle {
width: 20px;
height: 20px;
background: linear-gradient(135deg, var(--main-color), var(--shadow-color));
border: 5px solid var(--white-color);
border-radius: 50%;
position: absolute;
top: -20px;
z-index: 10;
transition: all 0.3s ease;
}

.dark-mode .timeline-item .circle {
background: linear-gradient(135deg, var(--shadow-color), var(--main-color));
border: 5px solid var(--text-color);
}

/* Timeline Content Box */
.timeline-item .content {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 25px;
color: var(--text-color);
box-shadow: 0 12px 24px var(--shadow-color);
width: 90%;
text-align: center;
transition: background 0.3s ease, color 0.3s ease;
}

/* Hover Effect on Content */
.timeline-item:hover .content {
background: rgba(255, 255, 255, 0.3);
transition: background 0.3s ease;
}

.dark-mode .timeline-item .content {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--white-color);
}

/* Timeline Item Title (Degree Names) */
.timeline-item h3 {
font-size: 24px;
margin-bottom: 10px;
font-weight: 800;
transition: color 0.3s ease;
color: var(--text-color);
}

.dark-mode .timeline-item h3 {
color: var(--white-color);
}

/* Timeline Item Span (Institution Names) */
.timeline-item span {
font-size: 18px;
color: var(--text-color);
margin-bottom: 15px;
display: block;
font-weight: 600;
transition: color 0.3s ease;
}

.dark-mode .timeline-item span {
color: var(--white-color);
}

/* Timeline Item Description */
.timeline-item p {
font-size: 16px;
color: var(--text-color);
line-height: 1.6;
font-weight: 500;
transition: color 0.3s ease;
}

.dark-mode .timeline-item p {
color: var(--white-color);
}

/* Animations */
@keyframes glowText {
0% {
  filter: brightness(1);
}
100% {
  filter: brightness(1.5);
}
}

/* Responsive Design */
@media (max-width: 768px) {
.timeline {
  padding: 0 20px;
}

.timeline-item {
  height: auto;
}

.timeline-item .content {
  width: 100%;
}
}