/* Настройки размера шрифта для заголовков */
h1 { font-size: clamp(24px, 2.5vw, 50px); }
h2 { font-size: clamp(20px, 2.3vw, 46px); }
h3 { font-size: clamp(18px, 1.8vw, 34px); }
h4 { font-size: clamp(17px, 1.2vw, 24px); }
h5 { font-size: clamp(16px, 1vw, 20px); }

body {
	background:#d4d1d0;
	background-image:url("../image/Imagebody.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: cover;
	background-attachment: fixed;

}
header .row {
	display:flex;
	align-items: center;
	padding:10px 0;
	flex-wrap: wrap;
}

header h3 {
	font-size: clamp(16px, 1.4vw, 20px);
	margin:0;
}
header h1 {
	font-size: clamp(17px, 1.7vw, 24px);
	margin:0;
}
#content, footer {
	
}
@media (max-width: 767px) {
	header .row {
		display:flex;
		align-items: center;
		justify-content: center;
		align-content: space-around;
		flex-wrap: wrap;
		}
		header h1 {
		text-align: center;
		margin:10px;
		}
		header h3 {
		text-align: center;
		margin:10px;
		}
}
.raschet_header button {
	font-size: clamp(12px, 1vw, 16px);
	padding: 8.5px 12px;
	font-size: 12px;
	background:#ef3735;
	border-radius:6px;
	color:#fff;
	white-space: nowrap;
}
.phone-header {
	white-space: nowrap;
	margin-top:5px;
}
.flex-header3 {
	text-align:right;
}
#content {
	background:#ffffffc4;
	border-radius:8px;
	box-shadow:2px 2px 10px #444;
}
footer {
	background:#0000009c;
}
/* Основные стили */
.hp-section {
    padding: 20px;
}

.hp-lead {
    margin-bottom: 20px;
}

.hp-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hp-grid > div {
    flex: 1;
    margin-right: 20px;
}

.hp-grid > div:last-child {
    margin-right: 0;
}

.hp-list {
    list-style-type: disc;
    padding-left: 20px;
}

.hp-note {
    font-style: italic;
    color: #6c757d;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .hp-grid {
        flex-direction: column;
    }

    .hp-grid > div {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* Цвета логотипа */
.hp-section {
    color: #2a2725; /* Основной цвет */
}

.hp-lead {
    color: #2a2725; /* Темный оттенок основного цвета */
}

.hp-note {
    color: #2a2725; /* Светлый оттенок основного цвета */
}

#form-creator-38 {
	display:block;
	max-width:500px;
	margin:20px auto;
	background:#c9c4c185;
	padding:20px;
	border-radius:8px;
	box-shadow:2px 2px 5px #ccc;
}