/*
	Theme Name: Germany Legal
	Theme URI: http://twoja-domena.pl/
	Author: Twoje Imię i Nazwisko
	Author URI: http://twoja-strona-portfolio.pl/
	Description: Profesjonalny motyw dla kancelarii adwokackiej obsługującej klientów polsko-niemieckich. Zintegrowany z Carbon Fields i Polylang.
	Version: 1.0.0
	Text Domain: germany-legal
	Tags: legal, lawyer, corporate, translation-ready, two-columns
*/

/* lora-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/lora-v37-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/montserrat-v31-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/montserrat-v31-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--primary: #35456A;
	--secondary: #2C2E35;

	--neutral-0: #F8F8F8;
	--neutral-1: #E2E2E2;

	--gold: #E3C58B;
	--gold-light: #F1DFB8;

	--text-primary: #2C2E35;
	--text-secondary: #F8F8F8; 

	--box-shadow: rgba(44, 46, 53, .06);

	--border-radius: .25rem;
}

* {
	border: none;
	box-sizing: border-box;
	font-family: 'Montserrat', Verdana, sans-serif;
	font-size: 16px;
	margin: 0;
	outline: none;
	padding: 0;
}



button:focus, 
a:focus {
    outline: none;
}


a:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
}



::selection {
	background-color: var(--gold-light);
	color: var(--secondary);
}
html {
  scroll-behavior: smooth;
}
p, li, a {
	color: var(--text-primary);
	font-weight: 400;	
	letter-spacing: 1%;
	line-height: 1.5;
	text-decoration: none;
	width: fit-content;
}

li {
	list-style-type: none;
}

a:not(.btn-primary) {
	transition: all 250ms ease-in-out;
}

a:not(.btn-primary):hover {
	color: var(--gold);
	cursor: pointer;
}

.container, .container-fluid {
	inset: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
	position: relative;
	width: 100%;
}

@media (min-width: 576px) {
    .container {
		max-width:544px;
	}
}

@media (min-width: 768px) {
    .container {
		max-width:736px;
	}

	/* .container-fluid {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	} */
}

@media (min-width: 992px) {
    .container {
		max-width:960px;
	}
}

@media (min-width: 1200px) {
    .container {
		max-width: 1168px;
	}
    
	/* .container-fluid {
		padding-left: 3rem;
		padding-right: 3rem;
	} */
}

@media (min-width: 1400px) {
    .container {
		max-width: 1368px;
	}
	
	.container-fluid {
		max-width: 1568px;
	}
}

@media (min-width: 1600px) {
    .container {
		max-width: 1520px;
		/* padding-left: 2rem;
		padding-right: 2rem; */
	}
	
	.container-fluid {
		max-width: 1720px;
		/* padding-left: 4rem;
		padding-right: 4rem; */
	}
}

.row {
	display: flex;
	padding: 2rem 0;
}

section {
	padding: 6rem 0;
}

@media (min-width: 992px) {
	section {
		padding: 7.5rem 0;
	}
}






h1, h2, h3 {
	color: var(--text-primary);
	font-family: 'Lora', Georgia, 'Times New Roman', serif;
	font-weight: 500;
	letter-spacing: 1%;
}



h1 {
	font-size: 1.75rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

p {

}

@media (max-width: 375px) {
	h1 {
	font-size: 1.625rem;
	}

	h2 {
		font-size: 1.375rem;
	}

	h3 {
		font-size: 1.125rem;
	}	

	p {
		font-size: .875rem;
	}
}

.small {
	font-size: .875rem;
}

@media (min-width: 768px) {
	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 2rem;	
	}

	h3 {
		font-size: 1.5rem;
	}
}

@media (min-width: 1200px) {
	h1 {
		font-size: 3.75rem;
	}

	h2 {
		font-size: 2.75rem;
	}

	h3 {
		font-size: 1.75rem;
	}
	
	.small {
		font-size: 1rem;
	}
}

@media (min-width: 1400px) {
	

	p, li, a, p strong, li strong, a strong, p span, li span, a span {
		font-size: 1.125rem;
	}
}








.text-block {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.text-block ul {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.text-block ul li {
	padding-left: 1.5rem;
	position: relative;
}

.text-block ul li::before {
	border: 1px solid var(--gold);
	border-radius: 50%;
	content: "";
	height: .375rem;
	left: 0;
	position: absolute;
	top: 9.5px;
	width: .375rem;
}







.gold-line {
	background-color: var(--gold);
	height: 1px;
	width: 5rem;
}

















.btn-primary {
	align-items: center;
	background: linear-gradient(60deg, var(--gold), var(--gold-light));
	border-radius: var(--border-radius);
	column-gap: .5rem;
	display: flex;
	padding: .75rem 1.25rem;
    transition: all 300ms ease-in-out;
}

.btn-primary svg {
	fill: var(--primary);
	height: 1.25rem;
	width: 1.25rem;
}

.btn-primary span {
	color: var(--primary);
	font-size: 1rem;
}

@media (min-width: 992px) {
	.btn-primary span {
		font-size: 1.125rem;
	}
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-nav span {
	display: none;
}

@media (min-width: 768px) {
	.btn-nav span {
		display: inline-block;
	}
}















/* Front Page */

.hero-section {
	background: linear-gradient(0deg, rgba(44, 46, 53, .9) 20%, rgba(44, 46, 53, 0) 80%);
	margin: 0 auto;
	max-width: 2560px;
	padding: 4rem 0;
	position: relative;
}

.hero-section > img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	/* object-position: center calc(50% + 10rem); */
	position: absolute;
	width: 100%;
	z-index: -1;
}

@media (min-width: 1600px) {
	.hero-section > img {
		object-position: center calc(50% + 5rem);
	}
}

.hero-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: end;
	height: 70lvh;
	max-height: 72rem;
	min-height: 36rem;
	padding: 2rem 2rem 3rem 2rem;
	row-gap: 2rem;
}

@media (min-width: 768px) {
	.hero-wrapper {
		/* min-height: 44rem; */
		padding: 3rem 2rem 4rem 2rem;
	}
}

@media (min-width: 1200px) {
	.hero-wrapper {
		/* min-height: 36rem; */
		padding: 4rem 2rem 3rem 2rem;
	}
}

.not-home .hero-wrapper {
	height: 50lvh;
	max-height: 36rem;
	min-height: 18rem;
}

.hero-wrapper h1, .hero-wrapper p {
	color: var(--text-secondary);
	text-align: center;
}

.hero-wrapper p {
	font-size: 1.125rem;
}

@media (min-width: 768px) {
	.hero-wrapper p {
		font-size: 1.25rem;
	}
}

@media (min-width: 1200px) {
	.hero-wrapper p {
		font-size: 1.375rem;
	}
}



.info-section {
	padding: 0;
}

.info-box {
	background-color: var(--neutral-0);
	border: 1px solid var(--neutral-1);
	border-radius: var(--border-radius);
	box-shadow: 0 .5rem 1rem var(--box-shadow);
	/* bottom: -2rem; */
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto;

	/* height: fit-content; */
	/* left: 50%; */
	/* position: absolute; */
	/* transform: translateX(-50%); */
	margin: -3rem auto 0 auto;
	width: fit-content;
	/* width: fit-content; */
}

@media (min-width: 768px) {
	.info-box {
		grid-template-columns: 1fr 1px 1fr auto;
		grid-template-rows: 1fr;
	}
}

.info-box-elements {
	align-items: center;
	display: flex;
	flex-direction: column;
	/* column-gap: 1rem; */
}

@media (min-width: 768px) {
	.info-box-elements {
		flex-direction: row;
	}
}

.info-box-element {
	align-items: center;
	column-gap: 1rem;
	display: flex;
	/* flex-shrink: 0; */
	padding: 1.5rem 2rem;
}

.info-box-element p {
	/* flex-shrink: 0; */
}

@media (min-width: 992px) {
	.info-box-element p {
		/* white-space: nowrap; */
	}
}

.info-box-element svg {
	flex-shrink: 0;
	fill: var(--text-primary);
	height: 2rem;
	width: 2rem;
}

.info-box-gold-line {
	background-color: var(--gold);
	height: 1px;
	margin-left: 2rem;
	width: calc(100% - 4rem);
}

@media (min-width: 768px) {
	.info-box-gold-line {
		height: calc(100% - 3rem);
		margin-left: 0;
		margin-top: 1.5rem;
		width: 1px;
	}
}

.info-box-more {
	background-color: var(--gold-light);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 2rem;
	width: 100%;
	height: 100%;
}

.info-box-more svg {
	fill: var(--primary);
	height: 1.5rem;
	width: 1.5rem;
}


.about-me-section {
	/* padding-bottom: 7.5rem;
	padding-top: 7.5rem; */
}

.about-me-wrapper {
	display: grid;
	gap:  4rem 8rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	position: relative;
}

@media (min-width: 992px) {
	.about-me-wrapper {
		grid-template-columns: 1fr 25rem;
		grid-template-rows: auto;
	}
}

.about-me-wrapper::before {
	background-image: url('images/background-logo-part.png');
    background-repeat: no-repeat;
    background-size: cover;
	content: '';
	height: 16rem;
	left: -1rem;
	position: absolute;
	top: -2rem;
	width: 16rem;
	z-index: -1;
}

@media (min-width: 992px) {
	.about-me-wrapper::before {
		height: 32rem;
		left: -5rem;
		width: 32rem;
		top: -5rem;
	}
}

.about-me-text {
	display: flex;
	flex-direction: column;
	row-gap: 3rem;
}

.about-me-text .text-block p:nth-of-type(1), .about-me-text .text-block p:nth-of-type(2) {
	padding-left: 1.5rem;
	position: relative;
}

.about-me-text .text-block p:nth-of-type(1)::before, .about-me-text .text-block p:nth-of-type(2)::before {
	/* background-color: var(--gold-light); */
	border: 1px solid var(--gold);
	border-radius: 50%;
	content: "";
	height: .375rem;
	left: 0;
	position: absolute;
	top: 9.5px;
	width: .375rem;
}

.signature {
	color: var(--gold);
}

.about-me-image {
	max-height: 32rem;
}

.about-me-image img {
	border-radius: var(--border-radius);
	height: 100%;
	object-fit: cover;
	object-position: 50% 10%;
	width: 100%;
}




.specializations-section {
	background: linear-gradient(-60deg, var(--primary), var(--secondary));
	border-bottom: 1px solid var(--neutral-1);
}

.specializations-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	row-gap: 3rem;
}

.specializations-wrapper h2 {
	color: var(--text-secondary);
	text-align: center;
}

.specializations-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.specializations-flex div {
	/* background-color: var(--gold-light); */
	border: 1px solid var(--gold-light);
	border-radius: var(--border-radius);
	box-shadow: 0 .5rem 1rem var(--box-shadow);
	align-items: center;
	display: flex;
	width: 100%;
	column-gap: 1rem;
	justify-content: start;
	padding: 1rem;
	transition: all 300ms ease-in-out;
}

@media (min-width: 768px) {
	.specializations-flex div {
		width: fit-content;
	}
}

.specializations-flex div:hover {
	/* background-color: var(--gold-light); */
}

.specializations-flex div p {
	color: var(--text-secondary);
}

.specializations-flex div:hover p {
	/* color: var(--text-primary); */
}

.specializations-flex div svg {
	fill: var(--gold-light);
	height: 2rem;
	width: 2rem;
}

.specializations-flex div:hover svg {
	/* fill: var(--text-primary); */
}

.specializations-flex a div {
	background-color: var(--gold-light);
	border: 1px solid var(--gold-light);
	
}

.specializations-flex a {
	width: 100%;
}

@media (min-width: 768px) {
	.specializations-flex a {
		width: fit-content;
	}
}

.specializations-flex a div:hover {
	background-color: var(--gold);
	border: 1px solid var(--gold);
}

.specializations-flex a div p {
	color: var(--text-primary);
}

.specializations-flex a div svg {
	fill: var(--text-primary);
}


.benefits-section {
	background-color: var(--neutral-0);
}

.benefits-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	row-gap: 3rem;
}

.benefits-wrapper h2 {
	text-align: center;
}

.benefits-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto;
}

@media (min-width: 768px) {
	.benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 1fr 1fr;
	}
}

@media (min-width: 1200px) {
	.benefits-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: 1fr;
	}
}

.benefit {
	border: 1px solid var(--neutral-1);
	border-radius: var(--border-radius);
	box-shadow: 0 .5rem 1rem var(--box-shadow);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr;
	padding: 3rem 2rem;
	row-gap: 3rem;
}

.benefit:nth-of-type(1) {
	background: linear-gradient(15deg, var(--secondary), var(--primary));
	border: none;
}

.benefit:nth-of-type(1) h3, .benefit:nth-of-type(1) p {
	color: var(--text-secondary);
}

.benefit svg {
	fill: var(--gold);
	height: 4rem;
	width: 4rem;
}

.benefit > div {
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.faq-section {
	/* background-color: var(--neutral-0);
	border-top: 1px solid var(--neutral-1); */
}

.faq-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	row-gap: 3rem;
}

.faq-wrapper h2 {
	text-align: center;
}

.faq-grid {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}
			
.faq-position {
	column-gap: 1rem;
	display: grid;
	grid-template-columns: 1rem 1fr 3rem;
	grid-template-rows: auto 0fr;
	row-gap: 1rem;
	transition: all 200ms ease-in-out;
}

.faq-position.open {
	grid-template-rows: auto 1fr;
}

.question {
	cursor: pointer;
	/* font-weight: 500; */
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
}

.faq-position div {
	align-items: center;
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 .5rem 1rem var(--box-shadow);
	cursor: pointer;
	display: flex;
	grid-column: 3 / span 1;
	grid-row: 1 / span 1;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.faq-position div svg {
	fill: var(--gold);
	height: 2rem;
	transition: all 200ms ease-in-out;
	width: 2rem;
}

		.faq-position.open div svg {
			transform: rotate(90deg);
		}

		

		.answer {
			background: linear-gradient(60deg, var(--gold), var(--gold-light));
			/* border: 1px solid var(--neutral-0); */
			border-radius: var(--border-radius);
			box-shadow: 0 .5rem 1rem var(--box-shadow);
			
			display: flex;
			flex-direction: column;
			grid-column: 1 / span 2;
			grid-row: 2 / span 1;
			opacity: 0;
			overflow: hidden;
			padding: 0 2rem;
			row-gap: .375rem;
			transition: all 100ms ease-in-out;
		}

		.faq-position.open .answer {
			opacity: 1;
			padding: 1rem 2rem;
		}





























.specialization-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	row-gap: 3rem;
}

.specialization-wrapper::before {
	background-image: url('images/background-logo-part.png');
    background-repeat: no-repeat;
    background-size: cover;
	content: '';
	height: 16rem;
	left: -1rem;
	position: absolute;
	top: -2rem;
	width: 16rem;
	z-index: -1;
}

@media (min-width: 992px) {
	.specialization-wrapper::before {
		height: 32rem;
		left: -5rem;
		width: 32rem;
		top: -5rem;
	}
}





















footer {
	width: 100%;
}

footer p, footer a, footer strong {
	color: var(--text-secondary);
}

footer > div:nth-of-type(1) {
	background: linear-gradient(15deg, var(--secondary), var(--primary));
	padding: 3rem 0;
	/* width: 100%; */
}

footer > div:nth-of-type(2) {
	background: var(--secondary);
	padding: 1.5rem 0;
	/* width: 100%; */
}

.company-info {
	display: grid;
	gap: 3rem 4rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

@media (min-width: 992px) {
	.company-info {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto;
	}
}

.company-info > div:first-of-type {
	align-items: start;
	gap: 1.5rem;
	display: flex;
	flex-direction: column;
}

@media (min-width: 576px) {
	.company-info > div:first-of-type {
		flex-direction: row;
	}
}

.logo-footer {
	filter: brightness(1.5) grayscale(100%);
	opacity: .8;
	width: 14rem;
}

.social-media {
	align-items: center;
	display: flex;
}

.social-media svg {
	fill: var(--text-secondary);
	height: 2rem;
	width: 2rem;
}

.company-info > div:last-of-type {
	display: grid;
	gap: 3rem 4rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;	
}

@media (min-width: 576px) {
	.company-info > div:last-of-type {
		grid-template-columns: auto auto;
		grid-template-rows: auto;
	}
}

.company-info > div:last-of-type > div {
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
}

.phone, .email {
	align-items: center;
	display: flex;
	column-gap: .75rem;
}

.phone svg, .email svg {
	fill: var(--text-secondary);
	height: 1.5rem;
	width: 1.5rem;
}

.copyright {
	display: grid;
	gap: .25rem 2rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

@media (min-width: 576px) {
	.copyright {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto;
	}
}