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

footer{

background:#111111;

color:#ffffff;

padding:90px 0 25px;

position:relative;

overflow:hidden;

}

/**************************************************
BACKGROUND EFFECT
**************************************************/

footer::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:rgba(214,0,0,.08);

border-radius:50%;

top:-220px;

right:-120px;

filter:blur(20px);

}

footer::after{

content:"";

position:absolute;

width:350px;

height:350px;

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

border-radius:50%;

bottom:-180px;

left:-120px;

filter:blur(20px);

}

/**************************************************
GRID
**************************************************/

.footerGrid{

display:grid;

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

gap:60px;

position:relative;

z-index:2;

}

/**************************************************
LOGO
**************************************************/

.footerLogo{

height:70px;

background:#ffffff;

padding:15px 20px;

border-radius:18px;

margin-bottom:30px;

box-shadow:0 20px 45px rgba(0,0,0,.35);

transition:.35s;

}

.footerLogo:hover{

transform:translateY(-8px);

}

footer p{

color:#d4d4d4;

line-height:1.9;

font-size:16px;

}

/**************************************************
HEADINGS
**************************************************/

footer h3{

margin-bottom:25px;

font-size:24px;

color:#ffffff;

position:relative;

padding-bottom:10px;

}

footer h3::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:55px;

height:3px;

background:#d60000;

border-radius:50px;

}

/**************************************************
LIST
**************************************************/

footer ul{

list-style:none;

padding:0;

margin:0;

}

footer li{

margin-bottom:16px;

}

footer a{

color:#d4d4d4;

transition:.35s;

font-size:16px;

}

footer a:hover{

color:#ffffff;

padding-left:8px;

}

/**************************************************
CONTACT
**************************************************/

.footerGrid p{

margin-bottom:16px;

}

.footerGrid i{

color:#d60000;

margin-right:10px;

}

/**************************************************
SOCIAL
**************************************************/

.footerSocial{

display:flex;

gap:15px;

margin-top:30px;

}

.footerSocial a{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#1d1d1d;

font-size:18px;

color:#ffffff;

transition:.35s;

}

.footerSocial a:hover{

background:#d60000;

transform:translateY(-6px);

}

/**************************************************
HR
**************************************************/

footer hr{

margin:60px 0 25px;

border:none;

height:1px;

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

}

/**************************************************
BOTTOM
**************************************************/

.footerBottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

position:relative;

z-index:2;

}

.footerBottom p{

font-size:15px;

color:#bfbfbf;

}

/**************************************************
PAYMENT / GST BOX
**************************************************/

.footerBadge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

background:#1b1b1b;

border-radius:50px;

font-size:14px;

margin-top:15px;

}

.footerBadge i{

color:#00c8ff;

}

/**************************************************
HOVER ANIMATION
**************************************************/

.footerGrid>div{

transition:.35s;

}

.footerGrid>div:hover{

transform:translateY(-6px);

}

/**************************************************
RESPONSIVE
**************************************************/

@media(max-width:1200px){

.footerGrid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footerGrid{

grid-template-columns:1fr;

text-align:center;

}

footer h3::after{

left:50%;

transform:translateX(-50%);

}

.footerLogo{

margin:auto;

margin-bottom:25px;

}

.footerBottom{

justify-content:center;

text-align:center;

}

.footerSocial{

justify-content:center;

}

}