@import 'library.less';

@color_red: #ea4c46;
@color_logo: #373535;

img { max-width: 100%; }

body {
	font-family: circe;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	background: #F5EBDC;
	color: #2a2828;
	-webkit-font-smoothing: antialiased;
	
	&.mobile {
		.mobile_call {
			display: inline-block;
		}
	}
}

.mobile_call {
	display: none;
	
	color: #fff;
	background: @color_red;
	font-size: 31px;
	padding: 10px 21px;
	text-transform: uppercase;
	border-radius: 4px;
	margin: 13px 26px 0 0px;
	font-weight: 800;
	letter-spacing: 0px;
}

#wrapper {
	position: relative;
	max-width: 1000px;
    width: 100%;
	margin: 0 auto;
	background: #fff url(../images/gradient.png) repeat-x 0px 370px;
	box-shadow: 0px 0px 24px rgba(0,0,0, 0.14);
	min-height: 1000px;
	.box-sizing;
}

.block {
	padding: 0 64px;
	
	h2 {
		font-size: 22px;
		font-weight: 800;
		margin: 1em 0;
		
		&.centered {
			text-align: center;
		}
		&.padding_left {
			padding-left: 156px;
		}
		&.margin_top {
			margin-top: 2em;
		}
		&.no_margin_top {
			margin-top: 0px;
		}
	}
	
	h3 {
		font-size: 16px;
		font-weight: 600;
		margin: 1em 0;
		line-height: 1.5;
		text-align: right;
		
		&.margin_top {
			margin-top: 1.5em;
		}
	}
	
	&--title {
		padding-top: 30px;
		
		p {
			color:  @color_red;
			text-align: center;
			font-size: 36px;
			line-height: 1.5;
			font-weight: bold;
			letter-spacing: 1px;
			
			&.sub {
				font-size: 28px;
			}
		}
	}
	
	&--header {
		background: url(../images/header.jpg) no-repeat right bottom;
		padding-right: 0px;
		padding-top: 74px;
		height: 370px;
		.box-sizing;
		
		.logo {
			text-transform: uppercase;
			color: @color_logo;
			font-weight: 800;
			font-size: 80px;
			letter-spacing: -3px;
			
			&:first-letter {
				color: @color_red;
			}
		}
		.description {
			font-weight: 800;
			line-height: 28px;
			margin-top: 17px;
		}
		.phone {
			font-weight: 800;
			font-size: 34px;
			margin-top: 19px;
		}
		
		
		.buttons {
			.button {
				display: inline-block;
				color: #fff;
				background: @color_logo;
				margin-top: 17px;
				margin-right: 13px;
				padding: 4px 12px;
				border-radius: 4px;
				font-size: 17px;
				cursor: pointer;
				
				&--road {
					
				}
				
				&--price {
					
				}
			}
		}
	}
	
	&--description {
		background: url(../images/icon.png) no-repeat 629px 175px;
		padding-bottom: 66px;
		padding-top: 50px;
		
		.sub_title {
			color: @color_red;
			font-weight: 800;
			text-transform: uppercase;
			padding-bottom: 10px;
		}
		.list {
			line-height: 28px;
			
			li {
				font-size: 22px;
				list-style: disc;
				margin-left: 22px;
			}
		}
		.tires {
			float: right;
			color: #fff;
			background: @color_red;
		    margin-top: -4px;
		    padding: 4px 6px;
		    border-radius: 4px;
		    font-size: 18px;
		}
		.mb {
			margin-bottom: 30px;
		}
	}
	
	&--price_1 {
		height: 154px;
		background: url(../images/price_1.png) no-repeat center center;
	}
	
	&--price_2 {
		height: 154px;
		background: url(../images/price_2.png) no-repeat center center;
	}
	
	&--gallery {
		padding-top: 83px;
	}
	
	&--contacts {
		text-align: center;
		padding-top: 79px;
		
		.logo {
			text-transform: uppercase;
			color: @color_logo;
			font-weight: 800;
			font-size: 80px;
			letter-spacing: -3px;
			
			&:first-letter {
				color: @color_red;
			}
		}
		.description {
			font-weight: 800;
			line-height: 28px;
			margin-top: 17px;
			
			&--2 {
				margin-top: 27px;
			}
		}
		.phone {
			font-weight: 800;
			font-size: 34px;
			margin-top: 19px;
		}
		
		.map {
			background: #eee;
			height: 511px;
			margin-top: 30px;
		}
		
		.panorama {
			margin-top: 30px;
		}
		
		.mobile_call {
			font-size: 44px;
			margin: 14px 0 0 0px;
		}
	}
	
	&--footer {
		padding-top: 20px;
		padding-bottom: 54px;
		.clear-fix;
		
		.logo {
			float: left;
			text-transform: uppercase;
			color: @color_logo;
			font-weight: 800;
			font-size: 53px;
			letter-spacing: -1px;
			
			&:first-letter {
				color: @color_red;
			}
		}
		.description {
			float: left;
			font-weight: 800;
			font-size: 20px;
			line-height: 24px;
			margin-top: 2px;
			margin-left: 51px;
			text-align: center;
			
			a {
				font-weight: 600;
				color: @color_red;
				border-bottom: 1px solid fade(@color_red, 50%);
				font-size: 17px;
				
				&:hover {
					border-color: @color_red;
				}
			}
		}
		.phone {
			float: right;
			font-weight: 800;
			font-size: 37px;
			margin-top: 7px;
			letter-spacing: -1px;
		}
		
		.ico {
			height: 76px;
			background: url(../images/icon.png) no-repeat center center;
			background-size: 118px 76px;
			margin-top: 44px;
		}
		
		.mobile_call {
			float: right;
			font-size: 29px;
			margin: 13px 0 0 0;
			letter-spacing: 1.5px;
		}
	}
	
	&--equipment {
		background: @color_red;
	    margin-top: -4px;
	    padding: 15px 0px;
	    border-radius: 4px;
	    font-size: 28px;
	    color: #fff;
	    margin: 0px 64px 20px 204px;
	    text-align: center;
	    
	    span {
	    	font-size: 22px;
	    }

		&.margin_top {
			margin-top: 2em;
		}
	}

	&--main-services {
		margin-top: 2em;

		ul {
		 	list-style-type: disc;

			> li {
				font-size: 22px;
				list-style: disc;
				margin-left: 22px;
				color: #ea4c46;
			}
		}
	}

	&.prices-table-wrap {

		.prices-table {
			font-size: 19px;
			width: 100%;

			th {

			}
			tr {

			}
			td {
				color: #383636;
			}
			td,
			th {
				padding: 0 11px;
				text-align: center;
				height: 52px;
				vertical-align: middle;
			}

			tr > th:not(:first-child) {
				background: #3f3d3d;
				color: #efefef;
			}

			tr > td:nth-child(even) {
				background: #dfdfdf;
			}

			tr > th:nth-child(even):not(:first-child) {
				background: #363333;
			}

			tr > th:first-child,
			tr > td:first-child {
				font-size: 19px;
				text-align: left;
				white-space: nowrap;
				padding-left: 0;
				padding-right: 5px;
			}
		}
	}

}

.fixed_icon {
    position: fixed;
    right: 30px; 
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 100;
}

.fixed_icon_item a {
    position: relative;
     z-index: 5;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ea4c46;
}

.fixed_icon_item.wa a {
    background: #2CB742;
}

.fixed_icon_item a::after,
.fixed_icon_item a::before {
  content: '';
  position: absolute;
    z-index: -1;
  border: 2px solid #ea4c46;
  left: -10px;
  opacity: 0;
  right: -10px;
  top: -10px;
  bottom: -10px;
  border-radius: 50%;
  animation: pulse 2.5s linear infinite;
}

.fixed_icon_item.wa a::after,
.fixed_icon_item.wa a::before {
    border-color: #2CB742;
}

.fixed_icon_item a::after {
    animation-delay: 1.25s;
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.hide_desctop { display: none; }

.fixed_icon_item a svg { width: 24px; height: auto; }


@media only screen and (max-width: 992px) {
    
    .block { padding: 0 15px; }
    .block--header { padding-top: 30px; }
    .mobile_call { font-size: 21px; }
    
    .block--header { background-position: left 415px bottom; }
    
    .block--title { margin-top: 30px; }
    
    .block--description { background-position: right 85px top 52px; margin: 50px 0 60px; }
    
    .block--equipment { margin: 0 auto 20px; padding: 15px; max-width: 600px; }
    
    .block.prices-table-wrap .prices-table { width: 100%; }
    
    .block--gallery { margin-top: 80px; }
    
    .block--contacts { margin-top: 80px; }
        .block--contacts .map { height: 450px; }
    
    .block--footer { padding: 20px 15px 54px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .block--footer .description { margin-left: 0; }
        .block--footer .ico { width: 100%; }
    
    
}

@media only screen and (max-width: 650px) {
    
    #wrapper { background: #fff; }
    .hide_mob { display: none; }
    .hide_desctop { display: block; }
    
    .block__header_mob { padding: 30px 15px 40px; }
        .block__header_mob .logo { text-transform: uppercase; color: #373535; font-weight: 800; font-size: 28px; letter-spacing: -0.5px; margin: 0 0 35px; }
            .block__header_mob .logo:first-letter { color: #ea4c46; }
        .block__header_mob_description { font-weight: 700; text-align: center; font-size: 40px; margin: 0 0 13px; }
        .block__header_mob_adres { font-size: 20px; font-weight: 500; text-align: center; line-height: 1.6; }
    
    .block--header { background: none; height: 310px; }
        .block--header .logo { font-size: 60px; }
        .block--header .description { font-size: 20px; }
    
    .mobile_block_info { padding: 0; text-align: center; }
        .mobile_block_btns { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 20px; padding: 0 15px; }
            .mobile_block_btns a { width: 150px; height: 46px; display: flex; align-items: center; justify-content: center; background: #ea4c46; border-radius: 10px; font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; }
            .mobile_block_btns a.btn_wa { background: #2CB742; gap: 8px; }
                .mobile_block_btns a.btn_wa i { width: 20px; height: auto; font-size: 0; line-height: 0; }
                    .mobile_block_btns a.btn_wa i svg { width: 100%; height: auto; }
        .mobile_block_info_img { font-size: 0; line-height: 0; margin: 0 auto 20px; }
            .mobile_block_info_img img { width: 100%; border-radius: 15px; }
        .mobile_block_info_counter { height: 100px; display: flex; align-items: center; justify-content: center; }
            .mobile_block_info_counter iframe { transform: scale(2); }
    
    .block--title p { font-size: 24px; }
    
    .block--description { padding-bottom: 270px; position: relative; background-position: bottom center; }
        .block--description .tires { position: absolute; left: 15px; right: 15px; bottom: 170px; text-align: center; float: none; }
    
    .block--equipment { margin: 0 15px 20px; }
    
    .block h2.padding_left { padding-left: 0; }
    
    .block.prices-table-wrap .prices-table, .block.prices-table-wrap .prices-table tbody { width: 100%; display: flex; }
        .block.prices-table-wrap .prices-table tr { display: flex; flex-direction: column; flex: 1; }
        .block.prices-table-wrap .prices-table tr:first-child { max-width: 100px; }
            .block.prices-table-wrap .prices-table tr > th:nth-child(even):not(:first-child) { background: #dfdfdf; }
            .block.prices-table-wrap .prices-table tr > th:not(:first-child) { background: none; }
            .block.prices-table-wrap .prices-table tr > th span { display: inline-block; width: 32px; height: 32px; line-height: 32px; font-size: 12px; text-align: center; background: #ea4c46; border-radius: 50%; }
            /*.block.prices-table-wrap .prices-table tr > td:nth-child(even) { background: #ffebeb; }*/
            .block.prices-table-wrap .prices-table tr > th:first-child, .block.prices-table-wrap .prices-table tr > td:first-child { font-size: 12px; padding: 8px 10px; height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; white-space: normal; text-align: center; }
            .block.prices-table-wrap .prices-table td, .block.prices-table-wrap .prices-table th { font-size: 14px; height: auto; padding: 10px; height: 34px; box-sizing: border-box; }
            .block.prices-table-wrap .prices-table th { padding: 1px 10px; }
    
    .block h3 { text-align: center; }
    
    .block--contacts .logo { font-size: 60px; }
    .block--contacts .description { font-size: 20px; }
    .block--contacts .mobile_call { font-size: 24px; }
    .block--contacts .map { height: 420px; }
    
    .block--footer .mobile_call { font-size: 24px; }
    
}