body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background-color: #0a0a0a;
	background-image:
	radial-gradient(at 0% 0%, rgba(76, 0, 255, 0.15) 0px, transparent 50%),
	radial-gradient(at 100% 0%, rgba(0, 225, 255, 0.15) 0px, transparent 50%),
	linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
	background-attachment: fixed;
}

.header-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: sticky;
    top: 0;
    z-index: 1000;
    
    background-color: rgba(255, 255, 255, 0.05);
	/* The magic: Background Blur */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

	font-family: "Roboto", sans-serif;
    color: white;

    padding: 0.75rem 1rem;
    margin: 0.5rem 0.5rem 1rem;

    border-bottom: 0.5px solid rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    .header-profile-container {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	gap: 0.75rem;
    	.chaitanya-picture {
    		width: 40px;
    		height: 40px;
    		border-radius: 100px;
    	}
    	.header-text-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 0.15rem;
			.header-text {
				font-size: 1.25rem;
				font-weight: bold;
			}
			.subheader-text {
				font-size: 0.75rem;
			}
		}
    }
	.button-icons {
		display: flex;
		flex-direction: row;
		gap: 0.625rem;
		.button-icon {
			width: 32px;
			aspect-ratio: 1/1;
		}
	}
}
.body-container {
    min-height: 100vh;
    width: 100%;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    .block {
    	background: rgba(255, 255, 255, 0.03);
	    backdrop-filter: blur(8px);
	    -webkit-backdrop-filter: blur(8px);

		border: 1px solid rgba(255, 255, 255, 0.1);
	    border-radius: 10px;
	    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 
	                0 0 20px rgba(76, 0, 255, 0.1);

	    text-align: center;
	    color: white;
    }
    .about-me-block {
	    display: flex;
	    justify-content: center;
	    padding: 2rem 2rem;
        margin: 1rem 0.5rem 1.5rem;
	    border: 1px solid rgba(255, 255, 255, 0.05);
	    
	    .about-me-content {
	        width: 100%;
	        max-width: 800px;
	        text-align: center;

	        .about-me-name {
	            font-family: 'Fira Sans', sans-serif;
	            font-size: 3.5rem;
	            font-weight: 900;
	            letter-spacing: -1px;
	            background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.5) 100%);
	            -webkit-background-clip: text;
	            -webkit-text-fill-color: transparent;
	            margin-bottom: 1rem;
	        }

	        .about-me-desc {
	            font-family: 'Roboto', sans-serif;
	            font-size: 1.1rem;
	            line-height: 1.8;
	            color: rgba(255, 255, 255, 0.7);
	            margin-bottom: 3rem;
	            max-width: 700px;
	            margin-left: auto;
	            margin-right: auto;
	            font-weight: 300;
	        }

	        .tech-skills-sections {
	            display: flex;
	            flex-direction: column;
	            gap: 1.5rem;
	            border-top: 1px solid rgba(255, 255, 255, 0.1);
	            padding-top: 2.5rem;

	            .tech-skills-heading {
	                font-family: 'Fira Sans', sans-serif;
	                font-size: 0.8rem;
	                text-transform: uppercase;
	                letter-spacing: 0.2rem;
	                color: #00e1ff;
	                opacity: 0.8;
	            }

	            .languages-text, .certs-text {
	                font-family: 'Fira Code', monospace;
	                font-size: 0.9rem;
	                color: #fff;
	                background: rgba(76, 0, 255, 0.1);
	                padding: 0.5rem 1.2rem;
	                border-radius: 8px;
	                display: inline-block;
	                align-self: center;
	                border: 1px solid rgba(76, 0, 255, 0.2);
	                
	                b {
	                    color: #00e1ff;
	                    font-weight: 500;
	                }
	            }
	        }
	    }
	}
	.highlight {
	    color: #fff;
	    font-weight: 500;
	    background: rgba(0, 225, 255, 0.1);
	    padding: 0 4px;
	    border-radius: 4px;
	}
	.options-div {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 1.5rem;
	    padding: 0 0.5rem 2rem;
	    margin: 0 auto;

	    .block {
	        min-height: 200px;
	        padding: 2rem;
	        display: flex;
	        flex-direction: column;
	        align-items: stretch; 
	        position: relative;
	    }
	}

	.options-blocks {
	    display: flex;
	    flex-direction: column;
	    position: relative;
	    overflow: hidden;

	    .card-header-text {
	        width: 100%;
	        text-align: center;
	        font-size: 1.2rem;
	        font-family: 'Fira Sans', sans-serif;
	        color: white;
	        text-transform: uppercase;
	        letter-spacing: 1px;
	    }

	    .options-blocks-content {
	    	width: 100%;
	        flex-grow: 1; 
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        .option-block-groups {
	        	border-left: 2px solid rgba(0, 225, 255, 0.2);
		        padding-left: 1.5rem;
		        margin: 0.5rem 0;
		        text-align: left;

		        &:hover {
		        	border-left: 2px solid rgba(0, 225, 255, 0.75);
		        }

		        .option-group-header {
		        	display: flex;
		            justify-content: space-between;
		            align-items: center;
		            flex-wrap: wrap;
		            gap: 0.5rem;
		        	.option-group-header-text {
		        		font-weight: 700;
	                	font-size: 1.1rem;
		        	}
		        	.option-group-years {
		        		font-size: 0.8rem;
	                	opacity: 0.6;
		        	}
		        }
		        .option-group-body-text {
		        	margin-top: 0.2rem;
		            font-size: 0.9rem;
		            color: rgba(255, 255, 255, 0.7);
		        }
	        }
	    }

	    .coming-soon-text {
	        margin: auto; 
	        font-family: 'Fira Code', monospace;
	        font-size: 1.2rem;
	        color: rgba(255, 255, 255, 0.5);
	        white-space: nowrap;
	        overflow: hidden;
	        border-right: 2px solid #00e1ff;
	        width: 0;
	        
	        display: block;
	        text-align: center;

	        animation: 
	            typing-loop 6s steps(14) infinite, 
	            blink 0.75s step-end infinite;
	    }
	}

	.education-block {
        .degree {
            
        }
	}
}

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;

	background: rgba(5, 7, 15, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: "Roboto", sans-serif;

	.modal-content {
		background: rgba(12, 14, 24, 0.85);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 20px;
		box-shadow: 0 25px 60px -30px rgba(0, 0, 0, 0.8);
		width: min(90vw, 480px);
		padding: 2.5rem;
		color: white;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		text-align: left;
		animation: modal-pop 0.25s ease forwards;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, rgba(0, 225, 255, 0.8), rgba(102, 0, 255, 0.8));
			opacity: 0.7;
		}

		.modal-header {
			display: flex;
			flex-direction: column;
			gap: 0.35rem;
			position: relative;
			padding-top: 0.25rem;

			.company {
				font-size: 1.55rem;
				font-weight: 600;
				letter-spacing: 0.02em;
			}

			.company-location {
				font-size: 0.9rem;
				text-transform: uppercase;
				letter-spacing: 0.08em;
				color: rgba(255, 255, 255, 0.45);
			}

			.close-btn {
				position: absolute;
				right: -0.25rem;
				top: -0.25rem;
			}
		}

		.modal-body {
			color: rgba(255, 255, 255, 0.85);
			line-height: 1.7;
			display: flex;
			flex-direction: column;
			gap: 0.85rem;

				.modal-experience-list {
					list-style: none;
					padding: 0;
					margin: 0;
					display: flex;
					flex-direction: column;
					gap: 0.75rem;

					.modal-experience {
						position: relative;
					padding-left: 1.5rem;
					font-size: 0.97rem;
					color: rgba(255, 255, 255, 0.78);

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 0.65rem;
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background: rgba(255, 255, 255, 0.4);
							box-shadow: none;
							opacity: 0.8;
						}
					}
				}

			.modal-experience-skills {
				font-size: 0.88rem;
				color: rgba(255, 255, 255, 0.6);
				background: rgba(255, 255, 255, 0.03);
				border: 1px solid rgba(255, 255, 255, 0.07);
				border-radius: 10px;
				padding: 0.7rem 0.95rem;
				font-family: 'Fira Code', monospace;
			}
		}

		.close-btn {
			background: transparent;
			border: none;
			color: rgba(255, 255, 255, 0.7);
			font-size: 1.4rem;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			cursor: pointer;
			transition: background 0.2s ease, color 0.2s ease;

			&:hover {
				color: #fff;
				background: rgba(255, 255, 255, 0.08);
			}
		}
	}
}

.page-content {
    transition: filter 0.3s ease;
}

.page-content.is-blurred {
    filter: blur(8px);
}

@keyframes modal-pop {
	from {
		opacity: 0;
		transform: translateY(15px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* The loop: Type -> Wait -> Erase -> Wait */
@keyframes typing-loop {
    0%, 10% { width: 0; }           /* Wait at start */
    30%, 60% { width: 14ch; }       /* Finish typing and stay visible */
    80%, 90% { width: 0; }          /* Erase back to zero */
    100% { width: 0; }              /* Reset for next loop */
}

/* Keep your existing blink animation */
@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: white; }
}

@media (max-width: 768px) {
    .options-div {
        grid-template-columns: 1fr;
    }
}