/*
	main.css
	- for use on the homepage embed.
*/

@import 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';

*{box-sizing:border-box;}
.leader-line{mix-blend-mode:multiply;}

[pyramid]{
	--purple: 	 #4E339A;
	--purple-10: #F9F7FF;
	--purple-20: #B9A6EF;
	--grey: 	 #808080;
	--gradient1: linear-gradient(79deg, #381C88 0%, #4E339A 100%);
	--gradient2: linear-gradient(251deg, #6546BD 0%, #5331B6 100%);
	--padding:	 clamp(30px, 3vw, 50px); /*max(40px, 3%);*/
	--padding-s: max(25px, 5%);
	
	--font-xl:	clamp(3rem, 5vw, 4rem);
	--font-l:	clamp(1.5rem, 3vw, 2.7rem);
	--font-m:	clamp(1.2rem, 3vw, 1.5rem);
	--font-n:	clamp(1rem, 3vw, 1rem);
	--font-s:	clamp(0.8rem, 3vw, 0.9rem);
	--font-bigger:	clamp(1.1rem, 3vw, 1.3rem);
	
	width:1300px;
	max-width:100%;
	margin:auto;
	padding:0 var(--padding);
	line-height:1.5;
	box-sizing:border-box;

	*{box-sizing:border-box;}
	h2{
		font-size:var(--font-l);
		text-transform:uppercase;font-weight:500;color:white;
		span{color:var(--purple-20);}
	}
	h3{font-size:var(--font-m);}
	p{font-size:17px;hyphens:auto;overflow-wrap:break-word;}
	img{display:inline-block;vertical-align:baseline;}
	
	[head]{
		text-align:center;
		justify-content:center;
		align-items:center;
		display:flex;
		background:var(--gradient1);
		padding:var(--padding);
		position:relative;
		&>*{color:var(--purple-20);margin:0;}
		h2{margin-bottom:1rem;}
		p{text-wrap: balance;}
		strong{color:white;font-weight:normal;}
		background{
			display:block;background:var(--gradient1);
			width:100vw;margin-left: calc((100vw - 100%) / -2);
			z-index:-1;position:absolute;inset:0;
		}
		[content]{max-width:630px;}
	}
	
	&>[head]{
		gap: 20px;
		background:none;
		padding:var(--padding) 0;
		@media (max-width:700px){
			&{flex-direction:column-reverse;}
		}
	}
	
	[cards]{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		gap:5%;row-gap:30px;
		min-width:1px;
		padding:var(--padding) 0;
		&>*{flex:1;}
		
		[card]{
			background:var(--purple-10); 
			position:relative;
			width:320px;
			min-width:290px;
			max-width:100%;
			[head]{
				display:flex;
				align-items:end;
				justify-content:start;
				padding:25px var(--padding);
				&>*{line-height:1;}
				span{font-size:var(--font-xl);font-weight:700;margin-bottom:-0.1em;
					font-family:'poppins', sans-serif;opacity:0.3;display:inline-block;width:1px;}
				h3{color:white;}
			}
			[content]{
				padding:var(--padding);
				&>*{font-size:0.9rem;font-weight:normal;color:var(--grey);margin:0;line-height:1.4;}
				&>*:first-child{margin-top:0;}
				h4{color:var(--purple);margin-top:20px;}
				p{}
			}
			
			&:after{
				content:"";display:block;
				background:no-repeat url('../img/shadow.png');
				background-size:100% 100%;
				position:absolute;top:100%;left:0;
				width:100%;height:35px;
			}
		}
		
		[logo="round"]{
			width:100%;
			flex:unset;
			flex-shrink:0;
			display:flex;
			text-align:center;
			justify-content:space-evenly;
		}
		
		@media (max-width:800px){
			&{ row-gap:50px;}
			& [logo="round"]{padding: 100px 0;}
		}
	}
	
	h2[extralarge]{
		color:var(--purple-10);
		font-weight:bold;
		font-size:clamp(30px, 10vw, 157px);
		text-transform:uppercase;
		text-align:center;
		margin:0 0 -1vw 0;
		line-height:1;
	}
	
	[solution]{
		margin-top:50px;
		
		[head]{
			flex-direction:column;
			align-items: center;
			padding:var(--padding) var(--padding-s);
			[logo]{margin-top:calc((var(--padding) * -1) - 44px);}
		}
		&>[content]{
			display:flex;
			flex-wrap:wrap;
			gap:5%;min-width:1px;
			padding:var(--padding);
			background:var(--purple-10);
			&>*{flex:1;max-width:100%;width:320px;min-width:250px;color:var(--purple);font-weight:600;font-size:var(--font-bigger);}
		}
		[foot]{
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content: center;
			gap:0px;
			padding:var(--padding);
			color:var(--purple);
			&>*{margin:0;}
		}
	}
}