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

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/cargo-transportation/fonts/montserrat-regular-russian.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/cargo-transportation/fonts/montserrat-medium-russian.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/cargo-transportation/fonts/montserrat-semibold-russian.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/cargo-transportation/fonts/montserrat-bold-russian.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
	box-sizing: border-box;
	--font-family: "Montserrat", sans-serif;
	--shrift: #222;
	--akcent: #a32020;
	--akcent-2: #1e73be;

	/* Dimensions */
	--height50px: clamp(1.875rem, 1.25rem + 2.5vw, 3.125rem); /* (50-30) */
	--height80px: clamp(3.125rem, 2.404rem + 2.88vw, 5rem); /* (80-50) */
	--height100px: clamp(3.125rem, 1.563rem + 6.25vw, 6.25rem); /* (100-50) */
	--height150: clamp(7.5rem, -9.375rem + 18.75vw, 9.375rem); /* (150-120) */

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

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

body {
	font-family: var(--font-family);
	font-style: normal;
	color: var(--shrift);
	background: #fff;
}

a {
	text-decoration: none;
}

.cursor{
	cursor: pointer;
}

.container {
	margin: 0 auto;
	height: 100%;
	max-width: min(105rem, 100% - 40px); 
	padding: 0 20px;
	width: 100%;
}

.site{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.footer{
	margin-top: auto;
}

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

.backgraund{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pum-content iframe{
	width: 100%;
	max-width: 500px;
}

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


/* Header */

.site-header{
	position: sticky;
    top: 0;
    background: #fff;
    z-index: 99999;
	padding: 20px 0px;
	box-shadow: 0 5px 30px -5px rgba(34, 34, 34, 0.2);
}

.site-header .container{
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.site-header__logoWr{
	display: flex;
    gap: 15px;
    align-items: center;
	max-width: 350px;
}

.site-header__logoWr .logo{
	max-width: 110px;
}

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

.site-header .logo img{
	max-height: 70px;
}

.site-header .site-description{
	font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    color: #646464;
	text-transform: uppercase;
}

.menu-header{
	max-width: 500px;
    width: 100%;
}

.main-menu{
	display: flex;
    gap: 10px;
    justify-content: space-between;
}

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

.site-header .contacts{
	display: flex;
    gap: 20px;
}

.contacts__phone{
	display: grid;
    gap: 10px;
	justify-items: end;
}

.footer__contact-phone,
.contacts__phone :is(a, span){
	line-height: 100%;
	color: var(--shrift);
	white-space: nowrap;
}

.footer__contact-phone,
.contacts__phone a{
	font-weight: 700;
	font-size: clamp(1.125rem, 0.906rem + 0.88vw, 1.563rem);
}

.contacts__phone span{
	font-weight: 400;
	font-size: 14px;
	text-align: right;
}

.contact__button{
	background: #a32020;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    padding: 16px 20px;
	text-align: center;
	white-space: nowrap;
}

.pum-container .pum-content .wpcf7 form > p{
	display: grid;
    justify-items: center;
    margin: 0px;
}

.pum-container .pum-content .wpcf7 form > p input{
	margin: 0px;
	width: 100%;
}


/* page__main */

.page__main{
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat;
	padding: 200px 0px;
	overflow: hidden;
    position: relative;
}

.cars::before,
.page__main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)); 
  pointer-events: none;
  z-index: 1;
}

.page__main .container{
	position: relative;
	z-index: 99;
}

.page__main-title{
	font-weight: 700;
    font-size: clamp(1.875rem, 1.31rem + 1.59vw, 2.5rem);
    line-height: 120%;
    color: white;
}

.page__main-title span{color: #d11111;}

.page__main-advantages{
	margin: 40px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: fit-content;
    row-gap: 20px;
    column-gap: 40px;
}

.page__main-advantages div{
	display: flex;
    align-items: center;
    gap: 10px;
/* 	border: 1px solid #9e9e9e;
    border-radius: 5px;
    padding: 10px;
    max-width: 360px; */
    width: 100%;
}

.page__main-advantages div:before{
	content: " ";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background: white;
}

.page__main-advantages div svg{
	width: 42px;
	height: 42px;
}

.page__main-advantages div span{
	font-weight: 500;
	font-size: 15px;
	line-height: 130%;
	color: #fff;
}

.page__main-top{
	max-width: 800px;
    gap: 40px;
    display: grid;
}

.page__main-button{
    background: #a32020;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    padding: 30px 20px;
    text-align: center;
    width: 100%;
    max-width: 330px;
	transition: all 0.3s ease-in-out;
	white-space: nowrap;
	position: relative;
	z-index: 1;
	cursor: pointer;
}


/* services */

.general-title{
	font-size: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); /* 36-20px (1200px-400px) */
	line-height: 120%;
	font-weight: 700;
	text-align: center;
	margin-bottom: clamp(1.875rem, 1.25rem + 2.5vw, 3.125rem); /* 50-30px (1200px-400px) */
}

.services__list{
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
}

.services__item{
	display: flex;
	box-shadow: 0 5px 30px 0 rgba(34, 34, 34, 0.2);
    border-radius: 8px;
    height: 340px;
}

.services__item-right img{
	width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: contain;
}

.services__item-left .services__description,
.services__item-left .services__title{
	font-size: clamp(1.125rem, 0.813rem + 1.25vw, 1.75rem); /* 28-18px (1200px-400px) */
	line-height: 120%;
	font-weight: 600;
}

.services__item-left .services__description{
	font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 20-16px (1200px-400px) */
}

.services__button{
	padding: 30px;
	max-width: 230px;
}

.services__item .services__item-left,
.services__item .services__item-right{
	width: 50%;
}

.services__item .services__item-left{
	display: grid;
	align-content: space-between;
	padding: 30px;
	gap: 25px;
}

.services__list > .services__item:last-child {
  grid-column: span 2; 
}

.services__list > .services__item:last-child .services__item-right img{
	object-fit: cover;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}


/* Cars */

.cars{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 100px 0px;
	position: relative;
}

.cars__description{
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr 1fr;
}

.car-cards{
	background: white;
    border-radius: 8px;
    padding: 30px;
    display: grid;
    justify-items: center;
    gap: 20px;
    align-items: end;
	position: relative;
    z-index: 1;
}

.car-cards img{
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.car-cards span{
	font-size: clamp(1.125rem, 0.813rem + 1.25vw, 1.75rem);
	line-height: 120%;
	font-weight: 600;
}

.cars::before{
	background: linear-gradient(rgb(0 0 0 / 32%), rgb(0 0 0 / 41%));
}

.cars__title{
	color: white;
	position: relative;
	z-index: 1;
}

.gallery__wrapper .gallery{
	margin: 0px;
}


/* Seo block */

.block__seo-description-wrapper {
  position: relative;
}

.block__seo-description {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 300ms ease, opacity 200ms ease;
}

.block__seo-description.expanded {
  max-height: 2000px;
}

.block__seo-description p {
	font-weight: 500;
	font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);  /* 14-18px (1200px-400px) */
	line-height: 130%;
}

.block__seo-title{
	color: #a32020;
}

.seo-toggle:hover,
.seo-toggle:focus {
  outline: none;
}

.seo-toggle-wrap {
	margin-top: 8px;
	display: flex;
	justify-content: center;
}

.button-form1,
.seo-toggle-wrap button{
	background: #a32020;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    padding: 30px;
    text-align: center;
	display: inline-block;
    margin-top: 40px;
	border: none;
	transition: background-color .15s ease, border-color .15s ease;
	cursor: pointer;
	max-width: 300px;
    width: 100%;
}

.button-form1{
	margin: 0px;
}


/* Footer */

.footer{
	padding: 40px 0px;
	background: #f8f8f8;
}

.footer__logo{
	max-width: 200px;
    border-radius: 100%;
	height: fit-content;
}

.footer__logo .logo{max-width: 120px;}

.footer .container{
	display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer__menu,
.footer__contact{
	display: grid;
	gap: 30px;
	max-width: 500px;
	height: fit-content;
}

input{
	padding: 20px;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
    line-height: 130%;
    border-radius: 8px;
    color: #646464;
    border: 1px solid #c9c9c9;
	margin-bottom: 15px;
	width: 100%;
	max-width: 400px;
}

.footer .site-description{
	font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #646464;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px;
}

.footer__menu > span,
.footer__contact > span{
	font-size: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
    line-height: 120%;
    font-weight: 700;
}

.footer__menu-wrapper .main-menu{
	gap: 20px;
	flex-direction: column;
}

.footer__menu-wrapper .main-menu li a{
	font-size: 20px;
}

.footer__logowr{
	display: grid;
    align-content: space-between;
    justify-items: center;
    gap: 20px;
}

.link-devel{
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #646464;
}

.link-devel span{
	color: #a32020;
}


/* Animation */

.page__main .container {
  animation: slideIn 1s ease-out forwards;
  opacity: 0; 
}

@keyframes slideIn {
  from {
    transform: translateX(-100px); 
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.services__item {
  opacity: 0;
  transform: translateX(0);
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
	justify-content: space-between;
}

.services__item:nth-child(even) {
  animation-name: slideInRight;
}

.services__item:nth-child(odd) {
  animation-name: slideInLeft;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

html.pum-open.pum-open-overlay.pum-open-scrollable body>:not([aria-modal=true]){
	padding: 0px !important;
}

.site-header__mess{
	display: flex;
    gap: 7px;
    margin: 0px 10px;
}

#service-gruzoperevozki-ot-35rub .services__item-right{max-width: 311px;}

.page__numberr{
	color: white;
    font-weight: 700;
    font-size: clamp(1.563rem, 1.406rem + 0.63vw, 1.875rem);
    line-height: 100%;
    transition: all 0.3s ease-in-out; 
    white-space: nowrap;
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding: 20px 0px;
    display: block;
}

@keyframes phone-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.page__numberr {
    animation: phone-pulse 2s infinite ease-in-out;
    transform-origin: left;
}

.page__numberr:hover {
    animation-duration: 1s; 
    color: #d11111;
}


/* @Media */

@media (max-width:1380px){
	.services__list > .services__item:last-child{
		grid-column: span 1;
	}

	.services__item{
		height: auto;
	}

	.services__button{
		padding: 25px;
		font-size: 16px;
		width: fit-content;
	}

	.main-menu{
		justify-content: center;
	}

	.cars__description > .car-cards:last-child{
		grid-column: span 2;
	}
}

@media (max-width:1230px){
	.services__list{
		grid-template-columns: 1fr;
	}

	.cars__description{
		grid-template-columns: 1fr 1fr;
	}

	.site-description{
		display: none;
	}
}

@media (max-width:1080px){
		.footer .container{
		flex-direction: column;
	}
}

@media (max-width:995px){

	.site{
		overflow: hidden;
	}

	/* burger */

	.hamb_field {
		display:grid;
		gap: 5px;
		width: 35px;
		margin-left: auto;
		position: relative;
		cursor: pointer;
		z-index: 3000099;
		height: 15px
	}

	.hamb_field span {
		height: 3px;
		background-color: #050d22;
	}

	.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: 4px
	}

	.hide {
		opacity: 0
	}

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

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

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

	.main-menu li a{
		color: var(--shrift);
	}

	/* -------------------- */

	.gallery__wrapper .gallery{
		grid-template-columns: repeat(2, 1fr);
	}

	.site-header .container .site-header__logoWr{
		order: 1;
	}

	.site-header__mess{
		order: 2;
	}

	.site-header .container .contacts{
		order: 3;
	}

	.site-header .container .menu-header{
		order: 4;
	}

	.page__main{
		background-position: right;
	}

	.page__main-advantages{
		grid-template-columns: 1fr;
	}

	.contacts__phone span,
	.site-header .site-description{
		display: none;
	}

	.contacts__phone{
		align-items: center;
	}

	.footer__menu-wrapper .main-menu{
		position: relative;
		color: black;
		right: 0;
		background: transparent;
		padding: 0px;
		margin: 0px;
		align-items: flex-start;
		height: 100%;
		z-index: 1;
	}

	/* ----New style---- */

	.main-menu-mob {
    right: 0 !important; 
  }

  .main-menu {
    z-index: 100000; 
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    padding: 8px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .menu-header {
    position: static !important; 
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width:770px){
	.site-header .contacts{
		gap: 10px;
		flex-direction: column;
	}
}

@media (max-width:570px){
	.site-header .contacts{
		flex-direction: column;
		margin-left: 20px;
	}

	.contact__button{
		font-size: 14px;
	}

	.page__main-advantages div span{
		font-size: 13px;
	}

	.page__main-button{
		font-size: 18px;
		padding: 25px;
		max-width: 260px;
	}

	.page__main{
		padding: 80px 0px;
	}

	.main-menu{
		width: 100%;
	}

	.services__item{
		flex-direction: column-reverse;
		align-items: center;
	}

	.services__item .services__item-left, 
	.services__item .services__item-right{
		width: 100%;
	}

	.services__item .services__item-left{
		gap: 20px;
		justify-items: center;
	}

	.services__item-left .services__description, 
	.services__item-left .services__title{
		text-align: center;
	}

	.services__item-right img{
		max-height: 300px;
	}

	.cars__description {
        grid-template-columns: 1fr;
    }

	.cars__description > .car-cards:last-child{
		grid-column: span 1;
	}

	.cars{
		padding: 50px 0px;
	}

	.seo-toggle-wrap .seo-toggle{
		font-size: 16px;
		padding: 20px;
		margin-top: 30px;
	}

	.gallery .gallery-icon a img{
		max-height: 200px !important;
	}

	input{
		width: fit-content;
	}

	.footer__logo .logo{
		display: flex;
		justify-content: center;
	}

	.footer__logo .logo img{
		max-width: 100px;
	}

	.footer{
		padding: 20px 0px;
	}

	.page__main-advantages div{
		max-width: 300px;
	}

	.button-form1{
		margin: 0px;
		padding: 20px;
	}

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

	.pum-title{
		font-size: 20px !important;
		line-height: 100% !important;
		margin-bottom: 30px !important;
	}

	.button-form1{
		margin: 0px !important;
	}

	input{
		max-width: 100%;
	}

	.logo img{
		max-height: 70px;
	}

	.pum-content .button-form1{
		max-width: 100%;
	}
	.footer__menu-wrapper .main-menu li a{
		font-size: 14px;
	}

	.footer__menu-wrapper .main-menu{
		gap: 10px;
	}

	.footer__menu{
		gap: 20px;
	}

	.site-header__mess{
		display: none;
	}
	
	.site-header .container .contacts .contact__button{
		display: none;
	}
	
	.site-header__mess{
		display: flex;
	}
}

@media (max-width:400px){
	.footer input{
		max-width: 250px;
	}

	.logo img{
		min-width: 70px;
	}

	.page__main{
		padding-top: 170px;
	}
	
	.site-header__logoWr .logo{max-height: 40px;}
}