/*=========================================================
SINDH COURIER & CARGO SERVICES
Footer CSS
Part 1
Orange • Blue • White Theme
=========================================================*/

.footer{

background:linear-gradient(135deg,#0B3B73 0%,#06264A 100%);
color:#fff;
position:relative;
margin-top:80px;
overflow:hidden;

}

.footer::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#ff7a00,#ffb347,#0d6efd,#2196f3);

}

.footer .container{

width:95%;
max-width:1400px;
margin:auto;
padding:70px 0 35px;

}

/*=========================================================
GRID
=========================================================*/

.footer-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:45px;
align-items:flex-start;

}

/*=========================================================
COLUMNS
=========================================================*/

.footer-column{

display:flex;
flex-direction:column;

}

.footer-column h4{

font-size:22px;
font-weight:700;
margin-bottom:25px;
color:#ffffff;
position:relative;

}

.footer-column h4::after{

content:"";
width:60px;
height:4px;
background:#ff7a00;
display:block;
margin-top:10px;
border-radius:20px;

}

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

.footer-about img{

width:170px;
margin-bottom:20px;
transition:.4s;

}

.footer-about img:hover{

transform:scale(1.05);

}

.footer-about h3{

font-size:26px;
font-weight:700;
margin-bottom:12px;
color:#fff;

}

.footer-about p{

line-height:1.8;
font-size:15px;
color:#d8e6f7;

}

.footer-description{

margin-top:15px;

}

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

.footer-links{

list-style:none;
padding:0;
margin:0;

}

.footer-links li{

margin-bottom:13px;

}

.footer-links a{

color:#dbe9ff;
text-decoration:none;
font-size:15px;
transition:.3s;
display:inline-flex;
align-items:center;

}

.footer-links a::before{

content:"➜";
margin-right:8px;
color:#ff9b1f;
transition:.3s;

}

.footer-links a:hover{

color:#ffffff;
padding-left:8px;

}

.footer-links a:hover::before{

color:#ffffff;

}

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

.footer-contact{

list-style:none;
padding:0;
margin:0;

}

.footer-contact li{

display:flex;
align-items:flex-start;
gap:15px;
margin-bottom:18px;
color:#d8e6f7;
line-height:1.7;

}

.footer-contact i{

width:42px;
height:42px;
background:#ff7a00;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
flex-shrink:0;
transition:.3s;

}

.footer-contact li:hover i{

background:#fff;
color:#0B3B73;
transform:rotate(360deg);

}

.footer-contact a{

color:#dbe9ff;
text-decoration:none;
transition:.3s;

}

.footer-contact a:hover{

color:#ffb347;

}

/*=========================================================
WORKING HOURS
=========================================================*/

.working-hours{

margin-top:30px;
padding:20px;
background:rgba(255,255,255,.08);
border-left:5px solid #ff7a00;
border-radius:12px;

}

.working-hours h5{

margin:0 0 12px;
font-size:18px;
color:#fff;

}

.working-hours p{

margin:6px 0;
color:#dbe9ff;

}

.working-hours strong{

font-size:18px;
color:#ffb347;

}


/*=========================================================
SINDH COURIER & CARGO SERVICES
Footer CSS
Part 2
=========================================================*/

/*=========================================================
SOCIAL MEDIA
=========================================================*/

.footer-social{

display:flex;
align-items:center;
flex-wrap:wrap;
gap:15px;
margin-top:30px;

}

.footer-social a{

width:48px;
height:48px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:#ffffff;

color:#0B3B73;

font-size:18px;

text-decoration:none;

transition:all .35s ease;

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

}

.footer-social a:hover{

background:#ff7a00;

color:#ffffff;

transform:translateY(-6px) rotate(360deg);

box-shadow:0 12px 28px rgba(255,122,0,.35);

}

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

.footer-bottom{

margin-top:60px;

padding-top:28px;

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

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footer-bottom-left p,
.footer-bottom-right p{

margin:0;

font-size:15px;

color:#d8e6f7;

}

.powered-link{

color:#ffb347;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.powered-link:hover{

color:#ffffff;

text-decoration:underline;

}

/*=========================================================
BACK TO TOP
=========================================================*/

.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

outline:none;

cursor:pointer;

border-radius:50%;

background:linear-gradient(135deg,#ff7a00,#ff9b1f);

color:#ffffff;

font-size:20px;

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

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:all .35s ease;

z-index:999;

}

.back-to-top:hover{

background:linear-gradient(135deg,#0B3B73,#1565c0);

transform:translateY(-6px);

}

.back-to-top.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

/*=========================================================
IMAGE PREVIEW (OPTIONAL)
=========================================================*/

.footer-logo img{

display:block;

max-width:180px;

height:auto;

}

/*=========================================================
SMOOTH TRANSITIONS
=========================================================*/

.footer *{

transition:all .25s ease;

}

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

@media(max-width:1200px){

.footer-grid{

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

gap:35px;

}

}

@media(max-width:768px){

.footer{

text-align:center;

}

.footer .container{

padding:55px 20px 30px;

}

.footer-grid{

grid-template-columns:1fr;

gap:35px;

}

.footer-about img{

margin:0 auto 20px;

}

.footer-column h4::after{

margin:10px auto 0;

}

.footer-contact li{

justify-content:center;

text-align:left;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

text-align:center;

gap:15px;

}

.back-to-top{

width:50px;

height:50px;

right:18px;

bottom:18px;

}

}

@media(max-width:480px){

.footer-column h4{

font-size:20px;

}

.footer-about h3{

font-size:22px;

}

.footer-about p,
.footer-links a,
.footer-contact,
.footer-bottom p{

font-size:14px;

}

.footer-social a{

width:44px;

height:44px;

font-size:17px;

}

.working-hours{

padding:16px;

}

}

/*=========================================================
SELECTION
=========================================================*/

.footer ::selection{

background:#ff7a00;

color:#ffffff;

}

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