@import 'font.css';
@import 'media.css';

* {
	margin: 0;
	padding: 0;
}
*,
*:before,
*:after {
	box-sizing: border-box;
}
body {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
	background-color: rgba(0, 0, 0, 1);
	background-image: url(../img/bg-body.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
h1 {
	font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
	font-weight: 500;
	font-style: italic;
	color: rgba(255,255,255,1.0);
	text-shadow: 2px 2px 2px #000;
	text-align: center;
}
.h1-title {
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	font-weight: 400;
	color: rgba(255,106,0,1.0);
	text-shadow: 2px 2px 2px #000;
	text-align: center;
	margin-bottom: 15px;
}
h2 {
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	font-weight: 500;
	font-style: italic;
	color: #FFF;
	text-shadow: 2px 2px 2px #000;
	text-align: center;
	padding: 15px;
}
.h2-title {
	font-size: clamp(1.5rem, 1.409rem + 0.45vw, 1.75rem);
	font-weight: 400;
	color: #ff6a00;
	text-shadow: 2px 2px 2px #000;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: middle;
	height: auto;
}
section {
	margin-bottom: 50px;
	border-top: 1px solid rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(255,255,255,0.5);
	background-color: rgba(0,0,0,0.5);
}

/* Header */

header {
	background-color: rgba(0,0,0,1.0);
	padding: 15px;
}
.header {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}
.logotype {
	display: flex;
}
.logo {
	width: 75px;
}
.company {
	text-align: center;
	padding-left: 10px;
}
.company-name {
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ff6a00;
	font-weight: 500;
}
.company-title {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
}
.phone,
.time {
	text-align: center;
	font-size: 18px;
	text-transform: uppercase;
}
.phone-title,
.time-work {
	color: #ff6a00;
	font-weight: 500;
}
.phone-link {
	color: rgba(0,187,0,1.0);
	font-weight: 500;
}
.time-day {
	color: #fff;
}
.phone-link {
	text-decoration: none;
}
.phone-link:hover {
	background-color: #ff6a00;
	color: #000;
}
.social {
	display: flex;
}
.social-icon {
	width: 50px;
	height: 50px;
	margin: 0 7px;
	border: 2px solid #fff;
	border-radius: 50%;
}
img.rotate-img {
	border-radius: 50%;
	-webkit-transition: -webkit-transform 0.8s ease-in-out;
	transition: transform 0.8s ease-in-out;
}
img.rotate-img:hover {
	-webkit-transform: rotate(
		360deg
	); /* Градусы поворота можно изменить по необходимости */
	transform: rotate(
		360deg
	); /* Градусы поворота можно изменить по необходимости */
}

/* NAV */

nav {
	background-color: rgba(255,106,0,1.0);
	border-top: 1px solid rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(255,255,255,0.5);
	padding: 7px 0;
	margin-bottom: 50px;
	padding: 15px;
}
.nav-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
ul {
	list-style: none;
}
.nav-link a {
	display: block;
	text-shadow: 2px 2px 2px #000;
	text-decoration: none;
	font-size: 20px;
	padding: 7px 15px;
	color: rgba(255,255,255,1.0);
}
.nav-link a:hover {
	color: #000;
	text-shadow: none;
}
.nav-link li {
	border: 2px solid #fff;
	margin: 3px;
	background-color: rgba(140, 140, 140, 1.0);
	border-radius: 15px;
}

/* Заголовки */

.bg-title {
	padding: 15px;
	background: linear-gradient(180deg, #000000,#737373,#000000);
	border-top: 1px solid rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
.title {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.title-foto {
	width: 220px;
	height: 220px;
}
.title-foto img {
	width: 220px;
	border-radius: 50px;
}
.title-text {
	text-align: center;
}

/* ABOUT */
.about {
	background-image: url(../img/pattern1.png);
	border-bottom: 1px solid rgba(255,255,255,0.5);
	margin-bottom: 50px;
}
.about-col {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.about-blok {
	width: 300px;
	padding: 15px;
}
.about-text {
	font-size: 18px;
	color: #fff;
	text-align: center;
}
.about-text span {
	color: #ff6a00;
}

/* System */

.catalog {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 30px;
	padding: 15px;
}
.system-foto {
	width: 500px;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
	border: 2px dashed rgba(255,255,255,0.7);
}
.produkt {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 30px;
}
.produkt-item {
	width: 170px;
	border-radius: 50% 50% 0 0;
	border: 2px dashed rgba(255,255,255,0.7);
	margin-bottom: 15px;
	background-image: url(../img/pattern1.png);
}
.produkt-foto {
	border-radius: 50%;
}
.produkt-title {
	color: #fff;
	text-align: center;
	padding-bottom: 15px;
}

/* Advantages */

.advantages {
	background-image: url(../img/pattern1.png);
	margin-bottom: 50px;
}
.advantages h2 {
	border-top: 1px solid rgba(255,255,255,0.5);
}
.kart {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 30px;
}
.kart-item {
	width: 350px;
	padding: 15px;
}
.kart-img {
	margin: 0 auto;
	width: 50px;
	height: 50px;
}
.kart-title {
	text-align: center;
	color: #ff6a00;
	font-size: 20px;
	font-weight: 500;
}
.kart-text {
	color: #fff;
	font-size: 18px;
	text-align: center;
}

/* Servis */

.servis {
	margin-top: 30px;
	padding: 15px;
}
.row-4 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 30px;
}
.col-4 {
	width: 280px;
	padding: 15px;
	text-align: center;
	border: 2px solid rgba(255, 255, 255, 0.7);
	background-image: url(../img/pattern1.png);
	border-radius: 15px;
}
.servis-foto {
	width: 144px;
	height: 144px;
	background-color: rgba(255,106,0,1.0);
	display: flex;
	justify-content: center;
  align-items: center;
	border-radius: 50%;
	margin: 0 auto 15px auto;
}
.servis-foto img {
	width: 100px;
}
.servis-title {
	font-size: 20px;
	font-weight: 600;
	color: rgba(255,106,0,1.0);
	margin-bottom: 15px;
}
.servis-text {
	font-size: 18px;
	color: rgba(255, 255, 255, 1.0);
}
.servis-text a {
	color: rgba(0,187,0,1.0);
}

/* Slider */

.container-slider {
	max-width: 1200px;
	margin: 0 auto;
}
.slider {
	display: flex;
	justify-content: space-around;
  flex-wrap: wrap;
	padding: 15px;
}
.slider-item {
	width: 320px;
	background-image: url(../img/pattern1.png);
	border: 2px solid rgba(255, 255, 255, 0.7);
	margin-bottom: 15px;
}
.slider-text {
	color: #fff;
	font-size: 18px;
	padding: 15px;
	text-align: center;
}

/* Заказ-Оплата-Доставка */

.zakaz .bg-title {
	margin-bottom: 30px;
}
.zakaz .title {
	justify-content: center;
}
.zakaz span {
	color: #ff6a00;
	margin-left: 30px;
}
.zod {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 30px;
}
.zod-col {
	background-color: rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 15px;
	margin: 15px;
	width: 320px;
}
.zod-title {
	font-size: 20px;
	font-weight: 600;
	color: #ff6a00;
	text-align: center;
}
.zod-text a {
	color: rgba(0,187,0,1.0);
}
.zod-text {
	font-size: 18px;
	color: #fff;
	padding: 15px;
	border-radius: 0 0 15px 15px;
}


/* User */

.user {
	position: fixed;
	width: 50px;
	right: 5px;
	bottom: 5px;
}
/*message*/
.user-social {
	display: none;
}
.main-item:focus ~ .user-social,
.main-item:active ~ .user-social,
.user-social:hover {
	display: block;
}
.user-zvonok,.main-item img,.user-social,.user-ontop {
	margin-bottom: 15px;
}
.user-whatsapp,.user-viber,.user-telegram {
	margin-bottom: 12px;
}
/* Copy */

.copy {
	background-image: url(../img/pattern1.png);
	text-align: center;
	color: rgba(255, 255, 255, 1.0);
	padding: 15px 0;
}

/* ROW-3 COL-3 */

.row-3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 30px;
}
.col-3 {
	width: 290px;
	padding: 15px;
	text-align: center;
	border: 2px solid rgba(255, 255, 255, 0.7);
	background-color: rgba(0, 0, 0, 1.0);
	border-radius: 15px;
	margin: 15px;
}

td {
	color: #fff;
	border-bottom: 1px solid rgba(255,106,0,0.5);
}
th {
	color: #ff6a00;
	text-transform: uppercase;
	font-weight: 500;
}
th>span {
	color: #fff;
}

/* Article */

article {
	color: rgba(255, 255, 255, 1.0);
	background-image: url(../img/pattern1.png);
}
article p {
	font-size: 18px;
	padding: 15px;
	line-height: 1.5;
	letter-spacing: 2px;
}
article span {
	color: rgba(255,106,0,1.0);
}