:root {
	--main-background-color: #ffffff;
	--element-background-color: #E9E9E9;
	--primary-color: #16C6FE;
	--addit-color: #7D5BA6;
}

@font-face{
	font-family: "SourceSansPro-Light";
	src: url("../fonts/SourceSansPro-Light.ttf");
}
@font-face{
	font-family: "Dosis-Regular";
	src: url("../fonts/Dosis-Regular.ttf");
}
@font-face{
	font-family: "Druk_Wide_Medium";
	src: url("../fonts/Druk_Wide_Medium.otf");
}

html {
	overflow-x: hidden;
	touch-action: none;
}
body {
	margin: 0;
	padding: 0;
	position: relative;
	font-family: 'SourceSansPro-Light';
}
#body-wrapper {
	margin: 0;
	padding: 0;
	position: relative;
	
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-direction: column;
	overflow-x: hidden;
}
.page-section{
    width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 1rem 0;
}
.page-section.__primary {
	background-color: var(--addit-color);
	color: var(--main-background-color);
	height: 10rem;
}
.page-section.__primary .content-container {
	align-items: center;
	justify-content: space-between;
}

.content-container {
	position: relative;
	display: flex;
	max-width: 950px;
	flex-grow: 1;
	gap: 1rem;
}
.content-container.__primary {
	color: var(--main-background-color);
}

.content-container .text-block {
	display: flex;
	width: 50%;
	flex-direction: column;
}

.fullsize-image-element {
	position: absolute;
	height: 100%;
	object-fit: cover;
}

.content-container .side-image-element {
	transform: translateY(-3rem);
    object-fit: contain;
}


.banner-block {
	background: url('../assets/banner.svg');
	background-size:cover;
	border-radius: 25px;
	padding: 1.5rem;
	color: var(--main-background-color);


	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.banner-block h1 {
	width: 70%;
}


.logo-block{
    width: 100%;
    display: flex;
    align-items: flex-start;
}
.__primary_section{
    background-color: black;
}
.offer-content-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}
.offer-block{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.offer-content-box{
    background-color: var(--element-background-color);
    padding: 1.5rem;
    border-radius: 25px;
}
.button{
    background-color: var(--addit-color);
    color: var(--main-background-color);
    padding: .5rem 2rem;
    border: 0;
    border-radius: 25px;
	width: max-content;
	transition: .3s;
	text-decoration: none;
}

.button.__primary{
	background-color: var(--primary-color);
    color: var(--main-background-color);
}

.button:hover{
	background-color: var(--primary-color);
	cursor: pointer;
}

.button.__primary:hover{
	background-color: var(--addit-color);
}

.__a{
    justify-content: space-around;
}

.number-container{
    display: flex;
    flex-direction: column;
	width: 100%;
}
.number-block{
    display: flex;
    flex-direction: row;justify-content: space-between;
	gap: 1rem;
}
.number{
	height: 150px;
}
.mobile-num-comtainer{
	display: none;
}


.partner-container{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
}
.article-box{
	color: var(--main-background-color);
	background: black;
	padding: 1.5rem;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mail-box{
	color: black;
	background: white;
	padding: 1.5rem 6rem 1.5rem 1.5rem;
	border: 3px solid black;
	border-radius: 25px;
	
}
.mail{
	color: #16C6FE;
	font-size: 19pt;
	text-decoration: none;
}

.contacts-block{
	background: black;
	border-radius: 25px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 1rem;
}
.contacts-box{
	color: var(--main-background-color);
}
.map{
	height: 100%;
	width: 100%;
	border-radius: 25px;
}
.map-box{
	height: 100%;
	width: 55%;
}
.__footer-text-location{
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-text{
	color: var(--main-background-color);
	text-align: center;
}

@media (max-width: 900px){

	.logo-block{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.banner-block {
		align-items: center;
		padding: 1rem;
		gap: 1rem;
		margin: 0 1rem;
	}
	.banner-block h1{
		width: 80%;
	}
	.button{
		padding: .5rem 4rem;
		width: max-content;
		transition: .3s;
		text-decoration: none;
	}


	.offer-block{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		gap: 1rem;
	}
	.__desktop-only{
		display: none;
	}
	.offer-content-box{
		max-width: 70%;
	}
	.__width{
		width: 80%;
	}
	.__margin-left{
		margin: 0 0 0 2.5rem;
	}


	.content-container .text-block {
		width: 100%;
		display: flex;
		margin: 0 1rem;
	}
	
	
	.number-container{
		align-items: center;
		justify-content: center;
	}
	.number{
		width: unset;
		height: 100px;
	}

	.partner-container{
		margin: 0 1rem;
		flex-direction: column;
		gap: 1rem;
	}

	.mobile-partner{
		display: flex;
		flex-direction: column;
	}
	.page-section.__primary {
		height: unset;
	}
	.start-vector{
		top: -1rem;
		height: 130%;
		position: absolute;
	}
	.contacts-block{
		flex-direction: column;
		width: 100%;
		margin: 0 2rem;
	}

	
	.map-box{
		height: 300px;
		width: 100%;
		margin: 0 1rem;
	}
	.__center{
		display: flex;
		align-items: center;
	}
}

@media (max-width: 750px){
	.number-block {
		flex-direction: column;
	}
}