.box{
	width: 140px;

	background: linear-gradient(
  to bottom,
  #34353a 0%,
  #34353a 50%,
  #2e2f33 50%,
  #2e2f33 100%
);
}



.contact-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	background-color: var(--darkg);
	padding-bottom: 100px;

}

.contact-container{
	display: grid;
  	grid-template-columns: repeat(2, 1fr); /* 2 columns */
  	column-gap: clamp(2rem, 7vw, 8rem); /* min → preferred → max */
  	row-gap: 2rem;
  	padding-top:40px;



}

.contact-title{
	text-align: center;
	font-size:1.7rem;
	color: #fff;
	font-weight: bold;
	position: relative;
	top:-19px;
	margin-bottom: 20px;

}



.contact-item{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	background-color: var(--lightg);
	padding:10px 15px;
	border-radius: 8px;
	width:350px;
	box-shadow: 4px 4px 4px #292929;
	
}

.contact-item:hover{
	cursor: pointer;
	box-shadow: 4px 4px 9px #252525;
}

.contact-item:hover .contact-text{
	color: #fff;
}

.contact-img{
	width: auto;
	height: 30px;
}

.contact-text{
	color: #ddd;
	font-size: 0.9rem;
	margin-left: 10px;

}



/* RESPONSIVENESS */



@media (max-width:900px){
	.contact-container{
		grid-template-columns: 1fr;
	}

}

@media (max-width:520px){
	.contact-item{
		width:270px;
	}

	.contact-text{
	color: #ddd;
	font-size: 0.8rem;
	margin-left: 13px;

}
}

@media (max-width:380px){
	.contact-item{
		width:230px;
	}
	.contact-text{
		font-size:0.7rem;
		margin-left: 15px;
	}
}

@media (max-width:380px){
	.contact-item{
		min-width:170px;
	}
	.contact-text{
		font-size:0.7rem;
		margin-left: 15px;
	}
}