:root{

--primary:#c89c5d;
--primary-dark:#b38342;

--dark:#0f0b08;
--dark-2:#17110c;

--white:#ffffff;
--gray:#a8a8a8;

--radius:16px;

}

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#faf8f6;
overflow-x:hidden;
}

.container{
width:min(1200px,92%);
margin:auto;
}

a{
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

/* HEADER */

.header{

position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

padding-top:14px;

background:transparent;

}

.navbar{

height:90px;

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

padding:0 26px;

background:rgba(15,11,8,.45);

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

border-radius:28px;

-webkit-backdrop-filter:blur(16px);
backdrop-filter:blur(16px);

box-shadow:0 12px 35px rgba(0,0,0,.2);

}

.logo img{
height:120px;
}

.nav-links{

display:flex;
gap:32px;

list-style:none;

}

.nav-links a{

color:#fff;
font-size:15px;
font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.header-buttons{

display:flex;
align-items:center;
gap:12px;

}

.quote-btn{

background:var(--primary);

padding:12px 24px;

border-radius:10px;

color:#fff;
font-weight:600;

}

.whatsapp-btn{

width:48px;
height:48px;

border-radius:50%;

background:#25D366;

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

color:#fff;
font-size:20px;

}

.mobile-menu{

display:none;

background:none;
border:none;

font-size:24px;
color:#fff;

cursor:pointer;

}

/* HERO */

.hero{

background:url('images/hero-banner.avif')
center center/cover;

min-height:100vh;

position:relative;

display:flex;
align-items:center;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.85),
rgba(0,0,0,.4)
);

}

.hero-grid{

position:relative;

z-index:5;

display:grid;
grid-template-columns:1fr;

gap:80px;

align-items:center;

padding-top:120px;

}

.hero-badge{

display:inline-flex;

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

padding:10px 18px;

border-radius:50px;

color:#fff;

margin-bottom:24px;

backdrop-filter:blur(10px);

}

.hero h1{

font-size:64px;

line-height:1.1;

font-weight:800;

color:#fff;

margin-bottom:20px;

}

.hero p{

font-size:18px;

line-height:1.8;

color:#d4d4d4;

max-width:600px;

margin-bottom:30px;

}

.hero-features{

display:flex;
gap:30px;

margin-bottom:40px;

flex-wrap:wrap;

}

.feature{

display:flex;
align-items:center;
gap:10px;

color:#fff;

}

.feature i{

color:var(--primary);

}

.hero-buttons{

display:flex;
gap:15px;

position:relative;
z-index:10;

}

.primary-btn{

background:var(--primary);

padding:16px 30px;

border-radius:12px;

color:#fff;
font-weight:600;

}

.secondary-btn{

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

padding:16px 30px;

border-radius:12px;

color:#fff;

}

.hero-image{

position:relative;

}

.hero-image img{

border-radius:20px;

}

.floating-card{

position:absolute;

bottom:-40px;
left:-50px;

width:220px;

background:#fff;

padding:10px;

border-radius:16px;

box-shadow:
0 20px 50px rgba(0,0,0,.2);

}

/* STATS */

.stats{

margin-top:0;

position:relative;

z-index:5;

}

.stats-grid{

display:grid;

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

gap:20px;

}

.stat-card{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

}

.stat-card h2{

font-size:40px;

color:var(--primary);

font-weight:700;

margin-bottom:8px;

}

.stat-card p{

font-size:15px;

color:#666;

}

/* MOBILE */

@media(max-width:991px){

.nav-links{
display:none;
}

.mobile-menu{
display:block;
}

.hero-grid{
grid-template-columns:1fr;
padding-top:130px;
}

.hero h1{
font-size:46px;
}

.stats-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:576px){

.header{
padding-top:10px;
padding-left:12px;
padding-right:12px;
}

.navbar{
height:68px;
padding:0 14px;
border-radius:18px;
}

.navbar .quote-btn{
display:none;
}

.hero{
padding-top:110px;
padding-bottom:60px;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:16px;
}

.hero-grid{
gap:40px;
}

.hero-buttons{
flex-direction:column;
}

.hero-buttons a{
text-align:center;
}

.stats-grid{
grid-template-columns:1fr 1fr;
}

.floating-card{
display:none;
}

.section{
padding:60px 0;
}

.section-header{
margin-bottom:40px;
}

.section-header h2{
font-size:28px;
}

.team-card{
padding:25px 20px;
}

.team-card h3{
font-size:18px;
}

.team-card p{
font-size:14px;
line-height:1.6;
}

.team-avatar,
.team-photo{
width:70px;
height:70px;
margin:0 auto 12px;
}

.lead-section{
padding:60px 0;
}

.lead-grid{
gap:20px;
}

.lead-card{
padding:25px 20px;
}

.form-header h2{
font-size:22px;
}

.form-header p{
font-size:14px;
}

.lead-card input,
.lead-card textarea,
.lead-card select{
height:50px;
font-size:14px;
}

.lead-card button{
height:50px;
font-size:15px;
}

}
.section{
padding:100px 0;
}

.section-header{
text-align:center;
margin-bottom:60px;
}

.section-tag{

display:inline-block;

background:#f4e4cb;

color:#c89c5d;

padding:8px 16px;

border-radius:50px;

font-size:13px;
font-weight:600;

margin-bottom:15px;

}

.section-header h2{

font-size:42px;

font-weight:700;

margin-bottom:15px;

}

.section-header p{

max-width:650px;

margin:auto;

color:#666;

line-height:1.8;

}

/* ABOUT */

.about-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:70px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

border-radius:24px;

width:100%;

}

.experience-box{

position:absolute;

bottom:30px;
right:-30px;

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:
0 15px 50px rgba(0,0,0,.1);

}

.experience-box h2{

font-size:40px;

color:#c89c5d;

}

.about-content h2{

font-size:48px;

margin:20px 0;

line-height:1.2;

}

.about-content p{

line-height:1.9;

color:#666;

margin-bottom:35px;

}

.about-features{

display:flex;
flex-direction:column;
gap:25px;

margin-bottom:40px;

}

.about-feature{

display:flex;
align-items:center;
gap:20px;

}

.about-feature i{

width:60px;
height:60px;

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

background:#f4e4cb;

border-radius:50%;

font-size:22px;

color:#c89c5d;

}

/* PRODUCTS */

.products-section{

background:#faf8f5;

}

.products-grid{

display:grid;

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

gap:30px;

}

.product-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.product-card:hover{

transform:translateY(-10px);

}

.product-image{

height:250px;

overflow:hidden;

}

.product-image img{

width:100%;
height:100%;

object-fit:cover;

transition:.5s;

}

.product-card:hover img{

transform:scale(1.1);

}

.product-content{

padding:25px;

}

.product-content h3{

font-size:24px;

margin-bottom:10px;

}

.product-content p{

color:#666;

line-height:1.7;

margin-bottom:20px;

}

.product-content a{

color:#c89c5d;

font-weight:600;

}

/* BRANDS */

.brands{

background:#fff;

}

.brands-grid{

display:grid;

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

gap:25px;

}

.brand-item{

height:120px;

background:#fafafa;

border-radius:18px;

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

font-size:24px;
font-weight:700;

transition:.3s;

cursor:pointer;

}

.brand-item:hover{

background:#c89c5d;

color:#fff;

}

/* RESPONSIVE */

@media(max-width:991px){

.about-grid{
grid-template-columns:1fr;
}

.products-grid{
grid-template-columns:1fr 1fr;
}

.brands-grid{
grid-template-columns:1fr 1fr;
}

.about-content h2{
font-size:38px;
}

}

@media(max-width:768px){

.products-grid{
grid-template-columns:1fr;
}

.brands-grid{
grid-template-columns:1fr;
}

.section-header h2{
font-size:32px;
}

.experience-box{
display:none;
}

.team-grid{
grid-template-columns:1fr;
}

.team-card{
padding:30px 25px;
}

.lead-grid{
grid-template-columns:1fr;
}

.lead-card{
padding:30px 25px;
}

}
/* WHY CHOOSE US */

.why-us{
background:#faf8f5;
}

.why-grid{

display:grid;

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

gap:25px;

}

.why-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.why-card:hover{

transform:translateY(-10px);

}

.why-card i{

font-size:40px;

color:#c89c5d;

margin-bottom:20px;

}

.why-card h3{

font-size:22px;

margin-bottom:10px;

}

.why-card p{

color:#666;

line-height:1.7;

}

/* OUR TEAM */

.team{
background:#faf8f5;
}

.team-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.team-card{
background:#fff;
padding:40px 32px;
border-radius:22px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.06);
transition:.35s;
}

.team-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 55px rgba(0,0,0,.1);
}

.team-avatar{
width:80px;
height:80px;
border-radius:50%;
background:linear-gradient(135deg,#c89c5d,#b38342);
color:#fff;
font-size:26px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 18px;
box-shadow:0 8px 20px rgba(200,156,93,.35);
}

.team-photo{
width:80px;
height:80px;
border-radius:50%;
object-fit:contain;
object-position:center top;
margin:0 auto 18px;
box-shadow:0 8px 20px rgba(200,156,93,.35);
display:block;
border:3px solid #c89c5d;
background:#ffffff;
}

.team-name{
display:block;
font-size:13px;
font-weight:600;
color:#c89c5d;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:8px;
}

.team-card h3{
font-size:20px;
font-weight:700;
margin-bottom:12px;
}

.team-card p{
color:#666;
line-height:1.75;
font-size:15px;
}

/* LEAD SECTION */

.lead-section{

padding:100px 0;

position:relative;
z-index:2;
overflow:visible;

background:
linear-gradient(
135deg,
#120c08,
#1e140d
);

}

.lead-grid{

display:grid;

grid-template-columns:1fr;

gap:40px;

max-width:680px;

margin:0 auto;

}

.lead-card{

background:#fff;

padding:45px;

border-radius:25px;

}

.dark-card{

background:#1b120d;

color:#fff;

}

.form-header h2{

font-size:34px;

margin-bottom:10px;

}

.form-header p{

line-height:1.7;

margin-bottom:25px;

}

.dark-card p{

color:#ddd;

}

.lead-card form{

display:flex;

flex-direction:column;

gap:15px;

}

.lead-card input,
.lead-card textarea,
.lead-card select{

height:58px;

padding:0 18px;

border:1px solid #ddd;

border-radius:12px;

font-family:Poppins;

font-size:15px;

outline:none;

}

.lead-card textarea{

height:auto;

padding-top:15px;

}

.dark-card input,
.dark-card textarea,
.dark-card select{

background:#2b2019;

border:none;

color:#fff;

}

.lead-card button{

height:58px;

border:none;

border-radius:12px;

background:#c89c5d;

color:#fff;

font-weight:600;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.lead-card button:hover{

background:#b48343;

}

/* RESPONSIVE */

@media(max-width:991px){

.why-grid{
grid-template-columns:1fr 1fr;
}

.team-grid{
grid-template-columns:1fr 1fr;
}

.lead-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.why-grid{
grid-template-columns:1fr;
}

.team-grid{
grid-template-columns:1fr;
}

.form-header h2{
font-size:28px;
}

.lead-card{
padding:30px;
}

}
/* ========================= */
/* PROJECTS */
/* ========================= */

.projects{
background:#faf8f5;
}

.gallery-grid{

display:grid;

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

grid-auto-rows:300px;

gap:20px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

}

.gallery-item.large{

grid-column:span 2;

}

.gallery-item img{

width:100%;
height:100%;

object-fit:cover;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-overlay{

position:absolute;

left:0;
right:0;
bottom:0;

padding:25px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.85)
);

color:#fff;

}

.gallery-overlay h3{

font-size:24px;

margin-bottom:5px;

}

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

.testimonials{

padding:100px 0;

background:#fff;

overflow:hidden;

}

.testimonial-slider{

overflow:hidden;

}

.testimonial-track{

display:flex;

gap:30px;

animation:scrollReviews 25s linear infinite;

width:max-content;

}

.testimonial-card{

width:360px;

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

flex-shrink:0;

}

.stars{

font-size:22px;

color:#f5b301;

margin-bottom:15px;

}

.testimonial-card p{

line-height:1.9;

color:#555;

margin-bottom:20px;

}

.testimonial-card h4{

font-size:18px;

margin-bottom:5px;

}

.testimonial-card span{

color:#777;

font-size:14px;

}

@keyframes scrollReviews{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}
@media(max-width:991px){

.gallery-grid{

grid-template-columns:
1fr 1fr;

}

.gallery-item.large{

grid-column:auto;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item{

height:280px;

}

.testimonial-card{

width:300px;

}

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

.footer{

background:#0f0b08;

color:#fff;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:40px;

}

.footer h3{

font-size:30px;

margin-bottom:20px;

}

.footer h4{

margin-bottom:20px;

font-size:20px;

}

.footer p{

line-height:1.8;

color:#bfbfbf;

margin-bottom:12px;

}

.footer p a{

color:#bfbfbf;

transition:.3s;

}

.footer p a:hover{

color:#c89c5d;

}

.footer ul{

list-style:none;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul a{

color:#bfbfbf;

transition:.3s;

}

.footer ul a:hover{

color:#c89c5d;

}

.social-links{

display:flex;
gap:12px;

margin-top:20px;

}

.social-links a{

width:45px;
height:45px;

background:#1c1511;

border-radius:50%;

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

color:#fff;

transition:.3s;

}

.social-links a:hover{

background:#c89c5d;

}

.footer hr{

border:none;
height:1px;

background:#2b241f;

margin:30px 0;

}

.footer-bottom{

text-align:center;

}

.footer-bottom a{

color:var(--primary);

text-decoration:none;

font-weight:600;

}

.footer-bottom a:hover{

text-decoration:underline;

}

/* ========================= */
/* WHATSAPP */
/* ========================= */

.floating-whatsapp{

position:fixed;

right:25px;
bottom:25px;

width:65px;
height:65px;

border-radius:50%;

background:#25d366;

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

font-size:30px;

color:#fff;

z-index:999;

box-shadow:
0 10px 30px rgba(0,0,0,.2);

}

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

#backToTop{

position:fixed;

right:25px;
bottom:105px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:#c89c5d;

color:#fff;

font-size:18px;

cursor:pointer;

display:none;

z-index:999;

}

/* ========================= */
/* MOBILE NAV */
/* ========================= */

.mobile-nav{

position:fixed;

top:90px;
left:-100%;

width:100%;
height:100vh;

background:#0f0b08;

transition:.4s;

z-index:999;

}

.mobile-nav.active{

left:0;

}

.mobile-nav-inner{

display:flex;

flex-direction:column;

padding:40px;

gap:25px;

}

.mobile-nav a{

color:#fff;

font-size:18px;

}

.mobile-quote-btn{

display:inline-block;

margin-top:10px;

padding:14px 28px;

background:#c89c5d;

color:#fff !important;

font-weight:600;

font-size:16px !important;

border-radius:8px;

text-align:center;

}

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

.fade-up{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}

.fade-up.show{

opacity:1;

transform:
translateY(0);

}

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

@media(max-width:991px){

.footer-grid{

grid-template-columns:
1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:
1fr;

}

}

/* ========================= */
/* MOBILE ALIGNMENT FIXES */
/* ========================= */

section{
scroll-margin-top:120px;
}

@media(max-width:991px){

.navbar{
height:76px;
padding:0 16px;
border-radius:20px;
}

.logo img{
height:75px;
width:auto;
}

.header-buttons .quote-btn{
display:none;
}

.mobile-menu{
display:block;
font-size:28px;
line-height:1;
}

.hero{
min-height:0;
padding-top:120px;
padding-bottom:56px;
}

.hero-grid{
gap:32px;
padding-top:0;
}

.hero h1{
font-size:40px;
line-height:1.15;
}

.hero p{
font-size:16px;
line-height:1.7;
}

.mobile-nav{
top:92px;
height:calc(100vh - 92px);
overflow-y:auto;
}

.mobile-nav-inner{
padding:28px 22px 40px;
gap:18px;
}

.mobile-nav a{
font-size:17px;
}

.about-grid,
.products-grid,
.brands-grid,
.why-grid,
.team-grid,
.gallery-grid,
.stats-grid,
.footer-grid{
grid-template-columns:1fr;
}

.lead-card,
.team-card,
.stat-card,
.product-content{
padding:26px 20px;
}

.section{
padding:72px 0;
}

.section-header{
margin-bottom:36px;
}

.section-header h2,
.about-content h2,
.form-header h2{
font-size:30px;
line-height:1.25;
}

.product-image,
.gallery-item{
height:220px;
}

.lead-section{
padding:70px 0;
}

.lead-grid{
max-width:100%;
gap:24px;
}

.lead-card input,
.lead-card select,
.lead-card textarea,
.lead-card button{
height:50px;
font-size:14px;
}

.lead-card textarea{
height:120px;
padding-top:14px;
}

#backToTop{
right:16px;
bottom:88px;
width:46px;
height:46px;
display:flex !important;
align-items:center;
justify-content:center;
font-size:20px;
}

.floating-whatsapp{
right:14px;
bottom:28px;
width:54px;
height:54px;
font-size:24px;
}

}

@media(max-width:576px){

.header{
padding-top:10px;
}

.container{
width:min(1200px,94%);
}

.navbar{
height:70px;
padding:0 12px;
}

.logo img{
height:65px;
}

.header-buttons{
gap:8px;
}

.whatsapp-btn{
width:42px;
height:42px;
font-size:18px;
}

.hero h1{
font-size:34px;
}

.hero-buttons{
flex-direction:column;
}

.hero-buttons a{
text-align:center;
width:100%;
}

.mobile-nav{
top:84px;
height:calc(100vh - 84px);
}

.testimonial-card{
width:280px;
padding:26px 20px;
}

.footer{
padding:60px 0 24px;
}

}

/* ========================= */
/* MOBILE OVERFLOW HOTFIX */
/* ========================= */

@media(max-width:991px){

html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

.container,
.header .container{
width:100%;
max-width:100%;
padding-left:14px;
padding-right:14px;
}

.navbar{
width:100%;
max-width:100%;
}

.hero,
.stats,
.about,
.products-section,
.brands,
.why-us,
.team,
.projects,
.testimonials,
.lead-section,
.footer{
overflow-x:hidden;
}

.gallery-grid{
grid-template-columns:1fr;
grid-auto-rows:auto;
}

.gallery-item,
.gallery-item.large{
grid-column:auto;
height:220px;
}

.testimonial-slider{
overflow:hidden;
}

.testimonial-track{
width:100%;
display:flex;
flex-direction:column;
gap:16px;
animation:none;
transform:none !important;
}

.testimonial-card{
width:100%;
max-width:100%;
}

}