:root{
	--brand: #302783;
	--brand-alpha-7: rgba(48, 39, 131, 0.07);
	--brand-900: #170e64;
	--brand-600: #4c40bb;
	--brand-500: #8982cb;
	--brand-400: #c1beda;
	--brand-300: #cac7e3;
	--blue-200: #ecf2fc;
	--black: #000000;
	--white: #ffffff;
	--red: #ef4048;
	--overlay: rgba(208, 208, 216, 0.90);
	--input-border: #dedced;
}

body{
	overflow-x: hidden;
}

.header__content{
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	padding: 3.47vw 5.2vw;
}

.nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo{
	width: 16.47vw;
	height: 2.22vw;
	background-image: url('../images/logo-light.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.navigation__box{
	display: flex;
  gap: 2.22vw;
}

.navigation__item{
	text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-size: 1.67vw;
  font-style: normal;
  font-weight: 400;
  line-height: 2.22vw;
	color: var(--brand-400);
	transition: all 0.5s;
}

.navigation__item:hover{
	transition: all 0.5s;
	color: var(--white);
}

.navigation__item:active{
	transition: all 0.5s;
	color: var(--white);
}

.active{
	color: var(--white);
}

.title{
	margin-top: 6.95vw;
	color: var(--white);
	font-size: 4.17vw;
	font-weight: 300;
  font-family: Montserrat, sans-serif;
	letter-spacing: -1.2px;
	max-width: 58vw;
}

.main{
	box-sizing: border-box;
	padding: 5.2vw;
}

.description__box{
	padding-bottom: 5.2vw;
	display: flex;
	flex-direction: column;
	gap: 3.47vw;
}

.description{
	color: var(--brand);
	font-family: Montserrat, sans-serif;
	font-size: 2.78vw;
	line-height: 4.17vw;
	max-width: 65vw;
}

.btn{
	background-color: var(--brand);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--white);
	cursor: pointer;
  font-family: Montserrat, sans-serif;
	font-size: 1.46vw;
	line-height: 2.2vw;
	padding: 1.04vw 3.47vw;
	text-decoration: none;
	width: max-content;
	border: 2px solid transparent;
	transition: all 0.5s;
}

.btn:hover{
	transition: all 0.5s;
	background-color: var(--brand-600);
}

.btn:focus{
	transition: all 0.5s;
	border: 2px solid var(--brand-400);
	background: var(--brand);
}

.btn:active{
	transition: all 0.5s;
	background: var(--brand-900);
}

.btn.load{
	padding: 1.04vw 3.47vw;
	transition: all 0.5s;
}

.loader{
	width: 2.08vw;
	height: 2.08vw;
	animation: load 1s linear infinite forwards;
}

@keyframes load {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.title__box{
  font-family: Montserrat, sans-serif;
	color: var(--brand);
	font-weight: 400;
	font-size: 2.78vw;
}

.footer{
	padding: 6.94vw 5.2vw 3.47vw;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	font-family: Montserrat, sans-serif;
	font-size: 1.25vw;
	font-weight: 400;
	gap: 1.74vw;
	justify-content: space-between;
	align-items: flex-end;
}

.footer__column{
	display: flex;
	flex-direction: column;
	gap: 1.04vw;
}

.footer__column:nth-child(1){
	max-width: 30vw;
	line-height: 1.94vw;
}

.company__social{
	display: flex;
	align-items: center;
	gap: 1.04vw;
}

.social{
	cursor: pointer;
}

.social img{
	height: 2.08vw;
	width: auto;
}

.company__reg{
	font-weight: 600;
}

@media (max-width: 992px) {
	.logo{
		width: 23.87vw;
		height: 3.23vw;
	}

	.navigation__item {
    font-size: 2.42vw;
    line-height: 3.23vw;
  }

	.title{
		font-size: 6.05vw;
		max-width: 80vw;
	}

	.description{
		font-size: 4.04vw;
		line-height: 6.05vw;
		max-width: 100%;
	}

	.btn{
		font-size: 2.12vw;
		line-height: 3.23vw;
		padding: 1.5vw 5.05vw;
	}

	.title__box{
		font-size: 4.04vw;
		line-height: 6.05vw;
	}

	.footer{
		font-size: 1.82vw;
	}

	.footer__column{
		gap: 1.51vw;
	}

	.footer__column:nth-child(1){
		line-height: 2.83vw;
		max-width: 43vw;
	}

	.company__social{
		gap: 1.51vw;
	}

	.social img{
		height: 3.03vw;
	}

	.loader{
		width: 3.03vw;
		height: 3.03vw;
	}

	.btn.load{
		padding: 1.51vw 5.05vw;
	}
}

@media (max-width: 641px) {
	.logo{
		width: 50.67vw;
		height: 6.67vw;
	}

	.hamburger__menu {
		width: 12vw;
		height: 12vw;
    display: flex;
    gap: 0.45vw;
    position: absolute;
		top: 4vw;
    right: 4vw;
    z-index: 1000;
		background-image: url('../images/hamburger-light.svg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
  }

	.navigation__list {
    display: none;
  }

	.navigation__item {
    font-size: 5.87vw;
    line-height: 9.6vw;
  }

	.hamburger__menu_open{
		background-image: url('../images/hamburger-close.svg');
	}

	.hamburger__menu.hamburger__menu_open {
    position: fixed;
    top: 4vw;
    right: 4vw;
  }

	.hamburger__menu_open ~ .nav__overlay {
		height: 100vh;
		width: 100%;
		z-index: 100;
		position: fixed;
    top: 0;
    left: 0;
		background-color: var(--overlay);
	}

	.hamburger__menu_open ~ .nav__overlay .nav {
    display: flex;
		flex-direction: column;
		gap: 13.33vw;
		align-items: flex-start;
    background-color: var(--white);
		border-radius: 0px 0px 15px 15px;
		padding: 5.33vw 4vw 13.33vw;
  }

	.hamburger__menu_open ~ .nav__overlay .logo{
		background-image: url('../images/logo-dark.png');
	}

	.hamburger__menu_open ~ .nav__overlay .navigation__list{
		display: block;
	}

	.hamburger__menu_open ~ .nav__overlay .navigation__item{
		color: var(--brand-500);
	}

	.hamburger__menu_open ~ .nav__overlay .active{
		color: var(--brand);
	}

	.hamburger__menu_open ~ .nav__overlay .navigation__item:hover{
		color: var(--brand);
	}
	
	.hamburger__menu_open ~ .nav__overlay .navigation__item:active{
		color: var(--brand);
	}

	.hamburger__menu_open ~ .nav__overlay .navigation__box{
		display: flex;
		flex-direction: column;
		gap: 5.33vw 
	}

	.header__content{
		padding: 5.33vw 4vw;
	}

	.title{
		margin-top: 10.67vw;
		font-size: 9.6vw;
		line-height: 11.2vw;
		letter-spacing: -0.72px;
		max-width: 100%;
	}

	.main{
		padding: 8vw 4vw;
	}

	.description__box{
		padding-bottom: 8vw;
		gap: 8vw;
	}

	.description{
		font-size: 5.87vw;
		line-height: 9.6vw;
	}

	.btn{
		padding: 4vw 9.33vw;
		font-size: 4.53vw;
		line-height: 5.33vw;
	}

	.title__box{
		font-size: 5.87vw;
		line-height: 9.6vw;
	}

	.footer{
		padding: 13.33vw 4vw 5.33vw;
		flex-direction: column;
		gap: 8vw;
		align-items: flex-start;
		font-size: 4.27vw;
		line-height: 6.4vw;
	}

	.footer__column{
		gap: 2.67vw;
	}

	.footer__column:nth-child(1){
		max-width: 100%;
		line-height: 6.4vw;
	}

	.company__social{
		gap: 4vw;
	}

	.social img{
		height: 6.67vw;
	}

	.loader{
		width: 5.33vw;
		height: 5.33vw;
	}

	.btn.load{
		padding: 4vw 9.33vw;
	}
}