@font-face {
font-family: "Roboto";
src: url("font/Roboto-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Roboto";
src: url("font/Roboto-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Roboto";
src: url("font/Roboto-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Roboto";
src: url("font/Roboto-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

* {box-sizing: border-box;}
html,body {margin: 0; padding: 0;}
body {font-family: "Roboto", sans-serif; font-weight: 300; background: #fff; font-size: 16px; line-height: 1.4;}
ul,li {padding: 0; margin: 0; list-style-type: none;}
h1 {text-align: center; padding: 0; font-size: 30px; font-weight: 500; color: #3c3c3c; margin: 7px 0; line-height: 1.2;}
h2 {text-align: center; padding: 0; font-size: 24px; font-weight: 500; color: #3c3c3c; margin: 15px auto; line-height: 1.3;}
h3 {text-align: center; padding: 0; font-size: 24px; font-weight: 700; color: #023097; margin: 15px auto; line-height: 1.3;}

a {color: #000; text-decoration: underline; transition: all .12s ease-in;}
a:hover {color: #212121;}


.wrap {
min-height: 100vh;
display: flex;
flex-direction: column;
}

header {
flex-shrink: 0;
}

.head {
background-color: #F2F6FF;
}

.head-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
position: relative;
padding: 1.75rem 1.25rem;
transition: padding .4s;
}

.logo img {width: 420px;}

.phone {flex: 0 1 auto; display: flex; align-items: center; gap: 15px;}

.phone-item {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
padding: 8px 16px;
border-radius: 10px;
font-size: 1.1em;
background-color: #023097;
}

.phone-link {margin-right: 0.75em; white-space: nowrap;}

.phone-link i, .head-menu i {margin-right: 5px;}
.phone i {font-size: 1.2em; vertical-align: middle; position: relative; top: -.125em;}
.phone a {text-decoration: none; color: #fff;}

.head-menu ul {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background-color: #023097; padding: 3px 0;}
.head-menu li {font-size: 18px;}
.head-menu li a {color: #fff; display: block; padding: 7px 14px; text-decoration: none;}
.head-menu li a:hover {color: #dbe7ff;}

.hero {
position: relative;
width: 100%;
flex: 1;
background-image: url("/img/hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
}

.hero__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
}

.hero__content {
position: relative;
max-width: 700px;
padding: 40px;
color: #fff;
margin-left: 5%;
}

.hero__content h2 {
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
line-height: 1.15;
color: #fff;
margin-bottom: 20px;
text-align: left;
}

.hero__content p {
font-size: clamp(16px, 2vw, 20px);
line-height: 1.5;
margin-bottom: 30px;
max-width: 600px;
}

.hero__button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background-color: #023097;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 500;
border-radius: 6px;
transition: all .12s ease-in;;
}

.hero__button:hover {
filter: brightness(95%);
color: #fff;
}



.directions {
background-color: #f6f5ef;
padding: 60px 20px;
}

.directions__container {
max-width: 1200px;
margin: 0 auto;
}

.directions__title {
text-align: center;
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: #3a3328;
margin-bottom: 50px;
}

.directions__grid {
display: grid;
justify-items: center;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.direction-card {
background: #fff;
border-radius: 14px;
padding: 32px 28px;
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
transition: box-shadow 0.3s ease;
}

.direction-card:hover {
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.direction-card__icon {
width: 148px;
height: 148px;
font-size: 80px;
border-radius: 10px;
background-color: #eef3ff;
color: #023097;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.direction-card h3 {
font-size: 22px;
font-weight: 600;
color: #2f2a21;
margin-bottom: 12px;
}

.direction-card p {
font-size: 16px;
line-height: 1.5;
color: #6f6b63;
}


.why {
background-color: #f6f5ef;
padding: 60px 20px;
}

.why__container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 50px;
align-items: center;
}

.why__content h2 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: #3a3328;
text-align: left;
margin-bottom: 30px;
}


.why__list {
list-style: none;
padding: 0;
}

.why__list li {
position: relative;
padding-left: 36px;
font-size: 18px;
line-height: 1.5;
color: #5f5b52;
margin-bottom: 18px;
}

.why__list li::before {
content: "-";
position: absolute;
left: 0;
top: 0;
color: #023097;
font-size: 20px;
font-weight: 700;
}

.why__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}






.projects {
background-color: #f6f5ef;
padding: 60px 20px;
}

.projects__container {
max-width: 1200px;
margin: 0 auto;
}

.projects__title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: #3a3328;
margin-bottom: 40px;
}

.projects__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.project-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
padding-bottom: 24px;
position: relative;
display: flex;
flex-direction: column;
}

.project-card__image img {
width: 100%;
height: 200px;
object-fit: cover;
}

.project-card__status {
position: absolute;
top: 14px;
left: 14px;
padding: 6px 14px;
font-size: 13px;
border-radius: 20px;
font-weight: 500;
}

.project-card__status--active {
background-color: #023097;
color: #fff;
}

.project-card__status--progress {
background-color: #dbe7ff;
color: #3a3328;
}

.project-card h3 {
font-size: 20px;
font-weight: 600;
color: #2f2a21;
margin: 20px 20px 10px;
}

.project-card p {
font-size: 15px;
line-height: 1.5;
color: #6f6b63;
margin: 0 20px 20px;
flex-grow: 1;
}

.project-card__button {
margin: 0 20px;
padding: 12px;
text-align: center;
border-radius: 8px;
background-color: #f2f6ff;
color: #2f2a21;
font-size: 15px;
text-decoration: none;
transition: background-color 0.3s ease;
}

.project-card__button:hover {
background-color: #dbe7ff;
}





.steps {
list-style: none;
padding: 0;
}

.steps li {
display: flex;
gap: 16px;
margin-bottom: 18px;
}

.steps span {
width: 32px;
height: 32px;
background-color: #023097;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}

.steps p {
font-size: 14px;
color: #6f6b63;
margin-top: 4px;
}


footer {background: #01256b;}

.footer-main {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
gap: 2.4rem;
padding: 2.4rem 0.7rem;
color: #eee;
font-size: 15px;
}

.logo-bottom img {max-width: 260px; display: block; filter: sepia(1); opacity: 0.9;}

.geo {font-size: 1.1em;}
.geo a {color: #ffffff; text-decoration: none;}
.geo a:hover {color: #cfe0ff;}

.copyright {
color: #eee;
background-color: #023097;
text-align: center;
padding: 0.75rem;
font-size: 14px;
}

.copyright a {color: #ffffff;}

.count span {display: block;}
.count a {color: #eee;}





.contacts {
background-color: #f7f9ff;
padding: 60px 20px;
}

.contacts__container {
max-width: 1200px;
margin: 0 auto;
background-color: #eef3ff;
padding: 32px;
border: 1px solid #dbe7ff;
border-radius: 14px;
}

.contacts__title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: #3a3328;
text-align: center;
margin-bottom: 40px;
}

.contacts__list {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 600px;
margin: 0 auto 40px;
}

.contact-item {
display: flex;
gap: 16px;
background-color: #fff;
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
align-items: center;
}

.contact-item__icon {
width: 48px;
height: 48px;
background-color: #dbe7ff;
color: #023097;
border-radius: 10px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}

.contact-item strong {
font-size: 16px;
color: #2f2a21;
}

.contact-item p {
font-size: 16px;
font-weight: bold;
color: #6f6b63;
margin-top: 4px;
}

.contacts__map {
width: 100%;
height: 400px;
font-size: 18px;
font-weight: bold;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
























@media (max-width: 1024px) {
.projects__grid {grid-template-columns: repeat(2, 1fr);}


}



@media (max-width: 768px) {

.wrap {height: 420px !important; min-height: 420px !important;}

.contact-item {padding: 4px;}

.head-container {
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}

.logo {flex: 0 1 100%; text-align: center;}
.logo img {width: 100%; max-width: 370px;}

.head-menu li a {padding: 4px 12px;}

.hero__content {
margin: 0;
padding: 24px;
}

.footer-main {
flex-wrap: wrap;
justify-content: center;
}

.directions {
padding: 60px 16px;
}

.directions__grid {
grid-template-columns: 1fr;
}

.direction-card {max-width: 380px;}

.direction-card p {
text-align: center;
}

.why__container {
grid-template-columns: 1fr;
}

.why__image {
order: -1;
}

.logo-bottom {flex: 0 1 100%; text-align: center;}
.logo-bottom img {margin: 0 auto 20px;}

.count {flex: 0 1 100%; text-align: center;}

}

@media (max-width: 600px) {
.why {
padding: 60px 16px;
}

.why__list li {
font-size: 16px;
}
.projects {
padding: 60px 16px;
}

.projects__grid {
grid-template-columns: 1fr;
}

}