/* =================================================
   SERVICES SECTION
================================================= */

.section-services {
	padding-bottom: 80px;
}


/* ================= CARD ================= */

.shape-box {

	position: relative;

	width: 100%;
	height: 360px;

	overflow: hidden;

	border-radius: var(--radius-md);

	box-shadow: 0 6px 30px rgba(0, 0, 0, .15);

	transition: all .35s ease;

	background: var(--bg-card);

}


.shape-box img {

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform .4s ease;

}


.shape-box:hover img {

	transform: scale(1.06);

}


.shape-box:hover {

	box-shadow: var(--shadow-lg);

}


/* ================= CONTENT ================= */

.shape-box figcaption {

	position: absolute;

	bottom: 0;

	width: 100%;

	background: rgba(0, 0, 0, .85);

	backdrop-filter: blur(8px);

	color: var(--text-color);

	padding: 1.5rem;

	transform: translateY(100%);

	transition: transform .4s ease;

}


.shape-box:hover figcaption {

	transform: translateY(0);

}


/* ================= TEXT ================= */

.card-no {

	font-size: 2rem;

	color: var(--accent);

}


.card-main-title {

	text-transform: uppercase;

	font-weight: 700;

	margin-top: .4rem;

}


.card-content {

	margin-top: 1rem;

	font-size: .95rem;

	color: var(--text-muted);

}


/* ================= BUTTON ================= */

.read-more-btn {

	display: inline-block;

	background: var(--accent);

	color: #111;

	padding: .45rem 1rem;

	margin-top: 1rem;

	border-radius: .3rem;

	font-size: .85rem;

	transition: background .3s ease;

}


.read-more-btn:hover {

	background: #e5b45f;

	color: #111;

}