html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
html,
body {
height: 100%;
margin: 0;
background-color: #F8F8F8;
}
.wrapper {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.container {
margin: auto;
}
.section-image {
width: 100%;
}
.section-title {
font-weight: 500;
margin: 50px 0 30px;
font-size: 35px;
color: #000000de;
font-family: Roboto;
}
.header {
width: 100%;
overflow-x: hidden;
height: 80px;
transition: 0.3s;
position: sticky; top: 0px;
background-color: #F8F8F8;
z-index: 5;
} .header-sticky {
transform: translateY(249px);
}
.header.opened {
height: 250px;
background-color: #366CCD;
padding: 0;
}
.header-container {
padding: 10px 0 0 0;
flex-wrap: nowrap;
}
.logo {
text-decoration: none;
padding: 0;
}
.logo img {
width: 263px;
height: 49px;
}
.logo+.logo {
margin-top: 10px;
}
.nav {
display: inline-block;
padding: 0;
}
.nav__list {
list-style: none;
height: 100%;
margin: 0;
padding: 0;
column-gap: 20px;
}
.nav__list.opened {
margin-top: 20px;
flex-direction: column;
padding: 0;
width: 100vw;
}
.nav__item {
padding: 0;
}
.nav__link {
color: #676363;
font-family: Manrope;
font-size: 18px;
font-weight: 700;
text-decoration: none;
}
.nav__link.active {
color: #366CCD;
}
.nav__link.white {
color: rgba(255, 255, 255, 0.839);
font-size: 20px;
}
.nav__link.white:hover {
color: white;
}
.nav__link.white.active {
color: white;
}
.burger {
position: absolute;
right: 0;
width: 70px;
height: 70px;
background-color: #366CCD;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: background-color 0.2s ease;
}
.burger:hover {
background-color: #1f4fa8;
}
.burger span {
background-color: #fff;
width: 29px;
height: 3px;
border-radius: 5px;
}
.burger span.cross:nth-child(1) {
transform: translate(2px, 4px) rotate(-45deg);
}
.burger span.cross:nth-child(2) {
transform: translate(2px, -2px) rotate(45deg);
}
.burger span.cross:nth-child(3) {
display: none;
}
.handset {
display: flex;
align-items: center;
justify-content: center;
max-width: 230px;
flex-wrap: wrap;
padding: 0;
max-width: 150px;
}
.handset+.handset {
max-width: 170px;
}
.handset p {
margin-bottom: 0;
color: #676363;
font-family: Manrope;
font-size: 14px;
font-weight: 700;
text-decoration: none;
text-align: center;
line-height: 1;
}
.handset ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.handset ul li {
line-height: 1;
text-align: center;
}
.handset__number {
color: #403F3F;
font-family: Manrope;
font-size: 12px;
font-weight: 700;
line-height: 12px;
margin-left: 0;
text-decoration: none;
}
.main {
flex-grow: 1;
width: 100%;
padding: 10px;
}
.footer {
width: 100%;
background: #366CCD;
padding: 30px 0;
margin-top: 75px;
}
.footer__text {
color: #FFF;
font-family: Manrope;
font-size: 14px;
font-weight: 700;
line-height: 160%;
}
.footer__text a {
color: #fff;
}
.footer__text a:hover {
color: #e4a400;
}
@media (max-width: 1400px) {
.nav__list {
column-gap: 14px;
}
.nav__link {
font-size: 16px;
}
}
@media (max-width: 1200px) {
.header-container {
padding: 0;
height: 70px;
flex-wrap: wrap;
}
.header {
height: 90px;
}
.logo {
margin-left: 20px;
}
.nav {
margin-left: 20px;
}
}