body{
font-family:Arial, sans-serif;
margin:0;
background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
color:white;
text-align:center;
}

header{
padding:40px;
background:linear-gradient(270deg,#00c6ff,#0072ff,#00c6ff);
background-size:400% 400%;
animation:gradientMove 8s ease infinite;
}

@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.logo{
width:110px;
border-radius:50%;
background:white;
padding:5px;
box-shadow:0 0 15px rgba(0,0,0,0.3);
}

nav{
background:#00bcd4;
padding:12px;
}

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

nav a:hover{
color:black;
}

.search-box{
margin:20px;
}

.search-box input{
width:300px;
padding:10px;
border-radius:20px;
border:none;
}

.filters{
margin:20px;
}

.filters button{
margin:5px;
padding:8px 15px;
border:none;
background:#00bcd4;
color:white;
border-radius:20px;
cursor:pointer;
}

.title{
font-size:30px;
margin-top:20px;
}

.products{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
padding:30px;
}

.product{
background:white;
color:black;
padding:15px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
transition:0.3s;
}

.product:hover{
transform:translateY(-10px);
}

.product img,
.product video{
width:100%;
border-radius:6px;
}

.price{
color:#00bcd4;
font-size:20px;
font-weight:bold;
}

button{
background:#25D366;
border:none;
color:white;
padding:10px;
border-radius:6px;
cursor:pointer;
}

.contact{
background:white;
color:black;
padding:40px;
}

footer{
background:black;
padding:20px;
}

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:15px 18px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
}

/* RESPONSIVE */

@media (max-width:1200px){
.products{
grid-template-columns:repeat(4,1fr);
}
}

@media (max-width:900px){
.products{
grid-template-columns:repeat(3,1fr);
}
}

@media (max-width:600px){
.products{
grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:400px){
.products{
grid-template-columns:1fr;
}
}

/* SLIDER */

.slider{
width:100%;
height:400px;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
}

.slider img{
width:100%;
height:100%;
object-fit:contain;
}

/* PRODUCT IMAGE ZOOM CURSOR */

.product img{
cursor:pointer;
}

/* NEW TAG */

.tag{
position:absolute;
top:10px;
left:10px;
background:red;
color:white;
padding:4px 8px;
font-size:12px;
border-radius:5px;
}

.product{
position:relative;
}

.repair{
background:white;
color:black;
padding:40px;
margin:30px;
border-radius:10px;
}

.repair-box p{
font-size:18px;
margin:8px;
}

/* REPAIR SECTION */

.repair{
background:#111;
padding:50px 20px;
margin-top:40px;
}

.repair-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}

.repair-card{
background:linear-gradient(135deg,#00c6ff,#0072ff);
padding:20px;
border-radius:10px;
font-size:18px;
font-weight:bold;
color:white;
transition:0.3s;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.repair-card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.repair-btn{
margin-top:30px;
background:#25D366;
border:none;
padding:12px 25px;
font-size:16px;
border-radius:8px;
cursor:pointer;
}

.repair .title{
color:white;
text-align:center;
font-size:30px;
margin-bottom:20px;
}

.repair-form{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
justify-content:center;
align-items:center;
}

.form-box{
background:white;
padding:30px;
border-radius:10px;
width:300px;
text-align:center;
color:black;
}

.form-box input{
width:90%;
padding:10px;
margin:8px;
border-radius:6px;
border:1px solid #ccc;
}

.close{
background:red;
margin-top:10px;
}