html {
	scroll-behavior: smooth;
}

body.body-hidden {
	overflow: hidden;
}

section{scroll-margin-top: 80px;}


@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesque-Medium.woff2') format('woff2'),
        url('../fonts/GalanoGrotesque-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesque-Regular.woff2') format('woff2'),
        url('../fonts/GalanoGrotesque-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesque-SemiBold.woff2') format('woff2'),
        url('../fonts/GalanoGrotesque-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Macklin Text';
    src: url('../fonts/MacklinText-Medium.woff2') format('woff2'),
        url('../fonts/MacklinText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}






body{ font-family: 'Galano Grotesque';}
.mac{ font-family: 'Macklin Text';}

.container {padding: 0 20px; margin: 0 auto;}

.menu_trigger span{background-color: #39286a; height: 2px; width: 100%; transition: all ease 0.3s;}





.slip .menu_trigger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.slip .menu_trigger span:nth-child(2) {
  opacity: 0;
}

.slip .menu_trigger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}





.menus{display: block; background-color: #39286ad4; position: fixed; left: 0; top:80px; right:0; bottom: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateX(-100%); transition: all ease 0.3s;}

.slip .menus{transform: none;}

.menus ul{display: flex; width:100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap:30px;}
.menus ul li a{color: #ffffff; font-size: 22px;}



.form_control{position: relative;}
.form_control .anime{position: absolute; font-size: 14px; left:0; top:14px; cursor: text; transition: all ease 0.3s;}
.form_control.active .anime{top: -2px;  font-size: 12px;   text-transform: uppercase;  line-height: 1; color: #000000;}
.form_control input[type="text"],
.form_control input[type="tel"],
.form_control input[type="email"]
{height: 50px; width:100%; outline: none; border-bottom: 1px solid #39286a;}
.form_control > label:not(.anime){font-size: 16px; line-height: 1.3; display: block; cursor: pointer;}
.form_control .check_group{display: flex; gap:30px; margin-top:10px;}
.form_control .check_group label{display: flex; gap:10px; align-items: center; font-size: 16px; line-height: 1.1;}
.process ul{display: flex; flex-direction: column; gap:15px;}
.process ul li{background: url(../images/svg/yellow_check.svg) left 4px no-repeat; background-size: 20px; padding-left: 35px; font-size:16px; line-height: 1.5;}

.form_control button[type="submit"]{width:100%; background-color: #333333; text-transform: uppercase; color: #ffffff; border-radius: 50px; font-weight: 700; height: 50px; font-size: 18px; cursor: pointer; transition: all ease 0.3s; }

.form_control button[type="submit"]:hover{background-color: #000000;}