/*==================================
GLOBAL RESET
==================================*/

*,
*::before,
*::after{

margin:0;

padding:0;

box-sizing:border-box;

}

/*==================================
HTML
==================================*/

html{

font-size:16px;

scroll-behavior:smooth;

-webkit-text-size-adjust:100%;

}

/*==================================
BODY
==================================*/

html,body{

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

font-size:16px;

font-weight:400;

line-height:1.7;

color:#222;

background:#ffffff;

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

/*==================================
BREWIKA FOOTER
PART 1
==================================*/

:root{

--green:#0f7b43;
--green-dark:#08562f;
--green-light:#1aa35d;

--white:#fff;
--text:#d8e7df;

}

.brew-footer{

position:relative;

overflow:hidden;

background:linear-gradient(
135deg,
#08562f 0%,
#0f7b43 50%,
#127b46 100%
);

padding:90px 0 35px;

color:#fff;

}

/*==========================
BACKGROUND GLOW
==========================*/

.brew-footer::before{

content:"";

position:absolute;

left:-220px;

top:-220px;

width:520px;

height:520px;

border-radius:50%;

background:

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

filter:blur(80px);

}

.brew-footer::after{

content:"BREWIKA";
text-decoration:none;
position:absolute;

right:-60px;

bottom:-30px;

font-size:190px;

font-weight:900;

letter-spacing:10px;

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

pointer-events:none;

white-space:nowrap;

}

/*==========================
CONTAINER
==========================*/

.footer-container{

position:relative;

z-index:5;

width:min(1400px,92%);

margin:auto;

display:grid;

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

gap:60px;

align-items:flex-start;

}

/*==========================
COMMON TITLE
==========================*/

.footer-links h3,
.footer-contact h3{

font-size:22px;
text-decoration:none;
font-weight:700;

margin-bottom:28px;

color:#fff;

position:relative;

}

.footer-links h3::after,
.footer-contact h3::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:45px;

height:3px;

border-radius:30px;

background:#fff;

opacity:.7;

}
/*==================================
BREWIKA FOOTER
PART 2
==================================*/

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

.footer-about{

max-width:420px;

}

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

.footer-logo{

display:inline-block;

font-size:42px;
text-decoration:none;
font-weight:900;

letter-spacing:6px;

color:#fff;

text-transform:uppercase;

margin-bottom:24px;

transition:.35s;

}

.footer-logo:hover{

color:#b7ffd4;

}

/*==========================
DESCRIPTION
==========================*/

.footer-about p{

font-size:15px;

line-height:2;

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

margin-bottom:35px;

max-width:360px;

}

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

.footer-social{

display:flex;

align-items:center;

gap:16px;

flex-wrap:wrap;

}

/*==========================
SOCIAL ICON
==========================*/

.footer-social a{

width:52px;
text-decoration:none;
height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

color:#fff;

font-size:18px;

transition:.35s ease;

box-shadow:
0 12px 28px rgba(0,0,0,.15);

}

/* Hover */

.footer-social a:hover{

transform:
translateY(-6px)
scale(1.08);

background:#fff;

color:#0f7b43;

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

}

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

.footer-links{

display:flex;

flex-direction:column;

}

.footer-links a{

display:inline-block;

margin-bottom:16px;
text-decoration:none;
font-size:15px;

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

transition:.3s;

position:relative;

width:max-content;

}

/* Underline */

.footer-links a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#b7ffd4;

transition:.3s;

}

.footer-links a:hover{

color:#fff;

padding-left:8px;

}

.footer-links a:hover::after{

width:100%;

}
/*==================================
BREWIKA FOOTER
PART 3
==================================*/

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

.footer-contact{

display:flex;

flex-direction:column;

}

.footer-contact p{

font-size:15px;

line-height:1.9;

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

margin-bottom:18px;

}

.footer-contact a{

display:inline-block;

margin-bottom:16px;

color:#fff;
text-decoration:none;
font-size:15px;

transition:.35s;

width:max-content;

position:relative;

}

.footer-contact a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#b7ffd4;

transition:.35s;

}

.footer-contact a:hover{

color:#b7ffd4;

}

.footer-contact a:hover::after{

width:100%;

}

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

.footer-bottom{

margin-top:70px;

padding-top:28px;

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

text-align:center;

position:relative;

z-index:5;

}

.footer-bottom p{

font-size:14px;

letter-spacing:1px;

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

}

/*==========================
1050px
==========================*/

/*==========================
1050px
==========================*/

@media (max-width:1050px){

.footer-container{

width:94%;

display:grid;

grid-template-columns:1.8fr 1fr 1fr 1.2fr;

gap:30px;

align-items:flex-start;

}

.footer-logo{

font-size:34px;

letter-spacing:4px;

}

.footer-about p{

font-size:14px;

line-height:1.8;

max-width:300px;

}

.footer-links h3,
.footer-contact h3{

font-size:20px;

margin-bottom:22px;

}

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

font-size:14px;

margin-bottom:12px;

}

.footer-social{

gap:10px;

}

.footer-social a{

width:44px;

height:44px;

font-size:16px;

}

.footer-bottom{

margin-top:45px;

}

}

/*==========================
767px
==========================*/

@media(max-width:767px){

.brew-footer{

padding:70px 0 25px;

}

.footer-container{

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.footer-about{

margin:auto;

}

.footer-about p{

margin:auto auto 30px;

}

.footer-social{

justify-content:center;

}

.footer-links{

align-items:center;

}

.footer-links h3::after,

.footer-contact h3::after{

left:50%;

transform:translateX(-50%);

}

.footer-contact{

align-items:center;

}

.footer-bottom{

margin-top:45px;

}

}

/*==========================
480px
==========================*/

@media(max-width:480px){

.brew-footer{

padding:55px 0 20px;

}

.footer-container{

width:92%;

gap:30px;

}

.footer-logo{

font-size:30px;

letter-spacing:4px;

}

.footer-about p{

font-size:14px;

line-height:1.8;

}

.footer-links h3,

.footer-contact h3{

font-size:20px;

}

.footer-links a,

.footer-contact a,

.footer-contact p{

font-size:14px;

}

.footer-social{

gap:12px;

}

.footer-social a{

width:46px;

height:46px;

font-size:16px;

}

.footer-bottom{

margin-top:35px;

padding-top:20px;

}

.footer-bottom p{

font-size:12px;

}

  }