/*==================================================
CITY NEWS PAKISTAN
PREMIUM FOOTER
PART 1
==================================================*/

.footer{

position:relative;

background:linear-gradient(135deg,#002b80 0%,#0056d6 100%);

color:#ffffff;

margin-top:80px;

overflow:hidden;

font-family:'Poppins',sans-serif;

}

.footer::before{

content:"";

position:absolute;

top:-140px;

left:-140px;

width:320px;

height:320px;

background:rgba(255,255,255,.05);

border-radius:50%;

}

.footer::after{

content:"";

position:absolute;

bottom:-160px;

right:-160px;

width:360px;

height:360px;

background:rgba(255,255,255,.05);

border-radius:50%;

}

.footer .container{

position:relative;

z-index:2;

max-width:1400px;

margin:auto;

padding:70px 20px 25px;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr
1fr
1fr
1.5fr;

gap:45px;

align-items:flex-start;

}

/*=============================
FOOTER BOX
=============================*/

.footer-box{

display:flex;

flex-direction:column;

}

.footer-box h3{

font-size:22px;

font-weight:700;

margin-bottom:25px;

position:relative;

padding-bottom:12px;

color:#ffffff;

}

.footer-box h3::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:70px;

height:4px;

background:#e30613;

border-radius:50px;

}

/*=============================
LOGO
=============================*/

.footer-logo{

height:80px;

width:auto;

object-fit:contain;

margin-bottom:20px;

}

/*=============================
ABOUT TEXT
=============================*/

.footer-about{

font-size:15px;

line-height:1.9;

color:rgba(255,255,255,.92);

margin-top:5px;

}

/*==================================================
CITY NEWS PAKISTAN
FOOTER
PART 2
==================================================*/

/*=============================
FOOTER LINKS
=============================*/

.footer-links{

list-style:none;

padding:0;

margin:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links li a{

display:flex;

align-items:center;

gap:10px;

color:#ffffff;

font-size:15px;

text-decoration:none;

transition:.35s;

}

.footer-links li a i{

color:#ff3b3b;

font-size:13px;

width:16px;

}

.footer-links li a:hover{

padding-left:8px;

color:#ffd54a;

}

.footer-links li a:hover i{

color:#ffd54a;

}

/*=============================
CONTACT INFO
=============================*/

.footer-contact{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:18px;

color:#ffffff;

line-height:1.8;

}

.footer-contact i{

width:20px;

font-size:18px;

color:#ff3b3b;

margin-top:4px;

}

.footer-contact div{

flex:1;

font-size:15px;

}

/*=============================
SOCIAL ICONS
=============================*/

.footer-social{

display:flex;

align-items:center;

gap:14px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(255,255,255,.12);

color:#ffffff;

font-size:18px;

transition:.35s;

text-decoration:none;

}

.footer-social a:hover{

background:#e30613;

transform:translateY(-6px);

color:#ffffff;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

/*=============================
NEWSLETTER
=============================*/

.newsletter{

margin-top:25px;

}

.newsletter h4{

font-size:18px;

margin-bottom:15px;

font-weight:600;

color:#ffffff;

}

.newsletter form{

display:flex;

flex-direction:column;

gap:12px;

}

.newsletter input{

width:100%;

padding:14px 16px;

border:none;

outline:none;

border-radius:8px;

font-size:15px;

background:#ffffff;

color:#333;

}

.newsletter input::placeholder{

color:#777;

}

.newsletter button{

padding:14px;

border:none;

border-radius:8px;

background:#e30613;

color:#ffffff;

font-weight:700;

font-size:15px;

cursor:pointer;

transition:.35s;

}

.newsletter button:hover{

background:#ffffff;

color:#0056d6;

}
/*==================================================
CITY NEWS PAKISTAN
FOOTER
PART 3 (FINAL)
==================================================*/

/*==============================
FOOTER BOTTOM
==============================*/

.footer-bottom{

margin-top:50px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom-left p{

font-size:14px;

color:rgba(255,255,255,.85);

margin:0;

}

.footer-bottom-right{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.footer-bottom-right span{

color:rgba(255,255,255,.35);

}

.footer-bottom-right a{

color:#ffffff;

font-size:14px;

text-decoration:none;

transition:.35s;

}

.footer-bottom-right a:hover{

color:#ff3b3b;

}

/*==============================
WHATSAPP BUTTON
==============================*/

.whatsapp-float{

position:fixed;

right:25px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:9999;

transition:.35s;

animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

transform:translateY(-6px);

color:#fff;

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.6);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/*==============================
SCROLL TOP
==============================*/

.scroll-top{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#e30613;

color:#fff;

font-size:20px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9998;

box-shadow:0 8px 25px rgba(0,0,0,.25);

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

.scroll-top:hover{

background:#0056d6;

transform:translateY(-6px);

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1200px){

.footer-grid{

grid-template-columns:repeat(2,1fr);

gap:35px;

}

}

@media(max-width:768px){

.footer{

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

gap:35px;

}

.footer-box h3::after{

left:50%;

transform:translateX(-50%);

}

.footer-contact{

justify-content:center;

text-align:left;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom-right{

justify-content:center;

}

.whatsapp-float{

right:18px;

bottom:90px;

width:55px;

height:55px;

font-size:26px;

}

.scroll-top{

right:18px;

bottom:20px;

width:50px;

height:50px;

font-size:18px;

}

}

@media(max-width:480px){

.footer .container{

padding:50px 15px 20px;

}

.footer-logo{

height:65px;

}

.footer-box h3{

font-size:20px;

}

.footer-about{

font-size:14px;

}

.newsletter input{

font-size:14px;

}

.newsletter button{

font-size:14px;

}

}

/*==============================
END FOOTER
==============================*/