* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body.active-modal {
	overflow: hidden;
}

body::-webkit-scrollbar {
	background: #ffffff;
	width: 8px;
}

body::-webkit-scrollbar-thumb {
	background: #0d4664;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

.container {
	max-width: 1300px;
	padding: 0 10px;
	margin: 0 auto;
}

a {
	text-decoration: none;
	cursor: pointer !important;
}

.btn {
	height: 42px;
	background: #0d4664;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	padding: 0 25px;
	line-height: 42px;
	border: none;
	border-radius: 25px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.btn img {
	width: 20px;
	height: 20px;
}

.big-btn {
	height: 50px;
	font-size: 20px;
	width: fit-content;
	line-height: 50px;
}

h2 {
	font-weight: 500;
	text-align: center;
	font-size: 36px;
	width: fit-content;
	margin: 0 auto;
	background: url("./img/icons/vector.svg") 0 0 / 100% 100% no-repeat;
	margin-bottom: 40px;
	line-height: 65px;
	text-align: center;
	width: 300px;
	height: 65px;
	color: #0d4664;
}

h3 {
	font-weight: 500;
	font-size: 26px;
}

section {
	margin: 100px 0;
}

/* Header */

header {
	padding: 15px 0;
}

header li.row {
	gap: 10px;
}

header li.row a:first-child {
	display: block;
	height: 42px;
	width: 42px;
}

header li img {
	height: 42px;
	width: 42px;
	align-items: center;
}

.header__menu-list {
	list-style: none;
}

.header__menu-list a {
	font-weight: 400;
	font-size: 20px;
	color: #0d4664;
}

.header__menu-list a.btn {
	color: white;
}

.header__mobile-nav {
	display: none;
	align-items: center;
	gap: 30px;
}

.logo {
	position: relative;
	z-index: 100;
}

.header__mobile-nav a {
	height: 30px;
	width: 30px;
}

.header__mobile-nav a img {
	width: 100%;
	height: 100%;
}

.burger {
	width: 30px;
	height: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
}

.burger figure {
	width: 100%;
	height: 4px;
	background: #0d4664;
	border-radius: 5px;
	transition: all 0.3s;
}

.burger.active figure:nth-child(1) {
	transform: rotate(45deg) translate(5px, 7px);
}

.burger.active figure:nth-child(2) {
	transform: translate(15px);
	width: 0;
}

.burger.active figure:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -7px);
}

/* Hero */

.hero {
	background: url("./img/Hero.webp") 0 0 / cover no-repeat;
	margin: 0;
	color: white;
}

.hero__wrapper {
	height: calc(100vh - 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero a {
	color: white;
}

.hero h1 {
	font-size: 48px;
	font-weight: 700;
	text-shadow: 1px 1px 2px black;
}

.hero p {
	font-size: 28px;
	font-weight: 700;
	margin: 40px 0;
	text-shadow: 1px 1px 2px black;
}

.hero a {
	box-shadow: 1px 1px 4px rgb(55, 55, 55);
}

/* About */

.about p {
	font-size: 16px;
	margin: 10px 0;
}

.about .subtitle {
	font-size: 18px;
	font-weight: 600;
}

.about__wrapper-photo {
	max-width: 600px;
	width: 100%;
}

.about__wrapper-photo img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Service */

.services__wrapper {
	align-items: stretch;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.services__wrapper-item {
	width: 300px;
	border-radius: 10px;
	padding: 20px;
}

.services__wrapper-item:nth-child(1) {
	background: url("./img/1.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(2) {
	background: url("./img/2.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(3) {
	background: url("./img/3.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(4) {
	background: url("./img/4.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(5) {
	background: url("./img/5.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(6) {
	background: url("./img/6.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(7) {
	background: url("./img/7.webp") 0 0 / cover no-repeat;
}

.services__wrapper-item:nth-child(8) {
	background: url("./img/8.webp") 0 0 / cover no-repeat;
}

.item-content {
	border: 1px solid white;
	border-radius: 5px;
	height: 100%;
	padding: 20px 10px;
	min-height: 200px;
}

.item-content img {
	width: 80px;
	height: 80px;
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}

.item-content h3 {
	font-size: 20px;
	font-weight: 700;
	color: white;
	text-align: center;
}

/* Footer */

footer {
	background: #0d4664;
	padding: 60px 0;
}

.footer__wrapper {
	align-items: center;
	gap: 30px;
}

.footer__wrapper-item {
	width: 300px;
	flex-shrink: 0;
	display: flex;
	gap: 15px;
	flex-direction: column;
}

.footer__wrapper-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: white;
	font-size: 16px;
	text-decoration: none;
}

.footer__wrapper-item a img {
	width: 20px;
	height: 20px;
}

.footer__wrapper-item a .logo {
	width: 180px;
	height: auto;
	margin: 0 auto;
	display: block;
}

.footer__wrapper-item:nth-child(3) a {
	display: block;
	text-align: right;
}

.phone-call-wrapper {
	position: fixed;
	bottom: 5px;
	right: 5px;
	height: 70px;
	width: 70px;
	background: #0d466470;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	animation: someAnimation 1.5s linear infinite forwards;
	animation-iteration-count: 4;
}

@keyframes someAnimation {
	0% {
		background: #0d466400;
	}
	50% {
		background: #0d466470;
	}
	100% {
		background: #0d466400;
	}
}

.phone-call {
	height: 50px;
	width: 50px;
	background: #0d4664;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}

.phone-call img {
	width: 24px;
	height: 24px;
}

/* Media querys */

@media all and (max-width: 1024px) {
	.phone-call-wrapper {
		display: flex;
	}
	.hero__wrapper {
		height: calc(100vh - 57px);
	}

	.header__mobile-nav {
		display: flex;
	}

	.header__menu {
		position: absolute;
		left: -120%;
		top: 0;
		height: 100vh;
		width: 40vw;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
		z-index: 10;
		background: white;
		box-shadow: 1px 1px 4px rgb(152, 152, 152);
	}

	.header__menu.active {
		left: 0;
		width: 80vw;
	}

	.header__menu-list {
		gap: 60px;
		flex-direction: column;
	}

	.about__wrapper {
		flex-wrap: wrap;
	}

	.about__wrapper-photo {
		margin: 0 auto;
	}

	.footer__wrapper {
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer__wrapper-item:nth-child(1) {
		order: 2;
	}
	.footer__wrapper-item:nth-child(2) {
		order: 1;
	}
	.footer__wrapper-item:nth-child(3) {
		order: 3;
	}

	footer a {
		text-align: center !important;
		justify-content: center;
	}
}

@media all and (max-width: 768px) {
	header .btn {
		font-size: 14px;
	}

	.hero__wrapper .btn {
		margin: 0 auto;
	}

	.hero h1 {
		font-size: 48px;
		font-weight: 700;
		text-align: center;
	}

	.hero p {
		font-size: 28px;
		font-weight: 700;
		margin: 40px 0;
		text-align: center;
	}
}

@media all and (max-width: 480px) {
	.logo,
	.logo img {
		height: 18px;
	}
	.hero {
		background: url("./img/Hero.webp") -500px 0 / cover no-repeat;
	}
	.hero h1 {
		font-size: 42px;
	}
	.hero h1 span {
		font-size: 32px;
	}
	.hero p {
		font-size: 20px;
		margin: 20px 0;
	}
}