:root{
				--bg-color: #dfd5ff;
				--sec-bg-color: #81007F;
				--trans-bg-color: rgba(194,82,204,0.5);
				
}
html, body{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-size: 90%;
				font-family: Sans-Serif;
				line-height: 150%;
				scroll-behavior: smooth;
}
html:focus-within{
				scroll-behavior: smooth;
}
.hide{
				display: none;
}
i{
				color: #000000;
}

@media screen and (min-width:2250px){
    body{
    				display: flex;
    				
    }
				.intro{
								width: 16.666%;
								position: sticky;
								top: 0%;
				}
				.intro-div{
								
				}
				.heb{
				    display: grid;
				    grid-template-columns:repeat(5,1fr);
								width: 83.333%;
				}
				.foot{
								grid-column: span 6;
				}
}
@media screen and (min-width:1024px) and (max-width:1440px){
				body{
								width: 100%;
								display: flex;
								justify-content: space-between;
								position: relative;
								flex-wrap: wrap;
				}
				.intro{
								width: 35%;
								position: sticky;
								top: 0%;
				}
				.port-btn{
								width: 100%;
								display: flex;
								
				}
				.heb{
								width: 65%;
								position: relative;
								right: 0;
								display: grid;
								grid-template-columns: 2;
								//grid-gap: 1rem;
								
				}
				.projects{
								grid-column: span 2;
								display: flex;
							 flex-direction: column;
								
				}
			 .projects h2{
								flex-grow: 1;
				}
			
				.about{
								grid-column: 2 / 3;
								grid-row: 2;
				}
				.tech{
								grid-column: 1 / 2;
				}
				.collab, footer,.foot{
								grid-column: 1 / 3;
				}
				.collab{
								display: grid;
								grid-template-columns: 3;
				}
				.collab h2{
								grid-column: 1 / 3;
				}
				.one,.two,.three{
								width: 90%;
				}
				.one{
								grid-column: 1 / 2;
				}
				.two{
								grid-column: 2 / 3;
				}
				.three{
								grid-column: 3 / 4;
				}
				footer{
								display: grid;
								grid-template-columns: 2;
								margin-bottom: 0;
				}
				footer h4{
								grid-column: span 2;
				}
				nav{
			padding: 5%;
			background-color: purple;
			width: 90%;
			justify-content: space-between;
			
}
     .proj{
				width: 95%;
				margin: auto;
				display: grid;
				grid-template-columns: repeat(4,1fr);
				grid-gap: 2rem;
}
}
@media screen and (min-width:600px) and (max-width:1023px){
				body{
								width: 100%;
								display: flex;
								justify-content: space-between;
								position: relative;
								flex-wrap: wrap;
				}
				.intro{
								width: 45%;
								position: sticky;
								top: 0%;
				}
				.port-btn{
								width: 100%;
								display: flex;
								
				}
				.heb{
								width: 55%;
								position: relative;
								right: 0;
				}
				nav{
			padding: 5%;
			background-color: purple;
			width: 90%;
			justify-content: space-between;
}
			
}
h2{
				
} 
.wrapper{
			filter: drop-shadow(5px 5px 15px #333);
			height: 50%;
}
.intro{
				
				height: 100vh;
				min-height: 50em;
				display: flex;
				align-items: center;
				background: #dfd5ff;
				justify-content: space-between;
}
.logo{
				background-color: purple;
				position: relative;
				
				width: 60%;
				aspect-ratio: 1;
				border-radius: 50%;
				display: grid;
				place-items: center;
				bottom: -15%;
			/*	top: 50%;
    left: 50%;
    transform: translate(-50%, -140%);
				
				*/
				
}
.logo img{
				max-width: 40%;
} 
.intro-div{
				background-color: rgba(194,82,204,0.5);
				backdrop-filter:blur(50px);
				clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);
				width: 90%;
				z-index: 10;
				margin: auto;
				position: relative;
				height: 100%;
				padding-top: 20%;
				padding-bottom: 5%;
				padding-inline: 10%;
				
				margin-bottom: 4rem;
				
}
.intro-div p{
				line-height: 150%;
}
@media screen and (max-width:767px){
				.nav{
			
			clip-path: circle(35% at 100% 50%);
			background-color: rgba(194,82,204,0.5);
			width: 90%;
			transition: all .5s;
			
}
.hide{
				display: inline-block;
}
nav:hover{
				clip-path: circle(100%);
				background-color: purple;
}
} 
.nav{
			padding: 5%;
			
}

nav ul{
				padding: 0;
				margin: 0;
				display: flex;	
				gap: 1rem;
				width: 100%;
			justify-content: space-between;
}
nav li{
				list-style-type: none;
				
}
.menu{
				//border-top-left-radius: 50% 50%;
}
nav a{
				color: #fff;
}
.head-img{
				width: 10%;
}

.proj{
				width: 95%;
				margin: auto;
				display: grid;
				
				grid-gap: 2rem;
}
.skill-card{
				width: 100%;
				margin: auto;
				//background: var(--bg-color);
				border-radius: 0.5rem;
				box-shadow: 5px 5px 15px rgba(51,51,51,0.25);
				border-radius: 0.5rem;
				
}
@media screen and (max-width: 1023px ){
				.proj{
								grid-template-columns: repeat(2,1fr);
				}
				.projects{
				min-height: 100vh;
}
}
.skill-card img{
				width: 100%;
				border-radius: 1rem;
}
.tech{
		
				background: #dfd5ff;
				min-height: 65em;
				padding-bottom: 10em;
}
.tech h4{
				width: 100%;
				background-color: rgba(129,0,127,0.5);
				color: #fff;
}
.web{
				width: 80%;
				margin: auto;
				height: 10em;
}
.skills{
				max-width: 20%;
		
				
}
h5{
				color: #8168ac;
				
				margin: 1rem 0;
}
.skillset{
				width: 100%;
				height: 80%;
				margin: auto;
				border-radius: 5px;
				background-color: rgba(194,82,204,1);
				backdrop-filter:blur(50px);
				box-shadow: 2px 2px 10px rgba(51,51,51,0.25);
				position: relative;
}
.skillset:after{
    content: "";
				position: absolute;
				width: 50%;
				height: 100%;
				background-color: rgba(129,0,127,0.25);
				z-index: -1;
				bottom: 0;
				right: 0;
				
}
.about{
				/*background: #f4d5ff;*/
				background: white;
				clip-path: polygon(0 0,10% 0,15% 2.5%,85% 2.5%,90% 0,100% 0,100% 100%,0 100%);
				padding-bottom: 5% ;
				margin-top: -5%;
}
.profile{
				width: 95%;
				aspect-ratio: 1;
				//background: #81007F;
				margin: auto;
				display: grid;
				place-items: center;
				border-radius: 50%;
}
.profile img{
				max-width: 75%;
				filter: drop-shadow(5px 5px 15px rgba(51,51,51,0.25));
				
}
.collab{
				
				background: var(--bg-color);
				padding: 5% 0;
}
@media screen and (max-width: 1023px){
				.collab{
				clip-path: polygon(0 0,10% 0,15% 1.75%,85% 1.75%,90% 0,100% 0,100% 100%,0 100%); 
				} 
}
.cont{
				width: 90%;
				margin: auto;
				background: #a9a1c1;
				padding: 1rem ;
				border-radius: 0.5rem;
				color: black;
				box-shadow: 5px 5px 15px rgba(51,51,51,0.25);
				
}
@media screen and (max-width:1023px){
				.one,.two,.three{
				max-width: 70%;
				
} 
}
.one,.two,.three{
				background: #fff;
				border-radius: 0.5rem;
				margin: 10% auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				
}
.one img, .two img, .three img{
				width: 30%;
				
				position: relative;
				top: -1rem;
				display: block;
}
.one p,.two p,.three p{
				padding: 10%;
}
.one .btn,.two .btn,.three .btn{
				flex-grow: ;
				width: 100%;
				background: linear-gradient(to right, #B628E7 , #DC41D7, #9714F2);
				color: #fff;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				box-shadow: 5px 5px 15px rgba(51,51,51,0.25);
}
footer{
				background: linear-gradient(to right, #B628E7 , #DC41D7, #9714F2);
}
@media screen and (max-width:767px){
				footer{
				clip-path: polygon(0 0,10% 0,12.5% 2%,85% 2%,87.5% 0,100% 0,100% 100%,0 100%); 
				margin-top: -10%;
				//height: 65em;
				display: flex;
				flex-direction: column;
				
				} 
}
footer h4{

				height: 10%;
				display: grid;
				place-items: center;
				color: #fff;
				padding-top: 10%;
}
footer h6{
				height: 10%;
				display: grid;
				place-items: center;
				color: black;
} 
footer div{
			width: 90%;
}
.net{
				background-color: #dfd5ff;
				margin: 5% auto;
				padding: 5%;
				border-radius: 1rem;
}
.social-media{
				display: flex;
				flex-direction: column;
				
}
.social-media a{
				width: 50%;
				padding: 2.5% 0;
				margin: auto;
}
form{
				
				
				background-color: #dfd5ff;
				width: 90%;
				margin: 5% auto;
				border-radius: 1rem;
				padding: 5% 0;
}
.form-group{
				
				margin: 0 auto;
}
.foot{
				background-image: linear-gradient(to right, #B628E7 , #000, #9714F2);
}