.footer-area{ .footer-top{ border-bottom: 1px solid #233148; .single-footer-caption{ .footer-logo{ margin-bottom:30px; } .footer-pera{ .info1{ line-height: 1.8; margin-bottom: 35px; color: #7c7c7c; @media #{$lg}{ padding-right: 0px; } @media #{$md}{ padding-right: 0px; } @media #{$sm}{ padding-right: 0px; } @media #{$sm}{ padding-right: 0px; } } } .footer-number{ h4 { color: $theme-color; font-size: 30px; font-weight: 500; text-transform: capitalize; span { color: #fff; } } p { color: #bdbdbd; } } .footer-tittle{ h4{ color: #fff; font-family:$font_2; font-size: 18px; margin-bottom: 38px; font-weight: 500; text-transform: uppercase; } ul{ li{ color: #7c7c7c; margin-bottom: 15px; text-transform: capitalize; a{ color: #7c7c7c; font-weight: 300; font-size: 15px; &:hover{ color: #fff; padding-left: 5px; } } } } } .footer-form{ margin-bottom: 30px; form{ position: relative; input{ width: 100%; height: 43px; padding: 10px 20px; border: 0; background: #101720; color: #fff; &::placeholder{ color: #9fa6bd; font-weight: 300; font-size: 14px; } } .form-icon{ button{ position: absolute; top: 0px; right: 0; background: none; border: 0; cursor: pointer; padding: 14px 22px; background:#0a0f17; line-height: 1; color: $theme-color; font-size: 14px; font-weight: 300; } } } } .info.error { color:#ff0000; } .footer-cap{ margin-bottom: 30px; span{ color: $theme-color; font-size: 16px; font-weight: 300; margin-bottom: 10px; display: block; } p{ color: #7c7c7c; font-size: 16px; } } } } //copy Right .footer-bottom{ // border-top: 1px solid #1c2e4c; padding-bottom: 50px; padding-top: 30px; .footer-copy-right{ p{ color: #7c7c7c; font-weight: 300; font-size: 16px; line-height: 2; margin-bottom: 12px; i{ color:$theme-color } a{ color: $theme-color; &:hover{ color: #fff; } } } } } // Footer SociaL .footer-social { span{ color: #fff; position: relative; margin-right: 57px; &::before{ position: absolute; content: ""; width: 43px; height: 2px; background: #3b3647; top: 50%; transform: translateY(-50%); right: -56px; } } @media #{$md}{ float: left; padding-top: 10px; } @media #{$sm}{ float: left; padding-top: 10px; } @media #{$xs}{ float: left; padding-top: 10px; } a{ color:#7c7c7c; font-size: 14px; padding-left: 25px; i { @include transition(.4s); transform: rotateY(0deg); } &:hover{ color: #fff; i { transform: rotateY(180deg); } } } } }