/*=================================
NIKITA HYDRAULIC
PREMIUM CSS V2
PART-1
=================================*/

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

html{
scroll-behavior:smooth;
overflow-x:hidden;
}

body{

font-family:'Inter',sans-serif;

background:#fff;

color:#333;

overflow-x:hidden;

line-height:1.6;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

:root{

--blue:#37A9FF;

--gold:#d4af37;

--silver:#eef4f8;

--dark:#07121f;

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

--radius:16px;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

background:white;

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

z-index:999;

}

.navbar{

width:90%;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

}

.logo h2{

font-size:24px;

font-weight:800;

color:var(--dark);

}

.logo span{

color:var(--gold);

}

.logo p{

font-size:13px;

margin-top:4px;

color:#777;

}

.nav-links{

display:flex;

gap:22px;

}

.nav-links a{

font-size:15px;

font-weight:600;

color:#333;

transition:.3s;

}

.nav-links a:hover{

color:var(--blue);

}

.nav-btn a{

padding:12px 24px;

border-radius:50px;

background:var(--blue);

color:white;

font-weight:700;

}

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

.hero{

width:90%;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

padding:130px 0 70px;

}

.badge{

display:inline-block;

padding:10px 18px;

border-radius:40px;

background:#eaf7ff;

color:var(--blue);

font-size:13px;

font-weight:700;

}

.hero-left h1{

font-size:46px;

line-height:1.2;

margin:20px 0;

color:var(--dark);

}

.hero-left p{

font-size:16px;

max-width:550px;

margin-bottom:30px;

color:#666;

}

.hero-buttons{

display:flex;

gap:15px;

margin-top:25px;

}

.btn{

padding:14px 30px;

background:var(--blue);

color:white;

border-radius:40px;

font-weight:700;

}

.btn2{

padding:14px 30px;

border:2px solid var(--gold);

color:var(--dark);

border-radius:40px;

font-weight:700;

}

.hero-features{

display:grid;

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

gap:15px;

margin-top:45px;

}

.hero-features div{

padding:20px;

background:white;

border-radius:16px;

box-shadow:var(--shadow);

text-align:center;

}

.hero-features h3{

font-size:26px;

color:var(--gold);

margin-bottom:8px;

}

.hero-features span{

font-size:14px;

}

.glass-card{

padding:35px;

border-radius:20px;

background:white;

box-shadow:var(--shadow);

}

.glass-card h3{

font-size:24px;

margin-bottom:20px;

}

.glass-card li{

margin-bottom:16px;

font-size:16px;

display:flex;

gap:12px;

align-items:center;

}

.glass-card i{

color:var(--gold);

}

/*==========================
SECTION TITLE
==========================*/

.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title span{

font-size:13px;

color:var(--blue);

font-weight:700;

}

.section-title h2{

font-size:34px;

margin-top:12px;

margin-bottom:16px;

color:var(--dark);

}

.section-title p{

max-width:700px;

margin:auto;

font-size:16px;

color:#666;

}
/*=================================
PART 2
ABOUT + WHY CHOOSE + STATS
=================================*/

/* ABOUT */

section{
padding:80px 5%;
}

.about{
background:#fff;
}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

}

.about-content p{

font-size:15px;

line-height:1.8;

margin-bottom:20px;

color:#666;

}

.about-content .btn{

display:inline-block;

margin-top:15px;

}

.about-image{

display:flex;

justify-content:center;

align-items:center;

}

.about-image .card{

width:320px;

height:320px;

background:#eef8ff;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

font-size:80px;

color:#d4af37;

box-shadow:var(--shadow);

}

/* WHY CHOOSE */

.why-choose{

background:#f8fcff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}

.why-card{

background:#fff;

padding:25px;

border-radius:16px;

box-shadow:var(--shadow);

transition:.3s;

}

.why-card:hover{

transform:translateY(-6px);

}

.why-card i{

font-size:34px;

color:var(--blue);

margin-bottom:15px;

}

.why-card h3{

font-size:20px;

margin-bottom:12px;

color:var(--dark);

}

.why-card p{

font-size:15px;

line-height:1.7;

color:#666;

}

/* STATS */

.stats{

background:linear-gradient(90deg,#37A9FF,#67c8ff);

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

padding:60px 5%;

}

.stat-box{

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

padding:25px;

text-align:center;

border-radius:15px;

}

.stat-box h2{

font-size:34px;

color:#fff;

margin-bottom:10px;

}

.stat-box p{

font-size:15px;

color:#fff;

}

/* PRODUCTS */

.products{

background:#fff;

}

.product-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}

.product-card{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

}

.product-card:hover{

transform:translateY(-8px);

}

.product-card h3{

font-size:20px;

margin-bottom:12px;

color:var(--dark);

}

.product-card p{

font-size:15px;

line-height:1.7;

color:#666;

}

.product-card a{

display:inline-block;

margin-top:15px;

padding:10px 22px;

background:var(--blue);

color:#fff;

border-radius:30px;

font-size:14px;

font-weight:600;

}
/*=================================
PART 3
MATERIALS + INDUSTRIES + PROCESS
FAQ + CONTACT
=================================*/

/* MATERIALS */

.materials{
background:#eef8ff;
}

.material-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.material-grid div{
background:#fff;
padding:22px;
text-align:center;
border-radius:15px;
font-size:18px;
font-weight:700;
color:var(--dark);
box-shadow:var(--shadow);
transition:.3s;
}

.material-grid div:hover{
background:var(--blue);
color:#fff;
transform:translateY(-5px);
}

/* INDUSTRIES */

.industries{
background:#fff;
}

.industry-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.industry-card{
background:#fff;
padding:25px;
border-radius:16px;
box-shadow:var(--shadow);
text-align:center;
transition:.3s;
}

.industry-card:hover{
transform:translateY(-8px);
}

.industry-card i{
font-size:34px;
color:var(--gold);
margin-bottom:15px;
}

.industry-card h3{
font-size:20px;
margin-bottom:10px;
color:var(--dark);
}

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

/* PROCESS */

.process{
background:#f8fbff;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.step{
background:#fff;
padding:25px;
text-align:center;
border-radius:16px;
box-shadow:var(--shadow);
transition:.3s;
}

.step:hover{
transform:translateY(-8px);
}

.step h2{
font-size:40px;
color:var(--gold);
margin-bottom:10px;
}

.step h3{
font-size:18px;
color:var(--dark);
}

/* FAQ */

.faq{
background:#fff;
}

.faq-box{
background:#f8fbff;
padding:22px;
margin-bottom:18px;
border-left:4px solid var(--blue);
border-radius:12px;
box-shadow:var(--shadow);
}

.faq-box h3{
font-size:18px;
margin-bottom:10px;
color:var(--dark);
}

.faq-box p{
font-size:15px;
line-height:1.7;
color:#666;
}

/* CONTACT */

.contact{
background:#eef8ff;
}

.contact-wrapper{
display:flex;
justify-content:center;
}

.contact-card{
width:100%;
max-width:650px;
background:#fff;
padding:35px;
border-radius:18px;
box-shadow:var(--shadow);
text-align:center;
}

.contact-card h3{
font-size:26px;
margin-bottom:15px;
color:var(--dark);
}

.contact-card p{
font-size:15px;
line-height:1.8;
margin-bottom:15px;
color:#666;
}

.contact-card a{
color:var(--blue);
font-weight:600;
}

.contact-btn{
display:inline-block;
margin-top:20px;
padding:12px 28px;
background:var(--blue);
color:#fff !important;
border-radius:30px;
font-size:15px;
font-weight:700;
transition:.3s;
}

.contact-btn:hover{
background:var(--gold);
}
/*=================================
PART 4
FOOTER + RESPONSIVE + FINAL FIXES
=================================*/

/* CTA */

.cta{

background:linear-gradient(135deg,#37A9FF,#68c9ff);

padding:70px 5%;

text-align:center;

color:#fff;

}

.cta h2{

font-size:32px;

margin-bottom:15px;

font-weight:800;

}

.cta p{

font-size:16px;

max-width:700px;

margin:auto;

margin-bottom:25px;

line-height:1.7;

}

.cta a{

display:inline-block;

padding:14px 32px;

background:#fff;

color:#37A9FF;

border-radius:40px;

font-weight:700;

transition:.3s;

}

.cta a:hover{

transform:translateY(-5px);

}

/* FOOTER */

footer{

background:#07121f;

padding:50px 5%;

text-align:center;

}

footer h2{

font-size:24px;

color:#fff;

margin-bottom:10px;

}

footer p{

font-size:14px;

color:#bbb;

margin-bottom:8px;

}

/* FLOATING WHATSAPP */

.whatsapp{

position:fixed;

bottom:20px;

right:20px;

width:58px;

height:58px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

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

z-index:9999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.08);

}

/* GLOBAL FIX */

.hero,
.about-grid,
.why-grid,
.product-grid,
.material-grid,
.industry-grid,
.process-grid{

width:100%;

}

.hero-left,
.hero-right,
.about-content,
.about-image{

width:100%;

}

.product-card,
.why-card,
.industry-card,
.step,
.material-grid div,
.contact-card{

width:100%;

}

/* IMAGE FIX */

img{

max-width:100%;

height:auto;

}

/* TABLET */

@media(max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.about-grid{

grid-template-columns:1fr;

}

.hero-features{

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

}

.navbar{

flex-wrap:wrap;

gap:15px;

}

}

/* MOBILE */

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero-left h1{

font-size:34px;

}

.section-title h2{

font-size:28px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.btn,
.btn2{

width:100%;

text-align:center;

}

.nav-links{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.logo{

text-align:center;

width:100%;

margin-bottom:10px;

}

}

/* SMALL MOBILE */

@media(max-width:480px){

.hero-left h1{

font-size:28px;

}

.logo h2{

font-size:20px;

}

.section-title h2{

font-size:24px;

}

.cta h2{

font-size:26px;

}

.contact-card{

padding:25px;

}

.hero{

gap:30px;

}

}

/* PREVENT HORIZONTAL SCROLL */

html,
body{

max-width:100%;

overflow-x:hidden;

}