.footer {
background-image: radial-gradient(circle at 50% 50%, #153e76, #112c57 45%);
padding: 70px 0;
}
@media screen and (max-width: 780px) {
.footer {
padding-bottom: 62px;
padding-top: 30px;
}
}
.footer__row {
display: flex;
}
@media screen and (max-width: 1600px) {
.footer__row {
flex-wrap: wrap;
}
}
.footer__logo-wrapper {
margin-bottom: 30px;
margin-bottom: 20px;
}
@media screen and (max-width: 780px) {
.footer__logo-wrapper img {
width: 153px;
}
}
.footer__address {
margin: 0 0 30px 0;
font-weight: 400;
font-size: 16px;
color: #fff;
}
@media screen and (max-width: 780px) {
.footer__address {
font-size: 14px;
margin-bottom: 20px;
}
}
.footer__phone {
font-weight: 800;
font-size: 20px;
line-height: 130%;
color: #fff;
text-decoration: none;
transition: all 0.3s;
margin: 0 0 30px 0;
}
@media screen and (max-width: 780px) {
.footer__phone {
font-size: 14px;
margin-bottom: 20px;
}
}
.footer__phone:hover {
color: #F03444;
}
.footer__phone:active {
opacity: 0.8;
}
.footer__socials {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
@media screen and (max-width: 780px) {
.footer__socials {
margin-bottom: 20px;
}
}
.footer__social {
text-decoration: none;
transition: all 0.3s;
width: 45px;
height: 45px;
border-radius: 6px;
background: #2B579F;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 780px) {
.footer__social {
width: 40px;
height: 40px;
}
}
.footer__social.--wa {
background: #5BDA60;
}
.footer__social.--max {
background: linear-gradient(75deg, #3BBFFD 0%, #8544E4 100%);
}
@media screen and (max-width: 960px) {
.footer__social.--wa img, .footer__social.--max img {
width: 20px;
}
}
@media screen and (max-width: 780px) {
.footer__social.--wa img, .footer__social.--max img {
width: 15px;
}
}
.footer__social.--tg {
background: #5884CE;
}
@media screen and (max-width: 960px) {
.footer__social.--tg img {
width: 20px;
}
}
@media screen and (max-width: 780px) {
.footer__social.--tg img {
width: 15px;
}
}
@media screen and (max-width: 960px) {
.footer__social.--vk img {
width: 20px;
}
}
@media screen and (max-width: 780px) {
.footer__social.--vk img {
width: 18px;
}
}
.footer__rusprofile {
display: inline-block;
margin: 0 0 30px 0;
text-align: center;
font-weight: 800;
font-size: 16px;
color: #fff;
padding: 15px;
text-decoration: none;
border-radius: 6px;
transition: background 0.3s;
}
@media screen and (max-width: 780px) {
.footer__rusprofile {
font-size: 14px;
margin-bottom: 20px;
}
}
.footer__visually-impaired {
position: relative;
font-weight: 700;
font-size: 16px;
color: #7a95c0;
border: 1px solid #7a95c0;
border-radius: 6px;
padding: 15px 15px 15px 61px;
text-decoration: none;
transition: background 0.3s;
}
@media screen and (max-width: 780px) {
.footer__visually-impaired {
font-size: 14px;
}
}
.footer__visually-impaired span {
transition: color 0.3s;
}
.footer__visually-impaired svg {
position: absolute;
left: 19px;
top: 50%;
transform: translateY(-50%);
width: 22px;
fill: #7A95C0;
transition: fill 0.3s;
}
.footer__visually-impaired:hover {
background: #F03444;
color: #ffffff;
border-color: transparent;
}
.footer__visually-impaired:hover svg {
fill: #fff;
}
.footer__visually-impaired:active {
background: #7A95C0;
color: #ffffff;
border-color: transparent;
}
.footer__visually-impaired:active svg {
fill: #fff;
}
.footer__menu-title {
margin: 0 0 40px 0;
font-size: 20px;
color: #ffffff;
font-weight: 800;
line-height: 130%;
}
@media screen and (max-width: 780px) {
.footer__menu-title {
font-size: 16px;
margin-bottom: 15px;
}
}
.footer__menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.footer__menu ul li:not(:last-child) {
margin-bottom: 30px;
}
@media screen and (max-width: 780px) {
.footer__menu ul li:not(:last-child) {
margin-bottom: 6px;
}
}
.footer__menu ul li a {
font-weight: 500;
font-size: 16px;
color: #fff;
text-decoration: none;
transition: all 0.3s;
}
@media screen and (max-width: 780px) {
.footer__menu ul li a {
font-size: 14px;
}
}
.footer__menu ul li a:hover {
color: #7A95C0;
}
.footer__menu ul li a:active {
color: #e0e8f5;
}
.footer__col:nth-child(1) {
flex: 0 0 324px;
margin-right: 58px;
display: flex;
flex-direction: column;
}
.footer__col:nth-child(2) {
flex: 0 0 auto;
margin-right: 58px;
}
.footer__col:nth-child(3) {
flex: 0 0 auto;
margin-right: auto;
}
@media screen and (max-width: 1600px) {
.footer__col:nth-child(1), .footer__col:nth-child(2), .footer__col:nth-child(3) {
flex: 0 0 calc(33.33% - 58px);
}
}
@media screen and (max-width: 1000px) {
.footer__col:nth-child(1) {
flex: 0 0 100%;
margin-bottom: 40px;
}
.footer__col:nth-child(2), .footer__col:nth-child(3) {
flex: 0 0 calc(50% - 58px);
}
}
@media screen and (max-width: 780px) {
.footer__col:nth-child(1) {
margin-bottom: 0;
margin-right: 0;
}
.footer__col:nth-child(2) {
order: 3;
margin-top: 20px;
margin-bottom: 20px;
flex: 0 0 100%;
}
.footer__col:nth-child(3) {
order: 4;
flex: 0 0 100%;
}
}
.footer__col:nth-child(4) {
flex: 1 1 auto;
margin-left: 58px;
max-width: 700px;
}
@media screen and (max-width: 1600px) {
.footer__col:nth-child(4) {
max-width: unset;
margin-left: 0;
margin-top: 40px;
flex: 0 0 100%;
}
}
.footer-bottom {
margin-top: 60px;
}
@media screen and (max-width: 780px) {
.footer-bottom {
margin-top: 40px;
}
}
.footer-bottom .container {
padding-top: 60px;
position: relative;
}
@media screen and (max-width: 780px) {
.footer-bottom .container {
padding-top: 40px;
}
}
.footer-bottom .container::before {
content: "";
display: block;
position: absolute;
width: calc(100% - 60px);
height: 1px;
background: #3A547F;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.footer-bottom__row {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 780px) {
.footer-bottom__row {
flex-direction: column;
}
}
.footer-bottom__copyright {
font-weight: 400;
font-size: 16px;
color: #7a95c0;
margin: 0;
}
@media screen and (max-width: 780px) {
.footer-bottom__copyright {
font-size: 14px;
margin-bottom: 15px;
}
}
.footer-bottom__policy {
font-weight: 400;
font-size: 16px;
text-decoration: underline;
color: #7a95c0;
transition: all 0.3s;
}
@media screen and (max-width: 780px) {
.footer-bottom__policy {
font-size: 12px;
}
}
.footer-bottom__policy:hover {
color: #F03444;
}
.footer-bottom__policy:active {
opacity: 0.8;
}
.footer__map-wrapper {
height: 410px;
border-radius: 10px;
background: #e6e6e6;
position: relative;
overflow: hidden;
}
.footer__map-wrapper #footer-map {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.footer__map-outer {
position: relative;
}
.footer__map-btns {
display: flex;
justify-content: center;
gap: 20px;
z-index: 2;
position: absolute;
top: 23px;
left: 0;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
@media screen and (max-width: 780px) {
.footer__map-btns {
position: relative;
top: auto;
left: auto;
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
flex-wrap: wrap;
}
}
.footer__map-btn {
position: relative;
font-weight: 700;
font-size: 14px;
color: #1c427f;
background: #fff;
border-radius: 6px;
padding: 11px 15px 11px 45px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s;
}
@media screen and (max-width: 780px) {
.footer__map-btn {
color: #a6c0eb;
font-size: 12px;
background: #2B579F;
padding: 12px 10px;
flex: 1 1 calc(33.33% - 10px);
}
.footer__map-btn:hover {
background: #264c8b;
}
.footer__map-btn:active {
background: #204177;
}
}
.footer__map-btn .pc-text {
display: block;
}
@media screen and (max-width: 780px) {
.footer__map-btn .pc-text {
display: none;
}
}
.footer__map-btn .mob-text {
display: none;
}
@media screen and (max-width: 780px) {
.footer__map-btn .mob-text {
display: block;
}
}
.footer__map-btn:hover {
border-color: #1C427F;
}
.footer__map-btn:active {
background: #1c427f;
color: #ffffff;
}
@media screen and (max-width: 780px) {
.footer__map-btn:active {
color: #ffffff;
background: #7A95C0;
}
}
.footer__map-btn:active svg {
fill: #fff;
}
.footer__map-btn svg {
width: 20px;
height: 20px;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
fill: #1C427F;
transition: all 0.3s;
}
@media screen and (max-width: 780px) {
.footer__map-btn svg {
display: none;
}
}
.footer__map-btn.active {
background: #1c427f;
color: #ffffff;
pointer-events: none;
}
@media screen and (max-width: 780px) {
.footer__map-btn.active {
color: #ffffff;
background: #7A95C0;
}
}
.footer__map-btn.active svg {
fill: #fff;
}
.footer__map-hint {
margin: 20px 0 0;
color: #ffffff;
font-size: 16px;
text-align: right;
}
@media screen and (max-width: 1600px) {
.footer__map-hint {
text-align: center;
}
}
.footer__payment-btn {
display: inline-block;
margin: 0 0 30px 0;
text-align: center;
font-weight: 800;
font-size: 16px;
color: #fff;
padding: 15px;
text-decoration: none;
border-radius: 6px;
transition: background 0.3s;
background: #f03444;
}
.footer__payment-btn:hover {
background: #ee1c2e;
}
.footer__payment-btn:active {
background: #e01122;
}