@import "reset.css";
@import "fonts.css";
@import "content.css";
@import "element.css";
@import "responsive.css";

:root { /*  var(--vis) */
  --font-general: 'Inter', arial, sans-serif;
	--font-header: 'OnestBold';
	--font-header-2: 'OnestRegular';
	
	/* Colors */
	--orange: #ef6c1c;
	--blue: #025a7e;
  
}

html {
	font-family: var(--font-general);
	background: #f1f1f1; 
}

body {width:100%;}

.flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
  flex-direction: column;
	min-height: 100vh;	
}

.center-container{
	margin: 0 auto;
	max-width: 1200px;	
}

header {	
	background-color: #f1f1f1;
	background-image: url(../img/white-brick-wall.png);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 42px 0 0px 0;
  font-family: var(--font-header);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 5px 0;
	min-height: 600px;
}

.logo-top {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 50px;
	font-size: 20px;
	color: #000000;
}

.logo {width: 200px;}

.logo img{
	max-width: 100%;
	height:auto;
}

.tel-general {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.tel-general > div:nth-of-type(2) {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;	
}

.tel-general a:link, .tel-general a:visited{
	color: #000000;
	text-decoration:none;
	transition-duration: 0.6s;
}

.tel-general a:active, .tel-general a:hover{
	color: var(--orange);
	transition-duration: 0.6s;
}

.tel-ico {
	background: url(../img/tel.png) no-repeat;
	width: 22px;
	height: 22px;
}

.nav-top{
	min-height: 38px;	
	top:0;
	z-index: 999;
	min-width: 100%;
	margin: 20px 0;
}

.nav-top .nav-top-cells{
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
}

.header-info {
	margin-top: 10px;	
	color: #707070;
	font-size: 36px;
	font-family: var(--font-header-2);	
	line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.header-info div {
	max-width:550px;
}

.header-info span {
	color: var(--orange);  
	font-family: var(--font-header);
}

.header-info img{
	width: 100%;
	max-width: 504px;
	height:auto;
}

.main-box{		
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 1200px;
}

.main-content{	
	padding: 5px;
	min-height:calc(100vh - 228px - 410px - 40px - 154px + 27px);
	/*292+38+100+50+50*/	
}

footer { 
	min-height:200px;
	border-top: 6px solid var(--orange);	
	background: linear-gradient(180deg, var(--blue) 0%, #0279ac 100%);
  color: #efefef;	  
  font-size: 16px;	
}

.footer { 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	line-height: 1.3;
}

.footer div {
	width: 350px;
	margin-top: 20px;
}

footer .copyright {
	line-height: 1.5;
}

footer .contact, footer .social {
	
	display: flex;
	flex-direction: row;
  align-items: center;   /* 👈 выравнивает текст по центру иконки */
  gap: 8px;              /* расстояние между иконкой и текстом */
	flex-wrap: wrap;
	
}

footer a {width: 86%;}

footer svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	/* fill: var(--orange); */
  stroke: #efefef;
}