/* Homepage — extra styling for the real Hero Section data wired into
   resources/views/frontend/pages/index.blade.php. Loaded only on the
   homepage via @section('styles'), same convention as the other pages'
   *-custom.css files. Reuses the theme's existing CSS custom properties —
   no new design system, no new packages. */

/* Secondary hero CTA — "About Me" sitting next to "Book A Consultation".
   Two identical solid buttons side by side had no visual hierarchy; this
   keeps the same shape/size (and the accent arrow-circle, since that's
   still generated by .btn-default) but hollows out the button body so
   the primary action reads first. */
.btn-default.btn-outline-metal{
	background: transparent;
	border: 1.5px solid var(--dark-divider-color);
	color: var(--primary-color);
}

.btn-default.btn-outline-metal:hover{
	border-color: var(--accent-color);
	color: var(--bg-color);
}

/* The counter row's top divider/spacing (80px margin + 80px padding + a
   border line) was designed to separate it from the About text block that
   used to sit above it in this same section. That block is gone, so this
   was just leaving a big empty gap with a floating divider line above the
   counters. */
.about-counter-list-metal{
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Counter icons are now FontAwesome glyphs picked from the stat's title
   (same keyword-matching approach as the About page's own stat counters),
   replacing the static SVG icon cycle. */
.about-counter-item-metal .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--accent-color);
	border-radius: 14px;
	flex-shrink: 0;
}

.about-counter-item-metal .icon-box i{
	font-size: 20px;
	color: var(--accent-color);
}

/* The theme pairs `height: calc(100% - 30px)` with `margin-bottom: 30px`
   on purpose — inside a stretched-equal-height Bootstrap row, that 30px
   is reserved space, and the two values must match or the visual gap
   just snaps back to whatever the height formula says. Bump both
   together for a real, consistent gap between rows. */
.post-item-metal{
	height: calc(100% - 50px);
	margin-bottom: 50px;
}

/* The theme's own aspect-ratio box has no object-fit, so it stretches
   whatever image is dropped in to fit — fine for the demo's pre-cropped
   cutout art, but it visibly squishes a normal photo. */
.hero-image-metal figure img{
	object-fit: cover;
	object-position: top center;
	border-radius: 24px 24px 0 0;
}

.hero-identity-badge-metal{
	position: absolute;
	left: 30px;
	bottom: 40px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(10, 10, 10, 0.6);
	border: 1px solid var(--dark-divider-color);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 16px;
	padding: 14px 22px;
}

.hero-identity-badge-metal::before{
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(191, 247, 71, 0.18);
}

.hero-identity-badge-metal h3{
	font-family: var(--default-font);
	text-transform: none;
	color: var(--white-color);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.hero-identity-badge-metal p{
	color: var(--text-color);
	margin: 2px 0 0;
	font-size: 12px;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@media (max-width: 575px){
	.hero-identity-badge-metal{
		left: 15px;
		bottom: 20px;
		padding: 10px 16px;
	}
}

/* Services / Industries / Locations sections all use the shared
   .our-services-gold.bg-section wrapper, which has no margin of its own —
   fine standalone, but stacked back-to-back on the homepage they touched
   with zero gap between them. */
.our-services-gold + .our-services-gold{
	margin-top: 40px;
}

/* Case Studies — modern card grid, replacing the theme's original loose
   two-column "Our Project" layout (label+button floating alone in an
   empty column, image/tag/title/metric stacked loosely on the other
   side). Matches the bordered/blurred dark card language already used
   for Services/Industries/Locations. */
.case-study-section{
	padding: 100px 0 70px;
}

.case-study-card-metal{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
	border-radius: 30px;
	overflow: hidden;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.case-study-card-metal:hover{
	transform: translateY(-5px);
	border-color: var(--accent-color);
}

.case-study-card-image{
	position: relative;
}

.case-study-card-image img{
	width: 100%;
	aspect-ratio: 1 / 0.75;
	object-fit: cover;
	display: block;
}

.case-study-card-tag{
	position: absolute;
	top: 20px;
	left: 20px;
	background: var(--accent-color);
	color: var(--bg-color);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 8px 16px;
	border-radius: 100px;
}

.case-study-card-body{
	padding: 30px;
}

.case-study-card-body h3{
	font-size: 18px;
	margin-bottom: 0;
	line-height: 1.4;
}

.case-study-card-body h3 a{
	color: inherit;
}

.case-study-card-metric{
	color: var(--accent-color);
	margin: 12px 0 20px;
	font-size: 14px;
}

.case-study-card-metric i{
	margin-right: 4px;
}