:root {    --primary: #ebcd25;
    --accent: #d2e26a;
    --dark: #00000082;
    --light: #00000075;
    --glass: rgba(0, 0, 0, 0.908);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif ; }
html { scroll-behavior: smooth; overflow-x: hidden; }

/* --- NAVIGATION (RESPONSIVE) --- */
.sidebar {
    position: fixed; left: 0; top: 0; width: 260px; height: 100vh;
    background: rgba(0, 0, 0, 0.853);
    padding: 2rem; z-index: 1000;
    transition: 0.5s;
}

.logo-box { text-align: center; margin-bottom: 1.2rem; color: aliceblue; }
.logo-icon {
   width: 90px;
    height: 90px;; background:rgba(96, 94, 94, 0);
    border-radius: 20px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: rgba(11, 11, 11, 0.552); font-size: 1.8rem;
    animation: rotate3D 5s infinite linear;
}
.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;}  

.nav-links { list-style: none; }
.nav-links li { margin: 1.2rem 0; }
.nav-links a {
    color: #ffee06e0; text-decoration: none; display: flex;    align-items: center; gap: 15px; font-size: 1.1rem;
    transition: 0.3s;
}
.nav-links a:hover { color: rgb(255, 251, 251); transform: translateX(10px); }

/* --- HERO SECTION --- */
.main-wrapper { margin-left: 260px; }
.hero {
    height: 100vh;
    background: url('kkk.webp') center/cover;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.hero-overlay {
    position: absolute; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent, rgba(23, 17, 17, 0.8));
}
.hero-content { position: relative; color: rgb(255, 255, 255); text-align: center; z-index: 10; padding: 20px; }

/* --- 3D CARDS --- */
.product-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; padding: 20px;
}
.card-container { perspective: 1000px; height: 400px; }
.card-3d {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.card-container:hover .card-3d { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 20px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px; overflow: hidden;
}
.card-front { background: rgba(255, 255, 255, 0.13); box-shadow: 0 10px 30px rgba(3, 62, 21, 0.2); }
.card-front img { width: 100%; height: 70%; object-fit: cover; border-radius: 15px; }
.card-back {
    background: rgb(4, 58, 28); color: rgba(1, 0, 0, 0.629);
    transform: rotateY(180deg); text-align: center;
}

/* --- ABOUT SECTION --- */
.section { padding: 80px 5%; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-image-wrapper { position: relative; }
.about-image-wrapper img { width: 100%; border-radius: 30px; transform: perspective(1000px) rotateY(-10deg); transition: 0.5s; }
.about-image-wrapper:hover img { transform: rotateY(0deg); }
.experience-badge {
    position: absolute; bottom: -20px; right: -20px;
    background: var(--primary); color: rgb(0, 0, 0); padding: 20px;
    border-radius: 50%; font-weight: bold; animation: pulse 2s infinite;
}

/* --- CONTACT & SOCIALS --- */
.contact-box { max-width: 800px; margin: 0 auto; text-align: center; }
.social-panel { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.s-link {
    width: 60px; height: 60px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: rgb(0, 0, 0);
    font-size: 1.5rem; transition: 0.4s; text-decoration: none;
}.fb { background: #1877F2; } .ig { background: #E4405F; } .wa { background: #25D366; }
.s-link:hover { transform: translateY(-10px) rotate(360deg); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* --- ANIMATIONS --- */@keyframes rotate3D {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(196, 212, 23, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(212, 160, 23, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(23, 212, 48); }
}

.btn-glow {
    padding: 15px 40px; background: var(--primary); color: rgb(5, 4, 4);
    text-decoration: none; border-radius: 50px; font-weight: bold;
    display: inline-block; transition: 0.3s; border: none; cursor: pointer;
    box-shadow: 0 0 20px rgb(212, 209, 23, 0.4);  margin-top: 20px;  
}
.btn-glow:hover { box-shadow: 0 0 40px var(--primary); transform: scale(1.05); }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 480px) {
    .sidebar {
        width: 100%; height: auto; position: sticky;
        padding: 1rem; display: flex; align-items: center; justify-content: space-between;
    }
    .main-wrapper { margin-left: 0; }
    .logo-box { margin-bottom: 0; display: flex; align-items: center; gap: 10px;font-size: 0.26cm; }
    .logo-icon { width: 60px; height: 60px; font-size: 1rem; margin: 0; }
    .nav-links { display: flex; gap: 15px; }
    .nav-links span { display: none; } /* Hide text on mobile nav icons */
    .about-grid { grid-template-columns: 1fr; } 
       .hero h2 { font-size: 2rem; }
}
@media (max-width: 480px) {
    .nav-links { gap: 10px; }
    .nav-links a { font-size: 1.2rem; }
    .section { padding: 40px 5%; }
}