/* Подключим шрифт Exo 2 для страниц Работа. Чтобы можно было его применять. */

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 200; /* предположительно Regular */
    src: url('/wp-content/themes/flatsome/assets/fonts/Exo_2/Exo2-Medium.woff2') format('woff');
} 
	
	/**/ 
html body {
    font-family: 'Exo 2', sans-serif;
    font-weight: 200;
	font-size: 20px; 
}

.greetings {
	margin-bottom: 20px;
	font-size: 20px;
}	

/*Ккнопка "КАЛЬКУЛЯТОР ДОХОДА" */
.button.glow {
    box-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
    background-color: #FF2012; /* Красный фон кнопки */
    color: white; /* Цвет текста */
    padding: 10px 20px; /* Внутренние отступы */
    border-radius: 12px; /* Закругление углов */
    width: 500px; /* Ширина */
    height: 50px; /* Высота */
    line-height: 30px; /* Высота строки */
    border: 1px solid black; /* Толщина и цвет границы */
    text-align: center; /* Выравнивание текста по центру */
    display: inline-block; /* Сделать элемент строчно-блочным */
    text-decoration: none; /* Убрать подчеркивание ссылок */
}

.button:hover, .button.active {
    background-color: lightblue;
	color: black;
}

/* Кнопки маркетов */
.button-market-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.button-market-wrapper {
    text-align: center;
    margin: 10px 0; /* Отступы между кнопками */
	width: 500px; /* Фиксированная ширина для предотвращения сдвигов */
}

.button-market {
    background-color: #fff;
    color: black;
    border-radius: 12px;
    width: calc(100% - 1em); /* Ширина 100% от родителя минус отступ */
    height: 50px;
    display: flex; /* Используем flexbox для выравнивания */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
	transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
}

/* Скрываем кнопки которые на десктопе */
.button_mob1,
.button_mob2 {
	display: none;
}


/* Медиазапрос для мобильных устройств */
@media (max-width: 700px) {
	.greetings {
        font-size: 13px; /* Уменьшение размера шрифта */
		margin-bottom: 0px; /* без отступа */
	}	

    .image-container {
        padding: 0;
        width: 100%;
        height: auto;
    }
	
	/* Отступ после последней кнопки до футера уменьшить до 0 */
	.last-image-container {
		margin-bottom: -80px;
	}
	
    .main-image_1 {
		/* В мобильной версии, картинка в шапке должна біть другая, вертикальная.*/  
        content: url('/wp-content/uploads/images/main/mob_1.png');  
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }
	
	.main-image_2 {
		/* В мобильной версии, картинка в шапке должна біть другая, вертикальная.*/  
        content: url('/wp-content/uploads/images/main/mob_2.png');  
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }
	
	.main-image_3 {
		/* В мобильной версии, картинка в шапке должна біть другая, вертикальная.*/  
        content: url('/wp-content/uploads/images/main/mob_3.png');  
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }
	
	.button-market-wrapper {
        width: 100%; /* Уменьшение ширины на мобильных устройствах */
    }
	
	.button.glow {
        font-size: 16px; /* Уменьшение размера шрифта */
    }
	
    .button-market {
		height: 30px; /* Уменьшение высоты */
		margin: 0 auto; /* Центрирование кнопки */
    }
	
	.sub-buttons .login-message {
        font-size: 17px; /* Уменьшение размера шрифта */
    }

    .sub-buttons .sub-button {
		margin: 0 auto; /* Центрирование кнопки */
    }	
	
	/* Скрываем кнопки которые на десктопе */
    div.button-container {
        display: none;
    }
	
	/* Открываем кнопки на мобилке */
	.button_mob1,
	.button_mob2 {
        display: block;
        width: 70%; /* Можно уменьшить, например, 70% или 60% */
        font-size: 12px; /* Уменьшаем размер шрифта */
        margin: 10px auto; /* Центрируем кнопку */
		margin-top: -20px;	/* Подвинем кнопку ближе к картинке */
	}	
	
    .button.glow {
		display: flex;
		align-items: center; /* Центрирует текст по вертикали */
		justify-content: center; /* По горизонтали */
		height: 35px;
	}	
}

.button-market:hover, .button-market.active {
    background-color: #cccccc;
	color: black;
}

/* Стиль для текста над подкнопками */
.login-message {
    font-size: 20px;
    color: white; /* Можно изменить цвет и размер текста по необходимости */
    margin-bottom: 20px; /* Отступ между текстом и подкнопками */
	text-align: center;
    width: calc(100% - 1em); /* Ширина 100% от родителя минус отступ */
}


/* Стили для подкнопок */
.sub-buttons {
    margin-top: 25px;
    display: none; /* Скрываем подкнопки по умолчанию */
	width: 100%; /* Фиксированная ширина */
}

.sub-button {
    display: block;
    background-color: #FF2012;
    color: white;
    border-radius: 12px;
	margin-right: 1em;
    text-decoration: none;
	margin-top: -15px; /* Уменьшаем отступ между подкнопками */
	width: calc(100% - 1em); /* Ширина 100% от родителя минус отступ */
}

.sub-button:hover {
    background-color: #f0f0f0;
}

.button-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: -85px; /* Подвинем кнопку ближе к картинке */
	width: 100%;
}

.button-container .button {
    flex: 1;
    /*min-width: 355px;*/
    text-align: center;
    font-size: 16px;
	/*padding: 0px;  Высота кнопки */
	/*white-space: nowrap; /* Запрещает перенос текста */
}

/* Чуть сдвигаем правую кнопку вправо */
.button-container .button:last-child {
    margin-right: -3px;
}

@media (max-width: 550px) { 
    .button.glow {
		font-size: 14px; /* Уменьшает размер текста */
	}
}

@media (max-width: 475px) { 
    .button.glow {
		font-size: 13px; /* Уменьшает размер текста */
	}
}

@media (max-width: 450px) { 
    .button.glow {
		font-size: 12px; /* Уменьшает размер текста */
	}
}

@media (max-width: 425px) { 
    .button.glow {
		/* font-size: 11px; /* Уменьшает размер текста */
	}
}

@media (max-width: 400px) { 
    .button.glow {
		/* font-size: 10px; /* Уменьшает размер текста */
	}
}

@media (max-width: 380px) { 
    .button.glow {
		/* font-size: 9px; /* Уменьшает размер текста */
	}
}

@media (max-width: 355px) { 
    .button.glow {
		/* font-size: 8px; /* Уменьшает размер текста */
	}
}

@media (max-width: 335px) { 
    .button.glow {
		/* font-size: 7px; /* Уменьшает размер текста */
	}
}
}

@media (max-width: 320px) { 
}

img {
    pointer-events: none; /* Предотвращает клики по картинке. Шоб не качали */
}