@font-face {
	font-family: 'Commissioner-Black';
	src: url('../font/Commissioner-Black.ttf');
}

@font-face {
	font-family: 'Commissioner-Bold';
	src: url('../font/Commissioner-Bold.ttf');
}

@font-face {
	font-family: 'Commissioner-ExtraBold';
	src: url('../font/Commissioner-ExtraBold.ttf');
}

@font-face {
	font-family: 'Commissioner-ExtraLight';
	src: url('../font/Commissioner-ExtraLight.ttf');
}

@font-face {
	font-family: 'Commissioner-Light';
	src: url('../font/Commissioner-Light.ttf');
}

@font-face {
	font-family: 'Commissioner-Medium';
	src: url('../font/Commissioner-Medium.ttf');
}

@font-face {
	font-family: 'Commissioner-Regular';
	src: url('../font/Commissioner-Regular.ttf');
}

@font-face {
	font-family: 'Commissioner-SemiBold';
	src: url('../font/Commissioner-SemiBold.ttf');
}

@font-face {
	font-family: 'Commissioner-Thin';
	src: url('../font/Commissioner-Thin.ttf');
}



body {
	background-color: #272727 !important; 
	color: #fff !important;
	font-family: 'Commissioner-Regular' !important;
}

section {
	padding: 25px 0 25px 0;
}

p {
	font-family: 'Commissioner-Regular' !important;
	font-size: 14px; /*m*/
	padding: 0;
	margin: 0;
	
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Commissioner-Bold' !important;
}


a {
	color: #47d8d3;
	text-decoration: underline !important;
	font-family: 'Commissioner-Regular' !important;
}

/*m*/

.screen-reader-response, .wpcf7-not-valid-tip {
	display: none;
}
.invalid .wpcf7-response-output {
	
	border-radius: 10px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	justify-content: center;
	background-color: #f95d51;
	padding: 10px;
	text-align: center;
	width: 100%;
/*	max-width: 696px;*/ 
	max-width: 1116px;
	min-width: 369px;
	font-weight: bold;
	
}


/*m*/

/*------NavBar---------*/

.navbar {
	background: #080808;
	color: #fff;
	padding: 0 15px 0 15px;
	width: 100%;
	height: 65px;
	display: flex;
	align-items: center;
	z-index: 200 !important; 
	box-sizing: border-box;
}
.navbar .logo a {
	color: #fff;
	text-decoration: none !important;
	font-size: 26px;
	font-weight: bold;
}
.navbar .logo {
	cursor: pointer;
}
.navbar ul.links {
	margin-left: auto;
	margin-right: 50px;
	list-style: none;
	display: flex;
	align-items: center;
	transition: 0.4s ease all, 0s ease background;
}
.navbar ul.links li {
	/* text-transform: uppercase; /*m*/
	text-transform: lowercase;
	padding: 0 15px;
	height: 65px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.4s ease all, 0s ease margin;
}
.navbar ul.links li a {
	text-decoration: none !important;
	color: #fff;
}
.navbar ul.links li:hover {
	background: #47d8d3;
	cursor: pointer;
}
.navbar ul.links li:hover a {
	color: #080808;
}


.navbar.sticky {
	position: fixed;
	z-index: 40;
}
.navbar.sticky ~ main {
	position: relative;
	z-index: 20;
	top: 65px;
}

@media screen and (max-width: 850px) {
	.navbar .right {
		height: 0;
		overflow: hidden;
	}
	.toggle {
		position: absolute;
		top: 32.5px;
		right: 20px;
		z-index: 99;
		transform: translateY(-50%);
		cursor: pointer;
		width: 40px;
		height: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.toggle > * {
		width: 80%;
		height: 2px;
		background: #fff;
		margin: 3px 0;
	}
	.navbar.collapsed .toggle .line1 {
		transform: rotate(-45deg) translate(-4px, 5px);
	}
	.navbar.collapsed .toggle .line2 {
		opacity: 0;
	}
	.navbar.collapsed .toggle .line3 {
		transform: rotate(45deg) translate(-5px, -6px);
	}
	.navbar.collapsed .logo {
		position: absolute;
		z-index: 44;
	}
	.navbar .links {
		position: fixed;
		background: #080808;
		font-family: "Nunito";
		z-index: 40;
		top: 0;
		left: -100%;
		flex-direction: column;
		width: 45vw;
		height: 100vh;
	}
	.navbar .links li:first-child {
		margin-top: 80px;
	}
	.navbar.collapsed .links {
		left: 0;
	}
	.navbar.collapsed .links a {
		color: #fff;
	}
	.navbar.collapsed .links li {
		width: 100%;
	}
	.navbar.collapsed .links li:hover a {
		color: #080808;
	}
	.navbar.collapsed .right {
		position: fixed;
		font-family: "Nunito";
		width: 45vw;
		text-align: center;
		height: auto;
		bottom: 40px;
		left: 22.5vw;
		transform: translateX(-50%);
		z-index: 45;
	}
	.navbar.collapsed ~ main {
		filter: blur(1px);
		opacity: 0.8;
	}
	.navbar.sticky {
		position: fixed;
		z-index: 40;
	}
}



/*------End NavBar---------*/




.header {

}


.btn-primary {
	--bs-btn-color: #272727;
	--bs-btn-bg: #47d8d3;
	--bs-btn-border-color: #47d8d3;
	--bs-btn-hover-color: #272727;
	--bs-btn-hover-bg: #47d8d3;
	--bs-btn-hover-border-color: #47d8d3;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #272727;
	--bs-btn-active-bg: #47d8d3;
	--bs-btn-active-border-color: #47d8d3;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #272727;
	--bs-btn-disabled-bg: #47d8d3;
	--bs-btn-disabled-border-color: #47d8d3;
	text-decoration: none!important;
	font-size: 16px!important; /*m*/
	color: #272727; /*m*/
	z-index: 100 !important;
	font-weight: bold; /*m*/
	
}

.mouse {
	width: 50px;
	height: 90px;
	border: 2px solid #fff;
	border-radius: 60px;
	position: relative;
	margin: 20px auto;
	box-sizing: border-box;
	display: block;
}
.mouse::before {
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	border-radius: 50%;
	opacity: 1;
	animation: wheel 2s infinite;
}
@keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

.overlay {
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}



.form-control {
	padding: 1rem .75rem;
}

.btn-group-lg>.btn, .btn-lg {
	--bs-btn-padding-y: 1.1rem; /*m*/
	--bs-btn-padding-x: 0.7rem;	/*m*/
	--bs-btn-font-size: .9rem;
	--bs-btn-border-radius: var(--bs-border-radius-lg);
	background-color: #47d8d3;
	border: none;
}

.btn-group-lg>.btn, .btn-lg:hover {
	background-color: #248d89;
}



.bg-body-tertiary {
	background-color: #272727 !important; 
	color: #fff !important;
}

.bg-body-tertiary a {
	color: #fff !important;
	font-size: 20px !important;
	font-weight: bold !important;
}

.first-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.first__title {
	position: relative;
	z-index: 10;
	color: #fff;
	margin: 0;
	text-align: center;
	font-family: sans-serif;
	font-size: clamp(20px, 10vw, 100px);
}

.first__video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}




.card-header {
	height: 230px;
	padding: 1rem;
	background-color: #47d8d3;
	text-align: center;
}
.card-title {
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
	font-size: 26px;
	margin-top: 5px;
	text-transform: uppercase;
	font-weight: bold;
}
.card-price {
	font-size: 36px;
	font-weight: bold;
}
.card-subtitle p {
	font-size: 16px;
	color: #000;
}
.card-content {
	background-color: #eee;
	height: 300px;
	color: #000;
	padding: 1rem;
	text-align: center;

}
.content-list {
	margin-top: 15px;
}
.content-list p {
	font-size: 16px !important;
	margin: 14px !important;
}
.card-footer {
	height: 80px;
	background-color: #eee;
}
.card-button {
	background-color: #47d8d3;
	padding: 1rem 2rem;
	position: relative;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) !important;
	color: #fff;
	font-weight: bold;
	margin: 0 auto;
	text-decoration: none !important;
}

.wpcf7-list-item-label {
	margin-left: 20px !important;
	color: #47d8d3; /*m*/
}



footer .nav-item a {
	color: #fff;
	font-weight: bold;
	font-size: 16px;
}

.container footer li a {
	color: #fff !important;
}

.container .text-body-secondary a {
	color: #fff !important;
	text-decoration: none;
}


.modal-content {
	background-color: #272727 !important;
	color: #fff !important;
}

.modal-content h3 {
	font-size: 26px !important;
}


.modal-content p {
	font-size: 16px !important;
	font-weight: normal !important;
}

/*label {
	margin-left: 10px !important;
	margin-top: 3px !important;
}*/


input[type="checkbox" i]:before {
	transition-timing-function: cubic-bezier(.075, .820, .165, 1);
	border: 2px solid;
	border-radius: 0;
	background-color: white;
	border-color: transparent;
	box-sizing: border-box;
	color: #47d8d3;
	/*content: close-quote;
	content: "✔";*/
	display: inline-block;
	height: 20px;
	outline: 2px solid #47d8d3;
	transition-duration: .5s;
	transition-property: background-color, border-color;
	width: 20px;
	margin-bottom: 15px;
	cursor: pointer;
}

input[type="checkbox" i]:checked:before {
	background-color: #47d8d3;
	border-color: white;
	cursor: pointer;
}



.form-check-input {
	background-color: #47d8d3 !important;
	border-color: #47d8d3 !important;
	width: 24px !important;
	height: 24px !important;
	cursor: pointer;

	.form-check-input:checked {
		background-color: #47d8d3 !important;
		border-color: #47d8d3 !important;
		width: 24px !important;
		height: 24px !important;
		cursor: pointer;
	}

	.modal-header {
		border-bottom: 1px solid #272727 !important;
	}

	.modal-footer {
		border-top: 1px solid #272727 !important;
	}




/*.wpcf7-list-item-label {
	margin-left: 15px !important;
}*/


/* Строгая последовательность */

/* xl-размер (>=1200px) */
/* CSS для >=1200px */




/* lg-размер (<=1199px) */
@media (max-width: 1199px) {
	/* CSS для ширины от 992px до 1199px */

	.first__video{
		display: none !important;
	}


}


/* md-размер (<=991px) */
@media (max-width: 991px) {
	/* CSS для ширины от 768px до 991px */

	.first__video{
		display: none !important;
	}



}

/* sm-размер (<=768px) */
@media (max-width: 767px) { 
	/* CSS для ширины от 576px до 767px */

	.card-header {
		height: 230px !important;
	}


}

/* xs-размер (<=575px) */
@media (max-width: 575px) {
	/* CSS для ширины до 575px (включительно) */

	.card-header {
		height: 230px !important;
	}


}


@media (max-width: 480px) {

	.card-header {
		height: 230px !important;
	}

	.content-list p {
		font-size: 16px !important;
	}


}


@media (max-width: 320px) {

	.content-list p {
		font-size: 16px !important;
	}

}






/*------------------------------------------------*/

/* Любая последовательность */

/* xs (<=543px) */
@media (max-width: 575px) {

}

/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) {

}

/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) {


}

/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) {

	.first__video{
		display: none !important;
	}


}

/* xl (>=1200) */
@media (min-width: 1200px) {

	.first__video{
		display: none !important;
	}

	
	
}
	
/* === Финальное выравнивание кнопки и соцсетей в мобильном меню === */
.navbar ul.links li.mobile-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.navbar ul.links li.mobile-contacts .mobile-contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar ul.links li.mobile-contacts .call-btn {
  width: 200px;
  text-align: center;
  background-color: #47d8d3;
  color: #272727;
  font-weight: bold;
  border-radius: 8px;
  margin-bottom: 20px; /* расстояние между кнопкой и иконками */
  padding: 10px 0;
}

.navbar ul.links li.mobile-contacts .social-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* отступ между иконками */
}

.navbar ul.links li.mobile-contacts .social-icons a {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: 0.2s;
}

.navbar ul.links li.mobile-contacts .social-icons a:hover {
  color: #47d8d3;
  transform: scale(1.1);
}

	
	/* Стили для блока аквазоны */
.aquazone-block h3 {
    font-size: 2rem !important;
    font-family: 'Commissioner-Bold' !important;
}

.aquazone-block p {
    font-size: 19px !important;
    font-family: 'Commissioner-Regular' !important;
}