* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html {
		scroll-behavior: smooth;
	}
	body {
		font-family: Arial, Helvetica, sans-serif;
		background: #050a12;
		color: #f5f7fa;
	}
	.header
	{
		width:100%;
		height:78px;
		padding:0 7%;
		display:flex;
		align-items:center;
		justify-content:space-between;
		position:fixed;
		top:0;
		background: rgba(5, 10, 18, 0.82);
		border-bottom: 1px solid rgba(255, 255, 255, 0.82);
		backdrop-filter: blur(15px);
		z-index: 1000;
	}
	a 
	{
		text-decoration:none;
		color: inherit;
	}
	.code_logo
	{
		font-size:25px;
		font-weight:700;
	}
	.code_logo span
	{
		color:#20a9ff;
		margin-right:10px;
	}
	.code_logo b
	{
		background: linear-gradient(90deg, #20a9ff, #7357ff);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;				
	}
	.navbar
	{
		display:flex;
		gap:15px;				
	}
	.navbar a {			  
	  padding:8px 15px;
	  text-align: center;
	  text-transform: uppercase;
	  transition: 0.5s;
	  background-size: 200% auto;
	  color: white;
	  box-shadow: 0 0 10px #209cff;
	  border-radius: 10px;
	  outline: none;
	  border: none;
	}

	.navbar a:hover {
	   background-image: linear-gradient(to right, #525252 0%, #3d72b4 51%, #525252 100%);
	  background-position: right center;
	  color: #fff;
	  text-decoration: none;
	}			
	/* Markup:  */

	.btn {
	  /* Theme tokens — override these to recolour the button */
	--primary: #209cff;
	--secondary: #209cff;
	--surface: #209cff;
	  --bink: var(--secondary);   /* ink / foreground */
	  --bsurf: var(--surface);    /* surface / background */
	  position: relative;
	  isolation: isolate;
	  font-family: "JetBrains Mono", monospace;
	  font-size: 13px;
	  font-weight: 600;
	  letter-spacing: 0.08em;
	  text-transform: uppercase;
	  padding: 13px 24px;
	  border: 1px solid var(--bink);
	  border-radius: 8px;
	  background: transparent;
	  color: white;
	  cursor: pointer;
	  overflow: hidden;
	  white-space: nowrap;
	  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);			  
	}			
	.btn-label {
	  position: relative;
	  z-index: 2;
	  display: inline-block;
	  transition: inherit;			  
	}
	/* Shared sliding panel used by many fill effects */
	.btn::before {
	  content: "";
	  position: absolute;
	  z-index: 1;
	  inset: 0;
	  background: var(--bink);
	  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
	}

	.fx-63 { overflow: visible; border-radius: 9999px; }
	.fx-63::before { display: none; }
	.fx-63::after {
	  content: ""; position: absolute; inset: 0; border-radius: inherit;
	  border: 2px solid var(--bink); opacity: 0; transition: none;
	}
	.fx-63:hover::after { animation: btn-ring 1.2s ease-out infinite; }
	@keyframes btn-ring {
	  0% { transform: scale(1); opacity: 0.8; }
	  100% { transform: scale(1.4); opacity: 0; }
	}	
	.btn i
	{
		margin-right: 7px;
	}
	.home_section
	{
		padding: 160px 7% 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		position:relative;
	}			
	.grid-bg {				
		position:absolute;
		inset: 0px;
		background-image:
			linear-gradient(rgba(50, 150, 255, 0.06) 2px, transparent 2px),
			linear-gradient(90deg, rgba(50, 150, 255, 0.06) 2px, transparent 2px);
		background-size: 70px 70px;
		mask-image: linear-gradient(to bottom, black, transparent);				
	}
	.home_area {
		display:flex;
		flex-direction:column;
		align-items:center;
		position:relative;
	}
	:root { --ink: currentColor; }

	.ld-echo { position: relative; width: 48px; height: 48px; }
	.ld-echo::before, .ld-echo::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	  border: 2px solid var(--ink);
	  border-radius: 50%;
	  animation: echo 1.8s ease-out infinite;
	}
	.ld-echo::after { animation-delay: .9s; }
	@keyframes echo {
	  0%   { transform: scale(.15); opacity: 1; }
	  100% { transform: scale(1); opacity: 0; }
	}

	.welcome {
		display:flex;
		align-items:center;	
		padding: 5px 20px;	   
		border: 1px solid rgba(32, 169, 255, 0.3);
		border-radius: 30px;
		color: #28b2ff;
		background: rgba(20, 120, 255, 0.06);
		margin-bottom:40px;
	}

	.welcome span {        
		border-radius:50%;
		margin-right:10px;
	}

	.hello {
		font-size: 31px;
		color: #dce3ec;
		margin-bottom: 5px;
	}

	.home_section h1 {
		font-size: clamp(60px, 8vw, 110px);			
		line-height: 1;
		margin-bottom: 25px;
		letter-spacing: -4px;
	}

	.home_section h1 span {
		background: linear-gradient(90deg,white, #c5dee8, #13bfff, #7657ff);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.home_section h2 {
		font-size: 27px;
		font-weight: 500;
		color: #8ddcff;
		margin-bottom: 25px;
	}

	.intro {
		max-width: 750px;
		margin: auto;
		color: #8e9aaa;
		font-size: 18px;
		line-height: 1.8;
	}

	.home-buttons {
		margin-top: 40px;
		display: flex;
		justify-content: center;
		gap:18px;
	}

	
	.view_proj_btn,.submit_button,.contact_me_btn {
		background-image: linear-gradient(to right, #5C258D 0%, #4389A2 51%, #5C258D 100%);
		padding: 16px 18px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;
		box-shadow: 0 0 10px #209cff;
		border-radius: 30px;
		cursor:pointer;
		border:none;
		font-size:16px;
	}
	.contact_me_btn 
	{
		background-image:none;
	}
	.view_proj_btn:hover,.submit_button:hover,.contact_me_btn:hover {
		transform: translateY(-3px);
		box-shadow: 0 0 25px rgba(30, 150, 255, 0.4);
		background-position: right center;
		color: #fff;
		text-decoration: none;
	}		
	.social-links {
		margin-top: 35px;
		display: flex;
		justify-content: center;
		gap: 14px;
	}
	.social-links a,
	.footer-social a {
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.09);
		background: rgba(255, 255, 255, 0.035);
		font-size: 21px;
		color: #b8c3d2;
		transition: 0.3s;
	}
	.social-links a:hover,
	.footer-social a:hover {
		color: #fff;
		border-color: #269fff;
		transform: translateY(-4px);
		background: rgba(35, 159, 255, 0.1);
	}			
	.technology-area {
		position: absolute;
		right: 2%;
		top:37%;
		width: 220px;
		padding: 20px;
		text-align: left;
		border: 1px solid rgba(40, 155, 255, 0.35);
		border-radius: 20px;
		background: rgba(10, 22, 38, 0.9);
		box-shadow: 0 0 0px rgba(35, 130, 255, 0.3);
	}
	.technology-area h3 {
		margin-bottom: 20px;
		font-size: 16px;
	}
	.technology-area h3 i {
		color: #22aaff;
		margin-right: 8px;
	}
	.technology {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 17px 0;
		color: #c6d0dc;
	}
	.technology i {
		font-size: 25px;
	}
	:root { --ink: #27B2FF; }
	.ld-perimeter {
	  width: 220px;
	  border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
	}
	.ld-perimeter::after {
	  content: "";
	  position: absolute;
	  top: -5px; left: -5px;
	  width: 10px; height: 10px;
	  border-radius: 3px;
	  background: var(--ink);
	  animation: perim 4s linear infinite;
	}
	@keyframes perim {
	  0%   { transform: translate(0, 0); }
	  25%  { transform: translate(220px, 0); }
	  50%  { transform: translate(220px, 212px); }
	  75%  { transform: translate(0, 212px); }
	  100% { transform: translate(0, 0); }
	}
	.html {
		color: #ff642d;
	}
	.css {
		color: #269fff;
	}
	.js {
		color: #ffd629;
	}
	.python {
		color: #38a8ff;
	}
	.cpp {
		color: #4b8cff;
	}
	.glow {
		position: absolute;
		border-radius: 50%;
		filter: blur(90px);
		opacity: 0.25;
	}
	.glow-one {
		width: 350px;
		height: 350px;
		background: #6c3cff;
		left: -150px;
		top: -50px;
	}
	.glow-two {
		width: 350px;
		height: 350px;
		background: #006eff;
		right: -150px;
		top: -50px;
	}
	.glow-three {
		width: 350px;
		height: 350px;
		background: #006eff;
		left: -150px;
		bottom: -200px;
	}
	.glow-four {
		width: 350px;
		height: 350px;
		background: #6c3cff;
		right: -150px;
		bottom: -200px;
	}						
	.comman_section {
		padding: 120px 7%;
		position: relative;
		
	}
	.section_heading {
		margin-bottom: 60px;
	}
	.section_heading > span {
		color: #299fff;
		font-size: 14px;
	}
	.section_heading h2 {
		margin-top: 12px;
		font-size: 48px;
	}
	.section_heading h2 b {
		background: linear-gradient(90deg, #1dbaff, #7357ff);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}
	.about_me_area {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 70px;
		align-items: center;
	}	
	.about_me_text{

	}
	.btn_know_more{
		background-image: linear-gradient(to right, #5C258D 0%, #4389A2 51%, #5C258D 100%);
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;
		box-shadow: 0 0 10px #209cff;
		border-radius: 30px;
		padding:16px 28px;
		display: inline-flex;
		align-items: center;
		gap: 50px;
		font-size: 16px;
		transition: 0.3s;
	}
	.btn_know_more:hover
	{
		transform: translateY(-3px);
		box-shadow: 0 0 25px rgba(30, 150, 255, 0.4);
		background-position: right center;
		color: #fff;		
	}
	.about_me_text p {
		color: #9ba6b5;
		line-height: 1.9;
		font-size: 17px;
		margin-bottom:25px;
	}
	.about_grid_box {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 18px;
	}			
	.grid_boxes {
		padding: 28px;
		border-radius: 18px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		background: rgba(255, 255, 255, 0.035);
		transition: 0.3s;
	}
	.grid_boxes:hover {
		transform: translateY(-6px);
		border-color: rgba(35, 159, 255, 0.4);
	}
	.grid_boxes i {
		font-size: 28px;
		color: #27aaff;
	}
	.grid_boxes h3 {
		margin: 18px 0 8px;
	}
	.grid_boxes p {
		color: #8793a4;
	}
	.skills-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	.skill_box {
		padding: 35px;
		border-radius: 20px;
		border: 1px solid rgba(255, 255, 255, 0.07);
		background: rgba(255, 255, 255, 0.035);
		transition: 0.3s;
	}

	.skill_box:hover {
		transform: translateY(-8px);
		border-color: rgba(40, 160, 255, 0.5);
		background: rgba(30, 140, 255, 0.05);
	}

	.skill_box i {
		font-size: 40px;
		color: #249fff;
	}

	.skill_box h3 {
		margin: 18px 0 10px;
	}

	.skill_box p {
		color: #8995a5;
		line-height: 1.6;
	}
	.project-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
	}
	.project-card {
		position: relative;
		padding: 35px;
		min-height: 330px;
		border-radius: 22px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		background: rgba(255, 255, 255, 0.035);
		overflow: hidden;
		transition: 0.3s;
	}
	.project-card:hover {
		transform: translateY(-8px);
		border-color: rgba(35, 159, 255, 0.45);
	}			
	.project-number {
		position: absolute;
		top: 20px;
		right: 25px;
		color: rgba(255, 255, 255, 0.2);
		font-size: 35px;
		font-weight: bold;
	}
	.project-icon {
		font-size: 45px;
		color: #25aaff;
	}
	.project-card h3 {
		margin: 25px 0 12px;
		font-size: 22px;
	}
	.project-card p {
		color: #8995a5;
		line-height: 1.7;
	}		
	.tags {
		margin: 20px 0;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.tags span {
		padding: 6px 12px;
		border-radius: 20px;
		color: #62c4ff;
		background: rgba(35, 159, 255, 0.08);
		font-size: 13px;
	}
	.project-card > a {
		color: #39adff;
	}
	.know_more_label {
	  position: relative;
	  z-index: 2;
	  display: inline-block;
	  transition: inherit;
	}
	.fx-34::before { display: none; }
	.fx-34 .know_more_label::after 
	{ 
		content: " \2192";
		margin-left:3px;
		display: inline-block;
		transition: transform 0.3s ease; 
	}
	.fx-34:hover .know_more_label::after 
	{
		transform: translateX(8px);				
	}
	.fx-34:hover 
	{ 
		padding-right: 30px;
		background: color-mix(in srgb, var(--primary) 16%, var(--bsurf)); 
	}

	.education_area 
	{
		width:77%;
		align-items:center;
		justify-content:center;
		margin: auto;
		border-left: 1px solid rgba(40, 155, 255, 0.3);
		padding-left: 40px;			
	}
	.education_box 
	{
		position: relative;
		margin-bottom: 50px;
	}
	.education_dot 
	{
		position: absolute;
		left: -48px;
		top: 0px;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #249fff;
		box-shadow: 0 0 20px #249fff;
	}
	.education_discp 
	{
		padding: 30px;
		border-radius: 18px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		background: rgba(255, 255, 255, 0.035);
	}
	.education_discp > span 
	{
		color: #29aaff;
		font-size: 14px;
	}
	.education_discp h3 
	{
		margin: 12px 0 7px;
	}
	.education_discp h4 
	{
		color: #8995a5;
		font-weight: normal;
		margin-bottom: 15px;
	}
	.education_discp p 
	{
		color: #8894a4;
		line-height: 1.7;
	}
	.contact_area 
	{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 100px;
	}
	.contact_box h3 
	{
		font-size: 30px;
		margin-bottom: 20px;
	}
	.contact_box > p 
	{
		color: #8995a5;
		line-height: 1.8;
	}
	.contact_details 
	{
		margin-top: 35px;
	}
	.contact_details div 
	{
		display: flex;
		align-items: center;
		gap: 15px;
		margin: 20px 0;
		color: #aeb8c5;
	}

	.contact_details i 
	{
		color: #27aaff;
		font-size: 22px;
	}
	
	.under_line:hover
	{
		color:#1F72F8;
		text-decoration:underline;
	}			
	.contact_form_area 
	{
		display: flex;
		flex-direction: column;
		gap:15px;
	}
	.contact_form_area input,.contact_form_area textarea 
	{
		width: 100%;
		padding: 17px 18px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
		outline: none;
		color: white;
		background: rgba(255, 255, 255, 0.04);
		font-family: inherit;
		font-size:15px;
	}
	.contact_form_area input:focus,.contact_form_area textarea:focus 
	{
		border-color: #229eff;
	}
	.contact_form_area textarea {
		height: 150px;
		resize: none;
	}
	.footer {
		background: #080D16;
		border-top: 1px solid #20A9FF;
		padding: 30px 8% 20px;
		text-align: center;
	}
	.footer_name h3 {
		color: white;
		font-size: 24px;
		margin-bottom: 8px;
	}
	.footer_name h3 span {
		color: #20A9FF;
	}
	.footer_name p {
		color: #A8B3C5;
		margin-bottom: 25px;
		margin-top:20px;
	}
	.footer_link_area {
		display: flex;
		justify-content: center;
		gap: 30px;
		margin-bottom: 25px;
	}
	.footer_link_area a {
		color: #A8B3C5;
		text-decoration: none;
		transition: 0.3s;
	}
	.footer_link_area a:hover {
		color: #20A9FF;
	}
	.footer_bottom {
		border-top: 1px solid #1B2635;
		padding-top: 18px;
	}
	.footer_bottom p {
		color: #687586;
		font-size: 14px;
	}