/* ANIMACJA PULSUJĄCY PRZYCISK */

@keyframes pulse {
	from {
		transform: scale(1);
		opacity: 0.5;
	}
	to {
		transform: scale(1.4);
		opacity: 0;
	}
}

/* RESET CSS */

*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*::selection {
	color: white;
	background-color: #2fa4db;
}

html,
body {
	height: 100%;
}

html {
	font-size: 10px;
	font-family: 'Montserrat', sans-serif;
	color: #ffffff;
	scroll-behavior: smooth;
}

/* OGÓLNE */

section {
	padding: 4.5em 0.5em;
	text-align: center;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	height: auto;
	pointer-events: none;
}

p {
	font-size: 1.3rem;
	font-weight: 350;
	line-height: 170%;
}

button {
	font-family: inherit;
	text-decoration: none;
	border: none;
	border-radius: unset;
	cursor: pointer;
}

input {
	font-family: inherit;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1,
h2 {
	font-family: 'Audiowide', serif;
}

h1 {
	font-size: 3.3rem;
	text-transform: uppercase;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}

h2 {
	font-size: 3rem;
	margin-bottom: 0.5em;
}

h3 {
	color: #ffffff;
	font-weight: 500;
}

section {
	overflow: hidden;
}

.wrapper {
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}

.section-wrapper {
	padding: 0 2em 2em;
}

.white-section {
	background-color: #fafafa;
}

.white-section h2 {
	color: #0f6993;
}

.white-section p {
	color: #0a3548;
}

.dark-section {
	background-color: #082738;
}

/* HERO SEKCJA + NAWIGACJA*/

.header {
	width: 100%;
	height: 100%;
	background-image: url(../img/bg-img-mobile.webp);
	background-size: cover;
	background-position: top;
	background-position-y: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.header-error {
	height: 100%;
}

.header-bgc,
.header-bgc-gradient {
	position: absolute;
	left: 0;
	width: 100%;
}

.header-bgc {
	height: 100%;
	background-color: rgba(1, 17, 29, 0.712);
}

.header-bgc-gradient {
	height: 33.3%;
	background: linear-gradient(180deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
}

.nav {
	font-family: 'Audiowide', serif;
}

.nav-wrapper {
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.5s;
	z-index: 101;
}

.nav-wrapper-bg {
	background: linear-gradient(180deg, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
}
.nav-wrapper-bga {
	background: #082738ee;
}

.nav-items {
	display: flex;
	max-width: 1800px;
	justify-content: center;
	align-items: center;
}

.logo {
	opacity: 100%;
	padding: 2em;
	transition: all 0.5s;
}

.logo a {
	position: relative;
	display: inline-block;
	max-width: 60%;
}

.logo a img {
	width: 100%;
}

.none {
	opacity: 0%;
}

.nav-bgc {
	background: none;
}

.nav-wrapper .hamburger {
	z-index: 500;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	position: absolute;
	background-color: #ffffff;
}

.nav-desktop {
	display: none;
	right: 0;
	top: 0;
	z-index: 100;
}

.nav-mobile {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #fafafa;
	transform: translateX(100%);
	transition: transform 0.5s;
	z-index: 100;
}

.nav-mobile--active {
	transform: translateX(0);
}

.nav__link {
	position: relative;
	display: inline-block;
	padding: 1.2em;
	font-size: 1.8rem;
	text-transform: uppercase;
	transition: color 0.3s;
}

.nav-mobile .nav__link {
	font-size: 1.8rem;
	color: #0a3548;
}

.nav__link:hover {
	color: #2fa4db;
}

h1 span {
	color: #2fa4db;
}

.header-text {
	position: absolute;
	top: 25%;
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 5vh;
}

.header-description {
	display: flex;
	justify-content: center;
	width: 100%;
}

.header-text p {
	font-size: 1.3rem;
}

.header-text .header-description {
	padding: 2em 1.5em;
	background-color: rgba(44, 148, 196, 15%);
	backdrop-filter: blur(6px);
}

.header-buttons-box {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}

.header-buttons-box button {
	padding: 1em 0em;
	width: 25rem;
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	border-radius: 8px;
}

.header-buttons-box .cta-btn {
	background-color: #2fa4db;
	transition: all 0.3s;
}

.header-buttons-box .cta-btn:hover {
	background-color: #0c84bb;
}

.header-buttons-box .second-cta-btn {
	background-color: rgba(255, 255, 255, 39%);
	transition: all 0.3s;
}

.header-buttons-box .second-cta-btn:hover {
	background-color: rgba(255, 255, 255, 0.267);
}

/* SEKCJA O NAS */

.about h3 {
	color: #0f6993;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 150%;
}

.container {
	margin-bottom: 3em;
	max-width: 1100px;
}

.card-item h3,
.aboutus-p {
	transition: all 0.4s;
}

.aboutus-p {
	font-weight: 300;
	line-height: 150%;
}

/* SEKCJA CENNIK */

.pricing {
	background-image: url(../img/pricing-bg-layers.svg);
	background-attachment: fixed;
	background-position: center;
}

.pricing .section-wrapper {
	margin-bottom: 2em;
}

.pricing-cards-wrapper,
.pricing-table-wrapper {
	display: flex;
	padding: 1.5em 2.8em 0em;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
	align-content: center;
}

.pricing-card-item {
	display: flex;
	padding: 3em 2em;
	width: 100%;
	max-width: 45rem;
	height: 35rem;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
	border: 1px solid #ebebeb3b;
	border-radius: 5px;
	flex-direction: column;
	justify-content: space-between;
	place-self: center;
	transition: all 0.5s;
	z-index: 1;
}

.pricing-card-item:hover {
	scale: 1.04;
	background-color: rgba(255, 255, 255, 0.15);
}

.pricing-card-item:hover .price,
.pricing-card-item:hover .card-part-1 h3 {
	color: #6fd1ff;
	scale: 1.05;
}

.pricing-card-item .card-part-1 {
	position: relative;
}

.card-part-1 {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 1.7em;
}

.pricing-h3 {
	font-size: 1.8rem;
	font-family: 'Audiowide', serif;
	text-transform: uppercase;
	text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);
	transition: all 0.5s;
}

.pricing-p {
	font-size: 1.3rem;
}

.card-line {
	width: 100%;
	margin-bottom: 1.5em;
	content: url(../img/line.svg);
}

.price {
	font-size: 3.5rem;
	font-weight: bold;
	text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);
	transition: all 0.5s;
}

.card-icon {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 50;
}

.table-section-1,
.table-section-2,
.table-section-3,
.pricing-p,
.table-row,
.table-row p {
	transition: all 0.5s;
}

.table-section-1 {
	margin-bottom: 8em;
}

.table-row:hover,
.table-section-1 .pricing-p:hover,
.table-desktop-section .table-desktop-offer:hover {
	scale: 1.04;
}

.table h3:hover,
.table-desktop-section h3:hover,
.table-row:hover p:nth-of-type(2) {
	scale: 1.04;
	color: #6fd1ff;
}

/* SEKCJE TABELI NA DESKTOP */

.table-desktop-section {
	display: none;
}

.table-desktop-section .table-desktop-offer {
	align-items: center;
	transition: all 0.5s;
}

/* KONIEC */

.table {
	margin-bottom: 3em;
	padding: 3em 2em 3em 2em;
	width: 100%;
	max-width: 45rem;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid #ebebeb3b;
	border-radius: 5px;
	backdrop-filter: blur(6px);
	z-index: 1;
}

.table h3 {
	height: 40px;
}

.pricing-table-wrapper h3 {
	margin-bottom: 2rem;
}

.table-row {
	display: flex;
	margin-bottom: 3em;
	flex-direction: column;
	gap: 1em;
}

.table-row p:nth-of-type(2) {
	font-weight: bold;
}

.arrow {
	position: relative;
	margin-top: 2em;
	background: none;
}

.header__arrow::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 99%;
	height: 97%;
	border: 2px solid #ffffff;
	border-radius: 50%;
	content: '';
	animation: pulse 2s infinite;
}

/* SEKCJA KONTAKT */

.contact .wrapper {
	display: flex;
	padding-bottom: 3em;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.contact p {
	margin-bottom: 0;
}

.contact a {
	transition: all 0.3s;
}

.contact a:hover {
	color: #2fa4db;
}

.contact-images {
	display: flex;
	flex-direction: column;
	max-width: 38.5rem;
	margin-top: 4em;
}

.contact-images img:nth-of-type(2) {
	margin: 4em 0 2em 0;
	max-width: 13em;
	place-self: center;
}

.contact p:nth-of-type(2) {
	margin-bottom: 0;
}

.contact-info {
	margin-top: 3em;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

/* SEKCJA ZAUFALI NAM */

.trusted {
	position: relative;
	background-image: url(../img/trusted-bg.webp);
	background-size: cover;
	background-position-x: 30%;
	background-position-y: top;
	z-index: 0;
}

.trusted-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(20, 65, 90, 93%);
	z-index: -1;
}

.trusted .wrapper {
	max-width: 800px;
}

.logo-wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}

.logo-wrapper .img {
	display: inline-block;
	width: 46%;
	max-width: 16rem;
	transition: all .3s;
}

.img img {
	width: 100%;
}

.img:hover {
	scale: 1.04;
}

/* SEKCJA STATUS ZAMÓWIENIA */

.input-box {
	display: flex;
	margin: 0 auto;
	padding-top: 2em;
	max-width: 50rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}

input {
	padding: 1.5em 2em;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

input:nth-of-type(1) {
	border: 1px solid rgba(0, 0, 0, 18%);
}

input:nth-of-type(2) {
	font-size: 1.4rem;
	font-weight: 500;
	text-transform: uppercase;
	color: white;
	background-color: #2fa4db;
	border: 1px solid #2786b3;
	transition: all 0.5s;
	cursor: pointer;
}

input:nth-of-type(2):hover {
	background-color: #0c84bb;
}

/* FOOTER */

.footer {
	position: relative;
	background: url(../img/footer-bg.webp);
	background-position: center;
	z-index: -2;
}

.footer-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(8, 39, 56, 93%);
	z-index: -1;
}

footer section .section-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-logo {
	margin-bottom: 4em;
	width: 100%;
	max-width: 30rem;
	display: flex;
	justify-content: center;
}

.footer-logo img {
	width: 100%;
}

.footer-logo a {
	display: inline-block;
	height: 100%;
}

.footer-box h3 {
	font-size: 1.7rem;
	text-transform: uppercase;
}

.footer-box {
	margin-bottom: 7em;
	display: flex;
	flex-direction: column;
	gap: 6em;
}

footer p {
	font-size: 1.4rem;
	font-weight: 300;
}

.footer-contact-box,
.footer-nav-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3em;
}

footer a {
	transition: all 0.5s;
}

footer a:hover {
	color: #2fa4db;
}

.fb-icon-footer {
	display: flex;
	gap: .4em;
	align-items: center;

}

.copyright {
	font-size: 1.2rem;
}

#contact,
#trusted,
#basic-pricing,
#order {
	position: relative;
	top: -45px;
}

#laptop-pricing {
	position: relative;
	top: -130px;
}

#about {
	position: relative;
	top: -85px;
}

/* MEDIA QUERIES */

@media (min-width: 390px) and (min-height: 844px) {
	h1 {
		font-size: 3.9rem;
	}

	.header-text p {
		font-size: 1.5rem;
	}

	.header-text .header-description {
		padding: 2.5em 1.5em;
	}
}

@media (min-width: 400px) and (min-height: 400px) {
	h1 {
		font-size: 3.9rem;
	}

	.header-text p {
		font-size: 1.4rem;
	}

	.header-text .header-description {
		padding: 2.5em 1.5em;
	}
}

@media (min-width: 400px) and (min-height: 700px) {
	h1 {
		font-size: 4.3rem;
	}

	.header-text p {
		font-size: 1.5rem;
	}

	.header-text .header-description {
		padding: 2.5em 1.5em;
	}

	.header-buttons-box button {
		padding: 1.2em 0;
		font-size: 1.5rem;
	}
}

@media (min-width: 450px) and (min-height: 450px) {
	h1 {
		font-size: 4.4rem;
	}

	.header-text p {
		font-size: 1.5rem;
	}
}

@media (min-width: 500px) and (min-height: 500px) {
	p {
		font-size: 1.4rem;
	}

	h1 {
		font-size: 4.8rem;
	}

	.header-text {
		gap: 5.5vh;
	}

	.header-buttons-box {
		padding: 0 2em;
	}
}

@media (min-width: 550px) and (min-height: 520px) {
	h1 {
		font-size: 5.3rem;
	}

	.header-buttons-box button {
		padding: 1.1em 0;
		font-size: 1.5rem;
	}
}

@media (min-width: 600px) and (min-height: 700px) {
	h1 {
		font-size: 6rem;
	}

	.header-text .header-description {
		padding: 3.5em 1.5em;
	}

	.header-text p {
		font-size: 1.6rem;
	}

	.header-buttons-box {
		gap: 2em;
	}

	.header-buttons-box button {
		padding: 1.3em 0;
		font-size: 1.6rem;
	}
}

@media (min-width: 768px) and (min-height: 700px) {
	h1 {
		font-size: 7.5rem;
	}
}

@media (min-width: 768px) {
	.pricing-card-item {
		max-width: 29.4rem;
	}

	.table {
		max-width: 60.3em;
		display: flex;
		gap: 1em;
	}

	.table-section-1 {
		width: 58%;
	}
}

@media (min-width: 770px) {
	.hamburger {
		display: none;
	}

	.nav-desktop {
		display: flex;
	}

	.nav-items {
		width: 100%;
		justify-content: space-between;
	}

	.nav-wrapper {
		justify-content: center;
		padding: 0 2em;
	}

	.logo {
		width: 48%;
	}

	.input-box {
		flex-direction: row;
		max-width: 90rem;
	}

	.input-box input {
		width: unset;
		height: 60px;
	}

	.input-box input:nth-of-type(1) {
		width: 50%;
	}

	.input-box input:nth-of-type(2) {
		width: 20%;
	}
}

@media (min-width: 820px) and (min-height: 1200px) {
	p {
		font-size: 1.6rem;
	}

	h1 {
		font-size: 8.5rem;
	}

	.header-text p {
		max-width: 80%;
		font-size: 1.8rem;
	}

	.header-buttons-box button {
		font-size: 1.8rem;
	}
}

@media (min-width: 912px) and (min-height: 1200px) {
	h1 {
		font-size: 9rem;
	}
}

@media (min-width: 978px) {
	.header {
		background: url(../img/bg-img-desktop.webp);
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.table-mobile-section {
		display: none;
	}

	.table-desktop-section {
		display: flex;
		flex-direction: column;
	}

	.table {
		display: flex;
		max-width: 91.3rem;
		gap: 3em;
	}

	.table-section-1 {
		width: 100%;
	}

	.table-section-1 p {
		max-width: 90%;
		justify-self: center;
	}

	.table h3 {
		height: 35px;
	}

	.table-desktop-headers,
	.table-desktop-lines,
	.table-desktop-offer {
		display: flex;
	}

	.table-desktop-offer-box {
		display: flex;
		flex-direction: column;
		gap: 3em;
	}

	.table-desktop-offer {
		gap: 10em;
		justify-content: left;
	}

	.table-desktop-offer p:nth-of-type(1) {
		max-width: 50%;
	}

	.table-desktop-offer p:nth-of-type(2) {
		font-weight: bold;
		font-size: 1.7rem;
	}

	.trusted {
		background-attachment: fixed;
	}

	#contact,
	#trusted,
	#basic-pricing,
	#order,
	#about {
		top: -90px;
	}
}

@media (min-width: 1024px) and (min-height: 1000px) {
	.header-buttons-box button {
		padding: 1.1em 2em;
		width: unset;
		font-size: 1.9rem;
	}
}

@media (min-width: 1024px) and (min-height: 1366px) {
	h1 {
		font-size: 10.5rem;
	}

	.header-buttons-box button {
		padding: 1.2em 2em;
		width: unset;
		font-size: 2.2rem;
	}
}

@media (min-width: 1142px) {
	h1 span::before {
		content: '\a';
		white-space: pre;
	}

	h1 {
		font-size: 11rem;
	}
	.header-text .header-description p {
		max-width: 75%;
	}

	.nav-desktop .nav__link {
		font-size: 2.1rem;
	}

	footer section .section-wrapper {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 15em;
	}

	.footer-box {
		padding-top: 1.5em;
		flex-direction: row;
		gap: 15em;
	}

	.footer-contact-box,
	.footer-nav-box {
		align-items: flex-start;
	}
}

@media (min-width: 1440px) {
	.trusted .wrapper {
		max-width: 1000px;
	}
}

@media (min-width: 1740px) {
	.header-text .header-description p {
		max-width: 48%;
	}

	h1 {
		font-size: 11.3rem;
	}
}

@media (min-width: 1500px) and (min-height: 800px) {
	.header {
		background-size: cover;
		background-repeat: no-repeat;
	}
}