.music-control {
	    position: fixed;
	    bottom: 20px;
	    left: 20px;
	    width: 48px;
	    height: 48px;
	    border-radius: 50%;
	    border: none;
	    background: var(--gradient-1);
	    color: #fff;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    box-shadow: 0 6px 20px rgba(102, 126, 234, .4);
	    cursor: pointer;
	    z-index: 1100;
	    transition: var(--transition)
	}

	.music-control:hover {
	    transform: translateY(-3px);
	    box-shadow: 0 10px 25px rgba(102, 126, 234, .55)
	}

	.music-control.playing {
	    background: linear-gradient(135deg, #10b981, #34d399);
	    box-shadow: 0 8px 25px rgba(16, 185, 129, .45)
	}

	.music-control i {
	    font-size: 1.2rem
	}

	@media (max-width:575px) {
	    .music-control {
	        width: 44px;
	        height: 44px;
	        bottom: 15px;
	        left: 15px
	    }
	}

	.coming-soon-badge span,
	.game-over-screen h3,
	.social-media-section h3,
	.text-gradient {
	    -webkit-text-fill-color: transparent
	}

	:root {
		--primary-color: #7dd3fc;
		--secondary-color: #a78bfa;
		--accent-color: #22c55e;
		--dark-color: #0b1021;
		--light-color: #0f172a;
		--text-color: #e5e7eb;
		--text-light: #94a3b8;
		--gradient-1: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
		--gradient-2: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
		--gradient-3: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%);
		--shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.25);
		--shadow-md: 0 10px 35px rgba(0, 0, 0, 0.32);
		--shadow-lg: 0 18px 55px rgba(0, 0, 0, 0.38);
	    --transition: all 0.3s ease
	}

	.reveal {
	    opacity: 0;
	    transform: translateY(30px);
	    transition: .6s ease-out
	}

	.fade-in-left,
	.fade-in-right,
	.fade-in-up {
	    transition: opacity .8s, transform .8s;
	    opacity: 0
	}

	.fade-in-up.visible,
	.reveal.active {
	    opacity: 1;
	    transform: translateY(0)
	}

	.btn,
	.certificate-card,
	.contact-card,
	.contact-card-btn,
	.project-card,
	.project-media-btn,
	.skill-category {
	    position: relative;
	    overflow: hidden
	}

	.certificate-card::after,
	.contact-card::after,
	.project-card::after,
	.skill-category::after {
	    content: '';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: 0;
	    height: 0;
	    border-radius: 50%;
	    background: radial-gradient(circle, rgba(102, 126, 234, .1) 0, transparent 70%);
	    transform: translate(-50%, -50%);
	    transition: width .6s, height .6s;
	    pointer-events: none
	}

	.certificate-card:hover::after,
	.contact-card:hover::after,
	.project-card:hover::after,
	.skill-category:hover::after {
	    width: 500px;
	    height: 500px
	}

	.btn::before,
	.contact-card-btn::before,
	.project-media-btn::before {
	    content: '';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: 0;
	    height: 0;
	    border-radius: 50%;
	    background: rgba(255, 255, 255, .5);
	    transform: translate(-50%, -50%);
	    transition: width .5s, height .5s
	}

	.nav-link::after,
	.navbar::after {
	    bottom: 0;
	    height: 2px;
	    content: '';
	    position: absolute
	}

	.btn:active::before,
	.contact-card-btn:active::before,
	.project-media-btn:active::before {
	    width: 300px;
	    height: 300px;
	    transition: width, height
	}

	.skeleton {
	    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	    background-size: 200% 100%;
	    animation: 1.5s infinite loading
	}

	@keyframes loading {
	    0% {
	        background-position: 200% 0
	    }

	    100% {
	        background-position: -200% 0
	    }
	}

	.fade-in-up {
	    transform: translateY(50px)
	}

	.fade-in-left {
	    transform: translateX(-50px)
	}

	.fade-in-left.visible,
	.fade-in-right.visible {
	    opacity: 1;
	    transform: translateX(0)
	}

	.fade-in-right {
	    transform: translateX(50px)
	}

	.custom-cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: 26px;
		height: 26px;
		pointer-events: none;
		z-index: 10000;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(-50%, -50%);
		transition: opacity .25s ease;
		opacity: 0;
	}

	.custom-cursor.visible {
		opacity: 1;
	}

	.custom-cursor.hidden {
		opacity: 0;
	}

	.custom-cursor .cursor-core {
		width: 12px;
		height: 12px;
		border-radius: 12px;
		background: radial-gradient(circle at 30% 30%, #fff 0%, #e0e7ff 40%, #667eea 100%);
		box-shadow: 0 0 12px rgba(102, 126, 234, .65), 0 4px 14px rgba(118, 75, 162, .55);
		transition: transform .18s ease, box-shadow .2s ease;
	}

	.custom-cursor .cursor-glow {
		position: absolute;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(102, 126, 234, .45) 0%, rgba(118, 75, 162, .25) 50%, rgba(118, 75, 162, 0) 70%);
		filter: blur(12px);
		opacity: .65;
		transition: opacity .2s ease, transform .2s ease;
	}

	.custom-cursor.clicked .cursor-core {
		transform: scale(.75);
		box-shadow: 0 0 16px rgba(240, 147, 251, .7), 0 6px 20px rgba(102, 126, 234, .6);
	}

	.custom-cursor.clicked .cursor-glow {
		transform: scale(1.05);
		opacity: .8;
	}

	.custom-cursor.active .cursor-core {
		transform: scale(1.1);
		background: radial-gradient(circle at 30% 30%, #e0fff9 0%, #a7f3d0 35%, #10b981 100%);
		box-shadow: 0 0 14px rgba(16, 185, 129, .75), 0 4px 18px rgba(16, 185, 129, .55);
	}

	.custom-cursor.active .cursor-glow {
		transform: scale(1.15);
		opacity: .9;
		background: radial-gradient(circle, rgba(16, 185, 129, .35) 0%, rgba(16, 185, 129, .2) 50%, rgba(16, 185, 129, 0) 70%);
	}

	/* Resume modal */
	.resume-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
		align-items: center;
		justify-content: center;
		z-index: 12000;
	}

	.resume-modal.show {
		display: flex;
	}

	.resume-modal__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(20, 23, 43, 0.65);
		backdrop-filter: blur(6px);
	}

	.resume-modal__dialog {
		position: relative;
		width: min(1100px, 92vw);
		height: min(80vh, 820px);
		background: linear-gradient(145deg, #0d1326 0%, #0f172a 45%, #0b1021 100%);
		border-radius: 22px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
		overflow: hidden;
		border: 1px solid rgba(102, 126, 234, 0.25);
	}

	.resume-modal__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		background: linear-gradient(90deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.14));
		border-bottom: 1px solid rgba(102, 126, 234, 0.2);
	}

	.resume-modal__title {
		display: flex;
		align-items: center;
		color: #eef2ff;
		font-weight: 700;
		letter-spacing: .3px;
	}

	.resume-modal__actions {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.resume-modal__icon-btn {
		border: none;
		background: rgba(255, 255, 255, 0.08);
		color: #e0e7ff;
		width: 38px;
		height: 38px;
		border-radius: 12px;
		display: grid;
		place-items: center;
		transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
	}

	.resume-modal__icon-btn:hover {
		transform: translateY(-2px);
		background: rgba(102, 126, 234, 0.25);
		box-shadow: 0 6px 18px rgba(102, 126, 234, 0.35);
	}

	.resume-modal__body {
		position: relative;
		height: calc(100% - 62px);
		background: #0b1021;
	}

	.resume-modal__body iframe {
		border: none;
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		background: #0b1021;
	}

	.resume-modal__frame-wrap {
		--resume-zoom: 1;
		width: 100%;
		height: 100%;
		overflow: auto;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		background: #0b1021;
	}

	.resume-modal__frame-wrap iframe {
		transform: scale(var(--resume-zoom));
		transform-origin: top center;
		width: 100%;
		height: 100%;
	}

	.resume-loader {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		gap: 10px;
		background: linear-gradient(145deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.06));
		z-index: 3;
	}

	.resume-loader__ring {
		width: 56px;
		height: 56px;
		border: 4px solid rgba(255, 255, 255, 0.15);
		border-top-color: #a8ff78;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	.resume-loader__dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #a8ff78;
		box-shadow: 0 0 20px rgba(168, 255, 120, 0.7);
		animation: pulse 1.2s ease-in-out infinite;
	}

	.resume-loader__text {
		color: #e5e7eb;
		font-weight: 600;
		margin: 0;
		text-align: center;
		font-size: 15px;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}

	@keyframes pulse {
		0%, 100% { transform: scale(0.95); opacity: .8; }
		50% { transform: scale(1.1); opacity: 1; }
	}

	@media (max-width: 768px) {
		.resume-modal__dialog {
			width: 94vw;
			height: 80vh;
			border-radius: 16px;
		}
		.resume-modal__header {
			padding: 12px 14px;
		}
		.resume-modal__icon-btn {
			width: 34px;
			height: 34px;
		}
	}

	body {
		cursor: none;
	}

	a, button, input, textarea, select, label {
		cursor: none;
	}

	body * {
		cursor: none !important;
	}

	@media (hover: none) {
		body, a, button, input, textarea, select, label {
			cursor: auto;
		}
		body * {
			cursor: auto !important;
		}
		.custom-cursor {
			display: none;
		}
	}

	.navbar,
	body,
	section {
	    width: 100%
	}

	.hero-section,
	.nav-link,
	.navbar,
	.navbar-toggler,
	body {
	    position: relative
	}

	.navbar::after {
	    left: 0;
	    width: 100%;
	    background: var(--gradient-1);
	    transform: scaleX(0);
	    transition: transform .3s
	}

	.navbar.scrolled::after {
	    transform: scaleX(1)
	}

	.certificate-card,
	.float-element,
	.project-card,
	.skill-category,
	.social-icon,
	.tech-icon {
	    will-change: transform
	}

	@media (prefers-reduced-motion:reduce) {

	    *,
	    ::after,
	    ::before {
	        animation-duration: 0s !important;
	        animation-iteration-count: 1 !important;
	        transition-duration: 0s !important
	    }
	}

	.nav-link,
	.nav-link::after,
	.navbar,
	.navbar-brand {
	    transition: var(--transition)
	}

	section:not(:first-child)::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 80%;
	    max-width: 600px;
	    height: 1px;
	    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, .3), transparent)
	}

	* {
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box
	}

	iframe,
	img,
	video {
	    max-width: 100%;
	    height: auto
	}

	html {
	    scroll-behavior: smooth;
	    overflow-y: scroll
	}

	body {
	    font-family: Vazir, sans-serif;
		color: var(--text-color);
		background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08), transparent 25%),
					radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.08), transparent 28%),
					radial-gradient(circle at 50% 80%, rgba(34, 197, 94, 0.06), transparent 30%),
					#0b1021;
	    line-height: 1.8;
	    max-width: 100vw
	}

	.container,
	.container-fluid {
	    max-width: 100%
	}

	body[dir=rtl] {
	    direction: rtl;
	    text-align: right
	}

	body[dir=ltr] {
	    direction: ltr;
	    text-align: left;
	    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
	}

	.row {
	    margin-left: 0;
	    margin-right: 0
	}

	.navbar {
	    padding: .75rem 0;
	    background: rgba(26, 26, 46, .95);
	    backdrop-filter: blur(10px);
	    box-shadow: var(--shadow-sm)
	}

	.navbar.scrolled {
	    padding: .5rem 0;
	    background: rgba(26, 26, 46, .98)
	}

	.nav-link::after,
	.navbar-toggler,
	.text-gradient {
	    background: var(--gradient-1)
	}

	.navbar .container {
	    padding-left: 15px;
	    padding-right: 15px
	}

	.navbar-brand {
	    font-size: 1.3rem;
	    font-weight: 700;
	    color: #fff !important
	}

	.navbar-brand:hover {
	    transform: scale(1.05);
	    color: var(--primary-color) !important
	}

	.navbar-brand i,
	.skill-category h3 i {
	    margin-left: .5rem;
	    color: var(--primary-color)
	}

	.code-animation code,
	.code-animation pre {
	    color: #a9b7c6;
	    font-family: Consolas, Monaco, 'Courier New', monospace;
	    direction: ltr;
	    white-space: pre-wrap;
	    word-wrap: break-word
	}

	.nav-link {
	    color: rgba(255, 255, 255, .8) !important;
	    font-weight: 500;
	    padding: .5rem .8rem !important;
	    font-size: .95rem
	}

	.nav-link::after {
	    right: 50%;
	    width: 0
	}

	.nav-link.active::after,
	.nav-link:hover::after {
	    width: 80%;
	    right: 10%
	}

	.nav-link:hover {
	    color: #fff !important
	}

	.navbar-toggler {
	    border: none;
	    padding: 0;
	    width: 50px;
	    height: 50px;
	    border-radius: 12px;
	    transition: .3s;
	    box-shadow: 0 4px 15px rgba(102, 126, 234, .4)
	}

	.navbar-toggler:focus {
	    box-shadow: 0 0 0 .25rem rgba(102, 126, 234, .5)
	}

	.navbar-toggler:hover {
	    transform: scale(1.05);
	    box-shadow: 0 6px 20px rgba(102, 126, 234, .6)
	}

	.navbar-toggler span,
	.navbar-toggler::after,
	.navbar-toggler::before {
	    box-shadow: 0 0 5px rgba(255, 255, 255, .5)
	}

	.coming-soon-card .social-card-hover,
	.navbar-toggler-icon {
	    display: none
	}

	.navbar-toggler span,
	.navbar-toggler::after,
	.navbar-toggler::before {
	    content: '';
	    position: absolute;
	    width: 24px;
	    height: 3px;
	    background: #fff;
	    border-radius: 3px;
	    transition: .3s;
	    left: 13px
	}

	.navbar-toggler::before {
	    top: 14px
	}

	.navbar-toggler span {
	    top: 23px
	}

	.navbar-toggler::after {
	    top: 32px
	}

	.navbar-toggler[aria-expanded=true]::before {
	    top: 23px;
	    transform: rotate(45deg);
	    background: #fff
	}

	.navbar-toggler[aria-expanded=true] span {
	    opacity: 0;
	    transform: scale(0)
	}

	.navbar-toggler[aria-expanded=true]::after {
	    top: 23px;
	    transform: rotate(-45deg);
	    background: #fff
	}

	.navbar-toggler[aria-expanded=true] {
	    transform: rotate(90deg);
	    background: var(--gradient-2)
	}

	@media (max-width:991px) {

	    #langToggle,
	    .nav-link::before {
	        width: 100%;
	        background: var(--gradient-1)
	    }

	    .navbar-collapse {
	        background: linear-gradient(135deg, rgba(26, 26, 46, .98) 0, rgba(22, 33, 62, .98) 100%);
	        padding: 1.5rem;
	        margin-top: 1rem;
	        border-radius: 20px;
	        box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	        border: 1px solid rgba(102, 126, 234, .3);
	        backdrop-filter: blur(20px);
	        animation: .3s ease-out slideDown
	    }

	    @keyframes slideDown {
	        from {
	            opacity: 0;
	            transform: translateY(-20px)
	        }

	        to {
	            opacity: 1;
	            transform: translateY(0)
	        }
	    }

	    .nav-link {
	        padding: 1rem 1.25rem !important;
	        margin: .25rem 0;
	        border-radius: 12px;
	        transition: .3s;
	        position: relative;
	        overflow: hidden;
	        display: flex;
	        align-items: center;
	        gap: .75rem
	    }

	    .nav-link::before {
	        content: '';
	        position: absolute;
	        top: 0;
	        left: -100%;
	        height: 100%;
	        transition: left .3s;
	        z-index: -1;
	        border-radius: 12px
	    }

	    .nav-link.active::before,
	    .nav-link:hover::before {
	        left: 0
	    }

	    .nav-link.active,
	    .nav-link:hover {
	        color: #fff !important;
	        transform: translateX(10px);
	        background: 0 0
	    }

	    .nav-link::after {
	        display: none;
	        content: '→';
	        margin-right: auto;
	        opacity: 0;
	        transform: translateX(-10px);
	        transition: .3s
	    }

	    .nav-link.active::after,
	    .nav-link:hover::after {
	        display: inline-block;
	        opacity: 1;
	        transform: translateX(0)
	    }

	    .nav-item:last-child {
	        margin-top: 1rem;
	        padding-top: 1rem;
	        border-top: 1px solid rgba(255, 255, 255, .1)
	    }

	    #langToggle {
	        padding: .75rem;
	        border: none;
	        border-radius: 12px;
	        color: #fff;
	        font-weight: 600;
	        box-shadow: 0 4px 15px rgba(102, 126, 234, .4);
	        transition: .3s
	    }

	    #langToggle:hover {
	        transform: translateY(-3px);
	        box-shadow: 0 6px 20px rgba(102, 126, 234, .6)
	    }

	    #langToggle i {
	        margin-left: .5rem
	    }
	}

	.code-animation,
	.game-toggle-btn,
	.media-modal-overlay,
	.snake-game-container,
	.social-icon {
	    backdrop-filter: blur(10px)
	}

	.certificate-card,
	.hero-buttons .btn,
	.project-card,
	.project-image img,
	.skill-category,
	.social-icon,
	.tech-icon,
	.tech-icon i {
	    transition: var(--transition)
	}

	@media (min-width:992px) {
	    #langToggle {
	        transition: .3s
	    }

	    #langToggle:hover {
	        transform: scale(1.1);
	        box-shadow: 0 4px 15px rgba(255, 255, 255, .3)
	    }
	}

	.hero-section {
	    background: linear-gradient(135deg, #1a1a2e 0, #16213e 100%);
	    color: #fff;
	    overflow: hidden;
	    min-height: 100vh;
	    width: 100%;
	    padding: 80px 0 40px;
	    display: flex;
	    align-items: center
	}

	.particles-bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, .15) 0, transparent 50%), radial-gradient(circle at 80% 80%, rgba(118, 75, 162, .15) 0, transparent 50%), radial-gradient(circle at 40% 20%, rgba(240, 147, 251, .15) 0, transparent 50%), radial-gradient(circle at 60% 60%, rgba(79, 172, 254, .1) 0, transparent 50%);
	    animation: 20s ease-in-out infinite particlesMove
	}

	@keyframes particlesMove {

	    0%,
	    100% {
	        transform: translate(0, 0) scale(1);
	        transform: translate(0, 0)
	    }

	    33% {
	        transform: translate(20px, -20px) scale(1.05)
	    }

	    66% {
	        transform: translate(-20px, 20px) scale(.95)
	    }

	    50% {
	        transform: translate(20px, 20px)
	    }
	}

	.hero-content {
	    position: relative;
	    z-index: 2;
	    padding: 0 15px
	}

	.hero-section h1 {
	    font-size: clamp(1.75rem, 5vw, 3.5rem);
	    margin-bottom: 1rem
	}

	.hero-section h2 {
	    font-size: clamp(1.25rem, 3vw, 2rem);
	    margin-bottom: 1rem
	}

	.hero-section .lead {
	    font-size: clamp(.95rem, 2vw, 1.25rem);
	    margin-bottom: 1.5rem
	}

	.typing-text {
	    display: inline-block;
	    border-left: 3px solid var(--primary-color);
	    padding-right: 10px;
	    animation: .7s infinite blink
	}

	@keyframes blink {

	    0%,
	    100% {
	        border-color: var(--primary-color)
	    }

	    50% {
	        border-color: transparent
	    }
	}

	.text-gradient {
	    -webkit-background-clip: text;
	    background-clip: text
	}

	.hero-buttons {
	    display: flex;
	    flex-wrap: wrap;
	    gap: .75rem;
	    justify-content: flex-start;
	    margin-bottom: 2rem
	}

	.hero-buttons .btn {
	    padding: .7rem 1.75rem;
	    border-radius: 50px;
	    font-weight: 600;
	    position: relative;
	    overflow: hidden;
	    font-size: clamp(.85rem, 2vw, 1rem);
	    white-space: nowrap
	}

	.hero-buttons .btn::before {
	    content: '';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: 0;
	    height: 0;
	    border-radius: 50%;
	    background: rgba(255, 255, 255, .2);
	    transform: translate(-50%, -50%);
	    transition: width .6s, height .6s
	}

	.hero-buttons .btn:hover::before {
	    width: 300px;
	    height: 300px
	}

	.btn-primary {
	    background: var(--gradient-1);
	    border: none
	}

	.btn-primary:hover {
	    transform: translateY(-3px);
	    box-shadow: var(--shadow-lg)
	}

	.btn-outline-light:hover {
		background: rgba(255, 255, 255, 0.12);
		color: #e5e7eb;
		border-color: rgba(255, 255, 255, 0.35);
		transform: translateY(-3px)
	}

	.social-links {
	    display: flex;
	    gap: .75rem;
	    flex-wrap: wrap
	}

	.social-icon {
	    width: 45px;
	    height: 45px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 50%;
	    background: rgba(255, 255, 255, .1);
	    color: #fff;
	    font-size: 1.1rem
	}

	.float-element,
	.social-icon:hover {
	    background: var(--gradient-1);
	    color: #fff
	}

	.social-icon:hover {
	    transform: translateY(-5px) rotate(360deg);
	    box-shadow: var(--shadow-lg)
	}

	.hero-image-wrapper {
	    position: relative;
	    max-width: 100%;
	    padding: 20px
	}

	.floating-elements {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    display: none
	}

	.float-element {
	    position: absolute;
	    width: 50px;
	    height: 50px;
	    border-radius: 15px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 1.3rem;
	    animation: 3s ease-in-out infinite float;
	    box-shadow: var(--shadow-md)
	}

	.code-animation,
	.profile-image {
	    box-shadow: var(--shadow-lg);
	    max-width: 100%
	}

	.element-1 {
	    top: 10%;
	    left: 10%;
	    animation-delay: 0s
	}

	.element-2 {
	    top: 20%;
	    right: 10%;
	    animation-delay: .5s
	}

	.element-3 {
	    bottom: 20%;
	    left: 5%;
	    animation-delay: 1s
	}

	.element-4 {
	    bottom: 10%;
	    right: 15%;
	    animation-delay: 1.5s
	}

	@keyframes float {

	    0%,
	    100% {
	        transform: translateY(0)
	    }

	    50% {
	        transform: translateY(-20px)
	    }
	}

	.code-animation {
	    background: rgba(0, 0, 0, .8);
	    border-radius: 15px;
	    padding: 1.5rem;
	    border: 1px solid rgba(102, 126, 234, .3);
	    direction: ltr;
	    text-align: left
	}

	.code-animation pre {
	    margin: 0;
	    font-size: .8rem;
	    line-height: 1.5;
	    text-align: left
	}

	.code-animation code {
	    display: block
	}

	.code-animation code::before {
	    content: '';
	    display: block;
	    margin-bottom: .5rem;
	    padding-bottom: .5rem;
	    border-bottom: 1px solid rgba(102, 126, 234, .3)
	}

	.scroll-indicator {
	    position: absolute;
	    bottom: 30px;
	    left: 50%;
	    transform: translateX(-50%);
	    z-index: 3
	}

	.scroll-indicator a {
	    color: #fff;
	    font-size: 2rem;
	    animation: 2s infinite bounce
	}

	@keyframes bounce {

	    0%,
	    100%,
	    20%,
	    50%,
	    80% {
	        transform: translateY(0)
	    }

	    40% {
	        transform: translateY(-10px)
	    }

	    60% {
	        transform: translateY(-5px)
	    }
	}

	.section-title h2 {
	    font-size: clamp(1.75rem, 4vw, 2.5rem);
	    font-weight: 700;
		color: #e5e7eb;
	    position: relative;
	    display: inline-block
	}

	#about .section-title h2,
	#contact .section-title h2,
	#certificates .section-title h2 {
		color: #0f172a;
		font-weight: 800;
		text-shadow: 0 2px 8px rgba(14, 165, 233, 0.15)
	}

	.section-title .lead {
		font-size: clamp(.95rem, 2vw, 1.25rem);
		color: var(--text-light)
	}

	#about .section-title .lead,
	#contact .section-title .lead,
	#certificates .section-title .lead {
		color: #475569;
		font-weight: 500
	}

	.title-underline {
	    width: 100px;
	    height: 4px;
	    background: var(--gradient-1);
	    margin: 1rem auto;
	    border-radius: 2px
	}

	.about-details,
	.tech-stack {
	    margin-top: 2rem
	}

	.about-details p {
		color: var(--text-light);
		line-height: 1.9;
	}

	#about,
	#certificates,
	#contact,
	#projects,
	#skills {
		padding: 60px 0
	}

	.about-image-container {
	    position: relative;
	    max-width: 100%;
	    margin-bottom: 30px
	}

	.profile-image-wrapper {
	    position: relative;
	    border-radius: 20px;
	    overflow: visible;
	    z-index: 2;
	    max-width: 100%
	}

	.project-card,
	.project-image,
	.skill-bar,
	.tag {
	    overflow: hidden
	}

	.profile-image {
	    width: 100%;
	    height: auto;
	    border-radius: 20px;
	    position: relative;
	    z-index: 2;
	    display: block
	}

	.image-overlay-element {
	    position: absolute;
	    bottom: -20px;
	    right: -20px;
	    width: 150px;
	    height: 150px;
	    background: var(--gradient-1);
	    border-radius: 20px;
	    z-index: 3;
	    box-shadow: var(--shadow-md)
	}

	.experience-badge {
	    position: absolute;
	    top: -15px;
	    left: -15px;
	    width: 120px;
	    height: 120px;
	    background: var(--gradient-2);
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    box-shadow: var(--shadow-lg);
	    z-index: 4
	}

	.badge-content {
	    text-align: center;
	    color: #fff
	}

	.badge-content h3 {
	    font-size: clamp(2rem, 5vw, 3rem);
	    font-weight: 700;
	    margin: 0
	}

	.badge-content p {
	    margin: 0;
	    font-size: clamp(.75rem, 2vw, .9rem)
	}

	.about-content {
	    padding: 1rem
	}

	.about-content h3 {
	    font-size: clamp(1.25rem, 3vw, 1.75rem);
		margin-bottom: 1rem;
		color: #1e293b;
		letter-spacing: .3px;
		font-weight: 800
	}

	.about-content .lead {
		font-size: clamp(.95rem, 2vw, 1.15rem);
		color: #334155;
		opacity: 1;
		line-height: 1.9;
		background: linear-gradient(145deg, rgba(14, 165, 233, 0.08), rgba(99, 102, 241, 0.08));
		padding: .75rem 1rem;
		border-radius: 12px;
		border: 1px solid rgba(14, 165, 233, 0.12);
		font-weight: 500
	}

	.about-content p,
	.about-content li,
	.detail-item span,
	.detail-item p {
		color: #475569;
		line-height: 1.8;
		font-weight: 500
	}

	.detail-item strong {
		color: #1e293b;
		font-weight: 700
	}

	.detail-item {
	    display: flex;
	    align-items: flex-start;
		padding: .75rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	    flex-wrap: wrap
	}

	.contact-item:last-child,
	.detail-item:last-child {
	    border-bottom: none
	}

	.detail-item i {
	    font-size: 1.3rem;
	    color: var(--primary-color);
	    margin-left: .75rem;
	    width: 30px;
	    flex-shrink: 0
	}

	.detail-item strong {
	    margin-left: .5rem;
	    color: #1e293b;
	    font-size: clamp(.9rem, 2vw, 1rem);
	    font-weight: 700
	}

	.certificate-content p,
	.detail-item span,
	.skill-header {
	    font-size: clamp(.85rem, 2vw, .95rem)
	}

	.footer-about h4,
	.skill-category h3,
	.tech-stack h4 {
	    font-size: clamp(1.1rem, 2.5vw, 1.5rem)
	}

	.skill-category {
		background: #0f172a;
		padding: 1.5rem;
		border-radius: 16px;
		box-shadow: var(--shadow-md);
		border: 1px solid rgba(255, 255, 255, 0.04);
	    height: 100%;
	    margin-bottom: 1.5rem
	}

	.certificate-card:hover,
	.contact-card:hover,
	.project-card:hover,
	.skill-category:hover,
	.social-media-card:hover {
	    transform: translateY(-10px);
	    box-shadow: var(--shadow-lg)
	}

	.skill-category h3 {
		color: #e5e7eb;
	    font-weight: 700;
	    margin-bottom: 1.5rem
	}

	.game-over-screen i,
	.media-title i,
	.skill-percentage,
	.tech-icon i {
	    color: var(--primary-color)
	}

	.skill-item {
	    margin-bottom: 1.25rem
	}

	.skill-header {
	    display: flex;
	    justify-content: space-between;
	    margin-bottom: .5rem;
	    font-weight: 600;
	    flex-wrap: wrap;
	    gap: .5rem
	}

	.skill-bar {
		height: 10px;
		background: #1f2937;
	    border-radius: 10px;
	    width: 100%
	}

	.skill-progress {
	    height: 100%;
	    background: var(--gradient-1);
	    border-radius: 10px;
	    animation: 2s ease-out progressAnimation
	}

	.certificate-card,
	.tech-stack {
		background: #0f172a;
		border-radius: 16px;
		box-shadow: var(--shadow-md);
		border: 1px solid rgba(255, 255, 255, 0.04)
	}

	.project-content p,
	.certificate-content p,
	.skill-category p,
	.skill-item p,
	.contact-card p,
	.about-details p,
	.tech-stack p,
	.project-card li,
	.contact-info-text,
	.section-title .lead {
		color: var(--text-light);
	}

	.certificate-content p {
		color: #e2e8f0;
		opacity: 1;
		font-weight: 400;
		line-height: 1.8
	}

	.project-content h4,
	.certificate-content h4,
	.contact-card-content h4,
	.tech-stack h4,
	.skill-category h3 {
		color: #e5e7eb;
	}

	.certificate-content h4 {
		color: #f1f5f9;
		font-weight: 700
	}

	@keyframes progressAnimation {
	    from {
	        width: 0
	    }
	}

	.tech-stack {
	    padding: 2rem 1rem
	}

	.tech-icons {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    gap: 1.5rem;
	    padding: 1rem 0
	}

	.tech-icon {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: .5rem;
	    cursor: pointer;
	    min-width: 70px
	}

	.tech-icon i {
	    font-size: clamp(2rem, 5vw, 3rem)
	}

	.tech-icon span {
	    font-size: clamp(.75rem, 2vw, .9rem);
	    color: var(--text-light);
	    text-align: center
	}

	.tech-icon:hover {
	    transform: translateY(-10px)
	}

	.tech-icon:hover i {
	    color: var(--secondary-color);
	    transform: scale(1.2) rotate(360deg)
	}

	.certificate-card {
	    padding: 1.5rem;
	    position: relative;
	    overflow: hidden;
	    height: 100%;
	    margin-bottom: 1.5rem
	}

	.certificate-card::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 5px;
	    background: var(--gradient-1)
	}

	.certificate-icon {
	    width: 70px;
	    height: 70px;
	    background: var(--gradient-1);
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 1.75rem;
	    color: #fff;
	    margin-bottom: 1rem
	}

	.certificate-content h4,
	.project-content h4 {
		font-weight: 700;
		color: #e5e7eb;
	    margin-bottom: .5rem;
	    font-size: clamp(1rem, 2.5vw, 1.25rem)
	}

	.certificate-content p.text-muted {
		color: #cbd5e1 !important;
		font-weight: 400;
		opacity: 0.9;
	}

	.certificate-date {
		color: #7dd3fc;
	    font-weight: 600;
	    font-size: clamp(.9rem, 2vw, 1rem)
	}

	.certificate-badge {
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    font-size: 1.75rem;
	    color: var(--accent-color);
	    opacity: .2
	}

	.project-card {
		background: #0f172a;
		border-radius: 16px;
		box-shadow: var(--shadow-md);
		border: 1px solid rgba(255, 255, 255, 0.04);
	    height: 100%;
	    margin-bottom: 1.5rem
	}

	.project-image {
	    position: relative;
	    height: 220px;
	    width: 100%
	}

	.project-image img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover
	}

	.project-card:hover .project-image img,
	.social-media-card:hover .social-card-bg {
	    transform: scale(1.1)
	}

	.project-overlay {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
		background: rgba(14, 165, 233, .14);
		backdrop-filter: blur(4px);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 1rem;
	    opacity: 0;
	    transition: var(--transition)
	}

	.project-link,
	.project-media-btn {
		background: rgba(255, 255, 255, 0.08);
		color: #e0f2fe;
		border: 1px solid rgba(255, 255, 255, 0.08);
	    transition: var(--transition)
	}

	.project-link:hover,
	.project-media-btn:hover {
		background: rgba(14, 165, 233, 0.14);
		color: #ffffff;
		border-color: rgba(14, 165, 233, 0.35);
	}

	.game-toggle-btn:hover .btn-glow,
	.project-card:hover .project-overlay {
	    opacity: 1
	}

	.project-media-btn {
	    border: none;
	    border-radius: 50px;
	    padding: .75rem 1.5rem;
	    font-weight: 600;
	    font-size: 1rem;
	    cursor: pointer;
	    display: inline-flex;
	    align-items: center;
	    gap: .5rem;
		background: rgba(255, 255, 255, 0.08);
		color: #e0f2fe;
		border: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 4px 15px rgba(0, 0, 0, .2)
	}

	.project-media-btn:hover {
		background: rgba(14, 165, 233, 0.14);
		color: #e5e7eb;
		transform: scale(1.1);
		box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
		border-color: rgba(14, 165, 233, 0.35)
	}

	.project-media-btn i {
	    font-size: 1.2rem
	}

	.project-link {
	    width: 45px;
	    height: 45px;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 1.1rem
	}

	.media-modal,
	.media-modal-overlay,
	.tag::before {
	    top: 0;
	    width: 100%;
	    height: 100%
	}

	.project-link:hover {
	    background: var(--dark-color);
	    color: #fff;
	    transform: scale(1.2) rotate(360deg)
	}

	.project-content {
	    padding: 1.25rem
	}

	.project-tags {
	    display: flex;
	    gap: .5rem;
	    flex-wrap: wrap;
	    margin-bottom: 1rem
	}

	.tag {
	    background: var(--gradient-1);
	    color: #fff;
	    padding: .25rem .75rem;
	    border-radius: 20px;
	    font-size: clamp(.7rem, 1.5vw, .8rem);
	    font-weight: 500;
	    position: relative
	}

	.tag::before {
	    content: '';
	    position: absolute;
	    left: -100%;
	    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
	    transition: left .5s
	}

	.game-btn:hover::before,
	.project-card:hover .tag::before {
	    left: 100%
	}

	.project-content p {
	    color: var(--text-light);
	    margin: 0;
	    font-size: clamp(.85rem, 2vw, .95rem)
	}

	.media-modal {
	    position: fixed;
	    left: 0;
	    z-index: 2000;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    opacity: 0;
	    visibility: hidden;
	    transition: .3s;
	    padding: 2rem 1rem
	}

	.media-modal.active,
	.scroll-top.active {
	    opacity: 1;
	    visibility: visible
	}

	.media-modal-overlay {
	    position: absolute;
	    left: 0;
		background: rgba(13, 19, 38, .82);
		backdrop-filter: blur(10px);
	    cursor: pointer
	}

	.media-modal-content {
	    position: relative;
	    width: 90%;
	    max-width: 1100px;
	    max-height: 95vh;
		background: linear-gradient(145deg, #0d1326 0%, #0f172a 45%, #0b1021 100%);
	    border-radius: 20px;
		box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
	    overflow: auto;
	    display: flex;
	    flex-direction: column;
	    animation: .4s ease-out modalSlideUp
	}

	.contact-form,
	.contact-info {
	    box-shadow: var(--shadow-md)
	}

	@keyframes modalSlideUp {
	    from {
	        transform: translateY(50px);
	        opacity: 0
	    }

	    to {
	        transform: translateY(0);
	        opacity: 1
	    }
	}

	.media-modal-close {
	    position: absolute;
	    top: 15px;
	    right: 15px;
	    width: 40px;
	    height: 40px;
	    background: rgba(255, 255, 255, .1);
	    border: none;
	    border-radius: 50%;
	    color: #fff;
	    font-size: 1.2rem;
	    cursor: pointer;
	    transition: var(--transition);
	    z-index: 10;
	    display: flex;
	    align-items: center;
	    justify-content: center
	}

	.media-modal-close:hover {
	    background: var(--gradient-1);
	    transform: rotate(90deg)
	}

	.media-container {
	    flex: 1;
	    display: flex;
	    flex-direction: column;
	    padding: 1rem;
	    min-height: 0;
	    overflow: auto
	}

	.image-wrapper,
	.video-wrapper {
	    position: relative;
	    border-radius: 15px;
	    min-height: 400px;
	    width: 100%;
	    display: flex;
	    height: auto
	}

	.video-wrapper {
	    align-items: center;
	    justify-content: center;
	    background: #000
	}

	.video-wrapper video {
	    width: 100%;
	    height: auto;
	    max-height: 85vh;
	    object-fit: contain
	}

	.image-wrapper {
	    align-items: center;
	    justify-content: center;
	    background: #111
	}

	.image-wrapper img {
	    width: auto;
	    height: auto;
	    max-width: 100%;
	    max-height: 85vh;
	    object-fit: contain;
	    transition: transform .3s;
	    cursor: grab
	}

	.contact-card,
	.contact-form .form-control,
	.footer-links ul li a,
	.footer-social a,
	.image-control-btn,
	.scroll-top,
	.tech-icon img {
	    transition: var(--transition)
	}

	.image-wrapper img.zoomed {
	    cursor: move;
	    max-width: none;
	    max-height: none
	}

	.image-controls {
	    position: absolute;
	    bottom: 15px;
	    left: 50%;
	    transform: translateX(-50%);
	    background: rgba(0, 0, 0, .6);
	    border-radius: 50px;
	    padding: .5rem;
	    display: flex;
	    gap: .5rem;
	    z-index: 5
	}

	.image-control-btn {
	    width: 40px;
	    height: 40px;
	    background: var(--gradient-1);
	    border: none;
	    border-radius: 50%;
	    color: #fff;
	    cursor: pointer
	}

	.image-control-btn:hover {
	    transform: scale(1.1);
	    box-shadow: 0 0 10px rgba(102, 126, 234, .5)
	}

	.coming-soon-card:hover,
	.footer-social a:hover,
	.scroll-top:hover {
	    transform: translateY(-5px)
	}

	.media-info {
	    padding: 1rem;
	    background: rgba(0, 0, 0, .3);
	    border-top: 1px solid rgba(102, 126, 234, .2);
	    flex-shrink: 0
	}

	.media-title {
	    color: #fff;
	    font-size: 1.2rem;
	    font-weight: 600;
	    display: flex;
	    align-items: center;
	    gap: .75rem
	}

	.contact-info {
	    background: #fff;
	    padding: 1.5rem;
	    border-radius: 15px;
	    height: 100%;
	    margin-bottom: 1.5rem
	}

	.contact-icon,
	.scroll-top {
	    width: 45px;
	    height: 45px;
	    font-size: 1.1rem
	}

	.contact-item {
	    display: flex;
	    align-items: flex-start;
	    gap: 1rem;
	    padding: 1.25rem 0;
	    border-bottom: 1px solid #eee
	}

	.contact-icon {
	    background: var(--gradient-1);
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #fff;
	    flex-shrink: 0
	}

	.contact-item h5 {
	    font-weight: 700;
	    color: var(--dark-color);
	    margin-bottom: .25rem;
	    font-size: clamp(.95rem, 2vw, 1.1rem)
	}

	.contact-item p {
	    color: var(--text-light);
	    margin: 0;
	    font-size: clamp(.85rem, 2vw, .95rem);
	    word-break: break-word
	}

	.contact-form {
	    background: #fff;
	    padding: 1.5rem;
	    border-radius: 15px
	}

	.contact-form .form-control {
	    padding: .75rem 1.25rem;
	    border: 2px solid #e9ecef;
	    border-radius: 10px;
	    font-size: clamp(.85rem, 2vw, .95rem)
	}

	.contact-form .form-control:focus {
	    border-color: var(--primary-color);
	    box-shadow: 0 0 0 .2rem rgba(102, 126, 234, .25)
	}

	.contact-form textarea {
	    resize: vertical;
	    min-height: 120px
	}

	.contact-form .btn {
	    width: 100%;
	    padding: .75rem;
	    font-size: clamp(.9rem, 2vw, 1rem)
	}

	.footer-about p,
	.footer-links ul li a,
	.newsletter-form .form-control {
	    font-size: clamp(.85rem, 2vw, .95rem)
	}

	.footer {
	    background: linear-gradient(135deg, #1a1a2e 0, #16213e 100%);
	    color: #fff;
	    padding: 3rem 0 1.5rem;
	    margin-top: 3rem
	}

	.footer-about p {
	    color: rgba(255, 255, 255, .7)
	}

	.footer-social {
	    display: flex;
	    gap: .75rem;
	    margin-top: 1rem;
	    flex-wrap: wrap
	}

	.footer-social a {
	    width: 40px;
	    height: 40px;
	    background: rgba(255, 255, 255, .1);
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #fff
	}

	.footer-bottom,
	.footer-links ul li a,
	.footer-newsletter p {
	    color: rgba(255, 255, 255, .7)
	}

	.footer-social a:hover {
	    background: var(--gradient-1)
	}

	.footer-game,
	.footer-links,
	.footer-newsletter {
	    margin-bottom: 2rem
	}

	.footer-game h5,
	.footer-links h5,
	.footer-newsletter h5 {
	    font-weight: 700;
	    margin-bottom: 1rem;
	    font-size: clamp(1rem, 2vw, 1.25rem)
	}

	.footer-links ul {
	    list-style: none;
	    padding: 0
	}

	.footer-links ul li {
	    margin-bottom: .75rem
	}

	.footer-links ul li a {
	    text-decoration: none
	}

	.footer-links ul li a:hover {
	    color: #fff;
	    padding-right: 5px
	}

	.footer-newsletter p {
	    font-size: clamp(.8rem, 2vw, .9rem)
	}

	.newsletter-form .form-control {
	    background: rgba(255, 255, 255, .1);
	    border: 1px solid rgba(255, 255, 255, .2);
	    color: #fff;
	    border-radius: 50px 0 0 50px
	}

	.newsletter-form .form-control::placeholder {
	    color: rgba(255, 255, 255, .5)
	}

	.newsletter-form .form-control:focus {
	    background: rgba(255, 255, 255, .15);
	    border-color: var(--primary-color);
	    color: #fff
	}

	.newsletter-form .btn {
	    border-radius: 0 50px 50px 0;
	    padding: .5rem 1rem
	}

	.footer-divider {
	    border-color: rgba(255, 255, 255, .1);
	    margin: 2rem 0 1.5rem
	}

	.footer-bottom p {
	    font-size: clamp(.8rem, 2vw, .9rem);
	    margin-bottom: .5rem
	}

	.scroll-top {
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	    background: var(--gradient-1);
	    color: #fff;
	    border: none;
	    border-radius: 50%;
	    cursor: pointer;
	    opacity: 0;
	    visibility: hidden;
	    z-index: 1000;
	    box-shadow: var(--shadow-lg)
	}

	@media (min-width:1200px) {
	    .container {
	        max-width: 1140px
	    }

	    .floating-elements {
	        display: block
	    }
	}

	@media (min-width:992px) and (max-width:1199px) {
	    .container {
	        max-width: 960px
	    }

	    .floating-elements {
	        display: block
	    }

	    .float-element {
	        width: 45px;
	        height: 45px;
	        font-size: 1.2rem
	    }
	}

	@media (min-width:768px) and (max-width:991px) {
	    .hero-section {
	        min-height: auto;
	        padding: 100px 0 60px
	    }

	    .detail-item,
	    .hero-buttons,
	    .social-links {
	        justify-content: center
	    }

	    .image-overlay-element {
	        width: 120px;
	        height: 120px;
	        bottom: -15px;
	        right: -15px
	    }

	    .experience-badge {
	        width: 100px;
	        height: 100px;
	        top: -10px;
	        left: -10px
	    }

	    .about-content {
	        text-align: center;
	        margin-top: 2rem
	    }

	    .tech-icons {
	        gap: 1.25rem
	    }
	}

	@media (min-width:576px) and (max-width:767px) {

	    .about-content,
	    .detail-item {
	        text-align: center
	    }

	    .hero-section {
	        min-height: auto;
	        padding: 90px 0 50px
	    }

	    .hero-buttons {
	        justify-content: center;
	        flex-direction: column;
	        align-items: stretch
	    }

	    .hero-buttons .btn {
	        width: 100%;
	        max-width: 300px;
	        margin: 0 auto
	    }

	    .social-links {
	        justify-content: center;
	        margin: 1.5rem auto
	    }

	    .code-animation {
	        padding: 1rem;
	        font-size: .75rem
	    }

	    .code-animation pre {
	        font-size: .75rem;
	        line-height: 1.4
	    }

	    .image-overlay-element {
	        width: 100px;
	        height: 100px;
	        bottom: -10px;
	        right: -10px
	    }

	    .experience-badge {
	        width: 90px;
	        height: 90px;
	        top: -10px;
	        left: -10px
	    }

	    .detail-item {
	        flex-direction: column;
	        align-items: center
	    }

	    .detail-item i {
	        margin: 0 0 .5rem
	    }
	}

	@media (max-width:575px) {

	    .about-content,
	    .footer,
	    .footer-links ul,
	    .hero-content {
	        text-align: center
	    }

	    body {
	        font-size: 14px
	    }

	    .navbar {
	        padding: .5rem 0
	    }

	    .navbar-brand {
	        font-size: 1.1rem
	    }

	    .navbar-brand i {
	        margin-left: .3rem
	    }

	    .hero-section {
	        min-height: auto;
	        padding: 80px 0 40px
	    }

	    .hero-buttons {
	        flex-direction: column;
	        align-items: stretch;
	        gap: .5rem
	    }

	    .hero-buttons .btn {
	        width: 100%;
	        padding: .65rem 1.25rem
	    }

	    .social-links {
	        justify-content: center;
	        margin: 1.5rem auto 0
	    }

	    .social-icon {
	        width: 40px;
	        height: 40px;
	        font-size: 1rem
	    }

	    .code-animation {
	        padding: .75rem;
	        margin-top: 2rem
	    }

	    .code-animation pre {
	        font-size: .7rem;
	        line-height: 1.5
	    }

	    .code-animation code {
	        font-size: .7rem
	    }

	    .scroll-indicator {
	        display: none
	    }

	    .section-title {
	        margin-bottom: 2rem !important
	    }

	    .about-image-container {
	        max-width: 90%;
	        margin: 0 auto 2rem
	    }

	    .image-overlay-element {
	        width: 80px;
	        height: 80px;
	        bottom: -10px;
	        right: -10px
	    }

	    .experience-badge {
	        width: 80px;
	        height: 80px;
	        top: -10px;
	        left: -10px
	    }

	    .about-content {
	        padding: .5rem
	    }

	    .contact-item,
	    .detail-item {
	        flex-direction: column;
	        align-items: center;
	        text-align: center;
	        padding: 1rem 0
	    }

	    .detail-item i {
	        margin: 0 0 .5rem
	    }

	    .detail-item div {
	        display: flex;
	        flex-direction: column;
	        align-items: center
	    }

	    .certificate-card,
	    .contact-form,
	    .contact-info,
	    .skill-category {
	        padding: 1.25rem
	    }

	    .tech-icons {
	        gap: 1rem
	    }

	    .tech-icon {
	        min-width: 60px
	    }

	    .certificate-icon {
	        width: 60px;
	        height: 60px;
	        font-size: 1.5rem
	    }

	    .project-image {
	        height: 180px
	    }

	    .project-content {
	        padding: 1rem
	    }

	    .footer {
	        padding: 2rem 0 1rem
	    }

	    .footer-social {
	        justify-content: center
	    }

	    .footer-bottom .row>div {
	        text-align: center !important;
	        margin-top: .5rem
	    }

	    .scroll-top {
	        width: 40px;
	        height: 40px;
	        bottom: 15px;
	        right: 15px;
	        font-size: 1rem
	    }
	}

	@media (max-width:374px) {
	    .hero-section h1 {
	        font-size: 1.5rem !important
	    }

	    .hero-section h2 {
	        font-size: 1.15rem !important
	    }

	    .hero-buttons .btn {
	        padding: .6rem 1rem;
	        font-size: .85rem
	    }

	    .social-icon {
	        width: 38px;
	        height: 38px;
	        font-size: .95rem
	    }

	    .image-overlay-element {
	        width: 60px;
	        height: 60px
	    }

	    .experience-badge {
	        width: 70px;
	        height: 70px
	    }

	    .badge-content h3 {
	        font-size: 1.75rem !important
	    }

	    .badge-content p {
	        font-size: .7rem !important
	    }

	    .project-image {
	        height: 160px
	    }

	    .scroll-top {
	        width: 38px;
	        height: 38px;
	        bottom: 10px;
	        right: 10px
	    }
	}

	@media (max-height:500px) and (orientation:landscape) {
	    .hero-section {
	        min-height: auto;
	        padding: 100px 0 40px
	    }

	    .scroll-indicator {
	        display: none
	    }
	}

	@media print {

	    .contact-form,
	    .floating-elements,
	    .footer-newsletter,
	    .navbar,
	    .particles-bg,
	    .scroll-top {
	        display: none !important
	    }

	    body {
	        font-size: 12pt
	    }

	    .section {
	        page-break-inside: avoid
	    }

	    a {
	        text-decoration: underline
	    }
	}

	.tech-icon img {
	    width: clamp(40px, 10vw, 50px);
	    height: clamp(40px, 10vw, 50px);
	    object-fit: contain;
	    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1))
	}

	.tech-icon:hover img {
	    transform: scale(1.15);
	    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, .4))
	}

	.contact-card {
		background: #0f172a;
		border-radius: 20px;
		padding: 2rem;
		box-shadow: var(--shadow-md);
		border: 1px solid rgba(255, 255, 255, 0.04);
	    position: relative;
	    overflow: hidden;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    text-align: center
	}

	.card-glow,
	.email-card .contact-card-icon {
	    background: var(--gradient-1)
	}

	.card-glow {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    transition: opacity .3s;
	    pointer-events: none
	}

	.contact-card-btn,
	.social-media-card {
	    text-decoration: none;
	    transition: var(--transition)
	}

	.contact-card:hover .card-glow {
	    opacity: .1
	}

	.contact-card-icon {
	    width: 80px;
	    height: 80px;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 2rem;
	    color: #fff;
	    margin-bottom: 1.5rem;
	    position: relative;
	    animation: 2s ease-in-out infinite pulse
	}

	@keyframes pulse {

	    0%,
	    100% {
	        transform: scale(1)
	    }

	    50% {
	        transform: scale(1.05)
	    }
	}

	.high-score-display,
	.phone-card .contact-card-icon {
	    background: var(--gradient-2)
	}

	.location-card .contact-card-icon {
	    background: var(--gradient-3)
	}

	.contact-card-content {
	    flex: 1;
	    display: flex;
	    flex-direction: column;
	    align-items: center
	}

	.contact-card-content h4 {
	    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	    font-weight: 800;
		color: #1e293b;
	    margin-bottom: .5rem;
		text-shadow: none
	}

	.contact-info-text {
	    font-size: clamp(.9rem, 2vw, 1rem);
	    color: #475569;
	    margin-bottom: 1.5rem;
	    word-break: break-word;
	    font-weight: 500
	}

	.contact-card-btn {
	    display: inline-flex;
	    align-items: center;
	    gap: .5rem;
	    padding: .75rem 1.5rem;
	    background: var(--gradient-1);
		color: #f8fafc;
	    border-radius: 50px;
	    font-weight: 600;
	    box-shadow: 0 4px 15px rgba(102, 126, 234, .3)
	}

	.contact-card-btn:hover {
	    transform: translateY(-3px);
		box-shadow: 0 6px 20px rgba(102, 126, 234, .5);
		color: #f8fafc
	}

	.phone-card .contact-card-btn {
	    background: var(--gradient-2);
	    box-shadow: 0 4px 15px rgba(240, 147, 251, .3)
	}

	.phone-card .contact-card-btn:hover {
	    box-shadow: 0 6px 20px rgba(240, 147, 251, .5)
	}

	.location-card .contact-card-btn {
	    background: var(--gradient-3);
	    box-shadow: 0 4px 15px rgba(79, 172, 254, .3)
	}

	.location-card .contact-card-btn:hover {
	    box-shadow: 0 6px 20px rgba(79, 172, 254, .5)
	}

	.social-media-section {
	    background: #fff;
	    border-radius: 20px;
	    padding: 2.5rem 2rem;
	    box-shadow: var(--shadow-md);
	    margin-bottom: 2rem
	}

	.social-media-section h3 {
	    font-size: clamp(1.25rem, 3vw, 1.75rem);
	    font-weight: 700;
	    color: var(--dark-color);
	    background: var(--gradient-1);
	    -webkit-background-clip: text;
	    background-clip: text
	}

	.social-cards-container {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	    gap: 1.5rem;
	    margin-top: 1.5rem
	}

	.social-media-card {
	    position: relative;
	    padding: 2rem 1rem;
	    border-radius: 15px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: .75rem;
	    color: #fff;
	    overflow: hidden;
	    box-shadow: var(--shadow-md)
	}

	.social-card-bg,
	.social-card-hover {
	    position: absolute;
	    width: 100%;
	    left: 0
	}

	.social-card-bg {
	    top: 0;
	    height: 100%;
	    transition: transform .3s;
	    z-index: 1
	}

	.social-media-card i {
	    font-size: clamp(2rem, 5vw, 2.5rem);
	    position: relative;
	    z-index: 2;
	    transition: transform .3s
	}

	.social-media-card span {
	    font-size: clamp(.9rem, 2vw, 1rem);
	    font-weight: 600;
	    position: relative;
	    z-index: 2
	}

	.social-card-hover {
	    bottom: -50px;
	    padding: 1rem;
	    background: rgba(0, 0, 0, .9);
	    text-align: center;
	    transition: bottom .3s;
	    z-index: 3
	}

	.social-card-hover p {
	    margin: 0;
	    font-size: .85rem;
	    color: #fff
	}

	.social-media-card:hover i {
	    transform: scale(1.2) rotate(360deg)
	}

	.social-media-card:hover .social-card-hover {
	    bottom: 0
	}

	.github-card .social-card-bg {
	    background: linear-gradient(135deg, #24292e 0, #000 100%)
	}

	.linkedin-card .social-card-bg {
	    background: linear-gradient(135deg, #0077b5 0, #00a0dc 100%)
	}

	.telegram-card .social-card-bg {
	    background: linear-gradient(135deg, #08c 0, #00bfff 100%)
	}

	.instagram-card .social-card-bg {
	    background: linear-gradient(135deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
	}

	.twitter-card .social-card-bg {
	    background: linear-gradient(135deg, #1da1f2 0, #0d8bd9 100%)
	}

	.youtube-card .social-card-bg {
	    background: linear-gradient(135deg, red 0, #c00 100%)
	}

	.quick-contact-info {
	    background: #fff;
	    border-radius: 20px;
	    padding: 2rem;
	    box-shadow: var(--shadow-md)
	}

	.availability-status,
	.response-time {
	    padding: 1.5rem
	}

	.availability-status h5,
	.response-time h5 {
	    font-size: clamp(1rem, 2.5vw, 1.25rem);
	    font-weight: 700;
	    color: var(--dark-color);
	    margin-bottom: .5rem
	}

	.availability-status p,
	.response-time p {
	    font-size: clamp(.85rem, 2vw, .95rem);
	    color: var(--text-light);
	    margin: 0
	}

	.status-indicator {
	    width: 15px;
	    height: 15px;
	    background: #10b981;
	    border-radius: 50%;
	    display: inline-block;
	    margin-left: .5rem;
	    animation: 2s ease-in-out infinite blink-status;
	    box-shadow: 0 0 10px #10b981
	}

	.game-btn,
	.game-controls {
	    display: flex;
	    display: flex
	}

	@keyframes blink-status {

	    0%,
	    100% {
	        opacity: 1
	    }

	    50% {
	        opacity: .5
	    }
	}

	.response-time i {
	    font-size: 2rem;
	    color: var(--primary-color);
	    margin-bottom: 1rem
	}

	@media (max-width:768px) {
	    .custom-cursor {
	        display: none
	    }

	    .media-modal {
	        padding: 1rem .5rem
	    }

	    .media-modal-content {
	        width: 95%;
	        max-height: 90vh
	    }

	    .image-wrapper img,
	    .video-wrapper video {
	        max-height: 70vh
	    }

	    .media-title {
	        font-size: 1rem
	    }

	    .media-modal-close {
	        top: 10px;
	        right: 10px
	    }

	    .contact-card,
	    .quick-contact-info {
	        padding: 1.5rem
	    }

	    .contact-card-icon {
	        width: 60px;
	        height: 60px;
	        font-size: 1.5rem;
	        margin-bottom: 1rem
	    }

	    .social-cards-container {
	        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	        gap: 1rem
	    }

	    .social-media-card {
	        padding: 1.5rem 1rem
	    }

	    .social-media-section {
	        padding: 2rem 1.5rem
	    }
	}

	.coming-soon-card {
	    cursor: not-allowed;
	    opacity: .7;
	    position: relative
	}

	.coming-soon-badge {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    padding: .75rem;
	    background: rgba(0, 0, 0, .95);
	    text-align: center;
	    z-index: 3;
	    border-bottom-left-radius: 15px;
	    border-bottom-right-radius: 15px
	}

	.game-break-section,
	.game-btn,
	.game-toggle-btn,
	.snake-game-container {
	    position: relative;
	    overflow: hidden
	}

	.coming-soon-badge span {
	    font-size: .9rem;
	    font-weight: 700;
	    color: #fff;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
	    -webkit-background-clip: text;
	    background-clip: text;
	    animation: 2s ease-in-out infinite pulse-glow
	}

	@keyframes pulse-glow {

	    0%,
	    100% {
	        opacity: 1
	    }

	    50% {
	        opacity: .6
	    }
	}

	.footer-game p {
	    color: rgba(255, 255, 255, .7);
	    font-size: clamp(.8rem, 2vw, .9rem);
	    margin-bottom: 1rem
	}

	.snake-game-container {
	    background: rgba(0, 0, 0, .3);
	    box-shadow: 0 8px 32px rgba(102, 126, 234, .2)
	}

	.arrow-btn,
	.game-btn,
	.high-score-display,
	.score-display {
	    box-shadow: 0 4px 15px rgba(102, 126, 234, .4);
	    background: var(--gradient-1)
	}

	.game-header {
	    display: flex;
	    justify-content: space-between;
	    gap: .5rem;
	    flex-wrap: wrap
	}

	.high-score-display,
	.score-display {
	    display: flex;
	    align-items: center;
	    gap: .5rem;
	    animation: 2s ease-in-out infinite glow-pulse
	}

	@keyframes glow-pulse {

	    0%,
	    100% {
	        box-shadow: 0 4px 15px rgba(102, 126, 234, .4)
	    }

	    50% {
	        box-shadow: 0 4px 25px rgba(102, 126, 234, .7)
	    }
	}

	#snakeCanvas:hover {
	    box-shadow: inset 0 0 40px rgba(102, 126, 234, .3), 0 0 30px rgba(102, 126, 234, .5);
	    border-color: rgba(102, 126, 234, .7);
	    box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 0 45px rgba(102, 126, 234, .6)
	}

	.game-controls {
	    display: flex;
	    justify-content: center;
	    gap: .5rem;
	    margin-top: 1rem;
	    flex-wrap: wrap
	}

	.game-btn {
	    display: flex;
	    align-items: center;
	    gap: .5rem
	}

	.game-btn:hover:not(:disabled) {
	    transform: translateY(-3px);
	    box-shadow: 0 6px 20px rgba(102, 126, 234, .6)
	}

	.game-btn:disabled {
	    opacity: .5
	}

	.mobile-controls {
	    flex-direction: column;
	    align-items: center;
	    gap: .5rem
	}

	.arrow-btn,
	.horizontal-btns {
	    align-items: center;
	    display: flex
	}

	.horizontal-btns {
	    gap: .5rem
	}

	.arrow-btn {
	    justify-content: center
	}

	.arrow-btn:active {
	    box-shadow: 0 2px 10px rgba(102, 126, 234, .6)
	}

	.arrow-btn:hover {
	    background: var(--gradient-2);
	    box-shadow: 0 6px 20px rgba(102, 126, 234, .7)
	}

	.game-over-screen {
	    box-shadow: 0 0 40px rgba(102, 126, 234, .6)
	}

	@keyframes bounce-in {
	    0% {
	        transform: translate(-50%, -50%) scale(.5);
	        opacity: 0
	    }

	    50% {
	        transform: translate(-50%, -50%) scale(1.1)
	    }

	    100% {
	        transform: translate(-50%, -50%) scale(1);
	        opacity: 1
	    }
	}

	@keyframes rotate-pulse {

	    0%,
	    100% {
	        transform: rotate(0) scale(1)
	    }

	    25% {
	        transform: rotate(-15deg) scale(1.1)
	    }

	    75% {
	        transform: rotate(15deg) scale(1.1)
	    }
	}

	.game-over-screen h3 {
	    background: var(--gradient-1);
	    -webkit-background-clip: text
	}

	.play-again-btn {
	    background: var(--gradient-2);
	    display: inline-flex;
	    align-items: center;
	    gap: .75rem;
	    box-shadow: 0 6px 20px rgba(240, 147, 251, .5)
	}

	.play-again-btn:hover {
	    transform: translateY(-3px);
	    box-shadow: 0 8px 30px rgba(240, 147, 251, .7)
	}

	@keyframes spin {
	    from {
	        transform: rotate(0)
	    }

	    to {
	        transform: rotate(360deg)
	    }
	}

	@media (max-width:768px) {
	    .mobile-controls {
	        display: flex
	    }

	    .snake-game-container {
	        padding: .75rem
	    }

	    .game-header {
	        flex-direction: column;
	        gap: .5rem
	    }

	    .high-score-display,
	    .score-display {
	        width: 100%;
	        justify-content: center
	    }

	    #snakeCanvas {
	        max-height: 300px
	    }
	}

	@media (max-width:480px) {
	    .social-cards-container {
	        grid-template-columns: repeat(2, 1fr);
	        gap: .75rem
	    }

	    .social-media-card {
	        padding: 1.25rem .75rem
	    }

	    .contact-card-btn {
	        padding: .6rem 1.25rem;
	        font-size: .85rem
	    }

	    .footer-game {
	        max-width: 100%
	    }

	    .snake-game-container {
	        padding: .5rem
	    }

	    .game-controls {
	        gap: .4rem
	    }

	    .game-btn {
	        padding: .5rem .8rem;
	        font-size: .75rem
	    }

	    .arrow-btn {
	        width: 45px;
	        height: 45px;
	        font-size: 1.1rem
	    }

	    .game-over-screen {
	        padding: 1.5rem 1rem
	    }

	    #snakeCanvas {
	        max-height: 250px
	    }
	}

	@media (max-width:360px) {
	    .arrow-btn {
	        width: 40px;
	        height: 40px;
	        font-size: 1rem
	    }

	    .game-btn {
	        padding: .4rem .6rem;
	        font-size: .7rem
	    }

	    #snakeCanvas {
	        max-height: 200px
	    }
	}

	.game-break-section {
	    padding: 4rem 0 3rem;
	    background: 0 0
	}

	.game-toggle-btn {
	    background: linear-gradient(135deg, rgba(102, 126, 234, .08), rgba(118, 75, 162, .08));
	    border: 2px solid rgba(102, 126, 234, .25);
	    border-radius: 60px;
	    padding: 1.2rem 3rem;
	    display: inline-flex;
	    align-items: center;
	    gap: 1.25rem;
	    cursor: pointer;
	    transition: .4s cubic-bezier(.175, .885, .32, 1.275);
	    box-shadow: 0 4px 20px rgba(102, 126, 234, .15)
	}

	.game-toggle-btn:hover {
	    transform: translateY(-5px);
	    border-color: rgba(102, 126, 234, .5);
	    box-shadow: 0 8px 35px rgba(102, 126, 234, .3);
	    background: linear-gradient(135deg, rgba(102, 126, 234, .12), rgba(118, 75, 162, .12))
	}

	.game-over-screen i,
	.game-toggle-btn .btn-icon {
	    background: var(--gradient-1);
	    -webkit-text-fill-color: transparent
	}

	.game-toggle-btn:active {
	    transform: translateY(-2px) scale(.98)
	}

	.game-over-screen,
	.game-toggle-btn .btn-glow {
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    opacity: 0
	}

	.game-toggle-btn .btn-icon {
	    font-size: 2.2rem;
	    -webkit-background-clip: text;
	    background-clip: text;
	    animation: 2.5s ease-in-out infinite pulse-icon
	}

	@keyframes pulse-icon {

	    0%,
	    100% {
	        transform: scale(1)
	    }

	    50% {
	        transform: scale(1.08)
	    }
	}

	.game-toggle-btn .btn-text {
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start;
	    gap: .25rem
	}

	.game-toggle-btn .btn-main-text {
	    font-size: 1.15rem;
	    font-weight: 700;
	    color: #667eea;
	    line-height: 1.2
	}

	.game-toggle-btn .btn-sub-text {
	    font-size: .9rem;
	    color: rgba(102, 126, 234, .7);
	    font-weight: 500
	}

	.game-toggle-btn .btn-arrow {
	    font-size: 1.3rem;
	    color: #667eea;
	    transition: transform .3s
	}

	.game-toggle-btn:hover .btn-arrow {
	    animation: 1s ease-in-out infinite bounce-arrow
	}

	@keyframes bounce-arrow {

	    0%,
	    100% {
	        transform: translateY(0)
	    }

	    50% {
	        transform: translateY(6px)
	    }
	}

	.game-toggle-btn .btn-glow {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background: radial-gradient(circle, rgba(102, 126, 234, .25) 0, transparent 70%);
	    transition: opacity .4s
	}

	.game-toggle-btn.active .btn-arrow {
	    transform: rotate(180deg)
	}

	.game-container-wrapper {
	    max-height: 0;
	    opacity: 0;
	    overflow: hidden;
	    transition: .7s cubic-bezier(.68, -.55, .265, 1.55);
	    margin-top: 0
	}

	.game-container-wrapper.show {
	    max-height: 1200px;
	    opacity: 1;
	    margin-top: 3rem;
	    animation: .7s ease-out slideDown
	}

	@keyframes slideDown {
	    from {
	        transform: translateY(-40px);
	        opacity: 0
	    }

	    to {
	        transform: translateY(0);
	        opacity: 1
	    }
	}

	.snake-game-container {
	    background: linear-gradient(135deg, rgba(26, 26, 46, .97), rgba(22, 33, 62, .97));
	    border-radius: 25px;
	    padding: 2rem;
	    backdrop-filter: blur(25px);
	    border: 2px solid rgba(102, 126, 234, .25);
	    box-shadow: 0 15px 50px rgba(102, 126, 234, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
	    max-width: 600px;
	    margin: 0 auto;
	    touch-action: none;
	    -webkit-user-select: none;
	    user-select: none
	}

	.snake-game-container::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 2px;
	    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, .6), transparent)
	}

	.snake-game-container::after {
	    content: '';
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    height: 2px;
	    background: linear-gradient(90deg, transparent, rgba(118, 75, 162, .6), transparent)
	}

	.game-header {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 1rem;
	    margin-bottom: 1.5rem
	}

	.high-score-display,
	.score-display {
	    background: linear-gradient(135deg, rgba(102, 126, 234, .25), rgba(118, 75, 162, .25));
	    padding: .85rem 1.5rem;
	    border-radius: 15px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: .75rem;
	    font-weight: 700;
	    font-size: 1rem;
	    border: 1.5px solid rgba(102, 126, 234, .4);
	    color: #fff;
	    backdrop-filter: blur(10px);
	    box-shadow: 0 4px 20px rgba(102, 126, 234, .35);
	    transition: .3s;
	    min-height: 50px
	}

	.arrow-btn,
	.game-btn {
	    background: linear-gradient(135deg, #667eea, #764ba2);
	    transition: .3s;
	    box-shadow: 0 4px 20px rgba(102, 126, 234, .45)
	}

	.high-score-display:hover,
	.score-display:hover {
	    transform: translateY(-3px);
	    box-shadow: 0 6px 25px rgba(102, 126, 234, .5)
	}

	.high-score-display i,
	.score-display i {
	    color: gold;
	    font-size: 1.3rem;
	    filter: drop-shadow(0 0 8px #ffd700);
	    animation: 2s ease-in-out infinite sparkle
	}

	@keyframes sparkle {

	    0%,
	    100% {
	        transform: scale(1);
	        opacity: 1
	    }

	    50% {
	        transform: scale(1.15);
	        opacity: .85
	    }
	}

	#snakeCanvas {
	    height: auto;
	    aspect-ratio: 1;
	    background: rgba(26, 26, 46, .8);
	    box-shadow: inset 0 0 30px rgba(102, 126, 234, .2), 0 0 20px rgba(102, 126, 234, .3);
	    width: 100%;
	    max-width: 100%;
	    aspect-ratio: 1/1;
	    background: linear-gradient(135deg, #1a1a2e 0, #16213e 100%);
	    border-radius: 18px;
	    border: 3px solid rgba(102, 126, 234, .45);
	    box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 0 35px rgba(102, 126, 234, .4);
	    display: block;
	    cursor: crosshair;
	    transition: .3s;
	    margin-bottom: 1.5rem
	}

	.game-controls {
	    justify-content: center;
	    gap: .85rem;
	    margin-bottom: 1rem;
	    flex-wrap: wrap
	}

	.game-btn {
	    padding: .8rem 1.8rem;
	    color: #fff;
	    border: none;
	    border-radius: 15px;
	    font-weight: 700;
	    cursor: pointer;
	    align-items: center;
	    gap: .65rem;
	    font-size: .95rem;
	    text-transform: uppercase;
	    letter-spacing: .5px
	}

	.game-over-screen h3,
	.play-again-btn {
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    font-weight: 800
	}

	.game-btn::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: -100%;
	    width: 100%;
	    height: 100%;
	    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	    transition: left .6s
	}

	.game-btn:hover:not(:disabled) {
	    transform: translateY(-3px) scale(1.03);
	    box-shadow: 0 6px 30px rgba(102, 126, 234, .65)
	}

	.game-btn:active:not(:disabled) {
	    transform: translateY(-1px) scale(1.01)
	}

	.game-btn:disabled {
	    opacity: .45;
	    cursor: not-allowed;
	    transform: none
	}

	.game-btn i {
	    font-size: 1.1rem
	}

	.mobile-controls {
	    display: none;
	    margin-top: 1.25rem;
	    flex-direction: column;
	    align-items: center;
	    gap: .85rem
	}

	.horizontal-btns {
	    display: flex;
	    gap: .85rem;
	    align-items: center
	}

	.arrow-btn,
	.play-again-btn {
	    color: #fff;
	    align-items: center;
	    cursor: pointer
	}

	.arrow-btn {
	    width: 60px;
	    height: 60px;
	    border: 2px solid rgba(255, 255, 255, .25);
	    border-radius: 15px;
	    font-size: 1.5rem;
	    display: flex;
	    justify-content: center
	}

	.arrow-btn:active {
	    transform: scale(.92);
	    box-shadow: 0 2px 12px rgba(102, 126, 234, .65)
	}

	.arrow-btn:hover {
	    background: linear-gradient(135deg, #764ba2, #667eea);
	    transform: translateY(-3px);
	    box-shadow: 0 6px 25px rgba(102, 126, 234, .75)
	}

	.game-over-screen {
	    position: absolute;
	    background: rgba(0, 0, 0, .97);
	    padding: 2.5rem;
	    border-radius: 25px;
	    text-align: center;
	    visibility: hidden;
	    transition: .4s;
	    z-index: 10;
	    border: 2px solid rgba(102, 126, 234, .6);
	    box-shadow: 0 0 60px rgba(102, 126, 234, .8);
	    max-width: 90%;
	    backdrop-filter: blur(25px)
	}

	.game-over-screen.active {
	    opacity: 1;
	    visibility: visible;
	    animation: .6s cubic-bezier(.68, -.55, .265, 1.55) bounce-in
	}

	@keyframes bounce-in {
	    0% {
	        transform: translate(-50%, -50%) scale(.4);
	        opacity: 0
	    }

	    50% {
	        transform: translate(-50%, -50%) scale(1.08)
	    }

	    100% {
	        transform: translate(-50%, -50%) scale(1);
	        opacity: 1
	    }
	}

	.game-over-screen i {
	    font-size: 4.5rem;
	    -webkit-background-clip: text;
	    background-clip: text;
	    margin-bottom: 1.25rem;
	    animation: 2s ease-in-out infinite rotate-pulse
	}

	@keyframes rotate-pulse {

	    0%,
	    100% {
	        transform: rotate(0) scale(1)
	    }

	    25% {
	        transform: rotate(-12deg) scale(1.12)
	    }

	    75% {
	        transform: rotate(12deg) scale(1.12)
	    }
	}

	.game-over-screen h3 {
	    font-size: 2rem;
	    margin-bottom: 1rem;
	    background: var(--gradient-2);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    background-clip: text
	}

	.game-over-screen p {
	    font-size: 1.15rem;
	    margin-bottom: 1.75rem;
	    color: rgba(255, 255, 255, .95);
	    font-weight: 500
	}

	#finalScore {
	    font-size: 3.5rem;
	    font-weight: 800;
	    color: #10b981;
	    text-shadow: 0 0 40px rgba(16, 185, 129, .9);
	    display: block;
	    margin-top: .75rem;
	    animation: 1.5s ease-in-out infinite pulse-score
	}

	@keyframes pulse-score {

	    0%,
	    100% {
	        transform: scale(1)
	    }

	    50% {
	        transform: scale(1.08)
	    }
	}

	.play-again-btn {
	    padding: 1rem 3rem;
	    background: linear-gradient(135deg, #f093fb, #f5576c);
	    border: none;
	    border-radius: 60px;
	    font-size: 1.15rem;
	    transition: .3s;
	    display: inline-flex;
	    gap: .85rem;
	    box-shadow: 0 6px 30px rgba(240, 147, 251, .6)
	}

	.play-again-btn:hover {
	    transform: translateY(-4px) scale(1.05);
	    box-shadow: 0 10px 40px rgba(240, 147, 251, .8)
	}

	.play-again-btn i {
	    font-size: 1.4rem;
	    animation: 2s linear infinite spin-slow
	}

	@keyframes spin-slow {
	    from {
	        transform: rotate(0)
	    }

	    to {
	        transform: rotate(360deg)
	    }
	}

	@media (max-width:768px) {
	    .game-break-section {
	        padding: 3rem 0 2.5rem
	    }

	    .mobile-controls {
	        display: flex
	    }

	    .game-toggle-btn {
	        padding: 1rem 2.25rem;
	        gap: 1rem
	    }

	    .snake-game-container {
	        padding: 1.5rem;
	        max-width: 100%
	    }

	    .game-header {
	        grid-template-columns: 1fr;
	        gap: .75rem
	    }

	    .high-score-display,
	    .score-display {
	        width: 100%
	    }

	    #snakeCanvas {
	        width: 100% !important;
	        max-width: 100% !important;
	        height: auto !important;
	        aspect-ratio: 1/1 !important
	    }
	}

	@media (max-width:576px) {
	    .game-break-section {
	        padding: 2.5rem 0 2rem
	    }

	    .game-toggle-btn {
	        padding: .9rem 1.75rem
	    }

	    .snake-game-container {
	        padding: 1.25rem;
	        max-width: 100%;
	        width: 100%
	    }

	    #snakeCanvas {
	        width: 100% !important;
	        max-width: 100% !important;
	        height: auto !important;
	        aspect-ratio: 1/1 !important;
	        border-width: 2px
	    }

	    .game-btn {
	        padding: .7rem 1.4rem;
	        font-size: .85rem
	    }

	    .arrow-btn {
	        width: 52px;
	        height: 52px
	    }

	    .game-over-screen {
	        padding: 2rem 1.5rem;
	        max-width: 95%
	    }
	}

	@media (max-width:400px) {
	    .snake-game-container {
	        padding: 1rem;
	        width: 100%
	    }

	    #snakeCanvas {
	        width: 100% !important;
	        max-width: 100% !important;
	        height: auto !important;
	        aspect-ratio: 1/1 !important;
	        border-width: 2px
	    }

	    .arrow-btn {
	        width: 48px;
	        height: 48px
	    }

	    .game-over-screen {
	        padding: 1.5rem 1rem;
	        max-width: 92%
	    }
	}

	#snakeCanvas,
	.game-container-wrapper.show {
	    touch-action: none
	}

	.footer-thank-you {
	    margin-top: 1rem
	}

	.thank-you-card {
	    background: linear-gradient(135deg, rgba(102, 126, 234, .1), rgba(118, 75, 162, .1));
	    border: 2px solid rgba(102, 126, 234, .3);
	    border-radius: 25px;
	    padding: 3rem 2rem;
	    text-align: center;
	    position: relative;
	    overflow: hidden;
	    backdrop-filter: blur(10px);
	    box-shadow: 0 10px 40px rgba(102, 126, 234, .2);
	    transition: .4s
	}

	.thank-you-card:hover {
	    transform: translateY(-5px);
	    box-shadow: 0 15px 50px rgba(102, 126, 234, .35);
	    border-color: rgba(102, 126, 234, .5)
	}

	.thank-you-card::before {
	    content: '';
	    position: absolute;
	    top: -50%;
	    left: -50%;
	    width: 200%;
	    height: 200%;
	    background: linear-gradient(45deg, transparent, rgba(102, 126, 234, .1), transparent);
	    animation: 3s infinite shine
	}

	@keyframes shine {
	    0% {
	        transform: translateX(-100%) translateY(-100%) rotate(45deg)
	    }

	    100% {
	        transform: translateX(100%) translateY(100%) rotate(45deg)
	    }
	}

	.sparkle-container {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    pointer-events: none
	}

	.sparkle {
	    position: absolute;
	    color: gold;
	    animation: 2s ease-in-out infinite twinkle;
	    filter: drop-shadow(0 0 8px #ffd700)
	}

	.animated-wave,
	.thank-you-icon,
	.thank-you-text,
	.thank-you-title {
	    position: relative;
	    z-index: 1
	}

	.sparkle-1 {
	    top: 10%;
	    left: 15%;
	    font-size: 1.2rem;
	    animation-delay: 0s
	}

	.sparkle-2 {
	    top: 20%;
	    right: 10%;
	    font-size: .9rem;
	    animation-delay: .5s
	}

	.sparkle-3 {
	    bottom: 15%;
	    left: 10%;
	    font-size: 1rem;
	    animation-delay: 1s
	}

	.sparkle-4 {
	    top: 50%;
	    left: 5%;
	    font-size: 1.1rem;
	    color: #ff69b4;
	    filter: drop-shadow(0 0 8px #ff69b4);
	    animation-delay: 1.5s
	}

	.video-modal,
	.video-modal-overlay {
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%
	}

	.sparkle-5 {
	    bottom: 20%;
	    right: 15%;
	    font-size: 1.3rem;
	    color: #667eea;
	    filter: drop-shadow(0 0 10px #667eea);
	    animation-delay: .8s
	}

	@keyframes twinkle {

	    0%,
	    100% {
	        opacity: 0;
	        transform: scale(0) rotate(0)
	    }

	    50% {
	        opacity: 1;
	        transform: scale(1.2) rotate(180deg)
	    }
	}

	.thank-you-icon {
	    font-size: 4rem;
	    margin-bottom: 1.5rem
	}

	.thank-you-icon i {
	    background: var(--gradient-1);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    background-clip: text;
	    animation: 2s ease-in-out infinite bounce-icon;
	    display: inline-block;
	    filter: drop-shadow(0 0 20px rgba(102, 126, 234, .5))
	}

	@keyframes bounce-icon {

	    0%,
	    100% {
	        transform: translateY(0) scale(1)
	    }

	    50% {
	        transform: translateY(-15px) scale(1.1)
	    }
	}

	.thank-you-title {
	    font-size: 1.8rem;
	    font-weight: 800;
	    background: var(--gradient-2);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    background-clip: text;
	    margin-bottom: 1rem;
	    line-height: 1.4;
	    animation: 3s ease-in-out infinite glow-text
	}

	@keyframes glow-text {

	    0%,
	    100% {
	        filter: drop-shadow(0 0 10px rgba(102, 126, 234, .3))
	    }

	    50% {
	        filter: drop-shadow(0 0 20px rgba(102, 126, 234, .6))
	    }
	}

	.thank-you-text {
	    font-size: 1.2rem;
	    color: rgba(255, 255, 255, .85);
	    margin-bottom: 1.5rem;
	    font-weight: 600
	}

	.animated-wave {
	    font-size: 3rem;
	    display: inline-block;
	    animation: 1.5s ease-in-out infinite wave;
	    transform-origin: 70% 70%
	}

	@keyframes wave {

	    0%,
	    100% {
	        transform: rotate(0)
	    }

	    10%,
	    30%,
	    50%,
	    60% {
	        transform: rotate(14deg)
	    }

	    20%,
	    40% {
	        transform: rotate(-8deg)
	    }

	    70%,
	    80% {
	        transform: rotate(-4deg)
	    }

	    90% {
	        transform: rotate(10deg)
	    }
	}

	@media (max-width:991px) {
	    .thank-you-card {
	        padding: 2.5rem 1.5rem
	    }

	    .thank-you-icon {
	        font-size: 3.5rem
	    }

	    .thank-you-title {
	        font-size: 1.5rem
	    }

	    .thank-you-text {
	        font-size: 1.1rem
	    }

	    .animated-wave {
	        font-size: 2.5rem
	    }
	}

	@media (max-width:768px) {
	    .thank-you-card {
	        padding: 2rem 1.25rem;
	        margin-top: 1.5rem
	    }

	    .thank-you-icon {
	        font-size: 3rem
	    }

	    .thank-you-title {
	        font-size: 1.3rem
	    }

	    .thank-you-text {
	        font-size: 1rem
	    }

	    .animated-wave {
	        font-size: 2.2rem
	    }

	    .sparkle {
	        font-size: .8rem !important
	    }
	}

	@media (max-width:576px) {
	    .thank-you-card {
	        padding: 1.75rem 1rem
	    }

	    .thank-you-icon {
	        font-size: 2.5rem
	    }

	    .thank-you-title {
	        font-size: 1.15rem
	    }

	    .thank-you-text {
	        font-size: .95rem
	    }

	    .animated-wave {
	        font-size: 2rem
	    }
	}

	.video-modal {
	    position: fixed;
	    z-index: 10000;
	    display: none;
	    align-items: center;
	    justify-content: center
	}

	.video-modal.active {
	    display: flex;
	    animation: .4s ease-out modalFadeIn
	}

	@keyframes modalFadeIn {
	    from {
	        opacity: 0
	    }

	    to {
	        opacity: 1
	    }
	}

	.video-modal-overlay {
	    position: absolute;
	    background: rgba(0, 0, 0, .95);
	    backdrop-filter: blur(10px)
	}

	.video-modal-content {
	    position: relative;
	    z-index: 10001;
	    width: 90%;
	    max-width: 1200px;
	    animation: .5s cubic-bezier(.68, -.55, .265, 1.55) modalSlideUp
	}

	@keyframes modalSlideUp {
	    from {
	        transform: translateY(100px);
	        opacity: 0
	    }

	    to {
	        transform: translateY(0);
	        opacity: 1
	    }
	}

	.video-modal-close {
	    position: absolute;
	    top: -50px;
	    right: 0;
	    background: linear-gradient(135deg, #f093fb, #f5576c);
	    border: none;
	    width: 45px;
	    height: 45px;
	    border-radius: 50%;
	    color: #fff;
	    font-size: 1.3rem;
	    cursor: pointer;
	    transition: .3s;
	    box-shadow: 0 5px 20px rgba(240, 147, 251, .5);
	    z-index: 10002
	}

	.video-modal-close:hover {
	    transform: rotate(90deg) scale(1.1);
	    box-shadow: 0 8px 30px rgba(240, 147, 251, .8)
	}

	.video-player-wrapper {
	    background: linear-gradient(135deg, rgba)
	}