/*=========================== 11.FOOTER css ===========================*/ .footer-area{ background: #101e3b; position: relative; &::before{ position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/working-line.png); opacity: .02; } & .footer-logo{ & a{ & img{ @media #{$xs} { width: 70%; } } } } & .footer-widget{ @media #{$lg} { margin-left: 0; } @media #{$xs} { margin-left: 0; } & .footer-title{ & .title{ color: $white; font-size: 18px; font-weight: 600; } } & .footer-items-1{ padding-top: 32px; & p{ color: #aeb7ca; font-size: 14px; line-height: 26px; padding-bottom: 35px; } & ul{ & li{ display: inline-block; & a{ height: 40px; width: 40px; text-align: center; line-height: 36px; border-radius: 5px; border: 2px solid #2d416a; color: #556a96; font-size: 14px; margin-right: 5px; @include transition(0.3s); &:hover{ background: $theme-color; color: $white; border-color: $theme-color; } } } } } & .footer-items-2{ padding-top: 30px; & ul{ & li{ & a{ font-size: 14px; color: #aeb7ca; line-height: 32px; @include transition(0.3s); &:hover{ color: $theme-color; } } } } } & .footer-items-3{ margin-top: 37px; & .News-item{ & .News-thumb{ width: 140px; & img{ width: 100%; border-radius: 5px; } } & .News-content{ padding-left: 18px; & .title{ font-size: 16px; font-weight: 700; color: $white; line-height: 28px; margin-top: -5px; @media #{$lg} { font-size: 14px; line-height: 26px; } } & span{ font-size: 14px; color: #aeb7ca; } } } } } & .footer-copyright{ height: 85px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: space-between; border-top: 2px solid #2b3c60; margin-top: 76px; @media #{$xs} { display: block; text-align: center; } @media #{$sm} { display: flex; } & span{ color: #aeb7ca; @media #{$xs} { padding: 20px 0 5px; } & i{ padding-right: 6px; font-size: 24px; } } & p{ color: #aeb7ca; font-size: 14px; } } } .back-top{ .back-to-top { position: absolute; left: 50%; transform: translateX(-50%); bottom: 60px; height: 50px; width: 50px; background: $theme-color; text-align: center; border-radius: 50%; color: $white; line-height: 50px; @include transition(0.3s); z-index: 99; cursor: pointer; display: none; font-size: 24px; & i{ transition: all linear 0.3s; color: $white; } } &.back-top-2{ & .back-to-top{ position: fixed; right: 30px; bottom: 30px; left: auto; z-index: 9999999; } } } .footer-3-area{ background: #041d47; padding-top: 50px; position: relative; &::before{ position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/working-line.png); opacity: .02; } & .footer-item-1{ & p{ color: #aeb7ca; padding-top: 30px; padding-bottom: 30px; } & ul{ & li{ display: inline-block; & a{ height: 40px; width: 40px; background: #14346b; border-radius: 5px; color: #4a70b1; text-align: center; line-height: 40px; margin-right: 5px; @include transition(0.3s); &:hover{ background: $theme-color-3; color: $white; } } } } } & .footer-item-2{ margin-left: 50px; @media #{$lg} { margin-left: 0; } @media #{$md} { margin-left: 0; } @media #{$xs} { margin-left: 0; } & .title{ color: $white; font-size: 18px; font-weight: 700; text-transform: capitalize; padding-bottom: 28px; } & p{ color: #aeb7ca; padding-bottom: 24px; } & .links-list{ display: flex; & ul{ & li{ & a{ font-size: 14px; color: #aeb7ca; line-height: 32px; @include transition(0.3s); &:hover{ color: $theme-color-2; } } } } } &.footer-item-3{ margin-left: -30px; @media #{$md} { margin-left: 0; } @media #{$xs} { margin-left: 0; } & .input-box{ position: relative; & input{ width: 100%; height: 60px; background: $white; border: 0; color: $body-text; padding-left: 30px; font-size: 14px; &::placeholder{ color: $body-text; opacity: 1; } } & button{ position: absolute; right: 0; top: 0; height: 100%; width: 60px; border: 0; background: $theme-color-3; color: $white; } } } } & .footer-info{ position: relative; padding-left: 80px; @media #{$lg} { padding-left: 60px; } & .title{ font-size: 18px; color: $white; } & span{ font-size: 14px; color: #aeb7ca; padding-top: 4px; } & i{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 60px; width: 60px; background: #14346b; border-radius: 50%; text-align: center; line-height: 60px; color: #3e63a4; font-size: 24px; @include transition(0.3s); @media #{$lg} { height: 40px; width: 40px; line-height: 40px; font-size: 18px; } } &:hover{ & i{ background: $theme-color-3; color: $white; } } } & .footer-copy{ border-top: 2px solid #14346b; & p{ line-height: 75px; color: #aeb7ca; } } }