@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');

body {
	font-family: "PT Sans Narrow", sans-serif;
  font-weight: <weight>;
  font-style: normal;
	cursor: url('cur.cur'), auto !important;
	--color-accent:#ddcc66;
	--color-light:#f0f0f0;
	--color-grey:#999;
	--color-dark:#212121;
	--shadow-img: 0em 0em 0.8em var(--color-dark);
	--shadow-img-hover: 0em 0em 0.8em var(--color-accent);
	--shadow-img-hover-light: 0em 0em 0.8em var(--color-light);
	--shadow-card-hover: inset 0 0.5em 0 var(--color-accent);
	letter-spacing: 0.1em;
}

.carousel, .carousel-control-prev, .carousel-control-next, .carousel-indicators {
	cursor: url('cur.cur'), auto !important;
}

.multi-repeating-linear {
	/*background:
	repeating-linear-gradient(
		transparent,transparent 10px, white 10.1px
	),
	repeating-linear-gradient(
		90deg,
		var(--color-light),var(--color-light) 10px, white 10.1px
	);
	background-attachment: fixed;*/
	background-color: var(--color-light);
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* для Chrome/Edge/Safari */
*::-webkit-scrollbar {
  height: 12px;
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--color-light);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: 0.5em;
  border: 1px solid var(--color-accent);
}

/* noscript */

.noscript {
	display: none;
}

/* обо мне */

.aboutme {
	/*background-image: url('aboutme.png');*/
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 2em;
	animation: aboutme 1s forwards;
}

@keyframes aboutme {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 60%;
	margin: 3em auto;
	padding: 1em auto;
	gap: 5em;
	animation: wrapper 4s forwards;
	opacity: 0;
}
@keyframes wrapper {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.intro {
	flex: 1 60%;
}

@media (max-width: 800px) {
	.wrapper {
		width: 80%;
		gap: 1em;
		display: block;
		text-align: center;
	}
}

/* ссылки */

.link {
	filter: grayscale(1);
	opacity: 0.5;
	width: 9em;
	transition: 0.3s;
}

.link:hover {
	opacity: 1;
	filter: grayscale(0);
	/*transform: translateY(-5px);*/
}

/* ссылка на блог */

.blog-div {
	background-color: var(--color-dark);
	box-shadow: var(--shadow-img);
}

.blog-div-content img {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	/*padding: 3em 0;*/
	margin: 0 auto 2em auto;
	transition: 0.3s;
}

@media (max-width: 762px) {
	.blog-div-content img {
		width: 100%;
	}
}

/* отзывы */

.star {
	opacity: 0.8;
	font-size: 1.2em;
	color: var(--color-accent);
	display: inline-block;
}

/* этапы */

.card-etapi {
	border: none;
	border-radius: 0.5em;
	padding: 1em;
	background-color: transparent;
	color: var(--color-dark);
	text-align: center;
	transition: 0.3s;
	user-select: none;
}

.txt-etapi {
	font-size: 1.2em;
	font-weight: 600;
}

.txt-etapi-sm {
	text-align: left;
	width: 80%;
	margin: 0 auto;
	font-size: 1em;
	font-weight: 100;
}

.etapi-cont {
	color: var(--color-dark);
	width: 100%;
	border-radius: 0.5em;
	padding: 0em;
	margin: 1em auto;
}

.etapi-img {
	width: 40%;
	border-radius: 0.5em;
	margin: 1em 0;
	transition: 0.3s;
}

.etapi-number {
	font-weight: 100;
	background-color: var(--color-dark);
	color: var(--color-light);
	font-size: 8em;
	border-radius: 1em;
	margin: 0.2em;
}

@media (max-width: 762px) {
	.etapi-img {
		width: 50%;
	}
	.txt-etapi-sm {
		width: 100%;
	}
}

/* состав проекта */

.sostav-cont {
	color: var(--color-dark);
	width: 70%;
	margin: 1em auto;
}

/* Цены */

.price-cont {
	color: var(--color-dark);
	width: 70%;
	border-radius: 0.5em;
	margin: 1em auto;
}

@media (max-width: 1000px) {
	.price-cont, .etapi-cont, .sostav-cont {
		width: 100%;
	}
}

.price-price {
	font-size: 1.1em;
	margin: 0;
	background: linear-gradient(90deg, transparent 14%, var(--color-accent));
}

/* портфолио */

.pf-div-content {
	width: 100%;
	position: relative;
}

.pf-div-content a.my-btn {
	position: absolute;
	width: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pf-div-content img {
	mask-image: linear-gradient(transparent 0%, black 20%);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	transition: 0.3s;
	filter: grayscale(1);
}

.pf-div-content img:hover {
	filter: grayscale(0.5);
	transform: translateY(-5px);
}

/* текст */

.txt-link {
	color: var(--color-dark);
	font-weight: 600;
	opacity: 0.7;
	transition: 0.3s;
}

.txt-link:hover {
	color: var(--color-accent);
	text-decoration: none;
	opacity: 1;
}

.txt-sm {
	color: var(--color-dark);
	text-align: justify;
	text-decoration: none;
	line-height: 1.6em;
  font-size: 1.1em;
  font-weight: 100;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.txt-otz {
	text-align: justify;
	text-decoration: none;
  font-size: 1em;
  font-weight: 100;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

@media (max-width: 500px) {
	.txt-otz {
		font-size: 0.9em;
	}
}

.txt-bg {
	color: var(--color-light);
	text-decoration: none;
	word-spacing: 0.5em;
	letter-spacing: 0.3em;
	font-size: 1.4em;
	padding: 0.5em;
	font-weight: 100;
  background-color: var(--color-dark);
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: 0.3s;
}

.txt-i {
	color: var(--color-dark);
	text-decoration: none;
	font-size: 1.2em;
  font-weight: 600;
  font-style: italic;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.txt-btn {
	letter-spacing: 0.2em;
	font-size: 1em;
  font-weight: 100;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.txt-center {
  text-align: center !important;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.line {
	border: none;
	opacity: 0.8;
	height: 1px;
	margin-top: 1em;
	margin-bottom: 1em;
	background-color: var(--color-dark);
}

.line-footer {
	border: none;
	opacity: 0.8;
	height: 1px;
	margin-top: 3em;
	margin-bottom: 3em;
	background-color: var(--color-dark);
}

@media (max-width: 900px) {
	.txt-bg {
		font-size: 1.1em;
	}
	.txt-sm, .txt-i {
		font-size: 0.9em;
	}
}

/* фотографии */

.pf-image {
	width: 100%;
	/*border-radius: 0.5em;*/
	margin-top: 1em;
	/*transition: 0.3s;*/
}

.rounded-img {
	width: 80%;
	border-radius: 0.5em;
	max-width: 300px;
	object-fit: cover;
	vertical-align: middle;
	filter: grayscale(0.4);
	transition: 0.3s;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.rounded-img:hover, .pf-image:hover {
	border-radius: 0;
}

.rounded-img2:hover, .rounded-img3:hover {
	filter: grayscale(0);
}

@media (max-width: 800px) {
	.rounded-img3, .rounded-img2 {
		width: 60%;
	}
}

/* кнопки */

.my-btn {
	z-index: 1;
	border: 0 transparent;
	border-radius: 0.5em;
	padding: 1em;
	background-color: var(--color-accent);
	color: var(--color-dark);
	text-decoration: none;
	transition: 0.3s;
}

.my-btn:hover {
	border-radius: 0;
	background-color: var(--color-dark);
	color: var(--color-light);
}

.my-btn img:hover {
	filter: invert(1);
}

.proekti {
	color: var(--color-dark);
	text-decoration: none;
	padding: 1em;
	transition: 0.3s;
}

.proekti:hover {
	color: var(--color-accent);
	border: none;
}

/* навигация */

.header {
	z-index: 999;
	text-align: center;
	justify-content: center;
	user-select: none;
}

.logo {
	max-width: 6%;
	transition: 0.5s;
	padding-bottom: 1em;
}

.logo-bg {
	width: 30%;
	transition: 0.3s;
}

@media (max-width: 1400px) {
	.logo {
		max-width: 10%;
	}
}

@media (max-width: 900px) {
	.logo {
		max-width: 22%;
	}
	.my-menu {
		display: block;
		margin-bottom: 1em;
	}
}

.my-menu {
	font-size: 1.1em;
	font-weight: 900;
	text-transform: uppercase;
	padding: 0 5em;
	text-decoration: none;
	color: var(--color-dark);
}

.my-menu:hover {
	color: var(--color-accent);
	transition: 0.3s;
}

/* карточки */

.card {
	/*border: 0.1em solid transparent;*/
	border: none;
	background-color: var(--color-light);
	color: var(--color-dark);
	text-align: center;
	transition: 0.3s;
	user-select: none;
}

.card-otz {
	border: none;
	border-radius: 0.5em;
	padding: 1em;
	background-color: var(--color-dark);
	color: var(--color-light);
	text-align: center;
	transition: 0.3s;
	user-select: none;
}

.card h5 {
	font-weight: 100;
	font-size: 1em;
	transition: 0.3s;
}
.card:hover {
	/*border: 0.1em solid;
	border-image: linear-gradient(to bottom, var(--color-dark), transparent, 10%);
	border-image-slice: 1;*/
	/*box-shadow: var(--shadow-card-hover);*/
	img {
		filter: grayscale(0);
		opacity: 0.5;
	}
	h5 {
		color: var(--color-accent);
	}
}

.card-body {
	background-color: var(--color-accent);
	flex: 1 1 auto;
	padding: 0;
}

.card img {
	/*border-radius: 0.5em 0.5em 0 0;*/
	width: 100%;
	filter: grayscale(0);
	transition: 0.3s;
}

li::marker {
	font-weight: 900;
	font-size: 1.2em;
}

.pf-year {
	font-weight: 900;
	margin-top: 0.5em;
	padding: 0.5em;
	color: var(--color-grey);
}

.pf-btn {
	width: 100%;
	display: block;
	padding: 0.5em 0;
	background-color: var(--color-dark);
	color: var(--color-light);
	text-decoration: none;
	transition: 0.3s;
	font-weight: 100;
	letter-spacing: 0.3em;
}

@media (max-width: 762px) {
	.pf-btn {
		font-size: 0.8em;
	}
	.card h5 {
		font-size: 1em;
	}
}

.pf-btn:hover {
	background-color: var(--color-accent);
	color: var(--color-dark);
}

/* оставьте заявку */

.cont-img {
	max-width: 100%;
	animation-duration: 2s;
	animation-name: down;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes down {
	from {
		scale: 1;
	}
	to {
		scale: 0.8;
		filter: invert(0.5);
		transform: translateY(20%);
	}
}

.cont {
	padding: 2em 10%;
	background-image: url("form-bg.png");
	box-shadow: inset 0 0 0 1000em rgba(0, 0, 0, 0.85);
	background-size: 130%;
	margin: 2em 10%;
	border-radius: 0.5em;
}

.cont .heading {
	text-align: center;
	margin-bottom: 2em;
	color: var(--color-light);
}

.cont .heading span {
	color: var(--color-accent);
}

.cont .cont-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2em;
}

.cont .cont-row .cont-img {
	flex: 1 1 40em;
}

.cont .cont-row form {
	flex: 1 1 40em;
}

.cont .cont-row form .cont-box {
	width: 100%;
	margin: 1em 0em 2em;
	border: 0.2em solid var(--color-dark);
	border-radius: 0.5em;
	padding: 1em;
	transition: 0.3s;
}

.cont .cont-row form .cont-box-txt {
	width: 100%;
	height: 30em;
	margin: 1em 0em 2em;
	border: 0.2em solid var(--color-dark);
	border-radius: 0.5em;
	padding: 1em;
	transition: 0.3s;
}

.cont .cont-row form .cont-box:hover, .cont .cont-row form .cont-box-txt:hover {
	border: 0.2em solid var(--color-accent);
	}
}

.cont-box::placeholder {
	transition: 0.3s ease;
}

.cont-box:hover::placeholder, .cont-box-txt:hover::placeholder {
	color: var(--color-dark);
}

.cont-box-btn {
	width: 100%;
	margin: 1em 0em 2em;
	border: 0.1em solid var(--color-dark);
	background-color: var(--color-accent);
	border-radius: 0.5em;
	padding: 1em;
	transition: 0.3s;
}

.cont-box-btn:hover {
	width: 100%;
	margin: 1em 0em 2em;
	border: 0.1em solid var(--color-accent);
	background-color: var(--color-dark);
	color: var(--color-light);
	border-radius: 0.5em;
	padding: 1em;
	box-shadow: var(--shadow-img-hover);
}

.cont .cont-row form span {
	color: var(--color-light);
	text-align: center;
}

@media (max-width: 600px) {
	.cont {
		margin: 2em 3%;
	}
}

/* FAQ's */

.faq-container {
	width: 80%;
	min-height: 100vh;
	background-color: var(--color-dark);
	box-shadow: var(--shadow-img);
	border-radius: 0.5em;
	margin: 2em auto auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 1.5em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.faq-container h1 {
	text-align: center;
	color: var(--color-light);
	margin-top: 3em;
	font-size: 1.8em;
	letter-spacing: 0.2em;
}

.faq-container h1 img {
	width: 5%;
}

.faq-container details {
	background-color: var(--color-dark);
	width: 95%;
}

.faq-container summary {
	padding: 2em 1em;
	color: var(--color-light);
	font-size: 1.2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq-container summary:hover {
	color: var(--color-accent);
}

.faq-container summary:hover::after {
	border-top: 0.6em solid var(--color-accent);
}

.faq-container summary::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 0.6em solid var(--color-light);
	border-inline:  0.6em solid transparent;
	transition: 0.3s;
}

.faq-container details[open] summary::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 0.6em solid var(--color-accent);
	border-inline:  0.6em solid transparent;
	transform: rotate(180deg);
}

.faq-container details[open] summary {
	border-bottom: 0.1em solid var(--color-accent);
	color: var(--color-accent);
}

.faq-container article p {
	font-size: 1em;
	padding: 1em 2em 0;
	color: var(--color-light);
}

@media (max-width: 500px) {
	.faq-container article p {
		font-size: 0.8em;
	}
	.faq-container summary {
		font-size: 0.9em;
	}
	.faq-container h1 {
		font-size: 1em;
	}
}

.faq-container article p a {
	color: var(--color-accent);
}

.faq-container article p a:hover {
	text-decoration: none;
}

/* футер */

.logo-body {
	width: 1em;
	margin-right: 1em;
	transition: 0.3s;
}

.logo-footer {
	width: 1em;
	margin-right: 1em;
	filter: invert(1);
}

.footer-btn {
	/*text-transform: uppercase;*/
	font-size: 1em;
	letter-spacing: 0.2em;
	text-align: center;
	color: var(--color-light);
	text-decoration: none;
	padding: 0.5em 1em;
	margin: 0.2em;
	font-weight: 100;
	border-radius: 0.5em;
}

.footer-btn:hover {
	/*background-color: var(--color-light);*/
	color: var(--color-accent);
	border-radius: 0.5em;
	/*box-shadow: var(--shadow-img-hover-light);*/
	transition: 0.3s;
}

.footer {
	border-radius: 0.5em;
	padding-top: 1em;
	padding-bottom: 1em;
	color: var(--color-light);
	background-color: var(--color-dark);
	/*background-image: url('logo-pf.svg');*/
	box-shadow: var(--shadow-img);
	width: 100%;
	display: inline-flex;
	/*flex-direction: row;*/
	flex-direction: column;
	/*flex-wrap: wrap-reverse;*/
	flex-wrap: wrap;
	/*justify-content: center;*/
	justify-content: space-between;
	/*justify-content: space-around;*/
	/*justify-content: space-evenly;*/
	/*align-content: baseline;*/
	align-content: center;
	/*align-content: flex-start;*/
	/*align-content: flex-end;*/
	/*align-content: space-between;*/
	/*align-content: space-around;*/
	/*align-content: space-evenly;*/
	/*align-items: stretch;*/
	/*align-items: start;*/
	/*align-items: end;*/
	align-items: center;
	/*align-items: baseline;*/
	column-gap: 10%;
	/*row-gap: 10%;*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}


.footer-box {
	text-align: center;
	padding: 2em 0 2em 0;
}

.footer-logo {
	flex-grow:1;
}

@media (min-width: 1000px) {
	.footer {
		flex-direction: row;
	}
}

@media (min-width: 900px) {
	.footer-box {
		flex-basis: 25%;
	}
}

@media (max-width: 1000px) {
	.footer-box {
		flex-basis: 30%;
	}
}

/* 404 */

.error404-cont {
	/*background-color: var(--color-accent);*/
	/*background: linear-gradient(var(--color-accent), transparent);*/
	padding: 2em 0;
}

.error404 {
	width: 70%;
	margin: auto;
}

@media (max-width: 762px) {
	.error404 {
		width: 100%;
	}
}

/* значок вверх */

.logo-up {
	max-width: 3em;
	z-index: 999;
	position: fixed;
	bottom: 30%;
	right: 1%;
	animation-duration: 2s;
	animation-name: up;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

@keyframes up {
	from {
		scale: 1;
	}
	to {
		scale: 1.2;
		filter: invert(0.8);
		transform: translateY(-10%);
	}
}

/* всплывающее окно */

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  align-content: center;
  width: 100%;
  height: auto;
  overflow: auto;
}

.modal-content {
  text-align: center;
  background-color: var(--color-dark);
  color: var(--color-light);
  margin: auto;
  padding: 1em;
  width: auto;
  animation-name: animate;
  animation-duration: 1s;
}

.modal-content p {
	color: var(--color-light);
}

@keyframes animate {
  from {bottom: 320px; opacity:0}
  to {bottom:0; opacity:1}
}

.close {
  color: var(--color-light);
  float: right;
  margin: 0;
  font-size: 1.5em;
  font-weight: 100;
}

.close:hover, .close:focus {
  color: var(--color-accent);
  text-decoration: none;
}

/* согласие на обработку */

.consent {
	color: var(--color-grey);
	font-size: 0.8em;
}

.consent-dark {
	color: var(--color-dark);
	font-size: 0.7em;
}

.consent a {
	color: var(--color-accent);
}

/* ОТКЛЮЧЕНИЕ ЭФФЕКТА ПРИ НАВЕДЕНИИ НА ТЕЛЕФОНАХ */

@media (max-width: 900px) {
	.footer-btn:hover {
		background-color: transparent;
		color: var(--color-light);
		box-shadow: none;
		border: none;
	}
	.my-btn:hover {
		background-color: var(--color-accent);
		color: var(--color-dark);
		box-shadow: none;
		border-radius: 0.5em;
	}
	.nav-link:hover {
		border: none;
		background-color: transparent;
		color: var(--color-dark);
		text-decoration: none;
		box-shadow: none;
		.logo-body {
			filter: none;
		}
	}
	.txt-bg:hover {
		color: var(--color-dark);
	}
	.card:hover {
		box-shadow: none;
	}
	.pf-div-content img:hover {
		filter: grayscale(1);
		transform: translateY(0px);
}
}

/*уменьшение шрифта навигации и футера*/

@media (max-width: 500px) {
	.nav-link, .footer-btn {
		font-size: 1em;
	}
}