/*!
Theme Name: arkzy
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: arkzy
*/
@import url('satoshi.css');

/* fix */
html, body, * {
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	text-transform: lowercase;
}
*, :after, :before {
    box-sizing: border-box;
}

:root {
	--brand-1: #161514;
	--brand-2: #F76501;
	--brand-3: #FFFFFF;
	--text: #737372; /* brand-1 opacity 60 */
	--borders: #E8E8E8; /* brand-1 opacity 10 */
}

/* typography */
body, html {
	font-family: 'Satoshi-Variable';
	color: var(--text);
}
a, a:visited {
	color: var(--brand-2);
	font-weight: 700;
	text-decoration: none;
	transition: all 200ms;
}
a:hover {
	opacity: .6;
}
a.cta-button {
	display: inline-block;
}
a.cta-button span {
	display: block;
	border-bottom: 2px solid var(--brand-2);
}

h1 {
	font-size: 56px;
	color: var(--brand-1);
	font-weight: 400;
	margin-bottom: 40px;
}
h2 {
	font-size: 48px;
	color: var(--brand-1);
	font-weight: 400;
	margin-bottom: 80px;
}
h3 {
	font-size: 32px;
	color: var(--brand-1);
	font-weight: 400;
	margin-bottom: 20px;
}
h4 {
	font-size: 24px;
	color: var(--brand-1);
	font-weight: 400;
	margin-bottom: 20px;
}
h5 {
	font-size: 16px;
	color: var(--brand-1);
	font-weight: 400;
	margin-bottom: 20px;
}

p {
	font-size: 18px;
}
.heading-subtitle {
	font-size: 12px;
	letter-spacing: 0.2em;
}

.bolder {
	font-weight: 700;
}

/* #header */
#header {
	padding: 40px 80px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9;
}
.header-logo {
	width: 150px;
	height: auto;
	display: block;
}
.header-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 80px;
}
.header-menu ul li a {
	font-weight: 400;
	color: var(--brand-1);
}
.header-menu ul li:last-child a {
	color: var(--brand-2);
}
.mobile-menu-toggler {
	display: none;
}

/* #hero */
#hero {
	background-image: url('assets/img/hero-background.svg');
	background-color: var(--brand-3);
	background-position: bottom center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 320px 0;
}
.hero-content {
	max-width: 1600px;
	margin: 0 auto;
	text-align: center;
}
.hero-content-description {
	max-width: 850px;
	margin: 40px auto;
}
.hero-columns {
	display: flex;
	text-align: left;
	flex-wrap: wrap;
	gap: 80px;
	align-items: center;
}
.hero-column {
	flex: 0 0 calc((100% - 80px) / 2);
}
.hero-column-image {
	max-width: 100%;
	width: 100%;
}

/* #oferta */
#oferta {
	margin: 80px 0;
}
.oferta-content {
	max-width: 1600px;
	margin: 0 auto;
}
.oferta-box-wrap {
	display: flex;
	gap: 80px 160px;
	flex-wrap: wrap;
}
.oferta-box-item {
	display: flex;
	flex: 0 0 calc(50% - 80px);
	gap: 40px;
}
.oferta-box-icon {
	height: 80px;
	width: 80px;
	flex: 0 0 80px;
	display: block;
}
.oferta-box-content h3 a {
    color: var(--brand-1);
    font-weight: 400;
}
.oferta-columns-5, .oferta-columns-4 {
	gap: 40px;
}
.oferta-columns-5 .oferta-box-item {
	flex: 0 0 calc(20% - 40px);
}
.oferta-columns-4 .oferta-box-item {
	flex: 0 0 calc(25% - 30px);
}
.oferta-columns-5 h3, .oferta-columns-4 h3 {
	font-size: 24px;
	min-height: 64px;
}
.oferta-columns-5 p, .oferta-columns-4 p {
	font-size: 16px;
}
.oferta-box-icon-top {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 20px;
}

/* #portfolio */
#portfolio {
	margin: 160px 0;
}
.portfolio-content {
	max-width: 1600px;
	margin: 0 auto;
}
.portfolio-box-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 80px 0;
}
.portfolio-box-item {
	flex: 0 0 100%;
	display: flex;
	gap: 80px;
	align-items: center;
}
.portfolio-box-image {
	flex: 0 0 66%;
	height: 400px;
	object-fit: cover; 
	border: 1px solid var(--brand-2);
}
.portfolio-box-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}
.portfolio-box-tags a {
	color: var(--brand-1);
	font-size: 14px;
	font-weight: 400;
}
.portfolio-box-title {
	margin-bottom: 80px;
}
.portfolio-box-title a {
	font-size: 24px;
	font-weight: 700;
	color: var(--brand-1);
}
.portfolio-box-excerpt {
	margin-bottom: 80px;
}

/* #klienci */
#klienci {
	margin: 160px 0;
}
.klienci-content {
	margin: 0 auto;
	max-width: 1600px;
}
.klienci-swiper-slide {
	border: 1px solid var(--borders);
	height: 160px !important;
	padding: 40px;
	display: flex;
	align-items: center;
}
.klienci-swiper-image {
	width: 100%;
	height: auto;
	max-width: 140px;
    margin: 0 auto;
	max-height: 80px;
	object-fit: contain;
}

/* #kontakt */
#kontakt {
	margin: 160px 0;
	position: relative;
}
#kontakt:before {
    content: '';
    display: inline-block;
    width: 50%;
    height: 100%;
    background-image: url('assets/img/kontakt-info-background.svg');
    background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    left: 0;
	border: 1px solid var(--borders);
	z-index: -1;
}
.kontakt-content {
	margin: 0 auto;
	max-width: 1600px;
	display: flex;
	gap: 160px;
}
.kontakt-info {
	padding: 80px 0;
	flex: 0 0 calc(50% - 80px);
}
.kontakt-leave-a-message {
	padding: 80px 0;
	flex: 0 0 calc(50% - 80px);
}
.kontakt-mail {
	font-size: 24px;
	font-weight: 700;
	color: var(--brand-2);
	margin-top: 80px;
	display: inline-block;
}

/* wpcf-7 */
.wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
	border: 1px solid var(--borders);
	width: 100%;
	font-family: 'Satoshi-Variable';
	font-weight: 400;
	color: var(--brand-1);
	font-size: 14px;
	padding: 20px;
	margin-bottom: 20px;
	transition: all 200ms;
}
.wpcf7-form-control-wrap textarea {
	border: 1px solid var(--borders);
	width: 100%;
	font-family: 'Satoshi-Variable';
	font-weight: 400;
	font-size: 14px;
	color: var(--brand-1);
	resize: none;
	padding: 20px;
	transition: all 200ms;
	margin-bottom: 20px;
}
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 12px;
	font-weight: 400;
	color: var(--brand-1);
}

/* checkbox */
.wpcf7-acceptance {
    display: block;
    margin: 10px 0 0;
}
.wpcf7-acceptance .wpcf7-list-item {
    display: block;
}
.wpcf7-acceptance .wpcf7-list-item input[type=checkbox] {
    display: none;
}
.wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .wpcf7-acceptance .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before {
    background: var(--brand-2);
	border: 1px solid var(--brand-2);
}
.wpcf7-acceptance .wpcf7-list-item-label {
    display: flex;
    align-items: center;
}
.wpcf7-acceptance .wpcf7-list-item-label::before {
	content: "";
	height: 30px;
	width: 30px;
	border: 1px solid var(--borders);
	display: inline-block;
	transition: all 200ms;
	margin-right: 10px;
}
.wpcf7-acceptance .wpcf7-list-item-label:hover {
    cursor: pointer;
}
/* .wpcf7-acceptance .wpcf7-list-item-label a {
	margin-left: 5px;
} */
.wpcf7-spinner {
	display: none;
}
.wpcf7-not-valid-tip {
	margin-bottom: 20px;
	font-size: 12px;
}

/* submit */
.wpcf7-submit {
	border: none;
	border-bottom: 2px solid var(--brand-2);
	background: none;
	font-weight: 700;
	font-size: 16px;
	color: var(--brand-2);
	transition: all 200ms;
}
.wpcf7-submit:hover {
	cursor: pointer;
	opacity: .6;
}
.form-bottom {
	display: flex;
    justify-content: space-between;
    align-items: center;
}
:focus-visible {
	outline: none;
	border-color: var(--brand-1) !important;
}

/* #footer */
#footer {
	margin: 160px 0;
}
.footer-content {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}
.footer-column {
	flex: 0 0 calc(25% - 60px);
}
.footer-column:not(.first-column) {
	margin-top: 20px;
}
.footer-logo {
	height: 20px;
	width: auto;
	display: block;
}
.footer-widget-content p, .footer-widget-content a {
	font-size: 12px;
}
.footer-widget-content .footer-tag-link {
	color: var(--text);
	font-weight: 400;
}
.footer-widget-mail {
	font-weight: 700;
}
.footer-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-menu ul li {
	line-height: 1;
}
.footer-menu ul li a {
	font-size: 12px;
	font-weight: 400;
	color: var(--text);
}

/* .footer-legal */
.footer-legal {
	border-top: 1px solid var(--brand-2);
	flex: 0 0 100%;
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
}
.footer-legal p, .footer-legal a {
	font-size: 12px;
	font-weight: 400;
	color: var(--text);
}

/* page single */
#hero.page-hero {
	padding: 160px 0;
}
.page-content {
	margin: 0 auto;
	max-width: 1600px;
}
.page-content ul, .page-content ol {
	padding-left: 40px;
}
.page-content h3 {
	margin-top: 40px;
}

/* post single */
.page-featured-image {
	width: 100%;
	height: auto;
	display: block;
	max-height: 600px;
    object-fit: cover;
	margin-bottom: 80px;
	border: 1px solid var(--brand-2);
}
.page-hero .portfolio-box-tags {
	justify-content: center;
}
.page-hero .portfolio-box-tags a {
	font-size: 20px;
}
.post-content {
	max-width: 1000px;
	margin: 0 auto;
}
.post-content p {
	margin-bottom: 20px;
}
.post-content p.project-details-title {
    font-size: 24px;
    color: var(--brand-1);
    font-weight: 400;
    margin-bottom: 20px;
	margin-top: 40px;
}
.post-content .project-details-value {
    font-size: 18px;
	color: var(--text);
	font-weight: 400;
	margin-top: 20px;
	margin-bottom: 20px;
}
.post-content img {
	border: 1px solid var(--brand-2);
	margin-top: 20px;
	margin-bottom: 20px;
}
.post-content img, .post-content figure {
	max-width: 100%;
}
.post-content figcaption {
	text-align: center;
	font-size: 12px;
}

/* contact-page */
#kontakt-page:before {
	content: none !important;
}
#kontakt-page .kontakt-content {
	flex-wrap: wrap;
	gap: 0;
	max-width: none;
}
#kontakt-page .kontakt-info {
	flex: 0 0 100%;
	background-image: url('assets/img/kontakt-info-background.svg');
	background-size: cover;
	border: 1px solid var(--borders);
	padding: 80px 40px;
}
#kontakt-page .kontakt-leave-a-message {
	flex: 0 0 100%;
	padding: 80px 40px;
}
.kontakt-content-page {
	max-width: 1000px;
	margin: 0 auto;
}

/* columns */
.content-columns {
	max-width: 1600px;
	margin: 0 auto;
}
.page-columns-2 {
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}
.page-column {
	flex: 0 0 calc(50% - 40px);
}

/* work-gallery */
.work-gallery {
	display: flex;
	gap: 80px;
	flex-wrap: wrap;
}
.work-gallery-image-wrap {
	flex: 0 0 calc((100% / 3) - 60px);
	text-align: center;
}
.work-gallery-image {
	max-width: 100%;
}
.work-gallery-image-wrap .cta-button {
	margin-top: 40px;
}

/* oferta-www */
.oferta-www {
	margin-top: 160px;
	margin-bottom: 160px;
}
.oferta-www .content-columns {
	background-image: url(assets/img/kontakt-info-background.svg);
    background-size: cover;
    border: 1px solid var(--borders);
	padding: 80px;
}
.oferta-kontakt:before {
	width: 100% !important;
}

/* ul styles */
.page-column ul, .list-style ul {
	font-size: 18px;
    margin-left: 0px;
    padding-left: 8px;
    list-style: none;
	margin-top: 20px;
	margin-bottom: 20px;
}
.page-column li, .list-style li {
	padding-left: 24px;
	margin-top: 8px;
}
.page-column li:before, .list-style li:before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 16px;
	background: var(--brand-2);
	display: inline-block;
	margin-right: 8px;
	vertical-align: top;
	margin-top: 10px;
	margin-left: -14px;
}

/* 1600 - 768 */
@media screen and (min-width: 769px) and (max-width: 1600px) {
	.oferta-content {
		padding: 0 40px;
	}
	.portfolio-content {
		padding: 0 40px;
	}
	.klienci-content {
		padding: 0 40px;
	}
	.kontakt-content {
		padding: 0 40px;
	}
	.footer-content {
		padding: 0 40px;
	}
	.page-content {
		padding: 0 40px;
	}
	#hero {
		padding: 320px 40px;
	}
	.page-hero {
		padding: 160px 40px !important;
	}
	.content-columns {
		padding: 0 40px;
	}
}
/* mobile */
@media screen and (max-width: 768px) {
	h1 {
		font-size: 48px;
	}
	h2 {
		font-size: 40px;
	}
	h3 {
		font-size: 24px;
	}
	#header {
		padding: 40px;
	}
	.header-logo {
		height: 20px;
		width: auto;
	}
	.mobile-menu-toggler {
		display: block;
		transition: all 200ms;
	}
	.toggler-opened {
		opacity: 0.6;
	}
	#header nav {
		position: absolute;
		width: 100%;
		left: 0;
		top: 100px;
		background: var(--brand-3);
		padding: 40px;
		opacity: 0;
 		pointer-events: none;
		transition: all 200ms;
	}
	#header nav.nav-opened {
		opacity: 1;
  		pointer-events: all;
	}
	.header-menu ul {
		flex-direction: column;
	}
	#hero {
		padding: 160px 0;
	}
	.hero-content {
		padding: 0 40px;
	}
	.oferta-content {
		padding: 0 40px;
	}
	.oferta-box-item {
		flex: 0 0 100%;
	}
	.oferta-box-icon {
		height: 40px;
		width: 40px;
		flex: 0 0 40px;
	}
	.portfolio-content .heading-subtitle {
		padding: 0 40px;
	}
	.portfolio-content h2 {
		padding: 0 40px;
	}
	.portfolio-box-content {
		padding: 0 40px;
	}
	.portfolio-box-item {
		flex-wrap: wrap;
	}
	.portfolio-box-image {
		flex: 0 0 100%;
	}
	.klienci-content {
		padding: 0 40px;
	}
	.klienci-swiper-slide {
		padding: 40px;
		height: 100px !important;
	}
	#kontakt:before {
		content: none !important;
	}
	.kontakt-content {
		flex-wrap: wrap;
		gap: 0;
	}
	.kontakt-info {
		flex: 0 0 100%;
		background-image: url('assets/img/kontakt-info-background.svg');
		border: 1px solid var(--borders);
		padding: 80px 40px;
	}
	.kontakt-leave-a-message {
		flex: 0 0 100%;
		padding: 80px 40px;
	}
	.form-bottom {
		flex-wrap: wrap;
	}
	#footer {
		margin: 80px 0;
	}
	.footer-content {
		padding: 0 40px;
	}
	.footer-column {
		flex: 0 0 100%;
	}
	#hero.page-hero {
		padding: 80px 0;
	}
	.page-content {
		padding: 0 40px;
	}
	.hero-column {
		flex: 0 0 100%;
	}
	.oferta-columns-5 .oferta-box-item, .oferta-columns-4 .oferta-box-item {
		flex: 0 0 100%;
	}
	.oferta-columns-5 h3, .oferta-columns-4 h3 {
		min-height: unset;
	}
	.content-columns {
		padding: 0 40px;
	}
	.work-gallery-image-wrap {
		flex: 0 0 100%;
	}
	.work-gallery-image {
		width: 300px;
	}
}