File: /var/www/html/WPSassoon/wp-content/themes/sassoon/scss/footer.scss
@import 'partials';
footer {
background: url(../img/footer_bg.png);
color: #fff;
min-height: 580px;
padding: 160px 0;
position: relative;
@media($sm-1679){
padding: 140px 0px;
min-height: 520px;
}
@media($sm-1481){
padding: 120px 0px;
min-height: 480px;
}
@media($sm-1199){
padding: 100px 0px;
min-height: 460px;
}
@media($sm-991){
padding: 80px 0px;
min-height: 440px;
}
@media($sm-767){
padding: 60px 0px;
min-height: 420px;
}
@media($sm-579){
padding: 40px 0px;
}
.col-md-4 ,.col-md-2{
@media($sm-767){
width: 48%;
max-width: 48%;
padding-bottom: 20px;
}
@media($sm-579){
width: 100%;
max-width: 100%;
}
}
&:before {
position: absolute;
content: '';
width: 380px;
height: 380px;
background: url(../img/footer-side-icon.svg);
background-repeat: no-repeat;
background-size: 100%;
right: 0;
bottom: 0;
z-index: 0;
@media screen and (max-width:1680px) {
width: 280px;
height: 280px;
content: '';
}
}
.footer-title {
font-family: 'Timeless';
font-weight: bold;
font-size: 20px;
padding-bottom: 36px;
margin-bottom: 0;
@media($sm-1679){
font-size: 18px;
padding-bottom: 26px;
}
@media($sm-1481){
font-size: 16px;
padding-bottom: 22px;
}
@media($sm-1199){
font-size: 14px;
}
@media($sm-991){
font-size: 13px;
}
// @media($sm-579){
// padding: 0px;
// }
}
p {
font-size: 13px;
line-height: 28px;
margin: 0;
color: #fff;
padding-right: 50px;
@media($sm-1679){
padding-right: 40px;
}
@media($sm-1481){
padding-right: 30px;
}
@media($sm-1199){
padding-right: 20px;
}
@media($sm-991){
padding-right: 0px;
}
}
.social-media-link{
margin: 0;
padding: 0;
li {
list-style: none;
}
}
.quick-links {
margin: 0;
padding: 0;
li {
list-style: none;
font-weight: 400;
font-size: 16px;
line-height: 19.36px;
letter-spacing: 0%;
padding-bottom: 26px;
@media($sm-1679){
font-size: 14px;
padding-bottom: 20px;
}
@media($sm-1481){
padding-bottom: 18px;
}
@media($sm-1199){
padding-bottom: 15px;
}
a {
text-decoration: none;
color: #fff;
}
}
}
.final-sec{
.footer-title{
@media($sm-579){
padding-top: 15px;
}
}
}
// @media screen and (max-width:1680px) {
// min-height: auto;
// padding: 120px 0;
// p {
// font-size: 10px;
// line-height: 23px;
// }
// ul li {
// font-size: 12px;
// margin: 0 0 10px 0;
// }
// h4 {
// font-size: 16px;
// margin: 0 0 20px 0;
// }
// }
.link-sec{
@media($sm-579){
padding-top: 20px;
}
}
}
.sub-footer {
padding: 65px 0;
color: #fff;
text-align: left;
background: url(../img/ready_for.png) #2E2E78;
background-size: auto;
background-repeat: no-repeat;
background-position: right;
position: relative;
@media($sm-767){
background-size: cover;
&::before{
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #303079 44.51%, rgba(31, 31, 114, 0.826795) 62.3%, rgba(46, 46, 120, 0) 86.77%);
z-index: 9;
}
}
.title {
font-family: 'Timeless';
font-weight: bold;
font-size: 46px;
z-index: 99;
@media($sm-1679){
font-size: 42px;
}
@media($sm-1481){
font-size: 38px;
}
@media($sm-1199){
font-size: 36px;
}
@media($sm-991){
font-size: 34px;
}
@media($sm-767){
font-size: 32px;
}
@media($sm-579){
font-size: 28px;
}
}
p.desc {
font-size: 18px;
margin: 0;
color: #fff;
z-index: 99;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1481){
font-size: 14px;
}
}
// @media screen and (max-width:1680px) {
// h4.title {
// font-size: 34px;
// }
// }
}
.copy-footer {
padding: 10px 0;
background: #313183;
p {
text-align: center;
font-size: 10px;
margin: 0;
color: #BBBDBE;
}
}
.round-btn {
background: #fff;
border-radius: 30px;
font-size: 15px;
padding: 8px 23px;
text-decoration: none;
color: #1C1C71;
margin: 25px 0 0 0;
display: inline-block;
font-weight: 500;
transition: all .2s ease-out;
border: 0;
z-index: 99;
&:hover {
background: #dedef7;
box-shadow: -5px 11px 10px #101a3a59;
}
@media($sm-767){
font-size: 13px;
}
}
.round-btn span {
margin: 0 12px 0 0;
}
.email-box {
position: relative;
z-index: 1;
input[type="text"] {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border-radius: 65px;
background: #2B2B79;
border: 1px solid #3E3E8E;
color: #8F8F8F;
font-size: 13px;
margin: 0px 0 0 0;
}
}
.social-media-link {
display: flex;
flex-direction: row;
li {
font-size: 12px;
margin: 0 10px 0 0;
a {
border: 1px solid #3939a1;
width: 31px;
height: 31px;
border-radius: 100%;
align-items: center;
justify-content: center;
display: flex;
&:hover {
background: #ffffff1f;
}
}
}
@media screen and (max-width:1680px) {
a {
width: 25px;
height: 25px;
}
}
}