.ui-card{
	display:flex;
	align-items:flex-start;
	background:#fff9f5;
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
	padding:24px 30px;
	gap:20px;
	position:relative;
	margin-bottom:20px;
}

/* Left Icon Box */
.ui-left{
	width:60px;
	height:60px;
	border-radius:16px;
	background:linear-gradient(135deg,#ff8a65,#ff7043);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:22px;
	flex-shrink:0;
	box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* Middle Section */
.ui-middle{
	display:flex;
	flex-direction:column;
	gap:6px;
	width:35%;
}

.ui-title{
	margin:0;
	font-size:18px;
	font-weight:600;
	color:#6b4f4f;
}

.ui-size{
	display:inline-block;
	background:#f3ede8;
	padding:4px 10px;
	border-radius:12px;
	font-size:13px;
	color:#8b7d75;
	width:max-content;
}

/* Right Box */
.ui-right{
	background:#fff1f2;
	padding:16px;
	border-radius:16px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	gap:10px;
}

/* Description wrapper inside right box */
.ui-desc-wrapper{
	width:55%;
	padding:10px 12px;
	border-radius:12px;
}

.ui-desc {
    margin: 0;
    color: #6b4f4f;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Usage */
.ui-right h6{
	margin:0;
	color:#e11d48;
	font-size:14px;
}

.ui-right p{
	margin:0;
	font-size:14px;
	line-height:1.6;
	color:#6b4f4f;
}

/* Responsive */
@media(max-width:768px){
	.ui-card{
		flex-direction:column;
		align-items:flex-start;
	}
	.ui-middle,
	.ui-right{
		width:100%;
	}
}