.fixed-content {
	padding: 0 15px 15px;
}
.fixed-content .social-media-wrapper {
	gap: 20px;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 60px;
	margin-top: 50px;
}
.content-box {
	max-width: 500px;
	background: var(--bg-color);
	border-radius: 20px;
	padding: 20px;
	width: 100%;
	position: relative;
	border: 1px solid var(--borderColor);
}
.box-title {
	text-align: center;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 20px;
}
.accounts-wrapper {
	display: grid;
	gap: 20px;
}
.account {
	background: #f4f6f8;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	padding: 15px;
	cursor: pointer;
	transition: 0.2s;
	align-items:center;
}
.content-box.telegram .account {
	border-right: 5px solid #26a5e4;
}
.content-box.x .account {
    border-right: 5px solid #040404;
}
.content-box.instagram .account {
    border-right: 5px solid #833AB4;
}
.content-box.virasty .account {
    border-right: 5px solid #48BFF5;
}
.content-box.bale .account {
    border-right: 5px solid #3e9797;
}
.content-box.eitaa .account {
	border-right: 5px solid #E37600;
}
.content-box .account:hover {
    box-shadow:0 10px 15px -3px #e5e7eb, 0 4px 6px -4px #e5e7eb;
}
.account-id {
	font-weight: 600;
	direction: ltr;
	display: flex;
	align-items: center;
	gap: 10px;
}
.social-media-intro h3 {
	font-size: 20px;
}
body.dark .account {
    background-color: var(--hoverColor);
}
body.dark .account:hover {
     box-shadow: rgba(0, 0, 0, 0.6) 0px 10px 15px -3px, rgba(0, 0, 0, 0.6) 0px 4px 6px -4px; 
}
@media screen and (max-width:500px) {
    .content-box .account {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 10px;
    }
}