/* Colorful, eye-catching theme for SK Electricals
   Mobile-first, responsive, uses gradients and micro-animations
*/

:root{
  --primary:#0b63b6; /* deep blue */
  --primary-2:#183b6b;
  --secondary:#06b6d4; /* teal */
  --accent:#ff7a00; /* orange */
  --accent-2:#8b5cf6; /* purple */
  --muted:#556670;
  --bg:#f6f8fb;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
  --glass-blur: 8px;
  --radius:16px;
  --shadow: 0 12px 36px rgba(16,24,40,0.08);
}

/* Soft page background with radial highlight */
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;margin:0;color:#07203b;background:radial-gradient(1200px 600px at 10% 10%, rgba(139,92,246,0.04), transparent 12%), radial-gradient(800px 400px at 90% 90%, rgba(6,182,212,0.03), transparent 14%), var(--bg);-webkit-font-smoothing:antialiased}

/* Container sized for ~6" phones then expands */
.container{max-width:420px;margin:0 auto;padding:16px}
@media (min-width:760px){.container{max-width:1100px;padding:24px}}

/* Topbar - colorful strip */
.topbar{background: linear-gradient(90deg,var(--secondary), var(--primary));color:#fff}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-weight:600}
.topbar a{color:rgba(255,255,255,0.95);text-decoration:none}

/* Header */
.site-header{background:rgba(255,255,255,0.65);backdrop-filter: blur(var(--glass-blur));-webkit-backdrop-filter: blur(var(--glass-blur));box-shadow:0 6px 22px rgba(7,18,33,0.06);position:sticky;top:10px;z-index:60;padding:10px;border-radius:12px;margin:10px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Brand with gradient text for premium feel */
.brand{margin:6px 0;color:var(--primary-2);font-weight:800;font-size:1.6rem;letter-spacing:0.6px;line-height:1}
.brand{background:linear-gradient(90deg,var(--primary),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:760px){.brand{font-size:2.6rem}}

/* Header actions clean layout */
.header-actions{display:flex;gap:10px;align-items:center}

/* Polished lang-toggle including floating variant */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:0;padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer;font-size:0.95rem;box-shadow:0 8px 26px rgba(124,58,237,0.12);transition:transform .18s ease,box-shadow .18s ease}
.lang-toggle:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(124,58,237,0.14)}
.lang-toggle:active{transform:translateY(0)}
.lang-toggle.floating{position:fixed;right:16px;top:16px;z-index:9999;padding:10px 12px;background:linear-gradient(90deg,#fff,#f7f9ff);color:var(--primary-2);border:1px solid rgba(11,99,182,0.06);box-shadow:0 10px 36px rgba(4,7,24,0.08)}

/* Hero bigger, more airy */
.hero{padding:26px;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,251,255,0.86));box-shadow:0 18px 50px rgba(11,99,182,0.04);border:1px solid rgba(11,99,182,0.03)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media (min-width:760px){.hero-grid{grid-template-columns:1fr 460px}}
.hero h2{font-size:1.5rem;margin:0 0 10px;color:var(--primary-2);line-height:1.05}
@media (min-width:760px){.hero h2{font-size:2.1rem}}
.hero .lead{color:var(--muted);font-size:1rem}
.hero-image img{width:100%;height:auto;border-radius:14px;box-shadow:0 18px 60px rgba(7,24,48,0.08);border:2px solid rgba(255,255,255,0.7)}

/* Accent CTA */
.btn{display:inline-block;padding:12px 16px;border-radius:14px;text-decoration:none;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-right:8px;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.btn:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(124,58,237,0.12)}
.btn.outline{background:transparent;color:var(--primary);border:2px solid rgba(11,99,182,0.12)}
.btn.primary.pulse{animation:pulse 3s infinite}
@keyframes pulse{0%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-3px) scale(1.02);opacity:0.98}100%{transform:translateY(0) scale(1);opacity:1}}

/* Cards with colorful borders */
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);padding:16px;border-radius:14px;border-left:6px solid rgba(11,99,182,0.06);box-shadow:0 12px 34px rgba(16,24,40,0.06);transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s ease}
.card:hover{transform:translateY(-10px);box-shadow:0 28px 70px rgba(16,24,40,0.08)}

/* Feature bullets with color badges */
.features{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;padding:0}
@media (min-width:760px){.features{grid-template-columns:repeat(2,1fr)}}
.features li{padding:10px;background:linear-gradient(180deg,#fff, #fbfdff);border-radius:10px;border:1px solid rgba(11,99,182,0.04);display:flex;gap:12px;align-items:flex-start}
.features li:before{content:"";width:10px;height:10px;background:var(--secondary);border-radius:3px;margin-top:6px}

/* Category grid - colorful tiles */
.shop-by-category h3{margin-top:18px}
.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
@media (min-width:760px){.category-grid{grid-template-columns:repeat(3,1fr)}}
.category-card{display:flex;align-items:center;gap:12px;padding:12px;background:linear-gradient(180deg,#fff,#fcfdff);border-radius:12px;border:1px solid rgba(11,99,182,0.04);text-decoration:none;color:inherit;box-shadow:0 10px 28px rgba(11,99,182,0.04);transition:transform .18s ease,box-shadow .18s ease}
.category-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(11,99,182,0.06)}
.category-card img{width:72px;height:72px;border-radius:12px}

/* Brands row with colored backgrounds */
.brands{margin-top:18px}
.brands-row{display:flex;gap:18px;overflow-x:auto;padding:12px 4px}
.brand-tile{min-width:160px;padding:18px 20px;border-radius:18px;border:1px solid rgba(11,99,182,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.98));box-shadow:0 12px 36px rgba(11,99,182,0.04)}
.brand-tile img{height:84px}

/* Testimonials with colorful accent */
.testimonials blockquote{background:linear-gradient(90deg,#fffaf0,#fffbf5);padding:16px;border-left:6px solid var(--accent);margin:10px 0;border-radius:12px}

/* Products / About rows */
.product-row{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.product-row img{width:140px;height:100px;object-fit:cover;border-radius:10px}
@media (min-width:760px){.product-row img{width:240px;height:160px}}

.about-grid{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
.about-image img{width:110px;height:110px;object-fit:cover;border-radius:12px;border:3px solid rgba(255,255,255,0.5)}
.shop-photo img{width:100%;height:auto;border-radius:12px;margin-top:10px}

/* Map and contact photo */
.map-and-photo{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.map-and-photo{grid-template-columns:1fr 360px}}

/* Footer - colorful gradient */
.site-footer{background:linear-gradient(90deg,#041529,#07203b);color:#fff;padding:28px 0;margin-top:30px;border-top:4px solid rgba(124,58,237,0.08)}
.site-footer a{color:#fff;text-decoration:none}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.copyright{text-align:center;padding:8px;color:#b9c4d8;font-size:0.9rem}

/* Floating WhatsApp button */
.whatsapp-fab{position:fixed;right:14px;bottom:14px;background:linear-gradient(90deg,#25D366,#06b6d4);color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:22px;box-shadow:0 18px 50px rgba(2,120,84,0.14)}

/* Reveal animations */
.animate{opacity:0;transform:translateY(12px) scale(.995);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.2,1)}
.animate.in-view{opacity:1;transform:translateY(0) scale(1)}

/* Small interactive touches */
.brand-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--secondary),var(--accent));color:#fff;font-weight:700}

/* Focus outlines */
a:focus{outline:3px solid rgba(124,58,237,0.16);outline-offset:3px}

/* Utilities */
.lead{margin-top:6px;color:var(--muted)}
img{max-width:100%;height:auto}

/* Gallery grid */
.gallery{margin-top:20px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{display:block;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(2,6,23,0.04)}
.gallery-img{display:block;width:100%;height:140px;object-fit:cover;transition:transform .28s ease}
.gallery-item:hover .gallery-img{transform:scale(1.04)}

/* Rotating showcase (two circular frames) */
.rotating-showcase{display:flex;justify-content:center;margin-top:18px}
.rotating-inner{display:flex;gap:20px;align-items:center}
.rotating-slot{width:140px;height:140px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:6px solid rgba(255,255,255,0.8);box-shadow:0 18px 40px rgba(16,24,40,0.08);background:linear-gradient(135deg, rgba(11,99,182,0.06), rgba(124,58,237,0.04));position:relative;transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.rotating-slot img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .6s ease,transform .6s ease}
.rotating-slot.fade img{opacity:0;transform:scale(.96) rotate(-6deg)}

/* slow spin for subtle motion */
.rotating-slot.spin{animation:spin-slow 18s linear infinite}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media (min-width:760px){.rotating-slot{width:180px;height:180px}}
@media (max-width:420px){.rotating-slot{width:120px;height:120px}}

.rotating-showcase + .small{margin-top:8px;text-align:center}