/* =========================================
   Balaji Controllers
   Professional Optimized CSS
   Part-1
========================================= */



*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#f7f9fb;
color:#222;
overflow-x:hidden;
padding-top:85px;
}

/* ================= NAVBAR ================= */

.navbar{
background:#0d0d0d!important;
padding:12px 0;
transition:.3s;
}

.navbar-brand{
font-size:26px;
font-weight:700;
color:#fff!important;
}

.navbar-brand img{
height:48px;
width:auto;
margin-right:12px;
}

.nav-link{
color:#fff!important;
font-weight:600;
margin:0 10px;
transition:.3s;
}

.nav-link:hover{
color:#ffd54f!important;
transform:translateY(-2px);
}

.nav-link.active{
color:#ffc107!important;
font-weight:700;
}

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

.btn{
border-radius:30px;
}

.btn-success{

background:#00c853;

border:none;

padding:10px 22px;

font-size:17px;

font-weight:600;

transition:.3s;

}

.btn-success:hover{

background:#00a843;

transform:translateY(-2px);

}

.btn-outline-light{

padding:12px 28px;

border-radius:30px;

}

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

.hero{

min-height:90vh;

display:flex;

align-items:center;

padding:80px 0;

background:linear-gradient(135deg,#0b1320,#113d28);

color:#fff;

}

.hero .row{

align-items:center;

min-height:650px;

}

.hero h1{

font-size:60px;

font-weight:800;

}

.hero h2{

margin-top:15px;

font-size:34px;

font-weight:600;

color:#8dff9f;

}

.hero p{

margin-top:20px;

font-size:18px;

line-height:32px;

}

.hero img{

max-width:100%;

height:auto;

border-radius:20px;

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

}

.hero-img{

max-width:520px;

animation:float 4s ease-in-out infinite;

filter:drop-shadow(0 20px 35px rgba(0,0,0,.35));

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}
/* ================= CARDS ================= */

.card{
border:none;
border-radius:18px;
overflow:hidden;
transition:.35s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.card img{
height:260px;
object-fit:cover;
transition:.4s;
}

.card:hover img{
transform:scale(1.08);
}

.card-body{
text-align:center;
}

.card h3{
color:#00a843;
font-weight:700;
}

/* ================= PROBLEM SECTION ================= */

.problem-section,
.products-section{
background:#fff;
}

.problem-card{
background:#fff;
padding:30px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
text-align:center;
transition:.35s;
height:100%;
}

.problem-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.problem-card h3{
font-size:48px;
}

.problem-card h5{
margin-top:15px;
font-weight:700;
}

.problem-card p{
color:#444;
}

/* ================= WHY BALAJI ================= */

.why-balaji{
background:#f6faf7;
}

.why-card{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}

.why-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.why-card h1{
font-size:55px;
}

.why-card h4{
margin:18px 0 10px;
font-weight:700;
color:#198754;
}

.why-card p{
color:#444;
}

/* ================= PRODUCTS ================= */

.product-card{
position:relative;
background:#fff;
padding:20px;
border-radius:20px;
text-align:center;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}

.product-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.product-card img{
width:100%;
height:260px;
object-fit:contain;
margin-bottom:20px;
transition:.35s;
}

.product-card:hover img{
transform:scale(1.05);
}

.price{
font-size:30px;
font-weight:700;
color:#198754;
}

.best{
position:absolute;
top:15px;
left:15px;
background:#ff9800;
color:#fff;
padding:6px 12px;
border-radius:20px;
font-size:13px;
font-weight:700;
}

.popular{
border:3px solid #00c853;
}

.badge{
font-size:14px;
padding:8px 12px;
border-radius:20px;
}
/* ================= FLOATING BUTTONS ================= */

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
width:65px;
height:65px;
background:#25D366;
color:#fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
font-size:36px;
border:3px solid #fff;
box-shadow:0 8px 25px rgba(0,0,0,.35);
z-index:99999;
transition:.3s;
}

.whatsapp-float:hover{
transform:scale(1.12);
background:#1ebe5d;
color:#fff;
}

#topBtn{
display:none;
position:fixed;
bottom:95px;
right:27px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#198754;
color:#fff;
font-size:24px;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,.3);
z-index:99998;
transition:.3s;
}

#topBtn:hover{
background:#157347;
transform:scale(1.08);
}

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

.about p{
font-size:18px;
line-height:1.8;
}

.about h1{
margin-bottom:20px;
}

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

footer{
background:#111;
color:#fff;
}

footer h3,
footer h5,
footer h6{
font-weight:700;
}

footer p,
footer a{
color:#ddd;
text-decoration:none;
}

footer a:hover{
color:#fff;
}

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

@media (max-width:768px){

.navbar-brand{
font-size:20px;
}

.hero{
text-align:center;
padding:60px 0;
}

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

.hero h2{
font-size:24px;
}

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

.hero-img{
max-width:100%;
}

.product-card img,
.card img{
height:220px;
}

.whatsapp-float{
width:58px;
height:58px;
font-size:30px;
}

}