@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	--main-color-rgba: rgba(0, 108, 129, 1);
	--main-color: #006c81;
	--green-dark: #549dab;
	--green-light: #b2d3d9;
	--white: #fff;
	--black: #000;
	--grey: #a5a5a5;
	--border-radius: 16px;
	--section-padding: 125px;
	--small-margin: 40px;
}

a, a:hover {text-decoration: none;}

img {max-width: 100%;}

h2 {font-size: 52px;}

h3 {font-size: 32px;}

.green-btn {
	background: var(--main-color);
	color: var(--white);
	border: 2px solid var(--green-dark);
	padding: 12px 100px;
	border-radius: var(--border-radius);
}

.green-btn:hover {
	background: var(--white);
	color: var(--main-color);
	border: 2px solid var(--green-dark);
}

.white-btn {
	background: var(--white);
	color: var(--main-color);
	border: 2px solid var(--green-dark);
	padding: 12px 100px;
	border-radius: var(--border-radius);
}

.white-btn:hover {
	background: var(--main-color);
	color: var(--white);
	border: 2px solid var(--green-dark);
}

header .navbar {
	margin-top: var(--small-margin);
	background: var(--main-color);
	border-radius: var(--border-radius);
	padding: 15px 0;
}

header .logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

header .navbar-nav {
	gap: 0 var(--small-margin);
}

header .nav-link, .nav-contacts {
	color: var(--white);
}

header .nav-link:hover, .nav-contacts:hover, header .navbar-nav .nav-link.active, header .navbar-nav .nav-link.show {
	color: var(--green-light);
}

header .dropdown:hover>.dropdown-menu {
	display: block;
}

header .dropdown>.dropdown-toggle:active {
	pointer-events: none;
}

header .right-menu {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 0 60px;
}

header .nav-button {
	background: var(--white);
	padding: 4px 50px;
	border-radius: var(--border-radius);
	color: #000;
}

header .nav-button:hover {
	background: var(--green-light);
}

header .navbar-toggler {
	background: var(--white);
}

#banner {
	margin-top: 24px;
}

#banner .left-block {
	border-radius: var(--border-radius) 0px 0px var(--border-radius);
	border: 2px solid var(--green-dark);
	padding: 80px 20px 0;
	height: 100%;
}

#banner h1 {
	font-size: 30px;
}

#banner h1 span {
 	color: var(--green-dark);
}

#banner ul {
	margin: 50px 0px var(--small-margin);
	list-style: none;
	padding-left: 0;
}

#banner ul li {
	position: relative;
	padding-left: 20px;
}

#banner ul li::before {
	content: '•';
	position: absolute;
	left: 0;
	font-size: 30px;
	color: var(--main-color);
	top: -10px;
}

#services {
	margin-top: 15px;
	padding: 110px 0;
	background: url('../images/bg/wave-1.png') no-repeat top center;
}

#services h2 {
	margin-bottom: 70px;
}

#services h3 {
	margin: 10px 0 30px;
}

.service-list-info {
	background: var(--white);
	border-radius: var(--border-radius);
	border: 1px solid var(--main-color);
	margin-bottom: 20px;
	-webkit-box-shadow: 10px 10px 1px 0px rgba(255, 255, 255, 0);
	-moz-box-shadow: 10px 10px 1px 0px rgba(255, 255, 255, 0);
	box-shadow: 10px 10px 1px 0px rgba(255, 255, 255, 0);
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding: 25px 18px;
	flex-wrap: wrap;
}

.service-list-info:hover {
	-webkit-box-shadow: 10px 10px 1px 0px var(--main-color-rgba);
	-moz-box-shadow: 10px 10px 1px 0px var(--main-color-rgba);
	box-shadow: 10px 10px 1px 0px var(--main-color-rgba);
}

.service-list-text-info {
	font-size: 18px;
}

.service-list-image {
	width: 285px;
	height: 225px;
	flex-shrink: 0;
}

.service-list-design {
	background: url('../images/bg/wave-2.png') top center no-repeat;
	padding-top: var(--section-padding);
	padding-bottom: 150px;
}

.service-list-design h3 {
	margin-top: 0;
	margin-bottom: 15px;
}

.cta-container {
	border-radius: var(--border-radius);
	background: var(--main-color);
	padding: var(--small-margin) ;
}

.cta-container form {
	color: var(--white);
	max-width: 445px;
}

.cta-container .form-group {
	margin-bottom: 20px;
}

.cta-container form label {
	color: var(--green-light);
}


.cta-container form input {
	padding: 14px 16px;
	background: var(--green-light);
	border-radius: var(--border-radius);
	border: none;
}

.cta-container form input::placeholder  {
	color: var(--green-dark);
}

.cta-container .form-button {
	padding-top: 15px;
}

.cta-container .agree {
	font-size: 13px;
	margin-top: 8px;
	color: var(--green-light);
}

.cta-container a {
	color: var(--green-light);
	text-decoration: underline;
}

#portfolio {
	padding-top: var(--section-padding);
}

#portfolio h2{
	margin-bottom: var(--small-margin);
}

.portfolio-links a {
	display: block;
	color: var(--black);
	padding: 16px 0;
	border-top: 1px solid var(--green-light);
}

.portfolio-links a:hover {
	color: var(--green-dark);
}

.portfolio-links a:last-child {
	border-bottom: 1px solid var(--green-light);
}

.portfolio-links a.active {
	border-top: none;
	border-radius: var(--border-radius);
	padding: 12px;
	background: var(--main-color);
	color: var(--white);
	margin-bottom: 16px;
	text-align: center;
}

.portfolio-links a.active:hover {
	background: var(--white);
	color: var(--main-color);
}

.portfolio-slider {
	border-radius: var(--border-radius);
	border:  1px solid var(--green-light);
	overflow: hidden;
}

.portfolio-slider .flickity-button {
	border: 1px solid var(--main-color);
	border-radius: var(--border-radius);
	padding: 70px 6px;
}
.portfolio-slider .flickity-button-icon {
	fill: var(--main-color);
}

#advantages {
	margin-top: var(--section-padding);
}

.advantages-container {
	padding: 80px 20px;
	background: var(--main-color) url('../images/bg/wave.png') bottom 10px center no-repeat;
	border-radius: var(--border-radius);
}

#advantages h2 {
	width: 100%;
	color: var(--white);
	text-align: center;
}

#advantages h3 {
	font-size: 22px;
}

.advantages-block {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 20px;
	height: 100%;
}

.advantages-number {
	font-size: 80px;
	color: var(--green-light);
}

.advantages-text-container {
	background: var(--white);
	border-radius: var(--border-radius);
	padding: 50px;
}

.advantages-text {
	font-size: 14px;
}

.advantages-logo {
	text-align: center;
}

#clients {
	margin-top: var(--section-padding);
}

#clients h2 {
	margin-bottom: 50px;
}

.clients-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

#contacts {
	margin-top: var(--section-padding);
}

#contacts .cta-container {
	padding: 70px 50px;
}
.contacts-info-container {
	border-radius: var(--border-radius);
	border: 1px solid var(--main-color);
	height: 100%;
	padding: var(--small-margin);
}

.contacts-info-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: -35px;
}

.contacts-info-text {
	margin-bottom: 22px;
}

.contacts-info-text:last-child {
	margin-bottom: 0;
}

.contacts-info-text a {
	color: var(--black);
}

.contacts-info-text a:hover {
	color: var(--main-color);
}

footer {
	margin-top: -140px;
	padding-top: 400px;
	background: url('../images/bg/wave-3.png') no-repeat top center;
	background-size: cover;
}

.footer-container {
	margin-bottom: 16px;
}

.footer-container ul {
	list-style-type: none;
	padding-left: 0;
}

.footer-container li {
	list-style-type: none;
	padding-left: 0;
	font-size: 16px;
	margin-top: 14px;
}

.footer-container li a {
	color: var(--black);
}

.footer-container li a:hover {
	color: var(--main-color);
}


.footer-container a.green-btn {
	padding: 12px;
	color: #fff;
	display: block;
	text-align: center;
	margin-top: 20px;
}


.copyright {
	padding: 20px 20px 0;
	margin-top: 40px;
	border-top: 1px solid var(--main-color);
}
.copyright, .copyright a {
	color: var(--grey);
}

.copyright a:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 991px) {
	header .logo {
		top: 33px;
	}

	header .navbar {padding: 10px 20px;}

	header .navbar-collapse ul {
		margin-top: 20px;
	}
}