/**
 * pages/about.css — About Us Page Styles
 *
 * Figma reference: node 87:979 (About Us page)
 *
 * Structure:
 *   1. Hero section — 705px, gradient background, decorative circles
 *   2. Company Overview — 2-column layout
 *   3. Core Philosophy — Centered quote card
 *   4. Our Approach — 4-step process with gradient numbers
 *   5. FinTech Focus — 2-column layout with gradient background
 *   6. Platform Orientation — 6-card platform grid
 *   7. Technology Partners — 3-card handshake grid
 *   8. Vision & Commitment — 2-card layout
 *   9. CTA Section — Gradient background with 3 buttons
 *
 * @package MJC_Fintech_Child
 */

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

.about-container {
	max-width: 1190px;
	margin: 0 auto;
	padding: 0 64px;
}

.about-bar {
	width: 80px;
	height: 4px;
	background-color: #2bbfce;
	border-radius: 2px;
}

.about-bar--center {
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================
   SECTION 1 — HERO
   ===================================================== */

.about-hero {
	position: relative;
	min-height: 705px;
	background: linear-gradient(160deg, #0a2540 7.5%, #1e5f8c 92.5%);
	padding-top: 128px;
	padding-bottom: 64px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-hero__content {
	position: relative;
	z-index: 2;
	max-width: 900px;
	width: 100%;
}

.about-hero__breadcrumb {
	font-family: var(--font-body);
	font-size: 14px;
	color: #99a1af;
	margin-bottom: 12px;
	letter-spacing: 0.5px;
}

.about-hero__breadcrumb a {
	color: #99a1af;
	text-decoration: none;
}

.about-hero__breadcrumb a:hover {
	text-decoration: underline;
}

.about-hero__breadcrumb-sep {
	margin: 0 8px;
	opacity: 0.7;
}

.about-hero__tag {
	display: inline-block;
	background-color: rgba(43, 191, 206, 0.1);
	border: 1px solid rgba(43, 191, 206, 0.3);
	border-radius: 100px;
	padding: 8px 32px;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: #1e5f8c;
	margin-top: 0;
	margin-bottom: 20px;
}

.about-hero__title {
	font-family: var(--font-heading);
	font-size: 64px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.1;
	margin: 0;
	display: block;
}

.about-hero__title-gradient {
	background: linear-gradient(179deg, #2bbfce 6%, #4ecdcc 94%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	display: block;
}

.about-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 64px;
	max-width: 700px;
	margin-top: 64px;
}

.about-hero__stat {
	text-align: left;
}

.about-hero__stat-number {
	font-family: var(--font-mono);
	font-size: 48px;
	font-weight: 500;
	color: #2bbfce;
	display: block;
	margin-bottom: 8px;
}

.about-hero__stat-label {
	font-family: var(--font-body);
	font-size: 16px;
	color: #d1d5dc;
	display: block;
	line-height: 1.5;
}

/* Decorative circles */
.about-hero__circle {
	position: absolute;
	border: 1px solid #2bbfce;
	border-radius: 50%;
	pointer-events: none;
}

.about-hero__circle--1 {
	width: 800px;
	height: 800px;
	top: -400px;
	right: -200px;
	opacity: 0.08;
}

.about-hero__circle--2 {
	width: 700px;
	height: 700px;
	top: -350px;
	right: -150px;
	opacity: 0.06;
}

.about-hero__circle--3 {
	width: 600px;
	height: 600px;
	top: -300px;
	right: -100px;
	opacity: 0.05;
}

/* =====================================================
   SECTION 2 — COMPANY OVERVIEW
   ===================================================== */

/* SECTION */
.about-overview {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
    padding: 100px 20px;
}

/* GRID */
.about-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 72px;
    align-items: center;
}

/* IMAGE CARD (UPGRADED) */
.about-overview__image-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;

    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    transition: all 0.4s ease;
}

.about-overview__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* HOVER EFFECT */
.about-overview__image-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.18);
}

.about-overview__image-wrapper:hover .about-overview__img {
    transform: scale(1.05);
}

/* CONTENT */
.about-overview__content h2 {
    font-size: 40px;
    font-weight: 700;
    color: #0a2540;
    margin-bottom: 10px;
}

/* LEAD TEXT */
.about-overview__lead {
    font-size: 20px;
    font-weight: 500;
    color: #1e5f8c;
    margin-bottom: 20px;
}

/* BODY TEXT */
.about-overview__content p {
    font-size: 16px;
    color: #4a5565;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* STATS */
.about-overview__stats {
    display: flex;
    gap: 40px;
    margin: 30px 0;
}

.stat h3 {
    font-size: 28px;
    color: #2bbfce;
    margin: 0;
}

.stat span {
    font-size: 14px;
    color: #6b7c8f;
}

/* CLOSING LINE */
.about-overview__closing {
    font-weight: 500;
    color: #0a2540;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .about-overview__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-overview__stats {
        justify-content: center;
        text-align: center;
    }
}
/* =====================================================
   SECTION 3 — CORE PHILOSOPHY
   ===================================================== */

.about-philosophy {
	background-color: #0a2540;
	padding-top: 128px;
	padding-bottom: 128px;
}

.about-philosophy__header {
	text-align: center;
	margin-bottom: 64px;
}

.about-philosophy__header h2 {
	font-family: var(--font-heading);
	font-size: 38px;
	font-weight: 700;
	color: #2bbfce;
	margin: 0;
	display: block;
}

.about-philosophy__header .about-bar {
	margin-top: 24px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

.about-philosophy__card {
	background-color: #ffffff;
	border-radius: 24px;
	border-left: 4px solid #1e5f8c;
	padding: 48px 48px 48px 52px;
	box-shadow: 0 4px 24px rgba(43, 191, 206, 0.1);
	max-width: 900px;
	margin: 64px auto 0;
}

.about-philosophy__quote {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
	color: #0a2540;
	line-height: 39px;
	margin: 0;
	display: block;
}

.about-philosophy__subtext {
	font-family: var(--font-body);
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	margin-top: 32px;
	line-height: 26px;
	max-width: 662px;
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================
   SECTION 4 — OUR APPROACH
   ===================================================== */

.about-approach {
	background-color: #ffffff;
	padding-top: 128px;
	padding-bottom: 128px;
}

.about-approach__header {
	text-align: center;
	margin-bottom: 96px;
}

.about-approach__header h2 {
	font-family: var(--font-heading);
	font-size: 38px;
	font-weight: 700;
	color: #0a2540;
	margin: 0;
	display: block;
}

.about-approach__heading-gradient {
	background: linear-gradient(179deg, #2bbfce 6%, #4ecdcc 94%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	display: inline;
}

.about-approach__header .about-bar {
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
}

.about-approach__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: center;
}

.about-approach__step h3 {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: #0a2540;
	margin: 24px 0 8px 0;
	line-height: 1.4;
}

.about-approach__step p {
	font-family: var(--font-body);
	font-size: 14px;
	color: #4a5565;
	margin: 0;
	line-height: 1.5;
}

.about-approach__number {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2bbfce, #1e5f8c);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
}

/* =====================================================
   SECTION 5 — FINTECH FOCUS
   ===================================================== */

.about-fintech {
	background: linear-gradient(169deg, #2bbfce 7.7%, #1e5f8c 50%, #0a2540 92.3%);
	padding-top: 128px;
	padding-bottom: 128px;
	min-height: 886px;
	display: flex;
	align-items: center;
}

.about-fintech__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	width: 100%;
}

.about-fintech__content h2 {
	font-family: var(--font-heading);
	font-size: 38px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.5;
	max-width: 373px;
	margin: 0 0 24px 0;
	display: block;
}

.about-fintech__content > p {
	font-family: var(--font-body);
	font-size: 16px;
	color: #e8f4f8;
	line-height: 26px;
	max-width: 451px;
	margin: 0 0 48px 0;
}

.about-fintech__bar {
	margin-bottom: 40px;
}

.about-fintech__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.about-fintech__list li {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 32px;
	font-family: var(--font-body);
	font-size: 16px;
	color: #e8f4f8;
	line-height: 1.5;
}

.about-fintech__list li:last-child {
	margin-bottom: 0;
}

.about-fintech__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* IMAGE CONTAINER */
.about-fintech__image {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

/* GLASS CARD WRAPPER */
.about-fintech__image-wrapper {
	position: relative;
	border-radius: 24px;
	padding: 18px;

	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.25),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08);

	transition: all 0.4s ease;
}

/* IMAGE */
.about-fintech__img {
	width: 100%;
	max-width: 520px;
	height: auto;
	border-radius: 18px;
	display: block;
	transition: transform 0.5s ease;
}

/* HOVER EFFECT */
.about-fintech__image-wrapper:hover {
	transform: translateY(-8px) scale(1.01);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.3),
		0 0 40px rgba(43, 191, 206, 0.25);
}

.about-fintech__image-wrapper:hover .about-fintech__img {
	transform: scale(1.03);
}

/* SUBTLE GLOW BORDER */
.about-fintech__image-wrapper::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 26px;
	background: linear-gradient(
		135deg,
		rgba(43, 191, 206, 0.4),
		rgba(30, 95, 140, 0.3),
		transparent
	);
	z-index: -1;
	opacity: 0.6;
}
/* =====================================================
   SECTION 6 — PLATFORM ORIENTATION
   ===================================================== */

.about-platforms {
	background-color: #ffffff;
	padding-top: 128px;
	padding-bottom: 128px;
}

.about-platforms__header {
	text-align: center;
	margin-bottom: 64px;
}

.about-platforms__tag {
	display: inline-block;
	background-color: rgba(43, 191, 206, 0.1);
	border: 1px solid rgba(43, 191, 206, 0.3);
	border-radius: 100px;
	padding: 8px 32px;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: #1e5f8c;
	margin-bottom: 24px;
}

.about-platforms__header h2 {
	font-family: var(--font-heading);
	font-size: 48px;
	font-weight: 700;
	color: #0a2540;
	margin: 0;
	display: block;
	text-align: center;
}

.about-platforms__header .about-bar {
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
}

.about-platforms__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.about-platforms__card {
	background-color: #ffffff;
	border-radius: 24px;
	box-shadow: 0 4px 24px rgba(43, 191, 206, 0.1);
	height: 120px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	transition: all 0.25s ease;
}

.about-platforms__card:hover {
	box-shadow: 0 8px 32px rgba(43, 191, 206, 0.15);
	transform: translateY(-4px);
}

.about-platforms__icon-container {
    width: 100%;
    height: 60px; /* Increased height for better visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.about-platforms__img {
    max-width: 80%;
    max-height: 45px;
    object-fit: contain; /* Critical: prevents stretching */
    filter: grayscale(100%); /* Adds a professional muted look */
    opacity: 0.7;
    transition: all 0.3s ease;
}

.about-platforms__card:hover .about-platforms__img {
    filter: grayscale(0%); /* Pops to color on hover */
    opacity: 1;
    transform: scale(1.05);
}

/* Ensure the card has enough space for the image */
.about-platforms__card {
    height: auto; 
    padding: 32px 20px;
}

.about-platforms__name {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: #0a2540;
	margin: 0;
}

/* =====================================================
   SECTION 7 — TECHNOLOGY PARTNERS
   ===================================================== */

.about-partners {
	background-color: #e8f4f8;
	padding-top: 128px;
	padding-bottom: 128px;
}

.about-partners__header {
	text-align: center;
	margin-bottom: 64px;
}

.about-partners__tag {
	display: inline-block;
	background-color: rgba(43, 191, 206, 0.1);
	border: 1px solid rgba(43, 191, 206, 0.3);
	border-radius: 100px;
	padding: 8px 32px;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: #1e5f8c;
	margin-bottom: 24px;
}

.about-partners__header h2 {
	font-family: var(--font-heading);
	font-size: 48px;
	font-weight: 700;
	color: #0a2540;
	margin: 0;
	display: block;
}

.about-partners__header .about-bar {
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 32px;
}

.about-partners__desc {
	font-family: var(--font-body);
	font-size: 16px;
	color: #4a5565;
	text-align: center;
	max-width: 662px;
	margin: 0 auto;
	line-height: 26px;
}

.about-partners__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	margin-top: 64px;
}

.about-partners__card {
	background-color: #ffffff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(43, 191, 206, 0.1);
	height: 344px;
	transition: all 0.25s ease;
}

.about-partners__card:hover {
	box-shadow: 0 8px 32px rgba(43, 191, 206, 0.15);
	transform: translateY(-4px);
}

.about-partners__bar {
	height: 4px;
	background: linear-gradient(180deg, #2bbfce, #1e5f8c, #0a2540);
	width: 100%;
}

.about-partners__body {
	padding: 48px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 340px;
}

.about-partners__icon {
	width: 64px;
	height: 64px;
	border-radius: 24px;
	background-color: rgba(43, 191, 206, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
	flex-shrink: 0;
}

.about-partners__body h3 {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	color: #0a2540;
	margin: 0 0 16px 0;
	display: block;
}

.about-partners__body p {
	font-family: var(--font-body);
	font-size: 16px;
	color: #4a5565;
	line-height: 26px;
	margin: 0;
}

/* =====================================================
   SECTION 8 — VISION & COMMITMENT
   ===================================================== */

.about-vision {
	background-color: #ffffff;
	padding-top: 128px;
	padding-bottom: 128px;
}

.about-vision__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
}

.about-vision__card {
	background-color: #ffffff;
	border-radius: 24px;
	box-shadow: 0 4px 24px rgba(43, 191, 206, 0.1);
	padding: 64px;
	height: 467px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: all 0.25s ease;
}

.about-vision__card:hover {
	box-shadow: 0 8px 32px rgba(43, 191, 206, 0.15);
	transform: translateY(-4px);
}

.about-vision__icon {
	width: 64px;
	height: 64px;
	border-radius: 24px;
	background: linear-gradient(135deg, #2bbfce, #1e5f8c);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
	flex-shrink: 0;
}

.about-vision__card h2 {
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 700;
	color: #0a2540;
	margin: 0 0 16px 0;
	display: block;
}

.about-vision__card .about-bar {
	margin-bottom: 24px;
	margin-left: auto;
	margin-right: auto;
}

.about-vision__card p {
	font-family: var(--font-body);
	font-size: 16px;
	color: #4a5565;
	line-height: 26px;
	margin: 0;
}

/* =====================================================
   SECTION 9 — CTA
   ===================================================== */

.about-cta {
	position: relative;
	background: linear-gradient(180deg, #0a2540, #0f2942);
	padding-top: 128px;
	padding-bottom: 128px;
	overflow: hidden;
}

.about-cta__content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.about-cta__title {
	font-family: var(--font-heading);
	font-size: 48px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	margin: 0;
	display: block;
}

.about-cta__title-gradient {
	background: linear-gradient(179deg, #2bbfce 6%, #4ecdcc 94%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	display: block;
}

.about-cta__subtext {
	font-family: var(--font-body);
	font-size: 18px;
	color: #d1d5dc;
	margin-top: 24px;
	margin-bottom: 48px;
	line-height: 1.6;
}

.about-cta__buttons {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.about-cta__button {
	border: 1px solid #2bbfce;
	border-radius: 100px;
	height: 66px;
	padding: 0 48px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	background-color: transparent;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s, color 0.25s;
	cursor: pointer;
}

.about-cta__button:hover {
	background-color: #2bbfce;
	color: #0a2540;
	border-color: #2bbfce;
}

.about-cta__button:focus-visible {
	outline: 2px solid #67E8F9;
	outline-offset: 2px;
}

/* Decorative circles */
.about-cta__circle {
	position: absolute;
	border: 1px solid rgba(34, 211, 238, 0.1);
	border-radius: 50%;
	pointer-events: none;
}

.about-cta__circle--1 {
	width: 600px;
	height: 600px;
	bottom: -300px;
	left: -250px;
	opacity: 0.06;
}

.about-cta__circle--2 {
	width: 500px;
	height: 500px;
	top: -250px;
	right: -200px;
	opacity: 0.08;
}

/* =====================================================
   RESPONSIVE — TABLET (1024px and below)
   ===================================================== */

@media (max-width: 1024px) {
	.about-container {
		padding: 0 40px;
	}

	.about-overview__grid,
	.about-fintech__grid,
	.about-vision__grid {
		grid-template-columns: 1fr;
	}

	.about-approach__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.about-platforms__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.about-partners__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.about-hero__stats {
		gap: 48px;
	}

	.about-hero {
		min-height: 600px;
		padding-top: 96px;
		padding-bottom: 48px;
	}

	.about-hero__title {
		font-size: 48px;
	}

	.about-fintech__image {
		height: 350px;
	}

	.about-overview__image {
		height: 300px;
	}
}

/* =====================================================
   RESPONSIVE — MOBILE (768px and below)
   ===================================================== */

@media (max-width: 768px) {
	.about-container {
		padding: 0 24px;
	}

	.about-hero {
		min-height: 500px;
		padding-top: 64px;
		padding-bottom: 32px;
	}

	.about-hero__title {
		font-size: 40px;
	}

	.about-hero__stats {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 48px;
	}

	.about-approach__steps {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-platforms__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.about-partners__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-overview__content h2,
	.about-platforms__header h2,
	.about-partners__header h2,
	.about-cta__title {
		font-size: 32px;
	}

	.about-approach__header h2 {
		font-size: 32px;
	}

	.about-overview__image,
	.about-fintech__image {
		height: 250px;
	}

	.about-cta__buttons {
		flex-direction: column;
		gap: 16px;
	}

	.about-cta__button {
		width: 100%;
		height: 56px;
		padding: 0 24px;
		font-size: 14px;
	}

	.about-philosophy__card {
		padding: 32px 32px 32px 36px;
	}

	.about-philosophy__quote {
		font-size: 20px;
		line-height: 32px;
	}

	.about-vision__card {
		padding: 48px 32px;
		height: auto;
		min-height: 400px;
	}

	.about-cta__subtext {
		font-size: 16px;
	}

	.about-partners__body {
		padding: 32px;
		height: auto;
		min-height: 280px;
	}
}