@import url("reset.css");

/*-------------------font------------------*/
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/*----------------------body-----------------*/
header, nav, section, article, aside, footer {
	display:block
}
html {
	height:100%
}
body {
	background:#5A2B6F;
	font:500 14px/16px 'Inter', Arial, Helvetica, sans-serif;
	color: #fff;
	height:100%;
	letter-spacing: 0.015em;
	-webkit-text-size-adjust:none;
}
.main {
	min-height:100%;
	margin:0 auto;
	width:100%;
	overflow:hidden;
	position:relative;
}
.container {
	max-width:1270px;
	padding:0 11px;
	box-sizing: border-box;
	margin:0 auto;
	position:relative;
}
.hidden, input[type="text"].hidden {
	display:none !important;
}
.cnt {
	text-align:center;
}
.clear {
	clear:both;
}
a, img {
	outline:none;
}
a:focus {
	outline:none;
}
a {
	color:#00B9FF;
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
img {
	max-width:100%;
	vertical-align:middle;
}
.flex {
	display:flex;
	justify-content: space-between;
	align-items: center;
}
* {
	box-sizing: border-box;
}
/*----------------------------header----------------------*/
.header {

}



/*------------------------nav---------------------------*/
.nav {
	transition:all 0.3s linear;
}
.nav ul {

}
.nav ul li {
	padding:0px 24px 0 0;
	position:relative;
}
.nav ul li a {
	position:relative;
	display:block;
	font:normal 18px/22px 'Graphik', Arial, Helvetica, sans-serif;
	color:#fff;
	transition:all 0.3s linear;
	white-space: nowrap;
}
.nav ul li a:hover, .nav ul li.active a {
	text-decoration:underline;
}

.nav_open {
	cursor: pointer;
	transition: all 0.3s linear;
	z-index: 10;
	text-transform:uppercase;
	margin-right:0px;
	display:none;
}
.nav_open span {
	background:#424448;
	height:2px;
	width:23px;
	margin-top:6px;
	border-radius:2px;
	display:block;
	transition: all 0.3s linear;
}
.nav_open span:first-child {
	margin-top:0;
}
.nav_open.active span {
	transform: rotate(45deg);
	margin-top:0px;
}
.nav_open.active span+span {
	transform: rotate(0deg);
	margin-top: 0px;
	visibility:hidden;
}
.nav_open.active span+span+span {
	transform: rotate(-45deg);
	margin-top: -4px;
	visibility:visible;
}
/*------------------------------button-------------------------*/
.btn {
	height:56px;
	width:180px;
	display:inline-block;
	transition:all 0.2s linear;
	cursor:pointer;
	box-sizing: border-box;
	border-radius: 0px;
	padding:20px 0px;
	text-align:center;
	color:#fff;
	background:#9DCE59;
	display:flex;
	margin:0 auto;
	justify-content: center;
}
.btn span{
 margin-left:4px;
}
.btn  path{
 transition:all 0.2s linear;
}
.btn:hover{
 background:#fff;
 color:#5A2B6F;
}
.btn:hover path{
  fill:#5A2B6F;
}
/*-------------------------home-----------------------*/
.section_full{
 /*width:calc(100vw - 10px);*/
 width:100vw;
 height:100lvh;

	@media (max-width: 897px) and (min-aspect-ratio: 4/3) {
		height:auto;
	}
}
.left{
 width:35%;
 height:100%;
 display:flex;
 text-align:center;
 flex-flow: column;
 justify-content: space-between;
 padding:58px 0 69px;

	@media (max-width: 897px) and (min-aspect-ratio: 4/3) {
		padding:0;
	}
}
.right {
	background:url(../images/bg.jpg) no-repeat center;
	background-size:cover;
	width:65%;
	height:100%;
	position:relative;
	
}
.right:before{
display:block;
content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(to right, rgba(90, 43, 111, 65%), rgba(90, 43, 111, 0%));
}
.card{
 position:absolute;
 bottom:0;
 right:0;
 width:305px;
 height:261px;
 background:url(../images/ellipse.png) no-repeat;
 text-align:center;
 padding-top:53px;
 z-index:10;
}
.card h6{
padding-top:10px;
font:600 20px/20px 'Gilroy', Arial, Helvetica, sans-serif;
}
h1{
 font:bold 44px/50px 'Gilroy', Arial, Helvetica, sans-serif;
	letter-spacing: 0.035em;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #9DCE59; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: auto; /* Gives that scrolling effect as the typing happens */
	animation:
    typing 5s steps(100, end),
    blink-caret .75s step-end infinite;
	width:370px;
	animation-iteration-count:infinite;
}
@keyframes typing {
  from { width: 0 }
  50% { width: 370px; }
  100% { width: 370px; }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #9DCE59; }
}
.left p{
font:600 20px/22px 'Gilroy', Arial, Helvetica, sans-serif;
}
.left p span{
 color:#9DCE59;
}
.link_mail{
 display:flex;
     justify-content: center;
    align-items: center;
	margin-top: 60px;
	transition:all 0.2s linear;
	color:#fff;
}
.link_mail:hover{
 color:#9DCE59;
}
.link_mail path{
transition:all 0.2s linear;
}
.link_mail:hover path {
fill:#9DCE59;
}
.link_mail span{
 margin-left:4px;
}

.mb-60 {
	margin-bottom: 60px;
	margin-top: 10px;
}
/*--------------------------footer--------------------*/
.footer {
	margin: 0 10px;
}

/*-------------------------------form---------------------------*/
input[type="text"], input[type="email"],  textarea {
border:none;
	border-left:1px solid #DCDEE3;
	background:url(../images/input_bg.svg) no-repeat 26px 10px;
	width:100%;
	height:62px;
	position:relative;
	font:500 28px/35px 'Graphik', Arial, Helvetica, sans-serif;
	color:#6D6E6D;
	padding:0px 20px 27px 56px;
	display:block;
	margin:0 0px 0px;
	text-align:left;
	transition:all 0.3s linear;
	box-sizing:border-box;
	border-radius: 0px;
	
}
input[type="text"]:hover, input[type="text"]:focus, input[type="date"]:hover, input[type="date"]:focus, input[type="email"]:hover, input[type="email"]:focus, input[type="password"]:hover, input[type="password"]:focus, textarea:hover, textarea:focus {
}
.div_input textarea {
	resize:none;
	width:calc(100% - 220px);
}
input[type="submit"], button[type="submit"] {
	border: none;
	display:block;
	text-align:center;
	font: 500 16px/55px 'Graphik', Arial, Helvetica, sans-serif;
	width:206px;
	height:55px;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	background:#8CA8D0 url(../images/submit_bg.svg) no-repeat right 22px center;
	margin: 0px auto;
	transition:all 0.3s linear;
	border-radius: 10px;
	padding:0 0 0 30px;
	text-align:left;
}
input[type="submit"]:hover, button[type="submit"]:hover {
	background-color:#7796C1;

}


::-webkit-input-placeholder {
color:#6D6E6D;
opacity:1;
transition:opacity 0.3s ease;
}
::-moz-placeholder {
color:#6D6E6D;
opacity:1;
transition:opacity 0.3s ease;
}
:-moz-placeholder {
color:#6D6E6D;
opacity:1;
transition:opacity 0.3s ease;
}
:-ms-input-placeholder {
color:#6D6E6D;
opacity:1;
transition:opacity 0.3s ease;
}

:focus::-webkit-input-placeholder {
opacity:0;
transition:opacity 0.3s ease;
}
:focus::-moz-placeholder {
opacity:0;
transition:opacity 0.3s ease;
}
:focus:-moz-placeholder {
opacity:0;
transition:opacity 0.3s ease;
}
:focus:-ms-input-placeholder {
opacity:0;
transition:opacity 0.3s ease;
}
.nav_show, .mobil_show, .span_mobil, .li_show, .logo_mobil {
	display:none;
}
/*---------------------media------------------*/
@media (max-width:1023px) {
 .left {
  width:100%;
}
.right{
 display:none;
}
}
@media (max-width:767px) {
.logo{
 width:300px;
margin: 0 auto;
}
h1{
 margin:auto;
	font:bold 36px/50px 'Gilroy', Arial, Helvetica, sans-serif;
}
@keyframes typing {
	from { width: 0 }
	50% { width: 310px; }
	100% { width: 310px; }
}
.link_mail{
 margin:40px 0;
}
 .left {
  margin:40px 0;
}

}

.my-50 {
	margin: 50px 0;
}