/* Подключение шрифтов */

@font-face {
  font-family: 'WixMadeforDisplay';
  src: url('/wp-content/themes/metalstroi/fonts/WixMadeforDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WixMadeforDisplay';
  src: url('/wp-content/themes/metalstroi/fonts/WixMadeforDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WixMadeforDisplay';
  src: url('/wp-content/themes/metalstroi/fonts/WixMadeforDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WixMadeforDisplay';
  src: url('/wp-content/themes/metalstroi/fonts/WixMadeforDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WixMadeforDisplay';
  src: url('/wp-content/themes/metalstroi/fonts/WixMadeforDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*{
	box-sizing: border-box;
	--shrift: #2b2a29;
	--white: #fff;
	--seryy: #a1a1a1;
	--whitet-family: "WixMadeforDisplay", sans-serif;
	--green: #f15922;
	--orange: #f15922;

	/* Dimensions */

	--height50px: clamp(1.875rem, 1.25rem + 2.5vw, 3.125rem);
	--height100px: clamp(3.125rem, 1.563rem + 6.25vw, 6.25rem);

	--sel-bg: #f15922;
	--sel-color: #fff;
}

::selection { background: var(--sel-bg); color: var(--sel-color); }
::-moz-selection { background: var(--sel-bg); color: var(--sel-color); }

#page{
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body {
	font-family: var(--whitet-family);
	font-style: normal;
	color: var(--shrift);
}

a {
	text-decoration: none;
}

.cursor{
	cursor: pointer;
}

.container {
	margin: 0 auto;
	height: 100%;
	max-width: 1640px;
	padding: 0 20px;
}

#breadcrumbs{
	margin: 30px 0px;
}

#breadcrumbs,
#breadcrumbs a,
#breadcrumbs span{
    font-weight: 600;
    font-size: clamp(0.75rem, 0.688rem + 0.25vw, 0.875rem);
    line-height: 160%;
    color: var(--shrift);
}

#breadcrumbs .breadcrumb_last{
	color: var(--seryy);
}

.site{
	position: relative;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
	padding: 0px !important;
}


/* Page-single */

.title :is(h1, h2, h3, h4, h5, h6),
.title,
.page-single .title{
	margin-bottom: var(--height50px);
	font-weight: 700;
	font-size: clamp(1.563rem, 1.219rem + 1.38vw, 2.25rem);
	line-height: 120%;
}

.page-single .description{
  font-weight: 400;
  font-size: clamp(0.875rem, 0.813rem + 0.25vw, 1rem);
  line-height: 120%;
}

.page-single .description p:last-child{
	margin: 0px;
}

.page-single .table{
	margin-top: 60px;
}

.page-single .table li{
	padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.page-single .table li:nth-child(odd) {
    background: #f6f7f8;
}

.page-single .table li:nth-child(even) {
	background: var(--white);
}

/* Header */

.site-header-secondary,
.site-header{
	position: sticky;
    top: 0;
    left: 0;
    width: 100%;
	transition: all 0.3s ease-in-out;
	padding: 11px 0px;
	z-index: 9999;
	background-color: #fff;
}

.site-header-secondary{
	background: var(--white);
	box-shadow: 0 6px 12px 0 rgba(55, 57, 61, 0.05);
}

.wrapper_header{
	display: flex;
    align-items: center;
    justify-content: space-between;
	color: var(--white);
	gap: 20px;
}

.wr__logo{
	display: flex;
    gap: 10px;
    align-items: center;
}
 
.site-description{
	max-width: 212px;
    font-family: var(--whitet-family);
    font-weight: 700;
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
    line-height: 130%;
}

.main-menu{
	display: flex;
    gap: clamp(1.25rem, -6.118rem + 10.53vw, 3.75rem);
    align-items: center;
}

.main-menu li a{
	font-weight: 600;
	font-size: 12px;
	line-height: 100%;
	text-transform: uppercase;
	color: var(--shrift);
	transition: all 0.3s ease-in-out;
}

.location-header,
.wrapper_contact-telefon{
	font-weight: 700;
	font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
	line-height: 100%;
	color: var(--shrift);
	transition: all 0.3s ease-in-out;
	white-space: nowrap;
	display: flex;
    align-items: center;
    gap: 10px;
}

.wrapper_contact{
	display: flex;
	gap: clamp(0.938rem, 0.156rem + 3.13vw, 2.5rem);
	align-items: center;
}

.botton-contact{
	font-weight: 700;
	font-size: clamp(0.875rem, 0.813rem + 0.25vw, 1rem);
	line-height: 100%;
	text-transform: uppercase;
	color: var(--shrift);
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
	text-align: center;
}

.site-header-secondary .wrapper_contact-telefon,
.site-header-secondary .botton-contact,
.site-header-secondary .innerDiv_contact span,
.site-header-secondary .innerDiv_contact a,
.site-header-secondary .site-description,
.site-header-secondary .main-menu li a{
	color: var(--shrift);
}

.site-header-secondary .botton-contact{
	--bgColor: white;
}

.top-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 15px;
}

.top-header > div{
	display: flex;
	gap: clamp(0.625rem, -17.188rem + 25vw, 1.875rem);
	align-items: center;
}

.location-header{
	display: flex;
	gap: 10px;
	align-items: center;
	white-space: normal;
}


/* Main-block */

.main-block{
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
	position: relative;
}

.wr-titleUslugi::before,
.main-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 35%); 
  z-index: 2;
}

.main-block .container{
	position: relative;
	z-index: 3;
}

.main-block::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	background: white;
	height: 75px;
	bottom: 0;
	z-index: 2;
}

.content-main-bl{
	display: grid;
    align-items: end;
    height: 100%;
	padding-top: clamp(6.25rem, 3.125rem + 12.5vw, 12.5rem);
}

.wr__main-block{
	color: var(--white);
	display: grid;
	gap: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem);
	margin-bottom: clamp(1.875rem, 0.188rem + 6.75vw, 5.25rem);
	width: 100%;
}

.wr__main-block .title{
	font-weight: 700;
	font-size: clamp(1.875rem, 1rem + 3.5vw, 3.625rem);
	line-height: 110%;
	width: 100%;
	margin: 0px;
}

.wr__main-block .title span{
	background: var(--green);
	border-radius: 4px;
	padding: 0px 8px;
}

.wr__main-block p{
	font-weight: 600;
	font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem);
	line-height: 120%;
	margin: 0px;
}

.advantage-main-block{
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 40px 20px 20px 20px;
	background: white;
	border-radius: 5px;
}

.advantage-main-block .advantage img{
    padding: clamp(0.625rem, 0.313rem + 1.25vw, 1.25rem);
    background: var(--orange);
    border-radius: 100%;
	max-width: 90px;
	max-height: 90px;
}

.advantage-main-block .advantage{
    display: flex;
    width: fit-content;
    justify-items: center;
    gap: 20px;
    align-items: center;
}

.advantage-main-block .advantage span{
	font-weight: 700;
    font-size: clamp(1.125rem, 0.906rem + 0.88vw, 1.563rem);
    line-height: 120%;
}

.name-form1,
.telefon-form1{
	padding: 15px 20px;
    background: transparent;
    border: 2px solid var(--orange);
    border-radius: 5px;
    color: white;
    font-size: 16px;
    font-family: var(--whitet-family);
    line-height: 100%;
	width: 100%;
	box-sizing: border-box;
	max-width: 415px;
}

.main-form .name-form1,
.main-form .telefon-form1{
	border: 2px solid #fff;
}

.name-form1{
    margin-bottom: 15px;
}

.telefon-form1::placeholder {
	color: white;     
	font-size: 15px; 
	font-family: var(--whitet-family);
	opacity: 1; 
	line-height: 100%;       
}

.button-form1{
	background-color: var(--green);
    border: none;
    font-size: 16px;
    font-family: var(--whitet-family);
    line-height: 100%;
    border-radius: 5px;
    padding: 18px 50px;
    color: white;
    font-weight: 600;
    margin-top: 30px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.button-form1:hover{background-color: var(--orange);}

.logo img{
	min-width: 100px;
	height: auto;
}

.image-mainFon{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}


/* page-services */

.section-services{
	margin-top: clamp(3.125rem, 12.5vw, 9.375rem);
}

.list-services{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	row-gap: clamp(0.938rem, -0.156rem + 4.38vw, 3.125rem);
    column-gap: clamp(0.938rem, 0.781rem + 0.63vw, 1.25rem);
}

.services{
	display: grid;
	gap: 20px;
	box-shadow: 0 5px 30px 0 rgb(34 34 34 / 15%);
    padding-bottom: 30px;
	align-content: space-between;
	border-radius: 10px;
}

.services a{
	display: grid;
	gap: 20px;
}

.services img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-height: 300px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.services-title{
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 100%;
	font-weight: 700;
}

.services-cena,
.services-description{
	font-size: clamp(0.875rem, 0.813rem + 0.25vw, 1rem);
	line-height: 100%;
}

.services-description{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 4.5em;
}

.services-cena{
	font-weight: 700;
}

.services-order{
	background-color: var(--green);
	border: none;
	font-size: clamp(0.875rem, 0.813rem + 0.25vw, 1rem);
	line-height: 100%;
	border-radius: 5px;
	padding: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
	color: white;
	font-weight: 600;
	text-align: center;
	max-width: 300px;
	transition: all 0.3s ease-in-out;
	max-height: 52px;
	display: flex;
    align-items: center;
    justify-content: center; 
	position: relative;
	z-index: 2;
}

.wr-titleUslugi .services-order{
	margin: 30px 0px 0px 0px; 
}

.services-title,
.services-description,
.services-cena{color: var(--shrift);}


@media (hover: hover){		
	.services-order:hover{ 	background-color: var(--orange);}		
}			
			
@media (hover: none){			
	.services-order:active{ background-color: var(--green);}		
}			

.services-title,
.services-description,
.services-cena,
.services-order{ margin: 0px 20px; }

.services__button-link{
	font-size: clamp(0.875rem, 0.625rem + 1vw, 1.375rem);
	line-height: 100%;
	border-radius: 5px;
	display: block;
	padding: clamp(1rem, 0.813rem + 0.75vw, 1.375rem);
	border: 2px solid var(--green);
	font-weight: 700;
	color: var(--shrift);
	text-align: center;
	margin-top: clamp(1.875rem, 1.25rem + 2.5vw, 3.125rem);
	transition: all 0.3s ease-in-out;
}

@media (hover: hover){		
	.services__button-link:hover{ 	
		background-color: var(--orange);
		color: white;
		border: 2px solid var(--orange);
	}		
}			
			
@media (hover: none){			
	.services__button-link:active{ 
		background-color: transparent;
		color: var(--shrift);
		border: 2px solid var(--green);
	}		
}	

.margin-top{
	margin-top: clamp(3.125rem, 1.563rem + 6.25vw, 6.25rem);
}


/* Block Seo */

.seoBlock-description {
    max-height: 90px;
    overflow: hidden;
    transition: max-height 0.5s ease;
	margin-bottom: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem);
}

.seoBlock-description.open {
    max-height: 1000px; 
}

.seoBlock-toggle {
    cursor: pointer;
	background-color: var(--green);
    border: none;
    font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
    line-height: 100%;
    border-radius: 5px;
    padding: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
    color: white;
    font-weight: 600;
    text-align: center;
    max-width: 250px;
    transition: all 0.3s ease-in-out;
	width: 100%;
}

@media (hover: hover){		
	.seoBlock-toggle:hover{ 	
		background-color: var(--orange);
	}		
}			
			
@media (hover: none){			
	.seoBlock-toggle:active{ 
		background-color: var(--green);
	}		
}	


/* Footer */

.wrapper-footer{
    margin-top: auto;
	background: #f8f8f8;
}

.footer-logo{
	display: grid;
    gap: 20px;
	justify-items: center;
	height: fit-content;
}

.footer-logo img{
	width: clamp(6.25rem, 4.063rem + 8.75vw, 10.625rem);
	height: auto;
}

.site-footer{
	display: flex;
	justify-content: space-between;
	gap: 10px;
    padding: clamp(1.25rem, 0.313rem + 3.75vw, 3.125rem) 0px;
}

.footer-contact{
	display: grid;
    gap: 20px;
}

.footer-contact span:nth-child(1), 
.footer-mess span{
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 100%;
    font-weight: 700;
    display: block;
    margin-bottom: clamp(1.25rem, 0.938rem + 1.25vw, 1.875rem);
}

.footer-contact span:nth-child(1){
	margin-bottom: clamp(0rem, -0.313rem + 1.25vw, 0.625rem);
}

.footer-contact span:nth-child(2), 
.footer-contact a{
	font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem);
    line-height: 100%;
    font-weight: 400;
    display: block;
	color: var(--shrift);
}

.footer-contact a,
.footer-contact span:nth-child(2){
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease-in-out;
	display: grid;
	grid-template-columns: 20px 1fr;
}

.footer-contact a:nth-of-type(1),
.footer-contact a:nth-of-type(2) {
    font-weight: 700;
}

.footer-contact a:hover{color: var(--orange);}

.wr-mess{
	display: flex;
    gap: 5px;
    align-items: center;
	justify-content: center;
}

.wr-mess a{
	position: relative;
	transition: transform 0.3s ease;
	width: 44px;
	height: 44px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.viber{background-color: #7d3daf;}

.telegram{background-color: #1a9dd9;}

.whatsApp{background-color: #1bd741;}

.header-mess .wr-mess a{
	width: 30px;
	height: 30px;
}

@media (hover: hover){		
	.wr-mess a:hover{transform: translateY(-8px);}		
}			
			
@media (hover: none){			
	.wr-mess a:active{transform: translateY(0px);}		
}	

::placeholder{
	font-weight: 700;
	font-size: 16px;
	line-height: 100%;
	color: var(--seryy);
}

.pum-container .telefon-form1,
.pum-container .name-form1,
.pum-container input::placeholder,
.pum-container textarea::placeholder {
    color: #2b2a29;
}

.cky-btn-revisit-wrapper,
.cky-btn-revisit{display: none !important;}


/* Услуги */

.wr-titleUslugi{
	position: relative;
	padding: 86px 0px;
    margin-bottom: 50px;
}

.wr-titleUslugi img{
	position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    z-index: 1;
	object-position: center; 
}

.wr-titleUslugi #breadcrumbs a,
.wr-titleUslugi #breadcrumbs span,
.wr-titleUslugi .title,
.wr-titleUslugi .subtitle{
	color: white;
	position: relative;
    z-index: 5;
}

.subtitle,
.subtitle p{
	margin: 0px;
	font-size: clamp(0.875rem, 0.781rem + 0.38vw, 1.063rem);
}

.uslugi-advantage{
	background: #f8f8f8;
	padding: 40px;
	margin-bottom: 50px;
}

.wr-dop-uslugi{
	flex-wrap: wrap;
	display: flex;
	gap: 15px;
	margin-bottom: clamp(3.125rem, 1.563rem + 6.25vw, 6.25rem);
}

.wr-dop-uslugi .dop-uslugi{
	display: grid;
	gap: 10px;
	justify-items: center;
	background: #f8f8f8;
	padding: 15px 40px;
	border-radius: 5px;
	cursor: pointer;
	border: 1px solid #dfdfdf;
}

.wr-dop-uslugi .dop-uslugi span{text-align: center;}

.wr-dop-uslugi .dop-uslugi span:nth-child(1){
	font-size: 18px;
	font-weight: 600;
	line-height: 120%;
}

.wr-dop-uslugi .dop-uslugi span:nth-child(2){
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
	text-decoration: underline;
}

.name-form1::placeholder {
  color: #FFF;  
  opacity: 1;      
}

.pum-close{
	border: none !important;
	background: transparent !important;
}

#mobil-tel{display: none;}

.description-contact{
	display: grid;
	gap: 50px;
}

.description-contact .wr-mess{
	justify-content: flex-start;
    margin-bottom: 20px;
}

.description-contact .footer-contact{
	justify-items: left;
}

.map iframe{border-radius: 10px;}

.my-video{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5em;
}

.my-video video{
	width: 100%;
    height: auto;
    max-height: 400px;
}

.title-description{
	margin-top: clamp(3.125rem, 1.563rem + 6.25vw, 6.25rem);
}

.titleUslugi-gallery{
	margin: clamp(3.125rem, 1.563rem + 6.25vw, 6.25rem) 0px;
}

.home .seoBlock{
	margin: 0px;
}


/* Media */

@media (max-width:1240px){
	.wrapper_header .site-description{display: none;}
	
	.wrapper_contact{
		max-width: 425px;
	}

	.wr__main-block .title{
		display: grid;
	}

	.wr__main-block .title span{width: fit-content;}

	.top-header .header-mess{display: none;}
}

@media (max-width:995px){

	/* burger */
	.hamb_field {
		display:grid;
		gap: 6px;
		width: 35px;
		margin-left: auto;
		position: relative;
		cursor: pointer;
		z-index: 30000;
		height: 26px
	}

	.hamb_field span {
		height: 3px;
		background-color: var(--orange);
	}

	.hamb_field .bar {
		transition: all .3s ease-in-out
	}

	.hamb_field .bar:nth-child(1) {
		height: 3.1px;
	}

	.rotate45 {
		transform: rotate(45deg);
		position: relative;
		top: 10px
	}

	.hide {
		opacity: 0
	}

	.rotate-45 {
		transform: rotate(-45deg);
		position: relative;
		top: -12px
	}

	.main-menu{
		position: absolute;
		top: 0;
		right: -105%;
		height: 100vh;
		width: 60%;
		background-color: #f8f8f8;
		z-index: 20000;
		transition: right .5s ease-in-out;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 130px;
	}

	.main-menu-mob{
		right: -50px;
	}

	.wrapper_header .menu-header .main-menu li a{
		color: var(--shrift) !important;
	}
	/* -------------------- */

	.wrapper_header .wr__logo{ order: 1;}
	
	.wrapper_header .wrapper_contact{ 
		order: 2;
		max-width: 100%;
	}

	.wrapper_header .menu-header{ order: 3;}

	.list-services{grid-template-columns: 1fr 1fr;}

	.masthead-scroll .hamb_field span{
		background-color: var(--green);
	}

	.hide,
	.rotate45,
	.rotate-45{
		background-color: var(--green) !important;
	}

	.site-header-secondary, 
	.site-header{
		position: fixed;
		background-color: #fff;
	}

	.site-header-secondary hr,
	.top-header,
	.site-header hr{display: none;}

	.wrapper_contact #mobil-tel .wrapper_contact-telefon svg,
	.wrapper_contact .botton-contact{display: none;}

	.wrapper_contact #mobil-tel{
		display: grid;
		gap: 5px;
	}
}

@media (max-width:880px){
	.wr__main-block .title{margin: 0px;}

	.main-block::after{display: none;}

	.advantage-main-block{
		padding: 0px;
		background: transparent;
		flex-direction: column;
		color: white;
		margin-bottom: 30px;
	}

	.advantage-main-block .advantage img{
		padding: 0px;
		background: transparent;
	}

	.uslugi-advantage{
		background: var(--green);
		margin-bottom: 50px;
		padding: 10px;
	}

	.button-form1{margin-top: 20px;}

	.site-footer{
		flex-direction: column;
		align-items: center;
	}

	.footer-contact span:nth-child(1), 
	.footer-mess span{
		text-align: center;
	}

	.footer-contact{justify-items: center;}

	.main-menu{width: 100%;}

	.wrapper_contact{
		flex-direction: column;
		gap: 10px;
	}

	.botton-contact{text-transform: math-auto;}

	.gallery-columns-4,
	.gallery-columns-3{
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 15px !important;
	}
	
	.my-video{
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width:500px){
	.list-services{grid-template-columns: 1fr;}

	.logo img{width: 70px;}

	.pum-container{
		padding: 18px !important;
	}

	.pum-title{
		font-size: 18px !important;
		margin-bottom: 20px !important;
	}

	.pum-container .name-form1, 
	.pum-container .telefon-form1{
		padding: 12px !important;
	}

	.pum-container .button-form1{
		padding: 14px !important;
		font-size: 14px !important;
	}

	.wr-dop-uslugi .dop-uslugi{
		padding: 10px;
		width: 100%;
	}

	.wr-titleUslugi{
		padding: 100px 0px 50px 0px;
	}

	.wr__main-block .title{display: block;}
}

@media (max-width:400px){
	.footer-logo{
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.map iframe{height: 200px;}
	
	.my-video{
		grid-template-columns: 1fr;
	}
	
	.my-video video{max-height: 400px;}
}