/*=====================================
UWELLC PREMIUM CSS V2
PART 1
GLOBAL • HEADER • HERO
======================================*/

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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#ffffff;
color:#111111;
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

img{
width:100%;
height:auto;
display:block;
}

a{
text-decoration:none;
}

.container{
width:92%;
max-width:1400px;
margin:auto;
}

/*========== HEADER ==========*/

.header{

position:fixed;

top:0;
left:0;

width:100%;

height:82px;

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

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,0,0,.05);

z-index:9999;

transition:.35s;

}

.navbar{

height:82px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:56px;
width:auto;

}

.nav-links{

display:flex;

align-items:center;

gap:42px;

list-style:none;
 overflow-x:auto;
 white-space:nowrap;
 scrollbar-width:none;
 -webkit-overflow-scrolling:touch;
}

.nav-links::-webkit-scrollbar{
 display:none;

}

.nav-links a{

font-size:16px;

font-weight:600;

color:#111;

position:relative;

transition:.35s;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0;

height:2px;

background:#D4AF37;

transition:.35s;

}

.nav-links a:hover{

color:#D4AF37;

}

.nav-links a:hover::after{

width:100%;

}

.nav-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

background:#111;

color:#fff;

border-radius:50px;

font-size:15px;

font-weight:700;

transition:.35s;

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

}

.nav-btn:hover{

background:#D4AF37;

color:#111;

transform:translateY(-3px);

}

/*========== HERO ==========*/

.hero{

position:relative;

margin-top:82px;

overflow:hidden;

}

.hero-image{

position:relative;

}

.hero-image::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
90deg,
rgba(0,0,0,.60),
rgba(0,0,0,.18)
);

z-index:1;

}

.hero-image img{

display:block;

width:100%;

}

.hero-content{

position:absolute;

top:50%;

left:8%;

transform:translateY(-50%);

max-width:580px;

z-index:2;

color:#fff;

}

.hero-tag{

display:inline-block;

padding:9px 18px;

border-radius:50px;

background:rgba(212,175,55,.18);

border:1px solid rgba(212,175,55,.35);

color:#FFE08A;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.hero-content h1{

font-size:70px;

line-height:1.08;

font-weight:800;

margin-bottom:22px;

}

.hero-content h1 span{

color:#D4AF37;

}

.hero-content p{

font-size:19px;

line-height:1.9;

color:#f2f2f2;

margin-bottom:35px;

}

.hero-btn{

display:inline-block;

padding:18px 42px;

border-radius:50px;

background:#D4AF37;

color:#111;

font-size:16px;

font-weight:700;

transition:.35s;

box-shadow:0 18px 45px rgba(212,175,55,.35);

}

.hero-btn:hover{

background:#fff;

transform:translateY(-4px);

}

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

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

display:inline-block;

font-size:14px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:#D4AF37;

margin-bottom:15px;

}

.section-heading h2{

font-size:52px;

font-weight:800;

line-height:1.2;

color:#111;

margin-bottom:18px;

}

.section-heading p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.9;

color:#666;
}
 
/*=====================================
UWELLC PREMIUM CSS V2
PART 2
ABOUT • BRAND • PRODUCTS
======================================*/

/*========== SECTION SPACING ==========*/

.about,
.brand-section,
.why-uwellc,
.products-section{

padding:120px 0;

}

.about{

background:#ffffff;

}

.brand-section{

background:#f8f9fb;

}

.why-uwellc{

background:#ffffff;

}

.products-section{

background:#f8f9fb;

}

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

.about-left{

width:92%;

max-width:1400px;

margin:auto;

}

.about-left img{

border-radius:28px;

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

transition:.45s;

}

.about-left img:hover{

transform:translateY(-8px);

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

}

/*========== BRAND BANNER ==========*/

.brand-banner{

width:92%;

max-width:1400px;

margin:auto;

}

.brand-banner img{

border-radius:28px;

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

transition:.45s;

}

.brand-banner img:hover{

transform:translateY(-8px);

}

/*========== WHY CHOOSE ==========*/

.benefit-banner{

width:92%;

max-width:1400px;

margin:auto;

}

.benefit-banner img{

border-radius:28px;

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

transition:.45s;

}

.benefit-banner img:hover{

transform:translateY(-8px);

}

/*========== AFTERSET SHOWCASE ==========*/

.afterset-showcase{

display:grid;

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

gap:35px;

width:92%;

max-width:1400px;

margin:60px auto 90px;

}

.afterset-box,
.afterset-sachet{

background:#fff;

border-radius:30px;

padding:20px;

box-shadow:0 20px 55px rgba(0,0,0,.08);

transition:.4s;

}

.afterset-box:hover,
.afterset-sachet:hover{

transform:translateY(-8px);

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

}

.afterset-box img,
.afterset-sachet img{

border-radius:20px;

}

/*========== PRODUCT CATEGORIES ==========*/

.categories-banner{

width:92%;

max-width:1400px;

margin:70px auto;

}

.categories-banner img{

border-radius:28px;

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

transition:.45s;

}

.categories-banner img:hover{

transform:translateY(-8px);

}

/*========== PRODUCT COLLECTION ==========*/

.collection-banner{

width:92%;

max-width:1400px;

margin:70px auto;

}

.collection-banner img{

border-radius:28px;

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

transition:.45s;

}

.collection-banner img:hover{

transform:translateY(-8px);

}

/*========== WHEY PRIME ==========*/

.whey-banner{

width:92%;

max-width:1400px;

margin:70px auto 40px;

}

.whey-bottle{

width:70%;

max-width:800px;

margin:0 auto;

}

.whey-banner img,
.whey-bottle img{

border-radius:28px;

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

transition:.45s;

}

.whey-banner img:hover,
.whey-bottle img:hover{

transform:translateY(-8px);

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

}
 /*=====================================
UWELLC PREMIUM CSS V2
PART 3
HOW TO USE • PACKAGING •
TESTIMONIALS • CONTACT • ICONS
======================================*/

/*========== HOW TO USE ==========*/

.how-use-section{

padding:120px 0;

background:#ffffff;

}

.how-banner{

width:92%;

max-width:1400px;

margin:auto;

}

.how-banner img{

border-radius:28px;

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

transition:.45s;

}

.how-banner img:hover{

transform:translateY(-8px);

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

}

/*========== PACKAGING ==========*/

.packaging-section{

padding:120px 0;

background:#f8f9fb;

}

.packaging-banner{

width:92%;

max-width:1400px;

margin:auto;

}

.packaging-banner img{

border-radius:28px;

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

transition:.45s;

}

.packaging-banner img:hover{

transform:translateY(-8px);

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

}

/*========== TESTIMONIALS ==========*/

.testimonials-section{

padding:120px 0;

background:#ffffff;

}

.testimonial-banner{

width:92%;

max-width:1400px;

margin:auto;

}

.testimonial-banner img{

border-radius:28px;

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

transition:.45s;

}

.testimonial-banner img:hover{

transform:translateY(-8px);

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

}

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

.contact-section{

padding:120px 0;

background:#f8f9fb;

}

.contact-banner{

width:92%;

max-width:1400px;

margin:auto;

}

.contact-banner img{

border-radius:28px;

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

transition:.45s;

}

.contact-banner img:hover{

transform:translateY(-8px);

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

}

/*========== ICON SECTION ==========*/

.icon-section{

padding:120px 0;

background:#ffffff;

}

.icon-banner,

.icon-library{

width:92%;

max-width:1400px;

margin:60px auto;

}

.icon-banner img,

.icon-library img{

border-radius:28px;

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

transition:.45s;

}

.icon-banner img:hover,

.icon-library img:hover{

transform:translateY(-8px);

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

}

/*========== PREMIUM IMAGE EFFECT ==========*/

.brand-banner img,

.benefit-banner img,

.afterset-box img,

.afterset-sachet img,

.categories-banner img,

.collection-banner img,

.whey-banner img,

.whey-bottle img,

.how-banner img,

.packaging-banner img,

.testimonial-banner img,

.contact-banner img,

.icon-banner img,

.icon-library img,

.footer-banner img{

cursor:pointer;

transition:
transform .45s ease,
box-shadow .45s ease;

}
 /*=====================================
UWELLC PREMIUM CSS V2
PART 4
FOOTER • ANIMATION • RESPONSIVE
======================================*/

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

.footer-banner-section{
padding:80px 0 0;
background:#ffffff;
}

.footer-banner{
width:92%;
max-width:1400px;
margin:auto;
}

.footer-banner img{
border-radius:28px;
box-shadow:0 25px 70px rgba(0,0,0,.12);
transition:.45s;
}

.footer-banner img:hover{
transform:translateY(-8px);
box-shadow:0 35px 85px rgba(0,0,0,.18);
}

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

footer{

background:linear-gradient(180deg,#101010,#050505);

color:#fff;

padding:90px 0 35px;

text-align:center;

}

.footer-logo{

width:150px;

margin:0 auto 25px;

}

.footer-top h2{

font-size:42px;

font-weight:800;

margin-bottom:12px;

}

.footer-top p{

font-size:17px;

line-height:1.9;

color:#d4d4d4;

margin-bottom:10px;

}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

gap:42px;

flex-wrap:wrap;

margin:45px 0;

}

.footer-links a{

color:#fff;

font-size:17px;

font-weight:600;

transition:.35s;

}

.footer-links a:hover{

color:#D4AF37;

}

.footer-bottom{

margin-top:35px;

padding-top:25px;

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

font-size:15px;

color:#bdbdbd;

}

/*========== FADE ANIMATION ==========*/

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(45px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.hero,
.about,
.brand-section,
.why-uwellc,
.products-section,
.how-use-section,
.packaging-section,
.testimonials-section,
.contact-section,
.icon-section,
.footer-banner-section{

animation:fadeUp .8s ease;

}

/*========== SMOOTH EFFECT ==========*/

.hero-btn,
.nav-btn,
img,
.footer-links a{

transition:all .35s ease;

}

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

@media(max-width:1100px){

.hero-content{

max-width:480px;

}

.hero-content h1{

font-size:52px;

}

.afterset-showcase{

grid-template-columns:1fr;

gap:25px;

}

.whey-bottle{

width:90%;

}

}

@media(max-width:768px){

.header{

position:relative;

}

.navbar{

flex-direction:column;

height:auto;

padding:18px 0;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

gap:18px;

margin:20px 0;

}

.nav-btn{

display:none;

}

.hero{

margin-top:0;

}

.hero-content{

position:absolute;

left:20px;

right:20px;

bottom:25px;

top:auto;

transform:none;

max-width:100%;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:15px;

}

.section-heading{

margin-bottom:45px;

}

.section-heading h2{

font-size:34px;

}

.section-heading p{

font-size:16px;

}

.footer-links{

flex-direction:column;

gap:18px;

}

.footer-logo{

width:120px;

}

.about,
.brand-section,
.why-uwellc,
.products-section,
.how-use-section,
.packaging-section,
.testimonials-section,
.contact-section,
.icon-section{

padding:80px 0;

}

.afterset-showcase{

grid-template-columns:1fr;

}

.whey-bottle{

width:100%;

}

}