.blog-footer {
background: #242424;
padding: 40px 80px 52px;
font-family: Montserrat, sans-serif;
}
.blog-footer * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.blog-footer__inner {
max-width: 1200px;
margin: 0 auto;
} .blog-footer__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.blog-footer__left {
display: flex;
flex-direction: column;
} .blog-footer__logo {
display: inline-block;
}
.blog-footer__logo-img {
width: 304px;
height: auto;
} .blog-footer__menus {
display: flex;
gap: 60px;
margin-top: 44px;
}
.blog-footer__menu-title {
display: block;
opacity: 0.5;
letter-spacing: 0.12px;
color: #ffffff;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 16px;
}
.blog-footer__menu-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.blog-footer__menu-list li a {
letter-spacing: 0.16px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: opacity 0.2s;
}
.blog-footer__menu-list li a:hover {
opacity: 0.7;
} .blog-footer__contacts {
display: flex;
flex-direction: column;
gap: 24px;
background: rgba(255, 255, 255, 0.03);
border-radius: 7px;
padding: 32px;
min-width: 325px;
}
.blog-footer__contact {
display: flex;
align-items: flex-start;
gap: 16px;
}
.blog-footer__contact-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.blog-footer__contact-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.blog-footer__contact-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.blog-footer__contact-value {
letter-spacing: 0.18px;
color: #ffffff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
font-family: Montserrat, sans-serif;
}
a.blog-footer__contact-value:hover {
opacity: 0.7;
}
.blog-footer__contact-label {
line-height: 18px;
color: #828282;
font-size: 12px;
font-weight: 500;
} .blog-footer__bottom {
display: flex;
align-items: center;
margin-top: 12px;
}
.blog-footer__socials {
display: flex;
gap: 8px;
}
.blog-footer__social {
display: block;
flex-shrink: 0;
}
.blog-footer__social img {
width: 50px;
height: 50px;
border-radius: 4px;
display: block;
}
.blog-footer__copy {
opacity: 0.5;
line-height: 15px;
color: #ffffff;
font-size: 12px;
margin-left: auto;
}
.blog-footer__privacy {
opacity: 0.5;
line-height: 15px;
color: #ffffff;
font-size: 12px;
text-decoration: underline;
margin-left: 62px;
transition: opacity 0.2s;
}
.blog-footer__privacy:hover {
opacity: 0.8;
}
.blog-footer__callback {
display: flex;
align-items: center;
justify-content: center;
margin: unset !important;
margin-left: auto !important;
border: 1px solid #ffbd45;
border-radius: 4px;
padding: 17px 18px;
min-width: 325px;
height: 50px;
background: none;
cursor: pointer;
line-height: 13px;
letter-spacing: 0.56px;
color: #ffbd45;
font-family: "Exo 2", sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
transition:
background 0.2s,
color 0.2s;
}
.blog-footer__callback:hover {
background: #ffbd45;
color: #242424;
} @media (max-width: 768px) {
.blog-footer {
padding: 32px 16px;
}
.blog-footer__top {
flex-direction: column;
}
.blog-footer__logo-img {
width: 237px;
} .blog-footer__menus {
flex-wrap: wrap;
gap: 32px;
margin-top: 32px;
} .blog-footer__menu--products {
flex-basis: 100%;
width: 100%;
}
.blog-footer__menu:not(.blog-footer__menu--products) {
flex: 1;
min-width: 0;
}
.blog-footer__contacts {
margin-top: 32px;
padding: 24px;
min-width: unset;
width: 100%;
} .blog-footer__bottom {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
gap: 8px 16px;
align-items: center;
margin-top: 8px;
}
.blog-footer__callback {
grid-column: 1 / -1;
order: -1;
width: 100%;
margin-left: 0 !important;
min-width: 0;
}
.blog-footer__socials {
grid-row: 2 / 4;
grid-column: 1;
gap: 4px;
}
.blog-footer__social img {
width: 40px;
height: 40px;
}
.blog-footer__copy {
grid-row: 2;
grid-column: 2;
text-align: right;
margin-left: 0;
font-size: 10px;
}
.blog-footer__privacy {
grid-row: 3;
grid-column: 2;
text-align: right;
margin-left: 0;
font-size: 10px;
}
.blog-footer__menu-list li a {
font-size: 16px;
}
}