@import url('https://fonts.googleapis.com/css2?family=Inter : wght@200;300;400;500;600;700;800&display=swap');

*{
	box-sizing  : border-box;

	margin      : 0;
	padding     : 0;

	font-family : 'Inter';
}

.position-handler {
	position : relative;
}

li {
	list-style : none;
}

a{
	color           : white;
	text-decoration : none;
}

html {
	scroll-behavior : smooth;
}

.wrapper {
	max-width : 1200px;
	margin    : auto;
	padding   : 0 50px;
}

/* end of shared styles */
/* start of header styles */
.header {
	position : absolute;

	height   : 80px;
	width    : 100%;

	color    : white;
}

.header .wrapper {
	display         : flex;

	align-items     : center;
	justify-content : space-between;
}

.header__nav {
}

.header__nav__li {
	list-style : none;
}

.header__nav__li + .header__nav__li {
	margin-left : 15px;
}

.header__nav__ul {
	display     : flex;

	height      : 80px;

	align-items : center;
}

.header__phone{
	position : relative;
}

.header__phone:after {
	content    : '';

	position   : absolute;
	bottom     : -5px;
	left       : 0px;

	height     : 2px;
	width      : 100%;

	background : #22C3E9FF;
}

/* end of header styles */
/* start of prescreen styles */
.prescreen {
	height            : 800px;
	max-height        : 100vh;
	width             : 100%;

	background        : url('../pictures/prescreen.png');
	background-repeat : no-repeat;
	background-size   : cover;
	color             : white;
}

.prescreen{
	padding-top : 240px;
}

.prescreen h1 {
	font-size : 50px;
}

.prescreen span {
	margin      : 20px 0;

	font-size   : 20px;
	font-weight : 300;
}

.prescreen a {
	position        : relative;

	font-size       : 20px;
	font-weight     : 400;
	color           : white;
	text-decoration : none;
}

.prescreen a:after {
	content   : '↓';

	position  : absolute;
	bottom    : -200%;
	left      : 50%;

	font-size : 40px;

	transform : translate(-50%);
}

.prescreen h1,span{
	display   : block;

	width     : 100%;
	max-width : 600px;
}

/* end of prescreen styles */
/* start of our-objects styles */
.our-objects__title {
	margin-top : 40px;
	font-size  : 30px;
}

.our-objects__cards-holder {
	display         : flex;

	margin          : 0 -50px;

	justify-content : space-between;
}

.our-objects__card__picture{
	vertical-align : top;
	width          : 300px;
}

.our-objects__card {
	width : fit-content;
}

.our-objects__card{
	margin     : 10px;
	margin-top : 40px;
}

.our-objects__card__bottom{
	display         : flex;

	height          : 70px;
	padding         : 0 20px ;

	background      : #555555FF;
	font-weight     : 600;

	justify-content : space-between;
	align-items     : baseline;
}

.our-objects__card__bottom__title{
	font-size   : 25px;
	color       : white;
	line-height : 70px;
}

.our-objects__card__bottom__subtitle{
	color : #B8B8B8FF;
}

.our-objects__cards-holder{
	display         : flex;

	flex-wrap       : wrap;
	justify-content : space-around;
	align-items     : center;
}

/* end of our-objects styles */
/* start of callback styles */
.callback {
	overflow   : hidden;
	width      : 100vw;
	margin-top : 50px;
}

.callback__cards-holder{
	display : flex;
}

.callback__title{
	display       : flex;

	margin-bottom : 50px;

	font-size     : 30px;

	align-items   : baseline;
}

.callback__title span {
	font-size   : 25px;
	font-weight : 500;
	color       : #BDBDBDFF;
}

.callback__card{
	height        : 450px;
	width         : 500px;
	margin        : 20px;
	padding       : 30px;

	border-radius : 6px;
	box-shadow    : 2px 2px 10px 0 rgb(0,0,0,0.4);
}

.callback__card+ .callback__card{
	margin-left : 50px;
}

.callback__card__header {
	display     : flex;
	align-items : center;
}

.callback__card__header__author-name{
	font-size   : 20px;
	font-weight : 600;
	color       : black;
}

.callback__card__header__location {
	color : #BDBDBDFF;
}

.callback__card__header__img {
	height        : 50px;
	width         : 50px;

	border-radius : 10px;
}

.callback__card__header__center{
	width       : 200px;
	margin-left : 15px;
}

.callback__card__header__stars{
	display : flex;
	height  : 50px;
}

.callback__card__header__stars img {
	height : 22px;
	width  : 24px;
}

.callback__card__content {
	margin      : 0 10px;
	margin-top  : 40px;

	line-height : 30px;
}

.callback__navigation {
	display : flex;

	width   : fit-content;
	margin  : auto;
}

.slick-arrow{
	height        : 60px;
	width         : 60px;
	margin        : 10px;

	cursor        : pointer;
	font-size     : 40px;
	color         : gray;
	line-height   : 50px;
	text-align    : center;
	border        : 1px solid gray;
	border-radius : 50%;

	transition    : 0.2s;
}

.slick-arrow:hover{
	transform : scale(1.1);
}

/* end of callback styles */
.contacts{
	position          : relative;

	height            : 80vh;
	max-height        : 800px;
	margin-top        : 50px;
	padding-top       : 50px;

	background        : url('../pictures/contacts.png');
	background-repeat : no-repeat;
	background-size   : cover;
}

.contacts h2, p {
	max-width   : 320px;

	font-size   : 40px;
	font-weight : 300;
	color       : white;
}

.contacts p {
	margin-top  : 30px;

	font-size   : 20px;
	font-weight : 200;
}

.contacts__links{
	position : absolute;
	bottom   : 20px;
}

.contacts__links a + a{
	margin-left : 10px;
}

/* end of contacts styles */
/*start of media styles*/
/* start of header styles */
@media (max-width: 700px){
	.header__nav{
		position   : relative;

		height     : 80px;

		transition : 0.4s;
	}

	.header__nav__ul{
		position         : relative;
		top              : 80px;

		overflow         : hidden;
		height           : auto;
		max-height       : 0;

		transition       : 0.4s;
		transform-origin : 0 0;

		flex-direction   : column;
	}

	.header-burger-Btn{
		position : relative;

		height   : 80px;
		width    : 100%;
	}

	.header-burger-Btn-img{
		position   : absolute;
		top        : 50%;
		left       : 50%;

		transition : .4s;
		transform  : translate(-50%,-50%);
	}

	.header-burger-line {
		height     : 2px;
		width      : 40px;
		margin     : auto;

		background : white;

		transition : 0.4s;
	}

	.header-burger-line + .header-burger-line{
		margin-top : 10px;
	}

	.header__nav__li {
		display    : block;

		width      : fit-content;
		margin     : auto;

		text-align : center;
	}

	.header__nav__li + .header__nav__li {
		margin     : auto;
		margin-top : 5px;
	}

	.header__nav:hover , .header__nav:hover .header__nav__ul {
		background : rgb(0,0,0,0.4);
		transition : 0.4s;
	}

	.header__nav:hover .header__nav__ul {
		max-height : 300px;
	}

	.header__nav:hover .header-burger-line:nth-child(1){
		transform : translate(0px,12px);
	}

	.header__nav:hover .header-burger-line:nth-child(3){
		transform : translate(0px,-12px);
	}

	.header__nav:hover .header-burger-line:nth-child(2){
		transform : rotate(90deg);
	}

	.header__nav:hover .header-burger-Btn-img {
		transform : translate(-50%,-50%) rotate(45deg);
	}

	.callback .wrapper {
		padding : 5px;
	}

	.callback__card{
		width : 100vw;
	}

	.prescreen{
		padding-top : 200px;
	}

	.prescreen .wrapper {
		padding   : 5px;
		overflow-wrap: break-word;  /* не поддерживает IE, Firefox; является копией word-wrap */ 
		word-wrap : break-word;
		word-break: keep-all;  /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ 
		line-break: loose;  /* нет поддержки для русского языка */ 
		hyphens: manual;  /* значение auto не поддерживается Chrome */ 
	}

	.prescreen .wrapper h1 {
		font-size : 40px;
	}

	.contacts__links img{
		height : 40px;
	}
}
/*end of media styles*/