body{
margin:0;
font-family:Arial, sans-serif;
background:#000;
color:#fff;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#000;
position:sticky;
top:0;
}

.logo{
font-size:28px;
font-weight:bold;
color:#ff5a00;
}

.menu a{
margin-left:20px;
text-decoration:none;
color:white;
}

.hero{
padding:30px;
}

.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}

.left{
flex:1;
}

.left h1{
font-size:60px;
line-height:1.1;
}

.left span{
color:#ff5a00;
}

.left p{
font-size:20px;
color:#ccc;
}

.buttons{
margin-top:30px;
}

.btn,.btn2{
padding:14px 28px;
text-decoration:none;
margin-right:15px;
border-radius:8px;
font-weight:bold;
}

.btn{
background:#ff5a00;
color:white;
}

.btn2{
border:2px solid #ff5a00;
color:#ff5a00;
}

.right img{
width:100%;
max-width:550px;
border-radius:16px;
}

.products, .gallery{
padding:60px 30px;
text-align:center;
}

.products h2,.gallery h2{
font-size:40px;
color:#ff5a00;
margin-bottom:40px;
}

.cards{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.card{
background:#111;
padding:20px;
border-radius:16px;
width:300px;
}

.card img{
width:100%;
height:250px;
object-fit:cover;
border-radius:10px;
}

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

.gallery-grid img{
width:100%;
border-radius:12px;
}

footer{
background:#111;
padding:40px;
text-align:center;
margin-top:50px;
}

@media(max-width:768px){
.left h1{
font-size:38px;
}
nav{
flex-direction:column;
gap:10px;
}
}
.whatsapp-float{
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: #25D366;
   color: white;
   padding: 12px 18px;
   border-radius: 50px;
   text-decoration: none;
   font-weight: bold;
   z-index: 9999;
}
.right img{
transition: 0.4s;
}

.right img:hover{
transform: scale(1.03);
box-shadow: 0 0 30px orange;
}
/* 3D LOGO */

.logo-3d{
    width:160px;
    margin:20px 0;
    perspective:1000px;
}

.logo-3d img{
    width:100%;
    animation:logoMove 5s infinite ease-in-out;
    filter:drop-shadow(0 0 20px orange);
}

@keyframes logoMove{

    0%{
        transform:rotateY(0deg) rotateX(0deg);
    }

    25%{
        transform:rotateY(15deg) rotateX(10deg);
    }

    50%{
        transform:rotateY(0deg) rotateX(15deg);
    }

    75%{
        transform:rotateY(-15deg) rotateX(10deg);
    }

    100%{
        transform:rotateY(0deg) rotateX(0deg);
    }
}