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

body{
    background:#f5f5f5;
    color:#333;
    line-height:1.6;
}

header{
    background:#0d47a1;
    color:white;
    text-align:center;
    padding:30px 20px;
}

header h1{
    font-size:40px;
}

header p{
    margin-top:10px;
    font-size:18px;
}

nav{
    background:#1565c0;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    padding:15px;
position: sticky;
top: 0;
z-index: 999;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(21, 101, 192, 0.92);
box-shadow: 0 4px 15px rgba(0,0,0,.15);
transition: all .3s ease;}

nav a{
    color:white;
    text-decoration:none;
    margin:10px 15px;
    font-weight:bold;
}

.hero{
    background:#fff;
    text-align:center;
    padding:60px 20px;
}

.hero h2{
    font-size:38px;
    margin-bottom:20px;
}

.hero p{
    font-size:18px;
    margin-bottom:25px;
}

button{
    background:#ff9800;
    color:white;
    border:none;
    padding:12px 25px;
    border-radius:8px;
    font-size:16px;
    transition: all .3s ease;
cursor: pointer;
}button:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    filter: brightness(1.08);
}

button:active{
    transform: scale(.96);
}

section{
    padding:30px;
}

.card{
    background:white;
    margin:20px 0;
    padding:20px;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}.card{
    transition: all 0.4s ease;
}
.card:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.card img{
    width:100%;
    max-width:350px;
    height:220px;
    object-fit:cover;
    transition: transform 0.4s ease;
    display:block;
    margin:auto;
    border-radius:10px 
}.card:hover img{
    transform: scale(1.05);
}

.card h3{
    margin-top:15px;
}

#contact{
    background:#0d47a1;
    color:white;
    text-align:center;
}

.floating-whatsapp{
    position:fixed;
    bottom:20px;
    right:20px;
    width:60px;
    height:60px;
    background:#25D366;
    color:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:30px;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
    z-index:9999;
}

.floating-whatsapp:hover{
    transform:scale(1.1);
}
.floating-whatsapp:hover{
    transform:scale(1.1);
}

/* 👇 YAHAN SE PASTE KARO */

form{
  max-width:500px;
  margin:20px auto;
}

form input,
form textarea{
  width:100%;
  padding:12px;
  margin:8px 0;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:16px;
  box-sizing:border-box;
}

form button{
  width:100%;
  background:#007BFF;
  color:white;
  border:none;
  padding:14px;
  border-radius:8px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
transition: all 0.3s ease;
cursor: pointer;}button:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

form button:hover{
  background:#0056b3;
}.footer{
    background:#1a1a1a;
    color:white;
    text-align:center;
    padding:30px 20px;
    margin-top:40px;
}

.footer h3{
    margin-bottom:10px;
    font-size:26px;
}

.footer p{
    margin:8px 0;
    color:#ddd;
}

.footer hr{
    margin:20px auto;
    width:80%;
    border:0;
    border-top:1px solid #555;
}.gst-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 20px;
    background: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}

.gst-btn:hover {
    background: #218838;
}.products-list {
    padding: 60px 20px;
    background: #f8f9fa;
}

.products-list h2 {
    text-align: center;
    color: #111;
    margin-bottom: 15px;
}

.section-description {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 30px;
    color: #555;
    line-height: 1.8;
}

.brush-list {
    max-width: 900px;
    margin: auto;
    columns: 2;
    gap: 40px;
}

.brush-list li {
    margin-bottom: 12px;
    font-size: 16px;
    color: #222;
}

.custom-note {
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
    color: #0b6b3a;
}.highlights{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    margin:25px 0;
}

.highlights div{
    background:#f5faff;
    border-left:5px solid #0056b3;
    padding:14px;
    border-radius:8px;
    font-weight:600;
    color:#222;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:.3s;
}

.highlights div:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
}/* Scroll Progress Bar */

#progress-bar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:4px;
    background:linear-gradient(90deg,#00c6ff,#0072ff);
    z-index:9999;
    transition:width 0.1s;
}nav{
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(12px);
    background: rgba(13,71,161,0.92);
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
    transition: all .3s ease;
}.hero-content{
    animation: heroFade 1.2s ease;
}

@keyframes heroFade{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}html{
    scroll-behavior:smooth;
}

nav a{
    position:relative;
    transition:.3s;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#ffd54f;
    transition:.3s;
}

nav a:hover::after{
    width:100%;
}

nav a:hover{
    color:#ffd54f;
}.hero{
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    transform:rotate(25deg);
    animation:shine 6s infinite;
}

@keyframes shine{
    0%{
        transform:translateX(-100%) rotate(25deg);
    }
    100%{
        transform:translateX(100%) rotate(25deg);
    }
}/* Floating Animation */
.card{
    animation: floatCard 4s ease-in-out infinite;
}

.card:nth-child(even){
    animation-delay:1.5s;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-6px);
    }
}/* Premium Heading Gradient */
.hero h2,
header h1{
    background: linear-gradient(90deg,#ffffff,#ffd54f,#ffffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 4s linear infinite;
}

@keyframes shineText{
    from{
        background-position: 0% center;
    }
    to{
        background-position: 200% center;
    }
}/* Premium Product Image Glow */

.card{
    overflow:hidden;
}

.card img{
    transition:transform .5s ease, box-shadow .5s ease;
}

.card:hover img{
    transform:scale(1.08);
    box-shadow:0 15px 35px rgba(0,198,255,.35);
}.card img{
    border-radius:12px;
}

.card:hover img{
    filter: brightness(1.08) contrast(1.05);
}/* Premium Contact Form */

input,
textarea,
select{
    transition:all .3s ease;
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:#1565c0;
    box-shadow:0 0 15px rgba(21,101,192,.25);
    transform:scale(1.01);
}