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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

font-size:16px;

font-weight:400;

line-height:1.6;

color:#222;

background:#fff;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

text-rendering:optimizeLegibility;

}

/*==================================
BREWIKA PREMIUM SECTION
PART 1
==================================*/

:root{

--red:#d60000;
--green:#0f7b43;
--dark:#222;
--white:#fff;
--bg:#f8f8f8;

}

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

.brew-quality,
.brew-impact{

position:relative;

padding:130px 0;

background:#fafafa;

overflow:hidden;

}

.quality-container,
.impact-container{

width:min(1400px,92%);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

position:relative;

z-index:5;

}

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

.brew-quality{

background:
linear-gradient(
135deg,
#d60000 0%,
#b40000 100%
);

}

.brew-impact{

background:#ffffff;

}

/*==================================
DOT PATTERN
==================================*/

.brew-quality::before{

content:"";

position:absolute;

left:-120px;

top:-80px;

width:550px;

height:550px;

background:
radial-gradient(
rgba(255,255,255,.22) 2px,
transparent 2px
);

background-size:22px 22px;

opacity:.55;

}

.brew-quality::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:520px;

height:520px;

border-radius:50%;

background:

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

filter:blur(40px);

}

/*==================================
SECTION TAG
==================================*/

.section-tag{

display:inline-flex;

align-items:center;

padding:12px 24px;

background:#fff;

color:var(--red);

font-size:13px;

font-weight:700;

letter-spacing:2px;

border-radius:40px;

margin-bottom:25px;

}

.section-tag.green{

color:var(--green);

}

/*==================================
CONTENT
==================================*/

.quality-card,
.impact-content{

position:relative;

z-index:5;

}

.quality-card h2,
.impact-content h2{

font-size:clamp(55px,5vw,82px);

font-weight:800;

line-height:.92;

margin-bottom:28px;

}

.quality-card h2{

color:#fff;

}

.impact-content h2{

color:#222;

}

.quality-card p,
.impact-content p{

font-size:18px;

line-height:2;

max-width:520px;

}

.quality-card p{

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

}

.impact-content p{

color:#666;

}
/*==================================
BREWIKA PREMIUM SECTION
PART 2
==================================*/

/*==========================
IMAGE AREA
==========================*/

.quality-image,
.impact-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

/*==========================
IMAGE CARD
==========================*/

.quality-image img,
.impact-image img{

width:100%;

max-width:650px;

height:480px;

object-fit:cover;

border-radius:28px;

display:block;

box-shadow:
0 35px 80px rgba(0,0,0,.18);

transition:.6s ease;

}

/*==========================
FLOAT CARD
==========================*/

.quality-image::before{

content:"";

position:absolute;

left:-35px;

bottom:-35px;

width:220px;

height:180px;

background:#ffffff;

border-radius:24px;

box-shadow:
0 20px 60px rgba(0,0,0,.15);

z-index:-1;

}

.impact-image::before{

content:"";

position:absolute;

right:-35px;

top:-35px;

width:220px;

height:180px;

background:linear-gradient(
135deg,
#d60000,
#0f7b43
);

border-radius:24px;

opacity:.12;

z-index:-1;

}

/*==========================
GREEN ACCENT
==========================*/

.quality-image::after{

content:"";

position:absolute;

right:-18px;

top:40px;

width:14px;

height:120px;

border-radius:50px;

background:#0f7b43;

}

.impact-image::after{

content:"";

position:absolute;

left:-18px;

bottom:40px;

width:14px;

height:120px;

border-radius:50px;

background:#d60000;

}

/*==========================
HOVER
==========================*/

.quality-image:hover img,
.impact-image:hover img{

transform:scale(1.05);

box-shadow:
0 45px 90px rgba(0,0,0,.22);

}

/*==========================
FLOAT
==========================*/

.quality-image{

animation:floatImage 6s ease-in-out infinite;

}

.impact-image{

animation:floatImage2 7s ease-in-out infinite;

}

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes floatImage2{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}
/*==================================
BREWIKA PREMIUM
PART 3
==================================*/

/*==========================
BUTTONS
==========================*/

.quality-btn,
.impact-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:14px;

min-width:220px;

height:58px;

padding:0 34px;

margin-top:40px;

font-size:15px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

border-radius:8px;

transition:.4s ease;

position:relative;

overflow:hidden;

}

/*==========================
QUALITY BUTTON
==========================*/

.quality-btn{

background:#fff;

color:#222;
text-decoration:none;
box-shadow:
0 18px 40px rgba(0,0,0,.15);

}

.quality-btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

transition:.5s;

}

.quality-btn:hover::before{

left:100%;

}

.qualitbackground: linear-gradient(135deg, #b83280,, #c850c0, #ff758c);y-btn:hover{
  

transform:translateY(-6px);

box-shadow:
0 28px 60px rgba(0,0,0,.22);

}

/*==========================
IMPACT BUTTON
==========================*/

.impact-btn{

background: linear-gradient(135deg, #b83280, #c850c0, #ff758c);

color:#fff;
  text-decoration:none;

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

}

.impact-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

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

transform:skewX(-25deg);

transition:.5s;

}

.impact-btn:hover::before{

left:150%;

}

.impact-btn:hover{

transform:translateY(-6px);

box-shadow:
0 30px 65px rgba(15,123,67,.30);

}

/*==========================
SECTION ANIMATION
==========================*/

.quality-card,
.impact-content,
.quality-image,
.impact-image{

animation:fadeUp .9s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================
DECORATIVE LINE
==========================*/

.quality-card::after,
.impact-content::after{

content:"";

display:block;

margin-top:35px;

width:90px;

height:4px;

border-radius:50px;

background:linear-gradient(
90deg,
#d60000,
#0f7b43
);

}

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

.brew-quality ::selection,
.brew-impact ::selection{

background:#d60000;

color:#fff;

}
/*==================================
BREWIKA PREMIUM
PART 4
==================================*/

/*==========================
1200px
==========================*/

@media (max-width:1200px){

.quality-container,
.impact-container{

width:94%;

gap:60px;

}

.quality-image img,
.impact-image img{

height:420px;

}

}

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

@media (max-width:767px){

.brew-quality,
.brew-impact{

padding:90px 0;

}

.quality-container,
.impact-container{

grid-template-columns:1fr;

gap:45px;

}

.impact-image{

order:1;

}

.impact-content{

order:2;

}

.quality-card,
.impact-content{

text-align:center;

}

.quality-card p,
.impact-content p{

margin:auto;

}

.quality-card::after,
.impact-content::after{

margin:30px auto 0;

}

.section-tag{

font-size:11px;

padding:10px 18px;

}

.quality-card h2,
.impact-content h2{

font-size:46px;

}

.quality-card p,
.impact-content p{

font-size:15px;

line-height:1.8;

}

.quality-btn,
.impact-btn{

width:220px;

height:52px;

margin:auto;
margin-top:30px;

font-size:14px;

}

.quality-image img,
.impact-image img{

height:360px;

border-radius:22px;

}

.quality-image::before,
.impact-image::before{

width:160px;

height:130px;

}

}

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

@media (max-width:480px){

.brew-quality,
.brew-impact{

padding:65px 0;

}

.quality-container,
.impact-container{

width:92%;

gap:30px;

}

.section-tag{

font-size:10px;

padding:8px 15px;

margin-bottom:15px;

}

.quality-card,
.impact-content{

text-align:left;

}

.quality-card h2,
.impact-content h2{

font-size:32px;

line-height:1;

margin-bottom:18px;

}

.quality-card p,
.impact-content p{

font-size:14px;

line-height:1.7;

}

.quality-btn,
.impact-btn{

width:100%;

height:48px;

font-size:13px;

margin-top:22px;

border-radius:0;

}

.quality-image img,
.impact-image img{

height:240px;

border-radius:16px;

}

.quality-image::before,
.impact-image::before{

display:none;

}

.quality-image::after,
.impact-image::after{

display:none;

}

}

/*==========================
1800px
==========================*/

@media (min-width:1800px){

.quality-container,
.impact-container{

max-width:1650px;

}

.quality-card h2,
.impact-content h2{

font-size:92px;

}

.quality-image img,
.impact-image img{

max-width:760px;

height:540px;

}

                            }