/* =========================================================
   Lingodemy — O mnie
   ========================================================= */

.lgabout-page{
	--lga-navy:#071b3b;
	--lga-blue:#2370b2;
	--lga-yellow:#f9b821;
	--lga-yellow-dark:#df9300;
	--lga-green:#65ad4c;
	--lga-cream:#fffdf8;
	--lga-text:#59687b;
	overflow:hidden;
	background:var(--lga-cream);
	color:var(--lga-navy);
}

.lgabout-page *,
.lgabout-page *::before,
.lgabout-page *::after{box-sizing:border-box}

.lgabout-wrap{width:min(1440px,calc(100% - 80px));margin:0 auto}
.lgabout-section{position:relative;padding:105px 0}

.lgabout-kicker,
.lgabout-eyebrow{
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.14em;
}

.lgabout-kicker{
	display:inline-flex;
	padding:9px 14px;
	border-radius:999px;
	background:#fff;
	border:1px solid rgba(7,27,59,.08);
	box-shadow:0 8px 22px rgba(7,27,59,.05);
	color:var(--lga-blue);
	font-size:11px;
}

.lgabout-eyebrow{
	display:block;
	color:var(--lga-blue);
	font-size:12px;
}

.lgabout-heading{max-width:690px}

.lgabout-heading h2{
	margin:13px 0 0;
	font-size:clamp(40px,4.5vw,66px);
	line-height:1.02;
	letter-spacing:-.047em;
	font-weight:900;
}

.lgabout-heading h2 span{color:var(--lga-blue)}

.lgabout-body-copy{
	color:var(--lga-text);
	font-size:18px;
	line-height:1.78;
}

.lgabout-body-copy p{margin:0 0 21px}

.lgabout-btn{
	min-height:56px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:14px 23px;
	border-radius:18px;
	font-size:14px;
	font-weight:900;
	text-decoration:none;
	transition:.22s ease;
}

.lgabout-btn:hover{transform:translateY(-2px)}
.lgabout-btn-primary{background:var(--lga-yellow);color:var(--lga-navy);box-shadow:0 14px 30px rgba(249,184,33,.28)}
.lgabout-btn-secondary{background:#fff;color:var(--lga-navy);border:2px solid rgba(7,27,59,.08)}
.lgabout-btn-light{background:#fff;color:var(--lga-navy)}
.lgabout-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* HERO */
.lgabout-hero{
	position:relative;
	overflow:hidden;
	padding:72px 0 70px;
}

.lgabout-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at 9% 14%,rgba(249,184,33,.17),transparent 24%),
		radial-gradient(circle at 88% 18%,rgba(35,112,178,.15),transparent 27%),
		radial-gradient(circle at 75% 92%,rgba(101,173,76,.09),transparent 22%);
}

.lgabout-hero-grid{
	position:relative;
	display:grid;
	grid-template-columns:.92fr 1.08fr;
	gap:62px;
	align-items:center;
}

.lgabout-hello{
	margin-top:18px;
	color:var(--lga-yellow-dark);
	font-size:18px;
	font-weight:900;
}

.lgabout-hero-copy h1{
	max-width:760px;
	margin:8px 0 0;
	font-size:clamp(50px,5.5vw,84px);
	line-height:.97;
	letter-spacing:-.055em;
	font-weight:900;
}

.lgabout-hero-copy h1 span{
	display:block;
	color:var(--lga-blue);
}

.lgabout-lead{
	max-width:680px;
	margin:26px 0 0;
	color:var(--lga-text);
	font-size:19px;
	line-height:1.72;
	font-weight:620;
}


.lgabout-photo-wrap{
	position:relative;
	min-height:610px;
}

.lgabout-photo-bg{
	position:absolute;
	top:50%;
	left:50%;
	width:500px;
	height:500px;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background:#e9f4fc;
	border:2px dashed rgba(35,112,178,.16);
}

.lgabout-photo-card{
	position:absolute;
	z-index:2;
	top:76px;
	left:50%;
	width:385px;
	height:440px;
	transform:translateX(-50%);
	overflow:hidden;
	border-radius:42px;
	background:#fff;
	box-shadow:0 30px 75px rgba(7,27,59,.18);
	border:8px solid #fff;
}

.lgabout-photo-card img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 18%;
}

.lgabout-fact-card{
	position:absolute;
	z-index:5;
	display:flex;
	align-items:center;
	gap:14px;
	padding:16px 18px;
	border:1px solid rgba(7,27,59,.07);
	background:rgba(255,255,255,.98);
	box-shadow:0 18px 40px rgba(7,27,59,.10);
	backdrop-filter:blur(8px);
}

.lgabout-fact-icon{
	flex:0 0 48px;
	width:48px;
	height:48px;
	display:grid !important;
	place-items:center;
	padding:0;
	margin:0;
	border-radius:14px;
	background:#eef7ff;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
	font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
	font-size:24px;
	line-height:1;
	font-weight:950;
	text-align:center;
}

.lgabout-fact-card div,
.lgabout-fact-card strong,
.lgabout-fact-card div > span{
	display:block;
}

.lgabout-fact-card.fact-uk{top:22px;left:6px;width:236px;border-radius:26px 18px 28px 16px;transform:rotate(-4deg)}
.lgabout-fact-card.fact-college{top:58px;right:12px;width:232px;border-radius:18px 28px 16px 26px;transform:rotate(3deg)}
.lgabout-fact-card.fact-work{bottom:54px;left:20px;width:224px;border-radius:24px 16px 26px 20px;transform:rotate(-2deg)}
.lgabout-fact-card.fact-tefl{right:18px;bottom:42px;width:236px;border-radius:16px 26px 20px 30px;transform:rotate(4deg)}
.lgabout-fact-card.fact-uk .lgabout-fact-icon{background:#eef4ff}
.lgabout-fact-card.fact-college .lgabout-fact-icon{background:#edf7ff}
.lgabout-fact-card.fact-work .lgabout-fact-icon{background:#eef7ff}
.lgabout-fact-card.fact-tefl .lgabout-fact-icon{background:var(--lga-yellow);color:var(--lga-navy)}



/* COPY */
.lgabout-copy-grid{
	display:grid;
	grid-template-columns:.85fr 1.15fr;
	gap:75px;
	align-items:start;
}

.lgabout-quote{
	position:relative;
	margin-top:28px;
	padding:26px 29px;
	border-radius:24px;
	background:#eef7ff;
	color:var(--lga-navy);
}

.lgabout-quote > span{
	position:absolute;
	top:0;
	right:20px;
	color:rgba(35,112,178,.14);
	font:80px/1 Georgia,serif;
}

.lgabout-quote p{
	position:relative;
	z-index:1;
	margin:0;
	font-size:18px;
	font-weight:850;
	line-height:1.6;
}

/* DARK */
.lgabout-dark{
	overflow:hidden;
	background:linear-gradient(180deg,#0b244a 0%, var(--lga-navy) 100%);
	color:#fff;
}



.lgabout-heading-light .lgabout-eyebrow{color:var(--lga-yellow)}
.lgabout-heading-light h2 span{color:var(--lga-yellow)}

.lgabout-body-copy-light{
	color:rgba(255,255,255,.67);
}

.lgabout-values{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:10px;
	margin-top:28px;
}

.lgabout-values div{
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:17px;
	background:rgba(255,255,255,.055);
	color:#fff;
}

.lgabout-values span{font-size:25px}
.lgabout-values strong{font-size:14px}

.lgabout-dark{
	position:relative;
	overflow:hidden;
	background:linear-gradient(
		180deg,
		#0b244a 0%,
		var(--lga-navy) 100%
	);
	color:#fff;
}

.lgabout-dark::after{
	content:"";
	position:absolute;
	z-index:1;
	left:-10%;
	right:-10%;
	bottom:-68px;
	height:125px;
	background:#f7fafc;
	border-radius:50% 50% 0 0 / 100% 100% 0 0;
	pointer-events:none;
}

.lgabout-dark > .lgabout-wrap{
	position:relative;
	z-index:2;
}

.lgabout-dark + .lgabout-section{
	margin-top:0;
	padding-top:105px;
	background:linear-gradient(
		180deg,
		#f7fafc 0%,
		var(--lga-cream) 190px,
		var(--lga-cream) 100%
	);
}

/* CHILDREN */
.lgabout-children-grid{
	display:grid;
	grid-template-columns:1.06fr .94fr;
	gap:70px;
	align-items:center;
}

.lgabout-children-grid .lgabout-heading h2{margin-bottom:24px}

.lgabout-children-visual{
	position:relative;
	min-height:590px;
	overflow:hidden;
	border-radius:34px;
	background:linear-gradient(135deg,#fff4cf,#eaf5ff);
	box-shadow:0 24px 60px rgba(7,27,59,.11);
}

.lgabout-children-ring{
	position:absolute;
	inset:60px 56px 54px;
	border-radius:50%;
	border:2px dashed rgba(35,112,178,.16);
}

.lgabout-child-char{
	position:absolute;
	bottom:0;
	object-fit:contain;
	filter:drop-shadow(0 22px 26px rgba(7,27,59,.14));
}

.child-lusiek{
	width:36%;
	left:9%;
	bottom:22px;
	transform:rotate(-4deg);
}

.child-otto{
	width:42%;
	max-height:490px;
	right:8%;
	bottom:22px;
}

.lgabout-children-note{
	position:absolute;
	top:28px;
	left:28px;
	padding:12px 15px;
	border-radius:16px;
	background:#fff;
	box-shadow:0 12px 28px rgba(7,27,59,.10);
	font-size:12px;
	font-weight:900;
}

/* LEARNING */
.lgabout-soft{background:linear-gradient(180deg,#fffdf8 0%, #f7fafc 16%, #eef5fb 100%)}

.lgabout-learning-grid{
	display:grid;
	grid-template-columns:.85fr 1.15fr;
	gap:75px;
	align-items:center;
}

.lgabout-spanish-badge{
	display:inline-flex;
	margin-bottom:21px;
	padding:13px 17px;
	border-radius:17px;
	background:var(--lga-yellow);
	color:var(--lga-navy);
	font-size:22px;
	font-weight:950;
	transform:rotate(-4deg);
	box-shadow:0 12px 24px rgba(249,184,33,.22);
}

/* BEYOND */
.lgabout-beyond{
	position:relative;
	margin-top:-26px;
	padding:0 0 105px;
	background:linear-gradient(180deg,#eef5fb 0%, var(--lga-cream) 28%, var(--lga-cream) 100%);
}

.lgabout-beyond .lgabout-wrap{padding-top:52px}

.lgabout-beyond-box{
	position:relative;
	overflow:hidden;
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:40px;
	align-items:center;
	padding:58px;
	border-radius:38px;
	background:var(--lga-blue);
	color:#fff;
	box-shadow:0 30px 80px rgba(35,112,178,.23);
}

.lgabout-beyond-kicker{
	display:inline-flex;
	padding:8px 12px;
	border-radius:999px;
	background:rgba(255,255,255,.10);
	color:var(--lga-yellow);
	font-size:11px;
	font-weight:950;
	text-transform:uppercase;
	letter-spacing:.13em;
}

.lgabout-beyond h2{
	margin:17px 0 0;
	font-size:clamp(40px,4.5vw,64px);
	line-height:1;
	letter-spacing:-.045em;
	font-weight:950;
}

.lgabout-beyond p{
	margin:20px 0 0;
	color:rgba(255,255,255,.73);
	font-size:18px;
	line-height:1.72;
}



.lgabout-beyond-visual{
	position:relative;
	min-height:330px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

.lgabout-globe-mark{
	position:relative;
	width:230px;
	height:230px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:0;
	border:2px solid rgba(255,255,255,.42);
	border-radius:50%;
	background:
		radial-gradient(circle at 32% 28%,rgba(249,184,33,.26),transparent 28%),
		rgba(255,255,255,.07);
	box-shadow:inset 0 0 0 22px rgba(255,255,255,.025),0 24px 50px rgba(7,27,59,.16);
}

.lgabout-globe-mark::before,
.lgabout-globe-mark::after{
	content:"";
	position:absolute;
	inset:24px;
	border:1px solid rgba(255,255,255,.26);
	border-radius:50%;
}

.lgabout-globe-mark::before{transform:scaleX(.46)}
.lgabout-globe-mark::after{transform:scaleY(.46)}

.lgabout-globe-line{
	position:absolute;
	background:rgba(255,255,255,.24);
}

.globe-horizontal{left:18px;right:18px;height:1px;top:50%}
.globe-vertical{top:18px;bottom:18px;width:1px;left:50%}

.lgabout-globe-core{
	position:relative;
	z-index:2;
	width:84px;
	height:84px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:0;
	border-radius:50%;
	background:var(--lga-yellow);
	color:var(--lga-navy);
	font-size:27px;
	font-weight:950;
	letter-spacing:-.04em;
	box-shadow:0 12px 30px rgba(7,27,59,.18);
}

.lgabout-language-chip{
	position:absolute;
	z-index:3;
	padding:9px 12px;
	border-radius:13px;
	background:#fff;
	color:var(--lga-navy);
	font-size:12px;
	font-weight:950;
	box-shadow:0 12px 28px rgba(7,27,59,.16);
}

.lgabout-language-chip.chip-hello{top:26px;left:9%;transform:rotate(-5deg)}
.lgabout-language-chip.chip-hola{top:56px;right:5%;transform:rotate(5deg)}
.lgabout-language-chip.chip-czesc{bottom:58px;left:4%;transform:rotate(3deg)}

.lgabout-beyond-visual > strong{
	margin-top:18px;
	color:var(--lga-yellow);
	font-size:15px;
	font-weight:950;
	letter-spacing:.03em;
}

/* FINAL */
.lgabout-final{
	padding:0 0 110px;
}

.lgabout-final-box{
	position:relative;
	overflow:hidden;
	display:grid;
	grid-template-columns:.46fr 1.15fr;
	align-items:center;
	gap:56px;
	padding:58px 70px;
	border-radius:38px;
	background:var(--lga-navy);
	color:#fff;
	box-shadow:0 28px 70px rgba(7,27,59,.18);
}

.lgabout-final-copy{
	order:2;
	position:relative;
	z-index:2;
	max-width:920px;
}

.lgabout-final .lgabout-eyebrow{color:var(--lga-yellow)}

.lgabout-final h2{
	margin:14px 0 0;
	font-size:clamp(39px,4.4vw,62px);
	line-height:1.03;
	letter-spacing:-.045em;
	font-weight:950;
}

.lgabout-final h2 span{
	display:block;
	color:var(--lga-yellow);
}

.lgabout-closing{
	margin:22px 0 0;
	color:rgba(255,255,255,.65);
	font-size:14px;
}

.lgabout-closing-signature{
	display:flex;
	flex-direction:column;
	gap:2px;
	margin-top:8px;
}

.lgabout-closing-signature strong{font-size:18px}
.lgabout-closing-signature span{color:rgba(255,255,255,.55);font-size:12px}

.lgabout-final-char{
	order:1;
	width:100%;
	max-width:390px;
	max-height:430px;
	margin:0 auto;
	align-self:end;
	object-fit:contain;
	filter:drop-shadow(0 22px 30px rgba(0,0,0,.20));
}

/* RESPONSIVE */
@media(max-width:1150px){
	.lgabout-wrap{width:min(100% - 48px,1440px)}
	.lgabout-hero-grid,
	.lgabout-copy-grid,
	.lgabout-children-grid,
	.lgabout-learning-grid{
		grid-template-columns:1fr;
	}
	.lgabout-photo-wrap{
		max-width:760px;
		width:100%;
		margin:0 auto;
	}
}

@media(max-width:820px){
	.lgabout-beyond-box{
		grid-template-columns:1fr;
	}
	.lgabout-beyond-visual{min-height:280px;margin-top:12px}
	.lgabout-final-box{
    	grid-template-columns:1fr;
    	gap:20px;
    }
    
    .lgabout-final-char{
    	order:1;
    	max-width:270px;
    	max-height:310px;
    	margin:0 auto;
    }
    
    .lgabout-final-copy{
    	order:2;
    }
}

@media(max-width:700px){
	.lgabout-wrap{width:min(100% - 28px,1440px)}
	.lgabout-section{padding:72px 0}
	.lgabout-hero{padding-top:48px}
	.lgabout-hero-copy h1{font-size:47px}
	.lgabout-lead{font-size:17px}
	.lgabout-photo-wrap{min-height:520px}
	.lgabout-photo-bg{width:360px;height:360px}
	.lgabout-photo-card{width:290px;height:330px}
	.lgabout-values{grid-template-columns:1fr}
	.lgabout-children-visual{min-height:430px}
	.child-lusiek{width:34%;left:6%}
	.child-otto{width:40%;max-height:370px;right:5%;bottom:18px}
	.lgabout-beyond-box,
	.lgabout-final-box{
		padding:42px 25px;
	}
}


@media(max-width:1150px){
	.lgabout-fact-card.fact-uk{left:2%;top:28px}
	.lgabout-fact-card.fact-college{right:2%;top:48px}
	.lgabout-fact-card.fact-work{left:4%;bottom:44px}
	.lgabout-fact-card.fact-tefl{right:4%;bottom:34px}
}

@media(max-width:700px){
	.lgabout-photo-wrap{padding-bottom:170px}
	.lgabout-fact-card{
		position:relative;
		width:calc(50% - 10px);
		display:inline-flex;
		vertical-align:top;
		margin:7px 5px 0;
		inset:auto!important;
		transform:none!important;
		border-radius:20px!important;
	}
	.lgabout-photo-card{position:relative;top:auto;left:auto;transform:none;margin:50px auto 18px}
	.lgabout-photo-bg{top:230px}
	.lgabout-beyond-visual{min-height:300px}
	.lgabout-globe-mark{width:200px;height:200px}
	.lgabout-language-chip.chip-hello{left:1%}
	.lgabout-language-chip.chip-hola{right:1%}
}