/* About Page — extra styling for the real About-module data wired into
   resources/views/frontend/pages/about.blade.php (Professional Experience
   timeline + Skills & Expertise bars). Loaded only on the About page via
   @section('styles'), same convention as service-details-custom.css etc.
   Reuses the theme's existing CSS custom properties/card look — no new
   design system, no new packages. */

/* Author byline — no photo (the big hero photo already identifies the
   person), just a clean divider + name/designation instead of the empty
   gap the image used to fill. */
.about-us-author-content{
	width: auto;
	padding-left: 24px;
	border-left: 1px solid var(--divider-color);
}

.about-us-author-content h3{
	font-family: var(--default-font);
	text-transform: none;
	font-weight: 600;
}

.about-us-description{
	margin-top: 20px;
	color: var(--text-color);
}

.about-us-description p:last-child{
	margin-bottom: 0;
}

/* About Us hero — profile photo (replaces the old text-only
   mission-statement layout) */
.about-hero-image-box{
	position: relative;
}

.about-hero-image-box figure img{
	width: 100%;
	/* Matches the uploaded portrait's own ~4:5 proportions instead of a
	   near-square box, so object-fit: cover barely needs to crop anything
	   (it previously forced a much squarer box, cutting off the shoulders). */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
	border-radius: 30px;
}

.about-hero-badge-circle{
	position: absolute;
	left: -20px;
	bottom: -20px;
	width: 130px;
	z-index: 2;
}

.about-hero-badge-circle .learn-about-circle{
	position: static;
	width: 100%;
}

/* Vision / Mission cards, scoped to this page — the shared card style
   assumes a longer headline + tag-pill block that this data doesn't have,
   so drop the forced min-height/space-between here rather than edit the
   shared class used only on this page. */
.vision-mission-box .vision-mission-item{
	min-height: 0;
	justify-content: flex-start;
	gap: 20px;
}

.vision-mission-box .vision-mission-item-content p:last-child{
	margin-bottom: 0;
}

@media (max-width: 1199px){
	.about-hero-image-box{
		margin-bottom: 40px;
	}
}

@media (max-width: 575px){
	.about-hero-badge-circle{
		width: 100px;
		left: -10px;
		bottom: -10px;
	}
}

/* Professional Experience */
.experience-section{
	padding: 100px 0 70px;
}

.experience-timeline-list{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.experience-timeline-item{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 40px;
	align-items: flex-start;
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
	border-radius: 30px;
	padding: 35px 40px;
}

.experience-timeline-item-period{
	flex: 0 0 160px;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--accent-color);
	text-transform: uppercase;
}

.experience-timeline-item-content{
	flex: 1 1 300px;
}

.experience-timeline-item-content h3{
	font-size: 20px;
	margin-bottom: 6px;
}

.experience-timeline-item-company{
	color: var(--text-color);
	margin-bottom: 10px !important;
}

.experience-timeline-item-content p:last-child{
	margin-bottom: 0;
}

/* Why Trust Us — dynamic from the existing WhyUsFeature admin list
   (Admin → Why Us Section), a generic icon+title+subtitle repeater that
   already existed but wasn't rendered on the frontend anywhere. */
.trust-section{
	padding: 100px 0 70px;
}

.trust-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.trust-item{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
	border-radius: 30px;
	padding: 45px 30px;
	text-align: center;
	transition: transform 0.3s ease-in-out;
}

.trust-item:hover{
	transform: translateY(-5px);
}

.trust-item-icon{
	width: 64px;
	height: 64px;
	border: 2px solid var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 25px;
	overflow: hidden;
}

.trust-item-icon i{
	font-size: 20px;
	color: var(--white-color);
}

.trust-item-icon img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trust-item h3{
	font-size: 18px;
	margin-bottom: 12px;
}

.trust-item p{
	margin-bottom: 0;
	color: var(--text-color);
}

@media (max-width: 991px){
	.trust-list{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px){
	.trust-list{
		grid-template-columns: 1fr;
	}
}

/* Skills & Expertise */
.skills-section{
	padding: 100px 0 70px;
}

/* Approach counters (about_stats) — an editorial "stat strip": huge
   accent-color numbers with thin vertical dividers between columns,
   rather than another rounded card (the page already has enough of those
   via .trust-item / .experience-timeline-item — this reads as a distinct,
   more premium block instead of "the same card again"). */
.approach-counter-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	/* No section title above it any more — the section's own padding
	   provides the spacing, so skip the extra margin/divider that used to
	   separate the counters from a heading. */
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

.approach-counter-item{
	width: auto;
	padding: 0 35px;
	border-left: 1px solid var(--divider-color);
}

.approach-counter-item:first-child{
	padding-left: 0;
	border-left: none;
}

.approach-counter-item-icon{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	overflow: hidden;
}

.approach-counter-item-icon i{
	font-size: 17px;
	color: var(--accent-color);
}

.approach-counter-item-icon img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.approach-counter-item h2{
	font-size: 48px;
	color: var(--accent-color);
	margin-bottom: 2px;
}

.approach-counter-content{
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.approach-counter-content h3{
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--white-color);
	margin-bottom: 12px;
}

.approach-counter-content p{
	font-size: 14px;
}

@media (max-width: 991px){
	.approach-counter-list{
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}

	.approach-counter-item:nth-child(2n+1){
		border-left: none;
		padding-left: 0;
	}
}

@media (max-width: 575px){
	.approach-counter-list{
		grid-template-columns: 1fr;
		border-top: none;
		padding-top: 0;
		row-gap: 35px;
	}

	.approach-counter-item{
		border-left: none;
		border-top: 1px solid var(--divider-color);
		padding: 30px 0 0;
	}

	.approach-counter-item:first-child{
		border-top: none;
		padding-top: 0;
	}
}

.about-skill-list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 60px;
}

@media (max-width: 767px){
	.about-skill-list{
		grid-template-columns: 1fr;
	}

	.experience-timeline-item-period{
		flex: 0 0 100%;
	}
}