/* ==========================================================
   MEHI ERP ABOUT PAGE 2027
========================================================== */

:root{

	--primary:#2563EB;
	--secondary:#06B6D4;

	--dark:#07111F;
	--dark2:#0F172A;

	--text:#475569;
	--light:#64748B;

	--border:#E2E8F0;

	--white:#FFFFFF;

}

/* ==========================================================
   GLOBAL
========================================================== */

.mehi-about-page{

	background:#F8FAFC;

	overflow:hidden;

}

.about-container{

	max-width:1550px;

	margin:auto;

	padding-left:25px;
	padding-right:25px;

}

.section-heading{

	text-align:center;

	margin-bottom:60px;

}

.section-heading h2{

	font-size:46px;

	font-weight:800;

	line-height:1.15;

	color:#07111F;

	margin:0;

}

/* ==========================================================
   HERO
========================================================== */

.about-hero{

	padding:90px 0;

	background:
	linear-gradient(
		135deg,
		#06101D,
		#0B1628,
		#10203C
	);

	position:relative;

	overflow:hidden;

}

.about-hero:before{

	content:"";

	position:absolute;

	width:900px;
	height:900px;

	right:-300px;
	top:-300px;

	border-radius:50%;

	background:
	radial-gradient(
		circle,
		rgba(37,99,235,.15),
		transparent
	);

}

.about-hero-grid{

	display:grid;

	grid-template-columns:
	1.1fr
	520px;

	gap:40px;

	align-items:center;

	position:relative;

	z-index:2;

}

.about-label{

	display:inline-flex;

	padding:10px 18px;

	border-radius:999px;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

	color:#fff;

	font-size:13px;

	font-weight:700;

	letter-spacing:.6px;

}

.about-content h1{

	font-size:64px;

	font-weight:900;

	line-height:1.05;

	color:#fff;

	margin:25px 0;

	max-width:850px;

}

.about-content p{

	font-size:17px;

	line-height:1.9;

	color:#CBD5E1;

	max-width:800px;

}

.about-actions{

	display:flex;

	flex-wrap:wrap;

	gap:15px;

	margin-top:35px;

}

.about-actions a{

	height:58px;

	padding:0 28px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:18px;

	font-size:14px;

	font-weight:800;

}

.about-demo-btn{

	color:#fff;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

}

.about-chat-btn{

	color:#fff;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

}

/* ==========================================================
   HIGHLIGHTS
========================================================== */

.about-highlight-box{

	display:grid;

	grid-template-columns:
	1fr
	1fr;

	gap:15px;

}

.highlight-item{

	padding:24px;

	border-radius:22px;

	text-align:center;

	font-size:15px;

	font-weight:800;

	color:#fff;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

	backdrop-filter:blur(18px);

}

/* ==========================================================
   STORY
========================================================== */

.our-story{

	padding:100px 0;

	background:#fff;

}

.story-layout{

	display:grid;

	grid-template-columns:
	420px
	1fr;

	gap:60px;

	align-items:start;

}

.story-left span{

	display:inline-block;

	font-size:13px;

	font-weight:800;

	color:#2563EB;

	margin-bottom:20px;

	letter-spacing:.6px;

}

.story-left h2{

	font-size:48px;

	font-weight:800;

	line-height:1.15;

	color:#07111F;

}

.story-right p{

	font-size:16px;

	line-height:2;

	color:#64748B;

	margin-bottom:25px;

}

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

.what-we-do{

	padding:100px 0;

	background:#F8FAFC;

}

.services-grid{

	display:grid;

	grid-template-columns:
	repeat(3,1fr);

	gap:22px;

}

.service-box{

	padding:35px;

	background:#fff;

	border-radius:28px;

	border:1px solid #E2E8F0;

	transition:.3s;

}

.service-box:hover{

	transform:translateY(-8px);

	box-shadow:
	0 20px 60px rgba(15,23,42,.08);

}

.service-box h3{

	font-size:24px;

	color:#07111F;

	margin-bottom:12px;

}

.service-box p{

	font-size:14px;

	line-height:1.9;

	color:#64748B;

}

/* ==========================================================
   INDUSTRIES
========================================================== */

.industries-section{

	padding:100px 0;

	background:#fff;

}

.industry-grid{

	display:grid;

	grid-template-columns:
	repeat(4,1fr);

	gap:18px;

}

.industry-grid div{

	padding:24px;

	text-align:center;

	border-radius:20px;

	font-size:15px;

	font-weight:700;

	color:#07111F;

	background:
	linear-gradient(
		135deg,
		#EFF6FF,
		#F8FAFC
	);

	border:
	1px solid #E2E8F0;

}

/* ==========================================================
   WHY US
========================================================== */

.why-us{

	padding:100px 0;

	background:#F8FAFC;

}

.why-grid{

	display:grid;

	grid-template-columns:
	repeat(4,1fr);

	gap:22px;

}

.why-card{

	padding:35px;

	border-radius:28px;

	background:
	linear-gradient(
		135deg,
		#07111F,
		#0F172A
	);

}

.why-card h3{

	color:#fff;

	font-size:22px;

	margin-bottom:12px;

}

.why-card p{

	color:#CBD5E1;

	font-size:14px;

	line-height:1.8;

}

/* ==========================================================
   VISION MISSION
========================================================== */

.vision-mission{

	padding:100px 0;

	background:#fff;

}

.vm-grid{

	display:grid;

	grid-template-columns:
	1fr
	1fr;

	gap:25px;

}

.vm-card{

	padding:45px;

	border-radius:32px;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

}

.vm-card h2{

	font-size:32px;

	color:#fff;

	margin-bottom:18px;

}

.vm-card p{

	font-size:15px;

	line-height:1.9;

	color:#fff;

}

/* ==========================================================
   CONNECT
========================================================== */

.about-connect{

	padding:100px 0;

	background:
	linear-gradient(
		135deg,
		#06101D,
		#0B1628
	);

}

.connect-grid{

	display:grid;

	grid-template-columns:
	repeat(4,1fr);

	gap:20px;

}

.connect-grid a{

	height:85px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:24px;

	font-size:15px;

	font-weight:800;

	color:#fff;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

	backdrop-filter:blur(18px);

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:1200px){

	.about-hero-grid,
	.story-layout{

		grid-template-columns:
		1fr;

	}

	.services-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.why-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.industry-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.connect-grid{

		grid-template-columns:
		1fr 1fr;

	}

}

@media(max-width:768px){

	.about-container{

		padding-left:18px;
		padding-right:18px;

	}

	.about-hero{

		padding:55px 0;

	}

	.about-content h1{

		font-size:38px;

	}

	.about-content p{

		font-size:15px;

	}

	.about-actions{

		display:grid;

		grid-template-columns:
		1fr 1fr;

		gap:10px;

	}

	.about-highlight-box{

		grid-template-columns:
		1fr 1fr;

		gap:10px;

	}

	.highlight-item{

		padding:16px;

		font-size:13px;

	}

	.section-heading h2{

		font-size:30px;

	}

	.story-left h2{

		font-size:34px;

	}

	.services-grid,
	.industry-grid,
	.why-grid,
	.connect-grid{

		grid-template-columns:
		1fr 1fr;

		gap:12px;

	}

	.service-box,
	.why-card{

		padding:20px;

	}

	.service-box h3,
	.why-card h3{

		font-size:16px;

	}

	.service-box p,
	.why-card p{

		font-size:13px;

	}

	.vm-grid{

		grid-template-columns:
		1fr;

	}

	.vm-card{

		padding:25px;

		border-radius:20px;

	}

	.vm-card h2{

		font-size:24px;

	}

	.vm-card p{

		font-size:14px;

	}

	.connect-grid a{

		height:60px;

		font-size:13px;

		border-radius:16px;

	}

}



/* ==========================================================
   ABOUT PAGE JS CLASSES
========================================================== */

.highlight-item,
.service-box,
.why-card,
.industry-grid div,
.vm-card,
.connect-grid a{

	opacity:0;

	transform:
	translateY(25px);

	transition:
	all .6s ease;

}

.about-visible{

	opacity:1 !important;

	transform:
	translateY(0) !important;

}

.about-mobile-bar{

	position:fixed;

	left:10px;

	right:10px;

	bottom:12px;

	z-index:9999;

	display:grid;

	grid-template-columns:
	1fr 1fr 1fr;

	gap:8px;

	padding:8px;

	border-radius:18px;

	background:
	rgba(6,16,29,.96);

	backdrop-filter:
	blur(18px);

	box-shadow:
	0 15px 40px rgba(0,0,0,.20);

}

.about-mobile-bar a{

	height:48px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:12px;

	font-size:13px;

	font-weight:800;

	color:#fff;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

}

@media(min-width:769px){

	.about-mobile-bar{

		display:none;

	}

}