.footer-widget { margin-bottom: 30px; &, .widget { padding: 0; border: none; padding-bottom: 0; background-color: transparent; } .widget_title { margin: -9px 0 30px 0; color: var(--white-color); font-size: 24px; img { display: block; padding-top: 12px; } } &.widget_meta, &.widget_pages, &.widget_archive, &.widget_categories, &.widget_nav_menu { margin-bottom: 40px; a { width: max-content; display: block; border: none; font-size: 16px; font-weight: 400; margin-bottom: 16px; max-width: 100%; padding: 0; &:hover { background-color: transparent; color: $theme-color; } &:before { display: none; } } li { > span { @include equal-size(auto); position: relative; background-color: transparent; color: $body-color; line-height: 1; } &:last-child { a { margin-bottom: 0; } } } } &.widget_nav_menu .menu { a { font-size: 16px; color: var(--white-color); padding-left: 15px; position: relative; span { position: absolute; content: ""; width: 0%; height: 1px; background-color: var(--white-color); bottom: -2px; right: 0; transition: all 0.3s ease-in-out; } &::before, &::after { content: ""; display: block; position: absolute; left: 0; right: auto; top: 0; font-family: var(--icon-font); font-weight: 400; color: var(--theme-color); @include smooth-transition; } &::before { content: "\f105"; opacity: 1; visibility: visible; } &::after { opacity: 0; visibility: hidden; content: "\f101"; display: none; } &:hover { color: var(--white-color); transform: translateX(15px); span { width: 100%; left: 0; } &::before, &::after { color: var(--white-color); } &::after { opacity: 1; visibility: visible; } } } } .footer-links { > ul { display: grid; grid-template-columns: repeat(2, 1fr); } a { margin-bottom: 21px; } } } .footer-logo { margin-bottom: 15px; } .footer-text { margin: 0em 0 20px 0; max-width: 300px; color: var(--white-color); } .footer-bottom { padding: 1.5rem 0; background: var(--white-color); border-radius: 0; margin-left: 0; padding-left: 0; } .footer-divider { height: 50px; width: 2px; background: var(--title-color); margin: auto 42px; @include respond-below(xl) { margin: auto 0; } } .footer-info { display: flex; align-items: center; background-color: var(--theme-color); border-radius: 10px; padding: 5px 30px 5px 5px; &_group { display: flex; justify-content: center; border-right: 1px solid #152b54; padding: 60px 0 60px 0; &:last-child { border-right: none; } &.style2 { border: none; .footer-info_icon { background-color: transparent; border: 1px solid #35496f; } } } &_icon { width: 60px; height: 60px; line-height: 60px; text-align: center; background-color: var(--sec-color); color: var(--white-color); font-size: 18px; margin: 0 11px 0 0; display: inline-block; border-radius: 10px; } &_label { color: var(--white-color); font-size: 16px; font-family: var(--title-font); text-transform: capitalize; display: block; margin: 0 0 0px 0; } &_link { color: var(--white-color); font-weight: 700; font-size: 16px; a { color: inherit; position: relative; &::after { position: absolute; content: ""; width: 0%; height: 1px; background-color: var(--white-color); bottom: -2px; right: 0; transition: all 0.3s ease-in-out; } &:hover { color: var(--white-color); &::after { width: 100%; left: 0; } } } } &.style2 { padding: 0; background-color: transparent; margin-bottom: 20px; &:last-child { margin-bottom: 0; } .footer-info { &_label, &_link { color: var(--white-color); } &_icon { width: 50px; height: 50px; line-height: 50px; background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; margin-right: 20px; } &_link { a { &:hover { color: var(--white-color); } } } } } } .footer-number { border-top: 1px solid #14284f; padding: 43px 0 0 0; margin: 34px 0 0 0; position: relative; &:before { content: ""; position: absolute; top: -1px; left: -60px; width: 9999px; height: 1px; border: inherit; } .info { color: $body-color; margin: 0; line-height: 1; display: inline-block; &:hover { color: $theme-color; } } .title { margin: 0 0 7px 0; } } .footer-map { max-width: 400px; width: 100%; frame { max-width: 100%; } } .footer-social { .social-title { font-family: $title-font; color: $title-color; font-size: 20px; display: inline-block; margin-right: 20px; font-weight: 700; } a { display: inline-block; width: 45px; height: 45px; line-height: 45px; font-size: 16px; margin: 0 5px 0 0; color: var(--white-color); background-color: var(--theme-color); text-align: center; border-radius: 10px; &:last-child { margin-right: 0; } &:hover { background-color: var(--white-color); color: var(--theme-color); } } &.style2 { a { background-color: $white-color; outline: 2px solid #e7e8ec; outline-offset: -2px; color: $body-color; box-shadow: 8px 13.856px 30px 0px rgba(132, 137, 154, 0.1); &:hover { background-color: $theme-color; color: $white-color; outline-color: transparent; } } } } .footer-newsletter { display: flex; input { background-color: transparent; border-radius: 5px 0 0 5px; border: 1px solid #14284f; height: 55px; color: $white-color; flex: 1; @include inputPlaceholder { color: $white-color; } } .vs-btn { border-radius: 0 5px 5px 0; &:hover { background-color: $theme-color; color: $white-color; } &:after, &::before { display: none; } } } .footer-schedule { table { border: none; margin: -0.3em 0 0 0; } th, td { padding: 0 0 10px 0; color: $body-color; border: none; font-weight: 400; } } .footer-number1 { font-size: 30px; font-weight: 700; color: $body-color; font-family: $title-font; margin-bottom: 25px; display: block; width: max-content; } .footer-mail1, .footer-address1 { padding-left: 25px; position: relative; > i:first-child { position: absolute; left: 0; top: 4px; } } .footer-address1 { max-width: 250px; } .footer-mail1 { color: $body-color; text-decoration: underline; i:first-child { top: 2px; } } .footer-info-list { margin: 35px 0 22px 0; .info { position: relative; margin-bottom: 21px; padding-left: 30px; max-width: 250px; i:first-child { position: absolute; left: 0; top: 4px; color: $theme-color; } a { @extend .text-inherit; } } } .newsletter-form2 { .form_text { margin: -0.3em 0 22px 0; display: block; max-width: 300px; } input { background-color: #ebecf1; margin-bottom: 15px; border-radius: 7px; } } @include ml { .menu-all-pages-container.footer-links { width: 330px; max-width: 100%; } .footer-number:before { display: none; } } @include lg { .footer-widget { margin-bottom: 40px; .widget_title { font-size: 26px; } } .footer-number { padding: 27px 0 0 0; margin: 17px 0 0 0; } .footer-info { &_group { padding: 0; border: none; } } } @media (min-width: $md) and (max-width: $ml) { .footer-newsletter { display: block; input { border-radius: 5px; margin-bottom: 20px; } .vs-btn { border-radius: 5px; } } }