:root {
	--purple: #737dfe;
	--pink: #ffcac9;
	--border-gradient: linear-gradient(
		to right,
		rgb(115, 125, 254),
		rgb(255, 202, 201)
	);
	--bg-color: #1e1e1e;
	--bg-gradient: linear-gradient(
		to right,
		rgba(115, 125, 254, 0.1) 0%,
		rgb(255, 202, 201, 0.1) 100%
	);
}

#contact-info-container {
	width: 100%;
	height: 100%;
	/* border: 2px solid green; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 32px;
}
.desktop-t {
	display: none;
}
.profile-img-wrapper {
	/* border: 2px solid; */
	width: 188px;
	margin: 0 auto;
	margin-bottom: 8px;
}
.profile-img-wrapper img {
	width: 100%;
	height: 100%;
}

.social-links {
	width: 254px;
	/* border: 2px solid; */
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* Form */
.form-section {
	width: 100%;
}

form {
	/* border: 2px solid; */
	width: fit-content;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.form-section div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

input,
textarea {
	outline: none;
	border: none;
	background-color: #242220;
	border: 2px solid;
	border-image-source: var(--border-gradient);
	border-image-slice: 1;
	caret-color: var(--pink);
	padding: 10px;
	color: white;
}
.form-section input {
	width: 200px;
	height: 35px;
}

.form-section textarea {
	width: 200px;
	height: 100px;
}

.form-section input:focus,
.form-section textarea:focus {
	border: 2px solid var(--pink);
}

/* Buttons */
#submit-btn {
	/* border: 2px solid; */
	width: 111px;
	background-color: var(--purple);
	padding: 10px 20px;
	border-radius: 24px;
	text-align: center;
	align-self: center;
	place-self: center;
	margin-top: 16px;
}

.form-title {
	/* border: 2px solid; */
	padding: 24px;
	text-align: center;
}
@media screen and (min-width: 768px) {
	
	.work-mobile-text {
		display: block;
	}

	.desktop-t {
		display: none;
	}
	
}


@media screen and (min-width: 1024px) {
	#contact-info-container {
		/* flex-direction: row; */
		margin-top: 50px;
	}

	.desktop-t {
		display: block;
		margin: 0 auto;
	}
#social-section{
	order: 1;
	margin-top: 40px;
}

#social-section svg{
	width: 10px;
	height: auto;
}

	.work-mobile-text {
		display: none;
	}
	
	.profile-img-wrapper{
		width: 140px;
		height: 140px;
		position: absolute;
		top: 10%;
		right: 10%;
	}

	.profile-img-wrapper img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.form-title{
	display: none;
}
	.form-section input, .form-section textarea {
	width: 300px;
	margin-bottom: 4px;
	
}

label{
	font-size: 15px;
}
}

@media screen and (min-width: 1440px) {
	
.profile-img-wrapper{
		
		top: 15%;
		right: 15%;
	}
	

.form-title{
	display: none;
}
	.form-section input, .form-section textarea {
	width: 350px;
	margin-bottom: 8px;
	
}

label{
	font-size: 15px;
}
}