@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
body{
	font-family: "Mulish", sans-serif;
	color:#4a6272;
}
#header{
	position:relative;
	z-index: 1;
	background: #fff;
}
nav#w0{
	border-bottom: solid 1px #e5e5ec;
}
.navbar-brand img {
	width: 200px;
}
.btn_1:active, .btn_1:focus{
    color: #fff;
}
.btn_1,a.btn_1{
	border-radius: 20px;
    background: #0f85e7;
	border:solid 1px rgb(229, 229, 236);
	display: inline-block;
    width: 120px;
    text-align: center;
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
	color: #fff !important;
}
a.btn_1{
	padding:5px !important;
}
.btn_1:hover{
    background: #108de8;
    color: #fff;
	box-shadow: 0 0 22px #4f8ef7b3, 0 4px 20px #4f8ef773;
}
#w3 li:nth-child(1){
	align-items: center;
    display: flex;
}
#w1 a.nav-link, #w2 a.spline {
	color:#000;
}
.top_sect{
	background-color:#f8f8fa;
	position:relative;
	overflow: hidden;
}
.top_sect .r1{
	background: radial-gradient(circle, rgb(102, 51, 255), transparent); 
	transform: translate(30%, -30%);
	position:absolute;
	width:380px;
	height:380px;
	border-radius: 50%;
    opacity:.1;
	right: 0;
}
h1 {
    font-size: 2.2rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1e3c4c 0%, #2b5c6f 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.01em;
}
.top_sect h1{
	font-size: 3.5rem;
    font-weight: 800;
    text-align: center;
    margin-top: 150px;
	position: relative;
    z-index: 1;
}
.top_sect h1 span{
	background: #0f85e7;
	color:#fff;
	border-radius: 20px;
    padding: 8px;
}
.top_sect p{
	position: relative;
    z-index: 1;
}
.form-wrap,.result-wrap{
	width: 700px;
	padding: 25px 10px 15px;
    border: solid 1px #0f85e7;
    border-radius: 20px;
	margin-top: 50px;
	position: relative;
    z-index: 1;
	margin-bottom: 120px;
	transition-duration:0.2s;
	transition-property:all;
}
.form-wrap:has(+ .result-wrap) {
    margin-bottom: 0;
}
.form-wrap:hover{
	background: rgba(15, 133, 231, 0.1);
}
.form_item{
	width: 100%;
	padding: 10px;
    border: solid 1px #0f85e7;
    border-radius: 20px;
}
.form-wrap button{
	box-shadow: 0 0 20px #4f8ef773, 0 4px 20px #4f8ef74d;
	width:100%;
	padding: 10px;
}
.form-wrap button svg{
	width: 18px;
    margin-right: 10px;
}
.l1{
	position: absolute;
    width: 100%;
    top: -180px;
    opacity: .15;
    z-index: 0;
}
.form-wrap form >div{
	position:relative;
}
.top_sect p.text_fild,.top_sect .form-label{
	position: absolute;
	top: -20px;
    font-size: 12px;
    color: #8c8c8c;
    left: 20px;
}
.result-link{
	align-items: center;
    display: flex;
	font-size: 2em;
}
.dv_settings{
	margin-top: 30px;
}
table.table td:nth-child(2){
	word-break: break-all;
}
.animated-svg {
    animation: moveAround 35s infinite ease-in-out;
}

@keyframes moveAround {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(100px, 50px) scale(2);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}
@media (max-width: 767.8px) {
	a.btn_1{
		margin-top: 15px;
		margin-bottom: 15px;
		width: 100%;
	}
	.top_sect h1 span{
		display:block;		
		width:90%;
		margin:0 auto;
	}
	.top_sect h1 {
		margin-top: 50px;
	}
	.form-wrap, .result-wrap {
		width: auto;
	}
	.form-wrap button.btn_1{
		margin-top: 20px;
	}
}
@media (min-width: 768px) {
    #w1 a.nav-link, #w2 a.spline {
		position: relative;
		padding: 0;
		margin-right: 25px;
	}
	#w1 a.nav-link span, #w2 a.spline span {
		display: inline-block;
		height: 2px;
		width: 0; 
		position: absolute;
		left: 0;
		bottom: -5px;
		background: #0f85e7; 
		
		/* Анимация */
		transition: width 0.3s ease-out; 
	}

	#w1 a.nav-link:hover span, #w2 a.spline:hover span {
		width: 100%; 
	}
	#w2 a.spline {
		padding-top: 8px;
	}
}
@media (min-width: 992px) {
	.ml-2vw{
		margin-left: 20vw;
	}
}