:root {
    --gap: 15px;
    --container-mobile-max: 400px;
    --bg-color: #f5f5f7;
    --card-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: #333;
	font-family: "Gilroy", sans-serif;
}


/* ==========================================================================
   Halvar Breit - Medium (500)
   ========================================================================== */
@font-face {
    font-family: 'Halvar Breit';
    src: url('/fonts/HalvarBreit-Md.eot');
    src: local('Halvar Breitschrift Medium'), local('HalvarBreit-Md'),
        url('/fonts/HalvarBreit-Md.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HalvarBreit-Md.woff2') format('woff2'),
        url('/fonts/HalvarBreit-Md.woff') format('woff'),
        url('/fonts/HalvarBreit-Md.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Halvar Breit - Bold (700)
   ========================================================================== */
@font-face {
    font-family: 'Halvar Breit';
    src: url('/fonts/HalvarBreit-Bd.eot');
    src: local('Halvar Breitschrift Bold'), local('HalvarBreit-Bd'),
        url('/fonts/HalvarBreit-Bd.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HalvarBreit-Bd.woff2') format('woff2'),
        url('/fonts/HalvarBreit-Bd.woff') format('woff'),
        url('/fonts/HalvarBreit-Bd.ttf') format('truetype');
    font-weight: 700; /* Используем числовое значение вместо 'bold' */
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Halvar Breit - ExtraBold (800)
   ========================================================================== */
@font-face {
    font-family: 'Halvar Breit';
    src: url('/fonts/HalvarBreit-XBd.eot');
    src: local('Halvar Breitschrift ExtraBold'), local('HalvarBreit-XBd'),
        url('/fonts/HalvarBreit-XBd.eot?#iefix') format('embedded-opentype'),
        url('/fonts/HalvarBreit-XBd.woff2') format('woff2'),
        url('/fonts/HalvarBreit-XBd.woff') format('woff'),
        url('/fonts/HalvarBreit-XBd.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   Gilroy - Regular (400)
   ========================================================================== */
@font-face {
    font-family: 'Gilroy';
    src: url('/fonts/Gilroy-Regular.eot');
    src: local('Gilroy Regular'), local('Gilroy-Regular'),
        url('/fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Gilroy-Regular.woff') format('woff'),
        url('/fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400; /* Стандартный обычный вес */
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Gilroy - Medium (500)
   ========================================================================== */
@font-face {
    font-family: 'Gilroy';
    src: url('/fonts/Gilroy-Medium.eot');
    src: local('Gilroy Medium'), local('Gilroy-Medium'),
        url('/fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Gilroy-Medium.woff') format('woff'),
        url('/fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500; /* Средний вес */
    font-style: normal;
    font-display: swap;
}

.wrapper {
    max-width: var(--container-mobile-max);
    margin: 0 auto;
    padding: var(--gap);
    width: 100%;
}


.grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}

/* Chrome, Firefox, Opera, Safari, Edge */
::placeholder {
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    color: #b8b8b8;
    opacity: 1; /* Убирает дефолтную полупрозрачность в Firefox */
}

/* Элементы ввода (Firefox) */
::-moz-placeholder {
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    color: #b8b8b8;
    opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    color: #b8b8b8;
}

/* Edge (старые версии на движке EdgeHTML) */
::-ms-input-placeholder {
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    color: #b8b8b8;
}

header, footer {
    padding: 10px 0;
}

main {
    display: grid;
    gap: var(--gap);
}
.row_head svg{
	min-width:91px;
}
.row_head{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
	margin-bottom:58px;
}
.text_webinar{
	font-family: "Halvar Breit", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 100%;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
	color: #1e2443;
	border-radius: 5px;
	padding: 10px;
	background: #bdd8ea;
    max-width: 205px;
}
header{
	background-image:url(../img/bg.webp);
	    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	    padding-bottom: 220px;
		position: relative;
		margin-bottom:20px;
}
h1{
	font-family: "Halvar Breit", sans-serif;
	font-weight: 800;
	font-size: 25px;
	line-height: 110%;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	margin-bottom:20px;
}
.flag{
	display: block;
    content: '';
    width: 62px;
    height: 38px;
	 background-image: url(../img/fl.png);
    background-size: cover;
    background-repeat: no-repeat;
	    position: absolute;
    top: 90px;
    right: 30px;
}
.speakers{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.speakers .speakers_a{
    content: '';
    width: 165px;
    height: 252px;
    display: block;
    background-image: url(../img/sa.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.speakers .speakers_b{
    content: '';
    width: 162px;
    height: 252px;
    display: block;
    background-image: url(../img/sb.webp);
    background-size: contain;
    background-repeat: no-repeat;
}


.green_head{
	font-family: "Gilroy", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 90%;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	padding: 10px;
	background: #1eb53a;
	margin-bottom:15px;
}
.green_head b{
	font-weight: 700;
}
.validate{
	border-radius: 10px;
    background: #bdd8ea;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
}
.validate .title_form{
	font-family: "Halvar Breit", sans-serif;
font-weight: 500;
font-size: 25px;
line-height: 100%;
letter-spacing: -0.04em;
text-transform: uppercase;
text-align: center;
color: #1e2443;
}
.validate .sub_title{
	font-family: "Gilroy", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 100%;
text-align: center;
color: #1e2443;
}
.validate input.error{
	border-bottom: 1px solid red;
}
.validate input{
	width: 100%;
    border-bottom: 1px solid #000;
	margin-bottom:10px;
	padding:7px;
	padding-left:5px;
}
.validate button{
	border-radius: 5px;
padding: 10px;
background: #1e2443;
font-family: "Halvar Breit", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 116%;
text-transform: uppercase;
color: #fff;
margin-top:10px;
}



.main_block{}
.main_block .title{
	font-family: "Halvar Breit", sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 100%;
	color: #1e2443;
	margin-bottom:10px
}
.main_block .from_price{
	font-family: "Halvar Breit", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 100%;
	color: #1e2443;
	border-radius: 5px;
    padding: 10px 40px;
    background: #bdd8ea;
    display: inline-block;
	margin-bottom:20px;
}
.main_block .line_grid{
	margin-bottom:40px;
}
.main_block .line_grid .line_row{
	border-radius: 10px;
	padding: 10px;
	margin-bottom:10px;
	text-align: center;
}
.main_block .line_grid .line_row:nth-child(odd){
	background: #1e2443;
}
.main_block .line_grid .line_row:nth-child(even){
	background: #bdd8ea;
}
.main_block .line_grid .line_row strong{
	font-family: "Halvar Breit", sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 100%;
	letter-spacing: -0.02em;
	text-align: center;
	color: #fff;
	margin-bottom:5px;
}
.main_block .line_grid .line_row .line_txt{
	font-family: "Gilroy", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: -0.02em;
	color: #e5e5e5;
}
.bonus:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 125px;
    height: 135px;
    background-image: url(../img/gift.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.bonus{
	background-image:url(../img/bbg.webp);
	    padding: 40px 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	position:relative;
}
.bonus .bonus_title{
	font-family: "Halvar Breit", sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 100%;
	color: #fff;
	    max-width: 50%;
		margin-bottom:10px;
}
.bonus .bonus_txt{
	font-family: "Gilroy", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	color: #1e2443;
	border-radius: 10px;
	padding: 10px;
	background: #fff;
	    max-width: 90%;
}

.iti__flag-container{
	display:none!important;
}
.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel]{
	padding-left: 5px!important;
}








@media (min-width: 1024px) {
    .wrapper {
        max-width: 1200px; /* Снимаем ограничение в 400px и ставим ширину для ПК */
        padding: 20px;
    }

    .grid-layout {
        grid-template-columns: 1fr; /* Основная обертка */
    }

    main {
        grid-template-columns: 2fr 1fr; /* На ПК: контент слева (2 части), сайдбар справа (1 часть) */
        align-items: start;
    }

    
}